/* Focused UI polish for the app shell and tools hub. */

.global-site-nav{
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) minmax(0, auto);
  gap: 10px;
  overflow: hidden;
}

.global-site-brand{
  min-width: 0;
  max-width: 220px;
}

.global-site-brand-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-sidebar-mode="tools"] .global-site-nav,
body[data-sidebar-mode="controlboard"] .global-site-nav{
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-sidebar-mode="chat"] .global-site-nav{
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-sidebar-mode="chat"] .global-site-brand,
body[data-sidebar-mode="tools"] .global-site-brand,
body[data-sidebar-mode="controlboard"] .global-site-brand{
  display: none;
}

.global-site-nav-center{
  justify-self: start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.global-site-nav-center::-webkit-scrollbar,
.global-site-nav-right::-webkit-scrollbar{
  display: none;
}

.global-site-nav-right{
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-pill{
  min-height: 38px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 999px;
}

.global-site-nav-right .btn{
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.checkin-cta{
  min-width: 86px;
}

.tools-sidebar-nav{
  gap: 10px;
}

.tools-sidebar-title,
.tools-sidebar-subtitle{
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
}

.tools-sidebar-category-btn,
.tools-sidebar-tool-btn{
  border-radius: 10px !important;
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  box-shadow: none;
}

.tools-sidebar-category-btn{
  min-height: 0;
  padding: 11px 12px;
  gap: 6px;
}

.tools-sidebar-tool-btn{
  min-height: 38px;
  padding: 8px 12px;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.tools-sidebar-item-main{
  font-size: 14px;
  font-weight: 720;
  line-height: 1.25;
}

.tools-sidebar-item-desc{
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

.tools-sidebar-category-btn.is-active{
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  background:
    radial-gradient(140% 170% at 100% 0%, color-mix(in srgb, var(--primary2) 28%, transparent), transparent 62%),
    color-mix(in srgb, var(--primary2) 72%, transparent);
}

.account-switcher-simple .account-switcher-trigger{
  justify-content: flex-start !important;
  padding: 8px 12px;
  border-radius: 999px;
}

.account-switcher-avatar,
.topbar-avatar-initial{
  flex: 0 0 auto;
}

.account-switcher-meta{
  overflow: hidden;
}

.announcement-bar{
  margin: 10px 16px 0;
  padding: 10px 12px;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto;
  gap: 10px;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.announcement-badge{
  min-width: 108px;
  height: 24px;
  font-size: 12px;
  letter-spacing: 0;
}

.announcement-title,
.announcement-content{
  letter-spacing: 0;
}

.announcement-title{
  font-size: 13px;
}

.announcement-content{
  font-size: 12px;
  max-width: 100%;
}

.announcement-meta{
  font-size: 11px;
}

.announcement-actions{
  flex-wrap: nowrap;
  gap: 6px;
}

.announcement-nav{
  width: 28px;
  height: 28px;
}

.announcement-close{
  min-width: 52px;
  height: 28px;
  padding: 0 9px;
}

.tools-hub{
  padding: 18px 24px 24px;
}

.tools-hub-hero,
.tools-category-card,
.tools-hub-card{
  border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
  box-shadow: none;
}

.tools-hub-hero{
  border-radius: 14px;
  padding: 20px 22px;
}

.tools-hub-title{
  letter-spacing: 0;
}

.tools-category-card{
  border-radius: 14px;
  padding: 16px 18px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel2) 96%, transparent));
}

.tools-category-head{
  gap: 8px;
}

.tools-category-title{
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.tools-category-desc,
.tools-category-keywords{
  max-width: 920px;
}

.tools-hub-grid,
.controlboard-overview-grid{
  gap: 12px;
}

.tools-hub-card{
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel2) 96%, transparent));
}

.tools-hub-card-title,
.controlboard-overview-card-title{
  line-height: 1.25;
  letter-spacing: 0;
}

.tools-hub-card-desc,
.controlboard-overview-card-desc{
  line-height: 1.48;
}

.composer-inner{
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.composer-row{
  gap: 8px;
}

.composer-hint{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Controlboard visual system. */
body[data-sidebar-mode="controlboard"] .sidebar{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel2) 78%, transparent));
}

.controlboard-sidebar-nav{
  gap: 8px;
  padding: 0 2px;
}

.controlboard-sidebar-title{
  margin: 0 0 4px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
}

.controlboard-dock-item{
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  width: 100%;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
  padding: 11px 12px 11px 18px;
  border-radius: 8px !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.controlboard-dock-item::before{
  content: "";
  position: absolute;
  inset: 9px auto 9px 7px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 38%, transparent);
  opacity: 0;
  transition: opacity .16s var(--ease);
}

.controlboard-dock-item:hover,
.controlboard-dock-item:focus-visible{
  transform: none;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
  background: color-mix(in srgb, var(--primary2) 36%, transparent);
  text-decoration: none;
}

.controlboard-dock-item.is-active{
  border-color: color-mix(in srgb, var(--primary) 54%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary2) 70%, transparent), color-mix(in srgb, var(--primary2) 22%, transparent));
}

.controlboard-dock-item.is-active::before{
  opacity: 1;
}

.controlboard-dock-item-main{
  width: 100%;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 780;
  letter-spacing: 0;
  text-align: left;
}

.controlboard-dock-item-desc{
  max-width: 100%;
  width: 100%;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 66%, var(--muted));
  text-align: left;
}

.controlboard-overview{
  padding: 20px 24px 28px;
}

.controlboard-overview-head{
  position: relative;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  padding: 26px 28px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary2) 32%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 99%, transparent), color-mix(in srgb, var(--panel2) 96%, transparent));
}

.controlboard-overview-head::after{
  content: "";
  position: absolute;
  right: 28px;
  top: 28px;
  width: 132px;
  height: 72px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 18px;
  opacity: .34;
  pointer-events: none;
}

.controlboard-overview-tag{
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary2) 62%, transparent);
  letter-spacing: .12em;
}

.controlboard-overview-title{
  max-width: calc(100% - 170px);
  margin: 12px 0 8px;
  font-size: clamp(34px, 3.8vw, 48px);
  letter-spacing: 0;
}

.controlboard-overview-subtitle{
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
}

.controlboard-overview-grid{
  margin-top: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.controlboard-overview-card{
  position: relative;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 18px 16px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 99%, transparent), color-mix(in srgb, var(--panel2) 96%, transparent));
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  overflow: hidden;
}

.controlboard-overview-card::after{
  content: "";
  position: absolute;
  inset: auto 16px 14px auto;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 38%, transparent);
  opacity: .38;
}

.controlboard-overview-card:hover,
.controlboard-overview-card:focus-visible{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: 0 16px 34px rgba(37, 99, 235, .12);
  text-decoration: none;
}

.controlboard-overview-card-title{
  margin: 0;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: 0;
}

.controlboard-overview-card-desc{
  margin-top: 18px;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
}

.controlboard-overview-card-danger{
  grid-column: 1 / -1;
  min-height: 92px;
  border-color: color-mix(in srgb, var(--danger) 18%, var(--border));
}

.controlboard-overview-card-danger::after{
  background: color-mix(in srgb, var(--danger) 54%, transparent);
}

.controlboard-overview-card-danger:hover,
.controlboard-overview-card-danger:focus-visible{
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  box-shadow: 0 16px 34px rgba(220, 38, 38, .1);
}

body[data-sidebar-mode="controlboard"] .account-content{
  padding: 20px 20px 30px;
}

body[data-sidebar-mode="controlboard"] .account-hero{
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--primary2) 48%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel2) 94%, transparent));
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

body[data-sidebar-mode="controlboard"] .account-content .card{
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 99%, transparent), color-mix(in srgb, var(--panel2) 96%, transparent));
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

body[data-sidebar-mode="controlboard"] .account-content .card-title{
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
}

body[data-sidebar-mode="controlboard"] .account-non-member-guide,
body[data-sidebar-mode="controlboard"] .model-unlock-panel{
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary2) 22%, var(--panel)), color-mix(in srgb, var(--panel2) 95%, transparent));
}

body[data-sidebar-mode="controlboard"] .plan-tile,
body[data-sidebar-mode="controlboard"] .auth-row{
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

body[data-sidebar-mode="controlboard"] .plan-tile.active{
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: color-mix(in srgb, var(--primary2) 56%, var(--panel));
}

@media (max-width: 1260px){
  .global-site-nav{
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    gap: 8px;
    padding-left: 14px;
    padding-right: 12px;
  }

  .global-site-brand{
    max-width: 180px;
  }

  .global-site-brand-image{
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .global-site-brand-text{
    font-size: 18px;
  }

  .nav-pill{
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
  }

  .global-site-nav-right .btn{
    padding: 6px 9px;
    font-size: 12px;
  }
}

@media (max-width: 1100px){
  .global-site-nav{
    grid-template-columns: 1fr auto;
  }

  .global-site-brand{
    display: none;
  }

  .global-site-nav-center{
    justify-self: stretch;
  }
}

@media (max-width: 960px){
  body[data-sidebar-mode="tools"] .global-site-nav,
  body[data-sidebar-mode="controlboard"] .global-site-nav{
    grid-template-columns: 1fr;
  }

  .global-site-nav{
    grid-template-columns: 1fr;
    padding: 10px 12px;
    gap: 8px;
  }

  body[data-sidebar-mode="tools"] .global-site-brand,
  body[data-sidebar-mode="controlboard"] .global-site-brand{
    display: none;
  }

  .global-site-nav-center,
  .global-site-nav-right{
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .global-site-nav-center::-webkit-scrollbar,
  .global-site-nav-right::-webkit-scrollbar{
    display: none;
  }

  .global-site-nav-right{
    padding-bottom: 2px;
  }

  .nav-pill,
  .global-site-nav-right .btn{
    flex: 0 0 auto;
  }

  .announcement-bar{
    grid-template-columns: 1fr;
  }

  .announcement-badge{
    width: 100%;
  }

  .announcement-actions{
    justify-content: space-between;
  }

  .composer-hint{
    white-space: normal;
  }

  .controlboard-overview{
    padding: 14px 12px 24px;
  }

  .controlboard-overview-head{
    padding: 18px;
  }

  .controlboard-overview-head::after{
    display: none;
  }

  .controlboard-overview-title{
    max-width: none;
    font-size: 32px;
  }

  .controlboard-overview-grid{
    grid-template-columns: 1fr;
  }

  .controlboard-overview-card,
  .controlboard-overview-card-danger{
    grid-column: auto;
  }
}

@media (max-width: 640px){
  .tools-hub{
    padding: 14px 12px 22px;
  }

  .tools-hub-hero,
  .tools-category-card{
    border-radius: 12px;
    padding: 16px;
  }

  .tools-hub-title{
    font-size: 28px;
    line-height: 1.12;
  }

  .tools-category-title{
    font-size: 20px;
  }

  .tools-hub-grid,
  .controlboard-overview-grid{
    gap: 12px;
  }

  .tools-hub-card{
    border-radius: 11px;
    padding: 16px;
  }

  .tools-hub-card-title{
    font-size: 19px;
  }

  .controlboard-dock-item{
    padding: 10px 12px 10px 14px;
  }

  .controlboard-overview-card{
    min-height: 106px;
    padding: 16px;
  }

  .controlboard-overview-card-title{
    font-size: 19px;
  }

  .controlboard-overview-card-desc{
    margin-top: 12px;
  }
}

@media (max-width: 430px){
  .global-site-brand-image{
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .global-site-brand-text{
    font-size: 18px;
  }

  .nav-pill{
    min-height: 38px;
    padding: 8px 14px;
  }

  .global-site-nav-right .btn{
    min-height: 36px;
  }

  .checkin-cta{
    min-width: 82px;
  }

  .announcement-close{
    min-width: 58px;
  }
}

/* 2026-04 UI refinement: calmer app layout, bilingual-safe text, and stable tool panels. */
:root{
  --ui-surface: color-mix(in srgb, var(--panel) 96%, transparent);
  --ui-surface-soft: color-mix(in srgb, var(--panel2) 94%, transparent);
  --ui-border: color-mix(in srgb, var(--border) 72%, transparent);
  --ui-border-strong: color-mix(in srgb, var(--primary) 30%, var(--border));
  --ui-shadow-soft: 0 10px 24px rgba(15, 23, 42, .06);
}

body{
  letter-spacing: 0;
}

.main{
  background: color-mix(in srgb, var(--bg) 94%, #f8fbff 6%);
}

.global-site-nav{
  min-height: 64px;
  padding-inline: 18px;
  border-bottom-color: var(--ui-border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent);
}

.nav-pill{
  min-height: 36px;
  padding: 7px 16px;
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0;
}

.global-site-nav-right .btn{
  min-height: 34px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-avatar-trigger{
  max-width: 154px;
}

.announcement-bar{
  margin: 10px 16px 0;
  padding: 10px 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  border-radius: 12px;
  border-color: var(--ui-border-strong);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: none;
}

.announcement-badge{
  min-width: 118px;
  background: color-mix(in srgb, var(--primary) 88%, #0ea5e9);
}

.announcement-main{
  padding: 0;
}

.announcement-title,
.announcement-content,
.announcement-item-preview{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-content{
  max-width: 100%;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
}

.announcement-actions{
  flex-shrink: 0;
}

.tools-hub,
.controlboard-overview,
.referral-dashboard,
.account-content,
.resume-studio-shell{
  padding: 20px 28px 28px;
}

.tools-hub,
.controlboard-overview,
.referral-dashboard{
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
}

.tools-hub-hero,
.controlboard-overview-head,
.referral-hero,
.account-hero,
.membership-hero{
  border-radius: 12px;
  border-color: var(--ui-border-strong);
  box-shadow: none;
}

.tools-hub-hero,
.controlboard-overview-head{
  padding: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, transparent), color-mix(in srgb, var(--panel2) 92%, transparent));
}

.tools-hub-title,
.controlboard-overview-title,
.referral-hero-title{
  letter-spacing: 0;
}

.tools-category-list{
  gap: 16px;
}

.tools-category-card,
.tools-hub-card,
.controlboard-overview-card,
.referral-card,
body[data-sidebar-mode="controlboard"] .account-content .card,
.membership-order-card,
.membership-plan-card,
.membership-model-overview,
.membership-plan-tools,
.resume-studio-head,
.resume-studio-panel{
  border-radius: 12px;
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: none;
}

.tools-category-card{
  padding: 20px;
}

.tools-category-head{
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 18px;
}

.tools-category-title{
  font-size: 22px;
}

.tools-category-desc{
  max-width: 60ch;
}

.tools-category-keywords{
  justify-self: end;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--panel2) 86%, transparent);
}

.tools-hub-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tools-hub-grid:not(.tools-hub-grid-creative):not(.tools-hub-grid-single){
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tools-hub-grid-single{
  grid-template-columns: minmax(0, 360px);
}

.tools-hub-card,
.controlboard-overview-card{
  min-height: 106px;
  padding: 18px;
}

.tools-hub-card:hover,
.controlboard-overview-card:hover,
.membership-plan-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-soft);
}

.controlboard-overview-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.controlboard-overview-head::after{
  opacity: .2;
}

.controlboard-overview-card-danger{
  grid-column: 1 / -1;
}

.topbar{
  min-height: 56px;
  height: auto;
  padding: 10px 18px;
  border-bottom-color: var(--ui-border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.topbar-title{
  min-width: 0;
  font-size: 15px;
  letter-spacing: 0;
}

.topbar-actions{
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-content{
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
}

.account-grid{
  gap: 14px;
}

.card-title{
  letter-spacing: .02em;
}

.auth-row,
.status-row,
.usage-item,
.admin-metric-item,
.plan-tile,
.membership-order-row,
.membership-tier-row,
.membership-capability-section,
.membership-model-overview-row{
  border-color: var(--ui-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel2) 90%, transparent);
}

.auth-row{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, auto);
  align-items: center;
  gap: 12px;
}

.auth-kind,
.auth-actions{
  min-width: 0;
}

.auth-desc,
.usage-hint,
.plan-detail,
.membership-subtitle,
.membership-order-meta{
  overflow-wrap: anywhere;
}

.token-usage-summary,
.admin-metrics-grid,
.admin-overview-grid,
.admin-payment-overview-grid{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.token-usage-tools,
.admin-filter-row,
.admin-payment-filter-row,
.admin-user-usage-controls{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, auto);
  gap: 10px;
  align-items: center;
}

.token-usage-tools .input,
.token-usage-tools .select,
.admin-filter-row .input,
.admin-filter-row .select,
.admin-payment-filter-row .input,
.admin-payment-filter-row .select{
  min-width: 0;
}

.token-usage-table,
.admin-table,
.admin-user-usage-body{
  overflow-x: auto;
}

.membership-hero{
  margin-top: 0;
}

.membership-plan-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.membership-plan-card{
  padding: 16px;
}

.membership-plan-action-row{
  align-items: end;
  min-height: 50px;
}

.membership-plan-action-row .btn{
  max-height: 50px;
  border-radius: 999px;
}

.membership-plan-card::before{
  height: 3px;
}

.membership-plan-price{
  letter-spacing: 0;
}

.membership-cycle-toggle{
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  width: min(100%, 420px);
}

.membership-tier-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.membership-tier-name,
.membership-tier-status{
  overflow-wrap: normal;
  word-break: normal;
}

.referral-link-row{
  grid-template-columns: minmax(0, 1fr) auto;
}

.referral-link-box{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-studio-shell{
  max-width: 1480px;
  width: 100%;
  margin-inline: auto;
  gap: 14px;
}

.resume-studio-head{
  grid-template-columns: minmax(280px, .68fr) minmax(440px, 1.32fr);
  padding: 18px;
}

.resume-studio-head-side{
  grid-template-columns: minmax(240px, .38fr) minmax(0, .62fr);
}

.resume-studio-controls{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.resume-studio-grid{
  --resume-grid-cols: minmax(280px, .78fr) 8px minmax(440px, 1.26fr) 8px minmax(360px, .96fr);
}

.resume-studio-panel{
  min-height: 0;
  height: min(1020px, max(620px, calc(100vh - 216px)));
  max-height: 980px;
  padding: 18px;
}

.resume-editor-panel{
  gap: 12px;
}

.resume-editor-panel .resume-panel-head{
  min-height: auto;
  padding-bottom: 4px;
}

.resume-editor-panel .resume-panel-subtitle{
  max-width: 68ch;
}

.resume-editor-identity-fields{
  gap: 10px;
  margin-top: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-identity-card{
  min-height: 92px;
}

.resume-identity-card .input{
  min-height: 40px;
}

.resume-photo-upload-row{
  align-content: start;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
  align-items: center;
}

.resume-sidebar-panel{
  overflow: hidden;
}

.resume-sidebar-panel .resume-panel-head{
  min-height: auto;
  flex: 0 0 auto;
}

.resume-chat-tools{
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  flex: 0 0 auto;
}

.resume-chat-session-bar{
  grid-template-columns: minmax(0, 1fr) auto;
}

.resume-chat-tools > .resume-studio-field{
  min-width: 0;
}

.resume-chat-tools > .btn{
  width: 100%;
  min-height: 38px;
}

.resume-chat-attachments{
  flex: 0 0 auto;
}

.resume-chat-messages{
  flex: 1 1 280px;
  min-height: 220px;
  max-height: none;
}

.resume-chat-composer{
  flex: 0 0 auto;
  padding: 10px;
}

.resume-chat-input{
  min-height: 82px;
  max-height: 140px;
}

.resume-sidebar-panel .resume-quick-prompts{
  flex: 0 0 auto;
  max-height: 184px;
  overflow: auto;
  padding-right: 2px;
}

.resume-editor-surface,
.resume-editor-host,
.resume-editor-fallback{
  min-height: 0;
}

.resume-editor-surface{
  flex: 1 1 420px;
}

.resume-preview-shell{
  flex: 1 1 420px;
  min-height: 0;
}

button,
.btn,
.select,
.input,
.tile,
.card,
.tools-hub-card,
.controlboard-overview-card,
.membership-plan-card{
  overflow-wrap: anywhere;
}

@media (max-width: 1320px){
  .tools-hub,
  .controlboard-overview,
  .referral-dashboard,
  .account-content,
  .resume-studio-shell{
    padding-inline: 20px;
  }

  .tools-hub-grid,
  .tools-hub-grid:not(.tools-hub-grid-creative):not(.tools-hub-grid-single){
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resume-studio-grid{
    --resume-grid-cols: minmax(260px, .72fr) 8px minmax(420px, 1.18fr) 8px minmax(330px, .9fr);
  }
}

@media (max-width: 1100px){
  .resume-studio-head,
  .resume-studio-head-side,
  .resume-studio-grid{
    grid-template-columns: 1fr;
  }

  .resume-studio-panel{
    height: auto;
    max-height: none;
    min-height: 520px;
  }

  .resume-chat-messages{
    min-height: 300px;
  }
}

@media (max-width: 960px){
  .global-site-nav{
    padding: 10px 12px;
  }

  .global-site-nav-center,
  .global-site-nav-right{
    justify-content: flex-start;
  }

  .announcement-bar{
    grid-template-columns: 1fr;
  }

  .announcement-badge{
    width: fit-content;
  }

  .announcement-actions{
    justify-content: flex-start;
  }

  .tools-category-head,
  .auth-row,
  .token-usage-tools,
  .admin-filter-row,
  .admin-payment-filter-row,
  .admin-user-usage-controls,
  .referral-link-row{
    grid-template-columns: 1fr;
  }

  .tools-category-keywords{
    justify-self: start;
  }

  .account-grid,
  .controlboard-overview-grid{
    grid-template-columns: 1fr;
  }

  .membership-plan-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .tools-hub,
  .controlboard-overview,
  .referral-dashboard,
  .account-content,
  .resume-studio-shell{
    padding: 14px 12px 22px;
  }

  .global-site-nav-right .btn{
    max-width: none;
  }

  .tools-hub-grid,
  .tools-hub-grid:not(.tools-hub-grid-creative):not(.tools-hub-grid-single),
  .tools-hub-grid-single{
    grid-template-columns: 1fr;
  }

  .tools-hub-card,
  .controlboard-overview-card{
    min-height: 92px;
  }

  .membership-hero,
  .account-hero{
    flex-direction: column;
    align-items: stretch;
  }

  .membership-plan-tools{
    grid-template-columns: 1fr;
  }

  .membership-plan-grid{
    grid-template-columns: 1fr;
  }

  .membership-plan-action-row{
    min-height: 0;
  }

  .membership-plan-action-row .btn{
    min-height: 46px;
    max-height: 50px;
  }

  .resume-studio-panel{
    min-height: 0;
  }
}

/* 2026-04 page-wide surface pass: richer panels, clearer borders, and bilingual-safe copy blocks. */
:root{
  --ui-font-stack: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --ui-ink-strong: color-mix(in srgb, var(--text) 96%, #07111f);
  --ui-ink: color-mix(in srgb, var(--text) 88%, var(--muted));
  --ui-ink-soft: color-mix(in srgb, var(--text) 62%, var(--muted));
  --ui-line: color-mix(in srgb, var(--border) 70%, transparent);
  --ui-line-strong: color-mix(in srgb, var(--primary) 34%, var(--border));
  --ui-canvas: color-mix(in srgb, var(--bg) 88%, #f8fbff 12%);
  --ui-card: color-mix(in srgb, var(--panel) 88%, #f8fbff 12%);
  --ui-card-raised: color-mix(in srgb, var(--panel) 82%, #eef6ff 18%);
  --ui-field: color-mix(in srgb, var(--panel2) 84%, #f8fbff 16%);
  --ui-blue-soft: color-mix(in srgb, var(--primary2) 74%, #eef6ff 26%);
  --ui-green-soft: color-mix(in srgb, rgba(16,185,129,.15) 76%, var(--panel) 24%);
  --ui-amber-soft: color-mix(in srgb, rgba(245,158,11,.16) 76%, var(--panel) 24%);
  --ui-violet-soft: color-mix(in srgb, rgba(124,92,255,.14) 74%, var(--panel) 26%);
  --ui-radius-panel: 14px;
  --ui-radius-control: 10px;
  --ui-shadow-panel: 0 18px 44px rgba(15, 23, 42, .08);
  --ui-shadow-card: 0 10px 26px rgba(15, 23, 42, .06);
}

[data-theme="light"]{
  --ui-ink-strong: #101827;
  --ui-ink: #253044;
  --ui-ink-soft: #617089;
  --ui-line: rgba(15, 23, 42, .11);
  --ui-line-strong: rgba(37, 99, 235, .28);
  --ui-canvas: #f4f7fb;
  --ui-card: #ffffff;
  --ui-card-raised: #f8fbff;
  --ui-field: #f7faff;
}

body{
  background:
    radial-gradient(900px 560px at 20% -12%, color-mix(in srgb, var(--primary2) 70%, transparent), transparent 62%),
    radial-gradient(760px 520px at 100% 0%, color-mix(in srgb, rgba(16,185,129,.12) 70%, transparent), transparent 58%),
    var(--ui-canvas);
  font-family: var(--ui-font-stack);
  color: var(--ui-ink);
}

.main{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-canvas) 96%, transparent), color-mix(in srgb, var(--bg) 96%, transparent));
}

.global-site-nav,
.site-home-frame,
.sidebar{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 90%, transparent), color-mix(in srgb, var(--ui-card-raised) 86%, transparent));
  border-color: var(--ui-line);
}

.site-home-logo-text,
.global-site-brand-text,
.topbar-title,
.tools-hub-title,
.controlboard-overview-title,
.referral-hero-title,
.resume-studio-title,
.membership-title,
.account-name,
.card-title,
.tools-category-title,
.tools-hub-card-title,
.controlboard-overview-card-title,
.resume-panel-title,
.referral-card-title{
  color: var(--ui-ink-strong);
  text-wrap: balance;
}

.tools-hub-subtitle,
.controlboard-overview-subtitle,
.referral-hero-subtitle,
.resume-studio-subtitle,
.resume-panel-subtitle,
.tools-category-desc,
.tools-hub-card-desc,
.controlboard-overview-card-desc,
.auth-desc,
.usage-hint,
.membership-subtitle{
  color: var(--ui-ink-soft);
}

.nav-pill,
.global-site-nav-right .btn,
.tools-sidebar-category-btn,
.tools-sidebar-tool-btn,
.controlboard-dock-item,
.account-switcher-simple .account-switcher-trigger,
.topbar-avatar-trigger{
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-card) 82%, transparent);
  color: var(--ui-ink-strong);
}

.nav-pill:hover,
.global-site-nav-right .btn:hover,
.tools-sidebar-category-btn:hover,
.tools-sidebar-tool-btn:hover,
.controlboard-dock-item:hover,
.account-switcher-simple .account-switcher-trigger:hover,
.topbar-avatar-trigger:hover{
  border-color: var(--ui-line-strong);
  background: var(--ui-blue-soft);
  text-decoration: none;
}

.nav-pill[aria-current="page"],
.tools-sidebar-category-btn.is-active,
.tools-sidebar-tool-btn.is-active,
.controlboard-dock-item.is-active{
  border-color: var(--ui-line-strong);
  background:
    linear-gradient(135deg, var(--ui-blue-soft), color-mix(in srgb, var(--ui-card) 82%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}

.btn,
.input,
.select,
.auth-input{
  border-radius: var(--ui-radius-control);
}

.btn{
  min-height: 38px;
  border-color: var(--ui-line);
  color: var(--ui-ink-strong);
  font-weight: 750;
}

.btn-primary{
  border-color: color-mix(in srgb, var(--primary) 72%, #2563eb);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #60a5fa), color-mix(in srgb, var(--primary) 88%, #1d4ed8));
  color: #fff;
}

.input,
.select,
.auth-input,
textarea.input{
  border-color: var(--ui-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-field) 96%, transparent), color-mix(in srgb, var(--panel) 78%, transparent));
  color: var(--ui-ink-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 44%, transparent);
}

.input:focus,
.select:focus,
.auth-input:focus,
textarea.input:focus{
  border-color: color-mix(in srgb, var(--primary) 54%, var(--ui-line));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary2) 78%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent);
}

.input::placeholder,
.auth-input::placeholder{
  color: color-mix(in srgb, var(--ui-ink-soft) 72%, transparent);
}

.announcement-bar,
.tools-hub-hero,
.controlboard-overview-head,
.referral-hero,
.account-hero,
.membership-hero,
.resume-studio-head{
  border-radius: var(--ui-radius-panel);
  border-color: var(--ui-line-strong);
  background:
    linear-gradient(135deg, var(--ui-blue-soft), transparent 44%),
    linear-gradient(180deg, var(--ui-card), var(--ui-card-raised));
  box-shadow: var(--ui-shadow-card);
}

.tools-hub-hero,
.controlboard-overview-head,
.referral-hero,
.membership-hero,
.account-hero{
  min-height: 138px;
}

.tools-hub-tag,
.controlboard-overview-tag,
.referral-hero-tag,
.resume-studio-tag,
.announcement-badge,
.plan-pill,
.membership-current,
.resume-format-badge,
.resume-template-badge,
.tag{
  border: 1px solid var(--ui-line-strong);
  background: color-mix(in srgb, var(--primary2) 76%, var(--ui-card) 24%);
  color: color-mix(in srgb, var(--primary) 62%, var(--ui-ink-strong));
  font-weight: 800;
  letter-spacing: .04em;
}

.tools-category-card,
.tools-hub-card,
.controlboard-overview-card,
.referral-card,
.account-content .card,
.membership-order-card,
.membership-plan-card,
.membership-model-overview,
.membership-plan-tools,
.resume-studio-panel,
.auth-row,
.usage-item,
.status-row,
.plan-tile,
.membership-tier-row,
.membership-capability-section,
.membership-model-overview-row,
.admin-metric-item{
  border-color: var(--ui-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 86%, transparent));
  box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 46%, transparent);
}

.tools-category-card,
.controlboard-overview-card,
.referral-card,
.account-content .card,
.membership-order-card,
.membership-plan-card,
.resume-studio-panel{
  border-radius: var(--ui-radius-panel);
}

.tools-category-card,
.referral-card,
.account-content .card,
.membership-order-card,
.resume-studio-panel{
  padding: 20px;
}

.tools-category-card{
  position: relative;
  overflow: hidden;
}

.tools-category-card::before,
.membership-plan-card::before,
.resume-studio-panel::before,
.referral-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 72%, #38bdf8), color-mix(in srgb, var(--success) 58%, #22c55e));
  opacity: .78;
}

#toolsCategoryCareerSection::before,
.membership-order-card::before{
  background: linear-gradient(90deg, #10b981, #f59e0b);
}

#toolsCategoryDevSection::before,
.resume-preview-panel::before{
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
}

.tools-category-head{
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-line);
}

.tools-category-keywords{
  color: var(--ui-ink-soft);
  background: color-mix(in srgb, var(--ui-field) 82%, transparent);
}

.tools-hub-card,
.controlboard-overview-card{
  border-radius: 12px;
  justify-content: space-between;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ui-card) 94%, transparent), color-mix(in srgb, var(--ui-card-raised) 92%, transparent));
}

.tools-hub-card::after,
.controlboard-overview-card::after{
  content: "";
  position: absolute;
  inset: auto 18px 16px auto;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 42%, transparent);
}

.tools-hub-card:hover,
.controlboard-overview-card:hover,
.referral-card:hover,
.membership-plan-card:hover,
.plan-tile:hover{
  border-color: var(--ui-line-strong);
  box-shadow: var(--ui-shadow-card);
}

.tools-hub-card-title,
.controlboard-overview-card-title{
  font-size: 20px;
  line-height: 1.22;
}

.tools-hub-card-desc,
.controlboard-overview-card-desc{
  margin-top: 12px;
  font-size: 13px;
}

.composer{
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ui-canvas) 86%, transparent) 24%);
}

.composer-inner,
.image-composer,
.video-composer,
.resume-chat-composer{
  border-color: var(--ui-line-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 96%, transparent), color-mix(in srgb, var(--ui-card-raised) 88%, transparent));
  box-shadow: var(--ui-shadow-card);
}

.composer-mode-bar{
  gap: 10px;
}

.composer-mode-bar .btn,
.video-upload-row > .btn,
.resume-mode-switch .btn,
.resume-interview-type-switch .btn{
  background: color-mix(in srgb, var(--ui-card) 76%, transparent);
}

.image-studio-hero,
.video-studio-hero{
  border: 1px solid var(--ui-line);
  background:
    linear-gradient(135deg, var(--ui-violet-soft), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 90%, transparent), color-mix(in srgb, var(--ui-card-raised) 88%, transparent));
}

.image-field,
.video-field,
.resume-studio-field,
.resume-identity-card{
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-field) 76%, transparent);
}

.image-field > span,
.video-field > span,
.resume-studio-field > span,
.resume-field-label-row > span:first-child{
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.image-field-note{
  background: linear-gradient(135deg, var(--ui-amber-soft), color-mix(in srgb, var(--ui-card) 72%, transparent));
}

.video-tip,
.resume-panel-status,
.resume-points-mini-card,
.sidebar-hi-points-card{
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-blue-soft) 66%, var(--ui-card) 34%);
}

.messages::before{
  opacity: .7;
}

.messages .welcome h2,
.messages h2{
  color: var(--ui-ink-strong);
}

.account-grid{
  grid-template-columns: minmax(280px, .8fr) minmax(340px, 1.2fr);
  align-items: start;
}

.usage-overview-card,
.account-content .auth-card{
  grid-column: 1 / -1;
}

.points-card{
  background:
    linear-gradient(135deg, var(--ui-green-soft), transparent 44%),
    linear-gradient(180deg, var(--ui-card), var(--ui-card-raised));
}

.status-card{
  background:
    linear-gradient(135deg, var(--ui-amber-soft), transparent 42%),
    linear-gradient(180deg, var(--ui-card), var(--ui-card-raised));
}

.points-num,
.usage-value,
.admin-metric-value,
.membership-plan-price{
  color: var(--ui-ink-strong);
  font-weight: 850;
}

.auth-icon,
.account-avatar,
.account-switcher-avatar,
.topbar-avatar-initial{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, #60a5fa), color-mix(in srgb, var(--success) 52%, #22c55e));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.auth-row,
.membership-tier-row,
.membership-model-overview-row,
.usage-item,
.status-row{
  padding: 14px;
}

.token-usage-summary{
  gap: 12px;
}

.token-usage-tools{
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-panel);
  background: color-mix(in srgb, var(--ui-field) 70%, transparent);
}

.token-usage-table,
.admin-table{
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-card);
}

.membership-plan-grid{
  align-items: stretch;
}

.membership-plan-card{
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

.membership-plan-card:nth-child(2n)::before{
  background: linear-gradient(90deg, #0ea5e9, #10b981);
}

.membership-plan-card:nth-child(3n)::before{
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.membership-plan-action-row{
  margin-top: auto;
}

.membership-model-overview{
  padding: 16px;
}

.referral-dashboard{
  max-width: 1160px;
}

.referral-grid{
  gap: 16px;
}

.referral-link-box{
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-field) 80%, transparent);
}

.referral-dashboard,
.referral-grid,
.referral-card,
.referral-hero{
  min-width: 0;
}

.referral-hero > div{
  min-width: 0;
}

#referralRefreshBtn{
  flex: 0 0 auto;
}

.resume-studio-shell{
  padding-top: 18px;
}

.resume-studio-head{
  border-color: var(--ui-line-strong);
}

.resume-studio-panel{
  position: relative;
  overflow: hidden;
}

.resume-sidebar-panel::before{
  background: linear-gradient(90deg, #0ea5e9, #10b981);
}

.resume-editor-panel::before{
  background: linear-gradient(90deg, #6366f1, #0ea5e9);
}

.resume-preview-panel::before{
  background: linear-gradient(90deg, #f59e0b, #10b981);
}

.resume-panel-head{
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-line);
}

.resume-editor-surface,
.resume-preview-shell,
.resume-chat-messages{
  border-color: var(--ui-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-field) 82%, transparent), color-mix(in srgb, var(--ui-card) 90%, transparent));
}

.resume-chat-input,
.resume-editor-fallback,
.resume-algorithm-code-input{
  font-family: var(--mono);
}

.resume-profile-photo-preview{
  min-width: 0;
}

.resume-photo-upload-row .btn{
  min-width: 104px;
  white-space: normal;
  line-height: 1.15;
}

.account-content .auth-card{
  border-color: var(--ui-line-strong);
  background:
    linear-gradient(90deg, var(--ui-card) 0 68%, color-mix(in srgb, var(--primary2) 68%, transparent) 68% 100%),
    var(--ui-card);
}

.auth-title{
  color: var(--ui-ink-strong);
}

.auth-subtitle,
.auth-hint,
.auth-contact-note{
  color: var(--ui-ink-soft);
}

.auth-tab{
  border-color: var(--ui-line-strong);
  background: color-mix(in srgb, var(--ui-blue-soft) 72%, var(--ui-card) 28%);
}

.auth-tab.active{
  background: color-mix(in srgb, var(--primary2) 90%, var(--ui-card) 10%);
}

@media (max-width: 1100px){
  .account-grid{
    grid-template-columns: 1fr;
  }

  .usage-overview-card,
  .account-content .auth-card{
    grid-column: auto;
  }
}

@media (max-width: 720px){
  .tools-hub-hero,
  .controlboard-overview-head,
  .referral-hero,
  .membership-hero,
  .account-hero{
    min-height: 0;
  }

  .tools-category-card,
  .referral-card,
  .account-content .card,
  .membership-order-card,
  .resume-studio-panel{
    padding: 16px;
  }

  .account-content .auth-card{
    background: var(--ui-card);
  }
}

/* 2026-04 mobile and subpage alignment pass: stable nav rows, calmer panels, and bilingual-safe controls. */
:root{
  --ui-mobile-gutter: 16px;
}

.btn,
.nav-pill,
.topbar-avatar-trigger,
.account-switcher-item,
.announcement-nav,
.announcement-close{
  line-height: 1.18;
}

.btn,
.nav-pill,
.tools-hub-card,
.controlboard-overview-card,
.membership-plan-card,
.account-content .card,
.resume-studio-panel{
  transition:
    border-color .16s var(--ease),
    background-color .16s var(--ease),
    box-shadow .16s var(--ease),
    transform .16s var(--ease);
}

.btn:focus-visible,
.nav-pill:focus-visible,
.tools-hub-card:focus-visible,
.controlboard-overview-card:focus-visible,
.account-switcher-trigger:focus-visible,
.topbar-avatar-trigger:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary2) 86%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
}

.topbar{
  gap: 12px;
}

.topbar-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions .btn{
  min-width: 0;
}

.announcement-title{
  color: var(--ui-ink-strong);
}

.announcement-content{
  line-height: 1.45;
}

.composer-row{
  min-width: 0;
}

.composer-row > .input{
  min-width: 0;
}

.composer-hint{
  max-width: 100%;
}

.image-field-grid,
.video-field-grid,
.video-upload-row,
.resume-interview-algorithm-controls,
.resume-interview-written-controls{
  min-width: 0;
}

.video-task-query{
  min-width: 0;
}

.video-task-query .input{
  min-width: 0;
}

.resume-studio-field{
  min-width: 0;
}

.resume-studio-field > span,
.resume-field-label-row > span:first-child{
  line-height: 1.25;
}

.resume-studio-controls .select,
.resume-studio-controls .input,
.resume-chat-tools .select,
.resume-chat-tools .btn{
  width: 100%;
}

.membership-cycle-btn,
.membership-plan-action-row .btn,
.resume-mode-switch .btn,
.resume-interview-type-switch .btn{
  justify-content: center;
  text-align: center;
}

@media (max-width: 920px){
  .global-site-nav{
    align-content: start;
  }

  .global-site-nav-center,
  .global-site-nav-right{
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--ui-mobile-gutter);
  }

  .global-site-nav-center{
    margin-inline: calc(var(--ui-mobile-gutter) * -1);
    padding-inline: var(--ui-mobile-gutter);
    width: calc(100% + (var(--ui-mobile-gutter) * 2));
  }

  .global-site-nav-right{
    margin-inline: -8px;
    padding-inline: 8px;
    width: calc(100% + 16px);
  }

  .nav-pill{
    flex: 0 0 auto;
  }

  .announcement-bar{
    align-items: start;
  }

  .announcement-badge{
    min-width: 0;
  }

  .announcement-title,
  .announcement-content,
  .announcement-item-preview{
    white-space: normal;
  }

  .topbar{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .topbar-actions{
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-actions .btn{
    flex: 1 1 136px;
    justify-content: center;
    min-height: 42px;
  }

  .view-membership .topbar-actions .btn,
  .view-admin .topbar-actions .btn,
  .view-account .topbar-actions .btn{
    flex-basis: min(100%, 168px);
  }

  .referral-hero{
    align-items: stretch;
  }

  .referral-link-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .referral-link-box{
    min-width: 0;
  }
}

@media (max-width: 720px){
  :root{
    --ui-mobile-gutter: 12px;
  }

  .main{
    min-width: 0;
  }

  .global-site-nav{
    padding: 10px 12px 9px;
    gap: 8px;
  }

  .nav-pill{
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
  }

  .global-site-nav-right .btn{
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .topbar{
    padding: 10px 16px;
    min-height: 58px;
  }

  .topbar-title{
    font-size: 17px;
    font-weight: 850;
  }

  .announcement-bar{
    margin: 10px 16px 0;
    padding: 12px;
    gap: 10px;
  }

  .announcement-badge{
    height: 24px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .announcement-title{
    font-size: 14px;
    line-height: 1.32;
  }

  .announcement-content{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
  }

  .announcement-meta{
    font-size: 11px;
  }

  .announcement-actions{
    justify-content: flex-start;
  }

  .announcement-nav,
  .announcement-close{
    height: 30px;
    min-width: 30px;
  }

  .tools-hub,
  .controlboard-overview,
  .referral-dashboard,
  .account-content,
  .resume-studio-shell{
    padding: 16px;
  }

  .tools-hub-hero,
  .controlboard-overview-head,
  .referral-hero,
  .membership-hero,
  .account-hero,
  .resume-studio-head{
    padding: 18px;
  }

  .tools-hub-title,
  .controlboard-overview-title,
  .referral-hero-title,
  .membership-title,
  .resume-studio-title{
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.05;
  }

  .tools-category-title{
    font-size: 25px;
    line-height: 1.12;
  }

  .tools-hub-card-title,
  .controlboard-overview-card-title{
    font-size: 21px;
  }

  .tools-category-card,
  .referral-card,
  .account-content .card,
  .membership-order-card,
  .membership-plan-card,
  .resume-studio-panel{
    border-radius: 14px;
  }

  .account-hero{
    gap: 12px;
  }

  .account-avatar{
    width: 48px;
    height: 48px;
  }

  .auth-row,
  .status-row,
  .usage-item,
  .plan-tile,
  .membership-tier-row,
  .membership-model-overview-row{
    padding: 12px;
  }

  .token-usage-summary,
  .admin-metrics-grid,
  .admin-overview-grid,
  .admin-payment-overview-grid{
    grid-template-columns: 1fr;
  }

  .composer{
    padding: 10px;
  }

  .composer-mode-bar{
    padding-inline: 0;
  }

  .composer-mode-bar .btn{
    flex: 1 1 130px;
    min-height: 38px;
  }

  .composer-inner{
    padding: 10px;
    border-radius: 14px;
  }

  .composer-row{
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .attach-btn{
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }

  #webSearchToggleBtn{
    min-width: 74px;
    padding-inline: 10px;
  }

  #sendBtn{
    width: 58px;
    min-width: 58px;
    padding-inline: 0;
  }

  .composer-hint{
    white-space: normal;
    line-height: 1.35;
  }

  .image-field-grid,
  .video-field-grid,
  .video-upload-row,
  .resume-interview-algorithm-controls,
  .resume-interview-written-controls,
  .resume-interview-brief-grid,
  .resume-polish-brief-grid{
    grid-template-columns: 1fr;
  }

  .video-upload-row > .btn,
  .video-task-query{
    width: 100%;
  }

  .resume-studio-head{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .resume-studio-head-side{
    grid-template-columns: 1fr;
  }

  .resume-mode-switch,
  .resume-interview-type-switch{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resume-mode-switch .btn,
  .resume-interview-type-switch .btn{
    min-width: 0;
    white-space: normal;
  }

  .resume-points-mini-card{
    padding: 12px;
  }

  .resume-points-mini-grid{
    grid-template-columns: 1fr;
  }

  .resume-studio-controls{
    grid-template-columns: 1fr;
  }

  .resume-studio-panel{
    padding: 16px;
  }

  .resume-panel-head{
    gap: 12px;
  }

  .resume-panel-actions{
    width: 100%;
  }

  .resume-panel-actions .btn,
  .resume-chat-session-bar .btn,
  .resume-chat-composer .btn{
    width: 100%;
    justify-content: center;
  }

  .resume-chat-session-bar,
  .resume-chat-composer,
  .resume-photo-upload-row{
    grid-template-columns: 1fr;
  }

  .resume-editor-identity-fields{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px){
  .global-site-nav{
    padding-inline: 12px;
  }

  .global-site-nav-center,
  .global-site-nav-right{
    gap: 8px;
  }

  .nav-pill{
    padding-inline: 13px;
  }

  .global-site-nav-right .checkin-cta{
    max-width: none;
  }

  .topbar{
    padding-inline: 18px;
  }

  .topbar-actions .btn{
    flex-basis: 100%;
  }

  .referral-dashboard{
    padding-inline: 14px;
    width: 100%;
  }

  .referral-hero,
  .referral-grid,
  .referral-card{
    width: 100%;
    max-width: 100%;
  }

  .referral-hero{
    display: grid;
    grid-template-columns: 1fr;
  }

  #referralRefreshBtn{
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .referral-link-row{
    grid-template-columns: 1fr;
  }

  #referralCopyInviteLinkBtn{
    width: 100%;
    justify-content: center;
  }

  .referral-stage-dot{
    max-width: 9px;
  }

  .view-membership .topbar-actions,
  .view-account .topbar-actions,
  .view-admin .topbar-actions{
    display: grid;
    grid-template-columns: 1fr;
  }

  .tools-hub,
  .controlboard-overview,
  .referral-dashboard,
  .account-content,
  .resume-studio-shell{
    padding-inline: 14px;
  }

  .tools-hub-hero,
  .controlboard-overview-head,
  .referral-hero,
  .membership-hero,
  .account-hero,
  .resume-studio-head{
    padding: 16px;
  }

  .composer-row{
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  #webSearchToggleBtn{
    grid-column: 1 / 3;
    width: 100%;
    justify-content: center;
  }

  #sendBtn{
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: stretch;
    height: auto;
  }

  .composer-hint{
    font-size: 12px;
  }
}

/* 2026-04 visual hierarchy pass: richer controls without changing app behavior. */
:root{
  --ui-accent-cyan: #0ea5e9;
  --ui-accent-emerald: #10b981;
  --ui-accent-amber: #f59e0b;
  --ui-control-glow: color-mix(in srgb, var(--primary2) 72%, transparent);
}

.tools-hub-title,
.controlboard-overview-title,
.referral-hero-title,
.resume-studio-title,
.membership-title{
  font-weight: 860;
}

.tools-category-title,
.card-title,
.resume-panel-title,
.referral-card-title,
.auth-label,
.usage-label,
.membership-plan-name,
.membership-tier-name{
  font-weight: 790;
}

.btn{
  position: relative;
  isolation: isolate;
}

.btn:not(.btn-primary):not(:disabled),
.nav-pill:not(.is-active),
.account-switcher-item,
.topbar-avatar-item{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 94%, transparent), color-mix(in srgb, var(--ui-field) 78%, transparent));
}

.btn:not(.btn-primary):not(:disabled)::before,
.nav-pill:not(.is-active)::before{
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 38%;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 56%, transparent), transparent);
  opacity: .34;
  pointer-events: none;
  z-index: -1;
}

.btn:not(.btn-primary):hover,
.nav-pill:not(.is-active):hover,
.account-switcher-item:hover,
.topbar-avatar-item:hover{
  transform: translateY(-1px);
}

.btn-primary{
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--primary) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--primary) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.btn-toggle[aria-pressed="true"],
.resume-mode-switch .btn.is-active,
.resume-interview-type-switch .btn.is-active,
.membership-cycle-btn.is-active,
.plan-tile.active{
  border-color: color-mix(in srgb, var(--primary) 58%, var(--ui-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary2) 84%, var(--ui-card) 16%), color-mix(in srgb, var(--ui-card) 84%, transparent));
  color: color-mix(in srgb, var(--primary) 66%, var(--ui-ink-strong));
}

.tools-hub-card,
.controlboard-overview-card,
.plan-tile,
.auth-row,
.usage-item,
.membership-plan-card,
.referral-card{
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary2) 16%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 88%, transparent));
}

.tools-hub-grid > .tools-hub-card:nth-child(3n + 1)::after,
.controlboard-overview-grid > .controlboard-overview-card:nth-child(3n + 1)::after{
  background: color-mix(in srgb, var(--ui-accent-cyan) 58%, transparent);
}

.tools-hub-grid > .tools-hub-card:nth-child(3n + 2)::after,
.controlboard-overview-grid > .controlboard-overview-card:nth-child(3n + 2)::after{
  background: color-mix(in srgb, var(--ui-accent-emerald) 58%, transparent);
}

.tools-hub-grid > .tools-hub-card:nth-child(3n)::after,
.controlboard-overview-grid > .controlboard-overview-card:nth-child(3n)::after{
  background: color-mix(in srgb, var(--ui-accent-amber) 58%, transparent);
}

.tools-hub-card-title,
.controlboard-overview-card-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tools-hub-card-title::before,
.controlboard-overview-card-title::before{
  content: "";
  width: 7px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--ui-accent-emerald));
  flex: 0 0 auto;
}

.tools-hub-grid > .tools-hub-card:nth-child(3n + 2) .tools-hub-card-title::before,
.controlboard-overview-grid > .controlboard-overview-card:nth-child(3n + 2) .controlboard-overview-card-title::before{
  background: linear-gradient(180deg, var(--ui-accent-emerald), var(--ui-accent-amber));
}

.tools-hub-grid > .tools-hub-card:nth-child(3n) .tools-hub-card-title::before,
.controlboard-overview-grid > .controlboard-overview-card:nth-child(3n) .controlboard-overview-card-title::before{
  background: linear-gradient(180deg, var(--ui-accent-amber), var(--ui-accent-cyan));
}

.sidebar-label,
.tools-sidebar-title,
.tools-sidebar-subtitle,
.controlboard-sidebar-title,
.image-field > span,
.video-field > span,
.resume-studio-field > span,
.resume-field-label-row > span:first-child,
.card-title{
  letter-spacing: .055em;
}

.input:hover,
.select:hover,
textarea.input:hover{
  border-color: color-mix(in srgb, var(--primary) 34%, var(--ui-line));
}

@media (max-width: 1100px){
  .resume-studio-grid.is-polish-layout{
    grid-template-columns: 1fr;
  }

  .resume-studio-grid.is-polish-layout .resume-editor-panel{
    grid-column: 1;
  }

  .resume-studio-grid.is-polish-layout #resumeGridResizerLeft{
    display: none;
  }
}

@media (max-width: 720px){
  .tools-hub-card-title::before,
  .controlboard-overview-card-title::before{
    height: 16px;
  }

  .btn:not(.btn-primary):hover,
  .nav-pill:not(.is-active):hover{
    transform: none;
  }
}

/* 2026-04 interaction surfaces pass: menus, modals, and tabular secondary views. */
.chat-menu,
.floating-menu-panel,
.account-switcher-menu,
.topbar-avatar-menu{
  border-color: var(--ui-line-strong);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 92%, transparent));
  box-shadow: var(--ui-shadow-card);
}

.chat-menu-item,
.floating-menu-item,
.account-switcher-item,
.topbar-avatar-item{
  min-height: 34px;
  border-radius: 9px;
  color: var(--ui-ink-strong);
  font-weight: 720;
  letter-spacing: 0;
}

.chat-menu-item:hover,
.floating-menu-item:hover,
.account-switcher-item:hover,
.topbar-avatar-item:hover{
  border-color: var(--ui-line-strong);
  background: var(--ui-blue-soft);
}

.floating-menu-input,
.chat-rename-input{
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-field) 86%, transparent);
  color: var(--ui-ink-strong);
}

.modal-content,
.service-recharge-content,
.auth-card,
.checkin-card{
  border-radius: var(--ui-radius-panel);
}

.service-recharge-content,
.auth-card,
.checkin-card{
  border-color: var(--ui-line-strong);
  background:
    linear-gradient(135deg, var(--ui-blue-soft), transparent 42%),
    linear-gradient(180deg, var(--ui-card), var(--ui-card-raised));
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow-panel);
}

.auth-card::before{
  opacity: .42;
}

.auth-title,
.checkin-head-title{
  color: var(--ui-ink-strong);
  letter-spacing: 0;
}

.checkin-head-sub,
.checkin-summary-label{
  color: var(--ui-ink-soft);
}

.checkin-summary-item,
.recharge-pack-btn,
.membership-order-row,
.admin-table-row,
.admin-announcement-row,
.admin-payment-row,
.admin-user-usage-row{
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-field) 82%, transparent);
}

.token-usage-table table,
.admin-table table,
.admin-user-usage-body table{
  border-collapse: separate;
  border-spacing: 0;
}

.token-usage-table th,
.admin-table th,
.admin-user-usage-body th{
  color: var(--ui-ink-strong);
  font-weight: 800;
  letter-spacing: 0;
}

.token-usage-table td,
.admin-table td,
.admin-user-usage-body td{
  color: var(--ui-ink);
}

@media (max-width: 720px){
  .modal-content,
  .service-recharge-content,
  .auth-card,
  .checkin-card{
    border-radius: 14px;
  }

  .auth-card{
    padding: 22px 18px 18px;
  }
}

/* 2026-04 comprehensive UI alignment pass. */
:root{
  --ui-primary: #4f46e5;
  --ui-secondary: #7c3aed;
  --ui-accent: #10b981;
  --ui-brand-gradient: linear-gradient(135deg, var(--ui-primary), var(--ui-secondary));
  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent);
}

[data-theme="light"]{
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel2: #f8fbff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: var(--ui-primary);
  --primary2: rgba(79, 70, 229, .12);
}

body{
  font-size: 14px;
  line-height: 1.55;
}

a,
button,
.btn,
.nav-pill,
.tools-hub-card,
.controlboard-overview-card,
.membership-plan-card,
.tile{
  transition:
    transform .18s var(--ease),
    border-color .18s var(--ease),
    background .18s var(--ease),
    box-shadow .18s var(--ease),
    color .18s var(--ease);
}

button:focus-visible,
a:focus-visible,
.btn:focus-visible,
.input:focus,
.select:focus,
textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--ui-primary) 56%, var(--ui-line));
  box-shadow: var(--ui-focus-ring);
}

.global-site-nav{
  min-height: 64px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.global-site-nav-center{
  gap: 8px;
  padding: 6px 0;
  scroll-padding-inline: 12px;
}

.global-site-nav-right{
  gap: 8px;
  padding: 6px 0;
}

.nav-pill,
.global-site-nav-right .btn,
.topbar-avatar-trigger{
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.nav-pill.is-active,
.nav-pill[aria-current="page"],
.btn-primary,
.checkin-cta{
  box-shadow: 0 8px 20px rgba(79, 70, 229, .15);
}

.btn-primary,
.checkin-cta{
  background: var(--ui-brand-gradient);
  color: #fff;
}

.checkin-cta:hover,
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(79, 70, 229, .22);
}

.site-home-frame,
.sidebar{
  width: 272px;
}

.sidebar{
  padding: 88px 16px 16px;
  gap: 14px;
}

body[data-sidebar-mode="chat"] .sidebar{
  flex-basis: 272px;
}

.site-home-logo{
  padding: 0;
}

.site-home-logo-text{
  font-size: 20px;
}

.sidebar-section,
.tools-sidebar-category-btn,
.tools-sidebar-tool-btn,
.controlboard-dock-item,
.account-switcher-simple .account-switcher-trigger{
  border-radius: 12px !important;
}

.tools-sidebar-category-btn,
.controlboard-dock-item{
  padding: 12px 14px;
}

.tools-sidebar-tool-btn{
  min-height: 40px;
  justify-content: flex-start;
  padding-inline: 14px;
}

.tools-sidebar-item-main,
.controlboard-dock-item-main{
  font-size: 14px;
  line-height: 1.28;
}

.tools-sidebar-item-desc,
.controlboard-dock-item-desc{
  margin-top: 2px;
  line-height: 1.45;
}

.sidebar-bottom{
  gap: 10px;
}

.main{
  min-width: 0;
}

.announcement-bar{
  width: calc(100% - 32px);
  max-width: 1120px;
  margin: 12px auto 0;
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-primary) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--ui-card) 94%, transparent);
}

.announcement-badge{
  background: color-mix(in srgb, var(--ui-primary) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--ui-primary) 26%, var(--ui-line));
  color: color-mix(in srgb, var(--ui-primary) 86%, var(--text));
  box-shadow: none;
}

.announcement-title{
  color: var(--ui-ink-strong);
}

.tools-hub,
.controlboard-overview,
.referral-dashboard,
.account-content,
.resume-studio-shell{
  max-width: 1180px;
  padding: 22px 26px 30px;
}

.tools-hub-hero,
.controlboard-overview-head,
.referral-hero,
.account-hero,
.membership-hero,
.image-studio-shell,
.video-studio-shell{
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-primary) 9%, transparent), transparent 38%),
    linear-gradient(180deg, var(--ui-card), var(--ui-card-raised));
  box-shadow: var(--ui-shadow-card);
}

.tools-hub-hero,
.controlboard-overview-head{
  padding: 26px;
}

.tools-hub-tag,
.controlboard-overview-tag,
.referral-hero-tag,
.resume-studio-tag{
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 28%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-primary) 10%, #ffffff);
  color: color-mix(in srgb, var(--ui-primary) 88%, var(--text));
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tools-hub-title,
.controlboard-overview-title,
.referral-hero-title,
.membership-title{
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
}

.tools-category-card{
  padding: 22px 20px 20px;
  border-top: 3px solid color-mix(in srgb, var(--ui-primary) 52%, var(--ui-accent));
}

.tools-category-head{
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ui-line);
}

.tools-hub-grid,
.tools-hub-grid:not(.tools-hub-grid-creative):not(.tools-hub-grid-single){
  gap: 12px;
}

.tools-hub-card,
.controlboard-overview-card{
  position: relative;
  min-height: 112px;
  padding: 20px 20px 18px;
  overflow: hidden;
}

.tools-hub-card::before,
.controlboard-overview-card::before{
  content: "";
  position: absolute;
  left: 18px;
  top: 22px;
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: var(--ui-brand-gradient);
}

.tools-hub-card-title,
.controlboard-overview-card-title{
  padding-left: 16px;
  font-size: 20px;
  line-height: 1.2;
}

.tools-hub-card-desc,
.controlboard-overview-card-desc{
  margin-top: 22px;
  line-height: 1.55;
}

.tools-hub-card:hover,
.controlboard-overview-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ui-primary) 34%, var(--ui-line));
  box-shadow: 0 14px 30px rgba(79, 70, 229, .11);
}

.topbar{
  min-height: 58px;
  padding: 10px 18px;
}

.topbar-title{
  font-size: 16px;
  font-weight: 800;
}

.image-studio-actions,
.video-studio-actions{
  max-width: 980px;
  width: calc(100% - 48px);
  margin: 18px auto 10px;
}

.image-studio-shell,
.video-studio-shell,
.image-composer,
.video-composer{
  max-width: 980px;
  width: calc(100% - 48px);
  margin-inline: auto;
}

.image-studio-shell,
.video-studio-shell{
  padding: 14px;
}

.image-studio-hero,
.video-studio-hero{
  min-height: auto;
  padding: 14px 16px;
  border-radius: 12px;
}

.image-studio-hero-title,
.video-studio-hero-title{
  color: var(--ui-ink-strong);
  letter-spacing: .06em;
}

.image-studio-layout,
.video-studio-layout{
  grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  gap: 12px;
}

.image-studio-panel,
.video-studio-panel,
.image-tip-card,
.video-tip-card{
  border-radius: 12px;
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-card) 92%, transparent);
}

.image-studio-panel,
.video-studio-panel{
  min-height: 156px;
}

.image-tip-card,
.video-tip-card{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 10%, transparent), transparent 52%),
    color-mix(in srgb, var(--ui-card) 94%, transparent);
}

.image-composer,
.video-composer{
  border-radius: 14px;
  padding: 16px;
}

.image-composer-row,
.video-composer-row{
  gap: 12px;
}

.image-composer-input,
.video-composer-input{
  min-height: 44px;
}

.resume-studio-shell{
  max-width: none;
}

.resume-studio-head{
  padding: 18px 20px;
  border-radius: 14px;
}

.resume-studio-title{
  font-size: clamp(30px, 3.4vw, 42px);
}

.resume-studio-head-side,
.resume-studio-controls{
  gap: 10px;
}

.resume-mode-switch,
.resume-points-mini-card{
  min-height: 56px;
}

.resume-studio-panel{
  border-radius: 14px;
}

.resume-panel-title{
  font-size: 18px;
}

.membership-hero{
  padding: 24px;
}

.membership-cycle-toggle{
  max-width: 420px;
}

.membership-plan-card{
  border-top: 3px solid color-mix(in srgb, var(--ui-primary) 54%, var(--ui-accent));
}

.membership-plan-card.is-current,
.membership-plan-card.is-recommended{
  border-color: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-line));
  box-shadow: 0 14px 34px rgba(79, 70, 229, .12);
}

.membership-plan-price{
  font-size: clamp(28px, 3vw, 40px);
}

.account-grid,
.referral-grid{
  gap: 16px;
}

.card,
.membership-plan-card,
.membership-order-card,
.membership-model-overview,
.membership-plan-tools,
.referral-card,
body[data-sidebar-mode="controlboard"] .account-content .card{
  border-radius: 14px;
}

@media (max-width: 1100px){
  .site-home-frame,
  .sidebar{
    width: 260px;
  }

  body[data-sidebar-mode="chat"] .sidebar{
    flex-basis: 260px;
  }

  .image-studio-layout,
  .video-studio-layout{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px){
  .global-site-nav{
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 12px;
  }

  .global-site-nav-center,
  .global-site-nav-right{
    justify-content: flex-start;
    width: 100%;
    padding-inline: 0;
  }

  .global-site-nav-center{
    padding-left: 4px;
    scroll-padding-inline: 16px;
  }

  .global-site-nav-center::before,
  .global-site-nav-center::after{
    content: "";
    flex: 0 0 4px;
  }

  .nav-pill,
  .global-site-nav-right .btn,
  .topbar-avatar-trigger{
    min-height: 38px;
    padding: 8px 14px;
  }

  .announcement-bar{
    width: calc(100% - 24px);
    margin-top: 10px;
  }

  .announcement-title,
  .announcement-content,
  .announcement-item-preview{
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .tools-hub,
  .controlboard-overview,
  .referral-dashboard,
  .account-content,
  .resume-studio-shell{
    padding: 18px 16px 26px;
  }

  .image-studio-actions,
  .video-studio-actions,
  .image-studio-shell,
  .video-studio-shell,
  .image-composer,
  .video-composer{
    width: calc(100% - 24px);
  }
}

@media (max-width: 640px){
  body[data-sidebar-mode="tools"] .global-site-nav,
  body[data-sidebar-mode="controlboard"] .global-site-nav,
  body[data-sidebar-mode="chat"] .global-site-nav,
  .global-site-nav{
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .global-site-nav-center,
  .global-site-nav-right{
    display: flex;
    min-width: 0;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .nav-pill,
  .global-site-nav-right .btn,
  .topbar-avatar-trigger{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .topbar-avatar-name{
    display: none;
  }

  .announcement-bar{
    padding: 12px;
    gap: 10px;
  }

  .announcement-badge{
    width: fit-content;
  }

  .announcement-actions{
    display: flex;
    width: 100%;
  }

  .announcement-close{
    margin-left: auto;
  }

  .topbar{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .topbar-actions{
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .topbar-actions .btn{
    flex: 1 1 140px;
  }

  .tools-hub-hero,
  .controlboard-overview-head,
  .referral-hero,
  .account-hero,
  .membership-hero{
    padding: 18px;
  }

  .tools-hub-title,
  .controlboard-overview-title,
  .referral-hero-title,
  .membership-title{
    font-size: clamp(30px, 9vw, 38px);
  }

  .tools-category-head{
    display: grid;
    grid-template-columns: 1fr;
  }

  .tools-hub{
    max-width: 100%;
  }

  .tools-hub-hero,
  .tools-category-card{
    width: 100%;
  }

  .tools-category-keywords{
    justify-self: start;
    max-width: 100%;
  }

  .tools-hub-card,
  .controlboard-overview-card{
    min-height: 100px;
  }

  .membership-hero{
    gap: 16px;
  }

  .membership-hero-actions{
    width: 100%;
  }

  .membership-hero-actions .btn,
  .membership-current-pill{
    width: 100%;
    justify-content: center;
  }

  .image-studio-actions,
  .video-studio-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .image-studio-actions .btn,
  .video-studio-actions .btn{
    width: 100%;
    min-width: 0;
  }

  .image-studio-shell,
  .video-studio-shell{
    padding: 12px;
  }

  .image-studio-panel,
  .video-studio-panel{
    min-height: 0;
  }

  .image-composer,
  .video-composer{
    padding: 12px;
  }

  .image-composer-row,
  .video-composer-row{
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .image-composer-input,
  .video-composer-input{
    font-size: 13px;
  }

  .resume-studio-head{
    padding: 16px;
  }

  .resume-points-mini-card,
  .resume-points-mini-grid,
  .resume-studio-controls,
  .resume-studio-actions,
  .resume-editor-identity-fields,
  .resume-polish-keyword-bar,
  .resume-interview-usage-strip,
  .resume-interview-brief-grid,
  .resume-interview-quick-actions{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px){
  .nav-pill,
  .global-site-nav-right .btn,
  .topbar-avatar-trigger{
    padding-inline: 13px;
  }

  .tools-hub,
  .controlboard-overview,
  .referral-dashboard,
  .account-content,
  .resume-studio-shell{
    padding-inline: 10px;
  }
}

/* Final override: admin pages need the full workspace width for dense operational tables. */
.view-admin .account-content{
  max-width: none !important;
  overflow-x: clip;
}

.view-admin .account-content > .account-grid,
.view-admin .account-grid.admin-grid{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.view-admin .account-grid.admin-grid > .card,
.view-admin .account-grid.admin-grid > .card:nth-child(2),
.view-admin .admin-payment-card,
.view-admin .admin-announcement-card,
.view-admin #adminUsersPanel{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.view-admin .admin-payment-card,
.view-admin .admin-announcement-card{
  overflow: hidden;
}

.view-admin .admin-table{
  max-width: 100%;
}

/* Final mobile admin override must come last because desktop table rules use !important. */
@media (max-width: 720px){
  .view-admin .account-content{
    padding: 14px 12px 26px !important;
    overflow-x: hidden !important;
  }

  .view-admin .account-grid.admin-grid > .card,
  .view-admin .admin-payment-card,
  .view-admin .admin-announcement-card,
  .view-admin #adminUsersPanel{
    padding: 14px !important;
    overflow: visible !important;
  }

  .view-admin .admin-metrics-grid,
  .view-admin .admin-overview-grid,
  .view-admin .admin-payment-overview-grid,
  .view-admin .admin-filter-row,
  .view-admin .admin-payment-filter-row{
    grid-template-columns: 1fr !important;
  }

  .view-admin .admin-table{
    display: grid !important;
    gap: 10px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .view-admin .admin-table-head{
    display: none !important;
  }

  .view-admin .admin-table-row,
  #adminPaymentsTable .admin-table-row,
  #adminUsersTable .admin-table-row,
  #adminAnnouncementsTable .admin-announcement-row{
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--ui-panel-line) !important;
    border-radius: 12px !important;
    background: var(--ui-table-row-bg) !important;
  }

  .view-admin .admin-table-row > *,
  #adminPaymentsTable .admin-table-row > *,
  #adminUsersTable .admin-table-row > *,
  #adminAnnouncementsTable .admin-announcement-row > *{
    display: grid !important;
    grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .view-admin .admin-table-row > *::before{
    color: var(--ui-ink-soft);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  #adminPaymentsTable .admin-table-row > :nth-child(1)::before{ content: "User"; }
  #adminPaymentsTable .admin-table-row > :nth-child(2)::before{ content: "Order"; }
  #adminPaymentsTable .admin-table-row > :nth-child(3)::before{ content: "Trade"; }
  #adminPaymentsTable .admin-table-row > :nth-child(4)::before{ content: "Plan"; }
  #adminPaymentsTable .admin-table-row > :nth-child(5)::before{ content: "Type"; }
  #adminPaymentsTable .admin-table-row > :nth-child(6)::before{ content: "Amount"; }
  #adminPaymentsTable .admin-table-row > :nth-child(7)::before{ content: "Status"; }
  #adminPaymentsTable .admin-table-row > :nth-child(8)::before{ content: "Time"; }

  #adminUsersTable .admin-table-row > :nth-child(1)::before{ content: "User"; }
  #adminUsersTable .admin-table-row > :nth-child(2)::before{ content: "Role"; }
  #adminUsersTable .admin-table-row > :nth-child(3)::before{ content: "Plan"; }
  #adminUsersTable .admin-table-row > :nth-child(4)::before{ content: "Status"; }
  #adminUsersTable .admin-table-row > :nth-child(5)::before{ content: "Points"; }
  #adminUsersTable .admin-table-row > :nth-child(6)::before{ content: "Chat HP"; }
  #adminUsersTable .admin-table-row > :nth-child(7)::before{ content: "Removed API"; }
  #adminUsersTable .admin-table-row > :nth-child(8)::before{ content: "Actions"; }

  #adminAnnouncementsTable .admin-announcement-row > :nth-child(1)::before{ content: "Date"; }
  #adminAnnouncementsTable .admin-announcement-row > :nth-child(2)::before{ content: "Title"; }
  #adminAnnouncementsTable .admin-announcement-row > :nth-child(3)::before{ content: "Content"; }
  #adminAnnouncementsTable .admin-announcement-row > :nth-child(4)::before{ content: "Actions"; }

  .view-admin .admin-table-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .view-admin .admin-action-btn,
  .view-admin .admin-inline-select,
  .view-admin .admin-filter-row .btn,
  .view-admin .admin-payment-filter-row .btn{
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
  }
}

/* Fit admin tables into the refreshed full-width desktop workspace. */
:root{
  --ui-table-min-admin-users: 1068px;
  --ui-table-min-admin-payments: 1010px;
  --ui-table-min-admin-announcements: 940px;
}

#adminUsersTable .admin-table-row{
  grid-template-columns:
    minmax(150px, 1.08fr)
    minmax(104px, .66fr)
    minmax(132px, .86fr)
    minmax(118px, .76fr)
    minmax(124px, .82fr)
    minmax(92px, .58fr)
    minmax(92px, .58fr)
    minmax(256px, 1.66fr);
}

/* 2026-04 continued patrol: mobile nav should reveal entries instead of clipping them. */
@media (max-width: 640px){
  body[data-sidebar-mode="tools"] .global-site-nav,
  body[data-sidebar-mode="controlboard"] .global-site-nav,
  body[data-sidebar-mode="chat"] .global-site-nav,
  .global-site-nav{
    overflow: visible;
  }

  .global-site-nav-center,
  .global-site-nav-right{
    max-width: 100%;
    overflow: visible;
    flex-wrap: wrap;
    scroll-snap-type: none;
    gap: 8px;
  }

  .global-site-nav-center{
    padding-left: 0;
  }

  .global-site-nav-center::before,
  .global-site-nav-center::after{
    content: none;
  }

  .nav-pill,
  .global-site-nav-right .btn,
  .topbar-avatar-trigger{
    flex: 1 1 auto;
    min-width: max-content;
    min-height: 38px;
    padding-inline: 12px;
  }

  #globalNavDocsBtn,
  #globalNavContactBtn{
    flex-grow: 0;
  }

  body:not(.sidebar-open) .sidebar,
  body:not(.sidebar-open) .site-home-frame{
    visibility: hidden;
    pointer-events: none;
  }

  body.sidebar-open .sidebar,
  body.sidebar-open .site-home-frame{
    visibility: visible;
    pointer-events: auto;
  }
}

/* 2026-04 continued patrol: make admin data dense on desktop and readable on phones. */
.view-admin .input,
.view-admin .select{
  min-height: 38px;
}

.view-admin .admin-filter-row .input,
.view-admin .admin-filter-row .select,
.view-admin .admin-payment-filter-row .select{
  height: 38px;
}

@media (max-width: 720px){
  .view-admin .account-content{
    padding: 14px 12px 26px !important;
    overflow-x: hidden !important;
  }

  .view-admin .account-grid.admin-grid{
    gap: 12px !important;
  }

  .view-admin .account-grid.admin-grid > .card,
  .view-admin .admin-payment-card,
  .view-admin .admin-announcement-card,
  .view-admin #adminUsersPanel{
    padding: 14px !important;
    border-radius: 14px;
  }

  .view-admin .admin-metrics-grid,
  .view-admin .admin-overview-grid,
  .view-admin .admin-payment-overview-grid{
    grid-template-columns: 1fr !important;
  }

  .view-admin .admin-filter-row,
  .view-admin .admin-payment-filter-row{
    grid-template-columns: 1fr !important;
    padding: 10px;
    gap: 8px;
  }

  .view-admin .admin-filter-row .btn,
  .view-admin .admin-payment-filter-row .btn{
    width: 100%;
  }

  .view-admin .admin-table{
    display: grid;
    gap: 10px;
    overflow-x: visible !important;
    overflow-y: visible !important;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .view-admin .admin-table-head{
    display: none !important;
  }

  .view-admin .admin-table-row,
  #adminPaymentsTable .admin-table-row,
  #adminUsersTable .admin-table-row,
  #adminAnnouncementsTable .admin-announcement-row{
    width: 100% !important;
    min-width: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--ui-panel-line);
    border-radius: 12px;
    background: var(--ui-table-row-bg);
  }

  .view-admin .admin-table-row > *{
    display: grid;
    grid-template-columns: minmax(86px, .42fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border-right: 0;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .view-admin .admin-table-row > *::before{
    color: var(--ui-ink-soft);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  #adminPaymentsTable .admin-table-row > :nth-child(1)::before{ content: "User"; }
  #adminPaymentsTable .admin-table-row > :nth-child(2)::before{ content: "Order"; }
  #adminPaymentsTable .admin-table-row > :nth-child(3)::before{ content: "Trade"; }
  #adminPaymentsTable .admin-table-row > :nth-child(4)::before{ content: "Plan"; }
  #adminPaymentsTable .admin-table-row > :nth-child(5)::before{ content: "Type"; }
  #adminPaymentsTable .admin-table-row > :nth-child(6)::before{ content: "Amount"; }
  #adminPaymentsTable .admin-table-row > :nth-child(7)::before{ content: "Status"; }
  #adminPaymentsTable .admin-table-row > :nth-child(8)::before{ content: "Time"; }

  #adminUsersTable .admin-table-row > :nth-child(1)::before{ content: "User"; }
  #adminUsersTable .admin-table-row > :nth-child(2)::before{ content: "Role"; }
  #adminUsersTable .admin-table-row > :nth-child(3)::before{ content: "Plan"; }
  #adminUsersTable .admin-table-row > :nth-child(4)::before{ content: "Status"; }
  #adminUsersTable .admin-table-row > :nth-child(5)::before{ content: "Points"; }
  #adminUsersTable .admin-table-row > :nth-child(6)::before{ content: "Chat HP"; }
  #adminUsersTable .admin-table-row > :nth-child(7)::before{ content: "Removed API"; }
  #adminUsersTable .admin-table-row > :nth-child(8)::before{ content: "Actions"; }

  #adminAnnouncementsTable .admin-announcement-row > :nth-child(1)::before{ content: "Date"; }
  #adminAnnouncementsTable .admin-announcement-row > :nth-child(2)::before{ content: "Title"; }
  #adminAnnouncementsTable .admin-announcement-row > :nth-child(3)::before{ content: "Content"; }
  #adminAnnouncementsTable .admin-announcement-row > :nth-child(4)::before{ content: "Actions"; }

  .view-admin .admin-table-name{
    grid-template-columns: minmax(86px, .42fr) minmax(0, 1fr);
  }

  .view-admin .admin-table-name strong,
  .view-admin .admin-table-hint,
  .view-admin .admin-announcement-title,
  .view-admin .admin-announcement-content{
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .view-admin .admin-table-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .view-admin .admin-action-btn,
  .view-admin .admin-inline-select{
    width: 100%;
    max-width: none;
    min-height: 36px;
  }

  .view-admin .admin-pagination-row{
    gap: 8px;
  }
}

/* 2026-04 full surface audit pass: respect hidden state, admin workspace, and dark-mode table rhythm. */
[hidden]{
  display: none !important;
}

body[data-admin="0"] #controlboardDockAdminBtn,
body[data-admin="0"] #controlboardOpenAdminBtn,
body[data-admin="0"] #accountMenuAdminBtn,
body[data-admin="0"] #adminBtn{
  display: none !important;
}

:root{
  --ui-table-min-admin-users: 1120px;
  --ui-table-min-admin-payments: 1080px;
  --ui-table-min-admin-announcements: 980px;
  --ui-table-row-bg: color-mix(in srgb, var(--ui-card) 94%, transparent);
  --ui-table-row-alt: color-mix(in srgb, var(--ui-card-raised) 88%, transparent);
  --ui-table-head-bg: color-mix(in srgb, var(--ui-field) 82%, transparent);
  --ui-danger-soft: color-mix(in srgb, var(--danger) 14%, var(--ui-card) 86%);
}

html:not([data-theme="light"]){
  --ui-table-row-bg: rgba(15, 23, 36, .88);
  --ui-table-row-alt: rgba(20, 31, 48, .86);
  --ui-table-head-bg: rgba(28, 42, 64, .82);
  --ui-danger-soft: rgba(239, 68, 68, .14);
}

.announcement-bar{
  align-items: center;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr) auto;
}

.announcement-main,
.announcement-item-trigger{
  min-width: 0;
}

.announcement-content{
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: clip;
}

.announcement-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-avatar-menu,
.account-switcher-menu{
  border-color: var(--ui-panel-line);
  background: color-mix(in srgb, var(--ui-card) 98%, transparent);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}

html:not([data-theme="light"]) .topbar-avatar-menu,
html:not([data-theme="light"]) .account-switcher-menu{
  box-shadow: 0 22px 46px rgba(0, 0, 0, .44);
}

.account-switcher-item,
.topbar-avatar-item{
  border-radius: 9px;
  justify-content: flex-start;
}

.service-window-panel{
  min-width: 0;
}

.account-grid{
  align-items: stretch;
}

.account-content .card{
  min-width: 0;
}

.auth-row{
  min-width: 0;
}

.auth-actions{
  flex-wrap: wrap;
  justify-content: flex-end;
}

.auth-actions .input{
  min-width: min(100%, 220px);
}

.token-usage-table,
.admin-table{
  scrollbar-gutter: stable;
}

.view-admin .account-content{
  max-width: min(1280px, 100%);
  padding: 18px 24px 32px;
}

.view-admin .account-grid.admin-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.view-admin .account-grid.admin-grid > .card{
  min-width: 0;
  padding: 18px;
  border-color: var(--ui-panel-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 90%, transparent));
}

.view-admin .account-grid.admin-grid > .card:nth-child(2){
  display: grid;
  gap: 16px;
}

.view-admin .account-grid.admin-grid > .card:nth-child(2) > .card{
  margin: 0;
}

.view-admin .card-title{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.view-admin .card-title::before{
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 56%, var(--success));
  flex: 0 0 auto;
}

.view-admin .admin-metrics-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.view-admin .admin-metric-item{
  min-width: 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--ui-table-row-bg);
}

.view-admin .admin-metric-label{
  color: var(--ui-ink-soft);
  font-weight: 720;
}

.view-admin .admin-metric-value{
  color: var(--ui-ink-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.admin-filter-row,
.admin-payment-filter-row{
  width: 100%;
  padding: 12px;
  border: 1px solid var(--ui-panel-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-field) 68%, transparent);
}

.view-admin .admin-filter-row{
  grid-template-columns: minmax(220px, 1fr) minmax(136px, .36fr) minmax(136px, .36fr) minmax(110px, auto);
}

.view-admin .admin-payment-filter-row{
  grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(104px, auto);
}

.admin-filter-row .btn,
.admin-payment-filter-row .btn{
  min-width: 96px;
}

.view-admin .admin-table{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--ui-panel-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-card) 94%, transparent);
}

.view-admin .admin-table-row{
  width: max(100%, var(--ui-table-min-admin-users));
  min-width: var(--ui-table-min-admin-users);
  display: grid;
  align-items: center;
  gap: 0;
  border: 0;
  border-bottom: 1px solid var(--ui-panel-line);
  border-radius: 0;
  background: var(--ui-table-row-bg);
}

.view-admin .admin-table-row:nth-child(odd):not(.admin-table-head){
  background: var(--ui-table-row-alt);
}

.view-admin .admin-table-row:last-child{
  border-bottom: 0;
}

.view-admin .admin-table-head{
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 42px;
  background: var(--ui-table-head-bg);
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .03em;
}

.view-admin .admin-table-row > *{
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid color-mix(in srgb, var(--ui-panel-line) 64%, transparent);
}

.view-admin .admin-table-row > :last-child{
  border-right: 0;
}

.view-admin .admin-table-row > :not(:last-child){
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-admin .admin-table-name{
  display: grid;
  gap: 3px;
}

.view-admin .admin-table-hint{
  color: var(--ui-ink-soft);
  font-size: 12px;
  line-height: 1.25;
}

.view-admin .admin-table-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.view-admin .admin-action-btn{
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 12px;
}

.view-admin .admin-delete-btn{
  border-color: color-mix(in srgb, var(--danger) 34%, var(--ui-panel-line));
  background: var(--ui-danger-soft);
  color: color-mix(in srgb, var(--danger) 76%, var(--ui-ink-strong));
}

.view-admin .admin-inline-select{
  width: 100%;
  min-width: 104px;
  max-width: 148px;
  min-height: 34px;
  padding: 6px 28px 6px 9px;
  border-radius: 8px;
  font-size: 12px;
}

#adminPaymentsTable .admin-table-row{
  width: max(100%, var(--ui-table-min-admin-payments));
  min-width: var(--ui-table-min-admin-payments);
  grid-template-columns:
    minmax(130px, 1.05fr)
    minmax(198px, 1.5fr)
    minmax(190px, 1.42fr)
    minmax(92px, .66fr)
    minmax(92px, .66fr)
    minmax(96px, .68fr)
    minmax(96px, .7fr)
    minmax(116px, .83fr);
}

#adminUsersTable .admin-table-row{
  grid-template-columns:
    minmax(160px, 1.2fr)
    minmax(112px, .72fr)
    minmax(128px, .82fr)
    minmax(122px, .78fr)
    minmax(136px, .9fr)
    minmax(112px, .7fr)
    minmax(112px, .72fr)
    minmax(238px, 1.55fr);
}

#adminAnnouncementsTable .admin-announcement-row{
  width: max(100%, var(--ui-table-min-admin-announcements));
  min-width: var(--ui-table-min-admin-announcements);
  grid-template-columns: minmax(110px, .72fr) minmax(220px, 1.28fr) minmax(420px, 2.5fr) minmax(170px, 1fr);
}

#adminAnnouncementsTable .admin-announcement-content{
  white-space: normal;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.45;
  text-overflow: clip;
}

#adminAnnouncementsTable .admin-announcement-title{
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
}

.admin-announcement-launch-row{
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ui-panel-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-field) 66%, transparent);
}

.admin-pagination-row{
  min-height: 42px;
  padding-top: 10px;
}

.admin-pagination-row .hint{
  min-width: 96px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.admin-user-detail-panel{
  border-color: var(--ui-panel-line-active);
  background: color-mix(in srgb, var(--ui-card) 96%, transparent);
}

.admin-user-usage-controls{
  display: flex;
  flex-wrap: wrap;
}

.admin-user-usage-body{
  min-width: 0;
}

.admin-usage-section,
.admin-summary-card{
  border-color: var(--ui-panel-line);
  background: var(--ui-table-row-bg);
}

.admin-detail-table,
.admin-summary-table{
  min-width: 100%;
}

.admin-detail-table{
  display: table;
}

.admin-detail-table th,
.admin-detail-table td,
.admin-summary-table th,
.admin-summary-table td{
  border-color: var(--ui-panel-line);
}

.admin-share-bar{
  background: color-mix(in srgb, var(--ui-field) 86%, transparent);
}

.admin-announcement-canvas-panel{
  border-radius: 16px;
  border-color: var(--ui-panel-line-active);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 94%, transparent));
}

.admin-announcement-editor,
.admin-announcement-preview-wrap,
.admin-announcement-preview-card{
  border-color: var(--ui-panel-line);
  background: color-mix(in srgb, var(--ui-card) 94%, transparent);
}

html:not([data-theme="light"]) .global-site-nav,
html:not([data-theme="light"]) .site-home-frame,
html:not([data-theme="light"]) .sidebar,
html:not([data-theme="light"]) .topbar{
  background:
    linear-gradient(180deg, rgba(17, 25, 39, .94), rgba(13, 20, 33, .92));
  border-color: rgba(148, 163, 184, .16);
}

html:not([data-theme="light"]) .main{
  background:
    radial-gradient(860px 540px at 14% -14%, rgba(79, 140, 255, .13), transparent 62%),
    linear-gradient(180deg, #080d14, #0b111c 54%, #090e16);
}

html:not([data-theme="light"]) .tools-category-card,
html:not([data-theme="light"]) .tools-hub-card,
html:not([data-theme="light"]) .controlboard-overview-card,
html:not([data-theme="light"]) .referral-card,
html:not([data-theme="light"]) .account-content .card,
html:not([data-theme="light"]) .membership-order-card,
html:not([data-theme="light"]) .membership-plan-card,
html:not([data-theme="light"]) .membership-model-overview,
html:not([data-theme="light"]) .membership-plan-tools,
html:not([data-theme="light"]) .resume-studio-panel,
html:not([data-theme="light"]) .admin-metric-item,
html:not([data-theme="light"]) .auth-row,
html:not([data-theme="light"]) .usage-item,
html:not([data-theme="light"]) .status-row,
html:not([data-theme="light"]) .plan-tile{
  border-color: rgba(148, 163, 184, .16);
  background:
    linear-gradient(180deg, rgba(18, 27, 42, .94), rgba(12, 19, 32, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

html:not([data-theme="light"]) .tools-hub-hero,
html:not([data-theme="light"]) .controlboard-overview-head,
html:not([data-theme="light"]) .referral-hero,
html:not([data-theme="light"]) .account-hero,
html:not([data-theme="light"]) .membership-hero,
html:not([data-theme="light"]) .resume-studio-head,
html:not([data-theme="light"]) .announcement-bar{
  border-color: rgba(96, 165, 250, .28);
  background:
    linear-gradient(135deg, rgba(59, 130, 246, .16), transparent 46%),
    linear-gradient(180deg, rgba(18, 27, 42, .96), rgba(12, 19, 32, .92));
  box-shadow: none;
}

html:not([data-theme="light"]) .input,
html:not([data-theme="light"]) .select,
html:not([data-theme="light"]) .auth-input,
html:not([data-theme="light"]) textarea.input{
  border-color: rgba(148, 163, 184, .2);
  background: rgba(8, 13, 22, .74);
  color: #eef4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

html:not([data-theme="light"]) .input:focus,
html:not([data-theme="light"]) .select:focus,
html:not([data-theme="light"]) .auth-input:focus,
html:not([data-theme="light"]) textarea.input:focus{
  border-color: rgba(96, 165, 250, .58);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

html:not([data-theme="light"]) .btn-ghost{
  border-color: rgba(148, 163, 184, .18);
  color: #e8eef8;
}

html:not([data-theme="light"]) .btn-ghost:hover{
  border-color: rgba(96, 165, 250, .42);
  background: rgba(59, 130, 246, .14);
}

html:not([data-theme="light"]) .btn-primary{
  color: #ffffff;
  background: linear-gradient(180deg, #5b8cff, #3168e6);
}

html:not([data-theme="light"]) .usage-hint,
html:not([data-theme="light"]) .auth-desc,
html:not([data-theme="light"]) .tools-hub-card-desc,
html:not([data-theme="light"]) .controlboard-overview-card-desc,
html:not([data-theme="light"]) .membership-subtitle,
html:not([data-theme="light"]) .referral-hero-subtitle,
html:not([data-theme="light"]) .announcement-content{
  color: rgba(226, 232, 240, .72);
}

@media (max-width: 1200px){
  .view-admin .admin-metrics-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .view-admin .admin-filter-row,
  .view-admin .admin-payment-filter-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px){
  .announcement-bar{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .announcement-title{
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .view-admin .account-content{
    padding: 16px 14px 24px;
  }

  .view-admin .account-grid.admin-grid > .card{
    padding: 14px;
  }

  .view-admin .admin-filter-row,
  .view-admin .admin-payment-filter-row{
    grid-template-columns: 1fr;
  }

  .admin-filter-row .btn,
  .admin-payment-filter-row .btn{
    width: 100%;
  }

  .admin-announcement-launch-row{
    grid-template-columns: 1fr;
  }

  .view-admin .admin-metrics-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  body[data-sidebar-mode="chat"] .composer-row{
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 58px;
    align-items: stretch;
    gap: 8px;
  }

  body[data-sidebar-mode="chat"] .composer-row > .input,
  body[data-sidebar-mode="chat"] #prompt{
    grid-column: 2;
    width: 100%;
    min-width: 0;
  }

  body[data-sidebar-mode="chat"] .attach-btn{
    grid-column: 1;
    grid-row: 1;
  }

  body[data-sidebar-mode="chat"] #webSearchToggleBtn{
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  body[data-sidebar-mode="chat"] #sendBtn{
    grid-column: 3;
    grid-row: 1 / 3;
    width: 58px;
    min-width: 58px;
    align-self: stretch;
  }

  .auth-row{
    grid-template-columns: 1fr;
  }

  .auth-actions{
    justify-content: stretch;
  }

  .auth-actions .input,
  .auth-actions .btn{
    width: 100%;
  }

  .view-admin .admin-metrics-grid{
    grid-template-columns: 1fr;
  }

  .admin-pagination-row{
    justify-content: stretch;
  }

  .admin-pagination-row .btn{
    flex: 1 1 0;
  }
}

/* 2026-04 final operational UI rhythm pass: quieter typography and single-marker cards. */
:root{
  --ui-title-weight: 790;
  --ui-section-weight: 740;
  --ui-action-weight: 680;
  --ui-panel-line: color-mix(in srgb, var(--ui-line) 88%, transparent);
  --ui-panel-line-active: color-mix(in srgb, var(--ui-primary) 24%, var(--ui-line));
}

.global-site-nav{
  min-height: 60px;
  border-bottom-color: var(--ui-panel-line);
}

.nav-pill,
.global-site-nav-right .btn,
.topbar-avatar-trigger{
  min-height: 36px;
  padding: 7px 14px;
  font-weight: var(--ui-action-weight);
  box-shadow: none;
}

.nav-pill.is-active,
.nav-pill[aria-current="page"],
.checkin-cta{
  box-shadow: 0 6px 16px rgba(79, 70, 229, .10);
}

.tools-hub,
.controlboard-overview,
.referral-dashboard,
.account-content,
.resume-studio-shell{
  max-width: 1160px;
  padding-top: 18px;
}

.tools-hub-hero,
.controlboard-overview-head,
.referral-hero,
.account-hero,
.membership-hero,
.resume-studio-head{
  border-color: var(--ui-panel-line-active);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.tools-hub-hero,
.controlboard-overview-head{
  min-height: 126px;
  padding: 22px 24px;
}

.tools-hub-title,
.controlboard-overview-title,
.referral-hero-title,
.membership-title,
.resume-studio-title{
  font-size: clamp(28px, 3.15vw, 38px);
  font-weight: var(--ui-title-weight);
  line-height: 1.12;
}

.controlboard-overview-title{
  margin: 10px 0 6px;
}

.tools-hub-subtitle,
.controlboard-overview-subtitle,
.referral-hero-subtitle,
.membership-subtitle,
.resume-studio-subtitle{
  font-size: 14px;
  line-height: 1.55;
}

.tools-hub-tag,
.controlboard-overview-tag,
.referral-hero-tag,
.resume-studio-tag,
.announcement-badge,
.plan-pill,
.membership-current,
.tag{
  font-weight: 700;
  letter-spacing: .035em;
}

.tools-category-card,
.tools-hub-card,
.controlboard-overview-card,
.referral-card,
.account-content .card,
.membership-order-card,
.membership-plan-card,
.membership-model-overview,
.membership-plan-tools,
.resume-studio-panel,
.auth-row,
.usage-item,
.status-row,
.plan-tile,
.admin-metric-item{
  border-color: var(--ui-panel-line);
  box-shadow: none;
}

.tools-hub-card,
.controlboard-overview-card{
  min-height: 100px;
  padding: 18px 18px 16px;
}

.tools-hub-card::before,
.controlboard-overview-card::before{
  left: 18px;
  top: 20px;
  width: 4px;
  height: 17px;
}

.tools-hub-card-title,
.controlboard-overview-card-title{
  padding-left: 14px;
  font-size: 17px;
  font-weight: var(--ui-section-weight);
  line-height: 1.28;
  letter-spacing: 0;
}

.tools-hub-card-title::before,
.controlboard-overview-card-title::before{
  content: none;
  display: none;
}

.tools-hub-card-desc,
.controlboard-overview-card-desc{
  margin-top: 18px;
  font-size: 13px;
}

.tools-hub-card::after,
.controlboard-overview-card::after{
  width: 24px;
  opacity: .34;
}

.controlboard-overview-card:hover,
.tools-hub-card:hover{
  transform: translateY(-1px);
  border-color: var(--ui-panel-line-active);
  box-shadow: 0 10px 24px rgba(79, 70, 229, .075);
}

.controlboard-sidebar-title,
.tools-sidebar-title,
.tools-sidebar-subtitle,
.sidebar-label{
  letter-spacing: .08em;
}

.controlboard-dock-item,
.tools-sidebar-category-btn,
.tools-sidebar-tool-btn{
  border-color: var(--ui-panel-line);
  font-weight: var(--ui-action-weight);
}

.controlboard-dock-item-main,
.tools-sidebar-item-main{
  font-weight: 720;
}

.card-title,
.referral-card-title,
.resume-panel-title,
.membership-plan-name,
.membership-model-overview-title,
.admin-user-name{
  font-size: 17px;
  font-weight: var(--ui-section-weight);
  letter-spacing: 0;
}

.points-num,
.usage-value,
.admin-metric-value,
.membership-plan-price{
  font-weight: 780;
}

.btn{
  font-weight: var(--ui-action-weight);
}

.announcement-bar{
  border-color: var(--ui-panel-line-active);
  box-shadow: none;
}

.announcement-title{
  font-weight: 740;
}

.account-hero,
.membership-hero,
.referral-hero{
  min-height: 118px;
}

.membership-plan-card{
  min-height: 260px;
}

.membership-plan-name{
  font-size: 19px;
}

.resume-studio-head{
  max-width: 1480px;
  margin-inline: auto;
}

.resume-studio-title{
  font-size: clamp(28px, 3vw, 38px);
}

@media (max-width: 720px){
  .tools-hub-hero,
  .controlboard-overview-head,
  .referral-hero,
  .account-hero,
  .membership-hero,
  .resume-studio-head{
    padding: 16px;
  }

  .tools-hub-title,
  .controlboard-overview-title,
  .referral-hero-title,
  .membership-title,
  .resume-studio-title{
    font-size: clamp(25px, 7.4vw, 32px);
  }

  .tools-hub-card,
  .controlboard-overview-card{
    min-height: 92px;
  }

  .tools-hub-card-title,
  .controlboard-overview-card-title{
    font-size: 17px;
  }

  .view-membership .topbar-actions,
  .view-account .topbar-actions,
  .view-admin .topbar-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .view-membership .topbar-actions .btn,
  .view-account .topbar-actions .btn,
  .view-admin .topbar-actions .btn{
    width: 100%;
    min-height: 40px;
    padding-inline: 10px;
  }
}

/* Last-mile admin override: keep dense admin tables inside a full-width workspace. */
.view-admin .account-content{
  max-width: none !important;
  overflow-x: clip !important;
}

.view-admin .account-content > .account-grid,
.view-admin .account-grid.admin-grid{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.view-admin .account-grid.admin-grid > .card,
.view-admin .account-grid.admin-grid > .card:nth-child(2),
.view-admin .admin-payment-card,
.view-admin .admin-announcement-card,
.view-admin #adminUsersPanel{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.view-admin .admin-payment-card,
.view-admin .admin-announcement-card{
  overflow: hidden !important;
}

.view-admin .admin-table{
  max-width: 100%;
}

/* Final post-patrol admin table fit. Keep this after all admin workspace overrides. */
.view-admin #adminUsersTable .admin-table-row{
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns:
    minmax(140px, 1.05fr)
    minmax(96px, .62fr)
    minmax(120px, .78fr)
    minmax(108px, .7fr)
    minmax(118px, .76fr)
    minmax(82px, .52fr)
    minmax(82px, .52fr)
    minmax(232px, 1.48fr) !important;
}

.view-admin #adminPaymentsTable .admin-table-row{
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns:
    minmax(122px, 1fr)
    minmax(184px, 1.42fr)
    minmax(178px, 1.32fr)
    minmax(82px, .58fr)
    minmax(82px, .58fr)
    minmax(88px, .62fr)
    minmax(88px, .64fr)
    minmax(104px, .74fr) !important;
}

@media (max-width: 720px){
  .view-admin .admin-payment-card,
  .view-admin .admin-announcement-card,
  .view-admin #adminUsersPanel{
    overflow: visible !important;
  }

  .view-admin .admin-table{
    display: grid !important;
    gap: 10px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .view-admin .admin-table-head{
    display: none !important;
  }

  .view-admin #adminPaymentsTable .admin-table-row,
  .view-admin #adminUsersTable .admin-table-row,
  .view-admin #adminAnnouncementsTable .admin-announcement-row{
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--ui-panel-line) !important;
    border-radius: 12px !important;
  }

  .view-admin #adminPaymentsTable .admin-table-row > *,
  .view-admin #adminUsersTable .admin-table-row > *,
  .view-admin #adminAnnouncementsTable .admin-announcement-row > *{
    display: grid !important;
    grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    border-right: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }
}

/* 2026-04 comprehensive UI alignment: full-width account surfaces, consistent actions, and darker admin rhythm. */
:root{
  --ui-control-radius: 12px;
  --ui-card-radius: 14px;
  --ui-hairline: color-mix(in srgb, var(--ui-line) 78%, transparent);
  --ui-action-surface: rgba(255, 255, 255, .94);
  --ui-action-surface-hover: rgba(239, 246, 255, .98);
  --ui-action-text: #111827;
  --ui-action-text-muted: #1f2937;
  --ui-action-accent: #4f46e5;
  --ui-action-accent-2: #2563eb;
  --ui-action-active-bg: #111827;
  --ui-action-active-bg-2: #1f2937;
  --ui-action-active-text: #ffffff;
  --ui-action-accent-soft: rgba(37, 99, 235, .12);
}

html:not([data-theme="light"]){
  --ui-hairline: rgba(148, 163, 184, .18);
  --ui-action-surface: rgba(30, 41, 59, .86);
  --ui-action-surface-hover: rgba(51, 65, 85, .92);
  --ui-action-text: rgba(241, 245, 249, .94);
  --ui-action-text-muted: rgba(226, 232, 240, .9);
  --ui-action-active-bg: #e8e5ff;
  --ui-action-active-bg-2: #d7d3ff;
  --ui-action-active-text: #4338ca;
  --ui-action-accent-soft: rgba(79, 70, 229, .18);
}

[data-theme="light"]{
  --ui-action-surface: rgba(255, 255, 255, .94);
  --ui-action-surface-hover: rgba(239, 246, 255, .98);
  --ui-action-text: #111827;
  --ui-action-text-muted: #1f2937;
  --ui-action-active-bg: #111827;
  --ui-action-active-bg-2: #1f2937;
  --ui-action-active-text: #ffffff;
  --ui-action-accent-soft: rgba(37, 99, 235, .12);
}

.btn,
.nav-pill,
.global-site-nav-right .btn,
.topbar-avatar-trigger,
.account-switcher-trigger,
.membership-cycle-btn{
  border-radius: var(--ui-control-radius);
  letter-spacing: 0;
}

.nav-pill,
.global-site-nav-right .btn,
.topbar-avatar-trigger{
  border-color: var(--ui-hairline);
  background: var(--ui-action-surface);
  color: var(--ui-action-text);
}

.nav-pill:hover,
.global-site-nav-right .btn:hover,
.topbar-avatar-trigger:hover{
  border-color: color-mix(in srgb, var(--ui-action-accent) 34%, var(--ui-hairline));
  background: var(--ui-action-surface-hover);
}

.nav-pill.is-active,
.nav-pill[aria-current="page"],
#globalNavControlboardBtn[aria-current="page"],
.global-site-nav-center .nav-pill.is-active,
.global-site-nav-center .nav-pill[aria-current="page"]{
  border-color: color-mix(in srgb, var(--ui-action-accent) 48%, var(--ui-hairline));
  background: linear-gradient(180deg, var(--ui-action-active-bg), var(--ui-action-active-bg-2)) !important;
  color: var(--ui-action-active-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px color-mix(in srgb, var(--ui-action-accent) 14%, transparent);
}

.nav-pill.is-active:hover,
.nav-pill[aria-current="page"]:hover,
#globalNavControlboardBtn[aria-current="page"]:hover{
  color: var(--ui-action-active-text) !important;
}

.checkin-cta,
.btn-primary{
  border-color: color-mix(in srgb, var(--ui-action-accent) 54%, transparent);
  background: linear-gradient(180deg, var(--ui-action-accent), var(--ui-action-accent-2));
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ui-action-accent) 16%, transparent);
}

.checkin-cta:hover,
.btn-primary:hover{
  border-color: color-mix(in srgb, var(--ui-action-accent) 68%, transparent);
  background: linear-gradient(180deg, #5b54ec, #2d6dec);
}

.view-account .service-window-panel,
.view-membership .service-window-panel,
.view-admin{
  min-width: 0;
}

.view-account .account-content,
.view-membership .account-content{
  width: 100%;
  max-width: none !important;
  padding: 28px clamp(20px, 3.2vw, 44px) 42px !important;
  overflow-x: clip;
}

.view-account .account-hero,
.view-account .model-unlock-card,
.view-account .account-grid,
.view-membership .membership-hero,
.view-membership .membership-plan-tools,
.view-membership .membership-model-overview,
.view-membership .membership-plan-grid,
.view-membership .membership-order-card{
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.view-account .account-hero,
.view-membership .membership-hero{
  min-height: 116px;
  border-radius: var(--ui-card-radius);
  padding: 22px 24px;
  background:
    linear-gradient(135deg, var(--ui-action-accent-soft), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 92%, transparent));
  box-shadow: none;
}

.view-account .account-grid{
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(520px, 1.22fr);
  gap: 18px;
  align-items: stretch;
}

#accountView[data-account-mode="settings"] .account-grid{
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
}

#accountView[data-account-mode="settings"] .status-card,
#accountView[data-account-mode="settings"] .auth-card{
  width: 100% !important;
  max-width: none !important;
}

.view-account .model-unlock-card{
  margin-top: 18px;
}

.view-account .account-content .card,
.view-membership .membership-order-card,
.view-membership .membership-model-overview,
.view-membership .membership-plan-tools,
.view-membership .membership-plan-card{
  border-radius: var(--ui-card-radius);
  border-color: var(--ui-hairline);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 92%, transparent));
  box-shadow: none;
}

.view-account .status-card{
  min-height: 100%;
}

.view-account .plan-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.view-account .plan-tile{
  min-height: 74px;
  padding: 13px 14px;
  border-radius: 12px;
}

.view-account .plan-name{
  font-size: 15px;
  font-weight: 760;
}

.view-account .plan-detail{
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
}

.view-membership .membership-hero{
  margin-top: 0;
  align-items: center;
}

.view-membership .membership-plan-tools{
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.view-membership .membership-plan-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.view-membership .membership-plan-card{
  min-height: 0;
  padding: 16px;
  gap: 12px;
}

.view-membership .membership-order-card{
  margin-top: 18px;
}

.view-membership .membership-model-overview{
  margin-top: 18px;
}

.model-unlock-panel{
  border-radius: 12px;
}

.model-unlock-title,
.card-title,
.membership-title{
  color: var(--ui-ink-strong);
}

.model-unlock-row{
  gap: 12px;
}

.model-unlock-name,
.model-unlock-value{
  min-width: 0;
}

.model-unlock-progress{
  height: 8px;
}

.view-admin .topbar{
  min-height: 62px;
}

.view-admin .account-content{
  width: 100% !important;
  max-width: none !important;
  padding: 22px clamp(18px, 2.4vw, 34px) 40px !important;
  background:
    radial-gradient(900px 520px at 6% -16%, color-mix(in srgb, var(--ui-action-accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-bg) 96%, transparent), var(--ui-bg));
}

.view-admin .account-grid.admin-grid{
  gap: 18px !important;
}

.view-admin .account-grid.admin-grid > .card,
.view-admin .admin-payment-card,
.view-admin .admin-announcement-card,
.view-admin #adminUsersPanel{
  border-radius: var(--ui-card-radius);
  border-color: var(--ui-hairline);
  padding: 18px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-card) 98%, transparent), color-mix(in srgb, var(--ui-card-raised) 92%, transparent));
  box-shadow: none;
}

.view-admin .admin-metrics-grid{
  gap: 12px;
}

.view-admin .admin-metric-item{
  min-height: 86px;
  border: 1px solid var(--ui-hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-field) 62%, transparent);
}

.admin-filter-row,
.admin-payment-filter-row,
.admin-announcement-launch-row{
  border-radius: 12px;
  border-color: var(--ui-hairline);
  background: color-mix(in srgb, var(--ui-field) 58%, transparent);
}

.view-admin .admin-table{
  border-radius: 12px;
  border-color: var(--ui-hairline);
  background: color-mix(in srgb, var(--ui-card) 94%, transparent);
  overflow-x: auto;
}

.view-admin .admin-table-row{
  min-height: 44px;
  border-bottom-color: var(--ui-hairline);
}

.view-admin .admin-table-head{
  min-height: 40px;
  background: color-mix(in srgb, var(--ui-field) 74%, transparent);
}

.view-admin .admin-table-row > *{
  padding: 9px 11px;
  line-height: 1.35;
}

.view-admin .admin-action-btn,
.view-admin .admin-inline-select{
  border-radius: 9px;
}

.view-admin #adminUsersTable .admin-table-row{
  grid-template-columns:
    minmax(150px, .98fr)
    minmax(102px, .66fr)
    minmax(132px, .84fr)
    minmax(118px, .76fr)
    minmax(118px, .74fr)
    minmax(82px, .48fr)
    minmax(82px, .48fr)
    minmax(270px, 1.62fr) !important;
}

.view-admin #adminPaymentsTable .admin-table-row{
  grid-template-columns:
    minmax(118px, .92fr)
    minmax(188px, 1.38fr)
    minmax(180px, 1.28fr)
    minmax(78px, .52fr)
    minmax(78px, .52fr)
    minmax(84px, .58fr)
    minmax(84px, .58fr)
    minmax(102px, .7fr) !important;
}

.view-admin #adminAnnouncementsTable .admin-announcement-row{
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(96px, .62fr) minmax(190px, 1.1fr) minmax(360px, 2.5fr) minmax(150px, .88fr) !important;
}

/* 2026-05 final UI pass: tighten active states, resume workbench, and admin table controls. */
.global-site-nav-center .nav-pill{
  min-width: max-content;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

html:not([data-theme="light"]) .global-site-nav-center .nav-pill{
  color: rgba(226, 232, 240, .92);
}

html:not([data-theme="light"]) .global-site-nav-center .nav-pill.is-active,
html:not([data-theme="light"]) .global-site-nav-center .nav-pill[aria-current="page"]{
  color: #fff;
}

.resume-studio-shell{
  padding: clamp(16px, 1.7vw, 24px);
}

.resume-studio-head,
.resume-studio-panel{
  border-radius: 14px;
}

.resume-studio-head{
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: 16px;
  padding: 16px;
}

.resume-studio-head-side{
  grid-template-columns: minmax(220px, .38fr) minmax(0, .62fr);
}

.resume-studio-controls{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.resume-studio-controls .select,
.resume-studio-controls .btn,
.resume-interview-type-switch .btn,
.resume-mode-switch .btn{
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
}

.resume-studio-grid{
  --resume-grid-cols: minmax(300px, .86fr) 10px minmax(480px, 1.34fr) 10px minmax(390px, 1.02fr);
}

.resume-editor-panel .monaco-scrollable-element,
.resume-editor-panel .monaco-editor,
.resume-editor-panel .monaco-editor .overflow-guard{
  max-width: 100% !important;
}

.view-account .auth-card{
  overflow: hidden;
}

.view-account .auth-row,
.view-account .auth-row > *,
.view-account .auth-card .input{
  min-width: 0;
}

.view-account .auth-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 12px;
}

.view-account .auth-kind,
.view-account .auth-kind > div,
.view-account .auth-actions{
  min-width: 0;
}

.view-account .auth-desc,
.view-account .auth-label{
  overflow-wrap: anywhere;
}

.view-account .auth-actions{
  justify-content: end;
}

.view-admin .admin-table-row > *{
  overflow-wrap: anywhere;
}

.view-admin .admin-table-row > :has(.admin-inline-select),
.view-admin .admin-table-row > :has(.admin-table-actions){
  overflow: visible;
  text-overflow: clip;
}

.view-admin .admin-inline-select{
  min-width: 0;
  max-width: none;
}

.view-admin .admin-table-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(94px, 1fr));
  align-items: stretch;
  gap: 8px;
}

.view-admin .admin-action-btn{
  width: 100%;
  justify-content: center;
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
}

.view-admin #adminUsersTable .admin-table-row{
  grid-template-columns:
    minmax(150px, .96fr)
    minmax(104px, .68fr)
    minmax(136px, .86fr)
    minmax(120px, .78fr)
    minmax(118px, .72fr)
    minmax(84px, .48fr)
    minmax(84px, .48fr)
    minmax(276px, 1.68fr) !important;
}

@media (max-width: 1180px){
  .resume-studio-head,
  .resume-studio-head-side{
    grid-template-columns: 1fr;
  }

  .resume-points-mini-card{
    grid-template-columns: minmax(120px, .34fr) minmax(0, .66fr);
  }
}

@media (max-width: 720px){
  .resume-studio-shell{
    padding: 12px;
  }

  .resume-studio-head{
    padding: 14px;
  }

  .resume-points-mini-card,
  .resume-points-mini-grid,
  .resume-studio-actions,
  .resume-interview-type-switch{
    grid-template-columns: 1fr;
  }

  .view-account .auth-row{
    grid-template-columns: 1fr;
  }
}

.view-membership .membership-plan-header{
  gap: 8px;
}

.view-membership .membership-plan-name{
  font-size: 19px;
}

.view-membership .membership-plan-price{
  font-size: clamp(25px, 2.2vw, 32px);
}

.view-membership .membership-plan-points{
  min-height: 38px;
  padding: 7px 10px;
}

.view-membership .membership-plan-intro,
.view-membership .membership-model-section,
.view-membership .membership-capability-section{
  padding: 10px;
}

.view-membership .membership-plan-intro{
  line-height: 1.5;
}

.view-membership .membership-tier-line,
.view-membership .membership-capability-list{
  gap: 8px;
}

.view-membership .membership-capability-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.view-membership .membership-tier-row{
  padding: 8px 9px;
}

.view-membership .membership-capability-tag{
  padding: 6px 9px;
  line-height: 1.32;
}

.view-membership .membership-plan-action-row .btn{
  min-height: 40px;
}

html:not([data-theme="light"]) .view-account .account-content .card,
html:not([data-theme="light"]) .view-membership .membership-order-card,
html:not([data-theme="light"]) .view-membership .membership-model-overview,
html:not([data-theme="light"]) .view-membership .membership-plan-tools,
html:not([data-theme="light"]) .view-membership .membership-plan-card,
html:not([data-theme="light"]) .view-admin .account-grid.admin-grid > .card,
html:not([data-theme="light"]) .view-admin .admin-payment-card,
html:not([data-theme="light"]) .view-admin .admin-announcement-card,
html:not([data-theme="light"]) .view-admin #adminUsersPanel{
  border-color: rgba(148, 163, 184, .18);
  background:
    linear-gradient(180deg, rgba(17, 25, 39, .96), rgba(12, 18, 30, .94));
}

html:not([data-theme="light"]) .view-account .account-hero,
html:not([data-theme="light"]) .view-membership .membership-hero{
  border-color: rgba(99, 102, 241, .34);
  background:
    linear-gradient(135deg, rgba(79, 70, 229, .22), transparent 46%),
    linear-gradient(180deg, rgba(18, 27, 42, .97), rgba(11, 17, 28, .94));
}

html:not([data-theme="light"]) .view-admin .admin-metric-item,
html:not([data-theme="light"]) .admin-filter-row,
html:not([data-theme="light"]) .admin-payment-filter-row,
html:not([data-theme="light"]) .admin-announcement-launch-row,
html:not([data-theme="light"]) .view-admin .admin-table{
  border-color: rgba(148, 163, 184, .17);
  background: rgba(8, 13, 22, .56);
}

html:not([data-theme="light"]) .view-admin .admin-table-head{
  background: rgba(30, 41, 59, .86);
}

html:not([data-theme="light"]) .view-admin .admin-table-row{
  background: rgba(15, 23, 42, .82);
}

html:not([data-theme="light"]) .view-admin .admin-table-row:nth-child(odd):not(.admin-table-head){
  background: rgba(20, 31, 48, .78);
}

@media (min-width: 1440px){
  .view-account .account-grid{
    grid-template-columns: minmax(360px, .72fr) minmax(680px, 1.28fr);
  }

  .view-membership .membership-plan-grid{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 1180px){
  .view-account .account-grid{
    grid-template-columns: 1fr;
  }

  .view-membership .membership-plan-grid{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 720px){
  .view-account .account-content,
  .view-membership .account-content,
  .view-admin .account-content{
    padding: 16px 12px 28px !important;
  }

  .view-account .account-hero,
  .view-membership .membership-hero{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .view-account .plan-grid,
  .view-membership .membership-plan-grid{
    grid-template-columns: 1fr;
  }

  .view-membership .membership-capability-grid{
    grid-template-columns: 1fr;
  }

  .view-membership .membership-plan-tools{
    display: grid;
    grid-template-columns: 1fr;
  }

  .view-admin #adminPaymentsTable .admin-table-row,
  .view-admin #adminUsersTable .admin-table-row,
  .view-admin #adminAnnouncementsTable .admin-announcement-row{
    min-height: 0;
  }

  .view-admin .account-grid.admin-grid > .card,
  .view-admin .admin-payment-card,
  .view-admin .admin-announcement-card,
  .view-admin #adminUsersPanel{
    padding: 14px !important;
  }
}

/* Keep mobile admin rows card-like after every desktop table override. */
@media (max-width: 720px){
  .view-admin #adminPaymentsTable .admin-table-row,
  .view-admin #adminUsersTable .admin-table-row,
  .view-admin #adminAnnouncementsTable .admin-announcement-row{
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--ui-panel-line) !important;
    border-radius: 12px !important;
  }

  .view-admin #adminPaymentsTable .admin-table-row > *,
  .view-admin #adminUsersTable .admin-table-row > *,
  .view-admin #adminAnnouncementsTable .admin-announcement-row > *{
    display: grid !important;
    grid-template-columns: minmax(82px, .42fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .view-admin #adminPaymentsTable .admin-table-row > *::before,
  .view-admin #adminUsersTable .admin-table-row > *::before,
  .view-admin #adminAnnouncementsTable .admin-announcement-row > *::before{
    color: var(--ui-ink-soft);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(1)::before{ content: "User"; }
  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(2)::before{ content: "Order"; }
  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(3)::before{ content: "Trade"; }
  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(4)::before{ content: "Plan"; }
  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(5)::before{ content: "Type"; }
  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(6)::before{ content: "Amount"; }
  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(7)::before{ content: "Status"; }
  .view-admin #adminPaymentsTable .admin-table-row > :nth-child(8)::before{ content: "Time"; }

  .view-admin #adminUsersTable .admin-table-row > :nth-child(1)::before{ content: "User"; }
  .view-admin #adminUsersTable .admin-table-row > :nth-child(2)::before{ content: "Role"; }
  .view-admin #adminUsersTable .admin-table-row > :nth-child(3)::before{ content: "Plan"; }
  .view-admin #adminUsersTable .admin-table-row > :nth-child(4)::before{ content: "Status"; }
  .view-admin #adminUsersTable .admin-table-row > :nth-child(5)::before{ content: "Points"; }
  .view-admin #adminUsersTable .admin-table-row > :nth-child(6)::before{ content: "Chat HP"; }
  .view-admin #adminUsersTable .admin-table-row > :nth-child(7)::before{ content: "Removed API"; }
  .view-admin #adminUsersTable .admin-table-row > :nth-child(8)::before{ content: "Actions"; }

  .view-admin #adminAnnouncementsTable .admin-announcement-row > :nth-child(1)::before{ content: "Date"; }
  .view-admin #adminAnnouncementsTable .admin-announcement-row > :nth-child(2)::before{ content: "Title"; }
  .view-admin #adminAnnouncementsTable .admin-announcement-row > :nth-child(3)::before{ content: "Content"; }
  .view-admin #adminAnnouncementsTable .admin-announcement-row > :nth-child(4)::before{ content: "Actions"; }

  .view-admin .admin-table-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* 2026-05 media writer UI audit: quiet app surfaces, consistent controls, and dark-mode rhythm. */
:root{
  --ui-audit-line: rgba(15, 23, 42, .11);
  --ui-audit-line-strong: rgba(37, 99, 235, .2);
  --ui-audit-surface: #ffffff;
  --ui-audit-surface-soft: #f8fafc;
  --ui-audit-surface-muted: #f1f5f9;
  --ui-audit-ink: #101827;
  --ui-audit-muted: #64748b;
  --ui-audit-shadow: 0 14px 34px rgba(15, 23, 42, .06);
  --ui-audit-radius: 12px;
  --ui-audit-radius-sm: 8px;
}

html:not([data-theme="light"]){
  --ui-audit-line: rgba(148, 163, 184, .15);
  --ui-audit-line-strong: rgba(96, 165, 250, .28);
  --ui-audit-surface: #111827;
  --ui-audit-surface-soft: #0f172a;
  --ui-audit-surface-muted: #0b1220;
  --ui-audit-ink: #e5edf8;
  --ui-audit-muted: #94a3b8;
  --ui-audit-shadow: none;
}

.btn,
.nav-pill,
.global-site-nav-right .btn,
.tools-sidebar-category-btn,
.tools-sidebar-tool-btn,
.controlboard-dock-item,
.topbar-avatar-trigger,
.account-switcher-simple .account-switcher-trigger{
  min-height: 38px;
  border-radius: 999px;
  border-color: var(--ui-audit-line);
  background: color-mix(in srgb, var(--ui-audit-surface) 92%, transparent);
  box-shadow: none;
}

.btn:hover,
.nav-pill:hover,
.global-site-nav-right .btn:hover,
.tools-sidebar-category-btn:hover,
.tools-sidebar-tool-btn:hover,
.controlboard-dock-item:hover,
.topbar-avatar-trigger:hover,
.account-switcher-simple .account-switcher-trigger:hover{
  border-color: var(--ui-audit-line-strong);
  background: color-mix(in srgb, var(--primary2) 42%, var(--ui-audit-surface) 58%);
  box-shadow: none;
  text-decoration: none;
}

.nav-pill[aria-current="page"],
.nav-pill.is-active,
.tools-sidebar-category-btn.is-active,
.tools-sidebar-tool-btn.is-active,
.controlboard-dock-item.is-active{
  color: color-mix(in srgb, var(--primary) 70%, var(--ui-audit-ink));
  border-color: color-mix(in srgb, var(--primary) 34%, var(--ui-audit-line));
  background: color-mix(in srgb, var(--primary2) 58%, var(--ui-audit-surface) 42%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

.btn-primary{
  border-color: color-mix(in srgb, var(--primary) 76%, #1d4ed8);
  background: linear-gradient(180deg, #4f6df6, #3152e8);
  color: #ffffff;
}

.btn-primary:hover{
  background: linear-gradient(180deg, #5a78ff, #365df1);
}

.btn[disabled],
.btn:disabled{
  opacity: .56;
  box-shadow: none;
}

.input,
.select,
.auth-input,
textarea.input,
.referral-link-box{
  border-radius: var(--ui-audit-radius-sm);
  border-color: var(--ui-audit-line);
  background: var(--ui-audit-surface-soft);
  color: var(--ui-audit-ink);
  box-shadow: none;
}

.input:focus,
.select:focus,
.auth-input:focus,
textarea.input:focus{
  border-color: color-mix(in srgb, var(--primary) 42%, var(--ui-audit-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary2) 74%, transparent);
}

.global-site-nav,
.site-home-frame,
.sidebar,
.topbar{
  border-color: var(--ui-audit-line);
  background: color-mix(in srgb, var(--ui-audit-surface) 92%, transparent);
  box-shadow: none;
}

.tools-hub-hero,
.controlboard-overview-head,
.referral-hero,
.account-hero,
.membership-hero,
.resume-studio-head,
.media-writer-head,
.announcement-bar{
  border-radius: var(--ui-audit-radius);
  border-color: var(--ui-audit-line);
  background: linear-gradient(180deg, var(--ui-audit-surface), var(--ui-audit-surface-soft));
  box-shadow: var(--ui-audit-shadow);
}

.tools-category-card,
.tools-hub-card,
.controlboard-overview-card,
.referral-card,
.account-content .card,
.membership-order-card,
.membership-model-overview,
.membership-plan-tools,
.membership-plan-card,
.resume-studio-panel,
.media-writer-panel,
.view-admin .account-grid.admin-grid > .card,
.view-admin .admin-payment-card,
.view-admin .admin-announcement-card,
.view-admin #adminUsersPanel{
  border-radius: var(--ui-audit-radius);
  border-color: var(--ui-audit-line);
  background: var(--ui-audit-surface);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.tools-category-card::before,
.membership-plan-card::before,
.resume-studio-panel::before,
.referral-card::before{
  opacity: .34;
}

.tools-hub-card::after,
.controlboard-overview-card::after{
  opacity: .42;
}

.tools-hub-card:hover,
.controlboard-overview-card:hover,
.referral-card:hover{
  transform: translateY(-1px);
  border-color: var(--ui-audit-line-strong);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.tools-hub-title,
.controlboard-overview-title,
.referral-hero-title,
.membership-title,
.media-writer-title{
  line-height: 1.08;
}

.tools-hub-subtitle,
.controlboard-overview-subtitle,
.referral-hero-subtitle,
.membership-subtitle,
.media-writer-subtitle,
.media-writer-field,
.media-writer-toggle,
.media-writer-panel-head span{
  color: var(--ui-audit-muted);
}

.tools-hub-tag,
.controlboard-overview-tag,
.referral-hero-tag,
.media-writer-tag,
.resume-studio-tag{
  width: fit-content;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--primary) 72%, var(--ui-audit-ink));
  letter-spacing: .02em;
}

.tools-sidebar-category-btn,
.controlboard-dock-item{
  border-radius: var(--ui-audit-radius-sm);
  align-items: start;
}

.tools-sidebar-tool-btn{
  border-radius: var(--ui-audit-radius-sm);
  justify-content: flex-start;
}

.tools-sidebar-item-desc,
.controlboard-dock-item-desc{
  color: var(--ui-audit-muted);
}

.media-writer-shell{
  padding: clamp(16px, 1.7vw, 24px);
  width: min(1440px, 100%);
  margin: 0 auto;
  gap: 16px;
}

.media-writer-head{
  padding: 18px 20px;
}

.media-writer-head-actions .btn,
.media-writer-actions .btn,
.media-writer-panel-head > .btn{
  min-height: 38px;
  padding-inline: 18px;
}

.media-writer-grid{
  grid-template-columns: minmax(280px, .76fr) minmax(380px, 1fr) minmax(360px, 1fr);
  gap: 14px;
}

.media-writer-panel{
  padding: 16px;
  gap: 14px;
}

.media-writer-image-panel{
  gap: 16px;
}

.media-writer-section-label{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-audit-muted);
}

.media-writer-section-label span{
  font-weight: 700;
  color: var(--ui-audit-ink);
}

.media-writer-section-label-preview,
.media-writer-section-label-ideas{
  padding-top: 6px;
}

.media-writer-section-label small{
  font-size: 12px;
  color: var(--ui-audit-muted);
}

.media-writer-panel-head{
  min-height: 38px;
}

.media-writer-panel-head h2{
  color: var(--ui-audit-ink);
  font-size: 17px;
  line-height: 1.2;
}

.media-writer-form-grid{
  gap: 12px;
}

.media-writer-field,
.media-writer-toggle{
  gap: 7px;
  font-weight: 650;
}

.media-writer-field > span,
.media-writer-toggle > span{
  font-size: 12px;
}

.media-writer-field .input,
.media-writer-field .select{
  min-height: 40px;
}

.media-writer-toggle{
  min-height: 40px;
  padding: 25px 0 0;
}

.media-writer-toggle input{
  width: 16px;
  height: 16px;
  margin: 0;
}

.media-writer-material-input{
  min-height: 178px;
}

.media-writer-body-input{
  min-height: 342px;
  font-size: 14px;
  line-height: 1.68;
}

.media-writer-prompt-input{
  min-height: 118px;
}

.media-writer-title-chip,
.media-writer-tag-chip,
.media-writer-notes > div,
.media-writer-strategy-card,
.media-writer-idea,
.media-writer-image-state-card{
  border-color: var(--ui-audit-line);
  background: var(--ui-audit-surface-soft);
}

.media-writer-title-chip.is-active,
.media-writer-title-chip:hover{
  border-color: var(--ui-audit-line-strong);
  background: color-mix(in srgb, var(--primary2) 62%, var(--ui-audit-surface) 38%);
}

.media-writer-title-list{
  gap: 10px;
}

.media-writer-strategy-grid{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 10px;
}

.media-writer-strategy-card{
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--ui-audit-line);
  border-radius: var(--ui-audit-radius-sm);
  background: var(--ui-audit-surface-soft);
}

.media-writer-strategy-card p,
.media-writer-outline-list{
  margin: 0;
  color: color-mix(in srgb, var(--ui-audit-ink) 82%, var(--ui-audit-muted));
  font-size: 12px;
  line-height: 1.55;
}

.media-writer-outline-list{
  display: grid;
  gap: 6px;
}

.media-writer-outline-list > div{
  position: relative;
  padding-left: 14px;
}

.media-writer-outline-list > div::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 60%, var(--ui-audit-line));
}

.media-writer-idea{
  border-radius: var(--ui-audit-radius-sm);
}

.media-writer-idea-main{
  display: grid;
  gap: 5px;
}

.media-writer-idea-kicker{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary2) 58%, var(--ui-audit-surface) 42%);
  color: var(--ui-audit-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.media-writer-idea-main strong{
  font-size: 14px;
  line-height: 1.25;
}

.media-writer-idea-main p{
  max-height: 3.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.media-writer-idea-actions{
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 120px;
}

.media-writer-idea .btn{
  min-height: 36px;
  border-radius: 999px;
  width: 100%;
  justify-content: center;
}

.media-writer-image-results{
  display: grid;
  gap: 12px;
  min-height: 126px;
}

.media-writer-image-state-card{
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--ui-audit-radius-sm);
}

.media-writer-image-state-card strong{
  font-size: 13px;
  line-height: 1.2;
}

.media-writer-image-state-card span,
.media-writer-image-state-card p,
.media-writer-image-state-card em,
.media-writer-image-card figcaption span{
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-audit-muted);
  font-style: normal;
}

.media-writer-image-state-card.is-loading{
  border-color: color-mix(in srgb, var(--primary) 30%, var(--ui-audit-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary2) 28%, transparent), transparent 68%),
    var(--ui-audit-surface-soft);
}

.media-writer-image-state-card.is-error{
  border-color: color-mix(in srgb, var(--danger) 28%, var(--ui-audit-line));
  background: color-mix(in srgb, var(--danger) 10%, var(--ui-audit-surface-soft));
}

.media-writer-image-card img{
  border-radius: var(--ui-audit-radius-sm);
  border-color: var(--ui-audit-line);
}

.media-writer-image-card{
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--ui-audit-radius-sm);
  border: 1px solid var(--ui-audit-line);
  background: var(--ui-audit-surface-soft);
}

.media-writer-image-preview-button{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--ui-audit-radius-sm);
  background: transparent;
  cursor: zoom-in;
}

.media-writer-image-preview-button img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: color-mix(in srgb, var(--ui-audit-surface) 92%, transparent);
}

.media-writer-image-card figcaption{
  display: grid;
  gap: 10px;
}

.media-writer-image-card figcaption strong{
  font-size: 14px;
  line-height: 1.3;
}

.media-writer-image-meta{
  display: grid;
  gap: 4px;
}

.media-writer-image-meta span{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.media-writer-image-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.media-writer-image-actions .btn{
  min-height: 34px;
  min-width: 0;
  padding-inline: 10px;
  border-radius: 999px;
  white-space: normal;
}

.media-writer-preview-dialog{
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(14px);
}

.media-writer-preview-card{
  width: min(920px, 100%);
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--ui-audit-line);
  border-radius: var(--ui-audit-radius-md);
  background: var(--ui-audit-surface);
}

.media-writer-preview-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.media-writer-preview-head strong{
  font-size: 15px;
}

.media-writer-preview-card img{
  width: 100%;
  max-height: min(64vh, 680px);
  object-fit: contain;
  border-radius: var(--ui-audit-radius-sm);
  background: color-mix(in srgb, var(--ui-audit-surface-soft) 88%, transparent);
}

.media-writer-preview-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.media-writer-preview-actions .btn{
  min-height: 38px;
  padding-inline: 16px;
  border-radius: 999px;
}

.media-writer-image-results:not(:empty){
  padding-top: 2px;
}

.media-writer-image-results .media-writer-image-state-card,
.media-writer-image-results .media-writer-image-card{
  box-shadow: none;
  min-width: 0;
}

.media-writer-image-panel .media-writer-image-results{
  grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
  align-items: start;
}

.media-writer-image-panel .media-writer-image-card{
  width: 100%;
}

.media-writer-image-panel .media-writer-image-card img,
.media-writer-image-panel .media-writer-image-preview-button img{
  aspect-ratio: 4 / 3;
  min-height: 210px;
}

.media-writer-image-panel .media-writer-idea-list{
  gap: 10px;
}

@media (min-width: 1181px) and (max-width: 1420px){
  .media-writer-grid{
    grid-template-columns: minmax(270px, .76fr) minmax(360px, 1fr) minmax(336px, 1fr);
    grid-template-areas: "input copy image";
    gap: 14px;
  }

  .media-writer-input-panel{
    grid-area: input;
  }

  .media-writer-output-panel{
    grid-area: copy;
  }

  .media-writer-image-panel{
    grid-area: image;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .media-writer-image-panel .media-writer-panel-head{
    grid-column: auto;
  }

  .media-writer-image-panel .media-writer-field{
    grid-column: auto;
  }

  .media-writer-image-panel .media-writer-section-label-preview,
  .media-writer-image-panel .media-writer-image-results{
    grid-column: auto;
  }

  .media-writer-image-panel .media-writer-section-label-ideas,
  .media-writer-image-panel .media-writer-idea-list{
    grid-column: auto;
  }

  .media-writer-image-panel .media-writer-image-results{
    grid-row: auto;
  }

  .media-writer-image-panel .media-writer-image-card img,
  .media-writer-image-panel .media-writer-image-preview-button img{
    aspect-ratio: 4 / 3;
    min-height: 190px;
  }

  .media-writer-image-panel .media-writer-idea-list{
    grid-template-columns: 1fr;
  }

  .media-writer-image-panel .media-writer-idea{
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .media-writer-image-panel .media-writer-idea-actions{
    grid-template-columns: 1fr;
    min-width: 116px;
  }

  .media-writer-output-panel .media-writer-body-input{
    min-height: 300px;
  }

  .media-writer-form-grid{
    grid-template-columns: 1fr;
  }

  .media-writer-material-input{
    min-height: 148px;
  }

  .media-writer-prompt-input{
    min-height: 124px;
  }
}

.media-writer-output-panel .media-writer-title-list{
  min-height: 0;
}

.media-writer-output-panel .media-writer-chip-list{
  gap: 6px;
}

.media-writer-output-panel .media-writer-notes{
  gap: 8px;
}

.media-writer-output-panel .media-writer-notes > div{
  line-height: 1.55;
}

.media-writer-output-panel .media-writer-body-input{
  resize: vertical;
}

.referral-dashboard,
.account-content,
.view-membership .account-content,
.view-admin .account-content{
  max-width: min(1120px, 100%);
}

.view-admin .account-content{
  max-width: min(1240px, 100%);
  padding-block: 20px 32px;
}

.view-admin .topbar{
  min-height: 62px;
}

.view-admin .account-grid.admin-grid{
  gap: 18px;
}

.view-admin .account-grid.admin-grid > .card,
.view-admin .admin-payment-card,
.view-admin .admin-announcement-card,
.view-admin #adminUsersPanel{
  padding: 18px;
}

.view-admin .account-grid.admin-grid > .card:nth-child(2){
  gap: 18px;
}

.view-admin .card-title{
  color: var(--ui-audit-ink);
  font-size: clamp(18px, 1.3vw, 20px);
  letter-spacing: .06em;
}

.view-admin .admin-metrics-grid{
  gap: 12px;
}

.view-admin .admin-metric-item{
  border-radius: 10px;
  border-color: var(--ui-audit-line);
  background: var(--ui-audit-surface-soft);
  box-shadow: none;
}

.view-admin .admin-metric-value{
  font-size: clamp(22px, 1.7vw, 28px);
}

.admin-filter-row,
.admin-payment-filter-row,
.admin-announcement-launch-row,
.view-admin .admin-table,
.view-admin .admin-user-usage-body{
  border-radius: 10px;
  border-color: var(--ui-audit-line);
  background: var(--ui-audit-surface-soft);
}

.view-admin .admin-filter-row,
.view-admin .admin-payment-filter-row{
  gap: 10px;
  padding: 12px;
}

.view-admin .admin-filter-row .input,
.view-admin .admin-filter-row .select,
.view-admin .admin-payment-filter-row .input,
.view-admin .admin-payment-filter-row .select{
  min-height: 38px;
}

.view-admin .admin-filter-row .btn,
.view-admin .admin-payment-filter-row .btn{
  min-height: 38px;
}

.view-admin .admin-table{
  overflow: auto;
  box-shadow: none;
}

.view-admin .admin-table-row{
  min-height: 54px;
  background: var(--ui-audit-surface);
  border-color: var(--ui-audit-line);
}

.view-admin .admin-table-row:nth-child(odd):not(.admin-table-head){
  background: var(--ui-audit-surface-soft);
}

.view-admin .admin-table-head{
  min-height: 46px;
  background: var(--ui-audit-surface-muted);
  color: var(--ui-audit-muted);
}

.view-admin .admin-table-row > *{
  padding: 10px 12px;
  line-height: 1.35;
  border-right-color: color-mix(in srgb, var(--ui-audit-line) 72%, transparent);
}

.view-admin .admin-table-row > :not(:last-child){
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.view-admin .admin-table-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.view-admin .admin-action-btn,
.view-admin .admin-inline-select{
  min-height: 34px;
  border-radius: 8px;
}

.view-admin .admin-action-btn{
  justify-content: center;
  white-space: normal;
}

.view-admin #adminPaymentsTable .admin-table-row{
  grid-template-columns:
    minmax(126px, .9fr)
    minmax(200px, 1.45fr)
    minmax(190px, 1.34fr)
    minmax(80px, .54fr)
    minmax(80px, .54fr)
    minmax(90px, .62fr)
    minmax(88px, .58fr)
    minmax(108px, .72fr) !important;
}

.view-admin #adminUsersTable .admin-table-row{
  grid-template-columns:
    minmax(156px, 1.04fr)
    minmax(104px, .66fr)
    minmax(128px, .78fr)
    minmax(120px, .72fr)
    minmax(128px, .78fr)
    minmax(92px, .54fr)
    minmax(240px, 1.48fr) !important;
}

.view-admin #adminAnnouncementsTable .admin-announcement-row{
  grid-template-columns: minmax(104px, .62fr) minmax(210px, 1.04fr) minmax(420px, 2.42fr) minmax(154px, .86fr) !important;
}

html:not([data-theme="light"]) body{
  background:
    radial-gradient(760px 460px at 14% -12%, rgba(59, 130, 246, .1), transparent 62%),
    linear-gradient(180deg, #0a101b, #080d15 62%, #070b12);
}

html:not([data-theme="light"]) .main{
  background: linear-gradient(180deg, #090f19, #070b12);
}

html:not([data-theme="light"]) .global-site-nav,
html:not([data-theme="light"]) .site-home-frame,
html:not([data-theme="light"]) .sidebar,
html:not([data-theme="light"]) .topbar{
  background: rgba(12, 18, 29, .94);
  border-color: rgba(148, 163, 184, .14);
}

html:not([data-theme="light"]) .btn,
html:not([data-theme="light"]) .nav-pill,
html:not([data-theme="light"]) .global-site-nav-right .btn,
html:not([data-theme="light"]) .tools-sidebar-category-btn,
html:not([data-theme="light"]) .tools-sidebar-tool-btn,
html:not([data-theme="light"]) .controlboard-dock-item,
html:not([data-theme="light"]) .topbar-avatar-trigger,
html:not([data-theme="light"]) .account-switcher-simple .account-switcher-trigger{
  background: rgba(17, 24, 39, .86);
  border-color: rgba(148, 163, 184, .15);
  color: rgba(226, 232, 240, .92);
  box-shadow: none;
}

html:not([data-theme="light"]) .btn:hover,
html:not([data-theme="light"]) .nav-pill:hover,
html:not([data-theme="light"]) .global-site-nav-right .btn:hover,
html:not([data-theme="light"]) .tools-sidebar-category-btn:hover,
html:not([data-theme="light"]) .tools-sidebar-tool-btn:hover,
html:not([data-theme="light"]) .controlboard-dock-item:hover,
html:not([data-theme="light"]) .topbar-avatar-trigger:hover,
html:not([data-theme="light"]) .account-switcher-simple .account-switcher-trigger:hover{
  background: rgba(30, 41, 59, .88);
  border-color: rgba(96, 165, 250, .32);
}

html:not([data-theme="light"]) .nav-pill[aria-current="page"],
html:not([data-theme="light"]) .nav-pill.is-active,
html:not([data-theme="light"]) .tools-sidebar-category-btn.is-active,
html:not([data-theme="light"]) .tools-sidebar-tool-btn.is-active,
html:not([data-theme="light"]) .controlboard-dock-item.is-active{
  color: #dce7ff;
  border-color: rgba(129, 140, 248, .36);
  background: rgba(49, 46, 129, .48);
}

html:not([data-theme="light"]) .btn-primary{
  border-color: rgba(99, 102, 241, .7);
  background: linear-gradient(180deg, #4f6df6, #3152e8);
  color: #ffffff;
}

html:not([data-theme="light"]) .tools-hub-hero,
html:not([data-theme="light"]) .controlboard-overview-head,
html:not([data-theme="light"]) .referral-hero,
html:not([data-theme="light"]) .account-hero,
html:not([data-theme="light"]) .membership-hero,
html:not([data-theme="light"]) .resume-studio-head,
html:not([data-theme="light"]) .media-writer-head,
html:not([data-theme="light"]) .announcement-bar,
html:not([data-theme="light"]) .tools-category-card,
html:not([data-theme="light"]) .tools-hub-card,
html:not([data-theme="light"]) .controlboard-overview-card,
html:not([data-theme="light"]) .referral-card,
html:not([data-theme="light"]) .account-content .card,
html:not([data-theme="light"]) .membership-order-card,
html:not([data-theme="light"]) .membership-model-overview,
html:not([data-theme="light"]) .membership-plan-tools,
html:not([data-theme="light"]) .membership-plan-card,
html:not([data-theme="light"]) .resume-studio-panel,
html:not([data-theme="light"]) .media-writer-panel,
html:not([data-theme="light"]) .view-admin .account-grid.admin-grid > .card,
html:not([data-theme="light"]) .view-admin .admin-payment-card,
html:not([data-theme="light"]) .view-admin .admin-announcement-card,
html:not([data-theme="light"]) .view-admin #adminUsersPanel{
  border-color: rgba(148, 163, 184, .15);
  background: #111827;
  box-shadow: none;
}

html:not([data-theme="light"]) .input,
html:not([data-theme="light"]) .select,
html:not([data-theme="light"]) .auth-input,
html:not([data-theme="light"]) textarea.input,
html:not([data-theme="light"]) .referral-link-box{
  border-color: rgba(148, 163, 184, .16);
  background: #0b1220;
  color: #e5edf8;
  box-shadow: none;
}

html:not([data-theme="light"]) .input::placeholder,
html:not([data-theme="light"]) .auth-input::placeholder{
  color: rgba(148, 163, 184, .68);
}

html:not([data-theme="light"]) .media-writer-title-chip,
html:not([data-theme="light"]) .media-writer-tag-chip,
html:not([data-theme="light"]) .media-writer-notes > div,
html:not([data-theme="light"]) .media-writer-strategy-card,
html:not([data-theme="light"]) .media-writer-idea,
html:not([data-theme="light"]) .media-writer-image-state-card,
html:not([data-theme="light"]) .view-admin .admin-metric-item,
html:not([data-theme="light"]) .admin-filter-row,
html:not([data-theme="light"]) .admin-payment-filter-row,
html:not([data-theme="light"]) .admin-announcement-launch-row,
html:not([data-theme="light"]) .view-admin .admin-table,
html:not([data-theme="light"]) .view-admin .admin-user-usage-body{
  border-color: rgba(148, 163, 184, .14);
  background: #0f172a;
}

html:not([data-theme="light"]) .view-admin .admin-table-row,
html:not([data-theme="light"]) .view-admin .admin-table-row:nth-child(odd):not(.admin-table-head){
  background: #0b1220;
}

html:not([data-theme="light"]) .view-admin .admin-table-row:nth-child(even):not(.admin-table-head){
  background: #0f172a;
}

html:not([data-theme="light"]) .view-admin .admin-table-head{
  background: #111827;
  color: #a8b6cc;
}

html:not([data-theme="light"]) .media-writer-image-state-card.is-loading{
  background:
    linear-gradient(90deg, rgba(99, 102, 241, .18), transparent 70%),
    #0f172a;
}

html:not([data-theme="light"]) .media-writer-image-state-card.is-error{
  background: rgba(127, 29, 29, .24);
}

html:not([data-theme="light"]) .media-writer-section-label{
  color: rgba(148, 163, 184, .82);
}

html:not([data-theme="light"]) .media-writer-section-label span{
  color: #e5edf8;
}

html:not([data-theme="light"]) .media-writer-section-label small{
  color: rgba(148, 163, 184, .74);
}

html:not([data-theme="light"]) .media-writer-strategy-card p,
html:not([data-theme="light"]) .media-writer-outline-list{
  color: #cbd5e1;
}

html:not([data-theme="light"]) .media-writer-image-preview-button img{
  background: #0b1220;
}

html:not([data-theme="light"]) .media-writer-preview-dialog{
  background: rgba(2, 6, 23, .82);
}

html:not([data-theme="light"]) .media-writer-preview-card{
  border-color: rgba(148, 163, 184, .16);
  background: #111827;
}

html:not([data-theme="light"]) .media-writer-preview-card img{
  background: #0b1220;
}

.btn:not(.btn-primary):not(:disabled){
  background: color-mix(in srgb, var(--ui-audit-surface) 92%, transparent);
  box-shadow: none;
}

.btn:not(.btn-primary):not(:disabled):hover{
  background: color-mix(in srgb, var(--primary2) 36%, var(--ui-audit-surface) 64%);
  box-shadow: none;
}

.nav-pill.btn[aria-current="page"],
.nav-pill.btn.is-active,
.tools-sidebar-category-btn.btn.is-active,
.tools-sidebar-tool-btn.btn.is-active,
.controlboard-dock-item.btn.is-active{
  color: color-mix(in srgb, var(--primary) 70%, var(--ui-audit-ink));
  border-color: color-mix(in srgb, var(--primary) 34%, var(--ui-audit-line));
  background: color-mix(in srgb, var(--primary2) 58%, var(--ui-audit-surface) 42%);
}

html:not([data-theme="light"]) .btn:not(.btn-primary):not(:disabled){
  background: rgba(17, 24, 39, .86);
  box-shadow: none;
}

html:not([data-theme="light"]) .btn:not(.btn-primary):not(:disabled):hover{
  background: rgba(30, 41, 59, .88);
  box-shadow: none;
}

html:not([data-theme="light"]) .nav-pill.btn[aria-current="page"],
html:not([data-theme="light"]) .nav-pill.btn.is-active,
html:not([data-theme="light"]) .tools-sidebar-category-btn.btn.is-active,
html:not([data-theme="light"]) .tools-sidebar-tool-btn.btn.is-active,
html:not([data-theme="light"]) .controlboard-dock-item.btn.is-active{
  color: #dce7ff;
  border-color: rgba(129, 140, 248, .36);
  background: rgba(49, 46, 129, .48);
}

@media (max-width: 1180px){
  .media-writer-grid{
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .media-writer-input-panel,
  .media-writer-output-panel,
  .media-writer-image-panel{
    grid-area: auto;
  }

  .media-writer-image-panel{
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .media-writer-image-panel .media-writer-panel-head,
  .media-writer-image-panel .media-writer-field,
  .media-writer-image-panel .media-writer-section-label-preview,
  .media-writer-image-panel .media-writer-section-label-ideas,
  .media-writer-image-panel .media-writer-image-results,
  .media-writer-image-panel .media-writer-idea-list{
    grid-column: auto;
    grid-row: auto;
  }

  .media-writer-image-panel .media-writer-idea-list{
    grid-template-columns: 1fr;
  }

  .media-writer-image-panel .media-writer-image-card img,
  .media-writer-image-panel .media-writer-image-preview-button img{
    min-height: 0;
  }

  .media-writer-image-panel .media-writer-image-results{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .view-admin .admin-metrics-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .media-writer-head{
    align-items: stretch;
  }

  .media-writer-head-actions,
  .media-writer-actions{
    width: 100%;
  }

  .media-writer-head-actions .btn,
  .media-writer-actions .btn,
  .media-writer-panel-head > .btn{
    flex: 1 1 140px;
  }

  .media-writer-form-grid,
  .view-admin .admin-metrics-grid{
    grid-template-columns: 1fr;
  }

  .media-writer-idea{
    grid-template-columns: 1fr;
  }

  .media-writer-idea-actions{
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }

  .media-writer-preview-card{
    padding: 14px;
  }

  .media-writer-body-input{
    min-height: 300px;
  }

  .media-writer-image-panel .media-writer-image-results{
    grid-template-columns: 1fr;
  }

  .view-admin #adminPaymentsTable .admin-table-row,
  .view-admin #adminUsersTable .admin-table-row,
  .view-admin #adminAnnouncementsTable .admin-announcement-row{
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }
}

/* Final media writer overrides: keep the workspace readable after all legacy responsive rules. */
.media-writer-platform-guide{
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--ui-audit-line);
  border-radius: var(--ui-audit-radius-sm);
  background: var(--ui-audit-surface-soft);
  color: color-mix(in srgb, var(--ui-audit-ink) 84%, var(--ui-audit-muted));
  font-size: 12px;
  line-height: 1.55;
}

.media-writer-empty-inline,
.media-writer-empty-card,
.media-writer-image-empty{
  border: 1px dashed var(--ui-audit-line);
  border-radius: var(--ui-audit-radius-sm);
  background: color-mix(in srgb, var(--ui-audit-surface-muted) 78%, transparent);
  color: var(--ui-audit-muted);
  font-size: 12px;
  line-height: 1.5;
}

.media-writer-empty-inline{
  width: 100%;
  padding: 10px 12px;
}

.media-writer-empty-card{
  padding: 14px;
}

.media-writer-image-empty{
  display: grid;
  gap: 6px;
  min-height: 190px;
  align-content: center;
  padding: 18px 16px;
}

.media-writer-image-empty strong{
  color: var(--ui-audit-ink);
  font-size: 14px;
  line-height: 1.2;
}

.media-writer-image-empty span,
.media-writer-image-empty small{
  color: var(--ui-audit-muted);
  font-size: 12px;
  line-height: 1.5;
}

.media-writer-image-card.is-ratio-1-1 img,
.media-writer-image-card.is-ratio-1-1 .media-writer-image-preview-button img{
  aspect-ratio: 1 / 1;
}

.media-writer-image-card.is-ratio-2-3 img,
.media-writer-image-card.is-ratio-2-3 .media-writer-image-preview-button img{
  aspect-ratio: 2 / 3;
}

.media-writer-image-card.is-ratio-3-2 img,
.media-writer-image-card.is-ratio-3-2 .media-writer-image-preview-button img{
  aspect-ratio: 3 / 2;
}

.media-writer-image-panel .media-writer-image-card img,
.media-writer-image-panel .media-writer-image-preview-button img{
  min-height: 260px;
  object-fit: contain;
}

.media-writer-image-panel .media-writer-image-card.is-ratio-2-3 img,
.media-writer-image-panel .media-writer-image-card.is-ratio-2-3 .media-writer-image-preview-button img{
  min-height: 320px;
}

.media-writer-image-actions .btn{
  flex: 1 1 112px;
  justify-content: center;
}

.media-writer-idea{
  gap: 12px;
}

.media-writer-idea-main p{
  font-size: 12px;
  line-height: 1.55;
}

.media-writer-idea-actions{
  min-width: 132px;
}

html:not([data-theme="light"]) .media-writer-platform-guide,
html:not([data-theme="light"]) .media-writer-empty-inline,
html:not([data-theme="light"]) .media-writer-empty-card,
html:not([data-theme="light"]) .media-writer-image-empty{
  border-color: rgba(148, 163, 184, .16);
  background: #0f172a;
}

html:not([data-theme="light"]) .media-writer-platform-guide,
html:not([data-theme="light"]) .media-writer-empty-inline,
html:not([data-theme="light"]) .media-writer-empty-card,
html:not([data-theme="light"]) .media-writer-image-empty span,
html:not([data-theme="light"]) .media-writer-image-empty small{
  color: rgba(203, 213, 225, .82);
}

html:not([data-theme="light"]) .media-writer-image-empty strong{
  color: #e5edf8;
}

@media (max-width: 1420px){
  .media-writer-image-panel .media-writer-image-results{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .media-writer-image-panel .media-writer-image-card img,
  .media-writer-image-panel .media-writer-image-preview-button img{
    min-height: 220px;
  }

  .media-writer-image-panel .media-writer-image-card.is-ratio-2-3 img,
  .media-writer-image-panel .media-writer-image-card.is-ratio-2-3 .media-writer-image-preview-button img{
    min-height: 280px;
  }
}

@media (min-width: 1421px){
  .media-writer-image-panel .media-writer-image-results{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .media-writer-image-panel .media-writer-image-card.is-ratio-2-3 img,
  .media-writer-image-panel .media-writer-image-card.is-ratio-2-3 .media-writer-image-preview-button img{
    min-height: 380px;
  }
}

@media (max-width: 720px){
  .media-writer-platform-guide{
    padding: 12px;
  }

  .media-writer-image-panel .media-writer-image-card img,
  .media-writer-image-panel .media-writer-image-preview-button img,
  .media-writer-image-panel .media-writer-image-card.is-ratio-2-3 img,
  .media-writer-image-panel .media-writer-image-card.is-ratio-2-3 .media-writer-image-preview-button img{
    min-height: 0;
  }

  .media-writer-image-actions .btn{
    flex-basis: calc(50% - 4px);
    padding-inline: 10px;
  }
}