:root {
  --primary: #2563EB;
  --primary-light: #EFF6FF;
  --primary-hover: #1D4ED8;
  --gold: #E8B931;
  --bg: #F8F8FA;
  --card: #fff;
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  --text: #111827;
  --text2: #6B7280;
  --text3: #9CA3AF;
  --green: #059669;
  --green-light: #ECFDF5;
  --green-border: #A7F3D0;
  --red: #DC2626;
  --red-light: #FEF2F2;
  --red-border: #FECACA;
  --blue: #2563EB;
  --blue-light: #EFF6FF;
  --yellow: #D97706;
  --yellow-light: #FFFBEB;
  --yellow-border: #FDE68A;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif; background:var(--bg); color:var(--text); display:flex; min-height:100vh; font-size:14px; }

/* ===== SIDEBAR ===== */
.sidebar { width:230px; background:var(--card); border-right:1px solid var(--border); position:fixed; height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.sidebar-logo { padding:20px; font-size:20px; font-weight:800; border-bottom:1px solid var(--border); }
.sidebar-logo span { color:var(--gold); }
.sidebar-nav { flex:1; padding:8px 0; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 20px; cursor:pointer; color:var(--text2); font-size:14px; border-left:3px solid transparent; transition:all .15s; text-decoration:none; }
.nav-item:hover { background:var(--bg); color:var(--text); }
.nav-item.active { background:var(--primary-light); color:var(--primary); border-left-color:var(--primary); font-weight:600; }
.nav-item .icon { font-size:18px; width:24px; text-align:center; }
.sidebar-footer { padding:16px 20px; border-top:1px solid var(--border); font-size:12px; color:var(--text2); }

/* ===== LAYOUT ===== */
#appShell { display:flex; width:100%; min-height:100vh; }
.main { margin-left:230px; flex:1; padding:28px 32px; min-width:0; box-sizing:border-box; }
.page-header { margin-bottom:24px; }
.page-header h1 { font-size:22px; font-weight:700; margin-bottom:2px; }
.page-header .subtitle { color:var(--text2); font-size:13px; }

/* ===== CARDS ===== */
.card { background:var(--card); border-radius:var(--radius-lg); padding:24px; margin-bottom:16px; border:1px solid var(--border); }
.card-title { font-size:15px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

/* ===== STATS ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--card); border-radius:var(--radius); padding:18px; border:1px solid var(--border); }
.stat-card .num { font-size:26px; font-weight:700; color:var(--primary); }
.stat-card .label { color:var(--text2); font-size:12px; margin-top:4px; }

/* ===== FORMS ===== */
.form-row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px; }
.form-group { flex:1; min-width:150px; }
.form-group label { display:block; font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.form-group input, .form-group select { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; background:#fff; transition:border .15s,box-shadow .15s; }
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.08); }

/* ===== BUTTONS (outlined style like screenshot) ===== */
.btn { padding:8px 18px; border:1.5px solid var(--border); border-radius:20px; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--text); }
.btn:hover { background:var(--bg); }

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

.btn-secondary { background:#fff; color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background:var(--bg); border-color:var(--text3); }

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

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

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

.btn-sm { padding:5px 12px; font-size:12px; border-radius:16px; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:12px; }

/* ===== TABLES ===== */
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; padding:8px 12px; border-bottom:1px solid var(--border); }
td { padding:10px 12px; border-bottom:1px solid var(--border-light); font-size:14px; }
tr:hover { background:var(--bg); }

/* ===== BADGES ===== */
.avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; }
.avatar.admin { background:var(--primary); }
.avatar.doctor { background:var(--blue); }
.avatar.staff { background:var(--green); }
.avatar.patient { background:var(--yellow); }

.badge { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; display:inline-block; }
.badge.admin { background:var(--primary-light); color:var(--primary); }
.badge.doctor { background:var(--blue-light); color:var(--blue); }
.badge.staff { background:var(--green-light); color:var(--green); }
.badge.patient { background:var(--yellow-light); color:var(--yellow); }
.badge.protocol { background:var(--yellow-light); color:var(--yellow); }
.badge.materials { background:var(--blue-light); color:var(--blue); }
.badge.procedures { background:var(--green-light); color:var(--green); }
.badge.prices { background:var(--red-light); color:var(--red); }
.badge.general { background:var(--bg); color:var(--text2); }

/* Status badges */
.status-badge { padding:4px 12px; border-radius:16px; font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.status-badge.active, .status-badge.in_kb { background:var(--green-light); color:var(--green); border:1px solid var(--green-border); }
.status-badge.analyzed { background:var(--blue-light); color:var(--blue); border:1px solid #BFDBFE; }
.status-badge.uploaded { background:var(--yellow-light); color:var(--yellow); border:1px solid var(--yellow-border); }

/* ===== KEY DISPLAY ===== */
.key-display { background:var(--primary-light); padding:4px 10px; border-radius:var(--radius-sm); color:var(--primary); font-weight:700; font-family:monospace; font-size:13px; cursor:pointer; display:inline-block; transition:all .15s; }
.key-display:hover { background:var(--primary); color:#fff; }

/* ===== MESSAGES ===== */
.msg { padding:10px 16px; border-radius:var(--radius); font-size:13px; }
.msg.ok { background:var(--green-light); color:var(--green); border:1px solid var(--green-border); }
.msg.err { background:var(--red-light); color:var(--red); border:1px solid var(--red-border); }
.msg.warn { background:var(--yellow-light); color:var(--yellow); border:1px solid var(--yellow-border); }

/* ===== UPLOAD ZONE ===== */
.upload-zone { border:2px dashed #D1D5DB; border-radius:var(--radius); padding:40px; text-align:center; cursor:pointer; transition:all .2s; }
.upload-zone:hover, .upload-zone.drag { border-color:var(--primary); background:var(--primary-light); }
.uz-icon { font-size:40px; margin-bottom:8px; }
.uz-title { font-size:15px; font-weight:600; margin-bottom:4px; }
.uz-hint { color:var(--text2); font-size:13px; }

/* ===== CHAT ===== */
.chat-box { border:1px solid var(--border); border-radius:var(--radius-lg); height:420px; display:flex; flex-direction:column; overflow:hidden; }
.chat-msgs { flex:1; overflow-y:auto; padding:16px; }
.chat-msg { margin-bottom:12px; max-width:80%; }
.chat-msg.user { margin-left:auto; text-align:right; }
.chat-bubble { display:inline-block; padding:10px 14px; border-radius:var(--radius); font-size:14px; line-height:1.5; white-space:pre-wrap; }
.chat-msg.user .chat-bubble { background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.chat-msg.bot .chat-bubble { background:var(--bg); color:var(--text); border-bottom-left-radius:4px; }
.chat-input { display:flex; padding:12px; border-top:1px solid var(--border); gap:8px; }
.chat-input input { flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:20px; font-size:14px; }
.chat-input button { padding:10px 20px; background:var(--primary); color:#fff; border:none; border-radius:20px; font-weight:600; cursor:pointer; }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; padding:12px 24px; border-radius:20px; font-size:14px; font-weight:500; z-index:9999; opacity:0; transition:opacity .3s; pointer-events:none; }
.toast.show { opacity:1; }

/* ===== MODAL ===== */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:9998; display:none; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:var(--radius-lg); padding:28px; max-width:480px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.12); }
.modal h3 { margin-bottom:16px; font-size:17px; }
.modal .invite-text { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px; font-size:13px; line-height:1.7; white-space:pre-wrap; margin-bottom:16px; }
.modal .btn-row { display:flex; gap:8px; justify-content:flex-end; }

/* ===== LINKS ===== */
.links { display:flex; gap:16px; margin-top:16px; }
.links a { color:var(--primary); text-decoration:none; font-size:13px; font-weight:500; display:flex; align-items:center; gap:4px; }
.links a:hover { text-decoration:underline; }

/* User action buttons */
.u-act{font-size:12px;font-weight:500;padding:5px 12px;border-radius:8px;border:1.5px solid;cursor:pointer;background:#fff;transition:all .15s ease;white-space:nowrap}
.u-act:hover{opacity:.85}
.u-act--green{color:#34a853;border-color:#34a853}.u-act--green:hover{background:#34a8530d}
.u-act--orange{color:#e8590c;border-color:#e8590c}.u-act--orange:hover{background:#e8590c0d}
.u-act--purple{color:#5856d6;border-color:#5856d6}.u-act--purple:hover{background:#5856d60d}
.u-act--red{color:#ff3b30;border-color:#ff3b30}.u-act--red:hover{background:#ff3b300d}

/* User action buttons */
.u-act{font-size:12px;font-weight:500;padding:5px 12px;border-radius:8px;border:1.5px solid;cursor:pointer;background:#fff;transition:all .15s ease;white-space:nowrap}
.u-act:hover{opacity:.85}
.u-act--green{color:#34a853;border-color:#34a853}.u-act--green:hover{background:#34a8530d}
.u-act--orange{color:#e8590c;border-color:#e8590c}.u-act--orange:hover{background:#e8590c0d}
.u-act--purple{color:#5856d6;border-color:#5856d6}.u-act--purple:hover{background:#5856d60d}
.u-act--red{color:#ff3b30;border-color:#ff3b30}.u-act--red:hover{background:#ff3b300d}

/* Mini stat cards */
.stat-mini{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 24px;display:flex;flex-direction:column;align-items:center;min-width:100px}
.stat-mini .stat-val{font-size:24px;font-weight:700;color:var(--text)}
.stat-mini .stat-lbl{font-size:11px;color:var(--text2);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

/* Collapsible nav */
.nav-group { }
.nav-parent { display:flex; align-items:center; cursor:pointer; }
.nav-parent .nav-arrow { margin-left:auto; font-size:10px; transition:transform .2s; color:var(--text2); }
.nav-parent.open .nav-arrow { transform:rotate(90deg); }
.nav-children { padding-left:20px; overflow:hidden; }
.nav-child { font-size:13px !important; padding:8px 12px !important; }