.app{max-width:1200px;margin:0 auto;padding:1.5rem 1.25rem 3rem}.app--crop{max-width:1400px}.app-header{margin-bottom:2rem}.app-header__brand{display:flex;align-items:center;gap:.875rem;margin-bottom:.5rem}.app-header__logo{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-primary);border:var(--border-width) solid var(--color-border);box-shadow:var(--shadow-brutal-sm);flex-shrink:0}.app-header__logo svg{width:24px;height:24px;color:var(--color-on-primary)}.app-header h1{margin:0;font-family:var(--font-heading);font-size:1.85rem;font-weight:800;letter-spacing:-.02em}.text-highlight{color:var(--color-primary)}.app-subtitle{margin:0 0 1.5rem;color:var(--color-text-muted);font-size:.95rem}.step-indicator{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:.75rem 1.25rem;background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-brutal)}.step-indicator__item{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.step-indicator__item:not(:last-child):after{content:"";flex:1;height:3px;margin:0 .75rem;background:var(--color-muted);border-radius:2px;transition:background var(--transition-base)}.step-indicator__item--done:not(:last-child):after{background:var(--color-primary)}.step-indicator__dot{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-full);background:var(--color-muted);border:2px solid var(--color-border);color:var(--color-text-subtle);font-family:var(--font-heading);font-size:.75rem;font-weight:700;flex-shrink:0;transition:background var(--transition-base),color var(--transition-base),box-shadow var(--transition-base)}.step-indicator__item--active .step-indicator__dot{background:var(--color-primary);border-color:var(--color-border);color:var(--color-on-primary);box-shadow:2px 2px 0 var(--color-border)}.step-indicator__item--done .step-indicator__dot{background:var(--color-accent-lavender);border-color:var(--color-border);color:var(--color-foreground)}.step-indicator__label{font-size:.8125rem;font-weight:600;color:var(--color-text-subtle);white-space:nowrap;transition:color var(--transition-base)}.step-indicator__item--active .step-indicator__label{color:var(--color-foreground);font-weight:700}.step-indicator__item--done .step-indicator__label{color:var(--color-text-muted)}@media(max-width:520px){.step-indicator__label{display:none}.step-indicator__item:not(:last-child):after{margin:0 .4rem}}.app-main{animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.step-panel{background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-brutal-lg)}.step-panel h2{margin:0 0 .5rem;font-family:var(--font-heading);font-size:1.4rem;font-weight:800;letter-spacing:-.01em}.step-panel h3{margin:1.5rem 0 .75rem;font-family:var(--font-heading);font-size:1rem;font-weight:700}.step-description{margin:0 0 1rem;color:var(--color-text-muted);line-height:1.6}.step-description strong{color:var(--color-foreground);font-weight:700}.preset-section-label{margin:0 0 .75rem;font-family:var(--font-heading);font-size:.75rem;font-weight:700;color:var(--color-text-subtle);text-transform:uppercase;letter-spacing:.08em}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:1rem}.preset-card{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.875rem .75rem 1rem;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:inherit;text-align:center;box-shadow:var(--shadow-brutal-sm);transition:transform var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}.preset-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-brutal);background:var(--color-muted)}.preset-card:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--shadow-brutal)}.preset-card:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--color-border)}.preset-card--selected{background:var(--color-accent-lavender);box-shadow:var(--shadow-brutal)}.preset-visual{display:flex;align-items:center;justify-content:center;width:100%;height:76px;margin-bottom:.35rem;border-radius:var(--radius-sm);background:var(--color-muted);border:2px solid var(--color-border)}.preset-shape{border-radius:4px;background:var(--color-primary);border:2px solid var(--color-border);box-shadow:2px 2px 0 var(--color-border);transition:transform var(--transition-fast)}.preset-card:hover .preset-shape,.preset-card--selected .preset-shape{transform:scale(1.04)}.preset-shape--landscape{width:min(100%,96px);max-height:56px;height:auto}.preset-shape--portrait{height:min(100%,64px);max-width:56px;width:auto}.preset-card__title{font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--color-foreground)}.preset-card__ratio{font-size:.8rem;font-weight:700;color:var(--color-primary)}.preset-card--selected .preset-card__title{color:var(--color-foreground)}.custom-dimensions{margin-top:1.75rem;padding-top:1.5rem;border-top:2px dashed var(--color-border)}.custom-dimensions__hint{margin:0 0 1rem;font-size:.875rem;color:var(--color-text-subtle)}.custom-dimension-workspace{display:flex;justify-content:center;margin-bottom:1rem}.custom-dimension-frame-area{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;max-width:380px;min-height:250px;padding:1.25rem;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(to right,rgba(45,52,54,.06) 1px,transparent 1px) 0 0 / 20px 100%,linear-gradient(to bottom,rgba(45,52,54,.06) 1px,transparent 1px) 0 0 / 100% 20px,var(--color-muted);box-shadow:var(--shadow-brutal-sm)}.custom-dimension-frame{position:relative;flex-shrink:0;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-brutal-sm);transition:transform var(--transition-fast),box-shadow var(--transition-fast);touch-action:none;-webkit-user-select:none;user-select:none}.custom-dimension-frame--dragging{transform:translate(-1px,-1px);box-shadow:var(--shadow-brutal)}.custom-dimension-frame__inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:6px;background:var(--color-accent-lavender);pointer-events:none}.custom-dimension-frame__ratio-badge{padding:.25rem .7rem;border-radius:var(--radius-full);background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-foreground);font-family:var(--font-heading);font-size:1rem;font-weight:800;letter-spacing:.03em;box-shadow:2px 2px 0 var(--color-border)}.custom-dimension-frame__corner{position:absolute;right:-14px;bottom:-14px;width:44px;height:44px;cursor:nwse-resize;touch-action:none;z-index:1}.custom-dimension-frame__corner:after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--color-primary);border:2px solid var(--color-border);box-shadow:2px 2px 0 var(--color-border);transition:transform var(--transition-fast)}.custom-dimension-frame__corner:hover:after,.custom-dimension-frame--dragging .custom-dimension-frame__corner:after{transform:scale(1.1)}.custom-ratio-inputs{display:flex;align-items:flex-end;justify-content:center;gap:.75rem;margin:0 0 1.25rem}.custom-ratio-inputs__field{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;font-weight:700;color:var(--color-text-muted)}.custom-ratio-inputs__field input{width:72px;padding:.5rem .6rem;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);font-size:1rem;font-weight:700;color:var(--color-foreground);text-align:center;background:var(--color-surface);box-shadow:var(--shadow-brutal-sm);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.custom-ratio-inputs__field input:focus{outline:none;box-shadow:var(--focus-ring),var(--shadow-brutal-sm)}.custom-ratio-inputs__separator{padding-bottom:.55rem;font-family:var(--font-heading);font-size:1.2rem;font-weight:800;color:var(--color-text-subtle)}.custom-dimension-confirm{display:block;margin:0 auto}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.65rem 1.35rem;border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border);font-family:var(--font-heading);font-weight:700;font-size:.9rem;box-shadow:var(--shadow-brutal-sm);transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast)}.primary-button{background:var(--color-primary);color:var(--color-on-primary)}.primary-button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--shadow-brutal)}.primary-button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--color-border)}.primary-button:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--shadow-brutal-sm)}.primary-button:disabled{opacity:.55;transform:none}.secondary-button{background:var(--color-secondary);color:var(--color-on-secondary)}.secondary-button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--shadow-brutal)}.secondary-button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--color-border)}.secondary-button:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--shadow-brutal-sm)}.action-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.error-message{margin:1rem 0 0;padding:.75rem 1rem;border-radius:var(--radius-sm);background:#fde8e8;border:var(--border-width) solid var(--color-destructive);color:#c0392b;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-brutal-sm)}.info-card{display:flex;align-items:flex-start;gap:.75rem;margin:1rem 0;padding:1rem 1.125rem;border-radius:var(--radius-md);background:var(--color-accent-coral);border:var(--border-width) solid var(--color-border);box-shadow:var(--shadow-brutal-sm)}.info-card svg{flex-shrink:0;width:20px;height:20px;margin-top:.1rem;color:var(--color-foreground)}.info-card p{margin:0;font-size:.875rem;color:var(--color-foreground);line-height:1.5}.info-card code{padding:.1rem .35rem;border-radius:4px;background:var(--color-surface);border:1px solid var(--color-border);font-size:.82rem;font-weight:600}.crop-session__header{margin-bottom:1.25rem;padding:1.25rem 1.5rem;background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-brutal)}.crop-session__header h2{margin:0 0 .35rem;font-family:var(--font-heading);font-size:1.25rem;font-weight:800}.crop-session__header p{margin:0;color:var(--color-text-muted);font-size:.9rem}.loading-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem 1.5rem;color:var(--color-text-muted)}.loading-spinner{width:36px;height:36px;border:3px solid var(--color-muted);border-top-color:var(--color-primary);border-right-color:var(--color-border);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:720px){.app{padding:1rem 1rem 2rem}}:root{--color-primary: #2ecc71;--color-on-primary: #ffffff;--color-secondary: #74c0fc;--color-on-secondary: #2d3436;--color-accent: #ff6b6b;--color-accent-lavender: #d4c5f9;--color-accent-coral: #ffb5a7;--color-background: #fff9f1;--color-foreground: #2d3436;--color-surface: #ffffff;--color-muted: #fef3e2;--color-border: #2d3436;--color-text-muted: #636e72;--color-text-subtle: #8b949e;--color-destructive: #e74c3c;--color-warning: #f39c12;--color-ring: #2ecc71;--color-overlay: rgba(45, 52, 54, .55);--font-heading: "Poppins", system-ui, sans-serif;--font-body: "Open Sans", system-ui, sans-serif;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 999px;--border-width: 3px;--shadow-brutal: 4px 4px 0 var(--color-border);--shadow-brutal-sm: 3px 3px 0 var(--color-border);--shadow-brutal-lg: 6px 6px 0 var(--color-border);--transition-fast: .15s ease;--transition-base: .2s ease;--focus-ring: 0 0 0 3px var(--color-primary);font-family:var(--font-body);line-height:1.5;font-weight:400;color:var(--color-foreground);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-background)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}#root{min-height:100vh}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}