*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Satoshi',system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:13px;line-height:1.5;height:100vh;height:100dvh;overflow:hidden;display:flex}
.sb{width:214px;flex-shrink:0;background:var(--surf);border-right:1px solid var(--bdr);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto}
.sb-logo{padding:13px 13px 11px;border-bottom:1px solid var(--bdr)}
.sb-badge{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;background:var(--gold);color:var(--bg);border-radius:7px;font-size:9px;font-weight:700;letter-spacing:.04em;margin-bottom:5px;font-family:Arial,Helvetica,sans-serif}
.sb-name{font-size:13px;font-weight:600;line-height:1.2;color:var(--tx)}
.sb-sub{font-size:10px;color:var(--mt)}
.ns{padding:7px 7px 2px}
.nl{font-size:9.5px;font-weight:500;color:var(--ht);text-transform:uppercase;letter-spacing:.08em;padding:3px 8px 5px}
.ni{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;cursor:pointer;color:var(--mt);font-size:12.5px;transition:background .12s,color .12s;user-select:none}
.ni:hover{background:var(--surf-h);color:var(--tx)}
.ni.active{background:var(--sky-bg);color:var(--sky-tx);font-weight:500}
.ni i{font-size:14px;flex-shrink:0;opacity:.7}
.ni.active i{opacity:1}
.nbdg{margin-left:auto;font-size:9px;font-weight:700;padding:1px 5px;border-radius:99px;color:#0A0E17}
.nb-r{background:var(--rd)}.nb-a{background:var(--am)}
.sb-user{padding:9px 11px;border-top:1px solid var(--bdr);display:flex;align-items:center;gap:8px;margin-top:auto}
.av-sm{width:26px;height:26px;border-radius:50%;background:var(--sky-bg);color:var(--sky-tx);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:43px;flex-shrink:0;background:var(--surf);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 18px;gap:10px}
.tb-title{font-size:13px;font-weight:500;flex:1;color:var(--tx)}
.tb-date{font-size:11px;color:var(--mt)}
.ib{width:27px;height:27px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mt);border:none;background:transparent;font-size:14px;transition:background .12s,color .12s}
.ib:hover{background:var(--surf-h);color:var(--tx)}
.content{flex:1;overflow-y:auto;padding:16px 18px;background:var(--bg);padding-bottom:max(16px,env(safe-area-inset-bottom,16px))}
.page{display:none;animation:fi .15s ease}
.page.active{display:block}
@keyframes fi{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}