/* ===== Business Management — Editorial Magazine Theme (shared by every page) ===== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
  --bg:#0a0b0d; --bg2:#0f1114; --panel:#15181c; --panel2:#1b1f24; --glass:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#f2f3f5; --muted:#9aa1ab; --dim:#5f6670;
  --accent:#ff4d1c; --accent2:#ff7a4d; --accent-soft:rgba(255,77,28,.15);
  --ok:#38d39f; --warn:#ffb020; --bad:#ff4d4d;
  --head:'Oswald',Impact,sans-serif; --body:'Inter',system-ui,sans-serif;
  --r:14px; --sh:0 10px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#1a1d22 0%,var(--bg) 55%) fixed;color:var(--text);font-family:var(--body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent2);text-decoration:none}
h1,h2,h3,h4,.h{font-family:var(--head);text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1}
h1{font-size:52px;font-weight:700} h2{font-size:30px;font-weight:600} h3{font-size:20px;font-weight:600;letter-spacing:.04em} h4{font-size:14px;color:var(--muted);letter-spacing:.14em}
.kicker{font-family:var(--head);text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--accent);font-weight:600}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:12px}

/* glossy glass card */
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.02) 35%,rgba(0,0,0,.12) 100%),var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:20px;overflow:hidden}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);opacity:.6}
.card.accent::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.card.tight{padding:14px 16px}

/* hero */
.hero{position:relative;border-radius:var(--r);overflow:hidden;min-height:170px;padding:30px 32px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(135deg,#1c2026 0%,#0e1013 60%,#0a0b0d 100%);border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:22px}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 10%,var(--accent-soft),transparent 60%),linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.65) 100%)}
.hero>*{position:relative}
.hero h1{font-size:64px;line-height:.92;margin-top:8px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero .sub{color:var(--muted);margin-top:10px;max-width:60ch}
.hero .num{position:absolute;right:28px;top:14px;font-family:var(--head);font-size:120px;font-weight:700;color:rgba(255,255,255,.04);line-height:1}

/* layout */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,#121417,#0c0e11);border-right:1px solid var(--line);padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.brand{font-family:var(--head);font-size:22px;font-weight:700;letter-spacing:.06em;padding:4px 10px 18px;text-transform:uppercase}
.brand b{color:var(--accent)}
.nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:var(--muted);font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:14px;font-weight:500;transition:all .18s;border:1px solid transparent}
.nav a:hover{color:var(--text);background:var(--glass)}
.nav a.on{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:var(--line2);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.nav a.on i{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.nav i{width:6px;height:6px;border-radius:50%;background:var(--dim);transition:all .2s}
.side .foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.main{padding:26px 32px 60px;min-width:0}
.subnav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.subnav a{padding:7px 12px;border-radius:8px;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--muted);transition:.15s}
.subnav a:hover{color:var(--text)} .subnav a.on{color:#fff;background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(255,77,28,.35)}
.tabs{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:18px}
.tabs a{padding:8px 16px;border-radius:8px;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:14px}
.tabs a.on{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 4px 14px rgba(255,77,28,.35)}

.grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .sb{justify-content:space-between} .right{margin-left:auto}
.stat .v{font-family:var(--head);font-size:34px;font-weight:600;letter-spacing:.01em;margin-top:6px} .stat .l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.stat.up .v{color:var(--ok)} .stat.down .v{color:var(--bad)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);margin:18px 0}

/* controls */
button,.btn{font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:600;padding:10px 16px;border-radius:9px;border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));color:var(--text);cursor:pointer;transition:all .15s;box-shadow:0 4px 12px rgba(0,0,0,.3)}
button:hover,.btn:hover{border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
button.primary,.btn.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));border-color:transparent;color:#fff;box-shadow:0 6px 20px rgba(255,77,28,.35)}
button.ghost{background:transparent;box-shadow:none} button.sm{padding:6px 10px;font-size:11px} button.danger{color:var(--bad)}
button:disabled{opacity:.5;cursor:default;transform:none}
input,select,textarea{width:100%;background:#0c0e11;border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:9px;font:inherit;transition:.15s;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),inset 0 2px 6px rgba(0,0,0,.5)}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 6px}
.field{margin-bottom:14px} .form{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px} .form .full{grid-column:1/-1}
.chk{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--text)} .chk input{width:auto;box-shadow:none}

/* table */
table{width:100%;border-collapse:collapse} th{text-align:left;font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line2);font-weight:500}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--glass)} tr.click{cursor:pointer} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:40px;text-align:center;color:var(--dim);font-family:var(--head);text-transform:uppercase;letter-spacing:.2em}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--line2);color:var(--muted)}
.badge.ok{color:var(--ok);border-color:rgba(56,211,159,.4)} .badge.warn{color:var(--warn);border-color:rgba(255,176,32,.4)} .badge.bad{color:var(--bad);border-color:rgba(255,77,77,.4)} .badge.accent{color:var(--accent2);border-color:rgba(255,77,28,.5)}

/* modal / drawer */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;z-index:50;animation:fade .2s}
.modal{width:min(880px,100%);max-height:calc(100vh - 80px);overflow:auto;animation:rise .25s cubic-bezier(.2,.8,.2,1)}
@keyframes fade{from{opacity:0}} @keyframes rise{from{transform:translateY(16px);opacity:0}}
.toast{position:fixed;bottom:22px;right:22px;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--accent);padding:12px 16px;border-radius:10px;box-shadow:var(--sh);z-index:99;animation:rise .25s}
.toast.bad{border-left-color:var(--bad)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 500px at 70% 20%,rgba(255,77,28,.12),transparent 60%),var(--bg)}
.login .card{width:min(440px,100%);padding:36px}
.login h1{font-size:46px;line-height:.95;margin:6px 0 24px}

.fade{animation:fade .3s}
@media (max-width:900px){.app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap}.main{padding:18px}.g2,.g3,.g4{grid-template-columns:1fr}.form{grid-template-columns:1fr}.hero h1{font-size:40px}}