:root {
--ai-blue: #1B4F9C;
--ai-blue-light: #2E6BC4;
--ai-orange: #F58220;
--ai-orange-light: #FFA040;
--ai-green: #27AE60;
--ai-green-light: #58D68D;
--ai-red: #E74C3C;
--ai-magenta: #E91E8C;
--ai-black: #1A1A2E;
--ai-white: #FFFFFF;
--ai-primary: var(--ai-blue);
--ai-primary-light: var(--ai-blue-light);
--ai-secondary: var(--ai-green);
--ai-accent: var(--ai-orange);
--ai-coral: var(--ai-red);
--ai-bg: #FFFFFF;
--ai-card: #FFFFFF;
--ai-text: var(--ai-black);
--ai-muted: #5A6270;
--ai-border: #D6E4F0;
--ai-radius: 16px;
--ai-shadow: 0 6px 24px rgba(27, 79, 156, 0.12);
}
[data-theme="dark"] {
--ai-bg: #1a1a2e;
--ai-card: #16213e;
--ai-text: #edf2f4;
--ai-muted: #a0aec0;
--ai-border: #2d3748;
--ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.ai-study-dashboard {
width: 100%;
max-width: min(1240px, 100%);
margin: 16px auto;
padding: 0;
color: var(--ai-text);
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
box-sizing: border-box;
}
.entry-content > .ai-study-dashboard,
.wp-block-shortcode .ai-study-dashboard,
.vc_row .ai-study-dashboard {
max-width: 100%;
}
.ai-study-dashboard *,
.ai-study-auth-shell * {
box-sizing: border-box;
}
.ai-study-shell {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
min-height: 760px;
border: 2px solid var(--ai-border);
background: var(--ai-bg);
border-radius: var(--ai-radius);
overflow: hidden;
box-shadow: var(--ai-shadow);
}
.ai-study-tabs {
padding: 14px;
border-right: 2px solid var(--ai-border);
background: var(--ai-card);
}
.ai-study-student-profile {
display: grid;
gap: 6px;
margin-bottom: 14px;
padding: 14px;
border: 2px solid var(--ai-primary-light);
border-radius: var(--ai-radius);
background: linear-gradient(135deg, #f8f5ff 0%, #fff9f0 100%);
}
.ai-study-brand-mark {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 4px;
line-height: 1;
}
.ai-study-brand-easy {
font-size: 22px;
font-weight: 900;
color: var(--ai-blue);
font-style: italic;
}
.ai-study-brand-padhai {
font-size: 22px;
font-weight: 900;
color: var(--ai-orange);
}
.ai-study-student-profile span {
color: var(--ai-muted);
font-size: 13px;
}
.ai-study-logout-button {
width: 100%;
min-height: 34px;
border: 1px solid #c8d6e2;
border-radius: 8px;
background: #ffffff;
color: #183247;
cursor: pointer;
font-weight: 700;
}
.ai-study-tab {
width: 100%;
margin: 0 0 6px;
padding: 10px 12px;
border: 2px solid transparent;
border-radius: 12px;
background: transparent;
color: var(--ai-text);
cursor: pointer;
text-align: left;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
transition: all 0.2s ease;
}
.ai-study-tab.is-active,
.ai-study-tab:hover {
border-color: var(--ai-primary-light);
background: linear-gradient(135deg, #f0edff 0%, #e8fff9 100%);
color: var(--ai-primary);
transform: translateX(3px);
}
.ai-study-auth-shell {
max-width: 1040px;
margin: 28px auto;
padding: 22px;
border: 1px solid #dce4ec;
background: #f6f8fb;
color: #182033;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ai-study-auth-hero {
margin-bottom: 18px;
padding: 24px;
border: 1px solid #cddce9;
border-radius: 8px;
background: #ffffff;
}
.ai-study-auth-hero span {
display: block;
margin-bottom: 8px;
color: #0f6ba8;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.ai-study-auth-hero h2 {
margin: 0 0 8px;
font-size: 30px;
line-height: 1.15;
}
.ai-study-auth-hero p {
margin: 0;
color: #526070;
line-height: 1.5;
}
.ai-study-auth-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ai-study-auth-card {
display: grid;
gap: 13px;
padding: 20px;
border: 1px solid #dce4ec;
border-radius: 8px;
background: #ffffff;
}
.ai-study-auth-card h3 {
margin: 0;
font-size: 21px;
}
.ai-study-auth-card label {
display: grid;
gap: 7px;
color: #344054;
font-weight: 700;
}
.ai-study-auth-card input[type="text"],
.ai-study-auth-card input[type="email"],
.ai-study-auth-card input[type="tel"],
.ai-study-auth-card input[type="password"] {
width: 100%;
min-height: 42px;
padding: 9px 11px;
border: 1px solid #c8d6e2;
border-radius: 8px;
}
.ai-study-auth-check {
display: flex !important;
flex-direction: row;
align-items: center;
gap: 8px !important;
}
.ai-study-auth-notice {
margin-bottom: 14px;
padding: 12px 14px;
border-left: 4px solid #0b67a3;
background: #eef7ff;
color: #18435e;
font-weight: 700;
}
.ai-study-auth-note {
padding: 10px 12px;
border: 1px solid #bdd7e9;
border-radius: 8px;
background: #f2f9ff;
color: #18435e;
line-height: 1.45;
}
.ai-study-main {
min-width: 0;
padding: 22px;
}
.ai-study-panel {
display: none;
}
.ai-study-panel.is-active {
display: block;
}
.ai-study-hero,
.ai-study-scan-hero {
margin-bottom: 18px;
padding: 26px;
border: 1px solid #cddce9;
border-radius: 8px;
background: linear-gradient(135deg, #ffffff 0%, #ecf7ff 100%);
}
.ai-study-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 180px;
gap: 18px;
align-items: center;
}
.ai-study-kicker {
display: block;
margin-bottom: 8px;
color: #0f6ba8;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.ai-study-hero h2,
.ai-study-scan-hero h2 {
margin: 0 0 10px;
font-size: 32px;
line-height: 1.15;
}
.ai-study-hero p,
.ai-study-scan-hero p,
.ai-study-muted {
margin: 0 0 16px;
color: #526070;
line-height: 1.55;
}
.ai-study-hero__media {
display: grid;
place-items: center;
min-height: 150px;
border-radius: 8px;
background: #ffffff;
border: 1px solid #d6e3ee;
}
.ai-study-camera-mark {
font-size: 72px;
}
.ai-study-primary-button,
.ai-study-secondary-button,
.ai-study-upload-button,
.ai-study-link-button {
min-height: 40px;
padding: 9px 14px;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
}
.ai-study-primary-button {
border: 0;
background: linear-gradient(135deg, var(--ai-blue) 0%, var(--ai-orange) 55%, var(--ai-magenta) 100%);
color: var(--ai-white);
box-shadow: 0 6px 18px rgba(245, 130, 32, 0.35);
font-weight: 800;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-study-primary-button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(245, 130, 32, 0.45);
}
.ai-study-secondary-button,
.ai-study-upload-button {
border: 2px solid var(--ai-blue-light);
background: var(--ai-white);
color: var(--ai-blue);
font-weight: 700;
}
.ai-study-chip-row span,
.ai-study-feature-list span {
background: linear-gradient(135deg, #E8F5E9, #E3F2FD);
border: 1px solid var(--ai-green-light);
color: var(--ai-blue);
font-weight: 700;
}
.ai-study-kicker {
color: var(--ai-orange);
font-weight: 800;
} .ai-study-tool-camera {
margin-bottom: 14px;
padding: 12px;
border: 2px dashed var(--ai-blue-light);
border-radius: var(--ai-radius);
background: linear-gradient(135deg, #F0F7FF 0%, #FFF8F0 100%);
}
.ai-study-tool-camera-title {
display: block;
margin-bottom: 8px;
color: var(--ai-blue);
font-size: 14px;
}
.ai-study-input-window,
.ai-study-output-window {
display: grid;
gap: 8px;
padding: 10px;
border-radius: 12px;
}
.ai-study-input-window {
border: 2px solid #c2185b;
background: linear-gradient(135deg, #fce4ec 0%, #fff5f8 100%);
}
.ai-study-input-window--scan {
margin-bottom: 14px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-study-input-window--scan .ai-study-camera-video,
.ai-study-input-window--scan .ai-study-image-preview,
.ai-study-input-window--scan .ai-study-camera-canvas {
position: relative;
inset: auto;
width: 100%;
max-height: 220px;
aspect-ratio: 16 / 9;
border-radius: 10px;
background: #1a1a2e;
object-fit: contain;
}
.ai-study-input-window--scan .ai-study-camera-toolbar {
position: relative;
z-index: 3;
}
.ai-study-output-window {
margin-top: 14px;
border: 2px solid var(--ai-green);
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}
.ai-study-window-label {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #880e4f;
}
.ai-study-window-label--output {
color: #1b5e20;
}
.ai-study-tool-camera-box,
.ai-study-camera-box--horizontal {
position: relative;
width: 100%;
aspect-ratio: 21 / 7;
max-height: 96px;
min-height: 72px;
border: 2px solid var(--ai-border);
border-radius: 10px;
background: #1a1a2e;
overflow: hidden;
}
.ai-study-tool-camera-video,
.ai-study-tool-camera-img,
.ai-study-camera-video,
.ai-study-image-preview {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.ai-study-tool-camera-img[hidden],
.ai-study-image-preview[hidden],
.ai-study-tool-camera-video[hidden] {
display: none !important;
}
.ai-study-tool-camera-empty,
.ai-study-camera-empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 12px;
text-align: left;
color: #ffffff;
font-size: 12px;
}
.ai-study-tool-camera-empty span,
.ai-study-camera-empty > span:first-child {
font-size: 26px;
flex-shrink: 0;
}
.ai-study-tool-camera-empty strong {
font-size: 13px;
}
.ai-study-tool-camera-toolbar,
.ai-study-camera-toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: stretch;
}
.ai-study-tool-camera-toolbar .ai-study-primary-button,
.ai-study-tool-camera-toolbar .ai-study-secondary-button,
.ai-study-tool-camera-toolbar .ai-study-upload-button,
.ai-study-camera-toolbar .ai-study-primary-button,
.ai-study-camera-toolbar .ai-study-secondary-button,
.ai-study-camera-toolbar .ai-study-upload-button {
flex: 1 1 calc(25% - 6px);
min-width: 88px;
font-size: 12px;
padding: 7px 8px;
text-align: center;
justify-content: center;
}
.ai-study-compact-label--inline {
flex: 1 1 140px;
min-width: 120px;
margin: 0;
}
.ai-study-compact-label--inline select {
min-height: 36px;
}
.ai-study-tool-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
}
.ai-study-tool-actions select,
.ai-study-tool-actions .ai-study-primary-button,
.ai-study-tool-actions .ai-study-secondary-button {
flex: 1 1 140px;
min-width: 0;
max-width: 100%;
}
.ai-study-tool-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.ai-study-tool-output.ai-study-output-window h3 {
margin: 0 0 8px;
font-size: 16px;
}
.ai-study-tool-grid--reading-layout {
gap: 20px;
width: 100%;
}
.ai-study-tool-grid--reading-layout .ai-study-tool-output {
width: 100%;
}
.ai-study-answer-output--horizontal {
line-height: 1.75;
font-size: 15px;
}
.ai-study-tool-inputs,
.ai-study-tool-output {
min-width: 0;
}
.ai-study-tool-inputs textarea,
.ai-study-tool-inputs select,
.ai-study-tool-inputs input {
width: 100%;
max-width: 100%;
} .ai-study-mobile-quick-grid {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.ai-study-mobile-quick-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 2px 10px;
align-items: start;
padding: 12px;
border: 2px solid var(--ai-border);
border-radius: 14px;
background: var(--ai-white);
text-align: left;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-study-mobile-quick-card:nth-child(3n + 1) { border-color: #1B4F9C; background: linear-gradient(135deg, #e3f2fd, #fff); }
.ai-study-mobile-quick-card:nth-child(3n + 2) { border-color: #F58220; background: linear-gradient(135deg, #fff3e0, #fff); }
.ai-study-mobile-quick-card:nth-child(3n) { border-color: #2e7d32; background: linear-gradient(135deg, #e8f5e9, #fff); }
.ai-study-mobile-quick-card:active {
transform: scale(0.98);
}
.ai-study-mobile-quick-card__icon {
grid-row: 1 / 3;
font-size: 28px;
line-height: 1;
}
.ai-study-mobile-quick-card strong {
font-size: 14px;
color: var(--ai-blue);
}
.ai-study-mobile-quick-card small {
grid-column: 2;
color: var(--ai-muted);
font-size: 11px;
line-height: 1.3;
}
.ai-study-stat-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
align-items: center;
padding: 14px;
}
.ai-study-stat-card__icon {
grid-row: 1 / span 3;
font-size: 30px;
line-height: 1;
}
.ai-study-stat-card__body {
display: grid;
gap: 2px;
min-width: 0;
}
.ai-study-stat-card__label {
font-size: 12px;
font-weight: 700;
color: var(--ai-muted);
}
.ai-study-stat-card--action .ai-study-stat-card__body {
gap: 8px;
}
.ai-study-master-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
align-items: start;
text-align: left;
}
.ai-study-master-card__icon {
grid-row: 1 / span 2;
font-size: 32px;
line-height: 1;
}
.ai-study-master-card__body {
min-width: 0;
}
.ai-study-master-card__body h3,
.ai-study-master-card h3 {
margin: 0 0 4px;
font-size: 15px;
}
.ai-study-master-card__body p,
.ai-study-master-card p {
margin: 0;
font-size: 12px;
line-height: 1.35;
}
@media (max-width: 900px) {
.ai-study-shell {
grid-template-columns: 1fr;
}
.ai-study-dashboard {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.ai-study-main {
padding: 10px 8px;
}
.ai-study-tool-grid,
.ai-study-answer-layout,
.ai-study-answer-layout--stacked {
grid-template-columns: 1fr !important;
}
.ai-study-tool-camera-toolbar .ai-study-primary-button,
.ai-study-tool-camera-toolbar .ai-study-secondary-button,
.ai-study-tool-camera-toolbar .ai-study-upload-button,
.ai-study-camera-toolbar .ai-study-primary-button,
.ai-study-camera-toolbar .ai-study-secondary-button,
.ai-study-camera-toolbar .ai-study-upload-button {
flex: 1 1 calc(50% - 4px);
}
.ai-study-compact-label--inline {
flex: 1 1 100%;
}
.ai-study-tool-actions select,
.ai-study-tool-actions .ai-study-primary-button,
.ai-study-tool-actions .ai-study-secondary-button {
flex: 1 1 100%;
width: 100%;
}
.ai-study-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-study-hero {
grid-template-columns: 1fr;
}
.ai-study-hero h2,
.ai-study-scan-hero h2 {
font-size: 22px;
}
}
@media (max-width: 480px) {
.ai-study-dashboard {
margin: 0;
padding: 0;
max-width: 100%;
}
.ai-study-shell {
border-radius: 0;
border-left: 0;
border-right: 0;
}
.ai-study-main {
padding: 10px;
}
.ai-study-stat-grid {
grid-template-columns: 1fr;
}
.ai-study-streak-grid {
grid-template-columns: 1fr;
}
.ai-study-master-card-grid {
grid-template-columns: 1fr !important;
}
.ai-study-english-tool-grid {
grid-template-columns: 1fr !important;
}
.ai-study-table-controls,
.ai-study-table-controls--wide,
.ai-study-table-controls--english {
grid-template-columns: 1fr !important;
}
.ai-study-buddy-card {
grid-template-columns: 1fr;
text-align: center;
}
.ai-study-buddy-actions {
justify-content: center;
}
.ai-study-subscription-grid {
grid-template-columns: 1fr !important;
}
}
.ai-study-secondary-button,
.ai-study-upload-button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #c8d6e2;
background: #ffffff;
color: #183247;
}
.ai-study-link-button {
border: 0;
background: transparent;
color: #0b67a3;
}
.ai-study-stat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.ai-study-buddy-card {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 16px;
align-items: center;
margin-bottom: 18px;
padding: 18px;
border: 1px solid #d7d1ef;
border-radius: 8px;
background: #fbf9ff;
}
.ai-study-buddy-avatar {
display: grid;
place-items: center;
width: 84px;
height: 84px;
border-radius: 50%;
border: 3px solid #8c7ad8;
background: #ffffff;
color: #51429a;
font-size: 26px;
font-weight: 900;
}
.ai-study-buddy-card h3 {
margin: 0 0 6px;
font-size: 22px;
}
.ai-study-buddy-card p {
margin: 0 0 12px;
color: #526070;
}
.ai-study-buddy-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.ai-study-buddy-message {
padding: 10px 12px;
border-radius: 8px;
background: #ffffff;
color: #344054;
font-weight: 700;
}
.ai-study-streak-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.ai-study-streak-badge {
padding: 16px;
border: 1px solid #dce4ec;
border-radius: 8px;
background: #ffffff;
}
.ai-study-streak-badge.is-unlocked {
border-color: #b8d8c0;
background: #f4fbf5;
}
.ai-study-streak-badge strong,
.ai-study-streak-badge span {
display: block;
}
.ai-study-streak-badge span {
margin-top: 6px;
color: #667085;
}
.ai-study-stat-card,
.ai-study-section,
.ai-study-result-box,
.ai-study-subscription-box {
padding: 18px;
border: 1px solid #dce4ec;
border-radius: 8px;
background: #ffffff;
}
.ai-study-stat-card span:not(.ai-study-stat-card__icon),
.ai-study-stat-card small,
.ai-study-subscription-box span {
display: block;
color: #667085;
}
.ai-study-stat-card__label {
display: block;
color: #667085;
}
.ai-study-stat-card strong {
display: block;
margin: 4px 0 2px;
font-size: 22px;
}
.ai-study-stat-card--action {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 12px;
}
.ai-study-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.ai-study-section__header h2,
.ai-study-section__header h3 {
margin: 0;
}
.ai-study-dashboard__blocked {
margin-bottom: 18px;
padding: 12px 14px;
border-left: 4px solid #c93535;
background: #fff2f2;
color: #8a1f1f;
}
.ai-study-camera-grid {
display: none;
}
.ai-study-camera-box {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid #cddce9;
border-radius: 8px;
background: #111827;
}
.ai-study-camera-box:not(.ai-study-camera-box--horizontal) {
min-height: 360px;
}
.ai-study-camera-actions {
display: none;
}
.ai-study-camera-toolbar {
display: flex;
}
.ai-study-compact-label {
display: grid;
gap: 6px;
color: #344054;
font-size: 13px;
font-weight: 700;
}
.ai-study-compact-label select {
min-height: 40px;
width: 100%;
padding: 8px 10px;
border: 1px solid #c8d6e2;
border-radius: 8px;
background: #ffffff;
color: #182033;
}
.ai-study-smart-ocr-box {
display: grid;
grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
gap: 14px;
margin-bottom: 14px;
padding: 16px;
border: 1px solid #bdd7e9;
border-radius: 8px;
background: #f2f9ff;
}
.ai-study-smart-ocr-box strong {
display: block;
margin-bottom: 6px;
color: #0b4778;
}
.ai-study-smart-ocr-box p {
margin: 0;
color: #526070;
line-height: 1.45;
}
.ai-study-revision-box,
.ai-study-weakness-box {
display: grid;
gap: 12px;
margin-top: 2px;
margin-bottom: 14px;
padding: 16px;
border: 1px solid #cfe0d3;
border-radius: 8px;
background: #f5fbf6;
}
.ai-study-revision-box {
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
}
.ai-study-revision-box strong,
.ai-study-weakness-box strong {
display: block;
margin-bottom: 6px;
color: #235b35;
}
.ai-study-revision-box p,
.ai-study-weakness-box p,
.ai-study-output-block p {
margin: 0;
color: #526070;
line-height: 1.45;
}
.ai-study-output-block h4 {
margin: 0 0 10px;
}
.ai-study-output-block ol,
.ai-study-output-block ul {
margin-top: 8px;
margin-bottom: 8px;
padding-left: 22px;
}
.ai-study-premium-box {
display: grid;
gap: 10px;
padding: 16px;
border: 1px solid #d8c58c;
border-radius: 8px;
background: #fffaf0;
}
.ai-study-premium-badge {
width: fit-content;
padding: 5px 9px;
border-radius: 8px;
background: #7a5600;
color: #ffffff;
font-size: 12px;
font-weight: 800;
}
.ai-study-premium-box strong {
color: #5a3d00;
font-size: 18px;
}
.ai-study-premium-box p {
margin: 0;
color: #5f5a4d;
line-height: 1.45;
}
.ai-study-premium-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-study-chat-row {
margin: 8px 0;
padding: 10px 12px;
border-radius: 8px;
line-height: 1.45;
}
.ai-study-chat-user {
background: #eef7ff;
color: #18435e;
}
.ai-study-chat-ai {
background: #f4fbf5;
color: #235b35;
}
.ai-study-feature-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.ai-study-feature-list span {
padding: 8px 10px;
border: 1px solid #d6e3ee;
border-radius: 8px;
background: #ffffff;
color: #344054;
font-size: 13px;
}
.ai-study-answer-layout {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.ai-study-answer-layout--stacked {
grid-template-columns: 1fr;
}
.ai-study-result-box--horizontal textarea {
min-height: 72px;
max-height: 120px;
}
.ai-study-result-box--horizontal .ai-study-answer-output {
line-height: 1.75;
}
.ai-study-result-box h3 {
margin: 0 0 10px;
}
.ai-study-result-box textarea {
width: 100%;
min-height: 150px;
padding: 12px;
border: 1px solid #c8d6e2;
border-radius: 8px;
resize: vertical;
}
.ai-study-answer-output {
padding: 16px 18px;
border: 1px solid #c8d6e2;
border-radius: 12px;
background: #f8fafc;
color: #344054;
line-height: 1.75;
font-size: 15px;
}
.ai-study-save-note {
margin: 12px 0 0;
padding-top: 10px;
border-top: 1px solid #dce4ec;
color: #0b67a3;
font-weight: 700;
}
.ai-study-history-list {
display: grid;
gap: 10px;
}
.ai-study-history-item {
padding: 14px;
border: 1px solid #dce4ec;
border-radius: 8px;
background: #ffffff;
}
.ai-study-history-item span {
color: #0b67a3;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.ai-study-history-item h4 {
margin: 6px 0;
}
.ai-study-history-item p,
.ai-study-empty-state {
margin: 0;
color: #667085;
}
.ai-study-subscription-box {
display: grid;
gap: 8px;
}
.ai-study-subscription-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-bottom: 14px;
}
.ai-study-subscription-box p {
margin: 0;
color: #526070;
}
.ai-study-tool-panel {
display: grid;
gap: 16px;
}
.ai-study-tool-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.ai-study-tool-inputs,
.ai-study-tool-output {
display: grid;
align-content: start;
gap: 12px;
}
.ai-study-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-study-chip-row span {
padding: 8px 10px;
border: 1px solid #bdd7e9;
border-radius: 8px;
background: #eef7ff;
color: #18435e;
font-size: 13px;
font-weight: 700;
}
.ai-study-field-label {
display: grid;
gap: 8px;
color: #344054;
font-weight: 700;
}
.ai-study-file-input,
.ai-study-field-label textarea,
.ai-study-tool-actions select {
width: 100%;
border: 1px solid #c8d6e2;
border-radius: 8px;
background: #ffffff;
color: #182033;
}
.ai-study-file-input,
.ai-study-tool-actions select {
min-height: 42px;
padding: 8px 10px;
}
.ai-study-field-label textarea {
min-height: 170px;
padding: 12px;
resize: vertical;
font-weight: 400;
}
.ai-study-file-name {
margin: -4px 0 2px;
color: #667085;
font-size: 13px;
}
.ai-study-tool-actions {
display: grid;
grid-template-columns: minmax(0, 150px) minmax(0, 150px) max-content max-content;
gap: 10px;
align-items: center;
}
.ai-study-premium-fields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.ai-study-premium-fields input,
.ai-study-premium-fields select {
width: 100%;
min-height: 42px;
border: 1px solid #c9d4df;
border-radius: 8px;
padding: 10px 12px;
}
.ai-study-premium-previews {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
margin: 10px 0 12px;
}
.ai-study-premium-previews img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
border: 1px solid #dce4ec;
}
.ai-study-warning-inline {
background: #fff8e6;
border: 1px solid #ffe1a3;
color: #8a5a00;
border-radius: 8px;
padding: 10px 12px;
font-weight: 700;
}
.ai-study-master-card-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 14px 0 18px;
}
.ai-study-master-card {
background: #fff;
border: 1px solid #dce4ec;
border-radius: 12px;
padding: 12px;
min-height: auto;
}
.ai-study-master-card.is-highlighted {
border-color: #2e90fa;
background: #eff8ff;
}
.ai-study-master-card h3 {
margin: 0 0 8px;
font-size: 16px;
}
.ai-study-master-card p {
margin: 0;
color: #667085;
font-size: 13px;
}
.ai-study-table-builder {
background: #fff;
border: 1px solid #dce4ec;
border-radius: 12px;
padding: 18px;
width: 100%;
}
.ai-study-table-output {
padding: 18px 20px;
margin-top: 12px;
border: 1px solid #dce4ec;
border-radius: 12px;
background: #f8fafc;
color: #344054;
line-height: 1.75;
font-size: 15px;
width: 100%;
}
.ai-study-table-controls {
display: grid;
grid-template-columns: minmax(0, 160px) minmax(0, 180px) repeat(3, max-content);
gap: 10px;
align-items: end;
margin-bottom: 14px;
}
.ai-study-table-controls--wide {
grid-template-columns: minmax(0, 220px) repeat(5, minmax(0, 120px)) max-content max-content;
}
.ai-study-table-controls--english {
grid-template-columns: repeat(4, minmax(0, 1fr)) max-content;
}
.ai-study-calculation-result ol,
.ai-study-formula-result ol {
margin-top: 12px;
}
.ai-study-graph-placeholder {
min-height: 220px;
border: 1px dashed #98a2b3;
border-radius: 8px;
background: linear-gradient(90deg, rgba(152,162,179,.18) 1px, transparent 1px), linear-gradient(rgba(152,162,179,.18) 1px, transparent 1px);
background-size: 28px 28px;
padding: 16px;
display: grid;
align-content: center;
text-align: center;
}
.ai-study-vocab-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ai-study-vocab-card {
border: 1px solid #e4eaf1;
border-radius: 8px;
background: #f7f9fc;
padding: 14px;
}
.ai-study-vocab-card h5 {
margin: 0 0 10px;
font-size: 18px;
}
.ai-study-vocab-card p {
margin: 6px 0;
}
.ai-study-english-tool-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ai-study-english-tool-card {
border: 1px solid #e4eaf1;
border-radius: 8px;
background: #fff;
padding: 14px;
}
.ai-study-english-tool-card h4 {
margin: 0 0 8px;
}
.ai-study-english-tool-controls {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 10px 0;
}
.ai-study-english-tool-card textarea,
.ai-study-english-tool-card select {
width: 100%;
border: 1px solid #c9d4df;
border-radius: 8px;
padding: 10px 12px;
}
.ai-study-table-lines {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.ai-study-table-lines div {
display: flex;
justify-content: space-between;
gap: 12px;
border: 1px solid #e4eaf1;
border-radius: 8px;
padding: 10px 12px;
background: #f7f9fc;
}
.ai-study-tool-output h3 {
margin: 0;
}
.ai-study-feature-list--wide {
margin-top: 2px;
}
.ai-study-advanced {
max-width: 1120px;
margin: 24px auto;
padding: 0 16px;
color: #172033;
}
.ai-study-advanced-header {
margin-bottom: 16px;
}
.ai-study-advanced-header h2 {
margin: 0 0 8px;
font-size: 30px;
line-height: 1.15;
}
.ai-study-advanced-header p {
margin: 0;
color: #667085;
}
.ai-study-advanced-card,
.ai-study-question-card {
background: #fff;
border: 1px solid #dce4ec;
border-radius: 8px;
padding: 18px;
margin-bottom: 14px;
box-shadow: 0 8px 24px rgba(22, 34, 51, .06);
}
.ai-study-advanced-grid {
display: grid;
gap: 12px;
margin-bottom: 12px;
}
.ai-study-advanced-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-study-advanced-grid--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ai-study-field {
display: grid;
gap: 6px;
font-weight: 700;
}
.ai-study-field input,
.ai-study-field select,
.ai-study-field textarea,
.ai-study-filter-bar input,
.ai-study-filter-bar select,
.ai-study-inline-form input,
.ai-study-inline-form select {
width: 100%;
min-height: 42px;
border: 1px solid #c9d4df;
border-radius: 8px;
padding: 10px 12px;
background: #fff;
color: #172033;
}
.ai-study-field textarea {
resize: vertical;
}
.ai-study-filter-bar,
.ai-study-inline-form,
.ai-study-card-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: end;
margin-bottom: 14px;
}
.ai-study-filter-bar label {
display: grid;
gap: 6px;
flex: 1 1 170px;
font-weight: 700;
}
.ai-study-inline-form > * {
flex: 1 1 160px;
}
.ai-study-advanced-list {
display: grid;
gap: 14px;
}
.ai-study-advanced-list--grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-study-meta-row,
.ai-study-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.ai-study-meta-row span,
.ai-study-chip-row span {
background: #eef6f1;
color: #1f6f4a;
border-radius: 999px;
padding: 5px 10px;
font-size: 12px;
font-weight: 700;
}
.ai-study-answer-box {
background: #f7f9fc;
border: 1px solid #e4eaf1;
border-radius: 8px;
padding: 12px;
}
.ai-study-warning,
.ai-study-success {
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
font-weight: 700;
}
.ai-study-warning {
background: #fff8e6;
color: #8a5a00;
border: 1px solid #ffe1a3;
}
.ai-study-success {
background: #ecfdf3;
color: #05603a;
border: 1px solid #abefc6;
}
.ai-study-timer {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 92px;
min-height: 44px;
background: #172033;
color: #fff;
border-radius: 8px;
font-weight: 800;
letter-spacing: 0;
margin-bottom: 12px;
}
.ai-study-timer.is-finished {
background: #b42318;
}
.ai-study-question-card {
display: grid;
gap: 10px;
}
.ai-study-question-card legend {
font-weight: 800;
margin-bottom: 8px;
}
.ai-study-question-card label {
display: flex;
gap: 8px;
align-items: flex-start;
}
.ai-study-history-row {
display: flex;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #edf1f6;
padding: 10px 0;
}
.ai-study-result-details {
margin: 8px 0 12px;
}
.ai-study-progress-line {
height: 10px;
background: #edf1f6;
border-radius: 999px;
overflow: hidden;
}
.ai-study-progress-line span {
display: block;
height: 100%;
background: #2e90fa;
}
.ai-study-report-card .ai-study-advanced-grid > div {
display: grid;
gap: 6px;
background: #f7f9fc;
border: 1px solid #e4eaf1;
border-radius: 8px;
padding: 12px;
}
.ai-study-flashcard-stack {
display: grid;
gap: 12px;
}
.ai-study-flashcard {
background: #fff;
border: 1px solid #dce4ec;
border-radius: 8px;
padding: 18px;
}
.ai-study-flashcard span {
color: #667085;
font-weight: 700;
}
.ai-study-flashcard h3 {
margin: 8px 0 12px;
}
@media (max-width: 900px) {
.ai-study-shell,
.ai-study-hero,
.ai-study-auth-grid,
.ai-study-camera-grid,
.ai-study-answer-layout,
.ai-study-tool-grid,
.ai-study-subscription-grid,
.ai-study-smart-ocr-box,
.ai-study-revision-box,
.ai-study-buddy-card,
.ai-study-streak-grid,
.ai-study-advanced-grid--two,
.ai-study-advanced-grid--four,
.ai-study-advanced-list--grid {
grid-template-columns: 1fr;
}
.ai-study-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.ai-study-dashboard,
.ai-study-auth-shell {
width: 100%;
margin: 0;
padding: 0;
border-left: 0;
border-right: 0;
}
.ai-study-shell {
min-height: auto;
border-left: 0;
border-right: 0;
}
.ai-study-main {
padding: 10px;
}
.ai-study-auth-hero,
.ai-study-auth-card,
.ai-study-section,
.ai-study-stat-card,
.ai-study-result-box,
.ai-study-subscription-box {
padding: 14px;
}
.ai-study-hero h2,
.ai-study-scan-hero h2,
.ai-study-auth-hero h2 {
font-size: 23px;
}
.ai-study-stat-grid {
grid-template-columns: 1fr;
}
.ai-study-camera-box {
min-height: 260px;
}
.ai-study-tool-actions {
grid-template-columns: 1fr;
}
.ai-study-premium-fields,
.ai-study-premium-previews,
.ai-study-master-card-grid,
.ai-study-table-controls,
.ai-study-table-lines,
.ai-study-table-controls--english,
.ai-study-vocab-grid,
.ai-study-english-tool-grid,
.ai-study-english-tool-controls {
grid-template-columns: 1fr;
}
.ai-study-advanced {
padding: 0 10px;
margin: 10px auto;
}
.ai-study-advanced-header h2 {
font-size: 24px;
}
.ai-study-filter-bar,
.ai-study-inline-form,
.ai-study-card-actions {
display: grid;
grid-template-columns: 1fr;
}
.ai-study-history-row {
display: grid;
}
.ai-study-primary-button,
.ai-study-secondary-button,
.ai-study-upload-button,
.ai-study-link-button {
width: 100%;
justify-content: center;
white-space: normal;
}
} .ai-study-dashboard {
background: #fff8fd;
border-radius: 18px;
}
.ai-study-shell {
overflow: hidden;
border: 0;
border-radius: 18px;
background: linear-gradient(135deg, #fff7e8 0%, #eef8ff 45%, #fff0fb 100%);
box-shadow: 0 18px 45px rgba(66, 88, 130, .18);
}
.ai-study-tabs {
border-right: 0;
background:
radial-gradient(circle at 18% 8%, rgba(255, 215, 105, .95) 0 34px, transparent 35px),
radial-gradient(circle at 88% 20%, rgba(126, 224, 255, .9) 0 28px, transparent 29px),
radial-gradient(circle at 22% 88%, rgba(255, 146, 198, .75) 0 34px, transparent 35px),
linear-gradient(180deg, #6c5ce7 0%, #00b8d9 52%, #35d07f 100%);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, .35);
}
.ai-study-student-profile {
border: 2px solid rgba(255, 255, 255, .75);
border-radius: 16px;
background: rgba(255, 255, 255, .92);
box-shadow: 0 10px 22px rgba(27, 43, 92, .18);
}
.ai-study-student-profile strong {
color: #4a2fb5;
font-size: 17px;
}
.ai-study-student-profile span {
color: #007c89;
font-weight: 800;
}
.ai-study-logout-button {
border: 0;
background: linear-gradient(135deg, #ff6b6b, #ff9f43);
color: #fff;
box-shadow: 0 6px 14px rgba(255, 107, 107, .3);
}
.ai-study-tab {
position: relative;
overflow: hidden;
margin-bottom: 8px;
border: 2px solid rgba(255, 255, 255, .38);
border-radius: 14px;
background: rgba(255, 255, 255, .20);
color: #fff;
font-weight: 800;
box-shadow: 0 8px 18px rgba(32, 50, 110, .14);
transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.ai-study-tab:nth-of-type(4n + 1) {
background: rgba(255, 122, 162, .42);
}
.ai-study-tab:nth-of-type(4n + 2) {
background: rgba(255, 209, 102, .42);
}
.ai-study-tab:nth-of-type(4n + 3) {
background: rgba(78, 205, 196, .42);
}
.ai-study-tab:nth-of-type(4n + 4) {
background: rgba(126, 87, 194, .42);
}
.ai-study-tab:hover,
.ai-study-tab.is-active {
transform: translateX(4px);
border-color: #fff;
background: #fff;
color: #4a2fb5;
box-shadow: 0 12px 24px rgba(27, 43, 92, .25);
}
.ai-study-main {
background:
linear-gradient(90deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .86)),
radial-gradient(circle at 100% 0%, rgba(255, 214, 102, .35), transparent 260px),
radial-gradient(circle at 0% 100%, rgba(78, 205, 196, .32), transparent 280px);
}
.ai-study-hero,
.ai-study-scan-hero,
.ai-study-auth-hero {
border: 0;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 250, 231, .92)),
linear-gradient(135deg, #ff9ff3, #feca57 35%, #48dbfb 70%, #1dd1a1);
box-shadow: 0 14px 35px rgba(67, 83, 125, .16);
}
.ai-study-kicker {
color: #d63384;
letter-spacing: 0;
}
.ai-study-primary-button {
border: 0;
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 52%, #1dd1a1 100%);
color: #fff;
box-shadow: 0 8px 18px rgba(255, 107, 107, .25);
}
.ai-study-secondary-button,
.ai-study-upload-button,
.ai-study-link-button {
border: 2px solid #c7f0ff;
background: #ffffff;
color: #4a2fb5;
box-shadow: 0 6px 14px rgba(72, 219, 251, .18);
}
.ai-study-stat-card,
.ai-study-section,
.ai-study-result-box,
.ai-study-subscription-box,
.ai-study-table-builder,
.ai-study-advanced-card,
.ai-study-question-card,
.ai-study-english-tool-card,
.ai-study-vocab-card {
border: 0;
border-radius: 16px;
background: rgba(255, 255, 255, .95);
box-shadow: 0 10px 26px rgba(66, 88, 130, .12);
}
.ai-study-stat-card:nth-child(4n + 1),
.ai-study-master-card:nth-child(4n + 1) {
background: linear-gradient(135deg, #fff, #fff1f8);
}
.ai-study-stat-card:nth-child(4n + 2),
.ai-study-master-card:nth-child(4n + 2) {
background: linear-gradient(135deg, #fff, #fff8df);
}
.ai-study-stat-card:nth-child(4n + 3),
.ai-study-master-card:nth-child(4n + 3) {
background: linear-gradient(135deg, #fff, #e9fbff);
}
.ai-study-stat-card:nth-child(4n + 4),
.ai-study-master-card:nth-child(4n + 4) {
background: linear-gradient(135deg, #fff, #ebfff4);
}
.ai-study-master-card {
border: 0;
border-radius: 16px;
box-shadow: 0 10px 22px rgba(66, 88, 130, .12);
}
.ai-study-master-card.is-highlighted {
border: 2px solid #48dbfb;
background: linear-gradient(135deg, #e9fbff, #fff8df);
}
.ai-study-buddy-card {
border: 0;
border-radius: 18px;
background: linear-gradient(135deg, #fef3ff 0%, #e8f9ff 48%, #ecfff4 100%);
box-shadow: 0 14px 34px rgba(108, 92, 231, .18);
}
.ai-study-buddy-avatar,
.ai-study-camera-mark {
background: linear-gradient(135deg, #6c5ce7, #ff6bcb);
color: #fff;
}
.ai-study-field-label input,
.ai-study-field-label select,
.ai-study-field-label textarea,
.ai-study-auth-card input[type="text"],
.ai-study-auth-card input[type="email"],
.ai-study-auth-card input[type="tel"],
.ai-study-auth-card input[type="password"] {
border: 2px solid #dff3ff;
border-radius: 12px;
background: #fff;
}
.ai-study-answer-box,
.ai-study-table-lines div {
border: 0;
border-radius: 14px;
background: #f3fbff;
}
@media (max-width: 900px) {
.ai-study-tabs {
background: linear-gradient(90deg, #6c5ce7, #00b8d9, #35d07f);
}
.ai-study-tab:hover,
.ai-study-tab.is-active {
transform: translateY(-2px);
}
} @keyframes aiStudyFloatSoft {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.ai-study-hero__media,
.ai-study-buddy-avatar,
.ai-study-camera-mark {
animation: aiStudyFloatSoft 4s ease-in-out infinite;
}
@media (max-width: 900px) {
.ai-study-shell { border-radius: 22px !important; }
}
@media (max-width: 560px) {
.ai-study-dashboard { margin: 0; padding: 0; max-width: 100%; width: 100%; }
.ai-study-hero,
.ai-study-scan-hero,
.ai-study-auth-hero { border-radius: 12px !important; }
}
.ai-study-subscription-current {
margin-top: 14px;
border: 2px solid var(--card-border, var(--ai-primary-light)) !important;
background: var(--card-hover-bg, var(--section-bg)) !important;
}
.ai-study-price {
display: block;
font-size: 28px;
font-weight: 800;
color: var(--primary, var(--ai-primary));
margin: 8px 0;
} .ai-study-hero--compact {
display: flex;
align-items: flex-start;
gap: 14px;
grid-template-columns: none;
}
.ai-study-hero-icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 14px;
font-size: 26px;
}
.ai-study-hero__body {
flex: 1;
min-width: 0;
}
.ai-study-hero--compact .ai-study-hero__media,
.ai-study-hero--compact .ai-study-camera-mark {
display: none !important;
}
.ai-study-buddy-card--compact {
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
}
.ai-study-buddy-icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 22px;
}
.ai-study-buddy-card--compact .ai-study-buddy-avatar {
display: none !important;
}
.ai-study-camera-toolbar--compact {
margin-top: 4px;
}
.ai-study-mobile-quick-section {
display: none;
margin-bottom: 16px;
}
.ai-study-mobile-quick-heading {
margin: 0 0 10px;
font-size: 16px;
font-weight: 800;
}
.ai-study-mobile-quick-grid {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ai-study-mobile-quick-card {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 12px;
border-radius: 16px;
text-align: left;
cursor: pointer;
transition: transform var(--transition, 300ms ease);
min-height: 76px;
}
.ai-study-mobile-quick-card:active {
transform: scale(0.98);
}
.ai-study-mobile-quick-card__icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 22px;
}
.ai-study-mobile-quick-card__content {
flex: 1;
min-width: 0;
}
.ai-study-mobile-quick-card__content strong {
display: block;
font-size: 14px;
line-height: 1.2;
color: inherit;
}
.ai-study-mobile-quick-card__content small {
display: block;
margin-top: 3px;
font-size: 11px;
opacity: 0.9;
color: inherit;
}
.ai-study-mobile-quick-card__arrow {
flex-shrink: 0;
font-size: 18px;
opacity: 0.85;
}
@media (max-width: 900px) {
.ai-study-mobile-quick-section,
.ai-study-mobile-quick-grid {
display: none;
}
.ai-study-hero--compact {
flex-direction: column;
}
.ai-study-hero-icon {
width: 48px;
height: 48px;
font-size: 24px;
}
.ai-study-hero h2,
.ai-study-scan-hero h2 {
font-size: 22px !important;
}
.ai-study-hero__media,
.ai-study-camera-mark,
.ai-study-buddy-avatar {
display: none !important;
animation: none !important;
}
}.ai-fs-scanner {
position: fixed;
inset: 0;
z-index: 999999;
background: #000;
color: #fff;
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
box-sizing: border-box;
overflow: hidden;
}
.ai-fs-scanner[hidden] {
display: none !important;
}
.ai-fs-scanner *,
.ai-fs-scanner *::before,
.ai-fs-scanner *::after {
box-sizing: border-box;
}
body.ai-fs-scanner-open {
overflow: hidden !important;
}
.ai-fs-scanner__screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: #0a0a0f;
}
.ai-fs-scanner__screen[hidden] {
display: none !important;
} .ai-fs-scanner__video-wrap {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
background: #000;
}
.ai-fs-scanner__video {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center center;
touch-action: none;
}
.ai-fs-scanner__grid {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px) 0 0 / 33.33% 33.33%;
opacity: 0.35;
}
.ai-fs-scanner__grid.is-off {
display: none;
}
.ai-fs-scanner__doc-frame {
position: absolute;
inset: 8% 6%;
border: 2px dashed rgba(245, 130, 32, 0.85);
border-radius: 8px;
pointer-events: none;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
}
.ai-fs-scanner__doc-frame::before,
.ai-fs-scanner__doc-frame::after {
content: "";
position: absolute;
width: 24px;
height: 24px;
border: 3px solid #F58220;
}
.ai-fs-scanner__doc-frame::before {
top: -2px;
left: -2px;
border-right: 0;
border-bottom: 0;
}
.ai-fs-scanner__doc-frame::after {
bottom: -2px;
right: -2px;
border-left: 0;
border-top: 0;
}
.ai-fs-scanner__top-bar,
.ai-fs-scanner__bottom-bar {
position: absolute;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: max(12px, env(safe-area-inset-top)) 16px 12px;
background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
z-index: 5;
}
.ai-fs-scanner__bottom-bar {
top: auto;
bottom: 0;
padding: 12px 16px max(20px, env(safe-area-inset-bottom));
background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
justify-content: center;
gap: 28px;
}
.ai-fs-scanner__top-left,
.ai-fs-scanner__top-right {
display: flex;
gap: 10px;
align-items: center;
}
.ai-fs-scanner__title {
font-size: 15px;
font-weight: 800;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.ai-fs-scanner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
padding: 10px 14px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.18);
backdrop-filter: blur(8px);
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ai-fs-scanner__btn:active {
transform: scale(0.96);
}
.ai-fs-scanner__btn.is-active {
background: #F58220;
color: #fff;
}
.ai-fs-scanner__btn--large {
min-width: 56px;
min-height: 56px;
font-size: 22px;
}
.ai-fs-scanner__capture {
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid #fff;
background: radial-gradient(circle at 30% 30%, #fff, #e0e0e0);
box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 4px 20px rgba(0,0,0,.4);
cursor: pointer;
flex-shrink: 0;
}
.ai-fs-scanner__capture:active {
transform: scale(0.94);
} .ai-fs-scanner__preview-img {
flex: 1;
min-height: 0;
width: 100%;
object-fit: contain;
background: #111;
}
.ai-fs-scanner__toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
background: rgba(0,0,0,.85);
justify-content: center;
}
.ai-fs-scanner__toolbar .ai-fs-scanner__btn {
flex: 1 1 calc(20% - 8px);
min-width: 72px;
font-size: 12px;
border-radius: 12px;
}
.ai-fs-scanner__scroll-body {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px;
background: #f5f7fb;
color: #182033;
} .ai-fs-scanner__capture-actions {
display: flex;
gap: 10px;
padding: 14px 12px;
padding-bottom: max(14px, env(safe-area-inset-bottom));
background: rgba(0, 0, 0, 0.88);
justify-content: center;
}
.ai-fs-scanner__capture-actions--overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.ai-fs-scanner__capture-btn {
flex: 1;
min-height: 52px;
border: 0;
border-radius: 14px;
background: rgba(255, 255, 255, 0.95);
color: #1B4F9C;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.ai-fs-scanner__capture-btn:nth-child(2) {
background: linear-gradient(135deg, #1B4F9C, #F58220);
color: #fff;
}
.ai-fs-scanner__preview-wrap {
position: relative;
margin-bottom: 12px;
border-radius: 12px;
overflow: hidden;
background: #111;
max-height: 38vh;
}
.ai-fs-scanner__screen[data-ai-fs-step="preview"] {
flex-direction: column;
}
.ai-fs-scanner__screen[data-ai-fs-step="preview"] .ai-fs-scanner__preview-img {
flex: 1;
min-height: 0;
}
.ai-fs-scanner__preview-wrap img {
width: 100%;
max-height: 38vh;
object-fit: contain;
display: block;
}
.ai-fs-scanner__smart-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.ai-fs-scanner__chip {
flex: 1 1 calc(33% - 8px);
min-width: 100px;
padding: 10px 8px;
border: 2px solid #1B4F9C;
border-radius: 12px;
background: #fff;
color: #1B4F9C;
font-size: 12px;
font-weight: 800;
text-align: center;
cursor: pointer;
}
.ai-fs-scanner__chip:nth-child(3n+2) { border-color: #F58220; color: #c45a00; }
.ai-fs-scanner__chip:nth-child(3n) { border-color: #2e7d32; color: #2e7d32; }
.ai-fs-scanner__input-wrap {
position: relative;
margin-bottom: 12px;
}
.ai-fs-scanner__input-wrap label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 800;
color: #1B4F9C;
}
.ai-fs-scanner__question {
width: 100%;
min-height: 100px;
padding: 14px 118px 14px 14px;
border: 2px solid #1B4F9C;
border-radius: 14px;
font-size: 16px;
line-height: 1.45;
resize: vertical;
background: #fff;
color: #182033;
}
.ai-fs-scanner__mic.ai-study-voice-btn {
position: absolute;
right: 10px;
bottom: 10px;
width: auto;
min-width: 44px;
min-height: 44px;
height: auto;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
box-shadow: 0 2px 10px rgba(27, 79, 156, 0.35);
--voice-btn-bg: #312E81;
--voice-btn-border: #A5B4FC;
--voice-btn-text: #E0E7FF;
--voice-btn-icon: #C7D2FE;
}
.ai-fs-scanner__mic.ai-study-voice-btn .ai-study-voice-btn__icon {
color: inherit;
}
.ai-fs-scanner__mic.ai-study-voice-btn.is-listening {
animation: ai-fs-pulse 1s infinite;
background: #c62828 !important;
border-color: #ef9a9a !important;
color: #fff !important;
} .ai-fs-scanner__mic:not(.ai-study-voice-btn) {
position: absolute;
right: 10px;
bottom: 10px;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: linear-gradient(135deg, #1B4F9C, #F58220);
color: #fff;
font-size: 20px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(27, 79, 156, 0.35);
}
.ai-fs-scanner__mic:not(.ai-study-voice-btn).is-listening {
animation: ai-fs-pulse 1s infinite;
background: #c62828;
}
@keyframes ai-fs-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.5); }
50% { box-shadow: 0 0 0 12px rgba(198, 40, 40, 0); }
}
.ai-fs-scanner__voice-status {
margin-bottom: 10px;
padding: 8px 12px;
border-radius: 10px;
background: #e3f2fd;
color: #0d47a1;
font-size: 13px;
font-weight: 700;
}
.ai-fs-scanner__voice-status.is-error {
background: #ffebee;
color: #b71c1c;
}
.ai-fs-scanner__voice-status.is-success {
background: #e8f5e9;
color: #1b5e20;
}
.ai-fs-scanner__ocr-box label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 800;
color: #2e7d32;
}
.ai-fs-scanner__ocr-text {
width: 100%;
min-height: 120px;
padding: 12px;
border: 2px solid #2e7d32;
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
background: #fff;
color: #182033;
}
.ai-fs-scanner__footer {
display: flex;
gap: 10px;
padding: 12px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid #dce4ec;
}
.ai-fs-scanner__footer .ai-fs-scanner__btn {
flex: 1;
min-height: 52px;
border-radius: 14px;
font-size: 15px;
}
.ai-fs-scanner__footer .ai-fs-scanner__btn--primary {
background: linear-gradient(135deg, #1B4F9C, #F58220);
color: #fff;
}
.ai-fs-scanner__footer .ai-fs-scanner__btn--secondary {
background: #eef2f7;
color: #1B4F9C;
}
.ai-fs-scanner__progress {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
padding: 20px 28px;
border-radius: 16px;
background: rgba(0,0,0,.82);
text-align: center;
min-width: 200px;
}
.ai-fs-scanner__progress[hidden] {
display: none !important;
}
.ai-fs-scanner__progress-bar {
height: 6px;
margin-top: 12px;
border-radius: 999px;
background: rgba(255,255,255,.2);
overflow: hidden;
}
.ai-fs-scanner__progress-bar span {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, #1B4F9C, #F58220);
transition: width 0.3s ease;
}
.ai-fs-scanner__permission {
position: absolute;
inset: 0;
z-index: 30;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0,0,0,.88);
text-align: center;
}
.ai-fs-scanner__permission[hidden] {
display: none !important;
}
.ai-fs-scanner__permission p {
margin: 0 0 16px;
font-size: 16px;
line-height: 1.5;
max-width: 320px;
} .ai-fs-scanner__result {
padding: 14px;
border-radius: 14px;
background: #fff;
border: 2px solid #2e7d32;
margin-bottom: 12px;
color: #182033;
min-height: clamp(200px, 30vh, 360px);
max-height: calc(100vh - 160px);
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
}
.ai-fs-scanner__result .ai-study-output-block {
color: #182033;
}
.ai-fs-scanner__tts-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.ai-fs-scanner__tts-bar .ai-fs-scanner__btn {
flex: 1 1 auto;
min-height: 44px;
border-radius: 12px;
background: #e8f5e9;
color: #1b5e20;
font-size: 13px;
}
.ai-fs-scanner__followup {
margin-top: 8px;
}
@media (orientation: landscape) {
.ai-fs-scanner__preview-wrap,
.ai-fs-scanner__preview-wrap img {
max-height: 55vh;
}
}
@media (min-width: 768px) {
.ai-fs-scanner__scroll-body {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.ai-fs-scanner__chip {
flex: 1 1 calc(25% - 8px);
}
}html[data-theme="light"],
html[data-theme="dark"],
html:not([data-theme]) {
--icon-math: #2563EB;
--icon-english: #7C3AED;
--icon-camera-scan: #06B6D4;
--icon-ai-teacher: #F59E0B;
--icon-quiz: #22C55E;
--icon-study-planner: #EC4899;
--icon-voice-tutor: #8B5CF6;
--icon-weakness: #EF4444;
--icon-notebook: #14B8A6;
--icon-parent: #0EA5E9;
--transition: 300ms ease;
--radius: 14px;
--radius-lg: 18px;
--card-hover-shadow: 0 15px 35px rgba(59, 130, 246, 0.15);
--button-hover-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
--sidebar-hover-bg: rgba(59, 130, 246, 0.12);
--menu-active-bg: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(124, 58, 237, 0.18));
--text-on-gradient: #FFFFFF;
} html[data-theme="light"],
html:not([data-theme]) {
--bg: #F8FAFC;
--section-bg: #FFFFFF;
--card-bg: #FFFFFF;
--card-hover-bg: #F8FBFF;
--card-border: #E2E8F0;
--card-hover-border: #60A5FA;
--text-primary: #0F172A;
--text-secondary: #64748B;
--heading: #1E293B;
--primary: #2563EB;
--primary-hover: #1D4ED8;
--secondary: #7C3AED;
--secondary-hover: #6D28D9;
--success: #16A34A;
--success-bg: #ECFDF3;
--success-border: #BBF7D0;
--warning: #D97706;
--danger: #DC2626;
--danger-bg: #FEF2F2;
--danger-border: #FECACA;
--input-bg: #FFFFFF;
--input-border: #CBD5E1;
--button-gradient: linear-gradient(135deg, #2563EB 0%, #4F46E5 50%, #7C3AED 100%);
--button-hover-gradient: linear-gradient(135deg, #1D4ED8 0%, #4338CA 50%, #6D28D9 100%);
--shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
--shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);
--glow: none;
--hero-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(124, 58, 237, 0.05) 100%);
--card-active-bg: #EEF4FF;
--card-active-border: #60A5FA;
--theme-btn-border: #93C5FD;
--logout-btn-border: #FDA4AF;
--logout-btn-text: #475569;
--theme-btn-shadow: 0 8px 20px rgba(37, 99, 235, 0.10);
--logout-btn-shadow: 0 8px 20px rgba(244, 63, 94, 0.12);
--menu-hover-shadow: 0 14px 30px rgba(37, 99, 235, 0.14);
--grid-gap: 16px;
--grid-gap-mobile: 10px;
--header-radius: 18px;
--header-radius-mobile: 16px;
--menu-radius: 18px;
--menu-radius-mobile: 14px;
--menu-min-height: 76px;
--menu-min-height-mobile: 64px;
} html[data-theme="dark"] {
--bg: #050B16;
--section-bg: #0B1628;
--card-bg: #101E33;
--card-hover-bg: #142544;
--card-border: #1E3A5F;
--card-hover-border: #38BDF8;
--text-primary: #FFFFFF;
--text-secondary: #B8C7E0;
--heading: #EAF2FF;
--primary: #38BDF8;
--primary-hover: #0EA5E9;
--secondary: #8B5CF6;
--secondary-hover: #7C3AED;
--success: #22C55E;
--success-bg: rgba(34, 197, 94, 0.15);
--success-border: rgba(34, 197, 94, 0.35);
--warning: #F59E0B;
--danger: #EF4444;
--danger-bg: rgba(239, 68, 68, 0.12);
--danger-border: rgba(239, 68, 68, 0.35);
--input-bg: #0F1B2D;
--input-border: #233D63;
--button-gradient: linear-gradient(135deg, #38BDF8 0%, #6366F1 50%, #8B5CF6 100%);
--button-hover-gradient: linear-gradient(135deg, #0EA5E9 0%, #4F46E5 50%, #7C3AED 100%);
--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
--shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
--glow: 0 0 25px rgba(56, 189, 248, 0.25);
--hero-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(139, 92, 246, 0.07) 100%);
--card-active-bg: rgba(37, 99, 235, 0.18);
--card-active-border: #38BDF8;
--theme-btn-border: rgba(56, 189, 248, 0.45);
--logout-btn-border: rgba(239, 68, 68, 0.45);
--logout-btn-text: var(--text-secondary);
--theme-btn-shadow: 0 8px 20px rgba(56, 189, 248, 0.18);
--logout-btn-shadow: 0 8px 20px rgba(239, 68, 68, 0.18);
--menu-hover-shadow: 0 14px 30px rgba(56, 189, 248, 0.18);
--grid-gap: 16px;
--grid-gap-mobile: 10px;
--header-radius: 18px;
--header-radius-mobile: 16px;
--menu-radius: 18px;
--menu-radius-mobile: 14px;
--menu-min-height: 76px;
--menu-min-height-mobile: 64px;
--history-section-border: #38BDF8;
--history-card-border: #2563EB;
--history-title: #F8FAFC;
--history-excerpt: #CBD5E1;
--history-link-bg: #FFFFFF;
--history-link-text: #0284C7;
--history-link-border: #BAE6FD;
--history-hover-shadow: 0 10px 25px rgba(56, 189, 248, 0.18);
} .ai-study-dashboard,
.ai-study-auth-shell {
font-family: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
color: var(--text-primary) !important;
transition: background var(--transition), color var(--transition);
}
.ai-study-dashboard {
position: relative;
isolation: isolate;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
overflow-x: hidden;
background: var(--bg) !important;
box-sizing: border-box;
font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.ai-study-dashboard::before {
display: none !important;
}
.ai-study-mobile-only {
display: none;
}
.ai-study-shell {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
min-height: 760px;
background: var(--section-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow) !important;
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition);
}
html[data-theme="dark"] .ai-study-shell {
box-shadow: var(--shadow), var(--glow) !important;
}
.ai-study-main {
background: var(--bg) !important;
color: var(--text-primary) !important;
padding: 22px;
min-width: 0;
}
.ai-study-panel:not(.is-active) {
display: none !important;
} .ai-study-tabs {
padding: 14px;
border-right: 1px solid var(--card-border) !important;
background: var(--section-bg) !important;
overflow-y: auto;
max-height: none;
transition: background var(--transition);
}
.ai-study-student-profile {
display: grid;
gap: 8px;
margin-bottom: 14px;
padding: 14px;
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-soft) !important;
color: var(--text-primary) !important;
}
.ai-study-student-profile strong {
color: var(--heading) !important;
font-weight: 800;
}
.ai-study-student-profile span {
color: var(--text-secondary) !important;
font-size: 13px;
}
.ai-study-brand-mark {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 4px;
line-height: 1;
}
.ai-study-brand-easy {
color: var(--primary) !important;
font-style: italic;
font-size: 22px;
font-weight: 900;
}
.ai-study-brand-padhai {
color: var(--warning) !important;
font-size: 22px;
font-weight: 900;
}
.ai-study-tabs .ai-theme-toggle {
width: 100%;
min-height: 42px;
margin-bottom: 4px;
border-radius: 999px;
border: 1px solid var(--card-border) !important;
background: var(--card-bg) !important;
color: var(--text-primary) !important;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: border-color var(--transition), color var(--transition), transform var(--transition) !important;
}
.ai-study-tabs .ai-theme-toggle:hover {
border-color: var(--card-hover-border) !important;
color: var(--primary) !important;
transform: none;
}
.ai-study-tabs .ai-study-logout-button {
width: 100%;
min-height: 34px;
border-radius: 8px;
border: 1px solid var(--card-border) !important;
background: var(--card-bg) !important;
color: var(--text-secondary) !important;
font-weight: 700;
cursor: pointer;
transition: border-color var(--transition), color var(--transition) !important;
}
.ai-study-tabs .ai-study-logout-button:hover {
border-color: var(--danger) !important;
color: var(--danger) !important;
transform: none;
}
.ai-study-tabs .ai-study-tab {
width: 100%;
margin: 0 0 6px;
padding: 10px 12px;
display: block;
min-height: auto;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
box-shadow: none !important;
color: var(--text-secondary) !important;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
text-align: left;
white-space: normal !important;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition) !important;
transform: none !important;
}
.ai-study-tabs .ai-study-tab::before {
display: none !important;
}
.ai-study-tabs .ai-study-tab:hover {
background: var(--sidebar-hover-bg) !important;
color: var(--primary) !important;
border-color: transparent !important;
transform: none !important;
box-shadow: none !important;
}
.ai-study-tabs .ai-study-tab.is-active,
.ai-study-tabs .ai-study-tab.active {
background: var(--menu-active-bg) !important;
color: var(--primary) !important;
border-color: var(--card-hover-border) !important;
font-weight: 700 !important;
box-shadow: none !important;
}
.ai-study-tabs .ai-study-tab .icon,
.ai-study-tabs .ai-study-tab .title {
display: inline;
font-size: inherit;
} .ai-study-header {
display: grid;
grid-template-columns: 1fr;
gap: var(--grid-gap-mobile);
margin-bottom: 16px;
}
.ai-study-header-card {
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--header-radius-mobile) !important;
padding: 16px;
box-shadow: var(--shadow-soft) !important;
min-width: 0;
}
.ai-study-header-title,
.ai-study-header-card h2,
.ai-study-header-card h3 {
margin: 0 0 14px;
color: var(--heading) !important;
font-weight: 800;
font-size: 1.25rem;
line-height: 1.2;
}
.ai-study-theme-btn {
width: 100%;
min-height: 50px;
border-radius: 999px;
border: 1.5px solid var(--theme-btn-border) !important;
background: var(--card-bg) !important;
color: var(--primary) !important;
font-size: 16px;
font-weight: 800;
box-shadow: var(--theme-btn-shadow) !important;
cursor: pointer;
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition) !important;
}
.ai-study-theme-btn:hover {
transform: translateY(-2px);
border-color: var(--card-hover-border) !important;
}
.ai-study-logout-btn {
width: 100%;
min-height: 50px;
border-radius: 999px;
border: 1.5px solid var(--logout-btn-border) !important;
background: var(--card-bg) !important;
color: var(--logout-btn-text) !important;
font-size: 16px;
font-weight: 800;
box-shadow: var(--logout-btn-shadow) !important;
cursor: pointer;
transition: transform var(--transition), border-color var(--transition) !important;
}
.ai-study-logout-btn:hover {
transform: translateY(-2px);
border-color: var(--danger) !important;
}
.ai-study-user-name {
margin: 14px 0 0;
font-size: 18px;
font-weight: 800;
color: var(--text-primary) !important;
}
.ai-study-header-card form {
margin: 0;
}
.ai-study-menu,
.ai-study-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--grid-gap-mobile);
width: 100%;
margin-bottom: 16px;
max-height: min(72vh, 680px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.ai-study-menu-card,
.ai-study-feature-card {
width: 100%;
min-width: 0;
min-height: var(--menu-min-height-mobile);
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
margin: 0;
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--menu-radius-mobile) !important;
box-shadow: var(--shadow-soft) !important;
color: var(--text-secondary) !important;
font-size: 14px;
font-weight: 800;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: transform 0.25s ease, border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition) !important;
transform: none !important;
white-space: normal !important;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.ai-study-menu-card:hover,
.ai-study-feature-card:hover {
transform: translateY(-2px);
border-color: var(--card-hover-border) !important;
box-shadow: var(--menu-hover-shadow) !important;
color: var(--primary) !important;
background: var(--card-hover-bg) !important;
}
.ai-study-menu-card.is-active,
.ai-study-menu-card.active,
.ai-study-feature-card.active {
background: var(--card-active-bg) !important;
border-color: var(--card-active-border) !important;
color: var(--primary) !important;
}
.ai-study-menu-card .icon,
.ai-study-feature-card .icon {
flex: 0 0 auto;
font-size: 20px;
line-height: 1;
}
.ai-study-menu-card .title,
.ai-study-feature-card .title {
flex: 1 1 auto;
min-width: 0;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.15;
font-size: 14px;
word-break: break-word;
}
.ai-study-menu-card[data-ai-study-tab="camera-scan"] .title { color: var(--icon-camera-scan); }
.ai-study-menu-card[data-ai-study-tab="maths-tutor"] .title,
.ai-study-menu-card[data-ai-study-tab="maths-master"] .title { color: var(--icon-math); }
.ai-study-menu-card[data-ai-study-tab="english-master"] .title,
.ai-study-menu-card[data-ai-study-tab="english-grammar"] .title { color: var(--icon-english); }
.ai-study-menu-card[data-ai-study-tab="quiz-test"] .title { color: var(--icon-quiz); }
.ai-study-menu-card[data-ai-study-tab="voice-doubt-solver"] .title { color: var(--icon-voice-tutor); }
.ai-study-menu-card[data-ai-study-tab="study-planner"] .title,
.ai-study-menu-card[data-ai-study-tab="timetable-homework"] .title { color: var(--icon-study-planner); }
.ai-study-menu-card[data-ai-study-tab="notebook-scanner"] .title,
.ai-study-menu-card[data-ai-study-tab="notebook-intelligence"] .title { color: var(--icon-notebook); }
.ai-study-menu-card[data-ai-study-tab="progress"] .title { color: var(--icon-weakness); }
.ai-study-menu-card.is-active .title,
.ai-study-menu-card.active .title {
color: var(--primary) !important;
}
.ai-study-tab::before {
display: none !important;
} .ai-study-hero h2,
.ai-study-scan-hero h2,
.ai-study-section__header h2,
.ai-study-section__header h3,
.ai-study-buddy-card h3,
.ai-study-master-card h3,
.ai-study-stat-card strong {
color: var(--heading) !important;
}
.ai-study-hero p,
.ai-study-scan-hero p,
.ai-study-muted,
.ai-study-stat-card__label,
.ai-study-stat-card small,
.ai-study-master-card p,
.ai-study-mobile-quick-card__content small {
color: var(--text-secondary) !important;
}
.ai-study-kicker {
color: var(--primary) !important;
} .ai-study-hero,
.ai-study-scan-hero {
background: var(--hero-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow) !important;
color: var(--text-primary) !important;
transition: border-color var(--transition), box-shadow var(--transition);
}
.ai-study-hero::after,
.ai-study-scan-hero::after {
display: none !important;
}
.ai-study-hero-icon {
background: var(--button-gradient) !important;
box-shadow: var(--shadow) !important;
}
.ai-study-buddy-icon {
background: var(--button-gradient) !important;
} .ai-study-primary-button {
background: var(--button-gradient) !important;
color: var(--text-primary) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: var(--shadow) !important;
font-weight: 700 !important;
transition: transform var(--transition), background var(--transition), box-shadow var(--transition) !important;
}
html[data-theme="light"] .ai-study-primary-button {
color: var(--text-on-gradient) !important;
}
.ai-study-primary-button:hover {
background: var(--button-hover-gradient) !important;
transform: translateY(-2px);
box-shadow: var(--button-hover-shadow) !important;
}
.ai-study-secondary-button,
.ai-study-upload-button {
background: var(--card-bg) !important;
color: var(--primary) !important;
border: 1px solid var(--card-border) !important;
border-radius: 999px !important;
transition: background var(--transition), border-color var(--transition), transform var(--transition) !important;
}
.ai-study-secondary-button:hover,
.ai-study-upload-button:hover {
background: var(--card-hover-bg) !important;
border-color: var(--card-hover-border) !important;
transform: translateY(-2px);
}
.ai-study-link-button {
color: var(--primary) !important;
} .ai-study-stat-card,
.ai-study-section,
.ai-study-buddy-card,
.ai-study-master-card,
.ai-study-english-tool-card,
.ai-study-vocab-card,
.ai-study-result-box,
.ai-study-subscription-box,
.ai-study-table-builder,
.ai-study-history-item,
.ai-study-streak-badge,
.ai-study-smart-ocr-box,
.ai-study-revision-box,
.ai-study-weakness-box,
.ai-study-empty-state,
.ai-study-auth-card,
.ai-study-mobile-quick-card {
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow) !important;
color: var(--text-primary) !important;
transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition) !important;
}
.ai-study-stat-card:hover,
.ai-study-section:hover,
.ai-study-master-card:hover,
.ai-study-english-tool-card:hover,
.ai-study-vocab-card:hover,
.ai-study-streak-badge:hover,
.ai-study-mobile-quick-card:hover {
background: var(--card-hover-bg) !important;
border-color: var(--card-hover-border) !important;
transform: translateY(-5px) scale(1.02);
box-shadow: var(--card-hover-shadow) !important;
}
.ai-study-buddy-message {
background: var(--input-bg) !important;
border: 1px solid var(--card-border) !important;
color: var(--text-primary) !important;
}
.ai-study-master-card.is-highlighted,
.ai-study-maths-shortcut.is-highlighted,
.ai-study-english-shortcut.is-highlighted {
border-color: var(--card-hover-border) !important;
} .ai-study-mobile-quick-heading {
color: var(--heading) !important;
}
.ai-study-mobile-quick-card__content strong {
color: var(--heading) !important;
}
.ai-study-mobile-quick-card__arrow {
color: var(--primary) !important;
opacity: 0.75;
}
.ai-study-mobile-quick-card__icon {
background: color-mix(in srgb, var(--feature-color, var(--primary)) 14%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--feature-color, var(--primary)) 28%, transparent) !important;
}
.ai-study-mobile-quick-card--camera-scan { --feature-color: var(--icon-camera-scan); }
.ai-study-mobile-quick-card--maths-tutor,
.ai-study-mobile-quick-card--maths-master { --feature-color: var(--icon-math); }
.ai-study-mobile-quick-card--english-master { --feature-color: var(--icon-english); }
.ai-study-mobile-quick-card--quiz-test { --feature-color: var(--icon-quiz); }
.ai-study-mobile-quick-card--notes-maker { --feature-color: var(--icon-notebook); }
.ai-study-mobile-quick-card--translation { --feature-color: var(--icon-voice-tutor); }
.ai-study-mobile-quick-card--voice-doubt-solver { --feature-color: var(--icon-voice-tutor); }
.ai-study-mobile-quick-card--study-planner { --feature-color: var(--icon-study-planner); }
.ai-study-mobile-quick-card--notebook-scanner { --feature-color: var(--icon-notebook); }
.ai-study-mobile-quick-card--progress { --feature-color: var(--icon-weakness); }
.ai-study-mobile-quick-card--english-master { --feature-color: var(--icon-english); }
.ai-study-mobile-quick-card--camera-scan .ai-study-mobile-quick-card__content strong,
.ai-study-mobile-quick-card--maths-tutor .ai-study-mobile-quick-card__content strong,
.ai-study-mobile-quick-card--maths-master .ai-study-mobile-quick-card__content strong,
.ai-study-mobile-quick-card--english-master .ai-study-mobile-quick-card__content strong,
.ai-study-mobile-quick-card--quiz-test .ai-study-mobile-quick-card__content strong,
.ai-study-mobile-quick-card--notes-maker .ai-study-mobile-quick-card__content strong,
.ai-study-mobile-quick-card--english-master .ai-study-mobile-quick-card__content strong,
.ai-study-mobile-quick-card--translation .ai-study-mobile-quick-card__content strong {
color: var(--feature-color) !important;
} .ai-study-tab[data-ai-study-tab="camera-scan"] { --feature-color: var(--icon-camera-scan); }
.ai-study-tab[data-ai-study-tab="maths-tutor"],
.ai-study-tab[data-ai-study-tab="maths-master"] { --feature-color: var(--icon-math); }
.ai-study-tab[data-ai-study-tab="english-master"],
.ai-study-tab[data-ai-study-tab="english-grammar"] { --feature-color: var(--icon-english); }
.ai-study-tab[data-ai-study-tab="quiz-test"] { --feature-color: var(--icon-quiz); }
.ai-study-tab[data-ai-study-tab="study-planner"],
.ai-study-tab[data-ai-study-tab="timetable-homework"] { --feature-color: var(--icon-study-planner); }
.ai-study-tab[data-ai-study-tab="voice-doubt-solver"] { --feature-color: var(--icon-voice-tutor); }
.ai-study-tab[data-ai-study-tab="notebook-scanner"],
.ai-study-tab[data-ai-study-tab="notebook-intelligence"] { --feature-color: var(--icon-notebook); }
.ai-study-tab[data-ai-study-tab="progress"] { --feature-color: var(--icon-weakness); }
.ai-study-menu-card[data-ai-study-tab="camera-scan"] { --feature-color: var(--icon-camera-scan); } .ai-study-input-window,
.ai-study-output-window,
.ai-study-tool-camera {
background: var(--card-bg) !important;
border-color: var(--card-border) !important;
}
.ai-study-output-window__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.ai-study-output-window__head .ai-study-window-label {
margin: 0;
}
.ai-study-pdf-download-btn {
font-size: 13px;
padding: 8px 14px;
white-space: nowrap;
}
.ai-study-window-label {
color: var(--primary) !important;
}
.ai-study-window-label--output {
color: var(--success) !important;
}
.ai-study-field-label,
.ai-study-compact-label {
color: var(--text-secondary) !important;
}
.ai-study-field-label input,
.ai-study-field-label select,
.ai-study-field-label textarea,
.ai-study-result-box textarea,
.ai-study-compact-label select,
.ai-study-auth-card input {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-primary) !important;
border-radius: 10px !important;
transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.ai-study-field-label input:focus,
.ai-study-field-label select:focus,
.ai-study-field-label textarea:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent) !important;
outline: none !important;
}
.ai-study-answer-output {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-primary) !important;
line-height: 1.75 !important;
}
.ai-study-output-window--expanded {
background: var(--card-bg) !important;
border-color: var(--card-border) !important;
}
.ai-study-table-output {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-primary) !important;
line-height: 1.75 !important;
}
.ai-study-output-block,
.ai-study-output-block h4,
.ai-study-output-block p,
.ai-study-output-block li {
color: var(--text-primary) !important;
}
.ai-study-chip-row span,
.ai-study-feature-list span {
background: var(--card-hover-bg) !important;
border: 1px solid var(--card-border) !important;
color: var(--text-secondary) !important;
}
.ai-study-tool-camera-title {
color: var(--primary) !important;
} .ai-study-save-note,
.ai-study-alert--success,
.ai-study-success-message {
color: var(--success) !important;
background: var(--success-bg) !important;
border: 1px solid var(--success-border) !important;
border-radius: var(--radius) !important;
padding: 12px 16px !important;
font-weight: 700 !important;
}
.ai-study-save-note::before,
.ai-study-alert--success::before {
content: "✔ ";
}
.ai-study-alert--danger,
.ai-study-dashboard__blocked {
color: var(--danger) !important;
background: var(--danger-bg) !important;
border: 1px solid var(--danger-border) !important;
border-radius: var(--radius) !important;
}
.ai-study-streak-badge.is-unlocked {
border-color: var(--success-border) !important;
background: var(--success-bg) !important;
}
.ai-study-english-shortcut,
.ai-study-maths-shortcut {
display: block;
width: 100%;
min-height: 118px;
cursor: pointer;
text-align: left;
appearance: none;
}
.ai-study-english-shortcut:hover,
.ai-study-english-shortcut.is-selected,
.ai-study-maths-shortcut:hover,
.ai-study-maths-shortcut.is-selected {
border-color: var(--card-hover-border) !important;
background: var(--card-hover-bg) !important;
box-shadow: var(--card-hover-shadow) !important;
}
.ai-study-table-builder.is-selected,
.ai-study-english-tool-card.is-selected {
border-color: var(--card-hover-border) !important;
box-shadow: var(--card-hover-shadow) !important;
}
.ai-study-progress-line {
background: color-mix(in srgb, var(--text-secondary) 22%, transparent) !important;
}
.ai-study-progress-line span {
background: var(--button-gradient) !important;
box-shadow: var(--glow) !important;
}
.ai-study-menu-card,
.ai-study-feature-card {
pointer-events: auto !important;
cursor: pointer !important;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
position: relative;
z-index: 2;
background-image: none !important;
-webkit-appearance: none;
appearance: none;
}
.ai-study-tabs .ai-study-tab {
pointer-events: auto !important;
cursor: pointer !important;
touch-action: manipulation;
background-image: none !important;
-webkit-appearance: none;
appearance: none;
}
.ai-study-panel[data-ai-study-panel="camera-scan"] .ai-study-primary-button,
.ai-study-panel[data-ai-study-panel="camera-scan"] .ai-study-secondary-button,
.ai-study-panel[data-ai-study-panel="camera-scan"] .ai-study-upload-button {
pointer-events: auto !important;
cursor: pointer !important;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
background-image: none !important;
position: relative;
z-index: 2;
}
.ai-study-panel[data-ai-study-panel="camera-scan"] label.ai-study-upload-button input[type="file"] {
pointer-events: auto !important;
}
.ai-study-panel-skeleton {
padding: 24px 16px;
text-align: center;
color: var(--text-secondary);
font-weight: 600;
} :root,
.ai-study-dashboard {
--voice-btn-bg: #EEF2FF;
--voice-btn-border: #6366F1;
--voice-btn-text: #3730A3;
--voice-btn-icon: #4F46E5;
--voice-btn-listening-bg: #DC2626;
--voice-btn-listening-border: #B91C1C;
--voice-status-bg: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
--voice-status-text: var(--primary);
--voice-status-error-bg: var(--danger-bg);
--voice-status-error-text: var(--danger);
--voice-status-success-bg: var(--success-bg);
--voice-status-success-text: var(--success);
}
html[data-theme="dark"],
body[data-ai-study-theme="dark"],
.ai-study-dashboard[data-ai-study-theme="dark"] {
--voice-btn-bg: #312E81;
--voice-btn-border: #818CF8;
--voice-btn-text: #E0E7FF;
--voice-btn-icon: #C7D2FE;
--voice-btn-listening-bg: #EF4444;
--voice-btn-listening-border: #FCA5A5;
}
.ai-study-voice-field {
position: relative;
display: block;
width: 100%;
}
.ai-study-voice-field textarea,
.ai-study-voice-field input[type="text"] {
width: 100%;
padding-right: 96px !important;
padding-bottom: 44px !important;
}
.ai-study-voice-field--block textarea {
padding-right: 12px !important;
padding-bottom: 52px !important;
}
.ai-study-voice-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 8px 14px;
border-radius: 999px;
border: 1.5px solid var(--voice-btn-border);
background: var(--voice-btn-bg);
color: var(--voice-btn-text);
font-size: 13px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
text-transform: capitalize;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 8px color-mix(in srgb, var(--voice-btn-border) 22%, transparent);
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.ai-study-voice-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--voice-btn-icon);
}
.ai-study-voice-btn__label {
color: inherit;
}
.ai-study-voice-field .ai-study-voice-btn {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 3;
}
.ai-study-voice-btn:hover,
.ai-study-voice-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--voice-btn-border) 28%, transparent);
outline: none;
}
.ai-study-voice-btn.is-listening {
background: var(--voice-btn-listening-bg) !important;
border-color: var(--voice-btn-listening-border) !important;
color: #fff !important;
animation: ai-study-voice-pulse 1s ease-in-out infinite;
}
.ai-study-voice-btn.is-listening .ai-study-voice-btn__icon {
color: #fff !important;
}
@keyframes ai-study-voice-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--voice-btn-listening-bg) 45%, transparent); }
50% { box-shadow: 0 0 0 10px transparent; }
}
.ai-study-voice-status {
margin: 8px 0 0;
padding: 8px 12px;
border-radius: 10px;
background: var(--voice-status-bg);
color: var(--voice-status-text);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
.ai-study-voice-status--error {
background: var(--voice-status-error-bg);
color: var(--voice-status-error-text);
}
.ai-study-voice-status--success {
background: var(--voice-status-success-bg);
color: var(--voice-status-success-text);
}
.ai-study-camera-voice-bar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
margin: 12px 0 0;
}
.ai-study-camera-voice-bar .ai-study-main-camera-btn,
.ai-study-camera-voice-bar .ai-study-voice-btn--inline {
width: 100%;
min-height: 48px;
position: static !important;
right: auto !important;
bottom: auto !important;
justify-content: center;
margin: 0;
}
.ai-study-camera-voice-bar .ai-study-voice-status {
grid-column: 1 / -1;
margin: 0;
}
.ai-study-tool-camera-extras {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
margin-top: 10px;
align-items: center;
}
.ai-study-tool-camera-extras .ai-study-upload-button,
.ai-study-tool-camera-extras .ai-study-extract-solve-btn {
width: 100%;
height: auto;
min-height: 40px;
max-height: 44px;
flex: none;
padding: 8px 10px;
font-size: 13px;
line-height: 1.2;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: normal;
box-sizing: border-box;
} .ai-study-usage-meter {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
background: var(--card-active-bg);
border: 1px solid var(--card-border);
}
.ai-study-student-profile .ai-study-usage-meter {
margin-top: 12px;
width: 100%;
}
.ai-study-user-info .ai-study-usage-meter {
margin-top: 8px;
grid-column: 1 / -1;
width: 100%;
}
.ai-study-usage-meter__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.ai-study-usage-meter__label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.ai-study-usage-meter__plan {
font-size: 11px;
font-weight: 800;
color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
padding: 2px 8px;
border-radius: 999px;
}
.ai-study-usage-meter__text {
display: block;
font-size: 14px;
font-weight: 900;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.3;
}
.ai-study-usage-meter__track {
height: 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--text-secondary) 16%, transparent);
overflow: hidden;
margin-bottom: 6px;
}
.ai-study-usage-meter__bar {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--primary), #8B5CF6);
transition: width 280ms ease;
}
.ai-study-usage-meter.is-low .ai-study-usage-meter__bar {
background: linear-gradient(90deg, #F59E0B, #F97316);
}
.ai-study-usage-meter.is-exhausted .ai-study-usage-meter__bar {
background: linear-gradient(90deg, #EF4444, #DC2626);
}
.ai-study-usage-meter__hint {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
line-height: 1.35;
}
.ai-study-usage-meter.is-exhausted .ai-study-usage-meter__text,
.ai-study-usage-meter.is-exhausted .ai-study-usage-meter__hint {
color: var(--danger);
}
.ai-study-limit-warning {
margin: 6px 0 0;
padding: 6px 8px;
border-radius: 8px;
background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 35%, transparent);
color: var(--danger, #dc2626);
font-size: 11px;
font-weight: 800;
line-height: 1.35;
} .ai-study-student-profile,
.ai-study-teacher-profile {
overflow: hidden;
min-width: 0;
}
.ai-study-usage-block--desktop {
width: 100%;
min-width: 0;
}
.ai-study-desktop-premium-strip {
display: grid;
gap: 4px;
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--card-border));
background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 10%, transparent), color-mix(in srgb, #7c3aed 8%, transparent));
}
.ai-study-desktop-premium-strip strong {
font-size: 13px;
color: var(--text-primary);
}
.ai-study-desktop-plan-name {
font-size: 11px;
color: var(--text-secondary);
font-weight: 700;
}
.ai-study-plan-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
line-height: 1.3;
}
.ai-study-plan-pill.is-free {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ai-study-plan-pill.is-trial {
color: #0ea5e9;
background: color-mix(in srgb, #0ea5e9 14%, transparent);
}
.ai-study-plan-pill.is-premium {
color: #b45309;
background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 22%, transparent), color-mix(in srgb, #a855f7 18%, transparent));
border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.ai-study-usage-meter--desktop.is-premium-plan .ai-study-usage-meter__bar {
background: linear-gradient(90deg, #7c3aed, #2563eb);
}
.ai-study-desktop-plan-actions,
.ai-study-desktop-smart-cta {
margin-top: 8px;
}
.ai-study-desktop-plan-actions {
display: grid;
gap: 6px;
}
.ai-study-desktop-smart-cta {
padding: 10px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 28%, var(--card-border));
background: color-mix(in srgb, var(--danger, #dc2626) 6%, var(--card-active-bg, var(--card-bg)));
box-sizing: border-box;
}
.ai-study-desktop-smart-cta[hidden] {
display: none !important;
}
.ai-study-desktop-smart-cta__warn {
margin: 0 0 6px;
font-size: 11px;
font-weight: 800;
line-height: 1.35;
color: var(--danger, #dc2626);
}
.ai-study-desktop-smart-cta__title {
margin: 0 0 8px;
font-size: 12px;
font-weight: 800;
color: var(--text-primary);
line-height: 1.3;
}
.ai-study-desktop-smart-cta__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.ai-study-desktop-smart-cta__actions:has(> :only-child) {
grid-template-columns: 1fr;
}
.ai-study-desktop-buy-btn,
.ai-study-desktop-upgrade-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 8px 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
width: 100%;
}
.ai-study-desktop-buy-btn {
color: #ffffff;
border: none;
background: linear-gradient(135deg, #7c3aed, #0ea5e9);
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
}
.ai-study-desktop-buy-btn:hover,
.ai-study-desktop-buy-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(124, 58, 237, 0.42), 0 0 0 2px rgba(14, 165, 233, 0.25);
filter: brightness(1.05);
}
.ai-study-desktop-upgrade-btn {
color: #0891b2;
background: color-mix(in srgb, var(--card-bg, #fff) 88%, transparent);
border: 2px solid #22d3ee;
box-shadow: 0 2px 10px rgba(34, 211, 238, 0.12);
}
html[data-theme="dark"] .ai-study-desktop-upgrade-btn {
color: #67e8f9;
background: rgba(15, 23, 42, 0.55);
}
.ai-study-desktop-upgrade-btn:hover,
.ai-study-desktop-upgrade-btn:focus-visible {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(34, 211, 238, 0.28), 0 0 0 2px rgba(34, 211, 238, 0.2);
}
.ai-study-manage-plan-btn {
width: 100%;
}
.ai-study-desktop-plan-actions .ai-study-secondary-button {
width: 100%;
min-height: 38px;
font-size: 12px;
padding: 8px 10px;
}
.ai-study-header-card .ep-profile-panel,
.ai-study-teacher-header .ep-profile-panel {
margin: 12px 0 0;
max-width: none;
} .ai-study-mobile-only .ep-profile-panel {
width: 100%;
max-width: 980px;
margin: 12px auto 0;
padding: 18px;
border-radius: 26px;
background: linear-gradient(145deg, #08152b, #0d2344);
border: 1px solid rgba(59, 130, 246, 0.35);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
color: #ffffff;
box-sizing: border-box;
}
[data-theme="light"] .ai-study-mobile-only .ep-profile-panel {
background: linear-gradient(145deg, #ffffff, #eef2ff);
border: 1px solid rgba(59, 130, 246, 0.28);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
color: #0f172a;
}
.ai-study-mobile-only .ep-profile-panel.is-plan-premium {
border-color: rgba(251, 191, 36, 0.45);
box-shadow: 0 18px 45px rgba(124, 58, 237, 0.18), inset 0 0 0 1px rgba(251, 191, 36, 0.12);
}
[data-theme="light"] .ai-study-mobile-only .ep-profile-panel.is-plan-premium {
background: linear-gradient(145deg, #fffbeb, #f5f3ff);
border-color: rgba(245, 158, 11, 0.35);
box-shadow: 0 12px 28px rgba(124, 58, 237, 0.12);
}
.ai-study-mobile-only .ep-premium-status {
display: grid;
gap: 4px;
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 14px;
border: 1px dashed rgba(251, 191, 36, 0.45);
background: rgba(124, 58, 237, 0.12);
}
[data-theme="light"] .ai-study-mobile-only .ep-premium-status {
background: rgba(124, 58, 237, 0.06);
border-color: rgba(245, 158, 11, 0.35);
}
.ai-study-mobile-only .ep-premium-badge {
display: inline-flex;
width: fit-content;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
color: #fcd34d;
background: rgba(251, 191, 36, 0.18);
}
[data-theme="light"] .ai-study-mobile-only .ep-premium-badge {
color: #b45309;
background: rgba(251, 191, 36, 0.22);
}
.ai-study-mobile-only .ep-premium-status strong {
font-size: 15px;
color: inherit;
}
.ai-study-mobile-only .ep-premium-status p {
margin: 0;
font-size: 12px;
opacity: 0.85;
} @media (max-width: 768px) {
.ai-study-mobile-only .ep-profile-panel.is-collapsed {
padding: 10px 12px;
}
.ai-study-mobile-only .ep-profile-panel.is-expanded {
padding: 12px 14px;
}
.ai-study-mobile-only .ep-profile-collapsed-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ai-study-mobile-only .ep-profile-collapsed-row .ep-user-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
}
.ai-study-mobile-only .ep-mobile-toggle,
.ai-study-mobile-only .ep-profile-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.08);
color: inherit;
border-radius: 10px;
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 20;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .ai-study-mobile-only .ep-mobile-toggle,
[data-theme="light"] .ai-study-mobile-only .ep-profile-toggle {
background: rgba(15, 23, 42, 0.06);
}
.ai-study-mobile-only .ep-arrow,
.ai-study-mobile-only .ep-profile-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
transition: transform 0.28s ease;
}
.ai-study-mobile-only .ep-user-card.is-open .ep-arrow,
.ai-study-mobile-only .ep-user-card.is-open .ep-profile-chevron,
.ai-study-mobile-only .ep-profile-panel.is-expanded .ep-arrow,
.ai-study-mobile-only .ep-profile-panel.is-expanded .ep-profile-chevron {
transform: rotate(180deg);
}
.ai-study-mobile-only .ep-mobile-details,
.ai-study-mobile-only .ep-profile-expand {
display: none;
margin-top: 0;
}
.ai-study-mobile-only .ep-user-card.is-open .ep-mobile-details,
.ai-study-mobile-only .ep-user-card.is-open .ep-profile-expand,
.ai-study-mobile-only .ep-profile-panel.is-expanded .ep-mobile-details,
.ai-study-mobile-only .ep-profile-panel.is-expanded .ep-profile-expand {
display: block;
margin-top: 12px;
animation: epProfileExpand 0.28s ease;
}
.ai-study-mobile-only .ep-profile-summary {
display: grid;
gap: 2px;
min-width: 0;
}
.ai-study-mobile-only .ep-profile-name {
font-size: 18px;
font-weight: 800;
line-height: 1.15;
color: inherit;
word-break: break-word;
}
.ai-study-mobile-only .ep-profile-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: 12px;
line-height: 1.3;
color: #b9c7df;
}
[data-theme="light"] .ai-study-mobile-only .ep-profile-meta {
color: #64748b;
}
.ai-study-mobile-only .ep-meta-sep {
opacity: 0.7;
}
.ai-study-mobile-only .ep-plan-badge-inline {
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
}
.ai-study-mobile-only .ep-plan-badge-inline.is-free {
color: #38d7ff;
background: rgba(14, 165, 233, 0.18);
}
[data-theme="light"] .ai-study-mobile-only .ep-plan-badge-inline.is-free {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ai-study-mobile-only .ep-plan-badge-inline.is-trial {
color: #38bdf8;
background: rgba(56, 189, 248, 0.16);
}
.ai-study-mobile-only .ep-plan-badge-inline.is-premium {
color: #fcd34d;
background: rgba(251, 191, 36, 0.18);
}
[data-theme="light"] .ai-study-mobile-only .ep-plan-badge-inline.is-premium {
color: #b45309;
background: rgba(251, 191, 36, 0.22);
}
.ai-study-mobile-only .ep-profile-panel.is-collapsed .ep-avatar {
width: 44px;
height: 44px;
}
.ai-study-mobile-only .ep-user-card.is-open .ep-avatar,
.ai-study-mobile-only .ep-profile-panel.is-expanded .ep-avatar {
width: 52px;
height: 52px;
}
.ai-study-mobile-only .ep-profile-expand-footer {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(148, 163, 184, 0.22);
}
@keyframes epProfileExpand {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
[data-theme="light"] .ai-study-mobile-only .ep-profile-expand-footer {
border-top-color: rgba(15, 23, 42, 0.1);
}
.ai-study-mobile-only .ep-profile-expand-footer .ep-logout-btn {
width: 100%;
padding: 12px 16px;
font-size: 15px;
border-radius: 14px;
}
.ai-study-mobile-only .ep-profile-header {
display: none;
}
}
.ai-study-mobile-only .ep-profile-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.ai-study-mobile-only .ep-user-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.ai-study-mobile-only .ep-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
background: #ffffff;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ai-study-mobile-only .ep-avatar img,
.ai-study-mobile-only .ep-avatar .ep-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.ai-study-mobile-only .ep-avatar--initial,
.ai-study-mobile-only .ep-avatar--teacher {
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: #ffffff;
font-size: 28px;
font-weight: 900;
}
.ai-study-mobile-only .ep-user-left h2 {
margin: 0;
font-size: 30px;
line-height: 1.1;
color: inherit;
word-break: break-word;
}
.ai-study-mobile-only .ep-user-left p {
margin: 6px 0 0;
font-size: 18px;
color: #b9c7df;
}
[data-theme="light"] .ai-study-mobile-only .ep-user-left p {
color: #64748b;
}
.ai-study-mobile-only .ep-logout-form {
margin: 0;
flex-shrink: 0;
}
.ai-study-mobile-only .ep-logout-btn {
padding: 14px 26px;
border-radius: 18px;
border: 2px solid #ff404d;
color: #ff515d;
background: rgba(255, 64, 77, 0.06);
font-size: 20px;
font-weight: 800;
cursor: pointer;
line-height: 1.2;
}
.ai-study-mobile-only .ep-limit-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
.ai-study-mobile-only .ep-limit-grid.is-split {
grid-template-columns: 1fr 1.2fr;
}
.ai-study-mobile-only .ep-limit-card,
.ai-study-mobile-only .ep-upgrade-card {
padding: 18px;
border-radius: 20px;
background: linear-gradient(145deg, #10295a, #0c1f42);
border: 1px solid rgba(59, 130, 246, 0.35);
box-shadow: inset 0 0 28px rgba(37, 99, 235, 0.12);
box-sizing: border-box;
}
[data-theme="light"] .ai-study-mobile-only .ep-limit-card,
[data-theme="light"] .ai-study-mobile-only .ep-upgrade-card {
background: linear-gradient(145deg, #ffffff, #f8fafc);
border: 1px solid rgba(59, 130, 246, 0.22);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.ai-study-mobile-only .ep-limit-card .ai-study-usage-meter,
.ai-study-mobile-only .ep-limit-card .limit-card__meter {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
border-radius: 0;
}
.ai-study-mobile-only .ep-card-top {
display: flex;
align-items: center;
gap: 14px;
}
.ai-study-mobile-only .ep-card-copy {
min-width: 0;
flex: 1 1 auto;
}
.ai-study-mobile-only .ep-icon {
width: 58px;
height: 58px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
.ai-study-mobile-only .ep-limit-icon {
background: linear-gradient(135deg, #2563eb, #4f46e5);
}
.ai-study-mobile-only .ep-upgrade-icon {
background: linear-gradient(135deg, #7c3aed, #9333ea);
}
.ai-study-mobile-only .ep-card-top h3,
.ai-study-mobile-only .ep-card-top .ai-study-usage-meter__label {
margin: 0;
color: inherit;
font-size: 24px;
line-height: 1.2;
font-weight: 800;
text-transform: none;
letter-spacing: 0;
}
.ai-study-mobile-only .ep-card-top p,
.ai-study-mobile-only .ep-usage-line {
margin: 7px 0 0;
color: #b9c7df;
font-size: 16px;
line-height: 1.35;
}
[data-theme="light"] .ai-study-mobile-only .ep-card-top p,
[data-theme="light"] .ai-study-mobile-only .ep-usage-line {
color: #64748b;
}
.ai-study-mobile-only .ep-limit-card .ep-usage-line strong {
color: #ff404d;
font-size: 22px;
font-weight: 900;
}
.ai-study-mobile-only .ai-study-usage-meter.is-low .ep-usage-line strong {
color: #fbbf24;
}
.ai-study-mobile-only .ai-study-usage-meter:not(.is-exhausted):not(.is-low) .ep-usage-line strong {
color: #ffffff;
}
[data-theme="light"] .ai-study-mobile-only .ai-study-usage-meter:not(.is-exhausted):not(.is-low) .ep-usage-line strong {
color: #0f172a;
}
.ai-study-mobile-only .ep-plan-badge {
margin-left: auto;
padding: 7px 12px;
border-radius: 10px;
background: rgba(14, 165, 233, 0.18);
color: #38d7ff;
font-size: 15px;
font-weight: 800;
flex-shrink: 0;
}
[data-theme="light"] .ai-study-mobile-only .ep-plan-badge.is-free {
color: var(--primary);
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ai-study-mobile-only .ep-plan-badge.is-premium {
color: #fcd34d;
background: rgba(251, 191, 36, 0.18);
}
.ai-study-mobile-only .ep-progress,
.ai-study-mobile-only .ep-limit-card .ai-study-usage-meter__track {
width: 100%;
height: 10px;
margin: 16px 0;
border-radius: 20px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
}
[data-theme="light"] .ai-study-mobile-only .ep-progress,
[data-theme="light"] .ai-study-mobile-only .ep-limit-card .ai-study-usage-meter__track {
background: rgba(15, 23, 42, 0.08);
}
.ai-study-mobile-only .ep-limit-card .ai-study-usage-meter__bar {
display: block;
height: 100%;
border-radius: 20px;
background: linear-gradient(90deg, #ff3131, #ff404d);
}
.ai-study-mobile-only .ai-study-usage-meter.is-low .ai-study-usage-meter__bar {
background: linear-gradient(90deg, #f59e0b, #f97316);
}
.ai-study-mobile-only .ai-study-usage-meter:not(.is-exhausted):not(.is-low) .ai-study-usage-meter__bar {
background: linear-gradient(90deg, #2563eb, #4f46e5);
}
.ai-study-mobile-only .ai-study-usage-meter.is-premium-plan:not(.is-exhausted):not(.is-low) .ai-study-usage-meter__bar {
background: linear-gradient(90deg, #7c3aed, #2563eb);
}
.ai-study-mobile-only .ep-warning,
.ai-study-mobile-only .ep-limit-card .ai-study-limit-warning {
margin: 0;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 64, 77, 0.55);
background: rgba(255, 64, 77, 0.10);
color: #ff606b;
font-weight: 800;
font-size: 16px;
line-height: 1.35;
}
.ai-study-mobile-only .ep-limit-grid.is-exhausted .ai-study-usage-meter__hint {
display: none;
}
.ai-study-mobile-only .ep-limit-card .ai-study-usage-meter__hint {
display: block;
margin-top: 4px;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
line-height: 1.35;
}
.ai-study-mobile-only .ep-benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 18px 0;
padding-top: 14px;
border-top: 1px dashed rgba(56, 189, 248, 0.35);
}
.ai-study-mobile-only .ep-benefits div {
color: inherit;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
.ai-study-mobile-only .ep-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.ai-study-mobile-only .ep-actions--premium {
grid-template-columns: 1fr;
}
.ai-study-mobile-only .ep-buy-btn,
.ai-study-mobile-only .ep-upgrade-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 14px;
border-radius: 16px;
font-weight: 900;
font-size: 15px;
text-align: center;
cursor: pointer;
border: none;
line-height: 1.2;
width: 100%;
}
.ai-study-mobile-only .ep-buy-btn {
color: #ffffff;
background: linear-gradient(135deg, #7c3aed, #0ea5e9);
}
.ai-study-mobile-only .ep-upgrade-btn {
color: #38e8ff;
background: rgba(15, 23, 42, 0.55);
border: 2px solid #22d3ee;
}
[data-theme="light"] .ai-study-mobile-only .ep-upgrade-btn {
color: #0369a1;
background: rgba(255, 255, 255, 0.85);
border-color: #38bdf8;
}
.ai-study-mobile-only .ep-upgrade-card[hidden] {
display: none !important;
}
.ai-study-mobile-only .ep-upgrade-card--premium {
padding: 12px;
}
.ai-study-usage-block {
width: 100%;
}
.ai-study-buy-credits-box {
margin-bottom: 14px;
border-color: color-mix(in srgb, var(--primary) 35%, transparent);
background: color-mix(in srgb, var(--primary) 6%, var(--card-bg, #fff));
}
@media (max-width: 768px) {
.ai-study-mobile-only .ep-profile-panel {
padding: 14px;
border-radius: 22px;
margin: 10px auto 0;
}
.ai-study-mobile-only .ep-profile-header {
gap: 10px;
margin-bottom: 12px;
}
.ai-study-mobile-only .ep-avatar {
width: 54px;
height: 54px;
}
.ai-study-mobile-only .ep-user-left h2 {
font-size: 22px;
}
.ai-study-mobile-only .ep-user-left p {
font-size: 14px;
}
.ai-study-mobile-only .ep-logout-btn {
padding: 10px 14px;
border-radius: 14px;
font-size: 15px;
}
.ai-study-mobile-only .ep-limit-grid.is-split {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ai-study-mobile-only .ep-limit-card,
.ai-study-mobile-only .ep-upgrade-card {
padding: 12px;
border-radius: 16px;
}
.ai-study-mobile-only .ep-icon {
width: 38px;
height: 38px;
border-radius: 12px;
font-size: 19px;
}
.ai-study-mobile-only .ep-card-top {
gap: 8px;
align-items: flex-start;
}
.ai-study-mobile-only .ep-card-top h3,
.ai-study-mobile-only .ep-card-top .ai-study-usage-meter__label {
font-size: 15px;
}
.ai-study-mobile-only .ep-card-top p,
.ai-study-mobile-only .ep-usage-line {
font-size: 11px;
}
.ai-study-mobile-only .ep-limit-card .ep-usage-line strong {
font-size: 14px;
}
.ai-study-mobile-only .ep-plan-badge {
padding: 5px 8px;
font-size: 11px;
border-radius: 8px;
}
.ai-study-mobile-only .ep-progress,
.ai-study-mobile-only .ep-limit-card .ai-study-usage-meter__track {
height: 7px;
margin: 10px 0;
}
.ai-study-mobile-only .ep-warning,
.ai-study-mobile-only .ep-limit-card .ai-study-limit-warning {
padding: 8px;
border-radius: 10px;
font-size: 11px;
}
.ai-study-mobile-only .ep-benefits {
grid-template-columns: 1fr;
gap: 5px;
margin: 10px 0;
padding-top: 8px;
}
.ai-study-mobile-only .ep-benefits div {
font-size: 11px;
}
.ai-study-mobile-only .ep-actions {
grid-template-columns: 1fr;
gap: 8px;
}
.ai-study-mobile-only .ep-actions--premium {
grid-template-columns: 1fr;
}
.ai-study-mobile-only .ep-buy-btn,
.ai-study-mobile-only .ep-upgrade-btn {
min-height: 44px;
padding: 10px 8px;
border-radius: 12px;
font-size: 13px;
}
}
@media (max-width: 420px) {
.ai-study-mobile-only .ep-limit-grid.is-split {
grid-template-columns: 1fr;
}
.ai-study-mobile-only .ep-actions {
grid-template-columns: 1fr 1fr;
}
.ai-study-mobile-only .ep-actions--premium {
grid-template-columns: 1fr;
}
} .ai-study-auth-shell {
background: var(--bg) !important;
} .ai-study-primary-button,
.ai-study-secondary-button,
.ai-study-menu-card,
.ai-study-tab,
.ai-study-stat-card,
.ai-study-master-card,
.ai-study-mobile-quick-card,
.ai-study-header-card,
.ai-study-shell {
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.ai-study-primary-button,
.ai-study-secondary-button,
.ai-study-menu-card,
.ai-study-tab,
.ai-study-stat-card,
.ai-study-master-card,
.ai-study-mobile-quick-card {
transition-property: transform, background, background-color, border-color, color, box-shadow !important;
} @media (max-width: 768px) {
.ai-study-mobile-only {
--mobile-header-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
--mobile-theme-shadow: 0 8px 18px rgba(37, 99, 235, 0.10);
--mobile-card-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
--mobile-avatar-gradient: linear-gradient(135deg, #7DD3FC, var(--primary));
--mobile-active-border: #93C5FD;
--mobile-logout-border: var(--danger);
--mobile-logout-text: var(--danger);
}
html,
body {
overflow-x: hidden;
}
.ai-study-mobile-only {
display: block;
}
.ai-study-desktop-only {
display: none !important;
}
.ai-study-dashboard {
padding: 14px !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
background: var(--bg) !important;
}
.ai-study-dashboard > .student-dashboard-card,
.ai-study-dashboard > .logout-card,
.ai-study-extra-dashboard,
.student-dashboard-duplicate,
.ai-study-header-card + .ai-study-header-card {
display: none !important;
}
.entry-content > .ai-study-dashboard,
.wp-block-shortcode .ai-study-dashboard {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.ai-study-header {
display: block;
margin-bottom: 0;
}
.ai-study-header-card {
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: 22px !important;
padding: 14px !important;
box-shadow: var(--mobile-header-shadow) !important;
}
.ai-study-header-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: center;
margin-bottom: 14px;
}
.ai-study-logo-text,
.easy-padhai-title,
.ai-study-header-title,
.ai-study-header-card .ai-study-brand-easy,
.ai-study-header-card .ai-study-brand-padhai {
display: none !important;
}
.ai-study-theme-btn {
width: 100%;
min-height: 52px;
border-radius: 18px !important;
border: 1.5px solid var(--card-hover-border) !important;
background: var(--card-bg) !important;
color: var(--primary) !important;
font-size: 16px;
font-weight: 800;
box-shadow: var(--mobile-theme-shadow) !important;
}
.ai-study-dashboard-title {
margin: 0;
text-align: center;
color: var(--text-primary) !important;
font-size: 20px;
font-weight: 900;
line-height: 1.2;
}
.ai-study-user-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
background: var(--card-active-bg);
border-radius: 18px;
padding: 12px;
}
.ai-study-user-info {
flex: 1 1 calc(100% - 130px);
min-width: 0;
}
.ai-study-usage-meter {
flex: 1 1 100%;
}
.ai-study-user-avatar {
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--mobile-avatar-gradient);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-on-gradient);
font-size: 28px;
font-weight: 900;
flex: 0 0 auto;
overflow: hidden;
}
.ai-study-user-avatar--photo {
padding: 0;
background: var(--card-border);
}
.ai-study-user-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.ai-study-user-info {
flex: 1;
min-width: 0;
}
.ai-study-user-name {
margin: 0 !important;
color: var(--text-primary) !important;
font-size: 18px;
font-weight: 900;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-study-user-role {
display: block;
color: var(--text-secondary);
font-size: 14px;
font-weight: 700;
margin-top: 2px;
}
.ai-study-logout-form {
margin: 0;
flex: 0 0 auto;
}
.ai-study-logout-btn,
.ai-study-mobile-only .ai-study-logout-button {
width: auto;
min-width: 104px;
min-height: 48px;
border-radius: 16px !important;
border: 1.5px solid var(--mobile-logout-border) !important;
background: var(--card-bg) !important;
color: var(--mobile-logout-text) !important;
font-size: 15px;
font-weight: 900;
box-shadow: none !important;
padding: 0 12px;
}
.ai-study-menu,
.ai-study-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
margin-bottom: 16px;
max-height: none;
overflow: visible;
}
.ai-study-menu-card,
.ai-study-feature-card,
.ai-study-menu .ai-study-tab {
min-width: 0;
min-height: 74px;
border-radius: 16px !important;
padding: 12px !important;
background: var(--card-bg) !important;
border: 1px solid var(--card-border) !important;
box-shadow: var(--mobile-card-shadow) !important;
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 900;
line-height: 1.15;
}
.ai-study-menu-card .icon,
.ai-study-feature-card .icon {
font-size: 22px;
}
.ai-study-menu-card .title,
.ai-study-feature-card .title {
font-size: 15px;
line-height: 1.15;
}
.ai-study-menu-card.is-active,
.ai-study-menu-card.active,
.ai-study-feature-card.active {
background: var(--card-active-bg) !important;
border-color: var(--mobile-active-border) !important;
color: var(--primary) !important;
}
.ai-study-menu-card.is-active .title,
.ai-study-menu-card.active .title {
color: var(--primary) !important;
}
.ai-study-shell {
display: block !important;
grid-template-columns: 1fr !important;
min-height: auto !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
overflow: visible !important;
}
.ai-study-main {
padding: 0 !important;
background: transparent !important;
}
.ai-study-panel {
padding: 4px 0 20px;
}
.ai-study-panel h2,
.ai-study-panel h3 {
font-size: 18px;
line-height: 1.25;
}
.ai-study-primary-button,
.ai-study-secondary-button,
.ai-study-upload-button,
.ai-study-voice-btn {
min-height: 48px;
font-size: 15px;
border-radius: 14px !important;
}
.ai-study-voice-btn {
min-height: 44px;
padding: 10px 16px;
font-size: 14px;
}
.ai-study-voice-field textarea,
.ai-study-voice-field input[type="text"] {
min-height: 120px;
font-size: 16px;
padding-right: 104px !important;
padding-bottom: 52px !important;
}
.ai-study-tool-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.ai-study-tool-actions select,
.ai-study-tool-actions .ai-study-primary-button,
.ai-study-tool-actions .ai-study-secondary-button {
width: 100%;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
.ai-study-camera-voice-bar {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ai-study-camera-voice-bar .ai-study-main-camera-btn,
.ai-study-camera-voice-bar .ai-study-voice-btn--inline {
min-height: 52px;
font-size: 15px;
}
.ai-study-tool-camera-extras .ai-study-upload-button,
.ai-study-tool-camera-extras .ai-study-extract-solve-btn {
min-height: 40px !important;
max-height: 44px !important;
padding: 7px 6px !important;
font-size: 12px !important;
}
.ai-study-camera-toolbar,
.ai-study-tool-camera-toolbar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.ai-study-camera-toolbar .ai-study-compact-label--inline,
.ai-study-tool-camera-toolbar .ai-study-upload-button {
grid-column: 1 / -1;
}
.ai-study-camera-toolbar .ai-study-primary-button,
.ai-study-camera-toolbar .ai-study-secondary-button,
.ai-study-camera-toolbar .ai-study-upload-button,
.ai-study-tool-camera-toolbar .ai-study-primary-button,
.ai-study-tool-camera-toolbar .ai-study-secondary-button,
.ai-study-tool-camera-toolbar .ai-study-upload-button {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}
.ai-study-scan-hero,
.ai-study-revision-box,
.ai-study-smart-ocr-box,
.ai-study-premium-box {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.ai-study-revision-box {
grid-template-columns: 1fr !important;
}
.ai-study-scan-hero .ai-study-primary-button,
.ai-study-revision-box .ai-study-primary-button,
.ai-study-premium-actions .ai-study-primary-button,
.ai-study-premium-actions .ai-study-secondary-button {
width: 100%;
}
.ai-study-premium-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.ai-study-english-tool-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.ai-study-english-tool-card {
padding: 14px;
border-radius: 16px;
}
.ai-study-result-box textarea,
.ai-study-field-label textarea,
.ai-study-compact-label select,
.ai-study-field-label select {
font-size: 16px;
min-height: 44px;
}
.ai-study-mobile-quick-card {
min-height: 80px;
border-radius: 18px !important;
}
.ai-study-output-window,
.ai-study-input-window {
border-radius: 16px !important;
padding: 12px !important;
}
}
@media (min-width: 769px) {
.ai-study-mobile-only {
display: none !important;
}
.ai-study-desktop-only {
display: block;
}
}
@media (max-width: 380px) {
.ai-study-menu-card,
.ai-study-feature-card,
.ai-study-menu .ai-study-tab {
font-size: 13px;
padding: 10px;
}
.ai-study-menu-card .icon,
.ai-study-feature-card .icon {
font-size: 18px;
}
.ai-study-menu-card .title,
.ai-study-feature-card .title {
font-size: 13px;
}
} html[data-theme="dark"] .ai-study-section:has(.ai-study-history-list),
html[data-theme="dark"] .ai-study-panel[data-ai-study-panel="history"] .ai-study-section,
body[data-ai-study-theme="dark"] .ai-study-section:has(.ai-study-history-list),
body[data-ai-study-theme="dark"] .ai-study-panel[data-ai-study-panel="history"] .ai-study-section,
body.dark-mode .ai-study-section:has(.ai-study-history-list),
body.dark-mode .ai-study-panel[data-ai-study-panel="history"] .ai-study-section,
.dark-mode .ai-study-section:has(.ai-study-history-list),
.dark-mode .ai-study-panel[data-ai-study-panel="history"] .ai-study-section,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-section:has(.ai-study-history-list),
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-panel[data-ai-study-panel="history"] .ai-study-section {
background: var(--section-bg) !important;
border: 1px solid var(--history-section-border) !important;
border-radius: 14px !important;
}
html[data-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-section__header h2,
html[data-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-section__header h3,
html[data-theme="dark"] .ai-study-panel[data-ai-study-panel="history"] .ai-study-section__header h2,
html[data-theme="dark"] .ai-study-panel[data-ai-study-panel="history"] .ai-study-section__header h3,
body[data-ai-study-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-section__header h2,
body[data-ai-study-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-section__header h3,
body.dark-mode .recent-answers-title,
.dark-mode .recent-answers-title,
body.dark-mode .recent-answers h2,
.dark-mode .recent-answers h2,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-section__header h3 {
color: var(--text-primary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-history-item,
body[data-ai-study-theme="dark"] .ai-study-history-item,
body.dark-mode .recent-answer-card,
.dark-mode .recent-answer-card,
body.dark-mode .answer-card,
.dark-mode .answer-card,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-history-item {
background: var(--card-bg) !important;
border: 1px solid var(--history-card-border) !important;
border-radius: 14px !important;
color: var(--heading) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-history-item:hover,
body[data-ai-study-theme="dark"] .ai-study-history-item:hover,
body.dark-mode .recent-answer-card:hover,
.dark-mode .recent-answer-card:hover,
body.dark-mode .answer-card:hover,
.dark-mode .answer-card:hover,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-history-item:hover {
border-color: var(--history-section-border) !important;
box-shadow: var(--history-hover-shadow) !important;
background: var(--card-hover-bg) !important;
}
html[data-theme="dark"] .ai-study-history-item span,
body[data-ai-study-theme="dark"] .ai-study-history-item span,
body.dark-mode .recent-answer-card .category,
.dark-mode .recent-answer-card .category,
body.dark-mode .answer-category,
.dark-mode .answer-category,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-history-item span {
color: var(--primary) !important;
opacity: 1 !important;
font-weight: 800;
}
html[data-theme="dark"] .ai-study-history-item h4,
body[data-ai-study-theme="dark"] .ai-study-history-item h4,
body.dark-mode .recent-answer-card h3,
.dark-mode .recent-answer-card h3,
body.dark-mode .answer-card h3,
.dark-mode .answer-card h3,
body.dark-mode .answer-title,
.dark-mode .answer-title,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-history-item h4 {
color: var(--history-title) !important;
opacity: 1 !important;
font-weight: 800;
}
html[data-theme="dark"] .ai-study-history-item p,
body[data-ai-study-theme="dark"] .ai-study-history-item p,
body.dark-mode .recent-answer-card p,
.dark-mode .recent-answer-card p,
body.dark-mode .answer-card p,
.dark-mode .answer-card p,
body.dark-mode .answer-excerpt,
.dark-mode .answer-excerpt,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-history-item p {
color: var(--history-excerpt) !important;
opacity: 1 !important;
font-weight: 500;
line-height: 1.6;
}
html[data-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-link-button,
html[data-theme="dark"] .ai-study-panel[data-ai-study-panel="history"] .ai-study-link-button,
body[data-ai-study-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-link-button,
body.dark-mode .recent-answers .view-history,
.dark-mode .recent-answers .view-history,
body.dark-mode .view-history-btn,
.dark-mode .view-history-btn,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-section:has(.ai-study-history-list) .ai-study-link-button {
background: var(--history-link-bg) !important;
color: var(--history-link-text) !important;
border: 1px solid var(--history-link-border) !important;
border-radius: 999px !important;
padding: 8px 16px !important;
font-weight: 800 !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-empty-state,
body[data-ai-study-theme="dark"] .ai-study-empty-state,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-empty-state {
color: var(--text-secondary) !important;
opacity: 1 !important;
} html[data-theme="dark"] .ai-study-dashboard .ai-study-muted,
html[data-theme="dark"] .ai-study-dashboard .ai-study-stat-card span:not(.ai-study-stat-card__icon),
html[data-theme="dark"] .ai-study-dashboard .ai-study-stat-card small,
html[data-theme="dark"] .ai-study-dashboard .ai-study-stat-card__label,
html[data-theme="dark"] .ai-study-dashboard .ai-study-streak-badge span,
html[data-theme="dark"] .ai-study-dashboard .ai-study-subscription-box span,
html[data-theme="dark"] .ai-study-dashboard .ai-study-compact-label,
html[data-theme="dark"] .ai-study-dashboard .ai-study-field-label,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-muted,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-muted {
color: var(--text-secondary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-section,
html[data-theme="dark"] .ai-study-dashboard .ai-study-stat-card,
html[data-theme="dark"] .ai-study-dashboard .ai-study-result-box,
html[data-theme="dark"] .ai-study-dashboard .ai-study-subscription-box,
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-builder,
html[data-theme="dark"] .ai-study-dashboard .ai-study-master-card,
html[data-theme="dark"] .ai-study-dashboard .ai-study-english-tool-card,
html[data-theme="dark"] .ai-study-dashboard .ai-study-vocab-card,
html[data-theme="dark"] .ai-study-dashboard .ai-study-question-card,
html[data-theme="dark"] .ai-study-dashboard .ai-study-advanced-card,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-section,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-section {
background: var(--card-bg) !important;
border-color: var(--card-border) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-section__header h2,
html[data-theme="dark"] .ai-study-dashboard .ai-study-section__header h3,
html[data-theme="dark"] .ai-study-dashboard .ai-study-history-item h4,
html[data-theme="dark"] .ai-study-dashboard .ai-study-output-block h4,
html[data-theme="dark"] .ai-study-dashboard .ai-study-stat-card strong,
html[data-theme="dark"] .ai-study-dashboard .ai-study-streak-badge strong,
html[data-theme="dark"] .ai-study-dashboard .ai-study-master-card h3,
html[data-theme="dark"] .ai-study-dashboard .ai-study-question-card h4,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-section__header h2,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-section__header h3,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-section__header h2,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-section__header h3 {
color: var(--heading) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-output-block p,
html[data-theme="dark"] .ai-study-dashboard .ai-study-output-block li,
html[data-theme="dark"] .ai-study-dashboard .ai-study-result-box p,
html[data-theme="dark"] .ai-study-dashboard .ai-study-tool-panel p,
html[data-theme="dark"] .ai-study-dashboard .ai-study-buddy-card p,
html[data-theme="dark"] .ai-study-dashboard .ai-study-master-card p,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-output-block p,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-output-block p {
color: var(--history-excerpt) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-history-row,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-history-row,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-history-row {
border-bottom-color: var(--card-border) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-link-button,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-link-button,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-link-button {
opacity: 1 !important;
} html[data-theme="dark"] .ai-study-dashboard .ai-study-table-lines div,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-table-lines div,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-table-lines div {
background: var(--card-hover-bg) !important;
border: 1px solid var(--card-border) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-lines div span,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-table-lines div span,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-table-lines div span {
color: var(--text-secondary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-lines div strong,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-table-lines div strong,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-table-lines div strong {
color: var(--primary) !important;
opacity: 1 !important;
font-weight: 800;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-result h4,
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-output .ai-study-table-result h4,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-table-result h4,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-table-result h4 {
color: var(--text-primary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-result p,
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-output .ai-study-table-result p,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-table-result p,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-table-result p {
color: var(--text-secondary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-answer-box,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-answer-box,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-answer-box {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-primary) !important;
opacity: 1 !important;
}
html[data-theme="dark"] .ai-study-dashboard .ai-study-table-output,
body[data-ai-study-theme="dark"] .ai-study-dashboard .ai-study-table-output,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-table-output {
color: var(--text-primary) !important;
opacity: 1 !important;
} .ai-study-tool-camera-extras {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 8px !important;
align-items: center !important;
}
.ai-study-tool-camera-extras .ai-study-upload-button,
.ai-study-tool-camera-extras .ai-study-extract-solve-btn,
.ai-study-tool-camera-extras [data-ai-study-tool-camera-solve] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 40px !important;
max-height: 44px !important;
flex: none !important;
padding: 8px 10px !important;
font-size: 13px !important;
line-height: 1.2 !important;
border-radius: 10px !important;
box-sizing: border-box !important;
} .ai-study-header-top {
gap: 8px;
}
.ai-study-top-profile-btn {
border: 0 !important;
border-radius: 999px !important;
padding: 8px 12px !important;
font-size: 12px !important;
font-weight: 900 !important;
background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
color: #ffffff !important;
box-shadow: 0 10px 24px rgba(79, 70, 229, 0.24) !important;
cursor: pointer !important;
white-space: nowrap !important;
}
.ai-study-top-profile-btn:hover,
.ai-study-top-profile-btn:focus-visible {
transform: translateY(-1px);
filter: brightness(1.06);
outline: none;
}
.ai-study-logout-button,
.ai-study-logout-btn,
.ep-logout-btn,
.ai-study-tabs .ai-study-logout-button,
.ai-study-mobile-only .ep-logout-btn {
background: #dc2626 !important;
color: #ffffff !important;
border-color: #dc2626 !important;
box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24) !important;
}
.ai-study-logout-button:hover,
.ai-study-logout-btn:hover,
.ep-logout-btn:hover,
.ai-study-tabs .ai-study-logout-button:hover,
.ai-study-mobile-only .ep-logout-btn:hover {
background: #b91c1c !important;
color: #ffffff !important;
border-color: #b91c1c !important;
}
.ai-study-payment-status {
margin: 12px 0;
border-radius: 16px;
padding: 12px 14px;
font-weight: 800;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(15, 23, 42, 0.05);
}
.ai-study-payment-status p { margin: 0; }
.ai-study-payment-status.is-success {
background: rgba(22, 163, 74, 0.12);
border-color: rgba(22, 163, 74, 0.32);
color: #166534;
}
.ai-study-payment-status.is-error {
background: rgba(220, 38, 38, 0.10);
border-color: rgba(220, 38, 38, 0.28);
color: #991b1b;
}
.ai-study-payment-status.is-info {
background: rgba(79, 70, 229, 0.10);
border-color: rgba(79, 70, 229, 0.25);
color: #3730a3;
}
.ai-study-paid-plan {
position: relative;
overflow: hidden;
}
.ai-study-paid-plan.is-featured {
border-color: rgba(250, 204, 21, 0.72) !important;
}
.ai-study-plan-ribbon {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
border-radius: 999px;
padding: 4px 10px;
margin-bottom: 8px;
font-size: 11px;
font-weight: 900;
background: rgba(250, 204, 21, 0.18);
color: #92400e;
}
.ai-study-gateway-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-top: 12px;
}
.ai-study-gateway-row select {
min-height: 40px;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.35);
padding: 0 10px;
font-weight: 800;
background: #ffffff;
color: #0f172a;
}
.ai-study-pay-now-btn[disabled] {
opacity: 0.75;
cursor: wait !important;
}
html[data-theme="dark"] .ai-study-payment-status.is-success { color: #bbf7d0; }
html[data-theme="dark"] .ai-study-payment-status.is-error { color: #fecaca; }
html[data-theme="dark"] .ai-study-payment-status.is-info { color: #c7d2fe; }
html[data-theme="dark"] .ai-study-gateway-row select {
background: #0f172a;
color: #f8fafc;
border-color: rgba(148, 163, 184, 0.28);
}
@media (max-width: 420px) {
.ai-study-top-profile-btn {
padding: 7px 10px !important;
font-size: 11px !important;
}
.ai-study-dashboard-title {
font-size: 16px !important;
}
} .ai-study-desktop-profile-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
width: 100% !important;
margin: 8px 0 10px !important;
}
.ai-study-desktop-profile-title {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.ai-study-desktop-profile-title strong {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.ai-study-desktop-profile-btn {
padding: 7px 10px !important;
font-size: 11px !important;
flex: 0 0 auto !important;
}
.ai-study-profile-page {
display: flex;
flex-direction: column;
gap: 18px;
}
.ai-study-profile-hero-card,
.ai-study-profile-card {
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.ai-study-profile-hero-card {
display: flex;
align-items: center;
gap: 18px;
padding: 20px;
}
.ai-study-profile-avatar-wrap {
width: 104px;
height: 104px;
border-radius: 32px;
padding: 5px;
background: linear-gradient(135deg, #4f46e5, #a855f7);
flex: 0 0 auto;
}
.ai-study-profile-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 27px;
background: #eef2ff;
display: block;
}
.ai-study-profile-hero-card h3 {
margin: 4px 0 6px;
font-size: 28px;
line-height: 1.15;
}
.ai-study-profile-hero-card p {
margin: 0;
color: #64748b;
}
.ai-study-profile-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.ai-study-profile-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: #eef2ff;
color: #3730a3;
font-size: 12px;
font-weight: 900;
}
.ai-study-profile-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 18px;
}
.ai-study-profile-card {
padding: 20px;
}
.ai-study-profile-card h3 {
margin: 0 0 8px;
font-size: 20px;
}
.ai-study-profile-readonly-grid,
.ai-study-profile-form {
display: grid;
gap: 13px;
}
.ai-study-profile-readonly-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-study-profile-readonly-grid label:last-child {
grid-column: 1 / -1;
}
.ai-study-profile-card label {
display: flex;
flex-direction: column;
gap: 7px;
font-weight: 900;
color: #334155;
}
.ai-study-profile-card input,
.ai-study-profile-card textarea,
.ai-study-profile-card select {
width: 100%;
min-height: 44px;
border-radius: 14px;
border: 1px solid #dbe3ef;
background: #ffffff;
color: #0f172a;
padding: 10px 12px;
box-sizing: border-box;
}
.ai-study-profile-card input[readonly],
.ai-study-profile-card textarea[readonly] {
background: #f1f5f9;
color: #64748b;
cursor: not-allowed;
}
.ai-study-profile-note {
padding: 10px 12px;
border-radius: 14px;
background: #f8fafc;
color: #64748b;
font-weight: 800;
font-size: 12px;
}
.ai-study-profile-notice {
padding: 12px 14px;
border-radius: 16px;
font-weight: 900;
border: 1px solid transparent;
}
.ai-study-profile-notice.is-success {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
.ai-study-profile-notice.is-error {
background: #fef2f2;
color: #b91c1c;
border-color: #fecaca;
}
[data-theme="dark"] .ai-study-profile-hero-card,
[data-theme="dark"] .ai-study-profile-card {
background: rgba(15, 23, 42, 0.94);
border-color: rgba(148, 163, 184, 0.22);
}
[data-theme="dark"] .ai-study-profile-card input,
[data-theme="dark"] .ai-study-profile-card textarea {
background: #111827;
color: #f8fafc;
border-color: #334155;
}
[data-theme="dark"] .ai-study-profile-card input[readonly],
[data-theme="dark"] .ai-study-profile-card textarea[readonly] {
background: #0f172a;
color: #94a3b8;
}
[data-theme="dark"] .ai-study-profile-hero-card p,
[data-theme="dark"] .ai-study-profile-note {
color: #cbd5e1;
}
@media (max-width: 900px) {
.ai-study-profile-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.ai-study-profile-hero-card {
align-items: flex-start;
flex-direction: column;
padding: 16px;
}
.ai-study-profile-readonly-grid {
grid-template-columns: 1fr;
}
.ai-study-profile-hero-card h3 {
font-size: 23px;
}
} .ai-study-auth-grid.ai-study-auth-grid-single {
grid-template-columns: minmax(280px, 560px) !important;
justify-content: center;
}
.ai-study-recovery-card {
border: 1px solid rgba(59, 130, 246, 0.16) !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}
.ai-study-recovery-card .ai-study-recovery-text {
margin: -6px 0 14px;
font-size: 13px;
line-height: 1.45;
}
.ai-study-auth-card .ai-study-auth-select {
width: 100%;
border: 1px solid #d6e2f5;
border-radius: 14px;
padding: 12px 14px;
background: #fff;
color: #0f172a;
font-weight: 700;
outline: none;
}
.ai-study-recovery-button,
.ai-study-auth-link-button {
width: 100%;
justify-content: center;
text-align: center;
text-decoration: none !important;
}
.ai-study-auth-notice.is-error {
background: #fff1f2 !important;
color: #991b1b !important;
border-color: #fecdd3 !important;
}
@media (min-width: 900px) {
.ai-study-auth-grid {
align-items: stretch;
}
}
.ai-study-credit-balance-pill {
display: inline-flex;
align-items: center;
width: fit-content;
border-radius: 999px;
padding: 6px 12px;
margin: 6px 0 12px;
font-size: 12px;
font-weight: 900;
background: rgba(34, 197, 94, 0.12);
color: #166534;
border: 1px solid rgba(34, 197, 94, 0.25);
}
.ai-study-credit-pack-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 12px;
}
.ai-study-credit-pack-card {
border-radius: 18px;
padding: 14px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.ai-study-credit-pack-card strong,
.ai-study-credit-pack-card small {
display: block;
}
.ai-study-credit-pack-card small {
color: var(--muted, #64748b);
font-weight: 700;
margin-top: 4px;
}
html[data-theme="dark"] .ai-study-credit-pack-card {
background: rgba(15, 23, 42, 0.72);
border-color: rgba(148, 163, 184, 0.22);
}
html[data-theme="dark"] .ai-study-credit-balance-pill {
color: #bbf7d0;
}
.ai-study-credit-inline {
display: inline-flex;
width: fit-content;
margin: 4px 0 6px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
background: rgba(59, 130, 246, 0.10);
color: #1d4ed8;
border: 1px solid rgba(59, 130, 246, 0.18);
}
html[data-theme="dark"] .ai-study-credit-inline { color: #bfdbfe; }.ai-study-teacher-dashboard {
--teacher-accent: #7C3AED;
--teacher-accent-soft: #EDE9FE;
--teacher-accent-border: #C4B5FD;
--teacher-sidebar-width: 280px;
} .ai-study-teacher-dashboard .ai-study-shell {
display: grid !important;
grid-template-columns: var(--teacher-sidebar-width) minmax(0, 1fr) !important;
grid-template-areas: 'teacher-sidebar teacher-main';
min-height: 720px;
overflow: visible !important;
background: var(--section-bg) !important;
border: 1px solid var(--card-border) !important;
border-radius: var(--radius-lg, 16px) !important;
box-shadow: var(--shadow, 0 12px 30px rgba(15, 23, 42, 0.08)) !important;
position: relative;
isolation: isolate;
}
.ai-study-teacher-dashboard .ai-study-tabs.ai-study-teacher-sidebar {
display: flex;
flex-direction: column;
grid-area: teacher-sidebar;
min-height: 0;
max-height: none;
padding: 14px;
overflow: hidden;
background: var(--section-bg) !important;
border-right: 1px solid var(--card-border) !important;
box-shadow: none !important;
position: relative;
z-index: 20;
pointer-events: auto !important;
}
.ai-study-teacher-dashboard .ai-study-teacher-profile {
flex: 0 0 auto;
margin-bottom: 12px;
}
.ai-study-teacher-dashboard .ai-study-teacher-nav {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-height: 0;
max-height: calc(100vh - 260px);
overflow-x: hidden;
overflow-y: auto;
padding-right: 4px;
-webkit-overflow-scrolling: touch;
pointer-events: auto !important;
}
.ai-study-teacher-dashboard .ai-study-teacher-tab {
display: flex !important;
align-items: flex-start;
gap: 10px;
width: 100%;
min-height: 44px;
margin: 0 !important;
padding: 10px 12px !important;
overflow: visible !important;
white-space: normal !important;
text-align: left !important;
line-height: 1.35 !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
background: transparent !important;
color: var(--text-secondary) !important;
box-shadow: none !important;
transform: none !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
pointer-events: auto !important;
touch-action: manipulation;
position: relative;
z-index: 3;
-webkit-tap-highlight-color: transparent;
}
.ai-study-teacher-dashboard .ai-study-teacher-tab::before {
display: none !important;
}
.ai-study-teacher-dashboard .ai-study-teacher-tab:hover {
background: var(--sidebar-hover-bg, #f1f5f9) !important;
color: var(--teacher-accent) !important;
border-color: var(--teacher-accent-border) !important;
transform: none !important;
}
.ai-study-teacher-dashboard .ai-study-teacher-tab.is-active,
.ai-study-teacher-dashboard .ai-study-teacher-tab.active {
background: var(--teacher-accent-soft) !important;
color: var(--teacher-accent) !important;
border-color: var(--teacher-accent-border) !important;
font-weight: 700 !important;
box-shadow: none !important;
}
.ai-study-teacher-dashboard .ai-study-teacher-tab .icon {
flex: 0 0 24px;
width: 24px;
text-align: center;
line-height: 1.2;
font-size: 16px;
}
.ai-study-teacher-dashboard .ai-study-teacher-tab .title {
display: block !important;
flex: 1 1 auto;
min-width: 0;
overflow: visible !important;
text-overflow: unset !important;
white-space: normal !important;
line-height: 1.35 !important;
word-break: break-word;
}
.ai-study-teacher-dashboard .ai-study-teacher-main {
grid-area: teacher-main;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
z-index: 1;
pointer-events: auto;
}
.ai-study-teacher-dashboard .ai-study-teacher-panel.is-active {
display: block;
}
.ai-study-teacher-dashboard .ai-study-teacher-badge {
display: inline-block;
margin: 8px 0;
padding: 4px 12px;
border-radius: 999px;
background: var(--teacher-accent-soft);
color: var(--teacher-accent);
font-size: 12px;
font-weight: 800;
}
.ai-study-teacher-sidebar {
border-right: 1px solid var(--card-border);
}
.ai-study-teacher-mobile-menu .ai-study-teacher-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 88px;
padding: 12px 8px;
overflow: visible;
text-align: center;
pointer-events: auto !important;
cursor: pointer !important;
touch-action: manipulation;
}
.ai-study-teacher-mobile-menu .ai-study-teacher-tab .title {
display: block;
font-size: 12px;
line-height: 1.25;
overflow: visible;
white-space: normal;
}
.ai-study-teacher-tab.is-premium .title::after {
content: ' ★';
color: #F59E0B;
font-size: 11px;
}
.ai-study-teacher-tab .icon {
flex-shrink: 0;
width: 28px;
text-align: center;
}
.ai-study-teacher-stat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.ai-study-teacher-ai-box {
padding: 16px;
border-radius: 14px;
border: 1px solid var(--teacher-accent-border);
background: color-mix(in srgb, var(--teacher-accent) 8%, var(--card-bg));
}
.ai-study-teacher-ai-box strong {
display: block;
margin-bottom: 6px;
color: var(--teacher-accent);
}
.ai-study-teacher-input-window {
margin: 16px 0;
padding: 16px;
border-radius: 14px;
border: 1px solid var(--card-border);
background: var(--card-bg);
}
.ai-study-teacher-input-hint {
margin: 0 0 12px;
font-size: 13px;
}
.ai-study-teacher-upload-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.ai-study-teacher-dashboard .ai-study-camera-voice-bar {
margin-bottom: 14px;
}
.ai-study-teacher-camera-preview {
margin: 12px 0;
}
.ai-study-teacher-camera-preview[hidden] {
display: none !important;
}
.ai-study-teacher-dashboard .ai-study-upload-button--secondary {
background: var(--teacher-accent-soft);
border-color: var(--teacher-accent-border);
color: var(--teacher-accent);
}
.ai-study-teacher-tool-form {
display: grid;
gap: 12px;
margin: 16px 0;
}
.ai-study-teacher-prompt-label textarea {
min-height: 110px;
width: 100%;
}
@media (max-width: 768px) {
.ai-study-teacher-upload-row {
flex-direction: column;
}
.ai-study-teacher-upload-row .ai-study-upload-button {
width: 100%;
justify-content: center;
}
} .ai-study-digital-diary .ai-study-diary-book {
margin: 16px 0;
padding: 18px;
border-radius: 14px;
border: 2px solid color-mix(in srgb, var(--teacher-accent) 35%, var(--card-border));
background: linear-gradient(180deg, color-mix(in srgb, var(--teacher-accent) 6%, var(--card-bg)) 0%, var(--card-bg) 100%);
}
.ai-study-diary-book__header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.ai-study-diary-book__badge {
font-weight: 700;
font-size: 15px;
color: var(--teacher-accent);
}
.ai-study-diary-date-label input {
max-width: 180px;
}
.ai-study-teacher-api-hint {
margin: 0 0 12px;
font-size: 12px;
color: var(--teacher-accent, #4f46e5);
}
.ai-study-diary-autofill-hint {
margin: 0 0 10px;
font-size: 13px;
}
.ai-study-diary-autofill-btn {
margin: 0 0 16px;
}
.ai-study-diary-note-block {
margin-top: 8px;
padding: 14px;
border-radius: 12px;
border: 2px solid #f59e0b;
background: #fffbeb;
}
.ai-study-diary-note-label strong {
display: block;
font-size: 1.05rem;
color: #b45309;
margin-bottom: 4px;
}
.ai-study-diary-note-label .ai-study-muted {
display: block;
margin-bottom: 8px;
font-size: 12px;
}
.ai-study-diary-actions {
margin: 12px 0 20px;
}
.ai-study-diary-status {
margin: 8px 0 0;
min-height: 1.2em;
}
.ai-study-diary-share-panel {
margin: 20px 0;
padding: 16px;
border-radius: 14px;
border: 1px solid var(--card-border);
background: var(--card-bg);
}
.ai-study-diary-share-panel h3,
.ai-study-diary-list-wrap h3 {
margin: 0 0 10px;
font-size: 1.05rem;
}
.ai-study-diary-share-audience {
border: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.ai-study-diary-share-audience legend {
width: 100%;
font-weight: 600;
margin-bottom: 6px;
}
.ai-study-diary-share-url-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.ai-study-diary-share-url {
flex: 1 1 200px;
min-width: 0;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--card-border);
background: var(--input-bg, #fff);
font-size: 13px;
}
.ai-study-diary-share-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ai-study-diary-list {
display: grid;
gap: 10px;
}
.ai-study-diary-list-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--card-border);
background: var(--card-bg);
}
.ai-study-diary-list-item__meta strong {
display: block;
}
.ai-study-diary-list-item__meta span {
font-size: 12px;
color: var(--muted-text, #64748b);
}
.ai-study-diary-list-item__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-study-diary-badge-shared {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, #22c55e 15%, transparent);
color: #15803d;
margin-left: 6px;
}
@media (max-width: 768px) {
.ai-study-diary-share-url-row {
flex-direction: column;
}
.ai-study-diary-share-url-row .ai-study-secondary-button {
width: 100%;
}
}
.ai-study-teacher-soon {
font-size: 12px;
margin: 0;
}
.ai-study-teacher-backup-bar {
margin: 0 0 16px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid var(--card-border);
background: linear-gradient(135deg, color-mix(in srgb, var(--teacher-accent) 8%, var(--card-bg)), var(--card-bg));
}
.ai-study-usage-upgrade-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 16px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid #fbbf24;
background: linear-gradient(135deg, #fffbeb, #fff);
}
.ai-study-usage-upgrade-banner.is-exhausted {
border-color: #f87171;
background: linear-gradient(135deg, #fef2f2, #fff);
}
.ai-study-usage-upgrade-banner__body strong {
display: block;
margin-bottom: 4px;
}
.ai-study-usage-upgrade-banner__body p {
margin: 0;
font-size: 13px;
color: var(--muted-text, #64748b);
}
.ai-study-teacher-usage-card {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 14px;
border: 1px solid var(--card-border);
border-radius: 14px;
background: var(--card-bg);
}
.ai-study-teacher-usage-card .ai-study-usage-meter {
flex: 1 1 240px;
margin: 0;
}
.ai-study-teacher-profile .ai-study-usage-block--desktop,
.ai-study-teacher-dashboard .ai-study-user-info .ai-study-usage-block--desktop {
width: 100%;
margin-top: 0;
}
.ai-study-usage-upgrade-btn {
width: 100%;
margin-top: 4px;
}
.ai-study-teacher-school-hub .ai-study-teacher-share-bar,
.ai-study-teacher-school-hub .ai-study-teacher-backup-bar {
margin-bottom: 16px;
}
.ai-study-teacher-profile .ai-study-usage-meter {
margin: 12px 0;
width: 100%;
}
.ai-study-teacher-subscription .ai-study-subscription-grid {
margin-top: 12px;
}
.ai-study-teacher-share-bar {
margin: 0 0 16px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid var(--teacher-accent-border, #c4b5fd);
background: linear-gradient(135deg, color-mix(in srgb, #2563eb 6%, var(--card-bg)), var(--card-bg));
}
.ai-study-teacher-share-bar__head span {
display: block;
font-weight: 700;
}
.ai-study-teacher-share-bar__head small {
color: var(--muted-text, #64748b);
font-size: 12px;
}
.ai-study-teacher-share-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.ai-study-teacher-share-grid label,
.ai-study-teacher-share-message {
display: grid;
gap: 6px;
font-size: 13px;
}
.ai-study-teacher-share-uploads {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 12px 0;
}
.ai-study-teacher-share-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ai-study-teacher-share-result {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.ai-study-output-window__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-study-student-inbox {
margin: 20px 0;
padding: 16px;
border: 1px solid var(--card-border);
border-radius: 14px;
background: var(--card-bg);
}
.ai-study-student-inbox-item {
padding: 12px 0;
border-bottom: 1px solid var(--card-border);
}
.ai-study-student-inbox-item:last-child {
border-bottom: 0;
}
@media (max-width: 768px) {
.ai-study-teacher-share-grid {
grid-template-columns: 1fr;
}
}
.ai-study-teacher-backup-bar__title span {
display: block;
font-weight: 700;
}
.ai-study-teacher-backup-bar__title small {
color: var(--muted-text, #64748b);
font-size: 12px;
}
.ai-study-teacher-backup-bar__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.ai-study-backup-email-input {
min-width: 200px;
flex: 1 1 180px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid var(--card-border);
}
.ai-study-backup-auto-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.ai-study-student-lookup-card--global {
position: sticky;
top: 8px;
z-index: 20;
margin: 0 0 12px;
padding: 12px 14px;
border-radius: 12px;
border: 2px solid var(--teacher-accent-border);
background: #eff6ff;
}
.ai-study-register-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.ai-study-register-search {
flex: 1 1 200px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--card-border);
}
.ai-study-register-layout {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 16px;
}
.ai-study-register-list-wrap {
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 12px;
max-height: 520px;
overflow: auto;
}
.ai-study-register-list-item {
display: block;
width: 100%;
text-align: left;
margin: 0 0 8px;
padding: 10px;
border-radius: 10px;
border: 1px solid var(--card-border);
background: var(--card-bg);
color: var(--text-primary) !important;
cursor: pointer;
}
.ai-study-register-list-item strong {
display: block;
color: var(--heading, var(--text-primary));
}
.ai-study-register-list-item span {
font-size: 12px;
color: var(--muted-text, #64748b);
}
.ai-study-register-form-wrap {
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 14px;
color: var(--text-primary);
}
.ai-study-register-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.ai-study-register-tabs button {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--card-border);
background: var(--card-bg);
color: var(--text-primary) !important;
font-size: 13px;
font-weight: 600;
line-height: 1.25;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.ai-study-register-tabs button:hover {
background: var(--card-hover-bg);
border-color: var(--teacher-accent-border);
color: var(--teacher-accent) !important;
}
.ai-study-register-tabs button.is-active {
background: var(--teacher-accent);
color: #fff !important;
border-color: var(--teacher-accent);
}
.ai-study-register-grid label,
.ai-study-register-inline-row label {
color: var(--text-secondary) !important;
font-weight: 600;
}
.ai-study-register-grid input,
.ai-study-register-grid select,
.ai-study-register-grid textarea,
.ai-study-register-inline-row input,
.ai-study-register-inline-row select,
.ai-study-register-search {
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
color: var(--text-primary) !important;
border-radius: 10px;
}
.ai-study-register-grid input::placeholder,
.ai-study-register-inline-row input::placeholder,
.ai-study-register-search::placeholder {
color: var(--text-secondary);
opacity: 0.9;
}
.ai-study-register-log-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--card-border);
font-size: 13px;
color: var(--text-primary);
}
.ai-study-register-log-row span {
color: var(--text-secondary);
}
.ai-study-register-log-row strong {
color: var(--text-primary);
} html[data-theme="light"] .ai-study-teacher-dashboard .ai-study-register-tabs button:not(.is-active),
html:not([data-theme]) .ai-study-teacher-dashboard .ai-study-register-tabs button:not(.is-active),
.ai-study-teacher-dashboard[data-ai-study-theme="light"] .ai-study-register-tabs button:not(.is-active) {
color: #0F172A !important;
background: #FFFFFF !important;
border-color: #CBD5E1 !important;
}
html[data-theme="light"] .ai-study-teacher-dashboard .ai-study-register-tabs button:not(.is-active):hover,
html:not([data-theme]) .ai-study-teacher-dashboard .ai-study-register-tabs button:not(.is-active):hover,
.ai-study-teacher-dashboard[data-ai-study-theme="light"] .ai-study-register-tabs button:not(.is-active):hover {
color: var(--teacher-accent) !important;
background: var(--teacher-accent-soft) !important;
border-color: var(--teacher-accent-border) !important;
} html[data-theme="dark"] .ai-study-teacher-dashboard .ai-study-register-tabs button:not(.is-active),
.ai-study-teacher-dashboard[data-ai-study-theme="dark"] .ai-study-register-tabs button:not(.is-active) {
color: #EAF2FF !important;
background: var(--card-bg) !important;
border-color: var(--card-border) !important;
}
.ai-study-register-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ai-study-register-grid label {
display: grid;
gap: 6px;
font-size: 13px;
}
.ai-study-register-full {
grid-column: 1 / -1;
}
.ai-study-register-inline-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
@media (max-width: 900px) {
.ai-study-register-layout {
grid-template-columns: 1fr;
}
.ai-study-register-grid {
grid-template-columns: 1fr;
}
}
.ai-study-teacher-mobile-menu {
display: none;
} .ai-study-portal-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 0 20px;
padding: 6px;
border-radius: 16px;
background: var(--card-active-bg, #f1f5f9);
border: 1px solid var(--card-border, #e2e8f0);
}
.ai-study-portal-switch__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 10px 12px;
border: 2px solid transparent;
border-radius: 12px;
background: transparent;
color: var(--text-secondary, #64748b);
font-size: 14px;
font-weight: 800;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ai-study-portal-switch__btn.is-active {
background: var(--card-bg, #fff);
border-color: var(--primary, #2563EB);
color: var(--primary, #2563EB);
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}
.ai-study-portal-switch__btn[data-ai-study-portal-option="teacher"].is-active {
border-color: var(--teacher-accent);
color: var(--teacher-accent);
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
}
.ai-study-portal-gate {
max-width: 520px;
margin: 40px auto;
padding: 24px;
border-radius: 16px;
background: var(--card-bg);
border: 1px solid var(--card-border);
text-align: center;
}
.ai-study-portal-gate__actions {
margin: 16px 0 10px;
}
html[data-theme="dark"] .ai-study-teacher-dashboard,
.ai-study-dashboard[data-ai-study-theme="dark"] .ai-study-teacher-dashboard {
--teacher-accent-soft: #4C1D95;
} .ai-study-live-class-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.ai-study-live-class-schedule,
.ai-study-live-class-list-wrap {
padding: 16px;
border: 1px solid var(--card-border, #dce4ec);
border-radius: 16px;
background: var(--card-bg, #fff);
}
.ai-study-live-class-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.ai-study-live-class-form-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.ai-study-live-class-list {
display: grid;
gap: 10px;
max-height: 420px;
overflow-y: auto;
}
.ai-study-live-class-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px;
border: 1px solid var(--card-border, #e4eaf1);
border-radius: 12px;
background: var(--section-bg, #f8fafc);
}
.ai-study-live-class-item__body {
display: grid;
gap: 4px;
min-width: 0;
flex: 1 1 180px;
}
.ai-study-live-class-item__actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ai-study-live-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
background: #e2e8f0;
color: #334155;
}
.ai-study-live-badge--live {
background: #fee2e2;
color: #b91c1c;
animation: aiStudyLivePulse 1.5s ease-in-out infinite;
}
.ai-study-live-badge--scheduled {
background: #dbeafe;
color: #1d4ed8;
}
@keyframes aiStudyLivePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
.ai-study-live-room {
margin-top: 16px;
padding: 14px;
border: 2px solid #6366f1;
border-radius: 16px;
background: #0f172a;
}
.ai-study-live-room__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
color: #f8fafc;
}
.ai-study-live-room__head .ai-study-muted {
color: #cbd5e1;
}
.ai-study-live-room__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ai-study-live-room__frame {
width: 100%;
min-height: 420px;
height: min(70vh, 640px);
border-radius: 12px;
overflow: hidden;
background: #111827;
}
.ai-study-live-room-hint {
margin: 10px 0 0;
color: #94a3b8 !important;
font-size: 12px;
}
.ai-study-live-end-btn {
border-color: #fca5a5 !important;
color: #fecaca !important;
}
.ai-study-student-live-class {
margin-bottom: 18px;
padding: 16px;
border: 1px solid var(--card-border, #dce4ec);
border-radius: 16px;
background: linear-gradient(135deg, #eef2ff, #fff);
}
.ai-study-student-live-class__head h3 {
margin: 0 0 4px;
}
.ai-study-student-live-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
.ai-study-student-live-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px;
border-radius: 12px;
background: #fff;
border: 1px solid #e2e8f0;
}
.ai-study-live-room--student {
margin-top: 12px;
}
@media (max-width: 768px) {
.ai-study-teacher-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-study-teacher-mobile-menu {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.ai-study-teacher-sidebar {
display: none !important;
}
.ai-study-live-class-grid {
grid-template-columns: 1fr;
}
.ai-study-live-class-form-row {
grid-template-columns: 1fr;
}
.ai-study-live-room__frame {
min-height: 320px;
height: 55vh;
}
}
@media (max-width: 480px) {
.ai-study-portal-switch {
grid-template-columns: 1fr;
}
.ai-study-teacher-stat-grid {
grid-template-columns: 1fr;
}
}