*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d1a;--surface: #13131f;--surface-2: #1a1a2e;--border: #ffffff12;--border-hover: #ffffff25;--accent: #a78bfa;--accent-dim: #7c3aed;--accent-glow: rgba(167, 139, 250, .15);--text: #e2e8f0;--text-muted: #94a3b8;--text-dim: #64748b;--green: #10b981;--red: #ef4444;--amber: #f59e0b;--blue: #3b82f6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--radius-sm: 6px;--radius: 10px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);--shadow-accent: 0 4px 24px rgba(167, 139, 250, .15);--text-xs: .6875rem;--text-sm: .8125rem;--text-base: .875rem;--text-lg: 1rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--lh-tight: 1.25;--lh-normal: 1.5;--lh-relaxed: 1.625;--transition-fast: .15s ease-out;--transition: .2s ease-out;--transition-slow: .3s ease-out}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:var(--text-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.layout{display:flex;min-height:100vh}.sidebar{width:260px;flex-shrink:0;background:linear-gradient(180deg,var(--surface) 0%,#0f0f1e 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative;z-index:50}.sidebar-brand{padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--border)}.sidebar-brand h2{font-size:var(--text-xl);font-weight:800;color:var(--accent);letter-spacing:-.02em;text-shadow:0 0 30px rgba(167,139,250,.3)}.sidebar-brand span{font-size:var(--text-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;font-weight:500}.sidebar nav{flex:1;padding:var(--space-3) var(--space-3);display:flex;flex-direction:column;gap:2px}.sidebar-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);background:#00000026}.sidebar-username{font-size:var(--text-xs);color:var(--text-dim);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);border-left:3px solid transparent;transition:background var(--transition),color var(--transition),border-color var(--transition);font-weight:450;position:relative}.nav-item:hover{background:#a78bfa0f;color:var(--text)}.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-glow);font-weight:550}.sidebar-toggle{display:none;position:fixed;top:var(--space-3);left:var(--space-3);z-index:60;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:20px;cursor:pointer;align-items:center;justify-content:center;transition:background var(--transition)}.sidebar-toggle:hover{background:var(--surface-2)}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:40;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.main{flex:1;padding:var(--space-6);overflow-y:auto;min-width:0}.page-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-5);letter-spacing:-.02em;color:var(--text)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5);flex-wrap:wrap;gap:var(--space-3)}.page-header .page-title{margin:0}.page-header-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4);margin-bottom:var(--space-5)}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);position:relative;overflow:hidden;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);box-shadow:var(--shadow-sm)}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-dim),var(--accent));opacity:0;transition:opacity var(--transition)}.stat-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow)}.stat-card:hover:before{opacity:1}.stat-label{font-size:var(--text-xs);color:var(--text-dim);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.stat-value{font-size:var(--text-3xl);font-weight:700;letter-spacing:-.02em;line-height:var(--lh-tight)}.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:auto;box-shadow:var(--shadow-sm)}table{width:100%;border-collapse:collapse}thead tr{border-bottom:1px solid var(--border)}th{padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--text-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;white-space:nowrap;background:#00000026;position:sticky;top:0;z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);font-size:var(--text-sm)}tr:last-child td{border-bottom:none}tbody tr{transition:background var(--transition-fast)}tbody tr:nth-child(2n) td{background:#ffffff03}tbody tr:hover td{background:#a78bfa0a}.pagination{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);justify-content:flex-end}.pagination-info{color:var(--text-muted);font-size:var(--text-sm);font-weight:500}.btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:var(--text-sm);font-weight:500;height:36px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:border-color var(--transition),color var(--transition),background var(--transition),transform var(--transition-fast),box-shadow var(--transition);white-space:nowrap}.btn:hover{border-color:var(--accent);color:var(--accent);background:#a78bfa0f}.btn:active:not(:disabled){transform:scale(.98)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled{opacity:.4;cursor:default;pointer-events:none}.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);position:relative;overflow:hidden}.login-wrap:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.08) 0%,transparent 70%);pointer-events:none}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-7);width:380px;max-width:calc(100vw - 32px);box-shadow:var(--shadow-lg),0 0 80px #a78bfa0d;position:relative;z-index:1}.login-card h1{font-size:var(--text-2xl);font-weight:800;color:var(--accent);margin-bottom:var(--space-1);letter-spacing:-.02em}.login-card p{font-size:var(--text-sm);color:var(--text-dim);margin-bottom:var(--space-6)}label{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-1);font-weight:500;text-transform:uppercase;letter-spacing:.04em}input[type=text],input[type=password],input[type=number]{width:100%;padding:var(--space-2) var(--space-3);height:40px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:var(--text-sm);margin-bottom:var(--space-4);transition:border-color var(--transition),box-shadow var(--transition)}input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #a78bfa1f}.btn-primary{width:100%;padding:var(--space-3);height:44px;background:linear-gradient(135deg,var(--accent-dim),var(--accent));color:#fff;border:none;border-radius:var(--radius);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:opacity var(--transition),transform var(--transition-fast),box-shadow var(--transition);box-shadow:var(--shadow-accent)}.btn-primary:hover{opacity:.92;box-shadow:0 6px 30px #a78bfa40}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:default;pointer-events:none}.error-msg{color:var(--red);font-size:var(--text-sm);margin-bottom:var(--space-3);padding:var(--space-2) var(--space-3);background:#ef444414;border-radius:var(--radius-sm);border:1px solid rgba(239,68,68,.15)}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:var(--text-xs);font-weight:600;line-height:var(--lh-normal);white-space:nowrap}.badge-green{background:#10b9811f;color:var(--green)}.badge-blue{background:#3b82f61f;color:var(--blue)}.badge-amber{background:#f59e0b1f;color:var(--amber)}.badge-red{background:#ef44441f;color:var(--red)}.badge-muted{background:#94a3b81a;color:var(--text-muted)}.text-error{color:var(--red)}.text-success{color:var(--green)}.text-muted{color:var(--text-muted)}.state-loading,.state-empty{color:var(--text-muted);font-size:var(--text-sm);padding:var(--space-7) var(--space-5);text-align:center}.records-count{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-3);font-weight:500}.tab-bar{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap}.btn-steam{padding:4px 10px;font-size:var(--text-xs);border-radius:var(--radius-sm);border:1px solid var(--accent-dim);background:#7c3aed1a;color:var(--accent);cursor:pointer;white-space:nowrap;font-weight:500;transition:background var(--transition),transform var(--transition-fast)}.btn-steam:hover{background:#7c3aed2e}.btn-steam:active{transform:scale(.98)}.btn-steam:disabled{opacity:.5;cursor:default;pointer-events:none}.btn-notify{padding:4px 10px;font-size:var(--text-sm);border-radius:var(--radius-sm);border:1px solid #25D366;background:#25d36614;color:#25d366;cursor:pointer;white-space:nowrap;font-weight:500;transition:background var(--transition),transform var(--transition-fast)}.btn-notify:hover{background:#25d36629}.btn-notify:active{transform:scale(.98)}.btn-notify:disabled{opacity:.5;cursor:default;pointer-events:none}.btn-restore{padding:4px 10px;font-size:var(--text-sm);border-radius:var(--radius-sm);border:1px solid var(--green);background:#10b98114;color:var(--green);cursor:pointer;font-weight:500;transition:background var(--transition),transform var(--transition-fast)}.btn-restore:hover{background:#10b98129}.btn-restore:active{transform:scale(.98)}.btn-delete{padding:4px 10px;font-size:var(--text-sm);border-radius:var(--radius-sm);border:1px solid var(--border);background:#ef44440f;color:var(--red);cursor:pointer;transition:background var(--transition),border-color var(--transition),transform var(--transition-fast)}.btn-delete:hover{background:#ef44441f;border-color:var(--red)}.btn-delete:active{transform:scale(.98)}.btn-perm-delete{padding:4px 10px;font-size:var(--text-sm);border-radius:var(--radius-sm);border:1px solid var(--red);background:#ef44441f;color:var(--red);cursor:pointer;font-weight:600;transition:background var(--transition),transform var(--transition-fast)}.btn-perm-delete:hover{background:#ef444433}.btn-perm-delete:active{transform:scale(.98)}.section-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-3);color:var(--text)}@media(max-width:768px){.sidebar-toggle{display:flex}.sidebar{position:fixed;left:-280px;top:0;bottom:0;width:260px;z-index:50;transition:left var(--transition-slow)}.sidebar.sidebar-open{left:0}.sidebar-overlay.sidebar-open{display:block}.main{padding:var(--space-4);padding-top:60px}.page-header{flex-direction:column;align-items:flex-start}.page-header-actions{width:100%;overflow-x:auto}.stat-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3)}.stat-value{font-size:var(--text-xl)}.table-wrap{margin-left:calc(-1 * var(--space-4));margin-right:calc(-1 * var(--space-4));border-radius:0;border-left:none;border-right:none}.login-card{padding:var(--space-6)}.tab-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-2)}}@media(max-width:480px){.stat-grid{grid-template-columns:1fr 1fr}}