/* ============================================================
   LAYOUT — top bar, section nav (bottom bar on phones), pages, toast
   ============================================================ */
.appbar{
  position:sticky;top:0;z-index:20;height:var(--bar-h);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule);
}
.appbar-in{max-width:1180px;height:100%;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:22px}
.brand{font:600 17px/1 var(--serif);text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.brand span{color:var(--ink-soft);font-weight:400}

.mainnav{display:flex;align-items:stretch;gap:2px;height:100%}
.mainnav a, .mainnav button{
  display:flex;align-items:center;gap:7px;padding:0 12px;
  font:500 14px/1 var(--sans);color:var(--ink-soft);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.mainnav a:hover{color:var(--ink)}
.mainnav a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.mainnav svg, .search-btn svg, .theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mainnav .nav-search{display:none}

.appbar-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.mini-clock{font:600 12px/1 var(--sans);color:var(--dk);white-space:nowrap}
.search-btn{
  display:flex;align-items:center;gap:8px;appearance:none;cursor:pointer;
  font:500 13px/1 var(--sans);color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:6px 7px 6px 10px;min-width:170px;
}
.search-btn kbd{margin-left:auto}
.search-btn:hover{color:var(--ink);border-color:var(--ink-soft)}
.theme-btn{appearance:none;cursor:pointer;background:none;border:1px solid transparent;border-radius:6px;padding:6px;color:var(--ink-soft);display:flex}
.theme-btn:hover{color:var(--ink);border-color:var(--rule)}

/* ---------- pages ---------- */
.view{min-height:calc(100vh - var(--bar-h))}
.page{max-width:880px;margin:0 auto;padding:26px 18px 100px}
.page-head{margin-bottom:18px}
.page-head h1{font:600 27px/1.2 var(--serif);letter-spacing:-.01em;margin:0 0 6px}
.page-head .sub{color:var(--ink-soft);font-size:14px;margin:0;max-width:70ch}
.page-head .sub b{font-weight:600;color:var(--ink)}

.empty{font-size:14px;color:var(--ink-soft);padding:26px 0;font-style:italic}
.more-btn{
  display:block;width:100%;margin-top:12px;appearance:none;cursor:pointer;
  font:500 13px/1 var(--sans);color:var(--ink-soft);background:var(--panel);
  border:1px dashed var(--rule);border-radius:6px;padding:12px;
}
.more-btn:hover{color:var(--ink);border-color:var(--ink-soft)}

/* ---------- info page ---------- */
.info .card{margin-bottom:14px}
.info .card p{font-size:14px;margin:0 0 10px;max-width:70ch}
.info .tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#importArea{
  width:100%;height:100px;margin:12px 0 8px;font:11px/1.4 var(--mono);
  border:1px solid var(--rule);border-radius:5px;padding:8px;color:var(--ink-soft);background:var(--input);
}
.keys{border-collapse:collapse;font-size:14px}
.keys td{padding:6px 16px 6px 0;vertical-align:top;border-top:1px solid var(--rule)}
.keys tr:first-child td{border-top:0}
.keys td:first-child{white-space:nowrap}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:40;transform:translate(-50%, 12px);opacity:0;
  display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--on-ink);border-radius:8px;padding:11px 14px 11px 16px;
  font:500 13.5px/1.3 var(--sans);box-shadow:var(--shadow-lg);
  transition:transform .2s ease, opacity .2s ease;
}
.toast.show{transform:translate(-50%, 0);opacity:1}
.toast button{appearance:none;border:0;background:none;cursor:pointer;color:var(--on-ink);font:700 13px/1 var(--sans);text-decoration:underline;padding:2px}

/* ---------- phones: section nav moves to a bottom bar ---------- */
@media (max-width:760px){
  :root{--bar-h:50px}
  .appbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel)}
  .appbar-in{gap:12px;padding:0 14px}
  .brand{font-size:16px}
  .brand span{display:none}
  .search-btn{display:none}
  .mainnav{
    position:fixed;left:0;right:0;bottom:0;height:auto;z-index:25;
    background:var(--panel);border-top:1px solid var(--rule);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .mainnav a, .mainnav .nav-search{
    flex:1;flex-direction:column;justify-content:center;gap:3px;padding:6px 0;
    font-size:11px;border-bottom:0;margin:0;border-radius:8px;
  }
  .mainnav .nav-search{display:flex;appearance:none;background:none;border:0;cursor:pointer;color:var(--ink-soft)}
  .mainnav a[aria-current]{background:var(--track)}
  .mainnav svg{width:21px;height:21px}
  .page{padding:18px 14px 110px}
  .page-head h1{font-size:22px}
  .toast{bottom:84px}
}