css/style.css

:root {
    --color-bg: #121212;
    --color-panel-bg: #1e1e1e;
    --color-header-bg: #2c2c2c;
    --color-border: #333;
    --color-accent: #00d4ff;
    --color-text: #e0e0e0;
    --font-main: 'Segoe UI', sans-serif;
    
    --menu-height: 40px;
    --tools-height: 45px;
    --ai-height: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-main); height: 100vh; overflow: hidden; }
#app-container { display: flex; flex-direction: column; height: 100vh; }

/* मेनू */
.menu-bar { height: var(--menu-height); background: var(--color-header-bg); display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.brand { font-weight: bold; margin-right: 20px; color: var(--color-accent); font-size: 14px; }
.nav-links { display: flex; gap: 5px; }
.nav-links a { color: var(--color-text); text-decoration: none; padding: 5px 10px; font-size: 12px; border-radius: 4px; }
.nav-links a.active { background: #3a3a3a; }
.menu-status { margin-left: auto; font-size: 10px; color: var(--color-accent); border: 1px solid var(--color-accent); padding: 2px 6px; border-radius: 4px; }

/* विंडोज */
.viewport-area { flex: 1; display: flex; align-items: center; justify-content: center; background: #000; min-height: 0; position: relative; overflow: hidden; }
.viewport { width: 98%; aspect-ratio: 1 / 1; max-height: 100%; background: #000; position: relative; border: 1px solid #2a2a2a; }
#main-canvas { width: 100%; height: 100%; display: block; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); pointer-events: none; transition: opacity 0.5s; }
.void-text { text-align: center; }
.void-text h1 { color: var(--color-accent); font-size: 22px; margin-bottom: 8px; }
.void-text p { color: #888; font-size: 12px; }

/* पॅनेल्स */
.panel { background: var(--color-panel-bg); border-top: 1px solid var(--color-border); flex-shrink: 0; overflow: hidden; }
.panel-header { background: #252525; padding: 3px 10px; font-size: 10px; font-weight: bold; color: var(--color-accent); text-transform: uppercase; }
.panel-content { padding: 5px 10px; display: flex; align-items: center; gap: 8px; height: calc(100% - 22px); overflow-x: auto; }

.tools-panel { height: var(--tools-height); }
.ai-panel { height: var(--ai-height); background: #151515; }

.tool-btn { background: #333; border: 1px solid #444; color: white; padding: 4px 8px; cursor: pointer; font-size: 11px; border-radius: 3px; white-space: nowrap; }
.tool-btn:hover { background: #444; }
.filter-label { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
input[type="range"] { width: 60px; height: 4px; }
.ai-input { flex: 1; background: #222; border: 1px solid #444; color: white; padding: 6px; border-radius: 4px; font-size: 12px; }
.ai-btn { background: var(--color-accent); color: black; border: none; padding: 6px 12px; cursor: pointer; font-weight: bold; border-radius: 4px; }

.divider { color: #555; margin: 0 5px; }