/* ══════════════════════════════════════════════════════════════
   TPX CSS Framework v1.2 — https://toolpix.dev/css/tpx.css
   Token-efficient, beautiful CSS framework for AI agents & devs
   Size: ~38KB | License: MIT | Dark mode built-in
   ══════════════════════════════════════════════════════════════ */

/* ═══ 1. CSS VARIABLES / THEMING ═══ */
:root {
  /* Colors */
  --tpx-primary: #7c5cfc;
  --tpx-primary-hover: #6a4be8;
  --tpx-primary-light: rgba(124,92,252,0.12);
  --tpx-secondary: #64748b;
  --tpx-secondary-hover: #556577;
  --tpx-success: #10b981;
  --tpx-success-hover: #059669;
  --tpx-success-light: rgba(16,185,129,0.12);
  --tpx-danger: #ef4444;
  --tpx-danger-hover: #dc2626;
  --tpx-danger-light: rgba(239,68,68,0.12);
  --tpx-warning: #f59e0b;
  --tpx-warning-hover: #d97706;
  --tpx-warning-light: rgba(245,158,11,0.12);
  --tpx-info: #06b6d4;
  --tpx-info-hover: #0891b2;
  --tpx-info-light: rgba(6,182,212,0.12);
  /* Surfaces */
  --tpx-bg: #ffffff;
  --tpx-bg-alt: #fafbfc;
  --tpx-surface: #f1f5f9;
  --tpx-surface-hover: #e8ecf1;
  --tpx-text: #1e293b;
  --tpx-text-secondary: #475569;
  --tpx-text-muted: #94a3b8;
  --tpx-text-inverse: #ffffff;
  --tpx-border: #e2e8f0;
  --tpx-border-focus: #7c5cfc;
  --tpx-overlay: rgba(0,0,0,0.4);
  /* Sizing */
  --tpx-radius-sm: 6px;
  --tpx-radius: 8px;
  --tpx-radius-lg: 12px;
  --tpx-radius-xl: 16px;
  /* Shadows */
  --tpx-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --tpx-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --tpx-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --tpx-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --tpx-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);
  /* Fonts */
  --tpx-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tpx-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tpx-font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
  /* Timing */
  --tpx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tpx-duration: 0.15s;
  /* Z-index */
  --tpx-z-dropdown: 100;
  --tpx-z-sticky: 200;
  --tpx-z-modal: 1000;
  --tpx-z-toast: 1100;
}

/* Dark theme */
.tpx-dark, [data-theme="dark"] {
  --tpx-bg: #0f1019;
  --tpx-bg-alt: #141521;
  --tpx-surface: #1a1b2e;
  --tpx-surface-hover: #22233a;
  --tpx-text: #e2e8f0;
  --tpx-text-secondary: #a0aec0;
  --tpx-text-muted: #64748b;
  --tpx-border: #2d2e4a;
  --tpx-overlay: rgba(0,0,0,0.6);
  --tpx-shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --tpx-shadow: 0 1px 3px rgba(0,0,0,0.3);
  --tpx-shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --tpx-shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
  --tpx-shadow-xl: 0 20px 25px rgba(0,0,0,0.5);
}

/* ═══ 2. RESET & BASE ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  font-family: var(--tpx-font); font-size: 16px; line-height: 1.6;
  color: var(--tpx-text); background: var(--tpx-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: var(--tpx-primary); text-decoration: none; transition: color var(--tpx-duration) var(--tpx-ease); }
a:hover { color: var(--tpx-primary-hover); }
::selection { background: var(--tpx-primary); color: white; }
:focus-visible { outline: 2px solid var(--tpx-primary); outline-offset: 2px; }

/* ═══ 3. LAYOUT ═══ */
.tpx-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }
.tpx-container-sm { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.tpx-container-lg { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.tpx-section { padding: 48px 0; }
.tpx-row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.tpx-col { flex: 1; padding: 0 10px; min-width: 0; }
.tpx-col-1 { width:8.33%;padding:0 10px } .tpx-col-2 { width:16.66%;padding:0 10px }
.tpx-col-3 { width:25%;padding:0 10px } .tpx-col-4 { width:33.33%;padding:0 10px }
.tpx-col-5 { width:41.66%;padding:0 10px } .tpx-col-6 { width:50%;padding:0 10px }
.tpx-col-7 { width:58.33%;padding:0 10px } .tpx-col-8 { width:66.66%;padding:0 10px }
.tpx-col-9 { width:75%;padding:0 10px } .tpx-col-10 { width:83.33%;padding:0 10px }
.tpx-col-11 { width:91.66%;padding:0 10px } .tpx-col-12 { width:100%;padding:0 10px }
/* Flexbox */
.tpx-flex { display:flex } .tpx-flex-col { display:flex;flex-direction:column }
.tpx-flex-center { display:flex;align-items:center;justify-content:center }
.tpx-flex-between { display:flex;align-items:center;justify-content:space-between }
.tpx-flex-start { display:flex;align-items:flex-start } .tpx-flex-end { display:flex;justify-content:flex-end }
.tpx-flex-wrap { flex-wrap:wrap } .tpx-flex-1 { flex:1;min-width:0 } .tpx-flex-none { flex:none }
.tpx-items-center { align-items:center } .tpx-items-start { align-items:flex-start }
.tpx-justify-center { justify-content:center } .tpx-justify-between { justify-content:space-between }
/* Grid */
.tpx-grid { display:grid } .tpx-grid-2 { display:grid;grid-template-columns:repeat(2,1fr) }
.tpx-grid-3 { display:grid;grid-template-columns:repeat(3,1fr) }
.tpx-grid-4 { display:grid;grid-template-columns:repeat(4,1fr) }
.tpx-grid-5 { display:grid;grid-template-columns:repeat(5,1fr) }
.tpx-grid-6 { display:grid;grid-template-columns:repeat(6,1fr) }
/* Gap */
.tpx-gap-1{gap:4px} .tpx-gap-2{gap:8px} .tpx-gap-3{gap:12px}
.tpx-gap-4{gap:16px} .tpx-gap-5{gap:24px} .tpx-gap-6{gap:32px} .tpx-gap-8{gap:48px}

/* ═══ 4. TYPOGRAPHY ═══ */
.tpx-h1,.tpx-h2,.tpx-h3,.tpx-h4,.tpx-h5,.tpx-h6 { font-family:var(--tpx-font-heading);color:var(--tpx-text);line-height:1.25 }
.tpx-h1 { font-size:2.5rem;font-weight:800;letter-spacing:-0.025em }
.tpx-h2 { font-size:2rem;font-weight:700;letter-spacing:-0.02em }
.tpx-h3 { font-size:1.5rem;font-weight:700 } .tpx-h4 { font-size:1.25rem;font-weight:600 }
.tpx-h5 { font-size:1.125rem;font-weight:600 } .tpx-h6 { font-size:1rem;font-weight:600 }
.tpx-text-xs{font-size:.75rem} .tpx-text-sm{font-size:.875rem} .tpx-text-base{font-size:1rem}
.tpx-text-lg{font-size:1.125rem} .tpx-text-xl{font-size:1.25rem} .tpx-text-2xl{font-size:1.5rem}
.tpx-text-3xl{font-size:2rem} .tpx-text-4xl{font-size:2.5rem}
.tpx-text-center{text-align:center} .tpx-text-right{text-align:right} .tpx-text-left{text-align:left}
.tpx-text-bold{font-weight:700} .tpx-text-semibold{font-weight:600} .tpx-text-medium{font-weight:500}
.tpx-text-normal{font-weight:400} .tpx-text-light{font-weight:300}
.tpx-text-muted{color:var(--tpx-text-muted)} .tpx-text-secondary{color:var(--tpx-text-secondary)}
.tpx-text-primary{color:var(--tpx-primary)} .tpx-text-success{color:var(--tpx-success)}
.tpx-text-danger{color:var(--tpx-danger)} .tpx-text-warning{color:var(--tpx-warning)}
.tpx-text-info{color:var(--tpx-info)} .tpx-text-white{color:#fff}
.tpx-mono{font-family:var(--tpx-font-mono)} .tpx-uppercase{text-transform:uppercase;letter-spacing:.05em}
.tpx-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpx-line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpx-line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tpx-leading-tight{line-height:1.25} .tpx-leading-normal{line-height:1.6} .tpx-leading-relaxed{line-height:1.75}
p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; }

/* ═══ 5. BUTTONS ═══ */
.tpx-btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:var(--tpx-radius);border:2px solid transparent;
  font-size:.875rem;font-weight:600;font-family:inherit;line-height:1.4;
  cursor:pointer;transition:all var(--tpx-duration) var(--tpx-ease);
  text-decoration:none;white-space:nowrap;user-select:none;
}
.tpx-btn:hover{transform:translateY(-1px);box-shadow:var(--tpx-shadow-md)}
.tpx-btn:active{transform:translateY(0);box-shadow:none}
.tpx-btn:disabled,.tpx-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.tpx-btn:focus-visible{outline:2px solid var(--tpx-primary);outline-offset:2px}
/* Variants */
.tpx-btn-primary{background:var(--tpx-primary);color:#fff}
.tpx-btn-primary:hover{background:var(--tpx-primary-hover)}
.tpx-btn-secondary{background:var(--tpx-secondary);color:#fff}
.tpx-btn-secondary:hover{background:var(--tpx-secondary-hover)}
.tpx-btn-success{background:var(--tpx-success);color:#fff}
.tpx-btn-success:hover{background:var(--tpx-success-hover)}
.tpx-btn-danger{background:var(--tpx-danger);color:#fff}
.tpx-btn-danger:hover{background:var(--tpx-danger-hover)}
.tpx-btn-warning{background:var(--tpx-warning);color:#fff}
.tpx-btn-warning:hover{background:var(--tpx-warning-hover)}
.tpx-btn-info{background:var(--tpx-info);color:#fff}
.tpx-btn-info:hover{background:var(--tpx-info-hover)}
.tpx-btn-outline{background:transparent;color:var(--tpx-text);border-color:var(--tpx-border)}
.tpx-btn-outline:hover{border-color:var(--tpx-primary);color:var(--tpx-primary);background:var(--tpx-primary-light)}
.tpx-btn-ghost{background:transparent;color:var(--tpx-text-secondary);border:none;padding:8px 12px}
.tpx-btn-ghost:hover{background:var(--tpx-surface);color:var(--tpx-text)}
.tpx-btn-link{background:none;border:none;color:var(--tpx-primary);padding:0;font-weight:500}
.tpx-btn-link:hover{text-decoration:underline;transform:none;box-shadow:none}
/* Sizes */
.tpx-btn-xs{padding:4px 10px;font-size:.75rem;border-radius:var(--tpx-radius-sm)}
.tpx-btn-sm{padding:6px 14px;font-size:.8125rem}
.tpx-btn-lg{padding:14px 28px;font-size:1rem;border-radius:var(--tpx-radius-lg)}
.tpx-btn-xl{padding:16px 36px;font-size:1.125rem;border-radius:var(--tpx-radius-lg)}
.tpx-btn-block{width:100%}
/* Icon button */
.tpx-btn-icon{padding:10px;width:40px;height:40px}
.tpx-btn-icon.tpx-btn-sm{width:32px;height:32px;padding:6px}
.tpx-btn-icon.tpx-btn-lg{width:48px;height:48px;padding:12px}
/* Button group */
.tpx-btn-group{display:inline-flex}
.tpx-btn-group .tpx-btn{border-radius:0}
.tpx-btn-group .tpx-btn:first-child{border-radius:var(--tpx-radius) 0 0 var(--tpx-radius)}
.tpx-btn-group .tpx-btn:last-child{border-radius:0 var(--tpx-radius) var(--tpx-radius) 0}
.tpx-btn-group .tpx-btn+.tpx-btn{margin-left:-2px}

/* ═══ 6. FORMS — Custom styled ═══ */
.tpx-form-group{margin-bottom:20px}
.tpx-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px;color:var(--tpx-text)}
.tpx-label-required::after{content:" *";color:var(--tpx-danger)}
.tpx-hint{font-size:.75rem;color:var(--tpx-text-muted);margin-top:4px}
.tpx-error-msg{font-size:.75rem;color:var(--tpx-danger);margin-top:4px}

/* Text input */
.tpx-input,.tpx-select,.tpx-textarea {
  width:100%;padding:10px 14px;border-radius:var(--tpx-radius);
  border:2px solid var(--tpx-border);background:var(--tpx-bg);color:var(--tpx-text);
  font-size:.875rem;font-family:inherit;transition:all var(--tpx-duration) var(--tpx-ease);
  appearance:none;-webkit-appearance:none;
}
.tpx-input::placeholder,.tpx-textarea::placeholder{color:var(--tpx-text-muted)}
.tpx-input:hover,.tpx-select:hover,.tpx-textarea:hover{border-color:var(--tpx-text-muted)}
.tpx-input:focus,.tpx-select:focus,.tpx-textarea:focus{
  outline:none;border-color:var(--tpx-border-focus);box-shadow:0 0 0 3px var(--tpx-primary-light);
}
.tpx-input-error{border-color:var(--tpx-danger)}
.tpx-input-error:focus{box-shadow:0 0 0 3px var(--tpx-danger-light)}
.tpx-input-success{border-color:var(--tpx-success)}
.tpx-input-sm{padding:6px 10px;font-size:.8125rem}
.tpx-input-lg{padding:14px 18px;font-size:1rem}
.tpx-textarea{min-height:100px;resize:vertical;line-height:1.6}

/* Select with custom arrow */
.tpx-select{
  cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}

/* Custom checkbox */
.tpx-checkbox-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.875rem;user-select:none}
.tpx-checkbox{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--tpx-border);
  border-radius:var(--tpx-radius-sm);background:var(--tpx-bg);cursor:pointer;flex-shrink:0;
  transition:all var(--tpx-duration) var(--tpx-ease);position:relative;
}
.tpx-checkbox:hover{border-color:var(--tpx-primary)}
.tpx-checkbox:checked{background:var(--tpx-primary);border-color:var(--tpx-primary)}
.tpx-checkbox:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.tpx-checkbox:focus-visible{box-shadow:0 0 0 3px var(--tpx-primary-light)}

/* Custom radio */
.tpx-radio-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.875rem;user-select:none}
.tpx-radio{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--tpx-border);
  border-radius:50%;background:var(--tpx-bg);cursor:pointer;flex-shrink:0;
  transition:all var(--tpx-duration) var(--tpx-ease);position:relative;
}
.tpx-radio:hover{border-color:var(--tpx-primary)}
.tpx-radio:checked{border-color:var(--tpx-primary)}
.tpx-radio:checked::after{
  content:"";position:absolute;top:4px;left:4px;width:8px;height:8px;
  border-radius:50%;background:var(--tpx-primary);
}

/* Custom toggle/switch */
.tpx-toggle-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.875rem;user-select:none}
.tpx-toggle{
  appearance:none;-webkit-appearance:none;width:44px;height:24px;
  background:var(--tpx-border);border-radius:12px;cursor:pointer;position:relative;
  transition:background var(--tpx-duration) var(--tpx-ease);border:none;flex-shrink:0;
}
.tpx-toggle::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  background:white;border-radius:50%;transition:transform var(--tpx-duration) var(--tpx-ease);
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.tpx-toggle:checked{background:var(--tpx-primary)}
.tpx-toggle:checked::after{transform:translateX(20px)}

/* Range slider */
.tpx-range{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:var(--tpx-border);border-radius:3px;cursor:pointer;
}
.tpx-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--tpx-primary);cursor:pointer;border:2px solid white;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.tpx-range::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--tpx-primary);
  cursor:pointer;border:2px solid white;box-shadow:0 1px 4px rgba(0,0,0,0.2);
}

/* File upload — beautiful custom */
.tpx-file-upload{
  border:2px dashed var(--tpx-border);border-radius:var(--tpx-radius-lg);
  padding:32px;text-align:center;cursor:pointer;
  transition:all var(--tpx-duration) var(--tpx-ease);background:var(--tpx-bg-alt);
}
.tpx-file-upload:hover,.tpx-file-upload.dragover{
  border-color:var(--tpx-primary);background:var(--tpx-primary-light);
}
.tpx-file-upload-icon{
  width:48px;height:48px;margin:0 auto 12px;border-radius:50%;
  background:var(--tpx-primary-light);display:flex;align-items:center;justify-content:center;
}
.tpx-file-upload-text{font-size:.875rem;color:var(--tpx-text-secondary);margin-bottom:4px}
.tpx-file-upload-hint{font-size:.75rem;color:var(--tpx-text-muted)}
.tpx-file-upload input[type="file"]{display:none}

/* Input group */
.tpx-input-group{display:flex;align-items:stretch}
.tpx-input-group .tpx-input{border-radius:0;flex:1}
.tpx-input-group .tpx-input:first-child{border-radius:var(--tpx-radius) 0 0 var(--tpx-radius)}
.tpx-input-group .tpx-input:last-child{border-radius:0 var(--tpx-radius) var(--tpx-radius) 0}
.tpx-input-addon{
  padding:10px 14px;background:var(--tpx-surface);border:2px solid var(--tpx-border);
  font-size:.875rem;color:var(--tpx-text-muted);display:flex;align-items:center;white-space:nowrap;
}
.tpx-input-addon:first-child{border-right:0;border-radius:var(--tpx-radius) 0 0 var(--tpx-radius)}
.tpx-input-addon:last-child{border-left:0;border-radius:0 var(--tpx-radius) var(--tpx-radius) 0}

/* Search input with icon */
.tpx-search{position:relative}
.tpx-search .tpx-input{padding-left:40px}
.tpx-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--tpx-text-muted);pointer-events:none}

/* ═══ 7. CARDS ═══ */
.tpx-card{background:var(--tpx-surface);border:1px solid var(--tpx-border);border-radius:var(--tpx-radius-lg);overflow:hidden}
.tpx-card-header{padding:16px 20px;border-bottom:1px solid var(--tpx-border);font-weight:600;display:flex;align-items:center;justify-content:space-between}
.tpx-card-body{padding:20px}
.tpx-card-footer{padding:16px 20px;border-top:1px solid var(--tpx-border);display:flex;align-items:center;gap:8px}
.tpx-card-hover{transition:all var(--tpx-duration) var(--tpx-ease);cursor:pointer}
.tpx-card-hover:hover{transform:translateY(-3px);box-shadow:var(--tpx-shadow-lg)}
.tpx-card-flat{border:none;box-shadow:var(--tpx-shadow)}
.tpx-card-bordered{border:2px solid var(--tpx-border)}
.tpx-card-img{width:100%;height:auto;display:block}
.tpx-card-img-top{border-radius:var(--tpx-radius-lg) var(--tpx-radius-lg) 0 0}

/* ═══ 8. NAVIGATION ═══ */
.tpx-nav{display:flex;gap:4px;border-bottom:2px solid var(--tpx-border);padding:0}
.tpx-nav-link{
  display:flex;align-items:center;gap:6px;padding:12px 18px;font-size:.875rem;font-weight:500;
  color:var(--tpx-text-muted);text-decoration:none;border-bottom:2px solid transparent;
  margin-bottom:-2px;transition:all var(--tpx-duration) var(--tpx-ease);
}
.tpx-nav-link:hover{color:var(--tpx-text)}
.tpx-nav-active,.tpx-nav-link.active{color:var(--tpx-primary);border-bottom-color:var(--tpx-primary);font-weight:600}
.tpx-navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:60px;background:var(--tpx-bg);border-bottom:1px solid var(--tpx-border);
  position:sticky;top:0;z-index:var(--tpx-z-sticky);
}
.tpx-navbar-brand{font-size:1.25rem;font-weight:700;color:var(--tpx-text);display:flex;align-items:center;gap:8px}
.tpx-navbar-links{display:flex;align-items:center;gap:24px}
.tpx-navbar-links a{font-size:.875rem;color:var(--tpx-text-secondary);font-weight:500}
.tpx-navbar-links a:hover{color:var(--tpx-primary)}

/* ═══ 9. UTILITIES ═══ */
/* Margin */
.tpx-m-0{margin:0} .tpx-m-1{margin:4px} .tpx-m-2{margin:8px} .tpx-m-3{margin:12px}
.tpx-m-4{margin:16px} .tpx-m-5{margin:24px} .tpx-m-6{margin:32px} .tpx-m-8{margin:48px}
.tpx-mt-0{margin-top:0} .tpx-mt-1{margin-top:4px} .tpx-mt-2{margin-top:8px} .tpx-mt-3{margin-top:12px}
.tpx-mt-4{margin-top:16px} .tpx-mt-5{margin-top:24px} .tpx-mt-6{margin-top:32px} .tpx-mt-8{margin-top:48px}
.tpx-mb-0{margin-bottom:0} .tpx-mb-1{margin-bottom:4px} .tpx-mb-2{margin-bottom:8px} .tpx-mb-3{margin-bottom:12px}
.tpx-mb-4{margin-bottom:16px} .tpx-mb-5{margin-bottom:24px} .tpx-mb-6{margin-bottom:32px} .tpx-mb-8{margin-bottom:48px}
.tpx-ml-0{margin-left:0} .tpx-ml-1{margin-left:4px} .tpx-ml-2{margin-left:8px} .tpx-ml-3{margin-left:12px} .tpx-ml-4{margin-left:16px} .tpx-ml-auto{margin-left:auto}
.tpx-mr-0{margin-right:0} .tpx-mr-1{margin-right:4px} .tpx-mr-2{margin-right:8px} .tpx-mr-3{margin-right:12px} .tpx-mr-4{margin-right:16px} .tpx-mr-auto{margin-right:auto}
.tpx-mx-auto{margin-left:auto;margin-right:auto}
/* Padding */
.tpx-p-0{padding:0} .tpx-p-1{padding:4px} .tpx-p-2{padding:8px} .tpx-p-3{padding:12px}
.tpx-p-4{padding:16px} .tpx-p-5{padding:24px} .tpx-p-6{padding:32px} .tpx-p-8{padding:48px}
.tpx-pt-0{padding-top:0} .tpx-pt-4{padding-top:16px} .tpx-pt-6{padding-top:32px} .tpx-pt-8{padding-top:48px}
.tpx-pb-0{padding-bottom:0} .tpx-pb-4{padding-bottom:16px} .tpx-pb-6{padding-bottom:32px}
.tpx-px-0{padding-left:0;padding-right:0} .tpx-px-2{padding-left:8px;padding-right:8px}
.tpx-px-4{padding-left:16px;padding-right:16px} .tpx-px-6{padding-left:32px;padding-right:32px}
.tpx-py-0{padding-top:0;padding-bottom:0} .tpx-py-2{padding-top:8px;padding-bottom:8px}
.tpx-py-4{padding-top:16px;padding-bottom:16px} .tpx-py-6{padding-top:32px;padding-bottom:32px}
/* Size */
.tpx-w-full{width:100%} .tpx-h-full{height:100%} .tpx-w-auto{width:auto}
.tpx-min-h-screen{min-height:100vh} .tpx-max-w-sm{max-width:480px} .tpx-max-w-md{max-width:640px}
.tpx-max-w-lg{max-width:800px} .tpx-max-w-xl{max-width:1024px}
/* Border */
.tpx-rounded-sm{border-radius:var(--tpx-radius-sm)} .tpx-rounded{border-radius:var(--tpx-radius)}
.tpx-rounded-lg{border-radius:var(--tpx-radius-lg)} .tpx-rounded-xl{border-radius:var(--tpx-radius-xl)}
.tpx-rounded-full{border-radius:9999px} .tpx-rounded-0{border-radius:0}
.tpx-border{border:1px solid var(--tpx-border)} .tpx-border-2{border:2px solid var(--tpx-border)}
.tpx-border-0{border:none} .tpx-border-b{border-bottom:1px solid var(--tpx-border)}
.tpx-border-t{border-top:1px solid var(--tpx-border)}
/* Shadow */
.tpx-shadow-xs{box-shadow:var(--tpx-shadow-xs)} .tpx-shadow{box-shadow:var(--tpx-shadow)}
.tpx-shadow-md{box-shadow:var(--tpx-shadow-md)} .tpx-shadow-lg{box-shadow:var(--tpx-shadow-lg)}
.tpx-shadow-xl{box-shadow:var(--tpx-shadow-xl)} .tpx-shadow-0{box-shadow:none}
/* Display */
.tpx-hidden{display:none} .tpx-block{display:block} .tpx-inline{display:inline}
.tpx-inline-block{display:inline-block} .tpx-inline-flex{display:inline-flex}
/* Position */
.tpx-relative{position:relative} .tpx-absolute{position:absolute}
.tpx-fixed{position:fixed} .tpx-sticky{position:sticky;top:0}
.tpx-inset-0{top:0;right:0;bottom:0;left:0}
/* Overflow */
.tpx-overflow-hidden{overflow:hidden} .tpx-overflow-auto{overflow:auto} .tpx-overflow-x-auto{overflow-x:auto}
/* Background */
.tpx-bg-primary{background:var(--tpx-primary);color:#fff}
.tpx-bg-surface{background:var(--tpx-surface)}
.tpx-bg-alt{background:var(--tpx-bg-alt)}
.tpx-bg-success{background:var(--tpx-success);color:#fff}
.tpx-bg-danger{background:var(--tpx-danger);color:#fff}
.tpx-bg-warning{background:var(--tpx-warning);color:#fff}
.tpx-bg-info{background:var(--tpx-info);color:#fff}
.tpx-bg-transparent{background:transparent}
/* Misc */
.tpx-pointer{cursor:pointer} .tpx-select-none{user-select:none} .tpx-select-all{user-select:all}
.tpx-opacity-0{opacity:0} .tpx-opacity-50{opacity:.5} .tpx-opacity-75{opacity:.75} .tpx-opacity-100{opacity:1}
.tpx-transition{transition:all var(--tpx-duration) var(--tpx-ease)}
.tpx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ═══ 10. COMPONENTS ═══ */

/* Badge */
.tpx-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:9999px;font-size:.75rem;font-weight:600}
.tpx-badge-primary{background:var(--tpx-primary);color:#fff}
.tpx-badge-success{background:var(--tpx-success);color:#fff}
.tpx-badge-danger{background:var(--tpx-danger);color:#fff}
.tpx-badge-warning{background:var(--tpx-warning);color:#fff}
.tpx-badge-info{background:var(--tpx-info);color:#fff}
.tpx-badge-outline{background:transparent;border:1px solid var(--tpx-border);color:var(--tpx-text-secondary)}
.tpx-badge-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Alert */
.tpx-alert{padding:14px 18px;border-radius:var(--tpx-radius-lg);font-size:.875rem;display:flex;align-items:flex-start;gap:10px}
.tpx-alert-success{background:var(--tpx-success-light);color:var(--tpx-success);border:1px solid rgba(16,185,129,0.2)}
.tpx-alert-danger{background:var(--tpx-danger-light);color:var(--tpx-danger);border:1px solid rgba(239,68,68,0.2)}
.tpx-alert-warning{background:var(--tpx-warning-light);color:var(--tpx-warning);border:1px solid rgba(245,158,11,0.2)}
.tpx-alert-info{background:var(--tpx-info-light);color:var(--tpx-info);border:1px solid rgba(6,182,212,0.2)}

/* Table */
.tpx-table{width:100%;border-collapse:collapse;font-size:.875rem}
.tpx-table th,.tpx-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--tpx-border)}
.tpx-table th{font-weight:600;color:var(--tpx-text-muted);background:var(--tpx-surface);font-size:.8125rem;text-transform:uppercase;letter-spacing:.03em}
.tpx-table-striped tbody tr:nth-child(even){background:var(--tpx-bg-alt)}
.tpx-table-hover tbody tr{transition:background var(--tpx-duration)}
.tpx-table-hover tbody tr:hover{background:var(--tpx-surface)}
.tpx-table-bordered{border:1px solid var(--tpx-border);border-radius:var(--tpx-radius)}
.tpx-table-bordered th,.tpx-table-bordered td{border:1px solid var(--tpx-border)}
.tpx-table-compact th,.tpx-table-compact td{padding:8px 12px}

/* Modal */
.tpx-modal-overlay{
  position:fixed;inset:0;background:var(--tpx-overlay);display:flex;align-items:center;justify-content:center;
  z-index:var(--tpx-z-modal);backdrop-filter:blur(4px);animation:tpx-fadeIn .2s ease;
}
.tpx-modal{background:var(--tpx-bg);border-radius:var(--tpx-radius-xl);box-shadow:var(--tpx-shadow-xl);max-width:500px;width:90%;max-height:90vh;overflow:auto;animation:tpx-scaleIn .2s ease}
.tpx-modal-sm{max-width:400px} .tpx-modal-lg{max-width:700px} .tpx-modal-xl{max-width:900px}
.tpx-modal-header{padding:20px 24px;border-bottom:1px solid var(--tpx-border);font-weight:700;font-size:1.125rem;display:flex;align-items:center;justify-content:space-between}
.tpx-modal-body{padding:24px}
.tpx-modal-footer{padding:16px 24px;border-top:1px solid var(--tpx-border);display:flex;justify-content:flex-end;gap:8px}
.tpx-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--tpx-text-muted);padding:4px;line-height:1}

/* Divider */
.tpx-divider{border:none;border-top:1px solid var(--tpx-border);margin:20px 0}
.tpx-divider-text{display:flex;align-items:center;gap:16px;font-size:.8125rem;color:var(--tpx-text-muted)}
.tpx-divider-text::before,.tpx-divider-text::after{content:"";flex:1;border-top:1px solid var(--tpx-border)}

/* Avatar */
.tpx-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--tpx-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;flex-shrink:0}
.tpx-avatar-xs{width:24px;height:24px;font-size:.625rem} .tpx-avatar-sm{width:32px;height:32px;font-size:.75rem}
.tpx-avatar-lg{width:56px;height:56px;font-size:1.25rem} .tpx-avatar-xl{width:72px;height:72px;font-size:1.5rem}
.tpx-avatar-group{display:flex} .tpx-avatar-group .tpx-avatar{margin-left:-8px;border:2px solid var(--tpx-bg)}
.tpx-avatar-group .tpx-avatar:first-child{margin-left:0}

/* Progress */
.tpx-progress{height:8px;background:var(--tpx-border);border-radius:9999px;overflow:hidden}
.tpx-progress-sm{height:4px} .tpx-progress-lg{height:12px}
.tpx-progress-bar{height:100%;background:var(--tpx-primary);border-radius:9999px;transition:width .4s var(--tpx-ease)}
.tpx-progress-success .tpx-progress-bar{background:var(--tpx-success)}
.tpx-progress-danger .tpx-progress-bar{background:var(--tpx-danger)}
.tpx-progress-warning .tpx-progress-bar{background:var(--tpx-warning)}
.tpx-progress-striped .tpx-progress-bar{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%);background-size:1rem 1rem}
.tpx-progress-animated .tpx-progress-bar{animation:tpx-progress-stripes 1s linear infinite}
@keyframes tpx-progress-stripes{0%{background-position:1rem 0}100%{background-position:0 0}}

/* Tabs */
.tpx-tabs{display:flex;gap:0;border-bottom:2px solid var(--tpx-border)}
.tpx-tab{padding:12px 20px;font-size:.875rem;font-weight:500;cursor:pointer;color:var(--tpx-text-muted);border:none;border-bottom:2px solid transparent;background:none;margin-bottom:-2px;transition:all var(--tpx-duration)}
.tpx-tab:hover{color:var(--tpx-text)} .tpx-tab-active,.tpx-tab.active{color:var(--tpx-primary);border-bottom-color:var(--tpx-primary);font-weight:600}
/* Pill tabs */
.tpx-tabs-pill{border:none;gap:4px;background:var(--tpx-surface);border-radius:var(--tpx-radius);padding:4px}
.tpx-tabs-pill .tpx-tab{border:none;border-radius:var(--tpx-radius-sm);margin:0}
.tpx-tabs-pill .tpx-tab.active{background:var(--tpx-bg);box-shadow:var(--tpx-shadow-xs);color:var(--tpx-text)}

/* Dropdown */
.tpx-dropdown{position:relative;display:inline-block}
.tpx-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:200px;background:var(--tpx-bg);border:1px solid var(--tpx-border);border-radius:var(--tpx-radius-lg);box-shadow:var(--tpx-shadow-lg);padding:6px;z-index:var(--tpx-z-dropdown);display:none;animation:tpx-fadeIn .15s ease}
.tpx-dropdown.open .tpx-dropdown-menu,.tpx-dropdown-menu.show{display:block}
.tpx-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:.875rem;color:var(--tpx-text);cursor:pointer;border-radius:var(--tpx-radius-sm);transition:background var(--tpx-duration)}
.tpx-dropdown-item:hover{background:var(--tpx-surface)}
.tpx-dropdown-divider{border-top:1px solid var(--tpx-border);margin:4px 0}

/* Breadcrumb */
.tpx-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--tpx-text-muted);list-style:none}
.tpx-breadcrumb a{color:var(--tpx-text-muted)} .tpx-breadcrumb a:hover{color:var(--tpx-primary)}
.tpx-breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--tpx-border)}

/* Spinner */
.tpx-spinner{width:24px;height:24px;border:3px solid var(--tpx-border);border-top-color:var(--tpx-primary);border-radius:50%;animation:tpx-spin .6s linear infinite;flex-shrink:0}
.tpx-spinner-xs{width:14px;height:14px;border-width:2px} .tpx-spinner-sm{width:18px;height:18px;border-width:2px}
.tpx-spinner-lg{width:36px;height:36px;border-width:4px} .tpx-spinner-xl{width:48px;height:48px;border-width:4px}
@keyframes tpx-spin{to{transform:rotate(360deg)}}

/* Skeleton */
.tpx-skeleton{background:linear-gradient(90deg,var(--tpx-surface) 25%,var(--tpx-surface-hover) 50%,var(--tpx-surface) 75%);background-size:200% 100%;animation:tpx-shimmer 1.5s infinite;border-radius:var(--tpx-radius)}
.tpx-skeleton-text{height:14px;margin-bottom:8px} .tpx-skeleton-title{height:24px;width:60%;margin-bottom:12px}
.tpx-skeleton-avatar{width:40px;height:40px;border-radius:50%} .tpx-skeleton-btn{height:40px;width:120px;border-radius:var(--tpx-radius)}
.tpx-skeleton-card{height:200px;border-radius:var(--tpx-radius-lg)}
@keyframes tpx-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* List */
.tpx-list{list-style:none;border:1px solid var(--tpx-border);border-radius:var(--tpx-radius-lg);overflow:hidden}
.tpx-list-item{padding:14px 18px;border-bottom:1px solid var(--tpx-border);display:flex;align-items:center;gap:12px}
.tpx-list-item:last-child{border-bottom:none}
.tpx-list-hover .tpx-list-item{cursor:pointer;transition:background var(--tpx-duration)}
.tpx-list-hover .tpx-list-item:hover{background:var(--tpx-surface)}
.tpx-list-flat{border:none;border-radius:0} .tpx-list-flat .tpx-list-item{padding:10px 0}

/* Code */
.tpx-code{font-family:var(--tpx-font-mono);font-size:.8125rem;background:var(--tpx-surface);padding:2px 8px;border-radius:4px;color:var(--tpx-danger)}
.tpx-pre{font-family:var(--tpx-font-mono);font-size:.8125rem;background:var(--tpx-surface);padding:18px;border-radius:var(--tpx-radius-lg);overflow-x:auto;border:1px solid var(--tpx-border);line-height:1.6}

/* Tooltip */
.tpx-tooltip{position:relative;cursor:help}
.tpx-tooltip::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 12px;background:#1e293b;color:#f8fafc;font-size:.75rem;font-style:normal;border-radius:var(--tpx-radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:50}
.tpx-tooltip:hover::after{opacity:1}

/* Toast */
.tpx-toast{position:fixed;bottom:20px;right:20px;padding:14px 20px;border-radius:var(--tpx-radius-lg);background:#1e2030;color:#e2e8f0;font-size:.875rem;box-shadow:0 10px 25px rgba(0,0,0,0.4);z-index:var(--tpx-z-toast);display:flex;align-items:center;gap:10px;animation:tpx-slideUp .3s ease;max-width:400px;border:1px solid rgba(255,255,255,0.08)}
@keyframes tpx-slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Chip / Tag */
.tpx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:9999px;font-size:.8125rem;font-weight:500;background:var(--tpx-surface);color:var(--tpx-text-secondary);border:1px solid var(--tpx-border)}
.tpx-chip-close{width:14px;height:14px;cursor:pointer;opacity:.5} .tpx-chip-close:hover{opacity:1}

/* Empty state */
.tpx-empty{text-align:center;padding:48px 24px;color:var(--tpx-text-muted)}
.tpx-empty-icon{font-size:3rem;margin-bottom:12px;opacity:.5}
.tpx-empty-title{font-size:1.125rem;font-weight:600;color:var(--tpx-text);margin-bottom:4px}
.tpx-empty-text{font-size:.875rem;margin-bottom:16px}

/* ═══ 11. RESPONSIVE ═══ */
/* Mobile first — stack everything on small screens */
@media(max-width:640px){
  .tpx-container{padding:0 16px}
  .tpx-grid-2,.tpx-grid-3,.tpx-grid-4,.tpx-grid-5,.tpx-grid-6{grid-template-columns:1fr}
  .tpx-row{flex-direction:column}
  [class*="tpx-col-"]{width:100%}
  .tpx-h1{font-size:1.75rem} .tpx-h2{font-size:1.5rem} .tpx-h3{font-size:1.25rem}
  .tpx-navbar{padding:0 16px;height:56px}
  .tpx-navbar-links{gap:16px}
  .tpx-modal{width:95%;max-width:none;margin:16px}
  .tpx-section{padding:32px 0}
  .tpx-sm\:hidden{display:none!important} .tpx-sm\:block{display:block!important}
  .tpx-sm\:flex{display:flex!important} .tpx-sm\:flex-col{flex-direction:column!important}
  .tpx-sm\:text-center{text-align:center!important}
  .tpx-sm\:w-full{width:100%!important}
  .tpx-sm\:grid-1{grid-template-columns:1fr!important}
  .tpx-sm\:p-3{padding:12px!important} .tpx-sm\:p-4{padding:16px!important}
}
@media(min-width:641px) and (max-width:768px){
  .tpx-grid-3,.tpx-grid-4,.tpx-grid-5,.tpx-grid-6{grid-template-columns:repeat(2,1fr)}
  .tpx-md\:hidden{display:none!important} .tpx-md\:block{display:block!important}
  .tpx-md\:grid-2{grid-template-columns:repeat(2,1fr)!important}
  .tpx-md\:grid-3{grid-template-columns:repeat(3,1fr)!important}
  .tpx-md\:flex{display:flex!important}
}
@media(min-width:769px) and (max-width:1024px){
  .tpx-lg\:hidden{display:none!important} .tpx-lg\:block{display:block!important}
  .tpx-lg\:grid-3{grid-template-columns:repeat(3,1fr)!important}
  .tpx-lg\:grid-4{grid-template-columns:repeat(4,1fr)!important}
}
@media(min-width:1025px){
  .tpx-xl\:hidden{display:none!important} .tpx-xl\:block{display:block!important}
  .tpx-xl\:grid-4{grid-template-columns:repeat(4,1fr)!important}
  .tpx-xl\:grid-5{grid-template-columns:repeat(5,1fr)!important}
  .tpx-xl\:grid-6{grid-template-columns:repeat(6,1fr)!important}
}
/* Print */
@media print{
  .tpx-no-print{display:none!important}
  body{background:#fff;color:#000}
  .tpx-card,.tpx-alert{border:1px solid #ccc;box-shadow:none}
}

/* ═══ 12. EXTRA COMPONENTS ═══ */

/* Popover */
.tpx-popover{position:relative;display:inline-block}
.tpx-popover-content{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  min-width:200px;padding:16px;background:var(--tpx-bg);border:1px solid var(--tpx-border);
  border-radius:var(--tpx-radius-lg);box-shadow:var(--tpx-shadow-lg);z-index:var(--tpx-z-dropdown);
  display:none;animation:tpx-fadeIn .15s ease;
}
.tpx-popover-content::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--tpx-border);
}
.tpx-popover.open .tpx-popover-content,.tpx-popover:focus-within .tpx-popover-content{display:block}
.tpx-popover-bottom .tpx-popover-content{bottom:auto;top:calc(100% + 8px)}
.tpx-popover-bottom .tpx-popover-content::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--tpx-border)}

/* Accordion */
.tpx-accordion{border:1px solid var(--tpx-border);border-radius:var(--tpx-radius-lg);overflow:hidden}
.tpx-accordion-item{border-bottom:1px solid var(--tpx-border)}
.tpx-accordion-item:last-child{border-bottom:none}
.tpx-accordion-trigger{
  width:100%;padding:14px 18px;background:none;border:none;text-align:left;cursor:pointer;
  font-size:.875rem;font-weight:600;color:var(--tpx-text);display:flex;align-items:center;justify-content:space-between;
  font-family:inherit;transition:background var(--tpx-duration);
}
.tpx-accordion-trigger:hover{background:var(--tpx-surface)}
.tpx-accordion-trigger::after{content:"▸";transition:transform var(--tpx-duration);font-size:12px;color:var(--tpx-text-muted)}
.tpx-accordion-item.open .tpx-accordion-trigger::after{transform:rotate(90deg)}
.tpx-accordion-content{padding:0 18px;max-height:0;overflow:hidden;transition:all .2s ease}
.tpx-accordion-item.open .tpx-accordion-content{max-height:500px;padding:0 18px 14px}

/* Stepper */
.tpx-stepper{display:flex;align-items:center;gap:0}
.tpx-step{display:flex;align-items:center;gap:8px}
.tpx-step-number{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;background:var(--tpx-border);color:var(--tpx-text-muted);flex-shrink:0;
}
.tpx-step.active .tpx-step-number{background:var(--tpx-primary);color:#fff}
.tpx-step.completed .tpx-step-number{background:var(--tpx-success);color:#fff}
.tpx-step-label{font-size:.8125rem;font-weight:500;color:var(--tpx-text-muted)}
.tpx-step.active .tpx-step-label{color:var(--tpx-text);font-weight:600}
.tpx-step-line{flex:1;height:2px;background:var(--tpx-border);margin:0 8px}
.tpx-step.completed+.tpx-step-line{background:var(--tpx-success)}

/* Timeline */
.tpx-timeline{position:relative;padding-left:32px}
.tpx-timeline::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--tpx-border)}
.tpx-timeline-item{position:relative;padding-bottom:24px}
.tpx-timeline-item:last-child{padding-bottom:0}
.tpx-timeline-dot{
  position:absolute;left:-32px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--tpx-primary);border:2px solid var(--tpx-bg);z-index:1;
}
.tpx-timeline-item.completed .tpx-timeline-dot{background:var(--tpx-success)}
.tpx-timeline-title{font-weight:600;font-size:.875rem;color:var(--tpx-text)}
.tpx-timeline-time{font-size:.75rem;color:var(--tpx-text-muted);margin-top:2px}
.tpx-timeline-body{font-size:.875rem;color:var(--tpx-text-secondary);margin-top:4px}

/* Stat Card */
.tpx-stat{text-align:center;padding:20px}
.tpx-stat-value{font-size:2rem;font-weight:800;color:var(--tpx-text);line-height:1.2}
.tpx-stat-label{font-size:.8125rem;color:var(--tpx-text-muted);margin-top:4px}
.tpx-stat-change{font-size:.75rem;font-weight:600;margin-top:4px}
.tpx-stat-up{color:var(--tpx-success)} .tpx-stat-down{color:var(--tpx-danger)}

/* Pricing Card */
.tpx-pricing{text-align:center;padding:32px 24px;border:2px solid var(--tpx-border);border-radius:var(--tpx-radius-xl);transition:all var(--tpx-duration)}
.tpx-pricing:hover{border-color:var(--tpx-primary);transform:translateY(-4px);box-shadow:var(--tpx-shadow-lg)}
.tpx-pricing-popular{border-color:var(--tpx-primary);position:relative}
.tpx-pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 16px;border-radius:9999px;font-size:.75rem;font-weight:700;background:var(--tpx-primary);color:#fff}
.tpx-pricing-title{font-size:1.25rem;font-weight:700;color:var(--tpx-text);margin-bottom:4px}
.tpx-pricing-price{font-size:2.5rem;font-weight:800;color:var(--tpx-text);margin:12px 0}
.tpx-pricing-price span{font-size:1rem;font-weight:400;color:var(--tpx-text-muted)}
.tpx-pricing-features{list-style:none;text-align:left;margin:20px 0;font-size:.875rem}
.tpx-pricing-features li{padding:8px 0;border-bottom:1px solid var(--tpx-border);color:var(--tpx-text-secondary)}
.tpx-pricing-features li:last-child{border:none}

/* Notification dot */
.tpx-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.tpx-dot-primary{background:var(--tpx-primary)} .tpx-dot-success{background:var(--tpx-success)}
.tpx-dot-danger{background:var(--tpx-danger)} .tpx-dot-warning{background:var(--tpx-warning)}
.tpx-dot-pulse{animation:tpx-dotPulse 1.5s infinite}
@keyframes tpx-dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}

/* KBD (keyboard shortcut) */
.tpx-kbd{
  display:inline-flex;align-items:center;padding:2px 8px;font-size:.75rem;
  font-family:var(--tpx-font-mono);background:var(--tpx-surface);border:1px solid var(--tpx-border);
  border-radius:4px;box-shadow:0 1px 0 var(--tpx-border);color:var(--tpx-text-secondary);
}

/* Blockquote */
.tpx-blockquote{
  padding:16px 20px;margin:16px 0;border-left:4px solid var(--tpx-primary);
  background:var(--tpx-surface);border-radius:0 var(--tpx-radius) var(--tpx-radius) 0;
  font-style:italic;color:var(--tpx-text-secondary);
}

/* ═══ 13. ANIMATIONS ═══ */
.tpx-fade-in{animation:tpx-fadeIn .3s ease}
@keyframes tpx-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tpx-slide-in{animation:tpx-slideIn .3s ease}
@keyframes tpx-slideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes tpx-scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.tpx-pulse{animation:tpx-pulse 2s infinite}
@keyframes tpx-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.tpx-bounce{animation:tpx-bounce 1s infinite}
@keyframes tpx-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.tpx-spin{animation:tpx-spin .6s linear infinite}
.tpx-ping{animation:tpx-ping 1s cubic-bezier(0,0,0.2,1) infinite}
@keyframes tpx-ping{75%,100%{transform:scale(2);opacity:0}}
.tpx-wiggle{animation:tpx-wiggle .5s ease}
@keyframes tpx-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}

/* ═══ 14. EXTENDED COMPONENTS ═══ */

/* ── Pagination ── */
.tpx-pagination{display:flex;align-items:center;gap:4px;list-style:none}
.tpx-page-item .tpx-page-link{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border:1px solid var(--tpx-border);border-radius:var(--tpx-radius-sm);font-size:.875rem;color:var(--tpx-text-secondary);background:var(--tpx-bg);cursor:pointer;transition:all var(--tpx-duration);text-decoration:none}
.tpx-page-item .tpx-page-link:hover{background:var(--tpx-surface);border-color:var(--tpx-primary);color:var(--tpx-primary)}
.tpx-page-item.active .tpx-page-link{background:var(--tpx-primary);border-color:var(--tpx-primary);color:#fff;font-weight:600}
.tpx-page-item.disabled .tpx-page-link{opacity:.4;pointer-events:none;cursor:not-allowed}
.tpx-pagination-rounded .tpx-page-item .tpx-page-link{border-radius:9999px}
.tpx-pagination-sm .tpx-page-item .tpx-page-link{min-width:28px;height:28px;font-size:.75rem}
.tpx-pagination-lg .tpx-page-item .tpx-page-link{min-width:44px;height:44px;font-size:1rem}

/* ── Offcanvas / Drawer ── */
.tpx-offcanvas-overlay{position:fixed;inset:0;background:var(--tpx-overlay);z-index:900;display:none;animation:tpx-fadeOverlay .2s ease}
.tpx-offcanvas-overlay.open{display:block}
@keyframes tpx-fadeOverlay{from{opacity:0}to{opacity:1}}
.tpx-offcanvas{position:fixed;top:0;bottom:0;left:0;width:300px;background:var(--tpx-bg);border-right:1px solid var(--tpx-border);z-index:901;transform:translateX(-100%);transition:transform .3s var(--tpx-ease);overflow-y:auto;display:flex;flex-direction:column}
.tpx-offcanvas.open{transform:translateX(0)}
.tpx-offcanvas-right{left:auto;right:0;border-right:none;border-left:1px solid var(--tpx-border);transform:translateX(100%)}
.tpx-offcanvas-right.open{transform:translateX(0)}
.tpx-offcanvas-header{padding:20px 24px;border-bottom:1px solid var(--tpx-border);display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1.125rem;flex-shrink:0}
.tpx-offcanvas-body{padding:24px;flex:1;overflow-y:auto}
.tpx-offcanvas-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--tpx-text-muted);padding:4px;line-height:1}

/* ── Rating / Stars ── */
.tpx-rating{display:inline-flex;gap:2px}
.tpx-star{font-size:1.25rem;cursor:pointer;color:var(--tpx-border);transition:color var(--tpx-duration);line-height:1}
.tpx-star.filled,.tpx-star.active{color:#f59e0b}
.tpx-star.half{background:linear-gradient(90deg,#f59e0b 50%,var(--tpx-border) 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tpx-rating-sm .tpx-star{font-size:.875rem}
.tpx-rating-lg .tpx-star{font-size:1.75rem}
.tpx-rating-readonly .tpx-star{cursor:default}

/* ── Horizontal Card ── */
.tpx-card-horizontal{display:flex;flex-direction:row;gap:0}
.tpx-card-horizontal .tpx-card-img{width:200px;min-height:120px;object-fit:cover;border-radius:var(--tpx-radius-lg) 0 0 var(--tpx-radius-lg);flex-shrink:0}
.tpx-card-horizontal .tpx-card-body{flex:1}
@media(max-width:640px){.tpx-card-horizontal{flex-direction:column}.tpx-card-horizontal .tpx-card-img{width:100%;border-radius:var(--tpx-radius-lg) var(--tpx-radius-lg) 0 0}}

/* ── Card Image Overlay ── */
.tpx-card-img-overlay{position:relative;overflow:hidden;border-radius:var(--tpx-radius-lg)}
.tpx-card-img-overlay img{width:100%;display:block;transition:transform .4s var(--tpx-ease)}
.tpx-card-img-overlay:hover img{transform:scale(1.05)}
.tpx-card-overlay-body{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#fff}
.tpx-card-overlay-title{font-size:1.125rem;font-weight:700;margin-bottom:4px}
.tpx-card-overlay-text{font-size:.875rem;opacity:.85}

/* ── Alert Dismissible ── */
.tpx-alert-dismissible{position:relative;padding-right:40px}
.tpx-alert-dismiss{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.25rem;cursor:pointer;color:currentColor;opacity:.6;line-height:1;padding:4px}
.tpx-alert-dismiss:hover{opacity:1}

/* ── Floating Label ── */
.tpx-float-label{position:relative}
.tpx-float-label .tpx-input{padding-top:22px;padding-bottom:6px}
.tpx-float-label label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.875rem;color:var(--tpx-text-muted);pointer-events:none;transition:all .15s var(--tpx-ease);background:var(--tpx-bg);padding:0 2px}
.tpx-float-label .tpx-input:focus ~ label,
.tpx-float-label .tpx-input:not(:placeholder-shown) ~ label{top:10px;transform:none;font-size:.7rem;color:var(--tpx-primary)}

/* ── Callout ── */
.tpx-callout{border-left:4px solid var(--tpx-primary);background:var(--tpx-primary-light);padding:16px 20px;border-radius:0 var(--tpx-radius-lg) var(--tpx-radius-lg) 0}
.tpx-callout-success{border-left-color:var(--tpx-success);background:var(--tpx-success-light)}
.tpx-callout-danger{border-left-color:var(--tpx-danger);background:var(--tpx-danger-light)}
.tpx-callout-warning{border-left-color:var(--tpx-warning);background:var(--tpx-warning-light)}
.tpx-callout-info{border-left-color:var(--tpx-info);background:var(--tpx-info-light)}
.tpx-callout-title{font-weight:700;margin-bottom:6px;font-size:.9375rem}

/* ── Badge with Count ── */
.tpx-badge-count{
  position:relative;display:inline-flex;
}
.tpx-badge-count .tpx-badge-bubble{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  background:var(--tpx-danger);color:#fff;border-radius:9999px;font-size:.65rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--tpx-bg);line-height:1;
}

/* ── Hero Section ── */
.tpx-hero{padding:80px 0;text-align:center}
.tpx-hero-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:var(--tpx-text);line-height:1.15;margin-bottom:16px}
.tpx-hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:var(--tpx-text-secondary);margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto}
.tpx-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Feature Grid ── */
.tpx-feature{text-align:center;padding:24px}
.tpx-feature-icon{width:56px;height:56px;border-radius:var(--tpx-radius-xl);background:var(--tpx-primary-light);color:var(--tpx-primary);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 16px}
.tpx-feature-title{font-size:1.0625rem;font-weight:700;color:var(--tpx-text);margin-bottom:8px}
.tpx-feature-text{font-size:.875rem;color:var(--tpx-text-secondary);line-height:1.7}

/* ── Tree View ── */
.tpx-tree{list-style:none;font-size:.875rem}
.tpx-tree ul{list-style:none;padding-left:20px;border-left:2px solid var(--tpx-border)}
.tpx-tree-item{padding:6px 0}
.tpx-tree-toggle{cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--tpx-text);user-select:none}
.tpx-tree-toggle::before{content:"▸";font-size:.7rem;transition:transform var(--tpx-duration);color:var(--tpx-text-muted)}
.tpx-tree-item.open>.tpx-tree-toggle::before{transform:rotate(90deg)}
.tpx-tree-leaf{padding:4px 6px 4px 24px;color:var(--tpx-text-secondary);cursor:pointer;display:flex;align-items:center;gap:6px;transition:color var(--tpx-duration)}
.tpx-tree-leaf:hover{color:var(--tpx-primary)}
.tpx-tree-children{display:none}
.tpx-tree-item.open>.tpx-tree-children{display:block}

/* ── Color Swatch ── */
.tpx-swatch{display:inline-flex;align-items:center;gap:10px}
.tpx-swatch-color{width:32px;height:32px;border-radius:var(--tpx-radius);border:1px solid rgba(0,0,0,.08);flex-shrink:0}
.tpx-swatch-info{font-size:.8125rem}
.tpx-swatch-name{font-weight:600;color:var(--tpx-text)}
.tpx-swatch-value{color:var(--tpx-text-muted);font-family:var(--tpx-font-mono)}
.tpx-swatches{display:flex;flex-wrap:wrap;gap:8px}
.tpx-swatches .tpx-swatch-color{width:40px;height:40px;cursor:pointer;transition:transform var(--tpx-duration)}
.tpx-swatches .tpx-swatch-color:hover{transform:scale(1.15)}

/* ── Comparison / Diff ── */
.tpx-diff-added{background:var(--tpx-success-light);color:var(--tpx-success);padding:2px 6px;border-radius:4px}
.tpx-diff-removed{background:var(--tpx-danger-light);color:var(--tpx-danger);padding:2px 6px;border-radius:4px;text-decoration:line-through}
.tpx-diff-changed{background:var(--tpx-warning-light);color:var(--tpx-warning);padding:2px 6px;border-radius:4px}

/* ── Command Palette / Search ── */
.tpx-command{background:var(--tpx-bg);border-radius:var(--tpx-radius-xl);box-shadow:var(--tpx-shadow-xl);border:1px solid var(--tpx-border);overflow:hidden}
.tpx-command-input{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--tpx-border)}
.tpx-command-icon{font-size:1.125rem;color:var(--tpx-text-muted);flex-shrink:0}
.tpx-command-input input{flex:1;border:none;background:none;font-size:1rem;color:var(--tpx-text);outline:none;font-family:inherit}
.tpx-command-list{max-height:320px;overflow-y:auto}
.tpx-command-group-label{padding:8px 16px;font-size:.75rem;font-weight:600;color:var(--tpx-text-muted);text-transform:uppercase;letter-spacing:.06em}
.tpx-command-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.875rem;cursor:pointer;color:var(--tpx-text);transition:background var(--tpx-duration)}
.tpx-command-item:hover,.tpx-command-item.selected{background:var(--tpx-surface);color:var(--tpx-primary)}
.tpx-command-item-icon{font-size:1rem;width:20px;text-align:center;color:var(--tpx-text-muted)}
.tpx-command-item-meta{margin-left:auto;font-size:.75rem;color:var(--tpx-text-muted)}

/* ── Tags / Multi-Select Input ── */
.tpx-tags-input{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px;border:1px solid var(--tpx-border);border-radius:var(--tpx-radius);background:var(--tpx-bg);min-height:42px;align-items:center;cursor:text;transition:border-color var(--tpx-duration)}
.tpx-tags-input:focus-within{border-color:var(--tpx-border-focus);box-shadow:0 0 0 3px var(--tpx-primary-light)}
.tpx-tags-input input{border:none;background:none;outline:none;font-size:.875rem;color:var(--tpx-text);min-width:80px;flex:1;font-family:inherit}
.tpx-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:9999px;font-size:.8125rem;font-weight:500;background:var(--tpx-primary-light);color:var(--tpx-primary)}
.tpx-tag-remove{cursor:pointer;opacity:.6;font-size:.875rem;display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;transition:opacity var(--tpx-duration)}
.tpx-tag-remove:hover{opacity:1}

/* ── Sidebar Layout ── */
.tpx-layout{display:flex;min-height:100vh}
.tpx-sidebar{width:260px;flex-shrink:0;border-right:1px solid var(--tpx-border);background:var(--tpx-surface);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.tpx-sidebar-sm{width:200px} .tpx-sidebar-lg{width:320px}
.tpx-sidebar-header{padding:20px 20px 12px;border-bottom:1px solid var(--tpx-border);flex-shrink:0}
.tpx-sidebar-nav{padding:12px 8px;flex:1;overflow-y:auto}
.tpx-sidebar-section-title{padding:8px 12px 4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tpx-text-muted)}
.tpx-sidebar-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--tpx-radius-sm);font-size:.875rem;color:var(--tpx-text-secondary);cursor:pointer;text-decoration:none;transition:all var(--tpx-duration);font-weight:500}
.tpx-sidebar-item:hover{background:var(--tpx-surface-hover);color:var(--tpx-text)}
.tpx-sidebar-item.active{background:var(--tpx-primary-light);color:var(--tpx-primary);font-weight:600}
.tpx-sidebar-icon{width:18px;flex-shrink:0;opacity:.7}
.tpx-sidebar-badge{margin-left:auto;font-size:.7rem;padding:1px 7px;border-radius:9999px;background:var(--tpx-primary);color:#fff;font-weight:700}
.tpx-main-content{flex:1;overflow-y:auto;padding:32px}
@media(max-width:768px){
  .tpx-layout{flex-direction:column}
  .tpx-sidebar{width:100%;height:auto;position:relative;border-right:none;border-bottom:1px solid var(--tpx-border)}
  .tpx-sidebar-nav{display:flex;flex-wrap:wrap;gap:4px;padding:8px}
  .tpx-main-content{padding:20px}
}

/* ── Carousel ── */
.tpx-carousel{overflow:hidden;position:relative;border-radius:var(--tpx-radius-lg)}
.tpx-carousel-track{display:flex;transition:transform .4s var(--tpx-ease)}
.tpx-carousel-slide{min-width:100%;flex-shrink:0}
.tpx-carousel-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.tpx-carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--tpx-border);cursor:pointer;transition:all var(--tpx-duration)}
.tpx-carousel-dot.active{background:var(--tpx-primary);width:24px;border-radius:9999px}
.tpx-carousel-prev,.tpx-carousel-next{position:absolute;top:50%;transform:translateY(-50%);background:var(--tpx-bg);border:1px solid var(--tpx-border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;z-index:2;opacity:.85;transition:opacity var(--tpx-duration)}
.tpx-carousel-prev{left:12px} .tpx-carousel-next{right:12px}
.tpx-carousel-prev:hover,.tpx-carousel-next:hover{opacity:1}

/* ── Tooltip variants ── */
.tpx-tooltip-right::after{bottom:auto;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}
.tpx-tooltip-left::after{bottom:auto;top:50%;left:auto;right:calc(100% + 8px);transform:translateY(-50%)}
.tpx-tooltip-bottom::after{bottom:auto;top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.tpx-tooltip-dark::after{background:#1e293b;color:#f8fafc}
.tpx-tooltip-light::after{background:var(--tpx-bg);color:var(--tpx-text);border:1px solid var(--tpx-border);box-shadow:var(--tpx-shadow)}

/* ── Input Sizes ── */
.tpx-input-xs{height:28px;padding:0 8px;font-size:.75rem}
.tpx-input-sm{height:34px;padding:0 10px;font-size:.8125rem}
.tpx-input-lg{height:50px;padding:0 16px;font-size:1rem}
.tpx-input-xl{height:58px;padding:0 20px;font-size:1.125rem}

/* ── Textarea auto-resize hint ── */
.tpx-textarea-sm{min-height:80px}
.tpx-textarea-lg{min-height:200px}
.tpx-textarea-xl{min-height:320px}

/* ── Number Input / Quantity ── */
.tpx-quantity{display:inline-flex;align-items:center;border:1px solid var(--tpx-border);border-radius:var(--tpx-radius);overflow:hidden}
.tpx-quantity-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--tpx-surface);border:none;cursor:pointer;font-size:1.25rem;color:var(--tpx-text-secondary);transition:background var(--tpx-duration)}
.tpx-quantity-btn:hover{background:var(--tpx-surface-hover)}
.tpx-quantity input{width:50px;height:36px;border:none;text-align:center;font-size:.875rem;color:var(--tpx-text);background:var(--tpx-bg);border-left:1px solid var(--tpx-border);border-right:1px solid var(--tpx-border);outline:none}

/* ── Notification Banner ── */
.tpx-banner{width:100%;padding:12px 20px;display:flex;align-items:center;gap:12px;font-size:.875rem}
.tpx-banner-success{background:var(--tpx-success);color:#fff}
.tpx-banner-danger{background:var(--tpx-danger);color:#fff}
.tpx-banner-warning{background:var(--tpx-warning);color:#fff}
.tpx-banner-info{background:var(--tpx-info);color:#fff}
.tpx-banner-primary{background:var(--tpx-primary);color:#fff}
.tpx-banner-close{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:1.25rem;opacity:.75;padding:0 4px;display:flex;align-items:center}
.tpx-banner-close:hover{opacity:1}

/* ── Section / Page Layout Helpers ── */
.tpx-section-lg{padding:80px 0}
.tpx-section-sm{padding:24px 0}
.tpx-page-header{padding:32px 0 24px;border-bottom:1px solid var(--tpx-border);margin-bottom:32px}
.tpx-page-header h1,.tpx-page-header .tpx-page-title{font-size:1.75rem;font-weight:800;color:var(--tpx-text)}
.tpx-page-header p,.tpx-page-header .tpx-page-desc{font-size:.9375rem;color:var(--tpx-text-secondary);margin-top:6px}

/* ── 12-col grid rows ── */
.tpx-row{display:flex;flex-wrap:wrap;margin:0 -10px}
.tpx-row>[class*="tpx-col-"]{padding:0 10px}
.tpx-col-1{width:8.333%} .tpx-col-2{width:16.667%} .tpx-col-3{width:25%}
.tpx-col-4{width:33.333%} .tpx-col-5{width:41.667%} .tpx-col-6{width:50%}
.tpx-col-7{width:58.333%} .tpx-col-8{width:66.667%} .tpx-col-9{width:75%}
.tpx-col-10{width:83.333%} .tpx-col-11{width:91.667%} .tpx-col-12{width:100%}
.tpx-col-auto{width:auto;flex:1}

/* ── Custom scrollbar ── */
.tpx-scroll{scrollbar-width:thin;scrollbar-color:var(--tpx-border) transparent}
.tpx-scroll::-webkit-scrollbar{width:6px;height:6px}
.tpx-scroll::-webkit-scrollbar-track{background:transparent}
.tpx-scroll::-webkit-scrollbar-thumb{background:var(--tpx-border);border-radius:9999px}
.tpx-scroll::-webkit-scrollbar-thumb:hover{background:var(--tpx-text-muted)}

/* ── Image utilities ── */
.tpx-img-rounded{border-radius:var(--tpx-radius-lg);overflow:hidden}
.tpx-img-circle{border-radius:50%;overflow:hidden}
.tpx-img-cover{object-fit:cover;width:100%;height:100%}
.tpx-img-contain{object-fit:contain;width:100%;height:100%}
.tpx-img-fluid{max-width:100%;height:auto}
.tpx-aspect-16-9{aspect-ratio:16/9;overflow:hidden}
.tpx-aspect-4-3{aspect-ratio:4/3;overflow:hidden}
.tpx-aspect-1-1{aspect-ratio:1/1;overflow:hidden}
.tpx-aspect-2-3{aspect-ratio:2/3;overflow:hidden}

/* ── Overlay helpers ── */
.tpx-overlay-dark{position:relative}
.tpx-overlay-dark::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);border-radius:inherit}
.tpx-overlay-gradient{position:relative}
.tpx-overlay-gradient::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);border-radius:inherit}

/* ── Status indicators ── */
.tpx-status{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:500}
.tpx-status::before{content:"";width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tpx-status-online::before{background:var(--tpx-success);animation:tpx-ping 1.5s infinite}
.tpx-status-offline::before{background:var(--tpx-text-muted)}
.tpx-status-busy::before{background:var(--tpx-danger);animation:tpx-ping 1.5s infinite}
.tpx-status-away::before{background:var(--tpx-warning)}

/* ── Focus Ring ── */
.tpx-focus-ring:focus{outline:none;box-shadow:0 0 0 3px var(--tpx-primary-light),0 0 0 1px var(--tpx-primary)}

/* ── Markdown prose ── */
.tpx-prose{max-width:68ch;color:var(--tpx-text-secondary);line-height:1.8}
.tpx-prose h1,.tpx-prose h2,.tpx-prose h3,.tpx-prose h4{color:var(--tpx-text);margin:1.5em 0 .6em;font-weight:700}
.tpx-prose p{margin:1em 0}
.tpx-prose a{color:var(--tpx-primary);text-decoration:underline;text-underline-offset:3px}
.tpx-prose code{font-family:var(--tpx-font-mono);font-size:.85em;background:var(--tpx-surface);padding:2px 6px;border-radius:4px;color:var(--tpx-danger)}
.tpx-prose pre{background:var(--tpx-surface);border:1px solid var(--tpx-border);border-radius:var(--tpx-radius-lg);padding:20px;overflow-x:auto;margin:1.5em 0}
.tpx-prose pre code{background:none;padding:0;color:var(--tpx-text)}
.tpx-prose blockquote{border-left:4px solid var(--tpx-primary);background:var(--tpx-surface);padding:12px 16px;border-radius:0 var(--tpx-radius) var(--tpx-radius) 0;margin:1.5em 0;font-style:italic}
.tpx-prose ul,.tpx-prose ol{padding-left:1.5em;margin:1em 0}
.tpx-prose li{margin:.4em 0}
.tpx-prose hr{border:none;border-top:1px solid var(--tpx-border);margin:2em 0}
.tpx-prose table{width:100%;border-collapse:collapse;margin:1.5em 0}
.tpx-prose table th,.tpx-prose table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--tpx-border)}
.tpx-prose table th{font-weight:600;background:var(--tpx-surface)}
.tpx-prose img{border-radius:var(--tpx-radius-lg);margin:1.5em 0}

/* ── Text color helpers ── */
.tpx-text-primary{color:var(--tpx-primary)} .tpx-text-success{color:var(--tpx-success)}
.tpx-text-danger{color:var(--tpx-danger)} .tpx-text-warning{color:var(--tpx-warning)}
.tpx-text-info{color:var(--tpx-info)} .tpx-text-white{color:#fff} .tpx-text-dark{color:#1e293b}
.tpx-text-right{text-align:right} .tpx-text-left{text-align:left}
.tpx-text-italic{font-style:italic} .tpx-text-underline{text-decoration:underline}
.tpx-text-strike{text-decoration:line-through} .tpx-text-nowrap{white-space:nowrap}
.tpx-text-break{word-break:break-all} .tpx-text-upper{text-transform:uppercase} .tpx-text-lower{text-transform:lowercase} .tpx-text-cap{text-transform:capitalize}
.tpx-lh-1{line-height:1} .tpx-lh-tight{line-height:1.3} .tpx-lh-normal{line-height:1.6} .tpx-lh-loose{line-height:2}
.tpx-ls-tight{letter-spacing:-.03em} .tpx-ls-wide{letter-spacing:.05em} .tpx-ls-wider{letter-spacing:.1em}

/* ── Display / Flex extras ── */
.tpx-flex-1{flex:1} .tpx-flex-none{flex:none} .tpx-flex-auto{flex:auto}
.tpx-flex-row{flex-direction:row} .tpx-flex-col{flex-direction:column}
.tpx-flex-wrap{flex-wrap:wrap} .tpx-flex-nowrap{flex-wrap:nowrap}
.tpx-items-start{align-items:flex-start} .tpx-items-end{align-items:flex-end} .tpx-items-center{align-items:center} .tpx-items-stretch{align-items:stretch}
.tpx-justify-start{justify-content:flex-start} .tpx-justify-end{justify-content:flex-end} .tpx-justify-center{justify-content:center} .tpx-justify-between{justify-content:space-between} .tpx-justify-around{justify-content:space-around} .tpx-justify-evenly{justify-content:space-evenly}
.tpx-self-start{align-self:flex-start} .tpx-self-end{align-self:flex-end} .tpx-self-center{align-self:center} .tpx-self-stretch{align-self:stretch}
.tpx-order-first{order:-1} .tpx-order-last{order:999}
.tpx-inline{display:inline} .tpx-inline-flex{display:inline-flex} .tpx-grid{display:grid} .tpx-inline-grid{display:inline-grid}

/* ── Spacing extras ── */
.tpx-gap-0{gap:0} .tpx-gap-1{gap:4px} .tpx-gap-2{gap:8px} .tpx-gap-3{gap:12px}
.tpx-gap-4{gap:16px} .tpx-gap-5{gap:20px} .tpx-gap-6{gap:24px} .tpx-gap-7{gap:28px} .tpx-gap-8{gap:32px}
.tpx-mx-auto{margin-left:auto;margin-right:auto} .tpx-my-auto{margin-top:auto;margin-bottom:auto}
.tpx-space-x-1>*+*{margin-left:4px} .tpx-space-x-2>*+*{margin-left:8px} .tpx-space-x-3>*+*{margin-left:12px} .tpx-space-x-4>*+*{margin-left:16px}
.tpx-space-y-1>*+*{margin-top:4px} .tpx-space-y-2>*+*{margin-top:8px} .tpx-space-y-3>*+*{margin-top:12px} .tpx-space-y-4>*+*{margin-top:16px}

/* ── Sizing ── */
.tpx-w-auto{width:auto} .tpx-w-fit{width:fit-content} .tpx-w-screen{width:100vw} .tpx-w-min{width:min-content} .tpx-w-max{width:max-content}
.tpx-h-full{height:100%} .tpx-h-screen{height:100vh} .tpx-h-auto{height:auto}
.tpx-min-h-screen{min-height:100vh} .tpx-max-w-full{max-width:100%}

/* ── Z-index ── */
.tpx-z-0{z-index:0} .tpx-z-10{z-index:10} .tpx-z-20{z-index:20} .tpx-z-50{z-index:50}
.tpx-z-sticky{z-index:var(--tpx-z-sticky)} .tpx-z-modal{z-index:var(--tpx-z-modal)}

/* ── Cursor ── */
.tpx-cursor-pointer{cursor:pointer} .tpx-cursor-not-allowed{cursor:not-allowed} .tpx-cursor-grab{cursor:grab} .tpx-cursor-text{cursor:text} .tpx-cursor-default{cursor:default}

/* ── Disabled state ── */
.tpx-disabled,.tpx-disabled *{opacity:.45;pointer-events:none;cursor:not-allowed}

/* ── Truncate multi-line ── */
.tpx-truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpx-truncate-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── Ratio / Embed ── */
.tpx-ratio{position:relative;width:100%}
.tpx-ratio-16-9::before{display:block;padding-top:56.25%;content:""}
.tpx-ratio-4-3::before{display:block;padding-top:75%;content:""}
.tpx-ratio-1-1::before{display:block;padding-top:100%;content:""}
.tpx-ratio > *,.tpx-ratio iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ── Visually hidden (a11y) ── */
.tpx-visually-hidden,.tpx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Sticky top/bottom ── */
.tpx-sticky-top{position:sticky;top:0;z-index:var(--tpx-z-sticky)}
.tpx-sticky-bottom{position:sticky;bottom:0;z-index:var(--tpx-z-sticky)}
.tpx-fixed-top{position:fixed;top:0;left:0;right:0;z-index:var(--tpx-z-sticky)}
.tpx-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:var(--tpx-z-sticky)}

/* ── Gradient text ── */
.tpx-gradient-text{background:linear-gradient(135deg,var(--tpx-primary),var(--tpx-info));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tpx-gradient-primary{background:linear-gradient(135deg,var(--tpx-primary),#a78bfa)}
.tpx-gradient-success{background:linear-gradient(135deg,var(--tpx-success),var(--tpx-info))}
.tpx-gradient-warm{background:linear-gradient(135deg,#f59e0b,#ef4444)}

/* ── Glass morphism ── */
.tpx-glass{background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);box-shadow:var(--tpx-shadow-lg)}
.tpx-dark .tpx-glass{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08)}

/* ── Divider directions ── */
.tpx-divider-vertical{display:inline-block;width:1px;height:1.2em;background:var(--tpx-border);margin:0 8px;vertical-align:middle}

/* ── Skip link (a11y) ── */
.tpx-skip-link{position:absolute;top:-40px;left:0;background:var(--tpx-primary);color:#fff;padding:8px 16px;z-index:9999;transition:top .2s}
.tpx-skip-link:focus{top:0}

/* ── Resize handle ── */
.tpx-resize{resize:both;overflow:auto}
.tpx-resize-x{resize:horizontal;overflow:auto}
.tpx-resize-y{resize:vertical;overflow:auto}