:root{--bg:#f8f6f1;--surface:#fff;--text:#3a3a3a;--muted:#6e6e6e;--primary:#4a90a4;--primary-dark:#357286;--accent:#f4a261;--error:#d9534f;--success:#5cb85c;--shadow:0 4px 16px #00000014;--radius:16px}*{box-sizing:border-box}body{background-color:var(--bg);color:var(--text);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Microsoft YaHei,sans-serif;line-height:1.6}#app{max-width:720px;min-height:100vh;margin:0 auto;padding:24px}.app-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.app-header h1{color:var(--primary-dark);margin:0;font-size:1.6rem}.queue-badge{background:var(--surface);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:.95rem;display:flex}.badge-count{background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;min-width:28px;height:28px;font-weight:700;display:inline-flex}.app-main{flex-direction:column;gap:24px;display:flex}.message{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);padding:12px 16px}.message-error{border-left:6px solid var(--error)}.message-success{border-left:6px solid var(--success)}.message-info{border-left:6px solid var(--primary)}.import-section{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.import-section h2{margin:0 0 8px;font-size:1.25rem}.import-section p{color:var(--muted);margin:0 0 16px}.drop-zone{border:2px dashed var(--primary);border-radius:var(--radius);text-align:center;cursor:pointer;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px;padding:32px;transition:background .2s,border-color .2s;display:flex}.drop-zone:hover,.drop-zone.drag-over,.drop-zone:focus{border-color:var(--primary-dark);background:#eef7fa;outline:none}.drop-zone-icon{font-size:2rem}.paste-area{resize:vertical;border:1px solid #ddd;border-radius:12px;width:100%;margin-bottom:12px;padding:12px;font-family:inherit;font-size:1rem}.paste-area:focus{outline:2px solid var(--primary)}.btn{cursor:pointer;border:none;border-radius:10px;padding:10px 18px;font-size:1rem;transition:background .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.hint{color:var(--muted);margin:12px 0 0;font-size:.85rem}.flashcard-section{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.progress-bar{background:#e9e5dd;border-radius:999px;height:8px;margin-bottom:8px;overflow:hidden}.progress-fill{background:var(--primary);height:100%;transition:width .3s}.progress-text{text-align:center;color:var(--muted);margin:0 0 16px;font-size:.9rem}.flashcard{perspective:1000px;cursor:pointer;height:260px;margin-bottom:20px}.flashcard-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s;position:relative}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-face{backface-visibility:hidden;border-radius:var(--radius);flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;display:flex;position:absolute;box-shadow:inset 0 0 0 2px #ece9e3}.flashcard-front{background:linear-gradient(135deg,#fffaf0,#fff5e6)}.flashcard-back{background:linear-gradient(135deg,#f0f9ff,#e6f4f1);transform:rotateY(180deg)}.hanzi{color:var(--primary-dark);font-size:5rem;font-weight:700}.hanzi-back{color:var(--primary-dark);font-size:2.5rem;font-weight:700}.pinyin{color:var(--text);letter-spacing:1px;font-size:1.8rem}.phrase{color:var(--muted);font-size:1.2rem}.flip-hint{color:var(--muted);font-size:.85rem}.speak-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:999px;margin-top:8px;padding:8px 16px;font-size:1rem;transition:background .2s}.speak-btn:hover{background:#e08c48}.rating{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;display:grid}.rating-btn{cursor:pointer;color:#fff;border:none;border-radius:12px;padding:12px 8px;font-size:.95rem;transition:transform .1s,filter .2s}.rating-btn:hover{filter:brightness(1.05)}.rating-btn:active{transform:scale(.98)}.rating-1{background:#e76f51}.rating-2{background:#f4a261}.rating-3{background:#2a9d8f}.rating-4{background:#264653}.rating-hint{text-align:center;color:var(--muted);margin:0;font-size:.85rem}.empty-state{text-align:center;padding:48px 24px}.empty-illustration{margin-bottom:16px;font-size:4rem}.empty-state h2{margin:0 0 8px}.empty-state p{color:var(--muted);margin:0}@media (width<=480px){#app{padding:16px}.app-header{flex-direction:column;align-items:flex-start;gap:12px}.hanzi{font-size:4rem}.rating-btn{padding:10px 4px;font-size:.8rem}}