/* Samio system theme — logo colors softened with the aqua, coral, cream and leaf tones from the current learning scene. */
:root {
  --samio-blue: #2aaeb8;
  --samio-blue-bright: #76dadd;
  --samio-blue-deep: #1b8d95;
  --samio-blue-soft: #e8fbfa;
  --samio-pink: #ee7988;
  --samio-pink-bright: #ff9aab;
  --samio-pink-soft: #fff0f3;
  --samio-yellow: #ffd76f;
  --samio-yellow-soft: #fff8e8;
  --samio-leaf: #78a968;
  --samio-leaf-soft: #eef8e9;
  --samio-ink: #17383b;
  --samio-muted: #647f80;
  --samio-bg: #f7fdfc;
  --samio-border: #cfeeed;
  --samio-shadow: 0 14px 34px rgba(42, 174, 184, .12);
  --background-static: var(--samio-blue);
  --background-hover: var(--samio-yellow);
  --color-red: var(--samio-pink);
  --color-hover: var(--samio-pink);
  --accent: var(--samio-yellow);
  --button-action: var(--samio-pink);
  --button-action-hover: #df6576;
  --button-cta: var(--samio-yellow);
  --button-cta-hover: #ffc74d;
  --highlight: var(--samio-pink-bright);
  --accent-2: var(--samio-pink-bright);
  --color-green: var(--samio-leaf);
  --color-dark-green: #5f8f50;
  --bs-primary: var(--samio-blue);
  --bs-info: var(--samio-blue);
  --bs-success: var(--samio-leaf);
  --bs-warning: var(--samio-yellow);
  --bs-danger: var(--samio-pink);
  --bg: var(--samio-bg);
  --border: var(--samio-border);
}

::selection { background: var(--samio-pink); color: #fff; }
body {
  color: var(--samio-ink);
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 248, 232, .9) 0, rgba(255, 248, 232, 0) 30%),
    radial-gradient(circle at 86% 0, rgba(255, 240, 243, .8) 0, rgba(255, 240, 243, 0) 28%),
    linear-gradient(180deg, #f7fdfc 0%, #eefbfa 54%, #fff8f4 100%);
  background-color: var(--samio-bg);
}
a { color: var(--samio-blue); }
a:hover { color: var(--samio-blue-deep); }

.btn-primary,
.button-primary,
.bg-primary,
.badge-primary,
button[type="submit"]:not(.btn-danger):not(.btn-warning) {
  color: #fff !important;
  background: linear-gradient(100deg, var(--samio-blue) 0%, var(--samio-blue-bright) 62%, var(--samio-pink) 115%) !important;
  border-color: var(--samio-blue) !important;
  box-shadow: 0 10px 22px rgba(42, 174, 184, .18) !important;
}
.btn-primary:hover,
.button-primary:hover,
button[type="submit"]:not(.btn-danger):not(.btn-warning):hover {
  filter: brightness(.94);
}
.btn-outline-primary {
  color: var(--samio-blue) !important;
  border-color: var(--samio-blue) !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background: var(--samio-blue) !important;
}
.btn-warning,
.badge-warning,
.bg-warning {
  color: #5c4305 !important;
  background: var(--samio-yellow) !important;
  border-color: var(--samio-yellow) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--samio-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(118, 218, 221, .24) !important;
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--samio-pink); }

.card,
.modal-content,
.content-card,
.panel,
.list-card,
.tool-card {
  border-color: var(--samio-border) !important;
  box-shadow: var(--samio-shadow);
}
.nav-tabs .nav-link.active {
  color: var(--samio-blue) !important;
  border-bottom-color: var(--samio-pink) !important;
}
.page-item.active .page-link,
.pagination .active > a {
  color: #fff !important;
  background: var(--samio-blue) !important;
  border-color: var(--samio-blue) !important;
}
.progress-bar { background: linear-gradient(90deg, var(--samio-blue), var(--samio-pink)) !important; }

/* Public navigation */
.menu-account,
.header-account,
.header-wrapper {
  border-color: var(--samio-border) !important;
}
.menu-account .active > a,
.menu-account a:hover,
.menu-account .menu-active {
  color: var(--samio-blue) !important;
}

/* Teacher, class, task-bank, gradebook and vocabulary sidebars */
.teacher-portal-sidebar,
.gradebook-sidebar,
.vocab-sidebar {
  color: #fff !important;
  background: linear-gradient(180deg, var(--samio-blue-deep) 0%, var(--samio-blue) 58%, #58c7c8 100%) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  box-shadow: 8px 12px 30px rgba(27, 141, 149, .18) !important;
}
.teacher-sidebar-head,
.gradebook-sidebar-head,
.vocab-sidebar-head,
.teacher-sidebar-footer,
.gradebook-sidebar-footer,
.vocab-sidebar-footer {
  border-color: rgba(255, 255, 255, .18) !important;
}
.teacher-sidebar-logo,
.teacher-sidebar-brand,
.gradebook-brand,
.vocab-sidebar-brand,
.teacher-sidebar-logo strong,
.teacher-sidebar-brand strong,
.gradebook-brand strong,
.vocab-sidebar-brand strong {
  color: #fff !important;
}
.teacher-sidebar-logo > span,
.teacher-sidebar-brand > span,
.gradebook-brand > span,
.vocab-sidebar-brand > span {
  overflow: hidden;
  background: #fff !important;
  border: 2px solid rgba(255, 255, 255, .78);
}
.teacher-sidebar-nav a,
.teacher-sidebar-footer a,
.gradebook-sidebar-nav a,
.gradebook-sidebar-footer a,
.vocab-sidebar-nav a,
.vocab-sidebar-footer a {
  color: rgba(255, 255, 255, .86) !important;
}
.teacher-sidebar-nav a:hover,
.teacher-sidebar-footer a:hover,
.gradebook-sidebar-nav a:hover,
.gradebook-sidebar-footer a:hover,
.vocab-sidebar-nav a:hover,
.vocab-sidebar-footer a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
}
.teacher-sidebar-nav a.is-active,
.gradebook-sidebar-nav a.is-active,
.vocab-sidebar-nav a.is-active {
  color: #fff !important;
  background: linear-gradient(100deg, var(--samio-pink) 0%, var(--samio-pink-bright) 100%) !important;
  box-shadow: inset 3px 0 0 var(--samio-yellow), 0 7px 18px rgba(120, 36, 51, .16) !important;
}
.teacher-sidebar-collapse,
.gradebook-sidebar-toggle,
.vocab-sidebar-toggle {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .1) !important;
}
.teacher-sidebar-collapse:hover,
.gradebook-sidebar-toggle:hover,
.vocab-sidebar-toggle:hover {
  color: #513900 !important;
  background: var(--samio-yellow) !important;
  border-color: var(--samio-yellow) !important;
}

/* Learning modules */
.listening-shell,
.reading-shell,
.speaking-shell,
.dictation-shell,
.writing-shell {
  --primary: var(--samio-blue);
  --primary-color: var(--samio-blue);
  --accent-color: var(--samio-pink);
}
.listening-header,
.reading-header,
.speaking-header,
.dictation-header,
.writing-header {
  border-color: var(--samio-border) !important;
}
.answer-option.is-selected,
.question-option.is-selected,
.resource-item.selected {
  background: var(--samio-blue-soft) !important;
  border-color: var(--samio-blue) !important;
}
.is-correct,
.result-correct { box-shadow: inset 4px 0 0 var(--samio-yellow); }

/* Friendly highlight surfaces */
.highlight,
.notice-info,
.callout-info {
  border-color: var(--samio-blue-bright) !important;
  background: var(--samio-blue-soft) !important;
}
.notice-accent,
.feature-badge {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
}

/* Main Samio writing workspace */
.menu,
.active-menu-mobile,
.menu ul li ul,
.user-dropdown-menu {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--samio-border) !important;
  box-shadow: 0 10px 28px rgba(42, 174, 184, .1) !important;
  backdrop-filter: blur(12px);
}
.menu ul li a.menu-item-primary,
.menu ul li.menu-has-active > a,
.menu ul li a.active,
.menu ul li a:hover,
.menu ul li ul li a.active,
.menu ul li ul li:hover > a,
.menu ul li ul li.menu-dropdown-divider a {
  color: var(--samio-blue-deep) !important;
}
.menu ul li a.active,
.menu ul li a:hover,
.menu ul li.menu-has-active > a {
  border-bottom-color: var(--samio-pink) !important;
}
.menu ul li a.has-child:hover:after,
.menu ul li a.has-child.active:after,
.menu ul li.menu-has-active > a.has-child:after,
.menu ul li ul li:hover > a.has-child:after {
  border-color: var(--samio-pink) !important;
}
.user-head a span,
.user-dropdown-toggle {
  border-color: var(--samio-border) !important;
  color: var(--samio-blue-deep) !important;
  background: rgba(232, 251, 250, .76) !important;
}
.user-head a:hover span,
.user-dropdown-toggle:hover {
  color: #fff !important;
  background: linear-gradient(100deg, var(--samio-blue), var(--samio-pink)) !important;
}
.wrap-task .wrap-content,
.wrap-pane .wrap-content {
  position: relative;
}
.task-container {
  color: var(--samio-ink) !important;
  background:
    linear-gradient(115deg, rgba(232, 251, 250, .95) 0%, rgba(255, 248, 232, .92) 56%, rgba(255, 240, 243, .9) 100%) !important;
  border: 1px solid var(--samio-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--samio-shadow) !important;
}
.task-left strong {
  color: var(--samio-blue-deep) !important;
}
.task-left p,
.task-field label,
.checkbox {
  color: var(--samio-muted) !important;
}
.dropdown-selected,
.task-field select {
  color: var(--samio-ink) !important;
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--samio-border) !important;
  box-shadow: 0 6px 18px rgba(42, 174, 184, .08);
}
.dropdown-selected:hover,
.dropdown.open .dropdown-selected {
  border-color: var(--samio-blue) !important;
}
.dropdown-list {
  border-color: var(--samio-border) !important;
  box-shadow: 0 14px 28px rgba(42, 174, 184, .14) !important;
}
.dropdown-list li:hover,
.dropdown-list li.active {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
}
input[type="checkbox"] {
  border-color: #9bcfca !important;
  background: #fff !important;
}
input[type="checkbox"]:checked {
  border-color: var(--samio-pink) !important;
  background: var(--samio-pink) !important;
}
.split-container {
  background: rgba(255, 255, 255, .84) !important;
  border-bottom-color: var(--samio-border) !important;
}
.split-resizer:after {
  background: linear-gradient(180deg, transparent, var(--samio-border), transparent) !important;
}
.split-resizer img {
  background: #fffaf8 !important;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(42, 174, 184, .12);
}
.input-area {
  color: var(--samio-ink) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfffe 100%) !important;
  border-color: var(--samio-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}
.input-area:focus {
  border-color: var(--samio-blue) !important;
  box-shadow: 0 0 0 4px rgba(118, 218, 221, .26) !important;
}
.input-area::placeholder {
  color: #91aaab !important;
}
.count-pane,
.word-count {
  color: var(--samio-muted) !important;
}
.left-title,
.right-title {
  color: var(--samio-blue-deep) !important;
}
.left-upload-area,
.right-upload-area,
.upload-box {
  color: var(--samio-muted) !important;
  background: linear-gradient(180deg, var(--samio-blue-soft) 0%, #fffdf9 100%) !important;
  border-color: #9bdcda !important;
}
.left-upload-area p,
.right-upload-area p {
  color: var(--samio-muted) !important;
}
.left-upload-area:hover,
.right-upload-area:hover,
.upload-box:hover {
  border-color: var(--samio-pink) !important;
  background: linear-gradient(180deg, #fff8fb 0%, var(--samio-blue-soft) 100%) !important;
}
.box-sample a,
.submit-btn {
  color: #fff !important;
  background: linear-gradient(100deg, var(--samio-pink) 0%, var(--samio-blue) 100%) !important;
  box-shadow: 0 12px 24px rgba(238, 121, 136, .22) !important;
}
.box-sample a:hover,
.submit-btn:hover {
  filter: brightness(.97);
  transform: translateY(-1px);
}
.box-upgrade a {
  color: #5c4305 !important;
  background: linear-gradient(100deg, var(--samio-yellow), #ffe49a) !important;
  box-shadow: 0 8px 16px rgba(255, 215, 111, .28);
}
.box-upgrade a:hover {
  color: #fff !important;
  background: linear-gradient(100deg, var(--samio-pink), var(--samio-blue)) !important;
}

/* Legacy module palette normalization */
.btn-info,
.badge-info,
.bg-info {
  color: #fff !important;
  background: var(--samio-blue) !important;
  border-color: var(--samio-blue) !important;
}
.btn-success,
.badge-success,
.bg-success {
  color: #fff !important;
  background: var(--samio-leaf) !important;
  border-color: var(--samio-leaf) !important;
}
.btn-danger,
.badge-danger,
.bg-danger {
  color: #fff !important;
  background: var(--samio-pink) !important;
  border-color: var(--samio-pink) !important;
}
.text-primary,
.text-info,
.link-primary {
  color: var(--samio-blue-deep) !important;
}
.text-success {
  color: #5f8f50 !important;
}
.text-danger {
  color: #b85c68 !important;
}
.text-warning {
  color: #9b6d12 !important;
}
.alert-info,
.notice-info,
.callout-info {
  color: var(--samio-blue-deep) !important;
  background: var(--samio-blue-soft) !important;
  border-color: #9bdcda !important;
}
.alert-success,
.notice-success {
  color: #4f7d42 !important;
  background: var(--samio-leaf-soft) !important;
  border-color: #bddfb3 !important;
}
.alert-warning,
.notice-warning {
  color: #7b590b !important;
  background: var(--samio-yellow-soft) !important;
  border-color: #ffe49a !important;
}
.alert-danger,
.notice-danger {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
  border-color: #ffc2ca !important;
}
.table th,
.table thead th {
  color: var(--samio-ink) !important;
  background: #f3fcfb !important;
  border-color: var(--samio-border) !important;
}
.table td,
.table tbody tr {
  border-color: var(--samio-border) !important;
}
.table tbody tr:hover {
  background: rgba(232, 251, 250, .55) !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
  background: var(--samio-blue) !important;
}

/* User menus and account surfaces */
.user-avatar-circle,
.user-avatar-circle-large {
  color: #fff !important;
  background: linear-gradient(135deg, var(--samio-blue), var(--samio-pink)) !important;
}
.badge-free {
  color: var(--samio-muted) !important;
  background: #eef8f7 !important;
}
.badge-pro {
  color: #5c4305 !important;
  background: linear-gradient(135deg, var(--samio-yellow), #ffe49a) !important;
}
.user-dropdown-header,
.user-dropdown-item:hover {
  background: #f3fcfb !important;
}
.user-name,
.user-name-large,
.user-dropdown-item:hover,
.user-dropdown-item:hover i {
  color: var(--samio-ink) !important;
}
.user-email,
.user-dropdown-item,
.user-dropdown-item i {
  color: var(--samio-muted) !important;
}
.user-dropdown-divider {
  background: var(--samio-border) !important;
}

/* History/stat cards */
.stats-heading,
.stats-chart-title,
.score-panel__caption {
  color: var(--samio-ink) !important;
}
.stats-heading i,
.score-panel__caption i {
  color: var(--samio-pink) !important;
}
.stat-card,
.stats-chart-box {
  border-color: var(--samio-border) !important;
  box-shadow: var(--samio-shadow) !important;
}
.stat-listening { --stat-color: var(--samio-blue) !important; }
.stat-reading { --stat-color: var(--samio-leaf) !important; }
.stat-writing { --stat-color: var(--samio-pink) !important; }
.stat-speaking { --stat-color: #f2bd45 !important; }

/* Writing result/report screens */
.card-result-task,
.detail-tabs,
.box,
.correction-item,
.criterion-feedback {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--samio-border) !important;
  box-shadow: var(--samio-shadow) !important;
}
.card-result-task.success-result-task,
.criterion-tips {
  background: linear-gradient(135deg, var(--samio-leaf-soft) 0%, #fff 100%) !important;
  border-color: #bddfb3 !important;
}
.criterion-tips,
.card-result-task.success-result-task {
  border-left-color: var(--samio-leaf) !important;
}
.score-result-task,
.criterion-header h3,
.section h4 {
  color: var(--samio-ink) !important;
}
.score-red-result-task,
.correction-original del,
.grammar-error-list .error-label {
  color: #9b4a56 !important;
}
.score-yellow-result-task,
.criterion-tips h4 i {
  color: #c28a1c !important;
}
.view-detail-hint,
.overall-comment h5 {
  color: var(--samio-blue-deep) !important;
}
.tab-btn.active,
.score-badge,
.progress-fill {
  color: #fff !important;
  background: linear-gradient(100deg, var(--samio-blue), var(--samio-pink)) !important;
}
.tab-btn,
.icon-pen-result-task,
.icon-refresh-result-task {
  color: var(--samio-muted) !important;
  background: #f3fcfb !important;
}
.grammar-error-item {
  background: var(--samio-yellow-soft) !important;
  border-left-color: var(--samio-yellow) !important;
}
.correction-original del {
  background: var(--samio-pink-soft) !important;
}
.correction-fixed ins {
  color: #4f7d42 !important;
  background: var(--samio-leaf-soft) !important;
}
.overall-comment {
  background: var(--samio-blue-soft) !important;
}
.badge-new-result-task {
  background: var(--samio-pink) !important;
}
input:checked + .slider,
.slider.is-active {
  background: var(--samio-leaf) !important;
}

/* Test player shells */
.listening-test-mode,
.reading-test-mode,
.speaking-test-mode,
.course-learn-mode {
  --listening-primary: var(--samio-blue);
  --listening-primary-dark: var(--samio-blue-deep);
  --listening-header: var(--samio-blue);
  --listening-header-dark: var(--samio-blue-deep);
  --reading-primary: var(--samio-blue);
  --reading-primary-dark: var(--samio-blue-deep);
  --reading-header: var(--samio-blue);
  --reading-header-dark: var(--samio-blue-deep);
  --speaking-primary: var(--samio-pink);
}
.reading-header,
.listening-header,
.test-panel__header,
.b1-listening-header,
.b1-reading-header {
  background: linear-gradient(100deg, var(--samio-blue-deep), var(--samio-blue)) !important;
}
.reading-header__logo,
.listening-header__logo,
.speaking-header__logo {
  filter: none !important;
}
.answer-option.is-correct,
.question-option.is-correct,
.review-correct,
.result-correct {
  color: #4f7d42 !important;
  background: var(--samio-leaf-soft) !important;
  border-color: #bddfb3 !important;
}
.answer-option.is-wrong,
.question-option.is-wrong,
.review-wrong,
.result-wrong {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
  border-color: #ffc2ca !important;
}

@media (max-width: 767px) {
  .card,
  .modal-content,
  .content-card { border-radius: 12px; }
}