:root{
  --ink:#17243a;
  --muted:#718096;
  --line:#e6edf4;
  --soft:#f5f9fd;
  --lime:#0059ff;
  --green:#0059ff;
  --pink:#ff7d1b;
  --brand-blue:#0059ff;
  --brand-cyan:#30f5fc;
  --brand-pale-blue:#d9f0ff;
  --brand-pale-green:#e6f3d6;
  --brand-orange:#ff7d1b;
  --shadow:0 18px 48px rgba(27,74,130,.09);
}

button:focus-visible,input:focus-visible,textarea:focus-visible,
.video-field input:focus,.video-field select:focus,.video-field textarea:focus,
.auth-fields input:focus,.detail-settings textarea:focus{
  outline-color:#30f5fc;
  border-color:#30f5fc;
}

/* Shared top navigation: one layout and component system in every app section. */
.topbar{justify-content:flex-start;padding-inline:20px}
.topbar-brand{gap:9px}
.topbar-brand img{width:33px;height:33px}
.top-actions{gap:9px;margin-left:auto}
.topbar .page-label{display:none!important}

/* Blue and cyan are the main interactive colors; orange is reserved for accents. */
.top-pill.coral,.top-pill.recharge{
  background:#ff7d1b;border-color:#ff7d1b;color:#fff;
  box-shadow:0 7px 18px rgba(255,122,26,.2);
}
.top-pill.tutorial{color:#d9650b;background:#fff8f2;border-color:#ffe1c7}
.top-pill.partner{background:#0059ff;border-color:#0059ff;color:#fff}
.top-pill.points{border-color:#cfe2fb;background:#fff;color:#1a4f9f}
.notice{background:#ff7d1b}
.top-home.active,.top-home:hover{
  border-color:#c8e5fb;background:#eaf6ff;color:#0059ff
}
.nav-item.active{border:0;background:#0b4dbb;color:#fff}
.nav-item.active .nav-icon img{filter:brightness(0) invert(1)}
.side-nav:hover .nav-item.active:not(:hover){background:transparent;color:#383b41}
.nav-item:hover{background:#0b4dbb;color:#fff}
.nav-item:hover .nav-icon img{filter:brightness(0) invert(1)}
.nav-item{transition:background-color .14s ease,color .14s ease}
.nav-item.beta small,.tool-list em{background:#e6f3d6;color:#4d722b}
.portal-primary,.generate-video.enabled,.agent-composer-bottom button,.admin-action.primary{
  background:#0059ff;border-color:#0059ff;color:#fff;
}
.portal-primary{box-shadow:0 9px 20px rgba(8,96,245,.22)}
.portal-primary:hover,.generate-video.enabled:hover,.agent-composer-bottom button:hover{
  background:#064fd0;border-color:#064fd0
}
.home-portal h1 span{background:linear-gradient(90deg,#27bfcf,#0059ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-page{background:radial-gradient(ellipse 85% 65% at 50% 40%,rgba(255,255,255,.82) 0%,#d9f0ff 48%,#a8d6f5 100%)}
.home-portal-art:before{background:radial-gradient(circle,#ffffffd9 0,#ffffff8a 35%,#fff0 72%)}
.agents-page,.works-page,.placeholder-page.shown{background:#f5f9fd}
.agents-kicker i,.agent-ready i,.contact-live{background:#30f5fc;box-shadow:0 0 0 4px rgba(39,230,232,.16)}
.agent-category.active,.agent-option.active,.agent-message.user .agent-message-bubble,.admin-tabs button.selected{
  border-color:#b8def8;background:#eaf6ff;color:#0756d8
}
.agent-option-icon,.agent-active-icon,.agent-welcome-art,.placeholder-card>img{
  background:linear-gradient(145deg,#d9f0ff,#e6f3d6);color:#0059ff
}
.detail-mode.selected,.type-chip.selected,.video-segment button.selected,.works-tabs button.selected,.detail-results-toolbar button.selected{
  border-color:#a9d1fa;background:#eaf4ff;color:#0756d8
}
.select-control.green,.switch-function,.trim-btn,.small-action,.asset-button,.detail-action{
  border-color:#cfe2fb;background:#eaf4ff;color:#0756d8
}
.result-filters .filter-active,.result-filters .filter-btn,.shortcut{
  background:#eaf4ff;border-color:#b8d7fb;color:#0756d8
}
.submit-arrow.ready,#homeSubmit.ready,#generateSubmit.ready,.auth-submit,.detail-empty button,.detail-output>button:not(:disabled){
  background:#0059ff;color:#fff
}
.video-link-row button{background:#0059ff;color:#fff}
.checkbox-custom{background:#0059ff;color:#fff}
.choice-card.selected,.video-step.active,.detail-mode.selected .mode-art{border-color:#b8d7fb;background:#eaf4ff;color:#0756d8}
.asset-tile .file-mark,.detail-counts,.task-thumb{background:#eaf4ff;color:#386aa8}
.video-toggle input,.retain-audio input,.video-check-row input{accent-color:#0059ff}
.layout-control-wrap{position:relative}
.layout-control-wrap>button{height:40px!important;min-width:142px;border-color:#e6eaf0!important;border-radius:24px!important;background:#fff!important;box-shadow:0 4px 14px #17243a0c}
.layout-menu{position:absolute;z-index:40;top:calc(100% + 9px);right:0;width:210px;padding:8px;border:1px solid #e7ebf0;border-radius:18px;background:#fff;box-shadow:0 16px 38px #17243a20}
.layout-menu[hidden]{display:none}
.layout-menu button{display:flex;width:100%;height:39px!important;align-items:center;padding:0 13px!important;border:0!important;border-radius:11px!important;background:#fff!important;color:#445063;text-align:left;font-size:13px!important;font-weight:500!important}
.layout-menu button:hover{background:#f5f8fb!important}
.layout-menu button.selected{background:#d9fb46!important;color:#101820!important;font-weight:700!important}
.layout-menu button.selected::after{content:'✓';margin-left:auto;font-size:15px}
.image-results[data-layout="3"]:has(.image-result-card){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 16px}
.image-results[data-layout="4"]:has(.image-result-card){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 16px}
.image-results[data-layout="5"]:has(.image-result-card){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 16px}
.image-results[data-layout="6"]:has(.image-result-card){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 14px}
.image-results[data-layout="9"]:has(.image-result-card){display:grid;grid-template-columns:repeat(9,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 12px}
.image-results[data-layout]:has(.image-result-card){padding:24px 28px 160px}
.image-results:has(.image-result-card),.image-results[data-layout]:has(.image-result-card){gap:16px}
.submit-arrow{display:grid;place-items:center;line-height:0}
.submit-arrow.ready img{filter:brightness(0) invert(1)}
.reference-upload-item:nth-child(n){z-index:1}
.reference-upload-item:nth-child(2){z-index:2}.reference-upload-item:nth-child(3){z-index:3}.reference-upload-item:nth-child(4){z-index:4}.reference-upload-item:nth-child(5){z-index:5}.reference-upload-item:nth-child(6){z-index:6}.reference-upload-item:nth-child(7){z-index:7}.reference-upload-item:nth-child(8){z-index:8}.reference-upload-item:nth-child(9){z-index:9}.reference-upload-item:nth-child(10){z-index:10}.reference-upload-item:nth-child(11){z-index:11}.reference-upload-item:nth-child(12){z-index:12}
.reference-upload-add{position:relative;z-index:13;margin-left:-27px}
.reference-upload-item>span{position:relative;z-index:2}
.reference-upload-item>button{right:-2px}
.contact-qr,.contact-hours,.admin-users-card,.admin-feature-grid article,.agents-catalog,.agent-chat{
  border-color:#dceaf5
}
.works-empty,.asset-card,.work-row,.detail-workbench,.panel-section,.video-card,.prompt-card{
  border-color:#e6edf4
}
.work-status.succeeded{background:#e6f3d6;color:#4e702c}
.work-status.failed,.auth-error,.task-error{color:#c34f3d}
.video-feedback,.generate-feedback,.home-feedback,.video-inline-status{color:#0860a8}
.account-brand b,.account-balance{background:#eaf4ff;color:#24518b}
.account-brand{color:#24518b}
.account-balance strong{color:#173d75}
.account-submit,.auth-submit{border-color:#0059ff;background:#0059ff;color:#fff}

/* Consistent navigation rhythm, button sizes, and matching icon/text colors. */
.top-actions .top-home,
.top-actions .top-pill{
  height:38px;
  padding-inline:13px;
  gap:8px;
  border:1px solid #e3eaf2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 7px rgba(24,52,86,.045);
  color:#000;
  font-size:12px;
  font-weight:650;
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;
}
.top-actions .top-home img,
.top-actions .top-pill img{width:16px;height:16px;flex:0 0 16px}
.top-actions .top-home:hover,
.top-actions .top-pill:not(.coral):not(.partner):not(.recharge):hover{
  border-color:#c8def7;background:#f5faff;box-shadow:0 4px 12px rgba(0,89,255,.08);transform:translateY(-1px)
}
.top-actions .top-home.active{
  border-color:#c8def7;background:#eaf4ff;color:#0059ff;box-shadow:none
}
.top-actions .top-home.active img{filter:brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(4544%) hue-rotate(218deg) brightness(101%) contrast(106%)}
.top-actions .top-pill.coral,
.top-actions .top-pill.partner{
  border-color:#0059ff;background:#0059ff;color:#fff;box-shadow:0 5px 13px rgba(0,89,255,.17)
}
.top-actions .top-pill.coral img,
.top-actions .top-pill.partner img{filter:brightness(0) invert(1)}
.top-actions .top-pill.coral:hover,
.top-actions .top-pill.partner:hover{background:#064fd0;border-color:#064fd0}
.top-actions .top-pill.tutorial{color:#000;background:#fff;border-color:#e3eaf2}
.top-actions .top-pill.recharge,
.top-actions .top-pill.points{color:#0059ff;background:#eaf4ff;border-color:#c8def7;box-shadow:none}
.top-actions .top-pill.recharge{color:#fff;background:#ff7d1b;border-color:#ff7d1b;box-shadow:0 5px 13px rgba(255,125,27,.18)}
.top-actions .top-pill.recharge img{filter:brightness(0) invert(1)}
.top-actions .top-pill.points img{filter:brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(4544%) hue-rotate(218deg) brightness(101%) contrast(106%)}
.top-actions .top-pill.client small{color:#64748b;background:#f1f5f9}
.top-actions .top-pill.points b{color:inherit}
.top-actions .top-home.active{border-color:#0059ff;background:#0059ff;color:#fff;box-shadow:0 5px 13px rgba(0,89,255,.17)}
.top-actions .top-home.active img{filter:brightness(0) invert(1)}
.top-actions .admin-mode-toggle{display:flex;margin-right:0}
.top-actions .admin-mode-toggle[hidden]{display:none}
@media(max-width:1150px){
  .topbar{padding-inline:18px}
  .topbar-brand{gap:8px}
  .topbar-brand img{width:31px;height:31px}
  .top-actions{gap:7px}
  .top-actions .top-home,.top-actions .top-pill{height:36px;padding-inline:10px;gap:6px}
}
@media(max-width:1040px){
  .top-actions{gap:6px}
  .top-actions .top-pill{width:34px;height:34px;padding:0}
  .top-actions .top-pill.points{width:auto;min-width:34px;padding:0 7px}
}
.point-cost{display:flex;align-items:center;gap:4px;white-space:nowrap;color:#17243a;font-size:12px}
.point-cost img{width:14px;height:14px;filter:brightness(0) saturate(100%) invert(58%) sepia(88%) saturate(1878%) hue-rotate(1deg) brightness(103%) contrast(103%)}
.point-cost b{font-size:13px;font-weight:700}
.point-cost small{color:#78879a;font-size:10px}
.point-cost.free b,.point-cost.free small{color:#53782a}