:root{--ivory: #FFFFF0;--panel: #FCFBFB;--sand: #F3EEDF;--cream: #F5E6CC;--border: #E6E0D2;--border-soft: #EFEADD;--ink: #4E342E;--teal: #004E64;--teal-dark: #003647;--green: #2D4F1E;--terra: #E27D60;--rust: #8C3B1F;--cyan: #00CEC9;--muted: #8A7F72;--muted-2: #8A9BA0;--muted-3: #6B5E52;--stone: #B4A98F;--serif: "Spectral", Georgia, serif;--sans: "Public Sans", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace;--shadow-card: 0 18px 40px -30px rgba(0, 78, 100, .4)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{background:var(--ivory);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:var(--teal);text-decoration:none}a:hover{color:var(--terra)}button{font-family:inherit;cursor:pointer}input{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#d9d2c4;border-radius:8px;border:2px solid var(--ivory)}::-webkit-scrollbar-track{background:transparent}@keyframes fadeInUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.mono{font-family:var(--mono)}.kicker{font:500 11px/1 var(--mono);letter-spacing:3px;color:var(--terra);text-transform:uppercase}.eyebrow{font:500 10.5px/1 var(--mono);letter-spacing:1.5px;color:var(--muted-2);text-transform:uppercase}.serif{font-family:var(--serif)}.app{display:grid;grid-template-columns:250px 1fr;grid-template-rows:minmax(0,1fr);height:100vh;width:100vw;overflow:hidden;background:var(--ivory)}.sidebar{display:flex;flex-direction:column;background:var(--teal);color:var(--ivory);padding:26px 20px 20px;position:relative;overflow:hidden}.sidebar .watermark{position:absolute;right:-90px;top:-40px;font:600 320px/.8 var(--serif);color:#fffff00a;pointer-events:none;-webkit-user-select:none;user-select:none}.brand{display:flex;align-items:center;gap:11px;position:relative;z-index:1}.brand .glyph{width:38px;height:38px;border-radius:10px;background:var(--cream);color:var(--teal);display:grid;place-items:center;font:600 22px/1 var(--serif);box-shadow:0 4px 14px #0000002e}.brand .name{font:600 20px/1 var(--serif);letter-spacing:.2px}.brand .tag{font:500 9.5px/1 var(--mono);letter-spacing:2.4px;color:var(--cyan);margin-top:4px}.nav{display:flex;flex-direction:column;gap:4px;margin-top:38px;position:relative;z-index:1}.navbtn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border:none;border-radius:11px;font:600 13.5px var(--sans);transition:.2s;text-align:left;background:transparent;color:#fffff0d1}.navbtn:hover{background:#fffff014;color:var(--ivory)}.navbtn.active{background:var(--cream);color:var(--teal)}.navbtn .dot{width:7px;height:7px;border-radius:50%;flex:none;background:#fffff059}.navbtn.active .dot{background:var(--terra)}.navbtn .label{flex:1}.navbtn .badge{font:600 10px var(--mono);padding:2px 7px;border-radius:20px;background:#fffff024;color:var(--cyan)}.navbtn.active .badge{background:var(--teal);color:var(--ivory)}.side-footer{margin-top:auto;position:relative;z-index:1}.side-footer .rule{height:1px;background:#fffff024;margin:0 0 16px}.side-user{display:flex;align-items:center;gap:11px}.avatar{width:34px;height:34px;border-radius:50%;background:var(--terra);display:grid;place-items:center;font:600 13px var(--sans);color:var(--ivory);flex:none}.side-user .who{flex:1;min-width:0}.side-user .who .n{font:600 12.5px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-user .who .e{font:400 11px var(--sans);color:#fffff099;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.signout{margin-top:12px;width:100%;padding:9px;border-radius:9px;border:1px solid rgba(255,255,240,.2);background:transparent;color:#fffff0d9;font:600 12px var(--sans);transition:.2s}.signout:hover{background:#fffff01a;color:var(--ivory)}.content{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ivory)}.topbar{display:flex;align-items:center;gap:16px;padding:0 34px;height:74px;flex:none;border-bottom:1px solid var(--border);background:#fffff0e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20}.topbar .crumb{font:500 10px/1 var(--mono);letter-spacing:2.6px;color:var(--muted-2);text-transform:uppercase}.topbar h1{margin:5px 0 0;font:500 25px/1 var(--serif);color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.range{display:flex;align-items:center;gap:2px;padding:4px;background:var(--sand);border:1px solid var(--border);border-radius:11px}.range button{padding:7px 13px;border:none;border-radius:8px;font:600 12px var(--mono);transition:.2s;background:transparent;color:var(--muted)}.range button.active{background:var(--teal);color:var(--ivory)}.scroll{flex:1;min-height:0;overflow-y:auto;position:relative;perspective:1400px}.pad{padding:34px 40px 60px;animation:fadeInUp .5s ease both}.lead{margin:0;font:400 15px/1.5 var(--sans);color:var(--muted-3);max-width:560px}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card)}.card.pad20{padding:24px 26px}.card-title{margin:0 0 20px;font:500 15px var(--serif);color:var(--teal)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}thead tr{background:var(--sand)}th{text-align:left;padding:14px 22px;font:500 10.5px var(--mono);letter-spacing:1.4px;color:var(--muted-2);text-transform:uppercase;white-space:nowrap}td{padding:15px 22px;border-top:1px solid var(--border-soft)}tr.click{cursor:pointer;transition:.15s}tr.click:hover{background:#f7f2e5}.t-strong{font:500 13.5px var(--sans);color:var(--teal)}.t-num{font:500 13.5px var(--mono);color:var(--ink)}.t-soft{font:400 13px var(--sans);color:var(--muted)}.badge{display:inline-block;padding:3px 10px;border-radius:20px;font:600 10.5px var(--mono);white-space:nowrap}.grade{display:inline-block;padding:3px 10px;border-radius:20px;font:600 11px var(--mono);white-space:nowrap}.btn{padding:13px 22px;border-radius:11px;border:1px solid var(--teal);background:var(--teal);color:var(--ivory);font:600 13px var(--sans);transition:.2s}.btn:hover{background:var(--teal-dark)}.btn-soft{padding:8px 15px;border-radius:9px;border:1px solid var(--border);background:var(--sand);color:var(--teal);font:600 12px var(--sans);transition:.2s}.btn-soft:hover{border-color:var(--teal)}.btn-green{padding:8px 15px;border-radius:9px;border:1px solid var(--green);background:var(--green);color:var(--ivory);font:600 12px var(--sans);transition:.2s}.btn-green:hover{background:#22380f}.btn-del{padding:7px 13px;border-radius:8px;border:1px solid #E7C4B8;background:#fcf3ef;color:var(--rust);font:600 11.5px var(--sans);transition:.2s}.btn-del:hover{background:var(--rust);color:var(--ivory);border-color:var(--rust)}.state{padding:60px 40px;text-align:center;font:400 15px var(--sans);color:var(--muted)}.state.err{color:var(--rust)}.meter{margin-bottom:16px}.meter-top{display:flex;justify-content:space-between;gap:10px;font:500 12.5px var(--sans);color:var(--ink);margin-bottom:6px}.meter-top .v{color:var(--muted);font-family:var(--mono)}.meter-track{height:9px;background:var(--border-soft);border-radius:6px;overflow:hidden}.meter-fill{height:100%;border-radius:6px}.logrow{display:flex;gap:12px;padding:12px 24px;border-top:1px solid var(--border-soft);align-items:baseline}.logrow .time{font:500 11px var(--mono);color:var(--muted);white-space:nowrap}.logrow .msg{font:400 12.5px var(--sans);color:var(--ink)}.drawer-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b141a66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:40;animation:fadeInUp .3s ease both}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);background:var(--ivory);z-index:41;box-shadow:-30px 0 60px -30px #00000080;display:flex;flex-direction:column}.drawer-head{padding:26px 30px;border-bottom:1px solid var(--border);background:var(--teal);color:var(--ivory);display:flex;justify-content:space-between;align-items:flex-start}.drawer-head .email{font:400 24px var(--serif);margin-top:6px;word-break:break-all}.drawer-head .meta{font:400 12.5px var(--sans);color:#fffff0b3;margin-top:4px}.drawer-close{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,240,.25);background:transparent;color:var(--ivory);font-size:18px;line-height:1;transition:.2s;flex:none}.drawer-close:hover{background:#fffff01f}.drawer-body{flex:1;overflow-y:auto;padding:26px 30px}.section-label{font:500 10.5px var(--mono);letter-spacing:1.6px;color:var(--muted-2);text-transform:uppercase;margin:28px 0 12px}.timeline{border-left:2px solid var(--border);margin-left:6px;padding-left:20px;display:flex;flex-direction:column;gap:16px}.timeline .item{position:relative}.timeline .item .node{position:absolute;left:-27px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--cyan);border:2px solid var(--ivory)}.timeline .item .lbl{font:500 13px var(--sans);color:var(--ink)}.timeline .item .tm{font:400 11.5px var(--mono);color:var(--muted);margin-top:2px}