.whiteboard-container{width:100%;max-width:1200px;padding:var(--mobile-padding)}.whiteboard-stage:-webkit-full-screen{width:100vw;height:100vh;overflow:auto}.whiteboard-stage:-ms-fullscreen{width:100vw;height:100vh;overflow:auto}.whiteboard-toolbar{gap:8px;justify-content:flex-start;padding:8px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);position:sticky;top:0;z-index:10}.whiteboard-toolbar .tool-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.whiteboard-toolbar :is(.action-btn,.tool-btn){min-height:44px;min-width:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--card-border);background:var(--accent-bg);color:var(--text-color);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease;box-shadow:0 1px 2px var(--shadow-color)}.whiteboard-toolbar .tool-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.whiteboard-toolbar :is(.action-btn:active,.tool-btn:active){transform:scale(.98)}.whiteboard-toolbar input[type=color]{appearance:none;width:44px;height:44px;padding:0;border:1px solid var(--card-border);border-radius:8px;background:#0000}.whiteboard-toolbar input[type=color]::-webkit-color-swatch-wrapper{padding:0}.whiteboard-toolbar input[type=color]::-webkit-color-swatch{border:none;border-radius:8px}.whiteboard-toolbar input[type=range]{appearance:none;width:140px;height:44px;background:#0000}.whiteboard-toolbar input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--card-border);border-radius:999px}.whiteboard-toolbar input[type=range]::-webkit-slider-thumb{appearance:none;width:28px;height:28px;border-radius:50%;margin-top:-11px;background:var(--primary-color);border:2px solid #fff;box-shadow:0 1px 3px var(--shadow-color)}.whiteboard-toolbar input[type=range]::-moz-range-track{height:6px;background:var(--card-border);border-radius:999px}.whiteboard-toolbar input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--primary-color);border:2px solid #fff}.canvas-container{width:100%;margin-top:12px;overscroll-behavior:contain;touch-action:none}.whiteboard-canvas{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--card-border);border-radius:12px;-webkit-touch-callout:none;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.floating-show-toolbar{right:12px;bottom:12px;min-height:44px;min-width:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--card-border);font-weight:700;box-shadow:0 6px 16px var(--shadow-color)}.whiteboard-instructions{margin-top:16px;font-size:var(--mobile-body-size)}@media (max-width:480px){.whiteboard-toolbar{gap:6px;padding:6px}.whiteboard-toolbar :is(.action-btn,.tool-btn){padding:8px 10px;font-size:.9rem}.whiteboard-toolbar input[type=range]{width:120px}}.whiteboard-container{max-width:1400px;margin:0 auto;padding:2rem}.whiteboard-toolbar{background:var(--box-bg);border-radius:12px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 20px var(--shadow-color);gap:1.5rem;justify-content:center}.tool-group,.whiteboard-toolbar{display:flex;flex-wrap:wrap;align-items:center}.tool-group{gap:.5rem}.tool-btn{padding:.75rem 1.5rem;border:2px solid var(--border-color);border-radius:8px;background:var(--box-bg);color:var(--text-color);cursor:pointer;transition:all .3s ease;font-weight:500}.tool-btn.active,.tool-btn:hover{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.action-btn{padding:.75rem 1.5rem;border:2px solid var(--border-color);border-radius:8px;background:var(--box-bg);color:var(--text-color);cursor:pointer;transition:all .3s ease;font-weight:500}.action-btn:hover{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.action-btn:disabled{opacity:.5;cursor:not-allowed}.canvas-container{position:relative;display:flex;justify-content:center;margin-bottom:2rem}.whiteboard-canvas{border:2px solid var(--border-color);border-radius:8px;box-shadow:0 4px 20px var(--shadow-color);background:#fff}.floating-show-toolbar{position:absolute;top:1rem;right:1rem;padding:.75rem 1.5rem;border:2px solid var(--primary-color);border-radius:8px;background:var(--primary-color);color:#fff;cursor:pointer;transition:all .3s ease;font-weight:500;z-index:10}.floating-show-toolbar:hover{background:#0056b3;border-color:#0056b3}.whiteboard-instructions{background:var(--box-bg);border-radius:12px;padding:2rem;box-shadow:0 4px 20px var(--shadow-color)}.whiteboard-instructions h3{color:var(--primary-color);margin-bottom:1rem;text-align:center}.whiteboard-instructions ul{list-style:none;padding:0}.whiteboard-instructions li{background:none;margin:.5rem 0;padding:.5rem 0;border-bottom:1px solid var(--border-color);box-shadow:none;display:block;justify-content:flex-start;align-items:flex-start}.whiteboard-instructions li:last-child{border-bottom:none}.whiteboard-instructions strong{color:var(--primary-color)}