.page-shell{
  padding: 36px 0 72px;
}
.portal-grid{
  display:grid;
  gap:24px;
}
.portal-hero,
.admin-card,
.result-card,
.source-card,
.metric-card,
.auth-card,
.chat-bubble,
.portal-panel{
  background: rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
}
.portal-hero{
  padding: 28px;
  display:grid;
  gap:14px;
}
.portal-hero h1,
.portal-hero h2,
.admin-card h2,
.admin-card h3,
.result-card h3,
.metric-card__value,
.auth-card h1{
  margin:0;
}
.portal-hero__actions,
.portal-row,
.row-actions,
.tag-row,
.form-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.portal-columns{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:24px;
}
.muted{ color: var(--muted); }
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(249,115,22,.08);
  border:1px solid rgba(249,115,22,.16);
  color: var(--text);
  font-size:12px;
}
.auth-card{
  width:min(980px, calc(100% - 36px));
  margin: 48px auto 80px;
  padding: 24px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:24px;
}
.auth-card__panel{
  padding: 8px 6px;
}
.auth-switch{
  display:flex;
  gap:10px;
  margin-bottom:18px;
}
.auth-switch button{
  border:1px solid var(--line);
  background: rgba(255,255,255,.9);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.auth-switch button.is-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
}
.auth-form{
  display:grid;
  gap:14px;
}
.auth-form label,
.admin-form label{
  display:grid;
  gap:8px;
  font-size:14px;
  color: var(--text);
}
.auth-form input,
.auth-form textarea,
.auth-form select,
.admin-form input,
.admin-form textarea,
.admin-form select,
.search-inline input,
.search-inline textarea{
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  padding:13px 14px;
  background:#fff;
  font:inherit;
  width:100%;
}
textarea{ min-height: 120px; resize: vertical; }
.auth-side{
  padding: 26px;
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(15,23,42,.04));
  border-radius:24px;
  border:1px solid var(--line);
}
.auth-side ul{ padding-left: 20px; color: var(--muted); }
.status-line{
  min-height: 24px;
  color: var(--muted);
  font-size:14px;
}
.chat-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
}
.chat-panel,
.source-panel{
  padding:22px;
}
.chat-log{
  display:grid;
  gap:14px;
  max-height: 520px;
  overflow:auto;
  margin-bottom:18px;
}
.chat-bubble{
  padding:16px 18px;
}
.chat-bubble.user{
  border-left:4px solid var(--accent);
}
.chat-bubble.assistant{
  border-left:4px solid rgba(15,23,42,.18);
}
.ai-form{
  display:grid;
  gap:12px;
}
.ai-form textarea{
  min-height: 120px;
}
.source-list,
.result-list,
.admin-stack{
  display:grid;
  gap:14px;
}
.source-card,
.result-card,
.admin-card,
.metric-card,
.portal-panel{
  padding:18px;
}
.result-card__head,
.admin-card__head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.search-inline{
  display:flex;
  gap:12px;
  align-items:center;
}
.table-wrap{
  overflow:auto;
  border-radius:20px;
  border:1px solid var(--line);
  background:#fff;
}
.table-wrap table{
  width:100%;
  border-collapse:collapse;
}
.table-wrap th,
.table-wrap td{
  padding:14px;
  border-bottom:1px solid rgba(15,23,42,.08);
  text-align:left;
  vertical-align:top;
}
.metric-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:14px;
}
.metric-card__label{ color: var(--muted); font-size: 14px; }
.metric-card__value{ font-size: 30px; font-weight: 900; }
.admin-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:24px;
}
.admin-nav{
  display:grid;
  gap:10px;
  align-content:start;
  padding:20px;
}
.admin-nav button{
  text-align:left;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
}
.admin-nav button.is-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent;
}
.admin-main{ display:grid; gap:24px; }
.form-grid.two{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.empty-note{
  padding:20px;
  border:1px dashed rgba(15,23,42,.18);
  border-radius:20px;
  color: var(--muted);
  background: rgba(255,255,255,.72);
}
.auth-mount{
  min-width: 154px;
}
.auth-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background: rgba(255,255,255,.84);
}
.auth-chip__name{ font-weight: 800; font-size: 13px; }
.auth-chip__meta{ font-size: 12px; color: var(--muted); }
.mobile-auth-card{
  display:grid;
  gap:8px;
  padding:12px 8px 4px;
}
.mobile-auth-card__name{ font-weight: 800; }
.mobile-auth-card__meta{ color: var(--muted); font-size:13px; }
.is-hidden{ display:none !important; }
@media (max-width: 1120px){
  .portal-columns,
  .chat-wrap,
  .admin-layout,
  .auth-card{ grid-template-columns: 1fr; }
  .metric-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .page-shell{ padding-top: 22px; }
  .form-grid.two,
  .search-inline{ grid-template-columns: 1fr; display:grid; }
  .metric-grid{ grid-template-columns: 1fr; }
  .auth-card{ width:min(100% - 24px, 100%); }
}

.course-admin-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:20px;
  align-items:start;
}
.course-admin-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.mini-metric{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,115,22,.06));
  display:grid;
  gap:6px;
}
.mini-metric span{
  font-size:13px;
  color: var(--muted);
}
.mini-metric strong{
  font-size:24px;
}
.course-toolbar{
  display:grid;
  gap:12px;
}
.course-search-inline{
  display:grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(2, minmax(150px, .7fr)) auto;
  gap:12px;
  align-items:center;
}
.course-workspace{
  display:grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap:24px;
}
.course-library-panel,
.course-editor-card,
.course-preview-card{
  min-height: 100%;
}
.course-library{
  display:grid;
  gap:12px;
  max-height: 920px;
  overflow:auto;
  padding-right: 4px;
}
.course-library-item{
  width:100%;
  text-align:left;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:18px;
  padding:14px 16px;
  display:grid;
  gap:8px;
  cursor:pointer;
  transition: .2s ease;
}
.course-library-item:hover,
.course-library-item.is-active{
  border-color: rgba(249,115,22,.26);
  box-shadow: 0 12px 28px rgba(249,115,22,.12);
  transform: translateY(-1px);
}
.course-library-item__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.course-library-item__meta{
  font-size:13px;
  color: var(--muted);
}
.course-library-item p{
  margin:0;
  color: var(--muted);
  font-size:14px;
}
.course-editor-stack{
  display:grid;
  gap:24px;
}
.course-preview-shell{
  display:grid;
  gap:16px;
}
.course-preview-shell__top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.course-preview-shell h3,
.course-preview-shell h4{
  margin:0;
}
.course-preview-shell p{
  margin:8px 0 0;
  color: var(--muted);
}
.course-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.course-state.live{
  color:#166534;
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.16);
}
.course-state.draft{
  color:#92400e;
  background: rgba(249,115,22,.12);
  border:1px solid rgba(249,115,22,.16);
}
.preview-meta-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.preview-meta-grid div,
.preview-keyvalue div{
  display:grid;
  gap:6px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
}
.preview-meta-grid span,
.preview-keyvalue span{
  font-size:12px;
  color: var(--muted);
}
.preview-meta-grid strong,
.preview-keyvalue strong{
  font-size:14px;
}
.preview-section{
  display:grid;
  gap:10px;
}
.preview-keyvalue{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.preview-outline-table{
  overflow:auto;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
}
.preview-outline-table table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
.preview-outline-table th,
.preview-outline-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-size:13px;
  text-align:left;
  vertical-align:top;
}
.course-table-wrap .is-active-row{
  background: rgba(249,115,22,.06);
}
@media (max-width: 1120px){
  .course-admin-hero,
  .course-workspace,
  .course-search-inline{
    grid-template-columns: 1fr;
  }
  .course-library{
    max-height: none;
  }
}
@media (max-width: 720px){
  .course-admin-stats,
  .preview-meta-grid,
  .preview-keyvalue{
    grid-template-columns: 1fr;
  }
}

.category-sort-card{
  display:grid;
  gap:14px;
}
.category-sort-list{
  display:grid;
  gap:10px;
}
.category-sort-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  cursor:grab;
  transition:.18s ease;
}
.category-sort-item:hover,
.category-sort-item.is-drop-target{
  border-color:rgba(249,115,22,.28);
  box-shadow:0 12px 28px rgba(249,115,22,.12);
}
.category-sort-item.is-dragging{ opacity:.55; }
.category-sort-item__drag{
  font-size:20px;
  color:var(--muted);
  letter-spacing:2px;
}
.category-sort-item__body{
  display:grid;
  gap:4px;
}
.category-sort-item__body span{
  color:var(--muted);
  font-size:13px;
}
.course-cover-field{
  display:grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap:16px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,115,22,.04));
}
.course-cover-field__media img,
.course-preview-cover img,
.course-library-item__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.course-cover-field__media{
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
}
.course-cover-field__body{
  display:grid;
  gap:12px;
  align-content:start;
}
.admin-form-block{
  display:grid;
  gap:8px;
}
.field-label{
  font-size:14px;
  color:var(--text);
}
.rich-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.rich-toolbar button{
  border:1px solid rgba(15,23,42,.1);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:700;
}
.rich-toolbar button:hover{
  border-color:rgba(249,115,22,.28);
  box-shadow:0 8px 18px rgba(249,115,22,.1);
}
.rich-editor{
  min-height:210px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  padding:14px;
  background:#fff;
  overflow:auto;
}
.rich-editor:focus{
  outline:none;
  border-color:rgba(249,115,22,.35);
  box-shadow:0 0 0 6px rgba(249,115,22,.12);
}
.rich-editor:empty:before{
  content:attr(data-placeholder);
  color:var(--muted);
}
.rich-editor p{ margin:0 0 10px; }
.rich-editor ul,
.rich-editor ol{ margin:0 0 10px 20px; }
.rich-editor blockquote{
  margin:0 0 10px;
  padding-left:14px;
  border-left:4px solid rgba(249,115,22,.3);
  color:var(--muted);
}
.course-library-item__cover,
.course-preview-cover{
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
}
.course-library-item__cover{ margin-bottom:8px; }
.course-preview-cover{ margin-bottom:2px; }
.preview-rich{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.92);
  color:var(--text);
}
.preview-rich p:first-child{ margin-top:0; }
.preview-rich p:last-child{ margin-bottom:0; }
.preview-rich ul,
.preview-rich ol{ padding-left:18px; }
@media (max-width: 1120px){
  .course-cover-field{ grid-template-columns:1fr; }
}