/* Admin styles. Tokens and type match the portfolio so both feel like one product. */
:root { --bg:#efeeea; --card:#f6f5f1; --ink:#111214; --mute:#5d5f5c; --rule:#d9d8d2; --btn:#111214; --btn-ink:#f6f5f1; --ok:#2f6b46; --bad:#a23b3b; --warn:#8a5a14;
  --sans:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --mono:"JetBrains Mono", SFMono-Regular, Consolas, "Courier New", monospace; box-sizing:border-box; }
:root[data-theme="dark"] { --bg:#0e0f11; --card:#15171a; --ink:#ecebe7; --mute:#9a9c98; --rule:#27292d; --btn:#ecebe7; --btn-ink:#0e0f11; --ok:#6fbf8b; --bad:#e08080; --warn:#d7a85a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0e0f11; --card:#15171a; --ink:#ecebe7; --mute:#9a9c98; --rule:#27292d; --btn:#ecebe7; --btn-ink:#0e0f11; --ok:#6fbf8b; --bad:#e08080; --warn:#d7a85a; } }
*, *::before, *::after { box-sizing:inherit; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:15px/1.55 var(--sans); -webkit-text-size-adjust:100%; }
a { color:inherit; } h1,h2,h3,p { margin:0; } ul { list-style:none; margin:0; padding:0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.mono { font-family:var(--mono); font-size:12px; } .dim { color:var(--mute); } .nowrap { white-space:nowrap; }
.eyebrow { font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }

/* shell */
.shell { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:100vh; }
.side { position:sticky; top:0; align-self:start; height:100vh; overflow:auto; border-right:1px solid var(--rule); padding:22px 20px 24px; }
.brand { display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; text-decoration:none; margin-bottom:18px; } .brand span { font:500 11px var(--mono); color:var(--mute); letter-spacing:.1em; text-transform:uppercase; margin-left:6px; }
.side nav .eyebrow { margin:20px 0 8px; color:var(--mute); font-size:10.5px; }
.side nav a { display:block; padding:6px 0 6px 12px; margin-left:-12px; border-left:2px solid transparent; font-size:14px; color:var(--mute); text-decoration:none; }
.side nav a:hover { color:var(--ink); } .side nav a[aria-current] { color:var(--ink); border-left-color:var(--ink); font-weight:500; }
.theme-btn { margin-top:18px; background:none; border:0; padding:0; font:12px var(--mono); color:var(--mute); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.who { margin-top:14px; font-size:12px; color:var(--mute); } .menu-btn { display:none; }
.main { padding:0 clamp(18px,3vw,40px) 60px; min-width:0; max-width:1180px; width:100%; }
.top { padding:26px 0 0; } .top .eyebrow { color:var(--mute); }
.head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:6px 0 22px; }
.head h1 { font-size:clamp(24px,2.4vw,29px); font-weight:600; letter-spacing:-.02em; line-height:1.2; } .head-r { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.note { color:var(--mute); font-size:13.5px; margin:-8px 0 18px; max-width:60em; }

/* buttons + badges */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:2px; border:1px solid var(--btn); color:var(--ink); background:transparent; font:500 14px var(--sans); text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--btn); color:var(--btn-ink); } .btn.primary { background:var(--btn); color:var(--btn-ink); } .btn.primary:hover { opacity:.88; }
.btn.small { padding:5px 12px; font-size:12.5px; } .btn.danger { border-color:var(--rule); color:var(--bad); } .btn.danger:hover { background:var(--bad); border-color:var(--bad); color:#fff; }
form.inline { display:inline; margin:0; }
.badge { display:inline-block; font:11px var(--mono); padding:2px 8px; border-radius:3px; background:var(--rule); color:var(--mute); } .badge.ok { color:var(--ok); } .badge.warn { color:var(--warn); }
.flash { padding:11px 14px; margin:18px 0 0; border:1px solid var(--rule); border-left:3px solid var(--ink); background:var(--card); font-size:14px; } .flash.ok { border-left-color:var(--ok); } .flash.err { border-left-color:var(--bad); }
.empty { border:1px dashed var(--rule); padding:32px; text-align:center; color:var(--mute); }

/* forms */
.form { max-width:640px; } .form.wide { max-width:760px; } fieldset { border:1px solid var(--rule); background:var(--card); padding:6px 20px 14px; margin:0 0 20px; min-width:0; }
legend { font:500 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; padding:0 8px; }
.field { margin:16px 0; } .field label { display:block; font-size:12.5px; font-weight:500; margin-bottom:6px; } .field label i { color:var(--bad); font-style:normal; }
input[type=text], input[type=url], input[type=email], input[type=number], input[type=password], select, textarea, input:not([type]) { width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:2px; background:var(--bg); color:var(--ink); font:15px var(--sans); }
input[type=file] { font:13px var(--sans); color:var(--mute); max-width:100%; }
textarea { resize:vertical; line-height:1.5; } .help { font-size:12.5px; color:var(--mute); margin-top:6px; }
.check { display:inline-flex !important; align-items:center; gap:8px; font-weight:400 !important; } .check input { width:16px; height:16px; accent-color:var(--ink); }
.bar { display:flex; gap:10px; margin:22px 0 0; } .bar.sticky { position:sticky; bottom:0; padding:14px 0; background:var(--bg); border-top:1px solid var(--rule); }
.current { display:flex; align-items:center; gap:16px; margin-bottom:10px; flex-wrap:wrap; } .current img { max-height:90px; max-width:200px; border:1px solid var(--rule); display:block; }
.inline-up { max-width:none; display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:22px; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; } .sw { position:relative; cursor:pointer; } .sw input { position:absolute; opacity:0; } .sw span { display:block; padding:16px 10px 6px; min-width:74px; font:10.5px var(--mono); color:rgba(242,241,237,.8); background:linear-gradient(135deg,var(--c1),var(--c2)); border:2px solid transparent; border-radius:2px; }
.sw input:checked + span { border-color:var(--ink); outline:2px solid var(--bg); outline-offset:-4px; } .sw input:focus-visible + span { outline:2px solid var(--ink); }
.c1 { --c1:#1a1c20; --c2:#08090a; } .c2 { --c1:#1c2738; --c2:#0b1018; } .c3 { --c1:#2e2030; --c2:#130d15; } .c4 { --c1:#1c2f27; --c2:#0b1511; }
.c5 { --c1:#33291a; --c2:#15110a; } .c6 { --c1:#1b2e33; --c2:#0a1416; } .c7 { --c1:#2c2540; --c2:#110e1b; } .c8 { --c1:#332020; --c2:#150c0c; }

/* lists */
.rowlist { border-top:1px solid var(--rule); } .rowitem { display:flex; align-items:center; gap:14px; padding:12px 6px; border-bottom:1px solid var(--rule); background:var(--bg); }
.rowitem .grow { flex:1; min-width:0; } .rowitem .grow p { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .grip { cursor:grab; color:var(--mute); letter-spacing:-2px; user-select:none; font-size:15px; }
.is-off { opacity:.55; } .dragging { opacity:.35; } .mv { padding:2px 8px; }
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.pcard { border:1px solid var(--rule); background:var(--card); display:flex; flex-direction:column; } .pcard:hover { border-color:var(--mute); }
.pcover { position:relative; height:110px; background:linear-gradient(135deg,var(--c1),var(--c2)); overflow:hidden; } .pcover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pcover .kind { position:absolute; left:12px; bottom:10px; font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#f2f1ed; background:rgba(0,0,0,.45); padding:2px 7px; border-radius:2px; } .pcover .grip { position:absolute; right:10px; top:6px; color:#f2f1ed; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.pbody { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; } .pbody h3 { font-size:15px; font-weight:600; line-height:1.3; } .pbody .dim, .pbody .meta { font-size:12.5px; color:var(--mute); } .pbody .actions { margin-top:auto; padding-top:8px; }

/* dashboard */
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; } .kpis.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kpi { border:1px solid var(--rule); background:var(--card); padding:16px 18px; } .kpi .eyebrow { color:var(--mute); font-size:10.5px; } .kpi b { display:block; font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin:6px 0 2px; } .kpi b.sm { font-size:20px; margin:12px 0 8px; } .kpi span { font-size:12.5px; color:var(--mute); }
.panel { border:1px solid var(--rule); background:var(--card); padding:16px 18px 18px; margin-bottom:20px; min-width:0; } .ph { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; } .ph h2 { font-size:15px; font-weight:600; } .ph a { font-size:13px; color:var(--mute); }
.two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; } .three-col { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.legend { font-size:12px; color:var(--mute); } .legend i { display:inline-block; width:10px; height:10px; margin:0 4px 0 10px; vertical-align:-1px; } .l1 { background:var(--mute); opacity:.45; } .l2 { background:var(--ink); }
.chart { width:100%; height:auto; display:block; } .chart .b1 { fill:var(--mute); opacity:.4; } .chart .b2 { fill:var(--ink); } .chart .ax { font:11px var(--mono); fill:var(--mute); }
.tbl { width:100%; border-collapse:collapse; font-size:13.5px; } .tbl th { text-align:left; font:500 10.5px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); padding:0 8px 8px 0; border-bottom:1px solid var(--rule); }
.tbl td { padding:8px 8px 8px 0; border-bottom:1px solid var(--rule); vertical-align:top; } .tbl tr:last-child td { border-bottom:0; } .tbl .num { text-align:right; white-space:nowrap; padding-right:0; } .tbl.small { font-size:12.5px; }
.tbl.bars td:first-child { position:relative; } .barbg { position:absolute; left:0; top:4px; bottom:4px; background:var(--rule); opacity:.7; z-index:0; } .bl { position:relative; z-index:1; padding-left:6px; }
.scroll { overflow-x:auto; } .stack { display:flex; flex-direction:column; align-items:flex-start; gap:6px; } .stack .help { margin:0 0 12px; } .pager { margin-top:14px; font-size:13px; color:var(--mute); }

/* gallery */
.ggrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; } .gitem { margin:0; border:1px solid var(--rule); background:var(--card); } .gitem img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--rule); }
.gitem figcaption { display:flex; flex-direction:column; gap:8px; padding:8px 10px 10px; align-items:flex-start; word-break:break-all; }

/* login */
body.login { display:grid; place-items:center; padding:24px; } .login-box { width:100%; max-width:380px; } .login-box h1 { font-size:30px; font-weight:700; letter-spacing:-.03em; margin:6px 0 10px; } .login-box .form { margin-top:16px; }

@media (max-width:1020px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .three-col { grid-template-columns:minmax(0,1fr); } }
@media (max-width:820px) {
  .shell { grid-template-columns:minmax(0,1fr); } .side { position:static; height:auto; border-right:0; border-bottom:1px solid var(--rule); padding:14px 18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
  .brand { margin:0; } .menu-btn { display:inline-block; background:none; border:1px solid var(--btn); color:var(--ink); padding:6px 14px; font:500 13px var(--sans); border-radius:2px; } .side nav { display:none; width:100%; padding-top:8px; } .side nav.open { display:block; }
  .two, .kpis, .kpis.three { grid-template-columns:minmax(0,1fr); } .rowitem { flex-wrap:wrap; } .rowitem .actions { width:100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }