/* gCost — استایل مشترک | موبایل‌فرست، RTL */ @font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Material Symbols Rounded'; src: url('fonts/MaterialSymbolsRounded.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: block; } /* آیکون متریال: home */ .msi { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; vertical-align: middle; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; -webkit-font-smoothing: antialiased; user-select: none; } .msi.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } :root { --ink: #14161a; /* مشکی عمیق — هماهنگ با لوگو؛ ثابته، برای المان‌های همیشه‌تیره (نوار کناری، FAB ها، تولتیپ) */ --ink-2: #1e2126; /* سطح تیره‌ی دوم (کارت روی زمینه‌ی تیره) */ --text: #14161a; /* رنگ متن اصلی — تو حالت تاریک روشن می‌شه، برخلاف --ink که ثابته */ --paper: #f6f7f4; /* کاغذ دفتر */ --card: #ffffff; --line: #dfe4dc; --brand: #0e6b53; /* سبز مالی gCost */ --brand-dark: #0a5340; --gold-deep: #E39A40; /* طلایی لوگو — تیره */ --gold-light: #F4D165; /* طلایی لوگو — روشن */ --gold-grad: linear-gradient(135deg, var(--gold-deep), var(--gold-light)); --gold: #c9922e; /* نسخه‌ی تخت طلایی برای متن/بوردر */ --silver: #7d8a94; --diamond: #3d7ea6; --danger: #b3372f; --warn-bg: #fdf3dc; --warn-ink: #7a5b12; --ok: #1d7a4f; --radius: 14px; --shadow: 0 2px 12px rgba(20, 38, 31, .08); color-scheme: light; } /* ============================================================ * حالت تاریک — با toggle تو پایین سایدبار فعال/غیرفعال می‌شه، تو localStorage ذخیره می‌مونه. * فقط رنگ‌های «سطح» عوض می‌شن (کاغذ/کارت/خط/متن)؛ رنگ‌های برند (سبز/طلایی/قرمز) و المان‌های * همیشه‌تیره (--ink، سایدبار، FAB ها) دست‌نخورده می‌مونن چون از قبل رو هر دو زمینه خواناست. * * نکته‌ی مهم: این override فقط رو اعمال می‌شه، نه رو کل بدون این کلاس. * چون خیلی از صفحات gCost هنوز پس‌زمینه‌ی کارت‌شون رو #fff هاردکد دارن؛ اگه متغیرها رو سراسری عوض * می‌کردیم، متن (که از body ارث می‌بره) روشن می‌شد ولی زمینه‌ی اون صفحات هنوز سفید می‌موند → نامرئی. * پس تا وقتی صفحه‌ای migrate نشده و class رو نگرفته، حتی اگه toggle عمومی روشن باشه، اون صفحه * همیشه با ظاهر روشن و امن نمایش داده می‌شه. هر صفحه‌ی جدید که migrate شد، این class رو به بدید * (نه به body — چون html,body{background:var(--paper)} داره و متغیرهای CSS فقط از والد به فرزند ارث * می‌برن؛ اگه رو body می‌ذاشتیم، خودِ عنصر html هیچ‌وقت مقدار تاریک رو نمی‌دید). * ============================================================ */ html[data-theme="dark"].gc-dark-ready { --text: #eef1ee; --paper: #16181c; --card: #1e2126; --line: #2c3036; --shadow: 0 2px 14px rgba(0, 0, 0, .45); color-scheme: dark; } html[data-theme="dark"].gc-dark-ready input[type=text], html[data-theme="dark"].gc-dark-ready input[type=password], html[data-theme="dark"].gc-dark-ready input[type=date], html[data-theme="dark"].gc-dark-ready select, html[data-theme="dark"].gc-dark-ready textarea { color-scheme: dark; } /* اسکرول‌بار و انتخاب متن هم هماهنگ با تم — فقط تو صفحات آماده */ html[data-theme="dark"].gc-dark-ready ::selection { background: var(--brand); color: #fff; } /* توگل حالت تاریک — پایین سایدبار، کنار میان‌برهای صفحه‌کلید */ .gc-theme-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: #cfd6d2; cursor: pointer; padding: 9px 4px; font-size: 12.5px; font-weight: 700; font-family: inherit; border-radius: 8px; margin-bottom: 8px; } .gc-theme-toggle:hover { background: rgba(255,255,255,.06); } .gc-theme-toggle .msi { font-size: 18px; color: #9aa8a1; } .gc-theme-switch { margin-right: auto; width: 34px; height: 19px; border-radius: 10px; background: rgba(255,255,255,.15); position: relative; transition: background .18s; flex-shrink: 0; } .gc-theme-switch::before { content: ''; position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .18s cubic-bezier(.34,1.56,.64,1); } html[data-theme="dark"] .gc-theme-switch { background: var(--brand); } html[data-theme="dark"] .gc-theme-switch::before { transform: translateX(-15px); } html[dir="ltr"] .gc-theme-switch::before { right: auto; left: 2px; } html[dir="ltr"][data-theme="dark"] .gc-theme-switch::before { transform: translateX(15px); } .gc-sb-kbd-hints { font-size: 10.5px; color: #7d8880; padding: 6px 4px 0; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; font-family: 'Vazirmatn', Tahoma, sans-serif; background: var(--paper); color: var(--text); -webkit-text-size-adjust: 100%; touch-action: manipulation; /* جلوگیری از زوم دابل‌تپ در iOS */ } html[dir="rtl"] { direction: rtl; } html[dir="ltr"] { direction: ltr; } /* قانون طلایی موبایل: همه ورودی‌ها ۱۶px تا iOS زوم نکند */ input, select, textarea, button { font-size: 16px !important; font-family: inherit; } input[type=text], input[type=password], input[type=date], select, textarea { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); outline: none; transition: border-color .15s; } input:focus, select:focus, textarea:focus { border-color: var(--brand); } label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: #46574f; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border: none; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer; transition: background .15s, transform .05s; } /* آیکون تک (بدون متن) داخل دکمه — گلیف‌های جهت‌دار مثل فلش عدم‌تقارن بصری دارن، این نُدج جبرانش می‌کنه */ .btn .msi:only-child { transform: translateX(-1px); } html[dir="ltr"] .btn .msi:only-child { transform: translateX(1px); } .btn:active { transform: scale(.985); } .btn:hover { background: var(--brand-dark); } .btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); } .btn.danger { background: var(--danger); } .btn.gold { background: var(--gold-grad); color: var(--text); } .btn.gold:hover { filter: brightness(.95); } .btn.sm { width: auto; padding: 9px 16px; font-size: 14px !important; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .card { background: var(--card); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(20,22,26,.06), 0 8px 20px rgba(20,22,26,.05); padding: 18px; border-top: 2px solid transparent; border-image: linear-gradient(90deg, var(--gold-deep), var(--gold-light), transparent 70%) 1; } /* نوار اخطار لایسنس */ .banner { padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .banner.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #ecd9a4; } .banner.err { background: #fbe9e7; color: var(--danger); border: 1px solid #f0c4c0; } /* توست */ #toast { position: fixed; bottom: 24px; right: 50%; transform: translateX(50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 999; max-width: 92vw; text-align: center; } #toast.show { opacity: 1; } /* هدر اپ — تیره با تأکید طلایی، هماهنگ با لوگو */ .appbar { position: sticky; top: 0; z-index: 50; background: var(--ink); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 14px rgba(0,0,0,.18); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)) 1; } .appbar .logo { font-weight: 900; font-size: 18px; letter-spacing: .5px; } .appbar .logo b { color: var(--gold-light); } .appbar .sub { font-size: 12px; opacity: .75; } /* دکمه‌ی «؟» راهنمای مختصر — بالای هر صفحه، کنار عنوان */ .gc-help-btn{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-weight:900;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1} .gc-help-btn:hover{background:rgba(255,255,255,.18)} .gc-help-btn.light{border-color:var(--line);background:#fff;color:var(--gold-deep)} .gc-help-btn.light:hover{background:#f7f4ee} .container { max-width: 720px; margin: 0 auto; padding: 16px; } /* شبکه ماژول‌ها */ .modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 560px) { .modules { grid-template-columns: repeat(3, 1fr); } } .mod { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 12px; text-align: center; cursor: pointer; border: 1.5px solid transparent; transition: border-color .15s; font-weight: 700; font-size: 14px; } .mod:active { border-color: var(--brand); } .mod .ic { font-size: 30px; display: block; margin: 0 auto 8px; color: var(--brand); } .mod.locked { opacity: .45; position: relative; } .mod.locked::after { content: 'lock'; font-family: 'Material Symbols Rounded'; position: absolute; top: 8px; left: 10px; font-size: 14px; color: #999; } /* برچسب پلن */ .plan-chip { display: inline-block; padding: 4px 12px; border-radius: 20px; flex-shrink: 0; font-size: 12px; font-weight: 800; color: #fff; } .plan-chip.silver { background: var(--silver); } .plan-chip.gold { background: var(--gold); } .plan-chip.diamond { background: var(--diamond); } /* جدول موبایل‌فرندلی: کارت‌محور */ .list-item { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .list-item .meta { font-size: 12px; color: #6b7a72; margin-top: 3px; } /* مودال تمام‌صفحه در موبایل */ .modal-bg { position: fixed; inset: 0; background: rgba(15, 25, 20, .55); display: none; align-items: flex-end; justify-content: center; z-index: 100; } .modal-bg.open { display: flex; } .modal { background: var(--card); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; padding: 22px 20px 20px; max-height: 88vh; overflow-y: auto; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)) 1; position: relative; } @media (min-width: 560px) { .modal-bg { align-items: center; } .modal { border-radius: var(--radius); } } .modal h3 { margin: 0 0 6px; font-weight: 900; color: var(--text); padding-left: 38px; } .modal .close { position: absolute; top: 14px; left: 14px; float: none; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: none; font-size: 16px !important; cursor: pointer; color: var(--text); opacity: .7; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .modal .close:hover { background: var(--danger); color: #fff; } .muted { color: #6b7a72; font-size: 13px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } /* امضای بصری: خطوط دفتر کل روی صفحه ورود */ .ledger-bg { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; background: repeating-linear-gradient(0deg, transparent 0 34px, rgba(14,107,83,.06) 34px 35px), linear-gradient(160deg, #eef3ee, #f6f7f4 55%); } /* ============================================================ * پوسته دسکتاپ — سایدبار ثابت + چیدمان گسترده (فقط ≥1024px) * موبایل دقیقاً همان چیزی می‌ماند که بود؛ چیزی از آن کم نمی‌شود * ============================================================ */ .gc-sidebar { display: none; } /* ============================================================ * منوی همبرگری موبایل — منوی کناری به‌صورت کشویی از راست (یا چپ در LTR) * ============================================================ */ .gc-hamburger { display: none; } @media (max-width: 1023px) { .gc-hamburger { display: flex; align-items: center; justify-content: center; position: fixed; top: 14px; right: 14px; z-index: 150; width: 42px; height: 42px; border-radius: 11px; border: none; cursor: pointer; background: rgba(20,22,26,.82); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); } html[dir="ltr"] .gc-hamburger { right: auto; left: 14px; } /* appbar هر صفحه باید فضای دکمه‌ی همبرگر ثابت رو رزرو کنه تا لوگو/عنوانش زیرش گم نشه */ .appbar { padding-right: 64px; } html[dir="ltr"] .appbar { padding-right: 16px; padding-left: 64px; } .hero-top { padding-right: 50px; } html[dir="ltr"] .hero-top { padding-right: 0; padding-left: 50px; } .gc-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: 82vw; max-width: 300px; background: #14161a; z-index: 250; padding: 20px 16px 16px; overflow-y: auto; transform: translateX(105%); transition: transform .28s cubic-bezier(.22,1,.36,1); box-shadow: -8px 0 34px rgba(0,0,0,.3); } .gc-sidebar.mobile-open { transform: translateX(0); } html[dir="ltr"] .gc-sidebar { right: auto; left: 0; transform: translateX(-105%); } html[dir="ltr"] .gc-sidebar.mobile-open { transform: translateX(0); } .gc-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 240; } .gc-sidebar-backdrop.open { display: block; } /* رو موبایل همیشه کامل و خواناست — چون فقط با تپ باز می‌شه، نیازی به جمع‌شدن نداره */ .gc-sb-biz, .gc-sb-sec, .gc-sb-foot, .gc-sb-lang, .gc-sb-search span:not(.msi), .gc-sb-search .gc-kbd, .gc-sb-link span:not(.msi) { opacity: 1 !important; } .gc-sb-brand img.full { display: none !important; } .gc-sb-brand img.icon { display: block !important; width: 44px; height: auto; margin: 0 auto; } .gc-sb-brand { justify-content: center; padding: 30px 0 16px; } .gc-sb-brand::before { display: none !important; } .gc-sb-link, .gc-sb-search { justify-content: flex-start !important; } .gc-sb-close-btn { display: flex !important; } } /* گذار نرم بومی مرورگر بین ناوبری صفحات (فقط Chrome/Edge جدید؛ در بقیه بی‌اثر و بی‌خطر) */ @view-transition { navigation: auto; } /* نوار پیشرفت بالای صفحه هنگام لود/جابجایی */ .gc-progress { position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 9999; background: linear-gradient(90deg, #ffd98a, var(--brand) 60%); width: 0%; opacity: 0; transition: width .35s cubic-bezier(.4,0,.2,1), opacity .25s; box-shadow: 0 0 8px rgba(14,107,83,.5); } .gc-progress.on { opacity: 1; } /* ============================================================ * ظاهر پایه‌ی سایدبار — مستقل از سایز صفحه (هم موبایل هم دسکتاپ) * ============================================================ */ .gc-sb-brand { display: flex; justify-content: center; align-items: center; padding: 4px 0 14px; height: 40px; } .gc-sb-brand img.full { display: none; } .gc-sb-brand img.icon { width: 30px; height: auto; display: block; } .gc-sb-biz { padding: 0 10px 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); color: #8a8a8a; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .gc-sb-search { display: flex; align-items: center; gap: 7px; width: 100%; margin-bottom: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 9px; padding: 9px 10px; color: #9a9a9a; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .2s cubic-bezier(.22,1,.36,1), border-color .2s; } .gc-sb-search:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: #eaeaea; } .gc-sb-search .msi { font-size: 17px; flex-shrink: 0; } .gc-sb-search span:nth-child(2) { flex: 1; text-align: right; } .gc-sb-search .gc-kbd { background: rgba(255,255,255,.08); color: #8a8a8a; font-size: 9.5px; padding: 1px 5px; } .gc-sb-sec { color: #666; font-size: 10.5px; font-weight: 800; padding: 15px 12px 6px; letter-spacing: .6px; text-transform: uppercase; } .gc-sb-nav { display: flex; flex-direction: column; gap: 2px; } .gc-sb-link { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; color: #9a9a9a; text-decoration: none; font-size: 13.3px; font-weight: 600; transition: background .25s cubic-bezier(.22,1,.36,1), color .2s ease; } .gc-sb-link .msi { font-size: 19px; flex-shrink: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; opacity: .75; } .gc-sb-link:hover { background: rgba(255,255,255,.08); color: #fff; } .gc-sb-link:hover .msi { opacity: 1; transform: scale(1.12); } .gc-sb-link.on { background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); color: #fff; font-weight: 800; } .gc-sb-link.on::before { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: #ffd98a; } html[dir="ltr"] .gc-sb-link.on::before { right: auto; left: -10px; } .gc-sb-link.on .msi { opacity: 1; color: #ffd98a; } .gc-sb-foot { margin-top: auto; padding: 14px 10px 10px; font-size: 10.5px; color: #555; border-top: 1px solid rgba(255,255,255,.06); } .gc-sb-lang { display: flex; gap: 4px; padding: 10px 10px 0; } .gc-sb-lang button { flex: 1; padding: 5px 4px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #9a9a9a; font-size: 10.5px; font-weight: 800; cursor: pointer; } .gc-sb-lang button.on { background: #fff; color: #111; border-color: #fff; } .gc-kbd { display:inline-block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.08); border-radius:4px; padding:1px 6px; font-size:10px; color:#c3c3c3; font-family: inherit; } @media (min-width: 1024px) { body.has-shell { padding-right: 68px; transition: padding-right .2s; } html[dir="ltr"] body.has-shell { padding-right: 0; padding-left: 68px; } .gc-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: 68px; background: #14161a; padding: 18px 10px 14px; overflow: hidden; z-index: 60; box-shadow: 2px 0 20px rgba(0,0,0,.2); border-left: 1px solid rgba(255,255,255,.05); transition: width .18s cubic-bezier(.22,1,.36,1); } .gc-sidebar:hover { width: 248px; overflow-y: auto; box-shadow: 4px 0 32px rgba(0,0,0,.35); } html[dir="ltr"] .gc-sidebar { right: auto; left: 0; border-left: none; border-right: 1px solid rgba(255,255,255,.05); box-shadow: -2px 0 20px rgba(0,0,0,.2); } html[dir="ltr"] .gc-sidebar:hover { box-shadow: -4px 0 32px rgba(0,0,0,.35); } /* متن‌ها فقط وقتی سایدبار با هاور بازه دیده می‌شن — حالت جمع‌شده فقط آیکون * نکته‌ی مهم: برای گره‌های داخل flex (لینک/جستجو) باید width هم صفر بشه، نه فقط opacity — * وگرنه متنِ نامرئی همچنان فضای چیدمان می‌گیرد و آیکون را به‌سمت بیرون از صفحه هل می‌دهد */ .gc-sb-biz, .gc-sb-sec, .gc-sb-foot, .gc-sb-lang { opacity: 0; transition: opacity .12s; white-space: nowrap; } .gc-sb-search span:not(.msi), .gc-sb-search .gc-kbd, .gc-sb-link span:not(.msi) { opacity: 0; width: 0; margin: 0; padding: 0; overflow: hidden; transition: opacity .12s, width .12s; white-space: nowrap; } .gc-sidebar:hover .gc-sb-biz, .gc-sidebar:hover .gc-sb-sec, .gc-sidebar:hover .gc-sb-foot, .gc-sidebar:hover .gc-sb-lang { opacity: 1; transition: opacity .2s .06s; } .gc-sidebar:hover .gc-sb-search span:not(.msi), .gc-sidebar:hover .gc-sb-search .gc-kbd, .gc-sidebar:hover .gc-sb-link span:not(.msi) { opacity: 1; width: auto; transition: opacity .2s .06s, width .2s; } .gc-sb-brand { padding: 4px 0 14px; } .gc-sb-brand img.full { display: none !important; } .gc-sb-brand img.icon { display: block !important; } .gc-sidebar:hover .gc-sb-search { justify-content: flex-start; } .gc-sb-search { justify-content: center; } .gc-sidebar:hover .gc-sb-link { justify-content: flex-start; } .gc-sb-link { justify-content: center; } /* محتوای اصلی گسترده‌تر می‌شود */ .container { max-width: 1180px; } .modules { grid-template-columns: repeat(6, 1fr) !important; } #kpiGrid { grid-template-columns: repeat(4, 1fr) !important; } /* لیست‌های کارت‌محور موبایل → ردیف‌های فشرده و جدول‌مانند */ .list-item { box-shadow: none; border-radius: 0; margin-bottom: 0; padding: 11px 18px; border-bottom: 1px solid var(--line); } .list-item:hover { background: #f2f6f3; } #list, .list-wrap { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } #list .list-item:last-child, .list-wrap .list-item:last-child { border-bottom: none; } /* سربرگ جدول قابل کلیک برای مرتب‌سازی */ [data-sort] { cursor: pointer; user-select: none; display: flex !important; align-items: center; gap: 3px; } [data-sort]:hover { color: var(--brand); } [data-sort] .sort-arrow { font-size: 13px; opacity: .4; } [data-sort].active .sort-arrow { opacity: 1; color: var(--brand); } /* دیالوگ به‌جای شیت پایین‌صفحه */ .modal-bg { align-items: center; backdrop-filter: blur(2px); } .modal { border-radius: 18px; max-width: 560px; box-shadow: 0 24px 64px rgba(10,30,22,.28); } .modal.wide { max-width: 860px !important; } /* فرم‌های دوستونه فشرده‌تر */ .row2 { gap: 14px; } /* لینک‌های میانبر موبایلی داشبورد چون سایدبار جایگزینشان است، پنهان می‌شوند */ .gc-quicklinks { display: none; } .gc-desktop-only { display: block !important; max-width: 320px; } } /* ============ Command Palette (Ctrl+K) ============ */ .gc-cmdk-bg { position: fixed; inset: 0; background: rgba(10,20,16,.5); backdrop-filter: blur(3px); z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; } .gc-cmdk-bg.open { display: flex; animation: gcFadeIn .15s ease; } .gc-cmdk { background: var(--card); border-radius: 16px; width: 92%; max-width: 560px; max-height: 60vh; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; animation: gcSlideDown .18s cubic-bezier(.2,.9,.3,1.2); } .gc-cmdk-input { border: none; border-bottom: 1.5px solid var(--line); padding: 16px 18px; font-size: 15px; font-family: inherit; outline: none; width: 100%; box-sizing: border-box; background: var(--card); color: var(--text); } .gc-cmdk-list { overflow-y: auto; padding: 6px; } .gc-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); } .gc-cmdk-item .msi { font-size: 18px; color: var(--brand); } .gc-cmdk-item.sel { background: var(--paper); } .gc-cmdk-item .gc-cmdk-sec { margin-right: auto; font-size: 10.5px; font-weight: 700; color: #9aa8a1; } .gc-cmdk-empty { padding: 24px; text-align: center; color: #9aa8a1; font-size: 13px; } .gc-cmdk-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 10.5px; color: #9aa8a1; display: flex; gap: 14px; } @keyframes gcFadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes gcSlideDown { from { opacity: 0; transform: translateY(-10px) scale(.98) } to { opacity: 1; transform: none } } /* جدول داده‌محور برای صفحاتی که صریحاً جدول می‌خواهند (گزارش‌ها و غیره) */ .dtable-wrap { overflow-x: auto; } table.dtable { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); border-radius: var(--radius); overflow: hidden; } table.dtable th { background: var(--ink); color: #fff; font-weight: 800; padding: 10px 8px; text-align: right; white-space: nowrap; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep)) 1; } table.dtable td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } table.dtable tr:hover td { background: #f7f9f7; } table.dtable tr:last-child td { border-bottom: none; } table.dtable tr:nth-child(even) td { background: #fafbf9; } table.dtable tr:nth-child(even):hover td { background: #f2f5f0; } /* ═══ صفحه‌ی لودینگ سراسری — لوگوی تپنده تا لود کامل صفحه ═══ */ #gcLoader { position: fixed; inset: 0; z-index: 99999; background: #14161a; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; transition: opacity .35s ease, visibility .35s ease; } #gcLoader.gc-loader-hide { opacity: 0; visibility: hidden; pointer-events: none; } #gcLoader .gc-loader-logo { width: 76px; height: 76px; object-fit: contain; animation: gcPulse 1.4s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(230, 194, 0, .35)); } #gcLoader .gc-loader-ring { position: absolute; width: 108px; height: 108px; border-radius: 50%; border: 2px solid transparent; border-top-color: #e6c200; border-right-color: #e6c200; animation: gcSpin 1s linear infinite; opacity: .55; } #gcLoader .gc-loader-wrap { position: relative; display: flex; align-items: center; justify-content: center; } @keyframes gcPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .72; } } @keyframes gcSpin { to { transform: rotate(360deg); } } /* ============================================================ * ماشین‌حساب شناور — دکمه‌ی گرد پایین‌چپ در همه‌ی صفحات * ============================================================ */ .gc-calc-fab { position: fixed; bottom: 22px; left: 18px; z-index: 140; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; background: var(--ink); background-image: radial-gradient(circle at 30% 25%, rgba(227,154,64,.55), transparent 60%); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(20,22,26,.35), 0 2px 6px rgba(20,22,26,.2), inset 0 0 0 1.5px rgba(227,154,64,.4); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; } .gc-calc-fab .msi { font-size: 25px; color: var(--gold-light); } .gc-calc-fab:active { transform: scale(.9); } @media (hover:hover) { .gc-calc-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 24px rgba(20,22,26,.4), inset 0 0 0 1.5px rgba(244,209,101,.7); } } @media (min-width: 1024px) { .gc-calc-fab { left: 90px; bottom: 26px; } } .gc-calc-bg { position: fixed; inset: 0; background: rgba(15,17,20,.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 300; padding: 16px; } .gc-calc-bg.open { display: flex; animation: gcCalcFade .15s ease; } @keyframes gcCalcFade { from { opacity: 0; } to { opacity: 1; } } .gc-calc-panel { direction: ltr; width: 100%; max-width: 340px; background: var(--ink); border-radius: 22px; padding: 4px 16px 22px; box-shadow: 0 10px 40px rgba(0,0,0,.4); animation: gcCalcPop .18s cubic-bezier(.34,1.56,.64,1); } @keyframes gcCalcPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .gc-calc-head { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 800; padding: 14px 2px 10px; } .gc-calc-head .msi { font-size: 16px; color: var(--gold-light); } .gc-calc-close { margin-right: auto; background: rgba(255,255,255,.08); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 13px !important; } .gc-calc-expr { text-align: left; color: rgba(255,255,255,.4); font-size: 13px; min-height: 18px; padding: 0 4px; direction: ltr; } .gc-calc-display { text-align: left; color: #fff; font-size: 40px; font-weight: 800; letter-spacing: -.5px; padding: 4px 4px 18px; direction: ltr; overflow-x: auto; white-space: nowrap; } .gc-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .gc-calc-key { aspect-ratio: 1; border-radius: 16px; border: none; cursor: pointer; background: rgba(255,255,255,.07); color: #fff; font-size: 19px; font-weight: 700; transition: filter .1s, transform .05s; } .gc-calc-key:active { transform: scale(.93); filter: brightness(1.3); } .gc-calc-key.op { background: rgba(255,255,255,.12); color: var(--gold-light); font-size: 21px; } .gc-calc-key.eq { background: var(--gold-grad); color: var(--text); font-size: 21px; } .gc-calc-key.zero { grid-column: span 1; } /* ═══ قانون چاپ سراسری — هر صفحه‌ای که چاپ می‌شه، این عناصر شناور/UI هرگز نباید تو خروجی چاپ/PDF دیده بشن ═══ */ @media print { .gc-sidebar, .gc-sidebar-backdrop, .gc-calc-fab, .gc-calc-bg, #toast, #gcLoader, .modal-bg, .gc-hamburger, .gc-fxrate-fab, .gc-fxrate-bg { display: none !important; } } /* ============================================================ * دکمه‌ی شناور نرخ ارز — کنار ماشین‌حساب، فقط وقتی پکیج صرافی فعاله * ============================================================ */ .gc-fxrate-fab { position: fixed; bottom: 22px; left: 82px; z-index: 140; min-width: 54px; height: 54px; border-radius: 16px; border: none; cursor: pointer; padding: 0 10px; background: var(--ink); background-image: radial-gradient(circle at 30% 25%, rgba(64,180,154,.4), transparent 60%); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 6px 18px rgba(20,22,26,.35), 0 2px 6px rgba(20,22,26,.2), inset 0 0 0 1.5px rgba(64,180,154,.35); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; direction: ltr; } .gc-fxrate-fab.show { display: flex; } .gc-fxrate-fab .fx-line { font-size: 11px; font-weight: 800; color: #fff; line-height: 1.35; white-space: nowrap; } .gc-fxrate-fab .fx-line b { color: var(--gold-light); font-weight: 900; margin-left: 3px; } .gc-fxrate-fab:active { transform: scale(.92); } @media (hover:hover) { .gc-fxrate-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px rgba(20,22,26,.4), inset 0 0 0 1.5px rgba(64,180,154,.6); } } @media (min-width: 1024px) { .gc-fxrate-fab { left: 154px; bottom: 26px; } } .gc-fxrate-bg { position: fixed; inset: 0; background: rgba(15,17,20,.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 300; padding: 16px; } .gc-fxrate-bg.open { display: flex; animation: gcCalcFade .15s ease; } .gc-fxrate-panel { width: 100%; max-width: 340px; background: #fff; border-radius: 22px; padding: 16px 18px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.4); animation: gcCalcPop .18s cubic-bezier(.34,1.56,.64,1); } .gc-fxrate-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; font-weight: 900; font-size: 15px; } .gc-fxrate-head .msi { color: var(--brand); } .gc-fxrate-close { margin-right: auto; background: var(--card); border: none; color: var(--text); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 13px !important; } .gc-fxrate-cursel { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .gc-fxrate-cursel button { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; } .gc-fxrate-cursel button.on { background: var(--brand); color: #fff; border-color: var(--brand); } .gc-fxrate-row { margin-bottom: 12px; } .gc-fxrate-row label { display: block; font-size: 12.5px; font-weight: 700; color: #666; margin-bottom: 5px; } .gc-fxrate-row input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 18px; font-weight: 800; direction: ltr; text-align: left; box-sizing: border-box; } .gc-fxrate-row .fx-rial { font-size: 11px; color: #999; margin-top: 4px; } .gc-fxrate-save { width: 100%; margin-top: 4px; }