:root {
    --green: #1B2A4A;
    --green-dark: #121D33;
    --red: #A62B2B;
    --off-white: #F7F5EF;
    --ink: #1A1A1A;
    --line: #d8d4c8;
    --amber: #C99A2E;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body {
    margin: 0; padding: 0; background: var(--ink); color: var(--off-white);
    font-family: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    height: 100%; overscroll-behavior: none; user-select: none;
  }
  h1, h2, h3, .num {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700; letter-spacing: 0.02em;
  }
  #app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--green-dark); }

  header.top {
    background: var(--green); padding: 10px 14px; border-bottom: 3px solid var(--green-dark);
    position: sticky; top: 0; z-index: 20;
  }
  .crest-row { display:flex; align-items:center; justify-content:space-between; }
  .crest { display:flex; align-items:center; gap:8px; }
  .crest .badge {
    width:40px; height:40px; border-radius:50%; background: var(--off-white); color: var(--green-dark);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
    overflow: hidden; flex-shrink: 0;
  }
  .crest .badge img { width: 100%; height: 100%; object-fit: cover; }
  .crest .title { font-size: 14px; opacity: 0.85; }
  .live-dot { width:8px; height:8px; border-radius:50%; background: var(--red); display:inline-block; margin-right:6px; animation: pulse 1.4s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  .scoreboard { padding: 6px 14px 14px; }
  .score-main { display:flex; align-items:baseline; gap:10px; }
  .score-main .runs { font-size: 46px; line-height: 1; }
  .score-main .overs { font-size: 20px; opacity: 0.85; }
  .score-sub { display:flex; gap:16px; font-size:13px; opacity:0.85; margin-top:4px; flex-wrap:wrap; }
  .target-line { font-size: 13px; margin-top: 6px; color: var(--amber); }

  .this-over { display:flex; gap:6px; padding: 8px 14px; background: var(--green); flex-wrap: wrap; }
  .ball-chip {
    min-width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.12);
    display:flex; align-items:center; justify-content:center; font-size: 13px; font-weight: 700;
  }
  .ball-chip.wicket { background: var(--red); }
  .ball-chip.boundary { background: var(--amber); color: var(--ink); }
  .ball-chip.extra { background: rgba(244,247,243,0.35); }

  section.now-playing {
    background: var(--off-white); color: var(--ink); margin: 10px 10px 0; border-radius: 10px; overflow: hidden;
  }
  .full-extra { display: none; }
  .full-extra.expanded { display: block; }
  section.mini-bowling {
    background: var(--off-white); color: var(--ink); margin: 10px 10px 0; border-radius: 10px; overflow: hidden;
  }
  section.mini-bowling h3 {
    margin: 0; padding: 8px 12px; background: var(--green-dark); color: var(--off-white); font-size: 15px;
  }
  section.mini-bowling table.card-table { font-size: 12px; }
  .table-scroll { overflow-x: auto; }
  .table-scroll table.card-table th:first-child, .table-scroll table.card-table td:first-child { position: sticky; left: 0; background: inherit; white-space: nowrap; }
  .table-scroll table.card-table thead th:first-child { background: #eef0f5; }
  .table-scroll table.card-table tbody tr td:first-child { background: white; }
  tr.current-bowler td:first-child { font-weight: 700; }
  tr.current-bowler .live-dot { width:6px; height:6px; }
  .batter-row {
    display:flex; align-items:center; justify-content:space-between; padding: 10px 12px;
    border-bottom: 1px solid var(--line); font-size: 15px;
  }
  .batter-row:last-child { border-bottom: none; }
  .batter-row .name { font-weight: 600; display:flex; align-items:center; gap:6px; }
  .batter-row .name .strike-dot { color: var(--red); font-size: 18px; }
  .batter-row .figures { font-variant-numeric: tabular-nums; opacity: 0.8; font-size: 13px; }
  .batter-row.on-limit { background: #FCEFD9; }
  .limit-flag { color: var(--amber); font-weight: 700; font-size: 11px; margin-left: 6px; }

  .bowler-row {
    display:flex; align-items:center; justify-content:space-between; padding: 8px 12px;
    background: #e7e9ee; font-size: 14px;
  }

  main.controls { flex: 1; padding: 14px 10px 100px; }
  .controls-brand-logo { display: none; }
  .grid-runs { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
  .grid-extras { display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
  .grid-actions { display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }

  button.tap {
    border: none; border-radius: 12px; padding: 18px 8px; font-size: 22px; font-weight: 800;
    background: var(--green); color: var(--off-white); font-family: inherit;
    box-shadow: 0 2px 0 rgba(0,0,0,0.25); cursor: pointer;
  }
  button.tap:active { transform: translateY(2px); box-shadow: none; }
  button.tap.boundary { background: var(--amber); color: var(--ink); }
  button.tap.six { background: var(--red); }
  button.tap.extra { background: #35507a; font-size: 15px; }
  button.tap.wicket { background: var(--red); font-size: 17px; grid-column: span 1; }
  button.tap.retire { background: #6b4f9e; font-size: 15px; }
  button.tap.more { background: #33465e; font-size: 15px; }
  button.tap.undo { background: #7a2f2f; font-size: 15px; }

  footer.bar {
    position: sticky; bottom: 0; display:flex; gap: 10px; padding: 10px; background: var(--green-dark);
    border-top: 3px solid var(--green);
  }
  footer.bar button.tap { flex: 1; padding: 14px 6px; font-size: 15px; }

  .sheet-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); display:flex; align-items:flex-end; z-index: 50;
  }
  .sheet {
    background: var(--off-white); color: var(--ink); width: 100%; max-width: 480px; margin: 0 auto;
    border-radius: 16px 16px 0 0; padding: 16px; max-height: 85vh; overflow-y: auto;
  }
  .sheet h2 { margin: 0 0 12px; font-size: 22px; color: var(--green-dark); }
  .sheet .hint { font-size: 13px; color: #55655c; margin-bottom: 10px; }
  .option-list { display:flex; flex-direction:column; gap: 8px; }
  .option-btn {
    text-align:left; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line);
    background: white; font-size: 16px; font-family: inherit; color: var(--ink); cursor:pointer;
  }
  .option-btn:active { background: #e7e9ee; }
  .option-btn small { display:block; color: #667; font-size: 12px; margin-top: 2px; }
  .section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #778; margin: 14px 0 6px; }
  .section-label:first-child { margin-top: 0; }
  .sheet-close {
    display:block; width:100%; margin-top: 14px; padding: 12px; border-radius: 10px; border: none;
    background: var(--ink); color: white; font-family: inherit; font-size: 15px;
  }
  .stepper { display:flex; align-items:center; gap: 14px; justify-content:center; margin: 14px 0; }
  .stepper button {
    width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--green); color: white;
    font-size: 22px; font-weight: 800;
  }
  .stepper .val { font-size: 30px; font-family: 'Barlow Condensed', sans-serif; min-width: 40px; text-align:center; }
  .confirm-btn {
    width: 100%; padding: 14px; border-radius: 10px; border: none; background: var(--green-dark);
    color: white; font-size: 16px; font-family: inherit; margin-top: 6px;
  }
  .toast {
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%); background: var(--ink); color: white;
    padding: 10px 18px; border-radius: 20px; font-size: 14px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }

  .link-btn {
    background: none; border: 1px solid rgba(244,247,243,0.4); color: var(--off-white); border-radius: 20px;
    padding: 6px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
  }
  .link-btn.tiny { padding: 2px 8px; font-size: 11px; margin-left: 4px; }
  .expand-toggle { display:block; width: calc(100% - 20px); margin: 10px auto; text-align:center; }
  .stat-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin-top: 10px;
    padding-top: 8px; border-top: 1px solid rgba(244,247,243,0.2);
  }
  .stat-cell { display:flex; justify-content:space-between; font-size: 13px; }
  .stat-label { opacity: 0.75; }
  .stat-value { font-weight: 700; font-variant-numeric: tabular-nums; }
  .extras-mini { display:flex; gap: 12px; margin-top: 6px; font-size: 12px; opacity: 0.85; flex-wrap: wrap; }
  .extras-mini .total { font-weight: 700; opacity: 1; }
  .card-view { background: var(--off-white); color: var(--ink); padding: 14px 12px 40px; }
  .card-section { background: white; border-radius: 10px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
  .card-section h3 {
    margin: 0; padding: 10px 12px; background: var(--green-dark); color: var(--off-white); font-size: 18px;
  }
  table.card-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.card-table th, table.card-table td {
    padding: 8px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap;
  }
  table.card-table th:first-child, table.card-table td:first-child { text-align: left; white-space: normal; }
  table.card-table th { background: #eef0f5; font-weight: 700; font-size: 11px; text-transform: uppercase; color: #55655c; }
  table.card-table tr:last-child td { border-bottom: none; }
  .dnb-line { padding: 10px 12px; font-size: 13px; color: #55655c; }
  .extras-row { display:flex; justify-content:space-between; padding: 8px 12px; font-size: 14px; border-bottom: 1px solid var(--line); }
  .extras-row:last-child { border-bottom: none; font-weight: 700; }
  .fow-item { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
  .fow-item:last-child { border-bottom: none; }
  .back-bar { position: sticky; top:0; background: var(--green); padding: 10px 14px; z-index: 5; display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .header-btns { display:flex; gap: 6px; flex-wrap: wrap; justify-content:flex-end; }
  .paused-banner {
    background: var(--amber); color: var(--ink); text-align:center; font-weight: 700; padding: 8px;
    font-size: 14px;
  }
  .roster-row { display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .roster-row:last-child { border-bottom: none; }
  .roster-row.inactive { opacity: 0.5; }
  .roster-row .rname { flex: 1; }
  .roster-actions { display:flex; gap: 6px; align-items:center; }
  .roster-summary { display:flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px 6px; font-size: 13px; }
  .roster-summary span { padding: 4px 10px; border-radius: 14px; background: #eef0f5; }
  .roster-summary .chip-a { background: #dbe4f5; color: #1B2A4A; }
  .roster-summary .chip-b { background: #f6ecd0; color: #6b4b00; }
  .roster-warning { margin: 4px 12px 8px; padding: 8px 10px; border-radius: 8px; background: #fbe4e4; color: #7a1f1f; font-size: 13px; }
  .roster-tools { display:flex; gap: 8px; align-items:center; padding: 4px 12px 8px; flex-wrap: wrap; }
  .roster-tools input[type=text] {
    flex: 1; min-width: 120px; padding: 8px; border-radius: 8px; border: 1px solid var(--line);
    font-size: 14px; font-family: inherit;
  }
  .roster-row.team-a { background: #f1f5fc; }
  .roster-row.team-b { background: #fdf7e6; }
  .roster-row.team-off .rname { opacity: 0.55; }
  .seg { display:inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .seg-btn {
    border: none; background: white; color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 700;
    padding: 8px 12px; min-width: 40px; cursor: pointer; border-right: 1px solid var(--line);
  }
  .seg-btn:last-child { border-right: none; }
  .seg-btn.on.a { background: #1B2A4A; color: white; }
  .seg-btn.on.b { background: #C99A2E; color: #1A1A1A; }
  .seg-btn.on.off { background: #d8d4c8; color: #55655c; }
  .toggle-switch {
    width: 42px; height: 24px; border-radius: 12px; border: none; position: relative; cursor: pointer;
    background: #ccc;
  }
  .toggle-switch.on { background: var(--green); }
  .toggle-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: white; transition: left 0.15s;
  }
  .toggle-switch.on::after { left: 20px; }
  .icon-btn {
    border: 1px solid var(--line); background: white; border-radius: 6px; padding: 4px 8px; font-size: 12px;
    font-family: inherit; cursor: pointer; color: var(--ink);
  }
  .add-player-row { display:flex; gap: 8px; padding: 10px 12px; }
  .add-player-row input {
    flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; font-family: inherit;
  }
  .settings-row { display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .settings-row:last-child { border-bottom: none; }
  .settings-row input[type=text] {
    padding: 8px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; font-family: inherit; width: 140px;
  }
  .settings-row select {
    padding: 8px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; font-family: inherit;
    background: white; color: var(--ink);
  }
  .mini-stepper { display:flex; align-items:center; gap: 10px; }
  .mini-stepper button {
    width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--green-dark); color: white; font-size: 16px; font-weight: 800;
  }

  /* Wide screens (laptop/desktop): three-panel dashboard layout instead of a
     single stretched phone-width column — Scoreboard, Batting & Bowling, and
     Controls side by side (similar grouping to the TCS live-match dashboard),
     so the extra width is actually used and nothing needs to be toggled. */
  @media (min-width: 1050px) {
    /* The whole app is capped at one viewport height. Controls sizes to its
       own content (auto) and always stays fully visible; the Scoreboard and
       Batting/Bowling panels get whatever space is left (1fr) and scroll
       internally if their content (a long scorecard) exceeds it — so the tap
       buttons never end up needing a scroll to reach, no matter how long the
       match's history gets. */
    #app {
      max-width: 1500px; margin: 0 auto; height: 100vh; display: grid;
      grid-template-columns: minmax(360px, 1fr) minmax(460px, 1.3fr);
      grid-template-rows: 1fr auto;
      grid-template-areas: "scoreboard batting" "controls controls";
      align-items: stretch; gap: 0;
    }
    .col-scoreboard { grid-area: scoreboard; overflow-y: auto; min-height: 0; }
    .col-batting { grid-area: batting; overflow-y: auto; min-height: 0; }
    .col-right {
      grid-area: controls; display: flex; flex-direction: column;
      background: var(--green-dark); box-shadow: 0 -6px 16px rgba(0,0,0,0.35);
    }
    header.top { position: sticky; top: 0; }
    main.controls { display:flex; flex-direction:column; justify-content:center; padding: 24px 40px; position: relative; }
    .grid-runs, .grid-extras, .grid-actions { max-width: 760px; margin: 0 auto 14px; width: 100%; }
    /* Fills the empty margin beside the centered button column, rather than
       shrinking the buttons to make room for it. Scales with how much of
       that margin actually exists, so it never overlaps the buttons. */
    .controls-brand-logo {
      display: block; position: absolute; right: clamp(8px, 3vw, 48px); top: 50%; transform: translateY(-50%);
      width: clamp(70px, 9vw, 220px); height: clamp(70px, 9vw, 220px); border-radius: 50%; overflow: hidden;
      background: var(--off-white); box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 1;
    }
    .controls-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
    .grid-runs button.tap, .grid-extras button.tap { padding: 28px 8px; font-size: 28px; }
    .grid-actions button.tap { padding: 24px 8px; font-size: 22px; }
    footer.bar { max-width: 760px; margin: 0 auto; width: 100%; position: static; }
    #app.single-col { display: block; max-width: 640px; margin: 0 auto; }
    .card-view, .sheet { max-width: 640px; margin: 0 auto; }
    .expand-toggle { display: none; }
    .full-extra { display: block !important; }
    /* Batting/Bowling panel has more room now that Controls moved to its own
       row below, so give it bigger, more readable text. */
    .col-batting section.mini-bowling table.card-table { font-size: 15px; }
    .col-batting section.mini-bowling table.card-table th, .col-batting section.mini-bowling table.card-table td { padding: 10px 12px; }
    .col-batting section.mini-bowling h3 { font-size: 20px; padding: 12px 14px; }
  }
  .innings-over-banner { background: var(--red); color: white; }
  .roster-summary span, .card-section .dnb-line { word-break: break-word; }

  /* Live board (read-only, TCS-style) */
  .live-view { background: var(--off-white); color: var(--ink); padding: 14px 12px 40px; }
  .live-board { background: #0b0b0b; color: #f2f2f2; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
  .lb-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .lb-team { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 26px; font-weight: 700; color: #ffd24a; }
  .lb-score { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 44px; font-weight: 700; color: #ffd24a; }
  .lb-score small { font-size: 22px; color: #f2f2f2; }
  .lb-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; margin-top: 6px; }
  .lb-row { display:flex; justify-content:space-between; gap:8px; font-size: 16px; }
  .lb-row span { color: #ffd24a; }
  .lb-row b { font-variant-numeric: tabular-nums; }
  .lb-row.big { font-size: 19px; margin-top: 4px; }
  .lb-row.big span { color: #f2f2f2; }
  .lb-row small { opacity: .7; font-weight: 400; }
  .lb-last { margin-top: 10px; font-size: 14px; opacity: .9; }
  .lb-bowl { display:flex; justify-content:space-between; margin-top: 8px; color: #ffd24a; font-size: 18px; }
  .live-over { display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding: 10px 12px; }
  .live-over .ball-chip { background: rgba(0,0,0,.12); }
  .live-over .ball-chip.wicket { background: var(--red); color: #fff; }
  .live-over .ball-chip.boundary { background: var(--amber); color: var(--ink); }
  .live-over-total { margin-left: auto; font-weight: 700; }
  .rpo-chart { display:flex; align-items:flex-end; gap:4px; height: 150px; padding: 10px 12px 6px; overflow-x:auto; }
  .rpo-col { flex: 1 0 22px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
  .rpo-bar { width:100%; background: var(--green); border-radius: 3px 3px 0 0; min-height: 2px; }
  .rpo-bar.partial { background: var(--amber); }
  .rpo-val, .rpo-lbl { font-size: 11px; line-height: 1.3; }
  @media (min-width: 1050px) {
    #app.single-col { max-width: 960px; }
    .live-view .lb-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Matches page */
  .match-row { cursor: pointer; }
  .match-row:focus-visible { outline: 3px solid var(--amber); }
  .match-meta { display:flex; justify-content:space-between; gap:8px; padding: 8px 12px 2px; font-size: 13px; color: #444; flex-wrap: wrap; }
  .match-status.live { color: var(--red); font-weight: 700; }
  .match-status.done { color: #2a6b3d; font-weight: 700; }
  .match-line { padding: 3px 12px; font-size: 17px; }
  .match-result { padding: 6px 12px 10px; font-weight: 700; }

  /* Edit balls */
  .over-head { background: #ece9dd; padding: 6px 12px; font-size: 13px; font-weight: 700; letter-spacing: .03em; }
  .ball-row { display:flex; align-items:center; gap: 12px; padding: 12px; border-top: 1px solid var(--line); min-height: 52px; cursor: pointer; }
  .ball-row:focus-visible { outline: 3px solid var(--amber); }
  .ball-row.fixed { cursor: default; opacity: .7; }
  .ball-no { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 42px; color: #555; }
  .ball-txt { flex: 1; display:flex; flex-direction:column; }
  .ball-txt small { color: #666; }
  .ball-act { color: var(--green); font-weight: 700; }

  /* Main page tabs */
  .nav-tabs { position: sticky; top: 0; z-index: 6; display: flex; background: var(--green); border-bottom: 3px solid var(--green-dark); }
  .nav-tab {
    flex: 1; background: none; border: 0; border-bottom: 4px solid transparent; color: var(--off-white); opacity: .75;
    font: inherit; font-size: 15px; font-weight: 700; padding: 14px 4px 10px; cursor: pointer; min-height: 48px;
  }
  .nav-tab.on { opacity: 1; border-bottom-color: var(--amber); }
  .nav-tab:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }

/* Club server: status chip, watching, sign-in pages */
.title-col { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.sync-chip { background:none; border:0; color: var(--off-white); font: inherit; font-size: 11px; padding: 2px 0; opacity:.85; cursor:pointer; text-align:left; }
.sync-chip::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:#9aa; }
.sync-chip.synced::before { background:#4caf50; }
.sync-chip.pending::before { background: var(--amber); }
.sync-chip.superseded::before, .sync-chip.error::before { background: #e05252; }
.sync-chip.login::before, .sync-chip.view::before { background:#9aa; }
.watch-note { background:#fff8e1; border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:14px; }
.section-head { font-family:'Barlow Condensed', system-ui, sans-serif; font-weight:700; font-size:20px; margin: 18px 4px 8px; }
.remote-actions { display:flex; gap:8px; flex-wrap:wrap; padding: 6px 12px 12px; }
.auth-page { padding: 24px 12px; background: var(--off-white); min-height: 100vh; color: var(--ink); }
.acct-msg { color: var(--red); font-size: 13px; flex: 1; }

/* Members page */
.member-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 8px 12px; padding: 12px; border-top: 1px solid var(--line); }
.member-row.is-off { opacity: .7; }
.member-main { min-width: 0; flex: 1 1 220px; }
.member-name { font-weight: 700; }
.member-sub { font-size: 12px; color: #555; overflow-wrap: anywhere; }
.member-actions { display:flex; flex-wrap:wrap; gap: 6px; align-items:center; }
.member-actions select { padding: 6px; border-radius: 8px; border: 1px solid var(--line); font: inherit; font-size: 13px; background: white; color: var(--ink); }
.you { font-size: 11px; font-weight: 700; background: var(--amber); color: var(--ink); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.icon-btn.danger { color: var(--red); border-color: var(--red); }
.icon-btn:disabled { opacity: .45; cursor: default; }
.link-box { outline: 3px solid var(--amber); }
.link-row { display:flex; gap: 8px; padding: 6px 12px 10px; align-items:center; flex-wrap: wrap; }
.link-row input { flex: 1 1 200px; min-width: 0; padding: 8px; border-radius: 8px; border: 1px solid var(--line); font: inherit; font-size: 13px; }
a.icon-btn { text-decoration: none; display:inline-block; }
.err-line { color: var(--red); }
.settings-row input[type=email], .settings-row input[type=password] { padding: 8px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; font-family: inherit; width: 200px; max-width: 55vw; }
.settings-row label { flex: 0 0 auto; }
.nav-tab { font-size: clamp(12px, 3.4vw, 15px); }

/* Sign-in page */
.signin-box { max-width: 420px; margin: 0 auto; display:flex; flex-direction:column; gap: 14px; }
.signin-crest { width: 110px; height: 110px; border-radius: 50%; background: white; margin: 10px auto 0; object-fit: cover; }
.anon-link { color: var(--ink); border-color: var(--line); align-self: center; }

.visitor-title { display:flex; align-items:center; gap: 8px; font-weight: 700; }
.visitor-title img { width: 32px; height: 32px; border-radius: 50%; background: white; object-fit: cover; }

.progress { height: 10px; margin: 0 12px 10px; background: var(--line); border-radius: 6px; overflow: hidden; }
.progress > div { height: 100%; background: var(--green); transition: width .2s; }
.file-btn { cursor: pointer; display: inline-block; }
.file-btn.disabled { opacity: .5; pointer-events: none; }
.card-section a { color: var(--green); }