/* Playivo "Canlı Defter": kağıt zemin, çıkartmalar, washi bant, fosforlu kalem, damga. (src/theme.ts) */

@font-face { font-family: 'Nunito'; font-weight: 700; src: url(../fonts/nunito-bold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 800; src: url(../fonts/nunito-extra.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 900; src: url(../fonts/nunito-black.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'Patrick Hand'; src: url(../fonts/patrick-hand.ttf) format('truetype'); font-display: swap; }

:root {
  --ink: #23304F;
  --ink-soft: #5A6680;
  --paper: #FFFDF7;
  --grid: #E9EEF7;
  --margin: #FFB3C7;
  --marker: #FFE45C;
  --stamp: #FF6B35;
  --stamp-red: #E5484D;
  --yellow: #FFC83D;
  --yellow-shadow: #D99A12;
  --green: #3DBE5A;
  --blue: #3D7BFF;
  --purple: #8E5CFF;
  --line: #D5DCEA;
  --locked: #8592A8;
  --card: #FFFFFF;
  --shadow: 0 5px 12px rgba(35, 48, 79, 0.16);
  --tape-pink: rgba(255, 143, 184, 0.6);
  --tape-blue: rgba(142, 197, 255, 0.65);
  --tape-mint: rgba(127, 224, 194, 0.6);
  --tape-yellow: rgba(255, 228, 92, 0.75);
  --hand: 'Patrick Hand', 'Comic Sans MS', cursive;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); }
body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}
input, textarea { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
img { display: block; }
.hand { font-family: var(--hand); font-weight: 400; }
[hidden] { display: none !important; }

#app { height: 100%; }
.screen { position: relative; min-height: 100%; max-width: 520px; margin: 0 auto; }
.paper-grid {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
}
.paper-grid.margin::before { content: ''; position: absolute; left: 38px; top: 0; bottom: 0; width: 2px; background: var(--margin); pointer-events: none; z-index: 0; }
@media (min-width: 521px) { body { background: #EEF1F6; } .screen { box-shadow: 0 0 0 1px var(--line); } }

/* ---- yapı taşları ---- */
.sticker {
  background: var(--card);
  border: 6px solid #fff;
  border-radius: 24px;
  box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .12s ease, opacity .2s;
}
.sticker:active:not(:disabled) { transform: rotate(0) scale(.95); }
.sticker.round { border-radius: 50%; width: 58px; height: 58px; border-width: 5px; }
.sticker.round.sm { width: 52px; height: 52px; }
.tilt-l { --tilt: -5deg; } .tilt-r { --tilt: 5deg; }

.stamp {
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--stamp);
  border: 6px solid #fff;
  box-shadow: 0 6px 0 #C94E22, var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(-4deg);
  transition: transform .1s, box-shadow .1s;
}
.stamp:active:not(:disabled) { transform: rotate(0) translateY(4px); box-shadow: 0 2px 0 #C94E22, var(--shadow); }
.stamp.big { width: 112px; height: 112px; }
.stamp.sm { width: 64px; height: 64px; border-width: 4px; box-shadow: 0 4px 0 #C94E22, var(--shadow); }
.stamp.green { background: var(--green); box-shadow: 0 6px 0 #278A3E, var(--shadow); }
.stamp:disabled { opacity: .35; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: rotate(-6deg) scale(1.07); } }

.tape {
  position: absolute; height: 24px; display: block; z-index: 2; pointer-events: none;
  transform: rotate(var(--a, 3deg));
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0);
  mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0);
}
.tape-pink { background: var(--tape-pink); } .tape-blue { background: var(--tape-blue); }
.tape-mint { background: var(--tape-mint); } .tape-yellow { background: var(--tape-yellow); }

.note {
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 6px 14px rgba(35, 48, 79, .12);
  padding: 18px 16px 14px;
}
.tilt-note { transform: rotate(-1deg); }
.marker { position: relative; display: inline-block; padding: 0 8px; }
.marker::before { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 46%; background: var(--marker); border-radius: 6px; transform: rotate(-1.5deg); z-index: 0; }
.marker > * { position: relative; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 12px 18px;
  border-radius: 16px; background: #fff; border: 2px solid var(--line);
  font-weight: 800; font-size: 17px;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 4px 0 #2A55C2; }
.btn.danger { background: var(--stamp-red); border-color: var(--stamp-red); color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger.ghost { color: var(--stamp-red); border-color: #F5C2C4; }
.btn:disabled { opacity: .4; }
.link { color: var(--blue); font-weight: 800; font-size: 15px; padding: 10px 0 2px; text-decoration: underline; text-underline-offset: 3px; }
.muted { color: var(--ink-soft); font-weight: 700; }
.small { font-size: 13px; line-height: 1.4; }

.mini-lock { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.badge { position: absolute; top: -10px; right: -10px; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px; background: var(--stamp-red); border: 3px solid #fff; color: #fff; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; }

/* ---- Pivo hareketleri (Pivo.tsx useMotion) ---- */
.pivo { display: inline-block; flex: none; }
.pivo svg { display: block; overflow: visible; }
.pivo-hello svg { animation: rock 0.9s ease-in-out infinite alternate; transform-origin: 50% 70%; }
.pivo-listen svg { animation: rock4 1.4s ease-in-out infinite alternate; transform-origin: 50% 70%; }
.pivo-think svg { animation: float 1.1s ease-in-out infinite alternate; }
.pivo-correct svg { animation: jump .52s ease-in-out infinite; }
.pivo-streak svg { animation: jump .48s ease-in-out infinite, grow .48s ease-in-out infinite alternate; }
.pivo-done svg { animation: hop .76s ease-in-out infinite; }
.pivo-oops svg { animation: shake .3s ease-in-out 1; }
.pivo-miss svg { animation: breathe 1.6s ease-in-out infinite alternate; }
@keyframes rock { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes rock4 { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes float { to { transform: translateY(-3%); } }
@keyframes jump { 50% { transform: translateY(-20%); } }
@keyframes hop { 50% { transform: translateY(-10%); } }
@keyframes grow { to { scale: 1.06; } }
@keyframes breathe { to { transform: scale(1.04); } }
@keyframes shake { 25% { transform: translateX(-5%); } 50% { transform: translateX(5%); } 75% { transform: translateX(-3%); } }
@media (prefers-reduced-motion: reduce) { .pivo svg, .pulse { animation: none !important; } }

/* ---- harita ---- */
.map-screen { height: 100dvh; min-height: 0; overflow: hidden; }
.map-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-top: calc(var(--safe-t) + 150px); padding-bottom: calc(var(--safe-b) + 140px); }
.map-scroll::-webkit-scrollbar { display: none; }
.map-canvas { position: relative; }
.map-path { position: absolute; inset: 0; }
.node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.node .level { width: 68px; height: 68px; border-radius: 50%; background: var(--yellow); font-weight: 900; font-size: 28px; }
.node-stars { display: flex; margin-top: 4px; }
.node-title { font-size: 20px; margin-top: 6px; background: rgba(255, 253, 247, .9); padding: 0 8px; border-radius: 8px; white-space: nowrap; }
.node.current { transform: translate(-50%, -78%); }
.current-pivo { margin-bottom: 4px; }
.node .stamp { width: 88px; height: 88px; }
.locked { width: 64px; height: 64px; border-radius: 50%; border: 2.5px dashed var(--locked); background: var(--paper); display: flex; align-items: center; justify-content: center; }
.chest { position: relative; width: 88px; height: 88px; border-radius: 22px; }

.map-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--safe-t) + 8px) 16px 8px; background: linear-gradient(var(--paper) 70%, rgba(255, 253, 247, 0)); z-index: 5; }
.top-row { display: flex; align-items: center; gap: 10px; }
.pill { height: 54px; padding: 0 14px; border-radius: 27px; border-width: 5px; gap: 6px; font-weight: 900; font-size: 24px; }
.map-name { flex: 1; text-align: center; font-size: 26px; line-height: 1; }
.map-name small { font-size: 16px; color: var(--ink-soft); }
.map-chips { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
.chip { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; }
.chip.on { width: 58px; height: 58px; border: 4px solid var(--ink); }
.chip:disabled { opacity: .45; }
.chip-art { width: 30px; height: 30px; }
.chip.on .chip-art { width: 36px; height: 36px; }
.chip .mini-lock { width: 22px; height: 22px; right: -4px; bottom: -4px; }
.install { display: block; margin: 10px auto 0; padding: 8px 14px; border-radius: 14px; background: var(--blue); color: #fff; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); }

.map-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: space-around; padding: 30px 12px calc(var(--safe-b) + 16px); background: linear-gradient(rgba(255, 253, 247, 0), var(--paper) 45%); pointer-events: none; }
.map-bottom > * { pointer-events: auto; }
.hw-btn-wrap { position: relative; }
.hw-btn { width: 82px; height: 82px; border-radius: 20px; flex-direction: column; gap: 0; }
.hw-btn .hand { font-size: 16px; line-height: 1; color: var(--blue); }

/* ---- oyun ---- */
.play { min-height: 100dvh; padding: calc(var(--safe-t) + 10px) 18px calc(var(--safe-b) + 18px); display: flex; flex-direction: column; }
.play-top { display: flex; align-items: center; gap: 12px; }
.tapebar { flex: 1; height: 24px; background: rgba(35, 48, 79, .07); border-radius: 3px; overflow: hidden; }
.tapebar-fill { height: 100%; background: var(--tape-mint); transition: width .4s ease; }
.score { display: flex; align-items: center; gap: 2px; font-family: var(--hand); font-size: 26px; }

.play > .note { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.note-pivo { position: absolute; left: -6px; top: -14px; }
.hero-row { display: flex; align-items: center; gap: 16px; }
.ink-btn { width: 52px !important; height: 52px !important; border: 2px solid var(--ink) !important; box-shadow: none; }
.ink-btn.on { border-color: var(--purple) !important; box-shadow: 0 0 0 3px var(--purple); }
.abc { font-family: var(--hand); font-size: 20px; }
.word { font-weight: 900; font-size: clamp(30px, 10vw, 44px); line-height: 1.15; word-break: break-word; text-align: center; }
.play .marker { margin-top: 4px; text-align: center; }
.pron { font-weight: 800; font-size: clamp(22px, 6.4vw, 28px); color: var(--ink-soft); letter-spacing: .5px; text-align: center; line-height: 1.2; }
.syl { font-family: var(--hand); font-size: 22px; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; }
.syl small { font-family: system-ui, sans-serif; font-size: 16px; }

.options { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; padding: 18px 4px 6px; }
.option { position: relative; flex-direction: column; gap: 6px; padding: 10px 6px 8px; min-height: 148px; border-radius: 26px; border-width: 7px; }
.option-art { width: 62%; max-width: 92px; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.option-tr { font-weight: 900; font-size: 17px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.option-tr.big { font-size: 22px; }
.option.right { border-color: var(--green); --tilt: 0deg; animation: pop .35s ease; }
.option.wrong { opacity: .35; animation: shakeX .26s ease; }
.option.dim { opacity: .35; }
.check { position: absolute; top: -12px; right: -12px; width: 46px; height: 46px; border-radius: 50%; background: var(--green); border: 4px solid #fff; display: flex; align-items: center; justify-content: center; animation: pop .3s ease; }
@keyframes pop { 0% { scale: .7; } 60% { scale: 1.1; } 100% { scale: 1; } }
@keyframes shakeX { 25% { translate: -10px; } 50% { translate: 10px; } 75% { translate: -8px; } }

.intro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.intro h2 { font-size: 34px; margin: 0; }
.intro p { margin: 0 20px 16px; color: var(--ink-soft); font-size: 17px; }

.spell { flex-direction: column; }
.spell-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.spell-art { width: 110px; height: 110px; }
.spell-tr { font-size: 30px; line-height: 1.1; text-align: center; }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 26px 0 8px; }
.slot { width: 34px; height: 46px; border-bottom: 4px solid var(--ink); display: flex; align-items: flex-end; justify-content: center; font-weight: 900; font-size: 30px; line-height: 1; padding-bottom: 2px; }
.slot.next { border-color: var(--stamp); }
.slot.filled { animation: pop .25s ease; }
.slot.fixed { border-color: transparent; }
.gap { width: 16px; }
.slots.solved .slot { color: var(--green); border-color: var(--green); }
.tiles { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; padding: 8px 0; }
.tile { width: 56px; height: 60px; border-radius: 16px; background: #fff; border: 4px solid #fff; box-shadow: 0 4px 0 #C9D2E3, var(--shadow); font-weight: 900; font-size: 30px; transform: rotate(var(--tilt)); }
.tile:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #C9D2E3; }
.tile.used { visibility: hidden; }
.tile.shake { animation: shakeX .26s ease; background: #FFE3DE; }
.tile.hint { border-color: var(--marker); background: #FFF8CC; animation: pulse 1s ease-in-out infinite; }

/* ---- mola / diyalog ---- */
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(35, 48, 79, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease; }
.sheet { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; background: var(--paper); border-radius: 26px 26px 0 0; padding: 22px 18px calc(var(--safe-b) + 18px); display: flex; flex-direction: column; align-items: center; gap: 12px; animation: up .2s ease; }
.sheet h2 { margin: 0; font-size: 24px; font-weight: 900; }
.sheet .confirm { font-size: 18px; text-align: center; margin: 6px 0; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); } }
.steps { align-self: stretch; margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.6; }
.share-ico { display: inline-flex; vertical-align: middle; }

.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 24px); transform: translateX(-50%); z-index: 60; max-width: 90vw; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 15px; text-align: center; transition: opacity .3s; }
.toast.out { opacity: 0; }

/* ---- sonuç ---- */
.result { min-height: 100dvh; padding: calc(var(--safe-t) + 26px) 20px calc(var(--safe-b) + 20px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.result-stars { display: flex; align-items: flex-end; gap: 10px; }
.rstar { background: #fff; border-radius: 50%; padding: 8px; box-shadow: var(--shadow); display: flex; animation: pop .5s ease both; }
.rstar.s1 { rotate: -8deg; animation-delay: .4s; } .rstar.s2 { animation-delay: .65s; } .rstar.s3 { rotate: 8deg; animation-delay: .9s; }
.result-note { align-self: stretch; }
.result-line { font-size: 24px; text-align: center; margin: 0 0 10px; }
.result-words { display: flex; flex-direction: column; gap: 6px; }
.rw { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 4px 6px; border-radius: 12px; }
.rw:active { background: #F2F5FA; }
.rw b { font-weight: 900; font-size: 18px; }
.rw-en { display: flex; flex-direction: column; }
.rw-en small, .row-text small { color: var(--ink-soft); font-weight: 700; font-size: 14px; }
.rw span { color: var(--ink-soft); }
.rw.again { opacity: .5; }
.rw-art { width: 40px; height: 40px; }
.done-stamp { position: absolute; right: 10px; top: -20px; width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--stamp-red); color: var(--stamp-red); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 26px; line-height: 1; transform: rotate(14deg); background: rgba(255, 255, 255, .85); }
.done-stamp small { font-size: 9px; letter-spacing: 1px; }
.result-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-around; align-self: stretch; padding-top: 10px; }
.sticker.sq { width: 78px; height: 78px; border-radius: 22px; }

/* ---- sayfalar (ödev, ayarlar) ---- */
.page { min-height: 100dvh; padding: calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 24px); display: flex; flex-direction: column; gap: 14px; }
.bar { display: flex; align-items: center; gap: 12px; }
.bar h1 { margin: 0; font-size: 30px; flex: 1; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 20px; color: var(--ink-soft); font-size: 17px; }
.add-list { margin-top: 4px; }
.hw-list { display: flex; flex-direction: column; gap: 12px; }
.hw-card { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 12px; box-shadow: var(--shadow); }
.hw-main { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.hw-thumbs { display: grid; grid-template-columns: 28px 28px; gap: 3px; flex: none; }
.hw-thumb { width: 28px; height: 28px; }
.hw-thumb.txt { display: flex; align-items: center; justify-content: center; background: #F2F5FA; border-radius: 8px; font-weight: 900; }
.hw-info { display: flex; flex-direction: column; min-width: 0; }
.hw-info b { font-weight: 900; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-info span { color: var(--ink-soft); font-size: 14px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field span { font-size: 14px; color: var(--ink-soft); }
input:not([type]), input[type=text], textarea, .search {
  width: 100%; font: inherit; font-size: 17px; font-weight: 800; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; outline: none;
}
input:focus, textarea:focus { border-color: var(--blue); }
textarea { resize: vertical; font-weight: 700; }
.add-box { display: flex; flex-direction: column; gap: 10px; }
.add-row { display: flex; gap: 10px; }
.pick-img { flex: none; width: 104px; height: 104px; border-radius: 18px; border: 2px dashed var(--locked); display: flex; align-items: center; justify-content: center; background: #F7F9FC; }
.pick-img.has { border: 2px solid var(--line); background: #fff; }
.pick-art { width: 78px; height: 78px; }
.add-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.add-actions { display: flex; gap: 10px; }
.add-actions .btn { min-height: 48px; }
.ac-wrap { position: relative; }
.ac { position: absolute; left: 0; right: -114px; top: calc(100% + 4px); z-index: 10; background: #fff; border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.ac button { display: grid; grid-template-columns: 32px auto 1fr; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left; border-bottom: 1px solid #EEF1F6; }
.ac button:last-child { border-bottom: 0; }
.ac b { font-weight: 900; }
.ac span { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-art { width: 32px; height: 32px; }
.words { display: flex; flex-direction: column; gap: 8px; }
.word-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 8px 8px 8px 10px; box-shadow: 0 2px 6px rgba(35, 48, 79, .08); }
.row-art { width: 44px; height: 44px; flex: none; }
.row-art.none { border-radius: 10px; background: #F2F5FA; display: flex; align-items: center; justify-content: center; }
.row-img { flex: none; }
.row-text { flex: 1; display: flex; flex-direction: column; text-align: left; min-width: 0; }
.row-text b { font-weight: 900; font-size: 18px; }
.row-text span { color: var(--ink-soft); }
.icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.icon-btn:active { background: #F2F5FA; }
.edit-foot { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.art-grid { align-self: stretch; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; min-height: 120px; }
.art-grid button { aspect-ratio: 1; background: #fff; border-radius: 14px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; }
.art-grid button:active { border-color: var(--blue); }
.grid-art { width: 70%; height: 70%; }
.sheet textarea { align-self: stretch; }
.sheet .search { align-self: stretch; }

.set-box { display: flex; flex-direction: column; gap: 10px; }
.set-box h3 { margin: 0; font-size: 18px; font-weight: 900; }
.set-box p { margin: 0; }
.seg { display: flex; background: #F2F5FA; border-radius: 14px; padding: 4px; }
.seg button { flex: 1; padding: 10px; border-radius: 10px; font-weight: 800; }
.seg button.on { background: #fff; box-shadow: var(--shadow); }
.toggle { display: flex; align-items: center; gap: 12px; font-size: 16px; padding: 4px 0; }
.toggle input { width: 24px; height: 24px; accent-color: var(--blue); }
.file-btn { cursor: pointer; }