:root {
      --bg: #f5f6f8;
      --panel: #ffffff;
      --panel-soft: #fafafa;
      --text: #1f2937;
      --muted: #667085;
      --line: #e5e7eb;
      --line-strong: #d0d5dd;
      --accent: #7c3aed;
      --accent-dark: #5b21b6;
      --accent-soft: #f3e8ff;
      --good: #087443;
      --good-soft: #e9f8f0;
      --warn: #a15c00;
      --warn-soft: #fff6e5;
      --danger: #b42318;
      --danger-soft: #fff0ee;
      --shadow: 0 8px 28px rgba(16, 24, 40, 0.07);
      --radius: 16px;
      --radius-sm: 10px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      line-height: 1.45;
    }

    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }

    .app-shell { min-height: 100vh; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .topbar-inner {
      max-width: 1480px;
      margin: 0 auto;
      padding: 14px 22px 0;
    }
    .brand-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 12px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #7c3aed, #c026d3);
      color: white;
      font-weight: 800;
      letter-spacing: -1px;
      box-shadow: 0 7px 18px rgba(124, 58, 237, .22);
    }
    .brand-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
    .brand-subtitle { color: var(--muted); font-size: 12px; margin-top: 2px; }

    .country-switch {
      display: inline-flex;
      padding: 4px;
      border: 1px solid var(--line);
      background: var(--panel-soft);
      border-radius: 12px;
      gap: 4px;
      flex-shrink: 0;
    }
    .country-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      border-radius: 9px;
      padding: 8px 12px;
      font-weight: 700;
      transition: .15s ease;
    }
    .country-btn.active {
      background: white;
      color: var(--text);
      box-shadow: 0 2px 8px rgba(16,24,40,.08);
    }

    .tabs {
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 11px 14px 13px;
      font-weight: 700;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
    }
    .tab-btn.active { color: var(--accent-dark); border-bottom-color: var(--accent); }

    main {
      max-width: 1480px;
      margin: 0 auto;
      padding: 22px;
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .notice {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      border: 1px solid #ead7ff;
      background: #fbf7ff;
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 16px;
      color: #4c1d95;
    }
    .notice strong { display: block; margin-bottom: 2px; }
    .notice-icon {
      width: 24px;
      height: 24px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--accent-soft);
      flex: 0 0 auto;
      font-weight: 800;
    }

    .toolbar {
      display: grid;
      grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(145px, .55fr)) auto;
      gap: 12px;
      align-items: end;
      margin-bottom: 16px;
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 18px 18px 12px;
      border-bottom: 1px solid var(--line);
    }
    .card-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
    .card-subtitle { color: var(--muted); font-size: 12px; margin-top: 3px; }
    .card-body { padding: 18px; }

    .workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(330px, .8fr);
      gap: 16px;
      align-items: start;
    }
    .left-stack, .right-stack { display: grid; gap: 16px; }
    .right-stack { position: sticky; top: 132px; }

    .field { display: grid; gap: 6px; }
    .field label { color: var(--muted); font-size: 12px; font-weight: 700; }
    .field small { color: var(--muted); }
    .input, .select, .textarea {
      width: 100%;
      border: 1px solid var(--line-strong);
      background: white;
      color: var(--text);
      border-radius: 10px;
      min-height: 40px;
      padding: 9px 11px;
      outline: none;
      transition: .15s ease;
    }
    .textarea { min-height: 90px; resize: vertical; }
    .input:focus, .select:focus, .textarea:focus {
      border-color: #a78bfa;
      box-shadow: 0 0 0 3px rgba(124,58,237,.11);
    }
    .input.compact, .select.compact { min-height: 34px; padding: 6px 8px; border-radius: 8px; }
    .input.number { text-align: right; font-variant-numeric: tabular-nums; }

    .btn {
      border: 1px solid var(--line-strong);
      background: white;
      color: var(--text);
      border-radius: 10px;
      padding: 9px 12px;
      min-height: 40px;
      font-weight: 750;
      transition: .15s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      text-decoration: none;
    }
    .btn:hover { border-color: #b8b9c2; background: #fafafa; }
    .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
    .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
    .btn-soft { background: var(--accent-soft); color: var(--accent-dark); border-color: #e7d2ff; }
    .btn-danger { color: var(--danger); border-color: #ffd1cc; background: #fff8f7; }
    .btn-small { min-height: 32px; padding: 6px 9px; border-radius: 8px; font-size: 12px; }
    .icon-btn {
      border: 0;
      background: transparent;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--muted);
    }
    .icon-btn:hover { background: var(--danger-soft); color: var(--danger); }

    .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .section-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th, td { border-bottom: 1px solid var(--line); padding: 10px 8px; vertical-align: middle; }
    th {
      text-align: left;
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .04em;
      font-weight: 800;
      background: #fcfcfd;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
    tr:last-child td { border-bottom: 0; }
    .ingredient-name { font-weight: 750; min-width: 180px; }
    .row-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
    .price-cell { min-width: 110px; }
    .qty-cell { min-width: 120px; }
    .loss-cell { min-width: 82px; }
    .cost-cell { min-width: 110px; font-weight: 800; }
    .select-ingredient { min-width: 230px; }

    .add-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 120px 100px auto;
      gap: 8px;
      align-items: end;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed var(--line-strong);
    }

    .cost-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(130px, 1fr));
      gap: 12px;
    }
    .cost-grid.three { grid-template-columns: repeat(3, minmax(140px, 1fr)); }

    .metric-list { display: grid; gap: 0; }
    .metric-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }
    .metric-row:last-child { border-bottom: 0; }
    .metric-label { color: var(--muted); }
    .metric-value { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
    .metric-row.total { padding: 13px 0; }
    .metric-row.total .metric-label { color: var(--text); font-weight: 800; }
    .metric-row.total .metric-value { font-size: 18px; }

    .price-hero {
      background: linear-gradient(135deg, #f4eaff, #fff7fb);
      border: 1px solid #e8d4ff;
      border-radius: 15px;
      padding: 16px;
      margin-top: 12px;
    }
    .price-hero-label { color: #6b21a8; font-weight: 750; font-size: 12px; }
    .price-hero-value { font-size: 31px; font-weight: 900; letter-spacing: -.04em; margin-top: 4px; color: #4c1d95; }
    .price-hero-sub { color: #7e22ce; font-size: 12px; margin-top: 4px; }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      background: #f2f4f7;
      color: #475467;
      white-space: nowrap;
    }
    .badge.good { background: var(--good-soft); color: var(--good); }
    .badge.warn { background: var(--warn-soft); color: var(--warn); }
    .badge.accent { background: var(--accent-soft); color: var(--accent-dark); }

    .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
    .comparison-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel-soft); }
    .comparison-country { color: var(--muted); font-size: 12px; font-weight: 800; }
    .comparison-value { font-size: 19px; font-weight: 900; margin-top: 3px; }
    .comparison-sub { color: var(--muted); font-size: 11px; margin-top: 3px; }

    .warning-box {
      display: none;
      border: 1px solid #ffd89b;
      background: var(--warn-soft);
      color: #7a4500;
      padding: 10px 12px;
      border-radius: 10px;
      margin-top: 10px;
    }
    .warning-box.show { display: block; }

    .page-heading { margin-bottom: 16px; }
    .page-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
    .page-heading p { margin: 6px 0 0; color: var(--muted); max-width: 820px; }

    .filters {
      display: grid;
      grid-template-columns: minmax(220px, 1.2fr) minmax(180px, .6fr) auto;
      gap: 10px;
      margin-bottom: 14px;
      align-items: end;
    }

    .catalog-table td { min-width: 100px; }
    .catalog-table td:first-child { min-width: 220px; }
    .catalog-table .source-cell { min-width: 220px; color: var(--muted); font-size: 12px; }

    .recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 14px; }
    .recipe-card { padding: 16px; }
    .recipe-card.active { border-color: #c4b5fd; box-shadow: 0 0 0 3px rgba(124,58,237,.08), var(--shadow); }
    .recipe-card h3 { margin: 0 0 4px; font-size: 16px; }
    .recipe-meta { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
    .recipe-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
    .recipe-stat { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px; padding: 9px; }
    .recipe-stat span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
    .recipe-stat strong { display: block; margin-top: 2px; }

    .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .settings-form .span-2 { grid-column: span 2; }

    .switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      background: var(--panel-soft);
    }
    .switch {
      position: relative;
      width: 44px;
      height: 24px;
      flex: 0 0 auto;
    }
    .switch input { display: none; }
    .switch span {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #d0d5dd;
      transition: .2s ease;
    }
    .switch span::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      left: 3px;
      top: 3px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 1px 4px rgba(0,0,0,.18);
      transition: .2s ease;
    }
    .switch input:checked + span { background: var(--accent); }
    .switch input:checked + span::after { transform: translateX(20px); }

    .data-actions { display: flex; flex-wrap: wrap; gap: 9px; }
    .footnote { color: var(--muted); font-size: 12px; margin-top: 12px; }
    .empty { text-align: center; padding: 28px; color: var(--muted); }

    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 100;
      background: #101828;
      color: white;
      padding: 11px 14px;
      border-radius: 10px;
      box-shadow: 0 10px 28px rgba(16,24,40,.25);
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: .2s ease;
      max-width: 360px;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    .print-only { display: none; }

    @media (max-width: 1150px) {
      .workspace { grid-template-columns: 1fr; }
      .right-stack { position: static; grid-template-columns: 1fr 1fr; }
      .toolbar { grid-template-columns: 1fr 1fr 1fr; }
      .toolbar .recipe-field { grid-column: span 2; }
      .recipe-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
    }
    @media (max-width: 760px) {
      .topbar-inner, main { padding-left: 12px; padding-right: 12px; }
      .brand-subtitle { display: none; }
      .country-btn { padding: 8px 9px; }
      .toolbar { grid-template-columns: 1fr 1fr; }
      .toolbar .recipe-field { grid-column: span 2; }
      .toolbar .toolbar-actions { grid-column: span 2; }
      .cost-grid, .cost-grid.three, .settings-form { grid-template-columns: 1fr 1fr; }
      .workspace, .right-stack, .settings-grid { grid-template-columns: 1fr; }
      .recipe-grid { grid-template-columns: 1fr; }
      .filters { grid-template-columns: 1fr; }
      .add-row { grid-template-columns: 1fr 1fr; }
      .add-row .add-ingredient-select { grid-column: span 2; }
      .comparison-grid { grid-template-columns: 1fr; }
      .card-header { align-items: flex-start; flex-direction: column; }
      .section-actions { justify-content: flex-start; }
    }
    @media (max-width: 500px) {
      .brand-title { font-size: 16px; }
      .brand-mark { width: 36px; height: 36px; }
      .country-btn .country-long { display: none; }
      .cost-grid, .cost-grid.three, .settings-form { grid-template-columns: 1fr; }
      .settings-form .span-2 { grid-column: auto; }
      .toolbar { grid-template-columns: 1fr; }
      .toolbar .recipe-field, .toolbar .toolbar-actions { grid-column: auto; }
      .add-row { grid-template-columns: 1fr; }
      .add-row .add-ingredient-select { grid-column: auto; }
      .price-hero-value { font-size: 26px; }
    }

    @media print {
      body { background: white; font-size: 11px; }
      .topbar, .notice, .toolbar-actions, .btn, .icon-btn, .add-row, .settings-only, .no-print { display: none !important; }
      main { max-width: none; padding: 0; }
      .tab-panel { display: none !important; }
      #tab-calculator { display: block !important; }
      .workspace { grid-template-columns: 1.4fr .7fr; gap: 10px; }
      .right-stack { position: static; }
      .card { box-shadow: none; break-inside: avoid; }
      .print-only { display: block; }
      .card-header, .card-body { padding: 10px; }
      th, td { padding: 6px 5px; }
      .price-hero { background: white; }
    }
  
/* Multi-user shell */
[hidden] { display: none !important; }
.auth-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 15% 15%, rgba(124,58,237,.12), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(192,38,211,.10), transparent 34%),
    var(--bg);
}
.auth-layout {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
  gap: 28px;
  align-items: stretch;
}
.auth-hero, .auth-card {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.auth-hero { padding: 38px; display: flex; flex-direction: column; justify-content: space-between; min-height: 530px; }
.auth-hero h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.02; margin: 30px 0 18px; letter-spacing: -.045em; }
.auth-hero p { color: var(--muted); font-size: 16px; max-width: 620px; }
.auth-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.auth-feature { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel-soft); }
.auth-feature strong { display: block; margin-bottom: 4px; }
.auth-feature span { color: var(--muted); font-size: 12px; }
.auth-card { padding: 28px; align-self: center; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--panel-soft); padding: 5px; border-radius: 12px; margin-bottom: 22px; }
.auth-tab { border: 0; padding: 10px; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 800; }
.auth-tab.active { background: white; color: var(--text); box-shadow: 0 2px 8px rgba(16,24,40,.08); }
.auth-form { display: grid; gap: 14px; }
.auth-form-title { font-size: 21px; font-weight: 850; letter-spacing: -.025em; }
.auth-error { display: none; border: 1px solid #f5b8b0; background: var(--danger-soft); color: var(--danger); border-radius: 10px; padding: 10px 12px; }
.auth-error.show { display: block; }
.invite-banner { border: 1px solid #c9b8f8; background: #f8f5ff; color: #4c1d95; border-radius: 12px; padding: 12px; margin-bottom: 16px; }

.brand-row { align-items: flex-start; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.workspace-control { display: flex; gap: 6px; align-items: center; }
.workspace-select { min-width: 230px; max-width: 330px; }
.user-pill { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 7px 10px; }
.user-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; }
.user-meta { line-height: 1.15; min-width: 0; }
.user-meta strong { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { color: var(--muted); font-size: 11px; }
.sync-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line); font-size: 12px; font-weight: 750; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }
.sync-pill.saving .sync-dot { background: #f59e0b; animation: pulse 1s infinite; }
.sync-pill.saved .sync-dot { background: #12b76a; }
.sync-pill.conflict { color: var(--danger); background: var(--danger-soft); border-color: #f5b8b0; }
.sync-pill.conflict .sync-dot { background: var(--danger); }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.conflict-bar { display: none; max-width: 1480px; margin: 14px auto 0; padding: 11px 14px; border: 1px solid #f5b8b0; border-radius: 12px; background: var(--danger-soft); color: var(--danger); align-items: center; justify-content: space-between; gap: 12px; }
.conflict-bar.show { display: flex; }
.conflict-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.role-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 800; background: var(--panel-soft); border: 1px solid var(--line); }
.role-owner { color: #5b21b6; background: #f3e8ff; }
.role-admin { color: #175cd3; background: #eff8ff; }
.role-editor { color: #087443; background: #ecfdf3; }
.role-viewer { color: var(--muted); }

.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.page-heading h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.page-heading p { margin: 5px 0 0; color: var(--muted); }
.two-column { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 16px; align-items: start; }
.member-list, .activity-list, .saved-list { display: grid; gap: 10px; }
.member-row, .activity-row, .saved-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: white; }
.member-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; }
.member-name { font-weight: 800; }
.member-email, .activity-meta, .saved-meta { color: var(--muted); font-size: 12px; }
.invite-link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; }
.invite-link-box input { min-width: 0; }
.activity-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; }
.activity-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-soft); font-weight: 900; }
.saved-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; }
.saved-value { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.empty-state { text-align: center; padding: 42px 20px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 14px; }

.readonly-note { border: 1px solid #f5d08a; background: var(--warn-soft); color: var(--warn); padding: 10px 12px; border-radius: 11px; margin-bottom: 14px; }
.disabled-section { opacity: .72; }
.btn-danger { color: var(--danger); border-color: #f3b7b0; background: #fff; }
.btn-danger:hover { background: var(--danger-soft); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(16,24,40,.45); padding: 20px; }
.modal-backdrop.show { display: grid; }
.modal { width: min(520px, 100%); background: white; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(16,24,40,.25); }
.modal-header { padding: 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-body { padding: 18px; }
.modal-footer { padding: 14px 18px 18px; display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 980px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-hero { min-height: auto; }
  .header-actions { justify-content: flex-start; width: 100%; }
  .brand-row { flex-direction: column; }
  .workspace-select { min-width: 190px; max-width: 100%; }
  .two-column { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .auth-view { padding: 14px; }
  .auth-hero, .auth-card { padding: 22px; border-radius: 18px; }
  .auth-feature-grid { grid-template-columns: 1fr; }
  .user-meta { display: none; }
  .member-row { grid-template-columns: 1fr; }
  .invite-link-box { grid-template-columns: 1fr; }
  .sync-pill span:last-child { display: none; }
}

@media print {
  .header-actions, .conflict-bar, #tab-history, #tab-team, .page-heading { display: none !important; }
}

/* Completed multi-user interface */
.btn:disabled,
.input:disabled,
.select:disabled,
.textarea:disabled {
  cursor: not-allowed;
  opacity: .58;
}
.btn:disabled:hover { background: inherit; border-color: var(--line-strong); }
.loading-card { width: min(420px, 100%); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.loading-line { height: 5px; overflow: hidden; border-radius: 999px; background: var(--panel-soft); margin-top: 20px; }
.loading-line span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--accent); animation: loading-slide 1.2s ease-in-out infinite; }
@keyframes loading-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(350%); } }
.invite-banner.invalid { border-color: #f5b8b0; background: var(--danger-soft); color: var(--danger); }
.saved-note { margin-top: 8px; color: var(--text); }
.saved-metrics { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.saved-metrics strong { color: var(--text); font-variant-numeric: tabular-nums; }
.invite-form { grid-template-columns: minmax(220px,1fr) minmax(170px,.45fr) auto; align-items: end; }
.member-row .select { min-width: 170px; }
.auth-submit { width: 100%; }
.auth-card p { color: var(--muted); }

@media (max-width: 760px) {
  .invite-form { grid-template-columns: 1fr; }
  .saved-row { grid-template-columns: 1fr; }
  .workspace-control { width: 100%; }
  .workspace-select { flex: 1; min-width: 0; }
}