*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:#1a1a2e;color:#eee;height:100vh;overflow:hidden}.app-container{display:flex;height:100vh}.left-panel{width:60%;background:#16213e;display:flex;flex-direction:column;border-right:1px solid #0f3460}.panel-header{padding:15px 20px;background:linear-gradient(135deg,#667eea,#764ba2);font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-header-left,.panel-header-right{display:flex;align-items:center;gap:10px}.panel-header-right{gap:8px}.project-selector{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:6px 10px;color:#fff;font-size:13px;cursor:pointer;min-width:140px}.project-selector:hover{background:rgba(255,255,255,.25)}.project-selector option{background:#1a1a2e;color:#eee}.header-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:6px 12px;color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s}.header-btn:hover{background:rgba(255,255,255,.25)}.header-btn.danger{border-color:rgba(255,100,100,.5)}.header-btn.danger:hover{background:rgba(255,100,100,.3)}.confirm-dialog{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s}.confirm-dialog.show{opacity:1;visibility:visible}.confirm-dialog-box{background:#1a1a2e;border:1px solid #f66;border-radius:12px;padding:24px;max-width:400px;text-align:center}.confirm-dialog-title{font-size:18px;font-weight:600;color:#f66;margin-bottom:12px}.confirm-dialog-text{color:#c9d1d9;margin-bottom:20px}.confirm-dialog-buttons{display:flex;gap:12px;justify-content:center}.confirm-dialog-btn{padding:10px 24px;border-radius:8px;font-size:14px;cursor:pointer;border:none}.confirm-dialog-btn.cancel{background:#30363d;color:#c9d1d9}.confirm-dialog-btn.delete{background:#f66;color:#fff}.recommendations-section{padding:15px 20px;border-bottom:1px solid #0f3460;background:#1a1a2e}.rec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.rec-title{font-size:14px;color:#667eea;font-weight:600;display:flex;align-items:center;gap:8px}.rec-status{font-size:12px;color:#888;display:flex;align-items:center;gap:5px}.rec-status.analyzing{color:#f0b429}.rec-status.ready{color:#3fb950}.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ai-status-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #0f3460;border-radius:12px;padding:16px;display:flex;align-items:center;gap:16px}.ai-status-icon{font-size:32px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px}.ai-status-text{flex:1}.ai-status-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:4px}.ai-status-desc{font-size:13px;color:#8b949e;line-height:1.4}.ai-status-card.generating .ai-status-icon{animation:pulse 1.5s infinite}.ai-status-card.success{border-color:#3fb950}.ai-status-card.success .ai-status-icon{background:linear-gradient(135deg,#238636,#3fb950)}.feature-toggles-row{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.feature-toggle-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#21262d;border:1px solid #30363d;border-radius:20px;cursor:pointer;transition:all .2s;font-size:13px;color:#8b949e}.feature-toggle-chip:hover{border-color:#58a6ff;background:#161b22}.feature-toggle-chip.active{background:linear-gradient(135deg,rgba(31,111,235,.125),rgba(88,166,255,.125));border-color:#1f6feb;color:#58a6ff}.feature-toggle-chip .chip-icon{font-size:14px}.feature-toggle-chip .chip-label{font-size:12px;font-weight:500}.mini-toggle{position:relative;width:28px;height:16px;flex-shrink:0}.mini-toggle input{opacity:0;width:0;height:0}.mini-toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#30363d;transition:.2s;border-radius:16px}.mini-toggle-slider:before{position:absolute;content:"";height:12px;width:12px;left:2px;bottom:2px;background-color:#fff;transition:.2s;border-radius:50%}.mini-toggle input:checked+.mini-toggle-slider{background:linear-gradient(135deg,#1f6feb,#58a6ff)}.mini-toggle input:checked+.mini-toggle-slider:before{transform:translateX(12px)}.feature-detail-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:1000;justify-content:center;align-items:center}.feature-detail-modal.show{display:flex}.feature-detail-content{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:20px;max-width:400px;width:90%;max-height:60vh;overflow-y:auto}.feature-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #30363d}.feature-detail-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#c9d1d9}.feature-detail-close{background:0 0;border:none;color:#8b949e;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px}.feature-detail-close:hover{background:#30363d;color:#c9d1d9}.feature-detail-body{font-size:13px;color:#8b949e;line-height:1.5}.feature-detail-info{margin-top:12px;padding:10px;background:rgba(31,111,235,.1);border-radius:8px;border-left:3px solid #1f6feb}.feature-detail-info .info-row{display:flex;justify-content:space-between;margin-bottom:6px}.feature-detail-info .info-row:last-child{margin-bottom:0}.feature-detail-info .info-label{color:#6e7681}.feature-detail-info .info-value{color:#58a6ff;font-family:monospace}.rec-card{background:#16213e;border:1px solid #0f3460;border-radius:10px;padding:12px;cursor:pointer;transition:all .2s}.rec-card:hover{border-color:#667eea}.rec-card.selected{border-color:#667eea;background:rgba(102,126,234,.15)}.rec-card-title{font-size:13px;font-weight:600;margin-bottom:6px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-card-tags{display:flex;flex-wrap:wrap;gap:4px}.rec-tag{font-size:10px;padding:2px 6px;background:rgba(102,126,234,.3);border-radius:8px;color:#a5b4fc}.rec-card-reason{font-size:11px;color:#888;margin-top:6px;line-height:1.4}.config-summary{padding:12px 20px;background:#0f3460;border-bottom:1px solid #0f3460;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.config-item{display:flex;align-items:center;gap:5px;font-size:12px;padding:4px 10px;background:#1a1a2e;border-radius:12px}.config-item .label{color:#888}.config-item .value{color:#667eea;font-weight:600}.config-edit-btn{margin-left:auto;font-size:11px;color:#667eea;background:0 0;border:1px solid #667eea;padding:4px 10px;border-radius:12px;cursor:pointer;transition:all .2s}.config-edit-btn:hover{background:rgba(102,126,234,.2)}.chat-section{flex:1;display:flex;flex-direction:column;min-height:0}.chat-header{padding:12px 20px;background:#1a1a2e;border-bottom:1px solid #0f3460;font-size:14px;color:#888}.smart-options{padding:10px 20px;background:rgba(102,126,234,.1);border-bottom:1px solid #0f3460;display:none}.smart-options.show{display:block}.smart-options-title{font-size:11px;color:#667eea;margin-bottom:8px;display:flex;align-items:center;gap:5px}.smart-options-grid{display:flex;flex-wrap:wrap;gap:6px}.smart-option{padding:6px 12px;background:#16213e;border:1px solid #0f3460;border-radius:15px;font-size:12px;color:#a5b4fc;cursor:pointer;transition:all .2s}.smart-option:hover,.smart-option.selected{background:#667eea;color:#fff;border-color:#667eea}.chat-messages{flex:1;overflow-y:auto;padding:15px 20px}.ai-log{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:10px 12px;margin-bottom:10px;font-family:Monaco,Menlo,monospace;font-size:11px;max-height:120px;overflow-y:auto}.ai-log-line{color:#7ee787;margin:2px 0;display:flex;gap:8px}.ai-log-line .time{color:#6e7681;flex-shrink:0}.ai-log-line .tag{color:#58a6ff;flex-shrink:0}.ai-log-line .msg{color:#c9d1d9}.ai-log-line.error .msg{color:#f85149}.ai-log-line.thinking .msg{color:#d2a8ff}.ai-log-line.success .msg{color:#7ee787}.chat-message{margin-bottom:12px;padding:12px 16px;border-radius:12px;max-width:85%;font-size:14px;line-height:1.6}.chat-message.user{background:#667eea;margin-left:auto;border-bottom-right-radius:4px}.chat-message.ai{background:#0f3460;border-bottom-left-radius:4px}.chat-message.system{background:rgba(102,126,234,.1);border:1px dashed #667eea;text-align:center;max-width:100%;font-size:13px;color:#888}.chat-input-area{padding:15px 20px;background:#1a1a2e;border-top:1px solid #0f3460}.chat-input-wrapper{display:flex;gap:12px}.chat-input{flex:1;padding:12px 18px;background:#16213e;border:1px solid #0f3460;border-radius:24px;color:#eee;font-size:14px;resize:none}.chat-input:focus{outline:0;border-color:#667eea}.send-btn{width:48px;height:48px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}.send-btn:hover{transform:scale(1.05)}.send-btn:disabled{opacity:.5;cursor:not-allowed}.right-panel{width:40%;display:flex;flex-direction:column;background:#0d1117}.output-header{padding:15px 20px;background:#161b22;border-bottom:1px solid #30363d;display:flex;justify-content:space-between;align-items:center}.output-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}.tab-nav{display:flex;background:#161b22;border-bottom:1px solid #30363d;padding:0 20px}.tab-btn{padding:12px 20px;background:0 0;border:none;color:#8b949e;font-size:14px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;display:flex;align-items:center;gap:8px}.tab-btn:hover{color:#c9d1d9}.tab-btn.active{color:#58a6ff;border-bottom-color:#58a6ff}.tab-content{display:none;flex:1;overflow-y:auto;padding:20px;flex-direction:column;min-height:0}.tab-content.active{display:flex}.plan-document{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);border-radius:16px;padding:0;min-height:400px;max-height:100%;position:relative;overflow-y:auto}.plan-document:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}.plan-inner{padding:24px;position:relative;z-index:1}.plan-card{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(248,250,252,.98));border-radius:20px;padding:28px;margin-bottom:24px;box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 40px rgba(102,126,234,.2);transition:all .4s cubic-bezier(.175,.885,.32,1.275);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px)}.plan-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 60px rgba(102,126,234,.3)}.plan-card h2{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:20px;font-weight:700;margin:0 0 20px;padding-bottom:14px;border-bottom:3px solid;border-image:linear-gradient(90deg,#667eea,#764ba2,transparent) 1;display:flex;align-items:center;gap:12px}.plan-card p{color:#1a1a2e;line-height:1.9;margin:14px 0;font-size:15px;font-weight:400}.plan-card ul{margin:16px 0;padding-left:0;list-style:none}.plan-card li{margin:12px 0;padding:12px 16px 12px 44px;position:relative;background:linear-gradient(135deg,#f8f9ff,#eef2ff);border-radius:12px;color:#1a1a2e;font-size:14px;line-height:1.6;border-left:4px solid #667eea;box-shadow:0 2px 8px rgba(102,126,234,.1)}.plan-card li:before{content:"✓";position:absolute;left:14px;color:#fff;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;top:50%;transform:translateY(-50%)}.plan-card strong{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.plan-card code{background:linear-gradient(135deg,#e8f0ff,#f0e8ff);color:#5046e5;padding:4px 10px;border-radius:6px;font-family:SFMono-Regular,Consolas,monospace;font-size:13px;font-weight:600;border:1px solid rgba(102,126,234,.2)}.plan-card pre{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#7ee787;padding:20px;border-radius:14px;overflow-x:auto;margin:18px 0;font-size:13px;line-height:1.6;border:1px solid rgba(102,126,234,.3);box-shadow:inset 0 2px 10px rgba(0,0,0,.3)}.plan-card pre code{background:0 0;color:inherit;padding:0;border:none}.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}.tech-item{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:14px 18px;border-radius:12px;text-align:center;font-weight:600;box-shadow:0 4px 15px rgba(102,126,234,.4);transition:all .3s}.tech-item:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(102,126,234,.5)}.phase-item{padding:18px;background:linear-gradient(135deg,#f8f9ff,#fff);border-radius:14px;border-left:5px solid;border-image:linear-gradient(180deg,#667eea,#764ba2) 1;margin:14px 0;box-shadow:0 4px 15px rgba(0,0,0,.08)}.phase-item h4{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;font-size:16px;font-weight:700}.phase-item p{color:#1a1a2e;font-size:14px}.plan-placeholder{text-align:center;padding:100px 30px;color:rgba(255,255,255,.95)}.plan-placeholder-icon{font-size:72px;margin-bottom:24px;animation:float 3s ease-in-out infinite}.plan-placeholder-text{font-size:20px;font-weight:600;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.prompt-output{background:#161b22;border-radius:8px;padding:20px;flex:1;display:flex;flex-direction:column;min-height:0}.prompt-output pre{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:13px;line-height:1.6;white-space:pre-wrap;color:#7ee787;margin:0}.prompt-textarea{width:100%;flex:1;min-height:0;font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:13px;line-height:1.6;color:#7ee787;background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:16px;resize:vertical;outline:none}.prompt-textarea:focus{border-color:#58a6ff;box-shadow:0 0 0 3px rgba(88,166,255,.15)}.prompt-textarea::placeholder{color:#6e7681}.live-badge{font-size:11px;color:#3fb950;background:rgba(63,185,80,.15);padding:3px 8px;border-radius:10px;font-weight:400}.output-actions{display:flex;gap:8px}.action-btn{padding:8px 14px;background:#21262d;border:1px solid #30363d;border-radius:6px;color:#c9d1d9;font-size:12px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.action-btn:hover{background:#30363d;border-color:#8b949e}.action-btn.primary{background:#238636;border-color:#238636;color:#fff}.action-btn.primary:hover{background:#2ea043}.output-content{flex:1;overflow-y:auto;padding:16px}.markdown-output{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;color:#c9d1d9;background:#0d1117}.stats-bar{padding:10px 20px;background:#161b22;border-top:1px solid #30363d;display:flex;gap:20px;font-size:12px;color:#8b949e}.stat-item{display:flex;align-items:center;gap:5px}.stat-value{color:#58a6ff;font-weight:600}.loading{display:inline-flex;gap:4px}.loading span{width:6px;height:6px;background:#667eea;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loading span:nth-child(1){animation-delay:-.32s}.loading span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.analyzing-pulse{animation:pulse 1.5s infinite}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0d1117}::-webkit-scrollbar-thumb{background:#30363d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#484f58}.toast{position:fixed;bottom:20px;right:20px;padding:12px 20px;background:#238636;color:#fff;border-radius:8px;font-size:14px;z-index:1000;animation:slideIn .3s ease}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center}.modal-overlay.show{display:flex}.modal-content{background:#16213e;border-radius:16px;padding:25px;width:90%;max-width:500px;max-height:80vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{font-size:18px;font-weight:600}.modal-close{background:0 0;border:none;color:#888;font-size:24px;cursor:pointer}.modal-section{margin-bottom:18px}.modal-section-title{font-size:13px;color:#667eea;margin-bottom:10px;font-weight:600}.modal-options{display:flex;flex-wrap:wrap;gap:8px}.modal-chip{padding:8px 14px;background:#1a1a2e;border:1px solid #0f3460;border-radius:18px;font-size:13px;cursor:pointer;transition:all .2s}.modal-chip:hover{border-color:#667eea}.modal-chip.active{background:#667eea;border-color:#667eea;color:#fff}.modal-input{width:100%;padding:10px 14px;background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;color:#eee;font-size:14px}.modal-input:focus{outline:0;border-color:#667eea}.modal-save-btn{width:100%;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-top:10px}.modal-save-btn:hover{opacity:.9}.generate-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;padding:8px 14px;color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:600;animation:pulse-glow 2s infinite}.generate-btn:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(102,126,234,.5)}@keyframes pulse-glow{0%,100%{box-shadow:0 0 5px rgba(102,126,234,.3)}50%{box-shadow:0 0 15px rgba(102,126,234,.6)}}.tag-btn{padding:8px 14px;background:linear-gradient(135deg,#f093fb,#f5576c);border:none;border-radius:6px;color:#fff;font-size:12px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;font-weight:600}.tag-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(245,87,108,.4)}.version-section{padding:10px 20px;background:#161b22;border-bottom:1px solid #30363d}.version-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.version-title{font-size:12px;color:#8b949e;display:flex;align-items:center;gap:6px}.version-count{background:#30363d;padding:2px 8px;border-radius:10px;font-size:11px;color:#58a6ff}.version-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px}.version-chip{flex-shrink:0;padding:6px 12px;background:#21262d;border:1px solid #30363d;border-radius:16px;font-size:11px;color:#c9d1d9;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.version-chip:hover{background:#30363d;border-color:#58a6ff}.version-chip.active{background:rgba(88,166,255,.15);border-color:#58a6ff;color:#58a6ff}.version-chip .v-num{font-weight:700;color:#f093fb}.version-chip .v-name{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.version-chip .v-delete{color:#f85149;font-size:14px;margin-left:2px;opacity:0;transition:opacity .2s}.version-chip:hover .v-delete{opacity:1}.version-modal-content{background:#16213e;border-radius:16px;padding:25px;width:90%;max-width:400px}.version-input{width:100%;padding:12px 16px;background:#1a1a2e;border:1px solid #0f3460;border-radius:10px;color:#eee;font-size:14px;margin-bottom:15px}.version-input:focus{outline:0;border-color:#f093fb}.version-info{font-size:12px;color:#888;margin-bottom:15px;padding:10px;background:rgba(240,147,251,.1);border-radius:8px}.no-versions{font-size:11px;color:#6e7681;font-style:italic;padding:5px 0}.version-list::-webkit-scrollbar{height:4px}.version-list::-webkit-scrollbar-track{background:0 0}.version-list::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}.mermaid-container{background:#1a1a2e;border-radius:8px;padding:16px;margin:12px 0;overflow-x:auto}.mermaid{display:flex;justify-content:center}.version-badge{font-size:11px;background:rgba(255,255,255,.2);padding:3px 8px;border-radius:10px;font-weight:400;margin-left:8px}.rename-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;padding:2px 8px;color:#fff;font-size:11px;cursor:pointer;margin-left:6px;transition:all .2s}.rename-btn.save-btn{background:linear-gradient(135deg,#3fb950,#2ea043)}.rename-btn.save-btn:hover{background:linear-gradient(135deg,#2ea043,#238636)}.editable-name{background:#161b22;border:1px solid #30363d;border-radius:6px;color:#c9d1d9;padding:4px 8px;font-size:12px;width:140px;outline:none;transition:border-color .2s}.editable-name:focus{border-color:#58a6ff}.rename-btn:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(102,126,234,.5)}.rename-btn:disabled{opacity:.5;cursor:not-allowed}.settings-form{display:flex;flex-direction:column;gap:10px}.settings-form .modal-input{margin-bottom:0}.settings-msg{margin-top:15px;padding:10px;border-radius:8px;font-size:13px;text-align:center;min-height:20px}.otp-status{font-size:14px;margin-bottom:12px}.otp-disabled{color:#f85149}.otp-qr{text-align:center;margin:15px 0}.otp-secret{font-size:12px;color:#8b949e;margin:10px 0;text-align:center}.otp-secret code{background:#1a1a2e;padding:5px 10px;border-radius:4px;color:#58a6ff;font-size:11px}.modal-save-btn.danger{background:linear-gradient(135deg,#f85149,#da3633)}.modal-save-btn.danger:hover{opacity:.9}

/* Mobile Navigation */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#161b22;border-top:1px solid #30363d;padding:8px 0;z-index:100;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav-items{display:flex;justify-content:space-around}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;padding:8px 16px;color:#8b949e;font-size:11px;cursor:pointer;border:none;background:none}.mobile-nav-item.active{color:#58a6ff}.mobile-nav-item .nav-icon{font-size:20px;margin-bottom:4px}

/* Mobile Panel Toggle */
.mobile-panel-toggle{display:none;position:fixed;top:50%;right:0;transform:translateY(-50%);background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px 0 0 8px;padding:12px 8px;color:#fff;cursor:pointer;z-index:99;box-shadow:-2px 0 10px rgba(0,0,0,.3)}.mobile-panel-toggle svg{width:20px;height:20px}

/* Tablet (768px - 1024px) */
@media (max-width:1024px){.left-panel{width:55%}.right-panel{width:45%}.panel-header{padding:12px 15px;font-size:16px}.panel-header-left{font-size:14px}.header-btn{padding:5px 10px;font-size:12px}.project-selector{min-width:120px;font-size:12px}.feature-toggles-row{gap:6px}.feature-toggle-chip{padding:5px 8px}.feature-toggle-chip .chip-label{font-size:11px}.config-summary{padding:10px 15px}.config-item{font-size:11px;padding:3px 8px}.output-actions{gap:6px}.action-btn{padding:6px 10px;font-size:11px}.generate-btn{padding:6px 10px;font-size:11px}.tag-btn{padding:6px 10px;font-size:11px}.tab-btn{padding:10px 15px;font-size:13px}}

/* Mobile Landscape & Small Tablets (max-width: 768px) */
@media (max-width:768px){body{overflow:auto;height:auto;min-height:100vh}.app-container{flex-direction:column;height:auto;min-height:100vh}.left-panel,.right-panel{width:100%;height:auto;min-height:auto}.left-panel{order:1;border-right:none;border-bottom:1px solid #0f3460}.right-panel{order:2;min-height:60vh}.mobile-nav{display:block}.mobile-panel-toggle{display:none}.panel-header{padding:12px 15px;flex-wrap:wrap;gap:8px}.panel-header-left{width:100%;justify-content:center;font-size:15px}.panel-header-right{width:100%;justify-content:center;flex-wrap:wrap;gap:6px}.project-selector{min-width:100px;font-size:12px}.header-btn{padding:6px 10px;font-size:11px}.version-badge{display:none}.recommendations-section{padding:12px 15px}.ai-status-card{padding:12px;gap:12px}.ai-status-icon{width:40px;height:40px;font-size:24px}.ai-status-title{font-size:14px}.ai-status-desc{font-size:12px}.feature-toggles-row{gap:6px;justify-content:center}.feature-toggle-chip{padding:5px 8px}.feature-toggle-chip .chip-label{display:none}.feature-toggle-chip .chip-icon{font-size:16px}.config-summary{padding:10px 15px;justify-content:center}.config-item{font-size:11px}.config-item .label{display:none}.config-edit-btn{margin-left:10px}.chat-section{min-height:300px}.chat-header{padding:10px 15px;font-size:13px}.chat-messages{padding:12px 15px;max-height:40vh}.chat-input-area{padding:12px 15px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.chat-input{font-size:16px;padding:10px 15px}.send-btn{width:44px;height:44px}.output-header{padding:12px 15px;flex-wrap:wrap;gap:8px}.output-title{width:100%;justify-content:center;font-size:14px}.output-actions{width:100%;justify-content:center;flex-wrap:wrap;gap:6px}.action-btn,.generate-btn,.tag-btn{padding:8px 12px;font-size:11px}.tab-nav{padding:0 10px;justify-content:center}.tab-btn{padding:10px 12px;font-size:12px;flex:1;justify-content:center}.tab-content{padding:15px}.plan-document{min-height:300px;border-radius:12px}.plan-inner{padding:16px}.plan-card{padding:20px;border-radius:14px;margin-bottom:16px}.plan-card h2{font-size:16px;margin-bottom:14px;padding-bottom:10px}.plan-card p{font-size:13px;line-height:1.7}.plan-card li{padding:10px 12px 10px 38px;font-size:13px;margin:8px 0}.plan-card li:before{width:18px;height:18px;font-size:10px;left:10px}.plan-placeholder{padding:60px 20px}.plan-placeholder-icon{font-size:48px}.plan-placeholder-text{font-size:16px}.prompt-output{padding:15px}.prompt-textarea{font-size:14px;padding:12px}.version-section{padding:8px 15px}.stats-bar{padding:8px 15px;gap:15px;font-size:11px;padding-bottom:calc(60px + env(safe-area-inset-bottom))}.modal-content{padding:20px;margin:10px;max-height:90vh}.modal-title{font-size:16px}.modal-section-title{font-size:12px}.modal-chip{padding:6px 12px;font-size:12px}.modal-input{font-size:16px;padding:12px}.confirm-dialog-box{margin:15px;padding:20px}.confirm-dialog-title{font-size:16px}.confirm-dialog-text{font-size:13px}}

/* Mobile Portrait (max-width: 480px) */
@media (max-width:480px){.panel-header-left{font-size:14px}.panel-header-right{gap:4px}.header-btn{padding:5px 8px;font-size:10px}.header-btn span:not(.version-badge){display:inline}.project-selector{min-width:80px;font-size:11px;padding:5px 8px}.ai-status-card{flex-direction:column;text-align:center}.ai-status-icon{margin-bottom:8px}.feature-toggle-chip{padding:4px 6px}.mini-toggle{width:24px;height:14px}.mini-toggle-slider:before{width:10px;height:10px}.mini-toggle input:checked+.mini-toggle-slider:before{transform:translateX(10px)}.config-summary{gap:4px}.config-item{padding:3px 6px;font-size:10px}.chat-messages{max-height:35vh}.chat-message{padding:10px 12px;font-size:13px;max-width:90%}.output-actions{gap:4px}.action-btn,.generate-btn,.tag-btn{padding:6px 8px;font-size:10px}.action-btn svg,.generate-btn svg,.tag-btn svg{width:12px;height:12px}.tab-btn{padding:8px 10px;font-size:11px;gap:4px}.plan-card{padding:16px}.plan-card h2{font-size:15px;gap:8px}.plan-card p{font-size:12px}.plan-card li{font-size:12px;padding:8px 10px 8px 34px}.plan-card li:before{width:16px;height:16px;font-size:9px;left:8px}.tech-grid{grid-template-columns:1fr}.tech-item{padding:10px 14px;font-size:13px}.phase-item{padding:14px}.phase-item h4{font-size:14px}.phase-item p{font-size:12px}.version-list{gap:6px}.version-chip{padding:5px 10px;font-size:10px}.modal-options{gap:6px}.modal-chip{padding:5px 10px;font-size:11px}}.mobile-view .left-panel{display:none}.mobile-view .right-panel{display:flex;width:100%}.mobile-view.show-chat .left-panel{display:flex}.mobile-view.show-chat .right-panel{display:none}

/* Touch-friendly improvements */
@media (hover:none) and (pointer:coarse){.header-btn,.action-btn,.generate-btn,.tag-btn,.modal-chip,.feature-toggle-chip,.tab-btn,.send-btn,.version-chip{min-height:44px;min-width:44px}.chat-input{min-height:48px}.modal-save-btn,.confirm-dialog-btn{min-height:48px}.plan-card:hover{transform:none}.tech-item:hover{transform:none}}

/* Upgrade Notification */
.upgrade-notification{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,#1a472a 0%,#2d5a3d 100%);color:#fff;padding:0;z-index:10000;transform:translateY(-100%);transition:transform 0.3s ease;box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.upgrade-notification.show{transform:translateY(0)}
.upgrade-content{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 20px;flex-wrap:wrap}
.upgrade-icon{font-size:20px}
.upgrade-text{font-size:14px}
.upgrade-text strong{color:#4ade80}
.upgrade-text small{opacity:0.8;margin-left:4px}
.upgrade-btn{background:#4ade80;color:#1a472a;border:none;padding:6px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.upgrade-btn:hover{background:#22c55e;transform:scale(1.05)}
.upgrade-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0 8px;opacity:0.7;transition:opacity 0.2s}
.upgrade-close:hover{opacity:1}
@media (max-width:768px){.upgrade-content{flex-direction:column;text-align:center;gap:8px}.upgrade-close{position:absolute;top:8px;right:8px}}