:root{--sp-bg: #0d0d1a;--sp-surface: #1a1a2e;--sp-surface2: #252540;--sp-border: #2e2e50;--sp-accent: #7c6af7;--sp-accent-hover: #6a58e0;--sp-text: #e8e8f0;--sp-text-dim: #8888aa;--sp-danger: #e05555;--sp-success: #4caf6e;--sp-warning: #e0a055;--sp-radius: 8px;--sp-nav-width: 220px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:var(--sp-bg);color:var(--sp-text);min-height:100vh}a{color:var(--sp-accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;border:none;border-radius:var(--sp-radius);font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:opacity .15s}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--sp-accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--sp-accent-hover)}.btn-secondary{background:var(--sp-surface2);color:var(--sp-text);border:1px solid var(--sp-border)}.btn-secondary:hover:not(:disabled){background:var(--sp-border)}.btn-danger{background:transparent;color:var(--sp-danger);border:1px solid var(--sp-danger)}.btn-danger:hover:not(:disabled){background:var(--sp-danger);color:#fff}.btn-sm{padding:.35rem .75rem;font-size:.8rem}.sp-layout{display:flex;min-height:100vh}.sp-nav{width:var(--sp-nav-width);background:var(--sp-surface);border-right:1px solid var(--sp-border);display:flex;flex-direction:column;padding:1.5rem 0;flex-shrink:0}.sp-nav-brand{padding:0 1.25rem 1.5rem;border-bottom:1px solid var(--sp-border);margin-bottom:1rem}.sp-nav-brand h1{font-size:1rem;font-weight:700;color:var(--sp-text)}.sp-nav-brand p{font-size:.75rem;color:var(--sp-text-dim);margin-top:.25rem}.sp-nav-link{display:block;padding:.6rem 1.25rem;color:var(--sp-text-dim);font-size:.9rem;transition:color .15s,background .15s}.sp-nav-link:hover{color:var(--sp-text);background:var(--sp-surface2);text-decoration:none}.sp-nav-link.active{color:var(--sp-accent);background:#7c6af71a}.sp-nav-footer{margin-top:auto;padding:1rem 1.25rem;border-top:1px solid var(--sp-border)}.sp-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.sp-content{flex:1;padding:2rem;overflow-y:auto;max-width:900px}.sp-page-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.sp-card{background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:var(--sp-radius);padding:1.25rem;margin-bottom:1rem}.sp-card h2{font-size:1rem;font-weight:600;margin-bottom:1rem}.sp-field{margin-bottom:1rem}.sp-field label{display:block;font-size:.8rem;color:var(--sp-text-dim);margin-bottom:.35rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.sp-field input,.sp-field textarea,.sp-field select{width:100%;background:var(--sp-surface2);border:1px solid var(--sp-border);border-radius:var(--sp-radius);color:var(--sp-text);padding:.5rem .75rem;font-size:.9rem;outline:none;transition:border-color .15s}.sp-field input:focus,.sp-field textarea:focus,.sp-field select:focus{border-color:var(--sp-accent)}.sp-field textarea{resize:vertical;min-height:80px}.sp-upload-zone{border:2px dashed var(--sp-border);border-radius:var(--sp-radius);padding:1.5rem;text-align:center;cursor:pointer;transition:border-color .15s}.sp-upload-zone:hover{border-color:var(--sp-accent)}.sp-upload-zone p{color:var(--sp-text-dim);font-size:.85rem;margin-top:.5rem}.sp-upload-zone img{max-height:80px;max-width:200px;object-fit:contain;margin:0 auto .5rem;display:block}.sp-banner-preview{width:100%;height:140px;background-size:cover;background-position:center;border-radius:var(--sp-radius);border:1px solid var(--sp-border);margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;color:var(--sp-text-dim);font-size:.85rem}.sp-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.sp-row-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.sp-table{width:100%;border-collapse:collapse;font-size:.875rem}.sp-table th{text-align:left;padding:.5rem .75rem;color:var(--sp-text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--sp-border)}.sp-table td{padding:.6rem .75rem;border-bottom:1px solid var(--sp-border)}.sp-table tr:last-child td{border-bottom:none}.sp-badge{display:inline-block;padding:.2rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.sp-badge-active{background:#4caf6e26;color:var(--sp-success)}.sp-badge-waiting{background:#e0a05526;color:var(--sp-warning)}.sp-badge-ended{background:#8888aa26;color:var(--sp-text-dim)}.sp-badge-paused{background:#7c6af726;color:var(--sp-accent)}.sp-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100}.sp-modal{background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:var(--sp-radius);padding:1.5rem;width:90%;max-width:480px}.sp-modal h3{font-size:1.1rem;margin-bottom:1rem}.sp-modal-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}.sp-error{color:var(--sp-danger);font-size:.85rem;margin-top:.5rem}.sp-success-msg{color:var(--sp-success);font-size:.85rem;margin-top:.5rem}.sp-muted{color:var(--sp-text-dim)}.sp-divider{border:none;border-top:1px solid var(--sp-border);margin:1.25rem 0}.sp-auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;flex-direction:column;gap:1rem}.sp-auth-screen h1{font-size:1.5rem}.sp-auth-screen p{color:var(--sp-text-dim)}
