/* REBEAUTY STUDY — shared styles (front + admin). Palette follows k.rebeauty.co.kr/admin. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: 271 82% 35%;
  --primary-2: 271 65% 45%;
  --primary-fg: 270 100% 97%;
  --fg: 240 10% 3.9%;
  --bg: 0 0% 100%;
  --card: 0 0% 100%;
  --border: 240 5.9% 90%;
  --muted: 240 4.8% 95.9%;
  --muted-fg: 240 3.8% 46.1%;
  --ring: 271 82% 35%;
  --ok: 142 71% 35%;
  --warn: 32 95% 44%;
  --danger: 0 72% 51%;
  --info: 217 91% 50%;
  --radius: .5rem;
  --radius-lg: .75rem;
  --shadow: 0 1px 2px rgba(16, 4, 32, .06), 0 4px 16px rgba(16, 4, 32, .06);
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', 'Noto Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: hsl(var(--fg));
  background: hsl(var(--bg));
  line-height: 1.5;
  font-size: 15px;
}
a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: 'JetBrains Mono', Menlo, Consolas, 'D2Coding', monospace; font-size: .92em; }
code { background: hsl(var(--muted)); padding: .1em .4em; border-radius: .3em; }
small { font-size: .85em; }
.muted { color: hsl(var(--muted-fg)); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.link { font-size: .875rem; font-weight: 500; }
.ellipsis { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; }
h3 { font-size: .95rem; font-weight: 700; margin: 1rem 0 .5rem; }

/* ---------- auth (2 columns: brand | form) ---------- */
.auth-layout { display: flex; min-height: 100vh; }
.auth-brand-panel {
  flex: 1 1 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-2)));
  color: #fff; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 3rem;
}
.auth-brand-panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, hsl(340 70% 60% / .3) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, hsl(350 76% 70% / .2) 0%, transparent 50%),
              radial-gradient(circle at 80% 90%, hsl(260 90% 80% / .25) 0%, transparent 45%);
}
.auth-brand-inner { position: relative; z-index: 1; max-width: 520px; width: 100%; }
.auth-brand-logo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.auth-brand-mark { width: 60px; height: 60px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
.auth-brand-title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.auth-brand-subtitle { font-size: .85rem; opacity: .75; margin-top: .3rem; letter-spacing: .02em; }
.auth-brand-tagline { font-size: 1.25rem; font-weight: 700; opacity: .95; margin-bottom: 1.25rem; }
.auth-brand-features { list-style: none; display: grid; gap: .6rem; margin-bottom: 2rem; }
.auth-brand-features li { display: grid; gap: .1rem; padding-left: 1.4rem; position: relative; }
.auth-brand-features li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: hsl(300 100% 92%); }
.auth-brand-features strong { font-size: .95rem; }
.auth-brand-features span { font-size: .85rem; opacity: .8; }
.auth-brand-terminal { background: rgba(10, 4, 24, .55); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.auth-brand-terminal .term-bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem; background: rgba(255,255,255,.08); font-size: .75rem; opacity: .85; }
.auth-brand-terminal .term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; display: inline-block; }
.auth-brand-terminal .term-bar i:nth-child(2) { background: #febc2e; }
.auth-brand-terminal .term-bar i:nth-child(3) { background: #28c840; }
.auth-brand-terminal .term-bar span { margin-left: .5rem; }
.auth-brand-terminal .term-body { padding: .9rem 1rem; font-family: 'JetBrains Mono', Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.7; }
.auth-brand-terminal .p { color: #c084fc; font-weight: 700; margin-right: .4rem; }
.auth-brand-terminal .dim { opacity: .6; }
.auth-brand-terminal .cursor { display: inline-block; width: 8px; height: 1em; background: #c084fc; vertical-align: -2px; margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.auth-form-panel { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 2rem; background: hsl(var(--bg)); }
.auth-card { width: 100%; max-width: 420px; }
.auth-mobile-brand { display: none; align-items: center; gap: .6rem; justify-content: center; margin-bottom: 1.5rem; font-weight: 800; font-size: 1.1rem; }
.auth-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: .5rem; }
.auth-subtitle { font-size: .875rem; text-align: center; color: hsl(var(--muted-fg)); margin-bottom: 1.75rem; line-height: 1.55; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-error { display: flex; align-items: center; gap: .5rem; background: hsl(var(--danger) / .08); color: hsl(var(--danger)); border: 1px solid hsl(var(--danger) / .25); border-radius: var(--radius-lg); padding: .7rem .9rem; font-size: .875rem; margin-bottom: 1rem; }
.auth-footer { margin-top: 1.5rem; font-size: .8125rem; color: hsl(var(--muted-fg)); text-align: center; line-height: 1.6; }
.auth-copy { margin-top: 2rem; font-size: .75rem; color: hsl(var(--muted-fg)); text-align: center; }
.input-icon-wrap { position: relative; }
.input-icon { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-fg)); pointer-events: none; display: flex; }
.input-with-icon { padding-left: 2.75rem !important; }
@media (max-width: 900px) {
  .auth-brand-panel { display: none; }
  .auth-mobile-brand { display: flex; }
}

/* ---------- forms ---------- */
.form-input {
  width: 100%; padding: .7rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg);
  font-size: .9375rem; font-family: inherit; min-height: 2.75rem; color: hsl(var(--fg)); background: hsl(var(--card)); outline: none; transition: all .15s ease;
}
.form-input:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .12); }
.form-input::placeholder { color: hsl(var(--muted-fg)); }
.form-input:disabled { background: hsl(var(--muted)); color: hsl(var(--muted-fg)); }
textarea.form-input { min-height: 5rem; resize: vertical; }
select.form-input { appearance: auto; }
.form { display: flex; flex-direction: column; gap: 1rem; }
.form--inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
.form--inline .form-input { width: auto; flex: 1 1 160px; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .85rem; font-weight: 600; }
.field label small { font-weight: 400; color: hsl(var(--muted-fg)); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.input-row { display: flex; gap: .5rem; align-items: center; }
.input-row .form-input { flex: 1; }
.form-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.check { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; white-space: nowrap; }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.4rem; border: 1px solid transparent;
  border-radius: var(--radius-lg); font-size: .9375rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s ease; min-height: 2.75rem; white-space: nowrap; text-decoration: none !important;
}
.btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); width: 100%; }
.btn--primary:hover { opacity: .92; box-shadow: 0 2px 10px hsl(var(--primary) / .35); }
.btn--light { background: #fff; color: hsl(var(--primary)); }
.btn--light:hover { box-shadow: 0 6px 20px rgba(0,0,0,.2); transform: translateY(-1px); }
.btn--outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--fg)); }
.btn--outline:hover { background: hsl(var(--muted)); }
.btn--ghost { background: transparent; color: hsl(var(--primary)); }
.btn--ghost:hover { background: hsl(var(--primary) / .08); }
.btn--warn { background: hsl(var(--warn)); color: #fff; }
.btn--danger { background: hsl(var(--danger)); color: #fff; }
.btn--sm { padding: .45rem .9rem; min-height: 2.25rem; font-size: .85rem; }
.btn--xs { padding: .25rem .6rem; min-height: 1.75rem; font-size: .78rem; border-radius: var(--radius); }
.btn--lg { padding: .9rem 2rem; font-size: 1.05rem; min-height: 3.25rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.page-head .btn--primary, .card-head .btn--primary, .form-actions .btn--primary, .input-row .btn--primary, .form--inline .btn--primary { width: auto; }
.btn-group { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- cards / tables / badges ---------- */
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.card--flush { padding: 0; overflow: hidden; }
.card--soft { background: hsl(var(--primary) / .04); border-color: hsl(var(--primary) / .15); box-shadow: none; }
.card--danger { border-color: hsl(var(--danger) / .35); }
.card--gradient { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-2))); color: #fff; border: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.card-head h2 { margin: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grid-2--form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .grid-2, .grid-2--form { grid-template-columns: 1fr; } }
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th, .table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--muted-fg)); font-weight: 600; background: hsl(var(--muted) / .6); white-space: nowrap; }
.table tbody tr:hover { background: hsl(var(--primary) / .03); }
.card--flush .table th:first-child, .card--flush .table td:first-child { padding-left: 1.25rem; }
.badge { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.badge--ok { background: hsl(var(--ok) / .12); color: hsl(var(--ok)); }
.badge--warn { background: hsl(var(--warn) / .14); color: hsl(var(--warn)); }
.badge--danger { background: hsl(var(--danger) / .12); color: hsl(var(--danger)); }
.badge--info { background: hsl(var(--info) / .12); color: hsl(var(--info)); }
.badge--muted { background: hsl(var(--muted)); color: hsl(var(--muted-fg)); }
.chip { display: inline-block; padding: .1rem .5rem; border-radius: .35rem; font-size: .75rem; font-weight: 600; background: hsl(var(--muted)); color: hsl(var(--fg)); white-space: nowrap; }
.chip--login, .chip--admin_login, .chip--console_open { background: hsl(var(--ok) / .12); color: hsl(var(--ok)); }
.chip--login_fail { background: hsl(var(--danger) / .12); color: hsl(var(--danger)); }
.chip--console_close, .chip--logout, .chip--admin_logout { background: hsl(var(--warn) / .12); color: hsl(var(--warn)); }
.chip--user_create, .chip--user_password, .chip--user_enable { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.chip--user_disable, .chip--user_delete { background: hsl(var(--danger) / .12); color: hsl(var(--danger)); }
.alert { padding: .8rem 1rem; border-radius: var(--radius-lg); margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.alert--ok { background: hsl(var(--ok) / .08); border-color: hsl(var(--ok) / .3); color: hsl(var(--ok)); }
.alert--err { background: hsl(var(--danger) / .08); border-color: hsl(var(--danger) / .3); color: hsl(var(--danger)); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; font-size: .9rem; }
.kv dt { color: hsl(var(--muted-fg)); font-weight: 600; white-space: nowrap; }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.steps { list-style: none; counter-reset: s; display: grid; gap: .85rem; }
.steps li { display: grid; gap: .15rem; padding-left: 2.4rem; position: relative; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: .05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: hsl(var(--primary)); color: #fff; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.steps b { font-size: .95rem; }
.steps span { font-size: .875rem; color: hsl(var(--muted-fg)); }
.steps--compact { gap: .6rem; }
.details summary { cursor: pointer; font-size: .875rem; font-weight: 600; margin-top: .75rem; color: hsl(var(--primary)); }
.pre { background: #16102a; color: #e6e0f5; padding: .9rem 1rem; border-radius: var(--radius); font-size: .78rem; overflow: auto; max-height: 300px; white-space: pre-wrap; margin-top: .5rem; }
.pagination { display: flex; gap: .3rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.pagination a { padding: .3rem .7rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); font-size: .85rem; }
.pagination a.active { background: hsl(var(--primary)); color: #fff; border-color: transparent; }
.filter-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-bar .form-input { width: auto; flex: 0 1 240px; min-height: 2.5rem; padding: .5rem .8rem; }
.filter-bar .btn { min-height: 2.5rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 1.25rem; overflow-x: auto; }
.tabs a { padding: .6rem 1rem; font-size: .9rem; font-weight: 600; color: hsl(var(--muted-fg)); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active, .tabs a:hover { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); text-decoration: none; }
.prompt-list { list-style: none; display: grid; gap: .6rem; }
.prompt-list--numbered { counter-reset: p; }
.prompt-list--numbered li { position: relative; padding-left: 2.2rem; }
.prompt-list--numbered li::before { counter-increment: p; content: counter(p); position: absolute; left: 0; top: .2rem; font-size: .75rem; font-weight: 700; color: hsl(var(--muted-fg)); width: 1.6rem; text-align: right; }
.prompt-meta { font-size: .75rem; color: hsl(var(--muted-fg)); margin-bottom: .2rem; }
.prompt-text { font-family: 'JetBrains Mono', Menlo, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; background: hsl(var(--muted)); padding: .55rem .75rem; border-radius: var(--radius); border-left: 3px solid hsl(var(--primary)); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.stat-grid--sm { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: .9rem 1rem; box-shadow: var(--shadow); color: hsl(var(--fg)); text-decoration: none !important; }
.stat b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat b small { font-size: .85rem; color: hsl(var(--muted-fg)); font-weight: 600; }
.stat span { font-size: .78rem; color: hsl(var(--muted-fg)); font-weight: 600; }
.stat--ok b { color: hsl(var(--ok)); }
.stat--warn b { color: hsl(var(--warn)); }
.stat--danger b { color: hsl(var(--danger)); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head h1 { display: flex; align-items: center; gap: .6rem; }

/* ---------- front (logged in) ---------- */
.front { min-height: 100vh; background: #f7f5fb; display: flex; flex-direction: column; }
.front-header { height: 62px; display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.5rem); background: #fff; border-bottom: 1px solid hsl(var(--border)); position: sticky; top: 0; z-index: 10; }
.front-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.05rem; color: hsl(var(--fg)); letter-spacing: -.02em; }
.front-brand img { width: 30px; height: 30px; object-fit: contain; }
.front-header-spacer { flex: 1; }
.front-me { font-size: .875rem; color: hsl(var(--muted-fg)); }
.front-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem; flex: 1; }
.front-main.narrow { max-width: 560px; padding-top: 4rem; }
.hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: center; padding: 2rem 2.2rem; }
.hero h1 { font-size: 1.9rem; margin: .3rem 0 .6rem; }
.hero p { opacity: .9; margin-bottom: 1.4rem; max-width: 560px; }
.hero .btn--light { width: auto; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.hero-actions .btn { width: auto; }
.hero-url { margin-top: .9rem; font-family: 'JetBrains Mono', Menlo, Consolas, monospace; font-size: .85rem; opacity: .8; }
.btn--ghost-light { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.24); }
.hero-side { display: grid; gap: .6rem; }
.mini-stat { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); padding: .7rem 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mini-stat b { font-size: 1.35rem; font-weight: 800; }
.mini-stat span { font-size: .78rem; opacity: .85; }
.front-footer { text-align: center; font-size: .78rem; color: hsl(var(--muted-fg)); margin-top: 2rem; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .front-me { display: none; } }

/* ---------- console ---------- */
.console-html, .console-body { height: 100%; }
.console-body { background: #120b1f; color: #ece6f7; overflow: hidden; }
.console { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.console-bar { display: flex; align-items: center; gap: 1rem; padding: 0 1rem; height: 52px; background: #1a1230; border-bottom: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; }
.console-brand { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 800; font-size: .95rem; }
.console-brand img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.console-title { font-size: .85rem; color: rgba(255,255,255,.7); }
.console-title code { background: rgba(255,255,255,.1); color: #e6c2ff; }
.console-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: rgba(255,255,255,.75); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #666; display: inline-block; }
.dot--ok { background: #28c840; box-shadow: 0 0 8px #28c840; }
.dot--idle { background: #febc2e; }
.dot--err, .dot--off { background: #ff5f57; }
.console-bar-spacer { flex: 1; }
.console-bar .btn--outline { border-color: rgba(255,255,255,.25); color: #fff; }
.console-bar .btn--outline:hover { background: rgba(255,255,255,.08); }
.console-bar .btn--ghost { color: #e6c2ff; }
.console-tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .45rem 1rem; background: #170f2a; border-bottom: 1px solid rgba(255,255,255,.07); flex: 0 0 auto; }
.btn--tool { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: #ece6f7; padding: .35rem .8rem; min-height: 2rem; font-size: .82rem; font-weight: 600; border-radius: .5rem; }
.btn--tool:hover { background: rgba(255,255,255,.18); }
.btn--tool.is-on { background: #7c3aed; border-color: #a855f7; color: #fff; box-shadow: 0 0 0 3px rgba(168,85,247,.25); }
.console-hint { font-size: .74rem; color: rgba(255,255,255,.5); margin-left: auto; }
.console-hint kbd { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: .25rem; padding: .05em .35em; font-family: inherit; font-size: .95em; }
.console-term-wrap { flex: 1 1 auto; min-height: 0; padding: .6rem .6rem 0; }
.console-term.select-mode { cursor: text; }
.console-term.select-mode .xterm-screen { cursor: text !important; }
.toast { position: fixed; left: 50%; bottom: 4.5rem; transform: translate(-50%, 1rem); background: #2b1b4d; color: #fff; border: 1px solid rgba(255,255,255,.2); padding: .6rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all .18s ease; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.toast--show { opacity: 1; transform: translate(-50%, 0); }
.toast--warn { background: #7c2d12; }
/* display:flex would override the UA [hidden] rule, so the open state is opt-in */
.modal { display: none; position: fixed; inset: 0; background: rgba(10,4,24,.72); align-items: center; justify-content: center; z-index: 70; padding: 1rem; }
.modal:not([hidden]) { display: flex; }
.modal-box { background: #fff; color: hsl(var(--fg)); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; width: 100%; max-width: 560px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.modal-box h2 { margin-bottom: .5rem; }
.modal-box p { font-size: .875rem; color: hsl(var(--muted-fg)); margin-bottom: .9rem; line-height: 1.6; }
.modal-box kbd { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: .25rem; padding: .05em .35em; font-size: .95em; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.link-list { display: grid; gap: .5rem; max-height: 40vh; overflow: auto; }
.link-row { display: flex; align-items: center; gap: .6rem; background: hsl(var(--muted)); border-radius: var(--radius); padding: .5rem .7rem; }
.link-row a { font-family: 'JetBrains Mono', Menlo, Consolas, monospace; font-size: .78rem; overflow-wrap: anywhere; flex: 1; }
.console-term { height: 100%; width: 100%; }
.console-term .xterm { height: 100%; }
.console-term .xterm-viewport { border-radius: var(--radius); }
.console-foot { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: .45rem 1rem; font-size: .75rem; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.06); flex: 0 0 auto; }
.console-foot code { background: rgba(255,255,255,.1); color: #e6c2ff; }
@media (max-width: 700px) { .console-title, .console-foot span:nth-child(n+2) { display: none; } }

/* ---------- admin shell: header + side menu + full-width content ---------- */
.adm-body-root { background: #f7f5fb; }
.adm { min-height: 100vh; display: flex; flex-direction: column; }
.adm-header { height: 60px; display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; background: #fff; border-bottom: 1px solid hsl(var(--border)); position: sticky; top: 0; z-index: 30; }
.adm-brand { display: flex; align-items: center; gap: .6rem; color: hsl(var(--fg)); font-weight: 800; letter-spacing: -.02em; }
.adm-brand:hover { text-decoration: none; }
.adm-brand-logo { width: 30px; height: 30px; object-fit: contain; }
.adm-brand-text small { font-size: .65rem; background: hsl(var(--primary)); color: #fff; padding: .1rem .4rem; border-radius: .3rem; margin-left: .35rem; vertical-align: middle; }
.adm-header-spacer { flex: 1; }
.adm-me { font-size: .875rem; color: hsl(var(--muted-fg)); }
.adm-burger { display: none; font-size: 1.3rem; cursor: pointer; padding: .2rem .5rem; }
.adm-body { display: flex; flex: 1; min-height: 0; }
.adm-side { width: 236px; flex: 0 0 236px; background: #fff; border-right: 1px solid hsl(var(--border)); padding: 1rem .75rem; display: flex; flex-direction: column; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
.adm-menu { list-style: none; display: grid; gap: .15rem; }
.adm-menu a { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: var(--radius-lg); color: hsl(var(--fg)); font-weight: 600; font-size: .9rem; }
.adm-menu a:hover { background: hsl(var(--muted)); text-decoration: none; }
.adm-menu a.active { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.adm-menu svg { flex: 0 0 auto; opacity: .8; }
.adm-side-foot { margin-top: auto; padding: 1rem .8rem 0; font-size: .72rem; color: hsl(var(--muted-fg)); line-height: 1.5; }
.adm-main { flex: 1 1 auto; min-width: 0; width: 100%; padding: 1.5rem clamp(1rem, 2.5vw, 2rem) 3rem; }
@media (max-width: 900px) {
  .adm-burger { display: inline-block; }
  .adm-side { position: fixed; left: -260px; top: 60px; height: calc(100vh - 60px); transition: left .2s ease; z-index: 25; box-shadow: none; }
  .adm-nav-toggle:checked ~ .adm-body .adm-side { left: 0; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
  .adm-me { display: none; }
}