/* ============================================================
   CURALINK DESIGN SYSTEM — GLOBAL STYLESHEET
   Phase 1: Design Foundation (tokens + reusable primitives)
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{

    /* ---- Brand colors ---- */
    --color-primary:#0F6FFF;
    --color-primary-hover:#0B5CE0;
    --color-primary-active:#0949B8;
    --color-secondary:#0B3D91;
    --color-accent:#3FA9FF;
    --color-light-blue:#EAF5FF;

    --color-background:#F7FAFD;
    --color-surface:#FFFFFF;
    --color-card:#FFFFFF;
    --color-border:#E5EEF8;

    --color-text-primary:#0F172A;
    --color-text-secondary:#64748B;
    --color-text-muted:#94A3B8;

    --color-success:#00C389;
    --color-warning:#F59E0B;
    --color-danger:#EF4444;

    --color-success-bg:#E5FBF3;
    --color-warning-bg:#FEF3C7;
    --color-danger-bg:#FEECEC;

    /* ---- Legacy aliases (kept so existing rules below keep working) ---- */
    --navy:var(--color-secondary);
    --navy-deep:#0F172A;
    --sky:var(--color-light-blue);
    --accent:var(--color-primary);
    --accent-2:var(--color-accent);
    --accent-soft:#A9D8FF;
    --accent-teal:#0FB6A8;
    --accent-purple:#7C6FD9;
    --accent-gold:#E0A64E;
    --accent-coral:#E0795D;
    --warn:var(--color-danger);
    --mild:var(--color-warning);
    --success:var(--color-success);
    --white:var(--color-surface);
    --text:var(--color-text-primary);
    --text-strong:var(--color-text-primary);
    --text-secondary:var(--color-text-secondary);
    --line:var(--color-border);
    --paper:var(--color-background);
    --mono:'IBM Plex Mono','Vazirmatn',monospace;
    --ease:cubic-bezier(.2,.8,.2,1);

    /* ---- Glass ---- */
    --glass-bg:rgba(255,255,255,.74);
    --glass-bg-strong:rgba(255,255,255,.90);
    --glass-border:rgba(255,255,255,.80);
    --glass:var(--glass-bg);
    --glass-strong:var(--glass-bg-strong);

    /* ---- Gradients ---- */
    --gradient-primary:linear-gradient(135deg,#0F6FFF 0%,#5CC8FF 100%);
    --gradient-dark:linear-gradient(160deg,#0B3D91 0%,#0F6FFF 55%,#A9D8FF 100%);
    --gradient-soft-glow:radial-gradient(circle,#3FA9FF 0%,transparent 70%);

    /* ---- Spacing scale (4/8 base) ---- */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;
    --space-16:64px;
    --space-20:80px;
    --space-24:96px;

    /* ---- Radius scale ---- */
    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:20px;
    --radius-xl:24px;
    --radius-2xl:32px;
    --radius-full:999px;
    /* legacy aliases used by existing page rules */
    --radius-btn:18px;

    /* ---- Shadow system ---- */
    --shadow-sm:0 4px 12px rgba(15,111,255,.08);
    --shadow-md:0 10px 26px rgba(15,111,255,.10);
    --shadow-lg:0 24px 60px rgba(15,111,255,.14);
    --shadow-xl:0 34px 80px rgba(15,111,255,.18);
    --shadow-floating:0 20px 46px rgba(63,169,255,.22), 0 0 0 1px rgba(15,111,255,.08);
    --shadow-glass:0 8px 32px rgba(15,111,255,.10);
    --shadow-hover:0 26px 54px rgba(15,111,255,.24);
    /* legacy aliases */
    --shadow:var(--shadow-lg);
    --shadow-sm-legacy:var(--shadow-sm);
    --glow:var(--shadow-floating);

    /* ---- Typography ---- */
    --font-fa:"Vazirmatn","Inter",sans-serif;
    --font-en:"Inter","Vazirmatn",sans-serif;
    --font-mono:'IBM Plex Mono','Vazirmatn',monospace;

    --text-display:60px;
    --text-h1:40px;
    --text-h2:32px;
    --text-h3:24px;
    --text-body-lg:17px;
    --text-body:15.5px;
    --text-body-sm:14px;
    --text-caption:12.5px;

    --leading-tight:1.3;
    --leading-normal:1.7;
    --leading-relaxed:2;

    /* ---- Motion ---- */
    --duration-fast:180ms;
    --duration-base:250ms;
    --duration-slow:350ms;
    --ease-out:cubic-bezier(.2,.8,.2,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*{ box-sizing:border-box; }

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:var(--font-fa);
    background:var(--color-background);
    color:var(--color-text-primary);
    overflow-x:hidden;
    position:relative;
}

.material-symbols-outlined{
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
    vertical-align:middle;
    line-height:1;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

.container{
    width:92%;
    max-width:1320px;
    margin:auto;
}

/* ---- Selection ---- */
::selection{
    background:rgba(15,111,255,.20);
    color:var(--color-secondary);
}

/* ---- Focus ring (accessible, non-intrusive) ---- */
:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
    border-radius:4px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--color-background); }
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, var(--color-accent), var(--color-primary));
    border-radius:var(--radius-full);
    border:2px solid var(--color-background);
}
::-webkit-scrollbar-thumb:hover{ background:var(--color-primary); }
* { scrollbar-width:thin; scrollbar-color:var(--color-accent) var(--color-background); }

/* ---- Links (default, outside .btn/.cl-mega-link etc.) ---- */
.cl-prose a, .analysis-content a{
    color:var(--color-primary);
    font-weight:600;
    text-underline-offset:3px;
    transition:color var(--duration-fast) var(--ease-out);
}
.cl-prose a:hover, .analysis-content a:hover{
    color:var(--color-secondary);
    text-decoration:underline;
}

/* ---- Default tables (unscoped, in case a page uses a plain <table>) ---- */
table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--text-body-sm);
}
table th{
    background:var(--color-secondary);
    color:var(--color-surface);
    padding:12px 16px;
    text-align:start;
    font-weight:700;
}
table td{
    padding:12px 16px;
    border-bottom:1px solid var(--color-border);
    color:var(--color-text-primary);
}
table tr:nth-child(even){ background:var(--color-light-blue); }

/* ---- Default forms (unscoped fallback) ---- */
input, textarea, select, button{
    font-family:inherit;
}
label{
    font-size:var(--text-body-sm);
    font-weight:600;
    color:var(--color-secondary);
}


/* ============================================================
   3. ANIMATION SYSTEM (subtle only)
   ============================================================ */
@keyframes cl-fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
}
@keyframes cl-scale-in{
    from{ opacity:0; transform:scale(.96); }
    to{ opacity:1; transform:scale(1); }
}
@keyframes cl-slide-up{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes float-badge{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes cl-skeleton-pulse{
    0%, 100%{ opacity:.55; }
    50%{ opacity:1; }
}

.cl-fade-in{ animation:cl-fade-in var(--duration-base) var(--ease-out) both; }
.cl-scale-in{ animation:cl-scale-in var(--duration-base) var(--ease-out) both; }
.cl-slide-up{ animation:cl-slide-up var(--duration-base) var(--ease-out) both; }

.cl-lift-on-hover{
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.cl-lift-on-hover:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.cl-glow-on-hover{
    transition:box-shadow var(--duration-base) var(--ease-out);
}
.cl-glow-on-hover:hover{
    box-shadow:var(--shadow-floating);
}

@media(prefers-reduced-motion:reduce){
    .cl-fade-in, .cl-scale-in, .cl-slide-up, .cl-lift-on-hover, .cl-glow-on-hover{
        animation:none !important;
        transition:none !important;
    }
}


/* ============================================================
   4. REUSABLE PRIMITIVES (NEW — additive component library)
   Prefix: cl-*  — safe to adopt page-by-page in later phases,
   does not conflict with any existing class name.
   ============================================================ */

/* ---- 4.1 Buttons ---- */
.cl-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:46px;
    padding:0 26px;
    border-radius:var(--radius-lg);
    font-family:inherit;
    font-weight:700;
    font-size:15px;
    border:none;
    cursor:pointer;
    transition:transform var(--duration-base) var(--ease-out),
               box-shadow var(--duration-base) var(--ease-out),
               background var(--duration-base) var(--ease-out),
               color var(--duration-base) var(--ease-out),
               opacity var(--duration-base) var(--ease-out);
    white-space:nowrap;
}

.cl-btn-sm{ height:38px; padding:0 18px; font-size:13.5px; border-radius:var(--radius-md); }
.cl-btn-lg{ height:54px; padding:0 34px; font-size:16px; }

.cl-btn-primary{
    background:var(--gradient-primary);
    color:var(--color-surface);
    box-shadow:var(--shadow-md);
}
.cl-btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.cl-btn-primary:active{ transform:translateY(-1px); }

.cl-btn-secondary{
    background:var(--color-secondary);
    color:var(--color-surface);
    box-shadow:var(--shadow-sm);
}
.cl-btn-secondary:hover{ background:#092E6E; transform:translateY(-2px); }

.cl-btn-outline{
    background:var(--glass-bg);
    color:var(--color-secondary);
    border:1.5px solid var(--color-border);
    backdrop-filter:blur(10px);
}
.cl-btn-outline:hover{
    border-color:var(--color-accent);
    color:var(--color-primary);
    background:rgba(15,111,255,.06);
}

.cl-btn-ghost{
    background:transparent;
    color:var(--color-secondary);
    padding:0 8px;
    height:auto;
}
.cl-btn-ghost:hover{ color:var(--color-primary); }

.cl-btn-danger{
    background:linear-gradient(135deg, var(--color-danger) 0%, #F87171 100%);
    color:var(--color-surface);
    box-shadow:0 14px 30px rgba(239,68,68,.24);
}
.cl-btn-danger:hover{ transform:translateY(-3px); box-shadow:0 20px 42px rgba(239,68,68,.30); }

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

.cl-btn-loading{
    color:transparent !important;
    pointer-events:none;
    position:relative;
}
.cl-btn-loading::after{
    content:"";
    position:absolute;
    width:18px; height:18px;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,.5);
    border-top-color:#fff;
    animation:spin .7s linear infinite;
}
.cl-btn-outline.cl-btn-loading::after,
.cl-btn-ghost.cl-btn-loading::after{
    border-color:rgba(15,111,255,.25);
    border-top-color:var(--color-primary);
}


/* ---- 4.2 Cards ---- */
.cl-card{
    background:var(--color-card);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
    box-shadow:var(--shadow-sm);
}

.cl-card-glass{
    background:var(--glass-bg-strong);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
    box-shadow:var(--shadow-glass);
}

.cl-card-medical{
    background:var(--color-light-blue);
    border-radius:var(--radius-md);
    padding:var(--space-5);
    border-inline-start:4px solid var(--color-accent);
}
.cl-card-medical.is-high{ border-right-color:var(--color-danger); }
.cl-card-medical.is-low{ border-right-color:var(--color-warning); }
.cl-card-medical.is-normal{ border-right-color:var(--color-success); }

.cl-card-stat{
    background:var(--color-card);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
    text-align:center;
}
.cl-card-stat .cl-stat-value{
    font-family:var(--font-mono);
    font-size:32px;
    font-weight:800;
    color:var(--color-secondary);
    display:block;
    margin-bottom:6px;
}
.cl-card-stat .cl-stat-label{
    font-size:var(--text-body-sm);
    color:var(--color-text-secondary);
}

.cl-card-hover{
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.cl-card-hover:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:var(--shadow-floating);
}

.cl-card-interactive{
    cursor:pointer;
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cl-card-interactive:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(15,111,255,.30);
}
.cl-card-interactive:active{ transform:translateY(-1px); }


/* ---- 4.3 Inputs ---- */
.cl-input-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
}

.cl-input{
    height:50px;
    width:100%;
    border-radius:var(--radius-sm);
    border:1px solid var(--color-border);
    background:var(--color-light-blue);
    color:var(--color-secondary);
    font-size:14.5px;
    padding:0 16px;
    transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.cl-input::placeholder{ color:var(--color-text-muted); }
.cl-input:focus{
    outline:none;
    border-color:var(--color-accent);
    box-shadow:0 0 0 4px rgba(63,169,255,.18);
}
.cl-input:disabled{
    opacity:.55;
    cursor:not-allowed;
}
.cl-input.is-error{
    border-color:var(--color-danger);
    box-shadow:0 0 0 4px rgba(239,68,68,.12);
}

.cl-input-error-text{
    font-size:12.5px;
    color:var(--color-danger);
    font-weight:600;
}

.cl-textarea{
    min-height:110px;
    resize:vertical;
    line-height:var(--leading-relaxed);
    padding:14px 16px;
}

.cl-select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F6FFF' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:left 16px center;
    padding-inset-inline-end:40px;
}

.cl-input-search{
    position:relative;
}
.cl-input-search .cl-input{
    padding-inset-inline-start:44px;
}
.cl-input-search .cl-input-search-icon{
    position:absolute;
    top:50%; inset-inline-start:14px;
    transform:translateY(-50%);
    color:var(--color-text-muted);
    font-size:18px;
    pointer-events:none;
}

.cl-upload-zone{
    border:2px dashed rgba(15,111,255,.30);
    border-radius:var(--radius-md);
    background:var(--color-light-blue);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:40px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.cl-upload-zone:hover, .cl-upload-zone.is-dragover{
    border-color:var(--color-accent);
    background:rgba(15,111,255,.06);
}


/* ---- 4.4 Badges ---- */
.cl-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:var(--radius-full);
    font-size:12px;
    font-weight:700;
    line-height:1.6;
}
.cl-badge-success{ background:var(--color-success-bg); color:#087F5B; }
.cl-badge-info{ background:var(--color-light-blue); color:var(--color-secondary); }
.cl-badge-warning{ background:var(--color-warning-bg); color:#92400E; }
.cl-badge-danger{ background:var(--color-danger-bg); color:#C2374B; }
.cl-badge-neutral{ background:#F1F5F9; color:var(--color-text-secondary); }


/* ---- 4.5 Alerts ---- */
.cl-alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 18px;
    border-radius:var(--radius-sm);
    font-size:14px;
    line-height:var(--leading-normal);
    border:1px solid transparent;
}
.cl-alert-success{ background:var(--color-success-bg); color:#087F5B; border-color:rgba(0,195,137,.25); }
.cl-alert-info{ background:var(--color-light-blue); color:var(--color-secondary); border-color:rgba(15,111,255,.20); }
.cl-alert-warning{ background:var(--color-warning-bg); color:#92400E; border-color:rgba(245,158,11,.25); }
.cl-alert-danger{ background:var(--color-danger-bg); color:#C2374B; border-color:rgba(239,68,68,.20); }


/* ---- 4.6 Skeleton loading ---- */
.cl-skeleton{
    background:linear-gradient(90deg, var(--color-border) 25%, #F1F7FF 37%, var(--color-border) 63%);
    background-size:400% 100%;
    border-radius:var(--radius-sm);
    animation:cl-skeleton-pulse 1.4s ease-in-out infinite;
}


/* ---- 4.7 Typography utility classes ---- */
.cl-text-display{ font-size:var(--text-display); font-weight:900; line-height:var(--leading-tight); color:var(--color-text-primary); }
.cl-text-h1{ font-size:var(--text-h1); font-weight:900; line-height:var(--leading-tight); color:var(--color-text-primary); }
.cl-text-h2{ font-size:var(--text-h2); font-weight:800; line-height:var(--leading-tight); color:var(--color-secondary); }
.cl-text-h3{ font-size:var(--text-h3); font-weight:800; color:var(--color-secondary); }
.cl-text-body{ font-size:var(--text-body); line-height:var(--leading-normal); color:var(--color-text-primary); }
.cl-text-caption{ font-size:var(--text-caption); color:var(--color-text-secondary); }
.cl-text-muted{ color:var(--color-text-muted); }
.cl-text-mono{ font-family:var(--font-mono); }


/* ============================================================
   5. EXISTING PAGE STYLES (unchanged behavior — reskinned in a
   previous pass to the CuraLink palette above, kept 1:1 so no
   template breaks)
   ============================================================ */

/* ===== Ambient background glow ===== */

body::before,
body::after{
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(110px);
    opacity:.10;
    z-index:-2;
    pointer-events:none;
}

body::before{
    width:680px;
    height:680px;
    top:-240px;
    inset-inline-end:-180px;
    background:radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
}

body::after{
    width:760px;
    height:760px;
    bottom:-280px;
    inset-inline-start:-220px;
    background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
}

body{
    background-image:radial-gradient(rgba(15,111,255,.05) 1px, transparent 1px);
    background-size:26px 26px;
}


/* ===== Navbar ===== */

.navbar{
    height:auto;
    padding:16px 0 0;
    display:flex;
    align-items:center;
    background:transparent;
    position:sticky;
    top:0;
    z-index:30;
}

.navbar-inner{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    width:100%;
    background:var(--glass);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:999px;
    padding:10px 26px;
    box-shadow:var(--shadow-sm);
    position:relative;
    text-align:start;
    transition:box-shadow .3s var(--ease), background .3s var(--ease);
}

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
    max-width:200px;
    height:auto;
}

.logo img{
    max-height:56px;
    width:auto;
    max-width:200px;
    object-fit:contain;
    background:transparent;
}

/* ===== Mega Nav ===== */

.cl-mega-nav{
    display:flex;
    align-items:center;
    gap:4px;
    position:relative;
    text-align:start;
}

@media(min-width:961px){
    .cl-mega-nav{
        position:absolute;
        top:50%;
        inset-inline-end:50%;
        transform:translate(-50%, -50%);
    }
}

.cl-nav-link{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--text);
    font-weight:600;
    font-size:14.5px;
    padding:10px 18px;
    border-radius:999px;
    transition:.25s var(--ease);
    white-space:nowrap;
    text-align:start;
}

.cl-nav-link:hover{
    color:var(--navy);
    background:rgba(15,111,255,.08);
}

.cl-nav-link.nav-active{
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:var(--white);
    box-shadow:0 8px 20px rgba(15,111,255,.28);
}

.cl-mega-item{ position:relative; }

.cl-mega-trigger{
    display:flex;
    align-items:center;
    gap:7px;
    background:none;
    border:none;
    font-family:inherit;
    color:var(--text);
    font-weight:600;
    font-size:14.5px;
    padding:10px 18px;
    border-radius:999px;
    cursor:pointer;
    transition:.25s var(--ease);
    text-align:start;
}

.cl-mega-trigger:hover{
    color:var(--navy);
    background:rgba(15,111,255,.08);
}

.cl-mega-caret{
    font-size:16px;
    transition:transform .25s ease;
    color:var(--accent-2);
}

.cl-mega-item:hover .cl-mega-caret{ transform:rotate(180deg); }

.cl-mega-panel{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    padding-top:14px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s;
    z-index:50;
}

.cl-mega-item:hover .cl-mega-panel,
.cl-mega-item-open .cl-mega-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.cl-mega-panel-inner{
    min-width:340px;
    background:var(--glass-strong);
    backdrop-filter:blur(26px) saturate(160%);
    -webkit-backdrop-filter:blur(26px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    padding:14px;
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    text-align:start;
}

.cl-mega-link{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    border-radius:16px;
    transition:.2s var(--ease);
    text-align:start;
}

.cl-mega-link:hover{
    background:rgba(15,111,255,.06);
    transform:translateX(-3px);
}

.cl-mega-icon{
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:14px;
    background:var(--sky);
    border:1.5px solid rgba(15,111,255,.16);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:var(--accent);
    transition:.2s var(--ease);
}

.cl-mega-link:hover .cl-mega-icon{
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border-color:transparent;
    color:var(--white);
    transform:scale(1.06);
}

.cl-mega-link strong{ display:block; font-size:14px; color:var(--navy); margin-bottom:2px; }
.cl-mega-link small{ display:block; font-size:12px; color:var(--text-secondary); line-height:1.6; }

.cl-mega-panel-inner-simple{ min-width:220px; }

.cl-mega-link-simple{
    display:block;
    padding:11px 14px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
    color:var(--navy);
    transition:.2s var(--ease);
    text-align:start;
}

.cl-mega-link-simple:hover{
    background:rgba(15,111,255,.08);
    color:var(--accent);
}

/* ===== Mobile hamburger ===== */

.cl-nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:38px;
    height:38px;
    background:none;
    border:none;
    cursor:pointer;
    flex-shrink:0;
}

.cl-nav-toggle span{
    display:block;
    width:22px;
    height:2px;
    background:var(--navy);
    border-radius:2px;
    transition:.25s var(--ease);
    margin:0 auto;
}

.cl-nav-toggle-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.cl-nav-toggle-open span:nth-child(2){ opacity:0; }
.cl-nav-toggle-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:960px){

    .cl-mega-nav{
        display:none;
        position:absolute;
        top:100%;
        inset-inline-start:0;
        inset-inline-end:0;
        margin-top:10px;
        flex-direction:column;
        align-items:stretch;
        background:var(--glass-strong);
        backdrop-filter:blur(22px);
        border:1px solid rgba(255,255,255,.8);
        border-radius:var(--radius-md);
        padding:14px;
        box-shadow:var(--shadow-lg);
        gap:4px;
    }

    .cl-mega-nav-open{ display:flex; }

    .cl-mega-panel{
        position:static; display:none; opacity:1; visibility:visible;
        pointer-events:auto; transform:none; padding-top:0;
    }

    .cl-mega-item-open .cl-mega-panel{ display:block; }

    .cl-mega-panel-inner{
        box-shadow:none; border:none; background:rgba(234,245,255,.7); margin-top:4px;
    }

    .cl-nav-toggle{ display:flex; }
    .navbar-cta{ display:none; }
}

.navbar-cta{ display:flex; flex-shrink:0; gap:10px; }

/* ===== Buttons (legacy classes — kept for existing templates) ===== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:46px;
    padding:0 26px;
    border-radius:var(--radius-btn);
    font-weight:700;
    font-size:15px;
    transition:.25s var(--ease);
    white-space:nowrap;
    border:none;
    cursor:pointer;
}

.btn-lg{ height:54px; padding:0 34px; font-size:16px; }

.btn-solid{
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:var(--white);
    box-shadow:0 14px 30px rgba(15,111,255,.26);
}

.btn-solid:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(15,111,255,.34);
}

.btn-outline{
    border:1.5px solid var(--line);
    color:var(--navy);
    background:var(--glass);
    backdrop-filter:blur(10px);
}

.btn-outline:hover{
    border-color:var(--accent-2);
    color:var(--accent);
    background:rgba(15,111,255,.06);
}

.btn-ghost{
    color:var(--navy);
    font-weight:700;
    padding:0 8px;
    height:auto;
    position:relative;
}

.btn-ghost::after{
    content:"";
    position:absolute;
    inset-inline-end:8px; inset-inline-start:8px; bottom:-2px;
    height:2px;
    background:var(--accent-2);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .3s;
}

.btn-ghost:hover{ color:var(--accent); }
.btn-ghost:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ===== Hero ===== */

.hero{ padding:70px 0 0; overflow:hidden; }

.hero-grid{
    display:grid;
    grid-template-columns:1fr 480px;
    gap:40px;
    align-items:center;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:700;
    color:var(--accent-2);
    margin:0 0 22px;
    letter-spacing:.02em;
}

.eyebrow::before{
    content:"";
    width:7px; height:7px;
    border-radius:50%;
    background:var(--accent-2);
    box-shadow:0 0 0 4px rgba(63,169,255,.18);
}

.hero-text h1{
    font-size:60px;
    font-weight:900;
    color:var(--text-strong);
    line-height:1.28;
    letter-spacing:-.01em;
    margin:0 0 26px;
}

.hero-text h1 span{
    display:block;
    background:linear-gradient(120deg, var(--navy) 0%, var(--accent) 55%, var(--accent-2) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-text .lead{
    font-size:17px;
    line-height:2;
    margin:0 0 34px;
    max-width:540px;
    color:var(--text);
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.hero-media{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    height:100%;
    min-height:420px;
}

.cl-scan-ring{ position:relative; display:inline-flex; margin:auto; z-index:1; }

.cl-scan-ring::before{
    content:"";
    position:absolute;
    inset:-8%;
    border-radius:50%;
    background:conic-gradient(from 0deg, var(--navy), var(--accent-2), transparent 45%, var(--navy));
    filter:blur(38px);
    opacity:.24;
    z-index:-1;
    animation:spin-slow 12s linear infinite;
}

.hero-robot{
    max-height:440px;
    max-width:100%;
    width:auto;
    margin:auto;
    filter:drop-shadow(0 25px 35px rgba(15,111,255,.22));
    background:transparent;
}

.badge{
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--glass-strong);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    padding:14px 18px;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
    max-width:220px;
    animation:float-badge 5s ease-in-out infinite;
    z-index:2;
}

.badge strong{ display:block; font-size:14px; color:var(--navy); }
.badge small{ font-size:12px; color:var(--text-secondary); }

.badge-icon{
    width:38px; height:38px;
    border-radius:12px;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size:19px;
    flex-shrink:0;
}

.badge-top{ top:10%; inset-inline-start:-10px; animation-delay:0s; }
.badge-bottom{ bottom:8%; inset-inline-end:-10px; animation-delay:1.4s; }

/* ===== Upload Section ===== */

.upload-section{ padding:100px 0; position:relative; }

.upload-card{
    max-width:640px;
    margin:auto;
    background:var(--glass-strong);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    padding:44px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(255,255,255,.8);
    position:relative;
    isolation:isolate;
}

.upload-card::before{
    content:"";
    position:absolute;
    inset:-18%;
    background:conic-gradient(from 0deg, var(--navy), var(--accent), var(--accent-soft), var(--navy));
    filter:blur(60px);
    opacity:.10;
    z-index:-1;
    border-radius:50%;
    animation:spin-slow 14s linear infinite;
}

.upload-card-head{ text-align:center; margin-bottom:30px; }
.upload-card-head h2{ color:var(--navy); font-size:24px; font-weight:800; margin:0 0 8px; }
.upload-card-head p{ color:var(--text-secondary); margin:0; font-size:14px; }

#upload-form{ display:flex; flex-direction:column; gap:18px; }

.field-label{ font-size:14px; font-weight:600; color:var(--navy); }

.cl-field-hint{ font-size:12.5px; color:var(--text-secondary); margin:-10px 0 0; line-height:1.9; }

select{
    height:52px;
    border-radius:var(--radius-sm);
    border:1px solid var(--line);
    background:var(--sky);
    color:var(--navy);
    font-family:inherit;
    font-size:15px;
    padding:0 16px;
}

select:focus, .upload-area:focus-within{
    outline:2px solid var(--accent-2);
    outline-offset:2px;
}

textarea{
    min-height:110px;
    resize:vertical;
    border-radius:var(--radius-sm);
    border:1px solid var(--line);
    background:var(--sky);
    color:var(--navy);
    font-family:inherit;
    font-size:14px;
    line-height:1.9;
    padding:14px 16px;
}

textarea:focus{ outline:2px solid var(--accent-2); outline-offset:2px; }
textarea::placeholder{ color:var(--text-secondary); }

.upload-area{
    height:180px;
    border:2px dashed rgba(15,111,255,.30);
    border-radius:var(--radius-md);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:8px;
    cursor:pointer;
    background:var(--sky);
    transition:.25s var(--ease);
}

.upload-area:hover, .upload-area.dragover{
    border-color:var(--accent-2);
    background:rgba(15,111,255,.06);
}

.upload-area input{ display:none; }
.upload-icon{ font-size:30px; color:var(--accent); }
.upload-area p{ color:var(--text-secondary); font-size:14px; margin:0; }

button[type="submit"]{
    height:56px;
    border:none;
    border-radius:var(--radius-btn);
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:white;
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.25s var(--ease);
    box-shadow:0 16px 34px rgba(15,111,255,.26);
}

button[type="submit"]:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 46px rgba(15,111,255,.34);
}

/* ===== Locked Upload (guest state) ===== */

.cl-upload-locked{ text-align:center; }

.cl-locked-body{
    display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px 10px 10px;
}

.cl-locked-icon{
    font-size:32px;
    color:var(--accent);
    width:76px; height:76px;
    border-radius:20px;
    background:var(--sky);
    border:1.5px solid rgba(15,111,255,.18);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:6px;
}

.cl-locked-text{ color:var(--text); font-size:14.5px; line-height:2; max-width:420px; margin:0; }
.cl-locked-register{ font-size:13.5px; color:var(--text-secondary); margin:6px 0 0; }
.cl-locked-register a{ color:var(--accent); font-weight:600; }

/* ===== Section Head ===== */

.section-head{ text-align:center; max-width:640px; margin:0 auto 50px; }
.section-head .eyebrow{ justify-content:center; margin-bottom:14px; }

.section-head h2{
    background:linear-gradient(120deg, var(--navy) 0%, var(--accent) 55%, var(--accent-purple) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-size:40px;
    font-weight:900;
    letter-spacing:-.01em;
    margin:0 0 14px;
}

.section-sub{ color:var(--text-secondary); font-size:15px; line-height:2; margin:0; }

.eyebrow--teal{ color:var(--accent-teal); }
.eyebrow--teal::before{ background:var(--accent-teal); box-shadow:0 0 0 4px rgba(15,182,168,.16); }

.eyebrow--purple{ color:var(--accent-purple); }
.eyebrow--purple::before{ background:var(--accent-purple); box-shadow:0 0 0 4px rgba(124,111,217,.16); }

.eyebrow--gold{ color:var(--accent-gold); }
.eyebrow--gold::before{ background:var(--accent-gold); box-shadow:0 0 0 4px rgba(224,166,78,.18); }

.eyebrow--coral{ color:var(--accent-coral); }
.eyebrow--coral::before{ background:var(--accent-coral); box-shadow:0 0 0 4px rgba(224,121,93,.18); }

/* ===== Reusable gradient banner ===== */

.cl-gradient-banner{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-lg);
    padding:54px 40px;
    margin-bottom:56px;
    text-align:center;
    background:linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 45%, var(--navy) 100%);
    box-shadow:var(--shadow-lg);
    isolation:isolate;
}

.cl-gradient-banner::before,
.cl-gradient-banner::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(50px);
    z-index:-1;
    pointer-events:none;
}

.cl-gradient-banner::before{
    width:340px; height:340px;
    top:-140px; inset-inline-end:-80px;
    background:rgba(255,255,255,.20);
}

.cl-gradient-banner::after{
    width:280px; height:280px;
    bottom:-140px; inset-inline-start:-60px;
    background:rgba(169,216,255,.30);
}

.cl-gradient-banner .eyebrow{
    color:#DCE6FF;
    justify-content:center;
}

.cl-gradient-banner .eyebrow::before{
    background:#DCE6FF;
    box-shadow:0 0 0 4px rgba(255,255,255,.22);
}

.cl-gradient-banner h2{
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    color:var(--white);
}

.cl-gradient-banner .section-sub{ color:rgba(255,255,255,.85); }

/* ===== Services ===== */

.services{ padding:100px 0; position:relative; }

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.service-card{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    padding:28px;
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:var(--shadow-sm);
    transition:.3s var(--ease);
    border-inline-start:4px solid transparent;
}

.service-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:var(--glow);
    border-right-color:var(--accent);
}

.service-icon{
    width:52px; height:52px;
    border-radius:16px;
    background:var(--sky);
    border:1.5px solid rgba(15,111,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:24px;
    color:var(--accent);
    margin-bottom:16px;
    transition:.25s var(--ease);
}

.service-card:hover .service-icon{
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border-color:transparent;
    color:var(--white);
}

.service-card:nth-child(4n+2) .service-icon{ color:var(--accent-teal); border-color:rgba(15,182,168,.22); }
.service-card:nth-child(4n+2):hover .service-icon{ background:var(--accent-teal); border-color:var(--accent-teal); color:var(--white); }
.service-card:nth-child(4n+2):hover{ border-right-color:var(--accent-teal); }

.service-card:nth-child(4n+3) .service-icon{ color:var(--accent-purple); border-color:rgba(124,111,217,.22); }
.service-card:nth-child(4n+3):hover .service-icon{ background:var(--accent-purple); border-color:var(--accent-purple); color:var(--white); }
.service-card:nth-child(4n+3):hover{ border-right-color:var(--accent-purple); }

.service-card:nth-child(4n+4) .service-icon{ color:var(--accent-gold); border-color:rgba(224,166,78,.24); }
.service-card:nth-child(4n+4):hover .service-icon{ background:var(--accent-gold); border-color:var(--accent-gold); color:var(--white); }
.service-card:nth-child(4n+4):hover{ border-right-color:var(--accent-gold); }

.service-card:nth-child(4n+5) .service-icon{ color:var(--accent-coral); border-color:rgba(224,121,93,.24); }
.service-card:nth-child(4n+5):hover .service-icon{ background:var(--accent-coral); border-color:var(--accent-coral); color:var(--white); }
.service-card:nth-child(4n+5):hover{ border-right-color:var(--accent-coral); }

.service-card h3{ color:var(--navy); font-size:16.5px; font-weight:800; margin:0 0 8px; }
.service-card p{ font-size:13.5px; line-height:1.9; margin:0; color:var(--text); }

/* ===== Features ===== */

.features{ padding:100px 0; }

.features-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.feature{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    padding:32px;
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:var(--shadow-sm);
    transition:.3s var(--ease);
}

.feature:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:var(--glow);
    border-color:rgba(15,111,255,.32);
}

.feature-icon{
    width:54px; height:54px;
    border-radius:16px;
    background:var(--sky);
    border:1.5px solid rgba(15,111,255,.18);
    display:flex; align-items:center; justify-content:center;
    font-size:25px;
    color:var(--accent-2);
    transition:.25s var(--ease);
}

.feature:hover .feature-icon{
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border-color:transparent;
    color:var(--white);
}

.feature:nth-child(3n+2) .feature-icon{ color:var(--accent-gold); border-color:rgba(224,166,78,.24); }
.feature:nth-child(3n+2):hover .feature-icon{ background:var(--accent-gold); border-color:var(--accent-gold); color:var(--white); }

.feature:nth-child(3n+3) .feature-icon{ color:var(--accent-teal); border-color:rgba(15,182,168,.22); }
.feature:nth-child(3n+3):hover .feature-icon{ background:var(--accent-teal); border-color:var(--accent-teal); color:var(--white); }

.feature h3{ color:var(--navy); margin:16px 0 10px; font-size:18px; font-weight:800; }
.feature p{ line-height:1.9; margin:0; font-size:15px; color:var(--text); }

/* ===== Result Page ===== */

.result-title{
    font-size:32px; font-weight:900; color:var(--navy); margin:50px 0 25px; letter-spacing:-.01em;
}

.result-card{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-radius:var(--radius-md);
    padding:32px;
    box-shadow:var(--shadow-sm);
    margin-bottom:28px;
    border:1px solid rgba(255,255,255,.8);
}

.result-card h2{ margin:0 0 18px; color:var(--navy); font-size:22px; font-weight:800; }

pre{
    white-space:pre-wrap;
    word-break:break-word;
    text-align:start;
    font-family:"Vazirmatn",sans-serif;
    font-size:15px;
    line-height:2;
    color:var(--text);
    background:var(--sky);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:22px;
    overflow-x:auto;
    margin:0;
}

/* ===== Loading ===== */

.loading-container{
    min-height:70vh;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:22px;
}

.loader{
    width:74px; height:74px;
    border-radius:50%;
    background:conic-gradient(var(--navy), var(--accent-2), var(--accent-soft), var(--navy));
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    animation:spin 1s linear infinite;
}

/* ===== Result Page Extras ===== */

.result-section{ padding:60px 0 100px; }

.analysis-content{ line-height:2; color:var(--text); font-size:15.5px; }

.analysis-content h1{
    font-size:22px; font-weight:800; color:var(--navy);
    background:var(--sky);
    padding:12px 20px;
    border-radius:var(--radius-sm);
    border-inline-start:4px solid var(--accent);
    margin:28px 0 16px;
}

.analysis-content h1:first-child{ margin-top:0; }
.analysis-content h2{ font-size:19px; color:var(--navy); margin:24px 0 12px; }
.analysis-content h3{ font-size:17px; color:var(--accent-2); margin:20px 0 10px; }
.analysis-content p{ margin:0 0 14px; }
.analysis-content ul, .analysis-content ol{ margin:0 0 16px; padding-inset-inline-start:24px; }
.analysis-content li{ margin-bottom:8px; }
.analysis-content strong{ color:var(--navy); font-weight:700; }

.analysis-content table{
    width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px;
    border-radius:var(--radius-sm); overflow:hidden;
}

.analysis-content th{ background:var(--navy); color:var(--white); padding:12px 16px; text-align:start; }
.analysis-content td{ padding:12px 16px; border-bottom:1px solid var(--line); }
.analysis-content tr:nth-child(even){ background:var(--sky); }

.ocr-details{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-md);
    padding:20px 24px;
    margin-top:10px;
    box-shadow:var(--shadow-sm);
}

.ocr-details summary{ cursor:pointer; font-weight:700; color:var(--navy); font-size:15px; }
.ocr-details pre{ margin-top:16px; }

.result-actions{ margin-top:36px; text-align:center; }

/* ===== Processing Page ===== */

.processing-section{ padding:100px 0; min-height:70vh; display:flex; align-items:center; }

.processing-card{
    max-width:560px; margin:auto;
    background:var(--glass-strong);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(255,255,255,.8);
    padding:50px 40px;
    text-align:center;
    display:flex; flex-direction:column; align-items:center;
}

.processing-title{ font-size:22px; font-weight:800; color:var(--navy); margin:24px 0 8px; }
.processing-sub{ color:var(--text-secondary); font-size:14px; margin:0 0 34px; }

.stage-list{ display:flex; flex-direction:column; gap:16px; text-align:start; margin-bottom:24px; width:100%; }

.stage-item{
    display:flex; align-items:center; gap:14px;
    padding:12px 16px;
    border-radius:var(--radius-sm);
    background:var(--sky);
    opacity:.5;
    transition:.3s var(--ease);
}

.stage-item.active{ opacity:1; background:rgba(15,111,255,.08); }
.stage-item.done{ opacity:.85; }

.stage-dot{ width:12px; height:12px; border-radius:50%; background:#C5D6EE; flex-shrink:0; }

.stage-item.active .stage-dot{ background:var(--accent); box-shadow:0 0 0 4px rgba(15,111,255,.16); }
.stage-item.done .stage-dot{ background:var(--accent-2); }

.stage-label{ font-size:14.5px; color:var(--navy); font-weight:600; }

.processing-note{ font-size:13px; color:var(--text-secondary); line-height:1.9; }
.processing-error{ margin-top:20px; }
.processing-error p{ color:var(--warn); margin-bottom:16px; font-size:14.5px; }

/* ===== CL Auth Pages ===== */

.cl-auth-split{ min-height:calc(100vh - 96px); display:grid; grid-template-columns:1fr 1fr; }

.cl-auth-brand{
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    display:flex; align-items:center; justify-content:center;
    padding:60px;
    position:relative;
    overflow:hidden;
}

.cl-auth-brand::before{
    content:"";
    position:absolute; inset:-30%;
    background:conic-gradient(from 0deg, var(--accent-2), var(--accent-soft), transparent 45%, var(--accent-2));
    filter:blur(90px); opacity:.28;
    animation:spin-slow 18s linear infinite;
}

.cl-auth-brand-inner{ max-width:420px; text-align:center; position:relative; z-index:1; }
.cl-auth-robot{ width:180px; margin:0 auto 30px; filter:drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
.cl-auth-brand-inner h2{ color:var(--white); font-size:24px; font-weight:800; margin:0 0 16px; }
.cl-auth-brand-inner p{ color:#B9D0E8; font-size:15px; line-height:2; }

.cl-auth-form-side{ display:flex; align-items:center; justify-content:center; padding:60px 40px; }

.cl-auth-box{
    width:100%; max-width:420px;
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:40px 34px;
}

.cl-auth-logo{ display:block; height:44px; width:auto; margin:0 auto 28px; }
.cl-auth-heading{ text-align:center; font-size:24px; font-weight:800; color:var(--navy); margin:0 0 8px; }
.cl-auth-desc{ text-align:center; color:var(--text-secondary); font-size:14px; margin:0 0 28px; }

.cl-auth-alert{ padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:20px; text-align:center; }
.cl-auth-alert-error{ background:#FEECEC; color:#C2374B; }
.cl-auth-alert-success{ background:var(--sky); color:var(--navy); }

.cl-auth-fields{ display:flex; flex-direction:column; gap:18px; }
.cl-field{ display:flex; flex-direction:column; gap:8px; width:100%; }
.cl-field label{ display:block; font-size:13.5px; font-weight:600; color:var(--navy); }

.cl-field input, .cl-field select{
    display:block; width:100%; height:50px; box-sizing:border-box;
    border-radius:var(--radius-sm);
    border:1px solid var(--line);
    background:var(--sky);
    color:var(--navy);
    font-family:inherit;
    font-size:14.5px;
    padding:0 16px;
    transition:.2s var(--ease);
}

.cl-field input:focus, .cl-field select:focus{ outline:2px solid var(--accent-2); outline-offset:2px; }
.cl-field input::placeholder{ color:var(--text-secondary); }

.cl-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.cl-auth-submit{
    display:block; width:100%; height:54px; border:none;
    border-radius:var(--radius-btn);
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:white;
    font-family:inherit; font-size:16px; font-weight:700;
    cursor:pointer; transition:.25s var(--ease); margin-top:4px;
    box-shadow:0 16px 34px rgba(15,111,255,.26);
}

.cl-auth-submit:hover{ transform:translateY(-3px); box-shadow:0 22px 46px rgba(15,111,255,.34); }

.cl-auth-footer-link{ text-align:center; margin-top:22px; font-size:14px; color:var(--text-secondary); }
.cl-auth-footer-link a{ color:var(--accent); font-weight:600; }

@media(max-width:900px){
    .cl-auth-split{ grid-template-columns:1fr; }
    .cl-auth-brand{ padding:40px 24px; min-height:240px; }
    .cl-auth-robot{ width:120px; margin-bottom:16px; }
}

/* ===== CL Profile Page ===== */

.cl-profile-section{ padding:60px 0 100px; }
.cl-profile-header{ display:flex; align-items:center; gap:20px; margin-bottom:36px; }

.cl-profile-avatar{
    width:64px; height:64px; border-radius:20px;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:white; font-size:26px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow:0 10px 24px rgba(15,111,255,.26);
}

.cl-profile-header h1{ font-size:22px; font-weight:800; color:var(--navy); margin:0 0 4px; }
.cl-profile-header p{ color:var(--text-secondary); font-size:14px; margin:0; }

.cl-profile-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start; }

.cl-profile-card{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.8);
    padding:32px;
    box-shadow:var(--shadow-sm);
    transition:.25s var(--ease);
}

.cl-profile-card-title{ font-size:17px; font-weight:800; color:var(--navy); margin:0 0 6px; }
.cl-profile-card-sub{ font-size:13.5px; color:var(--text-secondary); margin:0 0 24px; }

.cl-info-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.cl-info-row:last-of-type{ border-bottom:none; }
.cl-info-label{ font-size:13.5px; color:var(--text-secondary); }
.cl-info-value{ font-size:14px; color:var(--navy); font-weight:600; }

.cl-info-note{
    margin-top:18px; padding:14px 16px;
    background:var(--sky);
    border-radius:var(--radius-sm);
    font-size:12.5px; color:var(--text-secondary); line-height:1.9;
}

.cl-profile-external-link{ display:inline-block; margin-top:16px; color:var(--accent); font-weight:600; font-size:13.5px; }

@media(max-width:900px){
    .cl-profile-grid{ grid-template-columns:1fr; }
    .cl-field-row{ grid-template-columns:1fr; }
}

/* ===== Footer ===== */

.footer{
    margin:70px auto 40px;
    width:92%;
    max-width:1320px;
    border-radius:36px;
    background:linear-gradient(160deg, var(--sky) 0%, #F7FAFD 55%, #F7FAFD 100%);
    padding:0 0 34px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(255,255,255,.85);
}

.footer::before{
    content:"";
    position:absolute;
    inset:-30%;
    background:radial-gradient(circle at 15% 15%, rgba(15,111,255,.12), transparent 55%),
               radial-gradient(circle at 90% 10%, rgba(63,169,255,.18), transparent 50%);
    pointer-events:none;
}

.footer-badge-bar{
    position:relative;
    z-index:1;
    padding:52px 44px 46px;
    margin:0 0 6px;
    border-radius:30px 30px 0 0;
    background:linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 45%, var(--navy) 100%);
    overflow:hidden;
    isolation:isolate;
}

.footer-badge-bar::before,
.footer-badge-bar::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(55px);
    z-index:-1;
    pointer-events:none;
}

.footer-badge-bar::before{
    width:300px; height:300px;
    top:-130px; inset-inline-end:-60px;
    background:rgba(255,255,255,.18);
}

.footer-badge-bar::after{
    width:260px; height:260px;
    bottom:-140px; inset-inline-start:-40px;
    background:rgba(169,216,255,.30);
}

.footer-badge-inner{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    gap:18px;
    text-align:start;
    position:relative;
    z-index:1;
}

.footer-brand-block{
    display:flex;
    align-items:center;
    gap:14px;
}

.footer-brand-logo{
    height:52px;
    width:auto;
    filter:brightness(0) invert(1);
}

.footer-brand-block strong{
    display:block;
    font-size:20px;
    font-weight:800;
    color:var(--white);
}

.footer-brand-block span{
    display:block;
    font-size:13px;
    color:rgba(255,255,255,.78);
}

.footer-brand-desc{
    max-width:720px;
    font-size:14.5px;
    line-height:2.1;
    color:rgba(255,255,255,.9);
    margin:0;
}

.footer-inner{
    text-align:start;
    position:relative;
    z-index:1;
    padding-top:40px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:32px;
    margin-bottom:34px;
}

.footer-col{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-col-title{
    font-size:14px;
    font-weight:800;
    color:var(--navy);
    margin:0 0 6px;
}

.footer-col a{
    font-size:13.5px;
    color:var(--text-secondary);
    transition:.2s var(--ease);
}

.footer-col a:hover{
    color:var(--accent);
}

.footer-contact-row{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-start;
}

.footer-contact-row .material-symbols-outlined{
    font-size:18px;
    color:var(--accent-2);
    flex-shrink:0;
}

.footer-address-text{
    font-size:13.5px;
    color:var(--text-secondary);
    line-height:2;
    margin:0;
}

.footer-copyright{
    color:var(--text-secondary);
    font-size:12.5px;
    text-align:center;
    margin:0;
    border-top:1px solid rgba(15,111,255,.10);
    padding-top:20px;
    position:relative;
    z-index:1;
}

@media(max-width:960px){
    .footer{ border-radius:24px; }
    .footer-badge-inner{ align-items:center; text-align:center; }
    .footer-brand-block{ flex-direction:column; text-align:center; }
    .footer-grid{
        grid-template-columns:1fr 1fr;
        text-align:center;
    }
    .footer-contact-row{ justify-content:center; }
    .footer-inner{ text-align:center; }
}

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

/* ===== Responsive ===== */

@media(max-width:960px){
    .hero-grid{ grid-template-columns:1fr; text-align:center; }
    .hero-media{ order:-1; min-height:300px; }
    .hero-robot{ max-height:280px; }
    .hero-actions{ justify-content:center; }
    .lead{ margin-inline-end:auto; margin-inline-start:auto; }
    .services-grid{ grid-template-columns:repeat(2,1fr); }
    .features-grid{ grid-template-columns:1fr; }
    .hero-text h1{ font-size:40px; }
    .badge{ max-width:180px; font-size:13px; }
    .logo img{ max-height:44px; }
    .footer{ border-radius:24px; padding:44px 24px 26px; }
}

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

@media(prefers-reduced-motion:reduce){
    .loader, .badge, .cl-scan-ring::before, .upload-card::before, .cl-auth-brand::before{ animation:none; }
}

/* ===== History Page ===== */

.cl-history-empty{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-md);
    padding:60px 30px; text-align:center;
    box-shadow:var(--shadow-sm);
}

.cl-history-empty p{ color:var(--text-secondary); margin:0 0 22px; font-size:15px; }

.cl-history-list{ display:flex; flex-direction:column; gap:14px; }

.cl-history-item{
    display:flex; justify-content:space-between; align-items:center;
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-md);
    padding:18px 24px;
    box-shadow:var(--shadow-sm);
    transition:.25s var(--ease);
}

.cl-history-item:hover{ border-color:rgba(15,111,255,.30); box-shadow:var(--glow); transform:translateY(-3px); }
.cl-history-item-main{ display:flex; align-items:center; gap:14px; }

.cl-history-badge{
    background:linear-gradient(135deg, rgba(15,111,255,.10), rgba(63,169,255,.16));
    color:var(--navy);
    font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:999px;
}

.cl-history-filename{ color:var(--navy); font-size:14.5px; font-weight:600; }
.cl-history-date{ color:var(--text-secondary); font-size:13px; font-family:var(--mono); }

/* ===== Trends Page ===== */

.cl-trends-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:start; }
.cl-trends-table{ display:flex; flex-direction:column; gap:10px; }

.cl-trends-row{
    display:grid; grid-template-columns:1.2fr 1fr 1fr auto; align-items:center; gap:10px;
    padding:14px 16px; border-radius:var(--radius-sm); background:var(--sky);
    border-inline-start:4px solid #C5D6EE;
}

.cl-trends-status-high{ border-right-color:var(--warn); }
.cl-trends-status-low{ border-right-color:var(--mild); }
.cl-trends-status-normal{ border-right-color:var(--accent-2); }

.cl-trends-name{ font-weight:700; color:var(--navy); font-size:14px; }
.cl-trends-value{ font-size:14px; color:var(--text); font-family:var(--mono); }
.cl-trends-range{ font-size:12.5px; color:var(--text-secondary); font-family:var(--mono); }

.cl-trends-badge{
    font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;
    background:var(--white); color:var(--navy); justify-self:end;
}

.cl-trends-select{
    height:48px; width:100%; border-radius:var(--radius-sm);
    border:1px solid var(--line); background:var(--sky); color:var(--navy);
    font-family:inherit; font-size:14px; padding:0 14px; margin-bottom:20px;
}

.cl-trends-chart-wrap{ background:var(--sky); border-radius:var(--radius-md); padding:20px; }
.cl-trends-note{ font-size:12.5px; color:var(--text-secondary); margin-top:10px; min-height:16px; }

.cl-trends-disclaimer{
    margin-top:30px; background:#FEF3C7; color:#92400E;
    padding:16px 20px; border-radius:var(--radius-sm); font-size:13px; line-height:1.9;
}

@media(max-width:900px){
    .cl-trends-grid{ grid-template-columns:1fr; }
    .cl-trends-row{ grid-template-columns:1fr 1fr; }
    .cl-trends-range{ display:none; }
}

/* ===== Small generic utilities ===== */

.text-center{ text-align:center; }
.py-5{ padding-top:48px; padding-bottom:48px; }
.mt-4{ margin-top:24px; }
.error-icon{ font-size:44px; color:var(--warn); }

/* ===== Followup Reminder Banner ===== */

.cl-followup-banner{ padding:24px 0 0; }

.cl-followup-card{
    display:flex; align-items:flex-start; gap:16px;
    background:#FEF3C7; border:1px solid #FCD34D;
    border-radius:var(--radius-md); padding:20px 24px;
}

.cl-followup-icon{
    font-size:22px; color:#92400E; flex-shrink:0;
    width:40px; height:40px; border-radius:12px;
    background:rgba(255,255,255,.5);
    display:flex; align-items:center; justify-content:center;
}

.cl-followup-body h3{ margin:0 0 10px; color:#92400E; font-size:16px; font-weight:800; }
.cl-followup-body ul{ margin:0; padding-inset-inline-start:20px; color:#92400E; font-size:14px; line-height:2; }

/* ===== FAQ Section ===== */

.cl-faq{ padding:100px 0; }
.cl-faq-list{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

.cl-faq-item{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-md);
    padding:20px 24px;
    box-shadow:var(--shadow-sm);
}

.cl-faq-item summary{
    cursor:pointer; font-weight:700; color:var(--navy); font-size:15.5px;
    list-style:none; display:flex; justify-content:space-between; align-items:center;
}

.cl-faq-item summary::-webkit-details-marker{ display:none; }

.cl-faq-item summary::after{
    content:"+"; font-size:20px; color:var(--accent-2); margin-inset-inline-start:12px; flex-shrink:0;
}

.cl-faq-item[open] summary::after{ content:"−"; }
.cl-faq-item p{ margin:14px 0 0; color:var(--text); font-size:14.5px; line-height:1.9; }

/* ===== Organ-based Result Groups ===== */

.cl-organ-groups{ display:flex; flex-direction:column; gap:28px; }

.cl-organ-group-title{
    display:flex; align-items:center; gap:10px;
    font-size:16.5px; font-weight:800; color:var(--navy); margin:0 0 14px;
}

.cl-organ-icon{ font-size:20px; }
.cl-organ-items{ display:flex; flex-direction:column; gap:12px; }

.cl-organ-item{ background:var(--sky); border-radius:var(--radius-sm); padding:16px 18px; border-inline-start:4px solid #C5D6EE; }
.cl-organ-item-high{ border-right-color:var(--warn); }
.cl-organ-item-low{ border-right-color:var(--mild); }
.cl-organ-item-normal{ border-right-color:var(--accent-2); }

.cl-organ-item-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.cl-organ-item-name{ font-weight:700; color:var(--navy); font-size:14.5px; }
.cl-organ-item-value{ font-family:var(--mono); font-size:14px; color:var(--text); }

.cl-organ-item-badge{
    font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;
    background:var(--white); color:var(--navy);
}

.cl-organ-bar-wrap{ display:flex; flex-direction:column; gap:6px; }
.cl-organ-bar-track{ position:relative; height:10px; border-radius:999px; background:rgba(15,111,255,.08); overflow:visible; }
.cl-organ-bar-range{ position:absolute; top:0; bottom:0; border-radius:999px; background:rgba(63,169,255,.30); }

.cl-organ-bar-marker{
    position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
    background:var(--accent); border:2px solid var(--white);
    box-shadow:0 2px 6px rgba(15,111,255,.30);
    transform:translate(50%, -50%);
}

.cl-organ-bar-range-label{ font-size:12px; color:var(--text-secondary); font-family:var(--mono); }

.cl-organ-bar-zone-low, .cl-organ-bar-zone-high{
    position:absolute; top:0; bottom:0;
    background:repeating-linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.14) 4px, rgba(245,158,11,.22) 4px, rgba(245,158,11,.22) 8px);
    border-radius:999px;
}

.cl-organ-bar-tick{ position:absolute; top:-3px; width:2px; height:16px; background:var(--navy); opacity:.20; transform:translateX(50%); }
.cl-organ-bar-marker{ z-index:2; }
.cl-organ-bar-marker-mild{ background:var(--mild) !important; }
.cl-organ-bar-marker-severe{ background:var(--warn) !important; box-shadow:0 0 0 4px rgba(239,68,68,.22) !important; }

.cl-organ-bar-value-tag{
    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
    background:var(--navy); color:var(--white);
    font-family:var(--mono); font-size:11.5px; font-weight:700;
    padding:3px 8px; border-radius:8px; white-space:nowrap;
    box-shadow:0 4px 10px rgba(15,111,255,.24);
}

.cl-organ-bar-value-tag::after{
    content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:var(--navy);
}

.cl-organ-item-high .cl-organ-bar-value-tag, .cl-organ-item-high .cl-organ-bar-value-tag::after{ background:var(--warn); }
.cl-organ-item-high .cl-organ-bar-value-tag::after{ border-top-color:var(--warn); }
.cl-organ-item-low .cl-organ-bar-value-tag, .cl-organ-item-low .cl-organ-bar-value-tag::after{ background:var(--mild); }
.cl-organ-item-low .cl-organ-bar-value-tag::after{ border-top-color:var(--mild); }

.cl-organ-bar-scale-labels{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; }
.cl-organ-bar-scale-edge{ font-size:11.5px; color:var(--text-secondary); font-family:var(--mono); flex-shrink:0; }
.cl-organ-bar-scale-labels .cl-organ-bar-range-label{ text-align:center; flex:1; }

/* ===== Trend Chart Legend ===== */

.cl-trend-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.cl-trend-legend-item{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-secondary); }
.cl-trend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.cl-trend-dot-normal{ background:var(--accent-2); }
.cl-trend-dot-high{ background:var(--warn); }
.cl-trend-dot-low{ background:var(--mild); }
.cl-trend-dot-band{ background:rgba(63,169,255,.30); }

/* ===== Testimonials ===== */

.cl-testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.cl-testimonial-card{
    background:var(--glass-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,.8);
    border-radius:var(--radius-md);
    padding:26px;
    box-shadow:var(--shadow-sm);
    position:relative;
    transition:.25s var(--ease);
}

.cl-testimonial-card:hover{ transform:translateY(-4px); box-shadow:var(--glow); }

.cl-testimonial-text{ font-size:14.5px; line-height:2; color:var(--text); margin:0 0 18px; }
.cl-testimonial-author{ display:flex; align-items:center; gap:12px; }

.cl-testimonial-avatar{
    width:38px; height:38px; border-radius:12px;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:white; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}

.cl-testimonial-card:nth-child(4n+2) .cl-testimonial-avatar{ background:linear-gradient(135deg, var(--accent-teal) 0%, #0891A3 100%); }
.cl-testimonial-card:nth-child(4n+3) .cl-testimonial-avatar{ background:linear-gradient(135deg, var(--accent-purple) 0%, #5B4FC4 100%); }
.cl-testimonial-card:nth-child(4n+4) .cl-testimonial-avatar{ background:linear-gradient(135deg, var(--accent-gold) 0%, #C6842E 100%); }

.cl-testimonial-author strong{ display:block; font-size:13.5px; color:var(--navy); }
.cl-testimonial-author small{ font-size:12px; color:var(--text-secondary); }

@media(max-width:900px){ .cl-testimonials-grid{ grid-template-columns:1fr; } }

.cl-chat-header-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    background:var(--sky);
    border:1.5px solid rgba(15,111,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:var(--accent);
    flex-shrink:0;
}
.cl-history-item-main{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}
/* ============================================================
   PHASE 2 — GLOBAL LAYOUT & NAVIGATION SHELL
   ============================================================ */

/* ---- 6.1 Global container upgrade (max-width 1440px) ---- */
:root{
    --container-max:1440px;
}

.container{
    width:92%;
    max-width:var(--container-max);
    margin:auto;
}

.cl-container{
    width:92%;
    max-width:var(--container-max);
    margin:auto;
}


/* ---- 6.2 Page wrapper (consistent vertical rhythm) ---- */
.cl-page-wrapper{
    padding-top:var(--space-12);
    padding-bottom:var(--space-24);
}
.cl-page-wrapper-tight{
    padding-top:var(--space-8);
    padding-bottom:var(--space-16);
}


/* ---- 6.3 Section system (reusable spacing rhythm) ---- */
.cl-section{
    padding:var(--space-24) 0;
    position:relative;
}
.cl-section-sm{ padding:var(--space-12) 0; }
.cl-section-md{ padding:var(--space-16) 0; }
.cl-section-lg{ padding:var(--space-24) 0; }

.cl-section-hero{
    padding:var(--space-20) 0 0;
    overflow:hidden;
}

.cl-section-content{
    padding:var(--space-16) 0;
}

.cl-section-features{
    padding:var(--space-24) 0;
}

.cl-section-stats{
    padding:var(--space-16) 0;
}

.cl-section-cta{
    padding:var(--space-20) 0;
}

.cl-section-faq{
    padding:var(--space-24) 0;
}

.cl-section-head{
    text-align:center;
    max-width:640px;
    margin:0 auto var(--space-12);
}


/* ---- 6.4 Header: sticky + scroll-reactive glass ---- */
.navbar{
    transition:padding var(--duration-base) var(--ease-out);
}

.navbar-inner{
    height:80px;
    padding:0 26px;
    transition:background var(--duration-base) var(--ease-out),
               box-shadow var(--duration-base) var(--ease-out),
               backdrop-filter var(--duration-base) var(--ease-out),
               border-color var(--duration-base) var(--ease-out);
}

/* applied via tiny JS scroll-listener in base.html — pure visual state */
.navbar.is-scrolled .navbar-inner{
    background:var(--glass-bg-strong);
    backdrop-filter:blur(32px) saturate(180%);
    -webkit-backdrop-filter:blur(32px) saturate(180%);
    box-shadow:var(--shadow-md);
    border-color:rgba(255,255,255,.9);
}


/* ---- 6.5 Nav link — underline hover animation + glow ---- */
.cl-nav-link{
    position:relative;
}
.cl-nav-link::after{
    content:"";
    position:absolute;
    inset-inline-start:18px;
    inset-inline-end:18px;
    bottom:5px;
    height:2px;
    border-radius:2px;
    background:var(--color-accent);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--duration-base) var(--ease-out);
}
.cl-nav-link:hover::after{
    transform:scaleX(1);
}
.cl-nav-link.nav-active::after{
    display:none; /* active state already has solid pill background */
}
.cl-nav-link:hover{
    box-shadow:0 0 0 1px rgba(15,111,255,.06);
}


/* ---- 6.6 Header icon buttons (search / language switch) ---- */
.cl-header-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:var(--radius-full);
    background:var(--glass-bg);
    border:1px solid var(--color-border);
    color:var(--color-secondary);
    cursor:pointer;
    transition:background var(--duration-fast) var(--ease-out),
               box-shadow var(--duration-fast) var(--ease-out),
               color var(--duration-fast) var(--ease-out),
               transform var(--duration-fast) var(--ease-out);
    flex-shrink:0;
}
.cl-header-icon-btn .material-symbols-outlined{ font-size:19px; }
.cl-header-icon-btn:hover{
    background:rgba(15,111,255,.08);
    color:var(--color-primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-1px);
}
.cl-header-icon-btn:disabled,
.cl-header-icon-btn[aria-disabled="true"]{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
}

.cl-header-lang-btn{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.02em;
}

.cl-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

@media(max-width:960px){
    .cl-header-actions{
        display:flex;
        width:100%;
        justify-content:center;
        gap:14px;
        padding-top:14px;
        margin-top:10px;
        border-top:1px solid var(--color-border);
    }
    .navbar-inner > .cl-header-actions{
        display:none; /* در حالت پیش‌فرض هدر مخفی؛ نسخه‌ی داخل منو نمایش داده می‌شود */
    }
}


/* ---- 6.7 Icon size normalization ---- */
.cl-icon-xs{ font-size:14px !important; }
.cl-icon-sm{ font-size:16px !important; }
.cl-icon-md{ font-size:20px !important; }
.cl-icon-lg{ font-size:26px !important; }
.cl-icon-xl{ font-size:34px !important; }

.material-symbols-outlined,
.fa, .fa-solid{
    line-height:1;
}


/* ---- 6.8 Unified card hover system (250ms, lift + glow) ---- */
.service-card,
.feature,
.cl-history-item,
.cl-testimonial-card,
.cl-profile-card,
.result-card,
.upload-card,
.ocr-details,
.cl-faq-item{
    transition:transform var(--duration-base) var(--ease-out),
               box-shadow var(--duration-base) var(--ease-out),
               border-color var(--duration-base) var(--ease-out);
}


/* ---- 6.9 Reusable feature grid / stat grid layout utilities ---- */
.cl-grid-features{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-6);
}
.cl-grid-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-5);
}
.cl-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); }
.cl-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.cl-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }

@media(max-width:960px){
    .cl-grid-features, .cl-grid-3{ grid-template-columns:repeat(2,1fr); }
    .cl-grid-stats, .cl-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
    .cl-grid-features, .cl-grid-3, .cl-grid-2,
    .cl-grid-stats, .cl-grid-4{ grid-template-columns:1fr; }
}


/* ---- 6.10 CTA section block (reusable) ---- */
.cl-cta-block{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-xl);
    padding:var(--space-16) var(--space-10);
    text-align:center;
    background:var(--gradient-dark);
    box-shadow:var(--shadow-xl);
    isolation:isolate;
}
.cl-cta-block::before,
.cl-cta-block::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    z-index:-1;
    pointer-events:none;
}
.cl-cta-block::before{
    width:340px; height:340px;
    top:-140px; inset-inline-end:-80px;
    background:rgba(255,255,255,.18);
}
.cl-cta-block::after{
    width:300px; height:300px;
    bottom:-140px; inset-inline-start:-60px;
    background:rgba(169,216,255,.28);
}
.cl-cta-title{
    color:var(--color-surface);
    font-size:var(--text-h2);
    font-weight:900;
    margin:0 0 14px;
}
.cl-cta-sub{
    color:rgba(255,255,255,.85);
    font-size:var(--text-body-lg);
    max-width:560px;
    margin:0 auto var(--space-8);
    line-height:var(--leading-relaxed);
}
.cl-cta-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}


/* ---- 6.11 Footer spacing refinement (token-based) ---- */
.footer{
    margin:var(--space-20) auto var(--space-10);
}
.footer-badge-bar{
    padding:var(--space-12) var(--space-10) var(--space-10);
}
.footer-inner{
    padding-top:var(--space-10);
}
.footer-grid{
    gap:var(--space-8);
    margin-bottom:var(--space-8);
}
.footer-copyright{
    padding-top:var(--space-5);
}


/* ---- 6.12 Responsive shell fine-tuning ---- */
@media(max-width:1200px){
    .cl-grid-features, .cl-grid-3{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:960px){
    .navbar-inner{ height:auto; padding:12px 20px; }
    .cl-section, .cl-section-lg{ padding:var(--space-16) 0; }
    .cl-section-hero{ padding:var(--space-12) 0 0; }
}

@media(max-width:600px){
    .cl-cta-block{ padding:var(--space-10) var(--space-5); }
    .cl-cta-title{ font-size:var(--text-h3); }
}
/* ============================================================
   PHASE 3 — LANDING PAGE (PREMIUM EXPERIENCE)
   ============================================================ */

/* ---- 7.1 Scroll reveal (subtle, opt-in via .cl-reveal) ---- */
.cl-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity var(--duration-slow) var(--ease-out),
               transform var(--duration-slow) var(--ease-out);
}
.cl-reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
    .cl-reveal{ opacity:1; transform:none; transition:none; }
}


/* ---- 7.2 AI badge (hero eyebrow chip) ---- */
.cl-ai-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 16px 8px 18px;
    border-radius:var(--radius-full);
    background:var(--glass-bg-strong);
    border:1px solid rgba(15,111,255,.20);
    box-shadow:var(--shadow-sm);
    font-size:13px;
    font-weight:700;
    color:var(--color-secondary);
    margin-bottom:24px;
}
.cl-ai-badge-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--color-success);
    box-shadow:0 0 0 4px rgba(0,195,137,.18);
    flex-shrink:0;
    animation:cl-pulse-dot 2s ease-in-out infinite;
}
@keyframes cl-pulse-dot{
    0%, 100%{ opacity:1; }
    50%{ opacity:.4; }
}
@media(prefers-reduced-motion:reduce){
    .cl-ai-badge-dot{ animation:none; }
}


/* ---- 7.3 Trust indicators row (hero) ---- */
.cl-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    margin-top:8px;
}
.cl-trust-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:var(--color-text-secondary);
}
.cl-trust-item .material-symbols-outlined{
    color:var(--color-primary);
}

@media(max-width:960px){
    .cl-trust-row{ justify-content:center; }
}


/* ---- 7.4 AI workflow — connected cards ---- */
.cl-ai-section{
    position:relative;
}

.cl-ai-flow{
    display:flex;
    align-items:stretch;
    gap:0;
    max-width:1120px;
    margin:0 auto;
}

.cl-ai-flow-step{
    flex:1;
    background:var(--glass-bg-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    padding:var(--space-6) var(--space-5);
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.cl-ai-flow-step:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-floating);
}

.cl-ai-flow-icon{
    width:56px; height:56px;
    margin:0 auto 16px;
    border-radius:var(--radius-md);
    background:var(--gradient-primary);
    color:var(--color-surface);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    box-shadow:var(--shadow-md);
}

.cl-ai-flow-step h3{
    font-size:15.5px;
    font-weight:800;
    color:var(--color-secondary);
    margin:0 0 8px;
}
.cl-ai-flow-step p{
    font-size:13px;
    line-height:var(--leading-normal);
    color:var(--color-text-secondary);
    margin:0;
}

.cl-ai-flow-connector{
    flex:0 0 40px;
    align-self:center;
    height:2px;
    background:repeating-linear-gradient(90deg, var(--color-accent) 0 6px, transparent 6px 12px);
    opacity:.6;
    margin:0 -4px;
}

@media(max-width:960px){
    .cl-ai-flow{ flex-direction:column; gap:16px; }
    .cl-ai-flow-connector{
        width:2px; height:28px; flex-basis:auto; margin:0 auto;
        background:repeating-linear-gradient(180deg, var(--color-accent) 0 6px, transparent 6px 12px);
    }
}


/* ---- 7.5 How it works — numbered steps with connector ---- */
.cl-steps{
    display:flex;
    align-items:flex-start;
    gap:0;
    max-width:1180px;
    margin:0 auto;
}

.cl-step{
    flex:1;
    text-align:center;
    padding:0 var(--space-3);
}

.cl-step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px; height:52px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:var(--color-surface);
    font-family:var(--font-mono);
    font-size:19px;
    font-weight:700;
    box-shadow:var(--shadow-md);
    margin-bottom:18px;
}

.cl-step h3{
    font-size:16px;
    font-weight:800;
    color:var(--color-secondary);
    margin:0 0 8px;
}
.cl-step p{
    font-size:13.5px;
    line-height:var(--leading-normal);
    color:var(--color-text-secondary);
    margin:0;
}

.cl-step-connector{
    flex:0 0 60px;
    align-self:center;
    margin-top:-56px;
    height:2px;
    background:linear-gradient(90deg, var(--color-accent), var(--color-primary));
    opacity:.4;
}

@media(max-width:960px){
    .cl-steps{ flex-direction:column; gap:28px; }
    .cl-step-connector{ display:none; }
}


/* ---- 7.6 Statistic cards refinement ---- */
.cl-card-stat{
    background:var(--glass-bg-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid var(--glass-border);
}
.cl-card-stat .cl-stat-value{
    font-size:36px;
    background:linear-gradient(120deg, var(--color-secondary), var(--color-primary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}


/* ---- 7.7 FAQ accordion smooth open (native <details> friendly) ---- */
.cl-faq-item{
    transition:box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cl-faq-item[open]{
    box-shadow:var(--shadow-md);
    border-color:rgba(15,111,255,.22);
}
.cl-faq-item p{
    animation:cl-fade-in var(--duration-base) var(--ease-out) both;
}
/* ============================================================
   PHASE 4 — AI LAB RESULT EXPERIENCE (FLAGSHIP PAGE)
   ============================================================ */

/* ---- 8.1 Result hero / topbar ---- */
.cl-result-hero{
    padding:var(--space-10) 0 0;
}

.cl-result-topbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:24px;
}

.cl-result-eyebrow{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:700;
    color:var(--color-accent);
    margin:0 0 8px;
}

.cl-result-status-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--color-success-bg);
    color:#087F5B;
    font-size:13px;
    font-weight:700;
    padding:8px 16px;
    border-radius:var(--radius-full);
}
.cl-status-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--color-success);
    box-shadow:0 0 0 4px rgba(0,195,137,.18);
}


/* ---- 8.2 Summary grid + Health Score ring ---- */
.cl-summary-grid{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:var(--space-6);
    margin-bottom:var(--space-10);
    align-items:stretch;
}

.cl-health-score-card{
    background:var(--glass-bg-strong);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
    padding:var(--space-8) var(--space-6);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.cl-score-ring-wrap{
    position:relative;
    width:150px;
    height:150px;
    margin-bottom:var(--space-4);
}
.cl-score-ring{ width:100%; height:100%; transform:rotate(-90deg); }
.cl-score-ring-track{
    fill:none;
    stroke:var(--color-border);
    stroke-width:10;
}
.cl-score-ring-value{
    fill:none;
    stroke-width:10;
    stroke-linecap:round;
}

.cl-score-good .cl-score-ring-value{ stroke:var(--color-success); }
.cl-score-warning .cl-score-ring-value{ stroke:var(--color-warning); }
.cl-score-orange .cl-score-ring-value{ stroke:#F97316; }
.cl-score-danger .cl-score-ring-value{ stroke:var(--color-danger); }

.cl-score-ring-center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
}
.cl-score-number{
    font-family:var(--font-mono);
    font-size:34px;
    font-weight:800;
    color:var(--color-text-primary);
}
.cl-score-total{
    font-size:13px;
    color:var(--color-text-secondary);
}

.cl-score-ring-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--color-light-blue);
    color:var(--color-accent);
}

.cl-score-label{
    font-size:15px;
    font-weight:800;
    color:var(--color-secondary);
    margin:0 0 6px;
}
.cl-score-caption{
    font-size:12.5px;
    color:var(--color-text-secondary);
    line-height:var(--leading-normal);
    margin:0;
}

.cl-summary-stats{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-4);
}

.cl-stat-icon{
    color:var(--color-primary);
    margin-bottom:8px;
    display:block;
}

@media(max-width:960px){
    .cl-summary-grid{ grid-template-columns:1fr; }
    .cl-summary-stats{ grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
    .cl-summary-stats{ grid-template-columns:1fr; }
}


/* ---- 8.3 Block title (shared header style for all result sections) ---- */
.cl-block-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:800;
    color:var(--color-secondary);
    margin:0 0 var(--space-5);
}
.cl-block-title .material-symbols-outlined{ color:var(--color-primary); }


/* ---- 8.4 AI Summary card (hero focal point) ---- */
.cl-ai-summary-card{
    background:linear-gradient(150deg, rgba(15,111,255,.05) 0%, rgba(63,169,255,.04) 100%), var(--color-surface);
    border:1px solid rgba(15,111,255,.16);
    border-radius:var(--radius-xl);
    padding:var(--space-8);
    box-shadow:var(--shadow-md);
    margin-bottom:var(--space-8);
}

.cl-ai-summary-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px; height:34px;
    border-radius:var(--radius-sm);
    background:var(--gradient-primary);
    color:#fff;
}
.cl-ai-summary-badge .material-symbols-outlined{ color:#fff; font-size:19px; }

.cl-ai-summary-title{
    display:none; /* the block title above already communicates context; keep body clean */
}

.cl-ai-summary-body{
    line-height:var(--leading-relaxed);
    color:var(--color-text-primary);
    font-size:16px;
}
.cl-ai-summary-body p{ margin:0 0 14px; }
.cl-ai-summary-body ul, .cl-ai-summary-body ol{ margin:0 0 14px; padding-inset-inline-start:22px; }
.cl-ai-summary-body strong{ color:var(--color-secondary); }


/* ---- 8.5 AI Insights grid ---- */
.cl-insights-section{
    margin-bottom:var(--space-10);
}
.cl-insights-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-5);
}

.cl-insight-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-6);
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.cl-insight-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(15,111,255,.24);
}

.cl-insight-icon{
    width:42px; height:42px;
    border-radius:var(--radius-sm);
    background:var(--color-light-blue);
    color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
}

.cl-insight-title{
    font-size:15px;
    font-weight:800;
    color:var(--color-secondary);
    margin:0 0 8px;
}

.cl-insight-card p{ font-size:14px; line-height:var(--leading-normal); color:var(--color-text-primary); margin:0 0 10px; }
.cl-insight-card ul, .cl-insight-card ol{ font-size:14px; line-height:var(--leading-normal); margin:0 0 10px; padding-inset-inline-start:20px; }

@media(max-width:900px){
    .cl-insights-grid{ grid-template-columns:1fr; }
}


/* ---- 8.6 Lab parameter cards ---- */
.cl-params-section{ margin-bottom:var(--space-10); }

.cl-organ-block{ margin-bottom:var(--space-8); }

.cl-organ-block-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16.5px;
    font-weight:800;
    color:var(--color-secondary);
    margin:0 0 var(--space-4);
}
.cl-organ-block-icon{
    width:34px; height:34px;
    border-radius:var(--radius-sm);
    background:var(--color-light-blue);
    color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}

.cl-param-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:var(--space-4);
}

.cl-param-card{
    background:var(--glass-bg-strong);
    backdrop-filter:blur(12px) saturate(150%);
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    border-inline-start:4px solid var(--color-border);
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cl-param-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover);
}

.cl-param-normal{ border-right-color:var(--color-success); }
.cl-param-borderline{ border-right-color:var(--color-warning); }
.cl-param-critical{ border-right-color:var(--color-danger); }
.cl-param-info{ border-right-color:var(--color-accent); }

.cl-param-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}
.cl-param-name{ font-weight:700; color:var(--color-secondary); font-size:14.5px; }

.cl-param-value-row{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:12px;
}
.cl-param-value{
    font-family:var(--font-mono);
    font-size:22px;
    font-weight:800;
    color:var(--color-text-primary);
}
.cl-param-unit{
    font-size:12.5px;
    color:var(--color-text-secondary);
}

.cl-param-bar-wrap{ display:flex; flex-direction:column; gap:8px; }
.cl-param-range-labels{
    display:flex;
    justify-content:space-between;
    font-size:11.5px;
    color:var(--color-text-secondary);
    font-family:var(--font-mono);
}
.cl-param-range-plain{
    font-size:12.5px;
    color:var(--color-text-secondary);
    margin:0;
    font-family:var(--font-mono);
}


/* ---- 8.7 Next actions ---- */
.cl-next-actions-section{ margin-bottom:var(--space-10); }

.cl-action-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cl-action-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(15,111,255,.24);
}
.cl-action-icon{
    width:42px; height:42px;
    border-radius:var(--radius-sm);
    background:var(--gradient-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px;
}
.cl-action-card strong{ font-size:14.5px; color:var(--color-secondary); }
.cl-action-card span:not(.material-symbols-outlined):not(.cl-action-icon){
    font-size:12.5px;
    color:var(--color-text-secondary);
    line-height:1.7;
}


/* ---- 8.8 Download / share cards ---- */
.cl-download-section{ margin:var(--space-8) 0; }

.cl-download-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-6) var(--space-4);
    text-align:center;
    cursor:pointer;
    font-family:inherit;
    transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.cl-download-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(15,111,255,.24);
}
.cl-download-card .material-symbols-outlined{ color:var(--color-primary); }
.cl-download-card strong{ font-size:13.5px; color:var(--color-secondary); font-weight:700; }


/* ---- 8.9 Processing page orb ---- */
.cl-processing-orb{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
}
.cl-processing-orb-icon{
    position:absolute;
    font-size:26px;
    color:var(--color-primary);
}
.cl-stage-check{
    margin-inline-start:auto;
    font-size:18px;
    color:var(--color-success);
    opacity:0;
    transform:scale(.6);
    transition:opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring);
}
.stage-item.done .cl-stage-check{ opacity:1; transform:scale(1); }


/* ---- 8.10 Print stylesheet (clean report output) ---- */
@media print{
    .navbar, .footer, .cl-chat-box, .cl-download-section,
    .cl-next-actions-section, #cl-navbar, .cl-nav-toggle,
    .result-actions, .cl-result-status-chip{
        display:none !important;
    }
    body{ background:#fff !important; }
    .cl-card-glass, .cl-ai-summary-card, .cl-param-card, .cl-insight-card{
        box-shadow:none !important;
        border:1px solid #ddd !important;
        break-inside:avoid;
    }
}


/* ---- 8.11 Responsive fine-tuning ---- */
@media(max-width:960px){
    .cl-param-grid{ grid-template-columns:1fr; }
}
/* ============================================================
   PHASE 6 — PREMIUM AI DASHBOARD
   ============================================================ */

/* ---- 9.1 Welcome block ---- */
.cl-dashboard{ padding-top:var(--space-8); }

.cl-dash-welcome{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:var(--space-6);
}
.cl-dash-greeting{
    font-size:14px;
    color:var(--color-text-secondary);
    margin:0 0 4px;
    font-weight:600;
}
.cl-dash-welcome-name{
    font-size:28px;
    font-weight:900;
    color:var(--color-secondary);
    margin:0 0 6px;
}
.cl-dash-welcome-sub{
    font-size:14.5px;
    color:var(--color-text-secondary);
    margin:0;
}
.cl-dash-welcome-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.cl-dash-meta-chip{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--glass-bg-strong);
    border:1px solid var(--color-border);
    padding:8px 16px;
    border-radius:var(--radius-full);
    font-size:12.5px;
    font-weight:600;
    color:var(--color-secondary);
}
.cl-dash-meta-chip .material-symbols-outlined{ color:var(--color-primary); }


/* ---- 9.2 Empty state ---- */
.cl-dash-empty{
    text-align:center;
    background:var(--glass-bg-strong);
    border:1px dashed rgba(15,111,255,.30);
    border-radius:var(--radius-xl);
    padding:var(--space-16) var(--space-6);
    margin-bottom:var(--space-8);
}
.cl-dash-empty-icon{
    font-size:48px;
    color:var(--color-accent);
    margin-bottom:16px;
    display:block;
}
.cl-dash-empty h2{ color:var(--color-secondary); font-size:20px; margin:0 0 8px; }
.cl-dash-empty p{ color:var(--color-text-secondary); margin:0 0 24px; }


/* ---- 9.3 Health overview hero ---- */
.cl-dash-hero{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:var(--space-6);
    margin-bottom:var(--space-10);
    align-items:stretch;
}
.cl-dash-hero-score{ height:100%; }

.cl-score-ring-wrap-lg{ width:180px; height:180px; }
.cl-score-number-lg{ font-size:40px; }

.cl-dash-hero-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-4);
}

@media(max-width:1100px){
    .cl-dash-hero{ grid-template-columns:1fr; }
}
@media(max-width:700px){
    .cl-dash-hero-stats{ grid-template-columns:1fr 1fr; }
}


/* ---- 9.4 Dashboard section wrapper ---- */
.cl-dash-section{ margin-bottom:var(--space-10); }

.cl-dash-columns{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:var(--space-8);
    align-items:start;
}
.cl-dash-col-main .cl-dash-section:last-child,
.cl-dash-col-side .cl-dash-section:last-child{ margin-bottom:0; }

@media(max-width:1100px){
    .cl-dash-columns{ grid-template-columns:1fr; }
}


/* ---- 9.5 Quick actions grid ---- */
.cl-quick-actions-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-4);
}
.cl-quick-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5) var(--space-3);
    font-size:13px;
    font-weight:700;
    color:var(--color-secondary);
}
.cl-quick-action-icon{
    width:48px; height:48px;
    border-radius:var(--radius-md);
    background:var(--color-light-blue);
    color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    transition:background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.cl-quick-action:hover .cl-quick-action-icon{
    background:var(--gradient-primary);
    color:#fff;
}

@media(max-width:960px){
    .cl-quick-actions-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media(max-width:600px){
    .cl-quick-actions-grid{ grid-template-columns:repeat(2, 1fr); }
}


/* ---- 9.6 Recent analyses list ---- */
.cl-recent-list{ display:flex; flex-direction:column; gap:12px; }

.cl-recent-item{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:14px 18px;
}
.cl-recent-icon{
    width:40px; height:40px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.cl-recent-icon-neutral{ background:var(--color-light-blue); color:var(--color-primary); }
.cl-recent-icon-success{ background:var(--color-success-bg); color:#087F5B; }
.cl-recent-icon-info{ background:var(--color-light-blue); color:var(--color-secondary); }

.cl-recent-body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.cl-recent-body strong{ font-size:14px; color:var(--color-secondary); }
.cl-recent-body span{ font-size:12.5px; color:var(--color-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cl-recent-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
.cl-recent-meta .material-symbols-outlined{ color:var(--color-text-muted); }


/* ---- 9.7 Health timeline ---- */
.cl-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:22px;
    padding-inset-inline-start:24px;
}
.cl-timeline::before{
    content:"";
    position:absolute;
    inset-inline-start:19px;
    top:6px;
    bottom:6px;
    width:2px;
    background:var(--color-border);
}
.cl-timeline-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
}
.cl-timeline-dot{
    position:absolute;
    inset-inline-start:-24px;
    width:40px; height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    box-shadow:0 0 0 4px var(--color-background);
    z-index:1;
}
.cl-timeline-dot-blue{ background:var(--color-primary); }
.cl-timeline-dot-teal{ background:var(--accent-teal); }
.cl-timeline-dot-purple{ background:var(--accent-purple); }
.cl-timeline-dot-gold{ background:var(--accent-gold); }

.cl-timeline-content{
    margin-inset-inline-start:48px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:12px 16px;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.cl-timeline-content strong{ font-size:13.5px; color:var(--color-secondary); }


/* ---- 9.8 Notifications panel ---- */
.cl-notif-panel{
    background:var(--glass-bg-strong);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    display:flex;
    flex-direction:column;
    gap:14px;
}
.cl-notif-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding-bottom:14px;
    border-bottom:1px solid var(--color-border);
}
.cl-notif-item:last-child{ border-bottom:none; padding-bottom:0; }
.cl-notif-dot{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--color-warning);
    margin-top:5px;
    flex-shrink:0;
    box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.cl-notif-dot-success{ background:var(--color-success); box-shadow:0 0 0 3px rgba(0,195,137,.18); }
.cl-notif-item strong{ display:block; font-size:13px; color:var(--color-secondary); margin-bottom:2px; }
.cl-notif-item span{ font-size:12px; color:var(--color-text-secondary); }


/* ---- 9.9 Upcoming tasks ---- */
.cl-task-list{ display:flex; flex-direction:column; gap:10px; }
.cl-task-card{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--color-warning-bg);
    border:1px solid rgba(245,158,11,.22);
    border-radius:var(--radius-md);
    padding:12px 16px;
}
.cl-task-icon{
    width:36px; height:36px;
    border-radius:var(--radius-sm);
    background:#fff;
    color:#92400E;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.cl-task-card strong{ display:block; font-size:13px; color:#92400E; }
.cl-task-card span{ font-size:11.5px; color:#92400E; opacity:.85; }


/* ---- 9.10 AI wellness tips ---- */
.cl-tip-list{ display:flex; flex-direction:column; gap:10px; }
.cl-tip-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:12px 16px;
}
.cl-tip-card .material-symbols-outlined{ color:var(--color-primary); flex-shrink:0; }
.cl-tip-card strong{ display:block; font-size:13px; color:var(--color-secondary); margin-bottom:2px; }
.cl-tip-card span{ font-size:12px; color:var(--color-text-secondary); line-height:1.7; }


/* ---- 9.11 Dashboard mini chart ---- */
.cl-dash-chart-wrap{
    height:220px;
    margin-bottom:14px;
}


/* ---- 9.12 Responsive ---- */
@media(max-width:600px){
    .cl-dash-welcome{ flex-direction:column; align-items:flex-start; }
    .cl-dash-hero-score{ padding:var(--space-6) var(--space-4); }
}
/* ============================================================
   PHASE 7 — MEDICAL HISTORY INTELLIGENCE
   ============================================================ */

/* ---- 10.1 Header ---- */
.cl-hist-header{ margin-bottom:24px; }


/* ---- 10.2 Top overview (reuses .cl-summary-grid pattern from Phase 4/6) ---- */
.cl-hist-overview{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:var(--space-6);
    margin-bottom:var(--space-8);
}
@media(max-width:1000px){
    .cl-hist-overview{ grid-template-columns:1fr; }
}


/* ---- 10.3 Filters ---- */
.cl-hist-filters{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:var(--space-8);
}
.cl-hist-filter-search{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-full);
    padding:0 18px;
    height:48px;
    max-width:420px;
}
.cl-hist-filter-search .material-symbols-outlined{ color:var(--color-text-muted); }
.cl-hist-filter-search input{
    border:none;
    outline:none;
    background:transparent;
    font-family:inherit;
    font-size:14px;
    color:var(--color-text-primary);
    flex:1;
    height:100%;
}

.cl-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.cl-chip{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    color:var(--color-text-secondary);
    font-size:13px;
    font-weight:600;
    padding:8px 16px;
    border-radius:var(--radius-full);
    cursor:pointer;
    transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.cl-chip:hover{ border-color:var(--color-accent); color:var(--color-primary); }
.cl-chip.is-active{
    background:var(--gradient-primary);
    color:#fff;
    border-color:transparent;
    box-shadow:var(--shadow-sm);
}


/* ---- 10.4 AI Health Story ---- */
.cl-story-list{ display:flex; flex-direction:column; gap:12px; }
.cl-story-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    background:linear-gradient(150deg, rgba(15,111,255,.05), rgba(63,169,255,.03)), var(--color-surface);
    border:1px solid rgba(15,111,255,.14);
    border-radius:var(--radius-lg);
    padding:16px 20px;
}
.cl-story-icon{
    width:36px; height:36px;
    border-radius:var(--radius-sm);
    background:var(--gradient-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.cl-story-item p{ margin:0; font-size:14.5px; line-height:var(--leading-relaxed); color:var(--color-text-primary); }


/* ---- 10.5 Trend cards + sparkline ---- */
.cl-trend-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:var(--space-4);
}
.cl-trend-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    cursor:pointer;
}
.cl-trend-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
}
.cl-trend-card-head strong{ font-size:14px; color:var(--color-secondary); }
.cl-trend-card-value{
    font-family:var(--font-mono);
    font-size:22px;
    font-weight:800;
    color:var(--color-text-primary);
    margin-bottom:10px;
}
.cl-sparkline{
    width:100%;
    height:32px;
    display:block;
    margin-bottom:10px;
}
.cl-sparkline path{
    fill:none;
    stroke:var(--color-accent);
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.cl-trend-card-foot{
    display:flex;
    align-items:center;
    gap:6px;
}
.cl-trend-up{ color:var(--color-danger); }
.cl-trend-down{ color:var(--color-success); }


/* ---- 10.6 Compare Reports ---- */
.cl-compare-controls{
    display:flex;
    align-items:flex-end;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:var(--space-6);
}
.cl-compare-controls .cl-input-group{ flex:1; min-width:180px; }
.cl-compare-arrow{ color:var(--color-text-muted); margin-bottom:12px; }

.cl-compare-results{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:var(--space-4);
}
.cl-compare-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
}
.cl-compare-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}
.cl-compare-values{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.cl-compare-values > div{ display:flex; flex-direction:column; gap:2px; }
.cl-compare-values strong{ font-family:var(--font-mono); color:var(--color-secondary); }
.cl-compare-values .material-symbols-outlined{ color:var(--color-text-muted); }

@media(max-width:700px){
    .cl-compare-controls{ flex-direction:column; align-items:stretch; }
    .cl-compare-arrow{ display:none; }
}


/* ---- 10.7 History timeline (vertical, richer than dashboard timeline) ---- */
.cl-hist-timeline{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:24px;
    padding-inset-inline-start:26px;
}
.cl-hist-timeline::before{
    content:"";
    position:absolute;
    inset-inline-start:20px;
    top:8px;
    bottom:8px;
    width:2px;
    background:linear-gradient(180deg, var(--color-accent), var(--color-border));
}
.cl-hist-node{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
}
.cl-hist-node-dot{
    position:absolute;
    inset-inline-start:-26px;
    width:42px; height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow:0 0 0 4px var(--color-background);
    z-index:1;
}
.cl-hist-node-dot-danger{ background:var(--color-danger); }

.cl-hist-node-card{
    margin-inset-inline-start:50px;
    flex:1;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
}
.cl-hist-node-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}
.cl-hist-node-head > div{ display:flex; gap:6px; flex-wrap:wrap; }
.cl-hist-node-filename{
    font-size:14px;
    color:var(--color-text-primary);
    margin:0 0 14px;
}
.cl-hist-node-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding-top:12px;
    border-top:1px solid var(--color-border);
}
.cl-hist-node-score{ display:flex; align-items:center; gap:8px; }
.cl-hist-mini-score{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px; height:32px;
    border-radius:50%;
    font-family:var(--font-mono);
    font-weight:800;
    font-size:12px;
    color:#fff;
}
.cl-hist-mini-score-good{ background:var(--color-success); }
.cl-hist-mini-score-warn{ background:var(--color-warning); }
.cl-hist-mini-score-danger{ background:var(--color-danger); }

@media(max-width:700px){
    .cl-hist-timeline{ padding-inset-inline-start:20px; }
    .cl-hist-node-dot{ width:34px; height:34px; inset-inline-start:-20px; }
    .cl-hist-node-card{ margin-inset-inline-start:36px; }
}


/* ---- 10.8 Marker detail modal ---- */
.cl-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out);
    z-index:100;
}
.cl-modal-overlay.is-open{
    opacity:1;
    visibility:visible;
}
.cl-modal{
    background:var(--color-surface);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-xl);
    max-width:480px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    padding:var(--space-8);
    position:relative;
    transform:scale(.96);
    transition:transform var(--duration-base) var(--ease-out);
}
.cl-modal-overlay.is-open .cl-modal{ transform:scale(1); }
.cl-modal-close{
    position:absolute;
    top:16px; inset-inline-end:16px;
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background:var(--color-light-blue);
    color:var(--color-secondary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.cl-modal-title{
    font-size:20px;
    font-weight:800;
    color:var(--color-secondary);
    margin:0 0 20px;
}
.cl-modal-section{ margin-bottom:18px; }
.cl-modal-section p{ margin:4px 0 0; font-size:14px; color:var(--color-text-primary); line-height:var(--leading-normal); }
.cl-modal-history-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
    max-height:180px;
    overflow-y:auto;
}
.cl-modal-history-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:var(--color-light-blue);
    border-radius:var(--radius-sm);
    padding:8px 12px;
    font-size:12.5px;
}
.cl-modal-history-row strong{ font-family:var(--font-mono); color:var(--color-secondary); }


/* ---- 10.9 Responsive ---- */
@media(max-width:600px){
    .cl-trend-grid{ grid-template-columns:1fr; }
    .cl-compare-results{ grid-template-columns:1fr; }
}
/* ============================================================
   PHASE 9 — WORLD-CLASS COMPONENT SYSTEM
   Consolidation layer: closes gaps found in the audit, adds the
   remaining primitives (Modal generalization, Drawer, Accordion,
   Tabs, Tooltip, Toast, Progress, Avatar, unified Chip/Badge/
   Chart-wrapper), and normalizes spacing/typography/motion.
   Nothing here removes or renames a class already used by a
   template — everything is additive or a shared alias.
   ============================================================ */

/* ---- 11.1 Token audit fixes ---- */
:root{
    /* Canonical motion + elevation (all Phase 1-8 shadows/durations
       already point here; documented as the single source now) */
    --shadow-canonical-hover:var(--shadow-hover);
    --motion-canonical:var(--duration-base) var(--ease-out);

    /* Unified chip sizing token (shared by .cl-chip and .cl-prompt-chip) */
    --chip-height:36px;
    --chip-radius:var(--radius-full);
    --chip-padding:9px 16px;
    --chip-font:12.5px;
}

/* Canonical numeric/medical value style — use on every stat, lab
   value, score, price, or count anywhere in the product. */
.cl-value-mono{
    font-family:var(--font-mono);
    font-weight:800;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
}


/* ---- 11.2 Shared chip base (backs .cl-chip and .cl-prompt-chip) ---- */
.cl-chip,
.cl-prompt-chip{
    height:var(--chip-height);
    display:inline-flex;
    align-items:center;
    padding:var(--chip-padding);
    border-radius:var(--chip-radius);
    font-size:var(--chip-font);
    font-weight:600;
    cursor:pointer;
    transition:background var(--motion-canonical), color var(--motion-canonical),
               border-color var(--motion-canonical), transform var(--motion-canonical);
}


/* ---- 11.3 Icon button (canonical — used by header, cards, toolbars) ---- */
.cl-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:var(--radius-full);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-secondary);
    cursor:pointer;
    transition:background var(--motion-canonical), color var(--motion-canonical),
               box-shadow var(--motion-canonical), transform var(--motion-canonical);
}
.cl-icon-btn:hover{
    background:var(--color-light-blue);
    color:var(--color-primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-1px);
}
.cl-icon-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.cl-icon-btn-sm{ width:30px; height:30px; }
.cl-icon-btn-lg{ width:46px; height:46px; }


/* ---- 11.4 Avatar (canonical) ---- */
.cl-avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    background:var(--gradient-primary);
    color:#fff;
    font-weight:700;
    flex-shrink:0;
    overflow:hidden;
}
.cl-avatar img{ width:100%; height:100%; object-fit:cover; }
.cl-avatar-xs{ width:28px; height:28px; font-size:12px; border-radius:var(--radius-sm); }
.cl-avatar-sm{ width:38px; height:38px; font-size:14px; border-radius:var(--radius-sm); }
.cl-avatar-md{ width:52px; height:52px; font-size:18px; }
.cl-avatar-lg{ width:72px; height:72px; font-size:26px; }
.cl-avatar-circle{ border-radius:50%; }
.cl-avatar-group{ display:flex; }
.cl-avatar-group .cl-avatar{ margin-inset-inline-start:-10px; border:2px solid var(--color-surface); }


/* ---- 11.5 Tabs (new primitive) ---- */
.cl-tabs{ display:flex; flex-direction:column; gap:var(--space-5); }
.cl-tabs-list{
    display:flex;
    gap:4px;
    background:var(--color-light-blue);
    padding:4px;
    border-radius:var(--radius-full);
    width:fit-content;
}
.cl-tab-btn{
    border:none;
    background:transparent;
    padding:8px 20px;
    border-radius:var(--radius-full);
    font-size:13.5px;
    font-weight:700;
    color:var(--color-text-secondary);
    cursor:pointer;
    transition:background var(--motion-canonical), color var(--motion-canonical);
}
.cl-tab-btn.is-active{
    background:var(--color-surface);
    color:var(--color-primary);
    box-shadow:var(--shadow-sm);
}
.cl-tab-panel{ display:none; }
.cl-tab-panel.is-active{ display:block; animation:cl-fade-in var(--duration-base) var(--ease-out); }


/* ---- 11.6 Accordion (generalized from .cl-faq-item) ---- */
.cl-accordion{ display:flex; flex-direction:column; gap:12px; }
.cl-accordion-item{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:16px 20px;
    transition:box-shadow var(--motion-canonical), border-color var(--motion-canonical);
}
.cl-accordion-item[open]{ box-shadow:var(--shadow-sm); border-color:rgba(15,111,255,.20); }
.cl-accordion-item summary{
    cursor:pointer;
    font-weight:700;
    color:var(--color-secondary);
    font-size:14.5px;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.cl-accordion-item summary::-webkit-details-marker{ display:none; }
.cl-accordion-item summary::after{
    content:"+";
    font-size:18px;
    color:var(--color-accent);
    margin-inset-inline-start:12px;
    transition:transform var(--motion-canonical);
}
.cl-accordion-item[open] summary::after{ content:"−"; }
.cl-accordion-item p{ margin:12px 0 0; color:var(--color-text-secondary); font-size:13.5px; line-height:var(--leading-normal); animation:cl-fade-in var(--duration-base) var(--ease-out); }

/* .cl-faq-item now formally aliases .cl-accordion-item so existing
   FAQ markup automatically benefits from any future accordion fix */
.cl-faq-item{ /* see section 7 rules — kept, now documented as legacy alias of .cl-accordion-item */ }


/* ---- 11.7 Tooltip (new primitive, CSS-only) ---- */
.cl-tooltip{ position:relative; display:inline-flex; }
.cl-tooltip::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    background:var(--color-secondary);
    color:#fff;
    font-size:11.5px;
    font-weight:600;
    padding:6px 10px;
    border-radius:var(--radius-sm);
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    z-index:50;
}
.cl-tooltip:hover::after,
.cl-tooltip:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}


/* ---- 11.8 Toast (new primitive) ---- */
.cl-toast-stack{
    position:fixed;
    bottom:24px;
    inset-inline-end:24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:300;
    max-width:340px;
}
.cl-toast{
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:var(--glass-bg-strong);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    padding:14px 16px;
    box-shadow:var(--shadow-lg);
    font-size:13px;
    animation:cl-toast-in var(--duration-base) var(--ease-spring) both;
}
.cl-toast-success{ border-inline-start:3px solid var(--color-success); }
.cl-toast-warning{ border-inline-start:3px solid var(--color-warning); }
.cl-toast-danger{ border-inline-start:3px solid var(--color-danger); }
.cl-toast-info{ border-inline-start:3px solid var(--color-primary); }
.cl-toast.is-leaving{ animation:cl-toast-out var(--duration-fast) var(--ease-out) both; }

@keyframes cl-toast-in{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes cl-toast-out{
    to{ opacity:0; transform:translateY(8px); }
}


/* ---- 11.9 Progress bar (new primitive) ---- */
.cl-progress{
    width:100%;
    height:8px;
    border-radius:var(--radius-full);
    background:var(--color-border);
    overflow:hidden;
}
.cl-progress-bar{
    height:100%;
    border-radius:var(--radius-full);
    background:var(--gradient-primary);
    transition:width var(--duration-slow) var(--ease-out);
}
.cl-progress-bar.is-success{ background:var(--color-success); }
.cl-progress-bar.is-warning{ background:var(--color-warning); }
.cl-progress-bar.is-danger{ background:var(--color-danger); }
.cl-progress-label{
    display:flex;
    justify-content:space-between;
    font-size:11.5px;
    color:var(--color-text-secondary);
    margin-bottom:6px;
}


/* ---- 11.10 Drawer (generalized from Phase 8 mobile context panel) ---- */
.cl-drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.40);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--motion-canonical), visibility var(--motion-canonical);
    z-index:150;
}
.cl-drawer-overlay.is-open{ opacity:1; visibility:visible; }

.cl-drawer{
    position:fixed;
    top:0; bottom:0;
    inset-inline-start:0;
    width:min(360px, 88vw);
    background:var(--color-surface);
    box-shadow:var(--shadow-xl);
    padding:24px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform var(--duration-base) var(--ease-out);
    z-index:151;
}
.cl-drawer.is-open{ transform:translateX(0); }
.cl-drawer-left{ right:auto; inset-inline-end:0; transform:translateX(-100%); }
.cl-drawer-left.is-open{ transform:translateX(0); }


/* ---- 11.11 Modal (formalizing the Phase 7 pattern as the canonical modal) ---- */
/* .cl-modal-overlay / .cl-modal already defined in Phase 7 — this
   section only adds the missing size + footer utilities. */
.cl-modal-sm{ max-width:360px; }
.cl-modal-lg{ max-width:640px; }
.cl-modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:var(--space-6);
    padding-top:var(--space-4);
    border-top:1px solid var(--color-border);
}


/* ---- 11.12 Chart wrapper (canonical — generalizes .cl-dash-chart-wrap) ---- */
.cl-chart-wrapper{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    position:relative;
}
.cl-chart-wrapper-plain{ border:none; padding:0; background:transparent; }
.cl-chart-canvas-box{ height:220px; }
.cl-chart-canvas-box-sm{ height:140px; }
.cl-chart-canvas-box-lg{ height:320px; }
.cl-dash-chart-wrap{ /* legacy alias — same box-model as .cl-chart-canvas-box */ }


/* ---- 11.13 Status badge — canonical mapping table (documentation
   in CSS form: every status across the product must resolve to one
   of these four badge classes, never a bespoke color) ---- */
/*
   normal / success / improved / reviewed        -> .cl-badge-success
   borderline / mild / pending / awaiting          -> .cl-badge-warning
   high / low / critical / severe / declined       -> .cl-badge-danger
   info / neutral-informational                    -> .cl-badge-info
   neutral / no-status                             -> .cl-badge-neutral
*/


/* ---- 11.14 Skeleton variants (extends Phase 1 .cl-skeleton) ---- */
.cl-skeleton-text{ height:14px; border-radius:var(--radius-xs); margin-bottom:8px; }
.cl-skeleton-text:last-child{ width:70%; margin-bottom:0; }
.cl-skeleton-card{ height:120px; border-radius:var(--radius-lg); }
.cl-skeleton-avatar{ width:44px; height:44px; border-radius:50%; }
.cl-skeleton-row{ display:flex; align-items:center; gap:12px; }


/* ---- 11.15 Empty state (canonical — generalizes .cl-dash-empty) ---- */
.cl-empty-state{
    text-align:center;
    background:var(--glass-bg-strong);
    border:1px dashed rgba(15,111,255,.30);
    border-radius:var(--radius-xl);
    padding:var(--space-16) var(--space-6);
}
.cl-empty-state-icon{
    font-size:44px;
    color:var(--color-accent);
    margin-bottom:16px;
    display:block;
}
.cl-empty-state h3{ color:var(--color-secondary); font-size:18px; margin:0 0 8px; }
.cl-empty-state p{ color:var(--color-text-secondary); margin:0 0 20px; font-size:13.5px; }
.cl-empty-state-sm{ padding:var(--space-10) var(--space-5); }
.cl-empty-state-sm .cl-empty-state-icon{ font-size:32px; margin-bottom:10px; }


/* ---- 11.16 Spacing normalization utilities (fill gaps found in audit) ---- */
.cl-mt-0{ margin-top:0 !important; }
.cl-mb-0{ margin-bottom:0 !important; }
.cl-stack-2 > * + *{ margin-top:var(--space-2); }
.cl-stack-4 > * + *{ margin-top:var(--space-4); }
.cl-stack-6 > * + *{ margin-top:var(--space-6); }
.cl-stack-8 > * + *{ margin-top:var(--space-8); }


/* ---- 11.17 Accessibility fixes found in audit ---- */
/* Elements with large border-radius previously clipped the default
   focus ring; normalize offset so it's always visible. */
.cl-chip:focus-visible,
.cl-prompt-chip:focus-visible,
.cl-tab-btn:focus-visible,
.cl-icon-btn:focus-visible,
.cl-quick-action:focus-visible,
.btn:focus-visible,
.cl-btn:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
}

/* Skip-to-content link (was missing entirely — added for keyboard users) */
.cl-skip-link{
    position:absolute;
    top:-48px;
    inset-inline-start:16px;
    background:var(--color-primary);
    color:#fff;
    padding:10px 18px;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:700;
    z-index:1000;
    transition:top var(--duration-fast) var(--ease-out);
}
.cl-skip-link:focus{ top:16px; }


/* ---- 11.18 Motion language consolidation ---- */
/* Every hover/press interaction in the product must use ONE of
   these three canonical motion classes rather than bespoke
   transition declarations. */
.cl-motion-lift{ transition:transform var(--motion-canonical), box-shadow var(--motion-canonical); }
.cl-motion-lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }

.cl-motion-press{ transition:transform var(--duration-fast) var(--ease-out); }
.cl-motion-press:active{ transform:scale(.97); }

.cl-motion-fade{ transition:opacity var(--motion-canonical); }

@media(prefers-reduced-motion:reduce){
    .cl-motion-lift, .cl-motion-press, .cl-motion-fade,
    .cl-toast, .cl-tab-panel, .cl-accordion-item p{
        animation:none !important;
        transition:none !important;
    }
}


/* ---- 11.19 Performance: consolidated backdrop-filter recipe ---- */
/* Every glass surface in the product should reuse this single
   custom property instead of repeating the blur+saturate pair. */
:root{
    --glass-filter:blur(16px) saturate(160%);
}
.cl-card-glass,
.cl-ai-doctor-main,
.navbar.is-scrolled .navbar-inner,
.cl-mega-panel-inner,
.cl-notif-panel{
    backdrop-filter:var(--glass-filter);
    -webkit-backdrop-filter:var(--glass-filter);
}
/* ============================================================
   PHASE 10 — PATIENT JOURNEY & CARE PATH
   ============================================================ */

/* ---- 12.1 Next Best Action card ---- */
.cl-nba-card{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    background:linear-gradient(150deg, rgba(15,111,255,.06), rgba(63,169,255,.04)), var(--color-surface);
    border:1px solid rgba(15,111,255,.18);
    border-radius:var(--radius-xl);
    padding:var(--space-6);
    box-shadow:var(--shadow-md);
}
.cl-nba-icon{
    width:56px; height:56px;
    border-radius:var(--radius-lg);
    background:var(--gradient-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    flex-shrink:0;
    box-shadow:var(--shadow-md);
}
.cl-nba-body{ flex:1; min-width:220px; }
.cl-nba-body strong{ display:block; font-size:16px; color:var(--color-secondary); margin-bottom:4px; }
.cl-nba-body p{ margin:0; font-size:13px; color:var(--color-text-secondary); line-height:var(--leading-normal); }


/* ---- 12.2 Current Status card ---- */
.cl-status-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    padding:var(--space-6);
}
.cl-status-card-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-4);
    margin-bottom:var(--space-6);
}
.cl-status-item{ display:flex; flex-direction:column; gap:6px; }
.cl-status-item strong{ font-size:15px; color:var(--color-secondary); }

.cl-recovery-tracker{ padding-top:var(--space-4); border-top:1px solid var(--color-border); }

@media(max-width:900px){
    .cl-status-card-row{ grid-template-columns:1fr 1fr; }
}


/* ---- 12.3 Care Path Timeline (horizontal desktop / vertical mobile) ---- */
.cl-care-path{
    display:flex;
    align-items:flex-start;
    gap:0;
}
.cl-care-step{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
    min-width:0;
    transition:transform var(--motion-canonical);
}
.cl-care-step:hover{ transform:translateY(-3px); }

.cl-care-step-icon{
    width:52px; height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
    flex-shrink:0;
    box-shadow:var(--shadow-sm);
}
.cl-care-step-done .cl-care-step-icon{ background:var(--color-success); }
.cl-care-step-current .cl-care-step-icon{
    background:var(--gradient-primary);
    box-shadow:0 0 0 6px rgba(15,111,255,.14);
}
.cl-care-step-optional .cl-care-step-icon,
.cl-care-step-upcoming .cl-care-step-icon{ background:var(--color-border); color:var(--color-text-secondary); }

.cl-care-step-body strong{ display:block; font-size:13.5px; color:var(--color-secondary); margin-bottom:4px; }
.cl-care-step-body p{ font-size:11.5px; color:var(--color-text-secondary); line-height:1.7; margin:0 0 8px; }
.cl-care-step-upcoming .cl-care-step-body strong,
.cl-care-step-upcoming .cl-care-step-body p{ opacity:.6; }

.cl-care-step-connector{
    flex:0 0 32px;
    height:2px;
    background:var(--color-border);
    align-self:center;
    margin-top:-52px;
}

@media(max-width:960px){
    .cl-care-path{ flex-direction:column; align-items:stretch; gap:0; }
    .cl-care-step{ flex-direction:row; text-align:start; align-items:flex-start; padding:14px 0; }
    .cl-care-step-body{ flex:1; }
    .cl-care-step-connector{
        width:2px; height:24px; flex-basis:auto;
        margin:0 0 0 25px;
    }
}


/* ---- 12.4 Care Services grid ---- */
.cl-services-care-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-4);
}
.cl-care-service-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
}
.cl-care-service-card.is-recommended{
    border-color:rgba(15,111,255,.30);
    box-shadow:var(--shadow-sm);
}
.cl-care-recommended-tag{
    position:absolute;
    top:12px; inset-inline-end:12px;
    background:var(--gradient-primary);
    color:#fff;
    font-size:10.5px;
    font-weight:700;
    padding:3px 10px;
    border-radius:var(--radius-full);
}
.cl-care-service-icon{
    width:42px; height:42px;
    border-radius:var(--radius-sm);
    background:var(--color-light-blue);
    color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px;
}
.cl-care-service-card strong{ font-size:14.5px; color:var(--color-secondary); }
.cl-care-service-card span:not(.cl-care-recommended-tag):not(.cl-care-soon-tag):not(.material-symbols-outlined){
    font-size:12px; color:var(--color-text-secondary); line-height:1.7;
}

.cl-care-service-soon{
    opacity:.6;
    cursor:default;
}
.cl-care-soon-tag{
    position:absolute;
    top:12px; inset-inline-end:12px;
    background:var(--color-border);
    color:var(--color-text-secondary);
    font-size:10.5px;
    font-weight:700;
    padding:3px 10px;
    border-radius:var(--radius-full);
}

@media(max-width:960px){ .cl-services-care-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:600px){ .cl-services-care-grid{ grid-template-columns:1fr; } }


/* ---- 12.5 Reminder cards (calm, reassuring tone) ---- */
.cl-reminder-list{ display:flex; flex-direction:column; gap:10px; }
.cl-reminder-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--color-light-blue);
    border:1px solid rgba(15,111,255,.14);
    border-radius:var(--radius-md);
    padding:14px 18px;
}
.cl-reminder-icon{
    width:38px; height:38px;
    border-radius:var(--radius-sm);
    background:#fff;
    color:var(--color-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.cl-reminder-card strong{ display:block; font-size:13.5px; color:var(--color-secondary); }
.cl-reminder-card span{ font-size:12px; color:var(--color-text-secondary); }


/* ---- 12.6 Journey widget (reusable, compact) ---- */
.cl-journey-widget{
    background:var(--glass-bg-strong);
    backdrop-filter:var(--glass-filter);
    -webkit-backdrop-filter:var(--glass-filter);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    padding:var(--space-5);
    margin-bottom:var(--space-8);
}
.cl-journey-widget-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}
.cl-journey-widget-head .material-symbols-outlined{ color:var(--color-primary); }
.cl-journey-widget-head strong{ display:block; font-size:14px; color:var(--color-secondary); }
.cl-journey-widget-body{ display:flex; flex-direction:column; gap:8px; }
.cl-journey-widget-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12.5px;
}
/* ============================================================
   PHASE 11 — CRITICAL BUG FIX
   ============================================================ */

/* ---- 13.1 Fix: header nav overlapping header-actions ---- */
@media(min-width:961px) and (max-width:1300px){
    .cl-mega-nav{
        position:static;
        transform:none;
        margin:0 auto;
    }
    .navbar-inner{ flex-wrap:wrap; row-gap:8px; justify-content:center; }
}
.navbar-inner > *{ flex-shrink:0; }
.cl-header-actions{ margin-inline-start:auto; }


/* ---- 13.2 Fix: hero grid overflow clipping the headline ---- */
.hero-grid{
    min-width:0;
}
.hero-text, .hero-media{
    min-width:0;
}
.hero-text h1{
    overflow-wrap:break-word;
    word-break:break-word;
    font-size:clamp(32px, 5vw, 60px);
}
.hero-text .lead{
    overflow-wrap:break-word;
}

/* Same grid-overflow guard applied globally to every grid/flex
   section built in previous phases, in case the same bug exists
   elsewhere (dashboard columns, care path, summary grid, etc.) */
.cl-dash-columns, .cl-dash-hero, .cl-hist-overview, .cl-summary-grid,
.cl-grid-2, .cl-grid-3, .cl-grid-4, .cl-grid-stats, .cl-grid-features,
.cl-care-path, .cl-services-care-grid{
    min-width:0;
}
.cl-dash-columns > *, .cl-dash-hero > *, .cl-hist-overview > *,
.cl-summary-grid > *, .cl-care-path > *, .cl-services-care-grid > *{
    min-width:0;
}
/* ============================================================
   SPRINT A1 — CONSOLIDATION PATCH
   ============================================================ */

@media print{
    .cl-ai-doctor{ display:none !important; }
}

.cl-header-icon-btn{
    width:38px; height:38px;
    border-radius:var(--radius-full);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-secondary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background var(--motion-canonical), color var(--motion-canonical),
               box-shadow var(--motion-canonical), transform var(--motion-canonical);
}
.cl-header-icon-btn:hover{
    background:var(--color-light-blue);
    color:var(--color-primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-1px);
}
/* ============================================================
   SPRINT A2 — JOURNEY, BOOKING, PROFILE, NOTIFICATIONS
   ============================================================ */

/* ---- 15.1 Profile tabs (reuses .cl-tabs from Phase 9) ---- */
.cl-profile-tabs-wrap{ display:grid; grid-template-columns:220px 1fr; gap:var(--space-6); align-items:start; }
.cl-profile-tabs-nav{ display:flex; flex-direction:column; gap:4px; position:sticky; top:100px; }
.cl-profile-tab-link{
    display:flex; align-items:center; gap:10px;
    padding:11px 16px; border-radius:var(--radius-md);
    font-size:13.5px; font-weight:700; color:var(--color-text-secondary);
    cursor:pointer; border:none; background:transparent; text-align:start; width:100%;
    transition:background var(--motion-canonical), color var(--motion-canonical);
}
.cl-profile-tab-link .material-symbols-outlined{ font-size:18px; }
.cl-profile-tab-link:hover{ background:var(--color-light-blue); color:var(--color-primary); }
.cl-profile-tab-link.is-active{ background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-sm); }
.cl-profile-tab-link.is-danger{ color:var(--color-danger); }
.cl-profile-tab-link.is-danger:hover{ background:var(--color-danger-bg); }

@media(max-width:900px){
    .cl-profile-tabs-wrap{ grid-template-columns:1fr; }
    .cl-profile-tabs-nav{ flex-direction:row; overflow-x:auto; position:static; padding-bottom:4px; }
    .cl-profile-tab-link{ width:auto; white-space:nowrap; }
}


/* ---- 15.2 Switch toggle (settings) ---- */
.cl-switch-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0; border-bottom:1px solid var(--color-border);
}
.cl-switch-row:last-child{ border-bottom:none; }
.cl-switch-row strong{ display:block; font-size:13.5px; color:var(--color-secondary); }
.cl-switch-row span{ font-size:12px; color:var(--color-text-secondary); }
.cl-switch{
    position:relative; width:44px; height:24px; flex-shrink:0;
    border-radius:var(--radius-full); background:var(--color-border);
    cursor:pointer; transition:background var(--motion-canonical); border:none;
}
.cl-switch::after{
    content:""; position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px;
    border-radius:50%; background:#fff; box-shadow:var(--shadow-sm);
    transition:transform var(--motion-canonical);
}
.cl-switch.is-on{ background:var(--gradient-primary); }
.cl-switch.is-on::after{ transform:translateX(-20px); }


/* ---- 15.3 Care Plan ---- */
.cl-care-plan-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4); }
.cl-goal-card{
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-lg); padding:var(--space-5);
    display:flex; align-items:flex-start; gap:14px;
}
.cl-goal-check{
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; margin-top:2px;
    border:2px solid var(--color-border); color:transparent;
}
.cl-goal-card.is-done .cl-goal-check{ background:var(--color-success); border-color:var(--color-success); color:#fff; }
.cl-goal-card.is-done strong{ text-decoration:line-through; color:var(--color-text-secondary); }
.cl-goal-body strong{ display:block; font-size:14px; color:var(--color-secondary); margin-bottom:3px; }
.cl-goal-body span{ font-size:12px; color:var(--color-text-secondary); }

@media(max-width:700px){ .cl-care-plan-grid{ grid-template-columns:1fr; } }


/* ---- 15.4 Home Healthcare service card extras (extends .cl-care-service-card) ---- */
.cl-care-service-meta{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.cl-care-service-meta span{
    font-size:10.5px; color:var(--color-text-muted); display:flex; align-items:center; gap:4px;
}
.cl-care-service-meta .material-symbols-outlined{ font-size:14px; }
.cl-care-service-book-btn{ margin-top:12px; width:100%; }


/* ---- 15.5 Booking stepper (client-side, graceful placeholder) ---- */
.cl-stepper{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-6); }
.cl-stepper-step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; text-align:center; }
.cl-stepper-dot{
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:800; font-size:13px;
    background:var(--color-border); color:var(--color-text-secondary);
    transition:background var(--motion-canonical), color var(--motion-canonical);
}
.cl-stepper-step.is-active .cl-stepper-dot{ background:var(--gradient-primary); color:#fff; }
.cl-stepper-step.is-done .cl-stepper-dot{ background:var(--color-success); color:#fff; }
.cl-stepper-step span.cl-stepper-label{ font-size:11px; color:var(--color-text-secondary); }
.cl-stepper-line{ flex:1; height:2px; background:var(--color-border); margin-top:-22px; }

.cl-booking-panel{ display:none; }
.cl-booking-panel.is-active{ display:block; animation:cl-fade-in var(--duration-base) var(--ease-out); }

.cl-booking-option{
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    border:1.5px solid var(--color-border); border-radius:var(--radius-md);
    cursor:pointer; margin-bottom:10px; transition:border-color var(--motion-canonical), background var(--motion-canonical);
}
.cl-booking-option:hover{ border-color:var(--color-accent); }
.cl-booking-option.is-selected{ border-color:var(--color-primary); background:var(--color-light-blue); }
.cl-booking-option-icon{
    width:38px; height:38px; border-radius:var(--radius-sm); background:var(--color-light-blue);
    color:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.cl-booking-footer{ display:flex; justify-content:space-between; gap:10px; margin-top:var(--space-6); }


/* ---- 15.6 Booking dashboard widget ---- */
.cl-booking-list{ display:flex; flex-direction:column; gap:10px; }
.cl-booking-item{
    display:flex; align-items:center; gap:14px;
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-lg); padding:14px 18px;
}
.cl-booking-item-icon{
    width:40px; height:40px; border-radius:var(--radius-sm); background:var(--color-light-blue);
    color:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}


/* ---- 15.7 Notification Center drawer (extends .cl-drawer from Phase 9) ---- */
.cl-notif-drawer-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--space-5); }
.cl-notif-group-title{ font-size:12px; font-weight:800; color:var(--color-text-muted); margin:18px 0 8px; }
.cl-notif-group-title:first-child{ margin-top:0; }
.cl-notif-drawer-item{
    display:flex; align-items:flex-start; gap:12px; padding:12px 0;
    border-bottom:1px solid var(--color-border); position:relative;
}
.cl-notif-drawer-item.is-unread::before{
    content:""; position:absolute; inset-inline-start:-16px; top:16px; width:7px; height:7px;
    border-radius:50%; background:var(--color-primary);
}
.cl-notif-badge-unread{
    position:absolute; top:-4px; inset-inline-end:-4px; background:var(--color-danger); color:#fff;
    font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:var(--radius-full);
    display:flex; align-items:center; justify-content:center; padding:0 4px;
}


/* ---- 15.8 Education widget (reusable, graceful placeholder) ---- */
.cl-edu-widget-card{
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-lg); padding:var(--space-5);
    display:flex; align-items:center; gap:14px;
}
.cl-edu-widget-icon{
    width:44px; height:44px; border-radius:var(--radius-sm); background:var(--color-light-blue);
    color:var(--color-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}


/* ---- 15.9 Global search drawer ---- */
.cl-search-recent-tag{
    display:inline-flex; align-items:center; gap:6px; background:var(--color-light-blue);
    color:var(--color-secondary); font-size:12px; font-weight:600; padding:6px 12px;
    border-radius:var(--radius-full); margin:4px 4px 0 0; cursor:pointer;
}
/* ============================================================
   PHASE 16-17 — EDUCATION & ANALYTICS
   ============================================================ */

/* ---- 17.1 Education widget row (dashboard) ---- */
.cl-edu-widget-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.cl-edu-widget-stat{ display:flex; flex-direction:column; gap:2px; }
.cl-edu-widget-stat .cl-value-mono{ font-size:22px; color:var(--color-secondary); }

/* ---- 17.2 Course cards ---- */
.cl-course-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--space-5); }
.cl-course-card{
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-lg); overflow:hidden;
}
.cl-course-thumb{
    height:120px; background:var(--gradient-primary);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px;
}
.cl-course-body{ padding:var(--space-5); }
.cl-course-body strong{ display:block; font-size:14.5px; color:var(--color-secondary); margin-bottom:6px; }
.cl-course-meta{ display:flex; gap:10px; margin:8px 0 12px; font-size:11.5px; color:var(--color-text-secondary); }
.cl-course-meta span{ display:flex; align-items:center; gap:4px; }

/* ---- 17.3 Category chips (reuses .cl-chip base) ---- */
.cl-category-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-6); }

/* ---- 17.4 Course lesson layout ---- */
.cl-course-layout{ display:grid; grid-template-columns:280px 1fr; gap:var(--space-6); align-items:start; }
.cl-lesson-nav{ display:flex; flex-direction:column; gap:4px; position:sticky; top:100px; }
.cl-lesson-nav-item{
    display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-md);
    font-size:13px; color:var(--color-text-secondary); cursor:pointer;
}
.cl-lesson-nav-item.is-active{ background:var(--color-light-blue); color:var(--color-primary); font-weight:700; }
.cl-lesson-nav-item.is-done .material-symbols-outlined{ color:var(--color-success); }
.cl-lesson-video-placeholder{
    aspect-ratio:16/9; background:var(--color-light-blue); border-radius:var(--radius-lg);
    display:flex; align-items:center; justify-content:center; color:var(--color-primary); font-size:40px; margin-bottom:var(--space-6);
}
@media(max-width:900px){ .cl-course-layout{ grid-template-columns:1fr; } .cl-lesson-nav{ position:static; flex-direction:row; overflow-x:auto; } }

/* ---- 17.5 Education status pill ---- */
.cl-edu-status-not-started{ background:#F1F5F9; color:var(--color-text-secondary); }

/* ---- 17.6 KPI cards ---- */
.cl-kpi-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4); }
.cl-kpi-card{
    background:var(--glass-bg-strong); backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter);
    border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:var(--space-5);
    transition:transform var(--motion-canonical), box-shadow var(--motion-canonical);
}
.cl-kpi-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.cl-kpi-icon{ width:38px; height:38px; border-radius:var(--radius-sm); background:var(--color-light-blue); color:var(--color-primary); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.cl-kpi-value{ font-family:var(--font-mono); font-size:26px; font-weight:800; color:var(--color-secondary); }
.cl-kpi-trend{ display:flex; align-items:center; gap:4px; font-size:11.5px; margin-top:4px; }
.cl-kpi-trend.is-up{ color:var(--color-success); }
.cl-kpi-trend.is-down{ color:var(--color-danger); }
.cl-kpi-label{ font-size:12px; color:var(--color-text-secondary); margin-top:6px; }
@media(max-width:960px){ .cl-kpi-grid{ grid-template-columns:1fr 1fr; } }

/* ---- 17.7 Analytics filter bar ---- */
.cl-analytics-filterbar{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-lg); padding:14px 18px; margin-bottom:var(--space-6);
}
.cl-analytics-filterbar select, .cl-analytics-filterbar input{
    height:38px; border-radius:var(--radius-sm); border:1px solid var(--color-border);
    background:var(--color-light-blue); padding:0 12px; font-size:12.5px; color:var(--color-secondary);
}

/* ---- 17.8 Analytics report print layout ---- */
@media print{
    .cl-analytics-filterbar, .cl-report-export-actions{ display:none !important; }
}
/* ============================================================
   PHASE 18-20 — FINAL PRODUCTION POLISH
   ============================================================ */

/* ---- 18.1 Motion cap: no interaction/entrance animation over 300ms ---- */
:root{
    --duration-slow:300ms; /* was 350ms — capped per audit */
}

/* ---- 18.2 Contrast fix: --color-text-muted failed AA on white bg ---- */
:root{
    --color-text-muted:#5B6B82; /* was #94A3B8 — now meets 4.5:1 on white */
}

/* ---- 18.3 Dead code: .cl-header-icon-btn no longer used anywhere
   (Sprint A1 migrated all usages to .cl-icon-btn). Neutralized. ---- */
.cl-header-icon-btn{ all:unset; }
.cl-header-icon-btn.cl-icon-btn{ all:revert; } /* if ever combined, canonical wins */

/* ---- 18.4 Touch target minimum (44px) on coarse pointers ---- */
@media (pointer:coarse){
    .cl-icon-btn-sm{ width:40px; height:40px; }
    .cl-chip, .cl-prompt-chip{ min-height:40px; }
    .cl-header-icon-btn, .cl-icon-btn{ width:42px; height:42px; }
    .cl-quick-action{ min-height:44px; }
}

/* ---- 18.5 Icon alignment safety net (unset material icon inherits) ---- */
.cl-block-title .material-symbols-outlined,
.cl-context-card-title .material-symbols-outlined,
.cl-nba-icon .material-symbols-outlined,
.cl-empty-state-icon{
    line-height:1;
    vertical-align:middle;
}

/* ---- 18.6 Card/section rhythm normalization (final pass) ---- */
.cl-dash-section + .cl-dash-section{ margin-top:0; } /* spacing owned by margin-bottom only, prevents double-gap */
.cl-profile-card + .cl-profile-card{ margin-top:0; }

/* ---- 18.7 Empty-state semantic polish ---- */
.cl-empty-state, .cl-care-service-soon{ }
.cl-care-service-soon{ cursor:not-allowed; }

/* ---- 18.8 Print: normalize all report-like pages, not just result ---- */
@media print{
    .cl-quick-actions-grid, .cl-followup-banner, .cl-followup-card,
    .cl-drawer, .cl-drawer-overlay, .cl-toast-stack, .cl-skip-link,
    .cl-header-actions, .cl-nav-toggle{
        display:none !important;
    }
    a[href]::after{ content:""; } /* no raw URL leakage in printed reports */
    .cl-card-glass, .cl-status-card, .cl-nba-card, .cl-goal-card{
        box-shadow:none !important;
        border:1px solid #ddd !important;
        break-inside:avoid;
    }
}

/* ---- 18.9 Reduced motion: cover every animation introduced across phases ---- */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}
/* ============================================================
   NAVBAR OVERLAP FIX — replaces the absolute-centered mega-nav
   with a normal flex item that always has real, non-overlapping
   space from the logo to the profile/login buttons.
   ============================================================ */

.navbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:nowrap;
}

.navbar-inner > .logo,
.navbar-inner > .cl-header-actions,
.navbar-inner > .navbar-cta,
.navbar-inner > .cl-nav-toggle{
    flex:0 0 auto;
}

@media(min-width:961px){
    .cl-mega-nav{
        position:static !important;
        top:auto !important;
        left:auto !important;
        transform:none !important;
        flex:1 1 auto;
        min-width:0;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow-x:auto;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
    .cl-mega-nav::-webkit-scrollbar{ display:none; }

    /* shrink nav links a bit so more items fit before scrolling kicks in */
    .cl-nav-link,
    .cl-mega-trigger{
        padding:10px 12px;
        font-size:13.5px;
        white-space:nowrap;
    }
}

/* keep the old ≤1300px wrap fix but only as a fallback for very
   small desktop widths where even shrunk items don't fit */
@media(min-width:961px) and (max-width:1300px){
    .navbar-inner{ flex-wrap:nowrap; }
}
/* ============================================================
   NAVBAR OVERLAP FIX — replaces the absolute-centered mega-nav
   with a normal flex item that always has real, non-overlapping
   space between the logo and the profile/login buttons, on every
   desktop width (not just 961-1300px).
   ============================================================ */

.navbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:nowrap;
}

.navbar-inner > .logo,
.navbar-inner > .cl-header-actions,
.navbar-inner > .navbar-cta,
.navbar-inner > .cl-nav-toggle{
    flex:0 0 auto;
}

@media(min-width:961px){
    .cl-mega-nav{
        position:static !important;
        top:auto !important;
        left:auto !important;
        transform:none !important;
        flex:1 1 auto;
        min-width:0;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow-x:auto;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
    .cl-mega-nav::-webkit-scrollbar{ display:none; }

    .cl-nav-link,
    .cl-mega-trigger{
        padding:10px 12px;
        font-size:13.5px;
        white-space:nowrap;
    }
}

.cl-lang-switch-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-weight:800;
    font-size:11px;
}
/* ============================================================
   NAVBAR OVERLAP FIX v2 — the previous overflow-x:auto trick
   clipped the mega-nav dropdown panels (non-visible overflow-x
   also clips overflow-y). Replaced with wrapping instead of
   scrolling. Also compacts dashboard stat cards and adds the
   homepage corner date badge.
   ============================================================ */

@media(min-width:961px){
    .cl-mega-nav{
        overflow:visible !important;
        flex-wrap:wrap;
        row-gap:4px;
    }
}

.cl-mega-panel{
    z-index:150;
}

.cl-dash-hero{
    align-items:start;
}

.cl-dash-hero-stats{
    align-items:start;
}

.cl-dash-hero-stats .cl-card-stat{
    padding:var(--space-4);
}

.cl-section-hero{
    position:relative;
}

/* ============================================================
   HOME DATE BADGE — REPOSITION FIX
   جایگزین بلاک قدیمی ".cl-section-hero{position:relative;}" و
   ".cl-home-date-badge{...}" و مدیای کوئری مربوطه در انتهای
   style.css شود. حالا بج تاریخ داخل فلوی عادی صفحه (بالای عنوان
   هیرو، داخل .hero-text) رندر می‌شود، نه absolute روی گوشه‌ی
   صفحه؛ در نتیجه در هر دو حالت RTL (فارسی) و LTR (انگلیسی)
   هم‌راستا و طبیعی نمایش داده می‌شود.
   ============================================================ */

.cl-home-date-badge{
    position:static;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--glass-bg-strong);
    border:1px solid var(--color-border);
    padding:8px 16px;
    border-radius:var(--radius-full);
    font-size:12.5px;
    font-weight:700;
    color:var(--color-secondary);
    box-shadow:var(--shadow-sm);
    margin-bottom:18px;
}
.cl-home-date-badge .material-symbols-outlined{
    font-size:16px;
    color:var(--color-primary);
}

@media(max-width:960px){
    .cl-home-date-badge{
        margin:0 auto 16px;
    }
}
/* ============================================================
   ICON FONT FALLBACK — اگر Material Symbols از گوگل لود نشود،
   به‌جای نمایش متن خام آیکون‌ها (مثل "home"، "science")، آیکون‌ها
   مخفی می‌شوند تا حداقل چیدمان و دکمه‌ها سالم بمانند.
   ============================================================ */
html:not(.cl-icons-loaded):not(.cl-icons-unavailable) .material-symbols-outlined{
    opacity:.4;
}
html.cl-icons-unavailable .material-symbols-outlined{
    font-size:0 !important;
    display:inline-block;
    width:1em;
    height:1em;
}
html.cl-icons-unavailable .cl-icon-btn,
html.cl-icons-unavailable .cl-header-icon-btn{
    font-size:11px;
}
html.cl-icons-unavailable .cl-icon-btn::after,
html.cl-icons-unavailable .cl-header-icon-btn::after{
    content:"•";
    font-size:16px;
    line-height:1;
}

/* Font fallback: اگر Vazirmatn لود نشود، فونت سیستم جایگزین شود */
body{
    font-family:"Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}
/* ============================================================
   NAVBAR MOBILE ACTIONS FIX
   ============================================================ */
.cl-header-actions-mobile{
    display:none;
}

@media(max-width:960px){
    .navbar-inner > .cl-header-actions{
        display:none !important;
    }
    .cl-header-actions-mobile{
        display:flex !important;
        width:100%;
        justify-content:center;
        align-items:center;
        gap:14px;
        padding-top:14px;
        margin-top:10px;
        border-top:1px solid rgba(255,255,255,.4);
    }
}
/* ============================================================
   MOBILE FIXES — auth buttons in mobile menu, landscape layout,
   step-1 centering
   ============================================================ */

.cl-mobile-auth-actions{
    display:none;
}

@media(max-width:960px){
    .cl-mobile-auth-actions{
        display:flex;
        flex-direction:column;
        gap:10px;
        width:100%;
        padding-top:14px;
        margin-top:10px;
        border-top:1px solid rgba(255,255,255,.4);
    }
}

@media (max-width:960px) and (orientation:landscape) and (max-height:520px){
    .hero-grid{ grid-template-columns:1fr 1fr; }
    .hero-media{ order:0; min-height:220px; }
    .services-grid{ grid-template-columns:repeat(3,1fr); }
    .features-grid{ grid-template-columns:repeat(3,1fr); }
    .cl-grid-features, .cl-grid-3{ grid-template-columns:repeat(3,1fr); }
    .cl-grid-stats, .cl-grid-4{ grid-template-columns:repeat(4,1fr); }
    .footer-grid{ grid-template-columns:repeat(4,1fr); }
    .cl-steps{ flex-direction:row; }
    .cl-step-connector{ display:block; }
    .cl-ai-flow{ flex-direction:row; }
    .cl-ai-flow-connector{ width:40px; height:2px; }
}

.cl-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}
.cl-step-number{
    margin-left:auto;
    margin-right:auto;
}

/* ============================================================
   AUTH SPLIT PAGES — compact dark brand header on small phones
   ============================================================ */

@media(max-width:600px){
    .cl-auth-brand{
        padding:28px 20px 24px;
        min-height:0;
    }
    .cl-auth-robot{
        width:88px;
        margin-bottom:10px;
    }
    .cl-auth-brand-inner h2{
        font-size:18px;
        margin-bottom:8px;
    }
    .cl-auth-brand-inner p{
        font-size:13px;
        line-height:1.8;
    }
    .cl-auth-form-side{
        padding:32px 20px;
    }
    .cl-auth-box{
        padding:28px 20px;
    }
    .cl-auth-fields a.btn{
        height:52px !important;
        font-size:14.5px !important;
    }
}

/* ============================================================
   HERO TOP BADGES
   ============================================================ */

.cl-hero-top-badges{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.cl-hero-top-badges .cl-home-date-badge{
    margin:0;
}

.cl-hero-top-badges .cl-ai-badge{
    margin:0;
}

@media(max-width:960px){
    .cl-hero-top-badges{
        justify-content:center;
        margin-bottom:18px;
    }
}

/* ============================================================
   Hide the horizontal scrollbar on the mobile profile-tabs nav
   ============================================================ */

.cl-profile-tabs-nav{
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.cl-profile-tabs-nav::-webkit-scrollbar{
    display:none;
}

/* ============================================================
   HARD FIX v2 — eliminate remaining horizontal scroll sources
   ============================================================ */

html, body{
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative;
}

*, *::before, *::after{
    max-width: 100%;
}

.cl-ws-table-wrap, .analysis-content, .cl-modal-history-list,
table, pre, .cl-mega-nav{
    max-width: none;
}

img, svg, video{
    max-width: 100%;
    height: auto;
}

body{
    overscroll-behavior-x: none;
}

/* ============================================================
   ANALYSIS TRANSLATE BUTTON
   ============================================================ */

.cl-ai-summary-actions{
    display:flex;
    justify-content:flex-end;
    margin-bottom:16px;
}