.iof-layout{background-color:var(--color-bg);min-height:100vh;color:var(--color-text);flex-direction:column;display:flex;position:relative;overflow:hidden}.iof-layout:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 60% at 50% 0,#d8fb000f 0%,#0000 60%),radial-gradient(60% 50% at 80% 20%,#ffffff0a 0%,#0000 55%);position:fixed;inset:0}.iof-layout>*{z-index:1;position:relative}.iof-header{width:100%;max-width:580px;margin:0 auto;padding:1.5rem}.iof-progress-text{color:var(--color-text-muted);text-align:center;letter-spacing:.02em;margin-bottom:.5rem;font-size:.875rem;font-weight:500}.iof-progress-dots{justify-content:center;gap:.5rem;display:flex}.iof-dot{background-color:var(--color-border);border-radius:50%;width:8px;height:8px;transition:all .3s}.iof-dot.completed{background-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.iof-dot.active{background-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-accent-soft);transform:scale(1.25)}.iof-main{flex:1;justify-content:center;align-items:center;padding:1rem;display:flex;overflow:hidden}.iof-card-wrapper{width:100%;max-width:580px;height:auto;min-height:620px;position:relative}.iof-card{background-color:var(--color-surface);border-radius:var(--radius-card);width:100%;height:auto;min-height:620px;box-shadow:var(--shadow-card);border:1px solid var(--color-border);flex-direction:column;padding:2rem;display:flex;position:absolute;top:0;left:0}@media (max-width:640px){.iof-card{border-radius:calc(var(--radius-card) - 2px);padding:1.25rem}.iof-card-wrapper{min-height:auto}.iof-card-content h2,.iof-problem-card h2{font-size:1.25rem}.iof-microcopy{margin-bottom:1rem;font-size:.85rem}.iof-textarea{min-height:120px;padding:.875rem}.iof-slider-value{margin-bottom:1rem;font-size:1.1rem}.iof-slider-labels{font-size:.75rem}.iof-chip-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}.iof-chip{padding:.875rem;font-size:.9rem}.iof-footer{padding:1rem 1rem 1.5rem}.iof-progress-text{font-size:.8rem}}.iof-card:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff2e 0%,#0000 45%);position:absolute;inset:0}[data-theme=dark] .iof-card:before{background:linear-gradient(#ffffff0d 0%,#0000 45%)}.iof-footer{justify-content:space-between;width:100%;max-width:580px;margin:0 auto;padding:1.5rem 1.5rem 2rem;display:flex}.iof-problem-card h2{margin-top:0;margin-bottom:.5rem;font-size:1.5rem}.iof-microcopy{color:var(--color-text-muted);margin-bottom:1.5rem;font-size:.9rem;line-height:1.4}.iof-textarea{background-color:var(--color-bg);width:100%;min-height:150px;color:var(--color-text);border:1px solid var(--color-border);resize:vertical;border-radius:8px;flex:1;padding:1rem;font-family:inherit;font-size:1rem}.iof-textarea:focus{border-color:var(--color-primary);outline:none}.iof-quality-meter{margin-top:1rem;font-size:.875rem}.iof-card-content{flex-direction:column;height:100%;display:flex}.iof-card-content h2{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.iof-chip-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:1rem;display:grid}.iof-chip{background-color:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-size:1rem;transition:all .2s;display:flex;position:relative;overflow:hidden}.iof-chip:after{content:"";background:radial-gradient(circle at center, var(--color-accent-soft) 0%, transparent 70%);opacity:0;transition:opacity .2s;position:absolute;inset:0}.iof-chip:hover{border-color:var(--color-primary);transform:translateY(-2px)}.iof-chip:hover:after{opacity:1}.iof-chip:active{transform:translateY(0)}.iof-chip.selected{border-color:var(--color-primary);background-color:var(--color-accent-soft);box-shadow:0 0 0 1px var(--color-primary) inset, 0 8px 20px -6px #0000001f}.iof-chip.selected:after{opacity:1;background:radial-gradient(circle at center, var(--color-accent-soft) 0%, transparent 70%)}.iof-chip-icon{z-index:1;font-size:1.25rem;line-height:1;position:relative}.iof-chip-label{z-index:1;font-weight:500;position:relative}.iof-slider-container{flex-direction:column;align-items:center;margin-top:2rem;display:flex}.iof-slider-value{color:var(--color-primary);margin-bottom:1.5rem;font-size:1.25rem;font-weight:700}.iof-slider{width:100%;accent-color:var(--color-primary);cursor:pointer}.iof-slider-labels{width:100%;color:var(--color-text-muted);justify-content:space-between;margin-top:.5rem;font-size:.875rem;display:flex}.btn-primary,.btn-secondary{border-radius:var(--radius-button);cursor:pointer;border:none;min-height:44px;padding:0 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.btn-primary{background-color:var(--color-primary);color:#1a1a14;box-shadow:0 6px 18px -6px var(--color-accent-soft)}.btn-primary:hover:not(:disabled){box-shadow:0 10px 22px -6px var(--color-accent-soft);filter:brightness(1.05);transform:translateY(-1px)}.btn-primary:active:not(:disabled){box-shadow:0 4px 12px -4px var(--color-accent-soft);transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-secondary{color:var(--color-text-muted);border:1px solid var(--color-border);background-color:#0000}.btn-secondary:hover:not(:disabled){color:var(--color-text);border-color:var(--color-primary);background-color:var(--color-surface-alt)}.btn-secondary:active:not(:disabled){background-color:var(--color-accent-soft);transform:translateY(0)}