/* ══════════════════════════════════════════════════════════════════ GymNex SALES panel — premium theme. Rang, font, spacing ani icon SAGLA admin_public shi ek-ch aahe (var-names suddha tich) — mhanje ha panel GymNex cha-ch bhaag vaatto. Fakta don farak muddam: · card radius 18px (admin 16) — ha panel jasta "app" sarkha aahe · dave-kade sidebar (admin madhe varti tabs) Emoji nahit — line icons (#i-*). THEME: dark default. Light sathi + var .light class lagto (JS toggle karto, localStorage madhe rahto). Pratyek navin rang ITHE token mhanun taka — thet hex UI madhe LIHU NAKA, nahitar light theme madhe to rang tasach rahto ani ugach ughada disto. ══════════════════════════════════════════════════════════════════ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #08080A; --card: #0F0F13; --card2: #15151B; --border: rgba(255, 255, 255, 0.075); --border2: rgba(255, 255, 255, 0.04); --ink: #F3F2EF; --ink2: #8E8E98; --ink3: #5E5E68; --accent: #F0B851; --accent-2: #D8912A; --accent-dim: rgba(240, 184, 81, 0.12); --accent-line: rgba(240, 184, 81, 0.28); --grad: linear-gradient(135deg, #F6C868, #D8871E); --on-accent: #1B1103; --chart: #F0B851; --good: #3ECF8E; --good-dim: rgba(62, 207, 142, 0.13); --warn: #F0B851; --warn-dim: rgba(240, 184, 81, 0.13); --bad: #F2555A; --bad-dim: rgba(242, 85, 90, 0.13); --free: #5E5E68; --free-dim: rgba(255, 255, 255, 0.055); --grid: rgba(255, 255, 255, 0.06); --axis: rgba(255, 255, 255, 0.14); --glass: rgba(8, 8, 10, 0.72); --side: rgba(13, 13, 17, 0.92); --card-shadow: 0 1px 0 rgba(255,255,255,.02) inset; --pop-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85), 0 2px 8px rgba(0,0,0,.4); --surface: linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); --radius: 18px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.22, .8, .28, 1); } /* ── Light theme — swachchha pandhre card, halka rakhadi page, tich orange chhat. html ANI body doghanvar lagte (JS donhi la lavto) — html var nasla tar page chya khali dark patti disat rahte. */ html.light, body.light { --bg: #F7F7F5; --card: #FFFFFF; --card2: #FAFAF9; --border: rgba(0, 0, 0, 0.09); --border2: rgba(0, 0, 0, 0.055); --ink: #16161A; --ink2: #5C5C66; --ink3: #8A8A94; --accent: #B0761A; --accent-2: #8F5D10; --accent-dim: rgba(176, 118, 26, 0.10); --accent-line: rgba(176, 118, 26, 0.26); --grad: linear-gradient(135deg, #E2A63C, #B4761A); --on-accent: #2A1B02; --chart: #C08624; --good: #158A55; --good-dim: rgba(21, 138, 85, 0.10); --warn: #9A6B12; --warn-dim: rgba(154, 107, 18, 0.11); --bad: #C6363C; --bad-dim: rgba(198, 54, 60, 0.09); --free: #8A8A94; --free-dim: rgba(0, 0, 0, 0.045); --grid: rgba(0, 0, 0, 0.06); --axis: rgba(0, 0, 0, 0.16); --glass: rgba(247, 247, 245, 0.8); --side: rgba(255, 255, 255, 0.92); --card-shadow: 0 1px 2px rgba(20, 20, 24, 0.04), 0 8px 24px rgba(20, 20, 24, 0.05); --pop-shadow: 0 20px 48px -20px rgba(20, 20, 24, .28), 0 2px 8px rgba(20,20,24,.06); --surface: linear-gradient(165deg, rgba(0,0,0,.014), rgba(0,0,0,.004)); } html, body { background: var(--bg); color: var(--ink); font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: -0.006em; min-height: 100%; -webkit-font-smoothing: antialiased; } body { background-image: radial-gradient(ellipse 70% 40% at 50% -10%, rgba(240,184,81,.07), transparent 62%); background-repeat: no-repeat; background-attachment: fixed; } html.light body { background-image: radial-gradient(ellipse 70% 40% at 50% -10%, rgba(176,118,26,.06), transparent 62%); } /* Theme badalla ki sagla panel EK-DAM badalto — pratyek surface la to-ch transition, mhanje kuthla-hi bhaag mage rahat nahi. */ body, .card, .tile, .login-card, .modal, .topbar, .sidebar, .menu, input, select, textarea, .toolbar, .lb-row, .tl-row { transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; } .card, .tile, .login-card, .modal { box-shadow: var(--card-shadow); } .hidden { display: none !important; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } ::selection { background: var(--accent-dim); } a { color: var(--accent); } /* Aakde ek-mekachya khali seat basat — tabular figures. */ .t-value, td, .kbig, .lb-earn, .tgt-pct { font-variant-numeric: tabular-nums; } /* ── Icons ── */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ico-lg { width: 19px; height: 19px; stroke-width: 1.5; } /* ── Brand ── */ .brand { font-size: 22px; font-weight: 700; letter-spacing: -0.035em; } .brand.sm { font-size: 17px; } .brand-gym { color: var(--ink); } .brand-nex { color: var(--accent); } .brand-tag { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--accent); letter-spacing: .18em; vertical-align: middle; margin-left: 8px; border: 1px solid var(--accent-line); border-radius: 6px; padding: 3px 7px; } /* ── Login ── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { background: var(--card); background-image: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 40px 32px; width: 100%; max-width: 400px; text-align: center; position: relative; overflow: hidden; } .login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); } .login-sub { color: var(--ink3); font-size: 13px; margin: 8px 0 26px; } .login-card input { width: 100%; background: var(--card2); border: 1px solid var(--border); border-radius: 12px; color: var(--ink); padding: 13px 14px; font-size: 15px; margin-bottom: 10px; outline: none; } .login-card input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-dim); } .login-card input::placeholder { color: var(--ink3); } /* Mobile no — dial code davi-kade chiktavlela, mhanje "+91 nantar 10 aakde" he sangaychi garaj-ch padat nahi. */ .phone-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; } .phone-dial { display: flex; align-items: center; padding: 0 13px; font-size: 14.5px; color: var(--ink2); background: var(--card2); border: 1px solid var(--border); border-radius: 12px; font-family: var(--mono); letter-spacing: -0.02em; } .phone-row input { margin-bottom: 0; letter-spacing: .08em; } .login-err { background: var(--bad-dim); color: var(--bad); border-radius: 11px; padding: 11px 13px; font-size: 13px; margin-top: 14px; line-height: 1.5; } .link-btn { background: none; border: none; color: var(--ink3); font-size: 12.5px; margin-top: 14px; text-decoration: underline; text-underline-offset: 3px; } .link-btn:hover { color: var(--accent); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 11px; padding: 9px 15px; font-size: 13.5px; font-weight: 550; letter-spacing: -0.01em; transition: background .2s, border-color .2s, color .2s, transform .12s, box-shadow .25s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--grad); color: var(--on-accent); font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px -12px rgba(240,184,81,.8); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 28px -12px rgba(240,184,81,1); } .btn-ghost { background: transparent; color: var(--ink2); border-color: var(--border); } .btn-ghost:hover { color: var(--ink); border-color: var(--accent-line); background: var(--accent-dim); } .btn-danger { background: var(--bad-dim); color: var(--bad); } .btn-danger:hover { border-color: var(--bad); } .btn-good { background: var(--good-dim); color: var(--good); } .btn-good:hover { border-color: var(--good); } .btn-block { width: 100%; padding: 12px 16px; font-size: 14.5px; } .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; } .btn-sm .ico { width: 14px; height: 14px; } .btn-icon { padding: 9px; width: 36px; } /* ── Shell: sidebar + main ── */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 232px; flex: none; position: sticky; top: 0; height: 100vh; background: var(--side); border-right: 1px solid var(--border2); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); padding: 18px 12px 12px; display: flex; flex-direction: column; gap: 6px; z-index: 30; transition: width .22s var(--ease), transform .22s var(--ease); } .side-brand { display: flex; align-items: center; gap: 2px; padding: 4px 10px 16px; white-space: nowrap; overflow: hidden; } #sideNav { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; background: transparent; border: 1px solid transparent; color: var(--ink3); padding: 9px 11px; border-radius: 11px; font-size: 13.5px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; transition: color .2s, background .2s, border-color .2s, transform .14s var(--ease); } .nav-item:hover { color: var(--ink); background: var(--free-dim); transform: translateX(2px); } .nav-item.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); } .nav-item .ico { opacity: .9; } .nav-badge { margin-left: auto; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; } .side-foot { margin-top: auto; padding: 12px 11px 4px; border-top: 1px solid var(--border2); } .side-code { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; word-break: break-all; } /* Ghadi-ghadi mitnari sidebar — fakta icons rahtat. */ .shell.collapsed .sidebar { width: 66px; } .shell.collapsed .nav-item span:not(.nav-badge) { display: none; } .shell.collapsed .side-brand .brand-tag, .shell.collapsed .side-foot { display: none; } .shell.collapsed .nav-item { justify-content: center; padding: 10px; } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 12px; padding: 13px 24px; border-bottom: 1px solid var(--border2); position: sticky; top: 0; background: var(--glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); z-index: 20; } .top-title { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .topbar-right { display: flex; gap: 8px; align-items: center; margin-left: auto; } .side-toggle { display: inline-flex; } main { padding: 24px; padding-bottom: 90px; max-width: 1240px; width: 100%; margin: 0 auto; } .scrim { display: none; } /* Mobile: sidebar baherun sarkat yeto. */ @media (max-width: 860px) { .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); width: 250px; } .shell.side-open .sidebar { transform: translateX(0); box-shadow: var(--pop-shadow); } .shell.collapsed .sidebar { width: 250px; } .shell.collapsed .nav-item span:not(.nav-badge) { display: inline; } .shell.collapsed .nav-item { justify-content: flex-start; padding: 9px 11px; } .shell.collapsed .side-foot { display: block; } .shell.side-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25; backdrop-filter: blur(2px); } main { padding: 18px 16px 80px; } .topbar { padding: 12px 16px; } .hide-sm { display: none; } } /* ── Profile menu ── */ .profile-wrap { position: relative; } .avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--accent); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: transform .15s var(--ease), box-shadow .2s; } .avatar:hover { transform: scale(1.05); box-shadow: 0 0 0 4px var(--accent-dim); } .menu { position: absolute; right: 0; top: calc(100% + 10px); width: 236px; background: var(--card); background-image: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 6px; box-shadow: var(--pop-shadow); z-index: 40; animation: pop .16s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } } .menu-head { padding: 10px 11px 12px; border-bottom: 1px solid var(--border2); margin-bottom: 6px; } .menu-name { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; } .menu-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); letter-spacing: .1em; margin-top: 3px; text-transform: uppercase; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; color: var(--ink2); padding: 9px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 500; transition: background .18s, color .18s; } .menu-item:hover { background: var(--free-dim); color: var(--ink); } .menu-item.danger { color: var(--bad); } .menu-item.danger:hover { background: var(--bad-dim); } .menu-sep { height: 1px; background: var(--border2); margin: 6px 4px; } /* ── Banners ── */ .err-banner { background: var(--bad-dim); color: var(--bad); border: 1px solid var(--bad-dim); padding: 13px 16px; margin: 14px 24px 0; border-radius: 13px; font-size: 13.5px; line-height: 1.55; } .loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 48px; color: var(--ink2); font-size: 13.5px; } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Stat tiles ── */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px; } .tile { background: var(--card); background-image: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; } .tile:hover { border-color: var(--accent-line); transform: translateY(-2px); } .tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .tile-head .ico { width: 14px; height: 14px; color: var(--ink3); } .tile .t-label { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink3); letter-spacing: .13em; text-transform: uppercase; } .tile .t-value { font-size: 27px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; } .tile .t-sub { font-size: 11.5px; color: var(--ink3); margin-top: 6px; } .tile.t-accent .t-value { color: var(--accent); } .tile.t-good .t-value { color: var(--good); } .tile.t-bad .t-value { color: var(--bad); } .tile.t-warn .t-value { color: var(--warn); } .tile-click { cursor: pointer; } /* ── Sections / cards ── */ .section-title { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink3); letter-spacing: .15em; text-transform: uppercase; margin: 32px 0 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .section-title:first-child { margin-top: 0; } .section-title .ico { width: 14px; height: 14px; color: var(--accent); opacity: .9; } .section-title .st-sub { font-family: "Inter", sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink3); font-size: 12px; margin-left: auto; } .card { background: var(--card); background-image: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; } .card-pad-0 { padding: 0; overflow: hidden; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } @media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } } .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; background: var(--card); background-image: var(--surface); border: 1px solid var(--border2); border-radius: 14px; } .searchbar { flex: 1; min-width: 180px; background: var(--card2); border: 1px solid var(--border); border-radius: 11px; color: var(--ink); padding: 9px 12px; font-size: 13.5px; outline: none; } .searchbar::placeholder { color: var(--ink3); } .searchbar:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-dim); } .empty { color: var(--ink3); font-size: 13px; padding: 26px 0; text-align: center; } /* ── Chips ── */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .chip .ico { width: 11px; height: 11px; stroke-width: 2.2; } .chip-active { background: var(--good-dim); color: var(--good); } .chip-pending { background: var(--warn-dim); color: var(--warn); } .chip-expired { background: var(--bad-dim); color: var(--bad); } .chip-plan { background: var(--accent-dim); color: var(--accent); } .chip-mute { background: var(--free-dim); color: var(--ink3); } /* Nukatich jodleli gym — accent shikka, yaadit lagech disto. */ .chip-new { background: var(--accent); color: var(--on-accent); font-size: 9.5px; padding: 2px 7px; letter-spacing: .04em; vertical-align: 2px; } .fchips { display: flex; gap: 7px; flex-wrap: wrap; } .fchip { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); color: var(--ink2); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 500; transition: .2s; } .fchip:hover { border-color: var(--accent-line); color: var(--ink); } .fchip.sel { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); } .fchip .fcount { background: var(--free-dim); border-radius: 999px; padding: 1px 7px; font-size: 11px; } .fchip.sel .fcount { background: var(--accent); color: var(--on-accent); font-weight: 600; } /* ── Tables ── */ .table-wrap { overflow-x: auto; } /* max-height ithe FAKTA JS band padla tar chi jaaL aahe. Khari maryada app.js madhla capLists() thevto — to NEMKYA 10 oLi mojun (oL kiti unch aahe he baghun) inline max-height lavto, ani 10 kinva kami oLi asatil tar kaahi-hi lavat nahi. Fakta CSS ne he jamat nahi: kahi oLi don-madli asatat (sub-line) ani kahi ek-madli. */ .table-scroll { max-height: 560px; overflow-y: auto; } .table-scroll thead th { position: sticky; top: 0; z-index: 2; background-color: var(--card); background-image: var(--surface); padding-top: 12px; } /* Default rundh pandhri patti dark theme madhe ughadi disat — mhanun jithe-jithe swataha cha scroll aahe tithe halki patti. */ .table-scroll, .list-scroll, .modal { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .table-scroll::-webkit-scrollbar, .list-scroll::-webkit-scrollbar, .modal::-webkit-scrollbar { width: 8px; height: 8px; } .table-scroll::-webkit-scrollbar-thumb, .list-scroll::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .table-scroll::-webkit-scrollbar-thumb:hover, .list-scroll::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover { background: var(--ink3); } .modal::-webkit-scrollbar-track { background: transparent; } /* Table nasleli yaadi (timeline, leaderboard, nirop). Ithe-hi khari maryada capLists() thevto — ha aakda fakta jaaL. */ .list-scroll { max-height: 520px; overflow-y: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink3); letter-spacing: .12em; text-transform: uppercase; padding: 0 14px 11px; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 12px 14px; border-bottom: 1px solid var(--border2); color: var(--ink2); white-space: nowrap; } tbody tr { transition: background .18s; } tbody tr:hover td { background: var(--free-dim); } td.ink { color: var(--ink); font-weight: 550; } td.num { text-align: right; } th.num { text-align: right; } tr:last-child td { border-bottom: none; } .td-main { color: var(--ink); font-weight: 600; letter-spacing: -0.015em; } .td-sub { font-size: 11px; color: var(--ink3); font-weight: 400; } .row-actions { display: flex; gap: 6px; } /* ── Target progress ── Ragh (bar) load zalyavar 0 -> aakhda paryant sarkat jaato. Ha animation muddam thoda mand (1.1s) — aakhda vaachaayla veL milto. */ .tgt-card { position: relative; overflow: hidden; } .tgt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .tgt-name { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; } .tgt-meta { font-size: 12px; color: var(--ink3); margin-top: 3px; } .tgt-bonus { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); } .tgt-pct { font-size: 12px; color: var(--ink2); } .bar { height: 12px; border-radius: 999px; background: var(--free-dim); overflow: hidden; margin: 14px 0 10px; position: relative; border: 1px solid var(--border2); } .bar-fill { height: 100%; border-radius: 999px; background: var(--grad); width: 0; transition: width 1.1s var(--ease); box-shadow: 0 0 18px -4px var(--accent); position: relative; overflow: hidden; } /* Chalu target var halka chalnara ujeD — "he ajun chalu aahe". */ .bar-fill.live::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: sheen 2.4s linear infinite; } @keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .bar.sm { height: 7px; margin: 8px 0 0; } .tgt-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink2); flex-wrap: wrap; } .tgt-foot b { color: var(--ink); font-weight: 650; } .tgt-done { border-color: var(--good) !important; } .tgt-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border2); } .tgt-row:last-child { border-bottom: none; } .tgt-badge { width: 38px; height: 38px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--free-dim); color: var(--ink3); border: 1px solid var(--border2); } .tgt-badge.done { background: var(--good-dim); color: var(--good); border-color: transparent; } .tgt-badge.live { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); } /* ── Click kelyavar copy honara code ── Ha