/* Arama, kalem/tahta, zamanlayıcı, bildirim */
/* ---------- Arama ---------- */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;background:rgba(10,14,20,.42);backdrop-filter:blur(3px)}
.modal[hidden]{display:none}
.modal-box{width:min(640px,100%);background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.search-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-in input{flex:1;border:0;background:none;font-size:1.05rem;padding:6px 0;outline:none!important}
.search-res{max-height:56vh;overflow-y:auto;padding:6px}
.sr{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.sr.on,.sr:hover{background:var(--soft)}
.sr .k{font:600 .68rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--accent));min-width:62px}
.sr small{display:block;color:var(--ink-3);font-size:.8rem}
.search-empty{padding:28px;text-align:center;color:var(--ink-3)}


/* ---------- Kalem / tahta ---------- */
#board{position:fixed;inset:0;z-index:70}
#board[hidden]{display:none}
#board canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}
#board.bg-grid{background-color:#fdfcf8;background-image:linear-gradient(rgba(41,82,179,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(41,82,179,.12) 1px,transparent 1px);background-size:32px 32px}
#board.bg-chalk{background-color:#1d2924;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.board-bar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px)}
.board-bar .sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.board-bar .icon-btn.on{background:var(--ink);color:var(--bg)}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--paper);box-shadow:0 0 0 1.5px var(--line-2);cursor:pointer;margin:0 2px}
.swatch.on{box-shadow:0 0 0 2.5px var(--ink)}


/* ---------- Zamanlayıcı ---------- */
#timer{position:fixed;right:18px;bottom:18px;z-index:75;width:250px;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg)}
#timer[hidden]{display:none}
#timer .tm{font:600 2.8rem/1 var(--font-mono);text-align:center;margin:6px 0 12px;letter-spacing:.02em}
#timer.done .tm{color:var(--red);animation:blink .5s steps(2) 6}
@keyframes blink{50%{opacity:.2}}
#timer .tm-h{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--ink-3)}
#timer .btn-row{justify-content:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:95;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.9rem;font-weight:500;transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}