/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg-base:#040408;--bg-surface:rgba(14,14,26,0.7);--bg-card:rgba(19,19,34,0.6);--bg-card-hover:rgba(26,26,46,0.8);
    --bg-input:rgba(11,11,22,0.8);--border:rgba(255,255,255,0.08);--border-bright:rgba(124,58,237,0.3);
    --text-primary:#f0f0f8;--text-secondary:#a0a0c0;--text-muted:#606080;
    --purple:#8b5cf6;--purple-hover:#7c3aed;--purple-glow:rgba(139,92,246,0.3);
    --green:#10b981;--green-dim:rgba(16,185,129,0.15);
    --red:#ef4444;--sidebar-w:240px;
    --radius-sm:8px;--radius-md:14px;--radius-lg:20px;
    --font-sans:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;
    --glass: blur(16px) saturate(180%);
}

html{background:radial-gradient(circle at 50% -20%, #1a1a3a 0%, var(--bg-base) 70%);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;overflow-x:hidden;background:var(--bg-base)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit;background:none;border:none;outline:none}
::selection{background:var(--purple);color:#fff}

/* ===== BRAND & TAGLINE ===== */
.brand-icon{height:40px;display:flex;align-items:center;justify-content:flex-start;flex-shrink:0}
.brand-icon img{height:100%;width:auto;display:block;object-fit:contain;border-radius:var(--radius-sm);filter:drop-shadow(0 0 12px var(--purple))}
.brand-text{font-weight:700;font-size:1.2rem;letter-spacing:1px;color:#fff}
.tagline{font-size:0.9rem;color:var(--purple);font-weight:500;max-width:450px;line-height:1.4;margin-left:2.5rem;border-left:2px solid var(--purple);padding-left:1.5rem;text-shadow:0 0 10px var(--purple-glow)}

/* ===== 3D SCENE ===== */
.dashboard-3d-scene{
    flex:1;
    display:flex;
    flex-direction:column;
    perspective: 2000px;
    padding: 1.5rem;
    perspective-origin: center top;
}

/* ===== SIDEBAR ===== */
.sidebar{
    width:var(--sidebar-w);
    background:var(--bg-surface);
    backdrop-filter:var(--glass);
    border-right:1px solid var(--border);
    display:none;
    flex-direction:column;
    padding:1.5rem 1rem;
    position:fixed;
    top:1rem;
    left:1rem;
    bottom:1rem;
    border-radius:var(--radius-lg);
    z-index:50;
    box-shadow: 20px 0 50px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.05);
    transform: rotateY(5deg);
    transform-style: preserve-3d;
}
body:not(.guest) .sidebar{display:flex}
.sidebar-brand{display:flex;align-items:center;gap:.65rem;padding:.25rem .5rem;margin-bottom:2rem}
.nav-item{
    display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-radius:var(--radius-md);
    color:var(--text-secondary);font-size:.9rem;font-weight:500;transition:all .3s;
}
.nav-item:hover{color:#fff;background:rgba(255,255,255,0.05)}
.nav-item.active{color:#fff;background:linear-gradient(135deg, var(--purple), #6366f1);box-shadow:0 10px 20px rgba(124,58,237,0.3)}

/* ===== MAIN WRAPPER ===== */
.main-wrapper{flex:1;display:flex;flex-direction:column;min-height:100vh;width:100%}
body:not(.guest) .main-wrapper{margin-left:calc(var(--sidebar-w) + 1rem)}

/* ===== HEADERS ===== */
.topbar, .app-header{
    display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;
}
body:not(.guest) .topbar{display:none}
body.guest .app-header{display:none}
.topbar-left{display:flex;align-items:center}
.topbar-brand{display:flex;align-items:center;gap:.65rem}

/* ===== 3D PANELS ===== */
.view{
    display:none;
    flex-direction:column;
    flex:1;
    transform-style: preserve-3d;
    transform: rotateX(4deg) rotateY(-2deg);
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.view:hover{transform: rotateX(2deg) rotateY(-1deg)}
.view.active{display:flex}
.editor-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;flex:1;min-height:0}

.editor-panel{
    display:flex;
    flex-direction:column;
    background:var(--bg-surface);
    backdrop-filter:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.editor-panel:hover{
    transform: translateZ(30px) translateY(-5px);
    border-color: var(--border-bright);
}

.panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.02)}
.panel-title{display:flex;align-items:center;gap:.6rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase}
.code-editor{flex:1;resize:none;padding:1.5rem;font-family:var(--font-mono);font-size:.9rem;line-height:1.8;background:transparent;color:#d8b4fe}
.code-editor.output{color:#6ee7b7}
.editor-divider{display:flex;align-items:center;justify-content:center;width:20px;color:var(--purple);font-size:1.5rem}

/* ===== ACTION BAR ===== */
.action-bar{
    display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;
    margin-top:2rem;background:var(--bg-surface);backdrop-filter:var(--glass);
    border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transform: translateZ(50px);
}
.model-badge{background:rgba(139,92,246,0.1);border:1px solid var(--border-bright);padding:0.4rem 0.8rem;border-radius:8px;font-weight:600;color:var(--purple);font-size:0.75rem}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.5rem;border-radius:var(--radius-md);
    font-size:.9rem;font-weight:600;transition:all 0.3s;
}
.btn-primary{background:linear-gradient(135deg, var(--purple), #6366f1);color:#fff;box-shadow: 0 4px 15px rgba(124,58,237,0.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow: 0 8px 25px rgba(124,58,237,0.5)}
.btn-secondary{background:rgba(255,255,255,0.05);color:#fff;border:1px solid var(--border)}
.btn-secondary:hover{background:rgba(255,255,255,0.08)}
.btn-block{width:100%;justify-content:center}
.btn-glow{animation: btnGlow 3s infinite}
@keyframes btnGlow{
    0%, 100%{box-shadow: 0 0 15px rgba(124,58,237,0.3)}
    50%{box-shadow: 0 0 30px rgba(124,58,237,0.6)}
}

/* ===== AUTH MODAL ===== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(2,2,6,0.85);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;z-index:1000}
.auth-card{background:#0e0e1a;border:1px solid var(--border-bright);padding:2.5rem;border-radius:var(--radius-lg);width:400px;position:relative;box-shadow: 0 50px 100px rgba(0,0,0,0.8)}
.close-modal{position:absolute;top:1rem;right:1rem;font-size:1.5rem;color:var(--text-muted)}
.auth-header{text-align:center;margin-bottom:2rem}
.auth-header img{height:50px;margin-bottom:1rem}
.auth-header h2{font-size:1.5rem;margin-bottom:0.5rem}
.auth-header p{font-size:0.9rem;color:var(--text-secondary)}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;font-size:0.75rem;font-weight:600;color:var(--text-muted);margin-bottom:0.5rem;text-transform:uppercase}
.form-group input{width:100%;padding:0.85rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);color:#fff}
.form-group input:focus{border-color:var(--purple)}
.auth-footer{text-align:center;margin-top:1.5rem;font-size:0.85rem;color:var(--text-secondary)}
.auth-footer a{color:var(--purple);font-weight:600}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--bg-surface);backdrop-filter:var(--glass);border:1px solid var(--border-bright);padding:0.75rem 1.5rem;border-radius:50px;color:#fff;font-weight:600;z-index:2000;box-shadow:0 10px 30px rgba(0,0,0,0.5)}

.hidden{display:none!important}
@media(max-width:1100px){.tagline{display:none}.editor-grid{grid-template-columns:1fr}.editor-divider{display:none}}

/* Additional Components */
.btn-icon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border-color: var(--purple);
}

/* History Enhanced Styles */
.card-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
    color: var(--text-muted);
}

.card-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.card-actions {
    display: flex;
    gap: 8px;
}

.history-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-surface);
    backdrop-filter: var(--glass);
    border: 1px solid var(--border);
    padding: 1.25rem;
    border-radius: var(--radius-md);
}

.card-body code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--purple);
    display: block;
    line-height: 1.4;
}

.card-footer {
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 8px;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.lang-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 1.8rem;
    margin-right: 8px;
    border: 1px solid var(--purple);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.2);
}

.panel-actions {
    display: flex;
    align-items: center;
}

.lang-select {
    font-weight: 600;
    font-size: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
}