* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", Microsoft YaHei, sans-serif;
        }
        body {
            background: radial-gradient(ellipse at top, #e8dff8, #dcecfb);
            min-height: 100vh;
            padding: 30px 20px;
            color: #363459;
            position: relative;
            overflow-x: hidden;
        }
        .sparkle{
            position: absolute;
            width: 6px;
            height: 6px;
            background: #ffffff;
            border-radius: 50%;
            animation: glint 6s infinite ease-in-out;
        }
        @keyframes glint{
            0%{opacity: 0.15;}
            50%{opacity: 0.65;}
            100%{opacity: 0.15;}
        }
        .container {
            max-width: 520px;
            margin: 0 auto;
            text-align: center;
        }
        .home-icon{
            font-size: 90px;
            margin: 30px 0 10px;
        }
        .glass-card {
            background: rgba(255,255,255,0.62);
            backdrop-filter: blur(16px);
            border-radius: 38px;
            padding: 36px 30px;
            box-shadow: 0 8px 26px rgba(115,85,175,0.11);
            margin-top: 26px;
            text-align: left;
        }
        h1 {
            font-size: 48px;
            font-weight: 600;
            color: #2e2c52;
        }
        .home-sub {
            font-size: 21px;
            color: #524db7;
            margin: 14px 0 42px;
        }
        input, textarea, select {
            width: 100%;
            padding: 19px 24px;
            border-radius: 30px;
            border: none;
            background: rgba(255,255,255,0.76);
            font-size: 17px;
            margin: 15px 0;
            outline: none;
            color: #363459;
        }
        .btn-purple {
            width: 100%;
            padding: 19px;
            border-radius: 30px;
            border: none;
            background: linear-gradient(90deg,#6254f1,#af47e7);
            color: #ffffff;
            font-size: 20px;
            font-weight: 500;
            cursor: pointer;
            transition: 0.25s;
            margin-top: 18px;
        }
        .btn-purple:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 20px rgba(118,78,218,0.24);
        }
        .btn-orange {
            background: linear-gradient(90deg,#f14a81,#ff773d);
        }
        .hidden {
            display: none !important;
        }
        .live-gate {
            margin: 0 auto 16px;
            max-width: 520px;
            padding: 10px 14px;
            border-radius: 16px;
            background: rgba(98,84,241,0.12);
            color: #4d3cad;
            font-size: 14px;
            text-align: center;
        }
        .step-header {
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .step-tip {
            font-size: 15px;
            color: #646477;
            margin-bottom: 24px;
            line-height: 1.55;
        }
        .flavor-wrap {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 11px;
            margin: 18px 0;
        }
        .flavor-tag {
            padding: 11px;
            background: rgba(255,255,255,0.74);
            border-radius: 18px;
            text-align: center;
            cursor: pointer;
            transition: 0.2s;
        }
        .flavor-tag.active {
            background: #af47e7;
            color: #fff;
        }
        .two-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .candy-jar {
            --jar-w: 280px;
            width: var(--jar-w);
            height: calc(var(--jar-w) * 1.36);
            margin: 26px auto;
            position: relative;
        }
        .jar-lid {
            width: calc(var(--jar-w) * 0.57);
            height: calc(var(--jar-w) * 0.125);
            margin: 0 auto;
            background: #d1c8e8;
            border-radius: 12px 12px 0 0;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        }
        .jar-neck {
            width: calc(var(--jar-w) * 0.64);
            height: calc(var(--jar-w) * 0.143);
            margin: 0 auto;
            border: 2px solid #c4bde0;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            background: linear-gradient(120deg, rgba(255,255,255,0.4), rgba(210,220,245,0.3));
        }
        .jar-body {
            width: var(--jar-w);
            height: calc(var(--jar-w) * 1.09);
            border: 2px solid #c4bde0;
            border-radius: 50%;
            background: linear-gradient(120deg, rgba(255,255,255,0.45), rgba(210,220,245,0.35));
            box-shadow: inset 0 0 30px rgba(170,155,210,0.2), inset 20px 0 20px rgba(255,255,255,0.4);
            position: relative;
            overflow: hidden;
        }
        .float-ball {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            position: absolute;
            animation: bubbleFloat 4.6s ease-in-out infinite alternate;
            box-shadow: 0 0 9px rgba(255,255,255,0.75);
        }
        @keyframes bubbleFloat {
            0% {transform: translateY(0px);}
            100% {transform: translateY(-20px);}
        }
        .gift-chest {
            width: min(320px, 86vw);
            max-width: 100%;
            min-height: 132px;
            margin: 22px auto;
            background: linear-gradient(135deg,#ff8b4a,#f14a81 58%,#b84fe8);
            border-radius: 66px;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:24px 52px;
            color:#fff;
            font-weight:600;
            line-height:1.65;
            text-align:center;
            position:relative;
            box-shadow: 0 12px 28px rgba(241,74,129,0.24), inset 0 2px 10px rgba(255,255,255,0.28);
        }
        .candy-item {
            width: 96px;
            height: 54px;
            background: linear-gradient(45deg, #ff773d, #f14a81);
            border-radius: 28px;
            margin: 10px auto;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
            user-select: none;
            position: relative;
            box-shadow: 0 8px 18px rgba(241,74,129,0.22);
        }
        .candy-item:before,
        .candy-item:after{
            content:"";
            position:absolute;
            top:13px;
            width:0;
            height:0;
            border-top:14px solid transparent;
            border-bottom:14px solid transparent;
        }
        .candy-item:before{
            left:-18px;
            border-right:24px solid #ffb996;
        }
        .candy-item:after{
            right:-18px;
            border-left:24px solid #f14a81;
        }
        .candy-item:active {
            cursor: grabbing;
        }
        .drag-home-candy{
            display: block;
            width: 1em;
            line-height: 1;
            margin: 30px auto 10px;
            cursor: grab;
            user-select: none;
        }
        .drag-home-candy:active{
            cursor: grabbing;
        }
        .jar-body .drag-home-candy{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 0;
            transform: translate(-50%, -50%);
            z-index: 2;
        }
        .tips-text {
            color: #9966cc;
            font-size: 14px;
            margin: 8px 0;
        }
        .ratio‑box{margin:15px 0;padding:12px;background:#f3f0ff;border-radius:12px;font-size:14px;line-height:1.6;}
        .data-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0;text-align:center;}
        .data-card{padding:8px;background:#ede9fa;border-radius:10px;}
        .resource-card{
            text-align:left;
            padding:16px;
            border-radius:20px;
            background:rgba(237,233,250,0.92);
            min-height:210px;
        }
        .resource-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:8px;
        }
        .resource-icon{
            font-size:26px;
        }
        .resource-score{
            color:#7a41d7;
            font-size:28px;
            font-weight:700;
        }
        .resource-name{
            color:#2e2c52;
            font-size:19px;
            font-weight:700;
        }
        .resource-source{
            display:inline-block;
            margin:6px 0 10px;
            padding:4px 10px;
            border-radius:999px;
            background:rgba(122,65,215,0.12);
            color:#6b4acb;
            font-size:13px;
        }
        .resource-question{
            color:#524db7;
            font-weight:600;
            margin-bottom:6px;
        }
        .resource-desc,.resource-examples{
            color:#4a4770;
            font-size:14px;
            line-height:1.55;
        }
        .resource-examples{
            margin-top:8px;
        }
        .report-card{
            margin:15px 0;
            padding:16px;
            background:rgba(255,255,255,0.68);
            border-radius:20px;
            line-height:1.65;
            color:#4a4770;
        }
        .report-title{
            font-weight:600;
            color:#524db7;
            margin-bottom:6px;
        }
        .mood-list{
            display:grid;
            gap:8px;
            margin:12px 0;
        }
        .mood-pill{
            padding:10px 12px;
            border-radius:16px;
            background:#f3f0ff;
            font-size:14px;
            line-height:1.5;
        }
        .impact-grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:12px;
            margin-top:12px;
        }
        .impact-card{
            padding:12px;
            border-radius:18px;
            background:#f3f0ff;
            box-shadow: inset 0 0 0 1px rgba(122,65,215,0.08);
        }
        .impact-name{
            color:#524db7;
            font-weight:600;
            margin-bottom:8px;
        }
        .impact-values{
            display:flex;
            justify-content:space-between;
            color:#646477;
            font-size:13px;
            margin-bottom:8px;
        }
        .impact-delta{
            color:#2f9b75;
            font-weight:600;
        }
        .impact-delta.negative{
            color:#d75c5c;
        }
        .impact-reason{
            margin:6px 0;
            color:#646477;
            font-size:12px;
            line-height:1.45;
        }
        .impact-reason.risk{
            color:#b45a5a;
        }
        .impact-reason.unclassified{
            color:#8a829d;
        }
        .impact-bar{
            height:10px;
            border-radius:999px;
            background:rgba(122,65,215,0.13);
            overflow:hidden;
        }
        .impact-fill{
            height:100%;
            width:0%;
            border-radius:999px;
            background:linear-gradient(90deg,#6254f1,#35c09d);
            transition:width 1.05s cubic-bezier(.2,.8,.2,1);
        }
        .impact-panel.active{
            animation: impactGlow 1.1s ease-in-out;
        }
        .jar-body.reacting{
            animation: jarReact 1.4s ease-in-out;
        }
        @keyframes impactGlow{
            0%{box-shadow:0 0 0 rgba(98,84,241,0);}
            45%{box-shadow:0 0 28px rgba(98,84,241,0.22);}
            100%{box-shadow:0 0 0 rgba(98,84,241,0);}
        }
        @keyframes jarReact{
            0%{filter:saturate(1);box-shadow:inset 0 0 30px rgba(170,155,210,0.2);}
            40%{filter:saturate(1.6);box-shadow:inset 0 0 36px rgba(175,71,231,0.38),0 0 36px rgba(98,84,241,0.22);}
            100%{filter:saturate(1);box-shadow:inset 0 0 30px rgba(170,155,210,0.2);}
        }
        .admin-stats{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:12px;
            margin:16px 0;
        }
        .stat-card{
            background:#f3f0ff;
            border-radius:12px;
            padding:12px;
            color:#4a4770;
            text-align:center;
        }
        .stat-card span{
            display:block;
            margin-top:6px;
            color:#7a41d7;
            font-size:22px;
            font-weight:600;
        }
        .dialog-backdrop{
            position:fixed;
            inset:0;
            z-index:2000;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:20px;
            background:rgba(46,44,82,0.28);
            backdrop-filter:blur(8px);
            opacity:0;
            pointer-events:none;
            transition:opacity 0.18s ease;
        }
        .dialog-backdrop.show{
            opacity:1;
            pointer-events:auto;
        }
        .dialog-card{
            width:min(360px,100%);
            padding:24px 22px 20px;
            border-radius:24px;
            background:rgba(255,255,255,0.94);
            box-shadow:0 18px 48px rgba(75,55,135,0.22);
            text-align:left;
            transform:translateY(8px) scale(0.98);
            transition:transform 0.18s ease;
        }
        .dialog-backdrop.show .dialog-card{
            transform:translateY(0) scale(1);
        }
        .dialog-title{
            color:#2e2c52;
            font-size:21px;
            font-weight:700;
            margin-bottom:10px;
        }
        .dialog-message{
            color:#4a4770;
            font-size:16px;
            line-height:1.65;
            margin-bottom:20px;
        }
        .dialog-actions{
            display:flex;
            justify-content:flex-end;
        }
        .dialog-ok{
            min-width:92px;
            padding:11px 18px;
            border:none;
            border-radius:999px;
            background:linear-gradient(90deg,#6254f1,#af47e7);
            color:#fff;
            font-size:16px;
            cursor:pointer;
        }
        @media (max-width: 900px){
            body{padding:24px 18px;}
            .container{max-width:560px;}
            .glass-card{padding:32px 28px;border-radius:30px;}
            .resource-card{min-height:190px;}
        }
        @media (max-width: 640px){
            body{padding:18px 14px;}
            .container{max-width:100%;}
            .home-icon{font-size:76px;margin:20px 0 8px;}
            .drag-home-candy{margin:20px auto 8px;}
            h1{font-size:36px;line-height:1.16;}
            .home-sub{font-size:18px;margin:12px 0 28px;}
            .glass-card{padding:24px 18px;border-radius:24px;margin-top:20px;}
            .step-header{font-size:22px;line-height:1.3;}
            input,textarea,select{padding:15px 18px;border-radius:22px;font-size:16px;margin:11px 0;}
            .btn-purple{padding:15px;border-radius:22px;font-size:18px;margin-top:14px;}
            .data-grid,.impact-grid{grid-template-columns:1fr;}
            .two-column{grid-template-columns:1fr;gap:6px;}
            .candy-jar{--jar-w:min(250px, 78vw);margin:20px auto;}
            .gift-chest{width:min(286px, 82vw);max-width:100%;min-height:118px;padding:22px 44px;}
            .resource-card{min-height:0;padding:14px;border-radius:18px;}
            .impact-values{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
        }
        @media (max-width: 380px){
            body{padding:14px 10px;}
            .home-icon{font-size:68px;}
            .drag-home-candy{margin:20px auto 8px;}
            h1{font-size:32px;}
            .glass-card{padding:20px 14px;border-radius:20px;}
            .flavor-wrap{grid-template-columns:repeat(2,1fr);}
            .candy-jar{--jar-w:min(225px, 76vw);}
            .gift-chest{width:min(250px, 78vw);max-width:100%;min-height:106px;padding:20px 36px;font-size:14px;}
            .dialog-card{padding:22px 18px 18px;border-radius:20px;}
        }