@layer base, layout, components, preferences;
@layer base {
  :root { color-scheme:light; --bg:#f5f6f2; --surface:#fff; --surface-soft:#f0f3ed; --ink:#182c29; --muted:#536660; --line:#dce3da; --green:#153f3a; --accent:#deedb8; --good:#23633e; --good-bg:#eaf4e8; --warn:#7c500b; --warn-bg:#fff4df; --bad:#a12d35; --bad-bg:#ffebed; --focus:#147aab; --nav:244px; --radius:16px; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); }
  h1,h2,h3,p { margin:0; }
  h1 { font-size:2rem; line-height:1.2; font-weight:650; letter-spacing:-.035em; }
  h2 { font-size:1.22rem; line-height:1.4; font-weight:650; }
  h3 { font-size:1.04rem; line-height:1.5; }
  p { max-width:72ch; }
  a { color:var(--green); text-underline-offset:4px; overflow-wrap:anywhere; }
  button,input,textarea,select { font:inherit; }
  button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
  button,a { touch-action:manipulation; }
  button { cursor:pointer; }
  button:disabled { cursor:wait; opacity:.6; }
  input,select,textarea { width:100%; min-height:48px; padding:10px 13px; border:1px solid #9eafa4; border-radius:9px; background:var(--surface); color:var(--ink); }
  textarea { min-height:110px; resize:vertical; }
  label { display:block; font-weight:600; margin-bottom:7px; }
  input[type=checkbox] { width:20px; min-height:20px; height:20px; flex-shrink:0; accent-color:var(--green); }
  input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
  :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
  :disabled { opacity:.6; }
  small,.small { font-size:.875rem; }
  code,pre { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
  code { font-size:.875em; overflow-wrap:anywhere; }
  pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.82rem; line-height:1.75; }
  svg { width:20px; height:20px; flex-shrink:0; }
  hr { border:0; border-top:1px solid var(--line); margin:24px 0; }
  [hidden] { display:none!important; }
  .muted { color:var(--muted); }
  .eyebrow { font-size:.76rem; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .skip { position:fixed; top:-100px; left:16px; background:var(--surface); padding:12px 20px; z-index:100; }
  .skip:focus { top:12px; }
}
@layer layout {
  .shell { min-height:100dvh; display:grid; grid-template-columns:var(--nav) minmax(0,1fr); }
  .sidebar { position:sticky; top:0; height:100dvh; overflow-y:auto; display:flex; flex-direction:column; background:var(--surface); padding:28px 18px 18px; border-right:1px solid var(--line); }
  .brand { display:flex; align-items:center; gap:11px; padding:0 10px 27px; text-decoration:none; color:var(--ink); font-weight:750; font-size:1.35rem; letter-spacing:-.04em; }
  .brand img { width:36px; height:36px; }
  .brand em { font-style:normal; font-weight:450; }
  .workspace { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; margin-bottom:24px; font-size:.87rem; }
  .workspace-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:8px; background:var(--surface-soft); font-weight:700; }
  .nav-group { margin:16px 12px 7px; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
  .nav { display:flex; flex-direction:column; gap:4px; }
  .nav a { min-height:46px; display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:9px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:550; }
  .nav a:hover { background:var(--surface-soft); color:var(--ink); }
  .nav a[aria-current=page] { background:var(--green); color:#fff; }
  .sidebar-bottom { margin-top:auto; padding-top:30px; }
  .server-badge { display:flex; gap:10px; padding:13px 10px; border-top:1px solid var(--line); margin-top:20px; }
  .main-wrap { min-width:0; }
  .topbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:16px 36px; background:var(--surface); }
  .breadcrumb { font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:12px; }
  .top-actions { display:flex; gap:10px; align-items:center; }
  main.content { max-width:1540px; padding:36px; margin:0 auto; }
  .page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }
  .page-heading p { margin-top:9px; color:var(--muted); }
  .row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .between { justify-content:space-between; }
  .stack { display:flex; flex-direction:column; gap:20px; }
  .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:22px; align-items:start; }
  .section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:30px 0 16px; flex-wrap:wrap; }
  .section-head:first-child { margin-top:0; }
  .field { margin:18px 0; }
  .field small { display:block; color:var(--muted); margin-top:6px; }
  .check { display:flex; gap:12px; align-items:flex-start; font-weight:450; }
  .check input { margin-top:3px; }
  .login { min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; }
  .login-story { background:var(--green); color:#fff; padding:60px; display:flex; flex-direction:column; justify-content:space-between; }
  .login-story .brand { color:#fff; padding:0; }
  .login-story h1 { font-size:3.4rem; line-height:1.15; max-width:9ch; margin:40px 0 25px; }
  .login-story p { color:#d3e3db; max-width:38ch; }
  .login-form { display:flex; align-items:center; justify-content:center; padding:40px; }
  .login-form form { max-width:400px; width:100%; }
  .login-form h2 { font-size:1.8rem; margin-bottom:8px; }
  .loading { padding:60px; }
}
@layer components {
  .btn { display:inline-flex; gap:9px; align-items:center; justify-content:center; min-height:46px; padding:10px 16px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); text-decoration:none; font-weight:600; font-size:.875rem; line-height:1.45; }
  .btn:hover { border-color:#97aba1; background:var(--surface-soft); }
  .btn.primary { background:var(--green); color:#fff; border-color:var(--green); }
  .btn.primary:hover { filter:brightness(1.15); }
  .btn.danger { background:var(--bad-bg); color:var(--bad); border-color:#dfabb0; }
  .btn.quiet { border-color:transparent; background:transparent; }
  .btn.full { width:100%; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; min-width:0; }
  .card.flush { padding:0; overflow:hidden; }
  .metric { position:relative; }
  .metric .metric-label { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.9rem; }
  .metric .value { display:block; font-size:2.25rem; line-height:1.4; letter-spacing:-.04em; font-weight:600; margin:13px 0 4px; font-variant-numeric:tabular-nums; }
  .metric .value small { font-size:1rem; font-weight:400; letter-spacing:0; color:var(--muted); }
  .metric p { color:var(--muted); font-size:.82rem; }
  .metric.hero { background:var(--green); color:#fff; border:0; }
  .metric.hero p,.metric.hero .metric-label,.metric.hero .value small { color:#d2e4db; }
  .metric.hero .chip { background:#2b5447; color:#effbdd; border:0; }
  .chip { display:inline-flex; align-items:center; gap:6px; font-size:.73rem; line-height:1.5; font-weight:600; border:1px solid var(--line); border-radius:6px; padding:4px 8px; color:var(--muted); background:var(--surface-soft); white-space:normal; }
  .chip.good { color:var(--good); background:var(--good-bg); border-color:transparent; }
  .chip.warn { color:var(--warn); background:var(--warn-bg); border-color:transparent; }
  .chip.bad { color:var(--bad); background:var(--bad-bg); border-color:transparent; }
  .dot { width:7px; height:7px; background:currentColor; border-radius:50%; display:inline-block; flex-shrink:0; }
  progress { width:100%; height:7px; display:block; border:0; border-radius:9px; margin:16px 0 12px; overflow:hidden; background:var(--line); accent-color:var(--green); }
  progress::-webkit-progress-bar { background:var(--line); }
  progress::-webkit-progress-value { background:var(--green); border-radius:9px; }
  .service-row { display:grid; grid-template-columns:minmax(200px,1.6fr) minmax(140px,1fr) minmax(100px,.65fr) auto; gap:20px; align-items:center; padding:21px 24px; border-bottom:1px solid var(--line); }
  .service-row:last-child { border-bottom:0; }
  .service-row:hover { background:var(--surface-soft); }
  .service-identity { display:flex; align-items:center; gap:14px; min-width:0; }
  .service-logo { flex-shrink:0; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface-soft); color:var(--green); border:1px solid var(--line); font-weight:700; font-size:.85rem; }
  .service-identity a { color:var(--ink); font-weight:600; text-decoration:none; }
  .service-identity a:hover { text-decoration:underline; }
  .service-identity p { color:var(--muted); font-size:.8rem; margin-top:3px; }
  .service-meta { font-size:.82rem; color:var(--muted); }
  .service-meta a { color:var(--muted); }
  .service-meta strong { color:var(--ink); font-weight:500; display:block; }
  .table-head { background:var(--surface-soft); color:var(--muted); font-size:.73rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding-block:13px; }
  .notice { padding:17px 20px; border:1px solid var(--line); background:var(--surface-soft); border-radius:12px; display:flex; align-items:flex-start; gap:12px; font-size:.875rem; }
  .notice svg { margin-top:3px; }
  .notice.warn { background:var(--warn-bg); color:var(--warn); border-color:#e9d7b9; }
  .notice.bad { background:var(--bad-bg); color:var(--bad); border-color:#ebc4c8; }
  .notice.good { background:var(--good-bg); color:var(--good); border-color:#cce0ca; }
  .notice h3 { font-size:.9rem; margin-bottom:4px; }
  .search { position:relative; max-width:370px; flex:1; min-width:210px; }
  .search input { padding-left:42px; background:var(--surface); border-color:var(--line); }
  .search svg { position:absolute; top:14px; left:13px; color:var(--muted); }
  .tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin:20px 0 26px; overflow-x:auto; padding-bottom:0; }
  .tabs a { white-space:nowrap; text-decoration:none; color:var(--muted); min-height:48px; padding:12px 14px; border-bottom:3px solid transparent; font-size:.87rem; }
  .tabs a[aria-current=page] { color:var(--green); border-bottom-color:var(--green); font-weight:650; }
  .detail-list { margin:0; }
  .detail-list>div { display:grid; grid-template-columns:minmax(100px,1fr) minmax(0,1.5fr); gap:14px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.87rem; }
  .detail-list>div:last-child { border:0; }
  dt { color:var(--muted); } dd { margin:0; overflow-wrap:anywhere; }
  table { width:100%; border-collapse:collapse; font-size:.875rem; }
  th { text-align:left; font-weight:600; background:var(--surface-soft); color:var(--muted); }
  th,td { padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
  tr:last-child td { border-bottom:0; }
  .table-scroll { overflow:auto; }
  .logs { background:#162824; color:#d7e9df; padding:24px; min-height:260px; max-height:600px; overflow:auto; border-radius:12px; margin-top:18px; }
  .empty { text-align:center; padding:45px 25px; color:var(--muted); }
  .empty svg { width:32px; height:32px; margin-bottom:12px; }
  .empty h3 { color:var(--ink); margin-bottom:8px; }
  .timeline-item { display:flex; gap:14px; padding:17px 0; border-bottom:1px solid var(--line); }
  .timeline-item:last-child { border:0; }
  .timeline-icon { border:1px solid var(--line); width:35px; height:35px; display:grid; place-items:center; border-radius:50%; flex-shrink:0; }
  .timeline-item p { font-size:.83rem; color:var(--muted); margin-top:4px; }
  .timeline-item h3 { font-size:.9rem; }
  .help-list { display:flex; flex-direction:column; gap:17px; margin-top:20px; }
  .help-item { display:flex; gap:12px; }
  .help-item>span { width:25px; height:25px; border:1px solid var(--line); border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:.75rem; color:var(--muted); }
  .help-item p { font-size:.83rem; color:var(--muted); }
  .help-item strong { display:block; color:var(--ink); font-size:.88rem; margin-bottom:3px; }
  .spaced { margin-top:22px; }
  .chart { width:100%; height:140px; color:var(--green); margin:20px 0; }
  .chart path { fill:none; stroke:currentColor; stroke-width:2.5; vector-effect:non-scaling-stroke; }
  .chart line { stroke:var(--line); stroke-width:1; }
  details { border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin:12px 0; }
  summary { cursor:pointer; min-height:32px; font-weight:600; }
  details>p,details>div { margin-top:12px; }
  .form-error { margin:14px 0; color:var(--bad); background:var(--bad-bg); border-radius:8px; padding:12px; }
  .form-error:empty { display:none; }
  #notice:not(:empty) { position:fixed; bottom:22px; right:22px; z-index:40; width:min(430px,calc(100% - 44px)); padding:16px 20px; background:var(--green); color:white; border-radius:12px; box-shadow:0 8px 32px #10221d26; }
  dialog { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:18px; padding:28px; max-width:620px; width:calc(100% - 32px); max-height:90dvh; overflow:auto; box-shadow:0 24px 100px #10221d33; }
  dialog::backdrop { background:#10221d80; }
  dialog h2 { font-size:1.45rem; margin-bottom:12px; }
  dialog .dialog-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:26px; flex-wrap:wrap; }
  .secret { background:var(--surface-soft); border:1px solid var(--line); padding:16px; border-radius:8px; display:block; overflow-wrap:anywhere; white-space:pre-wrap; user-select:all; margin:16px 0; }
  .password-wrap { display:flex; gap:8px; }
  .password-wrap input { min-width:0; }
  .coverage-row { padding:19px 0; border-bottom:1px solid var(--line); }
  .coverage-row:last-child { border:0; }
  .coverage-row h3 { font-size:.95rem; }
  .coverage-row p { font-size:.86rem; color:var(--muted); margin:8px 0; }
  .mobile-menu { display:none; }
}
@layer preferences {
  html[data-theme=dark] { color-scheme:dark; --bg:#121d1b; --surface:#1b2926; --surface-soft:#233631; --ink:#e4ede7; --muted:#adbbb2; --line:#3a4e45; --green:#b9dba7; --accent:#334a38; --good:#b9dba7; --good-bg:#253d2b; --warn:#f1cf96; --warn-bg:#3c3020; --bad:#ffb7bd; --bad-bg:#40272b; --focus:#7dc7ed; }
  html[data-theme=dark] .btn.primary,html[data-theme=dark] .nav a[aria-current=page] { color:#15261a; }
  html[data-theme=dark] .metric.hero,html[data-theme=dark] .login-story { background:#254c3f; }
  html[data-theme=dark] #notice:not(:empty) { background:#254c3f; }
  html[data-size="18"] { font-size:18px; } html[data-size="20"] { font-size:20px; } html[data-size="22"] { font-size:22px; }
  html[data-font=arial] { font-family:Arial,sans-serif; } html[data-font=verdana] { font-family:Verdana,sans-serif; }
  html[data-spacing=true] { line-height:1.85; letter-spacing:.025em; word-spacing:.08em; }
  html[data-spacing=true] p,html[data-spacing=true] td { line-height:1.85; }
  html[data-contrast=true] { --muted:#33473f; --line:#8e9c93; }
  html[data-contrast=true][data-theme=dark] { --muted:#d5e2d9; --line:#8eaa99; }
  html[data-focus=true] .secondary-content { display:none; }
  @media(max-width:1200px) { :root{--nav:218px} main.content{padding:28px} .topbar{padding:16px 28px} .service-row{grid-template-columns:minmax(170px,1.5fr) minmax(110px,1fr) auto;gap:12px}.service-row>.service-meta:nth-child(3){display:none}.split{grid-template-columns:1fr}.grid{gap:12px} }
  @media(max-width:900px) { :root{--nav:194px} .sidebar{padding:24px 10px 12px}.nav a{padding:10px;font-size:.84rem}.workspace{padding:8px}.brand{font-size:1.17rem;padding-inline:6px}.grid{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}.metric .value{font-size:1.9rem}.page-heading{align-items:flex-start}h1{font-size:1.75rem}.login-story{padding:35px}.login-story h1{font-size:2.6rem} }
  @media(max-width:680px) { .shell{display:block}.sidebar{display:none;position:relative;height:auto;border-bottom:1px solid var(--line);padding:20px}.shell.menu-open .sidebar{display:flex}.sidebar-bottom{margin-top:12px;padding:0}.server-badge{display:none}.mobile-menu{display:inline-flex}.topbar{padding:12px 18px;min-height:68px}.breadcrumb{display:none}.top-actions{margin-left:auto}.top-actions .account-name{display:none}main.content{padding:26px 18px}.page-heading{flex-direction:column;gap:16px;margin-bottom:22px}.page-heading .row{width:100%}.page-heading .btn{flex:1}.service-row{grid-template-columns:minmax(0,1fr) auto;padding:18px;gap:10px}.service-row>.service-meta{display:none}.service-row.table-head{display:none}.service-row>.btn{padding:10px}.service-logo{width:34px;height:34px;border-radius:9px}.service-identity{gap:10px}.service-identity a{font-size:.9rem}.card{padding:20px}.card.flush{padding:0}.login{display:block}.login-story{padding:24px}.login-story h1{font-size:2rem;max-width:none;margin:32px 0 12px}.login-story>p{display:none}.login-form{padding:30px 24px}.tabs{margin-inline:-18px;padding-inline:10px}.detail-list>div{grid-template-columns:1fr;gap:4px}.row .search{max-width:none}.btn{min-height:48px}th,td{padding:13px}.table-scroll table{min-width:520px} }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
}