:root{--purple: #7A5AF8;--purple-dark: #5B3FD6;--purple-soft: #ECE7FF;--pink: #FF6FB5;--pink-soft: #FFE3F1;--yellow: #FFC83D;--yellow-soft: #FFF3CF;--mint: #2BD673;--mint-soft: #E3FBEE;--over: #FF5D6C;--ink: #2D2154;--muted: #9088B8;--card: #FFFFFF;--line: #EFE9FC;--bg: #FFF9FC;--primary: var(--purple);--primary-dark: var(--purple-dark);--radius: 22px;--radius-lg: 28px;--font-head: "Fredoka", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif;--shadow: 0 10px 30px rgba(124, 76, 224, .14)}.mode-parent{--bg: #F6F5FB;--primary: var(--purple-dark);--radius: 16px;--radius-lg: 20px;--font-head: "Nunito", system-ui, sans-serif;--shadow: 0 6px 20px rgba(45, 33, 84, .08)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--ink);background:#ece7ff;-webkit-font-smoothing:antialiased;line-height:1.5}.app{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;position:relative}.screen{flex:1;overflow-y:auto;padding:8px 18px 96px}.screen.center{display:flex;flex-direction:column;justify-content:center}.topbar{display:flex;align-items:center;gap:10px;padding:18px 16px 8px}.topbar .back{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.topbar h1{font-family:var(--font-head);font-size:22px;letter-spacing:-.3px}.topbar .sub{color:var(--muted);font-size:13px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}.card.flat{border:none}.card.purple{background:var(--primary);color:#fff;border:none}.card.purple .muted,.card.purple .label{color:#fffc}.card.soft{background:var(--purple-soft);border:none}.card.mint{background:var(--mint-soft);border:none}.card.yellow{background:var(--yellow-soft);border:none}.card.pink{background:var(--pink-soft);border:none}.label{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}.muted{color:var(--muted)}.h2{font-family:var(--font-head);font-size:24px;letter-spacing:-.4px;line-height:1.15}.big{font-family:var(--font-head);font-size:40px;letter-spacing:-1px;line-height:1}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.col{display:flex;flex-direction:column}.center-col{display:flex;flex-direction:column;align-items:center;text-align:center}.gap8>*+*{margin-top:8px}.gap14>*+*{margin-top:14px}.spacer{flex:1}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700}.pill.green{background:var(--mint-soft);color:#14854a}.pill.amber{background:var(--yellow-soft);color:#8a6a00}.pill.purple{background:var(--purple-soft);color:var(--purple-dark)}.pill.pink{background:var(--pink-soft);color:#c13f86}.pill.red{background:#ffe3e6;color:#b00020}.btn{display:block;width:100%;text-align:center;border:none;cursor:pointer;padding:15px;border-radius:var(--radius);font-size:16px;font-weight:700;font-family:var(--font-head);color:#fff;background:var(--primary)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:transparent;color:var(--primary);border:2px solid var(--primary)}.btn.pink{background:var(--pink)}.btn.small{width:auto;padding:9px 16px;font-size:14px;border-radius:12px}.btn+.btn{margin-top:10px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)}.input{width:100%;padding:14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);font-size:16px;font-family:var(--font-body);color:var(--ink)}.input:focus{outline:none;border-color:var(--primary)}.codebox{letter-spacing:8px;text-align:center;font-family:var(--font-head);font-size:30px}.meter{height:12px;border-radius:999px;background:var(--line);overflow:hidden}.meter>span{display:block;height:100%;border-radius:999px;background:var(--primary)}.meter.over>span{background:var(--over)}.dial-wrap{display:flex;align-items:center;gap:14px}.dial{position:relative;width:84px;height:84px;flex-shrink:0}.dial svg{transform:rotate(-90deg)}.dial .dial-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.dial .dial-num b{font-family:var(--font-head);font-size:20px}.dial .dial-num small{font-size:10px;color:var(--muted)}.cat-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.tabbar{position:sticky;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));max-width:460px;margin:0 auto;width:100%}.tabbar a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:11px;font-weight:700}.tabbar a .ico{display:block;font-size:20px;margin-bottom:2px}.tabbar a.active{color:var(--primary)}.lrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.lrow:last-child{border-bottom:none}.lrow .grow{flex:1}.banner{border-radius:14px;padding:13px 14px;font-size:13.5px;font-weight:600;margin-bottom:14px}.banner.err{background:#ffe3e6;color:#b00020}.banner.info{background:var(--purple-soft);color:var(--purple-dark)}.logo{font-family:var(--font-head);font-weight:700;font-size:52px;color:var(--purple-dark);letter-spacing:-1.5px}.logo span{color:var(--pink)}.spinner{width:38px;height:38px;border-radius:50%;border:4px solid var(--purple-soft);border-top-color:var(--primary);animation:spin .8s linear infinite;margin:24px auto}@keyframes spin{to{transform:rotate(360deg)}}.tappable{cursor:pointer}a.plain{color:var(--primary);font-weight:700;text-decoration:none;cursor:pointer}