/* ==========================================================================
   فونت لاتین: Inter (لایسنس OFL، میزبانی محلی)
   نزدیک‌ترین جایگزین آزاد به SF Compact/SF Pro — ارقام و حروف لاتین از این فونت
   و حروف و ارقام فارسی از وزیرمتن می‌آیند (unicode-range جدا)
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-latin-300-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-latin-800-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   جی‌طلا — سیستم طراحی نسخه ۳
   توکن‌های رنگ + کامپوننت‌های پایه (کارت، کپسول، نوار پایین، پنل پایین‌رو)
   تم تاریک با کلاس .dark روی <html> فعال می‌شود (پیش‌فرض: تنظیم سیستم)
   ========================================================================== */

:root {
    /* سطوح */
    --g-screen: #f4f4f1;
    --g-card: #ffffff;
    --g-card-2: #fbfbf9;
    --g-pill: #ebebe7;
    --g-pill-on: #1f1f1f;
    --g-pill-on-text: #ffffff;
    --g-line: #e6e6e1;

    /* متن */
    --g-text: #1b1b1b;
    --g-muted: #7a7a74;
    --g-faint: #b3b3ad;

    /* رنگ‌های تأکید و نمودار */
    --g-accent: #c9ef3f;
    --g-accent-ink: #1a1f05;
    /* رنگ متن تأکیدی: در تم روشن تیره تا خوانا بماند */
    --g-accent-text: #5f7a0e;
    /* رنگ خط نمودار: در تم روشن تیره‌تر تا روی کارت سفید خوانا باشد */
    --g-chart: #7a9c17;
    --g-sky: #3fa9e8;
    --g-indigo: #5b5ef0;
    --g-green: #3f9a57;
    --g-coral: #f25c5c;
    --g-orange: #f59a2e;
    --g-violet: #9b5de5;
    --g-gold: #d9a326;
    --g-violet: #a855f7;
    --g-gray: #a8a8a2;

    --g-up: #1f9d4c;
    --g-down: #e0443e;

    --g-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);

    /* ارقام و حروف لاتین: Inter محلی | فارسی: وزیرمتن */
    --g-font-num: 'Inter', Vazirmatn, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --g-r-lg: 26px;
    --g-r-md: 22px;
    --g-r-sm: 16px;
    --g-nav-h: 78px;
}

.dark {
    --g-screen: #262626;
    --g-card: #2f2f2f;
    --g-card-2: #343434;
    --g-pill: #333333;
    --g-pill-on: #dcdcdc;
    --g-pill-on-text: #1a1a1a;
    --g-line: #3a3a3a;

    --g-text: #ececec;
    --g-muted: #8c8c8c;
    --g-faint: #5a5a5a;

    --g-accent: #d4f75c;
    --g-accent-ink: #1a1f05;
    --g-accent-text: #d4f75c;
    --g-chart: #d4f75c;
    --g-sky: #8ecdf5;
    --g-indigo: #6d70f5;
    --g-green: #5fa56f;
    --g-coral: #ff7474;
    --g-orange: #ffab4a;
    --g-violet: #b47bf0;
    --g-gold: #e8bb52;
    --g-violet: #c084fc;
    --g-gray: #5c5c5c;

    --g-up: #6fd08c;
    --g-down: #ff7474;

    --g-shadow: none;
    --g-shadow-sm: none;
}

/* ---------- پایه ---------- */
body.gt {
    background: var(--g-screen);
    color: var(--g-text);
    font-family: 'Inter', Vazirmatn, system-ui, sans-serif;
    padding-bottom: calc(var(--g-nav-h) + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
}

body.gt .gt-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 12px 16px 24px;
}

.gt-num {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--g-font-num), Vazirmatn, sans-serif;
    font-variant-numeric: proportional-nums;
    letter-spacing: -.02em;
}

.gt-muted { color: var(--g-muted); }
.gt-faint { color: var(--g-faint); }

/* ---------- هدر صفحه ---------- */
.gt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px 14px;
}

.gt-head .gt-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.gt-head .gt-sub {
    font-size: 11.5px;
    color: var(--g-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gt-page-title {
    font-size: 17px;
    font-weight: 700;
}

.gt-iconbtn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--g-muted);
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s;
}

.gt-iconbtn:hover { background: var(--g-pill); color: var(--g-text); }
.gt-iconbtn:active { transform: scale(.92); }
.gt-iconbtn svg { width: 22px; height: 22px; }

/* ---------- کارت عمومی ---------- */
.gt-card {
    background: var(--g-card);
    border-radius: var(--g-r-lg);
    box-shadow: var(--g-shadow);
    padding: 16px 18px;
}

.gt-card-sm { border-radius: var(--g-r-md); padding: 13px 14px; }

/* ---------- کپسول‌ها ---------- */
.gt-seg {
    display: inline-flex;
    background: var(--g-pill);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.gt-seg button {
    border: 0;
    background: transparent;
    color: var(--g-muted);
    font: 600 12.5px Vazirmatn, sans-serif;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s;
}

.gt-seg button.on {
    background: var(--g-pill-on);
    color: var(--g-pill-on-text);
}

.gt-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--g-card);
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font: 600 13.5px Vazirmatn, sans-serif;
    color: var(--g-text);
    box-shadow: var(--g-shadow-sm);
    cursor: pointer;
    white-space: nowrap;
}

.gt-select svg { width: 14px; height: 14px; color: var(--g-muted); }

.gt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

.gt-badge {
    background: var(--g-accent);
    color: var(--g-accent-ink);
    font-weight: 800;
    font-size: 12.5px;
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap;
}

.gt-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.gt-chip.up { color: var(--g-up); background: color-mix(in srgb, var(--g-up) 15%, transparent); }
.gt-chip.dn { color: var(--g-down); background: color-mix(in srgb, var(--g-down) 15%, transparent); }
.gt-chip.flat { color: var(--g-muted); background: var(--g-pill); }

.gt-btn {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 14px;
    font: 800 14px Vazirmatn, sans-serif;
    cursor: pointer;
    transition: transform .1s, filter .15s;
}

.gt-btn:active { transform: scale(.98); }
.gt-btn-primary { background: var(--g-accent); color: var(--g-accent-ink); }
.gt-btn-ghost { background: var(--g-pill); color: var(--g-text); }

/* ---------- کارت قیمت ---------- */
#dashboardGrid {
    display: grid;
    /* موبایل: همیشه دقیقاً دو ستون، حتی در عرض‌های خیلی کم (minmax(0,1fr) از سرریز جلوگیری می‌کند) */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 361px) {
    body.gt .gt-wrap { padding-inline: 10px; }
    #dashboardGrid { gap: 8px; }
    .gt-pcard { min-height: 168px; padding: 12px 12px 10px; }
    .gt-pcard .pc-price { font-size: 26px; }
    .gt-pcard .pc-top { font-size: 11px; }
    .gt-pcard .pc-icon { width: 22px; height: 22px; }
}

.gt-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 186px;
    background: var(--g-card);
    border-radius: var(--g-r-md);
    box-shadow: var(--g-shadow);
    padding: 14px 14px 12px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    transition: transform .12s ease, box-shadow .2s ease;
    overflow: hidden;
}

.gt-pcard:active { transform: scale(.98); }

.gt-pcard .pc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--g-muted);
}

.gt-pcard .pc-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--g-pill);
    flex: none;
}

.gt-pcard .pc-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gt-pcard .pc-price {
    margin-top: 12px;
    font-size: 32px;
    font-weight: 400;       /* Inter Regular — برای ارقام لاتین */
    letter-spacing: -.035em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    direction: ltr;          /* عدد همیشه سمت چپ کارت */
    text-align: left;
}

/* ارقام فارسی (وزیرمتن) همان وزن و فاصلهٔ قبلی را نگه می‌دارند؛
   وزن ۴۰۰ فقط برای ارقام لاتین Inter است */
html[lang="fa"] .gt-pcard .pc-price {
    font-weight: 800;
    letter-spacing: -.03em;
}

.gt-pcard .pc-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--g-muted);
    letter-spacing: 0;
    direction: rtl;
}

.gt-pcard .pc-bottom {
    margin-top: 10px;
    display: flex;
    direction: ltr;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.gt-pcard .pc-spark { flex: 1; min-width: 0; height: 34px; }

.gt-pcard .pc-remove {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--g-pill);
    color: var(--g-muted);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
    cursor: pointer;
    z-index: 3;
}

.gt-pcard .pc-remove svg { width: 14px; height: 14px; }
.gt-pcard.edit-mode .pc-remove { opacity: 1; transform: scale(1); }
.gt-pcard.edit-mode { box-shadow: 0 0 0 2px var(--g-accent); }
@media (hover: hover) { .gt-pcard:hover .pc-remove { opacity: 1; transform: scale(1); } }

.gt-pcard.card-dragging {
    z-index: 60;
    transition: none !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    opacity: .96;
}

.gt-pcard.card-drag-armed { scale: 1.04; transition: scale .15s ease; }
body.cards-dragging { user-select: none; -webkit-user-select: none; }

@keyframes gt-flash-up { 0% { background: color-mix(in srgb, var(--g-up) 22%, transparent); } 100% { background: transparent; } }
@keyframes gt-flash-dn { 0% { background: color-mix(in srgb, var(--g-down) 22%, transparent); } 100% { background: transparent; } }
.gt-pcard .pc-price.flash-up { animation: gt-flash-up .9s ease-out; border-radius: 8px; }
.gt-pcard .pc-price.flash-dn { animation: gt-flash-dn .9s ease-out; border-radius: 8px; }

/* ---------- فهرست ---------- */
.gt-list .gt-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid var(--g-line);
    cursor: pointer;
}

.gt-list .gt-item:first-child { border-top: 0; }
.gt-list .gt-item img { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--g-pill); }
.gt-list .gt-item .mid { flex: 1; min-width: 0; }
.gt-list .gt-item .mid b { display: block; font-size: 14px; font-weight: 700; }
.gt-list .gt-item .mid span { font-size: 11px; color: var(--g-muted); }
.gt-list .gt-item .end { text-align: left; }
.gt-list .gt-item .end b { display: block; font-size: 14px; font-weight: 700; }

/* ---------- نوار پایین ---------- */
.gt-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;            /* بالاتر از صفحه‌های تمام‌صفحه (gt-page) */
    height: calc(var(--g-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--g-screen) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--g-line);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.gt-nav button {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--g-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
    cursor: pointer;
    transition: color .15s;
}

.gt-nav button svg { width: 25px; height: 25px; stroke-width: 1.7; }
.gt-nav button.on { color: var(--g-text); }

.gt-nav button .nav-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
    transition: background .2s;
}

.gt-nav button.on .nav-dot { background: var(--g-accent); }

/* ---------- پنل پایین‌رو ---------- */
.gt-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-end;
    animation: gt-fade .18s ease-out;
}

.gt-sheet {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: var(--g-screen);
    border-radius: 30px 30px 0 0;
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
    max-height: 88vh;
    overflow-y: auto;
    animation: gt-up .24s cubic-bezier(.2, .9, .3, 1);
}

.gt-sheet .grab {
    width: 42px;
    height: 4px;
    border-radius: 4px;
    background: var(--g-faint);
    margin: 0 auto 14px;
}

.gt-sheet h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

@keyframes gt-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes gt-up { from { transform: translateY(22px); opacity: .6 } to { transform: none; opacity: 1 } }

/* ---------- صفحه کامل (ابزارها، نمودار و ...) ---------- */
.gt-page {
    position: fixed;
    inset: 0;
    z-index: 50;
    padding-bottom: calc(var(--g-nav-h) + env(safe-area-inset-bottom));
    background: var(--g-screen);
    overflow-y: auto;
    padding-bottom: calc(var(--g-nav-h) + 20px);
    animation: gt-fade .18s ease-out;
}

.gt-page .gt-wrap { padding-top: calc(10px + env(safe-area-inset-top)); }

/* ---------- اسکلت بارگذاری ---------- */
.gt-skel {
    background: linear-gradient(90deg, var(--g-pill) 25%, var(--g-card-2) 37%, var(--g-pill) 63%);
    background-size: 400% 100%;
    animation: gt-shimmer 1.3s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes gt-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* ---------- کمکی‌ها ---------- */
.gt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gt-stack { display: flex; flex-direction: column; gap: 3px; }
.gt-hidden { display: none !important; }
.gt-scroll-x { overflow-x: auto; scrollbar-width: none; }
.gt-scroll-x::-webkit-scrollbar { display: none; }

/* ==========================================================================
   صفحه دارایی‌ها (v3)
   ========================================================================== */

.gt-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* فاصلهٔ بیشتر تا درصدهای دو ستون به هم نچسبند */
    gap: 26px;
    margin-top: 18px;
}

.gt-chart-col { min-width: 0; }

.gt-chart-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.gt-donut, .gt-pie {
    width: 100%;
    max-width: 150px;
    display: block;
    margin: 0 auto;
    overflow: visible;
}

.gt-pie { margin-top: 6px; }

.gt-legend {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-inline: 2px;
    font-size: 12.5px;
}

.gt-legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--g-muted);
    min-width: 0;
}

.gt-legend-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gt-legend-row b { color: var(--g-text); font-weight: 700; }

.gt-trend-box {
    position: relative;
    height: 170px;
    margin-top: 10px;
}

.gt-trend-box canvas { width: 100% !important; height: 100% !important; }

.gt-empty {
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--g-muted);
    font-size: 12.5px;
    line-height: 1.9;
    padding: 18px;
    min-height: 90px;
}

/* پنل مدیریت سبد */
.gt-pf {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--g-card);
    border: 2px solid transparent;
    border-radius: 18px;
    padding: 11px 14px;
    margin-bottom: 8px;
    text-align: right;
    font-family: inherit;
    color: var(--g-text);
    cursor: pointer;
}

.gt-pf.on { border-color: var(--g-accent); }
.gt-pf .mid { flex: 1; min-width: 0; }
.gt-pf .mid b { display: block; font-size: 14px; font-weight: 700; }
.gt-pf .mid span { font-size: 11px; color: var(--g-muted); }

.gt-pf-new {
    justify-content: center;
    background: transparent;
    border: 2px dashed var(--g-line);
    color: var(--g-muted);
    font-size: 13px;
    font-weight: 600;
}

.gt-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0 4px;
}

.gt-act {
    background: var(--g-card);
    border: 0;
    border-radius: 18px;
    padding: 12px 4px;
    font: 600 11px Vazirmatn, sans-serif;
    color: var(--g-muted);
    cursor: pointer;
    transition: transform .1s;
}

.gt-act:active { transform: scale(.96); }
.gt-act svg { width: 22px; height: 22px; display: block; margin: 0 auto 6px; color: var(--g-text); }

/* فهرست تراکنش‌ها */
.gt-txlist { display: grid; gap: 8px; }

.gt-tx {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--g-card);
    border-radius: 18px;
    padding: 10px 12px;
}

.gt-tx img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.gt-tx .mid { flex: 1; min-width: 0; }
.gt-tx .mid b { display: block; font-size: 13.5px; font-weight: 700; }
.gt-tx .mid span { font-size: 11px; color: var(--g-muted); }
.gt-tx .end { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gt-tx-actions { display: flex; gap: 2px; }
.gt-tx-actions .gt-iconbtn { width: 30px; height: 30px; }
.gt-tx-actions .gt-iconbtn svg { width: 17px; height: 17px; }

/* ==========================================================================
   صفحه ابزارها (v3)
   ========================================================================== */

.gt-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (min-width: 560px) { .gt-tools { grid-template-columns: repeat(3, 1fr); } }

.gt-tool {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 112px;
    text-align: right;
    background: var(--g-card);
    border: 0;
    border-radius: var(--g-r-md);
    box-shadow: var(--g-shadow);
    padding: 14px;
    font-family: inherit;
    color: var(--g-text);
    cursor: pointer;
    transition: transform .12s ease;
}

.gt-tool:active { transform: scale(.97); }

.gt-tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #1a1a1a;
}

.gt-tool-icon svg { width: 21px; height: 21px; }
.gt-tool-txt b { display: block; font-size: 13.5px; font-weight: 700; }
.gt-tool-txt span { font-size: 10.5px; color: var(--g-muted); }

/* ==========================================================================
   لایه سازگاری: صفحه‌هایی که هنوز با کلاس‌های Tailwind نسخه قبل ساخته شده‌اند
   (ابزارها، تنظیمات، فرم تراکنش و ...) رنگ‌هایشان به توکن‌های v3 نگاشت می‌شود
   ========================================================================== */

.gt .bg-white, .dark .gt .dark\:bg-gray-800 { background-color: var(--g-card); }
.gt .bg-gray-50, .dark .gt .dark\:bg-gray-700\/50 { background-color: var(--g-card-2); }
.gt .bg-gray-100, .gt .bg-gray-200, .dark .gt .dark\:bg-gray-700 { background-color: var(--g-pill); }
.dark .gt .dark\:bg-gray-900 { background-color: var(--g-screen); }
.gt .bg-gray-50\/50 { background-color: transparent; }

.gt .text-gray-900, .gt .text-gray-800, .gt .text-gray-700,
.dark .gt .dark\:text-white, .dark .gt .dark\:text-gray-100, .dark .gt .dark\:text-gray-200 { color: var(--g-text); }
.gt .text-gray-600, .gt .text-gray-500, .gt .text-gray-400,
.dark .gt .dark\:text-gray-300, .dark .gt .dark\:text-gray-400, .dark .gt .dark\:text-gray-500 { color: var(--g-muted); }

.gt .border-gray-100, .gt .border-gray-200, .gt .border-b, .gt .border-t,
.dark .gt .dark\:border-gray-600, .dark .gt .dark\:border-gray-700 { border-color: var(--g-line); }

.gt .rounded-2xl, .gt .rounded-3xl { border-radius: var(--g-r-md); }
.gt .shadow-lg, .gt .shadow-xl, .gt .shadow-2xl { box-shadow: var(--g-shadow); }

/* دکمه‌های اصلی آبی نسخه قبل → رنگ تأکید v3 */
.gt .bg-blue-600, .gt .bg-blue-500 { background-color: var(--g-accent); color: var(--g-accent-ink); }
.gt .bg-blue-600:hover, .gt .bg-blue-700, .gt .hover\:bg-blue-700:hover { background-color: var(--g-accent); filter: brightness(.95); }
.gt .text-blue-600, .gt .text-blue-500, .dark .gt .dark\:text-blue-400 { color: var(--g-sky); }
.gt .bg-blue-50, .dark .gt .dark\:bg-blue-900\/20, .dark .gt .dark\:bg-blue-900\/30 { background-color: color-mix(in srgb, var(--g-sky) 14%, transparent); }

.gt .text-green-600, .dark .gt .dark\:text-green-400 { color: var(--g-up); }
.gt .text-red-600, .dark .gt .dark\:text-red-400 { color: var(--g-down); }
.gt .bg-green-50, .dark .gt .dark\:bg-green-900\/20 { background-color: color-mix(in srgb, var(--g-up) 14%, transparent); }
.gt .bg-red-50, .dark .gt .dark\:bg-red-900\/20 { background-color: color-mix(in srgb, var(--g-down) 14%, transparent); }

/* ورودی‌ها */
.gt input, .gt select, .gt textarea { font-family: inherit; color: var(--g-text); }
.gt input::placeholder, .gt textarea::placeholder { color: var(--g-faint); }

/* ==========================================================================
   صفحه نمودار (v3)
   ========================================================================== */

.gt-chart-box { position: relative; height: 260px; }
.gt-chart-box canvas { width: 100% !important; height: 100% !important; }

.gt-chart-loader.hidden { display: none; }

.gt-chart-loader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--g-card) 70%, transparent);
    backdrop-filter: blur(2px);
    border-radius: var(--g-r-md);
}

.gt-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--g-line);
    border-top-color: var(--g-accent);
    animation: gt-spin .7s linear infinite;
}

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

.gt-seg-full { display: flex; width: 100%; }
.gt-seg-full button { flex: 1; padding: 7px 4px; font-size: 11.5px; }

.gt-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.gt-stat {
    background: var(--g-card);
    border-radius: var(--g-r-sm);
    padding: 10px 8px;
    text-align: center;
}

.gt-stat p { font-size: 10.5px; color: var(--g-muted); margin-bottom: 4px; }
.gt-stat b { font-size: 13.5px; font-weight: 700; }

/* بازنویسی دکمه‌های نسخه قبل (style.css) با ظاهر کپسولی v3 */
.gt .chart-filter-btn,
.gt .switcher-btn,
.gt .crypto-unit-btn,
.gt .card-style-btn {
    background: transparent !important;
    color: var(--g-muted) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    font-weight: 600;
    transition: background .18s, color .18s;
}

.gt .chart-filter-btn.on,
.gt .chart-filter-btn.active,
.gt .switcher-btn.active,
.gt .crypto-unit-btn.active,
.gt .card-style-btn.active,
.gt .theme-btn.on,
.gt .lang-btn.on {
    background: var(--g-pill-on) !important;
    color: var(--g-pill-on-text) !important;
}

.gt .switcher-container,
.gt #cryptoUnitSwitcher {
    background: var(--g-pill);
    border-radius: 999px;
    padding: 4px;
    display: inline-flex;
    gap: 2px;
    border: 0;
}

/* ==========================================================================
   نقشه بازار (v3)
   ========================================================================== */

.gt-heatgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 6px;
}

@media (min-width: 560px) { .gt-heatgrid { grid-template-columns: repeat(6, 1fr); } }

.gt-heat {
    position: relative;
    min-height: 64px;
    border-radius: 14px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: transform .12s ease, filter .15s ease;
}

.gt-heat { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.gt-heat:active { transform: scale(.97); }

.gt-heat-lg {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 134px;
    border-radius: 20px;
}

.gt-heat-name { font-size: 9px; font-weight: 700; line-height: 1.3; opacity: .92; }
.gt-heat-lg .gt-heat-name { font-size: 13px; }
.gt-heat-pct { font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, .18); padding: 1px 6px; border-radius: 999px; }
.gt-heat-lg .gt-heat-pct { font-size: 13px; padding: 2px 9px; }
.gt-heat-price { font-size: 11px; font-weight: 700; opacity: .9; }

/* رنگ‌های باقی‌مانده نسخه قبل در صفحه‌های ابزار → توکن‌های v3 */
.gt .bg-indigo-50, .dark .gt .dark\:bg-indigo-900\/30 { background-color: color-mix(in srgb, var(--g-sky) 12%, transparent); }
.gt .border-indigo-100, .dark .gt .dark\:border-indigo-800 { border-color: color-mix(in srgb, var(--g-sky) 35%, transparent); }
.gt .text-indigo-700, .dark .gt .dark\:text-indigo-300 { color: var(--g-sky); }
.gt .bg-pink-50, .dark .gt .dark\:bg-pink-900\/20 { background-color: color-mix(in srgb, var(--g-coral) 12%, transparent); }
.gt .text-pink-600, .dark .gt .dark\:text-pink-400 { color: var(--g-coral); }
.gt .bg-amber-100, .dark .gt .dark\:bg-amber-900\/30 { background-color: color-mix(in srgb, var(--g-orange) 16%, transparent); }
.gt .text-amber-700, .dark .gt .dark\:text-amber-300 { color: var(--g-orange); }

/* ورودی‌ها و سلکت‌های صفحه‌های ابزار */
.gt input[type="text"], .gt input[type="number"], .gt select, .gt textarea {
    background-color: var(--g-card-2) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 14px;
    outline: none;
}

.dark .gt input[type="text"], .dark .gt input[type="number"], .dark .gt select, .dark .gt textarea {
    background-color: var(--g-pill) !important;
}

.gt input:focus, .gt select:focus, .gt textarea:focus {
    border-color: color-mix(in srgb, var(--g-accent) 70%, var(--g-line)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 22%, transparent);
}

/* جعبه «قیمت کل» در فرم تراکنش */
.gt-total-box {
    background: color-mix(in srgb, var(--g-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--g-accent) 45%, transparent);
    border-radius: 16px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.gt-total-box > span { font-size: 10.5px; color: var(--g-muted); }
.gt-total-box div { display: flex; align-items: baseline; gap: 4px; }
.gt-total-box b { font-size: 18px; font-weight: 800; }
.gt-total-box div span { font-size: 10px; color: var(--g-muted); }

/* پنل فرم تراکنش هنگام بسته بودن نباید نمایش داده شود */
#add-tx-modal-container.hidden { display: none !important; }

/* دکمه خرید/فروش در فرم تراکنش */
.gt .tx-type-btn.on[data-type="buy"] { background: color-mix(in srgb, var(--g-up) 85%, black 0%) !important; color: #fff !important; }
.gt .tx-type-btn.on[data-type="sell"] { background: var(--g-down) !important; color: #fff !important; }

/* ==========================================================================
   فرم تراکنش: فیلد تعداد با دکمه + و −
   ========================================================================== */

.gt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.gt input.gt-num.gt-stepper-in,
.dark .gt input.gt-num.gt-stepper-in,
.gt .gt-stepper input,
.dark .gt .gt-stepper input {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.gt-stepper {
    direction: ltr;
    display: flex;
    align-items: center;
    background: var(--g-card-2);
    border: 1px solid var(--g-line);
    border-radius: 14px;
    overflow: hidden;
}

.dark .gt-stepper { background: var(--g-pill); }

.gt-stepper input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 2px;
    outline: none;
}

.gt-stepper input:focus { box-shadow: none !important; }

.gt-step-btn {
    width: 38px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--g-text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.gt-step-btn:hover { background: var(--g-pill); }
.gt-step-btn:active { background: color-mix(in srgb, var(--g-accent) 30%, transparent); }

.gt-input {
    width: 100%;
    padding: 11px 12px;
    border-radius: 14px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}

/* ==========================================================================
   تنظیم نمایش در دسکتاپ
   ========================================================================== */

@media (min-width: 900px) {
    body.gt .gt-wrap { max-width: 900px; padding: 18px 24px 28px; }
    /* صفحه‌های محتوایی (دارایی‌ها، ابزارها، نمودار) باریک‌تر و خواناتر */
    .gt-page .gt-wrap { max-width: 760px; }

    .gt-head { padding: 10px 4px 18px; }
    .gt-head .gt-title { font-size: 22px; }
    .gt-page-title { font-size: 19px; }

    /* دسکتاپ و تبلت: تعداد ستون‌ها بر اساس عرض، هر کارت دست‌کم ۱۶۰ پیکسل */
    #dashboardGrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .gt-pcard { min-height: 200px; padding: 16px 18px 14px; }
    .gt-pcard .pc-price { font-size: 36px; }
    .gt-pcard .pc-top { font-size: 13px; }

    /* نوار پایین به شکل نوار شناور وسط‌چین */
    .gt-nav {
        inset: auto 0 18px 0;
        width: min(520px, 90%);
        margin: 0 auto;
        height: 68px;
        border: 1px solid var(--g-line);
        border-radius: 999px;
        box-shadow: var(--g-shadow);
        background: color-mix(in srgb, var(--g-card) 92%, transparent);
    }

    body.gt { padding-bottom: 110px; }
    .gt-page { padding-bottom: 110px; }

    .gt-charts { gap: 40px; }
    .gt-donut, .gt-pie { max-width: 180px; }
    .gt-trend-box { height: 240px; }
    .gt-chart-box { height: 340px; }
    .gt-tools { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .gt-tool { min-height: 130px; padding: 18px; }
    .gt-heatgrid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
    .gt-sheet { border-radius: 26px; margin-bottom: 96px; max-width: 520px; }
    .gt-sheet-backdrop { align-items: center; }
}

@media (min-width: 1200px) {
    body.gt #dashboardView .gt-wrap { max-width: 1120px; }
}

/* دکمه‌های ویرایش/حذف تراکنش در صفحه نمودار */
.gt-tx-right { display: flex; align-items: center; gap: 4px; }
.gt-tx-right .gt-tx-actions .gt-iconbtn { width: 30px; height: 30px; }
.gt-tx-right .gt-tx-actions .gt-iconbtn svg { width: 16px; height: 16px; }

/* ==========================================================================
   ماشین حساب طلا (v3.0.3)
   ========================================================================== */

.gt-calc-card { padding: 18px 16px; }

.gt-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--g-muted);
    margin: 0 0 7px;
    letter-spacing: -.01em;
}

.gt-calc-card .gt-input,
.gt-calc-price {
    background: var(--g-card-2);
    border: 1px solid var(--g-line);
    color: var(--g-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.dark .gt-calc-card .gt-input { background: var(--g-pill); }

.gt-calc-card .gt-input:focus {
    border-color: color-mix(in srgb, var(--g-accent) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-accent) 18%, transparent);
}

.gt-calc-price { font-size: 20px; padding: 14px 12px; letter-spacing: -.02em; }

.gt-calc-rows {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--g-line);
    display: grid;
    gap: 10px;
}

.gt-calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.gt-calc-row-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--g-muted);
    min-width: 0;
}

.gt-calc-row .gt-stepper { flex: 0 0 auto; width: 132px; }

.gt-stepper-sm .gt-step-btn { width: 34px; height: 38px; font-size: 17px; }
.gt-stepper-sm input { font-size: 14px; padding: 9px 0; min-width: 0; width: 100%; }

.gt-calc-result { padding: 16px; margin-top: 14px; display: grid; gap: 11px; }

.gt-res-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
}

.gt-res-row > span:first-child { color: var(--g-muted); }
.gt-res-row > span:last-child { font-weight: 600; color: var(--g-text); }

.gt-res-sub {
    font-size: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--g-line);
}

.gt-res-sub > span { color: var(--g-muted) !important; font-weight: 500 !important; }

.gt-res-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 2px;
}

.gt-res-total > span:first-child { font-size: 14px; font-weight: 700; color: var(--g-text); }

.gt-res-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--g-accent-text);
}

.gt-res-amount b {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.gt-res-amount i { font-style: normal; font-size: 12px; font-weight: 600; opacity: .8; }

/* ==========================================================================
   مبدل ارز (v3.0.3)
   ========================================================================== */

.gt-conv {
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 24px;
    box-shadow: var(--g-shadow);
    overflow: hidden;
}

.gt-conv-side { padding: 18px 18px 20px; }

.gt-conv-out { background: color-mix(in srgb, var(--g-accent) 13%, var(--g-card)); }
.dark .gt-conv-out { background: color-mix(in srgb, var(--g-accent) 8%, var(--g-card)); }

.gt-conv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.gt-conv-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--g-muted);
    letter-spacing: .01em;
}

.gt-conv-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    background: var(--g-pill);
    border: 1px solid var(--g-line);
    border-radius: 999px;
    max-width: 62%;
    transition: border-color .15s;
}

.gt-conv-picker:focus-within { border-color: color-mix(in srgb, var(--g-accent) 60%, transparent); }

.gt-conv-picker img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex: 0 0 auto;
}

.gt-conv-picker select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--g-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    min-width: 0;
    flex: 1;
    padding: 0 2px;
    text-overflow: ellipsis;
}

.gt-conv-caret { width: 14px; height: 14px; color: var(--g-muted); flex: 0 0 auto; pointer-events: none; }

.gt input.gt-conv-amount,
.dark .gt input.gt-conv-amount,
.gt .gt-conv-picker select,
.dark .gt .gt-conv-picker select {
    background-color: transparent !important;
    border: 0 !important;
}

.gt input.gt-conv-amount:focus,
.gt .gt-conv-picker select:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

.gt-conv-amount {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    direction: ltr;
    text-align: left;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -.035em;
    color: var(--g-text);
    padding: 0;
    line-height: 1.15;
    min-height: 40px;
}

.gt-conv-out .gt-conv-amount { color: var(--g-accent-text); }

html[lang="fa"] .gt-conv-amount { font-weight: 700; letter-spacing: -.02em; }

.gt-conv-mid {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
}

.gt-conv-line { flex: 1; height: 1px; background: var(--g-line); }

.gt-conv-swap {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--g-line);
    border-radius: 50%;
    background: var(--g-card);
    color: var(--g-text);
    cursor: pointer;
    transition: transform .25s ease, background .15s;
}

.gt-conv-swap svg { width: 19px; height: 19px; }
.gt-conv-swap:hover { background: var(--g-pill); }
.gt-conv-swap:active { transform: rotate(180deg); }

.gt-conv-rate {
    text-align: center;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--g-muted);
}

.gt-conv-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.gt-conv-chip {
    font-size: 12px;
    padding: 7px 14px;
    background: var(--g-pill);
    color: var(--g-muted);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
}

.gt-conv-chip:hover { color: var(--g-text); }

.gt-conv-chip.on {
    background: color-mix(in srgb, var(--g-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--g-accent) 40%, transparent);
    color: var(--g-accent-text);
}

@media (min-width: 900px) {
    .gt-conv-side { padding: 22px 24px 24px; }
    .gt-conv-amount { font-size: 40px; min-height: 46px; }
    .gt-conv-mid { padding: 0 24px; }
    .gt-calc-card { padding: 22px 20px; }
    .gt-calc-price { font-size: 22px; }
}

/* دکمه‌های نرم (پشتیبان‌گیری و …) */
.gt-softbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 14px;
    border: 1px solid var(--g-line);
    background: var(--g-card-2);
    color: var(--g-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.dark .gt-softbtn { background: var(--g-pill); }
.gt-softbtn svg { width: 17px; height: 17px; color: var(--g-muted); }
.gt-softbtn:hover { border-color: color-mix(in srgb, var(--g-accent) 55%, var(--g-line)); }
.gt-softbtn:hover svg { color: var(--g-accent-text); }

.gt-softbtn-danger { color: var(--g-down); }
.gt-softbtn-danger svg { color: var(--g-down); }
.gt-softbtn-danger:hover { border-color: color-mix(in srgb, var(--g-down) 55%, var(--g-line)); }
.gt-softbtn-danger:hover svg { color: var(--g-down); }

/* ==========================================================================
   ابزار بیشترین و کمترین بازدهی (v3.0.4)
   ========================================================================== */

.gt-rank-controls { display: grid; gap: 10px; }

.gt-seg-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
}

.gt-seg-scroll::-webkit-scrollbar { display: none; }
.gt-seg-scroll button { flex: 0 0 auto; white-space: nowrap; }

.gt-rank-range {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--g-muted);
}

.gt-rank-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.gt-rank-top:has(.gt-rank-hero:only-child) { grid-template-columns: 1fr; }

.gt-rank-hero {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--g-line);
    background: var(--g-card);
    min-width: 0;
}

.gt-rank-hero.best { background: color-mix(in srgb, var(--g-up) 12%, var(--g-card)); border-color: color-mix(in srgb, var(--g-up) 30%, var(--g-line)); }
.gt-rank-hero.worst { background: color-mix(in srgb, var(--g-down) 12%, var(--g-card)); border-color: color-mix(in srgb, var(--g-down) 30%, var(--g-line)); }

.gt-rank-hero-tag { font-size: 11px; font-weight: 700; color: var(--g-muted); }

.gt-rank-hero-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--g-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gt-rank-hero-pct { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.gt-rank-hero.best .gt-rank-hero-pct { color: var(--g-up); }
.gt-rank-hero.worst .gt-rank-hero-pct { color: var(--g-down); }

.gt-rank-list {
    margin-top: 14px;
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 20px;
    overflow: hidden;
}

.gt-rank-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 72px 68px;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--g-line);
}

.gt-rank-row:last-child { border-bottom: 0; }
.gt-rank-i { font-size: 12px; color: var(--g-faint); text-align: center; }

.gt-rank-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--g-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gt-rank-short {
    font-size: 10px;
    font-weight: 600;
    color: var(--g-faint);
    background: var(--g-pill);
    border-radius: 999px;
    padding: 1px 6px;
    flex: 0 0 auto;
}

.gt-rank-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--g-pill);
    overflow: hidden;
    direction: ltr;
}

.gt-rank-bar i { display: block; height: 100%; border-radius: 999px; }
.gt-rank-bar i.up { background: var(--g-up); }
.gt-rank-bar i.dn { background: var(--g-down); }

.gt-rank-pct { font-size: 13px; font-weight: 700; text-align: left; }
.gt-rank-pct.up { color: var(--g-up); }
.gt-rank-pct.dn { color: var(--g-down); }

.gt-rank-msg { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--g-muted); }

/* ==========================================================================
   ابزار محاسبه بر اساس عیار (v3.0.4)
   ========================================================================== */

.gt-hint { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.7; color: var(--g-faint); }

.gt-karat-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.gt-karat-chip {
    padding: 11px 4px;
    border-radius: 14px;
    border: 1px solid var(--g-line);
    background: var(--g-card-2);
    color: var(--g-muted);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}

.dark .gt-karat-chip { background: var(--g-pill); }
.gt-karat-chip:hover { color: var(--g-text); }

.gt-karat-chip.on {
    background: color-mix(in srgb, var(--g-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--g-accent) 50%, transparent);
    color: var(--g-accent-text);
}

.gt-karat-out { margin-top: 14px; padding: 18px 16px; display: grid; gap: 6px; }
.gt-karat-out-label { font-size: 12px; font-weight: 700; color: var(--g-muted); }
.gt-karat-out .gt-res-amount b { font-size: 30px; }

.gt-karat-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--g-line);
    font-size: 13px;
    color: var(--g-muted);
}

.gt-karat-total .gt-res-amount b { font-size: 16px; }

.gt-karat-formula {
    margin-top: 8px;
    font-size: 11px;
    color: var(--g-faint);
    direction: ltr;
    text-align: left;
}

.gt-karat-table-head { font-size: 12px; font-weight: 700; color: var(--g-muted); margin-bottom: 4px; }
.gt-res-row.on > span { color: var(--g-accent-text) !important; font-weight: 700 !important; }

@media (min-width: 900px) {
    .gt-karat-out .gt-res-amount b { font-size: 34px; }
    .gt-rank-row { grid-template-columns: 30px minmax(0, 1fr) 140px 80px; }
}

.gt-rank-row.suspect { opacity: .62; }
.gt-rank-short.suspect { color: var(--g-orange); background: color-mix(in srgb, var(--g-orange) 16%, transparent); }
.gt-rank-row.suspect .gt-rank-bar i { background: var(--g-faint) !important; opacity: .45; }

/* واترمارک درصد سود و زیان پشت نمودار (v3.0.5) */
.gt-chart-wm {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    user-select: none;
    direction: ltr;
    font-size: clamp(38px, 15vw, 82px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--g-faint);
    opacity: .13;
    transition: opacity .25s;
}

.gt-chart-wm.up { color: var(--g-up); opacity: .16; }
.gt-chart-wm.dn { color: var(--g-down); opacity: .16; }
.dark .gt-chart-wm.up, .dark .gt-chart-wm.dn { opacity: .19; }

.gt-chart-box canvas { position: relative; z-index: 1; }

/* هفت دکمهٔ بازه در صفحهٔ نمودار */
#chartFilters.gt-seg-full button { padding-inline: 4px; font-size: 11.5px; }

@media (min-width: 900px) {
    .gt-chart-wm { font-size: 104px; }
    #chartFilters.gt-seg-full button { font-size: 13px; padding-inline: 10px; }
}

/* انتخابگر واحد قیمت در فرم تراکنش و یادداشت زیر هر تراکنش (v3.1) */
.gt-cur-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.gt-cur-row.hidden { display: none; }
.gt-cur-row > span { font-size: 12px; font-weight: 600; color: var(--g-muted); }
.gt-cur-row .gt-seg { flex: 0 0 auto; }

.gt-tx-note {
    margin-top: 6px;
    font-size: 11px;
    color: var(--g-faint);
    line-height: 1.7;
}

/* خلاصهٔ حساب در پایین صفحهٔ دارایی‌ها */
.gt-breakdown { padding: 4px 16px; }

.gt-brk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--g-line);
    font-size: 13px;
}

.gt-brk-row:last-child { border-bottom: 0; }
.gt-brk-row > span { color: var(--g-muted); }
.gt-brk-row b { font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; color: var(--g-text); }

.gt-chart-wm.wide { font-size: clamp(26px, 10vw, 54px); }
@media (min-width: 900px) { .gt-chart-wm.wide { font-size: 68px; } }

/* لینک صفحه‌های قوانین، منابع و درباره ما در انتهای تنظیمات (v3.1.1) */
.gt-about {
    margin-top: 6px;
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 20px;
    overflow: hidden;
}

.gt-about-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--g-line);
    color: var(--g-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}

.gt-about-link:last-child { border-bottom: 0; }
.gt-about-link:hover { background: var(--g-pill); }
.gt-about-link > svg:first-child { width: 19px; height: 19px; color: var(--g-muted); flex: 0 0 auto; }
.gt-about-link span { flex: 1; min-width: 0; }
.gt-about-go { width: 16px; height: 16px; color: var(--g-faint); flex: 0 0 auto; }
html[lang="en"] .gt-about-go { transform: rotate(180deg); }


.gt-brk-row.strong > span { color: var(--g-text); font-weight: 700; }
.gt-brk-row.strong b { font-size: 14.5px; }
.gt-brk-row.divider { border-top: 1px solid var(--g-line); margin-top: -1px; }

/* ناحیهٔ قابل اسکرول داخل صفحه‌های تمام‌صفحه (مثل تنظیمات)
   نکته: از align-content استفاده نمی‌کنیم؛ روی گرید باعث می‌شد ردیف آخر
   کوتاه شود و کارت لینک‌ها با overflow:hidden بریده شود. */
body.gt .gt-scroll-y {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

/* کارت لینک‌ها به‌اندازهٔ محتوای خودش باشد، نه کشیده یا کوتاه */
.gt-about { flex: 0 0 auto; }

/* ==========================================================================
   راهنمای اولین اجرا (v3.1.6)
   ========================================================================== */
.gt-coach {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, .45);
    animation: gt-coach-in .22s ease-out;
}

@keyframes gt-coach-in { from { opacity: 0 } to { opacity: 1 } }

.gt-coach-ring {
    position: fixed;
    border-radius: 50%;
    border: 2px solid var(--g-accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--g-accent) 28%, transparent),
                0 0 0 9999px rgba(0, 0, 0, .0);
    animation: gt-coach-pulse 1.7s ease-out infinite;
    pointer-events: none;
}

@keyframes gt-coach-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g-accent) 45%, transparent); }
    70%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--g-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g-accent) 0%, transparent); }
}

.gt-coach-bubble {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(300px, calc(100vw - 40px));
    background: var(--g-card);
    border: 1px solid var(--g-line);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    text-align: center;
}

.gt-coach-bubble p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--g-text);
}

.gt-coach-ok {
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: var(--g-accent);
    color: var(--g-accent-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .gt-coach { animation: none; }
    .gt-coach-ring { animation: none; }
}