:root {
  --bg: #0e1318;
  --bg-grad: radial-gradient(1100px 560px at 82% -12%, #18232f 0%, rgba(14,19,24,0) 60%),
             radial-gradient(900px 500px at 0% 0%, #131c26 0%, rgba(14,19,24,0) 55%);
  --panel: #1a212b;
  --panel-2: #222b37;
  --border: #2c3645;
  --border-soft: #232c39;
  --text: #e6edf3;
  --muted: #8b97a7;
  --accent: #4c8dff;
  --accent-soft: rgba(76,141,255,.13);
  --ok: #3fb950;
  --warn: #d29922;
  --crit: #f85149;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #313c4b; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3e4a5c; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
h1, h2, h3 { font-weight: 600; margin: 0; }
button {
  font: inherit; cursor: pointer; border: none; border-radius: 8px;
  background: var(--accent); color: white; padding: 7px 14px;
}
button:hover { filter: brightness(1.1); }
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
button:disabled { opacity: .4; cursor: not-allowed; }
input, select {
  font: inherit; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 7px 10px;
}

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 32px; width: 340px; display: flex; flex-direction: column; gap: 12px;
}
.login-card h1 { font-size: 22px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.login-card button { margin-top: 6px; padding: 10px; }
.error { color: var(--crit); font-size: 13px; min-height: 16px; }
.hint { font-size: 12px; text-align: center; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: rgba(20,26,34,.82); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); }
.brand { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.off { background: var(--crit); }
.who { display: flex; align-items: center; gap: 8px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border); text-transform: uppercase; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 16px 20px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.stat:hover { border-color: var(--accent); transform: translateY(-1px); }
.stat .v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.stat .l { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* Grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 20px 28px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; min-width: 0; box-shadow: var(--shadow); transition: box-shadow .18s, border-color .18s; }
.panel:hover { box-shadow: var(--shadow-lg); border-color: #364254; }
.panel.span2 { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.panel-head h2 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel-head h2::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--accent); flex: none; }

/* Tiles — grouped by kind */
.tiles { display: flex; flex-direction: column; gap: 18px; }
.tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.kind-header { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.kind-ic { font-size: 15px; }
.kind-label { font-weight: 600; font-size: 14px; }
.kind-count { font-size: 11px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; color: var(--muted); }
.kind-stat { margin-left: auto; font-size: 12px; color: var(--ok); }
.kind-stat.warn { color: var(--warn); }
.kind-stat.muted { color: var(--muted); }
.tile.inv { opacity: .75; }
.tile.inv .inv-meta { font-size: 12px; color: var(--muted); margin-top: 8px; font-family: ui-monospace, Menlo, monospace; }
.tile.inv .inv-tag { font-size: 11px; color: var(--muted); margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 6px; }
.tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: border-color .15s; }
.tile:hover, .tile.sel { border-color: var(--accent); }
.tile .t-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.tile .name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .kind { font-size: 10px; color: var(--muted); margin-left: auto; text-transform: uppercase; }
.bar { height: 6px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: 3px 0 8px; }
.bar > span { display: block; height: 100%; background: var(--accent); transition: width .4s, background .4s; }
.bar.high > span { background: var(--warn); }
.bar.crit > span { background: var(--crit); }
.metric-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.tile.down { opacity: .55; }

/* Alerts */
.alerts { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.alert-item { border-left: 3px solid var(--warn); background: var(--panel-2); padding: 9px 12px; border-radius: 0 8px 8px 0; }
.alert-item.critical { border-color: var(--crit); }
.alert-item .a-msg { font-size: 13px; }
.alert-item .a-time { font-size: 11px; color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; padding: 10px 0; }

/* VMs */
.vms { display: flex; flex-direction: column; gap: 8px; }
.vm-item { display: flex; align-items: center; gap: 10px; background: var(--panel-2); padding: 9px 12px; border-radius: 8px; }
.vm-item .vm-name { font-weight: 600; font-size: 13px; }
.vm-item .vm-guest { font-size: 11px; color: var(--muted); }
.vm-item .pwr { margin-left: auto; display: flex; gap: 6px; }
.pwr button { padding: 5px 10px; font-size: 12px; }
.state { font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.state.poweredOn { background: rgba(63,185,80,.15); color: var(--ok); }
.state.poweredOff { background: rgba(248,81,73,.12); color: var(--crit); }

/* VM metrics */
.vm-item .vm-info { min-width: 0; }
.vm-metrics { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* vSphere panel */
.vs-host { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.vs-host-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.vs-host-head .muted { font-size: 12px; }
.vs-alarms { margin-top: 8px; }
.vs-alarm { font-size: 12px; color: var(--crit); padding: 4px 0; }
.vs-sensor { font-size: 12px; color: var(--warn); padding: 2px 0; }
.ds-row { display: grid; grid-template-columns: 130px 1fr 150px; align-items: center; gap: 10px; font-size: 12px; padding: 4px 0; }
.ds-row .ds-name { color: var(--text); }
.ds-row .bar { margin: 0; }
.raid-pill { display: inline-block; font-size: 11px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; }
.raid-row { margin-top: 4px; }
.proc-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.proc { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--border-soft); }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: rgba(76,141,255,.06); }
.router-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.router-cols h3 { font-size: 13px; margin-bottom: 8px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inline-form input { width: 92px; }
.inline-form input[name="name"], .inline-form input[name="hostname"], .inline-form input[name="int_ip"], .inline-form input[name="mac"] { width: 120px; }
.del { background: transparent; color: var(--crit); border: 1px solid var(--border); padding: 3px 8px; font-size: 12px; }

/* Audit */
.audit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; max-height: 220px; overflow-y: auto; }
.audit .row { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.audit .a-act { color: var(--accent); min-width: 160px; }
.audit .a-fail { color: var(--crit); }

/* Detail modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal.hidden { display: none; }
.modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; width: min(620px, 92vw); max-height: 86vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
.d-icon { font-size: 22px; }
.d-name { font-weight: 600; font-size: 16px; }
.d-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal-head button { margin-left: auto; }
.modal-body { padding: 16px 18px; }
.d-grid { display: grid; grid-template-columns: 92px 1fr; gap: 9px 14px; font-size: 13px; margin-bottom: 4px; }
.d-grid .k { color: var(--muted); }
.d-grid .v { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.d-sec-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; }
.d-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.d-table th, .d-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.d-table th { color: var(--muted); font-weight: 500; font-size: 11px; }
.d-empty { color: var(--muted); font-size: 13px; }
.gpu-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.statepill { font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.statepill.up { background: rgba(63,185,80,.15); color: var(--ok); }
.statepill.down { background: rgba(248,81,73,.14); color: var(--crit); }
.statepill.inv { background: var(--panel-2); color: var(--muted); }

/* Settings groups */
.set-group { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; background: var(--panel-2); }
.set-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.set-test { font-size: 12px; margin-left: auto; }
.set-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.set-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.set-fields input, .set-fields select { width: 100%; }
.set-actions { display: flex; gap: 8px; margin-top: 12px; }
.tgt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tgt-connect { display: inline-flex; gap: 6px; }
.tgt-connect input { width: 130px; }
.tgt-connect button { padding: 5px 10px; font-size: 12px; }

/* Toasts */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 50; }
.toast { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: 8px; padding: 12px 14px; min-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: slidein .2s ease; }
.toast.critical { border-left-color: var(--crit); }
.toast.resolved { border-left-color: var(--ok); }
.toast.info { border-left-color: var(--accent); }
.toast .t-title { font-weight: 600; font-size: 13px; }
.toast .t-body { font-size: 12px; color: var(--muted); margin-top: 2px; }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ---- tabs ---- */
.tabs { display: flex; gap: 8px; padding: 12px 20px 4px; flex-wrap: wrap; }
.tab {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  padding: 8px 16px; border-radius: 10px; font-size: 14px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.tab:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; box-shadow: 0 4px 14px rgba(76,141,255,.38); }

/* show only the active tab's panels (data-driven .hidden still wins via !important) */
#app[data-tab="overview"] .grid > section[data-tab]:not([data-tab="overview"]),
#app[data-tab="infra"]    .grid > section[data-tab]:not([data-tab="infra"]),
#app[data-tab="network"]  .grid > section[data-tab]:not([data-tab="network"]),
#app[data-tab="adblock"]  .grid > section[data-tab]:not([data-tab="adblock"]),
#app[data-tab="security"] .grid > section[data-tab]:not([data-tab="security"]),
#app[data-tab="mail"]     .grid > section[data-tab]:not([data-tab="mail"]),
#app[data-tab="calendar"] .grid > section[data-tab]:not([data-tab="calendar"]),
#app[data-tab="contacts"] .grid > section[data-tab]:not([data-tab="contacts"]),
#app[data-tab="media"]    .grid > section[data-tab]:not([data-tab="media"]),
#app[data-tab="llm"]      .grid > section[data-tab]:not([data-tab="llm"]),
#app[data-tab="notes"]    .grid > section[data-tab]:not([data-tab="notes"]),
#app[data-tab="messages"] .grid > section[data-tab]:not([data-tab="messages"]),
#app[data-tab="aiws"]     .grid > section[data-tab]:not([data-tab="aiws"]),
#app[data-tab="sysanalysis"] .grid > section[data-tab]:not([data-tab="sysanalysis"]),
#app[data-tab="alertmgmt"] .grid > section[data-tab]:not([data-tab="alertmgmt"]) {
  /* NOTE: every tab needs its own line here — a missing entry means clicking that
     tab hides nothing, so all panels show at once and the view never switches. */
  display: none !important;
}

/* ---- AI-only portal (ai.zing.kr): single AI-workspace panel, full width ---- */
body.ai-only .grid { grid-template-columns: 1fr; }
body.ai-only #aiws-panel { min-height: calc(100vh - 120px); }

/* ---- 시스템 분석 (per-system analysis) ---- */
.sysanalysis { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
@media (max-width: 820px) { .sysanalysis { grid-template-columns: 1fr; } }
.sys-list { display: flex; flex-direction: column; gap: 4px; }
.sys-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.sys-row:hover { border-color: var(--accent); }
.sys-row.sel { border-color: var(--accent); background: var(--accent-soft); }
.sys-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sys-dot.ok { background: #37d67a; } .sys-dot.warn { background: #f5a623; } .sys-dot.bad { background: #f2545b; }
.sys-name { font-weight: 600; color: var(--text); }
.sys-badges { margin-left: auto; display: flex; gap: 4px; }
.sys-badge { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border-soft); color: var(--muted); }
.sys-badge.warn { color: #f5a623; }
.sys-detail { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px; min-height: 220px; }
.sys-detail-head { font-size: 16px; margin-bottom: 12px; }
.sys-sec { margin-bottom: 14px; }
.sys-sec-t { font-weight: 600; color: var(--text); margin-bottom: 6px; border-bottom: 1px solid var(--border-soft); padding-bottom: 4px; }
.sys-kv { font-size: 13px; color: var(--text); margin: 3px 0; }
.sys-doc { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.sys-doc-h { font-weight: 600; margin-bottom: 4px; }
.sys-doc-b { font-size: 13px; color: var(--text); line-height: 1.55; }
.sys-doc-b h3, .sys-doc-b h4 { font-size: 13px; margin: 6px 0 2px; color: var(--accent); }
.sys-report { margin-top: 10px; }
.sys-report-body { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--text); white-space: normal; }
.sys-report-body h3, .sys-report-body h4 { font-size: 13px; margin: 8px 0 3px; color: var(--accent); }

/* ---- AI / LLM nodes ---- */
.llm-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.llm-node { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.llm-node-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.llm-node-name { font-weight: 600; font-size: 14px; }
.llm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.llm-dot.online { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.llm-dot.offline { background: var(--crit); }
.llm-node-meta { font-size: 12px; color: var(--muted); }
.llm-models { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.llm-mchip { font-size: 11px; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.llm-mchip.loaded { border-color: var(--ok); color: var(--ok); }
.llm-run { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.llm-run-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.llm-run-row select { min-width: 200px; }
.llm-result { white-space: pre-wrap; word-break: break-word; margin-top: 10px; font-size: 13px; line-height: 1.6; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px; max-height: 340px; overflow: auto; min-height: 20px; }

/* ---- media library ---- */
.media-filter { background: var(--panel); border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 20px; font-size: 13px; cursor: pointer; margin-right: 6px; }
.media-filter:hover { color: var(--text); border-color: var(--accent); }
.media-filter.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.filter-bar .pill { background: var(--panel); border: 1px solid var(--border); color: var(--muted); padding: 5px 11px; border-radius: 20px; font-size: 12px; cursor: pointer; }
.filter-bar .pill:hover { color: var(--text); border-color: var(--accent); }
.filter-bar .pill.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-bar input { margin-left: auto; background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 5px 10px; border-radius: 8px; font-size: 12px; min-width: 180px; }
.dest-detail td { background: var(--panel-2); }
.statepill.warn { background: rgba(210,153,34,.18); color: #d29922; }
.watch-mgr { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.watch-head { font-size: 13px; margin-bottom: 8px; }
.watch-chip { display: inline-block; background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; padding: 3px 10px; font-size: 12px; margin: 0 4px 4px 0; }
.watch-chip a { color: var(--crit); text-decoration: none; margin-left: 4px; }
.watch-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.watch-add select, .watch-add input { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 8px; font-size: 12px; }
.watch-add input { min-width: 160px; }
.host-admin { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 4px; }
.host-admin label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.host-admin label.ha-chk { flex-direction: row; align-items: center; gap: 6px; }
.host-admin input[type=text], .host-admin select { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 8px; font-size: 13px; }
.host-admin-actions { display: flex; gap: 8px; margin-left: auto; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.media-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; }
.media-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.media-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-meta { padding: 8px 10px; min-width: 0; }
.media-mname { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-msize { font-size: 11px; color: var(--muted); margin-top: 2px; }
.media-empty { color: var(--muted); font-size: 13px; padding: 24px; text-align: center; grid-column: 1 / -1; }
.media-srcbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.media-srcs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.media-src-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; font-size: 12px; }
.media-src-chip a { cursor: pointer; }
.media-view { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 8px; }
.media-view img, .media-view video { max-width: 100%; max-height: 70vh; border-radius: 8px; }
.media-view audio { width: 100%; }

/* ---- adblock panel ---- */
.ab-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ab-stat { flex: 1; min-width: 120px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 15px; }
.ab-stat .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ab-stat .l { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ab-stat.accent { border-color: rgba(76,141,255,.5); background: var(--accent-soft); }
.ab-stat.accent .v { color: var(--accent); }
.ab-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ab-search { flex: 1; min-width: 220px; }
.ab-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 340px; overflow-y: auto; padding: 10px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; }
.ab-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.ab-chip .x { cursor: pointer; color: var(--crit); font-weight: 700; line-height: 1; }
.ab-chip .x:hover { filter: brightness(1.25); }
.ab-more { color: var(--muted); font-size: 12px; padding: 8px 4px; width: 100%; }
.ab-empty { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; width: 100%; }

/* ---- mail reading / compose (large, content-filling pane) ---- */
.mail-card { width: min(1100px, 96vw); height: 88vh; max-height: 94vh; overflow: hidden; display: flex; flex-direction: column; }
.mail-card .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
#mm-subject { white-space: normal; line-height: 1.3; }
.mail-body { font-size: 14px; line-height: 1.6; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mail-body iframe { width: 100%; flex: 1 1 auto; min-height: 440px; border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; }
.mail-body pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; flex: 1 1 auto; overflow: auto; }
.mail-actions { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--panel); flex: none; }
.cp-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 10px; flex: none; }
.cp-row input { flex: 1; }
.cp-body { width: 100%; flex: 1 1 auto; min-height: 280px; font: inherit; line-height: 1.6; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 11px 12px; resize: vertical; }
.cp-body:focus, .cp-row input:focus { outline: none; border-color: var(--accent); }

/* ---- calendar ---- */
.cal-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-month { font-size: 16px; font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.cal-dow { background: var(--panel-2); text-align: center; padding: 7px 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-cell { background: var(--panel); min-height: 96px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: background .12s; }
.cal-cell:hover { background: var(--panel-2); }
.cal-cell.other { opacity: .4; }
.cal-daynum { font-size: 12px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.cal-cell.today .cal-daynum { background: var(--accent); color: #fff; border-radius: 50%; font-weight: 700; }
.cal-ev { font-size: 11px; background: var(--accent-soft); color: var(--text); border-left: 3px solid var(--accent); border-radius: 3px; padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cal-ev:hover { filter: brightness(1.25); }
.cal-ev.rem { border-left-color: var(--warn); }
.cal-agenda-item { display: flex; gap: 12px; align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.cal-agenda-when { color: var(--accent); min-width: 150px; font-variant-numeric: tabular-nums; }
.cal-agenda-empty { color: var(--muted); font-size: 13px; padding: 12px 4px; }
.vip-star { color: var(--warn); }
@media (max-width: 700px) { .cal-cell { min-height: 64px; } .cal-agenda-when { min-width: 110px; } }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .router-cols { grid-template-columns: 1fr; }
}

/* ---------- 메모 (Apple Notes) ---------- */
.notes-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .notes-wrap { grid-template-columns: 1fr; } }
.notes-list { max-height: 620px; overflow-y: auto; border: 1px solid var(--border-soft);
  border-radius: var(--radius); background: var(--panel-2); }
.note-item { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.note-item:last-child { border-bottom: 0; }
.note-item:hover { background: var(--accent-soft); }
.note-item.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.note-item-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item-meta { color: var(--muted); font-size: 11px; margin: 2px 0; }
.note-item-snip { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-view { min-height: 260px; padding: 16px 18px; border: 1px solid var(--border-soft);
  border-radius: var(--radius); background: var(--panel-2); }
.note-view-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.note-view-head h3 { margin: 0; font-size: 17px; }
.note-view-meta { margin: 4px 0 12px; }
.note-view-body { white-space: pre-wrap; word-break: break-word; line-height: 1.55; font-size: 14px; }
/* ---------- 알람관리 ---------- */
#alertmgmt-table tr.pol-muted td:first-child { opacity: .5; text-decoration: line-through; }
#alertmgmt-table select { background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }

/* ---------- 메시지 (iMessage/SMS) ---------- */
.msg-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .msg-wrap { grid-template-columns: 1fr; } }
.chat-list { max-height: 620px; overflow-y: auto; border: 1px solid var(--border-soft);
  border-radius: var(--radius); background: var(--panel-2); }
.chat-item { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.chat-item:last-child { border-bottom: 0; }
.chat-item:hover { background: var(--accent-soft); }
.chat-item.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.chat-item-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-last { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-item-date { color: var(--muted); font-size: 11px; margin-top: 2px; }
.chat-view { display: flex; flex-direction: column; min-height: 420px; }
.chat-thread { flex: 1; max-height: 560px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--panel-2); }
.bubble { max-width: 76%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.bubble.them { align-self: flex-start; background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bubble-meta { font-size: 10px; color: var(--muted); margin-top: 3px; }
.bubble.me .bubble-meta { color: rgba(255,255,255,.75); text-align: right; }
.chat-compose { display: flex; gap: 8px; margin-top: 10px; }
.chat-compose textarea { flex: 1; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; resize: vertical; font: inherit; }

/* ---------- WireGuard 연결 모달 ---------- */
.wg-result { margin-top: 14px; }
.btn-like { display: inline-block; text-decoration: none; font: inherit; cursor: pointer;
  border-radius: 8px; background: var(--accent); color: #fff; padding: 7px 14px; }
.btn-like:hover { filter: brightness(1.1); }
.wg-conf { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; font: 12px ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all;
  color: var(--text); margin-top: 6px; max-height: 220px; overflow: auto; }

/* ---------- AI 실행: 이미지 첨부 + 생각과정 ---------- */
.llm-img-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.llm-thumb { position: relative; display: inline-block; }
.llm-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.llm-thumb button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  background: var(--crit); color: #fff; font-size: 12px; line-height: 20px; border: 2px solid var(--panel); }
.llm-think { margin: 0 0 10px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 12px; }
.llm-think summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.llm-think > div { margin-top: 8px; white-space: pre-wrap; color: var(--muted); font-size: 13px; line-height: 1.5; border-top: 1px dashed var(--border); padding-top: 8px; }
.llm-answer { white-space: pre-wrap; line-height: 1.55; }
.llm-sources { margin-top: 12px; }
.llm-src { font-size: 12px; margin: 3px 0; }
.llm-src a { color: var(--accent); text-decoration: none; }
.llm-src a:hover { text-decoration: underline; }

/* ---------- AI 작업 워크스페이스 ---------- */
.aiws { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 820px) { .aiws { grid-template-columns: 1fr; } }
.aiws-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aiws-side { max-height: 420px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--panel-2); padding: 10px; font-size: 13px; }
.aiws-side-proj { font-weight: 600; color: var(--text); padding: 2px 2px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; word-break: break-all; }
.aiws-side-t { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); margin: 12px 0 6px; }
.aiws-side-t .sp { margin-left: auto; display: flex; gap: 4px; }
.aiws-side-t button { background: transparent; border: 1px solid var(--border-soft); color: var(--muted); border-radius: 6px; padding: 2px 7px; font-size: 12px; cursor: pointer; }
.aiws-side-t button:hover { color: var(--accent); border-color: var(--accent); }
.ws-file { display: flex; align-items: center; gap: 6px; padding: 4px 4px; border-radius: 6px; }
.ws-file:hover { background: var(--panel); }
.ws-file .fn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ws-file .fn:hover { color: var(--accent); text-decoration: underline; }
.ws-file .fsz { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ws-file .ws-act { color: var(--muted); border: 0; background: transparent; cursor: pointer; font-size: 12px; padding: 0 2px; }
.ws-file .ws-act:hover { color: var(--accent); }
.ws-file .del { color: var(--muted); border: 0; background: transparent; cursor: pointer; font-size: 12px; }
.ws-file .del:hover { color: var(--danger, #f2545b); }
.ws-empty { color: var(--muted); font-size: 12px; padding: 6px 2px; }
.skill { display: flex; align-items: center; gap: 6px; padding: 4px 4px; font-size: 12px; }
.skill .sk-label { flex: 1; }
.skill .sk-ext { color: var(--muted); font-size: 11px; }
.skill .sk-on { color: #37d67a; } .skill .sk-off { color: var(--muted); }
.skill button { background: transparent; border: 1px solid var(--border-soft); color: var(--muted); border-radius: 6px; padding: 1px 6px; font-size: 11px; cursor: pointer; }
.skill button:hover { color: var(--accent); border-color: var(--accent); }
.aiws-tree { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--panel-2); padding: 8px; }
.aiws-proj { margin-bottom: 6px; }
.aiws-proj-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 6px 4px; }
.aiws-proj-head .p-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.aiws-proj-head button, .aiws-sec-head button { background: transparent; border: 0; color: var(--muted); padding: 2px 4px; font-size: 12px; cursor: pointer; }
.aiws-proj-head button:hover, .aiws-sec-head button:hover { color: var(--accent); }
.aiws-sec-head { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); padding: 3px 4px 3px 12px; }
.aiws-conv { display: flex; align-items: center; gap: 4px; font-size: 13px; padding: 5px 6px 5px 20px; border-radius: 6px; cursor: pointer; }
.aiws-conv:hover { background: var(--accent-soft); }
.aiws-conv.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.aiws-conv .c-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiws-conv .del { color: var(--muted); background: transparent; border: 0; padding: 0 4px; }
.aiws-main { display: flex; flex-direction: column; min-height: 460px; }
.aiws-conv-head { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.aiws-messages { flex: 1; max-height: 520px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 12px; }
.aiws-msg { max-width: 88%; }
.aiws-msg.user { align-self: flex-end; background: var(--accent); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; }
.aiws-msg.assistant { align-self: flex-start; width: 100%; }
.aiws-composer { border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 6px; }
.aiws-composer textarea { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; resize: vertical; font: inherit; }
.aiws-composer-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.fld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.fld input, .fld select, .fld textarea { color: var(--text); }
.aiproj-mcp { display: flex; flex-direction: column; gap: 6px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px; }
.mcp-chk { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 13px; }
.mcp-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.mcp-badge { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border-soft); color: var(--muted); white-space: nowrap; }
.mcp-badge.http { color: #4c8dff; border-color: #4c8dff55; }
.mcp-row.off { opacity: .5; }
.mcp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mcp-card { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.mcp-card:not(.added):hover { border-color: var(--accent); }
.mcp-card.added { opacity: .55; cursor: default; }
.mcp-card .mcp-badge { align-self: flex-start; }
.wf-stage { border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: var(--panel-2); }
.wf-head { margin-bottom: 4px; font-size: 13px; }
.wf-body { font-size: 12px; color: var(--muted); white-space: pre-wrap; max-height: 220px; overflow-y: auto; }
.wf-badge { font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.wf-badge.ok { background: rgba(55, 214, 122, .15); color: #37d67a; }
.wf-badge.no { background: rgba(245, 166, 35, .15); color: #f5a623; }
.aiproj-roles { display: flex; flex-direction: column; gap: 6px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px; }
.role-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.role-name { min-width: 48px; color: var(--muted); }
.role-row select { flex: 1; }

.ctx-warn { color: var(--warn); font-weight: 600; }
.loc-addr { font-size: 15px; font-weight: 600; margin-bottom: 12px; line-height: 1.4; }
.loc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.loc-row b { color: var(--muted); font-weight: 500; }