:root{
    --pitch-dark:#08331e;
    --pitch-mid:#0f4a2a;
    --paper:#fffdf6;
    --ink:#0a2e1c;
    --ink-soft:#5c7566;
    --coral:#FF4438;
    --sky:#17AEE8;
    --amber:#FFB800;
    --lime:#3ED67A;
    --violet:#8B5CF6;
    --card:#ffffff;
    --shadow: 5px 5px 0 var(--ink);
    --shadow-sm: 3px 3px 0 var(--ink);
    --radius: 20px;
    font-family: "Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      repeating-linear-gradient(
        100deg,
        var(--pitch-dark) 0px, var(--pitch-dark) 64px,
        var(--pitch-mid) 64px, var(--pitch-mid) 128px
      );
    color: var(--ink);
    min-height:100vh;
    padding: 28px 16px 60px;
  }
  .wrap{ max-width: 860px; margin: 0 auto; overflow-x:hidden; }

  header{
    display:flex; align-items:center; gap:18px;
    margin-bottom: 26px;
    color:#fff;
  }
  .badge{
    width:58px;height:74px;border-radius:14px;
    background:#fff; border:3px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    flex-shrink:0; box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
    transform: rotate(-6deg);
  }
  .badge img{ width:100%; height:100%; object-fit:cover; }
  header h1{
    font-size: 22px; margin:0; letter-spacing:0.02em; font-weight:700;
  }
  header p{
    margin:5px 0 0; font-size:13px; color:rgba(255,255,255,0.8); font-weight:500;
  }

  .card{
    background: var(--card);
    border-radius: var(--radius);
    border: 3px solid var(--ink);
    box-shadow: var(--shadow);
    padding: 22px 22px 26px;
    margin: 0 3px 26px;
  }
  .card h2{
    font-family:"Zen Maru Gothic",sans-serif;
    font-size:16px; margin:0 0 14px; font-weight:700;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .pill{
    display:inline-block; padding:4px 14px; border-radius:999px;
    color:#fff; font-size:12px; font-weight:900; letter-spacing:0.03em;
    white-space:nowrap; flex-shrink:0;
    border:2px solid var(--ink); font-family:"Zen Maru Gothic",sans-serif;
  }
  .pill-line{color:#fff; padding:3px 12px;background:#06C755;}
  .pill-ai{background:var(--sky);}
  .pill-form{background:var(--coral);}
  .pill-result{background:var(--lime); color:#0a2e1c;}
  .pill-reply{background:var(--amber); color:#0a2e1c;}

  textarea{
    width:100%; min-height:110px; resize:vertical;
    border:2px solid var(--ink); border-radius:14px;
    padding:12px 14px; font-size:16px; line-height:1.6;
    font-family:inherit; color:var(--ink);
    background:#fbfcfa;
  }
  textarea:focus, select:focus, input:focus{ outline:3px solid var(--amber); outline-offset:1px; }

  .btn{
    appearance:none; cursor:pointer;
    border:2.5px solid var(--ink); border-radius:999px; padding:11px 22px;
    font-size:14px; font-weight:900; font-family:"Zen Maru Gothic",sans-serif;
    display:inline-flex; align-items:center; gap:8px;
    box-shadow: var(--shadow-sm);
    transition: transform .1s ease, box-shadow .1s ease;
  }
  .btn:active{ transform: translate(3px,3px); box-shadow:0 0 0 var(--ink); }
  .btn-primary{ background: var(--coral); color:#fff; }
  .btn-secondary{ background: var(--sky); color:#fff; }
  .btn-ghost{ background:#eef2ed; color: var(--ink); }
  .btn:disabled{ opacity:0.5; cursor:not-allowed; }

  .spinner{
    display:inline-block; width:14px; height:14px;
    border:2.5px solid rgba(255,255,255,0.5); border-top-color:#fff;
    border-radius:50%; animation: spin .7s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  .row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

  .status{ font-size:13px; margin-top:10px; color: var(--ink-soft); min-height:18px; font-weight:500; }
  .status.err{ color:var(--coral); font-weight:800; }
  .status.success{
    background:#eafff2; border:2.5px solid var(--lime); color:#0a2e1c;
    border-radius:14px; padding:12px 14px; font-size:14px; font-weight:800; line-height:1.6;
  }

  .grid{
    display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;
    margin-top: 6px;
  }
  @media (max-width:560px){ .grid{ grid-template-columns: 1fr; } }

  .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .field label{ font-size:12.5px; font-weight:800; color: var(--ink-soft); }
  select, input[type=number], input[type=text], input[type=date], input[type=time]{
    border:2px solid var(--ink); border-radius:12px; padding:9px 10px;
    font-size:16px; background:#fbfcfa; color:var(--ink); font-family:inherit; font-weight:600;
    width:100%; max-width:100%; min-width:0;
  }
  .input-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .input-row input{ flex:1; min-width:100px; }


  .plan-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
  .plan-tab{
    padding:9px 16px; border-radius:999px; font-size:13px; font-weight:800;
    background:#eef2ed; color:var(--ink-soft); cursor:pointer; border:2px solid var(--ink);
    font-family:"Zen Maru Gothic",sans-serif;
  }
  .plan-tab.active{ background:var(--amber); color:var(--ink); box-shadow: var(--shadow-sm); }

  .plan-section{ display:none; }
  .plan-section.active{ display:block; }

  .breakdown{ margin-top:8px; }
  .line{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0; border-bottom:2px dashed #d8e2da; font-size:14px; font-weight:600;
  }
  .line .amt{ font-weight:800; }
  .line small{ display:block; color:var(--ink-soft); font-weight:500; font-size:11.5px; margin-top:2px;}
  .line-sub{
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0 6px 18px; border-bottom:1px dashed #e5ece6; font-size:12.5px; font-weight:700; color:var(--ink-soft);
  }
  .line-sub .amt{ font-weight:800; color:var(--ink); }
  .total-line{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:16px; padding:14px 18px;
    background: var(--amber); border:3px solid var(--ink); border-radius:16px;
    transform: rotate(-1deg);
    box-shadow: var(--shadow-sm);
  }
  .total-line .label{ font-size:14px; font-weight:800; font-family:"Zen Maru Gothic",sans-serif; }
  .total-line .amt{ font-size:30px; font-weight:900; color:var(--coral); font-family:"Zen Maru Gothic",sans-serif; text-shadow: 2px 2px 0 rgba(255,255,255,0.5);}

  .note{
    background:#fff6ea; border:2px solid var(--amber); color:#7a5218;
    border-radius:14px; padding:10px 12px; font-size:12.5px; margin-top:14px; line-height:1.6; font-weight:500;
  }

  .reply-box textarea{ min-height:170px; background:#f7fbf3; border-color:var(--ink); }
  .copy-msg{ font-size:12.5px; color: var(--lime); font-weight:800; margin-left:6px; }

  footer{ text-align:center; color:rgba(255,255,255,0.6); font-size:11.5px; margin-top:20px; font-weight:500; }