.app{width:100%;max-width:480px}.header{text-align:center;padding:24px 0 8px}.title{font-size:2rem;font-weight:700;color:#2c3e50;letter-spacing:-.02em}.subtitle{font-size:.875rem;color:#7a8ea0;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}.card{background:#ffffffbf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:20px;margin-top:16px;box-shadow:0 2px 12px #0000000f,0 0 0 1px #fff9 inset;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.card-title{font-size:1.1rem;font-weight:600;color:#2c3e50;margin-bottom:4px}.card-desc{font-size:.85rem;color:#7a8ea0;margin-bottom:12px}.file-input{display:none}.upload-btn{display:block;width:100%;padding:14px;border:2px dashed #b0c4d8;border-radius:12px;background:transparent;color:#4a6f8a;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.upload-btn:hover{border-color:#4a6741;color:#4a6741;transform:translateY(-1px)}.upload-btn:active{transform:translateY(0)}.preview-wrap{margin-top:12px;border-radius:12px;overflow:hidden}.preview-img{width:100%;display:block;border-radius:12px}.color-swatches{display:flex;gap:10px;flex-wrap:wrap}.swatch-item{display:flex;flex-direction:column;align-items:center;gap:4px}.swatch{width:48px;height:48px;border-radius:12px;box-shadow:0 2px 8px #0000001a,0 0 0 1px #0000000d;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.swatch:hover{transform:scale(1.1)}.swatch-label{font-size:.65rem;color:#7a8ea0;font-family:SF Mono,Menlo,monospace}.compass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:240px;margin:0 auto}.compass-btn:nth-child(1){grid-column:2;grid-row:1}.compass-btn:nth-child(2){grid-column:3;grid-row:1}.compass-btn:nth-child(3){grid-column:3;grid-row:2}.compass-btn:nth-child(4){grid-column:3;grid-row:3}.compass-btn:nth-child(5){grid-column:2;grid-row:3}.compass-btn:nth-child(6){grid-column:1;grid-row:3}.compass-btn:nth-child(7){grid-column:1;grid-row:2}.compass-btn:nth-child(8){grid-column:1;grid-row:1}.compass-btn{padding:12px 8px;border:2px solid #d4dde6;border-radius:12px;background:#fff9;color:#4a6f8a;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.compass-btn:hover{border-color:#4a6741;color:#4a6741;transform:translateY(-2px)}.compass-btn.active{background:#4a6741;border-color:#4a6741;color:#fff;box-shadow:0 4px 12px #4a67414d}.analyze-btn{display:block;width:100%;margin-top:16px;padding:16px;border:none;border-radius:14px;background:linear-gradient(135deg,#4a6741,#5c8a50);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 16px #4a674140;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.analyze-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #4a674159}.analyze-btn:active:not(:disabled){transform:translateY(0)}.analyze-btn:disabled{opacity:.7;cursor:not-allowed}.error-card{background:#a8543214;border:1px solid rgba(168,84,50,.2);color:#a85432;text-align:center}.score-section{text-align:center;padding:16px 0}.score-ring{position:relative;width:120px;height:120px;margin:0 auto}.score-svg{width:100%;height:100%}.score-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;font-weight:700;color:var(--score-color)}.score-label{margin-top:8px;font-size:.85rem;color:#7a8ea0;text-transform:uppercase;letter-spacing:.08em}.section-title{font-size:.9rem;font-weight:600;color:#4a6f8a;margin-bottom:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.06)}.elements-grid{display:flex;flex-direction:column;gap:10px}.element-item{display:grid;grid-template-columns:28px 56px 1fr 40px;align-items:center;gap:8px}.element-icon{font-size:1.1rem;text-align:center}.element-name{font-size:.85rem;font-weight:500;color:#2c3e50}.element-bar-bg{height:8px;background:#e8edf2;border-radius:4px;overflow:hidden}.element-bar-fill{height:100%;background:linear-gradient(90deg,#4a6741,#6b8f5e);border-radius:4px;transition:width .6s ease-out}.element-pct{font-size:.8rem;color:#7a8ea0;text-align:right;font-variant-numeric:tabular-nums}.analysis-text{padding:12px 0;font-size:.9rem;color:#4a6f8a;line-height:1.5}.recs-list{list-style:none;display:flex;flex-direction:column;gap:8px}.rec-item{padding:10px 14px;background:#4a67410f;border-radius:10px;font-size:.875rem;color:#3a5a32;line-height:1.4;border-left:3px solid #4a6741}.footer{text-align:center;padding:24px 0 8px;font-size:.75rem;color:#a0b0c0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#f0f4f8,#dfe9f3);min-height:100vh;color:#2c3e50;line-height:1.6;-webkit-font-smoothing:antialiased}#root{display:flex;justify-content:center;padding:20px 16px 40px}