:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f4f4f2; color: #151515; }
.wrap { width: min(760px, calc(100% - 32px)); margin: 48px auto; }
.card { background: #fff; padding: 36px; box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.brand { font-size: 13px; letter-spacing: .38em; margin-bottom: 28px; }
h1 { font-size: 34px; font-weight: 500; margin: 0 0 12px; }
h2 { margin-top: 30px; font-size: 20px; }
.intro { color: #555; margin-bottom: 26px; }
.modelbox { border: 1px solid #d9d9d4; padding: 16px; margin: 24px 0; }
.modelbox span { display: block; color: #777; font-size: 13px; margin-bottom: 4px; }
.modelbox strong { font-size: 20px; }
label, legend { font-weight: 600; }
input[type=text], input[type=file] { width: 100%; margin-top: 8px; margin-bottom: 22px; padding: 13px; border: 1px solid #c8c8c2; background: #fff; }
fieldset { border: 0; padding: 0; margin: 0 0 22px; }
legend { margin-bottom: 10px; }
.choice { display: block; font-weight: 400; margin: 10px 0; line-height: 1.45; }
.choice input { margin-right: 8px; }
.legal { margin: 22px 0; }
.hint { margin: -12px 0 22px; color: #777; font-size: 13px; }
button { border: 0; background: #111; color: #fff; padding: 14px 24px; font-size: 15px; cursor: pointer; }
button:hover { opacity: .88; }
.notice { padding: 16px; margin: 22px 0; border-left: 4px solid #999; background: #f7f7f4; }
.notice.success { border-left-color: #2d7a3e; }
.notice.error { border-left-color: #a12c2c; }
.results { padding-left: 20px; }
.results li { margin: 9px 0; }
.rejected li { color: #8a2222; }
@media (max-width: 600px) { .wrap { margin: 20px auto; } .card { padding: 24px 20px; } h1 { font-size: 28px; } }

.author-note {
    margin-top: 10px;
    margin-bottom: 22px;
    font-size: 0.94rem;
    line-height: 1.45;
}
.notice.info {
    background: #f3f3f3;
    border-left: 3px solid #777;
}
.fieldhelp { color:#666; font-size:14px; line-height:1.5; margin:0 0 12px; }
.notice.warning { border-left-color:#b47a16; background:#fff9ed; }

.button { display: inline-block; text-decoration: none; border: 0; background: #111; color: #fff; padding: 14px 24px; font-size: 15px; cursor: pointer; }
.button:hover { opacity: .88; }
.button.secondary { background: #fff; color: #111; border: 1px solid #111; }
.next-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e2e2dd;
}
.next-upload-action {
    display: block;
    width: 100%;
    line-height: normal;
}
.next-upload-action .button {
    display: inline-block;
    position: static;
    float: none;
    margin: 0;
    line-height: 1.25;
}
.next-upload-copy {
    display: block;
    position: static;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.55;
}

button:disabled { opacity: .45; cursor: not-allowed; }

/* Crop UI */
.crop-section { margin: 8px 0 28px; padding: 20px; border: 1px solid #d9d9d4; background: #fafaf8; }
.crop-heading { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.crop-nav { display: flex; gap: 8px; flex-shrink: 0; }
.button.compact { padding: 9px 12px; font-size: 13px; }
.button.compact:disabled { opacity: .35; cursor: default; }
.crop-filename { font-size: 13px; font-weight: 600; margin: 14px 0 8px; overflow-wrap: anywhere; }
.crop-stage { width: min(100%, 540px); margin: 0 auto; background: #e7e7e3; overflow: hidden; touch-action: none; }
.crop-stage canvas { display: block; width: 100%; height: auto; max-height: 65vh; object-fit: contain; cursor: grab; touch-action: none; }
.crop-stage canvas.dragging { cursor: grabbing; }
.crop-controls { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 16px 0 10px; }
.crop-controls label { font-size: 13px; }
.crop-controls input[type=range] { width: 100%; }
.crop-ratios { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 0; font-size: 13px; }
.crop-ratios label { font-weight: 400; }
.hint-inline { color: #777; font-size: 13px; line-height: 1.5; }
@media (max-width: 600px) {
    .crop-section { padding: 16px 12px; }
    .crop-heading { display: block; }
    .crop-nav { margin-top: 12px; }
    .crop-nav .button { flex: 1; }
}

/* v1.3.1: compact mobile crop frame */
.crop-stage { display:flex; align-items:center; justify-content:center; max-height:58vh; background:#222; }
.crop-stage canvas { width:auto; height:auto; max-width:100%; max-height:58vh; object-fit:contain; }
@media (max-width:600px) {
  .crop-section { margin-top:6px; }
  .crop-stage { max-height:48vh; }
  .crop-stage canvas { max-height:48vh; }
  .crop-controls { margin:10px 0 6px; }
  .crop-filename { margin:8px 0 6px; }
  .crop-section .fieldhelp { margin:8px 0; font-size:14px; line-height:1.35; }
}
