/* -------------------------------------------------------------
   School Textbook & Technical Guide Aesthetic (DTP Website)
   Matching the reference illustration design & color palette
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg-main: #f6f5f0;
    --bg-grid: rgba(43, 48, 58, 0.04);
    --card-bg: #ffffff;
    --card-border: #2b303a;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    
    /* Pill & Highlight Palette */
    --purple-main: #6d28d9;
    --purple-bg: #f3e8ff;
    --purple-border: #7c3aed;
    
    --blue-main: #1d4ed8;
    --blue-bg: #eff6ff;
    --blue-border: #2563eb;
    
    --green-main: #15803d;
    --green-bg: #f0fdf4;
    --green-border: #16a34a;
    
    --gold-main: #a16207;
    --gold-bg: #fefce8;
    --gold-border: #ca8a04;

    --red-alert: #dc2626;
    --red-bg: #fef2f2;
    --red-border: #ef4444;

    --font-brand: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
    background-color: var(--bg-main);
    background-image: 
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20.t1%20%7B%20font-family%3A%20%27Inter%27%2C%20sans-serif%3B%20font-size%3A%2015px%3B%20font-weight%3A%20700%3B%20fill%3A%20rgba%2817%2C%2024%2C%2039%2C%200.16%29%3B%20letter-spacing%3A%202px%3B%20text-transform%3A%20uppercase%3B%20%7D%0A%20%20%20%20.t2%20%7B%20font-family%3A%20%27Nunito%27%2C%20sans-serif%3B%20font-size%3A%2014px%3B%20font-weight%3A%20700%3B%20fill%3A%20rgba%2891%2C%2033%2C%20182%2C%200.18%29%3B%20letter-spacing%3A%201.5px%3B%20text-transform%3A%20uppercase%3B%20%7D%0A%20%20%20%20.t3%20%7B%20font-family%3A%20%27Inter%27%2C%20sans-serif%3B%20font-size%3A%2013px%3B%20font-weight%3A%20600%3B%20fill%3A%20rgba%2830%2C%2064%2C%20175%2C%200.16%29%3B%20letter-spacing%3A%201px%3B%20%7D%0A%20%20%20%20.t4%20%7B%20font-family%3A%20%27Inter%27%2C%20sans-serif%3B%20font-size%3A%2016px%3B%20font-weight%3A%20800%3B%20fill%3A%20rgba%2822%2C%20101%2C%2052%2C%200.18%29%3B%20letter-spacing%3A%202px%3B%20text-transform%3A%20uppercase%3B%20%7D%0A%20%20%3C/style%3E%0A%20%20%3Cg%20transform%3D%22rotate%28-10%20600%20400%29%22%3E%0A%20%20%20%20%3Ctext%20x%3D%22-500%22%20y%3D%2240%22%20class%3D%22t1%22%3EMULTILINGUAL%20DTP%20%E2%80%A2%20DESKTOP%20PUBLISHING%20%E2%80%A2%20PREPRESS%20%E2%80%A2%20PRE-TRANSLATION%20PREP%20%E2%80%A2%20CAT-FRIENDLY%20FORMATTING%20%E2%80%A2%20MULTILINGUAL%20DTP%20%E2%80%A2%20DESKTOP%20PUBLISHING%20%E2%80%A2%20PREPRESS%20%E2%80%A2%20PRE-TRANSLATION%20PREP%20%E2%80%A2%20CAT-FRIENDLY%20FORMATTING%20%E2%80%A2%20MULTILINGUAL%20DTP%20%E2%80%A2%20DESKTOP%20PUBLISHING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-420%22%20y%3D%2290%22%20class%3D%22t2%22%3E%D0%9A%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%BE%2C%20%D1%82%D0%BE%D1%87%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%B8%20%D0%B0%D0%BA%D0%BA%D1%83%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%28Precision%20%26amp%3B%20Accuracy%29%20%E2%80%A2%20PIXEL-PERFECT%20%E2%80%A2%20FLAWLESS%20LAYOUT%20%E2%80%A2%20STRICT%20FORMATTING%20FIDELITY%20%E2%80%A2%20%D0%9A%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%BE%2C%20%D1%82%D0%BE%D1%87%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%B8%20%D0%B0%D0%BA%D0%BA%D1%83%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%28Precision%20%26amp%3B%20Accuracy%29%20%E2%80%A2%20PIXEL-PERFECT%20%E2%80%A2%20FLAWLESS%20LAYOUT%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-550%22%20y%3D%22140%22%20class%3D%22t3%22%3EAdvanced%20OCR%20%26amp%3B%20Cleanup%20%E2%80%A2%20Layout%20Reconstruction%20%E2%80%A2%20CAD%20Localization%20%E2%80%A2%20Infographic%20Redraw%20%E2%80%A2%20Tag%20Minimization%20%E2%80%A2%20Advanced%20OCR%20%26amp%3B%20Cleanup%20%E2%80%A2%20Layout%20Reconstruction%20%E2%80%A2%20CAD%20Localization%20%E2%80%A2%20Infographic%20Redraw%20%E2%80%A2%20Tag%20Minimization%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-460%22%20y%3D%22190%22%20class%3D%22t4%22%3EUNCOMPROMISING%20ACCURACY%20%E2%80%A2%20PRECISION%20ALIGNMENT%20%E2%80%A2%20CLEAN%20STRUCTURE%20%E2%80%A2%20ZERO-ERROR%20TOLERANCE%20%E2%80%A2%20SEAMLESS%20MATCHING%20%E2%80%A2%20UNCOMPROMISING%20ACCURACY%20%E2%80%A2%20PRECISION%20ALIGNMENT%20%E2%80%A2%20CLEAN%20STRUCTURE%20%E2%80%A2%20ZERO-ERROR%20TOLERANCE%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-520%22%20y%3D%22240%22%20class%3D%22t1%22%3ESEGMENT%20OPTIMIZATION%20%E2%80%A2%20TEXT%20FLOW%20REFINEMENT%20%E2%80%A2%20TYPOGRAPHY%20BALANCING%20%E2%80%A2%20FONT%20MANAGEMENT%20%E2%80%A2%20PRINT-READY%20OUTPUT%20%E2%80%A2%20SEGMENT%20OPTIMIZATION%20%E2%80%A2%20TEXT%20FLOW%20REFINEMENT%20%E2%80%A2%20TYPOGRAPHY%20BALANCING%20%E2%80%A2%20FONT%20MANAGEMENT%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-440%22%20y%3D%22290%22%20class%3D%22t2%22%3ECAT-OPTIMIZED%20%E2%80%A2%20TURNAROUND%20SPEED%20%E2%80%A2%20COMPLEX%20FILE%20MASTERY%20%E2%80%A2%20LOCALIZATION-READY%20%E2%80%A2%20PRODUCTION%20SCALABILITY%20%E2%80%A2%20CAT-OPTIMIZED%20%E2%80%A2%20TURNAROUND%20SPEED%20%E2%80%A2%20COMPLEX%20FILE%20MASTERY%20%E2%80%A2%20LOCALIZATION-READY%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-580%22%20y%3D%22340%22%20class%3D%22t3%22%3EVector%20Redrawing%20%E2%80%A2%20Mirror%20Formatting%20%E2%80%A2%20RTL/LTR%20Adaptation%20%E2%80%A2%20Variable%20Text%20Expansion%20%E2%80%A2%20Document%20Parsing%20%E2%80%A2%20Vector%20Redrawing%20%E2%80%A2%20Mirror%20Formatting%20%E2%80%A2%20RTL/LTR%20Adaptation%20%E2%80%A2%20Variable%20Text%20Expansion%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-480%22%20y%3D%22390%22%20class%3D%22t4%22%3EROBUST%20WORKFLOW%20%E2%80%A2%20ENTERPRISE%20RELIABILITY%20%E2%80%A2%20DEADLINE-DRIVEN%20%E2%80%A2%20WHITE-GLOVE%20DTP%20%E2%80%A2%20SEAMLESS%20HANDOFF%20%E2%80%A2%20ROBUST%20WORKFLOW%20%E2%80%A2%20ENTERPRISE%20RELIABILITY%20%E2%80%A2%20DEADLINE-DRIVEN%20%E2%80%A2%20WHITE-GLOVE%20DTP%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-530%22%20y%3D%22440%22%20class%3D%22t1%22%3EPRISTINE%20TYPOGRAPHY%20%E2%80%A2%20EXACT%20GEOMETRY%20%E2%80%A2%20FLAWLESS%20LINEATION%20%E2%80%A2%20PRISTINE%20VECTOR%20WORK%20%E2%80%A2%20TURNKEY%20SOLUTIONS%20%E2%80%A2%20PRISTINE%20TYPOGRAPHY%20%E2%80%A2%20EXACT%20GEOMETRY%20%E2%80%A2%20FLAWLESS%20LINEATION%20%E2%80%A2%20PRISTINE%20VECTOR%20WORK%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-410%22%20y%3D%22490%22%20class%3D%22t2%22%3EZERO%20TAG%20POLLUTION%20%E2%80%A2%20PRECISION%20%E2%80%A2%20FIDELITY%20%E2%80%A2%20RIGOR%20%E2%80%A2%20INTEGRITY%20%E2%80%A2%20SCALABILITY%20%E2%80%A2%20EXPERTISE%20%E2%80%A2%20ZERO%20TAG%20POLLUTION%20%E2%80%A2%20PRECISION%20%E2%80%A2%20FIDELITY%20%E2%80%A2%20RIGOR%20%E2%80%A2%20INTEGRITY%20%E2%80%A2%20SCALABILITY%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-560%22%20y%3D%22540%22%20class%3D%22t3%22%3EMastercraft%20%E2%80%A2%20Velocity%20%E2%80%A2%20Compliance%20%E2%80%A2%20Consistency%20%E2%80%A2%20Accuracy%20%E2%80%A2%20Excellence%20%E2%80%A2%20Multilingual%20DTP%20%E2%80%A2%20Mastercraft%20%E2%80%A2%20Velocity%20%E2%80%A2%20Compliance%20%E2%80%A2%20Consistency%20%E2%80%A2%20Accuracy%20%E2%80%A2%20Excellence%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-470%22%20y%3D%22590%22%20class%3D%22t4%22%3EDESKTOP%20PUBLISHING%20%E2%80%A2%20PREPRESS%20%E2%80%A2%20CAT-FRIENDLY%20FORMATTING%20%E2%80%A2%20PRECISION%20ALIGNMENT%20%E2%80%A2%20PIXEL-PERFECT%20%E2%80%A2%20DESKTOP%20PUBLISHING%20%E2%80%A2%20PREPRESS%20%E2%80%A2%20CAT-FRIENDLY%20FORMATTING%20%E2%80%A2%20PRECISION%20ALIGNMENT%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-510%22%20y%3D%22640%22%20class%3D%22t1%22%3ELAYOUT%20RECONSTRUCTION%20%E2%80%A2%20CAD%20LOCALIZATION%20%E2%80%A2%20INFOGRAPHIC%20REDRAW%20%E2%80%A2%20VECTOR%20REDRAWING%20%E2%80%A2%20RTL/LTR%20ADAPTATION%20%E2%80%A2%20LAYOUT%20RECONSTRUCTION%20%E2%80%A2%20CAD%20LOCALIZATION%20%E2%80%A2%20INFOGRAPHIC%20REDRAW%20%E2%80%A2%20VECTOR%20REDRAWING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-430%22%20y%3D%22690%22%20class%3D%22t2%22%3ESTRICT%20FORMATTING%20FIDELITY%20%E2%80%A2%20UNCOMPROMISING%20ACCURACY%20%E2%80%A2%20ENTERPRISE%20RELIABILITY%20%E2%80%A2%20WHITE-GLOVE%20DTP%20%E2%80%A2%20STRICT%20FORMATTING%20FIDELITY%20%E2%80%A2%20UNCOMPROMISING%20ACCURACY%20%E2%80%A2%20ENTERPRISE%20RELIABILITY%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-570%22%20y%3D%22740%22%20class%3D%22t3%22%3ETag%20Minimization%20%E2%80%A2%20Segment%20Optimization%20%E2%80%A2%20Typography%20Balancing%20%E2%80%A2%20Font%20Management%20%E2%80%A2%20Print-Ready%20Output%20%E2%80%A2%20Tag%20Minimization%20%E2%80%A2%20Segment%20Optimization%20%E2%80%A2%20Typography%20Balancing%20%E2%80%A2%20Font%20Management%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-490%22%20y%3D%22790%22%20class%3D%22t4%22%3E%D0%9A%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%BE%2C%20%D1%82%D0%BE%D1%87%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%B8%20%D0%B0%D0%BA%D0%BA%D1%83%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%28Precision%20%26amp%3B%20Accuracy%29%20%E2%80%A2%20PRODUCTION%20SCALABILITY%20%E2%80%A2%20FLAWLESS%20LAYOUT%20%E2%80%A2%20ZERO-ERROR%20TOLERANCE%20%E2%80%A2%20%D0%9A%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%BE%2C%20%D1%82%D0%BE%D1%87%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%B8%20%D0%B0%D0%BA%D0%BA%D1%83%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%28Precision%20%26amp%3B%20Accuracy%29%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E"),
        radial-gradient(var(--bg-grid) 1px, transparent 1px);
    background-repeat: repeat, repeat;
    background-size: 1200px 800px, 16px 16px;
    background-attachment: fixed, scroll;
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    padding-bottom: 60px;
}

/* Header & Textbook Navigation Tabs */
.site-header {
    background: #ffffff;
    border-bottom: 2px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1480px) {
    .header-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--text-primary);
    flex-shrink: 0;
}

.brand-icon {
    width: 74px;
    height: 74px;
    background: #ffffff;
    border: 2.5px solid var(--card-border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-icon:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 1.18rem;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: #111827;
}

.brand-subtitle {
    font-family: var(--font-brand);
    font-size: 1.04rem;
    color: #334155;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin-top: 2px;
}

.brand-amp {
    color: var(--blue-main);
    font-weight: 800;
    margin-right: 2px;
}

/* Header Brand Slogan Ribbon */
.brand-slogan-bar {
    background: linear-gradient(90deg, #f8fafc 0%, #eff6ff 50%, #f5f3ff 100%);
    border-top: 1.5px solid #cbd5e1;
    padding: 7px 20px;
}

.brand-slogan-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.slogan-icon {
    font-size: 0.92rem;
    flex-shrink: 0;
}

.brand-slogan-text {
    font-family: var(--font-brand);
    font-size: 0.86rem;
    line-height: 1.45;
    color: #1e293b;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    text-align: center;
}

.slogan-strong {
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.slogan-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.slogan-badge-blue {
    background: var(--blue-bg);
    color: var(--blue-main);
    border: 1.5px solid #93c5fd;
}

.slogan-badge-purple {
    background: var(--purple-bg);
    color: var(--purple-main);
    border: 1.5px solid #c4b5fd;
}

.slogan-tail {
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.35);
    text-underline-offset: 3px;
}

.footer-slogan {
    font-family: var(--font-brand);
    font-size: 0.8rem;
    line-height: 1.45;
    font-weight: 700;
    color: #1e293b;
    background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
    border: 1.5px solid #cbd5e1;
    border-left: 3.5px solid var(--blue-main);
    border-radius: 8px;
    padding: 8px 11px;
    margin-bottom: 12px;
}

/* Textbook Tabs Navigation */
.nav-tabs {
    display: flex;
    gap: 6px 8px;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
}

.nav-tab {
    padding: 7px 12px;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.nav-tab:hover {
    background: #f3f4f6;
    transform: translateY(-1px);
}

.nav-tab.active {
    background: var(--blue-bg);
    border-color: var(--blue-border);
    color: var(--blue-main);
    box-shadow: 0 2px 0 var(--blue-border);
}

/* Responsive adjustment for shrunken windows */
@media (max-width: 1100px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
}

/* Layout Container */
.main-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Page Header Card */
.page-hero {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    padding: 24px 30px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.page-hero-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-hero-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 900px;
}

/* Content Cards & Sections */
.textbook-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.card-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 2px solid var(--card-border);
    margin-bottom: 16px;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--text-primary);
}

.card-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 14px;
    line-height: 1.7;
}

.textbook-list {
    margin-left: 20px;
    margin-bottom: 16px;
}

.textbook-list li {
    margin-bottom: 8px;
    color: var(--text-secondary);
}

/* Pill Badges */
.pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 2px solid;
    font-size: 0.9rem;
    font-weight: 700;
}

.pill-purple {
    background: var(--purple-bg);
    border-color: var(--purple-border);
    color: var(--purple-main);
}

.pill-blue {
    background: var(--blue-bg);
    border-color: var(--blue-border);
    color: var(--blue-main);
}

.pill-green {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: var(--green-main);
}

.pill-gold {
    background: var(--gold-bg);
    border-color: var(--gold-border);
    color: var(--gold-main);
}

.pill-red {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red-alert);
}

/* Placeholders for Process Illustrations ("Места для иллюстраций процесса") */
.process-illustration-box {
    background: #faf9f5;
    border: 2px dashed var(--card-border);
    border-radius: 14px;
    padding: 24px;
    margin: 20px 0;
    text-align: center;
}

.process-illustration-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.process-step-card {
    background: #ffffff;
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.step-img-box {
    width: 100%;
    height: 200px;
    margin-top: 14px;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.step-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

.step-number {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: var(--card-border);
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: 800;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.step-heading {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.step-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Personnel Grid */
.personnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.person-card {
    background: #ffffff;
    border: 2px solid var(--card-border);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
}

.person-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--card-border);
    background: #e5e7eb;
    margin: 0 auto 14px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.person-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.person-role {
    font-size: 0.85rem;
    color: var(--blue-main);
    font-weight: 700;
    margin-bottom: 10px;
}

.person-bio {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Footer */
.site-footer {
    background: #ffffff;
    border-top: 3px solid var(--card-border);
    margin-top: 50px;
    padding: 40px 20px 20px 20px;
    color: var(--text-primary);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-bottom: 35px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.footer-brand-icon {
    font-size: 1.5rem;
}

.footer-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-secondary);
}

.footer-contacts a {
    color: var(--blue-main);
    text-decoration: none;
    font-weight: 600;
}

.footer-contacts a:hover {
    text-decoration: underline;
}

.footer-col-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--text-primary);
    border-bottom: 2px solid var(--bg-main);
    padding-bottom: 6px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: var(--blue-main);
    font-weight: 600;
}

.footer-links span {
    color: var(--text-muted);
}

/* Footer Feedback Form */
.footer-col-form {
    background: #faf8f3;
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 18px;
}

.footer-form-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.footer-promo-note {
    font-size: 0.82rem;
    line-height: 1.35;
    margin-bottom: 12px;
}

.footer-promo-link {
    color: var(--blue-main, #2563eb);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease, opacity 0.15s ease;
    display: inline-block;
}

.footer-promo-link:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.footer-feedback-form .form-group {
    margin-bottom: 10px;
}

.footer-input,
.footer-select,
.footer-textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: var(--font-body);
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease;
}

.footer-input:focus,
.footer-select:focus,
.footer-textarea:focus {
    border-color: var(--blue-main);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Footer File Input */
.footer-file-group {
    position: relative;
}

.footer-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.footer-file-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: 1.5px dashed var(--card-border, #cbd5e1);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    box-sizing: border-box;
    user-select: none;
}

.footer-file-label:hover {
    border-color: var(--blue-main, #2563eb);
    background: #f8fafc;
}

.footer-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-primary, #0f172a);
    background: var(--bg-main, #f1f5f9);
    border: 1px solid var(--card-border, #cbd5e1);
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.footer-file-label:hover .footer-file-btn {
    background: #e2e8f0;
}

.footer-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
}

.footer-file-label.has-file {
    border-style: solid;
    border-color: var(--blue-main, #2563eb);
    background: #eff6ff;
}

.footer-file-label.has-file .footer-file-name {
    color: var(--blue-main, #2563eb);
    font-weight: 600;
}

.footer-file-clear {
    background: none;
    border: none;
    color: #ef4444;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.footer-file-clear:hover {
    background: #fee2e2;
}

.footer-submit-btn {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 800;
    font-family: var(--font-heading);
    background: var(--blue-main);
    color: #ffffff;
    border: 2px solid var(--card-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.footer-submit-btn:hover {
    background: #1e40af;
    transform: translateY(-1px);
}

/* Footer Bottom Bar */
.footer-bottom {
    border-top: 1.5px solid var(--bg-main);
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-bottom-links a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-bottom-links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.dot-sep {
    color: var(--text-muted);
}


/* ============================================================ */
/* DASHBOARD CARDS STYLING - EXACT MATCH WITH SEGMENTATION WEB  */
/* ============================================================ */

.drop-zone {
    border: 2px dashed #4a5568;
    border-radius: 12px;
    padding: 28px 18px;
    text-align: center;
    background-color: #faf8f3;
    transition: all 0.2s ease;
    cursor: pointer;
}

.drop-zone.hover, .drop-zone:hover {
    border-color: #2b6cb0;
    background-color: #edf2f7;
}

.drop-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.drop-prompt {
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
}

.drop-subprompt {
    font-size: 12px;
    color: #718096;
    margin-bottom: 14px;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    border: 2px solid #2d3748;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary {
    background-color: #ffffff;
    color: #1a202c;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.btn-primary:hover {
    background-color: #edf2f7;
}

.btn-success {
    background-color: #dcfce7;
    color: #14532d;
    border-color: #15803d;
}

.btn-success:hover {
    background-color: #bbf7d0;
}

.btn-secondary {
    background-color: #ffffff;
    color: #1a202c;
    border-color: #2d3748;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.btn-secondary:hover {
    background-color: #edf2f7;
}

.status-badge {
    background-color: #ebf8ff;
    color: #2b6cb0;
    border: 1.5px solid #3182ce;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    display: inline-block;
}

.progress-group {
    margin-bottom: 14px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #4a5568;
    font-weight: 700;
    margin-bottom: 5px;
}

.progress-bar-track {
    height: 12px;
    background-color: #e2e8f0;
    border: 1.5px solid #4a5568;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: #3182ce;
    width: 0%;
    transition: width 0.3s ease;
}

.progress-bar-total {
    background-color: #38a169;
}

.dashboard-cards-container {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: none;
}

.dash-card {
    background-color: #f7f5ee;
    border: 2px solid #2d3748;
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.dash-card.card-dtp {
    border-color: #2b3e50;
}

.dash-card.card-ready-cet {
    border-color: #6b46c1;
    background-color: #faf7fc;
}

.dash-card.card-clock-now {
    border-color: #2b6cb0;
}

.dash-card.card-ready-client {
    border-color: #276749;
    background-color: #f4faf6;
}

.dash-card.card-cost {
    border-color: #2d3748;
}

.dash-card.flex-between {
    align-items: center;
}

.dash-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-card-left-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
}

.dash-title-group {
    display: flex;
    flex-direction: column;
}

.dash-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #2d3748;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.dash-icon-box.blue {
    background-color: #edf2f7;
    border-color: #2b6cb0;
}

.dash-icon-box.purple {
    background-color: #faf5ff;
    border-color: #6b46c1;
}

.dash-icon-box.green {
    background-color: #f0fff4;
    border-color: #276749;
}

.dash-icon-box.gold {
    background-color: #fffaf0;
    border-color: #d69e2e;
}

.dash-card-title {
    font-size: 13px;
    font-weight: 800;
    color: #1a202c;
}

.dash-card-subtitle {
    font-size: 9px;
    font-weight: 700;
    color: #718096;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Rounded Pill Badges */
.dash-pill-badge {
    background-color: #e2ded4;
    border: 2px solid #2d3748;
    color: #1a202c;
    font-family: 'Segoe UI', -apple-system, sans-serif;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 18px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.dash-card.card-ready-cet .dash-pill-badge {
    background-color: #e9d8fd;
    border-color: #6b46c1;
    color: #441a86;
}

.dash-center-box {
    font-family: 'Segoe UI', -apple-system, sans-serif;
    font-weight: 800;
    font-size: 13px;
    padding: 7px 16px;
    border-radius: 10px;
    text-align: center;
}

.blue-box {
    background-color: #edf2f7;
    border: 2px solid #2b6cb0;
    color: #1a365d;
}

.green-box {
    background-color: #dcfce7;
    border: 2px solid #16a34a;
    color: #14532d;
}

.price-box {
    font-size: 16px;
    font-weight: 800;
    padding: 6px 18px;
}

.currency-code-badge {
    background-color: #e2ded4;
    border: 2px solid #2d3748;
    color: #1a202c;
    font-weight: 800;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
}

.dash-select {
    background-color: #ffffff;
    border: 2px solid #2d3748;
    color: #1a202c;
    font-family: 'Segoe UI', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.dash-select:hover, .dash-select:focus {
    border-color: #2b6cb0;
    background-color: #f7fafc;
}

.dash-select option {
    background-color: #ffffff;
    color: #1a202c;
}

.tag-badge.red-pin {
    background-color: #ffffff;
    color: #2d3748;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: 8px;
    border: 1.5px solid #2d3748;
}

/* CLOCK & ARROW */
.dash-clock-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#analog-clock {
    width: 60px;
    height: 60px;
    background: transparent;
}

.red-arrow-badge {
    background-color: #ffffff;
    color: #2d3748;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1.5px solid #2d3748;
}

.red-dot {
    color: #dc2626;
}

/* SUB TABLE CARD UNDER CARD 1 */
.sub-table-card {
    background-color: #f7f5ee;
    border: 2px solid #2d3748;
    border-radius: 14px;
    padding: 14px;
    margin-top: -4px;
    margin-bottom: 2px;
}

.table-wrapper {
    overflow-x: auto;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #2d3748;
    border-radius: 8px;
    overflow: hidden;
}

.stats-table th, .stats-table td {
    padding: 10px 14px;
    text-align: left;
    border: 1px solid #2d3748;
    font-size: 12px;
    color: #1a202c;
}

.stats-table th {
    background-color: #e3ded3;
    color: #1a202c;
    font-weight: 800;
}

.stats-table td {
    background-color: #f7f5ee;
}

.stats-table tr:hover td {
    background-color: #edf2f7;
}

/* FILE SUMMARY CARD */
.file-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #efece4;
    border: 2px solid #2d3748;
    border-radius: 10px;
    padding: 12px 18px;
    margin-top: 12px;
}

.file-summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.file-summary-label {
    color: #2d3748;
    font-weight: 700;
}

.file-summary-val {
    color: #1a202c;
    font-weight: 800;
    font-size: 13px;
}

.file-summary-item.highlighted-dtp .file-summary-val {
    color: #1a202c;
    font-size: 14px;
    font-weight: 800;
}

/* ============================================================ */
/* IMAGE MODAL LIGHTBOX (ENLARGED IMAGE VIEW ON CLICK)           */
/* ============================================================ */

.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 20px;
}

.image-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.image-modal-content {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    background: #ffffff;
    border: 3px solid #2b303a;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transform: scale(0.88);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-modal-overlay.active .image-modal-content {
    transform: scale(1);
}

.image-modal-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 10px;
}

.image-modal-caption {
    margin-top: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    font-family: var(--font-heading);
    text-align: center;
}

.image-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    background: #ffffff;
    border: 2.5px solid #2b303a;
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.15s ease;
    line-height: 1;
}

.image-modal-close:hover {
    background: #dc2626;
    color: #ffffff;
    transform: scale(1.1);
}

/* Hover indicator for zoomable images */
.step-img-box, .illustration-image-wrapper img, img.step-img {
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-img-box:hover, .illustration-image-wrapper img:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}


/* =============================================================
   Client Cabinet & Auth Modal Styles (School Textbook Aesthetic)
============================================================= */

/* Auth Modal Overlay & Content */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.auth-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal-content {
    background: #ffffff;
    border: 3px solid var(--card-border);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    padding: 28px 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    position: relative;
    transform: scale(0.92);
    transition: transform 0.25s ease;
}

.auth-modal-overlay.active .auth-modal-content {
    transform: scale(1);
}

.auth-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease;
}

.auth-modal-close:hover {
    color: var(--red-alert);
}

/* Auth Tabs */
.auth-modal-tabs {
    display: flex;
    gap: 6px;
    background: #f3f4f6;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.auth-tab-btn {
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-tab-btn.active {
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* OAuth Buttons */
.auth-oauth-block {
    margin-bottom: 16px;
}

.oauth-title-sep {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;

}

.oauth-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.15s ease;
}

.oauth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.oauth-google:hover { background: #eff6ff; border-color: #2563eb; }
.oauth-apple:hover { background: #f8fafc; border-color: #0f172a; }
.oauth-microsoft:hover { background: #f0fdf4; border-color: #16a34a; }

.auth-or-divider {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 16px 0;
    position: relative;
}

.auth-or-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e5e7eb;
    z-index: 1;
}

.auth-or-divider span {
    background: #ffffff;
    padding: 0 10px;
    position: relative;
    z-index: 2;
}

/* Auth Forms */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.auth-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--card-border);
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.auth-input:focus {
    border-color: var(--purple-main);
}

.form-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.auth-link {
    color: var(--purple-main);
    text-decoration: none;
    font-weight: 700;
}

.auth-link:hover { text-decoration: underline; }

.auth-info-note {
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #1e40af;
    line-height: 1.4;
}

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    margin-top: 4px;
}

.auth-form-status {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.status-success { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; }
.status-error { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; }
.status-info { background: #f0f9ff; border: 1.5px solid #7dd3fc; color: #075985; }


/* =============================================================
   Cabinet Page Specific Components & Cards
============================================================= */

/* Profile Header Card */
.cabinet-profile-card {
    background: #ffffff;
}

.cabinet-profile-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 2px dashed #e5e7eb;
}

@media (min-width: 768px) {
    .cabinet-profile-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.user-avatar-badge {
    width: 54px;
    height: 54px;
    background: var(--purple-bg);
    border: 2.5px solid var(--purple-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--purple-main);
    flex-shrink: 0;
}

.user-info-block {
    flex-grow: 1;
}

.user-name-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.user-id-pill {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.user-company-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.cabinet-quick-actions {
    display: flex;
    gap: 8px;
}

/* Cabinet Stats Grid */
.cabinet-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 18px;
}

@media (min-width: 900px) {
    .cabinet-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-box {
    background: #f9fafb;
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.stat-box-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.stat-box-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 4px;
    font-family: var(--font-heading);
}

.highlight-gold { color: var(--gold-main); }
.highlight-red { color: var(--red-alert); }
.highlight-green { color: var(--green-main); }

/* Filter & Search Bar */
.cabinet-controls-card {
    padding: 16px 20px;
}

.cabinet-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 1024px) {
    .cabinet-filter-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.cabinet-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    padding: 8px 14px;
    flex-grow: 1;
    max-width: 500px;
}

.cabinet-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    width: 100%;
}

.cabinet-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-pill {
    padding: 6px 14px;
    border: 2px solid var(--card-border);
    border-radius: 20px;
    background: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-pill.active, .filter-pill:hover {
    background: var(--card-border);
    color: #ffffff;
}

/* Order Folders Grid & Cards */
.cabinet-folders-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.order-folder-card {
    border-left: 6px solid var(--purple-main);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.order-folder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.folder-card-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f3f4f6;
}

@media (min-width: 768px) {
    .folder-card-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.folder-title-group {
    display: flex;
    gap: 12px;
}

.folder-icon {
    font-size: 2rem;
    line-height: 1;
}

.folder-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.folder-sub-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.folder-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pill-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1.5px solid currentColor;
}

.folder-meta-summary {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 14px 0;
}

@media (min-width: 768px) {
    .folder-meta-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meta-lbl {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.meta-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.highlight-bold { font-weight: 800; }

/* Progress Bar */
.order-progress-bar-wrapper {
    margin: 14px 0;
}

.progress-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.progress-track {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple-main), #9333ea);
    border-radius: 6px;
}

/* Files Table Inside Folder */
.folder-files-table-wrapper {
    overflow-x: auto;
    margin: 14px 0;
}

.folder-files-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.folder-files-table th, .folder-files-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.folder-files-table th {
    background: #f3f4f6;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.status-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

.tag-green { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.tag-gold { background: #fefce8; color: #a16207; border: 1px solid #fef08a; }
.tag-purple { background: #f3e8ff; color: #6d28d9; border: 1px solid #d8b4fe; }
.tag-red { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }

.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.folder-actions-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px solid #f3f4f6;
}

/* Cabinet File Dropzone */
.cabinet-dropzone {
    border: 3px dashed var(--card-border);
    background: #f9fafb;
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 14px;
}

.cabinet-dropzone:hover {
    background: var(--blue-bg);
    border-color: var(--blue-main);
    transform: translateY(-2px);
}

.dropzone-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.dropzone-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.dropzone-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* -------------------------------------------------------------
   Admin Control Panel Styles (/admin & /admin/login)
------------------------------------------------------------- */
.admin-login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 180px);
    padding: 30px 16px;
}

.admin-login-card {
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 30px;
    box-shadow: var(--shadow-md);
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-user-tag {
    font-weight: 800;
    font-size: 0.9rem;
    background: #fef3c7;
    color: #92400e;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #fde68a;
}

.admin-orders-table-wrapper {
    overflow-x: auto;
    margin-top: 16px;
}

.admin-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.admin-orders-table th {
    background: #f3f4f6;
    padding: 12px 14px;
    text-align: left;
    font-weight: 800;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.admin-orders-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.admin-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    font-weight: 700;
    font-family: var(--font-body);
    background: #ffffff;
    cursor: pointer;
}

.admin-input-price {
    width: 110px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    font-weight: 800;
    font-family: var(--font-body);
    text-align: right;
}

/* Completely remove/hide header clock elements */
.header-clock-wrapper,
.flat-clock-dial,
.flat-clock-svg,
#clock-ticks,
#clock-numerals,
#clock-hour-hand,
#clock-minute-hand,
#clock-second-hand {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    pointer-events: none !important;
}

/* -------------------------------------------------------------
   PDF Specification Table Styles (Admin & Cabinet Sync Layout)
   Matching User's PDF Screenshot (Thick Continuous Grid Lines & White Card Frame)
------------------------------------------------------------- */
.table-card-frame {
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 24px !important;
    overflow: hidden;
}

.pdf-table-container {
    width: 100%;
    overflow-x: auto;
    background: #ffffff !important;
    padding: 0;
}

.pdf-spec-table {
    width: 100%;
    border-collapse: collapse !important;
    border: 2.5px solid #000000 !important;
    font-family: var(--font-body);
    font-size: 0.90rem;
    color: #000000 !important;
    background: #ffffff !important;
}

.pdf-spec-table th,
.pdf-spec-table td {
    border: 2px solid #000000 !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    text-align: left !important;
    background: #ffffff !important;
}

.pdf-spec-table th {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    font-family: var(--font-heading) !important;
    border: 2px solid #000000 !important;
    border-bottom: 2.5px solid #000000 !important;
}

.pdf-spec-table tbody tr td {
    background-color: #ffffff !important;
}

.pdf-spec-table tbody tr:nth-child(even),
.pdf-spec-table tbody tr:hover {
    background-color: #ffffff !important;
}

.seamless-input,
.seamless-select {
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    cursor: pointer;
}

.seamless-input:focus,
.seamless-select:focus {
    background: #f3f4f6 !important;
    border-radius: 4px;
}

.pdf-spec-table th .th-type-desc {
    display: block;
    font-size: 0.76rem;
    font-weight: normal;
    color: #4b5563;
    margin-top: 4px;
    line-height: 1.25;
    font-family: var(--font-body);
}

.order-id-badge {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e3a8a;
    background: #eff6ff;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #bfdbfe;
    display: inline-block;
}

.folder-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1.5px solid #2b303a;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #1f2937;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.folder-trigger-btn:hover {
    background: #f3f4f6;
    border-color: #1d4ed8;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.status-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 800;
}

.status-pill-green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.status-pill-yellow { background: #fef9c3; color: #854d0e; border: 1px solid #fef08a; }
.status-pill-red { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Files Modal Dialog */
.files-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.files-modal-overlay.active {
    display: flex;
}

.files-modal-card {
    background: #ffffff;
    border: 2.5px solid #2b303a;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
}

.files-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    color: #4b5563;
}

.files-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}

.files-list-table th,
.files-list-table td {
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 0.9rem;
}

.files-list-table th {
    background: #f9fafb;
    font-weight: bold;
}

/* Folder Icon File Count Overlay Badge */
.folder-trigger-btn {
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 3px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.folder-trigger-btn:hover {
    border-color: #2563eb;
    background: #eff6ff;
    transform: translateY(-1px);
}

.folder-badge-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
}

.folder-icon-symbol {
    font-size: 1.5rem;
    line-height: 1;
}

.folder-count-overlay {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -38%);
    font-size: 0.72rem;
    font-weight: 900;
    font-family: Arial, sans-serif;
    color: #1e3a8a;
    text-shadow: 0 0 2px #ffffff, 0 0 3px #ffffff, 0 0 4px #ffffff;
    pointer-events: none;
    line-height: 1;
}

/* Image Lightbox Modal Styles */
.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.image-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.image-modal-content {
    position: relative;
    background: #ffffff;
    border: 3px solid var(--card-border);
    border-radius: 16px;
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.image-modal-img {
    max-width: 80vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    background: transparent;
}

.image-modal-caption {
    margin-top: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    font-family: var(--font-heading);
}

.image-modal-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 2px solid var(--card-border);
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, background 0.15s ease;
    z-index: 10;
}

.image-modal-close:hover {
    background: #fef2f2;
    color: #dc2626;
    transform: scale(1.1);
}

/* =============================================================
   Real-Time Order Notification, Sound Bar & Acceptance System
============================================================= */

.sound-control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 12px;
}

.sound-control-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.live-sync-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
    animation: livePulseDot 2s infinite ease-in-out;
}

@keyframes livePulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.22); opacity: 0.7; }
}

.sound-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sound-toggle-pill {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1.5px solid transparent;
}

.sound-toggle-pill.sound-on {
    background: #ecfdf5;
    color: #047857;
    border-color: #6ee7b7;
}

.sound-toggle-pill.sound-on:hover {
    background: #d1fae5;
}

.sound-toggle-pill.sound-off {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.sound-test-btn {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1.5px solid #93c5fd;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sound-test-btn:hover {
    background: #dbeafe;
    transform: translateY(-1px);
}

/* Top Alert Banners for Pending Orders */
.pending-orders-top-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(90deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #f59e0b;
    border-left: 6px solid #d97706;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.18);
    animation: gentleAlertPulse 2s infinite alternate;
}

.client-pending-top-notice {
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-left: 5px solid #f59e0b;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

@keyframes gentleAlertPulse {
    from { box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15); }
    to { box-shadow: 0 6px 18px rgba(217, 119, 6, 0.34); }
}

/* Admin Table Row Highlight for Pending Orders */
.pdf-spec-table tbody tr.order-row-pending {
    background-color: #fffbeb !important;
    animation: pendingRowFlash 1.8s infinite alternate ease-in-out;
}

.pdf-spec-table tbody tr.order-row-pending td:first-child {
    border-left: 5px solid #f59e0b !important;
}

@keyframes pendingRowFlash {
    0% { background-color: #fffbeb; }
    100% { background-color: #fef3c7; }
}

/* Client Table Row Highlight when Just Accepted by Admin */
.pdf-spec-table tbody tr.order-row-just-accepted {
    background-color: #ecfdf5 !important;
    animation: acceptedRowGlow 2s infinite alternate ease-in-out;
}

.pdf-spec-table tbody tr.order-row-just-accepted td:first-child {
    border-left: 5px solid #10b981 !important;
}

@keyframes acceptedRowGlow {
    0% { background-color: #ecfdf5; }
    100% { background-color: #d1fae5; }
}

.pdf-spec-table tbody tr.order-row-client-pending {
    background-color: #fffdf5;
}

/* Badges & Buttons inside Table Cells */
.new-order-alert-badge {
    display: inline-block;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 5px;
    margin-bottom: 4px;
    box-shadow: 0 2px 5px rgba(220, 38, 38, 0.35);
    animation: badgeBouncePulse 1.1s infinite alternate;
}

@keyframes badgeBouncePulse {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

.acceptance-stage-tag {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 1.25;
}

.acceptance-stage-tag.pending {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #f59e0b;
}

.acceptance-stage-tag.accepted {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
}

.btn-accept-order {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 6px 8px;
    border: 1.5px solid #047857;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35);
    transition: all 0.15s ease;
    text-align: center;
}

.btn-accept-order:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(5, 150, 105, 0.45);
}

.status-pill-pending {
    background: #fef3c7;
    color: #b45309;
    border: 1.5px solid #f59e0b;
    font-weight: 700;
}

.status-pill-accepted {
    background: #d1fae5;
    color: #065f46;
    border: 1.5px solid #10b981;
    font-weight: 800;
}

.accepted-timestamp-hint {
    font-size: 0.71rem;
    color: #047857;
    font-weight: 600;
    margin-top: 3px;
}

.pending-subtext {
    font-size: 0.71rem;
    color: #b45309;
    margin-top: 3px;
    font-weight: 600;
}

/* Floating Toast Notification Container & Cards */
.order-toast-container {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 100010;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 390px;
    width: calc(100vw - 44px);
    pointer-events: none;
}

.order-toast-card {
    pointer-events: auto;
    background: #ffffff;
    border: 2px solid #1e293b;
    border-radius: 12px;
    padding: 12px 15px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: slideInToast 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInToast {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.order-toast-card.toast-admin-alert {
    border-color: #d97706;
    border-left: 7px solid #dc2626;
    background: #fffbeb;
}

.order-toast-card.toast-client-success {
    border-color: #059669;
    border-left: 7px solid #10b981;
    background: #f0fdf4;
}

.order-toast-card.toast-info {
    border-color: #2563eb;
    border-left: 7px solid #3b82f6;
    background: #eff6ff;
}

.order-toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.92rem;
    color: #0f172a;
    margin-bottom: 4px;
}

.order-toast-body {
    font-size: 0.82rem;
    color: #334155;
    line-height: 1.4;
}

.order-toast-close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.order-toast-close:hover {
    color: #0f172a;
}

/* -------------------------------------------------------------
   Two-Phase Real-Time Chat System (Pre-Order Draft + Order Item Chat)
------------------------------------------------------------- */

.btn-order-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 8px;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 4px;
    width: 100%;
    box-sizing: border-box;
}

.btn-order-chat:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.btn-order-chat.has-messages {
    background: #eff6ff;
    border-color: #60a5fa;
    color: #1e40af;
}

.btn-order-chat.has-unread {
    background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
    border-color: #b91c1c;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35);
    animation: pulseUnreadChatBtn 1.3s infinite ease-in-out;
}

@keyframes pulseUnreadChatBtn {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35); }
    50% { transform: scale(1.04); box-shadow: 0 4px 14px rgba(220, 38, 38, 0.6); }
}

.item-chat-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 3px;
    line-height: 1.3;
}

.item-chat-quick-btn:hover {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #60a5fa;
}

.pdf-spec-table tbody tr.order-row-unread-chat td {
    background-color: #fff7ed !important;
}

/* Two-Column Layout for #newOrderModal Questionnaire */
.questionnaire-modal-card {
    max-width: 1180px !important;
    width: 96% !important;
    padding: 16px 22px !important;
    max-height: 95vh !important;
    overflow-y: auto;
}

.questionnaire-two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 20px;
    align-items: stretch;
}

.questionnaire-col-left,
.questionnaire-col-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.questionnaire-subgrid-4-5 {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 960px) {
    .questionnaire-two-col-grid {
        grid-template-columns: 1fr;
    }
    .questionnaire-subgrid-4-5 {
        grid-template-columns: 1fr;
    }
}

/* Pre-Order Questionnaire Chat Box inside #newOrderModal */
.draft-chat-panel {
    border: 2px solid #2563eb;
    border-radius: 10px;
    background: #f8fafc;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.draft-chat-panel.chat-panel-highlight {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
    border-color: #1d4ed8;
}

.draft-chat-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.draft-chat-header:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

.draft-chat-body {
    padding: 10px 14px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Topic Selector Pills */
.chat-topic-pills-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.chat-topic-pill {
    padding: 3px 9px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 14px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-topic-pill:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

.chat-topic-pill.active {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #ffffff;
}

/* Messages Stream */
.chat-messages-stream {
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px;
    max-height: 210px;
    min-height: 125px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.chat-bubble {
    max-width: 86%;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.42;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    word-break: break-word;
}

.chat-bubble.from-client {
    align-self: flex-end;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #0f172a;
    border-bottom-right-radius: 2px;
}

.chat-bubble.from-admin {
    align-self: flex-start;
    background: #ffffff;
    border: 1.5px solid #6ee7b7;
    border-left: 5px solid #10b981;
    color: #0f172a;
    border-bottom-left-radius: 2px;
}

.chat-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: #475569;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.chat-bubble-topic-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.chat-proposal-card {
    margin-top: 6px;
    padding: 8px 10px;
    background: #ecfdf5;
    border: 1.5px solid #10b981;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #065f46;
}

.chat-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-radius: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    margin-top: 5px;
    margin-right: 5px;
}

.chat-attachment-chip:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

/* Admin Pre-Order Drafts Box above Admin Table */
.admin-drafts-panel {
    background: #fffbeb;
    border: 2.5px solid #f59e0b;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.14);
}

/* ==========================================================================
   INTERACTIVE CALENDAR + VISUAL HOURS & MINUTES GRID PICKER (ВАРИАНТ 1)
   ========================================================================== */
.dtp-datetime-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.dtp-datetime-input-group input[type="text"] {
    padding-right: 40px !important;
    cursor: pointer;
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dtp-datetime-input-group input[type="text"]:hover,
.dtp-datetime-input-group input[type="text"]:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dtp-datetime-trigger-btn {
    position: absolute;
    right: 3px;
    top: 3px;
    bottom: 3px;
    border: none;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}

.dtp-datetime-trigger-btn:hover {
    background: #dbeafe;
    color: #1e40af;
}

.dtp-datetime-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.dtp-datetime-overlay.active {
    display: flex;
}

.dtp-datetime-modal {
    background: #ffffff;
    border: 2.5px solid #1e293b;
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.35);
    width: 100%;
    max-width: 720px;
    overflow: hidden;
    animation: dtpPickerPopIn 0.16s ease-out;
}

@keyframes dtpPickerPopIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dtp-datetime-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dtp-datetime-title {
    font-size: 0.96rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dtp-datetime-live-badge {
    background: #2563eb;
    color: #ffffff;
    border: 1.5px solid #93c5fd;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.dtp-datetime-presets {
    background: #f8fafc;
    border-bottom: 1.5px solid #e2e8f0;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dtp-datetime-presets-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #475569;
    margin-right: 4px;
}

.dtp-preset-chip {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #1e293b;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s ease;
}

.dtp-preset-chip:hover {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.dtp-datetime-body {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 0;
}

@media (max-width: 680px) {
    .dtp-datetime-body {
        grid-template-columns: 1fr;
    }
}

.dtp-cal-pane {
    padding: 14px 16px;
    border-right: 1.5px solid #e2e8f0;
    background: #ffffff;
}

.dtp-time-pane {
    padding: 14px 16px;
    background: #fcfdff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dtp-pane-section-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dtp-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 4px 6px;
}

.dtp-cal-month-label {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
}

.dtp-cal-nav-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.12s ease;
}

.dtp-cal-nav-btn:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.dtp-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.73rem;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 4px;
}

.dtp-cal-weekdays span.weekend {
    color: #dc2626;
}

.dtp-cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dtp-cal-day {
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    background: #f8fafc;
    color: #1e293b;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    user-select: none;
}

.dtp-cal-day:hover:not(.empty) {
    background: #dbeafe;
    border-color: #60a5fa;
    color: #1e3a8a;
}

.dtp-cal-day.empty {
    background: transparent;
    cursor: default;
}

.dtp-cal-day.past {
    opacity: 0.45;
    color: #94a3b8;
}

.dtp-cal-day.weekend:not(.selected) {
    color: #b91c1c;
    background: #fff5f5;
}

.dtp-cal-day.today:not(.selected) {
    border-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 800;
}

.dtp-cal-day.selected {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35);
}

/* Visual Hours & Minutes Grids */
.dtp-hours-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-bottom: 12px;
}

.dtp-hour-tile {
    height: 32px;
    border-radius: 7px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    user-select: none;
}

.dtp-hour-tile.work-hour {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
    font-weight: 800;
}

.dtp-hour-tile:hover {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e3a8a;
    transform: translateY(-1px);
}

.dtp-hour-tile.selected {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.dtp-minutes-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.dtp-minute-tile {
    height: 32px;
    border-radius: 7px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    user-select: none;
}

.dtp-minute-tile.quarter {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
    font-weight: 800;
}

.dtp-minute-tile:hover {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
    transform: translateY(-1px);
}

.dtp-minute-tile.selected {
    background: #059669 !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}

.dtp-datetime-footer {
    background: #f8fafc;
    border-top: 1.5px solid #e2e8f0;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Thai Typography & Dictionary Word Breaking */
html[lang="th"], [lang="th"] {
    line-height: 1.65;
    word-break: normal;
    overflow-wrap: break-word;
    font-family: 'Inter', 'Leelawadee UI', 'Thonburi', 'Tahoma', 'Noto Sans Thai', sans-serif;
}

/* Hindi (Devanagari) Typography & OpenType Ligature Shaping */
html[lang="hi"], [lang="hi"] {
    line-height: 1.7;
    font-family: 'Inter', 'Noto Sans Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Mangal', sans-serif;
    font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------
   Admin Visitor Analytics & Geo Tracking Styles
------------------------------------------------------------- */
.analytics-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-metric-card {
    background: #ffffff;
    border: 3px solid #000000;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease;
}

.analytics-metric-card:hover {
    transform: translateY(-2px);
}

.analytics-metric-card .metric-icon {
    font-size: 2rem;
    line-height: 1;
    background: #f1f5f9;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #000000;
}

.analytics-metric-card .metric-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.analytics-metric-card .metric-value {
    font-size: 1.85rem;
    font-weight: 900;
    color: #0f172a;
    font-family: var(--font-heading, sans-serif);
    line-height: 1;
}

.analytics-country-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.analytics-country-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.country-flag-badge {
    font-size: 1.45rem;
    line-height: 1;
    margin-right: 6px;
}

.country-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.country-progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
}

.country-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.analytics-table th {
    background: #f8fafc;
    border-bottom: 2px solid #000000;
    padding: 12px 14px;
    font-weight: 800;
    color: #0f172a;
}

.analytics-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
    vertical-align: middle;
}

.analytics-table tr:hover td {
    background: #f8fafc;
}

/* -------------------------------------------------------------
   Responsive Mobile Header & Language Switcher Optimizations
------------------------------------------------------------- */

/* Language Switcher Default Styles */
.dtp-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dtp-lang-desktop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px 6px;
}

.dtp-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    font-size: 0.76rem;
    text-decoration: none;
    transition: all 0.15s ease;
    background: #ffffff;
    color: #1e293b;
    font-weight: 700;
}

.dtp-lang-pill:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1e3a8a;
}

.dtp-lang-pill.dtp-lang-active {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #1e3a8a !important;
    font-weight: 800 !important;
}

/* Mobile Language Selector (Hidden on Desktop) */
.dtp-lang-mobile {
    display: none;
    position: relative;
}

.dtp-lang-mobile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #ffffff;
    border: 1.5px solid #2563eb;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e3a8a;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
}

.dtp-lang-mobile-btn:hover,
.dtp-lang-mobile-btn:active {
    background: #eff6ff;
}

.dtp-lang-cur-flag {
    font-size: 1.15rem;
    line-height: 1;
}

.dtp-lang-cur-code {
    font-weight: 800;
    letter-spacing: 0.5px;
}

.dtp-lang-cur-name {
    font-size: 0.8rem;
    color: #475569;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dtp-lang-arrow {
    font-size: 0.75rem;
    color: #2563eb;
    margin-left: 2px;
}

/* Mobile Dropdown Popup Menu */
.dtp-lang-mobile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 310px;
    max-width: 92vw;
    max-height: 420px;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
}

.dtp-lang-mobile-dropdown.open {
    display: block !important;
    animation: dtpFadeIn 0.15s ease-out;
}

@keyframes dtpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dtp-lang-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px 8px 6px;
    border-bottom: 1.5px solid #e2e8f0;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e293b;
}

.dtp-lang-dropdown-close {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

.dtp-lang-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.dtp-lang-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    color: #1e293b;
    font-weight: 600;
    transition: background 0.1s ease;
}

.dtp-lang-menu-item:hover,
.dtp-lang-menu-item:active {
    background: #eff6ff;
    border-color: #93c5fd;
}

.dtp-lang-menu-item.dtp-lang-item-active {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #1e3a8a !important;
    font-weight: 800;
}

.dtp-item-flag {
    font-size: 1.15rem;
    line-height: 1;
}

.dtp-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtp-item-code {
    font-size: 0.72rem;
    opacity: 0.7;
    font-family: monospace;
}

/* =============================================================
   MOBILE VIEWPORT BREAKPOINT (< 992px)
============================================================= */
@media (max-width: 991px) {
    /* 1. Header is unpinned on mobile so it smoothly scrolls away */
    .site-header {
        position: relative !important;
        top: auto !important;
    }

    /* 2. Switch language bar from 27 pills to compact single dropdown */
    .dtp-lang-desktop {
        display: none !important;
    }

    .dtp-lang-mobile {
        display: inline-block !important;
    }

    /* 3. Hide long bulky marketing slogan text on mobile */
    .brand-slogan-text,
    .slogan-icon {
        display: none !important;
    }

    /* 4. Make brand-slogan-bar a slim single-line container */
    .brand-slogan-bar {
        padding: 4px 12px !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .brand-slogan-container {
        justify-content: flex-end !important;
        margin: 0 !important;
    }

    /* 5. Nav tabs: clean horizontal swipe without ugly scrollbar */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .nav-tab {
        flex-shrink: 0 !important;
        font-size: 0.84rem !important;
        padding: 6px 12px !important;
    }

    /* 6. Header container compact padding */
    .header-container {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .brand-logo {
        gap: 8px !important;
    }

    .brand-title {
        font-size: 0.98rem !important;
        line-height: 1.2 !important;
    }

    .brand-subtitle {
        font-size: 0.72rem !important;
    }

    .brand-icon img {
        width: 32px !important;
        height: 32px !important;
    }

    /* 7. Page content container padding */
    .main-wrapper {
        margin: 14px auto !important;
        padding: 0 12px !important;
    }

    .page-hero {
        padding: 16px 16px !important;
        margin-bottom: 16px !important;
    }

    .page-hero-title {
        font-size: 1.35rem !important;
    }

    .textbook-card {
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }
}