/* ============================================================
 * SwapVerbs — Floating Workspace
 * Adaptado do FlipVerbs CSS — paleta sepia/âmbar, 4 registros
 * ============================================================ */

.sv-page * { box-sizing: border-box; }

.sv-page {
	position: relative;
	--sv-amber:       #D4861A;
	--sv-amber-light: #F0A832;
	--sv-dark:        #0a0806;
	--sv-surface:     #110e09;
	--sv-surface2:    #1a1510;
	--sv-surface3:    #221c14;
	--sv-border:      #2e2618;
	--sv-border2:     #3a2e1e;
	--sv-text:        #e8e0d0;
	--sv-text-dim:    #9a8e7e;
	--sv-text-muted:  #5a5040;
	--sv-pv-color:    #D4861A;  /* dinâmica — muda por JS ao trocar registro */
	font-family: 'DM Sans', sans-serif;
	background: var(--sv-surface);
	color: var(--sv-text);
}

/* ── HERO ── */
.sv-hero {
	background: var(--sv-dark);
	background-image:
		radial-gradient(ellipse at 30% 60%, rgba(212,134,26,.15) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 20%, rgba(160,100,10,.10) 0%, transparent 50%);
	padding: 24px 28px 0;
	position: relative;
	overflow: hidden;
	z-index: 1;
	display: flex;
	gap: 0;
}
.sv-hero-content { flex: 1; }

.sv-hero-cluster {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
	border-radius: 20px; padding: 4px 12px; font-size: 11px; margin-bottom: 14px;
}
.sv-cluster-link {
	color: var(--sv-cluster-color, #D4861A);
	text-decoration: none; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
	transition: opacity .15s;
}
.sv-cluster-link:hover { opacity: .75; }

.sv-hero-pv-name {
	font-family: 'Playfair Display', serif;
	font-size: clamp(44px, 7vw, 76px); font-weight: 900;
	color: var(--sv-amber); letter-spacing: -1px; line-height: 1;
}
.sv-hero-phonetics { font-size: 14px; color: var(--sv-text-dim); margin-top: 6px; letter-spacing: .04em; }
.sv-hero-meaning { font-size: 16px; color: #c8bfb0; line-height: 1.5; margin-top: 10px; font-style: italic; }

/* Sentidos numerados */
.sv-hero-meanings {
	margin-top: 12px; padding: 12px 16px;
	background: rgba(212,134,26,.06);
	border: 1px solid rgba(212,134,26,.15);
	border-radius: 10px; display: flex; flex-direction: column; gap: 6px;
}
.sv-meaning-line { font-size: 13.5px; color: var(--sv-text-dim); line-height: 1.5; }
.sv-meaning-num { color: var(--sv-amber); font-weight: 700; margin-right: 4px; }

/* Subtítulo IELTS/TOEFL */
.sv-hero-proficiency {
	margin-top: 14px; font-size: 11px; color: var(--sv-text-muted);
	letter-spacing: .06em; text-transform: uppercase;
}
.sv-hero-proficiency span { color: var(--sv-amber-light); font-weight: 600; }

/* ── 4 REGISTER CARDS ── */
.sv-register-cards {
	display: flex; gap: 10px; margin-top: 20px;
	overflow-x: auto; scrollbar-width: none; padding-bottom: 0;
}
.sv-register-cards::-webkit-scrollbar { display: none; }

.sv-register-card {
	flex: 1; min-width: 130px; padding: 16px 14px 14px;
	border-radius: 12px 12px 0 0; cursor: pointer;
	border: 1.5px solid rgba(var(--sv-reg-color), .4);
	border-bottom: none;
	background: var(--sv-reg-bg);
	border-color: color-mix(in srgb, var(--sv-reg-color) 40%, transparent);
	transition: all .2s; position: relative; bottom: -1px;
}
.sv-register-card:hover { transform: translateY(-3px); }
.sv-register-card.active {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--sv-reg-color) 70%, transparent);
	box-shadow: 0 -4px 16px color-mix(in srgb, var(--sv-reg-color) 20%, transparent);
}
.sv-reg-card-label {
	font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
	font-weight: 700; color: var(--sv-reg-color); margin-bottom: 6px;
}
.sv-reg-card-word {
	font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700;
	color: var(--sv-reg-color-light); line-height: 1.1; margin-bottom: 4px;
}
.sv-reg-card-tag { font-size: 10px; color: var(--sv-text-muted); }

/* ── FORMALITY SCALE ── */
.sv-formality-scale {
	display: flex; align-items: center; margin-top: 14px; margin-bottom: 20px;
	padding: 0 4px;
}
.sv-scale-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.sv-scale-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sv-scale-label { font-size: 9px; color: var(--sv-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.sv-scale-line { flex: 1; height: 1px; background: var(--sv-border); }

/* ── ECOSYSTEM SIDEBAR ── */
.sv-eco-sidebar {
	display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px 12px;
	border-left: 1px solid var(--sv-border); margin-left: 12px; width: 88px;
	flex-shrink: 0; justify-content: center; align-items: center;
}
.sv-eco-label { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sv-text-muted); margin-bottom: 2px; }
.sv-eco-btn {
	display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; width: 72px;
	border-radius: 10px; border: 1px solid var(--sv-border); background: rgba(255,255,255,.03);
	color: var(--sv-text-dim); font-size: 10px; font-weight: 600; letter-spacing: .5px;
	text-decoration: none; cursor: pointer; transition: all .18s; text-align: center; text-transform: uppercase;
}
.sv-eco-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: var(--sv-text); transform: translateY(-1px); }
.sv-eco-icon { font-size: 18px; line-height: 1; }
.sv-eco-btn.sv-eco-flow    { border-color: rgba(74,222,128,.2);   color: #86efac; }
.sv-eco-btn.sv-eco-flow:hover    { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.4); }
.sv-eco-btn.sv-eco-flip    { border-color: rgba(232,100,42,.2);   color: #FFB38A; }
.sv-eco-btn.sv-eco-flip:hover    { background: rgba(232,100,42,.08); border-color: rgba(232,100,42,.4); }
.sv-eco-btn.sv-eco-weekly  { border-color: rgba(245,158,11,.2);   color: #fcd34d; }
.sv-eco-btn.sv-eco-weekly:hover  { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.4); }
.sv-eco-btn.sv-eco-phrason { border-color: rgba(99,102,241,.2);   color: #a5b4fc; }
.sv-eco-btn.sv-eco-phrason:hover { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.4); }
.sv-eco-btn.sv-eco-phrasaly{ border-color: rgba(168,85,247,.2);   color: #d8b4fe; }
.sv-eco-btn.sv-eco-phrasaly:hover{ background: rgba(168,85,247,.08); border-color: rgba(168,85,247,.4); }
.sv-eco-divider { width: 40px; height: 1px; background: var(--sv-border); margin: 2px 0; }

@media (max-width: 900px) {
	.sv-hero { flex-direction: column; }
	.sv-eco-sidebar { flex-direction: row; width: 100%; border-left: none; border-top: 1px solid var(--sv-border); margin: 16px 0 0; padding: 16px 0 0; flex-wrap: wrap; justify-content: center; }
	.sv-eco-divider { display: none; }
}

/* ── FIXED TOOLBAR ── */
.sv-fixed-toolbar {
	position: sticky; top: 0; z-index: 300;
	background: var(--sv-dark);
	border-top: 3px solid var(--sv-pv-color);
	border-bottom: 1px solid var(--sv-border);
	display: flex; align-items: center; padding: 0 20px; gap: 2px;
	transition: border-color .3s; box-shadow: 0 4px 20px rgba(0,0,0,.5); flex-wrap: wrap;
}
.sv-tb-pv-label {
	font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700;
	margin-right: 10px; white-space: nowrap; padding: 10px 0; letter-spacing: -.3px;
}
.sv-tb-sep { width: 1px; height: 28px; background: var(--sv-border); margin: 0 6px; }
.sv-tb-btn {
	display: flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: 7px;
	border: 1px solid transparent; background: transparent; color: rgba(232,224,208,.5);
	font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
	cursor: pointer; transition: all .15s; white-space: nowrap;
}
.sv-tb-btn:hover { background: rgba(255,255,255,.07); color: var(--sv-text); border-color: var(--sv-border); }
.sv-tb-btn.active { background: rgba(255,255,255,.09); color: var(--sv-text); border-color: var(--sv-border2); }
.sv-tb-immerse { color: rgba(212,134,26,.8) !important; }
.sv-tb-immerse:hover { color: var(--sv-amber) !important; background: rgba(212,134,26,.08) !important; }
.sv-tb-quiz   { color: rgba(103,232,249,.7) !important; }
.sv-tb-quiz:hover   { color: #67e8f9 !important; background: rgba(103,232,249,.08) !important; }
.sv-tb-fill   { color: rgba(190,242,100,.7) !important; }
.sv-tb-fill:hover   { color: #bef264 !important; background: rgba(190,242,100,.08) !important; }
.sv-tb-notes  { color: rgba(212,134,26,.75) !important; }
.sv-tb-notes:hover  { color: var(--sv-amber) !important; background: rgba(212,134,26,.08) !important; }
.sv-tb-sweep  { color: rgba(255,110,110,.7) !important; }
.sv-tb-sweep:hover  { color: #ff8080 !important; background: rgba(255,80,80,.08) !important; }
.sv-tb-magnet.on { color: var(--sv-text) !important; background: rgba(255,255,255,.1) !important; border-color: var(--sv-border2) !important; }
.sv-tb-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* ── WORKSPACE ── */
.sv-workspace {
	position: relative; min-height: 50vh; padding-bottom: 60px;
	background:#352e27;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
	overflow: visible;
}
.sv-ws-instructions {
	position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
	pointer-events: none; display: flex; flex-direction: column;
	align-items: center; gap: 20px; width: min(860px, 92%);
}
.sv-ws-instr-title {
	font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700;
	color: rgba(232,224,208,.14); text-align: center; letter-spacing: -.3px;
}
.sv-ws-instr-steps { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.sv-ws-instr-step {
	display: flex; flex-direction: column; align-items: center; gap: 10px; width: 190px;
	background: rgba(255,255,255,.03); border: 1px solid var(--sv-border);
	border-radius: 14px; padding: 22px 18px;
}
.sv-ws-instr-icon { font-size: 32px; line-height: 1; }
.sv-ws-instr-head { font-size: 13px; font-weight: 700; color: rgba(232,224,208,.7); letter-spacing: .5px; text-align: center; text-transform: uppercase; }
.sv-ws-instr-body { font-size: 12.5px; color: var(--sv-text-dim); line-height: 1.6; text-align: center; }

/* ── FLOATING WINDOWS ── */
.sv-win {
	display: none; position: absolute;
	width: 380px; height: 340px; min-width: 260px; min-height: 200px;
	background: #f7f3ec;  /* cream/paper — claro para leitura */
	border-radius: 12px; border: 1px solid rgba(0,0,0,.12);
	box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35);
	flex-direction: column; overflow: hidden; z-index: 9000; color: #1a1208;
}
.sv-win.open { display: flex; }

.sv-win-bar {
	display: flex; align-items: center; gap: 7px; padding: 9px 12px;
	border-bottom: 1px solid rgba(0,0,0,.1); cursor: grab; user-select: none;
	flex-shrink: 0; background: #ede9e0;
}
.sv-win-bar:active { cursor: grabbing; }
.sv-win-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--sv-win-color, #D4861A); }
.sv-win-pv { font-family: 'Playfair Display', serif; font-size: 12px; font-weight: 700; color: var(--sv-win-color, #D4861A); }
.sv-win-type { font-size: 10px; color: rgba(0,0,0,.4); margin-left: 2px; }
.sv-win-ctrls { margin-left: auto; display: flex; gap: 3px; }
.sv-win-btn { background: rgba(0,0,0,.07); border: none; color: rgba(0,0,0,.4); font-size: 12px; width: 20px; height: 20px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.sv-win-btn:hover { background: rgba(0,0,0,.14); color: #1a1208; }
.sv-win-x:hover { background: rgba(220,50,50,.2); color: #cc2222; }

.sv-win-body { padding: 14px 16px 16px; overflow-y: auto; flex: 1; font-size: 14.5px; transition: font-size .15s; }
.sv-win-resize { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: se-resize; background: linear-gradient(135deg,transparent 50%,rgba(0,0,0,.12) 50%); border-radius: 0 0 12px 0; }

.sv-win-pvname {
	font-family: 'Playfair Display', serif; font-size: 1.3em; font-weight: 900;
	margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,.1);
	color: var(--sv-win-color, #D4861A);
}

/* Badge de sentido usado */
.sv-win-meaning-badge {
	display: inline-block; font-size: .72em; font-weight: 700;
	background: color-mix(in srgb, var(--sv-win-color, #D4861A) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--sv-win-color, #D4861A) 30%, transparent);
	color: var(--sv-win-color, #D4861A);
	padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
	letter-spacing: .04em;
}

.sv-win-def { font-size: 1em; color: #2a1a08; line-height: 1.75; margin-bottom: 12px; }
.sv-win-ex {
	background: rgba(0,0,0,.05); border-radius: 7px; padding: 8px 12px;
	font-size: .92em; font-style: italic; color: #3a2a10; margin-bottom: 7px;
	position: relative; padding-right: 36px;
}

/* Register note */
.sv-win-reg-note {
	margin-top: 12px; padding: 10px 13px;
	background: rgba(212,134,26,.08); border: 1px solid rgba(212,134,26,.2);
	border-radius: 8px; font-size: .82em; color: #6a4010; line-height: 1.6;
}
.sv-win-reg-note-label {
	display: block; font-size: .72em; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: #a06820; margin-bottom: 4px;
}

.sv-win-sl { font-size: .69em; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0,0,0,.4); margin: 12px 0 5px; }
.sv-win-sl:first-child { margin-top: 0; }
.sv-win-tx { font-size: .92em; color: #2a1a08; line-height: 1.7; }
.sv-win-watchout { color: #8a3010; background: rgba(239,68,68,.06); border-radius: 6px; padding: 6px 10px; border: 1px solid rgba(239,68,68,.15); }

/* ── DOCUMENT WINDOWS ── */
.sv-doc-type-badge {
	display: inline-block; font-size: .69em; font-weight: 700; letter-spacing: 1.2px;
	text-transform: uppercase; padding: 3px 10px; border-radius: 4px; margin-bottom: 12px;
	background: color-mix(in srgb, var(--sv-win-color, #D4861A) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--sv-win-color, #D4861A) 30%, transparent);
	color: var(--sv-win-color, #D4861A);
}
.sv-win-doc-text {
	font-size: .92em; color: #2a1a08; line-height: 1.85;
	border-left: 3px solid color-mix(in srgb, var(--sv-win-color, #D4861A) 40%, transparent);
	padding-left: 12px; font-style: italic;
}

/* ── IMMERSE ── */
.sv-immerse-text { line-height: 2; }
.sv-immerse-reg-label { font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ── SHARED WINDOWS (Quiz / Fill) ── */
.sv-win.sv-shared .fv-win-bar,
.sv-win.sv-shared .sv-win-bar { border-top: 3px solid #67e8f9; background: #eaf9fb; }
.sv-win.sv-shared .sv-win-dot { background: #67e8f9; }
.sv-win.sv-shared .sv-win-pv { color: #0891b2; }
.sv-win.sv-shared .sv-win-pvname { color: #0891b2; }

/* ── FOOTER DA JANELA ── */
.sv-win-footer {
	flex-shrink: 0; padding: 8px 12px; border-top: 1px solid rgba(0,0,0,.1);
	display: flex; flex-direction: column; gap: 6px; background: rgba(0,0,0,.05);
}
.sv-win-deeplink {
	display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 6px;
	font-size: 10px; font-weight: 600; letter-spacing: .4px; text-decoration: none; transition: all .15s;
	border: 1px solid color-mix(in srgb, var(--sv-win-color, #D4861A) 42%, transparent);
	background: color-mix(in srgb, var(--sv-win-color, #D4861A) 12%, transparent);
	color: var(--sv-win-color, #D4861A); white-space: nowrap;
}
.sv-win-deeplink:hover { filter: brightness(.9); }

/* Botão Flowglish proeminente */
.sv-win-footer-flowglish { padding: 10px 12px; border-top: 1px solid rgba(0,0,0,.1); background: rgba(124,58,237,.06); }
.sv-win-btn-flowglish {
	display: block; width: 100%; padding: 10px 14px;
	background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
	color: #fff !important; text-decoration: none; border-radius: 8px;
	font-size: 12px; font-weight: 700; text-align: center; letter-spacing: .03em;
	transition: opacity .15s, transform .1s; box-shadow: 0 3px 12px rgba(124,58,237,.4);
}
.sv-win-btn-flowglish:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(124,58,237,.55); }

/* ── AUDIO ── */
.sv-ex-play {
	position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
	width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.1);
	border: 1px solid rgba(0,0,0,.2); color: rgba(0,0,0,.5); font-size: 9px;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: all .15s; flex-shrink: 0; padding: 0;
}
.sv-ex-play:hover { background: rgba(0,0,0,.18); color: #1a1208; }
.sv-ex-play.playing { background: rgba(212,134,26,.2); border-color: rgba(212,134,26,.5); color: #D4861A; }
.sv-ex-progress { height: 2px; border-radius: 1px; background: rgba(0,0,0,.1); margin-top: 6px; overflow: hidden; display: none; }
.sv-ex-progress.active { display: block; }
.sv-ex-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg,#D4861A,#F0A832); border-radius: 1px; transition: width .1s linear; }

/* ── SHADOWING ── */
.sv-sh-phrase { background: rgba(0,0,0,.05); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.sv-sh-phrase-text { font-size: 1em; color: #2a1a08; line-height: 1.7; margin-top: 10px; font-style: italic; display: none; }
.sv-sh-instruction { font-size: .78em; color: rgba(0,0,0,.45); margin-bottom: 10px; letter-spacing: .3px; }
.sv-sh-reveal {
	display: inline-flex; align-items: center; gap: 5px; font-size: .78em; color: rgba(0,0,0,.4);
	cursor: pointer; margin-top: 8px; padding: 5px 10px; border-radius: 6px;
	border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.05); transition: all .15s;
}
.sv-sh-reveal:hover { color: #1a1208; border-color: rgba(0,0,0,.3); background: rgba(0,0,0,.09); }
.sv-sh-audio-btn {
	display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px;
	background: color-mix(in srgb, var(--sv-win-color, #D4861A) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--sv-win-color, #D4861A) 30%, transparent);
	color: var(--sv-win-color, #D4861A); font-size: .8em; cursor: pointer;
	margin-bottom: 10px; font-family: 'DM Sans', sans-serif; transition: all .15s; width: 100%;
}
.sv-sh-audio-btn:hover { background: color-mix(in srgb, var(--sv-win-color, #D4861A) 20%, transparent); }
.sv-sh-write-row { display: flex; gap: 6px; align-items: center; }
.sv-sh-write {
	flex: 1; background: white; border: 1px solid rgba(0,0,0,.2); border-radius: 7px;
	padding: 7px 10px; color: #1a1208; font-size: .88em; font-family: 'DM Sans', sans-serif; outline: none;
}
.sv-sh-write:focus { border-color: color-mix(in srgb, var(--sv-win-color, #D4861A) 50%, transparent); }
.sv-sh-mic {
	width: 32px; height: 32px; border-radius: 50%; background: rgba(200,50,50,.1);
	border: 1px solid rgba(200,50,50,.25); color: #aa2222; font-size: 14px;
	cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .18s; flex-shrink: 0;
}
.sv-sh-mic:hover { background: rgba(200,50,50,.2); }

/* ── NARRATIVE / STORY / IMMERSE ── */
.sv-st-text { font-size: 1em; color: #2a1a08; line-height: 1.9; }
.sv-st-wordcount { font-size: .72em; color: rgba(0,0,0,.35); margin-top: 12px; text-align: right; }

/* ── COMMON ERRORS ── */
.sv-win-err-block { margin-bottom: 10px; border-radius: 7px; overflow: hidden; }
.sv-win-err-wrong { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); padding: 7px 11px; font-size: .88em; color: #7a1010; line-height: 1.6; }
.sv-win-err-right { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); border-top: none; padding: 7px 11px; font-size: .88em; color: #155a25; line-height: 1.6; }
.sv-win-err-note { background: rgba(212,134,26,.07); border: 1px solid rgba(212,134,26,.2); border-top: none; padding: 6px 11px; font-size: .82em; color: #7a4810; line-height: 1.5; font-style: italic; }
.sv-win-err-wrong::before { content: "✗ "; font-weight: 700; color: #dc2626; }
.sv-win-err-right::before { content: "✓ "; font-weight: 700; color: #16a34a; }

/* ── FILL WARNING ── */
.sv-fb-warning { font-size: .76em; color: #8a6010; background: rgba(212,134,26,.1); border: 1px solid rgba(212,134,26,.25); border-radius: 7px; padding: 7px 11px; margin-bottom: 14px; }

/* ── QUIZ ── */
.sv-qz-question { font-size: 1em; color: #1a1208; line-height: 1.7; margin-bottom: 14px; font-weight: 500; }
.sv-qz-blank { display: inline-block; min-width: 80px; border-bottom: 2px solid #0891b2; color: #0891b2; font-weight: 700; text-align: center; margin: 0 4px; }
.sv-qz-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sv-qz-opt { padding: 9px 14px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.04); color: #2a1a08; font-size: .9em; cursor: pointer; transition: all .18s; text-align: left; font-family: 'DM Sans', sans-serif; }
.sv-qz-opt:hover { border-color: #D4861A; background: rgba(212,134,26,.08); }
.sv-qz-opt.correct { border-color: #22C55E; background: rgba(34,197,94,.12); color: #155a25; }
.sv-qz-opt.wrong { border-color: #ef4444; background: rgba(239,68,68,.1); color: #8a1010; }
.sv-qz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.sv-qz-counter { font-size: .75em; color: rgba(0,0,0,.4); }
.sv-qz-next { padding: 7px 16px; border-radius: 7px; background: rgba(212,134,26,.12); border: 1px solid rgba(212,134,26,.3); color: #a06010; font-size: .8em; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.sv-qz-next:hover { background: rgba(212,134,26,.22); }
.sv-qz-score { text-align: center; padding: 20px 0; }
.sv-qz-score-num { font-family: 'Playfair Display', serif; font-size: 2.5em; color: #D4861A; }
.sv-qz-score-label { font-size: .8em; color: rgba(0,0,0,.4); margin-top: 4px; }
.sv-qz-retry { margin-top: 14px; padding: 8px 20px; border-radius: 8px; background: rgba(212,134,26,.12); border: 1px solid rgba(212,134,26,.3); color: #a06010; cursor: pointer; font-family: 'DM Sans', sans-serif; }

/* ── FILL THE BLANK ── */
.sv-fb-sentence { font-size: 1em; color: #1a1208; line-height: 1.9; margin-bottom: 10px; }
.sv-fb-input { display: inline-block; border: none; border-bottom: 2px solid rgba(212,134,26,.5); background: transparent; color: #8a4010; font-size: 1em; font-family: 'DM Sans', sans-serif; width: 110px; text-align: center; outline: none; padding: 0 4px; }
.sv-fb-input:focus { border-bottom-color: #D4861A; }
.sv-fb-input.correct { border-bottom-color: #22C55E; color: #155a25; }
.sv-fb-input.wrong { border-bottom-color: #ef4444; color: #8a1010; }
.sv-fb-hint-box { background: rgba(212,134,26,.08); border: 1px solid rgba(212,134,26,.25); border-radius: 7px; padding: 8px 12px; font-size: .85em; color: #7a4810; margin-bottom: 12px; font-style: italic; }
.sv-fb-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sv-fb-check { padding: 6px 16px; border-radius: 7px; background: rgba(212,134,26,.12); border: 1px solid rgba(212,134,26,.3); color: #8a4010; font-size: .8em; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.sv-fb-check:hover { background: rgba(212,134,26,.22); }
.sv-fb-hint-btn { padding: 6px 14px; border-radius: 7px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); color: #a06010; font-size: .8em; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.sv-fb-hint-btn:hover { background: rgba(245,158,11,.22); }
.sv-fb-tryagain { padding: 6px 14px; border-radius: 7px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #8a1010; font-size: .8em; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.sv-fb-tryagain:hover { background: rgba(239,68,68,.18); }
.sv-fb-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.sv-fb-counter { font-size: .75em; color: rgba(0,0,0,.4); }
.sv-fb-next { padding: 7px 16px; border-radius: 7px; background: rgba(212,134,26,.14); border: 1px solid rgba(212,134,26,.35); color: #8a4010; font-size: .8em; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.sv-fb-next:hover { background: rgba(212,134,26,.24); }
.sv-fb-score { text-align: center; padding: 20px 0; }
.sv-fb-score-num { font-family: 'Playfair Display', serif; font-size: 2.5em; color: #D4861A; }
.sv-fb-score-label { font-size: .8em; color: rgba(0,0,0,.4); margin-top: 4px; }
.sv-fb-retry { margin-top: 14px; padding: 8px 20px; border-radius: 8px; background: rgba(212,134,26,.14); border: 1px solid rgba(212,134,26,.35); color: #8a4010; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.sv-fb-progress { font-size: .75em; color: rgba(0,0,0,.4); margin-bottom: 8px; }
.sv-fb-result { font-size: .78em; margin-top: 5px; min-height: 16px; }

/* ── NOTES ── */
.sv-win.sv-notes { width: 360px; }
.sv-win.sv-notes .sv-win-bar { border-top: 3px solid #D4861A; background: #f7efe0; }
.sv-win.sv-notes .sv-win-dot { background: #D4861A; }
.sv-win.sv-notes .sv-win-pv { color: #8a4010; }
.sv-win.sv-notes .sv-win-body { display: flex; flex-direction: column; }
.sv-notes-area { flex: 1; width: 100%; min-height: 170px; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: 12px; font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.6; color: #2a1a08; background: #fffdf7; resize: none; outline: none; box-sizing: border-box; }
.sv-notes-area:focus { border-color: rgba(212,134,26,.55); }
.sv-notes-status { font-size: 11px; color: rgba(0,0,0,.4); margin-top: 8px; min-height: 14px; }
.sv-notes-dl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; background: rgba(212,134,26,.14); border: 1px solid rgba(212,134,26,.4); color: #8a4010; font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.sv-notes-dl:hover { background: rgba(212,134,26,.24); }
.sv-notes-clear { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.45); font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.sv-notes-clear:hover { background: rgba(220,50,50,.12); border-color: rgba(220,50,50,.3); color: #aa2222; }

/* ── EMAIL GATE ── */
.sv-email-overlay {
	display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75);
	z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.sv-email-overlay.open { display: flex; }
.sv-email-modal {
	background: var(--sv-surface); border: 1px solid var(--sv-border);
	border-top: 3px solid var(--sv-amber);
	border-radius: 16px; width: min(440px, 92vw); padding: 32px 28px 28px;
	box-shadow: 0 32px 80px rgba(0,0,0,.8); position: relative;
	color: var(--sv-text); font-family: 'DM Sans', sans-serif;
}
.sv-email-modal-close { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.07); border: none; color: rgba(255,255,255,.4); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.sv-email-modal-close:hover { background: rgba(220,50,50,.3); color: #ff9999; }
.sv-email-modal-icon { font-size: 36px; text-align: center; margin-bottom: 12px; }
.sv-email-modal-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--sv-text); text-align: center; margin-bottom: 6px; }
.sv-email-modal-sub { font-size: 13px; color: var(--sv-text-dim); text-align: center; line-height: 1.65; margin-bottom: 24px; }
.sv-email-modal-sub strong { color: var(--sv-text); }
.sv-email-modal-form { display: flex; flex-direction: column; gap: 10px; }
.sv-email-modal-input { padding: 11px 16px; border-radius: 9px; border: 1px solid var(--sv-border); background: rgba(255,255,255,.05); color: var(--sv-text); font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color .15s; }
.sv-email-modal-input:focus { border-color: rgba(212,134,26,.5); }
.sv-email-modal-input::placeholder { color: var(--sv-text-muted); }
.sv-email-modal-btn { padding: 12px; border-radius: 9px; background: rgba(212,134,26,.18); border: 1px solid rgba(212,134,26,.4); color: var(--sv-amber); font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all .15s; }
.sv-email-modal-btn:hover { background: rgba(212,134,26,.28); border-color: rgba(212,134,26,.6); }
.sv-email-modal-fine { font-size: 10px; color: var(--sv-text-muted); text-align: center; margin-top: 10px; }
.sv-email-modal-success { text-align: center; padding: 10px 0; }
.sv-email-modal-success-icon { font-size: 40px; margin-bottom: 10px; }
.sv-email-modal-success-msg { font-size: 14px; color: var(--sv-amber); font-weight: 600; margin-bottom: 6px; }
.sv-email-modal-success-sub { font-size: 12px; color: var(--sv-text-muted); }

/* ── FOOTER ── */
.sv-footer { padding: 28px 20px 24px; background: var(--sv-dark); border-top: 1px solid var(--sv-border); text-align: center; }
.sv-footer-ecosystem { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-bottom: 16px; }
.sv-footer-eco-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-text-muted); margin-right: 4px; }
.sv-footer-ecosystem a { color: var(--sv-text-dim); text-decoration: none; font-size: 12px; font-weight: 600; transition: color .15s; }
.sv-footer-ecosystem a:hover { color: var(--sv-amber); }
.sv-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 14px; }
.sv-footer-nav a { color: var(--sv-text-muted); text-decoration: none; font-size: 12px; transition: color .15s; }
.sv-footer-nav a:hover { color: var(--sv-amber); }
.sv-footer-copy { font-size: 11px; color: var(--sv-text-muted); }

/* ── SNAPPING (magnet) ── */
.sv-win.snapping { transition: left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1); }

/* ============================================================
 * RESPONSIVE — MOBILE & TABLET
 * ============================================================ */
@media (max-width: 768px) {

	.sv-hero { flex-direction: column; padding: 16px 16px 0; }
	.sv-hero-pv-name { font-size: clamp(36px, 10vw, 52px); }

	/* Register cards — 2 visíveis, scroll horizontal */
	.sv-register-cards { gap: 6px; }
	.sv-register-card { min-width: 120px; padding: 12px 10px 10px; }
	.sv-reg-card-word { font-size: 16px; }

	/* Escala de formalidade compacta */
	.sv-scale-label { font-size: 8px; }

	/* Sidebar ecossistema: linha horizontal */
	.sv-eco-sidebar { flex-direction: row; width: 100%; border-left: none; border-top: 1px solid var(--sv-border); margin: 14px 0 0; padding: 14px 0 0; flex-wrap: wrap; justify-content: center; }
	.sv-eco-divider { display: none; }
	.sv-eco-btn { width: 60px; font-size: 9px; padding: 8px 4px; }
	.sv-eco-icon { font-size: 15px; }

	/* Toolbar: scroll horizontal */
	.sv-fixed-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 12px; gap: 0; }
	.sv-fixed-toolbar::-webkit-scrollbar { display: none; }
	.sv-tb-btn { font-size: 12px; padding: 10px 9px; }
	.sv-tb-pv-label { font-size: 13px; padding: 10px 0; margin-right: 6px; }
	.sv-tb-right { margin-left: 4px; }

	/* Botões ocultos no mobile */
	.sv-fixed-toolbar [onclick*="'story'"],
	.sv-fixed-toolbar [onclick*="'immerse'"],
	.sv-fixed-toolbar [onclick*="'fill'"],
	.sv-tb-notes,
	.sv-tb-magnet,
	.sv-tb-sweep { display: none !important; }

	.sv-tb-right > .sv-tb-sep:first-child { display: none; }

	/* Workspace */
	.sv-ws-instructions { display: none !important; }
	.sv-workspace { min-height: 60vh; }

	/* Janelas: fixed bottom sheet */
	.sv-win {
		position: fixed !important;
		left: 0 !important; bottom: 0 !important; top: auto !important;
		width: 100vw !important; max-width: 100vw !important;
		height: 72vh !important; max-height: 72vh !important;
		min-height: unset !important;
		border-radius: 16px 16px 0 0 !important;
		border-left: none !important; border-right: none !important; border-bottom: none !important;
		z-index: 9000 !important;
	}
	.sv-win::before { content: ''; display: block; width: 40px; height: 4px; background: rgba(0,0,0,.18); border-radius: 2px; margin: 8px auto 0; flex-shrink: 0; }
	.sv-win-resize { display: none !important; }
	.sv-win-bar .sv-win-btn:not(.sv-win-x) { display: none !important; }
	.sv-win-bar, .sv-win-bar:active { cursor: default !important; }
	.sv-win-body { overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 15px; }

	.sv-email-modal { width: 94vw; padding: 28px 20px 22px; }
	.sv-footer-nav { gap: 6px 12px; }
	.sv-footer-nav a { font-size: 11px; }
}

/* Tablet médio (641–768px): janela centralizada */
@media (min-width: 641px) and (max-width: 768px) {
	.sv-win {
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 540px !important; max-width: 540px !important;
		height: 66vh !important;
		border-radius: 16px 16px 0 0 !important;
	}
	.sv-tb-btn { font-size: 13px; padding: 10px 11px; }
	.sv-register-card { min-width: 160px; }
	.sv-reg-card-word { font-size: 18px; }
}