/* ============================================================ App shell — mockup-only styles that accompany tokens.css Used by every mockup HTML file. Non-Vue, static markup. NOTE: mobile responsive styles live in ./mobile.css. Mockups should include mobile.css AFTER app-shell.css: ============================================================ Canonical structure:

...

BUSINESS CONTENT

============================================================ */ .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: var(--color-bg-app); transition: grid-template-columns var(--motion-normal) var(--ease-standard); } .app--no-nav { grid-template-columns: 1fr; } .app.is-nav-collapsed { grid-template-columns: 56px 1fr; } /* ---- SideNav (static mockup version) ---- */ .nav { border-right: 1px solid var(--color-border-default); background: var(--color-bg-subtle); padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: 0; height: 100vh; overflow: hidden; } .nav__brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); } .nav__logo { width: 28px; height: 28px; flex-shrink: 0; background: var(--color-bg-muted); border-radius: var(--radius-md); display: grid; place-items: center; color: var(--color-text-tertiary); font-size: 11px; font-weight: 700; } .nav__brand-name { font-style: italic; color: var(--color-text-tertiary); font-size: var(--text-sm); white-space: nowrap; } .nav__collapse { margin-left: auto; background: transparent; border: 0; color: var(--color-text-tertiary); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1; } .nav__collapse:hover { background: var(--color-bg-muted); color: var(--color-text-primary); } .nav__scroll { flex: 1; overflow-y: auto; margin-right: calc(-1 * var(--space-2)); padding-right: var(--space-2); display: flex; flex-direction: column; gap: 2px; } .nav__section { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-xs); color: var(--color-text-tertiary); letter-spacing: 0.04em; white-space: nowrap; } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-3); font-size: var(--text-base); color: var(--color-text-secondary); border-radius: var(--radius-md); white-space: nowrap; } .nav a:hover { background: var(--color-bg-muted); color: var(--color-text-primary); text-decoration: none; } .nav a.is-active { background: var(--color-bg-muted); color: var(--color-text-primary); font-weight: var(--weight-medium); } .nav a .glyph { width: 18px; text-align: center; color: var(--color-text-tertiary); font-size: 14px; flex-shrink: 0; } .nav a.is-active .glyph { color: var(--color-brand-primary); } .nav__footer { margin-top: auto; padding: var(--space-3); font-size: var(--text-xs); color: var(--color-text-tertiary); border-top: 1px solid var(--color-border-subtle); white-space: nowrap; } /* Collapsed rail */ .app.is-nav-collapsed .nav { padding: var(--space-3) 0; } .app.is-nav-collapsed .nav__brand-name, .app.is-nav-collapsed .nav__footer, .app.is-nav-collapsed .nav__section, .app.is-nav-collapsed .nav a .label, .app.is-nav-collapsed .nav a .tag-muted { display: none; } .app.is-nav-collapsed .nav__brand { justify-content: center; padding: var(--space-2) 0; } .app.is-nav-collapsed .nav__collapse { margin: 0; } .app.is-nav-collapsed .nav a { justify-content: center; padding: var(--space-2); gap: 0; } .app.is-nav-collapsed .nav a .glyph { width: auto; } .app.is-nav-collapsed .nav__scroll { margin-right: 0; padding-right: 0; } /* ---- TopBar ---- */ .tb { position: sticky; top: 0; z-index: var(--z-sticky); height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5); background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default); } .tb__left, .tb__right { display: flex; align-items: center; gap: var(--space-3); } .tb__right { gap: var(--space-2); } .tb__brand { display: flex; align-items: center; gap: var(--space-2); } .tb__brand-logo { width: 22px; height: 22px; background: var(--color-bg-muted); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--color-text-tertiary); font-size: 10px; font-weight: 700; } .tb__brand-name.is-placeholder { font-style: italic; color: var(--color-text-tertiary); font-weight: var(--weight-regular); } .tb__brand-name { font-weight: var(--weight-semi); font-size: var(--text-base); color: var(--color-text-primary); } .tb__crumbs { display: flex; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); } .tb__crumbs a { color: var(--color-text-secondary); padding: 2px 4px; border-radius: var(--radius-sm); } .tb__crumbs a:hover { background: var(--color-bg-muted); color: var(--color-text-primary); text-decoration: none; } .tb__crumbs .sep { color: var(--color-text-tertiary); } .tb__crumbs .current { color: var(--color-text-primary); font-weight: var(--weight-medium); } .tb__search { position: relative; width: 400px; max-width: 40vw; } .tb__search input { width: 100%; height: 32px; padding: 0 56px 0 32px; background: var(--color-bg-subtle); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text-primary); font: inherit; font-size: var(--text-sm); } .tb__search input:focus { outline: none; border-color: var(--color-border-default); background: var(--color-bg-surface); } .tb__search input::placeholder { color: var(--color-text-tertiary); } .tb__search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); font-size: 13px; } .tb__search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); background: var(--color-bg-surface); padding: 2px 5px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); } .tb__icon-btn { width: 32px; height: 32px; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: 14px; cursor: pointer; display: grid; place-items: center; position: relative; } .tb__icon-btn:hover { background: var(--color-bg-muted); color: var(--color-text-primary); } .tb__icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; background: var(--color-danger); border-radius: 50%; } .tb__user-btn { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 2px 10px 2px 2px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--color-text-primary); font: inherit; cursor: pointer; } .tb__user-btn:hover { background: var(--color-bg-muted); border-color: var(--color-border-subtle); } .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand-ink); display: grid; place-items: center; font-weight: var(--weight-semi); font-size: 12px; } .avatar--sm { width: 22px; height: 22px; font-size: 11px; } .avatar--lg { width: 40px; height: 40px; font-size: 15px; } .avatar--blue { background: var(--color-kpi-blue); color: var(--color-kpi-blue-ink); } .avatar--green { background: var(--color-kpi-green); color: var(--color-kpi-green-ink); } .avatar--amber { background: var(--color-kpi-amber); color: var(--color-kpi-amber-ink); } .avatar--rose { background: var(--color-kpi-rose); color: var(--color-kpi-rose-ink); } .avatar--purple { background: var(--color-kpi-purple); color: var(--color-kpi-purple-ink); } .tb__user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); } .tb__user-role { font-size: var(--text-xs); color: var(--color-text-tertiary); background: var(--color-bg-muted); padding: 1px 6px; border-radius: var(--radius-pill); } /* Dropdown shells used by theme toggle / notification / user menus */ .tb__dd { position: relative; } .tb__menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); list-style: none; padding: 4px; margin: 0; min-width: 180px; z-index: var(--z-drawer, 40); } .tb__menu--sm { min-width: 140px; } .tb__menu button, .tb__menu a { width: 100%; text-align: left; padding: 6px 10px; display: flex; align-items: center; gap: var(--space-2); background: transparent; border: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); color: var(--color-text-primary); border-radius: var(--radius-sm); text-decoration: none; } .tb__menu button:hover, .tb__menu a:hover { background: var(--color-bg-muted); } .tb__menu .is-active { color: var(--color-brand-primary); font-weight: var(--weight-medium); } .tb__menu-sep { height: 1px; background: var(--color-border-subtle); margin: 4px 0; } .tb__menu-danger { color: var(--color-danger) !important; } .tb__notify-list { padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 6px; } .tb__notify-item { display: flex; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-secondary); } .tb__notify-item .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--color-brand-primary); } /* ---- Main layout ---- */ .main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .page { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); max-width: 1400px; width: 100%; } /* Legacy role-chip (kept for content/* pages before refactor) */ .role-chip { padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); background: var(--color-brand-soft); color: var(--color-brand-ink); font-weight: var(--weight-medium); } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .page-header h1 { margin: 0 0 4px; font-size: var(--text-2xl); font-weight: var(--weight-semi); color: var(--color-text-primary); } .page-header p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); } .page-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } /* ---- Button (static mockup class) ---- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); color: var(--color-text-primary); font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease; } .btn:hover { background: var(--color-bg-muted); } .btn--primary { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: #fff; } .btn--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); } .btn--ghost { background: transparent; border-color: transparent; } .btn--ghost:hover { background: var(--color-bg-muted); } .btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; } .btn--danger:hover { background: var(--color-danger-ink); border-color: var(--color-danger-ink); } .btn--sm { height: 26px; padding: 0 var(--space-3); font-size: var(--text-sm); } .btn--lg { height: 40px; padding: 0 var(--space-5); font-size: var(--text-lg); } .btn--icon { width: 32px; padding: 0; justify-content: center; } /* ---- Card ---- */ .card { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; } .card--elevated { box-shadow: var(--shadow-md); } .card__head { padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border-subtle); gap: var(--space-3); } .card__head h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semi); } .card__head .sub { color: var(--color-text-tertiary); font-size: var(--text-xs); } .card__body { padding: var(--space-4); } .card__body--flush { padding: 0; } .card__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-size: var(--text-sm); display: flex; align-items: center; justify-content: space-between; } /* ---- Badge ---- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.4; border-radius: var(--radius-pill); white-space: nowrap; } .badge--success { color: var(--color-success-ink); background: var(--color-success-soft); } .badge--warn { color: var(--color-warn-ink); background: var(--color-warn-soft); } .badge--danger { color: var(--color-danger-ink); background: var(--color-danger-soft); } .badge--info { color: var(--color-info-ink); background: var(--color-info-soft); } .badge--neutral { color: var(--color-neutral-ink); background: var(--color-neutral-soft); } .badge--brand { color: var(--color-brand-ink); background: var(--color-brand-soft); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---- Table ---- */ .table-wrap { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); overflow: auto; } table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); } .tbl th, .tbl td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); text-align: left; vertical-align: middle; } .tbl thead th { background: var(--color-bg-subtle); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text-secondary); position: sticky; top: 0; } .tbl tbody tr { transition: background var(--motion-fast); } .tbl tbody tr:hover { background: var(--color-bg-muted); } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl .num { font-variant-numeric: tabular-nums; text-align: right; } .tbl .center { text-align: center; } .tbl .muted { color: var(--color-text-tertiary); } .tbl tr.row-danger td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); } .tbl tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--color-warn); } /* ---- KPI card ---- */ .kpi { padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); display: flex; flex-direction: column; gap: var(--space-2); min-height: 112px; } .kpi__label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); display: flex; align-items: center; justify-content: space-between; } .kpi__value { font-size: var(--text-3xl); font-weight: var(--weight-semi); line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi__unit { font-size: var(--text-base); color: var(--color-text-secondary); margin-left: 4px; } .kpi__foot { display: flex; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-tertiary); align-items: center; } .kpi__trend-up { color: var(--color-success); font-weight: var(--weight-medium); } .kpi__trend-down { color: var(--color-danger); font-weight: var(--weight-medium); } .kpi--blue { background: var(--color-kpi-blue); border-color: transparent; color: var(--color-kpi-blue-ink); } .kpi--blue .kpi__value, .kpi--blue .kpi__label { color: var(--color-kpi-blue-ink); } .kpi--green { background: var(--color-kpi-green); border-color: transparent; color: var(--color-kpi-green-ink); } .kpi--green .kpi__value, .kpi--green .kpi__label { color: var(--color-kpi-green-ink); } .kpi--purple { background: var(--color-kpi-purple); border-color: transparent; color: var(--color-kpi-purple-ink); } .kpi--purple .kpi__value, .kpi--purple .kpi__label { color: var(--color-kpi-purple-ink); } .kpi--amber { background: var(--color-kpi-amber); border-color: transparent; color: var(--color-kpi-amber-ink); } .kpi--amber .kpi__value, .kpi--amber .kpi__label { color: var(--color-kpi-amber-ink); } .kpi--rose { background: var(--color-kpi-rose); border-color: transparent; color: var(--color-kpi-rose-ink); } .kpi--rose .kpi__value, .kpi--rose .kpi__label { color: var(--color-kpi-rose-ink); } /* ---- Tabs ---- */ .tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--color-border-default); padding: 0; } .tabs a, .tabs button { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 0; border: 0; background: transparent; cursor: pointer; color: var(--color-text-secondary); text-decoration: none; font: inherit; font-size: var(--text-base); border-bottom: 2px solid transparent; position: relative; top: 1px; } .tabs a:hover, .tabs button:hover { color: var(--color-text-primary); } .tabs a.is-active, .tabs button.is-active { color: var(--color-text-primary); border-bottom-color: var(--color-brand-primary); font-weight: var(--weight-medium); } .tabs .count { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-bg-muted); color: var(--color-text-secondary); } .tabs .is-active .count { background: var(--color-brand-soft); color: var(--color-brand-ink); } /* ---- Grid / layout helpers ---- */ .grid { display: grid; gap: var(--space-4); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-8-4 { grid-template-columns: 8fr 4fr; } .grid-7-5 { grid-template-columns: 7fr 5fr; } .grid-5-7 { grid-template-columns: 5fr 7fr; } .grid-3-9 { grid-template-columns: 3fr 9fr; } .row { display: flex; align-items: center; gap: var(--space-3); } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .muted { color: var(--color-text-tertiary); } .secondary { color: var(--color-text-secondary); } /* ---- Form ---- */ .field { display: grid; gap: var(--space-2); } .field label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); } .field .req { color: var(--color-danger); } .input, .select, .textarea { width: 100%; height: 32px; padding: 0 var(--space-3); font: inherit; color: var(--color-text-primary); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .textarea { height: auto; min-height: 80px; padding: var(--space-3); line-height: var(--leading-normal); resize: vertical; } .input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .input::placeholder, .textarea::placeholder { color: var(--color-text-tertiary); } .field .hint { font-size: var(--text-xs); color: var(--color-text-tertiary); } .field .err { font-size: var(--text-xs); color: var(--color-danger); } .checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--color-text-primary); cursor: pointer; } .checkbox input, .radio input { accent-color: var(--color-brand-primary); } /* ---- Filter toolbar ---- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); } .toolbar .sep { width: 1px; align-self: stretch; background: var(--color-border-subtle); margin: 0 var(--space-2); } .toolbar .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px; background: var(--color-bg-muted); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-text-primary); } .toolbar .chip button { background: none; border: 0; color: var(--color-text-tertiary); cursor: pointer; } /* ---- Timeline ---- */ .timeline { display: flex; flex-direction: column; gap: var(--space-4); position: relative; padding-left: var(--space-5); } .timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border-default); } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-bg-surface); border: 2px solid var(--color-brand-primary); } .timeline__item--done::before { background: var(--color-brand-primary); } .timeline__time { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: 2px; } .timeline__title { font-weight: var(--weight-medium); font-size: var(--text-base); } .timeline__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; } /* ---- Chart helpers ---- */ .spark { width: 100%; height: 64px; } .chart-legend { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text-secondary); } .chart-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } /* ---- Stage ribbon (matchboard / detail header) ---- */ .steps { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-secondary); } .steps .step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--color-bg-muted); border-radius: var(--radius-pill); } .steps .step.is-active { background: var(--color-brand-soft); color: var(--color-brand-ink); font-weight: var(--weight-medium); } .steps .step.is-done { background: var(--color-success-soft); color: var(--color-success-ink); } /* ---- Theme preview stacking (two columns side-by-side) ---- */ .theme-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px dashed var(--color-border-strong); margin-top: var(--space-7); } .theme-preview-grid > .theme-preview-dark, .theme-preview-grid > .theme-preview-light { padding: 0; } .theme-preview-grid .app { min-height: 600px; } .theme-preview-label { padding: var(--space-3) var(--space-5); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-text-primary); display: flex; align-items: center; gap: var(--space-2); } /* ---- Empty state ---- */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-7) var(--space-5); gap: var(--space-3); color: var(--color-text-secondary); background: var(--color-bg-subtle); border-radius: var(--radius-lg); } .empty__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-bg-muted); display: grid; place-items: center; color: var(--color-text-tertiary); } .empty h3 { margin: 0; font-size: var(--text-lg); } .empty p { margin: 0; color: var(--color-text-secondary); max-width: 46ch; } /* ---- Misc ---- */ .divider { height: 1px; background: var(--color-border-subtle); border: 0; margin: 0; } .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-secondary); background: var(--color-bg-subtle); padding: 1px 5px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); } .tag-muted { font-size: var(--text-xs); color: var(--color-text-tertiary); background: var(--color-bg-muted); padding: 1px 6px; border-radius: var(--radius-sm); } .pill-filter { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: var(--text-sm); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); cursor: pointer; color: var(--color-text-primary); background: var(--color-bg-surface); } .pill-filter.is-active { background: var(--color-brand-soft); color: var(--color-brand-ink); border-color: transparent; } .pill-filter:hover { background: var(--color-bg-muted); } /* ---- Sparkline / mini bar chart for dashboard ---- */ .mini-chart { width: 100%; height: 120px; } .thumb { width: 56px; height: 76px; background: var(--color-bg-muted); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--color-text-tertiary); font-size: 11px; } /* ---- Money cell ---- */ .money { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); } .money--pos { color: var(--color-success); } .money--neg { color: var(--color-danger); } /* ---- Sticky bottom action bar ---- */ .sticky-bar { position: sticky; bottom: 0; background: var(--color-bg-surface); border-top: 1px solid var(--color-border-default); padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); box-shadow: 0 -4px 8px rgba(0,0,0,0.04); } /* ---- Modal (static, inline demo) ---- */ .modal-demo { position: relative; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 520px; margin: 0 auto; } .modal-demo__head { padding: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); display: flex; align-items: center; justify-content: space-between; } .modal-demo__body { padding: var(--space-5); } .modal-demo__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: flex-end; gap: var(--space-3); } /* ============ Demo bar (preview env only) ============ */ .demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: linear-gradient(90deg, #1c1b22, #27253a); color: #e7e5f8; font-size: 12px; border-top: 1px solid rgba(139,127,255,0.35); box-shadow: 0 -6px 18px rgba(0,0,0,0.18); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif; overflow-x: auto; white-space: nowrap; } .demo-bar__tag { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; background: #5145cd; color: #fff; font-weight: 600; letter-spacing: 0.08em; font-size: 10px; } .demo-bar__label strong { color: #fff; margin: 0 2px; } .demo-bar__sep { color: #8b8aa8; margin-left: 6px; } .demo-bar button { background: rgba(255,255,255,0.06); color: #e7e5f8; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; transition: all 0.15s; } .demo-bar button:hover { background: #5145cd; border-color: #5145cd; color: #fff; } .demo-bar__login { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 3px 10px; font-size: 12px; } .demo-bar__login:hover { background: rgba(239, 68, 68, 0.7); border-color: rgba(239,68,68,0.9); } /* Keep bottom-tab and sticky-bar above demo-bar on mobile */ @media (max-width: 768px) { .bottom-tab { bottom: 38px !important; } body { padding-bottom: 38px; } } /* Desktop safe spacing */ @media (min-width: 769px) { body { padding-bottom: 36px; } } /* Make table rows hoverable when demo-bound */ table.tbl tbody tr[data-demo-bound="1"]:hover { background: var(--color-bg-muted); }