* { box-sizing: border-box; }
:root {
--bg-0: #08070d;
--bg-1: #0c0913;
--bg-2: #12101b;
--surface: rgba(20, 17, 29, 0.9);
--surface-2: rgba(27, 23, 38, 0.94);
--surface-3: rgba(36, 30, 49, 0.9);
--text: #f7f3ff;
--muted: #aaa2b8;
--muted-2: #7c7489;
--border: rgba(255, 255, 255, 0.09);
--border-strong: rgba(177, 116, 255, 0.28);
--purple: #9b5cff;
--purple-2: #6f3cff;
--purple-3: #c084fc;
--pink: #e879f9;
--success: #4ade80;
--danger: #fb7185;
--warning: #fbbf24;
--shadow: 0 20px 55px rgba(0, 0, 0, 0.28);
}
html { color-scheme: dark; }
body {
margin: 0;
min-width: 320px;
background:
radial-gradient(circle at 75% -10%, rgba(123, 63, 228, 0.17), transparent 36%),
radial-gradient(circle at 15% 85%, rgba(93, 49, 172, 0.12), transparent 36%),
var(--bg-0);
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button, select, input { min-height: 42px; }
button { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.025em; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.file-button:focus-within {
outline: 2px solid var(--purple-3);
outline-offset: 2px;
}
.eyebrow {
margin: 0 0 5px;
color: #a997bd;
font-size: .68rem;
font-weight: 900;
letter-spacing: .14em;
}
.muted { color: var(--muted); }
/* Auth */
.auth-screen {
min-height: 100vh;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
padding: 28px 18px;
background:
linear-gradient(135deg, rgba(8,7,13,.86), rgba(15,8,26,.9)),
radial-gradient(circle at 72% 20%, rgba(var(--theme-rgb),.23), transparent 35%),
radial-gradient(circle at 20% 80%, rgba(var(--theme-rgb-2),.17), transparent 35%);
}
.auth-orb {
position: absolute;
width: 300px;
height: 300px;
border-radius: 999px;
filter: blur(80px);
opacity: .35;
pointer-events: none;
}
.orb-one { background: #7c3aed; top: -100px; right: 4%; }
.orb-two { background: #c026d3; bottom: -120px; left: 3%; }
.glass {
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.auth-card {
width: min(500px, 100%);
background: linear-gradient(180deg, rgba(27,22,39,.92), rgba(15,13,22,.94));
border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 30px 90px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
border-radius: 26px;
padding: 28px;
position: relative;
z-index: 2;
}
.brand {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.brand-mark {
width: 40px;
height: 40px;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 12px;
color: white;
font-weight: 950;
background: linear-gradient(135deg, var(--purple), var(--purple-2) 55%, #4c1d95);
box-shadow: 0 8px 24px rgba(124,58,237,.28);
}
.brand strong { display: block; font-size: .98rem; }
.brand span { display: block; color: var(--muted); font-size: .72rem; margin-top: 1px; }
.brand-auth { margin-bottom: 34px; }
.auth-copy h1 { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: 12px; line-height: 1.02; }
.auth-copy p:last-child { color: var(--muted); line-height: 1.55; }
.auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
padding: 5px;
border-radius: 12px;
background: rgba(255,255,255,.045);
margin: 22px 0;
}
.auth-tab {
border: 0;
border-radius: 9px;
background: transparent;
color: var(--muted);
font-weight: 800;
cursor: pointer;
}
.auth-tab.active {
background: linear-gradient(135deg, rgba(var(--theme-rgb),.28), rgba(var(--theme-rgb-2),.18));
color: white;
box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb-3),.2);
}
.auth-form { display: grid; gap: 3px; }
.auth-message, .form-message { min-height: 22px; margin: 6px 0 0; color: var(--danger); font-size: .83rem; }
.auth-note { margin: 14px 0 0; color: var(--muted-2); font-size: .75rem; line-height: 1.5; }
/* Shell */
.app-shell { min-height: 100vh; }
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: 264px;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(17,14,24,.98), rgba(11,9,16,.98));
border-right: 1px solid var(--border);
z-index: 30;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px; border-bottom: 1px solid var(--border); }
.nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 7px; }
.nav-item,
.nav-subitem {
width: 100%;
display: flex;
align-items: center;
gap: 11px;
border: 1px solid transparent;
border-radius: 11px;
background: transparent;
color: #b8b0c3;
cursor: pointer;
font-weight: 760;
text-align: left;
transition: .15s ease;
}
.nav-item { padding: 10px 12px; }
.nav-subitem { min-height: 38px; padding: 7px 11px 7px 42px; justify-content: space-between; font-size: .86rem; }
.nav-item:hover, .nav-subitem:hover { color: white; background: rgba(255,255,255,.045); }
.nav-item.active, .nav-subitem.active {
color: white;
background: linear-gradient(90deg, rgba(var(--theme-rgb),.13), rgba(var(--theme-rgb-2),.045));
border-color: rgba(var(--theme-rgb),.11);
box-shadow: none;
}
.nav-item.active { box-shadow: inset 2px 0 0 rgba(var(--theme-rgb-3), .82); }
.nav-icon { width: 18px; text-align: center; color: var(--purple-3); }
.nav-group {
border-radius: 13px;
background: color-mix(in srgb, var(--surface-2) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
box-shadow: none;
overflow: hidden;
}
.nav-group-title {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 12px 7px;
font-size: .86rem;
color: #ded7e8;
font-weight: 850;
background: transparent;
box-shadow: none;
}
.nav-group-title { cursor: pointer; list-style: none; }
.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-chevron { margin-left: auto; color: var(--muted); font-size: .8rem; transition: transform .16s ease; }
.nav-group:not([open]) .nav-group-chevron { transform: rotate(-90deg); }
.nav-count { min-width: 25px; min-height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; background: rgba(var(--theme-rgb),.13); color: color-mix(in srgb, var(--purple-3) 70%, white); font-size: .7rem; }
.sidebar-bottom { margin-top: auto; padding: 15px 12px; border-top: 1px solid var(--border); }
.profile-card { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.035); }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #2a2138, #18131f); border: 1px solid var(--border-strong); color: color-mix(in srgb, var(--purple-3) 72%, white); font-weight: 900; }
.profile-copy { flex: 1; min-width: 0; }
.profile-copy strong, .profile-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.profile-copy strong { font-size: .83rem; }
.profile-copy span { color: var(--muted); font-size: .67rem; margin-top: 2px; }
.main { margin-left: 264px; min-width: 0; }
.topbar {
min-height: 86px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 17px clamp(18px, 3vw, 36px);
position: sticky;
top: 0;
z-index: 20;
background: rgba(8,7,13,.82);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h1 { margin: 0; font-size: 1.35rem; }
.global-search-wrap {
width: min(330px, 34vw);
min-height: 43px;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 11px;
background: rgba(255,255,255,.035);
}
.global-search-wrap span { color: var(--muted); font-size: 1.2rem; }
.global-search-wrap input { min-height: auto; padding: 0; margin: 0; border: 0; background: transparent; }
.global-search-wrap input:focus { box-shadow: none; }
.page-wrap { max-width: 1450px; margin: 0 auto; padding: 28px clamp(18px, 3vw, 36px) 60px; }
/* Shared */
.panel,
.metric-card,
.question-card,
.hero-card {
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.panel {
background: linear-gradient(180deg, rgba(22,19,30,.94), rgba(15,13,21,.94));
border-radius: 17px;
padding: 20px;
}
.section-heading, .list-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.section-heading { margin-bottom: 17px; }
.section-heading h2, .list-heading h2 { margin-bottom: 0; font-size: 1.04rem; }
.list-heading { margin: 24px 2px 14px; }
.button {
border: 1px solid transparent;
border-radius: 10px;
min-height: 42px;
padding: 9px 14px;
font-weight: 850;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary {
color: white;
background: linear-gradient(135deg, var(--purple), var(--purple-2));
box-shadow: 0 8px 24px rgba(var(--theme-rgb-2),.2);
}
.button.light { background: white; color: #160f24; }
.button.secondary { background: rgba(255,255,255,.05); border-color: var(--border); color: #eee8f7; }
.button.ghost { background: rgba(255,255,255,.035); border-color: var(--border); color: #d4ccdf; }
.button.danger { color: #fecdd3; background: rgba(244,63,94,.09); border-color: rgba(251,113,133,.25); }
.button.small { min-height: 36px; padding: 6px 11px; font-size: .78rem; }
.button.full { width: 100%; }
.text-button { border: 0; background: transparent; color: color-mix(in srgb, var(--purple-3) 75%, white); cursor: pointer; font-weight: 800; padding: 5px; }
.icon-button { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 1.05rem; }
.icon-button:hover { background: rgba(255,255,255,.05); color: white; }
.file-button { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.spacer { flex: 1; }
label { display: block; color: #bcb3c8; font-size: .76rem; font-weight: 800; margin-bottom: 11px; }
label small { display: block; color: var(--muted-2); font-size: .68rem; line-height: 1.35; margin-top: 6px; font-weight: 600; }
input, select, textarea {
width: 100%;
margin-top: 6px;
padding: 10px 11px;
color: var(--text);
background: #0e0c13;
border: 1px solid rgba(255,255,255,.09);
border-radius: 9px;
outline: 0;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #625b6d; }
input:focus, select:focus, textarea:focus { border-color: rgba(var(--theme-rgb),.7); box-shadow: 0 0 0 3px rgba(var(--theme-rgb),.1); }
select { cursor: pointer; }
/* Dashboard */
.hero-card {
min-height: 190px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: clamp(24px, 5vw, 46px);
overflow: hidden;
position: relative;
border-radius: 22px;
background:
radial-gradient(circle at 85% 20%, rgba(232,121,249,.22), transparent 27%),
linear-gradient(125deg, #421b73 0%, #6f3cff 55%, #4a1b86 100%);
}
.hero-card::after {
content: "";
position: absolute;
width: 230px;
height: 230px;
right: -70px;
bottom: -110px;
border-radius: 999px;
border: 40px solid rgba(255,255,255,.06);
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card h2 { max-width: 660px; margin-bottom: 10px; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.hero-card p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.75); }
.hero-card .eyebrow { color: rgba(255,255,255,.66); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin: 16px 0; }
.metric-card { min-width: 0; padding: 18px; border-radius: 15px; background: linear-gradient(180deg, rgba(24,20,32,.95), rgba(15,13,20,.95)); }
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card span { font-size: .76rem; font-weight: 800; }
.metric-card strong { display: block; margin: 7px 0 3px; font-size: 1.9rem; }
.metric-card small { font-size: .68rem; }
.metric-card.accent-card { background: linear-gradient(145deg, rgba(106,55,190,.42), rgba(25,18,37,.95)); border-color: rgba(var(--theme-rgb-3),.24); }
.dashboard-grid, .stats-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 16px; }
.compact-list { display: grid; gap: 9px; }
.compact-item {
width: 100%;
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 10px;
align-items: center;
padding: 11px 12px;
border: 1px solid var(--border);
border-radius: 11px;
background: rgba(255,255,255,.025);
}
.compact-item button { text-align: left; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; min-height: auto; }
.compact-item strong { display: block; font-size: .84rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-item span { display: block; margin-top: 3px; color: var(--muted); font-size: .69rem; }
.compact-status { color: color-mix(in srgb, var(--purple-3) 75%, white) !important; white-space: nowrap; }
.progress-list { display: grid; gap: 14px; }
.progress-item-header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: .75rem; }
.progress-item-header span:last-child { color: var(--muted); }
.progress-track { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple-2), var(--purple-3)); }
/* Questions */
.filters-panel { padding: 15px; }
.filter-row { display: grid; grid-template-columns: repeat(4, minmax(125px,1fr)); gap: 8px 10px; }
.filter-row label { margin: 0; }
.filter-row select { margin-top: 5px; }
.filter-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--border); }
.filter-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.filter-chip, .badge, .tag {
display: inline-flex;
align-items: center;
min-height: 27px;
border-radius: 999px;
font-size: .69rem;
font-weight: 850;
}
.filter-chip { padding: 4px 9px; color: color-mix(in srgb, var(--purple-3) 72%, white); background: rgba(var(--theme-rgb),.11); border: 1px solid rgba(var(--theme-rgb-3),.18); }
.question-list { display: grid; gap: 12px; }
.question-card { padding: 19px; border-radius: 16px; background: linear-gradient(180deg, rgba(22,18,29,.96), rgba(14,12,19,.96)); }
.question-card:hover { border-color: rgba(var(--theme-rgb-3),.18); }
.question-card-header, .question-card-footer, .badges, .tags, .question-actions, .question-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.question-card-header, .question-card-footer { justify-content: space-between; }
.question-statement { margin: 14px 0 8px; font-size: .96rem; line-height: 1.58; white-space: pre-wrap; }
.question-meta { color: var(--muted); font-size: .72rem; }
.badge { padding: 4px 8px; color: #d6cfdf; background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.badge.purple { color: color-mix(in srgb, var(--purple-3) 72%, white); background: rgba(var(--theme-rgb),.1); border-color: rgba(var(--theme-rgb-3),.17); }
.badge.success { color: #86efac; background: rgba(34,197,94,.08); border-color: rgba(74,222,128,.18); }
.badge.danger { color: #fda4af; background: rgba(244,63,94,.08); border-color: rgba(251,113,133,.18); }
.badge.warning { color: #fcd34d; background: rgba(245,158,11,.08); border-color: rgba(251,191,36,.18); }
.tag { padding: 4px 8px; color: #bca2e8; background: rgba(126,77,179,.09); }
.question-options { margin-top: 16px; display: grid; gap: 9px; }
.answer-option {
min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 11px;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px;
background: rgba(255,255,255,.018); color: #d3cddd; cursor: pointer; transition: .16s ease;
}
.answer-option:hover { border-color: rgba(var(--theme-rgb-3),.28); background: rgba(var(--theme-rgb),.045); }
.answer-option input { position: absolute; opacity: 0; pointer-events: none; }
.answer-letter {
width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
border: 1px solid var(--border-strong); background: rgba(255,255,255,.035); color: #d8d1df;
font-size: .76rem; font-weight: 900; transition: .16s ease;
}
.answer-text { min-width: 0; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; }
.answer-option.selected { border-color: rgba(var(--theme-rgb-3),.68); background: linear-gradient(90deg, rgba(var(--theme-rgb-2),.14), rgba(255,255,255,.018)); }
.answer-option.selected .answer-letter { border-color: var(--purple-3); background: linear-gradient(135deg, var(--purple-2), var(--purple)); color: #fff; }
.answer-option.correct { border-color: rgba(74,222,128,.48); background: rgba(34,197,94,.07); }
.answer-option.correct .answer-letter { border-color: rgba(74,222,128,.65); background: rgba(34,197,94,.18); color: #9df0bb; }
.answer-option.wrong { border-color: rgba(251,113,133,.55); background: rgba(244,63,94,.07); }
.answer-option.wrong .answer-letter { border-color: rgba(251,113,133,.7); background: rgba(244,63,94,.18); color: #fecdd3; }
.answer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.answer-feedback { margin-top: 11px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); font-size: .78rem; font-weight: 750; }
.answer-feedback.success { color: #9df0bb; background: rgba(34,197,94,.07); border-color: rgba(74,222,128,.22); }
.answer-feedback.error { color: #fecdd3; background: rgba(244,63,94,.07); border-color: rgba(251,113,133,.22); }
.answer-feedback.warning { color: #fde68a; background: rgba(245,158,11,.07); border-color: rgba(251,191,36,.22); }
.question-notes { margin-top: 13px; padding: 13px; border-radius: 10px; white-space: pre-wrap; line-height: 1.55; font-size: .84rem; background: linear-gradient(90deg, rgba(var(--theme-rgb-2),.1), rgba(255,255,255,.02)); border-left: 3px solid var(--purple); }
.answer-actions .toggle-notes {
border-color: rgba(var(--theme-rgb-3),.35);
background: linear-gradient(90deg, rgba(var(--theme-rgb-2),.11), rgba(255,255,255,.025));
}
.answer-actions .toggle-notes:hover {
border-color: rgba(var(--theme-rgb-3),.62);
background: linear-gradient(90deg, rgba(var(--theme-rgb-2),.18), rgba(255,255,255,.04));
}
.question-card-footer { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.empty-state { text-align: center; padding: 60px 18px; color: var(--muted); }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 15px; color: color-mix(in srgb, var(--purple-3) 75%, white); background: rgba(var(--theme-rgb),.1); border: 1px solid rgba(var(--theme-rgb-3),.15); font-size: 1.6rem; }
/* Lists */
.lists-layout { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); gap: 16px; }
.saved-lists { display: grid; gap: 9px; }
.saved-list-card { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.saved-list-card.active { border-color: rgba(var(--theme-rgb-3),.35); background: rgba(var(--theme-rgb),.09); }
.saved-list-card strong { display: block; font-size: .84rem; }
.saved-list-card p { margin: 4px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.saved-list-card span { display: block; margin-top: 8px; color: color-mix(in srgb, var(--purple-3) 72%, white); font-size: .68rem; font-weight: 800; }
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.check-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.025); color: #c7bfce; font-size: .72rem; cursor: pointer; }
.check-pill input { width: auto; min-height: auto; margin: 0; accent-color: var(--purple); }
/* Stats / settings */
.stats-metrics { margin-top: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.settings-profile { display: flex; align-items: center; gap: 13px; }
.settings-profile p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.settings-avatar { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, #4d267b, #25163d); border: 1px solid var(--border-strong); color: color-mix(in srgb, var(--purple-3) 58%, white); font-size: 1.35rem; font-weight: 900; }
.action-stack { display: flex; flex-wrap: wrap; gap: 8px; }
.danger-zone { border-color: rgba(251,113,133,.12); }
/* Dialogs */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.modal-dialog { width: min(930px, calc(100vw - 24px)); max-height: calc(100vh - 34px); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: #100d16; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.small-dialog { width: min(500px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--border); border-radius: 18px; background: #100d16; box-shadow: 0 30px 100px rgba(0,0,0,.65); }
.modal-form { padding: 20px; overflow: auto; max-height: calc(100vh - 34px); }
.modal-header, .modal-actions { display: flex; align-items: center; gap: 12px; }
.modal-header { justify-content: space-between; margin-bottom: 16px; }
.modal-header h2 { margin-bottom: 0; font-size: 1.18rem; }
.modal-actions { margin-top: 10px; padding-top: 15px; border-top: 1px solid var(--border); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 13px; }
.span-2 { grid-column: span 2; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 25; }
.mobile-only { display: none; }
@media (max-width: 1100px) {
.filter-row { grid-template-columns: repeat(2, minmax(140px,1fr)); }
.metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
.mobile-only { display: inline-grid; place-items: center; }
.sidebar { transform: translateX(-102%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(0,0,0,.4); }
.sidebar.open { transform: translateX(0); }
.main { margin-left: 0; }
.topbar { min-height: 76px; }
.global-search-wrap { width: min(280px, 43vw); }
.dashboard-grid, .stats-grid, .lists-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
.auth-card { padding: 22px 18px; border-radius: 20px; }
.topbar { align-items: flex-start; flex-direction: column; padding: 14px 16px; }
.topbar-left, .topbar-actions { width: 100%; }
.topbar-actions { align-items: stretch; }
.global-search-wrap { width: 100%; flex: 1; }
.topbar-actions .button { flex: 0 0 auto; }
.page-wrap { padding: 18px 14px 42px; }
.hero-card { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
.metric-grid { grid-template-columns: 1fr 1fr; }
.metric-card strong { font-size: 1.55rem; }
.filter-row { grid-template-columns: 1fr; }
.filter-footer { align-items: stretch; flex-direction: column; }
.list-heading { align-items: stretch; flex-direction: column; }
.question-card-header, .question-card-footer { align-items: flex-start; flex-direction: column; }
.question-actions { width: 100%; }
.question-actions > * { flex: 1; }
.form-grid { grid-template-columns: 1fr; }
.span-2 { grid-column: span 1; }
.settings-grid { grid-template-columns: 1fr; }
.modal-actions { flex-wrap: wrap; }
.modal-actions .spacer { display: none; }
.modal-actions .button { flex: 1; }
.action-stack { flex-direction: column; }
}
@media (max-width: 430px) {
.metric-grid { grid-template-columns: 1fr; }
.topbar-actions { flex-wrap: wrap; }
.topbar-actions .button { width: 100%; }
}
/* v5 — importadores e pacotes */
.pdf-import-panel { grid-column: span 2; }
.pdf-defaults-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 12px; margin-top: 14px; }
.pdf-import-actions { align-items: center; margin-top: 6px; }
.pdf-ocr-mode-quick { display: grid; gap: 6px; max-width: 620px; margin: 8px 0; }
.pdf-ocr-mode-quick select { width: 100%; min-height: 42px; }
.pdf-ocr-mode-quick small { line-height: 1.4; }
.import-status { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.import-status.busy { color: color-mix(in srgb, var(--purple-3) 72%, white); }
.import-status.success { color: #86efac; }
.import-status.error { color: #fda4af; }
.tiny-note { margin: 10px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.import-summary { padding: 13px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.import-summary strong { color: color-mix(in srgb, var(--purple-3) 55%, white); }
.import-summary p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.import-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.import-summary-stat { padding: 9px; border-radius: 9px; background: rgba(var(--theme-rgb),.07); border: 1px solid rgba(var(--theme-rgb-3),.12); }
.import-summary-stat strong { display: block; font-size: 1rem; }
.import-summary-stat span { display: block; margin-top: 2px; color: var(--muted); font-size: .65rem; }
.import-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pdf-review-dialog { width: min(1080px, calc(100vw - 24px)); }
.pdf-review-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pdf-review-list { display: grid; gap: 10px; }
.pdf-review-item { border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.018); overflow: hidden; }
.pdf-review-item[open] { border-color: rgba(var(--theme-rgb-3),.28); background: rgba(var(--theme-rgb-2),.035); }
.pdf-review-item summary { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px 12px; cursor: pointer; list-style: none; }
.pdf-review-item summary::-webkit-details-marker { display: none; }
.pdf-review-item summary::after { content: '⌄'; color: var(--muted); font-weight: 900; }
.pdf-review-item[open] summary::after { content: '⌃'; }
.pdf-review-check { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--purple); }
.pdf-question-number { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 7px; border-radius: 8px; background: rgba(var(--theme-rgb),.12); color: color-mix(in srgb, var(--purple-3) 72%, white); font-size: .72rem; font-weight: 900; }
.pdf-review-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ddd6e5; font-size: .78rem; font-weight: 700; }
.confidence-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border-radius: 999px; font-size: .62rem; font-weight: 900; border: 1px solid var(--border); }
.confidence-high { color: #86efac; background: rgba(34,197,94,.08); border-color: rgba(74,222,128,.2); }
.confidence-medium { color: #fde68a; background: rgba(234,179,8,.08); border-color: rgba(250,204,21,.2); }
.confidence-low { color: #fda4af; background: rgba(244,63,94,.08); border-color: rgba(251,113,133,.2); }
.pdf-review-body { padding: 0 12px 12px; border-top: 1px solid var(--border); }
.pdf-review-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px 10px; margin-top: 12px; }
.pdf-review-fields .wide { grid-column: span 4; }
.pdf-review-fields .half { grid-column: span 2; }
.pdf-review-fields textarea { min-height: 82px; }
.pdf-review-fields textarea.statement-review { min-height: 120px; }
.sticky-actions { position: sticky; bottom: -20px; background: #100d16; z-index: 2; }
@media (max-width: 860px) {
.pdf-import-panel { grid-column: span 1; }
.pdf-defaults-grid { grid-template-columns: 1fr 1fr; }
.pdf-review-fields { grid-template-columns: 1fr 1fr; }
.pdf-review-fields .wide { grid-column: span 2; }
.pdf-review-fields .half { grid-column: span 2; }
}
@media (max-width: 650px) {
.pdf-defaults-grid, .import-choice-grid { grid-template-columns: 1fr; }
.import-summary-grid { grid-template-columns: 1fr 1fr 1fr; }
.pdf-review-item summary { grid-template-columns: auto auto minmax(0,1fr); }
.pdf-review-item summary::after { display: none; }
.confidence-badge { grid-column: 2 / span 2; justify-self: start; }
.pdf-review-fields { grid-template-columns: 1fr; }
.pdf-review-fields .wide, .pdf-review-fields .half { grid-column: span 1; }
}
.pdf-auto-detect { grid-column: span 3; }
.checkbox-inline { display:flex; align-items:center; gap:8px; margin-top:8px; color:var(--text); font-weight:700; }
.checkbox-inline input { width:18px; min-height:18px; margin:0; accent-color:var(--purple); }
@media (max-width:900px){ .pdf-auto-detect{grid-column:span 2;} }
@media (max-width:650px){ .pdf-auto-detect{grid-column:span 1;} }
/* v7 — imagens e recortes visuais */
.pdf-visual-mode { grid-column: span 3; }
.question-visual { margin-top: 14px; }
.question-image-wrap { margin: 10px 0 2px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); overflow: hidden; }
.question-image { display: block; width: 100%; max-height: 720px; object-fit: contain; border-radius: 9px; background: #fff; }
.question-image-caption { margin-top: 8px; color: var(--muted); font-size: .72rem; }
.question-image-editor { border: 1px dashed rgba(var(--theme-rgb-3),.3); border-radius: 14px; padding: 12px; background: rgba(var(--theme-rgb-2),.035); }
.question-image-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.question-image-editor-head strong { display:block; color: var(--text); font-size: .86rem; }
.question-image-editor-head small { display:block; margin-top: 4px; color: var(--muted); }
.question-image-editor-actions { display:flex; gap:8px; flex-wrap:wrap; }
.question-image-preview { margin-top: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0,0,0,.18); }
.question-image-preview img { display:block; width:100%; max-height:420px; object-fit:contain; border-radius:8px; background:#fff; }
.pdf-review-visual { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.pdf-review-visual-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.pdf-review-visual img { display:block; width:100%; max-height:420px; object-fit:contain; border-radius:8px; background:#fff; }
.visual-detected-badge { display:inline-flex; align-items:center; min-height:24px; padding:3px 8px; border-radius:999px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#86efac; font-size:.68rem; font-weight:800; }
@media (max-width:900px){ .pdf-visual-mode{grid-column:span 2;} }
@media (max-width:650px){ .pdf-visual-mode{grid-column:span 1;} .question-image-editor-actions{width:100%;} .question-image-editor-actions>*{flex:1;} }
/* v8 — IndexedDB, revisão de importação e edição em lote */
.filter-footer-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.bulk-toolbar { margin-top:12px; padding:12px; border:1px solid rgba(var(--theme-rgb-3),.2); border-radius:14px; background:linear-gradient(135deg,rgba(var(--theme-rgb-2),.075),rgba(15,12,23,.7)); }
.bulk-toolbar-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.bulk-toolbar-top strong { color:color-mix(in srgb, var(--purple-3) 55%, white); }
.bulk-mini-actions { display:flex; gap:7px; flex-wrap:wrap; }
.bulk-editor-grid { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(180px,1.3fr) auto minmax(180px,1fr) auto auto auto; gap:9px; align-items:end; }
.bulk-editor-grid label { margin:0; }
.bulk-action-button { min-height:42px; white-space:nowrap; }
.question-card-header-left { display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; }
.batch-checkbox-wrap { display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 8px; border:1px solid var(--border); border-radius:9px; color:var(--muted); font-size:.7rem; font-weight:800; background:rgba(255,255,255,.02); }
.batch-checkbox-wrap input { width:17px; min-height:17px; margin:0; accent-color:var(--purple); }
.question-card.batch-selected { border-color:rgba(var(--theme-rgb-3),.45); box-shadow:0 0 0 1px rgba(var(--theme-rgb),.12), var(--shadow); }
.import-warning-box { margin-top:10px; padding:10px 11px; border:1px solid rgba(251,191,36,.22); border-radius:11px; background:rgba(245,158,11,.055); color:#fde68a; font-size:.73rem; line-height:1.5; }
.import-warning-box strong { display:block; margin-bottom:3px; color:#fef3c7; }
.badge.import-alert { color:#fde68a; background:rgba(245,158,11,.09); border-color:rgba(251,191,36,.24); }
.badge.import-alert-icon { min-width:2rem; justify-content:center; padding-inline:.55rem; cursor:pointer; user-select:none; }
.badge.import-alert-icon:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.pdf-warning-list { margin:10px 0 0; padding:8px 10px; border-radius:10px; background:rgba(245,158,11,.055); border:1px solid rgba(251,191,36,.16); color:#fde68a; font-size:.7rem; line-height:1.45; }
.pdf-warning-list ul { margin:5px 0 0 17px; padding:0; }
.storage-status { margin-top:12px; padding:11px 12px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); color:color-mix(in srgb, var(--purple-3) 72%, white); font-size:.78rem; line-height:1.5; }
.storage-status strong { color:#f3e8ff; }
@media (max-width: 1180px) {
.bulk-editor-grid { grid-template-columns:1fr 1fr auto 1fr auto; }
#bulkReclassifyBtn, #bulkDeleteBtn { grid-column:auto; }
}
@media (max-width: 760px) {
.filter-footer-actions { width:100%; justify-content:stretch; }
.filter-footer-actions > * { flex:1 1 150px; }
.bulk-editor-grid { grid-template-columns:1fr; }
.bulk-editor-grid > * { width:100%; }
.bulk-mini-actions { width:100%; }
.bulk-mini-actions > * { flex:1 1 130px; }
.question-card-header-left { width:100%; }
}
@media (min-width: 651px) { .import-summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
/* v9 — Focus / session mode */
html.study-session-open,
body.study-session-open {
overflow: hidden !important;
overscroll-behavior: none;
}
body.study-session-open {
position: fixed;
left: 0;
right: 0;
width: 100%;
}
.study-dialog {
width: min(1180px, calc(100vw - 22px));
max-width: 1180px;
max-height: calc(100dvh - 22px);
padding: 0;
border: 1px solid rgba(var(--theme-rgb-3),.22);
border-radius: 20px;
background: #0c0911;
color: var(--text);
box-shadow: 0 34px 120px rgba(0,0,0,.75);
overflow: hidden;
}
.study-dialog::backdrop {
background: rgba(3,2,6,.82);
backdrop-filter: blur(5px);
overscroll-behavior: none;
}
.study-shell {
max-height: calc(100dvh - 22px);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
outline: none;
}
.study-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(65,31,102,.18), rgba(12,9,17,.92));
position: sticky; top: 0; z-index: 8; backdrop-filter: blur(14px);
}
.study-header-progress {
display: inline-flex;
align-items: center;
min-height: 22px;
margin: 7px 0 0;
padding: 3px 8px;
border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
border-radius: 999px;
color: var(--muted);
background: color-mix(in srgb, var(--surface-3) 66%, transparent);
font-size: .67rem;
font-weight: 750;
letter-spacing: .015em;
}
.study-title-block { min-width: 0; }
.study-title-block h2 { margin: 0; font-size: 1.24rem; }
.study-subtitle { margin: 5px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.study-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.study-close { font-size: 1.45rem; }
.study-navigation {
display: grid; grid-template-columns: auto auto minmax(160px,1fr) auto; align-items: center; gap: 12px;
padding: 13px 22px; border-bottom: 1px solid var(--border); background: rgba(16,12,22,.96);
position: sticky; top: 89px; z-index: 7;
}
.study-page-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .74rem; white-space: nowrap; }
.study-page-control input {
width: 62px; min-height: 38px; margin: 0; padding: 7px 8px; text-align: center; font-weight: 850;
background: rgba(255,255,255,.035);
}
.study-session-progress { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted); font-size: .7rem; }
.study-progress-track { min-width: 90px; height: 6px; flex: 1; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.study-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #c084fc); transition: width .2s ease; }
.study-number-strip {
display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-inline: contain;
padding: 11px 22px 12px; border-bottom: 1px solid var(--border); scrollbar-width: thin;
background: rgba(12,9,17,.94); position: sticky; top: 153px; z-index: 6;
}
.study-number-button {
flex: 0 0 auto; min-width: 42px; height: 38px; padding: 0 10px; border-radius: 9px;
border: 1px solid var(--border); background: rgba(255,255,255,.025); color: #d4ccdc;
font: inherit; font-size: .72rem; font-weight: 900; cursor: pointer;
}
.study-number-button:hover { border-color: rgba(var(--theme-rgb-3),.32); }
.study-number-button.active { color: #fff; border-color: rgba(var(--theme-rgb-3),.65); background: linear-gradient(135deg,var(--purple-2),var(--purple)); box-shadow: 0 5px 18px rgba(var(--theme-rgb-2),.2); }
.study-number-button.correct:not(.active) { color: #86efac; border-color: rgba(74,222,128,.3); background: rgba(34,197,94,.06); }
.study-number-button.wrong:not(.active) { color: #fda4af; border-color: rgba(251,113,133,.28); background: rgba(244,63,94,.055); }
.study-question-host { padding: 22px; }
.study-question-card {
position: relative; overflow: hidden; min-height: 420px; padding: 25px 28px 25px 34px;
border: 1px solid var(--border); border-radius: 17px;
background: radial-gradient(circle at 86% -10%, rgba(var(--theme-rgb-2),.13), transparent 31%), linear-gradient(180deg, rgba(23,18,31,.98), rgba(14,11,19,.99));
box-shadow: var(--shadow);
}
.study-question-rail { position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg,#a855f7,var(--purple-2) 70%,rgba(109,40,217,.2)); }
.study-question-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.study-question-number { margin: 21px 0 11px; color: #a99bb4; font-size: .7rem; font-weight: 900; letter-spacing: .13em; }
.study-question-statement { max-width: 1040px; margin: 0; font-size: clamp(1rem, 1.7vw, 1.28rem); line-height: 1.64; white-space: pre-wrap; color: #f0edf4; }
.study-question-meta { margin-top: 10px; color: #a69dac; font-size: .76rem; }
.study-question-visual { margin-top: 17px; }
.study-question-image-wrap { margin: 12px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.02); }
.study-question-image { display: block; max-width: 100%; max-height: 560px; margin: 0 auto; border-radius: 9px; object-fit: contain; cursor: zoom-in; }
.study-question-image:focus-visible { outline: 3px solid rgba(var(--theme-rgb-3), .72); outline-offset: 3px; }
.study-question-image-wrap figcaption { margin-top: 8px; color: var(--muted); font-size: .68rem; text-align: center; }
.study-options { display: grid; gap: 10px; margin-top: 23px; }
.study-answer-option {
position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 14px;
min-height: 62px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 12px;
background: rgba(255,255,255,.018); color: #d8d2de; cursor: pointer; transition: .16s ease;
}
.study-answer-option:hover { border-color: rgba(var(--theme-rgb-3),.3); background: rgba(var(--theme-rgb),.04); }
.study-answer-option input { position: absolute; opacity: 0; pointer-events: none; }
.study-answer-letter {
width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
border: 1px solid var(--border-strong); background: rgba(255,255,255,.035); font-size: .8rem; font-weight: 900;
}
.study-answer-text { min-width: 0; font-size: .9rem; line-height: 1.52; white-space: pre-wrap; }
.study-answer-option.selected { border-color: rgba(var(--theme-rgb-3),.68); background: linear-gradient(90deg,rgba(var(--theme-rgb-2),.13),rgba(255,255,255,.018)); }
.study-answer-option.selected .study-answer-letter { color: #fff; border-color: #c084fc; background: linear-gradient(135deg,#7c3aed,#a855f7); }
.study-answer-option.correct { border-color: rgba(74,222,128,.48); background: rgba(34,197,94,.07); }
.study-answer-option.correct .study-answer-letter { color:#a7f3d0; border-color:rgba(74,222,128,.62); background:rgba(34,197,94,.17); }
.study-answer-option.wrong { border-color: rgba(251,113,133,.5); background: rgba(244,63,94,.065); }
.study-answer-option.wrong .study-answer-letter { color:#fecdd3; border-color:rgba(251,113,133,.65); background:rgba(244,63,94,.16); }
.study-answer-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.study-notes { margin-top: 15px; }
.study-tags { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.study-no-options { margin: 0; padding: 15px; border: 1px dashed var(--border); border-radius: 11px; color: var(--muted); }
@media (max-width: 850px) {
.study-dialog {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: 100dvh;
margin: 0;
border: 0;
border-radius: 0;
}
.study-shell {
height: 100dvh;
max-height: 100dvh;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.study-header { padding: calc(12px + env(safe-area-inset-top, 0px)) 15px 12px; position: static; flex-wrap: wrap; }
.study-header-actions { width: 100%; justify-content: flex-start; }
.study-header-actions .study-close { margin-left: auto; }
.study-navigation { top: 0; grid-template-columns: auto 1fr auto; padding: 10px 12px; gap: 8px; }
.study-session-progress { grid-column: 1 / -1; order: 4; }
.study-page-control { justify-content: center; }
.study-page-control > span:first-child { display: none; }
.study-number-strip { top: 95px; padding: 9px 12px; }
.study-question-host { padding: 12px; }
.study-question-card { padding: 18px 16px 20px 21px; border-radius: 14px; }
.study-question-statement { font-size: 1rem; line-height: 1.58; }
.study-answer-option { grid-template-columns: 40px minmax(0,1fr); min-height: 58px; padding: 9px 11px; gap: 10px; }
.study-answer-letter { width: 36px; height: 36px; }
.study-answer-text { font-size: .84rem; }
}
@media (max-width: 520px) {
.study-title-block h2 { font-size: 1.05rem; }
.study-subtitle { display: none; }
.study-navigation .button { padding-left: 10px; padding-right: 10px; }
.study-page-control input { width: 48px; }
.study-page-control .button { min-width: 42px; padding-left: 8px; padding-right: 8px; }
}
/* v11 — listas inteligentes, pacotes, fila PDF, aleatórias e LaTeX */
.hero-actions,
.list-heading-actions,
.list-detail-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.katex-display {
overflow-x: auto;
overflow-y: hidden;
padding: 4px 0;
scrollbar-width: thin;
}
.question-statement .katex,
.study-question-statement .katex,
.study-answer-text .katex,
.compact-item .katex {
font-size: 1em;
}
.saved-list-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.smart-list-badge,
.manual-list-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 7px;
border-radius: 999px;
font-size: .56rem;
font-weight: 950;
letter-spacing: .06em;
border: 1px solid var(--border);
}
.smart-list-badge {
color: color-mix(in srgb, var(--purple-3) 58%, white);
background: linear-gradient(135deg, rgba(var(--theme-rgb-2),.17), rgba(var(--theme-rgb-3),.07));
border-color: rgba(var(--theme-rgb-3),.28);
}
.manual-list-badge {
color: var(--muted);
background: rgba(255,255,255,.025);
}
.smart-list-rule-summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding: 11px 12px;
border: 1px solid rgba(var(--theme-rgb-3),.2);
border-radius: 12px;
background: rgba(var(--theme-rgb-2),.055);
}
.smart-list-rule-summary strong { color: color-mix(in srgb, var(--purple-3) 58%, white); font-size: .76rem; }
.smart-list-rule-summary span { color: var(--muted); font-size: .7rem; line-height: 1.45; text-align: right; }
.list-builder-dialog {
width: min(1050px, calc(100vw - 24px));
max-height: calc(100dvh - 28px);
padding: 0;
border: 1px solid rgba(var(--theme-rgb-3),.22);
border-radius: 20px;
background: #100d16;
color: var(--text);
box-shadow: 0 32px 110px rgba(0,0,0,.72);
overflow: hidden;
}
.list-builder-form {
max-height: calc(100dvh - 28px);
overflow-y: auto;
overscroll-behavior: contain;
}
.list-builder-top-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 12px;
}
.list-type-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 6px 0 15px;
}
.list-type-option {
position: relative;
margin: 0;
cursor: pointer;
}
.list-type-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.list-type-option > span {
min-height: 82px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 13px 15px;
border: 1px solid var(--border);
border-radius: 13px;
background: rgba(255,255,255,.02);
transition: .15s ease;
}
.list-type-option strong { color: #ddd6e5; font-size: .85rem; }
.list-type-option small { color: var(--muted); line-height: 1.4; }
.list-type-option input:checked + span {
border-color: rgba(var(--theme-rgb-3),.48);
background: linear-gradient(135deg, rgba(var(--theme-rgb-2),.13), rgba(255,255,255,.02));
box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb),.06);
}
.list-builder-section {
padding: 13px;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255,255,255,.015);
}
.list-builder-toolbar,
.smart-list-intro {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.list-builder-toolbar strong,
.smart-list-intro strong { display: block; color: color-mix(in srgb, var(--purple-3) 55%, white); font-size: .82rem; }
.list-builder-toolbar small,
.smart-list-intro small { display: block; margin-top: 3px; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.list-builder-source-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.list-builder-search-label { margin: 12px 0 8px; }
.list-builder-question-preview,
.smart-list-preview {
display: grid;
gap: 7px;
max-height: 410px;
overflow-y: auto;
padding-right: 4px;
overscroll-behavior: contain;
}
.list-builder-question-row {
display: grid;
grid-template-columns: 22px minmax(0,1fr);
align-items: start;
gap: 10px;
margin: 0;
padding: 10px;
border: 1px solid var(--border);
border-radius: 11px;
background: rgba(255,255,255,.018);
cursor: pointer;
}
.list-builder-question-row:hover { border-color: rgba(var(--theme-rgb-3),.27); }
.list-builder-question-row input { width: 18px; min-height: 18px; margin: 2px 0 0; accent-color: var(--purple); }
.list-builder-question-copy { min-width: 0; }
.list-builder-question-copy strong {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: #ddd7e5;
font-size: .76rem;
line-height: 1.45;
}
.list-builder-question-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: .64rem; }
.list-builder-empty {
display: grid;
gap: 4px;
place-items: center;
min-height: 130px;
padding: 20px;
border: 1px dashed var(--border);
border-radius: 12px;
color: var(--muted);
text-align: center;
}
.list-builder-empty strong { color: #d8d1df; }
.smart-rules-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 5px 10px;
margin: 12px 0;
}
.smart-preview-count {
min-height: 32px;
display: inline-flex;
align-items: center;
padding: 0 10px;
border: 1px solid rgba(var(--theme-rgb-3),.22);
border-radius: 999px;
color: color-mix(in srgb, var(--purple-3) 72%, white);
background: rgba(var(--theme-rgb-2),.07);
font-size: .68rem;
font-weight: 850;
}
.pdf-queue {
display: grid;
gap: 7px;
margin-top: 12px;
padding: 9px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(0,0,0,.14);
}
.pdf-queue-item {
display: grid;
grid-template-columns: 30px minmax(0,1fr) auto;
gap: 9px;
align-items: center;
min-height: 46px;
padding: 7px 9px;
border: 1px solid var(--border);
border-radius: 9px;
background: rgba(255,255,255,.018);
}
.pdf-queue-item > div { min-width: 0; }
.pdf-queue-item strong,
.pdf-queue-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-queue-item strong { color: #ddd6e5; font-size: .72rem; }
.pdf-queue-item small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.pdf-queue-item > span:last-child { color: var(--muted-2); font-size: .62rem; }
.pdf-queue-icon {
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 8px;
background: rgba(255,255,255,.035);
font-weight: 900;
}
.pdf-queue-item.processing .pdf-queue-icon { color: color-mix(in srgb, var(--purple-3) 72%, white); animation: j1337-spin 1.2s linear infinite; }
.pdf-queue-item.done .pdf-queue-icon { color: #86efac; background: rgba(34,197,94,.08); }
.pdf-queue-item.error .pdf-queue-icon { color: #fda4af; background: rgba(244,63,94,.08); }
.pdf-ocr-diagnostics { margin-top: 6px; font-size: .7rem; color: var(--muted); }
.pdf-ocr-diagnostics summary { cursor: pointer; padding: 5px 0; color: var(--text); font-weight: 700; white-space: normal; }
.pdf-ocr-diagnostics ul { max-height: 180px; overflow-y: auto; margin: 5px 0; padding-left: 16px; }
.pdf-ocr-diagnostics li { padding: 3px 0; line-height: 1.35; overflow-wrap: anywhere; }
.pdf-ocr-stages { display: block; opacity: .82; }
.pdf-ocr-diagnostics p { margin: 4px 0 0; line-height: 1.4; }
.pdf-ocr-comparison { display: grid; gap: 8px; flex: 1 1 100%; min-width: 0; width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.pdf-ocr-comparison label { display: grid; gap: 5px; min-width: 0; }
.pdf-ocr-comparison input { min-width: 0; max-width: 100%; }
.pdf-ocr-comparison > small { line-height: 1.4; color: var(--muted); }
.pdf-ocr-compare-result { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.pdf-ocr-compare-scroll { max-width: 100%; overflow-x: auto; margin: 7px 0; }
.pdf-ocr-compare-scroll table { border-collapse: collapse; width: 100%; font-size: .72rem; }
.pdf-ocr-compare-scroll th, .pdf-ocr-compare-scroll td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
@keyframes j1337-spin { to { transform: rotate(360deg); } }
.pdf-source-chip {
display: inline-flex;
margin-top: 10px;
padding: 4px 8px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
background: rgba(255,255,255,.02);
font-size: .62rem;
font-weight: 750;
}
@media (max-width: 900px) {
.smart-rules-grid { grid-template-columns: 1fr 1fr; }
.list-builder-top-grid { grid-template-columns: 1fr; }
.list-detail-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 650px) {
.hero-actions, .list-heading-actions { width: 100%; }
.hero-actions > *, .list-heading-actions > * { flex: 1 1 140px; }
.list-type-switch, .smart-rules-grid { grid-template-columns: 1fr; }
.list-builder-dialog {
width: 100vw;
max-height: 100dvh;
height: 100dvh;
margin: 0;
border: 0;
border-radius: 0;
}
.list-builder-form { max-height: 100dvh; }
.list-builder-source-actions { width: 100%; }
.list-builder-source-actions > * { flex: 1 1 130px; }
.smart-list-rule-summary { flex-direction: column; }
.smart-list-rule-summary span { text-align: left; }
}
.math-preview {
margin-top: 9px;
padding: 10px 12px;
border: 1px solid rgba(var(--theme-rgb-3),.2);
border-radius: 11px;
background: rgba(var(--theme-rgb-2),.045);
color: #eee9f5;
line-height: 1.55;
white-space: pre-wrap;
}
.math-preview::before {
content: "PRÉVIA LATEX";
display: block;
margin-bottom: 7px;
color: #a997bd;
font-size: .58rem;
font-weight: 900;
letter-spacing: .12em;
}
.smart-preview-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255,255,255,.016);
}
.smart-preview-row > div { min-width: 0; }
.smart-preview-row strong,
.smart-preview-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-preview-row strong { color: #ddd6e5; font-size: .72rem; }
.smart-preview-row small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.smart-preview-row > span { color: color-mix(in srgb, var(--purple-3) 72%, white); font-weight: 900; }
/* v11.1 — diagnóstico estrutural de alternativas no importador */
.pdf-option-structure {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin: 8px 0 10px;
font-size: .78rem;
color: var(--muted);
}
.pdf-option-structure span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
padding: 4px 7px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,.025);
font-weight: 700;
}
.pdf-option-structure span.ok {
color: #88f0a8;
border-color: rgba(88, 220, 126, .32);
background: rgba(67, 200, 107, .08);
}
.pdf-option-structure span.missing {
color: #e9b0ff;
border-color: rgba(184, 96, 255, .28);
}
.answer-text .katex,
.study-answer-text .katex {
font-size: 1.04em;
}
/* v11.2 — classificador multidisciplinar + detecção de textos-base visuais */
/* v12 — acessibilidade, leitura e amplitude */
:root {
--sidebar-width: 238px;
--reader-font-size: 16px;
}
/* Mais espaço útil para o banco sem eliminar a navegação lateral. */
.sidebar { width: var(--sidebar-width); }
.main { margin-left: var(--sidebar-width); }
.page-wrap {
width: 100%;
max-width: none;
margin: 0;
padding: 24px clamp(14px, 2vw, 28px) 60px;
}
/* Controle de leitura A− / A+. */
.reader-controls {
display: inline-flex;
align-items: center;
gap: 3px;
min-height: 42px;
padding: 3px;
border: 1px solid var(--border);
border-radius: 11px;
background: rgba(255,255,255,.025);
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
flex: 0 0 auto;
}
.reader-font-button {
min-width: 42px;
min-height: 34px;
height: 34px;
padding: 0 9px;
border: 0;
border-radius: 8px;
background: transparent;
color: #e6d9f7;
font-weight: 900;
cursor: pointer;
transition: .15s ease;
}
.reader-font-button:hover:not(:disabled) {
background: rgba(var(--theme-rgb),.13);
color: #fff;
}
.reader-font-button:disabled {
opacity: .34;
cursor: not-allowed;
}
.reader-font-label {
min-width: 43px;
padding: 0 4px;
color: var(--muted);
font-size: .68rem;
font-weight: 850;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* O tamanho é aplicado apenas ao conteúdo de estudo, e não à interface inteira. */
.question-card,
.study-question-card {
font-size: var(--reader-font-size);
}
.question-statement { font-size: .96em; }
.answer-text { font-size: .84em; }
.question-notes { font-size: .84em; }
.study-question-statement {
width: 100%;
max-width: none;
font-size: 1.08em;
line-height: 1.64;
}
.study-answer-text { font-size: .9em; }
.study-notes { font-size: .9em; }
/* Cartões mais amplos e melhor uso da largura do monitor/tablet. */
.question-list { width: 100%; }
.question-card { width: 100%; padding: 21px clamp(18px, 1.8vw, 28px); }
.filters-panel { width: 100%; }
.list-heading { width: 100%; }
/* Sessão / aleatória em modo quase fullscreen, como área de estudo real. */
.study-dialog {
width: calc(100vw - 18px);
max-width: none;
height: calc(100dvh - 18px);
max-height: calc(100dvh - 18px);
margin: auto;
border-radius: 18px;
}
.study-shell {
height: 100%;
max-height: 100%;
scrollbar-gutter: stable;
}
.study-question-host {
width: 100%;
padding: clamp(14px, 1.6vw, 24px);
}
.study-question-card {
width: 100%;
min-height: calc(100dvh - 275px);
padding: clamp(22px, 2vw, 34px) clamp(24px, 2.5vw, 42px);
}
.study-options { width: 100%; }
.study-answer-option { width: 100%; }
.study-reader-controls { min-height: 36px; }
.study-reader-controls .reader-font-button { min-height: 30px; height: 30px; }
/* Em telas muito largas, os filtros passam a aproveitar melhor o espaço. */
@media (min-width: 1500px) {
.filter-row { grid-template-columns: repeat(5, minmax(135px,1fr)); }
.topbar { padding-left: 28px; padding-right: 28px; }
.global-search-wrap { width: min(420px, 30vw); }
}
@media (max-width: 1100px) {
:root { --sidebar-width: 222px; }
.page-wrap { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 860px) {
:root { --sidebar-width: 264px; }
.main { margin-left: 0; }
.study-dialog {
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
.study-question-card {
min-height: 0;
font-size: var(--reader-font-size);
padding: 20px 18px 22px 23px;
}
.study-question-statement { font-size: 1em; line-height: 1.6; }
.study-answer-text { font-size: .88em; }
}
@media (max-width: 650px) {
.topbar-actions {
display: grid;
grid-template-columns: auto minmax(0,1fr);
gap: 9px;
}
.topbar-actions .global-search-wrap { grid-column: 2; width: 100%; }
.topbar-actions > .button { grid-column: 1 / -1; width: 100%; }
.reader-controls { align-self: stretch; }
.reader-font-label { min-width: 38px; }
.question-card { padding: 18px 15px; }
}
@media (max-width: 430px) {
.topbar-actions { grid-template-columns: 1fr; }
.topbar-actions .global-search-wrap,
.topbar-actions > .button,
.topbar-actions .reader-controls { grid-column: 1; width: 100%; }
.reader-controls { justify-content: center; }
.study-header-actions { gap: 6px; }
.study-reader-controls .reader-font-label { display: none; }
}
/* Respeita a preferência do sistema para reduzir animações. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* v12.1 — largura real + sessão compacta */
html, body { max-width: 100%; overflow-x: hidden; }
/* O conteúdo principal passa a ocupar explicitamente TODO o espaço restante da sidebar. */
.main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
max-width: none;
min-width: 0;
}
.page-wrap {
width: auto;
max-width: none;
min-width: 0;
margin: 0;
padding-left: clamp(12px, 1.35vw, 22px);
padding-right: clamp(12px, 1.35vw, 22px);
}
.page-section,
#questionsPage,
#questionList,
.filters-panel,
.list-heading {
width: 100%;
max-width: none;
min-width: 0;
}
#questionsPage > * { max-width: none; }
.question-list { grid-template-columns: minmax(0, 1fr); }
.question-card { max-width: none; }
/* Em desktop, a área de estudo precisa dominar a tela, não a moldura. */
.study-dialog {
width: calc(100vw - 10px);
height: calc(100dvh - 10px);
max-width: none;
max-height: calc(100dvh - 10px);
border-radius: 14px;
}
.study-shell {
height: 100%;
max-height: 100%;
}
.study-header {
padding: 11px 16px 9px;
gap: 12px;
}
.study-title-block h2 { font-size: 1.08rem; }
.study-subtitle { display: none; }
.study-header-actions { gap: 6px; }
.study-header-actions .button.small { min-height: 34px; padding: 6px 10px; }
.study-close { width: 34px; height: 34px; min-height: 34px; }
.study-navigation {
top: 58px;
padding: 7px 16px;
gap: 8px;
min-height: 48px;
}
.study-navigation .button.small { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
.study-page-control input { min-height: 34px; }
.study-number-strip {
top: 106px;
padding: 6px 16px 7px;
gap: 5px;
}
.study-number-button {
min-width: 36px;
height: 32px;
padding: 0 8px;
border-radius: 8px;
}
.study-question-host {
padding: 10px 14px 14px;
}
.study-question-card {
min-height: 0;
padding: 17px 22px 18px 27px;
border-radius: 14px;
}
.study-question-top { gap: 8px; }
.study-question-number { margin: 10px 0 7px; }
.study-question-statement { line-height: 1.48; }
.study-question-meta { margin-top: 6px; }
.study-question-visual { margin-top: 10px; }
.study-question-image-wrap { margin-top: 8px; padding: 8px; }
.study-question-image { max-height: min(42dvh, 430px); }
.study-options { gap: 7px; margin-top: 14px; }
.study-answer-option {
min-height: 48px;
padding: 7px 11px;
gap: 9px;
}
.study-answer-letter { width: 34px; height: 34px; }
.study-answer-text { line-height: 1.38; }
.study-answer-actions { margin-top: 10px; }
.study-tags { margin-top: 11px; padding-top: 9px; }
/* Aleatória: não desperdiça altura com navegação de uma sessão de 1 item. */
.study-dialog.study-kind-random .study-navigation,
.study-dialog.study-kind-random .study-number-strip {
display: none;
}
.study-dialog.study-kind-random .study-question-host {
padding-top: 10px;
}
/* Em tablets/monitores baixos, compacta automaticamente a sessão para caber melhor. */
@media (min-width: 700px) and (max-height: 900px) {
.study-header { padding: 8px 13px 7px; }
.study-title-block h2 { font-size: .98rem; }
.study-eyebrow, .study-header .eyebrow { margin-bottom: 2px; font-size: .6rem; }
.study-reader-controls { min-height: 32px; }
.study-reader-controls .reader-font-button { min-width: 36px; height: 28px; min-height: 28px; }
.study-navigation { top: 48px; min-height: 42px; padding: 5px 13px; }
.study-number-strip { top: 90px; padding: 5px 13px 6px; }
.study-number-button { height: 29px; min-width: 33px; }
.study-question-host { padding: 8px 11px 11px; }
.study-question-card { padding: 13px 18px 14px 23px; }
.study-question-number { margin: 7px 0 5px; }
.study-question-statement { line-height: 1.42; }
.study-options { gap: 5px; margin-top: 10px; }
.study-answer-option { min-height: 42px; padding: 5px 9px; }
.study-answer-letter { width: 30px; height: 30px; }
.study-answer-actions { margin-top: 8px; }
.study-question-image { max-height: min(37dvh, 330px); }
}
@media (max-width: 860px) {
.main { margin-left: 0; width: 100%; }
.page-wrap { padding-left: 10px; padding-right: 10px; }
.study-dialog {
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
.study-header { padding: calc(8px + env(safe-area-inset-top, 0px)) 11px 7px; }
.study-header-actions { width: auto; margin-left: auto; }
.study-header-actions .button.small { min-height: 32px; padding: 5px 8px; }
.study-navigation { top: 0; padding: 6px 9px; }
.study-number-strip { top: 87px; padding: 5px 9px; }
.study-question-host { padding: 7px 8px 10px; }
.study-question-card { padding: 13px 12px 15px 17px; }
.study-question-number { margin: 7px 0 5px; }
.study-options { margin-top: 10px; gap: 6px; }
.study-answer-option { min-height: 45px; padding: 6px 8px; }
}
@media (max-width: 650px) {
.study-header { flex-wrap: nowrap; align-items: center; }
.study-title-block { flex: 1; }
.study-header-actions { flex-wrap: nowrap; }
.study-header-actions #studyCreateListBtn { display: none; }
.study-reader-controls .reader-font-label { display: none; }
.study-reader-controls .reader-font-button { min-width: 34px; }
.study-question-statement { line-height: 1.46; }
.study-answer-text { line-height: 1.34; }
}
/* v12.3 — hotfix de leitura, temas e login */
/* A escala de leitura não altera mais cartões do banco, filtros ou demais blocos.
Ela fica restrita ao modo de estudo (listas e questão aleatória). */
.question-card { font-size: 1rem; }
.question-card .question-statement { font-size: .96rem; }
/* Leitura dos enunciados: h3 vinha herdando um peso de título (700+),
deixando letras e acentos visualmente pesados em telas móveis. O enunciado
continua destacado pelo tamanho, contraste e espaçamento, não pelo negrito. */
.question-card .question-statement,
.study-question-statement {
font-weight: 560;
letter-spacing: -.006em;
line-height: 1.58;
}
.question-card .question-statement .katex,
.study-question-statement .katex { font-weight: 400; }
/* Enunciados importados: quebras semânticas ficam visíveis, mas linhas longas
podem ser reorganizadas pelo navegador em vez de atravessar o cartão. */
.question-card .question-statement,
.study-question-statement {
white-space: pre-line;
text-wrap: pretty;
overflow-wrap: anywhere;
hyphens: none;
}
/* O editor de questões também participa da paleta adaptativa. Antes ele usava
#100d16 fixo e ficava roxo/escuro mesmo quando o wallpaper mudava a superfície. */
.modal-dialog,
.small-dialog {
background: color-mix(in srgb, var(--surface-2) 96%, rgb(var(--theme-rgb)) 4%);
border-color: color-mix(in srgb, var(--border) 72%, rgb(var(--theme-rgb-3)) 28%);
}
.modal-dialog label,
.small-dialog label { color: var(--muted); }
.modal-dialog input,
.modal-dialog select,
.modal-dialog textarea,
.small-dialog input,
.small-dialog select,
.small-dialog textarea {
background: color-mix(in srgb, var(--surface-3) 86%, transparent);
color: var(--text);
border-color: color-mix(in srgb, var(--border) 78%, rgb(var(--theme-rgb-3)) 22%);
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .modal-dialog,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .small-dialog {
background:
radial-gradient(circle at 92% 0%, rgba(var(--wallpaper-surface-light-rgb, var(--theme-rgb-3)), .10), transparent 40%),
color-mix(in srgb, var(--surface-2) 94%, transparent);
backdrop-filter: blur(12px) saturate(1.04);
-webkit-backdrop-filter: blur(12px) saturate(1.04);
}
.question-card .answer-text { font-size: .84rem; }
.question-card .question-notes { font-size: .84rem; }
.study-question-card { font-size: var(--reader-font-size); }
/* Temas. Mantemos os nomes antigos das variáveis como aliases para preservar compatibilidade. */
:root,
:root[data-theme="purple"] {
--theme-rgb: 155, 92, 255;
--theme-rgb-2: 111, 60, 255;
--theme-rgb-3: 192, 132, 252;
--purple: #9b5cff;
--purple-2: #6f3cff;
--purple-3: #c084fc;
--theme-deep: #4c1d95;
--theme-glow: rgba(124,58,237,.28);
}
:root[data-theme="red"] {
--theme-rgb: 244, 63, 94;
--theme-rgb-2: 190, 24, 60;
--theme-rgb-3: 251, 113, 133;
--purple: #f43f5e;
--purple-2: #be123c;
--purple-3: #fb7185;
--theme-deep: #881337;
--theme-glow: rgba(225,29,72,.28);
}
:root[data-theme="blue"] {
--theme-rgb: 59, 130, 246;
--theme-rgb-2: 37, 99, 235;
--theme-rgb-3: 96, 165, 250;
--purple: #3b82f6;
--purple-2: #2563eb;
--purple-3: #60a5fa;
--theme-deep: #1e3a8a;
--theme-glow: rgba(37,99,235,.28);
}
/* Fundos e acentos que antes possuíam roxo fixo. */
body {
background:
radial-gradient(circle at 75% -10%, rgba(var(--theme-rgb-2), .17), transparent 36%),
radial-gradient(circle at 15% 85%, rgba(var(--theme-rgb), .12), transparent 36%),
var(--bg-0);
}
.auth-screen {
background:
linear-gradient(135deg, rgba(8,7,13,.86), rgba(15,8,26,.9)),
radial-gradient(circle at 72% 20%, rgba(var(--theme-rgb), .23), transparent 35%),
radial-gradient(circle at 20% 80%, rgba(var(--theme-rgb-2), .17), transparent 35%);
}
.orb-one { background: rgb(var(--theme-rgb-2)); }
.orb-two { background: rgb(var(--theme-rgb)); }
.brand-mark {
background: linear-gradient(135deg, var(--purple), var(--purple-2) 55%, var(--theme-deep));
box-shadow: 0 8px 24px var(--theme-glow);
}
.auth-tab.active {
background: linear-gradient(135deg, rgba(var(--theme-rgb), .28), rgba(var(--theme-rgb-2), .18));
box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb-3), .2);
}
.nav-count,
.pdf-question-number {
background: rgba(var(--theme-rgb), .13);
color: color-mix(in srgb, var(--purple-3) 82%, white);
}
.badge.purple,
.empty-icon {
background: rgba(var(--theme-rgb), .10);
border-color: rgba(var(--theme-rgb-3), .18);
color: color-mix(in srgb, var(--purple-3) 80%, white);
}
.reader-font-button:hover:not(:disabled) { background: rgba(var(--theme-rgb), .13); }
.question-notes { background: linear-gradient(90deg, rgba(var(--theme-rgb-2), .10), rgba(255,255,255,.02)); }
.metric-card.accent-card { background: linear-gradient(145deg, rgba(var(--theme-rgb-2), .40), rgba(25,18,37,.95)); border-color: rgba(var(--theme-rgb-3), .24); }
/* Seletor de tema */
.theme-choices {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.theme-choice {
min-height: 84px;
display: grid;
grid-template-columns: 28px 1fr;
grid-template-rows: auto auto;
gap: 2px 10px;
align-items: center;
text-align: left;
padding: 13px;
border: 1px solid var(--border);
border-radius: 13px;
background: rgba(255,255,255,.025);
color: var(--text);
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.theme-choice:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.theme-choice.active {
border-color: rgba(var(--theme-rgb-3), .48);
background: rgba(var(--theme-rgb), .09);
box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb), .08);
}
.theme-choice strong { align-self: end; font-size: .82rem; }
.theme-choice small { grid-column: 2; align-self: start; color: var(--muted); font-size: .67rem; }
.theme-swatch {
grid-row: 1 / span 2;
width: 28px;
height: 28px;
border-radius: 9px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 16px rgba(0,0,0,.22);
}
.purple-swatch { background: linear-gradient(135deg, #c084fc, #6f3cff); }
.red-swatch { background: linear-gradient(135deg, #fb7185, #be123c); }
.blue-swatch { background: linear-gradient(135deg, #60a5fa, #2563eb); }
/* Troca rápida de tema também no login. */
.auth-theme-mini {
position: absolute;
top: 27px;
right: 27px;
display: inline-flex;
align-items: center;
gap: 7px;
z-index: 3;
}
.auth-theme-mini > span { color: var(--muted-2); font-size: .62rem; font-weight: 800; margin-right: 2px; }
.auth-theme-dot {
width: 17px;
height: 17px;
min-height: 17px;
padding: 0;
border: 2px solid rgba(255,255,255,.16);
border-radius: 999px;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0,0,0,.24);
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auth-theme-dot:hover { transform: scale(1.12); }
.auth-theme-dot[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .18), 0 3px 10px rgba(0,0,0,.24); }
.purple-dot { background: #9b5cff; }
.red-dot { background: #f43f5e; }
.blue-dot { background: #3b82f6; }
/* Login com movimento discreto: não interfere na digitação nem no desempenho. */
.auth-card {
animation: auth-card-enter .55s cubic-bezier(.2,.75,.25,1) both;
overflow: hidden;
}
.auth-card::before {
content: "";
position: absolute;
inset: 0 auto auto -36%;
width: 34%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--theme-rgb-3), .9), transparent);
filter: drop-shadow(0 0 8px rgba(var(--theme-rgb), .75));
opacity: .65;
pointer-events: none;
animation: auth-scan 5.5s ease-in-out 1s infinite;
}
.orb-one { animation: auth-orb-one 11s ease-in-out infinite alternate; }
.orb-two { animation: auth-orb-two 13s ease-in-out infinite alternate; }
.brand-auth .brand-mark { animation: auth-logo-breathe 3.6s ease-in-out infinite; }
@keyframes auth-card-enter {
from { opacity: 0; transform: translateY(12px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-scan {
0%, 18% { left: -36%; opacity: 0; }
28% { opacity: .65; }
58% { left: 102%; opacity: .5; }
70%, 100% { left: 102%; opacity: 0; }
}
@keyframes auth-orb-one {
from { transform: translate3d(-12px, -8px, 0) scale(.96); }
to { transform: translate3d(24px, 20px, 0) scale(1.08); }
}
@keyframes auth-orb-two {
from { transform: translate3d(10px, 10px, 0) scale(1.04); }
to { transform: translate3d(-24px, -16px, 0) scale(.94); }
}
@keyframes auth-logo-breathe {
0%, 100% { transform: translateY(0); box-shadow: 0 8px 24px var(--theme-glow); }
50% { transform: translateY(-2px); box-shadow: 0 12px 30px var(--theme-glow); }
}
@media (max-width: 620px) {
.auth-theme-mini { top: 22px; right: 20px; }
.auth-theme-mini > span { display: none; }
.theme-choices { grid-template-columns: 1fr; }
.theme-choice { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.auth-card,
.auth-card::before,
.orb-one,
.orb-two,
.brand-auth .brand-mark { animation: none !important; }
}
/* v12.4 — dificuldade automática + diagnóstico matemático */
.pdf-difficulty-estimate {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 8px 0 10px;
padding: 8px 10px;
border: 1px solid rgba(var(--theme-rgb-3), .18);
border-radius: 12px;
background: rgba(var(--theme-rgb-2), .055);
color: var(--muted);
font-size: .74rem;
}
.pdf-difficulty-estimate strong { color: var(--text); }
.pdf-difficulty-estimate > span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 3px 8px;
border-radius: 999px;
color: color-mix(in srgb, var(--purple-3) 78%, white);
border: 1px solid rgba(var(--theme-rgb-3), .24);
background: rgba(var(--theme-rgb-2), .08);
font-weight: 900;
}
.pdf-difficulty-estimate small { color: var(--muted); }
.pdf-difficulty-overview {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
font-size: 0.82rem;
color: var(--muted);
}
.pdf-difficulty-overview span {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}
/* =========================
V13 · Performance / Paginação
========================= */
.question-pagination {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 14px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 14px;
background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}
.question-pagination[hidden] { display: none !important; }
.question-pagination-main,
.question-pagination-meta {
display: flex;
align-items: center;
gap: 10px;
}
.question-page-jump,
.question-pagination-meta label {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
color: var(--muted);
font-size: .84rem;
font-weight: 700;
}
.question-page-jump input {
width: 64px;
min-height: 34px;
padding: 5px 8px;
text-align: center;
}
.question-pagination-meta select {
width: 76px;
min-height: 34px;
padding: 5px 8px;
}
#questionRangeLabel {
color: var(--muted);
font-size: .84rem;
}
@media (max-width: 720px) {
.question-pagination {
align-items: stretch;
flex-direction: column;
}
.question-pagination-main,
.question-pagination-meta {
justify-content: space-between;
width: 100%;
}
.question-pagination-main .button { flex: 1 1 auto; }
}
/* =========================
V13.1 · Banco profissional
========================= */
.bank-page {
--bank-filter-width: clamp(285px, 23vw, 352px);
/* Tokens semânticos do workspace: derivam da paleta ativa e também das
superfícies recalculadas pelo wallpaper adaptativo. Assim o Banco não
carrega pressupostos de fundo escuro/roxo próprios. */
--bank-surface-soft: color-mix(in srgb, var(--surface-3) 84%, transparent);
--bank-surface-hover: color-mix(in srgb, var(--surface-3) 78%, rgb(var(--theme-rgb)) 22%);
--bank-accent-fill: color-mix(in srgb, var(--surface-3) 76%, rgb(var(--theme-rgb)) 24%);
--bank-accent-ink: color-mix(in srgb, var(--text) 74%, rgb(var(--theme-rgb-3)) 26%);
--bank-inset-highlight: color-mix(in srgb, var(--text) 5%, transparent);
--bank-shadow: color-mix(in srgb, var(--bg-0) 72%, transparent);
}
.bank-workspace {
display: grid;
grid-template-columns: var(--bank-filter-width) minmax(0, 1fr);
gap: 18px;
align-items: start;
width: 100%;
min-width: 0;
}
.bank-filter-panel {
position: sticky;
top: 92px;
max-height: calc(100dvh - 112px);
overflow: auto;
padding: 16px;
border-radius: 18px;
scrollbar-width: thin;
scrollbar-color: rgba(var(--theme-rgb), .28) transparent;
background:
linear-gradient(180deg, rgba(var(--theme-rgb-2), .055), transparent 28%),
color-mix(in srgb, var(--surface-2) 94%, transparent);
}
.bank-filter-panel::-webkit-scrollbar { width: 6px; }
.bank-filter-panel::-webkit-scrollbar-thumb { background: rgba(var(--theme-rgb), .28); border-radius: 99px; }
.bank-filter-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 2px 2px 13px;
}
.bank-filter-heading h2 { margin: 1px 0 3px; font-size: 1.08rem; }
.bank-filter-help,
.bank-results-subtitle {
margin: 0;
color: var(--muted);
font-size: .76rem;
line-height: 1.45;
}
.bank-jump-results { display: none; }
.bank-filter-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin-bottom: 13px;
padding: 5px;
border: 1px solid var(--border);
border-radius: 13px;
background: var(--bank-surface-soft);
}
.bank-filter-tab {
min-height: 36px;
padding: 7px 8px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: .75rem;
font-weight: 850;
cursor: pointer;
transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.bank-filter-tab:hover { color: var(--text); background: var(--bank-surface-hover); }
.bank-filter-tab.active {
color: var(--bank-accent-ink);
border-color: rgba(var(--theme-rgb-3), .30);
background: var(--bank-accent-fill);
box-shadow: inset 0 1px 0 var(--bank-inset-highlight);
}
.bank-filter-tab:active { transform: translateY(1px); }
.bank-filter-panes { min-height: 162px; }
.bank-filter-pane { display: grid; gap: 11px; }
.bank-filter-pane[hidden] { display: none !important; }
.bank-filter-pane label { margin: 0; font-size: .76rem; }
.bank-filter-pane select,
.bank-filter-pane input { margin-top: 5px; min-height: 42px; }
.bank-year-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
/* Dados reais, não taxonomia decorativa: cada nó vem do resultado compatível. */
.bank-hierarchy { display: grid; gap: 6px; max-height: 268px; overflow: auto; padding: 2px; }
.bank-hierarchy:empty::before { content: "A árvore aparece quando houver questões no banco."; color: var(--muted); font-size: .74rem; }
.bank-hierarchy-subject { border: 1px solid var(--border); border-radius: 11px; background: var(--bank-surface-soft); overflow: hidden; }
.bank-hierarchy-subject summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 7px 9px; cursor: pointer; font-size: .78rem; font-weight: 850; list-style: none; }
.bank-hierarchy-subject summary::-webkit-details-marker { display: none; }
.bank-hierarchy-subject summary::before { content: "›"; color: var(--muted); font-size: 1rem; transition: transform .15s ease; }
.bank-hierarchy-subject[open] summary::before { transform: rotate(90deg); }
.bank-hierarchy-subject summary span { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-hierarchy b { min-width: 24px; color: var(--muted); text-align: right; font-size: .7rem; font-variant-numeric: tabular-nums; }
.bank-hierarchy-topics { display: grid; gap: 2px; padding: 0 6px 7px 17px; }
.bank-hierarchy-topic, .bank-hierarchy-section { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 5px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: .73rem; text-align: left; cursor: pointer; }
.bank-hierarchy-topic:hover, .bank-hierarchy-section:hover, .bank-hierarchy-topic:focus-visible, .bank-hierarchy-section:focus-visible { background: rgba(var(--theme-rgb), .12); outline: none; }
.bank-hierarchy-topic span, .bank-hierarchy-section span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-hierarchy-topic b, .bank-hierarchy-section b { margin-left: auto; }
.bank-hierarchy-section { min-height: 27px; padding-left: 14px; color: var(--muted); font-size: .69rem; }
.bank-filter-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
padding: 11px 2px 8px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: .75rem;
font-weight: 800;
}
.bank-filter-summary strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 8px;
border: 1px solid rgba(var(--theme-rgb-3), .22);
border-radius: 999px;
color: var(--bank-accent-ink);
background: rgba(var(--theme-rgb), .08);
font-variant-numeric: tabular-nums;
}
.bank-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 34px;
max-height: 132px;
overflow: auto;
padding: 3px 0 8px;
}
.bank-filter-chips:empty::before {
content: "Nenhum filtro aplicado";
color: var(--muted);
font-size: .72rem;
opacity: .75;
}
.bank-filter-chips .filter-chip { font-size: .7rem; }
.bank-filter-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 9px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.bank-filter-actions #clearFiltersBtn { grid-column: 1 / -1; }
.bank-filter-actions .button { width: 100%; min-height: 36px; padding-inline: 8px; }
.bank-results-shell {
min-width: 0;
width: 100%;
}
.bank-results-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 11px;
padding: 15px 17px;
border: 1px solid var(--border);
border-radius: 18px;
background:
radial-gradient(circle at 86% 0%, rgba(var(--theme-rgb), .105), transparent 35%),
color-mix(in srgb, var(--surface-2) 93%, transparent);
box-shadow: inset 0 1px 0 var(--bank-inset-highlight);
}
.bank-results-copy { min-width: 0; }
.bank-results-title-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 1px 0 3px;
}
.bank-results-title-row h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.015em; }
.bank-results-status {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 3px 9px;
border: 1px solid rgba(var(--theme-rgb-3), .22);
border-radius: 999px;
color: var(--bank-accent-ink);
background: rgba(var(--theme-rgb), .07);
font-size: .68rem;
font-weight: 850;
}
.bank-results-actions { flex: 0 0 auto; }
.bank-results-actions .button { min-height: 40px; }
.bank-pagination {
margin-bottom: 11px;
border-radius: 14px;
background: var(--bank-surface-soft);
box-shadow: none;
}
.bank-bulk-toolbar { margin: 0 0 11px; border-radius: 16px; }
.bank-question-list { gap: 10px; }
.bank-question-list .question-card {
border-radius: 15px;
box-shadow: 0 7px 24px color-mix(in srgb, var(--bank-shadow) 58%, transparent);
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.bank-question-list .question-card:hover {
transform: translateY(-1px);
box-shadow: 0 10px 28px color-mix(in srgb, var(--bank-shadow) 72%, transparent);
}
/* Evita que regras antigas imponham a grade de filtros no novo banco. */
.bank-page .filters-panel,
.bank-page .filter-row,
.bank-page .filter-footer { display: initial; }
@media (min-width: 1500px) {
.bank-page { --bank-filter-width: clamp(320px, 21vw, 390px); }
.bank-workspace { gap: 22px; }
}
@media (max-width: 1120px) {
.bank-page { --bank-filter-width: 292px; }
.bank-workspace { gap: 13px; }
.bank-filter-panel { padding: 13px; }
.bank-results-toolbar { padding: 13px 14px; }
.bank-results-subtitle { display: none; }
}
@media (max-width: 900px) {
.bank-workspace { grid-template-columns: 1fr; }
.bank-filter-panel {
position: static;
max-height: none;
overflow: visible;
}
.bank-filter-heading { align-items: center; }
.bank-jump-results { display: inline-flex; }
.bank-filter-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bank-filter-panes { min-height: 0; }
.bank-filter-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bank-filter-pane[data-bank-filter-pane="performance"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bank-hierarchy { grid-column: 1 / -1; max-height: 220px; }
.bank-filter-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bank-filter-actions #clearFiltersBtn { grid-column: auto; }
}
@media (max-width: 650px) {
.bank-filter-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bank-filter-pane,
.bank-filter-pane[data-bank-filter-pane="performance"] { grid-template-columns: 1fr; }
.bank-filter-actions { grid-template-columns: 1fr; }
.bank-hierarchy { max-height: 210px; }
.bank-results-toolbar { align-items: stretch; flex-direction: column; }
.bank-results-actions { width: 100%; }
.bank-results-actions .button { flex: 1 1 0; }
.bank-results-status { display: none; }
}
@media (max-width: 430px) {
.bank-year-grid { grid-template-columns: 1fr; }
.bank-filter-heading { align-items: flex-start; }
.bank-jump-results { min-width: auto; }
.bank-results-actions { display: grid; grid-template-columns: 1fr; }
}
/* =========================================================
V13.2 · filtros reais, duplicatas e avisos recolhíveis
========================================================= */
.bank-filter-actions #detectDuplicatesBtn {
grid-column: 1 / -1;
}
#toggleImportWarningsBtn.active,
#studyToggleWarningsBtn.active {
border-color: rgba(var(--theme-rgb-3), .34);
background: rgba(var(--theme-rgb), .08);
color: color-mix(in srgb, var(--purple-3) 70%, white);
}
#toggleImportWarningsBtn {
min-height: 36px;
white-space: nowrap;
}
@media (max-width: 1050px) {
.bank-results-actions #toggleImportWarningsBtn {
flex: 1 1 auto;
}
}
@media (max-width: 650px) {
.bank-filter-actions #detectDuplicatesBtn { grid-column: auto; }
#toggleImportWarningsBtn { width: 100%; }
}
/* v13.2.1 — identidade Gepetinho, foto de perfil e temas claros */
.profile-avatar,
.settings-avatar {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.profile-avatar.has-profile-photo,
.settings-avatar.has-profile-photo {
color: transparent;
background-color: var(--surface-2);
border-color: color-mix(in srgb, var(--purple) 42%, var(--border));
}
.avatar-upload-button {
padding: 0;
cursor: pointer;
overflow: hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.avatar-upload-button:hover {
transform: translateY(-1px);
border-color: var(--purple-3);
box-shadow: 0 8px 24px rgba(var(--theme-rgb), .16);
}
.settings-profile-copy { min-width: 0; flex: 1; }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.profile-photo-hint { display: block; margin-top: 7px; line-height: 1.4; }
/* Mais opções de tema sem apertar os cards. */
.theme-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.purple-light-swatch { background: linear-gradient(135deg, #ede9fe, #a78bfa); }
.red-light-swatch { background: linear-gradient(135deg, #ffe4e6, #fb7185); }
.blue-light-swatch { background: linear-gradient(135deg, #dbeafe, #60a5fa); }
.purple-light-dot { background: #ddd6fe; border-color: rgba(111,60,255,.35); }
.red-light-dot { background: #ffe4e6; border-color: rgba(190,24,60,.35); }
.blue-light-dot { background: #dbeafe; border-color: rgba(37,99,235,.35); }
.auth-theme-mini { max-width: 210px; flex-wrap: wrap; justify-content: flex-end; }
:root[data-theme="purple-light"] {
color-scheme: light;
--theme-rgb: 124, 58, 237;
--theme-rgb-2: 109, 40, 217;
--theme-rgb-3: 139, 92, 246;
--purple: #7c3aed;
--purple-2: #6d28d9;
--purple-3: #8b5cf6;
--theme-deep: #5b21b6;
--theme-glow: rgba(124,58,237,.16);
--bg-0: #f7f5fb;
--bg-1: #f1eef8;
--bg-2: #ebe7f4;
--surface: rgba(255,255,255,.94);
--surface-2: rgba(250,248,255,.97);
--surface-3: rgba(244,240,252,.96);
--text: #211a2d;
--muted: #6d6478;
--muted-2: #8b8394;
--border: rgba(47,35,62,.11);
--border-strong: rgba(124,58,237,.28);
--shadow: 0 18px 48px rgba(46,34,62,.10);
}
:root[data-theme="red-light"] {
color-scheme: light;
--theme-rgb: 225, 29, 72;
--theme-rgb-2: 190, 24, 60;
--theme-rgb-3: 244, 63, 94;
--purple: #e11d48;
--purple-2: #be123c;
--purple-3: #f43f5e;
--theme-deep: #9f1239;
--theme-glow: rgba(225,29,72,.15);
--bg-0: #fff7f8;
--bg-1: #fff1f3;
--bg-2: #ffe9ed;
--surface: rgba(255,255,255,.95);
--surface-2: rgba(255,250,251,.98);
--surface-3: rgba(255,243,245,.97);
--text: #2b171c;
--muted: #755d63;
--muted-2: #927b81;
--border: rgba(73,37,47,.11);
--border-strong: rgba(225,29,72,.26);
--shadow: 0 18px 48px rgba(75,31,43,.10);
}
:root[data-theme="blue-light"] {
color-scheme: light;
--theme-rgb: 37, 99, 235;
--theme-rgb-2: 29, 78, 216;
--theme-rgb-3: 59, 130, 246;
--purple: #2563eb;
--purple-2: #1d4ed8;
--purple-3: #3b82f6;
--theme-deep: #1e40af;
--theme-glow: rgba(37,99,235,.15);
--bg-0: #f6f9ff;
--bg-1: #eef4ff;
--bg-2: #e7effd;
--surface: rgba(255,255,255,.95);
--surface-2: rgba(249,252,255,.98);
--surface-3: rgba(240,246,255,.97);
--text: #172033;
--muted: #5d687a;
--muted-2: #7b8696;
--border: rgba(27,47,78,.11);
--border-strong: rgba(37,99,235,.25);
--shadow: 0 18px 48px rgba(32,54,88,.10);
}
:root[data-theme$="-light"] body {
background:
radial-gradient(circle at 78% -8%, rgba(var(--theme-rgb), .10), transparent 34%),
radial-gradient(circle at 12% 88%, rgba(var(--theme-rgb-2), .06), transparent 34%),
var(--bg-0);
}
:root[data-theme$="-light"] .auth-screen {
background:
linear-gradient(135deg, rgba(255,255,255,.75), rgba(247,248,252,.88)),
radial-gradient(circle at 72% 20%, rgba(var(--theme-rgb), .13), transparent 35%),
radial-gradient(circle at 20% 80%, rgba(var(--theme-rgb-2), .08), transparent 35%);
}
:root[data-theme$="-light"] .auth-card,
:root[data-theme$="-light"] .sidebar,
:root[data-theme$="-light"] .topbar,
:root[data-theme$="-light"] .panel,
:root[data-theme$="-light"] .question-card,
:root[data-theme$="-light"] .metric-card,
:root[data-theme$="-light"] .list-card,
:root[data-theme$="-light"] .study-shell,
:root[data-theme$="-light"] dialog,
:root[data-theme$="-light"] .bank-filter-panel,
:root[data-theme$="-light"] .bank-results-head,
:root[data-theme$="-light"] .question-pagination {
color: var(--text);
border-color: var(--border);
}
:root[data-theme$="-light"] .auth-card { background: rgba(255,255,255,.88); box-shadow: 0 28px 75px rgba(45,36,62,.14); }
:root[data-theme$="-light"] .sidebar { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,245,251,.98)); }
:root[data-theme$="-light"] .topbar { background: rgba(249,248,252,.88); }
:root[data-theme$="-light"] .panel,
:root[data-theme$="-light"] .question-card,
:root[data-theme$="-light"] .metric-card,
:root[data-theme$="-light"] .list-card,
:root[data-theme$="-light"] .study-shell,
:root[data-theme$="-light"] .bank-filter-panel,
:root[data-theme$="-light"] .bank-results-head,
:root[data-theme$="-light"] .question-pagination { background: var(--surface); box-shadow: var(--shadow); }
:root[data-theme$="-light"] .profile-card,
:root[data-theme$="-light"] .nav-group,
:root[data-theme$="-light"] .auth-tabs,
:root[data-theme$="-light"] .global-search-wrap,
:root[data-theme$="-light"] .filter-tabs,
:root[data-theme$="-light"] .answer-option,
:root[data-theme$="-light"] .study-answer-option,
:root[data-theme$="-light"] .storage-status,
:root[data-theme$="-light"] .pdf-review-item,
:root[data-theme$="-light"] .active-filter-chip {
background: rgba(39,32,48,.035);
border-color: var(--border);
}
:root[data-theme$="-light"] input,
:root[data-theme$="-light"] select,
:root[data-theme$="-light"] textarea {
background: rgba(255,255,255,.90);
color: var(--text);
border-color: var(--border);
}
:root[data-theme$="-light"] input::placeholder,
:root[data-theme$="-light"] textarea::placeholder { color: #9991a3; }
:root[data-theme$="-light"] .nav-item,
:root[data-theme$="-light"] .nav-subitem { color: #61586c; }
:root[data-theme$="-light"] .nav-item:hover,
:root[data-theme$="-light"] .nav-subitem:hover { color: var(--text); background: rgba(var(--theme-rgb),.06); }
:root[data-theme$="-light"] .nav-group-title { color: #352c40; }
:root[data-theme$="-light"] .button.secondary,
:root[data-theme$="-light"] .button.ghost,
:root[data-theme$="-light"] .icon-button,
:root[data-theme$="-light"] .reader-font-button { background: rgba(255,255,255,.72); color: var(--text); border-color: var(--border); }
:root[data-theme$="-light"] .question-statement,
:root[data-theme$="-light"] .answer-text,
:root[data-theme$="-light"] .study-question-card,
:root[data-theme$="-light"] .study-answer-option { color: var(--text); }
:root[data-theme$="-light"] .question-notes { background: linear-gradient(90deg, rgba(var(--theme-rgb), .07), rgba(255,255,255,.7)); }
:root[data-theme$="-light"] .auth-tab.active { color: var(--text); }
:root[data-theme$="-light"] .badge { color: #4c4257; }
:root[data-theme$="-light"] .profile-avatar { background-color: #f2eef7; }
:root[data-theme$="-light"] .settings-avatar { background-color: #f0ebf7; }
:root[data-theme$="-light"] .modal-backdrop,
:root[data-theme$="-light"] dialog::backdrop { background: rgba(30,24,38,.34); }
@media (max-width: 760px) {
.theme-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-theme-mini { top: 20px; right: 20px; max-width: 135px; }
}
/* v13.4 — login mais clean, hero temático e microanimações leves */
/* Gaveta de temas no login: mantém os seis temas disponíveis sem poluir o topo. */
.auth-theme-drawer {
position: absolute;
top: 22px;
right: 22px;
z-index: 8;
}
.auth-theme-trigger {
list-style: none;
display: inline-grid;
grid-template-columns: 19px auto 14px;
align-items: center;
gap: 8px;
min-width: 118px;
padding: 7px 9px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
background: rgba(255,255,255,.045);
color: var(--text);
cursor: pointer;
user-select: none;
transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.auth-theme-trigger::-webkit-details-marker { display: none; }
.auth-theme-trigger:hover {
transform: translateY(-1px);
border-color: rgba(var(--theme-rgb-3), .26);
background: rgba(var(--theme-rgb), .08);
}
.auth-theme-drawer[open] .auth-theme-trigger {
border-color: rgba(var(--theme-rgb-3), .32);
background: rgba(var(--theme-rgb), .10);
box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.auth-theme-current-swatch,
.auth-theme-swatch {
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,.30);
box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.auth-theme-current-swatch[data-current-theme="purple"] { background: #9b5cff; }
.auth-theme-current-swatch[data-current-theme="red"] { background: #f43f5e; }
.auth-theme-current-swatch[data-current-theme="blue"] { background: #3b82f6; }
.auth-theme-current-swatch[data-current-theme="purple-light"] { background: #ddd6fe; border-color: rgba(111,60,255,.38); }
.auth-theme-current-swatch[data-current-theme="red-light"] { background: #ffe4e6; border-color: rgba(190,24,60,.38); }
.auth-theme-current-swatch[data-current-theme="blue-light"] { background: #dbeafe; border-color: rgba(37,99,235,.38); }
.auth-theme-trigger-copy { display: grid; gap: 0; line-height: 1.08; text-align: left; }
.auth-theme-trigger-copy small { color: var(--muted-2); font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.auth-theme-trigger-copy strong { margin-top: 2px; font-size: .72rem; font-weight: 850; }
.auth-theme-chevron { color: var(--muted); font-size: .84rem; transition: transform .18s ease; }
.auth-theme-drawer[open] .auth-theme-chevron { transform: rotate(180deg); }
.auth-theme-panel {
position: absolute;
top: calc(100% + 9px);
right: 0;
width: 250px;
padding: 12px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 15px;
background: color-mix(in srgb, var(--surface) 94%, transparent);
box-shadow: 0 20px 55px rgba(0,0,0,.34);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
animation: auth-theme-drawer-in .18s ease-out both;
}
.auth-theme-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.auth-theme-panel-head strong { font-size: .76rem; }
.auth-theme-panel-head span { color: var(--muted-2); font-size: .61rem; }
.auth-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.auth-theme-option {
min-height: 38px;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border: 1px solid var(--border);
border-radius: 10px;
background: rgba(255,255,255,.035);
color: var(--text);
cursor: pointer;
font-size: .67rem;
font-weight: 800;
text-align: left;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.auth-theme-option:hover { transform: translateY(-1px); background: rgba(var(--theme-rgb), .07); }
.auth-theme-option[aria-pressed="true"] {
border-color: rgba(var(--theme-rgb-3), .44);
background: rgba(var(--theme-rgb), .11);
box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb-3), .08);
}
.auth-theme-swatch { flex: 0 0 auto; width: 14px; height: 14px; }
/* Login: animações com transform/opacity para permanecer leve em celular/tablet. */
.auth-screen::before {
content: "";
position: absolute;
inset: -12%;
pointer-events: none;
opacity: .12;
background-image:
linear-gradient(rgba(var(--theme-rgb), .10) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--theme-rgb), .10) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: radial-gradient(circle at center, #000 18%, transparent 72%);
-webkit-mask-image: radial-gradient(circle at center, #000 18%, transparent 72%);
animation: auth-grid-drift 20s linear infinite;
will-change: transform;
}
.auth-orb {
opacity: .26;
filter: blur(68px);
will-change: transform;
}
.auth-card {
animation-duration: .66s;
animation-timing-function: cubic-bezier(.18,.72,.24,1);
}
.auth-card::before {
height: 1px;
opacity: .48;
animation-duration: 8.5s;
}
.brand-auth,
.auth-copy,
.auth-tabs,
.auth-form,
.auth-note {
animation: auth-content-rise .52s cubic-bezier(.2,.72,.25,1) both;
}
.brand-auth { animation-delay: .08s; }
.auth-copy { animation-delay: .14s; }
.auth-tabs { animation-delay: .20s; }
.auth-form { animation-delay: .25s; }
.auth-note { animation-delay: .31s; }
.brand-auth .brand-mark { animation-duration: 5.2s; }
.orb-one { animation-duration: 15s; }
.orb-two { animation-duration: 18s; }
@keyframes auth-theme-drawer-in {
from { opacity: 0; transform: translateY(-5px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-grid-drift {
from { transform: translate3d(-16px, -10px, 0); }
to { transform: translate3d(38px, 44px, 0); }
}
@keyframes auth-content-rise {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hero do dashboard: cores passam a vir do tema, inclusive nos temas claros. */
:root,
:root[data-theme="purple"] {
--hero-start: #3b176a;
--hero-mid: #6f3cff;
--hero-end: #4a1b86;
--hero-glow: rgba(232,121,249,.24);
--hero-ring: rgba(255,255,255,.065);
--hero-text: #ffffff;
--hero-muted: rgba(255,255,255,.76);
--hero-action-bg: rgba(255,255,255,.10);
--hero-action-border: rgba(255,255,255,.13);
--hero-light-bg: #ffffff;
--hero-light-text: #160f24;
}
:root[data-theme="red"] {
--hero-start: #581126;
--hero-mid: #d71f4d;
--hero-end: #78152e;
--hero-glow: rgba(251,113,133,.25);
--hero-ring: rgba(255,255,255,.06);
--hero-text: #ffffff;
--hero-muted: rgba(255,245,247,.78);
--hero-action-bg: rgba(255,255,255,.10);
--hero-action-border: rgba(255,255,255,.13);
--hero-light-bg: #fff7f8;
--hero-light-text: #3f1020;
}
:root[data-theme="blue"] {
--hero-start: #0c3264;
--hero-mid: #2563eb;
--hero-end: #123d78;
--hero-glow: rgba(96,165,250,.25);
--hero-ring: rgba(255,255,255,.06);
--hero-text: #ffffff;
--hero-muted: rgba(244,249,255,.78);
--hero-action-bg: rgba(255,255,255,.10);
--hero-action-border: rgba(255,255,255,.13);
--hero-light-bg: #f5f9ff;
--hero-light-text: #10284c;
}
:root[data-theme="purple-light"] {
--hero-start: #ede9fe;
--hero-mid: #ddd6fe;
--hero-end: #f5f3ff;
--hero-glow: rgba(124,58,237,.16);
--hero-ring: rgba(91,33,182,.08);
--hero-text: #29163f;
--hero-muted: rgba(67,45,86,.72);
--hero-action-bg: rgba(255,255,255,.56);
--hero-action-border: rgba(91,33,182,.13);
--hero-light-bg: #ffffff;
--hero-light-text: #29163f;
}
:root[data-theme="red-light"] {
--hero-start: #ffe4e6;
--hero-mid: #fecdd3;
--hero-end: #fff4f5;
--hero-glow: rgba(225,29,72,.14);
--hero-ring: rgba(159,18,57,.08);
--hero-text: #421521;
--hero-muted: rgba(84,39,51,.72);
--hero-action-bg: rgba(255,255,255,.58);
--hero-action-border: rgba(159,18,57,.13);
--hero-light-bg: #ffffff;
--hero-light-text: #421521;
}
:root[data-theme="blue-light"] {
--hero-start: #dbeafe;
--hero-mid: #c7ddff;
--hero-end: #f1f6ff;
--hero-glow: rgba(37,99,235,.14);
--hero-ring: rgba(30,64,175,.08);
--hero-text: #142b4c;
--hero-muted: rgba(39,66,101,.72);
--hero-action-bg: rgba(255,255,255,.60);
--hero-action-border: rgba(30,64,175,.13);
--hero-light-bg: #ffffff;
--hero-light-text: #142b4c;
}
.hero-card {
isolation: isolate;
color: var(--hero-text);
border-color: color-mix(in srgb, var(--hero-action-border) 78%, var(--border));
background:
radial-gradient(circle at 82% 18%, var(--hero-glow), transparent 28%),
linear-gradient(125deg, var(--hero-start) 0%, var(--hero-mid) 56%, var(--hero-end) 100%);
}
.hero-card::before {
content: "";
position: absolute;
width: 360px;
height: 360px;
left: 38%;
top: -235px;
border-radius: 999px;
background: radial-gradient(circle, rgba(255,255,255,.14), transparent 66%);
opacity: .46;
pointer-events: none;
z-index: 0;
animation: hero-ambient-drift 11s ease-in-out infinite alternate;
will-change: transform;
}
.hero-card::after {
border-color: var(--hero-ring);
animation: hero-ring-float 9s ease-in-out infinite alternate;
will-change: transform;
}
.hero-card h2 { color: var(--hero-text); }
.hero-card p:not(.eyebrow),
.hero-card .eyebrow { color: var(--hero-muted); }
.hero-card .button.secondary {
color: var(--hero-text);
background: var(--hero-action-bg);
border-color: var(--hero-action-border);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero-card .button.light {
color: var(--hero-light-text);
background: var(--hero-light-bg);
border-color: rgba(255,255,255,.16);
box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.hero-card.hero-refresh .hero-copy { animation: hero-copy-in .52s cubic-bezier(.2,.72,.25,1) both; }
.hero-card.hero-refresh .hero-actions { animation: hero-actions-in .52s .08s cubic-bezier(.2,.72,.25,1) both; }
@keyframes hero-ambient-drift {
from { transform: translate3d(-20px, 0, 0) scale(.96); }
to { transform: translate3d(38px, 24px, 0) scale(1.08); }
}
@keyframes hero-ring-float {
from { transform: translate3d(0, 0, 0) rotate(-6deg); }
to { transform: translate3d(-18px, -12px, 0) rotate(5deg); }
}
@keyframes hero-copy-in {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-actions-in {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
:root[data-theme$="-light"] .auth-theme-trigger,
:root[data-theme$="-light"] .auth-theme-option {
background: rgba(255,255,255,.70);
border-color: var(--border);
}
:root[data-theme$="-light"] .auth-theme-panel {
background: rgba(255,255,255,.94);
border-color: var(--border);
box-shadow: 0 20px 50px rgba(43,31,57,.16);
}
:root[data-theme$="-light"] .auth-theme-current-swatch,
:root[data-theme$="-light"] .auth-theme-swatch { box-shadow: 0 2px 8px rgba(39,30,51,.12); }
@media (max-width: 620px) {
.auth-theme-drawer { top: 18px; right: 18px; }
.auth-theme-trigger { min-width: auto; grid-template-columns: 18px 14px; padding: 8px; }
.auth-theme-trigger-copy { display: none; }
.auth-theme-panel { width: min(250px, calc(100vw - 54px)); }
.auth-theme-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.auth-screen::before,
.brand-auth,
.auth-copy,
.auth-tabs,
.auth-form,
.auth-note,
.auth-theme-panel,
.hero-card::before,
.hero-card::after,
.hero-card.hero-refresh .hero-copy,
.hero-card.hero-refresh .hero-actions { animation: none !important; }
}
/* =========================================================
v13.4.1 — Hotfix: temas no estudo/PDF + recortes mais seguros
========================================================= */
/* Modo aleatório e listas passam a usar apenas tokens do tema. */
.study-dialog {
background: var(--surface);
color: var(--text);
border-color: color-mix(in srgb, rgb(var(--theme-rgb-3)) 28%, var(--border));
box-shadow: 0 28px 90px color-mix(in srgb, var(--bg-0) 72%, transparent), 0 0 0 1px rgba(var(--theme-rgb), .03);
}
.study-dialog::backdrop {
background: color-mix(in srgb, var(--bg-0) 72%, transparent);
backdrop-filter: blur(7px) saturate(.92);
}
.study-shell {
color: var(--text);
background:
radial-gradient(circle at 92% -5%, rgba(var(--theme-rgb), .09), transparent 28%),
var(--surface);
}
.study-header {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--surface-2) 88%, rgb(var(--theme-rgb)) 12%),
color-mix(in srgb, var(--surface) 96%, rgb(var(--theme-rgb-2)) 4%));
border-color: var(--border);
}
.study-navigation,
.study-number-strip {
background: color-mix(in srgb, var(--surface) 95%, rgb(var(--theme-rgb)) 5%);
border-color: var(--border);
}
.study-progress-track { background: color-mix(in srgb, var(--text) 8%, transparent); }
.study-progress-fill { background: linear-gradient(90deg, var(--purple-2), var(--purple-3)); }
.study-number-button {
color: var(--muted);
background: color-mix(in srgb, var(--surface-3) 86%, transparent);
border-color: var(--border);
}
.study-number-button.active {
color: #fff;
background: linear-gradient(135deg, var(--purple-2), var(--purple));
border-color: rgba(var(--theme-rgb-3), .58);
box-shadow: 0 5px 18px var(--theme-glow);
}
.study-question-card {
color: var(--text);
background:
radial-gradient(circle at 88% -8%, rgba(var(--theme-rgb), .11), transparent 30%),
color-mix(in srgb, var(--surface-2) 97%, rgb(var(--theme-rgb)) 3%);
border-color: var(--border);
box-shadow: var(--shadow);
}
.study-question-rail { background: linear-gradient(180deg, var(--purple-3), var(--purple-2) 72%, rgba(var(--theme-rgb-2), .18)); }
.study-question-number,
.study-question-meta,
.study-question-image-wrap figcaption { color: var(--muted); }
.study-question-statement,
.study-answer-text { color: var(--text); }
.study-question-image-wrap {
background: color-mix(in srgb, var(--surface-3) 82%, transparent);
border-color: var(--border);
}
.study-answer-option {
color: var(--text);
background: color-mix(in srgb, var(--surface-3) 64%, transparent);
border-color: var(--border);
}
.study-answer-option:hover {
background: rgba(var(--theme-rgb), .07);
border-color: rgba(var(--theme-rgb-3), .32);
}
.study-answer-letter {
color: var(--text);
background: color-mix(in srgb, var(--surface-3) 88%, transparent);
border-color: var(--border-strong);
}
/* PDF importer/revisão: remove superfícies escuras fixas e acompanha o tema. */
.pdf-import-panel,
.pdf-review-dialog {
color: var(--text);
}
.pdf-review-dialog {
background:
radial-gradient(circle at 92% -8%, rgba(var(--theme-rgb), .08), transparent 28%),
var(--surface);
border-color: var(--border);
}
.import-summary,
.pdf-review-item,
.pdf-review-visual,
.pdf-queue,
.pdf-queue-item,
.pdf-source-chip,
.pdf-option-structure span,
.pdf-difficulty-overview span {
color: var(--text);
background: color-mix(in srgb, var(--surface-3) 66%, transparent);
border-color: var(--border);
}
.pdf-review-item[open] {
background: color-mix(in srgb, var(--surface-2) 94%, rgb(var(--theme-rgb)) 6%);
border-color: rgba(var(--theme-rgb-3), .30);
}
.pdf-review-title,
.pdf-queue-item strong,
.smart-preview-row strong,
.math-preview { color: var(--text); }
.pdf-review-body { border-color: var(--border); }
.sticky-actions {
background: color-mix(in srgb, var(--surface) 96%, rgb(var(--theme-rgb)) 4%);
border-top: 1px solid var(--border);
}
.pdf-queue { background: color-mix(in srgb, var(--surface-2) 90%, transparent); }
.pdf-queue-icon { background: color-mix(in srgb, var(--surface-3) 84%, transparent); }
.question-image-editor,
.pdf-difficulty-estimate,
.math-preview {
background: color-mix(in srgb, var(--surface-2) 93%, rgb(var(--theme-rgb)) 7%);
}
.question-image-preview { background: color-mix(in srgb, var(--surface-3) 86%, transparent); }
/* Nos temas claros, os estados verde/amarelo/vermelho continuam legíveis. */
:root[data-theme$="-light"] .confidence-high,
:root[data-theme$="-light"] .visual-detected-badge,
:root[data-theme$="-light"] .pdf-option-structure span.ok { color: #16743a; }
:root[data-theme$="-light"] .confidence-medium,
:root[data-theme$="-light"] .pdf-warning-list,
:root[data-theme$="-light"] .import-warning-box,
:root[data-theme$="-light"] .badge.import-alert { color: #8a5a00; }
:root[data-theme$="-light"] .confidence-low { color: #b4233f; }
:root[data-theme$="-light"] .study-dialog::backdrop,
:root[data-theme$="-light"] .pdf-review-dialog::backdrop { background: rgba(32, 27, 40, .34); }
:root[data-theme$="-light"] .study-number-button.active { color: white; }
/* Mantém as imagens originais do PDF neutras, independentemente do tema. */
.study-question-image,
.pdf-review-visual img,
.question-image,
.question-image-preview img { background: #fff; }
/* v14.0.4 — Importador totalmente conectado aos tokens de tema.
Evita variáveis antigas/órfãs e garante atualização imediata em azul, vermelho e temas claros. */
.pdf-import-panel .checkbox-inline input,
.pdf-review-dialog input[type="checkbox"] { accent-color: var(--purple); }
.pdf-import-panel .button.primary,
.pdf-review-dialog .button.primary {
background: linear-gradient(135deg, var(--purple), var(--purple-2));
box-shadow: 0 8px 24px var(--theme-glow);
}
.pdf-import-panel input:focus,
.pdf-import-panel select:focus,
.pdf-review-dialog input:focus,
.pdf-review-dialog select:focus,
.pdf-review-dialog textarea:focus {
border-color: rgba(var(--theme-rgb-3), .70);
box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .11);
}
:root[data-theme$="-light"] .pdf-ocr-advanced {
background: color-mix(in srgb, var(--surface-2) 94%, rgb(var(--theme-rgb)) 6%);
}
:root[data-theme$="-light"] .ocr-confidence-badge,
:root[data-theme$="-light"] .ocr-repair-badge,
:root[data-theme$="-light"] .answer-link-badge {
background: color-mix(in srgb, var(--surface-3) 90%, rgb(var(--theme-rgb)) 10%);
}
/* v14 — OCR avançado */
.pdf-ocr-advanced {
margin-top: 16px;
border: 1px solid var(--border);
border-radius: 18px;
background: color-mix(in srgb, var(--surface-2) 92%, rgb(var(--theme-rgb)) 8%);
overflow: hidden;
}
.pdf-ocr-advanced > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 17px;
font-weight: 800;
}
.pdf-ocr-advanced > summary::-webkit-details-marker { display: none; }
.pdf-ocr-advanced > summary::after { content: "＋"; opacity: .75; font-size: 1.1rem; }
.pdf-ocr-advanced[open] > summary::after { content: "−"; }
.pdf-ocr-advanced > summary small { color: var(--muted); font-weight: 600; }
.pdf-ocr-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 0 17px 16px;
}
.pdf-ocr-grid label { min-width: 0; }
.pdf-ocr-grid .pdf-auto-detect { grid-column: span 2; }
.pdf-ocr-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 0 17px 17px;
}
.pdf-ocr-actions .tiny-note { flex: 1 1 300px; margin: 0; }
.pdf-queue-item .ocr-progress { color: var(--purple-3); font-weight: 800; }
.ocr-confidence-badge,
.ocr-repair-badge,
.answer-link-badge {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 8px;
font-size: .72rem;
font-weight: 800;
color: var(--text);
background: color-mix(in srgb, var(--surface-3) 84%, rgb(var(--theme-rgb)) 16%);
border-color: color-mix(in srgb, var(--border) 72%, rgb(var(--theme-rgb-3)) 28%);
}
@media (max-width: 900px) {
.pdf-ocr-grid { grid-template-columns: 1fr 1fr; }
.pdf-ocr-grid .pdf-auto-detect { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.pdf-ocr-advanced > summary { align-items: flex-start; flex-direction: column; }
.pdf-ocr-grid { grid-template-columns: 1fr; }
.pdf-ocr-grid .pdf-auto-detect { grid-column: auto; }
}
/* v14 — autovalidação estrutural pelo gabarito */
.import-summary-stat.structure-ok {
border-color: rgba(64, 190, 125, .34);
background: rgba(64, 190, 125, .08);
}
.import-summary-stat.structure-warn {
border-color: rgba(234, 179, 73, .38);
background: rgba(234, 179, 73, .10);
}
.pdf-structure-warning {
margin-top: 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(234, 179, 73, .34);
background: rgba(234, 179, 73, .09);
color: var(--text);
font-size: .74rem;
line-height: 1.45;
}
/* =========================================================
v14.0.6 — banco fluido + temas completos em listas/aleatória
========================================================= */
/* Usa de fato todo o viewport restante da sidebar.
width:auto é mais robusto em tablets usando "site para computador" e zoom do navegador
do que calcular 100% menos a sidebar. */
@media (min-width: 861px) {
.main {
margin-left: var(--sidebar-width);
width: auto;
max-width: none;
min-height: 100vh;
}
.topbar,
.page-wrap,
.page-section,
.bank-page,
.bank-workspace,
.bank-results-shell {
width: 100%;
max-width: none;
min-width: 0;
}
.page-wrap { margin-inline: 0; }
}
/* Em telas largas o em tablets com viewport desktop, os filtros não crescem mais
do que precisam; o ganho vai diretamente para o enunciado e alternativas. */
@media (min-width: 1280px) {
.bank-page { --bank-filter-width: clamp(270px, 17vw, 330px); }
.bank-workspace { gap: clamp(14px, 1.15vw, 20px); }
}
@media (min-width: 1800px) {
.bank-page { --bank-filter-width: clamp(280px, 15vw, 336px); }
}
/* Cartões do banco aproveitam a nova largura sem ganhar padding exagerado. */
.bank-question-list .question-card {
width: 100%;
max-width: none;
padding-inline: clamp(18px, 1.35vw, 28px);
}
.bank-question-list .question-statement { max-width: none; }
/* Modo lista + aleatória: nenhum estado selecionado fica preso ao roxo original. */
.study-answer-option.selected .study-answer-letter {
color: #fff;
border-color: rgba(var(--theme-rgb-3), .72);
background: linear-gradient(135deg, var(--purple-2), var(--purple));
box-shadow: 0 5px 16px var(--theme-glow);
}
.study-progress-fill {
background: linear-gradient(90deg, var(--purple-2), var(--purple-3));
}
.study-question-rail {
background: linear-gradient(180deg, var(--purple-3), var(--purple-2) 72%, rgba(var(--theme-rgb-2), .18));
}
/* Tela de listas e construtor também acompanham integralmente os seis temas. */
.saved-list-card,
.compact-item,
.list-type-option > span,
.list-builder-section,
.list-builder-question-row {
color: var(--text);
background: color-mix(in srgb, var(--surface-3) 72%, transparent);
border-color: var(--border);
}
.saved-list-card:hover,
.saved-list-card:focus-visible,
.list-builder-question-row:hover {
border-color: rgba(var(--theme-rgb-3), .34);
background: color-mix(in srgb, var(--surface-3) 86%, rgb(var(--theme-rgb)) 14%);
}
.saved-list-card.active {
border-color: rgba(var(--theme-rgb-3), .42);
background: color-mix(in srgb, var(--surface-2) 88%, rgb(var(--theme-rgb)) 12%);
box-shadow: inset 3px 0 0 var(--purple);
}
.manual-list-badge {
color: var(--muted);
background: color-mix(in srgb, var(--surface-3) 86%, transparent);
border-color: var(--border);
}
.smart-list-rule-summary {
background: color-mix(in srgb, var(--surface-2) 92%, rgb(var(--theme-rgb-2)) 8%);
border-color: rgba(var(--theme-rgb-3), .22);
}
.list-builder-dialog {
color: var(--text);
background:
radial-gradient(circle at 92% -7%, rgba(var(--theme-rgb), .09), transparent 29%),
var(--surface);
border-color: color-mix(in srgb, var(--border) 70%, rgb(var(--theme-rgb-3)) 30%);
box-shadow: 0 32px 110px color-mix(in srgb, var(--bg-0) 78%, transparent);
}
.list-type-option strong,
.list-builder-question-copy strong,
.list-builder-empty strong { color: var(--text); }
.list-type-option input:checked + span {
border-color: rgba(var(--theme-rgb-3), .52);
background: color-mix(in srgb, var(--surface-2) 86%, rgb(var(--theme-rgb)) 14%);
box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb), .08);
}
/* Tags antigas também deixam de carregar o lilás fixo para outros temas. */
.tag {
color: color-mix(in srgb, var(--purple-3) 72%, var(--text));
background: rgba(var(--theme-rgb), .09);
border-color: rgba(var(--theme-rgb-3), .14);
}
/* Pequenas melhorias de ergonomia. */
.button:disabled,
.icon-button:disabled {
opacity: .46;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}
.saved-list-card:focus-visible,
.bank-filter-tab:focus-visible,
.study-number-button:focus-visible,
.study-answer-option:focus-within {
outline: 2px solid rgba(var(--theme-rgb-3), .72);
outline-offset: 2px;
}
/* Na prévia de uma lista, mostra até duas linhas do enunciado em vez de cortar tudo
na primeira linha — melhora muito a identificação sem deixar a tela pesada. */
#selectedListQuestions .compact-item strong {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
#selectedListQuestions .compact-item,
#selectedListQuestions .compact-item button { min-width: 0; max-width: 100%; }
#selectedListQuestions .compact-item strong,
#selectedListQuestions .compact-item span:not(.compact-status) {
overflow-wrap: anywhere;
word-break: normal;
}
/* Temas claros: mantém contraste do gradiente da alternativa selecionada. */
:root[data-theme$="-light"] .study-answer-option.selected .study-answer-letter {
color: #fff;
}
/* v14.0.7 — revisão de PDF virtualizada/paginada para importações grandes. */
.pdf-review-toolbar {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: end;
gap: 12px 18px;
margin-bottom: 10px;
}
.pdf-review-toolbar-actions,
.pdf-review-toolbar-controls,
.pdf-review-page-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.pdf-review-toolbar-controls { justify-content: flex-end; }
.pdf-review-toolbar-controls label {
display: grid;
gap: 4px;
margin: 0;
color: var(--muted);
font-size: .66rem;
font-weight: 800;
}
.pdf-review-toolbar-controls select,
.pdf-review-toolbar-controls input {
min-height: 34px;
padding: 6px 9px;
font-size: .72rem;
}
.pdf-review-search-control { min-width: min(280px, 34vw); flex: 1 1 220px; }
.pdf-review-selection-count {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 9px;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-3) 78%, rgb(var(--theme-rgb)) 22%);
color: var(--text);
font-size: .66rem;
font-weight: 900;
white-space: nowrap;
}
.pdf-review-pagination {
position: sticky;
top: -20px;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 -2px 10px;
padding: 8px 4px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--surface) 96%, rgb(var(--theme-rgb)) 4%);
backdrop-filter: blur(10px);
}
.pdf-review-pagination > span,
.pdf-review-page-actions strong {
color: var(--muted);
font-size: .68rem;
font-weight: 850;
}
.pdf-review-list { min-height: 120px; }
.pdf-review-item { contain: layout paint style; }
.pdf-review-lazy-hint,
.pdf-review-empty {
color: var(--muted);
font-size: .72rem;
line-height: 1.45;
}
.pdf-review-lazy-hint { padding: 12px 0 2px; }
.pdf-review-empty {
display: grid;
gap: 4px;
place-items: center;
min-height: 150px;
padding: 24px;
border: 1px dashed var(--border-strong);
border-radius: 14px;
background: color-mix(in srgb, var(--surface-2) 90%, transparent);
text-align: center;
}
.pdf-review-empty strong { color: var(--text); }
.pdf-review-performance-note {
margin-top: 10px;
padding: 9px 11px;
border: 1px solid rgba(var(--theme-rgb-3), .22);
border-radius: 10px;
background: rgba(var(--theme-rgb), .07);
color: var(--muted);
font-size: .7rem;
line-height: 1.45;
}
.pdf-review-performance-note strong { color: color-mix(in srgb, var(--purple-3) 72%, var(--text)); }
.pdf-review-image-shell {
display: grid;
min-height: 80px;
place-items: center;
overflow: hidden;
border-radius: 8px;
background: #fff;
}
.pdf-review-image-shell img:not([src]) { visibility: hidden; }
.pdf-review-dialog .modal-form { overscroll-behavior: contain; }
.pdf-review-dialog button:disabled { cursor: wait; opacity: .62; }
@media (max-width: 900px) {
.pdf-review-toolbar { grid-template-columns: 1fr; align-items: stretch; }
.pdf-review-toolbar-controls { justify-content: flex-start; }
.pdf-review-search-control { min-width: min(100%, 280px); }
}
@media (max-width: 650px) {
.pdf-review-pagination { align-items: flex-start; flex-direction: column; }
.pdf-review-page-actions { width: 100%; justify-content: space-between; }
.pdf-review-toolbar-controls label { flex: 1 1 135px; }
.pdf-review-search-control { flex-basis: 100% !important; }
}
/* =========================================================
v14.5 — Sessão de estudo focada em conforto (listas + aleatória)
Referência: barra compacta, fonte acessível e navegação nas margens.
========================================================= */
.study-dialog {
--study-reading-width: 1180px;
--study-toolbar-width: 1380px;
width: 100vw;
height: 100dvh;
max-height: 100dvh;
border: 0;
border-radius: 0;
}
.study-shell {
height: 100dvh;
max-height: 100dvh;
background:
radial-gradient(circle at 50% -12%, rgba(var(--theme-rgb), .075), transparent 34%),
var(--bg-0);
}
/* Uma barra superior compacta substitui o excesso de chrome visual. */
.study-header {
min-height: 54px;
padding: 7px max(14px, calc((100vw - var(--study-toolbar-width)) / 2));
align-items: center;
gap: 12px;
background: color-mix(in srgb, var(--surface) 94%, rgb(var(--theme-rgb)) 6%);
box-shadow: 0 1px 0 var(--border), 0 10px 30px color-mix(in srgb, var(--bg-0) 55%, transparent);
}
.study-title-block { max-width: min(36vw, 480px); }
.study-title-block .eyebrow { margin: 0 0 1px; font-size: .58rem; letter-spacing: .14em; }
.study-title-block h2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .98rem;
}
.study-header-actions { flex-wrap: nowrap; gap: 6px; }
.study-header-actions .button.small,
.study-close,
.study-reader-controls { min-height: 34px; }
.study-reader-controls {
padding: 2px;
gap: 2px;
border: 1px solid var(--border);
border-radius: 10px;
background: color-mix(in srgb, var(--surface-3) 74%, transparent);
}
.study-reader-controls .reader-font-button {
min-width: 37px;
height: 29px;
min-height: 29px;
border: 0;
border-radius: 7px;
background: transparent;
}
.study-reader-controls .reader-font-label {
min-width: 42px;
font-size: .65rem;
}
.study-map-toggle[aria-pressed="true"],
.study-focus-toggle[aria-pressed="true"] {
color: var(--text);
border-color: rgba(var(--theme-rgb-3), .42);
background: rgba(var(--theme-rgb), .11);
}
/* Navegação em uma única faixa: página, progresso e ordenação. */
.study-navigation {
top: 54px;
min-height: 50px;
grid-template-columns: auto auto minmax(170px, 1fr) auto auto;
padding: 7px max(14px, calc((100vw - var(--study-toolbar-width)) / 2));
gap: 8px;
background: color-mix(in srgb, var(--surface) 96%, rgb(var(--theme-rgb)) 4%);
box-shadow: 0 1px 0 var(--border);
}
.study-page-control {
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 9px;
background: color-mix(in srgb, var(--surface-3) 62%, transparent);
}
.study-page-control input {
width: 54px;
min-height: 30px;
padding: 4px 6px;
border-radius: 7px;
}
.study-page-control .button { min-height: 30px !important; padding: 4px 8px !important; }
.study-session-progress { min-width: 160px; }
.study-progress-track { height: 5px; }
.study-order-control {
display: flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: .68rem;
white-space: nowrap;
}
.study-order-control select {
width: auto;
min-width: 142px;
min-height: 34px;
margin: 0;
padding: 5px 30px 5px 9px;
font-size: .7rem;
font-weight: 750;
background-color: color-mix(in srgb, var(--surface-3) 72%, transparent);
}
/* Navegação principal: sempre disponível no rodapé, com o atual no centro. */
.study-bottom-navigation {
position: sticky;
bottom: 0;
z-index: 8;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
width: min(100%, calc(var(--study-reading-width) + 32px));
margin: 0 auto;
padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-1) 94%, rgb(var(--theme-rgb)) 6%);
box-shadow: 0 -10px 28px color-mix(in srgb, var(--bg-0) 32%, transparent);
backdrop-filter: blur(12px) saturate(1.04);
-webkit-backdrop-filter: blur(12px) saturate(1.04);
}
.study-bottom-navigation > .button { min-height: 36px; white-space: nowrap; }
.study-number-strip {
display: flex;
min-width: 0;
align-items: center;
justify-content: center;
gap: 5px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.study-number-strip::-webkit-scrollbar { display: none; }
.study-number-button { flex: 0 0 auto; min-width: 34px; height: 32px; padding-inline: 7px; scroll-snap-align: center; }
.study-map-marker { flex: 0 0 auto; white-space: nowrap; font-size: .68rem; }
/* Área de leitura central: linhas não ficam longas demais em telas largas. */
.study-question-host {
width: min(100%, calc(var(--study-reading-width) + 32px));
max-width: calc(var(--study-reading-width) + 32px);
margin: 0 auto;
padding: 14px 16px 28px;
}
.study-question-card {
width: 100%;
min-height: 0;
padding: 20px clamp(20px, 2.5vw, 34px) 22px clamp(25px, 3vw, 40px);
border-radius: 12px;
background:
radial-gradient(circle at 96% -8%, rgba(var(--theme-rgb), .07), transparent 28%),
color-mix(in srgb, var(--surface-2) 98%, rgb(var(--theme-rgb)) 2%);
box-shadow: 0 14px 44px color-mix(in srgb, var(--bg-0) 48%, transparent);
}
.study-question-rail { width: 3px; }
.study-question-top { align-items: center; }
.study-question-number { margin: 12px 0 8px; }
.study-question-statement {
max-width: 92ch;
font-size: 1em;
line-height: 1.62;
font-weight: 650;
letter-spacing: -.012em;
text-wrap: pretty;
white-space: normal;
overflow-wrap: break-word;
}
.study-question-meta { margin-top: 7px; }
.study-options { gap: 8px; margin-top: 18px; }
.study-answer-option {
min-height: 52px;
padding: 8px 12px;
gap: 10px;
border-radius: 10px;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.study-answer-option:hover { transform: translateY(-1px); }
.study-answer-letter { width: 36px; height: 36px; border-radius: 8px; }
.study-answer-text { line-height: 1.45; white-space: normal; overflow-wrap: break-word; }
/* Em questões longas, os botões continuam alcançáveis perto da base da tela. */
.study-answer-actions {
position: sticky;
bottom: 10px;
z-index: 4;
width: fit-content;
max-width: 100%;
padding: 6px;
margin: 12px -6px -2px;
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
border-radius: 11px;
background: color-mix(in srgb, var(--surface-2) 88%, transparent);
box-shadow: 0 9px 26px color-mix(in srgb, var(--bg-0) 44%, transparent);
backdrop-filter: blur(12px) saturate(1.1);
}
.study-continue-button { margin-left: auto; }
/* Setas aproveitam as margens sem alargar o texto da questão. */
.study-side-nav {
display: none;
position: fixed;
top: 50%;
z-index: 12;
width: 48px;
height: 88px;
transform: translateY(-40%);
border: 1px solid var(--border);
border-radius: 14px;
color: var(--muted);
background: color-mix(in srgb, var(--surface-2) 84%, transparent);
box-shadow: 0 12px 34px color-mix(in srgb, var(--bg-0) 50%, transparent);
backdrop-filter: blur(12px);
font: inherit;
font-size: 2rem;
line-height: 1;
cursor: pointer;
transition: color .12s ease, border-color .12s ease, background .12s ease, transform .12s ease;
}
.study-side-nav:hover:not(:disabled) {
color: var(--text);
border-color: rgba(var(--theme-rgb-3), .4);
background: rgba(var(--theme-rgb), .10);
transform: translateY(-40%) scale(1.04);
}
.study-side-nav:disabled { opacity: .18; cursor: default; }
.study-side-prev { left: max(14px, calc((100vw - 1320px) / 2)); }
.study-side-next { right: max(14px, calc((100vw - 1320px) / 2)); }
.study-dialog.study-kind-random .study-side-nav { display: none !important; }
.study-shortcuts-hint {
display: none;
position: fixed;
left: 50%;
bottom: 8px;
z-index: 3;
transform: translateX(-50%);
padding: 4px 9px;
border-radius: 99px;
color: color-mix(in srgb, var(--muted) 82%, transparent);
background: color-mix(in srgb, var(--bg-0) 70%, transparent);
font-size: .58rem;
letter-spacing: .02em;
pointer-events: none;
}
/* Foco mantém apenas o essencial: fonte, voltar e navegação. */
.study-dialog.study-focus-mode .study-title-block,
.study-dialog.study-focus-mode .study-secondary-control,
.study-dialog.study-focus-mode .study-map-toggle,
.study-dialog.study-focus-mode .study-order-control { display: none !important; }
.study-dialog.study-focus-mode .study-header { justify-content: flex-end; }
.study-dialog.study-focus-mode .study-header-actions { margin-left: auto; }
.study-dialog.study-focus-mode .study-question-host { --study-reading-width: 1240px; }
/* Aleatória usa o cabeçalho mínimo e dá todo o restante à questão. */
.study-dialog.study-kind-random .study-header { min-height: 50px; }
.study-dialog.study-kind-random .study-question-host { padding-top: 14px; }
.study-dialog.study-kind-random .study-title-block { max-width: min(44vw, 520px); }
@media (min-width: 1180px) {
.study-dialog:not(.study-kind-random) .study-side-nav { display: grid; place-items: center; }
}
@media (pointer: fine) and (min-width: 900px) {
.study-shortcuts-hint { display: block; }
}
/* Tablet horizontal: aproxima a referência, mas preserva área de toque. */
@media (min-width: 900px) and (max-width: 1300px) {
.study-dialog { --study-reading-width: 1010px; }
.study-title-block { max-width: 250px; }
.study-secondary-control { display: none; }
.study-order-control span { display: none; }
.study-order-control select { min-width: 128px; }
.study-navigation { grid-template-columns: auto auto minmax(120px, 1fr) auto auto; }
}
@media (max-width: 899px) {
.study-dialog { --study-reading-width: 100%; }
.study-header {
min-height: 50px;
padding: calc(6px + env(safe-area-inset-top, 0px)) 9px 6px;
}
.study-title-block { max-width: 42vw; }
.study-title-block .eyebrow { display: none; }
.study-title-block h2 { font-size: .88rem; }
.study-header-actions { gap: 4px; }
.study-reader-controls .reader-font-label { display: none; }
.study-secondary-control { display: none; }
.study-map-toggle { padding-inline: 8px !important; }
.study-focus-toggle { padding-inline: 8px !important; }
.study-navigation {
top: 50px;
grid-template-columns: auto minmax(0,1fr) auto;
padding: 6px 8px;
}
.study-page-control { justify-self: start; }
.study-session-progress { min-width: 0; }
.study-order-control { grid-column: 1 / -1; justify-self: stretch; }
.study-order-control span { display: none; }
.study-order-control select { width: 100%; min-width: 0; }
.study-dialog:not(.study-map-open) .study-order-control { display: none; }
.study-number-strip { top: 96px; padding-inline: 8px; }
.study-question-host { padding: 8px 7px 22px; }
.study-question-card { padding: 14px 12px 16px 17px; border-radius: 10px; }
.study-question-statement { max-width: none; line-height: 1.5; }
.study-answer-option { min-height: 48px; padding: 7px 8px; }
.study-answer-actions { bottom: 6px; }
}
@media (max-width: 620px) {
.study-title-block { max-width: 34vw; }
.study-map-toggle { display: none; }
.study-focus-toggle { font-size: 0; width: 34px; padding: 0 !important; }
.study-focus-toggle::before { content: "⛶"; font-size: .85rem; }
.study-navigation { grid-template-columns: minmax(0,1fr) auto; }
.study-navigation > .study-page-control { display: none; }
.study-session-progress span { display: none; }
.study-question-number { margin-top: 8px; }
.study-answer-actions { width: 100%; }
.study-question-host { padding-bottom: 14px; }
.study-bottom-navigation { gap: 5px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); }
.study-bottom-navigation > .button { min-width: 0; padding-inline: 9px; font-size: .74rem; }
.study-number-button { min-width: 32px; height: 31px; padding-inline: 6px; }
}
:root[data-theme$="-light"] .study-answer-actions,
:root[data-theme$="-light"] .study-side-nav {
background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.study-map-marker {
flex: 0 0 auto;
align-self: center;
padding: 0 5px;
color: var(--muted);
font-size: .62rem;
white-space: nowrap;
}
/* ==========================================================
Gepetinho v14.6 · Personalização + Study Tools
========================================================== */
.custom-wallpaper-layer {
position: fixed;
inset: -2.5vmax;
z-index: 0;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity .22s ease, filter .22s ease;
will-change: opacity, filter;
}
.wallpaper-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
transition: opacity .22s ease;
}
.hero-wallpaper-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
border-radius: inherit;
filter: var(--hero-media-filter, none);
transition: opacity .22s ease, filter .22s ease;
}
/* A regra genérica do hero eleva seus filhos; o vídeo fica logo acima do
fundo e abaixo de todo o conteúdo e dos gradientes de legibilidade. */
.hero-card > .hero-wallpaper-video { z-index: 0; }
body.hero-media-enabled .hero-card:has(.hero-wallpaper-video:not([hidden])) {
background-image: linear-gradient(105deg, rgba(7,8,14,.83) 0%, rgba(10,10,17,.56) 54%, rgba(7,8,14,.38) 100%);
}
body.custom-wallpaper-enabled::before {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(4, 6, 11, var(--wallpaper-overlay, .54));
}
body.custom-wallpaper-enabled .app-shell,
body.custom-wallpaper-enabled .auth-screen { position: relative; z-index: 2; }
body.custom-wallpaper-enabled .custom-wallpaper-layer { opacity: 1; }
.wallpaper-settings-panel { grid-column: span 2; }
.wallpaper-status-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 9px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255,255,255,.04);
color: var(--muted);
font-size: .72rem;
font-weight: 850;
}
.wallpaper-status-badge.active {
color: var(--text);
border-color: rgba(var(--theme-rgb-3), .34);
background: rgba(var(--theme-rgb), .12);
}
.wallpaper-preview {
position: relative;
min-height: 180px;
border-radius: 18px;
border: 1px solid var(--border);
overflow: hidden;
margin: 16px 0 12px;
display: grid;
place-items: center;
background:
radial-gradient(circle at 70% 20%, rgba(var(--theme-rgb), .18), transparent 34%),
linear-gradient(145deg, var(--surface-2), var(--surface));
background-size: cover;
background-position: center;
}
.wallpaper-preview-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.wallpaper-preview::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(3,5,9,.04), rgba(3,5,9,.25));
pointer-events: none;
}
.wallpaper-preview-card {
position: relative;
z-index: 2;
min-width: min(310px, 78%);
padding: 18px 22px;
border-radius: 15px;
border: 1px solid rgba(var(--theme-rgb-3), .26);
background: color-mix(in srgb, var(--surface-2) 78%, transparent);
box-shadow: 0 18px 45px rgba(0,0,0,.24);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.wallpaper-preview-card strong { display: block; font-size: 1.08rem; }
.wallpaper-preview-card span { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.wallpaper-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.wallpaper-settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px 14px;
}
.wallpaper-settings-grid > label:not(.wallpaper-toggle-row) {
display: grid;
gap: 7px;
color: var(--muted);
font-size: .78rem;
font-weight: 760;
}
.wallpaper-toggle-row {
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255,255,255,.025);
color: var(--text);
font-size: .8rem;
font-weight: 760;
}
.wallpaper-toggle-row small { display: block; color: var(--muted); font-weight: 500; margin-top: 2px; line-height: 1.35; }
.wallpaper-toggle-row input { min-height: 0; width: 18px; height: 18px; accent-color: var(--purple); flex: 0 0 auto; }
.wallpaper-wide-setting { grid-column: 1 / -1; }
.wallpaper-range-label span { display: flex; justify-content: space-between; gap: 12px; }
.wallpaper-range-label output { color: var(--text); font-weight: 800; }
.wallpaper-range-label input[type="range"] { min-height: 26px; width: 100%; accent-color: var(--purple); }
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .sidebar,
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .topbar,
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .panel,
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .bank-filter-panel,
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .bank-results-shell,
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .question-card {
background-color: color-mix(in srgb, var(--surface) 80%, transparent) !important;
background-image: none;
}
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .sidebar,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .topbar,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .panel,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .bank-filter-panel,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .bank-results-shell,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .question-card {
background-color: color-mix(in srgb, var(--surface) 68%, transparent) !important;
background-image: none;
backdrop-filter: blur(14px) saturate(1.08);
-webkit-backdrop-filter: blur(14px) saturate(1.08);
}
body.custom-wallpaper-enabled .nav-group,
body.custom-wallpaper-enabled .nav-group-title,
body.custom-wallpaper-enabled .nav-item,
body.custom-wallpaper-enabled .nav-subitem {
box-shadow: none !important;
}
body.custom-wallpaper-enabled .nav-group {
background-image: none;
}
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .study-shell,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .study-shell {
background:
radial-gradient(circle at 50% -12%, rgba(var(--theme-rgb), .07), transparent 34%),
color-mix(in srgb, var(--bg-0) 78%, transparent);
}
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .study-header,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .study-navigation,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .study-question-card {
backdrop-filter: blur(15px) saturate(1.08);
-webkit-backdrop-filter: blur(15px) saturate(1.08);
}
.youtube-search-dialog {
width: min(780px, calc(100vw - 22px));
max-height: min(820px, calc(100dvh - 22px));
padding: 0;
border: 1px solid rgba(var(--theme-rgb-3), .28);
border-radius: 22px;
color: var(--text);
background: color-mix(in srgb, var(--surface-2) 96%, rgb(var(--theme-rgb)) 4%);
box-shadow: 0 30px 100px rgba(0,0,0,.5);
}
.youtube-search-dialog::backdrop { background: rgba(3,4,8,.72); backdrop-filter: blur(4px); }
.youtube-search-shell { padding: 22px; overflow: auto; max-height: inherit; }
.youtube-question-context {
margin: 6px 0 15px;
padding: 13px 14px;
border: 1px solid var(--border);
border-radius: 13px;
background: rgba(255,255,255,.025);
}
.youtube-question-meta { display: block; color: var(--purple-3); font-size: .72rem; font-weight: 850; margin-bottom: 5px; }
.youtube-question-context p { margin: 0; color: var(--muted); line-height: 1.5; font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.youtube-search-field { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.youtube-search-field textarea { resize: vertical; min-height: 82px; }
.youtube-search-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 11px 0 18px; }
.youtube-button {
color: #fff !important;
border-color: rgba(255, 73, 73, .52) !important;
background: linear-gradient(135deg, #ff3131, #d80f0f) !important;
box-shadow: 0 9px 24px rgba(220,20,20,.18);
}
.youtube-save-video {
display: grid;
gap: 11px;
padding: 15px;
border-radius: 15px;
border: 1px solid rgba(var(--theme-rgb-3), .2);
background: rgba(var(--theme-rgb), .055);
}
.youtube-save-video > div:first-child strong { display: block; }
.youtube-save-video > div:first-child small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.4; }
.youtube-save-video label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 760; }
.youtube-video-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.youtube-history { margin-top: 17px; }
.youtube-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.youtube-history-list { display: grid; gap: 6px; }
.youtube-history-item {
width: 100%;
min-height: 38px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,.025);
color: var(--muted);
text-align: left;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.youtube-history-item:hover { color: var(--text); border-color: rgba(var(--theme-rgb-3), .28); background: rgba(var(--theme-rgb), .06); }
.youtube-search-trigger { border-color: rgba(255, 80, 80, .22) !important; }
@media (max-width: 760px) {
.wallpaper-settings-panel { grid-column: span 1; }
.wallpaper-settings-grid { grid-template-columns: 1fr; }
.wallpaper-wide-setting { grid-column: auto; }
.wallpaper-preview { min-height: 145px; }
.youtube-search-shell { padding: 16px; }
.youtube-search-presets > .button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
.custom-wallpaper-layer { transition: none; }
.wallpaper-video, .hero-wallpaper-video, .wallpaper-preview-video { transition: none; }
/* A pausa/fallback estático é controlada pelo runtime. Não escondemos o
elemento de vídeo via CSS para evitar hero/fundo vazio em assets legados. */
}
/* ==========================================================
Gepetinho v14.7 · Interface, pesquisa e estatísticas
========================================================== */
/* O hero agora acompanha a paleta extraída do wallpaper/GIF. */
body.custom-wallpaper-enabled .hero-card {
--hero-wall-main: var(--wallpaper-hero-rgb, var(--theme-rgb));
--hero-wall-dark: var(--wallpaper-hero-dark-rgb, var(--theme-rgb-2));
--hero-wall-light: var(--wallpaper-hero-light-rgb, var(--theme-rgb-3));
color: #fff;
border-color: rgba(var(--hero-wall-light), .28);
background:
radial-gradient(circle at 82% 14%, rgba(var(--hero-wall-light), .24), transparent 31%),
linear-gradient(125deg, rgba(var(--hero-wall-dark), .88) 0%, rgba(var(--hero-wall-main), .69) 56%, rgba(7, 8, 13, .78) 100%);
box-shadow: 0 24px 70px rgba(0,0,0,.22);
backdrop-filter: blur(12px) saturate(1.12);
-webkit-backdrop-filter: blur(12px) saturate(1.12);
}
body.custom-wallpaper-enabled .hero-card h2 { color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.22); }
body.custom-wallpaper-enabled .hero-card p:not(.eyebrow),
body.custom-wallpaper-enabled .hero-card .eyebrow { color: rgba(255,255,255,.78); }
body.custom-wallpaper-enabled .hero-card .button.secondary {
color: #fff;
border-color: rgba(255,255,255,.24);
background: rgba(8,10,16,.24);
}
body.custom-wallpaper-enabled .hero-card .button.light {
color: rgb(var(--hero-wall-dark));
background: rgba(255,255,255,.92);
border-color: rgba(255,255,255,.34);
}
/* Search tool: dois destinos, uma busca editável. */
.search-mode-help {
margin: -3px 0 12px;
color: var(--muted);
font-size: .74rem;
line-height: 1.45;
}
.search-mode-help strong { color: var(--text); }
.search-engine-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 10px 0 16px; }
.google-search-button {
color: var(--text);
border-color: color-mix(in srgb, var(--border) 70%, rgb(var(--theme-rgb)) 30%);
background: color-mix(in srgb, var(--surface-3) 90%, rgb(var(--theme-rgb)) 10%);
}
.google-search-button:hover { border-color: rgba(var(--theme-rgb-3), .46); background: rgba(var(--theme-rgb), .10); }
/* Estatísticas: visão gráfica compacta. */
.stats-overview-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 16px; margin-bottom: 16px; }
.stats-chart-body { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(220px,1.2fr); gap: 24px; align-items: center; min-height: 230px; }
.stats-outcome-donut {
--stats-correct-angle: 0deg;
--stats-wrong-angle: 0deg;
width: min(210px, 72vw);
aspect-ratio: 1;
margin: 0 auto;
border-radius: 50%;
display: grid;
place-items: center;
background: conic-gradient(
#22c55e 0 var(--stats-correct-angle),
#f43f5e var(--stats-correct-angle) var(--stats-wrong-angle),
color-mix(in srgb, var(--muted) 28%, transparent) var(--stats-wrong-angle) 360deg
);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 50px rgba(0,0,0,.16);
position: relative;
}
.stats-outcome-donut::after {
content: "";
position: absolute;
inset: 18%;
border-radius: 50%;
background: color-mix(in srgb, var(--surface) 94%, transparent);
border: 1px solid var(--border);
}
.stats-donut-center { position: relative; z-index: 1; text-align: center; }
.stats-donut-center strong { display: block; font-size: 2rem; line-height: 1; }
.stats-donut-center span { display: block; margin-top: 6px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.stats-chart-legend { display: grid; gap: 9px; }
.stats-chart-legend > div {
display: grid;
grid-template-columns: 12px auto minmax(0,1fr);
align-items: center;
gap: 9px;
padding: 10px 11px;
border: 1px solid var(--border);
border-radius: 11px;
background: rgba(255,255,255,.022);
}
.stats-chart-legend strong { font-size: 1rem; }
.stats-chart-legend small { color: var(--muted); }
.stats-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.stats-legend-dot.correct { background: #22c55e; }
.stats-legend-dot.wrong { background: #f43f5e; }
.stats-legend-dot.pending { background: color-mix(in srgb, var(--muted) 48%, transparent); border: 1px solid var(--border-strong); }
.stats-board-heading { align-items: flex-start; }
.stats-panel-hint { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; font-weight: 600; }
@media (max-width: 900px) {
.stats-overview-grid { grid-template-columns: 1fr; }
.stats-chart-body { grid-template-columns: 1fr; min-height: 0; }
.stats-chart-legend { grid-template-columns: repeat(3,minmax(0,1fr)); }
.stats-chart-legend > div { grid-template-columns: 10px auto; }
.stats-chart-legend small { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.search-engine-actions { grid-template-columns: 1fr; }
.stats-chart-legend { grid-template-columns: 1fr; }
.stats-chart-legend > div { grid-template-columns: 10px auto minmax(0,1fr); }
.stats-chart-legend small { grid-column: auto; }
}
/* ==========================================================
Gepetinho v14.7.8 · Wallpaper harmonizado e superfícies adaptativas
========================================================== */
/* A camada fixa só pede composição extra quando o usuário realmente usa blur. */
.custom-wallpaper-layer { will-change: opacity; }
body.custom-wallpaper-enabled[data-wallpaper-blurred="true"] .custom-wallpaper-layer { will-change: opacity, filter; }
/* Hero: usa a família cromática do wallpaper sem virar um bloco saturado isolado. */
body.custom-wallpaper-enabled .hero-card {
--hero-wall-main: var(--wallpaper-hero-rgb, var(--theme-rgb));
--hero-wall-dark: var(--wallpaper-hero-dark-rgb, var(--theme-rgb-2));
--hero-wall-light: var(--wallpaper-hero-light-rgb, var(--theme-rgb-3));
--hero-wall-surface: var(--wallpaper-surface-rgb, var(--hero-wall-dark));
border-color: rgba(var(--hero-wall-light), .24);
box-shadow: 0 22px 62px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body.custom-wallpaper-enabled[data-wallpaper-surface="solid"] .hero-card {
background:
radial-gradient(circle at 82% 14%, rgba(var(--hero-wall-light), .13), transparent 31%),
linear-gradient(125deg, rgba(var(--hero-wall-dark), .98) 0%, rgba(var(--hero-wall-main), .90) 56%, rgba(var(--hero-wall-surface), .96) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.custom-wallpaper-enabled[data-wallpaper-surface="translucent"] .hero-card {
background:
radial-gradient(circle at 82% 14%, rgba(var(--hero-wall-light), .17), transparent 31%),
linear-gradient(125deg, rgba(var(--hero-wall-dark), .83) 0%, rgba(var(--hero-wall-main), .65) 56%, rgba(var(--hero-wall-surface), .72) 100%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .hero-card {
background:
radial-gradient(circle at 82% 14%, rgba(var(--hero-wall-light), .17), transparent 31%),
linear-gradient(125deg, rgba(var(--hero-wall-dark), .58) 0%, rgba(var(--hero-wall-main), .42) 56%, rgba(var(--hero-wall-surface), .52) 100%);
backdrop-filter: blur(16px) saturate(1.06);
-webkit-backdrop-filter: blur(16px) saturate(1.06);
}
/* Quando ativado, a estrutura inteira herda a família neutra do wallpaper.
Os tokens-base são ajustados uma única vez pelo JS; estes overrides cobrem
componentes antigos que ainda tinham fundos roxos fixos. */
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .metric-card {
background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 95%, transparent), color-mix(in srgb, var(--surface) 96%, transparent));
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .bank-filter-panel,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .bank-results-toolbar {
background:
radial-gradient(circle at 88% 0%, rgba(var(--theme-rgb), .08), transparent 34%),
color-mix(in srgb, var(--surface-2) 94%, transparent);
border-color: var(--border);
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .bank-filter-tabs,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .bank-hierarchy-subject,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .bank-pagination {
background: var(--bank-surface-soft);
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .metric-card.accent-card {
background:
radial-gradient(circle at 90% 0%, rgba(var(--theme-rgb-3), .12), transparent 42%),
linear-gradient(145deg, color-mix(in srgb, var(--surface-3) 84%, rgb(var(--theme-rgb)) 16%), var(--surface));
border-color: rgba(var(--theme-rgb-3), .22);
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .question-card,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .study-question-card {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, transparent), color-mix(in srgb, var(--surface) 97%, transparent));
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .profile-avatar,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .settings-avatar {
background-image: linear-gradient(135deg, color-mix(in srgb, var(--surface-3) 82%, rgb(var(--theme-rgb)) 18%), var(--surface));
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .tag {
color: color-mix(in srgb, var(--purple-3) 70%, var(--text));
background: rgba(var(--theme-rgb), .09);
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .study-question-rail {
background: linear-gradient(180deg, var(--purple-3), var(--purple-2) 70%, rgba(var(--theme-rgb-2), .18));
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .study-answer-option.selected .study-answer-letter {
border-color: var(--purple-3);
background: linear-gradient(135deg, var(--purple-2), var(--purple));
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] input,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] select,
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] textarea {
background-color: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
/* Glass em listas grandes: blur fica nas superfícies estruturais, não em cada questão.
Isso evita dezenas de camadas de backdrop-filter simultâneas. */
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .question-card {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .metric-card,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .compact-item,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .answer-option,
body.custom-wallpaper-enabled[data-wallpaper-surface="glass"] .study-answer-option {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
body.custom-wallpaper-enabled .hero-card { transition: none; }
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .eyebrow {
color: color-mix(in srgb, var(--muted) 78%, var(--text));
}
:is(body.custom-wallpaper-enabled, body.hero-media-enabled)[data-wallpaper-adaptive-surfaces="true"] .hero-card .eyebrow {
color: rgba(255,255,255,.78);
}
/* v14.8.0 — Biblioteca local, estatísticas circulares, patch notes e tour */
.dashboard-library-grid,
.stats-priority-grid {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
gap: 16px;
margin-top: 16px;
}
.patch-notes-panel { overflow: hidden; position: relative; }
.patch-notes-panel::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
right: -54px;
bottom: -76px;
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--theme-rgb), .16), transparent 68%);
pointer-events: none;
}
.version-pill {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid rgba(var(--theme-rgb), .24);
background: rgba(var(--theme-rgb), .08);
color: var(--text);
font-size: .68rem;
font-weight: 850;
}
.patch-notes-list { display: grid; gap: 9px; margin: 4px 0 14px; }
.patch-notes-list article {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 9px 10px;
border-radius: 12px;
background: color-mix(in srgb, var(--surface-2) 74%, transparent);
border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}
.patch-notes-list article > span {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
background: rgba(var(--theme-rgb), .10);
color: color-mix(in srgb, var(--purple-3) 82%, white);
font-weight: 900;
}
.patch-notes-list strong { display: block; font-size: .79rem; }
.patch-notes-list p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.continue-reading-body { min-height: 88px; }
.continue-reading-card {
display: grid;
grid-template-columns: 66px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.continue-reading-card img,
.continue-reading-placeholder {
width: 66px;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 8px;
background: linear-gradient(145deg, rgba(var(--theme-rgb), .18), var(--surface-3));
border: 1px solid var(--border);
}
.continue-reading-placeholder { display: grid; place-items: center; font-size: 1.4rem; }
.continue-reading-copy { min-width: 0; }
.continue-reading-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-reading-copy p { margin: 4px 0 8px; color: var(--muted); font-size: .72rem; }
.book-mini-progress,
.book-progress-track {
height: 5px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--surface-3) 82%, black 8%);
}
.book-mini-progress > span,
.book-progress-track > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--purple-3)); }
.books-page { display: grid; gap: 15px; }
.library-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: clamp(18px, 3vw, 28px);
background:
radial-gradient(circle at 88% 16%, rgba(var(--theme-rgb), .12), transparent 30%),
color-mix(in srgb, var(--surface) 94%, transparent);
}
.library-hero h2 { margin: 4px 0 8px; max-width: 760px; font-size: clamp(1.35rem, 2.4vw, 2rem); }
.library-hero p { max-width: 800px; line-height: 1.55; }
.library-toolbar {
display: grid;
grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(135px, .65fr)) auto;
gap: 9px;
align-items: center;
padding: 12px;
}
.library-toolbar select,
.library-search input { width: 100%; min-height: 40px; }
.library-search { position: relative; display: block; }
.library-search > span { position: absolute; z-index: 1; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.library-search input { padding-left: 34px; }
.library-status-row { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: .72rem; padding: 0 3px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px; }
.book-grid.list-view { display: grid; grid-template-columns: 1fr; }
.book-card {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 15px;
background: color-mix(in srgb, var(--surface) 94%, transparent);
box-shadow: var(--shadow-soft, 0 12px 32px rgba(0,0,0,.12));
transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.book-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--purple) 38%, var(--border)); }
.book-cover-button { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; text-align: inherit; }
.book-cover-wrap { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(var(--theme-rgb), .16), var(--surface-3)); }
.book-cover-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.book-cover-placeholder { height: 100%; display: grid; place-items: center; font-size: 2.25rem; color: color-mix(in srgb, var(--purple-3) 80%, white); }
.book-favorite-badge { position: absolute; top: 9px; right: 9px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: rgba(8,8,12,.66); backdrop-filter: blur(6px); color: #ffd56a; font-size: .9rem; }
.book-card-body { padding: 11px 12px 12px; }
.book-card-body h3 { margin: 0; font-size: .87rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.25em; }
.book-card-meta { margin-top: 5px; color: var(--muted); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.book-progress-row .book-progress-track { flex: 1; }
.book-progress-row span:last-child { color: var(--muted); font-size: .62rem; font-weight: 800; }
.book-card-actions { display: flex; gap: 6px; margin-top: 10px; }
.book-card-actions .button { flex: 1; }
.book-grid.list-view .book-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.book-grid.list-view .book-cover-wrap { height: 122px; aspect-ratio: auto; }
.book-grid.list-view .book-card-body { display: grid; align-content: center; }
.library-load-more { display: flex; justify-content: center; padding: 2px 0 8px; }
.books-continue-panel { padding-block: 14px; }
.settings-tutorial-btn { margin-top: 9px; }
.stats-ring-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stats-ring-card {
display: grid;
justify-items: center;
gap: 7px;
padding: clamp(16px, 2.5vw, 24px);
border-radius: 17px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface) 95%, transparent);
text-align: center;
}
.stat-ring {
--ring-angle: 0deg;
width: clamp(116px, 14vw, 160px);
aspect-ratio: 1;
position: relative;
display: grid;
place-items: center;
border-radius: 50%;
background: conic-gradient(var(--ring-color, var(--purple)) var(--ring-angle), color-mix(in srgb, var(--surface-3) 88%, transparent) 0);
isolation: isolate;
}
.stat-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 98%, transparent); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); z-index: -1; }
.stat-ring > div { display: grid; gap: 1px; }
.stat-ring strong { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1; }
.stat-ring span { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ring-progress { --ring-color: var(--purple); }
.ring-correct { --ring-color: #42c98a; }
.ring-wrong { --ring-color: #ef6a78; }
.stats-ring-card p { margin: 2px 0 0; font-weight: 850; font-size: .84rem; }
.stats-ring-card small { color: var(--muted); font-size: .67rem; }
.weak-topic-list { display: grid; gap: 8px; }
.weak-topic-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 78%, transparent); color: inherit; text-align: left; cursor: pointer; }
.weak-topic-item:hover { border-color: color-mix(in srgb, var(--purple) 34%, var(--border)); }
.weak-topic-item strong { display: block; font-size: .78rem; }
.weak-topic-item span { display: block; margin-top: 3px; color: var(--muted); font-size: .65rem; }
.weak-topic-score { min-width: 54px; text-align: right; font-weight: 900; color: #ef8a94; }
.tutorial-dialog { width: min(620px, calc(100vw - 28px)); max-height:calc(100dvh - 24px); overflow-y:auto; padding: 0; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.tutorial-dialog::backdrop { background: rgba(2,3,7,.66); backdrop-filter: blur(5px); }
.tutorial-shell { padding: 20px; }
.tutorial-progress { height: 4px; margin: -2px 0 17px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.tutorial-progress span { display: block; width: 16.67%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--purple-3)); transition: width .2s ease; }
.tutorial-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tutorial-header h2 { margin: 4px 0 0; font-size: 1.45rem; }
.tutorial-body { min-height: 210px; display: grid; align-content: center; padding: 20px 4px; }
.tutorial-visual { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 22px; margin-bottom: 15px; background: linear-gradient(145deg, rgba(var(--theme-rgb), .20), rgba(var(--theme-rgb), .06)); border: 1px solid rgba(var(--theme-rgb), .24); font-size: 2rem; }
.tutorial-body h3 { margin: 0 0 8px; font-size: 1.05rem; }
.tutorial-body p { margin: 0; color: var(--muted); line-height: 1.62; }
.tutorial-tip { margin-top: 13px; padding: 9px 11px; border-radius: 11px; background: color-mix(in srgb, var(--surface-2) 84%, transparent); color: var(--muted); font-size: .72rem; }
.tutorial-action { justify-self:start; min-height:44px; margin-top:17px; }
.tutorial-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; }
.tutorial-footer > span { text-align: center; font-size: .68rem; }
.tutorial-footer > div { display: flex; gap: 7px; }
.book-reader-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0c10; color: #f8f8fb; }
.book-reader-dialog::backdrop { background: #0b0c10; }
.book-reader-shell { height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.book-reader-workspace { min-height: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); overflow: hidden; }
.book-thumbnail-rail { min-width: 0; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding: 12px 9px; background: color-mix(in srgb, var(--surface) 96%, #08090d); border-right: 1px solid var(--border); scrollbar-width: thin; }
.book-thumbnail { display: grid; gap: 4px; justify-items: center; width: 92px; padding: 5px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); color: var(--muted); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.book-thumbnail:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--purple) 54%, var(--border)); }
.book-thumbnail.active { border-color: var(--purple-3); background: color-mix(in srgb, var(--purple) 18%, var(--surface-2)); color: var(--text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--purple-3) 36%, transparent); }
.book-thumbnail canvas { display: block; width: 82px; max-width: 100%; height: auto; background: #fff; border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.24); }
.book-thumbnail > span { font-size: .62rem; font-weight: 800; }
.book-reader-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: color-mix(in srgb, var(--surface) 96%, #08090d); border-bottom: 1px solid var(--border); }
.book-reader-topbar h2 { margin: 2px 0 0; font-size: 1rem; max-width: min(60vw, 760px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-reader-topbar .muted { font-size: .66rem; }
.book-reader-actions { display: flex; align-items: center; gap: 7px; }
.book-reader-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; background: color-mix(in srgb, var(--surface-2) 96%, #08090d); border-bottom: 1px solid var(--border); }
.book-reader-toolbar label { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); }
.book-reader-toolbar input { width: 66px; min-height: 34px; padding: 5px 7px; text-align: center; }
.book-reader-toolbar select { min-height: 34px; max-width: 145px; }
.book-reader-viewport { position: relative; overflow: auto; display: block; padding: 20px; overscroll-behavior: contain; touch-action: pan-x pan-y; background: #15161b; -webkit-overflow-scrolling: touch; }
.book-reader-page-surface { position: relative; width: max-content; min-width: min-content; margin: 0 auto; line-height: 0; }
.book-reader-viewport canvas { display: block; max-width: none; background: white; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 12px 44px rgba(0,0,0,.34); image-rendering: auto; transform: translateZ(0); transform-origin: 0 0; }
.book-reader-viewport.pinching canvas { box-shadow: 0 16px 52px rgba(0,0,0,.38); }
.book-reader-viewport.pinching { cursor: zoom-in; }
.book-reader-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12,13,17,.82); color: #fff; font-weight: 800; }
.book-reader-loading[hidden] { display: none; }
.book-reader-footer { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 7px 14px; background: color-mix(in srgb, var(--surface) 96%, #08090d); border-top: 1px solid var(--border); font-size: .68rem; color: var(--muted); }
.book-reader-progress { flex: 1; height: 4px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.book-reader-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--purple), var(--purple-3)); }
.book-edit-dialog .checkbox-inline { margin-top: 4px; }
@media (max-width: 1000px) {
.dashboard-library-grid, .stats-priority-grid { grid-template-columns: 1fr; }
.library-toolbar { grid-template-columns: 1fr 1fr 1fr; }
.library-search { grid-column: 1 / -1; }
.library-toolbar #bookViewToggle { justify-self: stretch; }
}
@media (max-width: 720px) {
.dashboard-library-grid { margin-top: 12px; }
.continue-reading-card { grid-template-columns: 54px minmax(0,1fr); }
.continue-reading-card img, .continue-reading-placeholder { width: 54px; }
.continue-reading-card .button { grid-column: 1 / -1; }
.library-hero { align-items: stretch; flex-direction: column; }
.library-toolbar { grid-template-columns: 1fr 1fr; }
.library-search { grid-column: 1 / -1; }
.library-status-row { flex-direction: column; gap: 3px; }
.book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.stats-ring-grid { grid-template-columns: 1fr; }
.stat-ring { width: 132px; }
.tutorial-shell { padding: 16px; }
.tutorial-body { min-height: 190px; padding: 16px 2px; }
.tutorial-action { width:100%; }
.tutorial-footer { grid-template-columns: 1fr auto; }
.tutorial-footer > span { display: none; }
.tutorial-footer > div { justify-self: end; }
.book-reader-topbar { align-items: flex-start; padding: 9px 10px; }
.book-reader-actions .button { display: none; }
.book-reader-toolbar { justify-content: flex-start; overflow-x: auto; }
.book-reader-toolbar > * { flex: 0 0 auto; }
.book-reader-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: 94px minmax(0, 1fr); }
.book-thumbnail-rail { grid-row: 1; grid-column: 1; display: flex; align-items: start; overflow-x: auto; overflow-y: hidden; padding: 7px 9px; border-right: 0; border-bottom: 1px solid var(--border); }
.book-thumbnail { flex: 0 0 61px; width: 61px; padding: 3px; }
.book-thumbnail canvas { width: 53px; }
.book-reader-viewport { grid-row: 2; padding: 10px; }
}
@media (max-width: 430px) {
.book-grid { grid-template-columns: 1fr; }
.book-card { display: grid; grid-template-columns: 94px minmax(0,1fr); }
.book-cover-wrap { height: 126px; aspect-ratio: auto; }
.book-card-body { align-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.book-card, .tutorial-progress span { transition: none !important; }
}
#dashboardContinueReading[hidden] + .patch-notes-panel { grid-column: 1 / -1; }
/* ==========================================================
Gepetinho v14.9.0 · Estatísticas temporais e hierarquia
========================================================== */
.stats-page-v149 { display: grid; gap: 16px; }
.stats-filter-panel { padding: 18px; }
.stats-filter-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:14px; }
.stats-filter-heading h2 { margin: 2px 0 4px; }
.stats-filter-heading .muted { margin:0; font-size:.74rem; }
.stats-filter-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr .9fr 1fr; gap:10px; }
.stats-filter-grid label, .stats-custom-range label { display:grid; gap:6px; }
.stats-filter-grid label > span, .stats-custom-range label > span { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; }
.stats-filter-grid select, .stats-custom-range input { width:100%; min-height:40px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); padding:0 11px; }
.stats-custom-range { display:grid; grid-template-columns:repeat(2,minmax(0,180px)); gap:10px; margin-top:10px; }
.stats-custom-range[hidden] { display:none; }
.stats-context-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px; }
.stats-period-chip { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; border:1px solid color-mix(in srgb,var(--border) 70%, rgb(var(--theme-rgb)) 30%); background:rgba(var(--theme-rgb),.08); font-size:.7rem; font-weight:800; }
.stats-legacy-notice { margin:0; color:var(--muted); font-size:.69rem; line-height:1.45; }
.stats-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stats-summary-card { min-height:112px; padding:16px 17px; border-radius:16px; border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 94%, transparent); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; justify-content:center; }
.stats-summary-card > span { color:var(--muted); font-size:.72rem; font-weight:800; }
.stats-summary-card > strong { margin:4px 0 7px; font-size:clamp(1.75rem,3vw,2.35rem); line-height:1; letter-spacing:-.04em; }
.stats-summary-card > small { color:var(--muted); font-size:.67rem; font-weight:700; }
.stats-summary-card > small.positive { color:#22c55e; }.stats-summary-card > small.negative { color:#f43f5e; }
.stats-summary-card.correct { border-color:color-mix(in srgb,#22c55e 28%,var(--border)); }.stats-summary-card.correct > strong { color:color-mix(in srgb,#22c55e 82%,var(--text)); }
.stats-summary-card.wrong { border-color:color-mix(in srgb,#f43f5e 28%,var(--border)); }.stats-summary-card.wrong > strong { color:color-mix(in srgb,#f43f5e 82%,var(--text)); }
.stats-summary-card.accent { background:linear-gradient(135deg,rgba(var(--theme-rgb),.14),color-mix(in srgb,var(--surface) 94%,transparent)); border-color:rgba(var(--theme-rgb),.22); }
.stats-insight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.stats-insight-card { min-height:118px; padding:16px 17px; }
.stats-insight-card .eyebrow { margin-bottom:10px; }.stats-insight-card > strong { display:block; font-size:1.05rem; margin-bottom:6px; }.stats-insight-card > span { color:var(--muted); font-size:.72rem; line-height:1.45; }
.stats-graphs-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); gap:16px; }
.stats-trend-panel { min-width:0; }.stats-mini-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:.68rem; color:var(--muted); font-weight:700; }.stats-mini-legend span{display:flex;align-items:center;gap:5px}.stats-mini-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.stats-mini-legend .correct{background:#22c55e}.stats-mini-legend .wrong{background:#f43f5e}
.stats-trend-bars { min-height:210px; display:flex; align-items:flex-end; gap:6px; padding:14px 2px 0; overflow-x:auto; scrollbar-width:thin; }
.stats-trend-bucket { flex:1 0 22px; min-width:22px; height:190px; display:grid; grid-template-rows:1fr 22px; gap:5px; align-items:end; text-align:center; }
.stats-trend-column { height:100%; display:flex; flex-direction:column-reverse; justify-content:flex-start; overflow:hidden; border-radius:6px 6px 3px 3px; background:color-mix(in srgb,var(--muted) 9%,transparent); }
.stats-trend-segment { display:block; width:100%; min-height:0; transition:height .18s ease; }.stats-trend-segment.correct{background:#22c55e}.stats-trend-segment.wrong{background:#f43f5e}
.stats-trend-bucket small { color:var(--muted); font-size:.58rem; white-space:nowrap; }.stats-trend-empty { width:100%; align-self:center; padding:30px 16px; text-align:center; color:var(--muted); font-size:.76rem; }
.stats-outcome-layout { min-height:210px; display:grid; place-items:center; grid-template-columns:1fr; gap:12px; }
.stats-outcome-donut-v149 { --stats-correct-angle:0deg; width:min(154px,48vw); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#22c55e 0 var(--stats-correct-angle),#f43f5e var(--stats-correct-angle) 360deg); position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.stats-outcome-donut-v149::after { content:""; position:absolute; inset:17%; border-radius:50%; background:color-mix(in srgb,var(--surface) 96%,transparent); border:1px solid var(--border); }
.stats-outcome-donut-v149 > div { position:relative; z-index:1; text-align:center; }.stats-outcome-donut-v149 strong{display:block;font-size:1.7rem;line-height:1}.stats-outcome-donut-v149 span{display:block;margin-top:5px;color:var(--muted);font-size:.62rem;font-weight:800}
.stats-outcome-numbers { display:grid; grid-template-columns:repeat(2,1fr); width:100%; gap:8px; }.stats-outcome-numbers > div{display:grid;grid-template-columns:10px auto;align-items:center;column-gap:7px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.018)}.stats-outcome-numbers .dot{width:8px;height:8px;border-radius:50%;grid-row:1/3}.stats-outcome-numbers .dot.correct{background:#22c55e}.stats-outcome-numbers .dot.wrong{background:#f43f5e}.stats-outcome-numbers strong{font-size:.9rem}.stats-outcome-numbers small{color:var(--muted);font-size:.6rem}
.stats-analysis-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.stats-analysis-grid > .panel { min-width:0; }
@media (max-width:1050px){.stats-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-insight-grid{grid-template-columns:1fr}.stats-graphs-grid{grid-template-columns:1fr}.stats-outcome-layout{grid-template-columns:auto minmax(180px,1fr)}.stats-outcome-numbers{max-width:280px}}
@media (max-width:720px){.stats-filter-heading{align-items:stretch;flex-direction:column}.stats-filter-grid{grid-template-columns:1fr 1fr}.stats-analysis-grid{grid-template-columns:1fr}.stats-outcome-layout{grid-template-columns:1fr}.stats-summary-card{min-height:96px}.stats-trend-bars{min-height:180px}.stats-trend-bucket{height:160px}}
@media (max-width:480px){.stats-filter-grid,.stats-summary-grid{grid-template-columns:1fr}.stats-custom-range{grid-template-columns:1fr}.stats-summary-card{min-height:86px}.stats-insight-card{min-height:0}}
.stats-outcome-donut-v149.empty { background: color-mix(in srgb,var(--muted) 22%,transparent); }
/* v15 alpha.3 — textos-base/contextos compartilhados, carregados sob demanda */
.question-source-context { margin: 10px 0 2px; }
.question-source-context-panel { margin: 10px 0 14px; display: grid; gap: 10px; }
.question-source-context-panel[hidden] { display: none; }
.source-context-block { padding: 13px 14px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); }
.source-context-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.source-context-head span { color: var(--muted); font-size: 12px; }
.source-context-text { color: var(--text); line-height: 1.55; white-space: pre-wrap; max-height: 360px; overflow: auto; padding-right: 4px; }
.source-context-image { display: block; width: min(100%, 980px); max-height: 520px; object-fit: contain; margin: 10px auto 0; border-radius: 12px; background: rgba(255,255,255,.92); }
.source-context-loading { color: var(--muted); font-size: 13px; }
.alternative-original-visual {
flex: 1 1 100%; margin: 8px 0 2px 42px; padding: 7px 9px;
border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}
.alternative-original-visual summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.alternative-original-image { display: block; max-width: min(100%, 720px); max-height: 170px; object-fit: contain; margin-top: 7px; border-radius: 8px; background: #fff; }
@media (max-width: 720px) { .source-context-head { align-items: flex-start; flex-direction: column; gap: 4px; } .source-context-text { max-height: 300px; } }
/* v15 alpha - revisão de textos-base/contextos */
.pdf-source-context-summary {
display: grid;
gap: 8px;
margin: 10px 0 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}
.pdf-source-context-summary > strong { font-size: .82rem; }
.pdf-source-context-chip {
display: inline-flex;
width: fit-content;
max-width: 100%;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid var(--border);
font-size: .75rem;
color: var(--muted);
}
.pdf-source-context-chip.visual { color: var(--text); }
.pdf-source-context-preview {
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pdf-source-context-preview img {
width: 100%;
max-height: 300px;
object-fit: contain;
border-radius: 10px;
background: rgba(255,255,255,.94);
}
/* =========================================================
V15 · Banco de Questões — alinhamento ao workspace de referência
Builder de filtros primeiro, resultados em segundo estado.
========================================================= */
.bank-page .bank-workspace {
display: block;
width: 100%;
min-width: 0;
}
.bank-reference-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
padding: 18px 20px;
border-radius: 18px;
}
.bank-reference-title-line {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.bank-reference-title-line h2 { margin: 0; font-size: 1.28rem; letter-spacing: -.02em; }
.bank-reference-header p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.bank-total-pill,
.bank-selection-count {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 27px;
padding: 4px 9px;
border: 1px solid rgba(var(--theme-rgb-3), .22);
border-radius: 999px;
background: rgba(var(--theme-rgb), .08);
color: var(--bank-accent-ink);
font-size: .7rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.bank-reference-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bank-builder-shell {
display: grid;
grid-template-columns: minmax(310px, 4fr) minmax(0, 8fr);
gap: 14px;
min-width: 0;
min-height: 500px;
}
.bank-builder-shell[hidden],
.bank-action-dock[hidden],
.bank-results-shell[hidden] { display: none !important; }
.bank-builder-shell .bank-filter-panel {
position: static;
top: auto;
max-height: none;
min-height: 500px;
overflow: hidden;
padding: 16px;
border-radius: 18px;
}
.bank-builder-shell .bank-filter-heading { padding-bottom: 10px; }
.bank-builder-shell .bank-filter-tabs {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 5px;
scrollbar-width: thin;
}
.bank-builder-shell .bank-filter-tab {
flex: 0 0 auto;
min-height: 36px;
padding-inline: 10px;
white-space: nowrap;
}
.bank-builder-shell .bank-filter-panes {
min-height: 0;
margin-top: 4px;
}
.bank-hierarchy-search-label {
display: grid;
gap: 5px;
margin-bottom: 3px !important;
color: var(--muted);
}
.bank-hierarchy-search-label input { margin-top: 0 !important; }
.bank-builder-shell .bank-hierarchy {
max-height: 360px;
min-height: 170px;
padding: 3px;
}
.bank-advanced-filter-fallback {
margin-top: 4px;
border-top: 1px solid var(--border);
padding-top: 8px;
}
.bank-advanced-filter-fallback > summary {
cursor: pointer;
color: var(--muted);
font-size: .72rem;
font-weight: 800;
list-style: none;
}
.bank-advanced-filter-fallback > summary::-webkit-details-marker { display: none; }
.bank-advanced-filter-fallback > summary::before { content: "＋"; margin-right: 6px; color: var(--bank-accent-ink); }
.bank-advanced-filter-fallback[open] > summary::before { content: "−"; }
.bank-advanced-filter-grid { display: grid; gap: 8px; margin-top: 9px; }
.bank-selection-panel {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 500px;
padding: 20px;
border-radius: 18px;
background:
radial-gradient(circle at 92% 0%, rgba(var(--theme-rgb), .10), transparent 32%),
color-mix(in srgb, var(--surface-2) 94%, transparent);
}
.bank-selection-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.bank-selection-heading h2 { margin: 2px 0 5px; font-size: 1.15rem; }
.bank-selection-heading p:last-child { max-width: 650px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.bank-selection-panel .bank-filter-summary { margin-top: 14px; }
.bank-selection-panel .bank-filter-chips {
align-content: flex-start;
min-height: 115px;
max-height: 230px;
padding: 10px 0 16px;
}
.bank-removable-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 29px;
padding: 4px 5px 4px 9px !important;
border-radius: 10px !important;
}
.filter-chip-remove {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
font-size: 1rem;
line-height: 1;
opacity: .72;
}
.filter-chip-remove:hover { background: rgba(var(--theme-rgb), .14); opacity: 1; }
.bank-selection-panel .bank-filter-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: auto;
}
.bank-selection-help-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
margin-top: 14px;
}
.bank-selection-help-grid article {
display: grid;
gap: 3px;
padding: 11px 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bank-surface-soft);
}
.bank-selection-help-grid strong { font-size: .74rem; }
.bank-selection-help-grid span { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.bank-action-dock {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 14px;
padding: 12px 14px;
border-radius: 16px;
}
.bank-action-count {
display: flex;
align-items: center;
gap: 7px;
color: var(--muted);
font-size: .8rem;
font-weight: 700;
}
.bank-action-count strong { color: var(--text); font-size: .9rem; font-variant-numeric: tabular-nums; }
.bank-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #35c977; box-shadow: 0 0 0 4px rgba(53,201,119,.10); }
.bank-action-buttons { display: flex; align-items: center; gap: 8px; }
.bank-action-buttons .button { min-height: 40px; }
.bank-results-shell { width: 100%; min-width: 0; }
.bank-results-toolbar { position: sticky; top: 90px; z-index: 9; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-importer-shortcut { color: color-mix(in srgb, var(--text) 84%, var(--purple-3)); }
.nav-importer-badge {
display: inline-grid;
place-items: center;
min-width: 30px;
min-height: 20px;
padding: 0 6px;
border-radius: 999px;
border: 1px solid rgba(var(--theme-rgb-3), .2);
background: rgba(var(--theme-rgb), .10);
color: var(--bank-accent-ink, var(--purple-3));
font-size: .62rem;
font-weight: 900;
}
.pdf-import-panel.importer-highlight {
animation: importer-highlight-pulse 1.55s ease both;
}
@keyframes importer-highlight-pulse {
0%,100% { box-shadow: none; }
25% { box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .25), 0 18px 42px rgba(var(--theme-rgb), .13); }
}
@media (max-width: 1080px) {
.bank-builder-shell { grid-template-columns: 1fr; min-height: 0; }
.bank-builder-shell .bank-filter-panel,
.bank-selection-panel { min-height: 0; }
.bank-builder-shell .bank-hierarchy { max-height: 280px; }
.bank-selection-panel .bank-filter-chips { min-height: 72px; }
}
@media (max-width: 720px) {
.bank-reference-header { align-items: stretch; flex-direction: column; padding: 15px; }
.bank-reference-header-actions { width: 100%; }
.bank-reference-header-actions .button { flex: 1 1 0; }
.bank-builder-shell .bank-filter-panel,
.bank-selection-panel { padding: 13px; }
.bank-builder-shell .bank-filter-tabs { margin-inline: -2px; }
.bank-selection-heading { flex-direction: column; }
.bank-selection-help-grid { grid-template-columns: 1fr; }
.bank-action-dock { align-items: stretch; flex-direction: column; }
.bank-action-buttons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.bank-action-buttons #bankOpenResultsBtn { grid-column: 1 / -1; }
.bank-action-buttons .button { width: 100%; }
.bank-results-toolbar { position: static; }
}
@media (max-width: 460px) {
.bank-reference-title-line { align-items: flex-start; flex-direction: column; }
.bank-action-buttons { grid-template-columns: 1fr; }
.bank-action-buttons #bankOpenResultsBtn { grid-column: auto; }
}
/* Em tablets/telefones com viewport CSS largo, prefira o menu recolhível. */
@media (max-width: 1024px) {
.mobile-only { display: inline-grid; place-items: center; }
.sidebar { transform: translateX(-102%); transition: transform .2s ease; box-shadow: 20px 0 50px rgba(0,0,0,.4); }
.sidebar.open { transform: translateX(0); }
.main { margin-left: 0; }
}
/* =========================================================
V15 · BANK_REFERENCE_LAYOUT_PARITY_V3
Paridade de composição com a referência: rail compacto,
topnav do workspace e fluxo vertical em largura total.
========================================================= */
.bank-workspace-topnav {
min-width: 0;
flex: 1 1 auto;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.bank-workspace-topnav:not([hidden]) { display: flex; }
.bank-workspace-top-tabs,
.bank-workspace-top-tools {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.bank-workspace-top-tab {
min-height: 38px;
padding: 7px 12px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: .76rem;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
.bank-workspace-top-tab:hover { background: var(--bank-surface-hover); color: var(--text); }
.bank-workspace-top-tab.active {
color: var(--bank-accent-ink);
border-color: rgba(var(--theme-rgb), .16);
background: var(--bank-accent-fill);
}
.bank-topbar-total {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 32px;
padding: 4px 9px;
border-radius: 9px;
border: 1px solid var(--border);
background: var(--bank-surface-soft);
color: var(--muted);
font-size: .7rem;
font-variant-numeric: tabular-nums;
}
.bank-topbar-total strong { color: var(--bank-accent-ink); }
/* O builder segue a referência: uma coluna central, em blocos verticais. */
.bank-page .bank-workspace {
max-width: 1260px;
margin: 0 auto;
}
.bank-builder-shell {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
}
.bank-builder-shell .bank-filter-panel,
.bank-selection-panel {
width: 100%;
min-height: 0;
max-height: none;
}
.bank-builder-shell .bank-filter-panel {
display: flex;
flex-direction: column;
padding: 14px;
overflow: visible;
}
.bank-builder-shell .bank-filter-tabs {
order: 0;
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 5px;
border: 1px solid var(--border);
border-radius: 13px;
background: color-mix(in srgb, var(--bank-surface-soft) 90%, transparent);
}
.bank-builder-shell .bank-filter-tab {
min-height: 36px;
border-radius: 9px;
padding: 7px 12px;
}
.bank-builder-shell .bank-filter-heading {
order: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 2px 4px 10px;
border-bottom: 0;
}
.bank-builder-shell .bank-filter-heading h2 {
margin: 1px 0 3px;
font-size: 1rem;
}
.bank-builder-shell .bank-filter-help { margin: 0; max-width: 720px; }
.bank-builder-shell .bank-jump-results { display: none; }
.bank-builder-shell .bank-filter-panes { order: 2; margin-top: 0; }
.bank-filter-pane.active {
padding: 12px;
border: 1px solid var(--border);
border-radius: 14px;
background: color-mix(in srgb, var(--surface-2) 94%, transparent);
}
.bank-hierarchy-search-label {
max-width: none;
margin: 0 0 10px !important;
font-size: 0;
}
.bank-hierarchy-search-label input {
min-height: 40px;
font-size: .76rem;
border-radius: 10px;
background: var(--bank-surface-soft);
}
.bank-builder-shell .bank-hierarchy {
max-height: min(54vh, 600px);
min-height: 310px;
padding: 3px 2px 5px;
gap: 3px;
scrollbar-width: thin;
}
.bank-hierarchy-subject {
border: 0;
border-radius: 9px;
background: transparent;
}
.bank-hierarchy-subject > summary {
min-height: 36px;
padding: 6px 9px;
border-radius: 8px;
border: 1px solid transparent;
}
.bank-hierarchy-subject > summary:hover { background: var(--bank-surface-hover); }
.bank-hierarchy-subject.selected > summary {
border-color: rgba(var(--theme-rgb), .17);
background: rgba(var(--theme-rgb), .12);
}
.bank-hierarchy-subject > summary::before { order: 4; margin-left: 1px; }
.bank-tree-label { min-width: 0; }
.bank-tree-check {
display: inline-grid;
place-items: center;
width: 17px;
height: 17px;
flex: 0 0 17px;
border: 1px solid var(--border-strong);
border-radius: 5px;
background: var(--bank-surface-soft);
color: transparent;
font-size: .64rem;
font-weight: 950;
cursor: pointer;
}
.bank-tree-check.checked {
border-color: rgba(var(--theme-rgb), .68);
background: linear-gradient(135deg, rgba(var(--theme-rgb), .92), rgba(var(--theme-rgb-2), .9));
color: white;
box-shadow: 0 0 0 2px rgba(var(--theme-rgb), .09);
}
.bank-tree-check.mixed {
border-color: rgba(var(--theme-rgb), .62);
background: rgba(var(--theme-rgb), .16);
color: var(--bank-accent-ink);
}
.bank-tree-check:focus-visible { outline: 2px solid rgba(var(--theme-rgb), .55); outline-offset: 2px; }
.bank-hierarchy-topics {
position: relative;
gap: 1px;
margin-left: 15px;
padding: 0 5px 6px 18px;
}
.bank-hierarchy-topics::before {
content: "";
position: absolute;
left: 7px;
top: 0;
bottom: 9px;
width: 1px;
background: linear-gradient(180deg, rgba(var(--theme-rgb), .36), rgba(var(--theme-rgb), .05));
}
.bank-hierarchy-topic,
.bank-hierarchy-section {
position: relative;
min-height: 30px;
padding: 4px 7px;
border-radius: 7px;
}
.bank-hierarchy-topic.selected,
.bank-hierarchy-section.selected {
color: var(--text);
background: rgba(var(--theme-rgb), .10);
}
.bank-hierarchy-topic::before,
.bank-hierarchy-section::before {
content: "";
position: absolute;
left: -11px;
top: 50%;
width: 9px;
height: 1px;
background: rgba(var(--theme-rgb), .20);
}
.bank-hierarchy-section {
padding-left: 22px;
font-size: .7rem;
}
.bank-hierarchy-section::before { left: 3px; width: 10px; }
.bank-hierarchy-topic .bank-tree-check,
.bank-hierarchy-section .bank-tree-check { margin-right: 1px; }
.bank-advanced-filter-fallback { margin-top: 8px; }
.bank-selection-panel {
padding: 18px;
background: color-mix(in srgb, var(--surface-2) 96%, transparent);
}
.bank-selection-panel .bank-filter-chips {
min-height: 58px;
max-height: none;
padding: 10px 0 14px;
}
.bank-selection-panel .bank-filter-actions {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 4px;
}
.bank-selection-help-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 10px;
}
.bank-action-dock {
position: sticky;
bottom: 10px;
z-index: 12;
max-width: 1260px;
margin: 14px auto 0;
border-color: rgba(var(--theme-rgb), .18);
background: color-mix(in srgb, var(--surface-1) 88%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 14px 42px rgba(0,0,0,.16);
}
.bank-action-buttons #bankOpenResultsBtn { min-width: 150px; }
/* Desktop: o banco usa um rail de ícones como a referência sem alterar as outras páginas. */
@media (min-width: 1025px) {
body.bank-reference-page { --bank-rail-width: 72px; }
body.bank-reference-page .sidebar {
width: var(--bank-rail-width);
align-items: center;
}
body.bank-reference-page .main { margin-left: var(--bank-rail-width); }
body.bank-reference-page .sidebar-top {
width: 100%;
justify-content: center;
padding: 14px 8px 12px;
}
body.bank-reference-page .brand { justify-content: center; }
body.bank-reference-page .brand > div:not(.brand-mark),
body.bank-reference-page .nav-item > span:not(.nav-icon):not(.nav-count),
body.bank-reference-page .nav-subitem > .nav-label,
body.bank-reference-page .nav-group-title > span:not(.nav-icon),
body.bank-reference-page .profile-copy,
body.bank-reference-page .sidebar-bottom .icon-button { display: none !important; }
body.bank-reference-page .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
body.bank-reference-page .nav { width: 100%; padding: 12px 9px; align-items: center; gap: 8px; }
body.bank-reference-page .nav-group {
width: 100%;
display: grid;
justify-items: center;
gap: 6px;
border: 0;
background: transparent;
overflow: visible;
}
body.bank-reference-page .nav-group-title,
body.bank-reference-page .nav-item,
body.bank-reference-page .nav-subitem {
position: relative;
width: 46px;
min-width: 46px;
height: 42px;
min-height: 42px;
justify-content: center;
padding: 0;
border-radius: 11px;
}
body.bank-reference-page .nav-group-title { height: 34px; min-height: 34px; opacity: .7; }
body.bank-reference-page .nav-icon { width: auto; margin: 0; font-size: 1rem; }
body.bank-reference-page .nav-subitem .nav-count,
body.bank-reference-page .nav-importer-badge {
position: absolute;
right: -4px;
top: -5px;
min-width: 18px;
min-height: 18px;
height: 18px;
padding: 0 4px;
font-size: .55rem;
}
body.bank-reference-page .nav-importer-badge { font-size: 0; width: 8px; min-width: 8px; height: 8px; min-height: 8px; padding: 0; top: 2px; right: 2px; }
body.bank-reference-page .sidebar-bottom { width: 100%; padding: 10px 8px; }
body.bank-reference-page .profile-card { justify-content: center; padding: 6px; background: transparent; }
body.bank-reference-page .profile-avatar { width: 36px; height: 36px; }
body.bank-reference-page .topbar {
min-height: 64px;
padding: 10px clamp(14px, 2vw, 26px);
gap: 14px;
}
body.bank-reference-page .topbar-left { display: none; }
body.bank-reference-page .topbar-actions { flex: 0 1 310px; }
body.bank-reference-page .global-search-wrap { min-width: 180px; }
body.bank-reference-page .page-wrap { padding-top: 18px; }
}
@media (max-width: 1024px) {
.bank-workspace-topnav { display: none !important; }
.bank-page .bank-workspace { max-width: 900px; }
.bank-builder-shell .bank-hierarchy { max-height: 430px; min-height: 260px; }
.bank-selection-panel .bank-filter-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.bank-page .bank-workspace { width: 100%; }
.bank-reference-header { border-radius: 14px; }
.bank-builder-shell .bank-filter-panel,
.bank-selection-panel { border-radius: 14px; }
.bank-builder-shell .bank-filter-tabs { overflow-x: auto; flex-wrap: nowrap; }
.bank-builder-shell .bank-filter-tab { flex: 0 0 auto; }
.bank-builder-shell .bank-hierarchy {
max-height: min(42vh, 390px);
min-height: 172px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
.bank-selection-panel .bank-filter-actions { grid-template-columns: 1fr 1fr; }
.bank-action-dock { position: static; }
}
/* V3 tree alignment: the generic legacy span rule must not push checkbox glyphs. */
.bank-hierarchy-subject summary > .bank-tree-check { margin-right: 0 !important; overflow: visible; }
.bank-hierarchy-subject summary > .bank-tree-label { margin-right: auto !important; text-align: left; }
.bank-hierarchy-topic > .bank-tree-check,
.bank-hierarchy-section > .bank-tree-check { margin-right: 1px !important; overflow: visible; }
.bank-hierarchy-topic > span:not(.bank-tree-check),
.bank-hierarchy-section > span:not(.bank-tree-check) { margin-right: auto; text-align: left; }
.bank-additional-options {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.bank-options-label {
margin: 0 0 9px;
color: var(--muted-2);
font-size: .62rem;
font-weight: 900;
letter-spacing: .13em;
}
.bank-option-toggle-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.bank-option-toggle-grid label {
display: flex;
align-items: center;
gap: 8px;
min-height: 42px;
margin: 0;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bank-surface-soft);
color: var(--text);
font-size: .7rem;
font-weight: 760;
cursor: pointer;
}
.bank-option-toggle-grid input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--purple);
}
.bank-admin-tools {
margin-top: 12px;
border-top: 1px solid var(--border);
padding-top: 9px;
}
.bank-admin-tools > summary {
cursor: pointer;
list-style: none;
color: var(--muted);
font-size: .7rem;
font-weight: 850;
}
.bank-admin-tools > summary::-webkit-details-marker { display: none; }
.bank-admin-tools > summary::before { content: "＋"; margin-right: 6px; color: var(--bank-accent-ink); }
.bank-admin-tools[open] > summary::before { content: "−"; }
.bank-admin-tools .bank-filter-actions { margin-top: 9px; }
@media (max-width: 900px) {
.bank-option-toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.bank-option-toggle-grid { grid-template-columns: 1fr; }
}
/* =========================================================
V15 · Sidebar ergonomics V4 — crisp icons + true collapse
========================================================= */
.nav-icon {
width: 22px;
height: 22px;
min-width: 22px;
flex: 0 0 22px;
display: grid;
place-items: center;
line-height: 1;
color: var(--purple-3);
}
.nav-icon svg {
width: 20px;
height: 20px;
display: block;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.desktop-sidebar-toggle {
display: none;
flex: 0 0 40px;
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 12px;
font-size: 1.35rem;
line-height: 1;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
@media (min-width: 1025px) {
.desktop-sidebar-toggle { display: inline-grid; place-items: center; }
.sidebar {
transition: transform .2s ease, box-shadow .2s ease;
will-change: transform;
}
.main {
transition: margin-left .2s ease, width .2s ease;
}
.desktop-sidebar-toggle + .topbar-left { margin-right: auto; }
.topbar-actions { margin-left: auto; }
body.sidebar-hidden .sidebar {
transform: translateX(-105%) !important;
pointer-events: none;
box-shadow: none !important;
}
body.sidebar-hidden .main,
body.sidebar-hidden.bank-reference-page .main {
margin-left: 0 !important;
width: 100% !important;
}
/* Banco: caixas quadradas e ícones SVG preservam proporção no rail. */
body.bank-reference-page .nav-group-title,
body.bank-reference-page .nav-item,
body.bank-reference-page .nav-subitem {
width: 48px;
min-width: 48px;
height: 48px;
min-height: 48px;
display: grid;
place-items: center;
padding: 0;
gap: 0;
border-radius: 13px;
overflow: visible;
}
body.bank-reference-page .nav-group-title {
height: 42px;
min-height: 42px;
}
body.bank-reference-page .nav-icon {
width: 24px;
height: 24px;
min-width: 24px;
flex-basis: 24px;
}
body.bank-reference-page .nav-icon svg {
width: 22px;
height: 22px;
stroke-width: 1.9;
}
body.bank-reference-page .nav-item.active,
body.bank-reference-page .nav-subitem.active {
box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb), .18), 0 6px 18px rgba(0,0,0,.12);
}
body.bank-reference-page .nav-item.active { box-shadow: inset 3px 0 0 var(--purple), inset 0 0 0 1px rgba(var(--theme-rgb), .18); }
/* No workspace do banco a topbar-left antiga continua oculta,
mas o botão global de recolher permanece acessível. */
body.bank-reference-page .desktop-sidebar-toggle {
order: -2;
}
}
@media (max-width: 1024px) {
.desktop-sidebar-toggle { display: none !important; }
}
/* v15 UX — motor documental visível sem promover o shadow V2 para payload oficial. */
.pdf-engine-panel {
margin: 14px 0 18px;
padding: 14px;
border: 1px solid color-mix(in srgb, var(--border) 82%, var(--purple-3));
border-radius: 15px;
background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}
.pdf-engine-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.pdf-engine-heading h3 { margin: 2px 0 0; font-size: .95rem; }
.pdf-engine-badge {
flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-3) 90%, transparent); color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .08em;
}
.pdf-engine-badge[data-mode="experimental"], .pdf-engine-badge[data-mode="compare"] {
color: var(--text); border-color: color-mix(in srgb, var(--purple) 50%, var(--border));
background: color-mix(in srgb, var(--purple) 14%, var(--surface-2));
}
.pdf-engine-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.pdf-engine-option {
display: flex; gap: 9px; align-items: flex-start; min-width: 0; padding: 11px; border: 1px solid var(--border);
border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); cursor: pointer;
}
.pdf-engine-option:has(input:checked) {
border-color: color-mix(in srgb, var(--purple) 62%, var(--border));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 28%, transparent);
background: color-mix(in srgb, var(--purple) 9%, var(--surface));
}
.pdf-engine-option input { margin-top: 2px; accent-color: var(--purple); }
.pdf-engine-option span { min-width: 0; display: grid; gap: 4px; }
.pdf-engine-option strong { font-size: .76rem; }
.pdf-engine-option strong em { font-style: normal; font-size: .56rem; padding: 2px 5px; margin-left: 4px; border-radius: 999px; background: color-mix(in srgb, var(--purple) 17%, var(--surface-3)); color: var(--purple-3); }
.pdf-engine-option small, .pdf-engine-status { color: var(--muted); font-size: .66rem; line-height: 1.45; }
.pdf-engine-status { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.pdf-engine-queue-line { display: block; margin-top: 4px; color: color-mix(in srgb, var(--purple-3) 72%, var(--text)); font-weight: 700; }
/* v15 UX — leitor de livros: folha inteira, largura e modo leitura limpa. */
.book-fit-controls { display: inline-flex; align-items: center; gap: 4px; }
.book-reader-toolbar button[aria-pressed="true"] {
border-color: color-mix(in srgb, var(--purple) 56%, var(--border));
background: color-mix(in srgb, var(--purple) 15%, var(--surface-3));
color: var(--text);
}
.book-reader-dialog.fit-page .book-reader-viewport { display: flex; align-items: safe center; justify-content: safe center; }
.book-reader-dialog.fit-page .book-reader-page-surface { margin: auto; }
.book-reader-dialog.fit-width .book-reader-viewport { display: block; }
.book-reader-dialog.fit-width .book-reader-page-surface { margin-inline: auto; }
.book-reader-hud-reveal {
position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 30;
min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
background: rgba(10,11,15,.78); color: #fff; font: inherit; font-size: .72rem; font-weight: 800;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0,0,0,.32); cursor: pointer;
}
.book-reader-hud-reveal[hidden] { display: none !important; }
.book-reader-dialog.hud-hidden .book-reader-shell { grid-template-rows: minmax(0, 1fr); }
.book-reader-dialog.hud-hidden .book-reader-topbar,
.book-reader-dialog.hud-hidden .book-reader-toolbar,
.book-reader-dialog.hud-hidden .book-reader-footer { display: none !important; }
.book-reader-dialog.hud-hidden .book-reader-viewport { grid-row: 1; padding: 10px; }
.book-reader-dialog.hud-hidden.fit-page .book-reader-viewport { display: flex; align-items: safe center; justify-content: safe center; }
.book-reader-shortcuts { white-space: nowrap; opacity: .76; }
@media (max-width: 860px) {
.pdf-engine-options { grid-template-columns: 1fr; }
.pdf-engine-option { min-height: 62px; }
.book-reader-toolbar { gap: 6px; }
.book-reader-toolbar .book-fit-controls { order: 4; }
.book-reader-shortcuts { display: none; }
}
@media (max-width: 560px) {
.book-reader-toolbar #bookFitWidthBtn { display: none; }
.book-reader-toolbar #bookBookmarkSelect { max-width: 118px; }
.book-reader-hud-reveal { top: max(9px, env(safe-area-inset-top)); right: max(9px, env(safe-area-inset-right)); min-height: 38px; padding-inline: 11px; }
}
/* v15.0.0-alpha.53 — peso editorial dos enunciados.
Fica no fim para vencer as regras históricas de responsividade acima. */
.question-card .question-statement,
.study-question-statement {
font-weight: 560;
letter-spacing: -.006em;
}
.question-card .question-statement .katex,
.study-question-statement .katex { font-weight: 400; }
/* ========================================================================== */
/* V6 · Reference UI parity: bank + list creation + answer elimination */
/* ========================================================================== */
/* Banco: composição desktop equivalente à referência fornecida pelo usuário. */
.bank-reference-columns {
display: grid;
grid-template-columns: minmax(350px, .78fr) minmax(0, 1.6fr);
gap: 14px;
align-items: stretch;
min-height: 0;
}
.bank-builder-shell > .bank-filter-tabs {
order: 0;
width: 100%;
margin: 0;
padding: 6px;
border-radius: 14px;
box-shadow: 0 5px 18px color-mix(in srgb, var(--bg-0) 26%, transparent);
}
.bank-reference-columns > .bank-filter-panel,
.bank-reference-columns > .bank-selection-panel {
min-width: 0;
min-height: 520px;
}
.bank-reference-columns > .bank-filter-panel {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 16px;
}
.bank-reference-columns > .bank-filter-panel .bank-filter-heading {
order: 0;
padding: 0 2px 12px;
}
.bank-reference-columns > .bank-filter-panel .bank-filter-panes {
order: 1;
flex: 1;
min-height: 0;
}
.bank-reference-columns .bank-filter-pane.active {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}
.bank-reference-columns .bank-hierarchy {
flex: 1;
max-height: min(58vh, 590px);
min-height: 360px;
}
.bank-reference-columns .bank-selection-panel {
display: flex;
flex-direction: column;
padding: 20px;
}
.bank-reference-columns .bank-selection-panel .bank-filter-chips {
flex: 0 1 auto;
min-height: 112px;
max-height: 270px;
overflow: auto;
align-content: flex-start;
}
.bank-reference-columns .bank-additional-options { margin-top: auto; }
.bank-reference-columns .bank-admin-tools { margin-top: 12px; }
/* Sensação mais lisa sem animações caras. */
.bank-filter-tab,
.bank-hierarchy-subject > summary,
.bank-hierarchy-topic,
.bank-hierarchy-section,
.filter-chip,
.bank-option-toggle-grid label,
.bank-action-dock .button {
transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease, opacity .12s ease;
}
.bank-hierarchy-subject {
content-visibility: auto;
contain-intrinsic-size: 42px;
}
.bank-hierarchy,
.bank-filter-chips {
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.bank-hierarchy-topic:hover,
.bank-hierarchy-section:hover { transform: translateX(1px); }
.filter-chip:hover { transform: translateY(-1px); }
@media (max-width: 1120px) {
.bank-reference-columns { grid-template-columns: 1fr; }
.bank-reference-columns > .bank-filter-panel,
.bank-reference-columns > .bank-selection-panel { min-height: 0; }
.bank-reference-columns .bank-hierarchy { min-height: 260px; max-height: 48vh; }
.bank-reference-columns .bank-selection-panel .bank-filter-chips { min-height: 72px; max-height: 210px; }
}
/* Modal de criação de lista — estrutura e hierarquia da referência. */
.reference-list-dialog,
.reference-list-success-dialog {
width: min(94vw, 680px);
max-width: none;
padding: 0;
border: 1px solid var(--border);
border-radius: 22px;
color: var(--text);
background: var(--surface-1);
box-shadow: 0 28px 90px rgba(0,0,0,.36);
overflow: hidden;
}
.reference-list-dialog::backdrop,
.reference-list-success-dialog::backdrop {
background: rgba(5, 9, 18, .66);
backdrop-filter: blur(5px);
}
.reference-list-form { display: flex; flex-direction: column; max-height: min(92vh, 900px); }
.reference-list-modal-header {
display: grid;
grid-template-columns: 42px 1fr auto;
gap: 12px;
align-items: center;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-1) 96%, rgb(var(--theme-rgb)) 4%);
}
.reference-list-modal-header h2 { margin: 0; font-size: 1.08rem; }
.reference-list-modal-header p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.reference-list-modal-icon {
width: 38px; height: 38px; display: grid; place-items: center;
border-radius: 11px; color: white; font-size: 1.05rem; font-weight: 900;
background: linear-gradient(135deg, rgb(var(--theme-rgb)), rgb(var(--theme-rgb-2)));
box-shadow: 0 8px 20px rgba(var(--theme-rgb), .25);
}
.reference-list-body { overflow: auto; padding: 18px 20px 8px; display: grid; gap: 14px; }
.reference-list-name-field { font-size: .75rem; font-weight: 750; }
.reference-list-name-field input { margin-top: 6px; min-height: 44px; border-radius: 11px; }
.reference-list-quota-card,
.reference-list-order-card {
border: 1px solid var(--border);
border-radius: 16px;
background: color-mix(in srgb, var(--surface-2) 96%, transparent);
padding: 14px;
}
.reference-list-section-heading {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px;
}
.reference-list-section-heading strong { display: block; font-size: .86rem; }
.reference-list-section-heading small { display: block; color: var(--muted); font-size: .69rem; margin-top: 3px; line-height: 1.35; }
.reference-list-section-heading.compact { margin-bottom: 10px; }
.reference-list-quick-presets { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; }
.reference-list-quick-presets span { color: var(--muted); font-size: .64rem; }
.reference-list-quick-presets button {
border: 1px solid var(--border); background: var(--surface-1); color: var(--text); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: .65rem; cursor: pointer;
}
.reference-list-quick-presets button:hover { border-color: rgba(var(--theme-rgb), .45); background: rgba(var(--theme-rgb), .08); }
.reference-list-quota-rows { display: grid; gap: 8px; max-height: 310px; overflow: auto; padding-right: 2px; }
.reference-list-quota-row {
display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1);
}
.reference-list-quota-copy > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.reference-list-quota-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.reference-list-quota-copy span { padding: 2px 6px; border-radius: 6px; background: rgba(var(--theme-rgb), .08); color: var(--muted); font-size: .58rem; white-space: nowrap; }
.reference-list-quota-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: .63rem; }
.reference-list-quota-controls { display: flex; align-items: center; gap: 5px; }
.reference-list-quota-controls button,
.reference-list-quota-controls input {
height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .68rem;
}
.reference-list-quota-controls button { min-width: 30px; cursor: pointer; }
.reference-list-quota-controls input { width: 52px; text-align: center; padding: 0 5px; font-weight: 800; }
.reference-list-quota-controls .reference-list-quota-all { min-width: auto; padding: 0 9px; color: var(--bank-accent-ink); background: rgba(var(--theme-rgb), .08); }
.reference-list-total-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: .72rem; }
.reference-list-total-row strong { padding: 5px 9px; border-radius: 9px; color: var(--bank-accent-ink); background: rgba(var(--theme-rgb), .09); }
.reference-list-order-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.reference-list-order-option {
min-height: 58px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); color: var(--muted); cursor: pointer; display: grid; place-items: center; gap: 2px; font: inherit; font-size: .64rem;
}
.reference-list-order-option span { font-size: 1rem; }
.reference-list-order-option strong { font-size: .64rem; }
.reference-list-order-option.active { color: var(--bank-accent-ink); border-color: rgba(var(--theme-rgb), .45); background: rgba(var(--theme-rgb), .09); box-shadow: inset 0 0 0 1px rgba(var(--theme-rgb), .09); }
.reference-list-meta-row { display: flex; justify-content: space-between; gap: 14px; align-items: flex-end; padding: 0 2px 4px; }
.reference-list-meta-label { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; margin-bottom: 7px; }
.reference-list-color-row { display: flex; gap: 7px; }
.reference-list-color { width: 23px; height: 23px; border-radius: 50%; border: 2px solid transparent; background: var(--list-color); cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.reference-list-color.active { outline: 2px solid var(--surface-1); box-shadow: 0 0 0 3px var(--list-color); }
.reference-list-estimate { display: grid; justify-items: end; gap: 4px; color: var(--muted); font-size: .66rem; }
.reference-list-modal-footer { display: flex; justify-content: space-between; gap: 10px; padding: 13px 20px 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-1) 94%, transparent); }
.reference-list-modal-footer .button.primary { margin-left: auto; min-width: 210px; }
.reference-list-form > .form-message { margin: -10px 20px 12px; }
.reference-list-success-dialog { width: min(92vw, 500px); border-radius: 24px; }
.reference-list-success-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px; }
.reference-list-success-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #059669; background: rgba(16,185,129,.13); border: 1px solid rgba(16,185,129,.25); font-size: 1.6rem; font-weight: 950; }
.reference-list-success-kicker { color: #10b981; font-size: .64rem; font-weight: 900; letter-spacing: .08em; padding: 4px 9px; border-radius: 99px; background: rgba(16,185,129,.09); }
.reference-list-success-card h2 { margin: 0; font-size: 1.24rem; }
.reference-list-success-card > p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.reference-list-success-breakdown { width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); padding: 12px; }
.reference-list-success-breakdown > strong { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .07em; margin-bottom: 7px; }
.reference-list-success-breakdown > div { display: grid; gap: 6px; max-height: 180px; overflow: auto; }
.reference-list-success-breakdown > div > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .7rem; }
.reference-list-success-breakdown > div > div strong { color: var(--bank-accent-ink); padding: 3px 7px; border-radius: 7px; background: rgba(var(--theme-rgb), .08); white-space: nowrap; }
.reference-list-success-question { color: var(--text) !important; font-weight: 700; }
.reference-list-success-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.reference-list-success-actions .button { min-height: 44px; }
/* Resolução: tesoura, gabarito explícito e feedback ao estilo da referência. */
.study-answer-option { grid-template-columns: 36px minmax(0,1fr) 34px; }
.study-eliminate-option {
width: 30px; height: 30px; display: grid; place-items: center; align-self: center;
border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: .92rem;
opacity: .72; transition: background .12s ease, color .12s ease, opacity .12s ease, transform .12s ease;
}
.study-eliminate-option:hover { opacity: 1; color: var(--text); background: var(--bank-surface-hover); transform: scale(1.04); }
.study-answer-option.eliminated { opacity: .42; filter: saturate(.5); }
.study-answer-option.eliminated .study-answer-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.study-answer-option.eliminated .study-answer-letter { opacity: .7; }
.study-answer-option.revealed-correct { border-color: rgba(16,185,129,.54); background: rgba(16,185,129,.075); }
.study-answer-option.revealed-correct .study-answer-letter { color:#d1fae5; border-color:rgba(16,185,129,.62); background:rgba(16,185,129,.28); }
.answer-feedback.answer-reveal { color: #a7f3d0; background: rgba(16,185,129,.075); border-color: rgba(16,185,129,.25); }
.study-reveal-answer { border-color: rgba(var(--theme-rgb), .25) !important; }
.study-retry-button { order: -1; }
/* Reduz custo de pintura de cards/linhas fora da viewport sem mudar dados. */
.question-card,
.saved-list-card {
content-visibility: auto;
contain-intrinsic-size: 220px;
}
@media (max-width: 700px) {
.reference-list-dialog { width: min(96vw, 680px); border-radius: 17px; }
.reference-list-modal-header { grid-template-columns: 36px 1fr auto; padding: 14px; gap: 9px; }
.reference-list-modal-icon { width: 34px; height: 34px; }
.reference-list-body { padding: 13px 14px 6px; }
.reference-list-section-heading { flex-direction: column; }
.reference-list-quick-presets { justify-content: flex-start; }
.reference-list-quota-row { grid-template-columns: 1fr; }
.reference-list-quota-controls { justify-content: flex-end; }
.reference-list-order-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.reference-list-meta-row { flex-direction: column; align-items: stretch; }
.reference-list-estimate { justify-items: start; }
.reference-list-modal-footer { padding: 11px 14px 14px; }
.reference-list-modal-footer .button.primary { min-width: 0; flex: 1; }
.reference-list-success-card { padding: 22px 16px; }
.reference-list-success-actions { grid-template-columns: 1fr; }
.study-answer-option { grid-template-columns: 34px minmax(0,1fr) 30px; }
}
@media (prefers-reduced-motion: reduce) {
.bank-filter-tab,
.bank-hierarchy-subject > summary,
.bank-hierarchy-topic,
.bank-hierarchy-section,
.filter-chip,
.study-answer-option,
.study-eliminate-option { transition: none !important; transform: none !important; }
}
/* V6 selection panel parity with reference */
.bank-selection-heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.bank-selection-heading-actions .text-button { color: var(--muted); font-size: .67rem; }
.bank-selection-heading-actions .text-button:hover { color: var(--text); }
.bank-selection-panel .bank-filter-summary { display: none; }
.bank-applied-label { margin: 18px 0 2px; }
.study-answer-row { display: grid; grid-template-columns: minmax(0,1fr) 34px; gap: 6px; align-items: stretch; }
.study-answer-row .study-answer-option { grid-template-columns: 36px minmax(0,1fr); }
.study-answer-row .study-eliminate-option { align-self: center; }
.study-answer-row:has(.study-answer-option.eliminated) .study-eliminate-option { color: var(--bank-accent-ink); background: rgba(var(--theme-rgb), .08); opacity: 1; }
@media (max-width: 700px) {
.study-answer-row { grid-template-columns: minmax(0,1fr) 30px; gap: 4px; }
.study-answer-row .study-answer-option { grid-template-columns: 34px minmax(0,1fr); }
}
/* V8 reading pass: overrides legacy study-map placement on narrow screens. */
.study-bottom-navigation .study-number-strip {
position: static;
top: auto;
padding: 0;
background: transparent;
border: 0;
}
@media (max-width: 620px) {
.study-bottom-navigation .study-number-strip { padding: 0; }
.study-question-statement { white-space: normal; line-height: 1.58; }
.study-answer-text { white-space: normal; }
}
/* ========================================================================== */
/* V7 · Responsive Bank + low-cost page motion */
/* ========================================================================== */
:root {
--motion-fast: 120ms;
--motion-page: 240ms;
--motion-ease: cubic-bezier(.22,.78,.24,1);
}
html { scroll-behavior: smooth; }
.page-section.page-motion-leave {
pointer-events: none;
animation: page-motion-out var(--motion-fast) ease both;
}
.page-section.page-motion-enter {
animation: page-motion-in var(--motion-page) var(--motion-ease) both;
}
@keyframes page-motion-out {
from { opacity: 1; transform: translate3d(0,0,0); }
to { opacity: 0; transform: translate3d(-8px,0,0); }
}
@keyframes page-motion-in {
from { opacity: 0; transform: translate3d(10px,6px,0); }
to { opacity: 1; transform: translate3d(0,0,0); }
}
.bank-builder-shell.bank-view-leave,
.bank-results-shell.bank-view-leave,
.bank-action-dock.bank-view-leave {
pointer-events: none;
animation: bank-view-out 105ms ease both;
}
.bank-builder-shell.bank-view-enter,
.bank-results-shell.bank-view-enter,
.bank-action-dock.bank-view-enter {
animation: bank-view-in 230ms var(--motion-ease) both;
}
@keyframes bank-view-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(5px); }
}
@keyframes bank-view-in {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
.bank-filter-pane.bank-pane-leave {
pointer-events: none;
animation: bank-pane-out 90ms ease both;
}
.bank-filter-pane.bank-pane-enter {
animation: bank-pane-in 190ms var(--motion-ease) both;
}
@keyframes bank-pane-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-5px); }
}
@keyframes bank-pane-in {
from { opacity: 0; transform: translateX(7px); }
to { opacity: 1; transform: translateX(0); }
}
/* Modais entram suavemente sem filtros caros no conteúdo. */
dialog[open].reference-list-dialog,
dialog[open].reference-list-success-dialog,
dialog[open].study-dialog,
dialog[open].dialog {
animation: dialog-soft-in 190ms var(--motion-ease) both;
}
@keyframes dialog-soft-in {
from { opacity: 0; transform: translateY(10px) scale(.988); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* O banco preserva duas colunas em tablets landscape quando houver espaço real. */
@media (min-width: 900px) and (max-width: 1180px) {
.bank-page .bank-workspace { max-width: none; width: 100%; }
.bank-reference-columns {
grid-template-columns: minmax(300px, .82fr) minmax(0, 1.35fr) !important;
gap: 12px;
}
.bank-reference-columns > .bank-filter-panel,
.bank-reference-columns > .bank-selection-panel { min-height: 470px; }
.bank-reference-columns .bank-hierarchy { min-height: 310px; max-height: 54vh; }
.bank-reference-columns .bank-selection-panel { padding: 17px; }
.bank-reference-columns .bank-selection-panel .bank-filter-chips { min-height: 90px; max-height: 230px; }
.bank-option-toggle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bank-action-dock { margin-inline: 0; }
}
@media (max-width: 899px) {
.bank-reference-columns { grid-template-columns: 1fr !important; }
.bank-reference-columns > .bank-filter-panel,
.bank-reference-columns > .bank-selection-panel { min-height: 0; }
.bank-reference-columns .bank-hierarchy { min-height: 250px; max-height: 46dvh; }
.bank-reference-columns .bank-selection-panel .bank-filter-chips { min-height: 66px; max-height: 190px; }
.bank-builder-shell > .bank-filter-tabs {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.bank-builder-shell > .bank-filter-tabs::-webkit-scrollbar { display: none; }
.bank-builder-shell .bank-filter-tab { flex: 0 0 auto; scroll-snap-align: start; }
.bank-selection-heading { align-items: flex-start; }
}
@media (max-width: 700px) {
.bank-workspace { gap: 10px; }
.bank-reference-header {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 14px;
}
.bank-reference-header-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.bank-reference-header-actions .button { width: 100%; }
.bank-builder-shell > .bank-filter-tabs { padding: 5px; border-radius: 12px; }
.bank-reference-columns > .bank-filter-panel,
.bank-reference-columns > .bank-selection-panel { padding: 14px; }
.bank-selection-heading { display: grid; gap: 8px; }
.bank-selection-heading-actions { justify-content: space-between; width: 100%; }
.bank-option-toggle-grid { grid-template-columns: 1fr; }
.bank-action-dock {
position: sticky;
bottom: max(8px, env(safe-area-inset-bottom));
padding: 10px;
margin-top: 10px;
border-radius: 14px;
}
.bank-action-dock .bank-action-buttons {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 7px;
}
.bank-action-dock .bank-action-buttons .button { min-width: 0 !important; width: 100%; }
.bank-action-count { width: 100%; margin-bottom: 7px; }
.bank-results-toolbar { align-items: stretch; }
.bank-results-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.bank-results-actions .button { width: 100%; }
}
@media (max-width: 430px) {
.bank-reference-header-actions,
.bank-action-dock .bank-action-buttons,
.bank-results-actions { grid-template-columns: 1fr; }
.bank-action-dock { bottom: max(5px, env(safe-area-inset-bottom)); }
.bank-filter-tab { min-height: 38px; padding-inline: 12px; }
.bank-hierarchy-subject > summary,
.bank-hierarchy-topic,
.bank-hierarchy-section { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.page-section.page-motion-leave,
.page-section.page-motion-enter,
.bank-builder-shell.bank-view-leave,
.bank-builder-shell.bank-view-enter,
.bank-results-shell.bank-view-leave,
.bank-results-shell.bank-view-enter,
.bank-action-dock.bank-view-leave,
.bank-action-dock.bank-view-enter,
.bank-filter-pane.bank-pane-leave,
.bank-filter-pane.bank-pane-enter,
dialog[open].reference-list-dialog,
dialog[open].reference-list-success-dialog,
dialog[open].study-dialog,
dialog[open].dialog {
animation: none !important;
transition-duration: 0.01ms !important;
}
}
@media (min-width: 900px) and (max-width: 1024px) {
.bank-workspace-topnav:not([hidden]) { display: flex !important; gap: 6px; }
.bank-workspace-top-tabs,
.bank-workspace-top-tools { gap: 4px; }
.bank-workspace-top-tab { min-height: 34px; padding: 6px 8px; font-size: .66rem; }
.bank-topbar-total { font-size: .62rem; }
.bank-workspace-top-tools .button { min-height: 34px; padding: 6px 9px; font-size: .65rem; }
body.bank-reference-page .topbar-actions { flex: 0 1 190px; }
body.bank-reference-page .global-search-wrap { min-width: 140px; }
}
@media (max-width: 899px) {
.bank-workspace-topnav { display: none !important; }
}
/* No Banco, o ícone de tela cheia é a última ação da barra. A regra anterior
reservava 310px para uma busca que já não existe ali, criando a sobra vista
no canto direito. */
@media (min-width: 1025px) {
body.bank-reference-page .topbar-actions {
flex: 0 0 auto;
margin-left: 0;
}
body.bank-reference-page .bank-workspace-topnav { margin-right: auto; }
}
/* ==========================================================
Gepetinho v15 · Fullscreen ergonomics V8
========================================================== */
.global-fullscreen-toggle {
flex: 0 0 auto;
width: 40px;
height: 40px;
padding: 0;
border-radius: 12px;
display: inline-grid;
place-items: center;
color: var(--muted);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-2) 88%, transparent);
transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease;
}
.global-fullscreen-toggle:hover {
color: var(--text);
border-color: color-mix(in srgb, var(--border-strong) 58%, rgb(var(--theme-rgb)) 42%);
background: color-mix(in srgb, var(--surface-3) 88%, rgb(var(--theme-rgb)) 12%);
transform: translateY(-1px);
}
.global-fullscreen-toggle:active { transform: translateY(0) scale(.96); }
.global-fullscreen-toggle .fullscreen-icon {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.global-fullscreen-toggle .fullscreen-icon-exit { display: none; }
.global-fullscreen-toggle.is-fullscreen .fullscreen-icon-enter { display: none; }
.global-fullscreen-toggle.is-fullscreen .fullscreen-icon-exit { display: block; }
.global-fullscreen-toggle.is-fullscreen {
color: rgb(var(--theme-rgb-3));
border-color: rgba(var(--theme-rgb), .34);
background: rgba(var(--theme-rgb), .11);
}
:fullscreen,
:-webkit-full-screen {
background: var(--bg);
}
:fullscreen .app-shell,
:-webkit-full-screen .app-shell {
min-height: 100vh;
min-height: 100dvh;
}
body.app-fullscreen-active .topbar {
padding-top: max(var(--safe-top, 0px), env(safe-area-inset-top));
}
body.app-fullscreen-active .book-reader-dialog {
max-width: 100vw;
max-height: 100vh;
max-height: 100dvh;
}
body.app-fullscreen-active .book-reader-shell {
height: 100vh;
height: 100dvh;
}
/* v15.0.0-alpha.40 — listas como cadernos independentes */
.lists-page-shell { display: grid; gap: 18px; }
.lists-hero-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: clamp(22px, 4vw, 40px);
border-radius: 20px;
color: #fff;
background: linear-gradient(118deg, rgb(var(--theme-rgb-2)) 0%, rgb(var(--theme-rgb)) 48%, rgb(var(--theme-rgb-3)) 130%);
box-shadow: 0 18px 38px rgba(var(--theme-rgb), .18);
}
.lists-hero-card .eyebrow { color: rgba(255,255,255,.72); }
.lists-hero-card h2 { margin: 4px 0 8px; font-size: clamp(1.45rem, 3vw, 2.2rem); letter-spacing: -.04em; }
.lists-hero-card > div > p:not(.eyebrow) { max-width: 650px; margin: 0; color: rgba(255,255,255,.82); line-height: 1.5; }
.lists-hero-card .button { flex: 0 0 auto; box-shadow: 0 8px 16px rgba(0,0,0,.14); }
.saved-lists.list-card-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 15px; }
.saved-list-card {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 278px;
padding: 18px;
border: 1px solid var(--border);
border-radius: 18px;
background: color-mix(in srgb, var(--surface) 94%, rgb(var(--theme-rgb)) 6%);
box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.saved-list-card.active { border-color: rgba(var(--theme-rgb-3), .72); box-shadow: 0 10px 25px rgba(var(--theme-rgb), .14); }
.saved-list-card-top { margin-bottom: 11px; }
.saved-list-card .list-card-date { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: .7rem; font-weight: 750; }
.saved-list-card .list-card-date::first-letter { color: rgb(var(--theme-rgb-3)); }
.saved-list-card h3 { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.3; }
.saved-list-card > p { min-height: 42px; margin: 7px 0 14px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.list-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.list-card-metrics > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, var(--surface-2) 86%, transparent); }
.list-card-metrics span, .list-card-progress span { display: block; margin: 0; color: var(--muted); font-size: .62rem; font-weight: 750; }
.list-card-metrics strong { display: block; margin-top: 3px; color: var(--text); font-size: .75rem; line-height: 1.25; }
.list-card-metrics > div:last-child strong { color: color-mix(in srgb, rgb(var(--theme-rgb-3)) 72%, white); }
.list-card-progress { margin-top: 14px; }
.list-card-progress > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.list-card-progress strong { color: var(--muted); font-size: .66rem; }
.list-card-progress i { display: block; height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--surface-3) 86%, transparent); }
.list-card-progress b { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--theme-rgb-2)), rgb(var(--theme-rgb-3))); }
.list-card-footer { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }
.list-card-footer .button { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.list-detail-panel { scroll-margin-top: 18px; }
.lists-empty-state { grid-column: 1 / -1; margin: 0; padding: 28px; border: 1px dashed var(--border-strong); border-radius: 16px; text-align: center; }
/* A busca de questões pertence exclusivamente ao Banco. */
.bank-reference-header-actions .bank-question-search { width: min(360px, 35vw); }
@media (max-width: 700px) {
.lists-hero-card { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
.lists-hero-card .button { width: 100%; }
.saved-lists.list-card-grid { grid-template-columns: 1fr; }
.saved-list-card { min-height: 0; }
.bank-reference-header-actions .bank-question-search { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 380px) {
.list-card-metrics { grid-template-columns: 1fr; }
.list-card-footer { flex-direction: column-reverse; }
}
/* Mídia do hero: uma única camada, sem filtros caros sobre a página inteira. */
body.hero-media-enabled .hero-card {
color: #fff;
border-color: rgba(255,255,255,.24);
background-image:
linear-gradient(105deg, rgba(var(--wallpaper-hero-dark-rgb, 7,8,14), .84) 0%, rgba(var(--wallpaper-hero-rgb, 10,10,17), .58) 54%, rgba(7,8,14,.42) 100%),
var(--hero-media-url);
background-position: center, var(--hero-media-position, center center);
background-size: cover, var(--hero-media-size, cover);
background-repeat: no-repeat;
box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
body.hero-media-enabled .hero-card h2 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.42); }
body.hero-media-enabled .hero-card p:not(.eyebrow),
body.hero-media-enabled .hero-card .eyebrow { color: rgba(255,255,255,.86); }
body.hero-media-enabled .hero-card .button.secondary { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(7,8,14,.34); }
body.hero-media-enabled .hero-card::before { opacity: .22; }
body.hero-media-enabled .hero-card::after { border-color: rgba(255,255,255,.16); }
/* O vídeo do hero também alimenta a paleta extraída: não fica com a cor
original isolada quando o escopo escolhido é somente a tela inicial. */
body.hero-media-enabled .hero-card {
--hero-wall-main: var(--wallpaper-hero-rgb, var(--theme-rgb));
--hero-wall-dark: var(--wallpaper-hero-dark-rgb, var(--theme-rgb-2));
--hero-wall-light: var(--wallpaper-hero-light-rgb, var(--theme-rgb-3));
border-color: rgba(var(--hero-wall-light), .28);
}
.study-image-zoom-dialog {
width: min(1180px, calc(100vw - 24px));
max-width: none;
max-height: min(92dvh, 900px);
padding: 0;
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: 16px;
color: var(--text);
background: var(--surface-1, var(--surface));
box-shadow: 0 28px 86px rgba(0,0,0,.5);
}
.study-image-zoom-dialog::backdrop { background: rgba(4, 6, 11, .78); backdrop-filter: blur(5px); }
.study-image-zoom-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr); max-height: min(92dvh, 900px); padding: 14px; }
.study-image-zoom-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.study-image-zoom-header h2 { margin: 2px 0 0; font-size: 1rem; }
.study-image-zoom-header .eyebrow { margin: 0; }
.study-image-zoom-actions { display: inline-flex; align-items: center; gap: 5px; }
.study-image-zoom-actions .reader-font-button { min-width: 36px; }
.study-image-zoom-hint { margin: 10px 0; color: var(--muted); font-size: .75rem; }
.study-image-zoom-viewport { min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 11px; background: rgba(0,0,0,.18); touch-action: pan-x pan-y pinch-zoom; }
.study-image-zoom-viewport:focus-visible { outline: 2px solid rgba(var(--theme-rgb-3), .72); outline-offset: 2px; }
.study-image-zoom-viewport img { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; background: #fff; }
@media (max-width: 600px) {
.study-image-zoom-dialog { width: calc(100vw - 12px); max-height: 96dvh; }
.study-image-zoom-shell { max-height: 96dvh; padding: 10px; }
.study-image-zoom-hint { font-size: .68rem; }
}
/* Árvore do Banco: o painel rola por conta própria e grupos derivados de
assuntos compostos (ex.: "Geometria — Cônicas") exibem níveis reais. */
.bank-reference-columns .bank-hierarchy {
min-height: 0;
height: clamp(300px, 52dvh, 580px);
max-height: none;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 6px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
touch-action: pan-y;
}
.bank-hierarchy-topic-group { position: relative; margin: 1px 0; }
.bank-hierarchy-topic-group > summary {
display: flex;
align-items: center;
gap: 8px;
min-height: 31px;
padding: 4px 7px;
border-radius: 7px;
color: var(--text);
cursor: pointer;
list-style: none;
font-size: .73rem;
font-weight: 800;
}
.bank-hierarchy-topic-group > summary::-webkit-details-marker { display: none; }
.bank-hierarchy-topic-group > summary::before { content: "›"; color: var(--muted); font-size: 1rem; transition: transform .15s ease; }
.bank-hierarchy-topic-group[open] > summary::before { transform: rotate(90deg); }
.bank-hierarchy-topic-group > summary span { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-hierarchy-topic-group > summary b { color: var(--muted); font-size: .68rem; }
.bank-hierarchy-topic-group > summary:hover { background: var(--bank-surface-hover); }
.bank-hierarchy-subtopics { display: grid; gap: 1px; margin-left: 13px; padding: 1px 0 3px 12px; border-left: 1px solid rgba(var(--theme-rgb), .22); }
.bank-hierarchy-subtopics .bank-hierarchy-section { padding-left: 8px; }
.bank-hierarchy-subtopics .bank-hierarchy-section::before { left: -13px; width: 12px; }
@media (max-width: 700px) {
.bank-reference-columns .bank-hierarchy { height: min(48dvh, 430px); min-height: 280px; }
.bank-hierarchy-subject > summary { min-height: 42px; }
.bank-hierarchy-topic-group > summary,
.bank-hierarchy-topic,
.bank-hierarchy-section { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
body.hero-media-enabled .hero-card::before,
body.hero-media-enabled .hero-card::after { animation: none; }
}
@media (max-width: 650px) {
.global-fullscreen-toggle {
width: 42px;
height: 42px;
border-radius: 11px;
}
.topbar-actions .global-fullscreen-toggle { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
.global-fullscreen-toggle { transition: none; }
}
.study-fullscreen-toggle.is-fullscreen,
#bookFullscreenBtn.is-fullscreen {
color: rgb(var(--theme-rgb-3));
border-color: rgba(var(--theme-rgb), .34);
background: rgba(var(--theme-rgb), .11);
}
/* A árvore precisa crescer pelo conteúdo, não esticar as duas matérias para
preencher toda a coluna. `display:grid` com trilhas auto esticava Matemática
e Português, deixando os vãos enormes vistos em bancos já existentes. */
.bank-hierarchy {
display: block;
overflow-y: auto !important;
overflow-x: hidden;
align-content: start;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
.bank-hierarchy > .bank-hierarchy-subject + .bank-hierarchy-subject { margin-top: 3px; }
.bank-hierarchy-subject { content-visibility: visible; contain-intrinsic-size: auto; }
/* Sessão de questões: o rodapé participa do fluxo. Em conteúdo curto ele repousa
no fim da tela; em enunciados longos aparece só depois da questão, nunca colado. */
.study-dialog { --study-reading-width: 1100px; }
.study-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.study-question-host {
flex: 1 0 auto;
width: min(100%, calc(1100px + 32px));
max-width: calc(1100px + 32px);
}
.study-question-card { padding: clamp(26px, 3vw, 40px); }
.study-question-statement { max-width: 86ch; }
.study-bottom-navigation {
position: static;
z-index: auto;
width: min(100%, calc(1100px + 32px));
margin: auto auto 18px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: none;
background: color-mix(in srgb, var(--surface-2) 96%, transparent);
}
.study-bottom-navigation > .button {
min-height: 32px;
padding: 5px 10px;
font-size: .72rem;
}
.study-number-button { min-width: 31px; height: 30px; border-radius: 8px; font-size: .67rem; }
.study-answer-actions { margin-top: 18px; padding-top: 14px; }
.study-answer-actions .button { min-height: 35px; padding: 6px 11px; font-size: .78rem; }
.study-answer-option { min-height: 52px; padding: 8px 13px; }
/* v15 — sessão limpa: uma ferramenta por função, leitura em primeiro plano. */
.study-header {
padding-inline: max(16px, calc((100vw - 1500px) / 2));
min-height: 52px;
}
.study-title-block { max-width: min(42vw, 620px); }
.study-header-actions { margin-left: auto; justify-content: flex-end; }
.study-header-actions .study-map-toggle,
.study-header-actions .study-secondary-control { display: none !important; }
/* A navegação por página/progresso duplicava o rodapé. A ordem permanece
preservada internamente; a mudança de questão ocorre na faixa inferior. */
.study-navigation { display: none !important; }
.study-question-host {
/* Em tablet horizontal o leitor não pode virar uma coluna no meio da tela.
A referência usa quase todo o espaço, guardando somente margens de toque. */
width: min(calc(100% - clamp(32px, 5vw, 120px)), 1380px);
max-width: 1380px;
padding-top: clamp(20px, 4vh, 44px);
padding-bottom: 22px;
}
.study-question-card {
padding: clamp(24px, 3.2vw, 42px);
border-radius: 16px;
border-color: color-mix(in srgb, var(--border) 82%, transparent);
background: var(--surface-2);
box-shadow: 0 12px 38px rgba(0,0,0,.13);
}
/* Fundo uniforme e menos "preto vazio": a mesma base acompanha todos os
temas, preservando contraste sem competir com o conteúdo. */
.study-dialog {
background: color-mix(in srgb, var(--bg-1) 78%, rgb(var(--theme-rgb)) 5%);
}
.study-shell {
background:
linear-gradient(155deg, color-mix(in srgb, var(--surface-2) 40%, var(--bg-1)) 0%, var(--bg-1) 68%),
var(--bg-1);
}
.study-header {
background: color-mix(in srgb, var(--surface-2) 88%, rgb(var(--theme-rgb)) 4%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.study-question-rail { width: 2px; opacity: .72; }
.study-question-top { margin-bottom: 20px; }
.study-question-number { margin: 0 0 15px; font-size: .68rem; letter-spacing: .12em; }
.study-question-statement { max-width: 100ch; font-size: 1.06em; line-height: 1.68; font-weight: 580; }
.study-question-meta { margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.study-options { gap: 10px; margin-top: 22px; }
.study-answer-row { position: relative; }
.study-answer-option {
min-height: 58px;
padding: 10px 15px;
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 80%, transparent);
border-color: color-mix(in srgb, var(--border) 84%, transparent);
box-shadow: none;
}
.study-answer-option:hover { transform: none; border-color: rgba(var(--theme-rgb-3), .34); background: color-mix(in srgb, var(--surface-3) 88%, transparent); }
.study-answer-letter { width: 34px; height: 34px; border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--surface-3) 82%, transparent); border-color: transparent; }
.study-answer-text { font-size: .96em; font-weight: 540; line-height: 1.5; }
.study-answer-option.selected { background: color-mix(in srgb, rgb(var(--theme-rgb)) 13%, var(--surface-2)); border-color: rgba(var(--theme-rgb-3), .52); }
.study-answer-option.selected .study-answer-letter { background: rgb(var(--theme-rgb)); border-color: transparent; }
.study-eliminate-option { opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease; }
.study-answer-row:hover .study-eliminate-option,
.study-answer-row:focus-within .study-eliminate-option { opacity: .52; }
.study-bottom-navigation {
width: min(calc(100% - clamp(32px, 5vw, 120px)), 1380px);
padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
border: 1px solid var(--border);
border-bottom: 0;
border-radius: 15px 15px 0 0;
background: color-mix(in srgb, var(--surface-2) 97%, transparent);
box-shadow: 0 -8px 26px rgba(0,0,0,.12);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.study-answer-actions {
position: static;
width: auto;
margin: 22px 0 0;
padding: 18px 0 0;
border: 0;
border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.study-answer-actions .button { min-height: 40px; }
.study-number-strip { justify-content: flex-start; padding-inline: 4px; }
.study-number-button {
min-width: 36px;
height: 34px;
border-radius: 9px;
color: var(--muted);
background: color-mix(in srgb, var(--surface-3) 74%, transparent);
border-color: transparent;
box-shadow: none;
}
.study-number-button.active,
.study-number-button[aria-current="true"] { color: #fff; background: rgb(var(--theme-rgb)); border-color: transparent; box-shadow: none; }
.study-side-nav { display: none !important; }
@media (max-width: 700px) {
.study-header { padding-inline: 10px; }
.study-title-block { max-width: 38vw; }
.study-header-progress { max-width: 100%; margin-top: 4px; padding: 2px 6px; font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.study-question-host { padding: 13px 9px 16px; }
.study-question-card { padding: 20px 16px 18px; border-radius: 13px; }
.study-question-top { margin-bottom: 15px; }
.study-question-statement { font-size: 1em; line-height: 1.58; }
.study-answer-option { min-height: 54px; padding: 9px 11px; }
.study-eliminate-option { opacity: .38; }
.study-bottom-navigation { width: 100%; margin: auto 0 0; border-inline: 0; border-radius: 0; }
}
@media (max-width: 700px) {
.study-fullscreen-toggle {
width: 34px;
min-width: 34px;
padding: 0 !important;
overflow: hidden;
white-space: nowrap;
font-size: 0;
}
.study-fullscreen-toggle::before { content: "⛶"; font-size: .85rem; }
}
/* Seleção múltipla do Banco: ocupa apenas o necessário; as opções menos
frequentes ficam disponíveis, mas não roubam a tela de quem está escolhendo
assuntos para uma lista. */
.bank-reference-columns { align-items: start; }
.bank-reference-columns > .bank-selection-panel {
align-self: start;
min-height: 0 !important;
}
.bank-selection-panel .bank-filter-chips {
min-height: 38px !important;
max-height: min(30dvh, 190px);
padding-block: 7px 9px;
}
.bank-selection-heading > div:first-child > p:last-child { margin: 1px 0 0; font-size: .7rem; }
.bank-additional-options { margin-top: 8px; }
.bank-additional-options > summary {
cursor: pointer;
list-style: none;
user-select: none;
}
.bank-additional-options > summary::-webkit-details-marker { display: none; }
.bank-additional-options > summary::after { content: "›"; display: inline-block; margin-left: 6px; color: var(--muted); transition: transform .15s ease; }
.bank-additional-options[open] > summary::after { transform: rotate(90deg); }
.bank-additional-options .bank-option-toggle-grid { margin-top: 9px; }
/* Textos importados podem ter palavras longas, LaTex ou trechos sem espaço.
Nenhum deles deve atravessar a borda dos cartões da resolução. */
.bank-question-list .question-card,
.bank-question-list .question-card * { min-width: 0; }
.bank-question-list .question-statement,
.bank-question-list .question-meta,
.bank-question-list .answer-text,
.bank-question-list .question-notes {
display: block;
max-width: 100%;
white-space: pre-line !important;
overflow-wrap: anywhere;
word-break: normal;
}
@media (min-width: 900px) and (max-width: 1180px) {
.bank-reference-columns > .bank-selection-panel { min-height: 0 !important; }
}
/* alpha.60 — PDF viewer: render HiDPI e pinch-to-zoom local no mobile. */
@media (pointer: coarse) {
.book-reader-viewport { touch-action: pan-x pan-y; }
.book-reader-page-surface { user-select: none; -webkit-user-select: none; }
}
/* Alpha.61 — Gemini connection telemetry */
.pdf-gemini-connection {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px 12px;
align-items: center;
padding: 12px;
border: 1px solid var(--border-color, rgba(255,255,255,.12));
border-radius: 12px;
background: color-mix(in srgb, var(--surface, #16151d) 92%, transparent);
}
.pdf-gemini-connection small { grid-column: 1 / -1; margin: 0; }
.pdf-gemini-status { font-size: .88rem; line-height: 1.35; overflow-wrap: anywhere; }
.pdf-gemini-status[data-state="busy"] { opacity: .82; }
.pdf-gemini-status[data-state="ok"] { font-weight: 700; }
.pdf-gemini-status[data-state="error"] { font-weight: 700; }
@media (max-width: 640px) {
.pdf-gemini-connection { grid-template-columns: 1fr; }
.pdf-gemini-connection small { grid-column: auto; }
}
/* Alpha.62 — flicker-free PDF reader frame swap */
.book-reader-viewport canvas {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.book-reader-viewport.rendering canvas {
/* Keep the last valid bitmap visible while PDF.js paints the next frame off-DOM. */
opacity: 1;
}
.book-reader-viewport.rendering[data-render-status]::after {
content: attr(data-render-status);
position: fixed;
right: max(14px, env(safe-area-inset-right));
bottom: calc(54px + env(safe-area-inset-bottom));
z-index: 8;
max-width: min(72vw, 260px);
padding: 6px 9px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 999px;
background: rgba(20,21,27,.78);
color: rgba(255,255,255,.84);
box-shadow: 0 5px 18px rgba(0,0,0,.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: .64rem;
font-weight: 700;
line-height: 1;
pointer-events: none;
}
.book-reader-viewport.rendering[data-render-status=""]::after { display: none; }
@media (prefers-reduced-motion: reduce) {
.book-reader-viewport canvas { transition: none !important; }
}
/* ==========================================================
Alpha.63 — evidência original única + leitor móvel limpo
========================================================== */
.question-source-context { margin-top: 10px; }
.question-source-context-toggle { min-height: 40px; }
.source-context-visual { overflow: hidden; }
.source-context-image { cursor: zoom-in; }
.book-reader-toolbar {
position: relative;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
overflow: visible;
}
.book-reader-nav-cluster,
.book-reader-zoom-cluster {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.book-reader-icon-btn {
min-width: 38px;
width: 38px;
padding-inline: 0;
font-size: 1rem;
}
.book-page-jump { white-space: nowrap; }
.book-page-jump > span:first-child { font-weight: 800; color: var(--text); }
.book-reader-zoom-cluster #bookZoomLabel {
min-width: 68px;
text-align: center;
font-size: .72rem;
font-weight: 850;
color: var(--text);
}
.book-reader-clean-btn { white-space: nowrap; }
.book-reader-more { position: relative; flex: 0 0 auto; }
.book-reader-more > summary {
list-style: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
min-height: 38px;
cursor: pointer;
user-select: none;
}
.book-reader-more > summary::-webkit-details-marker { display: none; }
.book-reader-more-menu {
position: absolute;
z-index: 80;
top: calc(100% + 8px);
right: 0;
width: min(320px, calc(100vw - 24px));
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 96%, #08090d);
box-shadow: 0 18px 56px rgba(0,0,0,.42);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.book-reader-more:not([open]) .book-reader-more-menu { display: none; }
.book-reader-more-menu .book-fit-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.book-reader-more-menu > .button,
.book-reader-more-menu select,
.book-reader-more-menu .book-fit-controls .button { width: 100%; justify-content: flex-start; }
.book-reader-more-menu select { min-height: 38px; max-width: none; }
/* Leitura limpa precisa remover também as miniaturas; antes o "HUD" desaparecia,
mas o rail continuava ocupando espaço e fazia o botão parecer quebrado. */
.book-reader-dialog.hud-hidden .book-reader-workspace {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
}
.book-reader-dialog.hud-hidden .book-thumbnail-rail { display: none !important; }
.book-reader-dialog.hud-hidden .book-reader-viewport {
grid-column: 1 !important;
grid-row: 1 !important;
padding: 8px;
}
.book-reader-dialog.reader-pseudo-fullscreen {
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
margin: 0;
z-index: 2147483000;
}
@media (max-width: 720px) {
.book-reader-topbar { min-height: 58px; align-items: center; }
.book-reader-topbar .eyebrow { display: none; }
.book-reader-topbar h2 { max-width: 70vw; font-size: .94rem; }
.book-reader-topbar .muted { display: block; margin-top: 3px; }
.book-reader-toolbar {
min-height: 52px;
overflow: visible;
justify-content: flex-start;
gap: 6px;
padding: 7px 8px;
}
.book-reader-nav-cluster { flex: 1 1 auto; }
.book-page-jump { flex: 1 1 auto; justify-content: center; }
.book-page-jump > span:first-child { display: none; }
.book-reader-toolbar input { width: 52px; min-height: 36px; }
.book-reader-zoom-cluster { flex: 0 0 auto; }
.book-reader-zoom-cluster #bookZoomLabel { min-width: 50px; font-size: .67rem; }
.book-reader-clean-btn { min-width: 46px; padding-inline: 9px; font-size: 0; }
.book-reader-clean-btn::before { content: "◫"; font-size: .95rem; }
.book-reader-more { margin-left: auto; }
.book-reader-workspace { grid-template-rows: 76px minmax(0, 1fr); }
.book-thumbnail-rail { padding-block: 5px; }
.book-thumbnail { flex-basis: 49px; width: 49px; }
.book-thumbnail canvas { width: 43px; }
.book-reader-footer { min-height: 30px; padding: 5px 9px; }
.book-reader-footer #bookReaderProgressText { font-size: .62rem; }
}
@media (max-width: 430px) {
.book-reader-toolbar { gap: 4px; }
.book-reader-icon-btn { width: 34px; min-width: 34px; min-height: 36px; }
.book-reader-zoom-cluster { gap: 3px; }
.book-reader-zoom-cluster #bookZoomLabel { min-width: 44px; }
.book-reader-more > summary { min-width: 36px; min-height: 36px; padding-inline: 7px; }
}
/* Mobile: a navegação principal já tem página/anterior/próxima. As miniaturas e o
rodapé duplicavam a mesma informação e ocupavam quase 1/4 da tela útil. */
@media (max-width: 720px) {
.book-reader-workspace { grid-template-rows: minmax(0, 1fr) !important; }
.book-thumbnail-rail { display: none !important; }
.book-reader-viewport { grid-row: 1 !important; }
.book-reader-footer { display: none !important; }
.book-reader-shell { grid-template-rows: auto auto minmax(0, 1fr); }
}
@media (max-width: 720px) {
.book-reader-more-menu #bookFitWidthBtn { display: inline-flex !important; }
.book-reader-more-menu #bookBookmarkSelect { max-width: none !important; width: 100%; }
}
/* ──────────────────────────────────────────────────────────────────────────
Alpha.64 — hero pessoal + topbar mobile em uma única linha
────────────────────────────────────────────────────────────────────────── */
.dashboard-personal-hero {
min-height: 224px;
justify-content: flex-start;
padding: clamp(28px, 5vw, 48px);
}
.dashboard-personal-hero .hero-copy {
width: min(72%, 720px);
max-width: 720px;
display: grid;
align-content: center;
gap: 4px;
}
.dashboard-personal-hero .hero-greeting {
margin: 0 0 1px;
color: rgba(255,255,255,.86);
font-size: clamp(.92rem, 1.7vw, 1.08rem);
line-height: 1.2;
font-weight: 720;
letter-spacing: .01em;
text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.dashboard-personal-hero .hero-profile-name {
max-width: 100%;
margin: 0 0 9px;
font-size: clamp(2.15rem, 5vw, 3.45rem);
line-height: .98;
letter-spacing: -.035em;
font-weight: 850;
overflow-wrap: anywhere;
text-wrap: balance;
text-shadow: 0 3px 18px rgba(0,0,0,.42);
}
.dashboard-personal-hero .hero-personal-phrase {
max-width: 610px;
margin: 0;
font-size: clamp(.96rem, 1.8vw, 1.1rem);
line-height: 1.48;
font-weight: 520;
text-wrap: pretty;
text-shadow: 0 2px 12px rgba(0,0,0,.34);
}
body.hero-media-enabled .dashboard-personal-hero:has(.hero-wallpaper-video:not([hidden])),
body.hero-media-enabled .dashboard-personal-hero {
background-image:
linear-gradient(98deg, rgba(var(--wallpaper-hero-dark-rgb, 7,8,14), .80) 0%, rgba(var(--wallpaper-hero-rgb, 10,10,17), .50) 48%, rgba(7,8,14,.22) 76%, rgba(7,8,14,.12) 100%),
var(--hero-media-url);
}
body.hero-media-enabled .dashboard-personal-hero:has(.hero-wallpaper-video:not([hidden])) {
background-image: linear-gradient(98deg, rgba(7,8,14,.78) 0%, rgba(10,10,17,.47) 48%, rgba(7,8,14,.18) 76%, rgba(7,8,14,.10) 100%);
}
@media (max-width: 650px) {
/* Não empilhar o fullscreen embaixo do menu. O título fica à esquerda e
o fullscreen ocupa o canto oposto na MESMA linha. */
.topbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: center;
gap: 10px 12px;
padding: 14px 16px;
}
.topbar-left {
grid-column: 1;
grid-row: 1;
width: auto;
min-width: 0;
}
.topbar-actions {
grid-column: 2;
grid-row: 1;
width: auto;
min-width: 42px;
align-items: center;
justify-content: flex-end;
justify-self: end;
flex-wrap: nowrap;
}
.topbar-actions .global-fullscreen-toggle {
margin: 0;
justify-self: end;
}
.bank-workspace-topnav {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
.dashboard-personal-hero {
min-height: 215px;
padding: 26px 24px 28px;
align-items: center;
flex-direction: row;
}
.dashboard-personal-hero .hero-copy {
width: min(88%, 560px);
max-width: 88%;
}
.dashboard-personal-hero .hero-profile-name {
font-size: clamp(2.15rem, 10vw, 2.9rem);
margin-bottom: 10px;
}
.dashboard-personal-hero .hero-personal-phrase {
max-width: 32rem;
font-size: .98rem;
}
}
@media (max-width: 390px) {
.dashboard-personal-hero .hero-copy { width: 92%; max-width: 92%; }
.dashboard-personal-hero .hero-profile-name { font-size: clamp(2rem, 10vw, 2.55rem); }
}
/* ──────────────────────────────────────────────────────────────────────────
Alpha.65 — saudação + nome na mesma linha; subtítulo deliberadamente menor
────────────────────────────────────────────────────────────────────────── */
.dashboard-personal-hero .hero-copy {
width: min(76%, 760px);
max-width: 760px;
display: block;
}
.dashboard-personal-hero .hero-title-line {
max-width: 100%;
margin: 0 0 10px;
color: #fff;
font-size: clamp(1.72rem, 4.15vw, 2.72rem);
line-height: 1.08;
letter-spacing: -.026em;
text-wrap: balance;
overflow-wrap: anywhere;
text-shadow: 0 3px 18px rgba(0,0,0,.42);
}
.dashboard-personal-hero .hero-greeting,
.dashboard-personal-hero .hero-profile-name {
display: inline;
margin: 0;
padding: 0;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
text-shadow: inherit;
}
.dashboard-personal-hero .hero-greeting {
color: rgba(255,255,255,.90);
font-weight: 650;
}
.dashboard-personal-hero .hero-profile-name {
color: #fff;
font-weight: 850;
}
.dashboard-personal-hero .hero-personal-phrase {
max-width: 560px;
margin: 0;
color: rgba(255,255,255,.88);
font-size: clamp(.80rem, 1.35vw, .96rem);
line-height: 1.44;
font-weight: 510;
letter-spacing: .002em;
text-wrap: pretty;
text-shadow: 0 2px 11px rgba(0,0,0,.34);
}
@media (max-width: 720px) {
.dashboard-personal-hero {
min-height: 208px;
padding: 26px 30px;
}
.dashboard-personal-hero .hero-copy {
width: min(88%, 620px);
}
.dashboard-personal-hero .hero-title-line {
margin-bottom: 8px;
font-size: clamp(1.52rem, 7vw, 2.03rem);
line-height: 1.1;
}
.dashboard-personal-hero .hero-personal-phrase {
max-width: 31rem;
font-size: clamp(.78rem, 3.55vw, .90rem);
line-height: 1.42;
}
}
@media (max-width: 390px) {
.dashboard-personal-hero .hero-copy { width: 92%; }
.dashboard-personal-hero .hero-title-line { font-size: clamp(1.42rem, 7vw, 1.88rem); }
.dashboard-personal-hero .hero-personal-phrase { font-size: .79rem; }
}
/* ==========================================================
Alpha.66 · Gemini review diff / revert
========================================================== */
.pdf-gemini-diff {
margin: 10px 0 14px;
border: 1px solid color-mix(in srgb, var(--accent, #7c6f2b) 24%, #d9d6cf);
border-radius: 14px;
background: color-mix(in srgb, #fff 94%, var(--accent, #7c6f2b));
overflow: hidden;
}
.pdf-gemini-diff > summary {
cursor: pointer;
padding: 11px 13px;
font-weight: 800;
list-style-position: inside;
}
.pdf-gemini-diff-row {
display: grid;
grid-template-columns: minmax(90px, .42fr) 1fr 1fr;
gap: 10px;
padding: 10px 13px;
border-top: 1px solid rgba(0,0,0,.08);
align-items: start;
}
.pdf-gemini-diff-row > strong { padding-top: 20px; }
.pdf-gemini-diff-row small {
display: block;
margin-bottom: 5px;
font-weight: 800;
opacity: .62;
}
.pdf-gemini-diff-row pre {
margin: 0;
max-height: 210px;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
font: inherit;
line-height: 1.45;
padding: 9px 10px;
border-radius: 10px;
background: rgba(0,0,0,.035);
}
.pdf-gemini-revert-btn { margin: 0 13px 13px; }
@media (max-width: 700px) {
.pdf-gemini-diff-row { grid-template-columns: 1fr; }
.pdf-gemini-diff-row > strong { padding-top: 0; }
}
/* ========================================================================== */
/* Alpha.72 · Workspace UI Polish */
/* Geometria/densidade do banco, listas e sessão. Sem alterações no parser. */
/* ========================================================================== */
/* 1 + 3 + 4 — sessão: cabeçalho alinhado ao card e navegação inferior compacta. */
.study-dialog {
--a72-study-content: 1280px;
--a72-study-nav: 940px;
}
.study-header {
align-items: center;
min-height: 72px;
padding-top: 11px;
padding-bottom: 11px;
padding-left: max(24px, calc((100vw - var(--a72-study-content)) / 2));
padding-right: max(24px, calc((100vw - var(--a72-study-content)) / 2));
border-bottom-color: color-mix(in srgb, var(--border) 88%, transparent);
background: color-mix(in srgb, var(--surface-2) 97%, var(--bg-1));
}
.study-title-block {
flex: 1 1 auto;
min-width: 0;
max-width: min(64vw, 760px);
}
.study-title-block .eyebrow {
margin-bottom: 2px;
font-size: .6rem;
letter-spacing: .12em;
}
.study-title-block h2 {
margin: 0;
max-width: 100%;
font-size: 1.06rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.study-header-progress {
margin: 5px 0 0;
min-height: 20px;
padding: 2px 8px;
font-size: .62rem;
background: var(--surface-3);
border-color: color-mix(in srgb, var(--border) 90%, transparent);
}
.study-subtitle {
margin-top: 4px;
max-width: 100%;
color: var(--muted);
font-size: .68rem;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.study-header-actions {
flex: 0 0 auto;
gap: 6px;
}
.study-question-host {
width: min(calc(100% - clamp(32px, 5vw, 100px)), var(--a72-study-content));
max-width: var(--a72-study-content);
padding-top: 24px;
}
.study-question-card {
background: color-mix(in srgb, var(--surface-2) 98%, var(--bg-1));
border-color: color-mix(in srgb, var(--border) 94%, transparent);
box-shadow: 0 12px 32px color-mix(in srgb, var(--bg-0) 35%, transparent);
}
.study-bottom-navigation {
width: min(calc(100% - clamp(48px, 10vw, 180px)), var(--a72-study-nav));
min-height: 52px;
margin: 0 auto 12px;
padding: 7px 9px;
gap: 11px;
border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--surface-2) 99%, var(--bg-1));
box-shadow: 0 8px 24px color-mix(in srgb, var(--bg-0) 24%, transparent);
}
.study-bottom-navigation > .button {
min-width: 92px;
min-height: 34px;
padding: 5px 11px;
border-radius: 9px;
font-size: .7rem;
}
.study-number-strip {
justify-content: center;
gap: 8px;
padding: 0 4px;
overflow: visible;
}
.study-number-button {
min-width: 38px;
width: 38px;
height: 34px;
padding: 0;
border-radius: 9px;
font-size: .68rem;
font-variant-numeric: tabular-nums;
}
.study-map-marker {
padding: 0 3px;
color: color-mix(in srgb, var(--muted) 84%, transparent);
font-size: .58rem;
font-weight: 750;
letter-spacing: .01em;
}
/* A dica duplicava informação e ficava sobre a barra inferior nas telas largas. */
.study-shortcuts-hint { display: none !important; }
/* 2 — listas: cards não esticam para ocupar uma fileira inteira. */
.saved-lists.list-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
justify-content: start;
align-items: stretch;
gap: 14px;
}
.saved-list-card {
width: 100%;
min-height: 250px;
padding: 15px;
border-radius: 15px;
background: color-mix(in srgb, var(--surface-2) 97%, var(--bg-1));
box-shadow: 0 9px 24px color-mix(in srgb, var(--bg-0) 22%, transparent);
}
.saved-list-card > p { min-height: 36px; margin-bottom: 11px; }
.list-card-metrics > div { padding: 8px 9px; }
.list-card-progress { margin-top: 11px; }
.list-card-footer { padding-top: 12px; }
.list-detail-panel {
max-width: 1120px;
margin-inline: auto;
padding: 16px;
border-radius: 15px;
background: color-mix(in srgb, var(--surface-2) 98%, var(--bg-1));
}
.list-detail-heading { margin-bottom: 12px; }
.list-detail-panel #selectedListQuestions {
max-height: min(48vh, 520px);
overflow: auto;
padding-right: 3px;
}
.list-detail-actions { gap: 6px; }
.list-detail-actions .button { min-height: 34px; }
/* 4 — superfícies do dashboard: o conteúdo recente não ganha uma tonalidade isolada. */
.dashboard-grid > .panel,
.recent-panel,
.recent-panel .compact-item {
background: color-mix(in srgb, var(--surface-2) 97%, var(--bg-1));
}
.recent-panel .compact-item {
border-color: color-mix(in srgb, var(--border) 92%, transparent);
box-shadow: none;
}
/* 5 + 6 + 7 — banco: seleção compacta, action dock sólido e busca integrada ao tema. */
.bank-reference-header {
background: color-mix(in srgb, var(--surface-2) 98%, var(--bg-1));
border-color: color-mix(in srgb, var(--border) 92%, transparent);
}
.bank-reference-header-actions .bank-question-search {
width: min(410px, 38vw);
min-height: 42px;
padding-inline: 12px;
border-color: rgba(var(--theme-rgb-3), .24);
background:
linear-gradient(90deg, rgba(var(--theme-rgb), .12), rgba(var(--theme-rgb), .035) 56%, transparent),
color-mix(in srgb, var(--surface-3) 94%, var(--bg-1));
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.bank-reference-header-actions .bank-question-search:focus-within {
border-color: rgba(var(--theme-rgb-3), .48);
box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .08), inset 0 1px 0 rgba(255,255,255,.03);
}
.bank-reference-header-actions .bank-question-search input::placeholder {
color: color-mix(in srgb, var(--muted) 82%, transparent);
}
@media (min-width: 1181px) {
.bank-reference-columns {
grid-template-columns: minmax(520px, 1fr) minmax(330px, 430px) !important;
gap: 14px;
align-items: start;
}
.bank-reference-columns > .bank-filter-panel {
min-height: 455px !important;
}
.bank-reference-columns > .bank-selection-panel {
min-height: 0 !important;
max-height: none;
}
}
.bank-selection-panel {
padding: 14px 16px !important;
background: color-mix(in srgb, var(--surface-2) 98%, var(--bg-1));
border-color: color-mix(in srgb, var(--border) 92%, transparent);
}
.bank-selection-heading {
align-items: center;
padding-bottom: 9px;
gap: 9px;
}
.bank-selection-heading h2 { margin: 1px 0 1px; font-size: 1rem; }
.bank-selection-heading > div:first-child > p:last-child {
margin: 2px 0 0;
font-size: .66rem;
line-height: 1.3;
}
.bank-selection-heading-actions { gap: 7px; }
.bank-selection-count { min-height: 24px; padding: 3px 8px; font-size: .65rem; }
.bank-selection-panel .bank-filter-chips {
min-height: 0 !important;
max-height: 138px !important;
padding: 6px 0 8px !important;
}
.bank-applied-label { margin: 9px 0 2px; }
.bank-additional-options { margin-top: 5px; }
.bank-admin-tools { margin-top: 7px !important; }
.bank-selection-panel.is-empty {
gap: 0;
}
.bank-selection-panel.is-empty .bank-applied-label,
.bank-selection-panel.is-empty .bank-filter-chips {
display: none !important;
}
.bank-selection-panel.is-empty .bank-selection-heading > div:first-child > p:last-child {
max-width: 250px;
}
.bank-action-dock {
position: sticky;
bottom: 12px;
z-index: 12;
width: min(100%, 1080px);
max-width: 1080px;
margin: 16px auto 0;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--border) 90%, rgba(var(--theme-rgb-3), .18));
border-radius: 13px;
background: color-mix(in srgb, var(--surface-2) 99%, var(--bg-1));
box-shadow: 0 12px 30px color-mix(in srgb, var(--bg-0) 32%, transparent);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.bank-action-count {
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--border);
border-radius: 9px;
background: color-mix(in srgb, var(--surface-3) 82%, var(--surface-2));
font-size: .72rem;
}
.bank-action-buttons { gap: 7px; }
.bank-action-buttons .button {
min-height: 36px;
padding: 6px 11px;
border-radius: 9px;
font-size: .74rem;
box-shadow: none;
}
.bank-action-buttons .button.ghost,
.bank-action-buttons .button.secondary {
background: color-mix(in srgb, var(--surface-3) 90%, var(--surface-2));
}
.bank-action-buttons .button.primary {
background: rgb(var(--theme-rgb));
}
@media (max-width: 1180px) {
.saved-lists.list-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bank-reference-columns > .bank-selection-panel { min-height: 0 !important; }
}
@media (max-width: 820px) {
.study-header {
align-items: flex-start;
padding-inline: 12px;
}
.study-title-block { max-width: min(55vw, 480px); }
.study-subtitle { display: none; }
.study-bottom-navigation {
width: 100%;
margin-bottom: 0;
border-inline: 0;
border-bottom: 0;
border-radius: 0;
}
.saved-lists.list-card-grid { grid-template-columns: 1fr; }
.bank-reference-header-actions .bank-question-search { width: 100%; }
}
@media (max-width: 620px) {
.study-bottom-navigation { gap: 6px; padding-inline: 7px; }
.study-bottom-navigation > .button { min-width: 76px; padding-inline: 8px; }
.study-number-strip { gap: 5px; overflow-x: auto; justify-content: flex-start; }
.study-number-button { min-width: 33px; width: 33px; height: 31px; }
.study-map-marker { display: none; }
.bank-action-dock { width: 100%; }
}
/* ========================================================================== */
/* Alpha.74 · UI Density Fix */
/* Correcoes visuais solicitadas apos validacao real no Netlify. */
/* ========================================================================== */
/* Dashboard: Atividade deixa de dominar a dobra inicial. */
.dashboard-grid {
align-items: start !important;
}
.recent-panel {
align-self: start;
max-height: 286px;
padding: 14px !important;
overflow: hidden;
}
.recent-panel .section-heading {
margin-bottom: 8px;
}
.recent-panel #recentQuestionList {
gap: 6px;
max-height: 202px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
scrollbar-width: thin;
}
.recent-panel .compact-item {
min-height: 56px;
max-height: 60px;
padding: 7px 10px;
gap: 8px;
overflow: hidden;
border-radius: 10px;
}
.recent-panel .compact-item > button {
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.recent-panel .compact-item strong {
display: block !important;
max-width: 100%;
max-height: 1.35em;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
font-size: .78rem;
line-height: 1.35;
}
.recent-panel .compact-item span:not(.compact-status) {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: .64rem;
}
.recent-panel .compact-status {
font-size: .64rem;
}
.recent-panel .katex-display {
display: inline !important;
margin: 0 !important;
max-width: 100%;
overflow: hidden;
}
/* Banco: a busca passa a ser uma unica superficie solida, sem faixa tonal. */
.bank-reference-header-actions .bank-question-search {
background: color-mix(in srgb, var(--bg-1) 90%, rgb(var(--theme-rgb)) 10%) !important;
background-image: none !important;
border-color: color-mix(in srgb, var(--border) 78%, rgb(var(--theme-rgb-3)) 22%) !important;
box-shadow: none !important;
}
.bank-reference-header-actions .bank-question-search:focus-within {
background: color-mix(in srgb, var(--bg-1) 84%, rgb(var(--theme-rgb)) 16%) !important;
background-image: none !important;
border-color: rgba(var(--theme-rgb-3), .5) !important;
box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .075) !important;
}
.bank-reference-header-actions .bank-question-search input {
background: transparent !important;
box-shadow: none !important;
}
/* Banco: action dock deixa de flutuar centralizado e nasce do lado esquerdo. */
@media (min-width: 821px) {
.bank-action-dock {
width: fit-content !important;
max-width: min(100%, 1040px) !important;
margin-left: 0 !important;
margin-right: auto !important;
justify-content: flex-start !important;
gap: 10px !important;
}
.bank-action-count {
flex: 0 0 auto;
}
.bank-action-buttons {
flex: 0 1 auto;
}
}
/* Sessao: a navegacao inferior acompanha a margem esquerda do card, em vez de
ficar como uma ilha central no viewport. */
@media (min-width: 900px) {
.study-bottom-navigation {
width: min(calc(100% - 48px), 790px) !important;
margin-left: max(24px, calc((100vw - var(--a72-study-content)) / 2)) !important;
margin-right: auto !important;
margin-bottom: 12px !important;
}
}
@media (max-width: 899px) {
.recent-panel { max-height: none; }
.recent-panel #recentQuestionList { max-height: none; }
.study-bottom-navigation {
width: 100% !important;
margin-inline: 0 !important;
}
.bank-action-dock {
width: 100% !important;
margin-inline: 0 !important;
}
}
/* ========================================================================== */
/* Alpha.74 · UI + Media Hardening */
/* Correções orientadas pelas screenshots reais do workspace. */
/* ========================================================================== */
/* GIFs usam ![]()
real em vez de background-image: mais previsível em Chromium. */
.wallpaper-image,
.hero-wallpaper-image,
.wallpaper-preview-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.wallpaper-image { object-fit: cover; }
.hero-wallpaper-image {
z-index: 0;
border-radius: inherit;
object-fit: cover;
}
.wallpaper-preview-image {
z-index: 0;
object-fit: cover;
}
.hero-card > .hero-wallpaper-image { z-index: 0; }
body.hero-media-enabled .dashboard-personal-hero:has(.hero-wallpaper-image:not([hidden])) {
background-image: linear-gradient(98deg, rgba(7,8,14,.78) 0%, rgba(10,10,17,.47) 48%, rgba(7,8,14,.18) 76%, rgba(7,8,14,.10) 100%);
}
/* Dashboard: atividade é resumo, não uma segunda lista de questões. */
.dashboard-grid {
align-items: start;
}
.dashboard-grid > .panel {
align-self: start;
}
.recent-panel {
padding: 14px 16px;
}
.recent-panel .section-heading {
margin-bottom: 10px;
}
.recent-panel .compact-list {
gap: 7px;
}
.recent-panel .compact-item {
min-height: 62px;
max-height: 74px;
padding: 9px 11px;
overflow: hidden;
}
.recent-panel .compact-item > button {
min-width: 0;
overflow: hidden;
}
.recent-panel .compact-item strong {
display: -webkit-box;
max-height: 2.7em;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
font-size: .78rem;
line-height: 1.32;
}
.recent-panel .compact-item span:not(.compact-status) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: .64rem;
}
.recent-panel .compact-status {
font-size: .64rem;
}
/* Busca: superfície sólida. Remove a faixa/gradiente temático no meio do input. */
.bank-reference-header-actions .bank-question-search {
background: color-mix(in srgb, var(--surface-3) 92%, var(--surface-2)) !important;
border-color: color-mix(in srgb, var(--border-strong) 56%, var(--border)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}
.bank-reference-header-actions .bank-question-search:focus-within {
background: color-mix(in srgb, var(--surface-3) 96%, var(--surface-2)) !important;
border-color: rgba(var(--theme-rgb-3), .44) !important;
box-shadow: 0 0 0 3px rgba(var(--theme-rgb), .065) !important;
}
/* Action dock: ancorado à esquerda do workspace, sem parecer uma ilha central. */
.bank-action-dock {
width: min(100%, 1020px);
max-width: 1020px;
margin: 14px auto 0 0 !important;
justify-content: flex-start;
}
.bank-action-dock .bank-action-buttons {
margin-left: auto;
}
/* A navegação da sessão também segue a borda esquerda do card, em vez de flutuar. */
@media (min-width: 821px) {
.study-bottom-navigation {
width: min(820px, calc(100% - clamp(32px, 5vw, 100px)));
margin-left: max(16px, calc((100vw - var(--a72-study-content)) / 2));
margin-right: auto;
}
}
@media (max-width: 820px) {
.bank-action-dock { width: 100%; margin-inline: 0 !important; }
}
/* ========================================================================== */
/* Alpha.75 · Global Theme Harmony */
/* O tema agora governa também a estrutura do app — não apenas os acentos. */
/* ========================================================================== */
/* Paletas estruturais escuras. Wallpaper adaptativo continua podendo */
/* sobrescrever estas variáveis inline quando explicitamente habilitado. */
:root[data-theme="purple"] {
--bg-0: #08070d;
--bg-1: #0c0913;
--bg-2: #12101b;
--surface: rgba(20,17,29,.92);
--surface-2: rgba(27,23,38,.95);
--surface-3: rgba(36,30,49,.93);
--text: #f7f3ff;
--muted: #aaa2b8;
--muted-2: #7c7489;
--border: rgba(235,226,255,.085);
--border-strong: rgba(177,116,255,.28);
--shadow: 0 20px 55px rgba(0,0,0,.30);
}
:root[data-theme="red"] {
--bg-0: #0d0809;
--bg-1: #120a0c;
--bg-2: #191012;
--surface: rgba(29,18,21,.93);
--surface-2: rgba(38,23,27,.95);
--surface-3: rgba(48,29,34,.93);
--text: #fff5f7;
--muted: #c1a8ad;
--muted-2: #88757a;
--border: rgba(255,232,237,.085);
--border-strong: rgba(251,113,133,.27);
--shadow: 0 20px 55px rgba(0,0,0,.31);
}
:root[data-theme="blue"] {
--bg-0: #060a10;
--bg-1: #09101a;
--bg-2: #0e1723;
--surface: rgba(15,25,38,.93);
--surface-2: rgba(20,33,50,.95);
--surface-3: rgba(26,43,64,.93);
--text: #f2f7ff;
--muted: #a5b2c3;
--muted-2: #718096;
--border: rgba(225,238,255,.085);
--border-strong: rgba(96,165,250,.27);
--shadow: 0 20px 55px rgba(0,0,0,.31);
}
/* Variáveis semânticas do chrome. Todas derivam da superfície ativa, então */
/* funcionam também com temas claros e com a paleta extraída do wallpaper. */
:root {
--chrome-0: color-mix(in srgb, var(--bg-0) 96%, rgb(var(--theme-rgb)) 4%);
--chrome-1: color-mix(in srgb, var(--bg-1) 94%, rgb(var(--theme-rgb)) 6%);
--chrome-2: color-mix(in srgb, var(--bg-2) 92%, rgb(var(--theme-rgb)) 8%);
--chrome-panel: color-mix(in srgb, var(--surface) 96%, var(--bg-0) 4%);
--chrome-panel-2: color-mix(in srgb, var(--surface-2) 95%, var(--bg-1) 5%);
--chrome-panel-3: color-mix(in srgb, var(--surface-3) 94%, var(--bg-1) 6%);
--chrome-input: color-mix(in srgb, var(--surface-3) 88%, var(--bg-0) 12%);
--chrome-soft: color-mix(in srgb, var(--surface-2) 82%, transparent);
--chrome-hover: color-mix(in srgb, var(--surface-3) 72%, rgb(var(--theme-rgb)) 7%);
--theme-soft-text: color-mix(in srgb, var(--text) 72%, var(--muted));
}
/* Fundo global e casca do workspace. */
body {
background:
radial-gradient(circle at 76% -12%, rgba(var(--theme-rgb), .10), transparent 34%),
radial-gradient(circle at 12% 88%, rgba(var(--theme-rgb-2), .065), transparent 34%),
var(--bg-0) !important;
}
.app-shell,
.main { background: transparent; }
.sidebar {
background: linear-gradient(180deg, var(--chrome-1), var(--chrome-0)) !important;
border-color: var(--border) !important;
}
.topbar {
background: color-mix(in srgb, var(--chrome-0) 88%, transparent) !important;
border-color: var(--border) !important;
}
/* Superfícies compartilhadas. Remove o antigo "roxo residual" dos cards. */
.panel,
.metric-card,
.question-card,
.hero-card,
.list-card,
.bank-filter-panel,
.bank-results-head,
.question-pagination {
background: linear-gradient(180deg, var(--chrome-panel-2), var(--chrome-panel)) !important;
border-color: var(--border) !important;
}
.metric-card.accent-card {
background: linear-gradient(145deg, rgba(var(--theme-rgb),.20), var(--chrome-panel-2) 70%) !important;
border-color: rgba(var(--theme-rgb-3),.22) !important;
}
/* Controles e micro-superfícies devem pertencer à mesma família cromática. */
.global-search-wrap,
.profile-card,
.nav-group,
.auth-tabs,
.filter-tabs,
.answer-option,
.storage-status,
.pdf-review-item,
.active-filter-chip,
.smart-preview-row,
.list-type-option > span,
.pdf-queue-item,
.book-reader-more-menu {
background: var(--chrome-soft) !important;
border-color: var(--border) !important;
}
input,
select,
textarea {
background: var(--chrome-input) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--muted-2) 88%, transparent) !important; }
/* Sidebar: texto e avatar deixam de carregar lavanda fixa. */
.nav-item,
.nav-subitem { color: var(--muted) !important; }
.nav-group-title { color: color-mix(in srgb, var(--text) 88%, var(--muted)) !important; }
.nav-item:hover,
.nav-subitem:hover { background: var(--chrome-hover) !important; color: var(--text) !important; }
.nav-item.active,
.nav-subitem.active {
background: linear-gradient(90deg, rgba(var(--theme-rgb),.17), rgba(var(--theme-rgb),.045)) !important;
color: var(--text) !important;
}
.profile-avatar {
background: linear-gradient(135deg, var(--chrome-panel-3), var(--chrome-panel)) !important;
color: color-mix(in srgb, var(--purple-3) 70%, var(--text)) !important;
}
.eyebrow,
.math-preview::before { color: var(--muted) !important; }
/* Login também usa a paleta estrutural do tema. */
.auth-screen {
background:
linear-gradient(135deg, color-mix(in srgb, var(--bg-0) 90%, transparent), color-mix(in srgb, var(--bg-1) 92%, transparent)),
radial-gradient(circle at 72% 20%, rgba(var(--theme-rgb),.18), transparent 35%),
radial-gradient(circle at 20% 80%, rgba(var(--theme-rgb-2),.12), transparent 35%) !important;
}
.auth-card {
background: linear-gradient(180deg, var(--chrome-panel-2), var(--chrome-panel)) !important;
border-color: var(--border) !important;
}
/* Modo de estudo: era uma das maiores fontes de roxo fixo. */
.study-dialog {
background: var(--bg-0) !important;
border-color: rgba(var(--theme-rgb-3),.22) !important;
}
.study-dialog::backdrop {
background: color-mix(in srgb, var(--bg-0) 78%, rgba(0,0,0,.82)) !important;
}
.study-header {
background:
linear-gradient(180deg, rgba(var(--theme-rgb),.10), transparent 72%),
color-mix(in srgb, var(--chrome-panel-2) 94%, transparent) !important;
}
.study-navigation,
.study-number-strip {
background: color-mix(in srgb, var(--chrome-1) 96%, transparent) !important;
}
.study-progress-fill {
background: linear-gradient(90deg, var(--purple-2), var(--purple-3)) !important;
}
.study-number-button {
background: var(--chrome-soft) !important;
color: var(--theme-soft-text) !important;
}
.study-number-button.active {
color: #fff !important;
background: linear-gradient(135deg, var(--purple-2), var(--purple)) !important;
}
.study-question-card {
background:
radial-gradient(circle at 90% -8%, rgba(var(--theme-rgb),.075), transparent 34%),
linear-gradient(180deg, var(--chrome-panel-2), var(--chrome-panel)) !important;
border-color: var(--border) !important;
}
.study-question-rail {
background: linear-gradient(180deg, var(--purple-3), var(--purple-2) 72%, rgba(var(--theme-rgb-2),.16)) !important;
}
.study-question-number,
.study-question-meta { color: var(--muted) !important; }
.study-question-statement { color: var(--text) !important; }
.study-answer-option {
background: color-mix(in srgb, var(--chrome-panel-3) 52%, transparent) !important;
color: var(--theme-soft-text) !important;
}
.study-answer-option:hover { background: var(--chrome-hover) !important; }
.study-answer-option.selected {
background: linear-gradient(90deg, rgba(var(--theme-rgb),.12), var(--chrome-soft)) !important;
}
.study-answer-option.selected .study-answer-letter {
border-color: var(--purple-3) !important;
background: linear-gradient(135deg, var(--purple-2), var(--purple)) !important;
}
/* Modais / construtores / importador. */
.modal-dialog,
.small-dialog,
.list-builder-dialog,
.pdf-review-dialog,
.youtube-search-dialog,
.tutorial-dialog {
background: var(--chrome-panel-2) !important;
border-color: color-mix(in srgb, var(--border) 76%, rgb(var(--theme-rgb-3)) 24%) !important;
color: var(--text) !important;
}
.sticky-actions {
background: color-mix(in srgb, var(--chrome-panel-2) 96%, transparent) !important;
}
.math-preview {
background: rgba(var(--theme-rgb),.045) !important;
color: var(--text) !important;
}
.smart-preview-row strong,
.pdf-queue-item strong,
.list-type-option strong,
.list-builder-empty strong,
.storage-status strong { color: color-mix(in srgb, var(--text) 90%, var(--muted)) !important; }
.tag {
color: color-mix(in srgb, var(--purple-3) 68%, var(--text)) !important;
background: rgba(var(--theme-rgb),.075) !important;
}
/* Reader: mantém o papel/PDF neutro, mas integra toolbar e menus ao tema. */
.book-reader-topbar,
.book-reader-toolbar,
.book-reader-footer {
background: var(--chrome-panel-2) !important;
border-color: var(--border) !important;
}
.book-reader-more-menu {
background: color-mix(in srgb, var(--chrome-panel-2) 96%, var(--bg-0)) !important;
}
/* Temas claros: os overrides acima continuam semânticos, mas não devem escurecer
backdrop e superfícies por herdar fórmulas pensadas para dark mode. */
:root[data-theme$="-light"] {
--chrome-0: color-mix(in srgb, var(--bg-0) 98%, rgb(var(--theme-rgb)) 2%);
--chrome-1: color-mix(in srgb, var(--bg-1) 97%, rgb(var(--theme-rgb)) 3%);
--chrome-2: color-mix(in srgb, var(--bg-2) 96%, rgb(var(--theme-rgb)) 4%);
--chrome-panel: color-mix(in srgb, var(--surface) 98%, var(--bg-0) 2%);
--chrome-panel-2: color-mix(in srgb, var(--surface-2) 98%, var(--bg-1) 2%);
--chrome-panel-3: color-mix(in srgb, var(--surface-3) 97%, var(--bg-1) 3%);
--chrome-input: color-mix(in srgb, white 92%, rgb(var(--theme-rgb)) 8%);
--chrome-soft: color-mix(in srgb, var(--surface-3) 68%, transparent);
--chrome-hover: color-mix(in srgb, var(--surface-3) 78%, rgb(var(--theme-rgb)) 8%);
--theme-soft-text: color-mix(in srgb, var(--text) 78%, var(--muted));
}
:root[data-theme$="-light"] .study-dialog::backdrop {
background: rgba(30,24,38,.30) !important;
}
/* Banco já estava correto; estes seletores garantem que a transição entre banco
e o restante do workspace não produza uma mudança de matiz perceptível. */
.bank-reference-shell,
.bank-reference-header,
.bank-reference-main-panel,
.bank-reference-selection-panel,
.bank-action-dock {
border-color: var(--border) !important;
}
/* ========================================================================== */
/* Alpha.76 · Integrated Study Footer */
/* Navegacao da sessao fundida ao card, sem ilha inferior independente. */
/* ========================================================================== */
.study-card-stack {
flex: 1 0 auto;
width: min(calc(100% - clamp(32px, 5vw, 100px)), var(--a72-study-content, 1280px));
max-width: var(--a72-study-content, 1280px);
margin: 0 auto 18px;
padding-top: 24px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.study-card-stack .study-question-host {
flex: 0 0 auto;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.study-card-stack .study-question-card {
margin: 0 !important;
border-radius: 16px 16px 0 0 !important;
border-bottom-color: color-mix(in srgb, var(--border) 72%, transparent) !important;
box-shadow: 0 10px 28px color-mix(in srgb, var(--bg-0) 24%, transparent) !important;
}
.study-card-stack .study-bottom-navigation {
position: static !important;
width: 100% !important;
max-width: none !important;
min-height: 54px;
margin: -1px 0 0 !important;
padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
display: grid !important;
grid-template-columns: auto minmax(0, max-content) auto;
justify-content: center;
align-items: center;
column-gap: 14px;
border: 1px solid var(--border) !important;
border-top-color: color-mix(in srgb, var(--border) 72%, transparent) !important;
border-radius: 0 0 16px 16px !important;
background: color-mix(in srgb, var(--chrome-panel-2) 97%, var(--bg-1)) !important;
box-shadow: 0 10px 28px color-mix(in srgb, var(--bg-0) 24%, transparent) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.study-card-stack .study-bottom-navigation > .button {
min-width: 92px;
min-height: 34px;
margin: 0 !important;
padding: 6px 12px;
border-radius: 9px;
font-size: .72rem;
}
.study-card-stack .study-number-strip {
width: auto !important;
min-width: 0;
max-width: none;
display: flex;
justify-content: center !important;
align-items: center;
gap: 8px;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
}
.study-card-stack .study-number-button {
flex: 0 0 36px;
width: 36px;
min-width: 36px;
height: 34px;
padding: 0;
border-radius: 9px;
font-size: .69rem;
font-variant-numeric: tabular-nums;
}
.study-card-stack .study-number-button.active,
.study-card-stack .study-number-button[aria-current="true"] {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--theme-rgb), .22) !important;
}
/* Os marcadores de faixa antigos ("6-10", etc.) foram removidos no runtime. */
.study-card-stack .study-map-marker { display: none !important; }
@media (max-width: 820px) {
.study-card-stack {
width: calc(100% - 18px);
margin-bottom: 10px;
padding-top: 13px;
}
.study-card-stack .study-question-card { border-radius: 13px 13px 0 0 !important; }
.study-card-stack .study-bottom-navigation {
min-height: 50px;
padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
column-gap: 7px;
border-radius: 0 0 13px 13px !important;
}
.study-card-stack .study-bottom-navigation > .button {
min-width: 78px;
padding-inline: 8px;
font-size: .68rem;
}
.study-card-stack .study-number-strip { gap: 5px; overflow-x: auto !important; }
.study-card-stack .study-number-button {
flex-basis: 32px;
width: 32px;
min-width: 32px;
height: 31px;
}
}
@media (max-width: 540px) {
.study-card-stack { width: calc(100% - 12px); }
.study-card-stack .study-bottom-navigation {
grid-template-columns: auto minmax(0, 1fr) auto;
column-gap: 5px;
padding-inline: 6px !important;
}
.study-card-stack .study-bottom-navigation > .button {
min-width: 0;
padding-inline: 7px;
}
.study-card-stack .study-number-strip {
justify-content: flex-start !important;
scroll-snap-type: x proximity;
}
}
/* ========================================================================== */
/* Alpha.77 · Dashboard Layout Modes */
/* Layout clássico preservado + dashboard modular com hero à esquerda/direita. */
/* ========================================================================== */
.dashboard-layout-settings-panel {
overflow: hidden;
}
.dashboard-layout-choices {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.dashboard-layout-choice {
min-width: 0;
min-height: 132px;
display: grid;
grid-template-rows: 64px auto auto;
align-content: start;
gap: 6px;
padding: 11px;
border: 1px solid var(--border);
border-radius: 13px;
background: color-mix(in srgb, var(--surface-2) 96%, var(--bg-1));
color: var(--text);
text-align: left;
cursor: pointer;
transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.dashboard-layout-choice:hover {
border-color: color-mix(in srgb, var(--border-strong) 65%, rgb(var(--theme-rgb-3)) 35%);
background: color-mix(in srgb, var(--surface-3) 86%, var(--surface-2));
}
.dashboard-layout-choice.active {
border-color: rgba(var(--theme-rgb-3), .54);
background: color-mix(in srgb, var(--surface-3) 78%, rgb(var(--theme-rgb)) 22%);
box-shadow: 0 0 0 2px rgba(var(--theme-rgb), .06);
}
.dashboard-layout-choice strong {
display: block;
font-size: .78rem;
line-height: 1.25;
}
.dashboard-layout-choice small {
display: block;
color: var(--muted);
font-size: .63rem;
line-height: 1.35;
}
.dashboard-layout-preview {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 4px;
min-height: 64px;
padding: 6px;
border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
border-radius: 9px;
background: color-mix(in srgb, var(--bg-1) 84%, var(--surface-2));
}
.dashboard-layout-preview i {
display: block;
min-width: 0;
border-radius: 4px;
background: color-mix(in srgb, var(--surface-3) 78%, var(--surface-2));
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.dashboard-layout-choice.active .dashboard-layout-preview i:first-child {
background: color-mix(in srgb, rgb(var(--theme-rgb)) 36%, var(--surface-3));
border-color: rgba(var(--theme-rgb-3), .42);
}
.dashboard-layout-preview.preview-classic i:nth-child(1) { grid-column: 1 / -1; grid-row: 1 / 3; }
.dashboard-layout-preview.preview-classic i:nth-child(2) { grid-column: 1 / 3; grid-row: 3; }
.dashboard-layout-preview.preview-classic i:nth-child(3) { grid-column: 3 / 5; grid-row: 3; }
.dashboard-layout-preview.preview-classic i:nth-child(4) { grid-column: 5 / 7; grid-row: 3; }
.dashboard-layout-preview.preview-classic i:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
.dashboard-layout-preview.preview-left i:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 4; }
.dashboard-layout-preview.preview-left i:nth-child(2) { grid-column: 4 / 6; grid-row: 1 / 3; }
.dashboard-layout-preview.preview-left i:nth-child(3) { grid-column: 6 / 7; grid-row: 1 / 3; }
.dashboard-layout-preview.preview-left i:nth-child(4) { grid-column: 4 / 7; grid-row: 3 / 4; }
.dashboard-layout-preview.preview-left i:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
.dashboard-layout-preview.preview-right i:nth-child(1) { grid-column: 4 / 7; grid-row: 1 / 4; }
.dashboard-layout-preview.preview-right i:nth-child(2) { grid-column: 1 / 2; grid-row: 1 / 3; }
.dashboard-layout-preview.preview-right i:nth-child(3) { grid-column: 2 / 4; grid-row: 1 / 3; }
.dashboard-layout-preview.preview-right i:nth-child(4) { grid-column: 1 / 4; grid-row: 3 / 4; }
.dashboard-layout-preview.preview-right i:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
/* Desktop modular: o hero vira a peça dominante, aproximadamente quadrada,
e os módulos úteis ocupam o painel oposto. */
@media (min-width: 1121px) {
#dashboardPage:not([hidden])[data-dashboard-layout="dashboard-left"],
#dashboardPage:not([hidden])[data-dashboard-layout="dashboard-right"] {
display: grid;
grid-template-columns: minmax(390px, .92fr) minmax(560px, 1.28fr);
grid-template-rows: auto auto auto;
gap: 16px;
align-items: stretch;
}
#dashboardPage:not([hidden])[data-dashboard-layout="dashboard-left"] {
grid-template-areas:
"hero metrics"
"hero activity"
"reading patch";
}
#dashboardPage:not([hidden])[data-dashboard-layout="dashboard-right"] {
grid-template-columns: minmax(560px, 1.28fr) minmax(390px, .92fr);
grid-template-areas:
"metrics hero"
"activity hero"
"patch reading";
}
#dashboardPage[data-dashboard-layout^="dashboard"] > #dashboardHero {
grid-area: hero;
min-width: 0;
min-height: 500px;
height: 100%;
margin: 0;
padding: clamp(34px, 4vw, 54px);
align-items: flex-end;
border-radius: 20px;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > #dashboardHero .hero-copy {
width: min(92%, 560px);
max-width: 560px;
align-content: end;
padding-bottom: 4px;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > #dashboardHero .hero-title-line {
font-size: clamp(2rem, 3.2vw, 3.25rem);
max-width: 100%;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .metric-grid {
grid-area: metrics;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
align-self: stretch;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .metric-grid .metric-card {
min-height: 112px;
display: grid;
align-content: center;
padding: 16px 17px;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .metric-grid .metric-card strong {
font-size: clamp(1.65rem, 2vw, 2.15rem);
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .dashboard-grid {
grid-area: activity;
grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr);
gap: 12px;
min-width: 0;
align-self: stretch;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .dashboard-grid > .panel {
min-width: 0;
min-height: 236px;
height: 100%;
max-height: 278px;
overflow: hidden;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .dashboard-grid .recent-panel {
max-height: 278px;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .dashboard-grid .recent-panel #recentQuestionList {
max-height: 190px;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .dashboard-grid .progress-list {
max-height: 190px;
overflow: auto;
padding-right: 3px;
scrollbar-width: thin;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .dashboard-library-grid {
display: contents;
}
#dashboardPage[data-dashboard-layout^="dashboard"] #dashboardContinueReading {
grid-area: reading;
min-width: 0;
}
#dashboardPage[data-dashboard-layout^="dashboard"] .patch-notes-panel {
grid-area: patch;
min-width: 0;
}
#dashboardPage[data-dashboard-layout^="dashboard"]:has(#dashboardContinueReading[hidden]) .patch-notes-panel {
grid-column: 1 / -1;
grid-row: 3;
}
#dashboardPage[data-dashboard-layout^="dashboard"]:has(#dashboardContinueReading[hidden]) .patch-notes-panel .patch-notes-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#dashboardPage[data-dashboard-layout^="dashboard"]:has(#dashboardContinueReading[hidden]) .patch-notes-panel .patch-notes-list article {
min-width: 0;
}
}
/* Laptop/tablet: preserva a preferência, mas evita esmagar os módulos. */
@media (max-width: 1120px) {
#dashboardPage:not([hidden])[data-dashboard-layout="dashboard-left"],
#dashboardPage:not([hidden])[data-dashboard-layout="dashboard-right"] {
display: block;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > #dashboardHero {
min-height: 270px;
margin: 0 0 16px;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .metric-grid {
margin: 0 0 16px;
}
#dashboardPage[data-dashboard-layout^="dashboard"] > .dashboard-library-grid {
display: grid;
}
}
@media (max-width: 820px) {
.dashboard-layout-choices { grid-template-columns: 1fr; }
.dashboard-layout-choice {
min-height: 104px;
grid-template-columns: 116px minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
}
.dashboard-layout-preview {
grid-row: 1 / 3;
min-height: 76px;
}
}
/* ========================================================================== */
/* Alpha.78 · Surface Modes + Hero Static Media */
/* Faz Sólido / Translúcido / Glass funcionarem após a harmonização global e */
/* também quando o wallpaper está restrito ao hero. */
/* ========================================================================== */
/* O modo de superfície é um contrato visual global do wallpaper, inclusive
quando o asset escolhido está limitado ao hero. */
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface="solid"] {
--a78-panel-bg: color-mix(in srgb, var(--bg-2) 96%, rgb(var(--theme-rgb)) 4%);
--a78-panel-soft-bg: color-mix(in srgb, var(--bg-2) 90%, rgb(var(--theme-rgb)) 10%);
--a78-chrome-bg: var(--bg-1);
--a78-input-bg: color-mix(in srgb, var(--bg-2) 86%, var(--bg-1));
--a78-surface-blur: none;
--a78-surface-shadow: 0 10px 26px color-mix(in srgb, var(--bg-0) 22%, transparent);
}
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface="translucent"] {
--a78-panel-bg: color-mix(in srgb, var(--chrome-panel-2) 82%, transparent);
--a78-panel-soft-bg: color-mix(in srgb, var(--chrome-panel-3) 76%, transparent);
--a78-chrome-bg: color-mix(in srgb, var(--chrome-1) 84%, transparent);
--a78-input-bg: color-mix(in srgb, var(--chrome-input) 84%, transparent);
--a78-surface-blur: blur(6px) saturate(1.03);
--a78-surface-shadow: 0 12px 30px color-mix(in srgb, var(--bg-0) 20%, transparent);
}
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface="glass"] {
--a78-panel-bg: color-mix(in srgb, var(--chrome-panel-2) 58%, transparent);
--a78-panel-soft-bg: color-mix(in srgb, var(--chrome-panel-3) 52%, transparent);
--a78-chrome-bg: color-mix(in srgb, var(--chrome-1) 62%, transparent);
--a78-input-bg: color-mix(in srgb, var(--chrome-input) 62%, transparent);
--a78-surface-blur: blur(18px) saturate(1.12);
--a78-surface-shadow: 0 16px 38px color-mix(in srgb, var(--bg-0) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.045);
}
/* Chrome global. */
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface] .sidebar,
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface] .topbar {
background: var(--a78-chrome-bg) !important;
backdrop-filter: var(--a78-surface-blur) !important;
-webkit-backdrop-filter: var(--a78-surface-blur) !important;
border-color: var(--border) !important;
}
/* Superfícies estruturais. Este bloco vem DEPOIS da Alpha.75, então o modo
escolhido pelo usuário vence os backgrounds !important da harmonia global. */
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface] :is(
.panel,
.metric-card,
.question-card:not(.hero-card),
.list-card,
.saved-list-card,
.compact-item,
.bank-filter-panel,
.bank-results-shell,
.bank-results-head,
.bank-selection-panel,
.bank-reference-header,
.bank-reference-main-panel,
.bank-action-dock,
.question-pagination,
.study-question-card,
.study-bottom-navigation,
.study-header,
.study-navigation,
.modal-dialog,
.small-dialog,
.youtube-search-dialog,
.book-reader-more-menu
) {
background: var(--a78-panel-bg) !important;
background-image: none !important;
backdrop-filter: var(--a78-surface-blur) !important;
-webkit-backdrop-filter: var(--a78-surface-blur) !important;
border-color: var(--border) !important;
box-shadow: var(--a78-surface-shadow) !important;
}
/* Micro-superfícies deixam a diferença entre os três modos perceptível sem
aplicar blur individual em centenas de itens no Glass. */
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface] :is(
input,
select,
textarea,
.answer-option,
.study-answer-option,
.nav-group,
.profile-card,
.storage-status,
.active-filter-chip,
.smart-preview-row,
.pdf-review-item
) {
background: var(--a78-input-bg) !important;
background-image: none !important;
}
body:is(.custom-wallpaper-enabled, .hero-media-enabled)[data-wallpaper-surface="glass"] :is(
.answer-option,
.study-answer-option,
input,
select,
textarea
) {
/* Evita uma layer de backdrop por alternativa/input. */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* O hero é mídia, não uma superfície opaca: imagem/vídeo ficam em uma camada
dedicada e a paleta global não pode sobrescrevê-los. */
body.hero-media-enabled .dashboard-personal-hero {
overflow: hidden;
background: var(--a78-panel-bg, var(--chrome-panel-2)) !important;
border-color: color-mix(in srgb, var(--border) 72%, rgba(var(--theme-rgb-3), .34)) !important;
backdrop-filter: var(--a78-surface-blur, none) !important;
-webkit-backdrop-filter: var(--a78-surface-blur, none) !important;
}
body.hero-media-enabled .dashboard-personal-hero > .hero-wallpaper-image,
body.hero-media-enabled .dashboard-personal-hero > .hero-wallpaper-video {
display: block;
z-index: 0 !important;
}
body.hero-media-enabled .dashboard-personal-hero > .hero-wallpaper-image[hidden],
body.hero-media-enabled .dashboard-personal-hero > .hero-wallpaper-video[hidden] {
display: none !important;
}
/* Legibilidade real sobre a camada ![]()
/