/*
 * style.css — Knowledge Base Design System v2
 * Design: "Clarity" — clean, spacious, modern
 * Fonts: Manrope (UI) + Crimson Pro (body) + JetBrains Mono (code)
 *
 * CUSTOMISATION:
 *   Colors  → edit :root and [data-theme="dark"] custom properties
 *   Fonts   → change --font-ui / --font-reading / --font-mono
 *   Sidebar → change --sb-w (default 260px)
 *   Layout  → change --detail-w (right-pane width, default 440px)
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ================================================================
   DESIGN TOKENS — LIGHT THEME
   ================================================================ */
:root {
  --bg:        #F4F5F9;
  --surface:   #FFFFFF;
  --surface-2: #F0F1F6;
  --surface-3: #E7E9F2;
  --border:    #E0E2EC;
  --border-2:  #CBD0E0;

  --text-1:    #0D0F1C;
  --text-2:    #454760;
  --text-3:    #9294A8;

  --primary:        #5B5FEE;
  --primary-hover:  #4A4EDB;
  --primary-soft:   #EEEFFE;
  --primary-ring:   rgba(91,95,238,.2);

  --note-c:#2563EB; --note-bg:#EFF6FF;
  --link-c:#059669; --link-bg:#ECFDF5;
  --task-c:#7C3AED; --task-bg:#F5F3FF;
  --idea-c:#D97706; --idea-bg:#FFFBEB;

  --success-c:#16A34A; --success-bg:#F0FDF4;
  --warning-c:#CA8A04; --warning-bg:#FEFCE8;
  --error-c:  #DC2626; --error-bg:  #FEF2F2;
  --info-c:   #0284C7; --info-bg:   #F0F9FF;

  --sb-bg:     #1E1F2E;
  --sb-text:   #C8CAE0;
  --sb-muted:  #7476A0;
  --sb-hover:  rgba(255,255,255,.07);
  --sb-active: rgba(91,95,238,.25);
  --sb-active-c:#9CA3FF;
  --sb-border: rgba(255,255,255,.07);
  --sb-w:      260px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 32px 64px rgba(0,0,0,.16),0 8px 24px rgba(0,0,0,.08);

  --font-ui:      'Manrope', system-ui, sans-serif;
  --font-reading: 'Crimson Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono','Fira Code',monospace;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --dur-fast:140ms; --dur-med:220ms; --dur-slow:380ms;
  --topbar-h:56px;
  --detail-w:440px;
}

/* ================================================================
   DARK THEME
   ================================================================ */
[data-theme="dark"] {
  --bg:        #0B0C14;
  --surface:   #12141F;
  --surface-2: #1A1C2A;
  --surface-3: #222436;
  --border:    #252739;
  --border-2:  #333550;

  --text-1:    #E8EAF6;
  --text-2:    #9698C0;
  --text-3:    #555878;

  --primary:       #7578FF;
  --primary-hover: #8E91FF;
  --primary-soft:  #1A1C35;
  --primary-ring:  rgba(117,120,255,.25);

  --note-c:#60A5FA; --note-bg:#0F1A2E;
  --link-c:#34D399; --link-bg:#052016;
  --task-c:#A78BFA; --task-bg:#170D2E;
  --idea-c:#FBBF24; --idea-bg:#1F1500;

  --success-c:#4ADE80; --success-bg:#052010;
  --warning-c:#FDE047; --warning-bg:#1D1600;
  --error-c:  #F87171; --error-bg:  #2D0808;
  --info-c:   #38BDF8; --info-bg:   #061620;

  --sb-bg:     #0D0E1A;
  --sb-text:   #B0B2D0;
  --sb-muted:  #555880;
  --sb-hover:  rgba(255,255,255,.05);
  --sb-active: rgba(117,120,255,.2);
  --sb-active-c:#9CA3FF;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --shadow-xl: 0 32px 64px rgba(0,0,0,.6);
}

/* ================================================================
   RESET
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);font-size:14.5px;font-weight:400;
  line-height:1.65;color:var(--text-1);background:var(--bg);
  min-height:100%;transition:background var(--dur-med),color var(--dur-med);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
button{cursor:pointer;font-family:var(--font-ui)}

/* ================================================================
   SIDEBAR (shared by public + admin)
   ================================================================ */
.sidebar,.admin-sidebar{
  width:var(--sb-w);
  background:var(--sb-bg);
  color:var(--sb-text);
  display:flex;flex-direction:column;
  height:100vh;overflow:hidden;
  position:fixed;top:0;left:0;
  z-index:200;
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow);
}

.sb-header,.admin-brand{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--sb-border);
  flex-shrink:0;
}
.sb-logo{
  font-size:1.1rem;font-weight:700;color:#fff;
  letter-spacing:-.02em;display:flex;align-items:center;gap:8px;
}
.sb-logo .accent{color:var(--primary)}

.admin-brand-name{font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.admin-brand-user{font-size:11.5px;color:var(--sb-muted);margin-top:3px}

/* Search box inside sidebar */
.sb-search{padding:10px 12px;border-bottom:1px solid var(--sb-border);flex-shrink:0}
.sb-search-input{
  width:100%;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);
  color:var(--sb-text);font-family:var(--font-ui);font-size:13px;
  padding:7px 12px;outline:none;
  transition:border-color var(--dur-fast),background var(--dur-fast);
}
.sb-search-input::placeholder{color:var(--sb-muted)}
.sb-search-input:focus{border-color:var(--primary);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px var(--primary-ring)}

/* Nav scroll area */
.sb-nav,.admin-nav{flex:1;overflow-y:auto;padding:6px 0}
.sb-nav::-webkit-scrollbar,.admin-nav::-webkit-scrollbar{width:4px}
.sb-nav::-webkit-scrollbar-thumb,.admin-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

.sb-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sb-muted);padding:10px 18px 4px;
}

.sb-item,.admin-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 18px;color:var(--sb-text);
  font-size:13.5px;font-weight:500;text-decoration:none;
  background:transparent;border:none;width:100%;text-align:left;
  border-left:2px solid transparent;cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.sb-item:hover,.admin-nav-item:hover{background:var(--sb-hover);color:#fff;text-decoration:none}
.sb-item.active,.admin-nav-item.active{
  background:var(--sb-active);color:var(--sb-active-c);
  border-left-color:var(--primary);font-weight:600;
}
.sb-item .icon,.admin-nav-item .icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.sb-item .count{
  margin-left:auto;background:rgba(255,255,255,.1);
  color:var(--sb-muted);font-size:11px;font-weight:600;
  padding:1px 7px;border-radius:var(--r-full);
}

/* Type filter chips */
.sb-chips{padding:4px 12px 8px;display:flex;flex-wrap:wrap;gap:5px}
.chip{
  padding:4px 10px;border-radius:var(--r-full);font-size:12px;font-weight:600;
  background:rgba(255,255,255,.06);color:var(--sb-text);
  border:1px solid rgba(255,255,255,.08);cursor:pointer;
  transition:all var(--dur-fast);user-select:none;
}
.chip:hover{background:rgba(255,255,255,.1);color:#fff}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* Tag cloud */
.sb-tags{padding:8px 12px 16px;border-top:1px solid var(--sb-border)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag-pill{
  padding:3px 9px;border-radius:var(--r-full);font-size:11.5px;font-weight:500;
  background:rgba(255,255,255,.06);color:var(--sb-muted);
  border:1px solid rgba(255,255,255,.07);text-decoration:none;
  transition:all var(--dur-fast);cursor:pointer;display:inline-block;
}
.tag-pill:hover,.tag-pill.active{
  background:rgba(91,95,238,.3);border-color:rgba(91,95,238,.5);
  color:var(--sb-active-c);text-decoration:none;
}

/* Sidebar footer */
.sb-footer,.admin-nav-footer{
  padding:12px;border-top:1px solid var(--sb-border);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.sb-footer-icon{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:var(--sb-muted);
  font-size:14px;text-decoration:none;cursor:pointer;
  transition:all var(--dur-fast);
}
.sb-footer-icon:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.lang-select{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);color:var(--sb-muted);font-family:var(--font-ui);
  font-size:12px;padding:5px 8px;outline:none;cursor:pointer;appearance:none;
}
.lang-select:focus{border-color:var(--primary);color:#fff}

/* ================================================================
   PUBLIC LAYOUT
   ================================================================ */
.main-pane{
  margin-left:var(--sb-w);display:flex;flex-direction:column;
  height:100vh;overflow:hidden;
  transition:margin-right var(--dur-slow) var(--ease);
}

.content-header{
  display:flex;align-items:center;gap:16px;
  padding:0 32px;height:var(--topbar-h);
  border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
  position:sticky;top:0;z-index:10;
}
.content-title{font-size:1.05rem;font-weight:700;color:var(--text-1);flex:1;display:flex;align-items:center;gap:8px}
.content-count{
  font-size:12px;font-weight:600;color:var(--text-3);
  background:var(--surface-2);padding:2px 10px;border-radius:var(--r-full);
}
.content-body{flex:1;overflow-y:auto;padding:24px 32px}

/* ================================================================
   CARD GRID & CARDS
   ================================================================ */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px;cursor:pointer;
  transition:box-shadow var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
  position:relative;overflow:hidden;
  animation:cardIn .25s var(--ease) both;
}
.card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:4px 0 0 4px;opacity:0;transition:opacity var(--dur-fast);
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-2);transform:translateY(-1px)}
.card:hover::before{opacity:1}
.card[data-type="note"]::before{background:var(--note-c)}
.card[data-type="link"]::before{background:var(--link-c)}
.card[data-type="task"]::before{background:var(--task-c)}
.card[data-type="idea"]::before{background:var(--idea-c)}

.card-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.badge-note{background:var(--note-bg);color:var(--note-c)}
.badge-link{background:var(--link-bg);color:var(--link-c)}
.badge-task{background:var(--task-bg);color:var(--task-c)}
.badge-idea{background:var(--idea-bg);color:var(--idea-c)}

.card-date{font-size:11.5px;color:var(--text-3);margin-left:auto;flex-shrink:0}
.card-title{font-size:15px;font-weight:700;color:var(--text-1);line-height:1.4;margin-bottom:8px}
.card-excerpt{font-size:13px;color:var(--text-2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-url{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--link-c);margin:4px 0 8px;word-break:break-all}
.card-footer{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.card-tag{
  font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--text-3);cursor:pointer;
  transition:all var(--dur-fast);
}
.card-tag:hover{background:var(--primary-soft);color:var(--primary)}
.card-actions{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity var(--dur-fast)}
.card:hover .card-actions{opacity:1}

/* ================================================================
   DETAIL PANE (slide-in right panel)
   ================================================================ */
.detail-pane{
  position:fixed;top:0;right:0;
  width:var(--detail-w);height:100vh;
  background:var(--surface);border-left:1px solid var(--border);
  display:flex;flex-direction:column;z-index:300;
  transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease);
  box-shadow:var(--shadow-xl);
}
.detail-pane.open{transform:translateX(0)}
.detail-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:299;
  opacity:0;pointer-events:none;transition:opacity var(--dur-med);
}
.detail-overlay.open{opacity:1;pointer-events:all}

.detail-header{
  display:flex;align-items:flex-start;gap:12px;
  padding:20px 20px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.detail-title{font-size:1.05rem;font-weight:700;color:var(--text-1);flex:1;line-height:1.4}
.detail-meta{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.detail-body{flex:1;overflow-y:auto;padding:20px}
.detail-footer{
  padding:12px 20px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}

/* ================================================================
   MARKDOWN BODY
   ================================================================ */
.md-body{font-family:var(--font-reading);font-size:16px;line-height:1.8;color:var(--text-1)}
.md-body h1,.md-body h2,.md-body h3,.md-body h4,.md-body h5,.md-body h6{
  font-family:var(--font-ui);font-weight:700;line-height:1.3;color:var(--text-1);margin:1.5em 0 .5em;
}
.md-body h1{font-size:1.65rem}
.md-body h2{font-size:1.3rem;border-bottom:1px solid var(--border);padding-bottom:.3em}
.md-body h3{font-size:1.1rem}
.md-body p{margin:.8em 0}
.md-body a{color:var(--primary)}
.md-body strong{font-weight:700}
.md-body em{font-style:italic}
.md-body del{text-decoration:line-through;color:var(--text-3)}
.md-body blockquote{
  border-left:3px solid var(--primary);padding:12px 16px;
  background:var(--primary-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--text-2);margin:1em 0;font-style:italic;
}
.md-body code{
  font-family:var(--font-mono);font-size:.85em;
  background:var(--surface-2);border:1px solid var(--border);
  padding:1px 5px;border-radius:var(--r-xs);color:var(--primary);
}
.md-body pre{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:16px;overflow-x:auto;margin:1em 0;
}
.md-body pre code{background:none;border:none;padding:0;color:var(--text-1);font-size:13px}
.md-body ul,.md-body ol{padding-left:1.6em;margin:.8em 0}
.md-body li{margin:.25em 0}
.md-body li.task-item{list-style:none;margin-left:-1.2em}
.md-body li.task-item input[type="checkbox"]{margin-right:6px;accent-color:var(--primary)}
.md-body hr{border:none;border-top:1px solid var(--border);margin:2em 0}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:all var(--dur-fast);white-space:nowrap;line-height:1.4;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}

.btn-secondary{background:transparent;color:var(--text-2);border-color:var(--border-2)}
.btn-secondary:hover{background:var(--surface-2);color:var(--text-1);border-color:var(--border-2)}

.btn-danger{background:var(--error-bg);color:var(--error-c);border-color:rgba(220,38,38,.2)}
.btn-danger:hover{background:var(--error-c);color:#fff;border-color:var(--error-c)}

.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text-1)}

.btn-sm{padding:5px 12px;font-size:12.5px}
.btn-xs{padding:3px 9px;font-size:12px}
.btn-lg{padding:11px 22px;font-size:15px}
.btn-icon{
  width:34px;height:34px;padding:0;border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:transparent;
  color:var(--text-2);font-size:15px;
}
.btn-icon:hover{background:var(--surface-2);color:var(--text-1)}

/* ================================================================
   FORMS
   ================================================================ */
.form-group{margin-bottom:20px}
.form-label{
  display:block;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-2);margin-bottom:6px;
}
.form-control{
  width:100%;padding:9px 13px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-1);
  font-family:var(--font-ui);font-size:14px;line-height:1.5;
  outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);appearance:none;
}
.form-control::placeholder{color:var(--text-3)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.form-control:disabled{opacity:.6;background:var(--surface-2);cursor:not-allowed}
textarea.form-control{resize:vertical;min-height:80px}
select.form-control{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
.form-hint{font-size:12px;color:var(--text-3);margin-top:5px;line-height:1.5}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* Tags input widget */
.tags-input{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);cursor:text;min-height:42px;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.tags-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.tag-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--primary-soft);color:var(--primary);
  border:1px solid rgba(91,95,238,.2);
  padding:2px 8px;border-radius:var(--r-full);font-size:12px;font-weight:600;
}
.tag-chip button{background:none;border:none;color:inherit;padding:0;font-size:13px;opacity:.7;line-height:1}
.tag-chip button:hover{opacity:1}
#tag-input{
  border:none;background:none;outline:none;
  font-family:var(--font-ui);font-size:13.5px;color:var(--text-1);
  min-width:80px;flex:1;padding:1px 2px;
}

/* ================================================================
   ALERTS
   ================================================================ */
.alert{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;border-radius:var(--r-sm);
  font-size:13.5px;line-height:1.5;border:1px solid transparent;
  margin-bottom:16px;
}
.alert-success{background:var(--success-bg);color:var(--success-c);border-color:rgba(22,163,74,.2)}
.alert-error  {background:var(--error-bg);  color:var(--error-c);  border-color:rgba(220,38,38,.2)}
.alert-info   {background:var(--info-bg);   color:var(--info-c);   border-color:rgba(2,132,199,.2)}
.alert-warning{background:var(--warning-bg);color:var(--warning-c);border-color:rgba(202,138,4,.2)}

/* ================================================================
   TABLES
   ================================================================ */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.data-table th{
  background:var(--surface-2);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);
  padding:10px 16px;text-align:left;border-bottom:1px solid var(--border);
}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text-1);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--surface-2)}

/* ================================================================
   SURFACE CARD (generic)
   ================================================================ */
.surface-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:24px}

/* ================================================================
   MARKDOWN EDITOR
   ================================================================ */
.editor-wrap{
  border:1.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.editor-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.editor-toolbar{
  display:flex;align-items:center;gap:2px;
  padding:6px 10px;background:var(--surface-2);
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.tb-btn{
  width:30px;height:30px;border:none;background:transparent;color:var(--text-2);
  cursor:pointer;border-radius:var(--r-xs);font-family:var(--font-ui);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast);
}
.tb-btn:hover{background:var(--surface-3);color:var(--text-1)}
.tb-sep{width:1px;height:20px;background:var(--border);margin:0 3px}
.editor-panes{display:grid;grid-template-columns:1fr 1fr;min-height:320px}
.editor-pane-label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-3);padding:5px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);
}
#md-input{
  display:block;width:100%;min-height:320px;padding:16px;
  border:none;border-right:1px solid var(--border);
  background:var(--surface);color:var(--text-1);
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  resize:vertical;outline:none;
}
#md-preview{min-height:320px;padding:16px;background:var(--surface);overflow-y:auto}
.size-meter{
  display:flex;align-items:center;gap:8px;padding:5px 12px;
  font-size:11.5px;font-family:var(--font-mono);color:var(--text-3);
  background:var(--surface-2);border-top:1px solid var(--border);
  transition:background var(--dur-fast);
}
.size-bar{height:4px;border-radius:2px;background:var(--success-c);transition:width var(--dur-med),background var(--dur-med);min-width:2px}
.size-badge{padding:1px 8px;border-radius:var(--r-full);font-size:10.5px;font-weight:700}
.autosave-ind{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3);transition:all var(--dur-fast)}
.autosave-ind.saving{color:var(--warning-c)}
.autosave-ind.saved {color:var(--success-c)}
.autosave-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ================================================================
   QUICK CAPTURE FAB
   ================================================================ */
.qc-fab{position:fixed;bottom:24px;right:24px;z-index:400}
.qc-toggle-btn{
  width:48px;height:48px;border-radius:50%;
  background:var(--primary);color:#fff;border:none;
  box-shadow:0 4px 16px rgba(91,95,238,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:all var(--dur-fast);
}
.qc-toggle-btn:hover{background:var(--primary-hover);transform:scale(1.06)}
.qc-panel{
  position:absolute;bottom:60px;right:0;width:340px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:20px;
  opacity:0;transform:translateY(10px) scale(.97);
  pointer-events:none;transition:all .2s var(--ease);
}
.qc-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.qc-panel h4{font-size:.9rem;font-weight:700;color:var(--text-1);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.qc-list{max-height:110px;overflow-y:auto;margin-bottom:10px}
.qc-list-item{
  display:flex;align-items:center;gap:6px;padding:4px 0;
  border-bottom:1px solid var(--border);font-size:12px;color:var(--text-2);
}
.qc-list-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-list-item button{border:none;background:none;color:var(--text-3);font-size:14px;cursor:pointer;line-height:1}
.qc-textarea{
  width:100%;height:85px;resize:none;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-1);
  font-family:var(--font-ui);font-size:13px;padding:9px 12px;outline:none;
  transition:border-color var(--dur-fast);margin-bottom:8px;
}
.qc-textarea:focus{border-color:var(--primary);background:var(--surface)}
.qc-publish-section summary{cursor:pointer;font-size:12px;color:var(--text-3);user-select:none;padding:4px 0}
.qc-publish-section summary:hover{color:var(--text-2)}
.qc-size-hint{font-size:11px;margin-top:4px;transition:color var(--dur-fast)}

/* ================================================================
   TOAST
   ================================================================ */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--text-1);color:var(--bg);
  padding:10px 20px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:600;opacity:0;
  transition:all .22s var(--ease);z-index:9999;
  pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-lg);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.kbd{
  display:inline-block;padding:1px 6px;
  border:1px solid var(--border-2);border-radius:var(--r-xs);
  font-family:var(--font-mono);font-size:10.5px;
  background:var(--surface-2);color:var(--text-3);vertical-align:middle;
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state{text-align:center;padding:80px 20px;color:var(--text-3)}
.empty-icon{font-size:3rem;margin-bottom:12px}
.empty-state h3{font-size:1.1rem;font-weight:700;color:var(--text-2);margin-bottom:8px}
.empty-state p{font-size:13.5px}

/* ================================================================
   ADMIN LAYOUT
   ================================================================ */
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{width:220px}
.admin-main{margin-left:220px;flex:1;display:flex;flex-direction:column;min-height:100vh}
.admin-header{
  display:flex;align-items:center;gap:16px;padding:0 32px;height:var(--topbar-h);
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.admin-header h1{font-size:1.15rem;font-weight:700;color:var(--text-1);flex:1}
.admin-body{padding:32px;flex:1}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px;margin-bottom:32px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:4px;transition:box-shadow var(--dur-fast)}
.stat-card:hover{box-shadow:var(--shadow-sm)}
.stat-icon{font-size:1.4rem;line-height:1}
.stat-value{font-size:1.8rem;font-weight:700;color:var(--text-1);line-height:1}
.stat-label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}

/* Storage overview */
.storage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.storage-card{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 20px}
.storage-card-ico{font-size:1.6rem}
.storage-card-val{font-size:1.4rem;font-weight:700;color:var(--text-1);line-height:1}
.storage-card-lbl{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-top:3px}
.storage-card-sub{font-size:11px;color:var(--text-3);margin-top:1px}

/* QC admin */
.qc-admin-card{background:var(--primary-soft);border:1px solid rgba(91,95,238,.15);border-radius:var(--r-md);padding:20px;margin-bottom:24px}
.qc-admin-card h3{font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:8px}

/* Pagination */
.pagination{display:flex;align-items:center;gap:4px;justify-content:center;margin-top:24px}
.page-btn{
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);
  color:var(--text-2);font-size:13px;font-weight:600;text-decoration:none;
  transition:all var(--dur-fast);padding:0 8px;
}
.page-btn:hover,.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;text-decoration:none}

/* Storage badges in tables */
.s-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}
.s-badge-db  {background:var(--success-bg);color:var(--success-c)}
.s-badge-file{background:var(--task-bg);color:var(--task-c)}

/* Login page */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:40px 36px;box-shadow:var(--shadow-lg)}
.login-logo{font-size:2rem;text-align:center;margin-bottom:8px}
.login-title{font-size:1.3rem;font-weight:700;text-align:center;color:var(--text-1)}
.login-sub{font-size:13px;text-align:center;color:var(--text-3);margin-bottom:24px}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card:nth-child(1){animation-delay:.03s}
.card:nth-child(2){animation-delay:.06s}
.card:nth-child(3){animation-delay:.09s}
.card:nth-child(4){animation-delay:.12s}
.card:nth-child(5){animation-delay:.15s}
.card:nth-child(6){animation-delay:.18s}
@keyframes spin{to{transform:rotate(360deg)}}
.spinning{animation:spin 1s linear infinite}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}

/* ================================================================
   RESPONSIVE
   ================================================================ */
.mobile-toggle{
  display:none;position:fixed;top:12px;left:12px;z-index:300;
  width:38px;height:38px;border-radius:var(--r-sm);
  background:var(--sb-bg);border:none;color:#fff;font-size:16px;
  align-items:center;justify-content:center;box-shadow:var(--shadow-md);
}

@media(max-width:900px){
  .sidebar,.admin-sidebar{transform:translateX(-100%)}
  .sidebar.open,.admin-sidebar.open{transform:translateX(0);box-shadow:var(--shadow-xl)}
  .main-pane,.admin-main{margin-left:0}
  .content-header{padding:0 20px;padding-left:56px}
  .content-body{padding:16px 20px}
  .admin-header{padding:0 20px;padding-left:56px}
  .admin-body{padding:20px}
  .card-grid{grid-template-columns:1fr}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .detail-pane{width:100vw}
  .mobile-toggle{display:flex}
  .editor-panes{grid-template-columns:1fr}
  #md-input{border-right:none;border-bottom:1px solid var(--border)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .storage-grid{grid-template-columns:1fr}
}
@media(max-width:500px){
  .login-card{padding:28px 20px}
  .qc-panel{width:calc(100vw - 32px);right:-8px}
}