body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); }
.dp-row { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center; padding: var(--space-24); }
.dp-col { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); }
.dp-on-ink { background: var(--surface-inverse); color: var(--on-inverse); }
.dp-on-mint { background: var(--accent); color: var(--on-accent); }
.dp-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.dp-r { text-align: right; }
.dp-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dp-icon { flex: none; display: block; }
.dp-disabled { color: var(--text-disabled); cursor: not-allowed; }

/* ---------- Vörumerki ---------- */
.dp-mark { display: block; flex: none; }
.dp-wordmark { display: inline-flex; align-items: center; gap: var(--space-12); color: var(--text); }
.dp-wordmark-fixed { color: var(--ink); }
.dp-wordmark-text { display: block; }

.dp-eyebrow { display: inline-flex; align-items: center; gap: var(--space-12); }
.dp-eyebrow-ink { color: var(--text); }
.dp-eyebrow-mint { color: var(--accent); }
.dp-eyebrow-cobalt { color: var(--link); }
.dp-eyebrow-dot { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background: var(--signal); }

/* ---------- Hnappur ---------- */
.dp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); border: var(--border-hairline) solid transparent; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; background: var(--primary); color: var(--on-primary); }
.dp-btn-lg { height: var(--control); padding: 0 var(--space-20); }
.dp-btn-md { height: var(--field-height); padding: 0 var(--space-16); }
.dp-btn-sm { height: 28px; padding: 0 var(--space-12); }
.dp-btn-primary:hover { background: var(--primary-hover); }
.dp-btn-secondary { background: var(--surface-raised); border-color: var(--border-strong); color: var(--text); }
.dp-btn-secondary:hover { background: var(--surface-hover); }
.dp-btn-quiet { background: transparent; color: var(--primary); }
.dp-btn-quiet:hover { background: var(--primary-soft); }
.dp-btn-danger { background: var(--surface-raised); border-color: var(--danger); color: var(--danger); }
.dp-btn-danger:hover { background: var(--danger-soft); }
.dp-btn:disabled { background: var(--surface-sunken); border-color: var(--border); color: var(--text-disabled); cursor: not-allowed; }
.dp-btn-busy .dp-btn-label { visibility: hidden; }
.dp-spinner { position: absolute; width: 14px; height: 14px; border-radius: var(--radius-pill); border: 2px solid var(--border); border-top-color: var(--text-muted); animation: dp-spin 800ms linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dp-spinner { animation-duration: 2400ms; } }
.dp-match .dp-btn { background: var(--ink); color: var(--paper); }

.dp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); cursor: pointer; }
.dp-icon-btn:hover { background: var(--surface-sunken); color: var(--text); }

.dp-nav { display: block; box-sizing: border-box; padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
.dp-nav-active { background: var(--primary); color: var(--on-primary); }
.dp-btn:focus-visible, .dp-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Kort úr vörumerkinu ---------- */
.dp-stat { box-sizing: border-box; display: flex; flex-direction: column; padding: var(--space-20); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); }
.dp-stat p { margin: 0; }
.dp-stat-white { background: var(--surface-raised); color: var(--text); }
.dp-stat-ink { background: var(--surface-inverse); color: var(--on-inverse); }
.dp-stat-value { padding: var(--space-24) 0; }
.dp-stat-delta { padding: var(--space-8) 0; }
.dp-stat-white .dp-stat-delta { color: var(--signal); }
.dp-stat-ink .dp-stat-delta { color: var(--accent); }
.dp-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--control); height: var(--control); border-radius: var(--radius-pill); background: var(--ink); color: var(--mint); }
.dp-status { box-sizing: border-box; display: flex; flex-direction: column; padding: var(--space-16); border-radius: var(--radius-lg); background: var(--accent); color: var(--on-accent); }
.dp-status p { margin: 0; }
.dp-status-title { padding: var(--space-20) 0 var(--space-4); }
.dp-status-note { padding: var(--space-4) 0; }
.dp-chartcard { box-sizing: border-box; padding: var(--space-24); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text); }
.dp-chartcard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.dp-chartcard-head h3 { margin: 0; }
.dp-chartcard-body { padding: var(--space-24) 0; }
.dp-chart { display: block; width: 100%; height: 192px; }
.dp-match { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-24); border-radius: var(--radius-lg); background: var(--accent); color: var(--on-accent); }
.dp-match p { margin: 0; }
.dp-match-text { padding: var(--space-32) 0; }
.dp-principle { box-sizing: border-box; padding: var(--space-40); background: var(--surface-inverse); color: var(--on-inverse); }
.dp-principle p, .dp-principle h3 { margin: 0; }
.dp-principle-no { color: var(--accent); }
.dp-principle-title { padding: var(--space-64) 0; }
.dp-principle-text { padding: var(--space-12) 0; }

/* ---------- Reitir ---------- */
.dp-field { display: flex; flex-direction: column; gap: var(--space-4); max-width: 360px; position: relative; }
.dp-field label { color: var(--text); }
.dp-opt { color: var(--text-muted); font-weight: 400; }
.dp-input { display: flex; align-items: center; gap: var(--space-8); box-sizing: border-box; min-height: var(--field-height); padding: 0 var(--space-12); border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.dp-input:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.dp-input input, .dp-input select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 0; height: 34px; }
.dp-input input.dp-num { text-align: right; }
.dp-affix { color: var(--text-muted); }
.dp-hint { margin: 0; color: var(--text-muted); }
.dp-err { margin: 0; color: var(--danger); display: flex; gap: var(--space-4); align-items: flex-start; }
.dp-err svg { margin-top: 2px; }
.dp-field-error .dp-input, .dp-input.dp-field-error { border-color: var(--danger); border-width: 2px; }
.dp-field-disabled .dp-input { background: var(--surface-sunken); border-color: var(--border); color: var(--text-disabled); }
.dp-select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--space-24); }
.dp-select { position: relative; }
.dp-select-chev { position: absolute; right: var(--space-12); pointer-events: none; color: var(--text-muted); }
.dp-select option { color: var(--text); background: var(--surface-raised); }

.dp-pop { position: absolute; top: 100%; left: 0; z-index: 5; margin-top: var(--space-4); }
.dp-cal { box-sizing: border-box; width: 264px; padding: var(--space-12); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.dp-cal-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-8); }
.dp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-cal-dow { color: var(--text-muted); padding: var(--space-4) 0; text-transform: uppercase; }
.dp-cal-day { height: 32px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-cal-day:hover:not(:disabled) { background: var(--surface-sunken); }
.dp-cal-day:disabled { color: var(--text-disabled); cursor: not-allowed; text-decoration: line-through; }
.dp-cal-today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.dp-cal-sel, .dp-cal-sel:hover:not(:disabled) { background: var(--primary); color: var(--on-primary); }
.dp-cal-note { padding-top: var(--space-8); }

.dp-switch-row, .dp-check-row { display: inline-flex; align-items: center; gap: var(--space-12); cursor: pointer; }
.dp-switch { position: relative; width: 36px; height: 20px; padding: 0; border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-sunken); cursor: pointer; flex: none; }
.dp-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--text-muted); transition: transform 120ms; }
.dp-switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.dp-switch[aria-checked="true"] .dp-switch-knob { transform: translateX(16px); background: var(--on-primary); }
.dp-switch:disabled { border-color: var(--border); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .dp-switch-knob { transition: none; } }
.dp-check { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.dp-check-box { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; box-sizing: border-box; border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--on-primary); flex: none; }
.dp-check:checked + .dp-check-box { background: var(--primary); border-color: var(--primary); }
.dp-check:focus-visible + .dp-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.dp-check-row { position: relative; }

/* ---------- Flipar, valhnappar, síur, merki ---------- */
.dp-tabs { display: flex; gap: var(--space-4); border-bottom: var(--border-hairline) solid var(--border); }
.dp-tab { display: inline-flex; align-items: center; gap: var(--space-8); height: var(--field-height); padding: 0 var(--space-12); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--text-muted); cursor: pointer; }
.dp-tab:hover { color: var(--text); }
.dp-tab-on { color: var(--text); border-bottom-color: var(--primary); }
.dp-tab-count { padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); }
.dp-seg { display: inline-flex; padding: 2px; border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-raised); }
.dp-seg-opt { height: 28px; padding: 0 var(--space-16); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); cursor: pointer; }
.dp-seg-on { background: var(--primary); color: var(--on-primary); }
.dp-chip { display: inline-flex; align-items: center; gap: var(--space-8); height: 28px; box-sizing: border-box; padding: 0 var(--space-12); border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text); }
.dp-chip-on { background: var(--primary-soft); }
.dp-chip-x { display: inline-flex; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.dp-tag { display: inline-block; padding: 1px var(--space-8); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface-sunken); }
.dp-kbd { display: inline-block; padding: 0 var(--space-4); border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-muted); font-size: 12px; line-height: 18px; }
.dp-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: 2px var(--space-12) 2px var(--space-8); border-radius: var(--radius-pill); white-space: nowrap; }
.dp-tone-success { background: var(--success-soft); color: var(--success); }
.dp-tone-warning { background: var(--warning-soft); color: var(--warning); }
.dp-tone-danger { background: var(--danger-soft); color: var(--danger); }
.dp-tone-info { background: var(--info-soft); color: var(--info); }
.dp-tone-neutral { background: var(--surface-sunken); color: var(--text-muted); }
.dp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 var(--space-4); margin-left: auto; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-variant-numeric: tabular-nums; }

.dp-amt { color: inherit; }
.dp-cur { margin-left: 0.25em; color: var(--text-muted); font-weight: 400; font-size: 0.875em; }
.dp-total { color: var(--primary); }

/* ---------- Borði ---------- */
.dp-banner { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-12) var(--space-16); border: var(--border-hairline) solid currentColor; border-radius: var(--radius-lg); }
.dp-banner p { margin: 0; }
.dp-banner-ic { margin-top: 2px; }
.dp-banner-txt { flex: 1; min-width: 0; }
.dp-banner-b { color: var(--text); }
.dp-banner-a { margin-left: auto; flex: none; }

/* ---------- Tafla ---------- */
.dp-tablewrap { border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text); overflow: auto; }
.dp-table { border-collapse: collapse; width: 100%; }
.dp-table th { position: sticky; top: 0; background: var(--surface-sunken); color: var(--text-muted); text-align: left; padding: var(--space-8) var(--space-12); border-bottom: var(--border-hairline) solid var(--border-strong); white-space: nowrap; }
.dp-table td { padding: 0 var(--space-12); border-bottom: var(--border-hairline) solid var(--border); height: var(--row-default); white-space: nowrap; }
.dp-table td.dp-trunc { overflow: hidden; text-overflow: ellipsis; }
.dp-table-compact td { height: var(--row-compact); }
.dp-table-comfortable td { height: var(--row-comfortable); }
.dp-table tbody tr:nth-child(even) { background: var(--surface-hover); }
.dp-table tbody tr:hover { background: var(--surface-sunken); }
.dp-table tbody tr[aria-selected="true"] { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.dp-clickable { cursor: pointer; }
.dp-table tfoot td { background: var(--surface-sunken); font-weight: 600; border-bottom: 0; border-top: var(--border-hairline) solid var(--border-strong); }
.dp-empty { padding: var(--space-48) var(--space-16) !important; text-align: center; color: var(--text-muted); white-space: normal !important; }

/* ---------- Spjöld, gluggar, valmyndir ---------- */
.dp-slide-layer { position: absolute; inset: 0; pointer-events: none; }
.dp-slide-layer > * { pointer-events: auto; }
.dp-scrim { position: absolute; inset: 0; background: var(--scrim); }
.dp-slide { position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: var(--panel-width); max-width: 100%; display: flex; flex-direction: column; background: var(--surface-raised); color: var(--text); border-left: var(--border-hairline) solid var(--border); box-shadow: var(--shadow-overlay); animation: dp-slide-in 120ms ease-out; }
@keyframes dp-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dp-slide { animation: none; } }
.dp-slide-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-16) var(--space-16) var(--space-16) var(--space-24); }
.dp-slide-head h2 { margin: 0; }
.dp-slide-body { flex: 1; overflow: auto; padding: 0 var(--space-24) var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); }
.dp-slide-foot { display: flex; justify-content: flex-end; gap: var(--space-8); padding: var(--space-16) var(--space-24); border-top: var(--border-hairline) solid var(--border); }
.dp-dialog-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dp-dialog { position: relative; box-sizing: border-box; width: 440px; max-width: calc(100% - var(--space-32)); padding: var(--space-24); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; gap: var(--space-12); }
.dp-dialog h2 { margin: 0; }
.dp-dialog-danger { border-color: var(--danger); }
.dp-dialog-body { color: var(--text); }
.dp-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-8); padding-top: var(--space-12); }
.dp-menu { display: inline-flex; flex-direction: column; min-width: 220px; box-sizing: border-box; padding: var(--space-4); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
.dp-menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); height: 32px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.dp-menu-item:hover:not(:disabled) { background: var(--surface-hover); }
.dp-menu-item:disabled { color: var(--text-disabled); cursor: not-allowed; }
.dp-menu-danger { color: var(--danger); }
.dp-menu-hr { margin: var(--space-4) 0; border: 0; border-top: var(--border-hairline) solid var(--border); }

/* ---------- Hliðarstika ---------- */
.dp-side { box-sizing: border-box; display: flex; flex-direction: column; width: var(--sidebar-app); height: 100%; padding: var(--space-16) var(--space-12); border-right: var(--border-hairline) solid var(--border); background: var(--surface); color: var(--text); }
.dp-side-rail { width: var(--rail-width); align-items: center; padding-left: var(--space-8); padding-right: var(--space-8); }
.dp-side-co { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-4) var(--space-8) var(--space-16); min-width: 0; }
.dp-side-rail .dp-side-co { padding-left: 0; padding-right: 0; }
.dp-side-tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); }
.dp-side-conames { display: flex; flex-direction: column; min-width: 0; }
.dp-side-kt { color: var(--text-muted); font-size: 12px; line-height: 16px; }
.dp-side-nav { flex: 1; overflow: auto; width: 100%; }
.dp-side-sec { padding-bottom: var(--space-8); }
.dp-side-head { display: flex; align-items: center; gap: var(--space-8); width: 100%; box-sizing: border-box; padding: var(--space-8); border: 0; background: transparent; color: var(--text-muted); cursor: pointer; text-align: left; }
.dp-side-item { display: flex; align-items: center; gap: var(--space-8); box-sizing: border-box; min-height: 36px; padding: 0 var(--space-12); border-radius: var(--radius-md); color: var(--text); text-decoration: none; position: relative; }
.dp-side-item:hover { background: var(--surface-hover); }
.dp-side-on, .dp-side-on:hover { background: var(--primary); color: var(--on-primary); }
.dp-side-rail .dp-side-item { width: 40px; justify-content: center; padding: 0; }
.dp-side-hr { margin: var(--space-8) var(--space-8); border: 0; border-top: var(--border-hairline) solid var(--border); }
.dp-side-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--signal); }
.dp-side-foot { width: 100%; padding-top: var(--space-8); border-top: var(--border-hairline) solid var(--border); }

/* ---------- Síðuhaus, vinnustika, tilkynning ---------- */
.dp-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-16); }
.dp-crumb { margin: 0; color: var(--text-muted); }
.dp-title { margin: 0; }
.dp-pagehead-acts { display: flex; gap: var(--space-8); align-items: center; }
.dp-progress { position: relative; width: 160px; height: 6px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; flex: none; }
.dp-progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); }
.dp-progress-ind .dp-progress-fill { position: absolute; width: 40%; animation: dp-ind 1200ms ease-in-out infinite; }
@keyframes dp-ind { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .dp-progress-ind .dp-progress-fill { animation: none; left: 30%; } }
.dp-jobbar { display: flex; align-items: center; gap: var(--space-16); box-sizing: border-box; height: var(--jobbar-height); padding: 0 var(--space-32); background: var(--surface-sunken); border-bottom: var(--border-hairline) solid var(--border); color: var(--text-muted); }
.dp-jobbar-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.dp-jobbar-d { white-space: nowrap; }
.dp-toast { display: inline-flex; align-items: center; gap: var(--space-24); padding: var(--space-12) var(--space-20); border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-overlay); }
.dp-toast-a { padding: 0; border: 0; background: transparent; color: var(--mint); cursor: pointer; text-decoration: underline; }

/* ---------- Spjöld á síðu, summur, Dagbók, skref ---------- */
.dp-panel { box-sizing: border-box; padding: var(--space-16); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); }
.dp-panel-head { background: var(--surface-sunken); }
.dp-panel-body { background: var(--surface-raised); color: var(--text); }
.dp-panel-t { margin: 0 0 var(--space-12); }
.dp-panel-head .dp-input { background: var(--surface-raised); }
.dp-totals { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8) var(--space-24); margin: 0; width: 320px; max-width: 100%; margin-left: auto; text-align: right; }
.dp-totals dt { text-align: left; color: var(--text-muted); }
.dp-totals dd { margin: 0; }
.dp-totals-l { color: var(--text) !important; padding-top: var(--space-12); border-top: var(--border-hairline) solid var(--border-strong); }
.dp-totals-v { padding-top: var(--space-12); border-top: var(--border-hairline) solid var(--border-strong); }

.dp-journal { border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text); overflow: hidden; }
.dp-jrow { display: grid; grid-template-columns: 96px 1.2fr 1.35fr 56px 120px 120px 32px; gap: var(--space-8); align-items: center; padding: 0 var(--space-8); min-height: var(--row-default); border-bottom: var(--border-hairline) solid var(--border); }
.dp-jrow:nth-child(even):not(.dp-jhead) { background: var(--surface-hover); }
.dp-jhead { background: var(--surface-sunken); color: var(--text-muted); border-bottom-color: var(--border-strong); min-height: 32px; padding-left: calc(var(--space-8) + var(--space-8)); }
.dp-cell { box-sizing: border-box; width: 100%; height: 30px; min-width: 0; padding: 0 var(--space-8); border: var(--border-hairline) solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); }
.dp-cell:hover, .dp-cell:focus { border-color: var(--border-strong); background: var(--surface-raised); }
.dp-cell.dp-num { text-align: right; }
.dp-jfoot { display: grid; grid-template-columns: 96px 1.2fr 1.35fr 56px 120px 120px 32px; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); background: var(--surface-sunken); }
.dp-jfoot > :first-child { grid-column: 1 / 4; justify-self: start; }
.dp-jfoot-sp { display: block; }
.dp-jfoot .dp-num { text-align: right; padding-right: var(--space-8); }

.dp-steps { display: flex; gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.dp-step { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-muted); }
.dp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; box-sizing: border-box; border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-pill); }
.dp-step-now { color: var(--text); font-weight: 600; }
.dp-step-now .dp-step-n { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dp-step-done .dp-step-n { background: var(--success-soft); border-color: var(--success); color: var(--success); }

.dp-table th.dp-r { text-align: right; }
.dp-seg { align-self: flex-start; }
.dp-badge { align-self: flex-start; }