:root{
    --ink:#0B1D26;
    --ink-soft:#13303F;
    --paper:#F4F2ED;
    --accent-cool:#2E8B8B;
    --accent-warm:#E8615C;
    --accent-gold:#F2C14E;
    --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', -apple-system, sans-serif;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; height:100%; background:var(--ink); font-family:var(--sans); color:var(--paper); }
  #app{ display:flex; flex-direction:column; height:100vh; }

  header{
    position:relative;
    padding:18px 24px 14px;
    border-bottom:1px solid rgba(244,242,237,0.1);
    display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px;
  }
  header h1{ font-family:var(--serif); font-weight:600; font-size:20px; margin:0; letter-spacing:0.2px; }
  header .tag{ font-family:var(--mono); font-size:11px; opacity:0.5; letter-spacing:0.5px; text-transform:uppercase; }

  .title-group{ display:flex; align-items:center; gap:10px; min-width:0; }

  /* Small permanent trophy badge, shown once the person has ridden the
     distance to the Moon — sits right after the logo so it's always in
     view, not buried in a list, but doesn't compete with the title. */
  .moon-badge{
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; cursor:default;
    filter:drop-shadow(0 0 3px rgba(242,193,78,0.6));
  }

  /* Animated header logo: the ring draws itself in on load, then the dot
     keeps a slow, subtle orbit around it — echoing the "cycling around the
     globe" concept right next to the title. Entrance-only on reduced motion. */
  .logo-mark{ width:30px; height:30px; flex-shrink:0; overflow:visible; }
  .logo-mark-ring{
    stroke-dasharray:233; /* ~2*PI*37 */
    stroke-dashoffset:233;
    /* ease-out cubic (1 - (1-t)^3) approximated as a cubic-bezier, matching
       the timing of the map's own latitude-line reveal animation */
    animation:logo-ring-draw 2s cubic-bezier(0.33,1,0.68,1) 0.15s forwards;
  }
  .logo-mark-orbit{
    opacity:0;
    transform-box:fill-box;
    transform-origin:center;
    animation:
      logo-dot-fade-in 0.3s ease 2.15s forwards,
      logo-dot-flash 0.5s ease 2.45s;
  }
  @keyframes logo-ring-draw{
    to{ stroke-dashoffset:0; }
  }
  @keyframes logo-dot-fade-in{
    to{ opacity:1; }
  }
  @keyframes logo-dot-flash{
    0%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(242,193,78,0)); }
    40%{ transform:scale(1.45); filter:drop-shadow(0 0 6px rgba(242,193,78,0.9)); }
    100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(242,193,78,0)); }
  }
  @media (prefers-reduced-motion: reduce){
    .logo-mark-ring{ animation:none; stroke-dashoffset:0; }
    .logo-mark-orbit{ animation:none; opacity:1; }
  }
  @media (max-width:640px){
    .logo-mark{ width:22px; height:22px; }
  }

  #headerProgressTrack{
    position:absolute; bottom:0; left:0; width:100%; height:3px;
    background:rgba(255,255,255,0.1);
  }
  #headerProgressFill{
    height:100%; width:0%;
    background:var(--accent-gold);
    transition:width 0.4s ease;
  }

  #layout{ flex:1; display:flex; min-height:0; }
  #map{ flex:1; min-width:0; filter:saturate(0.85) contrast(1.02); background:var(--ink-soft); }

  #panel{
    width:340px; flex-shrink:0;
    background:var(--ink-soft);
    padding:22px 22px 24px;
    overflow-y:auto;
    border-left:1px solid rgba(244,242,237,0.08);
  }

  .stat-block{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px; }
  .stat-main{ min-width:0; }
  .stat-number{
    font-family:var(--serif); font-size:44px; line-height:1; font-weight:600;
    color:var(--accent-cool);
  }
  .stat-number.grad-0{ color:#3FB5B5; }
  .stat-number.grad-1{ color:#8C7CF0; }
  .stat-number.grad-2{ color:#4FCB7A; }
  .stat-number.grad-3{ color:#4FA3F7; }
  .stat-number.achieved{ color:var(--accent-gold); }
  .stat-label{ font-family:var(--mono); font-size:11px; opacity:0.6; text-transform:uppercase; letter-spacing:0.6px; margin-top:6px; }
  .stat-logo-big{
    flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    text-decoration:none;
    /* The artwork inside the PNG has a little empty margin above the globe
       itself, so aligning the box's top edge to the number's top edge (see
       .stat-block) still leaves the globe looking a touch low — nudge the
       whole logo up to compensate. */
    margin-top:-14px;
  }
  .stat-logo-big .logo-square{
    width:84px; height:84px;
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.15s;
  }
  .stat-logo-big:hover .logo-square{ transform:scale(1.05); }
  .stat-logo-big img{ width:100%; height:100%; object-fit:contain; }

  label.field-label{
    display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
    letter-spacing:0.5px; opacity:0.65; margin-bottom:6px; margin-top:18px; font-weight:600;
  }
  .field-label-row{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;
  }
  .field-label-row .field-label{ margin-bottom:0; }
  .km-mode-toggle{ margin-bottom:6px; }
  .km-mode-toggle .toggle-btn{ font-size:9.5px; padding:3px 7px; }
  input[type=number]{
    width:100%; padding:10px 12px; border-radius:6px; border:1px solid rgba(244,242,237,0.18);
    background:rgba(244,242,237,0.05); color:var(--paper); font-family:var(--mono); font-size:16px;
    -moz-appearance:textfield;
  }
  input[type=number]:focus{ outline:none; border-color:var(--accent-cool); }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

  .km-input-row{ display:flex; gap:8px; align-items:stretch; }
  .km-input-row input[type=number]{ flex:1; min-width:0; }

  .pace-calc .section-label{
    font-family:var(--mono); font-size:11px; text-transform:uppercase;
    letter-spacing:0.5px; opacity:0.65; font-weight:600;
    margin-top:0;
  }
  .pace-calc .field-label{
    font-size:10px; opacity:0.4; margin-top:10px; font-weight:400;
  }
  .pace-calc input[type=number]{ box-sizing:border-box; width:100%; }
  .pace-result{
    font-family:var(--mono); font-size:12.5px; line-height:1.5;
    margin-top:8px; opacity:0.9;
  }
  .pace-result .muted{ font-size:10.5px; opacity:0.45; font-family:var(--sans); line-height:1.5; }
  .pace-result b{ color:var(--accent-gold); }

  @keyframes first-visit-pulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(242,193,78,0); border-color:rgba(244,242,237,0.18); }
    50%{ box-shadow:0 0 0 5px rgba(242,193,78,0.14); border-color:rgba(242,193,78,0.55); }
  }
  .km-input-row.first-visit input[type=number]{ animation:first-visit-pulse 2.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){
    .km-input-row.first-visit input[type=number]{ animation:none; border-color:rgba(242,193,78,0.55); }
  }
  .km-confirm-btn{
    flex-shrink:0; width:42px; border-radius:6px; border:1px solid rgba(244,242,237,0.18);
    background:rgba(244,242,237,0.06); color:var(--paper); font-size:16px; cursor:pointer;
    opacity:0.7; transition:opacity 0.15s, background 0.15s, border-color 0.15s;
  }
  .km-confirm-btn:hover{ opacity:1; background:rgba(63,181,181,0.15); border-color:var(--accent-cool); }
  .km-confirm-btn:active{ transform:translateY(1px); }

  .divider{ height:1px; background:rgba(244,242,237,0.1); margin:20px 0; }
  /* Tighter gap above the home button specifically — the readout above it
     already ends with its own line-height whitespace, so the full 20px
     divider margin on both sides reads as extra dead space right before a
     button the person is likely to reach for early in the flow. */
  .divider-tight{ margin:10px 0; }

  .readout{ font-family:var(--mono); font-size:12.5px; line-height:1.9; opacity:0.85; }

  .history-section{
    margin-top:16px; padding:12px 14px; border-radius:8px;
    background:rgba(244,242,237,0.04); border:1px solid rgba(244,242,237,0.08);
  }
  .history-section .section-label{ margin-top:0; }
  #historyLogList{ display:flex; flex-direction:column; gap:5px; margin-top:6px; }
  .history-log-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    font-family:var(--mono); font-size:11.5px;
  }
  .history-log-date{ opacity:0.55; flex-shrink:0; }
  .history-log-km{ color:var(--paper); }
  .history-log-delta{ color:var(--accent-cool); opacity:0.9; margin-left:6px; }
  .history-log-moon{ margin-left:6px; cursor:default; }
  .history-log-more{ margin-top:2px; }
  .history-log-more summary{
    cursor:pointer; list-style:none; font-family:var(--mono); font-size:10.5px;
    opacity:0.55; padding:2px 0;
  }
  .history-log-more summary::-webkit-details-marker{ display:none; }
  .history-log-more summary:hover{ opacity:0.85; }
  .history-log-more summary::before{ content:'+ '; }
  .history-log-more[open] summary::before{ content:'− '; }
  .history-log-more[open] summary{ margin-bottom:5px; }
  .history-log-more .history-log-row{ margin-top:5px; }
  .settings-data{ display:flex; flex-direction:column; gap:8px; }
  .settings-danger-btn{
    border-color:rgba(232,97,92,0.3); opacity:0.65;
  }
  .menu-action-btn.settings-danger-btn:hover{ opacity:1; background:rgba(232,97,92,0.12); border-color:var(--accent-warm); color:var(--accent-warm); }
  .readout b{ color:var(--paper); opacity:1; font-weight:600; }
  .readout .muted{ opacity:0.5; }

  .hint{ font-size:12px; line-height:1.6; opacity:0.6; margin-top:14px; }
  .privacy-note{ font-size:10.5px; line-height:1.5; opacity:0.45; margin-top:8px; text-align:center; }
  .geo-status{ font-size:11px; line-height:1.5; margin-top:8px; text-align:center; min-height:0; }
  .geo-status.error{ color:var(--accent-warm); opacity:0.9; }
  .geo-status.busy{ opacity:0.6; }

  /* Thin, always-visible Moon-distance progress strip under the main stat —
     a permanent reminder of that milestone without needing a whole section
     of its own or crowding into the milestone list below. */
  .moon-progress{ margin:22px 0 14px; cursor:default; }
  .moon-progress-track{
    height:3px; border-radius:2px; background:rgba(244,242,237,0.1); overflow:hidden;
  }
  .moon-progress-fill{
    height:100%; width:0%; background:var(--accent-gold); border-radius:2px;
    transition:width 0.4s ease;
  }
  .moon-progress-label{
    font-family:var(--mono); font-size:10.5px; opacity:0.55; margin-top:4px;
  }
  .moon-progress.done .moon-progress-label{ opacity:0.8; color:var(--accent-gold); }

  .intro-hint{
    font-size:12.5px; line-height:1.6; opacity:0.8;
    background:rgba(244,242,237,0.06);
    border-left:2px solid var(--accent-cool);
    padding:10px 12px;
    border-radius:0 6px 6px 0;
    margin-bottom:6px;
  }

  /* Persistent, un-missable invite to grab the one-off "circled the Earth" /
     "rode to the Moon" share card — unlike the celebration toast (which
     auto-dismisses and is gone for good), this stays put until the person
     acts on it or dismisses it, and is offered only once per achievement
     (see STORAGE_LAP_ACHIEVEMENT_SHOWN / STORAGE_MOON_ACHIEVEMENT_SHOWN). */
  .achievement-banner{
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(135deg, rgba(242,193,78,0.14), rgba(244,242,237,0.05));
    border:1px solid rgba(242,193,78,0.4);
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:14px;
  }
  .achievement-banner-icon{ font-size:32px; flex-shrink:0; line-height:1; }
  .achievement-banner-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .achievement-banner-title{
    font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--accent-gold);
    line-height:1.3;
  }
  .achievement-banner-btn{
    align-self:flex-start;
    border:1px solid rgba(242,193,78,0.5); border-radius:6px;
    background:rgba(242,193,78,0.12); color:var(--accent-gold);
    font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px;
    padding:6px 10px; cursor:pointer; transition:background 0.15s, opacity 0.15s;
  }
  .achievement-banner-btn:hover{ background:rgba(242,193,78,0.22); }
  .achievement-banner-close{
    flex-shrink:0; align-self:flex-start;
    width:26px; height:26px; border-radius:6px; border:1px solid rgba(244,242,237,0.15);
    background:transparent; color:var(--paper); opacity:0.5; cursor:pointer; font-size:12px;
    transition:opacity 0.15s, background 0.15s;
  }
  .achievement-banner-close:hover{ opacity:1; background:rgba(244,242,237,0.08); }

  #loopList{ margin-top:0; }
  /* Only add breathing room below the loop legend when it actually has
     rows (i.e. at least one lap completed) — otherwise this rule would
     also push the intro hint down on a brand-new, zero-lap visit. */
  #loopList:not(:empty){ margin-bottom:20px; }
  .section-label{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.6px;
    opacity:0.65; font-weight:600; margin-top:18px; margin-bottom:8px;
  }
  #milestoneList{ display:flex; flex-direction:column; gap:5px; }
  .milestone-row{
    font-family:var(--mono); font-size:11.5px; line-height:1.5;
    cursor:pointer;
  }
  .milestone-row .m-main{ display:flex; align-items:baseline; gap:6px; }
  .milestone-row .m-icon{ flex-shrink:0; }
  .milestone-row.passed{ opacity:0.55; }
  .milestone-row.upcoming .m-name{ color:var(--paper); font-weight:600; }
  .milestone-row .m-name{ border-bottom:1px dotted currentColor; }
  .milestone-row .m-km{ opacity:0.6; }
  .milestone-row .m-fact{
    display:none; font-size:11px; line-height:1.45; opacity:0.65;
    margin:4px 0 2px 20px;
  }
  .milestone-row.open .m-fact{ display:block; }
  .loop-row{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; padding:3px 0; opacity:0.85; }
  .swatch{ width:14px; height:4px; border-radius:2px; flex-shrink:0; }

  .btn{
    margin-top:14px; width:100%; padding:9px 10px; border-radius:6px; border:1px solid rgba(244,242,237,0.2);
    background:transparent; color:var(--paper); font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
    letter-spacing:0.5px; cursor:pointer; transition:background 0.15s;
  }
  .btn:hover{ background:rgba(244,242,237,0.08); }
  .btn-success{ border-color:rgba(79,203,122,0.5); color:#4FCB7A; }
  .btn:disabled{ cursor:default; opacity:0.5; }
  .btn:disabled:hover{ background:transparent; }

  .geo-btn{ position:relative; padding-top:7px; padding-bottom:7px; }
  .geo-btn-row{ display:flex; align-items:center; justify-content:center; gap:6px; }
  .geo-btn-pin{ font-size:14px; line-height:1; flex-shrink:0; }
  .geo-btn-text-col{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .geo-btn-main{ font-size:11.5px; line-height:1.2; }
  .geo-btn-sub{ font-size:9px; opacity:0.6; margin-top:1px; letter-spacing:0.3px; }

  .footer-credit{
    text-align:center; font-size:11.5px; opacity:0.55;
    margin-top:14px;
  }
  .footer-credit a{ color:var(--paper); opacity:0.9; text-decoration:underline; text-decoration-color:rgba(244,242,237,0.3); }
  .footer-credit a:hover{ opacity:1; text-decoration-color:currentColor; }
  .footer-location{ text-align:center; font-size:10px; opacity:0.4; margin-top:4px; }

  .donate-section{
    text-align:center; margin-top:22px; padding-top:16px;
    border-top:1px solid rgba(244,242,237,0.08);
  }
  .donate-label{ font-size:11.5px; opacity:0.6; margin-bottom:10px; }
  .donate-qr{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; }
  .donate-qr img{
    width:200px; height:200px; border-radius:10px; background:#fff; padding:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
  }
  .donate-qr-caption{ font-size:10.5px; opacity:0.55; letter-spacing:0.3px; }
  .donate-kofi-btn{
    display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:20px;
    background:rgba(244,242,237,0.08); border:1px solid rgba(244,242,237,0.25);
    color:var(--paper); font-family:var(--sans); font-size:12.5px; font-weight:600;
    text-decoration:none; transition:background 0.15s, border-color 0.15s, color 0.15s;
  }
  .donate-kofi-btn:hover{ background:rgba(232,97,92,0.15); border-color:var(--accent-warm); color:var(--accent-warm); }

  .leaflet-popup-content-wrapper{ font-family:var(--mono); font-size:12px; background:var(--ink); color:var(--paper); }
  .leaflet-popup-tip{ background:var(--ink); }

  .home-dot{
    width:16px; height:16px; border-radius:50%;
    background:var(--accent-warm);
    border:2px solid var(--paper);
    box-shadow:0 0 0 2px rgba(232,97,92,0.35);
  }

  .map-label{
    font-family:var(--mono); font-size:11.5px; font-weight:600; white-space:nowrap;
    background:rgba(244,242,237,0.92); color:var(--ink);
    padding:2px 7px; border-radius:4px;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    border:1px solid rgba(11,29,38,0.15);
  }
  .map-label.active-label{ position:relative; background:#F2C14E; border-color:#b8860b; text-align:center; }
  .map-label.active-label .al-bike{
    position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
    margin-bottom:8px;
    width:34px; height:34px; box-sizing:border-box; padding-bottom:7px;
    display:flex; align-items:center; justify-content:center;
    background:#F2C14E; border:2px solid #b8860b; border-radius:50%;
    box-shadow:0 2px 5px rgba(0,0,0,0.45);
    transition:opacity 0.25s ease-out;
  }
  .map-label.active-label .al-bike-glyph{
    display:block; font-size:22px; line-height:1; margin-left:1px;
    transform:scaleX(-1); /* mirrors the glyph to face/travel left-to-right */
  }
  .map-label.active-label .al-km{
    display:block; font-family:var(--mono); font-size:9.5px; font-weight:600;
    opacity:0.75; margin-top:1px; letter-spacing:0.2px; font-variant-numeric:tabular-nums;
  }

  @media (max-width: 768px){
    header{ padding:9px 12px; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; }
    header h1{ font-size:14px; line-height:1.25; flex:1; min-width:0; }
    .title-group{ flex:1; min-width:0; }
    header .tag{ display:none; }
    .header-toggles{ flex-shrink:0; display:flex; align-items:center; }
    #layout{ flex-direction:column; }
    #map{ flex:none; height:52vh; min-height:260px; }
    #panel{ width:100%; flex:1; border-left:none; border-top:1px solid rgba(244,242,237,0.08); padding:16px 16px 20px; }
    .stat-number{ font-size:36px; }
    /* Wrap the label onto its own full-width row, centered under the whole
       stat block (number + logo) rather than squeezed next to the logo. */
    .stat-block{ flex-wrap:wrap; margin-bottom:6px; }
    .stat-label{ width:100%; text-align:center; margin-top:12px; }
  }

  .toggle-group{ display:flex; gap:4px; }
  .toggle-btn{
    font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.4px;
    background:rgba(244,242,237,0.06); border:1px solid rgba(244,242,237,0.18); color:var(--paper);
    padding:4px 9px; border-radius:5px; cursor:pointer; opacity:0.6; transition:opacity 0.15s, background 0.15s;
  }
  .toggle-btn:hover{ opacity:0.85; }
  .toggle-btn.active{ opacity:1; background:var(--accent-cool); border-color:var(--accent-cool); }
  .header-toggles{ display:flex; gap:10px; align-items:center; position:relative; }
  .settings-btn{
    width:30px; height:30px; border-radius:7px; flex-shrink:0;
    background:rgba(244,242,237,0.06); border:1px solid rgba(244,242,237,0.18); color:var(--paper);
    font-size:15px; cursor:pointer; opacity:0.65; transition:opacity 0.15s, background 0.15s;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  @media (max-width: 768px){
    .settings-btn{ width:32px; height:32px; font-size:15px; border-radius:7px; }
  }
  .settings-btn:hover, .settings-btn.open{ opacity:1; background:rgba(244,242,237,0.12); }
  .settings-panel{
    position:absolute; top:calc(100% + 8px); right:0;
    background:var(--ink-soft); border:1px solid rgba(244,242,237,0.12);
    border-radius:8px; padding:14px 14px 12px; box-shadow:0 8px 24px rgba(0,0,0,0.4);
    display:none; flex-direction:column; gap:12px; min-width:210px; z-index:1500;
  }
  .settings-panel.open{ display:flex; }
  .settings-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .settings-row-label{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; opacity:0.5; font-weight:600; }
  .settings-divider{ height:1px; background:rgba(244,242,237,0.1); margin:0; }
  /* Same base look as the rest of the app's small buttons (toggle-btn,
     km-confirm-btn): subtle tinted fill + faint border, not a permanently
     colored outline — the settings panel should read as part of the same
     UI, not a visually separate widget. */
  .menu-action-btn{
    display:block; width:100%; padding:9px 10px; border-radius:6px;
    border:1px solid rgba(244,242,237,0.18);
    background:rgba(244,242,237,0.06); color:var(--paper); font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
    letter-spacing:0.5px; text-align:center; text-decoration:none; box-sizing:border-box;
    cursor:pointer; opacity:0.75; transition:background 0.15s, opacity 0.15s, border-color 0.15s;
  }
  .menu-action-btn:hover{ opacity:1; background:rgba(46,139,139,0.15); border-color:var(--accent-cool); color:var(--accent-cool); }

  .action-row{ display:flex; gap:8px; margin-top:14px; }
  .action-row .btn{
    margin-top:0; flex:1; min-width:0; padding-left:6px; padding-right:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .action-row .btn .btn-icon{
    display:flex; align-items:center; justify-content:center;
    width:1.1em; height:1.1em; line-height:1; flex-shrink:0;
  }
  .action-row .btn .btn-label{ overflow:hidden; text-overflow:ellipsis; }

  .card-output-modal{
    display:none; position:fixed; inset:0; z-index:2500;
    background:rgba(64,102,122,0.95);
    align-items:center; justify-content:center;
    padding:20px;
  }
  .card-output-modal.open{ display:flex; }
  .card-output-dialog{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    max-height:100%; position:relative;
  }
  .card-output-preview{
    width:min(78vw, 320px); height:auto;
    border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
    background:var(--ink);
  }
  .card-output-status{
    font-family:var(--mono); font-size:11.5px; opacity:0.7; min-height:14px;
  }
  .card-output-actions{
    display:flex; gap:8px; width:min(78vw, 320px);
  }
  .card-output-actions .btn{ margin-top:0; flex:1; }

  .card-output-close{
    position:absolute; top:-46px; right:-46px;
    width:34px; height:34px; border-radius:50%;
    background:rgba(244,242,237,0.12); border:1px solid rgba(244,242,237,0.25);
    color:var(--paper); font-size:15px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s, border-color 0.15s, color 0.15s;
  }
  .card-output-close:hover{ background:rgba(232,97,92,0.15); border-color:var(--accent-warm); color:var(--accent-warm); }
  @media (max-width: 768px){
    .card-output-close{ top:-20px; right:-20px; }
  }

  #printArea{ display:none; }
  @media print{
    /* #printArea sits as a direct child of <body>, outside the modal/dialog
       entirely, so it's never subject to the modal's small fixed width —
       that's what caused the image to print tiny/cropped in earlier
       attempts. Everything else on the page is hidden so this is the only
       thing that ends up on paper. */
    body > *:not(#printArea){ display:none !important; }
    #printArea{ display:block !important; }
    #printArea img{ display:block; width:100%; height:auto; }
    @page{ margin:0.5cm; }
  }

  #celebrationToast{
    position:fixed; top:20px; left:50%;
    transform:translate(-50%, -20px);
    background:linear-gradient(90deg, var(--accent-cool), var(--accent-warm));
    color:#fff; font-family:var(--serif); font-weight:600; font-size:15px;
    padding:12px 22px; border-radius:10px;
    box-shadow:0 6px 20px rgba(0,0,0,0.4);
    z-index:2000; pointer-events:none;
    opacity:0; transition:opacity 0.35s ease, transform 0.35s ease;
    max-width:90vw; text-align:center;
  }
  #celebrationToast.show{ opacity:1; transform:translate(-50%, 0); }
  #celebrationToast.clickable{ pointer-events:auto; cursor:pointer; }
  #celebrationToast .celebration-hint{
    font-family:var(--mono); font-size:10.5px; font-weight:400; opacity:0.85;
    text-transform:uppercase; letter-spacing:0.5px; margin-top:4px;
  }