/* =========================================================
   THAWANI CRM Prototype · TSG Design System
   ========================================================= */

:root{
  /* Colours */
  --primary:#141414;
  --primary-2:#2A2A2A;
  --primary-3:#3F3F3F;
  --accent:#EF6C1F;
  --accent-2:#F58B54;
  --accent-3:#FFF4EC;
  --accent-4:#FFE9D6;

  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#FAFAFA;
  --surface-3:#F0F0F0;

  --text:#1F1F1F;
  --text-2:#4B5563;
  --muted:#6B7280;
  --muted-2:#9CA3AF;

  --line:#E5E7EB;
  --line-2:#F0F2F5;

  --ok:#10B981;
  --ok-bg:#D1FAE5;
  --warn:#F59E0B;
  --warn-bg:#FEF3C7;
  --bad:#EF4444;
  --bad-bg:#FEE2E2;
  --info:#3B82F6;
  --info-bg:#DBEAFE;

  /* Tier colours */
  --tier-platinum:#141414;
  --tier-gold:#EF6C1F;
  --tier-silver:#94A3B8;
  --tier-blue:#3B82F6;

  /* Shadows */
  --sh-1:0 1px 2px rgba(20,20,20,0.04);
  --sh-2:0 2px 6px rgba(20,20,20,0.06);
  --sh-3:0 4px 12px rgba(20,20,20,0.08);
  --sh-hover:0 4px 16px rgba(239,108,31,0.15);

  /* Radius */
  --r-sm:3px;
  --r:5px;
  --r-lg:8px;
  --r-xl:12px;

  /* Sizing */
  --sidebar-w:248px;
  --topbar-h:56px;
}

/* =========================================================
   DARK THEME OVERRIDES
   ========================================================= */
[data-theme="dark"]{
  --primary:#F5F5F5;
  --primary-2:#E5E5E5;
  --primary-3:#C7C7C7;
  --accent:#F97B32;
  --accent-2:#F58B54;
  --accent-3:rgba(239,108,31,0.16);
  --accent-4:rgba(239,108,31,0.28);
  --bg:#0A0A0A;
  --surface:#171717;
  --surface-2:#1F1F1F;
  --surface-3:#2A2A2A;
  --text:#F3F4F6;
  --text-2:#D1D5DB;
  --muted:#9CA3AF;
  --muted-2:#6B7280;
  --line:#2A2A2A;
  --line-2:#1F1F1F;
  --ok:#34D399;
  --ok-bg:rgba(52,211,153,0.14);
  --warn:#FBBF24;
  --warn-bg:rgba(251,191,36,0.14);
  --bad:#F87171;
  --bad-bg:rgba(248,113,113,0.14);
  --info:#60A5FA;
  --info-bg:rgba(96,165,250,0.14);
  --sh-1:0 1px 2px rgba(0,0,0,0.35);
  --sh-2:0 2px 6px rgba(0,0,0,0.45);
  --sh-3:0 4px 16px rgba(0,0,0,0.55);
  --sh-hover:0 4px 20px rgba(239,108,31,0.28);
}
[data-theme="dark"] .sidebar{background:#080808;border-right:1px solid #1A1A1A;}
[data-theme="dark"] .brand,[data-theme="dark"] .tenant,[data-theme="dark"] .sidebar-foot{border-color:rgba(255,255,255,0.05);}
[data-theme="dark"] .topbar{background:#131313;border-bottom-color:#242424;}
[data-theme="dark"] .search{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .search:focus-within{background:#242424;}
[data-theme="dark"] kbd{background:#2A2A2A;border-color:#333;color:var(--muted);}
[data-theme="dark"] .btn-ghost{background:#1F1F1F;border-color:#2A2A2A;color:var(--text);}
[data-theme="dark"] .btn-ghost:hover{background:#2A2A2A;border-color:#3A3A3A;}
[data-theme="dark"] .btn-ghost.active{background:var(--accent);color:white;border-color:var(--accent);}
[data-theme="dark"] .btn-primary{background:var(--accent);border-color:var(--accent);color:white;}
[data-theme="dark"] .btn-primary:hover{background:#D95C15;border-color:#D95C15;}
[data-theme="dark"] .btn-group{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .btn-group .btn-ghost{background:transparent;color:var(--text);border:0;}
[data-theme="dark"] .btn-group .btn-ghost:hover:not(.active){background:#2A2A2A;color:#F3F4F6;}
[data-theme="dark"] .btn-group .btn-ghost.active{background:var(--accent);color:white;border-color:var(--accent);}
[data-theme="dark"] .btn-group .btn-ghost+.btn-ghost{border-left:1px solid #2A2A2A;}
[data-theme="dark"] .chip{background:#1F1F1F;color:var(--text-2);border-color:#2A2A2A;}
[data-theme="dark"] .chip.active{background:var(--accent);color:white;border-color:var(--accent);}
[data-theme="dark"] .card-lg,[data-theme="dark"] .c360-list,[data-theme="dark"] .c360-detail,[data-theme="dark"] .js-wrap,[data-theme="dark"] .ly-wrap{background:var(--surface);border-color:var(--line);}
[data-theme="dark"] .cl-hdr,[data-theme="dark"] .c360-list-hdr{border-color:var(--line-2);}
[data-theme="dark"] table.data th{background:#1F1F1F;color:var(--muted);border-color:var(--line);}
[data-theme="dark"] table.data td{border-color:var(--line-2);color:var(--text);}
[data-theme="dark"] table.data tbody tr:hover{background:rgba(239,108,31,0.08);}
[data-theme="dark"] .input,[data-theme="dark"] .jp-input{background:#1F1F1F;border-color:#2A2A2A;color:var(--text);}
[data-theme="dark"] .input:focus,[data-theme="dark"] .jp-input:focus{background:#242424;border-color:var(--accent);}
[data-theme="dark"] .search input,[data-theme="dark"] .search input::placeholder{color:var(--text);}
[data-theme="dark"] .search input::placeholder{color:var(--muted-2);}
[data-theme="dark"] .btn-icon:hover{background:#2A2A2A;}
[data-theme="dark"] .c360-row{border-color:var(--line-2);}
[data-theme="dark"] .c360-row:hover{background:#1F1F1F;}
[data-theme="dark"] .c360-row.active{background:rgba(239,108,31,0.12);border-left-color:var(--accent);}
[data-theme="dark"] .c360-filters{border-color:var(--line-2);}
[data-theme="dark"] .cd-stats,[data-theme="dark"] .cd-body>div>.cd-section{border-color:var(--line-2);}
[data-theme="dark"] .cd-stats{border-color:var(--line-2);}
[data-theme="dark"] .mini-card{background:#1F1F1F;border-color:var(--line-2);}
/* Keep customer hero dark in dark mode (var(--primary) flips to light, breaks contrast) */
[data-theme="dark"] .cd-hero{background:linear-gradient(135deg,#141414 0%,#2A2A2A 100%);}
[data-theme="dark"] .cd-hero .cd-name{color:#FFFFFF;}
[data-theme="dark"] .cd-hero .cd-sub b{color:#FFFFFF;}
[data-theme="dark"] .cd-hero-actions button{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.18);color:#FFFFFF;}
[data-theme="dark"] .cd-hero-actions button:hover{background:rgba(239,108,31,0.3);border-color:var(--accent);}
[data-theme="dark"] .mc-title{color:#F3F4F6;}
[data-theme="dark"] .mc-sub{color:var(--muted);}
[data-theme="dark"] .tl-item::before{background:#242424;}
[data-theme="dark"] .nbo{background:rgba(239,108,31,0.10);border-color:var(--accent-4);}
[data-theme="dark"] .nbo-desc{color:var(--text-2);}
[data-theme="dark"] .nbo-cta .ghost{background:transparent;border-color:var(--accent-4);color:var(--accent-2);}
[data-theme="dark"] .js-hdr{border-color:var(--line);}
[data-theme="dark"] .js-stats{border-color:var(--line-2);}
[data-theme="dark"] .js-palette{background:#131313;border-color:var(--line);}
[data-theme="dark"] .js-node-item{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .js-node-item:hover{border-color:var(--accent);}
[data-theme="dark"] .jni-name{color:#F3F4F6;}
/* Action icons use var(--primary) which flips to light in dark mode → white-on-white.
   Force a dark background so the white SVG strokes remain visible. */
[data-theme="dark"] .jni-icon.action{background:#3A3A3A;}
[data-theme="dark"] .jni-icon.action svg{color:#F3F4F6;}
[data-theme="dark"] .js-canvas-toolbar{background:#131313;border-color:var(--line);}
[data-theme="dark"] .js-canvas{background-color:#0F0F0F;background-image:linear-gradient(#1A1A1A 1px,transparent 1px),linear-gradient(90deg,#1A1A1A 1px,transparent 1px);}
[data-theme="dark"] .js-props{background:#131313;border-color:var(--line);}
[data-theme="dark"] .jp-hdr,[data-theme="dark"] .cd-section-hdr h3{border-color:var(--line-2);}
[data-theme="dark"] .jp-preview{background:var(--surface);border-color:var(--line);}
[data-theme="dark"] .jp-preview .pp-body{background:rgba(239,108,31,0.10);}
[data-theme="dark"] .ly-tabs{background:#131313;border-color:var(--line);}
[data-theme="dark"] .ly-tab:hover{color:var(--text);}
[data-theme="dark"] .ly-red-stat{background:#1F1F1F;}
[data-theme="dark"] .cat-item{background:var(--surface);border-color:var(--line);}
[data-theme="dark"] .cat-image{background:linear-gradient(135deg,#2A2A2A 0%,#1F1F1F 100%);}
[data-theme="dark"] .seg-card{background:#1F1F1F;border-color:var(--line);}
[data-theme="dark"] .seg-card:hover{background:rgba(239,108,31,0.08);}
[data-theme="dark"] .ma-merch-table th,[data-theme="dark"] .ma-merch-table td{border-color:var(--line-2);color:var(--text);}
[data-theme="dark"] .ma-merch-table th{background:#1F1F1F;color:var(--muted);}
[data-theme="dark"] .ed-kpi{background:var(--surface);border-color:var(--line);}
[data-theme="dark"] .ed-feed-item{border-color:var(--line-2);}
[data-theme="dark"] .ef-title b{color:var(--primary);}
[data-theme="dark"] .callout{background:linear-gradient(135deg,rgba(239,108,31,0.10) 0%,rgba(239,108,31,0.05) 100%);border-color:var(--accent);}
[data-theme="dark"] .callout p{color:var(--text);}
[data-theme="dark"] .callout .k{color:var(--accent);}
[data-theme="dark"] .ma-donut-center .v,[data-theme="dark"] .ma-donut-center div{color:var(--primary);}
[data-theme="dark"] .mcc-name{color:var(--text);}
[data-theme="dark"] .mcc-val{color:var(--primary);}
[data-theme="dark"] table.data td b,[data-theme="dark"] .m-name{color:var(--primary);}
[data-theme="dark"] .phone{background:#0A0A0A;box-shadow:0 20px 60px rgba(239,108,31,0.15);}
[data-theme="dark"] .phone-screen{background:#131313;}
[data-theme="dark"] .app-offer{background:#1F1F1F;}
[data-theme="dark"] .app-offer-title{color:#F3F4F6;}
[data-theme="dark"] .app-section h4{color:#F3F4F6;}
/* Keep the phone header dark in dark mode — var(--primary) would flip to light and break contrast */
[data-theme="dark"] .app-hdr{background:linear-gradient(135deg,#141414 0%,#2A2A2A 100%);}
[data-theme="dark"] .app-hdr .app-hi{color:rgba(255,255,255,0.65);}
[data-theme="dark"] .app-hdr .app-name{color:#FFFFFF;}
[data-theme="dark"] .app-hdr .app-pts-label{color:rgba(255,255,255,0.65);}
[data-theme="dark"] .app-hdr .app-pts-v{color:#FFFFFF;}
[data-theme="dark"] .phone-status{color:#FFFFFF;}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background 0.2s,color 0.2s;}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;color:var(--primary);letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;cursor:pointer;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
kbd{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--surface-3);border:1px solid var(--line);border-radius:3px;padding:1px 5px;color:var(--muted);}
::selection{background:var(--accent-3);color:var(--primary);}

/* =========================================================
   APP SHELL
   ========================================================= */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh;}

/* Sidebar */
.sidebar{background:var(--primary);color:white;display:flex;flex-direction:column;overflow:hidden;}
.brand{padding:20px 20px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,0.06);}
.brand-mark{width:32px;height:32px;background:var(--accent);border-radius:6px;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.brand-mark::after{content:"";width:14px;height:14px;background:white;clip-path:polygon(50% 0,100% 100%,0 100%);}
.brand-word{min-width:0;}
.brand-word .w1{font-weight:800;font-size:12px;color:white;letter-spacing:0.02em;line-height:1;}
.brand-word .w1 .hl{color:var(--accent);}
.brand-word .tag{font-size:7.5px;color:var(--accent);letter-spacing:0.22em;line-height:1;margin-top:3px;font-weight:500;}

.tenant{padding:12px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,0.06);}
.t-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:800;color:white;font-size:14px;flex-shrink:0;}
.t-info{min-width:0;flex:1;}
.t-name{font-weight:700;font-size:13px;color:white;letter-spacing:0.02em;}
.t-env{font-size:10px;color:rgba(255,255,255,0.5);margin-top:1px;letter-spacing:0.02em;}

.nav{flex:1;overflow-y:auto;padding:14px 12px;}
.nav-group{margin-bottom:16px;}
.nav-group-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.12em;padding:0 10px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:5px;color:rgba(255,255,255,0.75);font-size:13px;font-weight:500;margin-bottom:1px;transition:all 0.15s;position:relative;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:0.85;}
.nav-item:hover{background:rgba(255,255,255,0.05);color:white;}
.nav-item.active{background:rgba(239,108,31,0.15);color:var(--accent-2);}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--accent);border-radius:0 3px 3px 0;}
.nav-item.disabled{opacity:0.35;cursor:not-allowed;}
.nav-item.disabled:hover{background:transparent;color:rgba(255,255,255,0.75);}

.sidebar-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,0.06);}
.foot-user{display:flex;align-items:center;gap:10px;padding:6px 0;}
.fu-avatar{width:32px;height:32px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;flex-shrink:0;}
.fu-name{font-size:12px;font-weight:600;color:white;}
.fu-role{font-size:10px;color:rgba(255,255,255,0.5);}
.foot-note{font-size:9px;color:rgba(255,255,255,0.35);letter-spacing:0.04em;margin-top:8px;text-align:center;}

/* Main */
.main{display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}

/* Topbar */
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;}
.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;}
.crumb-label{font-weight:700;color:var(--primary);}
.crumb-sep{color:var(--muted-2);}
.crumb-sub{color:var(--muted);font-weight:400;}

.topbar-actions{display:flex;align-items:center;gap:8px;}
.search{position:relative;display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:0 10px;width:360px;transition:all 0.15s;}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-3);background:white;}
.search svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.search input{flex:1;border:0;background:transparent;padding:8px;font-size:13px;outline:none;color:var(--text);}
.search input::placeholder{color:var(--muted-2);}
.search kbd{margin-left:6px;}

.btn-icon{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative;transition:all 0.15s;}
.btn-icon:hover{background:var(--surface-3);color:var(--primary);}
.btn-icon svg{width:17px;height:17px;}
.btn-icon .dot{position:absolute;top:8px;right:9px;width:6px;height:6px;background:var(--accent);border-radius:50%;border:1.5px solid white;}

.user-menu{display:flex;align-items:center;padding-left:8px;border-left:1px solid var(--line);margin-left:2px;}
.um-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:var(--accent-2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;}

/* Screen wrap */
.screen-wrap{flex:1;overflow:auto;position:relative;}
.screen{display:none;padding:20px;min-height:100%;box-sizing:border-box;}
.screen.active{display:block;}

/* =========================================================
   COMMON COMPONENTS
   ========================================================= */
.btn-primary{background:var(--primary);color:white;padding:8px 16px;border-radius:5px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s;border:1px solid var(--primary);}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--sh-hover);}
.btn-primary svg{width:14px;height:14px;}

.btn-accent{background:var(--accent);color:white;padding:8px 16px;border-radius:5px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s;}
.btn-accent:hover{background:#D95C15;transform:translateY(-1px);box-shadow:var(--sh-hover);}

.btn-ghost{background:transparent;color:var(--text);padding:7px 14px;border-radius:5px;font-size:13px;font-weight:500;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;transition:all 0.15s;}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--muted-2);}
.btn-ghost svg{width:14px;height:14px;}
.btn-ghost.sm{padding:5px 10px;font-size:11px;}
.btn-ghost.active{background:var(--primary);color:white;border-color:var(--primary);}

.btn-group{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:white;}
.btn-group .btn-ghost{border:none;border-radius:0;padding:6px 12px;}
.btn-group .btn-ghost + .btn-ghost{border-left:1px solid var(--line);}
.btn-group .btn-ghost.active{background:var(--primary);color:white;}

.btn-icon-sm{width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all 0.15s;}
.btn-icon-sm:hover{background:var(--surface-3);color:var(--primary);}
.btn-icon-sm svg{width:14px;height:14px;}

.input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:5px;font-size:13px;background:white;transition:all 0.15s;outline:none;}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-3);}

.pill{display:inline-block;padding:2px 8px;background:var(--surface-3);color:var(--muted);border-radius:10px;font-size:11px;font-weight:600;}
.pill.accent{background:var(--accent-3);color:var(--accent);}
.pill.ok{background:var(--ok-bg);color:var(--ok);}
.pill.warn{background:var(--warn-bg);color:var(--warn);}
.pill.bad{background:var(--bad-bg);color:var(--bad);}
.pill.info{background:var(--info-bg);color:var(--info);}

.chip{padding:5px 12px;background:white;color:var(--text-2);border:1px solid var(--line);border-radius:14px;font-size:12px;font-weight:500;transition:all 0.15s;}
.chip:hover{border-color:var(--muted-2);}
.chip.active{background:var(--primary);color:white;border-color:var(--primary);}

.tier-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:11px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;}
.tier-badge.platinum{background:var(--tier-platinum);color:var(--accent-2);}
.tier-badge.gold{background:var(--tier-gold);color:white;}
.tier-badge.silver{background:var(--tier-silver);color:white;}
.tier-badge.blue{background:var(--tier-blue);color:white;}
.tier-badge::before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%;}

/* Card */
.card-lg{background:white;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;}
.cl-hdr{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.cl-hdr h3{font-size:14px;font-weight:700;color:var(--primary);}
.cl-hdr .cl-sub{font-size:11px;color:var(--muted);}
.cl-body{padding:18px;flex:1;overflow:auto;}
.card-lg.span-2{grid-column:span 2;}

/* Tables */
table.data{width:100%;border-collapse:collapse;font-size:12px;}
table.data th{text-align:left;padding:8px 12px;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid var(--line);}
table.data td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle;color:var(--text);}
table.data tbody tr{transition:background 0.1s;}
table.data tbody tr:hover{background:var(--accent-3);}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace;}

/* Toast — always dark bg / white fg so it's readable in both themes */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{background:#1E1E1E;color:#FFFFFF;padding:12px 18px;border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.25);font-size:13px;font-weight:500;pointer-events:all;border-left:3px solid var(--accent);border-top:1px solid rgba(255,255,255,0.05);min-width:280px;animation:slide-in 0.25s ease;letter-spacing:0.01em;}
[data-theme="dark"] .toast{background:#2A2A2A;border-top-color:rgba(255,255,255,0.08);box-shadow:0 8px 24px rgba(0,0,0,0.6),0 2px 8px rgba(0,0,0,0.4);}
@keyframes slide-in{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* =========================================================
   CUSTOMER 360
   ========================================================= */
.c360{display:grid;grid-template-columns:360px 1fr;gap:16px;height:calc(100vh - var(--topbar-h) - 40px);}
.c360-list{background:white;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);}
.c360-list-hdr{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-2);}
.lh-title{font-weight:700;font-size:14px;color:var(--primary);display:flex;align-items:center;gap:8px;}
.c360-filters{padding:12px 16px;border-bottom:1px solid var(--line-2);}
.c360-filters .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.c360-rows{flex:1;overflow-y:auto;}
.c360-row{padding:12px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;display:flex;align-items:center;gap:10px;transition:all 0.15s;}
.c360-row:hover{background:var(--surface-2);}
.c360-row.active{background:var(--accent-3);border-left:3px solid var(--accent);padding-left:13px;}
.c360-row .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary-3) 0%,var(--primary-2) 100%);color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;}
.c360-row .info{flex:1;min-width:0;}
.c360-row .name{font-weight:600;font-size:13px;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.c360-row .meta{font-size:10px;color:var(--muted);margin-top:1px;display:flex;gap:6px;align-items:center;}
.c360-row .rside{text-align:right;flex-shrink:0;}
.c360-row .pts{font-size:11px;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace;}
.c360-row .last{font-size:9px;color:var(--muted-2);margin-top:2px;}

/* Customer detail */
.c360-detail{background:white;border:1px solid var(--line);border-radius:var(--r-lg);overflow-y:auto;box-shadow:var(--sh-1);}
.cd-hero{padding:20px 24px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:white;position:relative;overflow:hidden;}
.cd-hero::after{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(239,108,31,0.25) 0%,transparent 70%);pointer-events:none;}
.cd-hero-row{display:flex;align-items:center;gap:16px;position:relative;z-index:2;}
.cd-avatar-lg{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.08);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:white;flex-shrink:0;}
.cd-hero-info{flex:1;min-width:0;}
.cd-name{font-size:22px;font-weight:800;color:white;letter-spacing:-0.02em;line-height:1.1;}
.cd-sub{display:flex;gap:14px;font-size:11px;color:rgba(255,255,255,0.7);margin-top:6px;flex-wrap:wrap;}
.cd-sub span b{color:white;font-weight:600;}
.cd-hero-badges{margin-top:14px;padding-left:80px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;position:relative;z-index:2;}
.cd-hero-badges .pill{white-space:nowrap;padding:4px 10px;font-size:11px;}
.cd-hero-badges .tier-badge{margin-right:2px;}
.cd-hero-actions{display:flex;gap:6px;flex-shrink:0;}
.cd-hero-actions button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:white;padding:6px 12px;border-radius:4px;font-size:11px;font-weight:500;transition:all 0.15s;}
.cd-hero-actions button:hover{background:rgba(239,108,31,0.3);border-color:var(--accent);}

.cd-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 24px;border-bottom:1px solid var(--line-2);gap:16px;}
.cd-stat .v{font-size:20px;font-weight:800;color:var(--primary);letter-spacing:-0.02em;line-height:1;font-family:'JetBrains Mono',monospace;}
.cd-stat .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-top:5px;}
.cd-stat .s{font-size:10px;color:var(--text-2);margin-top:2px;}
.cd-stat .s.up{color:var(--ok);}
.cd-stat .s.down{color:var(--bad);}

.cd-body{padding:20px 24px;display:block;height:auto;min-height:0;}

/* Horizontal loyalty strip at top — full-width, compact */
.cd-loyalty-strip{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:20px;align-items:start;}
.cd-loyalty-strip .ly-widget{margin:0;}
.cd-loyalty-strip .nbo{margin:0;}

/* Full-width timeline — force natural content height, no stretching */
.cd-timeline-full{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line-2);display:block;height:auto !important;min-height:0 !important;}
[data-theme="dark"] .cd-timeline-full{border-bottom-color:var(--line-2);}

.cd-supp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start;}
.cd-supp-grid .cd-section{margin:0;}
.cd-supp-grid .cd-section-hdr{margin-bottom:8px;}
.cd-supp-grid .mini-card{padding:9px 10px;gap:8px;}
.cd-supp-grid .mc-title{font-size:11.5px;line-height:1.25;}
.cd-supp-grid .mc-sub{font-size:9.5px;line-height:1.35;margin-top:2px;}
[data-theme="dark"] .cd-supp-grid{border-top-color:var(--line-2);}

.cd-section{margin-bottom:20px;}
.cd-section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cd-section-hdr h3{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.08em;}
.cd-section-hdr .see-all{font-size:11px;color:var(--accent);font-weight:600;}

/* Timeline — force tight stacking, no growing */
.timeline{position:relative;padding-left:22px;display:block;height:auto !important;min-height:0 !important;}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line);}
.tl-item{position:relative;padding-bottom:14px;margin:0;display:block;height:auto !important;min-height:0 !important;}
.tl-item::before{content:"";position:absolute;left:-18px;top:6px;width:10px;height:10px;border-radius:50%;background:white;border:2px solid var(--muted-2);}
.tl-item.txn::before{border-color:var(--ok);background:white;}
.tl-item.campaign::before{border-color:var(--accent);}
.tl-item.loyalty::before{border-color:var(--tier-gold);}
.tl-item.app::before{border-color:var(--info);}
.tl-hdr{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.tl-title{font-size:12px;font-weight:600;color:var(--primary);}
.tl-time{font-size:10px;color:var(--muted);white-space:nowrap;font-family:'JetBrains Mono',monospace;}
.tl-desc{font-size:11px;color:var(--text-2);margin-top:2px;line-height:1.4;}
.tl-amount{font-family:'JetBrains Mono',monospace;font-weight:600;}

/* Loyalty widget */
.ly-widget{background:linear-gradient(135deg,#1F1F1F 0%,#141414 100%);color:white;padding:18px;border-radius:var(--r);position:relative;overflow:hidden;}
.ly-widget::after{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;background:radial-gradient(circle,rgba(239,108,31,0.3) 0%,transparent 70%);}
.ly-w-hdr{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2;}
.ly-w-label{font-size:10px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;}
.ly-w-pts{font-size:28px;font-weight:800;color:white;font-family:'JetBrains Mono',monospace;letter-spacing:-0.02em;line-height:1;margin-top:4px;}
.ly-w-cur{font-size:11px;color:var(--accent-2);margin-top:2px;font-family:'JetBrains Mono',monospace;}
.ly-w-progress{margin-top:14px;position:relative;z-index:2;}
.ly-w-progress-label{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,0.7);margin-bottom:5px;}
.ly-w-bar{height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;}
.ly-w-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);border-radius:3px;}

/* Next best offer */
.nbo{background:var(--accent-3);border:1px solid var(--accent-4);padding:14px;border-radius:var(--r);margin-top:14px;}
.nbo-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.nbo-label{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;}
.nbo-score{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.nbo-title{font-size:13px;font-weight:700;color:var(--primary);margin-bottom:4px;}
.nbo-desc{font-size:11px;color:var(--text-2);line-height:1.4;}
.nbo-cta{margin-top:10px;display:flex;gap:6px;}
.nbo-cta button{padding:5px 12px;font-size:11px;border-radius:4px;font-weight:600;}
.nbo-cta .primary{background:var(--accent);color:white;}
.nbo-cta .ghost{background:transparent;border:1px solid var(--accent-4);color:var(--accent);}

/* Cards & campaigns in profile */
.mini-card{padding:10px 12px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
.mc-title{font-size:12px;font-weight:600;color:var(--primary);}
.mc-sub{font-size:10px;color:var(--muted);margin-top:2px;}

/* =========================================================
   JOURNEY STUDIO
   ========================================================= */
.js-wrap{background:white;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:calc(100vh - var(--topbar-h) - 40px);display:flex;flex-direction:column;box-shadow:var(--sh-1);}
.js-hdr{padding:16px 20px;border-bottom:1px solid var(--line);}
.js-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;}
.js-eyebrow{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em;font-weight:600;}
.js-title{font-size:20px;font-weight:800;color:var(--primary);margin:2px 0;letter-spacing:-0.02em;outline:none;border-bottom:2px solid transparent;padding:2px 0;}
.js-title:focus{border-bottom-color:var(--accent);}
.js-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:10px;margin-top:2px;}
.tag-live{color:var(--ok);font-weight:600;}
.js-actions{display:flex;gap:6px;flex-shrink:0;}

.js-stats{display:flex;gap:24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);}
.js-stat{}
.js-stat .v{font-size:18px;font-weight:800;color:var(--primary);font-family:'JetBrains Mono',monospace;letter-spacing:-0.02em;line-height:1;}
.js-stat .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-top:4px;display:block;}

.js-body{flex:1;display:grid;grid-template-columns:220px 1fr 280px;overflow:hidden;}

.js-palette{border-right:1px solid var(--line);background:var(--surface-2);overflow-y:auto;padding:12px 0;}
.js-palette-hdr{padding:6px 16px 12px;font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.08em;}
.js-palette-section{padding:12px 16px 6px;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;}
.js-node-item{margin:0 10px 4px;padding:8px 10px;background:white;border:1px solid var(--line);border-radius:5px;display:flex;align-items:center;gap:9px;cursor:grab;transition:all 0.12s;}
.js-node-item:hover{border-color:var(--accent);box-shadow:var(--sh-1);transform:translateX(2px);}
.jni-icon{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.jni-icon svg{width:14px;height:14px;color:white;}
.jni-icon.trigger{background:var(--accent);}
.jni-icon.action{background:var(--primary);}
.jni-icon.flow{background:var(--info);}
.jni-info{min-width:0;}
.jni-name{font-size:11px;font-weight:600;color:var(--primary);}
.jni-desc{font-size:9.5px;color:var(--muted);margin-top:1px;}

.js-canvas-wrap{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(var(--surface-2) 1px,transparent 1px),linear-gradient(90deg,var(--surface-2) 1px,transparent 1px);background-size:20px 20px;background-color:#FBFBFC;}
.js-canvas-toolbar{padding:6px 10px;background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.tb-left{display:flex;align-items:center;gap:2px;}
.tb-left .sep{width:1px;height:16px;background:var(--line);margin:0 4px;}
.tb-right{display:flex;align-items:center;gap:6px;}
.minimap-label{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.js-canvas{flex:1;overflow:auto;position:relative;}
.js-canvas svg{width:100%;height:100%;min-width:900px;min-height:500px;}

/* Canvas nodes */
.jn-node{cursor:pointer;transition:filter 0.15s;}
.jn-node:hover{filter:brightness(1.05) drop-shadow(0 2px 6px rgba(239,108,31,0.3));}
.jn-node.selected .jn-rect{stroke:var(--accent);stroke-width:2.5;}

.js-props{border-left:1px solid var(--line);background:var(--surface-2);overflow-y:auto;}
.jp-hdr{padding:14px 16px;font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.08em;border-bottom:1px solid var(--line-2);}
.jp-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5;}
.jp-empty svg{width:32px;height:32px;color:var(--muted-2);margin-bottom:12px;opacity:0.6;}
.jp-form{padding:16px;}
.jp-field{margin-bottom:14px;}
.jp-label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px;display:block;}
.jp-input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:5px;font-size:12.5px;background:white;outline:none;color:var(--text);font-family:inherit;transition:all 0.15s;line-height:1.4;box-sizing:border-box;}
.jp-input:hover:not(:focus):not(:disabled){border-color:var(--muted-2);}
.jp-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-3);background:white;}
.jp-input:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed;}
.jp-input::placeholder{color:var(--muted-2);}

/* Styled native <select> to match text inputs
   Every state repeats background-repeat/size/position explicitly to avoid
   browsers tiling the chevron across the whole width. */
select.jp-input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:white;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20stroke%3D%27%236B7280%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:11px 7px !important;
  padding-right:34px;cursor:pointer;text-decoration:none;
}
select.jp-input:hover:not(:focus){
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20stroke%3D%27%23141414%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:11px 7px !important;
}
select.jp-input:focus{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20stroke%3D%27%23EF6C1F%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:11px 7px !important;
}
select.jp-input option{background:white;color:var(--text);padding:8px;font-size:13px;}
[data-theme="dark"] select.jp-input{
  background-color:#1F1F1F;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20stroke%3D%27%239CA3AF%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:11px 7px !important;
}
[data-theme="dark"] select.jp-input option{background:#1F1F1F;color:var(--text);}
[data-theme="dark"] select.jp-input:hover:not(:focus){
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20stroke%3D%27%23F3F4F6%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:11px 7px !important;
}
[data-theme="dark"] select.jp-input:focus{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M1%201.5L6%206.5L11%201.5%27%20stroke%3D%27%23F97B32%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:11px 7px !important;
}

/* Hide native number-input spinner buttons */
input[type="number"].jp-input{-moz-appearance:textfield;}
input[type="number"].jp-input::-webkit-outer-spin-button,
input[type="number"].jp-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Number input with custom stepper */
.num-input-wrap{position:relative;display:flex;align-items:stretch;border:1px solid var(--line);border-radius:5px;background:white;overflow:hidden;transition:all 0.15s;}
.num-input-wrap:hover{border-color:var(--muted-2);}
.num-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-3);}
.num-input-wrap input.jp-input{border:0;background:transparent;padding-right:6px;box-shadow:none !important;flex:1;min-width:0;}
.num-input-wrap input.jp-input:focus{box-shadow:none !important;background:transparent;}
.num-btns{display:flex;flex-direction:column;border-left:1px solid var(--line);}
.num-btn{background:var(--surface-2);border:0;color:var(--muted);cursor:pointer;width:22px;padding:0;font-size:10px;line-height:1;transition:all 0.12s;display:flex;align-items:center;justify-content:center;font-family:inherit;font-weight:700;}
.num-btn:hover{background:var(--accent-3);color:var(--accent);}
.num-btn.up{border-bottom:1px solid var(--line);}
[data-theme="dark"] .num-input-wrap{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .num-input-wrap:focus-within{border-color:var(--accent);background:#242424;}
[data-theme="dark"] .num-btns{border-left-color:#2A2A2A;}
[data-theme="dark"] .num-btn{background:#242424;color:var(--muted);}
[data-theme="dark"] .num-btn:hover{background:rgba(239,108,31,0.15);color:var(--accent);}
[data-theme="dark"] .num-btn.up{border-bottom-color:#2A2A2A;}
.jp-preview{background:white;border:1px solid var(--line);border-radius:6px;padding:12px;margin-top:8px;}
.jp-preview .pp-hdr{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;font-weight:600;}
.jp-preview .pp-body{font-size:11px;color:var(--text);line-height:1.5;padding:10px;background:var(--accent-3);border-radius:5px;border-left:3px solid var(--accent);}

/* =========================================================
   LOYALTY CONSOLE
   ========================================================= */
.ly-wrap{background:white;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);min-height:calc(100vh - var(--topbar-h) - 40px);}
.ly-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--surface-2);padding:0 20px;}
.ly-tab{padding:14px 16px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;transition:all 0.15s;}
.ly-tab:hover{color:var(--text);}
.ly-tab.active{color:var(--primary);border-bottom-color:var(--accent);}
.ly-tab-pane{display:none;padding:24px;}
.ly-tab-pane.active{display:block;}

/* Programme pane */
.ly-prog{}
.ly-prog-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.ly-prog-stat{background:var(--surface-2);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);padding:14px 16px;transition:all 0.15s;}
.ly-prog-stat:hover{border-top-color:var(--accent-2);transform:translateY(-2px);box-shadow:var(--sh-2);}
.ly-prog-stat .lps-v{font-size:22px;font-weight:800;color:var(--primary);font-family:'JetBrains Mono',monospace;letter-spacing:-0.02em;line-height:1;}
.ly-prog-stat .lps-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:6px;font-weight:600;}
.ly-prog-stat .lps-s{font-size:10.5px;color:var(--text-2);margin-top:4px;}
.ly-prog-stat .lps-s.up{color:var(--ok);}
.ly-prog-stat .lps-s.down{color:var(--bad);}

.ly-prog-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start;}

.ly-section-hdr{margin-bottom:6px;}
.ly-section-hdr h3{font-size:14px;font-weight:700;color:var(--primary);}
.ly-section-hdr .sub{font-size:11px;color:var(--muted);margin-top:2px;}

/* Redesigned pyramid — no clip-path, stacked step cards */
.tier-pyramid{display:flex;flex-direction:column;align-items:center;gap:8px;margin:16px 0 20px;}
.tier-card{border-radius:8px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;transition:transform 0.18s,box-shadow 0.18s;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.05);gap:16px;position:relative;overflow:hidden;}
.tier-card::after{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(255,255,255,0.18) 0%,transparent 70%);pointer-events:none;}
.tier-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.12);}
.tier-card .tc-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1;position:relative;z-index:2;}
.tier-card .tc-medal{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;flex-shrink:0;}
.tier-card .tc-copy{min-width:0;}
.tier-card .tc-name{font-size:13px;font-weight:800;letter-spacing:0.14em;line-height:1;}
.tier-card .tc-benefits{font-size:11.5px;opacity:0.9;margin-top:5px;font-weight:500;line-height:1.35;}
.tier-card .tc-right{text-align:right;flex-shrink:0;position:relative;z-index:2;}
.tier-card .tc-spend{font-size:14px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-0.01em;line-height:1;}
.tier-card .tc-members{font-size:10.5px;opacity:0.8;margin-top:4px;font-family:'JetBrains Mono',monospace;font-weight:500;}
.tier-card.platinum{background:linear-gradient(135deg,#141414 0%,#2A2A2A 100%);color:var(--accent-2);width:58%;border:1px solid rgba(239,108,31,0.35);}
.tier-card.platinum .tc-medal{background:rgba(239,108,31,0.2);border-color:rgba(239,108,31,0.4);color:var(--accent-2);}
.tier-card.gold{background:linear-gradient(135deg,#D95C15 0%,#F58B54 100%);color:white;width:72%;}
.tier-card.silver{background:linear-gradient(135deg,#8497AC 0%,#B8C4D0 100%);color:#141414;width:86%;}
.tier-card.silver .tc-medal{background:rgba(20,20,20,0.15);border-color:rgba(20,20,20,0.25);color:#141414;}
.tier-card.blue{background:linear-gradient(135deg,#2563EB 0%,#60A5FA 100%);color:white;width:100%;}

/* Tier distribution bar */
.tier-dist{margin-top:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;}
.tier-dist-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.tier-dist-hdr h4{font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.08em;}
.tier-dist-hdr .total{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.tier-dist-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--surface-3);}
.td-seg{height:100%;transition:filter 0.15s;position:relative;}
.td-seg:hover{filter:brightness(1.1);}
.td-seg.platinum{background:linear-gradient(90deg,#141414 0%,#2A2A2A 100%);}
.td-seg.gold{background:linear-gradient(90deg,#D95C15 0%,#F58B54 100%);}
.td-seg.silver{background:linear-gradient(90deg,#8497AC 0%,#B8C4D0 100%);}
.td-seg.blue{background:linear-gradient(90deg,#2563EB 0%,#60A5FA 100%);}
.tier-dist-legend{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap;font-size:10.5px;}
.tdl-item{display:flex;align-items:center;gap:6px;}
.tdl-sw{width:10px;height:10px;border-radius:2px;}
.tdl-sw.platinum{background:#141414;}
.tdl-sw.gold{background:#EF6C1F;}
.tdl-sw.silver{background:#94A3B8;}
.tdl-sw.blue{background:#3B82F6;}
.tdl-name{color:var(--text);font-weight:500;}
.tdl-pct{color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:600;}

/* Earn rules — richer cards */
.earn-rules{display:flex;flex-direction:column;gap:6px;}
.er-item{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);transition:all 0.15s;}
.er-item:hover{border-color:var(--accent-4);background:var(--accent-3);}
.er-icon{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--accent-3) 0%,var(--accent-4) 100%);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:var(--accent);}
.er-body{flex:1;min-width:0;}
.er-name{font-size:12.5px;font-weight:600;color:var(--primary);line-height:1.2;}
.er-desc{font-size:10.5px;color:var(--muted);margin-top:2px;}
.er-mult{font-size:14px;font-weight:800;color:var(--accent);font-family:'JetBrains Mono',monospace;flex-shrink:0;min-width:80px;text-align:right;}
.er-mult small{font-size:10px;color:var(--muted);font-weight:500;margin-left:2px;}
.er-status{flex-shrink:0;}

/* Programme config compact */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}
.pc-item{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;}
.pc-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.pc-v{font-size:13px;font-weight:700;color:var(--primary);margin-top:4px;font-family:'JetBrains Mono',monospace;}
[data-theme="dark"] .er-item{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .er-item:hover{background:rgba(239,108,31,0.08);}
[data-theme="dark"] .pc-item{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .ly-prog-stat{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .tier-dist{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .tier-dist-bar{background:#2A2A2A;}

/* Members pane */
.ly-members{display:grid;grid-template-columns:1fr;gap:16px;}
.ly-members-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}

/* Catalogue */
.ly-catalogue{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cat-item{background:white;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:all 0.2s;}
.cat-item:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--accent-2);}
.cat-image{height:120px;background:linear-gradient(135deg,var(--surface-3) 0%,#DFDFDF 100%);position:relative;display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden;}
.cat-image .cat-tier{position:absolute;top:8px;right:8px;}
.cat-body{padding:12px 14px;}
.cat-name{font-size:13px;font-weight:700;color:var(--primary);}
.cat-cat{font-size:10px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:0.06em;}
.cat-pts{margin-top:8px;display:flex;justify-content:space-between;align-items:center;}
.cat-pts .p{font-size:14px;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace;}
.cat-pts .p span{font-size:10px;color:var(--muted);font-weight:500;margin-left:3px;}
.cat-pts .stock{font-size:10px;color:var(--muted);}
.cat-pts .stock.low{color:var(--warn);font-weight:600;}

/* Redemptions */
.ly-redemptions-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.ly-red-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.ly-red-stat{background:var(--surface-2);padding:14px 16px;border-radius:var(--r);border-top:3px solid var(--accent);}
.lyr-v{font-size:20px;font-weight:800;color:var(--primary);font-family:'JetBrains Mono',monospace;line-height:1;}
.lyr-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:6px;font-weight:600;}

/* Mobile app preview */
.ly-app-frame{display:flex;justify-content:center;padding:20px 0;}
.phone{width:320px;height:640px;background:var(--primary);border-radius:36px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,0.25);position:relative;}
.phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:100px;height:20px;background:var(--primary);border-radius:12px;z-index:10;}
.phone-screen{background:var(--bg);border-radius:26px;width:100%;height:100%;overflow:hidden;position:relative;padding-top:32px;}
.phone-status{position:absolute;top:6px;left:0;right:0;padding:0 24px;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:600;color:white;z-index:5;}
.app-hdr{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:white;padding:16px 18px 22px;position:relative;overflow:hidden;}
.app-hdr::after{content:"";position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(239,108,31,0.25) 0%,transparent 70%);}
.app-hi{font-size:11px;color:rgba(255,255,255,0.6);}
.app-name{font-size:15px;font-weight:700;color:white;margin-top:2px;}
.app-pts-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:14px;margin-top:14px;position:relative;z-index:2;}
.app-pts-label{font-size:10px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.app-pts-v{font-size:26px;font-weight:800;color:white;font-family:'JetBrains Mono',monospace;line-height:1;margin-top:4px;}
.app-tier-row{display:flex;justify-content:space-between;margin-top:12px;align-items:center;}
.app-prog{height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;margin-top:8px;}
.app-prog-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);border-radius:3px;}
.app-section{padding:14px 18px;}
.app-section-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.app-section-hdr h4{font-size:12px;color:var(--primary);}
.app-section-hdr a{font-size:10px;color:var(--accent);font-weight:600;}
.app-offer{background:white;border-radius:10px;padding:12px;box-shadow:var(--sh-1);margin-bottom:8px;display:flex;gap:10px;align-items:center;}
.app-offer-icon{width:36px;height:36px;border-radius:8px;background:var(--accent-3);display:flex;align-items:center;justify-content:center;font-size:16px;}
.app-offer-body{flex:1;min-width:0;}
.app-offer-title{font-size:11px;font-weight:700;color:var(--primary);}
.app-offer-sub{font-size:9.5px;color:var(--muted);margin-top:2px;}
.app-offer-mult{font-size:11px;font-weight:700;color:var(--accent);font-family:'JetBrains Mono',monospace;}

/* =========================================================
   MERCHANT ANALYTICS
   ========================================================= */
.ma-wrap{}
.ma-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;}
.ma-title{font-size:20px;font-weight:800;letter-spacing:-0.02em;color:var(--primary);}
.ma-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.ma-actions{display:flex;gap:8px;align-items:center;}

.ma-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ma-mcc{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;}
.ma-donut{position:relative;height:200px;}
.ma-donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.ma-donut-center .v{font-size:20px;font-weight:800;color:var(--primary);font-family:'JetBrains Mono',monospace;line-height:1;}
.ma-donut-center .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;margin-top:2px;}
.ma-mcc-legend{display:flex;flex-direction:column;gap:6px;}
.mcc-item{display:flex;align-items:center;gap:8px;font-size:11px;}
.mcc-sw{width:10px;height:10px;border-radius:2px;flex-shrink:0;}
.mcc-name{color:var(--text);font-weight:500;flex:1;min-width:0;}
.mcc-pct{color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:600;font-size:10px;}
.mcc-val{color:var(--primary);font-family:'JetBrains Mono',monospace;font-weight:600;font-size:10px;min-width:60px;text-align:right;}

.ma-merch-table{width:100%;border-collapse:collapse;font-size:11px;}
.ma-merch-table th{text-align:left;padding:6px 8px;background:var(--surface-2);color:var(--muted);font-weight:600;font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid var(--line);}
.ma-merch-table td{padding:8px;border-bottom:1px solid var(--line-2);color:var(--text);}
.ma-merch-table td.num{text-align:right;font-family:'JetBrains Mono',monospace;font-weight:600;}
.ma-merch-table .sparkline{display:inline-block;width:80px;height:20px;vertical-align:middle;}
.ma-merch-table .m-name{font-weight:600;color:var(--primary);}
.ma-merch-table .m-cat{font-size:9.5px;color:var(--muted);margin-top:1px;}

.ma-segments{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.seg-card{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:14px;transition:all 0.15s;cursor:pointer;}
.seg-card:hover{background:var(--accent-3);border-left-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-2);}
.seg-name{font-size:13px;font-weight:700;color:var(--primary);}
.seg-desc{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.4;}
.seg-stats{display:flex;gap:16px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);}
.seg-stat .v{font-size:14px;font-weight:800;color:var(--primary);font-family:'JetBrains Mono',monospace;}
.seg-stat .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:1px;}
.seg-stat .v.ok{color:var(--ok);}

/* =========================================================
   EXECUTIVE DASHBOARD
   ========================================================= */
.ed-wrap{}
.ed-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;}
.ed-title{font-size:20px;font-weight:800;letter-spacing:-0.02em;color:var(--primary);}
.ed-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.ed-actions{display:flex;gap:8px;align-items:center;}

.ed-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px;}
.ed-kpi{background:white;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;border-top:3px solid var(--accent);box-shadow:var(--sh-1);}
.ed-kpi .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.ed-kpi .v{font-size:24px;font-weight:800;color:var(--primary);letter-spacing:-0.02em;font-family:'JetBrains Mono',monospace;line-height:1.1;margin-top:6px;}
.ed-kpi .d{display:flex;align-items:center;gap:4px;font-size:11px;margin-top:6px;font-weight:600;}
.ed-kpi .d.up{color:var(--ok);}
.ed-kpi .d.down{color:var(--bad);}
.ed-kpi .d.flat{color:var(--muted);}
.ed-kpi .d svg{width:12px;height:12px;}

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

.ed-feed{max-height:280px;overflow-y:auto;}
.ed-feed-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);}
.ed-feed-item:last-child{border-bottom:0;}
.ef-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ef-icon svg{width:14px;height:14px;color:white;}
.ef-icon.campaign{background:var(--accent);}
.ef-icon.system{background:var(--info);}
.ef-icon.user{background:var(--primary);}
.ef-icon.alert{background:var(--warn);}
.ef-body{flex:1;min-width:0;}
.ef-title{font-size:12px;color:var(--text);}
.ef-title b{color:var(--primary);font-weight:600;}
.ef-time{font-size:10px;color:var(--muted);margin-top:2px;font-family:'JetBrains Mono',monospace;}

/* =========================================================
   LOGIN SCREEN
   ========================================================= */
.login-screen{position:fixed;inset:0;background:linear-gradient(140deg,#0A0A0A 0%,#141414 45%,#242424 100%);z-index:9990;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;transition:opacity 0.4s;}
.login-screen.hiding{opacity:0;pointer-events:none;}
.login-screen.hidden{display:none;}
.login-bg-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;}
.login-bg-orb.orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(239,108,31,0.35) 0%,transparent 70%);top:-100px;right:-100px;}
.login-bg-orb.orb-2{width:600px;height:600px;background:radial-gradient(circle,rgba(239,108,31,0.15) 0%,transparent 70%);bottom:-150px;left:-150px;}
.login-card{background:rgba(30,30,30,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:40px 44px;width:100%;max-width:440px;box-shadow:0 30px 80px rgba(0,0,0,0.6);position:relative;z-index:2;color:white;}
.login-brand{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin-bottom:32px;display:inline-block;}
.login-brand .w1{font-weight:800;font-size:15px;color:white;letter-spacing:0.02em;line-height:1;}
.login-brand .w1 .tsg-hl{color:var(--accent);}
.login-brand .tag{font-size:8px;color:var(--accent);letter-spacing:0.28em;line-height:1;margin-top:4px;font-weight:500;}
.login-eyebrow{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:0.2em;font-weight:600;margin-bottom:8px;}
.login-title{color:white;font-size:28px;font-weight:800;letter-spacing:-0.02em;margin:0;}
.login-sub{color:rgba(255,255,255,0.6);font-size:13px;margin-top:6px;margin-bottom:24px;}
.login-form{display:flex;flex-direction:column;gap:14px;}
.lf-field{display:flex;flex-direction:column;gap:6px;}
.lf-field label{font-size:11px;font-weight:600;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.06em;}
.lf-field input{padding:11px 14px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:white;font-size:14px;outline:none;transition:all 0.15s;}
.lf-field input:focus{border-color:var(--accent);background:rgba(0,0,0,0.5);box-shadow:0 0 0 3px rgba(239,108,31,0.15);}
.lf-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,0.65);}
.lf-check{display:flex;align-items:center;gap:8px;cursor:pointer;}
.lf-check input{width:14px;height:14px;accent-color:var(--accent);}
.lf-link{color:var(--accent);font-weight:500;cursor:pointer;}
.lf-link:hover{text-decoration:underline;}
.lf-submit{padding:12px 20px;background:var(--accent);color:white;border-radius:6px;font-size:14px;font-weight:600;margin-top:6px;position:relative;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.lf-submit:hover{background:#D95C15;transform:translateY(-1px);box-shadow:0 6px 20px rgba(239,108,31,0.4);}
.lf-submit.loading{pointer-events:none;background:#D95C15;}
.lf-submit.loading .lf-submit-text{opacity:0.6;}
.lf-submit-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;display:none;animation:spin 0.8s linear infinite;}
.lf-submit.loading .lf-submit-spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}
.lf-divider{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.4);font-size:11px;margin:6px 0;}
.lf-divider::before,.lf-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,0.1);}
.lf-sso{padding:11px 18px;background:transparent;border:1px solid rgba(255,255,255,0.15);color:white;border-radius:6px;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.15s;}
.lf-sso:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.25);}
.lf-sso svg{width:18px;height:18px;}
.login-foot{display:flex;justify-content:space-between;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:0.04em;}
.login-foot b{color:var(--accent);font-weight:600;}

/* =========================================================
   NOTIFICATIONS & HELP PANELS (topbar)
   ========================================================= */
.tb-wrap{position:relative;display:flex;align-items:center;}

.notif-panel,.help-panel{
  position:absolute;top:calc(100% + 8px);right:0;
  width:340px;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--sh-3);z-index:100;overflow:hidden;
  animation:dd-in 0.15s ease;
}
.np-hdr,.hp-hdr{
  padding:14px 16px;border-bottom:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface-2);
}
[data-theme="dark"] .np-hdr,[data-theme="dark"] .hp-hdr{background:#1F1F1F;border-color:var(--line-2);}
.np-hdr h4,.hp-hdr h4{font-size:13px;font-weight:700;color:var(--primary);}
.np-hdr .mark-read{font-size:11px;color:var(--accent);font-weight:600;cursor:pointer;}
.np-hdr .mark-read:hover{text-decoration:underline;}
.np-list,.hp-list{max-height:400px;overflow-y:auto;padding:6px 0;}
.np-item{display:flex;gap:12px;padding:10px 14px;cursor:pointer;transition:background 0.12s;border-left:3px solid transparent;position:relative;}
.np-item:hover{background:var(--surface-2);}
.np-item.unread{border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-3) 0%,transparent 60%);}
[data-theme="dark"] .np-item:hover{background:#1F1F1F;}
[data-theme="dark"] .np-item.unread{background:linear-gradient(90deg,rgba(239,108,31,0.10) 0%,transparent 60%);}
.np-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.np-icon svg{width:14px;height:14px;color:white;}
.np-icon.campaign{background:var(--accent);}
.np-icon.system{background:var(--info);}
.np-icon.alert{background:var(--warn);}
.np-icon.user{background:var(--primary-2);}
[data-theme="dark"] .np-icon.user{background:#4A4A4A;}
.np-body{flex:1;min-width:0;}
.np-title{font-size:12.5px;color:var(--text);line-height:1.4;}
.np-title b{color:var(--primary);font-weight:600;}
.np-time{font-size:10px;color:var(--muted);margin-top:3px;font-family:'JetBrains Mono',monospace;}
.np-foot,.hp-foot{padding:10px 14px;border-top:1px solid var(--line-2);text-align:center;background:var(--surface-2);}
[data-theme="dark"] .np-foot,[data-theme="dark"] .hp-foot{background:#1F1F1F;}
.np-foot a,.hp-foot a{font-size:11.5px;color:var(--accent);font-weight:600;cursor:pointer;}
.np-foot a:hover,.hp-foot a:hover{text-decoration:underline;}

/* Help panel */
.hp-list{padding:10px 0;}
.hp-section{padding:6px 16px 8px;}
.hp-section-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:700;margin-bottom:6px;}
.hp-item{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:12.5px;color:var(--text);cursor:pointer;transition:color 0.12s;}
.hp-item:hover{color:var(--accent);}
.hp-item kbd{display:inline-flex;gap:2px;align-items:center;}
.hp-item kbd .k{background:var(--surface-3);color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 5px;font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:500;}
[data-theme="dark"] .hp-item kbd .k{background:#2A2A2A;border-color:#333;color:var(--text);}
.hp-shortcut-label{font-size:11px;color:var(--text-2);}

/* =========================================================
   USER DROPDOWN
   ========================================================= */
.user-menu{position:relative;display:flex;align-items:center;padding-left:8px;border-left:1px solid var(--line);margin-left:2px;}
.um-avatar{width:32px;height:32px;background:linear-gradient(135deg,var(--accent) 0%,#D95C15 100%);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s;user-select:none;}
.um-avatar:hover{transform:scale(1.05);box-shadow:0 0 0 3px rgba(239,108,31,0.2);}
.um-avatar.lg{width:44px;height:44px;font-size:14px;}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:280px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh-3);z-index:100;overflow:hidden;animation:dd-in 0.15s ease;}
@keyframes dd-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.ud-hdr{padding:16px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:white;display:flex;gap:12px;align-items:center;}
[data-theme="dark"] .ud-hdr{background:linear-gradient(135deg,#242424 0%,#1A1A1A 100%);color:white;}
.ud-info{flex:1;min-width:0;}
.ud-name{font-size:13px;font-weight:700;color:white;}
.ud-email{font-size:11px;color:rgba(255,255,255,0.7);margin-top:1px;font-family:'JetBrains Mono',monospace;}
.ud-role{font-size:10px;color:var(--accent-2);margin-top:3px;font-weight:500;}
.ud-body{padding:6px;}
.ud-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:5px;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.12s;}
.ud-item:hover{background:var(--surface-2);color:var(--primary);}
.ud-item svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.ud-item.danger{color:var(--bad);}
.ud-item.danger svg{color:var(--bad);}
.ud-item.danger:hover{background:var(--bad-bg);color:var(--bad);}
.ud-foot{border-top:1px solid var(--line);padding:6px;}

/* =========================================================
   SEARCH DROPDOWN
   ========================================================= */
.search-wrap{position:relative;}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh-3);z-index:90;max-height:420px;overflow-y:auto;animation:dd-in 0.15s ease;}
.sr-group{padding:6px 0;}
.sr-group + .sr-group{border-top:1px solid var(--line-2);}
.sr-group-label{padding:6px 14px;font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;display:flex;align-items:center;justify-content:space-between;}
.sr-group-label .count{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--muted-2);}
.sr-item{padding:8px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background 0.12s;}
.sr-item:hover,.sr-item.hi{background:var(--accent-3);}
.sr-icon{width:28px;height:28px;border-radius:6px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted);}
.sr-icon svg{width:14px;height:14px;}
.sr-icon.customer{background:linear-gradient(135deg,var(--primary-3) 0%,var(--primary-2) 100%);color:var(--accent-2);}
[data-theme="dark"] .sr-icon.customer{background:linear-gradient(135deg,#2A2A2A 0%,#1F1F1F 100%);}
.sr-icon.journey{background:var(--info-bg);color:var(--info);}
.sr-icon.offer{background:var(--accent-3);color:var(--accent);}
.sr-icon.merchant{background:var(--ok-bg);color:var(--ok);}
.sr-body{flex:1;min-width:0;}
.sr-title{font-size:12.5px;font-weight:600;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-sub{font-size:10.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-kbd{font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.sr-empty{padding:24px;text-align:center;color:var(--muted);font-size:12px;}
.sr-hit{background:var(--accent-3);color:var(--accent);padding:0 2px;border-radius:2px;font-weight:700;}

/* =========================================================
   THEME TOGGLE ICON
   ========================================================= */
.th-icon{transition:all 0.25s;}
.th-sun{display:block;}
.th-moon{display:none;}
[data-theme="dark"] .th-sun{display:none;}
[data-theme="dark"] .th-moon{display:block;color:var(--accent);}

/* =========================================================
   SIMULATION ANIMATION
   ========================================================= */
/* Dim all non-active nodes during simulation for contrast */
.js-canvas.simulating .jn-node:not(.sim-active) .jn-rect{
  stroke-opacity:0.35;
  transition:stroke-opacity 0.3s,filter 0.3s;
}
.js-canvas.simulating .jn-node:not(.sim-active){
  opacity:0.55;
  transition:opacity 0.3s;
}

/* Active node — big halo, thick pulsing stroke on the RECT only.
   Do NOT animate transform on .jn-node — that would clobber the SVG
   transform="translate(x,y)" attribute and teleport the node to (0,0). */
.jn-node.sim-active .jn-rect{
  stroke:var(--accent);
  stroke-width:5;
  filter:drop-shadow(0 0 14px rgba(239,108,31,0.9)) drop-shadow(0 0 32px rgba(239,108,31,0.6)) drop-shadow(0 0 56px rgba(239,108,31,0.35));
  animation:sim-pulse 1.6s ease-in-out infinite;
}
@keyframes sim-pulse{
  0%,100%{ stroke-width:5;  stroke-opacity:1;
           filter:drop-shadow(0 0 12px rgba(239,108,31,0.9)) drop-shadow(0 0 28px rgba(239,108,31,0.55))  drop-shadow(0 0 48px rgba(239,108,31,0.3)); }
  50%    { stroke-width:9;  stroke-opacity:0.8;
           filter:drop-shadow(0 0 28px rgba(239,108,31,1))    drop-shadow(0 0 56px rgba(239,108,31,0.75)) drop-shadow(0 0 92px rgba(239,108,31,0.5)); }
}

/* Simulation banner at BOTTOM of canvas (out of the way of the flow) */
.sim-banner{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#EF6C1F 0%,#D95C15 100%);
  color:white;padding:10px 20px;border-radius:20px;
  font-size:12px;font-weight:600;letter-spacing:0.02em;
  box-shadow:0 4px 20px rgba(239,108,31,0.5),0 0 0 4px rgba(239,108,31,0.15);
  z-index:15;display:flex;align-items:center;gap:12px;
  animation:sim-banner-in 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes sim-banner-in{
  from{ opacity:0; transform:translateX(-50%) translateY(10px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}
.sim-banner .sb-dot{
  width:8px;height:8px;background:white;border-radius:50%;
  box-shadow:0 0 10px rgba(255,255,255,0.9);
  animation:sim-dot 1s ease infinite;
}
@keyframes sim-dot{0%,100%{opacity:1;}50%{opacity:0.35;}}
.sim-banner .sb-count{
  background:rgba(0,0,0,0.2);padding:2px 8px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
}
.sim-banner .sb-current{opacity:0.95;}
.sim-banner .sb-progress{
  width:120px;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;overflow:hidden;
}
.sim-banner .sb-progress-fill{
  height:100%;background:white;border-radius:2px;
  transition:width 0.3s ease;
}
.canvas-hint{position:absolute;top:12px;right:14px;background:var(--primary);color:white;padding:8px 12px;border-radius:5px;font-size:11px;box-shadow:var(--sh-2);border-left:3px solid var(--accent);opacity:0.9;pointer-events:none;z-index:5;}
[data-theme="dark"] .canvas-hint{background:#242424;}
.canvas-hint b{color:var(--accent-2);}

/* Toolbar buttons — clearer hover + active */
.btn-icon-sm{width:30px;height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all 0.15s;position:relative;}
.btn-icon-sm svg{width:16px;height:16px;}
.btn-icon-sm:hover:not(:disabled){background:var(--accent-3);color:var(--accent);}
.btn-icon-sm:disabled{opacity:0.35;cursor:not-allowed;}
[data-theme="dark"] .btn-icon-sm:hover:not(:disabled){background:rgba(239,108,31,0.12);color:var(--accent);}

/* Connect mode overlay */
body.connect-mode{cursor:crosshair;}
body.connect-mode .jn-node{cursor:crosshair;}
body.connect-mode .jn-node .jn-rect{stroke-dasharray:4 3;}
body.connect-mode .jn-node:hover .jn-rect{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:0;filter:drop-shadow(0 0 8px rgba(239,108,31,0.5));}
.connect-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--accent);color:white;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;box-shadow:0 4px 14px rgba(239,108,31,0.35);z-index:20;display:flex;align-items:center;gap:12px;animation:slide-in 0.2s ease;}
.connect-banner b{background:rgba(0,0,0,0.15);padding:1px 6px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:10px;}
.connect-banner .cancel-x{background:rgba(0,0,0,0.2);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:800;line-height:1;}
.connect-banner .cancel-x:hover{background:rgba(0,0,0,0.35);}

/* Selected-node visual connect handles */
.jn-node.selected .jn-handle{opacity:1;}
.jn-handle{opacity:0;transition:opacity 0.15s;cursor:crosshair;}
.jn-handle:hover circle{fill:var(--accent);r:6;}

/* Node actions in properties panel */
.jp-actions{display:flex;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
[data-theme="dark"] .jp-actions{border-top-color:var(--line);}
.jp-action{flex:1;padding:8px 10px;font-size:11px;font-weight:600;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.15s;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;}
.jp-action svg{width:13px;height:13px;}
.jp-action.connect{background:var(--accent);color:white;border-color:var(--accent);}
.jp-action.connect:hover{background:#D95C15;border-color:#D95C15;}
.jp-action.delete{color:var(--bad);border-color:var(--line);}
.jp-action.delete:hover{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);}
[data-theme="dark"] .jp-action{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .jp-action:hover{background:#2A2A2A;}
[data-theme="dark"] .jp-action.connect{background:var(--accent);color:white;border-color:var(--accent);}

.jp-edges{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);}
.jp-edges-hdr{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
.edge-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;margin-bottom:4px;font-size:11px;color:var(--text);}
[data-theme="dark"] .edge-item{background:#1F1F1F;border-color:#2A2A2A;}
.edge-item .ei-arrow{color:var(--muted);flex-shrink:0;}
.edge-item .ei-target{flex:1;font-weight:600;color:var(--primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.edge-item .ei-label{padding:1px 6px;background:var(--accent-3);color:var(--accent);border-radius:8px;font-size:9px;font-weight:700;letter-spacing:0.04em;}
.edge-item .ei-delete{color:var(--muted-2);cursor:pointer;padding:2px;border-radius:3px;transition:all 0.12s;flex-shrink:0;}
.edge-item .ei-delete:hover{color:var(--bad);background:var(--bad-bg);}
.edge-item .ei-delete svg{width:12px;height:12px;display:block;}
.jp-edges-empty{font-size:10.5px;color:var(--muted-2);padding:6px 0;font-style:italic;}

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;animation:mo-fade 0.18s ease;}
.modal-overlay.closing{animation:mo-fade-out 0.18s ease forwards;}
@keyframes mo-fade{from{opacity:0;}to{opacity:1;}}
@keyframes mo-fade-out{from{opacity:1;}to{opacity:0;}}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,0.35);width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow-y:auto;animation:mc-in 0.22s cubic-bezier(0.16,1,0.3,1);}
@keyframes mc-in{from{opacity:0;transform:translateY(-14px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-hdr{padding:20px 24px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line-2);}
.modal-hdr h3{font-size:16px;font-weight:700;color:var(--primary);}
.modal-hdr p{font-size:12px;color:var(--muted);margin-top:4px;}
.modal-close{width:30px;height:30px;border-radius:5px;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;transition:all 0.15s;background:transparent;flex-shrink:0;}
.modal-close:hover{background:var(--surface-3);color:var(--primary);}
.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:14px;}
.mi-row{display:flex;gap:12px;}
.mi-field{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0;}
.mi-field label{font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;}
.mi-field select.jp-input{cursor:pointer;}
.mi-preview{margin-top:6px;padding:12px 14px;background:var(--surface-2);border:1px dashed var(--line);border-radius:6px;}
[data-theme="dark"] .mi-preview{background:#1F1F1F;}
.mi-preview-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;}
.mi-preview-body{max-width:220px;}
.mi-preview-body .cat-item{margin:0;transform:scale(0.95);transform-origin:top left;}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:6px;border-top:1px solid var(--line-2);padding-top:14px;margin-top:6px;}
.cat-empty{padding:36px;text-align:center;color:var(--muted);font-size:13px;grid-column:1/-1;background:var(--surface-2);border:1px dashed var(--line);border-radius:8px;}
.cat-empty b{color:var(--primary);}

/* =========================================================
   HERO ACTION MODAL COMPONENTS
   ========================================================= */
/* Pill-group (channel selector, priority selector) */
.pill-group{display:flex;gap:6px;flex-wrap:wrap;}
.pill-choice{padding:7px 14px;border:1px solid var(--line);border-radius:20px;background:white;color:var(--text);font-size:12px;font-weight:500;cursor:pointer;transition:all 0.15s;font-family:inherit;}
.pill-choice:hover{border-color:var(--muted-2);background:var(--surface-2);}
.pill-choice.active{background:var(--accent);color:white;border-color:var(--accent);box-shadow:0 2px 6px rgba(239,108,31,0.25);}
.pill-choice.danger.active{background:var(--bad);border-color:var(--bad);}
[data-theme="dark"] .pill-choice{background:#1F1F1F;border-color:#2A2A2A;color:var(--text);}
[data-theme="dark"] .pill-choice:hover{background:#2A2A2A;}
[data-theme="dark"] .pill-choice.active{background:var(--accent);color:white;border-color:var(--accent);}

/* Variables hint under textarea */
.var-pills{font-size:10.5px;color:var(--muted);margin-top:6px;line-height:1.4;}
.var-pills b{background:var(--surface-3);color:var(--accent);padding:1px 5px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;margin-left:2px;}
[data-theme="dark"] .var-pills b{background:#2A2A2A;}

/* Message preview */
.msg-preview{background:white;border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-size:12px;line-height:1.5;color:var(--text);max-width:100%;overflow-wrap:break-word;}
.msg-preview .msg-ch{display:inline-block;background:var(--accent);color:white;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;letter-spacing:0.08em;margin-bottom:8px;}
.msg-preview .msg-body{white-space:pre-wrap;}
[data-theme="dark"] .msg-preview{background:#1F1F1F;border-color:#2A2A2A;}

/* Segment picker list */
.seg-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;padding:2px;margin:-2px;}
.seg-choice{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:white;cursor:pointer;transition:all 0.15s;}
.seg-choice:hover{border-color:var(--accent-2);background:var(--surface-2);}
.seg-choice.active{border-color:var(--accent);background:var(--accent-3);}
.seg-choice input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.seg-choice .sc-body{flex:1;min-width:0;}
.seg-choice .sc-name{font-size:12.5px;font-weight:600;color:var(--primary);}
.seg-choice .sc-desc{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
.seg-choice .sc-meta{text-align:right;flex-shrink:0;}
.seg-choice .sc-count{font-size:14px;font-weight:800;color:var(--primary);font-family:'JetBrains Mono',monospace;line-height:1;}
.seg-choice .sc-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px;font-weight:600;}
[data-theme="dark"] .seg-choice{background:#1F1F1F;border-color:#2A2A2A;}
[data-theme="dark"] .seg-choice:hover{background:#242424;border-color:var(--accent-2);}
[data-theme="dark"] .seg-choice.active{background:rgba(239,108,31,0.12);border-color:var(--accent);}
[data-theme="dark"] .seg-list::-webkit-scrollbar-thumb{background:#3A3A3A;}
.seg-list::-webkit-scrollbar{width:6px;}
.seg-list::-webkit-scrollbar-track{background:transparent;}
.seg-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}