/**
 * Easy Task UI framework (et-ui)
 * Theme variables (--et-*) are set inline from data/conf/business.php in common/header.html
 */
:root {
  --et-primary: #1fc78f;
  --et-accent: #f15959;
  --et-radius: 10px;
  --et-surface: rgba(195, 195, 195, 0.1);
  --et-border: #313238;
  --et-text: #e8e8e8;
  --et-text-muted: #989898;
  --et-text-dim: #6c6f76;
  --et-bar-bg: #27282c;
}

/* ------------------------------------------------------------------ */
/* Tabs — segmented control (active = green pill, inactive = dark)       */
/* ------------------------------------------------------------------ */
.et-tabs.layui-tab,
.et-tabs.layui-tab-brief {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
}

.et-tabs > .et-tabs__nav,
.et-tabs > .layui-tab-title {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px;
  height: auto;
  white-space: normal;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--et-radius);
  box-sizing: border-box;
}

.et-tabs > .et-tabs__nav > li,
.et-tabs > .layui-tab-title > li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  border-radius: calc(var(--et-radius) - 2px);
  background: transparent !important;
  color: var(--et-text-muted) !important;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.et-tabs > .et-tabs__nav > li .iconfont,
.et-tabs > .layui-tab-title > li .iconfont {
  font-size: 20px;
  color: inherit;
}

/* Active tab — must be clearly brighter than inactive */
.et-tabs > .et-tabs__nav > li.is-active,
.et-tabs > .et-tabs__nav > li.layui-this,
.et-tabs > .layui-tab-title > li.is-active,
.et-tabs > .layui-tab-title > li.layui-this {
  background: var(--et-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

/* Inactive must never look “selected” (no light grey pill) */
.et-tabs > .et-tabs__nav > li:not(.layui-this):not(.is-active),
.et-tabs > .layui-tab-title > li:not(.layui-this):not(.is-active) {
  background: transparent !important;
  color: var(--et-text-muted) !important;
}

.et-tabs > .et-tabs__panels,
.et-tabs > .layui-tab-content {
  padding: 0;
}

.et-tabs .et-tabs__panel,
.et-tabs .layui-tab-item {
  display: none;
}

.et-tabs .et-tabs__panel.is-active,
.et-tabs .et-tabs__panel.layui-show,
.et-tabs .layui-tab-item.is-active,
.et-tabs .layui-tab-item.layui-show {
  display: block !important;
}

/* ------------------------------------------------------------------ */
/* Surfaces, buttons, layout                                             */
/* ------------------------------------------------------------------ */
.mui-btn-primary {
  background-color: var(--et-primary) !important;
  border-color: var(--et-primary) !important;
}

.et-surface {
  background: var(--et-surface);
  border-radius: var(--et-radius);
}

.et-notice {
  margin: 12px 15px 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #c8cad0;
  background: rgba(31, 199, 143, 0.12);
  border-left: 3px solid var(--et-primary);
  border-radius: 0 var(--et-radius) var(--et-radius) 0;
}

.et-page-hint,
.task-page-hint,
.task-empty {
  color: var(--et-text-muted);
  font-size: 13px;
}

.task-level-link.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Page layout                                                         */
/* ------------------------------------------------------------------ */
.et-toolbar .mui-title {
  right: 48px;
  left: 48px;
}

.et-toolbar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  line-height: 44px;
  color: #fff;
  z-index: 2;
}

.et-toolbar__action .mui-icon {
  font-size: 20px;
}

.et-page-top {
  padding: 12px 16px 14px;
  background: var(--et-bar-bg);
  border-bottom: 1px solid var(--et-border);
}

.et-page-top__hint {
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--et-text-muted);
  text-align: center;
}

.et-page {
  padding: 16px 15px 24px;
}

.task_page.et-page {
  padding-top: 16px;
}

.et-page-hint {
  margin: 0 0 16px;
  line-height: 1.5;
}

.et-section {
  margin-bottom: 20px;
}

.et-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--et-text);
  line-height: 1.3;
}

.et-stats-block {
  padding: 14px 16px;
  margin-bottom: 20px;
}

.et-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.task_page .task_panel .et-stats-grid {
  display: grid !important;
  flex-wrap: unset;
}

.task_page .task_panel .et-stats-grid .col {
  flex: none !important;
  flex-basis: auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: calc(var(--et-radius) - 2px);
}

.et-stats-grid .col {
  text-align: center;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: calc(var(--et-radius) - 2px);
}

.et-stats-grid .col-name {
  font-size: 12px;
  color: var(--et-text-dim);
  margin-bottom: 4px;
}

.et-stats-grid .col-val {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--et-primary);
}

.et-stats-grid .col-val.red {
  color: var(--et-accent);
}

.et-stats-grid .col-val.gray {
  color: var(--et-text-muted);
}

.et-stats-grid .col-val.orange {
  color: #ffb347;
}

.tasks-cate .et-tabs {
  margin-top: 4px;
}

.et-tabs > .et-tabs__nav,
.et-tabs > .layui-tab-title {
  margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* Task cards                                                          */
/* ------------------------------------------------------------------ */
.et-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.et-task-list .et-task-card {
  border-radius: var(--et-radius);
  margin-bottom: 10px;
  background: var(--et-surface);
  border-bottom: none !important;
  overflow: hidden;
}

.et-task-card__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  color: inherit;
}

.et-task-card__level {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.et-task-card__level .icon-level:before {
  font-size: 24px;
}

.et-task-card__body {
  flex: 1;
  min-width: 0;
  position: static !important;
}

.et-task-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.et-task-card__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--et-text) !important;
  margin: 0;
}

.et-task-card__price {
  flex-shrink: 0;
  position: static !important;
  top: auto !important;
  right: auto !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--et-accent) !important;
  white-space: nowrap;
}

.et-task-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.et-task-card__date {
  font-size: 12px;
  color: var(--et-text-dim);
}

.et-task-card__meta .status {
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 4px;
  max-width: 55%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.et-task-card__meta .status {
  background: rgba(195, 195, 195, 0.15);
  color: var(--et-text-muted);
}

.et-task-card__meta .status.Receive,
.et-task-card__meta .status.Finished,
.et-task-card__meta .status.Completed {
  background: var(--et-primary);
  color: #fff;
}

.et-task-card__meta .status[class*="Checking"],
.et-task-card__meta .status[class*="review"],
.et-task-card__meta .status[class*="Submitted"] {
  background: rgba(31, 199, 143, 0.22);
  color: var(--et-primary);
}

.et-task-empty {
  padding: 28px 16px !important;
  text-align: center;
  color: var(--et-text-muted);
  font-size: 13px;
}

/* Level filter grid */
.et-level-filter {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--et-border);
}

.et-level-filter .et-section-title {
  margin-bottom: 12px;
  font-size: 14px;
}

.et-level-filter__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.et-level-filter__grid .tasks-level {
  margin: 0;
  flex: 0 0 calc(25% - 8px);
  max-width: 72px;
}

.et-level-filter__grid .tasks-level a,
.et-level-filter__grid .tasks-level .task-level-link {
  width: 100%;
  height: 64px;
}

/* Legacy list overrides (home + task) */
.home-tasks .et-task-list .item a .body .price,
.task_page .et-task-list .item a .body .price {
  position: static !important;
}

.home-tasks .et-task-list .item a .body .name,
.task_page .et-task-list .item a .body .name {
  position: static;
}

.rank-page .rank-list .item {
  border-radius: var(--et-radius);
  margin-bottom: 8px;
  background: var(--et-surface);
  border-bottom: none !important;
  overflow: hidden;
}

.rank-page .rank-list .item a {
  padding: 12px 14px !important;
}

/* Rank */
.rank-page {
  padding: 0 15px 24px;
}

.rank-page .rank-list {
  background: transparent;
}

.rank-page .rank-list .item a {
  display: flex;
  align-items: center;
  color: inherit;
}

.rank-page .rank-list .rank-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  margin-right: 10px;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
}

.rank-page .rank-list .icon-level {
  margin-right: 10px;
  font-size: 20px;
}

.rank-page .rank-list .body {
  flex: 1;
  min-width: 0;
}

.rank-page .rank-list .body .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--et-text);
}

.rank-page .rank-list .price {
  font-size: 13px;
  font-weight: 600;
  color: var(--et-accent) !important;
}

.rank-page .rank-list .item::before,
.rank-page .rank-list .item::after {
  display: none;
}

.rank-page .rank-list li:nth-child(1) .rank-num {
  background: linear-gradient(135deg, #ffb347, #ffcc33);
  color: #3a2a00;
}

.rank-page .rank-list li:nth-child(2) .rank-num {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #333;
}

.rank-page .rank-list li:nth-child(3) .rank-num {
  background: linear-gradient(135deg, #cd7f32, #e8a87c);
  color: #3a2010;
}

.rank-page .rank-footnote {
  text-align: center;
  padding: 16px 8px 8px;
  font-size: 12px;
  color: var(--et-text-dim);
  line-height: 1.5;
}

.rank-page .rank-empty {
  padding: 48px 16px;
  color: var(--et-text-muted);
  text-align: center;
}

/* Nav & chrome */
.mui-bar-tab .mui-tab-item.mui-active,
.mui-bar-tab .mui-tab-item.mui-active .mui-icon {
  color: var(--et-primary);
}

.main-login .mui-input-row {
  border-radius: var(--et-radius);
  overflow: hidden;
  margin-bottom: 12px;
}

.main-login .mui-btn-primary {
  border-radius: var(--et-radius);
  font-weight: 600;
}

.qk-link-inner,
.home .slider .slider-inner,
.member-page .member_sale .item {
  border-radius: var(--et-radius) !important;
}

/* ------------------------------------------------------------------ */
/* VIP / product upgrade page                                            */
/* ------------------------------------------------------------------ */
.et-vip {
  padding-bottom: 24px;
}

.et-vip-summary {
  padding: 14px 16px;
  margin-bottom: 20px;
}

.et-vip-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.et-vip-summary__row--balance {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--et-border);
}

.et-vip-summary__label {
  font-size: 13px;
  color: var(--et-text-muted);
}

.et-vip-summary__balance {
  font-size: 22px;
  font-weight: 700;
  color: var(--et-primary);
}

.et-vip-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 400px) {
  .et-vip-plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

.et-vip-plan__btn {
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--et-radius);
  background: rgba(0, 0, 0, 0.25);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--et-text);
  box-sizing: border-box;
}

.et-vip-plan__btn.active {
  border-color: var(--et-primary);
  background: rgba(31, 199, 143, 0.15);
}

.et-vip-plan__btn.is-owned {
  opacity: 0.55;
  cursor: not-allowed;
}

.et-vip-plan__btn.is-short:not(.active) {
  opacity: 0.85;
}

.et-vip-plan__badge {
  font-size: 12px;
}

.et-vip-plan__badge:before {
  font-size: 26px;
}

.et-vip-plan__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--et-accent);
  line-height: 1.3;
  text-align: center;
}

.et-vip-plan__tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--et-primary);
  color: #fff;
}

.et-vip-plan__tag--warn {
  background: rgba(241, 89, 89, 0.25);
  color: var(--et-accent);
}

.et-vip-pay-list {
  background: transparent !important;
  margin: 0;
}

.et-vip-pay-list .mui-table-view-cell {
  background: var(--et-surface);
  border-radius: var(--et-radius);
  margin-bottom: 8px;
}

.et-vip-pay-list .mui-table-view-cell > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--et-text) !important;
  padding: 12px 14px !important;
}

.et-vip-pay-list img {
  flex-shrink: 0;
}

.et-vip-pay-list .currency {
  margin-left: auto;
  font-size: 12px;
  color: var(--et-text-dim);
}

.et-vip-submit {
  margin-top: 8px;
  border-radius: var(--et-radius) !important;
  font-weight: 600;
  padding: 12px;
}

.et-vip-footlink {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
}

.et-vip-footlink a {
  color: var(--et-primary);
}

/* ------------------------------------------------------------------ */
/* Me / member profile page                                              */
/* ------------------------------------------------------------------ */
.member-page .member-summary {
  margin-top: 4px;
}

.member-page .member_sale .item .val {
  letter-spacing: 0.02em;
}

.member-page .member-shortcuts__grid {
  justify-content: center;
  justify-items: center;
}

.member-page .member-shortcuts__grid .item a {
  gap: 8px;
  padding: 4px 8px;
}

.member-page .member-shortcuts__label {
  display: block;
  line-height: 1.35 !important;
  max-width: 96px;
  word-break: break-word;
}

.member-page .member-shortcuts__grid .item a .iconfont {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 22px;
}

.member-page .action_area .box .item a .icon-msg {
  color: #55bffb;
  border-color: #55bffb;
}

.member-page .member-stats-cards {
  gap: 12px;
}

.member-page .member-stats-cards .box .col-name {
  margin-top: 2px;
}

.member-page .member-stats-cards .box .col-val {
  margin-bottom: 6px;
}

/* Desktop shell (max-width from header inline style) */
@media (min-width: 768px) {
  body.et-ui {
    background: #ececec;
  }

  .et-vip-plans {
    grid-template-columns: repeat(4, 1fr);
  }

  .member-page .member-shortcuts__grid {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}