/* SHAHG Ad Network - dashboard UI (palette sampled from reference screenshots) */
:root{
--sidebar:#32636a;--sidebar-active:#2d595f;--sidebar-text:#c9d6d7;--sidebar-muted:#8fb0b4;
--teal:#1a92a2;--teal-d:#127684;--orange:#ff7a34;--heading:#00353d;--text:#2c3e42;
--muted:#6a7e81;--cream:#faf7f4;--line:#e8e4de;--line-l:#f0ece6;
--green:#16a690;--lime:#72a800;--red:#e05252;--bar:#c3d4d6;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'DM Sans',Campton,'Segoe UI',sans-serif}
html,body{height:100%}
body{background:#fff;color:var(--text);font-size:15px;display:flex;min-height:100vh}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Sidebar ---------- */
.sidebar{background:var(--sidebar);color:var(--sidebar-text);display:flex;flex-direction:column;flex-shrink:0;min-height:100vh;width:288px;position:sticky;top:0;height:100vh}
.sb-logo{padding:26px 22px 14px}
.sb-logo .logo-box{align-items:center;background:#fff;border-radius:10px;display:flex;height:44px;justify-content:center;width:44px}
.sb-logo .logo-box.wide{padding:6px 10px;width:auto;max-width:160px}
.sb-logo .logo-box img{max-height:30px;max-width:130px;display:block}
.sb-logo .logo-box span{color:#111;font-size:26px;font-weight:800;line-height:1}
.sb-account{padding:4px 22px 22px}
.sb-account .email{color:var(--sidebar-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-account .balance{color:#fff;font-size:15px;font-weight:700;margin-top:6px}
.sb-nav{display:flex;flex-direction:column}
.sb-nav a{align-items:center;color:var(--sidebar-text);display:flex;font-size:16px;gap:14px;padding:15px 24px;text-decoration:none;transition:background .15s}
.sb-nav a svg{fill:none;stroke:currentColor;stroke-width:1.7;height:21px;width:21px;flex-shrink:0}
.sb-nav a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.sb-nav a.on{background:var(--sidebar-active);color:#fff}
.sb-manager{margin-top:34px;padding:0 24px}
.sb-manager .mlabel{color:var(--sidebar-muted);font-size:13px;margin-bottom:16px}
.sb-manager .mrow{align-items:center;display:flex;gap:12px}
.sb-manager .avatar{align-items:center;background:#fff;border-radius:50%;color:var(--sidebar);display:flex;font-size:16px;font-weight:700;height:44px;justify-content:center;width:44px;flex-shrink:0}
.sb-manager .mname{color:#fff;font-size:14.5px;font-weight:500}
.sb-manager .memail a{color:var(--sidebar-muted);font-size:12px}

/* ---------- Main / topbar ---------- */
.main{display:flex;flex:1;flex-direction:column;min-width:0}
.topbar{background:var(--cream);color:var(--muted);font-size:15px;font-weight:500;padding:22px 32px}
.page{flex:1;padding:26px 32px 48px}
.page-head{align-items:center;display:flex;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px}
.page-head h1{color:var(--heading);font-size:24px;font-weight:700}

/* ---------- Buttons ---------- */
.btn{background:var(--teal);border:none;border-radius:4px;color:#fff !important;cursor:pointer;font-size:14.5px;font-weight:500;padding:12px 20px;text-decoration:none !important;transition:background .15s;display:inline-block}
.btn:hover{background:var(--teal-d)}
.btn.plus:before{content:"+";margin-right:8px}
.btn-o{background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--muted) !important;cursor:pointer;font-size:13.5px;padding:8px 14px;text-decoration:none !important}
.btn-o:hover{border-color:var(--teal);color:var(--teal) !important}

/* ---------- Cards ---------- */
.layout-2col{display:grid;gap:26px;grid-template-columns:1fr 260px;align-items:start}
@media(max-width:1100px){.layout-2col{grid-template-columns:1fr}}
.side-card{background:var(--cream);padding:26px}
.side-card h3{color:var(--heading);font-size:16.5px;font-weight:700;margin-bottom:14px}
.side-card .big-orange{color:var(--orange);font-size:24px;font-weight:700;margin-bottom:22px}
.side-card .kv{margin-bottom:20px}
.side-card .kv .k{color:var(--muted);font-size:13.5px;margin-bottom:4px}
.side-card .kv .v{color:var(--heading);font-size:19px;font-weight:700}

/* ---------- Tabs (Earnings) ---------- */
.tabs{border-bottom:1px solid var(--line);display:flex;gap:34px;margin-bottom:26px}
.tabs a{color:var(--heading);font-size:16px;font-weight:500;padding:0 2px 12px;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{border-bottom-color:var(--orange);color:var(--orange)}
.tabs a:hover{text-decoration:none}

/* ---------- Tables ---------- */
table.ct{border-collapse:collapse;width:100%}
table.ct thead td{color:var(--muted);font-size:14px;font-weight:500;padding:12px 14px;border-bottom:1px solid var(--line)}
table.ct tbody td{border-bottom:1px solid var(--line-l);font-size:15px;padding:20px 14px;vertical-align:middle}
table.ct tbody tr:hover{background:#fcfbf9}
table.ct .r{text-align:right}
.status-active{color:var(--green);font-weight:500}
.status-paid{color:var(--lime);font-weight:500}
.status-pending{color:var(--orange);font-weight:500}
.status-rejected{color:var(--red);font-weight:500}
.status-inactive{color:var(--muted)}
.unit-line{align-items:center;display:flex;gap:10px;padding:5px 0;font-size:14px}
.unit-line .dot{background:var(--lime);border-radius:50%;height:8px;width:8px;flex-shrink:0}
.unit-line .dot.off{background:#c9c4bc}
.unit-line a{color:var(--text)}
.unit-line a:hover{color:var(--teal)}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ---------- Checkbox / filters row ---------- */
.filters-row{align-items:center;display:flex;gap:26px;margin-bottom:18px;flex-wrap:wrap}
.filters-row label.chk{align-items:center;color:var(--text);display:flex;font-size:14.5px;gap:9px;cursor:pointer}
.quick-links{display:flex;gap:16px}
.quick-links a{color:var(--teal);font-size:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field .flabel{color:var(--heading);font-size:13px;font-weight:700}
.field input,.field select{background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--text);font-size:14.5px;padding:11px 12px;min-width:170px}
.field input:focus,.field select:focus{border-color:var(--teal);outline:none}

/* ---------- Payout request ---------- */
.pay-methods{display:flex;gap:26px;margin:8px 0 22px;flex-wrap:wrap}
.pay-card{border:1px solid var(--line);cursor:pointer;padding:18px 22px 26px;position:relative;width:318px}
.pay-card.sel{border:1px solid var(--teal)}
.pay-card .ptag{color:var(--heading);font-size:11.5px;font-weight:700;letter-spacing:.4px;margin-bottom:16px}
.pay-card .prow{align-items:center;display:flex;gap:12px}
.pay-card .prow b{color:var(--heading);font-size:16px}
.pay-note{align-items:flex-start;color:var(--muted);display:flex;font-size:14px;gap:10px;line-height:1.6;margin-bottom:34px}
.pay-note svg{stroke:var(--teal);fill:none;stroke-width:1.7;height:18px;width:18px;margin-top:2px;flex-shrink:0}
.pay-note b{color:var(--heading)}
h2.sec{color:var(--heading);font-size:19px;font-weight:700;margin-bottom:20px}
.pay-form{align-items:flex-end;display:flex;gap:34px;flex-wrap:wrap;margin-bottom:26px}
.pay-form .field input.addr{min-width:440px}
.receive{color:var(--muted);font-size:14.5px;padding-bottom:12px}
.receive b{color:var(--heading)}
hr.sep{border:none;border-top:1px solid var(--line);margin:8px 0 26px}

/* ---------- Charts ---------- */
.chart-head{align-items:center;display:flex;justify-content:space-between;margin-bottom:18px}
.chart-head h1{color:var(--heading);font-size:24px;font-weight:700}
.chart-wrap{position:relative;height:340px;margin-bottom:10px}
.csv-row{display:flex;justify-content:flex-end;margin:6px 0 14px}
.csv-row a{align-items:center;display:flex;font-size:14px;gap:6px}

/* ---------- Modal ---------- */
.modal-bg{align-items:flex-start;background:rgba(0,53,61,.45);display:none;inset:0;justify-content:center;padding-top:90px;position:fixed;z-index:60}
.modal{background:#fff;border-radius:6px;box-shadow:0 16px 44px rgba(0,0,0,.22);padding:28px;width:460px;max-width:92vw}
.modal h3{color:var(--heading);font-size:18px;font-weight:700;margin-bottom:18px}
.modal .mfoot{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}
.modal .field{margin-bottom:14px}
.modal .field input,.modal .field select{width:100%}
pre.codebox{background:var(--cream);border:1px solid var(--line);border-radius:4px;font-family:monospace;font-size:12.5px;line-height:1.6;padding:14px;white-space:pre-wrap;word-break:break-all;color:#0f3a41}
.msg-ok{background:#e8f5e4;border-radius:4px;color:#3e7a2e;font-size:14px;margin-bottom:16px;padding:12px 15px}
.msg-err{background:#fdecec;border-radius:4px;color:#b03434;font-size:14px;margin-bottom:16px;padding:12px 15px}

/* ---------- Auth pages ---------- */
.auth-body{align-items:center;background:var(--cream);display:flex;justify-content:center;min-height:100vh;width:100%}
.auth-card{background:#fff;border-radius:8px;box-shadow:0 10px 34px rgba(0,53,61,.08);padding:40px;width:400px;max-width:92vw}
.auth-card .alogo{margin-bottom:8px;text-align:center}
.auth-card .alogo img{max-height:34px}
.auth-card h1{color:var(--heading);font-size:21px;font-weight:700;margin-bottom:24px;text-align:center}
.auth-card label{color:var(--heading);display:block;font-size:13px;font-weight:700;margin:0 0 6px}
.auth-card input{border:1px solid var(--line);border-radius:4px;font-size:15px;margin-bottom:18px;padding:12px 13px;width:100%}
.auth-card input:focus{border-color:var(--teal);outline:none}
.auth-card .btn{width:100%;text-align:center;padding:13px}
.auth-card .alt{color:var(--muted);font-size:14px;margin-top:18px;text-align:center}
.auth-card .aerr{background:#fdecec;border-radius:4px;color:#b03434;font-size:13.5px;margin-bottom:16px;padding:11px 13px}

.sb-manager .avatar-img{border-radius:50%;height:44px;object-fit:cover;width:44px;flex-shrink:0}
/* aligned unit sub-columns in websites table */
.ucell{display:flex;flex-direction:column}
.ucell .uline{align-items:center;display:flex;gap:10px;height:31px;font-size:14.5px}
.ucell .uline .dot{background:var(--lime);border-radius:50%;height:8px;width:8px;flex-shrink:0}
.ucell .uline .dot.off{background:#c9c4bc}
.ucell .uline a{color:var(--text)}
.ucell .uline a:hover{color:var(--teal)}
.ucell .uline.num{justify-content:flex-start;color:var(--text)}
.row-actions a{color:var(--teal);margin-left:18px;font-size:14.5px;white-space:nowrap}