/* ── Google Font ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap'); /* ── Design tokens scoped to .trd-app ─────────────────────────────────────── */ .trd-app { --trd-red: #c41a1a; --trd-red-dark: #a01515; --trd-ink: #1a1610; --trd-muted: #6b6560; --trd-soft: #f7f6f4; --trd-line: #e8e5e0; --trd-green: #236347; --trd-blue: #244d72; --trd-gold: #9b722d; color: var(--trd-ink); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Tooltip lives on , so it needs :root tokens */ :root { --trd-ink: #1a1610; --trd-muted: #6b6560; --trd-red: #c41a1a; --trd-red-dark: #a01515; } .trd-shell { width: 100%; margin: 0 auto; padding: 22px; background: #ffffff; border: 1px solid var(--trd-line); border-radius: 8px; box-shadow: 0 10px 28px rgba(26, 22, 16, .08); } .trd-topbar, .trd-toolbar, .trd-form-head, .trd-form-actions, .trd-card-actions, .trd-card-top, .trd-meta-row { display: flex; align-items: center; } .trd-topbar { justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--trd-line); } .trd-kicker { margin: 0 0 4px; color: var(--trd-red); font-size: 12px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; } .trd-topbar h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1.2; letter-spacing: 0; } .trd-primary, .trd-secondary, .trd-danger, .trd-ghost, .trd-tabs button, .trd-court-tabs button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid transparent; border-radius: 6px; padding: 0 14px; font-size: 14px; font-weight: 750; cursor: pointer; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .trd-primary { background: var(--trd-red); color: #ffffff; } .trd-primary:hover { background: var(--trd-red-dark); color: #ffffff; } .trd-secondary, .trd-ghost, .trd-tabs button, .trd-court-tabs button { background: #ffffff; color: var(--trd-ink); border-color: var(--trd-line); } .trd-secondary:hover, .trd-ghost:hover, .trd-tabs button:hover, .trd-court-tabs button:hover { border-color: #d1cdc7; background: #fbfaf8; color: var(--trd-ink); } .trd-danger { background: #fff5f5; color: #8b1d1d; border-color: #f1c6c6; } .trd-danger:hover { background: #ffecec; color: #8b1d1d; border-color: #eba7a7; } .trd-icon-btn { width: 36px; height: 36px; border: 1px solid var(--trd-line); border-radius: 6px; background: #ffffff; color: var(--trd-muted); font-size: 24px; line-height: 1; cursor: pointer; } .trd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; } .trd-stats div { padding: 16px; background: var(--trd-soft); border: 1px solid var(--trd-line); border-radius: 8px; } .trd-stats strong { display: block; font-size: 28px; line-height: 1; color: var(--trd-ink); } .trd-stats span { display: block; margin-top: 6px; color: var(--trd-muted); font-size: 13px; } .trd-panel { margin: 0 0 18px; padding: 18px; border: 1px solid var(--trd-line); border-radius: 8px; background: #fbfaf8; } .trd-form-head { justify-content: space-between; gap: 12px; margin-bottom: 14px; } .trd-form-head h3 { margin: 0; font-size: 18px; line-height: 1.3; } .trd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .trd-grid label { display: grid; gap: 7px; min-width: 0; } .trd-grid label span { color: var(--trd-muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; } .trd-grid input, .trd-grid select, .trd-grid textarea, .trd-toolbar input { width: 100%; min-height: 42px; border: 1px solid var(--trd-line); border-radius: 6px; background: #ffffff; color: var(--trd-ink); padding: 9px 11px; font-size: 14px; box-shadow: none; } .trd-grid textarea { resize: vertical; } .trd-wide { grid-column: 1 / -1; } .trd-toggle { align-content: end; grid-template-columns: auto 1fr; gap: 10px !important; min-height: 66px; } .trd-toggle input { width: 18px; min-height: 18px; margin: 0; } .trd-form-actions { justify-content: flex-end; gap: 10px; margin-top: 16px; } .trd-toolbar { justify-content: space-between; flex-wrap: nowrap; gap: 14px; margin: 18px 0 14px; } .trd-tabs { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; } .trd-tabs button.active { background: var(--trd-ink); color: #ffffff; border-color: var(--trd-ink); } .trd-tabs button.active:hover { background: var(--trd-ink); color: #ffffff; border-color: var(--trd-ink); } .trd-court-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; } .trd-court-tabs button { min-height: 34px; padding: 0 11px; font-size: 12px; } .trd-court-tabs button.active { border-color: #d7b98a; background: #fff7e6; color: #784500; } .trd-court-tabs button.active:hover { border-color: #d7b98a; background: #fff7e6; color: #784500; } .trd-court-tabs span { margin-left: 5px; color: var(--trd-muted); font-weight: 700; } .trd-toolbar input { max-width: 220px; flex-shrink: 1; min-width: 0; } .trd-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; align-items: start; } .trd-card { border: 1px solid var(--trd-line); border-left: 4px solid #d1cdc7; border-radius: 8px; background: #ffffff; overflow: hidden; } .trd-card.needs_review { border-left-color: var(--trd-red); } .trd-card.archived { opacity: .84; } .trd-card-inner { padding: 18px; } .trd-card-compact .trd-card-inner { padding: 14px; } .trd-card-top { justify-content: space-between; align-items: flex-start; gap: 14px; } .trd-case-title { margin: 0 0 4px; font-size: 19px; line-height: 1.25; } .trd-card-compact .trd-case-title { font-size: 16px; } .trd-case-subtitle { margin: 0; color: var(--trd-muted); font-size: 13px; line-height: 1.4; } .trd-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .trd-badge { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: 0 9px; background: var(--trd-soft); border: 1px solid var(--trd-line); color: var(--trd-muted); font-size: 12px; font-weight: 750; } .trd-badge.high, .trd-badge.needs_review { background: #fff1f1; color: var(--trd-red-dark); border-color: #f1c6c6; } .trd-badge.verified { background: #eef8f2; color: var(--trd-green); border-color: #cce6d7; } .trd-badge.archived { background: #f1f3f5; color: #5d6770; } .trd-badge.finalized { background: #fff7e6; color: #8a4b00; border-color: #f0d29a; } .trd-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .trd-detail { min-width: 0; padding: 11px; border: 1px solid var(--trd-line); border-radius: 8px; background: #fbfaf8; } .trd-card-compact .trd-detail { padding: 9px; } .trd-detail span { display: block; color: var(--trd-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .trd-detail strong { display: block; margin-top: 5px; color: var(--trd-ink); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } .trd-alert { margin-top: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid #f1c6c6; background: #fff8f7; } .trd-alert strong { display: block; margin-bottom: 4px; color: var(--trd-red-dark); } .trd-alert-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .trd-alert-head strong { margin: 0; } .trd-link-btn { border: 0; background: transparent; color: var(--trd-red-dark); padding: 0; font-size: 12px; font-weight: 800; text-decoration: underline; cursor: pointer; } .trd-link-btn:hover { color: var(--trd-ink); background: transparent; } .trd-alert p, .trd-note { margin: 0; color: var(--trd-muted); font-size: 13px; line-height: 1.5; } .trd-card-compact .trd-alert p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .trd-card-compact .trd-alert.expanded p { display: block; -webkit-line-clamp: initial; overflow: visible; } .trd-note { margin-top: 12px; } .trd-card-actions { flex-wrap: wrap; gap: 6px; margin-top: 12px; } .trd-card-actions button, .trd-card-actions a { min-height: 32px; padding: 0 10px; font-size: 12px; } .trd-card-actions .trd-secondary:hover, .trd-card-actions .trd-ghost:hover, .trd-card-actions a.trd-secondary:hover { background: #fbfaf8; color: var(--trd-ink); border-color: #d1cdc7; } .trd-card-actions .trd-danger:hover { background: #ffecec; color: #8b1d1d; border-color: #eba7a7; } .trd-empty { padding: 32px 18px; border: 1px dashed var(--trd-line); border-radius: 8px; color: var(--trd-muted); text-align: center; } .trd-toast { position: fixed; right: 18px; bottom: 18px; z-index: 99999; max-width: 360px; padding: 13px 15px; border-radius: 8px; background: var(--trd-ink); color: #ffffff; box-shadow: 0 12px 30px rgba(26, 22, 16, .22); font-size: 14px; } .trd-locked { max-width: 720px; margin: 0 auto; padding: 18px; border: 1px solid var(--trd-line); border-radius: 8px; background: #ffffff; color: var(--trd-muted); } .trd-loading { opacity: .58; pointer-events: none; } /* ── Calendar: shared controls ─────────────────────────────────────────────── */ .trd-calendar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .trd-calendar-nav { display: flex; align-items: center; gap: 10px; } .trd-calendar-nav strong { min-width: 170px; text-align: center; text-transform: capitalize; } .trd-view-toggle { display: inline-flex; border: 1px solid var(--trd-line); border-radius: 6px; overflow: hidden; } .trd-view-toggle button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 13px; border: none; background: #ffffff; color: var(--trd-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; } .trd-view-toggle button + button { border-left: 1px solid var(--trd-line); } .trd-view-toggle button.active { background: var(--trd-ink); color: #ffffff; } .trd-view-toggle button:hover:not(.active) { background: #fbfaf8; color: var(--trd-ink); } .trd-today-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 13px; border: 1px solid var(--trd-line); border-radius: 6px; background: #ffffff; color: var(--trd-ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; } .trd-today-btn:hover { background: #fbfaf8; border-color: #d1cdc7; } /* ── Calendar summary ──────────────────────────────────────────────────────── */ .trd-app .trd-calendar-summary { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; margin: 18px 0; } .trd-calendar-summary div { padding: 14px; border: 1px solid var(--trd-line); border-radius: 8px; background: var(--trd-soft); } .trd-calendar-summary strong { display: block; color: var(--trd-ink); font-size: 26px; line-height: 1; } .trd-calendar-summary span { display: block; margin-top: 5px; color: var(--trd-muted); font-size: 13px; } /* ── Calendar: month view ──────────────────────────────────────────────────── */ .trd-app .trd-calendar-month { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px; } .trd-calendar-weekday { color: var(--trd-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; } .trd-calendar-day { min-height: 122px; padding: 9px; border: 1px solid var(--trd-line); border-radius: 8px; background: #ffffff; overflow: hidden; } .trd-calendar-day.muted { background: #fbfaf8; border-style: dashed; } .trd-calendar-day.today { border-color: #d7b98a; background: #fffdf7; } .trd-calendar-day header { margin-bottom: 7px; color: var(--trd-ink); font-size: 13px; font-weight: 800; } /* ── Calendar: week view ───────────────────────────────────────────────────── */ .trd-app .trd-calendar-week { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px; } .trd-calendar-week-col { min-height: 180px; padding: 10px; border: 1px solid var(--trd-line); border-radius: 8px; background: #ffffff; display: flex; flex-direction: column; gap: 8px; } .trd-calendar-week-col.today { border-color: #d7b98a; background: #fffdf7; box-shadow: 0 2px 12px rgba(215, 185, 138, .15); } .trd-calendar-week-col.muted { background: #fbfaf8; border-style: dashed; } .trd-calendar-week-header { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--trd-line); margin-bottom: 2px; } .trd-calendar-week-header .trd-week-dayname { color: var(--trd-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .trd-calendar-week-header .trd-week-daynum { color: var(--trd-ink); font-size: 22px; font-weight: 800; line-height: 1; } .trd-calendar-week-col.today .trd-week-daynum { color: var(--trd-red); } .trd-calendar-week-header .trd-week-monthname { color: var(--trd-muted); font-size: 11px; font-weight: 600; text-transform: capitalize; } .trd-calendar-week-events { display: grid; gap: 5px; flex: 1; } .trd-calendar-week-empty { color: var(--trd-muted); font-size: 11px; font-style: italic; padding: 4px 0; } /* ── Calendar event chip (shared between month & week) ─────────────────────── */ .trd-calendar-events { display: grid; gap: 5px; } .trd-calendar-event { display: grid; gap: 2px; padding: 7px 8px; border: 1px solid #f1c6c6; border-radius: 6px; background: #fff8f7; color: var(--trd-ink); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; } /* Explicit overrides for ALL pseudo-states — prevents theme a:hover { color:white } bleeds */ a.trd-calendar-event, a.trd-calendar-event:link, a.trd-calendar-event:visited { color: var(--trd-ink); text-decoration: none; background: #fff8f7; } a.trd-calendar-event:hover, .trd-calendar-event:hover { border-color: var(--trd-red) !important; background: #fff1f0 !important; box-shadow: 0 2px 8px rgba(196, 26, 26, .12) !important; color: var(--trd-ink) !important; text-decoration: none !important; } a.trd-calendar-event:hover strong, .trd-calendar-event:hover strong { color: var(--trd-red-dark) !important; } a.trd-calendar-event:hover span, .trd-calendar-event:hover span { color: var(--trd-ink) !important; } a.trd-calendar-event:hover em, .trd-calendar-event:hover em { color: var(--trd-muted) !important; } .trd-calendar-event strong { color: var(--trd-red-dark); font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; } /* Client name — most prominent */ .trd-calendar-event span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; line-height: 1.3; color: var(--trd-ink); } /* Judecatoria — muted, smaller */ .trd-calendar-event em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-style: normal; line-height: 1.2; color: var(--trd-muted); } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .trd-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .trd-shell { padding: 16px; } .trd-topbar, .trd-toolbar, .trd-card-top { align-items: stretch; flex-direction: column; } .trd-topbar h2 { font-size: 25px; } .trd-app .trd-calendar-summary, .trd-grid, .trd-details { grid-template-columns: 1fr; } /* Stats compact pe un singur rând pe mobil */ .trd-stats { display: flex; flex-direction: row; gap: 6px; margin: 12px 0; } .trd-stats div { flex: 1; padding: 8px 6px; display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; } .trd-stats strong { font-size: 18px; flex-shrink: 0; } .trd-stats span { font-size: 10px; margin-top: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; } /* Month view: collapse to list */ .trd-app .trd-calendar-month { grid-template-columns: 1fr !important; } .trd-calendar-day.muted, .trd-calendar-weekday { display: none; } /* Week view: horizontal scroll with snap */ .trd-app .trd-calendar-week { grid-template-columns: repeat(7, 82vw) !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .trd-calendar-week-col { scroll-snap-align: center; min-height: 200px; } /* Calendar controls stack */ .trd-calendar-controls { flex-direction: column; align-items: stretch; gap: 10px; } .trd-calendar-controls > * { justify-content: center; } .trd-toolbar input { max-width: none; } .trd-badges { justify-content: flex-start; } } /* ── Tooltip premium pentru calendar ───────────────────────────────────── */ .trd-cal-tooltip { position: fixed; z-index: 999999; pointer-events: none; min-width: 210px; max-width: 280px; padding: 12px 14px; background: var(--trd-ink); color: #ffffff; border-radius: 10px; box-shadow: 0 12px 32px rgba(26, 22, 16, .28), 0 2px 8px rgba(26, 22, 16, .14); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; } .trd-cal-tooltip--visible { opacity: 1; transform: translateY(0); } .trd-tt-row { line-height: 1.35; } .trd-tt-row + .trd-tt-row { margin-top: 5px; } .trd-tt-time { font-size: 12px; font-weight: 800; color: #f4c97a; letter-spacing: .04em; } .trd-tt-client { font-size: 14px; font-weight: 700; color: #ffffff; } .trd-tt-court { font-size: 12px; color: rgba(255,255,255,.72); } .trd-tt-num { font-size: 11px; color: rgba(255,255,255,.50); font-family: ui-monospace, monospace; letter-spacing: .03em; margin-top: 7px !important; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.12); } .trd-tt-panel { font-size: 11px; color: rgba(255,255,255,.50); margin-top: 2px !important; } .trd-tt-stage { font-size: 11px; color: rgba(255,255,255,.60); font-style: italic; } .trd-tt-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; } .trd-tt-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 20px; line-height: 1.5; background: rgba(255,255,255,.15); color: #fff; } .trd-tt-badge--needs_review { background: rgba(220,80,40,.55); } .trd-tt-badge--monitoring { background: rgba(30,160,100,.55); } .trd-tt-badge--verified { background: rgba(30,130,220,.55); } .trd-tt-badge--archived { background: rgba(255,255,255,.15); } .trd-tt-badge--high { background: rgba(220,60,60,.45); } .trd-tt-badge--low { background: rgba(255,255,255,.10); color: rgba(255,255,255,.6); } /* ── Card highlight pulse la click din calendar ─────────────────────────── */ @keyframes trd-pulse { 0% { box-shadow: 0 0 0 0 rgba(196, 26, 26, .35); } 60% { box-shadow: 0 0 0 10px rgba(196, 26, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 26, 26, 0); } } .trd-card--highlight { animation: trd-pulse .8s ease 2; border-left-color: var(--trd-red) !important; } /* ===== THEME OVERRIDE HARD RESET ===== */ .trd-app *, .trd-app *::before, .trd-app *::after{ box-sizing:border-box; } .trd-app button{ appearance:none; -webkit-appearance:none; background-image:none !important; font-family:inherit; } .trd-app .trd-tabs, .trd-app .trd-court-tabs{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; align-items:center !important; } .trd-app .trd-tabs button, .trd-app .trd-court-tabs button{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; white-space:nowrap !important; background:#ffffff !important; color:var(--trd-ink) !important; border:1px solid var(--trd-line) !important; border-radius:6px !important; padding:10px 14px !important; margin:0 !important; line-height:1.2 !important; box-shadow:none !important; } .trd-app .trd-tabs button.active{ background:var(--trd-ink) !important; color:#ffffff !important; border-color:var(--trd-ink) !important; } .trd-app .trd-court-tabs button.active{ background:#fff7e6 !important; color:#784500 !important; border-color:#d7b98a !important; } /* ── Autocomplete Instanță ─────────────────────────────────────────── */ .trd-app .trd-autocomplete { position: relative; } .trd-app .trd-autocomplete input[type="text"] { width: 100%; box-sizing: border-box; } .trd-app .trd-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 999; background: #fff; border: 1px solid var(--trd-line, #ddd); border-top: none; border-radius: 0 0 6px 6px; max-height: 220px; overflow-y: auto; list-style: none; margin: 0; padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.10); } .trd-app .trd-autocomplete-list li { padding: 8px 14px; cursor: pointer; font-size: 0.9rem; line-height: 1.4; outline: none; } .trd-app .trd-autocomplete-list li:hover, .trd-app .trd-autocomplete-list li:focus { background: var(--trd-accent-bg, #fff7e6); color: var(--trd-ink, #1a1a1a); } /* ── Tooltip Obiect/Stadiu labels ─────────────────────────────────── */ .trd-cal-tooltip .trd-tt-label { font-weight: 600; opacity: 0.7; margin-right: 4px; } .trd-cal-tooltip .trd-tt-object, .trd-cal-tooltip .trd-tt-stage { font-size: 0.82rem; padding-top: 2px; } /* ── Topbar actions group ──────────────────────────────────────────── */ .trd-app .trd-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ── Sync All button ───────────────────────────────────────────────── */ .trd-app .trd-sync-all-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .trd-app .trd-sync-all-btn svg { flex-shrink: 0; transition: transform 0.3s ease; } .trd-app .trd-sync-all-btn.trd-sync-spinning svg { animation: trd-spin 1s linear infinite; } @keyframes trd-spin { to { transform: rotate(360deg); } } /* ── Sync progress bar ─────────────────────────────────────────────── */ .trd-app .trd-sync-progress { margin: 0 0 18px 0; } .trd-app .trd-sync-progress-inner { background: #fff; border: 1px solid var(--trd-line, #e5e5e5); border-radius: 10px; padding: 14px 18px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .trd-app .trd-sync-progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .trd-app .trd-sync-progress-title { font-weight: 600; font-size: 0.88rem; color: var(--trd-ink, #1a1a1a); letter-spacing: 0.01em; } .trd-app .trd-sync-progress-count { font-size: 0.82rem; font-variant-numeric: tabular-nums; color: #888; font-weight: 500; } .trd-app .trd-sync-track { height: 5px; background: var(--trd-line, #ebebeb); border-radius: 99px; overflow: hidden; margin-bottom: 9px; } .trd-app .trd-sync-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #f5a623, #e8831a); border-radius: 99px; transition: width 0.35s cubic-bezier(.4,0,.2,1); } .trd-app .trd-sync-status { font-size: 0.8rem; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }