/* =========================
   CUSTOM FONT
========================= */
@font-face {
    font-family: "B Titr";
    src: url("/fonts/BTitrBold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Samim";
    src: url("/fonts/samim/Samim.eot") format("embedded-opentype"), url("/fonts/samim/Samim.ttf") format("truetype"), url("/fonts/samim/Samim.woff") format("woff");
}

@font-face {
    font-family: "Samim-Bold";
    src: url("/fonts/samim/Samim-Bold.eot") format("embedded-opentype"), url("/fonts/samim/Samim-Bold.ttf") format("truetype"), url("/fonts/samim/Samim-Bold.woff") format("woff");
}
/*
    ==========================================================================================================

*/

/* =========================
   ROOT VARIABLES - GOLDEN THEME
========================= */
:root {
    --primary: #eaad00; /* Gold (slightly darker for better contrast) */
    --primary-dark: #c99400; /* Darker Gold */
    --secondary: #343a40;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --light: #f8f9fa;
    --dark: #212529;
    --background: #ffffff;
    --text-color: #212529;
    --border-color: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.1);
}

/* =========================
   GLOBAL STYLES - REDUCED FONT SIZE
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    /*    height: 100vh;*/
    font-family: "Samim";
    font-size: 14px; /* Base reduced from 16px */
    background-color: var(--background);
    color: var(--text-color);
    direction: rtl;
    transition: background-color 0.3s, color 0.3s;
}

/*.no-scroll {
    overflow: hidden;
    height: 100vh;
}

.no-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    padding-block: 60px 30px;*/
    /*    margin-top: 60px;*/
    /*min-height: calc(100vh - 60px);
    overflow-y: auto;
    background-color: var(--background);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}*/

/*.inner-content {
    min-height: calc(100vh - 90px);
}
*/
/* =========================
   TOP NAVIGATION - GOLDEN
========================= */
/*.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--primary);
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    box-shadow: 0 2px 4px var(--shadow);
    z-index: 1000;
    direction: rtl;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    order: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    order: 2;
}

.brand {
    font-size: 1.3rem;*/ /* reduced from 1.5rem */
    /*font-weight: bold;
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.3rem;*/ /* reduced */
    /*cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.1rem;*/ /* reduced */
    /*cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
}

    .icon-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }*/

/* =========================
   SIDE MENU RTL - GOLDEN
========================= */
/*.side-menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 100vw;
    background: var(--background);
    padding-top: 5rem;
    transition: right 0.3s ease;
    z-index: 999;
    direction: rtl;
}

    .side-menu.open {
        right: 0;
    }

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.8rem;*/ /* reduced */
    /*background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
}

    .close-btn:hover {
        opacity: 0.8;
    }

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

    .menu-list li {
        padding: 0.8rem 2rem;*/ /* reduced vertical padding */
        /*border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu-list a {
        color: white;
        text-decoration: none;
        font-size: 1rem;*/ /* reduced from 1.2rem */
        /*display: block;
        transition: color 0.2s;
    }

        .menu-list a:hover {
            color: var(--info);
        }

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.menu-list li a {
    cursor: pointer;
    transition: background 0.2s;
    color: inherit;
    text-decoration: none;
    padding: 8px 16px;
    display: block;
    border-radius: 4px;
}

    .menu-list li a:hover {
        background: var(--primary);
        color: #205d78;
        text-decoration: underline;
    }*/

/* =========================
   DARK MODE
========================= */
/*.app.dark {
    --background: #1a1a1a;
    --text-color: #e0e0e0;
    --secondary: #2d3238;
    --border-color: #3a3a3a;
    --shadow: rgba(0, 0, 0, 0.3);
}

    .app.dark,
    .app.dark body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }

        .app.dark .content {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }

        .app.dark .card {
            background-color: #2d3238;
            border-color: #3a3a3a;
            color: #e0e0e0;
        }

        .app.dark input,
        .app.dark select,
        .app.dark textarea {
            background-color: #2d3238;
            color: #e0e0e0;
            border-color: #3a3a3a;
        }

        .app.dark .btn-secondary {
            background-color: #3a3a3a;
            color: #e0e0e0;
        }*/

/* =========================
   FORM CONTROLS
========================= */
input,
select,
textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem; /* slightly smaller */
    font-family: inherit;
    background-color: var(--background);
    color: var(--text-color);
    direction: rtl;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
    }

button {
    font-family: inherit;
}

.btn {
    padding: 0.4rem 0.8rem; /* reduced padding */
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
.btn-primary {
    width: 100%;
    padding: 12px 16px;

    font-size: 15px;
    font-weight: 600;

    color: #1f1f1f;
    background: linear-gradient(135deg, #ffc107, #ffca2c);

    border: none;
    border-radius: 10px;

    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.25);
}

/* hover */
.btn-primary:hover {
    background: linear-gradient(135deg, #ffca2c, #ffb300);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.35);
}

/* active */
.btn-primary:active {
    transform: translateY(0px);
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.25);
}

/* focus (accessibility) */
.btn-primary:focus {
    outline: none;
    box-shadow:
        0 0 0 4px rgba(255, 193, 7, 0.25),
        0 4px 12px rgba(255, 193, 7, 0.25);
}

.btn-primary:disabled {
    background: #e0e0e0;
    color: #9e9e9e;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-secondary {
    background-color: var(--secondary);
    color: white;
}

    .btn-secondary:hover {
        background-color: #5a6268;
    }

.btn-success {
    background-color: var(--success);
    color: white;
}

    .btn-success:hover {
        background-color: #157347;
    }

.btn-danger {
    background-color: var(--danger);
    color: white;
}

    .btn-danger:hover {
        background-color: #bb2d3b;
    }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* =========================
   CARDS
========================= */
.card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.2rem; /* reduced */
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px var(--shadow);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

@media (max-width: 768px) {
    .card {
        box-shadow: none !important;
        border: no
    }
}


.card-title {
    font-size: 1.3rem; /* reduced from 1.5rem */
    margin-bottom: 0.8rem;
    color: var(--text-color);
}

.card-body {
    color: var(--text-color);
}

/*.buy-page .card,
.sell-page .card,
.physical-delivery .card,
.error-landing .card {
    max-width: 420px;
    width: 100%;
    border-radius: 15px;
}*/

/* =========================
   UTILITIES (unchanged)
========================= */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.p-1 {
    padding: 0.5rem;
}

.p-2 {
    padding: 1rem;
}

.p-3 {
    padding: 1.5rem;
}

.p-4 {
    padding: 2rem;
}

/* =========================
   BLAZOR SPECIFIC
========================= */
#blazor-error-ui {
    background: var(--warning);
    bottom: 0;
    box-shadow: 0 -1px 5px var(--shadow);
    display: none;
    left: 0;
    padding: 0.6rem 1.5rem 0.7rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    direction: rtl;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        left: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    direction: rtl;
}

    .blazor-error-boundary::after {
        content: "حدث خطأ.";
    }

.loading-progress {
    position: relative;
    display: block;
    width: 7rem; /* reduced */
    height: 7rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--primary);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--light);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3rem) 0 auto 0.2rem;
    font-size: 0.9rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "در حال بارگذاری");
    }

/* =========================
   RESPONSIVE
========================= */
@media (min-width: 768px) {
    .side-menu {
        width: 300px;
    }

    .content {
        /*padding: 2rem;*/ /* slightly reduced */
    }
}

@media (max-width: 576px) {
    .brand {
        font-size: 1.1rem;
    }

/*    .content {
        padding: 0.8rem;
        padding-block-start: 3.5rem;
    }*/

    .card {
        padding: 0.8rem;
    }
}

/* =========================
   ANIMATIONS
========================= */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar {
    width: 8px; /* slightly thinner */
}

::-webkit-scrollbar-track {
    background: var(--light);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }

.app.dark ::-webkit-scrollbar-track {
    background: #2d3238;
}

.app.dark ::-webkit-scrollbar-thumb {
    background: #4a4a4a;
}

    .app.dark ::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }

/* =========================
   PROFILE PAGE STYLES - REDUCED FONTS
========================= */
/*.profile-container {
    max-width: 900px;
    margin: 0 auto;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.avatar-circle {
    width: 100px;*/ /* reduced from 120px */
    /*height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--shadow);
}

.avatar-icon {
    font-size: 3rem;*/ /* reduced from 4rem */
/*}

.btn-change-avatar {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

    .btn-change-avatar:hover {
        background: var(--primary);
        color: white;
    }

.profile-info {
    flex: 1;
}

    .profile-info h2 {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
        color: var(--text-color);
    }

.user-email {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.2rem;
}

.user-id {
    font-size: 0.8rem;
    color: #999;
}

.app.dark .user-email {
    color: #aaa;
}

.app.dark .user-id {
    color: #888;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.info-label {
    font-weight: bold;
    color: #666;
    font-size: 0.85rem;
}

.info-value {
    color: var(--text-color);
    font-size: 1rem;
}

.app.dark .info-label {
    color: #aaa;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.badge-success {
    background: #d4edda;
    color: #155724;
}

.app.dark .badge-success {
    background: #1e4620;
    color: #7fd687;
}

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.wallet-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem;
    background: linear-gradient( 135deg, rgba(255, 193, 7, 0.1), rgba(224, 168, 0, 0.1) );
    border-radius: 8px;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.wallet-icon {
    font-size: 2rem;
}

    .wallet-icon.gold {
        filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.5));
    }

.wallet-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wallet-label {
    font-size: 0.85rem;
    color: #666;
}

.wallet-amount {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-dark);
}

.app.dark .wallet-label {
    color: #aaa;
}

.app.dark .wallet-amount {
    color: var(--primary);
}

.wallet-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.security-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.security-label {
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.95rem;
}

.security-desc {
    font-size: 0.8rem;
    color: #666;
}

.app.dark .security-desc {
    color: #aaa;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background: var(--light);
    border-radius: 8px;
    transition: background 0.2s;
}

    .activity-item:hover {
        background: #e9ecef;
    }

.app.dark .activity-item {
    background: #2d3238;
}

    .app.dark .activity-item:hover {
        background: #3a3f47;
    }

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

    .activity-icon.buy {
        background: #d4edda;
    }

    .activity-icon.sell {
        background: #f8d7da;
    }

    .activity-icon.deposit {
        background: #d1ecf1;
    }

.app.dark .activity-icon.buy {
    background: #1e4620;
}

.app.dark .activity-icon.sell {
    background: #4a1f1f;
}

.app.dark .activity-icon.deposit {
    background: #1f3d47;
}

.activity-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.activity-title {
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.9rem;
}

.activity-date {
    font-size: 0.75rem;
    color: #666;
}

.app.dark .activity-date {
    color: #aaa;
}

.activity-amount {
    font-weight: bold;
    color: var(--primary-dark);
    white-space: nowrap;
    font-size: 0.9rem;
}

.app.dark .activity-amount {
    color: var(--primary);
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-info {
        text-align: center;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .wallet-grid {
        grid-template-columns: 1fr;
    }

    .wallet-actions {
        flex-direction: column;
    }

        .wallet-actions .btn {
            width: 100%;
        }

    .security-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

        .security-item .btn {
            width: 100%;
        }

    .activity-item {
        flex-wrap: wrap;
    }
}*/

/* =========================
   LOGIN PAGES - THIN & TALL CARD
========================= */
/*.login-container {*/
    /*    min-height: 100vh;*/
    /*display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-card {
    background: var(--background);
    border-radius: 1rem;
    padding: 2rem 1.5rem;*/ /* increased vertical padding for taller look */
    /*width: 100%;
    max-width: 300px;*/ /* thinner card */
    /*min-height: 380px;*/ /* ensures taller appearance */
    /*box-shadow: 0 10px 40px var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .login-card {
        box-shadow: none;
    }
}


.login-header {
    text-align: center;
    margin-bottom: 1.8rem;
}

    .login-header h1 {
        font-size: 1.5rem;
        color: var(--text-color);
        margin-bottom: 0.4rem;
    }

    .login-header p {
        font-size: 0.85rem;
        color: var(--text-secondary, #6c757d);
    }

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .input-group label {
        font-size: 0.85rem;
        color: var(--text-color);
        font-weight: 700;
    }

.input-field {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    color: #212121;
    background: #fffdf7;
    border: 1px solid #e0c56e;
    border-radius: 10px !important;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;*/

    /* حس لوکس مرتبط با طلا */
    /*box-shadow: 0 2px 8px rgba(255, 193, 7, 0.08);
}

.input-field::placeholder {
    color: #b08d2f;
    opacity: 0.7;
}

.input-field:hover {
    border-color: #ffca2c;
}

.input-field:focus {
    border-color: #ffc107;
    background: #fffefb;
    box-shadow:
        0 0 0 4px rgba(255, 193, 7, 0.18),
        0 4px 14px rgba(255, 193, 7, 0.15);
}*/

/* حالت غیرفعال */
/*.input-field:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    opacity: 0.8;
}

.otp-inputs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    direction: ltr;
}

.otp-input {
    width: 48px;
    height: 52px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #212121;
    background: #fffdf7;
    border: 1px solid #e0c56e;
    border-radius: 10px;
    outline: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.08);
}*/

    /* hover */
    /*.otp-input:hover {
        border-color: #ffca2c;
    }*/

    /* focus مثل input-field */
    /*.otp-input:focus {
        border-color: #ffc107;
        box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.18), 0 4px 14px rgba(255, 193, 7, 0.15);
        background: #fffefb;
        transform: translateY(-1px);
    }*/

    /* جلوگیری از ظاهر عجیب موبایل */
    /*.otp-input::selection {
        background: rgba(255, 193, 7, 0.3);
    }*/

    /* disable */
    /*.otp-input:disabled {
        background: #f5f5f5;
        color: #999;
        cursor: not-allowed;
    }*/

    /* حذف فلش‌های input number اگر بعداً type رو number کردی */
    /*.otp-input::-webkit-outer-spin-button,
    .otp-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
    padding: 0;
}

    .btn-link:hover {
        color: var(--primary-dark);
    }

.error-message {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
    padding: 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    text-align: center;
}

.resend-section {
    text-align: center;
}

.timer {
    font-size: 0.85rem;
    color: var(--text-secondary, #6c757d);
}

.login-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary, #6c757d);
}

    .login-footer a {
        color: var(--primary);
        text-decoration: none;
    }

        .login-footer a:hover {
            text-decoration: underline;
        }

.login-form .button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.submit-btn {
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}*/

/* افکت شاین خیلی نرم */
/*.submit-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: 0.5s;
}

.submit-btn:hover::after {
    left: 120%;
}*/
/* =========================
   BUY / SWAP PAGE - REDUCED FONTS
========================= */
/*.swap-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .swap-wrapper .form-control {
        position: relative;
        z-index: 1;
    }

    .swap-wrapper .top-input {
        margin-top: 0.25rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        font-size: 0.85rem;
    }

    .swap-wrapper .bottom-input {
        margin-top: 0.25rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        font-size: 0.85rem;
    }

.convert-btn {*/
    /*    position: absolute;*/
    /*    left: 50%;*/
    /*padding: 5px 8px;*/
    /*    transform: translateX(-50%);*/
    /*    bottom: 35%;*/

    /*margin-bottom: 0;
    z-index: 2;
    background-color: #0d6efd;
    border: none;
    color: #fff;
    width: fit-content;*/
    /*    width: 20px;*/
    /*    height: 20px;*/
    /*    border-radius: 50%;*/
    /*    font-size: 0.5rem;*/
    /*box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);*/
    /*    line-height: 1;*/
    /*transition: all 0.2s ease;
    cursor: pointer;
}

    .convert-btn:hover {
        background-color: #0b5ed7;*/
        /*        transform: translateX(-50%) scale(1.08);*/
    /*}*/

/* =========================
   DELIVERY PAGE STYLES
========================= */
/*.delivery-card {
    max-width: 500px;
    margin: 0 auto;
}

.delivery-balance,
.adjusted-balance {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 1rem;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    margin-bottom: 1.2rem;
    border-right: 3px solid var(--primary);
}

    .balance-label,
    .adjusted-balance span:first-child {
        font-weight: 600;
        color: var(--text-color);
        font-size: 0.9rem;
    }

.balance-value {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.adjusted-value {
    font-size: 1.1rem;
    color: var(--primary-dark);
}

.adjusted-balance {
    background: rgba(40, 167, 69, 0.1);
    border-right-color: var(--success);
    margin-top: 0.5rem;
}

.button-row {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.delivery-submit-btn {
    min-width: 150px;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    transition: all 0.2s;
}

    .delivery-submit-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px var(--shadow);
    }

    .delivery-submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }*/

/* Dark mode overrides */
/*.app.dark .delivery-balance {
    background: rgba(255, 193, 7, 0.2);
}

.app.dark .adjusted-balance {
    background: rgba(40, 167, 69, 0.2);
}

.app.dark .balance-value,
.app.dark .adjusted-value {
    color: var(--primary);
}*/

/* Responsive */
/*@media (max-width: 576px) {
    .delivery-card {
        max-width: 100%;
        margin: 0;
    }

    .delivery-balance,
    .adjusted-balance {
        flex-direction: column;
        gap: 0.3rem;
        align-items: flex-start;
    }

    .button-row {
        margin-top: 1rem;
    }

    .delivery-submit-btn {
        width: 100%;
    }
}*/


/* --- Basic Grid Styles --- */
.fancy-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    color: #1f2937; /* رنگ متن اصلی */
    background: #ffffff; /* رنگ پس‌زمینه کلی */
    border: 1px solid #d9dde3; /* حاشیه کلی */
    border-radius: 8px; /* گوشه‌های گرد */
    overflow: hidden; /* برای اینکه گوشه‌های گرد رعایت بشه */
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}


.app.dark .fancy-grid {
    color: #d1d1d1; /* پس‌زمینه سلول */
    border-color: #494949;
}

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

/* --- Header Styles --- */
.fancy-grid thead th {
    background: #f8f9fb; /* رنگ پس‌زمینه هدر */
    color: #374151; /* رنگ متن هدر */
    font-weight: 600;
    /* text-align: left; */
    padding: 10px 12px;
    border-bottom: 1px solid #d9dde3; /* خط جداکننده زیر هدر */
    border-right: 1px solid #d9dde3; /* خط جداکننده بین سلول‌های هدر */
    white-space: nowrap;
    position: sticky; /* برای هدر ثابت هنگام اسکرول */
    top: 0;
    z-index: 10; /* برای اینکه روی محتوا بیاد */
}

.app.dark .fancy-grid thead th {
    background: #3f3f3f;
    color: #aaaaaa; /* رنگ متن هدر */
    border-color: #494949;
}

/*.fancy-grid thead th:last-child {
  border-right: none;*/ /* حذف حاشیه راست آخرین سلول هدر */
/*}*/

/* --- Row Styles --- */
.fancy-grid tbody td {
    padding: 12px 12px; /* فاصله داخلی سلول */
    border-bottom: 1px solid #e5e7eb; /* خط جداکننده بین ردیف‌ها */
    border-right: 1px solid #e5e7eb; /* خط جداکننده بین سلول‌های ردیف */
    background: #ffffff; /* پس‌زمینه سلول */
    vertical-align: middle; /* هم‌ترازی عمودی */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* برای جلوگیری از شکستن متن */
}

.app.dark .fancy-grid tbody td {
    background: #1a1a1a; /* پس‌زمینه سلول */
    border-color: #3b3b3b;
}

/*.fancy-grid tbody td:last-child {
  border-right: none;*/ /* حذف حاشیه راست آخرین سلول ردیف */
/*}*/
/*.fancy-grid tbody tr:last-child td {
  border-bottom: none;*/ /* حذف خط جداکننده آخرین ردیف */
/*}*/
/* --- Hover & Selection Effects --- */
.fancy-grid tbody tr:hover td {
    background: #f3f6fa; /* رنگ پس‌زمینه هنگام هاور */
    cursor: pointer; /* نشانگر موس */
}

.app.dark .fancy-grid tbody tr:hover td {
    background: #292929; /* رنگ پس‌زمینه هنگام هاور */
}

.fancy-grid tbody tr.selected td {
    background: #dbeafe; /* رنگ پس‌زمینه ردیف انتخاب شده */
}

.fancy-grid tbody tr.selected:hover td {
    background: #cfe4ff; /* رنگ پس‌زمینه ردیف انتخاب شده هنگام هاور */
}

/* --- Focus Effect --- */
.fancy-grid tbody tr:focus-within td {
    box-shadow: inset 0 0 0 1px #3b82f6; /* نمایش فریم دور سلول فوکوس شده */
}

/* --- Sortable Header Indicators --- */
.fancy-grid thead th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* فضای اضافه برای آیکون */
}

    .fancy-grid thead th.sortable::after {
        content: "↕"; /* آیکون پیش‌فرض مرتب‌سازی */
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #6b7280; /* رنگ آیکون */
        opacity: 0.8;
    }

    .fancy-grid thead th.sortable.asc::after {
        content: "↑"; /* آیکون صعودی */
        color: #1f2937; /* رنگ پررنگ‌تر */
    }

    .fancy-grid thead th.sortable.desc::after {
        content: "↓"; /* آیکون نزولی */
        color: #1f2937; /* رنگ پررنگ‌تر */
    }

/* --- Utility Classes for Cells --- */

/* Text Alignment */
.fancy-grid .text-right {
    text-align: right;
}

.fancy-grid .text-center {
    text-align: center;
}

.fancy-grid .text-left {
    text-align: left;
}

/* Muted Text */
.fancy-grid .text-muted {
    color: #6b7280;
}

/* Numeric Cells */
.fancy-grid .is-numeric {
    font-variant-numeric: tabular-nums; /* برای هم‌ترازی اعداد */
    text-align: right;
}

/* Wrapping Text */
.fancy-grid .cell-wrap {
    white-space: normal;
    height: auto;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Input fields inside cells */
.fancy-grid .cell-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: #fdfdfd;
    outline: none;
    transition: border-color 0.2s ease;
}

    .fancy-grid .cell-input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    }

/* --- Badges/Tags --- */
.fancy-grid .cell-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px; /* کاملا گرد */
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

    .fancy-grid .cell-badge.primary {
        background: #e0e7ff;
        color: #4f46e5;
    }

    .fancy-grid .cell-badge.secondary {
        background: #f3f4f6;
        color: #6b7280;
    }

    .fancy-grid .cell-badge.success {
        background: #dcfce7;
        color: #10b981;
    }

    .fancy-grid .cell-badge.warning {
        background: #fef3c7;
        color: #d97706;
    }

    .fancy-grid .cell-badge.danger {
        background: #fee2e2;
        color: #e11d48;
    }

    .fancy-grid .cell-badge.muted {
        background: #f3f4f6;
        color: #6b7280;
    }

/* --- Optional: Dark Mode --- */
.fancy-grid.dark-mode {
    background: #1f2836;
    color: #e5e7eb;
    border: 1px solid #3a4556;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

    .fancy-grid.dark-mode thead th {
        background: #273244;
        color: #f3f4f6;
        border-bottom: 1px solid #3a4556;
        border-right: 1px solid #3a4556;
    }

    .fancy-grid.dark-mode tbody td {
        border-bottom: 1px solid #374151;
        border-right: 1px solid #374151;
        background: #1f2836;
    }

    .fancy-grid.dark-mode tbody tr:hover td {
        background: #2a3648;
    }

    .fancy-grid.dark-mode tbody tr.selected td {
        background: #1d4f91;
    }

    .fancy-grid.dark-mode tbody tr.selected:hover td {
        background: #2d64b3;
    }

    .fancy-grid.dark-mode thead th.sortable::after {
        color: #9ca3af;
    }

    .fancy-grid.dark-mode thead th.sortable.asc::after,
    .fancy-grid.dark-mode thead th.sortable.desc::after {
        color: #f3f4f6;
    }

/* --- Optional: Compact Mode --- */
.fancy-grid.compact {
    font-size: 13px;
}

    .fancy-grid.compact thead th,
    .fancy-grid.compact tbody td {
        padding: 8px 10px;
    }

    .fancy-grid.compact tbody tr:hover td {
        background: #383838;
        ;
    }

.app.dark .fancy-grid.compact tbody tr:hover td {
    background: #f0f3f7;
}

.fancy-grid.compact tbody tr.selected td {
    background: #dae9fd;
}

.fancy-grid.compact tbody tr.selected:hover td {
    background: #c5d9f3;
}

/* --- Optional: Scrollable Container --- */
.fancy-grid-scroll-container {
    width: 100%;
    overflow-x: auto; /* اسکرول افقی */
    max-height: 500px; /* یا هر ارتفاعی که می‌خوای */
    border: 1px solid #d9dde3; /* حاشیه برای کانتینر اسکرول */
    border-radius: 8px;
    margin-bottom: 16px; /* فاصله زیر گرید */
}

    /* Remove border from table if it's inside a scroll container that has one */
    .fancy-grid-scroll-container > .fancy-grid {
        border: none;
        border-radius: 0;
        margin-bottom: 0;
    }


/*=============Error Landidng============*/
/*=============Error Landidng============*/
/*=============Error Landidng============*/
/*=============Error Landidng============*/

.error-landing {
/*    min-height: 100vh;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: radial-gradient(circle at top, rgba(255, 193, 7, 0.14), transparent 45%), radial-gradient(circle at bottom, rgba(255, 193, 7, 0.06), transparent 55%), linear-gradient(180deg, #fffdf7 0%, #f8fafc 100%);
}

.error-landing__card {
    width: 100%;
    max-width: 720px;
    text-align: center;
    position: relative;
    padding: 32px 28px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 193, 7, 0.18);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(255, 193, 7, 0.08);
}

    .error-landing__card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), transparent 60%);
        pointer-events: none;
    }

.error-landing__icon-wrap {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.error-landing__icon {
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffc107, #ffb300);
    color: #1f1f1f;
    font-size: 2rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(255, 193, 7, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.error-landing__code {
    display: inline-flex;
    margin: 0 auto 18px;
    padding: 0;
    background: transparent;
    border: none;
    color: #0f172a;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(255, 193, 7, 0.25);
    position: relative;
}

.error-landing__title {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.25;
    color: #0f172a;
}

.error-landing__message {
    margin: 0 auto 22px;
    max-width: 58ch;
    font-size: 1.02rem;
    line-height: 1.9;
    color: #475569;
}

.error-landing__details {
    margin: 0 auto 26px;
    text-align: left;
    direction: ltr;
    padding: 16px 18px;
    border-radius: 14px;
    background: #0b1220;
    color: #e2e8f0;
    border: 1px solid rgba(255, 193, 7, 0.12);
    font-size: 0.9rem;
    line-height: 1.7;
    overflow: auto;
}

.error-landing__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.error-landing__extra {
    margin-top: 12px;
}

/* button harmony */
.submit-btn {
    min-width: 190px;
}

/* Responsive */
@media (max-width: 640px) {
    .error-landing {
        padding: 18px;
    }

    .error-landing__card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .error-landing__icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }

    .error-landing__details {
        font-size: 0.85rem;
    }
}

.app.dark .error-landing {
    background: radial-gradient(circle at top, rgba(255, 193, 7, 0.08), transparent 45%), radial-gradient(circle at bottom, rgba(255, 193, 7, 0.05), transparent 60%), linear-gradient(180deg, #070a12 0%, #05070f 100%);
}

.app.dark .error-landing__card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 193, 7, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(255, 193, 7, 0.08);
}

    .app.dark .error-landing__card::before {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.06), transparent 60%);
    }

.app.dark .error-landing__icon {
    background: linear-gradient(135deg, #ffc107, #ffb300);
    color: #0b1220;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 193, 7, 0.15);
}

.app.dark .error-landing__code {
    color: #ffca2c;
    text-shadow: 0 2px 14px rgba(255, 193, 7, 0.18);
}

.app.dark .error-landing__title {
    color: #f8fafc;
}

.app.dark .error-landing__message {
    color: #cbd5e1;
}

.app.dark .error-landing__details {
    background: rgba(2, 6, 23, 0.85);
    color: #e2e8f0;
    border: 1px solid rgba(255, 193, 7, 0.10);
}


/*=============Home============*/
/*=============Home============*/
/*=============Home============*/
/*=============Home============*/
/*=============Home============*/


/* ============================================================
   GOLDEENO LANDING PAGE
   Concept: clean minimal fintech. White space does the work —
   flat surfaces, a single gold accent used only where it means
   something (the price, the primary action), no gradients,
   no glow, no ornament for its own sake.
============================================================= */

.gd-landing {
    --gd-ink: #14171A;
    --gd-muted: #6B7280;
    --gd-bg: #FFFFFF;
    --gd-bg-soft: #F7F6F3;
    --gd-border: #E7E5E0;
    --gd-gold: #C9971C;
    --gd-gold-ink: #14171A;

    /* Guard against any child overflowing the viewport width on mobile (RTL).
       `clip` avoids creating a scroll container, so it won't disturb layout. */
    overflow-x: clip;
}

.dark .gd-landing {
    --gd-ink: #F2F1ED;
    --gd-muted: #9CA3AF;
    --gd-bg: #0E0F11;
    --gd-bg-soft: rgba(255, 255, 255, 0.04);
    --gd-border: rgba(255, 255, 255, 0.12);
    --gd-gold: #E0B84A;
    --gd-gold-ink: #14171A;
}

/* ============================================================
   APP SHELL — navbar, side drawer, content.
   Mobile-first; shares the landing's clean gold token system.
============================================================= */

.app {
    --gd-ink: #14171A;
    --gd-muted: #6B7280;
    --gd-bg: #FFFFFF;
    --gd-bg-soft: #F7F6F3;
    --gd-border: #E7E5E0;
    --gd-gold: #C9971C;
    --gd-gold-ink: #14171A;

    /* Height of the sticky top nav. The toast stack parks itself under it. */
    --gd-nav-h: 64px;

    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--gd-bg);
    color: var(--gd-ink);
}

.app.dark {
    --gd-ink: #F2F1ED;
    --gd-muted: #9CA3AF;
    --gd-bg: #0E0F11;
    --gd-bg-soft: rgba(255, 255, 255, 0.04);
    --gd-border: rgba(255, 255, 255, 0.12);
    --gd-gold: #E0B84A;
    --gd-gold-ink: #14171A;
}

/* Kills the browser's 300ms wait for a possible double-tap-to-zoom, which is why
   a tap can feel like it was ignored. */
button,
.brand,
.menu-list a,
.market-state-btn,
.weekday-chip {
    touch-action: manipulation;
}

/* ---------- Top nav ---------- */

.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    padding: 0 12px;
    background: var(--gd-bg);
    border-bottom: 1px solid var(--gd-border);
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* The icon cluster keeps its size; if anything has to give on a narrow phone it
   is the brand, which shrinks gracefully because the logo is contained. */
.nav-right {
    flex: 0 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 4px 6px;
    cursor: pointer;
    user-select: none;
}

/* Sized off the 58px bar rather than a fixed pixel height, and constrained on
   both axes so the wordmark is always letterboxed inside whatever room it gets
   instead of being clipped by the bar or by a squeezed flex row. */
.brand-logo {
    display: block;
    height: 26px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    flex: 0 1 auto;
}

.menu-toggle,
.icon-btn,
.close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--gd-ink);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

    .menu-toggle:hover,
    .icon-btn:hover,
    .close-btn:hover {
        background: var(--gd-bg-soft);
    }

    .menu-toggle:active,
    .icon-btn:active,
    .close-btn:active {
        background: var(--gd-border);
    }

    .menu-toggle img,
    .icon-btn img {
        width: 20px;
        height: 20px;
        display: block;
    }

.close-btn {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--gd-muted);
}

/* ---------- Side drawer ---------- */

/* Viewport-sized, click-through layer that clips the off-canvas panel so the
   closed drawer (parked at translateX(100%)) can't widen the document. */
.drawer-layer {
    position: fixed;
    inset: 0;
    z-index: 150;
    overflow: hidden;
    pointer-events: none;
}

.side-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(320px, 86vw);
    height: 100%;
    background: var(--gd-bg);
    border-left: 1px solid var(--gd-border);
    box-shadow: -12px 0 34px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

    .side-menu.open {
        transform: translateX(0);
    }

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 58px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid var(--gd-border);
}

    /* The close button is a fixed tap target; only the brand may give way, and it
       letterboxes rather than clipping (see .brand-logo). */
    .side-menu-header .close-btn {
        flex: 0 0 auto;
    }

.menu-list {
    list-style: none;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

    .menu-list li {
        margin: 0;
        padding: 0;
    }

    .menu-list li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 14px;
        border-radius: 12px;
        color: var(--gd-ink);
        font-size: 0.98rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .menu-list li a:hover {
            background: var(--gd-bg-soft);
        }

        .menu-list li a.active {
            background: var(--gd-bg-soft);
            color: var(--gd-gold);
        }

            .menu-list li a.active::before {
                content: "";
                width: 3px;
                align-self: stretch;
                border-radius: 3px;
                background: var(--gd-gold);
            }

/* ---------- Overlay + content ---------- */

.overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
    animation: gd-overlay-in 0.2s ease;
    pointer-events: auto;
}

@keyframes gd-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.content {
    flex: 1;
    width: 100%;
}

    .content.no-scroll {
        overflow: hidden;
    }

@media (min-width: 768px) {
    .top-nav {
        padding: 0 20px;
    }
}

/* ---------- Hero ---------- */

.gd-hero {
    padding: 72px 24px;
    background: var(--gd-bg);
}

.gd-hero-inner {
    max-width: 1120px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 64px;
}

.gd-hero-text {
    flex: 1 1 420px;
    min-width: 0; /* allow the flex item to shrink below its 420px basis on mobile */
    text-align: right;
}

.gd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gd-muted);
    margin-bottom: 22px;
}

.gd-kicker-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.gd-hero-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1.3;
    color: var(--gd-ink);
    margin: 0 0 18px;
}

.gd-hero-desc {
    font-size: 0.95rem;
    line-height: 2;
    color: var(--gd-muted);
    max-width: 420px;
    margin: 0 0 32px;
}

.gd-hero-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.gd-btn-primary {
    padding: 13px 30px;
    border-radius: 12px;
    border: none;
    background: var(--gd-gold);
    color: var(--gd-gold-ink);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .gd-btn-primary:hover {
        background: #B4860F;
    }

.dark .gd-btn-primary:hover {
    background: #EFC968;
}

.gd-btn-text {
    color: var(--gd-ink);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border-bottom: 1px solid var(--gd-border);
    padding-bottom: 3px;
    transition: border-color 0.15s ease;
}

    .gd-btn-text:hover {
        border-color: var(--gd-ink);
    }

/* ---------- Price card ---------- */

.gd-price-card {
    flex: 0 0 auto;
    width: 300px;
    padding: 28px;
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    background: var(--gd-bg-soft);
}

.gd-price-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--gd-muted);
    margin-bottom: 22px;
}

.gd-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    flex: 0 0 auto;
    animation: gd-pulse 2s infinite;
}

@keyframes gd-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.gd-price-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.gd-price-number {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--gd-ink);
    font-variant-numeric: tabular-nums;
}

.gd-price-unit {
    font-size: 0.9rem;
    color: var(--gd-muted);
}

.gd-price-note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--gd-border);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--gd-muted);
}

@media (prefers-reduced-motion: reduce) {
    .gd-live-dot {
        animation: none;
    }
}

@media (max-width: 768px) {
    .gd-hero {
        /* Flush against the nav: on a phone the fold is the whole screen, and every
           pixel above the price is one the price does not get. The bottom
           keeps its air - that one separates the hero from the stat bar. */
        padding: 0 18px 40px;
    }

    .gd-hero-inner {
        justify-content: center;
        text-align: center;
        gap: 40px;
    }

    .gd-hero-text {
        flex-basis: 100%; /* full width once wrapped — never wider than the viewport */
        text-align: center;
    }

    .gd-hero-desc {
        margin-inline: auto;
    }

    .gd-hero-actions {
        justify-content: center;
    }

    .gd-hero-title {
        font-size: 2rem;
    }

    .gd-price-card {
        width: 100%;
    }
}

/* ---------- Stat bar ---------- */

.gd-stats {
    border-top: 1px solid var(--gd-border);
    border-bottom: 1px solid var(--gd-border);
    background: var(--gd-bg-soft);
}

.gd-stats-inner {
    max-width: 1120px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
}

.gd-stat {
    flex: 1 1 200px;
    text-align: center;
    padding: 28px 20px;
    border-inline-start: 1px solid var(--gd-border);
}

    .gd-stat:first-child {
        border-inline-start: none;
    }

.gd-stat-num {
    display: block;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--gd-ink);
    margin-bottom: 6px;
}

.gd-stat-label {
    font-size: 0.82rem;
    color: var(--gd-muted);
}

@media (max-width: 640px) {
    .gd-stat {
        flex: 1 1 50%;
        border-inline-start: none;
        border-top: 1px solid var(--gd-border);
    }

    .gd-stat:nth-child(-n+2) {
        border-top: none;
    }
}

/* ---------- Section shell ---------- */

.gd-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 72px 24px;
}

.gd-section-head {
    text-align: center;
    margin-bottom: 44px;
}

.gd-eyebrow {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gd-gold);
    margin-bottom: 10px;
}

.gd-section-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--gd-ink);
    margin: 0;
}

/* ---------- Three-step process ---------- */

.gd-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gd-step {
    border: 1px solid var(--gd-border);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: right;
    background: var(--gd-bg);
}

.gd-step-num {
    display: block;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--gd-gold);
    margin-bottom: 16px;
}

.gd-step-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 0 0 8px;
}

.gd-step-text {
    font-size: 0.88rem;
    line-height: 1.9;
    color: var(--gd-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .gd-steps {
        grid-template-columns: 1fr;
    }
}

/* ---------- Trust grid ---------- */

.gd-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.gd-trust-tile {
    border: 1px solid var(--gd-border);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: right;
    background: var(--gd-bg);
}

.gd-trust-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.gd-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--gd-gold);
    margin-bottom: 16px;
}

    .gd-trust-icon svg {
        width: 26px;
        height: 26px;
    }

.gd-trust-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 0 0 8px;
}

.gd-trust-text {
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--gd-muted);
    margin: 0;
}

/* ---------- Closing CTA ---------- */

.gd-cta {
    text-align: center;
    padding: 72px 24px;
    background: var(--gd-bg-soft);
    border-top: 1px solid var(--gd-border);
}

.gd-cta-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--gd-ink);
    margin: 0 0 10px;
}

.gd-cta-sub {
    font-size: 0.92rem;
    color: var(--gd-muted);
    margin: 0 0 28px;
}

/* ===================== SITE FOOTER =====================
   Aligned to the landing design system: flat surfaces, a single
   gold accent, token-driven colors (auto dark mode via --gd-*).
========================================================= */
.site-footer {
    margin-top: 72px;
    border-top: 1px solid var(--gd-border);
    background: var(--gd-bg-soft);
    color: var(--gd-ink);
    text-align: right;
}

.site-footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
    gap: 40px;
    max-width: 1120px;
    margin-inline: auto;
    padding: 56px 24px;
}

.footer-col-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 0 0 18px;
}

.footer-brand-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.footer-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.footer-brand-name {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gd-ink);
}

.footer-brand-text {
    font-size: 0.88rem;
    line-height: 2;
    color: var(--gd-muted);
    text-align: justify;
    max-width: 320px;
    margin: 0 0 20px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--gd-border);
    background: var(--gd-bg);
    color: var(--gd-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .footer-social-btn svg {
        width: 19px;
        height: 19px;
    }

    .footer-social-btn:hover {
        color: var(--gd-gold);
        border-color: var(--gd-gold);
    }

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer-list a {
        color: var(--gd-muted);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 600;
        transition: color 0.15s ease;
    }

        .footer-list a:hover {
            color: var(--gd-gold);
        }

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .footer-contact li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.88rem;
        color: var(--gd-muted);
    }

    .footer-contact svg {
        width: 17px;
        height: 17px;
        color: var(--gd-gold);
        flex-shrink: 0;
    }

    .footer-contact a {
        color: var(--gd-muted);
        text-decoration: none;
        transition: color 0.15s ease;
    }

        .footer-contact a:hover {
            color: var(--gd-gold);
        }

.footer-enamad {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border: 1px solid var(--gd-border);
    border-radius: 14px;
    background: var(--gd-bg);
    color: var(--gd-muted);
    text-decoration: none;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease;
}

    .footer-enamad svg {
        width: 34px;
        height: 34px;
        color: var(--gd-gold);
    }

    .footer-enamad:hover {
        border-color: var(--gd-gold);
        color: var(--gd-ink);
    }

.site-footer-bottom {
    border-top: 1px solid var(--gd-border);
    padding: 20px 24px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--gd-muted);
}

@media (max-width: 900px) {
    .site-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 560px) {
    .site-footer-top {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 20px;
    }

    .footer-brand-head,
    .footer-social,
    .footer-contact li {
        justify-content: center;
    }

    .footer-brand-text {
        text-align: center;
        margin-inline: auto;
    }
}


/* ===================== SHARED PAGE HERO =====================
   Centred logo + title used by the contact page.
   About and terms use the document system further down.
============================================================== */
.about-page {
    direction: rtl;
    overflow-x: clip;
}

.about-hero {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    padding: 64px 24px 8px;
}

.about-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 18px;
}

.about-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 0 0 12px;
}

.about-subtitle {
    font-size: 0.98rem;
    line-height: 2;
    color: var(--gd-muted);
    margin: 0;
}

.about-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--gd-border);
    background: var(--gd-bg-soft);
    color: var(--gd-gold);
    margin-bottom: 18px;
    font-size: 1.1rem;
    font-weight: 800;
}

    .about-card-icon svg {
        width: 24px;
        height: 24px;
    }

@media (max-width: 560px) {
    .about-hero {
        padding-top: 40px;
    }

    .contact-cards {
        padding: 0 16px;
    }
}


/* ===================== CONTACT PAGE =====================
   Flat bordered cards, gold accent on hover. Token-driven.
========================================================= */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    max-width: 1120px;
    margin: 40px auto 0;
    padding: 0 24px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

    .contact-card:hover {
        border-color: var(--gd-gold);
    }

    .contact-card .about-card-icon {
        margin-bottom: 12px;
    }

.contact-card-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 4px 0;
}

.contact-card-value {
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--gd-muted);
}

.contact-social-wrap {
    text-align: center;
    margin: 48px auto 0;
    padding: 0 24px;
}

.contact-social-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 0 0 20px;
}

.contact-social {
    justify-content: center;
}


/* ===================== DOCUMENT PAGES (about + terms) =====================
   Concept: a private-bank prospectus rather than a deck of cards. Rules and
   whitespace carry the structure, the reading column is measured, and gold is
   spent only on hairlines, clause numbers and the one starred clause.
   Mobile-first; the section index becomes a sticky rail from 980px up.
=========================================================================== */

.doc-page {
    --doc-wash: rgba(201, 151, 28, 0.055);
    --doc-gold-line: rgba(201, 151, 28, 0.38);
    direction: rtl;
    overflow-x: clip;
}

.dark .doc-page {
    --doc-wash: rgba(224, 184, 74, 0.07);
    --doc-gold-line: rgba(224, 184, 74, 0.4);
}

.doc-shell {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 900px) {
    .doc-shell {
        padding-inline: 40px;
    }
}

/* ---------- Hero: an opening statement, set flush to the reading edge ---------- */

.doc-hero {
    /* Phones get the tighter opening; the roomy one is restored from 900px up,
       together with the rest of this header's desktop proportions. */
    padding: 24px 0 30px;
    border-bottom: 1px solid var(--gd-border);
}

@media (min-width: 900px) {
    .doc-hero {
        padding: 78px 0 46px;
    }
}

.doc-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.72rem;
    color: var(--gd-gold);
    margin: 0 0 18px;
}

    .doc-eyebrow::before {
        content: "";
        flex: none;
        width: 26px;
        height: 1px;
        background: currentColor;
        opacity: 0.65;
    }

.doc-display {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: clamp(1.55rem, 5.6vw, 2.5rem);
    font-weight: 800;
    /* Heading leading, not body leading. 1.6 on a title that wraps reads as two
       separate lines rather than one heading, which is what a phone always gets. */
    line-height: 1.42;
    color: var(--gd-ink);
    /* No measure cap here: 20ch at the clamp's 1.55rem floor is about 250px, so on
       a phone it squeezed the title into two thirds of the width and left the rest
       empty. The cap is a desktop typographic measure - see the 900px block. */
    margin: 0;
}

.doc-lead {
    max-width: 62ch;
    margin: 14px 0 0;
    font-size: clamp(0.94rem, 2.6vw, 1.04rem);
    /* 2.1 is set for the 62ch desktop measure; at the ~40ch a phone gives it the
       same leading just looks stretched. */
    line-height: 1.95;
    color: var(--gd-muted);
}

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 18px 0 0;
    font-size: 0.78rem;
    color: var(--gd-muted);
}

    .doc-meta span {
        display: flex;
        align-items: center;
        gap: 14px;
    }

        .doc-meta span + span::before {
            content: "";
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--gd-gold);
        }

/* The header's original proportions, which are the ones it was drawn at. */
@media (min-width: 900px) {
    .doc-display {
        line-height: 1.6;
        max-width: 20ch;
    }

    .doc-lead {
        margin-top: 22px;
        line-height: 2.1;
    }

    .doc-meta {
        margin-top: 24px;
    }
}

/* ---------- Two-column shell: reading column + section index ---------- */

.doc-layout {
    display: grid;
    gap: 30px;
    padding-block: 28px 8px;
}

@media (min-width: 980px) {
    /* Index first (the right column, since the page is RTL), reading column after.
       Both are placed explicitly so the document can stay first in the DOM. */
    .doc-layout {
        grid-template-columns: 228px minmax(0, 1fr);
        align-items: start;
        gap: 56px;
        padding-block: 48px 16px;
    }

        .doc-layout > main {
            grid-column: 2;
            grid-row: 1;
        }
}

.doc-index-rail {
    display: none;
}

@media (min-width: 980px) {
    .doc-index-rail {
        display: block;
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 78px;
    }
}

.doc-index-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.72rem;
    color: var(--gd-muted);
    margin: 0 0 12px;
    padding-inline-start: 15px;
}

.doc-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .doc-index-list a {
        display: flex;
        gap: 10px;
        padding: 7px 0 7px 0;
        padding-inline-start: 14px;
        border-inline-start: 1px solid var(--gd-border);
        font-size: 0.84rem;
        line-height: 1.8;
        color: var(--gd-muted);
        text-decoration: none;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

        .doc-index-list a:hover,
        .doc-index-list a:focus-visible {
            color: var(--gd-ink);
            border-inline-start-color: var(--gd-gold);
        }

    .doc-index-list .doc-index-num {
        flex: none;
        color: var(--gd-gold);
        opacity: 0.8;
    }

/* Mobile index: collapsed by default so the document starts immediately. */
.doc-index-mobile {
    border: 1px solid var(--gd-border);
    padding: 0 16px;
}

@media (min-width: 980px) {
    .doc-index-mobile {
        display: none;
    }
}

.doc-index-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.88rem;
    color: var(--gd-ink);
    text-align: start;
}

    .doc-index-toggle:focus-visible {
        outline: 2px solid var(--gd-gold);
        outline-offset: 3px;
    }

.doc-index-mobile .doc-index-list {
    padding-bottom: 10px;
}

.doc-index-mobile .doc-index-list a {
    border-inline-start: 0;
    padding-inline-start: 0;
}

/* ---------- Sections and clauses ---------- */

.doc-section {
    padding-block: 30px;
    border-top: 1px solid var(--gd-border);
    scroll-margin-top: 76px;
}

    .doc-section:first-of-type {
        padding-top: 4px;
        border-top: 0;
    }

.doc-section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.doc-num {
    flex: none;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.82rem;
    color: var(--gd-gold);
}

.doc-h2 {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: clamp(1.02rem, 3.4vw, 1.2rem);
    font-weight: 800;
    line-height: 1.9;
    color: var(--gd-ink);
    margin: 0;
}

.doc-text {
    max-width: 72ch;
    margin: 0 0 4px;
    font-size: 0.9rem;
    line-height: 2.1;
    color: var(--gd-muted);
    text-align: justify;
}

.doc-clauses {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .doc-clauses li {
        position: relative;
        max-width: 72ch;
        padding: 11px 0;
        padding-inline-start: 20px;
        font-size: 0.9rem;
        line-height: 2.1;
        color: var(--gd-muted);
        text-align: justify;
    }

        .doc-clauses li + li {
            border-top: 1px solid var(--gd-border);
        }

        .doc-clauses li::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 25px;
            width: 9px;
            height: 1px;
            background: var(--gd-border);
        }

        .doc-clauses li strong {
            font-family: "Samim-Bold", "Samim", sans-serif;
            font-weight: 700;
            color: var(--gd-ink);
        }

/* ---------- The starred clause: the one place gold fills a surface ---------- */

.doc-perk {
    position: relative;
    scroll-margin-top: 76px;
    max-width: 72ch;
    margin: 26px 0 6px;
    padding: 26px 22px 24px;
    background: var(--doc-wash);
    border: 1px solid var(--doc-gold-line);
}

.doc-perk-star {
    position: absolute;
    top: -10px;
    inset-inline-start: 20px;
    padding-inline: 8px;
    background: var(--gd-bg);
    color: var(--gd-gold);
    font-size: 0.9rem;
    line-height: 1;
}

.doc-perk-eyebrow {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.72rem;
    color: var(--gd-gold);
    margin: 0 0 8px;
}

.doc-perk-title {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 0 0 10px;
}

.doc-perk .doc-text {
    margin: 0;
}

/* ---------- FAQ ---------- */

.doc-faq-item {
    border-top: 1px solid var(--gd-border);
}

    .doc-faq-item:last-of-type {
        border-bottom: 1px solid var(--gd-border);
    }

    /* Never set `display` on <summary> itself: WebKit stops toggling the
       <details> when the summary is a flex container, so the row inside it
       does the layout instead. */
    .doc-faq-item summary {
        list-style: none;
        cursor: pointer;
    }

        .doc-faq-item summary::-webkit-details-marker {
            display: none;
        }

        .doc-faq-item summary::marker {
            content: "";
        }

        .doc-faq-item summary:focus-visible {
            outline: 2px solid var(--gd-gold);
            outline-offset: 3px;
        }

.doc-summary-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.93rem;
    line-height: 1.9;
    color: var(--gd-ink);
}

.doc-sign {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--gd-gold);
}

.doc-summary-row .doc-sign {
    margin-top: 8px;
}

    .doc-sign::before,
    .doc-sign::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 50%;
        width: 100%;
        height: 1px;
        background: currentColor;
    }

    .doc-sign::after {
        transform: rotate(90deg);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

details[open] > summary .doc-sign::after,
.doc-sign.is-open::after {
    transform: rotate(90deg) scaleX(0);
    opacity: 0;
}

.doc-faq-answer {
    max-width: 68ch;
    margin: 0;
    padding: 0 32px 20px;
    padding-inline-end: 0;
    font-size: 0.89rem;
    line-height: 2.1;
    color: var(--gd-muted);
    text-align: justify;
}

.doc-faq-item[open] .doc-faq-answer {
    animation: docRise 0.28s ease both;
}

.doc-faq-answer a {
    color: var(--gd-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--doc-gold-line);
}

    .doc-faq-answer a:hover {
        color: var(--gd-gold);
    }

/* ---------- About-page pieces: pillars, pull quote, closing links ---------- */

.doc-pillars {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-pillar {
    padding: 20px 0;
    border-top: 1px solid var(--gd-border);
}

@media (min-width: 760px) {
    .doc-pillars {
        grid-template-columns: repeat(3, 1fr);
    }

    .doc-pillar {
        padding: 22px 24px 8px;
    }

        .doc-pillar:first-child {
            padding-inline-start: 0;
        }

        .doc-pillar + .doc-pillar {
            border-inline-start: 1px solid var(--gd-border);
        }
}

.doc-pillar-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--gd-ink);
    margin: 0 0 8px;
}

    .doc-pillar-name::before {
        content: "";
        flex: none;
        width: 16px;
        height: 1px;
        background: var(--gd-gold);
    }

.doc-pillar-text {
    font-size: 0.86rem;
    line-height: 1.95;
    color: var(--gd-muted);
    margin: 0;
}

.doc-quote {
    margin: 0;
    padding: 40px 0;
    border-top: 1px solid var(--gd-border);
    border-bottom: 1px solid var(--gd-border);
}

    .doc-quote p {
        max-width: 24ch;
        margin: 0;
        font-family: "Samim-Bold", "Samim", sans-serif;
        font-size: clamp(1.15rem, 4vw, 1.6rem);
        font-weight: 800;
        line-height: 1.95;
        color: var(--gd-ink);
    }

.doc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    padding: 26px 0 56px;
}

.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.9rem;
    color: var(--gd-ink);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--gd-border);
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .doc-link:hover {
        color: var(--gd-gold);
        border-bottom-color: var(--doc-gold-line);
    }

    .doc-link svg {
        width: 14px;
        height: 14px;
        transition: transform 0.2s ease;
    }

    .doc-link:hover svg {
        transform: translateX(-3px);
    }

/* The landing page's secondary action, under the sign-up button. Block-level so
   it drops to its own line and stays centred by .gd-cta. */
.gd-cta-app {
    margin-top: 22px;
}

/* ---------- Download page: the one store card ---------- */

.dl-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 56px;
    padding: 18px 20px;
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

    .dl-card:hover {
        border-color: var(--doc-gold-line);
    }

.dl-card-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--gd-gold);
    color: var(--gd-gold-ink);
}

    .dl-card-mark svg,
    img.dl-card-mark {
        width: 24px;
        height: 24px;
    }

/* An image badge brings its own artwork, so it gets no gold plate behind it. */
img.dl-card-mark {
    width: 48px;
    height: 48px;
    background: none;
    object-fit: contain;
}

.dl-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dl-card-name {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--gd-ink);
}

.dl-card-note {
    font-size: 0.86rem;
    color: var(--gd-muted);
}

/* ---------- Motion ---------- */

@keyframes docRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.doc-hero > * {
    animation: docRise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

    .doc-hero > *:nth-child(2) {
        animation-delay: 0.07s;
    }

    .doc-hero > *:nth-child(3) {
        animation-delay: 0.14s;
    }

    .doc-hero > *:nth-child(4) {
        animation-delay: 0.21s;
    }

@media (prefers-reduced-motion: no-preference) {
    html:has(.doc-page) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .doc-hero > *,
    .doc-faq-item[open] .doc-faq-answer {
        animation: none;
    }

    .doc-sign::after {
        transition: none;
    }
}


.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    direction: rtl;
    padding: 40px 10%;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #fbfbfe 100%);
    color: #1f2937;
    border: 1px solid #eceef3;
    border-radius: 18px;
    padding: 18px 20px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.7;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    /* Horizontal layout: icon badge beside the text */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: right;
    overflow: hidden;
}

/* Gradient accent bar on the trailing (right, in RTL) edge */
.feature-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #f6c453 0%, #e0a72e 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.feature-card:hover {
    border-color: #f0d089;
    box-shadow: 0 14px 30px rgba(224, 167, 46, 0.16);
    transform: translateY(-5px);
}

.feature-card:hover::before {
    opacity: 1;
}

.icon-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff4d6 0%, #ffe6a8 100%);
    box-shadow: inset 0 0 0 1px rgba(224, 167, 46, 0.25);
    transition: transform 0.28s ease;
}

.feature-card:hover .icon-container {
    transform: scale(1.08) rotate(-4deg);
}

.check-icon {
    width: 26px;
    height: 26px;
    color: #c8891b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .feature-cards {
        padding: 30px 6%;
    }
}

@media (max-width: 600px) {
    .feature-cards {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 5%;
    }
}


/* Styles to override for dark mode */

/* For the .feature-card */
.app.dark .feature-card, .dark .feature-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #232323 100%);
    color: #e0e0e0;
    border: 1px solid #333333;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

    .app.dark .feature-card:hover, .dark .feature-card:hover {
        border-color: #5a4a1f;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }

.app.dark .icon-container, .dark .icon-container {
    background: linear-gradient(135deg, #3a3320 0%, #2b2617 100%);
    box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.2);
}

/* For the .check-icon */
.app.dark .check-icon, .dark .check-icon {
    color: #f6c453;
}


/* ===== Features marquee (single-line, auto-spinning strip) ===== */
.features-marquee {
    direction: rtl;
    overflow: hidden;
    width: 100%;
    padding: 22px 0;
    /* Fade the edges so chips slide in/out smoothly. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.features-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 14px;
    /* In RTL the track starts shifted; animate it to reveal the second copy. */
    animation: feature-marquee var(--marquee-duration, 30s) linear infinite;
}

.features-marquee:hover .features-marquee-track {
    animation-play-state: paused;
}

@keyframes feature-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); } /* RTL: moves the strip to the right */
}

.feature-chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    background: linear-gradient(135deg, #ffffff 0%, #fbfbfe 100%);
    color: #1f2937;
    border: 1px solid #eceef3;
    border-radius: 999px;
    padding: 10px 18px 10px 14px;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-chip:hover {
    transform: translateY(-3px);
    border-color: #f0d089;
    box-shadow: 0 10px 22px rgba(224, 167, 46, 0.18);
}

.feature-chip .icon-container {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff4d6 0%, #ffe6a8 100%);
    box-shadow: inset 0 0 0 1px rgba(224, 167, 46, 0.25);
}

.feature-chip .check-icon {
    width: 18px;
    height: 18px;
    color: #c8891b;
}

.feature-chip-text {
    line-height: 1;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .features-marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
    .features-marquee {
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* Dark mode */
.app.dark .feature-chip, .dark .feature-chip {
    background: linear-gradient(135deg, #1e1e1e 0%, #232323 100%);
    color: #e0e0e0;
    border-color: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.app.dark .feature-chip:hover, .dark .feature-chip:hover {
    border-color: #5a4a1f;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}

.app.dark .feature-chip .icon-container, .dark .feature-chip .icon-container {
    background: linear-gradient(135deg, #3a3320 0%, #2b2617 100%);
    box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.2);
}

.app.dark .feature-chip .check-icon, .dark .feature-chip .check-icon {
    color: #f6c453;
}

/* You might also want to set a dark background for the body if you're using a .dark class on it */
.app.dark {
    background-color: #121212;
    color: #e0e0e0; /* Ensure text is readable on dark background */
}

/*=============Buy / Sell Page============*/
/*=============Buy / Sell Page============*/
/*=============Buy / Sell Page============*/
/* Clean gold fintech, mobile-first — shares the .gd-* token system with the
   dashboard/landing. Sell reuses buy markup and re-tints the accent to red. */

.buy-page {
    padding: 24px 16px;
    min-height: calc(100dvh - 58px);
    background: var(--gd-bg-soft);
    display: flex;
    /* Column, not the default row. The market and capacity gates render a bar or a card
       as a SIBLING of .buy-card, and in a row those became a second column beside the
       form - squeezing the notice thin and shoving the card off centre. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Everything the gates can put above the form lines up with the form itself, rather than
   shrinking to fit its own text. Same width and cap as .buy-card. */
.buy-page > .market-warning,
.buy-page > .market-closed-card {
    width: 100%;
    max-width: 460px;
}

.app.dark .buy-page {
    background: #0E0F11;
}

.buy-card {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 18px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
}

.app.dark .buy-card {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    box-shadow: none;
}

.buy-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 2px;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gd-ink);
}

    .buy-title::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gd-gold);
    }

/* ===== INFO / PRICE BOXES ===== */

.info-box {
    padding: 14px 16px;
    text-align: center;
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-border);
    border-radius: 14px;
}

.app.dark .info-box {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.info-label {
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--gd-muted);
}

.app.dark .info-label {
    color: #94a3b8;
}

.info-value {
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gd-ink);
}

.app.dark .info-value {
    color: #f8fafc;
}

    .info-value.gold {
        color: var(--gd-gold);
    }

/* ===== LIMIT ROW ===== */

.limit-row {
    display: flex;
    gap: 12px;
}

.limit-box {
    flex: 1;
}

    .limit-box .info-value {
        font-size: 1.05rem;
    }

/* ===== TRADING FEE ===== */

/* The standing notice, shown before anything is typed. Reads as an aside rather than a
   warning — a کارمزد is a term of the trade, not a problem with what the customer did. */
.fee-note {
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--gd-muted);
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
}

.app.dark .fee-note {
    color: #94a3b8;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

    .fee-note strong {
        color: var(--gd-gold);
    }

/* The per-amount breakdown: gold, fee, and what actually moves. */
.fee-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-border);
    border-radius: 14px;
}

.app.dark .fee-breakdown {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.fee-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--gd-muted);
}

.app.dark .fee-row {
    color: #94a3b8;
}

/* The line the customer is actually deciding on, separated so it does not read as a
   third equal item in the list. */
.fee-total {
    padding-top: 8px;
    border-top: 1px solid var(--gd-border);
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gd-ink);
}

.app.dark .fee-total {
    border-top-color: rgba(255,255,255,0.08);
    color: #f8fafc;
}

/* ===== CONVERTER ===== */

.converter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0;
}

.field {
    width: 100%;
}

.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gd-muted);
}

.app.dark .field-label {
    color: #94a3b8;
}

.input-field {
    width: 100%;
    padding: 13px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gd-ink);
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .input-field:focus {
        border-color: var(--gd-gold);
        box-shadow: 0 0 0 3px rgba(201,151,28,0.15);
    }

.app.dark .input-field {
    color: #f1f5f9;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}

    .app.dark .input-field:focus {
        border-color: var(--gd-gold);
        box-shadow: 0 0 0 3px rgba(224,184,74,0.18);
    }

/* ===== ERROR ===== */

.error-message {
    padding: 10px 12px;
    font-size: 0.85rem;
    text-align: center;
    color: #dc2626;
    background: rgba(239,68,68,0.10);
    border-radius: 10px;
}

.app.dark .error-message {
    color: #f87171;
    background: rgba(239,68,68,0.16);
}

/* ===== SUBMIT (flat gold, overrides the global gradient btn) ===== */

.buy-page .btn-primary {
    width: 100%;
    margin-top: 4px;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--gd-gold-ink);
    background: var(--gd-gold);
    border: none;
    border-radius: 12px;
    box-shadow: none;
    transition: background 0.15s ease, transform 0.05s ease;
}

    .buy-page .btn-primary:hover {
        background: #B4860F;
        transform: none;
        box-shadow: none;
    }

    .buy-page .btn-primary:active {
        transform: translateY(1px);
        box-shadow: none;
    }

    .buy-page .btn-primary:disabled {
        color: var(--gd-muted);
        background: var(--gd-border);
        cursor: not-allowed;
    }

.app.dark .buy-page .btn-primary:hover {
    background: #EFC968;
}

/*=============Sell Page (red accent)============*/

.sell-page .buy-title::before {
    background: #ef4444;
}

.sell-page .info-value.gold {
    color: #ef4444;
}

/* Distinct destructive-leaning CTA so buy/sell are hard to confuse on mobile. */
.sell-page.buy-page .btn-primary {
    color: #fff;
    background: #ef4444;
}

    .sell-page.buy-page .btn-primary:hover {
        background: #dc2626;
    }

.app.dark .sell-page.buy-page .btn-primary:hover {
    background: #f87171;
}


/*=============Profile============*/
/*=============Profile============*/
/* Clean gold fintech, mobile-first — .gd-* token system, matches dashboard. */

.profile-container {
    max-width: 620px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-container .card {
    margin: 0;
    padding: 20px 18px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
}

.app.dark .profile-container .card {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    box-shadow: none;
}

.profile-container .card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gd-ink);
}

    .profile-container .card-title::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gd-gold);
    }

.app.dark .profile-container .card-title {
    color: #f8fafc;
}

/* ===================== INFO GRID ===================== */

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
}

.app.dark .info-item {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.profile-container .info-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gd-muted);
}

.profile-container .info-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gd-ink);
}

.app.dark .profile-container .info-label {
    color: #94a3b8;
}

.app.dark .profile-container .info-value {
    color: #f8fafc;
}

@media (max-width: 560px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .profile-container .info-value {
        word-break: break-word;
    }
}

/* ===================== BUTTONS ===================== */

.profile-container .btn {
    width: 100%;
    padding: 13px 18px;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 12px;
}

.profile-container .btn-primary {
    color: var(--gd-gold-ink);
    background: var(--gd-gold);
    border: none;
    box-shadow: none;
}

    .profile-container .btn-primary:hover {
        background: #B4860F;
        transform: none;
        box-shadow: none;
    }

.app.dark .profile-container .btn-primary:hover {
    background: #EFC968;
}

.profile-container .btn-danger {
    color: #dc2626;
    background: transparent;
    border: 1px solid rgba(239,68,68,0.4);
}

    .profile-container .btn-danger:hover {
        background: rgba(239,68,68,0.08);
    }

.app.dark .profile-container .btn-danger {
    color: #f87171;
    border-color: rgba(248,113,113,0.4);
}

    .app.dark .profile-container .btn-danger:hover {
        background: rgba(248,113,113,0.10);
    }



/*=============Main Layout============*/
/*=============Main Layout============*/
/*=============Main Layout============*/
/*=============Main Layout============*/


.app {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    color: #0f172a;
    transition: background 0.3s ease, color 0.3s ease;
}

/* ===================== TOP NAV ===================== */

.top-nav {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand {
    font-weight: 900;
    font-size: 1.1rem;
    color: #0f172a;
    letter-spacing: 0.2px;
}

.inner-content {
    min-height: calc(100vh - 64px);
}

/* ===================== ICON BUTTON ===================== */

.icon-btn,
.menu-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    cursor: pointer;
    transition: 0.2s ease;
}

    .icon-btn:hover,
    .menu-toggle:hover {
        transform: translateY(-1px);
        border-color: rgba(255,193,7,0.4);
    }

/* ===================== SIDE MENU ===================== */

.side-menu {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.06);
    box-shadow: -10px 0 30px rgba(0,0,0,0.08);
    padding: 16px;
    transition: right 0.3s ease;
    z-index: 1100;
}

    .side-menu.open {
        right: 0;
    }

.close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    margin-bottom: 16px;
    cursor: pointer;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .menu-list li a {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        color: #0f172a;
        font-weight: 600;
        transition: 0.2s ease;
    }

        .menu-list li a:hover {
            background: rgba(255,193,7,0.12);
            color: #b45309;
        }

/* ===================== OVERLAY ===================== */

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

/* ===================== CONTENT ===================== */
/*
.content {
    padding: 16px;
    transition: filter 0.3s ease;
}*/

    .content.no-scroll {
        overflow: hidden;
        filter: blur(1px);
    }

/* ===================== DARK MODE ===================== */

.app.dark {
    background: radial-gradient(circle at top, rgba(255, 193, 7, 0.06), transparent 45%), linear-gradient(180deg, #05070f 0%, #03050a 100%);
    color: #f1f5f9;
}

    /* ================= NAV (FIX CONTRAST) ================= */

    .app.dark .top-nav {
        background: rgba(2, 6, 23, 0.85);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255, 193, 7, 0.12);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }

    /* BRAND */
    .app.dark .brand {
        color: #f8fafc;
        text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }

    /* ================= ICON BUTTONS (IMPORTANT FIX) ================= */

    .app.dark .icon-btn,
    .app.dark .menu-toggle,
    .app.dark .close-btn {
        background: rgba(15, 23, 42, 0.9);
        border: 1px solid rgba(255, 193, 7, 0.18);
        color: #f8fafc;
        box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
    }

        /* hover glow (VERY IMPORTANT FOR VISIBILITY) */
        .app.dark .icon-btn:hover,
        .app.dark .menu-toggle:hover,
        .app.dark .close-btn:hover {
            border-color: rgba(255, 193, 7, 0.45);
            box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 3px rgba(255, 193, 7, 0.08);
        }

    /* ================= SIDE MENU ================= */

    .app.dark .side-menu {
        background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(2,6,23,0.98));
        border-left: 1px solid rgba(255, 193, 7, 0.12);
        box-shadow: -20px 0 50px rgba(0,0,0,0.6);
    }

    /* MENU ITEMS (FIX READABILITY) */

    .app.dark .menu-list li a {
        color: #e2e8f0;
        border-radius: 10px;
    }

        .app.dark .menu-list li a:hover {
            background: rgba(255, 193, 7, 0.10);
            color: #ffca2c;
        }

    /* ================= OVERLAY (FIX DEPTH) ================= */

    .app.dark .overlay {
        background: rgba(0,0,0,0.65);
        backdrop-filter: blur(2px);
    }

    .app.dark .content {
        background: radial-gradient(circle at top, rgba(255, 193, 7, 0.04), transparent 55%), linear-gradient(180deg, #070a12 0%, #05070f 100%);
        min-height: calc(100vh - 64px);
        color: #f1f5f9;
        transition: background 0.3s ease, color 0.3s ease;
    }

        /* وقتی sidebar بازه */
        .app.dark .content.no-scroll {
            filter: blur(1px);
        }


/*=============Transaction Page============*/
/*=============Transaction Page============*/
/* Clean gold fintech, mobile-first — .gd-* token system, matches dashboard.
   Shared by customer + retailer transaction pages. */

.transactions-page {
    padding: 16px;
    min-height: calc(100dvh - 58px);
    background: var(--gd-bg-soft);
}

.app.dark .transactions-page {
    background: #0E0F11;
}

/* ================= HEADER ================= */

.transactions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--gd-ink);
}

    .card-title::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gd-gold);
    }

.app.dark .card-title {
    color: #f8fafc;
}

/* ================= FILTER (retailer) ================= */

.national-filter {
    height: 44px;
    min-width: 220px;
    padding: 0 14px;
    font-size: 0.92rem;
    color: var(--gd-ink);
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .national-filter:focus {
        border-color: var(--gd-gold);
        box-shadow: 0 0 0 3px rgba(201,151,28,0.15);
    }

.app.dark .national-filter {
    color: #f1f5f9;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}

    .app.dark .national-filter::placeholder {
        color: rgba(148,163,184,0.8);
    }

/* ================= VIEW SWITCH ================= */

.view-switch {
    height: 44px;
    padding: 0 16px;
    font-weight: 700;
    color: var(--gd-ink);
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .view-switch:hover {
        background: var(--gd-bg-soft);
        border-color: var(--gd-gold);
    }

.app.dark .view-switch {
    color: #f1f5f9;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}

    .app.dark .view-switch:hover {
        background: rgba(255,255,255,0.06);
    }

/* ================= TABLE ================= */

.table-responsive {
    overflow-x: auto;
    border-radius: 16px;
}

.fancy-grid {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 16px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
}

    .fancy-grid thead th {
        position: static;
        padding: 15px 16px;
        text-align: right;
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--gd-muted);
        white-space: nowrap;
        background: var(--gd-bg-soft);
        border: none;
        border-bottom: 1px solid var(--gd-border);
    }

    .fancy-grid tbody td {
        padding: 15px 16px;
        color: var(--gd-ink);
        white-space: nowrap;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--gd-border);
    }

    .fancy-grid tbody tr:last-child td {
        border-bottom: none;
    }

.app.dark .fancy-grid {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    box-shadow: none;
}

    .app.dark .fancy-grid thead th {
        color: #94a3b8;
        background: rgba(255,255,255,0.03);
        border-bottom-color: rgba(255,255,255,0.10);
    }

    .app.dark .fancy-grid tbody td {
        color: #e2e8f0;
        border-bottom-color: rgba(255,255,255,0.08);
    }

.grid-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

    .grid-row:hover td {
        background: var(--gd-bg-soft);
    }

.app.dark .grid-row:hover td {
    background: rgba(255,255,255,0.04);
}

/* ================= CARD VIEW ================= */

.tx-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.tx-card {
    width: 100%;
    padding: 16px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

    .tx-card:active {
        transform: translateY(1px);
    }

.app.dark .tx-card {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    box-shadow: none;
}

.tx-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gd-border);
    font-weight: 800;
    color: var(--gd-ink);
}

.app.dark .tx-top {
    color: #f8fafc;
    border-bottom-color: rgba(255,255,255,0.08);
}

    /* second span in the row = status, softer weight */
    .tx-top span:last-child {
        font-weight: 700;
        color: var(--gd-muted);
    }

.tx-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--gd-muted);
}

@media (min-width: 640px) {
    .tx-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 14px;
    }
}

/* ================= STATUS / TYPE BADGES ================= */

.type-buy,
.type-sell,
.type-other,
.status-success,
.status-pending,
.status-canceled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.type-buy,
.status-success { background: rgba(34,197,94,0.14); color: #16a34a; }

.type-sell,
.status-canceled { background: rgba(239,68,68,0.14); color: #dc2626; }

.type-other { background: rgba(139,92,246,0.14); color: #7c3aed; }

.status-pending { background: rgba(245,158,11,0.14); color: #d97706; }

/* ================= MODAL ================= */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.55);
}

@keyframes modalIn {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-box {
    width: 100%;
    max-width: 430px;
    padding: 22px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    animation: modalIn 0.2s ease;
}

    .modal-box h4 {
        margin: 0 0 16px;
        font-family: "Samim-Bold", "Samim", sans-serif;
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--gd-ink);
    }

    .modal-box p {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 12px;
        color: var(--gd-muted);
        line-height: 1.7;
    }

.app.dark .modal-box {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
}

    .app.dark .modal-box h4 {
        color: #f8fafc;
    }

.modal-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

/* ================= SELECT (retailer) ================= */

.status-select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 0.95rem;
    color: var(--gd-ink);
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .status-select:focus {
        border-color: var(--gd-gold);
        box-shadow: 0 0 0 3px rgba(201,151,28,0.15);
    }

.app.dark .status-select {
    color: #f1f5f9;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}

/* ================= MODAL SUBMIT ================= */

.modal-box .submit-btn,
.modal-box .btn-primary {
    width: 100%;
    margin-top: 18px;
    padding: 13px 16px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gd-gold-ink);
    background: var(--gd-gold);
    border: none;
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .modal-box .submit-btn:hover,
    .modal-box .btn-primary:hover {
        background: #B4860F;
        transform: none;
        box-shadow: none;
    }

/* ================= CONFIRM MODAL (retailer) ================= */

.confirm-modal {
    width: 100%;
    max-width: 360px;
    padding: 24px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    animation: modalIn 0.2s ease;
}

.app.dark .confirm-modal {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
}

.confirm-title {
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gd-ink);
}

.app.dark .confirm-title {
    color: #f8fafc;
}

.confirm-text {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--gd-muted);
}

.confirm-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    background: rgba(245,158,11,0.14);
    color: #d97706;
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

.confirm-cancel,
.confirm-submit {
    flex: 1;
    height: 46px;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease;
}

.confirm-cancel {
    color: var(--gd-ink);
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-border);
}

    .confirm-cancel:hover {
        background: var(--gd-border);
    }

.confirm-submit {
    color: var(--gd-gold-ink);
    background: var(--gd-gold);
}

    .confirm-submit:hover {
        background: #B4860F;
    }

.app.dark .confirm-cancel {
    color: #f1f5f9;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.12);
}

/* ================= MOBILE MODAL (centered) =================
   One block for every modal surface on phones — .modal-box,
   .confirm-modal and .credit-modal all stay vertically centered
   and scroll inside themselves when the content is taller than
   the viewport. */

@media (max-width: 768px) {
    .modal-backdrop {
        padding: 16px;
    }

    .modal-box,
    .confirm-modal,
    .credit-modal {
        width: 100%;
        max-width: 100%;
        padding: 18px 16px;
        border-radius: 18px;
        max-height: 90vh;
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        animation: modalIn 0.2s ease-out;
    }
}

/* ================= LOADING ================= */

.loading-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    color: var(--gd-muted);
}

.spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(201,151,28,0.20);
    border-top-color: var(--gd-gold);
    animation: spin 0.7s linear infinite;
}

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

/* ================= EMPTY ================= */

.empty-state {
    margin-top: 30px;
    text-align: center;
    font-weight: 700;
    color: var(--gd-muted);
}
/* ================= DASHBOARD ERROR + RETRY ================= */

.dashboard-error {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

    .dashboard-error .empty-state {
        margin-top: 0;
    }

    .dashboard-error .submit-btn {
        max-width: 220px;
    }

/* ================= ANIMATIONS ================= */

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

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .transactions-header {
        flex-direction: column;
        align-items: stretch;
    }

    .header-right {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .national-filter {
        width: 100%;
        min-width: unset;
    }

    .view-switch {
        width: 100%;
    }

    .tx-grid {
        grid-template-columns: 1fr;
    }

    .tx-card {
        max-width: 100%;
    }

    /* Modal sizing/position lives in the MOBILE MODAL block above. */
}

/* ================= DARK MODE ================= */

.app.dark .card-title {
    color: #f8fafc;
}

.app.dark .fancy-grid,
.app.dark .tx-card,
.app.dark .modal-box,
.app.dark .confirm-modal,
.app.dark .view-switch,
.app.dark .national-filter,
.app.dark .status-select {
    background: #17191C;
    border: 1px solid rgba(255,255,255,0.10);
    color: #f8fafc;
}

.app.dark .fancy-grid thead th {
    background: rgba(255,255,255,0.03);
    color: #94a3b8;
}

.app.dark .fancy-grid tbody td {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #e2e8f0;
}

.app.dark .tx-body,
.app.dark .modal-box p,
.app.dark .confirm-text,
.app.dark .modal-row span {
    color: #cbd5e1;
}

.app.dark .grid-row:hover td {
    background: rgba(255,255,255,0.04);
}

.app.dark .confirm-cancel {
    background: rgba(255,255,255,0.06);
    color: #f8fafc;
    border-color: rgba(255,255,255,0.12);
}

.app.dark .modal-backdrop {
    background: rgba(0,0,0,0.72);
}

.app.dark .national-filter::placeholder {
    color: #94a3b8;
}

.app.dark .loading-state,
.app.dark .empty-state {
    color: #cbd5e1;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.credit-btn {
    height: 42px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

    .credit-btn:hover {
        opacity: .9;
    }

.process-status-text {
    font-weight: 700;
    color: #64748b;
}

.credit-modal {
    width: 92%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
}

.credit-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
}

.credit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.credit-input {
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    padding: 0 12px;
}

.app.dark .credit-modal {
    background: #0f172a;
    border: 1px solid rgba(255,193,7,.12);
}

.app.dark .credit-input {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.08);
    color: #fff;
}

.app.dark .process-status-text {
    color: #e2e8f0;
}

/*=============Login / Verify (auth)============*/
/*=============Login / Verify (auth)============*/
/* Clean gold fintech, mobile-first — .gd-* token system, matches dashboard.
   Shared by /login and /verify. Button is scoped to .auth-page so it does not
   clobber the global .btn-primary; inputs/errors use the tokenized globals. */

.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100dvh - 58px);
    padding: 20px;
    background: var(--gd-bg-soft);
}

.app.dark .auth-page {
    background: #0E0F11;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 26px 22px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
}

.app.dark .auth-card {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    box-shadow: none;
}

/* ===== HEADER ===== */

.auth-header {
    text-align: center;
}

    .auth-header h1 {
        margin: 0;
        font-family: "Samim-Bold", "Samim", sans-serif;
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--gd-ink);
    }

    .auth-header p {
        margin: 8px 0 0;
        font-size: 0.9rem;
        color: var(--gd-muted);
    }

    .auth-header strong {
        color: var(--gd-gold);
        font-weight: 800;
    }

.app.dark .auth-header h1 {
    color: #f8fafc;
}

.app.dark .auth-header p {
    color: #94a3b8;
}

/* ===== INPUT (phone) ===== */

.auth-body {
    margin-top: 4px;
}

.input-group {
    margin-top: 18px;
}

    .input-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gd-muted);
    }

.app.dark .input-group label {
    color: #94a3b8;
}

/* ===== OTP ===== */

.otp-card {
    text-align: center;
}

.otp-box {
    margin-top: 22px;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    direction: ltr;
    unicode-bidi: bidi-override;
}

.otp-input {
    width: 52px;
    height: 58px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gd-ink);
    background: var(--gd-bg-soft);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .otp-input:focus {
        border-color: var(--gd-gold);
        box-shadow: 0 0 0 3px rgba(201,151,28,0.15);
    }

.app.dark .otp-input {
    color: #f1f5f9;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}

    .app.dark .otp-input:focus {
        border-color: var(--gd-gold);
        box-shadow: 0 0 0 3px rgba(224,184,74,0.18);
    }

/* ===== CTA (scoped — leaves the global .btn-primary alone) ===== */

.auth-page .btn-primary {
    width: 100%;
    margin-top: 18px;
    padding: 13px 16px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gd-gold-ink);
    background: var(--gd-gold);
    border: none;
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

    .auth-page .btn-primary:hover {
        background: #B4860F;
        transform: none;
        box-shadow: none;
    }

    .auth-page .btn-primary:active {
        transform: translateY(1px);
    }

.app.dark .auth-page .btn-primary:hover {
    background: #EFC968;
}

/* ===== LINKS / FOOTER ===== */

.otp-footer {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-link {
    background: none;
    border: none;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gd-gold);
    cursor: pointer;
}

    .btn-link:hover {
        color: #B4860F;
        text-decoration: underline;
    }

.timer {
    font-size: 0.88rem;
    color: var(--gd-muted);
}

.auth-footer {
    margin-top: 16px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--gd-muted);
}

    .auth-footer a {
        color: var(--gd-gold);
        font-weight: 700;
        text-decoration: none;
    }

        .auth-footer a:hover {
            text-decoration: underline;
        }

.app.dark .auth-footer {
    color: #94a3b8;
}

/*=============Dashboard============*/
/*=============Dashboard============*/
/*=============Dashboard============*/


/* ============================================================
   DASHBOARD — clean gold fintech, mobile-first
============================================================= */

.dashboard-page {
    padding: 16px;
    background: var(--gd-bg-soft);
    min-height: calc(100dvh - 58px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app.dark .dashboard-page {
    background: #0E0F11;
}

/* ===== CARD BASE ===== */

.dashboard-card {
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
    overflow: hidden;
}

/* ===== PASSBOOK LEAF (customer dashboard) =====
   One continuous surface divided by hairline ledger rules — the whole dashboard is
   a single object, a passbook leaf for the piggy bank. No tiles, no badges. */

.passbook {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
}

.app.dark .passbook {
    background: #17191C;
    box-shadow: none;
}

/* The market strip above the leaf shares its measure; the page's flex gap owns
   the spacing between them. */
.dashboard-page .market-banner {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 0;
}

.pb-band {
    padding: 20px;
}

    /* Every band after the first opens with a ledger rule… */
    .pb-band + .pb-band {
        border-top: 1px solid var(--gd-border);
    }

/* ---- The weighing: worth today, and the substance it stands for ---- */

.pb-title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gd-ink);
}

.pb-figure {
    margin: 0;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 2.3rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--gd-ink);
}

.pb-unit {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gd-muted);
    margin-inline-start: 8px;
}

.pb-substance {
    margin: 6px 0 0;
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--gd-muted);
}

    .pb-substance strong {
        font-weight: 700;
        color: var(--gd-ink);
    }

/* ---- The balance beam: the band's rule line is the beam, the gold dot its
   fulcrum. Paid-in on one pan, growth on the other. ---- */

.pb-beam {
    padding-top: 0;
    border-top: 0 !important; /* the beam line below replaces the band rule */
}

.pb-beam-line {
    position: relative;
    height: 1px;
    margin: 0 -20px 16px;     /* bleed edge-to-edge like the other rules */
    background: var(--gd-border);
}

.pb-fulcrum {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gd-gold);
}

.pb-beam-ends {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
}

.pb-entry dt {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gd-muted);
    margin-bottom: 4px;
}

.pb-entry dd {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--gd-ink);
}

    .pb-entry dd span {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--gd-muted);
    }

.pb-entry--delta {
    text-align: end;
}

/* ---- Chart band: tighter sides on phones so the plot gets the width ---- */

.pb-chart {
    padding-bottom: 14px;
}

/* ---- The close: where the saving ends ---- */

.pb-close p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.9;
    color: var(--gd-muted);
}

/* ---- Empty / error states inside the leaf ---- */

.pb-state {
    text-align: center;
    padding: 30px 20px;
}

    .pb-state .pb-title {
        margin-bottom: 8px;
    }

.pb-state-text {
    margin: 0 0 18px;
    font-size: 0.88rem;
    line-height: 1.9;
    color: var(--gd-muted);
}

/* One flat gold action, shared by the empty state (link) and the error retry
   (button) — the leaf never shows the app's gradient button. */
.pb-start {
    display: inline-block;
    padding: 10px 24px;
    border: 0;
    border-radius: 12px;
    background: var(--gd-gold);
    color: var(--gd-gold-ink);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

    .pb-start:focus-visible {
        outline: 2px solid var(--gd-gold);
        outline-offset: 3px;
    }

/* ---- Skeleton: the leaf loads into its own shape ---- */

.skel {
    display: block;
    border-radius: 8px;
    background: rgba(20,23,26,0.07);
    animation: pb-pulse 1.1s ease-in-out infinite alternate;
}

.app.dark .skel {
    background: rgba(255,255,255,0.07);
}

.skel-line { height: 12px; }
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-line.w100 { width: 100%; }

/* ---- Trade-form skeleton ----
   The buy/sell card's own boxes supply the frame; these give the bars inside them the
   heights the real text and controls occupy, so the card does not resize when the data
   lands. Same idea as the passbook skeleton above, in the trade form's shape. */

.buy-card .info-box > .skel {
    margin-inline: auto;
}

.buy-card .info-box > .skel + .skel,
.buy-card .field > .skel + .skel {
    margin-top: 8px;
}

.skel-input {
    height: 46px;
    border-radius: 10px;
}

.skel-btn {
    height: 50px;
    border-radius: 12px;
}

.skel-fig {
    height: 36px;
    width: 55%;
    margin: 12px 0 10px;
}

/* The chart placeholder holds the chart's real aspect, so the leaf does not
   reflow when the plot arrives. */
.skel-chart {
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 600;
    border-radius: 12px;
}

@media (min-width: 640px) {
    .skel-chart {
        aspect-ratio: 1000 / 340;
    }
}

/* Screen-reader-only text (the chart's data summary lives here). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@keyframes pb-pulse {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

/* ===== SHARED STAT TEXT ===== */

.stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gd-muted);
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--gd-ink);
}

    .stat-value em {
        font-style: normal;
        font-size: 0.78em;
        font-weight: 600;
        color: var(--gd-muted);
        margin-inline-start: 3px;
    }

/* ===== RETAILER STAT GRID (shared .dashboard-stats / .stat-card) ===== */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: stretch;
}

.stat-card {
    position: relative;
    padding: 16px 16px 16px 14px;
}

    .stat-card::before {
        content: "";
        position: absolute;
        top: 14px;
        bottom: 14px;
        right: 0;
        width: 4px;
        border-radius: 0 4px 4px 0;
    }

    .stat-card.gold::before { background: #C9971C; }
    .stat-card.received::before { background: #22c55e; }
    .stat-card.purchase::before { background: #8b5cf6; }
    .stat-card.asset::before { background: #06b6d4; }

    .stat-card .stat-label { margin-bottom: 8px; }

/* ===== LARGER SCREENS ===== */

@media (min-width: 640px) {
    .dashboard-page {
        padding: 22px;
        gap: 18px;
    }

    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .pb-band {
        padding: 24px 26px;
    }

    .pb-beam-line {
        margin-inline: -26px;
    }

    .pb-figure {
        font-size: 2.6rem;
    }
}

/* ===== CHART ===== */

.chart-card {
    padding: 20px;
}

/* Frameless variant: the chart as a flush band inside a host surface (the leaf). */
.chart-flush {
    width: 100%;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.chart-heading h3 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gd-ink);
}

.chart-heading span {
    font-size: 0.78rem;
    color: var(--gd-muted);
}

/* Change over the window, in words — quiet ink, no pill, no arrows. */
.chart-change {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gd-ink);
    white-space: nowrap;
}

/* ===== CHART WRAPPER ===== */

.chart-wrapper {
    width: 100%;
    overflow: hidden;
}

.gold-chart {
    display: block;
    width: 100%;
    height: auto;
    /* The app is RTL; without this the SVG text inherits direction:rtl, which
       flips text-anchor="end" so the Y-axis labels grow rightward into the plot.
       Numbers/dates are LTR anyway, so pin the chart's text direction to ltr. */
    direction: ltr;
}

/* Two shapes from the same data: the tall one fills a phone card, the wide one
   fills a desktop card. Each viewBox matches its aspect-ratio, so both fill their
   card with no letterbox / empty space, and neither is distorted. Mobile-first:
   show the tall one by default, swap to the wide one on larger screens. */
.gold-chart--m {
    aspect-ratio: 1000 / 600;
}

.gold-chart--d {
    display: none;
    aspect-ratio: 1000 / 340;
}

@media (min-width: 640px) {
    .gold-chart--m {
        display: none;
    }

    .gold-chart--d {
        display: block;
    }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 960px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== MOBILE CHART ===== */
/* The SVG scales down to the phone width (~0.36x of its 1000-unit viewBox), so
   anything sized for desktop becomes unreadably tiny. Scale the in-SVG text and
   stroke up so they stay legible at that shrink, and reclaim width with tighter
   card padding. */
@media (max-width: 640px) {

    .chart-card {
        padding: 14px 10px;
    }

    /* Inside the leaf, hand the plot the side padding too. */
    .pb-chart {
        padding-inline: 10px;
    }

        .pb-chart .chart-header {
            padding-inline: 10px;
        }

    .chart-header {
        margin-bottom: 12px;
    }

    /* Axis labels: 20px at 0.36x ≈ 7px on desktop -> bump so they read ~11px. */
    .price-label,
    .date-label,
    .unit-note {
        font-size: 30px;
    }

    /* A thicker line reads better once the whole chart is scaled down. */
    .chart-line {
        stroke-width: 4;
    }

    /* Tooltip text, kept inside the 264-unit box but big enough to read at 0.36x. */
    .pt-tip-date {
        font-size: 26px;
    }

    .pt-tip-val {
        font-size: 28px;
    }
}

/* ===== DARK MODE ===== */

.app.dark .dashboard-card {
    background: #17191C;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: none;
}

.app.dark .stat-label {
    color: #94a3b8;
}

.app.dark .stat-value {
    color: #f8fafc;
}

/* ===== CHART INK =====
   All chart color rides the .gd-* custom properties, so light and dark themes
   resolve without per-theme overrides. The plot is ink on paper: solid gold line,
   solid hairline ledger rules, muted Persian labels. */

.price-label,
.date-label,
.unit-note {
    fill: var(--gd-muted);
    font-size: 20px;
    font-weight: 600;
}

.grid-line {
    stroke: var(--gd-border);
    stroke-width: 1;
}

.chart-line {
    stroke: var(--gd-gold);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: chart-draw 0.7s cubic-bezier(0, 0, 0.2, 1) 0.1s forwards;
}

@keyframes chart-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.end-dot,
.pt-dot {
    fill: var(--gd-gold);
}

.end-dot-core,
.pt-dot-core {
    fill: var(--gd-bg);
}

/* The endpoint appears once the line has finished drawing toward it. */
.end-dot,
.end-dot-core {
    opacity: 0;
    animation: chart-dot-in 0.25s ease-out 0.8s forwards;
}

@keyframes chart-dot-in {
    to {
        opacity: 1;
    }
}

.app.dark .end-dot-core,
.app.dark .pt-dot-core {
    fill: #17191C; /* the card surface, not the page background */
}

/* ===== INTERACTIVE MARKERS ===== */
/* Transparent per-day band captures tap (touch) / hover (mouse); the component
   renders a single crosshair + tooltip for the active day. touch-action:pan-y
   keeps vertical page scrolling working when a finger starts on the chart. */

.pt-hit {
    fill: transparent;
    cursor: crosshair;
    touch-action: pan-y;
}

/* The marker group only exists in the DOM while a day is active, so it is simply
   visible; a short fade-in softens the appearance. */
.pt-marker {
    pointer-events: none;
    animation: pt-marker-in .16s ease;
}

@keyframes pt-marker-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Hairline gold crosshair for the active day. */
.pt-cross {
    stroke: var(--gd-gold);
    stroke-width: 1;
    opacity: 0.45;
}

/* Flat tooltip surface: paper, hairline border, one soft offset shadow. */
.pt-tip {
    fill: var(--gd-bg);
    stroke: var(--gd-border);
    stroke-width: 1;
    filter: drop-shadow(0 4px 10px rgba(20,23,26,0.12));
}

.app.dark .pt-tip {
    fill: #17191C;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

.pt-tip-date {
    fill: var(--gd-muted);
    font-size: 18px;
    font-weight: 600;
}

.pt-tip-val {
    fill: var(--gd-ink);
    font-size: 22px;
    font-weight: 800;
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {

    .skel,
    .pt-marker {
        animation: none;
    }

    .chart-line {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    .end-dot,
    .end-dot-core {
        animation: none;
        opacity: 1;
    }
}




/*=============Edit Profile============*/
/*=============Edit Profile============*/
/* Clean gold fintech, mobile-first — .gd-* token system, matches dashboard. */

.profile-edit-container {
    padding: 16px;
    min-height: calc(100dvh - 58px);
    background: var(--gd-bg-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app.dark .profile-edit-container {
    background: #0E0F11;
}

.profile-edit-card {
    width: 100%;
    max-width: 520px;
    margin: 0;
    padding: 22px 18px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,23,26,0.04), 0 12px 28px rgba(20,23,26,0.05);
}

.app.dark .profile-edit-card {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    box-shadow: none;
}

.profile-edit-card h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-family: "Samim-Bold", "Samim", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gd-ink);
}

    .profile-edit-card h3::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gd-gold);
    }

.app.dark .profile-edit-card h3 {
    color: #f8fafc;
}

/* ===== FORM ===== */

.form-grid {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

    .form-grid .info-label {
        margin: 10px 0 2px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gd-muted);
    }

        .form-grid .info-label:first-child {
            margin-top: 0;
        }

.app.dark .form-grid .info-label {
    color: #94a3b8;
}

/* Let the tokenized .input-field styling win over the old element selector. */
.form-grid input.input-field {
    margin-bottom: 2px;
}

/* A box that holds nothing but digits reads left to right, the way the OTP row does,
   even though the card around it is RTL. */
.input-ltr {
    direction: ltr;
    text-align: left;
}

/* شبا. The IR is printed on the box rather than typed into it, so the input itself is
   bare and the wrapper carries the border and the focus ring. */
.shaba-field {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
    padding: 13px 14px;
    margin-bottom: 2px;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    /* Neutral, not gold. The gold ring is the design system's focus indicator and the
       other three boxes still use it, but on a 24-digit box that fills the card edge to
       edge it read as a warning rather than as focus. Kept visible on purpose: an
       invisible focus state is unusable on a keyboard. */
    .shaba-field:focus-within {
        border-color: var(--gd-ink);
        box-shadow: 0 0 0 3px rgba(20,23,26,0.10);
    }

.shaba-prefix {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--gd-muted);
}

.shaba-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font-family: inherit;
    /* 24 digits have to fit a phone-width card without scrolling the box. */
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: left;
    color: var(--gd-ink);
    background: none;
    border: none;
    outline: none;
}

    /* The gold that survived neutralising .shaba-field:focus-within, because it is
       painted on a DIFFERENT element. The global `input:focus` rule near the top of this
       file (--primary #eaad00 border + an rgba(255,193,7) glow) matches every bare input,
       and this one is bare by design: the wrapper carries the border, so the box-shadow
       had nothing overriding it and glowed gold inside the box on focus.
       .shaba-input:focus (0,2,0) outranks input:focus (0,1,1), so this wins outright. */
    .shaba-input:focus {
        border-color: transparent;
        box-shadow: none;
    }

    .shaba-input::placeholder {
        color: var(--gd-muted);
        opacity: 0.5;
    }

.app.dark .shaba-field {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}

    .app.dark .shaba-field:focus-within {
        border-color: rgba(255,255,255,0.45);
        box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
    }

.app.dark .shaba-prefix {
    color: #94a3b8;
}

.app.dark .shaba-input {
    color: #f1f5f9;
}

.shaba-field.input-invalid,
.shaba-field.input-invalid:focus-within {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220,53,69,0.15);
}

/* Why a user who cannot leave this page is here. Sits above the fields, since on a
   phone anything below them is off screen when the form first loads. */
.form-notice {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--gd-border);
    background: rgba(212,175,55,0.08);
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--gd-muted);
}

.app.dark .form-notice {
    border-color: rgba(255,255,255,0.10);
    background: rgba(212,175,55,0.10);
    color: #94a3b8;
}

/* Validation output. Listed rather than toasted so it stays on screen while the
   offending box is being corrected. */
.form-errors {
    margin: 12px 0 0;
    padding: 10px 12px;
    list-style: none;
    border-radius: 10px;
    border: 1px solid var(--danger);
    background: rgba(220,53,69,0.06);
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--danger);
}

.form-errors li::before {
    content: "•";
    margin-left: 6px;
}

.form-grid input.input-field.input-invalid,
.form-grid input.input-field.input-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220,53,69,0.15);
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

    .actions .confirm-submit,
    .actions .confirm-cancel {
        height: 46px;
    }

/* ===== CONFIRM MODAL ===== */
/* .confirm-box inherits the tokenized .modal-box; just cap the width. */

.modal-box.confirm-box {
    max-width: 360px;
}

    .modal-box.confirm-box .confirm-actions {
        flex-wrap: wrap;
    }

        .modal-box.confirm-box .confirm-actions .error-message {
            flex-basis: 100%;
        }

/* ===== GLOBAL DARK CARD (near-black, matches token dark surfaces) ===== */

.app.dark .card {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    color: #f1f5f9;
    box-shadow: none;
}

/* =========================
   CUSTOMER SELECT (searchable dropdown)
========================= */
.customer-select {
    position: relative;
}

.customer-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    color: var(--gd-ink);
}

    .customer-dropdown li {
        padding: 10px 12px;
        cursor: pointer;
        border-radius: 8px;
    }

        .customer-dropdown li:hover {
            background: var(--gd-bg-soft);
        }

    .customer-dropdown.hint {
        padding: 10px 12px;
        color: var(--gd-muted);
        font-size: 0.9rem;
    }

/* DARK MODE */
.app.dark .customer-dropdown {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    color: #f1f5f9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

    .app.dark .customer-dropdown li:hover {
        background: rgba(255,255,255,0.06);
    }

    .app.dark .customer-dropdown.hint {
        color: #94a3b8;
    }

/* =========================
   ADMIN SETTINGS PANEL
   Mobile-first: single column, full-width controls, tap targets >= 44px.
========================= */

.settings-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 24px;
}

.settings-card {
    padding: 16px;
}

.settings-title {
    font-family: "Samim-Bold";
    font-size: 1rem;
    color: var(--gd-ink);
    margin-bottom: 12px;
}

.settings-note,
.field-hint {
    font-size: 0.8rem;
    color: var(--gd-muted);
    line-height: 1.7;
    margin: 6px 0 10px;
}

/* ---- Market state: three explicit states, not an ambiguous on/off ---- */

.market-state-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.market-state-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 10px 6px;
    border: 1.5px solid var(--gd-border);
    border-radius: 12px;
    background: var(--gd-bg);
    color: var(--gd-muted);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.market-state-label {
    font-family: "Samim-Bold";
    font-size: 0.95rem;
}

.market-state-hint {
    font-size: 0.68rem;
    line-height: 1.4;
    text-align: center;
}

/* Selected state carries colour AND weight, so it does not rely on hue alone. */
.market-state-btn.selected {
    color: var(--gd-ink);
    background: var(--gd-bg-soft);
}

.market-state-btn.tone-auto.selected {
    border-color: var(--gd-gold);
}

.market-state-btn.tone-open.selected {
    border-color: var(--success);
    color: var(--success);
}

.market-state-btn.tone-closed.selected {
    border-color: var(--danger);
    color: var(--danger);
}

.settings-textarea {
    min-height: 84px;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.8;
    font-family: inherit;
}

/* ---- Schedule ---- */

.time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.time-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Single-field rows in the broadcast card. .time-row is a 1fr 1fr grid, so a lone
   child there would sit at half width with a dead gap beside it. */
.bot-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

/* Unit suffix on a limit group label, so "خرید" cannot be read as grams. */
.limit-unit {
    font-size: 0.8rem;
    color: var(--gd-muted);
    font-weight: normal;
}

/* ---- Collapsible sections ---- */

/* The whole header is the hit target: on a phone a chevron-sized tap area is a miss
   waiting to happen. Reset the button chrome so it reads as a heading, not a control. */
.settings-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 2px 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.settings-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.settings-section-head .settings-title {
    margin: 0;
}

/* Truncates rather than wraps: a two-line summary would make the collapsed rows
   different heights and the list stop reading as a list. */
.settings-summary {
    font-size: 0.8rem;
    color: var(--gd-muted);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unsaved edits in a collapsed section — without this, collapsing could hide a change. */
.settings-dirty {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gd-gold, #d4af37);
    flex-shrink: 0;
}

.settings-chevron {
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--gd-muted);
    border-bottom: 2px solid var(--gd-muted);
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    flex-shrink: 0;
    margin-bottom: 3px;
}

.settings-chevron.open {
    transform: rotate(135deg);
    margin-bottom: 0;
    margin-top: 3px;
}

.settings-body {
    margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .settings-chevron {
        transition: none;
    }
}

.weekday-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.weekday-chip {
    min-height: 40px;
    padding: 8px 14px;
    border: 1.5px solid var(--gd-border);
    border-radius: 999px;
    background: var(--gd-bg);
    color: var(--gd-muted);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.weekday-chip.selected {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--gd-bg-soft);
    font-family: "Samim-Bold";
}

/* ---- Limits ---- */

.limit-group + .limit-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gd-border);
}

.limit-group-label {
    font-family: "Samim-Bold";
    font-size: 0.9rem;
    color: var(--gd-ink);
    margin-bottom: 8px;
}

.limit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.limit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* What the number measures, under its own label. The floor is per transaction and the
   ceiling is the customer's whole day, so leaving both as bare «حداقل/حداکثر (تومان)»
   is what made the ceiling read as a per-trade one. */
.limit-scope {
    display: block;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--gd-muted);
    font-weight: normal;
}

/* ---- Feedback + actions ---- */

.settings-errors {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.8;
}

.settings-actions {
    position: sticky;
    bottom: 0;
    padding: 12px 0;
    background: linear-gradient(to top, var(--gd-bg) 70%, transparent);
}

    .settings-actions .confirm-submit,
    .settings-actions .confirm-cancel {
        flex: 1;
    }

    .settings-actions button:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

/* ---- Confirm diff: old → new, so a mistyped limit is visible before saving ---- */

.settings-diff {
    list-style: none;
    margin: 8px 0 4px;
    max-height: 46vh;
    overflow-y: auto;
    text-align: right;
}

    .settings-diff li {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 0;
        border-bottom: 1px solid var(--gd-border);
        font-size: 0.85rem;
    }

.diff-label {
    color: var(--gd-muted);
    font-size: 0.78rem;
}

.diff-values {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.diff-old {
    color: var(--gd-muted);
    text-decoration: line-through;
}

.diff-arrow {
    color: var(--gd-muted);
}

.diff-new {
    font-family: "Samim-Bold";
    color: var(--gd-ink);
}

/* ---- Dark mode ---- */

.app.dark .settings-title,
.app.dark .limit-group-label,
.app.dark .diff-new {
    color: #f1f5f9;
}

.app.dark .market-state-btn,
.app.dark .weekday-chip {
    background: #17191C;
    border-color: rgba(255,255,255,0.10);
    color: #94a3b8;
}

.app.dark .market-state-btn.selected {
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
}

.app.dark .settings-actions {
    background: linear-gradient(to top, #0E0F11 70%, transparent);
}

/* Small phones: stack the three-state control so labels never truncate. */
@media (max-width: 360px) {
    .market-state-group,
    .limit-fields,
    .time-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MARKET AVAILABILITY
   Open/closed is status, not an error: the shop is fine, it is
   simply not trading right now. Closed states stay neutral —
   slate for the schedule, amber only for the pre-close warning
   where there is something to act on.
============================================================= */

/* ---------- Nav pill ---------- */

.market-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--gd-border);
    background: var(--gd-bg-soft);
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--gd-muted);
}

.market-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}

.market-pill.is-open {
    color: #1B7F4B;
    border-color: rgba(27, 127, 75, 0.28);
    background: rgba(27, 127, 75, 0.08);
}

/* A slow pulse reads as "live" without the jitter of a fast blink. */
.market-pill.is-open .market-pill-dot {
    animation: market-pulse 2.4s ease-in-out infinite;
}

.market-pill.is-closed {
    color: #6B7280;
    border-color: var(--gd-border);
    background: var(--gd-bg-soft);
}

@keyframes market-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .market-pill.is-open .market-pill-dot {
        animation: none;
    }
}

.app.dark .market-pill.is-open {
    color: #4ADE80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.1);
}

.app.dark .market-pill.is-closed {
    color: #9CA3AF;
}

/* Narrow phones: "open" is the expected state, so its label can go and leave the
   dot. A closed market is the actionable case — that text always stays. */
@media (max-width: 400px) {
    .market-pill.is-open .market-pill-text {
        display: none;
    }

    .market-pill.is-open {
        padding: 6px;
    }

    .market-pill.is-closed {
        font-size: 0.68rem;
        padding: 5px 8px;
    }
}

/* ---------- Slim banner (dashboard, landing) ---------- */

.market-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--gd-border);
    border-radius: 12px;
    background: var(--gd-bg-soft);
}

.market-banner-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--gd-muted);
}

    .market-banner-icon svg {
        display: block;
        width: 17px;
        height: 17px;
    }

.market-banner-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.market-banner-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gd-ink);
}

.market-banner-detail {
    font-size: 0.78rem;
    color: var(--gd-muted);
    line-height: 1.7;
}

/* ---------- Closing-soon warning ---------- */

.market-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(201, 151, 28, 0.35);
    border-radius: 12px;
    background: rgba(201, 151, 28, 0.09);
    color: var(--gd-ink);
    font-size: 0.8rem;
    line-height: 1.7;
}

.market-warning strong {
    font-weight: 700;
    color: var(--gd-gold);
}

.market-warning-icon {
    flex: 0 0 auto;
}

/* ---------- Closed card (replaces a trade form) ---------- */

.market-closed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 20px 22px;
    border: 1px solid var(--gd-border);
    border-radius: 16px;
    background: var(--gd-bg);
}

.market-closed-icon {
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 2px;
    /* Muted rather than alarming — this is a locked door, not a fault. */
    filter: grayscale(0.4);
    opacity: 0.85;
}

.market-closed-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--gd-ink);
}

.market-closed-detail {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.9;
    color: var(--gd-muted);
    max-width: 34ch;
}

.market-countdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 260px;
    margin-top: 6px;
    padding: 12px;
    border-radius: 12px;
    background: var(--gd-bg-soft);
}

.market-countdown-label {
    font-size: 0.72rem;
    color: var(--gd-muted);
}

.market-countdown-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gd-gold);
}

.market-reopen {
    font-size: 0.8rem;
    color: var(--gd-muted);
}

.market-closed-note {
    margin: 6px 0 4px;
    font-size: 0.76rem;
    line-height: 1.8;
    color: var(--gd-muted);
}

.market-closed-card .btn-secondary {
    margin-top: 4px;
    max-width: 260px;
}

/* ============================================================
   TOASTS
   The app's success/failure channel. Fixed just under the top
   nav: high enough to be seen without scrolling on a phone —
   the old inline messages sat at the bottom of a long form,
   often off-screen — and clear of the centered modal box, so
   the two never fight for the same space.

   Prefixed `gd-`, and it must stay that way. Bootstrap — loaded
   ahead of this file — owns the bare `.toast` name and hides it
   with `.toast:not(.show) { display: none }`. That selector
   outranks a plain `.toast` here no matter which sheet loads
   last, so a card named `toast` renders into the DOM and is
   never painted: every message, success and error alike, was
   silently invisible.
============================================================= */

.gd-toast-host {
    position: fixed;
    top: calc(var(--gd-nav-h, 64px) + 8px);
    left: 0;
    right: 0;

    /* Over .modal-backdrop (9999) — two of these report on work confirmed
       from inside a modal, and a message hidden behind it says nothing. */
    z-index: 10000;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px;

    /* The empty container spans the width of the screen; without this it would
       sit on top of the nav and eat every tap meant for it. */
    pointer-events: none;
}

.gd-toast {
    pointer-events: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;

    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;

    font-size: 0.85rem;
    line-height: 1.7;
    text-align: right;
    color: var(--gd-ink, #14171A);
    background: var(--gd-bg, #FFFFFF);

    border: 1px solid var(--gd-border, #E7E5E0);
    border-inline-start: 4px solid var(--toast-accent); /* RTL: the right edge */
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);

    cursor: pointer;
    animation: toastIn 0.22s ease-out;
}

/* Level lives in a variable rather than on `color`, so the leading edge and the
   badge can share it while the message itself stays normal ink — coloured body
   text on a tinted card is what made the old inline errors hard to read.
   The dark palette lightens the accent, so the glyph on it flips to dark ink. */
.gd-toast-success {
    --toast-accent: #16a34a;
    --toast-on-accent: #FFFFFF;
}

.gd-toast-error {
    --toast-accent: #dc2626;
    --toast-on-accent: #FFFFFF;
}

.app.dark .gd-toast-success {
    --toast-accent: #4ade80;
    --toast-on-accent: #0E0F11;
}

.app.dark .gd-toast-error {
    --toast-accent: #f87171;
    --toast-on-accent: #0E0F11;
}

.gd-toast-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--toast-on-accent);
    background: var(--toast-accent);
}

.gd-toast-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.gd-toast-close {
    flex: 0 0 auto;
    padding: 0 2px;
    border: none;
    background: none;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--gd-muted, #6B7280);
    cursor: pointer;
    touch-action: manipulation;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gd-toast {
        animation: none;
    }
}


/* =============================================================
   SAFE AREAS - the Android shell's system bars

   The wrapper app runs its WebView over the whole window, status
   and navigation bars included, and sets --gd-safe-top and
   --gd-safe-bottom on <html> to their heights (see MainPage and
   SystemBars in the Android project). Insetting the shell instead
   was the obvious alternative and it is what this replaces: it
   left two fixed bands of flat colour that the page could never
   fill, which is exactly what they looked like - an empty box
   above the header and another below the last section.

   In a plain browser both are 0 and every rule here collapses to
   what it was.

   Last section in the file on purpose. These have to outrank the
   older duplicate blocks further up - there are two .top-nav and
   two .side-menu rules - without having to unpick them first.
============================================================= */

/* The wrapper overwrites both of these with an inline style on <html>, which
   outranks this rule. What is left is every other way the app is opened, and
   env() is the right answer for all of them: 0 in a browser tab, the real
   inset in an installed PWA that is allowed to go edge to edge (iOS under
   black-translucent, Chrome under Android 15's forced edge-to-edge). The old
   flat 0px put the header under the clock in exactly those cases. */
:root {
    --gd-safe-top: env(safe-area-inset-top, 0px);
    --gd-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* The sticky header grows upward and its background carries on behind the
   status bar, so the clock sits on the header instead of on a white strip. */
.top-nav {
    height: calc(var(--gd-nav-h, 64px) + var(--gd-safe-top));
    padding-top: var(--gd-safe-top);
}

/* Toasts park under the header, which is now taller. */
.gd-toast-host {
    top: calc(var(--gd-nav-h, 64px) + var(--gd-safe-top) + 8px);
}

/* Full-height panel, so both ends need clearing. */
.side-menu {
    padding-top: calc(16px + var(--gd-safe-top));
    padding-bottom: calc(16px + var(--gd-safe-bottom));
}

/* Nothing tappable is left under the gesture handle at the end of a scroll. */
.content {
    padding-bottom: var(--gd-safe-bottom);
}

/* The footer still reaches the bottom edge though: it bleeds back over that
   padding and re-adds the same amount inside, so what sits behind the handle
   is the footer's own background rather than bare page. */
.site-footer {
    margin-bottom: calc(-1 * var(--gd-safe-bottom));
    padding-bottom: var(--gd-safe-bottom);
}

/* The one sticky action bar in the app. */
.settings-actions {
    padding-bottom: calc(12px + var(--gd-safe-bottom));
}


/* =============================================================
   THE DARK THEME, ABOVE .app

   The theme is a class on the .app <div>, so everything the
   BROWSER paints rather than the page kept its light colours in
   dark mode: the scroll canvas behind the app, the overscroll
   area, the document scrollbar (that one is on the root element,
   which is not a descendant of .app, so the .app.dark scrollbar
   rules further up never matched it) and, in an installed PWA,
   the strip behind the status bar.

   goldeenoApplyTheme in index.html mirrors the state onto <html>
   as .gd-dark, and these are the rules that need it.
============================================================= */

html {
    /* Tells the browser which scheme to render its own furniture in -
       scrollbars, form controls, the overscroll glow. Without it the
       scrollbar stays light however the track is painted. */
    color-scheme: light;
}

html.gd-dark {
    color-scheme: dark;
}

/* html, body up at the top of this file are pinned to --background, which only
   ever resolves to #ffffff: the dark half of that variable block is commented
   out. These are the dark values .app has always had. */
html.gd-dark,
html.gd-dark body {
    background-color: #05070f;
    color: #f1f5f9;
}

html.gd-dark ::-webkit-scrollbar-track {
    background: #14171c;
}

html.gd-dark ::-webkit-scrollbar-thumb {
    background: #3a3f47;
}

    html.gd-dark ::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }

/* Header height: 64px plus the status bar is around 92dp on a phone, which is a
   ninth of the screen given over to a bar with six controls in it. Android's own
   app bar is 56. Desktop keeps 64 - there is no status bar stacked on it there. */
@media (max-width: 768px) {
    .app {
        --gd-nav-h: 56px;
    }

    .top-nav {
        height: calc(56px + var(--gd-safe-top));
    }
}