*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  :root{
    --bg:#FFF8F0;--panel:#FFFFFF;--border:#F0E6D8;
    --text:#4A3728;--text-light:#8B7355;--accent:#FF6B6B;
    --accent2:#4ECDC4;--shadow:0 4px 20px rgba(74,55,40,0.08);--radius:16px;
  }
  body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .coloring-ad-slot{max-width:1248px;height:96px;margin:0 auto 14px;padding:9px 12px;position:relative;
    display:flex;align-items:center;justify-content:center;border:2px dashed #D8CFC4;border-radius:16px;
    background:repeating-linear-gradient(135deg,#FBF8F4,#FBF8F4 12px,#F7F2EC 12px,#F7F2EC 24px);color:#9A8978}
  .coloring-ad-label{position:absolute;top:6px;left:10px;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#AD9E90}
  .coloring-ad-mock{text-align:center}.coloring-ad-mock strong,.coloring-ad-mock small{display:block}.coloring-ad-mock strong{font-family:'Fredoka',sans-serif;font-size:14px;color:#7D6C5D}
  .coloring-ad-mock small{font-size:10px;margin-top:2px}.coloring-ad-slot.is-sidebar{width:100%;height:240px;min-height:240px;margin:0;padding:12px 8px;border-radius:13px;flex-shrink:0}
  .app-layout{display:flex;gap:18px;padding:0 16px 20px;max-width:1280px;margin:0 auto;align-items:flex-start}
  .toolbar{
    width:248px;flex-shrink:0;background:linear-gradient(180deg,#FFFFFF,#FFFCF8);
    border-radius:20px;box-shadow:0 8px 28px rgba(74,55,40,.09);
    border:1px solid #EDE2D5;padding:16px;
    position:sticky;top:12px;display:flex;flex-direction:column;gap:16px;
    max-height:calc(100vh - 24px);overflow-y:auto;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .toolbar::-webkit-scrollbar{display:none}
  .section-label{
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:11px;
    text-transform:uppercase;letter-spacing:1.2px;color:var(--text-light);margin-bottom:4px;
  }
  .mode-toggle{display:flex;background:#F5F0EA;border-radius:12px;padding:3px;gap:3px}
  .mode-btn{
    flex:1;padding:8px 4px;border:none;border-radius:10px;
    background:transparent;font-family:'Nunito',sans-serif;
    font-size:12px;font-weight:700;color:var(--text-light);
    cursor:pointer;transition:all 0.2s;text-align:center;
  }
  .mode-btn.active{background:white;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
  .mode-btn .mode-icon{font-size:16px;display:block;margin-bottom:2px}
  .panel-section{display:none}
  .panel-section.visible{display:block}
  .group-help{
    font-size:12px;color:var(--text-light);line-height:1.5;
    background:#FFF5EE;border-radius:10px;padding:10px;margin-bottom:8px;
    border-left:3px solid #FFB347;
  }
  .group-list{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
  .group-item{
    display:flex;align-items:center;gap:8px;padding:7px 10px;
    border-radius:10px;border:2px solid var(--border);cursor:pointer;
    transition:all 0.15s;background:white;font-size:12px;
  }
  .group-item:hover{border-color:#ccc}
  .group-item.active{border-color:var(--accent);background:#FFF5F5}
  .group-item .gcolor{width:16px;height:16px;border-radius:6px;flex-shrink:0;border:2px solid rgba(0,0,0,0.1)}
  .group-item .ginfo{flex:1;min-width:0}
  .group-item .gname-input{
    font-weight:700;font-family:'Fredoka',sans-serif;font-size:13px;
    border:none;background:transparent;color:var(--text);width:100%;outline:none;padding:0;
  }
  .group-item .gcount{font-size:11px;color:var(--text-light)}
  .group-item .gdel{
    width:20px;height:20px;border:none;background:none;
    color:#ccc;cursor:pointer;font-size:16px;line-height:1;
    border-radius:4px;display:flex;align-items:center;justify-content:center;
  }
  .group-item .gdel:hover{color:var(--accent);background:#FFF0F0}
  .new-group-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px;border-radius:10px;border:2px dashed var(--border);
    background:transparent;font-family:'Nunito',sans-serif;
    font-size:12px;font-weight:700;color:var(--text-light);
    cursor:pointer;transition:all 0.15s;width:100%;
  }
  .new-group-btn:hover{border-color:var(--accent2);color:var(--accent2)}
  .palette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:6px;position:relative}
  .palette-nav{display:flex;align-items:center;gap:4px}
  .palette-nav-btn{
    width:22px;height:22px;border:1px solid var(--border);border-radius:6px;
    background:white;cursor:pointer;font-size:10px;color:var(--text-light);
    display:flex;align-items:center;justify-content:center;transition:all 0.15s;
    font-family:'Fredoka',sans-serif;
  }
  .palette-nav-btn:hover{border-color:#ccc;color:var(--text)}
  .palette-nav-label{
    font-size:11px;font-weight:700;color:var(--text);
    font-family:'Fredoka',sans-serif;min-width:60px;text-align:center;
  }
  .color-swatch{
    aspect-ratio:1;border-radius:8px;border:3px solid transparent;
    cursor:pointer;transition:all 0.15s;position:relative;
    box-shadow:inset 0 -2px 4px rgba(0,0,0,0.1);
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  }
  .color-swatch:hover{transform:scale(1.12)}
  .color-swatch.active{
    border-color:var(--text);transform:scale(1.08);
    box-shadow:0 2px 8px rgba(0,0,0,0.2),inset 0 -2px 4px rgba(0,0,0,0.1);
  }
  .color-swatch.active::after{
    content:'\2713';position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;font-size:13px;font-weight:700;color:white;text-shadow:0 1px 3px rgba(0,0,0,0.5);
  }
  .color-picker-wrap{margin-top:2px}
  .color-picker-wrap>div:first-child{gap:6px}
  .color-library-btn{width:32px;height:30px;display:flex;align-items:center;justify-content:center;padding:5px;border:2px solid var(--border);
    border-radius:8px;background:#fff;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
  .color-library-btn:hover,.color-library-btn[aria-expanded="true"]{transform:translateY(-1px);border-color:#8E7BEF;box-shadow:0 4px 10px rgba(108,92,231,.15)}
  .picker-row{display:flex;gap:6px;margin-top:4px}
  .picker-sat{border-radius:8px;cursor:crosshair;border:1px solid var(--border)}
  .picker-hue{border-radius:8px;cursor:pointer;border:1px solid var(--border)}
  .picker-preview-row{display:flex;gap:8px;align-items:center;margin-top:8px}
  .picker-preview{
    width:100%;height:36px;border-radius:10px;border:2px solid var(--border);
    box-shadow:inset 0 -2px 4px rgba(0,0,0,0.1);flex-shrink:0;
  }
  .picker-hex{
    flex:1;font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;
    color:var(--text);border:2px solid var(--border);border-radius:8px;
    padding:6px 10px;background:white;text-transform:uppercase;
    outline:none;transition:border-color 0.15s;
  }
  .picker-hex:focus{border-color:var(--accent)}
  .fill-mode-row{display:flex;gap:4px;margin-top:2px}
  .fill-mode-btn{
    flex:1;padding:7px 4px;border:2px solid var(--border);border-radius:8px;
    background:white;font-family:'Nunito',sans-serif;
    font-size:11px;font-weight:700;color:var(--text-light);
    cursor:pointer;transition:all 0.15s;text-align:center;
  }
  .fill-mode-btn:hover{border-color:#ccc}
  .fill-mode-btn.active{border-color:var(--accent);color:var(--accent);background:#FFF5F5}

  /* Tool dropdown */
  .tool-dropdown{position:relative}
  .tool-selected{
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    border:2px solid var(--border);border-radius:12px;background:white;
    cursor:pointer;transition:all 0.15s;width:100%;
  }
  .tool-selected:hover{border-color:#ccc}
  .tool-selected.open{border-color:var(--accent);border-radius:12px 12px 0 0}
  .tool-selected img{width:24px;height:24px;flex-shrink:0}
  .tool-selected .tool-name{
    font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;color:var(--text);flex:1;
  }
  .tool-selected .tool-arrow{
    font-size:10px;color:var(--text-light);transition:transform 0.2s;
  }
  .tool-selected.open .tool-arrow{transform:rotate(180deg)}
  .tool-flyout{
    position:absolute;top:100%;left:0;right:0;z-index:20;
    background:white;border:2px solid var(--accent);border-top:none;
    border-radius:0 0 12px 12px;overflow:hidden;
    display:none;box-shadow:0 8px 24px rgba(74,55,40,0.12);
  }
  .tool-flyout.open{display:block}
  .tool-option{
    display:flex;align-items:center;gap:10px;padding:10px 14px;
    cursor:pointer;transition:background 0.1s;
  }
  .tool-option:hover{background:#FFF5F5}
  .tool-option.active{background:#FFF0F0}
  .tool-option img{width:22px;height:22px;flex-shrink:0}
  .tool-option .tool-opt-name{
    font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;color:var(--text);
  }
  .tool-backdrop{position:fixed;inset:0;z-index:19;display:none}
  .tool-backdrop.open{display:block}

  /* Eyedropper button */
  .eyedropper-btn{
    display:flex;align-items:center;gap:6px;padding:6px 10px;
    border:2px solid var(--border);border-radius:8px;background:white;
    cursor:pointer;font-family:'Nunito',sans-serif;font-size:11px;
    font-weight:700;color:var(--text-light);transition:all 0.15s;
  }
  .eyedropper-btn:hover{border-color:#ccc}
  .eyedropper-btn.active{border-color:var(--accent);color:var(--accent);background:#FFF5F5}
  .action-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    width:100%;padding:9px;border-radius:10px;border:2px solid var(--border);
    background:white;font-family:'Nunito',sans-serif;
    font-size:12px;font-weight:700;color:var(--text);cursor:pointer;transition:all 0.15s;
  }
  .action-btn:hover{background:#FAFAFA;border-color:#ccc}
  .action-btn.primary{background:var(--accent);border-color:var(--accent);color:white}
  .action-btn.primary:hover{background:#e55a5a}
  .action-btn.share-fb{background:#1877F2;border-color:#1877F2;color:white}
  .action-btn.share-fb:hover{background:#166FE5}
  .action-btn.share-pin{background:#E60023;border-color:#E60023;color:white}
  .action-btn.share-pin:hover{background:#CC001F}
  .action-btn.purple{background:#6C5CE7;border-color:#6C5CE7;color:white}
  .action-btn.purple:hover{background:#5a4bd6}
  .action-btn.teal{background:var(--accent2);border-color:var(--accent2);color:white}
  .action-btn.teal:hover{background:#3dbdb5}
  .action-btn.rainbow{
    background:linear-gradient(135deg,#FF6B6B,#FFB347,#A8E06C,#4ECDC4,#6C5CE7);
    border-color:transparent;color:white;font-size:13px;
  }
  .action-btn.rainbow:hover{opacity:0.9}
  .action-btn svg{width:15px;height:15px}
  .action-row{display:flex;gap:5px}
  .action-row .action-btn{flex:1}
  .region-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:#F0FAF8;border:1px solid #D0EDE8;border-radius:8px;
    padding:6px 10px;font-size:12px;color:#2A7A6E;font-weight:600;width:100%;
  }
  .region-badge strong{font-size:16px;font-family:'Fredoka',sans-serif}
  /* Gradient controls */
  .grad-dropdown{position:relative}
  .grad-selected{
    display:flex;align-items:center;gap:8px;padding:8px 12px;
    border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all 0.15s;
  }
  .grad-selected:hover{border-color:#ccc}
  .grad-selected.open{border-color:var(--accent);border-radius:12px 12px 0 0}
  .grad-preview-swatch{width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.1);flex-shrink:0}
  .grad-sel-name{font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;flex:1}
  .grad-flyout{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:white;border:2px solid var(--accent);border-top:none;
    border-radius:0 0 12px 12px;z-index:30;overflow:hidden;
  }
  .grad-flyout.open{display:block}
  .grad-fly-option{
    display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background 0.1s;
  }
  .grad-fly-option:hover{background:#FFF5F5}
  .grad-fly-option.active{background:#FFF0F0}
  .grad-fly-option span{font-family:'Fredoka',sans-serif;font-size:13px;font-weight:500}
  .grad-fly-swatch{width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.1);flex-shrink:0}
  .grad-backdrop{position:fixed;inset:0;z-index:29;display:none}
  .grad-backdrop.open{display:block}
  .gradient-dirs{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
  .grad-dir{
    aspect-ratio:1;border-radius:6px;border:2px solid var(--border);
    background:white;cursor:pointer;padding:0;
    transition:all 0.15s;overflow:hidden;position:relative;
  }
  .grad-dir:hover{border-color:#ccc;transform:scale(1.05)}
  .grad-dir.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .grad-dir-arrow{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;color:white;
    text-shadow:0 0 3px rgba(0,0,0,0.7),0 0 1px rgba(0,0,0,0.9);pointer-events:none;
  }

  .canvas-area{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative}
  .canvas-toolbar{
    display:flex;align-items:center;gap:6px;
    background:var(--panel);border-radius:14px;
    box-shadow:0 5px 18px rgba(74,55,40,.07);border:1px solid #EDE2D5;
    padding:8px 10px;flex-shrink:0;position:relative;
  }
  .canvas-toolbar .zoom-btn{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
    background:white;cursor:pointer;font-size:18px;font-weight:700;
    font-family:'Fredoka',sans-serif;color:var(--text);
    transition:background 0.15s,border-color 0.15s,color 0.15s;  /* NOT visibility — 'all' left Undo/Redo stuck hidden */
    position:relative;right:auto;pointer-events:auto;
  }
  .canvas-toolbar .zoom-btn:hover{background:#FAF7F4;border-color:#ccc}
  .canvas-toolbar .zoom-btn.text{width:auto;padding:0 10px;font-size:12px}
  .desktop-zoom-toggle{gap:4px}
  .desktop-zoom-toggle.zoomed-in{border-color:var(--accent);color:var(--accent)}
  .fullscreen-toggle{gap:5px}.fullscreen-toggle.is-active{border-color:#6C5CE7!important;color:#6C5CE7!important;background:#F4F1FF!important}
  .zoom-label{font-size:13px;font-weight:700;font-family:'Fredoka',sans-serif;min-width:40px;text-align:center}
  .canvas-toolbar p{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;
    color:var(--text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:40%;text-align:center;pointer-events:none;
  }
  .wheel-zoom-hint{margin-left:6px;color:#A18F7D;font-size:11px;font-weight:700;white-space:nowrap}
  .app-layout:fullscreen{width:100%;max-width:none;height:100vh;margin:0;padding:16px;gap:18px;align-items:stretch;background:var(--bg)}
  .app-layout:fullscreen .toolbar{position:relative;top:0;height:100%;max-height:none}
  .app-layout:fullscreen .canvas-area{height:100%;min-height:0}
  .app-layout:fullscreen .canvas-wrap{min-height:0;max-height:none}
  .app-layout:fullscreen .canvas-wrap:not(.zoomed) #canvas{max-height:calc(100vh - 88px)!important}
  .app-layout:-webkit-full-screen{width:100%;max-width:none;height:100vh;margin:0;padding:16px;gap:18px;align-items:stretch;background:var(--bg)}
  .app-layout:-webkit-full-screen .toolbar{position:relative;top:0;height:100%;max-height:none}
  .app-layout:-webkit-full-screen .canvas-area{height:100%;min-height:0}
  .app-layout:-webkit-full-screen .canvas-wrap{min-height:0;max-height:none}
  .app-layout:-webkit-full-screen .canvas-wrap:not(.zoomed) #canvas{max-height:calc(100vh - 88px)!important}
  .canvas-wrap{
    flex:1;min-width:0;background:linear-gradient(145deg,#FFFFFF,#FFFCF8);
    border-radius:20px;box-shadow:0 10px 32px rgba(74,55,40,.1);
    border:1px solid #EDE2D5;padding:16px;
    position:relative;
    overflow:hidden;max-height:calc(100vh - 128px);
    display:flex;align-items:center;justify-content:center;
  }
  .canvas-wrap.zoomed{
    display:block;overflow:auto;
  }
  .canvas-wrap.zoomed .canvas-container{display:block;width:max-content;margin-left:auto;margin-right:auto}
  .canvas-wrap.panning{cursor:grabbing!important}
  .canvas-wrap.panning *{cursor:grabbing!important;pointer-events:none}
  .canvas-container{position:relative;display:inline-block;line-height:0;max-width:100%;border-radius:10px;
    background:#fff;box-shadow:0 2px 9px rgba(74,55,40,.08)}
  .canvas-container canvas{display:block;border-radius:10px;cursor:crosshair}
  #overlayCanvas{position:absolute;top:0;left:0;pointer-events:none;border-radius:6px;opacity:0.45}
  .loading-overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    background:rgba(255,248,240,0.92);border-radius:var(--radius);z-index:10;gap:10px;
  }
  .spinner{width:36px;height:36px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .loading-text{font-family:'Fredoka',sans-serif;font-size:14px;color:var(--text-light)}
  .hidden{display:none!important}
  /* Color dot on the Undo button — shows what color the next undo removes */
  .undo-color-dot{
    display:inline-block;width:12px;height:12px;margin-left:6px;border-radius:50%;
    vertical-align:middle;border:1.5px solid rgba(0,0,0,0.28);
    box-shadow:0 1px 2px rgba(0,0,0,0.18);flex-shrink:0;
  }
  .brush-cursor{
    position:fixed;pointer-events:none;z-index:90;
    border:2px solid rgba(0,0,0,0.5);border-radius:50%;
    box-shadow:0 0 0 1px rgba(255,255,255,0.6);
    display:none;transform:translate(-50%,-50%);
  }
  .brush-cursor.show-dot::after{
    content:'';position:absolute;top:50%;left:50%;
    width:4px;height:4px;border-radius:50%;
    background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.7);
    transform:translate(-50%,-50%);
  }
  .toast{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    background:rgba(74,55,40,0.9);color:white;padding:8px 18px;
    border-radius:10px;font-family:'Fredoka',sans-serif;font-size:13px;
    z-index:100;opacity:0;transition:opacity 0.3s;pointer-events:none;
  }
  .toast.show{opacity:1}
  .modal-bg{
    position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;
    display:none;align-items:center;justify-content:center;
  }
  .modal-bg.visible{display:flex}
  .modal{
    background:white;border-radius:16px;padding:24px;max-width:560px;width:90%;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);max-height:80vh;display:flex;flex-direction:column;
  }
  .modal h2{font-family:'Fredoka',sans-serif;font-size:20px;margin-bottom:12px}
  .modal textarea{
    width:100%;height:200px;border:2px solid var(--border);border-radius:10px;
    padding:12px;font-family:monospace;font-size:12px;resize:vertical;margin-bottom:12px;
  }
  .modal .modal-actions{display:flex;gap:8px;justify-content:flex-end}
  .modal .modal-actions button{
    padding:8px 20px;border-radius:8px;border:2px solid var(--border);
    background:white;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;cursor:pointer;color:var(--text);
  }
  .modal .modal-actions button.primary{background:var(--accent);border-color:var(--accent);color:white}
  .file-input-wrap{margin-bottom:12px}
  .file-input-wrap label{
    display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
    border-radius:8px;border:2px solid var(--border);cursor:pointer;font-size:12px;font-weight:700;color:var(--text);
  }
  .file-input-wrap label:hover{border-color:#ccc}
  .file-input-wrap input{display:none}
  .color-popup{
    display:none;position:absolute;top:12px;right:12px;z-index:20;
    background:rgba(74,55,40,0.75);color:white;
    padding:6px 14px;border-radius:10px;
    font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;
    align-items:center;gap:8px;
    opacity:0;transition:opacity 0.25s;pointer-events:none;
  }
  .color-popup.show{display:flex;opacity:1}
  .color-popup-dot{
    width:18px;height:18px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.7);flex-shrink:0;
  }

  .mobile-only-more{display:none}
  .mobile-only-hint{display:none}
  .palette-wrap{position:relative}
  .palette-empty-msg{
    position:absolute;inset:0;display:none;align-items:center;justify-content:center;
    font-size:13px;color:var(--text-light);font-family:'Nunito',sans-serif;
    pointer-events:none;background:rgba(255,255,255,0.7);border-radius:8px;z-index:2;
  }
  .more-colors-btn{
    width:100%;padding:10px;margin-top:6px;border:2px dashed var(--border);border-radius:10px;
    background:white;cursor:pointer;font-family:'Fredoka',sans-serif;
    font-size:13px;font-weight:600;color:var(--text-light);transition:all 0.15s;
  }
  .more-colors-btn:hover{border-color:#ccc;color:var(--text)}
  .color-hint{
    position:absolute;bottom:0;left:0;right:0;
    padding:8px 12px;border-radius:0 0 8px 8px;
    background:rgba(74,55,40,0.85);backdrop-filter:blur(4px);
    font-family:'Nunito',sans-serif;font-size:12px;color:white;
    text-align:center;z-index:5;pointer-events:none;
  }

  /* Mobile floating bar + overlay - hidden on desktop */
  .mobile-bar,.mobile-overlay{display:none}
  .mobile-reset-btn,.mobile-zoom-reset{display:none}

  /* Expanded editor-style color library */
  .color-library-modal{display:none;position:fixed;inset:0;z-index:1200;padding:18px;align-items:center;justify-content:center;
    background:rgba(48,37,31,.5);backdrop-filter:blur(4px)}
  .color-library-modal.open{display:flex}.color-library-card{width:860px;max-width:100%;max-height:88vh;overflow:hidden;
    display:flex;flex-direction:column;border-radius:22px;background:#fff;box-shadow:0 22px 60px rgba(36,25,20,.28)}
  .color-library-head{display:flex;align-items:flex-start;gap:18px;padding:20px 22px 16px;border-bottom:1px solid #EEE4D9;background:linear-gradient(120deg,#FFF9EF,#F4F1FF)}
  .color-library-head>div{flex:1}.color-library-head>div>span{font-family:'Fredoka',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7B68E8}
  .color-library-head h2{font-family:'Fredoka',sans-serif;font-size:23px;color:#403442;margin:3px 0}.color-library-head p{font-size:12px;color:var(--text-light)}
  .color-library-close{width:36px;height:36px;flex:0 0 auto;border:none;border-radius:50%;background:rgba(255,255,255,.82);color:#958577;
    font-size:25px;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(74,55,40,.09)}
  .color-library-close:hover{background:#FFF0ED;color:#D95E50}.color-library-content{overflow-y:auto;padding:16px 22px 22px;display:flex;flex-direction:column;gap:8px}
  .color-library-section{margin:9px 0 2px;padding-bottom:5px;border-bottom:1px solid #EEE6DD;font-family:'Fredoka',sans-serif;
    font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9A8877}
  .color-library-section:first-child{margin-top:0}.color-library-row{display:grid;grid-template-columns:105px 1fr;gap:12px;align-items:center;padding:5px 0}
  .color-library-row>span{font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;color:#584A42;text-align:right}.color-library-swatches{display:flex;flex-wrap:wrap;gap:5px}
  .color-library-swatch{width:30px;height:30px;border-radius:8px;border:1px solid rgba(50,38,30,.16);cursor:pointer;padding:0;
    box-shadow:inset 0 -2px 3px rgba(0,0,0,.08);transition:transform .13s,box-shadow .13s,border-color .13s}
  .color-library-swatch:hover{position:relative;z-index:1;transform:scale(1.2);border-color:#403442;box-shadow:0 4px 9px rgba(45,33,26,.25)}
  .color-library-swatch.is-selected{outline:3px solid #403442;outline-offset:1px}

  /* Color Together QR popup (shown after a room is created) */
  .ct-qr-modal{display:none;position:fixed;inset:0;z-index:1300;padding:18px;align-items:center;justify-content:center;
    background:rgba(48,37,31,.55);backdrop-filter:blur(4px)}
  .ct-qr-modal.open{display:flex}
  .ct-qr-card{position:relative;width:360px;max-width:100%;background:#fff;border-radius:22px;
    padding:26px 24px 22px;text-align:center;box-shadow:0 22px 60px rgba(36,25,20,.3);
    display:flex;flex-direction:column;align-items:center;gap:8px}
  .ct-qr-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;border-radius:50%;
    background:#F5F0EA;color:#958577;font-size:24px;line-height:1;cursor:pointer}
  .ct-qr-close:hover{background:#FFF0ED;color:#D95E50}
  .ct-qr-eyebrow{font-family:'Fredoka',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
  .ct-qr-card h2{font-family:'Fredoka',sans-serif;font-size:22px;color:#403442;margin:0}
  .ct-qr-card p{font-size:13px;color:var(--text-light);line-height:1.4;margin:0 0 4px;max-width:290px}
  .ct-qr-code{width:220px;height:220px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:14px}
  .ct-qr-code svg{width:100%;height:100%;display:block}
  .ct-qr-codeword{font-size:13px;color:var(--text-light);font-weight:600}
  .ct-qr-codeword strong{font-family:'Fredoka',sans-serif;font-size:20px;letter-spacing:3px;color:#403442}
  .ct-qr-actions{display:flex;gap:8px;width:100%;margin-top:8px}
  .ct-qr-actions .btn{flex:1;justify-content:center;text-align:center}
  /* Invite modal fields (link row + name) */
  .invite-scan-hint{font-size:11px;color:var(--text-light);margin-top:-2px}
  .invite-field{width:100%;display:flex;flex-direction:column;gap:5px;text-align:left;margin-top:4px}
  .invite-field>label{font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;color:#584A42}
  .invite-field>label small{font-weight:400;color:var(--text-light)}
  .invite-linkrow{display:flex;gap:6px}
  .invite-linkrow input,.invite-field>input{flex:1;min-width:0;font-family:'Nunito',sans-serif;font-size:13px;
    border:2px solid var(--border);border-radius:10px;padding:9px 11px;background:#fff;color:var(--text);outline:none}
  .invite-linkrow input:focus,.invite-field>input:focus{border-color:var(--accent)}
  .invite-linkrow .btn{flex:0 0 auto;padding:9px 16px}
  /* Live presence chips, floated over the top-left of the canvas */
  .collab-presence-float{position:absolute;top:8px;left:8px;z-index:40;margin:0;
    max-width:calc(100% - 16px);pointer-events:none}

  /* Save and sharing live below the focused coloring workspace. */
  .color-share-panel{max-width:1248px;margin:0 auto 30px;padding:22px 24px;display:grid;grid-template-columns:minmax(230px,.75fr) minmax(0,1.6fr);
    gap:24px;align-items:center;border:1px solid #E9DFD3;border-radius:20px;background:linear-gradient(125deg,#FFF9EF,#F5F3FF);
    box-shadow:0 7px 24px rgba(74,55,40,.07)}
  .color-share-copy>span{font-family:'Fredoka',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
  .color-share-copy h2{font-family:'Fredoka',sans-serif;font-size:20px;line-height:1.15;color:#433744;margin:4px 0 5px}
  .color-share-copy p{font-size:12px;line-height:1.45;color:var(--text-light)}
  .color-share-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .color-share-actions .action-btn{width:auto;min-height:42px;padding:9px 10px;text-decoration:none;text-align:center}

  @media(max-width:1024px){
    .app-layout{padding:0;gap:0}
    .toolbar{display:none!important}
    .canvas-area{gap:0;height:calc(100vh - 56px);overflow:hidden}
    .canvas-toolbar{display:none}
    .canvas-wrap{
      border:none;border-radius:0;box-shadow:none;padding:4px;
      flex:1;min-height:0;max-height:none;
    }
    .canvas-wrap.zoomed .canvas-container{margin:0;width:max-content}

    /* Mobile fullscreen: the desktop rules add 16px chrome padding which made the
       picture smaller than normal. Drop it so the image fills the width and uses
       the whole height above the floating bar. */
    .app-layout:fullscreen,.app-layout:-webkit-full-screen{padding:0;gap:0}
    .app-layout:fullscreen .canvas-wrap,
    .app-layout:-webkit-full-screen .canvas-wrap{padding:2px 0 calc(58px + env(safe-area-inset-bottom))}
    .app-layout:fullscreen .canvas-wrap:not(.zoomed) #canvas,
    .app-layout:-webkit-full-screen .canvas-wrap:not(.zoomed) #canvas{
      max-width:100%!important;max-height:calc(100vh - 70px)!important;
    }

    /* Mobile Start Over button above canvas */
    .mobile-reset-btn.visible{
      display:flex;align-items:center;justify-content:center;gap:4px;
      margin:4px 8px 2px;padding:5px 14px;flex-shrink:0;
      border:1px solid var(--border);border-radius:8px;
      background:white;color:var(--accent);
      font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;
      cursor:pointer;align-self:flex-end;
    }

    /* Floating bottom bar */
    .mobile-bar{
      display:flex;align-items:center;gap:6px;
      position:fixed;bottom:0;left:0;right:0;z-index:50;
      background:white;border-top:1px solid var(--border);
      padding:8px 12px;
      padding-bottom:max(8px, env(safe-area-inset-bottom));
    }
    .mobile-btn{
      display:flex;align-items:center;justify-content:center;gap:4px;
      height:40px;border-radius:10px;border:1px solid var(--border);
      background:white;cursor:pointer;color:var(--text);
      font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;
      transition:all 0.15s;flex-shrink:0;padding:0 12px;
    }
    .mobile-btn:active{background:#F5F0EA}
    .mobile-undo-btn,.mobile-zoom-btn{font-size:13px}
    .mobile-zoom-btn.zoomed-in{border-color:var(--accent);color:var(--accent)}
    .mobile-menu-btn{
      width:44px;height:44px;padding:0;
      background:var(--accent);border-color:var(--accent);color:white;
    }
    .mobile-menu-btn:active{background:#e55a5a}
    /* Colors button: clean pill that shows the currently selected color */
    .mobile-color-btn{
      width:auto;padding:0 15px 0 8px;gap:9px;
      background:white;border-color:var(--border);color:var(--text);font-size:13px;
    }
    .mobile-color-btn:active{background:#F5F0EA}
    .mobile-color-btn.active-panel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,107,107,.25)}
    .mobile-color-swatch{
      width:26px;height:26px;border-radius:50%;flex-shrink:0;
      border:2px solid rgba(0,0,0,.12);
      box-shadow:inset 0 -2px 5px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.1);
      background:#fff;
    }
    /* Rainbow wheel shown until the user picks their first color */
    .mobile-color-swatch.is-rainbow,.bar-color-dot.is-rainbow{
      background:conic-gradient(from 0deg,#FF6B6B,#FFB347,#FFE66D,#A8E06C,#4ECDC4,#4D96FF,#9C6ADE,#FF6B6B);
    }
    .mobile-menu-btn.active-panel{background:#CC5555;border-color:#CC5555}

    /* Overlay */
    .mobile-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:56px;z-index:45}
    .mobile-overlay.open{display:flex;flex-direction:column}
    .mobile-overlay-bg{display:none}
    .mobile-panel{
      position:relative;z-index:1;
      background:white;
      flex:1;display:flex;flex-direction:column;
      min-height:0;
      animation:fadeIn 0.15s ease-out;
    }
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    .mobile-panel-body{
      padding:10px 14px 14px;overflow-y:auto;
      flex:1;min-height:0;
      display:flex;flex-direction:column;gap:10px;
    }
    /* Hide section labels on mobile */
    .mobile-panel-body .section-label{display:none}
    /* Override styles inside mobile panel */
    .mobile-panel-body .palette-grid{grid-template-columns:repeat(6,1fr);gap:6px}
    .mobile-panel-body .color-swatch{border-radius:10px}
    .mobile-panel-body .picker-sat{width:100%;height:250px}
    .mobile-panel-body .picker-hue{height:250px}
    .mobile-panel-body .picker-row{gap:8px}
    .mobile-panel-body .action-row{gap:6px}
    .mobile-panel-body .action-btn{padding:12px}
    .mobile-panel-body .desktop-only-nav{display:none!important}
    .mobile-panel-body .mobile-only-more{display:block}
    .mobile-panel-body .mobile-only-hint{display:block}
    .mobile-panel-body .palette-nav-btn{width:36px;height:36px;font-size:14px;border-radius:8px}
    .mobile-panel-body .palette-nav-label{font-size:14px;min-width:70px}
    .mobile-panel-body .tool-dropdown{position:relative}
    .mobile-panel-body .tool-flyout{position:absolute;z-index:10}
    .mobile-panel-body .grad-flyout{position:absolute;z-index:10}
    .color-share-panel{margin:16px 14px 78px;grid-template-columns:1fr;gap:14px}
    .coloring-ad-slot{margin:8px 12px 10px;height:88px}.mobile-panel-body .color-library-btn{width:38px;height:36px}

    /* Items 1 & 3: color and menu panels fly up from the bottom, stopping just
       above the floating bar so the bar's Close button stays reachable. */
    .mobile-overlay{
      display:flex!important;flex-direction:column;
      transform:translateY(110%);
      transition:transform .3s cubic-bezier(.22,1,.36,1);
      pointer-events:none;
    }
    .mobile-overlay.open{transform:translateY(0);pointer-events:auto}
    .mobile-overlay .mobile-panel{animation:none}   /* the slide is the entrance */

    /* Contextual bottom bar: swap the default tools for the panel's controls. */
    .bar-current-color,.bar-close-btn{display:none}
    .mobile-bar.ctx-color .bar-default,
    .mobile-bar.ctx-menu .bar-default{display:none}
    .mobile-bar.ctx-color .bar-current-color{display:flex;align-items:center;gap:9px;padding-left:4px}
    .mobile-bar.ctx-color .bar-close-btn,
    .mobile-bar.ctx-menu .bar-close-btn{display:inline-flex}
    .bar-color-dot{width:26px;height:26px;border-radius:8px;flex-shrink:0;
      border:2px solid rgba(0,0,0,.15);box-shadow:inset 0 -2px 4px rgba(0,0,0,.12)}
    .bar-color-label{font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;color:var(--text)}
    .bar-close-btn{padding:0 20px;background:var(--accent);border-color:var(--accent);color:white}
    .bar-close-btn:active{background:#e55a5a}

    /* Item 2: floating Reset Zoom pill, shown only while pinch-zoomed */
    .mobile-zoom-reset{
      display:none;position:absolute;top:8px;right:8px;z-index:30;
      align-items:center;gap:5px;padding:7px 12px;
      border:1px solid var(--border);border-radius:999px;
      background:rgba(255,255,255,.95);color:var(--accent);
      font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;
      box-shadow:0 3px 10px rgba(74,55,40,.15);cursor:pointer;
    }
    .mobile-zoom-reset.visible{display:inline-flex}

    /* Items 6 & 7: Color Together / Full Screen actions inside the menu */
    .mobile-menu-action{
      display:flex;align-items:center;gap:12px;width:100%;
      padding:14px 16px;border:2px solid var(--border);border-radius:12px;
      background:white;color:var(--text);cursor:pointer;
      font-family:'Fredoka',sans-serif;font-size:15px;font-weight:600;
    }
    .mobile-menu-action:active{background:#F5F0EA}
    .mobile-menu-action svg{flex-shrink:0;color:var(--accent)}
  }
  @media(max-width:720px){
    .color-share-panel{padding:18px}.color-share-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
    .color-share-actions .action-btn.rainbow{grid-column:1/-1}
    .color-library-modal{padding:8px}.color-library-card{max-height:94vh;border-radius:17px}.color-library-head{padding:15px 16px 12px}
    .color-library-head h2{font-size:19px}.color-library-head p{display:none}.color-library-content{padding:11px 13px 16px;gap:9px}
    .color-library-row{grid-template-columns:1fr;gap:5px}.color-library-row>span{text-align:left;font-size:13px}.color-library-swatches{gap:7px}
    .color-library-swatch{width:38px;height:38px;border-radius:10px}
  }