/* FiskeDex designsystem: farger, fonter, header, verktøylinje */

:root{
  --hav:#122b36;        /* ink navy */
  --hav-dyp:#0c1f28;
  --kart:#e3edee;       /* pale chart blue */
  --papir:#fbfaf5;      /* card */
  --boye:#e8612c;       /* buoy orange */
  --tang:#56684c;       /* kelp olive */
  --stamp:#c03a2b;      /* rubber stamp red */
  --blek:#5e7780;
  --linje:#c6d6d8;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--kart);color:var(--hav);font-family:'Public Sans',sans-serif;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:15px;color:var(--hav)}

/* ---------- header ---------- */
header{
  background:var(--hav);color:#f2efe6;position:relative;overflow:hidden;
  padding:78px 24px 62px;
}
header svg.depth{position:absolute;inset:0;width:100%;height:100%;opacity:.35;pointer-events:none}
.head-inner{max-width:1500px;margin:0 auto;position:relative}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;color:#9fb6ba;text-transform:uppercase}
h1{font-family:'Staatliches',sans-serif;font-size:clamp(66px,9.8vw,158px);line-height:.78;letter-spacing:.002em;margin:12px 0 10px;color:#f4f1e6;text-wrap:balance;max-width:1320px}
header h1.hero-title{font-size:clamp(70px,10.4vw,198px)!important;line-height:.76!important;max-width:1400px!important}
h1 .o{color:var(--boye)}
.tagline{color:#b9c9cc;font-size:18px;max-width:840px;margin-top:16px}
.progress-wrap{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.progress-bar{flex:1;min-width:200px;height:10px;background:#1f3d4a;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--boye),#f0a06a);width:0%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.progress-num{font-family:'Staatliches',sans-serif;font-size:34px;letter-spacing:.04em}
.progress-num small{font-size:15px;color:#9fb6ba;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;margin-left:6px}

/* ---------- toolbar ---------- */
.toolbar{max-width:1060px;margin:0 auto;padding:18px 20px 6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{
  border:1.5px solid var(--hav);background:transparent;color:var(--hav);
  padding:7px 14px;border-radius:99px;font-size:13px;font-weight:700;letter-spacing:.03em;
  transition:background .15s,color .15s;
}
.tab:hover{background:#d2e1e2}
.tab.active{background:var(--hav);color:#f2efe6}
.tab .cnt{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11px;opacity:.7;margin-left:4px}
.search{
  margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--papir);
  border:1.5px solid var(--linje);border-radius:99px;padding:7px 14px;min-width:200px;flex:1;max-width:280px;
}
.search input{border:none;outline:none;background:transparent;width:100%}
.btn-add{
  background:var(--boye);color:#fff;border:none;border-radius:99px;padding:9px 18px;
  font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:0 2px 0 #b3431a;
}
.btn-add:hover{filter:brightness(1.06)}
.filter-caught{display:flex;gap:6px}
.chip{border:1.5px dashed var(--blek);background:transparent;color:var(--blek);padding:6px 12px;border-radius:99px;font-size:12.5px;font-weight:600}
.chip.active{border-style:solid;border-color:var(--tang);color:var(--tang);background:#e8ecdf}

/* ---------- grid ---------- */
main{max-width:1060px;margin:0 auto;padding:14px 20px 80px}

@media (min-width:900px){ header{padding:78px 28px 62px} header h1.hero-title{font-size:clamp(88px,9.9vw,198px)!important;line-height:.76!important} }
@media (max-width:560px){ header{padding:44px 16px 34px} h1, header .hero-title{font-size:clamp(52px,18vw,82px)!important;line-height:.82!important} .tagline{font-size:15px} }

/* v7: litt mindre PC-tittel med tydelig overstyring */
@media (min-width:900px){ body header .head-inner h1.hero-title{font-size:clamp(88px,9.9vw,198px)!important;line-height:.76!important;} }

/* ---------- v11: ryddigere app-oppsett ---------- */
main{max-width:1200px;padding-bottom:110px}
.toolbar.main-toolbar{max-width:1200px;gap:12px;align-items:center;justify-content:space-between}
.main-nav{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.nav-tab{border:1.5px solid var(--hav);background:rgba(251,250,245,.36);color:var(--hav);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.02em;transition:background .15s,color .15s,transform .15s}
.nav-tab:hover{background:#d2e1e2;transform:translateY(-1px)}
.nav-tab.active{background:var(--hav);color:#f2efe6}
.dex-tools{max-width:1200px;margin:10px auto 0;padding:0 20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dex-tools .search{margin-left:auto}
.members-bar{max-width:1200px}
@media (max-width:760px){
  .toolbar.main-toolbar{justify-content:flex-start}.main-nav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.nav-tab{white-space:nowrap}.dex-tools .search{margin-left:0;max-width:none;flex-basis:100%}
}