/* All UI rules scoped: safe alongside host site styles. */
.sa-host { --sa-ink:#21364b; --sa-blue:#285dde; --sa-border:#dce3ec; --sa-muted:#64758a; font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--sa-ink); isolation:isolate; }
.sa-host *, .sa-host *::before, .sa-host *::after { box-sizing:border-box; }
.sa-host [hidden] { display:none !important; }
.sa-host button, .sa-host input, .sa-host select, .sa-host textarea { font:inherit; }
.sa-host button { cursor:pointer; border:1px solid var(--sa-border); background:#fff; color:var(--sa-ink); border-radius:10px; min-height:40px; padding:8px 12px; line-height:1.2; transition:background .15s; }
.sa-host button:hover { background:#f0f5ff; }
.sa-host button:disabled { cursor:default; opacity:.42; }
.sa-host button[aria-pressed="true"] { background:#e9efff; border-color:#88a6ef; color:#1749bd; }
.sa-host :focus-visible { outline:3px solid #80a8ff; outline-offset:3px; }
.sa-host .sa-launch { position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(24px, env(safe-area-inset-bottom)); z-index:10000; background:#203c65; color:white; border:0; box-shadow:0 8px 30px #162b4b2e; border-radius:99px; padding:14px 20px; font-weight:700; }
.sa-host .sa-launch:hover { background:#2e5489; }
.sa-is-open .sa-launch { visibility:hidden; }
.sa-panel { position:fixed; z-index:10001; right:0; top:0; width:min(520px, 94vw); height:100vh; height:100dvh; display:flex; flex-direction:column; background:#fbfcff; box-shadow:-12px 0 60px #20344a26; border-left:1px solid #d5deea; padding-top:env(safe-area-inset-top); }
.sa-header { display:flex; flex-shrink:0; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 20px 10px; }
.sa-eyebrow { font-size:10px; letter-spacing:1.7px; font-weight:750; color:#627b99; }
.sa-host .sa-header h2 { font:700 19px/1.3 system-ui,sans-serif; margin:5px 0; color:#20354d; overflow-wrap:anywhere; }
.sa-host .sa-close { flex-shrink:0; border:0; background:transparent; padding:5px; min-height:32px; font-size:13px; }
.sa-status { font-size:12px; margin:0; padding:0 20px 14px; color:#4c6d5d; border-bottom:1px solid #e1e6ee; }
.sa-status.sa-error { color:#983b24; font-weight:650; }
.sa-body { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:20px; padding-bottom:calc(26px + env(safe-area-inset-bottom)); }
.sa-label { display:block; font-weight:700; margin-bottom:8px; }
.sa-host textarea { display:block; resize:vertical; width:100%; min-height:116px; background:white; border:1px solid #ced9e7; border-radius:12px; padding:12px; color:var(--sa-ink); line-height:1.6; }
.sa-highlights { margin:16px 0 24px; background:#fff; border:1px solid var(--sa-border); border-radius:12px; padding:12px; }
.sa-highlights summary { cursor:pointer; font-weight:650; }
.sa-highlights ul { padding:0; list-style:none; margin:8px 0 0; max-height:260px; overflow:auto; }
.sa-highlights li { position:relative; display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; border-top:1px solid #e7ebf2; padding:12px 0; }
.sa-highlights li span { display:block; flex:1; border-left:5px solid; padding-left:8px; overflow-wrap:anywhere; white-space:pre-wrap; max-height:125px; overflow:auto; }
.sa-highlights li button { min-height:30px; padding:5px 8px; font-size:12px; }
.sa-unmatched { width:100%; color:#a04829; }
.sa-section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sa-host .sa-section-title h3 { margin:0; font-size:16px; }
.sa-section-title span { color:var(--sa-muted); font-size:11px; }
.sa-modes { display:flex; background:#edf1f6; padding:4px; border-radius:12px; gap:4px; }
.sa-modes button { flex:1; border-color:transparent; }
.sa-check { display:flex; gap:8px; align-items:center; font-size:13px; margin:14px 0; cursor:pointer; }
.sa-check input { width:18px; height:18px; accent-color:var(--sa-blue); }
.sa-tools, .sa-actions { display:flex; gap:6px; flex-wrap:wrap; }
.sa-tools button { flex:1; }
.sa-colors { display:inline-flex; gap:8px; margin:14px 12px 12px 0; vertical-align:middle; }
.sa-host .sa-swatch { border:3px solid white; padding:0; min-height:30px; height:30px; width:30px; background:var(--sa-swatch); border-radius:50%; outline:1px solid #d8e0eb; }
.sa-host .sa-swatch:hover, .sa-host .sa-swatch[aria-pressed="true"] { background:var(--sa-swatch); border-color:white; }
.sa-host .sa-swatch[aria-pressed="true"] { outline:2px solid #254978; box-shadow:0 0 0 4px #e3ecfb; }
.sa-width { display:inline-flex; align-items:center; gap:5px; font-size:12px; }
.sa-host select { border:1px solid #cad6e6; background:white; color:var(--sa-ink); border-radius:8px; padding:6px; min-height:34px; }
.sa-actions { margin:0 0 12px; }
.sa-actions button { font-size:12px; min-height:34px; }
.sa-help { color:var(--sa-muted); font-size:12px; line-height:1.6; margin:9px 0; }
.sa-paper { background:#fff; border:1px solid #d0dae8; border-radius:12px; overflow:hidden; box-shadow:0 3px 9px #21364b08; background-image:radial-gradient(#b8c9df 1px, transparent 1px); background-size:20px 20px; }
.sa-ink { display:block; width:100%; height:auto; aspect-ratio:4 / 5; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:crosshair; }
.sa-ink.sa-scroll { touch-action:pan-y pinch-zoom; cursor:grab; }
.sa-ink path { pointer-events:none; }
.sa-ink-status { color:#607997; font-size:11px; min-height:18px; margin:8px 0 18px; }
.sa-footer { border-top:1px solid var(--sa-border); padding-top:16px; }
.sa-footer button { font-size:12px; margin:0 5px 5px 0; }
.sa-selection { position:fixed; display:flex; z-index:10005; left:50%; bottom:max(24px, env(safe-area-inset-bottom)); transform:translateX(-50%); align-items:center; gap:6px; padding:7px; background:#203c65; box-shadow:0 6px 30px #1d314a33; border-radius:13px; }
.sa-selection button { font-weight:700; }
@media (max-width:560px) { .sa-panel { width:100vw; } .sa-header { padding-top:16px; } .sa-body { padding:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); } .sa-host .sa-launch { right:14px; bottom:18px; } .sa-section-title span { font-size:10px; } }
@media print { .sa-host { display:none !important; } }
@media (prefers-reduced-motion:reduce) { .sa-host * { transition:none !important; } }
/* Optional source-page / frozen exercise-paper surface. */
.sa-page-host { display:block; margin:16px 0; min-width:0; width:100%; }
.sa-page-toolbar { position:sticky; top:var(--sa-page-toolbar-top, 8px); z-index:6; display:flex; flex-wrap:wrap; gap:5px; padding:8px; border:1px solid #ccd9e9; border-radius:12px; background:#f7fafff5; box-shadow:0 3px 12px #1c36521a; backdrop-filter:blur(8px); }
.sa-host .sa-page-toolbar button { min-height:34px; padding:7px 9px; font-size:12px; }
.sa-page-hint { font-size:11px; color:#637990; margin:7px 2px; }
.sa-page-frame { position:relative; width:100%; border:1px solid #ccd8e8; background:#fff; overflow:hidden; }
.sa-page-frame > img, .sa-fixed-paper { display:block; width:100%; height:100%; }
.sa-page-frame > .sa-ink { position:absolute; z-index:3; inset:0; display:block; width:100%; height:100%; aspect-ratio:auto; background:transparent; }
.sa-page-frame > .sa-ink.sa-scroll { pointer-events:none; }
.sa-page-frame.sa-page-writing { user-select:none; -webkit-user-select:none; }
.sa-page-frame .sa-fixed-paper { user-select:text; }
@media print { .sa-page-host { display:block !important; } .sa-page-toolbar, .sa-page-hint { display:none !important; } }
.sa-page-toolrow, .sa-page-options { display:flex; flex-wrap:wrap; align-items:center; gap:5px; width:100%; }
.sa-page-options { padding-top:5px; border-top:1px solid #e0e7f1; }
.sa-host .sa-page-options select { min-height:32px; padding:5px 7px; font-size:12px; }
.sa-page-saved { color:#416c58; font-size:11px; margin:8px 2px 0; }
.sa-page-saved.sa-error { color:#9f3d25; font-weight:650; }
.sa-page-saved + .sa-page-hint { margin-top:2px; }
/* v3: compact original icon palette, shared across the active lesson/source target. */
.sa-palette { position:relative; min-width:0; width:100%; max-width:100%; padding:6px 8px; border:1px solid #d7dfeb; border-radius:14px; background:#fffefa; box-shadow:0 4px 14px #25394f0b; }
.sa-palette-row { display:flex; flex-wrap:wrap; align-items:center; gap:3px; min-width:0; }
.sa-host .sa-icon-tool { flex:0 0 38px; width:38px; height:40px; min-height:40px; border:0; padding:8px; border-radius:9px; background:transparent; color:#42566b; display:inline-flex; align-items:center; justify-content:center; }
.sa-host .sa-icon-tool svg { width:23px; height:23px; display:block; pointer-events:none; }
.sa-host .sa-icon-tool[aria-pressed="true"] { background:#e6edfd; color:#2858c8; box-shadow:inset 0 -2px #3b66c9; }
.sa-host .sa-icon-tool:hover { background:#eef2f7; }
.sa-host .sa-icon-tool[aria-pressed="true"]:hover { background:#e6edfd; }
.sa-host .sa-color-tool::before { content:''; display:block; width:22px; height:22px; background:var(--sa-tool-color,#24364b); border-radius:50%; box-shadow:0 0 0 3px white,0 0 0 4px #d8e0ec; }
.sa-host .sa-width-tool { font-size:10px; font-weight:750; white-space:nowrap; }
.sa-palette-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:3px; min-height:13px; }
.sa-palette-meta .sa-page-saved,.sa-palette-meta .sa-page-hint { font-size:10px; line-height:1.35; margin:0; }
.sa-palette-meta .sa-page-saved { color:#53775d; }
.sa-palette-meta .sa-error { color:#a03c2c; }
.sa-palette-trays { position:relative; }
.sa-tool-tray { position:absolute; left:0; top:7px; z-index:100; display:flex; flex-wrap:wrap; gap:8px; max-width:min(360px,85vw); min-width:170px; padding:12px; border-radius:14px; border:1px solid #d5dfeb; background:#fffefa; box-shadow:0 12px 35px #25384e29; }
.sa-host .sa-tool-tray button { font-size:12px; }
.sa-more-tray { min-width:240px; }
.sa-palette .sa-swatch { flex:0 0 30px; }
.sa-page-host > .sa-palette { position:sticky; top:var(--sa-page-toolbar-top,8px); z-index:7; margin-bottom:10px; }
/* The real authored DOM stays in place inside each local frame. */
.sa-lesson-block { position:relative; width:100%; max-width:100%; min-width:0; clear:both; }
.sa-block-inner { position:relative; width:100%; transform-origin:top left; }
.sa-block-ink { position:absolute; z-index:4; left:0; top:0; display:block; aspect-ratio:auto; }
.sa-block-ink.sa-scroll { pointer-events:none; }
.sa-block-writing { outline:1px dashed #a9bcd333; outline-offset:3px; }
.sa-block-writing > .sa-block-inner { user-select:none; -webkit-user-select:none; }
.sa-block-warning { outline:1px dashed #c78248; }
.sa-block-warning::after { content:'Çizim korunuyor · düzen değişti'; position:absolute; right:0; top:0; font:10px/1.4 system-ui; color:#8f4c25; background:#fff2dc; padding:2px 5px; pointer-events:none; z-index:5; }
@media(max-width:480px){ .sa-palette{padding:5px 6px}.sa-host .sa-icon-tool{flex-basis:34px;width:34px;height:40px;padding:6px}.sa-palette-row{gap:2px}.sa-palette-meta .sa-page-hint{display:none} }
@media print { .sa-palette {display:none!important}.sa-lesson-block{break-inside:avoid} }
.sa-block-pan { overscroll-behavior-x:contain; scrollbar-width:thin; }
.sa-block-pan-label { position:absolute; left:3px; font:10px/1.4 system-ui,sans-serif; color:#72849a; white-space:nowrap; pointer-events:none; }
.sa-lesson-block [hidden] { display:none!important; }
.sa-legacy-notebook { margin:16px 0; padding:12px; background:#fff; border:1px solid #d7e0ec; border-radius:12px; }
.sa-legacy-notebook summary { cursor:pointer; font-weight:650; }
.sa-legacy-ink { display:block; width:100%; height:auto; border:1px solid #e0e6ef; background:radial-gradient(#c4d2e2 1px,transparent 1px) 0 0/20px 20px; }

/* Set before contact on HTML surfaces as well as SVG; touch handlers never draw. */
.sa-paper.sa-paper-writing,.sa-page-frame.sa-page-writing,.sa-lesson-block.sa-block-writing,.sa-block-writing>.sa-block-inner { touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.sa-block-pan { overflow-y:hidden; }