/*
 * YANSKIDIE OS Interface Style Foundation v1.0 — FROZEN
 * REFERENCE -> ADAPT -> VERIFY
 * Presentation tokens only. ERP canonical behavior/state/permission remains authoritative.
 * Canonical artifact SHA-256:
 * 83022ea54876b0bb06dcb94f18d2d14339fbc726387af3eb817c24e5a60b330c
 */
:root{
  --ys-brand:#FBBF24;
  --ys-brand-dark:#D99B05;
  --ys-brand-tint:rgba(251,191,36,.14);
  --ys-brand-ring:rgba(251,191,36,.22);
  --ys-process:#1E40AF;
  --ys-process-bg:#DBEAFE;
  --ys-ready:#0F766E;
  --ys-ready-bg:#CCFBF1;
  --ys-success:#16A34A;
  --ys-success-bg:#DCFCE7;
  --ys-attention:#F97316;
  --ys-attention-bg:#FFEDD5;
  --ys-warning:#D97706;
  --ys-warning-bg:#FEF3C7;
  --ys-revision:#6D28D9;
  --ys-revision-bg:#EDE9FE;
  --ys-danger:#EF4444;
  --ys-danger-bg:#FEE2E2;
  --ys-neutral:#64748B;
  --ys-neutral-bg:#F1F5F9;

  --ys-charcoal-1:#252A31;
  --ys-charcoal-2:#2C333C;
  --ys-charcoal-hover:#343D48;
  --ys-charcoal-line:#3A444F;
  --ys-charcoal-text:#F1F5F9;
  --ys-charcoal-muted:#AAB4C2;
  --ys-charcoal-icon:#B7C2CF;

  --ys-workspace:#F5F7FA;
  --ys-workspace-2:#F8FAFC;
  --ys-surface:#FFFFFF;
  --ys-surface-soft:#FBFCFE;
  --ys-line:#E2E8F0;
  --ys-line-strong:#D5DEE8;
  --ys-text:#172033;
  --ys-muted:#5E6E82;
  --ys-muted-2:#758397;
  --ys-action:#1D4ED8;
  --ys-focus:rgba(37,99,235,.28);

  --ys-radius-control:10px;
  --ys-radius-chip:12px;
  --ys-radius-card:14px;
  --ys-radius-panel:20px;
  --ys-radius-pill:999px;
  --ys-shadow-surface:0 1px 2px rgba(15,23,42,.035),0 8px 20px rgba(15,23,42,.045);
  --ys-shadow-interactive:0 3px 8px rgba(15,23,42,.05),0 14px 28px rgba(15,23,42,.07);
  --ys-shadow-overlay:0 18px 42px rgba(15,23,42,.14),0 4px 12px rgba(15,23,42,.08);

  /* W2 shared primitive aliases — values remain identical to the frozen foundation. */
  --ys-space-1:4px;
  --ys-space-2:8px;
  --ys-space-3:12px;
  --ys-space-4:16px;
  --ys-space-5:20px;
  --ys-space-6:24px;
  --ys-control-height:42px;
  --ys-control-height-compact:38px;
  --ys-control-height-min:36px;
  --ys-type-body-size:13px;
  --ys-type-body-line:20px;
  --ys-type-secondary-size:12px;
  --ys-type-secondary-line:18px;
  --ys-type-label-size:12px;
  --ys-type-label-line:16px;
  --ys-type-micro-size:11px;
  --ys-type-micro-line:14px;
  --ys-type-page-size:24px;
  --ys-type-page-line:32px;
  --ys-type-section-size:18px;
  --ys-type-section-line:26px;
  --ys-type-card-size:15px;
  --ys-type-card-line:22px;
  --ys-type-kpi-size:30px;
  --ys-type-kpi-line:34px;
  --ys-weight-regular:400;
  --ys-weight-medium:500;
  --ys-weight-semibold:600;
  --ys-weight-bold:700;
  --ys-overlay-backdrop:rgba(15,23,42,.34);

  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ys-text);
  background:var(--ys-workspace);
  font-synthesis:none;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img,video,canvas{max-width:100%;height:auto}
svg{max-width:100%}
html{min-height:100%;background:var(--ys-workspace)}
body{
  min-height:100vh;
  margin:0;
  color:var(--ys-text);
  background:linear-gradient(180deg,#F7F9FC 0%,var(--ys-workspace) 45%,#F4F7FA 100%);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13px;
  line-height:20px;
  font-weight:400;
  word-spacing:.08em!important;
  letter-spacing:.005em!important;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
button,[role="button"],a,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,input,select,textarea,a,summary{transition:transform 120ms ease,box-shadow 120ms ease,border-color 120ms ease,background-color 120ms ease,color 120ms ease}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid var(--ys-focus);
  outline-offset:2px;
}
.shell{
  width:min(100%,1440px);
  margin:0 auto;
  padding:24px clamp(16px,2.25vw,32px) 32px;
}
.card{
  background:var(--ys-surface);
  border:1px solid var(--ys-line);
  border-radius:var(--ys-radius-card);
  padding:20px;
  box-shadow:var(--ys-shadow-surface);
}
.brand{color:var(--ys-text)}
.warning{
  color:#9A3412;
  background:var(--ys-attention-bg);
  border:1px solid rgba(249,115,22,.20);
  padding:12px;
  border-radius:var(--ys-radius-control);
}
.ok{
  color:#166534;
  background:var(--ys-success-bg);
  border:1px solid rgba(22,163,74,.16);
  padding:12px;
  border-radius:var(--ys-radius-control);
}
input,select,textarea{
  width:100%;
  box-sizing:border-box;
  padding:11px 12px;
  margin:6px 0 14px;
  color:var(--ys-text);
  background:var(--ys-surface);
  border:1px solid var(--ys-line-strong);
  border-radius:var(--ys-radius-control);
}
input:disabled,select:disabled,textarea:disabled{
  opacity:.56;
  cursor:not-allowed;
  color:var(--ys-muted);
  background:var(--ys-neutral-bg);
}
input[readonly],textarea[readonly]{
  color:var(--ys-muted);
  background:var(--ys-surface-soft);
}
button{
  min-height:42px;
  padding:10px 16px;
  color:#3A2A00;
  background:linear-gradient(180deg,#FCD34D 0%,var(--ys-brand) 62%,#F2AD0A 100%);
  border:1px solid rgba(217,155,5,.48);
  border-radius:var(--ys-radius-control);
  box-shadow:0 1px 2px rgba(15,23,42,.06);
  font-size:13px;
  line-height:18px;
  font-weight:600;
}
button:hover{transform:translateY(-1px);box-shadow:var(--ys-shadow-interactive)}
button:active{transform:translateY(0)}
button:disabled{opacity:.48;cursor:not-allowed;box-shadow:none;transform:none}
.button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 14px;
  color:var(--ys-text);
  background:var(--ys-surface);
  border:1px solid var(--ys-line-strong);
  border-radius:var(--ys-radius-control);
  box-shadow:0 1px 2px rgba(15,23,42,.025);
  font-size:13px;
  line-height:18px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.button:hover{
  color:var(--ys-text);
  text-decoration:none;
  border-color:#C5D0DD;
  transform:translateY(-1px);
  box-shadow:var(--ys-shadow-surface);
}
.button:active{transform:translateY(0)}
.button.button-primary{
  color:#3A2A00;
  background:linear-gradient(180deg,#FCD34D 0%,var(--ys-brand) 62%,#F2AD0A 100%);
  border-color:rgba(217,155,5,.48);
}
.button.button-primary:hover{box-shadow:var(--ys-shadow-interactive)}
.button:focus-visible{outline:3px solid var(--ys-focus);outline-offset:2px}
.button[aria-disabled="true"],.button.is-disabled{opacity:.48;pointer-events:none;transform:none}
h1{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em}
h2{font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.01em}
h3{font-size:15px;line-height:22px;font-weight:600}
p,li,td{font-size:13px;line-height:20px}
small{font-size:12px;line-height:18px}
h3,p,li,td,small,button,input,select,textarea,a,summary{font-variant-ligatures:no-common-ligatures}
table{font-variant-numeric:tabular-nums}
.ys-tnum,[data-tnum]{font-variant-numeric:tabular-nums}

@media(max-width:640px){
  .shell{padding:16px 12px 24px}
  .card{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
  button:hover,a:hover,summary:hover,.ys-surface-card.is-interactive:hover,.ys-panel.is-interactive:hover{transform:none!important}
}

/* ============================================================
   GF-MONEY v1 · Monetary Presentation Foundation
   Presentation only — no storage/input/calculation behavior.
   ============================================================ */

.ys-money,
[data-money-format],
.ys-money-readback strong,
.fv-money,
.finance-settlement-money strong,
.yanto-maklon-list-bill,
.payment-total strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}