/* KeyHub refresh. All new design work lives here; published application is preserved. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --background: 220 30% 99%; --canvas: 220 25% 97%; --foreground: 224 30% 14%;
  --card: 0 0% 100%; --card-foreground: 224 30% 14%; --popover: 0 0% 100%; --popover-foreground: 224 30% 14%;
  --muted: 220 23% 94%; --muted-foreground: 222 12% 43%; --border: 222 24% 89%; --input: 222 22% 83%;
  --primary: 225 77% 54%; --primary-glow: 219 86% 64%; --primary-deep: 229 62% 36%; --primary-foreground: 0 0% 100%;
  --secondary: 223 28% 94%; --secondary-foreground: 224 30% 20%; --accent: 225 77% 54%; --ring: 225 77% 54%;
  --radius: .8rem; --shadow-xs: 0 1px 2px #14244404; --shadow-sm: 0 3px 12px #14244406;
  --shadow-md: 0 12px 35px -16px #14244424; --shadow-lg: 0 22px 55px -25px #14244430;
  --shadow-primary: 0 9px 25px -12px #345debb0;
  --kh-hero-background: linear-gradient(110deg,#e9efff 0%,#edf2fe 55%,#e1eaff 100%);
  --kh-hero-foreground: #152544; --kh-hero-copy: #52617b; --kh-hero-border: #dce5fa;
  --kh-hero-art: #cad9fa; --kh-header: #fffffff0;
}
html[data-theme="dark"], html[data-theme="dark"] .admin-theme {
  color-scheme: dark;
  --background: 224 29% 7%; --canvas: 224 29% 7%; --foreground: 218 35% 94%;
  --card: 224 25% 11%; --card-foreground: 218 35% 94%; --popover: 224 25% 13%; --popover-foreground: 218 35% 94%;
  --muted: 224 23% 16%; --muted-foreground: 221 16% 69%; --border: 224 22% 22%; --input: 223 22% 30%;
  --primary: 222 100% 74%; --primary-glow: 220 100% 77%; --primary-deep: 226 74% 56%; --primary-foreground: 229 45% 12%;
  --secondary: 224 23% 16%; --secondary-foreground: 218 35% 94%; --accent: 222 100% 74%; --ring: 222 100% 74%;
  --shadow-xs: 0 1px 2px #00000010; --shadow-sm: 0 3px 12px #00000014; --shadow-md: 0 12px 35px -16px #00000080;
  --shadow-lg: 0 22px 55px -25px #000000b0; --shadow-primary: 0 9px 25px -12px #5e86fc60;
  --kh-hero-background: linear-gradient(110deg,#151f3b 0%,#172444 55%,#1c2c52 100%);
  --kh-hero-foreground: #f2f5ff; --kh-hero-copy: #b6c4de; --kh-hero-border: #2c3d60;
  --kh-hero-art: #3d527a; --kh-header: #121722f0;
}
html, body, body:has(.admin-theme) { background: hsl(var(--canvas)); }
body { font-family: 'Be Vietnam Pro','Noto Sans Thai',system-ui,sans-serif; }
button,input,select,textarea { font-family: inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 4px; }
input::placeholder,textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: .9; }
.glass-nav { background: var(--kh-header); backdrop-filter: blur(18px); border-color: hsl(var(--border) / .75); }
header nav { align-items: center; }
main { isolation: isolate; }
main h1,main h2 { letter-spacing: -.035em; }
main h2 { font-weight: 750; }
.card-surface,.card-interactive { border-radius: 18px; border-color: hsl(var(--border) / .8); box-shadow: var(--shadow-sm); }
.card-interactive { transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.card-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: hsl(var(--primary) / .5); }
.btn { border-radius: 10px; }
.btn-primary { box-shadow: var(--shadow-primary); }
.btn-primary:hover { filter: brightness(1.06); }
.input-field { box-shadow: none; border-radius: 10px; }
footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
main [data-kh-hero] { background: var(--kh-hero-background) !important; color: var(--kh-hero-foreground); border: 1px solid var(--kh-hero-border); border-radius: 24px; box-shadow: none; }
main [data-kh-hero] > .absolute { opacity: .16 !important; }
main [data-kh-hero] h1 { font-size: clamp(30px,3.4vw,48px); line-height: 1.13; font-weight: 800; max-width: 610px; }
main [data-kh-hero] h1::before { content: 'YOUR DIGITAL TOOLKIT'; display: block; font-size: 10px; line-height: 1.4; letter-spacing: .17em; font-weight: 700; margin-bottom: 19px; color: hsl(var(--primary)); }
main [data-kh-hero] h1 + p { color: var(--kh-hero-copy); font-size: 14px; line-height: 1.85; margin-top: 20px; max-width: 540px; }
main [data-kh-hero] h1 ~ div > .btn { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); min-height: 44px; padding-inline: 22px; box-shadow: var(--shadow-primary); }
main [data-kh-hero] [class*='text-white/'] { color: var(--kh-hero-copy); }
main [data-kh-hero] [class*='border-white/'] { border-color: var(--kh-hero-border); }
main [data-kh-hero] [class*='bg-white/'] { background-color: hsl(var(--card) / .75); }
main [data-kh-hero] [class*='text-slate-900'] { color: hsl(var(--foreground)); }
main [data-kh-hero] > .relative { padding-block: 42px; }
html[data-theme="dark"] main [style*='hsl(0 0% 100%'] { --kh-surface: hsl(var(--card)); }
html[data-theme="dark"] .bg-white:not([data-keep-light]) { background-color: hsl(var(--card)); }
html[data-theme="dark"] main [data-kh-hero] h1 ~ div > .btn { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
html[data-theme="dark"] .text-slate-900 { color: hsl(var(--foreground)); }
html[data-theme="dark"] .text-green-700,html[data-theme="dark"] .text-emerald-700 { color: #68d8ac; }
html[data-theme="dark"] .text-red-700,html[data-theme="dark"] .text-red-600 { color: #ffa3a3; }
html[data-theme="dark"] .text-amber-800,html[data-theme="dark"] .text-amber-700 { color: #f0c574; }
html[data-theme="dark"] .bg-amber-50 { background: #4b371d; }
html[data-theme="dark"] .bg-red-50 { background: #47252e; }
html[data-theme="dark"] .bg-slate-50,html[data-theme="dark"] .bg-slate-100 { background: hsl(var(--muted)); }
.kh-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-left: 12px; position: relative; color: hsl(var(--foreground)); }
.kh-theme-group { display: flex; padding: 3px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--muted) / .6); gap: 2px; }
.kh-theme-button { display: grid; place-items: center; width: 29px; height: 27px; border-radius: 6px; color: hsl(var(--muted-foreground)); transition: background .15s,color .15s; }
.kh-theme-button[aria-pressed='true'] { background: hsl(var(--card)); color: hsl(var(--primary)); box-shadow: 0 1px 4px #00000012; }
.kh-theme-button:hover { color: hsl(var(--primary)); }
.kh-theme-button svg { width: 15px; height: 15px; }
.kh-dev-button { font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 5px 7px; border-radius: 6px; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.kh-dev-dialog { position: fixed; inset: auto 18px 18px auto; margin: 0; padding: 23px; max-width: min(390px,calc(100vw - 32px)); width: 390px; border-radius: 18px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 25px 100px #0005; z-index: 9999; }
.kh-dev-dialog::backdrop { background: #080e1855; backdrop-filter: blur(3px); }
.kh-dev-dialog h2 { font-size: 21px; font-weight: 750; margin: 0 32px 6px 0; }
.kh-dev-dialog p { font-size: 12px; line-height: 1.8; color: hsl(var(--muted-foreground)); }
.kh-dev-close { position:absolute;right:17px;top:17px;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:hsl(var(--muted)); }
.kh-dev-actions { display:grid;gap:8px;margin-top:18px; }
.kh-dev-actions button { padding: 11px 14px; text-align:left; font-size:12px; font-weight:600; background:hsl(var(--muted)); border-radius:9px; }
.kh-dev-actions button:hover { color:hsl(var(--primary)); background:hsl(var(--primary) / .12); }
.kh-dev-actions button:disabled { opacity:.5; }
.kh-dev-status { font-size:12px;line-height:1.6;min-height:20px;margin-top:12px; }
.kh-local-banner { margin: 0 0 16px; padding: 10px 14px; border: 1px solid hsl(var(--primary) / .25); border-radius: 10px; background: hsl(var(--primary) / .07); color: hsl(var(--foreground)); font-size:11px; line-height:1.7; }
.kh-local-banner strong { color:hsl(var(--primary)); }
.kh-local-banner button { text-decoration:underline;text-underline-offset:3px;font-weight:600;margin-left:8px; }
@media(min-width:1024px){ main > [class*='max-w-'],header > [class*='max-w-'],footer > [class*='max-w-'] { max-width:1344px; } }
@media(max-width:767px){
  main [data-kh-hero] { border-radius:18px; }
  main [data-kh-hero] > .relative { padding-block:26px; }
  main [data-kh-hero] h1::before { font-size:9px;margin-bottom:12px; }
  main [data-kh-hero] h1 + p { font-size:12px;line-height:1.85;margin-top:14px; }
  .kh-tools { gap:6px;padding-left:6px; }
  .kh-theme-button { width:25px;height:25px; }
  .kh-theme-button svg { width:14px;height:14px; }
  .kh-theme-group { padding:2px;gap:0; }
  .kh-dev-button { padding:4px;font-size:8px; }
  header nav { gap:0 !important; }
  [data-kh-header-main] { position:relative; }
  [data-kh-header-main] > .kh-tools { position:absolute;right:14px;top:14px;margin:0;padding:0; }
  .kh-local-banner { margin-inline:12px; }
}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;} }

/* Only shown when explicitly opened through DEV → analytics. */
.kh-analytics-debug{position:fixed;z-index:99999;left:12px;bottom:12px;width:min(410px,calc(100vw - 24px));max-height:48vh;overflow:auto;padding:12px 14px;background:#111827;color:#f3f4f6;border:1px solid #64748b;border-radius:12px;box-shadow:0 8px 40px #0006;font:12px/1.5 ui-monospace,monospace}
.kh-analytics-debug summary{cursor:pointer;font-weight:700}
.kh-analytics-debug p{font:12px/1.4 system-ui,sans-serif;color:#cbd5e1;margin:8px 0}
.kh-analytics-debug pre{font:11px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}