/* KiabVPN portal styles. Uses the site's own theme variables. */
.kv-app{max-width:1120px;margin:0 auto;padding:7.5rem 1.2rem 4rem;min-height:70vh}
.kv-h1{font-family:var(--hf);font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.1}
.kv-narrow{max-width:460px;margin:0 auto;display:grid;gap:1rem}
.kv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.kv-card{background:color-mix(in srgb,var(--bg) 82%,var(--accent) 6%);border:1px solid var(--line);border-radius:var(--r,16px);padding:1.2rem 1.25rem;display:grid;gap:.75rem;align-content:start;min-width:0}
.kv-card h2{font-family:var(--hf);font-size:1.15rem}
.kv-wide{grid-column:1/-1}
.kv-main{display:grid;gap:1rem}
.kv-form{display:grid;gap:.7rem}
.kv-ft{font-family:var(--hf);font-size:1.1rem}
.kv-f{display:grid;gap:.3rem;font-size:.88rem;min-width:0}
.kv-f>span{color:var(--muted);font-weight:600}
.kv-app input:not([type=checkbox]):not([type=file]),.kv-app select,.kv-app textarea,.kv-co input,.kv-co textarea{width:100%;padding:.7rem .85rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font:inherit;font-size:16px}
.kv-app input:focus,.kv-app select:focus,.kv-app textarea:focus,.kv-co input:focus,.kv-co textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.kv-app select option{background:var(--bg);color:var(--text)}
.kv-app input[type=file]{font-size:.85rem;max-width:100%;color:var(--muted)}
.kv-msg{padding:.6rem .8rem;border-radius:12px;background:color-mix(in srgb,#22c55e 14%,transparent);border:1px solid color-mix(in srgb,#22c55e 40%,transparent);font-size:.9rem}
.kv-msg.bad{background:color-mix(in srgb,#ef4444 14%,transparent);border-color:color-mix(in srgb,#ef4444 45%,transparent)}
.kv-msg[hidden]{display:none}
.kv-link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;justify-self:start}
.kv-swap{font-size:.88rem;color:var(--muted)}
.kv-sm{padding:.5rem .95rem!important;font-size:.88rem!important}
.kv-st{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap;border:1px solid currentColor}
.kv-st.ok{color:#4ade80}.kv-st.warn{color:#fbbf24}.kv-st.bad{color:#f87171}.kv-st.off{color:var(--muted)}
.kv-big{font-family:var(--hf);font-size:1.35rem}
.kv-dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;font-size:.92rem}.kv-dl dt{color:var(--muted)}
.kv-list{display:grid;gap:.5rem}
.kv-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);min-width:0}
.kv-row>div{display:grid;gap:.15rem;min-width:0}.kv-row small{overflow-wrap:anywhere}
.kv-rowbtn{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}.kv-rowbtn:hover{border-color:var(--accent)}
.kv-item{display:grid;gap:.6rem;padding:.2rem;border-radius:14px}
details.kv-item{border:1px solid var(--line);padding:0}
details.kv-item>summary{list-style:none;cursor:pointer;border:0}details.kv-item>summary::-webkit-details-marker{display:none}
details.kv-item[open]{padding-bottom:.9rem}details.kv-item[open]>:not(summary){margin:0 .9rem}
.kv-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.kv-acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.kv-acts .kv-f{min-width:160px}
.kv-prof{display:grid;gap:.6rem;padding:.8rem;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.kv-danger{color:#f87171!important}
button[disabled]{opacity:.5;cursor:not-allowed}
.kv-pre{white-space:pre-wrap;overflow-wrap:anywhere}
.kv-small{font-size:.85rem}
.kv-note{padding:.7rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,transparent);font-size:.9rem}
.kv-thread{display:grid;gap:.6rem;max-height:480px;overflow:auto;padding:.2rem}
.kv-bubble{padding:.65rem .85rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);max-width:88%}
.kv-bubble.me{justify-self:end;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.kv-ann{display:grid;gap:.2rem;padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.kv-hr{border:0;border-top:1px solid var(--line)}
.kv-tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1rem;scrollbar-width:thin}
.kv-tabs a{flex:none;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:.9rem;text-decoration:none}
.kv-tabs a.on{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
.kv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}
.kv-tile{display:grid;gap:.2rem;padding:1rem;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.035);text-decoration:none;color:inherit}
.kv-tile b{font-family:var(--hf);font-size:1.8rem}.kv-tile span{color:var(--muted);font-size:.86rem}.kv-tile:hover{border-color:var(--accent)}
.kv-steps{padding-left:1.2rem;display:grid;gap:.4rem}
.kv-srow{display:grid;grid-template-columns:1.2fr .8fr 1.5fr auto;gap:.5rem;align-items:center}
.kv-check{display:flex;gap:.5rem;align-items:center;font-weight:600}
.kv-co{display:grid;gap:.6rem}.kv-co .kv-form{gap:.55rem}.kv-co .btn{width:100%}
.kv-co .kv-swap .kv-link{width:auto}
.kv-done{display:grid;gap:.6rem;text-align:center;justify-items:center}.kv-done h4{font-family:var(--hf);font-size:1.2rem}
.kv-step{font-size:.82rem}
.co.co-order .co-step,.co.co-order .co-help{display:none}
@media(max-width:640px){.kv-app{padding-top:6.2rem}.kv-srow{grid-template-columns:1fr 1fr}.kv-srow input:last-of-type{grid-column:1/-1}.kv-row{flex-wrap:wrap}.kv-bubble{max-width:100%}}
.kv-co .btn{opacity:1!important;transform:none!important;animation:none!important}
.kv-card>.kv-st,.kv-done>.kv-st{justify-self:start}.kv-done>.kv-st{justify-self:center}
.kv-co .kv-msg{text-align:left}

/* VPN manager (Pritunl-style) */
.kv-vpn{display:grid;gap:1rem}
.kv-vtable-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}
.kv-vtable{width:100%;border-collapse:collapse;font-size:.88rem;min-width:860px}
.kv-vtable th,.kv-vtable td{padding:.55rem .65rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.kv-vtable th{color:var(--muted);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;background:rgba(255,255,255,.03);position:sticky;top:0}
.kv-vtable tr.on td{background:color-mix(in srgb,#22c55e 8%,transparent)}
.kv-vtable td.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}
.kv-vtable .kv-acts{gap:.35rem}
.kv-vtable td .kv-acts .btn{padding:.35rem .65rem!important;font-size:.78rem!important}