* { box-sizing: border-box; margin: 0; padding: 0; }
    :root{
      --primary:#1e3a8a;
      --primary-soft:#dbeafe;
      --text:#1f2937;
      --muted:#64748b;
      --line:#dbe3ef;
      --bg:#f5f5f7;
      --card:#ffffff;
      --warning-bg:#dbeafe;
      --warning-text:#1e3a8a;
      --accent:#d4af37;
      --accent-hover:#c49b1f;
      --header-start:#1e3a8a;
      --header-end:#1d4ed8;
    }
    body{
      font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    a{ text-decoration:none; color:inherit; }

    .page{
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }

    .topbar{
      background: linear-gradient(135deg, #172554 , #2a45a0 );
      border-bottom:1px solid var(--line);
      padding:18px 28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }

    .brand{
      font-weight:800;
      font-size:26px;
      letter-spacing:0.01em;
      color: white;
    }

    .home-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 16px;
      border-radius:999px;
      background: var(--accent);
      color:#fff;
      font-weight:700;
    }

    .hero{
      width:min(860px, calc(100% - 24px));
      margin:48px auto 28px;
      text-align:center;
    }

    .hero h1{
      font-size:48px;
      margin-bottom:12px;
      line-height:1.15;
    }

    .hero p{
      color:var(--muted);
      font-size:18px;
      line-height:1.6;
    }

    .stepper{
      width:min(560px, 100%);
      margin:34px auto 0;
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:0;
      align-items:start;
      position:relative;
    }

    .stepper::before{
      content:"";
      position:absolute;
      left:11%;
      right:11%;
      top:18px;
      height:2px;
      background:var(--line);
      z-index:0;
    }

    .step{
      position:relative;
      z-index:1;
      text-align:center;
    }

    .step-circle{
      width:38px;
      height:38px;
      margin:0 auto 10px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      background:#e5e7eb;
      color:#6b7280;
    }

    .step.active .step-circle{
      background:var(--primary);
      color:#fff;
      box-shadow:0 8px 18px rgba(23,101,216,.18);
    }

    .step-label{
      font-size:12px;
      font-weight:700;
      letter-spacing:.08em;
      color:#6b7280;
    }

    .step.active .step-label{
      color:var(--primary);
    }

    .card{
      width:min(720px, calc(100% - 24px));
      margin:34px auto 22px;
      background:var(--card);
      border-radius:28px;
      padding:34px;
      box-shadow:0 14px 40px rgba(15, 23, 42, 0.08);
    }

    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .field.full{
      grid-column:1 / -1;
    }

    .label{
      font-size:14px;
      font-weight:700;
      color:#4b5563;
      letter-spacing:.03em;
      text-transform:uppercase;
    }

    .input, .textarea{
      width:100%;
      border:none;
      outline:none;
      background:#f3f4f6;
      border-radius:16px;
      padding:12px 14px;
      font-size:15px;
      color:var(--text);
    }

    .input:focus, .textarea:focus{
      box-shadow:0 0 0 2px rgba(23,101,216,.22);
      background:#fff;
    }

    .textarea{
      min-height:150px;
      resize:vertical;
      font-family: inherit;
      line-height:1.5;
    }

    .choice-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }

    .people-choice-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
      width: 100%;
    }

    .choice{
      position:relative;
    }

    .choice input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }

    .choice-box{
      border:2px solid transparent;
      background:#f3f4f6;
      border-radius:16px;
      padding:12px 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-size:15px;
      font-weight:700;
      color:#374151;
      cursor:pointer;
      transition:.18s ease;
    }

    .choice input:checked + .choice-box{
      border-color:var(--primary);
      background:var(--primary-soft);
      color:var(--primary);
    }

    .actions{
      margin-top:28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    .btn-link{
      border:none;
      background:transparent;
      color:#4b5563;
      font-size:18px;
      font-weight:700;
      cursor:pointer;
    }

    .btn-submit{
      border:none;
      background:var(--accent);
      color:#fff;
      font-size:18px;
      font-weight:700;
      padding:18px 28px;
      border-radius:999px;
      cursor:pointer;
      min-width:220px;
      box-shadow:0 10px 22px rgba(30,58,138,.22);
    }

    .btn-submit:hover,
    .home-link:hover{
      opacity:.92;
    }

    .tip{
      width:min(720px, calc(100% - 24px));
      margin:0 auto 48px;
      background:var(--warning-bg);
      color:var(--warning-text);
      border-radius:18px;
      padding:20px 22px;
      display:flex;
      gap:14px;
      align-items:flex-start;
    }

    .tip-icon{
      font-size:22px;
      line-height:1;
      margin-top:2px;
    }

    .tip strong{
      display:block;
      margin-bottom:6px;
      font-size:19px;
    }

    .footer{
      margin-top:auto;
      padding:28px 20px;
      border-top:1px solid var(--line);
      text-align:center;
      color:#172554;
      background:#fff;
      font-size:14px;
      width: 100%;
    }
    .subject-categories{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap:14px;
    }

    .subject-card{
      border:2px solid transparent;
      background:#f3f4f6;
      border-radius:16px;
      padding:12px 14px;
      text-align:center;
      cursor:pointer;
      transition:.18s ease;
      font-weight:700;
      color:#374151;
      user-select:none;
    }

    .subject-card:hover{
      transform:translateY(-2px);
    }

    .subject-card.active{
      border-color:var(--primary);
      background:var(--primary-soft);
      color:var(--primary);
    }

    .subject-icon{
      font-size:26px;
      margin-bottom:8px;
    }

    .subject-name{
      font-size:15px;
    }

    .custom-footer {
      background: #172554 !important;
      color: #fff;
      padding: 20px 30px;
    }

    .footer-content p {
      margin: 8px 0;
      font-size: 15px;
      line-height: 1.5;
    }

    .footer-content a {
      color: #fff;
      text-decoration: none;
    }

    .footer-content a:hover {
      text-decoration: underline;
    }

    @media (max-width: 768px) {
      .topbar {
        padding: 14px 16px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
      }

      .brand {
        font-size: 24px;
      }

      .home-link {
        padding: 8px 14px;
        font-size: 14px;
        white-space: nowrap;
      }

      .hero {
        width: min(100%, calc(100% - 20px));
        margin: 20px auto;
        text-align: center;
        min-width: 0;
      }

      .card {
        width: 100%;
        max-width: 100%;
        margin: 18px auto;
        padding: 20px 12px;
        border-radius: 20px;
        overflow: hidden;
      }

      .tip {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 18px;
        padding: 16px 14px;
        border-radius: 16px;
        text-align: left;
        min-width: 0;
      }

      .hero h1 {
        font-size: 28px;
        line-height: 1.25;
      }

      .hero p {
        font-size: 15px;
        line-height: 1.5;
      }

      .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .field,
      .field.full {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .label {
        font-size: 13px;
        line-height: 1.4;
      }

      .input,
      .textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: block;
        padding: 14px;
        font-size: 16px;
        border-radius: 14px;
      }

      .choice-row,
      .people-choice-row {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .choice {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .choice-box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 64px;
        font-size: 16px;
        border-radius: 14px;
      }

      .subject-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .subject-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 14px 10px;
        border-radius: 14px;
      }

      .subject-icon {
        font-size: 22px;
        margin-bottom: 6px;
      }

      .subject-name {
        font-size: 14px;
      }

      .actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
        width: 100%;
      }

      .btn-link,
      .btn-submit {
        width: 100%;
        max-width: 100%;
        text-align: center;
      }

      .btn-submit {
        min-width: 0;
        padding: 15px 18px;
        font-size: 17px;
      }

      .schedule-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 14px;
        overflow-x: auto;
      }

      .schedule-table {
        min-width: 720px;
      }

      .footer {
        padding: 20px 14px;
      }
    }
/* ===== Mobile polish by ChatGPT ===== */
@media (max-width: 640px) {
  html, body { width: 100%; overflow-x: hidden; }
  .topbar { padding: 12px 14px; gap: 12px; }
  .brand { font-size: 24px; }
  .home-link { width: 100%; padding: 12px 14px; }
  .hero { width: 100%; margin: 22px auto 18px; padding: 0 12px; }
  .card, .tip { width: 100%; margin: 0 auto 16px; border-radius: 22px; padding: 20px 16px; }
  .hero h1, .card h1 { font-size: 28px; line-height: 1.18; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .field, .field.full { grid-column: 1 / -1; min-width: 0; }
  .input, .textarea, select.input { min-width: 0; width: 100%; font-size: 16px; padding: 14px; border-radius: 14px; }
  .address-row, .custom-subject-add, .level-select-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-gps, .btn-add-subject { width: 100%; justify-content: center; }
  .choice-row, .people-choice-row, .mode-row { grid-template-columns: 1fr; flex-direction: column; gap: 10px; }
  .choice-box, .mode-option { width: 100%; min-height: 56px; }
  .subject-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .subject-card { padding: 13px 8px; border-radius: 14px; }
  .pill-list { gap: 8px; }
  .pill-option span { width: 100%; padding: 12px 14px; }
  .schedule-wrap { border-radius: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .schedule-table { min-width: 720px; font-size: 13px; }
  .schedule-table th, .schedule-table td { padding: 10px 6px; }
  .schedule-legend { font-size: 13px; }
  .actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .btn-submit, .btn-link { width: 100%; min-width: 0; text-align: center; }
  .custom-footer { padding: 18px 14px; margin-top: 18px; }
  .footer-content p { font-size: 13px; overflow-wrap: anywhere; }
}