/* ==================================================================
   GEMBA DESKTOP — web-app shell (header · sidebar · content) in the
   same SmoothUI language as the mobile view. Built on the shared
   Gemba tokens, so dark mode and /<domain>/ branding apply as-is.
   Mirrors the layout of gemba-frontend (AppShell) as a static,
   frontend-only mockup.
   ================================================================== */

:root { --dk-header: 72px; --dk-sidebar: 264px; }

body.dk { overflow: hidden; background: var(--gem-bg); }
.dk-skip { position: absolute; left: -999px; top: 8px; z-index: 100; }
.dk-skip:focus { left: 16px; padding: 8px 14px; border-radius: 999px; background: var(--gem-btn-primary); color: var(--gem-on-primary); }

/* ---------------------------------------------------------------- */
/* Header                                                            */
/* ---------------------------------------------------------------- */
.dk-header {
  position: fixed; inset: 0 0 auto 0; height: var(--dk-header); z-index: 30;
  display: flex; align-items: center; gap: 24px; padding: 0 24px 0 28px;
  background: linear-gradient(to right, var(--gem-surface-emph), var(--gem-surface-subtle));
  border-bottom: 1px solid var(--gem-border);
}
.dk-logo { display: inline-flex; align-items: center; gap: 10px; width: calc(var(--dk-sidebar) - 52px); flex-shrink: 0; height: 32px; color: var(--gem-fg1); }
.dk-logo-icon { color: var(--gem-accent); display: inline-flex; }
.dk-wordmark { font: 800 21px/1 var(--gem-font-ui); letter-spacing: -0.02em; }
.dk-logo.brand-logo { height: 30px; }
.dk-logo.brand-logo.is-full { height: 30px; }
.dk-logo.brand-logo img { max-width: 180px; }
.dk-logo + .brand-demo-chip { margin-left: -16px; }

.dk-search { flex: 1; max-width: 520px; height: 44px; border-radius: var(--gem-radius-pill) !important; }
.dk-search:focus-within { border-radius: var(--gem-radius-pill); }
.dk-kbd { font: 700 11px/1 var(--gem-font); color: var(--gem-fg3); border: 1px solid var(--gem-border); border-radius: 6px; padding: 3px 7px; background: var(--gem-surface-subtle); }

.dk-header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dk-tenant {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 8px;
  border-radius: var(--gem-radius-pill); border: 1px solid var(--gem-border); background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight); color: var(--gem-fg2); max-width: 300px;
  transition: border-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring);
}
.dk-tenant:hover { border-color: var(--gem-border-strong); }
.dk-tenant:active { transform: scale(0.97); }
.dk-tenant-icon { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--gem-surface-emph); color: var(--gem-fg1); flex-shrink: 0; }
.dk-tenant-text { display: flex; flex-direction: column; text-align: left; min-width: 0; line-height: 1.15; }
.dk-tenant-text b { font-size: 13px; color: var(--gem-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-tenant-text small { font-size: 11px; color: var(--gem-fg3); }
.dk-header .avatar-btn { width: 40px; height: 40px; }

.dk-user { position: relative; }
.dk-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 280px; z-index: 40;
  background: var(--gem-surface); border: 1px solid var(--gem-border); border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-md); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  transform-origin: top right; animation: dk-pop var(--gem-dur-spring) var(--gem-spring) both;
}
.dk-menu-head { padding: 10px 10px 8px; display: flex; flex-direction: column; }
.dk-menu-head b { font-size: 14px; color: var(--gem-fg1); }
.dk-menu-head small { font-size: 12px; color: var(--gem-fg3); }
.dk-menu-label { padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--gem-fg3); text-transform: uppercase; letter-spacing: .05em; }
.dk-menu .segmented { margin: 2px 6px 6px; }
.dk-menu .divider { margin: 6px 4px; }
.dk-menu .menu-item { padding: 10px; font-size: 14px; }

/* ---------------------------------------------------------------- */
/* Sidebar                                                           */
/* ---------------------------------------------------------------- */
.dk-sidebar {
  position: fixed; top: var(--dk-header); left: 0; bottom: 0; width: var(--dk-sidebar); z-index: 20;
  display: flex; flex-direction: column; padding: 24px; background: var(--gem-bg);
  border-right: 1px solid var(--gem-border); overflow-y: auto;
}
.dk-nav { position: relative; display: flex; flex-direction: column; gap: 4px; }
.dk-nav-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 18px;
  border-radius: 24px; font-size: 14px; font-weight: 700; color: var(--gem-fg2);
  transition: color var(--gem-dur) var(--gem-ease-out), background-color var(--gem-dur-fast);
}
.dk-nav-item .icon { color: inherit; transition: transform var(--gem-dur-spring) var(--gem-spring-bouncy); }
.dk-nav-item:hover { color: var(--gem-fg1); background: var(--gem-surface-hover); }
.dk-nav-item:hover .icon { transform: translateX(1px) scale(1.06); }
.dk-nav-item.active { color: var(--gem-fg1); background: transparent; }
.dk-nav-item:active { transform: scale(0.98); }
.dk-nav-thumb {
  position: absolute; left: 0; right: 0; top: 0; height: 42px; border-radius: 24px; z-index: 0;
  background: var(--gem-surface); box-shadow: 0 0 0 1px var(--gem-border), var(--gem-shadow-xs), var(--gem-card-highlight);
  transition: transform var(--gem-dur-spring) var(--gem-spring), opacity var(--gem-dur);
}
.dk-nav-thumb::before { content: ""; position: absolute; left: 6px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--gem-btn-primary); }
.dk-nav-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gem-accent); margin-left: auto; box-shadow: 0 0 0 3px var(--gem-accent-soft); }
.dk-nav-count { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--gem-surface-emph); color: var(--gem-fg2); font-size: 12px; display: grid; place-items: center; }
.dk-sidebar-foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.dk-foot-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gem-fg2); padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--gem-border-strong); width: fit-content; }
.dk-foot-link:hover { color: var(--gem-fg1); border-color: var(--gem-fg3); }
.dk-foot-meta { font-size: 11px; color: var(--gem-fg3); padding-left: 12px; }

/* ---------------------------------------------------------------- */
/* Main                                                              */
/* ---------------------------------------------------------------- */
.dk-main {
  position: fixed; top: var(--dk-header); left: var(--dk-sidebar); right: 0; bottom: 0;
  overflow-y: auto; overscroll-behavior: contain; outline: none;
}
.dk-page { max-width: 1240px; margin: 0 auto; padding: 36px 40px 64px; display: flex; flex-direction: column; gap: 28px; animation: sm-reveal var(--gem-dur-spring) var(--gem-spring) both; }
.dk-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dk-page-head h1 { margin: 0; font: var(--gem-h1-weight) 40px/48px var(--gem-font-ui); color: var(--gem-fg1); letter-spacing: -0.01em; }
.dk-page-head p { margin: 6px 0 0; color: var(--gem-fg2); font-size: 14px; }
.dk-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gem-fg3); margin-bottom: 6px; }
.dk-crumbs a:hover { color: var(--gem-fg1); }
.dk-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.dk-section { display: flex; flex-direction: column; gap: 14px; }
.dk-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dk-section-head h2 { margin: 0; font: 700 20px/28px var(--gem-font-ui); color: var(--gem-fg1); }
.dk-link { font-size: 14px; font-weight: 700; color: var(--gem-fg1); display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 6px 10px; margin: -6px -10px; }
.dk-link:hover { background: var(--gem-surface-hover); }

.dk-card {
  background: var(--gem-surface); border: 1px solid var(--gem-border); border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
}
.dk-card-pad { padding: 24px; }
.dk-grid { display: grid; gap: 20px; }
.dk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }

/* Account / currency cards */
.dk-acc {
  display: flex; flex-direction: column; gap: 6px; padding: 20px; min-height: 176px;
  background: var(--gem-surface); border: 1px solid var(--gem-border); border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs), var(--gem-card-highlight);
  transition: transform var(--gem-dur-spring) var(--gem-spring), box-shadow var(--gem-dur), border-color var(--gem-dur-fast);
}
.dk-acc:hover { transform: translateY(-2px); box-shadow: var(--gem-shadow-sm), var(--gem-card-highlight); border-color: var(--gem-border-strong); }
.dk-acc:active { transform: scale(0.985); }
.dk-acc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dk-acc-top .flag-dot { width: 32px; height: 32px; }
.dk-acc-ccy { font-weight: 700; font-size: 16px; color: var(--gem-fg1); }
.dk-acc-name { font-size: 13px; color: var(--gem-fg2); }
.dk-acc-iban { font-size: 12px; color: var(--gem-fg3); font-variant-numeric: tabular-nums; display: inline-flex; gap: 6px; align-items: center; }
.dk-acc-bal { margin-top: auto; font: 700 26px/1.1 var(--gem-font-num); color: var(--gem-ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dk-acc-sub { font-size: 12px; color: var(--gem-fg3); font-weight: 600; }
.dk-acc-add { align-items: center; justify-content: center; border-style: dashed; border-width: 1.5px; border-color: var(--gem-border-strong); box-shadow: none; background: transparent; color: var(--gem-fg1); font-weight: 700; gap: 10px; }
.dk-acc-add .dk-plus { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--gem-surface-emph); }

/* Stat strip */
.dk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-stat { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.dk-stat + .dk-stat { border-left: 1px solid var(--gem-border); }
.dk-stat small { font-size: 12px; font-weight: 700; color: var(--gem-fg3); text-transform: uppercase; letter-spacing: .04em; }
.dk-stat b { font: 700 22px/1.2 var(--gem-font-num); font-variant-numeric: tabular-nums; color: var(--gem-fg1); }
.dk-stat span { font-size: 12px; color: var(--gem-fg2); }
.dk-stat .up { color: var(--gem-success); font-weight: 700; }

/* ---------------------------------------------------------------- */
/* Table                                                             */
/* ---------------------------------------------------------------- */
.dk-table-wrap { overflow-x: auto; }
.dk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dk-table th {
  text-align: left; font-size: 11px; font-weight: 700; color: var(--gem-fg3); text-transform: uppercase; letter-spacing: .05em;
  padding: 14px 16px; border-bottom: 1px solid var(--gem-border); background: var(--gem-surface-subtle); white-space: nowrap;
}
.dk-table th:first-child { border-top-left-radius: var(--gem-radius-lg); padding-left: 24px; }
.dk-table th:last-child { border-top-right-radius: var(--gem-radius-lg); padding-right: 24px; }
.dk-table td { padding: 14px 16px; border-bottom: 1px solid var(--gem-border); color: var(--gem-fg1); vertical-align: middle; }
.dk-table td:first-child { padding-left: 24px; }
.dk-table td:last-child { padding-right: 24px; }
.dk-table tbody tr { transition: background-color var(--gem-dur-fast); }
.dk-table tbody tr[data-go] { cursor: pointer; }
.dk-table tbody tr:hover { background: var(--gem-surface-hover); }
.dk-table tbody tr:last-child td { border-bottom: 0; }
.dk-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.dk-table .pos { color: var(--gem-success); }
.dk-table .muted { color: var(--gem-fg2); }
.dk-table .sub { display: block; font-size: 12px; color: var(--gem-fg3); margin-top: 2px; }
.dk-table .strong { font-weight: 700; }
.dk-cell { display: flex; align-items: center; gap: 12px; }
.dk-avatar { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; background: var(--gem-surface-emph); color: var(--gem-fg2); font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--gem-border); }
.dk-table tbody tr.sm-enter { animation-name: sm-fade; }
.dk-table-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-top: 1px solid var(--gem-border); font-size: 13px; color: var(--gem-fg2); }
.dk-pager { display: flex; gap: 4px; }
.dk-pager button { min-width: 34px; height: 34px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--gem-fg2); transition: background-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring); }
.dk-pager button:hover { background: var(--gem-surface-hover); color: var(--gem-fg1); }
.dk-pager button.active { background: var(--gem-btn-primary); color: var(--gem-on-primary); }
.dk-pager button:active { transform: scale(0.92); }

/* Toolbar (filters above tables) */
.dk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-toolbar .search-field { flex: 0 1 340px; height: 42px; }
.dk-toolbar .tabs, .dk-page > .tabs, .dk-section > .tabs { width: auto; flex: 0 0 auto; display: inline-flex; }
.dk-toolbar .tabs .tab { flex: 0 0 auto; }
.dk-chip-btn { height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--gem-border); background: var(--gem-surface); color: var(--gem-fg1); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--gem-shadow-xs); transition: border-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring); }
.dk-chip-btn:hover { border-color: var(--gem-border-strong); }
.dk-chip-btn:active { transform: scale(0.96); }
.dk-spacer { flex: 1; }

/* Lists inside cards (messages / tasks / news) */
.dk-list { display: flex; flex-direction: column; }
.dk-li { display: flex; gap: 14px; padding: 16px 24px; border-top: 1px solid var(--gem-border); transition: background-color var(--gem-dur-fast); }
.dk-li:first-child { border-top: 0; }
a.dk-li:hover, button.dk-li:hover { background: var(--gem-surface-hover); }
button.dk-li { width: 100%; text-align: left; }
.dk-li-icon { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--gem-surface-emph); color: var(--gem-fg2); flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--gem-border); }
.dk-li-main { flex: 1; min-width: 0; }
.dk-li-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--gem-fg1); }
.dk-li-body { font-size: 13px; line-height: 19px; color: var(--gem-fg2); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-li-meta { font-size: 12px; color: var(--gem-fg3); margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dk-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--gem-border); }
.dk-panel-head h3 { margin: 0; font: 700 16px/24px var(--gem-font-ui); color: var(--gem-fg1); }
.dk-joined { display: grid; grid-template-columns: minmax(0, 1fr) 400px; }
.dk-joined > .dk-card:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dk-joined > .dk-card:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; background: var(--gem-surface-subtle); }

.dk-news { display: flex; flex-direction: column; gap: 12px; }
.dk-news-thumb { height: 150px; border-radius: var(--gem-radius-md); position: relative; overflow: hidden; }
.dk-news-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.35), transparent 55%); }
.dk-news small { font-size: 11px; font-weight: 700; color: var(--gem-fg3); text-transform: uppercase; letter-spacing: .04em; }
.dk-news b { font-size: 15px; line-height: 21px; color: var(--gem-fg1); }
.dk-news p { margin: 0; font-size: 13px; line-height: 19px; color: var(--gem-fg2); }
.dk-news:hover .dk-news-thumb { transform: scale(1.01); }
.dk-news-thumb { transition: transform var(--gem-dur-spring) var(--gem-spring); }
.t1 { background: linear-gradient(135deg, #283349, #3B4B6B); }
.t2 { background: linear-gradient(135deg, #2066E6, #283349); }
.t3 { background: linear-gradient(135deg, #697080, #283349); }
.t4 { background: linear-gradient(135deg, #20982E, #283349); }

/* Forms on desktop */
.dk-form { display: flex; flex-direction: column; gap: 18px; }
.dk-form .field-row { gap: 16px; }
.dk-step { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.dk-step-head { display: flex; align-items: center; gap: 12px; }
.dk-step-num { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--gem-btn-primary); color: var(--gem-on-primary); box-shadow: var(--gem-highlight); }
.dk-step-num.done { background: var(--gem-success-soft); color: var(--gem-success); box-shadow: none; }
.dk-step-num.todo { background: var(--gem-surface-emph); color: var(--gem-fg3); box-shadow: none; }
.dk-step-head h3 { margin: 0; font: 700 18px/26px var(--gem-font-ui); color: var(--gem-fg1); }
.dk-sticky { position: sticky; top: 0; }
.dk-summary { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.dk-summary h3 { margin: 0; font: 700 16px/24px var(--gem-font-ui); }
.dk-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--gem-border); }
.dk-total b { font: 700 24px/1 var(--gem-font-num); font-variant-numeric: tabular-nums; color: var(--gem-ink-strong); }

.dk-services { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.dk-service { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--gem-radius-md); font-size: 14px; font-weight: 700; color: var(--gem-fg2); transition: background-color var(--gem-dur-fast), color var(--gem-dur-fast); }
.dk-service:hover { background: var(--gem-surface-hover); color: var(--gem-fg1); }
.dk-service.active { background: var(--gem-surface-emph); color: var(--gem-fg1); box-shadow: inset 0 0 0 1px var(--gem-border); }
.dk-service .icon { color: inherit; }
.dk-payments { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }

/* Card detail */
.dk-cardhero { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.dk-cardhero .card-visual { height: 212px; border-radius: 18px; padding: 22px; }
.dk-cardhero .card-visual .num { font-size: 19px; }
.dk-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.dk-kv > div { padding: 16px 20px; border-left: 1px solid var(--gem-border); display: flex; flex-direction: column; gap: 4px; }
.dk-kv > div:nth-child(3n+1) { border-left: 0; }
.dk-kv > div:nth-child(n+4) { border-top: 1px solid var(--gem-border); }
.dk-kv small { font-size: 12px; color: var(--gem-fg3); font-weight: 600; }
.dk-kv b { font-size: 15px; color: var(--gem-fg1); font-variant-numeric: tabular-nums; }

/* Thread */
.dk-thread { display: flex; flex-direction: column; gap: 12px; padding: 24px; min-height: 420px; }
.dk-thread .thread-item { max-width: 70%; }
.dk-composer { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--gem-border); align-items: center; }
.dk-composer .finput { flex: 1; border-radius: 22px; }

/* Dialog (desktop replacement for bottom sheets) */
.dk-scrim { position: fixed; inset: 0; z-index: 50; background: var(--gem-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: sm-fade var(--gem-dur) var(--gem-ease-out) both; }
.dk-dialog {
  position: fixed; z-index: 51; left: 50%; top: 50%; width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 80px); overflow-y: auto;
  transform: translate(-50%, -50%); background: var(--gem-surface); border: 1px solid var(--gem-border); border-radius: var(--gem-radius-xl);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.35), var(--gem-card-highlight); padding: 28px;
  animation: dk-dialog-in var(--gem-dur-spring) var(--gem-spring) both;
}
.dk-dialog h2 { margin: 0 0 6px; font: 700 22px/30px var(--gem-font-ui); color: var(--gem-fg1); }
.dk-dialog > p { margin: 0 0 18px; color: var(--gem-fg2); font-size: 14px; }
.dk-dialog-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--gem-fg2); transition: background-color var(--gem-dur-fast), transform var(--gem-dur-spring) var(--gem-spring); }
.dk-dialog-close:hover { background: var(--gem-surface-hover); color: var(--gem-fg1); }
.dk-dialog-close:active { transform: scale(0.9); }
.dk-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

.dk-empty { padding: 48px 24px; text-align: center; color: var(--gem-fg2); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dk-empty .success-icon { margin: 0; }

@keyframes dk-pop { from { opacity: 0; transform: scale(.94) translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes dk-dialog-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- */
/* Responsive: collapse the sidebar to icons on narrower screens      */
/* ---------------------------------------------------------------- */
@media (max-width: 1280px) {
  .dk-grid-4, .dk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-stat:nth-child(3) { border-left: 0; }
  .dk-stat:nth-child(n+3) { border-top: 1px solid var(--gem-border); }
  .dk-joined { grid-template-columns: 1fr; }
  .dk-joined > .dk-card:first-child { border-radius: var(--gem-radius-lg) var(--gem-radius-lg) 0 0; }
  .dk-joined > .dk-card:last-child { border-radius: 0 0 var(--gem-radius-lg) var(--gem-radius-lg); border-left: 1px solid var(--gem-border); border-top: 0; }
  .dk-split { grid-template-columns: 1fr; }
  .dk-tenant { display: none; }
}
@media (max-width: 1080px) {
  :root { --dk-sidebar: 84px; }
  .dk-nav-item { justify-content: center; padding: 0; font-size: 0; gap: 0; }
  .dk-nav-item .dk-nav-dot, .dk-nav-item .dk-nav-count { position: absolute; top: 6px; right: 12px; margin: 0; }
  .dk-nav-item .dk-nav-count { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
  .dk-nav-thumb::before { display: none; }
  .dk-sidebar { padding: 16px 14px; }
  .dk-foot-link { font-size: 0; padding: 10px; gap: 0; }
  .dk-foot-meta { display: none; }
  .dk-logo { width: auto; }
  .dk-wordmark { display: none; }
  .dk-payments, .dk-cardhero { grid-template-columns: 1fr; }
  .dk-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dk-page { padding: 28px 24px 56px; }
}

/* Payments: service list + form + summary need a tighter summary column */
.dk-payments .dk-split { grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 1360px) {
  .dk-payments { grid-template-columns: 1fr; }
  .dk-payments > .dk-services { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .dk-payments > .dk-services .dk-service { white-space: nowrap; }
}