/* ===== Preflight (minimal reset, mirrors Tailwind base) ===== */
*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
html{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.5}
body{margin:0;line-height:inherit}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
p{margin:0}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
button,input{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button{text-transform:none;-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer}
input::placeholder{opacity:1;color:#94a3b8}
ul,ol{list-style:none;margin:0;padding:0}
svg{display:block;vertical-align:middle}
[hidden]{display:none}
img,svg{max-width:100%;height:auto}
:focus:not(:focus-visible){outline:none}

/* ===== Keyframes ===== */
@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tw-pulse{50%{opacity:.5}}

/* ===== Group marker (no own styles; enables group-hover children) ===== */
.group{}

/* ===== Base utilities (unprefixed) ===== */
.absolute { position:absolute; }
.accent-brand-600 { accent-color:#2563eb; }
.animate-bounce-slow { animation:bounce 3s infinite; }
.animate-fade-in { animation:fadeIn 0.5s ease-out; }
.animate-pulse { animation:tw-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-spin { animation:spin 1s linear infinite; }
.appearance-none { -webkit-appearance:none;-moz-appearance:none;appearance:none; }
.backdrop-blur { backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); }
.backdrop-blur-md { backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
.bg-blue-100 { background-color:#dbeafe; }
.bg-blue-50 { background-color:#eff6ff; }
.bg-brand-100 { background-color:#dbeafe; }
.bg-brand-50 { background-color:#eff6ff; }
.bg-brand-600 { background-color:#2563eb; }
.bg-excel-50 { background-color:#f0fdf4; }
.bg-excel-600 { background-color:#16a34a; }
.bg-green-100 { background-color:#dcfce7; }
.bg-green-500 { background-color:#22c55e; }
.bg-green-600 { background-color:#16a34a; }
.bg-orange-100 { background-color:#ffedd5; }
.bg-orange-50 { background-color:#fff7ed; }
.bg-purple-100 { background-color:#f3e8ff; }
.bg-red-100 { background-color:#fee2e2; }
.bg-red-50 { background-color:#fef2f2; }
.bg-rose-50 { background-color:#fff1f2; }
.bg-rose-500 { background-color:#f43f5e; }
.bg-slate-100 { background-color:#f1f5f9; }
.bg-slate-200 { background-color:#e2e8f0; }
.bg-slate-50 { background-color:#f8fafc; }
.bg-slate-900 { background-color:#0f172a; }
.bg-slate-900\/60 { background-color:rgb(15 23 42 / 0.6); }
.bg-slate-950 { background-color:#020617; }
.bg-white { background-color:#ffffff; }
.bg-white\/90 { background-color:rgb(255 255 255 / 0.9); }
.bg-white\/95 { background-color:rgb(255 255 255 / 0.95); }
.block { display:block; }
.border { border-width:1px; }
.border-2 { border-width:2px; }
.border-4 { border-width:4px; }
.border-b { border-bottom-width:1px; }
.border-brand-100 { border-color:#dbeafe; }
.border-brand-500 { border-color:#3b82f6; }
.border-dashed { border-style:dashed; }
.border-excel-100 { border-color:#dcfce7; }
.border-l-2 { border-left-width:2px; }
.border-orange-100 { border-color:#ffedd5; }
.border-red-100 { border-color:#fee2e2; }
.border-rose-100 { border-color:#ffe4e6; }
.border-slate-100 { border-color:#f1f5f9; }
.border-slate-200 { border-color:#e2e8f0; }
.border-slate-300 { border-color:#cbd5e1; }
.border-slate-800 { border-color:#1e293b; }
.border-slate-900 { border-color:#0f172a; }
.border-t { border-top-width:1px; }
.border-t-excel-600 { border-top-color:#16a34a; }
.bottom-0 { bottom:0; }
.col-span-1 { grid-column:span 1 / span 1; }
.col-span-2 { grid-column:span 2 / span 2; }
.cursor-move { cursor:move; }
.cursor-pointer { cursor:pointer; }
.dark .dark\:bg-blue-900\/20 { background-color:rgb(30 58 138 / 0.2); }
.dark .dark\:bg-blue-900\/30 { background-color:rgb(30 58 138 / 0.3); }
.dark .dark\:bg-brand-900\/20 { background-color:rgb(30 58 138 / 0.2); }
.dark .dark\:bg-brand-900\/30 { background-color:rgb(30 58 138 / 0.3); }
.dark .dark\:bg-dark-bg { background-color:#0f172a; }
.dark .dark\:bg-dark-bg\/90 { background-color:rgb(15 23 42 / 0.9); }
.dark .dark\:bg-dark-card { background-color:#1e293b; }
.dark .dark\:bg-dark-card\/90 { background-color:rgb(30 41 59 / 0.9); }
.dark .dark\:bg-dark-card\/95 { background-color:rgb(30 41 59 / 0.95); }
.dark .dark\:bg-green-900\/10 { background-color:rgb(20 83 45 / 0.1); }
.dark .dark\:bg-green-900\/20 { background-color:rgb(20 83 45 / 0.2); }
.dark .dark\:bg-green-900\/30 { background-color:rgb(20 83 45 / 0.3); }
.dark .dark\:bg-orange-900\/30 { background-color:rgb(124 45 18 / 0.3); }
.dark .dark\:bg-purple-900\/20 { background-color:rgb(88 28 135 / 0.2); }
.dark .dark\:bg-red-900\/20 { background-color:rgb(127 29 29 / 0.2); }
.dark .dark\:bg-red-900\/30 { background-color:rgb(127 29 29 / 0.3); }
.dark .dark\:bg-rose-900\/30 { background-color:rgb(136 19 55 / 0.3); }
.dark .dark\:bg-slate-700 { background-color:#334155; }
.dark .dark\:bg-slate-800 { background-color:#1e293b; }
.dark .dark\:bg-slate-800\/50 { background-color:rgb(30 41 59 / 0.5); }
.dark .dark\:bg-slate-900 { background-color:#0f172a; }
.dark .dark\:block { display:block; }
.dark .dark\:border-brand-700 { border-color:#1d4ed8; }
.dark .dark\:border-dark-border { border-color:#334155; }
.dark .dark\:border-green-800 { border-color:#166534; }
.dark .dark\:border-rose-800 { border-color:#9f1239; }
.dark .dark\:border-slate-600 { border-color:#475569; }
.dark .dark\:border-slate-700 { border-color:#334155; }
.dark .dark\:border-slate-800 { border-color:#1e293b; }
.dark .dark\:hidden { display:none; }
.dark .dark\:hover\:bg-slate-700:hover { background-color:#334155; }
.dark .dark\:hover\:bg-slate-800:hover { background-color:#1e293b; }
.dark .dark\:hover\:text-brand-500:hover { color:#3b82f6; }
.dark .dark\:text-brand-500 { color:#3b82f6; }
.dark .dark\:text-dark-text { color:#f8fafc; }
.dark .dark\:text-green-300 { color:#86efac; }
.dark .dark\:text-green-400 { color:#4ade80; }
.dark .dark\:text-orange-300 { color:#fdba74; }
.dark .dark\:text-red-300 { color:#fca5a5; }
.dark .dark\:text-rose-300 { color:#fda4af; }
.dark .dark\:text-slate-200 { color:#e2e8f0; }
.dark .dark\:text-slate-300 { color:#cbd5e1; }
.dark .dark\:text-slate-400 { color:#94a3b8; }
.dark .dark\:text-white { color:#ffffff; }
.dark .dark\:text-yellow-400 { color:#facc15; }
.disabled\:cursor-not-allowed:disabled { cursor:not-allowed; }
.disabled\:hover\:bg-brand-600:disabled:hover { background-color:#2563eb; }
.disabled\:opacity-50:disabled { opacity:0.5; }
.disabled\:shadow-none:disabled { box-shadow:0 0 #0000; }
.duration-300 { transition-duration:300ms; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.flex-grow { flex-grow:1; }
.flex-wrap { flex-wrap:wrap; }
.focus\:outline-none:focus { outline:2px solid transparent;outline-offset:2px; }
.focus\:ring-2:focus { box-shadow:0 0 0 2px var(--tw-ring-color, currentColor); }
.focus\:ring-brand-500:focus { --tw-ring-color:#3b82f6; }
.focus\:ring-offset-2:focus { box-shadow:0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px var(--tw-ring-color, currentColor); }
.font-bold { font-weight:700; }
.font-display { font-family:Outfit,ui-sans-serif,system-ui,sans-serif; }
.font-extrabold { font-weight:800; }
.font-medium { font-weight:500; }
.font-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.font-sans { font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.font-semibold { font-weight:600; }
.gap-1\.5 { gap:0.375rem; }
.gap-10 { gap:2.5rem; }
.gap-2 { gap:0.5rem; }
.gap-2\.5 { gap:0.625rem; }
.gap-3 { gap:0.75rem; }
.gap-4 { gap:1rem; }
.gap-5 { gap:1.25rem; }
.gap-6 { gap:1.5rem; }
.gap-8 { gap:2rem; }
.grid { display:grid; }
.grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.group:hover .group-hover\:bg-brand-700 { background-color:#1d4ed8; }
.group:hover .group-hover\:scale-110 { transform:scale(1.1); }
.group[open] .group-open\:rotate-180 { transform:rotate(180deg); }
.h-10 { height:2.5rem; }
.h-11 { height:2.75rem; }
.h-12 { height:3rem; }
.h-14 { height:3.5rem; }
.h-16 { height:4rem; }
.h-2 { height:0.5rem; }
.h-2\.5 { height:0.625rem; }
.h-20 { height:5rem; }
.h-24 { height:6rem; }
.h-3 { height:0.75rem; }
.h-4 { height:1rem; }
.h-40 { height:10rem; }
.h-5 { height:1.25rem; }
.h-9 { height:2.25rem; }
.h-auto { height:auto; }
.h-full { height:100%; }
.hidden { display:none; }
.hover\:-translate-y-1:hover { transform:translateY(-0.25rem); }
.hover\:bg-brand-50:hover { background-color:#eff6ff; }
.hover\:bg-brand-700:hover { background-color:#1d4ed8; }
.hover\:bg-green-700:hover { background-color:#15803d; }
.hover\:bg-orange-50:hover { background-color:#fff7ed; }
.hover\:bg-red-50:hover { background-color:#fef2f2; }
.hover\:bg-slate-200:hover { background-color:#e2e8f0; }
.hover\:bg-slate-50:hover { background-color:#f8fafc; }
.hover\:ring-2:hover { box-shadow:0 0 0 2px var(--tw-ring-color, currentColor); }
.hover\:text-brand-500:hover { color:#3b82f6; }
.hover\:text-brand-600:hover { color:#2563eb; }
.hover\:text-brand-700:hover { color:#1d4ed8; }
.hover\:text-excel-600:hover { color:#16a34a; }
.hover\:text-red-500:hover { color:#ef4444; }
.inline-block { display:inline-block; }
.inline-flex { display:inline-flex; }
.inset-0 { top:0;right:0;bottom:0;left:0; }
.inset-y-0 { top:0;bottom:0; }
.items-center { align-items:center; }
.items-end { align-items:flex-end; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.leading-relaxed { line-height:1.625; }
.leading-tight { line-height:1.25; }
.left-0 { left:0; }
.line-through { text-decoration-line:line-through; }
.list-decimal { list-style-type:decimal; }
.list-none { list-style-type:none; }
.m-6 { margin:1.5rem; }
.marker\:font-bold { font-weight:700; }
.marker\:text-brand-500 { color:#3b82f6; }
.marker\:text-brand-600 { color:#2563eb; }
.marker\:text-excel-600 { color:#16a34a; }
.max-h-\[600px\] { max-height:600px; }
.max-w-2xl { max-width:42rem; }
.max-w-3xl { max-width:48rem; }
.max-w-4xl { max-width:56rem; }
.max-w-5xl { max-width:64rem; }
.max-w-6xl { max-width:72rem; }
.max-w-7xl { max-width:80rem; }
.max-w-\[200px\] { max-width:200px; }
.max-w-md { max-width:28rem; }
.max-w-none { max-width:none; }
.max-w-sm { max-width:24rem; }
.max-w-xl { max-width:36rem; }
.max-w-xs { max-width:20rem; }
.mb-1 { margin-bottom:0.25rem; }
.mb-10 { margin-bottom:2.5rem; }
.mb-12 { margin-bottom:3rem; }
.mb-14 { margin-bottom:3.5rem; }
.mb-16 { margin-bottom:4rem; }
.mb-2 { margin-bottom:0.5rem; }
.mb-20 { margin-bottom:5rem; }
.mb-3 { margin-bottom:0.75rem; }
.mb-4 { margin-bottom:1rem; }
.mb-5 { margin-bottom:1.25rem; }
.mb-6 { margin-bottom:1.5rem; }
.mb-8 { margin-bottom:2rem; }
.min-h-\[1rem\] { min-height:1rem; }
.min-h-\[400px\] { min-height:400px; }
.min-h-\[500px\] { min-height:500px; }
.min-h-screen { min-height:100vh; }
.min-w-0 { min-width:0; }
.ml-2 { margin-left:0.5rem; }
.mr-1 { margin-right:0.25rem; }
.mr-2 { margin-right:0.5rem; }
.mt-0\.5 { margin-top:0.125rem; }
.mt-1 { margin-top:0.25rem; }
.mt-16 { margin-top:4rem; }
.mt-2 { margin-top:0.5rem; }
.mt-3 { margin-top:0.75rem; }
.mt-4 { margin-top:1rem; }
.mt-5 { margin-top:1.25rem; }
.mt-6 { margin-top:1.5rem; }
.mt-8 { margin-top:2rem; }
.mt-auto { margin-top:auto; }
.mx-auto { margin-left:auto;margin-right:auto; }
.my-6 { margin-top:1.5rem;margin-bottom:1.5rem; }
.my-8 { margin-top:2rem;margin-bottom:2rem; }
.outline-none { outline:2px solid transparent;outline-offset:2px; }
.overflow-hidden { overflow:hidden; }
.overflow-y-auto { overflow-y:auto; }
.p-10 { padding:2.5rem; }
.p-12 { padding:3rem; }
.p-2 { padding:0.5rem; }
.p-3 { padding:0.75rem; }
.p-4 { padding:1rem; }
.p-5 { padding:1.25rem; }
.p-6 { padding:1.5rem; }
.p-8 { padding:2rem; }
.pb-10 { padding-bottom:2.5rem; }
.pb-12 { padding-bottom:3rem; }
.pb-16 { padding-bottom:4rem; }
.pb-20 { padding-bottom:5rem; }
.pb-4 { padding-bottom:1rem; }
.pb-8 { padding-bottom:2rem; }
.pl-1 { padding-left:0.25rem; }
.pl-2 { padding-left:0.5rem; }
.pl-4 { padding-left:1rem; }
.pl-5 { padding-left:1.25rem; }
.pointer-events-none { pointer-events:none; }
.pr-12 { padding-right:3rem; }
.pt-1 { padding-top:0.25rem; }
.pt-12 { padding-top:3rem; }
.pt-14 { padding-top:3.5rem; }
.pt-16 { padding-top:4rem; }
.pt-4 { padding-top:1rem; }
.pt-6 { padding-top:1.5rem; }
.pt-8 { padding-top:2rem; }
.px-10 { padding-left:2.5rem;padding-right:2.5rem; }
.px-2 { padding-left:0.5rem;padding-right:0.5rem; }
.px-3 { padding-left:0.75rem;padding-right:0.75rem; }
.px-4 { padding-left:1rem;padding-right:1rem; }
.px-6 { padding-left:1.5rem;padding-right:1.5rem; }
.px-8 { padding-left:2rem;padding-right:2rem; }
.py-1 { padding-top:0.25rem;padding-bottom:0.25rem; }
.py-1\.5 { padding-top:0.375rem;padding-bottom:0.375rem; }
.py-10 { padding-top:2.5rem;padding-bottom:2.5rem; }
.py-12 { padding-top:3rem;padding-bottom:3rem; }
.py-16 { padding-top:4rem;padding-bottom:4rem; }
.py-2 { padding-top:0.5rem;padding-bottom:0.5rem; }
.py-20 { padding-top:5rem;padding-bottom:5rem; }
.py-3 { padding-top:0.75rem;padding-bottom:0.75rem; }
.py-3\.5 { padding-top:0.875rem;padding-bottom:0.875rem; }
.py-4 { padding-top:1rem;padding-bottom:1rem; }
.py-6 { padding-top:1.5rem;padding-bottom:1.5rem; }
.py-8 { padding-top:2rem;padding-bottom:2rem; }
.relative { position:relative; }
.resize-y { resize:vertical; }
.right-0 { right:0; }
.ring-brand-500 { --tw-ring-color:#3b82f6; }
.rounded { border-radius:0.25rem; }
.rounded-2xl { border-radius:1rem; }
.rounded-3xl { border-radius:1.5rem; }
.rounded-full { border-radius:9999px; }
.rounded-lg { border-radius:0.5rem; }
.rounded-xl { border-radius:0.75rem; }
.select-none { user-select:none;-webkit-user-select:none; }
.selection\:bg-brand-500::selection { background-color:#3b82f6; }
.selection\:text-white::selection { color:#ffffff; }
.shadow-brand-500\/20 { --tw-shadow-color:rgb(59 130 246 / 0.2);box-shadow:0 10px 15px -3px rgb(59 130 246 / 0.2),0 4px 6px -4px rgb(59 130 246 / 0.2); }
.shadow-brand-500\/30 { --tw-shadow-color:rgb(59 130 246 / 0.3);box-shadow:0 10px 15px -3px rgb(59 130 246 / 0.3),0 4px 6px -4px rgb(59 130 246 / 0.3); }
.shadow-green-500\/30 { --tw-shadow-color:rgb(34 197 94 / 0.3);box-shadow:0 10px 15px -3px rgb(34 197 94 / 0.3),0 4px 6px -4px rgb(34 197 94 / 0.3); }
.shadow-inner { box-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
.shadow-lg { box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-sm { box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-xl { box-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shrink-0 { flex-shrink:0; }
.space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.sticky { position:sticky; }
.text-2xl { font-size:1.5rem;line-height:2rem; }
.text-3xl { font-size:1.875rem;line-height:2.25rem; }
.text-4xl { font-size:2.25rem;line-height:2.5rem; }
.text-5xl { font-size:3rem;line-height:1; }
.text-base { font-size:1rem;line-height:1.5rem; }
.text-blue-600 { color:#2563eb; }
.text-brand-500 { color:#3b82f6; }
.text-brand-600 { color:#2563eb; }
.text-brand-700 { color:#1d4ed8; }
.text-center { text-align:center; }
.text-excel-600 { color:#16a34a; }
.text-green-400 { color:#4ade80; }
.text-green-500 { color:#22c55e; }
.text-green-600 { color:#16a34a; }
.text-lg { font-size:1.125rem;line-height:1.75rem; }
.text-orange-600 { color:#ea580c; }
.text-orange-700 { color:#c2410c; }
.text-purple-600 { color:#9333ea; }
.text-red-600 { color:#dc2626; }
.text-red-700 { color:#b91c1c; }
.text-rose-700 { color:#be123c; }
.text-slate-300 { color:#cbd5e1; }
.text-slate-400 { color:#94a3b8; }
.text-slate-500 { color:#64748b; }
.text-slate-600 { color:#475569; }
.text-slate-700 { color:#334155; }
.text-slate-800 { color:#1e293b; }
.text-slate-900 { color:#0f172a; }
.text-sm { font-size:0.875rem;line-height:1.25rem; }
.text-white { color:#ffffff; }
.text-xl { font-size:1.25rem;line-height:1.75rem; }
.text-xs { font-size:0.75rem;line-height:1rem; }
.top-0 { top:0; }
.touch-none { touch-action:none; }
.tracking-tight { letter-spacing:-0.025em; }
.tracking-wider { letter-spacing:0.05em; }
.transform {  }
.transition { transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; }
.transition-all { transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; }
.transition-colors { transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; }
.transition-transform { transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; }
.truncate { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.underline { text-decoration-line:underline; }
.uppercase { text-transform:uppercase; }
.w-0 { width:0; }
.w-10 { width:2.5rem; }
.w-11 { width:2.75rem; }
.w-12 { width:3rem; }
.w-14 { width:3.5rem; }
.w-16 { width:4rem; }
.w-2 { width:0.5rem; }
.w-20 { width:5rem; }
.w-24 { width:6rem; }
.w-4 { width:1rem; }
.w-5 { width:1.25rem; }
.w-9 { width:2.25rem; }
.w-full { width:100%; }
.z-10 { z-index:10; }
.z-20 { z-index:20; }
.z-30 { z-index:30; }
.z-50 { z-index:50; }

/* ===== sm: (640px+) ===== */
@media (min-width: 640px) {
.sm\:block { display:block; }
.sm\:col-span-2 { grid-column:span 2 / span 2; }
.sm\:flex-row { flex-direction:row; }
.sm\:gap-10 { gap:2.5rem; }
.sm\:gap-8 { gap:2rem; }
.sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sm\:h-12 { height:3rem; }
.sm\:h-16 { height:4rem; }
.sm\:h-20 { height:5rem; }
.sm\:max-w-xs { max-width:20rem; }
.sm\:mb-12 { margin-bottom:3rem; }
.sm\:mb-14 { margin-bottom:3.5rem; }
.sm\:mb-20 { margin-bottom:5rem; }
.sm\:mb-6 { margin-bottom:1.5rem; }
.sm\:mt-20 { margin-top:5rem; }
.sm\:p-10 { padding:2.5rem; }
.sm\:p-8 { padding:2rem; }
.sm\:pb-10 { padding-bottom:2.5rem; }
.sm\:pb-20 { padding-bottom:5rem; }
.sm\:pt-16 { padding-top:4rem; }
.sm\:px-6 { padding-left:1.5rem;padding-right:1.5rem; }
.sm\:py-20 { padding-top:5rem;padding-bottom:5rem; }
.sm\:text-2xl { font-size:1.5rem;line-height:2rem; }
.sm\:text-3xl { font-size:1.875rem;line-height:2.25rem; }
.sm\:text-4xl { font-size:2.25rem;line-height:2.5rem; }
.sm\:text-5xl { font-size:3rem;line-height:1; }
.sm\:text-base { font-size:1rem;line-height:1.5rem; }
.sm\:text-lg { font-size:1.125rem;line-height:1.75rem; }
.sm\:text-sm { font-size:0.875rem;line-height:1.25rem; }
.sm\:text-xl { font-size:1.25rem;line-height:1.75rem; }
.sm\:w-12 { width:3rem; }
.sm\:w-16 { width:4rem; }
.sm\:w-20 { width:5rem; }
.sm\:w-auto { width:auto; }
}


/* ===== md: (768px+) ===== */
@media (min-width: 768px) {
.md\:block { display:block; }
.md\:col-span-1 { grid-column:span 1 / span 1; }
.md\:col-span-2 { grid-column:span 2 / span 2; }
.md\:flex { display:flex; }
.md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.md\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.md\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.md\:p-10 { padding:2.5rem; }
.md\:p-16 { padding:4rem; }
.md\:p-8 { padding:2rem; }
.md\:text-3xl { font-size:1.875rem;line-height:2.25rem; }
.md\:text-5xl { font-size:3rem;line-height:1; }
}


/* ===== lg: (1024px+) ===== */
@media (min-width: 1024px) {
.lg\:grid-cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.lg\:px-8 { padding-left:2rem;padding-right:2rem; }
}


/* ===== xl: (1280px+) ===== */
@media (min-width: 1280px) {

}


/* ===== Shared structural components (identical across all tools) ===== */
.glass-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dark .glass-nav { background: rgba(15, 23, 42, 0.9); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.spec-table-wrap { overflow-x: auto; border-radius: 1rem; border: 1px solid #e2e8f0; -webkit-overflow-scrolling: touch; }
.dark .spec-table-wrap { border-color: #334155; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.spec-table td { padding: 0.75rem 1rem; border-top: 1px solid #e2e8f0; color: #475569; }
.dark .spec-table td { border-top-color: #334155; color: #cbd5e1; }
.spec-table tbody tr:hover { background: #f8fafc; }
.dark .spec-table tbody tr:hover { background: rgba(30,41,59,0.6); }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.inline-alert-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.dark .inline-alert-warn { background: rgba(120,53,15,0.2); border-color: #92400e; color: #fcd34d; }
.inline-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.dark .inline-alert-error { background: rgba(127,29,29,0.2); border-color: #991b1b; color: #fca5a5; }
.marker\:text-brand-500::marker { color: #3b82f6; }
.marker\:text-excel-600::marker { color: #16a34a; }

/* NOTE: .callout-box, .callout-box-title, .spec-table th, #uploadArea.drag-active,
   and .inline-alert (base, without excel's extra margin) are intentionally NOT here.
   Each tool uses its own brand accent color for these (blue/orange/red/green), so
   they stay in a small per-page <style> block - see the top of each tool's <head>. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}