:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #7b8496;
  --line: #e4e8ef;
  --nav: #111827;
  --nav-soft: #202a3c;
  --blue: #246bfd;
  --blue-soft: #eef4ff;
  --green: #16a06d;
  --green-soft: #eaf8f2;
  --amber: #d78a11;
  --amber-soft: #fff6e8;
  --red: #d94b55;
  --shadow: 0 8px 30px rgba(30, 42, 68, .07);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Noto Sans KR", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px; background: var(--nav); color: #fff; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 30px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(145deg,#4e8cff,#1f58df); font-size: 21px; font-weight: 800; }
.brand strong,.brand span { display: block; }
.brand strong { font-size: 18px; }
.brand span { margin-top: 1px; color: #8e9bb0; font-size: 11px; }
nav { display: grid; gap: 6px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 10px; padding: 12px 14px; background: transparent; color: #9da8ba; text-align: left; }
.nav-item span { width: 20px; text-align: center; font-size: 18px; }
.nav-item:hover,.nav-item.active { background: var(--nav-soft); color: #fff; }
.sidebar-status { margin-top: auto; padding: 15px; border: 1px solid #2c374a; border-radius: 12px; background: #172033; font-size: 12px; }
.sidebar-status small { display: block; margin-top: 6px; color: #7f8ba0; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #2dd18b; box-shadow: 0 0 0 4px rgba(45,209,139,.12); }

main { min-width: 0; padding: 0 32px 48px; }
.topbar { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.eyebrow { margin: 0 0 4px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 25px; letter-spacing: -.03em; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.clock { color: var(--muted); font-size: 12px; }
.operator { display: flex; align-items: center; gap: 9px; padding-left: 13px; border-left: 1px solid var(--line); }
.operator > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #dfe8fa; color: #315ba7; font-weight: 700; }
.operator strong,.operator small { display:block; }
.operator strong { font-size: 12px; }
.operator small { color: var(--muted); font-size: 10px; }

.notice { padding: 14px 18px; border: 1px solid #d7e4ff; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; background: var(--blue-soft); }
.notice strong,.notice span { display: block; }
.notice strong { color: #1f56bd; font-size: 12px; }
.notice span { margin-top: 2px; color: #62718d; font-size: 11px; }
.notice button { border: 0; background: transparent; color: #315fae; font-size: 11px; font-weight: 700; }
.stats { margin: 18px 0 26px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat { padding: 17px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 3px 14px rgba(30,42,68,.03); }
.stat span { display:block; color: var(--muted); font-size: 11px; }
.stat strong { display:block; margin-top: 4px; font-size: 22px; letter-spacing: -.04em; }
.stat small { color: var(--green); font-size: 10px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 13px; }
.section-heading h2 { margin-bottom: 2px; font-size: 17px; }
.section-heading p { margin-bottom: 0; color: var(--muted); font-size: 11px; }
.legend { display:flex; gap: 14px; color: var(--muted); font-size: 10px; }
.legend i { width: 7px; height: 7px; display:inline-block; margin-right: 5px; border-radius:50%; }
.legend .live { background: var(--green); }.legend .rest { background: var(--amber); }

.room-grid { display: grid; grid-template-columns: repeat(3,minmax(270px,1fr)); gap: 14px; align-items:start; }
.room-card { --accent:#246bfd; overflow:hidden; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); transition: .18s ease; }
.room-card:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(30,42,68,.10); }
.room-card.resting { opacity:.78; filter:saturate(.75); }
.room-head { padding: 14px 15px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.room-title { display:flex; align-items:center; gap:9px; }
.room-badge { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background: color-mix(in srgb, var(--accent) 12%, white); color:var(--accent); font-weight:800; font-size:12px; }
.room-title h3 { margin:0; font-size:14px; }.room-title small { display:block; color:var(--muted); font-size:9px; margin-top:2px; }
.state-pill { padding:4px 7px; border-radius:20px; background:var(--green-soft); color:var(--green); font-size:9px; font-weight:700; }
.resting .state-pill { background:var(--amber-soft); color:var(--amber); }
.room-body { padding:14px 15px; }
.field-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; color:#566174; font-size:10px; font-weight:700; }
.round-control { display:grid; grid-template-columns:38px 1fr 38px; gap:6px; margin-bottom:13px; }
.round-control button,.round-control input { height:35px; border:1px solid var(--line); background:#fafbfc; text-align:center; }
.round-control button { border-radius:8px; color:#536078; font-weight:700; }.round-control input { min-width:0; border-radius:8px; color:var(--ink); font-weight:800; }
.pick-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:13px; }
.pick-button { height:36px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#556175; font-size:11px; font-weight:700; }
.pick-button:hover { border-color:var(--accent); color:var(--accent); }
.pick-button.selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,white); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.money-input { position:relative; margin-bottom:8px; }.money-input input { width:100%; height:38px; padding:0 34px 0 12px; border:1px solid var(--line); border-radius:8px; outline:none; font-weight:700; }.money-input input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }.money-input span { position:absolute; top:9px; right:12px; color:var(--muted); font-size:11px; }
.presets { display:flex; gap:5px; margin-bottom:14px; }.presets button { flex:1; padding:6px 3px; border:1px solid var(--line); border-radius:7px; background:#fafbfc; color:#6d7788; font-size:9px; }
.last-message { min-height:48px; margin-bottom:13px; padding:9px 10px; border-radius:8px; background:#f7f8fa; color:#707b8c; font-size:9px; line-height:1.6; }.last-message strong { color:#465267; }
.card-actions { display:grid; grid-template-columns:88px 1fr; gap:7px; }.card-actions button { height:37px; border-radius:8px; font-size:10px; font-weight:800; }.rest-button { border:1px solid var(--line); background:#fff; color:#687286; }.send-button { border:0; background:var(--accent); color:#fff; box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 25%,transparent); }.send-button:disabled,.pick-button:disabled,.round-control button:disabled,.money-input input:disabled,.presets button:disabled { opacity:.45; cursor:not-allowed; }
.room-grid.compact { gap:9px; }.room-grid.compact .room-body { padding:10px 12px; }.room-grid.compact .last-message { display:none; }

.view { display:none; }.view.active { display:block; }
.placeholder-view { min-height:500px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.data-panel { padding:20px; }.data-panel h2 { font-size:17px; margin-bottom:4px; }.data-panel > p { color:var(--muted); font-size:11px; }
.telegram-summary { margin:18px 0 12px; padding:14px 16px; border:1px solid #f0d6aa; border-radius:10px; background:var(--amber-soft); }.telegram-summary.ready { border-color:#bfe8d7; background:var(--green-soft); }.telegram-summary strong,.telegram-summary span { display:block; }.telegram-summary strong { font-size:12px; }.telegram-summary span { margin-top:3px; color:var(--muted); font-size:10px; }
.bot-token-panel { display:grid; grid-template-columns:200px minmax(280px,1fr) 100px auto; gap:9px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:10px; background:#fff; }.token-copy strong,.token-copy span { display:block; }.token-copy strong { font-size:11px; }.token-copy span { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.5; }.bot-token-panel input { height:37px; padding:0 11px; border:1px solid var(--line); border-radius:8px; font-size:10px; }.danger-button { height:37px; padding:0 12px; border:1px solid #f0c5c9; border-radius:8px; background:#fff5f5; color:var(--red); font-size:10px; font-weight:700; }.token-warning { margin:8px 0 20px; color:#8b651e; font-size:9px; }.settings-subheading { display:flex; align-items:end; justify-content:space-between; margin-bottom:8px; }.settings-subheading h3 { margin:0; font-size:13px; }.settings-subheading span { color:var(--muted); font-size:9px; }
.connection-list { display:grid; gap:7px; }.connection-row { display:grid; grid-template-columns:145px minmax(210px,1fr) 64px 82px 86px; gap:8px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:10px; }.connection-row strong,.connection-row small { display:block; }.connection-row strong { font-size:11px; }.connection-row small { margin-top:2px; color:var(--muted); font-size:9px; }.chat-id-input { height:34px; padding:0 10px; border:1px solid var(--line); border-radius:7px; font-size:10px; }.connection-state { color:var(--muted); font-size:9px; font-weight:700; }.connection-state.connected { color:var(--green); }.connection-row button:disabled { opacity:.4; cursor:not-allowed; }.setup-guide { margin-top:16px; padding:15px 17px; border-radius:10px; background:#f7f8fa; font-size:10px; }.setup-guide ol { margin:8px 0 0; padding-left:18px; color:#637086; line-height:1.8; }
.table { width:100%; margin-top:18px; border-collapse:collapse; font-size:11px; }.table th,.table td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; }.table th { color:var(--muted); font-size:9px; letter-spacing:.04em; }.tag { display:inline-block; padding:4px 7px; border-radius:12px; background:var(--green-soft); color:var(--green); font-size:9px; font-weight:700; }.tag.wait { background:var(--amber-soft); color:var(--amber); }

.secondary-button,.primary-button { border-radius:8px; padding:9px 13px; font-size:10px; font-weight:700; }.secondary-button { border:1px solid var(--line); background:#fff; color:#566174; }.primary-button { border:0; background:var(--blue); color:#fff; }
.modal-backdrop { position:fixed; inset:0; z-index:30; display:none; place-items:center; padding:20px; background:rgba(15,23,42,.52); backdrop-filter:blur(3px); }.modal-backdrop.open { display:grid; }.modal { width:min(460px,100%); padding:22px; border-radius:17px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.25); }.modal-header { display:flex; justify-content:space-between; }.modal-header h2 { font-size:18px; }.icon-button { width:32px; height:32px; border:0; border-radius:8px; background:#f2f4f7; color:#627086; font-size:21px; }.message-preview { margin:15px 0; padding:20px; border-radius:13px; background:#e9f2f9; white-space:pre-line; color:#26384d; font-size:13px; line-height:1.75; }.warning-box { padding:11px; border-radius:9px; background:var(--amber-soft); color:#8c651e; font-size:10px; line-height:1.6; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.toast-region { position:fixed; right:25px; bottom:25px; z-index:50; display:grid; gap:8px; }.toast { min-width:280px; padding:13px 15px; border-radius:10px; background:#172033; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:11px; animation:slide-in .2s ease; }.toast strong { display:block; margin-bottom:2px; }.toast.error { background:#a53641; }
@keyframes slide-in { from { transform:translateY(8px); opacity:0; } }

@media (max-width:1180px){ .room-grid{grid-template-columns:repeat(2,minmax(270px,1fr));}.stats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:780px){ .app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:14px}.brand{padding-bottom:12px}nav{grid-template-columns:repeat(5,1fr)}.nav-item{justify-content:center;padding:10px 4px;font-size:0}.nav-item span{font-size:17px}.sidebar-status{display:none}main{padding:0 14px 30px}.topbar{min-height:86px}.clock,.top-actions>.secondary-button{display:none}.room-grid{grid-template-columns:1fr}.notice{align-items:flex-start;gap:8px}.stats{grid-template-columns:1fr 1fr}.operator{display:none}}
@media (max-width:980px){ .bot-token-panel{grid-template-columns:1fr}.connection-row{grid-template-columns:1fr}.connection-row .chat-id-input{width:100%} }