:root{
  --tiw-wrap-pad: clamp(12px, 2vw, 20px);
  --tiw-title: #0b3d2e;
  --tiw-subtitle: rgba(0,0,0,.7);
  --tiw-card-bg: transparent;
  --tiw-card-border: rgba(0,0,0,.12);
  --tiw-text: #111;
  --tiw-muted: rgba(0,0,0,.65);
  --tiw-shadow: none;
  --tiw-card-min: 320px;
  --tiw-max-width: 100%;
  --tiw-value-scale: 0.85;
  --tiw-header-gap: 10px;
}

/* Wrapper */
.tiw-wrap{ width:100%; max-width: var(--tiw-max-width); border-radius:20px; padding: var(--tiw-wrap-pad); margin-left:auto; margin-right:auto; box-sizing: border-box; }
.tiw-wrap.tiw-no-pad{ padding:0; }
.tiw-header{ margin-bottom: var(--tiw-header-gap); }
.tiw-title{ margin:0; font-size: clamp(1.1rem, 3.2vw, 1.6rem); font-weight:800; color: var(--tiw-title); letter-spacing:.2px;}
.tiw-subtitle{ margin:.25rem 0 0; font-size: .95rem; color: var(--tiw-subtitle); }

/* Grid layout */
.tiw-widget{ display:grid; grid-template-columns: 1fr; gap: clamp(12px, 2.2vw, 24px); }
.tiw-auto{ grid-template-columns: 1fr; }
@media (min-width: 640px){
  .tiw-auto{ grid-template-columns: repeat(auto-fit, minmax(var(--tiw-card-min), 1fr)); }
}

/* Cards */
.tiw-card{ padding: clamp(10px, 2vw, 16px); border-radius: 14px; background: var(--tiw-card-bg); border: 1px solid var(--tiw-card-border); box-shadow: var(--tiw-shadow); }
.tiw-row{ display:flex; align-items:center; gap: clamp(10px, 2vw, 14px); }
.tiw-stack{ display:flex; flex-direction:column; min-width:0; }

.tiw-icon{ width: clamp(20px, 2.8vw, 28px); height: clamp(20px, 2.8vw, 28px); flex: 0 0 auto; opacity: .95; color: var(--tiw-text); }

.tiw-value{ font-size: calc(clamp(1.5rem, 4.6vw, 2.2rem) * var(--tiw-value-scale)); line-height:1.05; font-weight: 900; color: var(--tiw-text); word-break: break-word; }
.tiw-label{ color: var(--tiw-muted); margin-top: .25rem; font-size: clamp(.9rem, 2.2vw, .98rem); }

/* Compact option */
.tiw-compact .tiw-card{ padding: clamp(8px, 1.6vw, 12px); }
.tiw-compact .tiw-value{ font-size: calc(clamp(1.3rem, 4vw, 1.9rem) * var(--tiw-value-scale)); }
.tiw-compact .tiw-label{ font-size: clamp(.85rem, 2vw, .95rem); }
.tiw-compact { --tiw-wrap-pad: clamp(8px, 1.6vw, 14px); --tiw-header-gap: 8px; }

/* Variants */
.tiw-variant-transparent{ --tiw-card-bg: rgba(255,255,255,.10); --tiw-card-border: rgba(255,255,255,.25); --tiw-text: #fff; --tiw-muted: rgba(255,255,255,.85); --tiw-title: #ffffff; --tiw-subtitle: rgba(255,255,255,.82); --tiw-shadow: 0 10px 30px rgba(2, 6, 23, 0.18); backdrop-filter: blur(6px); }
.tiw-variant-card{ --tiw-card-bg: #ffffff; --tiw-card-border: rgba(0,0,0,.08); --tiw-text: #101828; --tiw-muted: #475467; --tiw-title: #0b3d2e; --tiw-subtitle: #475467; --tiw-shadow: 0 10px 30px rgba(2, 6, 23, 0.08); }
.tiw-variant-glass{ --tiw-card-bg: rgba(255,255,255,.12); --tiw-card-border: rgba(255,255,255,.25); --tiw-text: #fff; --tiw-muted: rgba(255,255,255,.85); --tiw-title: #ffffff; --tiw-subtitle: rgba(255,255,255,.82); --tiw-shadow: 0 12px 34px rgba(2, 6, 23, 0.22); backdrop-filter: blur(10px); }

/* Dark override */
.tiw-wrap.tiw-dark{ --tiw-text:#fff; --tiw-muted:rgba(255,255,255,.8); --tiw-card-border:rgba(255,255,255,.25); --tiw-title:#fff; --tiw-subtitle:rgba(255,255,255,.8); }