:root{--bg:#0b1020;--card:#101a33;--muted:#8aa0c6;--text:#e8f0ff;--accent:#6ea8fe;--danger:#ff6b6b;--ok:#2ecc71;--border:rgba(255,255,255,.1);--shadow:0 10px 30px rgba(0,0,0,.3)}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:radial-gradient(1200px 600px at 20% -10%, rgba(110,168,254,.25), transparent), var(--bg); color:var(--text)}
a{color:var(--accent);text-decoration:none}
.topbar{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(11,16,32,.9);backdrop-filter:blur(10px)}
.brand{font-weight:800;letter-spacing:.5px}
.spacer{flex:1}
.container{max-width:980px;margin:0 auto;padding:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:16px}
.h1{font-size:28px;margin:0 0 6px 0}
.p{color:var(--muted);margin:0 0 14px 0;line-height:1.6}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:260px}
.input, .textarea, select.input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);outline:none}
.textarea{min-height:120px;resize:vertical}
.btn{appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer}
.btn:hover{border-color:rgba(110,168,254,.6)}
.btn-primary{background:linear-gradient(180deg, rgba(110,168,254,.35), rgba(110,168,254,.18));border-color:rgba(110,168,254,.55)}
.btn-danger{background:linear-gradient(180deg, rgba(255,107,107,.35), rgba(255,107,107,.15));border-color:rgba(255,107,107,.55)}
.btn-ghost{background:transparent}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px}
.list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.item{border:1px solid var(--border);border-radius:12px;padding:12px;background:rgba(255,255,255,.02)}
.item .meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}
.item .content{margin-top:8px;white-space:pre-wrap;line-height:1.6}
.hr{height:1px;background:var(--border);margin:14px 0}
.note{font-size:12px;color:var(--muted)}
.err{color:var(--danger)}
.ok{color:var(--ok)}

 .hero{padding:18px;border-radius:16px;border:1px solid var(--border);background:radial-gradient(700px 200px at 20% 0%, rgba(110,168,254,.18), transparent), rgba(255,255,255,.02)}
 .hero-title{font-size:34px;font-weight:900;margin:0 0 6px 0;letter-spacing:.3px}
 .hero-sub{color:var(--muted);margin:0;line-height:1.6}
 .linkbox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
 .linkpill{flex:1;min-width:260px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(110,168,254,.5);background:rgba(110,168,254,.08);user-select:all}
 .actions{display:flex;gap:10px;flex-wrap:wrap}
 .stat{display:flex;gap:10px;align-items:center}

 .topbar{z-index:20}
 .brand{font-size:18px}
 .h1{font-weight:900;letter-spacing:.2px}
 .card{backdrop-filter:blur(6px)}
 .btn{transition:transform .06s ease,border-color .15s ease,filter .15s ease}
 .btn:active{transform:translateY(1px)}
 .btn:disabled{opacity:.55;cursor:not-allowed}
 .input:focus,.textarea:focus,select.input:focus{border-color:rgba(110,168,254,.65);box-shadow:0 0 0 3px rgba(110,168,254,.12)}
 .badge{gap:6px}

 #toastRoot{position:fixed;inset:auto 16px 16px 16px;z-index:1000;pointer-events:none;display:flex;justify-content:center}
 .toastStack{display:flex;flex-direction:column;gap:10px;max-width:min(620px, calc(100vw - 32px));width:100%}
 .toast{pointer-events:auto;border:1px solid var(--border);border-radius:14px;background:rgba(16,26,51,.92);box-shadow:var(--shadow);padding:12px 14px;display:flex;gap:12px;align-items:flex-start}
 .toast .tTitle{font-weight:800;margin:0}
 .toast .tBody{margin:2px 0 0 0;color:var(--muted);line-height:1.5;white-space:pre-wrap}
 .toast .tIcon{width:10px;height:10px;border-radius:999px;margin-top:6px;flex:0 0 auto;background:var(--accent)}
 .toast.ok .tIcon{background:var(--ok)}
 .toast.err .tIcon{background:var(--danger)}

 #modalRoot{position:fixed;inset:0;z-index:1200;display:none}
 #modalRoot.on{display:block}
 .modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
 .modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px}
 .modalCard{max-width:520px;width:100%;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
 .modalTitle{font-weight:900;margin:0 0 6px 0}
 .modalBody{color:var(--muted);margin:0 0 14px 0;line-height:1.6;white-space:pre-wrap}
 .modalActions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

 .skeleton{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03);position:relative;overflow:hidden}
 .skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);animation:shimmer 1.2s infinite}
 @keyframes shimmer{to{transform:translateX(100%)}}

 .mini{font-size:12px;color:var(--muted)}
 .counter{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
 .dangerText{color:var(--danger)}