/*
 * Online learner-workbench isolation.
 *
 * The Next.js admin UI still uses the legacy global .sidebar/.notice rules.
 * Keep those rules out of the faithfully migrated learner workspace and restore
 * a readable selected navigation item plus a comfortable wide-screen canvas.
 */
.app-shell .sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 264px;
  height: 100vh;
  padding: 27px 18px 20px;
  color: var(--ink);
  background: #fff;
}

.app-shell .sidebar .nav {
  display: grid;
  gap: 7px;
}

.app-shell .sidebar .nav .nav-item {
  min-height: 48px;
  padding: 13px;
  border-radius: 12px;
  color: #4b4e58;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
}

.app-shell .sidebar .nav .nav-item:hover {
  color: #353842;
  background: #fafafa;
}

.app-shell .sidebar .nav .nav-item.active {
  color: var(--red);
  background: var(--red-soft);
  box-shadow: inset 3px 0 var(--red);
  font-weight: 750;
}

.app-shell .sidebar .nav .nav-item.active .nav-icon {
  color: var(--red);
}

/*
 * Restore the original learner logo. The React admin stylesheet also defines
 * a generic .brand span rule, which otherwise turns both nested learner-logo
 * spans into red pills.
 */
.app-shell .sidebar .brand > span {
  min-width: 0;
  white-space: nowrap;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
}

.app-shell .sidebar .brand > small {
  flex: 0 0 auto;
}

.app-shell .sidebar .brand .brand-mark {
  padding: 0;
  color: var(--red);
  background: transparent;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* The learner quota notice is an in-card row, not the legacy floating toast. */
.app-shell .notice {
  position: static;
  inset: auto;
  z-index: auto;
  color: #93515c;
  background: #fff4f5;
  border: 0;
  box-shadow: none;
}

@media (max-width: 780px) {
  .app-shell .sidebar {
    display: none;
  }
}

/* Home workbench: compact section rhythm and clearer status-card hierarchy. */
.app-shell .content > .page {
  padding: 0;
}

.app-shell .home-hero-page {
  padding-bottom: 0 !important;
}

.app-shell .home-hero-page + .dashboard-grid {
  margin-top: 18px !important;
}

.app-shell .dashboard-grid .entry-card {
  min-height: 268px;
  padding-top: 26px;
  padding-bottom: 24px;
}

.app-shell .dashboard-grid + .home-lower {
  margin-top: 18px !important;
}

.app-shell .home-lower > .panel {
  min-height: 280px;
  padding: 26px 28px 24px;
}

.app-shell .home-lower > .panel > .section-title {
  min-height: 0;
  margin-bottom: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid #edf0f4;
}

.app-shell .home-lower > .panel > .section-title h2 {
  margin: 0;
  line-height: 1.35;
}

.app-shell .home-lower > .panel > .section-title p {
  margin: 7px 0 0;
  line-height: 1.55;
}

.app-shell .home-lower .position-summary {
  min-height: 150px;
  align-items: center;
}

.app-shell .home-lower .position-name {
  margin: 0 0 12px;
}

.app-shell .home-lower .summary-lines {
  gap: 8px;
  line-height: 1.55;
}

.app-shell .home-lower .quota-list {
  display: grid;
  gap: 2px;
}

.app-shell .home-lower .quota-row {
  min-height: 39px;
  align-items: center;
}

.app-shell .home-lower .quota-notice {
  margin-top: 12px;
}

@media (max-width: 780px) {
  .app-shell .home-hero-page + .dashboard-grid,
  .app-shell .dashboard-grid + .home-lower {
    margin-top: 14px !important;
  }

  .app-shell .dashboard-grid .entry-card,
  .app-shell .home-lower > .panel {
    min-height: 0;
  }

  .app-shell .home-lower > .panel {
    padding: 22px 20px;
  }
}

/* Card headings start at the panel content edge instead of inheriting the
   marketing-page section margin from app/globals.css. */
.app-shell .panel > .section-title:first-child,
.app-shell .entry-card > .section-title:first-child,
.app-shell .api-guide-card > .section-title:first-child {
  margin-top: 0;
}
.app-shell .panel > .section-title:first-child h2 {
  margin-top: 0;
}

/* Result previews must sit above the sticky workbench and remain clickable. */
.app-shell .image-preview-overlay {
  z-index: 1600;
}

/* Image size is a first-class generation option in both creation modes. */
.app-shell .image-aspect-field small {
  display: block;
  margin-top: 7px;
  color: #7b7f88;
  line-height: 1.55;
}
.app-shell .benchmark-aspect-options {
  grid-template-columns: minmax(260px, 420px);
  margin: 18px 0 0;
  padding: 18px;
  border: 1px solid #ececf1;
  border-radius: 14px;
  background: #fff;
}
/* Product feedback */
.feedback-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(520px,1.28fr);gap:22px;align-items:start}
.feedback-hero{position:sticky;top:24px;overflow:hidden;padding:42px;border-radius:22px;color:#fff;background:linear-gradient(145deg,#ff2442 0%,#e71636 58%,#a80e26 100%);box-shadow:0 22px 55px rgba(182,18,45,.2)}
.feedback-hero:after{content:"";position:absolute;width:250px;height:250px;right:-100px;bottom:-115px;border:44px solid rgba(255,255,255,.12);border-radius:50%}
.feedback-hero h2{position:relative;margin:22px 0 14px;font-size:clamp(26px,3vw,38px);line-height:1.32;letter-spacing:-.03em}
.feedback-hero p{position:relative;margin:0;color:#ffe9ed;line-height:1.75}
.feedback-hero>div{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.feedback-hero>div span{padding:8px 11px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.1);font-size:12px}
.feedback-form{display:grid;gap:20px;padding:30px}
.feedback-ratings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feedback-ratings label{display:grid;gap:8px;font-size:14px;font-weight:700;color:#333740}
.feedback-form textarea{min-height:118px;resize:vertical}
.feedback-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:8px}
.feedback-actions span{font-size:13px;color:#777c86}
.feedback-success{display:flex;gap:14px;padding:16px;border:1px solid #bce7ca;border-radius:14px;background:#effaf3;color:#176d39}
.feedback-success svg{width:24px;height:24px;flex:none}.feedback-success b{font-size:15px}.feedback-success p{margin:5px 0 0;line-height:1.55}

/* Changelog */
.updates-page{max-width:1080px}
.updates-hero{position:relative;overflow:hidden;margin-bottom:34px;padding:42px 46px;border:1px solid #ffd1d8;border-radius:24px;background:linear-gradient(120deg,#fff 0%,#fff5f7 58%,#ffe7eb 100%)}
.updates-hero:after{content:"更";position:absolute;right:35px;top:-24px;font-size:180px;font-weight:900;color:rgba(255,36,66,.07)}
.updates-hero h2{position:relative;margin:16px 0 10px;font-size:34px}.updates-hero p{position:relative;margin:0;color:#6f737c}
.updates-timeline{display:grid;gap:0}
.update-entry{display:grid;grid-template-columns:174px 1fr;gap:30px;position:relative}
.update-entry:before{content:"";position:absolute;left:156px;top:20px;bottom:-20px;width:1px;background:#e5e7eb}
.update-entry:last-child:before{bottom:calc(100% - 28px)}
.update-date{min-width:0;padding:19px 22px 0 0;text-align:right}.update-date b,.update-date span{display:block;white-space:nowrap}.update-date b{font-size:14px}.update-date span{margin-top:5px;color:#9a9ea6;font-size:12px}
.update-card{position:relative;margin-bottom:22px;padding:26px 30px;border:1px solid #e7e8ec;border-radius:18px;background:#fff;box-shadow:0 12px 35px rgba(29,31,36,.05)}
.update-card:before{content:"";position:absolute;left:-39px;top:20px;width:15px;height:15px;border:4px solid #fff;border-radius:50%;background:#bcc0c7;box-shadow:0 0 0 1px #dfe1e5}
.update-entry.latest .update-card{border-color:#ffc5ce;box-shadow:0 16px 42px rgba(255,36,66,.09)}
.update-entry.latest .update-card:before{background:#ff2442;box-shadow:0 0 0 5px #ffe7eb}
.update-card header{display:flex;align-items:center;gap:10px}.update-card header em{padding:4px 7px;border-radius:7px;background:#ff2442;color:#fff;font-size:10px;font-style:normal;font-weight:800}
.update-card h2{margin:14px 0 8px;font-size:21px}.update-card>p{margin:0;color:#6d727c;line-height:1.65}
.update-card ul{display:grid;gap:9px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid #eff0f2;list-style:none}
.update-card li{position:relative;padding-left:17px;line-height:1.65}.update-card li:before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:#ff536b}
@media(max-width:900px){.feedback-layout{grid-template-columns:1fr}.feedback-hero{position:static}.feedback-ratings{grid-template-columns:1fr}.update-entry{grid-template-columns:1fr;gap:8px}.update-entry:before,.update-card:before{display:none}.update-date{text-align:left}.updates-hero{padding:30px}.updates-hero h2{font-size:28px}}

/* Learner-owned track prompts and task traceability. */
.track-prompt-manager{display:grid;gap:18px}.track-prompt-form,.track-prompt-grid{display:grid;gap:16px}.prompt-privacy-note{display:flex;align-items:flex-start;gap:13px;padding:15px 17px;border:1px solid #d9e8ff;border-radius:14px;background:#f5f9ff}.prompt-privacy-note>span{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#e5efff;color:#2765c5}.prompt-privacy-note .ui-icon{width:19px;height:19px}.prompt-privacy-note p{margin:5px 0 0;color:#5f6978;font-size:13px;line-height:1.6}.track-prompt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.track-prompt-field{display:grid;gap:9px}.track-prompt-field>span{display:grid;gap:4px}.track-prompt-field small{color:#7b8089;font-weight:400;line-height:1.5}.track-prompt-field textarea{width:100%;min-height:190px;padding:13px 14px;border:1px solid #dfe1e6;border-radius:12px;resize:vertical;background:#fff;font:inherit;font-size:13px;line-height:1.7}.track-prompt-field textarea:focus{outline:0;border-color:#ff2442;box-shadow:0 0 0 3px rgba(255,36,66,.09)}.track-prompt-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:4px}.track-prompt-actions>span{margin-right:auto;color:#81858d;font-size:12px}.task-id-badge{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin-top:10px;padding:5px 9px;border:1px solid #e1e4e9;border-radius:8px;background:#f7f8fa;color:#626975;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.02em;overflow-wrap:anywhere}.creation-task-id{margin:0 0 12px}.head-utility{white-space:nowrap}
@media(max-width:900px){.track-prompt-grid{grid-template-columns:1fr}.track-prompt-actions{align-items:stretch;flex-direction:column}.track-prompt-actions>span{margin:0}.track-prompt-actions .button{width:100%}}

/* Mobile learner navigation and page ergonomics. */
.mobile-menu-overlay{display:none}
@media(max-width:780px){
  html,body,.app-shell{max-width:100%;overflow-x:hidden}
  .app-shell .content{padding:20px 14px calc(102px + env(safe-area-inset-bottom))}
  .app-shell .page-head{align-items:center;gap:10px;margin-bottom:17px}
  .app-shell .page-head>div:first-child{min-width:0}
  .app-shell .page-head h1{font-size:23px;line-height:1.2}
  .app-shell .page-head p{margin-top:6px;line-height:1.5}
  .app-shell .head-actions{flex:0 0 auto;gap:0}
  .app-shell .panel,.app-shell .entry-card{border-radius:16px}
  .app-shell input,.app-shell textarea,.app-shell select{font-size:16px}
  .app-shell .button{min-height:42px}

  .app-shell .mobile-bar{z-index:60;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:6px 6px max(6px,env(safe-area-inset-bottom));box-shadow:0 -8px 28px rgba(34,37,44,.08)}
  .app-shell .mobile-item{min-width:0;min-height:52px;padding:5px 2px;border-radius:12px;font-size:11px;line-height:1.15;cursor:pointer;touch-action:manipulation}
  .app-shell .mobile-item.active{color:var(--red);background:#fff1f3}
  .app-shell .mobile-item>span{width:22px;height:22px}
  .app-shell .mobile-item>span .ui-icon{width:21px;height:21px}

  .mobile-menu-overlay{position:fixed;inset:0;z-index:55;display:grid;align-items:end;padding:16px 12px calc(80px + env(safe-area-inset-bottom));background:rgba(22,24,31,.4);backdrop-filter:blur(5px)}
  .mobile-menu-sheet{width:100%;max-height:calc(100dvh - 112px);overflow:auto;padding:21px;border:1px solid rgba(255,255,255,.9);border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(22,24,31,.24);animation:mobileMenuIn .18s ease-out}
  .mobile-menu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid #eff0f3}
  .mobile-menu-head h2{margin:10px 0 4px;font-size:23px}
  .mobile-menu-head p{margin:0;color:var(--muted);font-size:13px}
  .mobile-menu-close{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:50%;color:#5d626d;background:#fafafa;font-size:25px;line-height:1;cursor:pointer}
  .mobile-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
  .mobile-menu-link{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:82px;padding:13px;border:1px solid #e7e8ec;border-radius:15px;color:#343842;background:#fff;text-align:left;cursor:pointer}
  .mobile-menu-link>span{grid-row:1/span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:var(--red);background:#fff0f2}
  .mobile-menu-link .ui-icon{width:19px;height:19px}
  .mobile-menu-link b{align-self:end;font-size:14px}
  .mobile-menu-link small{align-self:start;margin-top:3px;overflow:hidden;color:#858994;font-size:10px;line-height:1.35}
  .mobile-menu-link.active{border-color:#ffb6c1;background:#fff6f7;box-shadow:inset 0 0 0 1px rgba(255,36,66,.04)}
  .mobile-menu-link:last-child{grid-column:1/-1;min-height:66px}
  .mobile-menu-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #eff0f3;color:#747984;font-size:11px}
  .mobile-menu-status span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#f7f8fa}
  .mobile-menu-status .ui-icon{width:14px;height:14px}

  .history-page{gap:14px}
  .history-summary{padding:18px}
  .history-summary h2{font-size:21px}
  .history-summary p{font-size:13px;line-height:1.6}
  .history-list-panel{padding:0 0 24px!important;overflow:visible!important}
  .history-table-wrap{max-height:none;overflow:visible;padding:12px}
  .history-table{display:block;min-width:0!important}
  .history-table thead{display:none}
  .history-table tbody{display:grid;gap:12px}
  .history-table tr{display:grid;padding:12px 14px;border:1px solid #e8e9ed;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(30,33,40,.04)}
  .history-table td,.history-table th:first-child,.history-table td:first-child{display:grid;width:auto;grid-template-columns:74px minmax(0,1fr);gap:9px;align-items:start;padding:7px 0!important;border:0!important;text-align:left!important;white-space:normal}
  .history-table td:before{color:#8a8f99;font-size:11px;font-weight:700}
  .history-table td:nth-child(1):before{content:'序号'}
  .history-table td:nth-child(2):before{content:'任务 ID'}
  .history-table td:nth-child(3):before{content:'创作日期'}
  .history-table td:nth-child(4):before{content:'赛道分类'}
  .history-table td:nth-child(5):before{content:'标题 / 素材'}
  .history-table td:nth-child(6):before{content:'图片'}
  .history-table td:nth-child(7):before{content:'管理'}
  .history-table td small{max-width:100%;white-space:normal;line-height:1.5}
  .history-task-id{max-width:100%;overflow-wrap:anywhere;white-space:normal}
  .history-row-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .history-row-actions .button{min-width:0;min-height:38px;padding:7px 5px;font-size:11px}
  .history-list-panel .history-pagination{margin:8px 14px 0}

  .library-layout .track-grid{gap:12px}
  .library-layout .track-card{min-height:142px;padding:14px;grid-template-columns:76px minmax(0,1fr);column-gap:12px;border-radius:15px}
  .library-layout .track-card .track-scene{width:76px;min-height:112px;border-radius:12px}
  .library-layout .track-card h3{margin:2px 42px 5px 0;font-size:15px}
  .library-layout .track-card p{font-size:12px;line-height:1.5}
  .library-layout .track-card .button{min-height:38px;margin-top:8px;padding:7px 10px}
  .library-layout .track-card .source-badge{top:12px;right:12px}
  .detail-actions{grid-template-columns:1fr}

  .settings-layout,.settings-top-grid{gap:14px}
  .app-shell .api-guide-card,.app-shell .api-key-card,.app-shell .license-card{padding:17px}
  .api-guide-card .section-title h2,.api-key-card .section-title h2,.license-card .section-title h2{margin-top:7px;font-size:18px}
  .onboarding-step{padding-bottom:17px}
  .onboarding-step p{font-size:13px;line-height:1.6}
  .guide-security{align-items:flex-start;padding:12px;font-size:12px;line-height:1.55}
  .api-balance-row{align-items:flex-start;flex-direction:column}
  .license-card .license-grid{gap:14px}

  .feedback-layout{gap:14px}
  .feedback-hero{padding:25px 21px;border-radius:18px}
  .feedback-hero h2{margin:16px 0 10px;font-size:25px}
  .feedback-hero p{font-size:13px;line-height:1.65}
  .feedback-hero>div{margin-top:20px}
  .feedback-form{gap:16px;padding:18px}
  .feedback-actions{align-items:stretch;flex-direction:column;gap:10px}
  .feedback-actions .button{width:100%}

  .updates-hero{margin-bottom:20px;padding:24px 20px;border-radius:18px}
  .updates-hero:after{right:12px;font-size:128px}
  .updates-hero h2{margin:12px 0 8px;font-size:24px;line-height:1.35}
  .updates-hero p{font-size:13px;line-height:1.6}
  .update-entry{gap:7px}
  .update-date{padding:0 4px 2px;text-align:left}
  .update-card{margin-bottom:16px;padding:19px 18px;border-radius:16px}
  .update-card h2{font-size:19px;line-height:1.4}
  .update-card>p,.update-card li{font-size:13px;line-height:1.65}
  .update-card ul{margin-top:15px;padding-top:15px}
}
@media(max-width:390px){
  .app-shell .content{padding-left:12px;padding-right:12px}
  .mobile-menu-sheet{padding:18px}
  .mobile-menu-grid{gap:8px}
  .mobile-menu-link{grid-template-columns:30px minmax(0,1fr);column-gap:8px;padding:11px}
  .mobile-menu-link>span{width:30px;height:30px}
  .history-row-actions{grid-template-columns:1fr}
}
@keyframes mobileMenuIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.mobile-menu-sheet{animation:none}}