:root {
    --chia-base:   #ef4826;
    --chia-base2:  #ffd6cc;
    --chia-base3:  #fff0ec;
    --chia-base4:  #ff977f;
    --chia-text:   #1f2937;
    --chia-muted:  #64748b;
    --chia-paper:  #fffdf7;
    --chia-green:  #16a34a;
    --chia-blue:   #2563eb;
    --chia-gold:   #f59e0b;
    --chia-red:    #dc2626;
}

/* ─── reset ──────────────────────────────────────────── */
.chia-stage,
.chia-stage * {
    box-sizing: border-box;
}

/* ─── outer stage ────────────────────────────────────── */
.chia-stage {
    width: 100%;
    direction: rtl;
    display: flex;
    justify-content: center;
    padding: 32px 24px;
}

/* ─── main frame ─────────────────────────────────────── */
.chia-animation-frame {
    position: relative;
    width: min(1200px, 96vw);
    height: 740px;
    background:
        radial-gradient(ellipse 55% 44% at 6% 8%, rgba(239,72,38,.13), transparent),
        radial-gradient(ellipse 42% 38% at 96% 94%, rgba(255,151,131,.12), transparent),
        linear-gradient(150deg, #ffffff 0%, #fff8f5 55%, #fff0ec 100%);
    border: 1px solid rgba(239,72,38,.14);
    border-radius: 36px;
    box-shadow:
        0 2px 4px rgba(239,72,38,.04),
        0 8px 20px rgba(239,72,38,.07),
        0 28px 60px rgba(239,72,38,.12),
        0 60px 120px rgba(239,72,38,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
    overflow: hidden;
}

/* top shine */
.chia-animation-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(239,72,38,.3) 20%,
        var(--chia-base) 50%,
        rgba(239,72,38,.3) 80%,
        transparent 100%
    );
    border-radius: 36px 36px 0 0;
    z-index: 2;
}

/* dot grid */
.chia-animation-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(239,72,38,.055) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
}

/* ─── brand ───────────────────────────────────────────── */
.chia-brand {
    position: absolute;
    top: 34px;
    right: 40px;
    z-index: 10;
    padding-right: 18px;
    border-right: 4px solid var(--chia-base);
}

.chia-logo {
    font-size: 36px;
    font-weight: 900;
    color: var(--chia-text);
    letter-spacing: -.5px;
}

.chia-logo span {
    color: var(--chia-base);
}

.chia-main-title {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 900;
    color: var(--chia-base);
}

.chia-subtitle {
    margin-top: 6px;
    font-size: 15px;
    color: var(--chia-muted);
    max-width: 360px;
    line-height: 1.6;
}

/* ─── caption typewriter bar ─────────────────────────── */
.chia-caption {
    position: absolute;
    top: 165px;
    right: 40px;
    width: 420px;
    height: 54px;
    overflow: hidden;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(239,72,38,.22);
    border-right: 4px solid var(--chia-base);
    color: var(--chia-text);
    border-radius: 14px;
    padding: 0 22px 0 44px;
    font-size: 15px;
    font-weight: 800;
    box-shadow:
        0 4px 8px rgba(239,72,38,.06),
        0 12px 28px rgba(239,72,38,.1),
        inset 0 1px 0 rgba(255,255,255,.95);
    z-index: 10;
    display: flex;
    align-items: center;
}

/* pulsing dot on the left end */
.chia-caption::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    background: var(--chia-base);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(239,72,38,.5);
    animation: chiaPulse 2s ease-in-out infinite;
    z-index: 11;
}

.chia-caption span {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    border-left: 2px solid var(--chia-base);
}

.chia-caption span:nth-child(1) { animation: chiaTypeText1 12s infinite; }
.chia-caption span:nth-child(2) { animation: chiaTypeText2 12s infinite; }
.chia-caption span:nth-child(3) { animation: chiaTypeText3 12s infinite; }
.chia-caption span:nth-child(4) { animation: chiaTypeText4 12s infinite; }

/* ─── product cards ───────────────────────────────────── */
.chia-products-float {
    position: absolute;
    left: 42px;
    top: 78px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 15;
}

.chia-product-card {
    width: 220px;
    position: relative;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(239,72,38,.14);
    border-top: 3px solid var(--chia-base);
    border-radius: 20px;
    padding: 14px 14px 14px 14px;
    box-shadow:
        0 4px 6px rgba(15,23,42,.05),
        0 14px 36px rgba(15,23,42,.09),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.chia-type-store .chia-products-float .chia-product-card:nth-child(1),
.chia-type-service .chia-products-float .chia-product-card:nth-child(1) { animation: chiaMoveToPrinter 12s infinite; }
.chia-type-store .chia-products-float .chia-product-card:nth-child(2),
.chia-type-service .chia-products-float .chia-product-card:nth-child(2) { animation: chiaMoveToPrinter 12s infinite .45s; }
.chia-type-store .chia-products-float .chia-product-card:nth-child(3),
.chia-type-service .chia-products-float .chia-product-card:nth-child(3) { animation: chiaMoveToPrinter 12s infinite .9s; }

.chia-product-image {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--chia-base3);
    border: 1.5px solid var(--chia-base2);
    color: var(--chia-base);
    font-size: 24px;
    margin-bottom: 9px;
    overflow: hidden;
}

.chia-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chia-product-title {
    font-weight: 900;
    color: var(--chia-text);
    font-size: 15px;
}

.chia-product-price {
    color: var(--chia-base);
    font-size: 13px;
    margin-top: 5px;
    font-weight: 900;
}

.chia-product-desc {
    color: var(--chia-muted);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.7;
}

/* ─── accounting panel ────────────────────────────────── */
.chia-accounting-panel {
    position: absolute;
    right: 38px;
    bottom: 50px;
    width: 275px;
    z-index: 20;
}

.chia-panel-title {
    background: linear-gradient(135deg, #fde8e2, #fcd5cb);
    border: 1px solid rgba(239,72,38,.2);
    box-shadow: 0 8px 24px rgba(239,72,38,.1);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.chia-panel-title strong {
    display: block;
    font-size: 16px;
    color: var(--chia-text);
}

.chia-panel-title span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--chia-muted);
}

.chia-account-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(15,23,42,.07);
    border-radius: 18px;
    padding: 13px;
    margin-bottom: 11px;
    box-shadow:
        0 4px 6px rgba(15,23,42,.04),
        0 12px 30px rgba(15,23,42,.08);
    opacity: 0;
    transform: translateX(28px) scale(.96);
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.chia-account-card.chia-inventory {
    animation-name: chiaShowInventory;
    border-right: 4px solid var(--chia-red);
}

.chia-account-card.chia-bank {
    animation-name: chiaShowBank;
    border-right: 4px solid var(--chia-blue);
}

.chia-account-card.chia-profit {
    animation-name: chiaShowProfit;
    border-right: 4px solid var(--chia-green);
}

.chia-account-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 46px;
}

.chia-inventory .chia-account-icon { background: #fee2e2; }
.chia-bank     .chia-account-icon { background: #dbeafe; }
.chia-profit   .chia-account-icon { background: #fef3c7; }

.chia-account-info { flex: 1; }

.chia-account-label {
    font-size: 12px;
    color: var(--chia-muted);
    margin-bottom: 3px;
}

.chia-account-value {
    font-size: 15px;
    font-weight: 900;
    color: var(--chia-text);
}

.chia-account-change {
    font-size: 12px;
    font-weight: 900;
    margin-top: 4px;
}

.chia-inventory .chia-account-change { color: var(--chia-red); }
.chia-bank      .chia-account-change { color: var(--chia-blue); }
.chia-profit    .chia-account-change { color: var(--chia-green); }

/* ─── sync line ───────────────────────────────────────── */
.chia-sync-line {
    position: absolute;
    right: 310px;
    bottom: 255px;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--chia-base), transparent);
    filter: drop-shadow(0 0 6px rgba(239,72,38,.8));
    opacity: 0;
    animation: chiaSyncLine 12s infinite;
}

/* ─── printer scene ───────────────────────────────────── */
.chia-printer-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 96px;
}

.chia-counter {
    position: absolute;
    left: 120px;
    right: 120px;
    bottom: 78px;
    height: 34px;
    background: linear-gradient(180deg, #e2e8f0, #aab7c6);
    border-radius: 50%;
    opacity: .7;
}

.chia-printer-wrap {
    position: relative;
    width: 455px;
    height: 520px;
}

/* ─── receipt ─────────────────────────────────────────── */
.chia-receipt {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: 212px;
    height: 0;
    background: var(--chia-paper);
    border: 1px solid #e4dac6;
    border-bottom: none;
    border-radius: 12px 12px 4px 4px;
    overflow: hidden;
    z-index: 3;
    box-shadow:
        0 4px 6px rgba(15,23,42,.06),
        0 18px 40px rgba(15,23,42,.14);
    animation: chiaReceiptPrint 12s infinite;
}

.chia-receipt-inner {
    padding: 16px;
    text-align: center;
    color: #1f2937;
    opacity: 0;
    animation: chiaReceiptText 12s infinite;
}

.chia-receipt-title {
    font-size: 19px;
    font-weight: 900;
    color: var(--chia-base);
}

.chia-receipt-subtitle {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.chia-receipt-line {
    height: 1px;
    background: repeating-linear-gradient(90deg, #94a3b8 0 7px, transparent 7px 12px);
    margin: 8px 0;
}

.chia-receipt-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin: 5px 0;
}

.chia-receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

.chia-receipt-table th,
.chia-receipt-table td {
    padding: 5px 2px;
    border-bottom: 1px dashed #cbd5e1;
    font-size: 9.5px;
    text-align: center;
    white-space: nowrap;
}

.chia-receipt-table th:first-child,
.chia-receipt-table td:first-child {
    text-align: right;
    width: 38%;
}

.chia-receipt-table tbody tr {
    opacity: 0;
    transform: translateY(10px);
    animation: chiaItemShow 12s infinite;
}

.chia-receipt-table tbody tr:nth-child(1) { animation-delay: 1.3s; }
.chia-receipt-table tbody tr:nth-child(2) { animation-delay: 1.8s; }
.chia-receipt-table tbody tr:nth-child(3) { animation-delay: 2.3s; }

.chia-receipt-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 900;
    margin-top: 9px;
    color: #111827;
}

.chia-thanks {
    margin-top: 9px;
    font-size: 10.5px;
    color: var(--chia-muted);
}

/* ─── paper cut ───────────────────────────────────────── */
.chia-paper-cut {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: 212px;
    height: 14px;
    background: repeating-linear-gradient(135deg, var(--chia-paper) 0 10px, transparent 10px 20px);
    opacity: 0;
    animation: chiaPaperCut 12s infinite;
    z-index: 8;
}

/* ─── 3d printer ──────────────────────────────────────── */
.chia-printer {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 28px;
    height: 250px;
    z-index: 4;
    filter: drop-shadow(0 38px 46px rgba(15,23,42,.34));
}

.chia-printer-top {
    position: absolute;
    left: 26px; right: 26px; top: 0;
    height: 100px;
    background: linear-gradient(145deg, #6b7280 0%, #374151 42%, #111827 100%);
    border-radius: 38px 38px 22px 22px;
    box-shadow:
        inset 0 6px 12px rgba(255,255,255,.22),
        inset 0 -18px 28px rgba(0,0,0,.34);
    z-index: 4;
}

.chia-printer-slot {
    position: absolute;
    left: 70px; right: 70px; top: 36px;
    height: 26px;
    background: linear-gradient(180deg, #020617, #111827 60%, #1e293b);
    border-radius: 999px;
    box-shadow: inset 0 5px 10px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.12);
    z-index: 6;
}

.chia-printer-front {
    position: absolute;
    left: 0; right: 0; top: 70px;
    height: 170px;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.14), transparent 26%),
        linear-gradient(180deg, #4b5563 0%, #1f2937 58%, #0f172a 100%);
    border-radius: 30px 30px 40px 40px;
    box-shadow:
        inset 0 8px 18px rgba(255,255,255,.12),
        inset 0 -24px 28px rgba(0,0,0,.38);
    z-index: 3;
}

.chia-printer-face {
    position: absolute;
    left: 48px; right: 48px; top: 112px;
    height: 82px;
    border-radius: 22px;
    background: linear-gradient(180deg, #1e293b, #020617);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow:
        inset 0 8px 16px rgba(0,0,0,.42),
        0 10px 20px rgba(0,0,0,.18);
    z-index: 5;
}

.chia-brand-mark {
    position: absolute;
    right: 22px; top: 17px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .3px;
}

.chia-model-mark {
    position: absolute;
    right: 22px; top: 42px;
    color: #94a3b8;
    font-size: 9.5px;
    direction: ltr;
    letter-spacing: 1px;
}

.chia-printer-button {
    position: absolute;
    left: 24px; top: 22px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0%, #dbeafe 18%, #64748b 52%, #1e293b 100%);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        inset 0 3px 5px rgba(255,255,255,.35),
        inset 0 -4px 8px rgba(0,0,0,.35),
        0 4px 12px rgba(0,0,0,.35);
}

.chia-printer-light {
    position: absolute;
    left: 76px; top: 34px;
    width: 14px; height: 14px;
    background: var(--chia-base);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(239,72,38,.95);
    animation: chiaPrinterLight 12s infinite;
}

.chia-feet {
    position: absolute;
    left: 70px; right: 70px; bottom: -8px;
    height: 26px;
    z-index: 1;
}

.chia-feet::before,
.chia-feet::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 82px; height: 26px;
    background: linear-gradient(180deg, #1f2937, #020617);
    border-radius: 0 0 20px 20px;
}

.chia-feet::before { right: 0; }
.chia-feet::after  { left: 0;  }

/* ─── status text ─────────────────────────────────────── */
.chia-status-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    white-space: nowrap;
    background: rgba(22,163,74,.1);
    border: 1.5px solid rgba(22,163,74,.3);
    border-radius: 999px;
    padding: 6px 20px;
    color: var(--chia-green);
    font-size: 16px;
    font-weight: 900;
    opacity: 0;
    animation: chiaStatusText 12s infinite;
}

/* ─── decorative circles ──────────────────────────────── */
.chia-circle {
    position: absolute;
    border-radius: 50%;
}

.chia-c1 {
    width: 340px; height: 340px;
    left: -130px; top: -130px;
    background: radial-gradient(circle, rgba(239,72,38,.1), transparent 70%);
}

.chia-c2 {
    width: 260px; height: 260px;
    right: 160px; bottom: -130px;
    background: radial-gradient(circle, rgba(255,151,131,.18), transparent 70%);
}

.chia-c3 {
    width: 140px; height: 140px;
    left: 260px; bottom: 90px;
    background: radial-gradient(circle, rgba(239,72,38,.08), transparent 70%);
}

/* ─── admin form styles ───────────────────────────────── */
.chia-admin-box label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
}

.chia-admin-box input[type="text"] {
    width: 100%;
    padding: 9px;
}

.chia-product-admin {
    padding: 15px;
    border: 1px solid #ddd;
    background: #fff;
    margin-bottom: 15px;
    border-radius: 10px;
}

.chia-product-admin h4 { margin-top: 0; }

.chia-image-preview img {
    width: 70px; height: 70px;
    object-fit: cover;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 8px;
}

/* ─── keyframes ───────────────────────────────────────── */

/* caption pulse dot */
@keyframes chiaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,72,38,.5); }
    50%       { box-shadow: 0 0 0 6px rgba(239,72,38,.0); }
}

/* typewriter captions */
@keyframes chiaTypeText1 {
    0%        { opacity: 1; width: 0; }
    8%        { opacity: 1; width: 370px; }
    20%       { opacity: 1; width: 370px; }
    25%, 100% { opacity: 0; width: 370px; }
}

@keyframes chiaTypeText2 {
    0%, 25%   { opacity: 0; width: 0; }
    32%       { opacity: 1; width: 280px; }
    45%       { opacity: 1; width: 280px; }
    50%, 100% { opacity: 0; width: 280px; }
}

@keyframes chiaTypeText3 {
    0%, 50%   { opacity: 0; width: 0; }
    58%       { opacity: 1; width: 320px; }
    70%       { opacity: 1; width: 320px; }
    75%, 100% { opacity: 0; width: 320px; }
}

@keyframes chiaTypeText4 {
    0%, 75%   { opacity: 0; width: 0; }
    82%       { opacity: 1; width: 280px; }
    96%       { opacity: 1; width: 280px; }
    100%      { opacity: 0; width: 280px; }
}

/* product card fly to printer */
@keyframes chiaMoveToPrinter {
    0%        { transform: translate(0,0) scale(1) rotate(0); opacity: 1; }
    12%       { transform: translate(140px,40px) scale(.9) rotate(5deg); opacity: 1; }
    20%       { transform: translate(280px,110px) scale(.65) rotate(12deg); opacity: .8; }
    28%, 100% { transform: translate(420px,180px) scale(.2) rotate(25deg); opacity: 0; }
}

/* receipt printing */
@keyframes chiaReceiptPrint {
    0%, 18%    { height: 0; }
    35%        { height: 170px; }
    58%, 100%  { height: 390px; }
}

@keyframes chiaReceiptText {
    0%, 28%   { opacity: 0; }
    42%, 100% { opacity: 1; }
}

@keyframes chiaItemShow {
    0%, 28%   { opacity: 0; transform: translateY(12px); }
    36%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes chiaPaperCut {
    0%, 58%   { opacity: 0; }
    64%, 100% { opacity: 1; }
}

/* printer light */
@keyframes chiaPrinterLight {
    0%, 18%, 58%, 100% { background: var(--chia-base); box-shadow: 0 0 20px rgba(239,72,38,.95); }
    24%, 54%           { background: var(--chia-base4); box-shadow: 0 0 12px rgba(255,151,131,.7); }
}

/* status text */
@keyframes chiaStatusText {
    0%, 56%   { opacity: 0; transform: translateX(-50%) translateY(14px); }
    62%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* accounting cards */
@keyframes chiaShowInventory {
    0%, 32% { opacity: 0; transform: translateX(28px) scale(.96); }
    38%     { opacity: 1; transform: translateX(0) scale(1.06); }
    45%,100%{ opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes chiaShowBank {
    0%, 40% { opacity: 0; transform: translateX(28px) scale(.96); }
    46%     { opacity: 1; transform: translateX(0) scale(1.06); }
    52%,100%{ opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes chiaShowProfit {
    0%, 48% { opacity: 0; transform: translateX(28px) scale(.96); }
    54%     { opacity: 1; transform: translateX(0) scale(1.06); }
    60%,100%{ opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes chiaSyncLine {
    0%, 54%   { opacity: 0; transform: scaleX(.2); }
    60%, 100% { opacity: 1; transform: scaleX(1); }
}

/* ════════════════════════════════════════════════════════
   TYPE: BARCODE  🏷️  بارکدخوان
   ════════════════════════════════════════════════════════ */

.chia-barcode-zone {
    position: absolute;
    left: 36px;
    top: 88px;
    display: grid;
    grid-template-columns: 196px 120px;
    column-gap: 6px;
    align-items: start;
    z-index: 15;
    width: auto;
    height: auto;
    --bc-step: 149px; /* ارتفاع کارت + فاصله */
}

.chia-type-barcode .chia-barcode-products.chia-products-float {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 196px;
}

.chia-type-barcode .chia-barcode-scanner {
    grid-column: 2;
    grid-row: 1;
}

.chia-type-barcode .chia-barcode-products .chia-product-card {
    width: 100%;
    padding: 11px 12px 10px;
    margin: 0;
}

.chia-type-barcode .chia-barcode-products .chia-product-image {
    width: 44px;
    height: 44px;
    font-size: 20px;
    margin-bottom: 7px;
}

.chia-type-barcode .chia-barcode-products .chia-product-title {
    font-size: 14px;
    line-height: 1.35;
}

.chia-type-barcode .chia-barcode-products .chia-product-price {
    font-size: 12px;
    margin-top: 4px;
}

.chia-type-barcode .chia-barcode-products .chia-product-desc {
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.5;
}

/* محصولات ثابت می‌مانند — اسکن می‌شوند */
.chia-type-barcode .chia-barcode-products .chia-barcode-card-1 { animation: chiaBarcodeScan1 12s infinite; }
.chia-type-barcode .chia-barcode-products .chia-barcode-card-2 { animation: chiaBarcodeScan2 12s infinite; }
.chia-type-barcode .chia-barcode-products .chia-barcode-card-3 { animation: chiaBarcodeScan3 12s infinite; }

.chia-type-barcode .chia-product-card {
    border-top-color: #16a34a;
}

.chia-scan-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--chia-green);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 20px;
    opacity: 0;
    transform: scale(.8);
    white-space: nowrap;
}

.chia-barcode-card-1 .chia-scan-badge { animation: chiaScanBadge1 12s infinite; }
.chia-barcode-card-2 .chia-scan-badge { animation: chiaScanBadge2 12s infinite; }
.chia-barcode-card-3 .chia-scan-badge { animation: chiaScanBadge3 12s infinite; }

/* بارکدخوان — ستون جدا، کنار محصولات (بدون همپوشانی) */
.chia-barcode-scanner {
    position: relative;
    left: auto;
    top: 12px;
    width: 120px;
    z-index: 20;
    animation: chiaScannerMove 12s infinite;
    pointer-events: none;
    filter: drop-shadow(0 10px 22px rgba(15,23,42,.28));
    align-self: start;
}

.chia-barcode-scanner-img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: screen;
}

/* تایم‌لاین چاپ فاکتور بعد از اتمام اسکن */
.chia-type-barcode .chia-receipt {
    animation: chiaReceiptPrintBarcode 12s infinite;
}

.chia-type-barcode .chia-receipt-inner {
    animation: chiaReceiptTextBarcode 12s infinite;
}

.chia-type-barcode .chia-receipt-table tbody tr {
    animation: chiaItemShowBarcode 12s infinite;
}

.chia-type-barcode .chia-receipt-table tbody tr:nth-child(2) { animation-delay: .12s; }
.chia-type-barcode .chia-receipt-table tbody tr:nth-child(3) { animation-delay: .24s; }

.chia-type-barcode .chia-paper-cut {
    animation: chiaPaperCutBarcode 12s infinite;
}

.chia-type-barcode .chia-printer-light {
    animation: chiaPrinterLightBarcode 12s infinite;
}

.chia-type-barcode .chia-status-text {
    animation: chiaStatusTextBarcode 12s infinite;
}

.chia-type-barcode .chia-account-card.chia-inventory { animation: chiaShowInventoryBarcode 12s infinite; }
.chia-type-barcode .chia-account-card.chia-bank      { animation: chiaShowBankBarcode 12s infinite; }
.chia-type-barcode .chia-account-card.chia-profit    { animation: chiaShowProfitBarcode 12s infinite; }

.chia-type-barcode .chia-sync-line {
    animation: chiaSyncLineBarcode 12s infinite;
}

/* ─── barcode keyframes ─── */
@keyframes chiaScannerMove {
    0%, 3%    { transform: translateY(0);        opacity: 0; }
    6%, 20%   { transform: translateY(0);        opacity: 1; }
    24%, 26%  { transform: translateY(var(--bc-step));     opacity: 1; }
    30%, 44%  { transform: translateY(var(--bc-step));     opacity: 1; }
    48%, 50%  { transform: translateY(calc(var(--bc-step) * 2)); opacity: 1; }
    54%, 68%  { transform: translateY(calc(var(--bc-step) * 2)); opacity: 1; }
    72%, 100% { transform: translateY(calc(var(--bc-step) * 2)); opacity: .55; }
}

@keyframes chiaBarcodeScan1 {
    0%, 5%   { box-shadow: 0 4px 6px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.09); border-color: rgba(239,72,38,.14); }
    8%, 22%  { box-shadow: 0 0 0 3px rgba(22,163,74,.35), 0 14px 36px rgba(22,163,74,.15); border-color: rgba(22,163,74,.55); }
    26%, 100%{ box-shadow: 0 4px 6px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.09); border-color: rgba(239,72,38,.14); }
}

@keyframes chiaBarcodeScan2 {
    0%, 28%  { box-shadow: 0 4px 6px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.09); border-color: rgba(239,72,38,.14); }
    31%, 46% { box-shadow: 0 0 0 3px rgba(22,163,74,.35), 0 14px 36px rgba(22,163,74,.15); border-color: rgba(22,163,74,.55); }
    50%, 100%{ box-shadow: 0 4px 6px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.09); border-color: rgba(239,72,38,.14); }
}

@keyframes chiaBarcodeScan3 {
    0%, 52%  { box-shadow: 0 4px 6px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.09); border-color: rgba(239,72,38,.14); }
    55%, 70% { box-shadow: 0 0 0 3px rgba(22,163,74,.35), 0 14px 36px rgba(22,163,74,.15); border-color: rgba(22,163,74,.55); }
    74%, 100%{ box-shadow: 0 4px 6px rgba(15,23,42,.05), 0 14px 36px rgba(15,23,42,.09); border-color: rgba(239,72,38,.14); }
}

@keyframes chiaScanBadge1 {
    0%, 7%   { opacity: 0; transform: scale(.8); }
    10%, 22% { opacity: 1; transform: scale(1); }
    26%, 100%{ opacity: 1; transform: scale(1); }
}

@keyframes chiaScanBadge2 {
    0%, 30%  { opacity: 0; transform: scale(.8); }
    33%, 46% { opacity: 1; transform: scale(1); }
    50%, 100%{ opacity: 1; transform: scale(1); }
}

@keyframes chiaScanBadge3 {
    0%, 54%  { opacity: 0; transform: scale(.8); }
    57%, 70% { opacity: 1; transform: scale(1); }
    74%, 100%{ opacity: 1; transform: scale(1); }
}

@keyframes chiaReceiptPrintBarcode {
    0%, 68%    { height: 0; }
    78%        { height: 170px; }
    92%, 100%  { height: 390px; }
}

@keyframes chiaReceiptTextBarcode {
    0%, 74%   { opacity: 0; }
    82%, 100% { opacity: 1; }
}

@keyframes chiaItemShowBarcode {
    0%, 76%   { opacity: 0; transform: translateY(12px); }
    84%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes chiaPaperCutBarcode {
    0%, 90%   { opacity: 0; }
    94%, 100% { opacity: 1; }
}

@keyframes chiaPrinterLightBarcode {
    0%, 68%, 94%, 100% { background: var(--chia-base); box-shadow: 0 0 20px rgba(239,72,38,.95); }
    74%, 90%           { background: var(--chia-base4); box-shadow: 0 0 12px rgba(255,151,131,.7); }
}

@keyframes chiaStatusTextBarcode {
    0%, 88%   { opacity: 0; transform: translateX(-50%) translateY(14px); }
    94%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes chiaShowInventoryBarcode {
    0%, 72% { opacity: 0; transform: translateX(28px) scale(.96); }
    78%     { opacity: 1; transform: translateX(0) scale(1.06); }
    84%,100%{ opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes chiaShowBankBarcode {
    0%, 78% { opacity: 0; transform: translateX(28px) scale(.96); }
    84%     { opacity: 1; transform: translateX(0) scale(1.06); }
    90%,100%{ opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes chiaShowProfitBarcode {
    0%, 84% { opacity: 0; transform: translateX(28px) scale(.96); }
    90%     { opacity: 1; transform: translateX(0) scale(1.06); }
    96%,100%{ opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes chiaSyncLineBarcode {
    0%, 86%   { opacity: 0; transform: scaleX(.2); }
    92%, 100% { opacity: 1; transform: scaleX(1); }
}


/* ════════════════════════════════════════════════════════
   TYPE: SERVICE  📱  خدماتی
   ════════════════════════════════════════════════════════ */

/* service card: آبی در بالا */
.chia-type-service .chia-product-card {
    border-top-color: #2563eb;
}

.chia-type-service .chia-product-image {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #2563eb;
}

/* ─── Phone scene ─── */
.chia-phone-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 96px;
}

.chia-phone-wrap {
    position: relative;
    width: 340px;
    height: 520px;
}

.chia-phone {
    position: absolute;
    left: 68px;
    right: 68px;
    bottom: 30px;
    height: 368px;
    background: linear-gradient(145deg, #374151, #111827);
    border-radius: 40px;
    border: 6px solid #1e293b;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.1),
        0 34px 60px rgba(15,23,42,.52),
        0 10px 18px rgba(15,23,42,.28);
    z-index: 4;
    filter: drop-shadow(0 30px 40px rgba(15,23,42,.38));
}

.chia-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 20px;
    background: #0f172a;
    border-radius: 10px;
    z-index: 7;
}

.chia-phone-screen {
    position: absolute;
    inset: 5px;
    background: #f8fafc;
    border-radius: 35px;
    overflow: hidden;
    z-index: 5;
}

.chia-phone-inner {
    position: absolute;
    inset: 0;
    padding: 42px 14px 14px;
    opacity: 0;
    animation: chiaPhoneScreen 12s infinite;
}

.chia-phone-header {
    text-align: center;
    padding-bottom: 9px;
    border-bottom: 1.5px solid #fee2e2;
    margin-bottom: 9px;
}

.chia-phone-logo {
    font-size: 13px;
    font-weight: 900;
    color: var(--chia-text);
}

.chia-phone-logo span { color: var(--chia-base); }

.chia-phone-invoice-title {
    font-size: 10px;
    color: var(--chia-muted);
    margin-top: 2px;
}

.chia-phone-line {
    height: 1px;
    background: repeating-linear-gradient(90deg, #e2e8f0 0 5px, transparent 5px 9px);
    margin: 8px 0;
}

.chia-phone-table {
    width: 100%;
    border-collapse: collapse;
}

.chia-phone-row {
    opacity: 0;
    animation: chiaPhoneRow 12s infinite;
}

.chia-phone-row:nth-child(1) { animation-delay: 1.3s; }
.chia-phone-row:nth-child(2) { animation-delay: 1.8s; }
.chia-phone-row:nth-child(3) { animation-delay: 2.3s; }

.chia-phone-row td {
    padding: 5px 2px;
    font-size: 9.5px;
    border-bottom: 1px dashed #cbd5e1;
    text-align: right;
}

.chia-phone-row td:last-child {
    text-align: left;
    color: var(--chia-base);
    font-weight: 700;
}

.chia-phone-total {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 900;
    margin-top: 9px;
    color: var(--chia-text);
}

.chia-phone-confirm {
    width: 100%;
    background: var(--chia-green);
    color: #fff;
    text-align: center;
    font-size: 10.5px;
    font-weight: 900;
    padding: 8px;
    border-radius: 12px;
    margin-top: 10px;
    opacity: 0;
    animation: chiaPhoneConfirm 12s infinite;
}

.chia-phone-home-btn {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 5px;
    background: rgba(255,255,255,.26);
    border-radius: 3px;
    z-index: 6;
}

.chia-phone-light {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background: var(--chia-green);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(22,163,74,.9);
    z-index: 8;
    animation: chiaPhoneLight 12s infinite;
}

/* status text reused from store (inside phone-wrap, same positioning) */
.chia-phone-wrap .chia-status-text {
    bottom: -8px;
}

/* ─── service keyframes ─── */
@keyframes chiaPhoneScreen {
    0%, 22%   { opacity: 0; }
    32%, 100% { opacity: 1; }
}

@keyframes chiaPhoneRow {
    0%, 32%   { opacity: 0; transform: translateY(8px); }
    40%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes chiaPhoneConfirm {
    0%, 46%   { opacity: 0; transform: scale(.94); }
    56%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes chiaPhoneLight {
    0%, 22%, 56%, 100% { background: var(--chia-green); box-shadow: 0 0 18px rgba(22,163,74,.9); }
    28%, 52%           { background: #4ade80;            box-shadow: 0 0 8px rgba(22,163,74,.45); }
}


/* ════════════════════════════════════════════════════════
   TYPE: FINANCE  📊  مالی / مدیریتی
   ════════════════════════════════════════════════════════ */

/* ─── Transaction rows ─── */
.chia-transactions {
    position: absolute;
    left: 42px;
    top: 78px;
    width: 240px;
    z-index: 15;
}

.chia-tx-header {
    font-size: 13px;
    font-weight: 900;
    color: var(--chia-muted);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--chia-base2);
}

.chia-tx-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(239,72,38,.1);
    border-right: 4px solid var(--chia-green);
    border-radius: 16px;
    padding: 11px 12px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateX(-20px);
    animation: chiaTxRow 12s infinite;
    box-shadow: 0 4px 14px rgba(15,23,42,.07);
}

.chia-tx-row:nth-child(2) { animation-delay: .55s; }
.chia-tx-row:nth-child(3) { animation-delay: 1.1s; }

.chia-tx-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #dcfce7;
    color: var(--chia-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 900;
    flex-shrink: 0;
    overflow: hidden;
}

.chia-tx-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chia-tx-body { flex: 1; min-width: 0; }

.chia-tx-name {
    font-size: 13px;
    font-weight: 900;
    color: var(--chia-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chia-tx-desc {
    font-size: 11px;
    color: var(--chia-muted);
    margin-top: 2px;
}

.chia-tx-amount {
    font-size: 12px;
    font-weight: 900;
    color: var(--chia-green);
    white-space: nowrap;
}

/* ─── Chart scene ─── */
.chia-chart-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    gap: 14px;
}

.chia-chart-card {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(239,72,38,.14);
    border-top: 3px solid var(--chia-base);
    border-radius: 24px;
    padding: 20px 22px 16px;
    width: 390px;
    box-shadow:
        0 4px 8px rgba(239,72,38,.05),
        0 14px 40px rgba(15,23,42,.1),
        inset 0 1px 0 rgba(255,255,255,.9);
    opacity: 0;
    animation: chiaChartCard 12s infinite;
}

.chia-chart-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.chia-chart-period {
    font-size: 12px;
    color: var(--chia-muted);
}

.chia-chart-peak-val {
    font-size: 15px;
    font-weight: 900;
    color: var(--chia-base);
}

.chia-bars-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 130px;
    direction: ltr;
    padding: 0 4px;
}

.chia-bar {
    flex: 1;
    background: var(--chia-base2);
    border-radius: 8px 8px 0 0;
    height: 0;
    animation: chiaBarGrow 12s infinite;
    transform-origin: bottom;
}

.chia-bar.chia-bar-peak {
    background: linear-gradient(180deg, var(--chia-base), var(--chia-base4));
    box-shadow: 0 -4px 16px rgba(239,72,38,.4);
}

.chia-bar:nth-child(1) { animation-delay: .15s; }
.chia-bar:nth-child(2) { animation-delay: .30s; }
.chia-bar:nth-child(3) { animation-delay: .45s; }
.chia-bar:nth-child(4) { animation-delay: .60s; }
.chia-bar:nth-child(5) { animation-delay: .75s; }

.chia-chart-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--chia-base2), transparent);
    margin: 12px 0 8px;
}

.chia-chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chia-chart-total {
    font-size: 15px;
    font-weight: 900;
    color: var(--chia-base);
}

/* ─── Balance card ─── */
.chia-balance-card {
    background: linear-gradient(135deg, var(--chia-base), var(--chia-base4));
    border-radius: 20px;
    padding: 16px 22px;
    width: 390px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 28px rgba(239,72,38,.32);
    opacity: 0;
    animation: chiaBalanceCard 12s infinite;
}

.chia-balance-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
}

.chia-balance-amount {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

/* finance status text sits inside flex column (no absolute) */
.chia-finance-status {
    position: static !important;
    transform: none !important;
    opacity: 0;
    animation: chiaFinanceStatus 12s infinite !important;
    margin-top: 2px;
}

/* ─── finance keyframes ─── */
@keyframes chiaTxRow {
    0%        { opacity: 0; transform: translateX(-20px); }
    12%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes chiaChartCard {
    0%, 5%    { opacity: 0; transform: translateY(18px); }
    18%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes chiaBarGrow {
    0%, 10%    { height: 0; }
    30%, 100%  { height: var(--bar-h); }
}

@keyframes chiaBalanceCard {
    0%, 28%   { opacity: 0; transform: translateY(14px); }
    40%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes chiaFinanceStatus {
    0%, 56%   { opacity: 0; }
    62%, 100% { opacity: 1; }
}


/* ─── mobile: JS (scale.js) handles scaling dynamically ─
   This CSS-only fallback fires only if JS hasn't loaded yet. */
@media (max-width: 1100px) {
    .chia-stage {
        padding: 8px 0 0;
        overflow: hidden;
        display: block;
    }
    .chia-animation-frame {
        width: 1200px;
        transform-origin: top right;
        transform: scale(0.88);
        margin-bottom: calc((0.88 - 1) * 740px);
    }
}