*{box-sizing:border-box}body,html{margin:0;padding:0;background:#0b1020;color:#f3f4f6;font-family:Arial,sans-serif}body{min-height:100vh}a{color:inherit;text-decoration:none}button,input{font:inherit}img{max-width:100%}.app{width:100%;min-height:100vh}.container{width:100%;max-width:1040px;margin:0 auto;padding:20px}.hero{padding:12px 0 20px}.hero h1{margin:0 0 8px;font-size:36px;line-height:1.1}.hero p{margin:0;color:rgba(243,244,246,.72);font-size:16px;line-height:1.5}.stepBarScroller{width:100%;overflow-x:auto;margin-bottom:16px;scrollbar-width:thin}.stepBarScroller::-webkit-scrollbar{height:6px}.stepBarScroller::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.14);border-radius:999px}.stepBar{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));grid-gap:8px;gap:8px;min-width:460px}.stepItem{-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;border-radius:14px;background:#12182b;border:1px solid hsla(0,0%,100%,.06);color:rgba(243,244,246,.72);text-align:left;cursor:default}.stepItem.active{border-color:#5b7cff;color:#fff}.stepItem.done{opacity:.72}.stepItem.clickable{cursor:pointer}.stepItem.clickable:hover{background:#18203a}.stepItem.locked{opacity:.5}.stepIndex{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.08);font-size:12px;font-weight:700;flex:0 0 auto}.stepLabel{font-size:14px;white-space:nowrap}.card{background:#12182b;border:1px solid hsla(0,0%,100%,.06);border-radius:16px;padding:18px}.sectionHead{margin-bottom:14px}.sectionHead h2{margin:0 0 8px;font-size:24px;line-height:1.15}.sectionHead p{margin:0;color:rgba(243,244,246,.72);line-height:1.5}.compactHead{margin-top:20px}.settingsFlow{display:grid;grid-gap:12px;gap:12px}.flowSection{display:grid;grid-gap:10px;gap:10px;padding:12px;border-radius:12px;background:#0f1526;border:1px solid hsla(0,0%,100%,.07)}.flowTitle{display:flex;align-items:center;gap:8px}.flowTitle span{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(91,124,255,.16);color:#dce5ff;font-size:12px;font-weight:700}.flowTitle strong{font-size:15px}.flowHint{margin:-2px 0 0;color:rgba(243,244,246,.64);font-size:13px;line-height:1.4}.editorLayout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);grid-gap:14px;gap:14px;align-items:start}.editorCropPanel,.editorSettingsPanel{min-width:0;border-radius:14px;border:1px solid hsla(0,0%,100%,.07);background:#0f1526}.editorCropPanel{padding:14px}.editorSettingsPanel{display:grid;grid-gap:12px;gap:12px;padding:12px}.panelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.panelHead.compact{margin-bottom:10px}.panelHead h3{margin:4px 0 0;font-size:18px;line-height:1.2}.panelHead>strong{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:rgba(91,124,255,.15);color:#dce5ff;font-size:13px}.editorSection{display:grid;grid-gap:10px;gap:10px}.editorSectionHead{display:flex;align-items:center;gap:8px}.editorSectionHead span{width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.08);color:rgba(243,244,246,.78);font-size:12px;font-weight:700}.editorSectionHead strong{font-size:14px}.segmentedGroup{display:grid;grid-gap:6px;gap:6px;padding:4px;border-radius:12px;background:#0b1020;border:1px solid hsla(0,0%,100%,.06)}.segmentedGroup.two{grid-template-columns:repeat(2,minmax(0,1fr))}.segmentedGroup.three{grid-template-columns:repeat(3,minmax(0,1fr))}.segmentedGroup button{min-height:36px;border:0;border-radius:9px;background:transparent;color:rgba(243,244,246,.68);cursor:pointer;font-weight:700;transition:.18s ease}.segmentedGroup button:hover{color:#fff;background:hsla(0,0%,100%,.05)}.segmentedGroup button.active{color:#fff;background:#18203a;box-shadow:inset 0 0 0 1px rgba(91,124,255,.48)}.presetChips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px;gap:8px}.presetChips button{min-height:46px;display:grid;grid-gap:2px;gap:2px;place-items:center;border-radius:10px;border:1px solid hsla(0,0%,100%,.08);background:#12182b;color:#f3f4f6;cursor:pointer;transition:.18s ease}.presetChips button:hover{background:#18203a}.presetChips button.active{border-color:#5b7cff;background:rgba(91,124,255,.16)}.presetChips strong{font-size:15px}.presetChips span{color:rgba(243,244,246,.62);font-size:12px}.optionGrid{display:grid;grid-gap:8px;gap:8px}.optionGrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.optionGrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.formatGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px}.formatButton{text-align:left;padding:14px;border-radius:12px;border:1px solid hsla(0,0%,100%,.08);background:#0f1526;color:#f3f4f6;cursor:pointer;transition:.2s ease}.formatButton.compact{padding:10px 12px;min-height:58px;background:#12182b}.formatButton:hover{background:#11192d}.formatButton.active{border-color:#5b7cff;background:#18203a}.formatButton strong{display:block;margin-bottom:4px;font-size:15px}.formatButton span{display:block;color:rgba(243,244,246,.68);font-size:12px;line-height:1.35}.settingsGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px}.settingsGrid.single{grid-template-columns:1fr;gap:12px}.controlBlock{display:grid;grid-gap:7px;gap:7px;padding:10px;border-radius:12px;background:hsla(0,0%,100%,.035)}.controlValueRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;grid-gap:8px;gap:8px}.numberInput{width:100%;min-width:0;border-radius:10px;border:1px solid hsla(0,0%,100%,.1);background:#12182b;color:#f3f4f6;padding:8px 10px;font-weight:700}.numberInput:focus{outline:none;border-color:#5b7cff;box-shadow:0 0 0 3px rgba(91,124,255,.18)}.numberInput.invalid{border-color:#ff6b6b;background:hsla(0,100%,71%,.08)}.numberInput.invalid:focus{border-color:#ff8f8f;box-shadow:0 0 0 3px hsla(0,100%,71%,.16)}.controlLimits{display:flex;justify-content:space-between;gap:8px}.controlError{min-height:18px;color:#ffb3b3;font-size:12px;line-height:1.35}.controlBlock span,.dimensionSummary span{color:rgba(243,244,246,.68);font-size:13px}.controlBlock small{margin-top:-4px;color:rgba(243,244,246,.48);font-size:12px;line-height:1.35}.controlBlock strong{font-size:15px}.controlBlock input[type=range]{width:100%}.dimensionSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px;gap:8px;padding:10px;border-radius:10px;background:hsla(0,0%,100%,.04)}.dimensionSummary.compact{grid-template-columns:1fr;padding:0;background:transparent}.dimensionSummary.compact span{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:10px;background:hsla(0,0%,100%,.04)}.dimensionSummary.compact strong{color:#f3f4f6;font-size:13px}.dimensionSummary.warning{border:1px solid rgba(255,199,95,.34)}.warningBox{padding:12px 14px;border-radius:14px;background:rgba(255,199,95,.12);color:#ffe2a8;border:1px solid rgba(255,199,95,.3);line-height:1.45;font-size:14px}.uploadBox{display:block;width:100%;border:1px dashed rgba(126,161,255,.34);border-radius:16px;background:linear-gradient(180deg,rgba(91,124,255,.08),transparent),#0f1526;cursor:pointer;transition:.2s ease}.uploadBox:hover{border-color:rgba(126,161,255,.65);background:linear-gradient(180deg,rgba(91,124,255,.13),transparent),#10182b}.uploadInner{min-height:240px;display:flex;flex-direction:column;gap:8px;text-align:center;padding:20px}.uploadIcon,.uploadInner{align-items:center;justify-content:center}.uploadIcon{width:46px;height:46px;display:inline-flex;border-radius:999px;background:#5b7cff;color:#fff;font-size:30px;line-height:1}.uploadInner strong{font-size:22px}.uploadInner span{color:rgba(243,244,246,.6)}.selectedPhotoPanel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);grid-gap:16px;gap:16px;align-items:stretch;padding:12px;border-radius:16px;background:#0f1526;border:1px solid hsla(0,0%,100%,.08)}.selectedPhotoPreview{min-height:320px;border-radius:12px;overflow:hidden;background:#0b1020}.selectedPhotoPreview img{width:100%;height:100%;display:block;object-fit:contain}.selectedPhotoInfo{display:flex;flex-direction:column;gap:12px;justify-content:center;min-width:0}.selectedPhotoInfo strong{font-size:18px;line-height:1.3;word-break:break-word}.photoMetaGrid{display:grid;grid-template-columns:1fr;grid-gap:8px;gap:8px}.photoMetaGrid span{padding:9px 10px;border-radius:10px;background:hsla(0,0%,100%,.04);color:rgba(243,244,246,.72);font-size:13px}.photoActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}.fileButton{cursor:pointer}.metaText{margin-top:12px;color:rgba(243,244,246,.7);font-size:14px}.cropBox{position:relative;height:min(52vh,430px);min-height:340px;border-radius:12px}.cropBox,.previewBox{width:100%;overflow:hidden;background:#0f1526}.previewBox{height:520px;border-radius:18px}.inlinePreviewBlock{margin-top:14px;padding-top:14px;border-top:1px solid hsla(0,0%,100%,.08)}.previewBox.inline{height:min(42vh,360px);min-height:260px;border-radius:12px;background:#0b1020}.downloadPreviewStrip{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-gap:12px;gap:12px;margin-bottom:16px}.downloadPreviewScene{min-height:300px;border-radius:14px;overflow:hidden;background:#0f1526}.downloadCroppedFrame{display:grid;align-content:start;grid-gap:8px;gap:8px}.downloadCroppedFrame img{width:100%;border-radius:12px;display:block}.placeholder{width:100%;height:100%;display:grid;place-items:center;color:rgba(243,244,246,.5)}.sliderBlock{margin-top:16px;display:grid;grid-gap:8px;gap:8px}.sliderBlock.compactSlider{margin-top:12px}.sliderBlock label{font-size:14px;color:rgba(243,244,246,.75)}.sliderBlock input[type=range]{width:100%}.croppedBlock{margin-top:16px;display:grid;grid-gap:8px;gap:8px}.metaLabel{font-size:13px;color:rgba(243,244,246,.62)}.croppedImage{width:100%;max-width:420px;border-radius:14px;display:block}.actions{display:flex;justify-content:flex-end;margin-top:20px}.actions.split{justify-content:space-between;gap:10px}.editorActions{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:10px;gap:10px;position:-webkit-sticky;position:sticky;bottom:12px;padding-top:4px;background:linear-gradient(180deg,rgba(15,21,38,0),#0f1526 28%)}.editorActions .primaryButton{width:100%}.primaryButton,.secondaryButton{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:14px;padding:12px 18px;cursor:pointer;transition:.2s ease;font-weight:600}.primaryButton{background:#5b7cff;color:#fff}.primaryButton:hover{background:#6a88ff}.primaryButton:disabled,.secondaryButton:disabled{cursor:not-allowed;opacity:.62}.secondaryButton{background:#0f1526;color:#f3f4f6;border:1px solid hsla(0,0%,100%,.08)}.downloadWrap{display:flex;justify-content:center;align-items:center;min-height:160px;background:#0f1526;border-radius:18px}.errorBox{margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(255,88,88,.12);color:#ffd6d6;border:1px solid rgba(255,88,88,.22)}.disabledLink{pointer-events:none;opacity:.5}.loaderWrap{margin-top:18px;padding:14px;border-radius:14px;background:#0f1526;border:1px solid hsla(0,0%,100%,.06)}.loaderHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.loaderHeader strong{font-size:14px}.loaderHeader span{font-size:13px;color:rgba(243,244,246,.7)}.loaderBar{width:100%;height:10px;border-radius:999px;overflow:hidden;background:hsla(0,0%,100%,.08)}.loaderFill{height:100%;border-radius:999px;background:linear-gradient(90deg,#5b7cff,#7ea1ff);transition:width .35s ease}.loaderHint{margin:10px 0 0;font-size:13px;color:rgba(243,244,246,.58);line-height:1.45}.timerBox{margin-bottom:16px;padding:14px;border-radius:14px;background:#0f1526;border:1px solid hsla(0,0%,100%,.06);display:flex;align-items:center;justify-content:space-between;gap:12px}.timerLabel{color:rgba(243,244,246,.7);font-size:14px}.timerValue{font-size:22px;line-height:1}.timerValue.expired{color:#ff8f8f}.linkFieldWrap{margin-top:16px;display:grid;grid-gap:8px;gap:8px}.linkFieldLabel{font-size:13px;color:rgba(243,244,246,.65)}.linkFieldRow{display:flex;gap:10px}.linkFieldInput{flex:1 1;min-width:0;background:#0f1526;border:1px solid hsla(0,0%,100%,.08);border-radius:14px;color:#f3f4f6;padding:12px 14px}.copyButton{white-space:nowrap}@media (max-width:900px){.hero h1{font-size:30px}.sectionHead h2{font-size:22px}.editorLayout{grid-template-columns:1fr}.editorSettingsPanel{order:-1}.editorActions{position:static;background:transparent}}@media (max-width:640px){.container{padding:14px}.card{padding:16px;border-radius:16px}.formatGrid,.selectedPhotoPanel{grid-template-columns:1fr}.selectedPhotoPreview{min-height:240px}.dimensionSummary,.optionGrid.three,.optionGrid.two,.settingsGrid{grid-template-columns:1fr}.cropBox{height:300px;min-height:300px}.previewBox{height:360px}.downloadPreviewStrip{grid-template-columns:1fr}.downloadPreviewScene{min-height:280px}.actions.split{flex-direction:column}.primaryButton,.secondaryButton{width:100%}.editorActions,.segmentedGroup.three,.segmentedGroup.two{grid-template-columns:1fr}.stepBar{display:flex;min-width:max-content}.stepItem{min-width:150px;flex:0 0 auto}.stepLabel{white-space:normal}.linkFieldRow{flex-direction:column}.copyButton{width:100%}.timerBox{flex-direction:column;align-items:flex-start}}