:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #172033;
  background: #f4f7fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #dfeaff 0, transparent 36%), #f4f7fb; }
button, input, textarea { font: inherit; }

.page-shell { width: min(760px, 100%); margin: 0 auto; padding: 28px 18px calc(32px + env(safe-area-inset-bottom)); }
.menu-toggle { position: fixed; z-index: 20; top: 18px; right: 18px; width: 42px; height: 42px; border: 1px solid #dce2ed; border-radius: 13px; color: #345ac7; background: #ffffffee; box-shadow: 0 8px 22px #26385d18; cursor: pointer; font-size: 20px; }
.side-drawer { position: fixed; z-index: 30; top: 0; right: 0; width: min(290px, 86vw); height: 100vh; padding: 24px 18px; transform: translateX(105%); transition: transform .22s ease; background: #fff; box-shadow: -18px 0 48px #26385d26; }
.side-drawer.open { transform: translateX(0); }
.drawer-backdrop { position: fixed; z-index: 25; inset: 0; background: #17203355; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-size: 19px; }
.drawer-head button { border: 0; color: #66738b; background: transparent; font-size: 28px; cursor: pointer; }
.drawer-item { display: block; margin: 8px 0; padding: 13px 14px; border-radius: 12px; color: #34415b; text-decoration: none; font-weight: 750; background: #f4f7fb; }
.drawer-item.active { color: #fff; background: linear-gradient(135deg, #3267ec, #6657dc); }
.drawer-note { margin-top: 24px; color: #7a869c; font-size: 13px; line-height: 1.7; }
.project-context { display: flex; align-items: center; gap: 9px; margin: -2px 0 18px; padding: 10px 12px; border: 1px solid #e0e6f0; border-radius: 12px; color: #67738b; font-size: 13px; background: #f8faff; }
.project-context strong { color: #34415b; }
.project-context .button { margin-left: auto; padding: 7px 10px; font-size: 12px; }
.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.brand-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #fff; font-size: 25px; font-weight: 800; background: linear-gradient(145deg, #3267ec, #6b5be7); box-shadow: 0 12px 28px #345ed034; }
.eyebrow { color: #64718d; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
h1 { margin: 3px 0 2px; font-size: clamp(25px, 6vw, 34px); }
.hero p { margin: 0; color: #67738b; }

.card { padding: 24px; border: 1px solid #e0e6f0; border-radius: 24px; background: #ffffffed; box-shadow: 0 18px 55px #26385d14; backdrop-filter: blur(10px); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: 1fr 1fr; }
label { display: grid; gap: 7px; margin-bottom: 16px; }
label span { color: #46526a; font-size: 14px; font-weight: 700; }
label b { color: #e34d59; }
input, textarea { width: 100%; border: 1px solid #dce2ed; border-radius: 13px; padding: 13px 14px; color: #172033; background: #fbfcfe; outline: none; transition: .2s ease; }
input:focus, textarea:focus { border-color: #5578e8; box-shadow: 0 0 0 4px #5578e81a; background: #fff; }
textarea { resize: vertical; }

.picker { display: grid; place-items: center; gap: 5px; min-height: 160px; padding: 22px; border: 2px dashed #bdc9df; border-radius: 18px; text-align: center; cursor: pointer; background: #f8faff; transition: .2s ease; }
.picker:hover, .picker.drag { border-color: #5578e8; background: #f1f5ff; }
.picker-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 3px; border-radius: 13px; color: #fff; background: #5578e8; font-size: 26px; }
.picker small { color: #7a869c; }
.file-summary { margin: 14px 0 8px; color: #46526a; font-size: 14px; font-weight: 700; }
.preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 12px 0 18px; }
.preview { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #edf1f7; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview button { position: absolute; top: 5px; right: 5px; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #111827cc; cursor: pointer; }

.submit, .secondary { width: 100%; border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 800; cursor: pointer; }
.submit { color: #fff; background: linear-gradient(135deg, #3267ec, #6657dc); box-shadow: 0 10px 24px #3e60d536; }
.submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.secondary { color: #345ac7; background: #edf2ff; }
.message { margin: 14px 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.message.error { color: #a72b37; background: #fff0f1; border: 1px solid #ffd1d5; }
.progress-wrap { display: grid; gap: 8px; margin-top: 14px; color: #59657c; font-size: 13px; text-align: center; }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e7ebf3; }
.progress-track div { width: 0; height: 100%; border-radius: inherit; background: #5578e8; transition: width .15s linear; }

.success { text-align: center; }
.success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; color: #fff; background: #28a873; font-size: 34px; font-weight: 800; }
.success h2 { margin: 0; font-size: 26px; }
.success p { color: #68758d; }
.receipt { display: grid; gap: 5px; margin: 22px 0; padding: 16px; border-radius: 14px; background: #f4f7fb; }
.receipt span { color: #768198; font-size: 12px; }
.receipt strong { letter-spacing: .06em; }
footer { padding: 20px 8px 0; color: #8a94a8; font-size: 12px; text-align: center; }
.hidden { display: none !important; }

@media (max-width: 580px) {
  .page-shell { padding-top: 20px; }
  .card { padding: 19px; border-radius: 20px; }
  .grid.two { grid-template-columns: 1fr; gap: 0; }
  .preview-grid { grid-template-columns: repeat(3, 1fr); }
  .picker { min-height: 142px; }
}