:root{
  --paper:#F0F2ED;
  --card:#FFFFFF;
  --ink:#101B2D;
  --ink-soft:#4E5A6E;
  --ink-muted:#8890A0;
  --border:rgba(16,27,45,0.10);
  --border-strong:rgba(16,27,45,0.20);
  --accent:#0B6E52;
  --accent-strong:#063D2B;
  --accent-bg:#DFEEE7;
  --pending:#96660A;
  --pending-bg:#F2E6CC;
  --danger:#A32A24;
  --danger-bg:#F5E4DB;
  --shadow-sm:0 1px 2px rgba(16,27,45,.07), 0 1px 1px rgba(16,27,45,.05);
  --shadow-md:0 14px 34px rgba(16,27,45,.13), 0 3px 8px rgba(16,27,45,.07);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1416;
    --card:#181F22;
    --ink:#F1F2ED;
    --ink-soft:#B3BAB4;
    --ink-muted:#78827C;
    --border:rgba(241,242,237,0.12);
    --border-strong:rgba(241,242,237,0.22);
    --accent:#49E0B4;
    --accent-strong:#DDFCEF;
    --accent-bg:#183129;
    --pending:#F0C169;
    --pending-bg:#332A16;
    --danger:#EC8580;
    --danger-bg:#33231A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 16px 36px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Public Sans',-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0;letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;}
.wrap{max-width:640px;margin:0 auto;padding:clamp(24px,6vw,48px) max(20px,env(safe-area-inset-right)) 60px max(20px,env(safe-area-inset-left));position:relative;}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:32px;}
h1{font-size:clamp(20px,5vw,24px);}
button{font-family:inherit;font-size:13.5px;cursor:pointer;background:transparent;color:var(--ink);border:none;border-radius:10px;padding:11px 16px;min-height:44px;transition:background .15s,box-shadow .15s,transform .15s;}
button:hover{background:var(--border);}
button.primary{background:var(--accent);color:var(--card);font-weight:500;}
button.primary:hover{background:var(--accent-strong);transform:translateY(-1px);}
button.danger{color:var(--danger);}
button.ghost{padding:8px 10px;font-size:12.5px;color:var(--ink-muted);min-height:36px;}
button:disabled{opacity:.4;cursor:default;}
input{font-family:inherit;font-size:16px;color:var(--ink);background:var(--card);border:0.5px solid var(--border-strong);border-radius:8px;padding:11px 12px;width:100%;min-height:44px;}
input:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
label{font-size:12px;color:var(--ink-muted);display:block;margin:0 0 4px;}
.card{background:var(--card);border:0.5px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);margin-bottom:18px;max-width:100%;}
.card.accent{border-color:var(--accent);box-shadow:var(--shadow-md);}
.card h2{font-size:16px;margin-bottom:4px;text-wrap:balance;}
.card .desc{font-size:12.5px;color:var(--ink-muted);margin:0 0 14px;}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;padding:12px 0;border-top:0.5px solid var(--border);flex-wrap:wrap;}
.row:first-child{border-top:none;}
.row .who{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 160px;}
.row .who > div{min-width:0;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-bg);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:13px;flex-shrink:0;}
.row .name{font-size:14px;font-weight:500;margin:0;overflow-wrap:break-word;}
.row .meta{font-size:12px;color:var(--ink-muted);margin:2px 0 0;}
.badge{font-size:11px;font-weight:500;padding:2px 0;}
.badge.pending{color:var(--pending);}
.badge.danger{color:var(--danger);}
.badge.ok{color:var(--accent);}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--paper);border:0.5px dashed var(--border-strong);border-radius:10px;padding:10px 12px;margin-top:10px;flex-wrap:wrap;}
.linkbox input{border:none;background:none;padding:0;min-height:auto;font-family:'IBM Plex Mono',monospace;font-size:12.5px;flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.empty{color:var(--ink-muted);font-size:13px;padding:8px 0;}
.toast{position:fixed;left:50%;top:max(16px,env(safe-area-inset-top));transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:12.5px;padding:8px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20;max-width:calc(100vw - 32px);text-align:center;}
.toast.show{opacity:1;}
#whoami{font-size:13px;color:var(--ink-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.actions{display:flex;gap:8px;flex-wrap:wrap;}
@media (max-width:420px){
  .card{padding:16px;}
  button{padding:8px 12px;}
  .row .who{flex-basis:100%;}
}