/* ==========================================================================
   CAPY-CAPY Mini App — Copilot Money style system
   Midnight canvas, whisper-thin body type, one chromatic accent, inset depth.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    /* Colors */
    --color-midnight-canvas: #000814;
    --color-deep-surface: #010d1e;
    --color-indigo-surface: #001533;
    --color-cobalt-surface: #00215e;
    --color-paper-white: #ffffff;
    --color-fog: #ccced0;
    --color-mist: #999ca1;
    --color-steel-border: #11263b;
    --color-signal-blue: #1c6cff;

    --color-tag-coral: #ff4433;
    --color-tag-lime: #00cc4b;
    --color-tag-tangerine: #ff8833;
    --color-tag-hot-pink: #ff33aa;
    --color-tag-violet: #9019e6;
    --color-tag-sunflower: #ffcc02;
    --color-tag-sky: #00acfe;
    --color-tag-ember: #ea687c;
    --color-tag-olive: #94ae43;
    --color-tag-slate: #5c6f8a;

    /* Type */
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --text-caption: 12px;
    --text-body-sm: 14px;
    --text-body: 16px;
    --text-body-lg: 18px;
    --text-subheading: 24px;
    --text-heading-sm: 32px;
    --text-heading: 44px;

    /* Spacing */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-48: 48px;
    --spacing-64: 64px;

    /* Radius */
    --radius-tags: 20px;
    --radius-cards: 24px;
    --radius-pills: 9999px;
    --radius-images: 8px;
    --radius-buttons: 16px;
    --radius-large: 40px;

    /* Elevation — inset only, никогда drop-shadow */
    --shadow-card:
        rgba(255, 255, 255, 0.08) 4px 4px 8px 0 inset,
        rgba(255, 255, 255, 0.16) 4px 4px 16px -4px inset,
        rgba(0, 0, 0, 0.2) -4px -4px 16px -4px inset;
    --shadow-pressed: rgba(0, 0, 0, 0.2) -4px -4px 16px -4px inset;
    --shadow-glow:
        rgba(38, 113, 217, 0.08) 0 0 12px 0 inset,
        rgba(0, 0, 0, 0.32) 0 -4px 8px 0 inset;

    --tabbar-height: 68px;
    --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-midnight-canvas);
    color: var(--color-paper-white);
    font-family: var(--font-body);
    font-weight: 100;
    font-size: var(--text-body);
    line-height: 1.4;
    letter-spacing: -0.16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}

p { margin: 0 0 var(--spacing-12); }

a { color: inherit; text-decoration: none; }

input, select, textarea, button { font-family: inherit; }

/* ==========================================================================
   Entry screen (tg_entry.html)
   ========================================================================== */

.tg-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
}

.entry {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--spacing-64) 0 var(--spacing-48);
    text-align: center;
    overflow: hidden;
}

.entry-tags {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
}

.entry-tags .tag {
    position: absolute;
    animation: tag-drift 9s ease-in-out infinite;
}

.entry-tags .tag:nth-child(1) { top: 0;    left: 4%;   animation-delay: 0s; }
.entry-tags .tag:nth-child(2) { top: 7%;   right: 2%;  animation-delay: .8s; }
.entry-tags .tag:nth-child(3) { bottom: 14%; left: 2%;  animation-delay: 1.6s; }
.entry-tags .tag:nth-child(4) { bottom: 0;   right: 6%; animation-delay: 2.4s; }
.entry-tags .tag:nth-child(5) { top: 9%;    left: 34%;  animation-delay: 3.2s; }
.entry-tags .tag:nth-child(6) { bottom: 8%; right: 30%; animation-delay: 4s; }

@keyframes tag-drift {
    0%, 100% { transform: rotate(var(--rot)) translateY(0); }
    50%      { transform: rotate(var(--rot)) translateY(-8px); }
}

.entry-card {
    position: relative;
    z-index: 1;
    margin: var(--spacing-40) var(--spacing-8);
    background: var(--color-deep-surface);
    border: 1px solid rgba(17, 38, 59, 0.4);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-32) var(--spacing-24);
}

.entry-title {
    font-size: var(--text-heading-sm);
    margin: var(--spacing-16) 0 var(--spacing-8);
}

.entry-lead {
    color: var(--color-fog);
    font-size: var(--text-body-sm);
    margin: 0;
}

.entry-status { display: flex; justify-content: center; margin-top: var(--spacing-20); }
.entry-status:empty { display: none; }

.entry-error { color: var(--color-tag-coral); font-size: var(--text-body-sm); }

.entry-foot {
    margin: var(--spacing-24) 0 0;
    padding-top: var(--spacing-16);
    border-top: 1px solid rgba(17, 38, 59, 0.6);
    color: var(--color-mist);
    font-size: var(--text-caption);
    letter-spacing: 0.02em;
}

.is-blocked .entry-card { box-shadow: var(--shadow-pressed); }

.spinner {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--color-signal-blue);
    animation: spin .9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   App shell
   ========================================================================== */

.app { padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--spacing-16)); }

.app-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    padding: calc(env(safe-area-inset-top, 0px) + var(--spacing-12)) var(--gutter) var(--spacing-12);
    background: var(--color-midnight-canvas);
}

.app-bar-left { display: flex; align-items: center; gap: var(--spacing-8); }

.app-bar-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-body);
    letter-spacing: -0.01em;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-buttons);
    background: var(--color-paper-white);
    color: var(--color-midnight-canvas);
}

.entry .brand-mark { width: 40px; height: 40px; margin: 0 auto; }

.app-main {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--spacing-8) var(--gutter) var(--spacing-32);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
}

/* ==========================================================================
   Bottom tab bar
   ========================================================================== */

.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-deep-surface);
    border-top: 1px solid rgba(17, 38, 59, 0.6);
    box-shadow: var(--shadow-glow);
}

.tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color-mist);
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: var(--spacing-8) 2px;
    transition: color .18s ease;
}

.tabbar-item svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tabbar-item.is-active { color: var(--color-paper-white); }
.tabbar-item--accent.is-active { color: var(--color-signal-blue); }

.tabbar-item--accent svg {
    background: var(--color-signal-blue);
    color: var(--color-paper-white);
    border-radius: var(--radius-pills);
    padding: 4px;
    width: 26px; height: 26px;
    stroke-width: 2;
}

/* ==========================================================================
   Headings & page furniture
   ========================================================================== */

.page-head { display: flex; flex-direction: column; gap: var(--spacing-8); }

.page-head h2 {
    font-size: var(--text-heading-sm);
    letter-spacing: -0.02em;
}

.section-eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-signal-blue);
}

.page-subtitle, .section-subtitle {
    color: var(--color-fog);
    font-size: var(--text-body-sm);
    line-height: 1.6;
    max-width: 52ch;
    margin: 0;
}

.section-head { display: flex; flex-direction: column; gap: var(--spacing-4); margin-bottom: var(--spacing-12); }
.section-head--row { flex-direction: row; align-items: baseline; justify-content: space-between; }
.section-head--center { align-items: center; text-align: center; }
.section-head h3, .section-title { font-size: var(--text-body-lg); font-weight: 500; }

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */

.card,
.settings-card,
.info-card,
.feature-card,
.partner-card,
.product-card,
.shop-card,
.verify-card,
.transactions,
.account-info,
.transfer-container,
.receipt-container,
.notif-list,
.ticket-list,
.session-list,
.table-wrapper,
.empty-state,
.pin-verification {
    background: var(--color-deep-surface);
    border: 1px solid rgba(17, 38, 59, 0.4);
    border-radius: var(--radius-cards);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-24);
}

.settings-grid,
.info-grid,
.partners-grid,
.products-grid,
.shop-grid,
.support-grid,
.features-grid,
.stats-grid {
    display: grid;
    gap: var(--spacing-16);
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .settings-grid, .info-grid, .partners-grid, .products-grid, .shop-grid, .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.settings-card h3, .info-card h3, .partner-card h3, .shop-card-head h3 {
    font-size: var(--text-body-lg);
    font-weight: 500;
    margin-bottom: var(--spacing-16);
}

/* Account hero card */

.account-card {
    position: relative;
    background: var(--color-indigo-surface);
    border: 1px solid rgba(17, 38, 59, 0.5);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-24);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
}

.account-card-label, .account-summary-label, .account-info-label, .receipt-label, .verify-label, .preview-label {
    color: var(--color-mist);
    font-size: var(--text-caption);
    letter-spacing: 0.02em;
}

.balance {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-heading);
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin: var(--spacing-4) 0 0;
}

.balance--inline { font-size: var(--text-subheading); }

.account-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    color: var(--color-fog);
    font-size: var(--text-body-sm);
    flex-wrap: wrap;
}

.account-card-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-mist); }
.account-card-acc { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.account-card-side { display: flex; gap: var(--spacing-24); flex-wrap: wrap; }

/* Плавающие цветные теги — фирменный акцент поверх тёмной карточки */
.account-card-tags {
    position: absolute;
    top: -14px; right: 12px;
    display: flex;
    gap: var(--spacing-8);
    pointer-events: none;
}
.account-card-tags .tag { font-size: 11px; padding: 6px 12px; }

.account-card-stat { display: flex; flex-direction: column; gap: 2px; }
.account-card-stat span { color: var(--color-mist); font-size: var(--text-caption); }
.account-card-stat strong { font-weight: 300; font-size: var(--text-body-sm); }

.account-info-row, .account-summary-row, .session-row, .preview-row, .receipt-row, .verify-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding: var(--spacing-12) 0;
    border-bottom: 1px solid rgba(17, 38, 59, 0.6);
    font-size: var(--text-body-sm);
}

.account-info-row:last-child, .account-summary-row:last-child, .session-row:last-child,
.preview-row:last-child, .receipt-row:last-child, .verify-row:last-child { border-bottom: none; }

.account-info-row strong, .preview-value, .receipt-value, .account-summary-value {
    font-weight: 300;
    text-align: right;
}

.receipt-row--amount, .verify-row--amount { font-size: var(--text-body-lg); }

/* ==========================================================================
   Category tags (signature element)
   ========================================================================== */

.tag, .partner-tag, .product-tag, .product-badge, .category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-tags);
    background: var(--color-tag-slate);
    color: var(--color-paper-white);
    font-size: var(--text-caption);
    font-weight: 200;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transform: rotate(var(--rot, 0deg));
    box-shadow: rgba(255, 255, 255, 0.28) 1px 1px 1px -0.5px inset;
}

.tag--coral      { background: var(--color-tag-coral); }
.tag--lime       { background: var(--color-tag-lime); }
.tag--tangerine  { background: var(--color-tag-tangerine); }
.tag--hot-pink   { background: var(--color-tag-hot-pink); }
.tag--violet     { background: var(--color-tag-violet); }
.tag--sunflower  { background: var(--color-tag-sunflower); color: var(--color-midnight-canvas); }
.tag--sky        { background: var(--color-tag-sky); }
.tag--ember      { background: var(--color-tag-ember); }
.tag--olive      { background: var(--color-tag-olive); }

.partner-tag--accent, .product-tag--gold { background: var(--color-tag-sunflower); color: var(--color-midnight-canvas); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-buttons);
    font-size: var(--text-body-sm);
    font-weight: 200;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: opacity .18s ease, background .18s ease;
    background: transparent;
    color: var(--color-paper-white);
}

.btn:active { opacity: .8; }

.btn-primary, .btn-hero, .auth-submit {
    background: var(--color-signal-blue);
    color: var(--color-paper-white);
}

.btn-secondary, .btn-outline {
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
}

.btn-large { padding: 14px 24px; font-size: var(--text-body); }

.btn-mini {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-pills);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: var(--text-caption);
    font-weight: 200;
}

.btn-mini--accent { background: var(--color-signal-blue); border-color: transparent; }

.btn[disabled], .btn:disabled { opacity: .4; cursor: not-allowed; }

.quick-actions, .form-actions, .cta-actions, .receipt-actions, .hero-buttons, .history-toolbar, .partner-cta, .shop-card-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12);
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    padding-top: var(--spacing-8);
    border-top: 1px solid rgba(17, 38, 59, 0.6);
}

.quick-links a {
    padding: 8px 14px;
    border-radius: var(--radius-pills);
    background: var(--color-indigo-surface);
    color: var(--color-fog);
    font-size: var(--text-caption);
}

.quick-links-exit { color: var(--color-tag-coral) !important; }

/* ==========================================================================
   Forms
   ========================================================================== */

.transfer-form, .auth-form, .shop-card-form { display: flex; flex-direction: column; gap: var(--spacing-16); }

.form-group { display: flex; flex-direction: column; gap: var(--spacing-8); }

.form-row { display: grid; gap: var(--spacing-16); grid-template-columns: 1fr; }
@media (min-width: 560px) { .form-row { grid-template-columns: repeat(2, 1fr); } }

label {
    color: var(--color-fog);
    font-size: var(--text-caption);
    letter-spacing: 0.02em;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="tel"], select, textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--color-indigo-surface);
    border: 1px solid rgba(17, 38, 59, 0.8);
    border-radius: var(--radius-buttons);
    color: var(--color-paper-white);
    font-size: var(--text-body);
    font-weight: 200;
    box-shadow: var(--shadow-pressed);
    transition: border-color .18s ease;
}

input::placeholder, textarea::placeholder { color: var(--color-mist); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-signal-blue);
}

textarea { min-height: 110px; resize: vertical; }

.input-mono, .input-tracking { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }

.form-hint { color: var(--color-mist); font-size: var(--text-caption); line-height: 1.5; }
.form-hint--inline { display: inline; }
.form-error { color: var(--color-tag-coral); font-size: var(--text-caption); }

.captcha-group { margin-top: var(--spacing-8); }

/* Toggle switch */

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    font-size: var(--text-body-sm);
}

.switch {
    position: relative;
    width: 50px; height: 28px;
    border: none;
    border-radius: var(--radius-pills);
    background: var(--color-indigo-surface);
    box-shadow: var(--shadow-pressed);
    cursor: pointer;
    flex: 0 0 auto;
}

.switch::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-mist);
    transition: transform .2s ease, background .2s ease;
}

.switch.is-on { background: var(--color-signal-blue); }
.switch.is-on::after { transform: translateX(22px); background: var(--color-paper-white); }

/* ==========================================================================
   Tables & lists
   ========================================================================== */

.table-wrapper { overflow-x: auto; padding: var(--spacing-8); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }

th {
    text-align: left;
    padding: var(--spacing-12);
    color: var(--color-mist);
    font-weight: 600;
    font-size: var(--text-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    padding: var(--spacing-12);
    border-top: 1px solid rgba(17, 38, 59, 0.6);
    font-weight: 200;
    vertical-align: middle;
}

.positive, .verified { color: var(--color-tag-lime); }
.negative { color: var(--color-tag-coral); }
.status-pending, .partner-status--warn { color: var(--color-tag-sunflower); }
.partner-status--ok { color: var(--color-tag-lime); }
.partner-status--lock { color: var(--color-mist); }

.cell-token, .code, .receipt-signature, .verify-code, .login-welcome-code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: var(--text-caption);
    letter-spacing: 0.06em;
    word-break: break-all;
    color: var(--color-fog);
}

/* Список операций — мобильная альтернатива таблице */
.op-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.op-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    padding: var(--spacing-12) 0;
    border-bottom: 1px solid rgba(17, 38, 59, 0.6);
}

.op-item:last-child { border-bottom: none; }

.op-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pills);
    background: var(--color-indigo-surface);
    box-shadow: var(--shadow-pressed);
    font-size: 15px;
}

.op-icon--in { color: var(--color-tag-lime); }
.op-icon--out { color: var(--color-fog); }

.op-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.op-title {
    font-size: var(--text-body-sm);
    font-weight: 200;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-meta { color: var(--color-mist); font-size: 11px; letter-spacing: 0.02em; }

.op-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.op-amount { font-size: var(--text-body-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-link { font-size: 11px; color: var(--color-mist); }

.notif-list, .ticket-list, .session-list { display: flex; flex-direction: column; gap: var(--spacing-4); }

.notif-item, .ticket-item {
    padding: var(--spacing-16) 0;
    border-bottom: 1px solid rgba(17, 38, 59, 0.6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.notif-item:last-child, .ticket-item:last-child { border-bottom: none; }

.notif-item-head, .ticket-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-12);
    font-size: var(--text-body-sm);
}

.notif-item-body, .ticket-item-body { color: var(--color-fog); font-size: var(--text-body-sm); line-height: 1.6; }
.notif-item-time { color: var(--color-mist); font-size: var(--text-caption); white-space: nowrap; }
.notif-item.is_read, .notif-empty { color: var(--color-mist); }

.ticket-status { font-size: var(--text-caption); color: var(--color-tag-sunflower); }

.empty-state { text-align: center; display: flex; flex-direction: column; gap: var(--spacing-16); align-items: center; }
.empty-state p { color: var(--color-fog); margin: 0; }

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    padding: var(--spacing-16);
    border-radius: var(--radius-buttons);
    background: var(--color-indigo-surface);
    border-left: 2px solid var(--color-signal-blue);
    color: var(--color-fog);
    font-size: var(--text-body-sm);
    line-height: 1.5;
}

.alert-success { border-left-color: var(--color-tag-lime); }
.alert-error   { border-left-color: var(--color-tag-coral); }
.alert-warning { border-left-color: var(--color-tag-sunflower); }
.alert-info    { border-left-color: var(--color-tag-sky); }

/* ==========================================================================
   Receipt / verify / transfer
   ========================================================================== */

.receipt-header, .shop-card-head, .partner-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-16);
}

.receipt-brand, .receipt-title { font-family: var(--font-display); font-weight: 500; }
.receipt-number { color: var(--color-mist); font-size: var(--text-caption); }
.receipt-amount, .verify-amount, .transfer-summary-amount {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-heading-sm);
    letter-spacing: -0.02em;
}
.receipt-status { font-size: var(--text-caption); color: var(--color-tag-lime); }
.receipt-note, .receipt-footer { color: var(--color-mist); font-size: var(--text-caption); line-height: 1.6; }
.receipt-section { margin-top: var(--spacing-20); }
.receipt-alert { border-left-color: var(--color-tag-sunflower); }

.transfer-summary {
    background: var(--color-indigo-surface);
    border-radius: var(--radius-buttons);
    padding: var(--spacing-16);
    box-shadow: var(--shadow-pressed);
}

.transfer-summary-row { display: flex; justify-content: space-between; gap: var(--spacing-12); font-size: var(--text-body-sm); padding: 4px 0; }

.shop-card-price, .rate, .stat-number {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-subheading);
    letter-spacing: -0.02em;
}

.stat-label, .partner-desc, .shop-card-desc, .partner-status, .team-role {
    color: var(--color-fog);
    font-size: var(--text-body-sm);
    line-height: 1.6;
}

.stat-item { display: flex; flex-direction: column; gap: 4px; }

.product-features, .feature-list, .service-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-8); }
.product-features li, .feature-list li, .service-list li {
    color: var(--color-fog);
    font-size: var(--text-body-sm);
    padding-left: var(--spacing-16);
    position: relative;
}
.product-features li::before, .feature-list li::before, .service-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-signal-blue);
}

/* ==========================================================================
   Language switcher
   ========================================================================== */

.lang-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-deep-surface); border-radius: var(--radius-pills); box-shadow: var(--shadow-pressed); }

.lang-switch-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-pills);
    font-size: 11px;
    color: var(--color-mist);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lang-switch-item.is-active { background: var(--color-signal-blue); color: var(--color-paper-white); }
/* Флаг-эмодзи на части платформ рендерится как буквенный код и дублирует подпись. */
.lang-switch-flag { display: none; }

/* ==========================================================================
   Misc / a11y
   ========================================================================== */

.dashboard { display: flex; flex-direction: column; gap: var(--spacing-24); }

.pin-verification { display: flex; flex-direction: column; gap: var(--spacing-16); }

.username-preview, .login-welcome {
    background: var(--color-indigo-surface);
    border-radius: var(--radius-buttons);
    padding: var(--spacing-16);
    box-shadow: var(--shadow-pressed);
}

.login-welcome-row { display: flex; justify-content: space-between; gap: var(--spacing-12); padding: 4px 0; font-size: var(--text-body-sm); }
.login-welcome-label { color: var(--color-mist); font-size: var(--text-caption); }

.site-footer, .footer-grid, .footer-bottom, .mobile-menu-toggle, .nav-links { display: none; }

:focus-visible { outline: 2px solid var(--color-signal-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}