.header{width:100%;background:var(--sankhya-green-500);color:var(--sankhya-white);padding:10px;text-align:center;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 8px #0000001a}.header h1{font-size:2.5rem}.header p{opacity:.9;font-size:1.1rem}.header-logo{position:absolute;top:50%;left:30px;transform:translateY(-50%);display:flex;align-items:center}.header-logo img{height:80px;width:auto}.user-info{position:absolute;top:20px;right:30px;display:none}.user-profile{display:flex;align-items:center;gap:15px;background:#ffffff1a;padding:10px 15px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-avatar{width:40px;height:40px;background:#fff3;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:0}.user-avatar svg{margin-right:0!important}.user-avatar i{width:20px;height:20px;color:var(--sankhya-white)}.user-details{display:flex;flex-direction:column;text-align:left}.user-name{font-weight:600;font-size:.9rem}.user-email{font-size:.8rem;opacity:.8}.user-org{font-size:.7rem;opacity:.7;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-button{background:none;border:none;color:var(--sankhya-white);cursor:pointer;padding:8px;border-radius:50%;transition:background-color .3s ease}.logout-button:hover{background:#ffffff1a}.logout-button i{width:16px;height:16px}.auth-loading{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background:#fffffff2;z-index:9999}.auth-loading-content{text-align:center;padding:40px;background:var(--sankhya-white);border-radius:10px;box-shadow:0 10px 30px #0000001a}.auth-loading h2{color:var(--sankhya-green-500);margin-bottom:20px}.auth-loading .spinner{width:40px;height:40px;border:4px solid var(--sankhya-gray-200);border-top:4px solid var(--sankhya-green-500);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.tag{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;font-family:inherit;font-weight:500;text-decoration:none;transition:all .2s ease-in-out;cursor:default;border:1px solid transparent;white-space:nowrap;box-sizing:border-box}.tag--small{padding:4px 16px!important;font-size:12px;line-height:1.33;height:24px}.tag--medium{padding:8px 20px!important;font-size:13px;line-height:1.38;height:32px}.tag--default{background-color:var(--sankhya-gray-100);color:var(--sankhya-gray-500)}.tag--primary{background-color:var(--sankhya-green-200);color:var(--sankhya-green-600)}.tag--secondary{background-color:var(--sankhya-petroleum-100);color:var(--sankhya-petroleum-500)}.tag--outlined{background-color:transparent;color:var(--sankhya-petroleum-500);border-color:var(--sankhya-gray-300)}.tag--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.tag--clickable:hover:not(.tag--disabled){transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.tag--clickable:active:not(.tag--disabled){transform:translateY(0);box-shadow:0 1px 4px #0000001a}.tag--clickable:focus-visible{outline:2px solid var(--sankhya-green-500);outline-offset:2px}.tag--clickable.tag--default:hover:not(.tag--disabled){background-color:var(--sankhya-gray-200);color:var(--sankhya-gray-500)}.tag--clickable.tag--primary:hover:not(.tag--disabled){background-color:var(--sankhya-green-300);color:var(--sankhya-green-600)}.tag--clickable.tag--secondary:hover:not(.tag--disabled){background-color:var(--sankhya-petroleum-200);color:var(--sankhya-petroleum-400)}.tag--clickable.tag--outlined:hover:not(.tag--disabled){background-color:var(--sankhya-gray-100);border-color:var(--sankhya-green-500);color:var(--sankhya-green-600)}.tag--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tag--clickable:focus{outline:none}.tag[type=button]{background:none;border:none;margin:0;font:inherit;text-align:inherit}.tag--clickable.tag--default[type=button]{background-color:var(--sankhya-gray-100);border:1px solid transparent}.tag--clickable.tag--primary[type=button]{background-color:var(--sankhya-green-200);border:1px solid transparent}.tag--clickable.tag--secondary[type=button]{background-color:var(--sankhya-petroleum-100);border:1px solid transparent}.tag--clickable.tag--outlined[type=button]{background-color:transparent;border:1px solid var(--sankhya-gray-300)}@media (max-width: 768px){.tag--medium{padding:4px 12px!important;font-size:12px;height:28px}.tag--small{padding:2px 8px!important;font-size:11px;height:22px}}.input-section{margin-bottom:30px}.input-section h2{color:var(--sankhya-petroleum-500);margin-bottom:15px;font-size:1.5rem}.prompt-input{width:100%;min-height:150px;padding:20px;border:2px solid var(--sankhya-gray-200);border-radius:10px;font-size:1.2rem;font-family:inherit;resize:vertical;transition:border-color .3s ease}.prompt-input:focus{outline:none;border-color:var(--sankhya-green-500)}.generate-btn{background:var(--sankhya-green-500);color:var(--sankhya-white);border:none;padding:15px 30px;font-size:1.1rem;border-radius:10px;cursor:pointer;transition:all .3s ease;margin-top:15px}.generate-btn:hover{background:var(--sankhya-green-600);transform:translateY(-2px)}.generate-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.examples-tags{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;margin-bottom:20px}.example-item{background:#fff;padding:10px 15px;border-radius:5px;margin-bottom:8px;cursor:pointer;transition:background .2s ease}.example-item:hover{background:var(--sankhya-green-200)}.loading-progress{margin:10px 0;padding:10px;background:var(--sankhya-white, #ffffff);border-radius:12px;box-shadow:0 4px 16px #0000001a}.thinking-message{text-align:center;font-size:18px;font-weight:500;color:var(--sankhya-petroleum-500, #1e293b);margin-bottom:10px;animation:fade-pulse 2s ease-in-out infinite}@keyframes fade-pulse{0%,to{opacity:.6}50%{opacity:1}}.steps-track{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding:20px}.step-circle{display:flex;flex-direction:column;align-items:center;gap:16px;flex:1;position:relative;z-index:2}.circle-inner{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:all .3s ease;background:var(--sankhya-gray-200, #e5e7eb);color:var(--sankhya-gray-500, #6b7280)}.step-circle.pending .circle-inner{background:var(--sankhya-gray-200, #e5e7eb);color:var(--sankhya-gray-500, #6b7280)}.step-circle.processing .circle-inner{background:var(--sankhya-green-500, #008561);color:#fff;animation:pulse-circle 1.5s ease-in-out infinite;box-shadow:0 0 #008561b3}@keyframes pulse-circle{0%{transform:scale(1);box-shadow:0 0 #008561b3}50%{transform:scale(1.05);box-shadow:0 0 0 15px #00856100}to{transform:scale(1);box-shadow:0 0 #00856100}}.step-circle.completed .circle-inner{background:var(--sankhya-green-500, #008561);color:#fff;transform:scale(1)}.step-number{font-size:32px;font-weight:700}.check-icon{width:40px;height:40px;stroke-width:3;animation:check-appear .3s ease-out}@keyframes check-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.step-label{text-align:center;font-size:14px;font-weight:500;color:var(--sankhya-petroleum-500, #1e293b);max-width:150px;line-height:1.4}.step-circle.processing .step-label{color:var(--sankhya-green-500, #008561);font-weight:600}.step-circle.completed .step-label{color:var(--sankhya-green-500, #008561)}.step-line{flex:1;height:4px;background:var(--sankhya-gray-200, #e5e7eb);margin:38px -10px 0;position:relative;z-index:1;transition:background .3s ease}.step-line.completed{background:var(--sankhya-green-500, #008561)}.result-container{animation:slide-up .5s ease-out}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.result-title{font-size:24px;font-weight:700;color:var(--sankhya-petroleum-500, #1e293b);margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--sankhya-green-500, #008561);text-align:center}.result-section{margin-bottom:30px;padding:20px;background:var(--sankhya-gray-50, #f9fafb);border-radius:12px;border-left:4px solid var(--sankhya-green-500, #008561)}.result-section h4{font-size:18px;font-weight:600;color:var(--sankhya-petroleum-500, #1e293b);margin:0 0 16px}.component-card{background:#fff;padding:16px;border-radius:8px;border:1px solid var(--sankhya-gray-200, #e5e7eb);position:relative;transition:all .2s ease}.component-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:var(--sankhya-green-500, #008561)}.component-name{font-size:16px;font-weight:600;color:var(--sankhya-green-500, #008561);margin-bottom:8px;font-family:Courier New,monospace}.component-reason{font-size:14px;line-height:1.5;color:var(--sankhya-gray-700, #374151);margin-bottom:12px}.priority-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase}.priority-badge.high{background:var(--sankhya-red-error, #ef4444);color:#fff}.priority-badge.medium{background:var(--sankhya-yellow-alert, #fbbf24);color:var(--sankhya-petroleum-500, #1e293b)}.priority-badge.low{background:var(--sankhya-gray-300, #d1d5db);color:var(--sankhya-gray-700, #374151)}.plan-description{font-size:14px;line-height:1.6;color:var(--sankhya-gray-700, #374151);margin:0}.result-explanation{margin-bottom:24px;padding:20px;background:var(--sankhya-gray-50, #f9fafb);border-radius:8px;border-left:4px solid var(--sankhya-green-500, #008561)}.result-explanation h4{font-size:16px;font-weight:600;color:var(--sankhya-petroleum-500, #1e293b);margin:0 0 12px}.result-explanation p{font-size:14px;line-height:1.6;color:var(--sankhya-gray-700, #374151);margin:0}.result-code{margin-top:20px}.result-code h4{font-size:16px;font-weight:600;color:var(--sankhya-petroleum-500, #1e293b);margin:0 0 12px}.result-code pre{background:var(--sankhya-petroleum-500, #1e293b);color:var(--sankhya-white, #ffffff);padding:20px;border-radius:8px;overflow-x:auto;font-family:Courier New,monospace;font-size:13px;line-height:1.5;margin:0}.result-code code{font-family:Courier New,monospace}@media (max-width: 768px){.loading-progress{padding:20px 15px;margin:20px 0}.steps-track{flex-direction:column;padding:10px;gap:30px}.step-circle{flex-direction:row;justify-content:flex-start;width:100%;gap:12px}.circle-inner{width:60px;height:60px;flex-shrink:0}.step-number{font-size:24px}.check-icon{width:30px;height:30px}.step-label{text-align:left;max-width:none;font-size:14px}.step-line{display:none}.thinking-message{font-size:20px;margin-bottom:30px}.result-title{font-size:20px}.result-section{padding:15px}.result-section h4{font-size:16px}}.tab-navigation{display:flex;border-bottom:2px solid #e0e0e0;background:#f8f9fa}.tab{display:flex;align-items:center;gap:8px;padding:16px 24px;background:none;border:none;cursor:pointer;border-bottom:3px solid transparent;font-weight:500;color:#666;transition:all .2s ease;position:relative;outline:none}.tab:hover{background:#e9ecef;color:#333}.tab.active{border-bottom-color:#008561;color:#008561;font-weight:600;background:#fff}.tab.pulsing{animation:pulse-tab 2s infinite}@keyframes pulse-tab{0%{background:#f8f9fa;transform:scale(1)}50%{background:#0085611a;transform:scale(1.02)}to{background:#f8f9fa;transform:scale(1)}}.tab .icon-small{width:18px;height:18px}.tab-badge{background:#008561;color:#fff;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600;min-width:16px;text-align:center;margin-left:4px}.tab.active .tab-badge{background:#006b4e}.tab:focus{outline:none;box-shadow:inset 0 0 0 2px #008561}@media (max-width: 768px){.tab-navigation{flex-wrap:wrap}.tab{padding:12px 16px;font-size:14px}}.progress-display{max-width:none;text-align:left}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.progress-header h3{margin:0;color:#333;font-size:20px;font-weight:600;display:flex;align-items:center;gap:8px}.streaming-indicator{display:flex;align-items:center;gap:8px;color:#008561;font-weight:500;font-size:14px}.streaming-dot{width:8px;height:8px;background:#008561;border-radius:50%;animation:pulse-dot 1.5s infinite}@keyframes pulse-dot{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}.progress-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#666;text-align:center}.progress-empty-state .icon-large{width:48px;height:48px;color:#ccc;margin-bottom:16px}.progress-empty-state h3{margin:0 0 12px;color:#333;font-size:18px}.progress-empty-state p{margin:0 0 24px;color:#666;max-width:400px}.generation-controls{display:flex;flex-direction:column;gap:16px;align-items:center}.prompt-preview{background:#f8f9fa;padding:12px 16px;border-radius:6px;border-left:3px solid #008561;max-width:500px;font-size:14px;color:#666}.start-generation-btn,.start-streaming-btn{background:#008561;color:#fff;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.start-generation-btn:hover,.start-streaming-btn:hover{background:#006b4e;transform:translateY(-1px)}.start-generation-btn:focus,.start-streaming-btn:focus{outline:none;box-shadow:0 0 0 3px #0085614d}.progress-timeline{display:flex;flex-direction:column;gap:16px}.progress-step{display:flex;gap:16px;padding:16px;background:#f8f9fa;border-radius:8px;border-left:4px solid #ddd;transition:all .3s ease;animation:slideInLeft .3s ease-out}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.progress-step.step{border-left-color:#efb103;background:#efb1031a}.progress-step.step_complete{border-left-color:#008561;background:#0085611a}.progress-step.step_warning{border-left-color:#bd0025;background:#bd00251a}.progress-step.error{border-left-color:#bd0025;background:#bd002526}.step-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px}.step-content{flex:1}.step-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.step-title{font-weight:600;color:#333;margin:0}.step-timestamp{font-size:12px;color:#999;font-family:monospace}.step-reasoning{padding:8px 12px;background:#ffffffb3;border-radius:6px;margin:8px 0;display:flex;align-items:center;gap:8px;font-style:italic;color:#555;border-left:2px solid #008561}.step-result{padding:6px 10px;background:#0085611a;border-radius:4px;font-size:13px;margin-top:4px;display:flex;align-items:center;gap:6px;color:#006b4e}.step-warning{padding:6px 10px;background:#bd00251a;border-radius:4px;font-size:13px;margin-top:4px;display:flex;align-items:center;gap:6px;color:#bd0025}.progress-error{background:#ffebee;border:1px solid #ef5350;border-radius:8px;padding:20px;margin-top:20px;display:flex;align-items:flex-start;gap:12px}.progress-error .icon{width:20px;height:20px;color:#c62828;flex-shrink:0;margin-top:2px}.progress-error h4{margin:0 0 8px;color:#c62828;font-size:16px}.progress-error p{margin:0;color:#c62828;font-size:14px}@media (max-width: 768px){.progress-header{flex-direction:column;align-items:flex-start;gap:12px}.progress-step{flex-direction:column;gap:12px}.step-header{flex-direction:column;gap:8px}}.components-list{max-width:none}.components-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.components-header h3{margin:0;color:#333;font-size:20px;font-weight:600}.screen-type-badge{display:flex;align-items:center;gap:6px;background:#f8f9fa;padding:6px 12px;border-radius:16px;font-size:14px;color:#666;border:1px solid #e9ecef}.components-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:32px}.component-card{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:20px;transition:all .2s ease}.component-card:hover{border-color:#008561;box-shadow:0 2px 8px #0085611a;transform:translateY(-2px)}.component-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.component-name{margin:0;font-size:16px;font-weight:600;color:#333}.priority-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase}.priority-high{background:#fee;color:#c53030}.priority-medium{background:#fff3cd;color:#856404}.priority-low{background:#d1ecf1;color:#0c5460}.component-reason{margin:0;font-size:15px;color:#666;line-height:1.5;text-align:left}.reasoning-summary{background:#f8f9fa;padding:20px;border-left:4px solid #008561}.reasoning-summary h3{margin:0 0 16px;color:#333;font-size:16px;display:flex;align-items:center;gap:8px}.reasoning-summary h5{margin:16px 0 8px;color:#333;font-size:14px;font-weight:600}.reasoning-summary p{margin:0 0 16px;color:#555;text-align:left}.analysis-steps ul{margin:0;padding-left:20px;list-style-type:disc}.analysis-steps li{margin-bottom:8px;color:#555;text-align:left}@media (max-width: 768px){.components-header{flex-direction:column;align-items:flex-start;gap:12px}.components-grid{grid-template-columns:1fr}}.code-block{background:#1e1e1e;border:1px solid #2d2d2d;border-radius:8px;margin:20px;overflow:hidden;box-shadow:0 2px 8px #00000026}.code-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#2d2d2d;border-bottom:1px solid #3e3e3e}.file-name{display:flex;align-items:center;gap:8px;font-family:Consolas,Courier New,monospace;font-size:13px;font-weight:500;color:#ccc}.copy-button{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#0e639c;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease}.copy-button:hover{background:#17b;transform:translateY(-1px)}.copy-button.copied{background:#0e7a0d}.copy-button:focus{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #008561}.copy-button .icon-small{width:14px;height:14px}.code-block pre{margin:0!important}.code-block pre code{font-family:Consolas,Monaco,Courier New,monospace!important;font-size:15px!important;line-height:1.6!important;max-height:800px}.code-block pre::-webkit-scrollbar{width:12px;height:12px}.code-block pre::-webkit-scrollbar-track{background:#1e1e1e}.code-block pre::-webkit-scrollbar-thumb{background:#424242;border-radius:6px}.code-block pre::-webkit-scrollbar-thumb:hover{background:#4e4e4e}@media (max-width: 768px){.code-block{margin:16px}.code-header{flex-direction:column;align-items:flex-start;gap:12px}.copy-button{align-self:flex-start}}.implementation-plan{max-width:none}.plan-header{padding:10px;margin-bottom:32px}.plan-header h3{margin:0 0 16px;color:#333;font-size:24px;font-weight:600}.plan-description{margin:0 0 16px;color:#666;font-size:16px;line-height:1.6;text-align:left}.time-estimate{display:flex;align-items:center;gap:6px;color:#008561;font-size:14px;font-weight:500}.implementation-steps{display:flex;flex-direction:column;gap:24px}.implementation-step{background:#fff;border:1px solid #e9ecef;border-radius:12px;overflow:hidden}.implementation-step .step-header{display:flex;align-items:flex-start;gap:16px;padding:20px;background:#f8f9fa;border-bottom:1px solid #e9ecef}.step-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#008561;color:#fff;border-radius:50%;font-weight:600;font-size:14px;flex-shrink:0}.step-info{flex:1}.step-info .step-title{margin:0 0 8px;color:#333;font-size:18px;font-weight:600}.step-info .step-description{margin:0;color:#666;font-size:14px;line-height:1.5;text-align:left}@media (max-width: 768px){.implementation-step .step-header{flex-direction:column;align-items:flex-start;gap:12px}}.reasoning-display{display:flex;flex-direction:column;gap:32px}.reasoning-section{background:#f8f9fa;padding:8px;border-left:4px solid #008561}.reasoning-section h3{display:flex;align-items:center;gap:8px;margin:0 0 20px;color:#333;font-size:18px;font-weight:600}.reasoning-section h5{margin:20px 0 12px;color:#333;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}.reasoning-content{color:#555;line-height:1.6;text-align:left}.reasoning-content p{margin:0 0 16px;text-align:left}.reasoning-content strong{color:#333}.reasoning-item{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;border:1px solid #e9ecef;transition:all .2s ease}.reasoning-item:hover{border-color:#008561;box-shadow:0 2px 8px #0085611a}.reasoning-item h5{margin:0 0 12px;color:#333;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}.reasoning-item p{margin:0 0 16px;color:#555;line-height:1.6;text-align:left}.analysis-steps-list,.architectural-decisions{margin:0;padding-left:20px;list-style-type:disc}.analysis-steps-list li,.architectural-decisions li{margin-bottom:8px;color:#555;text-align:left}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#666;text-align:center}.empty-state .icon-large{width:48px;height:48px;color:#ccc;margin-bottom:16px}.empty-state h3{margin:0 0 12px;color:#333;font-size:18px}.empty-state p{margin:0;color:#666;max-width:400px}@media (max-width: 768px){.reasoning-section{padding:16px}}.screen-result{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000000d;overflow:hidden;margin:20px 0}.tab-content{padding:4px;text-align:left}.icon-small{width:16px;height:16px}.icon-large{width:24px;height:24px}.icon{width:20px;height:20px}.loading-spinner{text-align:center;padding:40px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #008561;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.tab-content{padding:16px}}