*{box-sizing:border-box}
  body{
    margin:0;background:#f6f3f0;color:#302a27;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif
  }
  button,
  select,
  input,
  textarea{
    font-family:inherit;
    color:#302a27;
  }
  button{
    -webkit-appearance:none;
    appearance:none;
  }
  .wrap{max-width:1240px;margin:28px auto;padding:0 20px}
  .card{
    background:#fff;border:1px solid #e4ddd8;border-radius:18px;
    padding:22px;box-shadow:0 8px 28px rgba(0,0,0,.05)
  }
  h1{font-size:24px;margin:0 0 5px}
  .hint{margin:0 0 20px;color:#786f69;font-size:14px}

  /* 款式預設 */
  .preset-title{font-weight:700;margin-bottom:9px}
  .preset-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:10px;margin-bottom:20px
  }
  .preset{
    padding:12px 10px;border:1px solid #d9d0ca;border-radius:12px;
    background:#fff;color:#302a27;cursor:pointer
  }
  .preset.active{border:2px solid #302a27;background:#f4efec;color:#302a27}
  .preset-name{display:block;font-weight:700;font-size:16px;color:#302a27}
  .preset-count{display:block;color:#7e746e;font-size:13px;margin-top:3px}

  /* 左右眼 */
  .eyes-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:18px;margin:8px 0 24px
  }
  .eye-panel{
    border:1px solid #e4ddd8;
    border-radius:15px;
    padding:14px;
    background:#fdfbf9;
    min-width:0
  }
  .eye-title{text-align:center;font-weight:800;font-size:18px;margin-bottom:8px}
  .eye-svg{height:150px}
  .eye-svg svg{width:100%;height:100%;overflow:visible}
  .arc{fill:none;stroke:#332d2a;stroke-width:4;stroke-linecap:round}
  .divider{stroke:#6e625c;stroke-width:2.2}
  .label{font-size:16px;text-anchor:middle;fill:#332d2a;font-weight:700}
  .length{font-size:13px;text-anchor:middle;fill:#746a64}

  .segments{
    display:grid;
    gap:8px;
    margin-top:8px;
    min-width:0
  }
  .segment{
    border:1px solid #e4ddd8;border-radius:10px;padding:9px;background:#fff;text-align:center
  }
  .segment-name{display:block;font-weight:700;font-size:13px;margin-bottom:4px}
  select{
    width:100%;padding:7px 5px;margin:3px 0;border:1px solid #d8cfca;
    border-radius:8px;background:#fff;color:#302a27;font-size:14px
  }
  .remove{
    width:100%;padding:6px;margin-top:4px;border:0;border-radius:7px;
    background:#f2ece8;color:#6f5f57;cursor:pointer;font-size:13px
  }
  .add-eye{
    width:100%;margin-top:9px;padding:9px;border:1px dashed #bfb3ac;
    border-radius:9px;background:#fff;color:#302a27;cursor:pointer
  }

  /* 紙本感欄位排列 */
  .record-table{
    border:1px solid #d8d0cb;border-radius:12px;overflow:hidden;margin-top:6px
  }
  .form-row{
    display:grid;grid-template-columns:130px 1fr 130px 1fr;
    min-height:54px;border-bottom:1px solid #ded7d2
  }
  .form-row:last-child{border-bottom:0}
  .form-label{
    display:flex;align-items:center;padding:10px 12px;font-weight:700;
    background:#f7f3f0;border-right:1px solid #ded7d2
  }
  .form-input{
    padding:9px 12px;border-right:1px solid #ded7d2;display:flex;align-items:center
  }
  .form-input:last-child{border-right:0}
  .form-input input,.form-input textarea{
    width:100%;
    border:1px solid #d7cfca;
    outline:0;
    background:#fff;
    border-radius:9px;
    font:inherit;
    color:#302a27;
    padding:9px 11px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.025);
  }
  .form-input input:focus,.form-input textarea:focus{
    border-color:#9f9189;
    box-shadow:0 0 0 2px rgba(120,105,96,.10);
  }
  .form-input textarea{min-height:78px;resize:vertical}
  .span-rest{grid-column:2 / -1;border-right:0}
  .full-row{grid-template-columns:130px 1fr}
  .full-row .form-input{border-right:0}

  .actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  .action{
    padding:11px 16px;border:1px solid #d6ccc6;border-radius:10px;
    background:#fff;color:#302a27;cursor:pointer;font-size:15px
  }
  .primary{background:#302a27;color:#fff;border-color:#302a27}
  pre{
    margin-top:15px;padding:13px;background:#f7f5f3;border-radius:10px;
    overflow:auto;font-size:12px
  }

  /* =========================
     RWD：平板
     768px ~ 1023px
     ========================= */
  @media (min-width:768px) and (max-width:1023px){
    .wrap{max-width:900px;margin:20px auto;padding:0 18px}
    .card{padding:20px}
    .eyes-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px
    }
    .eye-panel{padding:12px;min-width:0}
    .eye-svg{height:145px}
    /* 平板左右眼要同時看得到，因此各眼內的範圍控制改為兩欄，
       避免 4 個以上區段時把整個眼睛區塊撐得太寬。 */
    .segments{
      /* 平板：每個範圍約佔眼睛編輯區 30%，一列最多 3 個，三欄合計約 90%，整排置中。 */
      grid-template-columns:repeat(3,minmax(0,30%)) !important;
      justify-content:center;
    }
    .form-row{
      grid-template-columns:120px 1fr 120px 1fr
    }
  }

  /* =========================
     RWD：手機
     0px ~ 767px
     ========================= */
  @media (max-width:767px){
    body{background:#f2efec}
    .wrap{
      width:100%;
      margin:0;
      padding:0
    }
    .card{
      border:0;
      border-radius:0;
      padding:16px 12px 28px;
      box-shadow:none
    }
    h1{font-size:21px}
    .hint{font-size:13px;margin-bottom:16px}

    .preset-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px
    }
    .preset{
      min-height:64px;
      padding:10px 6px
    }
    .preset-name{font-size:15px}

    .eyes-grid{
      grid-template-columns:1fr;
      gap:14px;
      margin-bottom:18px
    }
    .eye-panel{
      padding:12px 10px;
      border-radius:13px;
      overflow:hidden
    }
    .eye-title{font-size:17px}
    .eye-svg{
      height:135px;
      margin:0 -2px
    }

    /* 手機上的施作範圍改為兩欄，避免 4~5 區被硬壓成一排 */
    .segments{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:8px
    }
    .segment{padding:8px 7px}
    select{
      min-height:40px;
      font-size:16px; /* iPhone 避免點選欄位時自動放大 */
    }
    .remove,.add-eye{
      min-height:40px
    }

    /* 手機不再硬塞紙本四欄，而改成 label 在上、輸入框在下 */
    .record-table{
      border:0;
      overflow:visible
    }
    .form-row,
    .full-row{
      display:block;
      min-height:0;
      border:0
    }
    .form-label{
      display:block;
      padding:9px 2px 5px;
      background:transparent;
      border:0;
      font-size:14px
    }
    .form-input,
    .form-input:last-child{
      display:block;
      padding:0 0 8px;
      border:0
    }
    .form-input input,
    .form-input textarea{
      min-height:44px;
      font-size:16px
    }
    .form-input textarea{min-height:100px}

    .actions{
      display:block;
      margin-top:14px
    }
    .action{
      width:100%;
      min-height:46px
    }
    pre{font-size:11px}
  }

  /* =========================
     RWD：小尺寸手機
     ========================= */
  @media (max-width:380px){
    .card{padding-left:9px;padding-right:9px}
    .eye-panel{padding-left:8px;padding-right:8px}
    .segments{gap:6px}
    .segment{padding-left:5px;padding-right:5px}
  }

  #amount,
  #note{
    display:block;
    width:100%;
    max-width:none;
  }

  .form-input input::placeholder,
  .form-input textarea::placeholder{
    color:#a79d97;
    opacity:1;
  }



  .roc-date-wrap{
    position:relative;
    width:100%;
    display:flex;
    gap:7px;
  }
  .roc-date-input{
    flex:1;
    cursor:pointer;
  }
  .calendar-button{
    width:42px;
    min-width:42px;
    border:1px solid #d7cfca;
    border-radius:9px;
    background:#fff;
    color:#4a413d;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
  .calendar-icon{
    width:20px;
    height:20px;
    display:block;
  }
  .roc-calendar{
    position:absolute;
    z-index:50;
    top:calc(100% + 7px);
    left:0;
    width:310px;
    max-width:calc(100vw - 36px);
    padding:12px;
    border:1px solid #d7cfca;
    border-radius:13px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.14);
  }
  .calendar-header{
    display:grid;
    grid-template-columns:38px 1fr 38px;
    align-items:center;
    gap:6px;
    margin-bottom:10px;
  }
  .calendar-title{
    text-align:center;
    font-weight:800;
    font-size:16px;
  }
  .calendar-nav{
    height:36px;
    border:0;
    border-radius:8px;
    background:#f4efec;
    color:#302a27;
    cursor:pointer;
    font-size:24px;
    line-height:1;
  }
  .calendar-week,.calendar-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
  }
  .calendar-week{
    margin-bottom:4px;
    color:#8b8079;
    font-size:12px;
    text-align:center;
  }
  .calendar-week span{padding:5px 0}
  .calendar-day{
    aspect-ratio:1;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#302a27;
    cursor:pointer;
    font-size:14px;
  }
  .calendar-day:hover{background:#f4efec}
  .calendar-day.selected{
    background:#302a27;
    color:#fff;
    font-weight:700;
  }
  .calendar-day.today:not(.selected){
    outline:1px solid #9f9189;
  }
  .calendar-empty{aspect-ratio:1}
  .today-button{
    width:100%;
    margin-top:9px;
    padding:8px;
    border:1px solid #d7cfca;
    border-radius:8px;
    background:#fff;
    color:#302a27;
    cursor:pointer;
  }
  @media(max-width:767px){
    .roc-calendar{
      width:min(330px,calc(100vw - 24px));
    }
    .calendar-day{min-height:38px;font-size:16px}
    .calendar-button{min-height:44px}
  }


  .record-header{
    width:100%;
    margin-bottom:20px;
  }
  .record-title{
    margin:0;
    padding:4px 0 14px;
    text-align:center;
    font-size:30px;
    font-weight:700;
    letter-spacing:.18em;
    color:#302a27;
  }
  .dashed-separator{
    width:60%;
    margin-left:auto;
    margin-right:auto;
    border-top:1.5px dashed #b9aaa2;
  }
  .customer-row{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:0 10px;
    font-size:17px;
    color:#302a27;
    text-align:center;
  }
  .customer-label{
    font-weight:700;
    white-space:nowrap;
  }
  .customer-name{
    min-width:120px;
    padding:5px 8px;
    font-weight:600;
  }
  @media(max-width:767px){
    .record-title{
      font-size:25px;
      padding-bottom:12px;
    }
    .customer-row{
      min-height:50px;
      padding:0 4px;
      font-size:16px;
    }
  }


  .range-order-hint{
    margin-top:2px;
    margin-bottom:8px;
    text-align:center;
    font-size:10px;
    font-weight:400;
    color:#aaa;
  }