@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ===================== DESIGN TOKENS — LIGHT ===================== */
:root{
  --bg: #F6F7F5;
  --surface: #FFFFFF;
  --surface-2: #FBFBFA;
  --surface-3: #F0F2EE;
  --ink: #16241D;
  --ink-2: #2D3E34;
  --muted: #5B6B62;
  --muted-2: #8A968F;
  --border: #E3E7E1;
  --border-2: #D0D5CD;
  --sidebar-bg: #10231C;
  --sidebar-ink: #CFE0D6;
  --sidebar-ink-dim: #7E9A8B;
  --accent: #1E8F6F;
  --accent-ink: #0E6B51;
  --accent-soft: #E4F3EC;
  --accent-hover: #177A5E;
  --warn: #C98A2A;
  --warn-soft: #FBF0DD;
  --warn-ink: #92610E;
  --danger: #B4483D;
  --danger-soft: #FBE8E5;
  --danger-ink: #922F25;
  --info: #2563EB;
  --info-soft: #DBEAFE;
  --gray-soft: #EEF0ED;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,35,28,.06);
  --shadow-md: 0 6px 20px rgba(16,35,28,.08);
  --shadow-lg: 0 12px 32px rgba(16,35,28,.12);
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --transition: .2s ease;
}

/* ===================== DARK MODE ===================== */
[data-theme="dark"]{
  --bg: #0D1117;
  --surface: #161B22;
  --surface-2: #1C2129;
  --surface-3: #252B35;
  --ink: #E6EDF3;
  --ink-2: #C9D1D9;
  --muted: #8B949E;
  --muted-2: #6E7681;
  --border: #2D333B;
  --border-2: #3D444D;
  --sidebar-bg: #090D12;
  --sidebar-ink: #8B949E;
  --sidebar-ink-dim: #6E7681;
  --accent: #3FB68B;
  --accent-ink: #3FB68B;
  --accent-soft: rgba(63,182,139,.12);
  --accent-hover: #33A07A;
  --warn: #E3B341;
  --warn-soft: rgba(227,179,65,.12);
  --warn-ink: #E3B341;
  --danger: #F85149;
  --danger-soft: rgba(248,81,73,.12);
  --danger-ink: #F85149;
  --info: #58A6FF;
  --info-soft: rgba(88,166,255,.12);
  --gray-soft: #21262D;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #0D1117;
    --surface: #161B22;
    --surface-2: #1C2129;
    --surface-3: #252B35;
    --ink: #E6EDF3;
    --ink-2: #C9D1D9;
    --muted: #8B949E;
    --muted-2: #6E7681;
    --border: #2D333B;
    --border-2: #3D444D;
    --sidebar-bg: #090D12;
    --sidebar-ink: #8B949E;
    --sidebar-ink-dim: #6E7681;
    --accent: #3FB68B;
    --accent-ink: #3FB68B;
    --accent-soft: rgba(63,182,139,.12);
    --accent-hover: #33A07A;
    --warn: #E3B341;
    --warn-soft: rgba(227,179,65,.12);
    --warn-ink: #E3B341;
    --danger: #F85149;
    --danger-soft: rgba(248,81,73,.12);
    --danger-ink: #F85149;
    --info: #58A6FF;
    --info-soft: rgba(88,166,255,.12);
    --gray-soft: #21262D;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 6px 20px rgba(0,0,0,.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  }
}

/* ===================== RESET ===================== */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition: background var(--transition), color var(--transition);
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--ink); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:14px; color:var(--ink); }
table{ border-collapse:collapse; width:100%; }
.icon{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
::selection{ background:var(--accent-soft); color:var(--accent-ink); }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

/* ===================== LOGIN ===================== */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 20% 20%, #163229 0%, #10231C 55%, #0B1712 100%);
  padding:24px; position:relative; overflow:hidden;
}
.login-screen::before{
  content:''; position:absolute; width:500px; height:500px;
  background:radial-gradient(circle, rgba(30,143,111,.15) 0%, transparent 70%);
  top:-150px; right:-150px; border-radius:50%;
}
.login-screen::after{
  content:''; position:absolute; width:350px; height:350px;
  background:radial-gradient(circle, rgba(30,143,111,.08) 0%, transparent 70%);
  bottom:-80px; left:-80px; border-radius:50%;
}
.login-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:36px 32px;
  width:100%; max-width:400px; box-shadow:var(--shadow-lg);
  position:relative; z-index:1; border:1px solid var(--border);
}
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.login-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(135deg, var(--accent), var(--accent-hover));
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.5px;
}
.login-brand h1{ font-size:17px; margin:0; }
.login-brand p{ margin:2px 0 0; font-size:12px; color:var(--muted); }
#loginForm label{ display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:14px; }
#loginForm input{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); color:var(--ink);
  transition: border-color var(--transition);
}
#loginForm input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.form-error{
  background:var(--danger-soft); color:var(--danger); padding:8px 10px;
  border-radius:8px; font-size:12.5px; margin-bottom:14px;
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:8px; padding:9px 14px;
  font-size:13.5px; font-weight:600; transition:all var(--transition); white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-outline{ background:var(--surface); border-color:var(--border); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn-ghost{ background:transparent; color:var(--sidebar-ink-dim); border:1px solid rgba(255,255,255,.12); }
.btn-ghost:hover{ color:#fff; border-color:rgba(255,255,255,.3); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-block{ width:100%; }
.btn-icon{ background:none; border:none; font-size:16px; color:var(--muted); padding:4px; }
.btn-icon:hover{ color:var(--ink); }
.btn-sm{ padding:6px 10px; font-size:12.5px; border-radius:6px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ===================== APP SHELL ===================== */
.app-shell{ display:flex; min-height:100vh; }
.app-shell[hidden]{ display:none !important; }

/* Sidebar */
.sidebar{
  width:220px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-ink);
  display:flex; flex-direction:column; padding:18px 12px; position:sticky; top:0; height:100vh;
  border-right:1px solid rgba(255,255,255,.06); z-index:100;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; }
.brand-text{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:15px; letter-spacing:-.01em; }
.sidebar-nav{
  display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--sidebar-ink-dim) transparent;
}
.sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:var(--sidebar-ink-dim); transition:all var(--transition);
}
.sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{ background:rgba(30,143,111,.2); color:#fff; font-weight:600; }
.sidebar-nav a.active .icon{ stroke:var(--accent); }
.sidebar-footer{ border-top:1px solid rgba(255,255,255,.08); padding-top:12px; margin-top:12px; }
.user-badge{ font-size:12px; color:var(--sidebar-ink-dim); padding:0 8px 10px; }

/* Main column */
.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:50;
  transition: background var(--transition), border-color var(--transition);
}
.topbar-title{ font-family:var(--font-display); font-size:19px; font-weight:600; }
.topbar-actions{ display:flex; gap:10px; align-items:center; }
.select-product{
  padding:8px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--ink); cursor:pointer;
  transition: border-color var(--transition);
}
.select-product:hover{ border-color:var(--accent); }
.page-content{ padding:24px 26px 60px; flex:1; }

/* Theme toggle */
.theme-toggle{
  background:none; border:1px solid var(--border); border-radius:8px;
  padding:7px 9px; cursor:pointer; color:var(--muted);
  display:inline-flex; align-items:center; transition:all var(--transition); font-size:16px;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }

/* Mobile menu toggle */
.menu-toggle{
  display:none; background:none; border:none;
  color:var(--ink); padding:4px; cursor:pointer; font-size:20px;
}

/* ===================== CARDS / GRID ===================== */
.grid{ display:grid; gap:16px; }
.grid-5{ grid-template-columns:repeat(5,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1100px){ .grid-4,.grid-5{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-4,.grid-3,.grid-2,.grid-5{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover{ border-color:var(--border-2); box-shadow:var(--shadow-md); }
.card-title{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.card-value{ font-family:var(--font-display); font-size:24px; font-weight:700; }
.card-sub{ font-size:12px; color:var(--muted-2); margin-top:4px; }
.card-accent{ border-left:3px solid var(--accent); }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; }
.section-head h3{ font-size:15px; }
.section-head:first-child{ margin-top:0; }

.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.panel-scroll{ overflow-x:auto; }

/* ===================== TABLES ===================== */
table.data{ font-size:13px; }
table.data th{
  text-align:left; padding:10px 14px; background:var(--surface-2); color:var(--muted);
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.data td{ padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; font-variant-numeric:tabular-nums; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:var(--surface-2); }

/* ===================== STATUS PILLS (signature) ===================== */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em; }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-scale{ background:var(--accent-soft); color:var(--accent-ink); }
.pill-monitor{ background:var(--warn-soft); color:var(--warn); }
.pill-pause{ background:var(--danger-soft); color:var(--danger); }
.pill-na{ background:var(--gray-soft); color:var(--muted); }

/* ===================== FORMS / FILTERS ===================== */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.filter-bar label{ font-size:11.5px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
.filter-bar input, .filter-bar select{
  padding:8px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--ink);
  transition: border-color var(--transition);
}
.filter-bar input:focus, .filter-bar select:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid label{ font-size:12px; color:var(--muted); font-weight:600; display:block; }
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; margin-top:5px; padding:8px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface-2); color:var(--ink);
}
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tab{ padding:9px 14px; font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; transition:color var(--transition); }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--accent-ink); border-color:var(--accent); }

/* ===================== MODAL ===================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); display:flex;
  align-items:center; justify-content:center; z-index:50; padding:20px;
  animation:fadeIn .15s ease;
}
.modal{
  background:var(--surface); border-radius:var(--radius-lg); padding:24px;
  width:100%; max-width:480px; max-height:86vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  animation:slideUp .2s ease;
}
.modal h3{ margin-bottom:16px; font-size:16px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ===================== CHAT ===================== */
.chat-fab{
  position:fixed; bottom:24px; right:24px; width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-hover));
  color:#fff; border:none; box-shadow:0 4px 12px rgba(30,143,111,.3);
  display:flex; align-items:center; justify-content:center; z-index:40;
  transition:transform var(--transition), box-shadow var(--transition);
}
.chat-fab:hover{ transform:scale(1.06); box-shadow:0 6px 20px rgba(30,143,111,.4); }
.chat-panel{
  position:fixed; bottom:90px; right:24px; width:360px; max-height:480px; background:var(--surface);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  z-index:41; border:1px solid var(--border); animation:slideUp .2s ease;
}
.chat-header{ padding:14px 16px; border-bottom:1px solid var(--border); font-weight:700; display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.chat-messages{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; font-size:13px; min-height:200px; max-height:340px; }
.chat-msg{ padding:9px 12px; border-radius:10px; max-width:88%; white-space:pre-wrap; line-height:1.5; }
.chat-msg.user{ background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-msg.bot{ background:var(--surface-2); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); }
.chat-form input{ flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--ink); }
.chat-form input:focus{ border-color:var(--accent); outline:none; }

/* ===================== TOAST ===================== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:10px 20px; border-radius:8px;
  font-size:13px; font-weight:600; z-index:60; box-shadow:var(--shadow-lg);
  animation:slideUp .25s ease;
}

/* ===================== TOTAL ROW ===================== */
.data tfoot tr.total-row td{ font-weight:700; border-top:2px solid var(--ink); background:var(--surface-2); border-bottom:none; }
.data tfoot tr.total-row td strong{ font-weight:700; }

/* ===================== MISC ===================== */
.empty-state{ text-align:center; padding:40px 20px; color:var(--muted); }
.muted{ color:var(--muted); }
.text-right{ text-align:right; }
.mt-16{ margin-top:16px; }
.chart-box{ height:280px; }
.badge-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.modal-overlay[hidden]{ display:none !important; }
.chat-panel[hidden]{ display:none !important; }
.toast[hidden]{ display:none !important; }

/* ===================== LOADING SKELETON ===================== */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius);
}

/* ===================== RESPONSIVE SIDEBAR ===================== */
@media (max-width:900px){
  .sidebar{
    position:fixed; left:-260px; width:260px;
    transition:left var(--transition); box-shadow:none; z-index:200;
  }
  .sidebar.open{ left:0; box-shadow:var(--shadow-lg); }
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.4);
    z-index:199; display:none;
  }
  .sidebar-backdrop.show{ display:block; }
  .menu-toggle{ display:flex; align-items:center; }
  .main-col{ width:100%; }
  .topbar{ padding:12px 16px; }
  .page-content{ padding:16px; }
}

/* ===================== LP ANALYSIS CARDS ===================== */
.lp-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lp-card-header strong{ font-size:14px; }
.lp-card-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.lp-stat{ display:flex; flex-direction:column; gap:2px; }
.lp-stat-label{ font-size:10.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.lp-stat-value{ font-family:var(--font-display); font-size:17px; font-weight:700; }
.lp-card-chart{ height:50px; margin-top:4px; }

/* ===================== QUKIS DASHBOARD PARAMETER STYLES ===================== */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.page-head h1{ margin:0; font-size:22px; }
.page-head .sub{ margin-top:4px; }
.head-art{ display:flex; align-items:center; gap:10px; }
.doc-btn{ display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 12px; font-size:12.5px; color:var(--muted); cursor:pointer; transition:border-color var(--transition); }
.doc-btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
.doc-btn svg{ width:18px; height:18px; stroke:currentColor; }
.filter-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.filter-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.filter-row .field{ min-width:100px; }
.filter-row .field label{ font-size:11px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
.filter-row input, .filter-row select{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); width:100%; box-sizing:border-box; }
.toolbar{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:16px; position:relative; }
.toolbar-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cols-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; position:absolute; right:16px; top:60px; z-index:5; padding:14px; min-width:210px; box-shadow:var(--shadow-lg); }
.cols-panel label{ display:flex; gap:8px; align-items:center; margin:6px 0; font-size:13px; cursor:pointer; }
.cols-panel label.muted-col{ color:var(--muted); }
.table-wrap{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.report-table{ width:100%; border-collapse:collapse; font-size:13px; }
.report-table th{ text-align:left; padding:10px 12px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; cursor:help; background:var(--surface-2); }
.report-table td{ padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.report-table tr:hover td{ background:var(--surface-2); }
.report-table tr.total{ font-weight:700; border-top:2px solid var(--ink); background:var(--surface-2); }
.report-table tr.total td{ border-bottom:none; }
.report-table .pct{ font-size:11px; color:var(--muted-2); margin-left:6px; }
.currency{ font-variant-numeric:tabular-nums; }
.empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty svg{ width:36px; height:36px; stroke:currentColor; margin-bottom:10px; }
.empty-title{ font-size:14px; font-weight:600; margin-bottom:4px; }
.pill-count{ background:var(--accent-soft); color:var(--accent-ink); font-size:11px; padding:2px 10px; border-radius:999px; font-weight:600; }
.loading{ text-align:center; padding:40px; color:var(--muted); }

/* ===================== CEP TRACKER SPACING ===================== */
#trkCards{ margin-bottom:20px; }
#trkCards .card{ padding:16px 18px; }

/* ===== Creative preview + inline video ===== */
.creative-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;vertical-align:middle;background:var(--surface-3);cursor:pointer}
.creative-thumb-ph{display:inline-flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:16px}
.btn-play{position:relative;border:none;background:transparent;padding:0;cursor:pointer;line-height:0}
.btn-play .play-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.55);color:#fff;border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-size:11px;pointer-events:none}
.video-row td{background:var(--surface-3);padding:12px !important}
.video-wrap{max-width:420px;margin:0 auto}
.video-player{width:100%;max-width:420px;aspect-ratio:9/16;border-radius:10px;background:#000;display:block}
.video-loading{padding:24px;text-align:center;color:var(--muted);font-size:13px}
.video-link{display:inline-block;margin-top:6px;font-size:12px;color:var(--accent);text-decoration:none}

/* ===== Structured AI analysis ===== */
.analysis-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.analysis-item{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface-2)}
.analysis-item-head{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:4px}
.analysis-reason{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.analysis-actions{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55}
.analysis-actions li{margin-bottom:2px}

/* ===== Recon table grouped headers ===== */
.th-group{text-align:center;border-bottom:2px solid var(--border);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
#reconTable td,#reconTable th{font-size:12px;padding:6px 8px;white-space:nowrap}

/* ===== KPI cards row (LP Analysis + reusable) ===== */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-align:center}
.kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.kpi-value{font-size:22px;font-weight:700;color:var(--ink)}

/* ===== Ad Preview container ===== */
.ad-preview-container{display:flex;justify-content:center;padding:8px 0}
.ad-preview-container iframe{background:var(--surface);border-radius:10px}

/* ===== Creative Lab ===== */
.cl-header{margin-bottom:16px}
.cl-section{margin-bottom:20px}
.cl-section-title{font-size:14px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.cl-text{font-size:13px;line-height:1.65;color:var(--ink)}
.cl-tags{display:flex;flex-wrap:wrap;gap:6px}
.cl-tag{background:var(--accent-soft);color:var(--accent-ink);padding:4px 10px;border-radius:6px;font-size:12px}
.cl-tag-test{background:var(--warn-soft);color:var(--warn)}
.cl-card{border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--surface);transition:border-color var(--transition)}
.cl-card:hover{border-color:var(--border-2)}
.cl-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px}
.cl-card-num{background:var(--accent-soft);color:var(--accent-ink);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.cl-angle{font-size:12.5px;color:var(--muted-2);margin-bottom:10px;font-style:italic}
.cl-field{margin-bottom:10px}
.cl-field-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px;font-weight:600}
.cl-field-val{font-size:13.5px;line-height:1.65;color:var(--ink);white-space:pre-line}
.cl-body{background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--ink)}
.cl-brief{background:var(--accent-soft);border:1px dashed var(--accent);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--accent-ink)}
.cl-card-actions{display:flex;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.cl-risk{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--gray-soft)}
.cl-risk-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;flex-shrink:0;letter-spacing:.3px}
.cl-risk-rendah{background:var(--accent-soft);color:var(--accent-ink)}
.cl-risk-sedang{background:var(--warn-soft);color:var(--warn)}
.cl-risk-tinggi{background:var(--danger-soft);color:var(--danger)}
.cl-risk-text{font-size:12.5px;line-height:1.5;color:var(--muted-2)}

/* ===== Tooltip indicator on table headers ===== */
th[title]{cursor:help;border-bottom:1px dashed var(--border-2)}
th[title]:hover{color:var(--accent)}

/* ===== Campaign selection & filter info ===== */
.camp-selection-info{font-size:12px;color:var(--accent);padding:6px 0;min-height:20px}
.camp-filter-info{font-size:12px;color:var(--warn);background:var(--warn-soft);border:1px solid rgba(201,138,42,.2);border-radius:8px;padding:6px 12px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.camp-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}

/* ===== Jurnal Iklan ===== */
.journal-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:60vh}
@media(max-width:900px){.journal-layout{grid-template-columns:1fr}}
.journal-left,.journal-right{display:flex;flex-direction:column}
.journal-write{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.journal-write h4{margin-bottom:10px;font-size:14px}
.journal-write textarea{width:100%;resize:vertical;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px;color:var(--ink);font-size:13px;font-family:inherit;line-height:1.6}
.journal-extract-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.journal-graph{background:var(--surface);border:1px solid var(--border);border-radius:12px;min-height:200px;margin-bottom:12px;overflow:hidden}
.j-entry{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:8px;transition:border-color var(--transition)}
.j-entry:hover{border-color:var(--border-2)}
.j-entry-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px}
.j-entry-date{font-weight:700;color:var(--accent-ink)}
.j-entry-actions{margin-left:auto;display:flex;gap:2px;opacity:0.4;transition:opacity .2s}
.j-entry:hover .j-entry-actions{opacity:1}
.j-entry-body{font-size:13px;line-height:1.6;color:var(--ink);white-space:pre-line}
.j-entry-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.j-tag{background:var(--accent-soft);color:var(--accent-ink);padding:1px 6px;border-radius:4px;font-size:10px}
.jx-result{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.jx-summary{font-size:13px;line-height:1.65;color:var(--ink);margin-bottom:12px}
.jx-section{margin-bottom:14px}
.jx-title{font-size:13px;font-weight:700;margin-bottom:6px}
.jx-item{margin-bottom:8px;padding:8px 10px;background:var(--gray-soft);border-radius:8px}
.jx-desc{font-size:12px;color:var(--muted-2);margin-top:3px;line-height:1.5}
.jx-hist-item{display:flex;justify-content:space-between;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--accent-ink);transition:background .15s}
.jx-hist-item:hover{background:var(--accent-soft)}

/* ===== Profit Calculator ===== */
.profit-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.profit-layout{grid-template-columns:1fr}}
.profit-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profit-form label{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:4px}
.profit-form input,.profit-form textarea,.profit-form select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--ink);font-size:13px;font-family:inherit}
.profit-form textarea{resize:vertical}
.pf-row{display:contents}
.pf-field{display:contents}
.pf-section{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-ink);margin:8px 0 4px;font-weight:700}
.pc-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.pc-kpi{background:var(--gray-soft);border-radius:8px;padding:10px;text-align:center}
.pc-kpi-label{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.3px}
.pc-kpi-val{font-size:20px;font-weight:700;color:var(--ink);margin-top:2px}
.pc-breakdown{border-top:1px solid var(--border);padding-top:10px}
.pc-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}
.pc-sub{padding-left:12px;color:var(--muted-2);font-size:12.5px}
.pc-neg{color:var(--danger)}
.pc-total{border-top:1px solid var(--border);padding-top:8px;margin-top:6px;font-weight:700;font-size:15px}
.pc-positive{color:var(--accent)}
.pc-negative{color:var(--danger)}

/* ===================== AI VIDEO PRODUCTION PIPELINE ===================== */
.vp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.vp-header-text h2{font-size:20px;margin:0}
.vp-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vp-search-wrap{position:relative}
.vp-search{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);width:200px;font-size:13px;color:var(--ink);transition:border-color var(--transition)}
.vp-search:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

.vp-panel{border-radius:var(--radius-lg);overflow:hidden}
.vp-table-scroll{overflow-x:auto;max-height:calc(100vh - 200px);overflow-y:auto}

.vp-table{font-size:13px;border-collapse:separate;border-spacing:0}
.vp-table thead{position:sticky;top:0;z-index:3}
.vp-table th{background:var(--surface-2);padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.vp-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.vp-table tbody tr:hover td{background:var(--surface-2)}
.vp-table tbody tr:last-child td{border-bottom:none}

.vp-th-sticky,.vp-td-sticky{position:sticky;left:0;z-index:2;background:var(--surface-2)}
.vp-td-sticky{background:var(--surface)}
.vp-table tbody tr:hover .vp-td-sticky{background:var(--surface-2)}
.vp-th-no,.vp-td-no{width:46px;min-width:46px;text-align:center;font-weight:700;color:var(--muted)}

.vp-inline-select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:13px;width:100%;color:var(--ink);transition:border-color var(--transition)}
.vp-inline-select:focus{border-color:var(--accent);outline:none}
.vp-inline-input{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:13px;width:100%;color:var(--ink);transition:border-color var(--transition)}
.vp-inline-input:focus{border-color:var(--accent);outline:none}
.vp-duration{width:90px}
.vp-inline-textarea{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:13px;width:100%;color:var(--ink);resize:vertical;line-height:1.5;font-family:inherit;transition:border-color var(--transition)}
.vp-inline-textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.vp-script{min-height:120px}
.vp-prompt{min-height:180px;font-family:'Cascadia Code','Fira Code','SF Mono','Consolas',monospace;font-size:12px;letter-spacing:-.01em}

.vp-prompt-cell{position:relative}
.vp-prompt-cell .vp-copy-btn{position:absolute;top:4px;right:4px;opacity:0;transition:opacity .15s;padding:3px 6px;font-size:11px;z-index:1}
.vp-prompt-cell:hover .vp-copy-btn{opacity:1}

.vp-file-empty{display:flex;flex-direction:column;gap:6px;min-width:160px}
.vp-file-or{font-size:11px;color:var(--muted-2);text-align:center}
.vp-gdrive-input{padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:12px;width:100%;color:var(--ink);transition:border-color var(--transition)}
.vp-gdrive-input:focus{border-color:var(--accent);outline:none}
.vp-gdrive-input::placeholder{color:var(--muted-2)}

.vp-file-attached{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vp-file-icon{font-size:16px;line-height:1}
.vp-file-name{font-size:12px;font-weight:600;color:var(--ink);word-break:break-all;max-width:160px}
.vp-file-actions{display:flex;gap:4px;flex-wrap:wrap}
.vp-file-final .vp-file-name{color:var(--accent-ink)}

.vp-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:transform .15s,box-shadow .15s}
.vp-thumb:hover{transform:scale(1.08);box-shadow:var(--shadow-md)}
.vp-thumb-video{position:relative}

.vp-actions-cell{display:flex;align-items:center;gap:4px;white-space:nowrap}
.vp-drag-handle{cursor:grab;font-size:16px;color:var(--muted-2);user-select:none;padding:2px 4px}
.vp-drag-handle:hover{color:var(--ink)}

.vp-dragging{opacity:.4}
.vp-drag-over{outline:2px dashed var(--accent);outline-offset:-2px}

@media(max-width:900px){
  .vp-header{flex-direction:column}
  .vp-header-actions{width:100%}
  .vp-search{width:100%}
}
@media(max-width:640px){
  .vp-header-actions{flex-direction:column;align-items:stretch}
  .vp-header-actions .btn{width:100%}
  .chat-panel{width:calc(100vw - 32px);right:16px;bottom:80px}
}