[hidden] { display: none !important; }
:root { color-scheme: dark; --void:#06080a; --hull:#0a0d10; --hull2:#0f1317; --text:#dde5e9; --dim:#7f8c94; --faint:#465158; --ion:#a6e6f2; --ok:#7fe0a8; --varn:#f2c46b; --fel:#f28b82; --line:rgba(196,226,236,.16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--void); color: var(--text); font: 300 1rem/1.6 "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; color: var(--ion); }
a { color: var(--ion); }
.ram { max-width: 64rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.topp { position: sticky; top: 0; z-index: 5; background: rgba(6,8,10,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topp .ram { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-block: .8rem; }
.logga { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .28em; font-size: .78rem; color: var(--text); text-decoration: none; }
.logga span { color: var(--faint); letter-spacing: .1em; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; }
nav a { color: var(--dim); text-decoration: none; } nav a:hover { color: var(--ion); }
.vem { margin-left: auto; font-size: .78rem; color: var(--faint); font-family: ui-monospace, Menlo, Consolas, monospace; }
.vem.in { color: var(--ok); }
.hero { padding-block: 3rem 1.5rem; display: grid; gap: .8rem; }
h1 { margin: 0; font-weight: 200; font-size: clamp(2rem, 1.2rem + 3.5vw, 3.4rem); line-height: 1.05; text-wrap: balance; }
h1 em { font-style: normal; color: var(--ion); }
.hero p { margin: 0; color: var(--dim); max-width: 40rem; }
h2 { font-weight: 300; font-size: 1.4rem; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
h2 small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-family: ui-monospace, Menlo, Consolas, monospace; }
h3 { font-weight: 400; font-size: .95rem; margin: .4rem 0; color: var(--dim); }
.nr { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; color: var(--ion); }
.del { padding-block: 2rem; }
.kort { border: 1px solid var(--line); background: var(--hull); padding: 1.25rem; display: grid; gap: .9rem; min-width: 0; }
.tva { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 700px) { .tva { grid-template-columns: minmax(0, 1fr); } }
.tavla { display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); background: var(--line); border: 1px solid var(--line); }
.ruta { background: var(--hull); padding: 1rem; display: grid; gap: .3rem; align-content: start; }
.ruta b { font-weight: 400; display: flex; align-items: center; gap: .5rem; }
.ruta b::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--faint); flex: none; }
.ruta.ok b::before { background: var(--ok); } .ruta.varn b::before { background: var(--varn); }
.ruta span { font-size: .8rem; color: var(--dim); }
label { display: grid; gap: .3rem; font-size: .8rem; color: var(--dim); }
input { font: inherit; color: var(--text); background: var(--void); border: 1px solid var(--line); padding: .6rem .7rem; min-width: 0; width: 100%; }
input:focus { outline: 1px solid var(--ion); outline-offset: -1px; }
button { font: 400 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; padding: .75rem 1rem; background: var(--ion); color: var(--void); border: 1px solid var(--ion); cursor: pointer; }
button.sek { background: transparent; color: var(--ion); }
button:disabled { opacity: .5; cursor: wait; }
.rad { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.rad.bred > input { flex: 1 1 12rem; width: auto; }
.panel { display: grid; gap: .8rem; max-width: 26rem; }
.flikar { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); justify-self: start; border: 1px solid var(--line); }
.flik { background: var(--hull); color: var(--dim); border: 0; }
.flik.vald { background: var(--hull2); color: var(--ion); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); }
.lista:empty { display: none; }
.lista li { background: var(--hull2); padding: .7rem .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; min-width: 0; }
.lista li > .vx { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.lista li small { color: var(--dim); display: block; }
.lista.klick li { cursor: pointer; } .lista.klick li:hover { background: var(--hull); color: var(--ion); }
.las { line-height: 1.7; overflow-wrap: anywhere; }
.las h2 { font-size: 1.25rem; display: block; margin: 0; }
.las .meta { margin: 0; }
.las .meta { font-size: .78rem; color: var(--faint); font-family: ui-monospace, Menlo, Consolas, monospace; }
.chatt { display: grid; gap: .6rem; max-height: 26rem; overflow-y: auto; }
.chatt:empty::before { content: "Ställ en fråga. Svaret kommer från modellen som är inställd i zk_ai_installningar."; color: var(--faint); font-size: .85rem; }
.msg { padding: .7rem .9rem; border: 1px solid var(--line); max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.du { justify-self: end; background: var(--hull2); }
.msg.ai { justify-self: start; border-color: rgba(166,230,242,.35); }
.msg.sys { justify-self: center; color: var(--varn); font-size: .85rem; border-style: dashed; }
.svar { margin: 0; font-size: .85rem; min-height: 1.2em; }
.svar.fel { color: var(--fel); } .svar.ok { color: var(--ok); }
.dim { color: var(--dim); margin: 0; } .liten { font-size: .8rem; }
.fot { padding-block: 3rem; font-size: .8rem; color: var(--faint); border-top: 1px solid var(--line); margin-top: 2rem; }