.header{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:60px;padding:12px 24px;display:flex}.header-brand{align-items:center;gap:10px;display:flex}.header-logo{border-radius:8px;width:36px;height:36px}.header-title{color:#c3b1e1;letter-spacing:-.02em;font-size:22px;font-weight:700}.header-tagline{color:var(--text-muted);font-size:14px;font-weight:400}.header-settings{align-items:center;gap:10px;display:flex}.settings-select{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;padding:4px 8px;font-size:13px}@media (width<=768px){.header-tagline{display:none}}@media (width<=375px){.header{flex-wrap:wrap;gap:8px;height:auto;padding:10px 16px}.header-settings{justify-content:flex-end;width:100%}}.uploader-dropzone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;padding:32px 20px;transition:all .2s}.uploader-dropzone:hover,.uploader-dropzone.dragging{border-color:var(--accent);background:#e945600d}.uploader-icon{margin-bottom:12px;font-size:40px}.uploader-text{color:var(--text-muted);font-size:14px;line-height:1.6}.uploader-text span{color:var(--accent);font-size:12px;display:block}.uploader-notice{text-align:center;color:var(--text);margin-top:8px;font-size:13px;line-height:1.4}.uploader-notice--error{color:var(--accent)}.uploader-loaded{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:12px;padding:10px 12px;display:flex}.uploader-thumb{border-radius:6px;flex-shrink:0;width:48px;height:48px;overflow:hidden}.uploader-thumb img{object-fit:cover;width:100%;height:100%}.uploader-info{flex:1;min-width:0}.uploader-name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;display:block;overflow:hidden}.uploader-dims{color:var(--text-muted);font-size:11px}.uploader-clear{background:var(--surface);width:28px;height:28px;color:var(--text-muted);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;transition:all .2s;display:flex}.uploader-clear:hover{background:var(--accent);color:#fff}.transform-buttons{border-top:1px solid var(--border);gap:4px;width:100%;margin-top:8px;padding-top:8px;display:flex}.transform-btn{border:1px solid var(--border);background:var(--surface);height:30px;color:var(--text-muted);border-radius:4px;flex:1;justify-content:center;align-items:center;transition:all .15s;display:flex}.transform-btn:hover{border-color:var(--accent);color:var(--accent)}.uploader-loaded{flex-wrap:wrap}.settings-row{margin-bottom:14px}.settings-custom-size{gap:10px;margin-bottom:14px;display:flex}.settings-half{flex:1}.orientation-row{margin-bottom:14px}.orientation-toggle{gap:8px;display:flex}.orient-btn{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);flex:1;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:13px;transition:all .2s;display:flex}.orient-btn:hover{border-color:var(--accent);color:var(--text)}.orient-btn.active{border-color:var(--accent);color:var(--text);background:#e945601a}.orient-icon{border:2px solid;border-radius:2px;display:inline-block}.portrait-icon{width:10px;height:14px}.landscape-icon{width:14px;height:10px}.grid-badge.partial{font-size:11px;font-style:italic}.unit-toggle{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;display:flex;overflow:hidden}.unit-btn{background:var(--bg);color:var(--text-muted);cursor:pointer;border:none;flex:1;padding:6px 10px;font-size:13px;font-weight:600;transition:all .2s}.unit-btn:first-child{border-right:1px solid var(--border)}.unit-btn:hover{color:var(--text)}.unit-btn.active{color:var(--accent);background:#e945601a}.grid-overlay-container{justify-content:center;align-items:center;width:100%;height:100%;min-height:60vh;display:flex;position:relative}@media (width<=768px){.grid-overlay-container{min-height:0}}.grid-canvas{border-radius:4px;display:block;box-shadow:0 4px 24px #0006}.grid-canvas--draggable{cursor:grab}.grid-canvas--draggable:active{cursor:grabbing}.control-row{margin-bottom:14px}.control-row:last-child{margin-bottom:0}.color-presets{gap:8px;display:flex}.color-swatch{border:2px solid var(--border);cursor:pointer;border-radius:50%;width:28px;height:28px;padding:0;transition:border-color .15s,box-shadow .15s}.color-swatch:hover{border-color:var(--text-muted)}.color-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--text)}.color-input-wrap{align-items:center;gap:10px;display:flex}.color-input-wrap input[type=color]{border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--bg);width:36px;height:36px;padding:2px}.color-value{color:var(--text-muted);font-family:monospace;font-size:13px}.opacity-value{float:right;color:var(--text);font-weight:400}.checkbox-label{cursor:pointer;text-transform:none;letter-spacing:normal;color:var(--text);align-items:center;gap:8px;font-size:13px;font-weight:400;display:flex}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.export-bar{gap:10px;display:flex}.export-btn{border-radius:var(--radius);border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.export-btn.primary{background:var(--accent);color:#fff}.export-btn.primary:hover{background:var(--accent-hover)}.export-btn.secondary{background:var(--bg);border:1px solid var(--border);color:var(--text)}.export-btn.secondary:hover{border-color:var(--accent);color:var(--accent)}.export-icon{font-size:16px}.adjust-row{margin-bottom:12px}.adjust-row:last-of-type{margin-bottom:0}.adjust-value{float:right;color:var(--text);font-weight:400}.adjust-reset{border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-muted);background:0 0;margin-top:10px;padding:6px 12px;font-size:12px;transition:border-color .2s,color .2s}.adjust-reset:hover{border-color:var(--accent);color:var(--accent)}.filter-segmented{border:1px solid var(--border);border-radius:8px;gap:0;display:flex;overflow:hidden}.filter-btn{background:var(--surface);color:var(--text);cursor:pointer;border:none;flex:1;padding:6px 4px;font-size:.75rem;transition:background .15s,color .15s}.filter-btn:not(:last-child){border-right:1px solid var(--border)}.filter-btn.active{background:var(--accent);color:#fff;font-weight:600}.filter-btn:hover:not(.active){background:var(--hover)}.mascot{justify-content:center;margin-bottom:8px;display:flex}.mascot-img{object-fit:contain}.mascot-large .mascot-img{width:280px;height:280px}.mascot-small .mascot-img{width:100px;height:100px}.mobile-tab-bar{background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0px);flex-shrink:0;display:flex}.mobile-tab{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;background:0 0;border:none;border-top:2px solid #0000;flex:1;padding:10px 0;font-size:12px;font-weight:600;transition:color .2s,border-color .2s}.mobile-tab--active{color:var(--accent);border-top-color:var(--accent)}.mobile-tab:not(.mobile-tab--active):active{color:var(--text)}.mobile-layout{flex-direction:column;width:100%;height:100dvh;display:flex;overflow:hidden}.mobile-canvas-area{flex:1;justify-content:center;align-items:center;min-height:0;padding:8px;display:flex;overflow:hidden}.mobile-panel{background:var(--surface);border-top:1px solid #0000;flex-shrink:0;max-height:0;padding:0 16px;transition:max-height .25s ease-out,padding .25s ease-out,border-color .25s ease-out;overflow:hidden}.mobile-panel--open{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top-color:var(--border);max-height:40dvh;padding:12px 16px;overflow-y:auto}.mobile-panel-content{flex-direction:column;gap:12px;display:flex}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1a1a2e;--surface:#16213e;--surface-hover:#1c2a4a;--border:#2a3a5c;--text:#e8e8e8;--text-muted:#8892a8;--accent:#e94560;--accent-hover:#ff6b81;--radius:8px;--sidebar-width:320px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.app-body{flex:1;gap:0;display:flex}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--surface);border-right:1px solid var(--border);flex-direction:column;gap:20px;max-height:calc(100vh - 104px);padding:20px;display:flex;overflow-y:auto}.canvas-area{flex:1;justify-content:center;align-items:center;padding:24px;display:flex;overflow:auto}.canvas-placeholder{text-align:center;color:var(--text-muted)}.placeholder-icon{margin-bottom:16px;font-size:64px}.canvas-placeholder p{font-size:18px}label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-size:12px;font-weight:600;display:block}select,input[type=number]{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);outline:none;padding:8px 12px;font-family:inherit;font-size:14px;transition:border-color .2s}select:focus,input[type=number]:focus{border-color:var(--accent)}select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238892a8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}input[type=range]{width:100%;accent-color:var(--accent)}button{cursor:pointer;font-family:inherit}.settings-section{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.settings-section h3{color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;font-size:13px;font-weight:600}.grid-info{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.grid-badge{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:20px;padding:4px 12px;font-size:13px}.grid-badge strong{color:var(--text)}.new-project-btn{border:1px dashed var(--border);border-radius:var(--radius);width:100%;color:var(--text-muted);background:0 0;padding:8px 12px;font-size:13px;transition:border-color .2s,color .2s}.new-project-btn:hover{border-color:var(--accent);color:var(--accent)}.app-footer{text-align:center;color:var(--text-muted);border-top:1px solid var(--border);padding:12px;font-size:12px}.app-footer a{color:var(--text-muted);text-decoration:none}.app-footer a:hover{color:var(--accent)}@media (width<=768px){.sidebar{display:none}.canvas-area{min-height:100vh}.app-footer{display:none}}