/* KuvoHost widget styles (ported from the hPanel mockup; every class is prefixed kh-). Uses tokens.css. */
:where(.kh-sidebar,.kh-topbar,.kh-page-head,.kh-page-kicker,.kh-card,.kh-stat,.kh-stats,.kh-row-card,.kh-site-card,.kh-todo,.kh-todos,.kh-ai-home,.kh-ai-panel,.kh-empty,.kh-login-page,.kh-bottom-nav,.kh-pop-menu,.kh-toast,.kh-credit-banner,.kh-kb-card,.kh-ann,.kh-cmd-box,.kh-alert-soft,.kh-security-item,.kh-ref-box,.kh-mini,.kh-toolbar,.kh-pay-row,.kh-list-row,.kh-w) :is(h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure){margin:0;padding:0}
:where(.kh-sidebar,.kh-topbar,.kh-page-head,.kh-page-kicker,.kh-card,.kh-stat,.kh-stats,.kh-row-card,.kh-site-card,.kh-todo,.kh-todos,.kh-ai-home,.kh-ai-panel,.kh-empty,.kh-login-page,.kh-bottom-nav,.kh-pop-menu,.kh-toast,.kh-credit-banner,.kh-kb-card,.kh-ann,.kh-cmd-box,.kh-alert-soft,.kh-security-item,.kh-ref-box,.kh-mini,.kh-toolbar,.kh-pay-row,.kh-list-row,.kh-w) :is(ul,ol){list-style:none}
:where(.kh-sidebar,.kh-topbar,.kh-page-head,.kh-page-kicker,.kh-card,.kh-stat,.kh-stats,.kh-row-card,.kh-site-card,.kh-todo,.kh-todos,.kh-ai-home,.kh-ai-panel,.kh-empty,.kh-login-page,.kh-bottom-nav,.kh-pop-menu,.kh-toast,.kh-credit-banner,.kh-kb-card,.kh-ann,.kh-cmd-box,.kh-alert-soft,.kh-security-item,.kh-ref-box,.kh-mini,.kh-toolbar,.kh-pay-row,.kh-list-row,.kh-w) :is(a){color:inherit;text-decoration:none}
:where(.kh-sidebar,.kh-topbar,.kh-page-head,.kh-page-kicker,.kh-card,.kh-stat,.kh-stats,.kh-row-card,.kh-site-card,.kh-todo,.kh-todos,.kh-ai-home,.kh-ai-panel,.kh-empty,.kh-login-page,.kh-bottom-nav,.kh-pop-menu,.kh-toast,.kh-credit-banner,.kh-kb-card,.kh-ann,.kh-cmd-box,.kh-alert-soft,.kh-security-item,.kh-ref-box,.kh-mini,.kh-toolbar,.kh-pay-row,.kh-list-row,.kh-w) :is(button){background:none;border:0;cursor:pointer;font:inherit;color:inherit}
:where(.kh-sidebar,.kh-topbar,.kh-page-head,.kh-page-kicker,.kh-card,.kh-stat,.kh-stats,.kh-row-card,.kh-site-card,.kh-todo,.kh-todos,.kh-ai-home,.kh-ai-panel,.kh-empty,.kh-login-page,.kh-bottom-nav,.kh-pop-menu,.kh-toast,.kh-credit-banner,.kh-kb-card,.kh-ann,.kh-cmd-box,.kh-alert-soft,.kh-security-item,.kh-ref-box,.kh-mini,.kh-toolbar,.kh-pay-row,.kh-list-row,.kh-w) :is(img){display:block;max-width:100%}
html{scroll-behavior:smooth}
body.kh{font-family:var(--fb); font-size:14.5px; line-height:1.5; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
body.kh :where(h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5){font-family:var(--fh); color:var(--heading); letter-spacing:-.025em; font-weight:700; line-height:1.25}
body.kh :focus-visible{outline:none; box-shadow:var(--focus); border-radius:8px}
body.kh ::selection{background:var(--tint-2); color:var(--heading)}
.kh-tabular{font-variant-numeric:tabular-nums}
.kh-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kh-ic-sm{width:16px;height:16px;stroke-width:1.85}
.kh-ic-md{width:18px;height:18px}
.kh-ic-lg{width:24px;height:24px}
.kh-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fh); font-weight:600; font-size:13.5px; letter-spacing:-.01em;
  height:40px; padding:0 16px; border-radius:var(--r-sm);
  border:1px solid transparent; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, border-color .18s, color .18s;}
.kh-btn .kh-ic{width:16px;height:16px}
.kh-btn-sm{height:34px; padding:0 12px; font-size:13px; border-radius:8px}
.kh-btn-lg{height:46px; padding:0 20px; font-size:14.5px; border-radius:12px}
.kh-btn-primary{color:#fff;
  background:linear-gradient(180deg,#5A26B8 0%,var(--purple) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(28,13,63,.18), 0 6px 14px rgba(74,26,158,.26);}
.kh-btn-primary:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(74,26,158,.34)}
.kh-btn-primary:active{transform:none}
.kh-btn-secondary{background:var(--bg-elev); color:var(--heading); border-color:var(--line-2); box-shadow:var(--sh-xs)}
.kh-btn-secondary:hover{border-color:#C6B5EC; background:var(--bg-soft); transform:translateY(-1px)}
.kh-btn-ghost{color:var(--heading); background:transparent; border-color:transparent}
.kh-btn-ghost:hover{background:var(--tint)}
.kh-btn-danger{color:#fff; background:linear-gradient(180deg,#E11D48,#BE123C); box-shadow:0 6px 14px rgba(190,18,60,.25)}
.kh-btn-success{color:#fff; background:linear-gradient(180deg,#22C55E,#16A34A); box-shadow:0 6px 14px rgba(22,163,74,.25)}
.kh-btn-block{width:100%}
.kh-btn[disabled],.kh-btn.kh-is-disabled{opacity:.5; pointer-events:none}
.kh-chip{display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 9px; border-radius:999px;
  font:600 11.5px/1 var(--fb); letter-spacing:.01em; white-space:nowrap;
  background:var(--chip-bg); color:var(--ink); border:1px solid var(--tint-2);}
[data-bs-theme="dark"] .kh-chip{color:#E2D4FF}
.kh-chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.kh-chip-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.kh-chip-warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.kh-chip-danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line)}
.kh-chip-info{background:var(--info-bg); color:var(--info); border-color:var(--info-line)}
.kh-chip-muted{background:var(--bg-soft); color:var(--muted); border-color:var(--line)}
.kh-demo-badge{display:inline-flex; align-items:center; gap:6px;
  font:700 10.5px/1 var(--fb); letter-spacing:.06em; text-transform:uppercase;
  color:#92400E; background:#FEF3C7; border:1px solid #FDE68A;
  padding:5px 8px; border-radius:6px; white-space:nowrap;}
[data-bs-theme="dark"] .kh-demo-badge{color:#FDE68A; background:rgba(217,119,6,.18); border-color:rgba(253,230,138,.3)}
.kh-app{display:flex; min-height:100vh; background:var(--bg)}
.kh-sidebar{position:fixed; top:0; left:0; bottom:0; width:var(--sidebar); z-index:40;
  display:flex; flex-direction:column;
  background:var(--bg-sidebar); border-right:1px solid var(--line);}
.kh-sidebar-brand{display:flex; align-items:center; gap:10px;
  height:var(--topbar); padding:0 20px; flex:none;
  border-bottom:1px solid var(--line);}
.kh-sidebar-brand img.kh-logo{height:28px; width:auto}
.kh-logo-dark{display:none}
[data-bs-theme="dark"] .kh-logo-light{display:none}
[data-bs-theme="dark"] .kh-logo-dark{display:block}
.kh-sidebar-scroll{flex:1; overflow-y:auto; padding:12px 10px 12px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.kh-nav-section{margin-bottom:18px}
.kh-nav-label{font:700 10.5px/1 var(--fb); letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); padding:0 10px 8px;}
.kh-nav-link{display:flex; align-items:center; gap:10px;
  height:40px; padding:0 8px; border-radius:12px;
  font:500 13.5px/1 var(--fb); color:var(--sidebar-text);
  transition:background .15s, color .15s;}
.kh-nav-link:hover{background:var(--tint); color:var(--heading)}
.kh-nav-link.kh-is-active{background:var(--tint); color:var(--accent-text); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--tint-2);}
[data-bs-theme="dark"] .kh-nav-link.kh-is-active{color:#C4A6FF}
.kh-nav-ico{width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; flex:none;
  background:var(--bg-soft); color:var(--accent-text-hover);}
.kh-nav-link.kh-is-active .kh-nav-ico{background:var(--purple); color:#fff}
.kh-nav-link .kh-nav-count{margin-left:auto;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center;
  font:700 10.5px var(--fb); background:var(--danger-bg); color:var(--danger);}
.kh-sidebar-foot{padding:12px; border-top:1px solid var(--line); flex:none;
  display:flex; flex-direction:column; gap:8px;}
.kh-ai-launch{display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(135deg,var(--purple),var(--violet));
  color:#fff; text-align:left; box-shadow:0 8px 18px rgba(74,26,158,.28);
  transition:transform .18s var(--ease);}
.kh-ai-launch:hover{transform:translateY(-1px)}
.kh-ai-launch b{display:block; font:700 13px var(--fh)}
.kh-ai-launch small{display:block; font:400 11.5px var(--fb); opacity:.85}
.kh-ai-launch .kh-nav-ico{background:rgba(255,255,255,.16); color:#fff}
.kh-app-main{margin-left:var(--sidebar); flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; padding-bottom:var(--bottom)}
.kh-topbar{position:sticky; top:0; z-index:30;
  height:var(--topbar);
  display:flex; align-items:center; gap:16px;
  padding:0 24px;
  background:var(--bg-topbar);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);}
.kh-menu-btn,.kh-icon-btn{width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; color:var(--heading);
  border:1px solid transparent;
  transition:background .15s, border-color .15s;}
.kh-menu-btn{display:none}
.kh-menu-btn:hover,.kh-icon-btn:hover{background:var(--tint); border-color:var(--tint-2)}
.kh-icon-btn{position:relative}
.kh-icon-btn .kh-ping{position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
  background:#E11D48; border:2px solid var(--bg-elev); box-sizing:content-box;}
.kh-crumbs{display:flex; align-items:center; gap:8px; min-width:0}
.kh-crumbs h1{font-size:16.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kh-crumbs a{color:var(--muted); font:500 13.5px var(--fb)}
.kh-crumbs a:hover{color:var(--accent-text)}
.kh-crumbs .kh-sep{color:var(--faint)}
.kh-topbar-search{margin:0 auto; flex:1; max-width:560px; height:44px;
  display:flex; align-items:center; gap:8px;
  padding:0 14px; border-radius:14px;
  background:var(--bg-soft); border:1px solid var(--line);
  color:var(--muted); transition:border-color .15s, box-shadow .15s, background .15s;}
.kh-topbar-search:focus-within{background:var(--bg-elev); border-color:#C6B5EC; box-shadow:var(--focus)}
.kh-topbar-search input{flex:1; border:0; background:transparent; outline:none; min-width:0; color:var(--heading)}
.kh-topbar-search kbd{font:600 10.5px var(--fb); letter-spacing:.02em;
  padding:2px 6px; border-radius:5px;
  border:1px solid var(--line); background:var(--bg-elev); color:var(--faint);}
.kh-topbar-actions{display:flex; align-items:center; gap:6px; margin-left:auto}
.kh-switcher{display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 10px; border-radius:10px;
  font:600 12.5px var(--fb); color:var(--heading);
  border:1px solid var(--line); background:var(--bg-elev);}
.kh-switcher:hover{border-color:#C6B5EC; background:var(--bg-soft)}
.kh-switcher .kh-ic{width:14px;height:14px;color:var(--muted)}
.kh-avatar-btn{display:flex; align-items:center; gap:8px;
  height:36px; padding:0 8px 0 4px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-elev);}
.kh-avatar-btn:hover{border-color:#C6B5EC}
.kh-avatar{width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font:700 11px var(--fh); color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--purple));}
.kh-avatar-btn .kh-who{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15}
.kh-avatar-btn .kh-who b{font:650 12px var(--fh); color:var(--heading)}
.kh-avatar-btn .kh-who small{font:400 10.5px var(--fb); color:var(--muted)}
.kh-content{flex:1; padding:28px 28px 56px; width:100%}
.kh-page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.kh-page-head h1{font-size:26px; font-weight:800; letter-spacing:-.035em}
.kh-page-head p{color:var(--muted); margin-top:4px; font-size:14.5px}
.kh-page-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.kh-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); overflow:hidden;}
.kh-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line);}
.kh-card-head h2, .kh-card-head h3{font-size:15px; font-weight:700}
.kh-card-head a,.kh-card-link{font:600 13px var(--fb); color:var(--accent-text)}
.kh-card-head a:hover,.kh-card-link:hover{color:var(--accent-text-hover)}
.kh-card-body{padding:20px}
.kh-card-body.kh-tight{padding:0}
.kh-stats{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.kh-stat{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px 18px; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; gap:10px; min-width:0;
  transition:transform .18s var(--ease), box-shadow .18s;}
.kh-stat:hover{transform:translateY(-2px); box-shadow:var(--sh-md)}
.kh-stat-top{display:flex; align-items:center; justify-content:space-between}
.kh-stat-ico{width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--tint); color:var(--accent-text);}
.kh-stat-ico.kh-warn{background:var(--warn-bg); color:var(--warn)}
.kh-stat-ico.kh-danger{background:var(--danger-bg); color:var(--danger)}
.kh-stat-ico.kh-ok{background:var(--ok-bg); color:var(--ok)}
.kh-stat-ico.kh-info{background:var(--info-bg); color:var(--info)}
.kh-stat .kh-label{font:500 12.5px var(--fb); color:var(--muted)}
.kh-stat .kh-value{font:800 26px/1 var(--fh); color:var(--heading); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.kh-stat .kh-hint{font:500 12px var(--fb); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kh-grid-2{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr); gap:18px}
.kh-grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.kh-grid-2-eq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.kh-stack{display:flex; flex-direction:column; gap:18px}
.kh-row{display:flex; align-items:center; gap:12px}
.kh-sp{flex:1}
.kh-mt-4{margin-top:4px}
.kh-mt-8{margin-top:8px}
.kh-mt-12{margin-top:12px}
.kh-mt-16{margin-top:16px}
.kh-mt-20{margin-top:20px}
.kh-mt-24{margin-top:24px}
.kh-mb-8{margin-bottom:8px}
.kh-mb-16{margin-bottom:16px}
.kh-mb-24{margin-bottom:24px}
.kh-welcome{position:relative; overflow:hidden;
  background:
    radial-gradient(600px 220px at 100% -20%, rgba(155,107,232,.45), transparent 60%),
    radial-gradient(400px 200px at 0% 120%, rgba(74,26,158,.35), transparent 60%),
    linear-gradient(120deg,#2A0E5E 0%, #4A1A9E 55%, #7F4FDB 100%);
  color:#fff; border-radius:var(--r-xl); padding:28px 32px;
  box-shadow:var(--sh-md); min-height:164px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;}
.kh-welcome h2{color:#fff; font-size:26px; font-weight:800; letter-spacing:-.035em}
.kh-welcome p{color:#E2D4FF; margin-top:6px; max-width:520px; font-size:14.5px}
.kh-welcome-actions{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.kh-welcome .kh-facet{position:absolute; right:-20px; top:-30px; width:220px; opacity:.22;
  pointer-events:none; transform:rotate(-12deg);}
.kh-welcome-aside{position:relative; z-index:1; flex:none;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); border-radius:16px; padding:16px 18px; min-width:200px;}
.kh-welcome-aside .kh-k{font:500 11.5px var(--fb); color:#D8C8FF; text-transform:uppercase; letter-spacing:.06em}
.kh-welcome-aside .kh-v{font:800 22px var(--fh); color:#fff; letter-spacing:-.03em; margin-top:2px}
.kh-welcome-aside .kh-s{font:500 12px var(--fb); color:#C4A6FF; margin-top:2px}
.kh-list-row{display:flex; align-items:center; gap:14px;
  padding:14px 20px; border-bottom:1px solid var(--line);
  transition:background .15s;}
.kh-list-row:last-child{border-bottom:0}
.kh-list-row:hover{background:var(--bg-soft)}
.kh-svc-mark{width:42px; height:42px; border-radius:12px; flex:none;
  display:grid; place-items:center; color:#fff; font:800 15px var(--fh);
  background:linear-gradient(135deg,var(--violet),var(--purple));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.kh-svc-mark.kh-wp{background:linear-gradient(135deg,#4A90D9,#21759B)}
.kh-svc-mark.kh-vps{background:linear-gradient(135deg,#34D399,#0F766E)}
.kh-svc-mark.kh-dom{background:linear-gradient(135deg,#FB923C,#C2410C)}
.kh-list-row .kh-meta b{display:block; font:700 14px var(--fh); color:var(--heading); letter-spacing:-.02em}
.kh-list-row .kh-meta small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.kh-list-row .kh-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex:none}
.kh-quick{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.kh-quick a,.kh-quick-item{display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; box-shadow:var(--sh-xs);
  transition:transform .18s var(--ease), box-shadow .18s, border-color .18s;}
.kh-quick a:hover{transform:translateY(-2px); box-shadow:var(--sh-md); border-color:#C6B5EC}
.kh-quick .kh-nav-ico{width:36px;height:36px;border-radius:10px}
.kh-quick b{font:700 13.5px var(--fh); color:var(--heading)}
.kh-quick small{font:500 12px var(--fb); color:var(--muted)}
.kh-table-wrap{overflow-x:auto}
.kh-table th{text-align:left; font:700 11px/1 var(--fb); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg-soft); white-space:nowrap;}
.kh-table td{padding:14px 16px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:middle; font-size:13.5px;}
.kh-table tr:last-child td{border-bottom:0}
.kh-table tbody tr{transition:background .15s}
.kh-table tbody tr:hover{background:var(--bg-soft)}
.kh-table .kh-num,.kh-table .kh-amt{font-variant-numeric:tabular-nums; font-weight:600; color:var(--heading); font-family:var(--fh)}
.kh-table .kh-domain{font:700 13.5px var(--fh); color:var(--heading)}
.kh-tabs{display:flex; gap:4px; padding:4px; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; overflow-x:auto}
.kh-tab{height:34px; padding:0 14px; border-radius:9px;
  font:600 13px var(--fb); color:var(--muted); white-space:nowrap;
  transition:background .15s, color .15s, box-shadow .15s;}
.kh-tab:hover{color:var(--heading)}
.kh-tab.kh-is-active{background:var(--bg-elev); color:var(--heading); box-shadow:var(--sh-xs)}
.kh-tab-panels{margin-top:20px}
.kh-tab-panel{display:none}
.kh-tab-panel.kh-is-active{display:block}
.kh-gauges{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.kh-gauge-card{display:flex; flex-direction:column; align-items:center; gap:10px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 12px 16px; text-align:center;}
.kh-gauge{width:96px;height:96px;position:relative}
.kh-gauge svg{width:100%;height:100%}
.kh-gauge-center{position:absolute; inset:0; display:grid; place-items:center;
  font:800 16px var(--fh); color:var(--heading); letter-spacing:-.03em;}
.kh-gauge-card b{font:700 13px var(--fh); color:var(--heading)}
.kh-gauge-card small{font:500 12px var(--fb); color:var(--muted)}
.kh-field{display:flex; flex-direction:column; gap:6px}
.kh-label{font:600 12.5px var(--fb); color:var(--heading)}
.kh-hint{font:500 12px var(--fb); color:var(--muted)}
.kh-input,.kh-select,textarea.kh-input{height:42px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--input-bg); color:var(--heading);
  transition:border-color .15s, box-shadow .15s;}
textarea.kh-input{height:auto; padding:10px 12px; resize:vertical; min-height:96px; line-height:1.55}
.kh-input:focus,.kh-select:focus,textarea.kh-input:focus{outline:none; border-color:#C6B5EC; box-shadow:var(--focus)}
.kh-input-wrap{position:relative}
.kh-input-wrap .kh-ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.kh-input-wrap .kh-input{padding-left:38px}
.kh-empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:48px 24px; color:var(--muted)}
.kh-empty-ico{width:64px; height:64px; border-radius:20px; display:grid; place-items:center;
  background:var(--tint); color:var(--accent-text-hover); margin-bottom:16px;}
.kh-empty h3{font-size:17px; margin-bottom:6px}
.kh-empty p{max-width:360px; font-size:14px}
.kh-pop{position:relative}
.kh-pop-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:50;
  min-width:280px; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-lg); padding:8px;
  display:none;}
.kh-pop.kh-is-open .kh-pop-menu{display:block}
.kh-pop-item{display:flex; align-items:flex-start; gap:10px;
  padding:10px; border-radius:10px; text-align:left; width:100%;}
.kh-pop-item:hover{background:var(--bg-soft)}
.kh-pop-item b{display:block; font:650 13px var(--fh); color:var(--heading)}
.kh-pop-item small{display:block; color:var(--muted); font-size:12px}
.kh-pop-item.kh-is-unread b{color:var(--accent-text)}
.kh-menu-sep{height:1px; background:var(--line); margin:6px 4px}
.kh-ai-fab{position:fixed; right:24px; bottom:24px; z-index:45;
  width:56px; height:56px; border-radius:18px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--purple));
  box-shadow:0 10px 28px rgba(74,26,158,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s var(--ease);}
.kh-ai-fab:hover{transform:translateY(-2px) scale(1.03)}
.kh-ai-fab .kh-ic{width:24px;height:24px}
html.kh-is-ai-open .kh-ai-fab{display:none}
.kh-ai-panel{position:fixed; top:0; right:0; bottom:0; width:var(--ai); z-index:55;
  background:var(--bg-elev); border-left:1px solid var(--line);
  box-shadow:var(--sh-lg);
  display:flex; flex-direction:column;
  transform:translateX(110%);
  transition:transform .28s var(--ease);}
html.kh-is-ai-open .kh-ai-panel{transform:none}
.kh-ai-head{display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line);
  background:var(--ai-bg);}
.kh-ai-head .kh-avatar{width:36px;height:36px;border-radius:12px}
.kh-ai-head h3{font-size:14.5px}
.kh-ai-head p{font-size:12px; color:var(--muted)}
.kh-ai-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px}
.kh-ai-msg{max-width:92%; padding:10px 12px; border-radius:14px; font-size:13.5px; line-height:1.55}
.kh-ai-msg.kh-bot{background:var(--msg-agent); color:var(--heading); border-bottom-left-radius:4px}
.kh-ai-msg.kh-user{align-self:flex-end; background:var(--purple); color:#fff; border-bottom-right-radius:4px}
.kh-ai-sugs{display:flex; flex-wrap:wrap; gap:6px}
.kh-ai-sugs button{font:600 12px var(--fb); color:var(--accent-text);
  border:1px solid var(--tint-2); background:var(--tint);
  padding:6px 10px; border-radius:999px;}
.kh-ai-sugs button:hover{background:var(--tint-2)}
.kh-ai-foot{padding:12px; border-top:1px solid var(--line)}
.kh-ai-compose{display:flex; gap:8px; align-items:flex-end}
.kh-ai-compose textarea{flex:1; min-height:42px; max-height:120px; resize:none;
  border:1px solid var(--line-2); background:var(--input-bg);
  border-radius:12px; padding:10px 12px; color:var(--heading);}
.kh-ai-compose textarea:focus{outline:none; border-color:#C6B5EC; box-shadow:var(--focus)}
.kh-backdrop{position:fixed; inset:0; background:var(--overlay); z-index:35; opacity:0; pointer-events:none; transition:opacity .2s}
.kh-backdrop.kh-is-on{opacity:1; pointer-events:auto}
.kh-bottom-nav{display:none}
.kh-login-page{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
.kh-login-brand{position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(155,107,232,.4), transparent 60%),
    radial-gradient(600px 400px at 90% 90%, rgba(74,26,158,.5), transparent 60%),
    linear-gradient(160deg,#0E0824 0%, #2A0E5E 50%, #4A1A9E 100%);
  padding:48px 56px; display:flex; flex-direction:column;}
.kh-login-brand .kh-logo{height:36px; width:auto}
.kh-login-brand h1{font-size:40px; font-weight:800; letter-spacing:-.04em; color:#fff; margin-top:auto; max-width:480px; line-height:1.15}
.kh-login-brand p{color:#D8C8FF; margin-top:14px; font-size:16.5px; max-width:440px}
.kh-login-points{margin-top:32px; display:grid; gap:12px}
.kh-login-points li{display:flex; align-items:center; gap:10px; color:#EDE6FF; font-size:14.5px}
.kh-login-points .kh-nav-ico{background:rgba(255,255,255,.1); color:#fff}
.kh-login-facet{position:absolute; right:-40px; bottom:-20px; width:340px; opacity:.2; transform:rotate(-8deg); pointer-events:none}
.kh-login-panel{display:flex; align-items:center; justify-content:center; padding:48px 32px; background:var(--bg)}
.kh-login-card{width:min(420px,100%);}
.kh-login-card h2{font-size:28px; font-weight:800; letter-spacing:-.035em}
.kh-login-card .kh-sub{color:var(--muted); margin:8px 0 28px}
.kh-login-extra{display:flex; align-items:center; justify-content:space-between; margin:12px 0 20px; font-size:13px}
.kh-login-extra a{color:var(--accent-text); font-weight:600}
.kh-login-foot{margin-top:24px; text-align:center; color:var(--muted); font-size:13px}
.kh-login-foot a{color:var(--accent-text); font-weight:600}
.kh-pay-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.kh-pay-row img{height:18px; width:auto; opacity:.85}
.kh-split-or{display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; margin:18px 0}
.kh-split-or::before,.kh-split-or::after{content:""; flex:1; height:1px; background:var(--line)}
.kh-host-hero{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; box-shadow:var(--sh-sm);}
.kh-host-preview{width:160px; height:104px; border-radius:12px; overflow:hidden; flex:none;
  border:1px solid var(--line); background:
    linear-gradient(180deg,#F8F6FC 40%, #EDE6FF);
  position:relative;}
.kh-host-preview .kh-bar{height:16px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:4px; padding:0 8px}
.kh-host-preview .kh-bar i{width:6px;height:6px;border-radius:50%;background:#E3DCF0}
.kh-host-preview .kh-bar i:first-child{background:#FF7A90}
.kh-host-preview .kh-page{padding:10px}
.kh-host-preview .kh-line{height:6px; border-radius:4px; background:var(--tint-2); margin-bottom:6px}
.kh-host-id b{display:flex; align-items:center; gap:8px; font-size:20px; font-weight:800}
.kh-host-id small{display:block; color:var(--muted); margin-top:4px}
.kh-host-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.kh-kv{display:grid; grid-template-columns:160px 1fr; gap:8px 16px; font-size:13.5px}
.kh-kv dt{color:var(--muted)}
.kh-kv dd{color:var(--heading); font-weight:600}
.kh-invoice-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
.kh-paper{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:36px 40px}
.kh-paper-head{display:flex; justify-content:space-between; gap:24px; align-items:flex-start}
.kh-paper-head .kh-logo{height:32px; width:auto}
.kh-addr{font-size:13px; color:var(--muted); line-height:1.55}
.kh-addr b{color:var(--heading); font-size:14px}
.kh-inv-title{font-size:28px; font-weight:800; letter-spacing:-.04em; text-align:right}
.kh-inv-meta{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0; padding:18px 0; border-block:1px solid var(--line)}
.kh-totals{margin-left:auto; width:min(280px,100%); display:grid; gap:8px; margin-top:16px}
.kh-totals div{display:flex; justify-content:space-between; font-size:13.5px}
.kh-totals .kh-grand{margin-top:8px; padding-top:12px; border-top:1px solid var(--line); font:800 18px var(--fh); color:var(--heading)}
.kh-pay-box .kh-pay-logos{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px}
.kh-pay-box .kh-pay-logos img{height:20px; width:auto}
.kh-thread{display:flex; flex-direction:column; gap:16px}
.kh-msg{display:flex; gap:12px; align-items:flex-start}
.kh-msg .kh-bubble{flex:1; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px;}
.kh-msg.kh-is-staff .kh-bubble{background:var(--msg-agent); border-color:var(--tint-2)}
.kh-msg .kh-bubble header{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.kh-msg .kh-bubble header b{font:700 13.5px var(--fh); color:var(--heading)}
.kh-msg .kh-bubble header time{font-size:12px; color:var(--faint); margin-left:auto}
.kh-msg .kh-bubble p{font-size:14px; color:var(--text); margin-bottom:8px}
.kh-msg .kh-bubble p:last-child{margin-bottom:0}
.kh-composer{display:flex; flex-direction:column; gap:10px}
.kh-ticket-side{display:flex; flex-direction:column; gap:8px}
.kh-side-kv{display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line)}
.kh-side-kv:last-child{border-bottom:0}
.kh-side-kv span{color:var(--muted)}
.kh-side-kv b{color:var(--heading); font-weight:600; text-align:right}
.kh-profile-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr); gap:18px}
.kh-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.kh-form-grid .kh-full{grid-column:1/-1}
.kh-security-item{display:flex; align-items:center; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line);}
.kh-security-item:last-child{border-bottom:0}
.kh-ns-list{display:grid; gap:8px}
.kh-ns-item{display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-soft); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:var(--heading);}
.kh-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; background:var(--code-bg); padding:2px 6px; border-radius:6px}
.kh-kb-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.kh-kb-card{display:flex; flex-direction:column; gap:8px; padding:18px; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-xs); transition:transform .18s, box-shadow .18s, border-color .18s}
.kh-kb-card:hover{transform:translateY(-2px); box-shadow:var(--sh-md); border-color:#C6B5EC}
.kh-ref-box{display:flex; gap:8px}
.kh-ref-box .kh-input{flex:1}
.kh-ann{padding:18px 20px; border-bottom:1px solid var(--line)}
.kh-ann:last-child{border-bottom:0}
.kh-ann time{font-size:12px; color:var(--faint)}
.kh-ann h3{font-size:15.5px; margin:4px 0 6px}
.kh-ann p{color:var(--text); font-size:14px}
.kh-toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.kh-seg{display:inline-flex; padding:3px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px}
.kh-seg button{height:30px; padding:0 12px; border-radius:8px; font:600 12.5px var(--fb); color:var(--muted)}
.kh-seg button.kh-is-on,.kh-seg button[aria-pressed="true"]{background:var(--bg-elev); color:var(--heading); box-shadow:var(--sh-xs)}
[data-bs-theme="dark"] .kh-btn-secondary{background:var(--bg-soft)}
[data-bs-theme="dark"] .kh-welcome{box-shadow:none; border:1px solid rgba(196,166,255,.16)}
[data-bs-theme="dark"] .kh-host-preview{background:linear-gradient(180deg,#1C1536 40%, #2A1B55)}
[data-bs-theme="dark"] .kh-host-preview .kh-bar{background:#181230}
@media (max-width:1280px){
  .kh-stats{grid-template-columns:repeat(3,1fr)}
  .kh-gauges{grid-template-columns:repeat(3,1fr)}
  .kh-quick{grid-template-columns:repeat(3,1fr)}
  .kh-grid-2,.kh-invoice-layout,.kh-profile-grid{grid-template-columns:1fr}
  .kh-welcome-aside{display:none}
}
@media (max-width:1100px){
  .kh-sidebar{transform:translateX(-105%); transition:transform .28s var(--ease); box-shadow:var(--sh-lg)}
  .kh-sidebar.kh-is-open{transform:none}
  .kh-app-main{margin-left:0}
  .kh-menu-btn{display:grid}
  .kh-topbar-search{max-width:none}
  .kh-avatar-btn .kh-who{display:none}
  .kh-kb-grid{grid-template-columns:1fr 1fr}
  .kh-login-page{grid-template-columns:1fr}
  .kh-login-brand{display:none}
}
@media (max-width:860px){
  :root{--bottom:64px; --topbar:58px}
  .kh-bottom-nav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    height:64px; padding:0 6px env(safe-area-inset-bottom);
    background:var(--bg-elev); border-top:1px solid var(--line);}
  .kh-bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font:600 10.5px var(--fb); color:var(--muted);}
  .kh-bottom-nav a.kh-is-active{color:var(--accent-text)}
  .kh-bottom-nav .kh-ic{width:20px;height:20px}
  .kh-ai-fab{bottom:80px; right:16px; width:52px; height:52px}
  .kh-content{padding:18px 16px 32px}
  .kh-topbar{padding:0 12px; gap:8px}
  .kh-topbar-search{display:none}
  .kh-switcher span{display:none}
  .kh-crumbs h1{font-size:15px}
  .kh-page-head h1{font-size:22px}
  .kh-stats,.kh-gauges,.kh-quick,.kh-grid-3,.kh-form-grid,.kh-kb-grid{grid-template-columns:1fr}
  .kh-quick{grid-template-columns:1fr 1fr}
  .kh-paper{padding:20px 16px}
  .kh-inv-title{font-size:22px; text-align:left}
  .kh-paper-head,.kh-inv-meta{grid-template-columns:1fr; display:grid}
  .kh-host-preview{width:100%; height:120px}
  .kh-list-row{flex-wrap:wrap}
  .kh-list-row .kh-actions{width:100%; margin-left:54px; justify-content:flex-start}
  .kh-ai-panel{width:100%}
  .kh-welcome{padding:22px 20px; min-height:0}
  .kh-welcome h2{font-size:22px}
}
@media (max-width:420px){
  .kh-stats{grid-template-columns:1fr 1fr}
  .kh-stat .kh-value{font-size:22px}
}
.kh-collapse-btn{margin-left:auto; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; color:var(--muted);}
.kh-collapse-btn:hover{background:var(--tint); color:var(--heading)}
.kh-brand-icon{display:none; width:28px; height:28px}
html.kh-is-collapsed{--sidebar:var(--sidebar-collapsed)}
html.kh-is-collapsed .kh-sidebar-brand{padding:0; justify-content:center; gap:0}
html.kh-is-collapsed .kh-sidebar-brand .kh-logo,
html.kh-is-collapsed .kh-nav-label,
html.kh-is-collapsed .kh-nav-link > span,
html.kh-is-collapsed .kh-nav-count,
html.kh-is-collapsed .kh-ai-launch b,
html.kh-is-collapsed .kh-ai-launch small,
html.kh-is-collapsed .kh-collapse-btn{display:none}
html.kh-is-collapsed .kh-brand-icon{display:block}
html.kh-is-collapsed .kh-sidebar-scroll{padding:12px 8px}
html.kh-is-collapsed .kh-nav-link{justify-content:center; padding:0; width:44px; height:44px; margin:0 auto 4px}
html.kh-is-collapsed .kh-nav-section{margin-bottom:10px}
html.kh-is-collapsed .kh-ai-launch{justify-content:center; padding:10px}
html.kh-is-collapsed .kh-ai-launch .kh-nav-ico{margin:0}
@media (max-width:1100px){
  html.kh-is-collapsed{--sidebar:228px}
  html.kh-is-collapsed .kh-sidebar-brand .kh-logo,
  html.kh-is-collapsed .kh-nav-label,
  html.kh-is-collapsed .kh-nav-link > span,
  html.kh-is-collapsed .kh-collapse-btn{display:revert}
  html.kh-is-collapsed .kh-nav-link{justify-content:flex-start; width:auto; height:40px; padding:0 8px; margin:0}
  html.kh-is-collapsed .kh-brand-icon{display:none}
  html.kh-is-collapsed .kh-sidebar-brand{padding:0 20px; justify-content:flex-start; gap:10px}
}
.kh-topbar{gap:12px}
.kh-topbar-search{box-shadow:var(--sh-xs);
  background:var(--bg-elev);
  cursor:text;}
.kh-topbar-search span.kh-ph{color:var(--muted); font-size:13.5px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kh-page-kicker{display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--muted); font:500 13px var(--fb)}
.kh-page-kicker a:hover{color:var(--accent-text)}
.kh-page-kicker .kh-ic{width:14px;height:14px}
.kh-ai-home{background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
  padding:28px 28px 22px;
  position:relative; overflow:hidden;}
.kh-ai-home::before{content:""; position:absolute; inset:0 auto auto 0; width:140px; height:140px;
  background:radial-gradient(circle at 0 0, rgba(155,107,232,.18), transparent 70%);
  pointer-events:none;}
.kh-ai-home-top{display:flex; align-items:center; gap:12px; margin-bottom:16px; position:relative}
.kh-ai-home-top .kh-avatar{width:44px;height:44px;border-radius:14px}
.kh-ai-home-top h2{font-size:20px; font-weight:800}
.kh-ai-home-top p{color:var(--muted); font-size:13.5px; margin-top:2px}
.kh-ai-home-box{display:flex; align-items:center; gap:10px;
  height:56px; padding:0 8px 0 18px;
  border:1px solid var(--line-2); border-radius:16px;
  background:var(--bg-soft); position:relative;
  transition:border-color .15s, box-shadow .15s, background .15s;}
.kh-ai-home-box:focus-within{background:var(--bg-elev); border-color:#C6B5EC; box-shadow:var(--focus)}
.kh-ai-home-box input{flex:1; border:0; background:transparent; outline:none; font-size:15px; color:var(--heading); min-width:0}
.kh-ai-home-box input::placeholder{color:var(--faint)}
.kh-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.kh-pill{height:34px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg-elev);
  font:600 12.5px var(--fb); color:var(--heading);
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s, background .15s, transform .15s;}
.kh-pill:hover{border-color:#C6B5EC; background:var(--tint); transform:translateY(-1px)}
.kh-pill .kh-ic{width:14px;height:14px;color:var(--accent-text-hover)}
.kh-todos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.kh-todo{display:flex; gap:14px; align-items:flex-start;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--sh-xs);
  transition:transform .18s var(--ease), box-shadow .18s;}
.kh-todo:hover{transform:translateY(-2px); box-shadow:var(--sh-md)}
.kh-todo-ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;}
.kh-todo.kh-warn .kh-todo-ico{background:var(--warn-bg); color:var(--warn)}
.kh-todo.kh-danger .kh-todo-ico{background:var(--danger-bg); color:var(--danger)}
.kh-todo.kh-info .kh-todo-ico{background:var(--info-bg); color:var(--info)}
.kh-todo.kh-ok .kh-todo-ico{background:var(--ok-bg); color:var(--ok)}
.kh-todo b{display:block; font:700 13.5px var(--fh); color:var(--heading)}
.kh-todo p{font:500 12.5px var(--fb); color:var(--muted); margin-top:3px}
.kh-todo .kh-go{margin-top:8px; font:600 12.5px var(--fb); color:var(--accent-text); display:inline-flex; align-items:center; gap:4px}
.kh-site-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px}
.kh-site-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;}
.kh-site-card:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#C6B5EC}
.kh-site-thumb{height:148px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#EEF2FF,#EDE6FF);
  border-bottom:1px solid var(--line);}
.kh-site-thumb .kh-chrome{height:22px; background:rgba(255,255,255,.85); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:5px; padding:0 10px}
.kh-site-thumb .kh-chrome i{width:7px;height:7px;border-radius:50%;background:#E3DCF0}
.kh-site-thumb .kh-chrome i:nth-child(1){background:#FF7A90}
.kh-site-thumb .kh-chrome i:nth-child(2){background:#FFC960}
.kh-site-thumb .kh-chrome i:nth-child(3){background:#4CD787}
.kh-site-thumb .kh-fake{padding:14px 16px}
.kh-site-thumb .kh-fake .kh-hero{height:36px; border-radius:8px; background:linear-gradient(90deg,var(--purple),var(--lav)); margin-bottom:10px; opacity:.9}
.kh-site-thumb .kh-fake .kh-ln{height:8px; border-radius:4px; background:#fff; margin-bottom:6px; box-shadow:0 1px 2px rgba(28,13,63,.06)}
.kh-site-thumb .kh-fake .kh-cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:10px}
.kh-site-thumb .kh-fake .kh-cols b{display:block; height:28px; border-radius:6px; background:#fff}
.kh-site-thumb.kh-wp{background:linear-gradient(180deg,#E8F1FA,#D6E8F5)}
.kh-site-thumb.kh-wp .kh-fake .kh-hero{background:linear-gradient(90deg,#21759B,#4A90D9)}
.kh-site-thumb.kh-vps{background:linear-gradient(160deg,#0E0824,#1A3A3A); height:148px}
.kh-site-thumb.kh-vps .kh-term{font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:#86EFB5; padding:12px 14px}
.kh-site-thumb .kh-status-pin{position:absolute; top:30px; right:10px}
.kh-site-card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; flex:1}
.kh-site-card-title{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.kh-site-card-title h3{font-size:16px; font-weight:800; letter-spacing:-.02em}
.kh-site-card-title p{color:var(--muted); font-size:12.5px; margin-top:3px}
.kh-usage-bar{height:6px; border-radius:99px; background:var(--tint); overflow:hidden}
.kh-usage-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--purple),var(--lav))}
.kh-usage-bar.kh-warn i{background:linear-gradient(90deg,#D97706,#FBBF24)}
.kh-usage-meta{display:flex; justify-content:space-between; font:500 12px var(--fb); color:var(--muted); margin-bottom:6px}
.kh-site-qas{display:flex; flex-wrap:wrap; gap:6px}
.kh-site-qas a{height:28px; padding:0 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg-soft);
  font:600 12px var(--fb); color:var(--heading);
  display:inline-flex; align-items:center; gap:5px;}
.kh-site-qas a:hover{border-color:#C6B5EC; background:var(--tint); color:var(--accent-text)}
.kh-site-card-foot{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:4px}
.kh-stack-cards{display:flex; flex-direction:column; gap:10px}
.kh-row-card{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--sh-xs);
  transition:border-color .15s, box-shadow .15s, transform .15s;}
.kh-row-card:hover{border-color:#C6B5EC; box-shadow:var(--sh-sm); transform:translateY(-1px)}
.kh-tld{width:52px; height:52px; border-radius:14px; flex:none;
  display:grid; place-items:center;
  font:800 11px var(--fh); color:var(--accent-text); background:var(--tint);
  letter-spacing:-.02em; text-align:center; line-height:1.15;}
.kh-row-card .kh-main{min-width:0; flex:1}
.kh-row-card .kh-main h3{font-size:15px; font-weight:800}
.kh-row-card .kh-main p{color:var(--muted); font-size:12.5px; margin-top:2px}
.kh-row-card .kh-cell{display:flex; flex-direction:column; gap:2px; min-width:110px}
.kh-row-card .kh-cell span{font:500 11px var(--fb); color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.kh-row-card .kh-cell b{font:700 13.5px var(--fh); color:var(--heading); font-variant-numeric:tabular-nums}
.kh-row-card .kh-row-actions{display:flex; align-items:center; gap:8px; margin-left:auto}
.kh-site-shell{display:grid; grid-template-columns:232px minmax(0,1fr); gap:22px; align-items:start}
.kh-site-nav{position:sticky; top:calc(var(--topbar) + 20px);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-xs); padding:10px; overflow:hidden;}
.kh-site-switch{display:flex; align-items:center; gap:8px;
  padding:10px 10px 14px; margin:0 2px 8px; border-bottom:1px solid var(--line);}
.kh-site-switch b{font:700 13px var(--fh); color:var(--heading); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kh-site-switch small{color:var(--muted); font-size:11.5px}
.kh-snav-label{font:700 10.5px/1 var(--fb); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:12px 10px 6px}
.kh-snav-link{display:flex; align-items:center; gap:10px;
  height:38px; padding:0 10px; border-radius:10px;
  font:500 13.5px var(--fb); color:var(--sidebar-text);}
.kh-snav-link:hover{background:var(--tint); color:var(--heading)}
.kh-snav-link.kh-is-active{background:var(--tint); color:var(--accent-text); font-weight:600; box-shadow:inset 0 0 0 1px var(--tint-2)}
[data-bs-theme="dark"] .kh-snav-link.kh-is-active{color:#C4A6FF}
.kh-snav-link .kh-ic{width:18px;height:18px;color:var(--accent-text-hover)}
.kh-snav-link.kh-is-active .kh-ic{color:var(--accent-text)}
.kh-site-main{min-width:0}
.kh-panel-view{display:none}
.kh-panel-view.kh-is-active{display:block}
.kh-tool-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.kh-tool{display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 16px; box-shadow:var(--sh-xs); text-align:left; width:100%;
  transition:transform .18s var(--ease), box-shadow .18s, border-color .18s;
  min-height:132px;}
.kh-tool:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#C6B5EC}
.kh-tool-ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--tint); color:var(--accent-text);}
.kh-tool-ico.kh-blue{background:#DBEAFE; color:#1D4ED8}
.kh-tool-ico.kh-teal{background:#CCFBF1; color:#0F766E}
.kh-tool-ico.kh-amber{background:#FEF3C7; color:#B45309}
.kh-tool-ico.kh-rose{background:#FCE7F3; color:#BE185D}
.kh-tool-ico.kh-green{background:#E8F8EE; color:#15803D}
.kh-tool-ico.kh-slate{background:var(--bg-soft); color:var(--ink)}
[data-bs-theme="dark"] .kh-tool-ico.kh-blue{background:rgba(37,99,235,.18); color:#93C5FD}
[data-bs-theme="dark"] .kh-tool-ico.kh-teal{background:rgba(15,118,110,.2); color:#5EEAD4}
[data-bs-theme="dark"] .kh-tool-ico.kh-amber{background:rgba(217,119,6,.18); color:#FBBF24}
[data-bs-theme="dark"] .kh-tool-ico.kh-rose{background:rgba(190,24,93,.18); color:#F9A8D4}
[data-bs-theme="dark"] .kh-tool-ico.kh-green{background:var(--ok-bg); color:var(--ok)}
.kh-tool b{font:700 14px var(--fh); color:var(--heading)}
.kh-tool small{font:500 12.5px var(--fb); color:var(--muted); line-height:1.4}
.kh-hero-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.kh-hero-actions{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.kh-fm{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg-elev)}
.kh-fm-bar{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg-soft)}
.kh-fm-path{font:500 12.5px ui-monospace,Menlo,monospace; color:var(--muted)}
.kh-fm-row{display:grid; grid-template-columns:1fr 100px 120px 80px; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:13.5px; align-items:center}
.kh-fm-row:last-child{border-bottom:0}
.kh-fm-row:hover{background:var(--bg-soft)}
.kh-fm-row .kh-name{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--heading)}
.kh-fm-row .kh-ic{color:var(--accent-text-hover)}
.kh-toast-stack{position:fixed; top:calc(var(--topbar) + 12px); right:20px; z-index:60; display:flex; flex-direction:column; gap:8px; width:min(360px, calc(100vw - 32px)); pointer-events:none}
.kh-toast{pointer-events:auto;
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--sh-lg); padding:14px 16px;
  animation:kh-toast-in .35s var(--ease);}
.kh-toast.kh-warn{border-color:var(--warn-line)}
.kh-toast.kh-danger{border-color:var(--danger-line)}
.kh-toast b{display:block; font:700 13px var(--fh); color:var(--heading)}
.kh-toast p{font:500 12.5px var(--fb); color:var(--muted); margin-top:2px}
.kh-toast .kh-x{margin-left:auto; color:var(--faint); width:24px; height:24px; display:grid; place-items:center; border-radius:8px; flex:none}
.kh-toast .kh-x:hover{background:var(--bg-soft); color:var(--heading)}
@keyframes kh-toast-in{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.kh-cmd-overlay{position:fixed; inset:0; z-index:70; background:var(--overlay); display:none; align-items:flex-start; justify-content:center; padding:12vh 16px 16px}
.kh-cmd-overlay.kh-is-on{display:flex}
.kh-cmd-box{width:min(640px,100%); background:var(--bg-elev); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-lg); overflow:hidden}
.kh-cmd-box .kh-cmd-input{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.kh-cmd-box .kh-cmd-input input{flex:1; border:0; background:transparent; outline:none; font-size:16px; color:var(--heading)}
.kh-cmd-list{padding:8px; max-height:360px; overflow:auto}
.kh-cmd-item{display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; width:100%; text-align:left}
.kh-cmd-item:hover,.kh-cmd-item.kh-is-active{background:var(--tint)}
.kh-cmd-item b{font:650 13.5px var(--fh); color:var(--heading)}
.kh-cmd-item small{margin-left:auto; color:var(--faint); font-size:12px}
.kh-credit-banner{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-xs);}
.kh-alert-soft{display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border-radius:14px; border:1px solid var(--warn-line);
  background:var(--warn-bg); color:var(--warn);}
.kh-alert-soft b{color:var(--heading); display:block; font:700 13.5px var(--fh)}
.kh-alert-soft p{color:var(--text); font-size:13px; margin-top:2px}
.kh-mini-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.kh-mini{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; display:flex; flex-direction:column; gap:8px;}
.kh-mini h3{font-size:14px}
.kh-qr{width:132px;height:132px;border-radius:12px;border:1px solid var(--line);background:
  repeating-linear-gradient(90deg,var(--heading) 0 6px,transparent 6px 12px),
  repeating-linear-gradient(0deg,var(--heading) 0 6px,transparent 6px 12px);
  background-size:100% 8px, 8px 100%; opacity:.85}
@media (max-width:1100px){
  .kh-site-shell{grid-template-columns:1fr}
  .kh-site-nav{position:static; display:flex; flex-wrap:wrap; gap:4px; padding:8px}
  .kh-site-switch,.kh-snav-label{display:none}
  .kh-snav-link{height:34px}
  .kh-todos{grid-template-columns:1fr}
}
@media (max-width:860px){
  .kh-site-grid{grid-template-columns:1fr}
  .kh-tool-grid{grid-template-columns:1fr 1fr}
  .kh-row-card .kh-row-actions{width:100%; margin-left:0}
  .kh-toast-stack{right:12px; left:12px; width:auto}
  .kh-ai-home{padding:20px 16px}
  .kh-ai-home-box{height:50px}
}
[data-kh="theme"] .kh-ic:last-of-type{display:none}
[data-bs-theme="dark"] [data-kh="theme"] .kh-ic:first-of-type{display:none}
[data-bs-theme="dark"] [data-kh="theme"] .kh-ic:last-of-type{display:block}
.kh-login-card .kh-logo{margin-bottom:4px}
.kh-content{padding-bottom:88px}
.kh-alert-soft{align-items:center}
.kh-alert-soft .kh-btn{margin-left:auto; flex:none}
.kh-pay-chip{display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 10px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:8px;
  font:650 11.5px var(--fh); color:var(--heading);}
.kh-pay-chip img{height:14px; width:auto; max-width:40px; object-fit:contain}
.kh-page-head h1 .kh-demo-badge{vertical-align:middle; margin-left:10px; position:relative; top:-2px}
@media (max-width:1100px){
  .kh-collapse-btn{display:none !important}
  .kh-sidebar{bottom:var(--bottom)}
}
@media (max-width:860px){
  .kh-topbar .kh-demo-badge,
  .kh-topbar .kh-switcher{display:none}
  .kh-crumbs{flex:1; min-width:0}
  .kh-avatar-btn{padding:0; border-color:transparent; background:transparent; box-shadow:none}
  .kh-avatar-btn .kh-ic{display:none}
  .kh-content{padding-bottom:128px}
  .kh-site-nav{flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:6px !important;}
  .kh-site-nav::-webkit-scrollbar{display:none}
  .kh-snav-link{flex:none; white-space:nowrap}
  body:has(.kh-sidebar.kh-is-open) .kh-ai-fab{display:none}
}
.kh-pay-chip img{height:16px;max-width:52px}
.kh-content{padding-bottom:140px}
@media (max-width:860px){
  .kh-content{padding-bottom:160px}
}