/*
 * YangJiii design system — base layer.
 * Tokens, fonts, reset, typography and shared components used by the
 * storefront, the customer workspace and the admin console.
 * Self-hosted fonts only (SIL OFL, see /assets/fonts/dd/LICENSE-*.txt).
 */

/* ---------- Fonts ---------- */
@font-face { font-family: "DD Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/dd/inter-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "DD Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/dd/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DD Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/dd/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "DD Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/dd/space-grotesk-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "DD Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/dd/space-grotesk-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DD Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/dd/space-grotesk-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DD Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/dd/space-grotesk-vietnamese-700-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "DD Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/dd/space-grotesk-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DD Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/dd/space-grotesk-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: "DD Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/dd/jetbrains-mono-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "DD Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/dd/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DD Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/dd/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Pixel accent: Latin and digits only. Vietnamese text must not use it. */
@font-face { font-family: "DD Pixel"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dd/geist-pixel-square.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
    --dd-canvas: #f4f4f4;
    --dd-surface: #fafafa;
    --dd-card: #ffffff;
    --dd-raised: #ffffff;
    --dd-fg: #1f1f1f;
    --dd-fg-2: #3d3d3d;
    --dd-muted: #6b6b6b;
    --dd-subtle: #8f8f8f;
    --dd-faint: #b4b4b4;
    --dd-border: rgba(31, 31, 32, .09);
    --dd-border-strong: rgba(31, 31, 32, .16);
    --dd-border-light: rgba(31, 31, 32, .06);
    --dd-hover: rgba(31, 31, 32, .04);
    --dd-active: rgba(31, 31, 32, .07);
    --dd-accent: #ff5000;
    --dd-accent-hover: #eb4a00;
    --dd-accent-soft: rgba(255, 80, 0, .08);
    --dd-accent-line: rgba(255, 80, 0, .24);
    --dd-ink: #171717;
    --dd-ink-hover: #2b2b2b;
    --dd-success: #16a34a;
    --dd-success-soft: rgba(22, 163, 74, .09);
    --dd-warning: #c2410c;
    --dd-warning-soft: rgba(234, 88, 12, .09);
    --dd-amber: #b45309;
    --dd-amber-soft: rgba(217, 119, 6, .1);
    --dd-danger: #dc2626;
    --dd-danger-soft: rgba(220, 38, 38, .08);
    --dd-info: #2563eb;
    --dd-info-soft: rgba(37, 99, 235, .08);
    --dd-violet: #7c3aed;
    --dd-violet-soft: rgba(124, 58, 237, .08);

    --dd-font-sans: "DD Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --dd-font-display: "DD Grotesk", "DD Inter", system-ui, sans-serif;
    --dd-font-mono: "DD Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --dd-font-pixel: "DD Pixel", "DD Mono", ui-monospace, monospace;

    --dd-r-xs: 4px;
    --dd-r-sm: 6px;
    --dd-r: 8px;
    --dd-r-lg: 12px;
    --dd-r-xl: 16px;
    --dd-r-pill: 999px;

    --dd-shadow-xs: 0 1px 2px rgba(16, 16, 18, .04);
    --dd-shadow-sm: 0 1px 2px rgba(16, 16, 18, .04), 0 1px 1px rgba(16, 16, 18, .02);
    --dd-shadow: 0 1px 3px rgba(16, 16, 18, .05), 0 6px 16px -6px rgba(16, 16, 18, .08);
    --dd-shadow-lg: 0 12px 40px -12px rgba(16, 16, 18, .22), 0 2px 6px rgba(16, 16, 18, .05);
    --dd-ring: 0 0 0 3px rgba(255, 80, 0, .2);

    --dd-ease: cubic-bezier(.2, .7, .2, 1);
    --dd-fast: 150ms;
    --dd-med: 200ms;
    --dd-slow: 300ms;

    --dd-container: 1200px;
    --dd-gutter: 24px;
    --dd-header-h: 64px;

    color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--dd-header-h) + 16px); }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--dd-font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--dd-fg);
    background: var(--dd-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01";
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--dd-fg); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--dd-border); margin: 24px 0; }
dialog { padding: 0; border: 0; color: inherit; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
::selection { background: rgba(255, 80, 0, .18); }
:focus-visible { outline: 2px solid var(--dd-accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.bi { line-height: 1; display: inline-block; }
.bi::before { vertical-align: -.125em; }

.visually-hidden, .sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
    position: fixed; left: 12px; top: -48px; z-index: 1000; padding: 8px 14px; border-radius: var(--dd-r);
    background: var(--dd-ink); color: #fff; font-size: 14px; font-weight: 500; transition: top var(--dd-fast) var(--dd-ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Layout primitives ---------- */
.shell, .dd-container {
    width: 100%;
    max-width: calc(var(--dd-container) + var(--dd-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--dd-gutter);
}
@media (max-width: 640px) { :root { --dd-gutter: 16px; } }

/* ---------- Typography helpers ---------- */
.dd-mono, .font-monospace, code, kbd, samp { font-family: var(--dd-font-mono); }
code { font-size: .9em; padding: 1px 5px; border-radius: var(--dd-r-xs); background: var(--dd-active); }
.dd-pixel { font-family: var(--dd-font-pixel); font-weight: 400; letter-spacing: 0; }
.dd-display { font-family: var(--dd-font-display); }
.dd-accent { color: var(--dd-accent); }
.eyebrow, .certificate-kicker, .certificate-flow-kicker, .dd-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 10px;
    font-size: 11px; font-weight: 600; line-height: 1.6;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--dd-muted);
}
.certificate-kicker > span[aria-hidden="true"]:empty {
    width: 6px; height: 6px; border-radius: 2px; background: var(--dd-accent);
}
.muted, .text-muted { color: var(--dd-muted); }

/* ---------- Buttons ---------- */
.button, .dd-btn {
    --btn-bg: var(--dd-accent);
    --btn-fg: #fff;
    --btn-border: transparent;
    --btn-hover: var(--dd-accent-hover);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 18px;
    border: 1px solid var(--btn-border); border-radius: var(--dd-r);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--dd-fast) var(--dd-ease), border-color var(--dd-fast) var(--dd-ease), color var(--dd-fast) var(--dd-ease), box-shadow var(--dd-fast) var(--dd-ease), transform var(--dd-fast) var(--dd-ease);
}
.button:hover, .dd-btn:hover { background: var(--btn-hover); }
.button:active, .dd-btn:active { transform: translateY(1px); }
.button:focus-visible, .dd-btn:focus-visible { outline: none; box-shadow: var(--dd-ring); }
.button .bi, .dd-btn .bi { font-size: 1em; }
.button-secondary, .dd-btn-secondary, .button.is-secondary {
    --btn-bg: var(--dd-card); --btn-fg: var(--dd-fg); --btn-border: var(--dd-border); --btn-hover: var(--dd-surface);
    box-shadow: var(--dd-shadow-xs);
}
.button-secondary:hover, .dd-btn-secondary:hover { border-color: var(--dd-border-strong); }
.button-dark, .dd-btn-dark { --btn-bg: var(--dd-ink); --btn-fg: #fff; --btn-hover: var(--dd-ink-hover); }
.button-ghost, .dd-btn-ghost { --btn-bg: transparent; --btn-fg: var(--dd-fg-2); --btn-hover: var(--dd-hover); }
.danger-button, .button-danger { --btn-bg: var(--dd-card); --btn-fg: var(--dd-danger); --btn-border: rgba(220, 38, 38, .25); --btn-hover: var(--dd-danger-soft); }
.button-small, .button.button-small, .dd-btn-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; border-radius: var(--dd-r-sm); }
.button-large, .dd-btn-lg { min-height: 46px; padding: 10px 22px; font-size: 15px; }
.button.is-disabled, .button[aria-disabled="true"], .button:disabled, .dd-btn:disabled {
    --btn-bg: var(--dd-active); --btn-fg: var(--dd-subtle); --btn-border: transparent; --btn-hover: var(--dd-active);
    cursor: not-allowed; box-shadow: none; transform: none;
}
.certificate-text-link, .dd-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--dd-fg); font-weight: 500; text-decoration: underline; text-decoration-color: var(--dd-border-strong); text-underline-offset: 3px;
}
.certificate-text-link:hover, .dd-link:hover { text-decoration-color: currentColor; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > span:first-child, .field > label, .dd-label {
    font-size: 13px; font-weight: 500; color: var(--dd-fg); line-height: 1.4;
}
.field small, .dd-help { font-size: 12px; color: var(--dd-muted); line-height: 1.5; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field select, .field textarea,
.dd-input, .dd-select, .dd-textarea {
    width: 100%; min-height: 40px; padding: 8px 12px;
    border: 1px solid var(--dd-border-strong); border-radius: var(--dd-r);
    background: var(--dd-card); color: var(--dd-fg);
    font-size: 14px; line-height: 1.45;
    box-shadow: var(--dd-shadow-xs);
    transition: border-color var(--dd-fast) var(--dd-ease), box-shadow var(--dd-fast) var(--dd-ease);
}
.field textarea, .dd-textarea { min-height: 112px; resize: vertical; }
.field select, .dd-select {
    appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.field input::placeholder, .field textarea::placeholder, .dd-input::placeholder { color: var(--dd-faint); }
.field input:focus, .field select:focus, .field textarea:focus, .dd-input:focus, .dd-select:focus, .dd-textarea:focus {
    outline: none; border-color: var(--dd-accent); box-shadow: var(--dd-ring);
}
.field input[readonly] { background: var(--dd-surface); color: var(--dd-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dd-accent); width: 16px; height: 16px; }

/* ---------- Notices ---------- */
.notice, .dd-notice {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 16px; padding: 12px 14px;
    border: 1px solid var(--dd-border); border-radius: var(--dd-r);
    background: var(--dd-card); color: var(--dd-fg-2);
    font-size: 14px; line-height: 1.5;
}
.notice-error { border-color: rgba(220, 38, 38, .22); background: #fef6f6; color: #a61b1b; }
.notice-success { border-color: rgba(22, 163, 74, .22); background: #f3fbf6; color: #11733a; }
.notice-warning { border-color: rgba(217, 119, 6, .25); background: #fffaf0; color: #8a4a06; }
.notice-info { border-color: rgba(37, 99, 235, .2); background: #f5f8ff; color: #1d4ed8; }

/* ---------- Status pills ---------- */
.certificate-status, .status-badge, .dd-badge, .ipa-status, .wallet-status {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 24px; padding: 2px 9px;
    border: 1px solid var(--dd-border); border-radius: var(--dd-r-pill);
    background: var(--dd-card); color: var(--dd-fg-2);
    font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.certificate-status .bi, .status-badge .bi { font-size: 11px; }
.status-waiting, .status-pending, .ipa-status-pending, .ipa-status-queued, .wallet-status-pending, .status-WAITING_PAYMENT { color: var(--dd-amber); background: var(--dd-amber-soft); border-color: rgba(217, 119, 6, .2); }
.status-processing, .ipa-status-processing, .ipa-status-signing, .status-PROVIDER_PENDING { color: var(--dd-warning); background: var(--dd-warning-soft); border-color: rgba(234, 88, 12, .2); }
.status-complete, .status-completed, .status-active, .status-success, .status-paid, .ipa-status-completed, .ipa-status-succeeded, .wallet-status-paid, .wallet-status-completed, .status-COMPLETED, .status-ACTIVE { color: var(--dd-success); background: var(--dd-success-soft); border-color: rgba(22, 163, 74, .2); }
.status-review, .status-open { color: var(--dd-violet); background: var(--dd-violet-soft); border-color: rgba(124, 58, 237, .2); }
.status-issue, .status-failed, .status-error, .ipa-status-failed, .wallet-status-failed, .wallet-status-expired, .status-FAILED { color: var(--dd-danger); background: var(--dd-danger-soft); border-color: rgba(220, 38, 38, .2); }
.status-muted, .status-closed, .status-cancelled, .status-CANCELLED { color: var(--dd-muted); background: var(--dd-hover); }
.status-info { color: var(--dd-info); background: var(--dd-info-soft); border-color: rgba(37, 99, 235, .18); }

/* ---------- Cards / panels ---------- */
.dd-card, .ofox-panel {
    border: 1px solid var(--dd-border); border-radius: var(--dd-r-lg);
    background: var(--dd-card); box-shadow: var(--dd-shadow-xs);
}
.dd-card-pad { padding: 20px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 0 0 16px; font-size: 13px; color: var(--dd-muted);
}
.breadcrumbs a { color: var(--dd-muted); transition: color var(--dd-fast); }
.breadcrumbs a:hover { color: var(--dd-fg); }
.breadcrumbs > span:not([aria-current]):not(:last-child) { color: var(--dd-faint); }
.breadcrumbs > span:last-child { color: var(--dd-fg); font-weight: 500; }
.customer-workspace-page .app-content .breadcrumbs:has(> a[href="/dashboard"]:first-child) { display: none; }
.breadcrumbs ol { display: contents; list-style: none; }
.breadcrumbs li { display: inline-flex; gap: 6px; }

/* ---------- Dialog ---------- */
dialog::backdrop { background: rgba(16, 16, 18, .42); backdrop-filter: blur(4px); }
dialog[open] { animation: dd-dialog-in var(--dd-med) var(--dd-ease); }
@keyframes dd-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Avatar ---------- */
.account-avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #ff7a33, #ff5000); color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
}

/* ---------- Brand mark ---------- */
.certificate-brand-mark, .brand-mark {
    display: inline-grid; place-items: center; flex: none;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--dd-accent); color: #fff;
    font-family: var(--dd-font-display); font-weight: 700; font-size: 15px; line-height: 1;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

/* ---------- Empty states ---------- */
.empty-state, .dd-empty {
    display: grid; justify-items: center; gap: 8px; text-align: center;
    padding: 48px 24px; border: 1px dashed var(--dd-border-strong); border-radius: var(--dd-r-lg);
    background: var(--dd-surface); color: var(--dd-muted);
}
.empty-state h2, .empty-state h3, .dd-empty h2, .dd-empty h3 { font-size: 16px; color: var(--dd-fg); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}