:root { --app-ink:#18343d; --app-muted:#546971; --app-accent:#08796e; --app-border:#dbe5e7; }
body { margin:0; color:var(--app-ink); background:#f4f7f8; font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif; line-height:1.65; }
a { color:var(--app-accent); }
:focus-visible { outline:3px solid #dc9b22; outline-offset:4px; }
.skip-link { position:fixed; top:-6rem; left:1rem; z-index:1100; padding:.65rem 1rem; background:white; color:var(--app-ink); border:2px solid var(--app-accent); }
.skip-link:focus { top:1rem; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:16rem minmax(0,1fr); }
.sidebar { background:#17353e; color:#e7f0f0; padding:1.8rem 1.2rem; }
.brand-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.brand { color:white; text-decoration:none; display:flex; gap:.8rem; align-items:center; font-size:.82rem; line-height:1.55; }
.brand:hover { color:white; }
.brand strong { font-size:1.05rem; }
.brand-mark { background:#a6e4d8; color:#17353e; padding:.3rem .85rem; border-radius:.7rem; font-size:1.65rem; font-weight:800; }
.nav-caption { margin:0 .9rem .8rem; font-size:.72rem; letter-spacing:.12em; color:#b0c8ce; }
.sidebar .nav-link { padding:.75rem .85rem; border-radius:.5rem; color:#d8e6e9; font-size:.95rem; }
.sidebar .nav-link:hover { color:white; background:#244952; }
.sidebar .nav-link.active { color:#103e37; background:#b9eadd; font-weight:700; }
.nav-index { font-size:.68rem; opacity:.8; display:inline-block; width:1.65rem; }
.sidebar-note { border-top:1px solid #37535b; padding:.9rem; margin-top:2rem; color:#c1d4d7; font-size:.76rem; }
.status-dot { display:inline-block; width:.4rem; height:.4rem; margin-right:.3rem; background:#9ad7c8; border-radius:50%; }
.workspace { min-width:0; display:flex; flex-direction:column; }
.workspace-header { min-height:4.8rem; background:white; border-bottom:1px solid var(--app-border); padding:1.1rem 2.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.82rem; color:var(--app-muted); }
.environment-badge { background:#f0f6f4; color:#266455; border:1px solid #d3e6df; padding:.18rem .65rem; border-radius:2rem; white-space:nowrap; font-size:.72rem; }
.workspace-main { padding:2rem 2.5rem; flex:1; max-width:95rem; width:100%; margin:auto; }
.breadcrumb { font-size:.78rem; margin-bottom:1.8rem; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
.eyebrow { color:var(--app-accent); font-size:.75rem; font-weight:700; margin-bottom:.6rem; }
h1 { font-size:2rem; font-weight:750; letter-spacing:-.06em; margin-bottom:.8rem; }
.page-description { color:var(--app-muted); font-size:.92rem; margin:0; }
.stage-badge { border:1px solid var(--app-border); border-radius:.4rem; background:white; padding:.25rem .7rem; color:var(--app-muted); font-size:.75rem; white-space:nowrap; }
.empty-panel { background:white; border:1px solid var(--app-border); border-radius:.9rem; min-height:22rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.5rem 1.5rem; }
.empty-panel h2 { font-size:1.15rem; font-weight:700; margin-bottom:.8rem; }
.empty-panel p { color:var(--app-muted); font-size:.86rem; max-width:32rem; }
.empty-panel .empty-hint { margin:0; font-size:.78rem; }
.empty-symbol { width:4rem; height:4rem; background:#ecf5f2; border:1px solid #d5e8e1; border-radius:1rem; padding:1.15rem .85rem; margin-bottom:1.7rem; }
.empty-symbol span { display:block; background:#529688; height:3px; margin-bottom:.35rem; border-radius:2px; }
.empty-symbol span:last-child { width:60%; }
.workspace-footer { padding:1rem 2.5rem 1.5rem; color:var(--app-muted); font-size:.72rem; }
.btn-primary { --bs-btn-bg:#08796e; --bs-btn-border-color:#08796e; --bs-btn-hover-bg:#056258; --bs-btn-hover-border-color:#056258; --bs-btn-active-bg:#045148; --bs-btn-active-border-color:#045148; }
.form-label { font-weight:600; }
.required-label { color:#8c3030; font-size:.78rem; }
.form-control:focus,.form-select:focus { border-color:#08796e; box-shadow:0 0 0 .2rem #08796e25; }
.error-panel { text-align:center; background:white; border:1px solid var(--app-border); border-radius:.9rem; padding:3rem 1.5rem; margin-top:2rem; }
.error-code { font-size:3.5rem; font-weight:750; color:var(--app-accent); margin:0 0 1rem; }
.error-panel .btn { margin:1.8rem 0; }
.error-reference { color:var(--app-muted); font-size:.78rem; margin:0; }
.network-notice { position:fixed; bottom:1rem; right:1rem; left:1rem; max-width:40rem; margin:auto; z-index:1080; }
.menu-toggle { border:1px solid #66838b; color:white; }
@media (max-width:991.98px) {
  .app-shell { display:block; }
  .sidebar { padding:1rem; }
  .brand-row { margin-bottom:0; }
  #main-menu { padding-top:1.5rem; }
  .workspace-header { min-height:3.5rem; padding:1rem; }
  .workspace-main { padding:1.5rem 1rem; }
  .workspace-footer { padding:1rem; }
  h1 { font-size:1.65rem; }
  .empty-panel { min-height:19rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }