:root{--bg-color: #0c0c0e;--panel-bg: #121214;--card-bg: #1c1c1e;--accent: #ff375f;--text-primary: #ffffff;--text-secondary: #8e8e93;--border: #2c2c2e}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{background:var(--bg-color);color:var(--text-primary);height:100vh;overflow:hidden}.app-container{display:grid;grid-template-columns:240px 1fr 340px;height:100vh}.history-section,.controls-section{background:var(--panel-bg);padding:24px;overflow-y:auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}.history-section{border-left:none}.history-item{background:var(--card-bg);padding:12px;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.history-item:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 4px 12px #0000004d}.preview-section{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#1a1a1e,#0c0c0e);position:relative}.status-indicator{position:absolute;top:30px;display:flex;align-items:center;gap:10px;background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 16px;border-radius:30px;font-size:13px;border:1px solid rgba(255,255,255,.05)}.status-indicator .dot{width:8px;height:8px;background:#34c759;border-radius:50%;box-shadow:0 0 12px #34c759}.watch-frame{width:340px;height:400px;background:#000;border-radius:65px;padding:15px;box-shadow:0 50px 100px #000000e6,inset 0 0 0 4px #2c2c2e;position:relative}.watch-screen{width:100%;height:100%;border-radius:50px;background-size:cover;background-position:center;display:flex;overflow:hidden;position:relative}.watch-layout-stack{flex-direction:column;align-items:center;justify-content:center}.watch-layout-grid{display:grid;align-content:center;justify-items:center}.watch-element{cursor:pointer;transition:box-shadow .2s,transform .2s;position:relative;padding:4px;display:flex;align-items:center;justify-content:center}.watch-element:hover{background:#ffffff0d;border-radius:4px}.watch-element.active{box-shadow:0 0 0 2px var(--accent);background:#ff375f1a;border-radius:4px}.drag-handle{position:absolute;top:-8px;left:50%;transform:translate(-50%);opacity:0;cursor:grab;background:var(--accent);color:#fff;padding:2px 6px;border-radius:4px;transition:opacity .2s;z-index:10}.watch-element:hover .drag-handle{opacity:1}.drag-handle:active{cursor:grabbing}.in-place-tools{margin-top:40px;display:flex;align-items:center;gap:12px;background:var(--card-bg);padding:8px;border-radius:50px;border:1px solid var(--border);box-shadow:0 10px 30px #00000080}.tool-btn{width:48px;height:48px;border-radius:50%;border:none;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.tool-btn:hover{background:#ffffff1a}.tool-btn.primary{background:var(--accent);box-shadow:0 0 20px #ff375f66}.tool-sep{width:1px;height:24px;background:var(--border)}.prop-header{margin-bottom:20px}.control-card{background:var(--card-bg);padding:16px;border-radius:16px;margin-bottom:20px;border:1px solid var(--border)}.card-title{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--accent)}label{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}input[type=text],input[type=number],select,textarea{background:#000;border:1px solid var(--border);border-radius:10px;padding:10px;color:#fff;font-size:14px;width:100%}.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.color-field{display:flex;gap:8px}.color-field input[type=color]{width:40px;height:40px;border:none;background:none}.active-element-editor{background:#ff375f05;border:1px solid rgba(255,55,95,.15);padding:20px;border-radius:20px}.editor-tag{background:var(--accent);color:#fff;font-size:9px;font-weight:900;padding:2px 8px;border-radius:10px;text-transform:uppercase}.element-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}