:root{--ink: #111111;--cream: #fff3d6;--paper: #ffffff;--green: #3ddc84;--red: #ff5a5a;--blue: #5b8def;--yellow: #ffd23f;--purple: #b8a4ff;--shadow: 5px 5px 0 var(--ink);--shadow-sm: 3px 3px 0 var(--ink);--border: 3px solid var(--ink)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;font-weight:700;color:var(--ink);background-color:var(--cream);background-image:radial-gradient(var(--ink) 1.4px,transparent 1.4px);background-size:26px 26px;background-position:-13px -13px}.center{min-height:100%;display:grid;place-items:center;padding:20px}.muted{color:#6b6350;font-weight:600}.mono{font-family:ui-monospace,Menlo,Consolas,monospace}.strong{font-weight:800}.spacer{flex:1}.brand{display:flex;align-items:center;gap:10px}.brand-logo{display:grid;place-items:center;width:38px;height:38px;background:var(--yellow);border:var(--border);border-radius:10px;box-shadow:var(--shadow-sm);font-size:20px;transform:rotate(-4deg)}.brand-name{font-size:22px;letter-spacing:.5px}.card{background:var(--paper);border:var(--border);border-radius:16px;box-shadow:var(--shadow);padding:20px}.card h2{margin:0 0 14px}.auth-card{width:360px;max-width:100%;display:flex;flex-direction:column;gap:16px}.label{display:block;font-size:14px;margin-bottom:6px}.input{font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:var(--border);border-radius:12px;padding:9px 12px;box-shadow:var(--shadow-sm)}.input:focus{outline:none;background:#fffbe9}.btn{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:var(--border);border-radius:12px;padding:10px 18px;cursor:pointer;box-shadow:var(--shadow);transition:transform 60ms ease,box-shadow 60ms ease,filter 60ms ease}.btn:hover{filter:brightness(1.04)}.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}.btn:disabled{opacity:.55;cursor:default;box-shadow:var(--shadow-sm)}.btn-primary{background:var(--blue);color:#fff}.btn-ghost{background:var(--paper)}.btn.sm{font-size:14px;padding:7px 12px;box-shadow:var(--shadow-sm)}.btn.block{width:100%}.linkbtn{background:none;border:none;font:inherit;color:var(--blue);cursor:pointer;padding:4px 0;text-align:left}.linkbtn.strong{color:var(--ink);font-size:16px}.hint-text{font-size:13px;font-weight:600;color:#6b6350;margin:8px 0 0}.error-text{color:#c43030;font-weight:700;margin:4px 0 0}form{display:flex;flex-direction:column;gap:12px}.inline-form{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}.page{display:flex;flex-direction:column;min-height:100%}.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;background:var(--paper);border-bottom:var(--border)}.dash{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px;align-items:start}@media (max-width: 820px){.dash{grid-template-columns:1fr}}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.list-row{display:flex;align-items:center;gap:10px;background:var(--cream);border:var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:10px 14px}.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);flex-shrink:0}.dot.on{background:var(--green)}.dot.off{background:#cfc6b0}.badge{font-size:12px;padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}.badge.ok{background:var(--green)}.addmsg{font-size:13px;font-weight:600}.addmsg.error{color:#c43030}.addmsg.pending{color:#8a6d00}.addmsg.ok{color:#1c7a3f}.fw-chip{font-size:12px;padding:4px 8px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}.fw-chip.fw-new{background:var(--yellow);cursor:pointer}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#11111159;display:grid;place-items:center;padding:20px;z-index:100}.modal{width:380px;max-width:100%;display:flex;flex-direction:column;gap:14px}.modal h3{margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.editor-page{height:100%}.name-input{width:220px}.note{margin-left:4px}.editor-frame{flex:1;width:100%;border:0}