/* ══════════════ XAUBOT dashboard — Neomorphism ══════════════ Do theme: tarik (pishfarz) va roshan. Theme ba data-theme rui avaz mishe; agar chizi entekhab nashode bashe, tanzim-e sistem-e karbar estefade mishe (media query-ye payin-e file). Osul-e neomorphism: hameye satr-ha HAMUN rang-e pas-zamine ra darand va bartajastegi/foru-raftegi faghat ba do saye (roshan + tarik) sakhte mishe. Pas be jaye border az --nm-* estefade konid, na khat-e keshide. ═════════════════════════════════════════════════════════════ */ /* Font-e Vazirmatn (v33.003) — variable, mahalli (bedun-e CDN) ta offline ham kar kone */ @font-face{ font-family:'Vazirmatn'; src:url('/static/fonts/Vazirmatn-var.woff2') format('woff2-variations'), url('/static/fonts/Vazirmatn-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } /* Adad-haye Latin ba font-e Apple. unicode-range bais mishe IN face FAGHAT rui raghamha va alaem-e adadi (٪ / . , : + - $) bishine va baghi-ye matn hamun Vazirmatn bemune. src be tartib: agar dastgah Apple bashe (mac/iPhone/iPad) khod-e «SF Pro»-ye sistem estefade mishe; vagarna Inter-e mahalli (ke hamzad-e open-source-e SF-e) load mishe — 18KB, faghat raghamha, offline-safe. size-adjust:98% ertefa-e raghamha ro daghighan be Vazirmatn mizune. */ @font-face{ font-family:'XB Numerals'; src:local('SF Pro Display'),local('SF Pro Text'),local('SF Pro'), local('SFProDisplay-Regular'),local('SFProText-Regular'), local('.SF NS Display'),local('.SF NS Text'),local('.SFNSDisplay'), url('/static/fonts/xb-num.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; size-adjust:98%; unicode-range:U+0030-0039,U+002B,U+002C,U+002D,U+002E,U+002F,U+003A, U+0024,U+0025,U+00B0,U+00D7,U+2030,U+2212; } /* ── theme-e tarik (pishfarz) ── Kheyli tar-e amma «siah-e mordeh» nist: paye-ash yek zoghali-ye kami abi-ye. Do saye (--sh-d / --sh-l) faghat ±۱۲ vahed az paye fasele darand — hamin ekhtelaf-e kam neomorphism-e narm misaze; agar ziad-esh koni plastic mishe. */ :root,:root[data-theme="dark"]{ --bg:#161920; /* rang-e paye — hameye satr-ha hamin-e */ --sh-d:#090b10; /* saye-ye tarik */ --sh-l:#282f3f; /* saye-ye roshan */ --bg-deep:#0e1015; /* baraye nahiye-haye foru-rafte-ye por-kontrast (log) */ --veil:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%); --bg-top:#191d26; /* bala-ye safhe kami roshan-tar (nur az bala) */ --bg-bot:#12151c; /* paein kami tar-tar — omgh mide */ --glow-gold:rgba(255,200,97,.28); --rule:rgba(255,255,255,.07); /* khat-e jodakonande-ye narm */ --txt:#e9eef9; --muted:#9aa7be; --dim:#69748a; --gold:#ffc861; --gold2:#dba336; --green:#33d79a; --red:#ff6b84; --blue:#6ba2ff; --amber:#ffb840; --purple:#b48bff; --shade:rgba(2,4,8,.74); /* pas-zamine-ye modal/overlay */ --track:rgba(0,0,0,.42); /* masir-e khali-ye navar-ha */ --sheen:rgba(255,255,255,.055); /* khat-e nur-e bala-ye satr-haye bartajaste */ color-scheme:dark; } /* ── theme-e roshan ── */ :root[data-theme="light"]{ --bg:#e9edf4; --sh-d:#c3cad8; --sh-l:#ffffff; --bg-deep:#e2e7f0; --txt:#28313f; --muted:#5f6c81; --dim:#8593a8; --gold:#c98b0d; --gold2:#a97202; --green:#12a06a; --red:#dc3f5c; --blue:#2f6fe0; --amber:#c9820c; --purple:#7a4ee0; --shade:rgba(30,40,60,.42); --track:rgba(80,95,120,.16); --sheen:rgba(255,255,255,.6); --veil:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%); --bg-top:#eff2f8; --bg-bot:#e2e7f0; --glow-gold:rgba(201,139,13,.22); --rule:rgba(70,85,110,.18); color-scheme:light; } :root{ --radius:18px; --radius-sm:12px; --font:'XB Numerals','Vazirmatn','Segoe UI',Tahoma,system-ui,-apple-system,sans-serif; --mono:ui-monospace,'SF Mono','SFMono-Regular','Menlo','Consolas','Courier New',monospace; /* ── Meghyas-e andaze-ye font (standard, bedun-e adad-e ashari) ── ghablan 9/10/10.5/11/11.5/12/12.5/13/13.5/14/14.5/15/18/21/22/28 bud; nim-pixel-ha rendering ro tar mikonan. Hala faghat 9 pele: */ --fs-2xs:10px; /* barchasb-haye riz-e nemudar */ --fs-xs:11px; /* caption */ --fs-sm:12px; /* matn-e komaki */ --fs-md:13px; /* matn-e jadval / dokme */ --fs-base:14px; /* matn-e asli */ --fs-lg:16px; /* onvan / input-e mobile (>=16 ta iOS zoom nakone) */ --fs-xl:18px; /* KPI-ye mobile */ --fs-2xl:20px; /* KPI / gauge */ --fs-3xl:28px; /* onvan-e vorud */ /* saye-haye neomorphism. Layer-e sevvom (`inset 0 1px 0 var(--sheen)`) yek khat-e mu-ye nur rui labe-ye bala-ye har satr-e bartajaste mizare. Tu theme-e tar hamin yek khat-e bakhsh-e a'zam-e «tamiz o gerun» budan-e kar-e — bedun-e un, dar pas-zamine-ye tire saye-ha gom mishan va hame chi tokh mishe. */ --nm:6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l), inset 0 1px 0 var(--sheen); --nm-lg:10px 10px 26px var(--sh-d), -10px -10px 26px var(--sh-l), inset 0 1px 0 var(--sheen); --nm-sm:3px 3px 8px var(--sh-d), -3px -3px 8px var(--sh-l), inset 0 1px 0 var(--sheen); --nm-in:inset 5px 5px 12px var(--sh-d), inset -4px -4px 10px var(--sh-l); --nm-in-sm:inset 2px 2px 6px var(--sh-d), inset -2px -2px 6px var(--sh-l); } /* ── Icon-ha: Lucide 1.28.0، mahalli az /static/icons.svg ── */ .ico{ width:1.15em;height:1.15em;flex:none; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; vertical-align:-.2em; } .ico-lg{width:1.5em;height:1.5em} .ico-xl{width:2.4em;height:2.4em;stroke-width:1.7} button .ico,.sheet-item .ico,.mnav .ico{pointer-events:none} .login-logo .ico{width:56px;height:56px;stroke-width:1.5;color:var(--gold)} .brand-icon .ico{width:26px;height:26px;color:var(--gold)} .icon-btn .ico{width:17px;height:17px} .mnav .ico{width:19px;height:19px} .sec-title .ico,h3 .ico{color:var(--gold);width:1.3em;height:1.3em} label .ico,td .ico{width:1.05em;height:1.05em} .ico-green{color:var(--green)}.ico-red{color:var(--red)} .ico-amber{color:var(--amber)}.ico-gold{color:var(--gold)} *{box-sizing:border-box;margin:0;padding:0} /* form control-ha va onvan-ha az andaze-ye pishfarz-e morurgar (13.333px / 1.17em) estefade mikardan; hala hameshun rui hamun meghyas-e bala mishinan */ button,input,select,textarea{font-family:inherit;font-size:inherit} h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-lg);font-weight:600} h4{font-size:var(--fs-base);font-weight:600} /* chidman-e «app shell»: faghat .content scroll mishe, pas navar-e bala va navar-e paein-e mobile hichvaght jabeja nemishan (bug-e ghabli) */ html,body{height:100%;overflow:hidden} body{ background:var(--bg); color:var(--txt); font-family:var(--font); font-size:var(--fs-base); line-height:1.6; transition:background .25s,color .25s; } .hidden{display:none !important} .muted{color:var(--muted)} .small{font-size:var(--fs-sm)} /* ── Raghamha ────────────────────────────────────────────── tabular-nums = arz-e hameye raghamha barabar mishe, pas adad-ha hangam-e refresh nemi-parand va zir-e ham saf mishan. .num utility-ye omumi baraye har adadi-ye ke to markup miad. */ .num,.tbl .num,.kv .v,.kpi-val,.gauge-num,.price-item .val,.comp-val, input[type="number"],.field input,.field select,.tbl td,.tbl th{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; } /* adad-haye bozorg: tracking-e kamtar — hamun kari ke Apple to KPI-hash mikone */ .kpi-val,.gauge-num{letter-spacing:-.015em} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{ background:var(--bg);border-radius:6px; box-shadow:var(--nm-in-sm);border:2px solid var(--bg); } /* ═══ صفحه ورود ═══ */ .login-screen{ position:fixed;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 45%,var(--bg-bot) 100%); z-index:1000;padding:16px; } .login-card{ background:var(--bg);border:none;border-radius:26px; padding:38px 34px;width:min(400px,92vw);text-align:center; box-shadow:var(--nm-lg); } .login-logo{line-height:1;margin-bottom:4px} .login-card h1{font-size:var(--fs-3xl);letter-spacing:2px;color:var(--gold);margin:6px 0 2px} .login-card p{margin-bottom:22px;font-size:var(--fs-md);color:var(--muted)} .login-card label{display:block;text-align:right;font-size:var(--fs-sm);color:var(--muted);margin:12px 0 5px} .login-card input{ width:100%;padding:12px 14px;background:var(--bg);border:none; border-radius:12px;color:var(--txt);font-family:var(--font);font-size:var(--fs-base); box-shadow:var(--nm-in); } .login-card input:focus{outline:none;box-shadow:var(--nm-in),0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent)} .btn-block{width:100%;margin-top:20px;justify-content:center} .login-error{color:var(--red);font-size:var(--fs-md);margin-top:12px;min-height:18px} /* ═══ چیدمان ═══ */ .app{ display:flex;flex-direction:column; height:100dvh;max-height:100dvh;overflow:hidden; /* Vignette-e kheyli molayem: bala nur mikhore, paein tar mishe. Ekhtelaf-esh ba --bg faghat ~4 vahed-e, pas satr-haye neomorphism (ke daghighan --bg-and) hanuz yekdast be nazar mian, vali safhe tokh nemimune. */ background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 38%,var(--bg-bot) 100%); } .topbar{ flex:none;display:flex;align-items:center;gap:20px; padding:10px 18px;padding-top:calc(10px + env(safe-area-inset-top)); box-shadow:0 1px 0 var(--sheen), 0 10px 22px -14px var(--sh-d);z-index:50; } .brand{display:flex;align-items:center;gap:10px} .brand-icon{display:flex;align-items:center} .brand-name{font-weight:700;letter-spacing:1.5px;color:var(--gold);font-size:var(--fs-lg)} .brand-sub{font-size:var(--fs-xs);color:var(--muted)} .price-strip{display:flex;gap:14px;flex:1;justify-content:center;flex-wrap:wrap} .price-item{ display:flex;flex-direction:column;align-items:center;min-width:78px; padding:4px 12px;border-radius:14px;box-shadow:var(--nm-in-sm); } .price-item .lbl{font-size:var(--fs-xs);color:var(--muted)} .price-item .val{font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums;direction:ltr} .topbar-right{display:flex;align-items:center;gap:10px} .state-chip{ display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px; background:var(--bg);box-shadow:var(--nm-in-sm);font-size:var(--fs-sm); } .state-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)} .state-chip.on .dot{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite} .state-chip.warn .dot{background:var(--amber)} .state-chip.err .dot{background:var(--red)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .icon-btn{ position:relative;background:var(--bg);border:none;color:var(--txt); width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:var(--fs-lg); display:flex;align-items:center;justify-content:center; box-shadow:var(--nm-sm);transition:box-shadow .15s,color .15s; } .icon-btn:hover{color:var(--gold)} .icon-btn:active{box-shadow:var(--nm-in-sm)} .badge{ position:absolute;top:-3px;left:-3px;background:var(--red);color:#fff; font-size:var(--fs-2xs);min-width:17px;height:17px;border-radius:9px; display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600; } /* ═══ نوار کنترل ═══ */ .controlbar{ flex:none;display:flex;align-items:center;gap:14px;padding:11px 18px; flex-wrap:wrap;z-index:40; } .ctrl-group{display:flex;gap:9px} .ctrl-status{ flex:1;text-align:center;font-size:var(--fs-md);color:var(--muted); padding:7px 14px;background:var(--bg);border-radius:20px;box-shadow:var(--nm-in-sm); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* ═══ دکمه‌ها ═══ */ .btn{ display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:14px; border:none;cursor:pointer;font-family:var(--font);font-size:var(--fs-md); font-weight:500;text-decoration:none;background:var(--bg);color:var(--txt); box-shadow:var(--nm-sm);transition:box-shadow .15s,color .15s,transform .15s; } .btn:hover{box-shadow:var(--nm)} .btn:active,.btn.active{box-shadow:var(--nm-in-sm);transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--nm-in-sm)} .btn-sm{padding:6px 12px;font-size:var(--fs-sm);border-radius:11px} .btn-primary{color:var(--gold);font-weight:600;box-shadow:var(--nm-sm),0 0 20px -8px var(--glow-gold)} .btn-primary:hover{color:var(--gold2)} .btn-success{color:var(--green)} .btn-warn{color:var(--amber)} .btn-danger{color:var(--red)} .btn-ghost{color:var(--muted)} .btn-ghost:hover{color:var(--txt)} /* ═══ تب‌ها ═══ */ .tabs{ flex:none;display:flex;gap:8px;padding:4px 14px 12px; overflow-x:auto;overflow-y:hidden;z-index:30; /* saye-ye narm be samt-e payin: hess mide mohtava ZIR-e navar-e chrome scroll mishe */ box-shadow:0 8px 16px -10px var(--sh-d); } .tab{ background:var(--bg);border:none;color:var(--muted);border-radius:13px; padding:9px 16px;cursor:pointer;font-family:var(--font);font-size:var(--fs-md); white-space:nowrap;box-shadow:var(--nm-sm);transition:.15s; } .tab:hover{color:var(--txt)} .tab.active{color:var(--gold);box-shadow:var(--nm-in-sm),0 0 18px -7px var(--glow-gold);font-weight:600} /* ═══ محتوا (tanha nahiye-i ke scroll mishe) ═══ */ .content{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; /* padding-e bala rui .page-e ta navar-e sticky betune be labe-ye vaghei bechasbe (vagarna mohtava az bala-ye un rad mishe) */ padding:0 16px 16px;max-width:1560px;width:100%;margin:0 auto; } .page{display:none;animation:fade .22s;padding-top:16px} .page.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px;margin-bottom:16px} .card{ background:var(--bg);border:none;border-radius:var(--radius); padding:18px;margin-bottom:16px;box-shadow:var(--nm); /* pardeh-ye kheyli narm az bala: satr ro «nur-khorde» neshun mide bedun-e inke rang-e paye taghir kone (shart-e neomorphism hefz mishe) */ background-image:var(--veil); } .card-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-bottom:14px;flex-wrap:wrap;position:relative;padding-bottom:12px; } /* khat-e jodakonande-i ke az samt-e chap mahv mishe — sakhtar mide bedun-e inke mesl-e border-e khoshk be nazar biad */ .card-head::after{ content:'';position:absolute;inset-inline:0;bottom:0;height:1px; background:linear-gradient(to left,var(--rule),transparent 72%); } .card-head h3{font-size:var(--fs-base);font-weight:600;display:flex;align-items:center;gap:8px} .pill{ padding:5px 13px;border-radius:14px;background:var(--bg); box-shadow:var(--nm-in-sm);font-size:var(--fs-sm);color:var(--muted); } .pill.buy{color:var(--green)} .pill.sell{color:var(--red)} .pill.gold{color:var(--gold)} /* ═══ KPI ═══ */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px} .kpi{ background:var(--bg);border:none;border-radius:var(--radius); padding:15px 17px;box-shadow:var(--nm); background-image:var(--veil); } .kpi-lbl{font-size:var(--fs-sm);color:var(--muted);margin-bottom:5px} .kpi-val{font-size:var(--fs-2xl);font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;text-align:right} .kpi-val.pos{color:var(--green)} .kpi-val.neg{color:var(--red)} /* ═══ لیست کلید/مقدار ═══ */ .kv-list{display:flex;flex-direction:column;gap:7px} .kv{ display:flex;justify-content:space-between;gap:12px;padding:6px 2px;font-size:var(--fs-md); border-bottom:1px solid color-mix(in srgb,var(--sh-d) 55%,transparent); } .kv:last-child{border-bottom:none} .kv .k{color:var(--muted)} .kv .v{font-weight:500;direction:ltr;text-align:left;font-variant-numeric:tabular-nums} /* ═══ نوار پیشرفت ═══ */ .progress-wrap{margin-top:16px} .progress-lbl{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px} .progress{height:12px;background:var(--bg);border-radius:8px;overflow:hidden;box-shadow:var(--nm-in-sm)} .progress-bar{height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));width:0;transition:width .4s;border-radius:8px} /* ═══ گیج امتیاز ═══ */ .gauge-wrap{display:flex;align-items:center;gap:14px;margin-bottom:14px} .gauge{flex:1;height:16px;background:var(--bg);border-radius:9px;overflow:hidden;position:relative;box-shadow:var(--nm-in-sm)} .gauge-fill{height:100%;width:0;border-radius:9px;transition:width .4s,background .3s} .gauge-num{font-size:var(--fs-2xl);font-weight:700;min-width:64px;text-align:center;font-variant-numeric:tabular-nums} .block-reason{ margin-top:12px;padding:11px 14px;border-radius:var(--radius-sm);font-size:var(--fs-md); background:var(--bg);box-shadow:var(--nm-in-sm);color:var(--amber); } .block-reason:empty{display:none} /* ═══ جدول ═══ */ .table-wrap{overflow-x:auto;border-radius:var(--radius-sm)} .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md)} .tbl th{ text-align:right;padding:10px;color:var(--muted);font-weight:500;font-size:var(--fs-sm); border-bottom:1px solid color-mix(in srgb,var(--sh-d) 60%,transparent);white-space:nowrap; } .tbl td{ padding:10px;white-space:nowrap; border-bottom:1px solid color-mix(in srgb,var(--sh-d) 40%,transparent); } .tbl tbody tr:hover{background:color-mix(in srgb,var(--sh-l) 30%,transparent)} .tbl .num{direction:ltr;text-align:left;font-variant-numeric:tabular-nums} .tbl .empty{text-align:center;color:var(--muted);padding:22px} .pos-val{color:var(--green);font-weight:600} .neg-val{color:var(--red);font-weight:600} .tag{ padding:3px 10px;border-radius:11px;font-size:var(--fs-xs);display:inline-block; background:var(--bg);box-shadow:var(--nm-in-sm);color:var(--muted); } .tag.buy,.tag.tp{color:var(--green)} .tag.sell,.tag.sl{color:var(--red)} .tag.high{color:var(--red)} .tag.medium{color:var(--amber)} .tag.other,.tag.low{color:var(--muted)} /* ═══ مؤلفه‌ها ═══ */ .comp{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:var(--fs-md)} .comp-name{width:150px;color:var(--muted);flex-shrink:0} .comp-bar{flex:1;height:11px;background:var(--bg);border-radius:6px;position:relative;overflow:hidden;box-shadow:var(--nm-in-sm)} .comp-bar .mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--track)} .comp-bar .fill{position:absolute;top:0;bottom:0;border-radius:6px;transition:.3s} .comp-val{width:48px;text-align:left;direction:ltr;font-variant-numeric:tabular-nums} /* ═══ نمودار ساعت ═══ */ .hour-chart{display:flex;align-items:flex-end;gap:6px;height:180px;padding:10px 0} .hour-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end} .hour-bar .bar{ width:100%;border-radius:6px 6px 0 0;min-height:3px;transition:height .4s; position:relative;cursor:default; } .hour-bar .lbl{font-size:var(--fs-xs);color:var(--muted)} .hour-bar .sc{font-size:var(--fs-2xs);color:var(--txt);opacity:.75} .chart{height:230px;position:relative} .chart svg{width:100%;height:100%} /* ═══ فرم تنظیمات ═══ */ /* navar-e «zakhire/bazkhani»: be labe-ye bala-ye nahiye-ye scroll michasbe. margin-e manfi lazem-e ta rui padding-e .content ham keshide beshe, vagarna mohtava az kenaresh rad mishe va be nazar miad vasat-e safhe shenavar-e. */ .settings-actions{ display:flex;align-items:center;gap:10px; position:sticky;top:0;z-index:10; margin:-16px -16px 16px;padding:16px; background:var(--bg);box-shadow:0 10px 14px -12px var(--sh-d); } .save-hint{font-size:var(--fs-sm);color:var(--green)} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .field{display:flex;flex-direction:column;gap:6px} .field label{font-size:var(--fs-sm);color:var(--muted);display:flex;align-items:center;gap:6px} .field .hint{font-size:var(--fs-xs);color:var(--dim)} .field input,.field select,.field textarea{ padding:10px 13px;background:var(--bg);border:none;border-radius:var(--radius-sm); color:var(--txt);font-family:var(--font);font-size:var(--fs-md);direction:ltr;text-align:left; box-shadow:var(--nm-in-sm); } .field input:not([type="checkbox"]):focus,.field select:focus,.field textarea:focus{ outline:none;box-shadow:var(--nm-in),0 0 0 2px color-mix(in srgb,var(--gold) 40%,transparent); } /* ═══ Toggle (switch) ═══════════════════════════════════════════ Hameye checkbox-haye barname be shekl-e kelid-e roshan/khamush dar miyan. Kar ba khod-e + appearance:none anjam mishe (na div-e ja'li), pas: • markup semantic mimune (label ↔ input ba for/wrap), • ba keyboard (Tab + Space) kar mikone, • ba role="switch" screen-reader «roshan/khamush» mikhune, • hich JS-i lazem nist — .checked hamun ghablie. Andaze 44×26 = hadd-e aghall-e nahiye-ye lams-e tosiye-shode. Jaygah-e dastgire ba inset-inline-start-e ta tuye RTL khodkar ayene beshe. ══════════════════════════════════════════════════ */ input[type="checkbox"], .field input[type="checkbox"], .check input[type="checkbox"]{ appearance:none;-webkit-appearance:none; position:relative;flex:none;cursor:pointer; width:44px;height:26px;min-width:44px;padding:0;margin:0; border:none;border-radius:13px; background:var(--bg);box-shadow:var(--nm-in-sm); transition:background .22s ease,box-shadow .22s ease; } input[type="checkbox"]::after{ content:'';position:absolute;top:3px;inset-inline-start:3px; width:20px;height:20px;border-radius:50%; background:var(--bg);box-shadow:var(--nm-sm); transition:inset-inline-start .22s cubic-bezier(.3,.85,.4,1), background .22s ease,transform .12s ease; } input[type="checkbox"]:checked, .field input[type="checkbox"]:checked{ background:linear-gradient(145deg,var(--gold2),var(--gold)); box-shadow:inset 2px 2px 5px color-mix(in srgb,var(--sh-d) 55%,transparent), inset -2px -2px 5px color-mix(in srgb,#fff 22%,transparent); } input[type="checkbox"]:checked::after{ inset-inline-start:21px; /* 44 − 20 − 3 */ background:#fff; box-shadow:2px 2px 5px rgba(0,0,0,.28); } input[type="checkbox"]:hover:not(:disabled){box-shadow:var(--nm-in)} input[type="checkbox"]:hover:not(:disabled):checked{ box-shadow:inset 3px 3px 7px color-mix(in srgb,var(--sh-d) 60%,transparent), inset -3px -3px 7px color-mix(in srgb,#fff 25%,transparent); } input[type="checkbox"]:active::after{transform:scale(.9)} input[type="checkbox"]:focus-visible{ outline:none; box-shadow:var(--nm-in-sm),0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent); } input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed} /* ── satr-e «barchasb ... kelid» (chidman-e monazzam) ── */ .check{display:flex;align-items:center;gap:10px;font-size:var(--fs-md);margin-top:12px;cursor:pointer} .check-row{justify-content:space-between;width:100%;max-width:560px;gap:14px;margin-top:0} .check-row>span{flex:1} /* har kelid tuye yek «chip»-e foru-rafte mishine ta satr-haye tanzimat ham-andaze va monazzam beshan (mesl-e ja'be-haye .mob-opt) */ .field-switch{ gap:4px;justify-content:center;padding:9px 13px; border-radius:var(--radius-sm);background:var(--bg);box-shadow:var(--nm-in-sm); } .field-switch .switch-row{ display:flex;align-items:center;justify-content:space-between;gap:14px; cursor:pointer;padding:0;font-size:var(--fs-md);color:var(--txt); min-height:30px;max-width:480px; } .field-switch .switch-row .switch-lbl{flex:1;color:var(--txt);font-size:var(--fs-md)} .field-switch .hint{margin-top:1px} .select-sm{ padding:7px 11px;background:var(--bg);border:none;border-radius:11px; color:var(--txt);font-family:var(--font);font-size:var(--fs-sm);box-shadow:var(--nm-sm); } /* ═══ لاگ ═══ */ .logbox{ background:var(--bg-deep);border:none;border-radius:var(--radius-sm);padding:14px; max-height:620px;overflow:auto;font-family:var(--mono); box-shadow:var(--nm-in); font-size:var(--fs-sm);line-height:1.75;direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-word; } /* har khat-e log ye run-e mostaghel-e bidi-ye; jahat-esh ba attribute-e dir tu app.js ta'in mishe (khat-e Farsi RTL, khat-e Latin LTR) */ .logbox>span{unicode-bidi:isolate} /* Farsi tu font-e mono bad ja mioftad (har harf ye khune-ye sabet migire va harf-haye na-payvand fasele-dar be nazar mian) → khat-haye Farsi ba font-e UI */ .logbox>span[dir="rtl"]{font-family:var(--font)} .log-INFO{color:var(--muted)} .log-WARNING{color:var(--amber)} .log-ERROR{color:var(--red)} .log-DEBUG{color:var(--dim)} /* ═══ کشو اعلان ═══ */ .drawer{ position:fixed;top:0;left:0;bottom:0;width:min(420px,92vw);background:var(--bg); border:none;transform:translateX(-105%);transition:transform .26s; z-index:200;display:flex;flex-direction:column;box-shadow:8px 0 34px var(--sh-d); } .drawer.open{transform:translateX(0)} .drawer-head{ display:flex;align-items:center;justify-content:space-between;padding:15px 16px; box-shadow:var(--nm-sm);z-index:2; } .drawer-head>div{display:flex;gap:8px;align-items:center} .drawer-body{flex:1;overflow-y:auto;padding:12px} .notif{ padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg);margin-bottom:10px; box-shadow:var(--nm-sm);border-right:3px solid var(--muted); } .notif.unread{box-shadow:var(--nm)} .notif.success{border-right-color:var(--green)} .notif.warning{border-right-color:var(--amber)} .notif.error{border-right-color:var(--red)} .notif.info{border-right-color:var(--blue)} .notif-title{font-size:var(--fs-md);font-weight:600;margin-bottom:3px} .notif-body{font-size:var(--fs-sm);color:var(--muted);white-space:pre-wrap} .notif-time{font-size:var(--fs-xs);color:var(--dim);margin-top:5px} .overlay{ position:fixed;inset:0;background:var(--shade);opacity:0;pointer-events:none; transition:.22s;z-index:150; } .overlay.show{opacity:1;pointer-events:auto} /* ═══ مودال ═══ */ .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:300;background:var(--shade);padding:14px} .modal.open{display:flex} .modal-card{ background:var(--bg);border:none;border-radius:22px; width:min(620px,94vw);max-height:90vh;overflow:auto;box-shadow:var(--nm-lg); } .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;box-shadow:var(--nm-sm);position:sticky;top:0;background:var(--bg);z-index:2} .modal-body{padding:18px} .modal-foot{display:flex;justify-content:space-between;gap:10px;padding:16px 18px} .modal-error{ color:var(--red);font-size:var(--fs-md);margin-top:12px;min-height:18px; white-space:pre-wrap;line-height:1.9; } .modal-error:not(:empty){ background:var(--bg);box-shadow:var(--nm-in-sm); border-radius:var(--radius-sm);padding:11px 13px; } .diag-box{ margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg); box-shadow:var(--nm-in-sm);font-size:var(--fs-sm);white-space:pre-wrap;line-height:1.9; } .diag-box:empty{display:none} .acct-status{ padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg);margin-bottom:16px; font-size:var(--fs-md);box-shadow:var(--nm-in-sm); } /* ═══ توست ═══ */ #toasts{position:fixed;bottom:18px;left:18px;display:flex;flex-direction:column;gap:10px;z-index:400} .toast{ padding:12px 17px;border-radius:var(--radius-sm);background:var(--bg);border:none; font-size:var(--fs-md);box-shadow:var(--nm-lg);animation:slidein .25s;max-width:400px; } .toast.success{border-right:3px solid var(--green)} .toast.error{border-right:3px solid var(--red)} .toast.warning{border-right:3px solid var(--amber)} @keyframes slidein{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}} /* ═══ دسترسی از موبایل ═══ */ .mob-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:18px} .mob-col{display:flex;flex-direction:column;gap:14px} .mob-opt{padding:14px;background:var(--bg);border:none;border-radius:var(--radius-sm);box-shadow:var(--nm-in-sm)} .mob-opt .check{margin-top:0} .mob-opt .hint{font-size:var(--fs-xs);color:var(--dim);margin-top:7px;line-height:1.9} .mono{font-family:var(--mono);direction:ltr;unicode-bidi:embed;color:var(--txt)} /* tike-ye matn-e Latin dakhel-e jomle-ye Farsi: isolate mizare ta bidi tartib-e kalamat/tarikh ro barakas nakone (rang ro dast nemizane) */ .ltr{direction:ltr;unicode-bidi:isolate} .mob-warn{ padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:var(--fs-md);line-height:1.9; background:var(--bg);box-shadow:var(--nm-in-sm);color:var(--amber); } .tunnel-box{margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--sh-d) 50%,transparent)} .tunnel-actions{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap} .tunnel-log{max-height:190px;margin-top:11px;font-size:var(--fs-xs)} .qr-card{ background:var(--bg);border:none;border-radius:var(--radius);padding:16px; display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center; box-shadow:var(--nm); } .qr-title{font-size:var(--fs-sm);color:var(--muted)} .qr-holder{ width:190px;height:190px;background:#fff;border-radius:14px;padding:8px; display:flex;align-items:center;justify-content:center;box-shadow:var(--nm-in-sm); } .qr-holder svg{width:100%;height:100%;display:block} .qr-holder:has(.muted){background:var(--bg)} .qr-url{font-size:var(--fs-sm);word-break:break-all;color:var(--gold);max-width:230px} .qr-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center} .pwa-tip{ font-size:var(--fs-sm);color:var(--muted);line-height:2;padding:12px 14px; background:var(--bg);box-shadow:var(--nm-in-sm);border-radius:var(--radius-sm); } .login-remember{justify-content:flex-start;font-size:var(--fs-md);color:var(--muted)} /* ═══ بنر شبیه‌ساز ═══ */ .paper-banner{ padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:var(--fs-md);line-height:2; background:var(--bg);box-shadow:var(--nm-in-sm);color:var(--amber); } .paper-banner b{color:var(--amber)} /* ═══ انتخاب حالت اجرا (ویندوز / ابری) ═══ */ .mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:16px} .mode-btn{ display:flex;flex-direction:column;gap:4px;text-align:right;cursor:pointer; background:var(--bg);border:none;border-radius:var(--radius-sm);padding:13px 15px; color:var(--muted);font-family:var(--font);box-shadow:var(--nm-sm);transition:.15s; } .mode-btn b{font-size:var(--fs-md);color:var(--txt);font-weight:600;display:flex;align-items:center;gap:7px} .mode-btn span{font-size:var(--fs-xs);line-height:1.7} .mode-btn:hover{box-shadow:var(--nm)} .mode-btn.active{box-shadow:var(--nm-in-sm)} .mode-btn.active b{color:var(--gold)} .ma-provision{ margin-top:14px;padding:13px 15px;background:var(--bg); border:none;border-radius:var(--radius-sm);box-shadow:var(--nm-in-sm); } .ma-provision summary{cursor:pointer;font-size:var(--fs-md);color:var(--gold)} .ma-provision .hint{font-size:var(--fs-xs);color:var(--dim);line-height:1.9} /* ═══ نوار پایین موبایل ═══ */ .mobile-nav{display:none} .sheet{ position:fixed;inset:0;z-index:320;background:var(--shade); display:none;align-items:flex-end; } .sheet.open{display:flex} .sheet-card{ width:100%;background:var(--bg);border:none; border-radius:24px 24px 0 0; padding:12px 12px max(12px,calc(env(safe-area-inset-bottom,0px) - 6px)); animation:sheetup .22s;box-shadow:0 -8px 30px var(--sh-d); } @keyframes sheetup{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}} .sheet-head{font-size:var(--fs-sm);color:var(--muted);padding:8px 10px 12px;text-align:center} .sheet-item{ display:flex;align-items:center;gap:10px;width:100%;text-align:right; background:var(--bg);border:none;color:var(--txt);font-family:var(--font);font-size:var(--fs-base); padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:10px;cursor:pointer; box-shadow:var(--nm-sm); } .sheet-item:active{box-shadow:var(--nm-in-sm)} .sheet-item.danger{color:var(--red)} @media(max-width:820px){ /* flex:0 0 100% lazem ast, vagarna flex:1 (basis 0) nemizare be khat-e ba'd bere */ .price-strip{order:3;flex:0 0 100%;width:100%;justify-content:space-around} .topbar{flex-wrap:wrap} .content{padding:0 10px 10px} .page{padding-top:10px} .comp-name{width:105px;font-size:var(--fs-sm)} .mob-grid{grid-template-columns:1fr} .mob-qr-col{order:-1} .qr-card{align-self:center;width:100%} } @media(max-width:620px){ body{font-size:var(--fs-base)} .topbar{gap:10px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))} .brand-sub{display:none} .price-strip{gap:7px;margin-top:4px} .price-item{min-width:0;flex:1;padding:3px 6px} .price-item .val{font-size:var(--fs-md)} .price-item .lbl{font-size:var(--fs-2xs)} /* نوار کنترل: دکمه‌های بزرگ و قابل لمس */ .controlbar{padding:8px 10px;gap:8px} .ctrl-group{flex:1;gap:7px} .ctrl-group .btn{flex:1;justify-content:center;padding:11px 6px;font-size:var(--fs-md)} .ctrl-status{order:3;width:100%;flex:none;font-size:var(--fs-sm)} .controlbar .ctrl-group:last-child{flex:none;width:100%} .controlbar .ctrl-group:last-child .btn{width:100%} .tabs{display:none} /* جایش نوار پایین می‌آید */ .content{padding:0 10px 14px;max-width:100%} .page{padding-top:10px} .kpi-row{grid-template-columns:repeat(2,1fr);gap:11px} .kpi{padding:13px 14px} .kpi-val{font-size:var(--fs-xl)} /* minmax(0,…) : ejaze mide jadval-e pahn dakhel-e card jam' beshe (na inke card ra pahn kone) */ .grid-2{grid-template-columns:minmax(0,1fr);gap:12px} .card,.table-wrap{min-width:0;max-width:100%} .card{padding:15px;border-radius:16px} .form-grid{grid-template-columns:1fr} .field input,.field select{padding:12px 13px;font-size:var(--fs-lg)} /* 16px = iOS zoom nemikone (15 kafi nabud) */ .btn{padding:11px 15px} .settings-actions{margin:-10px -10px 12px;padding:10px} .settings-actions .btn{flex:1;justify-content:center} .hour-chart{height:150px;gap:3px} .hour-bar .lbl{font-size:var(--fs-2xs)} .hour-bar .sc{display:none} .comp-name{width:88px;font-size:var(--fs-xs)} .tbl{font-size:var(--fs-sm)} .tbl th,.tbl td{padding:8px 7px} .logbox{max-height:60vh;font-size:var(--fs-xs)} .drawer{width:100%} .modal{align-items:flex-end;padding:0} .modal-card{width:100%;max-height:92vh;border-radius:22px 22px 0 0} .modal-foot{flex-wrap:wrap;gap:8px;padding-bottom:calc(16px + env(safe-area-inset-bottom))} .modal-foot .btn{flex:1;justify-content:center} .mode-switch{grid-template-columns:1fr} .mode-btn{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap} .mode-btn span{flex:1 0 100%} #toasts{bottom:18px;left:10px;right:10px} .toast{max-width:none} /* navar-e paein: ozv-e adi-ye chidman-e — na fixed va na sticky — pas ba scroll asan tekun nemikhore */ .mobile-nav{ /* order bala = akharin ozv-e chidman, pas hamishe ta-e safhe mimune (dar HTML ghabl az .content amade) */ order:9; flex:none;display:flex;max-width:100vw;z-index:120; background:var(--bg);box-shadow:0 -4px 12px var(--sh-d); /* Halat-e webapp (standalone): safhe ta labe-ye paein keshide mishe (viewport-fit=cover) va sistem yek navar-e ima/dokme un payin dare. Ghablan 8px + KOL-e un fasele mizashtim → navar kheyli bala mi-oftad. Hala --sab-inset (pishfarz 10px) az un kam mishe, pas navar miyad payin vali dokme-ha hanuz zir-e navar-e sistem gir nemikonan. Agar baz ham ziad/kam bud, faghat hamin adad ro avaz konid. */ --sab:env(safe-area-inset-bottom,0px); --sab-inset:10px; padding:6px 6px max(4px,calc(var(--sab) - var(--sab-inset))); gap:6px; } .mnav{ flex:1;background:var(--bg);border:none;color:var(--muted);font-family:var(--font); font-size:var(--fs-xs);display:flex;flex-direction:column;align-items:center;gap:3px; padding:7px 2px;cursor:pointer;border-radius:14px;transition:.15s; } .mnav.active{color:var(--gold);box-shadow:var(--nm-in-sm)} .qr-holder{width:min(230px,64vw);height:min(230px,64vw)} } /* agar karbar theme-i entekhab nakarde bashe, az tanzim-e sistem peyravi kon */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#e9edf4; --sh-d:#c3cad8; --sh-l:#ffffff; --bg-deep:#e2e7f0; --txt:#28313f; --muted:#5f6c81; --dim:#8593a8; --gold:#c98b0d; --gold2:#a97202; --green:#12a06a; --red:#dc3f5c; --blue:#2f6fe0; --amber:#c9820c; --purple:#7a4ee0; --shade:rgba(30,40,60,.42); --track:rgba(80,95,120,.16); --sheen:rgba(255,255,255,.6); --veil:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%); --bg-top:#eff2f8; --bg-bot:#e2e7f0; --glow-gold:rgba(201,139,13,.22); --rule:rgba(70,85,110,.18); color-scheme:light; } } /* ══════════════ Scanner-e chand-timeframe ══════════════ Rang-e khane-ha ba color-mix rui --bg sakhte mishe, na rang-e sabet — in juri tu har do theme (tar/roshan) hamun shedat ra dare va zamine-ye neomorphism ra kharab nemikone. */ /* ── kart-e hokm ── */ .verdict-card{display:flex;flex-direction:column;gap:14px} .vd-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .vd-badge{ display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:16px; font-size:var(--fs-xl);font-weight:700;background:var(--bg);box-shadow:var(--nm) } .vd-badge .ico{width:22px;height:22px} .vd-buy{color:var(--green)} .vd-sell{color:var(--red)} .vd-wait{color:var(--muted)} .vd-note{color:var(--muted);font-size:var(--fs-sm);line-height:1.7} .vd-bars{display:flex;flex-direction:column;gap:9px} .vd-bar{display:flex;align-items:center;gap:10px} .vd-bar .lbl{min-width:74px;font-size:var(--fs-sm);color:var(--muted)} .vd-bar .track{ flex:1;height:12px;border-radius:8px;background:var(--track); box-shadow:var(--nm-in-sm);overflow:hidden } .vd-bar .fill{height:100%;border-radius:8px;transition:width .35s ease} .vd-bar .fill.buy{background:linear-gradient(90deg,color-mix(in srgb,var(--green) 55%,transparent),var(--green))} .vd-bar .fill.sell{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 55%,transparent),var(--red))} .vd-bar .val{min-width:52px;text-align:left;font-size:var(--fs-sm)} /* khat-e astane rui navar */ .vd-bar .track{position:relative} .vd-bar .need{ position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--gold); border-radius:2px;opacity:.85 } /* ── matris ── */ .mtx{min-width:660px} .mtx th,.mtx td{text-align:center;padding:7px 6px;font-size:var(--fs-sm)} .mtx th:first-child,.mtx td:first-child{text-align:right;white-space:nowrap} .mtx td.cell{cursor:pointer;border-radius:10px;transition:box-shadow .15s} .mtx td.cell:hover{box-shadow:var(--nm-in-sm)} .mtx td.cell.sel{box-shadow:var(--nm-in-sm),0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent)} .mtx .z-buy{background:color-mix(in srgb,var(--green) 22%,var(--bg));color:var(--txt)} .mtx .z-sell{background:color-mix(in srgb,var(--red) 22%,var(--bg));color:var(--txt)} .mtx .z-mid{color:var(--muted)} .mtx .z-na{color:var(--dim)} .mtx .ind-name{display:flex;flex-direction:column;gap:2px;align-items:flex-end} .mtx .ind-name b{font-weight:600} .mtx .ind-name span{font-size:var(--fs-2xs);color:var(--dim)} .mtx td.tally{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap} .mtx tr.off{opacity:.42} .mtx-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:var(--fs-xs);color:var(--muted)} .mtx-legend span{display:inline-flex;align-items:center;gap:7px} .sw{width:14px;height:14px;border-radius:5px;display:inline-block;box-shadow:var(--nm-in-sm)} .sw-buy{background:color-mix(in srgb,var(--green) 40%,var(--bg))} .sw-sell{background:color-mix(in srgb,var(--red) 40%,var(--bg))} .sw-mid{background:var(--bg)} /* ── entekhab-e indicator/timeframe ── */ .chart-picks{display:flex;flex-direction:column;gap:9px;margin-bottom:14px} .pick-row{display:flex;gap:7px;flex-wrap:wrap} .pick{ padding:6px 13px;border-radius:12px;background:var(--bg);box-shadow:var(--nm-sm); font-size:var(--fs-sm);cursor:pointer;color:var(--muted); transition:box-shadow .15s,color .15s } .pick:hover{box-shadow:var(--nm)} .pick.on{box-shadow:var(--nm-in-sm);color:var(--gold)} /* ── nemudar-e indicator ── */ .ind-chart{ width:100%;height:260px;border-radius:var(--radius-sm); background:var(--bg);box-shadow:var(--nm-in);padding:6px;margin-bottom:12px } .ind-chart svg{width:100%;height:100%;display:block;overflow:visible} /* ── tanzimat ── */ .mtf-row{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 4px;border-bottom:1px solid var(--rule) } .mtf-row:last-child{border-bottom:none} .mtf-row .name{min-width:150px;font-size:var(--fs-md)} .mtf-row .name small{display:block;color:var(--dim);font-size:var(--fs-2xs)} .mtf-num{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted)} .mtf-num input{ width:78px;padding:6px 9px;border-radius:10px;background:var(--bg); box-shadow:var(--nm-in-sm);border:none;color:var(--txt);font-family:var(--font); font-size:var(--fs-sm);text-align:center } .mtf-num input:focus{outline:none;box-shadow:var(--nm-in-sm),0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent)} .mtf-tfs{display:flex;gap:6px;flex-wrap:wrap;padding:12px 4px} .card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} @media (max-width:640px){ .ind-chart{height:210px} .mtf-row .name{min-width:100%} .vd-badge{font-size:var(--fs-lg);padding:8px 15px} }