:root {
            --bg: #FFF8E7;
            --card: #FFFFFF;
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --text: #2C3E50;
            --text-light: #7F8C8D;
            --shadow: 0 8px 32px rgba(0,0,0,0.08);
            --radius: 24px;
            --radius-sm: 14px;
            --font-main: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        body{
            font-family:var(--font-main);background:var(--bg);
            background-image:
                radial-gradient(circle at 10% 20%, rgba(255,107,107,0.06) 0%, transparent 50%),
                radial-gradient(circle at 85% 75%, rgba(78,205,196,0.06) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(255,230,109,0.04) 0%, transparent 60%);
            min-height:100vh;color:var(--text);overflow-x:hidden;
        }
        .floating-decor{
            position:fixed;pointer-events:none;z-index:0;
            font-size:48px;opacity:0.12;animation:floatAround 20s infinite ease-in-out;
        }
        .floating-decor:nth-child(1){top:8%;left:5%;animation-delay:0s;font-size:42px}
        .floating-decor:nth-child(2){top:15%;right:8%;animation-delay:-5s;font-size:56px}
        .floating-decor:nth-child(3){bottom:20%;left:10%;animation-delay:-10s;font-size:38px}
        .floating-decor:nth-child(4){bottom:12%;right:6%;animation-delay:-15s;font-size:50px}
        @keyframes floatAround{
            0%,100%{transform:translate(0,0) rotate(0deg)}
            25%{transform:translate(20px,-15px) rotate(5deg)}
            50%{transform:translate(-10px,-25px) rotate(-3deg)}
            75%{transform:translate(-20px,10px) rotate(4deg)}
        }
        .modal-overlay{
            position:fixed;inset:0;background:rgba(0,0,0,0.5);
            backdrop-filter:blur(6px);z-index:1000;
            display:flex;align-items:center;justify-content:center;
        }
        .modal{
            background:var(--card);border-radius:var(--radius);
            box-shadow:var(--shadow);padding:40px 36px;
            max-width:500px;width:90%;position:relative;
            animation:modalPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
        }
        @keyframes modalPop{0%{transform:scale(0.8);opacity:0}100%{transform:scale(1);opacity:1}}
        .modal h2{
            font-size:28px;text-align:center;margin-bottom:8px;
            background:linear-gradient(135deg,var(--primary),#FF8E53);
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;
        }
        .modal .subtitle{text-align:center;color:var(--text-light);margin-bottom:28px;font-size:14px}
        .modal .mascot{text-align:center;font-size:64px;margin-bottom:12px;animation:bounce 1s infinite}
        @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;font-weight:700;margin-bottom:8px;font-size:15px;color:var(--text)}
        .select-box,.input-box{
            width:100%;padding:14px 18px;border:3px solid #E8E8E8;
            border-radius:var(--radius-sm);font-size:16px;font-family:inherit;
            transition:all 0.3s;background:#FAFAFA;
        }
        .select-box{
            appearance:none;-webkit-appearance:none;cursor:pointer;
            background:#FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237F8C8D' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat right 14px center;
        }
        .select-box:focus,.input-box:focus{outline:none;border-color:var(--secondary);background:#fff}
.range-wrap{display:flex;align-items:center;gap:14px}
.range-slider{flex:1;-webkit-appearance:none;appearance:none;height:8px;border-radius:8px;background:#E8E8E8;outline:none;cursor:pointer}
.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#FF8E53);cursor:pointer;box-shadow:0 2px 8px rgba(255,107,107,0.3);transition:transform 0.15s}
.range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.range-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#FF8E53);cursor:pointer;border:none;box-shadow:0 2px 8px rgba(255,107,107,0.3)}
.range-value{font-size:18px;font-weight:700;color:var(--primary);min-width:50px;text-align:center}
        .btn{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            padding:14px 32px;border:none;border-radius:50px;
            font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;
            transition:all 0.3s;letter-spacing:0.5px;
        }
        .btn-primary{
            background:linear-gradient(135deg,var(--primary),#FF8E53);
            color:#fff;box-shadow:0 6px 20px rgba(255,107,107,0.35);
            width:100%;font-size:18px;
        }
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,107,107,0.45)}
        .btn-secondary{background:#fff;color:var(--primary);border:3px solid var(--primary)}
        .btn-secondary:hover{background:#FFF0F0}
        .btn-ghost{background:transparent;color:var(--text-light);font-size:14px;text-decoration:underline;padding:8px 16px}
        .btn-ghost:hover{color:var(--text)}
        .btn-small{padding:8px 20px;font-size:14px;border-radius:30px}
        .learn-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1}
        .learn-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 36px;max-width:520px;width:90%;text-align:center}
        .learn-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
        .progress-bar-wrap{flex:1;height:10px;background:#EEE;border-radius:10px;overflow:hidden;margin:0 16px}
        .progress-bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--secondary),#45B7AA);transition:width 0.5s ease}
        .progress-text{font-size:13px;color:var(--text-light);white-space:nowrap}
        .word-display{font-size:48px;font-weight:800;margin:20px 0 8px;letter-spacing:1px}
        .phonetic-display{color:var(--text-light);font-size:16px;margin-bottom:8px}
        .btn-pronounce{background:none;border:2px solid #E0E0E0;border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer;transition:all 0.3s;margin-bottom:16px;display:inline-flex;align-items:center;justify-content:center}
        .btn-pronounce:hover{border-color:var(--secondary);background:#F0FDF9;transform:scale(1.1)}
        .btn-pronounce:active{transform:scale(0.95)}
        .choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
        .choice-btn{padding:16px;border:3px solid #E8E8E8;border-radius:var(--radius-sm);background:#FAFAFA;cursor:pointer;font-size:15px;font-family:inherit;transition:all 0.25s;text-align:center;font-weight:500}
        .choice-btn:hover:not(.disabled){border-color:var(--secondary);background:#F0FDF9;transform:translateY(-2px);box-shadow:0 4px 12px rgba(78,205,196,0.2)}
        .choice-btn.correct{border-color:#27AE60;background:#E8F8EF;color:#27AE60;font-weight:700}
        .choice-btn.wrong{border-color:#E74C3C;background:#FDEDEC;color:#E74C3C;font-weight:700;animation:shake 0.5s}
        .choice-btn.disabled{pointer-events:none}
        @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
        .feedback{margin-top:16px;padding:12px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:15px}
        .feedback.correct{background:#E8F8EF;color:#27AE60}
        .feedback.wrong{background:#FDEDEC;color:#E74C3C}
        .btn-next{margin-top:16px;padding:12px 40px;background:var(--secondary);color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.3s;box-shadow:0 4px 14px rgba(78,205,196,0.3)}
        .btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(78,205,196,0.45)}
        .skip-area{margin-top:24px;text-align:center}
        .home-page{position:relative;z-index:1;min-height:100vh}
        .top-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;max-width:1200px;margin:0 auto}
        .brand{font-size:22px;font-weight:800;color:var(--primary)}
        .top-bar-actions{display:flex;gap:10px;align-items:center}
        .settings-trigger{position:relative}
        .settings-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:20px;line-height:1;cursor:pointer;border-radius:50%;background:var(--card);border:2px solid #E8E8E8;transition:all 0.3s}
        .settings-icon:hover{background:#F0F0F0;border-color:#CCC}
        .settings-dropdown{position:absolute;top:48px;right:0;background:var(--card);border-radius:var(--radius-sm);box-shadow:0 8px 30px rgba(0,0,0,0.12);min-width:160px;overflow:hidden;z-index:200}
        .settings-option{padding:14px 20px;cursor:pointer;font-size:15px;font-weight:500;transition:background 0.2s;white-space:nowrap}
        .settings-option:hover{background:#F0FDF9}
        .settings-option.danger{color:#E74C3C}
        .settings-option.danger:hover{background:#FFF0F0}
        .greeting{text-align:center;padding:30px 20px 10px;font-size:28px;font-weight:700}
        .greeting .emoji{font-size:40px;display:block;margin-bottom:6px}
        .daily-stats{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;padding:12px 20px}
        .stat-chip{background:var(--card);border-radius:50px;padding:10px 20px;box-shadow:0 2px 10px rgba(0,0,0,0.05);font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
        .stat-chip .icon{font-size:18px}
        .search-box-wrap{max-width:600px;margin:20px auto;padding:0 20px;position:sticky;top:12px;z-index:100;display:flex;align-items:stretch;gap:0}
        .search-engine{position:relative;flex-shrink:0}
        .engine-icon{display:flex;align-items:center;justify-content:center;width:48px;height:52px;font-size:22px;line-height:1;cursor:pointer;background:var(--card);border:3px solid #E8E8E8;border-right:none;border-radius:50px 0 0 50px;transition:all 0.3s}
        .engine-icon:hover{border-color:var(--secondary);background:#F0FDF9}
        .engine-dropdown{position:absolute;top:58px;left:0;background:var(--card);border-radius:var(--radius-sm);box-shadow:0 8px 30px rgba(0,0,0,0.12);min-width:150px;overflow:hidden;z-index:200}
        .engine-option{padding:13px 20px;cursor:pointer;font-size:15px;font-weight:500;transition:background 0.2s;white-space:nowrap}
        .engine-option:hover{background:#F0FDF9}
        .engine-option.active{background:#E8F8EF;color:#27AE60;font-weight:700}
        .search-input{flex:1;padding:0 24px;border:3px solid #E8E8E8;border-radius:0 50px 50px 0;font-size:16px;font-family:inherit;transition:all 0.3s;background:var(--card);height:52px;line-height:52px;box-shadow:0 2px 10px rgba(0,0,0,0.04)}
        .search-input:focus{outline:none;border-color:var(--secondary)}
        .links-section{max-width:1000px;margin:24px auto;padding:0 20px}
        .section-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}
        .section-title::after{content:'';flex:1;height:2px;background:#EEE;border-radius:1px}
        .links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:14px}
        .link-card{background:var(--card);border-radius:var(--radius-sm);padding:18px 10px;text-align:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.04);transition:all 0.3s;text-decoration:none;color:var(--text);position:relative;border:2px solid transparent}
        .link-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.1);border-color:var(--secondary)}
        .link-card .link-icon{font-size:36px;margin-bottom:8px;display:block}
        .link-card .link-name{font-size:12px;font-weight:600;word-break:break-all}
        .link-card .link-delete{position:absolute;top:4px;right:8px;width:22px;height:22px;border-radius:50%;background:#FFE0E0;color:#E74C3C;border:none;font-size:12px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1}
        .link-card:hover .link-delete{display:flex}
        .add-link-card{background:#FAFAFA;border:3px dashed #DDD;border-radius:var(--radius-sm);padding:18px 10px;text-align:center;cursor:pointer;transition:all 0.3s;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px}
        .add-link-card:hover{border-color:var(--secondary);background:#F0FDF9}
        .add-link-card .add-icon{font-size:36px;color:#CCC}
        .add-link-card .add-text{font-size:12px;color:var(--text-light);margin-top:4px}
        .footer{text-align:center;padding:30px;color:var(--text-light);font-size:13px;line-height:1.8}
        .icp-link{color:var(--text-light);text-decoration:none}
        .icp-link:hover{color:var(--primary)}
        .complete-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1}
        .complete-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 36px;text-align:center;max-width:480px;width:90%}
        .complete-icon{font-size:80px;animation:bounce 0.6s infinite}
        .complete-card h2{font-size:26px;margin:16px 0 8px}
        .complete-card p{color:var(--text-light);margin-bottom:24px}
        .book-cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
        .book-card{flex:1;min-width:90px;padding:16px 12px;border:3px solid #E8E8E8;border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:all 0.3s;background:#FAFAFA}
        .book-card:hover{border-color:#CCC;background:#FFF}
        .book-card.active{border-color:var(--secondary);background:#F0FDF9}
        .book-card .book-icon{font-size:32px;display:block;margin-bottom:6px}
        .book-card .book-name{font-size:13px;font-weight:700}
        .book-card .book-count{font-size:11px;color:var(--text-light)}
        @media (max-width:600px){
            .links-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
            .word-display{font-size:36px}
            .choices-grid{grid-template-columns:1fr}
            .modal{padding:28px 20px}
            .learn-card{padding:28px 20px}
            .greeting{font-size:22px}
        }