@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--brand:#6366f1;--brand-light:#818cf8;--brand-dark:#4f46e5;--brand-bg:#eef2ff;--bg:#f8fafc;--surface:#fff;--surface-hover:#f1f5f9;--border:#e2e8f0;--border-light:#f1f5f9;--text:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--radius:12px;--radius-sm:8px;--radius-lg:16px;--shadow-sm:0 1px 2px #0000000d;--shadow:0 1px 3px #00000014, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 10px 40px #0000001a;--transition:.15s ease}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea{font-family:inherit}a{color:inherit;text-decoration:none}.login-page{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:400px;padding:48px 40px}.login-logo{text-align:center;margin-bottom:36px}.login-logo-img{width:auto;height:40px;margin-bottom:16px}.login-logo p{color:var(--text-secondary);margin-top:4px;font-size:14px}.login-form{flex-direction:column;gap:20px;display:flex}.login-error{color:var(--danger);border-radius:var(--radius-sm);background:#fef2f2;border:1px solid #fecaca;padding:10px 14px;font-size:13px;font-weight:500}.input-group{flex-direction:column;gap:6px;display:flex}.input-group label{color:var(--text-secondary);font-size:13px;font-weight:600}.input-group input{border:1px solid var(--border);border-radius:var(--radius-sm);height:44px;color:var(--text);background:var(--bg);transition:border-color var(--transition), box-shadow var(--transition);outline:none;padding:0 14px;font-size:15px}.input-group input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}.login-btn{border-radius:var(--radius-sm);background:var(--brand);color:#fff;height:44px;transition:background var(--transition);margin-top:4px;font-size:15px;font-weight:600}.login-btn:hover:not(:disabled){background:var(--brand-dark)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.dashboard{max-width:800px;margin:0 auto;padding-bottom:40px}.navbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:sticky;top:0}.navbar-left{align-items:center;gap:10px;display:flex}.navbar-logo{width:auto;height:28px}.mode-indicator{background:var(--brand-bg,#eff6ff);color:var(--brand,#3b82f6);white-space:nowrap;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600}.navbar-title{letter-spacing:1.5px;font-size:17px;font-weight:700}.navbar-btn{color:var(--text-secondary);border-radius:var(--radius-sm);transition:all var(--transition);padding:6px 14px;font-size:13px}.navbar-btn:hover{background:var(--surface-hover);color:var(--text)}.stats-row{grid-template-columns:repeat(3,1fr);gap:12px;padding:20px 24px;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:2px;padding:16px 20px;display:flex}.stat-card.stat-unread{border-color:var(--brand-light);background:var(--brand-bg)}.stat-value{font-size:28px;font-weight:700;line-height:1.1}.stat-unread .stat-value{color:var(--brand)}.stat-label{color:var(--text-secondary);font-size:12px;font-weight:500}.toolbar{flex-direction:column;gap:10px;padding:0 24px 16px;display:flex}.toolbar-main{justify-content:space-between;align-items:center;gap:8px;margin-top:16px;display:flex}.toolbar-tabs{background:var(--surface-hover);border-radius:10px;flex-wrap:wrap;align-items:center;gap:2px;padding:3px;display:flex}.filter-tab{color:var(--text-secondary);transition:all var(--transition);border-radius:8px;padding:6px 14px;font-size:12px;font-weight:500}.filter-tab:hover{color:var(--text)}.tab-badge{background:var(--border);min-width:20px;height:20px;color:var(--text-secondary);border-radius:10px;justify-content:center;align-items:center;margin-left:6px;padding:0 6px;font-size:11px;font-weight:600;line-height:1;display:inline-flex}.tab-badge-accent{background:var(--brand);color:#fff}.filter-tab.active .tab-badge{background:var(--brand-bg);color:var(--brand)}.filter-tab.active .tab-badge-accent{background:var(--brand);color:#fff}.tab-badge-warning,.filter-tab.active .tab-badge-warning{color:#fff;background:#e67e22}.toolbar-separator{background:var(--border);flex-shrink:0;width:1px;height:20px;margin:0 4px}.status-tabs{flex-wrap:wrap;gap:8px;display:flex}.status-tab{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:500;display:inline-flex}.status-tab:hover{border-color:var(--text-secondary);color:var(--text)}.status-tab-icon{font-size:13px;line-height:1}.status-tab-count{border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700;line-height:1;display:inline-flex}.status-tab-warning .status-tab-count{color:#d35400;background:#fdebd0}.status-tab-neutral .status-tab-count{background:var(--surface-hover);color:var(--text-secondary)}.status-tab-warning.active{color:#d35400;background:#fef3e2;border-color:#e67e22;font-weight:600}.status-tab-warning.active .status-tab-count{color:#fff;background:#e67e22}.status-tab-neutral.active{background:var(--brand-bg);border-color:var(--brand-light);color:var(--brand);font-weight:600}.status-tab-neutral.active .status-tab-count{background:var(--brand);color:#fff}.filter-tab.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 3px #00000014}.toolbar-right{align-items:center;gap:6px;display:flex}.sort-select{border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:border-color var(--transition);border-radius:8px;outline:none;padding:5px 8px;font-family:inherit;font-size:12px}.sort-select:focus{border-color:var(--brand);color:var(--text)}.refresh-btn{color:var(--text-muted);transition:all var(--transition);white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;gap:4px;padding:4px 10px;font-size:12px;display:flex}.refresh-btn:hover{background:var(--surface-hover);color:var(--text)}.refresh-btn:disabled{opacity:.6;cursor:default}.refresh-icon{font-size:14px;line-height:1;display:inline-block}.refresh-btn.spinning .refresh-icon{animation:.8s linear infinite spin}.refresh-btn.spinning{color:var(--brand)}@keyframes spin{to{transform:rotate(360deg)}}.toolbar-categories{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;padding-bottom:2px;display:flex;overflow-x:auto}.toolbar-categories::-webkit-scrollbar{display:none}.cat-pill{color:var(--text-muted);border:1px solid var(--border);transition:all var(--transition);white-space:nowrap;background:0 0;border-radius:12px;flex-shrink:0;padding:4px 10px;font-size:11px;font-weight:500}.cat-pill:hover{border-color:var(--brand-light);color:var(--text-secondary)}.cat-pill.active{background:var(--brand);color:#fff;border-color:var(--brand)}.cat-pill.cat-blue:not(.active){color:#2563eb;border-color:#bfdbfe}.cat-pill.cat-red:not(.active){color:#dc2626;border-color:#fecaca}.cat-pill.cat-orange:not(.active){color:#ea580c;border-color:#fed7aa}.cat-pill.cat-purple:not(.active){color:#7c3aed;border-color:#ddd6fe}.cat-pill.cat-green:not(.active){color:#16a34a;border-color:#bbf7d0}.cat-pill.cat-teal:not(.active){color:#0d9488;border-color:#99f6e4}.cat-pill.cat-crimson:not(.active){color:#e11d48;border-color:#fecdd3}.cat-pill.cat-slate:not(.active){color:#475569;border-color:#cbd5e1}.cat-pill.cat-pink:not(.active){color:#db2777;border-color:#fbcfe8}.cat-pill.cat-gray:not(.active){color:var(--text-secondary);border-color:var(--border)}.cat-pill-count{opacity:.7;margin-left:4px;font-size:11px;font-weight:600}.cat-pill.active .cat-pill-count{opacity:.9}.chat-list{flex-direction:column;gap:6px;padding:0 24px;display:flex}.chat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);padding:14px 18px;position:relative}.chat-card:hover{border-color:var(--brand-light);box-shadow:var(--shadow);transform:translateY(-1px)}.chat-card-top{justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;display:flex}.chat-card-id{color:var(--text);word-break:break-word;flex:1;min-width:0;font-size:13px;font-weight:600}.chat-card-top-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.chat-card-category{white-space:nowrap;border-radius:10px;padding:2px 8px;font-size:11px;font-weight:600}.chat-card-order{color:var(--text-muted);white-space:nowrap;margin-right:6px;font-size:11px;font-weight:500}.cat-blue{color:#2563eb;background:#eff6ff}.cat-red{color:#dc2626;background:#fef2f2}.cat-orange{color:#ea580c;background:#fff7ed}.cat-purple{color:#7c3aed;background:#f5f3ff}.cat-green{color:#16a34a;background:#f0fdf4}.cat-teal{color:#0d9488;background:#f0fdfa}.cat-crimson{color:#e11d48;background:#fff1f2}.cat-slate{color:#475569;background:#f1f5f9}.cat-pink{color:#db2777;background:#fdf2f8}.cat-gray{background:var(--surface-hover);color:var(--text-secondary)}.chat-card-time{color:var(--text-muted);font-size:12px}.chat-card-text{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;padding-right:36px;font-size:13px;overflow:hidden}.chat-card-badge{background:var(--brand);color:#fff;border-radius:50%;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 6px;font-size:11px;font-weight:700;display:flex;position:absolute;bottom:14px;right:16px}.archive-btn{color:var(--text-muted);background:var(--surface-hover);cursor:pointer;transition:all var(--transition);white-space:nowrap;opacity:0;pointer-events:none;border:none;border-radius:6px;padding:3px 8px;font-size:11px;position:absolute;top:10px;right:10px}.chat-card:hover .archive-btn{opacity:1;pointer-events:auto}.archive-btn:hover{color:var(--text);background:var(--border)}.archive-btn.archived{color:var(--brand);opacity:1;pointer-events:auto}.loading,.empty{text-align:center;color:var(--text-muted);padding:48px 20px;font-size:14px}.bg-loading-banner{text-align:center;color:#b28704;background:#fff8e1;border-radius:8px;margin-bottom:8px;padding:10px 16px;font-size:13px;animation:2s ease-in-out infinite pulse-bg}@keyframes pulse-bg{0%,to{opacity:1}50%{opacity:.6}}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.chat-card.skeleton{pointer-events:none}.skel-line{background:linear-gradient(90deg, var(--surface-hover) 25%, var(--border) 37%, var(--surface-hover) 63%);background-size:800px 100%;border-radius:6px;animation:1.4s infinite shimmer;display:block}.skel-name{width:140px;height:14px}.skel-cat{width:60px;height:12px}.skel-time{width:80px;height:12px}.skel-text{width:70%;height:13px;margin-top:8px}.pagination{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:20px 24px 8px;display:flex}.pagination-btn{min-width:34px;height:34px;color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all var(--transition);border-radius:8px;justify-content:center;align-items:center;padding:0 8px;font-size:13px;font-weight:500;display:inline-flex}.pagination-btn:hover:not(:disabled){border-color:var(--brand-light);color:var(--brand);background:var(--brand-bg)}.pagination-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}.pagination-btn:disabled{opacity:.4;cursor:default}.pagination-dots{color:var(--text-muted);-webkit-user-select:none;user-select:none;padding:0 4px;font-size:13px}.pagination-info{color:var(--text-muted);white-space:nowrap;margin-left:12px;font-size:12px}.chat-page{flex-direction:column;max-width:800px;height:100vh;margin:0 auto;display:flex}.chat-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;align-items:flex-start;gap:12px;padding:14px 20px;display:flex;position:sticky;top:0}.back-btn{color:var(--brand);border-radius:var(--radius-sm);transition:background var(--transition);flex-shrink:0;margin-top:2px;padding:6px 12px;font-size:14px;font-weight:500}.back-btn:hover{background:var(--brand-bg)}.chat-header-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.chat-header-name{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:14px;font-weight:600;overflow:hidden}.chat-header-id{white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:var(--text-primary);font-family:monospace;font-size:13px;font-weight:600;overflow:hidden}.chat-header-count{color:var(--text-muted,#8892a4);white-space:nowrap;letter-spacing:.02em;background:var(--surface-hover,#f0f1f4);border-radius:10px;padding:2px 8px;font-size:11px}n.chat-header-meta{align-items:center;gap:8px;display:flex}.chat-header-category{background:var(--brand-bg,#eef2ff);color:var(--brand);white-space:nowrap;border-radius:10px;margin-right:4px;padding:2px 8px;font-size:11px;font-weight:600}.archive-btn-text{color:var(--text-secondary);border-radius:var(--radius-sm);transition:all var(--transition);white-space:nowrap;flex-shrink:0;margin-top:2px;padding:6px 12px;font-size:13px;font-weight:500}.archive-btn-text:hover{background:var(--surface-hover);color:var(--text-primary)}.archive-btn-text.archived{color:var(--brand)}.messages-area{background:var(--bg);flex-direction:column;flex:1;gap:8px;padding:20px;display:flex;overflow-y:auto}.messages-loading,.messages-empty{text-align:center;color:var(--text-muted);padding:60px 20px;font-size:14px}.message{max-width:75%;display:flex}.message.customer{align-self:flex-start}.message.seller{align-self:flex-end}.message-bubble{border-radius:var(--radius);padding:10px 14px;line-height:1.5}.message.customer .message-bubble{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}.message.seller .message-bubble{background:var(--brand);color:#fff;border-bottom-right-radius:4px}.message-text{word-break:break-word;font-size:14px}.message-text p{margin:0 0 6px}.message-text p:last-child{margin-bottom:0}.message-text ul,.message-text ol{margin:4px 0;padding-left:20px}.message-text li{margin-bottom:2px}.message-text strong{font-weight:600}.message-text code{background:#0000000f;border-radius:4px;padding:1px 5px;font-size:13px}.message.seller .message-text code{background:#ffffff26}.message-text a{color:var(--brand);text-decoration:underline}.message.seller .message-text a{color:#c7d2fe}.message-images{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.message-images a{border-radius:8px;display:block;overflow:hidden}.message-images img{object-fit:cover;cursor:pointer;border-radius:8px;max-width:260px;max-height:260px;transition:opacity .2s}.message-images img:hover{opacity:.85}.lightbox-overlay{z-index:1000;cursor:zoom-out;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lightbox-img{cursor:default;border-radius:8px;max-width:90vw;max-height:90vh;box-shadow:0 8px 32px #00000080}.lightbox-close{color:#fff;cursor:pointer;background:#ffffff26;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:background .2s;display:flex;position:absolute;top:16px;right:20px}.lightbox-close:hover{background:#ffffff4d}.message-meta{align-items:center;gap:8px;margin-top:6px;font-size:11px;display:flex}.message.customer .message-meta{color:var(--text-muted)}.message.seller .message-meta{color:#ffffffb3}.message-role{font-weight:600}.chat-bottom{background:var(--surface);border-top:1px solid var(--border);padding:16px 20px}.suggest-btn{border-radius:var(--radius);background:var(--text);color:#fff;width:100%;height:48px;transition:all var(--transition);justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.suggest-btn:hover:not(:disabled){box-shadow:var(--shadow-md);background:#1e293b;transform:translateY(-1px)}.suggest-btn:disabled{opacity:.7;cursor:wait}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin;display:inline-block}.suggestion-box{flex-direction:column;gap:8px;display:flex}.suggestion-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.suggestion-label{color:var(--text-secondary);align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.suggestion-icon{color:var(--brand);font-size:16px}.editor-tabs{background:var(--bg);border-radius:8px;gap:2px;padding:2px;display:flex}.editor-tab{color:var(--text-muted);transition:all var(--transition);border-radius:6px;padding:4px 12px;font-size:12px;font-weight:500}.editor-tab:hover{color:var(--text)}.editor-tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.editor-toolbar{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom:none;align-items:center;gap:2px;padding:4px 6px;display:flex}.toolbar-btn{width:32px;height:28px;color:var(--text-secondary);transition:all var(--transition);border-radius:4px;justify-content:center;align-items:center;font-size:13px;display:flex}.toolbar-btn:hover{background:var(--surface);color:var(--text)}.toolbar-divider{background:var(--border);width:1px;height:16px;margin:0 4px}.suggestion-text{border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--bg);width:100%;min-height:140px;color:var(--text);resize:vertical;transition:border-color var(--transition);outline:none;padding:12px 14px;font-size:14px;line-height:1.6}.suggestion-text:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}.suggestion-preview{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);max-height:320px;padding:14px 16px;font-size:14px;line-height:1.6;overflow-y:auto}.suggestion-preview p{margin:0 0 8px}.suggestion-preview p:last-child{margin-bottom:0}.suggestion-preview h1,.suggestion-preview h2,.suggestion-preview h3{margin:12px 0 6px;font-weight:600;line-height:1.3}.suggestion-preview h3{font-size:15px}.suggestion-preview ul,.suggestion-preview ol{margin:4px 0 8px;padding-left:22px}.suggestion-preview li{margin-bottom:3px}.suggestion-preview strong{font-weight:600}.suggestion-preview em{font-style:italic}.suggestion-preview code{background:#0000000f;border-radius:4px;padding:1px 5px;font-size:13px}.suggestion-preview a{color:var(--brand);text-decoration:underline}.suggestion-preview blockquote{border-left:3px solid var(--brand-light);color:var(--text-secondary);margin:8px 0;padding-left:12px}.suggestion-actions{flex-wrap:wrap;gap:8px;display:flex}.btn{border-radius:var(--radius-sm);transition:all var(--transition);padding:8px 16px;font-size:13px;font-weight:600}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover:not(:disabled){background:var(--brand-dark)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-accent{color:var(--brand);background:var(--brand-bg,#eef2ff);border:1px solid var(--brand)}.btn-accent:hover:not(:disabled){background:var(--brand);color:#fff}.btn-ghost{color:var(--text-secondary);background:var(--surface-hover)}.btn-ghost:hover{background:var(--border);color:var(--text)}.refine-box{background:var(--brand-bg,#eef2ff);border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:8px;padding:10px 12px}.refine-label{color:var(--text-secondary);margin-bottom:6px;font-size:12px;font-weight:600}.refine-input-row{gap:8px;display:flex}.refine-input{border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--transition);outline:none;flex:1;padding:8px 12px;font-family:inherit;font-size:13px}.refine-input:focus{border-color:var(--brand)}.refine-send{padding:8px 14px;font-size:16px}.send-status{padding:4px 0;font-size:13px;font-weight:500}.send-status.success{color:var(--success)}.send-status.error{color:var(--danger)}.chat-hint{text-align:center;color:var(--text-muted);margin-top:8px;font-size:11px}.compose-area{flex-direction:column;gap:10px;display:flex}.compose-input-row{align-items:flex-end;gap:8px;display:flex}.compose-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);resize:none;transition:border-color var(--transition);outline:none;flex:1;padding:10px 14px;font-size:14px;line-height:1.5}.compose-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}.compose-input::placeholder{color:var(--text-muted)}.compose-send{white-space:nowrap;flex-shrink:0;height:40px}.attach-btn{border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text-secondary);transition:all var(--transition);background:var(--surface-hover);flex-shrink:0;justify-content:center;align-items:center;font-size:20px;display:flex}.attach-btn:hover{background:var(--border);color:var(--text)}.attached-files{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.attached-file{border-radius:var(--radius-sm);border:1px solid var(--border);width:72px;height:72px;position:relative;overflow:hidden}.attached-file img{object-fit:cover;width:100%;height:100%}.attached-file-remove{color:#fff;cursor:pointer;background:#0009;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:11px;line-height:1;transition:background .2s;display:flex;position:absolute;top:2px;right:2px}.attached-file-remove:hover{background:#dc2626e6}.chat-page.drag-over{position:relative}.drag-overlay{z-index:200;border:3px dashed var(--brand);border-radius:var(--radius);pointer-events:none;background:#6366f114;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.drag-overlay-content{color:var(--brand);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-md);flex-direction:column;align-items:center;gap:8px;padding:24px 40px;font-size:16px;font-weight:600;display:flex}.drag-overlay-icon{font-size:36px}.settings{max-width:800px;margin:0 auto;padding-bottom:40px}.settings-content{flex-direction:column;gap:24px;padding:20px 24px;display:flex}.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.section-header{border-bottom:1px solid var(--border);background:var(--surface-hover);align-items:center;gap:10px;padding:16px 20px;display:flex}.section-icon{font-size:18px;line-height:1}.section-title{color:var(--text);font-size:15px;font-weight:700}.section-badge{background:var(--border);color:var(--text-secondary);border-radius:20px;margin-left:auto;padding:2px 10px;font-size:11px;font-weight:600}.setting-row{border-bottom:1px solid var(--border);opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.setting-row:last-child{border-bottom:none}.setting-info{flex-direction:column;gap:2px;display:flex}.setting-name{color:var(--text);font-size:14px;font-weight:600}.setting-desc{color:var(--text-secondary);font-size:12px}.toggle{flex-shrink:0;width:44px;height:24px;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle-track{background:var(--border);border-radius:12px;transition:background .2s;position:absolute;inset:0}.toggle-track:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000026}.toggle input:checked+.toggle-track{background:var(--brand)}.toggle input:checked+.toggle-track:after{transform:translate(20px)}.setting-status{background:var(--surface-hover);color:var(--text-secondary);border-radius:20px;flex-shrink:0;padding:3px 10px;font-size:11px;font-weight:600}.setting-status.active{background:var(--brand-bg);color:var(--brand)}.users-table{border-collapse:collapse;width:100%}.users-table th{text-align:left;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding:10px 20px;font-size:11px;font-weight:600}.users-table-body{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.users-table td{color:var(--text);border-bottom:1px solid var(--border);padding:12px 20px;font-size:13px}.users-table tr:last-child td{border-bottom:none}.user-role{background:var(--surface-hover);color:var(--text-secondary);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:600}.user-role.admin{background:var(--brand-bg);color:var(--brand)}.user-status-dot{background:var(--border);border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.user-status-dot.online{background:var(--success)}.add-user-row{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:12px 20px;display:flex}.add-user-btn{color:var(--text-secondary);align-items:center;gap:6px;font-size:13px;display:flex}.mode-cards{grid-template-columns:1fr 1fr;gap:12px;padding:16px 20px;display:grid}.mode-card{border:2px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;gap:6px;padding:16px;transition:border-color .2s,box-shadow .2s;display:flex}.mode-card-active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand), 0 2px 8px #3b82f614}.mode-card-disabled{opacity:.55;cursor:not-allowed}.mode-card-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.mode-card-icon{font-size:22px;line-height:1}.mode-card-badge{text-transform:uppercase;letter-spacing:.3px;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700}.mode-badge-active{background:var(--brand-bg);color:var(--brand)}.mode-badge-dev{color:#92400e;background:#fef3c7}.mode-card-title{color:var(--text);font-size:14px;font-weight:700}.mode-card-desc{color:var(--text-secondary);font-size:12px;line-height:1.4}