:root {
  /* Core accent — overridden per theme */
  --accent:#C4922A;--accent-l:#D4A240;--accent-dark:#5A3C00;--accent-dim:rgba(196,146,42,0.12);
  --accent-border:rgba(196,146,42,0.22);--accent-stripe:rgba(196,146,42,0.18);
  /* Base palette */
  --gold:#C4922A;--gold-l:#D4A240;--black:#0A0A0A;--black2:#111111;
  --black3:#1A1A1A;--black4:#1E1E1E;--black5:#252525;--white:#E8E8E8;
  --gray:#555555;--green:#22C55E;--yellow:#EAB308;--red:#EF4444;
  --blue:#3B82F6;--purple:#A855F7;--teal:#14B8A6;--pink:#EC4899;
  --sw:240px;--hh:56px;--pw:42vw;
  /* Glow overlay color */
  --glow-r:196;--glow-g:146;--glow-b:42;
}
/* ── THEMES ── */
[data-color-theme="forest"]{
  --accent:#1D9E75;--accent-l:#24B888;--accent-dark:#063D2A;--accent-dim:rgba(29,158,117,0.1);
  --accent-border:rgba(29,158,117,0.22);--accent-stripe:rgba(29,158,117,0.18);
  --black:#060C08;--black2:#080E0A;--black3:#0D1810;--black4:#162418;--black5:#1C2E1E;
  --glow-r:29;--glow-g:158;--glow-b:117;
}
[data-color-theme="purple"]{
  --accent:#C4922A;--accent-l:#D4A240;--accent-dark:#5A3C00;--accent-dim:rgba(196,146,42,0.1);
  --accent-border:rgba(196,146,42,0.22);--accent-stripe:rgba(124,58,237,0.2);
  --black:#080510;--black2:#0A0714;--black3:#100B1E;--black4:#1E1635;--black5:#261E40;
  --glow-r:124;--glow-g:58;--glow-b:237;
}
[data-color-theme="copper"]{
  --accent:#B4643C;--accent-l:#C87850;--accent-dark:#4A2010;--accent-dim:rgba(180,100,60,0.1);
  --accent-border:rgba(180,100,60,0.22);--accent-stripe:rgba(180,100,60,0.18);
  --black:#0C0C0C;--black2:#111111;--black3:#161616;--black4:#1E1E1E;--black5:#252525;
  --glow-r:180;--glow-g:100;--glow-b:60;
}
[data-color-theme="neon"]{
  --accent:#F5A623;--accent-l:#FFB800;--accent-dark:#6A4200;--accent-dim:rgba(245,166,35,0.15);
  --accent-border:rgba(245,166,35,0.3);--accent-stripe:rgba(245,166,35,0.22);
  --black:#080602;--black2:#0F0C06;--black3:#141008;--black4:#2A2010;--black5:#352810;
  --glow-r:245;--glow-g:166;--glow-b:35;
}
[data-color-theme="matrix"]{
  --accent:#00C850;--accent-l:#00E860;--accent-dark:#003A18;--accent-dim:rgba(0,200,80,0.1);
  --accent-border:rgba(0,200,80,0.22);--accent-stripe:rgba(0,200,80,0.18);
  --black:#050905;--black2:#060B06;--black3:#080D08;--black4:#0E1A0E;--black5:#142014;
  --glow-r:0;--glow-g:200;--glow-b:80;
}
[data-color-theme="duotone"]{
  --accent:#C4922A;--accent-l:#D4A240;--accent-dark:#5A3C00;--accent-dim:rgba(196,146,42,0.12);
  --accent-border:rgba(196,146,42,0.25);--accent-stripe:rgba(196,146,42,0.2);
  --black:#0A0818;--black2:#0C0A1A;--black3:#110E24;--black4:#1A1230;--black5:#221840;
  --glow-r:124;--glow-g:58;--glow-b:237;
}
[data-theme="light"]{--black:#F5F5F5;--black2:#EBEBEB;--black3:#E0E0E0;--black4:#D5D5D5;--black5:#C8C8C8;--white:#111111;--gray:#555555;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--black);color:var(--white);min-height:100vh;overflow:hidden;font-size:14px;font-feature-settings:'cv02','cv03','cv04','tnum';-webkit-font-smoothing:antialiased;}

/* ── LOGIN SCREEN ── */
#loginScreen{
  position:fixed;inset:0;width:100vw;height:100vh;
  background:var(--black);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;overflow:hidden;
}
/* Animated glow background */
#loginScreen::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(196,146,42,.12) 0%,transparent 60%);
  pointer-events:none;
}
/* Top stripe on login too */
#loginScreen::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#C4922A 0%,rgba(196,146,42,.25) 50%,transparent 100%);
}
@keyframes loginFadeIn{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.lbox{
  background:rgba(26,26,26,.95);
  border:1px solid rgba(196,146,42,.35);
  border-radius:18px;
  padding:52px 44px 44px;
  width:420px;
  text-align:center;
  position:relative;
  animation:loginFadeIn .5s cubic-bezier(.22,1,.36,1) both;
  backdrop-filter:blur(10px);
}
/* Glow top border on box */
.lbox::before{
  content:'';position:absolute;top:0;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,146,42,.6),transparent);
}
.llogo{
  font-family:'Bebas Neue',sans-serif;
  font-size:42px;color:#C4922A;
  margin-bottom:6px;
  letter-spacing:4px;
  text-shadow:0 0 40px rgba(196,146,42,.3);
}
.lsub{color:#555;font-size:13px;margin-bottom:36px;letter-spacing:.02em;font-weight:400;}
.lbox input{
  width:100%;padding:13px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;color:#E0E0E0;
  font-size:13.5px;margin-bottom:10px;
  outline:none;transition:border .2s,background .2s;
  font-family:'Inter',sans-serif;
}
.lbox input:focus{border-color:rgba(196,146,42,.45);background:rgba(196,146,42,.04);}
.lbox input::placeholder{color:#3A3A3A;}
.lbtn{
  width:100%;padding:14px;
  background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%);border:none;
  color:#0A0804;border:none;border-radius:9px;
  font-family:'Bebas Neue',sans-serif;font-size:16px;
  cursor:pointer;margin-top:10px;letter-spacing:2px;
  transition:background .15s,transform .1s;
}
.lbtn:hover{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent-l) 55%,var(--accent-l) 100%);}
.lbtn:active{transform:scale(.99);}
.lerr{color:var(--red);font-size:12.5px;margin-top:10px;display:none;}
.lnote{color:#333;font-size:11.5px;margin-top:18px;line-height:1.7;}
.lnote a{color:#C4922A;text-decoration:none;}

#app{display:none;height:100vh;overflow:hidden;flex-direction:column;}
.layout{display:flex;height:100vh;position:relative;}

.sidebar{width:var(--sw);background:var(--black2);border-right:1px solid var(--black4);display:flex;flex-direction:column;height:100vh;overflow-y:auto;flex-shrink:0;z-index:10;}
.slogo{padding:20px 16px;border-bottom:1px solid var(--black4);display:flex;align-items:center;gap:10px;}
.slogo-txt{font-family:'Bebas Neue',sans-serif;font-size:22px;color:#D4A240;letter-spacing:2px;}
.ssec{padding:16px 8px 4px;}
.slbl{font-size:11px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:1.5px;padding:0 8px;margin-bottom:4px;}
.ni{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;transition:all .15s;font-size:14px;color:var(--gray);margin-bottom:1px;}
.ni:hover{background:var(--black4);color:var(--white);}
.ni.active{background:rgba(196,146,42,.1);color:#D4A240;font-weight:600;box-shadow:inset 3px 0 0 rgba(196,146,42,.6);border-radius:8px;}
.ni .ic{font-size:15px;width:18px;text-align:center;}
.ssub{padding-left:28px;}
.ssub .ni{font-size:13px;padding:7px 10px;}
.sbot{margin-top:auto;padding:12px 8px;border-top:1px solid var(--black4);}
.trow{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--gray);}
.tgl{width:36px;height:20px;background:var(--black5);border-radius:10px;position:relative;transition:background .2s;}
.tgl.on{background:var(--gold);}
.tgl-k{position:absolute;top:2px;left:2px;width:16px;height:16px;background:white;border-radius:50%;transition:left .2s;}
.tgl.on .tgl-k{left:18px;}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;}
.topbar{height:var(--hh);background:var(--black2);border-bottom:1px solid var(--black4);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;}
.tbar-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;}
.tbar-act{display:flex;align-items:center;gap:10px;}
.btn{padding:8px 15px;border-radius:7px;font-size:14px;cursor:pointer;border:none;font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
.btn-gold{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%);border:none;color:#0A0804;font-weight:500;font-size:13px;}
.btn-gold:hover{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent-l) 55%,var(--accent-l) 100%);}
.btn-out{background:transparent;color:var(--white);border:1px solid var(--black5);}
.btn-out:hover{border-color:rgba(196,146,42,.5);color:#C4922A;}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-red{background:rgba(239,68,68,.15);color:var(--red);border:1px solid rgba(239,68,68,.3);}
.btn-red:hover{background:rgba(239,68,68,.25);}

.cw{flex:1;display:flex;overflow:hidden;position:relative;min-height:0;}
.content{flex:1;overflow-y:auto;padding:20px;transition:margin-right .3s ease;min-height:0;position:relative;}
.content.panel-open{margin-right:var(--pw);}

.lpanel{position:fixed;top:var(--hh);right:0;width:var(--pw);height:calc(100vh - var(--hh));background:var(--black2);border-left:2px solid var(--gold);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;z-index:99995;}
.lpanel.open{transform:translateX(0);}
.ph{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--black4);background:var(--black3);flex-shrink:0;}
.ph-title{font-family:'Bebas Neue',sans-serif;font-size:16px;color:#C4922A;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:310px;}
.ph-act{display:flex;gap:8px;align-items:center;flex-shrink:0;}
.pcls{background:none;border:none;color:var(--gray);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;}
.pcls:hover{color:var(--white);background:var(--black5);}
.pb{flex:1;overflow-y:auto;padding:18px;}
.pf{padding:12px 18px;border-top:1px solid var(--black4);display:flex;justify-content:flex-end;gap:10px;background:var(--black3);flex-shrink:0;}

.page{display:none;} .page.active{display:block;min-height:0;}

.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.sc{background:var(--black3);border:1px solid var(--black4);border-radius:12px;padding:18px;}
.sc-lbl{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.sc-val{font-family:'Inter',sans-serif;font-size:28px;font-weight:700;line-height:1;letter-spacing:-.02em;}
.sc-sub{font-size:13px;color:var(--gray);margin-top:4px;}
.sc.gold{border-color:rgba(245,166,35,.4);} .sc.gold .sc-val{color:#C4922A;}
.sc.red{border-color:rgba(239,68,68,.4);} .sc.red .sc-val{color:var(--red);}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dc{background:var(--black3);border:1px solid var(--black4);border-radius:12px;padding:18px;}
.dt{font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;}
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.ki{background:var(--black4);border-radius:12px;padding:20px 22px;border-left:4px solid var(--gray);}
.ki.green{border-left-color:rgba(34,197,94,.6);background:rgba(34,197,94,.04);}
.ki.yellow{border-left-color:rgba(234,179,8,.6);background:rgba(234,179,8,.04);}
.ki.red{border-left-color:rgba(239,68,68,.6);background:rgba(239,68,68,.04);}
.ki-name{font-size:13px;color:var(--gray);margin-bottom:10px;font-weight:500;letter-spacing:.3px;}
.ki-val{font-size:28px;font-family:'Inter',sans-serif;font-weight:700;line-height:1;letter-spacing:-.02em;margin-bottom:10px;}
.ki-tgt{font-size:12px;color:var(--gray);display:flex;gap:12px;flex-wrap:wrap;}
.pbar{margin-bottom:10px;}
.pbar-l{display:flex;justify-content:space-between;font-size:12px;color:var(--gray);margin-bottom:4px;}
.pbar-t{background:var(--black5);border-radius:4px;height:7px;overflow:hidden;}
.pbar-f{height:100%;border-radius:4px;background:var(--gold);transition:width .5s;}

.tc{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.sbox{flex:1;min-width:180px;background:var(--black3);border:1px solid var(--black4);border-radius:8px;padding:9px 14px;color:var(--white);font-size:14px;outline:none;}
.sbox:focus{border-color:rgba(196,146,42,.5);}
.flt{background:var(--black3);border:1px solid var(--black4);border-radius:8px;padding:8px 11px;color:var(--white);font-size:13px;outline:none;cursor:pointer;}
.flt:focus{border-color:rgba(196,146,42,.5);}
.owrap{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gray);}
.oi{width:65px;background:var(--black3);border:1px solid var(--black4);border-radius:7px;padding:6px 8px;color:var(--white);font-size:12px;outline:none;}
.oi:focus{border-color:rgba(196,146,42,.5);}
.tw{overflow-x:auto;border-radius:12px;border:1px solid var(--black4);}
.lead-row{cursor:pointer;user-select:none;-webkit-user-select:none;}
.lead-row.selected{background:rgba(196,146,42,.15)!important;}
.lead-row.selected td{background:rgba(196,146,42,.12)!important;color:var(--white);}
.lead-row.selected::before{opacity:0!important;}
table{width:100%;border-collapse:collapse;font-size:12px;}
thead{background:var(--black3);position:sticky;top:0;z-index:5;}
th{padding:9px 11px;text-align:left;font-size:11px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid var(--black4);}
td{padding:9px 12px;border-bottom:1px solid var(--black4);color:var(--white);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--black3);cursor:pointer;}
.lead-row.selected:hover td{background:rgba(196,146,42,.18)!important;}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.bo{background:rgba(59,130,246,.12);color:#7BA8D4;border:1px solid rgba(59,130,246,.2);}
.bs{background:rgba(34,197,94,.1);color:#6BBF8A;border:1px solid rgba(34,197,94,.2);}
.bf{background:rgba(239,68,68,.1);color:#C47A7A;border:1px solid rgba(239,68,68,.18);}
.bk{background:rgba(245,166,35,.1);color:#C4922A;border:1px solid rgba(245,166,35,.2);}
.bneu{background:rgba(59,130,246,.08);color:#7BA8D4;border:1px solid rgba(59,130,246,.15);}
.bne{background:rgba(168,85,247,.08);color:#9E78BF;border:1px solid rgba(168,85,247,.15);}
.bnq{background:rgba(239,68,68,.08);color:#C47A7A;border:1px solid rgba(239,68,68,.15);}
.bkb{background:rgba(107,114,128,.08);color:#7A8390;border:1px solid rgba(107,114,128,.15);}
.bbl{background:rgba(239,68,68,.1);color:#C47A7A;border:1px solid rgba(239,68,68,.2);}
.bgk{background:rgba(234,179,8,.08);color:#B89B30;border:1px solid rgba(234,179,8,.15);}
.brr{background:rgba(249,115,22,.08);color:#B8793A;border:1px solid rgba(249,115,22,.15);}
.bae{background:rgba(34,197,94,.1);color:#6BBF8A;border:1px solid rgba(34,197,94,.2);}
.bgs{background:rgba(20,184,166,.08);color:#4A9E96;border:1px solid rgba(20,184,166,.15);}
.bqt{background:rgba(139,92,246,.08);color:#8B6CBF;border:1px solid rgba(139,92,246,.15);}
.bst{background:rgba(236,72,153,.08);color:#B05A8A;border:1px solid rgba(236,72,153,.15);}
.bcf{background:rgba(245,166,35,.08);color:#C4922A;border:1px solid rgba(245,166,35,.15);}
.buq{background:rgba(107,114,128,.1);color:#7A8390;border:1px solid rgba(107,114,128,.15);}
.bvk{background:rgba(34,197,94,.12);color:#6BBF8A;border:1px solid rgba(34,197,94,.2);}
.brp{background:rgba(249,115,22,.08);color:#B8793A;border:1px solid rgba(249,115,22,.15);}
.bdl{background:rgba(20,184,166,.08);color:#4A9E96;border:1px solid rgba(20,184,166,.15);}
.bon{background:rgba(34,197,94,.1);color:#6BBF8A;border:1px solid rgba(34,197,94,.2);}
.bbla{background:rgba(239,68,68,.1);color:#C47A7A;border:1px solid rgba(239,68,68,.18);}
.bret{background:rgba(245,166,35,.1);color:#C4922A;border:1px solid rgba(245,166,35,.2);}
.bfzg{background:rgba(239,68,68,.07);color:#B07070;border:1px solid rgba(239,68,68,.12);}
.bneu-e{background:rgba(20,184,166,.08);color:#4A9E96;border:1px solid rgba(20,184,166,.15);}
.bprue{background:rgba(245,166,35,.08);color:#C4922A;border:1px solid rgba(245,166,35,.15);}
.bfrei{background:rgba(34,197,94,.1);color:#4A9E70;border:1px solid rgba(34,197,94,.2);}
.bnge{background:rgba(107,114,128,.1);color:#7A8390;border:1px solid rgba(107,114,128,.15);}
.b2inh{background:rgba(180,0,0,.85);color:#fff;border:1px solid rgba(180,0,0,.9);font-weight:600;}
.bhome{background:rgba(180,0,0,.85);color:#fff;border:1px solid rgba(180,0,0,.9);font-weight:600;}
.bhome{background:rgba(59,130,246,.08);color:#5A8AB0;border:1px solid rgba(59,130,246,.15);}
.beingang{background:rgba(20,184,166,.12);color:#3A8A80;border:1px solid rgba(20,184,166,.2);}
.b2inh-bl{background:rgba(139,0,0,.85);color:#fff;border:1px solid rgba(139,0,0,.9);font-weight:600;}
.babl{background:rgba(180,60,0,.8);color:#fff;border:1px solid rgba(180,60,0,.9);font-weight:600;}
.bbla2{background:rgba(239,68,68,.15);color:#C47A7A;border:1px solid rgba(239,68,68,.25);}
.bdl-oa{background:rgba(59,130,246,.1);color:#5A8AB0;border:1px solid rgba(59,130,246,.2);}
.bdl-kf{background:rgba(168,85,247,.1);color:#8B6CBF;border:1px solid rgba(168,85,247,.2);}
.bdl-mg{background:rgba(34,197,94,.1);color:#4A9E70;border:1px solid rgba(34,197,94,.2);}
.fu-td{color:#4ADE80!important;font-weight:600;}
.fu-wk{color:#FDE047!important;font-weight:600;}
.fu-ov{color:var(--red)!important;font-weight:600;}

.pag{display:flex;align-items:center;gap:8px;margin-top:12px;}
.pi{font-size:12px;color:var(--gray);flex:1;}
.pbs{display:flex;gap:4px;}
.pb2{padding:6px 11px;border-radius:6px;font-size:13px;background:var(--black3);border:1px solid var(--black4);color:var(--white);cursor:pointer;}
.pb2:hover{border-color:rgba(196,146,42,.5);color:#C4922A;}
.pb2.active{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%);color:#0A0804;border:none;font-weight:500;}
.pb2:disabled{opacity:.3;cursor:not-allowed;}

.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px;}
.lcard{background:var(--black3);border:1px solid var(--black4);border-radius:12px;padding:15px;cursor:pointer;transition:all .15s;}
.lcard:hover{border-color:rgba(196,146,42,.5);transform:translateY(-1px);}
.lct{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.lcn{font-weight:600;font-size:14px;}
.lcc{font-size:12px;color:var(--gray);margin-top:2px;}
.lcr{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;}
.lcl{color:var(--gray);}
.vtgl{display:flex;gap:4px;}
.vb{padding:6px 10px;border-radius:7px;background:var(--black3);border:1px solid var(--black4);color:var(--gray);cursor:pointer;font-size:14px;transition:all .15s;position:relative;}
.vb.active{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%);color:#0A0804;border:none;}
.vb[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;border:1px solid rgba(255,255,255,.12);z-index:99999;}
.vb[data-tip]::before{content:'';position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#1a1a1a;pointer-events:none;opacity:0;transition:opacity .15s;z-index:99999;}
.vb[data-tip]:hover::after,.vb[data-tip]:hover::before{opacity:1;}

.fsec{background:var(--black3);border-radius:12px;padding:16px;margin-bottom:12px;}
.ftit{font-size:11px;font-weight:700;color:#C4922A;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.fg2{grid-template-columns:repeat(2,1fr);}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg.full{grid-column:1/-1;}
.fg.s2{grid-column:span 2;}
label{font-size:12px;color:var(--gray);font-weight:500;}
.fi,.fsel,.fta{background:var(--black4);border:1px solid var(--black5);border-radius:7px;padding:8px 11px;color:var(--white);font-size:13px;outline:none;transition:border .2s;font-family:'Inter',sans-serif;width:100%;}
.fi:focus,.fsel:focus,.fta:focus{border-color:rgba(196,146,42,.5);}
.fta{resize:vertical;min-height:65px;}
.fsel{cursor:pointer;}

.dw{position:relative;}
.cal{position:absolute;top:calc(100% + 6px);left:0;z-index:9999;background:#181818;border:1px solid rgba(196,146,42,.25);border-radius:12px;padding:14px;width:248px;box-shadow:0 12px 40px rgba(0,0,0,.8),0 0 0 1px rgba(196,146,42,.08);display:none;}
.cal.open{display:block;}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(196,146,42,.12);}
.cal-nb{background:rgba(196,146,42,.08);border:1px solid rgba(196,146,42,.2);color:var(--accent,#C4922A);cursor:pointer;font-size:13px;padding:3px 8px;border-radius:6px;transition:all .15s;line-height:1.4;}
.cal-nb:hover{background:rgba(196,146,42,.2);border-color:rgba(196,146,42,.4);}
.cal-ml{font-size:12px;font-weight:600;color:var(--accent,#C4922A);letter-spacing:.3px;}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.cal-dl{font-size:9px;color:#444;padding:3px 0;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.cal-d{font-size:11.5px;padding:5px 2px;border-radius:6px;cursor:pointer;color:#888;transition:all .12s;}
.cal-d:hover{background:rgba(196,146,42,.12);color:#C4922A;}
.cal-d.today{background:rgba(196,146,42,.15);color:#C4922A;font-weight:700;}
.cal-d.sel{background:linear-gradient(90deg,#5A3C00 0%,#C4922A 55%,#D4A240 100%);color:#0A0804;font-weight:700;border-radius:6px;}
.cal-d.sel:hover{background:linear-gradient(90deg,#6A4800 0%,#D4A240 55%,#E0B050 100%);}
.cal-d.emp,.cal-d.oth{color:transparent;cursor:default;pointer-events:none;}
/* Löschen/Heute Links im Kalender */
.cal-footer{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid rgba(196,146,42,.1);}
.cal-clear{font-size:11px;color:#555;cursor:pointer;background:none;border:none;font-family:'Inter',sans-serif;padding:0;transition:color .15s;}
.cal-clear:hover{color:#EF4444;}
.cal-today-btn{font-size:11px;color:var(--accent,#C4922A);cursor:pointer;background:none;border:none;font-family:'Inter',sans-serif;padding:0;transition:color .15s;}
.cal-today-btn:hover{color:var(--accent-l,#D4A240);}

.cstats{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.cst{background:var(--black4);border-radius:8px;padding:8px 12px;font-size:11px;display:flex;align-items:center;gap:8px;}
.csn{font-family:'Bebas Neue',sans-serif;font-size:22px;color:#C4922A;}
.csl{font-size:11px;color:var(--gray);}
.acall{background:var(--black4);border-radius:10px;padding:12px;border:1px dashed var(--black5);margin-bottom:10px;}
.act{font-size:11px;font-weight:700;color:#C4922A;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;}
.cgr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.ce{background:var(--black4);border-radius:9px;padding:11px;margin-bottom:7px;border-left:3px solid var(--black5);position:relative;}
.ce.pu{border-left-color:#C4922A;}
.ceh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.cedt{font-size:12px;color:var(--gray);}
.cedt strong{color:var(--white);}
.cewho{font-size:11px;font-weight:600;padding:3px 9px;border-radius:12px;background:rgba(245,166,35,.15);color:#C4922A;}
.cedts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
.cetag{font-size:10px;padding:2px 7px;border-radius:10px;background:var(--black5);color:var(--gray);display:flex;align-items:center;gap:3px;}
.cetag.ok{background:rgba(34,197,94,.15);color:var(--green);}
.cenote{font-size:12px;color:var(--white);line-height:1.5;}
.cedel{position:absolute;top:7px;right:7px;background:none;border:none;color:var(--gray);cursor:pointer;font-size:11px;padding:2px 5px;border-radius:4px;}
.cedel:hover{color:var(--red);background:rgba(239,68,68,.1);}

.trc{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.wn{display:flex;align-items:center;gap:8px;}
.wn button{background:var(--black3);border:1px solid var(--black4);color:var(--white);padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12px;}
.wn button:hover{border-color:rgba(196,146,42,.5);color:#C4922A;}
.wl{font-size:13px;font-weight:600;color:#C4922A;min-width:200px;text-align:center;}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tt{width:100%;border-collapse:collapse;font-size:11px;}
.tt th{padding:5px 6px;background:var(--black4);font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--black5);text-align:center;}
.tt th:first-child{text-align:left;}
.tt td{padding:4px 5px;border-bottom:1px solid var(--black5);text-align:center;white-space:nowrap;max-width:none;}
.tt td:first-child{text-align:left;font-weight:500;color:var(--white);font-size:10.5px;}
.ti{width:44px;background:var(--black5);border:1px solid transparent;border-radius:5px;padding:3px 4px;color:var(--white);font-size:11px;text-align:center;outline:none;}
.ti:focus{border-color:rgba(196,146,42,.5);}
.qtip{cursor:default;}
#floatTip{position:fixed;background:#1A1A1A;border:1px solid #F5A623;color:#FFFFFF;font-size:11px;font-weight:500;padding:5px 12px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:999999;font-family:'Inter',sans-serif;display:none;box-shadow:0 4px 16px rgba(0,0,0,.5);}
/* Tracking row colors - subtle */
.trk-row-makler td:first-child{color:#C4922A;font-weight:600;}
.trk-row-makler{background:rgba(245,166,35,.04);}
.trk-row-quali-aus td:first-child{color:#C4922A;font-weight:600;}
.trk-row-quali-aus{background:rgba(245,166,35,.04);}
.trk-row-qh td:first-child{color:#5A8AB0;font-weight:600;}
.trk-row-qh{background:rgba(59,130,246,.04);}
.trk-row-sch td:first-child{color:#5A8AB0;font-weight:600;}
.trk-row-sch{background:rgba(59,130,246,.04);}
.trk-row-scg td:first-child{color:#4A9E70;font-weight:600;}
.trk-row-scg{background:rgba(34,197,94,.04);}
.trk-row-sca td:first-child{color:#B06060;font-weight:600;}
.trk-row-sca{background:rgba(239,68,68,.04);}
.trk-row-gsl td:first-child{color:#A07830;font-weight:600;}
.trk-row-gsl{background:rgba(245,158,11,.04);}
.trk-row-scs td:first-child{color:#7A5A9E;font-weight:600;}
.trk-row-scs{background:rgba(168,85,247,.04);}
.trk-row-gcl td:first-child{color:#3A8A60;font-weight:600;}
.trk-row-gcl{background:rgba(16,185,129,.05);border-left:2px solid rgba(16,185,129,.4);}
/* Week calendar popup */
.wk-cal-wrap{position:relative;display:inline-block;}
.wk-cal-popup{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:9999;background:var(--black2);border:1px solid rgba(196,146,42,.5);border-radius:12px;padding:12px;width:238px;box-shadow:0 8px 32px rgba(0,0,0,.75);display:none;}
.wk-cal-popup.open{display:block;}
/* Pipeline filters */
.pl-filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
.pl-filter-active{background:var(--gold)!important;color:var(--black)!important;border-color:rgba(196,146,42,.5)!important;}
/* Ruhewochen badge */
.brp1{background:rgba(249,115,22,.15);color:#FB923C;}
.brp2{background:rgba(249,115,22,.2);color:#F97316;}
.brp3{background:rgba(239,68,68,.15);color:#FCA5A5;}
.brp4{background:rgba(239,68,68,.2);color:#EF4444;}
.brp5{background:rgba(139,92,246,.2);color:#A855F7;}


.anc{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.rb{padding:6px 13px;border-radius:20px;border:1px solid var(--black4);background:var(--black3);color:var(--gray);font-size:12px;cursor:pointer;transition:all .15s;}
.rb.active{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%);color:#0A0804;border:none;font-weight:500;}

.ksets{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ksi{background:var(--black4);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;}
.ksin{font-size:14px;font-weight:600;color:var(--white);}
.krs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.kri{display:flex;flex-direction:column;gap:3px;}
.kril{font-size:10px;font-weight:600;}
.kril.g{color:var(--green);} .kril.y{color:var(--yellow);}

.notif{position:fixed;bottom:20px;right:20px;background:var(--black3);border:1px solid rgba(196,146,42,.5);border-radius:10px;padding:12px 18px;color:var(--white);font-size:13px;z-index:99999;transform:translateY(100px);opacity:0;transition:all .3s;max-width:280px;}
.notif.show{transform:translateY(0);opacity:1;}
.cfgb{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:#C4922A;display:none;align-items:center;gap:8px;}
.cfgb.show{display:flex;}
.empty{text-align:center;padding:50px 20px;color:var(--gray);}
.empty .ei{font-size:48px;margin-bottom:12px;}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--black5);border-radius:2px;}
.content::-webkit-scrollbar{width:10px;}
.content::-webkit-scrollbar-track{background:var(--black2);}
.content::-webkit-scrollbar-thumb{background:var(--black5);border-radius:6px;border:2px solid var(--black2);cursor:pointer;}
.content::-webkit-scrollbar-thumb:hover{background:#C4922A;}

/* ── MOBILE ── */
@media (max-width: 768px) {
  :root { --sw:0px; --pw:100vw; --hh:50px; }

  /* App shell */
  body { overflow:hidden; }
  .app { flex-direction:column; height:100vh; }

  /* Sidebar → hidden by default, slides in as drawer */
  .sidebar {
    position:fixed; top:0; left:0; width:80vw; max-width:300px;
    height:100vh; z-index:10000; transform:translateX(-100%);
    transition:transform .25s ease; box-shadow:4px 0 24px rgba(0,0,0,.6);
  }
  .sidebar.mobile-open { transform:translateX(0); }

  /* Mobile top bar */
  .header { padding:0 14px; }
  .header-title { font-size:14px; }

  /* Overlay when sidebar open */
  #mobileOverlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
    z-index:9999;
  }
  #mobileOverlay.show { display:block; }

  /* Mobile menu button */
  #mobileMenuBtn {
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:8px;
    background:var(--black3); border:1px solid var(--black5);
    cursor:pointer; flex-shrink:0; margin-right:10px;
  }

  /* Content area */
  .cw { flex-direction:column; }
  .content { padding:12px; }
  .content.panel-open { margin-right:0; }

  /* Lead panel → full screen */
  .lpanel {
    top:0; width:100vw; height:100vh;
    border-left:none; border-top:2px solid var(--gold);
  }

  /* Dashboard grids */
  .sgrid { grid-template-columns:1fr 1fr; gap:10px; }
  .dgrid { grid-template-columns:1fr; gap:10px; }
  .kgrid { grid-template-columns:1fr 1fr; gap:10px; }
  .sc { padding:14px; }
  .sc-val { font-size:22px; }
  .ki-val { font-size:22px; }

  /* Table → card view */
  .tw { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.tt { min-width:auto; }

  /* Toolbar wrapping */
  .tc { gap:6px; }
  .sbox { font-size:16px; } /* prevent iOS zoom */
  .flt { font-size:16px; }

  /* Filter bar scroll */
  .tc { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }

  /* Buttons */
  .btn { font-size:12px; padding:6px 10px; }
  .btn-sm { font-size:11px; padding:5px 8px; }

  /* Pipelines */
  .plgrid { grid-template-columns:1fr; }

  /* Modal full screen on mobile */
  #importModal > div,
  #qualiImportModal > div,
  #dupesReviewModal > div {
    width:100vw; max-height:100vh; border-radius:0; margin:0;
  }

  /* cfgb banner */
  .cfgb { font-size:11px; padding:8px 12px; }
}

/* ══════════════════════════════════════════════
   FADE DESIGN SYSTEM
══════════════════════════════════════════════ */

/* Top stripe — fades left to right */
#topStripe{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(var(--glow-r),var(--glow-g),var(--glow-b),.25) 50%,transparent 100%);
  pointer-events:none;
}

/* Sidebar glow from top */
.sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:220px;
  background:linear-gradient(180deg,rgba(var(--glow-r),var(--glow-g),var(--glow-b),.09) 0%,transparent 100%);
  pointer-events:none;z-index:0;
}
.sidebar{position:relative;}

/* Main area glow from top */
.topbar{position:relative;}
/* Glow below topbar via content area top gradient instead */
.content::before{
  content:'';position:absolute;top:0;left:0;right:0;height:100px;
  background:linear-gradient(180deg,rgba(var(--glow-r),var(--glow-g),var(--glow-b),.06) 0%,transparent 100%);
  pointer-events:none;z-index:0;
}
/* .content position:relative merged above */

/* Sidebar active item — left border fade */
.ni.active{
  background:rgba(var(--glow-r),var(--glow-g),var(--glow-b),.08)!important;
  color:var(--accent)!important;
  border-left:3px solid var(--accent)!important;
  box-shadow:none!important;
  border-radius:7px!important;
  padding-left:8px!important;
  font-weight:600;
}

/* Table row left border — color by pipeline class */
.lead-row{position:relative;}


/* Table row alternating */
.lead-row:nth-child(even) td{background:rgba(255,255,255,0.012);}
.lead-row.selected:nth-child(even) td{background:rgba(196,146,42,.12)!important;}
tr:hover:not(.selected) td{background:rgba(var(--glow-r),var(--glow-g),var(--glow-b),.04)!important;cursor:pointer;}

/* td padding — slightly more breathing room */
td{padding:10px 12px!important;font-size:12.5px;}
th{padding:8px 12px!important;font-size:10px!important;letter-spacing:.5px!important;color:#3A3A3A!important;font-weight:600!important;}

/* Topbar title clean */
.tbar-title{font-size:17px!important;font-weight:700!important;letter-spacing:.3px!important;color:var(--white);}

/* + Neuer Lead button */
.btn-gold{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%)!important;border:none!important;color:#0A0804!important;font-weight:500!important;font-size:13px!important;}
.btn-gold:hover{background:var(--accent-l)!important;}

/* Sidebar logo */
.slogo-txt{color:var(--accent)!important;}

/* Inline gold buttons fade */
button[style*="background:#C4922A"],
button[style*="background: #C4922A"],
button[style*="background:var(--gold)"],
button[style*="background:#c4922a"] {
  background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%)!important;
  border:none!important;
  color:#0A0804!important;
}

/* ══════════════════════════════════════════════
   INTRO ANIMATION
══════════════════════════════════════════════ */
@keyframes slideInLeft{from{transform:translateX(-100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes slideInTop{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes fadeInUp{from{transform:translateY(18px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes fadeInScale{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes glowPulse{0%{opacity:0;}40%{opacity:1;}70%{opacity:.6;}100%{opacity:1;}}
@keyframes scanLine{0%{top:0;opacity:.8;}100%{top:100%;opacity:0;}}

#app.intro-playing .sidebar{animation:slideInLeft .35s cubic-bezier(.22,1,.36,1) both;}
#app.intro-playing .topbar{animation:slideInTop .3s cubic-bezier(.22,1,.36,1) .1s both;}
#app.intro-playing .content{animation:fadeInUp .4s cubic-bezier(.22,1,.36,1) .18s both;}
#app.intro-playing .lpanel{animation:none;}
#app.intro-playing #topStripe{animation:glowPulse .6s ease .05s both;}

/* Scan line effect on load */
#scanLine{
  display:none;position:fixed;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--glow-r),var(--glow-g),var(--glow-b),.8),transparent);
  z-index:9999;pointer-events:none;
}
#scanLine.active{display:block;animation:scanLine .45s ease-out forwards;}

/* Theme picker in settings */
.theme-swatch{width:42px;height:42px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.theme-swatch:hover{transform:scale(1.08);}
.theme-swatch.active{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15);}
.lang-btn.active{background:linear-gradient(90deg,var(--accent-dark,#5A3C00) 0%,var(--accent) 55%,var(--accent-l) 100%) !important;color:#0A0804 !important;border:none !important;font-weight:700 !important;}