*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #1a1a2e; color: #eee; }

.landing { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.landing-box { text-align: center; background: #16213e; padding: 48px 64px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); width: 100%; max-width: 540px; }
.landing-box h1 { font-size: 2.4rem; margin-bottom: 12px; }
.landing-box p  { color: #aaa; margin-bottom: 28px; }
.btn-create { display: inline-block; background: #3498db; color: #fff; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-size: 1.1rem; font-weight: 600; transition: background 0.2s; cursor: pointer; border: none; }
.btn-create:hover { background: #2980b9; }
.btn-disabled { background: #555 !important; cursor: not-allowed !important; opacity: 0.6; }
.warning-box { background: #4a2000; border: 1px solid #e67e22; color: #e67e22; padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.error-msg   { background: #4a0000; border: 1px solid #e74c3c; color: #e74c3c; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; }

#my-boards-section h2 { font-size: 1rem; color: #aaa; margin-bottom: 12px; text-align: left; }
#my-boards-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
#my-boards-list li { display: flex; align-items: center; gap: 6px; }
.board-link { flex: 1; display: flex; align-items: center; gap: 10px; background: #0f3460; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: #eee; transition: background 0.15s; }
.board-link:hover { background: #1a4a80; }
.board-link-icon { font-size: 1.1rem; flex-shrink: 0; }
.board-link-label { font-weight: 600; flex: 1; text-align: left; }
.board-link-id { font-size: 0.75rem; color: #aaa; font-family: monospace; }
.board-remove { background: transparent; border: 1px solid #e74c3c; color: #e74c3c; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; flex-shrink: 0; }
.board-remove:hover { background: #e74c3c; color: #fff; }

.rename-input { background: #0f3460; border: 1px solid #3498db; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: inherit; font-family: inherit; font-weight: inherit; width: 120px; outline: none; }
.rename-input:focus { border-color: #5dade2; box-shadow: 0 0 0 2px rgba(52,152,219,0.3); }

.board-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 12px; background: #16213e; border-bottom: 1px solid #0f3460; flex-shrink: 0; z-index: 10; }
#logo { font-size: 1.3rem; text-decoration: none; flex-shrink: 0; }
#board-tabs-wrapper { display: flex; align-items: center; gap: 4px; overflow-x: auto; max-width: 300px; flex-shrink: 0; }
#board-tabs { display: flex; gap: 4px; }
.board-tab { display: flex; align-items: center; gap: 6px; background: #0f3460; color: #aaa; border: 1px solid #0f3460; padding: 4px 10px; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 0.78rem; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.board-tab:hover { background: #1a4a80; color: #eee; }
.board-tab.active-tab { background: #3498db; color: #fff; border-color: #3498db; }
.tab-label { pointer-events: auto; }
.tab-close { font-size: 0.7rem; opacity: 0.6; padding: 1px 3px; border-radius: 3px; }
.tab-close:hover { opacity: 1; background: rgba(255,255,255,0.2); }
#btn-new-board { background: #0f3460; border: 1px dashed #3498db; color: #3498db; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 1rem; flex-shrink: 0; }
#btn-new-board:hover { background: #3498db; color: #fff; }
.tool-group { display: flex; align-items: center; gap: 6px; }
.tool-group label { font-size: 0.72rem; color: #aaa; }
.tool-group.right { margin-left: auto; }
#color-swatches { display: flex; gap: 4px; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s; flex-shrink: 0; }
.swatch:hover, .swatch.active { border-color: #fff; transform: scale(1.2); }
#color-picker { width: 30px; height: 26px; border: none; background: none; cursor: pointer; padding: 0; }
#brush-size { width: 75px; cursor: pointer; }
#brush-preview { display: inline-block; background: #fff; border-radius: 50%; width: 8px; height: 8px; transition: width 0.1s, height 0.1s; flex-shrink: 0; }
button { background: #0f3460; color: #eee; border: 1px solid #3498db; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; transition: background 0.15s; white-space: nowrap; }
button:hover { background: #3498db; }
button.active-tool { background: #3498db; }
button.danger { border-color: #e74c3c; color: #e74c3c; }
button.danger:hover { background: #e74c3c; color: #fff; }
#user-count { font-size: 0.85rem; color: #2ecc71; font-weight: 600; white-space: nowrap; }
#canvas-wrapper { flex: 1; overflow: auto; background: #2c2c3e; background-image: radial-gradient(circle, #444 1px, transparent 1px); background-size: 24px 24px; }
#canvas { display: block; background: #ffffff; cursor: crosshair; box-shadow: 0 4px 32px rgba(0,0,0,0.5); margin: 24px; }
#deleted-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 999; align-items: center; justify-content: center; }
.overlay-box { background: #16213e; padding: 40px 48px; border-radius: 16px; text-align: center; }
.overlay-box h2 { font-size: 1.8rem; margin-bottom: 12px; }
.overlay-box p  { color: #aaa; margin-bottom: 20px; }
.overlay-box a  { display: inline-block; background: #3498db; color: #fff; padding: 10px 24px; border-radius: 8px; text-decoration: none; }

/* ── Admin ── */
.admin-page { min-height: 100vh; background: #1a1a2e; }
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
#login-form { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
#login-form input { background: #0f3460; border: 1px solid #3498db; color: #eee; padding: 10px 14px; border-radius: 8px; font-size: 1rem; outline: none; }
#login-form input:focus { border-color: #5dade2; }
#admin-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #16213e; border-bottom: 1px solid #0f3460; }
#admin-toolbar span { font-weight: 700; color: #3498db; flex: 1; }
#admin-content { padding: 24px; }
#admin-stats { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-card { background: #16213e; border-radius: 12px; padding: 20px 28px; text-align: center; min-width: 120px; }
.stat-card span  { display: block; font-size: 2rem; font-weight: 700; color: #3498db; }
.stat-card label { font-size: 0.8rem; color: #aaa; }
#boards-table { width: 100%; border-collapse: collapse; background: #16213e; border-radius: 12px; overflow: hidden; }
#boards-table th { background: #0f3460; padding: 10px 14px; text-align: left; font-size: 0.82rem; color: #aaa; }
#boards-table td { padding: 10px 14px; border-bottom: 1px solid #0f3460; font-size: 0.85rem; vertical-align: middle; }
#boards-table tr:last-child td { border-bottom: none; }
#boards-table tr:hover td { background: rgba(52,152,219,0.05); }
.board-name-cell { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.admin-board-name { font-weight: 600; color: #eee; }
.unnamed { color: #555; font-style: italic; font-weight: normal; }
.board-id-row { display: flex; align-items: center; gap: 4px; }
.mono { font-family: monospace; color: #3498db; text-decoration: none; font-size: 0.8rem; }
.mono:hover { text-decoration: underline; }
.copy-btn { background: transparent; border: none; cursor: pointer; font-size: 0.85rem; padding: 2px 4px; opacity: 0.7; }
.copy-btn:hover { opacity: 1; }
.icon-btn { background: transparent; border: none; cursor: pointer; font-size: 0.85rem; padding: 2px 4px; opacity: 0.6; }
.icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); border-radius: 4px; }
.action-btns { display: flex; gap: 6px; }
.online-dot { display: inline-block; width: 8px; height: 8px; background: #2ecc71; border-radius: 50%; margin-right: 4px; }