:root{
  color-scheme:dark; --bg:#08111f; --panel:#0d192b; --panel2:#101f34; --line:#20344e;
  --text:#f7f9fc; --muted:#8fa2bd; --blue:#2f7cff; --blue2:#1a5ed2; --green:#34c98f;
  --yellow:#f6b84a; --red:#ff6377; --safe-top:env(safe-area-inset-top); --safe-bottom:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body,#app{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}
body{min-height:100dvh}.hidden{display:none!important}button,input,select{font:inherit;color:inherit}.auth-screen{min-height:100dvh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 15%,#133363 0,transparent 35%),var(--bg)}
.auth-card{width:min(420px,100%);padding:30px;border:1px solid var(--line);border-radius:24px;background:rgba(13,25,43,.96);box-shadow:0 30px 80px #0008}.brand-mark{width:54px;height:54px;display:grid;place-items:center;border-radius:15px;background:#103c79;border:1px solid #2366bf;color:#63a2ff;font-size:30px;font-weight:800}.brand-mark.small{width:40px;height:40px;border-radius:11px;font-size:22px}.auth-card h1{font-size:25px;margin:20px 0 6px}.auth-card p{color:var(--muted);margin:0 0 24px}.auth-card form{display:grid;gap:12px}input,select{width:100%;border:1px solid #29425f;background:#0a1728;border-radius:12px;padding:13px 14px;outline:none}input:focus,select:focus{border-color:#4b91ff;box-shadow:0 0 0 3px #2f7cff22}.primary,.ghost,.icon-btn,.pill{border:1px solid transparent;border-radius:12px;cursor:pointer}.primary{background:var(--blue);padding:13px 16px;font-weight:700}.primary:active{background:var(--blue2);transform:translateY(1px)}.ghost{background:transparent;border-color:var(--line);padding:9px 12px}.form-error{min-height:20px;color:#ff8492;font-size:13px}.shell{min-height:100dvh}.sidebar{display:none}.main{min-height:100dvh;padding-bottom:calc(82px + var(--safe-bottom))}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + var(--safe-top)) 18px 11px;background:linear-gradient(#08111ff5,#08111fdc);backdrop-filter:blur(18px);border-bottom:1px solid #17263a}.topbar h2{margin:1px 0 0;font-size:26px;letter-spacing:-.5px}.eyebrow{font-size:11px;color:#6e8aad;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.icon-btn{width:42px;height:42px;background:#0e1d31;border-color:#253a55;font-size:21px}.content{padding:14px 14px 28px;max-width:1500px;margin:auto}.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;height:calc(68px + var(--safe-bottom));padding:7px 8px var(--safe-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:#091423ee;backdrop-filter:blur(24px);border-top:1px solid #25354d}.nav-btn{border:0;background:transparent;color:#7890ad;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;font-size:10px}.nav-btn .nav-icon{font-size:21px;line-height:24px}.nav-btn.active{color:#74aaff;background:#15345b}.grid{display:grid;gap:12px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:linear-gradient(180deg,#101f34,#0c192b);border:1px solid var(--line);border-radius:16px;padding:15px;overflow:hidden}.metric-label{font-size:12px;color:var(--muted);font-weight:650}.metric-value{font-size:30px;font-weight:800;margin-top:5px;letter-spacing:-1px}.metric-note{font-size:11px;color:#7890ad;margin-top:3px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 10px}.section-head h3{margin:0;font-size:16px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700;background:#172940;color:#a9bdd6}.badge.ok{background:#10352b;color:#63e7b5}.badge.warning{background:#463718;color:#ffd477}.badge.critical,.badge.offline,.badge.error{background:#4a2028;color:#ff9aaa}.badge.partial,.badge.info{background:#163458;color:#8ec0ff}.server-card{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}.server-name,.item-title{font-weight:750;font-size:15px;overflow-wrap:anywhere}.meta{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}.progress{height:6px;background:#1b2b41;border-radius:999px;overflow:hidden;margin-top:10px}.progress>i{display:block;height:100%;background:var(--blue);border-radius:inherit}.alert{display:grid;grid-template-columns:9px 1fr;gap:10px;align-items:start}.dot{width:9px;height:9px;border-radius:50%;background:#6f8eb7;margin-top:5px}.alert.warning .dot{background:var(--yellow)}.alert.critical .dot{background:var(--red)}.alert.info .dot{background:#58a5ff}.alert-title{font-size:13px;font-weight:700}.alert-detail{font-size:12px;color:var(--muted);margin-top:2px}.toolbar{display:grid;gap:9px;margin-bottom:12px}.toolbar-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.search{position:relative}.search input{padding-left:38px}.search::before{content:'⌕';position:absolute;left:13px;top:10px;color:#7890ad;font-size:20px}.list{display:grid;gap:8px}.list-item{background:#0d1b2e;border:1px solid #1e334d;border-radius:14px;padding:13px;cursor:pointer}.list-item:active{background:#142843}.list-top{display:flex;justify-content:space-between;gap:10px;align-items:start}.split-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:11px;color:#8399b6}.empty{padding:52px 20px;text-align:center;color:var(--muted)}.detail-sheet{position:fixed;z-index:50;inset:0;background:#07101ceb;backdrop-filter:blur(10px);overflow:auto;padding:calc(14px + var(--safe-top)) 12px calc(20px + var(--safe-bottom))}.detail-panel{max-width:720px;margin:0 auto;background:#0c192b;border:1px solid #28405f;border-radius:20px;overflow:hidden;box-shadow:0 30px 90px #000a}.detail-head{position:sticky;top:0;background:#0c192bf0;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--line);z-index:2}.detail-body{padding:14px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.kv{background:#0a1627;border:1px solid #1b2e46;border-radius:12px;padding:11px}.kv b{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:600}.kv span{font-size:13px;word-break:break-word}.close-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#111f33;font-size:20px}.action-link{display:block;text-decoration:none;text-align:center;margin-top:12px;padding:12px;border-radius:12px;background:var(--blue);color:white;font-weight:700}.toast{position:fixed;z-index:100;left:50%;bottom:calc(82px + var(--safe-bottom));transform:translate(-50%,20px);background:#18273b;border:1px solid #324a69;border-radius:12px;padding:10px 14px;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){.metrics{grid-template-columns:repeat(4,1fr)}.cards-2{grid-template-columns:repeat(2,1fr)}.list{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{grid-template-columns:minmax(260px,1fr) auto}.toolbar-row{grid-template-columns:180px 180px}.detail-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1050px){.shell{display:grid;grid-template-columns:238px 1fr}.sidebar{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;border-right:1px solid #1f3148;background:#091423;padding:18px 12px}.brand-row{display:flex;align-items:center;gap:11px;padding:0 5px 22px}.brand-row strong,.brand-row span{display:block}.brand-row strong{font-size:15px}.brand-row span{font-size:11px;color:var(--muted);margin-top:2px}.sidebar nav{display:grid;gap:5px}.sidebar .nav-btn{height:45px;flex-direction:row;justify-content:flex-start;gap:11px;padding:0 12px;font-size:13px}.sidebar .nav-icon{font-size:18px}.sidebar-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;padding:10px 4px}.main{padding-bottom:0}.mobile-nav{display:none}.topbar{padding:18px 24px 13px}.content{padding:18px 24px 38px}.list{grid-template-columns:1fr}.desktop-tablet-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);gap:14px;align-items:start}}
.page-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 14px}.primary.compact{padding:10px 13px}.secondary{border:1px solid #29425f;background:#10233a;color:var(--text);border-radius:12px;padding:11px 13px;font-weight:700;cursor:pointer}.secondary:active{background:#16304f}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.action-btn{flex:1 1 150px;min-height:44px}.action-link.inline{display:flex;align-items:center;justify-content:center;margin-top:0;padding:11px 13px}.action-btn:disabled,.primary:disabled,.secondary:disabled{opacity:.55;cursor:wait}.domain-filters{grid-template-columns:1fr 1fr}.domain-filters select{min-width:0}
@media(min-width:760px){.domain-filters{grid-template-columns:repeat(4,160px)}.toolbar:has(.domain-filters){grid-template-columns:minmax(260px,1fr) auto}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 16px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field>span{font-size:12px;color:var(--muted,#94a3b8);font-weight:600}.form-field input,.form-field select,.form-field textarea{width:100%;box-sizing:border-box;background:rgba(15,23,42,.65);border:1px solid rgba(148,163,184,.18);border-radius:12px;color:inherit;padding:12px;font:inherit;outline:none}.form-field textarea{min-height:96px;resize:vertical}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:rgba(59,130,246,.65)}button.danger,.danger{background:rgba(239,68,68,.13)!important;border:1px solid rgba(239,68,68,.35)!important;color:#fca5a5!important}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.detail-actions .action-btn{flex:0 0 auto}@media(max-width:700px){.form-grid{grid-template-columns:1fr}.detail-actions>button,.detail-actions>.action-link{flex:1 1 calc(50% - 8px);text-align:center}.detail-panel{max-height:92dvh;overflow:auto}}

/* KCC split detail panel */
@media (min-width:1050px){
  body.detail-open .main{
    padding-right:min(36vw,560px);
    transition:padding-right .22s ease;
  }

  body:not(.detail-open) .main{
    transition:padding-right .22s ease;
  }

  #detailSheet.detail-sheet{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:auto;
    width:min(36vw,560px);
    z-index:45;
    background:transparent;
    backdrop-filter:none;
    padding:0;
    overflow:hidden;
    border-left:1px solid #1f3148;
    box-shadow:-20px 0 50px #0005;
  }

  #detailSheet .detail-panel{
    width:100%;
    max-width:none;
    height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:auto;
    background:#0c192b;
  }

  #detailSheet .detail-head{
    top:0;
  }

  #detailSheet .detail-body{
    padding:18px;
  }

  #detailSheet .detail-grid{
    grid-template-columns:1fr;
  }

  #detailSheet .detail-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  #detailSheet .detail-actions .action-btn,
  #detailSheet .detail-actions .action-link{
    width:100%;
    justify-content:center;
  }

  .open-detail.detail-selected,
  .open-detail.detail-selected.card,
  .open-detail.detail-selected.list-item{
    border-color:#3f7fd4;
    background:#112945;
    box-shadow:0 0 0 1px #3f7fd455;
  }
}

@media (min-width:1050px) and (max-width:1250px){
  body.detail-open .main{
    padding-right:420px;
  }

  #detailSheet.detail-sheet{
    width:420px;
  }
}


/* === KCC DETAIL UX 2026-09-09 === */

.toolbar input,
.toolbar select,
.domain-filters input,
.domain-filters select{
  font-size:13px !important;
}

#detailSheet .kv-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}

#detailSheet .kv-label b{
  margin:0;
}

#detailSheet .copy-kv{
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #29425f;
  border-radius:7px;
  background:#10233a;
  color:#8ea8c7;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  opacity:.78;
}

#detailSheet .copy-kv:hover{
  opacity:1;
  color:#fff;
  background:#17365c;
  border-color:#4388df;
}

#detailSheet .copy-kv.copied{
  opacity:1;
  color:#63e7b5;
  background:#10352b;
  border-color:#318269;
}

@media (min-width:1050px){
  #detailSheet .detail-actions{
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:6px;
  }

  #detailSheet .detail-actions .action-btn,
  #detailSheet .detail-actions .action-link{
    flex:1 0 auto;
    width:auto;
    min-width:max-content;
    min-height:40px;
    margin:0;
    padding:8px 11px;
    font-size:11px;
    line-height:1.15;
    white-space:nowrap;
    justify-content:center;
  }
}

/* === /KCC DETAIL UX 2026-09-09 === */

/* Detail actions: wrap instead of horizontal scroll */
@media (min-width:1050px){
  #detailSheet .detail-actions{
    display:flex;
    flex-wrap:wrap;
    overflow:visible;
    gap:7px;
    padding-bottom:0;
  }

  #detailSheet .detail-actions .action-btn,
  #detailSheet .detail-actions .action-link{
    flex:1 1 auto;
    min-width:120px;
    width:auto;
  }
}

/* Detail actions: wrap instead of horizontal scroll */
@media (min-width:1050px){
  #detailSheet .detail-actions{
    display:flex;
    flex-wrap:wrap;
    overflow:visible;
    gap:7px;
    padding-bottom:0;
  }

  #detailSheet .detail-actions .action-btn,
  #detailSheet .detail-actions .action-link{
    flex:1 1 auto;
    min-width:120px;
    width:auto;
  }
}

/* === KCC ROW COPY UX === */

#detailSheet .copyable-kv{
  position:relative;
  cursor:pointer;
  padding-right:52px;
  transition:
    background .15s ease,
    border-color .15s ease;
}

#detailSheet .copyable-kv:hover{
  background:#0d1d32;
  border-color:#29496d;
}

/* Copy button centered vertically in the whole row */
#detailSheet .copyable-kv .copy-kv{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:9px;
  font-size:16px;
  opacity:.85;
}

#detailSheet .copyable-kv:hover .copy-kv{
  opacity:1;
}

/* Copied state */
#detailSheet .copyable-kv.copied{
  border-color:#318269;
  background:#103029;
}

/* Small confirmation badge */
#detailSheet .copy-badge{
  position:absolute;
  z-index:4;
  right:48px;
  top:50%;
  transform:translateY(-50%) translateX(5px);
  padding:5px 8px;
  border:1px solid #318269;
  border-radius:8px;
  background:#10352b;
  color:#63e7b5;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s ease;
}

#detailSheet .copyable-kv.copied .copy-badge{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}

/* === /KCC ROW COPY UX === */