/* Full app styles inlined for GitHub Pages */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo { display: flex; align-items: center; gap: 15px; }
.logo-icon {
    font-size: 18px; font-weight: 700; color: #74b9ff;
    padding: 6px 10px; border: 1px solid rgba(116,185,255,0.5); border-radius: 6px;
}
.logo h1 {
    font-size: 28px; font-weight: 700;
    background: linear-gradient(45deg, #74b9ff, #00cec9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.subtitle { font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 400; }

.main-container {
    padding: 30px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 20px;
    height: calc(100vh - 120px);
}
.architecture-panel { grid-column: 1 / -1; }
.results-panel, .code-panel { grid-column: span 1; }

.panel {
    background: rgba(255,255,255,0.05); backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.panel h2 { font-size: 24px; font-weight: 600; margin-bottom: 25px; color: #74b9ff; }

.architecture-selection { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; margin-bottom: 30px; }
.arch-column h3 { text-align: center; margin-bottom: 20px; font-size: 18px; font-weight: 500; color: rgba(255,255,255,0.8); }
.arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.arch-card {
    background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1);
    border-radius: 15px; padding: 20px; text-align: center; cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden;
}
.arch-card::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg,transparent,rgba(116,185,255,0.1),transparent); transition:left .5s; }
.arch-card:hover::before{ left:100%; }
.arch-card:hover{ border-color:#74b9ff; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(116,185,255,0.3); }
.arch-card.active{ border-color:#00cec9; background: rgba(0,206,201,0.1); box-shadow: 0 0 30px rgba(0,206,201,0.3); }
.arch-icon{ font-size:36px; margin-bottom:10px; }
.arch-name{ font-size:16px; font-weight:600; margin-bottom:5px; }
.arch-specs{ font-size:12px; color: rgba(255,255,255,0.6); }

.transpilation-arrow{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.arrow{ font-size:48px; color:#74b9ff; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.1);opacity:.7}}

.transpile-btn{ background: linear-gradient(45deg,#74b9ff,#0984e3); border:none; border-radius:50px; padding:15px 30px; color:white; font-size:16px; font-weight:600; cursor:pointer; transition:all .3s ease; position:relative; overflow:hidden; min-width:150px; height:50px; }
.transpile-btn:hover{ transform: translateY(-2px); box-shadow:0 10px 25px rgba(116,185,255,0.4); }
.transpile-btn.loading{ pointer-events:none; }
.btn-text,.btn-loading{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:opacity .3s ease; }
.btn-loading{ opacity:0; }
.transpile-btn.loading .btn-text{ opacity:0; }
.transpile-btn.loading .btn-loading{ opacity:1; }
.loading-spinner{ width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-top:2px solid white; border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.model-selection h3{ margin-bottom:15px; font-size:18px; color: rgba(255,255,255,0.8); }
.model-tabs{ display:flex; gap:10px; }
.model-tab{ background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:25px; padding:12px 24px; color: rgba(255,255,255,0.7); font-size:14px; cursor:pointer; transition: all .3s ease; }
.model-tab:hover{ border-color:#74b9ff; color:white; }
.model-tab.active{ background: linear-gradient(45deg,#00cec9,#00b894); border-color:#00cec9; color:white; }

.results-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
.status-indicator{ display:flex; align-items:center; gap:10px; }
.status-dot{ width:12px; height:12px; border-radius:50%; background:#00cec9; animation: breathe 2s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{opacity:1} 50%{opacity:.5} }
.status-text{ font-size:14px; color: rgba(255,255,255,0.8); }

.metrics-container{ display:flex; flex-direction:column; gap:20px; margin-bottom:30px; }
.metric-card{ background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:15px; padding:20px; transition: all .3s ease; }
.metric-card:hover{ border-color:#74b9ff; box-shadow:0 5px 20px rgba(116,185,255,0.2); }
.metric-label{ font-size:14px; color: rgba(255,255,255,0.6); margin-bottom:10px; }
.metric-value{ font-size:32px; font-weight:700; color:#00cec9; margin-bottom:15px; }
.metric-bar{ width:100%; height:6px; background: rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.metric-fill{ height:100%; background: linear-gradient(90deg,#74b9ff,#00cec9); border-radius:3px; transition: width 1s ease; }

.optimizations-section h3{ margin-bottom:20px; font-size:18px; color: rgba(255,255,255,0.8); }
.optimizations-list{ max-height:200px; overflow-y:auto; background: rgba(0,0,0,0.2); border-radius:10px; padding:15px; }
.optimization-placeholder{ text-align:center; color: rgba(255,255,255,0.5); font-style:italic; padding:20px; }
.optimization-item{ background: rgba(0,206,201,0.1); border:1px solid rgba(0,206,201,0.3); border-radius:8px; padding:12px; margin-bottom:10px; font-size:14px; animation: slideInRight .5s ease; }
@keyframes slideInRight{ from{ transform: translateX(100%); opacity:0 } to{ transform: translateX(0); opacity:1 } }

.code-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
.code-controls{ display:flex; gap:10px; }
.code-btn{ background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:8px 16px; color:white; font-size:12px; cursor:pointer; transition: all .3s ease; }
.code-btn:hover{ background: rgba(116,185,255,0.2); border-color:#74b9ff; }
.code-container{ height: calc(100% - 80px); display:flex; flex-direction:column; }
.code-tabs{ display:flex; gap:5px; margin-bottom:15px; }
.code-tab{ background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px 8px 0 0; padding:10px 20px; color: rgba(255,255,255,0.7); font-size:12px; cursor:pointer; transition: all .3s ease; }
.code-tab.active{ background: rgba(116,185,255,0.1); border-color:#74b9ff; color:white; }
.code-preview{ flex:1; background: rgba(0,0,0,0.4)!important; border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:20px!important; font-family:'JetBrains Mono','Fira Code',Consolas,monospace; font-size:13px; line-height:1.6; overflow:auto; margin:0!important; }
.code-preview code{ color:#e8e8e8!important; }
.code-split{ display:grid; grid-template-columns: 1fr 1fr; gap:15px; height:100%; }
.code-pane{ display:flex; flex-direction:column; }
.code-pane-header{ font-size:12px; color: rgba(255,255,255,0.7); margin-bottom:8px; }

.loading-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(15,15,35,0.95); backdrop-filter: blur(10px); display:flex; justify-content:center; align-items:center; z-index:1000; opacity:0; visibility:hidden; transition: all .3s ease; }
.loading-overlay.active{ opacity:1; visibility:visible; }
.loading-content{ text-align:center; color:white; }
.loading-spinner-large{ width:60px; height:60px; border:4px solid rgba(255,255,255,0.1); border-top:4px solid #74b9ff; border-radius:50%; animation: spin 1s linear infinite; margin:0 auto 30px; }
.loading-text{ font-size:24px; font-weight:600; margin-bottom:15px; }
.loading-details{ font-size:16px; color: rgba(255,255,255,0.7); }

.success-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,206,201,0.1); backdrop-filter: blur(10px); display:flex; justify-content:center; align-items:center; z-index:1001; opacity:0; visibility:hidden; transition: all .5s ease; }
.success-overlay.active{ opacity:1; visibility:visible; }
.success-content{ text-align:center; color:white; background: rgba(0,206,201,0.2); border:2px solid #00cec9; border-radius:20px; padding:40px; }
.success-message{ font-size:28px; font-weight:700; margin-bottom:15px; }
.success-details{ font-size:16px; color: rgba(255,255,255,0.8); }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,0.1); border-radius:4px; }
::-webkit-scrollbar-thumb{ background: linear-gradient(45deg,#74b9ff,#00cec9); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(45deg,#0984e3,#00b894); }

@media (max-width: 1200px){ .main-container{ grid-template-columns:1fr; grid-template-rows:auto auto auto; } .architecture-panel,.results-panel,.code-panel{ grid-column:1; } }
@media (max-width: 768px){ .architecture-selection{ grid-template-columns:1fr; gap:30px; } .arch-grid{ grid-template-columns:1fr; } .transpilation-arrow .arrow{ transform: rotate(90deg); } }