:root { 
    --bg:#EEE9E0; --card:#ffffff; --text:#1a202c; --muted:#4a5568; --line:#e2e8f0;
    --accent:#111111; --accent-contrast:#ffffff; --link:#2563eb;
  }
  * { box-sizing: border-box; }
  html, body { height:100%; }
  body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial; background:var(--bg); color:var(--text); }
  .wrap { max-width: 1000px; margin: 32px auto; padding: 0 20px; }
  .card { background: var(--card); border:1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
  .row { display:flex; gap:20px; flex-wrap: wrap; }
  .col { flex:1 1 280px; }
  h1 { font-size: 28px; line-height:1.2; margin:0 0 4px; letter-spacing:-0.01em; }
  .muted { color: var(--muted); }
   .logo { width: 104px; height: 104px; border-radius: 16px; border:1px solid var(--line); background:#f8fafc; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .logo img { width: 100%; height: 100%; object-fit: contain; }
  .divider { height:1px; background:var(--line); margin: 20px 0; }
  .grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; }
  @media (max-width: 780px) { .grid { grid-template-columns: repeat(6, 1fr); } }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    width: 100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:14px; outline:none; background:#fff;
  }
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(37,99,235,.08); border-color:#cbd5e1; }
  .products { border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .product { display:grid; grid-template-columns: 48px 1fr 140px 112px 140px; gap:14px; align-items:center; padding:14px; border-top:1px solid var(--line); }
  .product:first-child { border-top:none; }
  .right { text-align:right; }
  .totals { background:#f8fafc; border:1px solid var(--line); border-radius:16px; padding:14px 18px; }
  .totals .row { justify-content: space-between; }
  .btn { appearance:none; border: none; background: var(--accent); color:var(--accent-contrast); padding:12px 18px; border-radius:999px; font-weight:600; cursor:pointer; box-shadow: 0 10px 24px rgba(17,17,17,.18); transition: transform .02s ease-in-out, box-shadow .2s; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(17,17,17,.22); }
  .btn[disabled] { opacity:.5; cursor: not-allowed; box-shadow:none; transform:none; }
  .btn.sec { background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none; }
  .footnote { font-size:12px; color:var(--muted); }
  .label { font-size: 13px; font-weight:600; margin-bottom:6px; }
  .hint { font-size:12px; color:var(--muted); }
  a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

  /* Modal */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display:none; align-items: center; justify-content: center; z-index: 50; }
  .modal { width: min(680px, 92vw); background: #fff; border:1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  .modal h3 { margin: 0 0 8px; font-size: 18px; }
  .modal textarea { width: 100%; min-height: 160px; border:1px solid var(--line); border-radius:12px; padding: 12px; font-family: inherit; font-size:14px; }
  .modal .actions { display:flex; gap:12px; justify-content:flex-end; margin-top: 12px; }