/* WA Dev Tools — Shared Styles */

/* Theme variables */
:root {
    --bg: #f5f5f7;
    --bg-grad1: rgba(0, 67, 184, 0.04);
    --bg-grad2: rgba(0, 50, 140, 0.03);
    --surface-800: rgba(255,255,255,0.85);
    --surface-700: #f0f0f3;
    --surface-600: #dde0e6;
    --text-primary: #1a1a2e;
    --text-secondary: #555;
    --text-muted: #888;
    --bar-bg: #e0e0e0;
    --select-bg: #f0f0f3;
    --select-color: #1a1a2e;
    --accent: #0054e6;
    --accent-dim: #0043b8;
    --accent-bright: #6b9fff;
    --accent-bg: rgba(0,84,230,.08);
}
.dark {
    --bg: #060c18;
    --bg-grad1: rgba(0, 84, 230, 0.03);
    --bg-grad2: rgba(0, 67, 184, 0.02);
    --surface-800: rgba(9,16,32,0.8);
    --surface-700: #0d1828;
    --surface-600: #162040;
    --text-primary: #fff;
    --text-secondary: #c0c0c0;
    --text-muted: #666;
    --bar-bg: #0d1828;
    --select-bg: #091020;
    --select-color: #e0e0e0;
}

/* Base */
body {
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 50%, var(--bg-grad1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--bg-grad2) 0%, transparent 50%);
    min-height: 100vh;
    transition: background 0.3s;
    margin: 0;
}

/* Sidebar */
.sidebar { position:fixed;top:0;left:0;width:56px;height:100vh;display:flex;flex-direction:column;align-items:center;padding:10px 0 8px;z-index:50;border-right:1px solid var(--surface-600);background:var(--surface-800);backdrop-filter:blur(12px);transition:background .3s,border-color .3s }
.sidebar-logo { margin-bottom:12px;color:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;font-family:'JetBrains Mono',monospace;flex-shrink:0 }
.sidebar-nav { display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 }
.sidebar-nav::-webkit-scrollbar { display:none }
.sidebar-link { width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;text-decoration:none;position:relative;flex-shrink:0 }
.sidebar-link:hover { color:var(--text-secondary);background:rgba(255,255,255,.04) }
.sidebar-link.active { color:var(--accent);background:var(--accent-bg) }
.sidebar-link.active::before { content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--accent) }
.sidebar-bottom { margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;padding-top:6px }
.main-content { margin-left:56px }

/* Sidebar dividers */
.sidebar-divider { width:20px;height:1px;background:var(--surface-600);margin:2px 0;flex-shrink:0 }

/* Sidebar user avatar */
.sidebar-avatar { width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:'Manrope',sans-serif;cursor:pointer;transition:opacity .2s }
.sidebar-avatar:hover { opacity:.8 }

/* Theme toggle */
.theme-toggle { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;color:var(--text-muted) }
.theme-toggle:hover { background:rgba(255,255,255,.06);color:var(--text-secondary) }
.theme-toggle-knob { display:flex;align-items:center;justify-content:center }

/* Mobile bottom bar */
@media(max-width:640px) {
    .sidebar { position:fixed;top:auto;bottom:0;left:0;width:100%;height:52px;flex-direction:row;justify-content:center;padding:0 16px;border-right:none;border-top:1px solid var(--surface-600);gap:0 }
    .sidebar-logo { display:none }
    .sidebar-nav { flex-direction:row;gap:4px;flex:none }
    .sidebar-bottom { margin-top:0;margin-left:auto;flex-direction:row }
    .sidebar-link.active::before { left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:20px;height:3px;border-radius:3px 3px 0 0 }
    .main-content { margin-left:0;padding-bottom:60px }
}

/* Page header */
.page-header { margin-bottom:24px }
.page-header h1 { font-size:1.875rem;font-weight:800;letter-spacing:-0.025em;color:var(--text-primary);line-height:1.2 }
@media(min-width:640px) { .page-header h1 { font-size:2.25rem } }
.page-header h1 .accent { color:var(--accent) }
.page-header .description { margin-top:8px;font-size:0.875rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace }

/* Standard content container */
.tool-container { padding:32px 16px }
@media(min-width:640px) { .tool-container { padding:48px 16px } }

/* Common form elements */
.wa-input { background:var(--select-bg);border:1px solid var(--surface-600);color:var(--select-color);padding:10px 14px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;transition:border-color .2s }
.wa-input:focus { border-color:var(--accent) }
.wa-btn { padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s }
.wa-btn:hover { background:var(--accent-dim) }
.wa-btn:disabled { opacity:0.5;cursor:not-allowed }
.wa-card { background:var(--surface-700);border:1px solid var(--surface-600);border-radius:12px;padding:20px;transition:background .3s,border-color .3s }

/* Top header (public pages: landing, auth, status) */
.top-header { position:fixed;top:0;left:0;right:0;height:56px;background:var(--surface-800);border-bottom:1px solid var(--surface-600);display:flex;align-items:center;padding:0 24px;z-index:50;backdrop-filter:blur(12px) }
.top-logo { font-size:18px;font-weight:800;color:var(--text-primary);text-decoration:none;display:flex;align-items:center;gap:8px }
.top-logo span { color:var(--accent) }
.top-nav { display:flex;align-items:center;gap:6px;margin-left:32px }
.top-nav a { font-size:13px;color:var(--text-muted);text-decoration:none;padding:6px 12px;border-radius:8px;transition:all .15s;font-weight:500 }
.top-nav a:hover { color:var(--text-secondary);background:rgba(255,255,255,.04) }
.top-right { margin-left:auto;display:flex;align-items:center;gap:8px }
.btn-ghost { font-size:13px;color:var(--text-muted);text-decoration:none;padding:8px 16px;border-radius:8px;transition:all .15s;font-weight:600 }
.btn-ghost:hover { color:var(--text-secondary);background:rgba(255,255,255,.04) }
.btn-ghost.active { color:var(--accent);background:var(--accent-bg) }
.btn-primary-sm { font-size:13px;color:#fff;background:var(--accent);padding:8px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:background .15s }
.btn-primary-sm:hover { background:var(--accent-dim) }
.btn-primary-sm.active { box-shadow:0 0 0 2px var(--accent),0 0 0 4px rgba(0,84,230,.15) }
.theme-btn { width:32px;height:32px;border:none;background:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .15s }
.theme-btn:hover { background:rgba(255,255,255,.04);color:var(--text-secondary) }
@media(max-width:640px) { .top-nav { display:none } .top-header { padding:0 16px } }

/* Scrollbar */
::-webkit-scrollbar { width:6px;height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--surface-600);border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted) }