*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--ui);
  font-size:15px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased;
}
body.dragging::after{
  content:'Drop files to import';position:fixed;inset:0;z-index:200;
  background:rgba(11,18,32,.9);border:2px dashed var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--accent);
}
.shell{height:100%;display:flex;flex-direction:column}

.top{
  height:var(--top-h);flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:var(--bg2);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);height:calc(var(--top-h) + env(safe-area-inset-top));
}
.brand{font-weight:700;letter-spacing:.2px;white-space:nowrap}
.pill{
  font-size:11px;padding:3px 8px;border-radius:99px;background:var(--surface);
  border:1px solid var(--line);color:var(--text2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:38vw;
}
.pill.ok{color:var(--ok);border-color:rgba(64,201,162,.4)}
.pill.ctx{cursor:default;color:var(--text)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{
  background:transparent;border:1px solid transparent;color:var(--text2);
  font-size:15px;line-height:1;padding:7px 9px;border-radius:var(--r);cursor:pointer;position:relative;
}
.icon-btn:hover{background:var(--surface);color:var(--text)}
.icon-btn.big{font-size:19px;padding:9px 12px;border:1px solid var(--line);background:var(--surface)}
.icon-btn.send{background:var(--accent-soft);border-color:rgba(106,169,240,.4);color:var(--accent)}
.badge{
  position:absolute;top:1px;right:1px;background:var(--crit);color:#fff;font-size:9px;
  min-width:14px;height:14px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;
}

.btn{
  background:var(--surface2);border:1px solid var(--line2);color:var(--text);
  padding:8px 13px;border-radius:var(--r);font-size:13px;cursor:pointer;font-family:inherit;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent-soft);border-color:rgba(106,169,240,.5);color:var(--accent);font-weight:600}
.btn.small{padding:6px 10px;font-size:12px}
.btn.tiny{padding:3px 8px;font-size:11px;border-radius:7px}

.body{flex:1 1 auto;display:flex;min-height:0;position:relative}
.muted{color:var(--text3)}
.small{font-size:12px}
.mono{font-family:var(--mono)}
.pad{padding:12px}
.raw{
  font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px;color:var(--text2);
}
.sec-head{
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);
  padding:14px 12px 6px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}
.chip{
  font-size:11px;padding:3px 9px;border-radius:99px;background:var(--surface);
  border:1px solid var(--line);color:var(--text2);
}
.chip.crit{color:var(--crit);border-color:rgba(239,95,107,.4)}
.chip.warn{color:var(--warn);border-color:rgba(232,165,82,.4)}
.chip.act{cursor:pointer}
.chip.act:hover{border-color:var(--accent);color:var(--accent)}
.inline-warn{
  margin:10px 12px;padding:9px 11px;border-radius:var(--r);
  background:var(--warn-soft);border:1px solid rgba(232,165,82,.35);
  color:var(--warn);font-size:12px;line-height:1.5;
}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;padding:10px 12px;font-size:13px}
.kv-k{color:var(--text3)}
.kv-v{color:var(--text);word-break:break-word;font-family:var(--mono);font-size:12px}

.boot{
  position:fixed;inset:0;z-index:500;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
}
.boot-title{font-size:22px;font-weight:700}
.boot-detail{color:var(--text2);font-size:13px;max-width:520px}
.boot-hint{color:var(--text3);font-size:12px;max-width:520px;font-family:var(--mono)}
.boot.fatal .boot-title{color:var(--crit)}

.settings{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  transform:translateY(100%);transition:transform .22s var(--ease);
  overflow-y:auto;padding-bottom:40px;
}
.settings.open{transform:translateY(0)}
.set-head{
  display:flex;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);padding-top:calc(14px + env(safe-area-inset-top));
}
.set-title{font-weight:700;font-size:17px}
.set-head .icon-btn{margin-left:auto}
.set-sec{padding:16px 12px;border-bottom:1px solid var(--line)}
.set-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:6px}
.set-note{font-size:12px;color:var(--text3);margin:6px 0;line-height:1.5}
.set-pre{
  font-family:var(--mono);font-size:11.5px;white-space:pre-wrap;color:var(--text2);
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:9px;margin-bottom:8px;
}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg-b{
  flex:1 1 auto;padding:9px 10px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);color:var(--text2);font-size:13px;cursor:pointer;font-family:inherit;
}
.seg-b.active{background:var(--accent-soft);border-color:rgba(106,169,240,.5);color:var(--accent);font-weight:600}