*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ebebe9; --panel:#f5f5f3; --panel-2:#fbfbfa; --line:#cdcdc9; --strong:#0d0d0d;
  --text:#0d0d0d; --muted:#5c5c58; --faint:#9b9b96;
  --violet:#7c5cff; --violet-ink:#ffffff; --violet-soft:#e4ddff;
  --lime:#d4ff3a; --lime-ink:#0d0d0d;
  --ok:#1e9a52; --warn:#c97f10; --danger:#d43a2a;
  --code-bg:#0f0f10; --code-text:#e9e9e6; --code-muted:#7d7d78;
  --display:"Oswald","Arial Narrow",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Segoe UI Symbol","Apple Symbols",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c0c0d; --panel:#131315; --panel-2:#18181a; --line:#2b2b2f; --strong:#f1f1ee;
    --text:#f1f1ee; --muted:#a2a29d; --faint:#65655f;
    --violet:#9783ff; --violet-ink:#0c0c0d; --violet-soft:#221c46; --warn:#f0b04b;
    --code-bg:#000;
  }
}
:root[data-theme="dark"]{
  --bg:#0c0c0d; --panel:#131315; --panel-2:#18181a; --line:#2b2b2f; --strong:#f1f1ee;
  --text:#f1f1ee; --muted:#a2a29d; --faint:#65655f;
  --violet:#9783ff; --violet-ink:#0c0c0d; --violet-soft:#221c46; --warn:#f0b04b;
  --code-bg:#000;
}
html{overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
@keyframes blink{50%{opacity:0}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hbar{max-width:1280px;margin:0 auto;display:flex;height:64px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding:0 24px;border-right:1px solid var(--line);font-weight:700;letter-spacing:.02em}
.brand svg{width:26px;height:28px}
.brand .cur{color:var(--violet);animation:blink 1.1s steps(1) infinite}
nav.tabs{display:flex;align-items:stretch;flex:1;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
nav.tabs a{display:flex;align-items:center;padding:0 18px;border-right:1px solid var(--line);color:var(--muted)}
nav.tabs a:hover{color:var(--text)}
nav.tabs a.on{color:var(--text);font-weight:700;box-shadow:inset 0 -3px 0 var(--violet)}
.user{display:flex;align-items:center;gap:10px;padding:0 16px;border-left:1px solid var(--line);font-size:12px}
.user .who{color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibtn{width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;font-size:14px;position:relative}
.ibtn:hover{border-color:var(--strong)}
.ibtn .badge{position:absolute;top:-6px;right:-6px;background:var(--violet);color:var(--violet-ink);font-size:10px;font-weight:700;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:inline}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme .sun{display:inline}:root:not([data-theme="light"]) .theme .moon{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--strong);transition:background .2s,color .2s,transform .12s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--strong);color:var(--bg)}
.btn-dark:hover:not(:disabled){background:var(--violet);border-color:var(--violet);color:var(--violet-ink)}
.btn-ghost:hover{background:var(--strong);color:var(--bg)}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff}
.btn-sm{padding:8px 12px;font-size:10px}
.btn:disabled{cursor:not-allowed;background:repeating-linear-gradient(135deg,var(--panel) 0 8px,var(--bg) 8px 16px);color:var(--faint);border-color:var(--line)}

/* ---------- layout ---------- */
.frame{flex:1;width:100%;max-width:1280px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.page-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:40px 40px 28px;border-bottom:1px solid var(--line)}
.lbl{display:flex;gap:14px;align-items:baseline;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.lbl .n{color:var(--violet);font-weight:700}
h1{font-family:var(--display);text-transform:uppercase;font-weight:600;line-height:1.05;font-size:clamp(40px,5vw,68px)}
.page-head .sub{color:var(--muted);font-size:12px;margin-top:6px}
.summary{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.summary div{padding:16px 24px;border-right:1px solid var(--line)}
.summary div:last-child{border-right:none}
.summary b{display:block;font-family:var(--display);font-size:28px;font-weight:600;line-height:1.15}
.summary span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.summary .ok b{color:var(--ok)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.main{padding:32px 40px 48px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:28px}
.side{padding:32px 24px 48px;display:flex;flex-direction:column;gap:24px;background-image:radial-gradient(circle,var(--line) 1px,transparent 1.2px);background-size:22px 22px}
.h2{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:24px;line-height:1.1;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.h2 small{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.05em}

/* ---------- create ---------- */
.create{border:1px solid var(--strong);background:var(--panel-2)}
.create-top{display:grid;grid-template-columns:auto 1fr auto;border-bottom:1px solid var(--line)}
.seg{display:flex;border-right:1px solid var(--line)}
.seg button{padding:14px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-right:1px solid var(--line);display:flex;gap:8px;align-items:center;color:var(--muted)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--strong);color:var(--bg)}
.seg button small{font-weight:400;font-size:10px;opacity:.75}
.create-top .name{display:flex;align-items:center;min-width:0}
.create-top .name span{padding-left:16px;color:var(--faint);font-size:13px;white-space:nowrap}
.create-top input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text);font-family:var(--mono);font-size:15px;padding:14px 16px 14px 4px}
.create-top input::placeholder{color:var(--faint)}
.create-top .btn{border:none;border-left:1px solid var(--strong);padding:0 22px}
.create-hint{padding:10px 16px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.create-hint b{color:var(--violet);font-weight:500}

/* ---------- service card ---------- */
.card{border:1px solid var(--strong);background:var(--panel-2);box-shadow:8px 8px 0 var(--violet)}
.card + .card{margin-top:8px}
.c-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.c-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.c-title b{font-family:var(--display);font-size:28px;font-weight:600;text-transform:none;line-height:1}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:2px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.chip.k{border-color:var(--violet);color:var(--violet)}
.status{display:inline-flex;align-items:center;gap:6px;border:1px solid currentColor;padding:2px 9px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ok)}
.status::before{content:"";width:6px;height:6px;background:currentColor}
.status.warn{color:var(--warn)}
.c-body{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.params{padding:8px 18px;border-right:1px solid var(--line)}
.prm{display:grid;grid-template-columns:110px 1fr 28px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12px}
.prm:last-child{border-bottom:none}
.prm .k{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.prm .v{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp{width:26px;height:26px;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--muted)}
.cp:hover{border-color:var(--strong);color:var(--text)}
.cp{position:relative}
.cp::before,.cp::after{content:"";position:absolute;width:9px;height:10px;border:1.5px solid currentColor}
.cp::before{left:6px;top:5px}
.cp::after{left:9px;top:8px;background:var(--panel-2)}
.ibtn svg.bell{width:14px;height:14px;fill:currentColor}
.usage{padding:14px 18px;display:flex;flex-direction:column;gap:14px}
.meter-l{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.meter-l span:first-child{color:var(--muted)}
.meter{height:12px;border:1px solid var(--strong);position:relative;background:repeating-linear-gradient(90deg,transparent 0 9px,var(--line) 9px 10px)}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--violet);transition:width .4s}
.meter i.warn{background:var(--warn)}
.meter .m80{position:absolute;left:80%;top:-4px;bottom:-4px;width:1px;background:var(--danger)}
.usage .note{font-size:11px;color:var(--muted)}
.conn{padding:14px 18px 6px}
.c-tabs{display:flex;flex-wrap:wrap;gap:4px}
.c-tabs button{font-size:11px;padding:4px 9px;border:1px solid var(--line);color:var(--muted)}
.c-tabs button:hover{color:var(--text);border-color:var(--strong)}
.c-tabs button.on{background:var(--strong);color:var(--bg);border-color:var(--strong)}
.code{margin:10px 0;background:var(--code-bg);color:var(--code-text);border:1px solid var(--strong);display:flex;align-items:flex-start}
.code pre{flex:1;min-width:0;padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.65;white-space:pre-wrap;word-break:break-all}
.code .cm{color:var(--code-muted)} .code .kw{color:#b3a4ff} .code .s{color:var(--lime)} .code .pw{background:color-mix(in srgb,var(--lime) 25%,transparent);color:var(--lime);padding:0 2px}
.copy{background:var(--lime);color:var(--lime-ink);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;margin:6px;flex-shrink:0;border:1px solid var(--strong)}
.copy:hover{background:var(--violet);color:var(--violet-ink)}
.pass{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);font-size:12px;background:var(--panel)}
.pass .t{flex:1;min-width:220px;color:var(--muted)}
.pass .t b{color:var(--text);font-weight:500}
.pass code{font-family:var(--mono);background:var(--lime);color:var(--lime-ink);padding:2px 8px;font-weight:700;letter-spacing:.04em}
.c-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line)}
.c-foot .meta{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.c-foot .meta b{color:var(--ok);font-weight:500}
.c-foot .acts{display:flex;gap:8px;flex-wrap:wrap}
.ghost-card{border:1px dashed var(--line);padding:22px 18px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--line) 40%,transparent) 10px 11px)}
.ghost-card b{display:block;font-family:var(--display);font-size:22px;font-weight:600;text-transform:uppercase;line-height:1.1}
.ghost-card span{font-size:12px;color:var(--muted)}
.new{background:var(--lime);color:var(--lime-ink);font-size:10px;font-weight:700;padding:1px 7px;margin-left:8px;vertical-align:4px;font-family:var(--mono);letter-spacing:.05em}

/* ---------- side ---------- */
.box{border:1px solid var(--line);background:var(--panel)}
.box-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.box-h span{color:var(--muted);font-weight:400}
.box-h button{font-size:10px;color:var(--violet);text-transform:uppercase;letter-spacing:.05em}
.ntf{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px}
.ntf:last-child{border-bottom:none}
.ntf .ico{width:20px;height:20px;display:grid;place-items:center;font-size:11px;font-weight:700;border:1px solid currentColor}
.ntf.warn .ico{color:var(--warn)} .ntf.ok .ico{color:var(--ok)} .ntf.info .ico{color:var(--violet)}
.ntf b{display:block;font-weight:500;line-height:1.4}
.ntf p{color:var(--muted);font-size:11px;margin-top:2px}
.ntf time{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.ntf.unread{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--violet)}
.plan{border:1px solid var(--strong);background:var(--strong);color:var(--bg);padding:18px 16px}
.plan .k{font-size:10px;color:var(--lime);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.plan b{display:block;font-family:var(--display);font-size:34px;font-weight:600;line-height:1.1;margin:4px 0 12px}
.plan ul{list-style:none;border-top:1px solid color-mix(in srgb,var(--bg) 22%,transparent)}
.plan li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--bg) 22%,transparent);font-size:11px}
.plan li span:first-child{opacity:.65}
.plan .soon{margin-top:12px;font-size:11px;opacity:.75}
.help a{display:flex;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line);font-size:12px}
.help a:last-child{border-bottom:none}
.help a:hover{background:var(--panel-2);color:var(--violet)}
.help a i{font-style:normal;color:var(--violet)}
/* class="tbd" — данные, которые заказчик впишет сам (найти поиском по tbd); визуально не выделяются */

/* ---------- modal & toast ---------- */
.modal{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}
.dialog{width:100%;max-width:440px;background:var(--panel-2);border:1px solid var(--strong);box-shadow:8px 8px 0 var(--danger)}
.dialog .dh{padding:14px 18px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--danger)}
.dialog .db{padding:18px}
.dialog h3{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:28px;line-height:1.1;margin-bottom:8px}
.dialog p{font-size:12px;color:var(--muted);margin-bottom:14px}
.dialog p b{color:var(--text)}
.dialog input{width:100%;border:1px solid var(--strong);background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;padding:12px 14px;outline:none}
.dialog input:focus{box-shadow:4px 4px 0 var(--danger)}
.dialog .df{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--lime);color:var(--lime-ink);border:1px solid var(--strong);box-shadow:4px 4px 0 var(--strong);padding:10px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:opacity .2s,transform .2s;z-index:90;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.strip{border-top:1px solid var(--line)}
.strip .in{max-width:1280px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:14px 24px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.strip a{margin-right:18px}
.strip a:hover{color:var(--violet)}
.strip .live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px var(--strong);margin-right:8px}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .grid{grid-template-columns:1fr}
  .main{border-right:none;border-bottom:1px solid var(--line)}
  nav.tabs a:not(.on){display:none}
  .user .who{display:none}
}
@media (max-width:760px){
  .page-head{grid-template-columns:1fr;padding:28px 16px 20px}
  .summary{grid-template-columns:1fr 1fr}
  .summary div:nth-child(2){border-right:none}
  .summary div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .summary div{padding:12px 16px}
  .main,.side{padding:24px 16px 36px}
  .create-top{grid-template-columns:1fr}
  .seg{border-right:none;border-bottom:1px solid var(--line)}
  .seg button{flex:1;justify-content:center}
  .create-top .name{border-bottom:1px solid var(--line)}
  .create-top .btn{border-left:none;padding:14px 18px}
  .c-body{grid-template-columns:1fr}
  .params{border-right:none;border-bottom:1px solid var(--line)}
  .prm{grid-template-columns:96px 1fr 28px}
  .card{box-shadow:5px 5px 0 var(--violet)}
  .ghost-card{grid-template-columns:1fr}
  .brand{padding:0 14px}
  nav.tabs{display:none}
  .hbar{justify-content:space-between}
  .user{padding:0 10px;gap:6px}
  .strip .in{padding:14px 16px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Kafka management inside the cabinet */
#kafkaPanel .box{padding:18px}
#kafkaPanel .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
#kafkaPanel input,#kafkaPanel select{padding:8px 10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:inherit;font-size:13px}
#kafkaPanel .krow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
#kafkaPanel .krow:first-child{border-top:0}
#kafkaPanel .krow code{font-family:var(--mono);font-size:12px}
#kafkaPanel .krow .acts{display:flex;gap:6px}
#kafkaPanel .hint{font-size:12px;color:var(--muted);margin-top:8px}

/* the plan stays dark in the dark theme: the lime label is unreadable on a light card */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan { background: var(--panel); color: var(--text); border-color: var(--line); }
}
:root[data-theme="dark"] .plan { background: var(--panel); color: var(--text); border-color: var(--line); }