:root {
  color-scheme: dark;
  --bg: #07100f;
  --surface: #0d1716;
  --surface-2: #111d1b;
  --surface-3: #172421;
  --border: #22342f;
  --text: #eef5f2;
  --muted: #81958f;
  --green: #5ee8a2;
  --green-strong: #2fd889;
  --green-dark: #123c2d;
  --amber: #f6c86d;
  --red: #ff786f;
  --blue: #77baf7;
  --shadow: 0 24px 70px rgba(0,0,0,.3);
  font-family: "Segoe UI", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { display: grid; grid-template-columns: 228px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px 20px; border-right: 1px solid var(--border); background: #091310; }
.side-brand { display: flex; align-items: center; gap: 13px; padding: 0 10px 30px; }
.side-brand strong { display: block; font-size: 21px; letter-spacing: .03em; }
.side-brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .16em; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 12px); align-items: end; gap: 4px; width: 45px; height: 45px; padding: 8px; background: var(--green); border-radius: 13px; box-shadow: 0 0 38px rgba(94,232,162,.16); }
.brand-mark span { display:block; background:#07100f; border-radius:2px; }
.brand-mark span:nth-child(1){height:12px}.brand-mark span:nth-child(2){height:22px}.brand-mark span:nth-child(3){height:17px}
.brand-mark.small { width: 40px; height: 40px; grid-template-columns: repeat(3, 9px); padding: 7px; border-radius: 11px; }
.sidebar nav { display: grid; gap: 7px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; text-decoration: none; text-align: left; cursor: pointer; transition: .2s ease; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: var(--green); background: rgba(94,232,162,.09); }
.nav-icon { width: 20px; text-align:center; font-size: 18px; }
.side-footer { margin-top: auto; }
.host-chip { display: flex; align-items: center; gap: 10px; margin: 0 10px 15px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.host-chip div { min-width: 0; }.host-chip small{display:block;color:var(--muted);font-size:9px;letter-spacing:.14em}.host-chip strong{display:block;margin-top:3px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(94,232,162,.1); animation:pulse 2s infinite; }
.logout { border-top: 1px solid var(--border); border-radius: 0; padding-top: 18px; }
.main-content { min-width: 0; padding: 42px clamp(24px,4vw,64px) 70px; background-image: radial-gradient(circle at 86% 0%, rgba(41,110,83,.17), transparent 30%); }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:34px; }
.eyebrow { margin:0 0 8px; color:var(--green); font-size:10px; font-weight:700; letter-spacing:.18em; }
h1,h2,h3,p { margin-top:0; }.topbar h1{margin-bottom:0;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.045em;font-weight:650}.top-actions{display:flex;align-items:center;gap:20px}.last-updated{text-align:right}.last-updated span{display:block;color:var(--muted);font-size:10px}.last-updated strong{display:block;margin-top:4px;font-size:13px}
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:8px; padding:10px 14px; color:var(--text); background:var(--surface-3); cursor:pointer; transition:transform .15s,background .15s,border-color .15s; }
.button:hover:not(:disabled){transform:translateY(-1px);border-color:#355047}.button:disabled{opacity:.55;cursor:wait}.button.primary{color:#07100f;background:var(--green);font-weight:700}.button.secondary{border-color:var(--border);background:var(--surface)}.button.danger{color:#ffeceb;background:#5a2525;border-color:#7c3330}.button.rotating span,.rotating .nav-icon{display:inline-block;animation:spin .8s linear infinite}
.summary-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:38px; }
.summary-card { position:relative;display:flex;align-items:center;gap:15px;padding:20px;border:1px solid var(--border);border-radius:13px;background:rgba(13,23,22,.86);box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden}.summary-card::after{content:"";position:absolute;inset:auto -20px -30px auto;width:80px;height:80px;border-radius:50%;background:rgba(94,232,162,.03)}.summary-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:9px;font-size:14px}.summary-icon.total{color:var(--blue);background:rgba(119,186,247,.1)}.summary-icon.healthy{color:var(--green);background:rgba(94,232,162,.1)}.summary-icon.stopped{color:var(--red);background:rgba(255,120,111,.1)}.summary-icon.lan{color:var(--amber);background:rgba(246,200,109,.1)}.summary-card span{display:block;color:var(--muted);font-size:11px}.summary-card strong{display:block;margin-top:2px;font-size:27px;letter-spacing:-.04em}
.services-section { scroll-margin-top:20px; }.section-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:17px}.section-toolbar h2{margin-bottom:4px;font-size:20px}.section-toolbar p{margin-bottom:0;color:var(--muted);font-size:12px}.filters{display:flex;gap:9px}.search-box{display:flex;align-items:center;gap:8px;min-width:220px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.search-box span{color:var(--muted);font-size:20px}.search-box input{width:100%;padding:10px 0;color:var(--text);background:transparent;border:0;outline:0}.filters select{padding:0 34px 0 12px;color:var(--text);border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.service-card{position:relative;min-width:0;padding:20px;border:1px solid var(--border);border-radius:13px;background:var(--surface);overflow:hidden;transition:border-color .2s,transform .2s}.service-card:hover{transform:translateY(-2px);border-color:#365048}.card-accent{position:absolute;inset:0 auto 0 0;width:3px;background:var(--red);opacity:.8}.is-healthy .card-accent{background:var(--green)}.service-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.service-identity{display:flex;gap:12px;min-width:0}.service-glyph{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border:1px solid #294139;border-radius:9px;color:var(--green);background:#0c2019;font-size:9px;font-weight:800;letter-spacing:.08em}.service-identity h3{margin:1px 0 5px;font-size:15px;letter-spacing:-.01em}.service-identity p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.status-badge{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 8px;border-radius:99px;font-size:9px;font-weight:700}.status-badge i{width:6px;height:6px;border-radius:50%}.status-badge.healthy{color:var(--green);background:rgba(94,232,162,.09)}.status-badge.healthy i{background:var(--green);box-shadow:0 0 8px var(--green)}.status-badge.stopped{color:var(--red);background:rgba(255,120,111,.09)}.status-badge.stopped i{background:var(--red)}
.service-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:18px 0 13px}.scope-badge,.auto-badge,.manual-badge,.dependency{padding:4px 7px;border:1px solid var(--border);border-radius:5px;color:var(--muted);font-size:9px}.scope-badge.lan{color:var(--amber);border-color:#514729;background:rgba(246,200,109,.05)}.scope-badge.local{color:var(--blue);border-color:#29455a}.auto-badge{color:var(--green);border-color:#29513f}.dependency{margin-left:auto}.endpoint-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border-radius:8px;background:#091210}.endpoint-row span{color:var(--muted);font-size:8px;letter-spacing:.13em}.endpoint-row a,.endpoint-row strong{min-width:0;color:#b8ccc6;font:10px Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}.endpoint-row a:hover{color:var(--green)}.health-detail{display:flex;justify-content:space-between;gap:10px;margin:9px 3px 0;color:#60746e;font-size:9px}.health-detail span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-actions{display:flex;gap:8px;margin-top:17px;padding-top:15px;border-top:1px solid var(--border)}.service-actions .button{padding:8px 11px;font-size:10px}.action-button{min-width:75px}.start-action{color:#07100f;background:var(--green)}.stop-action{color:#ffaaa5;background:#2a1717;border-color:#4a2927}.icon-action{width:35px}.logs-action{margin-left:auto;background:transparent;border-color:var(--border)}
.empty-state{padding:50px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:12px}.toast-stack{position:fixed;z-index:100;right:22px;bottom:22px;display:grid;gap:9px;width:min(360px,calc(100vw - 44px))}.toast{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid #2c493f;border-radius:10px;background:#102019;box-shadow:var(--shadow);animation:toast-in .25s ease}.toast>span{color:var(--green)}.toast p{margin:0;font-size:12px;line-height:1.5}.toast.error{border-color:#653330}.toast.error>span{color:var(--red)}
.modal{padding:0;color:var(--text);border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow)}.modal::backdrop{background:rgba(0,5,4,.72);backdrop-filter:blur(5px)}.compact-modal{width:min(460px,calc(100vw - 32px));padding:24px}.modal-heading{display:flex;gap:14px;align-items:center}.modal-heading h2{margin:0;font-size:20px}.modal-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--red);background:rgba(255,120,111,.1)}.modal-copy{margin:22px 0;color:var(--muted);font-size:13px;line-height:1.7}.modal-copy strong{color:var(--text)}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.logs-modal{width:min(920px,calc(100vw - 32px));height:min(760px,calc(100vh - 32px))}.logs-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border)}.logs-header h2{margin:0}.icon-button{color:var(--muted);border:1px solid var(--border);border-radius:7px;background:transparent;cursor:pointer}.close-button{width:35px;height:35px;font-size:23px}.logs-content{height:calc(100% - 82px);padding:18px;overflow:auto}.log-file{margin-bottom:16px;border:1px solid var(--border);border-radius:9px;overflow:hidden}.log-file header{padding:9px 12px;color:var(--green);background:#091210;font:10px Consolas,monospace}.log-file pre{min-height:100px;margin:0;padding:14px;color:#b7cac4;background:#07100f;font:11px/1.65 Consolas,monospace;white-space:pre-wrap;word-break:break-word}.logs-loading{display:grid;place-items:center;height:100%;color:var(--muted)}.spinner{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.login-page{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 25% 30%,rgba(36,125,89,.2),transparent 33%),var(--bg)}.login-shell{display:grid;grid-template-columns:1.05fr .95fr;width:min(950px,100%);min-height:570px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.login-brand{display:flex;flex-direction:column;justify-content:center;padding:70px;background:#091512;border-right:1px solid var(--border);background-image:linear-gradient(rgba(94,232,162,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(94,232,162,.035) 1px,transparent 1px);background-size:32px 32px}.login-brand .brand-mark{margin-bottom:38px}.login-brand h1{margin-bottom:22px;font-size:54px;line-height:.98;letter-spacing:-.055em}.login-copy{max-width:350px;color:var(--muted);font-size:14px;line-height:1.7}.login-meta{display:flex;align-items:center;gap:11px;margin-top:65px;color:#9bb0aa;font-size:11px}.login-panel{display:flex;flex-direction:column;justify-content:center;gap:44px;padding:65px}.login-panel h2{margin-bottom:12px;font-size:27px}.muted{color:var(--muted);font-size:12px;line-height:1.7}.muted code{color:var(--green)}.login-panel label{display:block;margin-bottom:8px;color:#b8c8c3;font-size:11px}.token-field{display:flex;gap:8px}.token-field input{min-width:0;flex:1;padding:12px 13px;color:var(--text);border:1px solid var(--border);border-radius:8px;background:#091210;outline:0}.token-field input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(94,232,162,.08)}.token-field .icon-button{width:52px}.form-error{min-height:20px;margin:8px 0;color:var(--red);font-size:11px}.login-button{width:100%;padding:12px 15px;justify-content:space-between}
.service-identity code{color:#a9bdb7;font-size:9px}.endpoint-row+.endpoint-row{margin-top:6px}.public-endpoint{border:1px solid rgba(94,232,162,.12);background:rgba(94,232,162,.035)}.public-endpoint span{color:var(--green)}.service-actions{align-items:center}.monitor-only{color:var(--muted);font-size:10px}
.login-page .token-field{margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(94,232,162,0)}}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
@media(max-width:1000px){.summary-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:1fr}.app-shell{grid-template-columns:190px 1fr}.sidebar{padding-inline:12px}}
@media(max-width:720px){.app-shell{display:block}.sidebar{position:static;width:100%;height:auto;flex-direction:row;align-items:center;padding:13px 17px}.side-brand{padding:0;margin-right:auto}.side-brand small,.sidebar nav,.host-chip{display:none}.side-footer{margin:0}.logout{border:0;padding:9px}.main-content{padding:28px 16px 50px}.topbar{align-items:flex-start}.top-actions{gap:8px}.last-updated{display:none}.summary-grid{gap:9px}.summary-card{padding:14px}.summary-card strong{font-size:22px}.section-toolbar{display:block}.filters{margin-top:14px}.search-box{min-width:0;flex:1}.service-header{gap:8px}.status-badge{padding:5px}.login-shell{grid-template-columns:1fr;min-height:0}.login-brand{display:none}.login-panel{padding:38px 25px;min-height:480px}}
@media(max-width:430px){.summary-grid{grid-template-columns:1fr 1fr}.summary-icon{display:none}.service-card{padding:17px}.service-actions{flex-wrap:wrap}.logs-action{margin-left:0;flex:1}.filters{display:grid;grid-template-columns:1fr}.filters select{height:42px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}