:root {
  --bg: #0d1d2c;
  --bg-deep: #081622;
  --panel: rgba(20, 45, 66, .94);
  --panel-2: rgba(25, 53, 77, .96);
  --panel-soft: #173750;
  --line: #315a76;
  --line-strong: #4a7995;
  --text: #f4faff;
  --muted: #a9c0d0;
  --cyan: #4de6f6;
  --cyan-2: #84f5ff;
  --violet: #a89bff;
  --green: #64e5b8;
  --yellow: #ffd87a;
  --danger: #ff829e;
  --shadow: 0 22px 56px rgba(0, 9, 18, .34);
  --radius: 16px;
  font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { min-width: 320px; font-size: 16px; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { user-select: none; }
.hidden { display: none !important; }

/* 밝은 네온을 가진 다크 사이버 배경 */
.cyber-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(rgba(77, 230, 246, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 230, 246, .07) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(77, 230, 246, .23), transparent 30%),
    radial-gradient(circle at 88% 15%, rgba(168, 155, 255, .22), transparent 30%),
    linear-gradient(135deg, #091826 0%, #14344e 48%, #0d2234 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  animation: gridMove 15s linear infinite;
}
.cyber-bg::before {
  content: "";
  position: absolute;
  inset: -35%;
  opacity: .4;
  background: conic-gradient(from 15deg, transparent, rgba(77, 230, 246, .14), transparent 27%, rgba(168, 155, 255, .13), transparent 62%);
  animation: cyberRotate 20s linear infinite;
}

.cyber-bg i {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .34;
  animation: drift 8s ease-in-out infinite alternate;
}
.cyber-bg i:nth-child(1) { left: 5%; top: 10%; background: #32dbe9; }
.cyber-bg i:nth-child(2) { right: 7%; top: 20%; background: #8b7cff; animation-delay: -3s; }
.cyber-bg i:nth-child(3) { left: 44%; bottom: -130px; background: #47d8a9; animation-delay: -6s; }
.cyber-bg b {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(132, 245, 255, .9);
  box-shadow: 0 0 18px rgba(77, 230, 246, .8);
  animation: particle 7.5s ease-in-out infinite;
}
.cyber-bg b:nth-of-type(1) { left: 18%; top: 92%; }
.cyber-bg b:nth-of-type(2) { left: 82%; top: 76%; animation-delay: -4s; }
@keyframes gridMove { to { background-position: 34px 34px, 34px 34px, 0 0, 0 0, 0 0; } }
@keyframes cyberRotate { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translate3d(48px, 32px, 0) scale(1.12); } }
@keyframes particle { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 15% { opacity: .9; } 55% { transform: translate3d(36px, -40vh, 0) rotate(190deg); opacity: .75; } 100% { transform: translate3d(-24px, -82vh, 0) rotate(420deg); opacity: 0; } }

/* 로그인 */
.login-wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-panel {
  width: min(510px, 94vw);
  padding: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: rgba(19, 43, 64, .94);
  box-shadow: var(--shadow), 0 0 46px rgba(77, 230, 246, .08), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(18px);
}
.brand-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  border-radius: 18px;
  color: #071821;
  font-size: 29px;
  font-weight: 950;
  background: linear-gradient(135deg, var(--cyan-2), var(--violet));
  box-shadow: 0 0 0 7px rgba(77, 230, 246, .08), 0 0 30px rgba(77, 230, 246, .25);
  animation: pulseLogo 2.2s ease-in-out infinite;
}
@keyframes pulseLogo { 50% { transform: translateY(-4px) rotate(2deg); box-shadow: 0 0 0 10px rgba(168, 155, 255, .07), 0 0 42px rgba(77, 230, 246, .30); } }
.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.login-panel h1 { margin: 8px 0 9px; font-size: 35px; letter-spacing: -.04em; }
.login-panel p { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }
.default-account { margin: 15px 0 18px; padding: 12px 14px; border: 1px solid #556d98; border-radius: 11px; background: linear-gradient(90deg, #173d57, #302f5b); color: #e0f3ff; }
.form-error { min-height: 22px; margin-top: 12px; color: #ff9bb0; font-size: 14px; }
.login-foot { display: block; margin-top: 21px; text-align: center; color: #91acbe; }

/* 공통 Form / Button */
.login-panel label, .form-grid label { display: block; margin-top: 13px; color: #c6d9e7; font-size: 14px; font-weight: 800; }
.input, .select, .textarea, .login-panel input {
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  border: 1px solid #3f6681;
  border-radius: 11px;
  background: #102a40;
  color: #f7fbff;
  outline: 0;
  transition: .18s;
}
.input::placeholder, .textarea::placeholder, .login-panel input::placeholder { color: #7895a9; }
.input:focus, .select:focus, .textarea:focus, .login-panel input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(77, 230, 246, .10), 0 0 22px rgba(77, 230, 246, .10); }
.textarea { min-height: 160px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.6; }
.btn { border: 1px solid #426d88; border-radius: 10px; padding: 10px 15px; background: #193a54; color: #edf9ff; font-weight: 850; cursor: pointer; transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; }
.btn:hover { transform: translateY(-1px); border-color: #6cb4d4; background: #224b67; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.btn.primary { color: #07151e; border-color: #75edf8; background: linear-gradient(100deg, #5cebf8, #b0a4ff); box-shadow: 0 0 24px rgba(77, 230, 246, .18); }
.btn.primary:hover { box-shadow: 0 0 34px rgba(77, 230, 246, .30); }
.btn.danger { color: #ffe2e9; border-color: #8e5368; background: #4c2b3b; }
.btn.ghost { background: rgba(22, 50, 73, .72); }
.btn.wide { width: 100%; }
.icon-btn { width: 38px; height: 38px; border: 1px solid #466e87; border-radius: 10px; background: #173950; color: #e9f8ff; font-size: 25px; cursor: pointer; }

/* Layout */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 276px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 15px; border-right: 1px solid #2d536d; background: rgba(10, 29, 45, .94); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; padding: 5px 8px 23px; }
.brand-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; color: #071821; font-size: 20px; font-weight: 950; background: linear-gradient(135deg, var(--cyan), var(--violet)); box-shadow: 0 0 24px rgba(77, 230, 246, .18); }
.brand b { display: block; font-size: 18px; }
.brand small { display: block; margin-top: 2px; color: #91adbf; font-size: 12px; }
.sidebar nav { display: grid; gap: 6px; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid transparent; border-radius: 11px; color: #b8cfdd; font-size: 15px; font-weight: 800; transition: .18s; }
.sidebar nav a span { width: 20px; color: #79a7bd; text-align: center; }
.sidebar nav a:hover, .sidebar nav a.active { color: #fff; border-color: #3e7694; background: linear-gradient(90deg, rgba(77, 230, 246, .17), rgba(168, 155, 255, .11)); box-shadow: inset 3px 0 0 var(--cyan), 0 0 24px rgba(77, 230, 246, .08); }
.sidebar-state { margin-top: auto; padding-top: 15px; border-top: 1px solid #2d536d; }
.socket-mini { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--muted); font-size: 13px; }
.socket-mini i { width: 9px; height: 9px; border-radius: 50%; background: #6e8494; }
.socket-mini i.on { background: var(--green); box-shadow: 0 0 13px rgba(100, 229, 184, .65); }
.socket-mini.viewer i { background: var(--violet); box-shadow: 0 0 12px rgba(168, 155, 255, .45); }
#me { margin-bottom: 12px; line-height: 1.5; }
#me b, #me small { display: block; }
#me small { color: var(--muted); }
main { min-width: 0; }
header { position: sticky; top: 0; z-index: 8; min-height: 98px; display: flex; justify-content: space-between; align-items: center; padding: 18px 30px; border-bottom: 1px solid #2e536c; background: rgba(12, 33, 50, .90); backdrop-filter: blur(18px); }
header h1 { margin: 5px 0 4px; font-size: 29px; letter-spacing: -.04em; }
header p { margin: 0; color: var(--muted); font-size: 14px; }
.header-actions { display: flex; gap: 9px; align-items: center; }
.clock { padding: 10px 12px; border: 1px solid #3b637d; border-radius: 10px; background: #123149; color: #bdeaf5; font: 13px ui-monospace, Consolas, monospace; }
#content { padding: 26px 30px 48px; }

/* Panel / Table */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.card, .panel { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .035); backdrop-filter: blur(14px); }
.card { position: relative; overflow: hidden; padding: 20px; border-radius: var(--radius); }
.card::before { content: ""; position: absolute; left: 0; top: 0; width: 45%; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 15px rgba(77, 230, 246, .45); }
.metric-label { color: #a9c4d6; font-size: 12px; font-weight: 900; letter-spacing: .05em; }
.metric-value { margin-top: 8px; color: #f7fbff; font: 800 29px/1.1 ui-monospace, Consolas, monospace; }
.metric-value.accent { color: var(--cyan-2); }
.metric-value.compact { font-size: 20px; }
.metric-sub { margin-top: 7px; color: #93adbf; font-size: 12px; }
.panel { margin-top: 16px; border-radius: var(--radius); overflow: hidden; }
.panel-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; border-bottom: 1px solid #315772; background: linear-gradient(180deg, rgba(27, 57, 83, .98), rgba(20, 44, 66, .98)); }
.panel-head h3 { margin: 0; font-size: 18px; }
.subtext { margin-top: 4px; color: #9eb7c8; font-size: 13px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar .input, .toolbar .select { width: auto; min-width: 210px; margin: 0; padding: 10px 12px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; color: #eef8ff; font-size: 14px; }
th, td { padding: 13px 15px; border-bottom: 1px solid #294b62; text-align: left; vertical-align: middle; white-space: nowrap; }
th { color: #b1cad9; background: #112c43; font-size: 12px; font-weight: 900; letter-spacing: .02em; }
tbody tr { transition: .14s; }
tbody tr:hover td { background: rgba(77, 230, 246, .035); }
.code { color: #bdf6ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #347263; border-radius: 999px; color: #c2f8e8; background: #173d39; font-size: 12px; font-weight: 900; }
.badge.muted { color: #dbd7ff; background: #2d3155; border-color: #595e91; }
.badge.warn { color: #ffe5a0; background: #4d4024; border-color: #806c3c; }
.badge.error { color: #ffd6df; background: #49283a; border-color: #80485c; }
.empty { padding: 34px 18px; color: #9bb3c4; text-align: center; }

/* 문서 / Form / 상세 */
.folder-block + .folder-block { border-top: 1px solid #2d5067; }
.folder-title { display: flex; justify-content: space-between; gap: 15px; padding: 13px 17px; color: #dffaff; background: linear-gradient(90deg, rgba(77, 230, 246, .12), rgba(168, 155, 255, .09)); font-weight: 850; }
.folder-title code { color: var(--cyan-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #345d77; border-radius: 9px; background: #123047; color: #d9eaf4; }
.notice { padding: 12px 14px; border: 1px solid #3d6982; border-radius: 10px; background: #13364e; color: #cbe2ef; line-height: 1.65; }
.notice.warn { color: #ffe8a9; border-color: #755f33; background: #44391f; }
.doc-grid h4 { margin: 20px 0 8px; }
.doc-kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; padding: 14px; border: 1px solid #315a75; border-radius: 12px; background: #102b41; }
.doc-kv b { color: #9fbfd1; }
.code-block, .event pre {
  margin: 8px 0;
  padding: 15px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  tab-size: 2;
  border: 1px solid #31566e;
  border-radius: 11px;
  background: #081a28;
  color: #d9f9ff;
  font: 14px/1.68 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.key-result { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #3c6982; border-radius: 11px; background: #0f2c42; }
.key-result code { flex: 1; overflow-wrap: anywhere; color: var(--cyan-2); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.event-list { max-height: 520px; overflow: auto; }
.event { padding: 13px 15px; border-bottom: 1px solid #2b4e65; }
.event strong { color: var(--cyan-2); }
.event time { float: right; color: #8daabd; font-size: 12px; }

/* Modal / Confirm */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; background: rgba(2, 12, 20, .66); backdrop-filter: blur(5px); }
.modal-card, .confirm-card { width: min(650px, 95vw); max-height: 90vh; overflow: auto; border: 1px solid #4a7995; border-radius: 18px; background: #15334c; color: var(--text); box-shadow: 0 24px 75px rgba(0, 0, 0, .48), 0 0 38px rgba(77, 230, 246, .10); }
.modal-card.wide { width: min(1040px, 96vw); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 17px; border-bottom: 1px solid #315772; background: #173b56; }
.modal-head h3 { margin: 4px 0 0; }
.modal-body { padding: 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.confirm-card { width: min(440px, 94vw); padding: 25px; text-align: center; }
.confirm-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 10px; border: 1px solid #986173; border-radius: 50%; color: #ffd5df; background: #4d2b3b; font-size: 22px; font-weight: 900; }
.confirm-card p { color: #adc3d2; line-height: 1.65; }
.prompt-card { width: min(560px, 94vw); padding: 24px; border: 1px solid #4a7995; border-radius: 20px; background: linear-gradient(180deg, #173b56 0%, #112d43 100%); color: var(--text); box-shadow: 0 26px 80px rgba(0,0,0,.50), 0 0 34px rgba(77,230,246,.10); }
.prompt-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid #4f829f; border-radius: 14px; background: #0f2c42; color: var(--cyan-2); font-size: 20px; }
.prompt-card h3 { margin: 4px 0 6px; font-size: 20px; }
.prompt-message { margin: 0 0 18px; color: #adc3d2; line-height: 1.65; }
.prompt-field { display: grid; gap: 8px; color: #d9edf8; font-weight: 700; }
.prompt-input { min-height: 110px; margin: 0; background: #0a2234; border-color: #47738d; color: #f7fbff; font-family: inherit; line-height: 1.6; }

/* Loading / Toast */
.loading-root { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(3, 14, 23, .40); backdrop-filter: blur(3px); }
.loading-box { min-width: 210px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 16px 20px; border: 1px solid #4f829f; border-radius: 13px; background: #163650; color: #fff; box-shadow: 0 18px 55px rgba(0, 0, 0, .35), 0 0 28px rgba(77, 230, 246, .16); }
.spinner { width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .24); border-top-color: var(--cyan-2); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-area { position: fixed; z-index: 140; top: 22px; left: 50%; width: min(520px, calc(100vw - 30px)); transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 12px 15px; border: 1px solid #4c7c97; border-radius: 11px; background: #17364f; color: #f6fbff; box-shadow: 0 18px 45px rgba(0, 0, 0, .32), 0 0 22px rgba(77, 230, 246, .10); animation: toastIn .22s ease-out; }
.toast.success { border-color: #3c806d; }
.toast.warn { border-color: #8a723c; color: #ffe6a0; }
.toast.error { border-color: #98546b; color: #ffd9e2; }
@keyframes toastIn { from { transform: translateY(-12px) scale(.98); opacity: 0; } }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .sidebar nav { grid-template-columns: repeat(2, 1fr); }
  header { position: relative; padding: 18px; }
  #content { padding: 18px; }
  .header-actions .clock { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .login-panel { padding: 28px 22px; }
  .cards, .form-grid, .check-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .sidebar nav { grid-template-columns: 1fr; }
  header { align-items: flex-start; gap: 10px; }
  .toolbar .input, .toolbar .select { min-width: 100%; width: 100%; }
  .doc-kv { grid-template-columns: 1fr; }
}


/* 선이 위에서 아래로 떨어지는 효과 없이, 은은한 네온 에너지 움직임만 사용합니다. */
.shell::before {
  content: "";
  position: fixed;
  width: 420px;
  height: 420px;
  right: -180px;
  bottom: -180px;
  z-index: -1;
  border: 1px solid rgba(77, 230, 246, .18);
  border-radius: 42% 58% 55% 45%;
  box-shadow: 0 0 90px rgba(77, 230, 246, .09), inset 0 0 80px rgba(168, 155, 255, .07);
  animation: energyOrbit 12s ease-in-out infinite alternate;
}
.panel, .card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.panel:hover, .card:hover { border-color: rgba(77, 230, 246, .48); box-shadow: var(--shadow), 0 0 28px rgba(77, 230, 246, .07), inset 0 1px 0 rgba(255,255,255,.05); }
.card:hover { transform: translateY(-3px); }
.folder-block { position: relative; overflow: hidden; }
.folder-block::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77,230,246,.10), transparent 68%);
  animation: breatheGlow 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes energyOrbit {
  from { transform: translate3d(0,0,0) rotate(-8deg) scale(.94); }
  to { transform: translate3d(-90px,-60px,0) rotate(28deg) scale(1.08); }
}
@keyframes breatheGlow { from { opacity: .35; transform: scale(.85); } to { opacity: 1; transform: scale(1.18); } }

.api-doc-nav { display: grid; gap: 2px; margin: -1px 0 5px 31px; padding: 5px 0 5px 9px; border-left: 1px solid #315a73; }
.sidebar .api-doc-nav a { padding: 7px 9px; border-radius: 8px; font-size: 12px; color: #89aabd; }
.sidebar .api-doc-nav .api-nav-area > a:first-child { color: #d7edf7; font-weight: 900; }
.sidebar .api-doc-nav a.api-nav-child { padding-left: 16px; }
.sidebar .api-doc-nav a:hover, .sidebar .api-doc-nav a.active { color: #fff; background: rgba(77,230,246,.09); box-shadow: none; border-color: transparent; }
.account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.account-btn { display: flex; justify-content: center; align-items: center; padding: 9px 8px; font-size: 12px; }
.account-btn.active { border-color: var(--cyan); color: #fff; }
.breadcrumb { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #94b1c3; font-size: 13px; }
.breadcrumb a { color: #bff6ff; }
.api-area-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 17px; }
.api-area-card, .api-category-card { border: 1px solid #345f79; border-radius: 14px; background: linear-gradient(145deg,#12334b,#10293f); transition: .18s; }
.api-area-card { min-height: 190px; padding: 22px; }
.api-area-card:hover, .api-category-card:hover { transform: translateY(-2px); border-color: #62c5df; box-shadow: 0 14px 35px rgba(0,0,0,.2),0 0 25px rgba(77,230,246,.08); }
.api-area-card span { color: var(--cyan-2); font-weight: 900; } .api-area-card h2 { margin: 18px 0 8px; font: 800 36px ui-monospace,Consolas; } .api-area-card p { min-height: 42px; color: var(--muted); line-height: 1.55; }
.api-category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 17px; }
.api-category-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 18px; }
.api-category-icon { width: 44px; height: 44px; display: grid; place-items:center; border:1px solid #4d8aa7; border-radius:12px; color:var(--cyan-2); background:#0b283d; font:800 13px ui-monospace,Consolas; }
.api-category-card h3 { margin:0 0 5px; } .api-category-card p,.api-category-card small { color:var(--muted); }
.api-list { display:grid; } .api-row { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:17px; border-bottom:1px solid #294b62; }
.api-row h3 { display:inline-block; margin:0 8px; font:800 15px ui-monospace,Consolas; } .api-row p { margin:8px 0 5px; color:#bed1dc; } .api-row-side { display:flex; align-items:center; gap:14px; color:var(--muted); white-space:nowrap; }
.traffic-chart { padding: 14px 18px 6px; min-height: 270px; background: radial-gradient(circle at 50% 100%,rgba(77,230,246,.06),transparent 55%); }
.traffic-chart svg { width:100%; height:260px; overflow:visible; } .chart-axis { stroke:#31566e; stroke-width:1; }
.chart-line { fill:none; stroke:#72ebf6; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(77,230,246,.35)); }
.traffic-chart circle { fill:#b5f7ff; stroke:#18455c; stroke-width:2; } .traffic-chart circle:hover { r:6; }
.chart-labels text { fill:#86a5b8; font:11px ui-monospace,Consolas; }
@media(max-width:900px){.api-area-grid{grid-template-columns:1fr}.api-category-grid{grid-template-columns:1fr}.api-row{align-items:flex-start;flex-direction:column}.api-row-side{width:100%;justify-content:space-between}}


html, body { min-width: 1280px; overflow-x: auto; }
body { overflow-y: auto; }
.shell { min-width: 1280px; grid-template-columns: 276px minmax(1000px, 1fr); transition: grid-template-columns .18s ease; }
.shell.sidebar-collapsed { grid-template-columns: 78px minmax(1198px, 1fr); }
.sidebar { min-width: 0; overflow: hidden; }
.sidebar-top { position: relative; display:flex; align-items:flex-start; }
.sidebar-top .brand { flex:1; min-width:0; }
.sidebar-toggle { position:absolute; right:-7px; top:8px; width:28px; height:34px; border:1px solid #426d88; border-radius:9px; background:#163850; color:#dffaff; cursor:pointer; font-size:20px; z-index:3; }
.sidebar nav { position:relative; }
.nav-primary { overflow-y:auto; overflow-x:hidden; padding-right:2px; }
.nav-admin { margin-top:auto; padding-top:14px; border-top:1px solid #2d536d; }
.nav-node { position:relative; }
.nav-node > a em { font-style:normal; white-space:nowrap; }
.sub-toggle { position:absolute; right:8px; top:8px; width:29px; height:29px; border:0; border-radius:8px; background:transparent; color:#8fb3c5; cursor:pointer; transition:.15s; }
.sub-toggle.closed { transform:rotate(-90deg); }
.nav-sub-closed { display:none !important; }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-node > a em, .sidebar-collapsed .api-doc-nav, .sidebar-collapsed .sub-toggle { display:none !important; }
.sidebar-collapsed .brand { padding-left:1px; }
.sidebar-collapsed .brand-icon { width:44px; }
.sidebar-collapsed .sidebar nav a { justify-content:center; padding-left:8px; padding-right:8px; }
.sidebar-collapsed .sidebar nav a .nav-icon { width:auto; font-size:18px; }
.sidebar-collapsed .sidebar-toggle { right:-8px; }
.account-top { display:flex; align-items:center; gap:8px; }
.account-identity { min-width:160px; padding:8px 13px; border:1px solid #365f79; border-radius:11px; background:#123149; line-height:1.35; }
.account-identity b, .account-identity small { display:block; }
.account-identity small { margin-top:2px; color:#96b2c3; font-size:11px; }
.folder-permission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.permission-area { padding:12px; border:1px solid #345d77; border-radius:12px; background:#102d43; }
.permission-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:9px; }
.permission-title .btn { padding:6px 8px; font-size:11px; }
.permission-area .check { margin-top:7px; }
.permission-area .check span { display:grid; gap:2px; }
.permission-area .check small { font-size:11px; }
/* 반응형 레이아웃은 사용하지 않습니다. 작은 화면에서는 PC 화면 폭 그대로 가로 스크롤합니다. */
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(4,minmax(0,1fr)); } .split { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 820px) { .shell { grid-template-columns:276px minmax(1000px,1fr); } .shell.sidebar-collapsed { grid-template-columns:78px minmax(1198px,1fr); } .sidebar { position:sticky; height:100vh; } .sidebar nav { display:grid; grid-template-columns:1fr; } header { position:sticky; padding:18px 30px; } #content { padding:26px 30px 48px; } }
@media (max-width: 560px) { body { font-size:16px; } .cards { grid-template-columns:repeat(4,minmax(0,1fr)); } .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sidebar nav { grid-template-columns:1fr; } .doc-kv { grid-template-columns:130px 1fr; } }

html, body { width:100%; height:100%; min-width:1280px; overflow-x:auto; overflow-y:hidden; }
.shell { height:100vh; min-height:100vh; overflow:hidden; }
.sidebar { position:sticky; top:0; height:100vh; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.sidebar-top { flex:0 0 auto; min-height:86px; padding:18px 15px 12px; border-bottom:1px solid rgba(49,90,118,.5); background:rgba(10,29,45,.97); z-index:4; }
.sidebar-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px 13px 24px 15px; scrollbar-width:thin; scrollbar-color:#426d88 transparent; }
.sidebar-scroll::-webkit-scrollbar, main::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .modal-card::-webkit-scrollbar { width:8px; height:8px; }
.sidebar-scroll::-webkit-scrollbar-thumb, main::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb { background:#3b647e; border-radius:10px; }
.sidebar-scroll::-webkit-scrollbar-track, main::-webkit-scrollbar-track { background:transparent; }
.nav-primary { overflow:visible; padding-right:0; }
.nav-section-label { margin:16px 9px 5px; padding-top:13px; border-top:1px solid #294b62; color:#68899d; font-size:10px; font-weight:900; letter-spacing:.12em; }
.sidebar-collapsed .nav-section-label { height:1px; margin:12px 5px 8px; padding:0; color:transparent; }
main { height:100vh; min-width:1000px; overflow-y:auto; overflow-x:auto; }
header { top:0; }
#content { min-width:1000px; }

/* API 정의서 서브메뉴: 어느 페이지에서도 항상 안정적으로 보이도록 높이/간격을 명시 */
.api-doc-nav { display:grid; gap:3px; margin:3px 0 7px 30px; padding:5px 0 6px 10px; border-left:1px solid #315a73; min-height:0; }
.api-doc-nav:empty { display:none; }
.api-nav-area { display:grid; gap:2px; margin-bottom:5px; }
.api-nav-area:last-child { margin-bottom:0; }
.sidebar .api-doc-nav .api-nav-area > a:first-child { padding:7px 8px; }
.sidebar .api-doc-nav a.api-nav-child { padding:6px 8px 6px 17px; }
.nav-sub-loading { display:block; padding:7px 9px; color:#718fa2; font-size:11px; }
.nav-sub-loading.error { color:#d79bad; }
.sub-toggle { display:grid; place-items:center; top:9px; line-height:1; font-size:14px; }
.sub-toggle.closed { transform:rotate(-90deg); }
.nav-sub-closed { display:none !important; }

/* 상단 계정은 텍스트만 노출하고 hover/click 시 메뉴 표시 */
.account-menu { position:relative; flex:0 0 auto; }
.account-trigger { min-width:190px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px; border:1px solid transparent; border-radius:11px; background:transparent; color:#f4faff; cursor:pointer; text-align:left; transition:.15s; }
.account-trigger:hover, .account-menu.open .account-trigger { border-color:#365f79; background:#123149; }
.account-trigger span { display:block; }
.account-trigger b, .account-trigger small { display:block; white-space:nowrap; }
.account-trigger b { font-size:13px; }
.account-trigger small { margin-top:3px; color:#91adbe; font-size:11px; }
.account-trigger i { color:#84c5da; font-style:normal; transition:transform .15s; }
.account-menu.open .account-trigger i { transform:rotate(180deg); }
.account-dropdown { position:absolute; right:0; top:calc(100% + 7px); z-index:30; width:190px; display:none; padding:6px; border:1px solid #416d87; border-radius:11px; background:#123149; box-shadow:0 18px 42px rgba(0,0,0,.35); }
.account-menu:hover .account-dropdown, .account-menu.open .account-dropdown, .account-menu:focus-within .account-dropdown { display:grid; }
.account-dropdown a, .account-dropdown button { width:100%; display:flex; align-items:center; padding:10px 11px; border:0; border-radius:8px; background:transparent; color:#dcecf5; cursor:pointer; font:inherit; font-size:13px; font-weight:800; text-align:left; }
.account-dropdown a:hover, .account-dropdown button:hover, .account-dropdown a.active { background:rgba(77,230,246,.10); color:#fff; }

/* API Key 권한: 선택 대상은 오직 API 폴더이며, 선택 폴더의 모든 modes를 포함 */
.folder-permission-grid { align-items:start; }
.permission-area { min-width:0; }
.permission-area .check { cursor:pointer; }
.permission-area .check small { overflow-wrap:anywhere; white-space:normal; }
.folder-scope-help { margin:0 0 10px; padding:10px 12px; border:1px solid #315a75; border-radius:9px; background:#0f2b40; color:#b9d1df; font-size:12px; line-height:1.6; }

/* PC 전용: 작은 화면에서도 재배치하지 않고 가로 스크롤 */
@media (max-width:1100px) { .cards{grid-template-columns:repeat(4,minmax(0,1fr));}.split{grid-template-columns:repeat(2,minmax(0,1fr));}.api-area-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.api-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.api-row{flex-direction:row;align-items:center}.api-row-side{width:auto;justify-content:flex-start} }
@media (max-width:820px) { .shell{grid-template-columns:276px minmax(1000px,1fr)}.shell.sidebar-collapsed{grid-template-columns:78px minmax(1198px,1fr)}.sidebar{position:sticky;height:100vh}.sidebar nav{display:grid;grid-template-columns:1fr}header{position:sticky;padding:18px 30px}#content{padding:26px 30px 48px} }
@media (max-width:560px) { body{font-size:16px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-kv{grid-template-columns:130px 1fr} }

.shell { grid-template-columns: 264px minmax(1016px, 1fr); }
.sidebar-top { min-height: 72px; padding: 12px 14px 10px; align-items: center; }
.sidebar-top .brand { align-items: center; }
.sidebar-scroll { padding: 10px 12px 24px 14px; }
.sidebar nav { gap: 4px; }
.sidebar nav a { min-height: 42px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.sidebar nav a .nav-icon { width: 19px; opacity: .9; }

/* 메뉴 자체 접기 기능은 제거. API 정의서/외부 소켓은 현재 영역일 때만 하위 메뉴를 렌더링합니다. */
.sidebar-toggle, .sub-toggle { display: none !important; }
.nav-node > a.has-children { position: relative; padding-right: 34px; }
.nav-node > a.has-children::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #7da8ba;
  border-bottom: 1.5px solid #7da8ba;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .16s ease, border-color .16s ease;
}
.nav-node.expanded > a.has-children::after {
  transform: translateY(-35%) rotate(225deg);
  border-color: #b9f7ff;
}
.api-doc-nav {
  margin: 3px 0 8px 29px;
  padding: 4px 0 5px 13px;
  border-left: 1px solid rgba(78, 129, 157, .55);
  gap: 2px;
}
.api-nav-area { gap: 1px; margin-bottom: 4px; }
.sidebar .api-doc-nav .api-nav-area > a:first-child,
.sidebar .api-doc-nav .api-nav-area-link {
  min-height: 30px;
  padding: 5px 8px;
  color: #c9dce7;
  font-size: 12px;
}
.sidebar .api-doc-nav a.api-nav-child {
  position: relative;
  min-height: 29px;
  gap: 8px;
  padding: 5px 8px 5px 8px;
  font-size: 12px;
}
.sidebar .api-doc-nav a.api-nav-child > .nav-child-dot {
  display: block !important;
  width: 5px !important;
  min-width: 5px !important;
  max-width: 5px !important;
  height: 5px !important;
  min-height: 5px !important;
  max-height: 5px !important;
  flex: 0 0 5px !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #547f94;
  transform: none !important;
  box-shadow: none;
}
.sidebar .api-doc-nav a.api-nav-child:hover > .nav-child-dot,
.sidebar .api-doc-nav a.api-nav-child.active > .nav-child-dot {
  background: #8ff5ff;
  box-shadow: 0 0 8px rgba(77, 230, 246, .45);
}

/* 상단 높이를 줄이고 계정 메뉴는 hover/focus 상태에서만 노출합니다. */
header {
  min-height: 76px;
  padding: 10px 26px;
  gap: 20px;
}
header h1 { margin: 2px 0 2px; font-size: 23px; line-height: 1.18; }
header p { font-size: 12px; line-height: 1.35; }
header .eyebrow { font-size: 10px; line-height: 1.2; }
.header-copy { min-width: 0; }
.account-menu { position: relative; align-self: center; }
.account-trigger {
  min-width: 174px;
  padding: 7px 10px;
  gap: 10px;
  border-radius: 9px;
  cursor: default;
}
.account-trigger:hover { border-color: #365f79; background: #123149; }
.account-trigger b { font-size: 12px; line-height: 1.25; }
.account-trigger small { margin-top: 2px; font-size: 10px; line-height: 1.25; }
.account-trigger i {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #80b8cb;
  border-bottom: 1.5px solid #80b8cb;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.account-menu:hover .account-trigger i { transform: rotate(225deg); }
.account-dropdown {
  top: calc(100% + 4px);
  width: 174px;
  padding: 5px;
  border-radius: 10px;
}
.account-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.account-menu:hover .account-dropdown { display: grid; }
.account-dropdown a, .account-dropdown button { padding: 9px 10px; font-size: 12px; }

/* PC 고정 레이아웃 유지 */
@media (max-width: 820px) {
  .shell { grid-template-columns:264px minmax(1016px,1fr); }
  header { padding:10px 26px; }
}
/* 계정 메뉴는 focus/click 상태와 무관하게 pointer hover 범위에서만 유지 */
.account-menu:not(:hover) .account-dropdown { display: none !important; }

.sidebar nav a > span:not(.nav-icon),
.sidebar .api-doc-nav a > span:not(.nav-child-dot) {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  word-break: keep-all;
}

.sidebar .api-doc-nav {
  min-width: 0;
  margin-left: 24px;
}

.sidebar .api-doc-nav .api-nav-area-link,
.sidebar .api-doc-nav a.api-nav-child {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.sidebar .api-doc-nav .api-nav-area-link,
.sidebar .api-doc-nav a.api-nav-child > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.permission-area-card {
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #365f79;
  border-radius: 12px;
  background: rgba(17, 47, 69, .76);
}

.permission-area-card b,
.permission-area-card small {
  display: block;
}

.permission-area-card b {
  color: #eefaff;
  font-size: 14px;
}

.permission-area-card small {
  margin-top: 5px;
  color: #91adbf;
  line-height: 1.45;
}

.permission-area-card.selectable {
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}

.permission-area-card.selectable:hover {
  transform: translateY(-1px);
  border-color: #5ca3c6;
  background: rgba(25, 63, 88, .92);
}

.permission-area-card.selectable input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: #5cebf8;
}

.permission-area-card.selectable:has(input:checked) {
  border-color: #66dce9;
  background: rgba(41, 101, 119, .34);
  box-shadow: inset 0 0 0 1px rgba(92, 235, 248, .12);
}

.permission-area-card.always-on {
  border-color: #347263;
  background: rgba(23, 61, 57, .68);
}

.permission-check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  border-radius: 50%;
  color: #071821;
  background: #64e5b8;
  font-weight: 950;
}

.permission-example {
  margin-top: 10px;
  color: #91adbf;
  font-size: 12px;
  line-height: 1.55;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
  box-shadow: none;
}

.message-cell {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 980px) {
  .area-permission-grid {
    grid-template-columns: 1fr;
  }
}

.sidebar .api-doc-nav a.api-nav-child {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
}
.sidebar .api-doc-nav a.api-nav-child > span:not(.nav-child-dot) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
  white-space: nowrap;
}
.channel-test-ok { color: var(--green); font-weight: 800; }
.channel-test-fail { color: var(--danger); font-weight: 800; }

.global-monitor {
  position: sticky;
  top: 76px;
  z-index: 7;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 26px;
  border-bottom: 1px solid #294f68;
  background: rgba(9, 28, 43, .94);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 20px rgba(2, 11, 18, .10);
}
.global-monitor.loading { opacity: .82; }
.monitor-item {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(63, 102, 129, .65);
  border-radius: 999px;
  background: rgba(17, 48, 71, .72);
  color: #abc5d5;
  font-size: 11px;
  white-space: nowrap;
}
.monitor-item:hover { border-color: #5d9bb9; background: #173b54; color: #effaff; }
.monitor-item b { color: #eaf8ff; font-size: 11px; }
.monitor-wide { min-width: 220px; }
.monitor-dot {
  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;
  min-height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50%;
  background: #6f8595;
  box-shadow: none;
}
.monitor-dot.ok { background: var(--green); box-shadow: 0 0 9px rgba(100, 229, 184, .5); }
.monitor-dot.warn { background: #f2be67; box-shadow: 0 0 9px rgba(242, 190, 103, .35); }

/* Native select를 별도 라이브러리 없이 일관된 콘솔 UI로 정리합니다. */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-color: #102a40;
  background-image:
    linear-gradient(45deg, transparent 50%, #8fc7d9 50%),
    linear-gradient(135deg, #8fc7d9 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select:hover, .input:hover, .textarea:hover { border-color: #5382a0; }
.select option { color: #edf8ff; background: #102a40; }
.input:disabled, .select:disabled, .textarea:disabled {
  cursor: not-allowed;
  opacity: .62;
  background-color: #0b2234;
}

.sidebar .api-doc-nav .api-nav-area:not(.expanded) { margin-bottom: 2px; }
.sidebar .api-doc-nav .api-nav-area.expanded {
  margin: 2px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(65, 105, 131, .20);
}
.sidebar .api-doc-nav .api-nav-area.expanded > .api-nav-area-link {
  color: #effcff;
  background: rgba(77, 230, 246, .07);
}

/* 관리 콘솔에서는 장시간 켜두는 화면의 GPU/CPU 사용량을 낮춥니다. */
body:not(.login-page) .cyber-bg,
body:not(.login-page) .cyber-bg::before,
body:not(.login-page) .cyber-bg i,
body:not(.login-page) .cyber-bg b,
body:not(.login-page) .shell::before,
body:not(.login-page) .folder-block::after {
  animation: none !important;
}
body:not(.login-page) .cyber-bg i { filter: blur(86px); opacity: .22; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body:not(.login-page) .panel,
body:not(.login-page) .card {
  backdrop-filter: none;
}
body:not(.login-page) .sidebar,
body:not(.login-page) header,
body:not(.login-page) .global-monitor {
  backdrop-filter: blur(8px);
}

.cards{grid-template-columns:repeat(4,minmax(0,1fr));}.live-value{display:flex;align-items:center;gap:8px}.live-dot{width:9px;height:9px;border-radius:50%;background:#36d399;box-shadow:0 0 0 4px rgba(54,211,153,.12)}html[data-live=disconnected] .live-dot{background:#77838c;box-shadow:none}.metric-value.danger{color:#ff6b6b}.live-collector-panel{margin-top:16px}
@media(max-width:1200px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.cards{grid-template-columns:1fr}}

.storage-cards .metric-sub .badge{margin-right:6px;vertical-align:1px}.storage-health-panel{overflow:hidden}.storage-overview-grid{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:16px;align-items:stretch;margin-top:8px}.storage-disk-card{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center;padding:18px;border:1px solid #294f68;border-radius:14px;background:#0b2233}.storage-ring{--storage-pct:0;width:124px;height:124px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#57d7c5 calc(var(--storage-pct)*1%),#17384d 0);position:relative}.storage-ring:after{content:'';position:absolute;inset:12px;border-radius:50%;background:#0b2233;border:1px solid #294f68}.storage-ring>div{position:relative;z-index:1;text-align:center}.storage-ring strong,.storage-ring span{display:block}.storage-ring strong{font-size:24px;color:#effbff}.storage-ring span{margin-top:2px;color:#86a6b9;font-size:11px}.storage-disk-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}.storage-disk-meta>div{min-width:0;padding:9px 10px;border-radius:10px;background:#0e2a3e}.storage-disk-meta span,.storage-disk-meta b{display:block}.storage-disk-meta span{color:#7e9caf;font-size:10px}.storage-disk-meta b{margin-top:4px;color:#eaf8ff;font-size:13px}.storage-overview-detail{display:flex;flex-direction:column;gap:12px;min-width:0}.storage-registered{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.storage-registered>div{padding:14px;border:1px solid #294f68;border-radius:12px;background:#0c2537}.storage-registered span,.storage-registered strong{display:block}.storage-registered span{color:#7e9caf;font-size:11px}.storage-registered strong{margin-top:6px;color:#effbff;font-size:18px}.storage-policy{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:18px;margin-top:0;padding:14px 16px;border:1px solid #294f68;border-radius:12px;background:#0d2639}.storage-policy span,.storage-policy b{display:block}.storage-policy span{color:#7e9caf;font-size:11px}.storage-policy b{margin-top:4px;color:#eaf8ff}.storage-policy p{margin:0;color:#9db7c8;font-size:12px}.storage-policy code{color:#67e1ed;font-size:11px}.storage-split{align-items:start}.storage-file-name{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.integrity-panel{border-color:#2d665b}.integrity-panel.integrity-warn{border-color:#735a32}.integrity-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:4px 0 16px}.integrity-grid>div{padding:14px;border:1px solid #294f68;border-radius:12px;background:#0c2537}.integrity-grid span,.integrity-grid b{display:block}.integrity-grid span{color:#86a2b4;font-size:11px}.integrity-grid b{margin-top:6px;color:#eefaff;font-size:22px}.integrity-grid .bad{border-color:#7f4c42;background:rgba(92,44,38,.25)}.integrity-grid .bad b{color:#ff9b8f}.storage-integrity-lists{display:grid;grid-template-columns:1fr 1fr;gap:12px}.storage-integrity-lists>div{padding:14px;border:1px solid #294f68;border-radius:12px;background:#0b2233}.storage-integrity-lists h4{margin:0 0 10px;color:#eaf8ff}.integrity-row{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid rgba(62,96,119,.3)}.integrity-row:last-child{border-bottom:0}.integrity-row span{color:#c5d8e4;font-size:12px}.integrity-row code{color:#78cddd;font-size:11px;word-break:break-all}.storage-good{color:#79ddb8}@media(max-width:1100px){.storage-overview-grid{grid-template-columns:1fr}.storage-policy{grid-template-columns:1fr}.integrity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.storage-integrity-lists{grid-template-columns:1fr}}@media(max-width:680px){.storage-disk-card{grid-template-columns:1fr}.storage-ring{margin:auto}.storage-registered{grid-template-columns:1fr}.integrity-grid{grid-template-columns:1fr}}

main{height:100vh;display:flex;flex-direction:column;overflow:hidden!important}.shell main>header{position:relative!important;top:auto!important;flex:0 0 auto}.global-monitor{position:relative!important;top:auto!important;flex:0 0 auto;min-height:40px}.shell main>#content{flex:1 1 auto;min-height:0;overflow:auto;padding:26px 30px 48px}.console-version{margin-top:2px!important;color:#67899e!important;font-size:10px!important;font-weight:800!important;letter-spacing:.05em}.socket-identity{display:grid;gap:3px}

.header-notification-btn{width:42px;height:42px;border:1px solid #315772;background:#15324a;color:#fff;border-radius:10px;font-size:18px;cursor:pointer}.header-notification-btn:hover{background:#214a69}.notification-admin-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.notification-admin-list{display:grid;gap:10px;max-height:520px;overflow:auto}.notice-row{padding:13px;border:1px solid #315772;border-radius:10px;background:#17344e}.notice-row.read{opacity:.65}.notice-row>div:first-child{display:flex;justify-content:space-between;gap:10px}.notice-row p{margin:8px 0;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.notice-row small{color:#8eabc0}.api-visibility-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.api-visibility-list label{display:flex;gap:10px;align-items:flex-start;border:1px solid #315772;padding:10px;border-radius:9px}.api-visibility-list label span{display:flex;flex-direction:column;gap:3px}.api-visibility-list small{color:#8eabc0}@media(max-width:760px){.api-visibility-list{grid-template-columns:1fr}}


/* API 정의서 관리 */
.api-management-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.api-management-area{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.api-management-area-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:#f7f9fb;border-bottom:1px solid var(--line)}.api-management-area-head>div{display:flex;flex-direction:column;gap:3px}.api-management-area-head strong{font-size:15px}.api-management-area-head span{font-size:12px;color:var(--muted)}.api-area-toggle,.api-category-toggle{display:flex;align-items:center;gap:9px;cursor:pointer}.api-area-toggle{font-size:12px;font-weight:700;white-space:nowrap}.api-management-categories{display:flex;flex-direction:column}.api-category-toggle{padding:12px 16px;border-bottom:1px solid #edf1f4}.api-category-toggle:last-child{border-bottom:0}.api-category-toggle>span{display:flex;flex-direction:column;gap:2px}.api-category-toggle b{font-size:13px}.api-category-toggle small{font-size:11px;color:var(--muted)}.api-category-toggle input,.api-area-toggle input{width:17px;height:17px;accent-color:var(--brand)}
@media(max-width:1100px){.api-management-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.api-management-grid{grid-template-columns:1fr}}

.header-notification-btn{margin-left:auto;margin-right:10px;flex:0 0 auto}.account-menu{flex:0 0 auto}.notice-sender{display:block;margin-top:5px;color:#9fc2d6!important}.integration-security{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}

.api-management-simple-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.api-management-simple-card{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;margin:0}.api-management-simple-card>div{display:grid;gap:5px}.api-management-simple-card strong{font-size:16px}.api-management-simple-card span{color:var(--muted);font-size:13px}.api-management-simple-card small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}.api-management-simple-card input{width:18px;height:18px}.api-management-simple-card i{font-style:normal;font-size:12px;color:var(--muted)}.page-content-stack{display:grid;gap:16px}@media(max-width:900px){.api-management-simple-grid{grid-template-columns:1fr}}

.header-notification-btn{position:relative}.header-notification-count{position:absolute;right:-5px;top:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;line-height:18px;text-align:center;border:2px solid #0f2639}

/* API definition management - content aligned with console workspace */
.api-management-page{width:min(1360px,100%);margin:0 auto;display:grid;gap:18px;padding:0 0 14px}.api-management-page .panel{margin-top:0}.api-management-hero{overflow:hidden}.api-management-hero-main{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:22px 24px}.api-management-hero-main>div:first-child{min-width:0}.section-eyebrow{display:block;margin-bottom:7px;color:#65dbe9;font-size:10px;font-weight:800;letter-spacing:.12em}.api-management-hero h2{margin:0;color:#eefaff;font-size:21px;letter-spacing:-.02em}.api-management-hero p{margin:7px 0 0;max-width:760px;color:#8eacbe;font-size:12px;line-height:1.65}.api-management-hero-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}.api-management-count{min-width:94px;padding-right:14px;border-right:1px solid #315772;text-align:right}.api-management-count span,.api-management-count strong{display:block}.api-management-count span{color:#7f9daf;font-size:10px}.api-management-count strong{margin-top:4px;color:#eaf9ff;font-size:15px}.api-management-count b{font-size:20px;color:#67e1ed}.api-management-guide{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #315772;background:#0f293d}.api-management-guide>div{padding:13px 24px;display:flex;align-items:center;gap:10px}.api-management-guide>div+div{border-left:1px solid #315772}.api-management-guide b{color:#d8edf8;font-size:11px;white-space:nowrap}.api-management-guide span{color:#7f9daf;font-size:11px}.api-management-section{display:grid;gap:12px}.api-management-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 2px}.api-management-section-head h3{margin:0;color:#eaf8ff;font-size:16px}.api-management-section-head p{margin:4px 0 0;color:#7997a9;font-size:11px}.api-management-simple-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.api-management-simple-card{min-height:122px;margin:0!important;padding:18px 19px;border:1px solid #2e526a;border-radius:13px;background:#102b40;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}.api-management-simple-card:hover{border-color:#47748d;background:#123049;transform:translateY(-1px)}.api-management-simple-card.is-public{border-color:#35677d}.api-management-simple-card.is-private{opacity:.82}.api-management-card-copy{min-width:0}.api-management-card-title{display:flex;align-items:center;gap:9px}.api-management-card-title strong{color:#edfaff;font-size:15px}.api-management-state{display:inline-flex;align-items:center;min-height:21px;padding:0 7px;border-radius:999px;background:#173c50;color:#71d9c9;font-size:9px;font-weight:800}.is-private .api-management-state{background:#253d4d;color:#93a8b5}.api-management-card-copy p{margin:8px 0 9px;color:#88a5b7;font-size:11px;line-height:1.55}.api-management-card-copy code{color:#62cfe0;font-size:11px}.api-switch{position:relative;display:block;width:44px;height:24px;flex:0 0 auto}.api-switch input{position:absolute;opacity:0;pointer-events:none}.api-switch i{position:absolute;inset:0;border-radius:999px;background:#385163;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:.16s}.api-switch i:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#d4e0e7;transition:.16s}.api-switch input:checked+i{background:#2aaebd}.api-switch input:checked+i:after{transform:translateX(20px);background:#fff}
@media(max-width:1040px){.api-management-simple-grid{grid-template-columns:1fr}.api-management-hero-main{flex-direction:column}.api-management-hero-actions{width:100%;justify-content:space-between}.api-management-guide{grid-template-columns:1fr}.api-management-guide>div+div{border-left:0;border-top:1px solid #315772}}@media(max-width:700px){.api-management-page{gap:14px}.api-management-hero-main{padding:18px}.api-management-hero-actions{align-items:stretch;flex-direction:column}.api-management-count{text-align:left;border-right:0;padding-right:0}.api-management-guide>div{padding:12px 18px;align-items:flex-start;flex-direction:column;gap:4px}.api-management-simple-card{min-height:108px;padding:15px}}


/* 2026-09-18 UI alignment */
.api-management-page{width:100%;max-width:none;margin:0;display:grid;gap:16px;padding:0 0 14px}
.api-management-page .panel{margin-top:0}
.api-management-section.panel{overflow:hidden}
.api-management-section-head{align-items:center;padding:14px 18px}
.api-management-section-head>div{display:grid;gap:4px}
.api-management-section-head h3{color:#eefaff;font-size:17px}
.api-management-section-head p{margin:0;color:#8eacbe;font-size:12px}
.api-management-panel-body{padding:16px 18px 18px}
.api-management-simple-card{min-height:116px}
.api-switch input:disabled+i{opacity:.55;cursor:wait}

.toast-area{top:20px;right:24px;left:auto;width:min(430px,calc(100vw - 32px));transform:none;gap:10px}
.toast{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:11px;padding:13px 14px;border-radius:13px;background:#15334c;text-align:left;box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 20px rgba(77,230,246,.08)}
.toast-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#224860;color:#dffaff;font-size:15px;font-weight:900;line-height:1}
.toast.success .toast-icon{background:#204d42;color:#9af0d0}.toast.warn .toast-icon{background:#584a28;color:#ffe6a0}.toast.error .toast-icon{background:#5a3040;color:#ffd9e2}
.toast-copy{min-width:0;display:grid;gap:3px}.toast-copy small{font-size:10px;font-weight:800;letter-spacing:.06em;color:#8fb1c4}.toast-copy b{font-size:13px;line-height:1.5;font-weight:750;color:#f4faff;overflow-wrap:anywhere}
.toast.warn .toast-copy b{color:#ffe6a0}.toast.error .toast-copy b{color:#ffd9e2}.toast-out{opacity:0;transform:translateX(10px);transition:.18s ease}
@media(max-width:700px){.toast-area{top:12px;right:12px;width:calc(100vw - 24px)}.api-management-panel-body{padding:12px}}

/* integration management */
.integration-shell{padding:0;overflow:hidden}.integration-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow:auto}.integration-tab{min-width:150px;padding:15px 18px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}.integration-tab b{color:var(--text)}.integration-tab small{font-size:10px}.integration-tab.active{background:rgba(68,200,255,.08);box-shadow:inset 0 -2px 0 var(--cyan)}.integration-detail{padding:20px}.integration-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.integration-form label{display:flex;flex-direction:column;gap:7px}.integration-form label span{font-size:12px;font-weight:700}.integration-secret-title{grid-column:1/-1;padding-top:12px;border-top:1px solid var(--line);font-weight:800}.integration-secret-title small{margin-left:8px;color:var(--muted);font-weight:500}.integration-help{margin-top:16px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.02)}@media(max-width:800px){.integration-form{grid-template-columns:1fr}.integration-tab{min-width:125px}.integration-detail{padding:14px}}

/* final admin UI polish */
.row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.column-desc-head{min-width:220px}
.column-description{min-width:220px;color:#9db7c8;line-height:1.55;white-space:normal}
.integration-view-detail{padding:0 20px 20px}
.integration-view-head{margin:0 -20px 18px;padding-left:20px;padding-right:20px}
.integration-head-actions{display:flex;align-items:center;gap:10px}
.integration-view-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.integration-view-row{min-height:72px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;justify-content:center;gap:6px}
.integration-view-row span{color:var(--muted);font-size:11px;font-weight:700}
.integration-view-row b{color:var(--text);font-size:14px;word-break:break-word}
.integration-security-note{margin-top:12px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018);display:flex;align-items:center;gap:12px}
.integration-security-note b{font-size:12px}.integration-security-note span{color:var(--muted);font-size:12px}
.integration-edit-note{margin-bottom:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:rgba(255,255,255,.02)}
.integration-edit-note small{color:var(--muted)}
.modal-integration-form{margin-top:0}
@media(max-width:800px){.integration-view-grid{grid-template-columns:1fr}.integration-head-actions{align-items:flex-end;flex-direction:column}}


/* 2026-09-18 login/toast final polish */
.login-panel > button[type="submit"]{margin-top:18px}
.toast-area{top:20px!important;left:50%!important;right:auto!important;width:min(460px,calc(100vw - 32px))!important;transform:translateX(-50%)!important;gap:10px!important}
.toast-copy b{white-space:pre-line!important;word-break:break-word!important;overflow-wrap:anywhere!important}
.toast-copy small{white-space:pre-line!important}
.toast-out{transform:translateY(-8px) scale(.98)!important}
@media(max-width:700px){.toast-area{top:12px!important;left:50%!important;right:auto!important;width:calc(100vw - 24px)!important;transform:translateX(-50%)!important}}


/* 2026-09-18 notification UX final */
.notice-row p{white-space:pre-wrap!important;word-break:break-word!important;overflow-wrap:anywhere!important}
.toast{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:start!important;gap:11px!important;padding:13px 14px!important}
.toast-body{min-width:0;display:grid;gap:6px}
.toast-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
.toast-title{min-width:0;font-size:13px;line-height:1.4;font-weight:800;color:#f4faff;white-space:pre-line;word-break:break-word;overflow-wrap:anywhere}
.toast-head time{flex:0 0 auto;font-size:10px;line-height:1.4;color:#8fb1c4;white-space:nowrap;padding-top:1px}
.toast-message{font-size:12px;line-height:1.55;color:#d8e6ef;white-space:pre-line;word-break:break-word;overflow-wrap:anywhere}
.toast.warn .toast-title,.toast.warn .toast-message{color:#ffe6a0}.toast.error .toast-title,.toast.error .toast-message{color:#ffd9e2}

/* Socket connection rooms */
.socket-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px}.socket-room-card{overflow:hidden;border:1px solid #315772;border-radius:14px;background:rgba(15,36,53,.72)}.socket-room-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border-bottom:1px solid #315772;background:rgba(27,57,83,.56)}.socket-room-head h3{margin:6px 0 2px;font-size:16px}.socket-room-card table{margin:0}.room-empty{grid-column:1/-1;padding:30px}@media(max-width:900px){.socket-room-grid{grid-template-columns:1fr}}
/* notification center readability */
.notice-row.unread{border-color:#477aa0;background:#193b58;box-shadow:0 0 0 1px rgba(78,145,194,.08)}
.notice-row.read{opacity:.74;background:#142f46}
.notice-title-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.notice-title-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.notice-unread-dot{width:7px;height:7px;border-radius:50%;background:#5eb4f0;box-shadow:0 0 0 3px rgba(94,180,240,.12);flex:0 0 7px}
.notice-state{flex:0 0 auto;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.2}
.notice-state.is-unread{background:#225b82;color:#d9f1ff}.notice-state.is-read{background:#20384b;color:#8fa8b8}
.notice-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:9px;border-top:1px solid #294b64}
.notice-foot time{font-size:11px;color:#8eabc0;white-space:nowrap;font-variant-numeric:tabular-nums}
.header-notification-btn svg{display:block}

/* v1.0.9 header account / socket room polish */
.account-trigger { min-width:0; height:40px; padding:4px 10px 4px 5px; gap:8px; border-color:#315a73; background:#102c40; border-radius:10px; }
.account-trigger:hover, .account-menu.open .account-trigger, .account-menu:focus-within .account-trigger { border-color:#4a7893; background:#17394f; }
.account-avatar { width:30px; height:30px; display:grid !important; place-items:center; flex:0 0 30px; border:1px solid #416c85; border-radius:8px; background:#0c2537; color:#8fd6e5; }
.account-name { min-width:72px; padding:0 4px; }
.account-name b { font-size:12px; line-height:1; }
.account-chevron { width:7px; height:7px; border-right:1.5px solid #91b4c7; border-bottom:1.5px solid #91b4c7; transform:rotate(45deg); margin:-4px 1px 0 4px; }
.account-menu.open .account-chevron, .account-menu:hover .account-chevron { transform:rotate(225deg); margin-top:4px; }
.socket-room-grid { display:grid; gap:14px; }
.socket-room-card { overflow:hidden; border:1px solid #2c526a; border-radius:12px; background:#0e293c; }
.socket-room-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 16px; border-bottom:1px solid #294b61; background:#102f45; }
.socket-room-head h3 { margin:5px 0 3px; font-size:15px; }
.socket-room-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; color:#9bb6c7; font-size:12px; }
.socket-room-summary b { color:#d5e7f0; }


/* v1.0.10 header tools polish */
.header-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.header-tools .header-notification-btn{margin:0!important;width:40px;height:40px;border-radius:10px;border:1px solid #315a73;background:#102c40;color:#f4faff;box-shadow:none;}
.header-tools .header-notification-btn:hover{border-color:#4a7893;background:#17394f;}
.header-tools .account-trigger{height:40px;min-width:0;padding:4px 10px 4px 5px;gap:8px;border:1px solid #315a73;background:#102c40;border-radius:10px;box-shadow:none;}
.header-tools .account-trigger:hover,.header-tools .account-menu.open .account-trigger,.header-tools .account-menu:focus-within .account-trigger{border-color:#4a7893;background:#17394f;}
.header-tools .account-avatar{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border:1px solid #416c85;border-radius:8px;background:#0c2537;color:#8fd6e5;}
.header-tools .account-name{min-width:0;padding:0 3px;}
.header-tools .account-name b{font-size:12px;line-height:1;white-space:nowrap;color:#f4faff;}
.header-tools .account-chevron{margin-left:3px;}


/* v1.0.11 notification center polish */
.header-tools .header-notification-btn{position:relative;display:grid!important;place-items:center!important;width:40px!important;height:40px!important;padding:0!important;border-radius:10px!important;}
.header-tools .header-notification-count{position:absolute!important;right:-5px!important;top:-6px!important;min-width:18px!important;height:18px!important;padding:0 4px!important;display:grid!important;place-items:center!important;border-radius:999px!important;background:#ef4444!important;color:#fff!important;font-size:10px!important;font-weight:800!important;line-height:1!important;border:2px solid #0f2639!important;box-shadow:none!important;}
.notification-admin-shell{height:min(620px,calc(100vh - 150px));min-height:380px;display:flex;flex-direction:column;margin:-4px;}
.notification-admin-head{flex:0 0 auto;margin:0!important;padding:14px 15px;border-bottom:1px solid #294b64;background:#112f45;}
.notification-admin-head>div{display:flex;flex-direction:column;gap:3px;}
.notification-admin-head strong{font-size:14px;color:#f1f8fc;}
.notification-admin-head span{font-size:10px;color:#8eabc0;}
.notification-admin-scroll{flex:1 1 auto;min-height:0;overflow:hidden;background:#0e293d;}
.notification-admin-list{height:100%;max-height:none!important;overflow:auto;padding:12px!important;gap:9px!important;}
.notice-row{cursor:pointer;padding:14px 15px!important;border-radius:12px!important;transition:border-color .15s ease,background .15s ease,transform .15s ease,opacity .15s ease;}
.notice-row:hover{border-color:#477a9b!important;background:#193b57!important;}
.notice-row:focus-visible{outline:2px solid #4f87aa;outline-offset:2px;}
.notice-row.read{opacity:.68!important;}
.notice-row.unread{opacity:1!important;}
.notice-row p{margin:9px 0!important;font-size:12px;line-height:1.6!important;}
.notice-sender{margin-top:5px!important;font-size:10px!important;}
.notice-foot{margin-top:11px!important;padding-top:10px!important;}
.notice-foot .modal-actions{margin:0!important;gap:6px!important;}
.notification-admin-policy{flex:0 0 auto;text-align:center;padding:11px 14px;border-top:1px solid #294b64;background:#112f45;color:#8eabc0;font-size:10px;line-height:1.4;}
.notice-empty-state{height:100%;min-height:260px;display:grid;place-items:center;}
@media(max-width:700px){.notification-admin-shell{height:calc(100vh - 120px);min-height:320px;}}
.monitor-room-card{border-color:#247c70;background:linear-gradient(145deg,rgba(12,53,54,.88),rgba(11,39,49,.9))}.monitor-room-card .socket-room-head{border-bottom-color:#276a64;background:rgba(18,76,72,.4)}