html,body,#root{height:100%}#root{display:flex;flex-direction:column}body{font-family:Arial,sans-serif;margin:0;padding:20px;background:#f5f5f5;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;color:inherit}h1{margin:0 0 16px}.main-layout{display:flex;gap:20px;align-items:stretch;margin-top:20px;flex:1;min-height:0}.panel{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 6px #0000001a}.controls{width:380px;font-size:15px;flex-shrink:0;overflow-y:auto}.controls h2{margin-top:0}.controls label{display:block;margin-top:12px}.inline-row{display:flex;align-items:center;gap:8px;margin-top:4px}.inline-row input[type=number]{width:100%;padding:8px;box-sizing:border-box;font-size:14px}input[type=text],input[type=number],input[type=file],select{width:100%;padding:6px;box-sizing:border-box;font-size:14px}.color-box{width:32px;height:32px;flex-shrink:0;border-radius:4px;border:1px solid #ccc;cursor:pointer;position:relative;overflow:hidden}.color-box input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.controls button{margin-top:12px;padding:10px;width:100%;border:none;border-radius:4px;background:#07c;color:#fff;font-weight:700;cursor:pointer;font-size:15px}.controls button:hover{background:#005fa3}.controls button:disabled{background:#aaa;cursor:not-allowed;opacity:.6}.controls button.fabric-active{background:#2a9d4e}.controls button.fabric-active:hover{background:#21883f}.color-section{margin-top:20px;padding-top:10px;border-top:1px solid #ddd}.color-section h3{margin:8px 0 6px;font-size:14px}.color-palette,.color-saved-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}.color-saved-row{grid-template-columns:repeat(6,1fr)}.color-swatch{width:100%;padding-bottom:100%;border-radius:4px;border:1px solid #ccc;position:relative;cursor:pointer;box-sizing:border-box}.color-swatch.empty:before{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:#888}.grid-wrapper{flex:1;min-width:0;display:flex;flex-direction:column}.zoom-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.tool-mode-group{display:flex;gap:4px}.tool-btn{padding:6px 14px;border:1px solid #ccc;border-radius:4px;background:#f0f0f0;cursor:pointer;font-size:14px;font-weight:700}.tool-btn.active{background:#07c;color:#fff;border-color:#07c}.tool-btn:hover:not(.active){background:#e0e0e0}body.dark .tool-btn{background:#3a3a3a;border-color:#666;color:#e6e6e6}body.dark .tool-btn.active{background:#07c;color:#fff;border-color:#07c}#quiltOuter{flex:1;min-height:0;border:1px solid #ccc;background:#fff;border-radius:8px;overflow:hidden;position:relative}#calcPanel{position:fixed;top:80px;right:0;height:calc(100% - 100px);width:400px;background:#fff;box-shadow:-2px 0 6px #00000026;border-radius:8px 0 0 8px;display:flex;flex-direction:column;transform:translate(390px);transition:transform .25s ease;z-index:9999;overflow:visible}#calcPanel.open{transform:translate(0)}#calcTab{position:absolute;left:-50px;top:40%;width:50px;height:140px;background:#07c;color:#fff;writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px 0 0 8px;font-weight:700;font-size:14px}#calcPanelInner{padding:16px;overflow-y:auto;flex:1}#calcPanelInner label{display:block;margin-top:12px;font-size:14px}#calcPanelInner input[type=number]{width:100%;padding:6px;box-sizing:border-box;font-size:14px;margin-top:4px}#calcPanelInner button{margin-top:12px;padding:10px;width:100%;border:none;border-radius:4px;background:#07c;color:#fff;font-weight:700;cursor:pointer;font-size:14px}#calcPanelInner button:hover{background:#005fa3}.calc-output{margin-top:8px;font-family:Consolas,monospace;white-space:pre-line;font-size:13px;background:#fafafa;border:1px solid #eee;padding:6px;border-radius:4px;min-height:24px}#stripCalcOutput{line-height:1.4}body.dark{background:#1e1e1e;color:#e6e6e6}body.dark .panel,body.dark #calcPanel{background:#2b2b2b;color:#e6e6e6}body.dark input,body.dark select{background:#3a3a3a;color:#fff;border:1px solid #666}body.dark .calc-output{background:#3a3a3a;border-color:#555;color:#fff}.dark-toggle{position:absolute;top:20px;right:20px;background:#07c;color:#fff;padding:8px 14px;border-radius:6px;border:none;cursor:pointer;font-size:14px}body.dark .dark-toggle{background:#444}body.dark #quiltOuter{background:#2b2b2b;border-color:#555}