*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:              #f5f6fa;
  --surface:         #ffffff;
  --surface-2:       #f1f2f6;
  --pill-bg:         #f1f2f6;
  --badge-bg:        #ececf2;
  --border:          #e4e6ec;
  --border-dashed:   #c7cbd6;
  --separator:       #c2c6d1;
  --text:            #14161c;
  --text-muted:      #5d6274;
  --text-xs:         #8a90a2;
  --text-faint:      #9aa0b1;
  --primary:         #FF7A45;
  --primary-h:       #e5602a;
  --primary-light:   rgba(255,122,69,.12);
  --primary-strong:  #c2410c;
  --primary-grad:    linear-gradient(180deg, #FF7F4A, #FF5A26);
  --primary-mark-grad: linear-gradient(135deg, #FF7A45, #FF4D1F);
  --active-bg:       rgba(255,122,69,.10);
  --active-text:     #c2410c;
  --ok:              #1d9a5c;
  --ok-bg:           #eafbf1;
  --err:             #dc2626;
  --err-bg:          #fef2f2;
  --dup:             #92400e;
  --dup-bg:          #fffbeb;
  --info:            #1d4ed8;
  --test-color:      #b45309;
  --test-bg:         #fef3c7;
  --live-color:      #047857;
  --live-bg:         #d1fae5;
  --radius:          10px;
  --radius-sm:       6px;
  --font:            'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:            'Geist Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --shadow-sm:       0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:          0 4px 20px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.06);
  --sidebar-w:       264px;
  --sidebar-bg:      #ffffff;
  --sidebar-border:  #e4e6ec;
  --log-h:           212px;
}

/* ── Dark theme ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:              #0B0D12;
  --surface:         #12141B;
  --surface-2:       #171A22;
  --pill-bg:         #15171E;
  --badge-bg:        #1A1D26;
  --border:          #1C1F29;
  --border-dashed:   #2A2E3B;
  --separator:       #3A3F4E;
  --text:            #F2F3F7;
  --text-muted:      #9AA0B1;
  --text-xs:         #6B7183;
  --text-faint:      #4A5062;
  --primary:         #FF7A45;
  --primary-h:       #ff8f63;
  --primary-light:   rgba(255,122,69,.10);
  --primary-strong:  #FFB08E;
  --primary-grad:    linear-gradient(180deg, #FF7F4A, #FF5A26);
  --primary-mark-grad: linear-gradient(135deg, #FF7A45, #FF4D1F);
  --active-bg:       rgba(255,122,69,.10);
  --active-text:     #FFB08E;
  --ok:              #5BD68E;
  --ok-bg:           rgba(91,214,142,.12);
  --err:             #FF6B6B;
  --err-bg:          rgba(255,107,107,.12);
  --dup:             #F5C451;
  --dup-bg:          rgba(245,196,81,.12);
  --info:            #6CB6FF;
  --test-color:      #fbbf24;
  --test-bg:         rgba(251,191,36,.14);
  --live-color:      #34d399;
  --live-bg:         rgba(52,211,153,.14);
  --shadow-sm:       0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow:          0 4px 24px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
  --sidebar-bg:      #0F1117;
  --sidebar-border:  #1C1F29;
}

:root[data-theme="dark"] .signin-screen {
  background: linear-gradient(145deg, #0b0e14 0%, #1a1420 100%);
}

html, body { height: 100%; }

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--text);
  font-size:   14px;
  line-height: 1.5;
}

select, select option {
  background: var(--surface);
  color:      var(--text);
}

.hidden { display: none !important; }

/* ── Sign-in ──────────────────────────────────────────────────────────────── */
.signin-screen {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(145deg, #f8f9ff 0%, #fff4f0 100%);
  padding:         1rem;
}

.signin-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 20px;
  padding:       3rem 3.5rem;
  text-align:    center;
  width:         100%;
  max-width:     420px;
  box-shadow:    var(--shadow);
}

.signin-logo { margin-bottom: 1.5rem; }

.signin-logo-img {
  height:    48px;
  width:     auto;
  max-width: 260px;
}

.signin-card h1 {
  font-size:      1.5rem;
  font-weight:    700;
  letter-spacing: -.025em;
  margin-bottom:  .4rem;
}

.signin-card p {
  color:         var(--text-muted);
  font-size:     .925rem;
  margin-bottom: 2rem;
}

.btn-google {
  display:       inline-flex;
  align-items:   center;
  gap:           .6rem;
  padding:       .7rem 1.75rem;
  background:    var(--surface);
  border:        1.5px solid var(--border);
  border-radius: 8px;
  font-size:     .925rem;
  font-weight:   500;
  font-family:   var(--font);
  color:         var(--text);
  cursor:        pointer;
  transition:    box-shadow .15s, border-color .15s;
}
.btn-google:hover { border-color: #bbb; box-shadow: var(--shadow-sm); }

.signin-error {
  margin-top: .75rem;
  font-size:  .85rem;
  color:      var(--err);
}

/* ── App shell: sidebar + main ───────────────────────────────────────────── */
.app {
  display:  flex;
  height:   100vh;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width:          var(--sidebar-w);
  min-width:      var(--sidebar-w);
  background:     var(--sidebar-bg);
  border-right:   1px solid var(--sidebar-border);
  display:        flex;
  flex-direction: column;
  height:         100vh;
  overflow-y:     auto;
  overflow-x:     hidden;
  flex-shrink:    0;
}

.sidebar-brand {
  display:        flex;
  align-items:    center;
  gap:            .625rem;
  height:         64px;
  padding:        0 1.25rem;
  flex-shrink:    0;
}

.sidebar-brand-mark {
  width:          28px;
  height:         28px;
  border-radius:  8px;
  flex-shrink:    0;
  background:     var(--primary-mark-grad);
  display:        flex;
  align-items:    center;
  justify-content: center;
  box-shadow:     0 0 0 1px rgba(255,255,255,.08) inset, 0 4px 14px rgba(255,90,40,.35);
}

.sidebar-brand-text {
  display:        flex;
  flex-direction: column;
  line-height:    1.15;
  min-width:      0;
}

.sidebar-brand-tool {
  font-size:      .875rem;
  font-weight:    600;
  color:          var(--text);
}

.sidebar-brand-sub {
  font-size:      .69rem;
  color:          var(--text-xs);
}

.sidebar-account-section {
  padding:        1rem 1rem 1.25rem;
  border-top:     1px solid var(--sidebar-border);
  display:        flex;
  flex-direction: column;
  gap:            .5rem;
  flex-shrink:    0;
}

.sidebar-section-label {
  font-size:      .65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-xs);
}

.site-switcher { position: relative; }

.site-switcher-trigger {
  display:       flex;
  align-items:   center;
  gap:           .35rem;
  height:        52px;
  padding:       0 .5rem;
  border:        1px solid var(--border);
  border-radius: 10px;
  background:    var(--surface-2);
  transition:    border-color .15s ease-out;
}
.site-switcher-trigger:hover,
.site-switcher-trigger:focus-within { border-color: var(--primary); }

.site-switcher-toggle {
  display:      flex;
  align-items:  center;
  gap:          .55rem;
  flex:         1;
  min-width:    0;
  height:       100%;
  padding:      0;
  border:       none;
  background:   transparent;
  font-family:  var(--font);
  text-align:   left;
  cursor:       pointer;
  outline:      none;
}

.site-avatar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border-radius:   7px;
  background:      var(--primary);
  color:           #fff;
  font-size:       .78rem;
  font-weight:     700;
  flex-shrink:     0;
  text-transform:  uppercase;
}

.site-switcher-info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            .1rem;
}

.site-switcher-name-row {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  min-width:   0;
}

.site-switcher-name {
  font-size:     .82rem;
  font-weight:   600;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.site-switcher-domain {
  font-size:     .7rem;
  color:         var(--text-xs);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.site-switcher-gear {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  border:          none;
  border-radius:   7px;
  background:      transparent;
  color:           var(--text-muted);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background .12s, color .12s;
}
.site-switcher-gear:hover { background: var(--surface); color: var(--text); }

.site-chevron { color: var(--text-xs); flex-shrink: 0; margin-right: .1rem; }

.site-switcher-menu {
  position:       absolute;
  top:            calc(100% + .4rem);
  left:           0;
  right:          0;
  z-index:        60;
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  10px;
  box-shadow:     var(--shadow);
  padding:        .5rem;
  display:        flex;
  flex-direction: column;
  gap:            .25rem;
}

.site-switcher-menu-label {
  padding:        .2rem .5rem .35rem;
  font-size:      .65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-xs);
}

.site-switcher-list {
  display:        flex;
  flex-direction: column;
  gap:            .1rem;
  max-height:     260px;
  overflow-y:     auto;
}

.site-switcher-item {
  display:      flex;
  align-items:  center;
  gap:          .5rem;
  width:        100%;
  padding:      .5rem;
  border:       none;
  border-radius: 8px;
  background:   transparent;
  font-family:  var(--font);
  font-size:    .82rem;
  color:        var(--text);
  text-align:   left;
  cursor:       pointer;
}
.site-switcher-item:hover { background: var(--surface-2); }
.site-switcher-item.active { background: var(--primary-light); }

.site-switcher-item-dot {
  width:         7px;
  height:        7px;
  border-radius: 99px;
  background:    var(--separator);
  flex-shrink:   0;
}
.site-switcher-item.active .site-switcher-item-dot { background: var(--ok); }

.site-switcher-item-name {
  flex:          1;
  min-width:     0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.site-switcher-item-check { color: var(--primary); flex-shrink: 0; }

.site-switcher-add-btn {
  display:       flex;
  align-items:   center;
  gap:           .4rem;
  width:         100%;
  padding:       .5rem;
  margin-top:    .15rem;
  border:        none;
  border-top:    1px solid var(--border);
  border-radius: 0;
  background:    transparent;
  font-family:   var(--font);
  font-size:     .82rem;
  font-weight:   500;
  color:         var(--text-muted);
  text-align:    left;
  cursor:        pointer;
}
.site-switcher-add-btn:hover { color: var(--text); }

.env-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       .1rem .45rem;
  border-radius: 100px;
  font-size:     .65rem;
  font-weight:   700;
  letter-spacing: .05em;
  flex-shrink:   0;
  white-space:   nowrap;
}
.env-live { background: var(--live-bg);  color: var(--live-color); }
.env-test { background: var(--test-bg);  color: var(--test-color); }

.sidebar-nav {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        1rem .75rem;
  border-top:     1px solid var(--sidebar-border);
}

.sidebar-nav-label {
  padding:        0 .625rem .5rem;
  font-size:      .65rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-xs);
}

/* Tab buttons — now vertical sidebar nav items */
.tab {
  position:       relative;
  display:        flex;
  align-items:    center;
  gap:            .75rem;
  width:          100%;
  height:         38px;
  padding:        0 .625rem;
  border-radius:  9px;
  background:     none;
  border:         none;
  font-size:      .875rem;
  font-weight:    400;
  font-family:    var(--font);
  color:          var(--text-muted);
  cursor:         pointer;
  text-align:     left;
  transition:     background .15s ease-out, color .15s ease-out;
  white-space:    nowrap;
}
.tab:hover  { background: var(--surface-2); color: var(--text); }
.tab.active {
  background:  var(--active-bg);
  color:       var(--active-text);
  font-weight: 500;
}
.tab.active::before {
  content:       '';
  position:      absolute;
  left:          -.75rem;
  top:           9px;
  bottom:        9px;
  width:         3px;
  border-radius: 0 3px 3px 0;
  background:    var(--primary);
}
.tab svg { flex-shrink: 0; color: var(--text-xs); }
.tab:hover svg { color: var(--text); }
.tab.active svg { color: var(--primary); }

.tab-panel { display: flex; flex-direction: column; gap: 1rem; }

.sidebar-footer {
  flex-shrink: 0;
  display:     flex;
  flex-direction: column;
  gap:         .5rem;
  padding:     .75rem;
}

.sidebar-user-card {
  display:       flex;
  align-items:   center;
  gap:           .625rem;
  padding:       .625rem;
  border-radius: 12px;
  background:    var(--surface);
  border:        1px solid var(--sidebar-border);
  min-width:     0;
}

.sidebar-user-avatar {
  width:          32px;
  height:         32px;
  border-radius:  99px;
  background:     var(--primary-mark-grad);
  color:          white;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      .8rem;
  font-weight:    600;
  flex-shrink:    0;
}

.sidebar-user-meta {
  display:        flex;
  flex-direction: column;
  min-width:      0;
  flex:           1;
  line-height:    1.3;
}

.user-email {
  font-size:     .8rem;
  color:         var(--text);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.user-role {
  font-size: .69rem;
  color:     var(--text-xs);
}

.sidebar-footer-actions {
  display: flex;
  gap:     .35rem;
}

.btn.btn-icon {
  padding:         0;
  width:           30px;
  height:          30px;
  justify-content: center;
  gap:             0;
}

/* ── Main wrapper ─────────────────────────────────────────────────────────── */
.main-wrapper {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  height:         100vh;
  overflow:       hidden;
}

.content-scroll {
  flex:       1;
  overflow-y: auto;
  display:    flex;
  flex-direction: column;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         3rem 2rem;
  flex:            1;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 600px 360px at 50% 45%, rgba(255,106,53,.10), transparent 70%),
                     radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size:  100% 100%, 24px 24px;
}

.empty-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.375rem;
  text-align:     center;
  max-width:      460px;
}

.empty-icon {
  width:         72px;
  height:        72px;
  border-radius: 20px;
  background:    linear-gradient(180deg, var(--surface-2), var(--surface));
  border:        1px solid var(--border);
  box-shadow:    0 12px 40px rgba(0,0,0,.15), 0 0 0 6px var(--primary-light);
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.empty-card h2 {
  font-size:      1.625rem;
  font-weight:    600;
  letter-spacing: -.02em;
  line-height:    1.2;
}

.empty-card p {
  color:         var(--text-muted);
  font-size:     .9375rem;
  line-height:   1.55;
}

/* ── Main content ─────────────────────────────────────────────────────────── */
.main-content {
  margin:    0 auto;
  padding:   1.5rem 1.5rem 2.5rem;
  width:     100%;
  flex:      1;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
}

.card-header {
  padding:       1.1rem 1.5rem .85rem;
  border-bottom: 1px solid var(--border);
}

.card-header h2 {
  font-size:      .75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-muted);
  margin-bottom:  .2rem;
}

.hint {
  font-size: .8rem;
  color:     var(--text-muted);
}

.card-footer {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-wrap:   wrap;
  padding:     .9rem 1.5rem;
  border-top:  1px solid var(--border);
  background:  var(--surface-2);
}

/* ── File list ────────────────────────────────────────────────────────────── */
.file-list { padding: .25rem 0; }

.file-item {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  padding:       .6rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition:    background .1s;
}
.file-item:last-child { border-bottom: none; }
.file-item:hover      { background: var(--surface-2); }

.file-label {
  width:       116px;
  flex-shrink: 0;
  font-size:   .875rem;
  font-weight: 500;
}

.file-pick {
  position:    relative;
  cursor:      pointer;
  flex-shrink: 0;
}

.file-pick input[type="file"] {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  width:    100%;
  height:   100%;
}

.file-pick span {
  display:        inline-block;
  padding:        .3rem .75rem;
  border:         1.5px solid var(--border);
  border-radius:  var(--radius-sm);
  font-size:      .8rem;
  font-weight:    500;
  color:          var(--text-muted);
  background:     var(--surface);
  white-space:    nowrap;
  transition:     border-color .12s, color .12s;
  pointer-events: none;
}
.file-pick:hover span { border-color: var(--primary); color: var(--primary); }

.file-name {
  font-size:     .8rem;
  color:         var(--text-muted);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  flex:          1;
  min-width:     60px;
}

.tmpl-toggle {
  display:       inline-flex;
  align-items:   center;
  gap:           .25rem;
  font-size:     .7rem;
  font-weight:   600;
  color:         var(--text-muted);
  cursor:        pointer;
  user-select:   none;
  white-space:   nowrap;
  flex-shrink:   0;
  padding:       .2rem .55rem;
  border:        1.5px solid var(--border);
  border-radius: 100px;
  transition:    border-color .12s, color .12s, background .12s;
}
.tmpl-toggle:has(input:checked) {
  border-color: var(--primary);
  color:        var(--primary-strong);
  background:   var(--primary-light);
}
.tmpl-toggle input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

/* ── Export picker ────────────────────────────────────────────────────────── */
.export-picker { padding: 1.25rem 1.5rem .9rem; }

.export-info {
  padding:     .7rem 1.5rem;
  font-size:   .875rem;
  border-top:  1px solid var(--border);
  background:  var(--surface-2);
  display:     flex;
  align-items: center;
  gap:         .5rem;
  color:       var(--text-muted);
}
.export-info.ready { color: var(--ok); }
.export-info.error { color: var(--err); }

/* ── Usage section ────────────────────────────────────────────────────────── */
.usage-loader-bar {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding:     1.1rem 1.5rem;
}

.subs-selection-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .65rem 1.5rem;
  border-top:      1px solid var(--border);
  background:      var(--surface-2);
}

.subs-list {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid var(--border);
}

.sub-item {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  padding:       .55rem 1.5rem;
  border-bottom: 1px solid var(--border);
  font-size:     .875rem;
  transition:    background .1s;
}
.sub-item:last-child { border-bottom: none; }
.sub-item:hover      { background: var(--surface-2); }

.sub-item input[type="checkbox"] { flex-shrink: 0; cursor: pointer; accent-color: var(--primary); }

.sub-id       { font-family: var(--mono); font-size: .8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; flex-shrink: 1; min-width: 0; }
.sub-customer { color: var(--text-muted); font-size: .8rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sub-status   {
  font-size:      .7rem;
  font-weight:    700;
  padding:        .15rem .45rem;
  border-radius:  4px;
  background:     var(--ok-bg);
  color:          var(--ok);
  text-transform: capitalize;
  flex-shrink:    0;
}
.sub-status.cancelled    { background: var(--err-bg);  color: var(--err); }
.sub-status.paused       { background: var(--dup-bg);  color: var(--dup); }
.sub-status.non_renewing { background: var(--test-bg); color: var(--test-color); }

.hs-meta-badge {
  font-family:   var(--mono);
  font-size:     .72rem;
  color:         var(--text-muted);
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       .1rem .4rem;
  max-width:     200px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  flex-shrink:   0;
}

.hs-search-input {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       .35rem .625rem;
  font-size:     .825rem;
  outline:       none;
  width:         200px;
  background:    var(--surface);
}
.hs-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

.select-sm {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       .35rem .5rem;
  font-size:     .825rem;
  background:    var(--surface);
  cursor:        pointer;
}

.usage-form {
  padding:        1rem 1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
  border-top:     1px solid var(--border);
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-row {
  display:   flex;
  gap:       .75rem;
  flex-wrap: wrap;
}

.field {
  display:        flex;
  flex-direction: column;
  gap:            .3rem;
}

.field-grow { flex: 1; min-width: 160px; }

.field label {
  font-size:      .72rem;
  font-weight:    700;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.optional {
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0;
  color:          var(--text-xs);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select {
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       .45rem .7rem;
  font-size:     .875rem;
  font-family:   var(--font);
  background:    var(--surface);
  color:         var(--text);
  outline:       none;
  width:         100%;
  transition:    border-color .12s, box-shadow .12s;
  -webkit-appearance: none;
  appearance:    none;
}
input:focus, select:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(255,108,55,.14);
}

select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:       2.2rem;
  cursor:              pointer;
}

.input-group {
  display:       flex;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  transition:    border-color .12s, box-shadow .12s;
}
.input-group:focus-within {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(255,108,55,.14);
}
.input-group input {
  border:        none;
  background:    var(--surface);
  border-radius: 0;
  flex:          1;
  min-width:     80px;
}
.input-group input:focus { box-shadow: none; }

.input-addon {
  display:     flex;
  align-items: center;
  padding:     0 .7rem;
  background:  var(--surface-2);
  border-left: 1.5px solid var(--border);
  font-size:   .8rem;
  color:       var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           .35rem;
  padding:       .5rem 1.1rem;
  border-radius: var(--radius-sm);
  border:        1.5px solid transparent;
  font-size:     .875rem;
  font-weight:   500;
  font-family:   var(--font);
  cursor:        pointer;
  transition:    background .12s, border-color .12s, opacity .12s, box-shadow .12s;
  white-space:   nowrap;
  user-select:   none;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-h); border-color: var(--primary-h); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: #bbb; }

.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover:not(:disabled) { background: var(--primary-light); }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--err); color: #fff; border-color: var(--err); }
.btn-danger:hover:not(:disabled) { background: #c01c1c; border-color: #c01c1c; }

.btn-xs { padding: .25rem .65rem; font-size: .775rem; }
.btn-sm { padding: .35rem .85rem; font-size: .825rem; }

/* ── Tools tab ────────────────────────────────────────────────────────────── */
.tool-preview {
  border-top: 1px solid var(--border);
  padding:    1rem 1.5rem;
  font-size:  .875rem;
}

.tool-warning {
  color:         var(--err);
  font-weight:   600;
  margin-bottom: .5rem;
}

.tool-empty { color: var(--text-muted); }

.count-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            .2rem;
  padding:        0;
}

.count-list li { color: var(--text-muted); font-size: .875rem; }
.count-list li strong { color: var(--text); }

.preview-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .8rem;
}
.preview-table th {
  text-align:     left;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-muted);
  padding:        .35rem .5rem;
  border-bottom:  1px solid var(--border);
}
.preview-table td {
  padding:     .4rem .5rem;
  border-bottom: 1px solid var(--border);
  color:       var(--text);
  font-family: var(--mono);
  font-size:   .78rem;
}
.preview-table tbody tr:last-child td { border-bottom: none; }
.preview-table tbody tr:hover td     { background: var(--surface-2); }
.preview-table .num { text-align: right; font-family: var(--font); }

.table-scroll { overflow-x: auto; }

.edit-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .8rem;
}
.edit-table th {
  text-align:     left;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-muted);
  padding:        .35rem .5rem;
  border-bottom:  1px solid var(--border);
  white-space:    nowrap;
}
.edit-table td {
  padding:       .3rem .4rem;
  border-bottom: 1px solid var(--border);
}
.edit-table tbody tr:last-child td { border-bottom: none; }
.edit-table input,
.edit-table select {
  width:        100%;
  min-width:    110px;
  background:   var(--surface-2);
  border:       1px solid var(--border);
  border-radius: 6px;
  padding:      .3rem .45rem;
  font-size:    .8rem;
  color:        var(--text);
  font-family:  var(--mono);
}
.edit-table td:last-child { width: 1%; white-space: nowrap; }
.edit-table input[readonly] { color: var(--text-muted); cursor: default; }

/* The Translations table ends in a text column, not an action column — don't
   let it inherit the 1%-width squeeze meant for the delete-button column. */
#tr-table td:last-child {
  width:      auto;
  white-space: normal;
}
#tr-table input {
  min-width: 160px;
}

/* Test Data: extra property columns (added via the "＋ Add column" picker) */
.td-add-col-th { white-space: nowrap; }
.td-add-col-select {
  width:        auto;
  min-width:    150px !important;
  font-size:    .72rem !important;
  font-weight:  400;
  text-transform: none;
  letter-spacing: normal;
  color:        var(--text-muted);
  background:   var(--surface-2);
  border:       1px solid var(--border);
  border-radius: 6px;
  padding:      .25rem .4rem;
}
.td-extra-col-th {
  display:        flex;
  align-items:    center;
  gap:            .35rem;
  white-space:    nowrap;
}
.td-col-remove {
  border:       none;
  background:   none;
  color:        var(--text-muted);
  cursor:       pointer;
  font-size:    .7rem;
  line-height:  1;
  padding:      0;
}
.td-col-remove:hover { color: var(--text); }

/* ── Translations tab ─────────────────────────────────────────────────────── */
.tr-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             1rem;
  margin-bottom:   1rem;
}
.tr-header h2 {
  font-size:   1.05rem;
  font-weight: 700;
  margin:      0 0 .2rem;
}

.count-pill {
  display:         inline-block;
  min-width:       1.1rem;
  margin-left:     .4rem;
  padding:         .05rem .4rem;
  border-radius:   999px;
  background:      rgba(127,127,127,.18);
  font-size:       .72rem;
  font-weight:     600;
  text-align:      center;
}
.btn-primary .count-pill { background: rgba(255,255,255,.25); color: #fff; }

.tr-file-card { padding: 1rem 1.5rem; margin-bottom: 1rem; }
.tr-file-empty-actions { display: flex; gap: .6rem; margin: .6rem 0 .4rem; }
.tr-file-card.dragover { border-color: var(--primary); background: var(--primary-light); }

.tr-file-loaded { display: flex; align-items: center; gap: .85rem; }
.tr-file-icon   { font-size: 1.4rem; line-height: 1; }
.tr-file-meta   { flex: 1; min-width: 0; }
.tr-file-name {
  font-family:   var(--mono);
  font-weight:   600;
  font-size:     .88rem;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.tr-file-actions { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.file-pick-sm span { padding: .3rem .65rem; font-size: .78rem; }

.tr-link {
  position:    relative;
  cursor:      pointer;
  color:       var(--primary);
  font-size:   .82rem;
  font-weight: 500;
  white-space: nowrap;
}
.tr-link:hover { text-decoration: underline; }
.tr-link input[type="file"] {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  width:    100%;
  height:   100%;
}

/* .tr-subtabs / .tr-subtab: shared pill-tab style, also used by the Pricing
   Table doctype switcher (#pt-doctype-tabs). */
.tr-subtabs {
  display:       flex;
  gap:           .2rem;
  padding:       .2rem;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}
.tr-subtab {
  background:    transparent;
  border:        none;
  color:         var(--text-muted);
  padding:       .4rem .7rem;
  border-radius: 6px;
  font-size:     .8rem;
  font-weight:   500;
  cursor:        pointer;
  white-space:   nowrap;
  flex-shrink:   0;
}
.tr-subtab.active { background: var(--surface); color: var(--text); }
.tr-subtab:hover:not(.active) { color: var(--text); }

/* ── Translations: sidebar + main layout ─────────────────────────────────── */
.tr-body {
  display:      flex;
  align-items:  flex-start;
  gap:          1.5rem;
}

.tr-sidebar {
  width:       200px;
  flex-shrink: 0;
  position:    sticky;
  top:         1rem;
}

.tr-sidebar-label {
  display:        block;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-muted);
  margin-bottom:  .4rem;
}

.tr-locale-block { margin-bottom: 1.1rem; }

.tr-locale-tabs {
  display:       inline-flex;
  gap:           .15rem;
  padding:       .15rem;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tr-locale-tab {
  background:    transparent;
  border:        none;
  color:         var(--text-muted);
  padding:       .3rem .65rem;
  border-radius: 6px;
  font-size:     .75rem;
  font-weight:   700;
  letter-spacing: .03em;
  cursor:        pointer;
}
.tr-locale-tab.active { background: var(--surface); color: var(--text); }
.tr-locale-tab:hover:not(.active) { color: var(--text); }

.tr-section-nav { display: flex; flex-direction: column; gap: .05rem; }
.tr-nav-group-title {
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-muted);
  margin:         .9rem 0 .3rem;
}
.tr-nav-group-title:first-child { margin-top: 0; }
.tr-nav-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .5rem;
  width:           100%;
  background:      transparent;
  border:          none;
  border-radius:   var(--radius-sm);
  color:           var(--text-muted);
  padding:         .45rem .6rem;
  font-size:       .84rem;
  text-align:      left;
  cursor:          pointer;
}
.tr-nav-item-indent { padding-left: 1rem; }
.tr-nav-item:hover  { background: var(--surface-2); color: var(--text); }
.tr-nav-item.active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.tr-nav-count {
  flex-shrink:   0;
  min-width:     1.1rem;
  padding:       .05rem .35rem;
  border-radius: 999px;
  background:    rgba(127,127,127,.18);
  font-size:     .7rem;
  font-weight:   600;
  text-align:    center;
}

.tr-main { flex: 1; min-width: 0; }

.tr-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .75rem;
  flex-wrap:       wrap;
  margin:          0 0 .75rem;
}

.tr-section-crumb {
  font-size:      .7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-muted);
}
.tr-section-heading { font-size: 1.05rem; font-weight: 700; margin: .1rem 0 0; }

.tr-filters {
  display:       flex;
  gap:           .2rem;
  padding:       .2rem;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}
.tr-filter {
  background:    transparent;
  border:        none;
  color:         var(--text-muted);
  padding:       .4rem .7rem;
  border-radius: 6px;
  font-size:     .8rem;
  font-weight:   500;
  cursor:        pointer;
  white-space:   nowrap;
}
.tr-filter.active { background: var(--surface); color: var(--text); }
.tr-filter:hover:not(.active) { color: var(--text); }

.tr-search { flex: 1; min-width: 180px; }
.tr-search input {
  width:         100%;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       .45rem .7rem;
  font-size:     .82rem;
  color:         var(--text);
  font-family:   var(--font);
}

.tr-col-num { width: 2.4rem; text-align: right; }
.tr-table td:first-child {
  width:       2.4rem;
  text-align:  right;
  color:       var(--text-muted);
  font-family: var(--mono);
  font-size:   .72rem;
  padding-right: .6rem;
}
.tr-table tr.tr-row-hidden { display: none; }
.tr-table tr.tr-row-edited td:first-child { color: var(--primary); font-weight: 700; }
.tr-table input.tr-empty::placeholder { color: var(--text-muted); font-style: italic; }

/* Generic (non-catalog) sections: read-only label/reference text columns. */
.tr-generic-label { font-size: .82rem; }
.tr-generic-ref    { font-size: .8rem; color: var(--text-muted); max-width: 320px; }

/* Lock the identifying columns (#, ID, Name / #, Field) in place so they stay
   visible while scrolling right through the translatable columns. */
#tr-table { table-layout: fixed; }
#tr-table th, #tr-table td { background: var(--surface); }

#tr-table.tr-kind-grouped th:nth-child(1), #tr-table.tr-kind-grouped td:nth-child(1) { width: 2.6rem; }
#tr-table.tr-kind-grouped th:nth-child(2), #tr-table.tr-kind-grouped td:nth-child(2) { width: 200px; }
#tr-table.tr-kind-grouped th:nth-child(3), #tr-table.tr-kind-grouped td:nth-child(3) { width: 200px; }
#tr-table.tr-kind-grouped th:nth-child(1), #tr-table.tr-kind-grouped td:nth-child(1),
#tr-table.tr-kind-grouped th:nth-child(2), #tr-table.tr-kind-grouped td:nth-child(2),
#tr-table.tr-kind-grouped th:nth-child(3), #tr-table.tr-kind-grouped td:nth-child(3) {
  position: sticky;
  z-index:  1;
}
#tr-table.tr-kind-grouped th:nth-child(1), #tr-table.tr-kind-grouped td:nth-child(1) { left: 0; }
#tr-table.tr-kind-grouped th:nth-child(2), #tr-table.tr-kind-grouped td:nth-child(2) { left: 2.6rem; }
#tr-table.tr-kind-grouped th:nth-child(3), #tr-table.tr-kind-grouped td:nth-child(3) { left: calc(2.6rem + 200px); }

#tr-table.tr-kind-generic th:nth-child(1), #tr-table.tr-kind-generic td:nth-child(1) { width: 2.6rem; position: sticky; left: 0; z-index: 1; }
#tr-table.tr-kind-generic th:nth-child(2), #tr-table.tr-kind-generic td:nth-child(2) { width: 260px; position: sticky; left: 2.6rem; z-index: 1; }

@media (max-width: 860px) {
  .tr-body    { flex-direction: column; }
  .tr-sidebar { width: 100%; position: static; }
  .tr-section-nav { flex-direction: row; flex-wrap: wrap; }
  .tr-nav-group-title { width: 100%; }
}

/* ── Test Data: sets + workspace ────────────────────────────────────────────── */
.tab-panel-testdata {
  display:        flex;
  flex-direction: row;
  align-items:    flex-start;
  gap:            0;
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  background:     var(--surface);
  overflow:       hidden;
}

.count-badge {
  font-family:   var(--mono);
  font-size:     .6875rem;
  padding:       1px 6px;
  border-radius: 99px;
  background:    var(--surface-2);
  color:         var(--text-muted);
}

/* Sets panel */
.td-sets-panel {
  width:          clamp(200px, 18vw, 248px);
  flex:           none;
  display:        flex;
  flex-direction: column;
  border-right:   1px solid var(--border);
  align-self:     stretch;
}
.td-sets-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          52px;
  padding:         0 .75rem 0 1.125rem;
  border-bottom:   1px solid var(--border);
}
.td-sets-header-label {
  display:        flex;
  align-items:    center;
  gap:            .5rem;
  font-size:      .6875rem;
  font-weight:    500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--text-xs);
}
.td-sets-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        .5rem;
  overflow-y:     auto;
  max-height:     480px;
}
.td-draft-item {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding:        .625rem .75rem;
  border-radius:  9px;
  background:     var(--primary-light);
  border:         1px dashed rgba(255,122,69,.35);
}
.td-draft-item-title { font-size: .8125rem; font-weight: 500; color: var(--primary-strong); }
.td-draft-item-meta   { font-family: var(--mono); font-size: .6875rem; color: var(--text-xs); }

.td-set-item {
  position:       relative;
  display:        flex;
  align-items:    flex-start;
  gap:            8px;
  padding:        10px 6px 10px 12px;
  border-radius:  9px;
  cursor:         pointer;
}
.td-set-item:hover { background: var(--surface-2); }
.td-set-item.active { background: var(--primary-light); }
.td-set-item.active::before {
  content:       '';
  position:      absolute;
  left:          -8px;
  top:           10px;
  bottom:        10px;
  width:         3px;
  border-radius: 0 3px 3px 0;
  background:    var(--primary);
}
.td-set-item-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.td-set-item-name {
  font-size:     .8125rem;
  font-weight:   500;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.td-set-item.active .td-set-item-name { color: var(--primary-strong); }
.td-set-item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-set-chip {
  display:       flex;
  align-items:   center;
  gap:           4px;
  height:        18px;
  padding:       0 6px;
  flex:          none;
  border-radius: 5px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  font-family:   var(--mono);
  font-size:     .625rem;
  color:         var(--text-muted);
  white-space:   nowrap;
}
.td-set-chip-dot { width: 5px; height: 5px; border-radius: 2px; flex: none; }
.td-set-date { font-size: .6875rem; color: var(--text-faint); }
.td-set-remove,
.td-set-rename {
  display:       grid;
  place-items:   center;
  width:         24px;
  height:        24px;
  border-radius: 6px;
  color:         var(--text-faint);
  flex:          none;
  background:    none;
  border:        none;
  cursor:        pointer;
}
.td-set-remove:hover { background: rgba(255,107,107,.12); color: #FF8A8A; }
.td-set-rename:hover { background: var(--surface-2); color: var(--text); }
.td-set-empty { padding: .75rem; font-size: .75rem; line-height: 1.5; color: var(--text-faint); }

/* Workspace */
.td-workspace { flex: 1; min-width: 0; }
.td-workspace-inner { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem 2rem; }

.td-set-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.td-set-header-titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.td-set-header-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
#td-set-name { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-set-meta { font-size: .8125rem; color: var(--text-xs); }
.td-set-header-actions { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }

.dirty-badge {
  display:       flex;
  align-items:   center;
  gap:           6px;
  height:        22px;
  padding:       0 8px;
  border-radius: 99px;
  background:    rgba(245,196,81,.10);
  border:        1px solid rgba(245,196,81,.25);
  white-space:   nowrap;
  color:         #F5C451;
  font-size:     .6875rem;
  font-weight:   500;
}
.dirty-dot { width: 5px; height: 5px; border-radius: 99px; background: #F5C451; flex: none; }

/* Save popover */
.td-save-popover {
  position:      absolute;
  top:           44px;
  right:         0;
  width:         320px;
  display:       flex;
  flex-direction: column;
  gap:           14px;
  padding:       1rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 12px;
  box-shadow:    0 20px 50px rgba(0,0,0,.35);
  z-index:       30;
}
.td-save-include { display: flex; flex-direction: column; gap: 4px; }
.td-save-include-label { font-size: .75rem; font-weight: 500; color: var(--text-muted); padding-bottom: 2px; }
.td-save-include-row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; cursor: pointer; }
.td-save-include-row:hover { background: var(--surface-2); }
.td-checkbox {
  width:         16px;
  height:        16px;
  border-radius: 4px;
  display:       grid;
  place-items:   center;
  flex:          none;
  border:        1px solid var(--border-dashed);
  color:         transparent;
}
.td-checkbox.checked { background: var(--primary); border-color: var(--primary); color: #fff; }
.td-save-include-name { flex: 1; font-size: .8125rem; color: var(--text); }
.td-save-include-count { font-family: var(--mono); font-size: .6875rem; color: var(--text-xs); }
.td-save-popover-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Segmented tabs */
.td-tabs {
  display:        flex;
  align-items:    center;
  gap:            4px;
  padding:        4px;
  border-radius:  11px;
  background:     var(--surface-2);
  border:         1px solid var(--border);
  align-self:     flex-start;
  max-width:      100%;
  flex-wrap:      wrap;
}
.td-tab {
  display:        flex;
  align-items:    center;
  gap:            8px;
  height:         32px;
  padding:        0 12px;
  flex:           none;
  border-radius:  8px;
  cursor:         pointer;
  white-space:    nowrap;
  font-size:      .8125rem;
  font-weight:    500;
  color:          var(--text-xs);
  background:     transparent;
  border:         none;
  font-family:    inherit;
}
.td-tab:hover { color: var(--text); }
.td-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.15); }
.td-tab-step { font-family: var(--mono); font-size: .6875rem; color: var(--text-faint); }
.td-tab.active .td-tab-step { color: var(--primary); }
.td-tab .count-badge { background: var(--border); }
.td-tab.active .count-badge { background: var(--surface-2); }

.td-panel { display: flex; flex-direction: column; }

.td-grid-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.td-grid-count { font-family: var(--mono); font-size: .6875rem; color: var(--text-xs); white-space: nowrap; padding-top: 4px; }

/* Overview */
.td-overview-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.td-ov-empty { padding: 2.5rem 1.25rem; text-align: center; font-size: .8125rem; color: var(--text-xs); }
.td-ov-customer { display: flex; flex-direction: column; gap: 10px; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.td-ov-customer:last-child { border-bottom: none; }
.td-ov-customer-row { display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.td-ov-avatar {
  width:         32px;
  height:        32px;
  border-radius: 99px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  color:         var(--text);
  display:       grid;
  place-items:   center;
  font-size:     .75rem;
  font-weight:   600;
  flex:          none;
}
.td-ov-customer-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.td-ov-customer-name { font-size: .875rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-ov-customer-name.muted { color: var(--text-xs); }
.td-ov-customer-detail { font-size: .75rem; color: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-ov-customer-id { font-family: var(--mono); font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }
.td-ov-customer-id.muted { color: var(--text-faint); }
.td-ov-sub { display: flex; align-items: center; gap: 12px; margin-left: 44px; padding: 8px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; min-width: 0; }
.td-ov-sub:hover { border-color: var(--border-dashed); }
.td-ov-sub-price { font-family: var(--mono); font-size: .75rem; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-ov-sub-price.missing { color: #FF8A8A; }
.td-ov-sub-qty { font-family: var(--mono); font-size: .75rem; color: var(--text-xs); white-space: nowrap; }
.td-status-pill { display: flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; font-size: .6875rem; font-weight: 500; white-space: nowrap; flex: none; }
.td-ov-nosubs { margin-left: 44px; font-size: .75rem; color: var(--text-faint); }

.td-ov-orphans { display: flex; flex-direction: column; gap: 10px; padding: 1rem 1.25rem; background: var(--bg); }
.td-ov-orphans-head { display: flex; align-items: center; gap: 12px; }
.td-ov-orphans-icon { width: 32px; height: 32px; border-radius: 99px; border: 1px dashed var(--border-dashed); color: var(--text-xs); display: grid; place-items: center; flex: none; }
.td-ov-orphans-title { font-size: .875rem; font-weight: 500; color: var(--text); }
.td-ov-orphans-note { font-size: .75rem; color: var(--text-xs); }
.td-ov-orphan-row { display: flex; align-items: center; gap: 12px; margin-left: 44px; padding: 8px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; min-width: 0; }
.td-ov-orphan-row:hover { border-color: var(--border-dashed); }
.td-ov-orphan-cust { font-family: var(--mono); font-size: .75rem; color: var(--text); white-space: nowrap; }
.td-ov-orphan-arrow { color: var(--text-faint); }

@media (max-width: 860px) {
  .tab-panel-testdata { flex-direction: column; }
  .td-sets-panel { width: auto; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Tools grid ──────────────────────────────────────────────────────────── */
#tab-tools {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1rem;
  align-items:           start;
}

.card-full { grid-column: 1 / -1; }

.section-label {
  grid-column:    1 / -1;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color:          var(--text-muted);
  padding:        .85rem 0 .35rem;
  border-bottom:  2px solid var(--border);
  margin-top:     .5rem;
}

@media (max-width: 740px) {
  #tab-tools { grid-template-columns: 1fr; }
  .card-full { grid-column: 1; }
  .section-label { grid-column: 1; }
}

/* ── Reset workflow ───────────────────────────────────────────────────────── */
.reset-steps {
  display:        flex;
  flex-direction: column;
  padding:        .25rem 1.5rem .75rem;
}

.reset-step {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  min-height:    2.5rem;
  padding:       .5rem 0;
  border-bottom: 1px solid var(--border);
}
.reset-step:last-child { border-bottom: none; }

.reset-step .checkbox-label { flex: 0 0 auto; min-width: 270px; }

.reset-step-config {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex:        1;
}
.reset-step-config select        { flex: 1; max-width: 300px; }
.reset-step-config input[type='number'] { width: 90px; }

.reset-config-label {
  font-size:   .8rem;
  color:       var(--text-muted);
  white-space: nowrap;
}

/* ── Templates ───────────────────────────────────────────────────────────── */
.template-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         .7rem 1.5rem;
  border-bottom:   1px solid var(--border);
}
.template-item:last-child { border-bottom: none; }

.template-meta { flex: 1; min-width: 0; }

.template-name {
  font-size:     .875rem;
  font-weight:   600;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.template-files {
  font-size:  .775rem;
  color:      var(--text-muted);
  margin-top: .1rem;
}

.template-actions {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  flex-shrink: 0;
}

.templates-action {
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  padding:       .875rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background:    var(--surface-2);
  flex-wrap:     wrap;
}

.templates-action input[type="text"] {
  width:       220px;
  flex-shrink: 0;
}

/* ── Time travel ──────────────────────────────────────────────────────────── */
.tt-body {
  padding:        1rem 1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            .9rem;
}

.tt-current {
  display:     flex;
  align-items: center;
  gap:         .6rem;
}

.tt-label {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-muted);
  flex-shrink:    0;
}

.tt-time {
  font-family: var(--mono);
  font-size:   .875rem;
  color:       var(--text);
}

/* ── Lookup results ───────────────────────────────────────────────────────── */
.lookup-body { border-top: 1px solid var(--border); }

.lookup-section {
  padding:       .85rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.lookup-section:last-child { border-bottom: none; }

.lookup-section-title {
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--text-muted);
  margin-bottom:  .5rem;
}

.lookup-sub {
  padding:       .5rem 0;
  border-bottom: 1px solid var(--border);
}
.lookup-sub:first-of-type { padding-top: 0; }
.lookup-sub:last-child    { border-bottom: none; padding-bottom: 0; }

.lookup-row {
  display:     flex;
  align-items: baseline;
  gap:         .5rem;
  font-size:   .835rem;
  line-height: 1.7;
}

.lookup-key {
  width:          90px;
  flex-shrink:    0;
  font-size:      .72rem;
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lookup-val { color: var(--text); }
.lookup-val.mono { font-family: var(--mono); font-size: .8rem; }

/* ── Inspect: HubSpot sync badge ─────────────────────────────────────────── */
.hs-sync-badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding:        .15rem .45rem;
  border-radius:  4px;
  flex-shrink:    0;
}
.hs-synced     { background: var(--ok-bg);  color: var(--ok); }
.hs-not-synced { background: var(--border); color: var(--text-muted); }

/* ── Inspect: collapsible details ────────────────────────────────────────── */
.inspect-details { margin-top: .35rem; }

.inspect-details-summary {
  font-size:      .72rem;
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor:         pointer;
  user-select:    none;
  list-style:     none;
  display:        flex;
  align-items:    center;
  gap:            .3rem;
}
.inspect-details-summary::-webkit-details-marker { display: none; }
.inspect-details-summary::before {
  content:     '▶';
  font-size:   .55rem;
  transition:  transform .15s;
}
details[open] > .inspect-details-summary::before { transform: rotate(90deg); }

.inspect-cf-summary {
  margin-bottom: 0;
}
.inspect-cf-count {
  background:    var(--border);
  color:         var(--text-muted);
  border-radius: 10px;
  padding:       0 .4rem;
  font-size:     .65rem;
}

.inspect-details-body {
  margin-top:  .4rem;
  padding-left: .75rem;
  border-left:  2px solid var(--border);
}
.inspect-code {
  font-family:  var(--mono);
  font-size:    .75rem;
  color:        var(--text-muted);
  word-break:   break-all;
  white-space:  pre-wrap;
}

.inspect-field-hint {
  font-size:  .65rem;
  color:      var(--text-muted);
  font-style: italic;
}

.inspect-hs-key {
  color:       var(--ok) !important;
  font-weight: 700 !important;
}

.inspect-searched-badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      .65rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding:        .1rem .35rem;
  border-radius:  4px;
  background:     var(--primary-light);
  color:          var(--primary-strong);
  margin-left:    .4rem;
  flex-shrink:    0;
}

.lookup-section--searched {
  border-left: 3px solid var(--primary-h);
  padding-left: calc(1.5rem - 3px);
}

.lookup-sub--searched {
  border-left:   3px solid var(--primary-h);
  padding-left:  calc(.5rem - 3px);
  border-radius: 0 0 0 2px;
}

/* ── Site diff ────────────────────────────────────────────────────────────── */
.diff-vs {
  align-self:     flex-end;
  padding-bottom: .5rem;
  font-weight:    600;
  color:          var(--text-muted);
  flex-shrink:    0;
}

.diff-body { border-top: 1px solid var(--border); }

.diff-section {
  padding:       .85rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.diff-section:last-child { border-bottom: none; }

.diff-section-title {
  font-size:      .7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--text-muted);
  margin-bottom:  .5rem;
}

.diff-stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }

.diff-stat {
  font-size:     .775rem;
  font-weight:   600;
  padding:       .2rem .55rem;
  border-radius: 100px;
}
.diff-only-a { background: var(--err-bg);  color: var(--err); }
.diff-both   { background: var(--ok-bg);   color: var(--ok); }
.diff-only-b { background: var(--test-bg); color: var(--test-color); }

.diff-list { margin-top: .5rem; }

.diff-list-label {
  font-size:      .72rem;
  font-weight:    600;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  .3rem;
}

.id-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }

.diff-id {
  font-family:   var(--mono);
  font-size:     .72rem;
  padding:       .15rem .4rem;
  border-radius: 4px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  color:         var(--text);
}
.diff-id-a { background: var(--err-bg);  border-color: #fca5a5; color: var(--err); }
.diff-id-b { background: var(--test-bg); border-color: #fcd34d; color: var(--test-color); }

/* ── Inline status ────────────────────────────────────────────────────────── */
.status-inline       { font-size: .8rem; color: var(--text-muted); }
.status-inline.ok    { color: var(--ok); }
.status-inline.error { color: var(--err); }

.muted-text { font-size: .8rem; color: var(--text-muted); }

/* ── Checkbox ─────────────────────────────────────────────────────────────── */
.checkbox-label {
  display:     inline-flex;
  align-items: center;
  gap:         .45rem;
  font-size:   .82rem;
  cursor:      pointer;
  user-select: none;
}
.checkbox-label input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
  display:       inline-block;
  width:         13px;
  height:        13px;
  border:        2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation:     spin .55s linear infinite;
  flex-shrink:   0;
}

/* ── Log (in-flow at bottom of main-wrapper) ─────────────────────────────── */
.log-section {
  height:         var(--log-h);
  background:     var(--bg);
  border-top:     1px solid var(--border);
  display:        flex;
  flex-direction: column;
  flex-shrink:    0;
  transition:     height .2s ease;
}
.log-section.collapsed {
  height: auto;
}
.log-section.collapsed .log {
  display: none;
}
.log-section.collapsed .log-bar {
  border-bottom: none;
}
.log-section.collapsed .log-chevron {
  transform: rotate(-90deg);
}
.log-chevron {
  transition: transform .2s ease-out;
}

.log-bar {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  height:      42px;
  padding:     0 1.25rem 0 1.5rem;
  flex-shrink: 0;
}
.log-bar .log-title {
  flex: 1;
}
.log-toggle-btn {
  padding: .2rem .3rem;
  color:   var(--text-muted);
}

.log-title {
  font-family:    var(--mono);
  font-size:      .69rem;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-muted);
}

.log-count-badge {
  font-family:   var(--mono);
  font-size:     .69rem;
  padding:       1px 7px;
  border-radius: 99px;
  background:    var(--badge-bg);
  color:         var(--text-muted);
}

.log {
  font-family:    var(--mono);
  font-size:      .75rem;
  line-height:    1.6;
  overflow-y:     auto;
  padding:        .25rem 1.5rem 1rem;
  border-top:     1px solid var(--border);
  display:        flex;
  flex-direction: column;
  gap:            .25rem;
  flex:           1;
}

.log-empty { color: var(--text-faint); padding-top: .5rem; }

.log-row      { display: flex; gap: .875rem; padding: 0; }
.log-hdr      { font-weight: 700; color: var(--text); margin-top: .2rem; }
.log-time     { color: var(--text-faint); flex-shrink: 0; }
.log-level    { flex-shrink: 0; width: 44px; }
.log-text     { color: var(--text); flex: 1; min-width: 0; word-break: break-word; }
.log-ok       { color: var(--ok); }
.log-dup      { color: var(--dup); }
.log-err      { color: var(--err); }
.log-info     { color: var(--info); }
.log-customer { color: var(--info); font-weight: 600; }

/* ── Import preview modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
}

.modal {
  background:     var(--surface);
  border-radius:  var(--radius);
  box-shadow:     var(--shadow);
  width:          100%;
  max-width:      560px;
  max-height:     80vh;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .875rem 1.25rem;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}
.modal-header h3 { font-size: .975rem; font-weight: 600; }

.modal-sm { max-width: 420px; }

.confirm-modal-message {
  white-space: pre-line;
  font-size:   .875rem;
  line-height: 1.5;
}

.modal-body {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
  padding:        1.1rem 1.25rem;
  overflow-y:     auto;
}

.modal-step {
  font-size:     .75rem;
  font-weight:   600;
  color:         var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top:    .4rem;
}
.modal-step:first-child { margin-top: 0; }

.modal-account { max-width: 460px; }

.api-key-help {
  margin-top:    .5rem;
  padding:       .6rem .75rem;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
}
.api-key-help summary {
  cursor:      pointer;
  font-size:   .8rem;
  font-weight: 600;
  color:       var(--primary);
}
.api-key-help[open] summary { margin-bottom: .5rem; }
.api-key-help ol {
  margin:      0;
  padding-left: 1.1rem;
  font-size:   .8rem;
  color:       var(--text-muted);
  line-height: 1.6;
}

/* ── Settings modal ───────────────────────────────────────────────────────── */
.theme-toggle-group {
  display:       flex;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  width:         fit-content;
}
.theme-option {
  padding:      .4rem .9rem;
  font-size:    .8rem;
  font-weight:  500;
  font-family:  var(--font);
  background:   var(--surface);
  color:        var(--text-muted);
  border:       none;
  border-right: 1.5px solid var(--border);
  cursor:       pointer;
  transition:   background .12s, color .12s;
}
.theme-option:last-child { border-right: none; }
.theme-option:hover:not(.active) { background: var(--surface-2); }
.theme-option.active { background: var(--primary); color: #fff; }

.modal-header-sub {
  font-size: .75rem;
  color:     var(--text-muted);
  margin-top: .1rem;
}

.env-toggle-group {
  display:       flex;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:      hidden;
  width:         fit-content;
}
.env-toggle-option {
  padding:      .4rem .9rem;
  font-size:    .8rem;
  font-weight:  600;
  color:        var(--text-muted);
  border-right: 1.5px solid var(--border);
}
.env-toggle-option:last-child { border-right: none; }
.env-toggle-option.active { background: var(--primary); color: #fff; }

.btn-link-danger {
  background:  transparent;
  border:      none;
  color:       var(--err);
  font-size:   .85rem;
  font-weight: 500;
  font-family: var(--font);
  cursor:      pointer;
  padding:     .5rem 0;
}
.btn-link-danger:hover { text-decoration: underline; }

.modal-footer-split { justify-content: space-between; }
.modal-footer-actions { display: flex; align-items: center; gap: .5rem; }

.modal-footer {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  padding:     .875rem 1.25rem;
  border-top:  1px solid var(--border);
  flex-shrink: 0;
}

.preview-summary {
  padding:       .55rem 1.25rem;
  font-size:     .825rem;
  font-weight:   500;
  border-bottom: 1px solid var(--border);
  flex-shrink:   0;
}
.preview-summary.has-errors   { background: var(--err-bg); color: var(--err); }
.preview-summary.has-warnings { background: var(--dup-bg); color: var(--dup); }

.preview-counter {
  padding:       .45rem 1.25rem;
  font-size:     .8rem;
  color:         var(--text-muted);
  background:    var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink:   0;
}

.preview-list {
  list-style: none;
  overflow-y: auto;
  flex:       1;
  padding:    .25rem 0;
}

.preview-row {
  display:       flex;
  align-items:   flex-start;
  gap:           .625rem;
  padding:       .5rem 1.25rem;
  font-size:     .85rem;
  border-bottom: 1px solid var(--border);
}
.preview-row:last-child { border-bottom: none; }

.preview-row input[type=checkbox] { margin-top: .175rem; flex-shrink: 0; cursor: pointer; }

.preview-row-body  { flex: 1; min-width: 0; }
.preview-row-label { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-row-id    { font-size: .775rem; color: var(--text-muted); font-family: var(--mono); margin-top: .1rem; }
.preview-row-msgs  { margin-top: .3rem; display: flex; flex-direction: column; gap: .15rem; }

.preview-msg-error   { font-size: .775rem; color: var(--err); }
.preview-msg-warning { font-size: .775rem; color: var(--dup); }

.preview-row.has-error                   { background: var(--err-bg); }
.preview-row.has-warning:not(.has-error) { background: var(--dup-bg); }

/* ── Sub-item per-row quantity ───────────────────────────────────────────────── */
.sub-qty {
  margin-left:   auto;
  width:         64px;
  flex-shrink:   0;
  text-align:    right;
  font-size:     .8rem;
  padding:       .2rem .4rem;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  background:    var(--surface);
  color:         var(--text);
}

/* ── Pricing Table tab ────────────────────────────────────────────────────── */
.pt-toolbar {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             1rem;
  padding:         0 .25rem .9rem;
}
.pt-toolbar .hint { padding: 0; }
.pt-toolbar-actions {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex:        none;
  white-space: nowrap;
}

.pt-layout {
  display:               grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap:                   1rem;
  align-items:           start;
}

.pt-col {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  min-width:      0;
}

.pt-checks {
  display:        flex;
  flex-direction: column;
  gap:            .55rem;
  padding:        1rem 1.5rem 1.2rem;
}

.pt-subhead {
  font-size:      .68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--text-muted);
  margin-top:     .4rem;
}
.pt-subhead:first-child { margin-top: 0; }

.pt-nested { margin-left: 1.4rem; }

.pt-order-list {
  display:        flex;
  flex-direction: column;
  gap:            .4rem;
  margin:         0 0 .3rem;
  padding:        0;
  list-style:     none;
}

.pt-order-item {
  display:       flex;
  align-items:   center;
  gap:           .55rem;
  padding:       .4rem .6rem;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background:    var(--surface);
  cursor:        grab;
}

.pt-order-item.dragging { opacity: .4; }
.pt-order-item.drag-over { border-color: var(--primary); }

.pt-order-handle {
  color:       var(--text-xs);
  line-height: 1;
  user-select: none;
}

.pt-order-item .checkbox-label { flex: 1; }

.pt-order-col {
  display:        flex;
  flex-direction: column;
  gap:            .3rem;
  flex:           1;
  min-width:      0;
}

.pt-order-col-title { font-size: .85rem; }

.pt-order-col-toggles {
  display:  flex;
  flex-wrap: wrap;
  gap:      .9rem;
}

.checkbox-label.pt-mini {
  font-size: .75rem;
  color:     var(--text-muted);
  gap:       .35rem;
}

.pt-appearance-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   .9rem;
  padding:               1rem 1.5rem 1.2rem;
}

.pt-appearance-grid input[type="color"] {
  width:         100%;
  height:        34px;
  padding:       .15rem;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background:    var(--surface);
  cursor:        pointer;
}

.pt-preview-mode {
  display:     flex;
  align-items: center;
  gap:         1rem;
  padding:     0 1.5rem;
  flex-wrap:   wrap;
}

.pt-preview-mode-label {
  font-size: .8rem;
  color:     var(--text-muted);
}

.pt-preview-wrap { padding: 1rem 1.5rem 0; }

.pt-preview-frame {
  width:         100%;
  height:        420px;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background:    #fff;
}

.pt-output-wrap { padding: 1rem 1.5rem 0; }

.pt-output {
  width:         100%;
  min-height:    420px;
  resize:        vertical;
  font-family:   var(--mono);
  font-size:     .78rem;
  line-height:   1.5;
  color:         var(--text);
  background:    var(--surface-2);
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       .75rem;
  white-space:   pre;
}

@media (max-width: 900px) {
  .pt-layout { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .pt-appearance-grid { grid-template-columns: 1fr; }
}