@charset "UTF-8";
.dev-button {
  position: fixed;
  bottom: calc(var(--bottom-nav-height, 64px) + 12px);
  right: 12px;
  z-index: 9998;
  inline-size: 56px;
  block-size: 56px;
}
.dev-button__menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-inline-size: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: #333333;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  transform-origin: bottom right;
  animation: dev-button-menu-in 0.14s ease-out;
}
.dev-button__menu-item {
  appearance: none;
  border: none;
  background: transparent;
  color: #f1f1f1;
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 13px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.12s ease;
}
.dev-button__menu-item:hover {
  background: rgba(241, 241, 241, 0.08);
}
.dev-button__menu-item:active {
  background: rgba(241, 241, 241, 0.14);
}
.dev-button__menu-item--active {
  background: rgba(237, 86, 80, 0.18);
  color: #ed5650;
}
.dev-button__menu-state {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(241, 241, 241, 0.12);
}
.dev-button--open a::before {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 4px #ed5650;
}

@keyframes dev-button-menu-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.dev-debug-area {
  margin: 0 0 var(--space-4, 16px) 0;
  border: 1px dashed rgba(237, 86, 80, 0.55);
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(237, 86, 80, 0.04) 0 8px, transparent 8px 16px), #f1f1f1;
  overflow: hidden;
  font-family: "Satoshi", system-ui, sans-serif;
}
.dev-debug-area__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(237, 86, 80, 0.1);
  border-block-end: 1px dashed rgba(237, 86, 80, 0.4);
}
.dev-debug-area__label {
  font-family: "Safiro", "Space Grotesk", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ed5650;
}
.dev-debug-area__fill {
  appearance: none;
  border: 1px solid #ed5650;
  background: #ed5650;
  color: #f1f1f1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease;
}
.dev-debug-area__fill:hover {
  filter: brightness(0.95);
}
.dev-debug-area__fill:active {
  transform: translateY(1px);
}
.dev-debug-area__pprint {
  margin: 0;
  padding: 10px 12px;
  max-block-size: 220px;
  overflow: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #333333;
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-button a {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  text-decoration: none;
  color: #f1f1f1;
  font-family: "Safiro", "Space Grotesk", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dev-button a .dev-button__label {
  position: relative;
  z-index: 1;
  line-height: 1;
}
.dev-button a::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  background: #ed5650;
  border: 1.5px solid #333333;
  box-shadow: 0 6px 14px rgba(51, 51, 51, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: -1;
}
.dev-button a:hover::before {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(51, 51, 51, 0.24);
}
.dev-button a:active::before {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(51, 51, 51, 0.18);
}
.dev-button a:focus-visible {
  outline: none;
}
.dev-button a:focus-visible::before {
  box-shadow: 0 0 0 2px #f1f1f1, 0 0 0 4px #ed5650, 0 6px 14px rgba(51, 51, 51, 0.2);
}

.dev-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
}

.dev-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #1a1a2e;
  color: #fff;
  flex-shrink: 0;
}
.dev-toolbar .title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #00d4ff;
}
.dev-toolbar .close {
  background: none;
  border: 1px solid #555;
  color: #ccc;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.dev-toolbar .close:hover {
  background: #333;
  color: #fff;
}

.sidebar-toggle,
.controls-toggle {
  display: none;
  background: #24324a;
  border: 1px solid #3e506f;
  color: #e5edf8;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.sidebar-toggle:hover,
.controls-toggle:hover {
  background: #2e4161;
  border-color: #4f6490;
}

.dev-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.dev-sidebar {
  width: 220px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}
.dev-sidebar header {
  padding: 12px 16px 8px;
  border-bottom: 1px solid #eee;
}
.dev-sidebar header h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}
.dev-sidebar .list {
  flex: 1;
  overflow-y: auto;
}
.dev-sidebar .entry {
  padding: 8px 16px 8px 28px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.1s;
  display: flex;
  align-items: center;
}
.dev-sidebar .entry:hover {
  background: #f0f7ff;
}
.dev-sidebar .entry.active {
  background: #e8f0fe;
  border-left: 3px solid #1a73e8;
  padding-left: 25px;
}
.dev-sidebar .entry .name {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-group {
  border-bottom: 1px solid #e8e8e8;
}
.sidebar-group:last-child {
  border-bottom: none;
}

.sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  background: #fafafa;
  transition: background 0.1s;
}
.sidebar-group-header:hover {
  background: #f0f0f0;
}

.sidebar-group-arrow {
  font-size: 9px;
  color: #999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  transition: transform 0.15s ease;
  transform: rotate(90deg);
}
.sidebar-group-arrow.is-collapsed {
  transform: rotate(0deg);
}

.sidebar-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  flex: 1;
}

.sidebar-group-count {
  font-size: 10px;
  font-weight: 600;
  color: #999;
  background: #eee;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

.sidebar-sub-group:last-child {
  margin-bottom: 2px;
}

.sidebar-sub-group-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.sidebar-sub-group-header:hover {
  background: #f5f5f5;
}

.sidebar-sub-group-arrow {
  font-size: 7px;
  color: #bbb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  transition: transform 0.15s ease;
  transform: rotate(90deg);
}
.sidebar-sub-group-arrow.is-collapsed {
  transform: rotate(0deg);
}

.sidebar-sub-group-label {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  flex: 1;
}

.sidebar-sub-group-count {
  font-size: 9px;
  font-weight: 600;
  color: #aaa;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
}

.sidebar-sub-group-entries .entry.is-nested {
  padding-left: 44px;
}
.sidebar-sub-group-entries .entry.is-nested.active {
  padding-left: 41px;
}

.dev-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dev-main.empty {
  align-items: center;
  justify-content: center;
  color: #999;
}

.dev-controls {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
}
.dev-controls header {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
}
.dev-controls header h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}
.dev-controls .fields {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dev-controls .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}
.dev-controls .field label {
  font-size: 12px;
  font-weight: 500;
  color: #555;
}
.dev-controls .field input[type=text],
.dev-controls .field input[type=number],
.dev-controls .field select {
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.dev-controls .field input[type=text]:focus,
.dev-controls .field input[type=number]:focus,
.dev-controls .field select:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15);
}
.dev-controls .no-controls {
  padding: 12px 16px;
  color: #999;
  font-size: 13px;
}

.dev-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dev-preview header {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dev-preview header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.dev-preview .preview-canvas {
  flex: 1;
  overflow: auto;
  background: #e8eaed;
  display: flex;
  justify-content: center;
  padding: 24px;
}
.dev-preview .content {
  flex: 1;
  overflow: auto;
  min-height: 100%;
  background: #fafafa;
}
.dev-preview .preview-empty,
.dev-preview .preview-error {
  margin: 16px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #d6dbe3;
  background: #ffffff;
  color: #334155;
}
.dev-preview .preview-error {
  border-color: #f4b4b4;
  background: #fff5f5;
}
.dev-preview .preview-error h4 {
  margin-bottom: 6px;
  font-size: 13px;
  color: #b42318;
}

.ds-showcase {
  min-height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.ds-showcase-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-showcase-header h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.12;
  font-weight: 700;
  color: #1f2937;
}
.ds-showcase-header p {
  margin: 0;
  font-size: 16px;
  color: #475569;
}

.ds-showcase-section {
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ds-showcase-section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ds-showcase-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #475569;
}

.ds-showcase-section-description {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.ds-showcase-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ds-showcase-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ds-showcase-card {
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.ds-showcase-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-showcase-stage {
  position: relative;
  overflow: auto;
  min-height: 88px;
  max-height: 420px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #dbe2ea;
  background: #ffffff;
  transform: translateZ(0);
}

.ds-showcase-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
}

.ds-showcase-sub-label {
  font-size: 12px;
  color: #475569;
}

.ds-showcase-preview-empty,
.ds-showcase-preview-error {
  font-size: 12px;
  color: #64748b;
}

.ds-showcase-preview-error {
  color: #b42318;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-showcase-preview-error-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ds-showcase-preview-error-message {
  font-size: 12px;
  line-height: 1.4;
}

.viewport-frame {
  background: #fff;
  width: 100%;
  overflow: auto;
  position: relative;
  transform: translateZ(0);
}
.viewport-frame.is-framed {
  border: 2px solid #c4c7cc;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.viewport-toggles {
  display: flex;
  gap: 4px;
}

.viewport-toggle {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.1s ease;
}
.viewport-toggle:hover {
  background: #f0f0f0;
  border-color: #bbb;
}
.viewport-toggle.is-active {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy-prompt-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.copy-prompt-btn:hover {
  background: #f0f0f0;
  border-color: #bbb;
  color: #333;
}
.copy-prompt-btn.is-copied {
  background: #e6f4ea;
  border-color: #34a853;
  color: #137333;
}

.complex-field.is-modified label {
  color: #1a73e8;
  font-weight: 600;
}
.complex-field.is-modified label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a73e8;
  margin-right: 6px;
  vertical-align: middle;
}

.complex-control-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.complex-summary {
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  min-width: 60px;
}

.complex-edit-btn,
.complex-reset-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.1s ease;
  white-space: nowrap;
}
.complex-edit-btn:hover:not(:disabled),
.complex-reset-btn:hover:not(:disabled) {
  background: #f0f0f0;
  border-color: #bbb;
  color: #333;
}
.complex-edit-btn:disabled,
.complex-reset-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.complex-edit-btn {
  border-color: #1a73e8;
  color: #1a73e8;
}
.complex-edit-btn:hover:not(:disabled) {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1558b0;
}

.dev-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.dev-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  width: 90%;
  max-width: 800px;
  overflow: hidden;
}

.dev-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.dev-modal-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.dev-modal-close {
  background: none;
  border: 1px solid #d0d0d0;
  color: #888;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}
.dev-modal-close:hover {
  background: #f0f0f0;
  color: #333;
  border-color: #bbb;
}

.dev-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.dev-modal-placeholder {
  color: #999;
  font-size: 13px;
}
.dev-modal-placeholder pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
  margin-top: 8px;
  border: 1px solid #e0e0e0;
}

.dev-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
  background: #fafafa;
  flex-shrink: 0;
}

.dev-modal-footer-actions {
  display: flex;
  gap: 8px;
}

.dev-modal-reset-btn,
.dev-modal-cancel-btn,
.dev-modal-done-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
}

.dev-modal-reset-btn {
  background: none;
  border: 1px solid #d0d0d0;
  color: #666;
}
.dev-modal-reset-btn:hover {
  background: #f0f0f0;
  border-color: #bbb;
  color: #333;
}

.dev-modal-cancel-btn {
  background: none;
  border: 1px solid #d0d0d0;
  color: #666;
}
.dev-modal-cancel-btn:hover {
  background: #f0f0f0;
  border-color: #bbb;
  color: #333;
}

.dev-modal-done-btn {
  background: #1a73e8;
  border: 1px solid #1a73e8;
  color: #fff;
}
.dev-modal-done-btn:hover {
  background: #1558b0;
  border-color: #1558b0;
}

.dev-table-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.dev-table-header {
  display: flex;
  background: #f5f7fa;
  border-bottom: 2px solid #e0e0e0;
}

.dev-table-body {
  max-height: 400px;
  overflow-y: auto;
}

.dev-table-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
}
.dev-table-row:hover {
  background: #fafbfc;
}
.dev-table-row:last-child {
  border-bottom: none;
}

.dev-table-cell {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.dev-table-cell.dev-table-cell-index {
  flex: 0 0 36px;
  justify-content: center;
  font-size: 11px;
  color: #999;
  font-weight: 600;
}
.dev-table-cell.dev-table-cell-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #555;
}
.dev-table-cell.dev-table-cell-actions {
  flex: 0 0 70px;
  justify-content: center;
}

.dev-table-cell-input,
.dev-table-cell-select {
  width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}
.dev-table-cell-input:focus,
.dev-table-cell-select:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12);
}

.dev-table-cell-select {
  cursor: pointer;
}

.dev-table-remove-btn {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid #e0c4c4;
  border-radius: 4px;
  background: #fff;
  color: #b42318;
  cursor: pointer;
  transition: all 0.1s;
}
.dev-table-remove-btn:hover {
  background: #fff5f5;
  border-color: #b42318;
}

.dev-table-add-row {
  padding: 8px 12px;
  border-top: 1px solid #e0e0e0;
  background: #fafbfc;
}

.dev-table-add-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px dashed #c0c0c0;
  border-radius: 6px;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: all 0.1s;
  width: 100%;
}
.dev-table-add-btn:hover {
  background: #f0f7ff;
  border-color: #1a73e8;
  color: #1a73e8;
}

.dev-map-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dev-map-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dev-map-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dev-map-field-input input,
.dev-map-field-input select {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}
.dev-map-field-input input:focus,
.dev-map-field-input select:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12);
}

.dev-vector-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.dev-vector-items {
  max-height: 400px;
  overflow-y: auto;
}

.dev-vector-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.dev-vector-item:last-child {
  border-bottom: none;
}
.dev-vector-item:hover {
  background: #fafbfc;
}

.dev-vector-item-index {
  flex: 0 0 24px;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-align: center;
}

.dev-vector-item-input {
  flex: 1;
  min-width: 0;
}
.dev-vector-item-input input,
.dev-vector-item-input select {
  width: 100%;
}

.dev-vector-remove-btn {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid #e0c4c4;
  border-radius: 4px;
  background: #fff;
  color: #b42318;
  cursor: pointer;
  transition: all 0.1s;
  flex-shrink: 0;
}
.dev-vector-remove-btn:hover {
  background: #fff5f5;
  border-color: #b42318;
}

.dev-vector-add {
  padding: 8px 12px;
  border-top: 1px solid #e0e0e0;
  background: #fafbfc;
}

.dev-edn-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-edn-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fafafa;
  color: #333;
  resize: vertical;
  tab-size: 2;
}
.dev-edn-textarea:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12);
  background: #fff;
}

.dev-edn-error {
  padding: 8px 12px;
  font-size: 12px;
  color: #b42318;
  background: #fff5f5;
  border: 1px solid #f4b4b4;
  border-radius: 4px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.field-reset-btn {
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  background: #fff;
  color: #888;
  cursor: pointer;
  transition: all 0.1s;
  flex-shrink: 0;
}
.field-reset-btn:hover {
  background: #f0f0f0;
  border-color: #999;
  color: #555;
}

.field.is-modified > .field-label-row label,
.field.is-modified > label {
  color: #1a73e8;
  font-weight: 600;
}

.controls-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dev-sidebar-backdrop {
  display: none;
}

.controls-reset-all-btn {
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.1s;
}
.controls-reset-all-btn:hover {
  background: #fff5f5;
  border-color: #b42318;
  color: #b42318;
}

@media (max-width: 900px) {
  .dev-toolbar {
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .dev-toolbar .title {
    order: 2;
    flex: 1;
    min-width: 140px;
  }
  .dev-toolbar .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    order: 0;
  }
  .dev-toolbar .controls-toggle {
    display: inline-flex;
    align-items: center;
    order: 1;
  }
  .dev-toolbar .close {
    order: 3;
  }
  .dev-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    z-index: 20;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  }
  .dev-panel.mobile-sidebar-open .dev-sidebar {
    transform: translateX(0);
  }
  .dev-sidebar-backdrop {
    display: block;
    position: absolute;
    inset: 45px 0 0;
    border: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 15;
    cursor: pointer;
  }
  .dev-main {
    min-width: 0;
  }
  .dev-controls {
    max-height: 42vh;
  }
  .dev-controls .fields {
    padding: 10px 12px;
    gap: 10px;
  }
  .dev-controls .field {
    min-width: 0;
    width: 100%;
  }
  .controls-header-row {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }
  .dev-preview header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .dev-preview header h3 {
    width: 100%;
  }
  .dev-preview .preview-canvas {
    padding: 12px;
  }
  .preview-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .viewport-toggles {
    flex-wrap: wrap;
  }
}
/*
 * MVP prototype-local styles — ported verbatim from the reference UI's
 * `mvpworkflow/src/styles/prototype.css`. Adds layout/behavior rules on top
 * of the SKILL design system shipped via `tokens.css` + `dataico.css`.
 *
 * Conventions (preserved from source):
 * - Reuse SKILL tokens (--brand-*, --bg-*, --r-*, --space-*, --shadow-*).
 * - No raw hex colors; tokens or rgba(...,alpha) only.
 * - Each block prefixes with `proto-` so it cannot collide with SKILL.
 *
 * Source: /Users/omar/experiments/figmadataicobranding/prototypes/dataico-expansion/mvpworkflow/src/styles/prototype.css
 */
/* ---------- Drawer ------------------------------------------------------ */
.proto-drawer-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer, 40);
}

.proto-drawer-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  animation: proto-fade-in 160ms ease-out;
}

.proto-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100%;
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: proto-slide-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.proto-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--stroke-thin) solid var(--border-soft);
}

.proto-drawer-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-tight);
  color: var(--text-default);
}

.proto-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-6);
}

@keyframes proto-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes proto-slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
/* ---------- Toasts ------------------------------------------------------ */
.proto-toast-root {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast, 60);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.proto-toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 360px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: var(--stroke-thin) solid var(--border-soft);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-default);
  animation: proto-toast-in 180ms ease-out;
}

.proto-toast-success {
  border-color: var(--brand-charcoal);
}

.proto-toast-error {
  background: var(--brand-coral);
  color: var(--brand-mist);
  border-color: var(--brand-coral);
}

.proto-toast-info { /* default neutral surface */ }

@keyframes proto-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------- Section / collapsible -------------------------------------- */
.proto-section {
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-card);
  background: var(--bg-surface);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.proto-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.proto-section-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proto-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-tight);
  color: var(--text-default);
}

.proto-section-subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.proto-section-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.proto-section-toggle:hover {
  background: var(--brand-mist);
  color: var(--text-default);
}

.proto-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- Form rows --------------------------------------------------- */
.proto-formrow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}

.proto-formrow-label-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

.proto-formrow-helper {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.proto-formrow-error {
  font-size: var(--fs-caption);
  color: var(--brand-coral);
}

.proto-formrow input.has-error,
.proto-formrow input[aria-invalid=true],
.proto-formrow .input.has-error,
.proto-formrow .input[aria-invalid=true] {
  border-color: var(--brand-coral);
  box-shadow: 0 0 0 1px var(--brand-coral);
}

/*
 * `.proto-formrow--block` is the vertical wrapper variant emitted by
 * `ui-form-block`. It hosts a composite (party picker, simple summary, etc.)
 * that needs an optional coral error caption underneath while sharing the
 * working `.proto-formrow-error` / `.field-helper-error` text styling.
 */
.proto-formrow--block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (max-width: 720px) {
  .proto-formrow {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .proto-formrow-label-cell {
    padding-top: 0;
  }
}
.proto-flag-marker {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  vertical-align: middle;
}

/* ---------- Segmented toggle -------------------------------------------- */
.proto-segmented {
  display: inline-flex;
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--bg-surface);
  gap: 2px;
}

.proto-segmented-option {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-default);
  cursor: pointer;
}

.proto-segmented-option.is-active {
  background: var(--brand-charcoal);
  color: var(--brand-mist);
}

.proto-segmented-option:focus-visible {
  outline: 2px solid var(--brand-coral);
  outline-offset: 2px;
}

/* ---------- Combobox ---------------------------------------------------- */
.proto-combobox {
  position: relative;
  display: block;
}

.proto-combobox-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* z-index sits above the mobile bottom-nav (30) but below drawer (40) so
     the dropdown is never clipped by the bottom nav. Variable lives on
     `.app-shell` in shell.css; 35 fallback matches the documented scale. */
  z-index: var(--z-dropdown, 35);
  background: var(--bg-surface);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  margin: 0;
  list-style: none;
}

.proto-combobox-option {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  cursor: pointer;
}

.proto-combobox-option:hover,
.proto-combobox-option.is-active {
  background: var(--brand-mist);
}

/* ---------- DataTable / FilterBar -------------------------------------- */
.proto-datatable-wrap {
  width: 100%;
  overflow-x: auto;
}

.proto-datatable {
  width: 100%;
}

.proto-datatable th[role=button] {
  cursor: pointer;
  user-select: none;
}

.proto-datatable-sort {
  margin-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

.proto-datatable-row {
  cursor: pointer;
}

.proto-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.proto-filterbar-search {
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 360px;
}

.proto-filterbar-extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ---------- StatusBadge ------------------------------------------------- */
.proto-status-badge {
  text-transform: capitalize;
}

/* ---------- Read-only field value -------------------------------------- */
/*
 * Plain-text rendering for a field's value when the parent form is in
 * `readOnly` mode (Party / Product Details before clicking Edit). Mirrors
 * the height of a `.input.input-pill` so rows in mixed-mode forms align,
 * but draws no border/fill — keeping the read-only view scannable.
 */
.proto-readonly-value {
  min-height: 40px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  color: var(--text-default);
  display: inline-flex;
  align-items: center;
  word-break: break-word;
}

.proto-readonly-value.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}

/* ---------- Product Details — disabled "Tax classification" placeholder -- */
/*
 * The Product Details page renders a disabled `<fieldset>` titled
 * "Tax classification" anchoring the future Brazil NCM/CFOP/CST fields. The
 * fieldset is dimmed to read as a future feature and inert so users cannot
 * interact with the placeholder inputs. Mirrors the inline styling the React
 * reference applies — moved out of the renderer so the markup stays clean.
 *
 * `.proto-product-tax-grid` lays the three placeholder inputs on a 3-column
 * grid (collapses to a single column under 767px — see the mobile rule lower
 * in this file owned by the details/mobile pass).
 *
 * `.proto-product-tax-field` is the per-input cell wrapper: stacked label +
 * input with a 4px gap matching the reference's inline `gap: 4` style.
 */
.proto-product-tax-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0.55;
  pointer-events: none;
}

.proto-product-tax-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.proto-product-tax-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- POS — Invoice Create two-pane layout ------------------------ */
/*
 * Two-pane POS layout: ProductPicker left (~40%), running invoice right (~60%).
 * Stacks vertically below 900px; the right pane scrolls independently on tall
 * screens so the totals panel can stick to the bottom of its column.
 */
.proto-pos-shell {
  display: grid;
  grid-template-columns: minmax(320px, 4fr) minmax(380px, 6fr);
  gap: var(--space-5);
  align-items: start;
}

.proto-pos-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.proto-pos-pane-left {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - var(--space-6));
  overflow-y: auto;
}

/* Sheet-only chrome (handle + grip + scrim) is hidden by default. The mobile
 * media query at the bottom of this file enables them at ≤767px. The body is
 * a transparent passthrough on desktop so children render in normal flow.
 * Tablet (768–1023) keeps the desktop two-column layout. */
.proto-pos-sheet-handle,
.proto-pos-sheet-scrim {
  display: none;
}

.proto-pos-sheet-body {
  display: contents;
}

/* ---------- ProductPicker grid ----------------------------------------- */
.proto-pos-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: calc(-1 * var(--space-2));
}

.proto-pos-picker-chip {
  border: 0;
  cursor: pointer;
  text-transform: capitalize;
  font-size: var(--fs-body-sm);
}

.proto-pos-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.proto-pos-picker-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  min-height: 96px;
}

.proto-pos-picker-card:hover {
  border-color: var(--brand-charcoal);
  box-shadow: var(--shadow-sm);
}

.proto-pos-picker-card:active {
  transform: translateY(1px);
}

.proto-pos-picker-card-name {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-default);
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proto-pos-picker-card-sku {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.proto-pos-picker-card-price {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-default);
}

.proto-pos-picker-card-tag {
  display: inline-flex;
  align-self: flex-start;
}

.proto-pos-picker-empty {
  padding: var(--space-5);
  border: var(--stroke-thin) dashed var(--border-soft);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

/* ---------- LineItemsCart ---------------------------------------------- */
.proto-pos-cart-empty {
  padding: var(--space-6);
  border: var(--stroke-thin) dashed var(--border-soft);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

.proto-pos-cart-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}

.proto-pos-cart-row + .proto-pos-cart-row {
  margin-top: var(--space-2);
}

.proto-pos-cart-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.proto-pos-cart-row-title {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-default);
  line-height: var(--lh-tight);
}

.proto-pos-cart-row-meta {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.proto-pos-cart-row-controls {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
}

@media (max-width: 600px) {
  .proto-pos-cart-row-controls {
    grid-template-columns: 1fr 1fr;
  }
}
.proto-pos-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  overflow: hidden;
}

.proto-pos-qty-button {
  appearance: none;
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: var(--text-default);
  cursor: pointer;
}

.proto-pos-qty-button:hover {
  background: var(--brand-mist);
}

.proto-pos-qty-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.proto-pos-qty-input {
  width: 56px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  padding: 0;
  color: var(--text-default);
}

.proto-pos-qty-input:focus {
  outline: none;
}

.proto-pos-cart-price-input {
  width: 100%;
  max-width: 140px;
}

.proto-pos-cart-row-total {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-default);
  text-align: right;
}

.proto-pos-cart-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
}

.proto-pos-cart-remove:hover {
  background: var(--brand-mist);
  color: var(--brand-coral);
}

/* ---------- Service-specific row extras --------------------------------- */
.proto-pos-cart-service {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--stroke-thin) dashed var(--border-soft);
}

@media (max-width: 600px) {
  .proto-pos-cart-service {
    grid-template-columns: 1fr;
  }
}
/* ---------- PartyHeader ------------------------------------------------- */
.proto-pos-party-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}

.proto-pos-party-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.proto-pos-party-name {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: 500;
  color: var(--text-default);
}

.proto-pos-party-meta {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.proto-pos-party-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  border: var(--stroke-thin) dashed var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  flex-wrap: wrap;
}

.proto-pos-party-empty-text {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

/* ---------- Totals panel (sticky bottom on tall screens) ---------------- */
.proto-pos-totals {
  position: sticky;
  bottom: 0;
  background: var(--bg-surface);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-card);
  padding: var(--space-5);
  z-index: 1;
}

.proto-pos-totals-stack {
  display: flex;
  flex-direction: column;
}

.proto-pos-totals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-5);
}

.proto-pos-totals-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: var(--stroke-thin) solid var(--border-soft);
  font-size: var(--fs-body-sm);
  color: var(--text-default);
}

.proto-pos-totals-stack .proto-pos-totals-row:last-child {
  border-bottom: 0;
}

.proto-pos-totals-row.is-emphasis {
  font-weight: 600;
  font-size: var(--fs-body-md);
  padding-top: var(--space-3);
  margin-top: 2px;
  border-top: var(--stroke-thin) solid var(--border-soft);
}

.proto-pos-totals-row .proto-pos-totals-label {
  color: var(--text-muted);
}

.proto-pos-totals-row.is-emphasis .proto-pos-totals-label {
  color: var(--text-default);
}

.proto-pos-totals-amount {
  font-family: var(--font-mono);
}

.proto-pos-totals-details {
  margin-top: var(--space-3);
  border-top: var(--stroke-thin) solid var(--border-soft);
  padding-top: var(--space-3);
}

.proto-pos-totals-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  padding: 2px 0;
  user-select: none;
}

.proto-pos-totals-summary::-webkit-details-marker {
  display: none;
}

.proto-pos-totals-summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 160ms ease;
}

.proto-pos-totals-details[open] .proto-pos-totals-summary::before {
  transform: rotate(90deg);
}

.proto-pos-totals-summary:hover {
  color: var(--text-default);
}

.proto-pos-totals-details > .proto-pos-totals-grid {
  margin-top: var(--space-3);
}

/* ---------- Inline party search dropdown -------------------------------- */
.proto-pos-search-wrap {
  position: relative;
}

.proto-pos-search-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* Same dropdown layer as `.proto-combobox-menu`: above bottom-nav, below
     drawer/modal. */
  z-index: var(--z-dropdown, 35);
  background: var(--bg-surface);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  margin: 0;
  list-style: none;
}

.proto-pos-search-option {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proto-pos-search-option:hover,
.proto-pos-search-option.is-active {
  background: var(--brand-mist);
}

.proto-pos-search-option-name {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--text-default);
}

.proto-pos-search-option-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ---------- Centered modal --------------------------------------------- */
.proto-modal-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 50);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.proto-modal-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  animation: proto-fade-in 160ms ease-out;
}

.proto-modal-root .modal {
  position: relative;
  z-index: 1;
  width: 100%;
  animation: proto-modal-pop 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes proto-modal-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ---------- Invoice mode chooser cards --------------------------------- */
.proto-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 560px) {
  .proto-mode-grid {
    grid-template-columns: 1fr;
  }
}
.proto-mode-card {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border: var(--stroke-thin) solid var(--border-soft);
  padding: var(--space-5);
  gap: var(--space-3);
}

.proto-mode-card:hover {
  border-color: var(--brand-charcoal);
}

.proto-mode-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Simplified invoice flow ------------------------------------ */
.proto-simple-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 920px;
}

.proto-pos-picker-card.is-selected {
  border-color: var(--brand-charcoal);
  background: var(--brand-mist);
  box-shadow: var(--shadow-sm);
}

.proto-simple-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}

.proto-simple-summary.is-empty {
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

.proto-simple-summary-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.proto-simple-summary-label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.proto-simple-summary-name {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-default);
}

.proto-simple-summary-amount {
  font-family: var(--font-mono);
  font-size: var(--fs-title-md);
  font-weight: 600;
  color: var(--text-default);
}

/* === Mobile (≤767px): DataTable (task 003) === */
/*
 * At ≤767px, keep the page non-scrolling horizontally and let the table scroll
 * inside its wrap. A right-edge fade hints at off-screen columns. The wrap
 * already has `overflow-x: auto` outside the media query (line ~286); we add
 * `position: relative` here so the fade pseudo can anchor, plus iOS momentum
 * scrolling and a subtle scrollbar.
 */
@media (max-width: 767px) {
  /* Anchor the right-edge fade to the non-scrolling outer shell. An
     absolutely-positioned pseudo placed on the scroll container itself
     drifts horizontally with content as the user scrolls. */
  .proto-datatable-shell {
    position: relative;
  }
  .proto-datatable-shell::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bg-surface, #fff));
  }
  .proto-datatable-wrap {
    -webkit-overflow-scrolling: touch;
  }
  /* Keep table from collapsing too narrowly — preserve column widths so the
     horizontal scroll actually has something to scroll. */
  .proto-datatable {
    min-width: max-content;
  }
  /* Subtle scrollbar styling on touch / mobile. */
  .proto-datatable-wrap::-webkit-scrollbar {
    height: 4px;
  }
  .proto-datatable-wrap::-webkit-scrollbar-thumb {
    background: var(--gris-3, rgba(0, 0, 0, 0.18));
    border-radius: 2px;
  }
  .proto-datatable-wrap::-webkit-scrollbar-track {
    background: transparent;
  }
}
/* === Mobile (≤767px): PageHeader + FilterBar (task 002) === */
/*
 * PageHeader and FilterBar reflow at narrow widths so title/subtitle,
 * primary actions, search, and filter chips stay reachable on a 390px
 * viewport without page-level horizontal overflow.
 *
 * `PageHeader.tsx` applies a few layout properties via inline `style={…}`
 * attributes (display, justify-content, flex-wrap, gap on the action row).
 * Overriding inline styles requires `!important` regardless of selector
 * specificity, which is why the rules below use it sparingly. A class hook
 * was deliberately not added to `PageHeader.tsx` to keep the JSX untouched
 * for parallel tasks.
 */
@media (max-width: 767px) {
  /* ---- PageHeader -------------------------------------------------- */
  /* Stack: title block on top, actions row below. */
  .proto-page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
    margin-bottom: var(--space-4) !important;
  }
  /* Title block — let very long subtitles wrap instead of pushing layout. */
  .proto-page-header > div:first-child {
    width: 100%;
    min-width: 0;
  }
  .proto-page-header h1,
  .proto-page-header p {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .proto-page-header h1 {
    font-size: var(--fs-display-md, var(--fs-display-lg));
  }
  /* Actions row — stack full-width when there are 3+ buttons; otherwise the
   * existing `flex-wrap: wrap` keeps 1–2 buttons on one row. We always set
   * `width: 100%` so the action container occupies the full content width,
   * and the buttons inside flex-grow to fill it. */
  .proto-page-header > div:last-child {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-2) !important;
  }
  .proto-page-header > div:last-child > * {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  /* Lift the primary action visually to the top of the stack so it's the
   * first thing reachable above the bottom nav. Works for the
   * Cancel / Save draft / Issue invoice trio on `InvoiceCreatePage`. */
  .proto-page-header > div:last-child > .button-primary,
  .proto-page-header > div:last-child > .btn-primary {
    order: -1;
  }
  /* ---- FilterBar --------------------------------------------------- */
  /* Stack: search row first, then chip/control row that scrolls horizontally. */
  .proto-filterbar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-2);
  }
  .proto-filterbar-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  .proto-filterbar-search > .input,
  .proto-filterbar-search > input {
    width: 100%;
  }
  /* The extra controls/chips become a single horizontal-scroll row. Hide
   * the scrollbar visually but keep it functional with momentum scrolling
   * on iOS. Children must not shrink so they keep their intrinsic width. */
  .proto-filterbar-extra {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-2);
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .proto-filterbar-extra::-webkit-scrollbar {
    display: none;
  }
  .proto-filterbar-extra > * {
    flex: 0 0 auto;
  }
  /* Native date pickers vary wildly in width across browsers. Constrain
   * them so they don't expand beyond a comfortable size, while still
   * allowing the row to scroll if multiple pickers don't fit. */
  .proto-filterbar-extra input[type=date] {
    min-width: 140px;
    max-width: 160px;
  }
  /* `select` elements inside the chip row inherit the same flex-shrink
   * rule but benefit from a sensible max so they don't dominate. */
  .proto-filterbar-extra select {
    max-width: 200px;
  }
}
/* === Mobile (≤767px): Drawers + Modals + Toast (task 005) === */
/*
 * At ≤767px:
 * - Drawers become full-width sheets (overrides the inline `width` set by
 *   Drawer.tsx via style={{ width }}). The slide-in animation from the right
 *   still runs; it just lands on a full-screen panel instead of a 480/560/640
 *   side panel. Body padding is tightened.
 * - Modals shrink to fit a 390px viewport with safe horizontal/vertical
 *   margin, and the body becomes scrollable if the content overflows.
 * - The ChooseInvoiceModeModal grid stacks its two cards vertically (the
 *   existing rule at line ~870 already does this at ≤560px; we extend it
 *   here so it also applies in the 561–767px range and consolidates with
 *   the rest of the mobile pass).
 * - Toasts re-anchor above the bottom nav so notifications aren't hidden by
 *   the fixed nav bar.
 *
 * Z-index references use the variables from `shell.css` (declared on
 * `.app-shell`): --z-drawer (40), --z-modal (50), --z-toast (60). The
 * non-media-query rules at the top of this file were also swapped from
 * hardcoded values to these variables for consistency (see lines 18 / 81 /
 * 837).
 */
@media (max-width: 767px) {
  /* ---- Drawer ------------------------------------------------------ */
  /* The Drawer component sets `style={{ width }}` (default 560px, 640 for
   * AddPartyDrawer, 480 for QuickAddProductDrawer). Override the inline
   * width with !important so the panel always fills the viewport on mobile,
   * regardless of the per-drawer `width` prop. */
  .proto-drawer-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Tighter body padding so forms inside drawers (PartyForm,
   * QuickAddProductDrawer fields) get more usable width. */
  .proto-drawer-body {
    padding: var(--space-4);
  }
  /* Header padding scaled down to match the body. */
  .proto-drawer-header {
    padding: var(--space-4);
  }
  /* ---- Modal ------------------------------------------------------- */
  /* Reduce scrim padding so the modal panel can use more of the viewport
   * when sized via calc() below. */
  .proto-modal-root {
    padding: var(--space-3);
  }
  /* The Modal component sets `style={{ maxWidth: width }}` on `.modal`
   * (default 480, 640 for ChooseInvoiceModeModal). Override so the panel
   * fits a 390px viewport with 16px margin each side, and never exceeds
   * the visible viewport vertically — body becomes scrollable if needed. */
  .proto-modal-root .modal {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 64px);
    padding: var(--space-5);
    overflow: hidden;
  }
  /* Body scrolls if the modal content exceeds the constrained height. */
  .proto-modal-root .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* ---- ChooseInvoiceModeModal cards ------------------------------- */
  /* Stack the two mode cards vertically. The existing rule at ~line 870
   * already covers ≤560px; this extends the same behaviour up to 767px so
   * both cards remain readable on tablet-portrait widths too. */
  .proto-mode-grid {
    grid-template-columns: 1fr;
  }
  /* Slightly tighter card padding on mobile so the two stacked cards fit
   * above the modal's max-height without forcing scroll. */
  .proto-mode-card {
    padding: var(--space-4);
  }
  /* ---- Toast ------------------------------------------------------- */
  /* Float toasts above the bottom nav and respect iOS safe-area inset.
   * Using `left/right` (not just `right`) plus a centered max-width gives
   * a wider, easier-to-read toast on narrow screens.
   *
   * NB: `--bottom-nav-height` is declared on `.app-shell` (in shell.css), but
   * `Toast` portals to `document.body` — outside `.app-shell`. The CSS
   * variable does not resolve here, so we hardcode the mobile bottom-nav
   * height (64px) as the fallback. The variable is kept as the primary
   * value for forward-compat: if shell.css ever moves the declaration to
   * `:root`, this rule picks up the variable automatically. */
  .proto-toast-root {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom) + 16px);
    align-items: stretch;
  }
  .proto-toast {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}
/* === Mobile (≤767px): Forms (task 004) === */
/*
 * At ≤767px:
 *   - `.proto-formrow` stacks: label on top, control full-width below.
 *     Note: the file already has a `@media (max-width: 720px)` rule (line
 *     ~199) that does the same column collapse using grid. We override at
 *     767px so the 720–767px gap also gets the stacked layout, and to add
 *     full-width inputs (which the 720px rule doesn't touch).
 *   - `.proto-section` (FormSection card) drops padding from 24px → 16px.
 *   - `.proto-segmented` becomes a horizontal-scroll row when more than 2
 *     options would crowd a narrow viewport (Type filter / Environment
 *     filter / etc.). Each option keeps its intrinsic width.
 *   - Combobox menu gets a viewport-safe `max-width` ceiling so it can
 *     never paint past the screen edge regardless of trigger position.
 */
@media (max-width: 767px) {
  /* ---- FormRow: stack label over control, inputs full-width -------- */
  .proto-formrow {
    /* The desktop rule uses `display: grid`. Switch to flex column so the
     * label cell and control cell each get full width without grid math.
     * (At ≤720px the prior rule already sets `grid-template-columns: 1fr`;
     * this is the same outcome via a simpler primitive plus full-width
     * controls below.) */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }
  .proto-formrow-label-cell {
    width: 100%;
    padding-top: 0;
    padding-bottom: 4px;
  }
  /* Every form control inside a row spans the full width. Covers the
   * common cases: native input/select/textarea, the SKILL `.input` /
   * `.input-pill` wrappers, the `.input-suffix` chevron-select wrapper
   * used by PartyTaxRegimeBlock, and our prototype-local Combobox. */
  .proto-formrow input,
  .proto-formrow select,
  .proto-formrow textarea,
  .proto-formrow .input,
  .proto-formrow .input-pill,
  .proto-formrow .input-suffix,
  .proto-formrow .proto-combobox {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Helper / error text: keep legible. They aren't absolutely positioned
   * in the current layout, but ensure they wrap rather than push. */
  .proto-formrow-helper,
  .proto-formrow-error {
    line-height: var(--lh-snug, 1.35);
    overflow-wrap: break-word;
  }
  /* ---- FormSection: tighter padding, allow header to wrap ---------- */
  .proto-section {
    padding: var(--space-4, 16px);
    gap: var(--space-4, 16px);
  }
  /* Title + subtitle should never push the collapsible toggle off-screen.
   * Allow the header to wrap; the toggle will fall to its own row in
   * extreme cases (long subtitle on a narrow phone). */
  .proto-section-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .proto-section-titles {
    min-width: 0;
    flex: 1 1 auto;
  }
  .proto-section-title,
  .proto-section-subtitle {
    overflow-wrap: break-word;
  }
  /* ---- Segmented: horizontal-scroll row instead of squashing ------- */
  .proto-segmented {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* Cap so we never bleed past container width when scrolling. */
    max-width: 100%;
    /* Hide scrollbar (parity with `.proto-filterbar-extra` in task 002). */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .proto-segmented::-webkit-scrollbar {
    display: none;
  }
  .proto-segmented-option {
    flex: 0 0 auto;
    /* Hold a comfortable thumb target without over-padding the desktop look. */
    min-height: 36px;
    padding: 8px 14px;
    white-space: nowrap;
  }
  /* ---- Combobox: keep dropdown inside the viewport ---------------- */
  /* The combobox menu uses `left: 0; right: 0` so it matches the trigger
   * width. On phones the trigger is already full-width, so this is mostly
   * a safety belt — cap at viewport width minus app-shell-main padding
   * (16px each side ≈ 32px; use 24px to leave a tiny breathing margin if
   * the trigger sits flush against the edge). */
  .proto-combobox-menu {
    max-width: calc(100vw - 24px);
  }
  /* Slightly bigger touch targets in the suggestion list. */
  .proto-combobox-option {
    padding: 10px 12px;
  }
}
/* === Mobile + Tablet (≤1023px): POS bottom-sheet (task 006 / extended in 009) === */
/*
 * Replaces the old `@media (max-width: 900px)` rule that simply stacked the
 * two POS panes. At ≤1023px the right pane converts into a draggable-style
 * bottom sheet with a peek state (always-visible handle showing item count
 * + running subtotal) and an expanded state (full pane content scrolls).
 *
 * - Desktop (≥1024) keeps the two-column grid; tablet (768–1023) now uses the
 *   bottom-sheet pattern too (extended in task 009 to fix /invoices/new
 *   horizontal overflow at 768×1024 — the two-pane grid couldn't fit inside
 *   the 528px main content area at that width).
 * - Sheet sits above page content but below the bottom nav so the nav stays
 *   visible while the sheet is open. Anchored to `bottom: var(--bottom-nav-height)`.
 * - Peek height (~72px) leaves room for handle + summary; the bottom edge of
 *   the peek sits flush against the top of the bottom nav.
 * - Optional scrim renders only when expanded; tap closes the sheet.
 *
 * Owns: `.proto-pos-shell` (override only), `.proto-pos-pane-left` (override
 * only), `.proto-pos-sheet*`. Does NOT touch `.proto-pos-cart*`, `.proto-pos-totals*`,
 * `.proto-pos-picker*`, `.proto-pos-party*`, `.proto-pos-search*` — those are
 * the components inside the sheet and stay as-is.
 */
@media (max-width: 1023px) {
  /* Override the desktop grid: stack the picker + sheet vertically. The
   * picker scrolls naturally; the sheet floats on top of everything. */
  .proto-pos-shell {
    display: block;
  }
  .proto-pos-pane-left {
    position: static;
    max-height: none;
    overflow-y: visible;
    /* Make sure the picker can scroll to the bottom and not be eaten by the
     * peek-state sheet. 72px peek + bottom-nav-height + breathing room. */
    padding-bottom: 88px;
  }
  /* ---- The sheet ---------------------------------------------------- */
  .proto-pos-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bottom-nav-height, 64px);
    z-index: var(--z-bottom-sheet, 20);
    background: var(--bg-default, #fff);
    border-top: var(--stroke-thin, 1px) solid var(--border-soft, #d5d6d7);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    /* Peek state: only the 72px handle row pokes above the bottom nav.
     * `translateY` of (100% − peek) leaves the handle visible. */
    transform: translateY(calc(100% - 72px));
    transition: transform 200ms ease;
    /* Cap so an expanded sheet never paints over the TopBar (~56px) or above
     * it. 80px buffer leaves a small gap so the page header behind stays
     * partially visible while expanded. */
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    /* Override the desktop pane: no internal gap (the body provides spacing). */
    gap: 0;
  }
  .proto-pos-sheet.is-open {
    transform: translateY(0);
  }
  /* The handle is the always-visible peek row: grab indicator + summary line.
   * It is a `<button>` in markup, so reset the default button chrome. The
   * desktop default rule at the top of the file hides this element. */
  .proto-pos-sheet-handle {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 16px 12px;
    /* Visual */
    background: transparent;
    border: 0;
    border-bottom: var(--stroke-thin, 1px) solid var(--border-soft, #d5d6d7);
    cursor: pointer;
    /* Don't shrink — the peek calc above relies on this row being ~72px tall. */
    flex: 0 0 auto;
    /* Reset native button text styles so the summary inherits page typography. */
    font: inherit;
    color: inherit;
    text-align: left;
  }
  .proto-pos-sheet-handle:hover {
    background: var(--brand-mist, rgba(0, 0, 0, 0.02));
  }
  .proto-pos-sheet-handle:focus-visible {
    outline: 2px solid var(--brand-coral, currentColor);
    outline-offset: -2px;
  }
  /* The visual grab pill — 36×4 centered above the summary row. */
  .proto-pos-sheet-grip {
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--gris-3, #c8c9cb);
    flex: 0 0 auto;
  }
  /* Summary row inside the handle: "N items" left, total right. */
  .proto-pos-sheet-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    width: 100%;
  }
  .proto-pos-sheet-summary-count {
    font-size: var(--fs-body-sm, 13px);
    color: var(--text-muted, #6b6c70);
  }
  .proto-pos-sheet-summary-total {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--fs-body-md, 15px);
    color: var(--text-default, #1a1b1d);
  }
  /* The body holds the actual content (PartyHeader, LineItemsCart, etc.).
   * It scrolls vertically so the user can reach every section regardless of
   * how tall their content is. */
  .proto-pos-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    /* Add safe-area padding at the bottom so the last section can scroll
     * past the iOS home indicator inside the sheet. */
    padding-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom));
  }
  /* The scrim sits between page content and the sheet. Anchored above the
   * bottom nav (so the nav stays tappable) but covering everything else.
   * z-index is one less than the sheet so the sheet paints over it.
   * `display: block` re-enables it (overriding the desktop `display: none`). */
  .proto-pos-sheet-scrim {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--bottom-nav-height, 64px);
    background: rgba(0, 0, 0, 0.32);
    z-index: calc(var(--z-bottom-sheet, 20) - 1);
    cursor: pointer;
  }
  /* Inside the sheet the totals panel does NOT need to be sticky — the body
   * itself scrolls and the sheet has its own max-height. Override the sticky
   * positioning so the totals panel scrolls with the rest of the content. */
  .proto-pos-sheet .proto-pos-totals {
    position: static;
  }
}
/* === Mobile (≤767px): Details pages + final pass (task 007) === */
/*
 * Catch-all pass for the three details pages (Invoice / Party / Product) and
 * any cross-cutting issue not addressed by tasks 001–006. Pure CSS append; no
 * existing rule edits except for the two `z-index: 5 → var(--z-dropdown)`
 * surgical swaps further up in this file (combobox menu + pos-search menu)
 * — see task 007 results for rationale.
 *
 * Owns:
 *   - `.proto-product-tax-grid`           (3-col → 1-col on mobile)
 *   - `.proto-deduction-doc-row`          (3-col → 2-row stack on mobile)
 *   - Generic `.proto-pos-totals` outside the POS sheet (used by the Invoice
 *     Details `TotalsView`) — drop sticky positioning.
 */
@media (max-width: 767px) {
  /*
   * Product Details: the disabled "Tax classification" placeholder section
   * uses an inline `grid-template-columns: repeat(3, minmax(0, 1fr))` which
   * gives ~100px columns on a 390px viewport — too narrow for the NCM
   * placeholder ("0000.00.00"). Collapse to a single column so each placeholder
   * has room. The class hook was added to `ProductDetailsPage.tsx` for this
   * task; the inline `grid` style still wins on desktop because we only
   * override `grid-template-columns` here.
   */
  .proto-product-tax-grid {
    grid-template-columns: 1fr !important;
  }
  /*
   * Invoice Details: deduction-document rows use a 3-column grid
   * (type / supplier / amount) with `minmax(120px, 160px) 1fr minmax(120px, 160px)`
   * — minimum 360px wide, which would overflow a 358px content area at 390px
   * viewport. Stack to two rows: type+amount on top, supplier text full-width
   * below. Seed data has no deduction documents so this is a defensive fix.
   */
  .proto-deduction-doc-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
    grid-template-areas: "type   amount" "supplier supplier" !important;
    row-gap: var(--space-2);
  }
  .proto-deduction-doc-row > :nth-child(1) {
    grid-area: type;
  }
  .proto-deduction-doc-row > :nth-child(2) {
    grid-area: supplier;
  }
  .proto-deduction-doc-row > :nth-child(3) {
    grid-area: amount;
  }
  /*
   * Defensive `.proto-pos-totals` mobile override. Task 006 already scoped a
   * `.proto-pos-sheet .proto-pos-totals { position: static; }` rule for the
   * sheet case. The Invoice Details `TotalsView` reuses the
   * `.proto-pos-totals-*` child classes for visual treatment but does NOT
   * apply the parent `.proto-pos-totals` class, so the desktop sticky rule
   * at line 686 doesn't actually leak onto the details page today. This
   * broader rule remains as a belt-and-braces guard for any future consumer
   * that does add the parent class on a non-POS page.
   */
  .proto-pos-totals {
    position: static;
  }
}
/* === Mobile (≤767px): PageHeader sticky bottom action bar (task 010) === */
@media (max-width: 767px) {
  /*
   * When the page opts in, take the actions row out of the top stack and pin
   * it just above the bottom nav in the thumb zone.
   *
   * Specificity note: task 002 already targets `.proto-page-header > div:last-child`
   * and `.proto-page-header > div:last-child > *` with `!important` rules
   * (`flex-direction: column`, `width: 100%`, `text-align: center`). Those
   * selectors carry specificity 0,1,1,1 (class + element + pseudo-class). To
   * cleanly override them under the modifier we double-up class hooks below
   * (`.proto-page-header--bottom-actions.proto-page-header .proto-page-header-actions`
   * is 0,3,0,0) so this block beats task 002's rules even though they both
   * use `!important`.
   */
  .proto-page-header--bottom-actions.proto-page-header .proto-page-header-actions {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    background: var(--bg-default, #fff) !important;
    border-top: 1px solid var(--border-soft, #d5d6d7) !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06) !important;
    /* Grid (not flex) so children get equal-width tracks that can shrink below
       intrinsic content width. Flex with `flex: 1 1 0; min-width: 0` was visibly
       failing at 430px on /products/new (task 012 user repro): the SKILL .button
       class's intrinsic min-content was clipping the right pill past the viewport
       edge. Grid `minmax(0, 1fr)` forces tracks to actually shrink to fit. */
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: var(--z-bottom-nav, 30) !important; /* same plane as bottom nav, won't overlap */
  }
  /* Each button in the bar fills its grid track. */
  .proto-page-header--bottom-actions.proto-page-header .proto-page-header-actions > * {
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    /* Override task 002's order:-1 on .button-primary so primary stays in source order
       within the bar (left-to-right reading order: Cancel → Save → Issue is the
       standard mobile pattern, but follow whatever the page's source order is). */
    order: 0 !important;
  }
  /* Push page content up by the bar's approximate height (~64px) so the last
     form field isn't hidden behind the action bar. Use :has() since support is
     broad in modern browsers. */
  .app-shell-main:has(.proto-page-header--bottom-actions) {
    padding-bottom: calc(64px + var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom) + 16px) !important;
  }
}
/* === Mobile (≤767px): Action bar overflow fix (task 011) === */
@media (max-width: 767px) {
  /*
   * Task 010 sized the bar so two `.button button-primary` / `.button-ghost`
   * children just barely fit at 390px: each child ends up ~175px wide
   * (bar padding 16px*2 + gap 8px + 175*2 = 390px exactly). The SKILL
   * `.button` base rule sets `padding: 12px 24px` (48px horiz per button),
   * so the inner content area per button is only ~127px. A longer label
   * (e.g. pt-BR "Salvar produto", "Cancelar", or a future 3-button row
   * with "Issue invoice"+"Save"+"Send") visually overflows because the
   * pill borders push right up against the safe-area edges with no
   * breathing room and the label can clip.
   *
   * Fix: tighten the SKILL button's inner horizontal padding from 24→14px
   * scoped to the bar only (~20px reclaimed per button), and add
   * `overflow: hidden + text-overflow: ellipsis` as a defensive belt-and-
   * braces against extreme-length labels (long product names in title
   * actions, future i18n strings). Selector specificity matches task
   * 010's modifier-chained pattern (0,3,0,0 + class) so the override
   * wins without escalating !important coverage further.
   *
   * Bar's outer padding (12px 16px) is intentionally unchanged from
   * task 010 — keeping 16px between button pill ends and viewport edges
   * preserves the visual safe-area buffer.
   */
  .proto-page-header--bottom-actions.proto-page-header .proto-page-header-actions > .button {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* === Read-only key/value grid (task 022 — Invoice Details) ============== */
/*
 * Used inside `FormSection`s on the Invoice Details page (and reusable for
 * Party / Product Details if those move from inline styles to a class).
 * Two-column auto-fit grid that collapses to one column on narrow viewports
 * via `minmax(260px, 1fr)`. Each row is a `<div>` containing a small
 * uppercase muted label `<span>` followed by a body-sm value `<span>`.
 *
 * Ports the reference TSX `KeyValueGrid` inline style block in
 * `InvoiceDetailsPage.tsx` so the renderer can stop emitting per-call
 * inline styles. Tokens (`--fs-caption`, `--text-muted`, `--text-default`,
 * `--fs-body-sm`, `--space-3`, `--space-5`) come from the dataico-design
 * skill's `tokens.css`.
 */
.proto-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3) var(--space-5);
}

.proto-kv-grid-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proto-kv-grid-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.proto-kv-grid-value {
  color: var(--text-default);
  font-size: var(--fs-body-sm);
}

.ds-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.ds-icon-xs {
  width: 12px;
  height: 12px;
}

.ds-icon-sm {
  width: 16px;
  height: 16px;
}

.ds-icon-md {
  width: 20px;
  height: 20px;
}

.ds-icon-lg {
  width: 24px;
  height: 24px;
}

.ds-icon-xl {
  width: 32px;
  height: 32px;
}

.button svg {
  display: inline-block;
  vertical-align: middle;
}

.app-shell {
  --bottom-nav-height: 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--brand-mist, #F1F1F1);
}

.app-shell-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 1023px) {
  .app-shell-body .app-shell-sidebar {
    display: none;
  }
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  min-height: 64px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-body);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.top-bar-brand-logo {
  width: 36px;
  height: 36px;
  padding: 7px;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--coral-1);
  border-radius: var(--r-pill);
  box-sizing: border-box;
}

.top-bar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--lh-tight);
}

.top-bar-name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-md);
  color: var(--text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.005em;
}

.top-bar-cnpj {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.top-bar-menu {
  position: relative;
}
.top-bar-menu > summary {
  list-style: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-default);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.top-bar-menu > summary::-webkit-details-marker {
  display: none;
}
.top-bar-menu > summary:hover {
  background: var(--brand-mist);
}
.top-bar-menu > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.top-bar-menu[open] > summary {
  background: var(--brand-charcoal);
  color: var(--brand-white);
}
.top-bar-menu .top-bar-menu-content {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}
.top-bar-menu .top-bar-menu-item {
  appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  color: var(--text-default);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.top-bar-menu .top-bar-menu-item:hover {
  background: var(--brand-mist);
}
.top-bar-menu .top-bar-menu-item:active {
  background: var(--gris-3);
}
.top-bar-menu .top-bar-menu-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

#main-content {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--space-4, 16px) var(--space-5, 24px);
}
#main-content > * {
  max-width: var(--grid-max, 1280px);
  margin-inline: auto;
}
@media (max-width: 1023px) {
  #main-content {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-4, 16px));
  }
}

.app-shell-sidebar {
  position: sticky;
  top: calc(64px + var(--space-4, 16px));
  align-self: flex-start;
  width: 240px;
  flex: 0 0 240px;
  min-height: 400px;
  height: calc(100vh - 64px - 2 * var(--space-4, 16px));
  display: flex;
  flex-direction: column;
  margin: var(--space-4, 16px) 0 var(--space-4, 16px) var(--space-4, 16px);
  padding: var(--space-5, 24px) var(--space-3, 12px) var(--space-4, 16px);
  background: var(--brand-white, #FFFFFF);
  color: var(--brand-charcoal, #333);
  border-radius: var(--r-card, 20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow-y: auto;
}

.app-shell-sidebar-header {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-2, 8px);
  margin-bottom: var(--space-5, 24px);
}

.app-shell-sidebar-logo {
  height: 22px;
  width: auto;
  color: var(--brand-coral, #ED5650);
}

.app-shell-sidebar-toggle {
  position: absolute;
  top: var(--space-5, 24px);
  right: -14px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft, #D5D6D7);
  background: var(--brand-white, #FFFFFF);
  border-radius: var(--r-pill, 999px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 1;
  color: var(--brand-charcoal, #333);
}

.app-shell-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-shell-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 10px var(--space-3, 12px);
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  color: var(--brand-charcoal, #333);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm, 14px);
  line-height: 1.3;
  border-radius: var(--r-md, 8px);
  cursor: pointer;
  width: 100%;
}
.app-shell-nav-item:hover {
  background: var(--brand-mist, #F1F1F1);
}
.app-shell-nav-item.is-active {
  color: var(--brand-white, #FFFFFF);
  background: var(--brand-coral, #ED5650);
}

.app-shell-nav-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, rgba(51, 51, 51, 0.65));
}

.app-shell-nav-item.is-active .app-shell-nav-icon {
  color: var(--brand-white, #FFFFFF);
}

.app-shell-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-shell-sidebar-sales {
  margin: var(--space-4, 16px) var(--space-1, 4px) 0;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--brand-mist, #F1F1F1);
  border-radius: var(--r-card, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.app-shell-sidebar-sales-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption, 12px);
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(51, 51, 51, 0.65));
}

.app-shell-sidebar-sales-amount {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: var(--fw-bold, 700);
  line-height: 1.05;
  color: var(--brand-charcoal, #333);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-shell-sidebar-sales-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm, 14px);
  color: var(--brand-coral, #ED5650);
}
.app-shell-sidebar-sales-change.is-negative {
  color: var(--text-muted, rgba(51, 51, 51, 0.65));
}

.app-shell-sidebar-sales-change-icon {
  color: inherit;
}

.app-shell-sidebar-sales-count {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm, 14px);
  color: var(--text-muted, rgba(51, 51, 51, 0.65));
}

.app-shell-sidebar-spacer {
  flex: 1 1 auto;
}

.app-shell-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
}

.app-shell-sidebar-utility {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px);
}

.app-shell-utility-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill, 999px);
  color: var(--text-muted, rgba(51, 51, 51, 0.65));
  cursor: pointer;
}
.app-shell-utility-btn:hover {
  background: var(--brand-mist, #F1F1F1);
  color: var(--brand-charcoal, #333);
}

.app-shell-utility-dot {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 8px;
  height: 8px;
  background: var(--brand-coral, #ED5650);
  border: 1.5px solid var(--brand-white, #FFFFFF);
  border-radius: var(--r-pill, 999px);
}

.app-shell-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--space-2, 8px);
  border-radius: var(--r-md, 8px);
  cursor: pointer;
}
.app-shell-sidebar-user:hover {
  background: var(--brand-mist, #F1F1F1);
}

.app-shell-sidebar-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-mist, #F1F1F1);
  font-family: var(--font-body);
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-body-sm, 14px);
  color: var(--brand-charcoal, #333);
}

.app-shell-sidebar-user-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium, 500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--brand-charcoal, #333);
}

.app-shell-sidebar-user-caret {
  color: var(--text-muted, rgba(51, 51, 51, 0.65));
  flex: 0 0 auto;
}

.bottom-nav-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-nav-height, 64px);
  display: flex;
  background: var(--brand-white, #FFFFFF);
  border-top: 1px solid var(--border-soft, #D5D6D7);
  z-index: 5;
}
@media (min-width: 1024px) {
  .bottom-nav-bar {
    display: none;
  }
}

.bottom-nav-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--text-muted, rgba(51, 51, 51, 0.65));
  cursor: pointer;
  padding: var(--space-1, 4px);
}
.bottom-nav-tab.is-active {
  color: var(--brand-coral, #ED5650);
}
.bottom-nav-tab.is-active .bottom-nav-icon {
  color: var(--brand-coral, #ED5650);
}

.bottom-nav-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bottom-nav-label {
  font-size: 11px;
  line-height: 1.2;
  color: inherit;
}

.app-toast-host {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(560px, 100vw - 32px);
  width: max-content;
  pointer-events: none;
  animation: app-toast-rise 180ms ease-out;
}
.app-toast-host[data-state=exiting] {
  animation: app-toast-fall 180ms ease-in forwards;
}
.app-toast-host > .banner {
  pointer-events: auto;
  box-shadow: var(--shadow-lg);
}

@keyframes app-toast-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes app-toast-fall {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}
.login-screen {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-4);
  background: var(--brand-mist);
  color: var(--text-default);
  font-family: var(--font-body);
  background-image: radial-gradient(120% 60% at 0% 0%, rgba(237, 86, 80, 0.06) 0%, transparent 60%), radial-gradient(120% 60% at 100% 100%, rgba(51, 51, 51, 0.04) 0%, transparent 60%);
}

.login-screen-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: auto;
}

.login-screen-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-7) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}
@media (max-width: 480px) {
  .login-screen-card {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
  }
}

.login-screen-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.login-screen-brand-logo {
  height: 28px;
  width: auto;
  display: block;
}

.login-screen-brand-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-coral);
  background: var(--coral-1);
  border-radius: var(--r-chip);
}

.login-screen-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-screen-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  color: var(--text-default);
}

.login-screen-subtitle {
  margin: 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.login-screen-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-screen-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-screen-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.login-screen-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-default);
  letter-spacing: 0.01em;
}

.login-screen-input {
  appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  color: var(--text-default);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.login-screen-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}
.login-screen-input:hover {
  border-color: var(--gris-50);
}
.login-screen-input:focus, .login-screen-input:focus-visible {
  outline: none;
  border-color: var(--brand-coral);
  box-shadow: 0 0 0 3px rgba(237, 86, 80, 0.18);
}
.login-screen-input:disabled {
  background: var(--brand-mist);
  color: var(--text-muted);
  cursor: not-allowed;
}

.login-screen-link-button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--brand-coral);
  cursor: pointer;
  transition: color 120ms ease;
}
.login-screen-link-button:hover {
  color: var(--coral-7);
}
.login-screen-link-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.login-screen-dev-login, .login-screen-google, .login-screen-submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 52px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-medium);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.login-screen-dev-login:focus-visible, .login-screen-google:focus-visible, .login-screen-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(237, 86, 80, 0.3);
}
.login-screen-dev-login:disabled, .login-screen-google:disabled, .login-screen-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.login-screen-submit {
  color: var(--brand-white);
  background: var(--brand-coral);
  border: 1.5px solid var(--brand-coral);
}
.login-screen-submit:hover {
  background: var(--coral-6);
  border-color: var(--coral-6);
}
.login-screen-submit:active {
  background: var(--coral-7);
  border-color: var(--coral-7);
}

.login-screen-google {
  color: var(--text-default);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-soft);
}
.login-screen-google:hover {
  border-color: var(--brand-charcoal);
  background: var(--gris-1);
}
.login-screen-google:active {
  background: var(--brand-mist);
}

.login-screen-google-icon {
  flex: 0 0 auto;
  display: block;
}

.login-screen-google-label {
  font-weight: var(--fw-medium);
}

.login-screen-dev-login {
  height: 44px;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-soft);
}
.login-screen-dev-login:hover {
  color: var(--text-default);
  border-color: var(--brand-charcoal);
  background: var(--gris-1);
}

.login-screen-divider {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
}
.login-screen-divider::before, .login-screen-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-soft);
}

.login-screen-divider-text {
  padding: 0 var(--space-3);
  font-size: var(--fs-caption);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.login-screen-legal {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  text-align: center;
}

.login-screen-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.login-screen-footer-link {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.login-screen-footer-link:hover {
  color: var(--text-default);
}
.login-screen-footer-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.login-screen-footer-sep {
  color: var(--gris-4);
  font-size: var(--fs-caption);
}

.login-screen-tagline {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.02em;
  color: var(--brand-coral);
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  background: var(--bg-surface, #FFFFFF);
  pointer-events: none;
  z-index: 0;
}

.app-shell::before {
  top: 0;
  height: env(safe-area-inset-top);
}

.app-shell::after {
  bottom: 0;
  height: env(safe-area-inset-bottom);
}

.top-bar {
  padding-top: calc(var(--space-3) + env(safe-area-inset-top));
}

.bottom-nav-bar {
  height: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

.sticky-footer,
.pd-sticky-footer,
.proto-page-header--bottom-actions .proto-page-header-actions {
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}

.dev-toolbar {
  padding-top: calc(8px + env(safe-area-inset-top));
}

.dev-button {
  bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom) + 12px);
}

.ni-screen {
  --coral: #ED5650;
  --coral-ink: #C63E39;
  --charcoal: #333333;
  --charcoal-2: #4a4a4a;
  --charcoal-3: #7a7a7a;
  --gray: #D5D6D7;
  --gray-2: #E7E7E8;
  --mist: #F1F1F1;
  --paper: #FFFFFF;
  --bg: var(--mist);
  --bg-raised: var(--paper);
  --bg-sunken: #EAEAEA;
  --ink: var(--charcoal);
  --ink-1: var(--charcoal);
  --ink-2: var(--charcoal-2);
  --ink-3: var(--charcoal-3);
  --border: var(--gray);
  --border-soft: var(--gray-2);
  --font-display: 'Safiro', 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --font-body: 'Satoshi', 'Manrope', -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-card: 20px;
  --r-button: 12px;
  --r-pill: 999px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.ni-screen * {
  box-sizing: border-box;
}
.ni-screen button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ni-screen input {
  font: inherit;
  color: inherit;
}

.ni-screen .ni-topbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
  padding: 56px 14px 10px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.ni-topbar__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
}

.ni-topbar__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ni-topbar__sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 1px;
  text-align: center;
}

.ni-screen .ni-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  background: var(--bg-raised);
  flex-shrink: 0;
}

.ni-search__input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-button);
  padding: 10px 12px;
  min-height: 44px;
}
.ni-search__input input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--ink);
  min-width: 0;
}
.ni-search__input input::placeholder {
  color: var(--ink-3);
}
.ni-search__input svg {
  color: var(--ink-3);
  flex-shrink: 0;
}

.ni-scan {
  width: 44px;
  height: 44px;
  border-radius: var(--r-button);
  background: var(--charcoal);
  color: var(--mist);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ni-screen .ni-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 14px 10px;
  scrollbar-width: none;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.ni-screen .ni-cats::-webkit-scrollbar {
  display: none;
}

.ni-screen .ni-cat {
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 32px;
}
.ni-screen .ni-cat[aria-pressed=true] {
  background: var(--charcoal);
  color: var(--mist);
  border-color: var(--charcoal);
}

.ni-catalog-wrap {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  padding-bottom: 8px;
}

.ni-catalog {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
}

.ni-prod {
  display: grid;
  grid-template-columns: 1fr auto 36px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  min-height: 56px;
  cursor: pointer;
}
.ni-prod:last-child {
  border-bottom: 0;
}
.ni-prod:active {
  background: var(--bg);
}

.ni-prod__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}

.ni-prod__meta {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.ni-prod__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ni-prod__add {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--mist);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(237, 86, 80, 0.3);
  font-weight: 700;
  font-size: 13px;
}

.ni-prod[data-in-cart=true] .ni-prod__add {
  background: var(--charcoal);
  box-shadow: none;
}

.ni-cart-peek {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-raised);
  border-top: 1px solid var(--border-soft);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 10;
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), top 0ms ease;
}

.ni-cart-peek[data-expanded=true] {
  top: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.ni-cart-peek__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 8px;
  cursor: pointer;
}

.ni-cart-peek[data-expanded=true] .ni-cart-peek__head {
  padding: 56px 14px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.ni-cart-peek__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ni-cart-peek__count {
  min-width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--charcoal);
  color: var(--mist);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
}

.ni-cart-peek__label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ni-cart-peek__total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ni-cart-peek__cta {
  margin: 4px 14px 14px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ni-cart-peek[data-expanded=true] .ni-cart-peek__cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to top, var(--bg-raised) 80%, rgba(255, 255, 255, 0));
}

.ni-cart-body {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 120px;
  background: var(--bg);
}

.ni-cart-peek[data-expanded=true] .ni-cart-body {
  display: block;
}

.ni-screen .ni-cta__button {
  width: 100%;
  min-height: 52px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--mist);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(237, 86, 80, 0.35);
}
.ni-screen .ni-cta__button:active {
  transform: translateY(1px);
}
.ni-screen .ni-cta__button[data-disabled=true] {
  background: var(--gray);
  color: var(--charcoal-3);
  box-shadow: none;
  pointer-events: none;
}
.ni-screen .ni-cta__button .pill-chip {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.ni-section {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 12px;
}

.ni-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}

.ni-section__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
}

.ni-section__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.ni-customer {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ni-customer__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}

.ni-customer__body {
  flex: 1;
  min-width: 0;
}

.ni-customer__name {
  font-size: 14px;
  font-weight: 600;
}

.ni-customer__doc {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.ni-customer__action {
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  padding: 6px 8px;
}

.ni-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.ni-line:last-child {
  border-bottom: 0;
}

.ni-line__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.ni-line__meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.ni-line__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-3);
}

.ni-line__total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-align: right;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ni-line__controls {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.ni-line__remove {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
  padding: 6px 8px;
}

.ni-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ni-stepper button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 600;
}
.ni-stepper button:active {
  background: var(--bg-sunken);
}

.ni-stepper__val {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ni-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--mist);
  border: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.4;
}
.ni-alert svg {
  color: var(--coral);
  flex-shrink: 0;
  margin-top: 1px;
}

.ni-totals {
  padding: 12px 14px;
}

.ni-total-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: var(--ink-2);
}
.ni-total-row .amount {
  font-variant-numeric: tabular-nums;
}

.ni-total-row--discount {
  color: var(--coral);
  font-weight: 600;
}

.ni-total-row--grand {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1.5px solid var(--border);
  font-size: 16px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  align-items: baseline;
}
.ni-total-row--grand .amount {
  font-size: 22px;
}

.ni-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.ni-sheet-backdrop[data-open=true] {
  opacity: 1;
  pointer-events: auto;
}

.ni-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-raised);
  border-radius: 24px 24px 0 0;
  z-index: 101;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: 92%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}
.ni-sheet[data-open=true] {
  transform: translateY(0);
}
@supports (backdrop-filter: blur(20px)) {
  .ni-sheet {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
}

.ni-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}

.ni-sheet__head {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

.ni-sheet__eyebrow {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.ni-sheet__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
}

.ni-sheet__body {
  padding: 12px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ni-sheet__footer {
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--border-soft);
  background: var(--bg-raised);
  flex-shrink: 0;
}
.ni-sheet__footer .ni-cta__button {
  box-shadow: none;
}

.ni-pay-method {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-lg);
  min-height: 60px;
  background: var(--bg-raised);
  cursor: pointer;
}
.ni-pay-method[data-selected=true] {
  border-color: var(--charcoal);
  background: var(--bg);
}
.ni-pay-method[data-recommended=true] {
  border-color: var(--coral);
}

.ni-pay-method__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--bg);
  display: grid;
  place-items: center;
  color: var(--ink);
}
.ni-pay-method[data-selected=true] .ni-pay-method__icon {
  background: var(--charcoal);
  color: var(--mist);
}

.ni-pay-method__name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ni-pay-method__sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}

.ni-pay-method__badge {
  background: var(--coral);
  color: var(--mist);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ni-pay-method__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
}
.ni-pay-method[data-selected=true] .ni-pay-method__radio {
  border-color: var(--charcoal);
  background: var(--charcoal);
}
.ni-pay-method[data-selected=true] .ni-pay-method__radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mist);
}

.ni-parcel {
  padding: 12px;
  background: var(--bg);
  border-radius: var(--r-lg);
}

.ni-parcel__label {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 8px;
}

.ni-parcel__opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ni-parcel__opt {
  padding: 8px 4px;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1.5px solid var(--border-soft);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.ni-parcel__opt[data-selected=true] {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--mist);
}
.ni-parcel__opt .amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.01em;
}

.ni-change {
  padding: 12px;
  background: var(--bg);
  border-radius: var(--r-lg);
  display: grid;
  gap: 10px;
}

.ni-change__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.ni-change__input {
  background: var(--bg-raised);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-align: right;
  width: 110px;
  color: var(--ink);
}

.ni-change__given {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ni-change__given button {
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}

.ni-change__change {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--coral);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .ni-screen {
    max-width: 480px;
    margin-inline: auto;
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
  }
}

.pd-quick-sheet-backdrop,
.pd-quick-sheet {
  --coral: #ED5650;
  --charcoal: #333333;
  --gray: #D5D6D7;
  --gray-2: #E7E7E8;
  --mist: #F1F1F1;
  --paper: #FFFFFF;
  --bg: var(--mist);
  --bg-raised: var(--paper);
  --ink: var(--charcoal);
  --ink-2: #4a4a4a;
  --ink-3: #7a7a7a;
  --border: var(--gray);
  --border-soft: var(--gray-2);
  --font-display: 'Safiro', 'Space Grotesk', -apple-system, system-ui, sans-serif;
  --font-body: 'Satoshi', 'Manrope', -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
}

.pd-quick-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.pd-quick-sheet-backdrop[data-open=true] {
  opacity: 1;
  pointer-events: auto;
}

.pd-quick-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-raised);
  border-radius: 24px 24px 0 0;
  z-index: 101;
  transform: translateY(105%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: 92%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  visibility: hidden;
}
.pd-quick-sheet[data-open=true] {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.pd-quick-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}

.pd-quick-sheet__head {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
.pd-quick-sheet__head .eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-3);
}
.pd-quick-sheet__head .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 2px;
}

.pd-quick-sheet__body {
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1;
}

.pd-quick-sheet__footer {
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--border-soft);
  background: var(--bg-raised);
  flex-shrink: 0;
  display: flex;
  gap: 10px;
}
.pd-quick-sheet__footer button.link-full {
  flex: 1;
  min-height: 44px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.pd-quick-sheet__footer button.save-add {
  flex: 1.4;
  min-height: 44px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--mist);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.pd-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.pd-field:last-child {
  margin-bottom: 0;
}

.pd-field__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pd-field__label .req {
  color: var(--coral);
}
.pd-field__label .meta {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

.pd-field__input {
  background: var(--bg);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 11px 12px;
  font-size: 14px;
  color: var(--ink);
  min-height: 44px;
  outline: none;
  width: 100%;
  font-family: var(--font-body);
}
.pd-field__input:focus {
  border-color: var(--charcoal);
}

.pd-field__input--mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.pd-field__input--display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.pd-field__prefix {
  background: var(--bg);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
}
.pd-field__prefix .prefix {
  padding: 0 10px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-raised);
  border-right: 1.5px solid var(--border-soft);
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pd-field__prefix input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  padding: 11px 12px;
  font-size: 14px;
  color: var(--ink);
  font-family: var(--font-body);
  min-width: 0;
}

.pd-field__hint {
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  gap: 4px;
  align-items: flex-start;
  margin-top: 4px;
}
.pd-field__hint svg {
  width: 11px;
  height: 11px;
  color: var(--coral);
  flex-shrink: 0;
  margin-top: 2px;
}

.pd-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.pd-cat-tile {
  padding: 10px 4px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1.5px solid var(--border-soft);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}
.pd-cat-tile[data-selected=true] {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--mist);
}
.pd-cat-tile .emoji {
  font-size: 16px;
  line-height: 1;
}

.pd-suggest {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.pd-suggest svg {
  color: var(--coral);
  flex-shrink: 0;
  margin-top: 1px;
}

.pd-suggest__body {
  flex: 1;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.pd-suggest__body strong {
  color: var(--ink);
  font-weight: 700;
}