/* Huninn DNS Control — UI stylesheet. Loaded AFTER assets/huninn.css (brand, unchanged).
   Colors + fonts: --hn-* from huninn.css. Spacing/radii: tokens.json. No other hex values.
   Tints are derived with color-mix() from the same tokens — no extra hex values. */
:root{
  color-scheme:dark;
  /* colors + @font-face come from ../assets/huninn.css (loaded first, unchanged) */
  /* tokens.json spacing / radii / fonts */
  --hn-sp-1:4px;--hn-sp-2:8px;--hn-sp-3:12px;--hn-sp-4:16px;--hn-sp-5:24px;--hn-sp-6:32px;--hn-sp-7:48px;--hn-sp-8:64px;
  --hn-r-control:6px;--hn-r-card:10px;--hn-r-dialog:14px;
  --hn-font-ui:"Huninn Sans",sans-serif;
  --hn-font-data:"Huninn Mono",monospace;
  /* type scale (CLAUDE_INTEGRATION.md) */
  --hn-h1:32px/38px var(--hn-font-ui);--hn-h2:20px/28px var(--hn-font-ui);
  --hn-body:14px/21px var(--hn-font-ui);--hn-meta:12px/18px var(--hn-font-ui);
  /* derived (token-only) */
  --hn-tint-primary:color-mix(in srgb,var(--hn-primary) 10%,transparent);
  --hn-tint-accent:color-mix(in srgb,var(--hn-accent) 12%,transparent);
  --hn-tint-success:color-mix(in srgb,var(--hn-success) 10%,transparent);
  --hn-tint-warning:color-mix(in srgb,var(--hn-warning) 10%,transparent);
  --hn-tint-danger:color-mix(in srgb,var(--hn-danger) 11%,transparent);
  --hn-line-soft:color-mix(in srgb,var(--hn-border) 60%,var(--hn-surface));
  --hn-scrim:color-mix(in srgb,var(--hn-bg) 78%,transparent);
  --hn-shadow:0 12px 32px color-mix(in srgb,var(--hn-bg) 80%,transparent);
  /* chart series: token colors only, fixed order, max 4 + "Altele" (muted) */
  --hn-series-1:var(--hn-primary);--hn-series-2:var(--hn-accent);--hn-series-3:var(--hn-warning);--hn-series-4:var(--hn-danger);--hn-series-5:var(--hn-muted);
  --hn-control-h:44px;--hn-sidebar-w:256px;--hn-header-h:64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--hn-bg);color:var(--hn-text);font:var(--hn-body);-webkit-font-smoothing:antialiased}
h1{font:700 var(--hn-h1);margin:0}
h2{font:700 var(--hn-h2);margin:0 0 var(--hn-sp-3)}
h3{font:700 var(--hn-meta);margin:0 0 var(--hn-sp-2);letter-spacing:.12em;text-transform:uppercase;color:var(--hn-muted)}
p{margin:0 0 var(--hn-sp-3)}
a{color:var(--hn-primary);text-decoration:none}a:hover{text-decoration:underline}
code,.mono,pre{font-family:var(--hn-font-data)}
code{font-size:12px;background:var(--hn-surface-raised);padding:0 var(--hn-sp-1);border-radius:var(--hn-r-control)}
pre{margin:0;white-space:pre-wrap;word-break:break-word;font:var(--hn-meta);font-family:var(--hn-font-data)}
.muted{color:var(--hn-muted)}.small{font:var(--hn-meta)}.nowrap{white-space:nowrap}
.ok-text{color:var(--hn-success)}.warn-text{color:var(--hn-warning)}.err-text{color:var(--hn-danger)}
:focus-visible{outline:2px solid var(--hn-primary);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
[hidden]{display:none!important}

/* ---------- buttons & inputs (min 44px) ---------- */
button,.btn{font:700 var(--hn-body);display:inline-flex;align-items:center;justify-content:center;gap:var(--hn-sp-2);min-height:var(--hn-control-h);padding:0 var(--hn-sp-4);border-radius:var(--hn-r-control);border:1px solid var(--hn-border);background:var(--hn-surface-raised);color:var(--hn-text);cursor:pointer;white-space:nowrap;text-decoration:none}
button:hover,.btn:hover{border-color:var(--hn-muted);text-decoration:none}
button:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--hn-primary);border-color:var(--hn-primary);color:var(--hn-bg)}
.btn-primary:hover{filter:brightness(1.08);border-color:var(--hn-primary)}
.btn-accent{background:var(--hn-tint-accent);border-color:var(--hn-accent);color:var(--hn-text)}
.btn-danger{background:transparent;border-color:var(--hn-danger);color:var(--hn-danger)}
.btn-danger.solid{background:var(--hn-danger);color:var(--hn-bg)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--hn-muted)}
.btn-ghost:hover{color:var(--hn-text);border-color:var(--hn-border)}
.btn-sm{padding:0 var(--hn-sp-3);font:700 var(--hn-meta)}
.btn-icon{min-width:var(--hn-control-h);padding:0 var(--hn-sp-2)}
input,select,textarea{font:var(--hn-body);color:var(--hn-text);background:var(--hn-bg);border:1px solid var(--hn-border);border-radius:var(--hn-r-control);padding:0 var(--hn-sp-3);min-height:var(--hn-control-h);width:100%}
textarea{padding:var(--hn-sp-3);min-height:96px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--hn-muted) 50%),linear-gradient(135deg,var(--hn-muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--hn-sp-6)}
input:hover,select:hover,textarea:hover{border-color:var(--hn-muted)}
input:focus,select:focus,textarea:focus{border-color:var(--hn-primary);outline:none;box-shadow:0 0 0 3px var(--hn-tint-primary)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--hn-primary);outline-offset:1px}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;accent-color:var(--hn-primary);padding:0;margin:0;cursor:pointer;flex:0 0 20px}
.cb{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hn-control-h);min-height:var(--hn-control-h);cursor:pointer}
input.invalid,select.invalid,textarea.invalid{border-color:var(--hn-danger)}
.field{display:flex;flex-direction:column;gap:var(--hn-sp-1);margin-bottom:var(--hn-sp-4)}
.field>label,.field .label{font-weight:700}
.field .help{color:var(--hn-muted);font:var(--hn-meta)}
.field .error{color:var(--hn-danger);font:var(--hn-meta)}
.check{display:flex;gap:var(--hn-sp-3);align-items:center;cursor:pointer;min-height:var(--hn-control-h)}
.input-group{display:flex;align-items:stretch}
.input-group input{border-top-right-radius:0;border-bottom-right-radius:0}
.input-group .suffix{display:flex;align-items:center;padding:0 var(--hn-sp-3);border:1px solid var(--hn-border);border-left:0;border-radius:0 var(--hn-r-control) var(--hn-r-control) 0;background:var(--hn-surface-raised);color:var(--hn-muted);font:var(--hn-meta);font-family:var(--hn-font-data);white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--hn-sp-4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--hn-sp-4)}
.row{display:flex;gap:var(--hn-sp-3);align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}.row.between{justify-content:space-between}
.spacer{flex:1}
.mt{margin-top:var(--hn-sp-4)}.mb{margin-bottom:var(--hn-sp-4)}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:var(--hn-sidebar-w) minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--hn-bg);border-right:1px solid var(--hn-border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}
/* logo: wordmark >=160px wide, clear space >=16% of symbol height (padding 16px) */
.brand{display:flex;align-items:center;min-height:var(--hn-header-h);padding:var(--hn-sp-2) var(--hn-sp-4);border-bottom:1px solid var(--hn-border)}
.brand a{display:block;padding:var(--hn-sp-1)}
.brand img,.header-logo img{width:210px;height:auto;display:block}
/* original board crops: fade only the edges so the board background (#06101C) blends into --hn-bg; logo pixels untouched */
.brand img,.header-logo img,.login .art img,.login .card .mobile-logo img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.nav{padding:var(--hn-sp-3) var(--hn-sp-3) var(--hn-sp-5);display:flex;flex-direction:column;gap:var(--hn-sp-1)}
.nav .group{font:var(--hn-meta);letter-spacing:.18em;color:var(--hn-muted);text-transform:uppercase;padding:var(--hn-sp-4) var(--hn-sp-3) var(--hn-sp-2)}
.nav a{display:flex;align-items:center;gap:var(--hn-sp-3);min-height:var(--hn-control-h);padding:0 var(--hn-sp-3);border-radius:var(--hn-r-control);color:var(--hn-text);border:1px solid transparent}
.nav a:hover{background:var(--hn-surface);text-decoration:none}
.nav a.active{background:var(--hn-surface);border-color:var(--hn-border);color:var(--hn-primary);box-shadow:inset 3px 0 0 var(--hn-primary)}
.nav svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.side-foot{margin-top:auto;padding:var(--hn-sp-4);border-top:1px solid var(--hn-border);font:var(--hn-meta);color:var(--hn-muted)}
.main{min-width:0;display:flex;flex-direction:column}
.header{min-height:var(--hn-header-h);display:flex;align-items:center;gap:var(--hn-sp-4);padding:0 var(--hn-sp-5);border-bottom:1px solid var(--hn-border);background:var(--hn-bg);position:sticky;top:0;z-index:20}
.header-logo{display:none}
.header .search{flex:1;max-width:460px;position:relative}
.header .search input{padding-left:40px;background:var(--hn-surface)}
.header .search svg{position:absolute;left:var(--hn-sp-3);top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--hn-muted);fill:none;stroke-width:2}
.menu-btn{display:none}
.usermenu{position:relative;margin-left:auto}
.usermenu>button{background:transparent;border-color:transparent;font-weight:400}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--hn-accent);color:var(--hn-bg);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.dropdown{position:absolute;right:0;top:calc(100% + var(--hn-sp-1));min-width:232px;background:var(--hn-surface-raised);border:1px solid var(--hn-border);border-radius:var(--hn-r-card);padding:var(--hn-sp-1);box-shadow:var(--hn-shadow);z-index:40}
.dropdown .who{padding:var(--hn-sp-2) var(--hn-sp-3);font:var(--hn-meta);color:var(--hn-muted)}
.dropdown a,.dropdown button{display:flex;width:100%;justify-content:flex-start;background:transparent;border:0;color:var(--hn-text);padding:0 var(--hn-sp-3);border-radius:var(--hn-r-control);font-weight:400}
.dropdown a{min-height:var(--hn-control-h);align-items:center}
.dropdown a:hover,.dropdown button:hover{background:var(--hn-surface);text-decoration:none}
.dropdown .sep{height:1px;background:var(--hn-border);margin:var(--hn-sp-1) 0}
.content{padding:var(--hn-sp-5) var(--hn-sp-5) var(--hn-sp-7);max-width:1440px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--hn-sp-4);flex-wrap:wrap;margin-bottom:var(--hn-sp-5)}
.page-head .sub{color:var(--hn-muted);margin-top:var(--hn-sp-1);max-width:820px}
.page-head .title-row{display:flex;align-items:center;gap:var(--hn-sp-3);flex-wrap:wrap}
.page-head h1{overflow-wrap:anywhere}
.crumbs{font:var(--hn-meta);color:var(--hn-muted);margin-bottom:var(--hn-sp-1)}.crumbs a{color:var(--hn-muted)}

/* ---------- panels, tiles ---------- */
.panel{background:var(--hn-surface);border:1px solid var(--hn-border);border-radius:var(--hn-r-card);padding:var(--hn-sp-5);min-width:0}
.panel+.panel{margin-top:var(--hn-sp-4)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-sp-3);flex-wrap:wrap;margin-bottom:var(--hn-sp-4)}
.panel-head h2{margin:0}
.panel-head .desc{color:var(--hn-muted);font:var(--hn-meta);margin-top:var(--hn-sp-1)}
.texture-dots{background-image:url("../assets/texture-dots.svg")}
.texture-grid{background-image:url("../assets/texture-grid.svg")}
.texture-feather{background-image:url("../assets/texture-feather.svg")}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--hn-sp-4);margin-bottom:var(--hn-sp-4)}
.tile{background:var(--hn-surface);border:1px solid var(--hn-border);border-radius:var(--hn-r-card);padding:var(--hn-sp-4) var(--hn-sp-5);min-width:0}
.tile .k{font:var(--hn-meta);color:var(--hn-muted)}
.tile .v{font:700 var(--hn-h1);margin-top:var(--hn-sp-1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile .d{font:var(--hn-meta);color:var(--hn-muted);margin-top:var(--hn-sp-1)}
.layout2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--hn-sp-4);align-items:start}
.layout-half{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hn-sp-4);align-items:start}
.layout2>.panel+.panel,.layout-half>.panel+.panel,.layout2>.col+.col{margin-top:0}
.col{min-width:0}.col>.panel+.panel{margin-top:var(--hn-sp-4)}
.gap-top{margin-top:var(--hn-sp-4)}
.callout{border:1px solid var(--hn-border);border-left:3px solid var(--hn-accent);background:var(--hn-tint-accent);border-radius:var(--hn-r-control);padding:var(--hn-sp-3) var(--hn-sp-4);margin-bottom:var(--hn-sp-4)}
.callout.warn{border-left-color:var(--hn-warning);background:var(--hn-tint-warning)}
.callout.err{border-left-color:var(--hn-danger);background:var(--hn-tint-danger)}
.callout.ok{border-left-color:var(--hn-success);background:var(--hn-tint-success)}
.callout strong{display:block;margin-bottom:var(--hn-sp-1)}
details.explain{border:1px solid var(--hn-border);border-radius:var(--hn-r-control);padding:0 var(--hn-sp-3);margin-bottom:var(--hn-sp-4);color:var(--hn-muted)}
details.explain summary{cursor:pointer;color:var(--hn-text);font-weight:700;min-height:var(--hn-control-h);display:flex;align-items:center}
details.explain[open]{padding-bottom:var(--hn-sp-3)}
details.explain p:last-child{margin:0}
dl.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:var(--hn-sp-2) var(--hn-sp-5);margin:0}
dl.kv dt{color:var(--hn-muted)}dl.kv dd{margin:0;overflow-wrap:anywhere}

/* ---------- status pills: dot + label (never color alone) ---------- */
.pill{display:inline-flex;align-items:center;gap:var(--hn-sp-2);padding:0 var(--hn-sp-3);border-radius:999px;font:var(--hn-meta);line-height:22px;border:1px solid var(--hn-border);white-space:nowrap;color:var(--hn-text)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hn-muted)}
.pill.ok{border-color:var(--hn-success);background:var(--hn-tint-success)}.pill.ok::before{background:var(--hn-success)}
.pill.warn{border-color:var(--hn-warning);background:var(--hn-tint-warning)}.pill.warn::before{background:var(--hn-warning)}
.pill.err{border-color:var(--hn-danger);background:var(--hn-tint-danger)}.pill.err::before{background:var(--hn-danger)}
.pill.info{border-color:var(--hn-accent);background:var(--hn-tint-accent)}.pill.info::before{background:var(--hn-accent)}
.pill.plain::before{display:none}
.badge{display:inline-block;padding:0 var(--hn-sp-2);border-radius:var(--hn-r-control);font:var(--hn-meta);line-height:22px;background:var(--hn-surface-raised);border:1px solid var(--hn-border);font-family:var(--hn-font-data);color:var(--hn-text)}
.badge.type{min-width:56px;text-align:center;border-color:var(--hn-primary);color:var(--hn-primary)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:var(--hn-sp-1);border-bottom:1px solid var(--hn-border);margin-bottom:var(--hn-sp-5);overflow-x:auto;scrollbar-width:thin}
.tabs a{padding:0 var(--hn-sp-4);color:var(--hn-muted);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px;min-height:var(--hn-control-h);display:flex;align-items:center}
.tabs a:hover{color:var(--hn-text);text-decoration:none}
.tabs a.active{color:var(--hn-primary);border-bottom-color:var(--hn-primary);font-weight:700}
.seg{display:inline-flex;border:1px solid var(--hn-border);border-radius:var(--hn-r-control);overflow:hidden;flex-wrap:wrap}
.seg button{border:0;border-radius:0;background:transparent;font-weight:400;color:var(--hn-muted);padding:0 var(--hn-sp-3)}
.seg button+button{border-left:1px solid var(--hn-border)}
.seg button[aria-pressed=true]{background:var(--hn-surface-raised);color:var(--hn-primary);font-weight:700}

/* ---------- tables (no textures under data) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--hn-border);border-radius:var(--hn-r-card);background:var(--hn-surface);-webkit-overflow-scrolling:touch}
.panel .table-wrap{border-radius:var(--hn-r-control)}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{padding:var(--hn-sp-2) var(--hn-sp-3);border-bottom:1px solid var(--hn-line-soft);vertical-align:middle;height:var(--hn-control-h)}
tbody tr:last-child td{border-bottom:0}
th{color:var(--hn-muted);font:700 var(--hn-meta);background:var(--hn-surface-raised);white-space:nowrap}
th button.sort{background:transparent;border:0;padding:0;color:inherit;font:inherit;gap:var(--hn-sp-1);min-height:var(--hn-control-h)}
th button.sort::after{content:"↕";opacity:.4}
th[aria-sort=ascending] button.sort::after{content:"↑";opacity:1;color:var(--hn-primary)}
th[aria-sort=descending] button.sort::after{content:"↓";opacity:1;color:var(--hn-primary)}
tbody tr:hover td{background:var(--hn-tint-primary)}
tr.dim td{opacity:.6}
td.mono,td .mono{font-family:var(--hn-font-data)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.actions{text-align:right;white-space:nowrap;width:1%}
td.actions .row{flex-wrap:nowrap;gap:var(--hn-sp-1)}
td.check,th.check{display:table-cell;width:56px;padding:0 var(--hn-sp-1);vertical-align:middle}
td.wrap{overflow-wrap:break-word;min-width:200px;max-width:520px}
.table-tools{display:flex;gap:var(--hn-sp-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--hn-sp-3)}
.table-tools input[type=search]{max-width:300px}
.table-tools select{width:auto;min-width:150px}
.bulkbar{display:flex;align-items:center;gap:var(--hn-sp-3);padding:var(--hn-sp-2) var(--hn-sp-3);margin-bottom:var(--hn-sp-3);background:var(--hn-tint-primary);border:1px solid var(--hn-primary);border-radius:var(--hn-r-control);flex-wrap:wrap}
.pager{display:flex;align-items:center;gap:var(--hn-sp-3);justify-content:flex-end;padding:var(--hn-sp-3) 0 0;color:var(--hn-muted);font:var(--hn-meta);flex-wrap:wrap}

/* ---------- states ---------- */
.state{padding:var(--hn-sp-6) var(--hn-sp-4);text-align:center;color:var(--hn-muted)}
.state.empty{background-image:url("../assets/texture-dots.svg");border-radius:var(--hn-r-card)}
.state strong{display:block;color:var(--hn-text);font:700 var(--hn-body);margin-bottom:var(--hn-sp-1)}
.state.err strong{color:var(--hn-danger)}
.state .row{justify-content:center;margin-top:var(--hn-sp-3)}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--hn-border);border-top-color:var(--hn-primary);animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- modal & toast ---------- */
.modal-back{position:fixed;inset:0;background:var(--hn-scrim);display:flex;align-items:flex-start;justify-content:center;padding:6vh var(--hn-sp-4) var(--hn-sp-4);z-index:100;overflow-y:auto}
.modal{background:var(--hn-surface);border:1px solid var(--hn-border);border-radius:var(--hn-r-dialog);width:100%;max-width:640px;box-shadow:var(--hn-shadow)}
.modal.lg{max-width:920px}.modal.sm{max-width:480px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--hn-sp-3);padding:var(--hn-sp-3) var(--hn-sp-3) var(--hn-sp-3) var(--hn-sp-5);border-bottom:1px solid var(--hn-border)}
.modal-head h2{margin:0;overflow-wrap:anywhere}
.modal-body{padding:var(--hn-sp-5)}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--hn-sp-3);padding:var(--hn-sp-4) var(--hn-sp-5);border-top:1px solid var(--hn-border);flex-wrap:wrap}
.toasts{position:fixed;right:var(--hn-sp-4);bottom:var(--hn-sp-4);display:flex;flex-direction:column;gap:var(--hn-sp-2);z-index:200;max-width:min(460px,calc(100vw - 32px))}
.toast{background:var(--hn-surface-raised);border:1px solid var(--hn-border);border-left:4px solid var(--hn-primary);border-radius:var(--hn-r-control);padding:var(--hn-sp-3) var(--hn-sp-4);box-shadow:var(--hn-shadow);display:flex;gap:var(--hn-sp-3);align-items:flex-start}
.toast.ok{border-left-color:var(--hn-success)}.toast.err{border-left-color:var(--hn-danger)}.toast.warn{border-left-color:var(--hn-warning)}
.toast .ico{font-weight:700}
.toast.ok .ico{color:var(--hn-success)}.toast.err .ico{color:var(--hn-danger)}.toast.warn .ico{color:var(--hn-warning)}
.toast .msg{white-space:pre-wrap;overflow-wrap:anywhere}
.secret-box{display:flex;gap:var(--hn-sp-2);align-items:stretch;flex-wrap:wrap}
.secret-box code{flex:1;min-width:0;padding:var(--hn-sp-3);word-break:break-all;display:block;border:1px solid var(--hn-accent)}

/* ---------- record preview, output, editor, diff ---------- */
.preview-line{font-family:var(--hn-font-data);background:var(--hn-bg);border:1px dashed var(--hn-border);border-radius:var(--hn-r-control);padding:var(--hn-sp-3);color:var(--hn-primary);word-break:break-all}
.output{font:var(--hn-meta);font-family:var(--hn-font-data);background:var(--hn-bg);border:1px solid var(--hn-border);border-radius:var(--hn-r-control);padding:var(--hn-sp-3);max-height:340px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.output.ok{border-color:var(--hn-success)}.output.err{border-color:var(--hn-danger)}
.editor{display:flex;border:1px solid var(--hn-border);border-radius:var(--hn-r-control);background:var(--hn-bg);overflow:hidden;height:min(62vh,640px)}
.editor:focus-within{border-color:var(--hn-primary)}
.editor .gutter{font-family:var(--hn-font-data);font-size:13px;line-height:20px;color:var(--hn-muted);opacity:.7;text-align:right;padding:var(--hn-sp-3) var(--hn-sp-2) var(--hn-sp-3) var(--hn-sp-3);user-select:none;overflow:hidden;white-space:pre;border-right:1px solid var(--hn-border);background:var(--hn-surface);min-width:56px}
.editor textarea{flex:1;border:0;border-radius:0;font-family:var(--hn-font-data);font-size:13px;line-height:20px;padding:var(--hn-sp-3);resize:none;white-space:pre;overflow:auto;height:100%;min-height:0;background:transparent;tab-size:8}
.editor textarea:focus{box-shadow:none}
.diff{font:var(--hn-meta);font-family:var(--hn-font-data);background:var(--hn-bg);border:1px solid var(--hn-border);border-radius:var(--hn-r-control);overflow:auto;max-height:60vh}
.diff div{padding:0 var(--hn-sp-3);white-space:pre}
.diff .add{background:var(--hn-tint-success);color:var(--hn-success)}
.diff .del{background:var(--hn-tint-danger);color:var(--hn-danger)}
.diff .hunk{color:var(--hn-accent);background:var(--hn-tint-accent)}
.diff .meta{color:var(--hn-muted)}

/* ---------- charts ---------- */
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:var(--hn-border);stroke-width:1;opacity:.55}
.chart .axis text{fill:var(--hn-muted);font:var(--hn-meta)}
.chart path.line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart path.area{stroke:none;opacity:.1}
.chart .cross{stroke:var(--hn-muted);stroke-width:1;stroke-dasharray:3 3}
.chart .dot{stroke:var(--hn-surface);stroke-width:2}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .barrect:hover{filter:brightness(1.2)}
.s1{stroke:var(--hn-series-1);fill:var(--hn-series-1)}.s2{stroke:var(--hn-series-2);fill:var(--hn-series-2)}.s3{stroke:var(--hn-series-3);fill:var(--hn-series-3)}.s4{stroke:var(--hn-series-4);fill:var(--hn-series-4)}.s5{stroke:var(--hn-series-5);fill:var(--hn-series-5)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;flex:0 0 10px}
.sw.s1,.fill.s1{background:var(--hn-series-1)}.sw.s2,.fill.s2{background:var(--hn-series-2)}.sw.s3,.fill.s3{background:var(--hn-series-3)}.sw.s4,.fill.s4{background:var(--hn-series-4)}.sw.s5,.fill.s5{background:var(--hn-series-5)}
.tooltip{position:absolute;pointer-events:none;background:var(--hn-surface-raised);border:1px solid var(--hn-border);border-radius:var(--hn-r-control);padding:var(--hn-sp-2) var(--hn-sp-3);font:var(--hn-meta);box-shadow:var(--hn-shadow);z-index:5;min-width:150px;white-space:nowrap}
.tooltip .t{color:var(--hn-muted);margin-bottom:var(--hn-sp-1)}
.tooltip .r{display:flex;align-items:center;gap:var(--hn-sp-2)}
.tooltip .r b{margin-left:auto;padding-left:var(--hn-sp-3);font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:var(--hn-sp-1) var(--hn-sp-4);font:var(--hn-meta);color:var(--hn-muted);margin-bottom:var(--hn-sp-2)}
.legend span{display:inline-flex;align-items:center;gap:var(--hn-sp-2)}
.chart-foot{display:flex;justify-content:flex-end;margin-top:var(--hn-sp-2)}
.bars{display:flex;flex-direction:column;gap:var(--hn-sp-2)}
.bars .b{display:grid;grid-template-columns:minmax(90px,40%) minmax(0,1fr) minmax(56px,auto);gap:var(--hn-sp-3);align-items:center;min-height:28px}
.bars .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .track{height:10px;background:var(--hn-bg);border-radius:var(--hn-r-control);overflow:hidden}
.bars .fill{height:100%;border-radius:0 4px 4px 0;background:var(--hn-series-1);min-width:2px}
.bars .val{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- login (decorative textures allowed here) ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .art{background:var(--hn-bg) url("../assets/texture-grid.svg");border-right:1px solid var(--hn-border);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--hn-sp-8)}
.login .art .logo-wrap{padding:var(--hn-sp-4);width:min(640px,100%)}
.login .art img{width:100%;height:auto;display:block}
.login .art .tagline{letter-spacing:.32em;font:var(--hn-meta);color:var(--hn-muted);margin-top:var(--hn-sp-4);padding-top:var(--hn-sp-5);border-top:1px solid var(--hn-border);width:min(560px,100%);text-transform:uppercase}
.login .art ul{list-style:none;padding:0;margin:var(--hn-sp-7) 0 0;display:grid;gap:var(--hn-sp-4);max-width:440px;text-align:left}
.login .art li{border-left:2px solid var(--hn-primary);padding-left:var(--hn-sp-4)}
.login .art li b{display:block;letter-spacing:.12em;font:700 var(--hn-meta)}
.login .art li span{color:var(--hn-muted);font:var(--hn-meta)}
.login .form{display:flex;align-items:center;justify-content:center;padding:var(--hn-sp-6) var(--hn-sp-4)}
.login .card{width:100%;max-width:420px}
.login .card .mobile-logo{display:none;padding:var(--hn-sp-4) 0 var(--hn-sp-5)}
.login .card .mobile-logo img{width:280px;max-width:100%;height:auto}
.login .card h1{margin-bottom:var(--hn-sp-2)}
.drawer-back{display:none}
.kbd{font-family:var(--hn-font-data);font:var(--hn-meta);border:1px solid var(--hn-border);border-bottom-width:2px;border-radius:var(--hn-r-control);padding:0 var(--hn-sp-1);color:var(--hn-muted)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.layout2,.layout-half{grid-template-columns:1fr}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(86vw,300px);transform:translateX(-102%);transition:transform .2s ease;visibility:hidden}
  .app.drawer-open .sidebar{transform:none;visibility:visible}
  .app.drawer-open .drawer-back{display:block;position:fixed;inset:0;background:var(--hn-scrim);z-index:25}
  .menu-btn{display:inline-flex}
  .header{padding:0 var(--hn-sp-3);gap:var(--hn-sp-2)}
  .header-logo{display:block}
  .header .search{display:none}
  .header .search.open{display:block;position:absolute;left:var(--hn-sp-3);right:var(--hn-sp-3);top:calc(100% + var(--hn-sp-2));max-width:none}
  .search-toggle{display:inline-flex}
  .usermenu .uname{display:none}
  .content{padding:var(--hn-sp-4) var(--hn-sp-4) var(--hn-sp-7)}
  .grid2,.grid3{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}.login .art{display:none}.login .card .mobile-logo{display:block}
  .panel{padding:var(--hn-sp-4)}
  .modal-back{padding:var(--hn-sp-4) var(--hn-sp-2)}
  dl.kv{grid-template-columns:1fr;gap:0}dl.kv dd{margin-bottom:var(--hn-sp-2)}
}
@media (min-width:901px){.search-toggle{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (forced-colors:active){.pill::before,.sw,.bars .fill{forced-color-adjust:none}}

/* ---------- small utilities used by the JS modules ---------- */
.full{width:100%}
.header-logo.visible{display:block}
.grid2>.span2,.grid3>.span2{grid-column:1/-1}
.ico{flex:0 0 auto}
.btn-icon .ico{margin:0}
caption{text-align:left}

@media (max-width:900px){.header-logo img{width:150px}}