*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg0:#07070a;--bg1:#0e0e12;--bg2:#151519;--bg3:#1c1c21;
  --bh:#242429;--ba:#2c2c32;--bd:#28282f;--bf:#c9943e;
  --t1:#f0f0f2;--t2:#a0a0aa;--t3:#6e6e7a;--t4:#4a4a54;
  --ac:#c9943e;--ach:#daa84f;--acm:rgba(201,148,62,.12);--acs:rgba(201,148,62,.05);
  --rd:#e54545;--rdh:#f06060;--rdm:rgba(229,69,69,.12);
  --gn:#2abf6a;--gnm:rgba(42,191,106,.12);
  --yl:#e8a830;--ylm:rgba(232,168,48,.12);
  --rs:6px;--rm:8px;--rl:12px;--rx:16px;
  --sh:0 4px 24px rgba(0,0,0,.45);--shl:0 12px 48px rgba(0,0,0,.6);
  --ff:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --fm:'SF Mono','Cascadia Code','Fira Code',Consolas,monospace;
  --sw:256px;
}
html,body{height:100%;font-family:var(--ff);font-size:14px;line-height:1.55;color:var(--t1);background:var(--bg0);-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ba);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--t4)}
::selection{background:var(--acm);color:var(--ac)}
input,textarea,select,button{font-family:inherit;font-size:inherit}

/* Auth */
.auth-s{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.auth-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 40%,rgba(201,148,62,.07) 0%,transparent 55%),radial-gradient(ellipse at 75% 65%,rgba(140,100,40,.05) 0%,transparent 50%),var(--bg0);animation:bp 18s ease-in-out infinite alternate}
@keyframes bp{0%{opacity:1}100%{opacity:.65}}
.auth-c{position:relative;z-index:1;width:100%;max-width:380px;padding:40px 36px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rx);box-shadow:var(--shl);text-align:center}
.auth-c .ai{color:var(--ac);margin-bottom:16px;display:flex;justify-content:center}
.auth-c h1{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px}
.auth-c .sub{font-size:13px;color:var(--t3);margin-bottom:28px}
.auth-c .err{color:var(--rd);font-size:12px;min-height:18px;margin-top:8px}
.auth-c .hint{font-size:11px;color:var(--t4);margin-top:16px}

/* Forms */
.fg{margin-bottom:16px;text-align:left}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.fi{width:100%;padding:10px 12px;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--rs);color:var(--t1);outline:none;transition:border .14s ease}
.fi:focus{border-color:var(--bf)}
.fi::placeholder{color:var(--t4)}
textarea.fi{resize:vertical;min-height:120px;font-family:var(--fm);font-size:13px;line-height:1.6}
select.fi{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e7a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.fr{display:flex;gap:12px}
.fr .fg{flex:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid var(--bd);border-radius:var(--rs);background:var(--bg3);color:var(--t1);cursor:pointer;font-weight:500;font-size:13px;transition:all .14s ease;white-space:nowrap}
.btn:hover{background:var(--bh);border-color:var(--t4)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--ac);border-color:var(--ac);color:#0a0a0b;font-weight:600}
.btn-p:hover{background:var(--ach);border-color:var(--ach)}
.btn-d{background:var(--rdm);border-color:rgba(229,69,69,.25);color:var(--rd)}
.btn-d:hover{background:var(--rd);border-color:var(--rd);color:#fff}
.btn-g{background:transparent;border-color:transparent;color:var(--t2)}
.btn-g:hover{background:var(--bh);color:var(--t1)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-blk{width:100%;justify-content:center}
.bi{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:var(--rs);background:transparent;color:var(--t3);cursor:pointer;transition:all .14s ease}
.bi:hover{background:var(--bh);color:var(--t1)}

/* App Layout */
.app{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
.sb{width:var(--sw);min-width:var(--sw);background:var(--bg1);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.sb-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--bd)}
.brand{font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--ac)}
.ps-w{padding:12px 16px;border-bottom:1px solid var(--bd)}
.ps-w label{display:block;font-size:10px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.sb-nav{flex:1;padding:8px}
.ni{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--rs);color:var(--t2);cursor:pointer;transition:all .14s ease;font-size:13px;font-weight:500;border-left:2px solid transparent;margin-bottom:2px}
.ni:hover{background:var(--bh);color:var(--t1)}
.ni.act{background:var(--acs);color:var(--ac);border-left-color:var(--ac)}
.ni .nv{flex-shrink:0;display:flex}
.nb{margin-left:auto;background:var(--ba);color:var(--t3);font-size:11px;font-weight:600;padding:1px 7px;border-radius:10px;min-width:20px;text-align:center}
.ni.act .nb{background:var(--acm);color:var(--ac)}
.sb-ft{padding:8px;border-top:1px solid var(--bd)}

/* Content */
.ct{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg0);background-image:radial-gradient(circle at 1px 1px,var(--bd) .5px,transparent 0);background-size:28px 28px}
.ct-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 32px 16px;border-bottom:1px solid var(--bd);background:var(--bg0);flex-shrink:0}
.ct-hd h2{font-size:18px;font-weight:700;letter-spacing:-.2px}
.ct-ha{display:flex;gap:8px;align-items:center}
.ct-bd{flex:1;overflow-y:auto;padding:24px 32px 40px}

/* Dashboard */
.ds{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:28px}
.sc{padding:16px 18px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rm);transition:border .14s ease}
.sc:hover{border-color:var(--t4)}
.sl{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.sv{font-size:26px;font-weight:700}
.stl{font-size:13px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.d-act{display:flex;flex-wrap:wrap;gap:8px}
.qb{display:flex;align-items:center;gap:8px;padding:12px 18px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rm);color:var(--t1);cursor:pointer;transition:all .14s ease;font-size:13px}
.qb:hover{border-color:var(--ac);background:var(--acm);color:var(--ac)}

/* Item List */
.il{display:flex;flex-direction:column;gap:4px}
.ir{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rm);cursor:pointer;transition:all .14s ease}
.ir:hover{border-color:var(--t4);background:var(--bg3)}
.ir .ri{flex-shrink:0;color:var(--t3);display:flex}
.ir .rb{flex:1;min-width:0}
.ir .rt{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ir .rs{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ir .ra{display:flex;gap:4px;opacity:0;transition:opacity .14s ease;flex-shrink:0}
.ir:hover .ra{opacity:1}
.pd{color:var(--ac)}

/* Detail */
.dh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:16px}
.dt{font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.3}
.dm{display:flex;gap:16px;font-size:12px;color:var(--t3);margin-bottom:20px;flex-wrap:wrap}
.dm span{display:flex;align-items:center;gap:4px}
.dsec{margin-bottom:24px}
.dstl{font-size:11px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}
.df{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rs);margin-bottom:6px}
.dfl{font-size:12px;font-weight:600;color:var(--t3);min-width:80px;text-transform:uppercase;letter-spacing:.4px}
.dfv{flex:1;font-size:13px;word-break:break-all;font-family:var(--fm)}
.dfa{display:flex;gap:4px}
.pwd-d{letter-spacing:3px;color:var(--t4)}
.cb{padding:16px;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--rm);font-family:var(--fm);font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-all;color:var(--gn)}
.tl{display:flex;flex-wrap:wrap;gap:6px}
.tg{padding:3px 10px;background:var(--bg3);border:1px solid var(--bd);border-radius:20px;font-size:11px;color:var(--t2);font-weight:500}

/* Markdown */
.mc{line-height:1.75;color:var(--t2)}
.mc h1{font-size:24px;font-weight:700;color:var(--t1);margin:24px 0 12px}
.mc h2{font-size:19px;font-weight:700;color:var(--t1);margin:20px 0 10px}
.mc h3{font-size:16px;font-weight:600;color:var(--t1);margin:16px 0 8px}
.mc p{margin:8px 0}
.mc strong{color:var(--t1);font-weight:600}
.mc em{font-style:italic}
.mc ul,.mc ol{padding-left:24px;margin:8px 0}
.mc li{margin:4px 0}
.mc blockquote{border-left:3px solid var(--ac);padding:8px 16px;margin:12px 0;color:var(--t3);background:var(--acm);border-radius:0 var(--rs) var(--rs) 0}
.mc hr{border:none;border-top:1px solid var(--bd);margin:20px 0}
.mc a{color:var(--ac);text-decoration:underline;text-underline-offset:2px}
.mc pre{background:var(--bg1);border:1px solid var(--bd);border-radius:var(--rs);padding:16px;margin:12px 0;overflow-x:auto}
.mc pre code{font-family:var(--fm);font-size:13px;color:var(--t2);background:none;padding:0}
.mc :not(pre)>code{font-family:var(--fm);font-size:.88em;background:var(--bg3);padding:2px 6px;border-radius:4px;color:var(--ac)}

/* Modal */
.mo{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;animation:fi .15s ease}
@keyframes fi{from{opacity:0}to{opacity:1}}
.md{width:100%;max-width:520px;max-height:85vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rx);box-shadow:var(--shl);animation:su .2s ease}
.md-lg{max-width:640px}
@keyframes su{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.md-h{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--bd)}
.md-h h3{font-size:16px;font-weight:700}
.md-b{padding:20px 24px}
.md-f{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px 20px;border-top:1px solid var(--bd)}

/* Palette */
.po{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);display:flex;justify-content:center;padding-top:18vh;animation:fi .1s ease}
.pa{width:100%;max-width:560px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--shl);overflow:hidden;animation:su .15s ease}
.pi-w{padding:12px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.pi-w svg{color:var(--t4);flex-shrink:0}
.pi-in{flex:1;background:none;border:none;color:var(--t1);font-size:15px;outline:none}
.pi-in::placeholder{color:var(--t4)}
.pi-r{max-height:320px;overflow-y:auto;padding:6px}
.pi-i{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rs);cursor:pointer;font-size:13px;color:var(--t2);transition:background .14s ease}
.pi-i:hover,.pi-i.act{background:var(--bh);color:var(--t1)}
.pi-i .pi-ic{flex-shrink:0;display:flex;color:var(--t4)}
.pi-i.act .pi-ic{color:var(--ac)}
.pi-i .pi-lb{flex:1}
.pi-i .pi-ht{font-size:11px;color:var(--t4)}
.pi-gl{padding:8px 12px 4px;font-size:10px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.8px}
.pi-em{padding:24px;text-align:center;color:var(--t4);font-size:13px}

/* Toast */
.tc{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}
.tt{padding:10px 18px;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--rm);font-size:13px;color:var(--t1);box-shadow:var(--sh);transform:translateX(110%);transition:transform .25s ease;display:flex;align-items:center;gap:8px}
.tt.vis{transform:translateX(0)}
.tt.ts{border-color:rgba(42,191,106,.3)}
.tt.ts::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gn);flex-shrink:0}
.tt.te{border-color:rgba(229,69,69,.3)}
.tt.te::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rd);flex-shrink:0}
.tt.ti::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac);flex-shrink:0}

/* Save indicator */
.si{position:fixed;bottom:20px;left:20px;z-index:300;display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--rm);font-size:11px;color:var(--t4);opacity:0;transition:opacity .2s ease;pointer-events:none}
.si.vis{opacity:1}
.si .dot{width:6px;height:6px;border-radius:50%;background:var(--gn)}

/* Empty */
.es{text-align:center;padding:60px 20px;color:var(--t4)}
.es .ei{margin-bottom:16px;opacity:.4;display:flex;justify-content:center}
.es h3{font-size:15px;font-weight:600;color:var(--t3);margin-bottom:6px}
.es p{font-size:13px;max-width:300px;margin:0 auto 16px}

/* Security bar */
.sb-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--gnm);border-radius:var(--rs);font-size:11px;color:var(--gn);font-weight:500}

/* Trash */
.ti{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rm);margin-bottom:6px}
.ti .tb{flex:1}
.ti .ttl{font-size:13px;font-weight:600}
.ti .tsub{font-size:12px;color:var(--t4);margin-top:2px}
.ti .tact{display:flex;gap:6px}

/* Settings */
.ss{margin-bottom:32px}
.ss h3{font-size:14px;font-weight:600;margin-bottom:14px;color:var(--t1)}
.sr{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--bd)}
.sr:last-child{border-bottom:none}
.sr .sl{font-size:13px;color:var(--t2)}
.sr .sd{font-size:11px;color:var(--t4);margin-top:2px}
.sr .sc select{padding:6px 10px;background:var(--bg3);border:1px solid var(--bd);border-radius:var(--rs);color:var(--t1);font-size:13px;outline:none;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e7a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer}

/* Reveal warning */
.rw{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--ylm);border:1px solid rgba(232,168,48,.2);border-radius:var(--rm);margin-bottom:12px;font-size:13px;color:var(--yl)}
.rw svg{flex-shrink:0;margin-top:1px}

/* Responsive */
@media(max-width:768px){
  .sb{position:fixed;left:-260px;z-index:50;height:100vh;transition:left .24s ease}
  .sb.open{left:0}
  .ct-bd{padding:16px}
  .ct-hd{padding:14px 16px 12px}
  .ds{grid-template-columns:1fr 1fr}
  .mob{display:flex!important}
}
.mob{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}