:root {
  --blue:         #1e6fbb;
  --blue-dark:    #1558a0;
  --blue-light:   #e8f1fb;
  --blue-mid:     #c5d9f0;
  --bg:           #f5f6f8;
  --bg-sidebar:   #ffffff;
  --bg-card:      #ffffff;
  --border:       #dde1e7;
  --border-light: #edf0f4;
  --text:         #2b2a29;
  --text-muted:   #5c6370;
  --text-subtle:  #9aa0ac;
  --active-bg:    #e8f1fb;
  --active-text:  #1558a0;
  --active-border:#1e6fbb;
  --code-bg:      #f0f2f5;
  --shadow-xs:    0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.08);
  --shadow-md:    0 4px 20px rgba(0,0,0,.10);
  --sidebar-w:    314px;
  --navbar-h:     62px;
  --toc-w:        240px;
  --radius:       7px;
  --radius-lg:    12px;
  --font:         "Roboto", "Segoe UI", Arial, sans-serif;
  --font-mono:    "Roboto Mono", "Consolas", monospace;
}
[data-theme="dark"] {
  --bg:           #1a1c1f;
  --bg-sidebar:   #22252a;
  --bg-card:      #22252a;
  --border:       #2f3339;
  --border-light: #272b30;
  --text:         #e4e7eb;
  --text-muted:   #9aa0ac;
  --text-subtle:  #5c6370;
  --active-bg:    #163150;
  --active-text:  #5ca3e0;
  --active-border:#5ca3e0;
  --code-bg:      #1f2227;
  --blue:         #5ca3e0;
  --blue-light:   #163150;
  --blue-mid:     #1e3a5f;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16.8px}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--navbar-h);background:var(--bg-sidebar);border-bottom:1px solid var(--border);display:flex;align-items:center;box-shadow:var(--shadow-xs)}
.navbar-logo{width:var(--sidebar-w);flex-shrink:0;display:flex;align-items:center;padding:0 14px 0 12px;border-right:1px solid var(--border);height:100%;text-decoration:none!important}
.navbar-logo img.logo-large{height:32px;width:auto;max-width:178px}
[data-theme="dark"] .navbar-logo img.logo-large{filter:invert(1)}

.navbar-center{flex:1;display:flex;align-items:center;padding:0 14px;gap:8px}
.search-box{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:7px 14px;width:360px;cursor:pointer;transition:all .15s;color:var(--text-subtle);font-size:.88rem;white-space:nowrap}
.search-box:hover{border-color:var(--blue);background:var(--bg-card)}
.search-kbd{font-family:var(--font-mono);font-size:.67rem;background:var(--bg-card);color:var(--text-subtle);padding:1px 5px;border-radius:3px;border:1px solid var(--border)}
.navbar-right{display:flex;align-items:center;gap:6px;margin-left:auto;padding-right:14px}
.lang-btn{display:flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;font-size:.78rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .15s;font-family:var(--font)}
.lang-btn:hover{border-color:var(--blue);color:var(--blue)}
.icon-btn{width:30px;height:30px;border-radius:var(--radius);background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:.82rem;transition:all .15s}
.icon-btn:hover{background:var(--bg);border-color:var(--border);color:var(--text)}

/* LAYOUT */
.layout{display:flex;margin-top:var(--navbar-h);min-height:calc(100vh - var(--navbar-h))}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg-sidebar);border-right:1px solid var(--border);position:sticky;top:var(--navbar-h);height:calc(100vh - var(--navbar-h));overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}


.sb-section{border-bottom:1px solid var(--border-light)}
.sb-mod-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;font-family:var(--font);font-size:.91rem;font-weight:500;color:var(--text-muted);cursor:pointer;text-align:left;transition:all .15s}
.sb-mod-btn:hover{background:var(--border-light);color:var(--text)}
.sb-mod-btn .mod-icon{width:20px;text-align:center;color:var(--text-subtle);font-size:.83rem;flex-shrink:0}
.sb-mod-btn .mod-label{flex:1}
.sb-mod-btn .mod-arrow{font-size:.62rem;color:var(--text-subtle);transition:transform .2s}
.sb-section.open > .sb-mod-btn{color:var(--text)}
.sb-section.open > .sb-mod-btn .mod-icon{color:var(--blue)}
.sb-section.open > .sb-mod-btn .mod-arrow{transform:rotate(90deg)}
.sb-items{overflow:hidden;max-height:0;transition:max-height .25s ease;background:var(--bg)}
.sb-section.open .sb-items{max-height:1000px}
.sb-cat{padding:7px 12px 3px 42px;font-size:.72rem;font-weight:600;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
.sb-link{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 42px;font-size:.87rem;color:var(--text-muted);cursor:pointer;text-decoration:none!important;border-left:2px solid transparent;transition:all .13s}
.sb-link i{font-size:.78rem;width:13px;text-align:center;flex-shrink:0;color:var(--text-subtle)}
.sb-link:hover{background:var(--blue-light);color:var(--text)}
.sb-link.active{background:var(--active-bg);color:var(--active-text);border-left-color:var(--active-border);font-weight:500}
.sb-link.active i{color:var(--active-text)}
.sb-badge{margin-left:auto;font-size:.6rem;padding:1px 4px;border-radius:3px;font-weight:600}
.badge-h{}
.badge-m{}


/* MAIN */
.main-wrap{flex:1;min-width:0;display:flex}
.content{flex:1;min-width:0;padding:34px 42px 80px;max-width:850px}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.content > *{animation:fadeUp .24s ease both}
.content > *:nth-child(1){animation-delay:.04s}
.content > *:nth-child(2){animation-delay:.08s}
.content > *:nth-child(3){animation-delay:.12s}
.content > *:nth-child(4){animation-delay:.15s}
.content > *:nth-child(n+5){animation-delay:.18s}

.breadcrumb{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--text-subtle);margin-bottom:14px;font-weight:500}
.breadcrumb a{color:var(--text-subtle)}
.breadcrumb a:hover{color:var(--blue);text-decoration:none}
.breadcrumb i{font-size:.58rem}
.article-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
h1.article-title{font-size:1.65rem;font-weight:700;color:var(--text);line-height:1.25;letter-spacing:-.02em}
.copy-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border);font-size:.74rem;font-weight:500;color:var(--text-muted);cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:var(--font);transition:all .15s}
.copy-btn:hover{border-color:var(--blue);color:var(--blue)}
.article-meta{display:flex;align-items:center;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.meta-tag{display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:4px;font-size:.71rem;font-weight:500;background:var(--code-bg);color:var(--text-muted);border:1px solid var(--border)}
.meta-tag.beginner{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.meta-tag.prio-h{background:#fff1f2;color:#9f1239;border-color:#fecdd3}
[data-theme="dark"] .meta-tag.beginner{background:#052e1c;color:#34d399;border-color:#065535}
[data-theme="dark"] .meta-tag.prio-h{background:#2d0c14;color:#fb7185;border-color:#5c1526}
.article-body{font-size:.89rem}
.article-body p{margin-bottom:.85rem}
.article-body h2{font-size:1.1rem;font-weight:700;margin:1.9rem 0 .65rem;color:var(--text);padding-bottom:7px;border-bottom:1px solid var(--border)}
.article-body h3{font-size:.92rem;font-weight:600;margin:1.3rem 0 .45rem;color:var(--text)}
.article-body ul,.article-body ol{padding-left:1.4rem;margin-bottom:.85rem}
.article-body li{margin-bottom:.2rem}
.steps{display:flex;flex-direction:column;gap:9px;margin:.9rem 0}
.step{display:flex;gap:12px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 13px;transition:box-shadow .15s}
.step:hover{box-shadow:var(--shadow-sm)}
.step-num{width:23px;height:23px;border-radius:50%;background:var(--blue);color:white;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-title{font-weight:600;font-size:.84rem;margin-bottom:2px}
.step-desc{font-size:.81rem;color:var(--text-muted)}
.callout{display:flex;gap:10px;border-radius:var(--radius);padding:11px 13px;margin:.9rem 0;border:1px solid;font-size:.84rem}
.callout-tip{background:#f0fdf4;border-color:#bbf7d0}
.callout-warn{background:#fffbeb;border-color:#fde68a}
.callout-info{background:#eff6ff;border-color:#bfdbfe}
[data-theme="dark"] .callout-tip{background:#052e1c;border-color:#05593a}
[data-theme="dark"] .callout-warn{background:#2d2000;border-color:#5c4400}
[data-theme="dark"] .callout-info{background:#0c1e38;border-color:#1a3a6a}
.callout strong{display:block;margin-bottom:2px;font-size:.84rem}
.callout-tip strong{color:#065f46}
.callout-warn strong{color:#92400e}
.callout-info strong{color:#1e40af}
[data-theme="dark"] .callout-tip strong{color:#34d399}
[data-theme="dark"] .callout-warn strong{color:#fbbf24}
[data-theme="dark"] .callout-info strong{color:#60a5fa}
.callout i{margin-top:1px;font-size:.88rem;flex-shrink:0}
.callout-tip i{color:#22c55e}
.callout-warn i{color:#f59e0b}
.callout-info i{color:#3b82f6}
.code-block{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;font-family:var(--font-mono);font-size:.77rem;overflow-x:auto;margin:.7rem 0;line-height:1.6;color:var(--text-muted)}
.code-label{font-size:.65rem;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.img-ph{background:var(--code-bg);border:2px dashed var(--border);border-radius:var(--radius);height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--text-subtle);font-size:.78rem;margin:.9rem 0}
.img-ph i{font-size:1.7rem;opacity:.3}
.status-tbl{width:100%;border-collapse:collapse;margin:.75rem 0;font-size:.82rem}
.status-tbl th{text-align:left;padding:6px 11px;background:var(--code-bg);border:1px solid var(--border);font-weight:600;font-size:.76rem;color:var(--text-muted)}
.status-tbl td{padding:7px 11px;border:1px solid var(--border-light);vertical-align:top}
.status-tbl tr:nth-child(even) td{background:var(--border-light)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:3px;font-size:.74rem;font-weight:600}
.pill-y{background:#fef9c3;color:#854d0e}
.pill-b{background:#dbeafe;color:#1e40af}
.pill-g{background:#dcfce7;color:#166534}
.pill-r{background:#fee2e2;color:#991b1b}
.pill-x{background:var(--code-bg);color:var(--text-muted)}
[data-theme="dark"] .pill-y{background:#3d3200;color:#fcd34d}
[data-theme="dark"] .pill-b{background:#1e3a6a;color:#93c5fd}
[data-theme="dark"] .pill-g{background:#052e1c;color:#4ade80}
[data-theme="dark"] .pill-r{background:#3f1212;color:#fca5a5}
.feedback-bar{display:flex;align-items:center;gap:10px;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--border);font-size:.81rem;color:var(--text-muted)}
.fb-btn{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:.78rem;cursor:pointer;font-family:var(--font);transition:all .15s}
.fb-btn:hover{border-color:var(--blue);color:var(--blue)}
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:1.8rem}
.nav-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 13px;cursor:pointer;transition:all .15s;text-decoration:none!important}
.nav-card:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.nav-card.next{text-align:right}
.nav-dir{font-size:.67rem;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.nav-title{font-size:.83rem;font-weight:500;color:var(--text)}

/* TOC */
.toc{width:var(--toc-w);flex-shrink:0;padding:34px 12px 34px 4px;position:sticky;top:var(--navbar-h);height:calc(100vh - var(--navbar-h));overflow-y:auto}
.toc-title{font-size:.74rem;font-weight:700;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.toc-link{display:block;padding:4px 0 4px 10px;font-size:.84rem;color:var(--text-subtle);border-left:2px solid transparent;cursor:pointer;text-decoration:none!important;transition:all .13s;line-height:1.4}
.toc-link:hover{color:var(--text-muted)}
.toc-link.active{color:var(--active-text);border-left-color:var(--active-border);font-weight:500}
.toc-sub{padding-left:20px;font-size:.72rem}

[data-theme="dark"] 









/* SEARCH MODAL */
.modal-bg{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:65px}
.modal-bg.open{display:flex}
.search-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:540px;max-width:92vw;box-shadow:var(--shadow-md);overflow:hidden}
.sm-input{display:flex;align-items:center;gap:10px;padding:12px 13px;border-bottom:1px solid var(--border)}
.sm-input i{color:var(--text-subtle)}
.sm-input input{flex:1;background:none;border:none;outline:none;font-size:.9rem;font-family:var(--font);color:var(--text)}
.sm-results{padding:6px}
.sm-result{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius);cursor:pointer;transition:background .13s}
.sm-result:hover,.sm-result.sel{background:var(--active-bg)}
.sm-result i{color:var(--blue);font-size:.82rem;width:16px;text-align:center}
.sm-result-title{font-size:.83rem;font-weight:500}
.sm-result-mod{font-size:.71rem;color:var(--text-subtle)}
.sm-footer{padding:8px 13px;border-top:1px solid var(--border);font-size:.68rem;color:var(--text-subtle);display:flex;gap:14px}
.sm-footer kbd{font-family:var(--font-mono);background:var(--code-bg);padding:1px 5px;border-radius:3px;border:1px solid var(--border);font-size:.66rem}

@media(max-width:1100px){.toc{display:none}}
@media(max-width:768px){
  .sidebar{position:fixed;left:-100%;transition:left .25s;z-index:150}
  .sidebar.open{left:0}
  .content{padding:18px 14px 60px}
  .article-nav{grid-template-columns:1fr}
  h1.article-title{font-size:1.3rem}
}

/* ═══════════════════════════════════════════
   TOSCANA AI CHAT WIDGET
═══════════════════════════════════════════ */

/* Floating button */
.chat-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 1000;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); color: white;
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(26,115,200,.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 700; font-size: .95rem;
  transition: transform .2s, box-shadow .2s;
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(26,115,200,.55); }
.chat-fab .fab-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; letter-spacing: -.5px; }

/* Chat window */
.chat-window {
  position: fixed; bottom: 92px; right: 28px; z-index: 1000;
  width: 360px; max-height: 560px;
  background: var(--bg-white); border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(.92) translateY(12px);
  opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), opacity .18s ease;
}
.chat-window.open {
  transform: scale(1) translateY(0);
  opacity: 1; pointer-events: all;
}

/* Header */
.chat-header {
  background: #1a4f8a;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.chat-header-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .88rem; color: white;
  letter-spacing: -.5px; flex-shrink: 0;
}
.chat-header-info { flex: 1; }
.chat-header-name { font-weight: 700; color: white; font-size: .92rem; }
.chat-header-status { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.chat-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
.chat-header-status span { font-size: .73rem; color: rgba(255,255,255,.8); }
.chat-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none; cursor: pointer;
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; transition: background .15s;
}
.chat-close:hover { background: rgba(255,255,255,.25); }

/* Messages area */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  background: #f0f4f8;
}
[data-theme="dark"] .chat-messages { background: #111518; }
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Message bubbles */
.chat-msg { display: flex; gap: 8px; align-items: flex-end; }
.chat-msg.user { flex-direction: row-reverse; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: #1a4f8a; display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800; color: white; letter-spacing: -.3px;
  margin-bottom: 2px;
}
.msg-avatar img { width: 18px; height: 18px; }
.msg-bubble {
  max-width: 78%; padding: 9px 13px; border-radius: 14px;
  font-size: .83rem; line-height: 1.55; color: var(--text);
}
.chat-msg.bot .msg-bubble {
  background: white; border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] .chat-msg.bot .msg-bubble { background: var(--bg-white); }
.chat-msg.user .msg-bubble {
  background: var(--blue); color: white;
  border-bottom-right-radius: 4px;
}

/* Suggested questions */
.chat-suggestions {
  padding: 4px 16px 12px; flex-shrink: 0;
  background: #f0f4f8;
}
[data-theme="dark"] .chat-suggestions { background: #111518; }
.chat-suggestions-label {
  font-size: .71rem; color: #8a9ab0; margin-bottom: 7px; text-align: center;
}
.chat-suggestion-btn {
  display: block; width: 100%; text-align: left;
  background: white; border: 1px solid #d8e4f0;
  border-radius: 20px; padding: 8px 14px;
  font-size: .8rem; color: #1a4f8a; cursor: pointer;
  font-family: var(--font); margin-bottom: 6px;
  transition: background .13s, border-color .13s;
}
[data-theme="dark"] .chat-suggestion-btn { background: var(--bg-white); border-color: var(--border); color: var(--blue); }
.chat-suggestion-btn:hover { background: #e8f1fb; border-color: var(--blue); }
[data-theme="dark"] .chat-suggestion-btn:hover { background: var(--blue-soft); }

/* Input area */
.chat-input-area {
  padding: 12px 14px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-white); flex-shrink: 0;
}
.chat-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 8px 14px; font-size: .83rem;
  font-family: var(--font); color: var(--text); background: var(--bg);
  outline: none; transition: border-color .15s; resize: none;
}
.chat-input:focus { border-color: var(--blue); background: var(--bg-white); }
.chat-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); border: none; color: white;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; flex-shrink: 0; transition: background .15s, transform .15s;
}
.chat-send:hover { background: var(--blue-dark); transform: scale(1.05); }
.chat-send:disabled { background: var(--border); cursor: default; transform: none; }
.chat-footer-label {
  text-align: center; font-size: .67rem; color: var(--text-light);
  padding: 5px 0 8px; background: var(--bg-white); flex-shrink: 0;
}

/* Typing indicator */
.typing-dots { display: flex; gap: 4px; align-items: center; padding: 2px 0; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #b0bec8;
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

@media (max-width: 480px) {
  .chat-window { width: calc(100vw - 32px); right: 16px; bottom: 80px; }
  .chat-fab { right: 16px; bottom: 20px; }
}

/* ── ADMIN PANEL ─────────────────────────────── */
.admin-wrap { max-width: 900px; margin: 0 auto; padding: 34px 42px 80px; }
.admin-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; }
.admin-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.sql-textarea { width: 100%; min-height: 280px; font-family: var(--font-mono); font-size: .8rem; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; color: var(--text); resize: vertical; outline: none; line-height: 1.6; }
.sql-textarea:focus { border-color: var(--blue); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-size: .82rem; font-weight: 600; cursor: pointer; border: none; font-family: var(--font); transition: all .15s; }
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-secondary { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn-danger { background: #dc2626; color: white; }
.btn-danger:hover { background: #b91c1c; }
.result-box { border-radius: var(--radius); padding: 11px 13px; font-size: .82rem; margin-top: 12px; }
.result-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.result-error { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }
.result-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.history-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: .78rem; }
.history-item:last-child { border-bottom: none; }
.history-ts { color: var(--text-subtle); flex-shrink: 0; font-family: var(--font-mono); font-size: .72rem; }
.history-status { flex-shrink: 0; }
.badge-success { color: #065f46; background: #ecfdf5; padding: 1px 7px; border-radius: 3px; font-weight: 600; }
.badge-error { color: #9f1239; background: #fff1f2; padding: 1px 7px; border-radius: 3px; font-weight: 600; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; width: 360px; box-shadow: var(--shadow-md); }
.login-card h1 { font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.login-card p { color: var(--text-muted); font-size: .83rem; margin-bottom: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.form-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: .85rem; font-family: var(--font); color: var(--text); background: var(--bg); outline: none; transition: border-color .15s; }
.form-input:focus { border-color: var(--blue); background: var(--bg-card); }
.page-label { font-size: .68rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.meta-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px; font-size: .71rem; font-weight: 500; background: var(--code-bg); color: var(--text-muted); border: 1px solid var(--border); }
.meta-badge.blue { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.meta-badge.beginner { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.feedback-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: .78rem; cursor: pointer; font-family: var(--font); transition: all .15s; }
.feedback-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Logo invert za dark mode */
[data-theme="dark"] .navbar-logo img {
  filter: invert(1) brightness(2);
}

/* Logo dark mode */
[data-theme="dark"] .logo-img {
  filter: invert(1) brightness(2);
}