/* Inherit Zorin variables */
:root {
    --bg: #05070D; --panel: #0E1624; --panel-secondary: #111C2E; --border: #243044;
    --blue: #2F80ED; --cyan: #00D1FF; --green: #22C55E; --amber: #F59E0B; --red: #EF4444;
    --purple: #8B5CF6; --text: #F5F7FA; --text-muted: #9AA4B2; --radius: 12px;
  }
  [data-theme="light"] {
    --bg: #F5F7FA; --panel: #FFFFFF; --panel-secondary: #EEF2F7; --border: #CBD5E1;
    --blue: #2563EB; --cyan: #0891B2; --green: #16A34A; --amber: #D97706; --red: #DC2626;
    --purple: #7C3AED; --text: #0F172A; --text-muted: #64748B;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); height:100vh; overflow:hidden; }
  .app-layout { display:flex; height:100vh; }
  .sidebar {
    width:220px; background:var(--panel); border-right:1px solid var(--border);
    display:flex; flex-direction:column; padding:1.5rem 1rem; gap:1.5rem;
  }
  .sidebar-logo { font-weight:700; font-size:1.25rem; color:var(--cyan); }
  .sidebar-nav { display:flex; flex-direction:column; gap:0.5rem; }
  .nav-item {
    color:var(--text-muted); text-decoration:none; padding:0.5rem; border-radius:var(--radius);
    transition:0.2s;
  }
  .nav-item:hover, .nav-item.active { background:var(--panel-secondary); color:var(--cyan); }
  .main-content { flex:1; display:flex; flex-direction:column; overflow-y:auto; }
  .toolbar {
    background:var(--panel); border-bottom:1px solid var(--border); padding:0.75rem 1.5rem;
    display:flex; justify-content:space-between; align-items:center;
  }
  .toolbar-left { display:flex; align-items:center; gap:1rem; }
  .app-title { font-weight:600; }
  .status-badge {
    padding:0.25rem 0.75rem; border-radius:2rem; font-size:0.8rem;
  }
  .online { background:var(--green); color:white; }
  .offline { background:var(--red); color:white; }
  .icon-btn { background:none; border:1px solid var(--border); color:var(--text); padding:0.5rem; border-radius:var(--radius); cursor:pointer; font-size:1.2rem; }
  .dashboard {
    display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1rem;
    padding:1.5rem; flex:1;
  }
  .card {
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:1.25rem; display:flex; flex-direction:column; gap:0.75rem;
  }
  .card h3 { font-size:1.1rem; color:var(--cyan); }
  .btn {
    background:var(--blue); color:white; border:none; padding:0.5rem 1rem; border-radius:var(--radius);
    cursor:pointer; font-weight:500;
  }
  .btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
  .command-center {
    background:var(--panel-secondary); border-top:1px solid var(--border); padding:1rem 1.5rem;
    display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center;
  }
  .command-center input {
    flex:1; min-width:200px; background:var(--panel); border:1px solid var(--border);
    color:var(--text); padding:0.6rem 1rem; border-radius:var(--radius);
  }
  .quick-commands { display:flex; flex-wrap:wrap; gap:0.5rem; }
  .chip {
    background:var(--panel); border:1px solid var(--border); padding:0.3rem 0.75rem;
    border-radius:2rem; font-size:0.8rem; cursor:pointer; transition:0.2s;
  }
  .chip:hover { background:var(--border); }
  .response-box {
    width:100%; background:var(--panel); padding:1rem; border-radius:var(--radius);
    margin-top:0.5rem; max-height:150px; overflow-y:auto;
  }
  .hint { font-size:0.8rem; color:var(--text-muted); }