/* InsurMe — Component Styles * Companion to tokens.css. Loads after Tailwind. * Implements the components catalogued in 04-design-system.md. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--color-ink); background: var(--color-surface-muted); font-size: var(--type-body); line-height: var(--type-body-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Swiss-typography defaults: kerned, standard ligatures, lining figures. */ font-feature-settings: var(--font-features-body), "lnum" 1; text-rendering: optimizeLegibility; } body { min-height: 100vh; background: radial-gradient(circle at 8% -8%, rgba(46,217,195,0.10), transparent 28rem), var(--color-surface-muted); } ::selection { background: var(--color-accent-bright); color: var(--color-primary); } button, input, textarea, select { font: inherit; } button { color: inherit; } /* German text gets soft hyphenation. The lang attribute on must be * de-CH for the browser to use Swiss-German hyphenation dictionaries. */ :lang(de) p, :lang(de) li, :lang(de) .im-small, :lang(de) .im-muted, :lang(de) .field-helper, :lang(de) .consent-desc, :lang(de) .ai-utterance-body, :lang(de) .lede { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; } /* Tabular numerals everywhere numbers compete for column alignment. * Prices, table cells, mono blocks, and KPI tiles all get tnum so digit * widths match. */ .tbl td, .tbl th, .im-mono, .kpi-value, .kpi-num, .kpi-mini-num, .stat-num, .rec-price, .detail-price, .gauge-num, .policy-price, .hero-meta-num, .deadline-num, .funnel-num, .wait-time, .countdown-num { font-feature-settings: var(--font-features-num); font-variant-numeric: tabular-nums lining-nums; } /* Swiss-style quotation marks: «...» as the primary level, ‹...› nested. */ q { quotes: "«" "»" "‹" "›"; } :lang(de) q { quotes: "«\00a0" "\00a0»" "‹\00a0" "\00a0›"; } :lang(fr) q { quotes: "«\00a0" "\00a0»" "‹\00a0" "\00a0›"; } blockquote { quotes: "«" "»"; } /* Tighten heading tracking — Swiss display type wants tight letter-spacing. */ .im-display, .im-h1 { letter-spacing: -0.02em; } .im-h2, .im-h3 { letter-spacing: -0.01em; } /* ──────────────── Dev preview bar (top of every mockup) ──────────────── */ .dev-bar { position: sticky; top: 0; z-index: 50; background: #06262D; color: rgba(255,255,255,0.92); padding: 8px 16px; font-size: 12px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); } .dev-bar a { color: var(--color-accent-bright); text-decoration: none; padding: 2px 8px; border-radius: 4px; } .dev-bar a:hover { background: rgba(255,255,255,0.08); } .dev-bar .dev-bar-section { display: flex; gap: 4px; align-items: center; } .dev-bar .dev-bar-section + .dev-bar-section { border-left: 1px solid rgba(255,255,255,0.15); padding-left: 16px; } .dev-bar .dev-bar-label { color: rgba(255,255,255,0.5); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; } /* ──────────────── Container ──────────────── */ .im-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-desktop); } @media (max-width: 1024px) { .im-container { padding: 0 var(--container-pad-tablet); } } @media (max-width: 768px) { .im-container { padding: 0 var(--container-pad-mobile); } } /* ──────────────── Typography ──────────────── */ .im-display { font-size: var(--type-display); line-height: var(--type-display-lh); font-weight: 600; letter-spacing: -0.02em; color: var(--color-primary); margin: 0; } .im-h1 { font-size: var(--type-h1); line-height: var(--type-h1-lh); font-weight: 600; letter-spacing: -0.01em; color: var(--color-primary); margin: 0; } .im-h2 { font-size: var(--type-h2); line-height: var(--type-h2-lh); font-weight: 600; color: var(--color-ink); margin: 0; } .im-h3 { font-size: var(--type-h3); line-height: var(--type-h3-lh); font-weight: 600; color: var(--color-ink); margin: 0; } .im-h4 { font-size: var(--type-h4); line-height: var(--type-h4-lh); font-weight: 600; color: var(--color-ink); margin: 0; } .im-small { font-size: var(--type-small); line-height: var(--type-small-lh); color: var(--color-ink-muted); } .im-micro { font-size: var(--type-micro); line-height: var(--type-micro-lh); color: var(--color-ink-subtle); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .im-mono { font-family: var(--font-mono); font-size: var(--type-small); font-weight: 500; } .im-muted { color: var(--color-ink-muted); } .im-subtle { color: var(--color-ink-subtle); } /* ──────────────── Buttons ──────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background var(--motion-quick), border-color var(--motion-quick), color var(--motion-quick), box-shadow var(--motion-quick), transform var(--motion-quick); text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); color: white; box-shadow: 0 5px 14px rgba(1,80,72,0.18); } .btn-primary:hover { background: var(--color-primary-700); box-shadow: 0 8px 20px rgba(1,80,72,0.24); } .btn-accent { background: var(--color-accent-bright); color: var(--color-primary); box-shadow: 0 5px 14px rgba(46,217,195,0.24); } .btn-accent:hover { background: var(--color-accent); color: var(--color-primary); } .btn-secondary { background: white; color: var(--color-primary); border-color: var(--color-line-strong); } .btn-secondary:hover { border-color: var(--color-primary); } .btn-tertiary { background: transparent; color: var(--color-primary); padding: 0 8px; } .btn-tertiary:hover { color: var(--color-primary-700); text-decoration: underline; text-underline-offset: 4px; } .btn-danger { background: white; color: var(--color-danger); border-color: var(--color-danger); } .btn-danger:hover { background: var(--color-danger-soft); } .btn-lg { height: 48px; padding: 0 24px; font-size: 16px; } .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ──────────────── Cards ──────────────── */ .card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-line); transition: border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-base); } .card-interactive:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card-flat { background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-line); padding: 16px; } .card-highlighted { background: linear-gradient(180deg, rgba(46,217,195,0.06), rgba(46,217,195,0.0)); border: 2px solid var(--color-accent); border-radius: var(--radius-lg); padding: 24px; position: relative; } .card-warning { background: var(--color-warning-soft); border: 1px solid #E0B879; border-radius: var(--radius-lg); padding: 20px; } .card-danger { background: var(--color-danger-soft); border: 1px solid #DDA39D; border-radius: var(--radius-lg); padding: 20px; } .card-success { background: var(--color-success-soft); border: 1px solid #98D1BD; border-radius: var(--radius-lg); padding: 20px; } .card-info { background: var(--color-info-soft); border: 1px solid #9DC6D8; border-radius: var(--radius-lg); padding: 20px; } /* ──────────────── Fields ──────────────── */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: var(--type-small); font-weight: 600; color: var(--color-ink); } .field-input { height: 48px; padding: 0 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); font-family: inherit; font-size: 16px; color: var(--color-ink); background: white; transition: border-color var(--motion-quick), box-shadow var(--motion-quick); } .field-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--shadow-focus); } .field-input:disabled { background: var(--color-surface-sunken); color: var(--color-ink-muted); } .field-helper { font-size: var(--type-small); color: var(--color-ink-muted); } .field-error { font-size: var(--type-small); color: var(--color-danger); } textarea.field-input { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; } /* ──────────────── Chip / Pill ──────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line-strong); color: var(--color-ink); font-size: var(--type-small); font-weight: 500; cursor: pointer; transition: all var(--motion-quick); user-select: none; } .chip:hover { border-color: var(--color-primary); } .chip-selected { background: var(--color-primary); color: white; border-color: var(--color-primary); } .chip-selected:hover { background: var(--color-primary-700); } .chip-disabled { opacity: 0.5; cursor: not-allowed; } .chip-soft { background: var(--color-surface-muted); border-color: var(--color-line); } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .badge-accent { background: var(--color-accent-bright); color: var(--color-primary); } .badge-success { background: var(--color-success-soft); color: var(--color-success); } .badge-warning { background: var(--color-warning-soft); color: var(--color-warning); } .badge-info { background: var(--color-info-soft); color: var(--color-info); } .badge-muted { background: var(--color-surface-sunken); color: var(--color-ink-muted); } /* ──────────────── Banner ──────────────── */ .banner { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid; } .banner-info { background: var(--color-info-soft); border-color: #9DC6D8; color: var(--color-info); } .banner-warning { background: var(--color-warning-soft); border-color: #E0B879; color: var(--color-warning); } .banner-danger { background: var(--color-danger-soft); border-color: #DDA39D; color: var(--color-danger); } .banner-success { background: var(--color-success-soft); border-color: #98D1BD; color: var(--color-success); } /* ──────────────── App chrome (top nav + side nav) ──────────────── */ .topbar { background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--color-line); position: sticky; top: 33px; z-index: 40; backdrop-filter: blur(16px); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .topbar-logo { display: inline-flex; align-items: center; flex: 0 0 auto; width: 218px; height: 64px; background: url("../design-assets/logo-horizontal.png") left center / contain no-repeat; overflow: hidden; color: transparent; font-size: 0; line-height: 0; text-decoration: none; } .topbar-logo:hover { text-decoration: none; } .topbar-logo-dot { display: none; } .admin-logo { display: block !important; width: 176px !important; height: 58px !important; margin: 0 8px 16px !important; padding: 0 !important; border: 0 !important; border-radius: var(--radius-md) !important; background: #fff url("../design-assets/logo-horizontal.png") center / 166px auto no-repeat !important; box-shadow: 0 8px 22px rgba(0,0,0,0.16) !important; overflow: hidden !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; } .admin-logo > * { display: none !important; } .admin-logo-dot { display: none !important; } .topbar-nav { display: flex; gap: 4px; align-items: center; } .topbar-link { color: var(--color-ink); font-weight: 500; font-size: 15px; padding: 8px 14px; border-radius: var(--radius-md); text-decoration: none; } .topbar-link:hover { background: var(--color-surface-muted); } .topbar-link-active { background: var(--color-surface-muted); color: var(--color-primary); } .sidebar { width: 240px; background: white; border-right: 1px solid var(--color-line); padding: 24px 16px; height: 100vh; position: sticky; top: 0; } .sidebar-section { margin-bottom: 24px; } .sidebar-label { font-size: 11px; font-weight: 600; color: var(--color-ink-subtle); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 12px; margin-bottom: 6px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); color: var(--color-ink); text-decoration: none; font-size: 14px; font-weight: 500; } .sidebar-link:hover { background: var(--color-surface-muted); } .sidebar-link-active { background: var(--color-primary); color: white; } /* ──────────────── Stepper ──────────────── */ .stepper { display: flex; align-items: center; gap: 8px; } .stepper-step { display: flex; align-items: center; gap: 8px; padding: 4px 8px; } .stepper-bullet { width: 24px; height: 24px; border-radius: 50%; background: var(--color-surface-sunken); color: var(--color-ink-muted); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .stepper-step-active .stepper-bullet { background: var(--color-accent); color: var(--color-primary); } .stepper-step-done .stepper-bullet { background: var(--color-primary); color: white; } .stepper-label { font-size: 13px; font-weight: 500; color: var(--color-ink-muted); } .stepper-step-active .stepper-label { color: var(--color-primary); } .stepper-step-done .stepper-label { color: var(--color-ink); } .stepper-divider { width: 32px; height: 1px; background: var(--color-line); } /* ──────────────── Confidence dots ──────────────── */ .conf { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .conf-dot { width: 8px; height: 8px; border-radius: 50%; } .conf-high .conf-dot { background: var(--color-success); } .conf-mid .conf-dot { background: var(--color-warning); } .conf-low .conf-dot { background: var(--color-danger); } .conf-high { color: var(--color-success); } .conf-mid { color: var(--color-warning); } .conf-low { color: var(--color-danger); } /* ──────────────── AI utterance ──────────────── */ .ai-utterance { background: linear-gradient(180deg, rgba(46,217,195,0.08), rgba(46,217,195,0.02)); border: 1px solid rgba(46,217,195,0.4); border-radius: var(--radius-lg); padding: 16px 20px; } .ai-utterance-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.06em; } .ai-spark { width: 14px; height: 14px; color: var(--color-accent); } .ai-utterance-body { color: var(--color-ink); font-size: 15px; line-height: 22px; } .ai-utterance-actions { display: flex; gap: 8px; margin-top: 12px; } /* ──────────────── Tables ──────────────── */ .tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { padding: 12px 16px; text-align: left; font-size: 14px; } .tbl th { color: var(--color-ink-subtle); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; border-bottom: 1px solid var(--color-line); } .tbl td { border-bottom: 1px solid var(--color-line); color: var(--color-ink); } .tbl tr:last-child td { border-bottom: none; } .tbl tr:hover td { background: var(--color-surface-muted); } /* ──────────────── Misc helpers ──────────────── */ .divider { height: 1px; background: var(--color-line); margin: 24px 0; } .row { display: flex; gap: 12px; align-items: center; } .col { display: flex; flex-direction: column; gap: 12px; } .between { display: flex; align-items: center; justify-content: space-between; } .grow { flex-grow: 1; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ──────────────── Language switcher ──────────────── */ .lang-switcher { display: inline-flex; background: var(--color-surface-muted); border-radius: var(--radius-pill); padding: 3px; border: 1px solid var(--color-line); gap: 2px; } .lang-switcher button, .lang-switcher a { background: transparent; border: none; padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--color-ink-muted); border-radius: var(--radius-pill); cursor: pointer; letter-spacing: 0.06em; font-family: inherit; text-decoration: none; text-transform: uppercase; font-feature-settings: var(--font-features-num); line-height: 1; } .lang-switcher button:hover, .lang-switcher a:hover { color: var(--color-primary); text-decoration: none; } .lang-switcher .lang-active, .lang-switcher button[aria-current="true"], .lang-switcher a[aria-current="true"] { background: var(--color-primary); color: white; } /* ──────────────── Provider logos (text-rendered for prototypes) ──────────────── */ .logo { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 80px; padding: 0 10px; background: white; border: 1px solid var(--color-line); border-radius: var(--radius-md); font-weight: 700; font-size: 13px; color: var(--color-ink); letter-spacing: -0.01em; } .logo-axa { color: #00008F; } .logo-zurich { color: #1A4B8C; } .logo-mobiliar { color: #C8102E; } .logo-helvetia { color: #006937; } .logo-baloise { color: #E1001A; } .logo-allianz { color: #003781; } .logo-tcs { color: #F39200; } .logo-smile { color: #00A887; } /* ──────────────── SVG icon helpers ──────────────── */ .ico { width: 20px; height: 20px; stroke-width: 1.75; flex-shrink: 0; } .ico-sm { width: 16px; height: 16px; stroke-width: 1.75; } .ico-lg { width: 24px; height: 24px; stroke-width: 1.75; } /* ──────────────── Phone frame (for mobile mockups) ──────────────── */ .phone-frame { width: 390px; margin: 32px auto; border-radius: 48px; border: 12px solid #06262D; background: white; overflow: hidden; box-shadow: var(--shadow-lg); height: 844px; position: relative; } .phone-frame::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 30px; background: #06262D; border-radius: 0 0 18px 18px; z-index: 10; } /* ──────────────── Feature-complete screen primitives ──────────────── */ .screen-shell { padding-top: 48px; padding-bottom: 72px; } .screen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .screen-head-copy { max-width: 760px; } .screen-head .im-h1, .screen-head .im-h2 { margin-bottom: 8px; } .screen-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .hero-panel { position: relative; overflow: hidden; padding: 40px; border-radius: var(--radius-xl); color: white; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700)); box-shadow: var(--shadow-lg); } .hero-panel::after { content: ""; position: absolute; width: 360px; height: 360px; right: -160px; top: -190px; border-radius: 50%; background: rgba(46,217,195,0.16); } .hero-panel > * { position: relative; z-index: 1; } .hero-panel .im-h1, .hero-panel .im-h2, .hero-panel .im-h3 { color: white; } .hero-panel .im-muted, .hero-panel .im-small { color: rgba(255,255,255,0.72); } .surface-panel { background: rgba(255,255,255,0.94); border: 1px solid var(--color-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .panel-pad { padding: 28px; } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .metric-card { padding: 18px; background: white; border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .metric-label { font-size: 11px; line-height: 16px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--color-ink-muted); } .metric-value { margin-top: 4px; font-size: 28px; line-height: 34px; letter-spacing: -.02em; font-weight: 650; color: var(--color-primary); font-variant-numeric: tabular-nums; } .metric-detail { margin-top: 4px; font-size: 12px; line-height: 17px; color: var(--color-ink-muted); } .content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .content-grid-wide { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); } .stack { display: flex; flex-direction: column; gap: 16px; } .inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .progress-track { height: 8px; background: var(--color-surface-sunken); overflow: hidden; border-radius: var(--radius-pill); } .progress-value { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright)); } .progress-value-warning { background: var(--color-warning); } .progress-value-danger { background: var(--color-danger); } .state-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: white; } .state-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-sunken); color: var(--color-primary); font-weight: 700; } .state-icon-success { background: var(--color-success-soft); color: var(--color-success); } .state-icon-warning { background: var(--color-warning-soft); color: var(--color-warning); } .state-icon-danger { background: var(--color-danger-soft); color: var(--color-danger); } .state-icon-info { background: var(--color-info-soft); color: var(--color-info); } .choice-card { display: block; padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: white; cursor: pointer; transition: border-color var(--motion-quick), box-shadow var(--motion-quick), background var(--motion-quick); } .choice-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); text-decoration: none; } .choice-card-selected { border: 2px solid var(--color-accent); padding: 17px; background: linear-gradient(180deg, rgba(46,217,195,.08), white); } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .field-span-2 { grid-column: span 2; } .field-select { appearance: none; height: 48px; padding: 0 42px 0 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); color: var(--color-ink); background: white; } .check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--color-ink-muted); } .check-row input { margin-top: 3px; accent-color: var(--color-primary); } .segmented { display: inline-flex; padding: 4px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: white; gap: 2px; } .segmented button { border: 0; background: transparent; border-radius: 7px; padding: 7px 12px; cursor: pointer; color: var(--color-ink-muted); font-size: 13px; font-weight: 600; } .segmented button.active { background: var(--color-primary); color: white; } .switch { width: 42px; height: 24px; border: 0; padding: 2px; border-radius: var(--radius-pill); background: var(--color-line-strong); cursor: pointer; transition: background var(--motion-quick); } .switch::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: var(--shadow-sm); transition: transform var(--motion-quick); } .switch[aria-checked="true"] { background: var(--color-accent); } .switch[aria-checked="true"]::after { transform: translateX(18px); } .timeline { position: relative; display: flex; flex-direction: column; gap: 18px; } .timeline::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--color-line); } .timeline-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; } .timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; z-index: 1; border: 2px solid white; background: var(--color-primary); color: white; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 1px var(--color-line); } .timeline-dot-muted { background: var(--color-surface-sunken); color: var(--color-ink-muted); } .data-list { display: flex; flex-direction: column; } .data-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-line); align-items: center; } .data-row:last-child { border-bottom: 0; } .table-scroll { overflow-x: auto; border-radius: var(--radius-lg); } .sticky-actions { position: sticky; bottom: 16px; z-index: 20; margin-top: 24px; padding: 12px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: rgba(255,255,255,.94); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); } .toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .toast { max-width: 360px; padding: 12px 16px; border: 1px solid rgba(46,217,195,.5); border-radius: var(--radius-md); background: var(--color-primary); color: white; box-shadow: var(--shadow-lg); font-size: 14px; animation: toast-in var(--motion-base) ease-out; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .mobile-only { display: none; } @media (max-width: 1024px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .content-grid, .content-grid-wide { grid-template-columns: 1fr; } .topbar-inner { gap: 12px; } .topbar .stepper { display: none; } } @media (max-width: 768px) { .dev-bar { position: static; overflow-x: auto; white-space: nowrap; } .dev-bar > span:not(.dev-bar-label) { display: none; } .dev-bar .dev-bar-section + .dev-bar-section { border-left: 0; padding-left: 0; } .topbar { top: 0; } .topbar-inner { height: 64px; } .topbar-nav .topbar-link:not(.topbar-link-active) { display: none; } .screen-shell { padding-top: 28px; padding-bottom: 48px; } .screen-head { flex-direction: column; margin-bottom: 20px; } .hero-panel { padding: 28px 22px; border-radius: var(--radius-lg); } .panel-pad { padding: 20px; } .metric-grid, .field-grid { grid-template-columns: 1fr; } .field-span-2 { grid-column: auto; } .row, .between { flex-wrap: wrap; } .inline-actions .btn, .sticky-actions .btn { flex: 1 1 auto; min-height: 44px; } .stepper { overflow-x: auto; padding-bottom: 4px; } .stepper-label { display: none; } .stepper-divider { min-width: 16px; } .card, .card-highlighted { padding: 20px; } .tbl { min-width: 680px; } .mobile-only { display: block; } .desktop-only { display: none !important; } }