:root{--bg:#0f1419;--surface:#1a2332;--surface2:#243044;--border:#334155;--text:#e8edf4;--muted:#94a3b8;--accent:#38bdf8;--accent2:#818cf8;--success:#34d399;--warning:#fbbf24;--danger:#f87171}*{box-sizing:border-box}body,html{margin:0;padding:0;min-height:100%;background:radial-gradient(ellipse at top,#1e293b 0,var(--bg) 55%);color:var(--text);font-family:Segoe UI,Hiragino Sans,Yu Gothic UI,sans-serif}a{color:var(--accent)}main{max-width:1100px;margin:0 auto;padding:2rem 1.25rem 4rem}h1{margin:0 0 .5rem;font-size:1.75rem;font-weight:700}.subtitle{color:var(--muted);margin:0 0 2rem;line-height:1.6}.steps{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.step-pill{padding:.35rem .75rem;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:.85rem}.step-pill.active{border-color:var(--accent);color:var(--accent);background:rgba(56,189,248,.1)}.step-pill.done{border-color:var(--success);color:var(--success)}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.25rem;margin-bottom:1rem}.card h2{margin:0 0 1rem;font-size:1.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:10px;padding:.65rem 1.1rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .12s ease,opacity .12s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b1220}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.upload-zone{display:block;width:100%;border:2px dashed var(--border);border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}.upload-zone.dragover,.upload-zone:hover{border-color:var(--accent);background:rgba(56,189,248,.05)}.upload-zone input{display:none}.muted{color:var(--muted);font-size:.9rem}.error-box{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:#fecaca;padding:.85rem 1rem;border-radius:10px;margin-top:1rem}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:1rem;gap:1rem}.preview-img{width:100%;border-radius:10px;border:1px solid var(--border);background:#0b1220}.face-list{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.face-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;border-radius:8px;border:1px solid var(--border);background:var(--surface2);cursor:pointer}.face-item.selected{border-color:var(--accent);box-shadow:0 0 0 1px rgba(56,189,248,.35)}.trait-grid{grid-gap:.75rem}.trait-grid,.trait-row{display:grid;gap:.75rem}.trait-row{grid-template-columns:7rem 1fr 4.5rem;align-items:center;grid-gap:.75rem}.trait-bar-bg{height:10px;background:#0b1220;border-radius:999px;overflow:hidden}.trait-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2))}.trait-spectrum{margin-top:.25rem}.trait-spectrum-labels{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.9rem;margin-bottom:.65rem}.trait-spectrum-track{position:relative;height:10px;background:linear-gradient(90deg,#1e3a5f,#0b1220 50%,#1a3d2e);border-radius:999px;border:1px solid var(--border)}.trait-spectrum-marker{position:absolute;top:50%;left:0;width:1.35rem;height:1.35rem;transform:translate(-50%,-50%);border-radius:50%;border:2.5px solid var(--accent);background:var(--surface);box-shadow:0 0 0 2px rgba(56,189,248,.2);pointer-events:none}.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:700}.badge-significant{background:rgba(52,211,153,.2);color:var(--success)}.badge-muted{background:rgba(148,163,184,.15);color:var(--muted)}.metrics-table{width:100%;border-collapse:collapse;font-size:.88rem}.metrics-table td,.metrics-table th{border-bottom:1px solid var(--border);padding:.45rem .35rem;text-align:left}.metrics-table th{color:var(--muted);font-weight:500}.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.ad-container{width:100%}.ad-label{font-size:.75rem;color:var(--muted);text-align:center;margin-bottom:.35rem;letter-spacing:.04em}.ad-box{width:100%;border-radius:10px;border:1px dashed var(--border);background:rgba(11,18,32,.55);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:.75rem}.ad-placeholder{text-align:center;padding:.5rem 1rem}.ad-placeholder-badge{display:inline-block;font-size:.7rem;font-weight:700;padding:.1rem .45rem;border-radius:4px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);margin-bottom:.35rem}.ad-placeholder-title{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.25rem}.ad-placeholder-desc{font-size:.78rem;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(8,12,20,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}.modal-card{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.35rem;box-shadow:0 20px 50px rgba(0,0,0,.5)}.modal-card-wide{max-width:680px;max-height:85vh;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.modal-tabs{display:flex;gap:.5rem;border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:1rem}.modal-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface2);color:var(--muted);border-radius:8px;padding:.45rem .9rem;font-size:.88rem;font-weight:600;cursor:pointer}.modal-tab.active{border-color:var(--accent);color:var(--accent);background:rgba(56,189,248,.12)}.modal-body{overflow-y:auto;font-size:.9rem;line-height:1.7;color:var(--text);padding-right:.25rem}.modal-body h3{font-size:.98rem;margin:1rem 0 .35rem;color:var(--accent)}.modal-body h3:first-child{margin-top:0}.modal-body p{margin:0 0 .75rem;color:var(--muted)}.footer-links{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.footer-link-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;padding:0;color:var(--accent);font-size:.85rem;text-decoration:underline;cursor:pointer}