:root{--cosmos: #16172E;--cosmos2: #1E2042;--glow: #6FD4C4;--novi: #8FE3C8;--gold: #E8B86D;--cream: #F5E6D3;--peach: #D98E7A;--lilac: #9B8BB4;--ink: #0e0f20;--muted: #b0aacf;--card-bg: rgba(30, 32, 66, .55);--card-border: rgba(111, 212, 196, .18)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;background:radial-gradient(ellipse at 50% -10%,#20224a 0%,var(--cosmos) 55%,#0c0d1c 100%);color:var(--cream);font-family:-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.55;overflow-x:hidden}#root{height:100%}.stars{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--dur, 3s) var(--delay, 0s) infinite ease-in-out}@keyframes twinkle{0%,to{opacity:.08;transform:scale(1)}50%{opacity:.9;transform:scale(1.2)}}.app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:20px 16px 96px;min-height:100vh}.h1{font-size:22px;font-weight:700;letter-spacing:.2px}.h2{font-size:17px;font-weight:600}.muted{color:var(--muted);font-size:13.5px}.center{text-align:center}.mt{margin-top:12px}.mt2{margin-top:22px}.card{background:linear-gradient(160deg,rgba(111,212,196,.1),var(--card-bg));border:1px solid var(--card-border);border-radius:20px;padding:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:var(--gold);color:var(--ink);font-weight:600;font-size:15px;border:none;border-radius:14px;cursor:pointer;margin-top:10px;transition:opacity .15s,transform .1s}.btn:active{opacity:.85;transform:scale(.98)}.btn.ghost{background:transparent;color:var(--cream);border:1px solid rgba(111,212,196,.3)}.btn.soft{background:#6fd4c424;color:var(--cream)}.btn.danger{background:#d98e7a2e;color:var(--peach)}.input{width:100%;margin-top:10px;background:#0e0f2080;border:1px solid rgba(155,139,180,.28);border-radius:12px;padding:13px 14px;color:var(--cream);font-size:15px;outline:none;transition:border-color .2s}.input:focus{border-color:var(--glow)}.input::placeholder{color:#7a7498}.row{display:flex;gap:10px}.row>*{flex:1}.big3{display:flex;gap:10px;margin-top:16px}.big3-item{flex:1;text-align:center;background:#7b6fd41f;border:1px solid rgba(123,111,212,.22);border-radius:16px;padding:14px 6px}.big3-icon{font-size:22px}.big3-label{font-size:10.5px;color:var(--gold);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}.big3-value{font-size:13px;margin-top:3px;font-weight:600}.chat-wrap{display:flex;flex-direction:column;gap:4px;padding-bottom:96px}.bubble{max-width:84%;padding:11px 15px;font-size:14.5px;line-height:1.55;border-radius:18px}.bubble.novi{background:linear-gradient(160deg,#6fd4c42e,#7b6fd41f);border:1px solid rgba(111,212,196,.2);border-bottom-left-radius:5px;align-self:flex-start}.bubble.me{background:var(--gold);color:var(--ink);border-bottom-right-radius:5px;align-self:flex-end;margin-left:auto}.chat-bar{position:fixed;bottom:64px;left:0;right:0;z-index:6;max-width:520px;margin:0 auto;display:flex;gap:8px;padding:10px 16px;background:#0e0f20f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(111,212,196,.1)}.chat-bar input{flex:1;background:#ffffff0f;border:1px solid rgba(111,212,196,.25);border-radius:22px;padding:11px 16px;color:var(--cream);font-size:14.5px;outline:none}.chat-bar input:focus{border-color:var(--glow)}.chat-bar button{background:var(--gold);color:var(--ink);border:none;border-radius:50%;width:43px;height:43px;font-size:17px;cursor:pointer;flex-shrink:0}.pill{display:inline-block;background:#e8b86d24;color:var(--gold);font-size:11.5px;padding:5px 12px;border-radius:999px;margin:4px 4px 0 0;border:1px solid rgba(232,184,109,.25)}.pill.teal{background:#6fd4c41f;color:var(--glow);border-color:#6fd4c440}.compat-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.compat-row:last-child{border-bottom:none}.tone-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.tone-dot.harmony{background:var(--glow)}.tone-dot.tension{background:var(--peach)}.tone-dot.neutral{background:var(--muted)}.nav{position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;justify-content:space-around;background:#0e0f20f0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(111,212,196,.15);padding:8px 4px calc(8px + env(safe-area-inset-bottom))}.nav-btn{background:none;border:none;color:var(--muted);font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 10px;cursor:pointer;transition:color .15s}.nav-btn.active{color:var(--glow)}.nav-icon{font-size:20px;line-height:1}.person-card{display:flex;align-items:center;gap:12px;padding:14px;margin-top:10px;background:#6fd4c40f;border:1px solid rgba(111,212,196,.15);border-radius:16px;cursor:pointer}.person-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--lilac),var(--glow));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}