/* Woto License: responsive shell, readable data, native dialogs. */
:root { color-scheme: light; --bg:#f5f6f8; --fg:#1d2330; --muted:#657185; --card:#fff; --line:#dfe4eb; --accent:#1f6feb; --on-accent:#fff; --accent-soft:#edf4ff; --danger:#ba2d28; --on-danger:#fff; --warn:#946000; --ok:#237348; --shadow:0 10px 28px #15203812; }
@media (prefers-color-scheme:dark) { :root { color-scheme:dark; --bg:#14171c; --fg:#e6e8eb; --muted:#a2adbc; --card:#1d2128; --line:#343c49; --accent:#81b5ff; --on-accent:#0a1a2e; --accent-soft:#23344d; --danger:#ff8279; --on-danger:#2c0e0b; --warn:#f0bc63; --ok:#79d3a1; --shadow:0 12px 28px #0004; } }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-padding-top:130px; }
body { margin:0; min-width:0; font:14px/1.55 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--fg); -webkit-text-size-adjust:100%; }
a { color:var(--accent); text-underline-offset:3px; }
button,input,select,textarea { font:inherit; }
button,input,select,textarea { min-height:42px; border:1px solid var(--line); border-radius:8px; }
input,select,textarea { width:100%; min-width:0; padding:9px 11px; color:var(--fg); background:var(--card); }
select { -webkit-appearance:none; appearance:none; padding-right:36px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
textarea { resize:vertical; }
input[type=checkbox] { width:24px; min-height:24px; align-self:flex-start; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:2px; }
button { padding:8px 15px; background:var(--accent); color:var(--on-accent); border-color:var(--accent); cursor:pointer; font-weight:550; touch-action:manipulation; }
button:hover { filter:brightness(.96); }
button.secondary { background:var(--card); border-color:var(--line); color:var(--fg); }
button.danger { background:var(--danger); border-color:var(--danger); color:var(--on-danger); }
button.link { min-height:36px; padding:6px 8px; border:0; background:none; color:var(--accent); }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
label { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:13px; color:var(--muted); }
.app-header { display:flex; align-items:center; gap:18px; padding:12px 20px; padding-top:max(12px,env(safe-area-inset-top)); background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.app-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none; color:var(--fg); line-height:1.25; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:#17263c; box-shadow:inset 0 -3px #dc333b; font-size:24px; font-weight:850; font-style:italic; }
.brand-subtitle { display:block; margin-top:4px; font-size:10px; letter-spacing:.05em; font-weight:500; color:var(--muted); }
nav { display:flex; gap:3px; flex:1; flex-wrap:wrap; }
nav a { display:flex; align-items:center; justify-content:center; min-height:40px; padding:7px 10px; border-radius:8px; color:var(--muted); text-decoration:none; white-space:nowrap; font-weight:550; }
nav a.active { background:var(--accent-soft); color:var(--accent); }
nav a:hover { background:var(--accent-soft); }
.account-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:12px; }
#who { max-width:155px; overflow-wrap:anywhere; }
.menu-toggle,.nav-backdrop { display:none; }
#app { min-height:calc(100vh - 76px); min-height:calc(100dvh - 76px); }
main { min-width:0; padding:24px 24px calc(24px + env(safe-area-inset-bottom)); }
.page-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; }
.page-head h1 { margin:0; font-size:23px; letter-spacing:-.03em; }
.page-head p { margin:0; font-size:12px; color:var(--muted); }
.page-content { min-width:0; }
.card { min-width:0; padding:20px; margin-bottom:18px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.login-shell { display:grid; place-items:center; min-height:calc(100vh - 76px); min-height:calc(100dvh - 76px); padding:24px 20px 40px; }
.login { width:min(100%,400px); display:flex; flex-direction:column; gap:18px; padding:30px; margin:0; box-shadow:var(--shadow); }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:22px; font-weight:850; font-style:italic; letter-spacing:.02em; }
.login-brand .brand-subtitle { margin:0; font-style:normal; font-size:9px; letter-spacing:.1em; }
.login h1 { margin:0; font-size:23px; }
.login p { margin:0; }
.login .login-footnote { font-size:12px; color:var(--muted); line-height:1.7; }
.login input { min-height:46px; }
.login button[type=submit] { min-height:46px; }
.muted { color:var(--muted); }
.error { color:var(--danger); min-height:1em; margin:0; overflow-wrap:anywhere; }
.toolbar { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar label { min-width:min(230px,100%); max-width:100%; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:14px; }
.stat { padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--muted); }
.stat b { display:block; margin-bottom:4px; font-size:30px; font-weight:650; color:var(--fg); line-height:1.4; font-variant-numeric:tabular-nums; }
.table-wrap { min-width:0; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:12px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; white-space:nowrap; }
th { background:var(--bg); color:var(--muted); font-weight:550; font-size:12px; }
tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--accent-soft); }
td.wrap { min-width:200px; white-space:normal; }
.cell-value { min-width:0; }
.cell-value>* { max-width:100%; }
.cell-value a,.cell-value code,.cell-value .mono { overflow-wrap:anywhere; }
.mobile-expand { display:none; }
code,.mono { font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.tag { display:inline-block; padding:2px 8px; border:1px solid currentColor; border-radius:20px; font-size:11px; line-height:1.4; }
.tag.high,.tag.bad { color:var(--danger); } .tag.medium,.tag.warn { color:var(--warn); } .tag.low,.tag.ok { color:var(--ok); }
dialog { width:min(560px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--fg); box-shadow:var(--shadow); overflow:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#101c306b; }
dialog form { display:flex; flex-direction:column; gap:16px; min-width:0; }
dialog h2 { padding-right:8px; }
dialog p { margin:0; overflow-wrap:anywhere; }
dialog .actions { display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:-24px; margin:4px -24px -24px; padding:16px 24px; border-top:1px solid var(--line); background:var(--card); }
.secret { display:block; padding:8px 10px; border:1px dashed var(--warn); border-radius:6px; word-break:break-all; }
.result { display:flex; flex-direction:column; gap:14px; }
.result-row { display:grid; grid-template-columns:90px minmax(0,1fr) auto; align-items:center; gap:10px; }
.result-row>.mono { min-width:0; overflow-wrap:anywhere; }
.prefixed { display:flex; align-items:stretch; min-width:0; }
.prefixed .prefix { display:flex; align-items:center; padding:8px; border:1px solid var(--line); border-right:0; border-radius:8px 0 0 8px; background:var(--bg); color:var(--fg); }
.prefixed input { flex:1; min-width:0; border-radius:0 8px 8px 0; }
h2 { margin:0 0 14px; font-size:16px; overflow-wrap:anywhere; }
.boot-state { display:grid; place-items:center; min-height:80vh; color:var(--muted); }
.install-entry { display:flex; justify-content:flex-end; padding:12px max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 24px; }
.install-entry button { border:1px solid var(--line); border-radius:24px; padding:8px 16px; background:var(--card); box-shadow:var(--shadow); font-size:12px; }
.connection-status,.update-notice { position:fixed; left:16px; right:16px; z-index:30; padding:12px 16px; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); background:var(--card); }
.connection-status { bottom:calc(68px + env(safe-area-inset-bottom)); border-color:var(--warn); color:var(--warn); }
.update-notice { bottom:calc(130px + env(safe-area-inset-bottom)); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.toast-region { position:fixed; top:calc(86px + env(safe-area-inset-top)); right:16px; z-index:40; width:min(380px,calc(100% - 32px)); pointer-events:none; }
.toast { margin-bottom:8px; padding:13px 16px; border:1px solid var(--line); border-left:3px solid var(--ok); border-radius:10px; background:var(--card); box-shadow:var(--shadow); overflow-wrap:anywhere; }
.toast.error { border-left-color:var(--danger); }
.offscreen { position:fixed; left:-9999px; top:0; }
@media (min-width:821px) and (max-width:1180px) { .app-header { flex-wrap:wrap; gap:8px 16px; } nav { order:3; flex-basis:100%; } .account-tools { margin-left:auto; } }
@media (max-width:820px) {
  html { scroll-padding-top:90px; }
  body.menu-open { overflow:hidden; }
  .app-header { gap:10px; padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); padding-top:max(10px,env(safe-area-inset-top)); }
  .app-brand { flex:1; gap:8px; font-size:13px; }
  .brand-mark { width:32px; height:32px; font-size:21px; border-radius:9px; }
  .brand-subtitle { font-size:9px; }
  .menu-toggle { display:block; min-height:44px; padding:6px 13px; }
  .account-tools { gap:3px; }
  #who { display:none; }
  #logout { min-height:44px; padding:8px; }
  nav { display:none; position:fixed; top:calc(70px + env(safe-area-inset-top)); left:12px; right:12px; max-height:calc(100dvh - 100px); overflow:auto; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }
  .nav-open nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  nav a { min-height:48px; justify-content:flex-start; padding:10px 15px; }
  .nav-open .nav-backdrop { display:block; position:fixed; inset:0; z-index:9; border:0; border-radius:0; background:#101c304d; }
  main { padding:20px 14px calc(24px + env(safe-area-inset-bottom)); }
  .page-head { align-items:flex-start; flex-direction:column; gap:5px; margin-bottom:18px; }
  .page-head h1 { font-size:23px; }
  .card { padding:16px; margin-bottom:14px; border-radius:12px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat { padding:15px; font-size:12px; }
  .stat b { font-size:29px; }
  .toolbar { align-items:stretch; gap:8px; }
  .toolbar label { flex:1 1 100%; min-width:0; }
  .toolbar>button { flex:1; }
  input,select,textarea { min-height:46px; font-size:16px; }
  button { min-height:44px; }
  .table-wrap { overflow:visible; border:0; border-radius:0; background:none; }
  table,tbody { display:block; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  tbody tr { display:block; margin-bottom:14px; padding:7px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
  tbody tr:hover { background:var(--card); }
  td,td.wrap { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:start; gap:10px; width:100%; min-width:0; padding:10px 0; font-size:13px; white-space:normal; overflow-wrap:anywhere; }
  td::before { content:attr(data-label); color:var(--muted); font-size:12px; }
  tr:last-child td { border-bottom:1px solid var(--line); }
  tr td:last-child { border-bottom:0; }
  td.mobile-primary .cell-data { font-weight:600; }
  .cell-value { overflow-wrap:anywhere; }
  .cell-value>.cell-data>span { white-space:normal; }
  .cell-value .link { display:inline-flex; align-items:center; min-height:44px; padding:7px 9px; margin:2px 2px 2px 0; border:1px solid var(--line); border-radius:7px; background:var(--bg); font-size:12px; }
  tr:not(.is-expanded) td.mobile-detail { display:none; }
  .mobile-expand { display:block; margin-top:7px; padding:4px 0; min-height:44px; border:0; border-radius:0; font-size:12px; color:var(--accent); background:none; }
  dialog { width:calc(100vw - 20px); max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding:20px; border-radius:16px; }
  dialog .actions { bottom:-20px; margin:4px -20px -20px; padding:14px 20px max(14px,env(safe-area-inset-bottom)); }
  dialog .actions button { flex:1; }
  .result-row { grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; }
  .result-row>.muted { grid-column:1/-1; font-size:12px; }
  .result-row>.mono { font-size:14px; }
  .login-shell { padding:30px 16px 40px; }
  .login { padding:26px 22px; }
  .login-brand .brand-mark { width:40px; height:40px; font-size:28px; }
  .login h1 { font-size:22px; }
  .toast-region { top:calc(78px + env(safe-area-inset-top)); right:12px; width:calc(100% - 24px); }
}
@media (display-mode:standalone) { .install-entry { display:none; } #app,.login-shell { min-height:100vh; min-height:100dvh; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }