:root{--desk:#eceae5;--paper:#fdfcf9;--ink:#1c1f1d;--mute:#6f726c;--line:#e2dfd7;--acc:#0b6b5d;--bad:#b3261e;--mono:"Roboto Mono",ui-monospace,monospace;--umono:"Ubuntu Mono","Roboto Mono",monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--desk);color:var(--ink);font:16px/1.5 system-ui,"Segoe UI",sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.top{max-width:760px;margin:0 auto;padding:30px 20px 22px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.word{font:700 1.7rem/1 var(--umono);letter-spacing:-.02em}
.word b{color:var(--acc);font-weight:400;animation:blink 1.1s steps(1) infinite}
.d{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s .1s cubic-bezier(.6,0,.2,1) forwards}
.ear{transform-box:fill-box;transform-origin:50% 100%;animation:draw 1.1s .1s cubic-bezier(.6,0,.2,1) forwards,twitch 7s 2.5s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes twitch{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(11deg)}96%{transform:rotate(-4deg)}}
@keyframes blink{50%{opacity:0}}
.sheet{max-width:760px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px 40px 34px;box-shadow:0 1px 2px rgba(40,35,25,.07),0 14px 32px -14px rgba(40,35,25,.22)}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:0 -4px 28px}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 4px 10px;margin-bottom:-1px;font:500 .85rem var(--mono);color:var(--mute)}
.tab.on{color:var(--ink);border-color:var(--ink)}
h1{margin:0 0 22px;font:700 2.1rem/1.1 var(--umono);letter-spacing:-.02em}
.bar{display:flex;gap:14px;align-items:flex-end}
.bar input{flex:1;min-width:0;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:10px 2px;font:400 1rem var(--mono)}
.bar input::placeholder,label input::placeholder{color:#a4a69f}
.bar button{background:var(--ink);color:var(--paper);border:0;border-radius:4px;padding:11px 22px;font:500 .9rem var(--mono)}
.bar button:hover{background:var(--acc)}
details{margin-top:26px}
summary{cursor:pointer;font:500 .8rem var(--mono);color:var(--mute);width:max-content}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px}
label{display:block;font:500 .75rem var(--mono);color:var(--mute)}
label input{display:block;width:100%;margin-top:4px;border:0;border-bottom:1px solid #bdbab0;background:transparent;padding:8px 0;font:400 .95rem var(--mono);color:var(--ink)}
label input:focus,.bar input:focus{outline:0;border-color:var(--acc)}
.pre{display:flex;align-items:baseline;margin-top:4px;border-bottom:1px solid #bdbab0}
.pre i{font:400 .95rem var(--mono);font-style:normal;color:var(--mute);white-space:nowrap}
.pre input{border:0;margin:0}
#msg{min-height:1.5rem;margin-top:18px;font:500 .85rem var(--mono);word-break:break-all}
#msg.ok{color:var(--acc)}#msg.err{color:var(--bad)}
main{max-width:760px;margin:0 auto;padding:0 20px 70px}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:44px 0 12px}
.head h2{margin:0;font:700 1.35rem var(--umono)}
.head small{color:var(--mute);font-weight:400}
.head input{width:220px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--paper);font:400 .85rem var(--mono)}
#list{background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(40,35,25,.07)}
.item{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-bottom:1px solid var(--line)}
.item:last-child{border:0}
.ico{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font:700 1rem var(--umono);color:var(--acc);overflow:hidden;background:#fff}
.ico img{width:24px;height:24px}
.body{flex:1;min-width:0}
.body h3{margin:0;font-size:1rem;font-weight:650}
.body a{font:500 .88rem var(--mono);color:var(--acc);text-decoration:none}
.body a:hover{text-decoration:underline}
.dest,.meta{font:400 .78rem var(--mono);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts{display:flex;gap:6px}
.item .acts button,.ghost{background:transparent;border:1px solid var(--line);border-radius:4px;padding:5px 11px;font:500 .78rem var(--mono)}
.item .acts button:hover,.ghost:hover{border-color:var(--ink)}
.item .acts .del:hover{color:var(--bad);border-color:var(--bad)}
.empty{text-align:center;color:var(--mute);padding:40px 0;font:400 .9rem var(--mono)}
dialog{border:1px solid var(--line);background:var(--paper);border-radius:6px;padding:26px;text-align:center;box-shadow:0 20px 50px rgba(40,35,25,.3)}
dialog::backdrop{background:rgba(40,35,25,.4)}
#qrbox{display:inline-block;padding:14px;background:#fff;border:1px solid var(--line)}
#qrlabel{margin:12px auto;font:500 .8rem var(--mono);word-break:break-all;max-width:260px}
dialog .acts{justify-content:center}
dialog .acts button:first-child{background:var(--ink);color:var(--paper);border:0;border-radius:4px;padding:8px 16px;font:500 .8rem var(--mono)}
@media(max-width:640px){.sheet{padding:20px 20px 26px}h1{font-size:1.6rem}.grid{grid-template-columns:1fr}.bar{flex-direction:column;align-items:stretch}.bar button{padding:13px}.item{flex-wrap:wrap}.head input{width:140px}}
@media(prefers-reduced-motion:reduce){.d,.ear{animation:none;stroke-dashoffset:0}.word b{animation:none}}