/* =============================================
       ROOT & VARIABLES
       ============================================= */
    .diplome-page {
        --gold: #d97706;
        --gold-light: #fbbf24;
        --gold-dark: #b45309;
        --shadow-soft: 0 4px 20px rgba(0,0,0,0.08);
        --shadow-medium: 0 8px 30px rgba(0,0,0,0.12);
        --shadow-strong: 0 12px 40px rgba(0,0,0,0.18);
        --radius-sm: 0.5rem;
        --radius-md: 0.75rem;
        --radius-lg: 1rem;
        --radius-xl: 1.5rem;
        --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        --text-primary: #1e293b;
        --text-secondary: #475569;
        --text-muted: #94a3b8;
        --border-light: #e2e8f0;
        min-height: 100vh;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 30%, #fbbf24 60%, #d97706 100%);
        padding: 2rem 0 4rem;
        position: relative;
        overflow-x: hidden;
    }

    .diplome-page::before {
        content: '';
        position: fixed;
        inset: 0;
        background:
            radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(255,255,255,0.2) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    .diplome-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 1.5rem;
        position: relative;
        z-index: 1;
    }

    /* =============================================
       PAGE HEADER
       ============================================= */
    .page-header {
        text-align: center;
        color: var(--text-primary);
        margin-bottom: 2.5rem;
        position: relative;
    }

    .page-header h1 {
        font-size: 2.8rem;
        margin-bottom: 0.5rem;
        font-weight: 800;
        background: linear-gradient(135deg, #92400e, #78350f);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: none;
        line-height: 1.2;
    }

    .page-header p {
        font-size: 1.15rem;
        color: #78350f;
        opacity: 0.85;
        max-width: 500px;
        margin: 0 auto;
    }

    /* =============================================
       SECTION CARDS
       ============================================= */
    .section-card {
        background: white;
        border-radius: var(--radius-xl);
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: var(--shadow-medium);
        border: 1px solid rgba(255,255,255,0.8);
        position: relative;
        overflow: hidden;
    }

    .section-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
        opacity: 0.6;
    }

    .section-title {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .section-title .section-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border-radius: 10px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* =============================================
       TEMPLATE SELECTION - VISUAL CARDS
       ============================================= */
    .templates-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    .template-card {
        border: 3px solid var(--border-light);
        border-radius: var(--radius-lg);
        padding: 0.75rem;
        text-align: center;
        cursor: pointer;
        transition: all var(--transition-normal);
        background: white;
        position: relative;
        overflow: hidden;
    }

    .template-card::after {
        content: '';
        position: absolute;
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--tpl-color, var(--gold));
        opacity: 0;
        transform: scale(0);
        transition: all var(--transition-normal);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .template-card.selected::after {
        opacity: 1;
        transform: scale(1);
        content: '\2713';
        color: white;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 24px;
        text-align: center;
        padding-top: 1px;
    }

    .template-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        border-color: var(--tpl-color, var(--gold));
    }

    .template-card.selected {
        border-color: var(--tpl-color, var(--gold));
        background: var(--tpl-bg, #fffbeb);
        box-shadow: 0 0 0 3px var(--tpl-glow, rgba(217,119,6,0.2)), 0 8px 25px rgba(0,0,0,0.08);
    }

    .template-mini-preview {
        width: 100%;
        aspect-ratio: 297 / 210;
        border-radius: var(--radius-sm);
        margin-bottom: 0.6rem;
        position: relative;
        overflow: hidden;
        background: #fafafa;
        border: 1px solid #f1f5f9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.5rem;
        transition: transform var(--transition-normal);
    }

    .template-card:hover .template-mini-preview {
        transform: scale(1.03);
    }

    .mini-border {
        position: absolute;
        inset: 4px;
        border: 2px double var(--tpl-color, var(--gold));
        border-radius: 4px;
        pointer-events: none;
    }

    .mini-icon {
        font-size: 1.5rem;
        margin-bottom: 2px;
    }

    .mini-title {
        font-size: 0.45rem;
        font-weight: 700;
        color: var(--tpl-color, var(--gold));
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mini-line {
        width: 40%;
        height: 2px;
        background: var(--text-primary);
        margin: 2px 0;
        border-radius: 1px;
        opacity: 0.3;
    }

    .mini-line.short {
        width: 25%;
    }

    .template-icon {
        font-size: 1.4rem;
        display: inline-block;
        margin-right: 0.3rem;
        vertical-align: middle;
    }

    .template-name {
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--text-secondary);
        line-height: 1.3;
    }

    .template-card.selected .template-name {
        color: var(--text-primary);
    }

    .template-card-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding-top: 0.25rem;
    }

    /* =============================================
       FORM STYLES
       ============================================= */
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.4rem;
        font-size: 0.92rem;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 0.75rem 1rem;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-md);
        font-size: 1rem;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
        font-family: inherit;
        background: #fafafa;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(217,119,6,0.12);
        background: white;
    }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
    }

    .char-counter {
        position: absolute;
        right: 8px;
        bottom: 8px;
        font-size: 0.75rem;
        color: var(--text-muted);
        pointer-events: none;
        transition: color var(--transition-fast);
    }

    .char-counter.warning {
        color: #f59e0b;
    }

    .char-counter.danger {
        color: #ef4444;
        font-weight: 600;
    }

    .name-length-warning {
        display: none;
        padding: 0.5rem 0.75rem;
        background: #fef3c7;
        border: 1px solid #fde68a;
        border-radius: var(--radius-sm);
        font-size: 0.82rem;
        color: #92400e;
        margin-top: 0.35rem;
        align-items: center;
        gap: 0.3rem;
    }

    .name-length-warning.visible {
        display: flex;
    }

    /* Options row */
    .options-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid #f1f5f9;
    }

    .option-group {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .option-group label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .option-group select {
        padding: 0.5rem 0.75rem;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        font-size: 0.9rem;
        font-family: inherit;
        background: #fafafa;
        cursor: pointer;
    }

    .option-group select:focus {
        outline: none;
        border-color: var(--gold);
    }

    /* Stamp selector */
    .stamps-row {
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .stamp-btn {
        width: 40px;
        height: 40px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        background: white;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all var(--transition-fast);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stamp-btn:hover {
        border-color: var(--gold);
        background: #fffbeb;
    }

    .stamp-btn.active {
        border-color: var(--gold);
        background: #fef3c7;
        box-shadow: 0 0 0 2px rgba(217,119,6,0.2);
    }

    /* Color pickers */
    .color-picker-row {
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;
    }

    .color-picker-group {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .color-picker-group label {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .color-picker-group input[type="color"] {
        width: 36px;
        height: 36px;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-sm);
        padding: 2px;
        cursor: pointer;
        background: white;
    }

    .color-reset-btn {
        padding: 0.35rem 0.7rem;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-sm);
        background: white;
        font-size: 0.8rem;
        color: var(--text-muted);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .color-reset-btn:hover {
        border-color: var(--gold);
        color: var(--text-secondary);
    }

    /* =============================================
       MODE TOGGLE
       ============================================= */
    .mode-toggle {
        display: flex;
        gap: 0;
        margin-bottom: 1.5rem;
        background: #f1f5f9;
        border-radius: 2rem;
        padding: 4px;
        width: fit-content;
    }

    .mode-btn {
        padding: 0.6rem 1.5rem;
        border: none;
        border-radius: 2rem;
        background: transparent;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-fast);
        font-size: 0.92rem;
        color: var(--text-muted);
        font-family: inherit;
    }

    .mode-btn.active {
        background: var(--gold);
        color: white;
        box-shadow: 0 2px 8px rgba(217,119,6,0.3);
    }

    .mode-btn:not(.active):hover {
        color: var(--text-secondary);
    }

    .batch-area {
        display: none;
    }

    .batch-area.visible {
        display: block;
    }

    .batch-area textarea {
        width: 100%;
        min-height: 120px;
        padding: 0.75rem 1rem;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-md);
        font-size: 1rem;
        font-family: inherit;
        resize: vertical;
        background: #fafafa;
    }

    .batch-area textarea:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(217,119,6,0.12);
        background: white;
    }

    .batch-area .hint {
        font-size: 0.82rem;
        color: var(--text-muted);
        margin-top: 0.4rem;
    }

    .batch-count {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.25rem 0.6rem;
        background: #f0fdf4;
        color: #16a34a;
        border-radius: 1rem;
        font-size: 0.82rem;
        font-weight: 600;
        margin-left: 0.5rem;
        transition: all var(--transition-fast);
    }

    .batch-count.empty {
        background: #f1f5f9;
        color: var(--text-muted);
    }

    /* =============================================
       ACTION BUTTONS
       ============================================= */
    .actions-bar {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.5rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .btn-primary {
        padding: 0.85rem 2rem;
        background: linear-gradient(135deg, var(--gold), var(--gold-dark));
        color: white;
        border: none;
        border-radius: 2rem;
        font-size: 1.05rem;
        font-weight: 700;
        cursor: pointer;
        transition: all var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: inherit;
        position: relative;
        overflow: hidden;
    }

    .btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(217,119,6,0.4);
    }

    .btn-primary:hover::before {
        opacity: 1;
    }

    .btn-primary:active {
        transform: translateY(0);
    }

    .btn-secondary {
        padding: 0.75rem 1.5rem;
        background: white;
        color: var(--gold-dark);
        border: 2px solid var(--border-light);
        border-radius: 2rem;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-fast);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: inherit;
    }

    .btn-secondary:hover {
        background: #fffbeb;
        border-color: var(--gold);
    }

    .btn-icon {
        padding: 0.65rem;
        background: white;
        border: 2px solid var(--border-light);
        border-radius: 50%;
        cursor: pointer;
        transition: all var(--transition-fast);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        width: 42px;
        height: 42px;
        font-family: inherit;
    }

    .btn-icon:hover {
        border-color: var(--gold);
        background: #fffbeb;
    }

    .btn-icon[title]::after {
        content: attr(title);
    }

    .actions-separator {
        width: 1px;
        height: 32px;
        background: var(--border-light);
        margin: 0 0.25rem;
    }

    /* =============================================
       CERTIFICATE PREVIEW
       ============================================= */
    .preview-wrapper {
        position: relative;
        padding: 2rem 0;
    }

    .preview-container {
        perspective: 1200px;
        display: flex;
        justify-content: center;
    }

    .certificate-frame {
        transition: transform var(--transition-slow), opacity var(--transition-normal);
        transform-style: preserve-3d;
    }

    .certificate-frame:hover {
        transform: rotateY(2deg) rotateX(-1deg);
    }

    .certificate-frame.updating {
        opacity: 0.6;
        transform: scale(0.98);
    }

    .certificate {
        width: 297mm;
        height: 210mm;
        margin: 0 auto;
        position: relative;
        background: white;
        overflow: hidden;
        box-shadow:
            0 2px 4px rgba(0,0,0,0.05),
            0 8px 16px rgba(0,0,0,0.08),
            0 20px 40px rgba(0,0,0,0.12),
            0 0 0 1px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        border-radius: 2px;
    }

    /* Animated gradient border for gold/silver/bronze */
    .certificate.border-gold {
        background:
            linear-gradient(white, white) padding-box,
            linear-gradient(135deg, #fbbf24, #f59e0b, #d97706, #b45309, #d97706, #f59e0b, #fbbf24) border-box;
        border: 4px solid transparent;
        background-size: 100% 100%, 300% 300%;
        animation: shimmerBorder 4s ease-in-out infinite;
    }

    .certificate.border-silver {
        background:
            linear-gradient(white, white) padding-box,
            linear-gradient(135deg, #e2e8f0, #cbd5e1, #94a3b8, #64748b, #94a3b8, #cbd5e1, #e2e8f0) border-box;
        border: 4px solid transparent;
        background-size: 100% 100%, 300% 300%;
        animation: shimmerBorder 4s ease-in-out infinite;
    }

    .certificate.border-bronze {
        background:
            linear-gradient(white, white) padding-box,
            linear-gradient(135deg, #d97706, #b45309, #92400e, #78350f, #92400e, #b45309, #d97706) border-box;
        border: 4px solid transparent;
        background-size: 100% 100%, 300% 300%;
        animation: shimmerBorder 4s ease-in-out infinite;
    }

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

    /* Certificate inner elements */
    .cert-border {
        position: absolute;
        inset: 8mm;
        border: 4px double var(--cert-color, var(--gold));
        border-radius: 12px;
        pointer-events: none;
    }

    .cert-border::before {
        content: '';
        position: absolute;
        inset: 4px;
        border: 2px solid var(--cert-color, var(--gold));
        border-radius: 10px;
        opacity: 0.35;
    }

    .cert-corner {
        position: absolute;
        font-size: 1.8rem;
        opacity: 0.5;
        line-height: 1;
    }

    .cert-corner.tl { top: 12mm; left: 14mm; }
    .cert-corner.tr { top: 12mm; right: 14mm; }
    .cert-corner.bl { bottom: 12mm; left: 14mm; }
    .cert-corner.br { bottom: 12mm; right: 14mm; }

    /* Decorative stamps (optional) */
    .cert-stamp {
        position: absolute;
        font-size: 2.4rem;
        opacity: 0.12;
        pointer-events: none;
    }

    .cert-stamp.stamp-tl { top: 16mm; left: 18mm; transform: rotate(-15deg); }
    .cert-stamp.stamp-tr { top: 16mm; right: 18mm; transform: rotate(15deg); }
    .cert-stamp.stamp-bl { bottom: 16mm; left: 18mm; transform: rotate(15deg); }
    .cert-stamp.stamp-br { bottom: 16mm; right: 18mm; transform: rotate(-15deg); }

    .cert-stars-top, .cert-stars-bottom {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        font-size: 1.2rem;
        opacity: 0.35;
        color: var(--cert-color, var(--gold));
    }

    .cert-stars-top { top: 14mm; }
    .cert-stars-bottom { bottom: 14mm; }

    .cert-icon {
        font-size: 4rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    .cert-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--cert-color, var(--gold));
        margin-bottom: 0.75rem;
        font-family: Georgia, 'Times New Roman', serif;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .cert-subtitle {
        font-size: 1.1rem;
        color: var(--text-muted);
        margin-bottom: 1.2rem;
        font-style: italic;
    }

    .cert-awarded-to {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-bottom: 0.3rem;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 500;
    }

    .cert-student {
        font-size: 2.6rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.4rem;
        font-family: Georgia, 'Times New Roman', serif;
    }

    .cert-class {
        font-size: 1.15rem;
        color: var(--text-muted);
        margin-bottom: 1.2rem;
    }

    .cert-message {
        font-size: 1.05rem;
        color: var(--text-secondary);
        max-width: 480px;
        margin: 0 auto 1.5rem;
        line-height: 1.6;
        font-style: italic;
    }

    .cert-number {
        position: absolute;
        top: 13mm;
        right: 20mm;
        font-size: 0.75rem;
        color: var(--text-muted);
        font-family: 'Courier New', monospace;
        opacity: 0.5;
    }

    .cert-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        position: absolute;
        bottom: 18mm;
        left: 20mm;
        right: 20mm;
    }

    .cert-date {
        font-size: 0.95rem;
        color: var(--text-muted);
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
    }

    .cert-signature {
        text-align: center;
    }

    .cert-signature .line {
        width: 160px;
        border-bottom: 2px solid var(--text-muted);
        margin-bottom: 0.4rem;
        height: 30px;
    }

    .cert-signature .label {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .cert-school {
        position: absolute;
        bottom: 28mm;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 0.9rem;
        color: var(--text-muted);
        opacity: 0.7;
    }

    .cert-sparkle { position:absolute; width:6px; height:6px; background:var(--gold-light); border-radius:50%; pointer-events:none; opacity:0; animation:sparkle 2s ease-in-out infinite; }
    @keyframes sparkle { 0%,100% { opacity:0; transform:scale(0); } 50% { opacity:0.8; transform:scale(1); } }

    .certificate .cert-sparkle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
    .certificate .cert-sparkle:nth-child(2) { top: 30%; right: 20%; animation-delay: 0.5s; }
    .certificate .cert-sparkle:nth-child(3) { bottom: 25%; left: 25%; animation-delay: 1s; }
    .certificate .cert-sparkle:nth-child(4) { bottom: 35%; right: 15%; animation-delay: 1.5s; }

    .certificate.size-a5 { width:210mm; height:148mm; }
    .certificate.size-a5 .cert-border { inset:5mm; }
    .certificate.size-a5 .cert-corner { font-size:1.3rem; }
    .certificate.size-a5 .cert-corner.tl { top:8mm; left:10mm; }
    .certificate.size-a5 .cert-corner.tr { top:8mm; right:10mm; }
    .certificate.size-a5 .cert-corner.bl { bottom:8mm; left:10mm; }
    .certificate.size-a5 .cert-corner.br { bottom:8mm; right:10mm; }
    .certificate.size-a5 .cert-stars-top { top:10mm; font-size:0.9rem; }
    .certificate.size-a5 .cert-stars-bottom { bottom:10mm; font-size:0.9rem; }
    .certificate.size-a5 .cert-icon { font-size:2.8rem; }
    .certificate.size-a5 .cert-title { font-size:1.6rem; }
    .certificate.size-a5 .cert-subtitle { font-size:0.9rem; }
    .certificate.size-a5 .cert-student { font-size:1.8rem; }
    .certificate.size-a5 .cert-class { font-size:0.95rem; }
    .certificate.size-a5 .cert-message { font-size:0.85rem; max-width:350px; }
    .certificate.size-a5 .cert-footer { bottom:12mm; left:14mm; right:14mm; }
    .certificate.size-a5 .cert-school { bottom:20mm; font-size:0.8rem; }
    .certificate.size-a5 .cert-signature .line { width:120px; height:20px; }

    /* Batch print: multiple certificates */
    .batch-certificates {
        display: none;
    }

    /* Batch progress */
    .batch-progress {
        display: none;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.5rem;
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: var(--radius-md);
        margin-top: 1rem;
    }

    .batch-progress.visible {
        display: flex;
    }

    .batch-progress-bar {
        flex: 1;
        height: 8px;
        background: #e0f2fe;
        border-radius: 4px;
        overflow: hidden;
    }

    .batch-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #0ea5e9, #0284c7);
        border-radius: 4px;
        transition: width var(--transition-fast);
        width: 0%;
    }

    .batch-progress-text {
        font-size: 0.88rem;
        font-weight: 600;
        color: #0369a1;
        white-space: nowrap;
    }

    /* =============================================
       CONFETTI
       ============================================= */
    .confetti-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9999;
        overflow: hidden;
    }

    .confetti-piece {
        position: absolute;
        width: 10px;
        height: 10px;
        top: -10px;
        opacity: 0;
        animation: confettiFall 3s ease-in forwards;
    }

    @keyframes confettiFall {
        0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
        100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.5); }
    }

    /* =============================================
       TOAST NOTIFICATIONS
       ============================================= */
    .toast-container {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        pointer-events: none;
    }

    .toast {
        padding: 0.85rem 1.25rem;
        background: var(--text-primary);
        color: white;
        border-radius: var(--radius-md);
        font-size: 0.92rem;
        font-weight: 500;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        transform: translateX(120%);
        transition: transform var(--transition-normal);
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        max-width: 360px;
    }

    .toast.show {
        transform: translateX(0);
    }

    .toast.success {
        background: #047857;
    }

    .toast.warning {
        background: #B45309;
    }

    .toast.info {
        background: #2563eb;
    }

    /* =============================================
       PRINT PREVIEW MODAL
       ============================================= */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 9998;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        backdrop-filter: blur(4px);
    }

    .modal-overlay.visible {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: var(--radius-xl);
        max-width: 95vw;
        max-height: 90vh;
        overflow: auto;
        box-shadow: 0 25px 60px rgba(0,0,0,0.3);
        position: relative;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #f1f5f9;
        position: sticky;
        top: 0;
        background: white;
        z-index: 1;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .modal-header h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }

    .modal-close-btn {
        width: 36px;
        height: 36px;
        border: none;
        background: #f1f5f9;
        border-radius: 50%;
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--transition-fast);
        color: var(--text-secondary);
        font-family: inherit;
    }

    .modal-close-btn:hover {
        background: #e2e8f0;
    }

    .modal-body {
        padding: 1.5rem;
        display: flex;
        justify-content: center;
    }

    .modal-body .certificate {
        transform: scale(0.7);
        transform-origin: top center;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1rem 1.75rem;
        border-top: 1px solid #f1f5f9;
        position: sticky;
        bottom: 0;
        background: white;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }

    /* =============================================
       CUSTOM TITLE GROUP
       ============================================= */
    /* =============================================
       SEAL / MEDAL VISUAL
       ============================================= */
    .cert-seal { position:absolute; bottom:22mm; right:22mm; width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; transform:rotate(-12deg); box-shadow:0 2px 8px rgba(0,0,0,0.15); z-index:2; }
    .cert-seal.seal-gold { background:radial-gradient(circle at 35% 35%, #fde68a, #f59e0b, #d97706); border:3px solid #b45309; color:#78350f; }
    .cert-seal.seal-silver { background:radial-gradient(circle at 35% 35%, #f1f5f9, #cbd5e1, #94a3b8); border:3px solid #64748b; color:#334155; }
    .cert-seal.seal-bronze { background:radial-gradient(circle at 35% 35%, #fcd7a0, #d97706, #92400e); border:3px solid #78350f; color:#451a03; }
    .cert-seal .seal-ribbon { position:absolute; bottom:-12px; width:18px; height:22px; z-index:-1; }
    .cert-seal .seal-ribbon-left { left:14px; transform:rotate(10deg); }
    .cert-seal .seal-ribbon-right { right:14px; transform:rotate(-10deg); }
    .cert-seal.seal-gold .seal-ribbon { background:#d97706; }
    .cert-seal.seal-silver .seal-ribbon { background:#94a3b8; }
    .cert-seal.seal-bronze .seal-ribbon { background:#92400e; }
    .certificate.size-a5 .cert-seal { width:50px; height:50px; font-size:1.3rem; bottom:14mm; right:16mm; }

    .seal-row { display:flex; gap:0.6rem; flex-wrap:wrap; }
    .seal-btn { width:40px; height:40px; border:2px solid var(--border-light); border-radius:var(--radius-sm); background:white; font-size:1rem; cursor:pointer; transition:all var(--transition-fast); display:flex; align-items:center; justify-content:center; }
    .seal-btn:hover { border-color:var(--gold); background:#fffbeb; }
    .seal-btn.active { border-color:var(--gold); background:#fef3c7; box-shadow:0 0 0 2px rgba(217,119,6,0.2); }
    .seal-btn .seal-dot { width:16px; height:16px; border-radius:50%; border:2px solid #94a3b8; }
    .seal-btn .seal-dot.dot-gold { background:radial-gradient(circle at 35% 35%, #fde68a, #d97706); border-color:#b45309; }
    .seal-btn .seal-dot.dot-silver { background:radial-gradient(circle at 35% 35%, #f1f5f9, #94a3b8); border-color:#64748b; }
    .seal-btn .seal-dot.dot-bronze { background:radial-gradient(circle at 35% 35%, #fcd7a0, #92400e); border-color:#78350f; }

    .bg-upload-group { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
    .bg-upload-label { padding:0.5rem 1rem; border:2px dashed var(--border-light); border-radius:var(--radius-sm); font-size:0.88rem; color:var(--text-secondary); cursor:pointer; transition:all var(--transition-fast); display:inline-flex; align-items:center; gap:0.4rem; }
    .bg-upload-label:hover { border-color:var(--gold); color:var(--gold-dark); background:#fffbeb; }
    .bg-upload-filename { font-size:0.82rem; color:var(--text-muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bg-upload-clear { padding:0.3rem 0.6rem; border:1px solid var(--border-light); border-radius:var(--radius-sm); background:white; font-size:0.78rem; color:#ef4444; cursor:pointer; transition:all var(--transition-fast); display:none; }
    .bg-upload-clear.visible { display:inline-block; }
    .bg-upload-clear:hover { background:#fef2f2; border-color:#ef4444; }
    .cert-custom-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0.12; pointer-events:none; z-index:0; }

    .cert-qr { position:absolute; bottom:14mm; left:20mm; width:48px; height:48px; opacity:0.65; }
    .cert-qr canvas { width:100% !important; height:100% !important; }
    .certificate.size-a5 .cert-qr { width:36px; height:36px; bottom:10mm; left:14mm; }

    .batch-per-student-toggle { display:flex; align-items:center; gap:0.5rem; margin-top:0.75rem; font-size:0.88rem; color:var(--text-secondary); }
    .batch-per-student-toggle input[type="checkbox"] { width:18px; height:18px; accent-color:var(--gold); cursor:pointer; }
    .batch-custom-list { display:none; margin-top:0.75rem; max-height:300px; overflow-y:auto; border:1px solid var(--border-light); border-radius:var(--radius-md); }
    .batch-custom-list.visible { display:block; }
    .batch-custom-item { display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0.75rem; border-bottom:1px solid #f1f5f9; }
    .batch-custom-item:last-child { border-bottom:none; }
    .batch-custom-item .student-name { font-weight:600; font-size:0.88rem; color:var(--text-primary); min-width:100px; flex-shrink:0; }
    .batch-custom-item input { flex:1; padding:0.4rem 0.6rem; border:1px solid var(--border-light); border-radius:var(--radius-sm); font-size:0.85rem; font-family:inherit; }
    .batch-custom-item input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(217,119,6,0.1); }

    .custom-title-group {
        display: none;
        margin-top: 1rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: var(--radius-md);
        border: 1px dashed var(--border-light);
    }

    .custom-title-group.visible {
        display: block;
    }

    .custom-title-group label {
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.4rem;
        display: block;
        font-size: 0.92rem;
    }

    .custom-title-group input {
        padding: 0.75rem 1rem;
        border: 2px solid var(--border-light);
        border-radius: var(--radius-md);
        font-size: 1rem;
        width: 100%;
        box-sizing: border-box;
        font-family: inherit;
        background: white;
    }

    .custom-title-group input:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(217,119,6,0.12);
    }

    /* =============================================
       LOADING OVERLAY
       ============================================= */
    .loading-overlay {
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.85);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10;
        border-radius: var(--radius-xl);
        backdrop-filter: blur(2px);
    }

    .loading-overlay.visible {
        display: flex;
    }

    .loading-spinner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .loading-spinner .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f1f5f9;
        border-top-color: var(--gold);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

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

    .loading-spinner .text {
        font-size: 0.95rem;
        color: var(--text-secondary);
        font-weight: 600;
    }

    /* =============================================
       PRINT STYLES
       ============================================= */
    @media print {
        body {
            margin: 0 !important;
            padding: 0 !important;
        }

        body * {
            visibility: hidden !important;
        }

        .certificate-frame,
        .certificate,
        .certificate * {
            visibility: visible !important;
        }

        .certificate-frame {
            overflow: visible !important;
            transform: none !important;
        }

        .certificate {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 297mm !important;
            height: 210mm !important;
            margin: 0 !important;
            padding: 0 !important;
            transform: none !important;
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
            page-break-after: always;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            animation: none !important;
        }

        .certificate.size-a5 {
            width: 210mm !important;
            height: 148mm !important;
        }

        .batch-certificates {
            display: block !important;
        }

        .batch-certificates .certificate {
            position: relative !important;
        }

        .cert-sparkle {
            display: none !important;
        }

        .diplome-page,
        .actions-bar,
        .sidebar,
        .options-panel,
        nav,
        header,
        footer {
            display: none !important;
        }

        @page {
            size: A4 landscape;
            margin: 0;
        }
    }

    /* =============================================
       RESPONSIVE
       ============================================= */
    @media (max-width: 1024px) {
        .certificate-frame {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    }

    @media (max-width: 768px) {
        .diplome-page {
            padding: 1.5rem 0 3rem;
        }

        .page-header h1 {
            font-size: 1.8rem;
        }

        .page-header p {
            font-size: 1rem;
        }

        .section-card {
            padding: 1.25rem;
            border-radius: var(--radius-lg);
        }

        .templates-grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 0.75rem;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .preview-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 1rem;
        }

        .certificate {
            transform: scale(0.38);
            transform-origin: top left;
            margin-bottom: calc(-210mm * 0.62);
            margin-right: calc(-297mm * 0.62);
        }

        .certificate.size-a5 {
            transform: scale(0.5);
            margin-bottom: calc(-148mm * 0.5);
            margin-right: calc(-210mm * 0.5);
        }

        .actions-bar {
            flex-direction: column;
            align-items: stretch;
        }

        .actions-bar .btn-primary,
        .actions-bar .btn-secondary {
            justify-content: center;
        }

        .actions-separator {
            display: none;
        }

        .modal-body .certificate {
            transform: scale(0.35);
            transform-origin: top left;
        }

        .toast-container {
            bottom: 1rem;
            right: 1rem;
            left: 1rem;
        }

        .toast {
            max-width: 100%;
        }

        .options-row {
            flex-direction: column;
        }

        .color-picker-row {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    @media (max-width: 480px) {
        .templates-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.6rem;
        }

        .template-card {
            padding: 0.5rem;
        }

        .template-mini-preview {
            aspect-ratio: 3 / 2;
        }

        .mini-icon {
            font-size: 1.2rem;
        }

        .template-name {
            font-size: 0.78rem;
        }

        .mode-toggle {
            width: 100%;
        }

        .mode-btn {
            flex: 1;
            text-align: center;
            padding: 0.5rem 0.75rem;
            font-size: 0.85rem;
        }
    }

/* ===== DARK MODE ===== */
[data-theme="dark"] .diplome-page { background: linear-gradient(135deg, #0f172a 0%, #1a1f35 100%) !important; }
[data-theme="dark"] .diplome-page::before { opacity: 0.03 !important; }
[data-theme="dark"] .page-header h1 { color: #f1f5f9 !important; }
[data-theme="dark"] .page-header p { color: #94a3b8 !important; }
[data-theme="dark"] .section-card { background: #1e293b !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .section-title { color: #e2e8f0 !important; border-bottom-color: #334155 !important; }
[data-theme="dark"] .template-card { background: #243044 !important; border-color: #334155 !important; }
[data-theme="dark"] .template-card:hover { background: #2d3d55 !important; }
[data-theme="dark"] .template-card.selected { border-color: #6366f1 !important; background: rgba(99,102,241,0.15) !important; }
[data-theme="dark"] .template-name { color: #e2e8f0 !important; }
[data-theme="dark"] .form-group label { color: #cbd5e1 !important; }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea { background: #243044 !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important; }
[data-theme="dark"] .color-preset { border-color: #334155 !important; }
[data-theme="dark"] .color-preset.selected { border-color: #a5b4fc !important; }
[data-theme="dark"] .font-option { background: #243044 !important; border-color: #334155 !important; color: #cbd5e1 !important; }
[data-theme="dark"] .font-option.selected { border-color: #6366f1 !important; background: rgba(99,102,241,0.2) !important; }
[data-theme="dark"] .alert-info { background: rgba(59,130,246,0.12) !important; border-color: rgba(59,130,246,0.3) !important; color: #93c5fd !important; }