/* ============================================================================
 * TrailCoach — styles.css (V12)
 * CSS maison statique : remplace ENTIEREMENT le CDN Tailwind Play (plus aucune
 * generation de CSS au runtime). Quatre couches, dans l'ordre :
 *   1. tokens (:root)                — palette sombre, rayons, espacements, typo ;
 *   2. preflight                     — reset equivalent Tailwind (+ forms) ;
 *   3. composants & customs          — icones, safe-areas, chat, skeletons, polish ;
 *   4. utilitaires (generes)         — chaque classe reellement utilisee par
 *      index.html/app.js, iso-Tailwind (theme V11), cf target/gen-css.js.
 * ========================================================================== */

/* ===== 1. DESIGN TOKENS ===== */
:root {
  /* palette (theme sombre Material-like V11) */
  --tc-background: #111319;
  --tc-surface: #111319;
  --tc-surface-container-lowest: #0b0e13;
  --tc-surface-container-low: #191c21;
  --tc-surface-container: #1d2025;
  --tc-surface-container-high: #272a30;
  --tc-surface-container-highest: #32353a;
  --tc-surface-variant: #32353a;
  --tc-on-background: #e1e2e9;
  --tc-on-surface: #e1e2e9;
  --tc-on-surface-variant: #e1bfb5;
  --tc-primary: #ffb59d;                /* orange doux (textes accent) */
  --tc-primary-container: #ff6b35;      /* orange vif (actions) */
  --tc-on-primary-container: #5f1900;
  --tc-secondary: #4de082;              /* vert (succes / recuperation) */
  --tc-secondary-container: #00b55d;
  --tc-tertiary: #ffb3b0;
  --tc-tertiary-container: #f56f6f;     /* rouge doux */
  --tc-error: #ffb4ab;
  --tc-error-container: #93000a;
  --tc-on-error-container: #ffdad6;
  --tc-outline: #a98a80;
  --tc-outline-variant: #594139;
  --tc-warn: #ffc966;                   /* jaune confiance moyenne */
  /* rayons */
  --tc-radius: 0.25rem;
  --tc-radius-lg: 0.5rem;
  --tc-radius-xl: 0.75rem;
  --tc-radius-full: 9999px;
  /* espacements nommes */
  --tc-space-xs: 4px;
  --tc-space-sm: 8px;
  --tc-space-md: 16px;
  --tc-space-lg: 24px;
  --tc-space-xl: 32px;
  --tc-margin-mobile: 16px;
  --tc-margin-desktop: 40px;
  /* typo */
  --tc-font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===== 2. PREFLIGHT (reset equivalent Tailwind v3 + forms, condense) ===== */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--tc-font-sans);
  -webkit-tap-highlight-color: transparent;
}
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p, blockquote, figure, dl, dd, hr { margin: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: var(--tc-font-mono); font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea {
  font-family: inherit; font-size: 100%; font-weight: inherit;
  line-height: inherit; color: inherit; margin: 0; padding: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='submit'], [type='reset'] {
  -webkit-appearance: button; background-color: transparent; background-image: none;
}
button, [role='button'] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }
/* equivalents @tailwindcss/forms utilises par l'app */
input, textarea, select { appearance: none; -webkit-appearance: none; }
input::placeholder, textarea::placeholder { opacity: 1; color: rgba(225, 191, 181, 0.5); }
input:focus, textarea:focus, select:focus { outline: none; } /* le focus se lit sur la bordure (focus:border-*) */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== 3a. CUSTOMS (migres depuis le <style> inline de index.html) ===== */
body { background-color: var(--tc-background); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* ---- Safe-areas iOS/Android (PWA standalone, viewport-fit=cover) ----
   La tab bar grandit de l'inset bas (pb-safe pose deja le padding interieur),
   les headers fixes/sticky descendent sous l'encoche, et les <main> sous
   header fixe compensent (pt-24 = 6rem, pt-20 = 5rem). Sans encoche, tous
   les env() valent 0 : aucun effet. */
#tabbar { height: calc(5rem + env(safe-area-inset-bottom, 0px)); }
#chat-fab { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
#app header.fixed {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(4rem + env(safe-area-inset-top, 0px));
}
#app header.sticky { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
#app header.pt-lg { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
#app main.pt-24 { padding-top: calc(6rem + env(safe-area-inset-top, 0px)); }
#app main.pt-20 { padding-top: calc(5rem + env(safe-area-inset-top, 0px)); }

/* Carte d'installation PWA (Profil) : le slot vide ne cree pas de trou dans le flex gap */
#pwa-install-slot:empty { display: none; }

/* Subtle grid background for cards (maquette aujourd_hui) */
.card-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Radial halo (maquette detail proposition) */
.bg-pattern {
  background-image: radial-gradient(circle at 50% -20%, rgba(255, 107, 53, 0.05) 0%, transparent 50%);
}

.divider { border-color: rgba(255, 255, 255, 0.1); }

/* Hide scrollbar for clean chat UI */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Typing indicator (chat) */
.typing-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--tc-on-surface-variant); opacity: .4; display: inline-block;
  animation: typingBlink 1.2s infinite both;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ===== 3b. POLISH (V12 — sans changement de structure) ===== */

/* Transition d'ecran douce : chaque rendu remplace le DOM de #app -> fade 150 ms.
   Opacite seule (pas de transform : les headers fixed internes resteraient bien
   ancres au viewport). Desactivee si l'utilisateur prefere moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  #app > * { animation: tc-screen-in 150ms ease-out; }
}
@keyframes tc-screen-in { from { opacity: 0; } to { opacity: 1; } }

/* Skeletons de chargement (dashboard / stats / activites) : os clairs + shimmer */
.tc-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--tc-radius-lg);
  background: rgba(255, 255, 255, 0.055);
}
.tc-skeleton--round { border-radius: var(--tc-radius-full); }
.tc-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: tc-shimmer 1.4s ease-in-out infinite;
}
@keyframes tc-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .tc-skeleton::after { animation: none; }
  #app > * { animation: none; }
}

/* Focus clavier accessible : anneau orange sur liens/boutons (jamais au simple clic),
   les inputs gardent leur lecture par bordure (focus:border-*). */
a:focus-visible, button:focus-visible, [role='button']:focus-visible {
  outline: 2px solid var(--tc-primary-container);
  outline-offset: 2px;
  border-radius: var(--tc-radius);
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Zones tactiles >= 44 px : extension de la zone de toucher des petits chips/boutons
   SANS changer leur rendu (pseudo-element superpose, aucune incidence de layout). */
.stats-period, .vol-metric, .quick-chip, .match-btn,
#period-btn, #lap-close, #chat-send,
#lthr-modal-close, #vma-modal-close, #cs-modal-close, #iv-modal-close { position: relative; }
.stats-period::before, .vol-metric::before, .quick-chip::before, .match-btn::before,
#period-btn::before, #lap-close::before, #chat-send::before,
#lthr-modal-close::before, #vma-modal-close::before, #cs-modal-close::before, #iv-modal-close::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}
#tabbar a { min-height: 44px; min-width: 44px; }

/* ---- Bulle d'aide reutilisable (.tc-tip) : petit "?" a cote d'un titre de carte
   qui revele methode / source / fourchette au survol (desktop), au focus clavier
   ou au tap (mobile : .is-open posee par app.js, qui recale aussi la bulle dans le
   viewport). Pur affichage : la tracabilite reste accessible, masquee par defaut. */
.tc-tip { position: relative; display: inline-flex; line-height: 0; }
.tc-tip__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--tc-radius-full);
  color: var(--tc-on-surface-variant); background: rgba(255, 255, 255, 0.06);
  cursor: pointer; transition: color 150ms, background-color 150ms;
}
.tc-tip__btn .material-symbols-outlined { font-size: 14px; line-height: 1; }
.tc-tip__btn:hover, .tc-tip.is-open .tc-tip__btn {
  color: var(--tc-primary-container); background: rgba(255, 107, 53, 0.12);
}
/* zone tactile >= 44 px sans incidence de layout (meme pattern que les chips) */
.tc-tip__btn::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.tc-tip__bubble {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: max-content; max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px; border-radius: var(--tc-radius-lg);
  background: var(--tc-surface-container-highest);
  color: var(--tc-on-surface);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--tc-font-sans);
  font-size: 12px; line-height: 17px; font-weight: 400;
  text-align: left; white-space: normal;
  text-transform: none; letter-spacing: normal;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 150ms;
  pointer-events: none;
}
.tc-tip:hover .tc-tip__bubble,
.tc-tip:focus-within .tc-tip__bubble,
.tc-tip.is-open .tc-tip__bubble {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.tc-tip__bubble strong { color: var(--tc-on-surface); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tc-tip__bubble { transition: none; } }

/* Scrollbars discrets (desktop) : fins, sans piste, coherents avec le theme sombre */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }

/* min-h-screen plus juste sur mobile (barre d'adresse iOS) — progressif, sans risque */
@supports (min-height: 100svh) {
  .min-h-screen { min-height: 100svh; }
}

/* ===== UTILITAIRES (generes depuis l'inventaire — iso-Tailwind, theme V11) ===== */
.block{display:block}
.flex{display:flex}
.grid{display:grid}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.hidden{display:none}
.-right-2{right:-0.5rem}
.-right-2\.5{right:-0.625rem}
.-top-1{top:-0.25rem}
.-top-1\.5{top:-0.375rem}
.absolute{position:absolute}
.bottom-\[80px\]{bottom:80px}
.bottom-0{bottom:0rem}
.bottom-24{bottom:6rem}
.fixed{position:fixed}
.inset-0{inset:0px}
.left-\[19px\]{left:19px}
.left-0{left:0rem}
.left-1\/2{left:50%}
.relative{position:relative}
.right-0{right:0rem}
.right-4{right:1rem}
.sticky{position:sticky}
.top-0{top:0rem}
.top-10{top:2.5rem}
.z-\[60\]{z-index:60}
.z-\[70\]{z-index:70}
.z-10{z-index:10}
.z-40{z-index:40}
.z-50{z-index:50}
.col-span-1{grid-column:span 1 / span 1}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-grow{flex-grow:1}
.flex-wrap{flex-wrap:wrap}
.gap-0\.5{gap:0.125rem}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-lg{gap:24px}
.gap-md{gap:16px}
.gap-sm{gap:8px}
.gap-x-md{column-gap:16px}
.gap-x-sm{column-gap:8px}
.gap-xl{gap:32px}
.gap-xs{gap:4px}
.gap-y-xs{row-gap:4px}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.items-baseline{align-items:baseline}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-start{align-items:flex-start}
.justify-around{justify-content:space-around}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.justify-start{justify-content:flex-start}
.shrink-0{flex-shrink:0}
.space-y-lg > :not([hidden]) ~ :not([hidden]){margin-top:24px}
.space-y-md > :not([hidden]) ~ :not([hidden]){margin-top:16px}
.space-y-sm > :not([hidden]) ~ :not([hidden]){margin-top:8px}
.space-y-xl > :not([hidden]) ~ :not([hidden]){margin-top:32px}
.h-\[120px\]{height:120px}
.h-\[3px\]{height:3px}
.h-\[70px\]{height:70px}
.h-1{height:0.25rem}
.h-10{height:2.5rem}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-2{height:0.5rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-44{height:11rem}
.h-48{height:12rem}
.h-56{height:14rem}
.h-64{height:16rem}
.h-7{height:1.75rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-auto{height:auto}
.h-full{height:100%}
.h-px{height:1px}
.max-h-\[88vh\]{max-height:88vh}
.max-w-\[85\%\]{max-width:85%}
.max-w-\[90\%\]{max-width:90%}
.max-w-2xl{max-width:42rem}
.max-w-7xl{max-width:80rem}
.max-w-md{max-width:28rem}
.min-h-\[160px\]{min-height:160px}
.min-h-\[20px\]{min-height:20px}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0px}
.w-1{width:0.25rem}
.w-10{width:2.5rem}
.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-3{width:0.75rem}
.w-32{width:8rem}
.w-5{width:1.25rem}
.w-7{width:1.75rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-full{width:100%}
.w-px{width:1px}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-lg{padding:24px}
.p-margin-mobile{padding:16px}
.p-md{padding:16px}
.p-sm{padding:8px}
.-mx-margin-mobile{margin-left:-16px;margin-right:-16px}
.mx-auto{margin-left:auto;margin-right:auto}
.my-xs{margin-top:4px;margin-bottom:4px}
.px-\[5px\]{padding-left:5px;padding-right:5px}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.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-lg{padding-left:24px;padding-right:24px}
.px-margin-mobile{padding-left:16px;padding-right:16px}
.px-md{padding-left:16px;padding-right:16px}
.px-sm{padding-left:8px;padding-right:8px}
.px-xs{padding-left:4px;padding-right:4px}
.py-\[1px\]{padding-top:1px;padding-bottom:1px}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-lg{padding-top:24px;padding-bottom:24px}
.py-sm{padding-top:8px;padding-bottom:8px}
.py-xl{padding-top:32px;padding-bottom:32px}
.py-xs{padding-top:4px;padding-bottom:4px}
.-mb-lg{margin-bottom:-24px}
.-ml-2{margin-left:-0.5rem}
.-ml-sm{margin-left:-8px}
.-mt-sm{margin-top:-8px}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-lg{margin-bottom:24px}
.mb-md{margin-bottom:16px}
.mb-sm{margin-bottom:8px}
.mb-xl{margin-bottom:32px}
.mb-xs{margin-bottom:4px}
.ml-2{margin-left:0.5rem}
.ml-sm{margin-left:8px}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-lg{margin-top:24px}
.mt-md{margin-top:16px}
.mt-sm{margin-top:8px}
.pb-\[110px\]{padding-bottom:110px}
.pb-\[190px\]{padding-bottom:190px}
.pb-\[96px\]{padding-bottom:96px}
.pb-1{padding-bottom:0.25rem}
.pb-32{padding-bottom:8rem}
.pb-lg{padding-bottom:24px}
.pb-md{padding-bottom:16px}
.pb-sm{padding-bottom:8px}
.pb-xs{padding-bottom:4px}
.pl-sm{padding-left:8px}
.pt-0\.5{padding-top:0.125rem}
.pt-1{padding-top:0.25rem}
.pt-20{padding-top:5rem}
.pt-24{padding-top:6rem}
.pt-32{padding-top:8rem}
.pt-40{padding-top:10rem}
.pt-lg{padding-top:24px}
.pt-md{padding-top:16px}
.pt-sm{padding-top:8px}
.font-body-lg{font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif}
.font-body-sm{font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif}
.font-data-point{font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace}
.font-display-lg{font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif}
.font-headline-lg{font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif}
.font-headline-lg-mobile{font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif}
.font-label-caps{font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace}
.font-title-md{font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif}
.text-\[0\.95em\]{font-size:0.95em}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.text-\[16px\]{font-size:16px}
.text-\[18px\]{font-size:18px}
.text-\[20px\]{font-size:20px}
.text-\[22px\]{font-size:22px}
.text-\[26px\]{font-size:26px}
.text-\[28px\]{font-size:28px}
.text-\[32px\]{font-size:32px}
.text-\[34px\]{font-size:34px}
.text-body-lg{font-size:16px;line-height:24px;font-weight:400}
.text-body-sm{font-size:14px;line-height:20px;font-weight:400}
.text-data-point{font-size:18px;line-height:24px;font-weight:600}
.text-display-lg{font-size:48px;line-height:56px;font-weight:800;letter-spacing:-0.02em}
.text-headline-lg{font-size:32px;line-height:40px;font-weight:700}
.text-headline-lg-mobile{font-size:24px;line-height:32px;font-weight:700}
.text-label-caps{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.05em}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-title-md{font-size:20px;line-height:28px;font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.leading-\[16px\]{line-height:16px}
.leading-\[40px\]{line-height:40px}
.leading-7{line-height:1.75rem}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wider{letter-spacing:0.05em}
.align-middle{vertical-align:middle}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.italic{font-style:italic}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uppercase{text-transform:uppercase}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-line{white-space:pre-line}
.bg-\[\#ffc966\]\/10{background-color:rgb(255 201 102 / 0.1)}
.bg-background{background-color:#111319}
.bg-background\/30{background-color:rgb(17 19 25 / 0.3)}
.bg-background\/50{background-color:rgb(17 19 25 / 0.5)}
.bg-background\/80{background-color:rgb(17 19 25 / 0.8)}
.bg-background\/90{background-color:rgb(17 19 25 / 0.9)}
.bg-black\/60{background-color:rgb(0 0 0 / 0.6)}
.bg-error{background-color:#ffb4ab}
.bg-error-container\/30{background-color:rgb(147 0 10 / 0.3)}
.bg-error-container\/40{background-color:rgb(147 0 10 / 0.4)}
.bg-on-surface-variant\/10{background-color:rgb(225 191 181 / 0.1)}
.bg-outline-variant\/50{background-color:rgb(89 65 57 / 0.5)}
.bg-primary-container{background-color:#ff6b35}
.bg-primary-container\/10{background-color:rgb(255 107 53 / 0.1)}
.bg-primary-container\/15{background-color:rgb(255 107 53 / 0.15)}
.bg-primary-container\/5{background-color:rgb(255 107 53 / 0.05)}
.bg-primary\/10{background-color:rgb(255 181 157 / 0.1)}
.bg-primary\/15{background-color:rgb(255 181 157 / 0.15)}
.bg-secondary{background-color:#4de082}
.bg-secondary-container{background-color:#00b55d}
.bg-secondary\/10{background-color:rgb(77 224 130 / 0.1)}
.bg-secondary\/60{background-color:rgb(77 224 130 / 0.6)}
.bg-surface{background-color:#111319}
.bg-surface-container{background-color:#1d2025}
.bg-surface-container-high{background-color:#272a30}
.bg-surface-container-high\/60{background-color:rgb(39 42 48 / 0.6)}
.bg-surface-container-highest{background-color:#32353a}
.bg-surface-container-low{background-color:#191c21}
.bg-surface-container\/95{background-color:rgb(29 32 37 / 0.95)}
.bg-surface-variant\/20{background-color:rgb(50 53 58 / 0.2)}
.bg-surface\/80{background-color:rgb(17 19 25 / 0.8)}
.bg-tertiary-container\/10{background-color:rgb(245 111 111 / 0.1)}
.bg-tertiary\/10{background-color:rgb(255 179 176 / 0.1)}
.bg-transparent{background-color:transparent}
.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}
.bg-white\/5{background-color:rgb(255 255 255 / 0.05)}
.placeholder-on-surface-variant\/40::placeholder{color:rgb(225 191 181 / 0.4)}
.placeholder-on-surface-variant\/50::placeholder{color:rgb(225 191 181 / 0.5)}
.text-\[\#ffc966\]{color:#ffc966}
.text-error{color:#ffb4ab}
.text-on-background{color:#e1e2e9}
.text-on-error{color:#690005}
.text-on-error-container{color:#ffdad6}
.text-on-primary-container{color:#5f1900}
.text-on-surface{color:#e1e2e9}
.text-on-surface-variant{color:#e1bfb5}
.text-on-surface-variant\/60{color:rgb(225 191 181 / 0.6)}
.text-on-surface-variant\/70{color:rgb(225 191 181 / 0.7)}
.text-primary{color:#ffb59d}
.text-primary-container{color:#ff6b35}
.text-secondary{color:#4de082}
.text-tertiary{color:#ffb3b0}
.text-tertiary-container{color:#f56f6f}
.border{border-width:1px}
.border-2{border-width:2px}
.border-collapse{border-collapse:collapse}
.border-none{border-style:none}
.border-b{border-bottom-width:1px}
.border-l-4{border-left-width:4px}
.border-t{border-top-width:1px}
.border-\[\#ffc966\]\/30{border-color:rgb(255 201 102 / 0.3)}
.border-error\/20{border-color:rgb(255 180 171 / 0.2)}
.border-error\/30{border-color:rgb(255 180 171 / 0.3)}
.border-error\/40{border-color:rgb(255 180 171 / 0.4)}
.border-on-surface-variant\/30{border-color:rgb(225 191 181 / 0.3)}
.border-outline{border-color:#a98a80}
.border-outline-variant\/20{border-color:rgb(89 65 57 / 0.2)}
.border-primary{border-color:#ffb59d}
.border-primary-container{border-color:#ff6b35}
.border-primary-container\/20{border-color:rgb(255 107 53 / 0.2)}
.border-primary-container\/30{border-color:rgb(255 107 53 / 0.3)}
.border-primary-container\/40{border-color:rgb(255 107 53 / 0.4)}
.border-primary\/20{border-color:rgb(255 181 157 / 0.2)}
.border-primary\/30{border-color:rgb(255 181 157 / 0.3)}
.border-secondary\/20{border-color:rgb(77 224 130 / 0.2)}
.border-secondary\/30{border-color:rgb(77 224 130 / 0.3)}
.border-surface-container-highest\/30{border-color:rgb(50 53 58 / 0.3)}
.border-surface-variant{border-color:#32353a}
.border-surface-variant\/10{border-color:rgb(50 53 58 / 0.1)}
.border-surface-variant\/30{border-color:rgb(50 53 58 / 0.3)}
.border-tertiary\/30{border-color:rgb(255 179 176 / 0.3)}
.border-white\/10{border-color:rgb(255 255 255 / 0.1)}
.border-white\/5{border-color:rgb(255 255 255 / 0.05)}
.border-l-primary-container{border-left-color:#ff6b35}
.border-l-primary-container\/60{border-left-color:rgb(255 107 53 / 0.6)}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:0.5rem}
.rounded-md{border-radius:0.375rem}
.rounded-sm{border-radius:0.125rem}
.rounded-xl{border-radius:0.75rem}
.rounded-r-lg{border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem}
.rounded-r-xl{border-top-right-radius:0.75rem;border-bottom-right-radius:0.75rem}
.rounded-t-xl{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem}
.rounded-tl-none{border-top-left-radius:0px}
.rounded-tr-none{border-top-right-radius:0px}
.opacity-40{opacity:0.4}
.opacity-50{opacity:0.5}
.opacity-60{opacity:0.6}
.opacity-70{opacity:0.7}
.shadow-\[0_0_8px_rgba\(77\,224\,130\,0\.6\)\]{box-shadow:0 0 8px rgba(77,224,130,0.6)}
.shadow-\[0_4px_12px_rgba\(255\,107\,53\,0\.3\)\]{box-shadow:0 4px 12px rgba(255,107,53,0.3)}
.shadow-\[0_4px_20px_rgba\(0\,0\,0\,0\.5\)\]{box-shadow:0 4px 20px rgba(0,0,0,0.5)}
.shadow-\[0_4px_20px_rgba\(255\,107\,53\,0\.2\)\]{box-shadow:0 4px 20px rgba(255,107,53,0.2)}
.shadow-\[0_6px_24px_rgba\(255\,107\,53\,0\.4\)\]{box-shadow:0 6px 24px rgba(255,107,53,0.4)}
.shadow-\[0_8px_40px_rgba\(0\,0\,0\,0\.6\)\]{box-shadow:0 8px 40px rgba(0,0,0,0.6)}
.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-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.animate-spin{animation:tc-spin 1s linear infinite}
.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-opacity{transition-property:opacity;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}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.-translate-x-1\/2{transform:translateX(-50%)}
.cursor-pointer{cursor:pointer}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.hover\:underline:hover{text-decoration-line:underline}
.hover\:bg-primary-container\/10:hover{background-color:rgb(255 107 53 / 0.1)}
.hover\:bg-primary-container\/90:hover{background-color:rgb(255 107 53 / 0.9)}
.hover\:bg-surface-container:hover{background-color:#1d2025}
.hover\:bg-surface-container-high:hover{background-color:#272a30}
.hover\:bg-surface-container-high\/60:hover{background-color:rgb(39 42 48 / 0.6)}
.hover\:bg-surface-container-highest:hover{background-color:#32353a}
.hover\:bg-surface-container\/50:hover{background-color:rgb(29 32 37 / 0.5)}
.hover\:bg-surface-variant\/20:hover{background-color:rgb(50 53 58 / 0.2)}
.hover\:bg-surface-variant\/30:hover{background-color:rgb(50 53 58 / 0.3)}
.hover\:bg-surface-variant\/50:hover{background-color:rgb(50 53 58 / 0.5)}
.hover\:text-error:hover{color:#ffb4ab}
.hover\:text-on-surface:hover{color:#e1e2e9}
.hover\:text-primary:hover{color:#ffb59d}
.hover\:text-primary-fixed-dim:hover{color:#ffb59d}
.hover\:border-error\/30:hover{border-color:rgb(255 180 171 / 0.3)}
.hover\:opacity-90:hover{opacity:0.9}
.hover\:brightness-110:hover{filter:brightness(1.1)}
.group:hover .group-hover\:text-primary{color:#ffb59d}
.focus\:border-primary-container:focus{border-color:#ff6b35}
.focus\:ring-0:focus{box-shadow:none}
.active\:scale-\[0\.99\]:active{transform:scale(0.99)}
.active\:scale-90:active{transform:scale(0.9)}
.active\:scale-95:active{transform:scale(0.95)}
.disabled\:opacity-40:disabled{opacity:0.4}
.disabled\:opacity-50:disabled{opacity:0.5}
.last\:border-b-0:last-child{border-bottom-width:0px}
@media (min-width:640px){
  .sm\:block{display:block}
  .sm\:inline{display:inline}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:items-center{align-items:center}
  .sm\:max-w-md{max-width:28rem}
  .sm\:rounded-xl{border-radius:0.75rem}
}
@media (min-width:768px){
  .md\:col-span-2{grid-column:span 2 / span 2}
  .md\:gap-md{gap:16px}
  .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\:px-margin-desktop{padding-left:40px;padding-right:40px}
}
@keyframes tc-spin{to{transform:rotate(360deg)}}