/* ============================================================================
   Cashwo Terminal — POS design system (self-contained, offline-friendly).
   Touch-first, large controls, brand: navy #090B22 / yellow #FFCD34.
   ========================================================================== */

:root {
    --navy:        #090B22;
    --navy-2:      #14173a;
    --yellow:      #FFCD34;
    --yellow-600:  #e8b81f;
    --ink:         #1b1d2e;
    --muted:       #6b7086;
    --line:        #e6e8f0;
    --bg:          #f4f5fa;
    --card:        #ffffff;
    --green:       #1ea672;
    --green-bg:    #e7f7f0;
    --red:         #e5484d;
    --red-bg:      #fdecec;
    --amber:       #f0a020;
    --blue:        #3b6ef6;
    --radius:      18px;
    --radius-sm:   12px;
    --shadow:      0 10px 30px rgba(9, 11, 34, 0.10);
    --shadow-sm:   0 3px 12px rgba(9, 11, 34, 0.08);
    --tap:         56px;
    font-synthesis: none;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win, even over components that set an
   explicit display (flex overlays, panels). Without this, `[hidden]` elements
   like the success/fail overlays render on load. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}

img { max-width: 100%; display: block; }
b, strong { font-weight: 700; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .06s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-block { width: 100%; }
.btn-lg { min-height: 62px; font-size: 18px; }

.btn-primary { background: var(--yellow); color: var(--navy); box-shadow: 0 6px 18px rgba(255,205,52,.35); }
.btn-primary:hover { background: var(--yellow-600); }

.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: #fff; border-color: #d3d6e4; }

.btn__spin {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2.5px solid rgba(9,11,34,.25); border-top-color: var(--navy);
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.linkbtn {
    background: none; border: 0; padding: 8px 10px; cursor: pointer;
    color: var(--blue); font: inherit; font-weight: 600; text-decoration: none;
}
.linkbtn:hover { text-decoration: underline; }

/* ── Fields ──────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field__opt { color: var(--muted); font-weight: 500; }
.field__input {
    width: 100%; font: inherit; font-size: 16px;
    padding: 15px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,205,52,.2); }
.field__pw { position: relative; display: block; }
.field__pw .field__input { padding-right: 52px; }
.field__eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; padding: 10px; cursor: pointer; color: var(--muted);
    display: inline-flex; border-radius: 8px;
}
.field__eye:hover { color: var(--ink); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 16px;
    font-size: 14px; font-weight: 600; line-height: 1.4;
    background: var(--red-bg); color: #b42318; border: 1px solid #f6c9c6;
}
.alert--ok { background: var(--green-bg); color: #0f7a52; border-color: #b8ead4; }

/* ── Auth screens ────────────────────────────────────────────────────────── */
.auth-bg {
    min-height: 100%;
    background: radial-gradient(1200px 600px at 50% -10%, #1b1f45 0%, var(--navy) 55%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card {
    background: var(--card); border-radius: 24px; padding: 32px 26px;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-logo { height: 30px; width: auto; }
.auth-pos-tag {
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--navy); background: var(--yellow); padding: 4px 8px; border-radius: 6px;
}
.auth-title { font-size: 24px; margin: 0 0 4px; color: var(--ink); }
.auth-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.auth-warn { margin: 20px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.5; }
.auth-links { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* OTP input */
.otp-input-wrap { margin-bottom: 20px; }
.otp-input {
    width: 100%; text-align: center; font-size: 34px; font-weight: 800;
    letter-spacing: 14px; padding: 16px 10px; border: 1.5px solid var(--line);
    border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.otp-input:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,205,52,.2); }

/* ── App bar ─────────────────────────────────────────────────────────────── */
.app-bar {
    position: sticky; top: 0; z-index: 20;
    background: var(--navy); color: #fff;
    padding-top: env(safe-area-inset-top);
}
.app-bar__inner {
    max-width: 1080px; margin: 0 auto; height: 62px; padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between;
}
.app-bar__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.app-bar__logo { height: 24px; }
.app-bar__pos {
    font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--navy);
    background: var(--yellow); padding: 3px 6px; border-radius: 5px;
}
.app-bar__right { display: flex; align-items: center; gap: 12px; }
.app-bar__merchant { text-align: right; line-height: 1.15; }
.app-bar__merchant-name { display: block; font-weight: 700; font-size: 14px; color: #fff; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-bar__merchant-user { display: block; font-size: 11.5px; color: #9fa3c4; }
.app-bar__logout {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px; color: #fff;
    background: rgba(255,255,255,.10); text-decoration: none;
}
.app-bar__logout:hover { background: rgba(255,255,255,.18); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.app-foot {
    max-width: 1080px; margin: 24px auto 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--muted); font-size: 12px;
}
.app-foot__ver { opacity: .7; }

/* ── Containers ──────────────────────────────────────────────────────────── */
.pos-container { max-width: 1080px; margin: 0 auto; padding: 22px 16px 0; }

.pos-hello { margin: 6px 2px 22px; }
.pos-hello__title { margin: 0 0 4px; font-size: 26px; }
.pos-hello__sub { margin: 0; color: var(--muted); }

/* ── Dashboard tiles ─────────────────────────────────────────────────────── */
.pos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tile {
    position: relative; background: var(--card); border-radius: var(--radius);
    padding: 22px 20px; text-decoration: none; color: var(--ink);
    box-shadow: var(--shadow-sm); border: 1px solid transparent;
    display: flex; flex-direction: column; gap: 6px; min-height: 150px;
    transition: transform .08s ease, box-shadow .15s ease;
}
.tile__icon {
    width: 58px; height: 58px; border-radius: 15px; margin-bottom: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef0f8; color: var(--navy);
}
.tile__title { font-size: 17px; font-weight: 700; }
.tile__sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tile--primary { background: linear-gradient(150deg, #1a1e46 0%, var(--navy) 100%); color: #fff; }
.tile--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile--primary .tile__icon { background: var(--yellow); color: var(--navy); }
.tile--primary .tile__sub { color: #b9bce0; }
.tile--soon { cursor: not-allowed; }
.tile--soon .tile__title, .tile--soon .tile__sub, .tile--soon .tile__icon { opacity: .6; }
.badge-soon {
    position: absolute; top: 14px; right: 14px;
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--amber); background: #fff6e6; padding: 4px 8px; border-radius: 20px;
}

/* ── Take-payment layout ─────────────────────────────────────────────────── */
.pay-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; }
.backlink {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    color: var(--muted); font-weight: 600; font-size: 14px;
    padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm);
}
.backlink:hover { color: var(--ink); }
.pay-title { margin: 0; font-size: 22px; }

.pay-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }

.pay-entry, .qr-card {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 22px;
}

/* Amount display + keypad */
.amount-display {
    display: flex; align-items: baseline; justify-content: center; gap: 8px;
    padding: 14px 10px 18px; margin-bottom: 8px;
}
.amount-display__cur { font-size: 22px; font-weight: 700; color: var(--muted); }
.amount-display__val { font-size: 52px; font-weight: 800; letter-spacing: -1px; color: var(--ink); font-variant-numeric: tabular-nums; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.key {
    appearance: none; border: 0; cursor: pointer; font: inherit;
    font-size: 26px; font-weight: 700; color: var(--ink);
    background: #f1f2f9; border-radius: 14px; min-height: 66px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .05s ease, background .12s ease;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.key:active { transform: scale(.96); background: #e6e8f4; }
.key--muted { color: var(--muted); background: #eceef6; }

.pay-fields { margin-top: 4px; }

/* ── QR stage ────────────────────────────────────────────────────────────── */
.qr-card__head { text-align: center; margin-bottom: 16px; }
.qr-card__merchant { font-weight: 700; color: var(--muted); font-size: 14px; }
.qr-card__amount { font-size: 34px; font-weight: 800; margin-top: 2px; letter-spacing: -.5px; }
.qr-card__ref { font-size: 13px; color: var(--muted); margin-top: 2px; word-break: break-all; }

.qr-frame {
    position: relative; width: 264px; max-width: 78vw; aspect-ratio: 1;
    margin: 0 auto 16px; border-radius: 16px; overflow: hidden;
    background: #fff; border: 1px solid var(--line); padding: 8px;
}
.qr-img { width: 100%; height: 100%; object-fit: contain; }
.qr-expired-overlay {
    position: absolute; inset: 0; background: rgba(255,255,255,.86);
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.qr-expired-overlay__text {
    font-size: 22px; font-weight: 800; color: var(--red);
    border: 2.5px solid var(--red); padding: 8px 20px; border-radius: 12px; transform: rotate(-8deg);
}

.qr-timer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--muted); font-size: 14px; margin-bottom: 14px;
}
.qr-timer.is-low { color: var(--red); }

.status-pill {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 16px; border-radius: 40px; font-weight: 700; font-size: 15px;
    margin: 0 auto 12px; max-width: max-content;
}
.status-pill__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.status-pill--waiting { background: #eef1fb; color: var(--blue); }
.status-pill--waiting .status-pill__dot { animation: pulse 1.3s ease-in-out infinite; }
.status-pill--processing { background: #fff6e6; color: #b9791a; }
.status-pill--processing .status-pill__dot { animation: pulse 1s ease-in-out infinite; }
.status-pill--paid { background: var(--green-bg); color: #0f7a52; }
.status-pill--failed { background: var(--red-bg); color: #b42318; }
.status-pill--expired { background: #eeeef2; color: var(--muted); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.qr-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.qr-actions { display: flex; gap: 10px; }
.qr-actions .btn { flex: 1; }

/* ── Wide screens: two columns ───────────────────────────────────────────── */
@media (min-width: 860px) {
    .pay-layout { grid-template-columns: 1fr 1fr; }
    .pos-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Success / failure overlays ──────────────────────────────────────────── */
.success-overlay, .fail-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(9,11,34,.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.success-card, .fail-card {
    background: #fff; border-radius: 24px; padding: 36px 28px; text-align: center;
    width: 100%; max-width: 380px; box-shadow: 0 30px 70px rgba(0,0,0,.4);
    animation: popIn .28s cubic-bezier(.18,.9,.35,1.3);
}
@keyframes popIn { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-title { margin: 6px 0 2px; font-size: 24px; color: var(--ink); }
.success-amount { font-size: 34px; font-weight: 800; color: var(--green); margin: 6px 0 2px; }
.success-ref { color: var(--muted); font-size: 13px; margin-bottom: 22px; word-break: break-all; }
.fail-title { margin: 6px 0 6px; font-size: 22px; }
.fail-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.success-card .btn, .fail-card .btn { width: 100%; }

/* Animated success check */
.success-check { margin-bottom: 6px; }
.success-check__circle { stroke: var(--green); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawCircle .5s ease forwards; }
.success-check__tick { stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawTick .35s .45s ease forwards; }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawTick { to { stroke-dashoffset: 0; } }

.fail-cross__circle { stroke: var(--red); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawCircle .5s ease forwards; }
.fail-cross__line { stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 26; stroke-dashoffset: 26; animation: drawTick .3s .4s ease forwards; }

/* ── Transaction history ─────────────────────────────────────────────────── */
.hist-summary {
    background: linear-gradient(150deg, #1a1e46 0%, var(--navy) 100%);
    color: #fff; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.hist-summary__label { font-size: 13px; color: #b9bce0; }
.hist-summary__amount { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin-top: 2px; }
.hist-summary__count { font-size: 12.5px; color: #9fa3c4; margin-top: 2px; }

.hist-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.hist-search {
    display: flex; align-items: center; gap: 10px; background: #fff;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px;
    color: var(--muted);
}
.hist-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 15px; padding: 14px 0; color: var(--ink); background: transparent; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.chip {
    flex: 0 0 auto; appearance: none; border: 1.5px solid var(--line); background: #fff;
    color: var(--muted); font: inherit; font-weight: 600; font-size: 14px;
    padding: 9px 16px; border-radius: 40px; cursor: pointer; white-space: nowrap;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

.hist-list { display: flex; flex-direction: column; gap: 10px; }
.hist-item {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    background: var(--card); border: 0; border-radius: var(--radius-sm); padding: 14px 16px;
    box-shadow: var(--shadow-sm); cursor: pointer; font: inherit;
    transition: transform .06s ease, box-shadow .15s ease;
}
.hist-item:active { transform: scale(.995); }
.hist-item__ic {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.hist-item__ic--paid    { background: var(--green-bg); color: var(--green); }
.hist-item__ic--pending { background: #fff6e6; color: #b9791a; }
.hist-item__ic--failed  { background: var(--red-bg); color: var(--red); }
.hist-item__ic--refund  { background: #eef1fb; color: var(--blue); }
.hist-item__main { flex: 1; min-width: 0; }
.hist-item__ref { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-item__date { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.hist-item__right { text-align: right; flex: 0 0 auto; }
.hist-item__amount { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.hist-item__badge { font-size: 11px; font-weight: 700; margin-top: 3px; }
.hist-item__badge--paid { color: var(--green); }
.hist-item__badge--pending { color: #b9791a; }
.hist-item__badge--failed { color: var(--red); }
.hist-item__badge--refund { color: var(--blue); }

.hist-empty { text-align: center; color: var(--muted); padding: 46px 20px; }
.hist-empty svg { color: #c3c7d6; margin-bottom: 10px; }
.hist-empty p { margin: 0; }
.hist-loading { display: flex; justify-content: center; padding: 24px; }
.hist-loading .btn__spin { width: 26px; height: 26px; }
.hist-more { display: flex; justify-content: center; margin-top: 14px; }
.hist-more .btn { min-width: 200px; }

/* ── Bottom sheet (transaction detail) ───────────────────────────────────── */
.sheet-overlay {
    position: fixed; inset: 0; z-index: 60; background: rgba(9,11,34,.5);
    display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .2s ease;
}
.sheet {
    background: #fff; width: 100%; max-width: 460px;
    border-radius: 22px 22px 0 0; padding: 12px 22px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 60px rgba(0,0,0,.35); animation: sheetUp .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 560px) { .sheet-overlay { align-items: center; } .sheet { border-radius: 22px; } }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: #d7dae6; margin: 4px auto 14px; }
.sheet__head { text-align: center; margin-bottom: 18px; }
.sheet__status { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sheet__status.is-paid { color: var(--green); }
.sheet__status.is-pending { color: #b9791a; }
.sheet__status.is-failed { color: var(--red); }
.sheet__status.is-refund { color: var(--blue); }
.sheet__amount { font-size: 32px; font-weight: 800; margin-top: 4px; }
.sheet__rows { margin: 0 0 20px; }
.sheet__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.sheet__row dt { color: var(--muted); font-size: 14px; }
.sheet__row dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; word-break: break-all; }
.rcpt-ref { font-size: 13px; color: var(--muted); margin-top: 4px; word-break: break-all; }
.rcpt-hint { font-size: 12.5px; color: var(--muted); margin: 2px 0 16px; }

/* ── Settings ────────────────────────────────────────────────────────────── */
.set-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 8px 18px; margin-bottom: 16px; }
.set-card__title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 4px; }
.set-card__note { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.set-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 15px 0; border-top: 1px solid var(--line);
}
.set-card__title + .set-row, .set-card__note + .set-row { border-top: 0; }
.set-row > span:first-child { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 15px; }
.set-row > span:first-child small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.set-row--static b { font-weight: 700; font-size: 15px; text-align: right; word-break: break-word; }
.set-select { font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.set-select:focus { outline: 0; border-color: var(--yellow); }

/* Toggle switch */
.switch { position: relative; display: inline-flex; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.switch__track { width: 52px; height: 30px; border-radius: 30px; background: #d3d6e4; transition: background .18s ease; position: relative; }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.switch input:checked + .switch__track { background: var(--green); }
.switch input:checked + .switch__track::after { transform: translateX(22px); }

.set-action {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    background: transparent; border: 0; border-top: 1px solid var(--line);
    padding: 16px 0; font: inherit; font-weight: 600; font-size: 15px; color: var(--ink);
    cursor: pointer; text-decoration: none;
}
.set-action__ic { width: 38px; height: 38px; border-radius: 11px; background: #eef0f8; color: var(--navy); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.set-action--danger { color: var(--red); }
.set-action--danger .set-action__ic { background: var(--red-bg); color: var(--red); }
.set-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; }
}