/* PHASE 64: Kahawa Design System 3.0 */
:root{--kh-motion-fast:120ms;--kh-motion-base:220ms;--kh-motion-slow:360ms;--kh-ease:cubic-bezier(.2,.8,.2,1);--kh-layer-dropdown:70;--kh-layer-sticky:80;--kh-layer-overlay:90;--kh-layer-modal:100}
[data-kh-component]{position:relative}.kh-ui-appbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 20px;border-bottom:1px solid var(--kh-line);background:color-mix(in srgb,var(--kh-surface) 94%,transparent);backdrop-filter:blur(16px)}
.kh-ui-sidebar{display:flex;flex-direction:column;gap:6px;padding:16px;border-right:1px solid var(--kh-line);background:var(--kh-surface)}.kh-ui-sidebar a{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:12px;color:var(--kh-muted)}.kh-ui-sidebar a[aria-current=page],.kh-ui-sidebar a.is-active{color:var(--kh-brand);background:var(--kh-brand-soft);font-weight:800}
.kh-ui-card{padding:20px;border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface);box-shadow:var(--kh-shadow-sm)}.kh-ui-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.kh-ui-card__title{margin:0;font-size:17px;font-weight:850}.kh-ui-card__meta{font-size:13px;color:var(--kh-muted)}
.kh-ui-kpi{display:grid;gap:8px}.kh-ui-kpi__value{font-size:30px;font-weight:900;letter-spacing:-.04em}.kh-ui-kpi__trend{font-size:13px;font-weight:750}.kh-ui-kpi__trend.is-up{color:var(--kh-success)}.kh-ui-kpi__trend.is-down{color:var(--kh-danger)}
.kh-ui-grid{display:grid;gap:16px}.kh-ui-grid--auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.kh-ui-stack{display:flex;flex-direction:column;gap:16px}.kh-ui-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kh-ui-empty{display:grid;place-items:center;gap:10px;min-height:220px;padding:32px;text-align:center;border:1px dashed var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface)}.kh-ui-empty .material-symbols-outlined{font-size:42px;color:var(--kh-muted)}.kh-ui-empty h3{margin:0}.kh-ui-empty p{max-width:420px;margin:0;color:var(--kh-muted)}
.kh-ui-skeleton{position:relative;overflow:hidden;border-radius:10px;background:var(--kh-surface-2);color:transparent!important;pointer-events:none}.kh-ui-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);animation:kh-shimmer 1.35s infinite}.kh-ui-skeleton--text{height:14px}.kh-ui-skeleton--title{width:60%;height:24px}.kh-ui-skeleton--avatar{width:48px;height:48px;border-radius:50%}.kh-ui-skeleton--media{min-height:150px}.kh-ui-skeleton-card{display:grid;gap:12px;padding:20px;border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface)}
.kh-ui-overlay{position:fixed;inset:0;z-index:var(--kh-layer-overlay);display:grid;place-items:center;padding:20px;background:rgba(12,18,16,.45);backdrop-filter:blur(4px)}.kh-ui-dialog{width:min(100%,520px);max-height:min(84vh,760px);overflow:auto;padding:24px;border:1px solid var(--kh-line);border-radius:24px;background:var(--kh-surface);box-shadow:var(--kh-shadow-md);animation:kh-pop var(--kh-motion-base) var(--kh-ease)}.kh-ui-sheet{position:fixed;right:0;bottom:0;left:0;z-index:var(--kh-layer-modal);width:min(100%,640px);max-height:88vh;margin:auto;overflow:auto;padding:24px;border-radius:26px 26px 0 0;background:var(--kh-surface);box-shadow:var(--kh-shadow-md);animation:kh-slide-up var(--kh-motion-base) var(--kh-ease)}
.kh-ui-toast-region{position:fixed;right:20px;bottom:20px;z-index:110;display:grid;gap:10px;width:min(calc(100% - 40px),380px)}.kh-ui-toast{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid var(--kh-line);border-radius:14px;background:var(--kh-surface);box-shadow:var(--kh-shadow-md);animation:kh-slide-in var(--kh-motion-base) var(--kh-ease)}
.kh-ui-dropdown{position:absolute;z-index:var(--kh-layer-dropdown);min-width:220px;padding:8px;border:1px solid var(--kh-line);border-radius:14px;background:var(--kh-surface);box-shadow:var(--kh-shadow-md)}.kh-ui-dropdown button,.kh-ui-dropdown a{display:flex;width:100%;align-items:center;gap:8px;min-height:38px;padding:0 10px;border:0;border-radius:9px;background:transparent;text-align:left}.kh-ui-dropdown button:hover,.kh-ui-dropdown a:hover{background:var(--kh-surface-2)}
.kh-ui-accordion{border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface);overflow:hidden}.kh-ui-accordion summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;font-weight:800;cursor:pointer}.kh-ui-accordion__body{padding:0 16px 16px;color:var(--kh-muted)}
.kh-ui-timeline{display:grid;gap:0}.kh-ui-timeline__item{position:relative;display:grid;grid-template-columns:24px 1fr;gap:12px;min-height:58px}.kh-ui-timeline__item::before{content:"";position:absolute;top:22px;bottom:-4px;left:7px;width:2px;background:var(--kh-line)}.kh-ui-timeline__item:last-child::before{display:none}.kh-ui-timeline__dot{width:16px;height:16px;margin-top:4px;border:4px solid var(--kh-brand-soft);border-radius:50%;background:var(--kh-brand)}
.kh-ui-menu-card{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface)}.kh-ui-menu-card img{width:92px;height:92px;border-radius:12px;object-fit:cover}.kh-ui-menu-card h3{margin:0 0 4px;font-size:16px}.kh-ui-price{font-weight:900;color:var(--kh-brand)}
.kh-ui-order-card{display:grid;gap:12px;padding:18px;border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface)}.kh-ui-order-card__head{display:flex;justify-content:space-between;gap:12px}.kh-ui-order-card__number{font-weight:900}.kh-ui-order-card__items{color:var(--kh-muted)}
.kh-ui-filter-panel{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:16px;border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface)}.kh-ui-filter-panel>*{flex:1 1 180px}.kh-ui-table-shell{overflow:auto;border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface)}
.kh-ui-rider-job{display:grid;gap:14px;padding:18px;border:1px solid var(--kh-line);border-radius:var(--kh-radius-md);background:var(--kh-surface)}.kh-ui-rider-job__route{display:grid;grid-template-columns:20px 1fr;gap:10px}.kh-ui-rider-job__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kh-ui-loading{position:relative}.kh-ui-loading[aria-busy=true]{min-height:120px}.kh-ui-loading[aria-busy=true]>*{opacity:.28}.kh-ui-loading[aria-busy=true]::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px;border:3px solid var(--kh-line);border-top-color:var(--kh-brand);border-radius:50%;animation:kh-spin .75s linear infinite}
.kh-ui-fade-enter{animation:kh-fade var(--kh-motion-base) var(--kh-ease)}.kh-ui-pop-enter{animation:kh-pop var(--kh-motion-base) var(--kh-ease)}.kh-ui-slide-enter{animation:kh-slide-in var(--kh-motion-base) var(--kh-ease)}
@keyframes kh-shimmer{100%{transform:translateX(100%)}}@keyframes kh-spin{to{transform:rotate(360deg)}}@keyframes kh-fade{from{opacity:0}to{opacity:1}}@keyframes kh-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes kh-slide-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes kh-slide-up{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:640px){.kh-ui-menu-card{grid-template-columns:76px minmax(0,1fr)}.kh-ui-menu-card img{width:76px;height:76px}.kh-ui-menu-card>:last-child{grid-column:2}.kh-ui-toast-region{right:12px;bottom:12px;width:calc(100% - 24px)}}