/* =========================================================
   RESET & PREMIUM FOUNDATION
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
    font-family:'Inter','Segoe UI',sans-serif;
    font-size:13px; font-weight:450;
    color:var(--text); background:var(--bg);
    line-height:1.5; min-height:100vh;
    font-feature-settings:'cv02','cv03','cv04','cv11';
    letter-spacing:-.005em;
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:inherit}
input,select,textarea{font-family:inherit;color:inherit}
.tabular{ font-variant-numeric:tabular-nums; }
.mono{ font-family:'JetBrains Mono', monospace; font-feature-settings:'tnum'; }

/* =========================================================
   PREMIUM TOKENS — refined cream + forest + deep gold
   ========================================================= */
:root{
    /* Surfaces — warm neutral foundation */
    --bg:           #F6F7F2;
    --bg-2:         #F0F2EC;
    --surface:      #FFFFFF;
    --surface-2:    #FBFCF8;

    /* Brand — refined for international elegance */
    --navy:         #0B1F12;
    --navy-2:       #14301F;
    --green-1:      #2A5F47;
    --green-2:      #3E8665;
    --green-3:      #5DA982;
    --green-soft:   #E6F0EA;
    --gold:         #A8801C;
    --gold-2:       #C49A2E;
    --gold-3:       #E1C173;
    --gold-soft:    #F7EFD7;

    /* Text */
    --text:         #0E1A12;
    --text-2:       #3F5147;
    --text-3:       #748678;
    --text-mute:    #95A398;

    /* Borders — extremely subtle */
    --border:       #E5E9E1;
    --border-soft:  #EFF2EB;
    --border-strong:#D7DDD2;

    /* Status */
    --up:           #15803D;
    --up-bg:        #EBF5EE;
    --down:         #B91C1C;
    --down-bg:      #FBEBEB;
    --warn:         #B45309;
    --warn-bg:      #FAF1E0;
    --info:         #1D4ED8;
    --info-bg:      #E8EEFB;

    /* Spacing scale — 4px grid */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
    --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;

    /* Type scale */
    --fs-xs:10.5px;
    --fs-sm:11.5px;
    --fs-base:12.5px;
    --fs-md:13.5px;
    --fs-lg:15px;
    --fs-xl:17px;
    --fs-2xl:22px;
    --fs-3xl:28px;

    /* Radius */
    --r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px;

    /* Shadows — refined, paper-like */
    --sh-1: 0 1px 2px rgba(13,40,24,.035), 0 0 0 1px rgba(229,233,225,.5);
    --sh-2: 0 1px 3px rgba(13,40,24,.05), 0 1px 2px rgba(13,40,24,.03), 0 0 0 1px rgba(229,233,225,.5);
    --sh-3: 0 4px 12px -3px rgba(13,40,24,.07), 0 2px 4px -1px rgba(13,40,24,.04), 0 0 0 1px rgba(229,233,225,.5);
    --sh-4: 0 12px 28px -10px rgba(13,40,24,.10), 0 4px 8px -2px rgba(13,40,24,.04), 0 0 0 1px rgba(229,233,225,.5);
    --sh-glow: 0 0 0 3px rgba(62,134,101,.10);
    --sh-glow-gold: 0 0 0 3px rgba(196,154,46,.12);

    /* Motion */
    --ease: cubic-bezier(.4,0,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.4,.64,1);
    --t-1: .15s; --t-2: .25s; --t-3: .4s; --t-4: .65s;

    /* Layout */
    --sb-w: 224px;
    --sb-collapsed: 64px;
    --tb-h: 56px;
    --tk-h: 30px;

    --color-scheme: light;
}

/* ============ DARK THEME ============ */
[data-theme="dark"]{
    --bg:           #0A130D;
    --bg-2:         #111C16;
    --surface:      #14211B;
    --surface-2:    #182921;

    --navy:         #051410;
    --navy-2:       #0A1F18;
    --green-1:      #4FA37C;
    --green-2:      #5DB58A;
    --green-3:      #7BC8A1;
    --green-soft:   #1F352A;
    --gold:         #D4A437;
    --gold-2:       #E1B748;
    --gold-3:       #F0CB66;
    --gold-soft:    #2D2417;

    --text:         #ECF2EE;
    --text-2:       #B6C3BC;
    --text-3:       #7E8E85;
    --text-mute:    #5E6E66;

    --border:       #213328;
    --border-soft:  #1A2922;
    --border-strong:#2C4035;

    --up:           #4ADE80;
    --up-bg:        #16291D;
    --down:         #F87171;
    --down-bg:      #2A1818;
    --warn:         #FCD34D;
    --warn-bg:      #2B2410;
    --info:         #60A5FA;
    --info-bg:      #142235;

    --sh-1: 0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(33,51,40,.5);
    --sh-2: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2), 0 0 0 1px rgba(33,51,40,.5);
    --sh-3: 0 4px 12px -3px rgba(0,0,0,.45), 0 2px 4px -1px rgba(0,0,0,.25), 0 0 0 1px rgba(33,51,40,.5);
    --sh-4: 0 12px 28px -10px rgba(0,0,0,.5), 0 4px 8px -2px rgba(0,0,0,.3), 0 0 0 1px rgba(33,51,40,.5);
    --sh-glow: 0 0 0 3px rgba(93,181,138,.18);
    --sh-glow-gold: 0 0 0 3px rgba(225,183,72,.2);

    --color-scheme: dark;
}

html{ color-scheme: var(--color-scheme); }

/* Theme transition smoothing on common surfaces */
body, .sb, .tb, .panel, .kpi, .hero, .map-stage, .ticker,
.rfq-card, .tx thead th, .tb-search, .panel-tabs, .panel-tab,
.tb-chip, .tb-icon, .tb-profile, .sb-item, .menu-btn,
.map-stat, .map-legend, .map-label-bg, .sb-toggle, .dd-menu,
.toast, .settings-drawer, .cmd-palette, .preloader{
    transition: background-color .35s var(--ease), color .35s var(--ease),
    border-color .35s var(--ease), box-shadow .25s var(--ease);
}

/* Dark theme map adjustments */
[data-theme="dark"] .map-stage{
    background: linear-gradient(180deg, #0E1A14 0%, #0A130D 100%);
}
[data-theme="dark"] .map-land{ fill: rgba(93,181,138,.08); stroke: rgba(93,181,138,.18); }
[data-theme="dark"] .map-label{ fill: var(--text); }
[data-theme="dark"] .map-label-bg{ fill: rgba(20,33,27,.92); stroke: var(--border); }
[data-theme="dark"] .chart-axis text{ fill: var(--text-3); }
[data-theme="dark"] .chart-grid line{ stroke: var(--border-soft); }
[data-theme="dark"] .chart-area-fill{ fill: url(#cGradDark); }
[data-theme="dark"] .tx-img{ background: linear-gradient(135deg, var(--green-1), var(--green-2)); color: var(--navy); }
[data-theme="dark"] .tx-img.b{ background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--navy); }
[data-theme="dark"] .tx-img.c{ background: linear-gradient(135deg, var(--surface-2), var(--green-1)); color: var(--gold-3); }
[data-theme="dark"] .sb-item.active{ background: linear-gradient(135deg, var(--green-1), var(--green-2)); color: var(--navy); }
[data-theme="dark"] .sb-item.active .ico{ color: var(--navy); }
[data-theme="dark"] .sb-item.active .badge{ background: rgba(5,20,16,.3); color: var(--navy); }
[data-theme="dark"] .ticker-label{ background: var(--gold-2); color: var(--navy); }
[data-theme="dark"] .ticker{ background: #060F0A; }
[data-theme="dark"] .rfq-btn{ background: var(--green-1); color: var(--navy); }
[data-theme="dark"] .rfq-btn:hover{ background: var(--green-2); }
[data-theme="dark"] .sb-pro{ background: linear-gradient(135deg, #061712, var(--green-soft)); }
[data-theme="dark"] .sb-pro-btn{ background: var(--gold-2); color: var(--navy); }
[data-theme="dark"] .tb{ background: rgba(20,33,27,.85); }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--green-2); }

/* Utility */
.fade-in{ opacity:0; transform:translateY(8px); animation:fadeIn .55s var(--ease-out) forwards; }
@keyframes fadeIn{ to{ opacity:1; transform:none; } }
.d1{ animation-delay:.04s } .d2{ animation-delay:.08s } .d3{ animation-delay:.12s }
.d4{ animation-delay:.16s } .d5{ animation-delay:.20s } .d6{ animation-delay:.24s }
.d7{ animation-delay:.28s } .d8{ animation-delay:.32s } .d9{ animation-delay:.36s }
.d10{ animation-delay:.40s }

/* =========================================================
   APP SHELL
   ========================================================= */
.app{
    display:grid;
    grid-template-columns:var(--sb-w) 1fr;
    min-height:100vh;
    transition:grid-template-columns var(--t-3) var(--ease-out);
}
.app.collapsed{ grid-template-columns:var(--sb-collapsed) 1fr; }

/* =========================================================
   SIDEBAR — compact premium
   ========================================================= */
.sb{
    position:sticky; top:0; height:100vh;
    background:var(--surface);
    border-right:1px solid var(--border-soft);
    display:flex; flex-direction:column;
    padding:14px 10px;
    z-index:50;
    /* Scroll the nav when it overflows the viewport; keep X hidden so the
       collapse/label animation still clips horizontally. */
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--border-soft) transparent;
}
.sb::-webkit-scrollbar{ width:6px; }
.sb::-webkit-scrollbar-thumb{ background:var(--border-soft); border-radius:3px; }
.sb::-webkit-scrollbar-track{ background:transparent; }

.sb-brand{
    display:flex; align-items:center; gap:9px;
    padding:4px 6px 14px; margin-bottom:8px;
    border-bottom:1px solid var(--border-soft);
    position:relative; min-width:0;
}
.brand-mark{
    width:30px; height:30px; flex-shrink:0; border-radius:7px;
    background:linear-gradient(135deg, var(--navy) 0%, var(--green-1) 100%);
    display:grid; place-items:center; color:#fff;
    font-family:'Sora',sans-serif; font-weight:800; font-size:12.5px;
    letter-spacing:-.5px;
    position:relative; overflow:hidden;
}
.brand-mark::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
    background:linear-gradient(90deg, var(--gold-2), var(--gold-3));
}
.sb-brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; transition:opacity var(--t-2); }
.sb-brand-text strong{ font-family:'Sora',sans-serif; font-weight:800; font-size:13.5px; color:var(--text); letter-spacing:-.4px; }
.sb-brand-text em{ font-style:normal; font-size:9px; font-weight:700; color:var(--gold); letter-spacing:1.5px; text-transform:uppercase; margin-top:1px; }
.collapsed .sb-brand-text{ opacity:0; pointer-events:none; width:0; overflow:hidden; }

.sb-toggle{
    position:absolute; right:-12px; top:18px;
    width:22px; height:22px; border-radius:50%;
    background:var(--surface); color:var(--text-3);
    display:grid; place-items:center; font-size:9px;
    box-shadow:var(--sh-2); border:1px solid var(--border);
    transition:color var(--t-2), transform var(--t-3) var(--ease-spring);
    z-index:10;
}
.sb-toggle:hover{ color:var(--green-2); }
.collapsed .sb-toggle i{ transform:rotate(180deg); }
.sb-toggle i{ transition:transform var(--t-3) var(--ease-spring); }

.sb-section{ margin-top:6px; }
.sb-label{
    font-size:9.5px; font-weight:700; color:var(--text-mute);
    letter-spacing:1.4px; text-transform:uppercase;
    padding:10px 8px 4px; transition:opacity var(--t-2);
}
.collapsed .sb-label{ opacity:0; height:0; padding:4px 0; overflow:hidden; }

.sb-nav{ display:flex; flex-direction:column; gap:1px; }
.sb-item{
    display:flex; align-items:center; gap:10px;
    padding:7px 8px; border-radius:var(--r-2);
    color:var(--text-2); font-weight:550; font-size:12.5px;
    position:relative; cursor:pointer;
    white-space:nowrap;
    transition:color var(--t-2), background var(--t-2);
}
.sb-item .ico{
    width:16px; flex-shrink:0; font-size:13px; color:var(--text-3);
    text-align:center;
    transition:color var(--t-2), transform var(--t-2);
}
.sb-item .lbl{ flex:1; transition:opacity var(--t-2); min-width:0; }
/* Whole-row hit target: stretch the leaf <a> to fill the item's padding box
   so a click anywhere on the row navigates — not just on the text. */
.sb-item > .sb-item-link{
    display:flex; align-items:center; gap:10px;
    flex:1 1 auto; min-width:0;
    margin:-7px -8px; padding:7px 8px;
    color:inherit; text-decoration:none; border-radius:inherit;
}
.collapsed .sb-item .lbl{ opacity:0; pointer-events:none; }
.collapsed .sb-item .badge{ display:none; }
.sb-item .badge{
    background:var(--green-soft); color:var(--green-1);
    font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums;
    padding:1px 6px; border-radius:20px;
    min-width:18px; text-align:center;
}
.sb-item:hover{ background:var(--bg-2); color:var(--text); }
.sb-item:hover .ico{ color:var(--green-2); }

.sb-item.active{ background:var(--navy); color:#fff; }
.sb-item.active .ico{ color:var(--gold-3); }
.sb-item.active .badge{ background:var(--gold-soft); color:var(--gold); }
.sb-item.active::before{
    content:''; position:absolute; left:-10px; top:8px; bottom:8px;
    width:2px; border-radius:0 2px 2px 0;
    background:var(--gold-2);
}
.collapsed .sb-item.active::before{ display:none; }

.sb-pro{
    margin-top:auto; padding:12px;
    border-radius:var(--r-3);
    background:linear-gradient(135deg, var(--navy) 0%, var(--green-1) 100%);
    color:#fff; position:relative; overflow:hidden;
}
.sb-pro::before{
    content:''; position:absolute; top:-30px; right:-30px;
    width:90px; height:90px; border-radius:50%;
    background:radial-gradient(circle, var(--gold-3), transparent 70%);
    opacity:.4;
}
.sb-pro-label{ font-size:9px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold-3); margin-bottom:6px; position:relative; }
.sb-pro-title{ font-family:'Sora',sans-serif; font-size:13px; font-weight:700; line-height:1.3; margin-bottom:10px; position:relative; }
.sb-pro-btn{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700;
    padding:6px 12px; border-radius:5px;
    background:var(--gold-2); color:var(--navy);
    position:relative;
    transition:transform var(--t-2), background var(--t-2);
}
.sb-pro-btn:hover{ transform:translateX(2px); background:var(--gold-3); }
.collapsed .sb-pro{ display:none; }

/* Sidebar user (collapsed view only) */
.sb-user-collapsed{
    display:none; margin-top:auto; padding:8px 0;
    justify-content:center;
}
.collapsed .sb-user-collapsed{ display:flex; }
.sb-avatar-xs{
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--green-2), var(--gold-2));
    display:grid; place-items:center;
    color:#fff; font-weight:700; font-size:12px; font-family:'Sora',sans-serif;
    position:relative;
}
.sb-avatar-xs::after{
    content:''; position:absolute; bottom:0; right:0;
    width:9px; height:9px; border-radius:50%;
    background:var(--up); border:2px solid var(--surface);
}

.sb-backdrop{
    display:none; position:fixed; inset:0; z-index:49;
    background:rgba(11,31,18,.4); backdrop-filter:blur(2px);
    opacity:0; transition:opacity var(--t-3);
}
.sb-backdrop.show{ opacity:1; }

/* =========================================================
   MAIN AREA
   ========================================================= */
.main{ display:flex; flex-direction:column; min-width:0; }

/* =========================================================
   TOPBAR — slim premium
   ========================================================= */
.tb{
    position:sticky; top:0; z-index:40;
    height:var(--tb-h);
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border-bottom:1px solid var(--border-soft);
    display:flex; align-items:center; gap:12px;
    padding:0 20px;
}

.menu-btn{
    display:none; width:34px; height:34px; border-radius:var(--r-2);
    align-items:center; justify-content:center;
    font-size:14px; color:var(--text-2);
    transition:background var(--t-2);
}
.menu-btn:hover{ background:var(--bg-2); color:var(--text); }

/* Page title */
.tb-title{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.tb-title strong{
    font-family:'Sora',sans-serif; font-size:14px; font-weight:700; color:var(--text); letter-spacing:-.3px;
}
.tb-title .crumb{
    font-size:11px; color:var(--text-3); font-weight:500;
    display:flex; align-items:center; gap:4px;
}
.tb-title .crumb i{ font-size:7px; color:var(--text-mute); }

/* Search */
.tb-search{
    flex:1; max-width:380px; height:34px;
    display:flex; align-items:center; gap:8px;
    padding:0 12px; border-radius:var(--r-2);
    background:var(--bg-2);
    border:1px solid transparent;
    transition:all var(--t-2);
    margin-left:auto;
}
.tb-search:focus-within{
    border-color:var(--green-2); background:var(--surface);
    box-shadow:var(--sh-glow);
}
.tb-search i{ color:var(--text-3); font-size:12px; }
.tb-search input{
    flex:1; border:none; outline:none; background:transparent;
    font-size:12.5px; color:var(--text); font-weight:500;
}
.tb-search input::placeholder{ color:var(--text-mute); }
.tb-search .kbd{
    font-family:'JetBrains Mono', monospace;
    font-size:9.5px; font-weight:600; color:var(--text-3);
    border:1px solid var(--border); padding:2px 5px; border-radius:3px;
    background:var(--surface);
}

/* Topbar actions */
.tb-actions{ display:flex; align-items:center; gap:4px; }
.tb-divider{ width:1px; height:22px; background:var(--border); margin:0 4px; }

.tb-chip{
    display:flex; align-items:center; gap:6px;
    height:34px; padding:0 10px; border-radius:var(--r-2);
    background:transparent; color:var(--text-2);
    font-size:11.5px; font-weight:600;
    transition:background var(--t-2), color var(--t-2);
}
.tb-chip:hover{ background:var(--bg-2); color:var(--text); }
.tb-chip i{ font-size:11px; color:var(--text-3); }
.tb-chip:hover i{ color:var(--green-2); }
.tb-chip .flag{
    width:16px; height:11px; border-radius:1.5px; flex-shrink:0;
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

.tb-icon{
    width:34px; height:34px; border-radius:var(--r-2);
    display:grid; place-items:center;
    color:var(--text-2); font-size:13px; position:relative;
    transition:background var(--t-2), color var(--t-2);
}
.tb-icon:hover{ background:var(--bg-2); color:var(--text); }
.tb-icon .dot{
    position:absolute; top:8px; right:9px;
    width:7px; height:7px; border-radius:50%;
    background:var(--gold-2); border:1.5px solid var(--surface);
}
.tb-icon .dot.live{ animation:livePulse 2s var(--ease) infinite; }
@keyframes livePulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(196,154,46,.5); }
    50%{ box-shadow:0 0 0 5px rgba(196,154,46,0); }
}

/* Profile chip */
.tb-profile{
    display:flex; align-items:center; gap:8px;
    padding:3px 10px 3px 3px; border-radius:32px;
    background:var(--bg-2); cursor:pointer;
    transition:background var(--t-2), box-shadow var(--t-2);
}
.tb-profile:hover{ background:var(--surface); box-shadow:var(--sh-2); }
.tb-profile .av{
    width:28px; height:28px; border-radius:50%;
    background:linear-gradient(135deg, var(--green-2), var(--gold-2));
    display:grid; place-items:center; color:#fff;
    font-weight:700; font-size:11px; font-family:'Sora',sans-serif;
}
.tb-profile-info{ display:flex; flex-direction:column; line-height:1.15; }
.tb-profile-info strong{ font-size:11.5px; font-weight:700; color:var(--text); font-family:'Sora',sans-serif; letter-spacing:-.2px; }
.tb-profile-info span{ font-size:9.5px; color:var(--text-3); font-weight:600; }
.tb-profile i{ font-size:9px; color:var(--text-3); }

/* =========================================================
   MARKET TICKER — Bloomberg-style strip
   ========================================================= */
.ticker{
    height:var(--tk-h);
    background:var(--navy);
    display:flex; align-items:center;
    overflow:hidden; position:relative;
    border-bottom:1px solid var(--navy-2);
}
.ticker-label{
    flex-shrink:0; padding:0 14px;
    height:100%; display:flex; align-items:center; gap:6px;
    background:var(--gold-2); color:var(--navy);
    font-size:9.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
}
.ticker-label i{ font-size:8px; animation:tick 1.4s var(--ease) infinite; }
@keyframes tick{ 0%,100%{opacity:.4} 50%{opacity:1} }

.ticker-track{
    flex:1; overflow:hidden; position:relative; height:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    mask-image:linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.ticker-strip{
    display:flex; gap:32px; padding:0 16px;
    height:100%; align-items:center;
    width:max-content;
    animation:tickerScroll 60s linear infinite;
}
.ticker-strip:hover{ animation-play-state:paused; }
@keyframes tickerScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}
.tkr{
    display:flex; align-items:center; gap:8px;
    font-size:11px; font-weight:600; color:rgba(255,255,255,.85);
    white-space:nowrap;
}
.tkr-sym{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; font-weight:700; color:var(--gold-3);
    letter-spacing:.5px;
}
.tkr-val{ font-family:'JetBrains Mono', monospace; color:#fff; font-weight:600; }
.tkr-chg{ font-size:10px; font-weight:700; display:flex; align-items:center; gap:3px; }
.tkr-chg.up{ color:#86EFAC; }
.tkr-chg.dn{ color:#FCA5A5; }
.tkr-chg i{ font-size:7px; }
.tkr-sep{ color:rgba(255,255,255,.15); font-weight:300; }

/* =========================================================
   CONTENT
   ========================================================= */
.content{
    padding:18px 20px 24px;
    display:flex; flex-direction:column; gap:14px;
}

/* =========================================================
   HERO STRIP — compact greeting + global pulse
   ========================================================= */
.hero{
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px; align-items:center;
    padding:14px 20px;
    background:var(--surface);
    border-radius:var(--r-3);
    box-shadow:var(--sh-1);
    position:relative; overflow:hidden;
}
.hero::before{
    content:''; position:absolute; right:-60px; top:-80px;
    width:280px; height:280px; border-radius:50%;
    background:radial-gradient(circle, rgba(196,154,46,.07), transparent 65%);
    pointer-events:none;
}
.hero-greet{ display:flex; flex-direction:column; gap:2px; }
.hero-greet .row1{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hero-greet h1{
    font-family:'Sora',sans-serif;
    font-size:18px; font-weight:700; color:var(--text);
    letter-spacing:-.4px; line-height:1.2;
}
.hero-greet h1 em{ font-style:normal; color:var(--green-2); }
.hero-pill{
    display:inline-flex; align-items:center; gap:5px;
    padding:2px 8px; border-radius:20px;
    background:var(--up-bg); color:var(--up);
    font-size:10.5px; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.hero-pill i{ font-size:8px; }
.hero-greet p{
    font-size:12px; color:var(--text-3); font-weight:500;
}
.hero-greet p strong{ color:var(--text-2); font-weight:700; }

.hero-meta{
    display:flex; align-items:center; gap:14px;
    position:relative;
}
.hero-clock{
    display:flex; flex-direction:column; line-height:1.2;
    padding:0 14px; border-left:1px solid var(--border);
}
.hero-clock:first-child{ border-left:none; padding-left:0; }
.hero-clock-label{
    font-size:9px; font-weight:700; color:var(--text-mute);
    letter-spacing:1.4px; text-transform:uppercase;
}
.hero-clock-time{
    font-family:'JetBrains Mono', monospace;
    font-size:13.5px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums;
    margin-top:2px;
}
.hero-clock-flag{ font-size:11px; }

/* =========================================================
   KPI STRIP — 6 dense premium cards
   ========================================================= */
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:10px;
}

.kpi{
    position:relative;
    padding:14px;
    background:var(--surface);
    border-radius:var(--r-3);
    box-shadow:var(--sh-1);
    overflow:hidden;
    transition:box-shadow var(--t-2), transform var(--t-2);
    cursor:pointer;
}
.kpi::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--green-2); opacity:0;
    transition:opacity var(--t-2);
}
.kpi.gold::before{ background:var(--gold-2); }
.kpi:hover{
    box-shadow:var(--sh-3);
    transform:translateY(-2px);
}
.kpi:hover::before{ opacity:1; }

.kpi-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin-bottom:6px;
}
.kpi-label{
    font-size:9.5px; font-weight:700; color:var(--text-3);
    letter-spacing:1.2px; text-transform:uppercase;
}
.kpi-icon{
    width:22px; height:22px; border-radius:5px;
    display:grid; place-items:center;
    font-size:10px;
    background:var(--green-soft); color:var(--green-1);
}
.kpi.gold .kpi-icon{ background:var(--gold-soft); color:var(--gold); }

.kpi-value{
    font-family:'Sora',sans-serif;
    font-size:22px; font-weight:700; color:var(--text);
    letter-spacing:-.8px; line-height:1.1;
    font-variant-numeric:tabular-nums;
}
.kpi-value .pre{ font-size:13px; color:var(--text-3); font-weight:600; margin-right:1px; }
.kpi-value .unit{ font-size:11px; color:var(--text-3); font-weight:600; margin-left:3px; }

.kpi-foot{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin-top:6px;
}
.kpi-trend{
    display:inline-flex; align-items:center; gap:3px;
    font-size:10.5px; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.kpi-trend.up{ color:var(--up); }
.kpi-trend.dn{ color:var(--down); }
.kpi-trend i{ font-size:8px; }

.kpi-spark{
    flex:1; max-width:64px; height:18px; opacity:.85;
}
.kpi-spark svg{ width:100%; height:100%; }
.kpi-spark path{
    fill:none; stroke:var(--green-2); stroke-width:1.5;
    stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:200; stroke-dashoffset:200;
    animation:drawSpark 1.4s var(--ease-out) forwards;
    animation-delay:.4s;
}
.kpi.gold .kpi-spark path{ stroke:var(--gold-2); }
@keyframes drawSpark{ to{ stroke-dashoffset:0; } }

/* =========================================================
   PANEL — generic premium card
   ========================================================= */
.panel{
    background:var(--surface);
    border-radius:var(--r-3);
    box-shadow:var(--sh-1);
    padding:16px 18px;
    transition:box-shadow var(--t-2);
}
.panel:hover{ box-shadow:var(--sh-2); }
.panel.flush{ padding:0; overflow:hidden; }
.panel-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:0 0 12px;
    border-bottom:1px solid var(--border-soft);
    margin-bottom:14px;
    flex-wrap:wrap;
}
.panel.flush .panel-head{ padding:14px 18px; margin-bottom:0; }

.panel-title-wrap{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.panel-title{
    font-size:13.5px; font-weight:700;
    color:var(--text); letter-spacing:-.3px;
    display:flex; align-items:center; gap:7px;
}
.panel-title .live-dot{
    width:6px; height:6px; border-radius:50%; background:var(--up);
    box-shadow:0 0 0 0 rgba(21,128,61,.6);
    animation:livePulse2 2s var(--ease) infinite;
}
@keyframes livePulse2{
    0%,100%{ box-shadow:0 0 0 0 rgba(21,128,61,.6); }
    50%{ box-shadow:0 0 0 4px rgba(21,128,61,0); }
}
.panel-sub{ font-size:11px; color:var(--text-3); font-weight:500; }

.panel-tabs{
    display:flex; padding:2px; gap:2px;
    background:var(--bg-2); border-radius:var(--r-2);
}
.panel-tab{
    padding:4px 10px; border-radius:5px;
    font-size:10.5px; font-weight:700;
    color:var(--text-3); letter-spacing:.3px;
    transition:all var(--t-2);
}
.panel-tab.active{
    background:var(--surface); color:var(--text);
    box-shadow:var(--sh-1);
}
.panel-tab:hover:not(.active){ color:var(--text-2); }

.panel-link{
    font-size:11px; font-weight:700; color:var(--green-1);
    display:inline-flex; align-items:center; gap:4px;
    transition:gap var(--t-2);
}
.panel-link:hover{ gap:7px; color:var(--green-2); }

/* =========================================================
   MAIN GRID
   ========================================================= */
.grid-main{
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr);
    gap:14px;
}

/* Analytics chart */
.chart-summary{
    display:flex; align-items:flex-end; gap:24px;
    padding:0 0 14px; flex-wrap:wrap;
}
.cs-block{ display:flex; flex-direction:column; gap:2px; }
.cs-label{
    font-size:10px; font-weight:700; color:var(--text-3);
    letter-spacing:1.2px; text-transform:uppercase;
}
.cs-val{
    font-family:'Sora',sans-serif;
    font-size:24px; font-weight:700; color:var(--text);
    letter-spacing:-.8px; line-height:1;
    font-variant-numeric:tabular-nums;
    display:flex; align-items:baseline; gap:8px;
}
.cs-val .pre{ font-size:14px; color:var(--text-3); font-weight:600; }
.cs-val .ch{
    font-size:11.5px; font-weight:700;
    font-variant-numeric:tabular-nums;
}
.cs-val .ch.up{ color:var(--up); }
.cs-val .ch.dn{ color:var(--down); }
.cs-comp{ font-size:11px; color:var(--text-3); font-weight:500; }

.chart-wrap{ height:240px; position:relative; }
.chart-wrap svg{ width:100%; height:100%; overflow:visible; }
.chart-grid line{ stroke:var(--border-soft); stroke-dasharray:2 4; }
.chart-axis text{ fill:var(--text-3); font-size:9.5px; font-family:'JetBrains Mono', monospace; font-weight:600; }
.chart-area-fill{ fill:url(#cGrad); }
.chart-line-1{
    fill:none; stroke:var(--green-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:1500; stroke-dashoffset:1500;
    animation:drawLn 1.6s var(--ease-out) forwards .3s;
}
.chart-line-2{
    fill:none; stroke:var(--gold-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:1500; stroke-dashoffset:1500;
    animation:drawLn 1.8s var(--ease-out) forwards .5s;
    stroke-dasharray:4 4;
}
@keyframes drawLn{ to{ stroke-dashoffset:0; } }
.chart-dot{ r:3; fill:var(--surface); stroke:var(--green-2); stroke-width:1.6; opacity:0; animation:popIn .4s var(--ease-spring) forwards; }
@keyframes popIn{ to{ opacity:1 } }

.chart-cursor{
    position:absolute; top:0; bottom:24px;
    width:1px; background:var(--text-3); opacity:0;
    pointer-events:none; transition:opacity var(--t-1);
}
.chart-tip{
    position:absolute; padding:6px 10px; border-radius:5px;
    background:var(--navy); color:#fff;
    font-size:10.5px; font-weight:600;
    font-family:'JetBrains Mono', monospace;
    font-variant-numeric:tabular-nums;
    pointer-events:none; opacity:0;
    transform:translate(-50%, -130%);
    transition:opacity var(--t-1);
    box-shadow:var(--sh-3);
    white-space:nowrap;
}
.chart-tip::after{
    content:''; position:absolute; bottom:-3px; left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:6px; height:6px; background:var(--navy);
}

.chart-legend{
    display:flex; gap:18px; padding-top:10px; margin-top:10px;
    border-top:1px solid var(--border-soft);
    flex-wrap:wrap;
}
.lg-item{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:600; color:var(--text-2);
}
.lg-item .sw{ width:8px; height:8px; border-radius:2px; }

/* =========================================================
   REGIONAL FLOW — donut + region list
   ========================================================= */
.flow{ display:flex; flex-direction:column; gap:14px; }
.flow-donut{
    position:relative;
    width:140px; height:140px;
    margin:0 auto;
}
.flow-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.flow-donut circle{ fill:none; stroke-width:14; }
.flow-donut .track{ stroke:var(--bg-2); }
.flow-donut .seg{
    stroke-linecap:butt;
    transition:opacity var(--t-2), stroke-width var(--t-2);
}
.flow-center{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; pointer-events:none;
}
.flow-center .num{
    font-family:'Sora',sans-serif; font-size:22px; font-weight:700;
    color:var(--text); letter-spacing:-.8px; line-height:1;
    font-variant-numeric:tabular-nums;
}
.flow-center .lbl{
    font-size:9px; font-weight:700; color:var(--text-3);
    letter-spacing:1.4px; text-transform:uppercase; margin-top:2px;
}

.flow-list{ display:flex; flex-direction:column; gap:6px; }
.fl-row{
    display:grid; grid-template-columns:18px 1fr auto auto;
    align-items:center; gap:10px;
    padding:6px 8px; border-radius:var(--r-2);
    cursor:pointer;
    transition:background var(--t-2);
}
.fl-row:hover{ background:var(--bg-2); }
.fl-flag{ width:18px; height:13px; border-radius:1.5px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.fl-name{ font-size:12px; font-weight:600; color:var(--text-2); }
.fl-bar{
    width:60px; height:4px; border-radius:2px;
    background:var(--bg-2); overflow:hidden;
}
.fl-bar-fill{
    height:100%; background:var(--green-2);
    border-radius:2px; transform-origin:left;
    transform:scaleX(0);
    animation:fillBar 1.2s var(--ease-out) forwards;
}
.fl-row.gold .fl-bar-fill{ background:var(--gold-2); }
@keyframes fillBar{ to{ transform:scaleX(1); } }
.fl-pct{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums;
    min-width:36px; text-align:right;
}

/* =========================================================
   WORLD MAP — trade routes
   ========================================================= */
.map-row{
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
    gap:14px;
}

.map-panel{
    position:relative; overflow:hidden;
}
.map-stage{
    position:relative;
    height:280px;
    border-radius:var(--r-3);
    background:linear-gradient(180deg, #FAFBF7 0%, #F0F4ED 100%);
    border:1px solid var(--border-soft);
    overflow:hidden;
}
.map-stage svg{ width:100%; height:100%; display:block; }
.map-land{ fill:var(--green-soft); stroke:var(--border-strong); stroke-width:.5; }
.map-route{
    fill:none; stroke:var(--green-2); stroke-width:1.4;
    stroke-linecap:round; stroke-dasharray:6 5;
    animation:dashFlow 8s linear infinite;
    filter:drop-shadow(0 1px 4px rgba(62,134,101,.4));
}
.map-route.gold{ stroke:var(--gold-2); filter:drop-shadow(0 1px 4px rgba(196,154,46,.4)); }
@keyframes dashFlow{ to{ stroke-dashoffset:-100; } }

.map-node{
    fill:var(--surface); stroke:var(--green-1); stroke-width:1.8;
    cursor:pointer;
}
.map-node-pulse{
    fill:var(--green-2); opacity:.4;
    transform-origin:center;
    animation:nodePulse 2.4s var(--ease) infinite;
}
.map-node-pulse.gold{ fill:var(--gold-2); }
@keyframes nodePulse{
    0%   { r:4; opacity:.6; }
    100% { r:18; opacity:0; }
}
.map-label{
    font-family:'Inter',sans-serif; font-size:10px; font-weight:700;
    fill:var(--navy); pointer-events:none;
}
.map-label-bg{
    fill:rgba(255,255,255,.9); stroke:var(--border); stroke-width:.6;
}

.map-legend{
    position:absolute; left:14px; bottom:14px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    border:1px solid var(--border);
    border-radius:var(--r-2);
    padding:8px 10px;
    display:flex; flex-direction:column; gap:5px;
    box-shadow:var(--sh-1);
}
.map-legend-item{
    display:flex; align-items:center; gap:6px;
    font-size:10px; font-weight:600; color:var(--text-2);
}
.map-legend-item .sw{ width:14px; height:2px; border-radius:1px; }

.map-stat-strip{
    position:absolute; right:14px; top:14px;
    display:flex; flex-direction:column; gap:6px;
}
.map-stat{
    background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
    border:1px solid var(--border); border-radius:var(--r-2);
    padding:7px 10px; min-width:120px;
    box-shadow:var(--sh-1);
}
.map-stat-label{
    font-size:9px; font-weight:700; color:var(--text-3);
    letter-spacing:1.2px; text-transform:uppercase;
}
.map-stat-val{
    font-family:'Sora',sans-serif; font-size:14px; font-weight:700;
    color:var(--text); letter-spacing:-.3px;
    font-variant-numeric:tabular-nums; margin-top:1px;
}
.map-stat-val .ch{ font-size:10px; font-weight:700; }
.map-stat-val .ch.up{ color:var(--up); }

/* =========================================================
   ACTIVITY FEED (compact)
   ========================================================= */
.feed{ display:flex; flex-direction:column; }
.feed-item{
    display:flex; gap:10px; padding:10px 0;
    border-bottom:1px dashed var(--border-soft);
    position:relative;
}
.feed-item:last-child{ border-bottom:none; padding-bottom:0; }
.feed-icon{
    width:28px; height:28px; flex-shrink:0; border-radius:50%;
    display:grid; place-items:center; font-size:10.5px;
    background:var(--green-soft); color:var(--green-1);
}
.feed-icon.gold{ background:var(--gold-soft); color:var(--gold); }
.feed-icon.dn{ background:var(--down-bg); color:var(--down); }
.feed-icon.info{ background:var(--info-bg); color:var(--info); }

.feed-body{ flex:1; min-width:0; }
.feed-text{ font-size:12px; color:var(--text-2); line-height:1.45; }
.feed-text strong{ color:var(--text); font-weight:700; }
.feed-meta{
    display:flex; align-items:center; gap:8px; margin-top:3px;
    font-size:10px; color:var(--text-3); font-weight:500;
}
.feed-meta .flag{ width:12px; height:9px; border-radius:1px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }

/* =========================================================
   TABLES ROW
   ========================================================= */
.tables-row{
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr);
    gap:14px;
}

.tx{
    width:100%; border-collapse:separate; border-spacing:0;
    font-variant-numeric:tabular-nums;
}
.tx thead th{
    text-align:left; font-size:9.5px; font-weight:700;
    color:var(--text-3); letter-spacing:1.2px; text-transform:uppercase;
    padding:10px 14px; background:var(--bg-2);
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
}
.tx thead th:first-child{ padding-left:18px; }
.tx thead th:last-child{ padding-right:18px; text-align:right; }

.tx tbody td{
    padding:11px 14px; border-bottom:1px solid var(--border-soft);
    font-size:12px; color:var(--text-2); font-weight:500;
}
.tx tbody td:first-child{ padding-left:18px; }
.tx tbody td:last-child{ padding-right:18px; text-align:right; }
.tx tbody tr:last-child td{ border-bottom:none; }
.tx tbody tr{ transition:background var(--t-1); }
.tx tbody tr:hover td{ background:var(--bg-2); }

.tx-prod{ display:flex; align-items:center; gap:9px; min-width:0; }
.tx-img{
    width:30px; height:30px; flex-shrink:0; border-radius:6px;
    display:grid; place-items:center; color:#fff;
    font-weight:700; font-size:10.5px; font-family:'Sora',sans-serif; letter-spacing:-.3px;
    background:linear-gradient(135deg, var(--green-2), var(--green-1));
}
.tx-img.b{ background:linear-gradient(135deg, var(--gold-2), var(--gold)); color:var(--navy); }
.tx-img.c{ background:linear-gradient(135deg, var(--navy), var(--green-1)); color:var(--gold-3); }
.tx-img.d{ background:linear-gradient(135deg, var(--green-3), var(--gold-3)); color:var(--navy); }

.tx-prod .info{ min-width:0; }
.tx-prod .name{ font-weight:700; color:var(--text); font-size:12px; font-family:'Sora',sans-serif; letter-spacing:-.2px; }
.tx-prod .id{ font-size:10px; color:var(--text-3); font-family:'JetBrains Mono', monospace; font-weight:500; margin-top:1px; }

.country{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--text-2); }
.country .flag{ width:14px; height:10px; border-radius:1px; box-shadow:0 0 0 1px rgba(0,0,0,.06); flex-shrink:0; }

.pill{
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:20px;
    letter-spacing:.3px;
}
.pill::before{
    content:''; width:5px; height:5px; border-radius:50%;
    background:currentColor;
}
.pill.up{ background:var(--up-bg); color:var(--up); }
.pill.warn{ background:var(--warn-bg); color:var(--warn); }
.pill.info{ background:var(--info-bg); color:var(--info); }
.pill.dn{ background:var(--down-bg); color:var(--down); }

.amount{
    font-family:'JetBrains Mono', monospace;
    font-weight:700; font-size:12px; color:var(--text);
    font-variant-numeric:tabular-nums;
}
.amount .ccy{ font-size:9.5px; color:var(--text-3); font-weight:600; margin-right:2px; }

.tx-act{
    width:24px; height:24px; border-radius:5px;
    background:transparent; color:var(--text-3); font-size:10px;
    display:inline-grid; place-items:center;
    transition:all var(--t-2);
}
.tx-act:hover{ background:var(--green-soft); color:var(--green-1); }

/* =========================================================
   RFQ LIST (right column)
   ========================================================= */
.rfq-list{ display:flex; flex-direction:column; gap:8px; }
.rfq-card{
    padding:12px; border-radius:var(--r-3);
    background:var(--bg-2);
    border:1px solid var(--border-soft);
    transition:all var(--t-2);
    cursor:pointer;
}
.rfq-card:hover{
    background:var(--surface); border-color:var(--green-3);
    box-shadow:var(--sh-2); transform:translateY(-1px);
}
.rfq-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin-bottom:6px;
}
.rfq-id{
    font-family:'JetBrains Mono', monospace; font-size:10px;
    font-weight:700; color:var(--gold); letter-spacing:.5px;
}
.rfq-meta{ font-size:10px; color:var(--text-3); font-weight:600; }
.rfq-title{
    font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700;
    color:var(--text); margin-bottom:6px; letter-spacing:-.2px;
    line-height:1.3;
}
.rfq-stats{
    display:flex; align-items:center; gap:14px;
    font-size:11px; color:var(--text-2); font-weight:600;
}
.rfq-stats span{ display:inline-flex; align-items:center; gap:4px; }
.rfq-stats i{ font-size:9px; color:var(--text-3); }
.rfq-stats strong{ font-family:'JetBrains Mono', monospace; color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }

.rfq-foot{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);
}
.rfq-foot .country{ font-size:10.5px; }
.rfq-btn{
    font-size:10.5px; font-weight:700;
    padding:4px 10px; border-radius:var(--r-1);
    background:var(--navy); color:#fff;
    transition:background var(--t-2), transform var(--t-2);
}
.rfq-btn:hover{ background:var(--green-1); transform:translateX(2px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1280px){
    .kpi-grid{ grid-template-columns:repeat(3, 1fr); }
    .grid-main{ grid-template-columns:1fr; }
    .map-row{ grid-template-columns:1fr; }
    .tables-row{ grid-template-columns:1fr; }
}
@media (max-width: 980px){
    .app{ grid-template-columns:1fr; }
    .sb{
        position:fixed; left:0; top:0; height:100vh;
        width:240px; transform:translateX(-100%);
        transition:transform var(--t-3) var(--ease-out);
        box-shadow:var(--sh-4);
    }
    .sb.open{ transform:translateX(0); }
    .sb-toggle{ display:none; }
    .sb-backdrop.show{ display:block; }
    .menu-btn{ display:flex; }
    .tb-chip{ display:none; }
    .tb-divider{ display:none; }
    .tb-profile-info{ display:none; }
    .map-stat-strip{ display:none; }
}
@media (max-width: 720px){
    .kpi-grid{ grid-template-columns:repeat(2, 1fr); }
    .content{ padding:14px; gap:12px; }
    .tb{ padding:0 14px; }
    .tb-search{ max-width:none; }
    .hero{ grid-template-columns:1fr; padding:14px; }
    .hero-meta{ width:100%; justify-content:space-between; }
    .hero-clock{ padding:0; border-left:none; }
    .panel{ padding:14px; }
    .tx thead th:nth-child(3),
    .tx tbody td:nth-child(3){ display:none; }
    .map-stage{ height:240px; }
    .ticker-label span{ display:none; }
}
@media (max-width: 480px){
    .kpi-grid{ grid-template-columns:1fr 1fr; gap:8px; }
    .kpi{ padding:12px; }
    .kpi-value{ font-size:18px; }
    .tb-icon:nth-of-type(2){ display:none; }
    .tx thead th:nth-child(4),
    .tx tbody td:nth-child(4){ display:none; }
    .tx thead th:nth-child(2),
    .tx tbody td:nth-child(2){ display:none; }
    .hero-greet h1{ font-size:16px; }
}

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

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--bg);
    display:grid; place-items:center;
    transition:opacity .5s var(--ease-out), visibility .5s;
}
.preloader.hide{ opacity:0; visibility:hidden; }
.pl-stage{
    display:flex; flex-direction:column; align-items:center; gap:22px;
    position:relative;
}
.pl-mark{
    width:64px; height:64px; border-radius:14px;
    background:linear-gradient(135deg, var(--navy) 0%, var(--green-1) 100%);
    display:grid; place-items:center; color:#fff;
    font-family:'Sora',sans-serif; font-weight:800; font-size:22px;
    letter-spacing:-1px; position:relative;
    box-shadow:var(--sh-3);
    animation:plPulse 1.6s var(--ease) infinite;
}
.pl-mark::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
    background:linear-gradient(90deg, var(--gold-2), var(--gold-3));
    border-radius:0 0 14px 14px;
}
@keyframes plPulse{
    0%,100%{ transform:scale(1); box-shadow:0 8px 24px -6px rgba(11,31,18,.3), 0 0 0 0 rgba(196,154,46,.4); }
    50%    { transform:scale(1.06); box-shadow:0 12px 32px -6px rgba(11,31,18,.4), 0 0 0 16px rgba(196,154,46,0); }
}
.pl-orbit{
    position:absolute; top:50%; left:50%;
    width:96px; height:96px; margin:-48px 0 0 -48px;
    border:1.5px solid transparent;
    border-top-color:var(--gold-2);
    border-right-color:var(--green-2);
    border-radius:50%;
    animation:plSpin 1.4s linear infinite;
}
@keyframes plSpin{ to{ transform:rotate(360deg); } }
.pl-text{
    font-family:'Sora',sans-serif; font-size:14px; font-weight:700;
    color:var(--text); letter-spacing:-.3px;
    display:flex; align-items:center; gap:8px;
}
.pl-text em{
    font-style:normal; font-size:9.5px; font-weight:700; color:var(--gold);
    letter-spacing:1.6px; text-transform:uppercase;
    padding:2px 7px; border-radius:20px; background:var(--gold-soft);
}
.pl-bar{
    width:180px; height:2px; border-radius:2px;
    background:var(--bg-2); overflow:hidden; position:relative;
}
.pl-bar::after{
    content:''; position:absolute; left:0; top:0; height:100%;
    width:30%; border-radius:2px;
    background:linear-gradient(90deg, var(--green-2), var(--gold-2));
    animation:plBar 1.2s var(--ease-out) infinite;
}
@keyframes plBar{
    0%   { left:-30%; }
    100% { left:100%; }
}
.pl-tip{
    font-size:10.5px; color:var(--text-3); font-weight:500;
    font-variant-numeric:tabular-nums;
}

/* =========================================================
   DROPDOWN SYSTEM
   ========================================================= */
.dd-wrap{ position:relative; }
.dd-menu{
    position:absolute; top:calc(100% + 8px); right:0;
    min-width:240px; max-width:340px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-3);
    box-shadow:var(--sh-4);
    padding:6px;
    opacity:0; visibility:hidden;
    transform:translateY(-6px) scale(.97);
    transform-origin:top right;
    transition:opacity .2s var(--ease-out), transform .25s var(--ease-spring), visibility .2s;
    z-index:200;
    max-height:min(80vh, 480px); overflow-y:auto;
}
.dd-menu.left{ right:auto; left:0; transform-origin:top left; }
.dd-menu.show{
    opacity:1; visibility:visible;
    transform:translateY(0) scale(1);
}

.dd-head{
    padding:10px 12px 8px;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; border-bottom:1px solid var(--border-soft);
    margin-bottom:4px;
}
.dd-title{
    font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700;
    color:var(--text); letter-spacing:-.2px;
    display:flex; align-items:center; gap:6px;
}
.dd-title .badge-sm{
    background:var(--gold-soft); color:var(--gold);
    font-size:9px; font-weight:800; padding:1px 6px; border-radius:20px;
    font-variant-numeric:tabular-nums;
}
.dd-action{
    font-size:10.5px; font-weight:700; color:var(--green-1);
    letter-spacing:.2px; cursor:pointer;
    padding:3px 6px; border-radius:4px;
    transition:background var(--t-2);
}
.dd-action:hover{ background:var(--green-soft); }

.dd-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:var(--r-2);
    font-size:12px; color:var(--text-2); font-weight:500;
    cursor:pointer; position:relative;
    transition:background var(--t-2), color var(--t-2);
}
.dd-item:hover{ background:var(--bg-2); color:var(--text); }
.dd-item .ico{
    width:28px; height:28px; flex-shrink:0; border-radius:7px;
    background:var(--bg-2); color:var(--text-2);
    display:grid; place-items:center; font-size:11px;
    transition:background var(--t-2), color var(--t-2);
}
.dd-item:hover .ico{ background:var(--green-soft); color:var(--green-1); }
.dd-item.danger:hover{ background:var(--down-bg); color:var(--down); }
.dd-item.danger:hover .ico{ background:var(--down-bg); color:var(--down); }
.dd-item .lbl-wrap{ flex:1; min-width:0; }
.dd-item .lbl{ font-weight:600; color:var(--text); font-size:12px; }
.dd-item .sub{ font-size:10.5px; color:var(--text-3); margin-top:1px; }
.dd-item .check{
    width:14px; height:14px; flex-shrink:0; opacity:0;
    color:var(--green-2); font-size:11px;
}
.dd-item.active .check{ opacity:1; }
.dd-item.active{ background:var(--green-soft); color:var(--text); }

.dd-sep{ height:1px; background:var(--border-soft); margin:5px 4px; }
.dd-foot{
    padding:8px 12px; margin-top:4px;
    border-top:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:space-between;
    font-size:10.5px; color:var(--text-3); font-weight:500;
}
.dd-foot a{ color:var(--green-1); font-weight:700; }
.dd-foot a:hover{ text-decoration:underline; }

/* Profile menu specific */
.dd-profile-head{
    display:flex; align-items:center; gap:10px;
    padding:10px 10px 12px;
    margin-bottom:4px; border-bottom:1px solid var(--border-soft);
}
.dd-profile-head .av{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg, var(--green-2), var(--gold-2));
    display:grid; place-items:center; color:#fff;
    font-weight:700; font-size:13px; font-family:'Sora',sans-serif;
}
.dd-profile-head .info{ flex:1; min-width:0; }
.dd-profile-head .name{ font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color:var(--text); }
.dd-profile-head .email{ font-size:10.5px; color:var(--text-3); font-weight:500; margin-top:1px; }
.dd-plan{
    display:inline-flex; align-items:center; gap:4px;
    padding:1px 6px; border-radius:20px;
    background:var(--gold-soft); color:var(--gold);
    font-size:9px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
    margin-top:4px;
}

/* Notifications */
.notif-item{
    display:flex; gap:10px; padding:10px;
    border-radius:var(--r-2);
    cursor:pointer; position:relative;
    transition:background var(--t-2);
}
.notif-item:hover{ background:var(--bg-2); }
.notif-item.unread::before{
    content:''; position:absolute; left:3px; top:14px;
    width:5px; height:5px; border-radius:50%;
    background:var(--gold-2);
}
.notif-icon{
    width:30px; height:30px; flex-shrink:0; border-radius:50%;
    background:var(--green-soft); color:var(--green-1);
    display:grid; place-items:center; font-size:11px;
}
.notif-icon.gold{ background:var(--gold-soft); color:var(--gold); }
.notif-icon.dn{ background:var(--down-bg); color:var(--down); }
.notif-icon.info{ background:var(--info-bg); color:var(--info); }
.notif-body{ flex:1; min-width:0; }
.notif-text{ font-size:11.5px; color:var(--text-2); line-height:1.4; }
.notif-text strong{ color:var(--text); font-weight:700; }
.notif-time{ font-size:10px; color:var(--text-3); margin-top:2px; font-weight:500; }

/* Currency / Lang dropdown */
.dd-flag{
    width:18px; height:13px; flex-shrink:0; border-radius:1.5px;
    box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

/* =========================================================
   MULTI-LEVEL SIDEBAR
   ========================================================= */
.sb-item.has-sub{ padding-right:6px; }
.sb-item .caret{
    width:14px; flex-shrink:0; font-size:9px; color:var(--text-3);
    transition:transform var(--t-3) var(--ease-spring), color var(--t-2);
    margin-left:auto;
}
.collapsed .sb-item .caret{ display:none; }
.sb-item.has-sub.open > .caret{ transform:rotate(90deg); color:var(--green-2); }

.sb-sub{
    max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease-out);
    margin-left:24px;
    border-left:1.5px dashed var(--border);
    padding-left:10px;
    margin-top:0;
}
.collapsed .sb-sub{ display:none; }
.sb-sub.open{ max-height:300px; margin-top:2px; margin-bottom:4px; }

.sb-sub-item{
    display:flex; align-items:center; gap:8px;
    padding:6px 8px; border-radius:var(--r-1);
    font-size:11.5px; color:var(--text-2); font-weight:500;
    cursor:pointer; position:relative;
    transition:background var(--t-2), color var(--t-2), padding-left var(--t-2);
}
.sb-sub-item::before{
    content:''; position:absolute; left:-12px; top:50%;
    width:8px; height:1.5px; background:var(--border);
    transform:translateY(-50%);
    transition:background var(--t-2), width var(--t-2);
}
.sb-sub-item:hover{ background:var(--bg-2); color:var(--text); padding-left:10px; }
.sb-sub-item:hover::before{ background:var(--green-2); width:12px; }
.sb-sub-item.active{ color:var(--green-1); font-weight:700; }
.sb-sub-item.active::before{ background:var(--green-2); width:12px; }
/* Whole-row hit target for sub-items: stretch the <a> to fill the li box. */
.sb-sub-item > a{
    display:flex; align-items:center; gap:8px;
    flex:1 1 auto; min-width:0;
    margin:-6px -8px; padding:6px 8px;
    color:inherit; text-decoration:none; border-radius:inherit;
}
.sb-sub-item .dot-sm{
    width:5px; height:5px; border-radius:50%;
    background:var(--text-mute); flex-shrink:0;
}
.sb-sub-item .badge{
    background:var(--bg-2); color:var(--text-3);
    font-size:9px; font-weight:700; padding:1px 5px;
    border-radius:20px; margin-left:auto;
}
.sb-sub-item.active .badge{ background:var(--green-soft); color:var(--green-1); }

/* =========================================================
   BUTTON ANIMATIONS — ripple, press, glow
   ========================================================= */
.btn-fx{ position:relative; overflow:hidden; isolation:isolate; }
.btn-fx::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
    rgba(255,255,255,.5), transparent 50%);
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease);
    z-index:1;
}
.btn-fx:hover::before{ opacity:.18; }
.btn-fx > *{ position:relative; z-index:2; }

.btn-ripple{
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,.4);
    transform:scale(0); pointer-events:none;
    animation:rippleAnim .7s var(--ease-out) forwards;
    z-index:1;
}
@keyframes rippleAnim{
    to{ transform:scale(4); opacity:0; }
}

.tb-icon, .tb-chip, .menu-btn, .panel-tab, .rfq-btn, .sb-pro-btn,
.dd-item, .sb-item, .sb-sub-item, .tx-act{
    -webkit-tap-highlight-color:transparent;
}

.tb-icon:active, .tb-chip:active, .panel-tab:active, .rfq-btn:active{
    transform:scale(.94);
}
.sb-pro-btn:active{ transform:scale(.96); }

/* Hover lift refinement */
.kpi:hover .kpi-icon{ transform:scale(1.1) rotate(-4deg); }
.kpi-icon{ transition:transform var(--t-3) var(--ease-spring); }

/* =========================================================
   COMMAND PALETTE (⌘K)
   ========================================================= */
.cmd-backdrop{
    position:fixed; inset:0; z-index:300;
    background:rgba(11,31,18,.5);
    backdrop-filter:blur(6px);
    opacity:0; visibility:hidden;
    transition:opacity .25s var(--ease), visibility .25s;
}
.cmd-backdrop.show{ opacity:1; visibility:visible; }

.cmd-palette{
    position:fixed; top:14vh; left:50%;
    transform:translateX(-50%) translateY(-12px) scale(.97);
    width:min(560px, 92vw); z-index:301;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-4);
    box-shadow:var(--sh-4);
    overflow:hidden;
    opacity:0; visibility:hidden;
    transition:opacity .25s var(--ease-out), transform .35s var(--ease-spring), visibility .25s;
}
.cmd-backdrop.show + .cmd-palette,
.cmd-palette.show{
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0) scale(1);
}
.cmd-search{
    display:flex; align-items:center; gap:10px;
    padding:14px 16px; border-bottom:1px solid var(--border-soft);
}
.cmd-search i{ color:var(--text-3); font-size:14px; }
.cmd-search input{
    flex:1; border:none; outline:none; background:transparent;
    font-size:14px; font-weight:500; color:var(--text);
}
.cmd-search input::placeholder{ color:var(--text-mute); }
.cmd-search .esc{
    font-family:'JetBrains Mono', monospace; font-size:9.5px;
    font-weight:600; color:var(--text-3);
    border:1px solid var(--border); padding:2px 6px; border-radius:3px;
    background:var(--bg-2);
}
.cmd-list{
    padding:6px; max-height:50vh; overflow-y:auto;
}
.cmd-group-label{
    font-size:9.5px; font-weight:700; color:var(--text-mute);
    letter-spacing:1.4px; text-transform:uppercase;
    padding:10px 12px 4px;
}
.cmd-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-radius:var(--r-2);
    cursor:pointer; transition:background var(--t-1);
}
.cmd-item:hover, .cmd-item.focus{ background:var(--bg-2); }
.cmd-item .ico{
    width:24px; height:24px; flex-shrink:0; border-radius:6px;
    background:var(--bg-2); color:var(--text-2);
    display:grid; place-items:center; font-size:10px;
}
.cmd-item .lbl{ flex:1; font-size:12.5px; font-weight:500; color:var(--text); }
.cmd-item .kbd{
    font-family:'JetBrains Mono', monospace; font-size:9px;
    font-weight:600; color:var(--text-3);
    border:1px solid var(--border); padding:2px 5px; border-radius:3px;
}
.cmd-foot{
    padding:8px 14px; border-top:1px solid var(--border-soft);
    display:flex; align-items:center; gap:14px;
    font-size:10px; color:var(--text-3); font-weight:500;
    background:var(--surface-2);
}
.cmd-foot span{ display:inline-flex; align-items:center; gap:5px; }
.cmd-foot .kbd{
    font-family:'JetBrains Mono', monospace; font-size:9px;
    font-weight:600; padding:1px 5px; border-radius:3px;
    border:1px solid var(--border); background:var(--surface);
}

/* =========================================================
   SETTINGS DRAWER
   ========================================================= */
.drawer{
    position:fixed; top:0; right:0; height:100vh;
    width:min(360px, 92vw); z-index:201;
    background:var(--surface);
    border-left:1px solid var(--border);
    box-shadow:-12px 0 32px -10px rgba(11,31,18,.15);
    transform:translateX(100%);
    transition:transform .4s var(--ease-out);
    display:flex; flex-direction:column;
    overflow:hidden;
}
.drawer.open{ transform:translateX(0); }

.drawer-head{
    padding:16px 20px; border-bottom:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:space-between;
}
.drawer-title{
    font-family:'Sora',sans-serif; font-size:15px; font-weight:700;
    color:var(--text); display:flex; align-items:center; gap:7px;
}
.drawer-close{
    width:30px; height:30px; border-radius:var(--r-2);
    display:grid; place-items:center; color:var(--text-2);
    transition:background var(--t-2), color var(--t-2);
}
.drawer-close:hover{ background:var(--bg-2); color:var(--text); }

.drawer-body{
    flex:1; overflow-y:auto; padding:16px 20px;
    display:flex; flex-direction:column; gap:18px;
}

.dr-section{ display:flex; flex-direction:column; gap:8px; }
.dr-section-title{
    font-size:10px; font-weight:700; color:var(--text-mute);
    letter-spacing:1.4px; text-transform:uppercase;
}

/* Theme switcher */
.theme-switch{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
    padding:5px; background:var(--bg-2); border-radius:var(--r-3);
}
.theme-opt{
    padding:10px 8px; border-radius:var(--r-2);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    font-size:10.5px; font-weight:700; color:var(--text-3);
    cursor:pointer;
    transition:all var(--t-2);
    position:relative;
}
.theme-opt .preview{
    width:48px; height:32px; border-radius:5px;
    border:1px solid var(--border);
    position:relative; overflow:hidden;
    flex-shrink:0;
}
.theme-opt .preview.light{ background:#FFF; }
.theme-opt .preview.light::before{
    content:''; position:absolute; left:4px; top:4px; width:14px; height:24px; border-radius:2px; background:#F0F2EC;
}
.theme-opt .preview.light::after{
    content:''; position:absolute; right:4px; top:4px; left:22px; height:24px; border-radius:2px;
    background:linear-gradient(180deg, #FAFBF7, #F6F7F2);
}
.theme-opt .preview.dark{ background:#0A130D; }
.theme-opt .preview.dark::before{
    content:''; position:absolute; left:4px; top:4px; width:14px; height:24px; border-radius:2px; background:#14211B;
}
.theme-opt .preview.dark::after{
    content:''; position:absolute; right:4px; top:4px; left:22px; height:24px; border-radius:2px; background:#182921;
}
.theme-opt .preview.system{
    background:linear-gradient(135deg, #FFF 50%, #0A130D 50%);
}
.theme-opt.active{ color:var(--text); }
.theme-opt.active .preview{ box-shadow:0 0 0 2px var(--green-2); }
.theme-opt:hover{ color:var(--text); }

/* Toggle row */
.tg-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:8px 0;
}
.tg-info .tg-label{ font-size:12.5px; font-weight:600; color:var(--text); }
.tg-info .tg-desc{ font-size:10.5px; color:var(--text-3); margin-top:1px; }

.toggle{
    width:34px; height:18px; border-radius:18px;
    background:var(--border-strong); position:relative;
    cursor:pointer; flex-shrink:0;
    transition:background var(--t-2);
}
.toggle::after{
    content:''; position:absolute; top:2px; left:2px;
    width:14px; height:14px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15);
    transition:transform var(--t-3) var(--ease-spring);
}
.toggle.on{ background:var(--green-2); }
.toggle.on::after{ transform:translateX(16px); }

/* Density options */
.dens-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    padding:5px; background:var(--bg-2); border-radius:var(--r-3);
}
.dens-opt{
    padding:10px; border-radius:var(--r-2);
    font-size:11.5px; font-weight:700; color:var(--text-3);
    text-align:center; cursor:pointer;
    transition:all var(--t-2);
}
.dens-opt.active{ background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }
.dens-opt:hover:not(.active){ color:var(--text-2); }

/* Color accent picker */
.acc-grid{
    display:flex; gap:8px; padding:6px 0;
}
.acc-opt{
    width:28px; height:28px; border-radius:50%;
    border:2px solid var(--border); cursor:pointer;
    position:relative;
    transition:transform var(--t-2);
}
.acc-opt:hover{ transform:scale(1.1); }
.acc-opt.active{ border-color:var(--text); }
.acc-opt.active::after{
    content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; inset:0; display:grid; place-items:center;
    color:#fff; font-size:10px; text-shadow:0 1px 2px rgba(0,0,0,.3);
}

.dr-foot{
    padding:14px 20px; border-top:1px solid var(--border-soft);
    display:flex; gap:8px;
}
.dr-foot button{
    flex:1; padding:10px; border-radius:var(--r-2);
    font-size:11.5px; font-weight:700;
    transition:all var(--t-2);
}
.dr-btn-prim{ background:var(--navy); color:#fff; }
.dr-btn-prim:hover{ background:var(--green-1); transform:translateY(-1px); }
.dr-btn-sec{ background:var(--bg-2); color:var(--text-2); }
.dr-btn-sec:hover{ background:var(--border); color:var(--text); }

/* =========================================================
   TOAST SYSTEM
   ========================================================= */
.toast-stack{
    position:fixed; bottom:20px; right:20px; z-index:400;
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none;
}
.toast{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-3);
    box-shadow:var(--sh-4);
    padding:10px 14px;
    display:flex; align-items:flex-start; gap:10px;
    min-width:280px; max-width:360px;
    pointer-events:auto;
    opacity:0; transform:translateX(20px);
    animation:toastIn .35s var(--ease-spring) forwards, toastOut .3s var(--ease-out) forwards 3.5s;
    position:relative; overflow:hidden;
}
@keyframes toastIn{ to{ opacity:1; transform:translateX(0); } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(20px); } }
.toast::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--green-2);
}
.toast.warn::before{ background:var(--gold-2); }
.toast.error::before{ background:var(--down); }
.toast.info::before{ background:var(--info); }

.toast-icon{
    width:28px; height:28px; flex-shrink:0; border-radius:7px;
    background:var(--green-soft); color:var(--green-1);
    display:grid; place-items:center; font-size:11px;
}
.toast.warn .toast-icon{ background:var(--gold-soft); color:var(--gold); }
.toast.error .toast-icon{ background:var(--down-bg); color:var(--down); }
.toast.info .toast-icon{ background:var(--info-bg); color:var(--info); }

.toast-body{ flex:1; min-width:0; }
.toast-title{ font-size:12px; font-weight:700; color:var(--text); font-family:'Sora',sans-serif; }
.toast-msg{ font-size:11px; color:var(--text-3); margin-top:1px; line-height:1.4; }
.toast-close{
    width:20px; height:20px; flex-shrink:0; border-radius:4px;
    display:grid; place-items:center; color:var(--text-3); font-size:9px;
    transition:all var(--t-2);
}
.toast-close:hover{ background:var(--bg-2); color:var(--text); }

.toast-progress{
    position:absolute; bottom:0; left:0; height:2px;
    background:var(--green-2);
    width:100%; transform-origin:left;
    animation:toastBar 4s linear forwards;
}
.toast.warn .toast-progress{ background:var(--gold-2); }
.toast.error .toast-progress{ background:var(--down); }
.toast.info .toast-progress{ background:var(--info); }
@keyframes toastBar{ to{ transform:scaleX(0); } }

/* =========================================================
   FAB QUICK ACTION
   ========================================================= */
.fab{
    position:fixed; bottom:20px; right:20px; z-index:150;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg, var(--navy), var(--green-1));
    color:#fff; font-size:16px;
    display:grid; place-items:center;
    box-shadow:var(--sh-4);
    cursor:pointer;
    transition:transform var(--t-2) var(--ease-spring), box-shadow var(--t-2);
    display:none;
}
.fab:hover{ transform:scale(1.1) rotate(90deg); }
.fab:active{ transform:scale(.95); }

/* =========================================================
   THEME TOGGLE BUTTON (in topbar)
   ========================================================= */
.theme-tgl{ position:relative; }
.theme-tgl .ic-sun, .theme-tgl .ic-moon{
    position:absolute; inset:0; display:grid; place-items:center;
    font-size:13px;
    transition:opacity var(--t-3), transform var(--t-3) var(--ease-spring);
}
.theme-tgl .ic-sun{ opacity:1; transform:rotate(0); }
.theme-tgl .ic-moon{ opacity:0; transform:rotate(-90deg) scale(.5); }
[data-theme="dark"] .theme-tgl .ic-sun{ opacity:0; transform:rotate(90deg) scale(.5); }
[data-theme="dark"] .theme-tgl .ic-moon{ opacity:1; transform:rotate(0); }

/* =========================================================
   BUTTON COMPONENT (used in dropdowns/drawer)
   ========================================================= */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:7px 12px; border-radius:var(--r-2);
    font-size:11.5px; font-weight:700;
    cursor:pointer;
    transition:all var(--t-2);
    position:relative; overflow:hidden;
}
.btn-primary{
    background:var(--navy); color:#fff;
}
.btn-primary:hover{ background:var(--green-1); transform:translateY(-1px); box-shadow:var(--sh-3); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{
    background:transparent; color:var(--text-2);
}
.btn-ghost:hover{ background:var(--bg-2); color:var(--text); }

/* Compact density mode */
[data-density="compact"] .content{ padding:14px 16px 18px; gap:10px; }
[data-density="compact"] .panel{ padding:14px 16px; }
[data-density="compact"] .kpi{ padding:12px; }
[data-density="compact"] .kpi-value{ font-size:20px; }
[data-density="compact"] .kpi-grid{ gap:8px; }
[data-density="compact"] .grid-main, [data-density="compact"] .map-row, [data-density="compact"] .tables-row{ gap:10px; }
[data-density="compact"] .feed-item{ padding:8px 0; }

@media (max-width: 720px){
    .dd-menu{ min-width:280px; max-width:calc(100vw - 24px); }
    .toast-stack{ left:14px; right:14px; bottom:14px; }
    .toast{ min-width:0; max-width:none; }
}

/* =========================================================
   MOBILE PROFILE SECTION — tb-actions moved into dropdown
   ========================================================= */
.profile-mobile-section{
    display:none;
    margin:0 0 6px;
    padding:6px;
    background:var(--bg-2);
    border-radius:var(--r-3);
}

/* Quick row: theme toggle */
.qa-row{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    margin-bottom:6px;
}
.qa-btn{
    display:flex; align-items:center; gap:10px;
    padding:9px 12px; border-radius:var(--r-2);
    background:var(--surface);
    font-size:12px; font-weight:600; color:var(--text);
    cursor:pointer; position:relative; width:100%;
    border:1px solid var(--border-soft);
    transition:background var(--t-2), transform var(--t-2), border-color var(--t-2);
}
.qa-btn:hover{ background:var(--green-soft); border-color:var(--green-3); }
.qa-btn:active{ transform:scale(.98); }
.qa-btn .qa-ico{
    width:24px; height:24px; flex-shrink:0; border-radius:6px;
    background:var(--bg-2); color:var(--text-2);
    display:grid; place-items:center;
    position:relative; overflow:hidden;
}
.qa-btn .qa-ico i{
    position:absolute; inset:0; display:grid; place-items:center;
    font-size:11px;
    transition:opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease-spring);
}
.qa-btn .qa-ico .ic-moon{ opacity:0; transform:rotate(-90deg) scale(.5); }
[data-theme="dark"] .qa-btn .qa-ico .ic-sun{ opacity:0; transform:rotate(90deg) scale(.5); color:var(--gold-3); }
[data-theme="dark"] .qa-btn .qa-ico .ic-moon{ opacity:1; transform:rotate(0) scale(1); color:var(--gold-3); }
.qa-btn .qa-lbl{ flex:1; text-align:left; }
.qa-btn .qa-status{
    font-size:10.5px; font-weight:700; color:var(--text-3);
    font-variant-numeric:tabular-nums;
    padding:2px 7px; border-radius:20px;
    background:var(--bg-2);
}
[data-theme="dark"] .qa-btn .qa-status{ background:var(--surface-2); }

/* Expandable item inside profile dropdown */
.dd-item.expandable{ user-select:none; }
.dd-item.expandable .exp-caret{
    font-size:9px; color:var(--text-3); flex-shrink:0;
    transition:transform var(--t-3) var(--ease-spring), color var(--t-2);
}
.dd-item.expandable.open .exp-caret{
    transform:rotate(90deg); color:var(--green-2);
}
.dd-item.expandable.open{ background:var(--bg-2); }
.dd-item.expandable .badge-inline{
    background:var(--gold-soft); color:var(--gold);
    font-size:9px; font-weight:800; padding:1px 6px; border-radius:20px;
    font-variant-numeric:tabular-nums; margin-left:4px;
}
.dd-item.expandable .live-pulse{
    width:6px; height:6px; border-radius:50%; background:var(--up);
    animation:livePulse2 2s var(--ease) infinite;
    margin-left:4px;
}

.exp-content{
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease-out);
}
.exp-content.open{ max-height:420px; }
.exp-inner{
    padding:4px 4px 6px;
    display:flex; flex-direction:column; gap:1px;
    position:relative;
}
.exp-inner::before{
    content:''; position:absolute; left:18px; top:6px; bottom:8px; width:1px;
    background:var(--border-soft);
}
.exp-inner .dd-item{
    padding:7px 8px 7px 28px;
    font-size:11.5px;
}
.exp-inner .dd-item .dd-flag{
    width:16px; height:11px;
}
.exp-inner .dd-item .lbl{ font-size:11.5px; }
.exp-inner .dd-item .sub{ font-size:10px; }
.exp-inner .notif-item{
    padding:7px 8px 7px 28px; gap:8px;
}
.exp-inner .notif-icon{ width:24px; height:24px; font-size:9.5px; }
.exp-inner .notif-text{ font-size:11px; }
.exp-inner .notif-time{ font-size:9.5px; }
.exp-inner .exp-link{
    display:block; padding:8px 8px 4px 28px;
    font-size:10.5px; font-weight:700; color:var(--green-1);
    text-align:left;
}
.exp-inner .exp-link:hover{ text-decoration:underline; }

/* =========================================================
   MOBILE — move tb-actions into profile dropdown
   ========================================================= */
@media (max-width: 720px){
    /* Hide all topbar actions except profile */
    .tb-actions > .dd-wrap:not(.profile-wrap){ display:none; }
    .tb-actions > .tb-icon{ display:none; }
    .tb-actions > .tb-divider{ display:none; }

    /* Show mobile section inside profile dropdown */
    .profile-mobile-section{ display:block; }

    /* Profile dropdown becomes a compact full-width sheet */
    #ddProfile{
        position:fixed !important;
        top:64px !important;
        left:8px !important;
        right:8px !important;
        min-width:0 !important;
        max-width:none !important;
        width:auto !important;
        max-height:calc(100vh - 80px);
        overflow-y:auto;
        transform-origin:top center !important;
    }

    /* Profile chip becomes just avatar with chevron, more compact */
    .tb-profile{ padding:3px 6px 3px 3px; }
}

/* =========================================================
   EXTENDED SECTIONS — section dividers, KPI variants,
   bar chart, target donut, empty states, equal-tables row
   ========================================================= */

/* Section divider — small uppercase label between section groups */
.section-divider{
    display:flex; align-items:center; gap:10px;
    font-family:'Sora',sans-serif;
    font-size:10.5px; font-weight:700;
    color:var(--green-1);
    letter-spacing:1.6px; text-transform:uppercase;
    padding:6px 2px 2px;
    margin-top:2px;
}
.section-divider::before{
    content:''; width:14px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--green-2), var(--gold-2));
}
.section-divider::after{
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg, var(--border), transparent);
}
.section-divider .badge{
    font-size:9px; font-weight:700;
    padding:2px 6px; border-radius:20px;
    background:var(--gold-soft); color:var(--gold);
    letter-spacing:.5px;
}

/* KPI grid variants — 4 columns, 2 columns */
.kpi-grid.cols-4{ grid-template-columns:repeat(4, 1fr); }
.kpi-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:1280px){
    .kpi-grid.cols-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:720px){
    .kpi-grid.cols-4{ grid-template-columns:repeat(2, 1fr); }
}

/* KPI semantic accents (for status icons) */
.kpi.info::before{ background:var(--info); }
.kpi.info .kpi-icon{ background:var(--info-bg); color:var(--info); }
.kpi.warn::before{ background:var(--warn); }
.kpi.warn .kpi-icon{ background:var(--warn-bg); color:var(--warn); }
.kpi.danger::before{ background:var(--down); }
.kpi.danger .kpi-icon{ background:var(--down-bg); color:var(--down); }

/* KPI subtle helper line in foot */
.kpi-foot.split{ justify-content:space-between; }
.kpi-meta{
    font-size:10.5px; color:var(--text-3); font-weight:600;
    font-variant-numeric:tabular-nums;
}
.kpi-meta strong{ color:var(--text-2); font-weight:700; }
.kpi-tag{
    display:inline-flex; align-items:center; gap:4px;
    font-size:9.5px; font-weight:700; letter-spacing:.4px;
    padding:2px 7px; border-radius:20px;
    background:var(--green-soft); color:var(--green-1);
}
.kpi-tag.gold{ background:var(--gold-soft); color:var(--gold); }
.kpi-tag.warn{ background:var(--warn-bg); color:var(--warn); }
.kpi-tag.up{ background:var(--up-bg); color:var(--up); }
.kpi-tag.dn{ background:var(--down-bg); color:var(--down); }
.kpi-tag i{ font-size:8px; }

/* Equal-width tables row (50/50) */
.tables-row.eq{ grid-template-columns:1fr 1fr; }
@media (max-width:1280px){ .tables-row.eq{ grid-template-columns:1fr; } }

/* Compact tx variant — smaller padding for dense tables */
.tx.compact thead th{ padding:9px 12px; font-size:9px; }
.tx.compact thead th:first-child{ padding-left:16px; }
.tx.compact thead th:last-child{ padding-right:16px; }
.tx.compact tbody td{ padding:10px 12px; font-size:11.5px; }
.tx.compact tbody td:first-child{ padding-left:16px; }
.tx.compact tbody td:last-child{ padding-right:16px; }

.tx-id{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; font-weight:700; color:var(--green-1);
    background:var(--green-soft); padding:2px 7px; border-radius:4px;
    letter-spacing:.2px;
}
.tx-reply-id{
    font-family:'JetBrains Mono', monospace;
    font-size:11px; font-weight:700; color:var(--gold);
}
.tx-date{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; color:var(--text-3); font-weight:600;
}
.tx-subj{
    font-size:12px; font-weight:600; color:var(--text);
    font-family:'Sora',sans-serif; letter-spacing:-.2px;
}
.tx-supplier{ font-size:11.5px; color:var(--text-2); font-weight:600; }
.tx-requester{ font-size:11.5px; color:var(--text-2); font-weight:600; }

/* Empty state inside panels */
.empty-state{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:36px 18px;
    color:var(--text-3);
}
.empty-state .es-icon{
    width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--bg-2); color:var(--text-mute);
    font-size:16px;
}
.empty-state .es-title{
    font-family:'Sora',sans-serif;
    font-size:12.5px; font-weight:600; color:var(--text-2);
    letter-spacing:-.2px;
}
.empty-state .es-sub{
    font-size:11px; color:var(--text-3); font-weight:500;
    text-align:center; max-width:280px; line-height:1.5;
}

/* Bar chart (Business Performance Metrics) */
.bar-chart{ height:240px; position:relative; }
.bar-chart svg{ width:100%; height:100%; overflow:visible; }
.bar-grid line{ stroke:var(--border-soft); stroke-dasharray:2 4; }
.bar-axis text{
    fill:var(--text-3); font-size:9.5px;
    font-family:'JetBrains Mono', monospace; font-weight:600;
}
.bar-axis-x text{
    fill:var(--text-3); font-size:9.5px; font-weight:600;
    letter-spacing:.4px; text-transform:uppercase;
}
.bar-cur{
    fill:var(--green-2);
    transform-origin:bottom; transform:scaleY(0);
    animation:barGrow .85s var(--ease-spring) forwards;
}
.bar-prev{
    fill:var(--border-strong);
    transform-origin:bottom; transform:scaleY(0);
    animation:barGrow .85s var(--ease-spring) forwards;
    animation-delay:.1s;
}
@keyframes barGrow{ to{ transform:scaleY(1); } }
.bar-cur:hover{ fill:var(--green-1); }
.bar-prev:hover{ fill:var(--text-mute); }

/* Visitor analytics — area chart variant */
.visit-summary{ display:flex; flex-direction:column; gap:2px; padding:0 0 8px; }
.visit-num{
    font-family:'Sora',sans-serif;
    font-size:30px; font-weight:700; color:var(--text);
    letter-spacing:-1px; line-height:1;
    font-variant-numeric:tabular-nums;
}
.visit-lbl{
    font-size:10.5px; color:var(--text-3); font-weight:600;
    letter-spacing:.5px; text-transform:uppercase;
}
.visit-chart{ height:180px; position:relative; margin-top:8px; }
.visit-chart svg{ width:100%; height:100%; overflow:visible; }
.visit-line{
    fill:none; stroke:var(--green-2); stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:1500; stroke-dashoffset:1500;
    animation:drawLn 1.4s var(--ease-out) forwards .3s;
}
.visit-area{ fill:url(#vGrad); }
.visit-dot{
    r:3.5; fill:var(--surface); stroke:var(--green-2); stroke-width:2;
    opacity:0; animation:popIn .35s var(--ease-spring) forwards;
}
.visit-dot.peak{ stroke:var(--gold-2); }
.visit-axis text{
    fill:var(--text-3); font-size:9.5px;
    font-family:'JetBrains Mono', monospace; font-weight:600;
}

/* Monthly Target donut */
.target-wrap{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:8px 0 4px;
}
.target-donut{ position:relative; width:160px; height:160px; }
.target-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.target-donut .track{
    fill:none; stroke:var(--border); stroke-width:10;
}
.target-donut .seg{
    fill:none; stroke:url(#tGrad); stroke-width:10;
    stroke-linecap:round;
    stroke-dasharray:0 365;
    animation:donutFill 1.4s var(--ease-out) forwards .4s;
}
@keyframes donutFill{
    to{ stroke-dasharray:var(--seg-len, 0) 365; }
}
.target-center{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; pointer-events:none;
}
.target-center .num{
    font-family:'Sora',sans-serif;
    font-size:24px; font-weight:700; color:var(--text);
    letter-spacing:-.6px; line-height:1;
    font-variant-numeric:tabular-nums;
}
.target-center .lbl{
    font-size:10px; color:var(--text-3); font-weight:600;
    letter-spacing:.5px; text-transform:uppercase;
}
.target-stats{
    display:flex; gap:14px; width:100%;
    padding-top:14px;
    border-top:1px dashed var(--border);
    justify-content:center;
}
.target-stat{ display:flex; flex-direction:column; gap:2px; align-items:center; }
.target-stat .lbl{
    font-size:9.5px; color:var(--text-3); font-weight:700;
    letter-spacing:1.1px; text-transform:uppercase;
}
.target-stat .val{
    font-family:'JetBrains Mono', monospace;
    font-size:14px; font-weight:700; color:var(--text);
    font-variant-numeric:tabular-nums;
}

/* Investor avatar (top investors) */
.inv-row{
    display:flex; align-items:center; gap:11px;
    padding:11px 14px;
    border-bottom:1px solid var(--border-soft);
    transition:background var(--t-1);
}
.inv-row:last-child{ border-bottom:none; }
.inv-row:hover{ background:var(--bg-2); }
.inv-avatar{
    width:32px; height:32px; flex-shrink:0; border-radius:50%;
    display:grid; place-items:center; color:#fff;
    font-weight:700; font-size:11px; font-family:'Sora',sans-serif;
    background:linear-gradient(135deg, var(--green-2), var(--green-1));
    letter-spacing:-.3px;
}
.inv-avatar.b{ background:linear-gradient(135deg, var(--gold-2), var(--gold)); color:var(--navy); }
.inv-avatar.c{ background:linear-gradient(135deg, var(--navy), var(--green-1)); color:var(--gold-3); }
.inv-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.inv-name{ font-size:12px; font-weight:700; color:var(--text); font-family:'Sora',sans-serif; letter-spacing:-.2px; }
.inv-meta{ font-size:10.5px; color:var(--text-3); font-weight:500; }
.inv-amt{ font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }

/* Verified check inline */
.verified{
    display:inline-flex; align-items:center; gap:3px;
    font-size:9.5px; font-weight:700;
    color:var(--green-1);
}
.verified i{ font-size:8.5px; }

/* Tiny status dot for the empty rows fallback */
.tx tbody td.empty-cell{
    text-align:center; padding:32px 14px;
    color:var(--text-3); font-size:11.5px; font-style:italic;
}
/* ============================================================
   Brhub — Laravel integration overlay
   Loaded AFTER the reference design CSS. Adds only what Laravel
   integration needs and the reference doesn't ship with:
     · Pace.js top progress bar
     · Logout blocking overlay
     · RTL mirroring for Arabic locale
     · Per-card .is-loading shimmer (the "individually loaded" cue)
   ============================================================ */

/* ─── Pace.js progress bar ─────────────────────────────────── */
.pace {
    pointer-events: none;
    user-select: none;
}
.pace-inactive { display: none; }
.pace .pace-progress {
    background: linear-gradient(90deg, var(--green-1), var(--green-2), var(--gold-2));
    position: fixed;
    z-index: 100000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
    box-shadow: 0 0 10px rgba(62, 134, 101, .6), 0 0 4px rgba(196, 154, 46, .4);
    transition: width .25s var(--ease, cubic-bezier(.4,0,.2,1));
}
[data-theme="dark"] .pace .pace-progress {
    box-shadow: 0 0 10px rgba(93, 169, 130, .8), 0 0 4px rgba(225, 193, 115, .5);
}

/* ─── Logout / blocking overlay ────────────────────────────── */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(11, 31, 18, .55);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}
[data-theme="dark"] .overlay { background: rgba(0, 0, 0, .65); }
.overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }

.overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 32px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 1px rgba(196, 154, 46, .15);
    max-width: 360px;
    text-align: center;
    transform: translateY(8px) scale(.96);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.overlay.is-visible .overlay-content { transform: translateY(0) scale(1); }

.overlay-spinner {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 3px solid var(--green-soft);
    border-top-color: var(--green-1);
    border-right-color: var(--gold-2);
    animation: tnOverlaySpin .9s linear infinite;
    flex-shrink: 0;
}
@keyframes tnOverlaySpin { to { transform: rotate(360deg); } }

.overlay-message {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    letter-spacing: -.2px;
    margin: 0;
}
.overlay-submessage {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-3);
    line-height: 1.5;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .overlay, .overlay-content { transition: none; }
    .overlay-spinner { animation: none; border-top-color: var(--green-1); }
}

/* ─── Per-card loading shimmer (individually loaded effect) ── */
.kpi.is-loading,
.panel.is-loading {
    position: relative;
    overflow: hidden;
}
.kpi.is-loading::after,
.panel.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, .55) 50%,
    transparent 100%);
    background-size: 200% 100%;
    animation: tnSkeleton 1.4s linear infinite;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
}
[data-theme="dark"] .kpi.is-loading::after,
[data-theme="dark"] .panel.is-loading::after {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
    background-size: 200% 100%;
}
@keyframes tnSkeleton {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── RTL support (Arabic) ─────────────────────────────────── */
[dir="rtl"] body { font-family: 'Almarai', 'Inter', sans-serif; }
[dir="rtl"] .mono,
[dir="rtl"] .tabular { direction: ltr; unicode-bidi: embed; }

/* Mirror the app grid so sidebar sits on the right */
/*[dir="rtl"] .app {*/
/*    grid-template-columns: 1fr var(--sb-w);*/
/*}*/
/*[dir="rtl"] .app.collapsed {*/
/*    grid-template-columns: 1fr var(--sb-collapsed);*/
/*}*/
/*[dir="rtl"] .sb { order: 2; border-right: 0; border-left: 1px solid var(--border); }*/
/*[dir="rtl"] .main { order: 1; }*/

[dir="rtl"] .sb { border-left: 0; border-right: 1px solid var(--border); }


/* Sidebar internal RTL flips */
[dir="rtl"] .sb-toggle { right: auto; left: -12px; }
[dir="rtl"] .collapsed .sb-toggle i { transform: rotate(0deg); }
[dir="rtl"] .sb-toggle i { transform: rotate(180deg); }

/* Active item left-edge accent → right-edge */
[dir="rtl"] .sb-item.active {
    border-left: 0;
    border-right: 3px solid var(--green-2);
}

/* Mobile drawer slides in from the right in RTL */
@media (max-width: 980px) {
    [dir="rtl"] .sb { transform: translateX(100%); }
    [dir="rtl"] .sb.is-open { transform: translateX(0); }
}

/* Topbar dropdowns anchor to the opposite side */
[dir="rtl"] .dd-menu { right: auto; left: 0; }
[dir="rtl"] .profile-wrap .dd-menu { right: auto; left: 0; }

/* Settings drawer slides in from the left in RTL */
[dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.open { transform: translateX(0); }

/* Ticker scrolls the other way */
[dir="rtl"] .ticker-strip { animation-direction: reverse; }

/* Chevrons in breadcrumbs/cards face the other way */
[dir="rtl"] .crumb i.fa-chevron-right,
[dir="rtl"] .panel-link i.fa-arrow-right,
[dir="rtl"] .rfq-btn i,
[dir="rtl"] .sb-pro-btn i { transform: scaleX(-1); }

/* Toast stack on the opposite corner */
[dir="rtl"] .toast-stack { right: auto; left: 16px; }

/* ─── Period filter pills (used in hero by index.blade.php) ── */
.filter-tabs {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    box-shadow: var(--sh-1);
}
.filter-tab {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-3);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--t-2) var(--ease);
    font-family: inherit;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.filter-tab:hover { color: var(--green-2); }
.filter-tab.active {
    background: var(--green-1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(42, 95, 71, .32);
}
[data-theme="dark"] .filter-tab.active { color: var(--navy); background: var(--gold-2); }

/* ─── Hero pill + extra hero polish (index.blade.php uses these) ── */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.btn-tn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--t-2) var(--ease);
    line-height: 1.2;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.btn-tn:disabled { opacity: .55; cursor: not-allowed; }
.btn-tn.primary {
    background: var(--green-1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(42, 95, 71, .25);
}
.btn-tn.primary:hover { background: var(--green-2); transform: translateY(-1px); color: #fff; text-decoration: none; }
.btn-tn.ghost {
    background: var(--surface-2);
    color: var(--text-2);
    border-color: var(--border);
}
.btn-tn.ghost:hover { background: var(--bg-2); color: var(--text); text-decoration: none; }
[data-theme="dark"] .btn-tn.primary { background: var(--gold-2); color: var(--navy); }
[data-theme="dark"] .btn-tn.primary:hover { background: var(--gold-3); color: var(--navy); }

/* ─── Collapsed sidebar: sub-menus as flyout popovers ─────────
   Reference design hides .sb-sub when collapsed. We override to
   show it as a floating popover anchored beside the parent item.
   Triggered by JS adding .flyout-open + setting fixed position.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 981px) {
    .collapsed .sb-item.has-sub {
        position: relative;
    }

    /* Override reference's `.collapsed .sb-sub { display:none }`
       and convert to a fixed-positioned floating popover */
    .collapsed .sb-sub {
        display: block;
        position: fixed;            /* JS sets top/left to anchor beside .sb-item */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow:
            0 12px 32px rgba(13, 40, 24, .14),
            0 0 0 1px rgba(229, 233, 225, .6);
        min-width: 220px;
        max-width: 280px;
        padding: 4px;
        margin: 0;
        z-index: 1000;
        transition: opacity .15s ease;
    }

    .collapsed .sb-sub.flyout-open {
        max-height: 500px;
        opacity: 1;
        pointer-events: auto;
        overflow: visible;
    }

    /* Header showing the parent label inside the flyout */
    .collapsed .sb-sub.flyout-open::before {
        content: attr(data-flyout-label);
        display: block;
        padding: 9px 12px 6px;
        font-family: 'Sora', 'Inter', sans-serif;
        font-size: 10px;
        font-weight: 800;
        color: var(--text-2);
        text-transform: uppercase;
        letter-spacing: 1.2px;
        border-bottom: 1px solid var(--border-soft);
        margin-bottom: 4px;
    }

    /* Sub-items inside flyouts get more breathing room */
    .collapsed .sb-sub.flyout-open .sb-sub-item {
        padding: 0;
        margin: 0;
        height: auto;
    }
    .collapsed .sb-sub.flyout-open .sb-sub-item a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 12.5px;
        color: var(--text-2);
        border-radius: 6px;
        transition: background var(--t-2) var(--ease, ease);
    }
    .collapsed .sb-sub.flyout-open .sb-sub-item a:hover {
        background: var(--green-soft);
        color: var(--green-1);
        text-decoration: none;
    }
    .collapsed .sb-sub.flyout-open .sb-sub-item.active a {
        background: var(--green-soft);
        color: var(--green-1);
        font-weight: 700;
    }
    .collapsed .sb-sub.flyout-open .dot-sm {
        width: 4px; height: 4px;
        background: var(--text-mute);
        border-radius: 50%;
        flex-shrink: 0;
    }
    .collapsed .sb-sub.flyout-open .sb-sub-item.active .dot-sm {
        background: var(--green-2);
    }

    /* RTL: anchor flyout to the LEFT of the (right-side) sidebar */
    [dir="rtl"].collapsed .sb-sub.flyout-open {
        /* JS overrides left → adjusted to (rect.left - flyout.width - 4) */
    }
}

/* On mobile, the sidebar is full-width when open — flyouts not needed */
@media (max-width: 980px) {
    .collapsed .sb-sub { /* fall back to reference behavior on mobile */ }
}

/* ─── Filter animations: tab switch + value change pulse ─── */

/* Period tabs: bouncy active transition */
.filter-tab {
    transition:
        background var(--t-2, .25s) var(--ease-spring, cubic-bezier(.34,1.4,.64,1)),
        color var(--t-2, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        transform var(--t-2, .25s) var(--ease-spring, cubic-bezier(.34,1.4,.64,1)),
        box-shadow var(--t-2, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}
.filter-tab:active {
    transform: scale(.94);
}
.filter-tab.active {
    /* Slight lift on activation */
    transform: translateY(-1px);
}

/* When a period change is in flight, pulse the active tab */
.filter-tabs.is-pulsing .filter-tab.active {
    animation: tnFilterPulse .55s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
}
@keyframes tnFilterPulse {
    0%   { transform: translateY(-1px) scale(1); }
    40%  { transform: translateY(-1px) scale(1.06); }
    100% { transform: translateY(-1px) scale(1); }
}

/* KPI value: green flash on increase, red flash on decrease */
.kpi-value {
    transition: color .35s ease;
    position: relative;
}
.kpi-value.value-up    { color: var(--up); }
.kpi-value.value-down  { color: var(--down); }

/* The actual number gets a subtle scale/blur swap when it updates */
.kpi-value.value-changing {
    animation: tnValueSwap .45s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@keyframes tnValueSwap {
    0%   { opacity: .35; transform: translateY(-3px) scale(.96); filter: blur(2px); }
    60%  { opacity: 1;   transform: translateY(0)    scale(1.02); filter: blur(0); }
    100% { opacity: 1;   transform: translateY(0)    scale(1);    filter: blur(0); }
}

/* Trend pill: morph the icon and color smoothly when direction flips */
.kpi-trend {
    transition: color .3s ease, background .3s ease;
}
.kpi-trend i {
    transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
}
.kpi-trend.is-flipping i {
    animation: tnArrowFlip .45s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
}
@keyframes tnArrowFlip {
    0%   { transform: rotate(0)    scale(1); }
    50%  { transform: rotate(180deg) scale(.6); opacity: .3; }
    100% { transform: rotate(0)    scale(1);   opacity: 1; }
}

/* Period transition: fade entire panels briefly while reloading */
.is-period-changing .kpi,
.is-period-changing .panel {
    animation: tnPanelDip .5s var(--ease, cubic-bezier(.4,0,.2,1));
}
@keyframes tnPanelDip {
    0%   { opacity: 1; }
    35%  { opacity: .55; }
    100% { opacity: 1; }
}

/* Smoother shimmer (slower, subtler) */
.kpi.is-loading::after,
.panel.is-loading::after {
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
}

/* ─── Period-filter transition animations ─────────────────────
   When the user switches Today/Week/Month/Year, the JS adds
   .is-loading (shimmer) + .is-flashing (brief highlight pulse on
   updated values). Combined effect: shimmer-while-fetching →
   value flashes once when the new number arrives.
   ──────────────────────────────────────────────────────────── */

/* Pulse animation on the .kpi-value when its data-count changes */
@keyframes tnValueFlash {
    0%   { transform: translateY(4px); opacity: 0;   filter: blur(2px); }
    35%  { transform: translateY(0);   opacity: 1;   filter: blur(0); }
    65%  { color: var(--green-2); text-shadow: 0 0 12px rgba(62, 134, 101, .35); }
    100% { color: var(--text);    text-shadow: none; }
}
[data-theme="dark"] @keyframes tnValueFlash {
                        65% { color: var(--gold-3); text-shadow: 0 0 14px rgba(225, 193, 115, .4); }
                    }
.kpi-value.is-flashing {
    animation: tnValueFlash .55s var(--ease-out, cubic-bezier(.16,1,.3,1));
}

/* Brief background pulse on a panel when its content was just refreshed */
@keyframes tnPanelPulse {
    0%   { box-shadow: var(--sh-2), 0 0 0 0 rgba(62, 134, 101, 0); }
    40%  { box-shadow: var(--sh-2), 0 0 0 4px rgba(62, 134, 101, .12); }
    100% { box-shadow: var(--sh-2), 0 0 0 0 rgba(62, 134, 101, 0); }
}
.panel.is-refreshed { animation: tnPanelPulse .65s var(--ease-out, cubic-bezier(.16,1,.3,1)); }

/* Filter pill click feedback */
@keyframes tnPillClick {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.filter-tab.active.just-clicked {
    animation: tnPillClick .35s var(--ease-spring, cubic-bezier(.34,1.4,.64,1));
}

/* Whole-section slide-in stagger when period changes — children fade up */
@keyframes tnContentRefresh {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
.kpi-grid.is-refreshing > .kpi,
.tables-row.is-refreshing > .panel,
.grid-main.is-refreshing > .panel {
    animation: tnContentRefresh .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.kpi-grid.is-refreshing > .kpi:nth-child(1), .tables-row.is-refreshing > .panel:nth-child(1), .grid-main.is-refreshing > .panel:nth-child(1) { animation-delay: .00s; }
.kpi-grid.is-refreshing > .kpi:nth-child(2), .tables-row.is-refreshing > .panel:nth-child(2), .grid-main.is-refreshing > .panel:nth-child(2) { animation-delay: .04s; }
.kpi-grid.is-refreshing > .kpi:nth-child(3) { animation-delay: .08s; }
.kpi-grid.is-refreshing > .kpi:nth-child(4) { animation-delay: .12s; }
.kpi-grid.is-refreshing > .kpi:nth-child(5) { animation-delay: .16s; }
.kpi-grid.is-refreshing > .kpi:nth-child(6) { animation-delay: .20s; }

/* Donut segment update — subtle re-arc */
@keyframes tnSegPulse {
    0%   { stroke-opacity: .4; }
    100% { stroke-opacity: 1; }
}
.flow-donut svg .seg.is-flashing {
    animation: tnSegPulse .5s var(--ease-out, cubic-bezier(.16,1,.3,1));
}

/* Reduced motion: kill the showy stuff but keep value visible */
@media (prefers-reduced-motion: reduce) {
    .kpi-value.is-flashing,
    .panel.is-refreshed,
    .filter-tab.active.just-clicked,
    .kpi-grid.is-refreshing > .kpi,
    .tables-row.is-refreshing > .panel,
    .grid-main.is-refreshing > .panel,
    .flow-donut svg .seg.is-flashing { animation: none; }
}

/* ============================================================
   PRELOADER — "Global Trade Network booting up"
   Cinematic, B2B-appropriate. Layered ambient + animated map +
   letter-by-letter wordmark + cycling status + progress bar.
   ============================================================ */

/* Override the reference's basic .preloader so our advanced version takes over */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at center, var(--surface-2) 0%, var(--bg-2) 70%, var(--bg) 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .55s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    visibility .55s var(--ease-out, cubic-bezier(.16,1,.3,1));
    overflow: hidden;
    /* Disable any reference base styles we don't want */
    flex-direction: column;
}
.preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
[data-theme="dark"] .preloader {
    background: radial-gradient(ellipse at center, #0a1612 0%, var(--navy-2) 60%, #050d09 100%);
}

/* ── Layer 1: subtle dot grid ─────────────────────────────── */
.pl-grid {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle, rgba(13, 40, 24, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 0 0;
    opacity: .9;
    pointer-events: none;
    animation: tnPlGridDrift 25s linear infinite;
}
[data-theme="dark"] .pl-grid {
    background-image: radial-gradient(circle, rgba(93, 169, 130, .07) 1px, transparent 1px);
}
@keyframes tnPlGridDrift {
    from { background-position:   0   0; }
    to   { background-position: 56px 56px; }
}

/* ── Layer 2: huge soft glow behind the stage ─────────────── */
.pl-glow {
    position: absolute; inset: -15%;
    background:
        radial-gradient(circle at 50% 45%, rgba(62, 134, 101, .12) 0%, transparent 45%),
        radial-gradient(circle at 50% 45%, rgba(196, 154, 46, .10) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(20px);
    animation: tnPlGlowPulse 4.5s ease-in-out infinite;
}
@keyframes tnPlGlowPulse {
    0%, 100% { opacity: .8; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.06); }
}

/* ── Layer 3: floating particles ──────────────────────────── */
.pl-particles {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.pl-particles span {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--gold-2);
    opacity: 0;
    animation: tnPlParticle 9s ease-in-out infinite;
}
[data-theme="dark"] .pl-particles span { background: var(--gold-3); }
.pl-particles span:nth-child(1) { left:  8%; bottom: -4%; animation-delay: 0s;   animation-duration: 11s; }
.pl-particles span:nth-child(2) { left: 18%; bottom: -4%; animation-delay: 1.4s; animation-duration:  8s; background: var(--green-2); }
.pl-particles span:nth-child(3) { left: 28%; bottom: -4%; animation-delay: 2.8s; animation-duration: 10s; }
.pl-particles span:nth-child(4) { left: 41%; bottom: -4%; animation-delay: 0.6s; animation-duration: 12s; background: var(--green-3); }
.pl-particles span:nth-child(5) { left: 53%; bottom: -4%; animation-delay: 3.2s; animation-duration:  9s; }
.pl-particles span:nth-child(6) { left: 64%; bottom: -4%; animation-delay: 1.1s; animation-duration: 11s; background: var(--green-2); }
.pl-particles span:nth-child(7) { left: 75%; bottom: -4%; animation-delay: 2.3s; animation-duration: 10s; }
.pl-particles span:nth-child(8) { left: 86%; bottom: -4%; animation-delay: 0.4s; animation-duration: 13s; background: var(--gold-3); }
.pl-particles span:nth-child(9) { left:  4%; bottom: -4%; animation-delay: 4.5s; animation-duration: 11s; background: var(--green-3); }
.pl-particles span:nth-child(10){ left: 32%; bottom: -4%; animation-delay: 5.8s; animation-duration: 9s; }
.pl-particles span:nth-child(11){ left: 70%; bottom: -4%; animation-delay: 4.1s; animation-duration: 12s; background: var(--green-2); }
.pl-particles span:nth-child(12){ left: 92%; bottom: -4%; animation-delay: 2.7s; animation-duration: 10s; }
@keyframes tnPlParticle {
    0%   { transform: translateY(0) scale(.6); opacity: 0; }
    15%  { opacity: .55; }
    50%  { opacity: .95; transform: translateY(-50vh) scale(1); }
    100% { transform: translateY(-110vh) scale(.4); opacity: 0; }
}

/* ── Stage container ──────────────────────────────────────── */
.pl-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 40px 48px;
    max-width: min(720px, 92vw);
    text-align: center;
}

/* ── Brand mark with rotating accent ring ─────────────────── */
.pl-brandmark {
    position: relative;
    width: 76px; height: 76px;
    display: grid;
    place-items: center;
    animation: tnPlBrandIn .8s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes tnPlBrandIn {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}
.pl-brandmark-ring {
    position: absolute; inset: -8px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--gold-2) 60deg,
        var(--green-2) 180deg,
        transparent 220deg,
        transparent 360deg
    );
    animation: tnPlRingSpin 2.4s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 36px, #000 38px);
    mask: radial-gradient(circle, transparent 36px, #000 38px);
}
@keyframes tnPlRingSpin {
    to { transform: rotate(360deg); }
}
.pl-brandmark-inner {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 44px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--green-1) 100%);
    display: grid;
    place-items: center;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.5px;
    box-shadow:
        0 12px 36px rgba(11, 31, 18, .35),
        inset 0 1px 0 rgba(255,255,255,.08);
    z-index: 1;
}
.pl-brandmark-inner::after {
/*    content: '';*/
/*    position: absolute;*/
/*    left: 8px; right: 8px; bottom: 4px;*/
/*    height: 3px;*/
/*    background: linear-gradient(90deg, var(--gold-2), var(--gold-3));*/
/*    border-radius: 2px;*/
/*}*/

/* ── Animated world map ──────────────────────────────────── */
.pl-map {
    width: min(520px, 80vw);
    height: auto;
    margin-top: 4px;
    opacity: 0;
    animation: tnPlMapIn .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) .15s forwards;
}
@keyframes tnPlMapIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pl-map svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Continents — fade up in sequence */
.pl-continents path {
    fill: rgba(62, 134, 101, .14);
    stroke: rgba(62, 134, 101, .35);
    stroke-width: .8;
    opacity: 0;
    transform-origin: center;
    transform: translateY(6px);
    animation: tnPlContinentIn .55s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
    animation-delay: calc(.2s + var(--i, 1) * .07s);
}
[data-theme="dark"] .pl-continents path {
    fill: rgba(93, 169, 130, .12);
    stroke: rgba(93, 169, 130, .28);
}
@keyframes tnPlContinentIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Routes — draw stroke-by-stroke */
.pl-routes .pl-route {
    fill: none;
    stroke: var(--green-2);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    opacity: .85;
    animation: tnPlRouteDraw 1.4s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
    animation-delay: calc(.7s + var(--i, 1) * .14s);
}
.pl-routes .pl-route.gold {
    stroke: var(--gold-2);
    stroke-width: 1.7;
    stroke-dasharray: 400 6;
}
@keyframes tnPlRouteDraw {
    from { stroke-dashoffset: 400; opacity: 0; }
    20%  { opacity: .85; }
    to   { stroke-dashoffset: 0;   opacity: .85; }
}

/* City nodes — pulse rings */
.pl-cities g { opacity: 0; animation: tnPlCityIn .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards;
    animation-delay: calc(.6s + var(--i, 1) * .1s); }
@keyframes tnPlCityIn { to { opacity: 1; } }
.pl-cities .pl-node {
    r: 3.5;
    fill: var(--green-2);
    stroke: var(--surface);
    stroke-width: 1.5;
}
.pl-cities .pl-node.gold {
    r: 4;
    fill: var(--gold-2);
}
.pl-cities .pl-pulse {
    r: 4;
    fill: var(--green-2);
    opacity: .55;
    transform-origin: center;
    transform-box: fill-box;
    animation: tnPlNodePulse 2.2s ease-out infinite;
    animation-delay: calc(.6s + var(--i, 1) * .15s);
}
.pl-cities .pl-pulse.gold {
    fill: var(--gold-2);
}
@keyframes tnPlNodePulse {
    0%   { transform: scale(1);   opacity: .55; }
    100% { transform: scale(4.5); opacity: 0; }
}

/* ── Wordmark — letters slide up in sequence ──────────────── */
.pl-wordmark {
    display: flex;
    gap: 1px;
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -.8px;
    color: var(--text);
    line-height: 1;
    margin-top: 6px;
}
.pl-wordmark span {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    animation: tnPlLetterIn .55s var(--ease-spring, cubic-bezier(.34,1.4,.64,1)) forwards;
    animation-delay: calc(1.2s + var(--i, 1) * .045s);
}
@keyframes tnPlLetterIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Tagline ─────────────────────────────────────────────── */
.pl-tagline {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    opacity: 0;
    animation: tnPlFadeIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) 1.7s forwards;
}
@keyframes tnPlFadeIn { to { opacity: 1; } }

/* ── Status (cycling tip) ────────────────────────────────── */
.pl-status {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    margin-top: 4px;
    min-height: 18px;
    transition: opacity .25s ease;
    opacity: 0;
    animation: tnPlFadeIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) 2s forwards;
}
.pl-status.is-fading { opacity: 0 !important; transition: opacity .15s ease; }

/* ── Progress bar ────────────────────────────────────────── */
.pl-progress {
    width: 220px;
    height: 3px;
    border-radius: 2px;
    background: var(--border-soft);
    overflow: hidden;
    margin-top: 4px;
    opacity: 0;
    animation: tnPlFadeIn .5s var(--ease-out, cubic-bezier(.16,1,.3,1)) 2.1s forwards;
}
.pl-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--green-2), var(--gold-2), var(--gold-3));
    background-size: 200% 100%;
    border-radius: 2px;
    transition: width .35s var(--ease-out, cubic-bezier(.16,1,.3,1));
    animation: tnPlBarShimmer 2.5s linear infinite;
    box-shadow: 0 0 8px rgba(196, 154, 46, .4);
}
@keyframes tnPlBarShimmer {
    from { background-position:   0% 0; }
    to   { background-position: 200% 0; }
}

/* ── Reduced motion: keep everything visible, kill animations ── */
@media (prefers-reduced-motion: reduce) {
    .pl-grid, .pl-glow, .pl-particles span,
    .pl-brandmark, .pl-brandmark-ring,
    .pl-map, .pl-continents path,
    .pl-routes .pl-route, .pl-cities g, .pl-cities .pl-pulse,
    .pl-wordmark span, .pl-tagline, .pl-status, .pl-progress, .pl-progress-fill {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* Small screens: scale things down so it doesn't crowd */
@media (max-width: 480px) {
    .pl-stage { gap: 16px; padding: 24px; }
    .pl-wordmark { font-size: 24px; }
    .pl-map { width: 90vw; }
    .pl-progress { width: 60vw; }
}

/* ─── Activity feed flag emoji (used by dynamic loadActivityFeed) ─── */
.feed-meta .flag-emoji {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    margin-right: 4px;
    transform: translateY(.5px);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08));
}

/* Empty state for the live activity feed */
.panel #panel-live-activity .feed .empty,
.panel .feed .empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-3);
    font-size: 12.5px;
}

/* ─── Ticker dynamic items (rendered by initTicker) ───────────
   Each item has a category class (.tkr-inv/.tkr-rfq/.tkr-reply/.tkr-po/.tkr-deal)
   that picks an accent color for its symbol.
   Summary items (.tkr-summary) get a slightly different look — bolder symbol +
   small accent dot — so they stand out from the stream of latest events. */

.tkr-lbl {
    color: rgba(255, 255, 255, .55);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .1px;
}

/* Category accent colors on the symbol */
.tkr.tkr-inv   .tkr-sym { color: var(--gold-3); }
.tkr.tkr-rfq   .tkr-sym { color: #FCD34D; }    /* warm amber */
.tkr.tkr-reply .tkr-sym { color: #67E8F9; }    /* cyan */
.tkr.tkr-po    .tkr-sym { color: #86EFAC; }    /* mint */
.tkr.tkr-deal  .tkr-sym { color: #C4B5FD; }    /* lavender */

/* Summary items — bolder, with a leading accent dot */
.tkr.tkr-summary {
    padding-left: 14px;
    position: relative;
}
.tkr.tkr-summary::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold-2);
    transform: translateY(-50%);
    box-shadow: 0 0 8px rgba(196, 154, 46, .6);
}
.tkr.tkr-summary .tkr-sym {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}
.tkr.tkr-summary.tkr-inv::before   { background: var(--gold-3);  box-shadow: 0 0 8px rgba(225, 193, 115, .6); }
.tkr.tkr-summary.tkr-rfq::before   { background: #FCD34D;        box-shadow: 0 0 8px rgba(252, 211,  77, .55); }
.tkr.tkr-summary.tkr-reply::before { background: #67E8F9;        box-shadow: 0 0 8px rgba(103, 232, 249, .55); }
.tkr.tkr-summary.tkr-po::before    { background: #86EFAC;        box-shadow: 0 0 8px rgba(134, 239, 172, .55); }
.tkr.tkr-summary.tkr-deal::before  { background: #C4B5FD;        box-shadow: 0 0 8px rgba(196, 181, 253, .55); }