:root{--bg: #0B0B0F;--surface: #16161A;--surface-2: #1E1E24;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--accent: #FF3B30;--accent-2: #007AFF;--text: #FFFFFF;--muted: #8A8A93;--success: #32D74B;--warning: #FF9F0A}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}h1,h2,h3,.display{font-family:Barlow Condensed,Inter,sans-serif;font-weight:800;letter-spacing:-.01em;margin:0;text-transform:uppercase}.bebas{font-family:Bebas Neue,sans-serif;letter-spacing:.02em}.tnum{font-variant-numeric:tabular-nums}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}::selection{background:var(--accent);color:#fff}.app-shell{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:1200px;margin:0 auto;padding:32px 24px}.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px 24px;background:#0b0b0fbf;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);flex-wrap:wrap}.brand{font-family:Bebas Neue,sans-serif;font-size:26px;letter-spacing:1px;display:flex;align-items:center;gap:8px}.brand .dot{width:12px;height:12px;background:var(--accent);display:inline-block}.nav-links{display:flex;gap:6px;margin-left:12px;flex-wrap:wrap}.nav-link{padding:8px 14px;border-radius:4px;color:var(--muted);font-weight:600;font-size:14px;transition:color .15s,background-color .15s}.nav-link:hover{color:var(--text);background:var(--surface)}.nav-link.active{color:var(--text);background:var(--surface-2)}.nav-spacer{flex:1}.nav-user{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}.role-badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--border-strong);border-radius:3px;color:var(--text)}.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 11px;cursor:pointer;background:var(--surface);border:1px solid var(--border-strong);border-radius:6px}.nav-toggle span{display:block;height:2px;width:100%;background:var(--text);transition:transform .22s ease,opacity .22s ease}.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.nav-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.avatar-wrap{position:relative}.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#0b0b0d;font-family:Barlow Condensed,sans-serif;font-weight:800;font-size:16px;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .15s}.avatar:hover{transform:scale(1.06);border-color:var(--text)}.avatar{position:relative}.notif-dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background:var(--accent);color:#fff;border:2px solid #0b0b0d;border-radius:10px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}.um-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:10px}.um-item{display:flex;align-items:center}.user-menu{position:absolute;top:52px;right:0;min-width:224px;z-index:120;background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:8px;box-shadow:0 12px 40px #00000080;animation:menuIn .16s ease}@keyframes menuIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.um-head{padding:10px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}.um-name{font-weight:800;font-size:15px;color:#fff}.um-email{color:var(--muted);font-size:12px;margin:2px 0 8px;overflow:hidden;text-overflow:ellipsis}.user-menu .role-badge{font-size:10px}.um-item{display:block;width:100%;text-align:left;padding:11px 10px;border-radius:6px;color:var(--text);font-weight:600;font-size:14px;background:none;border:none;cursor:pointer;transition:background-color .12s}.um-item:hover{background:var(--surface-2)}.um-item.danger{color:var(--accent)}.menu-backdrop{position:fixed;inset:0;z-index:110;background:transparent}@media(max-width:700px){.nav{gap:10px;padding:12px 16px}.nav-toggle{display:flex}.nav-links{order:3;width:100%;margin:10px 0 0;padding-top:10px;flex-direction:column;gap:4px;border-top:1px solid var(--border);display:none}.nav-links.open{display:flex;animation:navDrop .18s ease}@keyframes navDrop{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.nav-link{width:100%;padding:13px 14px;font-size:16px;border-radius:6px}.container{padding:24px 16px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-weight:700;font-size:14px;letter-spacing:.02em;border-radius:4px;transition:background-color .15s,border-color .15s,transform .1s,color .15s;text-transform:uppercase}.btn:hover{background:var(--surface-2);border-color:var(--border-strong)}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:#ff5147;border-color:#ff5147}.btn-blue{background:var(--accent-2);border-color:var(--accent-2);color:#fff}.btn-blue:hover{background:#1a86ff}.btn-ghost{background:transparent;border-color:var(--border);color:var(--muted)}.btn-ghost:hover{color:var(--text);background:var(--surface)}.btn-danger{background:transparent;border-color:#ff3b3066;color:var(--accent)}.btn-danger:hover{background:#ff3b301f}.btn-lg{padding:16px 28px;font-size:16px}.btn-block{width:100%}.card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:20px}.input,select.input{width:100%;padding:12px 14px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:4px;font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2)}.input::placeholder{color:var(--muted)}.label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.muted{color:var(--muted)}.error-text{color:var(--accent);font-size:14px;font-weight:600}.grid{display:grid;gap:20px}.grid-plans{grid-template-columns:repeat(1,1fr)}@media(min-width:700px){.grid-plans{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.grid-plans{grid-template-columns:repeat(3,1fr)}}.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px}.toast{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);padding:14px 18px;border-radius:6px;min-width:240px;font-size:14px;font-weight:500;border-left:3px solid var(--accent-2);animation:slidein .2s ease}.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--accent)}@keyframes slidein{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes fadeup{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.fade-up{animation:fadeup .3s ease both}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
