:root {
      --teal:          #2ab4b4;
      --teal-dark:     #1e8f8f;
      --teal-light:    #eaf8f8;
      --teal-border:   #9dd8d8;
      --amber:         #c97d1a;
      --amber-dark:    #a06010;
      --amber-light:   #fdf4e7;
      --amber-border:  #e5bb7a;
      --navy:          #0d2233;
      --navy-mid:      #1a3a4a;
      --text:          #1c2d3a;
      --text-muted:    #607080;
      --text-faint:    #9aabb8;
      --border:        #ccdae4;
      --bg:            #f0f4f7;
      --bg-card:       #ffffff;
      --radius-sm:     6px;
      --radius:        12px;
      --radius-lg:     18px;
      --shadow-sm:     0 1px 4px rgba(13,34,51,.08);
      --shadow:        0 3px 14px rgba(13,34,51,.10);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.5;
    }

    /* ── Header ── */
    .app-header {
      background: var(--navy);
      padding: 0 32px;
      height: 58px;
      display: flex;
      align-items: center;
      gap: 13px;
    }
    .logo-mark {
      width: 30px; height: 30px;
      background: var(--teal);
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 12px; color: var(--navy);
      letter-spacing: -.5px; flex-shrink: 0;
    }
    .app-header h1 { font-size: 15px; font-weight: 600; color: #fff; }
    .app-header .sub { font-size: 13px; color: rgba(255,255,255,.40); margin-left: 2px; }

    /* ── Layout ── */
    .app-main { max-width: 680px; margin: 36px auto; padding: 0 20px 64px; }

    /* ── Status bar ── */
    .status-bar { display: flex; gap: 12px; margin-bottom: 26px; }
    .status-pill {
      flex: 1; background: var(--bg-card);
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 14px 18px; display: flex; align-items: center;
      gap: 12px; box-shadow: var(--shadow-sm);
      transition: opacity .3s;
    }
    .status-pill.gls  { border-left: 4px solid var(--teal); }
    .status-pill.bt   { border-left: 4px solid var(--amber); }
    .status-pill.dim  { opacity: .55; }
    .pill-icon {
      width: 36px; height: 36px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; flex-shrink: 0;
    }
    .status-pill.gls .pill-icon { background: var(--teal-light); }
    .status-pill.bt  .pill-icon { background: var(--amber-light); }
    .pill-label {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .6px; color: var(--text-muted);
    }
    .pill-number {
      font-family: 'DM Mono', monospace; font-size: 17px; font-weight: 500;
    }
    .status-pill.gls .pill-number { color: var(--teal-dark); }
    .status-pill.bt  .pill-number { color: var(--amber-dark); }
    .pill-number.loading { font-family: 'DM Sans',sans-serif; font-size:13px; color: var(--text-faint); }

    /* ── Card ── */
    .form-card {
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
    }

    /* ── Type selector ── */
    .type-selector { display: grid; grid-template-columns: 1fr 1fr; }
    .type-opt {
      padding: 22px 26px 20px; cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background .15s; position: relative; user-select: none;
    }
    .type-opt:first-child { border-right: 1px solid var(--border); }
    .type-opt input[type=radio] { display: none; }
    .type-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .7px; padding: 3px 9px; border-radius: 100px; margin-bottom: 7px;
    }
    .type-opt.gls .type-badge { background: var(--teal-light);  color: var(--teal-dark); }
    .type-opt.bt  .type-badge { background: var(--amber-light); color: var(--amber-dark); }
    .type-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
    .type-desc  { font-size: 12px; color: var(--text-muted); }
    .type-check {
      position: absolute; top: 18px; right: 18px;
      width: 22px; height: 22px; border-radius: 50%;
      border: 2px solid var(--border); background: var(--bg);
      transition: all .15s; display: flex; align-items: center; justify-content: center;
    }
    .type-opt:hover { background: #f6f9fc; }
    .type-opt.gls.sel { background: var(--teal-light); }
    .type-opt.gls.sel .type-check { background: var(--teal);  border-color: var(--teal); }
    .type-opt.bt.sel  { background: var(--amber-light); }
    .type-opt.bt.sel  .type-check { background: var(--amber); border-color: var(--amber); }
    .type-check svg   { display: none; }
    .type-opt.sel .type-check svg { display: block; }

    /* ── Form body ── */
    .form-body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 20px; }
    .field-group { display: flex; flex-direction: column; gap: 6px; }
    .field-label {
      font-size: 13px; font-weight: 600; color: var(--text);
      display: flex; align-items: center; gap: 6px;
    }
    .opt-tag {
      font-weight: 400; font-size: 11px; color: var(--text-muted);
    }

    select, input[type=number], textarea {
      font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: var(--radius-sm); padding: 10px 13px; width: 100%;
      transition: border-color .15s, box-shadow .15s; outline: none;
      appearance: none; -webkit-appearance: none;
    }
    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23607080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
    }
    select:focus, input[type=number]:focus, textarea:focus {
      border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,180,180,.12);
    }
    textarea { resize: vertical; min-height: 78px; }

    /* qty row */
    .qty-wrap {
      display: flex; align-items: center;
      border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      background: var(--bg); width: fit-content;
    }
    .qty-btn {
      width: 40px; height: 42px; background: none; border: none;
      cursor: pointer; font-size: 20px; color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      transition: background .1s, color .1s; line-height: 1;
    }
    .qty-btn:hover { background: var(--border); color: var(--text); }
    .qty-num {
      font-family: 'DM Mono', monospace; font-size: 16px; font-weight: 500;
      width: 54px; text-align: center; border: none; background: none; outline: none; padding: 0;
      color: var(--text);
    }
    .qty-hint { font-size: 12px; color: var(--text-muted); }

    /* ── Preview button ── */
    .btn-preview {
      width: 100%; height: 50px; background: var(--navy); color: #fff;
      border: none; border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
      cursor: pointer; transition: background .15s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-preview:hover { background: var(--navy-mid); }
    .btn-preview:disabled { background: var(--border); color: var(--text-faint); cursor: not-allowed; }

    /* ── Preview panel ── */
    .preview-header { padding: 26px 30px 4px; }
    .preview-header h2 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
    .preview-header p  { font-size: 13px; color: var(--text-muted); }
    .preview-meta {
      padding: 14px 30px; display: flex; flex-wrap: wrap; gap: 7px;
    }
    .meta-chip {
      background: var(--bg); border: 1px solid var(--border); border-radius: 100px;
      padding: 5px 12px; font-size: 12px; display: flex; align-items: center; gap: 4px;
    }
    .meta-chip .mc-label { color: var(--text-muted); }
    .meta-chip .mc-val   { color: var(--text); font-weight: 600; }
    .divider { height: 1px; background: var(--border); margin: 0 30px; }
    .preview-numbers { padding: 20px 30px 4px; }
    .section-label {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .6px; color: var(--text-muted); margin-bottom: 10px;
    }
    .numbers-grid { display: flex; flex-wrap: wrap; gap: 6px; }
    .t-chip {
      font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500;
      padding: 5px 11px; border-radius: var(--radius-sm); border: 1px solid;
    }
    .t-chip.gls { background: var(--teal-light);  border-color: var(--teal-border);  color: var(--teal-dark); }
    .t-chip.bt  { background: var(--amber-light); border-color: var(--amber-border); color: var(--amber-dark); }
    .preview-notes { padding: 16px 30px 4px; }
    .notes-box {
      font-size: 13px; color: var(--text); background: var(--bg);
      border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px;
    }
    .preview-warning {
      margin: 14px 30px 0;
      background: #fffbee; border: 1px solid #f0d880; color: #7a5a00;
      border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px;
      display: flex; align-items: flex-start; gap: 8px;
    }
    .preview-actions { padding: 22px 30px 28px; display: flex; gap: 10px; }
    .btn-back {
      height: 48px; padding: 0 20px; background: none;
      border: 1.5px solid var(--border); border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
      color: var(--text-muted); cursor: pointer; transition: border-color .15s, color .15s;
      flex-shrink: 0;
    }
    .btn-back:hover { border-color: var(--text-muted); color: var(--text); }
    .btn-submit {
      flex: 1; height: 48px; border: none; border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700;
      cursor: pointer; transition: background .15s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-submit.gls { background: var(--teal);  color: #fff; }
    .btn-submit.gls:hover { background: var(--teal-dark); }
    .btn-submit.bt  { background: var(--amber); color: #fff; }
    .btn-submit.bt:hover  { background: var(--amber-dark); }
    .btn-submit:disabled { opacity: .6; cursor: not-allowed; }

    /* ── Success ── */
    .success-panel {
      padding: 42px 30px; text-align: center; display: flex;
      flex-direction: column; align-items: center; gap: 0;
    }
    .success-icon {
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
    }
    .success-icon.gls  { background: var(--teal-light); }
    .success-icon.bt   { background: var(--amber-light); }
    .success-panel h2  { font-size: 20px; font-weight: 700; margin-bottom: 5px; }
    .success-panel p   { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; }
    .success-grid      { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 30px; }
    .btn-another {
      height: 46px; padding: 0 28px; background: var(--navy); color: #fff;
      border: none; border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
      cursor: pointer; transition: background .15s;
    }
    .btn-another:hover { background: var(--navy-mid); }

    /* ── Notices ── */
    .notice {
      padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px;
      display: flex; align-items: flex-start; gap: 8px;
    }
    .notice.err { background: #fff0f0; border: 1px solid #f5c0c0; color: #b00; }

    /* spinner */
    .spin {
      display: inline-block; width: 16px; height: 16px;
      border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
      border-radius: 50%; animation: spin .65s linear infinite; flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .app-footer {
      text-align: center; padding: 18px;
      font-size: 11px; color: var(--text-faint); letter-spacing: .3px;
    }