/* Account home (My Account) — Kwik brand shell + home panel.
   Scoped to the top nav, the sidebar and #acct-panel-home so the other
   account panels keep their own styling. Light mode follows the Kwik
   software rules (Ink actions, one yellow accent, radii 8/12/999); dark
   mode overrides live at the bottom. */

:root {
    --kh-ink: #0B0B0F;
    --kh-canvas: #F6F6F7;
    --kh-surface: #FFFFFF;
    --kh-subtle: #F4F4F5;
    --kh-line: #F0F0F1;
    --kh-hair: #E8E8EA;
    --kh-text-2: #3F3F46;
    --kh-muted: #71717A;
    --kh-faint: #A1A1AA;
    --kh-sun: #FFD836;
    --kh-e1: 0 1px 2px rgba(11, 11, 15, .04), 0 1px 3px rgba(11, 11, 15, .06);
    --kh-e2: 0 6px 16px rgba(11, 11, 15, .08), 0 2px 4px rgba(11, 11, 15, .04);
    --kh-ease: cubic-bezier(.22, 1, .36, 1);
}

html.kh-root { background-color: var(--kh-ink); }
body.kh { background-color: var(--kh-canvas) !important; }

#acctTopNav, #dashboardSection aside, #acct-panel-home {
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- App shell: full-height sidebar + header + canvas ----------
   Kwik layout: sidebar flush left (wordmark lives there), white header to
   its right, #F6F6F7 canvas below. >=1024 the sidebar is fixed (expanded or
   icon-only "mini"); below that it is an off-canvas drawer. */
:root { --kh-side-w: 240px; --kh-e3: 0 16px 40px rgba(11, 11, 15, .14), 0 4px 10px rgba(11, 11, 15, .06); }

/* ---------- Top bar ---------- */
#acctTopNav.kh-topnav {
    background: var(--kh-surface);
    min-height: 64px;
    padding-left: 12px; padding-right: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kh-line);
    transition: margin-left .3s var(--kh-ease);
}
@media (min-width: 640px) {
    #acctTopNav.kh-topnav { min-height: 72px; padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
    #acctTopNav.kh-topnav { margin-left: var(--kh-side-w); padding-left: 40px; padding-right: 40px; }
}
.kh-top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kh-logo { height: 26px; width: auto; }
.kh-logo-top { height: 22px; }
.kh-menu-btn {
    width: 40px; height: 40px; flex: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--kh-hair); border-radius: 8px;
    background: var(--kh-surface); color: var(--kh-ink); cursor: pointer;
    transition: background-color .18s var(--kh-ease), transform .15s var(--kh-ease);
}
.kh-menu-btn:hover { background: var(--kh-subtle); }
.kh-menu-btn:active { transform: scale(.94); }
.kh-menu-btn svg { width: 20px; height: 20px; }
.kh-crumb { display: none; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 20px; }
.kh-crumb-root { color: var(--kh-muted); font-weight: 500; white-space: nowrap; }
.kh-crumb-sep { color: var(--kh-faint); }
.kh-crumb-page { color: var(--kh-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) {
    .kh-crumb { display: flex; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--kh-hair); }
}
@media (min-width: 1024px) {
    .kh-menu-btn, .kh-logo-top { display: none; }
    .kh-crumb { padding-left: 0; margin-left: 0; border-left: 0; font-size: 14px; }
}
/* Component display rules above beat Tailwind's .hidden; keep it winning. */
.kh-btn.hidden, .kh-iconbtn.hidden, .kh-count.hidden, .kh-legend.hidden, .kh-side .acct-nav-item.hidden { display: none !important; }
#acctTopNav .kh-iconbtn,
#acctTopNav .kwik-theme-toggle,
#acctTopNav .kcf-navbtn {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--kh-hair); border-radius: 8px;
    background: var(--kh-surface); color: var(--kh-text-2);
    transition: background-color .18s var(--kh-ease), color .18s var(--kh-ease), border-color .18s var(--kh-ease), transform .18s var(--kh-ease);
}
#acctTopNav .kh-iconbtn:hover,
#acctTopNav .kwik-theme-toggle:hover,
#acctTopNav .kcf-navbtn:hover {
    background: var(--kh-subtle); color: var(--kh-ink); border-color: #D4D4D8;
}
#acctTopNav .kh-iconbtn:active,
#acctTopNav .kwik-theme-toggle:active,
#acctTopNav .kcf-navbtn:active { transform: scale(.94); }
#acctTopNav .kh-iconbtn svg { width: 18px; height: 18px; stroke-width: 1.75; }
#acctTopNav .kh-iconbtn:hover svg { animation: khRing .5s var(--kh-ease); transform-origin: 50% 10%; }
@keyframes khRing { 0% { transform: rotate(0); } 30% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }

.kh-user { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.kh-user-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.kh-user-name { font-size: 12px; font-weight: 600; color: var(--kh-ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-logout {
    font-size: 11px; font-weight: 500; color: var(--kh-muted);
    background: none; border: 0; padding: 2px 0 0; cursor: pointer;
    transition: color .15s;
}
.kh-logout:hover { color: var(--kh-ink); text-decoration: underline; text-underline-offset: 2px; }
.kh-avatar {
    position: relative; flex: none;
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--kh-sun); color: var(--kh-ink);
    font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: visible;
}
.kh-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.kh-avatar::after {
    content: ""; position: absolute; top: 0; right: 0;
    width: 10px; height: 10px; border-radius: 999px;
    background: #22C55E; box-shadow: 0 0 0 1.5px #fff;
}

/* ---------- Canvas ---------- */
#dashboardSection.kh-shell { padding: 20px 16px 48px; transition: margin-left .3s var(--kh-ease); }
@media (min-width: 640px) { #dashboardSection.kh-shell { padding: 28px 24px 56px; } }
@media (min-width: 1024px) { #dashboardSection.kh-shell { margin-left: var(--kh-side-w); padding: 32px 40px 64px; } }
.kh-shell-inner > main { max-width: 1240px; margin: 0 auto; }

/* ---------- Sidebar ---------- */
.kh-sidewrap {
    position: fixed; z-index: 55; top: 0; bottom: 0; left: 0;
    width: min(280px, 86vw);
    transform: translateX(-104%);
    transition: transform .34s var(--kh-ease), width .3s var(--kh-ease), box-shadow .3s;
}
.kh-sidewrap.is-open { transform: none; box-shadow: var(--kh-e3); }
@media (min-width: 1024px) {
    .kh-sidewrap, .kh-sidewrap.is-open { transform: none; box-shadow: none; width: var(--kh-side-w); z-index: 40; }
}
.kh-side {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column;
    background: var(--kh-surface);
    border-right: 1px solid var(--kh-line);
    padding: calc(20px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.kh-side::-webkit-scrollbar { display: none; }
.kh-side-brand {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 40px; padding: 0 4px 0 10px; margin-bottom: 18px; flex: none;
}
.kh-side-logo { height: 28px; }
.kh-side-close {
    width: 36px; height: 36px; border-radius: 8px; border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--kh-subtle); color: var(--kh-ink); cursor: pointer;
}
.kh-side-close svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .kh-side-close { display: none; } }
.kh-side-nav { display: flex; flex-direction: column; gap: 2px; }
.kh-side-label {
    font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    color: var(--kh-muted); margin: 18px 0 6px 12px; white-space: nowrap;
}
.kh-side .acct-nav-item {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    height: 40px; padding: 0 12px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--kh-text-2);
    background: transparent; cursor: pointer; white-space: nowrap;
    text-decoration: none;
    transition: background-color .18s var(--kh-ease), color .18s var(--kh-ease), padding .3s var(--kh-ease);
}
.kh-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kh-side .acct-nav-item svg {
    width: 20px; height: 20px; flex-shrink: 0; color: var(--kh-text-2);
    transition: transform .25s var(--kh-ease), color .18s;
}
.kh-side .acct-nav-item svg path { stroke-width: 1.75; }
.kh-side .acct-nav-item:hover { background: var(--kh-subtle); color: var(--kh-ink); }
.kh-side .acct-nav-item:hover svg { transform: translateX(2px); color: var(--kh-ink); }
.kh-side .acct-nav-item.active { background: transparent; color: var(--kh-ink); font-weight: 600; }
.kh-side .acct-nav-item.active svg { color: var(--kh-ink); }
.kh-side .acct-nav-item.active:hover { background: var(--kh-subtle); }
.kh-side .acct-nav-item:focus-visible, .kh-collapse:focus-visible { outline: 2px solid var(--kh-ink); outline-offset: -2px; }
/* Before the JS indicator mounts, mark the active item statically. */
.kh-side:not(.kh-ready) .acct-nav-item.active::before {
    content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
    width: 2px; border-radius: 2px; background: var(--kh-ink);
}
.kh-side-bar {
    position: absolute; left: 0; top: 0; z-index: 2;
    width: 2px; height: 24px; border-radius: 2px;
    background: var(--kh-ink);
    pointer-events: none; opacity: 0;
    transition: transform .38s var(--kh-ease), width .38s var(--kh-ease), height .38s var(--kh-ease), opacity .2s;
}
.kh-side-bar.kh-noanim { transition: none; }
.kh-side-foot { margin-top: auto; padding-top: 12px; flex: none; display: none; }
@media (min-width: 1024px) { .kh-side-foot { display: block; } }
.kh-collapse {
    display: flex; align-items: center; gap: 12px; width: 100%;
    height: 40px; padding: 0 12px; border-radius: 8px; border: 0;
    background: transparent; color: var(--kh-muted); cursor: pointer;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: background-color .18s, color .18s, padding .3s var(--kh-ease);
}
.kh-collapse:hover { background: var(--kh-subtle); color: var(--kh-ink); }
.kh-collapse svg { width: 20px; height: 20px; flex: none; transition: transform .3s var(--kh-ease); }

/* Icon-only rail (>=1024, toggled by the Collapse button or default below 1280) */
@media (min-width: 1024px) {
    html.kh-side-mini { --kh-side-w: 76px; }
    html.kh-side-mini .kh-side { padding-left: 12px; padding-right: 12px; }
    html.kh-side-mini .kh-side-brand { padding: 0; justify-content: center; }
    html.kh-side-mini .kh-side-logo { width: 21px; height: 28px; object-fit: cover; object-position: left center; }
    html.kh-side-mini .kh-side .acct-nav-item,
    html.kh-side-mini .kh-collapse { justify-content: center; padding: 0; gap: 0; }
    html.kh-side-mini .kh-nav-label { display: none; }
    html.kh-side-mini .kh-side-label { font-size: 0; height: 1px; margin: 12px 10px; background: var(--kh-hair); overflow: hidden; }
    html.kh-side-mini .kh-collapse svg { transform: scaleX(-1); }
    html.kh-side-mini .kh-side:not(.kh-ready) .acct-nav-item.active::before { left: -12px; }
    html.kh-side-mini #supportNavBadge { position: absolute; top: 4px; right: 8px; margin: 0; }
}
/* Rail tooltip (one floating node; the sidebar clips overflow) */
.kh-tip {
    position: fixed; z-index: 70; pointer-events: none;
    background: var(--kh-ink); color: #fff; border-radius: 8px; padding: 6px 10px;
    font: 500 12px/1.35 "Poppins", system-ui, sans-serif; white-space: nowrap;
    opacity: 0; transform: translateX(-4px);
    transition: opacity .12s, transform .18s var(--kh-ease);
}
.kh-tip.is-on { opacity: 1; transform: none; }

.kh-scrim {
    position: fixed; inset: 0; z-index: 54;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.kh-scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .kh-scrim { display: none; } }
html.kh-drawer-open, html.kh-drawer-open body { overflow: hidden; }
/* Impersonation banner sits above everything; keep the rail below it. */
@media (min-width: 1024px) {
    body:has(#impersonationBanner:not(.hidden)) .kh-sidewrap { top: 40px; }
}

/* ---------- Shared card language ---------- */
#acct-panel-home .kh-card {
    background: var(--kh-surface);
    border-radius: 12px;
    box-shadow: var(--kh-e1);
    padding: 20px;
}
@media (min-width: 640px) { #acct-panel-home .kh-card { padding: 24px; } }
.kh-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kh-bar { width: 8px; height: 24px; border-radius: 3px; flex: none; background: var(--kh-sun); }
.kh-bar.lilac { background: #C4B5FD; }
.kh-bar.mint { background: #A7F3D0; }
.kh-bar.peach { background: #FDBA9A; }
.kh-bar.sky { background: #BAE6FD; }
.kh-bar.rose { background: #FDA4AF; }
.kh-card-title { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--kh-ink); margin: 0; }
.kh-overline { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--kh-muted); }
.kh-muted { color: var(--kh-muted); }
.kh-num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.kh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: 8px;
    font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background-color .18s var(--kh-ease), border-color .18s, color .18s, transform .15s var(--kh-ease);
}
.kh-btn:active { transform: scale(.97); }
.kh-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.kh-btn-primary { background: var(--kh-ink); color: #fff; border: 1px solid var(--kh-ink); }
.kh-btn-primary:hover { background: #27272A; border-color: #27272A; }
.kh-btn-secondary { background: var(--kh-surface); color: var(--kh-ink); border: 1px solid var(--kh-hair); font-weight: 500; }
.kh-btn-secondary:hover { background: var(--kh-subtle); border-color: #D4D4D8; }

.kh-icon-btn {
    width: 32px; height: 32px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid var(--kh-hair);
    background: var(--kh-surface); color: var(--kh-muted); cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s, transform .15s var(--kh-ease);
}
.kh-icon-btn:hover { background: var(--kh-subtle); color: var(--kh-ink); border-color: #D4D4D8; }
.kh-icon-btn:active { transform: scale(.92); }
.kh-icon-btn svg { width: 15px; height: 15px; }
#homeRefreshBtn:hover svg { transform: rotate(60deg); }
#homeRefreshBtn svg { transition: transform .35s var(--kh-ease); }

/* Entrance + value settle */
@keyframes khRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes khSettle { 0% { opacity: .2; transform: translateY(6px); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
.kh-rise { animation: khRise .55s var(--kh-ease) both; animation-delay: calc(var(--kh-i, 0) * 55ms); }
.kh-settle { animation: khSettle .45s var(--kh-ease) both; }

/* Home hero skeletons (shape-matched; primitive .hw-sk lives in home-workspace.css) */
#homeRangeTotal .hw-sk, #homeTodayRev .hw-sk { display: inline-block; vertical-align: middle; }
.hw-sk.kh-sk-big { width: 168px; height: 32px; border-radius: 10px; }
@media (min-width: 640px) { .hw-sk.kh-sk-big { width: 200px; height: 38px; } }
.hw-sk.kh-sk-sub { width: 220px; max-width: 80%; height: 11px; border-radius: 6px; margin-top: 8px; }
.kh-dark .hw-sk { --sk-base: rgba(255,255,255,.08); --sk-hi: rgba(255,255,255,.14); }
.hw-sk.kh-sk-dark-val { width: 150px; height: 30px; border-radius: 10px; }
.hw-sk.kh-sk-dark-sub { width: 110px; height: 10px; border-radius: 6px; margin-top: 8px; }
.kh-chart-sk {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0 0;
    transition: opacity .3s ease;
}
.kh-chart-sk.is-leaving { opacity: 0; }
.kh-chart-sk-grid { display: block; height: 0; border-top: 1px dashed var(--kh-hair, #E8E8EA); opacity: .9; }
.hw-sk.kh-chart-sk-area {
    position: absolute; left: 0; right: 0; bottom: 26px; height: 72%;
    border-radius: 0;
    background: linear-gradient(to bottom, var(--sk-base) 10%, transparent 115%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V122C34 118 52 96 88 100S146 78 182 84 236 48 274 56 334 22 362 30 388 16 400 14V160Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V122C34 118 52 96 88 100S146 78 182 84 236 48 274 56 334 22 362 30 388 16 400 14V160Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.kh-chart-sk-axis { position: relative; display: flex; justify-content: space-between; align-items: center; height: 18px; }
.hw-sk.kh-sk-tick { width: 34px; height: 9px; border-radius: 5px; }
.kh-tile-sk { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--kh-hair, #E8E8EA); }
.kh-tile-sk:hover { background: transparent; transform: none; }
.hw-sk.kh-sk-tile-label { width: 52%; height: 9px; border-radius: 5px; }
.hw-sk.kh-sk-tile-val { width: 72%; height: 14px; border-radius: 6px; }
.kh-row-sk { pointer-events: none; }
.hw-sk.kh-sk-rank { width: 24px; height: 24px; border-radius: 999px; flex: none; }
.hw-sk.kh-sk-row-title { width: 62%; height: 12px; border-radius: 6px; }
.hw-sk.kh-sk-row-val { width: 64px; height: 12px; border-radius: 6px; }
.hw-sk.kh-sk-row-meta { width: 44px; height: 9px; border-radius: 5px; }
/* Profile photo: one quiet circle until we know whether a photo exists. */
.kh-welcome-photo.is-loading > * { visibility: hidden; }
.kh-welcome-photo.is-loading::before {
    content: ""; position: absolute; inset: 0; border-radius: 999px;
    background: linear-gradient(100deg, #EEEEF0 30%, #F7F7F8 50%, #EEEEF0 70%);
    background-size: 220% 100%; animation: khShimmer 1.9s ease-in-out infinite;
}
html[data-kwik-theme="dark"] .kh-welcome-photo.is-loading::before { background-image: linear-gradient(100deg, #303033 30%, #3a3a3e 50%, #303033 70%); }
@media (prefers-reduced-motion: reduce) { .kh-welcome-photo.is-loading::before { animation: none; } }

/* Legacy loading text (other panels still toggle animate-pulse) */
#acct-panel-home .animate-pulse.kh-num { color: transparent !important; position: relative; }
#acct-panel-home .animate-pulse.kh-num::after {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 160px; max-width: 80%;
    border-radius: 8px; background: linear-gradient(90deg, rgba(161,161,170,.18), rgba(161,161,170,.32), rgba(161,161,170,.18));
    background-size: 200% 100%; animation: khShimmer 1.2s linear infinite;
}
.kh-dark .animate-pulse.kh-num::after { background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08)) !important; background-size: 200% 100% !important; }
@keyframes khShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Welcome ---------- */
#accountWelcomeCard.kh-greet { display: block; margin: 0 0 24px; }
@media (min-width: 1024px) { #accountWelcomeCard.kh-greet { margin-bottom: 28px; } }
.kh-welcome-photo {
    position: relative; flex: none; cursor: pointer;
    width: 56px; height: 56px; border-radius: 999px;
    transition: transform .25s var(--kh-ease);
}
.kh-welcome-photo:hover { transform: scale(1.05); }
.kh-welcome-photo img, .kh-welcome-photo > div { width: 56px !important; height: 56px !important; }
.kh-welcome-photo #acctPhotoPreview { box-shadow: 0 0 0 3px var(--kh-sun); border: 0 !important; }
.kh-welcome-photo #acctPhotoPlaceholder { background: var(--kh-subtle) !important; border: 1px dashed #D4D4D8 !important; }
.kh-welcome-title { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--kh-ink); margin: 2px 0 0; }
@media (min-width: 640px) { .kh-welcome-title { font-size: 30px; } }
.kh-wave { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--kh-sun); margin-right: 8px; vertical-align: middle; animation: khPulseDot 2.4s ease-in-out infinite; }
@keyframes khPulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 54, .55); } 50% { box-shadow: 0 0 0 6px rgba(255, 216, 54, 0); } }
#acctPhotoPrompt.kh-callout {
    display: inline-flex; align-items: center; gap: 8px;
    background: #FFFBEB; color: #713F12; border-radius: 8px;
    padding: 6px 10px; font-size: 12px; font-weight: 500; margin-top: 8px;
}
#acctPhotoPrompt.kh-callout.hidden { display: none; }

/* ---------- Sales hero ---------- */
.kh-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* Grid/flex children default to min-width:auto, so one long nowrap name
   (Top projects, recent sales) would widen the whole column past the phone
   screen. Let them shrink and truncate instead. */
.kh-hero-grid > *, .kh-row > *, .kh-proj-main > * { min-width: 0; }
#acct-panel-home { overflow-x: clip; }
@media (min-width: 1024px) { .kh-hero-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; } }
@media (min-width: 1440px) { .kh-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); } }
#adminHomeHero.kh-hero { margin-bottom: 36px; }
.kh-chart { position: relative; height: 220px; }
@media (min-width: 640px) { .kh-chart { height: 260px; } }
@media (min-width: 1280px) { .kh-chart { height: 300px; } }
.kh-big { font-size: 34px; font-weight: 600; line-height: 1.15; color: var(--kh-ink); min-height: 40px; }
@media (min-width: 640px) { .kh-big { font-size: 40px; min-height: 46px; } }
.kh-sub { font-size: 13px; color: var(--kh-muted); margin-top: 2px; }

.kh-seg {
    position: relative; display: inline-flex; align-items: center;
    background: var(--kh-subtle); border-radius: 999px; padding: 3px;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.kh-seg::-webkit-scrollbar { display: none; }
.kh-seg-inner { position: relative; z-index: 1; display: inline-flex; gap: 2px; }
.kh-seg-btn {
    height: 28px; padding: 0 11px; border-radius: 999px; border: 0;
    background: transparent; color: var(--kh-muted);
    font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: color .25s var(--kh-ease), background-color .2s;
}
.kh-seg-btn:hover { color: var(--kh-ink); }
.kh-seg-btn.is-active { color: #fff; }
.kh-seg[data-kh-thumb]:not(.kh-ready) .kh-seg-btn.is-active { background: var(--kh-ink); }
.kh-seg-thumb {
    position: absolute; z-index: 0; top: 3px; left: 0; height: 28px;
    border-radius: 999px; background: var(--kh-ink);
    box-shadow: 0 1px 2px rgba(11, 11, 15, .2);
    transition: transform .42s var(--kh-ease), width .42s var(--kh-ease);
    pointer-events: none;
}
.kh-seg-thumb.kh-noanim { transition: none; }
/* Light variant for the rep scope switch */
.kh-seg-soft .kh-seg-btn.is-active { color: var(--kh-ink); background: var(--kh-surface); box-shadow: var(--kh-e1); }

.kh-legend { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; color: var(--kh-muted); }
.kh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: -1px; }
.kh-legend .kh-dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed #34D399; background: none; vertical-align: 3px; }

.kh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .kh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kh-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kh-tile {
    background: var(--kh-canvas); border-radius: 8px; padding: 10px 12px;
    transition: background-color .2s, transform .2s var(--kh-ease);
}
.kh-tile:hover { background: var(--kh-subtle); transform: translateY(-1px); }
.kh-tile-label { font-size: 11px; font-weight: 500; color: var(--kh-muted); }
.kh-tile-val { font-size: 15px; font-weight: 600; color: var(--kh-ink); }
.kh-tile-sub { font-size: 11px; color: #15803D; }
.kh-sub-short { display: none; }
@media (min-width: 1280px) { .kh-tiles .kh-sub-long { display: none; } .kh-tiles .kh-sub-short { display: inline; } }

/* Period card (Ink) */
.kh-dark {
    position: relative; overflow: hidden;
    background: var(--kh-ink); color: #fff;
    border-radius: 12px; padding: 20px;
}
@media (min-width: 640px) { .kh-dark { padding: 24px; } }
.kh-dark .kh-overline { color: var(--kh-faint); }
.kh-dark-val { font-size: 32px; font-weight: 600; line-height: 1.2; margin-top: 8px; color: #fff; min-height: 38px; }
.kh-dark-sub { font-size: 12px; color: var(--kh-faint); margin-top: 2px; }
.kh-spark {
    position: absolute; right: 0; bottom: 0; width: 120px; height: 56px;
    opacity: .55; pointer-events: none;
}
.kh-spark path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: khDraw 1.4s var(--kh-ease) .2s forwards; }
@keyframes khDraw { to { stroke-dashoffset: 0; } }

/* Ranked rows (Top projects, recent sales) */
.kh-rows { display: flex; flex-direction: column; gap: 2px; }
.kh-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px; margin: 0 -8px; border-radius: 8px;
    transition: background-color .18s;
    animation: khRise .45s var(--kh-ease) both; animation-delay: calc(var(--kh-i, 0) * 45ms);
}
.kh-row:hover { background: #FAFAFA; }
.kh-rank {
    width: 28px; height: 28px; border-radius: 999px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--kh-subtle); color: var(--kh-text-2);
    font-size: 12px; font-weight: 600;
}
.kh-rank.is-first { background: var(--kh-sun); color: var(--kh-ink); }
.kh-row-title { font-size: 14px; font-weight: 500; color: var(--kh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.kh-row-link:hover .kh-row-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--kh-sun); text-decoration-thickness: 2px; }
.kh-row-sub { font-size: 12px; color: var(--kh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-row-val { font-size: 14px; font-weight: 600; color: var(--kh-ink); font-variant-numeric: tabular-nums; }
.kh-row-meta { font-size: 11px; color: var(--kh-faint); }
.kh-empty { font-size: 13px; color: var(--kh-faint); padding: 6px 0; }

/* ---------- Projects ---------- */
.kh-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kh-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px;
    background: var(--kh-surface); box-shadow: var(--kh-e1);
    font-size: 12px; font-weight: 600; color: var(--kh-text-2);
}
.kh-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.kh-proj {
    position: relative; display: flex; flex-direction: column;
    background: var(--kh-surface);
    border-radius: 12px; box-shadow: var(--kh-e1);
    transition: box-shadow .25s var(--kh-ease), transform .25s var(--kh-ease);
    animation: khRise .5s var(--kh-ease) both; animation-delay: calc(var(--kh-i, 0) * 50ms);
}
.kh-settled > .kh-proj { animation: none; }
.kh-proj:not(.is-archived):hover { box-shadow: var(--kh-e2); transform: translateY(-2px); }
.kh-proj.is-menu-open { z-index: 20; }
.kh-proj.is-archived > .kh-proj-main, .kh-proj.is-archived > .kh-actions { opacity: .62; transition: opacity .2s; }
.kh-proj.is-archived:hover > .kh-proj-main, .kh-proj.is-archived:hover > .kh-actions { opacity: .9; }
.kh-proj-main {
    flex: 1; display: flex; flex-direction: column; gap: 12px;
    padding: 18px 18px 16px; border-radius: 12px;
    color: inherit; text-decoration: none;
}
.kh-proj-main:focus-visible { outline: 2px solid var(--kh-ink); outline-offset: -2px; }
.kh-proj-top { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 36px; }
.kh-proj-id { flex: 1; min-width: 0; }
.kh-tile-av {
    width: 44px; height: 44px; border-radius: 999px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: var(--kh-ink);
    transition: transform .3s var(--kh-ease);
}
.kh-proj:hover .kh-tile-av { transform: scale(1.06) rotate(-4deg); }
.kh-av-0 { background: #FFD836; } .kh-av-1 { background: #C4B5FD; } .kh-av-2 { background: #A7F3D0; }
.kh-av-3 { background: #FDBA9A; } .kh-av-4 { background: #BAE6FD; } .kh-av-5 { background: #FDA4AF; } .kh-av-6 { background: #D9F99D; }
.kh-proj-name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--kh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
a.kh-proj-main:hover .kh-proj-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--kh-sun); text-decoration-thickness: 2px; }
.kh-proj-type { font-size: 12px; color: var(--kh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 0; }
.kh-proj-desc {
    font-size: 13px; line-height: 1.45; color: var(--kh-text-2); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kh-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kh-pill {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
    background: var(--kh-subtle); color: var(--kh-text-2);
}
.kh-pill:empty { display: none; }
.kh-pill-live { background: #DCFCE7; color: #15803D; }
.kh-pill-live::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: #22C55E;
    animation: khLive 2s ease-in-out infinite;
}
@keyframes khLive { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 60% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); } }
.kh-pill-up { background: #DCFCE7; color: #15803D; font-weight: 600; }
.kh-pill-plain { background: transparent; padding: 0 2px; color: var(--kh-muted); }
/* Campaign timeline */
.kh-prog { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.kh-prog-track { flex: 1; height: 6px; border-radius: 999px; background: var(--kh-subtle); overflow: hidden; }
.kh-prog-track > span { display: block; height: 100%; border-radius: 999px; background: var(--kh-sun); transform-origin: left; animation: khGrow .8s var(--kh-ease) .15s both; }
.kh-proj.is-archived .kh-prog-track > span { background: #D4D4D8; }
@keyframes khGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kh-prog-label { font-size: 11px; font-weight: 500; color: var(--kh-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Rep cards with no tools: decorative arrow in the menu slot */
.kh-go {
    position: absolute; top: 24px; right: 18px; pointer-events: none;
    width: 32px; height: 32px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--kh-subtle); color: var(--kh-text-2);
    transition: background-color .2s, color .2s, transform .3s var(--kh-ease);
}
.kh-go svg { width: 16px; height: 16px; stroke-width: 2; }
.kh-proj:not(.is-archived):hover .kh-go { background: var(--kh-ink); color: #fff; transform: translateX(2px); }
/* Footer actions */
.kh-actions {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
    padding: 12px 14px 14px; border-top: 1px solid var(--kh-line);
}
.kh-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 10px; border-radius: 8px; border: 0; min-width: 0;
    background: var(--kh-subtle); color: var(--kh-ink);
    font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
    overflow: hidden; text-overflow: ellipsis;
    transition: background-color .15s, color .15s, transform .15s var(--kh-ease);
}
.kh-act svg { width: 16px; height: 16px; stroke-width: 1.75; flex: none; }
.kh-act:hover { background: #E4E4E7; }
.kh-act:active { transform: scale(.97); }
.kh-act-strong:hover { background: var(--kh-ink); color: #fff; }
/* Overflow menu (secondary admin actions) */
.kh-menu-wrap { position: absolute; top: 20px; right: 14px; z-index: 2; }
.kh-menu-trigger {
    width: 36px; height: 36px; border-radius: 8px; border: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--kh-muted); cursor: pointer;
    transition: background-color .15s, color .15s;
}
.kh-menu-trigger svg { width: 18px; height: 18px; stroke-width: 2.5; }
.kh-menu-trigger:hover, .kh-menu-trigger[aria-expanded="true"] { background: var(--kh-subtle); color: var(--kh-ink); }
.kh-menu-trigger:focus-visible { outline: 2px solid var(--kh-ink); outline-offset: 0; }
.kh-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 220px; padding: 6px;
    background: var(--kh-surface); border-radius: 12px; box-shadow: var(--kh-e3);
    transform-origin: top right; animation: khMenuIn .16s var(--kh-ease);
}
.kh-menu[hidden] { display: none; }
@keyframes khMenuIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.kh-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    height: 40px; padding: 0 12px; border-radius: 8px; border: 0;
    background: transparent; color: var(--kh-ink); text-align: left; text-decoration: none;
    font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: background-color .12s;
}
.kh-menu-item svg { width: 16px; height: 16px; stroke-width: 1.75; flex: none; color: var(--kh-text-2); }
.kh-menu-item:hover, .kh-menu-item:focus-visible { background: var(--kh-subtle); outline: none; }
.kh-menu-danger, .kh-menu-danger svg { color: #DC2626; }
.kh-menu-danger:hover, .kh-menu-danger:focus-visible { background: #FEE2E2; }
.kh-menu-sep { height: 1px; background: var(--kh-line); margin: 6px 4px; }

/* Data tool tiles */
#acct-panel-home .kh-tool {
    background: var(--kh-surface); border-radius: 12px; box-shadow: var(--kh-e1); padding: 16px;
    transition: box-shadow .25s var(--kh-ease), transform .25s var(--kh-ease);
}
#acct-panel-home .kh-tool:hover { box-shadow: var(--kh-e2); transform: translateY(-2px); }
#acct-panel-home .kh-tool > div:first-child { font-weight: 600; }

.kh-divider-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kh-divider-label::after { content: ""; flex: 1; height: 1px; background: var(--kh-hair); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .kh-rise, .kh-settle, .kh-row, .kh-proj, .kh-spark path, .kh-wave, .kh-pill-live::before, .kh-prog-track > span, .kh-menu { animation: none !important; }
    .kh-spark path { stroke-dashoffset: 0; }
    .kh-seg-thumb, .kh-side-bar, .kh-sidewrap, .kh-shell, #acctTopNav { transition: none !important; }
}

/* ---------- Dark theme ---------- */
html[data-kwik-theme="dark"].kh-root, html[data-kwik-theme="dark"] body.kh { background-color: var(--kwik-canvas, #18181b) !important; }
html[data-kwik-theme="dark"] #acctTopNav.kh-topnav { background: var(--kwik-surface, #27272a) !important; border-bottom-color: var(--kwik-border, #454549); }
html[data-kwik-theme="dark"] .kh-logo { content: url("/static/kwik_logo_white.png"); }
html[data-kwik-theme="dark"] .kh-tile-sub { color: #86efac; }
html[data-kwik-theme="dark"] .kh-count { color: #e4e4e7 !important; }
html[data-kwik-theme="dark"] .kh-btn-primary { background: #FFD836; border-color: #FFD836; color: #0B0B0F; }
html[data-kwik-theme="dark"] #acctTopNav .kh-iconbtn,
html[data-kwik-theme="dark"] #acctTopNav .kwik-theme-toggle,
html[data-kwik-theme="dark"] #acctTopNav .kcf-navbtn { background: transparent; color: #e4e4e7; border-color: #454549; }
html[data-kwik-theme="dark"] #acctTopNav .kh-iconbtn:hover,
html[data-kwik-theme="dark"] #acctTopNav .kwik-theme-toggle:hover,
html[data-kwik-theme="dark"] #acctTopNav .kcf-navbtn:hover { background: #303033; color: #FFD836; border-color: #FFD836; }
html[data-kwik-theme="dark"] .kh-user-name { color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-logout { color: #b5b5bd; }
html[data-kwik-theme="dark"] .kh-avatar::after { box-shadow: 0 0 0 1.5px #27272a; }
html[data-kwik-theme="dark"] #acct-panel-home .kh-card,
html[data-kwik-theme="dark"] .kh-proj,
html[data-kwik-theme="dark"] .kh-count,
html[data-kwik-theme="dark"] .kh-btn-secondary,
html[data-kwik-theme="dark"] .kh-icon-btn,
html[data-kwik-theme="dark"] #acct-panel-home .kh-tool { background: var(--kwik-surface, #27272a) !important; box-shadow: none; border-color: #454549; }
html[data-kwik-theme="dark"] .kh-side .acct-nav-item,
html[data-kwik-theme="dark"] .kh-side .acct-nav-item svg { color: #d4d4d8 !important; }
html[data-kwik-theme="dark"] .kh-side .acct-nav-item:hover { background: #303033 !important; }
html[data-kwik-theme="dark"] .kh-side .acct-nav-item.active,
html[data-kwik-theme="dark"] .kh-side .acct-nav-item.active svg { color: #f4f4f5 !important; background: transparent !important; }
html[data-kwik-theme="dark"] .kh-side-bar,
html[data-kwik-theme="dark"] .kh-side:not(.kh-ready) .acct-nav-item.active::before { background: #FFD836; }
html[data-kwik-theme="dark"] :is(.kh-card-title, .kh-big, .kh-row-title, .kh-row-val, .kh-proj-name, .kh-tile-val, .kh-welcome-title, .kh-btn-secondary) { color: #f4f4f5 !important; }
html[data-kwik-theme="dark"] :is(.kh-sub, .kh-row-sub, .kh-proj-desc, .kh-tile-label, .kh-overline, .kh-legend) { color: #b5b5bd; }
html[data-kwik-theme="dark"] :is(.kh-tile, .kh-seg, .kh-pill, .kh-rank, .kh-go) { background: #303033; color: #e4e4e7; }
html[data-kwik-theme="dark"] .kh-pill-live, html[data-kwik-theme="dark"] .kh-pill-up { background: rgba(34, 197, 94, .16); color: #86efac; }
html[data-kwik-theme="dark"] .kh-rank.is-first { background: #FFD836; color: #0B0B0F; }
html[data-kwik-theme="dark"] .kh-seg-thumb { background: #FFD836; }
html[data-kwik-theme="dark"] .kh-seg-btn.is-active { color: #0B0B0F; }
html[data-kwik-theme="dark"] .kh-seg-soft .kh-seg-btn.is-active { background: #454549; color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-row:hover { background: #303033; color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-actions { border-top-color: #3a3a3e; }
html[data-kwik-theme="dark"] .kh-dark { background: #0B0B0F; box-shadow: inset 0 0 0 1px #3a3a3e; }
html[data-kwik-theme="dark"] .kh-proj:not(.is-archived):hover .kh-go { background: #FFD836; color: #0B0B0F; }
/* Shell (dark) */
html[data-kwik-theme="dark"] .kh-side { background: var(--kwik-surface, #27272a); border-right-color: #3a3a3e; }
html[data-kwik-theme="dark"] .kh-side-close, html[data-kwik-theme="dark"] .kh-menu-btn { background: #303033; color: #f4f4f5; border-color: #454549; }
html[data-kwik-theme="dark"] .kh-collapse { color: #b5b5bd; }
html[data-kwik-theme="dark"] .kh-collapse:hover { background: #303033; color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-side-label { color: #8f8f98; }
html[data-kwik-theme="dark"].kh-side-mini .kh-side-label { background: #3a3a3e; }
html[data-kwik-theme="dark"] .kh-crumb { border-left-color: #454549; }
html[data-kwik-theme="dark"] .kh-crumb-root { color: #b5b5bd; }
html[data-kwik-theme="dark"] .kh-crumb-page { color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-scrim { background: rgba(24, 24, 27, .72); }
html[data-kwik-theme="dark"] .kh-tip { background: #f4f4f5; color: #0B0B0F; }
/* Project cards (dark) */
html[data-kwik-theme="dark"] :is(.kh-proj-type, .kh-prog-label, .kh-pill-plain) { color: #b5b5bd; }
html[data-kwik-theme="dark"] .kh-proj-desc { color: #d4d4d8; }
html[data-kwik-theme="dark"] .kh-prog-track { background: #3a3a3e; }
html[data-kwik-theme="dark"] .kh-act { background: #303033; color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-act:hover { background: #3f3f46; }
html[data-kwik-theme="dark"] .kh-act-strong:hover { background: #FFD836; color: #0B0B0F; }
html[data-kwik-theme="dark"] .kh-menu-trigger { color: #b5b5bd; }
html[data-kwik-theme="dark"] .kh-menu-trigger:hover, html[data-kwik-theme="dark"] .kh-menu-trigger[aria-expanded="true"] { background: #303033; color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-menu { background: #27272a; box-shadow: 0 16px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px #3a3a3e; }
html[data-kwik-theme="dark"] .kh-menu-item { color: #f4f4f5; }
html[data-kwik-theme="dark"] .kh-menu-item svg { color: #d4d4d8; }
html[data-kwik-theme="dark"] .kh-menu-item:hover, html[data-kwik-theme="dark"] .kh-menu-item:focus-visible { background: #303033; }
html[data-kwik-theme="dark"] .kh-menu-danger, html[data-kwik-theme="dark"] .kh-menu-danger svg { color: #f87171; }
html[data-kwik-theme="dark"] .kh-menu-danger:hover { background: rgba(248, 113, 113, .12); }
html[data-kwik-theme="dark"] .kh-menu-sep { background: #3a3a3e; }
html[data-kwik-theme="dark"] #acctPhotoPrompt.kh-callout { background: rgba(255, 216, 54, .12); color: #fde68a; }