/* =====================================================================
   aljubaer.com v3 — design system
   Reproduces the Lovable/Tailwind theme (tokens from src/index.css):
   sharp rectangles, emerald/sky/violet gradients, glass cards, 5 themes.
   ===================================================================== */

/* ---------- 1. THEME TOKENS (HSL triplets, same as Lovable) ---------- */
:root {
  --background: 220 20% 97%; --foreground: 220 25% 10%;
  --card: 0 0% 100%; --card-foreground: 220 25% 10%;
  --popover: 0 0% 100%;
  --primary: 160 84% 39%; --primary-foreground: 0 0% 100%;
  --secondary: 220 15% 92%; --secondary-foreground: 220 25% 15%;
  --muted: 220 15% 92%; --muted-foreground: 220 10% 45%;
  --accent: 200 85% 55%; --accent-foreground: 200 85% 15%;
  --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%;
  --border: 220 15% 88%; --input: 220 15% 88%; --ring: 160 84% 39%;
  --gradient-geo: 160 84% 39%; --gradient-data: 200 85% 55%; --gradient-design: 280 75% 55%; --gradient-research: 35 90% 55%;
  --chart-1: 160 84% 39%; --chart-2: 200 85% 55%; --chart-3: 280 75% 55%; --chart-4: 35 90% 55%; --chart-5: 330 80% 55%;
  --sidebar: 0 0% 98%; --sidebar-accent: 160 75% 95%; --sidebar-accent-fg: 160 75% 35%;
  --radius: 0px;
  --font-body: 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-script: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'Fira Code', ui-monospace, Consolas, monospace;
  --nav-h: 56px;

  /* v3.8.4 design system — one scale for the whole site.
     Before this the CSS carried 31 font sizes (incl. 7.5/9.5/10.5/13.5px),
     37 gap values, 28 radii and 18 line-heights. Everything is snapped to these. */
  --page-w: 1200px;  --page-pad: 16px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px;
  --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 30px; --fs-5xl: 36px;
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px;
  --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --tap: 32px;
  color-scheme: light;
}
.dark {
  --background: 222 47% 6%; --foreground: 210 40% 98%;
  --card: 222 47% 9%; --card-foreground: 210 40% 98%; --popover: 222 47% 9%;
  --primary: 160 84% 45%; --primary-foreground: 222 47% 6%;
  --secondary: 222 35% 15%; --secondary-foreground: 210 40% 98%;
  --muted: 222 35% 15%; --muted-foreground: 220 15% 60%;
  --accent: 200 85% 50%; --accent-foreground: 200 85% 90%;
  --destructive: 0 72% 50%; --border: 222 35% 18%; --input: 222 35% 18%; --ring: 160 84% 45%;
  --gradient-geo: 160 84% 50%; --gradient-data: 200 85% 60%; --gradient-design: 280 75% 65%; --gradient-research: 35 90% 60%;
  --chart-1: 160 84% 50%; --chart-2: 200 85% 60%; --chart-3: 280 75% 65%; --chart-4: 35 90% 60%; --chart-5: 330 80% 60%;
  --sidebar: 222 47% 8%; --sidebar-accent: 160 40% 20%; --sidebar-accent-fg: 160 75% 75%;
  color-scheme: dark;
}
.cyberpunk {
  --background: 270 50% 5%; --foreground: 180 100% 90%;
  --card: 270 50% 8%; --card-foreground: 180 100% 90%; --popover: 270 50% 8%;
  --primary: 320 100% 60%; --primary-foreground: 270 50% 5%;
  --secondary: 270 40% 15%; --secondary-foreground: 180 100% 90%;
  --muted: 270 40% 15%; --muted-foreground: 260 30% 55%;
  --accent: 180 100% 50%; --accent-foreground: 270 50% 5%;
  --destructive: 0 90% 55%; --border: 270 40% 20%; --input: 270 40% 20%; --ring: 320 100% 60%;
  --gradient-geo: 180 100% 50%; --gradient-data: 320 100% 60%; --gradient-design: 260 100% 65%; --gradient-research: 45 100% 60%;
  --chart-1: 320 100% 60%; --chart-2: 180 100% 50%; --chart-3: 260 100% 65%; --chart-4: 45 100% 60%; --chart-5: 0 90% 55%;
  --sidebar: 270 50% 6%; --sidebar-accent: 320 60% 20%; --sidebar-accent-fg: 320 100% 80%;
  color-scheme: dark;
}
.minimal {
  --background: 0 0% 100%; --foreground: 0 0% 10%;
  --card: 0 0% 99%; --card-foreground: 0 0% 10%; --popover: 0 0% 100%;
  --primary: 0 0% 15%; --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%; --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 96%; --muted-foreground: 0 0% 45%;
  --accent: 0 0% 92%; --accent-foreground: 0 0% 15%;
  --destructive: 0 60% 50%; --border: 0 0% 90%; --input: 0 0% 90%; --ring: 0 0% 15%;
  --gradient-geo: 0 0% 30%; --gradient-data: 0 0% 40%; --gradient-design: 0 0% 35%; --gradient-research: 0 0% 38%;
  --chart-1: 0 0% 20%; --chart-2: 0 0% 40%; --chart-3: 0 0% 60%; --chart-4: 0 0% 50%; --chart-5: 0 0% 70%;
  --sidebar: 0 0% 99%; --sidebar-accent: 0 0% 95%; --sidebar-accent-fg: 0 0% 20%;
}
.gis-earth {
  --background: 150 20% 96%; --foreground: 150 30% 10%;
  --card: 150 15% 99%; --card-foreground: 150 30% 10%; --popover: 150 15% 99%;
  --primary: 152 70% 35%; --primary-foreground: 0 0% 100%;
  --secondary: 150 15% 90%; --secondary-foreground: 150 30% 15%;
  --muted: 150 15% 90%; --muted-foreground: 150 10% 45%;
  --accent: 200 65% 50%; --accent-foreground: 200 65% 10%;
  --destructive: 0 70% 55%; --border: 150 15% 85%; --input: 150 15% 85%; --ring: 152 70% 35%;
  --gradient-geo: 152 70% 35%; --gradient-data: 200 65% 50%; --gradient-design: 38 80% 50%; --gradient-research: 170 60% 40%;
  --chart-1: 152 70% 35%; --chart-2: 200 65% 50%; --chart-3: 38 80% 50%; --chart-4: 170 60% 40%; --chart-5: 350 70% 55%;
  --sidebar: 150 15% 97%; --sidebar-accent: 152 50% 92%; --sidebar-accent-fg: 152 50% 30%;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: var(--font-body); font-size: 14px; line-height: 1.6; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
a:hover { color: hsl(var(--primary)); }
img { max-width: 100%; display: block; }
code, pre { font-family: var(--font-mono); font-size: .9em; }
pre { background: hsl(var(--muted)); padding: 12px; overflow-x: auto; border: 1px solid hsl(var(--border)); }
hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 24px 0; }
::selection { background: hsl(var(--primary) / .25); }
.ic { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: -0.125em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* global grid backgrounds (MainLayout) */
.bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(hsl(var(--primary) / .07) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / .07) 1px, transparent 1px);
  background-size: 40px 40px; }
.bg-dots { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .3;
  background-image: radial-gradient(hsl(var(--primary) / .15) 1px, transparent 1px); background-size: 24px 24px; }
.site-main { position: relative; z-index: 1; flex: 1; }
.site { display: flex; flex-direction: column; min-height: 100vh; position: relative; }

/* ---------- 3. LAYOUT UTILITIES ---------- */
.container { width: 100%; max-width: var(--page-w); margin: 0 auto; padding: 0 var(--page-pad); }
/* v3.8.4 — every page section shares one width so their left edges line up.
   w-4xl / w-5xl / w-6xl are kept as aliases: w-6xl and w-4xl were undefined before this,
   and w-5xl (1024px) was the only one that differed, which is what broke the alignment. */
.container.w-4xl, .container.w-5xl, .container.w-6xl { max-width: var(--page-w); }
.w-5xl { max-width: 1024px; } .w-6xl { max-width: 1152px; } .w-4xl { max-width: 896px; } .w-3xl { max-width: 768px; }
@media (min-width: 640px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }
.section { padding: 40px 0; position: relative; }
.section-sm { padding: 24px 0; }
.page-top { padding-top: 32px; }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } .g-4.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flex { display: flex; } .inline-flex { display: inline-flex; } .col { flex-direction: column; }
.wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.grow { flex: 1; min-width: 0; }
.text-center { text-align: center; } .text-right { text-align: right; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.muted { color: hsl(var(--muted-foreground)); }
.small { font-size: 13px; } .xs { font-size: 12px; } .tiny { font-size: 11px; }
.bold { font-weight: 700; } .semibold { font-weight: 600; }
.upper { text-transform: uppercase; letter-spacing: .15em; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hide-sm { } @media (max-width: 639px) { .hide-sm { display: none !important; } }
.show-lg { display: none; } @media (min-width: 1024px) { .show-lg { display: block; } .hide-lg { display: none !important; } }

/* ---------- 4. TYPOGRAPHY HELPERS ---------- */
.font-display { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em; }
.gradient-text { background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.shimmer { background-size: 200% auto; animation: shimmer 6s linear infinite; }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid hsl(var(--primary) / .2);
  background: hsl(var(--primary) / .05); color: hsl(var(--primary)); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.section-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(28px, 4vw, 36px); margin: 12px 0 8px; }
.page-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(34px, 5vw, 48px); margin: 0 0 8px; }
.lead { color: hsl(var(--muted-foreground)); max-width: 640px; margin: 0 auto; font-size: 14px; }
.prose { line-height: 1.75; }
.prose h2, .prose h3 { margin-top: 1.4em; }
.prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 1.2em; }

/* ---------- 5. SURFACES ---------- */
.card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border) / .7); position: relative; }
.glass { background: hsl(var(--card) / .8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid hsl(var(--border) / .4);
  box-shadow: 0 4px 20px -4px hsl(var(--primary) / .08), inset 0 1px 0 hsl(0 0% 100% / .1); }
.glass-card { background: linear-gradient(135deg, hsl(var(--card) / .9), hsl(var(--card) / .7)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--border) / .4); box-shadow: 0 4px 24px -6px hsl(var(--primary) / .1), 0 0 0 1px hsl(var(--border) / .3), inset 0 1px 0 hsl(0 0% 100% / .12); }
.premium-card { position: relative; overflow: hidden; transition: all .5s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--card) / .95) 50%, hsl(var(--card) / .9));
  box-shadow: 0 4px 24px -8px hsl(var(--primary) / .12), 0 0 0 1px hsl(var(--border) / .4); }
.premium-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(135deg, hsl(var(--primary) / .05), transparent 50%, hsl(var(--accent) / .05)); }
.premium-card:hover::before { opacity: 1; }
.premium-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px -12px hsl(var(--primary) / .2), 0 0 0 1px hsl(var(--primary) / .2); }
.lift { transition: transform .3s, box-shadow .3s, border-color .3s; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -12px hsl(var(--primary) / .25); border-color: hsl(var(--primary) / .35); }
.pad { padding: 20px; } .pad-lg { padding: 24px; } .pad-sm { padding: 12px; }
.bar-top { height: 4px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design))); }
.rounded { border-radius: 12px; } .round { border-radius: 999px; }

/* ---------- 6. BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; font: 600 14px/1 var(--font-body);
  border: 1px solid transparent; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); cursor: pointer;
  transition: all .2s ease; white-space: nowrap; border-radius: var(--radius); text-decoration: none; }
.btn:hover { filter: brightness(1.04); color: inherit; }
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn-lg { height: 44px; padding: 0 24px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-xs { height: 26px; padding: 0 8px; font-size: 12px; gap: 4px; }
.btn-icon { width: 38px; padding: 0; background: transparent; }
.btn-icon:hover { background: hsl(var(--accent) / .12); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { color: hsl(var(--primary-foreground)); background: hsl(var(--primary) / .9); }
.btn-gradient { background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); color: #fff; border-radius: 12px; }
.btn-gradient:hover { color: #fff; box-shadow: 0 10px 24px -8px hsl(var(--primary) / .45); }
.btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-outline:hover { border-color: hsl(var(--primary) / .45); background: hsl(var(--primary) / .05); color: hsl(var(--foreground)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--primary) / .06); color: hsl(var(--primary)); }
.btn-danger { background: hsl(var(--destructive)); color: #fff; }
.btn-danger:hover { color: #fff; }
.btn.rounded-xl { border-radius: 12px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.arrow-move .ic { transition: transform .2s; } .arrow-move:hover .ic:last-child { transform: translateX(3px); }

/* ---------- 7. BADGES / PILLS / TAGS ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); line-height: 1.45; }
.badge-primary { background: hsl(var(--primary) / .1); border-color: hsl(var(--primary) / .25); color: hsl(var(--primary)); }
.badge-accent { background: hsl(var(--accent) / .1); border-color: hsl(var(--accent) / .25); color: hsl(var(--accent)); }
.badge-violet { background: hsl(var(--gradient-design) / .1); border-color: hsl(var(--gradient-design) / .25); color: hsl(var(--gradient-design)); }
.badge-amber { background: hsl(var(--gradient-research) / .12); border-color: hsl(var(--gradient-research) / .3); color: hsl(var(--gradient-research)); }
.badge-danger { background: hsl(var(--destructive) / .1); border-color: hsl(var(--destructive) / .3); color: hsl(var(--destructive)); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; color: hsl(var(--muted-foreground)); border-radius: 999px; }
.pill:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .4); }
.pill.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; padding: 2px 8px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border) / .6); }

/* ---------- 8. NAVBAR ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all .3s; background: hsl(var(--background) / .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav.scrolled { background: hsl(var(--background) / .72); backdrop-filter: blur(24px); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .18); border-bottom: 1px solid hsl(var(--border) / .5); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-logo { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; font-family: var(--font-body); }
.nav-logo:hover { color: hsl(var(--primary)); }
.nav-links { display: none; align-items: center; gap: 2px; white-space: nowrap; }
@media (min-width: 1120px) { .nav-links { display: flex; } .nav-burger { display: none !important; } }
.nav-link { position: relative; padding: 8px 12px; font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); border-radius: 8px; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav-link:hover { color: hsl(var(--foreground)); background: hsl(var(--accent) / .1); }
.nav-link.active { color: hsl(var(--foreground)); font-weight: 600; }
.nav-link.active span { background: var(--g, linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-link.active::before { content: ''; position: absolute; inset: 0; border-radius: 8px; background: var(--g); opacity: .1; }
.nav-link.active::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; border-radius: 4px; background: var(--g); }
.nav-right { display: flex; align-items: center; gap: 4px; }
.kbd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; font-size: 11px; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); background: transparent; cursor: pointer; }
.kbd:hover { background: hsl(var(--accent) / .1); }
.nav-spacer { height: var(--nav-h); }

/* dropdown */
.dd { position: relative; }
/* The menu used to be display:none → display:block with a 150 ms "pop"
   animation. display cannot be transitioned, so it opened with a flick and
   closed with none at all — and dragging the pointer along the menu bar
   snapped from one panel to the next with no motion whatsoever. That is the
   "too fast" feeling: not the duration, the absence of any out-animation.

   Hiding with opacity + visibility instead makes BOTH directions animate.
   visibility is what keeps a closed menu out of the keyboard order and away
   from the screen reader, and its transition is delayed to the end of the
   fade so the panel does not vanish mid-way through it. --dd-x carries the
   horizontal centring offset, so the slide composes with it instead of
   fighting it. */
.dd-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; background: hsl(var(--popover)); border: 1px solid hsl(var(--border));
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / .25); padding: 4px; z-index: 60;
  max-height: calc(100vh - var(--nav-h) - 24px); overflow-y: auto;
  /* .nav-links sets white-space:nowrap and it INHERITS — without this every
     dropdown item is forced onto one line and long names are clipped. */
  white-space: normal;
  --dd-x: 0px;
  display: block;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(var(--dd-x)) translateY(-8px) scale(.985);
  transform-origin: top center;
  transition: opacity .2s cubic-bezier(.4, 0, .2, 1),
              transform .24s cubic-bezier(.2, .8, .3, 1),
              visibility 0s linear .24s; }
.dd.open > .dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(var(--dd-x)) translateY(0) scale(1);
  transition: opacity .26s cubic-bezier(.4, 0, .2, 1),
              transform .32s cubic-bezier(.17, .84, .31, 1),
              visibility 0s; }
.dd-menu.center { right: auto; left: 50%; --dd-x: -50%; }
.dd-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; font-size: 13px; color: hsl(var(--foreground)); background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.dd-item:hover { background: hsl(var(--accent) / .12); color: hsl(var(--foreground)); }
.dd-item.danger { color: hsl(var(--destructive)); }
.dd-sep { height: 1px; background: hsl(var(--border)); margin: 4px 0; }
.dd-label { padding: 6px 8px; font-size: 12px; color: hsl(var(--muted-foreground)); }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; display: none; }
.drawer.open { display: block; }
.drawer-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: hsl(var(--background)); border-left: 1px solid hsl(var(--border));
  padding: 16px; overflow-y: auto; animation: slidein .25s ease-out; }
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
.drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px; font-weight: 500; border-bottom: 1px solid hsl(var(--border) / .5); }
.drawer-link.active { color: hsl(var(--primary)); background: hsl(var(--primary) / .06); }
.drawer-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--muted-foreground)); padding: 16px 12px 6px; }

/* back to home chip */
.back-home { position: relative; z-index: 2; }
.back-home a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: hsl(var(--muted-foreground)); padding: 12px 0 0; }
.back-home a:hover { color: hsl(var(--primary)); }

/* ---------- 9. HERO (home) ---------- */
.hero { position: relative; overflow: hidden; }
.hero-blob { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 24px; }
.live-dot { position: relative; width: 10px; height: 10px; }
.live-dot::before, .live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: hsl(var(--primary)); }
.live-dot::after { animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; opacity: .35; }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0,1.15fr) auto minmax(210px,.75fr); gap: 24px; } }
.hero-left { text-align: center; }
@media (min-width: 1024px) { .hero-left { text-align: left; } }
.hero-name { font-family: var(--font-serif); font-weight: 700; letter-spacing: .08em; line-height: 1; white-space: nowrap; margin: 0; font-size: clamp(40px, 7vw, 88px); }
@media (min-width: 1024px) { .hero-name { font-size: clamp(44px, 4.4vw, 70px); letter-spacing: .05em; } }
.hero-name span { position: relative; display: inline-block; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design)), hsl(var(--primary)));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.hero-name span::after { content: ''; position: absolute; left: 0; bottom: -8px; height: 3px; width: 0; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design))); animation: grow .5s .6s forwards; }
@keyframes grow { to { width: 100%; } }
.typewriter { font-family: var(--font-script); font-weight: 300; font-size: clamp(19px, 2.4vw, 25px); min-height: 1.4em; margin: 20px 0 12px; }
.typewriter .tw { background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.typewriter .caret { color: hsl(var(--primary)); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-desc { font-size: 14px; color: hsl(var(--muted-foreground)); max-width: 440px; margin: 0 auto 20px; }
@media (min-width: 1024px) { .hero-desc { margin-left: 0; } }
.hero-desc strong { color: hsl(var(--foreground)); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
@media (min-width: 1024px) { .hero-ctas { justify-content: flex-start; } }

.orbit { position: relative; width: 340px; height: 340px; margin: 0 auto; flex-shrink: 0; }
@media (min-width: 640px) { .orbit { width: 540px; height: 540px; } }
@media (min-width: 1024px) { .orbit { width: 480px; height: 480px; } }
@media (min-width: 1360px) { .orbit { width: 540px; height: 540px; } }
.orbit-shell { position: absolute; top: 50%; left: 50%; width: 55%; height: 55%; border-radius: 50%; filter: blur(22px); opacity: .8;
  background: conic-gradient(from 180deg, hsl(var(--primary) / .14), hsl(var(--accent) / .18), hsl(var(--gradient-design) / .14), hsl(var(--gradient-research) / .16), hsl(var(--primary) / .14));
  animation: spin-c 18s linear infinite; }
@keyframes spin-c { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.orbit-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-ring.r1 { width: 50%; height: 50%; border: 1px dashed hsl(var(--primary) / .15); }
.orbit-ring.r2 { width: 80%; height: 80%; border: 1px solid hsl(var(--accent) / .1); }
.orbit-ring.r3 { width: 96%; height: 96%; border: 1px solid hsl(var(--border) / .25); }
.orbit-pulse { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 1px solid hsl(var(--primary) / .14); animation: ring-expand 5.5s ease-out infinite; }
.orbit-pulse.d2 { animation-delay: 1.8s; border-color: hsl(var(--accent) / .12); } .orbit-pulse.d3 { animation-delay: 3.6s; border-color: hsl(var(--gradient-design) / .12); }
@keyframes ring-expand { 0% { transform: scale(.92); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
.orbit-photo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; }
.orbit-photo .glow { position: absolute; inset: -24px; border-radius: 50%; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design))); opacity: .22; filter: blur(28px); animation: glow-pulse 4s ease infinite; }
@keyframes glow-pulse { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: .45; transform: scale(1.08); } }
.orbit-photo .ph { position: relative; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; border: 3px solid hsl(var(--card));
  box-shadow: 0 0 0 2px hsl(var(--primary) / .3), 0 0 0 5px hsl(var(--background)), 0 25px 50px -12px rgb(0 0 0 / .35); }
@media (min-width: 640px) { .orbit-photo .ph { width: 160px; height: 160px; } }
@media (min-width: 1024px) { .orbit-photo .ph { width: 176px; height: 176px; } }
.orbit-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.orbit-photo:hover img { transform: scale(1.1); }
.orbit-photo .scan { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, hsl(var(--primary) / .5), transparent); animation: scan 3s linear infinite; }
@keyframes scan { from { top: 0; } to { top: 100%; } }
.orbit-photo .status { position: absolute; bottom: -2px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--primary)); border: 3px solid hsl(var(--card)); display: grid; place-items: center; }
.orbit-photo .status::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--primary-foreground)); }
.orbit-track { position: absolute; inset: 0; animation: spin 44s linear infinite; }
.orbit-track:hover, .orbit-track:hover .orbit-item > a { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-item { position: absolute; transform: translate(-50%, -50%); }
.orbit-item > a { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: spin 44s linear infinite reverse; }
.orbit-item .bubble { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 28px var(--sh); transition: transform .3s; animation: float 3.6s ease-in-out infinite; }
.orbit-item .bubble .ic { width: 20px; height: 20px; }
@media (min-width: 1024px) { .orbit-item .bubble { width: 54px; height: 54px; } }
.orbit-item a:hover .bubble { transform: scale(1.14) translateY(-4px); }
.orbit-item .lbl { font-size: 11px; font-weight: 700; color: hsl(var(--foreground)); white-space: nowrap; }
@media (max-width: 639px) { .orbit-item .lbl { display: none; } .orbit-item .bubble { width: 38px; height: 38px; } .orbit-item .bubble .ic { width: 16px; height: 16px; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .2; z-index: 5; }

.hero-glass { background: hsl(var(--card) / .56); backdrop-filter: blur(16px) saturate(1.45); -webkit-backdrop-filter: blur(16px) saturate(1.45); border: 1px solid hsl(var(--border) / .35); }
.stat-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; transition: all .3s; margin-bottom: 14px; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -12px var(--c); color: inherit; }
.stat-card .si { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), hsl(var(--card) / .9)); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .15); }
.stat-card .sv { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--c); line-height: 1.15; }
.stat-card .sl { font-size: 11px; font-weight: 700; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .1em; }
.stat-card .chev { margin-left: auto; color: hsl(var(--muted-foreground) / .4); }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 16px; overflow: hidden; margin-top: 24px; }
@media (max-width: 639px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
.stats-strip a { padding: 12px 6px; text-align: center; border-right: 1px solid hsl(var(--border) / .25); }
.stats-strip .v { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.stats-strip .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

.bento { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.bento-card { padding: 16px; border-radius: 16px; }
.bento-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chip { padding: 8px 6px; text-align: center; font-size: 11px; font-weight: 600; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--background) / .5); border-radius: 12px; }
.chip .em { font-size: 18px; display: block; margin-bottom: 3px; }
.obj { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed hsl(var(--border) / .6); }
.obj:last-child { border-bottom: 0; }
.obj .ic { color: hsl(var(--primary)); }

/* ---------- 10. GENERIC PAGE BLOCKS ---------- */
.page-head { text-align: center; margin-bottom: 32px; }
.story-card { border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .6); backdrop-filter: blur(6px); padding: 32px; text-align: center; }
.story-card blockquote { margin: 0 auto; max-width: 760px; font-family: Georgia, serif; color: hsl(var(--muted-foreground)); line-height: 1.75; font-size: 14px; }
.icon-tile { width: 44px; height: 44px; display: grid; place-items: center; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border: 1px solid hsl(var(--primary) / .2); }
.icon-tile .ic { width: 20px; height: 20px; }
.link-card { display: flex; align-items: center; gap: 12px; padding: 12px; }
.link-card .t { font-weight: 600; font-size: 14px; } .link-card .d { font-size: 12px; color: hsl(var(--muted-foreground)); }
.empty { text-align: center; padding: 56px 16px; color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--border)); }
.empty .ic { width: 36px; height: 36px; margin: 0 auto 10px; color: hsl(var(--primary) / .6); }

/* tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 20px; }
.tab { padding: 8px 16px; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.tab:hover { color: hsl(var(--foreground)); }
.tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); font-weight: 600; }
.tab-panel { display: none; } .tab-panel.active { display: block; animation: fadeup .35s ease-out; }

/* timeline */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design))); opacity: .5; }
.tl-item { position: relative; margin-bottom: 18px; }
.tl-item::before { content: ''; position: absolute; left: -26px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: hsl(var(--card)); border: 3px solid hsl(var(--primary)); }
.tl-item.current::before { background: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary) / .2); }

/* skill bars */
.skill { margin-bottom: 12px; }
.skill-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.skill-bar { height: 6px; background: hsl(var(--muted)); overflow: hidden; }
.skill-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c, hsl(var(--primary))), hsl(var(--accent))); transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.in-view .skill-bar > i { width: var(--w); }

/* media cards */
.thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, hsl(var(--primary) / .15), hsl(var(--accent) / .12), hsl(var(--gradient-design) / .12)); overflow: hidden; position: relative; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.lift:hover .thumb img, .premium-card:hover .thumb img { transform: scale(1.06); }
.thumb .ic { width: 42px; height: 42px; color: hsl(var(--primary) / .55); }
.thumb.cert { aspect-ratio: 4/3; background: hsl(var(--muted)); }
.thumb.cert img { object-fit: contain; padding: 6px; }
.corner-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / .88); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 86vh; max-width: 92vw; box-shadow: 0 30px 80px rgb(0 0 0 / .5); background: #fff; }
.lightbox .cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; padding: 0 20px; }
.lightbox .lb-btn { position: absolute; color: #fff; background: rgb(255 255 255 / .1); border: 0; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.lightbox .lb-close { top: 16px; right: 16px; } .lightbox .lb-prev { left: 16px; top: 50%; } .lightbox .lb-next { right: 16px; top: 50%; }

/* ---------- 11. FORMS ---------- */
.field { margin-bottom: 14px; }
.label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.input, .select, .textarea { width: 100%; height: 40px; padding: 0 12px; font: 14px var(--font-body); color: hsl(var(--foreground)); background: hsl(var(--background));
  border: 1px solid hsl(var(--input)); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; }
.textarea { height: auto; min-height: 110px; padding: 8px 12px; line-height: 1.6; resize: vertical; }
.textarea.code { font-family: var(--font-mono); font-size: 12px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: hsl(var(--primary)); }
.input-icon { position: relative; } .input-icon .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.input-icon .input { padding-left: 36px; }
.switch { position: relative; width: 40px; height: 22px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 999px; cursor: pointer; transition: .2s; }
.switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.switch input:checked + span { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.switch input:checked + span::before { transform: translateX(18px); }

/* alerts / toasts */
.alert { padding: 12px 12px; border: 1px solid; font-size: 14px; margin-bottom: 14px; display: flex; gap: 8px; align-items: flex-start; }
.alert-success { background: hsl(var(--primary) / .08); border-color: hsl(var(--primary) / .3); color: hsl(var(--foreground)); }
.alert-error { background: hsl(var(--destructive) / .08); border-color: hsl(var(--destructive) / .35); }
.alert-info { background: hsl(var(--accent) / .08); border-color: hsl(var(--accent) / .3); }
.alert-warning { background: hsl(var(--gradient-research) / .1); border-color: hsl(var(--gradient-research) / .4); }
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-left: 4px solid hsl(var(--primary)); padding: 12px 12px; box-shadow: 0 16px 40px -12px rgb(0 0 0 / .3); font-size: 14px; animation: fadeup .3s ease-out; }
.toast.error { border-left-color: hsl(var(--destructive)); } .toast.warning { border-left-color: hsl(var(--gradient-research)); } .toast.info { border-left-color: hsl(var(--accent)); }

/* ---------- 12. TABLES ---------- */
.table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); padding: 8px 12px; background: hsl(var(--muted) / .6); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.table td { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .6); vertical-align: middle; }
.table tr:hover td { background: hsl(var(--primary) / .03); }
.table .thumb-sm { width: 44px; height: 32px; object-fit: cover; background: hsl(var(--muted)); }

/* ---------- 13. COMMAND PALETTE ---------- */
.cmdk { position: fixed; inset: 0; z-index: 95; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); }
.cmdk.open { display: flex; }
.cmdk-box { width: min(620px, 92vw); background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5); animation: pop .15s; }
.cmdk-input { width: 100%; border: 0; border-bottom: 1px solid hsl(var(--border)); padding: 16px 16px; font: 15px var(--font-body); background: transparent; color: hsl(var(--foreground)); outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-group { font-size: 11px; font-weight: 700; color: hsl(var(--muted-foreground)); padding: 8px 8px 4px; text-transform: uppercase; letter-spacing: .1em; }
.cmdk-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px; font-size: 14px; cursor: pointer; }
.cmdk-item.sel, .cmdk-item:hover { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.cmdk-item small { margin-left: auto; color: hsl(var(--muted-foreground)); font-size: 11px; }

/* ---------- 14. FOOTER ---------- */
.footer { position: relative; z-index: 1; border-top: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .55); backdrop-filter: blur(10px); margin-top: 40px; }
.footer-grid { display: grid; gap: 24px; padding: 40px 0 24px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--muted-foreground)); margin-bottom: 12px; }
.footer a.fl { display: block; font-size: 14px; padding: 4px 0; color: hsl(var(--foreground) / .85); }
.footer a.fl:hover { color: hsl(var(--primary)); }
.footer-bottom { border-top: 1px solid hsl(var(--border) / .6); padding: 16px 0; font-size: 12px; color: hsl(var(--muted-foreground)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.social-row { display: flex; flex-wrap: wrap; gap: 6px; }
.social-row a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--background) / .6); font-size: 11px; font-weight: 700; }
.social-row a:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }

/* ---------- 15. AUTH PAGES ---------- */
.auth-wrap { min-height: calc(100vh - var(--nav-h) - 120px); display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(440px, 100%); }
.auth-card .head { text-align: center; margin-bottom: 20px; }

/* ---------- 16. ANIMATION HELPERS ---------- */
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in-view { opacity: 1; transform: none; }
.fade-in { animation: fadeup .6s ease-out both; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .3s; } .d4 { animation-delay: .4s; } .d5 { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* ---------- 17. ADMIN ---------- */
.admin { display: flex; min-height: 100vh; background: hsl(var(--background)); }
.admin-side { width: 250px; flex-shrink: 0; background: hsl(var(--sidebar)); border-right: 1px solid hsl(var(--border)); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-side .brand { display: flex; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid hsl(var(--border)); font-weight: 700; }
.admin-side .brand .logo { width: 30px; height: 30px; display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); color: #fff; font-size: 13px; }
.side-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: hsl(var(--muted-foreground)); padding: 12px 16px 6px; }
.side-link { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 13px; color: hsl(var(--foreground) / .85); border-left: 2px solid transparent; }
.side-link:hover { background: hsl(var(--sidebar-accent) / .6); color: hsl(var(--foreground)); }
.side-link.active { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-fg)); border-left-color: hsl(var(--primary)); font-weight: 600; }
.side-link .ic { width: 16px; height: 16px; opacity: .85; }
.side-link .cnt { margin-left: auto; font-size: 11px; color: hsl(var(--muted-foreground)); }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-top { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / .85); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 30; }
.admin-body { padding: 24px 20px 60px; max-width: 1400px; width: 100%; }
.admin-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-title h1 { font-size: 20px; margin: 0; }
.kpi { padding: 16px; display: flex; gap: 12px; align-items: center; }
.kpi .n { font-size: 24px; font-weight: 800; font-family: var(--font-head); line-height: 1; }
.kpi .l { font-size: 12px; color: hsl(var(--muted-foreground)); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
.img-preview { width: 120px; height: 80px; object-fit: cover; border: 1px solid hsl(var(--border)); margin-top: 6px; background: hsl(var(--muted)); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.pager { display: flex; gap: 4px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 34px; height: 32px; padding: 0 8px; display: grid; place-items: center; border: 1px solid hsl(var(--border)); font-size: 13px; background: hsl(var(--card)); }
.pager .cur { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
@media (max-width: 900px) {
  .admin-side { position: fixed; left: 0; top: 0; z-index: 80; transform: translateX(-100%); transition: transform .25s; box-shadow: 20px 0 50px rgb(0 0 0 / .2); }
  .admin.side-open .admin-side { transform: none; }
}
@media (min-width: 901px) { .admin-burger { display: none !important; } }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* =====================================================================
   PHASE 2 — life story & visuals
   ===================================================================== */
.acc { color: var(--ac, hsl(var(--primary))); }
.op5 { opacity: .5; }
mark { background: hsl(var(--primary) / .15); color: inherit; font-weight: 600; padding: 0 2px; }

/* ---------- Leaflet skin ---------- */
.leaflet-container { font: 13px var(--font-body); background: hsl(var(--muted)); z-index: 0; }
.leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 12px 32px -8px rgb(0 0 0 / .3); }
.leaflet-popup-content { margin: 12px 12px; line-height: 1.45; }
.dark .leaflet-popup-content-wrapper, .dark .leaflet-popup-tip, .cyberpunk .leaflet-popup-content-wrapper, .cyberpunk .leaflet-popup-tip { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.leaflet-bar a, .leaflet-bar a:hover { border-radius: 0 !important; }
.aj-pin-wrap { background: none; border: 0; }
.aj-pin { --s: 28px; display: grid; place-items: center; width: var(--s); height: var(--s); background: var(--c); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 4px 12px rgb(0 0 0 / .3); }
.aj-pin b { transform: rotate(45deg); color: #fff; font: 800 10px/1 var(--font-head); }
.aj-dot { display: block; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.aj-photo { display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c); background: var(--c); box-shadow: 0 6px 16px rgb(0 0 0 / .35); transition: transform .2s; }
.aj-photo:hover { transform: scale(1.15); }
.aj-photo img { width: 100%; height: 100%; object-fit: cover; }
.aj-star { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; border: 2px solid #fff; box-shadow: 0 3px 10px rgb(0 0 0 / .35); }
.aj-emoji { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: hsl(var(--card)); border: 2.5px solid var(--c); font-size: 14px; box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 45%, transparent); transition: transform .2s; }
.aj-emoji:hover { transform: scale(1.2); }
.aj-pop { display: grid; gap: 2px; min-width: 180px; }
.aj-pop b { font: 700 13.5px/1.3 var(--font-head); }
.aj-pop small { color: hsl(var(--muted-foreground)); font-size: 11px; }
.aj-pop p { margin: 4px 0 0; font-size: 12px; }
.aj-pop a { color: hsl(var(--primary)); font-weight: 600; font-size: 12px; }
.aj-pop-tag { justify-self: start; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.aj-pop-img { width: 100%; max-height: 130px; object-fit: cover; margin-bottom: 6px; display: block; }
.aj-bm { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: hsl(var(--card) / .92); backdrop-filter: blur(10px); border: 1px solid hsl(var(--border)); box-shadow: 0 4px 16px rgb(0 0 0 / .12); }
.aj-bm button { border: 0; background: none; padding: 4px 8px; font: 600 11px var(--font-body); color: hsl(var(--muted-foreground)); cursor: pointer; }
.aj-bm button:hover { color: hsl(var(--foreground)); }
.aj-bm button.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* ---------- Biography ---------- */
.bio { --cur: hsl(var(--primary)); }
.bio-title { font-family: var(--font-serif); font-weight: 800; letter-spacing: -.01em; }
.bio-nav { position: relative; display: flex; justify-content: center; overflow-x: auto; padding: 4px 0 12px; margin-bottom: 28px; scrollbar-width: none; }
.bio-nav::-webkit-scrollbar { display: none; }
.bio-nav-line { position: absolute; top: 26px; left: 16px; right: 16px; height: 1px; background: hsl(var(--border)); }
.bio-nav-btn { --ac: hsl(var(--primary)); position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 8px; background: none; border: 0; cursor: pointer; color: inherit; font-family: inherit; }
.bio-nav-ic { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ac); color: var(--ac); background: hsl(var(--background)); transition: transform .3s, box-shadow .3s; }
.bio-nav-ic .ic { width: 18px; height: 18px; }
.bio-nav-btn.active .bio-nav-ic { transform: scale(1.15); box-shadow: 0 4px 20px color-mix(in srgb, var(--ac) 35%, transparent); background: color-mix(in srgb, var(--ac) 10%, hsl(var(--background))); }
.bio-nav-yr { font-size: 11px; font-weight: 800; opacity: .6; } .bio-nav-btn.active .bio-nav-yr { opacity: 1; }
.bio-nav-t { font-size: 11px; font-weight: 600; color: var(--ac); max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .55; }
.bio-nav-btn.active .bio-nav-t { opacity: 1; }
.bio-nav-btn.active::after { content: ''; position: absolute; bottom: -4px; width: 32px; height: 2px; border-radius: 4px; background: var(--ac); }
@media (max-width: 1100px) { .bio-nav { justify-content: flex-start; } }
.bio-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 1023px) { .bio-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .bio-stat { padding: 8px; } .bio-stat-v { font-size: 14px; word-break: break-word; } .bio-stat .tiny { font-size: 11px; letter-spacing: .06em; } }
.bio-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; margin-bottom: 20px; }
.bio-stat { padding: 12px; transition: box-shadow .3s; } .bio-stat:hover { box-shadow: 0 8px 24px -10px rgb(0 0 0 / .2); }
.bio-stat-bar { display: block; width: 32px; height: 2px; background: var(--ac); margin-bottom: 8px; }
.bio-stat .ic { width: 14px; height: 14px; }
.bio-stat-v { margin: 4px 0 0; font: 900 clamp(15px, 2vw, 20px)/1.2 var(--font-head); }
.bio-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bio-chapters { min-width: 0; }
.bio-titlecard { overflow: hidden; box-shadow: 8px 8px 0 color-mix(in srgb, var(--ac) 12%, transparent), 0 2px 12px rgb(0 0 0 / .06); }
.bio-fold { position: absolute; top: 0; right: 0; border-left: 48px solid transparent; border-bottom: 48px solid color-mix(in srgb, var(--ac) 20%, hsl(var(--background))); filter: drop-shadow(-2px 2px 2px rgb(0 0 0 / .1)); }
.bio-accbar { height: 4px; background: var(--ac); }
.bio-pad { padding: clamp(20px, 3vw, 32px); } .bio-pad-sm { padding: clamp(16px, 2.2vw, 20px); padding-right: 44px; }
.bio-icbox { --ac2: var(--ac); flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; border: 2px solid var(--ac); color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, transparent); }
.bio-icbox .ic { width: 18px; height: 18px; }
.bio-h2 { font: 900 clamp(24px, 3vw, 30px)/1.15 var(--font-serif); margin: 4px 0; }
.bio-key { display: flex; gap: 8px; margin-top: 16px; padding: 12px; border: 1px solid color-mix(in srgb, var(--ac) 25%, transparent); background: color-mix(in srgb, var(--ac) 5%, transparent); }
.bio-key .ic { width: 16px; height: 16px; color: var(--ac); flex: 0 0 auto; margin-top: 2px; }
.bio-key p { margin: 0; font-size: 12px; font-weight: 600; font-style: italic; opacity: .78; line-height: 1.6; }
.bio-page { position: relative; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); cursor: pointer; transition: box-shadow .3s, border-color .3s;
  box-shadow: var(--sh) var(--sh) 0 color-mix(in srgb, var(--ac) 14%, transparent); border-bottom-color: color-mix(in srgb, var(--ac) 25%, transparent); }
.bio-page:hover { box-shadow: var(--sh) var(--sh) 0 color-mix(in srgb, var(--ac) 20%, transparent), 0 10px 28px -12px rgb(0 0 0 / .25); }
.bio-page.open { border-left: 3px solid var(--ac); }
.bio-page:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.bio-pno { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.bio-drop { font: 700 42px/.85 Georgia, serif; color: var(--ac); margin-top: 4px; }
.bio-text { margin: 0; font: 15px/1.9 Georgia, 'Times New Roman', serif; opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bio-page.open .bio-text { -webkit-line-clamp: unset; display: block; }
.bio-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ac); opacity: 0; transition: opacity .3s; }
.bio-more .ic { width: 12px; height: 12px; } .bio-page:hover .bio-more { opacity: .75; } .bio-page.open .bio-more { display: none; }
.bio-pn button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font: 700 13px var(--font-body); background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); color: hsl(var(--muted-foreground)); cursor: pointer; }
.bio-pn .bio-next { border-color: var(--ac); color: var(--ac); }
.bio-pn button:disabled { opacity: .3; cursor: default; }
.bio-upnext { display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; cursor: pointer; font-family: inherit; color: inherit; box-shadow: 4px 4px 0 color-mix(in srgb, var(--ac2) 15%, transparent); }
.bio-upnext > .ic { color: hsl(var(--muted-foreground)); transition: transform .3s; } .bio-upnext:hover > .ic { transform: translateX(4px); }
.bio-sticky { display: grid; gap: 12px; position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 1023px) { .bio-sticky { position: static; } }
.bio-map-card { overflow: hidden; }
.bio-map { height: 220px; }
.bio-map-cap { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; font-weight: 600; border-top: 1px solid hsl(var(--border) / .6); }
.bio-map-cap .ic { width: 14px; height: 14px; color: var(--cur); }
.bio-side-card { box-shadow: 4px 4px 0 color-mix(in srgb, var(--ac) 12%, transparent); }
.bio-side-card .ic { width: 14px; height: 14px; }
.bio-lbl { display: block; margin: 12px 0 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.bio-chip { padding: 2px 8px; font-size: 11px; font-weight: 700; border-radius: 999px; color: var(--ac); border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); background: color-mix(in srgb, var(--ac) 6%, transparent); }
.bio-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--ac); }
.bio-link:hover { background: hsl(var(--muted) / .5); } .bio-link .op5 { margin-left: auto; width: 12px; height: 12px; }
.bio-prog { height: 8px; background: hsl(var(--muted)); border-radius: 999px; overflow: hidden; }
.bio-prog i { display: block; height: 100%; background: var(--cur); border-radius: 999px; transition: width .6s ease, background .4s; }
.bio-num { width: 24px; height: 24px; border: 0; cursor: pointer; font: 700 9px var(--font-body); color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.bio-num.active { background: var(--ac); color: #fff; }
.bio-conn { gap: 6px !important; }
.bio-conn a { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11px; font-weight: 700; border: 1px solid hsl(var(--border) / .5); transition: box-shadow .2s; }
.bio-conn a:hover { box-shadow: 0 2px 8px rgb(0 0 0 / .08); } .bio-conn .ic { width: 12px; height: 12px; }
.bio-dots { display: flex; justify-content: center; gap: 2px; margin-top: 32px; }
.bio-dots button { padding: 4px; border: 0; background: none; cursor: pointer; }
.bio-dots i { display: block; width: 8px; height: 6px; border-radius: 999px; background: hsl(var(--muted-foreground)); opacity: .4; transition: all .3s; }
.bio-dots .active i { width: 32px; background: var(--ac); opacity: 1; }

/* ---------- PhotoHub ---------- */
.ph-tabs { justify-content: center; max-width: 460px; margin: 0 auto 24px; }
.ph-tabs .tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ph-tabs .ic { width: 16px; height: 16px; }
.ph-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ph-bar .select { width: auto; min-width: 180px; }
.ph-grid { columns: 4 240px; column-gap: 16px; }
.ph-card { break-inside: avoid; margin: 0 0 16px; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.ph-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--c) 45%, transparent); }
.ph-img { position: relative; display: grid; place-items: center; min-height: 140px; background: color-mix(in srgb, var(--c) 12%, hsl(var(--muted))); overflow: hidden; }
.ph-img img { width: 100%; display: block; transition: transform .6s; } .ph-card:hover .ph-img img { transform: scale(1.05); }
.ph-img > .ic { width: 36px; height: 36px; color: var(--c); }
.ph-cat { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 2px 8px; font-size: 11px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--c) 88%, black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-feat { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; background: #f59e0b; color: #fff; border-radius: 50%; }
.ph-feat .ic { width: 12px; height: 12px; }
.ph-card figcaption { padding: 12px; }
.ph-card figcaption .ic { width: 12px; height: 12px; flex: 0 0 auto; }
.ph-onmap { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: 600 11px var(--font-body); color: hsl(var(--primary)); cursor: pointer; }
.ph-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ph-catcard { display: flex; flex-direction: column; text-align: left; padding: 0; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); cursor: pointer; font-family: inherit; color: inherit; overflow: hidden; transition: all .25s; border-top: 3px solid var(--c); }
.ph-catcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--c) 50%, transparent); }
.ph-catcard.empty-cat { opacity: .6; }
.ph-catimg { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 6%, transparent)); display: grid; place-items: center; overflow: hidden; }
.ph-catimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.ph-emoji { position: relative; font-size: 30px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .3)); }
.ph-catname { padding: 8px 12px 2px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.ph-catn { padding: 0 12px 8px; font-size: 11px; color: var(--c); font-weight: 600; }
.ph-mapwrap { position: relative; overflow: hidden; }
.ph-map { height: min(70vh, 640px); }
.ph-maplegend { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; }
.ph-maplegend .ic { width: 14px; height: 14px; color: hsl(var(--primary)); }

/* ---------- Journey (full-height map app) ---------- */
.jr { display: flex; flex-direction: column; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); overflow: hidden; }
.jr-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid hsl(var(--primary) / .12);
  background: linear-gradient(90deg, hsl(var(--card) / .96), hsl(var(--accent) / .06), hsl(var(--gradient-design) / .05)); backdrop-filter: blur(16px); z-index: 30; }
.jr-logo { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1, #9333ea); box-shadow: 0 6px 18px rgb(99 102 241 / .35); }
.jr-logo .ic { width: 20px; height: 20px; }
.jr-logo i { position: absolute; right: -5px; bottom: -5px; min-width: 18px; height: 18px; padding: 0 2px; border-radius: 999px; display: grid; place-items: center; font: 800 8px/1 var(--font-body); font-style: normal; background: linear-gradient(135deg, #fb923c, #ec4899); border: 2px solid hsl(var(--card)); }
.jr-logo.sm { width: 32px; height: 32px; border-radius: 8px; } .jr-logo.sm .ic { width: 16px; height: 16px; }
.jr-title { margin: 0; font: 800 16px/1.2 var(--font-head); background: linear-gradient(90deg, #2563eb, #4f46e5, #9333ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jr-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.jr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11px; color: color-mix(in srgb, var(--c) 75%, hsl(var(--foreground))); background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.jr-pill b { font-size: 12px; color: var(--c); } .jr-pill .ic { width: 14px; height: 14px; color: var(--c); }
.jr-head .live-dot { display: inline-block; width: 7px; height: 7px; } .jr-head .live-dot::before, .jr-list .live-dot::before { background: #22c55e; }
.jr-list .live-dot { display: inline-block; width: 7px; height: 7px; vertical-align: middle; }
.jr-stats { flex: 0 0 auto; border-bottom: 1px solid hsl(var(--primary) / .1); background: hsl(var(--card) / .7); padding: 12px 16px; max-height: 42vh; overflow: auto; }
.jr-stats-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .jr-stats-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .jr-stats-in { grid-template-columns: 1fr; } }
.jr-bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; }
.jr-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; }
.jr-bar i { display: block; width: 100%; height: var(--h); background: linear-gradient(to top, #6366f1, #22d3ee); opacity: .75; transition: opacity .2s; }
.jr-bar:hover i, .jr-bar.active i { opacity: 1; background: linear-gradient(to top, #f59e0b, #ec4899); }
.jr-bar span { height: 10px; font-size: 11px; color: hsl(var(--muted-foreground)); }
.jr-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; font: 12px var(--font-body); color: inherit; background: none; border: 0; text-align: left; }
button.jr-row { cursor: pointer; } button.jr-row:hover, .jr-row.active { background: hsl(var(--primary) / .08); }
.jr-row > i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .jr-row .ic { width: 13px; height: 13px; color: hsl(var(--primary)); }
.jr-meter { width: 70px; height: 5px; background: hsl(var(--muted)); } .jr-meter i { display: block; height: 100%; background: hsl(var(--primary)); }
.jr-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.jr-mapbox { position: relative; flex: 1; min-width: 0; }
.jr-map { position: absolute; inset: 0; }
.jr-filter { position: absolute; top: 12px; left: 56px; z-index: 500; display: flex; align-items: center; gap: 6px; padding: 6px 8px; flex-wrap: wrap; max-width: calc(100% - 70px); }
.jr-sel { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; height: 34px; background: hsl(var(--primary) / .05); }
.jr-sel .ic { width: 15px; height: 15px; color: #6366f1; }
.jr-sel select { border: 0; background: none; font: 600 13px var(--font-body); color: hsl(var(--foreground)); outline: none; cursor: pointer; max-width: 190px; }
.jr-sel select option { color: #111; }
.jr-sep { width: 1px; height: 22px; background: hsl(var(--border)); }
.jr-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 0 6px; cursor: pointer; }
.jr-clear { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border: 0; cursor: pointer; font: 600 12px var(--font-body); color: #e11d48; background: rgb(244 63 94 / .1); }
.jr-clear .ic { width: 14px; height: 14px; }
.jr-legend { position: absolute; left: 12px; bottom: 26px; z-index: 500; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; max-width: 60%; font-size: 11px; font-weight: 600; }
.jr-legend span { display: inline-flex; align-items: center; gap: 4px; }
.jr-legend i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }
.jr-legend i.star { background: #f59e0b; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border: 0; width: 12px; height: 12px; }
.jr-count { position: absolute; top: 12px; right: 12px; z-index: 500; padding: 6px 8px; font-size: 11px; }
.jr-count b { color: hsl(var(--primary)); font-size: 13px; }
.jr-list { flex: 0 0 320px; display: flex; flex-direction: column; border-left: 1px solid hsl(var(--primary) / .12); background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--card)) 60%, hsl(var(--accent) / .04)); box-shadow: -10px 0 30px -20px rgb(0 0 0 / .3); transition: margin-right .3s ease; z-index: 20; }
.jr-list.closed { margin-right: -320px; }
.jr-list-head { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 12px; border-bottom: 1px solid hsl(var(--primary) / .1); }
.jr-search { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .5); }
.jr-items { flex: 1; overflow-y: auto; padding: 8px; display: grid; gap: 6px; align-content: start; }
.jr-item { display: flex; gap: 8px; width: 100%; padding: 8px; text-align: left; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .5); cursor: pointer; font-family: inherit; color: inherit; transition: all .2s; }
.jr-item:hover { border-color: hsl(var(--primary) / .4); box-shadow: 0 6px 16px -10px hsl(var(--primary) / .5); transform: translateX(-2px); }
.jr-item b { display: block; font-size: 12px; }
.jr-item small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); }
.jr-item em { font-style: normal; font-size: 11px; font-weight: 600; color: #fff; padding: 0 6px; border-radius: 999px; white-space: nowrap; }
.jr-ic { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; font: 800 15px var(--font-head); color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, black)); }
@media (max-width: 899px) {
  .jr-list { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); transform: translateX(100%); transition: transform .3s; margin: 0 !important; }
  .jr-list.open { transform: none; }
  .jr-body { position: relative; }
  .jr-filter { left: 52px; top: 10px; right: 10px; max-width: none; }
  .jr-sel select { max-width: 120px; }
  .jr-count { display: none; }
  .jr-head { padding: 8px 12px; }
}

/* ---------- Fly With Me ---------- */
.fly { position: relative; overflow: hidden; background: radial-gradient(ellipse at 20% 40%, hsl(var(--primary) / .05), transparent 50%), radial-gradient(ellipse at 80% 30%, hsl(var(--accent) / .06), transparent 50%); }
.fly-stage { display: grid; grid-template-columns: minmax(0, 56%) minmax(0, 44%); align-items: center; min-height: calc(100vh - var(--nav-h)); }
@media (max-width: 1023px) { .fly-stage { grid-template-columns: 1fr; min-height: 0; } }
.fly-circle-wrap { display: flex; justify-content: center; padding: 8px; }
.fly-svg { width: min(100%, 92vh, 960px); height: auto; overflow: visible; font-family: system-ui, sans-serif; }
@media (max-width: 1023px) { .fly-svg { width: min(100%, 640px); } }
.fly-deco { fill: none; stroke: hsl(var(--border)); stroke-width: .5; opacity: .35; }
.fly-deco.p { stroke: hsl(var(--primary)); opacity: .15; }
.fly-seg { cursor: pointer; outline: none; }
.fly-seg-p { fill: color-mix(in srgb, var(--c) 9%, transparent); stroke: var(--c); stroke-width: 1.5; stroke-opacity: .3; transition: all .35s; }
.fly-seg-h { opacity: 0; stroke: var(--c); stroke-width: 3; transition: opacity .35s; pointer-events: none; }
.fly-seg:hover .fly-seg-h, .fly-seg.active .fly-seg-h, .fly-seg:focus-visible .fly-seg-h { opacity: 1; }
.fly-seg:hover .fly-seg-p, .fly-seg.active .fly-seg-p { opacity: 0; }
.fly-ic { width: 84px; height: 84px; border-radius: 16px; display: grid; place-items: center; color: var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, hsl(var(--card))), color-mix(in srgb, var(--c) 4%, hsl(var(--card))));
  border: 3px solid color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 14%, transparent); transition: all .3s; }
.fly-ic .ic { width: 34px; height: 34px; }
.fly-seg:hover .fly-ic, .fly-seg.active .fly-ic { color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); border-color: var(--c); transform: scale(1.1); box-shadow: 0 0 50px color-mix(in srgb, var(--c) 45%, transparent), 0 12px 35px color-mix(in srgb, var(--c) 30%, transparent); }
.fly-lbl { text-align: center; font: 900 15px/1.1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); transition: color .3s; }
.fly-lbl small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: none; opacity: .75; margin-top: 3px; }
.fly-seg:hover .fly-lbl, .fly-seg.active .fly-lbl { color: var(--c); }
.fly-center { height: 100%; display: grid; place-items: center; text-align: center; }
.fly-center > div { display: grid; justify-items: center; gap: 8px; animation: fadeup .4s ease-out; }
.fly-c-small { font: 700 20px var(--font-script); font-style: italic; letter-spacing: .1em; color: hsl(var(--muted-foreground)); }
.fly-c-big { font: 900 58px/1 var(--font-serif); letter-spacing: -.02em; color: hsl(var(--foreground)); }
.fly-c-big em { font-style: normal; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--gradient-design))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fly-c-stats { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: hsl(var(--muted-foreground)); }
.fly-c-stats b { font-size: 20px; color: hsl(var(--foreground)); font-weight: 900; } .fly-c-stats i { width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--border)); }
.fly-c-ic { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 16px 40px color-mix(in srgb, var(--c) 40%, transparent); }
.fly-c-ic .ic { width: 44px; height: 44px; }
.fly-panel { padding: 24px clamp(16px, 3vw, 40px) 40px 8px; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
@media (max-width: 1023px) { .fly-panel { max-height: none; padding: 16px; } }
.fly-h1 { font: 800 clamp(28px, 3.4vw, 40px)/1.1 var(--font-head); letter-spacing: -.03em; margin: 0 0 8px; }
.fly-chaps { display: grid; gap: 8px; }
.fly-chap { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-align: left; font-family: inherit; color: inherit; cursor: pointer; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); border-left: 3px solid var(--c); transition: all .25s; }
.fly-chap:hover { transform: translateX(4px); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--c) 60%, transparent); }
.fly-chap b { display: block; font-size: 14px; } .fly-chap small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.fly-chap > .ic { color: hsl(var(--muted-foreground)); width: 16px; height: 16px; }
.fly-chap-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.fly-chap-ic .ic { width: 20px; height: 20px; }
.fly-chap-ic.on { width: 52px; height: 52px; border-radius: 12px; color: #fff; background: rgb(255 255 255 / .2); }
.fly-sec-head { display: flex; align-items: center; gap: 12px; padding: 16px; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 16px 36px -16px var(--c); margin-bottom: 16px; }
.fly-sec-head h2 { margin: 0; font: 800 26px/1.1 var(--font-head); } .fly-sec-head small { opacity: .85; font-size: 12px; }
.fly-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: rgb(255 255 255 / .18); color: #fff; cursor: pointer; }
.fly-years { display: grid; gap: 8px; }
.fly-year { border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card)); }
.fly-year summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; }
.fly-year summary::-webkit-details-marker { display: none; }
.fly-year summary b { font: 900 18px var(--font-head); color: var(--c); } .fly-year summary small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.fly-year summary .ic { margin-left: auto; width: 16px; height: 16px; transition: transform .25s; color: hsl(var(--muted-foreground)); }
.fly-year[open] summary .ic { transform: rotate(180deg); }
.fly-ydot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.fly-ev { position: relative; display: grid; gap: 2px; margin: 0 12px 12px 32px; padding: 8px 12px; border-left: 3px solid var(--cc); background: color-mix(in srgb, var(--cc) 5%, transparent); }
.fly-ev b { font-size: 14px; } .fly-ev p { margin: 2px 0; font-size: 12px; color: hsl(var(--muted-foreground)); } .fly-ev .ic { width: 12px; height: 12px; }
.fly-ev-tag { justify-self: start; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cc); }
.fly-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fly-step { display: flex; gap: 12px; padding: 16px; border-top: 3px solid var(--c); transition: transform .25s, box-shadow .25s; }
.fly-step:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px var(--c); }
.fly-step-n { position: absolute; top: 10px; right: 12px; font: 900 22px var(--font-head); color: color-mix(in srgb, var(--c) 25%, transparent); }
.fly-step-ic { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.fly-step-ic .ic { width: 20px; height: 20px; }
.fly-bottom { grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 1023px) { .fly-bottom { grid-template-columns: 1fr; } }
.fly-mapcard { overflow: hidden; } .fly-map { height: 440px; }
.fly-friend { border-left: 3px solid var(--c); }

/* ---------- My Domain / Life Universe ---------- */
.dm { position: relative; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 50%, hsl(var(--primary) / .06), transparent 60%); }
.dm-top { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid hsl(var(--border) / .6); background: hsl(var(--card) / .85); backdrop-filter: blur(14px); }
.dm-title { margin: 0; font: 800 18px/1.1 var(--font-head); }
.dm-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-controls .input-icon { width: 200px; } .dm-controls .select { width: auto; height: 36px; } .dm-controls .input { height: 36px; }
.dm-zoom { display: inline-flex; align-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); height: 36px; }
.dm-zoom button { width: 32px; height: 100%; display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; }
.dm-zoom button:hover { background: hsl(var(--muted)); } .dm-zoom .ic { width: 15px; height: 15px; }
.dm-zoom span { min-width: 44px; text-align: center; font-size: 11px; font-weight: 700; }
.dm-hire { color: #fff; background: linear-gradient(90deg, #f59e0b, #f97316); border: 2px solid #d97706; font-weight: 800; }
.dm-hire .ic { width: 14px; height: 14px; }
.dm-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; }
.dm-canvas.panning { cursor: grabbing; }
.dm-world { position: absolute; left: 0; top: 0; width: max(100%, 1040px); height: max(100%, 700px); transform-origin: center center; transition: transform .08s linear; }
.dm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dm-lines path { fill: none; stroke-width: 1.4; opacity: .28; stroke-linejoin: round; transition: opacity .25s, stroke-width .25s; }
.dm-lines path.hub { stroke-width: 2.2; opacity: .4; stroke-dasharray: 6 5; animation: dash 30s linear infinite; }
.dm-lines .pulse { opacity: .9; }
@keyframes dash { to { stroke-dashoffset: -400; } }
.focusing .dm-lines path { opacity: .08; } .focusing .dm-lines path.lit { opacity: .95; stroke-width: 3; }
.dm-node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid color-mix(in srgb, var(--c) 70%, white);
  background: var(--g, var(--c)); color: #fff; font: 700 11px/1.15 var(--font-body); cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform .25s, box-shadow .25s, opacity .25s, filter .25s; z-index: 2; }
.dm-node:hover, .dm-node.active { transform: translate(-50%, -50%) scale(1.1); z-index: 5; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent), 0 14px 32px -8px var(--c); }
.dm-node .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.dm-node.s-lg { padding: 12px 16px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; font-weight: 900; } .dm-node.s-lg .ic { width: 20px; height: 20px; }
.dm-node.s-md { padding: 8px 12px; font-size: 12px; }
.dm-node.s-xl { flex-direction: column; width: 124px; height: 124px; justify-content: center; border-radius: 50%; font: 900 15px/1.1 var(--font-head); border-width: 4px; background: radial-gradient(circle at 30% 30%, #334155, #0f172a); text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 0 0 8px hsl(var(--primary) / .15), 0 0 60px hsl(var(--primary) / .35); animation: hubpulse 3s ease-in-out infinite; }
.dm-node.s-xl .ic { width: 30px; height: 30px; }
@keyframes hubpulse { 50% { box-shadow: 0 0 0 16px hsl(var(--primary) / .06), 0 0 80px hsl(var(--primary) / .45); } }
.dm-node.sh-circle:not(.s-xl) { border-radius: 999px; } .dm-node.sh-rounded { border-radius: 8px; } .dm-node.sh-square { border-radius: 0; }
.dm-node.sh-diamond { border-radius: 0; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); padding-left: 18px; padding-right: 18px; border: 0; }
.dm-node:not(.s-xl) { text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.dm-node-n { margin-left: 2px; padding: 0 6px; font-size: 11px; background: rgb(0 0 0 / .22); border-radius: 999px; }
.focusing .dm-node:not(.lit), .filtering .dm-node:not(.match) { opacity: .2; filter: grayscale(.6); }
.filtering .dm-node.match { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent); }
.dm-detail { position: absolute; top: 68px; right: 14px; z-index: 40; width: min(300px, calc(100% - 28px)); border-top: 4px solid var(--c); animation: fadeup .3s ease-out; max-height: calc(100% - 140px); overflow: auto; }
.dm-detail-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px; background: color-mix(in srgb, var(--c) 10%, transparent); }
.dm-detail-head h3 { margin: 0; font: 800 17px var(--font-head); }
.dm-detail-ic { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--c); flex: 0 0 auto; } .dm-detail-ic .ic { width: 18px; height: 18px; }
.dm-details { margin: 8px 0 0; padding-left: 16px; font-size: 12px; } .dm-details:empty { display: none; }
.dm-chip { border: 1px solid rgb(255 255 255 / .3); color: #fff; font: 600 11px var(--font-body); padding: 2px 8px; cursor: pointer; }
.dm-legend { position: absolute; left: 12px; bottom: 12px; z-index: 30; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px; max-width: calc(100% - 24px); font-size: 11px; font-weight: 600; }
.dm-legend span, .dm-legend button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: capitalize; }
.dm-legend button.active { color: hsl(var(--primary)); text-decoration: underline; }
.dm-legend i { width: 10px; height: 10px; } .dm-legend i.round { border-radius: 50%; }
.dm-hint { position: absolute; right: 14px; bottom: 12px; z-index: 30; margin: 0; }
@media (max-width: 767px) { .dm-controls .input-icon { width: 140px; } .dm-controls .select { max-width: 130px; } }

/* ---------- Geo CV ---------- */
.gc { --acc: #10b981; display: flex; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); overflow: hidden; }
.gc-side { flex: 0 0 min(540px, 42vw); overflow-y: auto; padding: 20px 20px 60px; border-right: 1px solid hsl(var(--border) / .5);
  background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--card) / .97)), radial-gradient(circle at 0 20%, color-mix(in srgb, var(--acc) 8%, transparent), transparent 40%); }
.gc-profile { position: relative; padding: 16px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 8%, hsl(var(--card))), hsl(var(--card))); overflow: hidden; }
.gc-profile::after { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 20%, transparent), transparent); pointer-events: none; }
.gc-avatar { position: relative; flex: 0 0 auto; width: 80px; height: 80px; }
.gc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 2px hsl(var(--card)), 0 0 0 4px color-mix(in srgb, var(--acc) 35%, transparent); }
.gc-avatar i { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #10b981; border: 3px solid hsl(var(--card)); }
.gc-name { margin: 2px 0 0; font: 900 22px/1.1 var(--font-head); letter-spacing: -.02em; }
.gc-role { margin: 2px 0 0; font-size: 12px; font-weight: 800; color: var(--acc); }
.gc-soc { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; transition: transform .2s; } .gc-soc:hover { transform: translateY(-2px) scale(1.08); color: #fff; }
.gc-soc .ic { width: 14px; height: 14px; }
.gc-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid hsl(var(--border) / .4); background: hsl(var(--muted) / .4); }
.gc-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 0; background: none; font: 800 11px var(--font-body); color: hsl(var(--muted-foreground)); cursor: pointer; transition: all .25s; }
.gc-tab .ic { width: 14px; height: 14px; } .gc-tab:hover { color: hsl(var(--foreground)); background: hsl(var(--card) / .6); }
.gc-tab.active { color: #fff; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 75%, black)); box-shadow: 0 4px 18px color-mix(in srgb, var(--a) 35%, transparent); }
@media (max-width: 520px) { .gc-tab span { display: none; } }
.gc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; margin-bottom: 16px; }
.gc-stat { display: grid; justify-items: center; gap: 0; padding: 12px 6px; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .5); border-bottom: 3px solid var(--c); }
.gc-stat span { font-size: 18px; } .gc-stat b { font: 900 22px/1.1 var(--font-head); color: var(--c); } .gc-stat small { font-size: 11px; font-weight: 700; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .08em; }
.gc-sec { margin-bottom: 18px; }
.gc-sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 14px var(--font-head); }
.gc-sec-h small { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); padding: 0 8px; border-radius: 999px; }
.gc-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px; margin-bottom: 6px; text-align: left; font-family: inherit; color: inherit; cursor: pointer; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .5); border-left: 3px solid var(--c); transition: all .2s; }
.gc-item:hover { transform: translateX(3px); box-shadow: 0 8px 22px -14px var(--c); }
.gc-item b { display: block; font-size: 13px; line-height: 1.3; } .gc-item small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.gc-item em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--c); }
.gc-item img { width: 44px; height: 34px; object-fit: cover; flex: 0 0 auto; }
.gc-dot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.gc-go { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); flex: 0 0 auto; opacity: 0; transition: opacity .2s; } .gc-item:hover .gc-go { opacity: 1; }
.gc-skills .skill-bar > i { background: linear-gradient(90deg, var(--c), hsl(var(--accent))); }
.gc-mapbox { position: relative; flex: 1; min-width: 0; }
.gc-map { position: absolute; inset: 0; }
.gc-legend { position: absolute; left: 12px; bottom: 26px; z-index: 500; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; font-size: 11px; font-weight: 600; }
.gc-legend span { display: inline-flex; align-items: center; gap: 4px; } .gc-legend i { width: 10px; height: 10px; border-radius: 50%; }
.gc-count { position: absolute; top: 12px; left: 56px; z-index: 500; padding: 6px 8px; font-size: 11px; } .gc-count b { color: var(--acc); font-size: 13px; }
@media (max-width: 1023px) {
  .gc { flex-direction: column-reverse; height: auto; overflow: visible; }
  .gc-side { flex: none; overflow: visible; border-right: 0; }
  .gc-mapbox { flex: none; height: 58vh; }
  .gc-count { display: none; }
}

/* ---------- Freelance ---------- */
.fl-eyebrow { color: #d97706; border-color: rgb(245 158 11 / .25); background: rgb(245 158 11 / .08); border-radius: 999px; }
.fl-feat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500; background: hsl(var(--card) / .8); border: 1px solid hsl(var(--border) / .6); }
.fl-feat .ic { width: 16px; height: 16px; }
.fl-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 8px 0 40px; }
@media (max-width: 1023px) { .fl-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .fl-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl-type { position: relative; display: grid; justify-items: center; gap: 4px; padding: 20px 12px; text-align: center; font-family: inherit; color: inherit; cursor: pointer; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px; transition: all .3s; }
.fl-type:hover { border-color: hsl(var(--primary) / .5); transform: translateY(-3px); box-shadow: 0 14px 32px -16px var(--g1); }
.fl-type b { font-size: 14px; } .fl-type small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.fl-type-ic { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 6px; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.fl-type-ic .ic { width: 20px; height: 20px; }
.fl-type.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 16px 36px -14px var(--g1); }
.fl-type.active small { color: rgb(255 255 255 / .85); } .fl-type.active .fl-type-ic { background: rgb(255 255 255 / .2); }
.fl-check { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; background: #10b981; color: #fff; border: 2px solid hsl(var(--background)); }
.fl-check .ic { width: 12px; height: 12px; } .fl-type.active .fl-check { display: grid; }
.fl-form-card { max-width: 820px; margin: 0 auto; padding: clamp(20px, 4vw, 36px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.fl-h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 24px var(--font-head); }
.fl-h2 .ic { width: 24px; height: 24px; color: hsl(var(--primary)); }
.fl-form { display: grid; gap: 12px; }
.fl-form .label { display: inline-flex; align-items: center; gap: 6px; } .fl-form .label .ic { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.fl-form input[type=file] { height: auto; padding: 8px; }

/* ---------- Phase 2 admin: map picker, freelance inbox, bulk upload ---------- */
.mp { overflow: hidden; }
.mp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid hsl(var(--border) / .6); }
.mp-bar .ic { width: 15px; height: 15px; } .mp-bar .input-icon { min-width: 200px; }
.mp-map { height: 320px; }
.mp .hint { padding: 6px 8px; }
.mp-results { display: grid; max-height: 180px; overflow: auto; border-bottom: 1px solid hsl(var(--border) / .6); padding: 6px; }
.mp-results button { text-align: left; padding: 6px 8px; border: 0; background: none; font: 12px var(--font-body); color: inherit; cursor: pointer; }
.mp-results button:hover { background: hsl(var(--primary) / .08); }
.fr-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .fr-wrap { grid-template-columns: 1fr; } }
.fr-list { max-height: calc(100vh - 220px); overflow: auto; }
.fr-item { display: grid; gap: 2px; padding: 12px 12px; border-bottom: 1px solid hsl(var(--border) / .6); color: inherit; border-left: 3px solid transparent; }
.fr-item:hover { background: hsl(var(--muted) / .5); } .fr-item.active { background: hsl(var(--primary) / .07); border-left-color: hsl(var(--primary)); }
.fr-item b { font-size: 13px; }
.fr-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.fr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.fr-facts > div { display: grid; gap: 2px; padding: 12px; background: hsl(var(--muted) / .4); }
.fr-facts b { font-size: 13px; } .fr-facts a { color: hsl(var(--primary)); }
.fr-desc { padding: 12px; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--background)); font-size: 14px; line-height: 1.75; white-space: normal; }
.fr-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fr-step input { position: absolute; opacity: 0; pointer-events: none; }
.fr-step span { display: inline-block; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); color: var(--c); background: color-mix(in srgb, var(--c) 6%, transparent); }
.fr-step input:checked + span { background: var(--c); color: #fff; box-shadow: 0 6px 16px -8px var(--c); }
.fr-step input:focus-visible + span { outline: 2px solid var(--c); outline-offset: 2px; }
.bulk-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 32px 16px; text-align: center; cursor: pointer; border: 2px dashed hsl(var(--primary) / .4); background: hsl(var(--primary) / .04); transition: all .2s; }
.bulk-drop.over, .bulk-drop:hover { background: hsl(var(--primary) / .09); border-color: hsl(var(--primary)); }
.bulk-drop .ic { width: 34px; height: 34px; color: hsl(var(--primary)); }
.bulk-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bulk-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.bulk-pv { position: relative; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
.bulk-pv img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bulk-pv span { display: block; padding: 2px 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-pv.over { opacity: .35; }

/* =====================================================================
   PHASE 3 — knowledge hubs
   ===================================================================== */
/* ---------- modal / sheet ---------- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgb(2 6 23 / .55); backdrop-filter: blur(4px); animation: fadeup .2s ease-out; }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5); }
.modal-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: hsl(var(--muted) / .8); color: inherit; cursor: pointer; }
.modal-x .ic { width: 16px; height: 16px; }
.modal.sheet { place-items: stretch end; padding: 0; }
.sheet-box { max-width: 520px; height: 100vh; max-height: none; padding: 24px; animation: slidein .25s ease-out; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-box h4, .dir-dlg h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); }
.badge-amber { color: #d97706; border-color: rgb(245 158 11 / .4); background: rgb(245 158 11 / .1); }
.ic-xs { width: 12px !important; height: 12px !important; }

/* ---------- DataHub ---------- */
.dh-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; border-radius: 16px; background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / .05)); }
.dh-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); }
.dh-pill .ic { width: 13px; height: 13px; }
.dh-title { margin: 8px 0 4px; font: 800 clamp(34px, 5vw, 48px)/1 var(--font-head); letter-spacing: -.03em; }
.dh-signin { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: #b45309; border: 1px solid rgb(245 158 11 / .35); background: rgb(245 158 11 / .08); border-radius: 8px; }
.dh-stat { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; }
.dh-stat-ic { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.dh-stat b { display: block; font: 800 22px/1 var(--font-head); } .dh-stat small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.dh-tier { display: flex; gap: 8px; align-items: center; padding: 12px; border: 1px dashed color-mix(in srgb, var(--g1) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--g1) 5%, transparent); }
.dh-tier b { font-size: 12px; letter-spacing: .08em; } .dh-tier small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); }
.dh-tier-ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.dh-tier-ic .ic { width: 16px; height: 16px; }
.dh-banners { display: grid; gap: 8px; }
.dh-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; color: inherit; border: 1px solid color-mix(in srgb, var(--g1) 30%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--g1) 10%, transparent), color-mix(in srgb, var(--g2) 6%, transparent)); transition: all .25s; }
.dh-banner:hover { transform: translateX(4px); box-shadow: 0 10px 28px -16px var(--g1); color: inherit; }
.dh-banner b { font-size: 14px; } .dh-banner small { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.dh-bb { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--g1); background: color-mix(in srgb, var(--g1) 12%, transparent); }
.dh-search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 12px; }
.dh-search input { flex: 1; border: 0; background: none; font: 15px var(--font-body); color: inherit; outline: none; }
.dh-search > .ic { width: 18px; height: 18px; color: hsl(var(--muted-foreground)); }
.dh-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1023px) { .dh-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .dh-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dh-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font: 600 12.5px var(--font-body); color: inherit; text-align: left; cursor: pointer; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); transition: all .2s; }
.dh-chip span { flex: 1; } .dh-chip b { font-size: 11px; padding: 0 6px; border-radius: 999px; background: hsl(var(--muted)); } .dh-chip .ic { width: 16px; height: 16px; color: var(--g1); }
.dh-chip.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); } .dh-chip.active .ic { color: #fff; } .dh-chip.active b { background: rgb(255 255 255 / .25); }
.dh-h2 { margin: 0; font: 700 17px var(--font-head); }
.dh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .dh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .dh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .dh-grid { grid-template-columns: 1fr; } }
.dh-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); transition: transform .3s, box-shadow .3s; }
.dh-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 2; background: linear-gradient(var(--c1), var(--c2)); }
.dh-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px var(--c1); }
.dh-thumb { position: relative; aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.dh-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .55), transparent 55%); }
.dh-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .dh-card:hover .dh-thumb img { transform: scale(1.06); }
.dh-thumb-ph .ic { width: 40px; height: 40px; color: rgb(255 255 255 / .85); }
.dh-cat, .dh-tiertag, .dh-dl { position: absolute; z-index: 1; font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; }
.dh-cat { top: 10px; left: 12px; background: linear-gradient(90deg, var(--c1), var(--c2)); max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-tiertag { top: 10px; right: 10px; background: linear-gradient(90deg, var(--t1), var(--t2)); }
.dh-dl { left: 10px; bottom: 8px; display: inline-flex; gap: 4px; align-items: center; padding: 0; } .dh-dl .ic { width: 12px; height: 12px; }
.dh-body { display: grid; gap: 8px; padding: 12px 12px 12px 16px; flex: 1; align-content: start; }
.dh-body b { font-size: 14px; line-height: 1.3; } .dh-body p { margin: 0; }
.dh-share { border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 2px; } .dh-share .ic { width: 15px; height: 15px; }
.dh-access { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 8px; }
.dh-access .ic { width: 13px; height: 13px; } .dh-access.t-public { color: #2563eb; background: rgb(59 130 246 / .08); } .dh-access.t-free { color: #059669; background: rgb(16 185 129 / .08); } .dh-access.t-paid { color: #d97706; background: rgb(245 158 11 / .09); }
.dh-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 0; border-radius: 8px; cursor: pointer; font: 700 13px var(--font-body); color: #fff; background: linear-gradient(90deg, var(--t1), var(--t2)); transition: filter .2s; }
.dh-cta:hover { filter: brightness(1.08); } .dh-cta .ic { width: 15px; height: 15px; }
.dh-cw { padding: 32px 20px; border-radius: 16px; }
.dh-mhead { position: relative; padding: 20px 24px; color: #fff; background: linear-gradient(135deg, var(--g1, #3b82f6), var(--g2, #06b6d4)); }
.dh-mhead h3 { margin: 0; font: 800 18px var(--font-head); } .dh-mhead p { margin: 4px 0 0; font-size: 13px; opacity: .9; } .dh-mhead .modal-x { background: rgb(255 255 255 / .2); color: #fff; }
.dh-mini { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid hsl(var(--border)); border-radius: 8px; }
.dh-mini > span { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: hsl(var(--muted)); font-size: 20px; }
.dh-mini img { width: 100%; height: 100%; object-fit: cover; } .dh-mini b { font-size: 13px; display: block; } .dh-mini small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.dh-prog { position: relative; height: 10px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; margin-top: 6px; }
.dh-prog i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #10b981, #06b6d4); transition: width .4s; }
.dh-prog span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .1em; }
.dh-socials { gap: 8px !important; }
.dh-soc { display: grid; gap: 2px; padding: 8px; text-align: center; border-radius: 8px; color: #fff; background: var(--c); transition: all .2s; }
.dh-soc:hover { color: #fff; filter: brightness(1.1); transform: translateY(-2px); } .dh-soc b { font-size: 12px; } .dh-soc small { font-size: 11px; opacity: .9; }
.dh-soc.done { background: #10b981; }
.dh-user { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: hsl(var(--muted) / .5); }
.dh-user > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); }
.dh-user b { display: block; font-size: 13px; } .dh-user small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.dh-payform { display: grid; gap: 12px; }
.dh-price { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px; border-radius: 8px; border: 1px solid rgb(245 158 11 / .35); background: rgb(245 158 11 / .07); }
.dh-price b { font: 800 22px var(--font-head); color: #d97706; }
.dh-how { font-size: 13px; padding: 12px 12px; border-radius: 8px; background: hsl(var(--muted) / .5); } .dh-how ol, .dh-mfs ol { margin: 6px 0 0; padding-left: 20px; } .dh-how li { margin: 2px 0; }
.dh-mfs { font-size: 12px; padding: 12px; border-radius: 8px; border: 1px solid #e2136e55; background: #e2136e0d; } .dh-mfs[data-m="Nagad"] { border-color: #f7941d55; background: #f7941d0d; } .dh-mfs[data-m="Rocket"] { border-color: #8c3494aa; background: #8c34940d; }

.dhi-hero { position: relative; aspect-ratio: 21/8; min-height: 220px; border-radius: 16px; overflow: hidden; display: grid; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.dhi-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dhi-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .75), rgb(0 0 0 / .1)); }
.dhi-hero-ph { position: absolute; right: 24px; top: 24px; opacity: .2; } .dhi-hero-ph .ic { width: 120px; height: 120px; color: #fff; }
.dhi-hero-in { position: relative; z-index: 1; align-self: end; padding: 24px; color: #fff; max-width: 780px; }
.dhi-hero-in h1 { margin: 8px 0 6px; font: 800 clamp(24px, 3.4vw, 36px)/1.15 var(--font-head); } .dhi-hero-in p { margin: 0; opacity: .88; font-size: 14px; }
.dhi-b { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .18); color: #fff; backdrop-filter: blur(6px); } .dhi-b.tier { background: linear-gradient(90deg, var(--g1), var(--g2)); } .dhi-b.mono { font-family: var(--font-mono); }
.dhi-hero-n { position: absolute; z-index: 1; right: 24px; bottom: 24px; display: flex; gap: 16px; color: #fff; text-align: center; } .dhi-hero-n b { display: block; font: 800 22px var(--font-head); } .dhi-hero-n span { font-size: 11px; opacity: .85; }
.dhi-info { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .dhi-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 480px) { .dhi-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dhi-info > div { padding: 12px; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); } .dhi-info small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .06em; } .dhi-info b { font-size: 13px; word-break: break-word; }
.dhi-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; }
.dhi-soc, .pu-soc { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 12px var(--font-body); color: #fff; border: 0; cursor: pointer; }
.dhi-soc:hover, .pu-soc:hover { color: #fff; transform: translateY(-2px); } .pu-soc .ic { width: 14px; height: 14px; }
.dhi-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .dhi-cols { grid-template-columns: 1fr; } }
.dhi-main, .dhi-side { display: grid; gap: 16px; } .dhi-side { position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 960px) { .dhi-side { position: static; } }
.dhi-main .card, .dhi-side .card { border-radius: 12px; }
.dhi-sech { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .dhi-sech h2 { margin: 0; font: 700 16px var(--font-head); flex: 1; }
.dhi-secic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); } .dhi-secic .ic { width: 15px; height: 15px; }
.dhi-desc { margin: 0; line-height: 1.75; }
.dhi-locked { display: grid; justify-items: center; gap: 8px; padding: 24px; text-align: center; border: 1px dashed rgb(245 158 11 / .5); border-radius: 12px; background: rgb(245 158 11 / .05); } .dhi-locked > .ic { width: 28px; height: 28px; color: #d97706; }
.dhi-code { border: 1px solid hsl(var(--border)); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.dhi-code summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; background: hsl(var(--muted) / .45); flex-wrap: wrap; }
.dhi-code summary::-webkit-details-marker { display: none; } .dhi-code summary b { font-family: var(--font-mono); font-size: 13px; } .dhi-code summary .btn { margin-left: auto; }
.dhi-code > p, .dhi-code > b { margin: 8px 12px 0; display: block; }
.dhi-lang { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 800 10px var(--font-mono); color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.dhi-pre { margin: 8px 0 0; max-height: 500px; overflow: auto; padding: 12px; font: 12.5px/1.6 var(--font-mono); background: #0d1117; color: #e6edf3; border-radius: 0 0 8px 8px; }
.dhi-pre code { background: none !important; padding: 0 !important; } .dhi-pre.out { background: hsl(var(--muted)); color: hsl(var(--foreground)); border-radius: 8px; margin: 6px 12px 12px; }
.dhi-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (max-width: 640px) { .dhi-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dhi-gal a { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; } .dhi-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .dhi-gal a:hover img { transform: scale(1.06); }
.dhi-gal span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; color: #fff; background: rgb(0 0 0 / .55); padding: 0 6px; border-radius: 999px; }
.dhi-pdf { width: 100%; aspect-ratio: 16/10; border: 1px solid hsl(var(--border)); border-radius: 8px; background: #fff; }
.dhi-tierbox { padding: 12px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--g1) 50%, transparent); background: color-mix(in srgb, var(--g1) 6%, transparent); } .dhi-tierbox b { display: block; } .dhi-tierbox small { color: hsl(var(--muted-foreground)); }
.dhi-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; } .dhi-dl dt { color: hsl(var(--muted-foreground)); } .dhi-dl dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Open Geo Hub / Atlas ---------- */
.gh-hero { position: relative; padding: 32px 0; border-bottom: 1px solid hsl(var(--border) / .6); background: linear-gradient(90deg, rgb(16 185 129 / .06), rgb(20 184 166 / .05), rgb(6 182 212 / .06)); }
.gh-hero.atlas { background: linear-gradient(90deg, rgb(99 102 241 / .06), rgb(16 185 129 / .05), rgb(6 182 212 / .06)); }
.gh-hero a { color: inherit; } .gh-hero .small .ic { width: 13px; height: 13px; vertical-align: -2px; }
.gh-logo { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #10b981, #0d9488); } .gh-logo .ic { width: 20px; height: 20px; }
.gh-title { margin: 12px 0 8px; font: 800 clamp(28px, 4vw, 40px)/1.1 var(--font-head); background: linear-gradient(90deg, #34d399, #2dd4bf); background-clip: text; -webkit-background-clip: text; color: transparent; }
.gh-controls { display: flex; flex-wrap: wrap; gap: 8px; } .gh-controls .select { width: auto; min-width: 150px; }
.gh-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font: 600 12.5px var(--font-body); color: hsl(var(--muted-foreground)); cursor: pointer; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.gh-tab .ic { width: 14px; height: 14px; } .gh-tab.active { color: #fff; border-color: #059669; background: #059669; }
.pill.active { color: #fff; background: var(--pc, hsl(var(--primary))); border-color: transparent; }
.gh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
@media (max-width: 1023px) { .gh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gh-grid { grid-template-columns: 1fr; } }
.gh-card { display: grid; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); transition: all .25s; align-content: start; }
.gh-card:hover { border-color: rgb(16 185 129 / .5); box-shadow: 0 14px 34px -18px rgb(16 185 129 / .6); }
.gh-cat { font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 2px 8px; border-radius: 999px; color: var(--c, #10b981); background: color-mix(in srgb, var(--c, #10b981) 12%, transparent); }
.gh-heart { margin-left: auto; border: 0; background: none; font-size: 16px; line-height: 1; color: hsl(var(--muted-foreground) / .5); cursor: pointer; } .gh-heart.on { color: #ef4444; }
.gh-name { font-size: 14px; } .gh-card p { margin: 0; }
.gh-dt { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; color: var(--d); background: color-mix(in srgb, var(--d) 12%, transparent); border: 1px solid color-mix(in srgb, var(--d) 25%, transparent); }
.gh-actions { display: flex; gap: 6px; margin-top: 4px; } .gh-actions .btn-primary { flex: 1; }
.gh-list { list-style: none; padding: 0; margin: 0; font-size: 13px; } .gh-list li { padding: 2px 0; }
.gh-kv { gap: 8px !important; margin-top: 12px; } .gh-kv div { padding: 8px 8px; border-radius: 8px; background: hsl(var(--muted) / .5); } .gh-kv small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); } .gh-kv b { font-size: 13px; text-transform: capitalize; }
.gh-steps { padding-left: 20px; font-size: 13px; } .gh-steps li { margin: 4px 0; }
.gh-sheet-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 14px; border-top: 1px solid hsl(var(--border)); }
.gh-guides { display: grid; gap: 8px; } .gh-guides details { border-radius: 12px; padding: 0 16px; }
.gh-guides summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; cursor: pointer; font-weight: 700; list-style: none; } .gh-guides summary::-webkit-details-marker { display: none; }
.gh-guides ol { margin: 0 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.75; }
.atlas-tabs { padding-bottom: 40px; }
.atlas-tabbar { position: sticky; top: var(--nav-h); z-index: 30; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-bottom: 0; background: hsl(var(--background) / .9); backdrop-filter: blur(12px); }
@media (max-width: 1100px) { .atlas-tabbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .atlas-tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.atlas-tab { display: flex !important; align-items: center; gap: 8px; text-align: left; padding: 8px 12px !important; margin: 0 !important; border-radius: 12px; border: 1px solid hsl(var(--border)) !important; background: hsl(var(--card)); }
.atlas-tab b { display: block; font-size: 13px; color: hsl(var(--foreground)); } .atlas-tab small { display: block; font-size: 11px; font-weight: 400; color: hsl(var(--muted-foreground)); line-height: 1.3; }
.atlas-ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); } .atlas-ic .ic { width: 17px; height: 17px; }
.atlas-n { margin-left: auto; font-size: 11px; font-weight: 700; padding: 0 8px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.atlas-tab.active { background: linear-gradient(135deg, var(--g1), var(--g2)); border-color: transparent !important; } .atlas-tab.active b, .atlas-tab.active small { color: #fff; } .atlas-tab.active .atlas-ic { background: rgb(255 255 255 / .2); } .atlas-tab.active .atlas-n { background: rgb(255 255 255 / .25); color: #fff; }
.dir-stats { gap: 8px !important; margin-bottom: 14px; } .dir-stats .card { padding: 12px; border-radius: 12px; text-align: center; } .dir-stats b { display: block; font: 800 24px var(--font-head); color: hsl(var(--primary)); } .dir-stats small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.dir-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.dir-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: thin; }
.dir-cats .pill { flex: 0 0 auto; white-space: nowrap; } .dir-cats .pill.active { background: var(--g); } .dir-cats .pill b { font-size: 11px; opacity: .8; margin-left: 2px; }
.dir-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1200px) { .dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .dir-grid { grid-template-columns: 1fr; } }
.dir-card { position: relative; display: grid; gap: 6px; align-content: start; text-align: left; padding: 16px 12px 12px; font: inherit; color: inherit; cursor: pointer; overflow: hidden; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); transition: all .25s; }
.dir-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .4); color: inherit; }
.dir-bar-top { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--g); }
.dir-card b { font-size: 14px; } .dir-card small { font-size: 11px; }
.dir-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.dir-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--s); }
.dir-spec { gap: 6px !important; } .dir-spec > span { padding: 6px 8px; border-radius: 8px; background: hsl(var(--muted) / .55); } .dir-spec small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); } .dir-spec b { font-size: 12px; }
.dir-acc { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--a); background: color-mix(in srgb, var(--a) 12%, transparent); border: 1px solid color-mix(in srgb, var(--a) 28%, transparent); }
.dir-dlg { position: relative; padding-top: 6px; } .dir-dlg h3 { margin: 8px 0 4px; font: 800 20px var(--font-head); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bd-hero { padding: 20px; border-radius: 16px; border: 1px solid rgb(22 163 74 / .3); background: radial-gradient(circle at 20% 10%, rgb(22 163 74 / .12), transparent 50%), radial-gradient(circle at 90% 80%, rgb(220 38 38 / .1), transparent 50%); }
.bd-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px !important; } @media (max-width: 700px) { .bd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-stats > div { padding: 12px; border-radius: 12px; color: #fff; text-align: center; background: linear-gradient(135deg, var(--g1), var(--g2)); } .bd-stats b { display: block; font: 800 22px var(--font-head); } .bd-stats small { font-size: 11px; opacity: .9; }
.bd-list { display: grid; gap: 8px; }
.bd-org { border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: linear-gradient(90deg, hsl(var(--card)), hsl(var(--card))), var(--sg); background-blend-mode: normal; overflow: hidden; }
.bd-org > summary { display: flex; align-items: center; gap: 12px; padding: 12px 12px; cursor: pointer; list-style: none; background: color-mix(in srgb, hsl(var(--card)) 90%, transparent); }
.bd-org > summary::-webkit-details-marker { display: none; } .bd-org > summary > .ic { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); transition: transform .2s; } .bd-org[open] > summary > .ic { transform: rotate(180deg); }
.bd-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--og); } .bd-ic .ic { width: 18px; height: 18px; }
.bd-body { padding: 4px 16px 16px 66px; } @media (max-width: 640px) { .bd-body { padding-left: 16px; } }
.bd-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } @media (max-width: 760px) { .bd-ds { grid-template-columns: 1fr; } }
.bd-ds > div { display: grid; gap: 4px; padding: 8px; border-radius: 8px; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card)); }
.dir-research { padding: 16px; border-radius: 12px; position: relative; overflow: hidden; } .dir-research summary { list-style: none; cursor: pointer; } .dir-research summary::-webkit-details-marker { display: none; } .dir-research[open] .xs[style] { display: none; }

/* ---------- Pulse Observatory ---------- */
.pl-hero { position: relative; overflow: hidden; padding: 72px 0 56px; border-bottom: 1px solid hsl(var(--border) / .6);
  background-image: linear-gradient(hsl(var(--foreground) / .07) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground) / .07) 1px, transparent 1px); background-size: 48px 48px; }
.pl-aurora { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.pl-aurora.a1 { left: -120px; top: -200px; background: hsl(180 70% 50% / .3); } .pl-aurora.a2 { right: -120px; top: -160px; background: hsl(280 70% 60% / .25); } .pl-aurora.a3 { left: 35%; bottom: -320px; background: hsl(20 90% 60% / .2); }
.pl-hero .container { position: relative; }
.pl-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .8); }
.pl-live .live-dot { width: 8px; height: 8px; } .pl-live .live-dot::before, .pl-live .live-dot::after { background: #10b981; }
.pl-title { margin: 16px 0 12px; font: 800 clamp(40px, 7vw, 76px)/1 var(--font-head); letter-spacing: -.04em; }
.pl-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 760px; margin: 28px auto 0; } @media (max-width: 640px) { .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-stats > div { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card) / .85); }
.pl-stats span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .pl-stats .ic { width: 16px; height: 16px; }
.pl-stats b { font: 800 22px var(--font-head); } .pl-stats small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.pl-bar { position: sticky; top: var(--nav-h); z-index: 20; padding: 8px 0; border-bottom: 1px solid hsl(var(--border) / .6); background: hsl(var(--background) / .88); backdrop-filter: blur(12px); }
.pl-bar .pill { text-transform: capitalize; }
.pl-feat { display: grid; grid-template-columns: 2fr 3fr; overflow: hidden; border-radius: 16px; color: inherit; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); transition: all .3s; }
@media (max-width: 760px) { .pl-feat { grid-template-columns: 1fr; } }
.pl-feat:hover { border-color: hsl(var(--primary)); box-shadow: 0 0 60px -20px hsl(var(--primary) / .5); color: inherit; }
.pl-feat-img { position: relative; min-height: 256px; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent), hsl(var(--accent) / .2)); }
.pl-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pl-feat-img > .ic { width: 64px; height: 64px; color: var(--c); }
.pl-today { position: absolute; top: 14px; left: 14px; display: inline-flex; gap: 4px; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: #10b981; } .pl-today .ic { width: 12px; height: 12px; }
.pl-feat-body { display: grid; gap: 8px; padding: 24px; align-content: center; } .pl-feat-body h2 { margin: 0; font: 800 clamp(22px, 3vw, 34px)/1.15 var(--font-head); } .pl-feat-body p { margin: 0; }
.pl-feat-body .ic { width: 13px; height: 13px; vertical-align: -2px; }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1023px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .pl-grid { grid-template-columns: 1fr; } }
.pl-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; color: inherit; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); transition: all .3s; }
.pl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgb(0 0 0 / .45); color: inherit; }
.pl-card-img { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 25%, transparent), color-mix(in srgb, var(--c) 8%, transparent)); }
.pl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .pl-card:hover .pl-card-img img { transform: scale(1.02); } .pl-card-img > .ic { width: 42px; height: 42px; color: var(--c); }
.pl-n, .pl-code { position: absolute; top: 10px; background: rgb(0 0 0 / .6); color: #fff; border: 0; } .pl-n { left: 10px; } .pl-code { right: 10px; }
.pl-chip { justify-self: start; font-size: 11px; font-weight: 700; text-transform: capitalize; padding: 2px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pl-foot { display: flex; gap: 8px; align-items: center; padding-top: 8px; margin-top: auto; font-size: 11px; color: hsl(var(--muted-foreground)); border-top: 1px solid hsl(var(--border) / .6); } .pl-foot .ic { width: 12px; height: 12px; }
.pu-title { font: 800 clamp(28px, 4.5vw, 46px)/1.1 var(--font-head); letter-spacing: -.03em; margin: 12px 0 8px; }
.pu-cover { width: 100%; border-radius: 12px; border: 1px solid hsl(var(--border)); margin-top: 16px; }
.pu-bar { position: sticky; top: var(--nav-h); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; margin: 16px 0; border-bottom: 1px solid hsl(var(--border) / .6); background: hsl(var(--background) / .9); backdrop-filter: blur(10px); }
.pu-tldr { border-radius: 12px; background: hsl(var(--muted) / .45); } .pu-tldr ul { margin: 8px 0 0; padding-left: 20px; }
.pu-h { display: flex; align-items: center; gap: 8px; margin: 32px 0 12px; font: 700 20px var(--font-head); } .pu-h .ic { width: 18px; height: 18px; color: var(--c); }
.pu-map { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid hsl(var(--border)); } .pu-map iframe { width: 100%; height: 100%; border: 0; }
.pu-body { font-size: 16px; } .pu-body pre { padding: 12px; overflow: auto; border-radius: 8px; background: #0d1117; color: #e6edf3; font: 13px/1.6 var(--font-mono); } .pu-body img { max-width: 100%; border-radius: 8px; } .pu-body blockquote { margin: 0; padding: 8px 16px; border-left: 3px solid var(--c); background: hsl(var(--muted) / .4); }
.pu-code .tabs { margin-bottom: 10px; } .pu-att { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (max-width: 640px) { .pu-att { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pu-att a { display: grid; justify-items: center; gap: 4px; padding: 8px; aspect-ratio: 1; align-content: center; text-align: center; border-radius: 12px; border: 1px solid hsl(var(--border)); overflow: hidden; color: inherit; }
.pu-att img { width: 100%; height: 70%; object-fit: cover; border-radius: 8px; } .pu-att .ic { width: 28px; height: 28px; color: var(--c); } .pu-att span { font-size: 12px; max-width: 100%; } .pu-att small { font-size: 11px; color: hsl(var(--primary)); }
.pu-refs li { margin: 6px 0; } .pu-refs a { color: hsl(var(--primary)); }

/* ---------- Prompt Library ---------- */
.pr-hero { padding-top: 32px; background: linear-gradient(135deg, hsl(280 80% 55% / .05), hsl(200 80% 55% / .04)); }
.pr-logo { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, hsl(280, 80%, 55%), hsl(200, 80%, 55%)); } .pr-logo .ic { width: 18px; height: 18px; }
.badge-violet { color: #9333ea; border-color: rgb(168 85 247 / .4); background: rgb(168 85 247 / .1); }
.pr-title { margin: 12px 0 6px; font: 800 clamp(30px, 4.5vw, 48px)/1.1 var(--font-serif); }
.pr-stat { padding: 12px 16px; border-radius: 12px; text-align: center; } .pr-stat b { display: block; font: 800 22px var(--font-head); } .pr-stat small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.pr-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pr-filters .select { width: auto; min-width: 150px; height: 48px; }
.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1023px) { .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .pr-grid { grid-template-columns: 1fr; } }
.pr-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); transition: all .3s; }
.pr-card:hover { box-shadow: 0 18px 40px -20px var(--g1); transform: translateY(-3px); }
.pr-cover { position: relative; aspect-ratio: 16/9; padding: 0; border: 0; cursor: pointer; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 25%, transparent), color-mix(in srgb, var(--g2) 15%, transparent)); }
.pr-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .pr-card:hover .pr-cover img { transform: scale(1.05); } .pr-ph .ic { width: 42px; height: 42px; color: var(--g1); }
.pr-model { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.pr-model.static { position: static; display: inline-block; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); }
.pr-feat { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; background: #f59e0b; }
.pr-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 8px; border-radius: 8px; font: 12px/1.5 var(--font-mono); background: hsl(var(--muted) / .6); color: hsl(var(--muted-foreground)); }
.pr-pre { white-space: pre-wrap; padding: 12px; border-radius: 8px; font: 13px/1.6 var(--font-mono); background: hsl(var(--muted) / .6); max-height: 420px; overflow: auto; }
.pr-out { display: grid; gap: 4px; } .pr-out img { width: 100%; border-radius: 8px; } .pr-out small { font-size: 11px; color: hsl(var(--muted-foreground)); }

/* ---------- Toolbox ---------- */
.tb-page { padding: 32px 0 60px; }
.tb-hero { position: relative; overflow: hidden; padding: 24px; border-radius: 16px; background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--primary) / .05), hsl(var(--accent) / .05)); }
.tb-strip { position: absolute; left: 0; right: 0; top: 0; height: 4px; display: flex; } .tb-strip i { flex: 1; }
.tb-logo { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); } .tb-logo .ic { width: 26px; height: 26px; }
.tb-title { margin: 0; font: 800 34px/1.1 var(--font-head); }
.tb-pill { display: grid; justify-items: center; padding: 8px 16px; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); } .tb-pill b { font: 800 20px var(--font-head); } .tb-pill small { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: hsl(var(--muted-foreground)); }
.tb-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } @media (max-width: 1100px) { .tb-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 700px) { .tb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tb-cat { position: relative; display: grid; justify-items: center; gap: 8px; padding: 16px 8px 12px; text-align: center; font: inherit; color: inherit; cursor: pointer; overflow: hidden; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); transition: all .25s; }
.tb-cat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .4); } .tb-cat.open { box-shadow: 0 0 0 2px hsl(var(--primary) / .5); }
.tb-cat-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--g); opacity: .7; } .tb-cat.open .tb-cat-bar { opacity: 1; height: 4px; }
.tb-cat-emoji { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--g); flex: 0 0 auto; }
.tb-cat b { font-size: 13px; background: var(--g); background-clip: text; -webkit-background-clip: text; color: transparent; }
.tb-cat .ic { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); transition: transform .2s; } .tb-cat.open .ic { transform: rotate(180deg); }
.tb-search { max-width: 460px; margin-left: auto; margin-right: auto; }
.tb-panel { padding: 16px; border-radius: 16px; } .tb-panel-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tb-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tb-tool { position: relative; display: grid; gap: 6px; align-content: start; padding: 12px; color: inherit; border-radius: 12px; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card)); transition: all .2s; }
.tb-tool:hover { border-color: hsl(var(--primary) / .5); transform: translateY(-2px); color: inherit; } .tb-tool b { font-size: 13px; } .tb-tool small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.tb-tool-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--g, hsl(var(--primary) / .15)); font-size: 16px; } .tb-tool-ic.big { width: 48px; height: 48px; font-size: 24px; }
.tb-open { font-size: 11px; font-weight: 700; color: hsl(var(--primary)); opacity: 0; transition: opacity .2s; } .tb-tool:hover .tb-open { opacity: 1; }
.tb-toolcard { position: relative; overflow: hidden; padding: 20px; border-radius: 16px; } .tb-toolcard .tb-cat-bar { opacity: 1; height: 4px; }
.tb-toolhead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; } .tb-toolhead h2 { margin: 0; font: 800 22px var(--font-head); } .tb-toolhead p { margin: 2px 0 0; }
.tb-related { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; } .tb-related a { flex: 0 0 200px; display: grid; gap: 2px; }
.tb-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .tb-form .field { margin: 0; } .tb-form .field.full { grid-column: 1 / -1; }
.tb-out { margin-top: 16px; }
.tb-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tb-kv > div { padding: 8px 12px; border-radius: 8px; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--muted) / .35); overflow-wrap: anywhere; }
.tb-kv small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); } .tb-kv b { font-size: 14px; font-weight: 700; }
.tb-table td, .tb-table th { font-size: 12px; } .tb-code-sm { font: 11px var(--font-mono); word-break: break-all; }
.tb-pre { white-space: pre-wrap; word-break: break-word; padding: 12px; margin: 8px 0; border-radius: 8px; font: 12.5px/1.55 var(--font-mono); background: hsl(var(--muted) / .6); max-height: 420px; overflow: auto; }
.tb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .tb-cards > * { display: grid; gap: 4px; }
.tb-swatch { display: block; height: 28px; border-radius: 4px; margin-bottom: 6px; }
.tb-map { border-radius: 12px; overflow: hidden; margin-top: 12px; border: 1px solid hsl(var(--border)); }
.tb-canvas { width: 100%; max-width: 600px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); }
.tb-matrix { border-collapse: collapse; margin: 6px 0 12px; font: 13px var(--font-mono); } .tb-matrix td, .tb-matrix th { padding: 6px 8px; border: 1px solid hsl(var(--border)); text-align: right; } .tb-matrix.big td { font-size: 18px; padding: 12px 20px; text-align: center; }
.tb-seq { display: flex; flex-wrap: wrap; gap: 6px; } .tb-seq span { padding: 4px 8px; border-radius: 4px; font: 12px var(--font-mono); background: hsl(var(--muted) / .6); }
.tb-hist-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding-top: 10px; }
.tb-hist-bars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .tb-hist-bars i { display: block; width: 100%; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(to top, hsl(var(--primary)), hsl(var(--accent))); } .tb-hist-bars small { font-size: 11px; }
.tb-heat td { text-align: center; font: 12px var(--font-mono); } .tb-cite { padding: 8px 12px; border-radius: 8px; border: 1px solid hsl(var(--border) / .6); margin-bottom: 8px; } .tb-cite p { margin: 4px 0 0; font-size: 13px; }
.tb-calc { max-width: 420px; } .tb-calc-in { font: 16px var(--font-mono); } .tb-calc-res { padding: 12px 4px; text-align: right; font: 700 28px var(--font-mono); overflow-x: auto; }
.tb-calc-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .tb-calc-keys button { height: 42px; border-radius: 8px; font: 600 14px var(--font-body); color: inherit; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; } .tb-calc-keys button:hover { background: hsl(var(--muted)); } .tb-calc-keys .eq { background: hsl(var(--primary)); color: #fff; }
.tb-hist { display: grid; gap: 4px; margin-top: 10px; } .tb-hist button { display: flex; justify-content: space-between; padding: 6px 8px; font: 12px var(--font-mono); border: 0; border-radius: 4px; background: hsl(var(--muted) / .5); color: inherit; cursor: pointer; }
.tb-sw { display: grid; align-items: end; min-width: 84px; height: 72px; padding: 4px; border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); } .tb-sw small { font: 10px var(--font-mono); color: #fff; mix-blend-mode: difference; }
.tb-swrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; } .tb-bigsw { height: 90px; border-radius: 12px; margin-bottom: 12px; border: 1px solid hsl(var(--border)); }
.tb-contrast { padding: 20px; border-radius: 12px; margin-bottom: 12px; } .tb-stage { display: grid; place-items: center; min-height: 220px; padding: 20px; border-radius: 12px; background: repeating-conic-gradient(hsl(var(--muted)) 0 25%, hsl(var(--card)) 0 50%) 0 0/20px 20px; }
.tb-box { width: 180px; height: 120px; display: grid; place-items: center; border-radius: 16px; background: hsl(var(--card)); font-weight: 700; }
.tb-glass-bg { padding: 32px; border-radius: 12px; background: linear-gradient(135deg, #10b981, #0ea5e9 50%, #a855f7); }
.tb-type { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px dashed hsl(var(--border)); overflow: hidden; } .tb-type small { font: 11px var(--font-mono); color: hsl(var(--muted-foreground)); } .tb-type span { white-space: nowrap; line-height: 1.15; }
.tb-pw { padding: 12px; border-radius: 8px; font: 700 18px var(--font-mono); letter-spacing: .04em; word-break: break-all; background: hsl(var(--muted) / .6); margin-bottom: 8px; }
.tb-pomo { display: grid; gap: 12px; justify-items: center; max-width: 360px; margin: 0 auto; } .tb-pomo svg { width: 200px; transform: rotate(-90deg); } .tb-pomo circle { fill: none; stroke-width: 8; } .tb-pomo .bg { stroke: hsl(var(--muted)); } .tb-pomo .fg { stroke: hsl(var(--primary)); stroke-linecap: round; transition: stroke-dashoffset .3s; } .tb-pomo > b { margin-top: -132px; margin-bottom: 70px; font: 800 38px var(--font-mono); }
.tb-sheet td[contenteditable] { min-width: 90px; outline: none; } .tb-sheet td[contenteditable]:focus { background: hsl(var(--primary) / .08); } .tb-sheet th input { width: 100px; border: 0; background: none; font: 700 12px var(--font-body); color: inherit; } .tb-sheet button { border: 0; background: none; cursor: pointer; color: hsl(var(--muted-foreground)); }
.hbars { display: grid; gap: 6px; margin-top: 10px; } .hbar { display: grid; grid-template-columns: 140px 1fr auto; gap: 8px; align-items: center; font-size: 12px; } .hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-t { height: 12px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; } .hbar-t i { display: block; height: 100%; border-radius: 999px; }

/* ---------- District Explorer ---------- */
.bd-lang { display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); } .bd-lang button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; font: 600 13px var(--font-body); color: inherit; cursor: pointer; } .bd-lang button.active { color: #fff; background: hsl(var(--primary)); }
.bd-hero-card { padding: 24px; border-radius: 16px; background: linear-gradient(135deg, rgb(22 163 74 / .08), hsl(var(--card)), rgb(244 63 94 / .07)); }
.bd-globe { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #16a34a, #dc2626); } .bd-globe .ic { width: 24px; height: 24px; }
.bd-title { margin: 0; font: 800 clamp(24px, 3.5vw, 36px)/1.15 var(--font-serif); }
.bd-mapwrap { position: relative; overflow: hidden; border-radius: 16px; } .bd-map { height: min(64vh, 560px); }
.bd-maplegend { position: absolute; right: 10px; bottom: 26px; z-index: 500; display: grid; gap: 6px; padding: 8px; max-width: 220px; font-size: 11px; } .bd-maplegend .select { height: 32px; font-size: 12px; }
.bd-maplegend span { display: flex; align-items: center; gap: 6px; } .bd-maplegend i { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.bd .pill.active { background: var(--pc, hsl(var(--primary))); }
.bd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } @media (max-width: 1100px) { .bd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .bd-grid { grid-template-columns: 1fr; } }
.bd-card { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px 12px 12px; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 12px; }
.bd-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--g); } .bd-name { font: 800 17px var(--font-head); }
.bd-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .bd-mini > span { padding: 6px 8px; border-radius: 8px; background: hsl(var(--muted) / .5); } .bd-mini small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); } .bd-mini b { font-size: 13px; }
.bd-rows { display: grid; gap: 6px; margin-top: 12px; }
.bd-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 12px; border: 1px solid hsl(var(--border) / .7); background: hsl(var(--card)); flex-wrap: wrap; }
.bd-row > i { width: 4px; align-self: stretch; border-radius: 4px; background: var(--g); } .bd-row b { min-width: 120px; } .bd-row small { font-size: 12px; color: hsl(var(--muted-foreground)); }
.bd-dhero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding: 20px; border-radius: 16px; border-top: 4px solid var(--c); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, hsl(var(--card))), hsl(var(--card))); }
@media (max-width: 860px) { .bd-dhero { grid-template-columns: 1fr; } }
.bd-dhero h2 { margin: 6px 0 2px; font: 800 clamp(28px, 4vw, 40px)/1.1 var(--font-serif); } .bd-pin { font-size: 20px; }
.bd-stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } @media (max-width: 560px) { .bd-stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-stats4 > div { padding: 8px; border-radius: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); } .bd-stats4 small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); } .bd-stats4 b { font-size: 14px; }
.bd-dmap { min-height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid hsl(var(--border)); }
.bd-secs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1100px) { .bd-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bd-secs { grid-template-columns: 1fr; } }
.bd-secs .card { position: relative; overflow: hidden; border-radius: 12px; padding-top: 18px; } .bd-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .bd-chips .card { border-radius: 12px; }

/* ---------- Learn Geospatial ---------- */
.lg-inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (max-width: 760px) { .lg-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lg-ind { display: flex; gap: 8px; align-items: center; padding: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); transition: all .25s; }
.lg-ind .ic { width: 22px; height: 22px; color: var(--c); flex: 0 0 auto; } .lg-ind b { display: block; font-size: 13px; } .lg-ind small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.lg-ind.active { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent), 0 14px 30px -16px var(--c); }
.lg-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .lg-nav a { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: inherit; } .lg-nav a:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.lg-sec { padding: 48px 0 8px; scroll-margin-top: calc(var(--nav-h) + 12px); }
.lg-ihead { position: relative; overflow: hidden; border-radius: 16px; border-top: 4px solid var(--c); } .lg-iic { font-size: 30px; }
.lg-kstats { gap: 8px !important; margin-top: 10px; } .lg-kstats > div { padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 7%, transparent); } .lg-kstats small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); } .lg-kstats b { color: var(--c); }
.lg-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 10px; } .lg-donut ul { list-style: none; margin: 0; padding: 0; font-size: 12px; display: grid; gap: 4px; } .lg-donut li { display: flex; align-items: center; gap: 6px; } .lg-donut i { width: 10px; height: 10px; border-radius: 4px; }
.svg-donut { max-width: 100%; height: auto; }
.lg-career { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px dashed hsl(var(--border)); } .lg-career:last-child { border: 0; }
.lg-exp { border-radius: 12px; } .lg-impact { margin-top: 8px; padding: 8px 8px; border-radius: 8px; font-size: 12px; background: rgb(16 185 129 / .08); border: 1px solid rgb(16 185 129 / .25); }
.lg-book { display: flex; gap: 12px; padding: 12px; border-radius: 12px; color: inherit; } .lg-book:hover { color: inherit; }
.lg-cover { width: 64px; height: 88px; flex: 0 0 auto; border-radius: 4px; display: grid; place-items: center; font-size: 24px; box-shadow: inset -6px 0 0 rgb(0 0 0 / .15), 0 6px 14px -6px rgb(0 0 0 / .4); }
.lg-lvhead { border-left: 4px solid var(--c); border-radius: 12px; }
.lg-topic, .lg-tut { border-radius: 12px; } .lg-topic summary, .lg-tut summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; } .lg-topic summary::-webkit-details-marker, .lg-tut summary::-webkit-details-marker { display: none; }
.lg-num { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--c, hsl(var(--primary))); }
.lg-ch { display: flex; gap: 12px; padding: 12px; border-radius: 12px; } .lg-ch a { color: inherit; }
.lg-chn { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font: 800 16px var(--font-head); color: #fff; background: var(--c); }
.lg-bmk { border: 0; background: none; font-size: 16px; cursor: pointer; color: hsl(var(--muted-foreground)); } .lg-bmk.on { color: #f59e0b; }
.lg-tic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--c); } .lg-tic .ic { width: 18px; height: 18px; }
.lg-top { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: hsl(var(--primary)); box-shadow: 0 10px 24px -8px hsl(var(--primary)); } .lg-top .ic { transform: rotate(180deg); }
.lc-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 1100; height: 3px; } .lc-progress i { display: block; height: 100%; width: 0; background: var(--c); }
.lc-top { position: sticky; top: var(--nav-h); z-index: 20; padding: 8px 0; border-bottom: 1px solid hsl(var(--border) / .6); background: hsl(var(--background) / .92); backdrop-filter: blur(10px); }
.lc-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; padding-top: 24px; padding-bottom: 60px; } @media (max-width: 960px) { .lc-body { grid-template-columns: 1fr; } .lc-side { display: none; } }
.lc-side { position: sticky; top: calc(var(--nav-h) + 64px); align-self: start; max-height: calc(100vh - var(--nav-h) - 80px); overflow: auto; font-size: 12px; }
.lc-side ol { padding-left: 26px; margin: 8px 0; } .lc-side li { margin: 4px 0; } .lc-side a { color: hsl(var(--muted-foreground)); } .lc-side a:hover { color: var(--c); }
.lc-all { list-style: none; padding: 0; margin: 8px 0; } .lc-all a { display: block; padding: 4px 8px; border-radius: 4px; } .lc-all a.on { color: #fff; background: var(--c); }
.lc-main { font-size: 14px; line-height: 1.75; } .lc-main section { scroll-margin-top: calc(var(--nav-h) + 64px); } .lc-main h1 { font: 800 clamp(28px, 4vw, 42px)/1.15 var(--font-head); margin: 8px 0; } .lc-main h2 { font: 700 1.35em var(--font-head); margin: 1.8em 0 .6em; } .lc-main h3 { font-size: 1.08em; margin: 1.2em 0 .3em; }
.lc-pill { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--c); }
.lc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 20px; } .lc-stats .card { padding: 12px; border-radius: 12px; } .lc-stats b { display: block; font: 800 1.3em var(--font-head); color: var(--c); } .lc-stats small { font-size: .8em; color: hsl(var(--muted-foreground)); } .lc-stats em { display: block; font-size: .75em; font-style: normal; color: #10b981; }
.lc-drop::first-letter { float: left; font: 700 3.2em/.85 Georgia, serif; margin: 4px 8px 0 0; color: var(--c); }
.lc-sec { padding: 12px 0; } .lc-sec ul li::marker { color: var(--c); } .lc-tip { margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: .92em; background: rgb(245 158 11 / .09); border: 1px solid rgb(245 158 11 / .3); }
.lc-info { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; } .lc-info li { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; font-size: .9em; } .lc-info span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ic) 18%, transparent); }
.lc-steps { counter-reset: s; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (max-width: 640px) { .lc-steps { grid-template-columns: 1fr; } }
.lc-steps li { counter-increment: s; position: relative; padding: 8px 12px 8px 40px; border-radius: 8px; border: 1px solid hsl(var(--border) / .6); font-size: .92em; } .lc-steps li::before { content: counter(s); position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--c); }
.lc-box { padding: 12px 16px; border-radius: 12px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 6%, transparent); } .lc-box.alt { border-left-color: #8b5cf6; background: rgb(139 92 246 / .06); }
.lc-q { padding: 12px 0; border-bottom: 1px dashed hsl(var(--border)); } .lc-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } @media (max-width: 640px) { .lc-opts { grid-template-columns: 1fr; } }
.lc-opts button { display: flex; gap: 8px; align-items: center; padding: 8px 8px; text-align: left; font: inherit; font-size: .9em; color: inherit; cursor: pointer; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.lc-opts button span { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: hsl(var(--muted)); }
.lc-opts .sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); } .lc-opts .right { border-color: #10b981; background: rgb(16 185 129 / .12); } .lc-opts .wrong { border-color: #ef4444; background: rgb(239 68 68 / .1); }
.lc-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 40px; } .lc-nav a.card { display: grid; gap: 2px; color: inherit; border-radius: 12px; }
.lb-head { display: flex; gap: 20px; align-items: flex-start; } .lb-cover { width: 120px; height: 164px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; font-size: 48px; box-shadow: inset -10px 0 0 rgb(0 0 0 / .15), 0 14px 30px -12px rgb(0 0 0 / .5); } @media (max-width: 560px) { .lb-head { flex-direction: column; } }
.lb-chapters { display: grid; gap: 8px; } .lb-chapters details { border-radius: 12px; } .lb-chapters summary { display: flex; gap: 8px; align-items: center; cursor: pointer; list-style: none; flex-wrap: wrap; } .lb-chapters summary::-webkit-details-marker { display: none; } .lb-chapters summary small { margin-left: auto; }
.lb-quote { margin: 24px 0 0; padding: 16px 20px; border-radius: 12px; font: italic 1.1em/1.6 Georgia, serif; border-left: 4px solid var(--c); background: hsl(var(--muted) / .4); } .lb-quote cite { display: block; margin-top: 6px; font-size: .8em; font-style: normal; color: hsl(var(--muted-foreground)); }
/* Phase 3 mobile fixes */
.dhi-hero { width: 100%; }
@media (max-width: 640px) { .dhi-hero { aspect-ratio: auto; min-height: 240px; } .dhi-hero-ph .ic { width: 80px; height: 80px; } .lc-top .small.muted { display: none; } .lc-top .btn-sm { padding-inline: 8px; } }
.gh-controls > .input-icon { flex: 1 1 280px; min-width: 0; } @media (max-width: 640px) { .gh-controls > .input-icon { flex-basis: 100%; } .gh-controls .select { flex: 1 1 140px; } }

/* =====================================================================
   PHASE 4 — books & courses, reader, player, certificate, membership,
   Code Hub, GEE workspace, flood portal, AI widget, ChatWithMe, admin
   ===================================================================== */
.c-primary { color: hsl(var(--primary)); } .c-green { color: #10b981; } .c-red { color: #ef4444; } .c-rose { color: #f43f5e; } .c-amber { color: #f59e0b; }
.w-full { width: 100%; } .btn.disabled { opacity: .45; pointer-events: none; }
.stars { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: #f59e0b; } .stars b { margin-right: 4px; } .stars i { font-style: normal; color: hsl(var(--muted-foreground) / .35); } .stars i.on { color: #f59e0b; } .stars small { color: hsl(var(--muted-foreground)); margin-left: 4px; }
/* storefront */
.st-h1 { font: 800 clamp(30px, 5vw, 52px)/1.1 var(--font-serif); margin: 12px 0 8px; } .st-h1 em { font-style: italic; }
.st-serif { font-family: var(--font-serif); }
.st-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px auto 0; max-width: 900px; }
.st-stats .card { padding: 12px; display: grid; justify-items: center; gap: 2px; } .st-stats b { font: 800 24px var(--font-head); } .st-stats small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.st-sic { width: 36px; height: 36px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
@media (max-width: 720px) { .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-feat { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px; border: 1px solid #f59e0b55; }
@media (max-width: 720px) { .st-feat { grid-template-columns: 1fr; } }
.st-feat-cover { position: relative; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(135deg, #f43f5e, #f59e0b); display: grid; place-items: center; }
.st-feat-cover img { width: 100%; height: 100%; object-fit: cover; } .st-feat-body h2 { font-size: clamp(22px, 3vw, 32px); margin: 8px 0 2px; }
.st-flag { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; padding: 2px 8px; background: #f59e0b; color: #fff; }
.st-ph { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; background: linear-gradient(135deg, #f43f5e, #f59e0b); } .st-ph .ic { width: 40px; height: 40px; }
.st-btn-grad { background: linear-gradient(90deg, #f43f5e, #f59e0b); color: #fff; border: 0; } .st-btn-grad:hover { filter: brightness(1.05); color: #fff; }
.st-tag-free { background: #0ea5e91a; color: #0284c7; border-color: #0ea5e955; } .st-tag-dark { background: hsl(var(--foreground)); color: hsl(var(--background)); } .st-tag-green { background: #10b9811a; color: #059669; border-color: #10b98155; }
.st-props { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .st-prop { display: flex; gap: 8px; align-items: center; padding: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.st-prop b { display: block; font-size: 13px; } .st-prop small { font-size: 11px; } @media (max-width: 860px) { .st-props { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-tabs { display: flex; gap: 8px; justify-content: center; } .st-tab { padding: 8px 20px; font-weight: 700; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; font-family: inherit; color: inherit; }
.st-tab.active { background: linear-gradient(90deg, #f43f5e, #f59e0b); color: #fff; border-color: transparent; } .st-tab-c.active { background: linear-gradient(90deg, #f59e0b, #f97316); }
.st-filter { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin: 16px 0; background: hsl(var(--background) / .9); backdrop-filter: blur(8px); border: 1px solid hsl(var(--border)); }
.st-filter .select { width: auto; }
.st-grid { display: grid; gap: 16px; } .st-books { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .st-courses { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.st-book, .st-course { display: flex; flex-direction: column; color: inherit; overflow: hidden; }
.st-cover, .st-thumb { position: relative; display: block; overflow: hidden; background: hsl(var(--muted)); } .st-cover { aspect-ratio: 3/4; } .st-thumb { aspect-ratio: 16/9; }
.st-cover img, .st-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .st-book:hover img, .st-course:hover img { transform: scale(1.05); }
.st-spine { position: absolute; inset: 0 auto 0 0; width: 8px; background: linear-gradient(90deg, #0006, transparent); }
.st-cat { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; background: #000a; color: #fff; }
.st-badge { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 700; padding: 2px 6px; color: #fff; } .st-bl { top: auto; bottom: 6px; left: 6px; right: auto; }
.st-b-green { background: #10b981; } .st-b-sky { background: #0ea5e9; } .st-b-amber { background: linear-gradient(90deg, #f59e0b, #f97316); } .st-b-dark { background: #111827; }
.st-body { display: grid; gap: 4px; padding: 12px; flex: 1; align-content: start; } .st-body > b { font-size: 14px; line-height: 1.3; }
.st-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid hsl(var(--border) / .6); }
.st-price { font-weight: 800; } .st-price.st-free { color: #10b981; } .st-lg { font-size: 30px; } .st-sm { font-size: 16px; } .st-off { font-size: 11px; font-weight: 700; color: #fff; background: #ef4444; padding: 0 6px; }
/* book page + reader */
.bk-head { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; } @media (max-width: 760px) { .bk-head { grid-template-columns: 1fr; } .bk-cover { max-width: 220px; } }
.bk-cover { aspect-ratio: 3/4; overflow: hidden; box-shadow: 0 20px 40px -20px #0006; } .bk-cover img { width: 100%; height: 100%; object-fit: cover; }
.bk-title { font-size: clamp(26px, 4vw, 40px); margin: 8px 0 4px; }
.bk-lock { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; } @media (max-width: 960px) { .bk-lock { grid-template-columns: 1fr; } }
.bk-viewer { position: relative; height: 78vh; min-height: 420px; border: 1px solid hsl(var(--border)); background: #52525b; overflow: hidden; user-select: none; -webkit-user-select: none; }
.bk-preview { border: 2px solid #f59e0b; } .bk-full { position: fixed; inset: 0; z-index: 60; height: 100vh; }
.bk-wm { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: #fff; background: #0008; padding: 2px 8px; pointer-events: none; }
.bk-endpill { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: max-content; max-width: 92%; font-size: 12px; background: #f59e0b; color: #fff; padding: 6px 12px; pointer-events: none; }
.bk-pay { padding: 20px; position: sticky; top: calc(var(--nav-h) + 16px); border: 1px solid #f59e0b77; }
.bk-step { margin-top: 14px; padding: 12px; border: 1px dashed hsl(var(--border)); display: grid; gap: 4px; } .bk-step > small:first-child { font-weight: 800; letter-spacing: .1em; font-size: 11px; }
.bk-num { font: 800 26px var(--font-mono); color: hsl(var(--primary)); cursor: pointer; } .bk-num.sm { font-size: inherit; }
.bk-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; } .pv-frame { width: 100%; height: 100%; border: 0; }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #18181b; color: #e4e4e7; font-size: 12px; } .pv-bar i { flex: 1; }
.pv-bar button { background: #3f3f46; color: #fff; border: 0; min-width: 28px; height: 26px; cursor: pointer; font-family: inherit; } .pv-bar input { width: 46px; background: #27272a; color: #fff; border: 1px solid #52525b; text-align: center; }
.pv-pages { flex: 1; overflow: auto; padding: 12px; display: grid; justify-items: center; gap: 12px; align-content: start; }
.pv-page canvas { display: block; box-shadow: 0 8px 24px #0006; background: #fff; max-width: none; } .pv-load, .pv-end { color: #fff; padding: 20px; text-align: center; } .pv-end { background: #f59e0b; font-weight: 700; }
@media print { .bk, .lp { display: none !important; } }
/* course detail */
.cs-hero { background: linear-gradient(135deg, #0f172a, #1e293b); color: #f8fafc; padding: 32px 0 24px; }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; } @media (max-width: 960px) { .cs-hero-grid { grid-template-columns: 1fr; } }
.cs-crumb { color: #fbbf24; } .cs-title { font: 800 clamp(26px, 4vw, 40px)/1.15 var(--font-head); margin: 8px 0 8px; } .cs-sub { color: #cbd5e1; font-size: 16px; } .cs-dim { color: #94a3b8; }
.cs-buy { position: sticky; top: calc(var(--nav-h) + 12px); color: hsl(var(--foreground)); padding: 0; overflow: hidden; } @media (max-width: 960px) { .cs-buy { position: static; } }
.cs-media { aspect-ratio: 16/9; background: #000; display: grid; place-items: center; } .cs-media img, .cs-media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; } .cs-media .st-ph { background: #1e293b; }
.cs-owned { display: grid; gap: 2px; padding: 8px; background: #10b9811a; border: 1px solid #10b98155; color: #047857; font-size: 13px; } .dark .cs-owned { color: #6ee7b7; }
.cs-coupon-ok { display: flex; justify-content: space-between; padding: 8px 8px; background: #10b9811a; border: 1px solid #10b98155; font-size: 13px; } .cs-coupon-ok button { background: none; border: 0; cursor: pointer; color: inherit; }
.cs-incl { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }
.cs-content { max-width: 56rem; display: grid; gap: 16px; } .cs-h { font: 800 20px var(--font-head); margin: 0 0 8px; }
.cs-learn { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 14px; } .cs-learn li { display: flex; gap: 8px; } .cs-learn .ic { color: #10b981; flex: 0 0 auto; }
@media (max-width: 640px) { .cs-learn { grid-template-columns: 1fr; } }
.cs-sec { border: 1px solid hsl(var(--border)); margin-top: -1px; } .cs-sec summary { display: flex; justify-content: space-between; gap: 8px; padding: 12px 12px; background: hsl(var(--muted) / .5); cursor: pointer; list-style: none; }
.cs-lesson { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; border-top: 1px solid hsl(var(--border) / .5); } .cs-lesson > a, .cs-lesson > span:nth-child(2) { flex: 1; } .cs-lesson.locked { color: hsl(var(--muted-foreground)); } .cs-li { width: 18px; text-align: center; }
.cs-avatar { width: 48px; height: 48px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); border-radius: 50%; flex: 0 0 auto; } .cs-avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.cs-dist { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; } .cs-avg { font: 800 56px var(--font-head); color: #f59e0b; display: block; }
.cs-bars > div { display: flex; align-items: center; gap: 8px; font-size: 12px; } .cs-bar { flex: 1; height: 8px; background: hsl(var(--muted)); } .cs-bar i { display: block; height: 100%; background: #f59e0b; }
@media (max-width: 560px) { .cs-dist { grid-template-columns: 1fr; } }
.cs-rate { display: inline-flex; flex-direction: row-reverse; } .cs-rate input { display: none; } .cs-rate label { font-size: 30px; cursor: pointer; color: hsl(var(--muted-foreground) / .35); }
.cs-rate input:checked ~ label, .cs-rate label:hover, .cs-rate label:hover ~ label { color: #f59e0b; }
.cs-rev { display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid hsl(var(--border) / .6); } .cs-prem { border: 1px solid #f59e0b77; background: #f59e0b0d; }
/* player */
.lp-body { background: #020617; color: #e2e8f0; } .lp-body .site { background: transparent; }
.lp { min-height: 100vh; display: flex; flex-direction: column; }
.lp-top { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #0f172a; border-bottom: 1px solid #1e293b; position: sticky; top: 0; z-index: 10; }
.lp-back { color: #cbd5e1; display: flex; align-items: center; gap: 4px; font-size: 13px; } .lp-title { max-width: 40vw; }
.lp-prog { display: flex; align-items: center; gap: 8px; font-size: 12px; } .lp-prog b { color: #34d399; }
.lp-bar { display: block; width: 128px; height: 6px; background: #1e293b; } .lp-bar i { display: block; height: 100%; background: #10b981; transition: width .4s; }
.lp-cert { background: #f59e0b; color: #111; border: 0; } .lp-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; }
.lp-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; flex: 1; }
.lp-stage { padding: 16px; } .lp-player { position: relative; max-width: 1400px; aspect-ratio: 16/9; background: #000; margin: 0 auto; }
.lp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .lp-player .pv { background: #3f3f46; }
.lp-ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: #94a3b8; } .lp-ph .ic { width: 48px; height: 48px; }
.lp-text { position: absolute; inset: 0; overflow: auto; padding: 24px; background: #0f172a; line-height: 1.75; }
.lp-info { max-width: 1400px; margin: 16px auto 0; } .lp-eyebrow { font-size: 11px; letter-spacing: .12em; color: #94a3b8; } .lp-info h2 { font: 800 22px var(--font-head); margin: 4px 0 8px; }
.lp-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .lp-nav .btn-outline { color: #e2e8f0; border-color: #334155; } .lp-done { background: #10b981; color: #fff; border: 0; }
.lp-banner { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px; border: 1px solid #f59e0b77; background: #f59e0b14; font-size: 24px; } .lp-banner div { flex: 1; font-size: 14px; display: grid; }
.lp-side { background: #0f172a; border-left: 1px solid #1e293b; overflow: auto; max-height: calc(100vh - 56px); position: sticky; top: 56px; }
.lp-side-h { display: block; padding: 12px; font-size: 11px; letter-spacing: .12em; color: #94a3b8; }
.lp-side summary { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; background: #111c33; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.lp-item { display: flex; gap: 8px; padding: 8px 12px; font-size: 13px; color: #cbd5e1; border-top: 1px solid #1e293b; } .lp-item:hover { background: #1e293b; } .lp-item.active { background: hsl(var(--primary) / .15); color: #fff; }
.lp-item.locked { opacity: .5; } .lp-item i { font-style: normal; width: 16px; flex: 0 0 auto; color: #34d399; }
@media (max-width: 1024px) { .lp-main { grid-template-columns: 1fr; } .lp-toggle { display: block; } .lp-side { position: fixed; right: 0; top: 56px; bottom: 0; width: 320px; max-height: none; transform: translateX(100%); transition: transform .25s; z-index: 20; } .lp-side.open { transform: none; } .lp-prog small, .lp-bar { display: none; } }
.lp-noaccess { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
/* certificate */
.ct-body { background: #f8fafc; color: #0f172a; } .ct-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.ct-wrap { padding: 32px 16px; } .ct-card { max-width: 980px; margin: auto; background: #fff; border: 12px double #f59e0b; padding: 48px 56px; text-align: center; background-image: radial-gradient(#f59e0b1a 1px, transparent 1px); background-size: 18px 18px; }
.ct-ic { font-size: 48px; } .ct-kicker { letter-spacing: .4em; font-size: 12px; font-weight: 700; margin: 8px 0 16px; } .ct-small { color: #475569; margin: 6px 0; }
.ct-name { font: italic 600 clamp(32px, 5vw, 52px) var(--font-serif); margin: 6px 0; } .ct-course { font: 800 clamp(20px, 3vw, 30px) var(--font-head); margin: 6px 0; }
.ct-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; } .ct-row > div { border-top: 1px solid #cbd5e1; padding-top: 8px; display: grid; } .ct-row small { color: #64748b; font-size: 11px; }
.ct-sign { font: italic 600 22px var(--font-serif); color: #b45309; } .ct-verify { margin-top: 24px; font-size: 12px; color: #475569; } .ct-credit { font-size: 11px; color: #94a3b8; }
@media (max-width: 640px) { .ct-card { padding: 24px 16px; } .ct-row { grid-template-columns: 1fr; } }
@media print { @page { size: A4 landscape; margin: 0; } .ct-bar, .toasts { display: none !important; } .ct-wrap { padding: 0; } .ct-card { box-shadow: none; } }
/* membership countdown + page */
.mc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; } .mc-pill .ic { width: 14px; height: 14px; }
.mc-free { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } .mc-life { background: #f59e0b22; color: #b45309; } .mc-green { background: #10b98122; color: #047857; } .mc-amber { background: #f59e0b22; color: #b45309; } .mc-red { background: #ef444426; color: #b91c1c; } .mc-exp { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.dark .mc-green { color: #6ee7b7; } .dark .mc-amber, .dark .mc-life { color: #fcd34d; } .dark .mc-red { color: #fca5a5; }
.mb-head { text-align: center; max-width: 720px; margin: 0 auto 20px; } .mb-head h1 { font: 800 clamp(26px, 4vw, 38px) var(--font-head); margin: 8px 0; } .mb-crown { display: inline-grid; place-items: center; width: 56px; height: 56px; background: #f59e0b22; color: #f59e0b; } .mb-crown .ic { width: 28px; height: 28px; }
.mb-active { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid #10b98166; background: #10b98110; margin-bottom: 16px; }
.mb-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1100px) { .mb-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mb-plans { grid-template-columns: 1fr; } }
.mb-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; cursor: pointer; transition: transform .2s, box-shadow .2s; } .mb-plan input { position: absolute; opacity: 0; }
.mb-plan:hover { transform: translateY(-3px); } .mb-plan.on { outline: 2px solid hsl(var(--primary)); box-shadow: 0 16px 36px -18px hsl(var(--primary) / .6); }
.mb-year { border: 2px solid #a78bfa; } .mb-lifetime { border: 2px solid #fbbf24; background: linear-gradient(180deg, #fffbeb, hsl(var(--card))); } .dark .mb-lifetime { background: linear-gradient(180deg, #f59e0b14, hsl(var(--card))); }
.mb-badge { position: absolute; top: -10px; right: 12px; font-size: 11px; font-weight: 800; padding: 2px 8px; color: #fff; } .mb-badge-trial { background: #10b981; } .mb-badge-year { background: #8b5cf6; } .mb-badge-lifetime { background: #f59e0b; }
.mb-name { display: flex; align-items: center; gap: 6px; } .mb-price { font: 800 28px var(--font-head); } .mb-price small { font-size: 12px; color: hsl(var(--muted-foreground)); font-weight: 500; }
.mb-lv { align-self: start; font-size: 11px; font-weight: 800; padding: 2px 8px; border: 1px solid; } .mb-lv-full { background: linear-gradient(90deg, #fde68a, #fed7aa); color: #78350f; border-color: #fbbf24; } .mb-lv-pp { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; } .mb-lv-p { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; } .mb-lv-pre { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.mb-plan ul { list-style: none; padding: 0; margin: 0 0 auto; display: grid; gap: 4px; font-size: 13px; } .mb-plan li { display: flex; gap: 6px; } .mb-plan li .ic { color: #10b981; width: 14px; flex: 0 0 auto; }
.mb-pay { margin-top: 20px; display: grid; gap: 12px; } .mb-step1 { display: flex; gap: 12px; }
.mb-num { display: grid; gap: 2px; justify-items: center; padding: 12px; margin: 8px 0; border: 2px dashed #db277766; } .mb-num b { font: 800 30px var(--font-mono); color: #db2777; cursor: pointer; }
.mb-submit { background: linear-gradient(90deg, #f59e0b, #f97316); color: #fff; border: 0; } .mb-sub { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed hsl(var(--border)); font-size: 13px; }
.mb-trial { border: 1px solid #10b98166; background: #10b98110; text-align: center; }
/* Code Hub shell */
.ch-body { background: hsl(var(--background)); } .ch { display: flex; min-height: 100vh; }
.ch-side { width: 256px; flex: 0 0 auto; border-right: 1px solid hsl(var(--border)); background: hsl(var(--card) / .5); position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; }
.ch-brand { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 16px; color: inherit; border-bottom: 1px solid hsl(var(--border)); } .ch-brand b { display: block; font-size: 14px; } .ch-brand small { font-size: 11px; letter-spacing: .1em; color: hsl(var(--muted-foreground)); }
.ch-logo { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef, #f97316); }
.ch-nav { padding: 8px; display: grid; gap: 2px; } .ch-nav a { display: flex; gap: 8px; align-items: flex-start; padding: 8px 8px; color: inherit; border: 1px solid transparent; }
.ch-nav a b { display: block; font-size: 13px; } .ch-nav a small { font-size: 11px; color: hsl(var(--muted-foreground)); } .ch-nav a:hover { background: hsl(var(--muted) / .6); }
.ch-nav a.active { background: linear-gradient(90deg, #8b5cf61a, #d946ef12); border-color: #8b5cf644; } .ch-nav a.active .ic { color: #8b5cf6; }
.ch-foot { margin-top: auto; padding: 12px 16px; border-top: 1px solid hsl(var(--border)); display: grid; gap: 4px; }
.ch-tier { justify-self: start; font-size: 11px; font-weight: 800; padding: 2px 8px; border: 1px solid hsl(var(--border)); } .ch-tier.on { background: linear-gradient(90deg, #f59e0b, #f97316); color: #fff; border: 0; }
.ch-main { flex: 1; min-width: 0; } .ch-top { position: sticky; top: 0; z-index: 10; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: hsl(var(--background) / .9); backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); }
.ch-burger { display: none; } .ch-content { padding: 24px; max-width: 1280px; margin: 0 auto; } .ch-content.ch-bleed { padding: 0; max-width: none; }
.ch-bg { display: none; }
@media (max-width: 960px) { .ch-burger { display: inline-flex; } .ch-side { position: fixed; z-index: 50; left: 0; top: 0; width: 288px; transform: translateX(-100%); transition: transform .25s; background: hsl(var(--card)); } .ch-side.open { transform: none; } .ch-side.open + .ch-bg { display: block; position: fixed; inset: 0; background: #0006; z-index: 40; } .ch-content { padding: 16px; } }
.chd-h1 { font: 800 clamp(34px, 6vw, 56px) var(--font-head); margin: 8px 0; } .chd-card { position: relative; display: grid; gap: 6px; color: inherit; } .chd-n { position: absolute; top: 14px; right: 14px; }
.chd-ic { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; } .chd-upsell { border: 1px solid #f59e0b77; background: #f59e0b0d; }
/* snippet library + code windows */
.sl-h { display: flex; align-items: center; gap: 8px; font: 800 20px var(--font-head); margin: 0 0 4px; }
.sl-filters { display: grid; gap: 8px; margin: 12px 0; } .sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sl-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; } .sl-foot { display: flex; align-items: center; margin-top: auto; }
.sl-lv-beginner { color: #059669; border-color: #10b98155; } .sl-lv-intermediate { color: #b45309; border-color: #f59e0b55; } .sl-lv-advanced { color: #be123c; border-color: #f43f5e55; }
.sl-modal { width: min(820px, 96vw); max-height: 90vh; overflow: auto; }
.sl-box { padding: 8px 12px; border: 1px solid; font-size: 13px; } .sl-box p { margin: 4px 0 0; } .sl-box ul { margin: 4px 0 0; padding-left: 18px; }
.sl-blue { background: #3b82f60f; border-color: #3b82f644; } .sl-violet { background: #8b5cf60f; border-color: #8b5cf644; } .sl-green { background: #10b9810f; border-color: #10b98144; } .sl-amber { background: #f59e0b0f; border-color: #f59e0b44; }
.sl-sample { max-height: 8rem; overflow: auto; font-size: 11px; background: hsl(var(--muted)); padding: 8px; margin: 4px 0; }
.code-win { border: 1px solid #1f2937; background: #0d1117; overflow: hidden; } .code-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #161b22; color: #c9d1d9; font-size: 12px; }
.code-bar .btn { background: #21262d; color: #c9d1d9; border-color: #30363d; } .code-win pre { margin: 0; max-height: 600px; overflow: auto; } .code-win pre code { display: block; padding: 12px; font: 12.5px/1.6 var(--font-mono); color: #c9d1d9; background: transparent; white-space: pre; }
.code-bar .dots { display: inline-flex; gap: 4px; } .code-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; } .code-bar .dots i:nth-child(2) { background: #f59e0b; } .code-bar .dots i:nth-child(3) { background: #10b981; }
.aig { overflow: hidden; } .aig-head { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); } .aig-head small { display: block; font-size: 11px; }
.aig-ic { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.aig-lock { padding: 8px 16px; font-size: 12px; background: #f59e0b14; border-bottom: 1px solid #f59e0b44; } .aig-lock a { color: hsl(var(--primary)); font-weight: 700; }
.aig-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .aig-mode { display: grid; gap: 2px; text-align: left; padding: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; font-family: inherit; color: inherit; }
.aig-mode small { font-size: 11px; color: hsl(var(--muted-foreground)); } .aig-mode.on[data-mode="simple"] { border-color: #10b981; background: #10b98112; } .aig-mode.on[data-mode="full"] { border-color: #f59e0b; background: #f59e0b12; }
.aig-go { background: linear-gradient(90deg, #8b5cf6, #d946ef); color: #fff; border: 0; } .aig-out { padding: 0 16px 16px; display: grid; gap: 8px; }
.aig-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .aig-pkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .aig-pkgrid > div { display: grid; gap: 2px; padding: 8px; border: 1px solid hsl(var(--border)); }
.aig-inst { display: flex; justify-content: space-between; font-size: 11px; background: hsl(var(--muted)); padding: 4px 6px; } .aig-inst button { background: none; border: 0; cursor: pointer; color: inherit; }
.aig-hist { border-top: 1px solid hsl(var(--border)); }
.qbadge { font-size: 12px; font-weight: 700; padding: 2px 8px; border: 1px solid; border-radius: 999px; } .q-green { color: #059669; background: #10b98114; border-color: #10b98155; } .q-yellow { color: #b45309; background: #f59e0b14; border-color: #f59e0b55; } .q-red { color: #be123c; background: #f43f5e14; border-color: #f43f5e55; }
@media (max-width: 640px) { .aig-modes, .aig-pkgrid { grid-template-columns: 1fr; } }
/* GEE hub */
.gh2-hero { padding: 24px; background: linear-gradient(135deg, #ecfdf5, #f0fdfa, #f0f9ff); background-image: radial-gradient(#10b98122 1px, transparent 1px), linear-gradient(135deg, #ecfdf5, #f0fdfa, #f0f9ff); background-size: 24px 24px, auto; border-bottom: 1px solid hsl(var(--border)); }
.dark .gh2-hero { background: linear-gradient(135deg, #064e3b33, #0c4a6e33); } .gh2-hero h1 { font: 800 28px var(--font-head); margin: 0; }
.gh2-logo { position: relative; width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #10b981, #06b6d4); } .gh2-logo i { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; animation: pulse 2s infinite; }
.gh2-tabs { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 640px; margin-top: 18px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.gh2-tabs button { padding: 8px; font-weight: 700; border: 0; background: none; cursor: pointer; font-family: inherit; color: inherit; } .gh2-tabs .on.t-datasets { background: linear-gradient(90deg, #0ea5e9, #3b82f6); color: #fff; } .gh2-tabs .on.t-builder { background: linear-gradient(90deg, #10b981, #14b8a6); color: #fff; } .gh2-tabs .on.t-library { background: linear-gradient(90deg, #8b5cf6, #d946ef); color: #fff; }
.gh2-body { padding: 24px; } .gh2-frame { width: 100%; height: calc(100vh - 150px); min-height: 640px; border: 1px solid hsl(var(--border)); margin-top: 12px; background: hsl(var(--card)); }
.gx-filter { position: sticky; top: 64px; z-index: 5; display: grid; gap: 8px; padding: 8px 0; background: hsl(var(--background) / .92); backdrop-filter: blur(6px); }
.gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.gx-card { position: relative; display: grid; gap: 6px; text-align: left; padding: 16px 12px 12px; cursor: pointer; font-family: inherit; color: inherit; overflow: hidden; } .gx-top { position: absolute; inset: 0 0 auto; height: 4px; }
.gx-meta { font-size: 11px; color: hsl(var(--muted-foreground)); } .gx-id { font: 11px var(--font-mono); color: hsl(var(--primary)); word-break: break-all; }
.gx-modal { width: min(1000px, 96vw); max-height: 92vh; overflow: auto; } .gx-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; } .gx-cells > div { padding: 8px; background: hsl(var(--muted) / .6); display: grid; } .gx-cells small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.gx-langs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; } @media (max-width: 640px) { .gx-cells { grid-template-columns: 1fr 1fr; } }
/* GEE workspace pages */
.gw { max-width: 1200px; margin: 0 auto; display: grid; gap: 12px; font-family: 'Space Grotesk', var(--font-body); } .gw-head h1 { font: 800 24px var(--font-head); margin: 6px 0; }
.gw-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .gw-app { display: grid; gap: 6px; color: inherit; } .gw-emoji { width: 52px; height: 52px; display: grid; place-items: center; font-size: 30px; }
.gee-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .6); border-radius: 999px; }
.tier-basic { color: #059669; border-color: #10b98155; background: #10b98112; } .tier-advanced { color: #0891b2; border-color: #06b6d455; background: #06b6d412; } .tier-research { color: #7c3aed; border-color: #8b5cf655; background: #8b5cf612; } .tier-paid { color: #c2410c; border-color: #f9731655; background: #f9731612; }
.gw-filters { display: flex; flex-wrap: wrap; gap: 8px; } .gw-filters .select { width: auto; } .gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gw-script { display: grid; gap: 6px; color: inherit; } .gw-cite { display: block; margin-top: 8px; font-size: 11px; color: #7c3aed; } .gw-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; } @media (max-width: 860px) { .gw-cols { grid-template-columns: 1fr; } }
.gw-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 10px; align-items: end; } .gw-spark { width: 220px; height: 60px; }
.gw-hist { display: flex; align-items: flex-end; gap: 2px; height: 60px; } .gw-hist i { flex: 1; background: #10b981; min-height: 2px; } .gw-sw { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }
.gw-bhero { padding: 24px; color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); } .gw-bhero h1 { margin: 0; font: 800 24px var(--font-head); } .gw-bhero p { margin: 4px 0 0; opacity: .85; }
.gw-pre { font: 11.5px/1.6 var(--font-mono); white-space: pre-wrap; background: hsl(var(--muted)); padding: 8px; }
/* builder */
.gb { max-width: 1024px; margin: 0 auto; } .gb-embed .site-main { padding: 16px; } .gb-head h1 { font: 800 24px var(--font-head); margin: 0; }
.gb-steps { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; } .gb-st { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; font-weight: 700; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; color: inherit; font-family: inherit; }
.gb-st i { width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; background: hsl(var(--muted)); border-radius: 50%; font-size: 11px; } .gb-st.on { background: var(--g); color: #fff; border-color: transparent; } .gb-st.on i { background: #fff3; } .gb-st.done i { background: #10b981; color: #fff; } .gb-st:disabled { opacity: .55; cursor: default; }
.gb-card { min-height: 360px; } .gb-h { font: 800 18px var(--font-head); margin: 0 0 12px; } .gb-nav { display: flex; margin-top: 12px; }
.gb-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .gb-app { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; color: inherit; font-family: inherit; }
.gb-app.on, .gb-item.on { outline: 2px solid hsl(var(--primary)); background: hsl(var(--primary) / .06); } .gb-emo { width: 48px; height: 48px; display: grid; place-items: center; font-size: 24px; } .gb-app small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.gb-toggle { display: inline-flex; border: 1px solid hsl(var(--border)); } .gb-toggle button { padding: 8px 12px; border: 0; background: none; cursor: pointer; font-weight: 700; color: inherit; font-family: inherit; } .gb-toggle button.on { background: hsl(var(--primary)); color: #fff; }
.gb-list { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; max-height: 460px; overflow: auto; } .gb-list.two { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-height: none; }
.gb-item { display: grid; gap: 4px; text-align: left; padding: 8px 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); cursor: pointer; color: inherit; font-family: inherit; }
.gee-chip.d-Basic { color: #059669; } .gee-chip.d-Intermediate { color: #b45309; } .gee-chip.d-Advanced { color: #be123c; }
.gb-ocat { margin-bottom: 12px; } .gb-outs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 6px; }
.gb-out { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; border: 1px solid hsl(var(--border)); cursor: pointer; } .gb-out.on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .07); }
.gb-cmp { padding: 12px; border: 1px dashed hsl(var(--border)); } .gb-cmprow { display: grid; grid-template-columns: 70px repeat(auto-fit, minmax(140px, 1fr)) auto; gap: 8px; align-items: end; margin-top: 8px; }
/* flood portal */
.fp-body { background: #f8fafc; color: #0f172a; } .dark.fp-body, .dark .fp-body { background: hsl(var(--background)); color: hsl(var(--foreground)); }
.fp { display: flex; min-height: 100vh; font-family: 'Space Grotesk', var(--font-body); }
.fp-side { width: 240px; flex: 0 0 auto; background: #0f172a; color: #cbd5e1; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.fp-brand { display: flex; gap: 8px; align-items: center; color: #fff; margin-bottom: 10px; font-size: 24px; } .fp-brand b { display: block; font-size: 14px; } .fp-brand small { font-size: 11px; color: #94a3b8; }
.fp-side nav { display: grid; gap: 2px; } .fp-side nav button { text-align: left; padding: 8px 8px; border: 0; background: none; color: inherit; cursor: pointer; font-family: inherit; font-size: 13px; } .fp-side nav button.on, .fp-side nav button:hover { background: #1e293b; color: #fff; }
.fp-link { font-size: 12px; color: #94a3b8; padding: 4px 8px; } .fp-stats { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; background: #111c33; font-size: 11px; } .fp-stats b { grid-column: 1/-1; color: #94a3b8; } .fp-stats span { display: block; font: 800 18px var(--font-head); color: #fff; }
.fp-main { flex: 1; min-width: 0; } .fp-top { position: sticky; top: 0; z-index: 5; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #fff; border-bottom: 1px solid #e2e8f0; } .dark .fp-top { background: hsl(var(--card)); border-color: hsl(var(--border)); }
.fp-msel { display: none; width: auto; } .fp-content { padding: 20px; max-width: 1200px; }
@media (max-width: 860px) { .fp-side { display: none; } .fp-msel { display: block; } }
.fp-hero { padding: 24px; color: #fff; background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed); } .fp-hero h1 { font: 800 clamp(24px, 4vw, 34px) var(--font-head); margin: 8px 0; } .fp-hero .badge { background: #fff3; color: #fff; border-color: #fff5; } .fp-hero .btn-outline { color: #fff; border-color: #fff8; }
.fp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 12px 0; } .fp-rc { display: grid; gap: 2px; padding: 12px; } .fp-rc b { font: 800 22px var(--font-head); } .fp-rc small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.fp-h { font: 800 18px var(--font-head); margin: 16px 0 8px; } .fp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.fp-cat { display: grid; gap: 6px; text-align: left; padding: 12px; cursor: pointer; font-family: inherit; color: inherit; } .fp-cat.on { outline: 2px solid #2563eb; } .fp-cati { width: 42px; height: 42px; display: grid; place-items: center; font-size: 20px; }
.fp-diff { font-size: 11px; font-weight: 700; padding: 0 6px; border: 1px solid; } .fp-diff.d-Basic { color: #059669; } .fp-diff.d-Intermediate { color: #b45309; } .fp-diff.d-Advanced { color: #be123c; }
.fp-m { margin-top: 10px; overflow: hidden; } .fp-mh { position: relative; display: grid; gap: 6px; width: 100%; text-align: left; padding: 12px 40px 12px 12px; background: none; border: 0; cursor: pointer; font-family: inherit; color: inherit; } .fp-mh i { position: absolute; right: 14px; top: 14px; font-style: normal; }
.fp-mb { padding: 0 12px 12px; } .fp-code pre { max-height: 350px; } .fp-code.big pre { max-height: 600px; }
.fp-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .fp-steps span { padding: 6px 12px; font-size: 12px; font-weight: 700; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); } .fp-steps .on { background: #2563eb; color: #fff; } .fp-steps .done { color: #059669; }
.fp-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 10px; } @media (max-width: 960px) { .fp-two { grid-template-columns: 1fr; } }
.fp-bar { display: grid; grid-template-columns: 130px 1fr 110px; gap: 8px; align-items: center; font-size: 12px; margin-top: 8px; } .fp-bar i { height: 10px; background: linear-gradient(90deg, #3b82f6, #6366f1); }
.fp-month { display: flex; gap: 6px; align-items: flex-end; height: 130px; margin: 8px 0; } .fp-month > div { flex: 1; display: grid; justify-items: center; } .fp-month span { display: flex; gap: 2px; align-items: flex-end; height: 110px; } .fp-month i { width: 7px; } .fp-month .f { background: #2563eb; } .fp-month .r { background: #06b6d4; } .fp-month small { font-size: 11px; }
.fp-risk { padding: 8px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); display: grid; } .fp-dist { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid hsl(var(--border) / .6); } .fp-dist small { grid-column: 1; } .fp-dist .fp-diff { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.fp-map { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #0f172a, #1e3a8a); overflow: hidden; } .fp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fp-mapt { position: absolute; top: 10px; left: 10px; color: #fff; font-weight: 700; font-size: 13px; background: #0008; padding: 4px 8px; } .fp-mapc { position: absolute; left: 10px; bottom: 8px; color: #cbd5e1; font-size: 11px; }
.fp-mapov { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; color: #fff; background: #0006; text-align: center; } .fp-paper { display: grid; gap: 4px; margin-top: 8px; }
/* AI widget */
.aiw { position: fixed; right: 24px; bottom: 24px; z-index: 70; }
.aiw-orb { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); box-shadow: 0 0 20px hsl(var(--primary) / .4), 0 0 40px hsl(var(--primary) / .2); transition: transform .2s; }
.aiw-orb:hover { transform: scale(1.1); } .aiw-orb span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .25s, opacity .25s; } .aiw-o2 { opacity: 0; transform: rotate(-90deg) scale(.9); } .aiw.open .aiw-o1 { opacity: 0; transform: rotate(90deg) scale(.9); } .aiw.open .aiw-o2 { opacity: 1; transform: none; }
.aiw-panel { position: absolute; right: 0; bottom: 72px; width: 400px; max-width: calc(100vw - 2rem); height: 540px; max-height: 75vh; display: flex; flex-direction: column; background: hsl(var(--card) / .96); backdrop-filter: blur(12px); border: 1px solid hsl(var(--border)); box-shadow: 0 30px 60px -20px #0005; }
.aiw-head { display: flex; gap: 8px; align-items: center; padding: 12px 12px; border-bottom: 1px solid hsl(var(--border)); } .aiw-head b { display: block; font-size: 14px; } .aiw-head small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.aiw-ic { width: 34px; height: 34px; display: grid; place-items: center; color: hsl(var(--primary)); background: hsl(var(--primary) / .12); } .aiw-mode { font-size: 11px; background: none; border: 1px solid hsl(var(--border)); cursor: pointer; color: inherit; padding: 2px 8px; }
.aiw-body { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.aiw-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .aiw-personas button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); cursor: pointer; color: inherit; font-family: inherit; }
.aiw-personas small { font-size: 11px; color: hsl(var(--muted-foreground)); } .aiw-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .aiw-quick button { font-size: 11px; text-align: left; padding: 6px 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); cursor: pointer; color: inherit; font-family: inherit; }
.aiw-msg { display: flex; gap: 8px; align-items: flex-start; } .aiw-msg.user { flex-direction: row-reverse; } .aiw-av { font-size: 16px; }
.aiw-b { max-width: 85%; padding: 8px 12px; font-size: 13px; line-height: 1.6; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); overflow-wrap: anywhere; } .aiw-msg.user .aiw-b { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.aiw-b b { color: hsl(var(--primary)); } .aiw-msg.user .aiw-b b { color: inherit; } .aiw-b ul, .aiw-b ol { margin: 4px 0; padding-left: 18px; } .aiw-b h3, .aiw-b h4 { margin: 6px 0 4px; font-size: 14px; }
.aiw-dots { display: inline-flex; gap: 2px; } .aiw-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: aiwb 1s infinite; } .aiw-dots i:nth-child(2) { animation-delay: .15s; } .aiw-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aiwb { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
.aiw-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid hsl(var(--border)); } .aiw-input input { flex: 1; min-width: 0; padding: 8px 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: inherit; font-family: inherit; }
.aiw-mic, .aiw-send { width: 36px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); cursor: pointer; color: inherit; display: grid; place-items: center; } .aiw-send { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: 0; } .aiw-send:disabled { opacity: .5; } .aiw-mic.on { color: #ef4444; }
.ai-pre { position: relative; background: #0d1117; color: #c9d1d9; padding: 8px; overflow: auto; font: 12px var(--font-mono); } .ai-copy { position: absolute; top: 4px; right: 4px; background: #21262d; color: #c9d1d9; border: 0; cursor: pointer; }
@media (max-width: 480px) { .aiw { right: 12px; bottom: 12px; } .aiw-panel { position: fixed; right: 8px; left: 8px; bottom: 76px; width: auto; } }
@media print { .aiw { display: none; } }
/* ChatWithMe */
.cw-body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-body); } .cw { display: flex; height: 100vh; }
.cw-side { width: 288px; flex: 0 0 auto; display: flex; flex-direction: column; padding: 12px; border-right: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.cw-list { flex: 1; overflow: auto; margin: 8px 0; } .cw-g { display: block; margin: 8px 4px 4px; } .cw-item { display: flex; align-items: center; gap: 4px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.cw-item:hover, .cw-item.on { background: hsl(var(--muted)); } .cw-item span { flex: 1; } .cw-item button { opacity: 0; background: none; border: 0; cursor: pointer; color: inherit; } .cw-item:hover button { opacity: .7; }
.cw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cw-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; }
.cw-burger { display: none; } .cw-temp { padding: 6px 12px; font-size: 12px; background: #f59e0b1a; text-align: center; }
.cw-msgs { flex: 1; overflow: auto; padding: 20px; } .cw-msgs > * { max-width: 48rem; margin-left: auto; margin-right: auto; }
.cw-empty { text-align: center; padding: 60px 0; } .cw-empty h1 { font: 800 32px var(--font-head); margin: 8px 0; } .cw-logo { display: inline-grid; place-items: center; width: 60px; height: 60px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.cw-msg { display: flex; gap: 12px; margin-bottom: 18px; } .cw-av { font-size: 18px; } .cw-bd { flex: 1; min-width: 0; } .cw-who { font-weight: 700; font-size: 12px; color: hsl(var(--muted-foreground)); }
.cw-txt { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; } .cw-txt pre { margin: 8px 0; } .cw-acts { display: flex; gap: 4px; opacity: .6; } .cw-acts button { background: none; border: 1px solid transparent; cursor: pointer; color: inherit; padding: 2px 6px; } .cw-acts button.on { border-color: hsl(var(--primary)); }
.cw-cursor { display: inline-block; width: 7px; height: 16px; background: currentColor; vertical-align: -3px; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.cw-compose { display: flex; gap: 8px; padding: 12px; max-width: 48rem; width: 100%; margin: 0 auto; } .cw-compose textarea { flex: 1; resize: none; max-height: 200px; }
@media (max-width: 860px) { .cw-side { position: fixed; z-index: 30; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .25s; } .cw-side.open { transform: none; } .cw-burger { display: inline-flex; } }
/* admin: courses */
.cm-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; } .cm-wrap.editing { grid-template-columns: 360px minmax(0, 1fr); } @media (max-width: 1100px) { .cm-wrap.editing { grid-template-columns: 1fr; } }
.cm-list { max-height: calc(100vh - 220px); overflow: auto; } .cm-row { display: flex; gap: 8px; align-items: center; padding: 8px; border-top: 1px solid hsl(var(--border) / .6); } .cm-row > a { color: inherit; } .cm-row.active { background: hsl(var(--primary) / .07); }
.cm-thumb { width: 80px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; background: hsl(var(--muted)); overflow: hidden; } .cm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cm-lesson { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px dashed hsl(var(--border)); } .cm-more { width: 100%; }
.cs-arow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px dashed hsl(var(--border)); } .cs-unassigned { padding: 8px; border: 1px dashed hsl(var(--border)); }
.ing-targets { display: grid; gap: 6px; } .ing-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 760px) { .ing-fields { grid-template-columns: 1fr; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* Phase 4 mobile fixes */
.gh2-ttl { min-width: 200px; }
@media (max-width: 640px) {
  .ch-top { gap: 4px; padding: 0 8px; }
  .ch-top .ch-title { display: none; }
  .ch-top .ch-up span { display: none; }
  .gh2-hero { padding: 16px; } .gh2-hero h1 { font-size: 20px; }
  .gh2-hero .btn { width: 100%; justify-content: center; }
}
[data-vote].on { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); background: hsl(var(--primary) / .08); }

/* ===================== Phase 5 — private life OS ===================== */

/* --- digital --- */
/* =====================================================================
   Phase 5 — Digital Manager hub + shared nav (prefix dm-hub- / dm-nav)
   (the older .dm-* "my domain" classes are untouched; all new selectors
   use .dm-hub-* or .dm-nav*)
   ===================================================================== */

/* ---------- nav partial (DigitalManagerNav) ---------- */
.dm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.dm-nav .ic { width: 14px; height: 14px; }
.dm-nav-home { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 600; color: #7C3AED; border: 2px solid #7C3AED; background: hsl(var(--background)); text-decoration: none; transition: background .2s; }
.dm-nav-home:hover { background: rgb(124 58 237 / .08); }
.dm-nav-sep { display: inline-flex; color: hsl(var(--muted-foreground)); }
.dm-nav-link { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; font-size: 11px; font-weight: 500; color: var(--dm-c); text-decoration: none; transition: background .2s; }
.dm-nav-link .ic { width: 12px; height: 12px; }
.dm-nav-link:hover { background: hsl(var(--muted)); }
.dm-nav-link.is-active { background: var(--dm-c); color: #fff; }
.dm-nav-link.is-active:hover { filter: brightness(1.05); background: var(--dm-c); }
@media (max-width: 639px) { .dm-nav-link span { display: none; } }

/* ---------- hub page ---------- */
.dm-hub { display: grid; gap: 32px; animation: fadeup .35s ease-out; }
.dm-hub-head { position: relative; overflow: hidden; border: 1px solid hsl(var(--border) / .5); padding: 40px; background: linear-gradient(135deg, rgba(22,163,74,.06) 0%, rgba(124,58,237,.06) 33%, rgba(231,76,60,.06) 66%, rgba(255,99,71,.06) 100%); }
.dm-hub-stripes { position: absolute; top: 0; left: 0; right: 0; height: 4px; display: flex; }
.dm-hub-stripes i { flex: 1; }
.dm-hub-head-in { position: relative; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dm-hub-logo { position: relative; }
.dm-hub-glow { position: absolute; inset: 0; filter: blur(18px); opacity: .3; background: linear-gradient(135deg, #16A34A, #7C3AED, #E74C3C, #FF6347); }
.dm-hub-logo-box { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .5); }
.dm-hub-logo-box .ic { width: 32px; height: 32px; }
.dm-hub-h1 { font: 700 clamp(28px, 4vw, 36px)/1.1 var(--font-head); letter-spacing: -.02em; margin: 0; }
.dm-hub-sub { margin: 4px 0 0; color: hsl(var(--muted-foreground)); font-size: 14px; }
.dm-hub-live { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.dm-hub-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; animation: pulse 2s infinite; }

.dm-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dm-hub-card { position: relative; display: block; overflow: hidden; text-align: left; color: inherit; text-decoration: none; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); transition: transform .3s, box-shadow .3s; animation: fadeup .45s ease-out backwards; }
.dm-hub-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgb(0 0 0 / .35); }
.dm-hub-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dm-c); transition: width .3s; }
.dm-hub-card:hover .dm-hub-bar { width: 6px; }
.dm-hub-hover { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--dm-c) 10%, transparent), transparent 70%); }
.dm-hub-card:hover .dm-hub-hover { opacity: 1; }
.dm-hub-body { position: relative; padding: 24px 24px 24px 24px; display: flex; flex-direction: column; height: 100%; }
.dm-hub-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.dm-hub-ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--dm-c); background: color-mix(in srgb, var(--dm-c) 8%, transparent); transition: transform .3s; }
.dm-hub-ic .ic { width: 24px; height: 24px; }
.dm-hub-card:hover .dm-hub-ic { transform: scale(1.1); }
.dm-hub-go { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--dm-c); background: color-mix(in srgb, var(--dm-c) 6%, transparent); opacity: 0; transition: opacity .3s; }
.dm-hub-go .ic { width: 16px; height: 16px; }
.dm-hub-card:hover .dm-hub-go { opacity: 1; }
.dm-hub-title { font: 700 18px/1.25 var(--font-head); letter-spacing: -.02em; margin: 0; }
.dm-hub-subtitle { margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--dm-c); }
.dm-hub-desc { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: hsl(var(--muted-foreground)); flex: 1; }
.dm-hub-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dm-hub-stat { display: inline-flex; flex-direction: column; min-width: 84px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--dm-c) 25%, transparent); background: color-mix(in srgb, var(--dm-c) 5%, transparent); }
.dm-hub-stat b { font: 800 16px/1.15 var(--font-head); color: var(--dm-c); font-variant-numeric: tabular-nums; }
.dm-hub-stat small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.dm-hub-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dm-hub-feat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--muted) / .3); color: hsl(var(--muted-foreground)); }
.dm-hub-feat .ic { width: 12px; height: 12px; color: var(--dm-c); }
.dm-hub-open { align-self: flex-start; margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--dm-c); opacity: .8; transition: opacity .3s; }
.dm-hub-open .ic { width: 14px; height: 14px; transition: transform .3s; }
.dm-hub-card:hover .dm-hub-open { opacity: 1; }
.dm-hub-card:hover .dm-hub-open .ic { transform: translateX(2px); }
@media (max-width: 767px) {
  .dm-hub-grid { grid-template-columns: 1fr; }
  .dm-hub-head { padding: 24px 20px; }
  .dm-hub-live { margin-left: 0; }
}

/* --- money --- */
/* =====================================================================
   Phase 5 — My Money (/admin/money) · every selector prefixed .mn
   ===================================================================== */
.mn { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mn p { margin: 0; }
.mn-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mn-gap3 { gap: 12px; } .mn-gap6 { gap: 24px; }
.mn-block { display: block; } .mn-m0 { margin: 0; } .mn-nowrap { white-space: nowrap; } .mn-prewrap { white-space: pre-wrap; }
.mn-ml-auto { margin-left: auto; } .mn-mt05 { margin-top: 2px; } .mn-mt1 { margin-top: 4px; } .mn-pr16 { padding-right: 56px; }
.mn-py4 { padding-block: 16px; } .mn-py8 { padding-block: 32px; } .mn-fw4 { font-weight: 400; }
.mn-t9 { font-size: 11px; } .mn-t10 { font-size: 11px; line-height: 1.3; }
.mn-o60 { opacity: .6; } .mn-o30 { opacity: .3; }
.mn-v18 { font-size: 18px; font-weight: 700; line-height: 1.3; } .mn-v20 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.mn-v24 { font-size: 24px; font-weight: 700; line-height: 1.3; } .mn-v30 { font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 4px !important; }
.mn .ic.mn-i3 { width: 12px; height: 12px; } .mn .ic.mn-i35 { width: 14px; height: 14px; } .mn .ic.mn-i4 { width: 16px; height: 16px; }
.mn .ic.mn-i5 { width: 20px; height: 20px; } .mn .ic.mn-i6 { width: 24px; height: 24px; } .mn .ic.mn-i8 { width: 32px; height: 32px; } .mn .ic.mn-i10 { width: 40px; height: 40px; }
.mn .ic.mn-flip { transform: scaleY(-1); }
.mn-c-em { color: #10b981; } .mn-c-em6 { color: #059669; } .mn-c-red { color: #ef4444; } .mn-c-red4 { color: #f87171; } .mn-c-am { color: #f59e0b; } .mn-c-am6 { color: #d97706; }
.mn-c-vi { color: #8b5cf6; } .mn-c-rose { color: #f43f5e; } .mn-c-or { color: #f97316; } .mn-c-bl { color: #3b82f6; } .mn-c-in { color: #6366f1; }
.mn-c-pu { color: #a855f7; } .mn-c-pu6 { color: #9333ea; } .mn-c-pink { color: #ec4899; } .mn-c-teal { color: #14b8a6; }
.dark .mn-c-am6 { color: #fbbf24; } .dark .mn-c-em6 { color: #34d399; } .dark .mn-c-pu6 { color: #c084fc; }

/* surfaces */
.mn-card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border) / .5); position: relative; overflow: hidden; min-width: 0; }
.mn-p4 { padding: 16px; } .mn-p5 { padding: 20px; }
.mn-rounded { border-radius: 12px; }
.mn-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.mn-bar-thin { height: 2px; }
.mn-lift { transition: transform .2s, border-color .2s; } .mn-lift:hover { transform: translateY(-2px); }
.mn-icbox { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mn-ib7 { width: 28px; height: 28px; } .mn-ib9 { width: 36px; height: 36px; } .mn-ib10 { width: 40px; height: 40px; border-radius: 12px; } .mn-ib12 { width: 48px; height: 48px; border-radius: 12px; }
.mn-bg-muted { background: hsl(var(--muted)); }
.mn-h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mn-h3b { font-size: 16px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.mn-h4 { font-size: 12px; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.mn-empty { border: 1px dashed hsl(var(--border)); padding: 32px 16px; text-align: center; color: hsl(var(--muted-foreground)); }
.mn-empty .ic { display: block; margin: 0 auto 8px; opacity: .3; }
.mn-nodata { display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); font-size: 13px; text-align: center; }
.mn-col { flex-direction: column; gap: 6px; }
.mn-mini { padding: 8px; background: hsl(var(--muted) / .3); border: 1px solid hsl(var(--border) / .3); }
.mn-btn { background: var(--mn-b, hsl(var(--primary))); color: #fff; border-color: transparent; }
.mn-btn:hover { color: #fff; filter: brightness(.92); }
.mn-sq6 { width: 24px !important; height: 24px; } .mn-sq7 { width: 28px !important; height: 28px; } .mn-sq8 { width: 32px !important; height: 32px; }
.mn-h7 { height: 28px; font-size: 12px; } .mn-h8 { height: 32px; font-size: 12px; }
.mn-b9 { font-size: 11px; padding: 0 4px; } .mn-b10 { font-size: 11px; padding: 0 6px; gap: 2px; }
.mn-bsec { background: hsl(var(--secondary)); border-color: transparent; color: hsl(var(--secondary-foreground)); }
.mn-solid-red { background: hsl(var(--destructive)); color: #fff; border-color: transparent; }

/* layout grids */
.mn-g2, .mn-g3, .mn-g3c, .mn-g4 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.mn-g4 { gap: 12px; } .mn-g3c { gap: 12px; }
.mn-g4.mn-g4-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mn-g2x { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mn-g3x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .mn-g3c { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-g2.mn-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .mn-g4, .mn-g4.mn-g4-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mn-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-g3 .mn-span2 { grid-column: span 2; } .mn-g3c { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mn-g2 > .mn-card, .mn-g3 > .mn-card { align-self: start; }
.mn-rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* digital manager nav + header + tabs */
.mn-dmnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mn-dm-home { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 600; border: 2px solid #7c3aed; color: #7c3aed; border-radius: 8px; }
.mn-dm-home .ic { width: 14px; height: 14px; }
.mn .ic.mn-dm-sep { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.mn-dm-link { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; font-size: 11px; font-weight: 600; border-radius: 4px; }
.mn-dm-link:not(.active):hover { background: hsl(var(--muted) / .6); }
.mn-dm-link .ic { width: 12px; height: 12px; }
.mn-hero { padding: 20px; background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(5,150,105,.04)), hsl(var(--card)); }
.mn-hero-in { display: flex; align-items: center; gap: 16px; }
.mn-hero-ic { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); border-radius: 12px; color: #10b981; }
.mn-hero-ic .ic { width: 24px; height: 24px; }
.mn-hero h1 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
@media (min-width: 768px) { .mn-hero { padding: 24px; } .mn-hero h1 { font-size: 24px; } }
.mn-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .5); margin-bottom: 16px; }
.mn-tabs .mn-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin: 0; font-size: 12px; font-weight: 500; border: 1px solid transparent; border-radius: 4px; color: hsl(var(--muted-foreground)); }
.mn-tabs .mn-tab .ic { width: 14px; height: 14px; }
.mn-tabs .mn-tab:hover { color: hsl(var(--foreground)); }
.mn-tabs .mn-tab.active { color: var(--mn-tc); border-color: var(--mn-tc); background: hsl(var(--background)); box-shadow: 0 1px 2px rgb(0 0 0 / .08); font-weight: 600; }
@media (max-width: 639px) { .mn-tabs .mn-tab span { display: none; } .mn-tabs .mn-tab { padding: 8px 8px; } }

/* overview */
.mn-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .mn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mn-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mn-kpi { padding: 12px; }
.mn-kpi .mn-icbox { margin-bottom: 6px; }
.mn-kpi-bg { position: absolute; right: -12px; bottom: -12px; opacity: .04; transition: opacity .2s; pointer-events: none; }
.mn-kpi-bg .ic { width: 80px; height: 80px; }
.mn-kpi:hover .mn-kpi-bg { opacity: .08; }
.mn-kpi-v { font-size: 18px; font-weight: 700; margin-top: 2px !important; overflow-wrap: anywhere; }
.mn-chg { display: flex; align-items: center; gap: 2px; font-size: 11px; margin-top: 2px; }
.mn-up { color: #10b981; } .mn-down { color: #ef4444; }
.mn-gauge { flex-shrink: 0; color: hsl(var(--foreground)); }
.mn-health { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.mn-health > div { display: flex; align-items: center; gap: 6px; }
.mn-ai-out { font-size: 12px; line-height: 1.6; white-space: pre-wrap; max-height: 260px; overflow-y: auto; color: hsl(var(--muted-foreground)); }
.mn-ai-out.err { color: #d97706; }
.mn-ai-empty { font-size: 12px; color: hsl(var(--muted-foreground)); opacity: .7; padding: 16px 0; text-align: center; }
.mn-ai-empty .ic { display: block; margin: 0 auto 8px; opacity: .3; }
.mn-visits { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.mn-visit { display: flex; justify-content: space-between; font-size: 11px; padding: 4px 8px; background: rgba(244,63,94,.05); border: 1px solid rgba(244,63,94,.1); }
.mn-catrow { display: flex; align-items: center; gap: 8px; }
.mn-pctb { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; }
.mn-track { height: 6px; margin-top: 2px; background: hsl(var(--border) / .3); border-radius: 999px; overflow: hidden; display: block; }
.mn-track > i { display: block; height: 100%; border-radius: 999px; transition: width .5s; }
.mn-track-1 { height: 4px; }
.mn-subtile { border: 1px solid hsl(var(--border) / .3); padding: 8px; position: relative; overflow: hidden; }
.mn-subtile-blob { position: absolute; right: -8px; bottom: -8px; width: 48px; height: 48px; border-radius: 50%; opacity: .05; }
.mn-chart { position: relative; width: 100%; }
.mn-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.mn-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.mn-legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mn-legend i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.mn-legend b { font-weight: 500; white-space: nowrap; }
.mn-accrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid hsl(var(--border) / .3); border-radius: 8px; transition: background .2s; }
.mn-accrow:hover, .mn-recent:hover { background: hsl(var(--accent) / .08); }
.mn-recent { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid hsl(var(--border) / .2); }
.mn-recent:last-of-type { border-bottom: 0; }

/* category explorer */
.mn-month-in { height: 32px; width: auto; padding: 0 8px; font-size: 12px; }
.mn-w40 { width: 160px; height: 40px; font-size: 13px; }
.mn-pill { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: 999px; border: 1px solid hsl(var(--border) / .5); color: hsl(var(--muted-foreground)); background: transparent; cursor: pointer; font-family: inherit; transition: all .2s; }
.mn-pill:hover { color: hsl(var(--foreground)); }
.mn-pill-expense { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.5); color: #dc2626; }
.mn-pill-income, .mn-pill.mn-pill-on { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.5); color: #059669; }
.dark .mn-pill-expense { color: #f87171; } .dark .mn-pill-income, .dark .mn-pill.mn-pill-on { color: #34d399; }
.mn-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.mn-crumb a:hover { color: hsl(var(--foreground)); }
.mn-drill { display: flex; align-items: center; gap: 12px; padding: 12px; color: inherit; text-align: left; transition: border-color .2s; }
.mn-drill:hover { border-color: hsl(var(--border)); color: inherit; }
.mn-drill > .mn-icbox { margin-left: 8px; }
.mn-drill .mn-track { margin-top: 4px; }
.mn-lbar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.mn .ic.mn-go { flex-shrink: 0; transition: transform .2s; }
.mn-drill:hover .mn-go { transform: translateX(2px); }
.mn-uncat { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed hsl(var(--border) / .5); background: hsl(var(--card) / .5); }
.mn-sub-head { padding: 12px; border-bottom: 1px solid hsl(var(--border) / .5); display: flex; align-items: center; gap: 8px; }
.mn-sub-list { max-height: 384px; overflow-y: auto; }
.mn-sub-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid hsl(var(--border) / .2); }
.mn-sub-row:hover { background: hsl(var(--accent) / .08); }

/* forms */
.mn-form { border: 2px solid color-mix(in srgb, var(--mn-fc, #10b981) 30%, transparent); display: flex; flex-direction: column; gap: 12px; }
.mn-form > .mb-4, .mn-form > .mb-2 { margin-bottom: 0; }
.mn-form:not([data-mode="edit"]) [data-mn-when="edit"], .mn-form[data-mode="edit"] [data-mn-when="new"] { display: none; }
.mn-fg2, .mn-fg3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mn-fg3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-fg3 .mn-span2 { grid-column: span 2; } .mn-fg3 .mn-span3 { grid-column: 1 / -1; } }
@media (min-width: 768px) { .mn-fg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mn-fg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mn-flabel { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); margin-bottom: 4px; }
.mn-form .select.input { padding-right: 28px; }

/* accounts / goals / bills / budgets */
.mn-actions { display: flex; gap: 4px; flex-shrink: 0; transition: opacity .2s; }
.mn-hovgrp .mn-actions { opacity: 0; }
.mn-hovgrp:hover .mn-actions, .mn-hovgrp:focus-within .mn-actions { opacity: 1; }
@media (hover: none) { .mn-hovgrp .mn-actions { opacity: 1; } }
.mn-prog { height: 6px; background: hsl(var(--primary) / .2); overflow: hidden; border-radius: 999px; }
.mn-prog > i { display: block; height: 100%; background: hsl(var(--primary)); transition: width .4s; }
.mn-prog-2 { height: 8px; }
.mn-prog-red > i { background: #ef4444; }
.mn-bd-red { border-color: rgba(239,68,68,.5); }
.mn-done { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #10b981; }
.mn-bill-due { border-color: rgba(245,158,11,.5); background: linear-gradient(rgba(245,158,11,.05), rgba(245,158,11,.05)), hsl(var(--card)); }

/* transactions */
.mn-ribbon { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-mbtn { position: relative; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; border: 2px solid hsl(var(--border) / .4); color: hsl(var(--muted-foreground)); transition: all .2s; line-height: 1.3; }
.mn-mbtn:hover { background: hsl(var(--accent) / .08); border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.mn-mbtn.active { border-color: #10b981; background: rgba(16,185,129,.1); color: #059669; box-shadow: 0 1px 3px rgba(16,185,129,.2); }
.mn-mbtn.current { border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.05); color: #d97706; }
.dark .mn-mbtn.active { color: #34d399; } .dark .mn-mbtn.current { color: #fbbf24; }
.mn-pulse { position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; animation: mnPulse 2s infinite; }
@keyframes mnPulse { 50% { opacity: .5; } }
.mn-banner { border-radius: 12px; padding: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: hsl(var(--accent) / .08); border: 1px solid hsl(var(--border) / .5); }
.mn-banner.current { background: linear-gradient(90deg, rgba(16,185,129,.1), rgba(245,158,11,.05), rgba(16,185,129,.1)); border: 2px solid rgba(16,185,129,.3); }
.mn-banner-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.mn-banner.current .mn-banner-ic { background: rgba(16,185,129,.2); color: #10b981; }
.mn-curbadge { display: inline-flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; background: rgba(251,191,36,.2); color: #d97706; border: 1px solid rgba(251,191,36,.3); border-radius: 4px; }
.dark .mn-curbadge { color: #fbbf24; }
.mn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mn-search { position: relative; }
.mn-search .ic { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.mn-search .input { height: 32px; padding-left: 30px; width: 160px; font-size: 12px; }
.mn-typebtn { flex: 1; padding: 8px; font-size: 14px; font-weight: 700; border-radius: 8px; border: 2px solid hsl(var(--border) / .5); background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; font-family: inherit; transition: all .2s; }
.mn-typebtn.on[data-mn-ttype="income"] { border-color: #10b981; background: rgba(16,185,129,.1); color: #059669; }
.mn-typebtn.on[data-mn-ttype="expense"] { border-color: #ef4444; background: rgba(239,68,68,.1); color: #dc2626; }
.mn-cbtn.on { color: var(--mn-cc); border-color: var(--mn-cc); background: color-mix(in srgb, var(--mn-cc) 7%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.mn-ais { position: relative; }
.mn-ais-box { position: relative; }
.mn .ic.mn-ais-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.mn-ais-box .input { padding-left: 38px; padding-right: 96px; border-color: rgba(245,158,11,.3); }
.mn-ais-box .input:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.mn-ais-spin { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #f59e0b; display: flex; }
.mn-ais-go { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: #d97706; font-size: 11px; }
.mn-spin { animation: mnSpin 1s linear infinite; }
@keyframes mnSpin { to { transform: rotate(360deg); } }
.mn-ais-res { position: absolute; z-index: 20; left: 0; right: 0; margin-top: 4px; background: hsl(var(--card)); border: 2px solid rgba(245,158,11,.3); border-radius: 12px; box-shadow: 0 12px 30px -8px rgb(0 0 0 / .25); max-height: 256px; overflow-y: auto; }
.mn-ais-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-bottom: 1px solid hsl(var(--border) / .3); }
.mn-ais-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-bottom: 1px solid hsl(var(--border) / .1); background: transparent; color: inherit; text-align: left; cursor: pointer; font-family: inherit; min-width: 0; }
.mn-ais-item:hover { background: hsl(var(--accent) / .12); }
.mn-ais-dot { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mn-ais-dot i { width: 12px; height: 12px; border-radius: 50%; }
.mn-subtog { font-size: 11px; color: #f59e0b; background: none; border: 0; cursor: pointer; font-family: inherit; }
.mn .select.mn-subsel { border: 2px solid rgba(245,158,11,.3); background-color: rgba(245,158,11,.05); font-weight: 500; }
.mn-qps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; }
.mn-qp { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid hsl(var(--border) / .4); color: hsl(var(--muted-foreground)); background: transparent; cursor: pointer; font-family: inherit; }
.mn-qp:hover { background: hsl(var(--accent) / .1); }
.mn-qp.on { border-color: #f59e0b; background: rgba(245,158,11,.15); color: #b45309; font-weight: 700; }
.dark .mn-qp.on { color: #fbbf24; }
.mn-selsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: hsl(var(--accent) / .08); border-radius: 8px; font-size: 12px; }
.mn-selb { display: inline-flex; padding: 2px 8px; font-size: 11px; font-weight: 600; border: 1px solid; border-radius: 4px; }
.mn-txlist { overflow: visible; }
.mn-txhead { padding: 12px; border-bottom: 1px solid hsl(var(--border) / .5); }
.mn-dayhead { position: sticky; top: 56px; z-index: 5; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: hsl(var(--muted)); border-left: 4px solid transparent; }
.mn-dayhead.today { background: linear-gradient(90deg, rgba(245,158,11,.14), rgba(16,185,129,.12)), hsl(var(--card)); border-left-color: #fbbf24; }
.mn-txrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 16px; margin-left: 16px; border-bottom: 1px solid hsl(var(--border) / .2); transition: background .2s; min-width: 0; }
.mn-txrow:hover { background: hsl(var(--accent) / .08); }
.mn-txrow[hidden], .mn-day[hidden] { display: none; }
@media (max-width: 639px) { .mn-txrow { margin-left: 0; padding: 8px 12px; gap: 8px; } .mn-txrow .mn-icbox { display: none; } .mn-dayhead { padding: 8px 12px; } .mn-search .input { width: 130px; } }

/* debts */
.mn-dchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; border-radius: 8px; border: 2px solid hsl(var(--border) / .4); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
.mn-dchip:hover { border-color: hsl(var(--border)); }
.mn-dchip.on { color: var(--mn-cc); border-color: var(--mn-cc); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.mn-tpill.on { color: var(--mn-cc); border-color: var(--mn-cc); background: color-mix(in srgb, var(--mn-cc) 8%, transparent); }
.mn-lcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .mn-lcgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .mn-lcgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mn-lcbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; font-size: 11px; line-height: 1.15; text-align: center; border-radius: 8px; border: 2px solid hsl(var(--border) / .3); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
.mn-lcbtn:hover { border-color: hsl(var(--border) / .6); }
.mn-debt { transition: all .2s; }
.mn-debt.paid { border-color: rgba(16,185,129,.5); opacity: .75; }
.mn-debt.over { border-color: rgba(239,68,68,.5); } .mn-debt.warn { border-color: rgba(245,158,11,.5); }
.mn-debt.open .mn-chev { transform: rotate(180deg); }
.mn-tagb { display: inline-flex; align-items: center; padding: 0 6px; font-size: 11px; font-weight: 600; border-radius: 4px; }
.mn-tag-red { background: rgba(239,68,68,.2); color: #ef4444; } .mn-tag-am { background: rgba(245,158,11,.2); color: #f59e0b; }
.mn-qs { padding: 8px; text-align: center; border-radius: 8px; background: hsl(var(--muted) / .3); }
.mn-qs-em { background: rgba(16,185,129,.05); } .mn-qs-rose { background: rgba(244,63,94,.05); } .mn-qs-am { background: rgba(245,158,11,.05); }
.mn-due { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; margin-top: 8px !important; }
.mn-debt-x { border-top: 1px solid hsl(var(--border) / .3); padding: 16px; background: hsl(var(--muted) / .1); display: flex; flex-direction: column; gap: 16px; }
.mn-note { background: hsl(var(--muted) / .3); padding: 12px; border-radius: 8px; }
.mn-emi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 640px) { .mn-emi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 768px) { .mn-emi { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.mn-emi > div { font-size: 11px; text-align: center; padding: 6px; border-radius: 4px; background: hsl(var(--muted) / .2); color: hsl(var(--muted-foreground)); display: flex; flex-direction: column; }
.mn-emi > div b { font-weight: 500; }
.mn-emi > .past { background: rgba(16,185,129,.1); color: #059669; }
.mn-emi > .cur { background: rgba(245,158,11,.15); color: #d97706; font-weight: 700; box-shadow: 0 0 0 1px rgba(251,191,36,.5); }
.mn-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid hsl(var(--border) / .3); }
.mn-pay .input { width: 160px; }

/* BD extras */
.mn-calcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .mn-calcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mn-result { margin-top: 16px; padding: 12px; border-radius: 8px; }
.mn-res-em { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); }
.mn-res-pu { background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.2); margin-top: 12px; }
.mn-res-am { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2); }
.mn-mfsbtn { flex: 1; padding: 8px 4px; font-size: 12px; font-weight: 700; border-radius: 8px; border: 2px solid hsl(var(--border) / .5); color: hsl(var(--muted-foreground)); background: transparent; cursor: pointer; font-family: inherit; transition: all .2s; }
.mn-mfst.on { background: hsl(var(--primary) / .1); border-color: hsl(var(--primary)); color: hsl(var(--primary)); }

/* --- notebook --- */
/* =====================================================================
   Phase 5 — Digital Notebook (prefix nb-)
   rounded-2xl = 16px, rounded-xl = 12px, rounded-lg = 0 (theme radius)
   ===================================================================== */
.nb { display: grid; gap: 20px; animation: fadeup .35s ease-out; min-width: 0; }
.nb .ic { width: 16px; height: 16px; flex-shrink: 0; }
.nb [hidden] { display: none !important; }

/* ---------- hero ---------- */
.nb-hero { position: relative; overflow: hidden; border: 1px solid hsl(var(--border) / .4); border-radius: 16px; background: linear-gradient(135deg, rgba(255,107,107,.12) 0%, rgba(59,130,246,.1) 25%, rgba(139,92,246,.1) 50%, rgba(245,158,11,.1) 75%, rgba(16,185,129,.08) 100%); }
.nb-hero-bars { position: absolute; top: 0; left: 0; right: 0; height: 6px; display: flex; }
.nb-hero-bars i { flex: 1; }
.nb-g-rose { background: linear-gradient(90deg, #f87171, #ec4899); } .nb-g-blue { background: linear-gradient(90deg, #60a5fa, #06b6d4); }
.nb-g-violet { background: linear-gradient(90deg, #a78bfa, #a855f7); } .nb-g-amber { background: linear-gradient(90deg, #fbbf24, #f97316); } .nb-g-teal { background: linear-gradient(90deg, #34d399, #14b8a6); }
.nb-hero-in { position: relative; padding: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nb-hero-ic { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: hsl(var(--card) / .8); backdrop-filter: blur(6px); border: 1px solid hsl(var(--border) / .5); box-shadow: 0 16px 30px -12px rgb(0 0 0 / .25); animation: nb-wiggle 4s ease-in-out infinite; color: #FF6B6B; }
.nb-hero-ic .ic { width: 32px; height: 32px; }
@keyframes nb-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
.nb-hero-txt { flex: 1; min-width: 200px; }
.nb-h1 { margin: 0; display: flex; align-items: center; gap: 8px; font: 800 clamp(24px, 3.2vw, 30px)/1.15 var(--font-head); letter-spacing: -.02em; }
.nb-grad { background: linear-gradient(90deg, #FF6B6B, #8B5CF6, #06B6D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nb-spark { display: inline-flex; color: #fbbf24; animation: nb-throb 2s infinite; }
.nb-spark .ic { width: 20px; height: 20px; }
@keyframes nb-throb { 50% { transform: scale(1.2); } }
.nb-hero-sub { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: hsl(var(--muted-foreground)); }
.nb-hero-sub span { display: inline-flex; align-items: center; gap: 4px; } .nb-hero-sub span .ic { width: 12px; height: 12px; color: var(--c); }
.nb-hero-sub i { font-style: normal; color: hsl(var(--border)); }
.nb-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.nb-hstat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 19%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.nb-hstat b { font-size: 18px; font-weight: 700; color: var(--c); line-height: 1.15; }
.nb-hstat span { color: hsl(var(--muted-foreground)); }

/* ---------- tabs ---------- */
.nb-tabbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nb-tabbtn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 16px; font: 700 14px var(--font-body); cursor: pointer; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--card) / .6); color: hsl(var(--muted-foreground)); transition: all .3s; }
.nb-tabbtn:hover { transform: scale(1.04); border-color: hsl(var(--border)); }
.nb-tabbtn:active { transform: scale(.97); }
.nb-tabbtn .ic { width: 18px; height: 18px; }
.nb-tabbtn em { font-style: normal; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: hsl(var(--muted) / .8); }
.nb-tabbtn.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 80%, transparent)); box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 21%, transparent); }
.nb-tabbtn.is-active em { background: rgb(255 255 255 / .25); }
.nb-search { position: relative; display: block; width: 208px; }
.nb-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.nb-search .input { padding-left: 36px; border-radius: 12px; background: hsl(var(--card) / .6); font-size: 14px; }

/* ---------- shared bits ---------- */
.nb-panel { display: grid; gap: 16px; min-width: 0; animation: nb-slide .3s ease-out; }
@keyframes nb-slide { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.nb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-btn, .nb-btn-outline, .nb-mini, .nb-mini-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--font-body); cursor: pointer; border-radius: 12px; transition: filter .2s, background .2s, opacity .2s; }
.nb-btn { height: 40px; padding: 0 16px; border: 0; color: #fff; background: var(--c, hsl(var(--primary))); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--c, #10b981) 60%, transparent); }
.nb-btn:hover { filter: brightness(1.08); }
.nb-btn-outline { height: 40px; padding: 0 16px; background: hsl(var(--background)); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.nb-btn-outline:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.nb-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; gap: 6px; } .nb-btn-sm .ic { width: 14px; height: 14px; }
.nb-btn-block { width: 100%; }
.nb-bold { font-weight: 700; }
.nb-btn:disabled, .nb-btn-outline:disabled, .nb-mini:disabled, .nb-mini-outline:disabled, .nb-send:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.nb-mini, .nb-mini-outline { height: 28px; padding: 0 8px; font-size: 11px; gap: 4px; }
.nb-mini .ic, .nb-mini-outline .ic { width: 12px; height: 12px; }
.nb-mini { border: 0; color: #fff; background: var(--c); }
.nb-mini-outline { background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.nb-mini-outline:hover { background: hsl(var(--muted)); }
.nb-w-full { width: 100%; } .nb-self-start { justify-self: start; }
.nb-seg { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 12px; background: hsl(var(--card) / .6); border: 1px solid hsl(var(--border) / .3); }
.nb-seg button { height: 28px; padding: 0 8px; border: 0; background: none; font: 500 12px var(--font-body); text-transform: capitalize; color: hsl(var(--foreground)); cursor: pointer; }
.nb-seg button:hover { background: hsl(var(--muted)); }
.nb-seg button.is-on { background: var(--c); color: #fff; }
.nb-cap { text-transform: capitalize; }
.nb-pill-c, .nb-pill-s, .nb-pill-o, .nb-pill-ok { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.nb-pill-c { border: 1px solid color-mix(in srgb, var(--c) 31%, transparent); color: var(--c); text-transform: capitalize; }
.nb-pill-s { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.nb-pill-s .ic, .nb-pill-c .ic, .nb-pill-o .ic { width: 10px; height: 10px; }
.nb-pill-o { border: 1px solid color-mix(in srgb, var(--pc, hsl(var(--border))) 31%, transparent); color: var(--pc, hsl(var(--foreground))); }
.nb-pill-red { background: rgb(239 68 68 / .15); color: #ef4444; }
.nb-pill-ok { border: 1px solid #10B981; color: #10B981; text-transform: capitalize; }
.nb-danger { color: hsl(var(--destructive)) !important; }
.nb-ib { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: hsl(var(--foreground)); cursor: pointer; }
.nb-ib:hover { background: hsl(var(--muted)); }
.nb-ib .ic { width: 14px; height: 14px; }
.nb-card { border-radius: 16px; border: 1px solid hsl(var(--border) / .4); background: hsl(var(--card) / .8); min-width: 0; }
.nb-pad { padding: 16px; }
.nb-empty { grid-column: 1 / -1; text-align: center; padding: 64px 16px; color: hsl(var(--muted-foreground)); }
.nb-empty .ic { width: 48px; height: 48px; opacity: .2; margin: 0 auto 12px; display: block; animation: float 3s ease-in-out infinite; }
.nb-empty p { margin: 0; font-size: 14px; font-weight: 500; } .nb-empty small { font-size: 12px; }
.nb-muted-xs { margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.nb-muted-i { margin: 0; font-size: 12px; font-style: italic; color: hsl(var(--muted-foreground)); }
.nb-py { padding: 8px 0; }
.nb-spin { display: inline-flex; animation: spin 1s linear infinite; } .nb-ok { color: #10b981; }
.nb-chk { width: 16px; height: 16px; margin-top: 2px; accent-color: #8B5CF6; cursor: pointer; flex-shrink: 0; }
.nb-chk-sm { width: 14px; height: 14px; margin: 0; }

/* ---------- notes ---------- */
.nb-urgent { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid rgb(239 68 68 / .3); background: rgb(239 68 68 / .05); color: #ef4444; font: 500 14px var(--font-body); cursor: pointer; text-align: left; animation: fadeup .3s ease-out; }
.nb-urgent:hover { background: rgb(239 68 68 / .1); }
.nb-urgent span { flex: 1; } .nb-urgent .ic:last-child { width: 12px; height: 12px; color: #f87171; }
.nb-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nb-note { position: relative; overflow: hidden; cursor: pointer; border-radius: 16px; border: 1px solid hsl(var(--border) / .4); border-top: 4px solid var(--c); background: hsl(var(--card) / .8); padding: 16px; display: grid; gap: 8px; align-content: start; transition: transform .3s, box-shadow .3s; animation: fadeup .4s ease-out backwards; }
.nb-note::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 48px; opacity: .1; background: linear-gradient(180deg, var(--c), transparent); pointer-events: none; }
.nb-note:hover, .nb-note:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .35); outline: none; }
.nb-note-pin { position: absolute; top: 10px; right: 10px; color: var(--c); animation: nb-wiggle 3s infinite; }
.nb-note h3 { position: relative; margin: 0; padding-right: 20px; font: 700 14px/1.35 var(--font-body); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-note p { position: relative; margin: 0; font-size: 12px; line-height: 1.6; color: hsl(var(--muted-foreground)); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nb-note-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-top: 4px; }
.nb-note-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; min-height: 24px; }
.nb-note-foot time { font-size: 11px; color: hsl(var(--muted-foreground)); }
.nb-note-acts { display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.nb-note:hover .nb-note-acts, .nb-note:focus-within .nb-note-acts { opacity: 1; }
.nb-note-acts button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: hsl(var(--foreground)); cursor: pointer; }
.nb-note-acts button:hover { background: hsl(var(--muted)); } .nb-note-acts .ic { width: 12px; height: 12px; }
@media (hover: none) { .nb-note-acts, .nb-ev-del { opacity: 1 !important; } }

/* ---------- todos ---------- */
.nb-tstats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.nb-tstat { text-align: left; border-radius: 16px; border: 1px solid hsl(var(--border) / .4); padding: 12px; cursor: pointer; background: color-mix(in srgb, var(--c) 6%, hsl(var(--card))); color: inherit; font-family: inherit; transition: box-shadow .2s; animation: fadeup .4s ease-out backwards; }
.nb-tstat:hover { box-shadow: 0 8px 20px -12px rgb(0 0 0 / .3); }
.nb-tstat > span { display: flex; align-items: center; justify-content: space-between; color: var(--c); }
.nb-tstat b { font-size: 20px; font-weight: 800; }
.nb-tstat small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.nb-progress { border-radius: 16px; border: 1px solid hsl(var(--border) / .4); padding: 16px; background: hsl(var(--card) / .8); display: grid; gap: 12px; }
.nb-progress-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.nb-progress-top span { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: hsl(var(--muted-foreground)); } .nb-progress-top span .ic { width: 14px; height: 14px; color: #a78bfa; }
.nb-progress-top b { font-size: 14px; font-weight: 800; color: #8B5CF6; }
.nb-progress-track { height: 12px; border-radius: 999px; background: hsl(var(--muted) / .5); overflow: hidden; }
.nb-progress-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8B5CF6, #06B6D4, #10B981); transition: width 1s ease-out; }
.nb-todos { display: grid; gap: 12px; }
.nb-todo { border-radius: 16px; border: 1px solid hsl(var(--border) / .4); border-left: 4px solid var(--c); background: hsl(var(--card) / .8); overflow: hidden; transition: box-shadow .2s; animation: nb-slide .3s ease-out backwards; }
.nb-todo:hover { box-shadow: 0 16px 30px -18px rgb(0 0 0 / .35); }
.nb-todo.is-over { border-color: rgb(239 68 68 / .5); border-left-color: #EF4444; background: color-mix(in srgb, #ef4444 5%, hsl(var(--card))); }
.nb-todo.is-done { opacity: .6; }
.nb-todo-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.nb-todo-main { flex: 1; min-width: 0; }
.nb-todo-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-todo-title p { margin: 0; font-size: 14px; font-weight: 600; word-break: break-word; }
.nb-todo.is-done .nb-todo-title p { text-decoration: line-through; color: hsl(var(--muted-foreground)); }
.nb-over { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgb(239 68 68 / .12); color: #EF4444; animation: pulse 1.5s infinite; }
.nb-over .ic { width: 10px; height: 10px; }
.nb-todo-desc { margin: 4px 0 0; font-size: 12px; color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-todo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nb-todo-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nb-status { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; width: 120px; padding: 0 8px; font-size: 11px; color: var(--sc); background: color-mix(in srgb, var(--sc) 8%, transparent); cursor: pointer; }
.nb-status .ic { width: 12px; height: 12px; }
.nb-status b { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-status::after { content: '▾'; font-size: 11px; opacity: .7; }
.nb-status select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 14px; }
.nb-todo-more { border-top: 1px solid hsl(var(--border) / .3); background: hsl(var(--muted) / .2); padding: 16px; display: grid; gap: 12px; animation: fadeup .2s ease-out; }
.nb-todo-more h5 { margin: 0; display: flex; align-items: center; gap: 6px; font: 700 12px var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.nb-todo-more h5 .ic { width: 14px; height: 14px; color: #a78bfa; }
.nb-comments { display: grid; gap: 8px; max-height: 160px; overflow-y: auto; }
.nb-comment { display: flex; gap: 8px; align-items: flex-start; }
.nb-comment i { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; margin-top: 6px; flex-shrink: 0; }
.nb-comment p { margin: 0; font-size: 12px; word-break: break-word; } .nb-comment small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.nb-comment-add { display: flex; gap: 8px; }
.nb-comment-add .input { height: 32px; font-size: 12px; flex: 1; }
.nb-send { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #8B5CF6; color: #fff; cursor: pointer; }
.nb-send .ic { width: 12px; height: 12px; }

/* ---------- calendar ---------- */
.nb-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.nb-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); color: var(--c); font-weight: 500; }
.nb-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.nb-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.nb-cal { padding: 20px; display: grid; gap: 16px; }
.nb-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-cal-head h2 { margin: 0; font: 800 20px var(--font-head); background: linear-gradient(90deg, #f59e0b, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nb-cal-nav { display: flex; gap: 4px; }
.nb-sq { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); cursor: pointer; }
.nb-sq:hover { background: hsl(var(--muted)); }
.nb-sq-txt { width: auto; padding: 0 12px; font: 600 12px var(--font-body); }
.nb-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nb-dow { text-align: center; font-size: 12px; font-weight: 700; padding: 8px 0; color: hsl(var(--muted-foreground)); }
.nb-dow.is-we { color: #f87171; background: rgb(239 68 68 / .05); }
.nb-day { position: relative; min-height: 52px; padding: 4px; border-radius: 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; transition: box-shadow .2s; }
.nb-day:hover { box-shadow: 0 6px 14px -8px rgb(0 0 0 / .35); }
.nb-day > span:first-child { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 700; }
.nb-day.is-we { background: rgb(239 68 68 / .05); } .nb-day.is-we > span:first-child { color: #f87171; }
.nb-day.is-hol { background: linear-gradient(180deg, rgb(139 92 246 / .1), transparent); } .nb-day.is-hol > span:first-child { color: #8b5cf6; }
.nb-day.is-sel { box-shadow: 0 0 0 2px #3b82f6, 0 10px 20px -10px rgb(0 0 0 / .4); } .nb-day.is-sel > span:first-child { background: #3b82f6; color: #fff; }
.nb-day.is-today { box-shadow: 0 0 0 2px #fbbf24; } .nb-day.is-today > span:first-child { background: #f59e0b; color: #fff; }
.nb-day.is-today.is-sel { box-shadow: 0 0 0 2px #fbbf24, 0 0 0 4px #3b82f6; }
.nb-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; max-width: 32px; }
.nb-dots i { width: 6px; height: 6px; border-radius: 50%; }
.nb-dot-over { background: #ef4444; animation: pulse 1.2s infinite; }
.nb-cal-side { display: grid; gap: 16px; min-width: 0; }
.nb-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.nb-day-head h3 { margin: 0; font: 700 16px var(--font-body); letter-spacing: 0; } .nb-day-head p { margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.nb-hol { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; color: var(--hc); border: 1px solid color-mix(in srgb, var(--hc) 19%, transparent); font-size: 12px; }
.nb-hol b { font-weight: 700; } .nb-hol small { font-size: 11px; margin-left: 6px; opacity: .7; }
.nb-h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font: 700 12px var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.nb-h4 .ic { width: 14px; height: 14px; } .nb-h4 > span { display: inline-flex; }
.nb-ev { cursor: pointer; border-radius: 12px; border: 1px solid hsl(var(--border) / .3); border-left: 4px solid var(--c); padding: 12px; margin-top: 8px; transition: box-shadow .2s; }
.nb-ev:hover { box-shadow: 0 8px 18px -12px rgb(0 0 0 / .4); }
.nb-ev-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nb-ev-top p { margin: 0; font-size: 14px; font-weight: 600; } .nb-ev-top small { display: block; margin-top: 2px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.nb-ev-del { width: 24px; height: 24px; opacity: 0; transition: opacity .2s; }
.nb-ev:hover .nb-ev-del { opacity: 1; }
.nb-ev-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.nb-duebox { border-color: rgb(139 92 246 / .3); background: rgb(139 92 246 / .05); }
.nb-due { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; }
.nb-due.is-over { background: rgb(239 68 68 / .1); }
.nb-due > span { flex: 1; min-width: 0; } .nb-due > span.is-done { text-decoration: line-through; color: hsl(var(--muted-foreground)); }
.nb-due em { display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 6px; border-radius: 999px; font: normal 600 9px var(--font-body); color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); }
.nb-due em .ic { width: 8px; height: 8px; }
.nb-up { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nb-up:hover { background: hsl(var(--muted) / .3); }
.nb-up i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.nb-up span { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-up small { font-size: 11px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }

/* ---------- dialogs ---------- */
.modal-box.nb-dlg { width: min(448px, 100%); border-radius: 16px; padding: 24px; }
.modal-box.nb-dlg-xl { width: min(576px, 100%); max-height: 90vh; }
.nb-dlg .ic { width: 16px; height: 16px; flex-shrink: 0; }
.nb-dlg-title { display: flex; align-items: center; gap: 8px; margin: 0 32px 16px 0; font: 600 18px var(--font-head); }
.nb-dlg-title .ic { width: 20px; height: 20px; } .nb-dlg-title > span { display: inline-flex; align-items: center; }
.nb-wandbox { padding: 8px; border-radius: 12px; background: linear-gradient(135deg, rgb(16 185 129 / .2), rgb(6 182 212 / .2)); color: #10b981; }
.nb-form { display: grid; gap: 12px; }
.nb-form .input, .nb-form .select, .nb-form .textarea { border-radius: 12px; }
.nb-form .textarea { height: auto; padding: 8px 12px; resize: vertical; }
.nb-in-title { font-size: 16px !important; font-weight: 600; }
.nb-in-content { min-height: 160px; font-family: var(--font-mono) !important; font-size: 14px !important; }
.nb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nb-two .input, .nb-two .select { height: 36px; font-size: 14px; }
.nb-urlbox { border: 1px solid hsl(var(--border) / .4); border-radius: 12px; padding: 12px; display: grid; gap: 8px; background: hsl(var(--muted) / .1); }
.nb-urlbox-head { display: flex; align-items: center; justify-content: space-between; }
.nb-urlbox-head > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); }
.nb-urlbox-head > span span { display: inline-flex; } .nb-urlbox-head .ic { width: 14px; height: 14px; }
.nb-ghost-xs { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; background: none; font: 500 12px var(--font-body); color: hsl(var(--foreground)); cursor: pointer; }
.nb-ghost-xs:hover { background: hsl(var(--muted)); } .nb-ghost-xs .ic { width: 12px; height: 12px; }
.nb-urlbox-actions { display: flex; gap: 8px; } .nb-urlbox-actions > * { flex: 1; }
.nb-url-row { display: flex; gap: 8px; align-items: center; }
.nb-url-in { position: relative; flex: 1; min-width: 0; display: block; }
.nb-url-in .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.nb-url-in .input { height: 32px; padding-left: 32px; font-size: 12px; }
.nb-url-lg .ic { left: 12px; width: 16px; height: 16px; } .nb-url-lg .input { height: 40px; padding-left: 36px; font-size: 14px; }
.nb-import-urls { display: grid; gap: 8px; }
.nb-x { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: hsl(var(--destructive)); cursor: pointer; }
.nb-x:hover { background: hsl(var(--muted)); } .nb-x .ic { width: 12px; height: 12px; }
.nb-colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-colors span { font-size: 12px; color: hsl(var(--muted-foreground)); }
.nb-colors button { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.nb-colors button.is-on { transform: scale(1.1); box-shadow: 0 0 0 2px hsl(var(--card)), 0 0 0 4px hsl(var(--foreground) / .6); }
.nb-colors-sm button { width: 20px; height: 20px; }
.nb-colors-sm button.is-on { box-shadow: 0 0 0 1px hsl(var(--card)), 0 0 0 3px hsl(var(--foreground) / .6); }
.nb-allday { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nb-times { display: flex; gap: 8px; flex: 1; min-width: 200px; } .nb-times .input { height: 36px; }
.nb-ai-off { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 12px; font-size: 12px; background: rgb(245 158 11 / .1); color: #b45309; border: 1px solid rgb(245 158 11 / .3); }
.dark .nb-ai-off { color: #fbbf24; }
.nb-hints { display: flex; gap: 8px; flex-wrap: wrap; }
.nb-hints span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); color: var(--c); }
.nb-hints .ic { width: 14px; height: 14px; }
.nb-ext-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.nb-ext-head h4 { margin: 0; font: 700 14px var(--font-body); color: #10b981; }
.nb-ext-list { display: grid; gap: 12px; }
.nb-ext { border-radius: 12px; border: 1px solid rgb(16 185 129 / .2); background: rgb(16 185 129 / .05); padding: 12px; display: grid; gap: 8px; animation: fadeup .3s ease-out; }
.nb-ext-src { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nb-ext-src small { flex: 1; min-width: 0; font-size: 11px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-ext-src > span:first-child { display: inline-flex; color: #10b981; } .nb-src-facebook { color: #3b82f6 !important; } .nb-src-linkedin { color: #1d4ed8 !important; }
.nb-ext h3 { margin: 0; font: 700 14px var(--font-body); letter-spacing: 0; }
.nb-ext p { margin: 0; font-size: 12px; font-style: italic; color: hsl(var(--muted-foreground)); }

/* ---------- responsive ---------- */
@media (max-width: 1279px) { .nb-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .nb-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-cal-wrap { grid-template-columns: 1fr; } }
@media (max-width: 639px) {
  .nb-notes { grid-template-columns: 1fr; }
  .nb-tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-hero-in { padding: 20px 16px; }
  .nb-hero-stats { width: 100%; justify-content: space-between; gap: 6px; } .nb-hstat { flex: 1; padding: 6px 4px; }
  .nb-tabbar { gap: 8px; } .nb-tabbtn { padding: 8px 12px; gap: 6px; font-size: 13px; }
  .nb-search { width: 100%; }
  .nb-todo-row { flex-wrap: wrap; padding: 12px; }
  .nb-todo-main { flex-basis: calc(100% - 30px); }
  .nb-todo-acts { width: 100%; justify-content: flex-end; }
  .nb-cal { padding: 12px; } .nb-day { min-height: 44px; padding: 2px; } .nb-day > span:first-child { width: 24px; height: 24px; }
  .modal-box.nb-dlg { padding: 20px 16px; }
}

/* --- treatment --- */
/* =====================================================================
   Phase 5 — Treatment System (/admin/treatment) · prefix .tr-
   ===================================================================== */
.tr { font-size: 13px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tr-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tr-list { display: flex; flex-direction: column; gap: 8px; }
.tr-list-tight { gap: 4px; }
.tr .tab-panel { min-width: 0; }

/* Digital Manager strip */
.tr-dm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-dm-home { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; font-size: 12px; font-weight: 700; color: #7C3AED; border: 2px solid #7C3AED; border-radius: 8px; }
.tr-dm-home .ic, .tr-dm-link .ic { width: 13px; height: 13px; }
.tr-dm-home:hover { background: rgb(124 58 237 / .08); color: #7C3AED; }
.tr-dm-sep { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.tr-dm-link { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--c); border-radius: 4px; }
.tr-dm-link:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); }
.tr-dm-link.on { background: var(--c); color: #fff; }
@media (max-width: 640px) { .tr-dm { gap: 2px; } .tr-dm-link span { display: none; } .tr-dm-link { padding: 0 4px; } .tr-dm-home { padding: 0 8px; } }

/* header */
.tr-hero { position: relative; overflow: hidden; border: 1px solid hsl(var(--border) / .6); border-radius: 8px; background: linear-gradient(135deg, hsl(var(--destructive) / .06), hsl(var(--primary) / .03), hsl(var(--accent) / .06)), hsl(var(--card)); }
.tr-hero-bar { position: absolute; inset: 0 0 auto 0; height: 4px; display: flex; }
.tr-hero-bar i { flex: 1; background: color-mix(in srgb, var(--c) 25%, transparent); transition: background .3s; }
.tr-hero-bar i.on { background: var(--c); }
.tr-hero-in { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.tr-hero-in h1 { font: 700 20px/1.2 var(--font-head); margin: 0; letter-spacing: -.01em; }
.tr-hero-in p { margin: 2px 0 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.tr-hero-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: hsl(var(--destructive)); background: linear-gradient(135deg, hsl(var(--destructive) / .2), hsl(var(--destructive) / .05)); border: 1px solid hsl(var(--destructive) / .2); }
.tr-hero-ic .ic { width: 20px; height: 20px; }

/* tabs */
.tr-tabs.tabs { gap: 2px; margin: 0; padding: 4px; border: 1px solid hsl(var(--border) / .5); border-radius: 8px; background: hsl(var(--muted) / .35); }
.tr-tabs .tab { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; margin: 0; font-size: 12px; border: 0; border-radius: 8px; transition: background .2s, color .2s; }
.tr-tabs .tab .ic { width: 14px; height: 14px; }
.tr-tabs .tab:hover { background: hsl(var(--card)); }
.tr-tabs .tab.active { background: var(--tc); color: #fff; border: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--tc) 35%, transparent); }
@media (max-width: 640px) { .tr-tl { display: none; } .tr-tabs.tabs { justify-content: space-between; } .tr-tabs .tab { padding: 6px 6px; } }

/* cards + basics */
.tr-card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border) / .6); border-radius: 8px; position: relative; overflow: hidden; min-width: 0; }
button.tr-card { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.tr-p { padding: 12px 12px; } .tr-p-sm { padding: 8px 8px; } .tr-pt0 { padding-top: 0; }
.tr-line { height: 2px; } .tr-line-3 { height: 6px; } .tr-line-4 { height: 4px; }
.tr-lift { transition: transform .2s, box-shadow .2s; } .tr-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 0 0 / .35); }
.tr-click { transition: background .2s; } .tr-click:hover { background: hsl(var(--muted) / .35); }
.tr-h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 14px; font-weight: 700; }
.tr-h2 .ic, .tr-h3 .ic { width: 16px; height: 16px; }
.tr-h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; }
.tr-sub { font-size: 11px; font-weight: 400; color: hsl(var(--muted-foreground)); }
.tr-headrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-bar-full > * { flex: 0 0 auto; }
.tr-grow180 { flex: 1 1 180px !important; min-width: 0; }
.tr-grow180 .input { width: 100% !important; }
.tr-in { height: 30px; font-size: 12px; padding: 0 8px; border-radius: 4px; }
.tr-in2 { height: 34px; font-size: 12px; }
.tr-bar .select.tr-in, .tr-bar .input.tr-in { width: auto; }
.tr-w16 { width: 70px !important; flex: none; } .tr-w24 { width: 110px !important; } .tr-w28 { width: 128px !important; } .tr-w32 { width: 140px !important; } .tr-w36 { width: 150px !important; } .tr-w44 { width: 180px !important; } .tr-w48 { width: 200px !important; }
@media (max-width: 480px) { .tr-bar .tr-w24, .tr-bar .tr-w28, .tr-bar .tr-w32, .tr-bar .tr-w36, .tr-bar .tr-w44 { width: calc(50% - 3px) !important; } .tr-w48 { width: 100% !important; } }
.tr-btn { background: var(--c); color: #fff; border: 0; height: 30px; padding: 0 12px; font-size: 12px; gap: 4px; border-radius: 4px; }
.tr-btn:hover { color: #fff; filter: brightness(1.08); } .tr-btn:disabled { opacity: .55; cursor: not-allowed; }
.tr-btn .ic, .tr .btn-xs .ic { width: 13px; height: 13px; }
.tr-ib { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; flex: none; }
.tr-ib .ic { width: 13px; height: 13px; }
.tr-ib:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.tr-del { color: hsl(var(--destructive)); } .tr-del:hover { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.tr-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .2s; }
.tr-hov:hover .tr-acts, .tr-hov:focus-within .tr-acts { opacity: 1; }
@media (hover: none) { .tr-acts { opacity: 1; } }
.tr-rot .ic { transform: rotate(180deg); }

/* type scale helpers */
.tr-7 { font-size: 11px; } .tr-8 { font-size: 11px; } .tr-9 { font-size: 11px; } .tr-10 { font-size: 11px; } .tr-11 { font-size: 11px; } .tr-b11 { font-size: 11px; font-weight: 700; } .tr-12 { font-size: 12px; } .tr-sm { font-size: 11px; margin: 2px 0; } .tr-xs { font-size: 11px; margin: 0; }
.tr-big { font-size: 16px; font-weight: 800; margin: 2px 0 0; line-height: 1.15; }
.tr-fg { color: hsl(var(--foreground)); }
.tr-ico { display: inline-flex; align-items: center; gap: 4px; }
.tr-ml-auto { margin-left: auto; }
.tr p { margin: 0; }
.tr-modal p { margin: 0; }
.tr .d-block, .tr-modal .d-block { display: block; }
.tr-lines p { margin: 0 0; }
.tr-trunc { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* chips + tones */
.tr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.tr-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; font-size: 11px; line-height: 1.45; border-radius: 4px; white-space: nowrap; }
.tr-chip .ic { width: 11px !important; height: 11px !important; }
.tr-t-amber { background: rgb(245 158 11 / .12); color: #b45309; } .tr-t-purple { background: rgb(168 85 247 / .12); color: #7e22ce; }
.tr-t-blue { background: rgb(59 130 246 / .12); color: #1d4ed8; } .tr-t-emerald { background: rgb(16 185 129 / .12); color: #047857; }
.tr-t-red { background: rgb(239 68 68 / .12); color: #dc2626; } .tr-t-pink { background: rgb(236 72 153 / .12); color: #db2777; }
.tr-t-indigo { background: rgb(99 102 241 / .12); color: #4338ca; } .tr-t-cyan { background: rgb(6 182 212 / .12); color: #0e7490; }
.tr-t-green { background: rgb(34 197 94 / .12); color: #15803d; } .tr-t-orange { background: rgb(249 115 22 / .12); color: #c2410c; }
.tr-t-muted { background: hsl(var(--muted) / .7); color: hsl(var(--muted-foreground)); }
.tr-t-box { background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border) / .6); color: inherit; }
.tr-fill-blue { background: #3b82f6; color: #fff; }
.dark .tr-t-amber { color: #fbbf24; } .dark .tr-t-purple { color: #d8b4fe; } .dark .tr-t-blue { color: #93c5fd; } .dark .tr-t-emerald { color: #6ee7b7; }
.dark .tr-t-red { color: #fca5a5; } .dark .tr-t-pink { color: #f9a8d4; } .dark .tr-t-indigo { color: #a5b4fc; } .dark .tr-t-cyan { color: #67e8f9; }
.dark .tr-t-green { color: #86efac; } .dark .tr-t-orange { color: #fdba74; }
.tr-c-amber { color: #d97706; } .tr-c-purple { color: #9333ea; } .tr-c-blue { color: #2563eb; } .tr-c-emerald { color: #059669; } .tr-c-red { color: #dc2626; }
.tr-c-violet { color: #7c3aed; } .tr-c-cyan { color: #0891b2; } .tr-c-sky { color: #0284c7; } .tr-c-green { color: #16a34a; } .tr-c-orange { color: #ea580c; }
.tr-c-indigo { color: #4f46e5; } .tr-c-pink { color: #db2777; } .tr-c-muted { color: hsl(var(--muted-foreground)); } .tr-c-primary { color: hsl(var(--primary)); }
.dark .tr-c-amber { color: #fbbf24; } .dark .tr-c-purple { color: #c084fc; } .dark .tr-c-blue { color: #60a5fa; } .dark .tr-c-emerald { color: #34d399; } .dark .tr-c-red { color: #f87171; }
.dark .tr-c-violet { color: #a78bfa; } .dark .tr-c-cyan { color: #22d3ee; } .dark .tr-c-sky { color: #38bdf8; } .dark .tr-c-green { color: #4ade80; } .dark .tr-c-orange { color: #fb923c; } .dark .tr-c-indigo { color: #a5b4fc; } .dark .tr-c-pink { color: #f472b6; }
.tr-badge-sm { font-size: 11px; padding: 0 6px; }
.tr-badge-o { background: transparent; }
.tr-badge-fill { color: #fff; border-color: transparent; }
.tr-badge-sec { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: transparent; }
.tr-tint { border-width: 1px; }
.tr-tint-blue { background: rgb(59 130 246 / .05); border-color: rgb(59 130 246 / .3); }
.tr-tint-emerald { background: rgb(16 185 129 / .05); border-color: rgb(16 185 129 / .3); }
.tr-tint-purple { background: rgb(168 85 247 / .05); border-color: rgb(168 85 247 / .3); }
.tr-tint-violet { background: linear-gradient(135deg, rgb(139 92 246 / .07), transparent); border-color: rgb(139 92 246 / .22); }
.tr-tint-red { background: rgb(239 68 68 / .05); border-color: rgb(239 68 68 / .22); }
.tr-bg-card { background: hsl(var(--card)); }

/* squares / avatars */
.tr-sq { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 4px; }
.tr-sq .ic { width: 14px; height: 14px; }
.tr-sq-lg { width: 34px; height: 34px; border-radius: 8px; } .tr-sq-lg .ic { width: 16px; height: 16px; }
.tr-sq-xl { width: 40px; height: 40px; border-radius: 12px; } .tr-sq-xl .ic { width: 20px; height: 20px; }
.tr-emo { font-size: 14px; }
.tr-av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 18px; border-radius: 8px; }

/* grids */
.tr-g2, .tr-g3, .tr-g4, .tr-g6, .tr-g8 { display: grid; gap: 6px; min-width: 0; }
.tr-g2 { grid-template-columns: 1fr; } .tr-g3 { grid-template-columns: 1fr; } .tr-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-g8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-g4-md { grid-template-columns: 1fr; }
@media (min-width: 640px) { .tr-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .tr-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-g4, .tr-g4-md { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tr-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-g8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tr-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tr-spanall { grid-column: 1 / -1; }

/* overview */
.tr-stat { display: flex; align-items: center; gap: 8px; padding: 8px; transition: transform .2s, box-shadow .2s; }
.tr-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px var(--c); }
.tr-stat-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-radius: 4px; }
.tr-stat-ic .ic { width: 16px; height: 16px; }
.tr-stat b { display: block; font-size: 18px; line-height: 1.15; }
.tr-stat small { display: block; font-size: 11px; font-weight: 600; color: var(--c); }
.tr-mini-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: hsl(var(--muted-foreground)); margin-bottom: 4px; }
.tr-mini-h .ic { width: 14px; height: 14px; }
.tr-mini-row { display: flex; align-items: center; gap: 8px; padding: 6px; font-size: 11px; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--muted) / .25); border-radius: 4px; min-width: 0; }
.tr-mini-row p { margin: 0; }

/* AI boxes */
.tr-grad-ai { background: linear-gradient(90deg, #8b5cf6, #ec4899, #f43f5e); }
.tr-ai-types { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.tr-ai-type { font: inherit; font-size: 11px; padding: 2px 8px; border: 1px solid hsl(var(--border) / .8); background: transparent; color: inherit; border-radius: 4px; cursor: pointer; }
.tr-ai-type:hover { background: hsl(var(--muted) / .6); }
.tr-ai-type.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.tr-ai-row { display: flex; gap: 6px; }
.tr-ai-row .input { flex: 1; min-width: 0; height: 32px; }
.tr-ai-row .tr-btn { height: 32px; }
.tr-ai-out { margin-top: 8px; max-height: 360px; overflow-y: auto; padding: 8px 12px; font-size: 12px; line-height: 1.6; background: hsl(var(--muted) / .35); border: 1px solid hsl(var(--border) / .5); border-radius: 4px; white-space: pre-wrap; }
.tr-ai-out .tr-md { white-space: normal; }
.tr-ai-out.tr-ai-err { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .06); border-color: hsl(var(--destructive) / .25); }
.tr-md h2, .tr-md h3, .tr-md h4 { font-size: 13px; margin: 8px 0 4px; }
.tr-md p { margin: 0 0 6px; } .tr-md ul, .tr-md ol { margin: 0 0 6px; padding-left: 18px; } .tr-md li { margin: 2px 0; } .tr-md hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 8px 0; }
.tr-spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: trspin .7s linear infinite; flex: none; }
@keyframes trspin { to { transform: rotate(360deg); } }

/* directories */
.tr-dir { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.tr-dir-sm { max-height: 200px; }
.tr-dir-item { display: flex; align-items: center; gap: 8px; padding: 6px; font-size: 11px; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .5); border-radius: 4px; min-width: 0; }
.tr-dir-item:hover { background: hsl(var(--muted) / .35); }
.tr-dir-item p { margin: 0; }
.tr-empty-line { text-align: center; font-size: 11px; color: hsl(var(--muted-foreground)); padding: 4px; }
.tr-dpill { font: inherit; font-size: 11px; padding: 2px 6px; border: 1px solid hsl(var(--border) / .8); background: transparent; color: inherit; border-radius: 4px; cursor: pointer; }
.tr-dpill:hover { background: hsl(var(--muted) / .6); } .tr-dpill.on { background: #a855f7; border-color: #a855f7; color: #fff; }

/* empty states + alerts */
.tr-empty { text-align: center; padding: 24px 16px; border: 2px dashed hsl(var(--border) / .7); border-radius: 8px; color: hsl(var(--muted-foreground)); font-size: 12px; background: hsl(var(--card) / .5); }
.tr-empty .ic { width: 34px; height: 34px; opacity: .3; margin: 0 auto 8px; display: block; }
.tr-empty p { margin: 2px 0; }
.tr-empty-lg { padding: 48px 16px; font-size: 13px; } .tr-empty-lg .ic { width: 46px; height: 46px; opacity: .2; }
.tr-alertbox { padding: 8px 12px; background: rgb(245 158 11 / .1); border: 1px solid rgb(245 158 11 / .25); border-radius: 8px; }
.tr-apill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; background: rgb(245 158 11 / .1); border: 1px solid rgb(245 158 11 / .22); border-radius: 4px; }
.tr-ring { box-shadow: 0 0 0 1px rgb(251 191 36 / .6); }
.tr-bad { border-color: rgb(239 68 68 / .35); }

/* checkups */
.tr-ck-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tr-chev { transition: transform .2s; color: hsl(var(--muted-foreground)); flex: none; }
.tr-ck.open > .flex .tr-chev, .tr-stock.open .tr-stock-row .tr-chev { transform: rotate(180deg); }
.tr-pr2 { padding-right: 8px; }
.tr-exp { display: none; }
.tr-ck.open > .tr-exp { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 8px; border-top: 1px solid hsl(var(--border) / .5); }
.tr-kv { font-size: 11px; } .tr-kv span { font-size: 11px; color: hsl(var(--muted-foreground)); } .tr-kv p { font-weight: 600; margin: 0; word-break: break-word; }
.tr-rx-img { max-height: 160px; max-width: 100%; border: 1px solid hsl(var(--border) / .5); border-radius: 4px; object-fit: contain; background: #fff; }
.tr-rx { border-top: 1px solid hsl(var(--border) / .4); padding-top: 6px; }
.tr-rx-row { display: flex; align-items: center; gap: 6px; padding: 6px; margin-top: 3px; font-size: 11px; background: rgb(168 85 247 / .05); border: 1px solid rgb(168 85 247 / .12); border-radius: 4px; }
.tr-rx-row p { margin: 0; }
.tr-dose { display: inline-flex; align-items: center; gap: 2px; }
.tr-dose .ic { margin-left: 3px; }

/* lab + stock */
.tr-lab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 480px) { .tr-lab { flex-wrap: wrap; } .tr-lab > .flex:last-child { margin-left: auto; } }
.tr-sstat { padding: 8px; } .tr-sstat b { display: block; font-size: 16px; } .tr-sstat small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); }
.tr-emo-lg { font-size: 16px; }
.tr-stock { border-left: 4px solid var(--mc); }
.tr-stock-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 8px; cursor: pointer; }
.tr-stock.open > .tr-exp { display: grid; padding: 6px 12px 12px; border-top: 1px solid hsl(var(--border) / .5); font-size: 11px; }
.tr-kv2 span { color: hsl(var(--muted-foreground)); }

/* patient summary */
.tr-ps-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tr-ps-head > :first-child { flex: 1 1 260px; min-width: 0; }
.tr-ps-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: #7c3aed; border-radius: 12px; background: linear-gradient(135deg, rgb(139 92 246 / .2), rgb(139 92 246 / .05)); border: 1px solid rgb(139 92 246 / .2); }
.tr-ps-who { display: flex; align-items: center; gap: 12px; }
.tr-ps-av { width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-size: 24px; border: 2px solid; border-radius: 12px; }
.tr-ps-name { margin: 0 0 4px; font-size: 18px; }
.tr-ps-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--c); }
.tr-ps-stat .ic { width: 16px; height: 16px; }
.tr-ps-stat b { font-size: 16px; } .tr-ps-stat small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.tr-ch { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; font-size: 13px; font-weight: 700; }
.tr-ch .ic { width: 16px; height: 16px; }
.tr-vbox { text-align: center; padding: 8px 4px; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--muted) / .25); border-radius: 8px; }
.tr-vbox b, .tr-vbox small, .tr-vbox span { display: block; } .tr-vbox b { font-size: 13px; margin-top: 2px; } .tr-vbox small { font-size: 11px; color: hsl(var(--muted-foreground)); }
.tr-tw { overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.tr-table th { text-align: left; padding: 6px 8px; font-weight: 600; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border) / .7); white-space: nowrap; }
.tr-table td { padding: 6px 8px; border-bottom: 1px solid hsl(var(--border) / .35); vertical-align: top; }
.tr-table tr:hover td { background: hsl(var(--muted) / .25); }
.tr-table .c { text-align: center; } .tr-table .r { text-align: right; }

/* dialogs */
.tr-modal .modal-box { border-radius: 8px; }
.tr-mw-md { max-width: 460px; } .tr-mw-lg { max-width: 560px; } .tr-mw-xl { max-width: 720px; }
.tr-mh { padding: 16px 48px 4px 16px; }
.tr-mh h3 { margin: 0; font-size: 16px; font-weight: 700; }
.tr-mh p { margin: 2px 0 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.tr-mb { padding: 12px 16px 16px; }
.tr-fstack { display: flex; flex-direction: column; gap: 8px; }
.tr-f2, .tr-f3, .tr-f4, .tr-f5 { display: grid; gap: 6px; min-width: 0; }
.tr-f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-f4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tr-f5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tr-f2 > *, .tr-f3 > *, .tr-f4 > *, .tr-f5 > * { min-width: 0; }
.tr-span2 { grid-column: span 2; }
@media (max-width: 560px) { .tr-f4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tr-f5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-f3.tr-f3-wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .tr-f5:not(.tr-dose5) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .tr-mb { padding: 8px 12px 12px; } .tr-mh { padding: 12px 40px 2px 12px; } }
.tr-modal .input, .tr-modal .select { height: 36px; font-size: 13px; }
.tr-modal .tr-in { height: 30px; font-size: 11px; padding: 0 6px; }
.tr-modal .tr-in2 { height: 34px; font-size: 12px; }
.tr-ta { min-height: 64px; font-size: 13px; }
.tr-lbl { display: block; font-size: 11px; font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: 2px; }
.tr-lblw { display: block; }
.tr-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; user-select: none; }
.tr-switch-sm { width: 26px; height: 15px; } .tr-switch-sm span::before { width: 10px; height: 10px; } .tr-switch-sm input:checked + span::before { transform: translateX(11px); }
.tr-sw-red input:checked + span { background: #ef4444; border-color: #ef4444; } .tr-sw-blue input:checked + span { background: #3b82f6; border-color: #3b82f6; }
.tr-box { border: 1px solid hsl(var(--border) / .6); border-radius: 4px; padding: 8px; }
.tr-iic { position: relative; min-width: 0; }
.tr-iic > .ic { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: hsl(var(--muted-foreground)); pointer-events: none; }
.tr-iic > .input { padding-left: 24px; }
.tr-purple-in { border-color: rgb(168 85 247 / .45); }
.tr-save { width: 100%; }
.tr-qt { font: inherit; font-size: 11px; padding: 2px 8px; border: 1px solid hsl(var(--border) / .8); background: transparent; color: inherit; border-radius: 4px; cursor: pointer; }
.tr-qt:hover { background: hsl(var(--accent) / .12); }
.tr-file { height: auto !important; padding: 6px !important; font-size: 12px !important; margin-top: 4px; }
.tr-costpv { display: flex; justify-content: space-between; gap: 8px; padding: 8px; font-size: 12px; background: hsl(var(--muted) / .5); border-radius: 4px; }
.tr-costpv b { color: hsl(var(--primary)); }

/* autocomplete */
.tr-acwrap { position: relative; min-width: 0; }
.tr-ac { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 210px; overflow-y: auto; background: hsl(var(--popover, var(--card))); border: 1px solid hsl(var(--border)); border-radius: 4px; box-shadow: 0 12px 30px -12px rgb(0 0 0 / .35); }
.tr-ac-item { display: block; width: 100%; text-align: left; padding: 6px 8px; font: inherit; font-size: 11px; background: none; border: 0; border-bottom: 1px solid hsl(var(--border) / .35); color: inherit; cursor: pointer; }
.tr-ac-item:last-child { border-bottom: 0; }
.tr-ac-item:hover, .tr-ac-item.sel { background: hsl(var(--accent) / .12); }

/* checkup: prescription upload */
.tr-upload { display: flex; flex-direction: column; gap: 6px; }
.tr-upbtn { width: 100%; border-style: dashed; font-size: 12px; }
.tr-upbtn .ic { width: 14px; height: 14px; }
.tr-up-pv { position: relative; border: 1px solid hsl(var(--border) / .6); border-radius: 4px; min-height: 42px; display: grid; place-items: center; overflow: hidden; }
.tr-up-pv img { width: 100%; max-height: 128px; object-fit: contain; }
.tr-up-file { padding: 8px; font-size: 12px; }
.tr-up-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; background: hsl(var(--background) / .75); color: #9333ea; }
.tr-up-busy[hidden] { display: none; }
.tr-up-x { position: absolute; top: 4px; right: 4px; background: hsl(var(--card) / .9); }

/* checkup: medicine builder */
.tr-medform { border-top: 1px solid hsl(var(--border) / .5); padding-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.tr-medform .ic { width: 12px; height: 12px; }
.tr-med-empty { text-align: center; padding: 8px; font-size: 11px; color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--border) / .8); border-radius: 4px; }
.tr-med { border: 1px solid hsl(var(--border) / .7); border-radius: 4px; background: hsl(var(--muted) / .2); }
.tr-med-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 6px 2px 8px; background: hsl(var(--muted) / .45); border-radius: 4px 4px 0 0; }
.tr-med-hl { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; }
.tr-med-n { font-size: 11px; font-weight: 700; color: #9333ea; background: rgb(168 85 247 / .12); padding: 0 4px; border-radius: 4px; }
.dark .tr-med-n { color: #d8b4fe; }
.tr-med-nm { max-width: 150px; }
.tr-med-b { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.tr-med-r1, .tr-med-r4 { display: flex; gap: 4px; align-items: center; min-width: 0; }
.tr-med-r1 > .tr-acwrap { flex: 1 1 auto; }
.tr-med-r4 > .input.grow { flex: 1 1 auto; min-width: 0; }
.tr-med .tr-f4, .tr-med .tr-f5 { gap: 4px; }
.tr-med-x { border-top: 1px solid hsl(var(--border) / .5); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.tr-dsum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px 8px; font-size: 11px; background: hsl(var(--muted) / .55); border-radius: 4px; }
.tr-dsum .ic { color: #a855f7; }
@media (max-width: 560px) {
  .tr-med-r1 { flex-wrap: wrap; } .tr-med-r1 > .tr-acwrap { flex-basis: 100%; } .tr-med-r1 > .input { flex: 1 1 0; width: auto !important; }
  .tr-med-r4 { flex-wrap: wrap; } .tr-med-r4 > .input.grow { flex-basis: 100%; }
}
.tr-mt1 { margin-top: 4px; } .tr-mb1 { margin-bottom: 4px; } .tr-iend { align-items: flex-end; }

/* --- kitchen --- */
/* =====================================================================
   Phase 5 — Kotha's Kitchen (prefix kt-)
   Cards are square (theme radius 0); rounded-xl panels = 12px; pills round.
   ===================================================================== */
.kt { display: grid; gap: 16px; min-width: 0; animation: fadeup .35s ease-out; }
.kt .ic { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- header ---------- */
.kt-head { position: relative; overflow: hidden; border: 1px solid hsl(var(--border) / .5); padding: 12px; background: linear-gradient(135deg, rgba(255,99,71,.08) 0%, rgba(255,165,0,.05) 50%, rgba(34,139,34,.05) 100%); }
.kt-head-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #FF6347, #FF8C00, #FFD700, #32CD32, #FF6347); }
.kt-head-in { position: relative; display: flex; align-items: center; gap: 12px; }
.kt-head-ic { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid hsl(var(--border) / .5); background: linear-gradient(135deg, #FF634720, #FF8C0020); }
.kt-h1 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 18px/1.3 var(--font-head); letter-spacing: -.02em; }
.kt-h1 span { font: 400 12px var(--font-body); color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding: 2px 8px; letter-spacing: 0; }
.kt-head p { margin: 2px 0 0; font-size: 11px; color: hsl(var(--muted-foreground)); }

/* ---------- stats ---------- */
.kt-stats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.kt-stat { position: relative; overflow: hidden; text-align: center; padding: 8px 6px; border: 1px solid hsl(var(--border) / .4); }
.kt-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--c); }
.kt-stat-em { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.kt-stat b { display: block; font-size: 14px; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.dark .kt-stat b { filter: brightness(1.35); }
.kt-stat small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.15; color: hsl(var(--muted-foreground)); }

/* ---------- category breakdown ---------- */
.kt-break { border: 1px solid hsl(var(--border) / .4); background: hsl(var(--card)); padding: 12px; display: grid; gap: 8px; }
.kt-break-t { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.kt-break-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: hsl(var(--muted) / .3); }
.kt-break-bar i { height: 100%; min-width: 4px; cursor: help; transition: width .5s; }
.kt-break-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-break-chips button { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: 500 10px var(--font-body); border-radius: 999px; border: 1px solid hsl(var(--border) / .3); background: none; color: var(--c); cursor: pointer; }
.kt-break-chips button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.kt-break-chips button.is-on { font-weight: 700; border-color: hsl(var(--foreground) / .3); }

/* ---------- tabs + toolbar ---------- */
.kt-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.kt-tabs button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; font: 500 11px var(--font-body); border: 0; background: hsl(var(--muted) / .6); color: hsl(var(--muted-foreground)); cursor: pointer; transition: background .2s; }
.kt-tabs button:hover { color: hsl(var(--foreground)); }
.kt-tabs button.is-on { background: var(--c); color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.kt-tabs em { font-style: normal; margin-left: 2px; padding: 0 6px; border-radius: 999px; font-size: 11px; background: rgb(255 255 255 / .3); color: #fff; }
.kt-tabs button:not(.is-on) em { background: var(--c); }
.kt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kt-search { position: relative; flex: 1; min-width: 160px; }
.kt-search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.kt-search .input { height: 32px; padding-left: 32px; font-size: 12px; }
.kt-sort { position: relative; width: 120px; }
.kt-sort .ic { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; pointer-events: none; }
.kt-sort .select { height: 32px; padding-left: 26px; font-size: 12px; }
.kt-add { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 0; color: #fff; font: 600 12px var(--font-body); cursor: pointer; background: linear-gradient(135deg, #FF6347, #FF8C00); }
.kt-add:hover { filter: brightness(1.06); }

/* ---------- tab headers ---------- */
.kt-band { position: relative; overflow: hidden; border: 1px solid; }
.kt-band-bar { display: block; height: 4px; }
.kt-band-in { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: 12px; }
.kt-band-in .ic { width: 16px; height: 16px; }
.kt-sb { justify-content: space-between; flex-wrap: wrap; } .kt-sb > span { display: inline-flex; align-items: center; gap: 6px; }
.kt-band-amt { font-size: 14px; }
.kt-band-red { border-color: #fecaca; background: rgb(254 242 242 / .5); } .kt-band-red b, .kt-band-red .ic { color: #dc2626; }
.kt-band-amber { border-color: #fde68a; background: linear-gradient(90deg, #fffbeb, #fff7ed); } .kt-band-amber b { color: #b45309; } .kt-band-amber .ic { color: #f59e0b; }
.kt-band-slate { border-color: #e2e8f0; background: linear-gradient(90deg, #f8fafc, #fafafa); } .kt-band-slate b { color: #334155; }
.kt-band-pink { border-color: #fbcfe8; background: linear-gradient(90deg, #fdf2f8, #fff1f2); } .kt-band-pink b { color: #be185d; }
.dark .kt-band-red { border-color: rgb(153 27 27 / .4); background: rgb(69 10 10 / .2); } .dark .kt-band-red b, .dark .kt-band-red .ic { color: #fca5a5; }
.dark .kt-band-amber { border-color: rgb(146 64 14 / .4); background: linear-gradient(90deg, rgb(69 26 3 / .2), rgb(67 20 7 / .2)); } .dark .kt-band-amber b { color: #fcd34d; }
.dark .kt-band-slate { border-color: rgb(51 65 85 / .4); background: rgb(2 6 23 / .2); } .dark .kt-band-slate b { color: #cbd5e1; }
.dark .kt-band-pink { border-color: rgb(157 23 77 / .4); background: rgb(80 7 36 / .2); } .dark .kt-band-pink b { color: #f9a8d4; }
.kt-em { font-size: 18px; line-height: 1; }
.kt-panel { position: relative; overflow: hidden; border: 1px solid; border-radius: 12px; }
.kt-panel-sky { border-color: rgb(186 230 253 / .6); background: linear-gradient(135deg, #f0f9ff, #eff6ff, #ecfeff); }
.kt-panel-amber { border-color: rgb(253 230 138 / .5); background: linear-gradient(135deg, #fffbeb, #fff7ed, #fefce8); }
.dark .kt-panel-sky { border-color: rgb(7 89 133 / .4); background: linear-gradient(135deg, rgb(8 47 73 / .3), rgb(23 37 84 / .2), rgb(22 78 99 / .2)); }
.dark .kt-panel-amber { border-color: rgb(146 64 14 / .3); background: linear-gradient(135deg, rgb(69 26 3 / .2), rgb(67 20 7 / .1), rgb(66 32 6 / .1)); }
.kt-panel-deco { position: absolute; top: 12px; right: 12px; font-size: 60px; opacity: .1; pointer-events: none; }
.kt-panel-in { position: relative; padding: 16px; display: grid; gap: 12px; }
.kt-panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kt-panel-ic { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 10px 20px -8px rgb(59 130 246 / .3); }
.kt-panel-head h3 { margin: 0; font: 700 16px var(--font-body); letter-spacing: 0; }
.kt-panel-head p { margin: 0; font-size: 11px; }
.kt-panel-sky h3 { color: #075985; } .kt-panel-sky .kt-panel-head p { color: #0284c7; }
.kt-panel-amber h3 { color: #92400e; } .kt-panel-amber .kt-panel-head p { color: #d97706; }
.dark .kt-panel-sky h3 { color: #bae6fd; } .dark .kt-panel-sky .kt-panel-head p { color: #38bdf8; }
.dark .kt-panel-amber h3 { color: #fde68a; } .dark .kt-panel-amber .kt-panel-head p { color: #fbbf24; }
.kt-expbadge { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; border: 1px solid #fcd34d; background: #fef3c7; color: #b45309; animation: pulse 2s infinite; }
.dark .kt-expbadge { background: rgb(120 53 15 / .4); color: #fcd34d; }
.kt-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kt-fbox { border-radius: 0; padding: 12px; display: grid; gap: 8px; align-content: start; background: rgb(255 255 255 / .6); border: 1px solid; }
.kt-fbox-sky { border-color: rgb(186 230 253 / .4); } .kt-fbox-indigo { border-color: rgb(199 210 254 / .4); }
.dark .kt-fbox-sky { background: rgb(12 74 110 / .2); border-color: rgb(7 89 133 / .3); } .dark .kt-fbox-indigo { background: rgb(49 46 129 / .2); border-color: rgb(55 48 163 / .3); }
.kt-fbox-t { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.kt-fbox-sky .kt-fbox-t { color: #0369a1; } .kt-fbox-indigo .kt-fbox-t { color: #4338ca; }
.dark .kt-fbox-sky .kt-fbox-t { color: #7dd3fc; } .dark .kt-fbox-indigo .kt-fbox-t { color: #a5b4fc; }
.kt-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-fchip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 19%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.kt-trunc { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-amber { color: #f59e0b; }
.kt-more { padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: #e0f2fe; color: #0284c7; border: 1px solid rgb(186 230 253 / .4); }
.kt-fbox-indigo .kt-more { background: #e0e7ff; color: #4f46e5; }
.dark .kt-more { background: rgb(7 89 133 / .4); color: #7dd3fc; }
.kt-muted-i { margin: 0; font-size: 11px; font-style: italic; color: hsl(var(--muted-foreground)); }
.kt-rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kt-room { text-align: center; padding: 8px; background: rgb(255 255 255 / .6); border: 1px solid hsl(var(--border) / .3); transition: box-shadow .2s; }
.dark .kt-room { background: rgb(255 255 255 / .05); }
.kt-room:hover { box-shadow: 0 2px 6px rgb(0 0 0 / .1); }
.kt-room-em { font-size: 20px; margin-bottom: 4px; }
.kt-room-l { font-size: 11px; font-weight: 700; }
.kt-room b { display: block; font-size: 14px; margin-top: 2px; } .kt-room small { font-size: 11px; color: hsl(var(--muted-foreground)); }

/* ---------- items ---------- */
.kt-list { display: grid; gap: 6px; }
.kt-empty { border: 1px dashed hsl(var(--border) / .5); background: hsl(var(--card)); padding: 40px 16px; text-align: center; color: hsl(var(--muted-foreground)); }
.kt-empty span { display: block; font-size: 36px; margin-bottom: 12px; }
.kt-empty p { margin: 0; font-size: 14px; font-weight: 500; } .kt-empty small { font-size: 12px; }
.kt-item { position: relative; overflow: hidden; border: 1px solid hsl(var(--border) / .4); background: hsl(var(--card)); padding-left: 12px; transition: box-shadow .2s; }
.kt-item::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background: var(--c); }
.kt-item:hover { box-shadow: 0 6px 16px -10px rgb(0 0 0 / .3); }
.kt-row { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; }
.kt-emo { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: color-mix(in srgb, var(--c) 8%, transparent); }
.kt-main { flex: 1; min-width: 0; }
.kt-line1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kt-name { font-size: 14px; font-weight: 700; word-break: break-word; }
.kt-bn { font-size: 11px; color: hsl(var(--muted-foreground)); }
.kt-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; font-size: 11px; font-weight: 600; border: 1px solid var(--b); color: var(--b); white-space: nowrap; }
.kt-badge-red { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: #fff; }
.kt-pulse { animation: pulse 2s infinite; }
.kt-line2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: hsl(var(--muted-foreground)); }
.kt-cat { font-weight: 500; color: var(--c); }
.kt-strong { font-weight: 600; color: hsl(var(--foreground)); }
.kt-green { font-weight: 700; color: #059669; } .dark .kt-green { color: #34d399; }
.kt-brand { color: hsl(var(--primary)); }
.kt-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.kt-stepper { display: flex; align-items: center; border: 1px solid hsl(var(--border) / .5); overflow: hidden; margin-right: 4px; }
.kt-stepper button { height: 28px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kt-minus, .kt-plus { width: 28px; } .kt-minus { color: #ef4444; } .kt-plus { color: #10b981; }
.kt-minus:hover { background: #fef2f2; } .kt-plus:hover { background: #ecfdf5; }
.dark .kt-minus:hover { background: rgb(69 10 10 / .3); } .dark .kt-plus:hover { background: rgb(2 44 34 / .3); }
.kt-minus:disabled { opacity: .4; cursor: not-allowed; background: none; }
.kt-qty { min-width: 2.5rem; padding: 0 6px; font: 700 10px var(--font-body); font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); background: hsl(var(--muted) / .3) !important; border-left: 1px solid hsl(var(--border) / .3) !important; border-right: 1px solid hsl(var(--border) / .3) !important; }
.kt-qty:hover { background: hsl(var(--accent) / .2) !important; }
.kt-ib { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: hsl(var(--foreground)); cursor: pointer; }
.kt-ib:hover { background: hsl(var(--muted)); }
.kt-ib.is-buy { background: #E74C3C; color: #fff; }
.kt-del { color: hsl(var(--destructive)); }
.kt-chev { display: inline-flex; color: hsl(var(--muted-foreground)); }
.kt-more-box { padding: 4px 12px 12px; border-top: 1px solid hsl(var(--border) / .3); display: grid; gap: 8px; cursor: default; }
.kt-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-size: 11px; padding-top: 6px; }
.kt-details span, .kt-note span, .kt-muted { color: hsl(var(--muted-foreground)); }
.kt-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; background: hsl(var(--muted) / .3); }
.kt-strip-l { font-size: 11px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.kt-sneg, .kt-spos { padding: 2px 8px; font: 500 10px var(--font-body); border-radius: 999px; background: none; cursor: pointer; }
.kt-sneg { border: 1px solid #fecaca; color: #ef4444; } .kt-sneg:hover { background: #fef2f2; }
.kt-spos { border: 1px solid #a7f3d0; color: #10b981; } .kt-spos:hover { background: #ecfdf5; }
.dark .kt-sneg { border-color: rgb(153 27 27 / .4); } .dark .kt-spos { border-color: rgb(6 95 70 / .4); }
.dark .kt-sneg:hover { background: rgb(69 10 10 / .3); } .dark .kt-spos:hover { background: rgb(2 44 34 / .3); }
.kt-usebtn-sm { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; font: 500 10px var(--font-body); border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); cursor: pointer; }
.kt-usebtn-sm .ic { width: 12px; height: 12px; }
.kt-calc { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; font-size: 12px; background: #ecfdf5; }
.dark .kt-calc { background: rgb(2 44 34 / .3); }
.kt-calc b { font-size: 14px; color: #059669; } .dark .kt-calc b { color: #34d399; }
.kt-note { font-size: 11px; }
.kt-log { border: 1px solid hsl(var(--border) / .3); overflow: hidden; }
.kt-log-h { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 11px; font-weight: 700; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .4); }
.kt-log-h .ic { width: 12px; height: 12px; }
.kt-log-list { max-height: 144px; overflow-y: auto; }
.kt-log-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; font-size: 11px; border-top: 1px solid hsl(var(--border) / .2); }
.kt-log-row:first-child { border-top: 0; }
.kt-log-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; background: #f87171; }
.kt-log-dot.is-add { background: #34d399; }
.kt-log-row > b { font-variant-numeric: tabular-nums; }
.kt-i { font-style: italic; }
.kt-log-t { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: hsl(var(--muted-foreground)); }
.kt-log-t .ic { width: 10px; height: 10px; }

/* ---------- dialogs ---------- */
.modal-box.kt-dlg { width: min(448px, 100%); padding: 24px; }
.modal-box.kt-dlg-xl { width: min(576px, 100%); max-height: 90vh; }
.kt-dlg .ic { width: 16px; height: 16px; }
.kt-dlg-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 32px 4px 0; font: 600 14px var(--font-head); }
.kt-dlg-desc { margin: 0 0 16px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.kt-red { color: #ef4444; display: inline-flex; }
.kt-form { display: grid; gap: 12px; }
.kt-form .input, .kt-form .select { height: 32px; font-size: 12px; padding: 0 8px; }
.kt-lbl { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); margin-bottom: 2px; }
.kt-lbl-b { font-size: 11px; font-weight: 500; margin-bottom: 4px; }
.kt-ac { position: relative; }
.kt-ac .input { height: 36px; }
.kt-sugg { position: absolute; z-index: 50; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 224px; overflow-y: auto; background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); box-shadow: 0 20px 40px -12px rgb(0 0 0 / .35); }
.kt-sugg-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; border-bottom: 1px solid hsl(var(--border) / .2); }
.kt-sugg-row:last-child { border-bottom: 0; }
.kt-sugg-row:hover { background: hsl(var(--muted)); }
.kt-sugg-row > div:first-child span { margin-left: 6px; color: hsl(var(--muted-foreground)); }
.kt-sugg-r { display: flex; align-items: center; gap: 8px; font-size: 11px; flex-shrink: 0; }
.kt-sugg-r em { font-style: normal; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.kt-sugg-r b { color: #059669; }
.kt-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kt-form .kt-g2 { gap: 8px; }
.kt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kt-chips button { padding: 4px 8px; font: 500 10px var(--font-body); border: 1px solid hsl(var(--border) / .5); border-radius: 999px; background: none; color: hsl(var(--foreground)); cursor: pointer; transition: all .15s; }
.kt-chips button:hover { background: hsl(var(--muted)); }
.kt-chips-lg button { padding: 6px 12px; font-size: 11px; }
.kt-chips button.is-on { background: #ef4444; border-color: #ef4444; color: #fff; }
.kt-qtybox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 12px; font-size: 12px; background: hsl(var(--muted) / .4); }
.kt-qtybox b { margin-left: auto; color: #059669; } .dark .kt-qtybox b { color: #34d399; }
.kt-buychk { display: flex; align-items: center; gap: 8px; font-size: 11px; cursor: pointer; }
.kt-buychk input { width: 15px; height: 15px; accent-color: #E74C3C; }
.kt-save { height: 36px; border: 0; color: #fff; font: 700 12px var(--font-body); cursor: pointer; background: linear-gradient(135deg, #FF6347, #FF8C00); }
.kt-save:disabled, .kt-usebtn:disabled { opacity: .6; cursor: wait; }
.kt-usecur { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px; font-size: 12px; background: hsl(var(--muted) / .4); }
.kt-in-bold { height: 36px !important; font-size: 14px !important; font-weight: 700; }
.kt-preview { display: grid; gap: 4px; padding: 8px; font-size: 12px; background: #fef2f2; border: 1px solid #fecaca; }
.dark .kt-preview { background: rgb(69 10 10 / .2); border-color: rgb(153 27 27 / .3); }
.kt-preview > div { display: flex; justify-content: space-between; }
.kt-preview .kt-red { color: #dc2626; }
.kt-prev-left { border-top: 1px solid #fecaca; padding-top: 4px; font-weight: 700; }
.dark .kt-prev-left { border-color: #991b1b; }
.kt-usebtn { height: 36px; border: 0; color: #fff; font: 700 12px var(--font-body); background: #ef4444; cursor: pointer; }
.kt-usebtn:hover { background: #dc2626; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) { .kt-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kt-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kt-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .kt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .kt-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-row { flex-wrap: wrap; }
  .kt-main { flex-basis: calc(100% - 50px); }
  .kt-acts { width: 100%; justify-content: flex-end; }
  .kt-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kt-g2:not(.kt-g2-keep) { grid-template-columns: 1fr; }
  .kt-sort { width: 110px; }
  .modal-box.kt-dlg { padding: 20px 16px; }
}

/* --- vault --- */
/* ===================== Phase 5 · Personal Vault (vt-) ===================== */
.vt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vt-dmnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vt-dmnav .vt-dm-home { border: 2px solid #7C3AED; color: #7C3AED; border-radius: 8px; font-size: 12px; }
.vt-dmnav .vt-dm-sep { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.vt-dm { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--c); text-decoration: none; }
.vt-dm .ic { width: 12px; height: 12px; }
.vt-dm:hover { background: hsl(var(--muted) / .6); color: var(--c); }
.vt-dm.on, .vt-dm.on:hover { background: var(--c); color: #fff; }
@media (max-width: 639px) { .vt-dm span { display: none; } }

/* lock screen */
.vt-lockwrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.vt-unlock { width: 100%; max-width: 448px; padding: 24px 24px; text-align: center; border-radius: 16px; }
.vt-unlock-ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; color: hsl(var(--primary-foreground));
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); box-shadow: 0 10px 24px -8px hsl(var(--primary) / .5); }
.vt-unlock-ic .ic { width: 32px; height: 32px; }
.vt-unlock h2 { font-size: 24px; margin: 0 0 6px; }
.vt-unlock-form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; text-align: left; }
.vt-pwfield { position: relative; }
.vt-pwfield > .ic { position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: hsl(var(--muted-foreground)); pointer-events: none; }
.vt-pwfield .input { padding-left: 38px; padding-right: 40px; }
.vt-eye { position: absolute; right: 6px; top: 4px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; }
.vt-eye:hover { color: hsl(var(--foreground)); } .vt-eye .ic { width: 16px; height: 16px; }
.vt-err { color: hsl(var(--destructive)); text-align: center; margin: 0; }
.vt-full { width: 100%; }

/* header + tabs */
.vt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.vt-head h2 { font-size: 24px; margin: 0; }
.vt-head p { margin: 2px 0 0; }
.vt-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 672px; gap: 4px; padding: 4px; border: 0; border-radius: 8px; background: hsl(var(--muted)); margin-bottom: 24px; }
.vt-tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 6px; margin: 0; border: 0; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.vt-tabs .tab .ic { width: 16px; height: 16px; flex: none; }
.vt-tabs .tab.active { background: hsl(var(--background)); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.vt-tabs .tab[data-tab="passwords"].active { background: rgb(59 130 246 / .1); color: #2563eb; }
.vt-tabs .tab[data-tab="payments"].active { background: rgb(168 85 247 / .1); color: #9333ea; }
.vt-tabs .tab[data-tab="banking"].active { background: rgb(16 185 129 / .1); color: #059669; }
.vt-tabs .tab[data-tab="notes"].active { background: rgb(245 158 11 / .1); color: #d97706; }
.dark .vt-tabs .tab[data-tab="passwords"].active { color: #60a5fa; } .dark .vt-tabs .tab[data-tab="payments"].active { color: #c084fc; }
.dark .vt-tabs .tab[data-tab="banking"].active { color: #34d399; } .dark .vt-tabs .tab[data-tab="notes"].active { color: #fbbf24; }
@media (max-width: 639px) { .vt-tabs .tab { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 2px; } }

.vt-sechead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.vt-sechead h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0; }
.vt-sechead h3 .ic { width: 20px; height: 20px; }
.vt-prim { color: hsl(var(--primary)); display: inline-flex; }
.vt-count { font: 400 12px var(--font-body); color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding: 2px 8px; border-radius: 999px; }
.vt-addbtn { color: #fff; border-radius: 12px; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .45); gap: 6px; }
.vt-addbtn:hover { color: #fff; filter: brightness(1.08); }
.vt-addbtn .ic { width: 16px; height: 16px; }
.vt-amber { background: #d97706; border-radius: var(--radius); } .vt-amber:hover { background: #b45309; }

.vt-empty { padding: 64px 16px; text-align: center; border-radius: 16px; border: 2px dashed hsl(var(--border) / .5); background: hsl(var(--muted) / .2); }
.vt-empty p { margin: 2px 0; }
.vt-empty-ic { width: 56px !important; height: 56px !important; margin: 0 auto 12px; opacity: .2; display: block; }
.vt-empty-amber { border: 1px solid rgb(245 158 11 / .2); background: rgb(245 158 11 / .05); color: hsl(var(--muted-foreground)); padding: 48px 16px; border-radius: var(--radius); }
.vt-empty-amber .vt-empty-ic { color: rgb(245 158 11); opacity: .3; width: 48px !important; height: 48px !important; }

.vt-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vt-grid-2, .vt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vt-gap-6 { gap: 24px; } .vt-gap-3 { gap: 12px; }

@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vt-pulse { 50% { opacity: .45; } }
.vt-pulse { animation: vt-pulse 1.2s ease-in-out infinite; }
.vt-mono { font-family: 'Fira Code', ui-monospace, monospace; letter-spacing: .08em; }
.vt-plain { color: hsl(var(--foreground)); word-break: break-all; letter-spacing: .02em; }

/* icon buttons */
.vt-ib { width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: hsl(var(--foreground)); cursor: pointer; text-decoration: none; }
.vt-ib .ic { width: 14px; height: 14px; }
.vt-ib:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.vt-ib.vt-danger { color: hsl(var(--destructive)); }
.vt-ib-w { width: 28px; height: 28px; color: rgb(255 255 255 / .45); }
.vt-ib-w:hover { background: rgb(255 255 255 / .1); color: #fff; }
.vt-ib-w.vt-ib-del:hover { color: #f87171; }
.vt-star.on { color: #eab308; } .vt-star.on .ic { fill: currentColor; }
.vt-ib-w.vt-star { color: rgb(255 255 255 / .35); } .vt-ib-w.vt-star.on { color: #facc15; }

/* password + bank tiles */
.vt-pw { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 4px 20px var(--glow); transition: transform .3s; animation: vt-in .4s ease-out backwards; min-width: 0; }
.vt-pw:hover { transform: translateY(-6px); }
.vt-pw-head { position: relative; height: 96px; display: flex; align-items: center; gap: 12px; padding: 0 20px; overflow: hidden; color: #fff; }
.vt-pw-head::before { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .05); }
.vt-c1, .vt-c2 { position: absolute; border-radius: 50%; background: rgb(255 255 255 / .1); }
.vt-c1 { right: -16px; top: -16px; width: 80px; height: 80px; } .vt-c2 { right: -8px; bottom: -24px; width: 56px; height: 56px; background: rgb(255 255 255 / .05); }
.vt-logo { position: relative; flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: rgb(255 255 255 / .2); backdrop-filter: blur(8px); box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); }
.vt-pw-head .grow { position: relative; }
.vt-pw-head h4 { margin: 0; font: 700 14px var(--font-body); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.vt-pw-head p { margin: 2px 0 0; font-size: 11px; color: rgb(255 255 255 / .6); }
.vt-body { background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .4); border-top: 0; border-radius: 0 0 16px 16px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.vt-line { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.vt-line > .ic { width: 14px; height: 14px; flex: none; color: hsl(var(--muted-foreground)); }
.vt-line .vt-mono { font-size: 12px; }
.vt-actions { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid hsl(var(--border) / .3); }
.vt-bk-head { height: 80px; gap: 12px; }
.vt-logo-sm { width: 44px; height: 44px; } .vt-logo-sm .ic { width: 20px; height: 20px; }
.vt-acct { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.vt-bk-head .vt-ib-w { position: relative; color: rgb(255 255 255 / .6); }
.vt-cap { margin: 0 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--muted-foreground)); }
.vt-body .small { margin: 0; }
.vt-bk-extra { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.vt-bk-extra span { display: inline-flex; align-items: center; gap: 4px; } .vt-bk-extra .ic { width: 12px; height: 12px; }

/* payment cards */
.vt-cc { position: relative; overflow: hidden; aspect-ratio: 1.586 / 1; max-width: 100%; padding: 24px; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  box-shadow: 0 10px 40px var(--glow), 0 0 0 1px rgb(255 255 255 / .05); transition: transform .5s; animation: vt-in .45s ease-out backwards; min-width: 0; }
.vt-cc:hover { transform: translateY(-8px); }
.vt-cc > i { position: absolute; pointer-events: none; }
.vt-cc-lines { inset: 0; opacity: .04; background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgb(255 255 255 / .5) 35px, rgb(255 255 255 / .5) 36px); }
.vt-cc-b1 { right: -64px; top: -64px; width: 192px; height: 192px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 8%, transparent), transparent 70%); }
.vt-cc-b2 { left: -40px; bottom: -40px; width: 144px; height: 144px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 6%, transparent), transparent 70%); }
.vt-cc-top, .vt-cc-bottom, .vt-cc-num { position: relative; }
.vt-cc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.vt-chip { position: relative; width: 48px; height: 36px; border-radius: 4px; box-shadow: 0 4px 10px rgb(0 0 0 / .3); overflow: hidden; }
.vt-chip::before { content: ''; position: absolute; inset: 2px; border-radius: 4px; border: 1px solid rgb(113 63 18 / .2); }
.vt-chip i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(113 63 18 / .15); }
.vt-chip b { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgb(113 63 18 / .1); }
.vt-nfc { display: inline-flex; transform: rotate(90deg); color: color-mix(in srgb, var(--acc) 38%, transparent); } .vt-nfc .ic { width: 20px; height: 20px; }
.vt-net { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: color-mix(in srgb, var(--acc) 56%, transparent); }
.vt-cc-num { margin: auto 0; padding: 8px 0; font-family: 'Fira Code', ui-monospace, monospace; font-size: clamp(16px, 4.6vw, 24px); letter-spacing: .18em; color: rgb(255 255 255 / .9); font-weight: 500; text-shadow: 0 4px 10px rgb(0 0 0 / .4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) and (max-width: 1279px) { .vt-cc-num { font-size: 18px; } }
.vt-dim { color: rgb(255 255 255 / .4); font-size: 16px; }
.vt-cc-bottom { display: flex; flex-direction: column; gap: 8px; }
.vt-cc-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; }
.vt-cc-meta small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: rgb(255 255 255 / .3); font-weight: 500; }
.vt-cc-meta b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.vt-cc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / .06); }
.vt-cc-bank { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 8%, transparent); color: color-mix(in srgb, var(--acc) 80%, transparent); }
@media (max-width: 400px) { .vt-cc { padding: 16px; } .vt-chip { width: 40px; height: 30px; } }

/* notes */
.vt-nt { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px; border-left: 4px solid #6366f1; transition: box-shadow .2s; min-width: 0; }
.vt-nt:hover { box-shadow: 0 6px 18px -8px rgb(0 0 0 / .25); }
.vt-nt-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-width: 0; }
.vt-nt-title .ic { width: 16px; height: 16px; flex: none; }
.vt-nt-cat { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.vt-nt-pre { margin: 8px 0 0; padding: 8px; font: 12px/1.5 'Fira Code', ui-monospace, monospace; border-radius: 4px; background: hsl(var(--muted) / .5); white-space: pre-wrap; word-break: break-all; max-height: 96px; overflow: auto; }
.vt-nt-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.vt-nt-acts .vt-ib { width: 34px; height: 34px; } .vt-nt-acts .vt-ib .ic { width: 16px; height: 16px; }
@media (max-width: 400px) { .vt-nt { flex-direction: column; } .vt-nt-acts { align-self: flex-end; } }

/* modals */
.vt-modal { max-width: 460px; border-radius: 12px; }
.vt-modal h3 { margin: 0 0 4px; font-size: 18px; padding-right: 36px; }
.vt-modal form { margin-top: 16px; }
.vt-modal .field { display: block; }
.vt-g2 { gap: 16px; } @media (max-width: 639px) { .vt-g2.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.vt-swatches { display: flex; gap: 8px; margin-top: 4px; }
.vt-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s; }
.vt-sw.on { border-color: hsl(var(--foreground)); transform: scale(1.1); }

/* --- library --- */
/* ===================== Phase 5 · Personal Library (lb-) ===================== */
.lb { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lb-r { border-radius: 8px; }
.lb-hubnav { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lb-hub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lb-hub-home { border: 2px solid #E74C3C; color: #E74C3C; border-radius: 8px; font-size: 12px; }
.lb-hub-sep { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.lb-hub-a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--c); text-decoration: none; }
.lb-hub-a .ic { width: 12px; height: 12px; }
.lb-hub-a:hover { background: hsl(var(--muted) / .6); color: var(--c); }
.lb-hub-a.on, .lb-hub-a.on:hover { background: var(--c); color: #fff; }
@media (max-width: 639px) { .lb-hub-a span { display: none; } }
.lb-crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; overflow-x: auto; padding-bottom: 4px; }
.lb-crumbs .ic { width: 12px; height: 12px; color: hsl(var(--muted-foreground)); flex: none; }
.lb-crumb, .lb-crumb-home { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.lb-crumb button { border: 0; background: none; padding: 2px 4px; font: 500 12px var(--font-body); color: #3498DB; cursor: pointer; border-radius: 4px; }
.lb-crumb button:hover { text-decoration: underline; }
.lb-crumb b { padding: 2px 4px; }

.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lb-head h2 { font-size: 20px; margin: 0; } .lb-head p { margin: 2px 0 0; }
.lb-logo { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #E74C3C, #C0392B); }
.lb-logo .ic { width: 20px; height: 20px; }

.lb-add { border-left: 4px solid #27AE60; margin-bottom: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.lb-add-h { display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-body); margin: 0; } .lb-add-h .ic { width: 16px; height: 16px; }
.lb-add-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .lb-add-grid { grid-template-columns: 1fr 1fr; } }
.lb-color { width: 56px; height: 36px; padding: 2px; border: 1px solid hsl(var(--input)); border-radius: 4px; background: none; cursor: pointer; flex: none; }
.lb-save { background: #27AE60; color: #fff; } .lb-save:hover { color: #fff; }
.lb-srcs { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid hsl(var(--border) / .5); }
.lb-srcs > p { margin: 0; letter-spacing: .1em; }
.lb-src { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 6%, transparent); min-width: 0; }
.lb-src p { margin: 0; }
.lb-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }

.lb-quick { border-left: 4px solid #E74C3C; padding: 12px; }
.lb-quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-link { position: relative; min-width: min(200px, 100%); flex: 1 1 200px; }
.lb-link .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: hsl(var(--muted-foreground)); pointer-events: none; }
.lb-link .input { padding-left: 36px; }
.lb-red { background: #E74C3C; color: #fff; flex: none; } .lb-red:hover { color: #fff; }
.lb-srcbtn { flex: none; border: 2px solid var(--c); color: var(--c); background: transparent; }
.lb-srcbtn:hover { color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.lb-keynote { margin: 8px 0 0; }

.lb-welcome { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.lb-welcome-in { max-width: 448px; text-align: center; }
.lb-welcome-in h3 { font-size: 18px; margin: 0 0 8px; } .lb-welcome-in > p { margin: 0 0 24px; }
.lb-welcome-ic { width: 96px; height: 96px; margin: 0 auto 24px; border-radius: 16px; display: grid; place-items: center; color: #E74C3C; background: linear-gradient(135deg, #E74C3C20, #C0392B20); }
.lb-welcome-ic .ic { width: 48px; height: 48px; opacity: .6; }
.lb-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.lb-kind { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 6%, transparent); font-size: 12px; font-weight: 600; }
.lb-kind .ic { width: 20px; height: 20px; }
.lb-xl { border-radius: 12px; padding: 0 20px; }
.lb-srcfill { background: var(--c); color: #fff; } .lb-srcfill:hover { color: #fff; }

/* browser */
.lb-main { display: flex; flex-direction: column; gap: 16px; min-height: 75vh; min-width: 0; }
@media (min-width: 1024px) { .lb-main { flex-direction: row; } }
.lb-viewing .lb-main { min-height: calc(100vh - 120px); }
.lb-side { display: flex; flex-direction: column; overflow: hidden; min-width: 0; max-height: 75vh; }
@media (min-width: 1024px) { .lb-side { width: 320px; flex: none; max-height: none; } }
@media (max-width: 1023px) { .lb-viewing .lb-side { display: none; } }
.lb-side-h { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .5); display: flex; flex-direction: column; gap: 8px; }
.lb-folder-ic { color: #FF9800; display: inline-flex; flex: none; } .lb-folder-ic .ic { width: 16px; height: 16px; }
.lb-ib { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: hsl(var(--foreground)); cursor: pointer; text-decoration: none; }
.lb-ib:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.lb-ib .ic { width: 15px; height: 15px; }
.lb-ib-o { width: 32px; height: 26px; border: 1px solid hsl(var(--border)); }
.lb-danger { color: hsl(var(--destructive)); } .lb-danger:hover { color: hsl(var(--destructive)); }
.lb-search { position: relative; }
.lb-search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.lb-search .input { height: 32px; padding-left: 30px; font-size: 12px; }
.lb-stats { display: flex; flex-wrap: wrap; gap: 8px; } .lb-stats:empty { display: none; }
.lb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--c, hsl(var(--muted-foreground)));
  background: color-mix(in srgb, var(--c, #888) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c, #888) 25%, transparent); white-space: nowrap; }
.lb-badge .ic { width: 12px; height: 12px; }
.lb-badge-o { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.lb-list { flex: 1; overflow-y: auto; min-height: 120px; }
.lb-list-in { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.lb-cap { margin: 0; padding: 8px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: hsl(var(--muted-foreground)); }
.lb-cap-files { padding-top: 12px; }
.lb-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; border: 0; border-radius: 8px; background: transparent; color: hsl(var(--foreground)); text-align: left; cursor: pointer; font-family: inherit; transition: transform .15s, background .15s; min-width: 0; }
.lb-item:hover { transform: scale(1.01); background: hsl(var(--accent) / .1); }
.lb-item-f { background: color-mix(in srgb, #FF9800 6%, transparent); }
.lb-item > .ic { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); flex: none; }
.lb-item.on { background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.lb-item-ic { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.lb-item-f .lb-item-ic { background: color-mix(in srgb, #FF9800 15%, transparent); }
.lb-item-ic .ic { width: 16px; height: 16px; }
.lb-item-t { display: flex; flex-direction: column; min-width: 0; }
.lb-item-r { display: flex; align-items: center; gap: 4px; flex: none; }
.lb-item-r a { color: hsl(var(--muted-foreground)); display: inline-flex; } .lb-item-r a:hover { color: hsl(var(--foreground)); } .lb-item-r .ic { width: 12px; height: 12px; }
.lb-ext { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); color: var(--c); line-height: 1.45; }
.lb-loading { display: flex; justify-content: center; padding: 64px 0; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-spin { display: inline-flex; animation: lb-spin 1s linear infinite; } .lb-spin .ic { width: 24px; height: 24px; }
.lb-empty { text-align: center; padding: 48px 12px; color: hsl(var(--muted-foreground)); }
.lb-empty .ic { width: 32px; height: 32px; margin: 0 auto 8px; opacity: .3; display: block; }
.lb-empty p { margin: 0; } .lb-errmsg { color: hsl(var(--destructive)); margin-top: 6px !important; word-break: break-word; }

/* viewer */
.lb-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 550px; min-width: 0; }
.lb-viewing .lb-view { min-height: calc(100vh - 120px); }
.lb-view.lb-full { position: fixed; inset: 0; z-index: 1100; min-height: 0; border: 0; }
body.lb-noscroll { overflow: hidden; }
.lb-pick { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: hsl(var(--muted-foreground)); padding: 24px; }
.lb-pick p { margin: 0 0 4px; } .lb-pick .semibold { color: hsl(var(--foreground)); }
.lb-pick-ic { width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: #E74C3C15; color: #E74C3C; }
.lb-pick-ic .ic { width: 40px; height: 40px; opacity: .5; }
.lb-pick-ext { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.lb-doc { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lb-doc-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); }
.lb-doc-h > .grow { min-width: 80px; }
.lb-doc-ic { display: inline-flex; flex: none; } .lb-doc-ic .ic { width: 16px; height: 16px; }
.lb-doc-acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lb-doc-acts .ic { width: 12px; height: 12px; }
.lb-flipbtn { border-color: #E74C3C; color: #E74C3C; } .lb-flipbtn:hover { color: #E74C3C; }
.lb-dlbtn { color: #059669; border-color: #6ee7b7; } .lb-dlbtn:hover { color: #059669; background: rgb(16 185 129 / .08); }
.lb-doc-b { flex: 1; position: relative; overflow: hidden; background: hsl(var(--muted) / .3); display: flex; min-height: 0; }
.lb-frame-plain { width: 100%; min-height: 550px; flex: 1; border: 0; }
.lb-full .lb-frame-plain { min-height: 0; }

/* smart reader */
.lb-reader { display: flex; flex-direction: column; width: 100%; background: hsl(var(--background)); min-height: calc(100vh - 140px); }
@media (min-width: 1024px) { .lb-reader { flex-direction: row; } }
.lb-rframe { flex: 1; position: relative; min-height: 75vh; background: hsl(var(--muted) / .3); }
.lb-rframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb-wm { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: hsl(var(--foreground) / .4); background: hsl(var(--background) / .6); backdrop-filter: blur(4px); padding: 2px 8px; border-radius: 4px; pointer-events: none; user-select: none; }
.lb-rside { display: flex; flex-direction: column; background: hsl(var(--card) / .4); border-top: 1px solid hsl(var(--border) / .6); min-width: 0; }
@media (min-width: 1024px) { .lb-rside { width: 340px; flex: none; border-top: 0; border-left: 1px solid hsl(var(--border) / .6); } }
.lb-rs-h { padding: 12px 12px; border-bottom: 1px solid hsl(var(--border) / .6); display: flex; flex-direction: column; gap: 8px; }
.lb-rs-h p { margin: 0; }
.lb-rs-logo { width: 32px; height: 32px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f43f5e, #f59e0b); }
.lb-rs-logo .ic { width: 16px; height: 16px; }
.lb-rs-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); font-weight: 600; }
.lb-ib.on { color: #fbbf24; } .lb-ib.on .ic { fill: currentColor; }
.lb-rs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lb-st { border-radius: 8px; padding: 8px; text-align: center; }
.lb-st .ic { width: 14px; height: 14px; display: block; margin: 0 auto 2px; }
.lb-st small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); }
.lb-st b { font-size: 12px; }
.lb-st-g { background: rgb(16 185 129 / .1); } .lb-st-g .ic { color: #059669; } .lb-st-g b { color: #047857; }
.lb-st-b { background: rgb(59 130 246 / .1); } .lb-st-b .ic { color: #2563eb; } .lb-st-b b { color: #1d4ed8; }
.lb-st-a { background: rgb(245 158 11 / .1); } .lb-st-a .ic { color: #d97706; } .lb-st-a b { color: #b45309; }
.dark .lb-st-g b { color: #34d399; } .dark .lb-st-b b { color: #60a5fa; } .dark .lb-st-a b { color: #fbbf24; }
.lb-rs-page { display: flex; align-items: center; gap: 8px; }
.lb-rs-page label { flex: none; }
.lb-pg { width: 64px; height: 32px; font-size: 12px; padding: 0 8px; }
.lb-rs-page .ic { width: 14px; height: 14px; }
.lb-rs-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 12px 0; padding: 2px; gap: 2px; border-radius: 8px; background: hsl(var(--muted)); }
.lb-rs-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; border: 0; border-radius: 4px; background: none; font: 500 12px var(--font-body); color: hsl(var(--muted-foreground)); cursor: pointer; }
.lb-rs-tabs button .ic { width: 12px; height: 12px; }
.lb-rs-tabs button.on { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.lb-rs-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; min-height: 200px; overflow: hidden; }
.lb-rs-form { display: flex; flex-direction: column; gap: 6px; }
.lb-ta { min-height: 70px; height: 70px; font-size: 12px; padding: 8px; }
.lb-in { height: 32px; font-size: 12px; }
.lb-w100 { width: 100%; } .lb-ml { margin-left: auto; } .lb-rs-form .ic { width: 12px; height: 12px; }
.lb-hlc { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.lb-hlc.on { border-color: hsl(var(--foreground)); }
.lb-rs-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; max-height: 50vh; }
@media (min-width: 1024px) { .lb-rs-list { max-height: none; } }
.lb-rs-it { border: 1px solid hsl(var(--border)); background: hsl(var(--background)); border-radius: 8px; padding: 8px; font-size: 12px; }
.lb-rs-it p { margin: 0; line-height: 1.6; }
.lb-pre { white-space: pre-wrap; word-break: break-word; }
.lb-rs-ith { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lb-pgb { font-size: 11px; padding: 0 6px; border-radius: 999px; background: hsl(var(--secondary, var(--muted))); color: hsl(var(--secondary-foreground, var(--foreground))); line-height: 1.3; }
.lb-del { border: 0; background: none; padding: 0; color: hsl(var(--destructive)); cursor: pointer; opacity: 0; transition: opacity .15s; display: inline-flex; }
.lb-del .ic { width: 12px; height: 12px; }
.lb-rs-it:hover .lb-del, .lb-del:focus-visible { opacity: 1; }
@media (hover: none) { .lb-del { opacity: .7; } }
.lb-hl { border: 0; border-left: 4px solid var(--h); background: color-mix(in srgb, var(--h) 33%, transparent); }
.lb-bm { display: flex; align-items: center; gap: 8px; }
.lb-bm > .ic { width: 14px; height: 14px; color: hsl(var(--primary)); flex: none; }
.lb-set { border: 0; background: none; font-size: 11px; color: hsl(var(--primary)); cursor: pointer; }
.lb-set:hover { text-decoration: underline; }
.lb-rs-empty { text-align: center; padding: 32px 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.lb-rs-empty .ic { width: 32px; height: 32px; margin: 0 auto 4px; display: block; opacity: .3; }
.lb-rs-empty p { margin: 0; }
.lb-rs-foot { padding: 8px 12px; border-top: 1px solid hsl(var(--border) / .6); font-size: 11px; text-align: center; color: hsl(var(--muted-foreground)); }

/* flipbook */
.lb-fb { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; background: hsl(var(--background) / .95); backdrop-filter: blur(4px); animation: fadeup .2s ease-out; }
.lb-fb[hidden] { display: none; }
.lb-fb-top { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); min-width: 0; }
.lb-fb-book-ic { color: #E74C3C; display: inline-flex; } .lb-fb-book-ic .ic { width: 20px; height: 20px; }
.lb-fb-badge { --c: #E74C3C; border: 0; }
@media (max-width: 480px) { .lb-fb-badge { display: none; } }
.lb-fb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.lb-fb-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #E74C3C; text-align: center; padding: 16px; }
.lb-fb-load[hidden] { display: none; }
.lb-fb-load .ic { width: 32px; height: 32px; }
.lb-fb-book { position: relative; display: flex; perspective: 2400px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .45); }
.lb-fb-book[hidden] { display: none; }
.lb-fb-pg { width: var(--pw); height: var(--ph); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; position: relative; }
.lb-fb-pg[hidden] { display: none; }
.lb-fb-pg canvas, .lb-leaf-face canvas, .lb-leaf-s canvas { display: block; max-width: 100%; max-height: 100%; }
.lb-fb-l { box-shadow: inset -18px 0 24px -18px rgb(0 0 0 / .35); }
.lb-fb-r { box-shadow: inset 18px 0 24px -18px rgb(0 0 0 / .35); }
.lb-fb-pg.blank { background: transparent; box-shadow: none; cursor: default; }
.lb-fb-book:has(.lb-fb-l.blank) { box-shadow: none; }
.lb-fb-book:has(.lb-fb-l.blank) .lb-fb-r { box-shadow: 0 25px 50px -12px rgb(0 0 0 / .45); }
.lb-leaf { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.45, .05, .35, 1); z-index: 3; pointer-events: none; }
.lb-leaf.fwd { left: var(--pw); transform-origin: left center; }
.lb-leaf.bwd { left: 0; transform-origin: right center; }
.lb-leaf.fwd.go { transform: rotateY(-180deg); }
.lb-leaf.bwd.go { transform: rotateY(180deg); }
.lb-leaf-face { position: absolute; inset: 0; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-leaf-face.blank { background: #f8f8f8; }
.lb-leaf-back { transform: rotateY(180deg); }
.lb-leaf.fwd .lb-leaf-face:not(.lb-leaf-back) { box-shadow: inset 18px 0 24px -18px rgb(0 0 0 / .35); }
.lb-leaf.fwd .lb-leaf-back, .lb-leaf.bwd .lb-leaf-face:not(.lb-leaf-back) { box-shadow: inset -18px 0 24px -18px rgb(0 0 0 / .35); }
.lb-leaf-s { position: absolute; inset: 0; background: #fff; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.lb-leaf-s.fwd { animation: lb-out-l .45s ease-in forwards; }
.lb-leaf-s.bwd { animation: lb-out-r .45s ease-in forwards; }
@keyframes lb-out-l { to { transform: translateX(-60%) rotateY(35deg); opacity: 0; } }
@keyframes lb-out-r { to { transform: translateX(60%) rotateY(-35deg); opacity: 0; } }
.lb-fb-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; border-top: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); }
.lb-fb-foot[hidden] { display: none; }
.lb-fb-pos { padding: 0 8px; }

/* ===================== Phase 6 — integration & go-live ===================== */

/* --- identity --- */
/* ===== Phase 6 · identity (Google sign-in + SSO integrations) — prefix id- ===== */
/* login page: "or continue with" divider + Google button (Lovable outline style) */
.id-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.id-or::before, .id-or::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border)); }
.id-google { width: 100%; justify-content: center; gap: 8px; background: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 600; }
.id-google:hover { background: hsl(var(--muted) / .6); border-color: hsl(var(--primary) / .4); }
.id-g { width: 18px; height: 18px; flex: none; }

/* admin → integrations */
.id-kpis .kpi { min-width: 0; }
.id-kpis .kpi .n { font-size: 20px; }
.id-tile { width: 38px; height: 38px; flex: none; }
.id-app { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-left: 3px solid hsl(38 92% 50% / .7); }
.id-app.id-ok { border-left-color: hsl(var(--primary)); }
.id-app-head { display: flex; gap: 8px; align-items: center; min-width: 0; }
.id-app-head > div { min-width: 0; }
.id-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.id-dl dt { color: hsl(var(--muted-foreground)); font-size: 12px; }
.id-dl dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.id-dl .ic { width: 14px; height: 14px; }
.id-url .mono { font-size: 12px; overflow-wrap: anywhere; word-break: break-all; }
.id-warn { color: hsl(38 92% 42%); display: inline-flex; align-items: center; gap: 4px; }
.dark .id-warn { color: hsl(38 92% 60%); }
.id-problems { margin: 0; padding: 8px 12px; list-style: none; font-size: 12px; background: hsl(38 92% 50% / .08); border: 1px solid hsl(38 92% 50% / .3); }
.id-problems li { display: flex; gap: 6px; align-items: center; }
.id-problems .ic { width: 14px; height: 14px; color: hsl(38 92% 45%); }
.id-steps { margin: 8px 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.id-steps li { margin-bottom: 6px; overflow-wrap: anywhere; }
.id-steps .mono { font-size: 12px; background: hsl(var(--muted) / .7); padding: 0 4px; }
.id-pre { margin: 8px 0; font-size: 12px; white-space: pre; overflow-x: auto; max-width: 100%; }
.id-secret { display: flex; gap: 8px; align-items: center; padding: 8px 8px; background: hsl(var(--muted) / .6); border: 1px dashed hsl(var(--border)); }
.id-secret code { flex: 1; min-width: 0; font-size: 12px; overflow-wrap: anywhere; word-break: break-all; }
.id-grid > * { min-width: 0; }
@media (max-width: 639px) { .id-dl { grid-template-columns: 1fr; gap: 2px; } .id-dl dd { margin-bottom: 6px; } }

/* --- ops --- */
/* ===================== Phase 6 — ops (analytics, backups) ===================== */
.op-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.op-stats.op-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .op-stats, .op-stats.op-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.op-stat { --op-c: #6366f1; min-width: 0; }
.op-stat-ic { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
  background: color-mix(in srgb, var(--op-c) 12%, transparent); color: var(--op-c); }
.op-stat-ic .ic { width: 20px; height: 20px; }
.op-stat-n { font: 800 24px/1.15 var(--font-head); overflow-wrap: anywhere; }
.op-stat-n.op-stat-sm { font-size: 18px; }
.op-h { font: 700 14px/1.3 var(--font-head); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-h .ic { width: 16px; height: 16px; color: hsl(var(--primary)); }
.op-range { width: auto; min-width: 140px; }
.op-chart { position: relative; width: 100%; }
.op-none { text-align: center; color: hsl(var(--muted-foreground)); padding: 32px 8px; margin: 0; }
.op-none.sm { padding: 16px 8px; }
.op-list { display: flex; flex-direction: column; gap: 8px; }
.op-scroll { overflow-y: auto; }
.op-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px; border: 1px solid hsl(var(--border)); border-radius: 4px; min-width: 0; }
.op-num { width: 22px; flex: none; }
.op-min0 { min-width: 0; }
.op-pill { font-size: 11px; white-space: nowrap; padding: 2px 8px; border-radius: 4px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-weight: 600; }
.op-bar-row { position: relative; border-radius: 4px; }
.op-bar { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: hsl(var(--primary) / .08); }
.op-bar-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px; min-width: 0; }
.op-bar-in a { color: inherit; }
.op-bar-in a:hover { color: hsl(var(--primary)); }
.op-tw { border-left: 0; border-right: 0; border-bottom: 0; }
.op-table td { font-size: 13px; }
.op-trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-maxw { max-width: 220px; }
.op-ic-sm .ic { width: 14px; height: 14px; }
.op-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: op-pulse 1.8s infinite; vertical-align: middle; }
.op-live-dot[hidden] { display: none; }
@keyframes op-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.op-live-list { display: flex; flex-wrap: wrap; gap: 6px; }
.op-live-chip { font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-ol { padding-left: 18px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.op-danger { color: hsl(var(--destructive)); }
.op .mono { overflow-wrap: anywhere; }
.op-table .mono, .op-table .nowrap { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 639px) {
  .op-stat-n { font-size: 20px; }
  .op-trunc, .op-maxw { max-width: 150px; }
  .op .admin-title { flex-wrap: wrap; gap: 8px; }
}

/* --- toolbox --- */
/* =====================================================================
   Toolbox (Phase 6) — /toolbox shell + every tool (prefix tb-) and Pulse detail (pu-).
   Appended after the Phase-3 .tb-* rules in app.css; overrides them where needed.
   Radii follow the Lovable theme: rounded-lg/md = 0, rounded-xl = 12px, rounded-2xl = 16px.
   ===================================================================== */

/* ---------- page shell (Playground.tsx) ---------- */
.tb-page { padding: 8px 0 0; } [data-tb-grid], [data-tb-view] { margin-top: 24px; }
.tb-hero { border-radius: 16px; padding: 24px 32px; border: 1px solid hsl(var(--border) / .3); }
.tb-hero-l { display: grid; gap: 6px; }
.tb-title-grad { background: linear-gradient(90deg, hsl(var(--foreground)), hsl(var(--primary)), hsl(var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(30px, 4vw, 36px); }
.tb-sub { margin: 2px 0 0; font-size: 11px; color: hsl(var(--muted-foreground)); }
.tb-lede { margin: 0; max-width: 32rem; } .tb-primary { color: hsl(var(--primary)); }
.tb-logo { border-radius: 16px; box-shadow: 0 10px 24px -8px hsl(var(--primary) / .35); }
.tb-pill { border-radius: 12px; background: hsl(var(--background) / .6); border-color: hsl(var(--border) / .5); backdrop-filter: blur(8px); }
.tb-pill b { font-size: 24px; } .tb-grad-a, .tb-grad-b { -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-grad-a { background-image: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); } .tb-grad-b { background-image: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--primary))); }

.tb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .tb-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .tb-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tb-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tb-cat { padding: 16px; border-radius: 16px; border: 2px solid hsl(var(--border) / .3); transition: transform .3s, box-shadow .3s, border-color .3s; }
.tb-cat:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); border-color: hsl(var(--border) / .6); }
.tb-cat.open { border-color: hsl(var(--primary) / .4); box-shadow: 0 0 0 2px hsl(var(--primary) / .2), 0 10px 15px -3px hsl(var(--primary) / .1); }
.tb-cat .tb-cat-bar { background: var(--g90); height: 4px; opacity: .5; transition: all .3s; } .tb-cat:hover .tb-cat-bar { opacity: 1; } .tb-cat.open .tb-cat-bar { opacity: 1; height: 6px; }
.tb-cat-glow { position: absolute; inset: 0; background: var(--g); opacity: 0; transition: opacity .5s; pointer-events: none; } .tb-cat:hover .tb-cat-glow { opacity: .04; } .tb-cat.open .tb-cat-glow { opacity: .06; }
.tb-cat-emoji { position: relative; width: auto; height: auto; padding: 12px; border-radius: 16px; font-size: 24px; line-height: 1; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15); transition: transform .3s; }
.tb-cat:hover .tb-cat-emoji { transform: scale(1.1); } .tb-cat-emoji.sm { padding: 8px; border-radius: 12px; font-size: 20px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .15); }
.tb-cat b { position: relative; font-size: 12px; line-height: 1.3; background: var(--g90); -webkit-background-clip: text; background-clip: text; } @media (min-width: 640px) { .tb-cat b { font-size: 14px; } }
.tb-cat > span { position: relative; }
.tb-count { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--g90); }
.tb-search { max-width: 28rem; } .tb-search .input { border-radius: 12px; padding-right: 32px; } .tb-search-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 2px; cursor: pointer; color: hsl(var(--muted-foreground)); } .tb-search-x .ic { position: static; transform: none; width: 14px; height: 14px; }
.tb-panels { display: grid; gap: 16px; margin-top: 20px; }
.tb-panel { padding: 0; border-radius: 16px; overflow: hidden; border-color: hsl(var(--border) / .4); animation: tb-in .35s ease; }
.tb-panel-top { position: relative; padding: 20px; border-bottom: 1px solid hsl(var(--border) / .3); background: linear-gradient(0deg, transparent, transparent), hsl(var(--card)); }
.tb-panel-top::after { content: ''; position: absolute; inset: 0; background: var(--g); opacity: .03; pointer-events: none; }
.tb-panel-top .tb-cat-bar { background: var(--g90); opacity: 1; height: 4px; }
.tb-panel-head { position: relative; margin: 0; z-index: 1; } .tb-panel-title { margin: 0; font: 700 18px var(--font-head); background: var(--g90); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-benefit { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 8px; border-radius: 999px; border: 1px solid hsl(var(--border) / .4); background: hsl(var(--background) / .6); color: hsl(var(--muted-foreground)); } .tb-benefit .ic { width: 10px; height: 10px; }
.tb-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
@media (min-width: 640px) { .tb-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px; } } @media (min-width: 768px) { .tb-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tb-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1280px) { .tb-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tb-tool { gap: 2px; padding: 12px; overflow: hidden; border-radius: 12px; border: 2px solid hsl(var(--border) / .3); background: hsl(var(--background)); animation: tb-in .3s ease both; }
.tb-tool:hover { border-color: hsl(var(--border) / .3); transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
.tb-tool::after { content: ''; position: absolute; inset: 0; background: var(--tg); opacity: 0; transition: opacity .2s; pointer-events: none; } .tb-tool:hover::after { opacity: .05; }
.tb-tool-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tg90); opacity: .4; transition: all .2s; } .tb-tool:hover .tb-tool-bar { opacity: 1; height: 4px; }
.tb-tool .tb-tool-ic { width: auto; height: auto; justify-self: start; padding: 8px; border-radius: 0; color: #fff; background: var(--tg); margin-bottom: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .1); transition: transform .2s; } .tb-tool:hover .tb-tool-ic { transform: scale(1.1); }
.tb-tool .tb-tool-ic .ic { width: 16px; height: 16px; }
.tb-tool b { font-size: 12px; font-weight: 700; line-height: 1.3; transition: color .2s; } .tb-tool:hover b { color: hsl(var(--primary)); } .tb-tool small { font-size: 11px; line-height: 1.3; }
.tb-tags { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; } .tb-tags span { font-size: 11px; padding: 2px 6px; border-radius: 999px; background: hsl(var(--muted) / .7); color: hsl(var(--muted-foreground)); }
.tb-tool .tb-open { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 6px; padding: 4px 0; font-size: 11px; font-weight: 600; color: #fff; background: var(--tg90); opacity: 0; } .tb-tool .tb-open .ic { width: 12px; height: 12px; } .tb-tool:hover .tb-open { opacity: 1; }
@media (hover: none) { .tb-tool .tb-open { opacity: 1; } }
.tb-tool > * { position: relative; z-index: 1; } .tb-tool > .tb-tool-bar { position: absolute; }
.tb-empty { text-align: center; padding: 64px 0; display: grid; gap: 12px; justify-items: center; } .tb-empty > .ic { width: 40px; height: 40px; color: hsl(var(--muted-foreground) / .4); } .tb-empty p { margin: 0; } .tb-empty a { font-size: 14px; color: hsl(var(--primary)); }
.tb-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: hsl(var(--muted-foreground)); } .tb-back:hover { color: hsl(var(--foreground)); } .tb-back .ic { width: 16px; height: 16px; transition: transform .2s; } .tb-back:hover .ic { transform: translateX(-2px); }
.tb-toolcard { padding: 24px; border-radius: 16px; border-color: hsl(var(--border) / .4); box-shadow: 0 1px 2px rgb(0 0 0 / .05); animation: tb-in .3s ease; } @media (min-width: 640px) { .tb-toolcard { padding: 32px; } }
.tb-toolcard > .tb-cat-bar { background: var(--g90); height: 4px; opacity: 1; }
.tb-toolhead { align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid hsl(var(--border) / .3); }
.tb-toolhead h2 { font: 700 20px var(--font-head); } .tb-toolhead .tb-tool-ic.big { width: auto; height: auto; padding: 8px; border-radius: 12px; color: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .15); flex: 0 0 auto; } .tb-toolhead .tb-tool-ic.big .ic { width: 20px; height: 20px; }
.tb-catchip { display: none; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); white-space: nowrap; } @media (min-width: 640px) { .tb-catchip { display: inline-flex; } }
.tb-body { min-width: 0; }
.tb-rel-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); } .tb-rel-h .ic { width: 14px; height: 14px; }
.tb-related { gap: 8px; padding-bottom: 4px; }
.tb-related .tb-rel { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid hsl(var(--border) / .4); background: hsl(var(--card)); color: inherit; text-align: left; transition: background .2s; } .tb-rel:hover { background: hsl(var(--muted) / .6); color: inherit; }
.tb-rel-ic { display: grid; place-items: center; padding: 4px; color: #fff; } .tb-rel-ic .ic { width: 12px; height: 12px; } .tb-rel b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; } .tb-rel small { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); } .tb-rel > .ic { width: 12px; height: 12px; color: hsl(var(--muted-foreground)); }
.tb-credit { margin-top: 64px; border-top: 1px solid hsl(var(--border) / .4); background: hsl(var(--muted) / .3); padding: 16px; text-align: center; } .tb-credit p { margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); } .tb-credit b { color: hsl(var(--foreground)); } .tb-credit a { color: hsl(var(--primary)); }
.tb-lab { min-width: 0; }
@keyframes tb-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tb-pop { from { transform: scaleY(0); } to { transform: none; } }
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* ---------- tool primitives (ResultBox, TabButton, SmallInput, Button …) ---------- */
.tb-body .grow { flex: 1 1 auto; min-width: 0; }
.tb-v1, .tb-v2, .tb-v3, .tb-v4, .tb-v5, .tb-v6 { display: grid; min-width: 0; } .tb-v1 { gap: 4px; } .tb-v2 { gap: 8px; } .tb-v3 { gap: 12px; } .tb-v4 { gap: 16px; } .tb-v5 { gap: 20px; } .tb-v6 { gap: 24px; }
.tb-v1 > *, .tb-v2 > *, .tb-v3 > *, .tb-v4 > *, .tb-v5 > *, .tb-v6 > * { min-width: 0; }
.tb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; min-width: 0; }
.tb-between { justify-content: space-between; } .tb-center { text-align: center; justify-content: center; justify-items: center; }
.tb-hint { margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.tb-lbl { display: block; margin-bottom: 2px; font-size: 11px; color: hsl(var(--muted-foreground)); }
.tb-xs { font-size: 12px; } .tb-xxs { font-size: 11px; } .tb-bold { font-weight: 700; } .tb-pb { padding-bottom: 6px; }
.tb-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-scroll { overflow: auto; }
.tb-i { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; } .tb-i12 { width: 12px; height: 12px; } .tb-i14 { width: 14px; height: 14px; } .tb-i20 { width: 20px; height: 20px; } .tb-i24 { width: 24px; height: 24px; } .tb-i32 { width: 32px; height: 32px; } .tb-i40 { width: 40px; height: 40px; margin: 0 auto 8px; display: block; }
.tb-in { max-width: 100%; padding: 6px 8px; font: 14px var(--font-body); color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s; }
.tb-in:focus, .tb-ta:focus { border-color: hsl(var(--primary) / .5); box-shadow: 0 0 0 2px hsl(var(--primary) / .15); }
.tb-in.mono, .tb-ta.mono, .mono { font-family: var(--font-mono); } .tb-sel { width: auto; cursor: pointer; }
.tb-ta { width: 100%; padding: 8px 12px; font: 14px/1.5 var(--font-body); color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 12px; resize: none; outline: none; } .tb-ta.sm { font-size: 12px; } .tb-ta.mono { font-family: var(--font-mono); }
.tb-si { min-width: 0; }
.tb-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; font: 500 14px var(--font-body); white-space: nowrap; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: opacity .2s, background .2s; text-decoration: none; }
.tb-b .tb-i { width: 16px; height: 16px; } .tb-b:disabled { opacity: .5; pointer-events: none; }
.tb-b-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .tb-b-primary:hover { opacity: .9; }
.tb-b-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .tb-b-secondary:hover { background: hsl(var(--secondary) / .8); }
.tb-b-outline { background: hsl(var(--background)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); } .tb-b-outline:hover { background: hsl(var(--muted)); }
.tb-b-destructive { background: hsl(var(--destructive)); color: #fff; } .tb-b-grad { color: #fff; border: 0; } .tb-b-grad:hover { opacity: .92; color: #fff; }
.tb-full { width: 100%; } .tb-lg { height: 44px; padding: 0 32px; font-size: 14px; } .tb-xsbtn { height: 24px; padding: 0 8px; font-size: 11px; gap: 4px; }
.tb-tabbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: 12px var(--font-body); color: hsl(var(--foreground)); background: none; border: 1px solid hsl(var(--border)); border-radius: 999px; cursor: pointer; transition: all .2s; text-transform: none; }
.tb-tabbtn:hover { background: hsl(var(--muted)); } .tb-tabbtn.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .tb-tabbtn.dashed { border-style: dashed; } .tb-tabbtn.sm { padding: 4px 8px; font-size: 11px; color: hsl(var(--muted-foreground)); } .tb-tabbtn.sm.on { color: hsl(var(--primary-foreground)); } .tb-tabbtn .tb-i { width: 12px; height: 12px; }
.tb-rb { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 8px; font-size: 12px; background: hsl(var(--muted) / .5); }
.tb-rb-l { margin-right: 8px; color: hsl(var(--muted-foreground)); flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; } .tb-rb-v { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); min-width: 0; }
.tb-rb-v > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.tb-cbtn { flex: 0 0 auto; display: inline-grid; place-items: center; padding: 4px; border: 0; border-radius: 4px; background: none; cursor: pointer; color: hsl(var(--muted-foreground)); } .tb-cbtn:hover { background: hsl(var(--muted)); } .tb-cbtn .tb-i { width: 14px; height: 14px; }
.tb-grid { display: grid; gap: 6px; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); min-width: 0; } @media (min-width: 640px) { .tb-grid { grid-template-columns: repeat(var(--sc, var(--c, 2)), minmax(0, 1fr)); } }
.tb-box-muted { padding: 12px; background: hsl(var(--muted) / .5); min-width: 0; }
.tb-item { display: block; padding: 12px; background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border) / .3); color: inherit; min-width: 0; } .tb-item-link:hover { border-color: hsl(var(--primary) / .4); color: inherit; }
.tb-tag { display: inline-block; flex: 0 0 auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--foreground)); white-space: nowrap; } .tb-tag.primary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } .tb-tag.accent { background: hsl(var(--accent) / .3); } .tb-tag.outline { background: none; border: 1px solid hsl(var(--border)); }
.tb-code-xs { margin: 0; font: 10px/1.5 var(--font-mono); color: hsl(var(--muted-foreground)); white-space: pre-wrap; overflow: auto; background: none; padding: 0; }
.tb-pre-sm { margin: 0; padding: 12px; font: 12px/1.5 var(--font-mono); white-space: pre; overflow: auto; background: hsl(var(--muted) / .5); } .tb-pre-sm.wrap { white-space: pre-wrap; font-size: 11px; word-break: break-word; }
.tb-meter { height: 6px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: hsl(var(--muted)); } .tb-meter i { display: block; height: 100%; border-radius: 999px; }
.tb-key { padding: 4px 8px; font-size: 12px; color: inherit; border: 0; border-radius: 4px; background: hsl(var(--muted)); cursor: pointer; } .tb-key:hover { background: hsl(var(--muted) / .8); }
.tb-cell { width: 100%; padding: 4px 6px; font-size: 12px; text-align: center; border-radius: 4px; }
.tb-err { margin: 0; font-size: 12px; color: hsl(var(--destructive)); }
.tb-outbox { position: relative; min-width: 0; } .tb-outbox > pre { margin: 0; padding: 12px; font-size: 12px; border-radius: 12px; background: hsl(var(--muted) / .5); overflow: auto; } .tb-outbox-cp { position: absolute; top: 8px; right: 8px; }
.tb-match { padding: 2px 8px; font-size: 12px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.tb-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; padding-bottom: 4px; }
.tb-ring { position: relative; width: 144px; height: 144px; margin: 0 auto; } .tb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .tb-ring circle { transition: stroke-dasharray .3s; } .tb-ring > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; }
.tb-link { padding: 0; font: 12px var(--font-body); color: hsl(var(--primary)); background: none; border: 0; cursor: pointer; } .tb-link:hover { text-decoration: underline; }
.tb-spin { display: inline-block; animation: tb-spin 1s linear infinite; }
.tb-h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; } .tb-h4 .tb-i { width: 14px; height: 14px; }
.tb-num { flex: 0 0 auto; padding: 2px 6px; font: 12px var(--font-mono); border-radius: 4px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.tb-x { opacity: 0; margin-left: 2px; padding: 0; font-size: 12px; line-height: 1; border: 0; background: none; color: hsl(var(--destructive)); cursor: pointer; }

/* ---------- design tools ---------- */
.tb-strip-sw { display: flex; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); }
.tb-strip-sw > button { position: relative; flex: 1; border: 0; padding: 0; cursor: pointer; transition: flex .3s; } .tb-strip-sw > button:hover { flex: 2; }
.tb-strip-sw > button span { position: absolute; left: 0; right: 0; bottom: 4px; font: 8px var(--font-mono); color: #fff; text-align: center; text-shadow: 0 1px 3px rgb(0 0 0 / .6); opacity: 0; transition: opacity .2s; } .tb-strip-sw > button:hover span { opacity: 1; }
.tb-anim > * { transform-origin: bottom; animation: tb-pop .4s ease both; } .tb-anim > *:nth-child(2) { animation-delay: .05s; } .tb-anim > *:nth-child(3) { animation-delay: .1s; } .tb-anim > *:nth-child(4) { animation-delay: .15s; } .tb-anim > *:nth-child(5) { animation-delay: .2s; } .tb-anim > *:nth-child(n+6) { animation-delay: .25s; }
.tb-chip { padding: 4px 8px; font-size: 11px; border-radius: 999px; border: 1px solid hsl(var(--border)); }
.tb-sw16 { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 12px; border: 2px solid hsl(var(--border)); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15); }
.tb-bar16 { height: 16px; border-radius: 4px; }
.tb-color { padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; flex: 0 0 auto; }
.tb-range { accent-color: hsl(var(--primary)); max-width: 100%; }
.tb-grad-prev { height: 128px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15); }
code.tiny-code { font-size: 12px; word-break: break-all; background: none; padding: 0; } code.tiny-code.pre { white-space: pre-wrap; }
.tb-contrast-prev { padding: 24px; border-radius: 12px; text-align: center; font-size: 18px; font-weight: 700; }
.tb-pass { padding: 8px; background: hsl(var(--muted) / .5); } .tb-pass.ok { background: rgb(34 197 94 / .1); color: #16a34a; } .tb-pass.no { background: rgb(239 68 68 / .1); color: #ef4444; }
.tb-card-sm { padding: 12px; border-radius: 12px; border: 1px solid hsl(var(--border) / .4); background: hsl(var(--card)); min-width: 0; }
.tb-pill-grad { flex: 0 0 auto; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 999px; color: #9333ea; background: linear-gradient(90deg, rgb(168 85 247 / .2), rgb(236 72 153 / .2)); } .dark .tb-pill-grad { color: #c084fc; }
.tb-checker { display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 12px; border: 1px dashed hsl(var(--border) / .6); background: repeating-conic-gradient(hsl(var(--muted)) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px; overflow: auto; }
.tb-searchbox { position: relative; } .tb-searchbox > .tb-i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; } .tb-searchbox > .tb-in { padding-left: 36px; border-radius: 12px; }
.tb-icons { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (min-width: 640px) { .tb-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 768px) { .tb-icons { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tb-icons button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; color: inherit; border-radius: 12px; border: 1px solid hsl(var(--border) / .4); background: hsl(var(--card)); cursor: pointer; transition: all .2s; min-width: 0; }
.tb-icons button:hover { border-color: rgb(139 92 246 / .3); background: linear-gradient(135deg, rgb(139 92 246 / .1), rgb(217 70 239 / .1)); } .tb-icons svg { width: 24px; height: 24px; transition: transform .2s; } .tb-icons button:hover svg { transform: scale(1.1); }
.tb-icons span { width: 100%; font-size: 11px; color: hsl(var(--muted-foreground)); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-drop { display: block; padding: 32px; text-align: center; border-radius: 12px; border: 2px dashed hsl(var(--border)); transition: all .2s; cursor: default; } .tb-drop.drag { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); }
.tb-pill-btn { display: inline-block; margin-top: 12px; padding: 8px 16px; font-size: 12px; color: #fff; border-radius: 999px; cursor: pointer; transition: opacity .2s; } .tb-pill-btn:hover { opacity: .9; }
.tb-shadow-stage { display: flex; align-items: center; justify-content: center; padding: 48px; border-radius: 12px; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); } .dark .tb-shadow-stage { background: linear-gradient(135deg, #1e293b, #0f172a); }
.tb-shadow-box { width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #0f172a; background: #fff; border-radius: 16px; } .dark .tb-shadow-box { background: #334155; color: #f8fafc; }
.tb-mini { padding: 4px 8px; font-size: 12px; color: inherit; border: 0; border-radius: 4px; background: hsl(var(--muted)); cursor: pointer; } .tb-mini.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tb-radius-stage { display: flex; align-items: center; justify-content: center; padding: 32px; border-radius: 12px; background: linear-gradient(135deg, #fce7f3, #f3e8ff); } .dark .tb-radius-stage { background: linear-gradient(135deg, rgb(131 24 67 / .2), rgb(88 28 135 / .2)); }
.tb-glass-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 32px; border-radius: 12px; overflow: hidden; }
.tb-glass-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; opacity: .5; font-size: 36px; }
.tb-glass-card { position: relative; z-index: 1; padding: 24px 32px; border-radius: 16px; color: #fff; text-align: center; } .tb-glass-card h4 { margin: 0; font-size: 18px; font-weight: 700; color: #fff; } .tb-glass-card p { margin: 0; font-size: 14px; opacity: .8; }
.tb-scale-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px; border-radius: 4px; background: hsl(var(--muted) / .4); }

/* ---------- GeoData converter ---------- */
.tb-fmt { display: inline-block; padding: 4px 8px; font-size: 11px; font-weight: 500; color: #fff; border-radius: 999px; white-space: nowrap; }
.tb-filechip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); cursor: pointer; transition: all .2s; animation: tb-in .25s ease; }
.tb-filechip:hover { background: hsl(var(--muted) / .6); } .tb-filechip:hover .tb-x { opacity: 1; } .tb-filechip.on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-weight: 500; }
.tb-conv { display: grid; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid hsl(var(--border) / .3); background: linear-gradient(135deg, hsl(var(--muted) / .4), hsl(var(--muted) / .2)); min-width: 0; }
.tb-fmtgrid { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (min-width: 640px) { .tb-fmtgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.tb-fmtgrid button { padding: 8px 4px; text-align: center; color: inherit; border: 1px solid hsl(var(--border) / .5); background: none; cursor: pointer; transition: all .2s; } .tb-fmtgrid button:hover { background: hsl(var(--muted) / .6); } .tb-fmtgrid button.on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); box-shadow: 0 1px 2px rgb(0 0 0 / .1); transform: scale(1.05); }
.tb-colmap { padding: 8px; background: hsl(var(--background) / .6); }
.tb-tablebox { max-height: 12rem; overflow: auto; border: 1px solid hsl(var(--border) / .3); } .tb-dtable { width: 100%; font-size: 12px; border-collapse: collapse; }
.tb-dtable thead { position: sticky; top: 0; background: hsl(var(--muted)); } .tb-dtable th { padding: 6px 8px; text-align: left; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; } .tb-dtable td { max-width: 120px; padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid hsl(var(--border) / .2); } .tb-dtable tr:hover td { background: hsl(var(--muted) / .3); }
.tb-mapbox { height: 350px; border-radius: 12px; border: 1px solid hsl(var(--border) / .4); overflow: hidden; z-index: 0; position: relative; }

/* ---------- research ---------- */
.tb-cite-out { padding: 16px; border-radius: 12px; background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border) / .5); } .tb-cite-out pre { margin: 0; font: 14px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-word; background: none; padding: 0; }
.tb-freq { display: flex; align-items: center; gap: 8px; font-size: 12px; } .tb-freqbar { flex: 1; height: 16px; overflow: hidden; border-radius: 999px; background: hsl(var(--muted) / .5); } .tb-freqbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary) / .6), hsl(var(--primary))); transition: width .3s; }
.tb-rt-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--primary)); border-radius: 999px; border: 1px solid hsl(var(--primary) / .2); background: hsl(var(--primary) / .1); }
.tb-rt-h { margin: 0 0 8px; font: 700 clamp(22px, 3vw, 30px)/1.2 var(--font-head); }
.tb-rt-cat { padding: 6px 12px; font: 500 12px var(--font-body); color: hsl(var(--muted-foreground)); border: 0; border-radius: 999px; background: hsl(var(--muted)); cursor: pointer; transition: all .2s; } .tb-rt-cat:hover { background: hsl(var(--muted) / .8); } .tb-rt-cat.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 4px 6px -1px rgb(0 0 0 / .12); }
.tb-rt-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--card)); transition: all .3s; animation: tb-in .3s ease both; } .tb-rt-card:hover { border-color: hsl(var(--primary) / .3); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1); } .tb-rt-card.open { box-shadow: 0 0 0 2px hsl(var(--primary) / .2), 0 20px 25px -5px rgb(0 0 0 / .1); }
.tb-rt-bar { display: block; height: 6px; } .tb-rt-ic { flex: 0 0 auto; display: grid; place-items: center; padding: 12px; border-radius: 12px; color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15); }
.tb-acc { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; } .tb-acc.free { background: rgb(16 185 129 / .1); color: #059669; border-color: rgb(16 185 129 / .2); } .tb-acc.freemium { background: rgb(245 158 11 / .1); color: #d97706; border-color: rgb(245 158 11 / .2); } .tb-acc.inst { background: rgb(59 130 246 / .1); color: #2563eb; border-color: rgb(59 130 246 / .2); }
.tb-rt-ext { flex: 0 0 auto; display: grid; place-items: center; padding: 8px; color: hsl(var(--primary)); background: hsl(var(--primary) / .1); } .tb-rt-ext:hover { background: hsl(var(--primary) / .2); }
.tb-rt-sub { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .tb-rt-feat { padding: 4px 8px; font-size: 12px; font-weight: 500; background: hsl(var(--muted)); }
.tb-rt-best { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 12px; font-weight: 500; color: #fff; }
.tb-rt-visit { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #fff; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .15); } .tb-rt-visit:hover { color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .2); }

/* ---------- Document Analyzer ---------- */
.tb-sumstat { padding: 8px; text-align: center; border: 1px solid color-mix(in srgb, var(--sc) 22%, transparent); background: color-mix(in srgb, var(--sc) 10%, transparent); min-width: 0; }
.tb-seg { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: hsl(var(--muted) / .5); }
.tb-seg button { flex: 1; min-width: 0; padding: 8px 12px; color: inherit; border: 1px solid transparent; background: none; cursor: pointer; transition: all .2s; } .tb-seg button:hover { background: hsl(var(--background) / .5); } .tb-seg button.on { background: hsl(var(--background)); border-color: hsl(var(--border)); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.tb-clear { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px; color: inherit; border: 0; border-radius: 999px; background: hsl(var(--muted)); cursor: pointer; } .tb-clear:hover { background: hsl(var(--destructive) / .1); }
.tb-drop-teal { cursor: pointer; } .tb-drop-teal:hover { border-color: rgb(20 184 166 / .5); background: rgb(20 184 166 / .05); }
.tb-drop-ic { width: 64px; height: 64px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 16px; color: #0d9488; background: linear-gradient(135deg, rgb(20 184 166 / .2), rgb(6 182 212 / .2)); transition: transform .2s; } .tb-drop-teal:hover .tb-drop-ic { transform: scale(1.1); } .dark .tb-drop-ic { color: #2dd4bf; }
.tb-filebar { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid rgb(20 184 166 / .2); background: linear-gradient(90deg, rgb(20 184 166 / .1), rgb(6 182 212 / .1)); }
.tb-cfg { display: grid; gap: 16px; padding: 16px; border-radius: 12px; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--card) / .5); }
.tb-typebtn { padding: 8px; text-align: left; color: inherit; border: 1px solid hsl(var(--border)); background: none; cursor: pointer; transition: all .2s; min-width: 0; } .tb-typebtn:hover { background: hsl(var(--muted) / .5); } .tb-typebtn.on { color: #fff; border-color: transparent; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .15); }
.tb-depth { flex: 1; min-width: 0; padding: 8px 4px; text-align: center; color: inherit; border: 1px solid hsl(var(--border)); background: none; cursor: pointer; } .tb-depth:hover { background: hsl(var(--muted)); } .tb-depth.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.tb-res { border-radius: 12px; overflow: hidden; border: 1px solid hsl(var(--border) / .5); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .12); animation: tb-in .35s ease; }
.tb-res-head { padding: 20px; color: #fff; } .tb-res-chip { padding: 2px 8px; font-size: 12px; border-radius: 999px; background: rgb(255 255 255 / .2); } .tb-res-diff { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; font-weight: 500; } .tb-res-stat { padding: 8px; text-align: center; background: rgb(255 255 255 / .1); min-width: 0; overflow-wrap: anywhere; }
.tb-res-tabs { display: flex; gap: 4px; padding: 8px; overflow-x: auto; background: hsl(var(--muted) / .3); border-bottom: 1px solid hsl(var(--border) / .3); }
.tb-res-tabs button { flex: 0 0 auto; padding: 6px 12px; font: 12px var(--font-body); white-space: nowrap; color: hsl(var(--muted-foreground)); border: 1px solid transparent; background: none; cursor: pointer; } .tb-res-tabs button:hover { background: hsl(var(--background) / .5); } .tb-res-tabs button.on { background: hsl(var(--background)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); font-weight: 500; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.tb-res-body { padding: 20px; background: hsl(var(--card)); }
.tb-theme { padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 999px; color: #0f766e; border: 1px solid rgb(20 184 166 / .2); background: linear-gradient(90deg, rgb(20 184 166 / .1), rgb(6 182 212 / .1)); animation: tb-in .3s ease both; } .dark .tb-theme { color: #5eead4; }
.tb-callout { padding: 12px; } .tb-callout h5 { margin: 0 0 8px; font-size: 14px; font-weight: 500; } .tb-callout ul { margin: 0; padding-left: 16px; font-size: 12px; display: grid; gap: 4px; }
.tb-callout.ok { background: rgb(34 197 94 / .1); border: 1px solid rgb(34 197 94 / .2); } .tb-callout.ok h5 { color: #15803d; } .dark .tb-callout.ok h5 { color: #4ade80; }
.tb-callout.warn { background: rgb(245 158 11 / .1); border: 1px solid rgb(245 158 11 / .2); } .tb-callout.warn h5 { color: #b45309; } .dark .tb-callout.warn h5 { color: #fbbf24; }
.tb-quote { margin: 0; padding: 16px; font-size: 14px; font-style: italic; border-left: 4px solid #14b8a6; background: hsl(var(--muted) / .3); }
.tb-fmtbtn { padding: 8px 16px; font: 500 14px var(--font-body); color: inherit; border: 1px solid hsl(var(--border)); background: none; cursor: pointer; } .tb-fmtbtn:hover { background: hsl(var(--muted)); } .tb-fmtbtn.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

@media (max-width: 640px) {
  .tb-page { padding-top: 4px; } .tb-hero { padding: 20px; } .tb-toolcard { padding: 16px; }
  .tb-shadow-stage { padding: 32px 16px; } .tb-glass-emoji { font-size: 24px; gap: 8px; } .tb-glass-card { padding: 20px; }
  .tb-res-head .tb-grid { gap: 6px; } .tb-seg button { padding: 6px; }
}

/* =====================================================================
   Pulse detail — PulseCodePanel.tsx + PulseCharts.tsx
   ===================================================================== */
.pu-h2 { display: flex; align-items: center; gap: 8px; margin: 32px 0 12px; font: 700 20px 'Space Grotesk', var(--font-head); } .pu-h2 .ic { width: 20px; height: 20px; }
.pu-cp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 40px 0 16px; }
.pu-cp-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 24px 'Space Grotesk', var(--font-head); }
.pu-cp-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid hsl(var(--primary) / .3); background: linear-gradient(135deg, hsl(var(--primary) / .2), hsl(var(--accent) / .2)); } .pu-cp-ic .ic { width: 20px; height: 20px; color: hsl(var(--primary)); }
.pu-cp-head p { margin: 4px 0 0; font-size: 14px; color: hsl(var(--muted-foreground)); }
.pu-cp-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: hsl(var(--muted) / .4); }
.pu-cp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: 500 14px var(--font-body); color: hsl(var(--muted-foreground)); border: 0; background: none; cursor: pointer; } .pu-cp-tab.active { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.pu-cp-dot { width: 8px; height: 8px; border-radius: 50%; } .pu-cp-n { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 600; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.pu-cp-panel { display: grid; gap: 16px; margin-top: 16px; }
.pu-snip { border-radius: 12px; border: 1px solid hsl(var(--border)); overflow: hidden; background: #282c34; box-shadow: 0 1px 2px rgb(0 0 0 / .08); min-width: 0; }
.pu-snip-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid rgb(255 255 255 / .1); background: linear-gradient(90deg, rgb(0 0 0 / .4), rgb(0 0 0 / .2)); }
.pu-snip-l { display: flex; align-items: center; gap: 12px; min-width: 0; } .pu-mac { display: flex; gap: 6px; flex: 0 0 auto; } .pu-mac i { width: 12px; height: 12px; border-radius: 50%; }
.pu-snip-fn { display: flex; align-items: center; gap: 8px; min-width: 0; } .pu-snip-fn .ic { width: 14px; height: 14px; color: rgb(255 255 255 / .7); flex: 0 0 auto; } .pu-snip-fn b { font: 400 12px var(--font-mono); color: rgb(255 255 255 / .9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-snip-fn small { display: none; font-size: 12px; color: rgb(255 255 255 / .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 768px) { .pu-snip-fn small { display: inline; } }
.pu-snip-r { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pu-lang { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: rgb(255 255 255 / .8); border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .05); } .pu-lang .ic { width: 10px; height: 10px; }
.pu-sbtn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; font: 12px var(--font-body); color: rgb(255 255 255 / .8); border: 0; background: none; cursor: pointer; } .pu-sbtn:hover { color: #fff; background: rgb(255 255 255 / .1); } .pu-sbtn .ic { width: 12px; height: 12px; } .pu-sbtn.ok .ic { color: #34d399; }
.pu-snip-desc { padding: 8px 16px; font-size: 12px; color: rgb(255 255 255 / .7); border-bottom: 1px solid rgb(255 255 255 / .1); background: rgb(0 0 0 / .2); }
.pu-codewrap { display: flex; max-height: 520px; overflow: auto; padding: 16px 20px; font: 12.5px/1.6 var(--font-mono); }
.pu-codewrap pre { margin: 0; padding: 0; background: transparent; overflow: visible; font: inherit; border: 0; } .pu-gut { flex: 0 0 auto; min-width: 2.25em; padding-right: 1em !important; text-align: right; color: rgb(255 255 255 / .25); user-select: none; }
.pu-codewrap code { display: block; font: inherit; color: #abb2bf; white-space: pre; background: transparent !important; padding: 0 !important; } .pu-codewrap code.hljs { color: #c9d1d9; }
.pu-tldr-h { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } .pu-tldr ul { list-style: none; padding-left: 0; display: grid; gap: 6px; font-size: 14px; } .pu-tldr li { display: flex; gap: 8px; } .pu-tldr li::before { content: '•'; color: hsl(var(--primary)); }
.pu-charts { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .pu-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pu-chart { padding: 0; overflow: hidden; } .pu-chart-h { padding: 24px 24px 8px; } .pu-chart-h b { font-size: 16px; font-weight: 600; } .pu-chart-h small { display: block; margin-top: 2px; font-size: 12px; color: hsl(var(--muted-foreground)); } .pu-chart-b { position: relative; height: 280px; padding: 0 24px 24px; }
@media (max-width: 640px) { .pu-snip-bar { flex-wrap: wrap; } .pu-chart-h { padding: 16px 16px 6px; } .pu-chart-b { padding: 0 12px 16px; } }

/* --- leftovers --- */
/* =====================================================================
   Phase 6 — leftovers (prefix lo-): Drive course import, Course Drive
   Browser, citations, GEE catalogue editor, insurance tab extras,
   AI drop-in widgets. Uses the shared tokens only.
   ===================================================================== */
.lo-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid hsl(var(--primary) / .25); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: lo-rot .7s linear infinite; vertical-align: -2px; }
@keyframes lo-rot { to { transform: rotate(360deg); } }

/* ---------- GEE catalogue editor (/gee/admin) ---------- */
.lo-gee { grid-template-columns: minmax(0, 1fr); }
.lo-gee > *, .lo-gee .tab-panel { min-width: 0; }
.lo-gee-tabs .tab { display: inline-flex; align-items: center; gap: 6px; }
.lo-gee-tabs .tab .ic { width: 14px; height: 14px; }
.lo-gee-search { position: relative; flex: 1 1 220px; max-width: 380px; }
.lo-gee-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: hsl(var(--muted-foreground)); }
.lo-gee-search .input { padding-left: 34px; }
.lo-gee-add { background: linear-gradient(90deg, var(--g)); color: #fff; border: 0; }
.lo-gee-add:hover { color: #fff; filter: brightness(1.06); }
.lo-gee-add .ic, .lo-gee-tabs .ic { flex: none; }
.lo-gee-table td { vertical-align: top; }
.lo-gee-table th:last-child, .lo-gee-table td:last-child { text-align: right; white-space: nowrap; }
.lo-gee-trunc { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.lo-gee-acts { display: inline-flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.lo-gee-table tr:hover .lo-gee-acts, .lo-gee-acts:focus-within { opacity: 1; }
@media (hover: none) { .lo-gee-acts { opacity: 1; } }
.lo-gee-del { color: hsl(var(--destructive)); }
.lo-gee-box { max-width: 860px; }
.lo-gee-bkbox { max-width: 620px; }
.lo-gee-mh { padding-bottom: 0; }
.lo-gee-mh h3 { margin: 0 32px 8px 0; font: 800 18px var(--font-head); }
.lo-gee-mode { margin-bottom: 0; }
.lo-gee-form { padding-top: 14px; }
.lo-gee-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.lo-gee-f { display: block; min-width: 0; }
.lo-gee-f .label { font-size: 12px; margin-bottom: 4px; }
.lo-gee-wide { grid-column: 1 / -1; }
.lo-gee-sw { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.lo-gee-code, .lo-gee-json { font-family: var(--font-mono); font-size: 12px; line-height: 1.45; tab-size: 2; white-space: pre; overflow: auto; }
.lo-gee-bklist { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid hsl(var(--border)); max-height: 320px; overflow: auto; }
.lo-gee-bklist li { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px; border-top: 1px solid hsl(var(--border) / .6); }
.lo-gee-bklist li:first-child { border-top: 0; background: hsl(var(--primary) / .06); }
.lo-gee-bklist .mono { word-break: break-all; }
@media (max-width: 640px) { .lo-gee-fields { grid-template-columns: 1fr; } .lo-gee-trunc { max-width: 150px; } .lo-gee-search { max-width: none; } }

/* ---------- Treatment · Insurance tab ---------- */
.lo-ins-due { border-left: 3px solid #EF4444; background: hsl(0 84% 60% / .06); }
.lo-ins-due p { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lo-ins-due p:last-child { margin-bottom: 0; }

/* ---------- Drive → course import (/admin/courses?tab=drive) ---------- */
.lo-dr-intro { flex: 1 1 320px; min-width: 0; }
.lo-dr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 800 16px var(--font-head); }
.lo-dr-h .ic { width: 18px; height: 18px; color: hsl(var(--primary)); }
.lo-dr-load { flex: 1 1 380px; max-width: 580px; display: flex; flex-direction: column; gap: 8px; }
.lo-dr-busy { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.lo-dr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid hsl(var(--border)); }
.lo-dr-tree { margin-top: 14px; padding-top: 14px; border-top: 1px solid hsl(var(--border)); }
.lo-dr-h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.lo-dr-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.lo-dr-meta .field { margin-bottom: 10px; min-width: 0; }
.lo-dr-meta .select, .lo-dr-meta .input, .lo-dr-meta .textarea { width: 100%; min-width: 0; max-width: 100%; }
.lo-dr-grid > div, .lo-dr-metaform { min-width: 0; }
.lo-dr-meta .label { font-size: 12px; margin-bottom: 4px; }
.lo-dr-span2 { grid-column: 1 / -1; }
.lo-dr-metabox { background: hsl(var(--muted) / .45); border: 1px solid hsl(var(--border) / .7); padding: 12px 12px 4px; margin: 8px 0 12px; }
.lo-dr-metabox .lo-dr-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lo-dr-metabox .lo-dr-meta .lo-dr-span2 { grid-column: span 2; }
.lo-dr-metabox .lo-dr-meta > .lo-dr-span2:last-child { grid-column: 1 / -1; padding-bottom: 8px; }
.lo-dr-crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
.lo-dr-crumbs button { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.lo-dr-crumbs button.on { text-decoration: none; font-weight: 700; color: hsl(var(--foreground)); }
.lo-dr-list { max-height: 460px; overflow-y: auto; border: 1px solid hsl(var(--border)); }
.lo-dr-list-tall { max-height: 55vh; }
.lo-dr-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; border: 0; border-top: 1px solid hsl(var(--border) / .6); background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; min-width: 0; }
.lo-dr-row:first-child { border-top: 0; }
.lo-dr-row:hover { background: hsl(var(--muted) / .5); }
.lo-dr-row input[type=checkbox] { width: 16px; height: 16px; flex: none; accent-color: hsl(var(--primary)); }
.lo-dr-folder:hover { background: hsl(35 90% 55% / .1); }
.lo-dr-dim { opacity: .6; }
.lo-dr-b { flex: none; font-size: 11px; padding: 0 6px; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.lo-dr-bv { color: #2563eb; border-color: rgb(59 130 246 / .35); background: rgb(59 130 246 / .08); }
.lo-dr-bp { color: #e11d48; border-color: rgb(244 63 94 / .35); background: rgb(244 63 94 / .08); }
.dark .lo-dr-bv { color: #93c5fd; } .dark .lo-dr-bp { color: #fda4af; }
.lo-dr-sec { position: sticky; top: 0; z-index: 1; padding: 6px 8px; font-size: 12px; font-weight: 700; background: hsl(var(--muted)); border-top: 1px solid hsl(var(--border)); }
.lo-dr-lesson { cursor: default; }
.lo-dr-title { flex: 1 1 auto; min-width: 0; height: 32px; padding: 4px 8px; font-size: 13px; }
.lo-dr-done { margin-top: 14px; padding-top: 14px; border-top: 1px solid hsl(var(--border)); }
.lo-dr-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.lo-dr-stats div { border: 1px solid hsl(var(--border)); padding: 8px; text-align: center; }
.lo-dr-stats b { display: block; font-size: 20px; }
.lo-dr-stats small { font-size: 11px; color: hsl(var(--muted-foreground)); }
@media (max-width: 1023px) { .lo-dr-metabox .lo-dr-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lo-dr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lo-dr-grid { grid-template-columns: 1fr; } .lo-dr-load { max-width: none; } }
@media (max-width: 480px) { .lo-dr-meta, .lo-dr-metabox .lo-dr-meta { grid-template-columns: 1fr; } .lo-dr-metabox .lo-dr-meta .lo-dr-span2 { grid-column: 1 / -1; } }

/* ---------- Course Drive Browser (/admin/course-drive) ---------- */
.lo-cd-top { margin-bottom: 10px; }
.lo-cd-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: hsl(var(--muted-foreground)); }
.lo-cd-crumbs a { color: inherit; }
.lo-cd-hist { display: contents; }
.lo-cd-hist button { border: 0; background: none; padding: 0; font: inherit; color: hsl(var(--primary)); cursor: pointer; }
.lo-cd-hist > span, .lo-cd-hist > button:first-child::before { color: hsl(var(--muted-foreground)); }
.lo-cd-hist > button:first-child::before { content: '›'; margin-right: 6px; }
.lo-cd-logo { width: 40px; height: 40px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); }
.lo-cd-logo .ic { width: 20px; height: 20px; }
.lo-cd-h1 { margin: 0; font: 800 20px var(--font-head); }
.lo-cd-linkin { position: relative; flex: 1 1 240px; min-width: 0; }
.lo-cd-linkin .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: hsl(var(--muted-foreground)); }
.lo-cd-linkin .input { padding-left: 34px; }
.lo-cd-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; min-height: 70vh; }
.lo-cd-side { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.lo-cd-sh { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .6); font-size: 13px; min-height: 44px; }
.lo-cd-sh-col { flex-direction: column; align-items: stretch; gap: 8px; }
.lo-cd-sh-col .lo-cd-linkin { flex: none; }
.lo-cd-scroll { flex: 1; overflow-y: auto; max-height: 75vh; }
.lo-cd-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid hsl(var(--border) / .35); background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; min-width: 0; }
.lo-cd-row:hover { background: hsl(var(--muted) / .55); }
.lo-cd-row.on { background: hsl(var(--primary) / .14); color: hsl(var(--primary)); font-weight: 600; }
.lo-cd-row a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.lo-cd-car { display: inline-block; width: 10px; color: hsl(var(--muted-foreground)); transition: transform .15s; }
.lo-cd-node.open > .lo-cd-row .lo-cd-car { transform: rotate(90deg); }
.lo-cd-kids { display: none; }
.lo-cd-node.open > .lo-cd-kids { display: block; }
.lo-cd-main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.lo-cd-ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .6); font-size: 13px; }
.lo-cd-dl { color: #059669; border-color: rgb(16 185 129 / .45); }
.lo-cd-frame { position: relative; flex: 1; min-height: 450px; background: rgb(0 0 0 / .95); }
.lo-cd-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lo-cd-frame.lo-cd-full { position: fixed; inset: 0; z-index: 1300; }
.lo-cd-fs { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; background: rgb(255 255 255 / .12); color: #fff; font-size: 18px; cursor: pointer; }
.lo-cd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 40px 16px; text-align: center; color: hsl(var(--muted-foreground)); }
.lo-cd-empty div { font-size: 36px; opacity: .35; }
.lo-cd-load { display: grid; place-items: center; padding: 60px 0; }
.lo-cd-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid hsl(var(--border) / .6); }
@media (max-width: 900px) { .lo-cd-split { grid-template-columns: 1fr; min-height: 0; } .lo-cd-scroll { max-height: 46vh; } .lo-cd-frame { min-height: 260px; } }

/* ---------- Citations (/admin/publications/citations) ---------- */
.lo-cite-kpis .card { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lo-cite-kpis b { font-size: 20px; font-family: var(--font-head); }
.lo-cite-kpis b.small { font-size: 14px; }
.lo-cite-bar { height: 8px; margin-top: 8px; background: hsl(var(--muted)); overflow: hidden; }
.lo-cite-bar i { display: block; height: 100%; width: 0; background: hsl(var(--primary)); transition: width .3s; }
.lo-cite-off td { opacity: .6; }

/* ---------- AI widgets (lo-ai-widgets.js) ---------- */
.lo-pl { margin-bottom: 16px; padding: 12px; background: hsl(var(--primary) / .05); border: 1px solid hsl(var(--primary) / .22); }
.lo-pl-h { display: flex; align-items: center; gap: 6px; }
.lo-pl-row { display: flex; gap: 8px; }
.lo-pl-row .input { flex: 1; min-width: 0; }
.lo-ins { margin-top: 16px; }
.lo-ins-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lo-ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lo-ins-card { border: 1px solid hsl(var(--border)); border-top: 3px solid var(--c, hsl(var(--primary))); background: hsl(var(--card)); padding: 12px; min-width: 0; }
.lo-ins-top { display: flex; gap: 8px; align-items: flex-start; }
.lo-ins-top > span { font-size: 20px; line-height: 1; }
.lo-ins-top small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.lo-ins-top b { display: block; font-size: 14px; line-height: 1.3; }
.lo-ins-card p { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.lo-ins-skel { height: 110px; background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--muted) / .4), hsl(var(--muted))); background-size: 200% 100%; animation: lo-sh 1.2s linear infinite; }
@keyframes lo-sh { to { background-position: -200% 0; } }
@media (max-width: 900px) { .lo-ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lo-ins-grid { grid-template-columns: 1fr; } }
.lo-tu-fab { position: fixed; right: 22px; bottom: 84px; z-index: 900; width: 48px; height: 48px; border: 0; border-radius: 50%; font-size: 20px; cursor: pointer; color: #fff; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); box-shadow: 0 10px 30px -8px rgb(0 0 0 / .45); }
.lo-tu { position: fixed; right: 16px; bottom: 16px; z-index: 950; width: min(380px, calc(100vw - 32px)); height: min(520px, calc(100vh - 32px)); display: flex; flex-direction: column; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5); }
.lo-tu[hidden] { display: none; }
.lo-tu-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; color: #fff; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); }
.lo-tu-h .btn { color: #fff; }
.lo-tu-ctx { padding: 6px 12px; border-bottom: 1px solid hsl(var(--border) / .6); }
.lo-tu-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lo-tu-m { max-width: 88%; padding: 8px 8px; font-size: 13px; line-height: 1.45; word-wrap: break-word; }
.lo-tu-m.user { align-self: flex-end; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lo-tu-m.assistant { align-self: flex-start; background: hsl(var(--muted)); }
.lo-tu-m pre { margin: 6px 0; padding: 8px; overflow-x: auto; font-size: 11px; background: hsl(var(--background)); }
.lo-tu-f { display: flex; gap: 6px; padding: 8px; border-top: 1px solid hsl(var(--border) / .6); }
.lo-tu-f .input { flex: 1; min-width: 0; }

/* ===================== Phase 7 — admin parity + polish ===================== */

/* --- content --- */
/* =====================================================================
   Phase 7 — Site Content admin screens (P7ContentController).
   Prefix: ac-   (Hero, About, Biography, Skills, Skill & Experience,
   Experience, Education, Dashboard, Settings)
   ===================================================================== */
.ac-wrap { max-width: 1180px; }
.ac-narrow { max-width: 900px; margin-inline: auto; }
.ac-block { display: block; }
.ac-mono { font-family: var(--font-mono); font-size: 13px; }
.ac-card { overflow: hidden; }
.ac-card-h { padding: 16px 20px 6px; }
.ac-card-h h3 { font-size: 16px; margin: 0; font-weight: 700; }
.ac-card-h p { margin: 4px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.ac-card-b { padding: 12px 20px 20px; }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-g2, .ac-g3, .ac-g4 { display: grid; gap: 0 16px; }
.ac-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ac-tight { gap: 8px; margin-bottom: 8px; }
@media (max-width: 760px) { .ac-g3, .ac-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ac-g2, .ac-g3 { grid-template-columns: minmax(0, 1fr); } .ac-tight.ac-g3 { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); } }
.ac-empty { padding: 32px 16px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 14px; }
.ac-off { opacity: .5; }
.ac-stack { display: flex; flex-direction: column; gap: 12px; }
.ac-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; }
.ac-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ac-up { flex-shrink: 0; }
.ac-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 1px solid hsl(var(--border)); flex-shrink: 0; }
.ac-logo { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid hsl(var(--border)); padding: 2px; flex-shrink: 0; }
.ac-color { width: 56px; height: 40px; padding: 2px; border: 1px solid hsl(var(--input, var(--border))); background: hsl(var(--background)); cursor: pointer; flex-shrink: 0; }
.ac-link { color: hsl(var(--primary)); }
.ac-adv summary { cursor: pointer; color: hsl(var(--muted-foreground)); }
.ac-adv[open] summary { margin-bottom: 8px; }
.ac-danger { color: hsl(var(--destructive)); }
.ac-danger:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08); }
.ac-badge-solid { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.ac-prim { color: hsl(var(--primary)); display: inline-flex; }
.ac-prim .ic { width: 20px; height: 20px; }

/* search bar (AdminSearch) */
.ac-search { display: flex; align-items: center; gap: 8px; padding: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ac-search .input-icon { min-width: 200px; }
.ac-cat-sel { width: auto; min-width: 190px; max-width: 100%; }
@media (max-width: 560px) { .ac-search .input-icon, .ac-cat-sel { flex: 1 1 100%; min-width: 0; } }

/* dialogs */
.ac-dlg { width: min(460px, 100%); padding: 24px; }
.ac-dlg-lg { width: min(720px, 100%); }
.ac-dlg-t { font-size: 16px; margin: 0 0 16px; padding-right: 30px; }
.ac-dlg-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- HERO */
.ac-tabs6 .tab { flex: 1 1 auto; text-align: center; padding: 8px 12px; }
@media (max-width: 640px) { .ac-tabs6 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .ac-tabs6 .tab { flex: 0 0 auto; } }
.ac-cat-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.ac-prof-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ac-prof-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); flex-shrink: 0; }
.dark .ac-prof-ic { background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); }
.ac-prof-ic svg, .ac-prof-ic .ic { width: 18px; height: 18px; }
.ac-ext { margin-left: auto; color: hsl(var(--muted-foreground)); display: inline-flex; }
.ac-ext:hover { color: hsl(var(--primary)); }
.ac-ext + .btn { margin-left: 0; }
.ac-tag { font-size: 11px; padding: 2px 8px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.ac-custom { padding-top: 16px; border-top: 1px solid hsl(var(--border)); margin-top: 4px; }
.ac-custom .ac-prof-h .btn:first-of-type:not(.ac-ext) { margin-left: auto; }
.ac-custom .ac-ext:not([hidden]) + .btn { margin-left: 0; }
.ac-hero-pv { text-align: center; padding: 32px 20px; background: linear-gradient(135deg, hsl(var(--primary) / .05), hsl(var(--accent) / .1)); border-radius: 12px; }
.ac-hero-pv h2 { font-size: 30px; font-weight: 800; margin: 0 0 8px; overflow-wrap: anywhere; }
.ac-hero-sub { font-size: 18px; color: hsl(var(--primary)); margin: 0 0 12px; }
.ac-hero-desc { max-width: 520px; margin: 0 auto; }
.ac-hero-links { margin-top: 24px; padding-top: 20px; border-top: 1px solid hsl(var(--border) / .5); }
.ac-pv-icons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ac-pv-i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.ac-pv-i svg, .ac-pv-i .ic { width: 16px; height: 16px; }
.ac-pv-more { background: hsl(var(--muted)); color: hsl(var(--foreground)); font-size: 12px; font-weight: 600; }

/* ---------------------------------------------------------------- ABOUT / list items */
.ac-item-in { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.ac-item-t { font-size: 14px; font-weight: 700; margin: 0; }
.ac-key { font-size: 11px; padding: 2px 8px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-family: var(--font-mono); }
.ac-grip { color: hsl(var(--muted-foreground)); cursor: grab; padding: 2px; margin-top: 2px; display: inline-flex; flex-shrink: 0; user-select: none; }
.ac-grip:hover { color: hsl(var(--primary)); }
.ac-grip .ic { width: 16px; height: 16px; }
.ac-nosort .ac-grip { cursor: not-allowed; opacity: .35; }
.ac-dragging { opacity: .45; outline: 2px dashed hsl(var(--primary) / .6); }
.ac-sort-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
@media (hover: none) { .ac-sort-hint { display: none; } }
@media (max-width: 560px) { .ac-item-in { flex-wrap: wrap; } .ac-item-in .grow { flex-basis: calc(100% - 40px); } .ac-item-in .ac-acts { margin-left: auto; } }

/* ---------------------------------------------------------------- BIOGRAPHY */
.ac-chap { padding: 12px 16px; }
.ac-chap-h { display: flex; align-items: center; gap: 8px; }
.ac-chap-t { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.ac-chap-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); flex-shrink: 0; }
.ac-chap-ic .ic { width: 18px; height: 18px; }
.ac-chev { display: inline-flex; transition: transform .2s; }
.ac-chap[data-open] .ac-chev { transform: rotate(180deg); }
.ac-chap-b { margin-top: 16px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
.ac-swatch { width: 40px; height: 40px; border: 1px solid hsl(var(--border)); flex-shrink: 0; }
.ac-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 480px) { .ac-chap-t .ac-chap-ic { display: none; } .ac-chap-h { gap: 4px; } }

/* ---------------------------------------------------------------- SKILLS */
.ac-group { margin-bottom: 26px; }
.ac-group-t { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.ac-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .ac-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ac-skills { grid-template-columns: minmax(0, 1fr); } }
.ac-skill { padding: 12px 12px 12px; }
.ac-skill-t { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.ac-skill-ic { display: inline-flex; color: hsl(var(--primary)); }
.ac-bar { height: 8px; background: hsl(var(--muted)); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.ac-bar i { display: block; height: 100%; background: hsl(var(--primary)); border-radius: 999px; transition: width .3s; }
.ac-sw-sm { width: 32px; height: 18px; }
.ac-sw-sm span::before { width: 12px; height: 12px; }
.ac-sw-sm input:checked + span::before { transform: translateX(14px); }
.ac-range { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, hsl(var(--primary)) var(--v, 50%), hsl(var(--muted)) var(--v, 50%)); cursor: pointer; margin: 8px 0 4px; }
.ac-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
.ac-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); }

/* ---------------------------------------------------------------- EXPERIENCE / EDUCATION */
.ac-entry { padding: 20px; }
.ac-entry-t { font-size: 16px; font-weight: 700; margin: 0; }
.ac-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 10px; }
.ac-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ac-chips .input { min-width: 0; }
.ac-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ac-chip-list:empty, .ac-li-list:empty { display: none; }
.ac-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 8px; font: 600 12px var(--font-body); background: hsl(var(--muted)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); cursor: pointer; }
.ac-chip:hover { border-color: hsl(var(--destructive) / .5); color: hsl(var(--destructive)); }
.ac-chip .ic { width: 12px; height: 12px; }
.ac-li-list { margin-top: 8px; }
.ac-li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 2px 0; }
@media (max-width: 560px) { .ac-entry { padding: 12px; } .ac-entry > .flex { flex-wrap: wrap; } .ac-entry .grow { flex-basis: calc(100% - 60px); } .ac-entry .ac-acts { margin-left: auto; } }

/* ---------------------------------------------------------------- SKILL & EXPERIENCE (Drive) */
.ac-hubnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ac-hub-home { border: 2px solid var(--c); color: var(--c); font-weight: 700; font-size: 12px; border-radius: 8px; }
.ac-hub-home:hover { color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); border-color: var(--c); }
.ac-hub-sep { display: inline-flex; }
.ac-hub { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--c); }
.ac-hub:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); }
.ac-hub.on { background: var(--c); color: #fff; }
.ac-hub .ic { width: 12px; height: 12px; }
.ac-crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; overflow-x: auto; padding: 8px 0 2px; white-space: nowrap; }
.ac-crumbs .ic { width: 12px; height: 12px; }
.ac-crumbs button { background: none; border: 0; padding: 2px 4px; color: #F39C12; font: 500 12px var(--font-body); cursor: pointer; }
.ac-crumbs button:hover { text-decoration: underline; }
.ac-drv-tile { width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(135deg, #F39C1230, #E67E2230); color: #F39C12; flex-shrink: 0; }
.ac-drv-tile .ic { width: 20px; height: 20px; }
.ac-orange { border: 2px solid #F39C12; color: #F39C12; border-radius: 8px; }
.ac-orange:hover { border-color: #F39C12; color: #F39C12; background: #F39C1210; }
.ac-quick { padding: 12px; border-left: 4px solid #F39C12; }
.ac-split { display: flex; gap: 16px; min-height: 75vh; align-items: stretch; }
.ac-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; max-height: 85vh; }
.ac-side-h { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .6); }
.ac-folder-ic { color: #FF9800; display: inline-flex; }
.ac-side-q .input { height: 32px; font-size: 12px; }
.ac-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.ac-cnt .ic { width: 12px; height: 12px; }
.ac-side-list { flex: 1; overflow-y: auto; padding: 6px; }
.ac-side-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: hsl(var(--muted-foreground)); margin: 8px 8px 4px; }
.ac-side-empty { text-align: center; padding: 48px 12px; color: hsl(var(--muted-foreground)); }
.ac-side-empty .ic { width: 32px; height: 32px; opacity: .3; margin: 0 auto 8px; }
.ac-fold, .ac-file { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: 8px; transition: transform .15s, background .15s; }
.ac-fold { background: #FF980010; margin-bottom: 2px; font-size: 13px; font-weight: 500; }
.ac-fold:hover, .ac-file:hover { transform: scale(1.01); }
.ac-file:hover { background: hsl(var(--accent) / .12); }
.ac-file.on { background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.ac-fold-ic, .ac-file-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.ac-fold-ic { background: #FF980025; color: #FF9800; }
.ac-file-ic { background: color-mix(in srgb, var(--c) 13%, transparent); }
.ac-fi { display: inline-flex; }
.ac-ext-b { font-size: 11px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); color: var(--c); flex-shrink: 0; }
.ac-file-row { display: flex; align-items: center; gap: 2px; }
.ac-file-row .ac-file { flex: 1; min-width: 0; }
.ac-red-ic, .ac-red-ic:hover { color: #E74C3C; }
.ac-red { border-color: #E74C3C; color: #E74C3C; }
.ac-red:hover { border-color: #E74C3C; color: #E74C3C; background: #E74C3C10; }
.ac-green { border-color: #6ee7b7; color: #059669; }
.ac-green:hover { border-color: #059669; color: #059669; background: #05966910; }
.ac-viewer { flex: 1; min-width: 0; min-height: 550px; display: flex; flex-direction: column; overflow: hidden; }
.ac-viewer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 16px; color: hsl(var(--muted-foreground)); }
.ac-viewer-empty .semibold { color: hsl(var(--foreground)); }
.ac-drv-big { width: 80px; height: 80px; display: grid; place-items: center; background: #F39C1215; color: #F39C12; margin-bottom: 16px; }
.ac-drv-big .ic { width: 40px; height: 40px; opacity: .5; }
.ac-doc { flex: 1; display: flex; flex-direction: column; }
.ac-doc-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .6); background: hsl(var(--card)); flex-wrap: wrap; }
.ac-doc-acts { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.ac-doc-b { flex: 1; background: hsl(var(--muted) / .3); display: flex; }
.ac-doc-b iframe { width: 100%; min-height: 550px; flex: 1; border: 0; }
.ac-spin-wrap { display: flex; justify-content: center; padding: 60px 0; color: #F39C12; }
.ac-spin { display: inline-flex; animation: spin 1s linear infinite; }
.ac-spin .ic { width: 24px; height: 24px; }
.ac-fs .ac-viewer { position: fixed; inset: 0; z-index: 1300; border: 0; }
.ac-fs .ac-doc-b iframe { min-height: 0; }
@media (max-width: 1023px) {
  .ac-split { flex-direction: column; min-height: 0; }
  .ac-side { width: 100%; max-height: 60vh; }
  .ac-viewer { min-height: 420px; }
  .ac-doc-b iframe { min-height: 480px; }
}
/* flipbook */
.ac-fb { position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column; background: hsl(var(--background) / .96); backdrop-filter: blur(4px); animation: fadeup .2s ease-out; }
.ac-fb[hidden] { display: none; }
.ac-fb-h, .ac-fb-f { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border) / .6); }
.ac-fb-f { justify-content: center; gap: 16px; border-bottom: 0; border-top: 1px solid hsl(var(--border) / .6); }
.ac-fb-badge { color: #E74C3C; background: #E74C3C20; border-color: #E74C3C40; }
.ac-fb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.ac-fb-load { text-align: center; color: #E74C3C; }
.ac-fb-load .ac-spin .ic { width: 32px; height: 32px; }
.ac-fb-book { display: flex; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .45); }
.ac-fb-pg { background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; min-width: 120px; min-height: 170px; }
.ac-fb-pg.l { border-right: 1px solid #e5e7eb; box-shadow: inset -12px 0 18px -14px rgb(0 0 0 / .35); }
.ac-fb-pg.r { box-shadow: inset 12px 0 18px -14px rgb(0 0 0 / .35); }
.ac-fb-pg.blank { background: transparent; box-shadow: none; border: 0; }
.ac-fb-pg canvas { display: block; }
.ac-fb-book.turn-r .ac-fb-pg.r, .ac-fb-book.turn-l .ac-fb-pg.l, .ac-fb-book.single .ac-fb-pg.r { animation: ac-flip .45s ease-out; }
.ac-fb-book.turn-l.single .ac-fb-pg.r { animation-name: ac-flip-b; }
@keyframes ac-flip { from { transform: perspective(1400px) rotateY(-28deg); transform-origin: left center; opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes ac-flip-b { from { transform: perspective(1400px) rotateY(28deg); transform-origin: right center; opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- DASHBOARD */
.ac-welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 24px; border-radius: 16px; border: 1px solid hsl(var(--border) / .6);
  background: linear-gradient(135deg, hsl(var(--primary) / .08), hsl(var(--accent) / .08)), hsl(var(--card) / .7); backdrop-filter: blur(10px); }
.ac-welcome h1 { font-size: 24px; margin: 0 0 8px; }
.ac-stats6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .ac-stats6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ac-stats6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.ac-stat { position: relative; padding: 16px; display: flex; flex-direction: column; overflow: hidden; color: inherit; }
.ac-stat:hover { color: inherit; }
.ac-stat-ic { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.ac-stat-ic .ic { width: 20px; height: 20px; }
.ac-stat-n { font-size: 24px; font-weight: 800; line-height: 1.15; font-family: var(--font-head); }
.ac-stat-l { font-size: 12px; color: hsl(var(--muted-foreground)); }
.ac-stat-badge { position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.ac-more .kpi { padding: 12px; gap: 8px; }
.ac-more .kpi .icon-tile { width: 36px; height: 36px; }
.ac-more .kpi .n { font-size: 18px; }
.ac-feed { display: flex; flex-direction: column; gap: 12px; }
.ac-feed-i { display: flex; flex-direction: column; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--background)); color: inherit; min-width: 0; }
a.ac-feed-i:hover { border-color: hsl(var(--primary) / .4); color: inherit; }
.ac-feed-i.unread { background: hsl(var(--primary) / .05); border-color: hsl(var(--primary) / .2); }
.ac-feed-i.st-pending { background: rgb(245 158 11 / .05); border-color: rgb(245 158 11 / .2); }
.ac-feed-i.st-approved { background: rgb(34 197 94 / .05); border-color: rgb(34 197 94 / .2); }
.ac-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; height: fit-content; white-space: nowrap; }
.ac-pill.st-pending { background: rgb(245 158 11 / .2); color: #d97706; }
.ac-pill.st-approved { background: rgb(34 197 94 / .2); color: #16a34a; }
.ac-pill.st-other { background: rgb(239 68 68 / .2); color: #dc2626; }
.dark .ac-pill.st-pending { color: #fbbf24; } .dark .ac-pill.st-approved { color: #4ade80; } .dark .ac-pill.st-other { color: #f87171; }
.ac-none { padding: 32px 0; margin: 0; }
.ac-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 560px) { .ac-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.ac-qa { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid hsl(var(--border)); border-radius: 8px; text-align: center; font-size: 13px; font-weight: 500; color: inherit; transition: background .2s, border-color .2s; }
.ac-qa:hover { background: hsl(var(--accent) / .12); border-color: hsl(var(--primary) / .35); color: inherit; }
.ac-qa .ic { width: 24px; height: 24px; color: hsl(var(--primary)); }

/* --- work --- */
/* ===================== Phase 7 · work (P7WorkController) — portfolio, client work, publications, certificates, bulk import, messages ===================== */
.aw { display: grid; gap: 24px; min-width: 0; }
.aw [hidden] { display: none !important; }
.aw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aw-h1 { font: 700 24px/1.2 var(--font-head); margin: 0; }
.aw-h1-sm { font-size: 20px; }
.aw-sub { margin: 4px 0 0; font-size: 14px; }
.aw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.aw-actions .ic, .aw .btn .ic { width: 16px; height: 16px; }
.aw-min0 { min-width: 0; }
.aw-w100 { width: 100%; justify-content: center; }
.aw-w80 { width: 80px; }
.aw-center { text-align: center; }
.aw-py8 { padding-block: 32px; } .aw-py12 { padding-block: 48px; }
.aw-fg { color: hsl(var(--foreground)); font-weight: 600; }
.aw-danger { color: hsl(var(--destructive)); }
.aw-link { color: hsl(var(--primary)); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .aw-link:hover { text-decoration: underline; } .aw-link .ic { width: 12px; height: 12px; }
.aw-break { overflow-wrap: anywhere; }
.aw-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.aw-g2, .aw-g3, .aw-g4 { display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aw-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aw-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aw-gap6 { gap: 0 24px; }
.aw-row2 { display: flex; gap: 8px; } .aw-row2 .input { flex: 1; min-width: 0; }
.aw-stack { display: grid; gap: 16px; }
.aw-empty { padding: 48px 16px; text-align: center; }
.aw-empty p { margin: 0; }
.aw-empty-ic .ic { width: 48px; height: 48px; margin: 0 auto 16px; color: hsl(var(--muted-foreground)); display: block; }
.aw-dim { opacity: .6; } .aw-dim5 { opacity: .5; }
.aw-lbl-ai { display: flex; align-items: center; gap: 8px; } .aw-lbl-ai .ic { width: 16px; height: 16px; color: hsl(var(--primary)); }
.aw-card-t { font: 600 18px/1.3 var(--font-head); margin: 0 0 16px; }
.aw-pad6 { padding: 24px; }
.aw-code { background: hsl(var(--muted)); padding: 0 4px; font-family: var(--font-mono); font-size: 12px; }
.aw-mono { font-family: var(--font-mono); font-size: 13px; }
.aw-scroll { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.aw-h400 { height: 400px; } .aw-h300 { height: 300px; }
.aw-sep { border-top: 1px solid hsl(var(--border)); padding-top: 16px; margin-top: 16px; }
.aw-pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.aw-date { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 0; } .aw-date .ic { width: 14px; height: 14px; }
.aw-spin { display: inline-block; animation: aw-rot 1s linear infinite; } .aw-spin .ic { width: 24px; height: 24px; }
@keyframes aw-rot { to { transform: rotate(360deg); } }
.aw-pulse { animation: aw-pulse 1.2s ease-in-out infinite; } @keyframes aw-pulse { 50% { opacity: .35; } }

/* badges (shadcn variants) */
.aw-badge-sec, .aw-badge-pri, .aw-badge-amber, .aw-badge-green, .aw-badge-new, .aw-badge-replied { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.aw-badge-sec { background: hsl(var(--secondary, var(--muted))); color: hsl(var(--secondary-foreground, var(--foreground))); }
.aw-badge-pri { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.aw-badge-amber { background: #f59e0b; color: #fff; }
.aw-badge-green { background: #22c55e; color: #fff; }
.aw-badge-new { background: hsl(var(--primary) / .2); color: hsl(var(--primary)); }
.aw-badge-replied { border-color: hsl(var(--border)); color: #16a34a; }
.dark .aw-badge-replied { color: #4ade80; }
.aw-chip { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; } .aw-chip b { font-weight: 400; margin-left: 2px; opacity: .7; }
.aw-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .aw-chip-list:empty { display: none; }
.aw-fchip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 14px; line-height: 1; }

/* AdminSearch */
.aw-search { display: grid; gap: 12px; }
.aw-search-row { display: flex; gap: 12px; }
.aw-search-q { flex: 1; min-width: 0; }
.aw-search-q .input { padding-right: 36px; }
.aw-search-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 2px; display: grid; }
.aw-search-x .ic { position: static; transform: none; width: 16px; height: 16px; }
.aw-search-x:hover { color: hsl(var(--foreground)); }
.aw-search-cat { position: relative; width: 180px; flex: 0 0 auto; }
.aw-search-cat .select { padding-left: 26px; }
.aw-dot { position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: hsl(var(--muted-foreground) / .3); pointer-events: none; }
.aw-dot.on { background: hsl(var(--primary)); }
.aw-search-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aw-search-meta [data-fchips] { display: contents; }
.aw-pop { position: relative; flex: 0 0 auto; }
.aw-pop > summary { list-style: none; cursor: pointer; } .aw-pop > summary::-webkit-details-marker { display: none; }
.aw-pop-bang { display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 11px; background: hsl(var(--muted)); color: hsl(var(--foreground)); margin-left: 2px; }
.aw-pop-box { position: absolute; right: 0; top: calc(100% + 6px); width: 256px; padding: 16px; z-index: 40; box-shadow: 0 16px 40px -12px rgb(0 0 0 / .35); }

/* stat cards */
.aw-stats { display: grid; gap: 12px; }
.aw-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aw-stats-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aw-stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aw-stat { display: flex; align-items: center; gap: 12px; padding: 16px; text-align: left; font: inherit; color: inherit; min-width: 0; }
button.aw-stat { cursor: pointer; transition: box-shadow .2s; }
button.aw-stat:hover { box-shadow: 0 6px 18px -8px rgb(0 0 0 / .3); }
.aw-stat.on { outline: 2px solid hsl(var(--primary)); outline-offset: -1px; }
.aw-stat > span:last-child { min-width: 0; display: grid; }
.aw-stat small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-stat-sm { padding: 12px; gap: 8px; }
.aw-stat-ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); border-radius: calc(var(--radius) + 6px); }
.aw-stat-ic .ic { width: 16px; height: 16px; }
.aw-stat-ic-lg { width: 40px; height: 40px; } .aw-stat-ic-lg .ic { width: 20px; height: 20px; }
.aw-stat-n { font-size: 18px; font-weight: 700; line-height: 1.15; }
.aw-stat-n-lg { font-size: 24px; }

/* dialogs & inline form cards */
.modal-box.aw-dlg { padding: 24px; }
.aw-dlg-2xl { width: min(672px, 100%); max-height: 90vh; }
.aw-dlg-4xl { width: min(896px, 100%); max-height: 90vh; }
.aw-dlg-t { font: 600 18px/1.3 var(--font-head); margin: 0 40px 20px 0; }
.aw-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.aw-formcard { padding: 24px; }
.aw-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.aw-items-end { align-items: flex-end; }
.aw-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }

/* ImageUploadWithAI */
.aw-img-pv { position: relative; }
.aw-img-pv img, .aw-img-pdf, .aw-img-drop { width: 100%; height: 160px; border: 1px solid hsl(var(--border)); }
.aw-asp-portrait .aw-img-pv img, .aw-asp-portrait .aw-img-pdf, .aw-asp-portrait .aw-img-drop { height: auto; aspect-ratio: 1 / 1.414; max-width: 100%; }
.aw-asp-square .aw-img-pv img, .aw-asp-square .aw-img-pdf, .aw-asp-square .aw-img-drop { height: auto; aspect-ratio: 1; }
.aw-img-pv img { object-fit: cover; display: block; }
.aw-img-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: hsl(var(--muted)); }
.aw-img-pdf .ic { width: 48px; height: 48px; color: hsl(var(--muted-foreground)); }
.aw-img-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: hsl(var(--background) / .8); opacity: 0; transition: opacity .2s; }
.aw-img-pv:hover .aw-img-ov, .aw-img-pv:focus-within .aw-img-ov { opacity: 1; }
@media (hover: none) { .aw-img-ov { opacity: 1; background: transparent; align-items: flex-end; justify-content: flex-end; padding: 8px; } }
.aw-img-dup { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px; color: #d97706; background: #fffbeb; }
.dark .aw-img-dup { background: rgb(69 26 3 / .3); color: #fbbf24; }
.aw-img-dup .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.aw-img-empty { display: grid; gap: 12px; padding: 16px; border: 2px dashed hsl(var(--border)); background: hsl(var(--muted) / .3); }
.aw-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: hsl(var(--muted)); }
.aw-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; font: 500 12px var(--font-body); border: 0; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; }
.aw-seg button .ic { width: 12px; height: 12px; }
.aw-seg button.on { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
[data-img-pane] { display: grid; gap: 12px; }
[data-img-pane] p { margin: 0; }
.aw-img-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: hsl(var(--muted-foreground)); background: hsl(var(--background) / .5); cursor: pointer; font: inherit; transition: color .2s, border-color .2s; }
.aw-img-drop:hover:not(:disabled) { color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.aw-img-drop-ic { display: flex; gap: 8px; } .aw-img-drop-ic .ic { width: 24px; height: 24px; }
.aw-ai-note { display: flex; align-items: center; justify-content: center; gap: 4px; color: hsl(var(--primary)); }
.aw-ai-note.aw-left { justify-content: flex-start; }
.aw-ai-note .ic { width: 12px; height: 12px; }

/* progress */
.aw-prog { height: 8px; background: hsl(var(--primary) / .2); overflow: hidden; }
.aw-prog i { display: block; height: 100%; width: 0; background: hsl(var(--primary)); transition: width .3s; }

/* ---------- Portfolio ---------- */
.aw-pf-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aw-pf-card { overflow: hidden; display: flex; flex-direction: column; }
.aw-pf-thumb { position: relative; height: 128px; background: hsl(var(--muted)); }
.aw-pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-pf-noimg { display: grid; place-items: center; height: 100%; color: hsl(var(--muted-foreground)); } .aw-pf-noimg .ic { width: 32px; height: 32px; }
.aw-live { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; background: #3b82f6; color: #fff; }
.aw-live .ic { width: 12px; height: 12px; }
.aw-pf-ext { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .5); color: #fff; transition: background .2s; }
.aw-pf-ext:hover { background: rgb(0 0 0 / .7); } .aw-pf-ext .ic { width: 12px; height: 12px; }
.aw-pf-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.aw-pf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.aw-pf-top p { margin: 2px 0 0; }
.aw-pf-title { font: 600 15px/1.35 var(--font-head); margin: 0; overflow-wrap: anywhere; }
.aw-techs { display: flex; flex-wrap: wrap; gap: 4px; min-height: 4px; }
.aw-tech { padding: 4px 8px; font-size: 12px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.aw-pf-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

/* bulk photo upload */
.aw-bulk-drop { width: 100%; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed hsl(var(--border)); background: hsl(var(--muted) / .3); color: hsl(var(--muted-foreground)); cursor: pointer; font: inherit; }
.aw-bulk-drop:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); } .aw-bulk-drop .ic { width: 32px; height: 32px; }
[data-bulk-panel] { display: grid; gap: 16px; margin-top: 16px; }
.aw-bulk-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.aw-bulk-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.aw-bulk-it { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.aw-bulk-it.s-done { border-color: #22c55e; } .aw-bulk-it.s-error { border-color: hsl(var(--destructive)); }
.aw-bulk-it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-bulk-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; transition: opacity .2s; }
.s-pending .aw-bulk-ov { background: hsl(var(--background) / .5); } .s-uploading .aw-bulk-ov { background: hsl(var(--primary) / .2); } .s-analyzing .aw-bulk-ov { background: rgb(168 85 247 / .2); }
.s-done .aw-bulk-ov { background: rgb(34 197 94 / .2); opacity: 0; } .s-done:hover .aw-bulk-ov { opacity: 1; } .s-error .aw-bulk-ov { background: hsl(var(--destructive) / .2); }
.aw-okmark { color: #22c55e; font-size: 24px; font-weight: 800; } .aw-errmark { color: hsl(var(--destructive)); font-size: 20px; font-weight: 800; }
.aw-bulk-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: hsl(var(--background) / .8); color: hsl(var(--foreground)); cursor: pointer; opacity: 0; transition: opacity .2s; }
.aw-bulk-it:hover .aw-bulk-x { opacity: 1; } .aw-bulk-x:hover { background: hsl(var(--destructive)); color: #fff; }
@media (hover: none) { .aw-bulk-x { opacity: 1; } }
.aw-bulk-cap { position: absolute; inset: auto 0 0; padding: 8px; background: linear-gradient(to top, rgb(0 0 0 / .8), transparent); color: #fff; display: grid; }
.aw-bulk-cap b, .aw-bulk-cap small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .aw-bulk-cap small { font-size: 11px; opacity: .7; }

/* ---------- Publications / Certificates rows ---------- */
.aw-pub, .aw-cert { display: flex; align-items: flex-start; gap: 16px; padding: 24px; }
.aw-pub-main, .aw-cert-body { flex: 1; min-width: 0; }
.aw-pub-head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.aw-pub-ic .ic { width: 20px; height: 20px; color: hsl(var(--primary)); margin-top: 2px; }
.aw-pub-title, .aw-cert-title { font: 600 16px/1.3 var(--font-head); margin: 0; overflow-wrap: anywhere; }
.aw-cert-title { font-size: 18px; }
.aw-pub-head p { margin: 4px 0 0; }
.aw-pub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.aw-row-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.aw-cert-img { width: 96px; height: 96px; flex: 0 0 auto; object-fit: cover; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 6px); }
.aw-cert-ph { display: grid; place-items: center; color: #fff; border: 0; background: linear-gradient(135deg, var(--a), var(--b)); } .aw-cert-ph .ic { width: 40px; height: 40px; }
.aw-issuer { color: hsl(var(--primary)); font-weight: 500; margin: 0; }
.aw-cert-body .mb-1 { margin-bottom: 4px; }
.aw-tabs-wrap { overflow-x: auto; scrollbar-width: thin; margin-bottom: -8px; }
.aw-tabs { display: grid; grid-template-columns: repeat(6, minmax(max-content, 1fr)); padding: 4px; background: hsl(var(--muted)); min-width: 100%; width: max-content; }
.aw-tab { padding: 6px 12px; font: 500 13px var(--font-body); border: 0; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; white-space: nowrap; }
.aw-tab.on { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }

/* ---------- Bulk certificate import ---------- */
.aw-scan { border: 1px solid hsl(var(--border)); padding: 8px 12px; background: hsl(var(--muted) / .3); }
.aw-scan summary { cursor: pointer; display: flex; align-items: center; gap: 6px; } .aw-scan summary .ic { width: 16px; height: 16px; color: hsl(var(--primary)); }
.aw-res { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid; margin-bottom: 8px; }
.aw-res p { margin: 0; }
.aw-res-success { background: #f0fdf4; border-color: #bbf7d0; } .dark .aw-res-success { background: rgb(5 46 22 / .2); border-color: #166534; }
.aw-res-error { background: hsl(var(--destructive) / .1); border-color: hsl(var(--destructive) / .3); }
.aw-res-skipped { background: #fefce8; border-color: #fef08a; } .dark .aw-res-skipped { background: rgb(66 32 6 / .2); border-color: #854d0e; }
.aw-res-ic { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; }
.aw-res-success .aw-res-ic { background: #16a34a; } .aw-res-error .aw-res-ic { background: hsl(var(--destructive)); } .aw-res-skipped .aw-res-ic { background: #ca8a04; }
.aw-issuer-h { margin: 0 0 8px; color: hsl(var(--primary)); font-weight: 600; text-transform: capitalize; }
.aw-miss { display: grid; gap: 4px; padding-left: 16px; }
.aw-miss-i { display: flex; align-items: center; gap: 8px; }
.aw-miss-i .btn { opacity: .5; } .aw-miss-i:hover .btn { opacity: 1; } .aw-miss-i .btn .ic { width: 12px; height: 12px; }
.aw-dot-amber { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex: 0 0 auto; }

/* ---------- Messages ---------- */
.aw-msg-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: -8px; }
.aw-msg-tools .input-icon { min-width: 220px; }
.aw-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.aw-msg { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px; cursor: pointer; transition: background .2s; }
.aw-msg:hover { background: hsl(var(--accent) / .08); }
.aw-msg:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.aw-msg.unread { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .05); }
.aw-msg-l { display: flex; gap: 16px; align-items: flex-start; flex: 1; min-width: 0; }
.aw-msg-l p { margin: 0 0 4px; }
.aw-msg-av { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--muted)); }
.aw-msg.unread .aw-msg-av { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.aw-msg-av .ic { width: 20px; height: 20px; }
.aw-msg-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.aw-msg-name h3 { font: 600 15px var(--font-head); margin: 0; }
.aw-msg-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.aw-msg-r .aw-date { margin: 0; white-space: nowrap; } .aw-msg-r .aw-date .ic { width: 12px; height: 12px; }
.aw-msg-grid { gap: 16px; } .aw-msg-grid p { margin: 2px 0 0; }
.aw-reply-box { background: hsl(var(--muted) / .5); padding: 16px; }

/* ---------- Client Work (Drive viewer) ---------- */
.aw-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: hsl(var(--muted-foreground)); margin-bottom: -8px; }
.aw-crumbs .ic { width: 14px; height: 14px; }
.aw-crumbs button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; font: inherit; } .aw-crumbs button:hover { color: #8E44AD; text-decoration: underline; }
.aw-cw-c { color: #8E44AD; }
.aw-cw-logo { width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(135deg, #8E44AD30, #9B59B630); color: #8E44AD; flex: 0 0 auto; } .aw-cw-logo .ic { width: 20px; height: 20px; }
.aw-cw-btn { border: 2px solid #8E44AD; color: #8E44AD; } .aw-cw-btn:hover { background: #8E44AD14; color: #8E44AD; }
.aw-cw-link { padding: 12px; border-left: 4px solid #8E44AD; }
.aw-cw-main { display: flex; gap: 16px; min-height: 75vh; }
.aw-cw-side { width: 320px; flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; }
.aw-cw-side-h { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .5); }
.aw-cw-fic .ic { width: 16px; height: 16px; color: #8E44AD; }
.aw-cw-search .input { height: 32px; font-size: 12px; } .aw-cw-search .ic { width: 14px; height: 14px; left: 10px; } .aw-cw-search .input { padding-left: 30px; }
.aw-cnt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); } .aw-cnt .ic { width: 12px; height: 12px; }
.aw-cw-list { flex: 1; overflow-y: auto; padding: 8px; max-height: 75vh; }
.aw-cw-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.aw-cw-item:hover { background: hsl(var(--muted) / .5); } .aw-cw-item.on { background: hsl(var(--muted)); }
.aw-cw-item .truncate { min-width: 0; }
.aw-cw-nv { opacity: .75; }
.aw-fi { display: inline-grid; flex: 0 0 auto; } .aw-fi .ic { width: 16px; height: 16px; }
.aw-cw-ext { font: 10px var(--font-mono); color: hsl(var(--muted-foreground)); }
.aw-cw-loading { padding: 48px 0; text-align: center; } .aw-violet { color: #8E44AD; }
.aw-cw-view { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.aw-cw-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; text-align: center; }
.aw-cw-welcome h3 { font: 600 18px var(--font-head); margin: 0 0 4px; }
.aw-cw-big .ic { width: 64px; height: 64px; color: #8E44AD; opacity: .2; margin-bottom: 16px; }
.aw-cw-doc { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.aw-cw-doc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); }
.aw-cw-doc-h .truncate { min-width: 0; flex: 1 1 120px; }
.aw-cw-doc-a { display: flex; gap: 4px; flex-wrap: wrap; }
.aw-ext-badge { padding: 2px 8px; font-size: 12px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.aw-flipbtn { border-color: #8E44AD; color: #8E44AD; }
.aw-dlbtn { color: #059669; border-color: #6ee7b7; } .aw-dlbtn:hover { background: #ecfdf5; color: #059669; }
.aw-cw-frame { flex: 1; width: 100%; min-height: 550px; border: 0; background: hsl(var(--muted) / .3); }
.aw-cw-fs .aw-cw-view { position: fixed; inset: 0; z-index: 1100; border: 0; }
.aw-cw-fs .aw-cw-frame { min-height: 0; }
.aw-fb { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; background: hsl(var(--background) / .96); backdrop-filter: blur(4px); }
.aw-fb[hidden] { display: none; }
.aw-fb-top, .aw-fb-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border) / .5); }
.aw-fb-top .truncate { min-width: 0; }
.aw-fb-foot { justify-content: center; border-top: 1px solid hsl(var(--border) / .5); border-bottom: 0; gap: 16px; }
.aw-fb-ic .ic { width: 20px; height: 20px; color: #8E44AD; }
.aw-fb-badge { padding: 2px 8px; font-size: 12px; font-weight: 600; background: #8E44AD20; color: #8E44AD; }
.aw-fb-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; position: relative; }
.aw-fb-load { text-align: center; color: #8E44AD; }
.aw-fb-book { display: flex; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .5); perspective: 1600px; }
.aw-fb-pg { background: #fff; cursor: pointer; display: grid; place-items: center; min-width: 40px; }
.aw-fb-pg.blank { background: transparent; }
.aw-fb-pg canvas { display: block; }
.aw-fb-book.turn-f .aw-fb-pg { animation: aw-flip-f .45s ease-out; transform-origin: left center; }
.aw-fb-book.turn-b .aw-fb-pg { animation: aw-flip-b .45s ease-out; transform-origin: right center; }
@keyframes aw-flip-f { from { transform: rotateY(-25deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes aw-flip-b { from { transform: rotateY(25deg); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .aw-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aw-bulk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .aw-cw-main { flex-direction: column; min-height: 0; }
  .aw-cw-side { width: auto; }
  .aw-cw-list { max-height: 45vh; }
  .aw-cw-frame { min-height: 70vh; }
}
@media (max-width: 767px) {
  .aw-pf-grid, .aw-g2, .aw-gap6 { grid-template-columns: minmax(0, 1fr); }
  .aw-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-stats-4, .aw-stats-5, .aw-stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-bulk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-search-row { flex-direction: column; }
  .aw-search-cat { width: 100%; }
  .aw-pop > summary { width: 100%; justify-content: center; }
  .aw-pop-box { left: 0; right: auto; width: 100%; }
}
@media (max-width: 560px) {
  .aw-g3 { grid-template-columns: minmax(0, 1fr); }
  .aw-pub, .aw-cert { padding: 16px; gap: 12px; flex-wrap: wrap; }
  .aw-cert-img { width: 64px; height: 64px; } .aw-cert-ph .ic { width: 28px; height: 28px; }
  .aw-cert-body { flex-basis: calc(100% - 80px); }
  .aw-pub-main { flex-basis: 100%; }
  .aw-row-actions { margin-left: auto; }
  .aw-msg { flex-direction: column; gap: 8px; }
  .aw-msg-r { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .aw-msg-l { gap: 12px; }
  .aw-formcard, .aw-pad6, .modal-box.aw-dlg { padding: 16px; }
  .aw-msg-tools .input-icon { min-width: 0; width: 100%; }
}
.aw-dlg label.field, .aw-formcard label.field, .aw-dlg .field, .aw-formcard .field { display: block; }
.aw-dlg .textarea, .aw-formcard .textarea { min-height: 0; }
.aw-stats-6 .aw-stat small { white-space: normal; line-height: 1.3; }
.aw-pills .pill { gap: 0; }
@media (max-width: 560px) { .aw-msg-tools .input-icon { flex: 1 1 100%; } }

/* --- life --- */
/* ===================== Phase 7 · Life Story admin (prefix al-) ===================== */
.al { --al-green: #22c55e; --al-amber: #f59e0b; --al-cyan: #06b6d4; --al-purple: #a855f7; --al-teal: #14b8a6; --al-orange: #f97316; min-width: 0; }
.al .al-h-ic { display: inline-grid; color: hsl(var(--primary)); } .al .al-h-ic .ic { width: 24px; height: 24px; }
.al .al-w-40 { width: 160px; } .al .al-w-48 { width: 200px; } .al .al-w-56 { width: 224px; } .al .al-w-full { width: 100%; }
.al .al-danger-t { color: hsl(var(--destructive)); } .al .al-danger-t:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08); }
.al .al-dot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; flex: none; }
.al .al-dot-sm { width: 6px; height: 6px; }
.al .al-sq { display: inline-block; width: 16px; height: 16px; border-radius: 4px; flex: none; }
.al .al-spin, .al-dlg .al-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; margin-right: 6px; vertical-align: -2px; }
.al .al-card-t { font-size: 18px; margin: 0 0 12px; }
.al .al-bt { padding-top: 14px; border-top: 1px solid hsl(var(--border) / .7); }
.al .al-ta-2 { min-height: 64px; }

/* stats */
.al .al-stats { display: grid; gap: 12px; margin-bottom: 18px; }
.al .al-stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.al .al-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al .al-stat { border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; color: hsl(var(--primary)); }
.al .al-stat .ic { width: 20px; height: 20px; }
.al .al-stat b { font: 800 24px/1.1 var(--font-head); }
.al .al-stat small { font-size: 12px; color: hsl(var(--muted-foreground)); }
.al .al-stat-lg b { font-size: 30px; }
.al .al-stat-left { align-items: flex-start; text-align: left; color: hsl(var(--foreground)); }
.al .al-c-green { color: var(--al-green); } .al .al-c-amber { color: var(--al-amber); } .al .al-c-cyan { color: var(--al-cyan); }
.al .al-c-purple { color: var(--al-purple); } .al .al-c-teal { color: var(--al-teal); } .al .al-c-orange { color: var(--al-orange); }
@media (max-width: 767px) { .al .al-stats-5, .al .al-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* filters */
.al .al-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; border-radius: 12px; }
.al .al-filters .input-icon { min-width: 220px; }
@media (max-width: 639px) { .al .al-filters > * { width: 100% !important; min-width: 0 !important; flex: 1 1 100%; } }

/* small badges */
.al .al-b, .al-dlg .al-b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.45;
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid transparent; white-space: nowrap; }
.al .al-b .ic, .al-dlg .al-b .ic { width: 12px; height: 12px; }
.al .al-b-soft, .al-dlg .al-b-soft { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.al .al-b-amber { background: var(--al-amber); color: #fff; }
.al .al-b-cyan { background: rgb(6 182 212 / .2); color: #0891b2; }
.al .al-b-on, .al-dlg .al-b-on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.al .al-b-out { background: transparent; border-color: color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); font-size: 11px; }
.al .al-b-9 { font-size: 11px; padding: 0 6px; }
.al .al-b-xs { font-size: 11px; padding: 2px 8px; border-radius: 999px; }

/* ---------- memories grid ---------- */
.al .al-mgrid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .al .al-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .al .al-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .al .al-mgrid { grid-template-columns: 1fr; } }
.al .al-mcard { position: relative; border-radius: 12px; overflow: hidden; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: box-shadow .2s, opacity .2s; }
.al .al-mcard.is-dim { background: hsl(var(--muted) / .5); border-color: hsl(var(--border) / .5); opacity: .75; }
.al .al-mcard:hover { box-shadow: 0 10px 28px -14px hsl(var(--primary) / .35); }
.al .al-mimg { position: relative; aspect-ratio: 4 / 3; background: hsl(var(--muted)); overflow: hidden; }
.al .al-mimg img, .al .al-mimg video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.al .al-mcard:hover .al-mimg img { transform: scale(1.05); }
.al .al-mph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 36px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, transparent), color-mix(in srgb, var(--c) 25%, transparent)); }
.al .al-mover { position: absolute; inset: 0; background: rgb(0 0 0 / .6); display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .2s; }
.al .al-mcard:hover .al-mover, .al .al-mcard:focus-within .al-mover { opacity: 1; }
@media (hover: none) { .al .al-mover { opacity: 1; background: linear-gradient(transparent 55%, rgb(0 0 0 / .55)); align-items: flex-end; padding-bottom: 34px; } }
.al .al-ib { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); cursor: pointer; }
.al .al-ib:hover { filter: brightness(1.08); }
.al .al-ib .ic { width: 16px; height: 16px; }
.al .al-ib.is-star .ic { fill: var(--al-amber); color: var(--al-amber); }
.al .al-ib-del { background: hsl(var(--destructive)); color: #fff; }
.al .al-mbadges { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.al .al-mcat { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; color: #fff; }
.al .al-mstatus { position: absolute; bottom: 8px; left: 8px; font-size: 11px; }
.al .al-mstatus.is-on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.al .al-minfo { padding: 12px; }
.al .al-minfo h3 { font-size: 14px; font-weight: 600; margin: 0; }
.al .al-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 12px; color: hsl(var(--muted-foreground)); min-width: 0; }
.al .al-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.al .al-meta .ic { width: 12px; height: 12px; flex: none; }
.al .al-meta-md { font-size: 13px; gap: 4px 16px; } .al .al-meta-md .ic { width: 15px; height: 15px; }

/* drag-sort */
.al .al-grip { position: absolute; top: 8px; left: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 4px; border: 1px solid hsl(var(--border)); background: hsl(var(--background) / .9);
  color: hsl(var(--muted-foreground)); font-size: 14px; line-height: 1; cursor: grab; opacity: 0; transition: opacity .2s; display: grid; place-items: center; padding: 0; }
.al .al-mcard .al-grip { top: 38px; }
.al [data-al-item]:hover .al-grip, .al .al-grip:focus { opacity: 1; }
@media (hover: none) { .al .al-grip { opacity: .9; } }
.al .al-grip:active { cursor: grabbing; }
.al .al-nosort .al-grip { display: none; }
.al .al-dragging { opacity: .55; outline: 2px dashed hsl(var(--primary)); }
.al .al-editing { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

/* ---------- dialogs ---------- */
.modal-box.al-dlg { width: min(672px, 100%); border-radius: 16px; padding: 24px; max-height: 90vh; }
.modal-box.al-dlg-sm { width: min(384px, 100%); }
.modal-box.al-dlg-lg { width: min(512px, 100%); max-height: 80vh; }
.al-dlg .al-dlg-t { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 32px 12px 0; }
.al-dlg .al-dlg-t .ic { width: 20px; height: 20px; color: hsl(var(--primary)); }
.al-dlg .al-dlg-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.al-dlg .al-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: hsl(var(--muted)); border-radius: 8px; margin-bottom: 16px; }
.al-dlg .al-tabs button { border: 0; background: transparent; padding: 6px 4px; border-radius: 8px; font: 500 13px var(--font-body); color: hsl(var(--muted-foreground)); cursor: pointer; }
.al-dlg .al-tabs button.active { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.al-dlg .al-switchrow, .al .al-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); margin-bottom: 14px; font-size: 14px; font-weight: 500; cursor: pointer; }
.al-dlg .al-switchrow .ic { width: 20px; height: 20px; color: hsl(var(--muted-foreground)); }
.al-dlg .al-sr-amber { background: rgb(245 158 11 / .1); border-color: rgb(245 158 11 / .2); }
.al-dlg .al-sr-amber .ic { color: #f59e0b; }

/* media uploader (MediaUploadWithDrive) */
.al-dlg .al-media { margin-top: 6px; }
.al-dlg .al-media-drop { padding: 12px; border: 2px dashed hsl(var(--border)); border-radius: 8px; background: hsl(var(--muted) / .3); display: grid; gap: 12px; }
.al-dlg .al-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: hsl(var(--muted)); border-radius: 8px; }
.al-dlg .al-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; padding: 6px; border-radius: 4px; font: 500 12px var(--font-body); color: hsl(var(--muted-foreground)); cursor: pointer; }
.al-dlg .al-seg button.active { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.al-dlg .al-seg .ic { width: 12px; height: 12px; }
.al-dlg .al-media-pick { width: 100%; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid hsl(var(--border)); border-radius: 8px;
  background: hsl(var(--background) / .5); color: hsl(var(--muted-foreground)); cursor: pointer; font-family: inherit; transition: color .2s, border-color .2s; }
.al-dlg .al-media-pick:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.al-dlg .al-media-pick .ic { width: 24px; height: 24px; } .al-dlg .al-media-pick .xs .ic { width: 12px; height: 12px; }
.al-dlg .al-media-pv { position: relative; border-radius: 8px; overflow: hidden; }
.al-dlg .al-media-pv img, .al-dlg .al-media-pv video { width: 100%; height: 192px; object-fit: cover; display: block; border: 1px solid hsl(var(--border)); border-radius: 8px; background: #000; }
.al-dlg .al-media-over { position: absolute; inset: 0; background: hsl(var(--background) / .8); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; opacity: 0; transition: opacity .2s; }
.al-dlg .al-media-pv:hover .al-media-over, .al-dlg .al-media-over:focus-within { opacity: 1; }
@media (hover: none) { .al-dlg .al-media-over { opacity: 1; background: linear-gradient(transparent 50%, hsl(var(--background) / .85)); align-items: flex-end; padding-bottom: 10px; } }
.al-dlg .al-media-busy { position: absolute; inset: 0; background: hsl(var(--background) / .6); display: flex; align-items: center; justify-content: center; gap: 8px; color: hsl(var(--primary)); font-size: 14px; font-weight: 500; }
.al-dlg .al-media-busy .ic { width: 20px; height: 20px; animation: al-pulse 1.2s ease-in-out infinite; }
@keyframes al-pulse { 50% { opacity: .35; } }

/* ---------- location picker port ---------- */
.al .al-loc, .al-dlg .al-loc { display: grid; gap: 8px; }
.al .al-modes, .al-dlg .al-modes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: hsl(var(--muted) / .5); border-radius: 8px; }
.al .al-mode, .al-dlg .al-mode { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 500 13px var(--font-body); color: hsl(var(--foreground)); cursor: pointer; }
.al .al-mode .ic, .al-dlg .al-mode .ic { width: 14px; height: 14px; }
.al .al-mode.active, .al-dlg .al-mode.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.al .al-loc .mp, .al-dlg .al-loc .mp { border-radius: 8px; }
.al-dlg .al-loc .mp-map { height: 250px; }
.al .al-loc .mp-map { height: 280px; }
.al .al-coords, .al-dlg .al-coords { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: hsl(var(--primary) / .05); color: hsl(var(--muted-foreground)); }
.al .al-coords .ic, .al-dlg .al-coords .ic { width: 15px; height: 15px; color: hsl(var(--primary)); }
.al .al-coords .al-danger-t .ic, .al-dlg .al-coords .al-danger-t .ic { color: hsl(var(--destructive)); }
.al-dlg .al-danger-t { color: hsl(var(--destructive)); }
.al .al-more summary, .al-dlg .al-more summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 6px 8px; border-radius: 8px; list-style: none; }
.al .al-more summary::-webkit-details-marker, .al-dlg .al-more summary::-webkit-details-marker { display: none; }
.al .al-more summary:hover, .al-dlg .al-more summary:hover { background: hsl(var(--primary) / .06); }
.al .al-more summary .ic, .al-dlg .al-more summary .ic { width: 14px; height: 14px; transition: transform .2s; }
.al .al-more[open] summary .ic, .al-dlg .al-more[open] summary .ic { transform: rotate(180deg); }

/* ---------- inline editors, rows ---------- */
.al .al-editor { margin-bottom: 18px; border-radius: 12px; }
.al .al-editor-ring { border: 2px solid hsl(var(--primary) / .2); }
.al .al-stack { display: grid; gap: 12px; }
.al .al-row { border-radius: 12px; }
.al .is-off { opacity: .5; }
.al .al-row-t { font-size: 16px; margin: 0; }
.al .al-star { display: inline-grid; color: #eab308; } .al .al-star .ic { width: 16px; height: 16px; fill: #eab308; }
.al .al-rowimgs { display: flex; gap: 6px; } .al .al-rowimgs img { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid hsl(var(--border)); }
.al .al-emptyc { border-radius: 12px; }
.al .al-colorpick { width: 44px; height: 40px; flex: none; padding: 2px; border: 1px solid hsl(var(--input)); border-radius: var(--radius); background: hsl(var(--background)); cursor: pointer; }
.al-dlg .al-colorpick { width: 44px; height: 40px; flex: none; padding: 2px; border: 1px solid hsl(var(--input)); border-radius: var(--radius); background: hsl(var(--background)); cursor: pointer; }
.al .al-g3-2 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al .al-g4 { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al .al-span2 { grid-column: span 2; }
@media (max-width: 767px) { .al .al-g3-2, .al .al-g4 { grid-template-columns: 1fr; } .al .al-span2 { grid-column: auto; } }

/* tag chips */
.al .al-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.al .al-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font: 600 12px var(--font-body); cursor: pointer; }
.al .al-chip b { font-weight: 700; opacity: .7; } .al .al-chip:hover { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }

/* gallery */
.al .al-gallery { display: grid; gap: 8px; }
.al .al-gallery-box { border: 2px dashed hsl(var(--border)); border-radius: 8px; padding: 12px; }
.al .al-thumbs { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.al .al-thumbs-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
@media (max-width: 767px) { .al .al-thumbs-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.al .al-thumb { position: relative; aspect-ratio: 1; }
.al .al-thumbs:not(.al-thumbs-6) .al-thumb { aspect-ratio: 16 / 10; }
.al .al-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid hsl(var(--border)); }
.al .al-thumb button { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 999px; border: 0; background: hsl(var(--destructive)); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s; }
.al .al-thumb:hover button, .al .al-thumb button:focus { opacity: 1; }
@media (hover: none) { .al .al-thumb button { opacity: 1; } }
.al .al-drive { display: flex; gap: 6px; flex: 1 1 260px; min-width: 0; }
.al .al-drive .input { height: 32px; font-size: 13px; }

/* swatches */
.al .al-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.al .al-sw { width: 32px; height: 32px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .15s; padding: 0; }
.al .al-sw:hover { transform: scale(1.1); }
.al .al-sw.active { border-color: hsl(var(--foreground)); transform: scale(1.1); }
.al .al-swatches-sm { gap: 6px; } .al .al-swatches-sm .al-sw { width: 28px; height: 28px; }
.al .al-swatches-sm .al-sw.active { border-color: #fff; box-shadow: 0 0 0 2px var(--c); transform: none; }

/* ---------- footprint ---------- */
.al .al-group { margin-bottom: 24px; }
.al .al-group-t { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 12px; }
.al .al-loccard { border-radius: 12px; transition: box-shadow .2s; min-width: 0; }
.al .al-loccard:hover { box-shadow: 0 10px 26px -14px rgb(0 0 0 / .3); }
.al .al-loccard h4 { margin: 0; font-size: 14px; font-weight: 600; }

/* ---------- journey (Life Exhibition) ---------- */
.al .al-hero { position: relative; overflow: hidden; border-radius: 12px; padding: 24px; color: #fff; background: linear-gradient(90deg, #ec4899, #a855f7, #06b6d4); }
.al .al-hero::before { content: ''; position: absolute; inset: 0; background: rgb(0 0 0 / .1); }
.al .al-hero > * { position: relative; }
.al .al-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.al .al-hero h1 { font-size: 30px; margin: 0; color: #fff; }
.al .al-hero p { margin: 4px 0 0; color: rgb(255 255 255 / .8); }
.al .al-hero-btn { background: #fff; color: #9333ea; }
.al .al-hero-btn:hover { background: rgb(255 255 255 / .9); color: #9333ea; }
.al .al-hero-ghost { background: rgb(255 255 255 / .15); color: #fff; border-color: rgb(255 255 255 / .35); }
.al .al-hero-ghost:hover { color: #fff; background: rgb(255 255 255 / .25); }
.al .al-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.al .al-hero-stats > div { background: rgb(255 255 255 / .2); backdrop-filter: blur(4px); border-radius: 8px; padding: 12px; text-align: center; }
.al .al-hero-stats b { display: block; font: 800 24px/1.1 var(--font-head); }
.al .al-hero-stats small { font-size: 12px; color: rgb(255 255 255 / .75); }
@media (max-width: 559px) { .al .al-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .al .al-hero h1 { font-size: 24px; } }
.al .al-year { margin-top: 24px; }
.al .al-year-h { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.al .al-year-n { width: 80px; height: 80px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; font: 900 24px var(--font-head); box-shadow: 0 10px 20px -8px rgb(0 0 0 / .35); }
.al .al-pill { padding: 2px 8px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 600; }
.al .al-year-body { margin: 0 0 32px 96px; display: grid; gap: 16px; }
@media (max-width: 767px) { .al .al-year-body { margin-left: 0; } .al .al-year-n { width: 64px; height: 64px; font-size: 20px; } }
.al .al-jgrid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .al .al-jgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .al .al-jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .al .al-jgrid { grid-template-columns: 1fr; } }
.al .al-jcard { overflow: hidden; border: 0; border-radius: 12px; box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 0 0 1px hsl(var(--border) / .6); transition: transform .3s, box-shadow .3s; min-width: 0; }
.al .al-jcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgb(0 0 0 / .35), 0 0 0 1px hsl(var(--border) / .6); }
.al .al-jcard.is-hidden { opacity: .5; filter: grayscale(1); }
.al .al-jbar { height: 6px; }
.al .al-jimg { position: relative; aspect-ratio: 16 / 9; background: hsl(var(--muted)); overflow: hidden; }
.al .al-jimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.al .al-jimg img:hover { transform: scale(1.1); }
.al .al-jcount { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgb(0 0 0 / .7); color: #fff; font-size: 12px; font-weight: 500; }
.al .al-jcount .ic { width: 12px; height: 12px; }
.al .al-jhid { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 500; }
.al .al-jph { height: 80px; display: grid; place-items: center; opacity: .2; }
.al .al-jph span { font-size: 36px; opacity: .5; }
.al .al-jcat { padding: 4px 8px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.al .al-jt { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.3; }
.al .al-jloc { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; min-width: 0; }
.al .al-jloc .ic { width: 12px; height: 12px; display: block; }
.al .al-editbtn:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.al .al-coll summary { list-style: none; justify-content: space-between; }
.al .al-coll summary::-webkit-details-marker { display: none; }
.al .al-coll[open] summary > .ic { transform: rotate(180deg); }
.al .pt-4 { padding-top: 16px; }

/* ---------- life friends ---------- */
.al .al-friend { position: relative; border-radius: 12px; }
.al .al-grip-in { top: 50%; left: -10px; transform: translateY(-50%); }
.al .al-ficon { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--c); }
.al .al-ficon .ic { width: 20px; height: 20px; }
.al .al-fname { font-size: 14px; font-weight: 600; margin: 0 0 2px; }

/* ---------- my domain nodes ---------- */
.al .al-ngroup { border-radius: 12px; margin-bottom: 18px; }
.al .al-nlist { display: grid; gap: 8px; }
.al .al-node { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); transition: background .2s; flex-wrap: wrap; }
.al .al-node:hover { background: hsl(var(--accent) / .08); }
.al .al-nsize { width: 32px; height: 32px; border-radius: 4px; flex: none; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; }
.al .al-nlabel { font-size: 14px; }
.al .al-nmeta { overflow-wrap: anywhere; }
.al .al-empty-ic { display: block; color: hsl(var(--muted-foreground)); } .al .al-empty-ic .ic { width: 48px; height: 48px; margin: 12px auto; }
.al-dlg .al-step { padding: 16px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--muted) / .3); margin-bottom: 14px; }
.al-dlg .al-step[hidden] { display: none; }
.al-dlg .al-step-t { font-size: 14px; }
.al-dlg .al-step > p.xs { margin: 2px 0 8px; }
.al-dlg .al-hier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 559px) { .al-dlg .al-hier { grid-template-columns: 1fr; } }
.al-dlg .al-hcard { display: grid; gap: 4px; text-align: left; padding: 12px; border: 2px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); cursor: pointer; font-family: inherit; color: inherit; transition: border-color .2s, background .2s; }
.al-dlg .al-hcard:hover { border-color: hsl(var(--primary) / .5); }
.al-dlg .al-hcard.on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }
.al-dlg .al-muted-in { background: hsl(var(--muted)); font-size: 13px; }
.al-dlg .al-connbox { max-height: 192px; overflow-y: auto; display: grid; gap: 2px; border: 1px solid hsl(var(--border)); border-radius: 8px; padding: 8px; background: hsl(var(--background)); margin-bottom: 8px; }
.al-dlg .al-conn-h { font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); padding: 4px 8px; background: hsl(var(--muted)); border-radius: 4px; margin-top: 6px; }
.al-dlg .al-conn-h:first-child { margin-top: 0; }
.al-dlg .al-conn, .al-dlg .al-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; text-align: left; font-family: inherit; cursor: pointer; min-width: 0; }
.al-dlg .al-conn .mono { overflow-wrap: anywhere; }
.al-dlg .al-conn:hover { background: hsl(var(--muted)); }
.al-dlg .al-conn.on, .al-dlg .al-link.on { background: hsl(var(--primary) / .1); border-color: hsl(var(--primary)); }
.al-dlg .al-dot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; flex: none; }
.al-dlg .al-sq { display: inline-block; width: 16px; height: 16px; border-radius: 4px; flex: none; }
.al-dlg .al-linklist { max-height: 400px; overflow-y: auto; display: grid; gap: 8px; }
.al-dlg .al-link { background: hsl(var(--muted) / .5); }
.al-dlg .al-link:hover { background: hsl(var(--muted)); }
.al-dlg .al-adv { padding: 12px 16px; border: 1px solid hsl(var(--border)); border-radius: 8px; }
.al-dlg .al-adv summary { cursor: pointer; }
.al .al-node > .grow { flex: 1 1 220px; }
.al .al-b-cyan { background: rgb(236 254 255 / .92); color: #0e7490; }
.dark .al .al-b-cyan { background: rgb(8 51 68 / .85); color: #67e8f9; }
.al .al-stack > *, .al .al-row .grow { min-width: 0; }
.al .al-row .al-b, .al .al-friend .al-b { white-space: normal; overflow-wrap: anywhere; }

/* --- knowledge --- */
/* ==================================================================
   Phase 7 — knowledge hub admin screens (prefix ak-)
   /admin/datahub · /admin/gis-dataset · /admin/pulses · /admin/prompts · /admin/geo-sources
   ================================================================== */
.ak { min-width: 0; }
.ak-h1 { display: flex; align-items: center; gap: 8px; }
.ak-h1 .ic { width: 22px; height: 22px; }
.ak-block { display: block; }
.ak-mt1 { margin-top: 4px; }
.ak-jend { justify-content: flex-end; }
.ak-mono { font-family: var(--font-mono); }
.ak-center { text-align: center; padding: 12px 0; margin: 0; }
.ak-span2 { grid-column: 1 / -1; }
.ak-w32 { width: 130px; flex: none; }
.ak-wfull { width: 100%; }
.ak-pointer { cursor: pointer; }
.ak-break { overflow-wrap: anywhere; word-break: break-all; }
.ak-none { text-align: center; padding: 32px 0; margin: 0; }
.ak-g { gap: 12px; }
.ak-g .field { margin-bottom: 0; }
.ak-lbl { display: inline-flex; align-items: center; gap: 6px; }
.ak-lbl .ic { width: 16px; height: 16px; color: hsl(var(--primary)); }
.ak-danger-t { color: hsl(var(--destructive)); }
.ak-danger-t:hover { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.ak-noscroll { overflow: hidden; }
.ak-spin { display: inline-flex; animation: spin 1s linear infinite; }
.ak-spin .ic { width: 24px; height: 24px; }

/* tabs & counters */
.ak-tabs .tab { display: inline-flex; align-items: center; gap: 6px; }
.ak-tabs .tab .ic { width: 16px; height: 16px; }
.ak-count { font-size: 11px; font-weight: 600; padding: 0 6px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.ak-dot-n { --c: hsl(var(--destructive)); display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; }

/* pills / badges */
.ak-pill { --c: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; line-height: 1.45; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); white-space: nowrap; }
.ak-pill .ic { width: 11px; height: 11px; }
.ak-pill-o { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.ak-pill-s { background: var(--c); border-color: var(--c); color: #fff; }

/* card grid */
.ak-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .ak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ak-grid { grid-template-columns: 1fr; } }
.ak-card { overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, opacity .2s, transform .2s; }
.ak-card:hover { box-shadow: 0 14px 30px -18px rgb(0 0 0 / .35); }
.ak-off { opacity: .55; }
.ak-thumb { position: relative; aspect-ratio: 16 / 9; background: hsl(var(--muted)); overflow: hidden; }
.ak-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ak-thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--primary) / .2), hsl(var(--accent) / .2)); color: hsl(var(--muted-foreground)); }
.ak-thumb-ph .ic { width: 40px; height: 40px; }
.ak-b { --c: hsl(var(--secondary, var(--muted))); position: absolute; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; background: var(--c); color: #fff; }
.ak-b .ic { width: 12px; height: 12px; }
.ak-b-tl { top: 8px; left: 8px; background: hsl(var(--card) / .92); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.ak-b-tr { top: 8px; right: 8px; }
.ak-b-bl { bottom: 8px; left: 8px; background: rgb(0 0 0 / .7); }
.ak-b-br { bottom: 8px; right: 8px; }
.ak-pvrow { display: flex; gap: 4px; padding: 8px; background: hsl(var(--muted) / .5); border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; }
.ak-pvrow img, .ak-pvrow span { width: 48px; height: 36px; flex: none; object-fit: cover; border: 1px solid hsl(var(--border)); background: #fff; }
.ak-pvrow span { display: grid; place-items: center; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
.ak-card-b { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ak-card-b h4 { margin: 0; font-size: 14px; font-weight: 700; }
.ak-card-b > .flex:last-child { margin-top: auto; }
.ak-desc { margin: 0; min-height: 2.6em; }
.ak-promptpv { margin: 0; font-family: var(--font-mono); background: hsl(var(--muted) / .45); padding: 8px; }
.ak-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.ak-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ak-meta .ic { width: 12px; height: 12px; }
.ak-meta-l { justify-content: flex-start; gap: 12px; font-size: 11px; }
.ak-on-star { color: #f59e0b; }
.ak-grip { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; width: 34px; height: 22px; display: grid; place-items: center; border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / .92); color: hsl(var(--muted-foreground)); cursor: grab; touch-action: none; }
.ak-grip .ic { width: 14px; height: 14px; }
.ak-grip:active { cursor: grabbing; }
.ak-card:not(:has(.ak-thumb)) .ak-card-b { padding-top: 38px; }
.ak-dragging { opacity: .6; outline: 2px dashed hsl(var(--primary)); transform: scale(.98); }

/* empty states */
.ak-emptycard { padding: 48px 16px; text-align: center; color: hsl(var(--muted-foreground)); }
.ak-emptycard .ic { width: 48px; height: 48px; opacity: .5; margin: 0 auto 12px; display: block; }
.ak-emptycard p { margin: 0; }
.ak-emptybox { text-align: center; padding: 56px 16px; border: 1px dashed hsl(var(--border)); }
.ak-emptybox .ic { width: 40px; height: 40px; color: hsl(var(--muted-foreground)); margin: 0 auto 8px; display: block; }
.ak-emptybox-sm { padding: 24px 16px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.ak-emptybox[hidden] { display: none; }

/* datahub editor */
.ak-editor { border-color: hsl(var(--primary) / .25); }
.ak-editor-h { display: flex; align-items: center; gap: 8px; padding: 16px 20px; font: 700 18px var(--font-head); background: linear-gradient(90deg, hsl(var(--primary) / .06), hsl(var(--accent) / .06)); border-bottom: 1px solid hsl(var(--border)); }
.ak-editor-h .ic { width: 20px; height: 20px; color: hsl(var(--primary)); }
.ak-editor-b { padding: 20px; display: grid; gap: 20px; }
.ak-editor-b > .field { margin-bottom: 0; }
.ak-dh-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; }
.ak-dh-main { display: grid; gap: 12px; align-content: start; }
.ak-dh-main .field { margin-bottom: 0; }
@media (max-width: 800px) { .ak-dh-top { grid-template-columns: 1fr; } }
.ak-access { padding: 16px; border: 2px dashed hsl(var(--primary) / .3); background: linear-gradient(90deg, hsl(var(--primary) / .05), hsl(var(--accent) / .05)); display: grid; gap: 12px; }
.ak-access-h { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ak-access-h .ic { width: 18px; height: 18px; color: hsl(var(--primary)); }
.ak-access .select, .ak-access .input { background: hsl(var(--background)); }
.ak-access-info { --c: #10b981; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: color-mix(in srgb, var(--c) 75%, hsl(var(--foreground)));
  background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.ak-access-info .ic { width: 16px; height: 16px; flex: none; }
.ak-access-info[data-a="public"] { --c: #3b82f6; }
.ak-access-info[data-a="premium"] { --c: #f59e0b; }
.ak-money { position: relative; display: block; }
.ak-money > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }
.ak-money .input { padding-left: 30px; }
.ak-money .input:disabled { opacity: .55; }

/* image field */
.ak-img { display: grid; gap: 8px; }
.ak-img-box { position: relative; aspect-ratio: 16 / 9; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); overflow: hidden; }
.ak-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-img-box.empty { border-style: dashed; display: grid; place-items: center; }
.ak-img-box.empty span { display: grid; justify-items: center; gap: 4px; color: hsl(var(--muted-foreground)); font-size: 12px; }
.ak-img-box.empty .ic { width: 28px; height: 28px; opacity: .6; }
.ak-img-x, .ak-file-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 999px; background: hsl(var(--destructive)); color: #fff; cursor: pointer; z-index: 2; }
.ak-img-x .ic, .ak-file-x .ic { width: 12px; height: 12px; }
.ak-img-row { display: flex; gap: 6px; align-items: center; }
.ak-img-row .btn { flex: none; cursor: pointer; }
.ak-img-url { height: 26px; font-size: 12px; min-width: 0; }
.ak-img p { margin: 0; }
.ak-img-wide { max-width: 420px; }

/* preview images */
.ak-prev-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 800px) { .ak-prev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ak-prev { position: relative; aspect-ratio: 16 / 9; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); overflow: hidden; }
.ak-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-prev .ak-file-x { opacity: 0; transition: opacity .15s; }
.ak-prev:hover .ak-file-x, .ak-prev:focus-within .ak-file-x { opacity: 1; }
@media (hover: none) { .ak-prev .ak-file-x, .ak-file .ak-file-x { opacity: 1; } }
.ak-prev-n { position: absolute; left: 4px; bottom: 4px; padding: 0 6px; background: rgb(0 0 0 / .7); color: #fff; font-size: 11px; font-weight: 600; }
.ak-prev-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed hsl(var(--muted-foreground) / .3); background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; transition: .15s; }
.ak-prev-add:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
.ak-prev-add b { font-size: 11px; } .ak-prev-add small { font-size: 11px; } .ak-prev-add .ic { width: 18px; height: 18px; }

/* chips (tags, tools) */
.ak-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: 600 12px var(--font-body); border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground)); cursor: pointer; }
.ak-chip .ic { width: 12px; height: 12px; }
.ak-chip:hover { border-color: hsl(var(--destructive) / .4); background: hsl(var(--destructive) / .1); }
.ak-dlg [data-tools] .ak-chip { background: transparent; }
.ak-dlg [data-tools] .ak-chip:hover { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .06); }
.ak-dlg [data-tools] .ak-chip.on { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* code files / snippets / charts */
.ak-codebox { padding: 16px; border: 2px dashed hsl(var(--muted-foreground) / .2); background: hsl(var(--muted) / .3); display: grid; gap: 12px; }
.ak-codebox .ak-lbl .ic { width: 18px; height: 18px; }
.ak-cf, .ak-sn, .ak-ch { display: grid; gap: 8px; padding: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); margin-bottom: 12px; }
.ak-ch { background: hsl(var(--muted) / .2); }
.ak-cf-h, .ak-sn-h { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ak-cf-ic { color: hsl(var(--primary)); display: inline-flex; } .ak-cf-ic .ic { width: 16px; height: 16px; }
.ak-cf-n { font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); width: 24px; flex: none; }
.ak-cf-lang { width: 140px; flex: none; }
.ak-sm { height: 32px; font-size: 13px; }
.ak-sm-ta { font-size: 12px; min-height: 60px; }
.ak-code { font-size: 12px; min-height: 120px; background: hsl(var(--muted) / .45); }
.ak-cf label span { display: block; margin-bottom: 4px; }
.ak-sn-t { flex: 5; min-width: 0; } .ak-sn-l { flex: 3; min-width: 0; } .ak-sn-f { flex: 3; min-width: 0; }
.ak-sn-f2 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: hsl(var(--muted-foreground)); }
@media (max-width: 640px) {
  .ak-cf-h, .ak-sn-h { flex-wrap: wrap; }
  .ak-cf-h .input.grow { flex: 1 1 calc(100% - 60px); }
  .ak-cf-lang { flex: 1; width: auto; }
  .ak-sn-t { flex: 1 1 100%; } .ak-sn-l, .ak-sn-f { flex: 1 1 40%; }
}
.ak-bad { border-color: hsl(var(--destructive)) !important; box-shadow: 0 0 0 3px hsl(var(--destructive) / .15); }

/* uploaded files grid */
.ak-files { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .ak-files { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ak-files:empty { display: none; }
.ak-file { position: relative; aspect-ratio: 1; border: 1px solid hsl(var(--border)); overflow: hidden; background: hsl(var(--muted)); }
.ak-file img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-file .ak-file-x { opacity: 0; transition: opacity .15s; }
.ak-file:hover .ak-file-x, .ak-file:focus-within .ak-file-x { opacity: 1; }
.ak-file-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; font-size: 12px; text-align: center; min-width: 0; }
.ak-file-ph .ic { width: 32px; height: 32px; }
.ak-file-ph span { max-width: 100%; }

/* switch rows */
.ak-switchrow { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: hsl(var(--muted) / .5); font-size: 14px; font-weight: 500; cursor: pointer; margin: 0 0 12px; }
.ak-plain { padding: 0; background: none; margin: 0; }

/* stats / notes / request rows */
.ak-stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 640px) { .ak-stats3 { grid-template-columns: 1fr; gap: 8px; } }
.ak-stat { display: flex; align-items: center; gap: 12px; padding: 16px; border-color: color-mix(in srgb, var(--c) 30%, transparent); background: color-mix(in srgb, var(--c) 5%, hsl(var(--card))); }
.ak-stat-ic { width: 44px; height: 44px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); flex: none; }
.ak-stat-ic .ic { width: 20px; height: 20px; }
.ak-stat-v { font-size: 24px; font-weight: 800; line-height: 1.15; }
.ak-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 12px; margin-bottom: 16px; font-size: 13px; background: hsl(var(--primary) / .06); border: 1px solid hsl(var(--primary) / .2); }
.ak-note > .ic { width: 18px; height: 18px; color: hsl(var(--primary)); flex: none; }
.ak-note > span { flex: 1; min-width: 200px; }
.ak-req { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 10px; border-left: 4px solid var(--c); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.ak-req:hover { color: inherit; border-color: hsl(var(--primary) / .5); border-left-color: var(--c); box-shadow: 0 10px 24px -18px rgb(0 0 0 / .4); }
.ak-req-av { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); flex: none; }
.ak-req-av .ic { width: 22px; height: 22px; }
.ak-st { font-size: 11px; font-weight: 600; padding: 0 8px; color: var(--c); border: 1px solid var(--c); text-transform: lowercase; }
.ak-item { color: hsl(var(--primary)); font-weight: 600; }
.ak-date { text-align: right; flex: none; display: grid; gap: 2px; justify-items: end; }
.ak-date .ic { width: 13px; height: 13px; vertical-align: -2px; }
@media (max-width: 560px) { .ak-req { flex-wrap: wrap; } .ak-req-av { display: none; } .ak-date { text-align: left; justify-items: start; flex-basis: 100%; } }

/* dialogs */
.ak-dlg { padding: 24px; }
.ak-dlg-xl { width: min(896px, 100%); max-height: 92vh; }
.ak-dlg-lg { width: min(768px, 100%); max-height: 90vh; }
.ak-dlg-md { width: min(672px, 100%); max-height: 90vh; }
.ak-dlg-t { margin: 0 40px 16px 0; font: 700 18px var(--font-head); }
.ak-dlg-f { position: sticky; bottom: -24px; margin: 16px -24px -24px; padding: 12px 24px; display: flex; justify-content: flex-end; gap: 8px; background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); z-index: 3; }
.ak-mtabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 2px; background: hsl(var(--muted)); margin-bottom: 16px; }
.ak-mtab { border: 0; background: none; padding: 6px 4px; font: 500 12.5px var(--font-body); color: hsl(var(--muted-foreground)); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-mtab:hover { color: hsl(var(--foreground)); }
.ak-mtab.active { background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
@media (max-width: 760px) { .ak-mtabs { display: flex; overflow-x: auto; } .ak-mtab { flex: none; padding: 6px 8px; } }
.ak-dlg [data-mpanel][hidden] { display: none; }
.ak-caps { display: grid; gap: 12px; }
.ak-cap { padding: 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .3); display: grid; gap: 6px; }
.ak-cap-k { text-transform: capitalize; }
.ak-hash { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.ak-err { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08); border: 1px solid hsl(var(--destructive) / .25); padding: 8px 8px; }
.ak-err[hidden] { display: none; }
.ak-w-dt { max-width: 280px; }

/* geo sources */
.ak-btn-em { background: #059669; color: #fff; }
.ak-btn-em:hover { background: #047857; color: #fff; }
.ak-kpi { padding: 16px; text-align: center; display: grid; gap: 2px; }
.ak-kpi b { font-size: 24px; font-weight: 800; }
.ak-kpi span { font-size: 12px; color: hsl(var(--muted-foreground)); }
.ak-rows { display: grid; gap: 8px; }
.ak-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--card) / .5); min-width: 0; }
.ak-row:hover { background: hsl(var(--card)); }
.ak-row[hidden] { display: none; }
.ak-row p { margin: 0; }
.ak-row-t { color: hsl(var(--foreground)); max-width: 100%; }
.ak-row-t:hover { color: hsl(var(--primary)); }
.ak-row-a { display: flex; align-items: center; gap: 2px; flex: none; }
.ak-row-a .ic { width: 14px; height: 14px; }
.ak-row .ak-pill .ic { width: 11px; }
.ak-row > .grow > .flex > span[title] .ic { width: 13px; height: 13px; }
@media (max-width: 640px) { .ak-row { flex-wrap: wrap; } .ak-row-a { width: 100%; justify-content: flex-end; } }
.ak-geo-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .ak-geo-g { grid-template-columns: 1fr; } }

/* GIS & RS dataset browser */
.ak-gis { display: grid; gap: 16px; }
.ak-hubnav { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ak-hub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ak-hub > .ic { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
.ak-hub-a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--c); text-decoration: none; }
.ak-hub-a .ic { width: 12px; height: 12px; }
.ak-hub-a:hover { background: hsl(var(--muted) / .6); color: var(--c); }
.ak-hub-a.on, .ak-hub-a.on:hover { background: var(--c); color: #fff; }
.ak-crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; overflow-x: auto; padding-bottom: 2px; }
.ak-crumbs .ic { width: 12px; height: 12px; color: hsl(var(--muted-foreground)); flex: none; }
.ak-crumb, .ak-crumb-home { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.ak-crumb button { border: 0; background: none; padding: 2px 4px; font: 500 12px var(--font-body); color: var(--gc); cursor: pointer; }
.ak-crumb button:hover { text-decoration: underline; }
.ak-crumb b { padding: 2px 4px; }
.ak-gis-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ak-gis-head h2 { margin: 0; font-size: 20px; }
.ak-gis-head p { margin: 2px 0 0; }
.ak-gis-logo { width: 44px; height: 44px; display: grid; place-items: center; flex: none; color: var(--gc); background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 19%, transparent), color-mix(in srgb, #16A085 19%, transparent)); }
.ak-gis-logo .ic { width: 20px; height: 20px; }
.ak-gis-btn { border: 2px solid var(--gc); color: var(--gc); }
.ak-gis-btn:hover { color: var(--gc); background: color-mix(in srgb, var(--gc) 8%, transparent); border-color: var(--gc); }
.ak-gis-hint { margin: 0; display: flex; gap: 6px; align-items: center; }
.ak-gis-hint .ic { width: 14px; height: 14px; flex: none; }
.ak-gis-link { padding: 12px; border-left: 4px solid var(--gc); }
.ak-gis-main { display: flex; gap: 16px; min-height: 75vh; min-width: 0; }
.ak-gis-side { width: 320px; flex: none; display: flex; flex-direction: column; overflow: hidden; max-height: 80vh; }
.ak-gis-side[hidden] { display: none; }
.ak-gis-sh { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .5); }
.ak-gis-sh [data-gis-back][hidden] { display: none; }
.ak-gis-q .input { height: 32px; font-size: 12px; }
.ak-gis-list { flex: 1; overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 2px; }
.ak-gis-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: transparent; color: hsl(var(--foreground)); text-align: left; cursor: pointer; font-family: inherit; min-width: 0; }
.ak-gis-it:hover { background: hsl(var(--muted) / .5); }
.ak-gis-it.on { background: hsl(var(--muted)); }
.ak-fic { display: inline-flex; flex: none; } .ak-fic .ic { width: 16px; height: 16px; }
.ak-ext { font: 10px var(--font-mono); color: hsl(var(--muted-foreground)); flex: none; }
.ak-gis-load { padding: 48px 0; text-align: center; }
.ak-gis-load p { margin: 6px 0 0; }
.ak-gis-none { text-align: center; padding: 32px 8px; margin: 0; overflow-wrap: anywhere; }
.ak-gis-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 60vh; }
.ak-gis-view.ak-full { position: fixed; inset: 0; z-index: 1250; min-height: 0; border: 0; }
.ak-gis-pick { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; padding: 32px; }
.ak-gis-pick > span { opacity: .25; } .ak-gis-pick > span .ic { width: 64px; height: 64px; }
.ak-gis-pick h3 { margin: 12px 0 4px; font-size: 18px; } .ak-gis-pick p { margin: 0; }
.ak-doc-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); min-width: 0; flex-wrap: wrap; }
.ak-doc-h > .grow { min-width: 120px; }
.ak-doc-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.ak-doc-acts .ic { width: 12px; height: 12px; }
.ak-flipbtn { border-color: #1ABC9C; color: #1ABC9C; }
.ak-dlbtn { border-color: #6ee7b7; color: #059669; }
.ak-doc-frame { flex: 1; width: 100%; min-height: 550px; border: 0; background: hsl(var(--muted) / .3); }
.ak-full .ak-doc-frame { min-height: 0; }
@media (max-width: 1023px) {
  .ak-gis-main { flex-direction: column; min-height: 0; }
  .ak-gis-side { width: 100%; max-height: 50vh; }
  .ak-doc-frame { min-height: 70vh; }
}

/* flipbook overlay */
.ak-fb { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; background: hsl(var(--background) / .96); backdrop-filter: blur(4px); }
.ak-fb[hidden] { display: none; }
.ak-fb-top { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); min-width: 0; }
@media (max-width: 480px) { .ak-fb-badge { display: none; } }
.ak-fb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.ak-fb-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #1ABC9C; text-align: center; padding: 16px; }
.ak-fb-load[hidden] { display: none; }
.ak-fb-load .ic { width: 32px; height: 32px; }
.ak-fb-book { position: relative; display: flex; perspective: 2000px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .45); }
.ak-fb-book[hidden] { display: none; }
.ak-fb-pg { width: var(--pw); height: var(--ph); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.ak-fb-pg[hidden] { display: none; }
.ak-fb-pg canvas { display: block; max-width: 100%; max-height: 100%; }
.ak-fb-pg.blank { background: transparent; cursor: default; }
.ak-fb-l { box-shadow: inset -18px 0 24px -18px rgb(0 0 0 / .35); transform-origin: right center; }
.ak-fb-r { box-shadow: inset 18px 0 24px -18px rgb(0 0 0 / .35); transform-origin: left center; }
.ak-turn-f .ak-fb-r { animation: ak-flip-f .5s ease-out; }
.ak-turn-b .ak-fb-l, .ak-turn-b .ak-fb-r:only-child, .ak-turn-b .ak-fb-l[hidden] + .ak-fb-r { animation: ak-flip-b .5s ease-out; }
@keyframes ak-flip-f { from { transform: rotateY(-70deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes ak-flip-b { from { transform: rotateY(70deg); opacity: .4; } to { transform: none; opacity: 1; } }
.ak-fb-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; border-top: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); }
.ak-fb-foot[hidden] { display: none; }
.ak-dlg-xl { min-height: min(680px, 92vh); display: flex; flex-direction: column; }
.ak-dlg-xl > [data-mpanel]:not([hidden]) { flex: 1 0 auto; }

/* --- polish --- */
/* ===== Phase 7 polish — Bulk Media Import (/admin/bulk-media), prefix ap- ===== */
.ap-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .ap-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ap-stat { display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; font: inherit; color: inherit; min-width: 0; }
.ap-stat-btn { cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.ap-stat-btn:hover { box-shadow: 0 6px 18px -8px rgb(0 0 0 / .25); }
.ap-stat-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; color: #fff; border-radius: 8px; }
.ap-stat-ic .ic { width: 20px; height: 20px; }
.ap-stat-btn.active .ap-stat-ic { box-shadow: 0 0 0 2px hsl(var(--card)), 0 0 0 4px hsl(var(--primary)); }
.ap-stat-n { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; }
.ap-stat-l { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); }
.ap-g-amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.ap-g-blue { background: linear-gradient(135deg, #3b82f6, #4f46e5); }
.ap-g-emerald { background: linear-gradient(135deg, #10b981, #0d9488); }
.ap-g-red { background: linear-gradient(135deg, #ef4444, #db2777); }
.ap-g-green { background: linear-gradient(135deg, #22c55e, #059669); }

.ap-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: hsl(var(--muted)); }
.ap-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 0; background: transparent; font: 500 14px var(--font-body, inherit);
  color: hsl(var(--muted-foreground)); cursor: pointer; transition: background .15s, color .15s; }
.ap-tab .ic { width: 16px; height: 16px; flex: none; }
.ap-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tab.active { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
@media (max-width: 640px) { .ap-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-tab { font-size: 13px; } }

.ap-card { min-width: 0; }
.ap-card-h { padding: 20px 20px 8px; }
.ap-card-h > p { margin: 4px 0 0; }
.ap-card-t { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; margin: 0; }
.ap-card-t .ic { width: 20px; height: 20px; }
.ap-card-b { padding: 12px 20px 20px; }
.ap-prim { color: hsl(var(--primary)); display: inline-flex; }
.ap-dup-head { justify-content: space-between; flex-wrap: wrap; }
.ap-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-stack { display: flex; flex-direction: column; gap: 16px; }
.ap-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.ap-stack-xs { display: flex; flex-direction: column; gap: 4px; }
.ap-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-modes .btn { min-width: 0; padding-left: 6px; padding-right: 6px; }
.ap-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-actions .btn { min-width: 0; }
.ap-w100 { width: 100%; }
.ap-mt1 { margin-top: 4px; }
.ap-block { display: block; }
.ap-py { padding: 24px 0; }
.ap-grow { flex: 1; min-width: 0; }
.ap-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.ap-row p, .ap-drow p { margin: 0; }
.ap-bulk-ta { height: auto; min-height: 220px; padding: 8px 12px; font-size: 13px; line-height: 1.45; resize: vertical; }
.ap-alert { display: flex; gap: 8px; align-items: flex-start; padding: 12px 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.ap-alert .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ap-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; text-align: center; border: 2px dashed hsl(var(--border)); cursor: pointer; transition: border-color .2s, background .2s; }
.ap-drop .ic { width: 28px; height: 28px; color: hsl(var(--muted-foreground)); }
.ap-drop:hover, .ap-drop.ap-drag { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); }

.ap-bar { height: 16px; background: hsl(var(--secondary, var(--muted))); overflow: hidden; border-radius: 999px; }
.ap-bar span { display: block; height: 100%; width: 0; background: hsl(var(--primary)); transition: width .3s; }
.ap-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }

.ap-scroll { overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.ap-h-500 { max-height: 500px; } .ap-h-450 { height: 450px; } .ap-h-300 { max-height: 300px; }
@media (max-width: 767px) { .ap-h-450 { height: auto; max-height: 450px; min-height: 160px; } }
.ap-empty { text-align: center; color: hsl(var(--muted-foreground)); padding: 32px 0; }
.ap-empty .ic { width: 32px; height: 32px; opacity: .5; margin: 0 auto 8px; display: block; }
.ap-empty p { margin: 0; }

.ap-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid hsl(var(--border)); }
.ap-row-update, .ap-res-success { background: #f0fdf4; border-color: #bbf7d0; }
.ap-row-create, .ap-res-created { background: #eff6ff; border-color: #bfdbfe; }
.ap-row-skip { background: hsl(var(--muted) / .5); border-color: hsl(var(--muted)); opacity: .6; }
.ap-res-error { background: hsl(var(--destructive) / .1); border-color: hsl(var(--destructive) / .3); }
.ap-res-skipped { background: #fefce8; border-color: #fef08a; }
.dark .ap-row-update, .dark .ap-res-success { background: rgb(5 46 22 / .2); border-color: #166534; }
.dark .ap-row-create, .dark .ap-res-created { background: rgb(23 37 84 / .2); border-color: #1e40af; }
.dark .ap-res-skipped { background: rgb(66 32 6 / .2); border-color: #854d0e; }
.ap-res-ic { flex: none; display: inline-flex; }
.ap-res-ic .ic { width: 20px; height: 20px; }
.ap-res-success .ap-res-ic { color: #16a34a; } .ap-res-created .ap-res-ic { color: #2563eb; }
.ap-res-error .ap-res-ic { color: hsl(var(--destructive)); } .ap-res-skipped .ap-res-ic { color: #ca8a04; }
.ap-cb { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: hsl(var(--primary)); cursor: pointer; }
.ap-thumb { width: 48px; height: 48px; flex: none; padding: 0; border: 1px solid hsl(var(--border)); overflow: hidden; cursor: pointer; background: hsl(var(--muted)); }
.ap-thumb:hover { box-shadow: 0 0 0 2px hsl(var(--primary)); }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.ap-row-r .btn .ic { width: 12px; height: 12px; }
.ap-cycle { cursor: pointer; font: 600 11px var(--font-body, inherit); }
.ap-in-sm { height: 28px; font-size: 12px; padding: 0 8px; }
.ap-t-green { color: #16a34a; margin: 2px 0 0; } .dark .ap-t-green { color: #4ade80; }
.ap-t-blue { color: #2563eb; } .dark .ap-t-blue { color: #60a5fa; }
.ap-t-blue .ic { width: 12px; height: 12px; }
.ap-b-prim { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.ap-b-sec { background: hsl(var(--secondary, var(--muted))); color: hsl(var(--secondary-foreground, var(--foreground))); }
.ap-b-out { background: transparent; color: hsl(var(--foreground)); }
.ap-b-keep { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.ap-b-dup { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: #fff; }
.ap-btn-danger { background: hsl(var(--destructive)); color: #fff; }
.ap-btn-danger:hover:not(:disabled) { background: hsl(var(--destructive) / .9); color: #fff; }

.ap-dgroup { border: 1px solid hsl(var(--destructive) / .3); padding: 12px 12px; }
.ap-dgroup-h { margin-bottom: 8px; }
.ap-drow { display: flex; align-items: center; gap: 12px; padding: 8px; cursor: pointer; }
.ap-keep { background: #f0fdf4; } .dark .ap-keep { background: rgb(5 46 22 / .2); }
.ap-extra { background: hsl(var(--destructive) / .05); }

.ap-mgroup { font-size: 14px; font-weight: 600; color: hsl(var(--primary)); text-transform: capitalize; margin: 0 0 8px; }
.ap-mlist { display: grid; gap: 4px; padding-left: 16px; }
.ap-mitem { display: flex; align-items: center; gap: 8px; font-size: 14px; color: hsl(var(--muted-foreground)); min-width: 0; overflow-wrap: anywhere; }
.ap-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #f59e0b; }

.ap-modal { max-width: 672px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ap-modal > p { margin: 0; }
.ap-pv-img { display: flex; justify-content: center; }
.ap-pv-img img { max-height: 500px; max-width: 100%; border: 1px solid hsl(var(--border)); object-fit: contain; }
.ap-modal .ap-stack p { margin: 0; }
.ap-t-block { display: block; }
@media (max-width: 480px) { .ap-modes { gap: 6px; } .ap-modes .btn { font-size: 12px; gap: 4px; padding-left: 4px; padding-right: 4px; } .ap-modes .btn .ic { display: none; } }
.cw-main .alert { overflow-wrap: anywhere; word-break: break-word; } .cw-main .alert code { white-space: normal; word-break: break-all; }

/* ===================== Phase 8 — polish ===================== */
/* =====================================================================
   Phase 8 — polish8: footprint pagination, touch drag-sort, bulk AI captions
   ===================================================================== */
/* touch drag-sort handles: touch-action:none must be present before the finger lands */
.ac-grip, .al .al-grip, .ak-grip, [data-grip] { touch-action: none; }
.p8-fp-filters .p8-fp-count { margin-left: auto; white-space: nowrap; }
@media (max-width: 639px) { .p8-fp-filters .p8-fp-count { margin-left: 0; } }
.p8-fp-map { border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.p8-fp-map > summary { cursor: pointer; list-style: none; user-select: none; }
.p8-fp-map > summary::-webkit-details-marker { display: none; }
.p8-fp-map > summary::after { content: '▾'; margin-left: auto; color: hsl(var(--muted-foreground)); transition: transform .2s; }
.p8-fp-map[open] > summary::after { transform: rotate(180deg); }
.p8-fp-map > summary:hover { background: hsl(var(--muted) / .5); }
.p8-fp-mapbox { height: 360px; background: hsl(var(--muted)); border-top: 1px solid hsl(var(--border)); }
.p8-fp-mapbox.is-loading { background: hsl(var(--muted)) repeating-linear-gradient(90deg, transparent 0 40px, hsl(var(--border)) 40px 80px); opacity: .7; }
.p8-fp-mapbox .leaflet-popup-content { margin: 8px 12px; font-size: 13px; line-height: 1.45; }
@media (max-width: 639px) { .p8-fp-mapbox { height: 260px; } }
.p8-pager { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 16px; }
.p8-pager .pager a:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.p8-pager .pager span.muted { opacity: .5; }

/* ---------- bulk upload: per-photo cards + AI captions step ---------- */
.p8-bulk .p8-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; padding: 8px 12px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .4); border-radius: 8px; }
.p8-bulk .p8-bulk-bar .full { flex: 1 1 100%; }
.p8-bulk .p8-bulk-progbar { height: 6px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; }
.p8-bulk .p8-bulk-progbar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, hsl(var(--primary)), #a855f7); transition: width .3s; }
.p8-bulk .p8-bulk-off { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 8px; border-radius: 8px; color: #b45309; background: rgb(245 158 11 / .12); border: 1px solid rgb(245 158 11 / .35); }
.dark .p8-bulk .p8-bulk-off { color: #fbbf24; }
.p8-bulk .p8-bulk-off .ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.p8-badge-ok { color: #059669; border-color: rgb(16 185 129 / .4); background: rgb(16 185 129 / .12); }
.dark .p8-badge-ok { color: #34d399; }
.p8-bulk .p8-bulk-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.p8-bulk .p8-bp { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: hsl(var(--card)); transition: border-color .2s; }
.p8-bulk .p8-bp[data-st="done"] { border-color: #10b981; }
.p8-bulk .p8-bp[data-st="error"] { border-color: hsl(var(--destructive)); }
.p8-bulk .p8-bp-img { position: relative; background: hsl(var(--muted)); }
.p8-bulk .p8-bp-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.p8-bulk .p8-bp-st { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .6); background: rgb(15 23 42 / .35); pointer-events: none; }
.p8-bulk .p8-bp-st[hidden] { display: none; }
.p8-bulk .p8-bp[data-st="analyzing"] .p8-bp-st { background: rgb(168 85 247 / .35); animation: p8pulse 1.2s ease-in-out infinite; }
.p8-bulk .p8-bp[data-st="uploading"] .p8-bp-st { background: hsl(var(--primary) / .35); }
.p8-bulk .p8-bp[data-st="done"] .p8-bp-st { background: rgb(16 185 129 / .25); font-size: 24px; opacity: 0; transition: opacity .2s; }
.p8-bulk .p8-bp[data-st="done"]:hover .p8-bp-st { opacity: 1; }
.p8-bulk .p8-bp[data-st="error"] .p8-bp-st { background: rgb(239 68 68 / .35); padding: 8px; text-align: center; }
@keyframes p8pulse { 50% { opacity: .55; } }
.p8-bulk .p8-bp-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 999px; border: 0; background: hsl(var(--background) / .85); color: hsl(var(--foreground)); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.p8-bulk .p8-bp-x:hover { background: hsl(var(--destructive)); color: #fff; }
.p8-bulk.is-ai .p8-bp-x { display: none; }
.p8-bulk .p8-bp-name { display: block; padding: 4px 8px 0; font-size: 11px; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p8-bulk .p8-bp-fields { display: grid; gap: 6px; padding: 6px 8px 8px; }
.p8-bulk .p8-bp-fields .input, .p8-bulk .p8-bp-fields .select, .p8-bulk .p8-bp-fields .textarea { font-size: 12px; padding: 6px 8px; min-height: 0; height: auto; }
.p8-bulk .p8-bp-fields .textarea { resize: vertical; min-height: 40px; }
.p8-bulk .p8-bp.over { opacity: .45; }
@media (max-width: 639px) { .p8-bulk .p8-bulk-list { grid-template-columns: 1fr; } .p8-bulk .p8-bp-img img { aspect-ratio: 16 / 9; } }


/* =====================================================================
   v3.8.4 — design system corrections (appended last so it wins)
   Found by the rendered audit of 72 page views at 1366px and 390px.
   ===================================================================== */

/* 4 — comfortable hit areas for the small links in nav, header and footer.
       The brand logo is excluded: it is a heading, not a hit target, and forcing
       it to inline-flex made "Al Jubaer" wrap onto two lines. */
nav a:not(.nav-logo), header a.btn, footer a, .btn-row a, .btn-row button,
.nav-link, .dd-item, .pager a, .pager button {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
.nav-logo { white-space: nowrap; }
footer a, .pager a, .pager button { padding-block: var(--sp-2); }

/* 5 — nothing may push the page sideways on a phone */
@media (max-width: 560px) {
  .table-wrap, .tbl-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
  .hero, .hero-wrap, [class*="-hero"] { overflow-x: clip; }
}

/* 6 — cards in one row end level with each other */
.grid > .card, [class*="grid"] > .card, [class*="cards"] > .card,
.grid > .glass-card, [class*="grid"] > .glass-card { height: 100%; }
.grid > a > .card, [class*="grid"] > a > .card { height: 100%; }
.grid, [class*="grid"] { align-items: stretch; }

/* 7 — three chips across is too tight on a narrow phone: "Public Health" and
       "Environmental" were being clipped. Drop to two columns under 430px. */
@media (max-width: 430px) {
  .chip-grid { grid-template-columns: repeat(2, 1fr); }
}
.chip { overflow-wrap: anywhere; }

/* =====================================================================
   v3.8.4 — Life Journey on the home page
   ===================================================================== */
.jr-band-sec { padding-top: 0; }
.jr-band {
  display: grid; grid-template-columns: minmax(300px, 1fr) auto auto;
  align-items: center; gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid hsl(var(--border) / .7); border-radius: var(--r-lg);
  background: linear-gradient(120deg, hsl(var(--primary) / .06), hsl(var(--accent) / .06));
  color: inherit; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.jr-band:hover { border-color: hsl(var(--primary) / .5); box-shadow: 0 10px 30px -18px hsl(var(--primary) / .5); transform: translateY(-2px); }
.jr-band-head { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.jr-band-head strong { font-family: var(--font-head); font-size: var(--fs-2xl); letter-spacing: -.02em; }
.jr-band-head em { font-style: normal; font-size: var(--fs-md); color: hsl(var(--muted-foreground)); }
.jr-band-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-5); }
.jr-stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); text-align: center; min-width: 0; }
.jr-stat svg { width: 16px; height: 16px; color: var(--c); }
.jr-stat b { font-family: var(--font-head); font-size: var(--fs-2xl); line-height: 1.15; }
.jr-stat i { font-style: normal; font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.jr-band-go { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r-pill);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); flex: none; }

.jr-chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.jr-ch { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
  padding: var(--sp-6); border: 1px solid hsl(var(--border) / .7); border-radius: var(--r-md);
  background: hsl(var(--card) / .6); color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.jr-ch:hover { border-color: hsl(var(--primary) / .5); transform: translateY(-3px); box-shadow: 0 12px 28px -20px hsl(var(--primary) / .55); }
.jr-ch-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm);
  background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.jr-ch strong { font-family: var(--font-head); font-size: var(--fs-lg); }
.jr-ch em { font-style: normal; font-size: var(--fs-md); color: hsl(var(--muted-foreground)); }

@media (max-width: 1100px) {
  .jr-band { grid-template-columns: 1fr auto; }
  .jr-band-stats { grid-column: 1 / -1; }
  .jr-chapters { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .jr-band { gap: var(--sp-6); padding: var(--sp-6); }
  .jr-band-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .jr-chapters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 430px) {
  .jr-band-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-band-head strong { font-size: var(--fs-xl); }
}

/* =====================================================================
   v3.8.4 — mega-menu
   Six grouped top-level items instead of eleven loose links.
   ===================================================================== */
.mega-dd { position: static; }
.nav-inner { position: relative; }
/* display:grid is now safe at all times: visibility, not display, is what
   hides a closed panel — which is the whole reason it can animate out. */
.dd-menu.mega {
  display: grid;
  grid-template-columns: minmax(240px, 1fr); gap: var(--sp-6);
  min-width: 300px; padding: var(--sp-5);
  left: 0; right: auto; --dd-x: 0px;
}
/* 23-Sep-2026 — each panel sits under ITS OWN group.
   The groups used to be position:static with the panel centred on the
   whole bar, so "About" opened in the middle, under "Work"; reaching for
   it crossed "Work", which opened instead, and the About links could not
   be clicked. The group is the anchor now; app.js nudges a panel left
   only when it would run off the right edge of the screen.
   প্রতিটি সাব-মেনু এখন নিজের বোতামের ঠিক নিচে। */
.nav-links .mega-dd { position: relative; }
/* the panel must be opaque — page content was showing through it */
.dd-menu.mega { background: hsl(var(--popover)); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .08); }
.dark .dd-menu.mega { background: hsl(var(--popover)); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .7), 0 2px 8px rgb(0 0 0 / .4); }
.dd-menu.mega.mega-wide { grid-template-columns: minmax(230px, 1fr) minmax(260px, 1.1fr); min-width: 560px; }
.mega-col { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.mega-col + .mega-col { padding-left: var(--sp-6); border-left: 1px solid hsl(var(--border) / .7); }
.mega-col .dd-label { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.mega-count { margin-left: auto; font-size: var(--fs-xs); padding: 0 var(--sp-3);
  border-radius: var(--r-pill); background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }

.mega-item {
  display: flex; align-items: flex-start; gap: var(--sp-4); min-width: 0;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  color: inherit; min-height: var(--tap); transition: background .15s, color .15s;
}
.mega-item:hover, .mega-item:focus-visible { background: hsl(var(--primary) / .08); }
.mega-item.active { background: hsl(var(--primary) / .12); }
.mega-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: var(--r-xs); background: hsl(var(--muted) / .7); color: hsl(var(--foreground) / .75); }
.mega-ic.app { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.mega-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mega-txt b { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mega-txt i { font-style: normal; font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); line-height: 1.3;
  overflow-wrap: anywhere; }
.mega-txt b, .mega-txt i { min-width: 0; }
.mega-lock { font-size: var(--fs-xs); font-weight: 500; color: hsl(var(--muted-foreground)); }
.mega-lock svg { vertical-align: -1px; }
.mega-all { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); min-height: var(--tap);
  font-size: var(--fs-md); font-weight: 600; color: hsl(var(--primary));
  background: hsl(var(--primary) / .07); }
.mega-all:hover { background: hsl(var(--primary) / .14); }

@media (max-width: 1180px) {
  .dd-menu.mega.mega-wide { grid-template-columns: 1fr; min-width: 320px; }
  .mega-col + .mega-col { padding-left: 0; border-left: 0; padding-top: var(--sp-5); border-top: 1px solid hsl(var(--border) / .7); }
}

/* mobile drawer: collapsible groups */
.drawer-acc { border-bottom: 1px solid hsl(var(--border) / .6); }
.drawer-acc > summary { display: flex; align-items: center; gap: var(--sp-4); cursor: pointer;
  padding: var(--sp-5) var(--sp-2); font-weight: 600; list-style: none; min-height: var(--tap); }
.drawer-acc > summary::-webkit-details-marker { display: none; }
.drawer-acc > summary > span { flex: 1; }
.drawer-acc > summary svg:last-child { transition: transform .2s; }
.drawer-acc[open] > summary svg:last-child { transform: rotate(180deg); }
.drawer-link.sub { padding-left: var(--sp-9); font-weight: 500; }

/* =====================================================================
   v3.8.4 — /life-journey  (the umbrella view)
   ===================================================================== */
.ljs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); justify-content: center;
  gap: var(--sp-5); margin: var(--sp-9) 0 var(--sp-8); }
.ljs-stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center;
  padding: var(--sp-6) var(--sp-4); border: 1px solid hsl(var(--border) / .7); border-radius: var(--r-md);
  background: hsl(var(--card) / .55); min-width: 0; }
.ljs-stat-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.ljs-stat b { font-family: var(--font-head); font-size: var(--fs-3xl); line-height: 1.15; }
.ljs-stat i { font-style: normal; font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }

.ljs-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-8); }
.ljs-tab { display: flex; align-items: center; gap: var(--sp-4); text-align: left; min-width: 0;
  padding: var(--sp-4) var(--sp-5); border: 1px solid hsl(var(--border) / .7); border-radius: var(--r-md);
  background: hsl(var(--card) / .5); color: inherit; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.ljs-tab:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.ljs-tab.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.ljs-tab-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.ljs-tab-txt { display: flex; flex-direction: column; min-width: 0; }
.ljs-tab-txt b { font-size: var(--fs-base); font-weight: 600; }
.ljs-tab-txt i { font-style: normal; font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.ljs-tab-n { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }

.ljs-panel { display: none; padding: var(--sp-7); border: 1px solid hsl(var(--border) / .7); border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 60%); }
.ljs-panel.on { display: block; animation: pop .18s ease-out; }
.ljs-panel-head { display: flex; align-items: flex-start; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.ljs-panel-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.ljs-panel-head h2 { font-family: var(--font-head); font-size: var(--fs-2xl); margin: 0 0 2px; }
.ljs-panel-head p { font-size: var(--fs-md); color: hsl(var(--muted-foreground)); margin: 0; }

.ljs-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.ljs-item { border: 1px solid hsl(var(--border) / .7); border-radius: var(--r-md);
  background: hsl(var(--card) / .75); overflow: hidden; }
.ljs-item > summary { display: flex; align-items: center; gap: var(--sp-4); cursor: pointer; list-style: none;
  padding: var(--sp-5); min-height: var(--tap); }
.ljs-item > summary::-webkit-details-marker { display: none; }
.ljs-item-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.ljs-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ljs-item-txt b { font-size: var(--fs-base); font-weight: 600; line-height: 1.3; }
.ljs-item-txt i { font-style: normal; font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.ljs-when { font-size: var(--fs-xs); font-weight: 600; padding: 2px var(--sp-4); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); white-space: nowrap; }
.ljs-caret { color: hsl(var(--muted-foreground)); transition: transform .2s; }
.ljs-item[open] .ljs-caret { transform: rotate(180deg); }
.ljs-body { padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + 28px + var(--sp-4)); }
.ljs-body > p { font-size: var(--fs-md); color: hsl(var(--muted-foreground)); margin: 0 0 var(--sp-4); }
.ljs-fact { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.ljs-fact-l { flex: none; width: 68px; font-size: var(--fs-xs); font-weight: 600; color: hsl(var(--muted-foreground));
  text-transform: uppercase; letter-spacing: .04em; padding-top: 3px; }
.ljs-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.ljs-chip { font-size: var(--fs-xs); padding: 2px var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid hsl(var(--border) / .8); background: hsl(var(--background) / .6); overflow-wrap: anywhere; }
.ljs-chip.strong { border-color: var(--c); color: var(--c); font-weight: 600; }
.ljs-next { font-size: var(--fs-md); color: var(--c); margin: var(--sp-4) 0 0; display: flex; align-items: flex-start; gap: var(--sp-3); }

.ljs-lenses { margin-top: var(--sp-9); padding-top: var(--sp-8); border-top: 1px solid hsl(var(--border) / .7); }
.ljs-lenses-head { text-align: center; margin-bottom: var(--sp-6); }
.ljs-lens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.ljs-lens { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5);
  border: 1px solid hsl(var(--border) / .7); border-radius: var(--r-md); background: hsl(var(--card) / .55);
  color: inherit; height: 100%; transition: border-color .18s, transform .18s; }
.ljs-lens:hover { border-color: hsl(var(--primary) / .55); transform: translateY(-2px); }
.ljs-lens-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm);
  background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.ljs-lens b { font-size: var(--fs-base); }
.ljs-lens i { font-style: normal; font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }

@media (max-width: 1100px) {
  .ljs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ljs-tabs  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ljs-lens-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ljs-items { grid-template-columns: 1fr; }
  .ljs-panel { padding: var(--sp-5); }
  .ljs-body { padding-left: var(--sp-5); }
}
@media (max-width: 430px) {
  .ljs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ljs-tabs  { grid-template-columns: 1fr; }
  .ljs-fact { flex-direction: column; gap: var(--sp-2); }
  .ljs-fact-l { width: auto; }
}

/* =====================================================================
   v3.8.5 — marksheet inside an Education entry
   ===================================================================== */
.ljs-ms { margin-top: var(--sp-5); }
.ljs-ms-top { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ljs-ms-sum { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-md); color: hsl(var(--muted-foreground)); }
.ljs-ms-sum b { color: hsl(var(--foreground)); font-weight: 700; }
.ljs-ms-sum span { opacity: .5; }
.ljs-ms-all { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 8px;
  border: 1px solid hsl(var(--border)); border-radius: var(--r-pill); color: hsl(var(--primary));
  font-size: var(--fs-xs); font-weight: 600; text-decoration: none; opacity: 1; white-space: nowrap; }
.ljs-ms-all:hover { background: hsl(var(--primary) / .08); border-color: hsl(var(--primary) / .35); }
.ljs-ms-all .ic { width: 12px; height: 12px; }

.ljs-term + .ljs-term { margin-top: var(--sp-5); }
.ljs-term-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: color-mix(in srgb, var(--c) 12%, transparent); }
.ljs-term-head b { font-size: var(--fs-md); }
.ljs-term-head span { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); white-space: nowrap; }

/* a marksheet is a table — on a phone it scrolls sideways inside its own box,
   it never widens the page */
.ljs-ms-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid hsl(var(--border) / .8); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); }
.ljs-ms-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
.ljs-ms-tbl th, .ljs-ms-tbl td { padding: var(--sp-3) var(--sp-4); text-align: left;
  border-bottom: 1px solid hsl(var(--border) / .5); vertical-align: top; }
.ljs-ms-tbl thead th { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .45); white-space: nowrap; }
.ljs-ms-tbl tbody tr:last-child td { border-bottom: 0; }
.ljs-ms-tbl tbody tr:hover { background: color-mix(in srgb, var(--c) 6%, transparent); }
.ljs-ms-tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ljs-ms-tbl .c { text-align: center; white-space: nowrap; }
.ljs-ms-tbl .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }
.ljs-ms-t { display: block; font-style: normal; font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }

.ljs-kind { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 1px var(--sp-3);
  border-radius: var(--r-pill); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.ljs-kind.k-theory    { border-color: #3b82f6; color: #2563eb; background: #3b82f614; }
.ljs-kind.k-practical,
.ljs-kind.k-lab       { border-color: #10b981; color: #059669; background: #10b98114; }
.ljs-kind.k-field     { border-color: #f59e0b; color: #b45309; background: #f59e0b14; }
.ljs-kind.k-thesis,
.ljs-kind.k-project   { border-color: #8b5cf6; color: #7c3aed; background: #8b5cf614; }
.ljs-kind.k-viva      { border-color: #ec4899; color: #db2777; background: #ec489914; }
.dark .ljs-kind.k-theory { color: #93c5fd; } .dark .ljs-kind.k-practical,
.dark .ljs-kind.k-lab { color: #6ee7b7; } .dark .ljs-kind.k-field { color: #fcd34d; }
.dark .ljs-kind.k-thesis, .dark .ljs-kind.k-project { color: #c4b5fd; } .dark .ljs-kind.k-viva { color: #f9a8d4; }

.ljs-gr { display: inline-block; min-width: 30px; font-weight: 700; font-size: var(--fs-xs);
  padding: 1px var(--sp-3); border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }

/* =====================================================================
   v3.10.0 — the main menu opens on hover
   The 8px gap between a group button and its panel used to break the
   hover: the pointer left the group on the way down. The ::before below
   bridges that gap so the panel stays open while you travel to it, and
   :focus-within keeps the whole thing usable from the keyboard.
   Touch screens are excluded — there is no hover on a phone, and the
   click behaviour there is unchanged.
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  .nav-links .dd > .dd-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -12px; height: 12px;
  }
  /* keyboard users get the panel the same way the pointer does */
  .nav-links .dd.kb > .dd-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(var(--dd-x)) translateY(0) scale(1);
    transition: opacity .26s cubic-bezier(.4, 0, .2, 1),
                transform .32s cubic-bezier(.17, .84, .31, 1),
                visibility 0s; }
  .nav-links .dd > [data-dd] .ic { transition: transform .18s ease; }
  .nav-links .dd.open > [data-dd] .ic { transform: rotate(180deg); }
}

/* =====================================================================
   Menu polish — colour, highlight, and motion that reads as deliberate
   =====================================================================
   Three complaints, one block:

   · it moved too fast — fixed above, by hiding with visibility instead of
     display so the panel fades and lifts on the way out as well as in;
   · it was not colourful — every menu group already carries an accent
     gradient in --g, and nothing but the little underline used it. The
     open trigger, the panel's top edge and the hovered row now all do;
   · nothing looked highlighted — the group whose panel is open had no
     stronger state than the one next to it, so the pointer's position and
     the panel's owner were unrelated facts on the same bar.

   --g is set on the .dd wrapper (see navbar.php) so the panel inherits it;
   it used to sit on the button alone, where the panel could not see it.
   ===================================================================== */

/* the group that owns the open panel, clearly marked */
.nav-links .dd.open > [data-dd],
.nav-links .dd.kb > [data-dd] {
  color: hsl(var(--foreground));
  background: hsl(var(--primary) / .07);
}
.nav-links .dd > [data-dd]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--g, currentColor);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s cubic-bezier(.17, .84, .31, 1);
}
.nav-links .dd.open > [data-dd]::after,
.nav-links .dd.kb > [data-dd]::after { transform: scaleX(1); }

/* the panel wears the same colour along its top edge, so it reads as
   belonging to the group above it rather than floating free */
.dd-menu.mega { position: absolute; overflow: hidden; }
.dd-menu.mega::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--g, linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))));
  opacity: 0; transition: opacity .3s ease .05s;
}
.dd.open > .dd-menu.mega::after,
.dd.kb > .dd-menu.mega::after { opacity: 1; }

/* a hovered row picks up the group's colour instead of the generic tint,
   and slides a little — small enough to feel like feedback, not travel */
.mega-item {
  transition: background .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1),
              box-shadow .18s ease;
}
.mega-item:hover, .mega-item:focus-visible {
  background: hsl(var(--primary) / .09);
  transform: translateX(3px);
}
.mega-item::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 2px;
  border-radius: 2px; background: var(--g, hsl(var(--primary)));
  opacity: 0; transition: opacity .18s ease;
}
.mega-item { position: relative; }
.mega-item:hover::before, .mega-item:focus-visible::before,
.mega-item.active::before { opacity: 1; }
.mega-ic { transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
.mega-item:hover .mega-ic { transform: scale(1.08); }

/* the rows arrive just after the panel, a few milliseconds apart. Capped at
   ten: past that the last row waits long enough to feel slow rather than
   smooth, and a menu has no business being slow. */
.dd.open > .dd-menu.mega .mega-item,
.dd.open > .dd-menu.mega .mega-all,
.dd.kb > .dd-menu.mega .mega-item,
.dd.kb > .dd-menu.mega .mega-all {
  animation: mega-row .28s cubic-bezier(.17, .84, .31, 1) both;
}
@keyframes mega-row { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.dd-menu.mega .mega-item:nth-child(2)  { animation-delay: .03s }
.dd-menu.mega .mega-item:nth-child(3)  { animation-delay: .06s }
.dd-menu.mega .mega-item:nth-child(4)  { animation-delay: .09s }
.dd-menu.mega .mega-item:nth-child(5)  { animation-delay: .12s }
.dd-menu.mega .mega-item:nth-child(6)  { animation-delay: .15s }
.dd-menu.mega .mega-item:nth-child(7)  { animation-delay: .17s }
.dd-menu.mega .mega-item:nth-child(8)  { animation-delay: .19s }
.dd-menu.mega .mega-item:nth-child(n+9){ animation-delay: .21s }
.dd-menu.mega .mega-all { animation-delay: .22s }
/* hovering a row must not restart its entrance animation */
.dd-menu.mega .mega-item:hover { animation: none; }

/* the small dropdowns (account, theme, language) get the same easing */
.dd-item { transition: background .16s ease, color .16s ease, padding-left .16s ease; }
.dd-item:hover { padding-left: 12px; }

/* Someone who has asked the system for less motion gets a plain cross-fade:
   no lift, no slide, no stagger. The menu still works exactly the same. */
@media (prefers-reduced-motion: reduce) {
  .dd-menu, .dd.open > .dd-menu, .nav-links .dd.kb > .dd-menu {
    transform: translateX(var(--dd-x)) !important;
    transition: opacity .12s linear, visibility 0s linear .12s;
  }
  .dd.open > .dd-menu, .nav-links .dd.kb > .dd-menu {
    transition: opacity .12s linear, visibility 0s;
  }
  .dd.open > .dd-menu.mega .mega-item,
  .dd.open > .dd-menu.mega .mega-all,
  .dd.kb > .dd-menu.mega .mega-item,
  .dd.kb > .dd-menu.mega .mega-all { animation: none; }
  .mega-item:hover { transform: none; }
  .nav-links .dd > [data-dd]::after { transition: none; }
}

/* =====================================================================
   Admin sidebar — the one that was never written                ADM-07/08
   =====================================================================
   The markup has used .side-sec, .side-parent, .side-children, .side-search,
   .side-txt and .side-caret for a while. None of them had a single rule in
   this file, so the sidebar rendered as bare <details> elements with the
   browser's own triangles, no indentation on sub-items, and every one of the
   seventy-five links looking exactly like every other. That is the "not
   organised" complaint, and it is a stylesheet gap rather than a structure
   problem — the structure was already right.

   Each section carries its own colour in --sg (set inline by admin_nav.php).
   It is used in three places and no more: the icon tile, the line under the
   open section, and the active item's left edge. Colour used sparingly is a
   way of finding your place; colour everywhere is wallpaper.
   ===================================================================== */

.admin-side { scrollbar-width: thin; }

/* ---------- search ---------- */
.side-search {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin: 0;
  background: hsl(var(--sidebar));
  border-bottom: 1px solid hsl(var(--border));
}
.side-search .ic { width: 15px; height: 15px; color: hsl(var(--muted-foreground)); flex: none; }
.side-search input {
  width: 100%; min-width: 0; border: 0; background: none; outline: none;
  font: 400 13px/1.4 var(--font-body, inherit); color: hsl(var(--foreground));
}
.side-search input::placeholder { color: hsl(var(--muted-foreground) / .8); }
.side-search:focus-within { box-shadow: inset 0 0 0 2px hsl(var(--primary) / .35); }

.side-nav { padding: 6px 0 28px; }

/* ---------- a section ---------- */
.side-sec { border-bottom: 1px solid hsl(var(--border) / .55); }
.side-sec > summary { list-style: none; cursor: pointer; }
.side-sec > summary::-webkit-details-marker { display: none; }

.side-group {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 11px 14px;
  /* 11px with tight tracking, because "Clients & Sales" and "Learning &
     Store" wrapped onto two lines at 11.5px/.08em once the count and the
     pending badge were sharing the row with them. A section header that
     wraps stops reading as a header. */
  font-size: 11px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  position: relative;
  transition: color .16s ease, background .16s ease;
}
.side-group:hover { background: hsl(var(--sidebar-accent) / .5); color: hsl(var(--foreground)); }
.side-sec[open] > .side-group { color: hsl(var(--foreground)); }
/* the section's colour, as a hairline under its header once it is open */
.side-sec > .side-group::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--sg, hsl(var(--primary)));
  opacity: 0; transform: scaleX(.25); transform-origin: left;
  transition: opacity .22s ease, transform .3s cubic-bezier(.17,.84,.31,1);
}
.side-sec[open] > .side-group::after { opacity: .9; transform: scaleX(1); }

.side-gic {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--sg, hsl(var(--primary))); color: #fff;
}
.side-gic .ic { width: 13px; height: 13px; }
.side-gtx {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-gtx i {
  font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: .02em;
  text-transform: none; color: hsl(var(--muted-foreground) / .85);
}
.side-gcount {
  font-size: 10px; font-weight: 600; letter-spacing: 0; flex: none;
  color: hsl(var(--muted-foreground) / .8);
  background: hsl(var(--muted)); border-radius: 999px; padding: 1px 6px;
}
.side-gbadge {
  font-size: 10px; font-weight: 700; letter-spacing: 0; color: #fff; flex: none;
  background: hsl(38 92% 45%); border-radius: 999px; padding: 1px 6px;
}
.side-group > .ic:last-child {
  width: 13px; height: 13px; flex: none; opacity: .5; margin-left: 1px;
  transition: transform .24s cubic-bezier(.17,.84,.31,1);
}
.side-sec[open] > .side-group > .ic:last-child { transform: rotate(180deg); }

/* ---------- a link ---------- */
.side-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 16px;
  font-size: 13px; line-height: 1.4;
  color: hsl(var(--foreground) / .82); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.side-link:hover { background: hsl(var(--sidebar-accent) / .55); color: hsl(var(--foreground)); padding-left: 19px; }
.side-link .ic { width: 15px; height: 15px; flex: none; opacity: .78; }
.side-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link .cnt { margin-left: auto; flex: none; }
.side-ext { margin-left: auto; opacity: .45; display: inline-flex; }
.side-ext .ic { width: 12px; height: 12px; }

/* the current page: the section's own colour on the edge, so the sidebar
   says both WHERE you are and WHAT KIND of thing it is */
.side-link.active,
.side-link.has-active {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-fg, var(--foreground)));
  font-weight: 600;
  border-left-color: transparent;
  position: relative;
}
.side-link.active::before,
.side-link.has-active::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sg, hsl(var(--primary)));
}
.side-link.active .ic { opacity: 1; }
.side-link:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: -2px; }

/* ---------- a link that opens sub-items ---------- */
.side-parent > summary { list-style: none; cursor: pointer; }
.side-parent > summary::-webkit-details-marker { display: none; }
.side-caret { margin-left: auto; display: inline-flex; opacity: .45; flex: none; }
.side-caret .ic { width: 13px; height: 13px; transition: transform .22s cubic-bezier(.17,.84,.31,1); }
.side-parent[open] > .side-link .side-caret .ic { transform: rotate(90deg); }
.side-parent > .side-link .cnt + .side-caret { margin-left: 6px; }

/* sub-items sit under a guide line, so depth is visible without indentation
   eating the width a long label needs */
.side-children { position: relative; padding: 2px 0 4px; }
.side-children::before {
  content: ""; position: absolute; left: 22px; top: 0; bottom: 4px; width: 1px;
  background: hsl(var(--border));
}
.side-sub { padding-left: 34px; font-size: 12.5px; color: hsl(var(--foreground) / .74); }
.side-sub:hover { padding-left: 37px; }
.side-sub .ic { width: 13px; height: 13px; }

/* the search hides rows; a section with nothing left hides itself */
.side-link[hidden], .side-parent[hidden], .side-sec[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .side-link, .side-caret .ic, .side-group > .ic:last-child, .side-sec > .side-group::after {
    transition: none !important;
  }
  .side-link:hover, .side-sub:hover { padding-left: 16px; }
}

/* ---------- institution logos in the admin tables ---------- */
.inst-logo {
  max-height: 56px; max-width: 150px; width: auto; height: auto;
  object-fit: contain; background: #fff;
  border: 1px solid hsl(var(--border)); border-radius: 6px; padding: 4px;
}
.inst-logo.sm { max-height: 30px; max-width: 42px; padding: 2px; }
/* a generated placeholder is marked, so a glance down the column separates
   "we have their crest" from "we have initials in a circle" */
.inst-logo.is-mono { border-style: dashed; opacity: .85; }
.btn.danger, .btn.danger .ic { color: hsl(var(--destructive)); }
.btn.danger:hover { background: hsl(var(--destructive) / .1); }


/* ═══════════════════════════════════════════════════════════════════
   Service pricing cards — /services, paid half
   ═══════════════════════════════════════════════════════════════════
   The section these replace used the generic .card, so a ৳20,000 piece
   of project work and a free cover-page tool were the same object with
   a different badge. Price cards are a different kind of thing: they
   are read by someone comparing, so the figure has to be findable at a
   glance and the "what do I get" has to be a list, not a paragraph.

   Colour comes from each service's own --c, set inline from the admin's
   colour picker, so the section stays as colourful as the data is
   without a single hard-coded hue in this file.
   ------------------------------------------------------------------ */

.svc-grid {
  display: grid;
  /* auto-fit, not a fixed 3 — three of these at 320px on a 13" laptop is
     cramped, and the same rule gives one column on a phone for free */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 18px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  /* the service's colour, just enough of it to tint the card apart from
     its neighbour without turning the grid into a paint chart */
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 130px);
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s ease, border-color .22s ease;
}
.svc-card::before {           /* the accent cap */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, transparent));
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 40%, hsl(var(--border)));
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--c) 70%, transparent);
}

/* The one card marked "most asked for". A ring rather than a bigger card,
   because scaling one tile breaks the grid's baseline and makes the other
   nine look broken rather than making this one look chosen. */
.svc-card.is-hot {
  border-color: color-mix(in srgb, var(--c) 55%, hsl(var(--border)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent),
              0 16px 40px -22px color-mix(in srgb, var(--c) 80%, transparent);
}
.svc-hot {
  position: absolute; top: -10px; right: 16px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; line-height: 1.6; white-space: nowrap;
  color: #fff; background: var(--c);
}

.svc-head { display: flex; align-items: flex-start; gap: 11px; }
.svc-ico {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
}
.svc-name { margin: 0; font-size: 15.5px; font-weight: 650; line-height: 1.35; }
.svc-tag {
  display: inline-block; margin-top: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c);
}
/* Clamped to three lines, and this is the load-bearing rule of the whole
   block. The descriptions run from 60 to 200 characters, so left alone they
   push the price down by a different amount in every card — and a price grid
   whose figures sit at six different heights cannot be read across a row,
   which is the one thing a price grid is for. Three lines holds the longest
   current description's first sentence; the rest is on the service's own
   page, one click away, where there is room for it. */
.svc-desc {
  margin: 12px 0 0;
  font-size: 13px; line-height: 1.6; color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
  /* a floor as well as a ceiling: a one-line description lifts its price
     above the row just as badly as a five-line one drops it below */
  min-height: calc(3 * 1.6em);
}

/* ---- the figure ---------------------------------------------------
   Baseline-aligned so "from" and the unit sit on the number's line
   rather than floating beside it, and tabular figures so a column of
   prices lines up digit under digit.                                  */
.svc-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px dashed hsl(var(--border));
}
.svc-fromlbl { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.svc-fig {
  font-size: 27px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: hsl(var(--foreground));
}
/* "Quote" is a word, not a number — at 27px it shouts, so it is set
   smaller and in the service's own colour, which reads as a state
   rather than as a very large price. */
.svc-fig-sm { font-size: 17px; font-weight: 650; color: var(--c); }
.svc-unit { font-size: 11.5px; color: hsl(var(--muted-foreground)); }

/* ---- what is included --------------------------------------------- */
.svc-inc { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.svc-inc li {
  display: grid; grid-template-columns: 15px 1fr; gap: 8px; align-items: start;
  font-size: 12.5px; line-height: 1.5; color: hsl(var(--muted-foreground));
}
.svc-inc .ic { width: 13px; height: 13px; margin-top: 3px; color: var(--c); }

/* ---- the action ---------------------------------------------------
   margin-top:auto pins this to the bottom whatever the card's height,
   so every CTA in the row lands on one line even when one service
   lists five inclusions and its neighbour lists none.                 */
.svc-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: auto; padding-top: 16px;
}
.svc-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; text-decoration: none;
  color: var(--c);
}
.svc-cta .ic { transition: transform .2s ease; }
.svc-card:hover .svc-cta .ic { transform: translateX(3px); }
.svc-eta {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  font-size: 11px; color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.svc-eta .ic { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-cta .ic { transition: none; }
  .svc-card:hover { transform: none; }
  .svc-card:hover .svc-cta .ic { transform: none; }
}

/* the admin's folded pricing block */
.svc-pricing > summary { padding: 7px 0; list-style: none; }
.svc-pricing > summary::-webkit-details-marker { display: none; }
.svc-pricing > summary::before { content: "▸ "; color: hsl(var(--muted-foreground)); }
.svc-pricing[open] > summary::before { content: "▾ "; }

/* The native <select> popup on Windows cannot use a webfont — see the long
   note in atlas/assets/css/style.css. Naming Inter first made Windows
   substitute a symbol face and draw plain ASCII option text as dingbats.
   Local fonts only here, Bangla included. */
/* ATL-29: the <select> itself, not only its options. Windows takes the
   popup's font from the control, so naming a webfont there made the OS
   substitute — often a symbol face — before the option rule was reached.
   That is the whole dingbat bug, and it needs both selectors. */
select,
select option,
select optgroup {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Nirmala UI',
               'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi',
               'Kalpurush', Roboto, Arial, sans-serif !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ATL-28 · The two doors on /services/map-studio
   ═══════════════════════════════════════════════════════════════════
   Compose a sheet, or browse the country. Equal weight, because they
   are equally real — the old page made one a primary button and the
   other an outline one beside it, which read as "and also, a lesser
   thing". Colour and the arrow mark which is the paid product; size
   and structure say they are peers.
   ------------------------------------------------------------------ */
.ms-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.ms-door {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 22px 20px;
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  background: hsl(var(--card));
  text-decoration: none;
  color: inherit;
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s ease, border-color .22s ease;
}
.ms-door:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--d, #3b82f6) 45%, hsl(var(--border)));
  box-shadow: 0 16px 38px -20px color-mix(in srgb, var(--d, #3b82f6) 75%, transparent);
}
.ms-door { --d: #0f766e; }
.ms-door.is-primary { --d: #1d4ed8; }
.ms-door.is-primary::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--d), color-mix(in srgb, var(--d) 40%, transparent));
}

.ms-door-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  color: var(--d);
  background: color-mix(in srgb, var(--d) 12%, transparent);
  margin-bottom: 14px;
}
.ms-door-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--d);
}
.ms-door h2 { margin: 4px 0 8px; font-size: 21px; font-weight: 700; line-height: 1.25; }
.ms-door > p { margin: 0; font-size: 13.5px; line-height: 1.62; color: hsl(var(--muted-foreground)); }

.ms-door-pts { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 7px; }
.ms-door-pts li {
  display: grid; grid-template-columns: 15px 1fr; gap: 8px; align-items: start;
  font-size: 12.5px; line-height: 1.5; color: hsl(var(--muted-foreground));
}
.ms-door-pts .ic { width: 13px; height: 13px; margin-top: 3px; color: var(--d); }

/* pinned to the bottom so both cards' actions line up whatever the
   description length */
.ms-door-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 18px;
  font-size: 13px; font-weight: 650; color: var(--d);
}
.ms-door-go .ic { transition: transform .2s ease; }
.ms-door:hover .ms-door-go .ic { transform: translateX(3px); }

/* the line that stops two doors reading as two half-products */
.ms-samedata {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0; padding: 12px 15px;
  border-left: 3px solid hsl(var(--border));
  font-size: 13px; line-height: 1.6; color: hsl(var(--muted-foreground));
}
.ms-samedata .ic { width: 15px; height: 15px; margin-top: 3px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .ms-door, .ms-door-go .ic { transition: none; }
  .ms-door:hover { transform: none; }
  .ms-door:hover .ms-door-go .ic { transform: none; }
}

/* 15-Sep-2026 — waiting requests: red count circles + new-request toast */
.side-red{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ef4444;color:#fff!important;font-size:11px;font-weight:800;line-height:1;box-shadow:0 0 0 2px rgba(239,68,68,.18);font-variant-numeric:tabular-nums}
.side-red[hidden]{display:none!important}
.side-link .cnt.side-red{margin-left:auto;color:#fff}
.side-group .side-red{animation:sideRedPulse 2s ease-in-out infinite}
.side-link:has(.side-red:not([hidden])){box-shadow:inset 3px 0 0 #ef4444}
@keyframes sideRedPulse{0%,100%{box-shadow:0 0 0 2px rgba(239,68,68,.18)}50%{box-shadow:0 0 0 6px rgba(239,68,68,.05)}}
@media (prefers-reduced-motion:reduce){.side-group .side-red{animation:none}}
.side-toast{position:fixed;right:18px;bottom:18px;z-index:9999;background:#ef4444;color:#fff;padding:12px 16px;border-radius:12px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.store-red{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#ef4444;color:#fff;font-size:12px;font-weight:800;margin-left:6px}
.req-row td{vertical-align:middle}
.btn-wa{background:#25d366!important;color:#fff!important;border-color:#25d366!important}

/* 18-Sep-2026 · Pentraex brand lockup (logo + wordmark) */
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; }
.brand-lockup img { flex: 0 0 auto; }
.brand-lockup span { font-weight: 800; letter-spacing: -.01em; }

/* 18-Sep-2026 · mobile-banking badges, shared by every pay dialog */
.mfs{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.mfs:before{content:"";width:22px;height:22px;border-radius:6px;flex:0 0 auto;background:#94a3b8;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mfs-bkash:before{background:#E2136E}
.mfs-nagad:before{background:#F05A28}
.mfs-rocket:before{background:#8A2BE2}
.mfs-upay:before{background:#0FA958}
.mfs-bank:before{background:#334155}