* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;500;600;700&display=swap');

body {
    font-family: 'Reem Kufi', sans-serif;
    background: #3aa736;
    background-image: 
        linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 15px;
    -webkit-tap-highlight-color: transparent;
    color: #2a1a0a;
}

h1 {
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 5rem);
    color: #fff8e7;
    text-shadow: 4px 4px 0 #3d2b1f, 8px 8px 0 #1a0a00;
    margin-bottom: 30px;
    letter-spacing: 8px;
    background: #7a5230;
    padding: 15px 50px;
    border: 6px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #4a2a10,
        inset 4px 4px 0 #b8845a,
        10px 10px 0 #1a0a00;
    text-align: center;
    transition: transform 0.2s ease;
}

h1:active {
    transform: scale(0.97);
}

.st {
    font-weight: 500;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: #2a1a0a;
    background: #d4a574;
    margin-bottom: 35px;
    text-align: center;
    padding: 14px 35px;
    width: 100%;
    max-width: 650px;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #8b6239,
        inset 3px 3px 0 #f0c8a0,
        8px 8px 0 #1a0a00;
}

.co {
    background: #c49a6c;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #8b6239,
        inset 4px 4px 0 #e8c8a0,
        10px 10px 0 #1a0a00;
    padding: 30px 35px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 550px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.co:active {
    transform: translate(3px, 3px);
    box-shadow: 
        inset -4px -4px 0 #8b6239,
        inset 4px 4px 0 #e8c8a0,
        5px 5px 0 #1a0a00;
}

.co ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.co ul li {
    font-weight: 600;
    background: #dbb88c;
    padding: 16px 25px;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: #2a1a0a;
    text-align: center;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #a07848,
        inset 3px 3px 0 #f5dcc0,
        0 6px 0 #2a1a0a;
    transition: all 0.12s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.co ul li::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.co ul li:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a1a0a'%3E%3Cpath d='M15 4V3H9v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5zm2 15H7V6h10v13zM9 8h2v8H9V8zm4 0h2v8h-2V8z'/%3E%3C/svg%3E");
}

.co ul li:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a1a0a'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

.co ul li:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a1a0a'%3E%3Cpath d='M13 2L3 14h6l-2 8 10-12h-6l2-8z'/%3E%3C/svg%3E");
}

.co ul li:hover {
    transform: translateY(-3px);
    box-shadow: 
        inset -3px -3px 0 #a07848,
        inset 3px 3px 0 #f5dcc0,
        0 10px 0 #2a1a0a;
}

.co ul li:active {
    transform: translateY(0);
    box-shadow: 
        inset -3px -3px 0 #a07848,
        inset 3px 3px 0 #f5dcc0,
        0 3px 0 #2a1a0a;
}

h2:not(.st):not(div h2) {
    font-weight: 700;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: #fff8e7;
    text-shadow: 3px 3px 0 #3d2b1f;
    background: #7a5230;
    padding: 12px 40px;
    margin-bottom: 25px;
    text-align: center;
    letter-spacing: 4px;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #4a2a10,
        inset 4px 4px 0 #b8845a,
        8px 8px 0 #1a0a00;
    transition: transform 0.2s ease;
}

h2:not(.st):not(div h2):active {
    transform: scale(0.97);
}

.d {
    background: #c49a6c;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #8b6239,
        inset 4px 4px 0 #e8c8a0,
        10px 10px 0 #1a0a00;
    padding: 25px 35px;
    width: 100%;
    max-width: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    transition: all 0.15s ease;
}

.d:active {
    transform: translate(3px, 3px);
    box-shadow: 
        inset -4px -4px 0 #8b6239,
        inset 4px 4px 0 #e8c8a0,
        5px 5px 0 #1a0a00;
}

.d label {
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #2a1a0a;
    background: #dbb88c;
    padding: 10px 20px;
    border: 3px solid #2a1a0a;
    box-shadow: 
        inset -2px -2px 0 #a07848,
        inset 2px 2px 0 #f5dcc0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a1a0a'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.d a {
    font-weight: 700;
    color: #fff8e7;
    text-decoration: none;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    background: #7a3e18;
    padding: 14px 30px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #3a1808,
        inset 3px 3px 0 #b87848,
        0 6px 0 #2a1a0a;
    transition: all 0.12s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 1px 1px 0 #2a1a0a;
    white-space: nowrap;
}

.d a::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff8e7'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.d a:hover {
    background: #9b5a2e;
    transform: translateY(-3px);
    box-shadow: 
        inset -3px -3px 0 #3a1808,
        inset 3px 3px 0 #c87848,
        0 10px 0 #2a1a0a;
}

.d a:hover::after {
    transform: translateX(4px);
}

.d a:active {
    transform: translateY(0);
    box-shadow: 
        inset -3px -3px 0 #3a1808,
        inset 3px 3px 0 #c87848,
        0 3px 0 #2a1a0a;
}

div:has(> p) {
    background: #c49a6c;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #8b6239,
        inset 4px 4px 0 #e8c8a0,
        10px 10px 0 #1a0a00;
    padding: 25px 30px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin-bottom: 20px;
}

div:has(> p) p {
    font-weight: 500;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: #2a1a0a;
    line-height: 1.8;
    margin-bottom: 20px;
}

div:has(> p) h2 {
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #fff8e7;
    text-shadow: 2px 2px 0 #3d2b1f;
    background: #7a5230;
    padding: 8px 30px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #4a2a10,
        inset 3px 3px 0 #b8845a,
        6px 6px 0 #1a0a00;
    display: inline-block;
}

hr {
    border: none;
    width: 80%;
    max-width: 600px;
    height: 6px;
    background: #2a1a0a;
    box-shadow: 0 4px 0 #1a0a00;
    margin: 30px 0;
}

div:has(> ul):not(.co) {
    background: #dbb88c;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #a07848,
        inset 4px 4px 0 #f0d4b0,
        10px 10px 0 #1a0a00;
    padding: 25px 35px;
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
}

div:has(> ul):not(.co) ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

div:has(> ul):not(.co) ul li {
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #2a1a0a;
    background: #c49a6c;
    padding: 14px 22px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #8b6239,
        inset 3px 3px 0 #e8c8a0,
        0 5px 0 #2a1a0a;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.12s ease;
}

div:has(> ul):not(.co) ul li::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a1a0a'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
}

div:has(> ul):not(.co) ul li:hover {
    transform: translateY(-3px);
    box-shadow: 
        inset -3px -3px 0 #8b6239,
        inset 3px 3px 0 #e8c8a0,
        0 9px 0 #2a1a0a;
}

div:has(> ul):not(.co) ul li:active {
    transform: translateY(0);
    box-shadow: 
        inset -3px -3px 0 #8b6239,
        inset 3px 3px 0 #e8c8a0,
        0 2px 0 #2a1a0a;
}

div:has(> ol) {
    background: #dbb88c;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #a07848,
        inset 4px 4px 0 #f0d4b0,
        10px 10px 0 #1a0a00;
    padding: 25px 35px;
    width: 100%;
    max-width: 600px;
    margin-bottom: 30px;
}

div:has(> ol) ol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 20px;
    list-style: none;
    counter-reset: step;
}

div:has(> ol) ol li {
    counter-increment: step;
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #2a1a0a;
    background: #c49a6c;
    padding: 14px 22px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #8b6239,
        inset 3px 3px 0 #e8c8a0,
        0 5px 0 #2a1a0a;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.12s ease;
}

div:has(> ol) ol li::before {
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #7a5230;
    color: #fff8e7;
    font-weight: 700;
    font-size: 0.9rem;
    border: 3px solid #2a1a0a;
    box-shadow: 
        inset -2px -2px 0 #4a2a10,
        inset 2px 2px 0 #b8845a;
    flex-shrink: 0;
}

div:has(> ol) ol li:hover {
    transform: translateY(-3px);
    box-shadow: 
        inset -3px -3px 0 #8b6239,
        inset 3px 3px 0 #e8c8a0,
        0 9px 0 #2a1a0a;
}

div:has(> ol) ol li:active {
    transform: translateY(0);
    box-shadow: 
        inset -3px -3px 0 #8b6239,
        inset 3px 3px 0 #e8c8a0,
        0 2px 0 #2a1a0a;
}

.box {
    background: #c49a6c;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #8b6239,
        inset 4px 4px 0 #e8c8a0,
        10px 10px 0 #1a0a00;
    padding: 25px 30px;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.cmd {
    background: #2a1a0a;
    color: #7cfc00;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    padding: 15px 25px;
    border: 3px solid #4a3520;
    width: 100%;
    text-align: center;
    word-break: break-all;
    letter-spacing: 1px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    user-select: all;
}

.box button {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #fff8e7;
    background: #7a3e18;
    padding: 12px 40px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #3a1808,
        inset 3px 3px 0 #b87848,
        0 6px 0 #2a1a0a;
    cursor: pointer;
    transition: all 0.12s ease;
    text-shadow: 1px 1px 0 #2a1a0a;
    width: 100%;
    max-width: 250px;
}

.box button:hover {
    background: #9b5a2e;
    transform: translateY(-3px);
    box-shadow: 
        inset -3px -3px 0 #3a1808,
        inset 3px 3px 0 #c87848,
        0 10px 0 #2a1a0a;
}

.box button:active {
    transform: translateY(0);
    box-shadow: 
        inset -3px -3px 0 #3a1808,
        inset 3px 3px 0 #c87848,
        0 3px 0 #2a1a0a;
}

#msg {
    font-weight: 600;
    font-size: 1rem;
    color: #2a1a0a;
    min-height: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

@media (max-width: 600px) {
    body {
        padding: 20px 10px;
    }

    h1 {
        padding: 12px 30px;
        letter-spacing: 4px;
        border-width: 5px;
        box-shadow: 
            inset -3px -3px 0 #4a2a10,
            inset 3px 3px 0 #b8845a,
            7px 7px 0 #1a0a00;
    }

    .st {
        padding: 12px 20px;
        border-width: 4px;
        box-shadow: 
            inset -3px -3px 0 #8b6239,
            inset 3px 3px 0 #f0c8a0,
            6px 6px 0 #1a0a00;
    }

    .co {
        padding: 20px 18px;
        max-width: 95%;
        border-width: 4px;
        box-shadow: 
            inset -3px -3px 0 #8b6239,
            inset 3px 3px 0 #e8c8a0,
            7px 7px 0 #1a0a00;
    }

    .co ul {
        gap: 12px;
    }

    .co ul li {
        padding: 14px 18px;
        border-width: 3px;
        box-shadow: 
            inset -2px -2px 0 #a07848,
            inset 2px 2px 0 #f5dcc0,
            0 5px 0 #2a1a0a;
    }

    .co ul li::before {
        width: 20px;
        height: 20px;
    }

    .d {
        padding: 20px 18px;
        max-width: 95%;
        flex-direction: column;
        gap: 14px;
        border-width: 4px;
        box-shadow: 
            inset -3px -3px 0 #8b6239,
            inset 3px 3px 0 #e8c8a0,
            7px 7px 0 #1a0a00;
    }

    .d a {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 14px 20px;
    }

    div:has(> p),
    div:has(> ul):not(.co),
    div:has(> ol),
    .box {
        padding: 20px 18px;
        max-width: 95%;
        border-width: 4px;
        box-shadow: 
            inset -3px -3px 0 #8b6239,
            inset 3px 3px 0 #e8c8a0,
            7px 7px 0 #1a0a00;
    }

    div:has(> ul):not(.co) ul li,
    div:has(> ol) ol li {
        padding: 12px 16px;
        border-width: 3px;
        font-size: 0.95rem;
    }

    .cmd {
        font-size: 0.9rem;
        padding: 12px 18px;
    }

    h2:not(.st):not(div h2) {
        padding: 10px 25px;
        border-width: 4px;
        box-shadow: 
            inset -3px -3px 0 #4a2a10,
            inset 3px 3px 0 #b8845a,
            6px 6px 0 #1a0a00;
    }
}

@media (max-width: 350px) {
    h1 {
        font-size: 2.5rem;
        padding: 10px 20px;
    }

    .st {
        font-size: 1rem;
        padding: 10px 15px;
    }

    .co ul li {
        font-size: 0.95rem;
        padding: 12px 14px;
    }

    .d label, .d a {
        font-size: 1rem;
    }
}

form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 550px;
}

form label {
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #2a1a0a;
    background: #dbb88c;
    padding: 10px 20px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #a07848,
        inset 3px 3px 0 #f5dcc0;
}

form input {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #2a1a0a;
    background: #f5e6d0;
    padding: 10px 18px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #c4a882,
        inset 3px 3px 0 #fff8e7,
        0 5px 0 #2a1a0a;
    outline: none;
    min-width: 200px;
    flex: 1;
    transition: all 0.12s ease;
}

form input::placeholder {
    color: #8b7355;
    opacity: 0.7;
}

form input:focus {
    background: #fff8e7;
    box-shadow: 
        inset -3px -3px 0 #c4a882,
        inset 3px 3px 0 #ffffff,
        0 7px 0 #2a1a0a;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    form {
        flex-direction: column;
        gap: 8px;
        max-width: 95%;
    }

    form input {
        width: 100%;
        min-width: auto;
    }

    form label {
        text-align: center;
        width: 100%;
    }
}

h2 {
    font-weight: 700;
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    color: #fff8e7;
    text-shadow: 3px 3px 0 #3d2b1f;
    background: #7a5230;
    padding: 15px 30px;
    text-align: center;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #4a2a10,
        inset 4px 4px 0 #b8845a,
        8px 8px 0 #1a0a00;
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.6;
}

form div {
    background: #dbb88c;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #a07848,
        inset 4px 4px 0 #f0d4b0,
        10px 10px 0 #1a0a00;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px;
}

form label {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2a1a0a;
    text-align: center;
}

form select {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: #2a1a0a;
    background: #f5e6d0;
    padding: 10px 15px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #c4a882,
        inset 3px 3px 0 #fff8e7,
        0 5px 0 #2a1a0a;
    outline: none;
    cursor: pointer;
    text-align: center;
}
form div {
    background: #8b7355;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #5a3d2b,
        inset 4px 4px 0 #c4a882,
        8px 8px 0 #1a0a00;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    width: 100%;
    position: relative;
}

form label {
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffe4b5;
    text-align: center;
    text-shadow: 2px 2px 0 #3d2b1f;
    background: #6b4e31;
    padding: 10px 15px;
    border: 3px solid #2a1a0a;
    box-shadow: 
        inset -2px -2px 0 #4a3520,
        inset 2px 2px 0 #9b7a5a;
}

form select {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #f5e6c8;
    background: #4a3520;
    padding: 12px 15px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #2a1a0a,
        inset 3px 3px 0 #6b4e31,
        0 5px 0 #1a0a00;
    outline: none;
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23f5e6c8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    transition: all 0.1s ease;
}

form select:hover {
    background-color: #5a3d2b;
}

form select:focus {
    background-color: #5a3d2b;
    border-color: #feca57;
    box-shadow: 
        inset -3px -3px 0 #2a1a0a,
        inset 3px 3px 0 #6b4e31,
        0 5px 0 #1a0a00,
        0 0 15px rgba(254,202,87,0.4);
}

form select option {
    font-family: 'Reem Kufi', sans-serif;
    font-weight: 600;
    background: #4a3520;
    color: #f5e6c8;
    padding: 10px;
}

#msg {
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    margin-top: 20px;
    min-height: 30px;
    background: #8b7355;
    padding: 12px 20px;
    border: 4px solid #2a1a0a;
    box-shadow: 
        inset -3px -3px 0 #5a3d2b,
        inset 3px 3px 0 #c4a882,
        0 5px 0 #1a0a00;
    max-width: 500px;
    width: 100%;
    text-shadow: 2px 2px 0 #3d2b1f;
}

@media (max-width: 600px) {
    form div {
        padding: 15px 18px;
        max-width: 92%;
    }

    #msg {
        max-width: 92%;
    }
}
#test-msg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: clamp(1rem, 3vw, 1.3rem);
    text-align: center;
    padding: 20px 30px;
    background: #8b7355;
    border: 5px solid #2a1a0a;
    box-shadow: 
        inset -4px -4px 0 #5a3d2b,
        inset 4px 4px 0 #c4a882,
        0 0 0 4px #1a0a00,
        0 0 0 8px #4a3520,
        10px 10px 0 #1a0a00,
        0 0 60px rgba(0,0,0,0.7);
    max-width: 450px;
    width: 90%;
    z-index: 1000;
    text-shadow: 2px 2px 0 #3d2b1f;
    animation: popIn 0.3s ease;
    display: none;
}

#test-msg.show {
    display: block;
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 999;
    display: none;
}

.overlay.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.d {
    flex-direction: column;
    gap: 15px;
}

.d label {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.d a {
    width: 100%;
    text-align: center;
    justify-content: center;
}

@media (max-width: 600px) {
    .d {
        gap: 12px;
    }
}

body::after{
    content:" تنبيه : جميع الحقوق محفوضه لدى تاب يجب عند نشر الامر من هنا او انشاء فيديو او على وسائل التواصل الاجتماعيه او مشاركته يجب عليك ذكر مصدرنا او وضع الرابط الخاص بنا نحن لا نحلل ولا نسامح اي احد يسرق حقوق الموقع وينسبها الى نفسه";
    display: block;
    text-align: center;
    padding: 1% 0 ;
    color: #615a5a;
    font-weight: bold;

}