/* shadcn/ui-style skin, switched on by the "sh" class on the root (next to "ui").
   Follows shadcn/ui's visual conventions (neutral surfaces, 1px borders, 8–12px radius,
   quiet shadows, 14px UI text, soft focus rings). No shadcn code is used. */

.ui.sh {
  --ring: color-mix(in srgb, var(--primary) 40%, transparent);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  font-family: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}
.ui.sh.t-wire {
  --bg: #FAFAFA; --surface: #FFFFFF; --subtle: #F4F4F5; --primary: #18181B; --primary-strong: #09090B; --primary-soft: #F4F4F5;
  --accent: #F59E0B; --text: #09090B; --text2: #3F3F46; --muted: #71717A; --border: #E4E4E7;
  --ok: #15803D; --ok-soft: #F0FDF4; --warn: #B45309; --warn-soft: #FFFBEB; --bad: #DC2626; --bad-soft: #FEF2F2; --display: inherit;
}
.ui.sh.t-kadak {
  --bg: #FAFAF9; --surface: #FFFFFF; --subtle: #F5F5F4; --primary: #7A3E1D; --primary-strong: #5A2C13; --primary-soft: #F7EEE7;
  --accent: #D97706; --text: #1C1917; --text2: #44403C; --muted: #78716C; --border: #E7E5E4;
  --ok: #15803D; --ok-soft: #F0FDF4; --warn: #B45309; --warn-soft: #FFFBEB; --bad: #DC2626; --bad-soft: #FEF2F2; --display: inherit;
}

/* Type */
.sh .h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.sh .h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.sh .h3 { font-size: 14px; font-weight: 600; }
.sh .big { font-weight: 700; letter-spacing: -0.035em; }
.sh .sm { font-size: 13px; color: var(--muted); }
.sh .xs { font-size: 12px; color: var(--muted); }
.sh .xs.b { letter-spacing: .02em; font-weight: 500; }
.sh .b { font-weight: 600; }
.sh .total { font-size: 16px; font-weight: 600; }
.sh .kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -0.035em; }
.sh .quote { border-left: 2px solid var(--border); font-style: normal; color: var(--text2); }

/* Buttons: default, outline, ghost, destructive */
.sh .btn { min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; border: 1px solid transparent; gap: 8px; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
.sh .btn-p { background: var(--primary); color: #fff; box-shadow: var(--shadow-xs); }
.sh .btn-p:hover { background: color-mix(in srgb, var(--primary) 88%, #fff); }
.sh .btn-s { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-xs); }
.sh .btn-s:hover { background: var(--subtle); }
.sh .btn-q { background: transparent; color: var(--text); border-color: transparent; }
.sh .btn-q:hover { background: var(--subtle); }
.sh .btn-d { background: var(--bad); border-color: var(--bad); color: #fff; }
.sh .btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 6px; }
.sh .foot .btn { min-height: 44px; font-size: 15px; }
.sh :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Badges */
.sh .chip { border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--surface); color: var(--text2); }
.sh .c-solid { background: var(--primary); border-color: transparent; color: #fff; }
.sh .c-brand { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary-strong); }
.sh .c-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.sh .c-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.sh .c-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }

/* Cards and panels */
.sh .card, .sh .panel { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); padding: 20px; }
.sh .card-tight { padding: 12px 14px; }
.sh .tcard { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); }
.sh .tcard:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.sh .tcard .tn { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.sh .tcard.hot { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.sh .tcard.empty { background: transparent; border-style: dashed; box-shadow: none; }
.sh .tcard.sel { box-shadow: 0 0 0 2px var(--primary); }

/* Inputs */
.sh .field { font-size: 13px; font-weight: 500; color: var(--text); gap: 6px; }
.sh .input { min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; background: var(--surface); box-shadow: var(--shadow-xs); }
.sh .input:focus { outline: none; border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); box-shadow: 0 0 0 3px var(--ring); }
.sh .search { min-height: 40px; border-radius: 8px; padding: 0 12px; font-size: 14px; box-shadow: var(--shadow-xs); }

/* Alerts */
.sh .note { border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 400; }
.sh .n-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.sh .n-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.sh .n-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }

/* App bars */
.sh .top, .sh .hdr { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
.sh .hdr { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.sh .foot { border-top: 1px solid var(--border); background: var(--surface); }
.sh .logo { border-radius: 10px; font-weight: 600; }
.sh .logo-lg { border-radius: 24px; }
.sh .lang { border-radius: 8px; min-height: 32px; font-weight: 500; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }

/* Sidebar navigation */
.sh .side { background: var(--bg); border-right: 1px solid var(--border); padding: 16px 12px; gap: 2px; }
.sh .nav { min-height: 36px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text2); }
.sh .nav:hover { background: var(--subtle); color: var(--text); }
.sh .nav.on { background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; }

/* Tables */
.sh .tbl-box { border-radius: 12px; box-shadow: var(--shadow-xs); }
.sh .tbl th { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--bg); }
.sh .tbl td { font-size: 14px; }
.sh .tbl tr:hover td { background: var(--bg); }

/* Sheets, dialogs, option rows */
.sh .scrim { background: rgba(0, 0, 0, .5); }
.sh .overlay { background: rgba(0, 0, 0, .5); }
.sh .sheet { border-radius: 16px 16px 0 0; border-top: 1px solid var(--border); }
.sh .modal { border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 10px 38px -10px rgba(0, 0, 0, .35), 0 10px 20px -15px rgba(0, 0, 0, .2); }
.sh .opt { min-height: 48px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.sh .opt:hover { background: var(--subtle); }
.sh .opt.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }

/* Small parts */
.sh .divider { background: var(--border); }
.sh .step { border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.sh .otp span { border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.sh .voucher { border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--primary) 50%, transparent); background: var(--primary-soft); }
.sh .ph { border-radius: 8px; background: var(--subtle); }
.sh .okdot { background: var(--ok-soft); color: var(--ok); }
.sh .cta-bar { border-radius: 12px; font-size: 15px; font-weight: 500; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.sh .item { border-bottom: 1px solid var(--border); }
.sh .bars span { border-radius: 4px 4px 0 0; }
.sh .swatch.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.sh .tabs { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); }