* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  padding: clamp(12px, 3vh, 28px);
  color: #f4f2ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #16162e;
  background-image: linear-gradient(rgba(16, 17, 43, .25), rgba(16, 17, 43, .25)),
                    url('/assets/images/background.jpg'),
                    radial-gradient(ellipse at 15% 15%, #7557b5 0%, transparent 42%),
                    radial-gradient(ellipse at 85% 75%, #297b94 0%, transparent 40%),
                    linear-gradient(135deg, #16162e, #222048 55%, #142c40);
  background-size: cover;
  background-position: center;
}
.upload-panel {
  width: min(100%, 560px);
  max-height: 100%;
  margin: auto;
  padding: clamp(18px, 3vh, 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 24px;
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 24px 70px rgba(8, 8, 30, .35), inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.upload-panel::-webkit-scrollbar { width: 10px; }
.upload-panel::-webkit-scrollbar-track { margin: 12px 0; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.upload-panel::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, .55); background-clip: padding-box; }
.upload-panel::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .75); }
@supports (-moz-appearance: none) {
  .upload-panel { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .55) rgba(255, 255, 255, .12); }
}
.heading { text-align: center; margin-bottom: clamp(12px, 2vh, 20px); }
.heading-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #b490ff, #5cbfe4); box-shadow: 0 8px 24px rgba(138, 116, 255, .35); }
h1 { margin: 8px 0 2px; font-size: clamp(1.45rem, 3vh, 1.9rem); font-weight: 700; letter-spacing: -.03em; }
.subtitle { margin: 0; color: #d4d1e9; font-size: .88rem; }
.form-group { margin-bottom: clamp(8px, 1.4vh, 14px); }
label { display: block; margin-bottom: 5px; color: #f0edff; font-size: .84rem; font-weight: 600; }
label i { width: 18px; color: #c1b3ff; }
.mode-legend { margin-bottom: 5px; color: #f0edff; font-size: .84rem; font-weight: 600; }
.mode-selector { display: flex; gap: 10px; }
.mode-choice { display: flex; flex: 1; align-items: center; gap: 7px; margin: 0; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: rgba(15, 20, 43, .35); cursor: pointer; }
.mode-choice input { accent-color: #b490ff; }
.optional { font-weight: 400; color: #d4d1e9; }
.form-control, .form-control-file {
  width: 100%; min-width: 0; color: #fff; font-size: .88rem;
  background: rgba(15, 20, 43, .35); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px;
}
.form-control { height: auto; padding: 8px 11px; }
.form-control:focus { color: #fff; background: rgba(15, 20, 43, .5); border-color: #c5afff; box-shadow: 0 0 0 3px rgba(180, 144, 255, .18); }
.form-control::placeholder { color: #b5b3cd; }
.number-input { position: relative; }
.number-input input[type="number"] { padding-right: 42px; appearance: textfield; -moz-appearance: textfield; }
.number-input input::-webkit-inner-spin-button, .number-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.number-controls { position: absolute; inset: 3px 4px 3px auto; width: 28px; display: flex; flex-direction: column; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, .08); }
.number-controls button { flex: 1; min-height: 0; padding: 0; border: 0; color: #e3daff; background: transparent; font-size: 11px; line-height: 1; cursor: pointer; }
.number-controls button:hover { color: #fff; background: rgba(180, 144, 255, .25); }
.number-controls button:focus-visible { outline: 2px solid #c5afff; outline-offset: -2px; }
.form-control-file { padding: 7px; }
.form-control-file::file-selector-button { margin-right: 10px; padding: 5px 9px; border: 0; border-radius: 7px; color: #fff; background: rgba(255, 255, 255, .18); cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 60px; }
.policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.upload-button { padding: 10px; border: 0; border-radius: 10px; font-weight: 700; color: #fff; background: linear-gradient(100deg, #9870ed, #529fcf); box-shadow: 0 8px 24px rgba(78, 111, 193, .3); }
.upload-button:hover, .upload-button:focus { color: #fff; filter: brightness(1.1); }
.capacity-track { height: 6px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .15); }
.capacity-track[hidden] { display: none; }
.capacity-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a489f1, #68d1da); transition: width .3s ease; }
.capacity-fill.is-full { background: #ff9cae; }
#result { overflow-wrap: anywhere; font-size: .88rem; }
#result a { color: #c7eaff; }
.form-error { color: #ffbdc8; font-size: .88rem; }
.back-link { display: block; margin-top: 14px; text-align: center; color: #c7eaff; font-size: .88rem; }
body.install-available { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.install-area { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 10; display: flex; max-width: min(320px, calc(100vw - 32px)); flex-direction: column; align-items: flex-end; gap: 8px; }
.install-area[hidden] { display: none; }
.install-button, .install-message { border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; color: #f4f2ff; background: rgba(34, 32, 72, .8); box-shadow: 0 8px 24px rgba(8, 8, 30, .25); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.install-button { padding: 9px 14px; font-size: .84rem; font-weight: 600; cursor: pointer; }
.install-button:hover { background: rgba(85, 73, 142, .9); }
.install-button:focus-visible { outline: 2px solid #c5afff; outline-offset: 3px; }
.install-message { margin: 0; padding: 10px 12px; font-size: .82rem; }
.install-message[hidden] { display: none; }
@media (max-width: 380px) { .policy-grid { grid-template-columns: 1fr; gap: 0; } }