.panel,.card { margin-bottom: 1rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }.panel-header,.heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }.panel-header h2,.heading h2 { margin: 0; }.panel-header a { font-size: .8rem; font-weight: 650; text-decoration: none; }
.button,button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: .5rem .85rem; border: 1px solid transparent; border-radius: 6px; background: var(--brand); color: var(--on-brand); cursor: pointer; text-decoration: none; font-weight: 650; }.button:hover,button:hover { background: var(--brand-hover); color: var(--on-brand); }.button-secondary { border-color: var(--border-strong); background: var(--surface); color: var(--text); }.button-secondary:hover,.button-quiet:hover { background: var(--surface-muted); color: var(--text); }.button-quiet { border-color: transparent; background: transparent; color: var(--text-soft); }.danger,.button-danger { background: var(--danger); color: #fff; }.icon-button { width: 38px; padding: 0; }.nav-toggle { display: none; }
.theme-picker { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }.theme-picker button { min-height: 27px; padding: .2rem .45rem; background: transparent; color: var(--muted); font-size: .69rem; }.theme-picker button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-sm); }
.metric-grid { display: grid; grid-template-columns: repeat(7,minmax(125px,1fr)); gap: .7rem; margin-bottom: 1rem; }.metric-card { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }.metric-card span,.metric-card small,.metric-card strong { display: block; }.metric-card span { overflow: hidden; color: var(--muted); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }.metric-card strong { margin: .35rem 0 .15rem; font-size: 1.55rem; letter-spacing: -.03em; }.metric-card small { font-size: .67rem; }
.record-row,.timeline-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 54px; padding: .65rem .2rem; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }.record-row:hover,.timeline-row:hover { color: var(--text); background: var(--surface-muted); }.record-row strong,.record-row small,.timeline-row strong,.timeline-row small { display: block; }.record-row strong,.timeline-row strong { font-size: .85rem; }.record-row small,.timeline-row small { font-size: .72rem; }.timeline-row { display: grid; grid-template-columns: 32px 1fr auto; }.timeline-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--surface-muted); color: var(--brand); font-size: .72rem; font-weight: 800; }
.empty-state { display: grid; justify-items: start; gap: .3rem; padding: 2rem 1rem; color: var(--muted); text-align: left; }.empty-state strong { color: var(--text); }.empty-state.compact { padding: 1rem .25rem; }.signal { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: var(--info); }.signal-danger { background: var(--danger); }.signal-warning { background: var(--warning); }
.status,.badge { display: inline-flex; align-items: center; width: max-content; padding: .22rem .48rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-muted); color: var(--text-soft); font-size: .68rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }.status-completed,.status-accepted,.status-qualified,.status-customer,.status-create { border-color: color-mix(in srgb,var(--success) 35%,var(--border)); color: var(--success); }.status-failed,.status-cancelled,.status-overdue,.status-error,.status-dismissed { border-color: color-mix(in srgb,var(--danger) 35%,var(--border)); color: var(--danger); }.status-running,.status-working,.status-update { color: var(--info); }.status-queued,.status-needs_information,.status-review { color: var(--warning); }.status-draft,.status-preview,.status-ready { color: var(--accent); }
.message,.notice { display: flex; gap: .65rem; margin-bottom: 1rem; padding: .75rem .9rem; border: 1px solid color-mix(in srgb,var(--info) 30%,var(--border)); border-left: 3px solid var(--info); border-radius: var(--radius-sm); background: color-mix(in srgb,var(--info) 6%,var(--surface)); }.message.success { border-left-color: var(--success); }.message.error,.errorlist { color: var(--danger); }.message.warning { border-left-color: var(--warning); }
.status-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap: .6rem; }.status-summary>div { display: flex; align-items: center; justify-content: space-between; padding: .75rem; border: 1px solid var(--border); border-radius: 7px; }.pipeline-row { display: grid; grid-template-columns: 1fr auto; gap: .55rem 1rem; padding: .7rem 0; border-top: 1px solid var(--border); }.pipeline-row span { display: block; color: var(--muted); font-size: .72rem; }.pipeline-value { font-weight: 750; }.progress-track { grid-column: 1/-1; height: 5px; overflow: hidden; border-radius: 5px; background: var(--surface-muted); }.progress-track span { display: block; min-width: 4px; max-width: 100%; height: 100%; background: var(--brand); }
.field { margin-bottom: 1rem; }.field label,.field legend { display: block; margin-bottom: .35rem; color: var(--text-soft); font-size: .78rem; font-weight: 700; }.field small { display: block; margin-top: .3rem; }.field .errorlist { margin: .35rem 0 0; padding: 0; list-style: none; font-size: .75rem; }input,select,textarea { width: 100%; max-width: 720px; min-height: 40px; padding: .55rem .65rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); }textarea { min-height: 100px; resize: vertical; }input:focus,select:focus,textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb,var(--focus) 16%,transparent); outline: none; }fieldset { margin: 0; padding: 0; border: 0; }fieldset label { display: flex!important; gap: .5rem; align-items: start; font-weight: 500!important; }fieldset input { width: auto; min-height: auto; margin-top: .2rem; }.form-shell { max-width: 900px; }.form-actions { display: flex; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.filters { display: grid; grid-template-columns: minmax(240px,1fr) minmax(150px,220px) auto; align-items: end; gap: .75rem; }.filters .field { margin: 0; }.table-card { overflow: hidden; padding: 0; }.table-toolbar { display: flex; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .76rem; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th,td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }th { background: var(--surface-muted); color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }tbody tr:hover { background: color-mix(in srgb,var(--surface-muted) 70%,transparent); }.cell-primary { min-width: 180px; }.cell-primary a,.cell-primary strong { display: block; font-weight: 700; }.cell-primary small { display: block; margin-top: .15rem; }.numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }.pagination a { font-weight: 650; text-decoration: none; }
.detail { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1rem; margin: 0; }.detail div { min-width: 0; }.detail dt,.metadata-label { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.detail dd { margin: .25rem 0 0; overflow-wrap: anywhere; font-weight: 600; }.money { font-variant-numeric: tabular-nums; font-weight: 750; }