:root{--ink:#2B313B;--ink2:#566070;--ink3:#3A4250;--glass:rgba(255,255,255,.50);--glass-strong:rgba(255,255,255,.80);--edge:rgba(255,255,255,.85);--line:rgba(43,49,59,.10);--ok:#2F9E75;--warn:#B7791F;--bad:#A32D2D}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:'Inter','DejaVu Sans',system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,#F4F5F7,#C9CED6) fixed}
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
body::before{left:-6%;top:6%;width:420px;height:420px;background:#fff;opacity:.9}
body::after{right:-8%;bottom:-12%;width:480px;height:480px;background:#AEB5C0;opacity:.8}
a{color:var(--ink)}
button{font:inherit;cursor:pointer}
.mono{font-family:'JetBrains Mono','DejaVu Sans Mono',monospace}
.shell{position:relative;z-index:1;display:flex;flex-wrap:wrap;min-height:100vh}
nav{flex:0 0 200px;padding:20px 12px;border-right:1px solid var(--line);background:rgba(255,255,255,.40);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:4px}
.brand{padding:4px 12px 18px;font-weight:700;font-size:17px;letter-spacing:.16em;color:var(--ink)}
nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;color:#4A5360}
nav a.on{background:rgba(255,255,255,.85);color:var(--ink)}
nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.who{margin-top:auto;padding:12px;border:1px solid var(--edge);border-radius:14px;background:rgba(255,255,255,.45);font-size:12px;line-height:1.6;color:var(--ink2)}
.who button{margin-top:6px;border:0;background:none;padding:0;color:var(--ink);text-decoration:underline;font-size:12px}
main{flex:999 1 640px;min-width:0;padding:20px 24px 28px;display:flex;flex-direction:column;gap:16px}
header{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
h2{margin:0;font-size:14px;font-weight:600;color:var(--ink3)}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--edge);border-radius:999px;background:rgba(255,255,255,.55);font-size:13px;color:var(--ink3)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.btn{height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(43,49,59,.16);background:rgba(255,255,255,.7);color:var(--ink);font-size:14px;font-weight:500}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.btn.danger{background:#FBE9E9;border-color:#E3A5A5;color:var(--bad)}
.btn.small{height:36px;padding:0 14px;font-size:13px}
.card{border:1px solid var(--edge);border-radius:18px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden}
.card .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)}
.banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border:1px solid #E3C76F;border-radius:18px;background:rgba(255,247,224,.88);font-size:14px;color:#7A5410}
.screen{border:1px solid var(--edge);border-radius:18px;overflow:hidden;background:#D5D9E0;box-shadow:0 16px 40px rgba(30,36,46,.16)}
.screen img{display:block;width:100%;height:auto;min-height:260px;background:#B9BFC9}
table{width:100%;border-collapse:collapse;font-size:13px}
td,th{padding:9px 18px;text-align:left;border-top:1px solid rgba(43,49,59,.07);vertical-align:top}
th{color:var(--ink2);font-weight:500;border-top:0}
.tag{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500}
.tag.read{background:#DCEFE7;color:#1F6B4E}.tag.desktop{background:#DDE6F5;color:#2F4F8A}.tag.admin{background:#F5E8CB;color:#7A5410}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.tile{padding:14px 18px;border:1px solid var(--edge);border-radius:18px;background:var(--glass)}
.tile b{display:block;font-size:22px;font-weight:600;margin-top:4px}
.tile span{font-size:12px;color:var(--ink2)}
.muted{color:var(--ink2);font-size:13px}
.crumb{padding:12px 18px;font-size:13px;color:var(--ink2);word-break:break-all}
.link{border:0;background:none;padding:0;color:var(--ink);text-decoration:underline;font-size:13px}
.pop{position:absolute;right:0;top:52px;z-index:10;width:340px;max-width:100%;padding:18px;border:1px solid var(--edge);border-radius:20px;background:var(--glass-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 50px rgba(30,36,46,.22);display:flex;flex-direction:column;gap:12px}
.field{display:flex;gap:8px}
.field div{flex:1;min-width:0;height:44px;padding:0 16px;display:flex;align-items:center;border-radius:999px;border:1px solid rgba(43,49,59,.14);background:rgba(255,255,255,.85);overflow:hidden;white-space:nowrap;font-size:13px}
.lbl{font-size:12px;font-weight:500;color:var(--ink2);margin-bottom:6px}
.scroll{overflow-x:auto}
pre{margin:0;padding:12px 18px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
@media(max-width:700px){nav{flex-basis:100%;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}.who{display:none}.brand{width:100%}}
/* login */
.center{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:28px}
.word{font-weight:700;font-size:30px;letter-spacing:.16em;padding-left:.16em}
.lcard{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 28px;border:1px solid rgba(255,255,255,.8);border-radius:26px;background:rgba(255,255,255,.45);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 20px 50px rgba(30,36,46,.2)}
.avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(180deg,#F4F5F7,#B9BFC9);border:2px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px}
.lcard label{align-self:stretch;font-size:13px;font-weight:500;color:var(--ink3);padding-left:16px}
.lcard input{width:100%;height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(43,49,59,.14);background:rgba(255,255,255,.72);color:var(--ink);font:inherit;font-size:14px}
.go{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
.err{min-height:18px;font-size:13px;color:var(--bad)}