*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f0f0f;--bg-card: #1a1a1a;--text: #e8e8e8;--text-dim: #888;--radius: 16px}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}#root{height:100vh}.app{height:100vh;display:flex;flex-direction:column}.tab-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.tab-bar{display:flex;border-top:1px solid #222;background:var(--bg);flex-shrink:0}.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 10px;background:none;border:none;color:var(--text-dim);cursor:pointer;-webkit-tap-highlight-color:transparent}.tab-btn.active{color:var(--text)}.tab-icon{font-size:20px}.tab-label{font-size:11px;font-weight:600}.genre-screen{padding:24px 16px;display:flex;flex-direction:column;flex:1;overflow:hidden}.title{font-size:28px;font-weight:800;text-align:center;margin-bottom:4px}.subtitle{font-size:14px;color:var(--text-dim);text-align:center;margin-bottom:24px}.genre-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}.genre-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--bg-card);border:2px solid transparent;border-radius:var(--radius);cursor:pointer;transition:all .2s;padding:20px 12px;-webkit-tap-highlight-color:transparent}.genre-card:active{transform:scale(.96)}.genre-card:hover{border-color:var(--genre-color);box-shadow:0 0 20px color-mix(in srgb,var(--genre-color) 30%,transparent)}.genre-emoji{font-size:36px}.genre-label{font-size:15px;font-weight:600;color:var(--text)}.status-bar{text-align:center;padding:16px 0 8px;font-size:13px;color:var(--text-dim)}.premium-badge{background:linear-gradient(135deg,#f5a623,#f7c948);color:#000;padding:4px 14px;border-radius:20px;font-weight:700;font-size:12px}.remaining strong{color:var(--text)}.reader-screen{display:flex;flex-direction:column;flex:1;overflow:hidden}.reader-content{flex:1;overflow-y:auto;padding:24px 20px;line-height:1.7;font-size:16px;scroll-behavior:smooth}.story-text{white-space:pre-wrap;word-wrap:break-word}.dropcap{float:left;font-size:64px;line-height:52px;font-weight:800;margin-right:8px;margin-top:4px;font-family:Georgia,Times New Roman,serif}.cursor{animation:blink .8s step-end infinite;font-weight:100;color:var(--text-dim)}@keyframes blink{50%{opacity:0}}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--text-dim)}.spinner{width:36px;height:36px;border:3px solid #333;border-top-color:#888;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.reader-actions{display:flex;gap:10px;padding:12px 16px 24px;background:linear-gradient(to top,var(--bg) 60%,transparent)}.btn{flex:1;padding:14px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s;-webkit-tap-highlight-color:transparent}.btn:active{opacity:.8}.btn-primary{color:#fff}.btn-secondary{background:var(--bg-card);color:var(--text)}.limit-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:32px;text-align:center;gap:16px}.limit-icon{font-size:64px}.limit-screen h2{font-size:22px;font-weight:700}.limit-text{font-size:14px;color:var(--text-dim);line-height:1.6;max-width:300px}.limit-screen .btn{width:100%;max-width:280px;margin-top:8px}.btn-premium{background:linear-gradient(135deg,#f5a623,#f7c948);color:#000;font-weight:700}.btn-premium:disabled{opacity:.5}.limit-error{font-size:13px;color:#e53935}.history-btn{background:none;border:1px solid #333;color:var(--text-dim);padding:6px 16px;border-radius:20px;font-size:13px;cursor:pointer;margin-bottom:8px;-webkit-tap-highlight-color:transparent}.history-btn:active{background:#222}.history-screen{display:flex;flex-direction:column;flex:1;overflow:hidden}.history-header{display:flex;align-items:center;gap:12px;padding:16px}.back-btn{background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;padding:4px 8px;-webkit-tap-highlight-color:transparent}.history-header h2{font-size:20px;font-weight:700}.history-list{flex:1;overflow-y:auto;padding:0 16px 24px}.history-empty{text-align:center;color:var(--text-dim);margin-top:60px;font-size:14px}.history-item{display:block;width:100%;text-align:left;background:var(--bg-card);border:1px solid transparent;border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;transition:border-color .2s;-webkit-tap-highlight-color:transparent}.history-item:active{border-color:var(--genre-color)}.history-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.history-genre{font-size:13px;font-weight:600;color:var(--text)}.history-date{font-size:11px;color:var(--text-dim)}.history-preview{font-size:13px;color:var(--text-dim);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.detective-home{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:24px;text-align:center;gap:12px}.detective-icon{font-size:56px}.detective-home h1{font-size:26px;font-weight:800}.detective-desc{color:var(--text-dim);font-size:14px;max-width:280px}.detective-rules{text-align:left;background:var(--bg-card);border-radius:12px;padding:14px 18px;width:100%;max-width:320px}.detective-rules h3{font-size:14px;margin-bottom:8px}.detective-rules ol{font-size:13px;color:var(--text-dim);padding-left:18px;line-height:1.7}.btn-detective{background:linear-gradient(135deg,#1565c0,#0d47a1);color:#fff;padding:14px 32px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;width:100%;max-width:320px;margin-top:8px;-webkit-tap-highlight-color:transparent}.btn-detective:disabled{opacity:.5}.btn-detective:active{opacity:.8}.detective-error{color:#e53935;font-size:13px}.btn-case-single{background:var(--bg-card);color:var(--text);padding:12px 32px;border:1px solid #333;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;width:100%;max-width:320px;-webkit-tap-highlight-color:transparent}.btn-case-single:disabled{opacity:.5}.case-intro{display:flex;flex-direction:column;flex:1;overflow:hidden}.case-intro-scroll{flex:1;overflow-y:auto;padding:20px 16px}.case-title{font-size:20px;font-weight:700;margin-bottom:12px;color:#90caf9}.case-description{font-size:15px;line-height:1.7;margin-bottom:20px}.case-intro-scroll h3{font-size:16px;margin-bottom:10px}.suspect-cards{display:flex;flex-direction:column;gap:10px}.suspect-card-intro{background:var(--bg-card);border-radius:12px;padding:14px;font-size:14px;line-height:1.5}.suspect-card-intro strong{color:#90caf9}.suspect-role{color:var(--text-dim);font-size:12px}.suspect-card-intro p{margin-top:6px;color:var(--text-dim);font-size:13px}.case-intro-actions{padding:12px 16px 16px}.investigation-header{display:flex;align-items:center;gap:10px;padding:10px 12px 0;flex-shrink:0}.investigation-title{font-size:15px;font-weight:600;color:#90caf9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.investigation{display:flex;flex-direction:column;flex:1;overflow:hidden}.suspect-tabs{display:flex;gap:6px;padding:10px 12px;flex-shrink:0}.suspect-tab{flex:1;padding:8px 4px;background:var(--bg-card);border:2px solid transparent;border-radius:10px;color:var(--text-dim);font-size:13px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}.suspect-tab.active{border-color:#1565c0;color:var(--text)}.suspect-info{padding:0 14px 8px;font-size:12px;color:var(--text-dim);flex-shrink:0}.chat-area{flex:1;overflow-y:auto;padding:8px 14px}.chat-hint{text-align:center;color:var(--text-dim);font-size:14px;margin-top:40px}.chat-msg{display:flex;margin-bottom:10px}.chat-msg.user{justify-content:flex-end}.chat-bubble{max-width:80%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5}.chat-msg.user .chat-bubble{background:#1565c0;color:#fff;border-bottom-right-radius:4px}.chat-msg.suspect .chat-bubble{background:var(--bg-card);color:var(--text);border-bottom-left-radius:4px}.chat-input-area{padding:8px 12px 12px;flex-shrink:0}.chat-input-row{display:flex;gap:8px;margin-bottom:8px}.chat-input{flex:1;padding:10px 14px;border-radius:20px;border:1px solid #333;background:var(--bg-card);color:var(--text);font-size:14px;outline:none}.chat-input:focus{border-color:#1565c0}.send-btn{width:42px;height:42px;border-radius:50%;border:none;background:#1565c0;color:#fff;font-size:18px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}.send-btn:disabled{opacity:.3}.btn-accuse{width:100%;padding:10px;border:2px solid #e53935;border-radius:10px;background:transparent;color:#e53935;font-size:14px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}.btn-accuse:active{background:#e5393520}.accuse-screen{display:flex;flex-direction:column;align-items:center;flex:1;padding:32px 20px;gap:12px}.accuse-screen h2{font-size:22px;font-weight:700}.accuse-hint{color:var(--text-dim);font-size:14px}.accuse-list{width:100%;display:flex;flex-direction:column;gap:10px;margin:12px 0}.accuse-option{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-card);border:2px solid transparent;border-radius:12px;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}.accuse-option.selected{border-color:#e53935}.accuse-option span{color:var(--text-dim);font-size:13px}.accuse-actions{width:100%;display:flex;flex-direction:column;gap:8px}.btn-accuse-confirm{width:100%;padding:14px;border:none;border-radius:12px;background:#e53935;color:#fff;font-size:16px;font-weight:700;cursor:pointer}.btn-accuse-confirm:disabled{opacity:.4}.result-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:32px;text-align:center;gap:16px}.result-icon{font-size:64px}.result-screen h2{font-size:22px;font-weight:700}.result-details{background:var(--bg-card);border-radius:12px;padding:16px;width:100%;text-align:left;font-size:14px;line-height:1.7}.result-details strong{color:#90caf9}