/* =====================================================================
   AMERICAN shutters® — Web App Design System (amsh.css)
   Shared by every page in /Public. Import this before any page CSS.

   Brand source: the wordmark. Black geometric caps ("AMERICAN"),
   three light-blue louvre slats forming the E, and a navy gradient
   bar carrying wide-tracked lowercase ("shutters").
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---- Colour tokens (from the logo) ---- */
  --ink:        #17181C;   /* wordmark black */
  --ink-soft:   #4A5058;   /* secondary text */
  --ink-faint:  #8B929B;   /* hints, placeholders */
  --louvre:     #3A9FD8;   /* light-blue slats of the E */
  --louvre-dim: #2F86B8;
  --bar-top:    #2E77B5;   /* top of the "shutters" bar gradient */
  --bar-deep:   #16405F;   /* bottom of the bar gradient */
  --paper:      #F4F5F7;   /* page background */
  --surface:    #FFFFFF;
  --line:       #DCE0E5;
  --line-strong:#C3C9D1;
  --ok:         #1F8A5B;
  --warn:       #B7791F;
  --danger:     #C0392B;

  /* ---- Type ---- */
  --font: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;

  /* ---- Shape / depth ---- */
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-card: 0 18px 50px -18px rgba(23, 24, 28, .28);

  /* ---- Motion ---- */
  --ease-panel: cubic-bezier(.65, 0, .2, 1);
}

/* =====================  BASE  ===================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  /* Shutter artwork behind every page — Assets/shutter-background.svg */
  background: var(--paper) url('../Assets/shutter-background.svg') center / cover no-repeat fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; }
p  { margin: 0; }
a  { color: var(--louvre-dim); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--louvre);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Brand wordmark echo — matches the tracked lowercase on the bar */
.brand-word {
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: lowercase;
}

/* Heading style echoing "AMERICAN" */
.brand-caps {
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* =====================  LOUVRE PANEL  =====================
   The signature element: a navy panel rendered as angled
   louvre slats, like an open security shutter. Use once per page. */

.louvre-panel {
  position: relative;
  color: #fff;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .12) 0px,
      rgba(255, 255, 255, .12) 3px,
      rgba(255, 255, 255, 0)   3px,
      rgba(255, 255, 255, 0)   24px,
      rgba(6, 20, 32, .28)     24px,
      rgba(6, 20, 32, .28)     29px),
    linear-gradient(180deg, var(--bar-top) 0%, #1D5482 55%, var(--bar-deep) 100%);
}

.louvre-panel a { color: #CFE8F8; }

/* Three-slat mark — the real brand favicon (three blues), not a CSS imitation */
.slat-mark {
  display: inline-block;
  width: 30px;
  height: 30px;
}

/* =====================  FORMS  ===================== */

.field { margin-top: 18px; }

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.input,
.select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}

textarea.input { height: auto; padding: 11px 14px; resize: vertical; }

.input::placeholder { color: var(--ink-faint); }

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--louvre);
  box-shadow: 0 0 0 3px rgba(58, 159, 216, .18);
}

.input[aria-invalid="true"] { border-color: var(--danger); }

.select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.field-hint {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* Two-column field row (collapses on small screens) */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* =====================  PIN TILES  ===================== */

.pin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pin-tile {
  width: 44px;
  height: 52px;
  padding: 0;
  text-align: center;
  font: inherit;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  caret-color: var(--louvre);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.pin-tile:focus {
  outline: none;
  border-color: var(--louvre);
  box-shadow: 0 0 0 3px rgba(58, 159, 216, .18);
}

.pin-tile.filled { border-bottom-color: var(--louvre); }

.pin-row.pin-error .pin-tile {
  border-color: var(--danger);
  animation: pin-shake .28s;
}

@keyframes pin-shake {
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.pin-gap {
  width: 12px;
  height: 3px;
  background: var(--line-strong);
}

/* =====================  BUTTONS  ===================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .05em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}

.btn:disabled { opacity: .55; cursor: default; }

.btn-primary {
  color: #fff;
  background: var(--ink);
}
.btn-primary:hover:not(:disabled) { background: #2B2E35; }

.btn-ghost-light {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .75);
}
.btn-ghost-light:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }

.btn-block { width: 100%; }

/* Quiet text button (forgot pin, switch links) */
.btn-text {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--louvre-dim);
  cursor: pointer;
}
.btn-text:hover { text-decoration: underline; }

/* =====================  STATUS / MESSAGES  ===================== */

.notice {
  margin-top: 16px;
  padding: 11px 14px;
  font-size: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
}
.notice.is-error   { border-color: #E5B4AD; background: #FBF1EF; color: #8E2D22; }
.notice.is-success { border-color: #ABD6C2; background: #EFF8F3; color: #1A6B47; }
.notice[hidden]    { display: none; }

/* Small in-button loader */
.loader {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================  MISC  ===================== */

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}
.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--bar-top);
}

.divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 26px 0 8px;
}

.section-title {
  margin-top: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* =====================================================================
   Workspace shared components (branch / dealer / reception / consultant)
   ===================================================================== */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 22px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar img { height: 34px; }
.topbar .who {
  font-size: 14px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end;
}
.topbar .who .btn { min-height: 38px; padding: 0 18px; }

.wrap { max-width: 1100px; margin: 30px auto 70px; padding: 0 20px; }

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; }

.tabs { display: flex; gap: 6px; margin-top: 22px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tab {
  background: none; border: none; cursor: pointer; font: inherit; white-space: nowrap;
  padding: 10px 16px 12px; font-size: 15px; font-weight: 500; color: var(--ink-soft);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--louvre); }
.tab .count {
  display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 6px;
  font-size: 12px; font-weight: 600; text-align: center;
  background: var(--bar-top); color: #fff; border-radius: 999px;
}
.tab .count:empty { display: none; }
.tab-panel { display: none; padding-top: 22px; }
.tab-panel.active { display: block; }

/* Inline field errors (shared across all workspace forms) */
.field-error { display: none; margin: 6px 2px 0; font-size: 13px; color: var(--danger); }
.has-error .field-error { display: block; }
.has-error .input, .has-error .select, .has-error .pin-tile { border-color: var(--danger); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 14px;
}
.card.selected { border-color: var(--louvre); box-shadow: 0 0 0 1px var(--louvre) inset; }

.code-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--bar-top), var(--bar-deep));
  color: #fff; font-weight: 600; font-size: 19px; letter-spacing: .06em;
}
.code-badge.sm { min-width: 32px; height: 32px; font-size: 14.5px; padding: 0 8px; }

.chip {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink-soft); text-transform: uppercase; white-space: nowrap;
}
.chip-assigned { border-color: var(--warn);   color: var(--warn); }
.chip-accepted { border-color: var(--ok);     color: var(--ok); }
.chip-unusable { border-color: var(--danger); color: var(--danger); }
.chip-active   { border-color: var(--ok);     color: var(--ok); }
.chip-disabled { border-color: var(--danger); color: var(--danger); }
.chip-blue     { border-color: var(--bar-top); color: var(--bar-deep); }

.btn-outline { background: none; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.btn-outline:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover:not(:disabled) { background: #197249; }
.btn-danger-outline { background: none; border: 1px solid var(--danger); color: var(--danger); }
.btn-danger-outline:hover:not(:disabled) { background: #FBF1EF; }

.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar .input { width: 250px; height: 40px; }
.toolbar .select { width: auto; height: 40px; }
.toolbar .btn { min-height: 40px; padding: 0 18px; }

/* Spreadsheet-style table (reception lead book) */
.sheet-wrap {
  overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); -webkit-overflow-scrolling: touch; max-height: 70vh;
}
.sheet { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 1150px; }
.sheet th {
  position: sticky; top: 0; z-index: 1; background: var(--paper); text-align: left;
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  padding: 10px 12px; border-bottom: 2px solid var(--line-strong); white-space: nowrap;
}
.sheet td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet tbody tr:hover { background: #F6F9FC; }
.sheet .ref { font-weight: 600; white-space: nowrap; color: var(--bar-deep); }
.sheet .cell-notes { max-width: 260px; }

/* Modal (confirm / reason prompts) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(23, 24, 28, .45);
  display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 50;
}
.modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card);
  max-width: 480px; width: 100%; padding: 26px 26px 22px; max-height: 90vh; overflow: auto;
}
.modal h3 { font-size: 19px; }
.modal .modal-body { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.modal .modal-body b { color: var(--ink); }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.modal .modal-actions .btn { min-height: 42px; padding: 0 20px; }
/* Choice dialogs keep every button on one line */
.modal .modal-actions.one-line { flex-wrap: nowrap; }
.modal .modal-actions.one-line .btn { white-space: nowrap; padding: 0 16px; flex: 0 0 auto; }
@media (max-width: 520px) {
  .modal .modal-actions.one-line { flex-wrap: wrap; }
}

/* Quick-action links with nothing to open are greyed out and inert */
.quick-actions .btn.disabled { opacity: .4; pointer-events: none; cursor: default; }

.empty-note {
  padding: 38px 24px; text-align: center; color: var(--ink-soft);
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius);
}

.kv {
  margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 18px; font-size: 14px; color: var(--ink-soft);
}
.kv b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

.two-pane { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .two-pane { grid-template-columns: 1fr; } }

.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.quick-actions .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }

.warn-banner {
  margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid #E8D3A8; background: #FBF6EA; color: #7A5410; font-size: 13.5px;
}

.map-panel {
  margin-top: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  overflow: hidden; height: 280px;
}
.map-panel[hidden] { display: none; }

@media (max-width: 640px) {
  .topbar { padding: 12px 14px; }
  .wrap { margin-top: 20px; }
  .toolbar .input { width: 100%; }
}

/* =====================  GOOGLE PLACES DROPDOWN  =====================
   Address suggestions (My account, customer addresses). Same look as
   the registration pane on login.html. */
.pac-container {
  font-family: var(--font);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px -12px rgba(23, 24, 28, .25);
  margin-top: 4px;
}
.pac-item {
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  border-top: 1px solid var(--line);
}
.pac-item:hover, .pac-item-selected { background: var(--paper); }
.pac-item-query { font-size: 14.5px; color: var(--ink); }
.pac-icon { display: none; }

/* =====================  UNIVERSAL LOADING OVERLAY  =====================
   Driven by js/loading.js. Blurs the page, blocks every click and key
   (the page is made inert), runs a brand-gradient progress bar along the
   top of the screen and animates the three logo slats as louvres. */

.amsh-loading {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(244, 245, 247, .52);
  -webkit-backdrop-filter: blur(7px) saturate(.85);
  backdrop-filter: blur(7px) saturate(.85);
  opacity: 0; transition: opacity .3s ease;
  cursor: progress;
}
.amsh-loading.is-on { opacity: 1; }

/* While the loader is up, pointer feedback on the page underneath stops */
body.amsh-busy { cursor: progress; }
body.amsh-busy [inert] { user-select: none; }

/* Progress bar: the "shutters" gradient, sweeping across the top edge */
.amsh-loading-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(23, 24, 28, .08);
}
.amsh-loading-bar > span {
  position: relative; display: block; height: 100%; width: 0%; overflow: hidden;
  background: linear-gradient(90deg, var(--bar-deep) 0%, var(--bar-top) 55%, var(--louvre) 100%);
  box-shadow: 0 0 12px rgba(58, 159, 216, .6);
  transition: width .32s cubic-bezier(.2, .7, .3, 1);
}
.amsh-loading-bar > span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: amsh-shimmer 1.3s ease-in-out infinite;
}
.amsh-loading.is-done .amsh-loading-bar > span { transition: width .18s ease-out; }
@keyframes amsh-shimmer { to { transform: translateX(100%); } }

/* Centre card */
.amsh-loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  min-width: 200px; padding: 30px 40px 26px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transform: translateY(8px) scale(.97);
  transition: transform .3s var(--ease-panel);
}
.amsh-loading.is-on .amsh-loading-card { transform: none; }

/* Three slats from the logo mark, tilting open one after the other */
.amsh-slats { display: flex; flex-direction: column; gap: 7px; perspective: 220px; }
.amsh-slats i {
  display: block; width: 66px; height: 13px; border-radius: 2px;
  transform-origin: 50% 50%;
  animation: amsh-louvre 1.5s var(--ease-panel) infinite;
}
.amsh-slats i:nth-child(1) { background: #2BABE2; animation-delay: 0s; }
.amsh-slats i:nth-child(2) { background: #2278AD; animation-delay: .17s; }
.amsh-slats i:nth-child(3) { background: #184478; animation-delay: .34s; }
@keyframes amsh-louvre {
  0%, 100% { transform: rotateX(0deg); }
  50%      { transform: rotateX(74deg); opacity: .78; }
}

/* Label echoes the wide-tracked lowercase "shutters" wordmark */
.amsh-loading-label {
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: .28em; text-transform: lowercase; padding-left: .28em; white-space: nowrap;
}
.amsh-loading-label .dots i { font-style: normal; letter-spacing: 0; animation: amsh-dot 1.2s infinite; }
.amsh-loading-label .dots i:nth-child(2) { animation-delay: .2s; }
.amsh-loading-label .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes amsh-dot { 0%, 60%, 100% { opacity: .15; } 30% { opacity: 1; } }

@media (max-width: 480px) {
  .amsh-loading-card { padding: 24px 28px 22px; min-width: 0; }
}

/* =====================================================================
   Sign-in & security (passkeys, sign in with your phone, install app)
   Shared by login.html, approve.html and the workspace "security" card.
   ===================================================================== */

/* In-button loader on light backgrounds */
.loader-dark { border-color: rgba(23, 24, 28, .18); border-top-color: var(--bar-top); margin: 0 auto; width: 26px; height: 26px; }

/* ---- Phone approval screen (js/phoneapprove.js) ---- */
.pa-modal { max-width: 440px; padding: 22px 24px 20px; }
.pa-state, .pa-entry, .pa-review { text-align: center; }
.pa-state { padding: 10px 0 4px; }
.pa-icon {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; color: var(--bar-deep);
  background: #EAF3FA; display: flex; align-items: center; justify-content: center;
}
.pa-title { font-size: 21px; letter-spacing: .02em; }
.pa-muted { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.pa-muted b { color: var(--ink); font-weight: 600; }
.pa-small { font-size: 13px; }
.pa-code {
  margin: 18px auto 6px; display: inline-block; padding: 10px 22px; border-radius: var(--radius-sm);
  font-size: 34px; font-weight: 600; letter-spacing: .28em; text-indent: .28em; color: #fff;
  background: linear-gradient(180deg, var(--bar-top), var(--bar-deep));
}
.pa-code-input { text-align: center; font-size: 24px; letter-spacing: .22em; text-indent: .22em; font-weight: 500; height: 56px; text-transform: uppercase; }
.pa-warn {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 16px; padding: 12px 14px;
  border-radius: var(--radius-sm); background: #FFF7E8; border: 1px solid #F1D9A6; color: #6E4B0E; font-size: 13.5px; line-height: 1.5;
}
.pa-warn svg { flex: 0 0 auto; margin-top: 1px; }
.pa-warn b { font-weight: 600; }
.pa-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.pa-actions .btn { min-height: 46px; padding: 0 22px; flex: 1 1 auto; }
.pa-expiry { margin-top: 14px; }
.pa-result {
  width: 66px; height: 66px; margin: 4px auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.pa-result.is-ok  { background: #EFF8F3; color: var(--ok); }
.pa-result.is-bad { background: #FBF1EF; color: var(--danger); }
.pa-entry .field-error { display: block; text-align: left; }
.pa-entry .field-error[hidden] { display: none; }

/* ---- Workspace security card (js/security.js) ---- */
.sec-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; margin-top: 8px; }
.sec-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; }
.sec-card h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.sec-card h3 svg { color: var(--bar-deep); flex: 0 0 auto; }
.sec-card .sec-intro { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.sec-card .sec-intro b { color: var(--ink); font-weight: 600; }
.sec-list { margin-top: 14px; border-top: 1px solid var(--line); }
.sec-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sec-item .si-icon { width: 38px; height: 38px; border-radius: 50%; background: #EAF3FA; color: var(--bar-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sec-item .si-main { flex: 1 1 auto; min-width: 0; }
.sec-item .si-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-item .si-name .chip { font-size: 10.5px; padding: 2px 8px; }
.sec-item .si-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.sec-item .si-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.sec-item .si-actions .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.sec-empty { padding: 14px 0 4px; font-size: 14px; color: var(--ink-soft); }
.sec-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.sec-actions .btn { min-height: 44px; padding: 0 20px; }
.sec-code-row { display: flex; gap: 10px; margin-top: 14px; align-items: flex-start; }
.sec-code-row .field { margin-top: 0; flex: 1; }
.sec-code-row .btn { min-height: 56px; padding: 0 20px; }
.sec-note { margin-top: 12px; font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.sec-steps { margin: 10px 0 0 18px; padding: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 520px) {
  .sec-code-row { flex-direction: column; }
  .sec-code-row .btn { width: 100%; min-height: 46px; }
  .sec-item { flex-wrap: wrap; }
  .sec-item .si-actions { width: 100%; justify-content: flex-end; }
}