/* --- HEADER STYLES (UPDATED) --- */
header { 
    height: 50px; 
    background: #1e1e1e; 
    border-bottom: 1px solid #333; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 10px; 
    flex-shrink: 0; 
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.control-cluster {
    display: flex;
    gap: 2px;
    background: #2a2a2a;
    padding: 2px;
    border-radius: 4px;
    border: 1px solid #333;
}

.divider {
    width: 1px;
    height: 24px;
    background: #444;
    margin: 0 4px;
}

/* Compact Inputs */
.res-input { 
    display: flex; 
    align-items: center; 
    gap: 2px; 
    background: #222; 
    padding: 2px 5px; 
    border-radius: 4px; 
    border: 1px solid #444; 
}
.res-input input {
    background: transparent;
    border: none;
    width: 40px;
    padding: 0;
    text-align: center;
    color: #00bcd4;
    font-weight: bold;
}
.res-input input:focus { outline: none; background: #333; }

/* Compact Selects */
.compact-select {
    border: none !important;
    background: transparent !important;
    padding: 2px !important;
    color: #aaa !important;
    width: auto !important;
    cursor: pointer;
}
.compact-select:hover { color: white !important; }
.compact-select option { background: #222; color: white; }

/* Small Icon Buttons */
.icon-btn-small {
    padding: 2px 6px !important;
    font-size: 14px !important;
    border: none !important;
    background: transparent !important;
    color: #888 !important;
}
.icon-btn-small:hover { color: white !important; background: rgba(255,255,255,0.1) !important; }

/* Regular Header Buttons Override */
header button {
    padding: 4px 10px;
    font-size: 11px;
}

/* Ensure Logo is visible but compact */
h1 { font-size: 18px; margin-right: 5px; margin-left: 5px; }

/* --- EXISTING CSS CONTINUES --- */
/* (Keep your existing workspace, sidebar, resizer, etc. styles below) */
:root { --base-font-size: 12px; }
body { font-family: 'Microsoft JhengHei', 'Segoe UI', sans-serif; margin: 0; background: #121212; color: #eee; height: 100vh; display: flex; flex-direction: column; overflow: hidden; min-width: 1000px; font-size: var(--base-font-size); }
* { box-sizing: border-box; user-select: none; }
button, select, input, .prop-row label, .layer-info { font-size: var(--base-font-size) !important; }
button { background: #333; color: white; border: 1px solid #444; padding: 5px 12px; border-radius: 4px; cursor: pointer; transition: background 0.2s; font-family: 'Microsoft JhengHei', sans-serif; }
button:hover { background: #444; }
button.primary { background: #00bcd4; color: #000; border: none; font-weight: bold; }
button.play-btn { background: #2e7d32; border-color: #1b5e20; }
button.play-btn.playing { background: #c62828; border-color: #b71c1c; }
button.active-tool { background: #00bcd4; color: black; font-weight: bold; }
select, input[type="text"], input[type="number"] { background: #222; color: white; border: 1px solid #444; padding: 4px; border-radius: 4px; font-family: 'Microsoft JhengHei', sans-serif; }
input[type="number"] { width: 50px; text-align: center; }
input[type="color"] { -webkit-appearance: none; border: none; padding: 0; background: none; height: 25px; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid #444; border-radius: 3px; }
.workspace { display: flex; flex: 1; overflow: hidden; width: 100%; }
.sidebar { width: 300px; min-width: 250px; max-width: 600px; background: #1a1a1a; display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid #333; }
.sidebar-section { display: flex; flex-direction: column; border-bottom: 1px solid #333; }
.sidebar-header { padding: 8px 10px; background: #252525; font-weight: bold; color: #aaa; display: flex; justify-content: space-between; align-items: center; }
.scene-ctrls { display: flex; gap: 2px; }
.scene-btn { font-size: calc(var(--base-font-size) - 1px) !important; padding: 2px 6px; }
.list-container { flex: 1; overflow-y: auto; padding: 5px; }
.group-list { max-height: 35vh; min-height: 100px; background: #151515; }
.resizer { width: 5px; background: #2a2a2a; cursor: col-resize; z-index: 100; transition: background 0.2s; flex-shrink: 0; }
.resizer:hover, .resizer.resizing { background: #00bcd4; }
.viewport-area { flex: 1; background: #000; position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
#editor-stage { position: relative; background: #050505; border: 1px dashed #444; box-shadow: 0 0 30px rgba(0,0,0,0.5); overflow: visible; }
#overlay-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 20; pointer-events: none; overflow: visible; }
.properties { width: 280px; min-width: 200px; max-width: 500px; background: #1a1a1a; border-left: 1px solid #333; overflow-y: auto; padding: 15px; flex-shrink: 0; }
.prop-section { margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 15px; }
.prop-row { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prop-row label { width: 85px; flex-shrink: 0; color:#aaa; } 
input[type="range"] { flex: 1; margin: 0; }
.hidden { display: none !important; }
.layer-item { display: grid; grid-template-columns: 6px 1fr auto auto auto; gap: 6px; align-items: center; background: #2a2a2a; margin-bottom: 3px; border-radius: 3px; padding-right: 5px; cursor: pointer; border: 1px solid transparent; overflow: hidden; }
.layer-item:hover { background: #333; }
.layer-item.active { background: #383838; border-color: #555; }
.layer-color { height: 100%; width: 100%; }
.layer-info { padding: 8px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layer-meta { font-size: 0.9em; color: #777; margin-left: 5px; }
.icon-btn { background: none; border: none; padding: 2px 4px; color: #666; cursor: pointer; font-size: 1.2em; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: rgba(255,255,255,0.1); color: #aaa; }
.icon-btn.active { color: #00bcd4; text-shadow: 0 0 5px rgba(0,188,212,0.5); }
.icon-btn.locked { color: #f44336; }
.sort-btn { font-size: 0.8em; color: #555; }
.sort-btn:hover { color: #fff; }
.handle-point { stroke-width: 2; cursor: pointer; pointer-events: all; transition: r 0.1s; }
.handle-point:hover { r: 6; stroke: white; }
.handle-point.locked { cursor: not-allowed; fill: #444 !important; stroke: #666 !important; }
circle.dragging { fill: #00bcd4 !important; stroke: white !important; r: 7; }
.bezier-ctrl { cursor: crosshair; }
.bezier-ctrl:hover { stroke: #00bcd4 !important; r: 5; }
.handle-line { stroke-width: 1.5; fill: none; opacity: 0.8; }
.handle-grid-line { stroke-width: 1; fill: none; opacity: 0.4; stroke-dasharray: 4; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.mask-editor-container { background: #222; padding: 20px; border-radius: 8px; border: 1px solid #444; width: 90%; max-width: 900px; display: flex; flex-direction: column; gap: 15px; }
.mask-toolbar { display: flex; gap: 15px; align-items: center; background: #333; padding: 10px; border-radius: 4px; }
.tool-btn { padding: 8px 15px; border: 1px solid #555; background: #222; color: #ccc; cursor: pointer; border-radius: 4px; font-family: 'Microsoft JhengHei'; }
.tool-btn.active { background: #00bcd4; color: black; border-color: #00bcd4; }
canvas#mask-canvas { background: #000; border: 1px solid #555; cursor: crosshair; touch-action: none; align-self: center; }