/* Orbio Component Utility Classes
   Replaces the most common inline style="" patterns.
   Include via <link rel="stylesheet" href="/orbio-components.css"> in each HTML page.
   Works with both dark and light themes (uses CSS custom properties). */

/* === DISPLAY === */
.hidden { display: none; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

/* === GAP === */
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* === PADDING === */
.p-0 { padding: 0; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.pt-40 { padding-top: 40px; }
.pb-40 { padding-bottom: 40px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-32 { padding-top: 32px; padding-bottom: 32px; }

/* === MARGIN === */
.m-0 { margin: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-24 { margin-left: 24px; margin-right: 24px; }

/* === TEXT COLOR === */
.text-primary { color: var(--pu); }
.text-primary-hi { color: var(--pu-hi); }
.text-teal { color: var(--te); }
.text-success { color: var(--gn); }
.text-warning { color: var(--am); }
.text-danger { color: var(--rd); }
.text-default { color: var(--tx); }
.text-secondary { color: var(--tx2); }
.text-muted { color: var(--tx3); }
.text-faint { color: var(--tx4); }
.text-dim { color: var(--tx5); }
.tx5 { color: var(--tx5); }
.bg-primary { background: var(--pu); }
.bg-teal { background: var(--te); }
.bg-success { background: var(--gn); }
.bg-warning { background: var(--am); }
.bg-danger { background: var(--rd); }

/* === TYPOGRAPHY === */
.font-heading { font-family: 'Syne', sans-serif; }
.font-mono { font-family: 'Geist Mono', monospace; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 13px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 18px; }
.text-2xl { font-size: 20px; }
.text-5xl { font-size: 48px; line-height: 1; }
.text-3xl { font-size: 24px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.leading-tight { line-height: 1.3; }
.leading-normal { line-height: 1.5; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap { white-space: nowrap; }
.no-underline { text-decoration: none; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.leading-relaxed { line-height: 1.75; }

/* === WIDTH / HEIGHT === */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.w-28 { width: 28px; }
.h-28 { height: 28px; }
.w-32 { width: 32px; }
.h-32 { height: 32px; }
.w-40 { width: 40px; }
.h-40 { height: 40px; }
.w-56 { width: 56px; }
.h-56 { height: 56px; }
.max-w-content { max-width: 1160px; }

/* === BORDERS === */
.border-b { border-bottom: 1px solid var(--bd); }
.border-b2 { border-bottom: 1px solid var(--bd2); }
.border-t { border-top: 1px solid var(--bd); }
.border-r { border-right: 1px solid var(--bd); }
.rounded { border-radius: var(--r); }
.rounded-md { border-radius: var(--r2); }
.rounded-lg { border-radius: var(--r3); }
.rounded-full { border-radius: 50%; }
.border-l { border-left: 1px solid var(--bd); }
.border-l2 { border-left: 2px solid var(--bd2); }
.border-t2 { border-top: 2px solid var(--bd2); }

/* === BACKGROUND === */
.bg-surface { background: var(--sf); }
.bg-surface2 { background: var(--sf2); }
.bg-primary-dim { background: var(--pu-d); }
.bg-success-dim { background: var(--gn-d); }
.bg-warning-dim { background: var(--am-d); }
.bg-danger-dim { background: var(--rd-d); }
.bg-teal-dim { background: var(--te-d); }
.bg-white { background: #fff; }
.bg-black { background: #000; }

/* === OVERFLOW === */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

/* === CURSOR === */
.cursor-pointer { cursor: pointer; }

/* === POSITION === */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-100 { z-index: 100; }
.z-200 { z-index: 200; }

/* === OPACITY === */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* === SCROLLBAR === */
.thin-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--sf4); border-radius: 99px; }

/* === ANIMATION === */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.3s ease both; }
.d1 { animation-delay: 0.04s; }
.d2 { animation-delay: 0.08s; }
.d3 { animation-delay: 0.12s; }
.d4 { animation-delay: 0.16s; }
.d5 { animation-delay: 0.20s; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* === OTHER === */
.backdrop-blur { backdrop-filter: blur(12px); }
.accent-primary { accent-color: var(--pu); }
.accent-warning { accent-color: var(--am); }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.whitespace-pre { white-space: pre; }

/* === LINE HEIGHT === */
.leading-none { line-height: 1; }
.lh-15 { line-height: 1.5; }

/* === FONT SIZE (px) === */
.fs-10 { font-size: 10.5px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12.5px; }
.fs-13 { font-size: 13px; }
.fs-22 { font-size: 22px; }

/* === LETTER SPACING === */
.ls-8 { letter-spacing: 8px; }

/* === BORDERS === */
.bn { border: none; }
.border-top { border-top: 1px solid var(--bd); }
.border-gn-b { border: 2px solid var(--gn-b); }

/* === STATUS DOTS === */
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-gn { background: var(--gn); }
.dot-am { background: var(--am); }
.dot-pu { background: var(--pu); }
.dot-rd { background: var(--rd); }

/* === FLEX OVERFLOW FIX === */
.minw0 { min-width: 0; }

/* === Z-INDEX === */
.z-1 { z-index: 1; }

/* === FULL HEIGHT === */
.vh-full { height: 100vh; overflow: hidden; }

/* === ACCENT COLOR === */
.accent-pu { accent-color: var(--pu); }
.accent-am { accent-color: var(--am); }

/* === LINK HOVER === */
.am-hi { color: var(--am-hi); }

/* === DYNAMIC STYLE SUPPORT === */
/* Elements with data-dyn-width, data-dyn-height get styles applied by applyDynamicStyles() */
[data-dyn-width] { transition: width 0.3s ease; }
[data-dyn-height] { transition: height 0.3s ease; }

/* === PROGRESS BARS === */
.progress-track { height: 24px; background: var(--sf3); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
.progress-bar { height: 20px; background: var(--sf3); border-radius: 4px; overflow: hidden; }
.progress-bar .fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

/* === STATUS INDICATORS === */
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* === COMMON CARD PATTERNS === */
.card-compact { padding: 14px 20px; }
.stat-card { text-align: center; }
.stat-value { font-size: 22px; font-weight: 700; }

/* === FORM ELEMENTS === */
.input-auto { width: auto; }
.checkbox-accent { accent-color: var(--pu); width: 16px; height: 16px; cursor: pointer; }

/* === TABLE === */
.table-container { padding: 0; }

/* === SPACING === */
.pt-24 { padding-top: 24px; }
.pt-10 { padding-top: 10px; }
.pb-10 { padding-bottom: 10px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.mb-2 { margin-bottom: 2px; }
.mb-10 { margin-bottom: 10px; }
.mt-4 { margin-top: 4px; }

/* === BORDER COMBOS === */
.border-b-none { border-bottom: none; }
.border-pu { border-color: var(--pu); }
.border-bd2 { border-color: var(--bd2); }
.bg-pu-d { background: var(--pu-d); }

/* === KANBAN / FLEX LAYOUTS === */
.flex-col-gap { display: flex; flex-direction: column; gap: 12px; }

/* === ACCENT COLORS BY DATA === */
.accent-pu-44 { border: 1px solid rgba(124,111,255,0.44); }
.accent-pu-22 { border: 1px solid rgba(124,111,255,0.22); }

/* === ADDITIONAL SPACING === */
.p-14 { padding: 14px; }
.px-14 { padding-left: 14px; padding-right: 14px; }
.py-14 { padding-top: 14px; padding-bottom: 14px; }
.p-20 { padding: 20px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.px-2 { padding-left: 2px; padding-right: 2px; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.m-4 { margin: 4px; }
.m-8 { margin: 8px; }
.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mt-4 { margin-top: 4px; }
.mt-10 { margin-top: 10px; }
.mb-14 { margin-bottom: 14px; }
.mx-8 { margin-left: 8px; margin-right: 8px; }

/* === WIDTHS === */
.w-8 { width: 8px; }
.w-10 { width: 10px; }
.w-16 { width: 16px; }
.w-20 { width: 20px; }
.w-24 { width: 24px; }
.w-48 { width: 48px; }
.w-60 { width: 60px; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-120 { width: 120px; }
.w-auto { width: auto; }
.min-w-40 { min-width: 40px; }
.min-w-80 { min-width: 80px; }
.min-w-120 { min-width: 120px; }

/* === HEIGHTS === */
.h-8 { height: 8px; }
.h-10 { height: 10px; }
.h-16 { height: 16px; }
.h-20 { height: 20px; }
.h-24 { height: 24px; }
.h-32 { height: 32px; }
.h-40 { height: 40px; }
.h-48 { height: 48px; }
.min-h-400 { min-height: 400px; }

/* === BORDER RADIUS === */
.r-4 { border-radius: 4px; }
.r-6 { border-radius: 6px; }
.r-8 { border-radius: 8px; }
.r-12 { border-radius: 12px; }

/* === LINE HEIGHT === */
.lh-1 { line-height: 1; }
.lh-12 { line-height: 1.2; }

/* === OVERFLOW === */
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }

/* === TRANSITIONS === */
.transition-all { transition: all 0.13s ease; }
.transition-colors { transition: color 0.15s, background 0.15s; }

/* === SHADOWS === */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

/* === FONT SIZES (missing from fs-* set) === */
.fs-9 { font-size: 9px; }
.fs-20 { font-size: 20px; }

/* === COLORS === */
.text-dim { color: #666; }
.text-faint-dk { color: #999; }

/* === COMPOUND PADDING === */
.py-10-12 { padding: 10px 12px; }
.p-10-12 { padding: 10px 12px; }
.p-14-20 { padding: 14px 20px; }
.py-10-px-20-pb-16 { padding: 10px 20px 16px; }
.p-0-20-16 { padding: 0 20px 16px; }
.p-6-10 { padding: 6px 10px; }
.p-10-18 { padding: 10px 18px; }

/* === MISSING WIDTHS === */
.w-30 { width: 30px; }
.w-40 { width: 40px; }
.w-60 { width: 60px; }
.w-80 { width: 80px; }
.w-100 { width: 100px; }

/* === MISSING HEIGHTS === */
.h-4 { height: 4px; }
.h-6 { height: 6px; }

/* === MISSING MARGINS === */
.mt-2 { margin-top: 2px; }
.mr-6 { margin-right: 6px; }

/* === TEXT ALIGN === */
.text-right { text-align: right; }

/* === TABLE === */
.w-full-collapse { width: 100%; border-collapse: collapse; }

/* === SPINNER === */
.spinner-display { display: inline-block; }

/* === PROGRESS BAR === */
.progress-track { height: 6px; background: var(--sf3); border-radius: 3px; }
.progress-fill { height: 6px; background: var(--pu); border-radius: 3px; }

/* === BUTTONS === */
.btn-submit { background: #7C6FFF; border: none; color: #fff; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }

/* === TAG BADGE === */
.tag-badge { background: var(--sf); padding: 1px 5px; border-radius: 3px; }

/* === MONO FIELD === */
.mono-field { width: 100px; font-family: Geist Mono, monospace; }

/* === ANIMATION DELAY === */
.delay-05 { animation-delay: .05s; }
.delay-10 { animation-delay: .1s; }
.delay-15 { animation-delay: .15s; }
.delay-20 { animation-delay: .2s; }
.delay-25 { animation-delay: .25s; }
.delay-30 { animation-delay: .3s; }
.delay-35 { animation-delay: .35s; }

/* === VERTICAL ALIGN === */
.items-center { align-items: center; }

/* === MORE PADDING === */
.py-10-0 { padding: 10px 0; }
.p-6-10-r6 { padding: 6px 10px; border-radius: 6px; }
.p-8-16 { padding: 8px 16px; }
.min-h-300 { min-height: 300px; }

/* === INLINE COLORS === */
.text-dk666 { color: #666; }
.text-dk999 { color: #999; }

/* === PREVIEW === */
.preview-dot-color-1 { background: #ff5f56; }
.preview-dot-color-2 { background: #ffbd2e; }
.preview-dot-color-3 { background: #27c93f; }
.border-top-eee { border-top: 1px solid #eee; }

/* === GRIDS === */
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; }
.grid-3-fixed { display: grid; grid-template-columns: repeat(3, 1fr); }

/* === MORE PADDING/MARGIN === */
.p-6-10 { padding: 6px 10px; }
.p-6-10-r6 { padding: 6px 10px; border-radius: 6px; }
.py-14-20 { padding: 14px 20px; }
.p-12-20 { padding: 12px 20px; }
.p-12-24 { padding: 12px 24px; }
.p-16-20 { padding: 16px 20px; }
.p-20-24 { padding: 20px 24px; }
.p-20-32 { padding: 20px 32px; }
.p-24-32 { padding: 24px 32px; }
.p-8-20 { padding: 8px 20px; }
.p-10-16 { padding: 10px 16px; }
.px-4 { padding-left: 4px; padding-right: 4px; }
.px-6 { padding-left: 6px; padding-right: 6px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-32 { padding-left: 32px; padding-right: 32px; }
.py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-6 { padding-top: 6px; padding-bottom: 6px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-2 { padding-top: 2px; padding-bottom: 2px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.ml-4 { margin-left: 4px; }
.mt-6 { margin-top: 6px; }
.mt-16 { margin-top: 16px; }
.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }

/* === WIDTHS/HEIGHTS === */
.w-3 { width: 3px; }
.w-5 { width: 5px; }
.w-12 { width: 12px; }
.w-14 { width: 14px; }
.w-22 { width: 22px; }
.w-36 { width: 36px; }
.w-44 { width: 44px; }
.w-52 { width: 52px; }
.w-72 { width: 72px; }
.w-96 { width: 96px; }
.w-150 { width: 150px; }
.w-200 { width: 200px; }
.w-300 { width: 300px; }
.w-400 { width: 400px; }
.max-w-100 { max-width: 100px; }
.max-w-200 { max-width: 200px; }
.max-w-300 { max-width: 300px; }
.h-2 { height: 2px; }
.h-3 { height: 3px; }
.h-5 { height: 5px; }
.h-12 { height: 12px; }
.h-14 { height: 14px; }
.h-18 { height: 18px; }
.h-22 { height: 22px; }
.h-36 { height: 36px; }
.h-44 { height: 44px; }
.h-52 { height: 52px; }
.h-72 { height: 72px; }
.h-200 { height: 200px; }
.h-300 { height: 300px; }
.h-400 { height: 400px; }
.min-h-200 { min-height: 200px; }
.min-h-500 { min-height: 500px; }

/* === FONTS === */
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-24 { font-size: 24px; }
.fs-32 { font-size: 32px; }
.fs-40 { font-size: 40px; }
.fs-48 { font-size: 48px; }

/* === COLORS === */
.text-pu { color: var(--pu); }
.text-gn { color: var(--gn); }
.text-rd { color: var(--rd); }
.text-am { color: var(--am); }
.text-te { color: var(--te); }
.text-bl { color: var(--bl); }
.bg-pu { background: var(--pu); }
.bg-gn { background: var(--gn); }
.bg-rd { background: var(--rd); }
.bg-am { background: var(--am); }
.bg-te { background: var(--te); }
.bg-bl { background: var(--bl); }

/* === BORDERS === */
.border-1 { border: 1px solid var(--bd); }
.border-2 { border: 2px solid var(--bd); }
.border-b-2 { border-bottom: 2px solid var(--bd); }
.border-t-2 { border-top: 2px solid var(--bd); }
.border-r-2 { border-right: 2px solid var(--bd); }
.border-0 { border: none; }

/* === POSITION === */
.top-0 { top: 0; }
.bottom-auto { bottom: auto; }

/* === TRANSFORM === */
.rotate-180 { transform: rotate(180deg); }

/* === WRITING MODE === */
.writing-vertical { writing-mode: vertical-rl; }

/* === GRID ROW === */
.grid-row-1-6 { grid-row: 1 / 6; }

/* === SVG === */
.stroke-dash { transition: stroke-dashoffset 1.5s ease; }

/* === CANVAS === */
.canvas-full { width: 100%; height: 100%; }

/* === SCROLLBAR === */
.scrollbar-thin { scrollbar-width: thin; }

/* === COMPOUND PATTERNS === */
.tag-badge-sf { background: var(--sf); padding: 1px 5px; border-radius: 3px; }
.fs-10-dk999 { font-size: 10px; color: #999; }
.fs-10-dk666 { font-size: 10px; color: #666; }
.p-6-10-dk666 { padding: 6px 10px; border-radius: 6px; color: #666; }
.w-40-tr { width: 40px; text-align: right; }
.spinner { display: inline-block; border-top-color: var(--pu); }
.flex-gap8 { display: flex; gap: 8px; }
.flex-center-gap8-pt24 { display: flex; align-items: center; gap: 8px; padding-top: 24px; }
.border-bd2 { border-color: var(--bd2); }
.w-30 { width: 30px; }
.h-4 { height: 4px; }
.mt-8-pt8-bt { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bd); }
.p-7-10-sf2-bd-r8 { padding: 7px 10px; background: var(--sf2); border: 1px solid var(--bd); border-radius: 8px; transition: all 0.13s; }
.max-h-100-cn { max-height: 100%; cursor: none; }
.max-h-300-oya { max-height: 300px; overflow-y: auto; }
.p-6-0-bb-bd { padding: 6px 0; border-bottom: 1px solid var(--bd); }
.max-w-400-m8a { max-width: 400px; margin: 8px auto; }
.p-4-8-fs11 { padding: 4px 8px; font-size: 11px; }
.p-12-16-bt-bd { padding: 12px 16px; border-top: 1px solid var(--bd); }
.min-h-120 { min-height: 120px; }
.p-10-18 { padding: 10px 18px; }
.w-32 { width: 32px; }
.w-48 { width: 48px; }
.w-52 { width: 52px; }
.w-72 { width: 72px; }
.w-96 { width: 96px; }
.w-250 { width: 250px; }
.w-500 { width: 500px; }
.h-5 { height: 5px; }
.h-18 { height: 18px; }
.h-22 { height: 22px; }
.h-36 { height: 36px; }
.h-52 { height: 52px; }
.h-72 { height: 72px; }
.h-250 { height: 250px; }
.min-h-60 { min-height: 60px; }
.p-8-16 { padding: 8px 16px; }
.py-12-0 { padding: 12px 0; }
.p-4-12 { padding: 4px 12px; }
.py-20-32 { padding: 20px 32px; }
.p-12-16 { padding: 12px 16px; }
.mb-1-0 { margin-bottom: 1px; }
.mb-20 { margin-bottom: 20px; }
.mt-32 { margin-top: 32px; }
.ml-auto-0 { margin-left: auto; }
.pt-8 { padding-top: 8px; }
.pt-12 { padding-top: 12px; }
.pt-24 { padding-top: 24px; }
.pb-4 { padding-bottom: 4px; }
.pb-8 { padding-bottom: 8px; }
.pb-12 { padding-bottom: 12px; }
.pb-16 { padding-bottom: 16px; }
.pb-20 { padding-bottom: 20px; }
.pb-24 { padding-bottom: 24px; }
.pb-32 { padding-bottom: 32px; }
.pb-40 { padding-bottom: 40px; }

/* === GRID TEMPLATES === */
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; }
.grid-col-1-3 { grid-column: 1 / 3; }

/* === FLEX === */
.flex-1-min0 { flex: 1; min-width: 0; }

/* === DISPLAY === */
.inline-block { display: inline-block; }
.grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }

/* === COLORS === */
.text-tx1 { color: var(--tx1); }
.text-f0f0f5 { color: #F0F0F5; }
.text-9090a8 { color: #9090A8; }
.text-606078 { color: #606078; }
.bg-1a1a2e { background: #1A1A2E; }
.bg-pu-d { background: var(--pu-d); }
.bg-transparent { background: transparent; }
.tx3 { color: var(--tx3); }
.tx4 { color: var(--tx4); }

/* === GRADIENT === */
.bg-pu-gradient { background: linear-gradient(to top, var(--pu), var(--pu-lo)); }

/* === MISCELLANEOUS === */
.w-90 { width: 90px; }
.h-8 { height: 8px; }
.h-24 { height: 24px; }
.h-32 { height: 32px; }
.h-160 { height: 160px; }
.w-24 { width: 24px; }
.w-60 { width: 60px; }
.min-w-0 { min-width: 0; }
.min-w-50 { min-width: 50px; }
.min-w-180 { min-width: 180px; }
.r-3 { border-radius: 3px; }
.r-10 { border-radius: 10px; }
.m-0 { margin: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.ml-12 { margin-left: 12px; }
.m-12-0-20 { margin: 12px 0 20px; }
.p-0-2-8-2 { padding: 0 2px 8px 2px; }
.p-10-12 { padding: 10px 12px; }
.p-8 { padding: 8px; }
.p-13 { padding: 13px; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-24 { font-size: 24px; }
.fs-32 { font-size: 32px; }
.fs-40 { font-size: 40px; }
.fs-48 { font-size: 48px; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.wb-ba { word-break: break-all; }
.pointer-events-none { pointer-events: none; }
.object-contain { object-fit: contain; }
.footer-bottom-inner { padding: 1.5rem 1rem; border-top: 1px solid rgba(255,255,255,0.08); }