:root{--bg: #1a1c20;--panel-bg: #23262c;--text: #e9ecf1;--accent: #3b6cf0}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{display:flex;height:100%;overflow:hidden}.canvas-wrap{flex:1;min-width:0;height:100%}.panel{width:300px;flex:0 0 300px;height:100%;overflow-y:auto;padding:20px;background:var(--panel-bg);border-right:1px solid rgba(255,255,255,.08)}@media (max-width: 768px){.app{flex-direction:column}.panel{width:100%;flex:0 0 auto;max-height:50%;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}.canvas-wrap{width:100%;height:auto;min-height:0}}.panel__title{margin:0 0 20px;font-size:20px;font-weight:600}.panel__section{margin-bottom:24px}.panel__heading{margin:0 0 12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#e9ecf199}.slider{margin-bottom:14px}.slider__label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:14px}.slider__value{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}.slider__input{width:100%;accent-color:var(--accent);cursor:pointer}.color-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.color-field__label{display:flex;flex-direction:column;gap:2px;font-size:14px}.color-field__value{font-variant-numeric:tabular-nums;font-size:12px;color:#e9ecf199}.color-field__input{width:44px;height:32px;padding:0;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:none;cursor:pointer}.palette__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette__item{padding:10px 8px;font-size:13px;color:var(--text);background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:6px;cursor:pointer;transition:background .12s ease,border-color .12s ease}.palette__item:hover{background:#3b6cf02e;border-color:var(--accent)}.palette__item:active{background:#3b6cf04d}.palette__count{margin:12px 0 0;font-size:12px;color:#e9ecf199}.palette__hint{margin:8px 0 0;padding:8px 10px;font-size:12px;line-height:1.4;color:#e9ecf1bf;background:#3b6cf01a;border:1px dashed rgba(59,108,240,.4);border-radius:6px}.selection{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--accent)}.selection-position,.selection-rotation{margin:2px 0 0;font-size:12px;font-weight:400;font-variant-numeric:tabular-nums;color:#e9ecf199}.selection__actions{display:flex;gap:8px;margin-top:10px}.selection__button{flex:1;padding:8px;font-size:13px;color:var(--text);background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:6px;cursor:pointer;transition:background .12s ease,border-color .12s ease}.selection__button:hover{background:#3b6cf02e;border-color:var(--accent)}.selection__button:active{background:#3b6cf04d}.action-button{width:100%;padding:10px;font-size:13px;font-weight:600;color:var(--text);background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:6px;cursor:pointer;transition:background .12s ease,border-color .12s ease}.action-button:hover{background:#3b6cf02e;border-color:var(--accent)}.action-button:active{background:#3b6cf04d}.action-button+.action-button{margin-top:10px}.action-button--danger:hover{background:#dc3c3c2e;border-color:#dc3c3c99}.action-button--danger:active{background:#dc3c3c4d}.action-error{margin:10px 0 0;padding:8px 10px;font-size:12px;color:#ffd7d7;background:#dc3c3c29;border:1px solid rgba(220,60,60,.4);border-radius:6px}.action-status{margin:10px 0 0;padding:8px 10px;font-size:12px;color:#d4f8df;background:#3cc86e29;border:1px solid rgba(60,200,110,.4);border-radius:6px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
