:root{
  --ground:#E8EAE6; --surface:#F7F8F5; --raised:#FFFFFF;
  --ink:#1B262E; --ink-2:#4A5760; --line:#CDD2CC;
  --hi:#F2B705; --hi-ink:#1B262E; --steel:#2F5D7C; --ok:#2E7D4F; --bad:#B3261E;
  --display:"Archivo",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark; --ground:#141B20; --surface:#1B242A; --raised:#222D34;
  --ink:#E7ECEA; --ink-2:#A3AFB5; --line:#34424A; --hi:#F5C22E; --hi-ink:#141B20; --steel:#7DB0D2; --ok:#5DBB84; --bad:#F2887F;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.55 var(--body);padding-inline:16px}
img{max-width:100%}
a{color:var(--steel)}
.wrap{max-width:1120px;margin:0 auto}
.narrow{max-width:520px}
h1,h2,h3,.h2{font-family:var(--display);font-stretch:80%;line-height:1.08;text-wrap:balance;margin:0}
.h2,h2{font-size:clamp(26px,4vw,38px)}
h3{font-size:19px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--steel);outline-offset:2px}
code{font-family:var(--mono);background:var(--surface);padding:1px 5px;border-radius:4px}

/* top bar */
.bar{position:sticky;top:0;z-index:5;background:var(--ground);border-bottom:1px solid var(--line);margin-inline:-16px;padding:10px 16px}
.bar .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:22px;color:var(--ink);text-decoration:none}
.logo i{width:28px;height:28px;background:repeating-linear-gradient(-45deg,var(--hi) 0 6px,var(--ink) 6px 12px);border-radius:3px;display:block}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav a{padding:8px 12px;border-radius:6px;font-weight:500;color:var(--ink-2);text-decoration:none}
nav a[aria-current="page"]{background:var(--ink);color:var(--ground)}
nav a:hover:not([aria-current="page"]){background:var(--surface);color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end;padding-block:36px 24px}
.eyebrow{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--steel);margin-bottom:10px}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:800}
.hero h1 mark{background:var(--hi);color:var(--hi-ink);padding:0 6px}
.hero p,.lead{color:var(--ink-2);max-width:60ch}
.stats{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:20px;font-size:13px;color:var(--ink-2)}
.stats b{display:block;font:500 20px var(--mono);color:var(--ink)}

/* forms */
.search,.panel{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:18px}
.search{display:grid;gap:10px}
.f{display:grid;gap:12px}
label{font-size:12px;font-weight:600;color:var(--ink-2);display:grid;gap:4px}
select,input,textarea{font-weight:400;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px;width:100%;font-size:15px}
input[type=file]{padding:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:inline-block;text-align:center;text-decoration:none;background:var(--ink);color:var(--ground);border:0;border-radius:6px;padding:11px 16px;font-weight:600;cursor:pointer}
.btn.hi{background:var(--hi);color:var(--hi-ink)}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn.small{padding:6px 10px;font-size:13px}
.btn.danger{background:none;color:var(--bad);border:1px solid var(--bad)}
.btn:hover{filter:brightness(1.08)}
.hp{position:absolute;left:-9999px}
.alert{padding:12px 14px;border-radius:8px;margin:16px 0;border:1px solid}
.alert.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.alert.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.note{font-size:13px;color:var(--ink-2)}

/* list */
.listhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:13px;color:var(--ink);text-decoration:none}
.chip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{background:var(--raised);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.card:hover{border-color:var(--ink-2)}
.card.prem{border-top:4px solid var(--hi)}
.thumbs{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;height:150px;background:var(--line)}
.thumbs>*{min-height:0;min-width:0;overflow:hidden}
.thumbs>*:first-child{grid-row:span 2}
.thumbs img,.thumbs .ph{width:100%;height:100%;display:block;object-fit:cover}
.ph{background:repeating-linear-gradient(-45deg,var(--surface) 0 10px,var(--ground) 10px 20px);display:grid;place-items:center;color:var(--ink-2);font:500 12px var(--mono)}
.cbody{padding:14px 16px 16px;display:grid;gap:8px}
.ctop{display:flex;justify-content:space-between;gap:8px;align-items:start}
.cname{font:700 19px/1.15 var(--display);font-stretch:82%}
.meta{font-size:13px;color:var(--ink-2)}
.badge{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:4px;white-space:nowrap;display:inline-block}
.badge.p{background:var(--hi);color:var(--hi-ink)}
.badge.b{border:1px solid var(--line);color:var(--ink-2)}
.badge.g{border:1px solid var(--ok);color:var(--ok)}
.badge.r{border:1px solid var(--bad);color:var(--bad)}
.facts{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);border-top:1px dashed var(--line);padding-top:10px}
.facts b{display:block;font:500 15px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.empty{padding:40px;text-align:center;color:var(--ink-2);border:1px dashed var(--line);border-radius:10px}

/* profile */
.profile{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;padding-block:28px;align-items:start}
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.work{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--raised)}
.work .im{aspect-ratio:4/3;max-width:100%}
.work .im img,.work .im .ph{width:100%;height:100%;object-fit:cover;display:block}
.work .t{padding:10px;font-size:13px;display:grid;gap:4px}
.work .t b{font-size:14px}
.sticky{position:sticky;top:76px}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:24px}
.plan{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:12px;align-content:start}
.plan.star{border:2px solid var(--ink)}
.price{font:800 36px var(--display);font-stretch:80%}
.price small{font:400 14px var(--body);color:var(--ink-2)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.plan li.no{color:var(--ink-2);text-decoration:line-through}
.plan li.no::before{border-color:var(--line)}
.upi{font:500 20px var(--mono);background:var(--surface);border:1px dashed var(--ink-2);padding:10px 12px;border-radius:8px;word-break:break-all}

/* dashboard / admin */
.dash{display:grid;grid-template-columns:340px 1fr;gap:20px;margin-block:20px;align-items:start}
.stack{display:grid;gap:20px}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
td form{display:inline}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}
.lead-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.lead-row:last-child{border:0}
.lead-row .meta{grid-column:1/-1}

.foot{border-top:1px solid var(--line);margin:48px -16px 0;padding:20px 16px;font-size:13px;color:var(--ink-2)}
.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:760px){
  .hero,.dash,.profile{grid-template-columns:1fr}
  nav{margin-left:0;width:100%}
  .row2{grid-template-columns:1fr}
  .sticky{position:static}
}