:root {
  --bg-primary: #060810;
  --bg-secondary: #0a0d18;
  --bg-card: rgba(12,16,28,0.85);
  --bg-glass: rgba(14,20,38,0.7);
  --bg-hover: rgba(20,30,60,0.6);
  --accent-cyan: #00d4ff;
  --accent-blue: #2563eb;
  --accent-electric: #0ea5e9;
  --accent-green: #00ff88;
  --accent-yellow: #f59e0b;
  --accent-red: #ef4444;
  --accent-purple: #8b5cf6;
  --text-primary: #e8eaf6;
  --text-secondary: #7986a3;
  --text-muted: #4a5568;
  --border-subtle: rgba(0,212,255,0.08);
  --border-active: rgba(0,212,255,0.3);
  --glow-cyan: 0 0 20px rgba(0,212,255,0.15), 0 0 40px rgba(0,212,255,0.05);
  --glow-blue: 0 0 20px rgba(37,99,235,0.2);
  --font-main: 'Space Grotesk', sans-serif;
  --font-display: 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.4); }

/* ===== BACKGROUND ===== */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-gradient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,212,255,0.06) 0%, transparent 60%),
              radial-gradient(ellipse 40% 40% at 90% 90%, rgba(37,99,235,0.05) 0%, transparent 60%);
}

/* ===== LOGIN ===== */
#login-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary);
}

.login-box {
  width: 420px;
  background: var(--bg-glass);
  border: 1px solid var(--border-active);
  border-radius: 20px;
  padding: 48px 40px;
  backdrop-filter: blur(20px);
  box-shadow: var(--glow-cyan), 0 40px 80px rgba(0,0,0,0.5);
  animation: fadeSlideUp 0.6s cubic-bezier(0.4,0,0.2,1);
}

@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

.login-logo {
  text-align: center; margin-bottom: 32px;
}

.s21-logo-svg {
  animation: pulse-energy 3s ease-in-out infinite;
}

@keyframes pulse-energy {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,212,255,0.4)); }
  50% { filter: drop-shadow(0 0 24px rgba(0,212,255,0.8)) drop-shadow(0 0 40px rgba(0,212,255,0.3)); }
}

.login-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 12px;
  text-align: center;
}

.form-group { margin-bottom: 20px; }

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 14px;
  transition: var(--transition);
  outline: none;
}

.form-input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.1);
  background: rgba(0,212,255,0.03);
}

.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(37,99,235,0.2));
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content:''; position:absolute; inset:-50%;
  background: linear-gradient(45deg, transparent 30%, rgba(0,212,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.6s;
}

.btn-primary:hover { background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(37,99,235,0.3)); box-shadow: 0 0 20px rgba(0,212,255,0.2); }
.btn-primary:hover::before { transform: translateX(200%) rotate(45deg); }
.btn-primary:active { transform: scale(0.98); }

.login-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--accent-red);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

/* ===== APP LAYOUT ===== */
#app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* SIDEBAR */
.sidebar {
  width: 64px;
  background: rgba(8,12,24,0.95);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

.sidebar.expanded { width: 220px; align-items: flex-start; }

.sidebar-logo {
  padding: 8px 12px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  cursor: pointer;
}

.sidebar-logo-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-cyan);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}

.sidebar.expanded .sidebar-logo-text { opacity: 1; }

.sidebar-divider { width: 32px; height: 1px; background: var(--border-subtle); margin: 8px auto; }
.sidebar.expanded .sidebar-divider { width: calc(100% - 24px); margin: 8px 12px; }

.nav-item {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0;
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.nav-item:hover { color: var(--accent-cyan); background: rgba(0,212,255,0.05); }
.nav-item.active { color: var(--accent-cyan); background: rgba(0,212,255,0.08); }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
}

.nav-icon { width:20px; height:20px; flex-shrink:0; }
.nav-label { opacity:0; transition: opacity 0.2s; }
.sidebar.expanded .nav-label { opacity:1; }

.sidebar-toggle {
  margin-top: auto;
  width: 100%;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  transition: var(--transition);
}
.sidebar-toggle:hover { color: var(--text-secondary); }

/* MAIN CONTENT */
.main-content {
  flex: 1;
  margin-left: 64px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
}

.sidebar.expanded ~ .main-content { margin-left: 220px; }

/* TOPBAR */
.topbar {
  height: 56px;
  background: rgba(8,12,24,0.9);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 14px;
  width: 280px;
  cursor: pointer;
  transition: var(--transition);
}

.search-bar:hover { border-color: var(--border-active); }
.search-bar input { background:none; border:none; outline:none; color:var(--text-secondary); font-size:13px; width:100%; font-family:var(--font-main); }
.search-bar input::placeholder { color: var(--text-muted); }
.search-shortcut { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); background:rgba(255,255,255,0.05); padding:2px 6px; border-radius:4px; white-space:nowrap; }

.topbar-actions { display:flex; gap:8px; align-items:center; }

.icon-btn {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--transition);
  position: relative;
}

.icon-btn:hover { color:var(--accent-cyan); border-color:var(--border-active); background:rgba(0,212,255,0.05); }
.icon-btn.active { color:var(--accent-cyan); border-color:var(--accent-cyan); box-shadow:0 0 8px rgba(0,212,255,0.2); }

.status-dot {
  width:8px; height:8px; border-radius:50%;
  position:absolute; top:-2px; right:-2px;
}
.status-dot.green { background:var(--accent-green); box-shadow:0 0 6px var(--accent-green); }
.status-dot.red { background:var(--accent-red); box-shadow:0 0 6px var(--accent-red); }

/* PAGES */
.page { display:none; padding:24px; }
.page.active { display:block; }

/* CARDS */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(10px);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.card::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,212,255,0.02) 0%, transparent 60%);
  pointer-events:none;
}

.card:hover { border-color: var(--border-active); box-shadow: var(--glow-cyan); }

.card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display:flex; align-items:center; gap:8px;
}

.card-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* GRID */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.dashboard-layout { display:grid; grid-template-columns:280px 1fr 280px; gap:16px; }

/* STATUS BADGES */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:0.5px;
}

.badge-green { background:rgba(0,255,136,0.1); color:var(--accent-green); border:1px solid rgba(0,255,136,0.2); }
.badge-red { background:rgba(239,68,68,0.1); color:var(--accent-red); border:1px solid rgba(239,68,68,0.2); }
.badge-yellow { background:rgba(245,158,11,0.1); color:var(--accent-yellow); border:1px solid rgba(245,158,11,0.2); }
.badge-cyan { background:rgba(0,212,255,0.1); color:var(--accent-cyan); border:1px solid rgba(0,212,255,0.2); }
.badge-purple { background:rgba(139,92,246,0.1); color:var(--accent-purple); border:1px solid rgba(139,92,246,0.2); }
.badge-gray { background:rgba(255,255,255,0.05); color:var(--text-secondary); border:1px solid var(--border-subtle); }

.dot-pulse { width:6px; height:6px; border-radius:50%; animation:dotpulse 2s infinite; display:inline-block; }
.dot-green { background:var(--accent-green); box-shadow:0 0 6px var(--accent-green); }
.dot-red { background:var(--accent-red); }
.dot-yellow { background:var(--accent-yellow); }

@keyframes dotpulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* PROJECT CARDS */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:16px; }

.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(10px);
  transition: var(--transition);
  cursor: pointer;
}

.project-card:hover { border-color:var(--border-active); transform:translateY(-2px); box-shadow:var(--glow-cyan); }

.project-card-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }

.project-avatar {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  flex-shrink:0;
}

.project-name { font-weight:600; font-size:15px; color:var(--text-primary); }
.project-client { font-size:12px; color:var(--text-secondary); }
.project-domain { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }

.project-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

.project-links { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }

.link-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:6px;
  font-size:11px; font-weight:500;
  background:rgba(0,0,0,0.3); border:1px solid var(--border-subtle);
  color:var(--text-secondary); cursor:pointer; transition:var(--transition);
  text-decoration:none;
}

.link-chip:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); background:rgba(0,212,255,0.05); }

.project-actions { display:flex; gap:6px; }

.btn-sm {
  padding:6px 12px; border-radius:6px;
  font-size:11px; font-weight:600; letter-spacing:0.5px;
  border:1px solid var(--border-subtle);
  background:rgba(0,0,0,0.2);
  color:var(--text-secondary);
  cursor:pointer; transition:var(--transition);
  display:inline-flex; align-items:center; gap:5px;
  text-transform:uppercase;
}

.btn-sm:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); background:rgba(0,212,255,0.05); }
.btn-sm.active { border-color:var(--accent-cyan); color:var(--accent-cyan); background:rgba(0,212,255,0.08); }

/* STATS ROW */
.stat-card { text-align:center; }
.stat-number { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--text-primary); }
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.stat-icon { margin-bottom:8px; }

/* WORKLOG ITEMS */
.work-item {
  display:flex; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--border-subtle);
  transition:var(--transition);
}
.work-item:last-child { border-bottom:none; }
.work-item:hover { padding-left:4px; }

.work-time { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); white-space:nowrap; }
.work-title { font-size:14px; font-weight:500; color:var(--text-primary); }
.work-meta { font-size:12px; color:var(--text-secondary); }
.work-duration { font-family:var(--font-mono); font-size:12px; color:var(--accent-cyan); margin-left:auto; }

/* SECTION HEADER */
.section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}

.section-title {
  font-family:var(--font-display);
  font-size:22px; font-weight:600;
  color:var(--text-primary);
  display:flex; align-items:center; gap:10px;
}

.section-sub { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* BUTTONS */
.btn-action {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  background:rgba(0,212,255,0.08);
  border:1px solid rgba(0,212,255,0.3);
  border-radius:var(--radius-sm);
  color:var(--accent-cyan);
  font-family:var(--font-main);
  font-size:13px; font-weight:600;
  cursor:pointer; transition:var(--transition);
  text-transform:none;
}

.btn-action:hover { background:rgba(0,212,255,0.15); box-shadow:0 0 16px rgba(0,212,255,0.1); }

/* SERVER CARDS */
.server-card {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  padding:20px;
  transition:var(--transition);
}

.server-card:hover { border-color:var(--border-active); box-shadow:var(--glow-cyan); }
.server-name { font-size:16px; font-weight:600; }
.server-provider { font-size:12px; color:var(--text-muted); font-family:var(--font-mono); }

.cred-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 0; border-bottom:1px solid var(--border-subtle);
  font-size:13px;
}
.cred-label { color:var(--text-muted); width:80px; font-size:11px; flex-shrink:0; }
.cred-value { font-family:var(--font-mono); color:var(--text-secondary); flex:1; }
.cred-value.hidden { letter-spacing:3px; color:var(--text-muted); }

.copy-btn {
  padding:3px 8px; border-radius:4px;
  font-size:10px; border:1px solid var(--border-subtle);
  background:transparent; color:var(--text-muted);
  cursor:pointer; transition:var(--transition);
}
.copy-btn:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); }

/* CLIENT CARDS */
.client-card {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  padding:20px;
  display:flex; flex-direction:column; gap:12px;
  transition:var(--transition);
}
.client-card:hover { border-color:var(--border-active); }
.client-name { font-size:16px; font-weight:600; }
.client-company { font-size:13px; color:var(--text-secondary); }

/* MODAL */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.2s;
}

.modal-overlay.active { opacity:1; pointer-events:all; }

.modal {
  background: rgba(10,14,26,0.98);
  border:1px solid var(--border-active);
  border-radius:16px;
  padding:32px;
  width:100%;
  max-width:600px;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:var(--glow-cyan), 0 40px 80px rgba(0,0,0,0.6);
  transform:translateY(20px);
  transition:transform 0.3s;
}

.modal-overlay.active .modal { transform:translateY(0); }

.modal-title {
  font-family:var(--font-display);
  font-size:22px; font-weight:600;
  margin-bottom:24px;
  display:flex; align-items:center; justify-content:space-between;
}

.modal-close {
  cursor:pointer; color:var(--text-muted);
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  transition:var(--transition);
}
.modal-close:hover { color:var(--accent-red); background:rgba(239,68,68,0.1); }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:16px; }
.form-select {
  width:100%;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  color:var(--text-primary);
  font-family:var(--font-main); font-size:13px;
  outline:none; transition:var(--transition);
  cursor:pointer;
}
.form-select:focus { border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(0,212,255,0.1); }

option { background:#0a0d18; }

.form-textarea {
  width:100%;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  color:var(--text-primary);
  font-family:var(--font-main); font-size:13px;
  outline:none; transition:var(--transition);
  resize:vertical; min-height:80px;
}
.form-textarea:focus { border-color:var(--accent-cyan); }

.modal-footer { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.btn-cancel {
  padding:10px 20px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid var(--border-subtle);
  color:var(--text-secondary); cursor:pointer;
  font-family:var(--font-main); font-size:13px;
  transition:var(--transition);
}
.btn-cancel:hover { border-color:var(--text-secondary); color:var(--text-primary); }

/* AI ASSISTANT */
.ai-chat {
  display:flex; flex-direction:column;
  height:500px;
}

.ai-messages {
  flex:1; overflow-y:auto;
  padding:16px 0;
  display:flex; flex-direction:column; gap:12px;
}

.ai-msg {
  display:flex; gap:10px; align-items:flex-start;
}

.ai-msg.user { flex-direction:row-reverse; }

.ai-avatar {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:14px;
}

.ai-bubble {
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:10px 14px;
  font-size:13px; line-height:1.5;
  max-width:80%;
}

.ai-msg.user .ai-bubble {
  background:rgba(0,212,255,0.08);
  border-color:rgba(0,212,255,0.2);
  color:var(--text-primary);
}

.ai-input-row {
  display:flex; gap:8px; align-items:center;
  padding-top:12px;
  border-top:1px solid var(--border-subtle);
}

.ai-input {
  flex:1;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  color:var(--text-primary);
  font-family:var(--font-main); font-size:13px;
  outline:none; transition:var(--transition);
}
.ai-input:focus { border-color:var(--accent-cyan); }

/* COMMAND PALETTE */
#cmd-palette {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(8px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:80px;
  opacity:0; pointer-events:none;
  transition:opacity 0.15s;
}

#cmd-palette.active { opacity:1; pointer-events:all; }

.cmd-box {
  width:600px;
  background:rgba(10,14,26,0.99);
  border:1px solid var(--border-active);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--glow-cyan), 0 40px 80px rgba(0,0,0,0.7);
  transform:translateY(-10px);
  transition:transform 0.2s;
}

#cmd-palette.active .cmd-box { transform:translateY(0); }

.cmd-input-row {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--border-subtle);
}

.cmd-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text-primary); font-family:var(--font-main);
  font-size:16px;
}

.cmd-results { max-height:360px; overflow-y:auto; }

.cmd-result {
  display:flex; align-items:center; gap:12px;
  padding:12px 20px;
  cursor:pointer; transition:var(--transition);
  border-bottom:1px solid rgba(0,212,255,0.03);
}
.cmd-result:hover, .cmd-result.selected { background:rgba(0,212,255,0.06); }
.cmd-result-icon { width:32px; height:32px; border-radius:8px; background:rgba(0,212,255,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cmd-result-label { font-size:14px; }
.cmd-result-sub { font-size:12px; color:var(--text-muted); }
.cmd-result-shortcut { margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }

/* VOICE */
.voice-btn {
  position:fixed; bottom:32px; right:32px; z-index:200;
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(0,212,255,0.15), rgba(37,99,235,0.2));
  border:1px solid var(--accent-cyan);
  cursor:pointer; transition:var(--transition);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-cyan);
  box-shadow:0 0 20px rgba(0,212,255,0.15);
}

.voice-btn:hover { box-shadow:0 0 30px rgba(0,212,255,0.3); transform:scale(1.05); }
.voice-btn.listening { animation:voice-pulse 1s ease-in-out infinite; }
@keyframes voice-pulse { 0%,100%{box-shadow:0 0 20px rgba(0,212,255,0.3)} 50%{box-shadow:0 0 40px rgba(0,212,255,0.6), 0 0 80px rgba(0,212,255,0.2)} }

/* STANDBY */
#standby-screen {
  position:fixed; inset:0; z-index:800;
  background:#060810;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.5s;
}

#standby-screen.active { opacity:1; pointer-events:all; }

.standby-particles {
  position:absolute; inset:0; overflow:hidden;
}

.particle {
  position:absolute; border-radius:50%;
  animation:particle-float linear infinite;
}

@keyframes particle-float {
  0% { transform:translateY(100vh) scale(0); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { transform:translateY(-10vh) scale(1); opacity:0; }
}

.standby-ring {
  position:absolute;
  border-radius:50%;
  border:1px solid;
  animation:ring-expand 4s ease-in-out infinite;
}

@keyframes ring-expand {
  0% { transform:scale(0.8); opacity:0.6; }
  50% { transform:scale(1.1); opacity:0.2; }
  100% { transform:scale(0.8); opacity:0.6; }
}

.standby-center { position:relative; z-index:2; text-align:center; }

.standby-time {
  font-family:var(--font-display);
  font-size:80px; font-weight:300;
  color:var(--text-primary);
  letter-spacing:-2px;
  line-height:1;
}

.standby-date {
  font-size:14px; color:var(--text-muted);
  letter-spacing:3px; text-transform:uppercase;
  margin-top:8px; margin-bottom:48px;
}

.standby-status-row {
  display:flex; gap:32px; justify-content:center;
  margin-top:48px;
}

.standby-stat {
  text-align:center;
}

.standby-stat-val { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--accent-cyan); }
.standby-stat-label { font-size:10px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; }

.standby-exit {
  position:absolute; bottom:40px; right:40px;
  padding:10px 20px;
  background:rgba(0,212,255,0.08);
  border:1px solid rgba(0,212,255,0.3);
  border-radius:8px;
  color:var(--accent-cyan); font-size:12px;
  cursor:pointer; transition:var(--transition);
  letter-spacing:1px;
}
.standby-exit:hover { background:rgba(0,212,255,0.15); }

/* TOAST */
.toast-container { position:fixed; top:70px; right:24px; z-index:600; display:flex; flex-direction:column; gap:8px; }

.toast {
  background:rgba(10,14,26,0.95);
  border:1px solid var(--border-active);
  border-radius:10px;
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  font-size:13px;
  box-shadow:var(--glow-cyan);
  animation:toastIn 0.3s cubic-bezier(0.4,0,0.2,1);
  min-width:260px;
  backdrop-filter:blur(10px);
}

@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.toast.out { animation:toastOut 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(20px)} }

/* MONITORING */
.monitor-item {
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  background:rgba(0,0,0,0.2);
  border:1px solid var(--border-subtle);
  border-radius:8px;
  margin-bottom:8px;
  transition:var(--transition);
}
.monitor-item:hover { border-color:var(--border-active); }
.monitor-url { flex:1; font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); }
.monitor-latency { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }

/* ACTIVITY FEED */
.activity-item {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--border-subtle);
  font-size:12px;
}
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:6px; height:6px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.activity-text { color:var(--text-secondary); line-height:1.4; }
.activity-time { color:var(--text-muted); margin-left:auto; white-space:nowrap; }

/* TABS */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border-subtle); margin-bottom:24px; }
.tab {
  padding:10px 18px; border-radius:8px 8px 0 0;
  font-size:13px; font-weight:500;
  color:var(--text-muted); cursor:pointer;
  transition:var(--transition);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tab:hover { color:var(--text-secondary); }
.tab.active { color:var(--accent-cyan); border-bottom-color:var(--accent-cyan); }

/* TABLE */
.table { width:100%; border-collapse:collapse; }
.table th { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; padding:10px 14px; border-bottom:1px solid var(--border-subtle); text-align:left; }
.table td { padding:12px 14px; font-size:13px; border-bottom:1px solid rgba(0,212,255,0.04); }
.table tr:hover td { background:rgba(0,212,255,0.02); }

/* EMPTY STATE */
.empty-state {
  text-align:center; padding:60px 24px;
  color:var(--text-muted);
}
.empty-state-icon { font-size:48px; margin-bottom:16px; opacity:0.3; }
.empty-state-title { font-size:16px; font-weight:500; color:var(--text-secondary); margin-bottom:8px; }
.empty-state-sub { font-size:13px; }

/* LOADING */
.skeleton {
  background:linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size:200% 100%;
  animation:skeleton-wave 1.5s infinite;
  border-radius:6px;
}
@keyframes skeleton-wave { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* RESPONSIVE */
@media (max-width:1200px) {
  .dashboard-layout { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .sidebar { width:0; }
  .main-content { margin-left:0; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .search-bar { width:180px; }
  .cmd-box { width:95vw; }
}

/* DETAIL PAGE */
.detail-header {
  display:flex; align-items:center; gap:20px;
  margin-bottom:28px;
}
.detail-avatar { width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:22px; }
.detail-name { font-family:var(--font-display); font-size:28px; font-weight:600; }
.detail-client { font-size:14px; color:var(--text-secondary); }
.back-btn { cursor:pointer; color:var(--text-muted); display:flex; align-items:center; gap:6px; font-size:13px; padding:6px 12px; border-radius:6px; border:1px solid var(--border-subtle); transition:var(--transition); }
.back-btn:hover { color:var(--accent-cyan); border-color:var(--border-active); }

/* PROGRESS BAR */
.progress { height:3px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; border-radius:2px; transition:width 0.6s; }
.progress-cyan { background:linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); }
.progress-green { background:var(--accent-green); }

/* WORKLOG TABLE */
.wl-header { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.filter-chip {
  padding:6px 14px; border-radius:20px;
  font-size:12px; font-weight:500;
  border:1px solid var(--border-subtle);
  background:transparent; color:var(--text-secondary);
  cursor:pointer; transition:var(--transition);
}
.filter-chip:hover, .filter-chip.active { border-color:var(--accent-cyan); color:var(--accent-cyan); background:rgba(0,212,255,0.06); }

/* CHARTS placeholder */
.chart-placeholder {
  background:rgba(0,0,0,0.2);
  border:1px dashed var(--border-subtle);
  border-radius:var(--radius);
  height:180px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:12px;
  flex-direction:column; gap:8px;
}

/* Colorful project avatars */
.avatar-blue { background:linear-gradient(135deg, #1e3a8a, #2563eb); color:#93c5fd; }
.avatar-cyan { background:linear-gradient(135deg, #0e4f6c, #0284c7); color:#7dd3fc; }
.avatar-green { background:linear-gradient(135deg, #064e3b, #059669); color:#6ee7b7; }
.avatar-purple { background:linear-gradient(135deg, #4c1d95, #7c3aed); color:#c4b5fd; }
.avatar-orange { background:linear-gradient(135deg, #7c2d12, #ea580c); color:#fdba74; }
.avatar-pink { background:linear-gradient(135deg, #831843, #db2777); color:#f9a8d4; }
.avatar-teal { background:linear-gradient(135deg, #134e4a, #0d9488); color:#5eead4; }
.avatar-yellow { background:linear-gradient(135deg, #713f12, #d97706); color:#fde68a; }
.avatar-red { background:linear-gradient(135deg, #7f1d1d, #dc2626); color:#fca5a5; }
.avatar-indigo { background:linear-gradient(135deg, #1e1b4b, #4f46e5); color:#a5b4fc; }

/* Scrollable horizontal */
.scroll-x { overflow-x:auto; padding-bottom:4px; }
.scroll-x::-webkit-scrollbar { height:2px; }

.tag-row { display:flex; gap:6px; flex-wrap:wrap; }

/* Timeline */
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:1px; background:var(--border-subtle); }
.timeline-item { position:relative; padding:0 0 20px 20px; }
.timeline-item::before { content:''; position:absolute; left:-5px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--accent-cyan); box-shadow:0 0 8px var(--accent-cyan); }
.timeline-date { font-size:11px; color:var(--text-muted); margin-bottom:4px; font-family:var(--font-mono); }
.timeline-content { font-size:13px; color:var(--text-secondary); background:rgba(0,0,0,0.2); padding:10px 14px; border-radius:8px; border:1px solid var(--border-subtle); }

/* Reports */
.report-stat { padding:20px; background:rgba(0,0,0,0.2); border-radius:10px; border:1px solid var(--border-subtle); }
.report-stat-val { font-family:var(--font-display); font-size:32px; font-weight:700; }
.report-stat-label { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* INLINE ICONS */
svg.icon { width:16px; height:16px; display:inline-block; vertical-align:middle; }


/* ===== S21 COMPLETE PLATFORM ADDITIONS ===== */
:root{--s21-cyan:var(--accent-cyan);--s21-border:var(--border-subtle);--s21-success:var(--accent-green);--s21-error:var(--accent-red);--s21-font-mono:var(--font-mono)}
a{color:var(--accent-cyan);text-decoration:none}.hidden{display:none!important}.s21-alert{padding:12px 14px;border-radius:10px;margin:10px 0;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03)}.s21-alert.success{color:var(--accent-green);border-color:rgba(0,255,136,.22);background:rgba(0,255,136,.06)}.s21-alert.error{color:var(--accent-red);border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.08)}.s21-alert.warning{color:var(--accent-yellow);border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.08)}
.s21-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:20px;backdrop-filter:blur(10px);margin:14px 0}.s21-section-title{font-family:var(--font-display);font-size:20px;color:var(--text-primary);font-weight:600;margin:18px 0 12px}.s21-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.28);border-radius:8px;color:var(--accent-cyan);cursor:pointer;font-weight:600;font-family:var(--font-main);transition:.2s}.s21-btn:hover{background:rgba(0,212,255,.15);box-shadow:var(--glow-cyan)}.s21-btn.danger{color:var(--accent-red);border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.08)}.s21-btn.gray{color:var(--text-secondary);border-color:var(--border-subtle);background:rgba(255,255,255,.03)}
.s21-field{margin:0 0 14px}.s21-field label{display:block;font-size:11px;color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}.s21-field input,.s21-field textarea,.s21-field select{width:100%;background:rgba(0,0,0,.28);border:1px solid var(--border-subtle);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-family:var(--font-main);outline:none}.s21-field textarea{min-height:86px;resize:vertical}.s21-field input:focus,.s21-field textarea:focus,.s21-field select:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(0,212,255,.08)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.muted{color:var(--text-muted)}.mono{font-family:var(--font-mono)}.nowrap{white-space:nowrap}
.full-ai-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;height:calc(100vh - 122px)}.ai-main-panel,.ai-side-panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;backdrop-filter:blur(10px)}.ai-main-panel{display:flex;flex-direction:column}.ai-pro-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-subtle);background:rgba(0,0,0,.18)}.ai-mode-tabs{display:flex;gap:6px;flex-wrap:wrap}.ai-mode-tab{padding:6px 10px;border:1px solid var(--border-subtle);border-radius:999px;font-size:11px;color:var(--text-secondary);cursor:pointer}.ai-mode-tab.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(0,212,255,.08)}.ai-pro-messages{flex:1;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:16px}.ai-pro-msg{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px}.ai-pro-msg.user{grid-template-columns:minmax(0,1fr) 40px}.ai-pro-msg.user .ai-pro-bubble{order:1;background:rgba(0,212,255,.07);border-color:rgba(0,212,255,.18)}.ai-pro-bubble{background:rgba(0,0,0,.25);border:1px solid var(--border-subtle);border-radius:14px;padding:14px 16px;line-height:1.55;font-size:14px;white-space:pre-wrap}.ai-pro-bubble pre{background:#05070d;border:1px solid var(--border-subtle);border-radius:10px;padding:14px;overflow:auto;white-space:pre;margin:10px 0}.ai-pro-bubble code{font-family:var(--font-mono);font-size:12px}.ai-pro-avatar{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,212,255,.09);color:var(--accent-cyan);border:1px solid rgba(0,212,255,.16)}.ai-composer{padding:16px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;background:rgba(0,0,0,.18)}.ai-composer textarea{flex:1;min-height:56px;max-height:160px;background:rgba(0,0,0,.32);border:1px solid var(--border-subtle);border-radius:12px;color:var(--text-primary);padding:12px 14px;resize:vertical;outline:none;font-family:var(--font-main)}.ai-side-panel{padding:16px;overflow:auto}.quick-list{display:flex;flex-direction:column;gap:8px}.quick-action{padding:9px 10px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);border-radius:10px;color:var(--text-secondary);font-size:12px;cursor:pointer}.quick-action:hover{color:var(--accent-cyan);border-color:var(--border-active)}
.mail-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;min-height:calc(100vh - 140px)}.mail-list,.mail-reader{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden}.mail-toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border-subtle);background:rgba(0,0,0,.18)}.mail-items{max-height:calc(100vh - 245px);overflow:auto}.mail-item{padding:12px;border-bottom:1px solid rgba(0,212,255,.04);cursor:pointer}.mail-item:hover,.mail-item.active{background:rgba(0,212,255,.06)}.mail-item.unread .mail-subject{color:var(--accent-cyan);font-weight:700}.mail-from{font-size:12px;color:var(--text-secondary)}.mail-subject{font-size:13px;color:var(--text-primary);margin-top:4px}.mail-date{font-size:10px;color:var(--text-muted);margin-top:4px}.mail-reader-head{padding:14px;border-bottom:1px solid var(--border-subtle)}.mail-reader-body{padding:18px;overflow:auto;max-height:calc(100vh - 310px);line-height:1.6}.mail-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);text-align:center}.split-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.folder-pill{padding:5px 8px;border-radius:999px;border:1px solid var(--border-subtle);font-size:11px;color:var(--text-muted);cursor:pointer}.folder-pill.active,.folder-pill:hover{color:var(--accent-cyan);border-color:var(--accent-cyan)}
.data-table-wrap{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.table-actions{display:flex;gap:6px}.status-ok{color:var(--accent-green)}.status-warn{color:var(--accent-yellow)}.status-err{color:var(--accent-red)}.modal.wide{max-width:900px}.modal.xwide{max-width:1150px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border-subtle);border-radius:999px;padding:4px 10px;font-size:11px;color:var(--text-secondary);background:rgba(255,255,255,.03)}
@media(max-width:1100px){.full-ai-layout,.mail-layout{grid-template-columns:1fr}.ai-side-panel{height:auto}.kpi-grid,.settings-grid,.form-grid,.form-grid-3{grid-template-columns:1fr}.mail-items{max-height:260px}}

/* =========================================================
   S21 USEFUL HUB PATCH — UI activ, aerisit, clickabil
   ========================================================= */
.clickable{cursor:pointer}.clickable:hover{transform:translateY(-2px)}
.utility-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(37,99,235,.04));}
.dashboard-workbench{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;gap:16px;margin-top:16px}.useful-kpis .card{min-height:112px}.utility-server{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border-subtle);border-radius:10px;margin-bottom:8px;cursor:pointer;background:rgba(0,0,0,.14)}.utility-server:hover{border-color:var(--border-active);background:rgba(0,212,255,.06)}.mini-link{margin-left:auto;color:var(--accent-cyan);font-size:11px}.useful-project-list{display:flex;flex-direction:column}.useful-project-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid rgba(0,212,255,.06);cursor:pointer;border-radius:10px}.useful-project-row:hover{background:rgba(0,212,255,.04);box-shadow:inset 0 0 0 1px rgba(0,212,255,.08)}.useful-project-main b{font-size:14px}.useful-project-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.project-card.useful-card{min-height:220px}.big-avatar{width:64px!important;height:64px!important;font-size:22px!important}.project-os-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}.project-os-head h2{font-family:var(--font-display);font-size:28px;margin:0}.project-os-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}.project-os-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid rgba(0,212,255,.05)}.kv b{color:var(--text-secondary);font-size:12px}.kv span{color:var(--text-primary);font-size:12px;word-break:break-word}.useful-mail-layout{grid-template-columns:340px minmax(0,1fr)}.mail-reader h3{font-family:var(--font-display);font-size:24px;margin-bottom:6px}.mail-reader-body{font-size:14px}.mail-reader-body img{max-width:100%;height:auto}.mail-item.active{background:rgba(0,212,255,.09);border-left:2px solid var(--accent-cyan)}.mail-item.unread{background:rgba(0,212,255,.025)}
@media(max-width:1300px){.dashboard-workbench{grid-template-columns:1fr}.useful-project-row{grid-template-columns:46px 1fr}.useful-project-actions{grid-column:1/-1;justify-content:flex-start}.project-os-grid{grid-template-columns:1fr}.utility-hero{flex-direction:column;align-items:flex-start}.useful-mail-layout{grid-template-columns:1fr}}