/* b78 2026 product redesign — neutral, content-first, touch-friendly */
:root {
  --rd-bg: #f6f7f9;
  --rd-surface: #ffffff;
  --rd-subtle: #f2f4f7;
  --rd-border: #e4e7ec;
  --rd-border-strong: #d0d5dd;
  --rd-text: #101828;
  --rd-muted: #667085;
  --rd-faint: #98a2b3;
  --rd-primary: #4f46e5;
  --rd-primary-hover: #4338ca;
  --rd-primary-soft: #eef2ff;
  --rd-danger: #d92d20;
  --rd-success: #039855;
  --rd-radius: 14px;
  --rd-radius-lg: 20px;
  --rd-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
  --header-h: 64px;
  --sidebar-w: 232px;
  --content-max: 1440px;
  --bg: var(--rd-bg);
  --surface: var(--rd-surface);
  --surface-solid: var(--rd-surface);
  --surface-muted: var(--rd-subtle);
  --border: var(--rd-border);
  --border-strong: var(--rd-border-strong);
  --text: var(--rd-text);
  --text-secondary: var(--rd-muted);
  --text-tertiary: var(--rd-faint);
  --primary: var(--rd-primary);
  --primary-soft: var(--rd-primary-soft);
}
[data-theme="dark"] {
  --rd-bg: #0d1117; --rd-surface: #161b22; --rd-subtle: #1c222b;
  --rd-border: #2b323c; --rd-border-strong: #3a4350;
  --rd-text: #f0f3f6; --rd-muted: #a6adbb; --rd-faint: #7d8590;
  --rd-primary: #818cf8; --rd-primary-hover: #a5b4fc; --rd-primary-soft: rgba(129,140,248,.13);
}
html, body { background: var(--rd-bg) !important; color: var(--rd-text) !important; }
body { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
* { scrollbar-width: thin; scrollbar-color: var(--rd-border-strong) transparent; }

/* Application shell */
.app-header { height: var(--header-h) !important; border-bottom: 1px solid var(--rd-border) !important; background: color-mix(in srgb, var(--rd-surface) 94%, transparent) !important; box-shadow: none !important; backdrop-filter: blur(18px); }
.header-inner { height: 100% !important; max-width: none !important; padding: 0 22px !important; }
.logo { color: var(--rd-text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.04em !important; }
.header-btn { border: 1px solid transparent !important; color: var(--rd-muted) !important; border-radius: 10px !important; }
.header-btn:hover { color: var(--rd-text) !important; border-color: var(--rd-border) !important; background: var(--rd-subtle) !important; }
.user-menu { padding: 5px 7px !important; border: 1px solid var(--rd-border) !important; border-radius: 12px !important; background: var(--rd-surface) !important; }
.app-layout { max-width: none !important; gap: 0 !important; padding: var(--header-h) 0 0 !important; }
.app-sidebar { top: var(--header-h) !important; width: var(--sidebar-w) !important; padding: 18px 12px !important; border-right: 1px solid var(--rd-border) !important; background: var(--rd-surface) !important; }
.sidebar-item { height: 44px !important; margin: 2px 0 !important; padding: 0 13px !important; gap: 12px !important; color: var(--rd-muted) !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 650 !important; }
.sidebar-item:hover { color: var(--rd-text) !important; background: var(--rd-subtle) !important; transform: none !important; }
.sidebar-item.active { color: var(--rd-primary) !important; background: var(--rd-primary-soft) !important; }
.sidebar-item i { font-size: 18px !important; }
.app-content { margin-left: var(--sidebar-w) !important; padding: 26px 30px 54px !important; }
.home-page, .discover-page, .profile-page, .publish-page, .settings-page, .work-detail, .messages-page, .notifications-page, .points-page, .admin-page { max-width: var(--content-max) !important; margin: 0 auto !important; }

/* Shared components */
.el-card, .auth-card, .publish-form, .settings-page > .el-tabs, .profile-header, .profile-content,
.work-info, .comments-section, .message-layout, .notification-list, .next-card,
.admin-page > .el-tabs, .points-task-section, .points-history-section {
  border: 1px solid var(--rd-border) !important; border-radius: var(--rd-radius) !important;
  background: var(--rd-surface) !important; box-shadow: none !important; backdrop-filter: none !important;
}
.el-button { min-height: 38px; border-radius: 9px !important; font-weight: 650 !important; box-shadow: none !important; }
.el-button:hover { transform: none !important; }
.el-button--primary { border-color: var(--rd-primary) !important; background: var(--rd-primary) !important; }
.el-button--primary:hover { border-color: var(--rd-primary-hover) !important; background: var(--rd-primary-hover) !important; }
.el-input__inner, .el-textarea__inner { border-color: var(--rd-border-strong) !important; border-radius: 9px !important; background: var(--rd-surface) !important; box-shadow: none !important; }
.el-input__inner:focus, .el-textarea__inner:focus { border-color: var(--rd-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-primary) 12%, transparent) !important; }
.el-dialog { border: 1px solid var(--rd-border) !important; border-radius: 16px !important; box-shadow: 0 24px 70px rgba(16,24,40,.18) !important; }
.el-tabs__active-bar { height: 2px !important; background: var(--rd-primary) !important; }
.el-tabs__item { color: var(--rd-muted) !important; font-size: 13px; }
.el-tabs__item.is-active { color: var(--rd-primary) !important; }
.el-table th { background: var(--rd-subtle) !important; }
.el-table td, .el-table th.is-leaf { border-color: var(--rd-border) !important; }
.el-tag { border-radius: 7px !important; }

/* Home and discovery */
.home-announcements { display: grid; gap: 8px; margin-bottom: 16px; }
.home-announcement { border: 1px solid var(--rd-border); border-radius: 12px; background: var(--rd-surface); box-shadow: none; }
.welcome-card { min-height: 330px !important; align-items: flex-start !important; justify-content: center !important; padding: 48px !important; color: var(--rd-text) !important; border: 1px solid var(--rd-border) !important; border-radius: var(--rd-radius-lg) !important; background: var(--rd-surface) !important; box-shadow: none !important; text-align: left !important; }
.welcome-card::before, .welcome-card::after { display: none !important; }
.welcome-card h3 { max-width: 720px !important; color: var(--rd-text) !important; font-size: clamp(36px, 5vw, 58px) !important; }
.welcome-card > p { color: var(--rd-muted) !important; }
.hero-eyebrow { color: var(--rd-primary) !important; }
.hero-pills span { color: var(--rd-muted) !important; border: 1px solid var(--rd-border) !important; background: var(--rd-subtle) !important; }
.welcome-btn { min-height: 44px !important; padding: 0 20px !important; border-radius: 10px !important; background: var(--rd-primary) !important; box-shadow: none !important; }
.feed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
.feed-card { border: 1px solid var(--rd-border) !important; border-radius: 14px !important; background: var(--rd-surface) !important; box-shadow: none !important; }
.feed-card:hover { border-color: var(--rd-border-strong) !important; box-shadow: var(--rd-shadow) !important; transform: translateY(-2px) !important; }
.feed-cover { aspect-ratio: 4 / 3 !important; background: var(--rd-subtle) !important; }
.feed-body { padding: 12px 13px 13px !important; }
.feed-title { min-height: 40px !important; margin-bottom: 10px !important; font-size: 13px !important; }
.feed-author-avatar { border: 1px solid var(--rd-border); }
.feed-badge { background: rgba(16,24,40,.76) !important; }
.feed-price { background: var(--rd-primary) !important; }
.discover-search .el-input { max-width: none !important; }
.hot-tag, .user-card, .tag-result-item { border: 1px solid var(--rd-border) !important; border-radius: 12px !important; background: var(--rd-surface) !important; }

/* Authentication and forms */
.auth-page { min-height: calc(100vh - var(--header-h) - 80px) !important; }
.auth-card { max-width: 420px !important; padding: 34px !important; }
.auth-card::before { display: none !important; }
.auth-title { color: var(--rd-text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-size: 28px !important; }
.auth-subtitle { color: var(--rd-muted) !important; }
.publish-page, .settings-page { max-width: 900px !important; }
.publish-title, .settings-title { color: var(--rd-text) !important; font-size: 26px !important; }
.publish-form, .settings-page > .el-tabs { padding: 24px !important; }

/* Profile */
.profile-page { max-width: 1040px !important; }
.profile-header { overflow: hidden; }
.profile-banner { min-height: 220px !important; }
.profile-info { padding: 0 28px 28px !important; text-align: left !important; }
.profile-avatar-wrap { margin-left: 0 !important; }
.profile-name { font-size: 25px !important; }
.profile-bio { margin-left: 0 !important; }
.profile-stats, .profile-actions { justify-content: flex-start !important; }
.profile-content { padding: 18px !important; }

/* Work reader */
.work-detail { max-width: 1080px !important; }
.media-viewer { border: 1px solid #1f2937 !important; border-radius: 16px !important; background: #090d14 !important; box-shadow: none !important; }
.media-stage { height: min(68vh, 720px) !important; min-height: 420px !important; }
.media-stage video, .readable-image { height: min(68vh, 720px) !important; max-height: 720px !important; }
.media-navigation { background: #111827 !important; }
.work-info { margin-top: 12px !important; padding: 24px !important; border-radius: 16px !important; }
.work-title-text { margin-top: 20px !important; font-size: clamp(25px, 4vw, 36px) !important; }
.action-item { color: var(--rd-muted) !important; border: 1px solid var(--rd-border) !important; background: var(--rd-surface) !important; }
.action-item:hover { color: var(--rd-primary) !important; background: var(--rd-primary-soft) !important; }
.comments-section { margin-top: 12px !important; padding: 24px !important; border-radius: 16px !important; }
.comment-input { background: var(--rd-subtle) !important; }

/* Messaging, notifications, points */
.message-layout { min-height: 680px; overflow: hidden; }
.conv-panel { background: var(--rd-surface) !important; }
.conv-item { margin: 3px 8px; border-radius: 10px; }
.conv-item.active { background: var(--rd-primary-soft) !important; }
.chat-panel { background: var(--rd-surface) !important; }
.msg-content { border: 1px solid var(--rd-border); background: var(--rd-subtle) !important; }
.chat-msg.own .msg-content { color: #fff !important; border-color: var(--rd-primary); background: var(--rd-primary) !important; }
.notifications-page { max-width: 820px !important; }
.notification-item { border-color: var(--rd-border) !important; }
.notification-item.unread { background: var(--rd-primary-soft) !important; }
.points-page { max-width: 960px !important; }
.points-card { color: var(--rd-text) !important; border: 1px solid var(--rd-border) !important; background: var(--rd-surface) !important; box-shadow: none !important; }
.points-card::after { display: none !important; }
.points-label, .points-streak { color: var(--rd-muted) !important; }
.points-value { color: var(--rd-primary) !important; }

/* Administration */
.admin-page { max-width: 1520px !important; }
.admin-overview-grid { gap: 10px !important; }
.stat-card, .metric { border: 1px solid var(--rd-border) !important; border-radius: 12px !important; background: var(--rd-surface) !important; box-shadow: none !important; }
.stat-card > i { color: var(--rd-primary) !important; background: var(--rd-primary-soft) !important; }
.admin-page > .el-tabs { border-radius: 14px !important; }
.admin-page > .el-tabs > .el-tabs__header.is-left { background: var(--rd-subtle) !important; }
.admin-page > .el-tabs > .el-tabs__header.is-left .el-tabs__item.is-active { color: var(--rd-primary) !important; background: var(--rd-surface) !important; box-shadow: 0 1px 3px rgba(16,24,40,.08) !important; }
.admin-table-shell { border-color: var(--rd-border) !important; border-radius: 11px !important; }
.next-page-head { color: var(--rd-text) !important; border: 1px solid var(--rd-border) !important; background: var(--rd-surface) !important; box-shadow: none !important; }
.next-page-head p { color: var(--rd-muted) !important; }
.next-page-head .eyebrow { color: var(--rd-primary) !important; }
.ops-chip { border-color: var(--rd-border) !important; background: var(--rd-subtle) !important; }

/* Responsive */
@media (max-width: 1240px) {
  :root { --sidebar-w: 82px; }
  .sidebar-text { display: none !important; }
  .sidebar-item { justify-content: center !important; padding: 0 !important; }
  .feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  :root { --header-h: 58px; }
  .app-header { height: var(--header-h) !important; }
  .app-layout { padding: var(--header-h) 0 calc(82px + env(safe-area-inset-bottom)) !important; }
  .app-content { margin-left: 0 !important; padding: 10px !important; }
  .app-sidebar { display: none !important; }
  .app-footer { border-top: 1px solid var(--rd-border) !important; background: color-mix(in srgb, var(--rd-surface) 94%, transparent) !important; box-shadow: 0 -4px 18px rgba(16,24,40,.08) !important; }
  .tab-item { color: var(--rd-faint) !important; }
  .tab-item.active { color: var(--rd-primary) !important; background: transparent !important; }
  .tab-publish { background: var(--rd-primary) !important; border-radius: 14px !important; }
  .welcome-card { min-height: 260px !important; padding: 26px 20px !important; }
  .welcome-card h3 { font-size: 31px !important; }
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  .feed-cover { aspect-ratio: 1 / 1 !important; }
  .feed-body { padding: 9px !important; }
  .feed-title { min-height: 34px !important; font-size: 12px !important; }
  .profile-banner { min-height: 140px !important; }
  .profile-info { padding: 0 16px 20px !important; }
  .media-stage { height: min(42vh, 350px) !important; min-height: 0 !important; }
  .media-stage video, .readable-image { height: min(42vh, 350px) !important; max-height: 350px !important; }
  .work-info, .comments-section { padding: 15px !important; }
  .work-title-text { font-size: 21px !important; }
  .action-bar { overflow-x: auto; }
  .action-item { flex: 1 0 52px !important; min-width: 52px !important; }
  .message-layout { min-height: calc(100vh - 160px); }
  .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-page > .el-tabs { border-radius: 12px !important; }
  .el-dialog { border-radius: 20px 20px 0 0 !important; }
}
@media (max-width: 360px) {
  .feed-grid { gap: 7px !important; }
  .feed-author-avatar { display: none !important; }
}