:root{--bg: #f3f6f9;--card: #ffffff;--muted: #6b7280;--primary: #0a66c2;--accent: #0f172a;--border: #e6eef6;--success: #10b981;--danger: #ef4444;--glass: rgba(15,23,42,.04);--radius: 10px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:linear-gradient(180deg,var(--bg),#eef3f7);color:#0f172a;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45}a{color:var(--primary);text-decoration:none}button,input,select,textarea{font:inherit}.container{max-width:1100px;margin:28px auto;padding:24px 20px}.page-title{font-size:20px;font-weight:600;margin:0 0 12px;color:var(--accent)}.card{background:var(--card);border-radius:var(--radius);box-shadow:0 6px 20px #0f172a0f;border:1px solid var(--border);padding:20px}.panel{background:linear-gradient(180deg,#0f172a05,#0f172a03);border-radius:12px;padding:12px;border:1px solid rgba(15,23,42,.03)}.panel .muted{margin-top:0}.panel .btn{margin:0}.auth-footer{display:flex;gap:10px;justify-content:center;margin-top:12px}.auth-footer .btn{min-width:140px;padding:8px 12px}.card>*+*{margin-top:12px}.muted{color:var(--muted)}.row{display:flex;gap:12px;align-items:center}.col{display:flex;flex-direction:column;gap:8px}.form-row{display:flex;gap:10px;align-items:center}.form-row .input{flex:1}.header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;background:#ffffff80;border-bottom:1px solid rgba(0,0,0,.04)}.brand{display:flex;align-items:center;gap:12px}.logo{width:36px;height:36px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.nav{display:flex;gap:14px;align-items:center}.btn{padding:8px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer}.btn-primary{background:var(--primary);color:#fff;border-color:#0a66c2e6}.btn-ghost{background:transparent;color:var(--accent);border-color:transparent}.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--border)}.input{padding:10px 12px;border-radius:8px;border:1px solid var(--border);width:100%;background:linear-gradient(180deg,#fff,var(--glass));min-height:40px;line-height:1.2}.card-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}.list-item{padding:12px;border-radius:8px;border:1px solid var(--border);background:#fff;display:flex;flex-direction:column;gap:8px}.color-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:middle}.color-dot.green{background:#22c55e}.color-dot.yellow{background:#eab308}.color-dot.red{background:#ef4444}.debug-badge{position:fixed;bottom:8px;right:8px;background:#111;color:#fff;padding:6px 10px;border-radius:8px;font-size:12px;opacity:.9;z-index:9999}@media (max-width: 900px){.container{padding:14px;margin:16px}.card-grid{grid-template-columns:1fr}.header{padding:12px}}:root{--click-feedback: rgba(10,102,194,.12)}.btn{transition:transform .14s cubic-bezier(.2,.9,.2,1),box-shadow .14s,opacity .14s;will-change:transform}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px) scale(.99)}.btn:focus-visible{outline:none;box-shadow:0 0 0 6px #0a66c214}.list-item{transition:transform .16s ease,box-shadow .16s ease}.list-item:hover{transform:translateY(-4px);box-shadow:0 10px 30px #0f172a0f}.click-feedback{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--click-feedback);transform:translate(-50%,-50%) scale(.2);pointer-events:none;animation:click-pop .42s ease-out forwards;z-index:9998}@keyframes click-pop{to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}.loading-spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(15,23,42,.12);border-top-color:var(--primary);display:inline-block;vertical-align:middle;animation:spin .78s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;right:18px;bottom:18px;background:#0f172af2;color:#fff;padding:10px 14px;border-radius:8px;box-shadow:0 8px 30px #0f172a1f;transform:translateY(10px);opacity:0;animation:toast-in .26s ease-out forwards}@keyframes toast-in{to{transform:translateY(0);opacity:1}}