/* * Mini App design system v2. * Kept isolated and scoped so the visual layer can be rolled back by removing * the stylesheet or the ui-design-v2 class from . */ .ui-design-v2{ --ds-bg:var(--tg-theme-bg-color,#09111f); --ds-surface:var(--tg-theme-secondary-bg-color,#0e1930); --ds-surface-raised:var(--tg-theme-section-bg-color,#121d34); --ds-surface-soft:rgba(255,255,255,.045); --ds-line:rgba(148,163,184,.16); --ds-line-strong:rgba(123,178,255,.30); /* * The Mini App uses a dark surface. Telegram Desktop can expose light-theme * text tokens while the host still renders this dark UI, which makes values * and labels black and unreadable. Keep text tokens owned by this theme. */ --ds-text:#f8fbff; --ds-muted:#90a0c3; --ds-blue:var(--tg-theme-button-color,#7bb2ff); --ds-green:#22c55e; --ds-red:var(--tg-theme-destructive-text-color,#fb7185); --ds-gold:#fbbf24; --ds-radius-card:15px; --ds-radius-control:10px; --green:#22c55e!important; --red:#f87171!important; --gold:#f59e0b!important; --blue:#60a5fa!important; --ds-space-1:4px; --ds-space-2:8px; --ds-space-3:12px; --ds-space-4:16px; --ds-shadow:0 12px 28px rgba(0,0,0,.22); color:var(--ds-text); } .ui-design-v2 .page{animation:none} .ui-design-v2 .page{padding:12px} .ui-design-v2 .card, .ui-design-v2 .opcard, .ui-design-v2 .salary-row-card, .ui-design-v2 .expenses-chart-card, .ui-design-v2 .expenses-pie-card, .ui-design-v2 .expenses-journal-button{ background:linear-gradient(145deg,#12213b,#0e1930); border-color:var(--ds-line); border-radius:var(--ds-radius-card); box-shadow:var(--ds-shadow); } .ui-design-v2 .card{padding:14px;margin-bottom:10px} .ui-design-v2 .opcard{padding:13px;margin-bottom:8px} .ui-design-v2 .ct, .ui-design-v2 .section-label{ color:var(--ds-muted); font-size:10px; font-weight:800; letter-spacing:.11em; } .ui-design-v2 .section-label{padding-top:8px;padding-bottom:5px} .ui-design-v2 .chips{gap:5px;margin-bottom:10px} .ui-design-v2 .chip{padding:7px 12px;background:rgba(255,255,255,.045);border-color:var(--ds-line);color:var(--ds-muted)} .ui-design-v2 .chip.active{background:rgba(79,140,255,.2);border-color:var(--ds-line-strong);color:var(--ds-text);box-shadow:none} .ui-design-v2 button, .ui-design-v2 select, .ui-design-v2 input{ font-family:inherit; } .ui-design-v2 button:focus-visible, .ui-design-v2 select:focus-visible, .ui-design-v2 input:focus-visible, .ui-design-v2 [role="button"]:focus-visible{ outline:2px solid var(--ds-blue); outline-offset:2px; } .ui-design-v2 .chip, .ui-design-v2 .tab, .ui-design-v2 .expenses-journal-mode-row>button, .ui-design-v2 .expenses-period-toggle button{ min-height:34px; border-radius:var(--ds-radius-control); } .ui-design-v2 .sheetbtn, .ui-design-v2 .okbtn{ min-height:40px; border-radius:var(--ds-radius-control); } .ui-design-v2 .sheetbtn{background:linear-gradient(135deg,#2563eb,#3b82f6);box-shadow:0 6px 16px rgba(37,99,235,.22)} .ui-design-v2 .tab, .ui-design-v2 .salary-tabs .tab{ background:rgba(255,255,255,.04); border-color:var(--ds-line); color:var(--ds-muted); } .ui-design-v2 .tab.active, .ui-design-v2 .salary-tabs .tab.active{ background:rgba(79,140,255,.2); border-color:var(--ds-line-strong); color:var(--ds-text); box-shadow:none; } .ui-design-v2 .expenses-view-body, .ui-design-v2 .salary-page{color:var(--ds-text)} .ui-design-v2 .owner-team-mock{ --panel:#0d1528!important; --sec:#111b32!important; --sec2:#16213a!important; --text:#f8fafc!important; --hint:#94a3b8!important; --blue:#60a5fa!important; --green:#22c55e!important; --orange:#f59e0b!important; --red:#f87171!important; --purple:#a78bfa!important; padding:4px 0 18px; } .ui-design-v2 .goal-cards-scope, .ui-design-v2 .salary-page{ --green:#22c55e!important; } .ui-design-v2 .goal-card-v3 .team-grid div:nth-child(1) b, .ui-design-v2 .team-card-metrics-grid .team-card-metric:nth-child(1) b, .ui-design-v2 .team-metrics-grid .metric-green, .ui-design-v2 .goal-metric-value.green, .ui-design-v2 .agency-goal-earned, .ui-design-v2 .finance-summary-income b, .ui-design-v2 .salary-row-income strong{ color:#22c55e!important; } .ui-design-v2 .owner-team-mock .topbar{ margin:0 0 8px; padding:4px 2px 8px; border-bottom:0; position:relative; } .ui-design-v2 .owner-team-mock .topbar-brand{ display:flex; align-items:center; gap:9px; min-width:0; } .ui-design-v2 .owner-team-mock .topbar-avatar{ display:none!important; } .ui-design-v2 .owner-team-mock .topbar-avatar .agency-goal-avatar{ width:34px!important; height:34px!important; font-size:15px!important; border-radius:10px!important; } .ui-design-v2 .owner-team-mock .topbar-avatar .agency-goal-avatar-wrap{ width:34px; height:34px; } .ui-design-v2 #page-dashboard .od-dashboard-periods{ display:flex; align-items:center; gap:5px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; position:relative; z-index:4; touch-action:manipulation; } .ui-design-v2 #page-dashboard .od-dashboard-periods::-webkit-scrollbar{display:none} .ui-design-v2 #page-dashboard .od-dashboard-periods button{ flex:0 0 auto; min-height:36px; padding:7px 13px; border:1px solid var(--ds-line); border-radius:10px; background:rgba(255,255,255,.045); color:var(--ds-muted); font-size:11px; font-weight:800; touch-action:manipulation; } .ui-design-v2 #page-dashboard .od-dashboard-periods button.active{ background:rgba(96,165,250,.18); border-color:var(--ds-line-strong); color:var(--ds-text); } .ui-design-v2 #page-dashboard .pace-operators-heading{ margin:16px 0 8px; color:var(--ds-muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .ui-design-v2 .owner-team-mock .topbar::after{ display:none; } .ui-design-v2 .owner-team-mock .title{ font-size:18px!important; letter-spacing:-.03em; } .ui-design-v2 .owner-team-mock .card, .ui-design-v2 .owner-team-mock .goal-card-v3, .ui-design-v2 .owner-team-mock .team-card{ border-radius:20px!important; padding:16px!important; } .ui-design-v2 .owner-team-mock .goal-card-v3{ margin-bottom:14px; } .ui-design-v2 .owner-team-mock .agency-goal--hero{ margin-top:0!important; } .ui-design-v2 .owner-team-mock .goal-card-v3::before, .ui-design-v2 .goal-card-v3.agency-goal--hero::before{ background:none!important; opacity:0!important; } .ui-design-v2 .owner-team-mock .agency-goal-avatar, .ui-design-v2 .owner-team-mock .agency-goal-avatar{ display:flex!important; visibility:visible!important; opacity:1!important; } .ui-design-v2 .owner-team-mock .agency-goal-avatar img{ display:block!important; visibility:visible!important; opacity:1!important; } .ui-design-v2 .owner-team-mock .goal-v3-target{ font-size:34px; letter-spacing:-.04em; } .ui-design-v2 .owner-team-mock .team-card{ display:block; margin-bottom:10px; min-height:0!important; height:auto!important; align-self:start!important; padding:12px!important; } .ui-design-v2 .owner-team-mock .team-card-head{ min-height:44px; } .ui-design-v2 .owner-team-mock .team-card-metrics-grid, .ui-design-v2 .owner-team-mock .team-grid{ gap:8px; margin-top:12px; } .ui-design-v2 .owner-team-mock .team-card-bottom{ margin-top:8px!important; } .ui-design-v2 .owner-team-mock .agency-goal--hero .goal-v3-period{ display:none!important; } .ui-design-v2 .owner-team-mock .team-card{ display:flex!important; flex-direction:column!important; justify-content:flex-start!important; min-height:0!important; height:auto!important; align-self:start!important; } .ui-design-v2 .owner-team-mock .team-card-metrics-grid--compact{ grid-template-rows:46px!important; height:46px!important; } .ui-design-v2 .owner-team-mock .team-card-metric, .ui-design-v2 .owner-team-mock .team-grid div{ min-height:46px; display:flex; flex-direction:column; justify-content:center; } .ui-design-v2 .owner-team-mock .team-card-metrics-grid--compact{ grid-template-rows:minmax(46px,auto)!important; } .ui-design-v2 .salary-page-header{ display:grid!important; grid-template-columns:1fr; gap:12px; padding:16px!important; margin-bottom:12px; } .ui-design-v2 .salary-page-title{ font-size:21px; letter-spacing:-.04em; } .ui-design-v2 .salary-header-metrics{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; } .ui-design-v2 .salary-header-metric-pill{ min-height:64px; padding:10px 9px; border:1px solid var(--ds-line); border-radius:14px; background:rgba(255,255,255,.045); display:flex; flex-direction:column; justify-content:space-between; text-align:center; } .ui-design-v2 .salary-header-metric-pill span{ color:var(--ds-muted); font-size:9px; line-height:1.2; } .ui-design-v2 .salary-header-metric-pill b{ font-size:15px; letter-spacing:-.03em; } .ui-design-v2 .agency-settings-photo-row{ display:flex; align-items:center; gap:10px; margin:0 0 14px; } .ui-design-v2 .agency-settings-photo{ width:44px; height:44px; flex:0 0 44px; overflow:hidden; border-radius:12px; } .ui-design-v2 .agency-settings-photo .agency-goal-avatar{ width:44px!important; height:44px!important; border-radius:12px!important; } .ui-design-v2 .analytics-revenue-summary{ margin-bottom:12px; padding:16px; border:1px solid var(--ds-line); border-radius:20px; background:linear-gradient(145deg,#12213b,#0e1930); box-shadow:var(--ds-shadow); } .ui-design-v2 .analytics-chart-card{ overflow:hidden; } .ui-design-v2 .analytics-chart-viewport{ position:relative; height:160px; width:100%; } .ui-design-v2 .analytics-chart-card canvas{ display:block; width:100%!important; height:100%!important; } .ui-design-v2 .analytics-chart-controls{ display:flex; align-items:center; gap:4px; } .ui-design-v2 .analytics-chart-controls button{ min-width:30px; min-height:30px; padding:0 7px; border:1px solid var(--ds-line); border-radius:8px; background:rgba(255,255,255,.045); color:var(--ds-muted); font-size:11px; font-weight:800; } .ui-design-v2 .analytics-chart-controls button.active{ background:rgba(96,165,250,.18); border-color:var(--ds-line-strong); color:var(--ds-text); } .ui-design-v2 .expenses-chart-head{ align-items:center; min-height:30px; } .ui-design-v2 .expenses-chart-head>span:first-child{ display:flex; align-items:center; min-height:30px; line-height:1; } .ui-design-v2 .expenses-chart-mode{ display:flex; align-items:center; } .ui-design-v2 .analytics-revenue-summary-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--ds-line); } .ui-design-v2 .analytics-summary-label{ color:var(--ds-muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .ui-design-v2 .analytics-summary-total{ margin-top:4px; color:#22c55e; font-size:34px; font-weight:900; letter-spacing:-.05em; } .ui-design-v2 .analytics-summary-forecast{ max-width:210px; color:var(--ds-muted); font-size:12px; font-weight:700; line-height:1.35; text-align:right; } .ui-design-v2 .analytics-summary-forecast b{ color:var(--ds-red); font-size:14px; } .ui-design-v2 .analytics-day-metrics{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-top:12px; } .ui-design-v2 .analytics-day-metric{ position:relative; min-width:0; padding:10px; border:1px solid var(--ds-line); border-radius:13px; background:rgba(255,255,255,.045); } .ui-design-v2 .analytics-day-metric span{ display:block; color:var(--ds-muted); font-size:9px; font-weight:800; text-transform:uppercase; } .ui-design-v2 .analytics-day-metric b{ display:block; margin-top:6px; font-size:18px; } .ui-design-v2 .analytics-day-metric b.is-positive{color:#22c55e} .ui-design-v2 .analytics-day-metric b.is-negative{color:var(--ds-red)} .ui-design-v2 .analytics-day-metric small{display:block;color:var(--ds-muted);font-size:9px;margin-top:3px} .ui-design-v2 .analytics-day-metric:first-child::after{ content:"За выбранный период"; display:block; min-height:28px; margin-top:8px; color:var(--ds-muted); font-size:9px; line-height:28px; white-space:nowrap; } .ui-design-v2 .analytics-day-metric button{ min-height:28px; margin-top:8px; padding:0 8px; border:1px solid var(--ds-line); border-radius:8px; background:rgba(255,255,255,.06); color:var(--ds-text); font-size:9px; cursor:pointer; } .ui-design-v2 #page-dashboard .money-total{ padding-left:14px; padding-right:8px; } .ui-design-v2 #page-dashboard .wallet-header{ padding-left:12px; padding-right:10px; } .ui-design-v2 #page-dashboard .account-row{ padding-left:24px; padding-right:12px; } .ui-design-v2 #page-dashboard .money-total-val{ margin-left:auto; } .ui-design-v2 #page-dashboard .money-total{ cursor:default; box-shadow:none; } .ui-design-v2 #page-dashboard .money-map-groups{ border:1px solid var(--ds-line); border-top:0; border-radius:0 0 var(--ds-radius-card) var(--ds-radius-card); overflow:hidden; } .ui-design-v2 #page-dashboard .health-panel{ border-color:var(--ds-line); background:linear-gradient(145deg,#12213b,#0e1930); box-shadow:var(--ds-shadow); } .ui-design-v2 #page-dashboard .health-toggle, .ui-design-v2 #page-dashboard .health-toggle-copy strong, .ui-design-v2 #page-dashboard .health-metric b, .ui-design-v2 #page-dashboard .health-row-main > span{ color:var(--ds-text); } .ui-design-v2 #page-dashboard .health-toggle i, .ui-design-v2 #page-dashboard .health-score small, .ui-design-v2 #page-dashboard .health-metric em, .ui-design-v2 #page-dashboard .health-block-title, .ui-design-v2 #page-dashboard .health-row-main small, .ui-design-v2 #page-dashboard .health-empty{ color:var(--ds-muted); } .ui-design-v2 #page-dashboard .health-metric, .ui-design-v2 #page-dashboard .health-block{ border-color:var(--ds-line); background:rgba(255,255,255,.03); } .ui-design-v2 #page-dashboard .health-score:after{ background:#12213b; } .ui-design-v2 #page-dashboard .money-map-group{ background:rgba(255,255,255,.025); border-bottom:1px solid var(--ds-line); } .ui-design-v2 #page-dashboard .money-map-group:last-child{border-bottom:0} .ui-design-v2 #page-dashboard .money-map-group-toggle{ display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:10px; width:100%; min-height:46px; padding:9px 12px; border:0; background:transparent; color:var(--ds-text); text-align:left; font-size:12px; font-weight:800; } .ui-design-v2 #page-dashboard .money-map-group-toggle b{ color:var(--ds-green); font-variant-numeric:tabular-nums; } .ui-design-v2 #page-dashboard .money-map-group-toggle i{ color:var(--ds-muted); font-style:normal; text-align:center; transition:transform .2s ease; } .ui-design-v2 #page-dashboard .money-map-group.open .money-map-group-toggle i{transform:rotate(180deg)} .ui-design-v2 #page-dashboard .money-map-group-details{ display:none; max-height:300px; overflow-y:auto; padding:0 12px 8px 24px; scrollbar-width:thin; } .ui-design-v2 #page-dashboard .money-map-group.open .money-map-group-details{display:block} .ui-design-v2 #page-dashboard .money-map-child{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px; border-top:1px solid rgba(148,163,184,.10); color:var(--ds-muted); font-size:11px; } .ui-design-v2 #page-dashboard .money-map-child span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ui-design-v2 #page-dashboard .money-map-child b{ color:var(--ds-text); white-space:nowrap; } .ui-design-v2 #page-dashboard .money-map-empty{ padding:8px 0; color:var(--ds-muted); font-size:11px; } .ui-design-v2 #page-dashboard .snap-card--expenses{ appearance:none; -webkit-appearance:none; } .ui-design-v2 #page-dashboard .snapshot-expenses-panel{ border:1px solid var(--ds-line); border-radius:var(--ds-radius-card); background:rgba(255,255,255,.025); overflow:hidden; } .ui-design-v2 #page-dashboard .snapshot-expenses-summary{ border-bottom:1px solid var(--ds-line); } .ui-design-v2 #page-dashboard .snapshot-expenses-line{ padding:10px 12px; } .ui-design-v2 #page-dashboard .snapshot-expenses-line span{color:var(--ds-muted)} .ui-design-v2 #page-dashboard .snapshot-expenses-line b{color:var(--ds-gold)} .ui-design-v2 #page-dashboard .snapshot-expenses-group{ border-bottom:1px solid var(--ds-line); } .ui-design-v2 #page-dashboard .snapshot-expenses-group-toggle{ min-height:46px; padding:9px 12px; color:var(--ds-text); } .ui-design-v2 #page-dashboard .snapshot-expenses-group-toggle b{color:var(--ds-gold)} .ui-design-v2 #page-dashboard .snapshot-expenses-group-toggle i{color:var(--ds-muted)} .ui-design-v2 #page-dashboard .snapshot-expenses-group-details{ padding:0 12px 8px 20px; scrollbar-width:thin; } .ui-design-v2 #page-dashboard .snapshot-expenses-item{ grid-template-columns:minmax(0,1fr) auto auto; gap:8px; } .ui-design-v2 #page-dashboard .snapshot-expenses-item-text{color:var(--ds-text)} .ui-design-v2 #page-dashboard .snapshot-expenses-item-date, .ui-design-v2 #page-dashboard .snapshot-expenses-empty{color:var(--ds-muted)} .ui-design-v2 #page-dashboard .snapshot-expenses-subgroup-head{color:var(--ds-text)} .ui-design-v2 #page-dashboard .snapshot-expenses-detail.open{ max-height:none!important; overflow:visible!important; } .ui-design-v2 #page-dashboard .wf-row{ padding-left:14px; padding-right:12px; gap:8px; } .ui-design-v2 #page-dashboard .wf-label{ flex:1 1 auto; } .ui-design-v2 #page-dashboard .wf-value{ margin-left:auto; } .ui-design-v2 #page-dashboard .wf-arrow{ order:3; width:18px; margin-left:4px; text-align:center; transform:none; } .ui-design-v2 #page-dashboard .wf-row.expandable.open .wf-arrow{ transform:rotate(180deg); } .ui-design-v2 #page-dashboard .radar-expand.open{ max-height:600px; } .ui-design-v2 #page-dashboard .radar-expand.open .radar-expand-inner{ max-height:574px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.55) transparent; } .ui-design-v2 #page-dashboard .radar-expand.open .radar-expand-inner::-webkit-scrollbar{width:4px} .ui-design-v2 #page-dashboard .radar-expand.open .radar-expand-inner::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.55); border-radius:999px; } .ui-design-v2 .expenses-period-nav{ grid-template-columns:40px auto minmax(0,1fr) 40px; } .ui-design-v2 .expenses-period-modes{ display:flex; align-items:center; gap:4px; } .ui-design-v2 .expenses-period-modes button{ height:30px; padding:0 8px; border:1px solid var(--ds-line); border-radius:8px; background:rgba(255,255,255,.045); color:var(--ds-muted); font-size:10px; } .ui-design-v2 .expenses-period-modes button.active{ border-color:var(--ds-line-strong); background:rgba(96,165,250,.18); color:var(--ds-text); } .ui-design-v2 .management-tabs{ gap:4px; padding:4px; margin-bottom:10px; border-radius:16px; } .ui-design-v2 .analytics-global-periods{ display:flex!important; align-items:center; justify-content:flex-start; gap:5px!important; overflow-x:auto; padding:2px; scrollbar-width:none; } .ui-design-v2 .analytics-global-periods::-webkit-scrollbar{display:none} .ui-design-v2 .analytics-global-periods .tab{ flex:0 0 auto; min-width:72px!important; min-height:36px; padding:7px 13px!important; white-space:nowrap; } .ui-design-v2 .analytics-quick-detail{ flex:0 0 auto; min-height:36px; padding:7px 11px; border:1px solid var(--ds-line-strong); border-radius:10px; background:rgba(37,99,235,.14); color:var(--ds-blue); font-size:10px; font-weight:800; white-space:nowrap; } .ui-design-v2 .analytics-period-meta{ align-items:center; min-height:34px; padding:0 2px; } .ui-design-v2 .analytics-period-meta button{ min-height:34px!important; padding:7px 11px!important; white-space:nowrap; } .ui-design-v2 .analytics-section-tabs{ gap:5px; } .ui-design-v2 .analytics-section-tabs .tab{ min-height:36px; padding:7px 10px; } .ui-design-v2 .management-tabs .tab{ min-height:38px; padding:6px 9px; line-height:1.1; } .ui-design-v2 .admin-live-stream-card{ padding:8px!important; } .ui-design-v2 .admin-live-stream-head{ width:max-content; max-width:100%; min-height:30px; margin-bottom:5px!important; } .ui-design-v2 .admin-live-stream-head>div{ min-width:0; } .ui-design-v2 .owner-team-mock .topbar .pill, .ui-design-v2 .owner-team-mock .card, .ui-design-v2 .goal-card-v3, .ui-design-v2 .team-card{ background:linear-gradient(145deg,#12213b,#0e1930)!important; border-color:var(--ds-line)!important; box-shadow:var(--ds-shadow)!important; } .ui-design-v2 .owner-team-mock .team-grid div, .ui-design-v2 .owner-team-mock .td2-member-breakdown>div, .ui-design-v2 .owner-team-mock .metric{ background:rgba(255,255,255,.045)!important; border-color:var(--ds-line)!important; } .ui-design-v2 .owner-team-mock .topbar .pill[style], .ui-design-v2 .owner-team-mock [style*="background:rgba(34,197,94"], .ui-design-v2 .owner-team-mock [style*="background:rgba(245,158,11"], .ui-design-v2 .owner-team-mock [style*="background:rgba(37,99,235"]{ background:rgba(255,255,255,.06)!important; border-color:var(--ds-line)!important; } .ui-design-v2 .owner-team-mock .goal-v3-progress-fill, .ui-design-v2 .owner-team-mock .mbarfill{ background:linear-gradient(90deg,#60a5fa,#93c5fd)!important; } .ui-design-v2 .goal-cards-scope .goal-card-v3, .ui-design-v2 .goal-cards-scope .team-card, .ui-design-v2 .analytics-page, .ui-design-v2 .salary-page-header, .ui-design-v2 .journal-shell, .ui-design-v2 .sheet{ background:linear-gradient(145deg,#12213b,#0e1930)!important; border-color:var(--ds-line)!important; border-radius:var(--ds-radius-card)!important; box-shadow:var(--ds-shadow)!important; } .ui-design-v2 .goal-cards-scope .goal-card-v3 [style*="background:rgba"], .ui-design-v2 .goal-cards-scope .team-card [style*="background:rgba"], .ui-design-v2 .analytics-page [style*="background:rgba(255,255,255"], .ui-design-v2 .salary-page [style*="background:rgba(255,255,255"]{ background:rgba(255,255,255,.045)!important; border-color:var(--ds-line)!important; } .ui-design-v2 #page-stats [style*="background:rgba(74,222,128"], .ui-design-v2 #page-stats [style*="background:rgba(245,158,11"], .ui-design-v2 #page-stats [style*="background:rgba(37,99,235"], .ui-design-v2 #page-stats [style*="background:rgba(255,255,255"], .ui-design-v2 #page-project [style*="background:rgba(255,255,255"], .ui-design-v2 #page-analytics [style*="background:rgba(255,255,255"], .ui-design-v2 #page-profile [style*="background:rgba(255,255,255"], .ui-design-v2 #page-income [style*="background:rgba(255,255,255"]{ background:rgba(255,255,255,.045)!important; border-color:var(--ds-line)!important; } .ui-design-v2 .expenses-pie-legend, .ui-design-v2 .expenses-pie-details, .ui-design-v2 .journal-list, .ui-design-v2 .subpage-panel{ scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.62) transparent; } .ui-design-v2 .expenses-pie-legend::-webkit-scrollbar, .ui-design-v2 .expenses-pie-details::-webkit-scrollbar, .ui-design-v2 .journal-list::-webkit-scrollbar, .ui-design-v2 .subpage-panel::-webkit-scrollbar{width:4px} .ui-design-v2 .expenses-pie-legend::-webkit-scrollbar-track, .ui-design-v2 .expenses-pie-details::-webkit-scrollbar-track, .ui-design-v2 .journal-list::-webkit-scrollbar-track, .ui-design-v2 .subpage-panel::-webkit-scrollbar-track{background:transparent} .ui-design-v2 .expenses-pie-legend::-webkit-scrollbar-thumb, .ui-design-v2 .expenses-pie-details::-webkit-scrollbar-thumb, .ui-design-v2 .journal-list::-webkit-scrollbar-thumb, .ui-design-v2 .subpage-panel::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.62); border-radius:999px; } /* Shared page chrome and responsive grid safety. */ .ui-design-v2 .page>header, .ui-design-v2 .page-header, .ui-design-v2 .salary-page-header{ border-color:var(--ds-line); } .ui-design-v2 .salary-list{grid-template-columns:minmax(0,1fr)} .ui-design-v2 .expenses-row{grid-template-columns:30px minmax(0,1fr) auto auto} .ui-design-v2 .expenses-row-delete{border-radius:var(--ds-radius-control)} .ui-design-v2 .scard, .ui-design-v2 .fcard, .ui-design-v2 .income-wizard-shell{ background:linear-gradient(145deg,#12213b,#0e1930); border-color:var(--ds-line); border-radius:var(--ds-radius-card); box-shadow:var(--ds-shadow); } .ui-design-v2 .shead{color:var(--ds-muted);border-bottom:1px solid var(--ds-line)} .ui-design-v2 .mgrid>div, .ui-design-v2 .tgrid>div{ background:rgba(255,255,255,.045)!important; border-color:var(--ds-line)!important; } .ui-design-v2 .overlay{backdrop-filter:blur(8px)} .ui-design-v2 .sheet, .ui-design-v2 .subpage-panel{ padding-bottom:calc(20px + var(--tg-safe-area-inset-bottom,0px)); } .ui-design-v2 .bnav{ background:rgba(9,17,31,.94); border-top-color:var(--ds-line); } .ui-design-v2 .ni.active{color:var(--ds-blue)} .ui-design-v2 .field input, .ui-design-v2 .field select, .ui-design-v2 .field textarea{ border-color:var(--ds-line)!important; border-radius:var(--ds-radius-control)!important; background:rgba(255,255,255,.045)!important; } .ui-design-v2 .ds-page-title{margin:0 0 14px;font-size:16px;font-weight:800;color:var(--ds-text)} .ui-design-v2 .ds-wiki-card{margin-bottom:10px} .ui-design-v2 .ds-wiki-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .ui-design-v2 .ds-wiki-topic{padding:11px 10px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-control);background:var(--ds-surface-soft);color:var(--ds-text);text-align:left;cursor:pointer} .ui-design-v2 .ds-wiki-topic-icon{margin-bottom:5px;font-size:20px} .ui-design-v2 .ds-wiki-topic-title{margin-bottom:3px;font-size:12px;font-weight:700;line-height:1.3} .ui-design-v2 .ds-wiki-topic-sub{color:var(--ds-muted);font-size:10px;line-height:1.3} .ui-design-v2 .ds-wiki-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .ui-design-v2 .ds-wiki-heading{margin:0} .ui-design-v2 .ds-primary-button{min-height:32px;padding:6px 12px;border:0;border-radius:var(--ds-radius-control);background:var(--btn);color:#fff;font-size:11px;font-weight:700;cursor:pointer} .ui-design-v2 .ds-wiki-step{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--ds-line)} .ui-design-v2 .ds-wiki-step.is-last{border-bottom:0} .ui-design-v2 .ds-wiki-step-number{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:rgba(37,99,235,.2);color:var(--ds-blue);font-size:10px;font-weight:800} .ui-design-v2 .ds-wiki-step-copy{min-width:0} .ui-design-v2 .ds-wiki-step-title{font-size:12px;font-weight:700} .ui-design-v2 .ds-wiki-step-desc{margin-top:2px;color:var(--ds-muted);font-size:10px} /* Owner Dashboard uses the same tokens while keeping its component layout. */ .ui-design-v2 #page-dashboard{ --bg:var(--ds-bg); --bg2:var(--ds-surface); --bg3:var(--ds-surface-raised); --card:var(--ds-surface-raised); --card2:#182644; --border:var(--ds-line); --border2:var(--ds-line-strong); --blue:var(--ds-blue); --green:var(--ds-green); --red:var(--ds-red); --gold:var(--ds-gold); --text:var(--ds-text); --text2:var(--ds-muted); } .ui-design-v2 #page-dashboard .header{ background:transparent; border-color:transparent; box-shadow:none; } .ui-design-v2 #page-dashboard .period-badge{ background:var(--ds-surface-raised); border-color:var(--ds-line); } .ui-design-v2 #page-dashboard .header-title{font-size:14px} @media (max-width:430px){ .ui-design-v2 .page{padding:10px} .ui-design-v2 .analytics-revenue-summary-head{display:block} .ui-design-v2 .analytics-summary-forecast{max-width:none;margin-top:6px;text-align:left} .ui-design-v2 .analytics-day-metrics{gap:5px} .ui-design-v2 .analytics-day-metric{padding:8px 6px} .ui-design-v2 .analytics-day-metric span{font-size:8px} .ui-design-v2 .analytics-day-metric b{font-size:15px} .ui-design-v2 .admin-people-grid, .ui-design-v2 .project-people-grid{grid-template-columns:1fr!important} .ui-design-v2 .salary-row-main{ grid-template-columns:28px minmax(0,1fr) auto 16px; gap:6px; } .ui-design-v2 .salary-row-income{display:none} .ui-design-v2 .salary-row-drawer{padding-left:9px;padding-right:9px} .ui-design-v2 #page-dashboard .radar-grid, .ui-design-v2 #page-dashboard .snapshot-grid{ grid-template-columns:1fr 1fr; } .ui-design-v2 .finance-summary-grid, .ui-design-v2 .analytics-kpi-grid{grid-template-columns:1fr 1fr!important} } @media (max-width:340px){ .ui-design-v2 .expenses-pie-layout{gap:8px} .ui-design-v2 .expenses-pie{width:96px;height:96px;flex-basis:96px} .ui-design-v2 .expenses-pie:after{inset:15px} .ui-design-v2 #page-dashboard .radar-grid, .ui-design-v2 #page-dashboard .snapshot-grid{ grid-template-columns:1fr; } .ui-design-v2 .finance-summary-grid, .ui-design-v2 .analytics-kpi-grid{grid-template-columns:1fr!important} } @media (prefers-reduced-motion:reduce){ .ui-design-v2 *, .ui-design-v2 *::before, .ui-design-v2 *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } } /* Dashboard disclosures expand in the page flow; only the page itself scrolls. */ .ui-design-v2 #page-dashboard .radar-expand.open{ max-height:none!important; overflow:visible!important; } .ui-design-v2 #page-dashboard .radar-expand.open .radar-expand-inner{ max-height:none!important; overflow:visible!important; overscroll-behavior:auto!important; } .ui-design-v2 #page-dashboard .health-details.open{ overflow:visible!important; } /* Remove obsolete team-card header metadata left by cached markup. */ .ui-design-v2 .team-card-title-meta, .ui-design-v2 .team-card-today, .ui-design-v2 .team-card-srok{ display:none!important; }