:root {
    --primary: #4b8178;
    --primary-dark: #4f4537;
    --primary-soft: #eaf4f4;
    --primary-light: #14919b;
    --gold: #a68d65;
    --gold-dark: #9a7824;
    --gold-soft: #f7f0dc;
    --gold-light: #e8d5a3;
    --ink: #1a2b2b;
    --muted: #5f7373;
    --muted-light: #8a9e9e;
    --surface: #ffffff;
    --surface-soft: #f7fbfb;
    --surface-elevated: #ffffff;
    --bg-1: #e7efef;
    --bg-2: #f7faf9;
    --line: #d9e5e5;
    --line-light: #e8efef;
    --shadow-xs: 0 2px 8px rgba(7,54,55,.04);
    --shadow-sm: 0 4px 16px rgba(7,54,55,.06);
    --shadow-md: 0 8px 32px rgba(7,54,55,.1);
    --shadow-lg: 0 16px 48px rgba(7,54,55,.14);
    --shadow-xl: 0 24px 64px rgba(7,54,55,.18);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-full: 9999px;
    --transition-fast: .15s ease;
    --transition-base: .25s ease;
    --transition-slow: .4s ease;
    --transition-bounce: .4s cubic-bezier(.175,.885,.32,1.275);
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --focus-ring: 0 0 0 3px rgba(75,129,120,.25);
    --focus-ring-gold: 0 0 0 3px rgba(166,141,101,.25)
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: 'Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: radial-gradient(ellipse at top right,rgb(75 129 120/.08) 0%,transparent 50%),radial-gradient(ellipse at bottom left,rgb(166 141 101/.08) 0%,transparent 50%),linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden
}

    body.loading {
        overflow: hidden;
        touch-action: none
    }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg)
}

@media (max-width:640px) {
    .page-wrapper {
        padding: var(--space-md)
    }
}

.main-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 680px;
    margin: 0 auto
}

.card {
    width: 100%;
    background: rgb(255 255 255/.95);
    border: 1px solid rgb(255 255 255/.8);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px)
}

@media (max-width:640px) {
    .card {
        padding: var(--space-lg);
        border-radius: var(--radius-xl)
    }
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,var(--gold-dark) 0%,var(--gold) 25%,var(--gold-light) 50%,var(--gold) 75%,var(--gold-dark) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite
}

@keyframes shimmer {
    0%,100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.header {
    text-align: center;
    margin-bottom: var(--space-lg)
}

.greeting-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: -8px
}

.greet-main {
    color: var(--primary);
    font-size: clamp(1rem,3.5vw,1.25rem);
    font-weight: 900;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    letter-spacing: -.2px
}

.greet-sub {
    color: var(--gold);
    font-size: clamp(.85rem,2.5vw,.95rem);
    font-weight: 700;
    margin: 0 0 12px 0;
    text-align: center
}

.service-badge {
    background: linear-gradient(135deg,var(--surface),var(--surface-soft));
    color: var(--primary-dark);
    font-size: clamp(.75rem,2vw,.85rem);
    font-weight: 800;
    padding: 6px 18px;
    border-radius: var(--radius-full);
    border: 1px solid rgb(166 141 101/.3);
    box-shadow: var(--shadow-sm);
    text-align: center;
    display: inline-block;
    margin-top: 4px
}

.service-badge {
    background: linear-gradient(135deg,var(--gold-soft),#fff);
    color: var(--gold-dark);
    font-size: clamp(.85rem,3vw,.95rem);
    font-weight: 800;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    border: 1px dashed var(--gold);
    box-shadow: var(--shadow-xs);
    text-align: center;
    display: inline-block
}

.logo-wrapper {
    position: relative;
    display: inline-flex;
    margin: 0 auto var(--space-md)
}

    .logo-wrapper img {
        width: auto;
        max-width: 120px;
        max-height: 120px;
        display: block;
        object-fit: contain;
        filter: drop-shadow(var(--shadow-sm));
        animation: floatLogo 4s ease-in-out infinite
    }

    .logo-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: -150%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgb(255 255 255/.9),transparent);
        transform: skewX(-25deg);
        animation: shineSweep 4s infinite;
        pointer-events: none;
        -webkit-mask-image: url(images/AlBayhaqi_New-Logo.png);
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-image: url(images/AlBayhaqi_New-Logo.png);
        mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat
    }

@keyframes shineSweep {
    0% {
        left: -150%
    }

    20% {
        left: 200%
    }

    100% {
        left: 200%
    }
}

.school-title {
    margin: 0 0 var(--space-xs);
    color: var(--primary);
    font-weight: 900;
    font-size: clamp(1rem,4vw,1.6rem);
    line-height: 1.3;
    white-space: nowrap;
    width: 100%
}

.subtitle {
    margin: 0;
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .5px
}

.editor-section {
    display: block;
    animation: fadeInUp .5s ease forwards
}

    .editor-section.is-hidden {
        display: none
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    border: none
}

.section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary-dark)
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg)
}

@media (max-width:480px) {
    .template-grid {
        grid-template-columns: 1fr
    }
}

.template-option {
    position: relative
}

    .template-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none
    }

.template-card {
    display: block;
    cursor: pointer;
    border: 2px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
    user-select: none
}

    .template-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: var(--line)
    }

    .template-card:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring)
    }

    .template-card img {
        display: block;
        width: 100%;
        border-radius: var(--radius-md);
        object-fit: cover;
        background: linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%);
        background-size: 200% 100%;
        animation: imageShimmer 1.5s infinite linear;
        color: transparent
    }

@keyframes imageShimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.img-portrait {
    aspect-ratio: 3/4
}

.img-landscape {
    aspect-ratio: 4/3
}

.template-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-sm)
}

.template-name {
    color: var(--ink);
    font-size: .95rem;
    font-weight: 700
}

.template-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-soft);
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff0;
    flex: 0 0 auto;
    transition: all var(--transition-base);
    font-size: .9rem;
    font-weight: 900
}

.template-option input:checked + .template-card {
    border-color: var(--gold);
    background: var(--gold-soft);
    box-shadow: 0 8px 24px rgb(166 141 101/.2)
}

    .template-option input:checked + .template-card .template-check {
        background: linear-gradient(135deg,var(--gold),var(--gold-dark));
        color: #fff;
        border-color: #fff0;
        transform: scale(1.1)
    }

.template-option input:focus-visible + .template-card {
    outline: none;
    box-shadow: var(--focus-ring-gold)
}

.form-group {
    margin-bottom: var(--space-md)
}

.form-label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--primary-dark);
    font-size: .95rem;
    font-weight: 700
}

.form-input {
    width: 100%;
    min-height: 54px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 var(--space-md);
    transition: all var(--transition-base)
}

    .form-input::placeholder {
        color: var(--muted-light);
        font-weight: 500
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: var(--focus-ring);
        background: var(--surface)
    }

    .form-input:disabled {
        background: var(--surface-soft);
        color: var(--muted);
        cursor: not-allowed;
        opacity: .7
    }

    .form-input.error {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgb(220 53 69/.15)
    }

.captcha-wrapper {
    display: grid;
    grid-template-columns: 130px 1fr 54px;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-lg)
}

@media (max-width:480px) {
    .captcha-wrapper {
        grid-template-columns: 1fr
    }
}

.captcha-display {
    min-height: 54px;
    border-radius: var(--radius-lg);
    border: 2px dashed var(--primary);
    background: linear-gradient(180deg,var(--surface-soft),var(--bg-1));
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 8px;
    direction: ltr;
    user-select: none;
    -webkit-user-select: none;
    padding: var(--space-sm)
}

.icon-button {
    min-height: 54px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--line);
    font-size: 1.3rem;
    font-weight: 900;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center
}

    .icon-button:hover {
        background: var(--primary-soft);
        border-color: var(--primary-light);
        transform: scale(1.02)
    }

    .icon-button:active {
        transform: scale(.98)
    }

    .icon-button:disabled {
        opacity: .5;
        cursor: not-allowed;
        transform: none
    }

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm)
}

@media (max-width:480px) {
    .action-buttons {
        grid-template-columns: 1fr
    }
}

.btn {
    min-height: 54px;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0 var(--space-lg);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm)
}

    .btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring)
    }

    .btn:active {
        transform: scale(.98)
    }

    .btn:disabled {
        opacity: .6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important
    }

.btn-primary {
    background: linear-gradient(180deg,var(--primary),#3b665f);
    color: #fff;
    box-shadow: 0 6px 20px rgb(75 129 120/.3)
}

    .btn-primary:hover:not(:disabled) {
        box-shadow: 0 8px 28px rgb(75 129 120/.4);
        transform: translateY(-2px)
    }

.btn-secondary {
    background: var(--surface);
    color: var(--primary-dark);
    border: 2px solid var(--line)
}

    .btn-secondary:hover:not(:disabled) {
        background: var(--surface-soft);
        border-color: var(--primary-light)
    }

.btn-gold {
    background: linear-gradient(180deg,var(--gold),var(--gold-dark));
    color: #fff;
    box-shadow: 0 6px 20px rgb(166 141 101/.3)
}

    .btn-gold:hover:not(:disabled) {
        box-shadow: 0 8px 28px rgb(166 141 101/.4);
        transform: translateY(-2px)
    }

.result-section {
    display: none;
    animation: fadeInUp .5s ease forwards
}

    .result-section.show {
        display: block
    }

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap
}

.result-title {
    margin: 0;
    font-size: 1rem;
    color: var(--primary-dark);
    font-weight: 800
}

.result-meta {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600
}

.canvas-wrapper {
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: var(--radius-xl);
    padding: var(--space-sm);
    box-shadow: var(--shadow-md)
}

#greetingCanvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    background: #fff
}

.result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-md)
}

@media (max-width:480px) {
    .result-actions {
        grid-template-columns: 1fr
    }
}

.info-note {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    border: 1px solid var(--line-light);
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.7
}

.site-footer {
    text-align: center;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgb(75 129 120/.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px
}

.footer-rights {
    color: var(--primary-dark);
    font-size: .95rem;
    font-weight: 700;
    margin: 0
}

    .footer-rights strong {
        color: var(--gold);
        font-weight: 900
    }

.footer-credit {
    font-size: .85rem;
    color: var(--primary);
    background: rgb(255 255 255/.8);
    padding: 4px 16px;
    border-radius: 20px;
    border: 1px solid var(--line);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    cursor: default;
    margin-top: 6px
}

    .footer-credit:hover {
        background: #fff;
        border-color: var(--gold);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgb(166 141 101/.15)
    }

    .footer-credit span {
        color: var(--primary-dark);
        font-weight: 900
    }

.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: rgb(7 54 55/.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

    .modal-overlay.active {
        opacity: 1;
        visibility: visible
    }

.modal {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-xl);
    text-align: center;
    transform: scale(.9) translateY(20px);
    transition: transform var(--transition-bounce)
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0)
}

.modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    font-size: 1.8rem;
    font-weight: 900
}

.modal-title {
    margin: 0 0 var(--space-sm);
    color: var(--primary-dark);
    font-size: 1.25rem;
    font-weight: 900
}

.modal-message {
    margin: 0 0 var(--space-lg);
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.8;
    font-weight: 600
}

.modal-close {
    width: 100%
}

.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgb(7 54 55/.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

    .loader-overlay.active {
        opacity: 1;
        visibility: visible
    }

.loader-card {
    min-width: 260px;
    max-width: 320px;
    background: rgb(255 255 255/.98);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-xl);
    text-align: center
}

.loader-spinner {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    border: 4px solid var(--line);
    border-top-color: var(--gold);
    border-right-color: var(--gold);
    animation: spin .8s linear infinite;
    will-change: transform
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.loader-title {
    color: var(--primary-dark);
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: var(--space-xs)
}

.loader-message {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.7
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

:focus:not(:focus-visible) {
    outline: none
}

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px
}

@media print {
    body {
        background: #fff
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc
    }

    .action-buttons, .result-actions, .modal-overlay, .loader-overlay {
        display: none !important
    }
}