:root{
    --bg-0:#0E1C33;
    --bg-1:#16283F;
    --surface:#1B2C44;
    --surface-2:#223650;
    --border:#304767;
    --text-primary:#FBF9F5;
    --text-secondary:#ECF0F5;
    --text-muted:#C7D0DC;
    --accent:#C25948;
    --accent-2:#4582BE;
    --success:#4CAF7D;
    --danger:#E0575A;
    --radius:18px;
    --radius-sm:12px;
    font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;min-height:100%;background:var(--bg-0);color:var(--text-primary);overscroll-behavior-y:none;}
  body{min-height:100vh;}
  a{color:inherit;}
  button, input{font-family:inherit;}

  .shell{
    max-width:440px;margin:0 auto;width:100%;min-height:100vh;
    /* Installed as a standalone PWA (see manifest.json), iOS renders this
       edge-to-edge behind the status bar / Dynamic Island — pad for the
       device's safe area on top of the usual spacing, not instead of it. */
    padding:calc(20px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  .brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 22px;}
  .brand{display:flex;align-items:center;gap:9px;min-width:0;}
  .rc-wordmark{font-weight:700;letter-spacing:-0.5px;font-size:34px;color:var(--text-primary);}
  .rc-wordmark__cal{color:var(--accent);}
  .brand span.sub{color:var(--text-muted);font-weight:500;letter-spacing:0.02em;font-size:12.5px;margin-left:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .lang-switch{display:flex;border:1px solid var(--border);border-radius:999px;padding:2px;background:var(--surface);flex:none;}
  .lang-btn{appearance:none;border:none;cursor:pointer;font-family:inherit;background:none;color:var(--text-muted);font-weight:700;font-size:11px;letter-spacing:0.03em;padding:4px 9px;border-radius:999px;}
  .lang-btn.active{background:var(--accent);color:#fff;}

  .mode-switch{display:flex;border:1.5px solid var(--border);border-radius:999px;padding:3px;background:var(--surface);margin-bottom:18px;}
  .mode-btn{flex:1;appearance:none;border:none;cursor:pointer;font-family:inherit;background:none;color:var(--text-muted);font-weight:700;font-size:13px;padding:9px 12px;border-radius:999px;text-align:center;}
  .mode-btn.active{background:var(--accent);color:#fff;}

  .mode-banner{display:none;align-items:center;gap:8px;background:rgba(224,87,90,0.1);border:1px solid rgba(224,87,90,0.3);color:var(--danger);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:700;margin-bottom:16px;}
  .mode-banner.show{display:flex;}
  .mode-banner svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;}

  h1{font-size:26px;font-weight:700;letter-spacing:-0.01em;line-height:1.18;margin:4px 0 8px;text-wrap:balance;}
  h1 .hl{background:linear-gradient(100deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .lede{font-size:15px;color:var(--text-secondary);line-height:1.55;margin:0 0 26px;}

  .feature-strip{display:flex;gap:10px;margin-bottom:24px;}
  .feature-chip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 6px;}
  .feature-chip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent-2);}
  .feature-chip span{font-size:11px;font-weight:700;color:var(--text-secondary);line-height:1.3;}

  .choice-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:8px;}
  .choice-card{
    display:flex;align-items:center;gap:14px;text-align:left;appearance:none;cursor:pointer;
    background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);
    padding:20px;color:var(--text-primary);transition:border-color .15s ease,transform .12s ease;
  }
  .choice-card:active{transform:scale(0.98);}
  .choice-card:hover{border-color:rgba(69,130,190,0.4);}
  .choice-card .ic{width:46px;height:46px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(69,130,190,0.12);color:var(--accent-2);}
  .choice-card.primary .ic{background:rgba(194,89,72,0.14);color:var(--accent);}
  .choice-card svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .choice-card .cc-label{font-weight:700;font-size:16.5px;}
  .choice-card .cc-sub{font-size:13px;color:var(--text-muted);margin-top:2px;}
  .choice-card .chev{margin-left:auto;flex:none;color:var(--text-muted);}
  .choice-card .chev svg{width:16px;height:16px;}

  .back-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;font-size:13.5px;font-weight:700;color:var(--text-muted);background:none;border:none;padding:0;cursor:pointer;text-decoration:none;}
  .back-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
  .back-link:hover{color:var(--accent-2);}

  .field{margin-bottom:16px;}
  .field label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:7px;}
  .field input[type=text], .field input[type=date], .field select{width:100%;background:var(--bg-0);border:1.5px solid var(--border);border-radius:12px;padding:14px 15px;color:var(--text-primary);font-size:16px;font-family:inherit;outline:none;transition:border-color .15s ease;}
  .field input[type=text]:focus, .field input[type=date]:focus, .field select:focus{border-color:var(--accent-2);}
  .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;}
  .field .hint{font-size:12px;color:var(--text-muted);margin-top:6px;}

  .code-input{width:100%;background:var(--bg-0);border:1.5px solid var(--border);border-radius:12px;padding:16px;color:var(--text-primary);font-size:32px;font-weight:700;letter-spacing:0.3em;text-align:center;outline:none;font-variant-numeric:tabular-nums;}
  .code-input:focus{border-color:var(--accent-2);}

  .price-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;}
  .price-row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-secondary);padding:5px 0;}
  .price-row.total{border-top:1px solid var(--border);margin-top:6px;padding-top:11px;font-size:15.5px;font-weight:700;color:var(--text-primary);}
  .price-row .pv{font-variant-numeric:tabular-nums;font-weight:700;}
  .price-row.total .pv{color:var(--accent);}
  .placeholder-flag{font-size:11.5px;color:var(--text-muted);font-style:italic;margin-top:10px;}

  .btn{width:100%;appearance:none;border:none;cursor:pointer;font-weight:700;font-size:16.5px;padding:15px 18px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform 0.13s ease,filter 0.13s ease;}
  .btn-primary{background:linear-gradient(100deg,var(--accent),#d97a6b);color:#fff;box-shadow:0 14px 28px rgba(194,89,72,0.32);}
  .btn-primary:active{transform:scale(0.98);}
  .btn-primary:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none;}
  .btn-ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--text-primary);}

  .code-display{background:var(--surface);border:1.5px solid rgba(69,130,190,0.35);border-radius:var(--radius);padding:26px 20px;text-align:center;margin-bottom:20px;}
  .code-display .cd-label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
  .code-display .cd-code{font-size:52px;font-weight:700;letter-spacing:0.18em;color:var(--accent-2);font-variant-numeric:tabular-nums;line-height:1;}
  .code-display .cd-hint{font-size:13px;color:var(--text-muted);margin-top:12px;}
  .code-display--pending{border-color:var(--border);}
  .code-display--pending .cd-code--pending{color:var(--text-muted);}

  .status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
  .status-pill.active{background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border);}
  .status-pill.completed{background:rgba(76,175,125,0.12);color:var(--success);border:1px solid rgba(76,175,125,0.35);}

  .group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:10px;}
  .group-header h2{font-size:20px;font-weight:700;margin:0;}

  .roster{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px 18px;margin:18px 0;}
  .roster-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);}
  .roster-row:last-child{border-bottom:none;}
  .roster-row .av{width:32px;height:32px;border-radius:50%;flex:none;background:var(--surface-2);color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
  .roster-row .rn{font-weight:700;font-size:14.5px;}
  .roster-row .rn .leader-tag{font-size:11px;color:var(--text-muted);font-weight:500;margin-left:6px;}
  .roster-row .rn-dates{font-size:11.5px;font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums;}
  .roster-row .paid{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap;}
  .roster-row .paid.is-unpaid{color:var(--text-muted);}
  .roster-row .paid.is-paid{color:var(--success);}
  .roster-row .paid.is-delivered{color:var(--accent-2);}
  .roster-row .paid.is-returned{color:var(--text-muted);}
  .roster-empty-slot{padding:13px 0;color:var(--text-muted);font-size:13.5px;font-style:italic;}

  .progress-line{font-size:13.5px;color:var(--text-muted);margin:2px 0 0;}

  .fine{font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:14px;}

  .placeholder-card{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
    background:var(--surface);border:1.5px dashed var(--border);border-radius:var(--radius);
    padding:22px 18px;margin:18px 0;color:var(--text-muted);
  }
  .placeholder-card svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .placeholder-card .pc-label{font-size:13.5px;font-weight:700;color:var(--text-secondary);}
  .placeholder-card .pc-sub{font-size:12.5px;line-height:1.4;}

  .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 18px;font-size:13.5px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:20;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

  .hq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;}
  .hq-item .hq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;}
  .hq-item .hq-name{font-weight:700;font-size:15.5px;}
  .hq-item .hq-code{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-2);font-size:13.5px;}
  .hq-item .hq-meta{font-size:12.5px;color:var(--text-muted);margin:2px 0;}
  .hq-item .hq-members{margin-top:8px;border-top:1px solid var(--border);padding-top:8px;}
  .hq-member-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;}
  .hq-member-meta{font-size:12.5px;color:var(--text-secondary);}
  .hq-btn{flex:none;appearance:none;border:1.5px solid var(--border);background:var(--surface-2);color:var(--text-primary);font-weight:700;font-size:12px;padding:7px 12px;border-radius:9px;cursor:pointer;}
  .hq-btn.primary{border-color:var(--accent-2);color:var(--accent-2);}
  .hq-empty{color:var(--text-muted);font-size:14px;text-align:center;padding:40px 0;}

  [hidden]{display:none !important;}

  a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}

  @media (prefers-reduced-motion: reduce){
    .choice-card:active, .btn-primary:active{transform:none;}
  }