html,body{margin:0;height:100%;font-family:system-ui,sans-serif;background:#0f0f0f;color:#fff;overflow:hidden;overscroll-behavior:none}.app{display:flex;flex-direction:column;height:100vh}.canvas-area{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden}.canvas-frame{padding:12px;border-radius:16px;background:#ffffff0d;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d;display:flex;justify-content:center;align-items:center;cursor:default}.canvas-frame:active{cursor:grabbing}.editor-panel{position:fixed;bottom:56px;left:0;right:0;background:#181818;padding:12px;display:flex;flex-direction:column;gap:10px}.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:56px;background:#111;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #222}.bottom-bar button{background:none;border:none;color:#ccc;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}.bottom-bar svg{width:20px;height:20px}.sidebar{display:none;width:320px;background:#181818;padding:16px}.controls-desktop{display:flex;flex-direction:column;gap:16px}@media (min-width: 768px){.app{flex-direction:row}.sidebar{display:block}.editor-panel,.bottom-bar{display:none}}@media (max-width: 767px){.canvas-area{position:fixed;top:0;left:0;right:0;bottom:56px;display:flex;justify-content:center;align-items:center;overflow:hidden}.canvas-frame{max-width:100%;max-height:100%}}@media (max-width: 767px){.canvas-frame{transform:translateY(-90px)}}.sidebar-header{font-size:18px;font-weight:600}.section{background:#1c1c1c;padding:12px;border-radius:10px;display:flex;flex-direction:column;gap:8px}.section-title{font-size:13px;color:#aaa}input[type=text],input[type=color]{width:100%;padding:8px;border-radius:6px;border:none;font-size:14px}button{cursor:pointer}.tool-tabs{display:flex;gap:6px}.tool-tabs button{flex:1;padding:8px;background:#222;border:none;border-radius:8px;color:#fff}.color-grid,.color-presets{display:flex;gap:8px;flex-wrap:wrap}.color-dot{width:26px;height:26px;border-radius:50%;border:2px solid #333;cursor:pointer}.color-picker-row{display:flex;align-items:center;gap:8px;cursor:pointer;position:relative}.color-picker-row input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.color-preview{width:20px;height:20px;border-radius:50%;border:2px solid #333}.color-picker-label{font-size:13px;color:#ccc}.checkbox-row{display:flex;align-items:center;gap:8px}.download-btn{margin-top:12px;padding:10px;border-radius:10px;border:none;background:#0fc;font-weight:600;cursor:pointer}:root{--mobile-top-offset: 48px;--mobile-bottom-bar: 56px}.tool-tabs button{flex:1;padding:8px;background:#222;border:none;border-radius:8px;color:#ccc;transition:all .15s ease}.tool-tabs button:hover{background:#2a2a2a}.tool-tabs button.active{background:#0fc;color:#000;font-weight:600;box-shadow:0 0 0 2px #00ffcc40}.tool-tabs button:active{transform:scale(.97)}@media (max-width: 767px){.tool-tabs button.active{box-shadow:none}}.bottom-bar button{color:#777;transition:color .15s ease,transform .15s ease}.bottom-bar button.active{color:#0fc}.bottom-bar button.active svg{stroke:#0fc}.bottom-bar button.active span{color:#0fc;font-weight:600}.bottom-bar button:active{transform:scale(.95)}body{font-family:Inter,system-ui,sans-serif}select{background:#222;color:#fff;border:none;border-radius:8px;padding:8px}.editor-panel{position:fixed;bottom:56px;left:0;right:0;max-height:60vh;overflow-y:auto;border-top-left-radius:16px;border-top-right-radius:16px}.panel-toggle{background:none;border:none;color:#aaa;padding:8px;display:flex;justify-content:center}.panel-toggle svg{width:24px;height:24px}