:root{
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --shadow-soft: 0 8px 20px rgba(0,0,0,.18);

  --fz: 15px;
  --fz-small: 13px;
  --fz-big: 22px;

  --gap: 16px;

  /* dark default */
  --bg: #0b0f17;
  --bg2: #0f1523;
  --panel: #121a2b;
  --panel2: #101726;
  --line: rgba(255,255,255,.08);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.48);

  --pri: #7c5cff;
  --pri2: #5f7dff;
  --ok: #2dd4bf;
  --warn: #fbbf24;
  --bad: #fb7185;
  --neu: rgba(255,255,255,.12);
}

html[data-theme="light"]{
  --bg: #f6f7fb;
  --bg2: #eef1f8;
  --panel: #ffffff;
  --panel2: #ffffff;
  --line: rgba(12,18,28,.10);
  --txt: rgba(12,18,28,.92);
  --muted: rgba(12,18,28,.62);
  --muted2: rgba(12,18,28,.48);

  --neu: rgba(12,18,28,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fz);
  color:var(--txt);
  background: radial-gradient(1200px 800px at 15% 0%, rgba(124,92,255,.18), transparent 55%),
              radial-gradient(900px 600px at 95% 10%, rgba(95,125,255,.14), transparent 45%),
              linear-gradient(180deg, var(--bg), var(--bg2));
}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.p{margin:0 0 12px 0; color:var(--muted); line-height:1.55}
.ul{margin:8px 0 0 18px; color:var(--muted); line-height:1.6}
.ul li{margin:6px 0}

.app{
  height:100%;
  display:flex;
  gap:0;
}

/* Sidebar */
.sidebar{
  width: 320px;
  min-width: 320px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
              var(--panel2);
  border-right: 1px solid var(--line);
  padding: 18px;
  display:flex;
  flex-direction:column;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.brand__logo{
  width:40px; height:40px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight:800;
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(95,125,255,.25));
  border: 1px solid var(--line);
}
.brand__name{font-weight:800; letter-spacing:.3px}
.brand__sub{font-size: var(--fz-small); color:var(--muted)}

.nav{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nav__item{
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt);
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  text-align:left;
}
.nav__item:hover{background: rgba(255,255,255,.04); border-color: var(--line)}
.nav__item.is-active{
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(95,125,255,.12));
  border-color: rgba(124,92,255,.28);
}
.nav__dot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,255,255,.18);
}
.nav__item.is-active .nav__dot{background: var(--pri)}

.sidebar__footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tenant-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:12px;
  background: rgba(255,255,255,.02);
}
.tenant-card__label{font-size: var(--fz-small); color: var(--muted)}
.tenant-card__value{margin-top:6px; font-weight:700}
.tenant-card__hint{margin-top:4px; font-size: var(--fz-small); color: var(--muted2)}

.status-stack{display:flex; gap:10px}
.status-pill{
  flex:1;
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.status-pill__k{font-size: var(--fz-small); color: var(--muted)}
.status-pill__v{
  font-size: var(--fz-small);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--neu);
  border: 1px solid var(--line);
}
.status-pill__v.is-on{background: rgba(45,212,191,.18); border-color: rgba(45,212,191,.28)}
.status-pill__v.is-off{background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.24)}
.sidebar__muted{font-size: var(--fz-small); color: var(--muted2); line-height:1.35}

/* Main */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.topbar{
  height: 72px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
  position: sticky;
  top:0;
  z-index: 5;
}

.topbar__left{display:flex; align-items:center; gap:14px; min-width:0}
.pagehead{min-width:0}
.pagehead__title{font-weight:800; font-size: 16px}
.pagehead__meta{display:flex; gap:8px; margin-top:4px; flex-wrap:wrap}
.tag{
  font-size: var(--fz-small);
  color: var(--muted);
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 3px 8px;
  border-radius: 999px;
}

.topbar__right{display:flex; align-items:center; gap:10px}

.icon-btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--txt);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.icon-btn:hover{background: rgba(255,255,255,.05)}
.icon{font-size: 18px}

.seg{
  display:flex;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  overflow:hidden;
}
.seg__btn{
  border:0;
  background: transparent;
  color: var(--txt);
  padding: 10px 12px;
  cursor:pointer;
  font-weight:600;
  font-size: var(--fz-small);
}
.seg__btn:hover{background: rgba(255,255,255,.05)}
.seg__btn.is-active{background: rgba(124,92,255,.20)}

/* Content */
.content{
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.view{display:none}
.view.is-active{display:block}

.grid{display:grid; gap: var(--gap)}
.grid--2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid--3{grid-template-columns: repeat(3, minmax(0, 1fr))}

.card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid var(--line);
}
.card__title{font-weight:800}
.card__actions{display:flex; gap:8px; align-items:center}
.card__body{padding: 14px}

.badge{
  font-size: var(--fz-small);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.badge--neutral{background: var(--neu)}
.badge--ok{background: rgba(45,212,191,.18); border-color: rgba(45,212,191,.30); color: var(--txt)}
.badge--bad{background: rgba(251,113,133,.16); border-color: rgba(251,113,133,.26); color: var(--txt)}
.badge--warn{background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.28); color: var(--txt)}

.kpi__big{font-size: var(--fz-big); font-weight:900; letter-spacing:.2px}
.kpi__sub{margin-top:4px; color: var(--muted); font-size: var(--fz-small)}

.kv{display:flex; flex-direction:column; gap:10px}
.kv__row{display:flex; gap:12px; justify-content:space-between}
.kv__k{color: var(--muted); font-size: var(--fz-small)}
.kv__v{max-width: 65%; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--txt);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn:hover{background: rgba(255,255,255,.05)}
.btn--primary{
  border-color: rgba(124,92,255,.35);
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(95,125,255,.15));
}
.btn--ghost{background: transparent}
.btn__icon{opacity:.95}

.note{
  margin-top: 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.note--warn{border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.06)}
.note__title{font-weight:900; margin-bottom:6px}
.note__text{color: var(--muted); line-height:1.55}

.console{
  height: 360px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  padding: 12px;
  overflow:auto;
  font-size: var(--fz-small);
  line-height: 1.6;
  white-space: pre-wrap;
}
html[data-theme="light"] .console{background: rgba(12,18,28,.05)}
.console--compact{height: 210px}

.form-row{display:flex; flex-direction:column; gap:8px; margin-bottom: 12px}
.label{font-size: var(--fz-small); color: var(--muted); font-weight:700}
.input,.select,.textarea{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--txt);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.textarea{resize: vertical}
.help{font-size: var(--fz-small); color: var(--muted2); line-height:1.4}

.result{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.result__head{
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.result__title{font-weight:900}
.result__body{padding: 12px; min-height: 130px}
.result--mini .result__body{min-height:auto}
.placeholder{color: var(--muted2)}

.steps{margin:0; padding-left: 18px; display:flex; flex-direction:column; gap:10px}
.steps__k{font-weight:900}
.steps__v{color: var(--muted); margin-top: 2px}

.codebox{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.codebox__head{
  padding: 12px;
  display:flex;
  justify-content:space-between;
  border-bottom: 1px solid var(--line);
}
.codebox__title{font-weight:900}
.codebox__pre{margin:0; padding: 12px; overflow:auto}

/* Modal */
.modal, .chat{position:fixed; inset:0; display:none; z-index: 20}
.modal.is-open, .chat.is-open{display:block}
.modal__backdrop, .chat__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}
.modal__panel{
  position:absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(560px, calc(100% - 28px));
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head,.modal__foot{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.modal__head{border-bottom:1px solid var(--line)}
.modal__foot{border-top:1px solid var(--line)}
.modal__title{font-weight:900}
.modal__body{padding: 14px}

.callout{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: var(--fz-small);
}

/* Chat */
.chat__panel{
  position:absolute;
  right: 14px;
  top: 14px;
  bottom: 14px;
  width: min(460px, calc(100% - 28px));
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chat__head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.chat__title{display:flex; align-items:center; gap:10px}
.chat__badge{
  width:32px;height:32px;border-radius: 12px;
  display:grid; place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(95,125,255,.18));
  border:1px solid var(--line);
}
.chat__name{font-weight:900}
.chat__sub{font-size: var(--fz-small); color: var(--muted)}
.chat__body{
  padding: 12px 14px;
  overflow:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat__msg{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: var(--fz-small);
  color: var(--muted);
  line-height:1.5;
}
.chat__msg--me{
  margin-left:auto;
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(95,125,255,.12));
  color: var(--txt);
}
.chat__msg--sys{opacity:.95}
.chat__quick{
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  background: rgba(255,255,255,.01);
}
.chip{
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--txt);
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:700;
  font-size: var(--fz-small);
}
.chip:hover{background: rgba(255,255,255,.05)}
.chat__foot{
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:center;
}

/* Responsive */
@media (max-width: 980px){
  .grid--3{grid-template-columns: 1fr}
  .grid--2{grid-template-columns: 1fr}
}

@media (max-width: 860px){
  .sidebar{
    position: fixed;
    top:0; left:0; bottom:0;
    transform: translateX(-105%);
    transition: transform .2s ease;
    z-index: 30;
    box-shadow: var(--shadow);
  }
  .sidebar.is-open{transform: translateX(0)}
}