*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#262626;color:#eee}body{padding-bottom:78px}.topbar{height:80px;border-bottom:1px solid #111;display:flex;align-items:center;padding:0 22px;gap:48px;background:#2b2b2b;position:sticky;top:0;z-index:20}.brand{display:none}.topbar nav{display:flex;gap:46px;height:100%;align-items:center}.topbar nav a, .topbar nav .nav-link{font-size:23px;font-weight:700;color:#ddd;text-decoration:none;cursor:pointer}.topbar nav a.active, .topbar nav .nav-link.active{color:#11cbe0}.diamond{color:#0ed5e9}.top-actions{margin-left:auto;display:flex;gap:10px;align-items:center}.credits{color:#5ee9f5;font-size:14px}.ghost{border:0;background:transparent;color:#ddd;padding:10px 14px;cursor:pointer}.primary{border:0;border-radius:10px;background:#08c4d6;color:white;font-size:17px;font-weight:700;padding:12px 28px;cursor:pointer;box-shadow:0 5px 20px #00c8dc22}.primary.small{font-size:14px;padding:9px 16px}.primary.full{width:100%;margin-top:12px}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:32px 14px 18px;gap:20px}.chips{display:flex;gap:18px;flex-wrap:wrap}.chip{border:0;border-radius:30px;background:#333;color:#aaa;padding:12px 24px;font-size:18px;font-weight:700;cursor:pointer}.chip.selected,.chip:hover{background:#3d3d3d;color:#ddd}.tools{display:flex;gap:14px}.circle{width:40px;height:40px;border-radius:50%;border:0;background:#303030;color:#ddd;font-size:23px;cursor:pointer}.searchbar{padding:0 14px 18px}.searchbar input{width:100%;background:#333;border:1px solid #4a4a4a;border-radius:12px;padding:15px 18px;color:#fff;font-size:16px;outline:none}.hidden{display:none}.section-head{display:flex;align-items:center;padding:0 14px 10px}.section-head h2{font-size:22px;font-weight:500;margin:0}.section-head span{color:#888;margin-left:12px}.voice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 14px}.voice-card{background:#3b3b3b;border-radius:15px;min-height:112px;padding:16px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:.15s;border:1px solid transparent}.voice-card:hover{background:#444;border-color:#4f4f4f;transform:translateY(-1px)}.avatar{width:80px;height:80px;border-radius:8px;object-fit:cover;background:#5a4e65;flex:none}.voice-info{min-width:0}.voice-name{font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice-meta{font-size:17px;color:#999;margin-top:7px}.voice-badge{font-size:12px;color:#11d5ea;margin-left:5px}.play{margin-left:auto;width:38px;height:38px;border:0;border-radius:50%;background:#4b4b4b;color:#fff;cursor:pointer;flex:none}.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:72px;background:#303030;border-top:1px solid #151515;display:flex;align-items:center;padding:0 10px;z-index:30}.follow{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}.follow input{width:23px;height:23px;accent-color:#08c4d6}.bottom-bar .primary{margin-left:auto}.modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal.show{display:flex}.modal-card{position:relative;width:min(680px,100%);background:#303030;border:1px solid #444;border-radius:18px;padding:28px;box-shadow:0 30px 80px #0008}.small-card{width:min(430px,100%)}.reader-card{width:min(900px,100%)}.close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:#aaa;font-size:30px;cursor:pointer}.modal-title{font-size:24px;font-weight:800;margin-bottom:18px}.modal-card input,.modal-card textarea{width:100%;background:#252525;border:1px solid #4a4a4a;border-radius:10px;color:#fff;padding:13px 14px;margin:7px 0;outline:none;font-size:15px}.modal-card textarea{height:220px;resize:vertical;line-height:1.7}.selected-voice{display:flex;align-items:center;gap:12px;background:#383838;border-radius:10px;padding:10px;margin-bottom:10px}.selected-voice img{width:48px;height:48px;border-radius:7px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:14px 0}.controls label{color:#bbb;font-size:14px}.controls input{margin:8px 0 0;padding:0}.reader-actions{display:flex;align-items:center;justify-content:space-between}.muted{color:#999}.check{display:flex!important;align-items:center;gap:8px;color:#aaa;font-size:14px;margin-top:8px}.check input{width:auto!important}.result{margin-top:16px}.result audio{width:100%}.error{color:#ff8888}.success{color:#63e7d5}@media(max-width:900px){.voice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{gap:25px}.topbar nav{gap:24px}.topbar nav a, .topbar nav .nav-link{font-size:19px}.chips{gap:8px}.chip{font-size:15px;padding:10px 16px}}@media(max-width:620px){.topbar{height:64px;padding:0 12px}.topbar nav{gap:17px}.topbar nav a, .topbar nav .nav-link{font-size:16px}.topbar nav a:nth-child(2),.topbar nav a:nth-child(3){display:none}.voice-grid{grid-template-columns:1fr}.voice-card{min-height:96px}.avatar{width:68px;height:68px}.toolbar{padding-top:18px}.tools{display:none}.controls{grid-template-columns:1fr}.bottom-bar{height:64px}.bottom-bar .primary{font-size:15px;padding:10px 16px}.follow{font-size:14px}}

.topbar nav .nav-link{border:0;background:transparent;cursor:pointer;padding:0;font:inherit;color:#ddd}
.floating-menu{position:fixed;right:18px;top:122px;z-index:60;background:#333;border:1px solid #4b4b4b;border-radius:12px;padding:7px;box-shadow:0 15px 40px #0008;display:flex;flex-direction:column;min-width:140px}
.floating-menu.hidden{display:none}
.floating-menu button{border:0;background:transparent;color:#ddd;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer}
.floating-menu button:hover{background:#444}
.empty-state{grid-column:1/-1;text-align:center;padding:70px 20px;color:#999}
.history-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.history-item{background:#383838;border-radius:12px;padding:13px;display:flex;align-items:center;gap:16px}
.history-item>div{min-width:0;flex:1}
.history-item audio{width:280px;max-width:45%}
@media(max-width:620px){.history-item{flex-direction:column;align-items:stretch}.history-item audio{max-width:100%;width:100%}}