:root{
  --bg:#090b10;
  --panel:#10131a;
  --panel2:#151923;
  --panel3:#1a1f2b;
  --line:#252b38;
  --line2:#303748;
  --text:#f4f6fb;
  --muted:#8f98aa;
  --soft:#b9c0cf;
  --purple:#8b5cf6;
  --purple2:#a78bfa;
  --green:#27c281;
  --green2:#37d895;
  --yellow:#f6c85f;
  --red:#ef6461;
  --blue:#53a8ff;
  --shadow:0 20px 60px rgba(0,0,0,.26);
  --r:18px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:
  radial-gradient(circle at 76% 0%,rgba(139,92,246,.10),transparent 34%),
  radial-gradient(circle at 20% 14%,rgba(83,168,255,.06),transparent 28%),
  var(--bg);color:var(--text);font-family:"DM Sans",system-ui,sans-serif;min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.sidebar{height:100vh;position:sticky;top:0;background:rgba(12,14,20,.94);border-right:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;backdrop-filter:blur(18px);z-index:10}
.brand{display:flex;align-items:center;gap:11px;padding:0 10px 26px}
.brandmark{width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,var(--purple),#5b43d6);display:grid;place-items:center;box-shadow:0 10px 30px rgba(139,92,246,.3)}
.brandmark svg{width:19px;height:19px}
.brandtext b{font:800 15px "Manrope";display:block;letter-spacing:-.02em}.brandtext span{font-size:11px;color:var(--muted)}
.navlabel{color:#555e71;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;padding:10px 12px 7px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav button{display:flex;align-items:center;gap:11px;width:100%;border:1px solid transparent;background:transparent;color:#8f98aa;padding:10px 12px;border-radius:12px;text-align:left;font-weight:600;font-size:13px;transition:.18s}
.nav button svg{width:17px;height:17px;stroke-width:1.9}
.nav button:hover{background:#151923;color:#d7dce6}
.nav button.active{background:linear-gradient(100deg,rgba(139,92,246,.20),rgba(139,92,246,.06));border-color:rgba(139,92,246,.28);color:#eee9ff}
.nav button.active svg{color:var(--purple2)}
.sidefooter{margin-top:auto;padding:14px 10px 3px;color:#697286;font-size:10px;line-height:1.5}
.main{padding:28px 32px 54px;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:25px}
.hello h1{font:800 29px "Manrope";letter-spacing:-.045em;margin:0}
.hello p{margin:5px 0 0;color:var(--muted);font-size:13px}
.topactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{height:39px;border:1px solid var(--line2);border-radius:11px;padding:0 13px;background:#151923;color:#dce1ea;font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn svg{width:15px;height:15px}
.btn:hover{border-color:#414a60;background:#1a1f2b}
.btn.primary{background:#f3efff;border-color:#f3efff;color:#241a3f}
.btn.primary:hover{background:#fff}
.btn.purple{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.green{background:rgba(39,194,129,.13);border-color:rgba(39,194,129,.32);color:#82efbd}
.btn.danger{background:rgba(239,100,97,.10);border-color:rgba(239,100,97,.25);color:#ff9b99}
.select,.input,textarea{border:1px solid var(--line2);background:#12161e;color:var(--text);border-radius:11px;outline:none}
.select,.input{height:39px;padding:0 12px}
.select:focus,.input:focus,textarea:focus{border-color:#7251cf;box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.input::placeholder,textarea::placeholder{color:#5e6678}
.banner{display:none;border:1px solid rgba(246,200,95,.25);background:rgba(246,200,95,.08);color:#e9d192;padding:11px 13px;border-radius:11px;font-size:11px;margin-bottom:17px}
.view{display:none}.view.active{display:block}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{background:linear-gradient(145deg,rgba(19,23,32,.96),rgba(15,18,25,.96));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.kpi{padding:17px 18px;position:relative;overflow:hidden}
.kpi:after{content:"";position:absolute;width:75px;height:75px;border-radius:50%;right:-27px;top:-31px;background:rgba(139,92,246,.07)}
.kpi-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.kpi-icon{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:#1b202b;color:#929bac}
.kpi-icon svg{width:15px;height:15px}
.kpi-value{font:800 25px "Manrope";letter-spacing:-.04em;margin-top:13px}
.kpi-hint{color:#747e91;font-size:10.5px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.commission{border-color:rgba(39,194,129,.23)}
.kpi.commission .kpi-value{color:#75e9b0}
.kpi.commission .kpi-icon{background:rgba(39,194,129,.10);color:#64dfaa}
.row2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.72fr);gap:12px;margin-top:12px}
.pad{padding:19px}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}
.cardhead h2{margin:0;font:700 14px "Manrope";letter-spacing:-.02em}
.cardhead span{font-size:10px;color:var(--muted)}
.goal-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.goal-value{font:800 31px "Manrope";letter-spacing:-.05em}
.goal-label{font-size:10px;color:var(--muted);margin-bottom:5px}
.commission-pill{border:1px solid rgba(39,194,129,.23);background:rgba(39,194,129,.08);padding:9px 11px;border-radius:12px;text-align:right}
.commission-pill small{display:block;color:#73a68f;font-size:9px}.commission-pill b{color:#7aebb3;font:800 17px "Manrope"}
.progress-wrap{margin-top:18px}
.progress-labels{display:flex;justify-content:space-between;color:#616b7e;font-size:9px;margin-bottom:7px}
.progress{height:9px;background:#1c2130;border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7357e7,#9f73ff);border-radius:99px;box-shadow:0 0 20px rgba(139,92,246,.35)}
.goal-micro{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.micro{background:#12161e;border:1px solid #202633;border-radius:12px;padding:10px}
.micro small{display:block;color:#697286;font-size:9px}.micro b{display:block;font-size:11.5px;margin-top:4px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.tier{padding:10px;border-radius:11px;border:1px solid #242a38;background:#12161e}
.tier b{font:700 11px "Manrope"}.tier span{display:block;color:#687184;font-size:9px;margin-top:3px}
.tier.active{border-color:rgba(39,194,129,.35);background:rgba(39,194,129,.065)}
.tier.active b{color:#7ae5b1}
.statuses{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.status{padding:11px;border-radius:12px;background:#12161e;border:1px solid #202633}
.status b{font:800 18px "Manrope";display:block}.status small{color:#747d8e;font-size:9px}
.chart-card canvas{display:block;width:100%;height:230px}
.rank{display:flex;flex-direction:column;gap:7px}
.rankrow{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:9px;padding:8px 9px;background:#12161e;border:1px solid #202633;border-radius:11px}
.ranknum{width:23px;height:23px;border-radius:8px;background:#1c2230;display:grid;place-items:center;color:#8c95a7;font:800 9px "Manrope"}
.rankname{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankval{font:700 10.5px "Manrope";color:#d8dde7}
.attention{display:flex;flex-direction:column}
.attrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid #202633}
.attrow:last-child{border-bottom:0}
.attleft{display:flex;align-items:center;gap:10px;min-width:0}
.atticon{width:30px;height:30px;border-radius:10px;background:rgba(246,200,95,.08);color:#e6c56a;display:grid;place-items:center;flex:none}
.atticon svg{width:14px;height:14px}
.attleft b{font-size:10.5px;display:block}.attleft small{color:#687184;font-size:9.5px}
.link{border:0;background:transparent;color:#a78bfa;padding:0;font-size:10px;font-weight:700}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toolbar .search{min-width:260px;flex:1}
.tablewrap{overflow:auto;border:1px solid #202633;border-radius:13px}
table{border-collapse:collapse;width:100%;min-width:980px;background:#10141b}
th,td{padding:10px 11px;text-align:left;border-bottom:1px solid #1e2430;font-size:10.5px;vertical-align:middle}
th{position:sticky;top:0;background:#151923;color:#667084;text-transform:uppercase;letter-spacing:.07em;font-size:8.5px;z-index:2}
tr:hover td{background:#131820}
.badge{display:inline-flex;align-items:center;gap:5px;border:1px solid #2a3140;background:#171c26;color:#aab2c0;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:700;white-space:nowrap}
.badge.green{background:rgba(39,194,129,.08);border-color:rgba(39,194,129,.2);color:#71dbaa}
.badge.yellow{background:rgba(246,200,95,.07);border-color:rgba(246,200,95,.18);color:#ddc179}
.badge.purple{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.20);color:#b19af5}
.badge.blue{background:rgba(83,168,255,.07);border-color:rgba(83,168,255,.18);color:#8cc6ff}
.badge.red{background:rgba(239,100,97,.08);border-color:rgba(239,100,97,.2);color:#ffaaa8}
.empty{text-align:center;padding:42px 14px;color:#596274;font-size:11px}
.formcard{max-width:940px}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.formgrid .full{grid-column:1/-1}
label{display:block;color:#8d96a8;font-size:9.5px;font-weight:700;margin-bottom:6px}
.req{color:#a78bfa}
.formgrid input,.formgrid select,.formgrid textarea{width:100%}
textarea{min-height:82px;padding:10px 12px;resize:vertical}
.sectionintro{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}
.sectionintro h2{font:800 20px "Manrope";margin:0;letter-spacing:-.035em}
.sectionintro p{color:#707a8c;font-size:10.5px;max-width:650px;margin:5px 0 0;line-height:1.5}
.split{display:grid;grid-template-columns:minmax(330px,.75fr) minmax(0,1.25fr);gap:12px}
.pending-card{padding:19px}
.pending-list{display:flex;flex-direction:column;gap:8px}
.pending-item{padding:12px;border-radius:13px;background:#12161e;border:1px solid #202633}
.pending-top{display:flex;justify-content:space-between;gap:10px}
.pending-name{font-weight:700;font-size:11.5px}.pending-value{font:800 12px "Manrope";color:#f4d47a}
.pending-meta{display:flex;gap:8px;flex-wrap:wrap;color:#626b7d;font-size:9px;margin-top:5px}
.pending-actions{display:flex;gap:7px;margin-top:10px}
.audititem{display:grid;grid-template-columns:130px 85px 1fr;gap:12px;padding:11px 4px;border-bottom:1px solid #202633;font-size:9.5px}
.audititem time{color:#687184}.auditkind{font-weight:800}.auditkind.delete{color:#ff9290}.auditkind.change{color:#efc862}.auditkind.add{color:#69dcaa}.auditkind.manual{color:#b39af9}
.drawerback{position:fixed;inset:0;background:rgba(0,0,0,.58);display:none;z-index:50;backdrop-filter:blur(3px)}
.drawer{position:fixed;right:-570px;top:0;width:min(540px,94vw);height:100vh;background:#0e1218;border-left:1px solid var(--line);z-index:60;transition:.24s;padding:24px;overflow:auto;box-shadow:-30px 0 70px rgba(0,0,0,.4)}
.drawer.open{right:0}.drawerback.open{display:block}
.drawerclose{float:right;width:34px;height:34px;border:1px solid var(--line);background:#161b24;color:#aab3c2;border-radius:10px;display:grid;place-items:center}
.drawerclose svg{width:15px;height:15px}
.drawer h2{font:800 19px "Manrope";margin:0 0 3px}.muted{color:#707a8d;font-size:10px}
.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0}
.detail{background:#12161e;border:1px solid #202633;border-radius:11px;padding:10px}
.detail small{display:block;color:#687184;font-size:8.5px;margin-bottom:4px}.detail b{font-size:10.5px}
.notes{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.note{background:#12161e;border:1px solid #202633;border-radius:11px;padding:10px;font-size:10px}
.note time{display:block;color:#616a7c;font-size:8px;margin-top:5px}
.settingsgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.settingsgrid input,.settingsgrid select{width:100%}
.code{background:#090c11;border:1px solid #202633;color:#8690a3;border-radius:11px;padding:12px;font:9px ui-monospace,Consolas,monospace;overflow:auto;white-space:pre-wrap}
.toast{position:fixed;right:22px;bottom:22px;background:#151a22;border:1px solid #2b3342;color:#e8ecf3;padding:11px 14px;border-radius:12px;box-shadow:var(--shadow);font-size:10px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:100}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1050px){.app{grid-template-columns:76px 1fr}.brandtext,.nav span,.navlabel,.sidefooter{display:none}.brand{justify-content:center;padding-left:0;padding-right:0}.nav button{justify-content:center;padding:11px}.kpis{grid-template-columns:repeat(2,1fr)}.row2,.split{grid-template-columns:1fr}}
@media(max-width:700px){.main{padding:18px 15px 42px}.topbar{flex-direction:column}.kpis{grid-template-columns:1fr 1fr}.kpi-value{font-size:20px}.row2{grid-template-columns:1fr}.goal-micro,.tiers{grid-template-columns:1fr}.formgrid,.settingsgrid{grid-template-columns:1fr}.formgrid .full{grid-column:auto}.audititem{grid-template-columns:1fr}.topactions{width:100%}.topactions .select{flex:1}}

/* ===== v4 premium + comfortable scale ===== */
:root{
  --bg:#080a0f;--panel:#11151d;--panel2:#151a24;--panel3:#1a202c;
  --line:#252c3a;--line2:#323b4d;--text:#f7f8fc;--muted:#929bad;
  --soft:#c4cad6;--purple:#8b5cf6;--purple2:#b49cff;--green:#2ecf8c;
  --yellow:#f2c55f;--red:#f06f6c;--blue:#62b1ff;
}
body{
  background:
    radial-gradient(circle at 78% -10%,rgba(139,92,246,.16),transparent 34%),
    radial-gradient(circle at 5% 18%,rgba(71,116,255,.07),transparent 28%),
    linear-gradient(180deg,#090b11 0%,#080a0f 100%);
}
.app{grid-template-columns:278px minmax(0,1fr)}
.sidebar{padding:30px 18px;background:rgba(12,15,21,.92);box-shadow:18px 0 40px rgba(0,0,0,.12)}
.brand{padding:0 10px 30px}
.brandmark{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#9a6bff,#6846e6);box-shadow:0 14px 34px rgba(139,92,246,.30),inset 0 1px 0 rgba(255,255,255,.18)}
.brandmark svg{width:22px;height:22px}.brandtext b{font-size:18px}.brandtext span{font-size:12px}
.navlabel{font-size:9.5px;padding:12px 13px 8px;color:#616a7c}
.nav button{padding:13px 14px;font-size:14.5px;border-radius:14px;gap:12px}
.nav button svg{width:19px;height:19px}
.nav button.active{background:linear-gradient(100deg,rgba(139,92,246,.24),rgba(139,92,246,.07));border-color:rgba(165,135,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.main{padding:36px 40px 64px}.topbar{margin-bottom:28px}
.hello h1{font-size:36px}.hello p{font-size:14px;margin-top:7px}
.btn{height:46px;padding:0 16px;font-size:13.5px;border-radius:13px}.btn svg{width:17px;height:17px}
.select,.input{height:46px;padding:0 14px;font-size:13.5px;border-radius:13px}
.card{border-color:#252c39;background:linear-gradient(145deg,rgba(20,24,33,.98),rgba(15,18,25,.98));box-shadow:0 18px 50px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.018)}
.kpis{gap:16px}.kpi{padding:22px 23px;border-radius:20px}
.kpi-head{font-size:11.5px}.kpi-icon{width:36px;height:36px;border-radius:11px}.kpi-icon svg{width:17px;height:17px}
.kpi-value{font-size:31px;margin-top:16px}.kpi-hint{font-size:12px;margin-top:7px}
.row2{gap:16px;margin-top:16px}.pad{padding:24px}
.cardhead{margin-bottom:21px}.cardhead h2{font-size:16.5px}.cardhead span{font-size:11.5px}
.goal-value{font-size:39px}.goal-label{font-size:11.5px}
.commission-pill{padding:12px 14px;border-radius:14px}.commission-pill small{font-size:10px}.commission-pill b{font-size:21px}
.progress{height:12px}.progress-labels{font-size:10px;margin-bottom:8px}
.goal-micro{gap:10px;margin-top:17px}.micro{padding:13px 14px}.micro small{font-size:10.5px}.micro b{font-size:14px}
.tiers{gap:9px;margin-top:15px}.tier{padding:12px 13px}.tier b{font-size:12.5px}.tier span{font-size:10px}
.statuses{gap:10px}.status{padding:14px}.status b{font-size:23px}.status small{font-size:10.5px}
.rankrow{padding:11px 12px}.ranknum{width:28px;height:28px;font-size:10px}.rankname{font-size:12.5px}.rankval{font-size:12px}
.attrow{padding:13px 2px}.atticon{width:36px;height:36px}.attleft b{font-size:12px}.attleft small{font-size:10.5px}
.sectionintro h2{font-size:25px}.sectionintro p{font-size:12px}
.formgrid{gap:14px}label{font-size:11px;margin-bottom:7px}
textarea{min-height:104px;padding:13px 14px;font-size:13px}
.toolbar{gap:10px;margin-bottom:15px}th,td{padding:14px 13px;font-size:12px}th{font-size:9.5px}
.badge{padding:5px 8px;font-size:10.5px}
.pending-item{padding:16px;border-radius:15px}.pending-name{font-size:13px}.pending-value{font-size:14px}
.pending-meta{font-size:10.5px;margin-top:7px}.pending-actions{margin-top:12px}
.audititem{grid-template-columns:155px 100px 1fr;font-size:11px;padding:13px 4px}
.detail{padding:12px}.detail small{font-size:9.5px}.detail b{font-size:12px}
.note{font-size:11.5px;padding:12px}.muted{font-size:11px}
.kpi:first-child{background:linear-gradient(145deg,rgba(24,26,38,.99),rgba(14,17,24,.99))}
.kpi.commission{background:radial-gradient(circle at 100% 0%,rgba(46,207,140,.09),transparent 36%),linear-gradient(145deg,rgba(17,27,25,.98),rgba(13,19,20,.98))}
.source-shell{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px;padding:13px 14px 13px 15px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(18,22,30,.96),rgba(13,16,22,.96));border-radius:17px}
.source-title{display:flex;align-items:center;gap:10px;min-width:190px}
.source-title-icon{width:35px;height:35px;border-radius:11px;background:rgba(139,92,246,.11);color:#bca7ff;display:grid;place-items:center}
.source-title-icon svg{width:16px;height:16px}.source-title b{display:block;font:700 12px "Manrope"}.source-title small{display:block;color:#727c8e;font-size:9.5px;margin-top:2px}
.source-switch{display:flex;align-items:center;gap:6px;padding:5px;background:#0c1016;border:1px solid #202735;border-radius:13px}
.source-switch button{border:0;background:transparent;color:#768093;padding:9px 12px;border-radius:9px;font-weight:700;font-size:11.5px;display:flex;align-items:center;gap:7px}
.source-switch button svg{width:14px;height:14px}
.source-switch button.active{background:linear-gradient(145deg,#252b39,#1b202c);color:#f1edff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.26),0 5px 16px rgba(0,0,0,.14)}
.source-caption{color:#7c8598;font-size:10.5px;margin:0 0 17px 2px}
.editing-note{display:none;color:#c7b9ff;font-size:11.5px;margin-bottom:14px;padding:11px 12px;border:1px solid rgba(139,92,246,.25);background:rgba(139,92,246,.075);border-radius:12px}
.editing-note.show{display:block}.form-actions{display:flex;gap:9px;align-items:center}
@media(max-width:1050px){.app{grid-template-columns:84px 1fr}.main{padding:28px 24px 52px}.source-shell{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.main{padding:20px 16px 45px}.hello h1{font-size:30px}.kpi-value{font-size:24px}.source-switch{width:100%;overflow:auto}.source-switch button{white-space:nowrap}}