/* Subscription Tracker Design System — shared foundation, 2026-09-29 */
:root{
  color-scheme:light;
  --ds-font-sans:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ds-font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --ds-bg:var(--bg,#F0F4E0);
  --ds-surface:var(--panel,var(--card,#FFFFFF));
  --ds-surface-subtle:var(--panel2,var(--step-bg,#F1F4F9));
  --ds-border:var(--line,var(--border,#C3CAD4));
  --ds-text:var(--text,#101828);
  --ds-text-muted:var(--muted,var(--text2,#4E5766));
  --ds-text-dim:var(--dim,var(--text2,#646E7C));
  --ds-action:var(--blue,var(--accent,#1A47AB));
  --ds-success:var(--green,var(--ok,#08603E));
  --ds-warning:var(--amber,#7E4900);
  --ds-danger:var(--red,#B92329);
  --ds-info-bg:var(--blue-bg,var(--accent-lt,#E8EFFD));
  --ds-success-bg:var(--green-bg,var(--ok-lt,#E3F6EE));
  --ds-warning-bg:var(--amber-bg,#FDF3E2);
  --ds-danger-bg:var(--red-bg,#FDECEC);
  --ds-font-2xs:10px;
  --ds-font-xs:11px;
  --ds-font-sm:12px;
  --ds-font-md:14px;
  --ds-font-lg:16px;
  --ds-font-xl:20px;
  --ds-font-2xl:24px;
  --ds-font-display:32px;
  --ds-line-tight:1.25;
  --ds-line-body:1.5;
  --ds-weight-regular:400;
  --ds-weight-medium:500;
  --ds-weight-semibold:600;
  --ds-weight-bold:700;
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:20px;
  --ds-space-6:24px;
  --ds-space-8:32px;
  --ds-space-10:40px;
  --ds-radius-sm:8px;
  --ds-radius-control:12px;
  --ds-radius-item:16px;
  --ds-radius-card:20px;
  --ds-radius-pill:999px;
  --ds-control-sm:36px;
  --ds-control-md:44px;
  --ds-control-lg:48px;
  --ds-shadow-card:var(--shadow,0 1px 3px rgba(16,24,40,.06));
  --ds-shadow-overlay:var(--shadow2,0 8px 24px rgba(16,24,40,.10));
  --ds-motion-press:var(--mi-press,var(--dur-tap,80ms));
  --ds-motion-feedback:var(--mi-release,var(--dur-fast,140ms));
  --ds-motion-reveal:var(--dur-menu,180ms);
  --ds-motion-modal:var(--dur-sheet,280ms);
  --ds-motion-data:var(--dur-slow,500ms);
}
html[data-theme='dark']{color-scheme:dark}
body{font-family:var(--ds-font-sans);color:var(--ds-text)}
button,input,select,textarea{font-family:inherit;color:inherit}
.mono,.amt,.price,.sprice,.pa-amt{font-family:var(--ds-font-mono);font-variant-numeric:tabular-nums}

/* Focus, disabled and validation states shared by every page. */
:where(button,a,input,select,textarea,[role='button'],[tabindex]):focus-visible{
  outline:3px solid rgba(29,79,191,.30);
  outline-offset:2px;
}
:where(button,input,select,textarea):disabled,
:where(button,[role='button'])[aria-disabled='true']{
  opacity:.52;
  cursor:not-allowed;
  filter:saturate(.65);
}
.fld.bad input,.fld.bad select,.fld.bad textarea,.form input[aria-invalid='true']{
  border-color:var(--ds-danger);
  box-shadow:0 0 0 3px rgba(185,35,41,.12);
}

/* Fields: one height, radius and spacing scale. */
.fld{margin-bottom:var(--ds-space-3)}
.fld label,.form label{font-size:var(--ds-font-sm);line-height:var(--ds-line-tight);margin-bottom:var(--ds-space-1)}
.fld input:not([type='checkbox']):not([type='radio']):not(.st-val),
.fld select,.datetrigger,.form input,input.search,#loginPwd,#loginUser{
  min-height:var(--ds-control-lg);
  border-radius:var(--ds-radius-control);
  padding-inline:14px;
  border-color:var(--ds-border);
}
.fld textarea{min-height:84px;border-radius:var(--ds-radius-control);padding:12px 14px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.form input:focus,input.search:focus,#loginPwd:focus,#loginUser:focus{
  border-color:var(--ds-action);
}

/* Buttons: compact controls on desktop, full touch targets on mobile. */
.addbtn,.paybtn,.joinbtn,.pick,.delbtn,.createbtn,.cloud-link,.member-cloud-link,
.hero-btn,.download-btn,.platform-tab,.shareopt,.reqbanner button{min-height:var(--ds-control-sm)}
.btn,.payall,.send,.lgbtn{min-height:var(--ds-control-md)}
.addbtn,.paybtn,.addapp,.payall,.btn,.lgbtn,.linkbtn,.delbtn,.createbtn,
.pick,.send,.joinbtn,.cloud-link,.member-cloud-link,.hero-btn{border-radius:var(--ds-radius-pill)}

/* Cards and list items use three predictable corner levels. */
.mcard,.dcard,.form,.cloud-promo{border-radius:var(--ds-radius-card);border-color:var(--ds-border);box-shadow:var(--ds-shadow-card)}
.row,.srow,.trow,.step{border-radius:var(--ds-radius-item);border-color:var(--ds-border);box-shadow:var(--ds-shadow-card)}
.row,.srow,.trow{padding:var(--ds-space-3) var(--ds-space-4)}
.form,.cloud-promo{padding:var(--ds-space-4)}
.shareopt,.ok,.url-box,.download-btn,.platform-tab{border-radius:var(--ds-radius-control)}

/* Semantic states. Existing status classes now share one capsule shape. */
.badge,.seattag,.availtag,.avail,.ds-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ds-space-1);
  border-radius:var(--ds-radius-pill);
  line-height:var(--ds-line-tight);
  font-weight:var(--ds-weight-semibold);
  white-space:nowrap;
}
.b-red,.ds-status-danger{background:var(--ds-danger-bg);color:var(--ds-danger)}
.b-amber,.ds-status-warning{background:var(--ds-warning-bg);color:var(--ds-warning)}
.b-green,.ds-status-success{background:var(--ds-success-bg);color:var(--ds-success)}
.b-blue,.ds-status-info{background:var(--ds-info-bg);color:var(--ds-action)}
.ds-status-neutral{background:var(--ds-surface-subtle);color:var(--ds-text-muted)}
.ds-status{padding:5px 9px;font-size:var(--ds-font-xs)}

/* Reusable type and spacing utilities for new screens. */
.ds-text-caption{font-size:var(--ds-font-xs);line-height:var(--ds-line-tight);color:var(--ds-text-muted)}
.ds-text-body{font-size:var(--ds-font-md);line-height:var(--ds-line-body)}
.ds-text-title{font-size:var(--ds-font-lg);line-height:var(--ds-line-tight);font-weight:var(--ds-weight-bold)}
.ds-text-page{font-size:var(--ds-font-2xl);line-height:var(--ds-line-tight);font-weight:var(--ds-weight-bold)}
.ds-text-kpi{font-size:var(--ds-font-display);line-height:1;font-weight:var(--ds-weight-bold);font-variant-numeric:tabular-nums}
.ds-stack{display:flex;flex-direction:column;gap:var(--ds-space-3)}
.ds-cluster{display:flex;align-items:center;gap:var(--ds-space-2);flex-wrap:wrap}

@media(max-width:480px){
  .addbtn,.paybtn,.joinbtn,.pick,.delbtn,.createbtn,.cloud-link,.member-cloud-link,
  .hero-btn,.download-btn,.platform-tab,.shareopt,.reqbanner button,.btn,.payall,.send,.lgbtn{min-height:44px}
  input,select,textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    scroll-behavior:auto!important;
    transition-duration:0s!important;
    transition-delay:0s!important;
  }
}
/* Micro-interaction states — tap, loading, success and error. */
:root{
  --ds-feedback-ring:0 0 0 3px rgba(29,79,191,.14);
  --ds-success-ring:0 0 0 3px rgba(8,96,62,.14);
  --ds-danger-ring:0 0 0 3px rgba(185,35,41,.14);
}

/* Large content cards stay still. Only controls inside them respond. */
.mcard,.mcard:active,.row,.row:active,.srow,.srow:active,
.trow,.trow:active,.joinrow,.joinrow:active,.mav,.mav:active{
  transform:none;
}
.ds-interactive-card{
  transition:border-color var(--ds-motion-feedback) ease,
             background-color var(--ds-motion-feedback) ease,
             box-shadow var(--ds-motion-feedback) ease;
}
.ds-interactive-card:active{box-shadow:var(--ds-feedback-ring)}

/* Loading keeps the label visible, adds a spinner and prevents duplicate taps. */
:where(button,[role='button'])[aria-busy='true']{
  cursor:progress;
  pointer-events:none;
  opacity:.78;
}
:where(button,[role='button']).is-loading::before,
#syncbar.show::before,.mtoast.loading::before{
  content:'';
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 14px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:ds-spin .72s linear infinite;
}
:where(button,[role='button']).is-loading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#syncbar.show{
  display:flex;
  align-items:center;
  gap:9px;
}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* Completion feedback changes color without moving layout. */
:where(button,[role='button']).is-success{
  border-color:var(--ds-success)!important;
  color:var(--ds-success)!important;
  box-shadow:var(--ds-success-ring)!important;
}
:where(button,[role='button']).is-error{
  border-color:var(--ds-danger)!important;
  color:var(--ds-danger)!important;
  box-shadow:var(--ds-danger-ring)!important;
}

/* Messages share semantic color, icon and live-region behavior on every page. */
.toast.show,.mtoast.show{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.toast.show::before,.mtoast.success::before{
  content:'✓';
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  background:var(--ds-success-bg);
  color:var(--ds-success);
  font-weight:700;
}
.toast.err,.mtoast.err{
  border-color:var(--ds-danger);
  color:var(--ds-danger);
}
.toast.err::before,.mtoast.err::before{
  content:'!';
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  background:var(--ds-danger-bg);
  color:var(--ds-danger);
  font-weight:700;
}
.toast.err button{display:none!important}

/* Invalid fields explain the problem and clear as soon as the value is edited. */
.fld.bad input,.fld.bad select,.fld.bad textarea,
input[aria-invalid='true'],select[aria-invalid='true'],textarea[aria-invalid='true']{
  border-color:var(--ds-danger)!important;
  box-shadow:var(--ds-danger-ring)!important;
}
.formerr.show,.ferr.show{
  color:var(--ds-danger);
  opacity:1;
}
.ok.is-success{
  border-color:var(--ds-success);
  box-shadow:var(--ds-success-ring);
}

/* Interactive windows announce their state but keep the existing fade only. */
.sheet[aria-hidden='true']{pointer-events:none}
.sheet[aria-hidden='false']{pointer-events:auto}

@media(prefers-reduced-motion:reduce){
  :where(button,[role='button']).is-loading::before,
  #syncbar.show::before,.mtoast.loading::before{
    animation:none!important;
    border-right-color:currentColor;
    opacity:.55;
  }
}


/* Shared tooltip: one body-level surface, independent of card/sheet overflow. */
.st-tooltip{
  position:fixed;inset:auto;margin:0;width:max-content;min-width:0;
  max-width:min(280px,calc(100vw - 20px));box-sizing:border-box;
  padding:8px 12px;border:1px solid var(--ds-border);border-radius:12px;
  background:var(--ds-text);color:var(--ds-surface);
  font:500 12px/1.55 var(--ds-font-sans);text-align:start;
  box-shadow:0 4px 18px rgba(16,24,40,.18);z-index:2147483647;
  pointer-events:auto;user-select:none;overflow-wrap:anywhere;
  opacity:0;transition:opacity 120ms ease;
}
.st-tooltip.is-visible{opacity:1}
.st-tooltip[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.st-tooltip{transition:none}}
@media(forced-colors:active){.st-tooltip{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}}