:root{--v5-track-gap:5px;--v5-track-height:34px}

/* Discrete choices only: same horizontal language as Cloud Bead ironing choices. */
.v5-native-select{display:none!important}
.v5-option-rail,.recognition-picker-options,.cloud-iron-style-picker{display:flex;box-sizing:border-box;width:100%;min-width:0;gap:var(--v5-track-gap);padding:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x}
.v5-option-rail::-webkit-scrollbar,.recognition-picker-options::-webkit-scrollbar,.cloud-iron-style-picker::-webkit-scrollbar,[data-v5-horizontal-scroll]::-webkit-scrollbar{display:none}
.v5-option-rail button,.recognition-picker-options button,.cloud-iron-style-picker button{flex:0 0 auto;width:auto;min-width:max-content;height:var(--v5-track-height);min-height:var(--v5-track-height);padding:0 10px;border:0!important;border-radius:7px;background:var(--surface-2);color:var(--muted);box-shadow:none!important;font-size:12px;text-align:center;scroll-snap-align:center}
.v5-option-rail button.active,.v5-option-rail button[aria-selected="true"],.recognition-picker-options button.active,.cloud-iron-style-picker button.active{background:var(--accent-soft);color:var(--accent)}
.v5-option-rail button:focus-visible,.recognition-picker-options button:focus-visible,.cloud-iron-style-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.v5-option-rail button:disabled{opacity:.45}
.expandable-select{display:contents}.expandable-select-toggle,.expandable-select-options{display:none!important}.recognition-picker-toggle{display:none!important}.recognition-picker-options[hidden]{display:flex!important}
[data-v5-horizontal-scroll]{cursor:grab}
[data-v5-horizontal-scroll].v5-drag-scrolling{cursor:grabbing;scroll-snap-type:none!important;user-select:none}

/* Concrete small tools: title/status container, then their controls below. */
.v5-tool-card{display:grid;gap:8px;align-content:start}
.v5-tool-heading{display:flex;box-sizing:border-box;width:100%;min-height:36px;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:12px;font-weight:700}
.v5-tool-heading>label,.v5-tool-heading>strong,.v5-tool-heading>span:first-child{min-width:0;margin:0;color:inherit;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v5-tool-status,.v5-tool-heading>span:last-child:not(:first-child){flex:0 0 auto;padding:2px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:9px;font-weight:700;white-space:nowrap}

/* Main-page color cards: three aligned rows, filled from top to bottom. */
.panel :is(.color-choice-list,.drawing-palette-grid):has(>.color-choice),.panel .drawing-palette-grid:has(>.drawing-palette-entry){display:grid!important;grid-template-columns:none!important;grid-template-rows:repeat(3,max-content)!important;grid-auto-flow:column!important;grid-auto-columns:max-content!important;align-content:start;justify-content:start;gap:5px;max-height:none;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.panel :is(.color-choice-list,.drawing-palette-grid)>*{grid-row:auto!important;scroll-snap-align:start}

/* Cloud preparation palette: series index on top, four rows per column, top to bottom. */
.cloud-prepare-series{display:flex;width:100%;gap:4px;margin:0 0 7px;padding:0 0 6px;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--line);scrollbar-width:none;overscroll-behavior-x:contain}
.cloud-prepare-series::-webkit-scrollbar,.cloud-prepare-palette::-webkit-scrollbar{display:none}.cloud-prepare-series button{flex:0 0 auto;min-width:max-content;height:30px;padding:0 9px;border:0;border-radius:7px;background:var(--surface-2);color:var(--muted);box-shadow:none;font-size:11px}.cloud-prepare-series button.active{background:var(--accent-soft);color:var(--accent)}
.cloud-prepare-palette{display:grid!important;grid-template-columns:none!important;grid-template-rows:repeat(4,max-content)!important;grid-auto-flow:column!important;grid-auto-columns:max-content!important;align-content:start;justify-content:start;gap:5px;max-height:none;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}.cloud-prepare-palette>*{scroll-snap-align:start}

/* Keep the requested Cloud Bead intro removal and restrained portrait tab selection. */
.cloud-pane-intro{display:none!important}.cloud-workflow-pane{padding-top:0}
@media (orientation:portrait) and (max-width:900px){body:not(.modal-open) :is(.mobile-bottom-nav,.panel-tabs,.focus-tabs) button.active,body:not(.modal-open) :is(.mobile-bottom-nav,.panel-tabs,.focus-tabs) button[aria-selected="true"],body:not(.modal-open) :is(.mobile-bottom-nav,.panel-tabs,.focus-tabs) button[aria-pressed="true"]{border-color:transparent!important;background:transparent!important;color:var(--accent)!important;box-shadow:none!important}}
@media (prefers-reduced-motion:reduce){.v5-option-rail{scroll-behavior:auto}}
/* 5.0.0 correction: the range belongs to the whole small tool. */
.v5-tool-card,
.smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group),
.advanced-crop-section {
  box-sizing: border-box;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--surface-2, #f2f1ed) !important;
  box-shadow: none !important;
}

.v5-tool-heading,
.smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group) > .smart-sidebar-title-row,
.advanced-crop-section > .advanced-crop-section-title {
  display: flex !important;
  min-width: 0;
  width: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.v5-tool-heading > :first-child,
.smart-sidebar-title-row > :first-child,
.advanced-crop-section-title > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v5-tool-status,
.smart-sidebar-title-row .smart-status,
.advanced-crop-section-title .advanced-crop-status {
  flex: 0 0 auto;
  max-width: 58%;
  margin-left: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted, #625f59) !important;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.v5-option-row,
.v5-option-field,
.cloud-iron-style-field {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
}

.v5-option-row > label,
.v5-option-field > label,
.cloud-iron-style-field > label {
  white-space: nowrap !important;
}

.v5-option-rail,
.recognition-picker-options,
.cloud-iron-style-picker {
  display: flex !important;
  width: 100%;
  min-width: 0;
  justify-content: stretch;
}

.v5-option-rail > *,
.recognition-picker-options > *,
.cloud-iron-style-picker > * {
  flex: 1 0 max-content;
  text-align: center;
}

.panel .color-choice,
.color-choice,
.cloud-prepare-color-card,
.cloud-prepare-chip,
.cloud-palette-card,
.drawing-palette-card {
  border: 1px solid var(--line, #d6d0c5) !important;
  box-shadow: none;
}

.v5-color-grid {
  display: grid !important;
  grid-template-columns: none !important;
  grid-template-rows: repeat(3, max-content) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-content: start;
  justify-content: start;
  gap: 8px 10px !important;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.cloud-prepare-palette {
  display: grid !important;
  grid-template-columns: none !important;
  grid-template-rows: repeat(4, max-content) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-content: start;
  justify-content: start;
  gap: 8px 10px !important;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#paletteList,
.palette-list {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  contain: none !important;
}

.v5-switch-row {
  display: flex !important;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0 !important;
  color: inherit;
  cursor: pointer;
}

.v5-switch-row + .v5-switch-row {
  border-top: 1px solid var(--line, #d6d0c5);
}

.v5-switch-row > input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  order: 10;
  flex: 0 0 44px;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  align-self: center !important;
  margin: 0 0 0 auto !important;
  padding: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: none;
  background: #b9b7b2 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.v5-switch-row > input[type="checkbox"]::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
  transform: translateX(0);
  transition: transform 160ms ease;
}

.v5-switch-row > input[type="checkbox"]:checked {
  background: var(--accent, #2f7566) !important;
}

.v5-switch-row > input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

.v5-switch-row > input[type="checkbox"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #2f7566) 55%, transparent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .v5-tool-card,
  .smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group),
  .advanced-crop-section {
    padding: 12px !important;
    border-radius: 16px !important;
  }
}

/* 5.0.0 portrait and visibility corrections. */
.recognition-picker.panel-group-hidden,
.recognition-picker.v5-tool-card.panel-group-hidden {
  display: none !important;
}

.recognition-picker-options {
  display: flex !important;
  box-sizing: border-box;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.recognition-picker-options > button {
  flex: 1 0 122px !important;
  min-height: 46px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  text-align: center !important;
  scroll-snap-align: start;
}

.recognition-picker-options > button.active {
  border-color: transparent !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

/* Cloud switches keep their original centered 38x22 geometry. */
.cloud-switch-line.v5-switch-row {
  min-height: 0 !important;
  padding: 9px 0 !important;
}

.cloud-switch-line.v5-switch-row > input[type="checkbox"] {
  order: initial;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  flex: 0 0 38px !important;
  align-self: center !important;
  padding: 0 !important;
}

.cloud-switch-line.v5-switch-row > input[type="checkbox"]::before {
  content: none !important;
}

@media (orientation: portrait) and (max-width: 900px) {
  .cloud-prepare-palette {
    grid-template-columns: none !important;
    grid-template-rows: repeat(4, 44px) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 44px !important;
    grid-auto-rows: 44px !important;
    align-items: start !important;
    gap: 5px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .cloud-prepare-palette > .cloud-prepare-chip {
    box-sizing: border-box;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    aspect-ratio: 1 !important;
    align-self: start !important;
  }

  .cloud-prepare-chip i {
    inset: 3px !important;
  }

  .cloud-prepare-chip span {
    right: 1px !important;
    bottom: 1px !important;
    padding: 0 2px !important;
    font-size: 6px !important;
    line-height: 1.25 !important;
  }

  /* Detached/expanded navigation regains the selected background. */
  body:not(.modal-open) .portrait-floating-tabs button.active,
  body:not(.modal-open) .portrait-floating-tabs button[aria-selected="true"],
  body:not(.modal-open) .portrait-floating-tabs button[aria-pressed="true"] {
    border-color: transparent !important;
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
  }

  .smart-square-option.v5-switch-row {
    min-height: 38px !important;
    align-self: start;
    padding: 4px 0 !important;
  }

  .smart-square-option.v5-switch-row > input[type="checkbox"] {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    align-self: center !important;
  }

}

/* Stable follow-up corrections. */
.cloud-prepare-palette > .cloud-prepare-chip {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

.drawing-palette-grid > .drawing-palette-entry {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

.recognition-picker.v5-tool-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 8px;
}

.recognition-picker.v5-tool-card > .v5-tool-heading,
.recognition-picker.v5-tool-card > .recognition-picker-options,
.recognition-picker.v5-tool-card > .recognition-mode-note {
  grid-column: 1;
  width: 100%;
}

.recognition-picker-options {
  margin-top: 0 !important;
}

.recognition-picker-options > button,
.settings-field > .v5-option-rail > button,
#uiSettingsDialog .v5-option-rail > button {
  flex: 1 1 0 !important;
  min-width: max-content;
}

.v5-board-size-tool {
  display: grid;
  box-sizing: border-box;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px;
  border: 0;
  border-radius: 18px;
  background: var(--surface-2);
}

.v5-board-size-heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}

.v5-board-size-heading strong {
  font-size: 13px;
}

.v5-board-size-heading span {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.v5-board-size-tool .dimension-field-row,
.v5-board-size-tool .dimension-lock-options,
.v5-board-size-tool .board-size-options {
  margin: 0 !important;
}

.v5-board-size-tool .dimension-lock-options {
  margin-top: 1px !important;
}

/* Symmetry remains a compact checkbox group, not a switch group. */
.drawing-symmetry-options .v5-switch-row {
  display: flex !important;
  min-height: 30px !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 2px 3px !important;
  border: 0 !important;
}

.drawing-symmetry-options .v5-switch-row > input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  order: 0;
  flex: 0 0 17px;
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: initial !important;
  border-radius: 0 !important;
  background: initial !important;
  box-shadow: none !important;
  accent-color: var(--accent);
}

.drawing-symmetry-options .v5-switch-row > input[type="checkbox"]::before {
  content: none !important;
}

/* Board aspect locks stay as compact checkboxes; no switch divider is shown. */
.dimension-lock-options .v5-switch-row {
  display: flex !important;
  min-height: 28px !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 2px 0 !important;
  border: 0 !important;
}

.dimension-lock-options .v5-switch-row > input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  order: 0;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: initial !important;
  border-radius: 0 !important;
  background: initial !important;
  box-shadow: none !important;
  accent-color: var(--accent);
}

.dimension-lock-options .v5-switch-row > input[type="checkbox"]::before {
  content: none !important;
}

#cloudBackgroundChoices {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
}

@media (max-width: 760px) {
  .v5-board-size-tool {
    padding: 12px;
    border-radius: 16px;
  }
}

/* 5.0.0 restrained polish: preserve the palette and interaction model. */
:root {
  --v5-font-sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --v5-radius-control: 8px;
  --v5-radius-card: 12px;
  --v5-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--v5-font-sans);
  font-synthesis: none;
}

body {
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.workspace-title,
.surface-header h2,
.dialog-title-row h2,
.welcome-copy h1,
.smart-sidebar-title,
.advanced-crop-title {
  font-weight: 720;
  letter-spacing: -0.018em;
}

.field > label,
.sub-label,
.range-head label,
.smart-field-label,
.smart-color-head,
.tool-toggle-title,
.v5-tool-heading,
.v5-board-size-heading strong,
details > summary {
  font-weight: 660;
  letter-spacing: 0.005em;
}

.hint,
.project-status,
.summary-count,
.v5-tool-status,
.v5-board-size-heading span {
  line-height: 1.45;
  letter-spacing: 0.005em;
}

button,
input:not([type="range"]):not([type="checkbox"]):not([type="color"]),
select,
textarea,
.v5-option-rail > button,
.recognition-picker-options > button {
  border-radius: var(--v5-radius-control);
}

button,
summary,
.color-choice,
.drawing-palette-entry,
.cloud-prepare-chip {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.color-choice:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white 8%);
  outline-offset: 2px;
  box-shadow: var(--v5-focus-ring);
}

.color-picker-card,
.advanced-card,
.filter-card,
.stats,
.v5-board-size-tool,
.v5-tool-card,
.smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group),
.advanced-crop-section {
  border-radius: var(--v5-radius-card) !important;
}

.color-picker-card > summary,
.advanced-card > summary {
  min-height: 44px;
  padding-inline: 12px;
}

.color-picker-card[open] > summary,
.advanced-card[open] > summary {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 76%, var(--accent-soft) 24%);
}

.details-body {
  border-top-color: color-mix(in srgb, var(--line) 78%, transparent);
}

.v5-option-rail > button,
.recognition-picker-options > button,
.cloud-iron-style-picker > button {
  font-weight: 560;
}

.v5-option-rail > button.active,
.v5-option-rail > button[aria-selected="true"],
.recognition-picker-options > button.active,
.cloud-iron-style-picker > button.active {
  font-weight: 680;
}

@media (orientation: portrait) {
  #cropPanel .details-body {
    min-width: 0;
  }

  #cropCanvas.crop-preview {
    box-sizing: border-box;
    width: min(100%, 720px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
  }
}

/* Dialogs open neutrally instead of making the first action look half-selected. */
#uiSettingsDialog:focus,
#projectLibraryDialog:focus,
#aboutDialog:focus,
#blankProjectDialog:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Give the first color/refine tool a small breath below the top handle and tabs. */
.panel[data-active-panel="colors"] > .color-picker-card[data-panel-group="colors"] {
  margin-top: 6px !important;
}

body:not([data-show-remove-background="true"]) .panel[data-active-panel="edit"] > #replaceToolPanel,
body[data-show-remove-background="true"] .panel[data-active-panel="edit"] > .remove-background-tool {
  margin-top: 6px !important;
}

/* Smart session card has its own fixed track and never inherits drawer sizing. */
.smart-focus-current-card {
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  overflow: hidden;
}

.smart-focus-current-card .smart-guide-actions,
.smart-focus-current-card .smart-guide-actions button {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
}

@media (orientation: landscape) {
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) {
    grid-template-rows: 56px 96px minmax(0, 1fr);
  }

  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .smart-sidebar-head {
    grid-row: 1;
  }

  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .smart-focus-current-card {
    grid-row: 2;
    align-self: start;
  }

  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .fullscreen-controls {
    grid-row: 3;
  }
}

@media (orientation: portrait) {
  .smart-board-view.open .smart-focus-current-card:not([hidden]) {
    position: fixed;
    z-index: 188;
    inset: calc(56px + var(--top-safe) + 6px) 8px auto;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) .smart-board-stage {
    padding-top: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  summary,
  .color-choice,
  .drawing-palette-entry,
  .cloud-prepare-chip {
    transition-duration: 0.01ms !important;
  }
}

/* Unified tool-heading rhythm and status language. */
:root {
  --v5-tool-inset: 12px;
  --v5-tool-gap: 12px;
  --v5-heading-gap: 10px;
  --v5-status-size: 11px;
}

.v5-tool-card,
.v5-board-size-tool,
.smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group),
.advanced-crop-section {
  box-sizing: border-box;
  margin: 0 0 var(--v5-tool-gap) !important;
  padding: var(--v5-tool-inset) !important;
}

.v5-tool-heading,
.smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group) > .smart-sidebar-title-row,
.advanced-crop-section > .advanced-crop-section-title,
.v5-board-size-heading {
  min-height: 24px;
  margin: 0 0 var(--v5-heading-gap) !important;
  padding: 0 !important;
  align-items: center;
}

.panel > .color-picker-card,
.panel > .advanced-card {
  margin: 0 0 var(--v5-tool-gap) !important;
}

.color-picker-card > summary,
.advanced-card > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px var(--v5-tool-inset);
}

.v5-tool-status,
.v5-tool-heading > span:last-child:not(:first-child),
.range-head > .range-value,
.smart-field-label > span:last-child:not(:first-child),
.smart-sidebar-title-row .smart-status,
.advanced-crop-section-title .advanced-crop-status,
.color-picker-card > summary > .summary-count,
.advanced-card > summary > .summary-count,
.cloud-card-title > span:last-child:not(:first-child),
.cloud-color-rail > div:first-child > span:last-child {
  flex: 0 0 auto;
  max-width: 58%;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-size: var(--v5-status-size) !important;
  font-weight: 560 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.35 !important;
  letter-spacing: 0.005em;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-field-label,
.smart-color-head,
.range-head,
.cloud-card-title,
.cloud-color-rail > div:first-child {
  align-items: center;
}

.smart-cell-size-value {
  touch-action: manipulation;
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#smartCellSizeExact {
  cursor: text;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
}

@supports (-webkit-touch-callout: none) {
  #smartCellSizeExact {
    font-size: 16px;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  .v5-tool-card,
  .v5-board-size-tool,
  .smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group),
  .advanced-crop-section {
    padding: var(--v5-tool-inset) !important;
  }
}

/* Main inspector: keep category tabs visually separate from the first tool. */
@media (orientation: landscape) {
  .panel > .inspector-head {
    margin-bottom: 14px !important;
  }
}

/* Compact two-line timing prevents the color status column from being squeezed. */
.focus-timing-stack {
  min-width: 78px;
  max-width: 108px;
  gap: 4px;
  padding-left: 8px;
  padding-right: 2px;
  text-align: right;
}

.focus-timing-line {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  white-space: nowrap;
}

.focus-timing-line .focus-timing-label,
.focus-timing-line .focus-timer,
.focus-timing-line time {
  display: inline-block;
}

.focus-timing-line .focus-timer,
.focus-timing-line time,
.focus-timing-value > time {
  font-size: 14px;
  line-height: 1.2;
}

.focus-time-eta {
  display: block;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
}

.focus-current-row > div:nth-child(2),
.focus-current-row > div:nth-child(2) strong,
.focus-current-row > div:nth-child(2) span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-timing-value {
  min-width: 0;
  gap: 3px;
}

.focus-timing-value button {
  min-width: 30px !important;
  min-height: 24px !important;
  padding-inline: 4px !important;
}

/* The focus color tool uses the same quiet gray surface as neighboring tools. */
.focus-colors-tool-card {
  border-color: transparent !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

/* Final fixed placement: independent from the smart tool drawer in both orientations. */
.smart-focus-current-card {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  overflow: hidden !important;
}

.smart-focus-current-card .smart-guide-actions,
.smart-focus-current-card .smart-guide-actions button {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

@media (orientation: landscape) {
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) {
    grid-template-rows: 56px 96px minmax(0, 1fr) !important;
  }

  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .smart-sidebar-head { grid-row: 1; }
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .smart-focus-current-card { grid-row: 2; align-self: start; }
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .fullscreen-controls { grid-row: 3; }
}

@media (orientation: portrait) {
  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) {
    grid-template-rows: calc(56px + var(--top-safe)) 96px minmax(0, 1fr) !important;
  }

  .smart-board-view.open .smart-focus-current-card:not([hidden]) {
    position: relative !important;
    z-index: 188;
    inset: auto !important;
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch;
    justify-self: stretch;
    margin: 0 !important;
    border-inline: 0;
    border-top: 0;
    border-radius: 0;
    background: var(--surface);
  }

  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) .smart-board-stage {
    grid-column: 1;
    grid-row: 3;
    padding-top: 10px !important;
  }

  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) .fullscreen-controls.focus-inspector {
    inset: calc(152px + var(--top-safe)) 0 0 !important;
    height: calc(100dvh - 152px - var(--top-safe)) !important;
  }
}

/* Homepage board presets stay on one rail at every available width. */
.panel .board-size-options[aria-label="按拼豆板尺寸调整"] {
  display: flex !important;
  flex-flow: row nowrap !important;
  grid-template-columns: none !important;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.panel .board-size-options[aria-label="按拼豆板尺寸调整"] > button {
  flex: 0 0 max(72px, calc((100% - 21px) / 4)) !important;
  min-width: 72px !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* Smart guide order uses the same restrained selected state as adjacent tools. */
.smart-guide-modes [data-smart-guide].active,
.smart-guide-modes [data-smart-guide][aria-pressed="true"] {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line)) !important;
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) !important;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .smart-guide-modes [data-smart-guide].active:hover,
  .smart-guide-modes [data-smart-guide][aria-pressed="true"]:hover {
    color: var(--accent) !important;
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line)) !important;
    background: var(--accent-soft) !important;
  }
}

/* Settings accordions reuse the custom-color disclosure treatment. */
.settings-group > summary {
  justify-content: flex-start;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--accent-soft) 24%) !important;
}

.settings-group > summary::before {
  content: "+" !important;
  display: grid !important;
  flex: 0 0 20px;
  inline-size: 20px;
  block-size: 20px;
  box-sizing: border-box;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface));
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-indent: 0;
}

.settings-group[open] > summary::before {
  content: "−" !important;
}

.settings-group[open] > summary {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--accent-soft) 24%) !important;
}

/* Keep smart-board presets and session actions on one adaptive row. */
#smartBoardView .smart-board-size {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(3px, .8vw, 6px) !important;
  width: 100%;
}

#smartBoardView .smart-board-size > button {
  min-width: 0 !important;
  padding-inline: clamp(2px, 1vw, 8px) !important;
  font-size: clamp(9px, 2.6vw, 12px) !important;
  white-space: nowrap;
}

.smart-focus-current-card .smart-guide-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
}

@media (orientation: landscape) {
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .fullscreen-controls.focus-inspector {
    padding-top: 8px !important;
  }
}

@media (orientation: portrait) {
  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) .fullscreen-controls.focus-inspector {
    inset: calc(160px + var(--top-safe)) 0 0 !important;
    height: calc(100dvh - 160px - var(--top-safe)) !important;
  }
}

/* Every bead-board preset is one horizontal rail; overflow scrolls instead of wrapping. */
.board-size-options,
.smart-board-size {
  display: flex !important;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 1px 0 5px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.board-size-options > button,
.smart-board-size > button {
  flex: 0 0 clamp(72px, 24%, 104px) !important;
  min-width: 72px !important;
  max-width: 104px;
  padding-inline: 8px !important;
  font-size: clamp(10px, 2.6vw, 12px) !important;
  scroll-snap-align: start;
  white-space: nowrap;
}

.smart-focus-current-card {
  position: relative;
  top: auto;
  width: calc(100% - 24px);
  max-width: calc(100% - 24px);
  box-sizing: border-box;
}

.smart-session-options {
  grid-template-columns: minmax(0, 1fr) !important;
}

.smart-session-actions button[hidden] {
  display: none !important;
}

@media (orientation: portrait) {
  .smart-focus-current-card {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin: 6px 8px 0;
  }

  .smart-focus-current-card .focus-current-row {
    grid-template-columns: 24px minmax(42px, auto) minmax(54px, 1fr);
  }
}

/* Smart focus navigation is only a matching action row beneath the timer. */
.smart-focus-current-card .smart-guide-panel {
  gap: 0;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.smart-focus-current-card .smart-guide-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.smart-focus-current-card .smart-guide-actions button {
  min-height: 32px;
}

/* Tool titles are the primary anchor inside each compact card. */
.v5-tool-heading > :first-child,
.v5-board-size-heading > strong,
.smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group) > .smart-sidebar-title-row > :first-child,
.advanced-crop-section > .advanced-crop-section-title > :first-child,
.color-picker-card > summary > span:first-of-type,
.advanced-card > summary > span:first-of-type,
.tool-toggle-title,
#filterCard > .field:first-child > label:first-child {
  color: var(--text);
  font-size: 14px !important;
  font-weight: 680 !important;
  line-height: 1.4;
  letter-spacing: -0.008em;
}

.v5-tool-heading,
.v5-board-size-heading,
.smart-sidebar-section:not(.smart-segment-section):not(.focus-session-group) > .smart-sidebar-title-row,
.advanced-crop-section > .advanced-crop-section-title {
  min-height: 26px;
}

/* 5.0.0 unified compact option and disclosure language. */
.recommendation-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 7px !important;
}

.recommendation-head .recommendation-title,
.smart-color-head > span:first-child {
  min-width: 0;
  margin: 0 !important;
  color: var(--text);
  font-size: 14px !important;
  font-weight: 680 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  white-space: nowrap;
}

.recommendation-head > .v5-option-rail,
.smart-sidebar-section[data-smart-group="colors"] > .v5-option-rail,
.focus-colors-section .smart-color-head > .v5-option-rail {
  width: 100%;
}

.v5-option-rail,
.recognition-picker-options,
.cloud-iron-style-picker {
  display: flex !important;
  width: 100%;
  align-items: stretch;
}

.v5-option-rail > button,
.recognition-picker-options > button,
.cloud-iron-style-picker > button {
  flex: 1 1 max-content !important;
  min-width: max-content !important;
  white-space: nowrap;
}

.v5-option-rail > button:first-child:nth-last-child(2),
.v5-option-rail > button:first-child:nth-last-child(2) ~ button,
.recognition-picker-options > button:first-child:nth-last-child(2),
.recognition-picker-options > button:first-child:nth-last-child(2) ~ button,
.cloud-iron-style-picker > button:first-child:nth-last-child(2),
.cloud-iron-style-picker > button:first-child:nth-last-child(2) ~ button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.manual-tool-switch,
.refine-scope-options,
.smart-effect-mode,
.focus-guide-modes,
.focus-guide-actions,
.crop-fit-actions,
.drawing-palette-tabs,
.board-size-options,
.smart-board-size {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
  width: 100%;
}

.manual-tool-switch > *,
.refine-scope-options > *,
.smart-effect-mode > *,
.focus-guide-modes > *,
.focus-guide-actions > *,
.crop-fit-actions > *,
.drawing-palette-tabs > *,
.board-size-options > *,
.smart-board-size > * {
  min-width: 0 !important;
  white-space: nowrap;
}

.replace-row,
.manual-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 8px;
}

.replace-arrow {
  display: grid !important;
  width: 100%;
  min-height: 24px;
  place-items: center;
  color: var(--muted);
  font-size: 18px;
  font-weight: 760;
  line-height: 1;
}

#replaceColorBtn,
#manualEditBtn {
  width: 100%;
  min-height: 40px;
}

.color-picker-card > summary,
.advanced-card > summary,
.settings-group > summary,
.drawing-inline-palette > summary {
  list-style: none;
}

.color-picker-card > summary::-webkit-details-marker,
.advanced-card > summary::-webkit-details-marker,
.settings-group > summary::-webkit-details-marker,
.drawing-inline-palette > summary::-webkit-details-marker {
  display: none;
}

.color-picker-card > summary::before,
.advanced-card > summary::before,
.settings-group > summary::before,
.drawing-inline-palette > summary::before {
  content: "+";
  display: grid;
  flex: 0 0 20px;
  inline-size: 20px;
  block-size: 20px;
  box-sizing: border-box;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface));
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-indent: 0;
}

.color-picker-card[open] > summary::before,
.advanced-card[open] > summary::before,
.settings-group[open] > summary::before,
.drawing-inline-palette[open] > summary::before {
  content: "−";
}

.settings-group,
.drawing-inline-palette {
  display: grid;
  gap: 0 !important;
  margin: 12px 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: var(--v5-radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--v5-card-shadow);
}

.settings-group > summary,
.drawing-inline-palette > summary {
  display: flex;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding: 10px var(--v5-tool-inset) !important;
  cursor: pointer;
  color: var(--text);
  font-size: 14px !important;
  font-weight: 680 !important;
  line-height: 1.4;
}

.settings-group[open] > summary,
.drawing-inline-palette[open] > summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.settings-group > :not(summary) {
  margin-inline: var(--v5-tool-inset) !important;
}

.settings-group > summary + * {
  margin-top: 12px !important;
}

.settings-group > :last-child {
  margin-bottom: 12px !important;
}

.drawing-inline-palette-body {
  padding: 12px !important;
}

.crop-primary-controls {
  display: grid;
  grid-template-columns: minmax(max-content, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}

.crop-primary-controls #resetCropBtn,
.crop-primary-controls .crop-color-row {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
}

.crop-primary-controls .crop-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 4px 8px 4px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.crop-primary-controls .crop-color-row label {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crop-primary-controls .crop-color-row input[type="color"] {
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 32px;
}

.crop-hint-row {
  margin: 0 0 10px !important;
}

html[data-theme="dark"] .crop-color-row label,
body[data-theme="dark"] .crop-color-row label {
  color: #f4f1eb !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .crop-color-row label,
  body:not([data-theme="light"]) .crop-color-row label {
    color: #f4f1eb !important;
  }
}

/* Settings keep their original full-height scroll behavior and use concise summaries. */
.ui-settings-form .dialog-title-row {
  grid-template-columns: 44px minmax(0, 1fr) !important;
}

.ui-settings-form .dialog-title-row h2 {
  text-align: left !important;
}

.ui-settings-form .dialog-title-row > :last-child:not(h2):not(button) {
  display: none;
}

.settings-scroll {
  box-sizing: border-box;
  padding: 0 2px 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.settings-group {
  overflow: visible !important;
  border-radius: 8px !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.settings-group > summary {
  justify-content: flex-start;
  border-radius: 7px !important;
  background: transparent !important;
}

.settings-group > summary::before {
  content: "+" !important;
  display: grid !important;
}

.settings-group[open] > summary::before {
  content: "−" !important;
}

.settings-group > summary::after {
  content: none !important;
  display: none !important;
}

.settings-group > summary::marker {
  content: "";
}

.settings-group > summary > span {
  min-width: 0;
  color: var(--text);
  font: inherit;
}

.settings-group > summary > small {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.35;
  white-space: nowrap;
}

.drawing-inline-palette[open] > summary,
.color-picker-card[open] > summary,
.advanced-card[open] > summary {
  border-bottom: 1px solid var(--line) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.settings-group[open] > summary {
  border-bottom: 0 !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--surface-2) 76%, var(--accent-soft) 24%) !important;
}

.settings-group > :not(summary) {
  background-color: transparent;
}

.settings-group > :not(summary) {
  width: calc(100% - (var(--v5-tool-inset) * 2));
  max-width: calc(100% - (var(--v5-tool-inset) * 2));
  box-sizing: border-box;
}

.settings-group > .field-row {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.drawing-inline-palette {
  overflow: visible !important;
  box-shadow: none !important;
}

.drawing-inline-palette > summary {
  border-radius: 0 !important;
}

/* Focus colors remain one framed tool, with their title and sorter on separate rows. */
.focus-colors-tool-card {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 var(--v5-tool-gap) !important;
  padding: var(--v5-tool-inset) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--v5-radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--v5-card-shadow) !important;
}

.focus-color-sort-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: 100%;
}

.focus-color-sort-block .smart-color-head {
  min-height: 24px;
  margin: 0 !important;
}

.focus-color-sort-block > .v5-option-rail {
  width: 100%;
}

/* Shared session timing language for focus and smart-board work. */
.focus-timing-row,
.smart-session-main,
.smart-session-estimate {
  display: flex;
  align-items: center;
}

.focus-timing-row {
  justify-content: space-between;
  gap: 12px;
}

.focus-time-estimate,
.smart-session-estimate {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.focus-time-estimate {
  min-width: 0;
  text-align: right;
}

.smart-session-card {
  display: grid;
  gap: 5px;
  margin: 10px 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--v5-card-shadow);
}

.smart-session-card[hidden] {
  display: none !important;
}

.smart-session-main {
  justify-content: space-between;
  gap: 10px;
}

.smart-session-main time {
  color: var(--text);
  font-size: 24px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.smart-session-main button {
  min-height: 32px;
  padding: 4px 12px;
}

.smart-session-estimate {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smart-session-estimate > :last-child {
  text-align: right;
}

.smart-session-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.smart-guide-settings {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.smart-guide-settings[hidden],
.smart-guide-panel[hidden] {
  display: none !important;
}

.smart-guide-settings > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.smart-guide-modes,
.smart-guide-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}

.smart-guide-panel {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #dc2626 30%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 92%, #fff1f2);
  box-shadow: 0 7px 16px rgba(127, 29, 29, .07);
}

.smart-guide-panel > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.smart-guide-panel strong {
  color: var(--text);
  font-size: 13px;
}

.smart-guide-panel span {
  color: var(--muted);
  font-size: 11px;
}

.smart-color-item.smart-progress-item {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 4px 6px 4px 8px;
}

.smart-color-select {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 30px !important;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-align: left;
}

.smart-color-select:hover {
  transform: none !important;
}

.smart-color-item .smart-color-meta {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.smart-color-item .smart-color-meta small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 540;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-color-complete {
  min-width: 50px !important;
  min-height: 30px !important;
  padding: 3px 8px !important;
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line)) !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
}

.smart-color-complete.is-complete {
  color: var(--muted) !important;
}

.smart-color-complete:disabled {
  opacity: .45;
}

@media (max-width: 520px) {
  .smart-session-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Restore the compact focus timer hierarchy: elapsed first, ETA second. */
.focus-timing-stack {
  display: grid;
  min-width: 88px;
  align-self: stretch;
  grid-column: 2;
  grid-row: 1 / 3;
  align-content: center;
  gap: 3px;
  padding: 0 4px 0 10px;
  border-left: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.focus-timing-label,
.focus-time-eta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 560;
  line-height: 1.25;
  white-space: nowrap;
}

.focus-timing-stack .focus-timer,
.focus-timing-stack > time,
.focus-timing-value > time {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: .015em;
  white-space: nowrap;
}

.focus-timing-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.focus-timing-value button {
  min-width: 38px !important;
  min-height: 26px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
}

.focus-pause-button.active,
#smartTimerPauseBtn.active {
  border-color: color-mix(in srgb, var(--text) 18%, var(--line)) !important;
  background: color-mix(in srgb, var(--surface-2) 86%, #d8d0c5) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent) !important;
}

/* Smart board reuses the focus card without putting output inside Segments. */
.smart-focus-current-card {
  position: sticky;
  z-index: 6;
  top: 0;
  flex: 0 0 auto;
  margin: 8px 12px 0;
}

.smart-focus-current-card[hidden] {
  display: none !important;
}

.smart-focus-current-card .focus-current-row,
.smart-focus-current-card .focus-total-row {
  min-width: 0;
}

.smart-focus-current-card .smart-guide-panel {
  position: static;
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
  box-shadow: none;
}

#smartTimingBlock[hidden] {
  display: none !important;
}

.focus-colors-tool-card .smart-color-head {
  justify-content: flex-start !important;
  text-align: left !important;
}

.focus-colors-tool-card .smart-color-head > span {
  margin-right: auto;
  text-align: left !important;
}

@media (orientation: landscape) {
  .focus-bead-controls > .focus-colors-tool-card:not(.focus-group-hidden) {
    margin-top: 14px !important;
  }
}

/* Final compact smart-session sizing and action order. */
.smart-focus-current-card {
  padding: 6px 8px;
  row-gap: 4px;
}

.smart-focus-current-card .smart-guide-panel {
  gap: 0;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.smart-focus-current-card .smart-guide-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.smart-focus-current-card .smart-guide-actions button {
  min-width: 0;
  min-height: 28px;
  padding: 3px 6px;
  font-size: 11px;
}

#smartGuidePrevBtn { grid-column: 1; }
#smartTimerPauseBtn { grid-column: 2; }
#smartGuideNextBtn { grid-column: 3; }

.focus-colors-tool-card {
  border-color: transparent !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.smart-focus-current-card {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  overflow: hidden !important;
}

.smart-focus-current-card .smart-guide-actions,
.smart-focus-current-card .smart-guide-actions button {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

@media (orientation: landscape) {
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) {
    grid-template-rows: 56px 96px minmax(0, 1fr) !important;
  }

  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .smart-sidebar-head { grid-row: 1; }
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .smart-focus-current-card { grid-row: 2; align-self: start; }
  .smart-sidebar:has(.smart-focus-current-card:not([hidden])) > .fullscreen-controls { grid-row: 3; }
}

@media (orientation: portrait) {
  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) {
    grid-template-rows: calc(56px + var(--top-safe)) 96px minmax(0, 1fr) !important;
  }

  .smart-board-view.open .smart-focus-current-card:not([hidden]) {
    position: relative !important;
    z-index: 188;
    inset: auto !important;
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch;
    justify-self: stretch;
    margin: 0 !important;
    border-inline: 0;
    border-top: 0;
    border-radius: 0;
    background: var(--surface);
  }

  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) .smart-board-stage {
    grid-column: 1;
    grid-row: 3;
    padding-top: 10px !important;
  }

  .smart-board-view.open:has(.smart-focus-current-card:not([hidden])) .fullscreen-controls.focus-inspector {
    inset: calc(152px + var(--top-safe)) 0 0 !important;
    height: calc(100dvh - 152px - var(--top-safe)) !important;
  }
}
/* Refine one-click outline tool. */
.outline-tool-controls,
.outline-thickness-field,
.outline-code-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.outline-color-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.outline-code-field > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 680;
}

.outline-code-field input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
}

.outline-color-swatch {
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.55);
}

.outline-color-swatch.invalid {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--danger, #b45353) 22%, transparent) 6px 12px) !important;
}

.outline-color-row > .small-button {
  min-height: 38px;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .outline-color-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .outline-color-swatch {
    width: 34px;
    height: 38px;
  }
  .outline-color-row > .small-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}