/* ============================================================
   MAMBA WEBCAMS — design system (single source of truth)
   OG cam-site vibe: compact, boxy, purple/orange/black/blue.
   ============================================================ */
:root{
  --purple:#5b2a9e; --purple-d:#3d1566; --purple-bar:#2c0f4d;
  --orange:#ff7a18; --orange-soft:#ffe9d6;
  --blue:#2f8fd8; --green:#2fa84f; --red:#c0392b;
  --bg:#e9e9ef; --panel:#ffffff; --panel-head:#f3f2f7; --line:#dcdae4;
  --ink:#20202a; --ink-soft:#6b6b7a;
  /* platform colors — one source of truth */
  --cb:#f6a623; --sc:#e63946; --mfc:#2fa84f; --cs:#e84393; --bm:#b0246a; --c4:#f26522;
  --f4f:#1f6fd6; --sm:#3a4a5a; --lj:#c9922e; --am:#d33;
  /* tipper tiers */
  --t-grey:#8a8a95; --t-blue:#2f6fd8; --t-dblue:#1b3fa0; --t-purple:#8e44ad; --t-pink:#d63384; --t-king:#b8860b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Verdana,Geneva,'Segoe UI',sans-serif;font-size:12px;color:var(--ink);background:var(--bg)}
button{font-family:inherit}
a{color:var(--purple)}
.hidden{display:none!important}

/* ---- logo (Pornhub-style wordmark) ---- */
.logo{display:flex;align-items:center;gap:7px}
.logo img{height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.logo .txt{display:flex;align-items:center;font-weight:900;font-size:16px;font-family:'Arial Black',Arial,sans-serif}
.logo .txt .m{color:#fff}
.logo .txt .w{background:var(--orange);color:#101018;padding:0 6px;border-radius:5px;margin-left:4px}

/* ---- top bar ---- */
.topbar{display:flex;align-items:flex-end;gap:10px;background:linear-gradient(180deg,var(--purple),var(--purple-d));padding:0 12px;height:46px;flex:0 0 auto;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.topbar .logo{padding-bottom:8px}
.tabs{display:flex;align-items:flex-end;gap:3px;overflow-x:auto;flex:1;padding-left:6px}
.tab-top{display:flex;align-items:center;gap:6px;background:#e9dffb;border-radius:7px 7px 0 0;padding:6px 12px;font-weight:800;font-size:11px;cursor:pointer;white-space:nowrap;color:#5a4a78;opacity:.85;border:0}
.tab-top.active{opacity:1;background:var(--bg);color:var(--purple)}
.tab-top .dot{width:8px;height:8px;border-radius:50%}
.tab-top .dot.live{background:var(--green);box-shadow:0 0 5px var(--green)}
.tab-top .dot.off{background:#bbb}
.tab-top.add{background:transparent;color:#cbb8e6;border:1px dashed #6a4b96}
.top-right{display:flex;align-items:center;gap:8px;font-size:11px;padding-bottom:8px}
.top-right .pill{background:rgba(255,255,255,.13);color:#fff;padding:3px 8px;border-radius:20px}
.top-right a{color:#e7dcff;text-decoration:none;cursor:pointer}

/* ---- layout ---- */
.app{display:flex;flex-direction:column;height:100vh}
.scroll{flex:1 1 auto;overflow-y:auto;padding:9px}

/* ---- KPI ---- */
.kpis{display:grid;gap:8px;margin-bottom:9px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.kpi .l{color:var(--ink-soft);font-size:9px;text-transform:uppercase;letter-spacing:.4px}
.kpi .v{font-size:19px;font-weight:900;color:var(--purple);margin-top:2px}
.kpi .v small{font-size:11px;color:var(--ink-soft);font-weight:700}
.kpi.good .v{color:var(--green)}

/* ---- panel ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:9px}
.panel .ph{background:var(--panel-head);border-bottom:1px solid var(--line);padding:6px 9px;font-weight:800;font-size:10px;letter-spacing:.4px;color:var(--ink-soft);text-transform:uppercase;display:flex;align-items:center;gap:6px}
.panel .ph .more{margin-left:auto;color:var(--purple);cursor:pointer;font-size:10px}
.panel .ph select{margin-left:auto;font-size:10px;border:1px solid var(--line);border-radius:4px;background:#fff;padding:1px 3px}
.panel .pb{padding:7px 9px}
.section-h{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);margin:2px 2px 7px}

/* ---- buttons ---- */
.btn{border:1px solid var(--line);background:#fff;border-radius:5px;padding:6px 12px;font-weight:800;cursor:pointer;font-size:11px}
.btn.pri{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn.orange{background:var(--orange);color:#101018;border-color:var(--orange)}
.btn.sm{padding:4px 8px;font-size:10px}
.btn.block{width:100%}

/* ---- lists ---- */
.li{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid #f2f2f5;font-size:11px}
.li:last-child{border-bottom:0}
.li .av{width:20px;height:20px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:9px;flex:0 0 auto}
.li .sub{color:var(--ink-soft);font-size:9px}
.li .tag{margin-left:auto;font-weight:800;color:var(--purple);white-space:nowrap}
.li .on{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.li .onoff{width:7px;height:7px;border-radius:50%;background:#bbb;flex:0 0 auto}

/* ---- tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:10px}
.tbl th,.tbl td{padding:4px 6px;border-bottom:1px solid #eee;text-align:right}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl thead th{color:var(--ink-soft);font-size:9px;text-transform:uppercase}
.tbl tfoot td{font-weight:900;color:var(--purple);border-top:2px solid var(--line)}
.tbl .b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}

/* ---- misc ---- */
.prog{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin-top:3px}
.prog>i{display:block;height:100%;background:var(--orange)}
.chip{display:inline-block;background:#efe9fb;color:var(--purple);border-radius:9px;padding:1px 7px;font-size:9px;font-weight:700;margin:1px}
.minibars{display:flex;align-items:flex-end;gap:6px;height:60px;padding:4px 2px 16px}
.minibars .bar{flex:1;background:linear-gradient(180deg,var(--purple),#8e5fd0);border-radius:3px 3px 0 0;position:relative}
.minibars .bar span{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font-size:8px;color:var(--ink-soft)}
.alert{display:flex;gap:7px;align-items:flex-start;padding:5px 0;border-bottom:1px solid #f2f2f5;font-size:11px;line-height:1.3}
.alert:last-child{border-bottom:0}
.alert.warn{color:#b3550a}.alert.bad{color:var(--red)}

/* tipper tier text colors */
.t-grey{color:var(--t-grey)}.t-blue{color:var(--t-blue)}.t-dblue{color:var(--t-dblue)}
.t-purple{color:var(--t-purple)}.t-pink{color:var(--t-pink)}.t-king{color:var(--t-king)}

/* ---- login gate ---- */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#7a3fd0,#3d1566 70%,#2c0f4d)}
.gate .box{background:#fff;border-radius:14px;padding:26px 26px 22px;width:340px;box-shadow:0 20px 60px rgba(20,8,50,.4)}
.gate .brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}
.gate .brand img{height:34px}
.gate .brand .txt{display:flex;align-items:center;font-weight:900;font-size:20px;font-family:'Arial Black',Arial,sans-serif}
.gate .brand .txt .m{color:var(--purple-d)}
.gate .brand .txt .w{background:var(--orange);color:#101018;padding:1px 7px;border-radius:6px;margin-left:5px}
.gate h2{text-align:center;font-size:14px;letter-spacing:.5px;color:var(--ink);margin:0 0 16px}
.gate label{display:block;font-size:10px;font-weight:800;color:var(--purple);text-transform:uppercase;letter-spacing:.5px;margin:10px 0 4px}
.gate input{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-size:13px}
.gate input:focus{outline:2px solid var(--purple);border-color:var(--purple)}
.gate .go{width:100%;margin-top:16px;background:var(--purple);color:#fff;border:0;border-radius:8px;padding:11px;font-weight:800;font-size:13px;cursor:pointer}
.gate .err{color:var(--red);font-size:11px;text-align:center;margin-top:10px;min-height:14px}
.gate .foot{text-align:center;color:var(--ink-soft);font-size:10px;margin-top:14px}

/* ---- boss/space layout (shared) ---- */
.wall{column-count:4;column-gap:9px}
@media(max-width:1200px){.wall{column-count:3}}
@media(max-width:820px){.wall{column-count:2}}
.wall .panel{break-inside:avoid;display:inline-block;width:100%;vertical-align:top}
.mrow{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #f2f2f5}
.mrow:last-child{border-bottom:0}
.mrow .th{width:52px;height:30px;border-radius:4px;background:#111;position:relative;flex:0 0 auto;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#555;font-size:16px}
.mrow .th .l{position:absolute;top:2px;left:2px;background:var(--red);color:#fff;font-size:7px;font-weight:800;padding:0 3px;border-radius:2px}
.mrow .th .o{position:absolute;top:2px;left:2px;background:#555;color:#fff;font-size:7px;font-weight:800;padding:0 3px;border-radius:2px}
.mrow .nm{font-weight:800}
.mrow .sd{display:flex;gap:2px;margin-top:2px}
.mrow .sd i{width:7px;height:7px;border-radius:50%;display:block}
.mrow .sd i.off{opacity:.3}
.mrow .rt{margin-left:auto;text-align:right}
.mrow .rt b{color:var(--purple)}
.mrow .rt .t{color:var(--ink-soft);font-size:9px}
.mrow .open{margin-left:6px;border:1px solid var(--purple);background:var(--purple);color:#fff;border-radius:5px;padding:4px 7px;font-weight:800;cursor:pointer;font-size:9px;flex:0 0 auto}
.field{margin-bottom:8px}
.field label{display:block;font-size:10px;font-weight:800;color:var(--purple);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:7px 9px;font-size:12px;font-family:inherit}
.field textarea{min-height:54px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}