html,body,#root{min-height:100%;margin:0}:root{--apple-blue:#007aff;--apple-gray:#f2f2f7;--apple-border:#d1d1d6;--apple-shadow:0 4px 12px #00000014;--compare-gap:16px;--calculate-btn-width:240px;--method-btn-size:36px}*{box-sizing:border-box}body{background:var(--apple-gray);color:#1c1c1e;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app-shell{min-height:100vh}.container{max-width:1500px;margin:0 auto;padding:48px 16px}.title{text-align:center;margin:0;font-size:2.8rem;font-weight:600}.subtitle{text-align:center;color:#6c757d;margin:8px 0 40px;font-size:1.25rem}.selection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;display:grid}.section-title{text-align:center;margin:0 0 12px;font-size:1.2rem}.preset-carousel-shell{padding:0 40px;position:relative}.preset-carousel-fade{pointer-events:none;z-index:2;background:linear-gradient(90deg,#f2f2f7 0%,#f2f2f700 10% 90%,#f2f2f7 100%);border-radius:12px;position:absolute;inset:0 40px}.preset-carousel-viewport{scroll-snap-type:x mandatory;scrollbar-width:none;z-index:1;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;position:relative;overflow-x:auto}.preset-carousel-viewport.dragging{cursor:grabbing;scroll-snap-type:none}.preset-carousel-viewport::-webkit-scrollbar{display:none}.preset-carousel-track{--card-width:200px;padding:2px calc((100% - var(--card-width)) / 2);gap:0;display:flex}.preset-image-container{cursor:pointer;scroll-snap-align:center;opacity:.68;background:#fff;border:2px solid #0000;border-radius:10px;flex:0 0 200px;padding:0;transition:opacity .22s,transform .22s,border-color .22s;overflow:hidden;transform:scale(.92)}.preset-image-container.selected{border-color:#0000}.preset-image-container.is-center{opacity:1;transform:scale(1)}.preset-image-container.is-edge{opacity:.68;transform:scale(.92)}.preset-image{object-fit:cover;object-position:center;width:100%;height:200px;box-shadow:var(--apple-shadow);border-radius:8px;transition:transform .3s;display:block}.preset-image:hover{transform:scale(1.05)}.dropzone{border:2px dashed var(--apple-border);text-align:center;box-shadow:var(--apple-shadow);background:#fff;border-radius:16px;margin-top:12px;padding:20px}.dropzone.drag-active{border-color:var(--apple-blue);background:#f3f8ff}.upload-btn{cursor:pointer;border:1px solid #c8ccd0;border-radius:8px;margin-top:8px;padding:8px 14px;font-size:.95rem;display:inline-block}.compare-section{margin-top:42px}.compare-content{justify-content:center;align-items:center;gap:var(--compare-gap);flex-wrap:nowrap;display:flex}.preview-image{width:100%;max-width:220px;box-shadow:var(--apple-shadow);opacity:0;border-radius:16px;flex:0 0 220px;transition:opacity .4s;transform:translateY(36px)}.preview-image.visible{opacity:1;transform:translateY(12px)}.compare-center{text-align:center;width:calc(var(--calculate-btn-width) + var(--method-btn-size) + 8px);min-width:calc(var(--calculate-btn-width) + var(--method-btn-size) + 8px);margin-top:12px}.action-row{grid-template-columns:var(--calculate-btn-width) var(--method-btn-size);width:calc(var(--calculate-btn-width) + var(--method-btn-size) + 8px);align-items:center;gap:8px;margin:0 auto;display:grid}.primary-btn{background:var(--apple-blue);color:#fff;cursor:pointer;width:var(--calculate-btn-width);white-space:nowrap;border:1px solid #0067d9;border-radius:9px;padding:7px 16px;font-size:.9rem;font-weight:600;transform:translateY(-10px);box-shadow:0 4px 10px #007aff38}.method-btn{width:var(--method-btn-size);height:var(--method-btn-size);color:#1c1c1e;cursor:pointer;background:#fff;border:1px solid #1c1c1e;border-radius:18px;justify-content:center;align-items:center;display:inline-flex;transform:translateY(-10px)}.method-btn:hover{background:#f5f5f7}.method-btn i{transform-origin:50%;font-size:.92rem;transition:transform .46s cubic-bezier(.22,.9,.3,1);display:inline-block}.primary-btn:hover{background:#005ecb}.primary-btn:disabled{opacity:.7;cursor:not-allowed}.score-block h3{text-align:center;width:100%;margin:22px 0 18px;font-size:2rem;font-weight:600;line-height:1.15}.score-block{padding-right:0;position:relative}.score-block span{color:#6c757d}.score-layout{flex-direction:row;justify-content:center;align-items:center;gap:18px;display:flex}.raw-score-value{text-align:center;color:#3a3a3c;min-width:190px;font-size:1rem}.gauge-wrapper{align-items:center;gap:18px;margin-left:0;display:flex}.gauge{background:#dfe3ea;border:1px solid #b9c0cb;border-radius:12px;width:24px;height:160px;position:relative;overflow:hidden}.gauge-level{border-radius:12px;width:100%;transition:height .6s,background .3s;position:absolute;bottom:0}.gauge-labels{color:#636366;text-align:left;flex-direction:column;justify-content:space-between;min-width:160px;height:160px;font-size:.7rem;display:flex}.icon-buttons{flex-direction:column;justify-content:center;align-items:center;gap:30px;display:flex}.icon-buttons button{color:var(--apple-blue);cursor:pointer;background:0 0;border:none;border-radius:0;padding:0;font-size:24px;line-height:1}.icon-buttons button:hover{color:#005ecb}.icon-buttons button:disabled{color:#9aa1ab;cursor:not-allowed}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.error-box{color:#b42318;text-align:center;margin-top:16px}.modal-overlay{z-index:1000;background:#16161873;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:14px;width:min(500px,100%);max-height:calc(100vh - 36px);padding:16px;overflow:auto;box-shadow:0 12px 32px #0003}.modal-header-row{border-bottom:1px solid var(--apple-border);justify-content:space-between;align-items:center;padding:6px 2px 12px;display:flex}.modal-header-row h3{margin:0}.close-btn{color:#555;cursor:pointer;background:0 0;border:none;padding:0;font-size:36px;line-height:1;transition:color .2s,transform .15s}.close-btn:hover{color:#111;transform:scale(1.12)}.required-star{color:#dc3545;font-weight:700}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;display:grid}.form-grid label{flex-direction:column;gap:6px;font-size:.92rem;display:flex}.form-grid label.checkbox-row{flex-direction:row;align-items:flex-start;gap:10px;display:flex}.form-grid label.checkbox-row input{flex:none;margin-top:4px}.form-grid label.checkbox-row span{margin:0;line-height:1.35}.form-grid input,.form-grid textarea{border:1px solid #cfd4da;border-radius:8px;padding:8px 10px;font-size:.92rem}.full-width{grid-column:1/-1}.modal-actions{border-top:1px solid var(--apple-border);justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;display:flex}.secondary-btn,.validate-btn{cursor:pointer;border:none;border-radius:10px;padding:9px 14px;font-weight:700}.secondary-btn{color:#1c1c1e;background:#eef1f4;transition:background .2s,transform .15s,box-shadow .2s}.secondary-btn:hover{background:#dfe5eb;transform:translateY(-1px);box-shadow:0 6px 14px #0000001f}.validate-btn{color:#000;background:#8ec3ff}.validate-btn:disabled{cursor:not-allowed;color:gray;background:#d0e5ff}@media (width<=900px){.selection-grid{grid-template-columns:1fr}.compare-content{flex-wrap:wrap;gap:26px}.preview-image{flex-basis:220px;max-width:220px}.compare-center{width:min(100%, calc(var(--calculate-btn-width) + var(--method-btn-size) + 8px));min-width:0}.action-row{grid-template-columns:minmax(0, 1fr) var(--method-btn-size);width:100%}.score-block h3{font-size:2.2rem}.gauge-labels{font-size:.7rem}.form-grid{grid-template-columns:1fr}.preset-carousel-shell{padding:0 18px}.preset-carousel-fade{inset:0 18px}.preset-carousel-track{--card-width:142px;gap:0}.preset-image-container{flex-basis:142px}.preset-image{height:142px}.score-block{padding-right:0}.icon-buttons{flex-direction:row;gap:18px;margin-top:8px;position:static}}