/* Compuverse identity: corporate navy + blue with the red CTA gradient used
   on compuverse.com. Original logo files are served locally, unmodified. */
:root {
  --cv-navy: #102d7b;
  --cv-deep: #091a48;
  --cv-blue: #2117ab;
  --cv-red: #cc3333;
  --cv-red-dark: #661a1a;
  --cv-red-gradient: linear-gradient(105deg, var(--cv-red), var(--cv-red-dark));
  --bg: #f4f6fb;
  --ink: #152447;
  --muted: #65738d;
  --line: #dfe5f1;
  --purple: var(--cv-navy);
  --lavender: #eaf0fc;
  --danger: #b32936;
}
::selection { color: white; background: var(--cv-navy); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: #6589e1; }
.wordmark { font-size: 42px; letter-spacing: -2px; font-weight: 700; color: var(--cv-navy); }
.wordmark span { color: var(--cv-red); font-size: 25px; top: -9px; margin-left: 3px; }
.button { background: var(--cv-red-gradient); border-color: transparent; box-shadow: 0 5px 15px #a1262614; }
.button:hover { background: linear-gradient(105deg,#ac2626,#5b1515); box-shadow: 0 7px 20px #a1262628; }
.button.secondary { background: white; border-color: var(--line); box-shadow: none; }
.button.secondary:hover { background: var(--lavender); }
.button.danger { background: #ac2535; border-color: #ac2535; }
.eyebrow { color: var(--cv-navy); }
.sidebar { background: linear-gradient(165deg,#102d7b 0%,#0c235e 55%,#091a48 100%); color: white; border: 0; }
.product-brand { padding-top: 1px; }
.sidebar .wordmark { color: white; }
.sidebar .wordmark span { color: #ed7777; }
.product-byline { display: block; margin-top: 6px; font-size: 7px; font-weight: 550; letter-spacing: 1.6px; color: #a9bce8; }
.sidebar-label { color: #96addc; margin-top: 40px; }
.sidebar nav a { color: #c2ceed; transition: background .2s, color .2s; }
.sidebar nav a:hover { background: #ffffff0c; color: white; }
.sidebar nav a.active { background: #ffffff14; color: white; box-shadow: inset 3px 0 #e06767; }
.nav-count { background: #ffffff18; color: #dce6ff; }
.sidebar-art { margin-bottom: 8px; padding-top: 25px; }
.sidebar-art em { color: #a8c2ff; }
.sidebar-art > span { color: #8fa7db; }
.orb { background: radial-gradient(circle at 29% 23%,#f9fcff 0%,#afc9f8 24%,#456eb8 53%,#102d7b 79%,#07173f 100%); box-shadow: inset -13px -7px 20px #06123555,0 16px 35px #00000024; }
.sidebar-corporate { display: flex; justify-content: center; padding: 1px 0 12px; }
.sidebar-corporate img { width: 155px; height: 88px; object-fit: contain; }
.account { border-color: #ffffff19; }
.account small { color: #a4b9e5; }
.account .avatar { background: #ffffff15; color: #e1eaff; }
.account .icon-button:hover { background: #ffffff15; }
.topbar { background: #ffffffd9; border-bottom: 1px solid #dfe5f1; }
.topbar-brand { display: inline-flex; align-items: center; gap: 13px; }
.topbar-brand img { width: 126px; height: 56px; object-fit: contain; }
.topbar-brand .slash { margin: 0 2px; color: #bac7e0; }
.topbar-brand strong { color: #6d7890; font-size: 11px; }
.live-dot { color: #63738d; }
.live-dot:before { box-shadow: 0 0 0 4px #459b7020; }
.page-heading h1 { color: #14295b; }
.page-heading h1 em { color: #244aa0; }
.stats { position: relative; overflow: hidden; box-shadow: 0 3px 15px #102d7b04; }
.stats:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--cv-navy) 0%,var(--cv-blue) 75%,var(--cv-red) 100%); }
.stats strong { color: #173675; }
.stats span { color: #73809a; }
.tabs button[aria-pressed=true] { color: var(--cv-navy); box-shadow: inset 0 -2px var(--cv-navy),0 2px 8px #102d7b08; }
.site-card { border-color: #e0e6f0; box-shadow: 0 2px 8px #102d7b03; }
.site-card:hover { border-color: #c7d4ee; box-shadow: 0 13px 30px #102d7b10; }
.site-title h2 { color: #1d315b; }
.site-title > span { color: #7893c8; }
.site-slug, .card-meta { color: #7b89a1; }
.card-actions { border-top-color: #e9edf6; }
.card-actions button, .card-actions a { color: #4b6596; }
.card-actions .delete-button { color: #b35a62; }
.badge.preview { background: #f3f6ffef; color: #284b90; }
.badge.working { background: #eaf0ff; color: #1b458f; }
.badge.archived { background: #f1f3f7; color: #687891; }
.cover-0 { background: #dce7f8; }.cover-1 { background: #e0e9ed; }.cover-2 { background: #e3e8f8; }.cover-3 { background: #f0e4e5; }.cover-4 { background: #dfe9f7; }
.cover-mark { color: #849fce; }
.site-card.highlighted { outline-color: #537ccc; }
.new-label { background: var(--cv-navy); }
.changes-note { color: #91620f; }
.empty-state { border-color: #c5d2ec; background: #ffffff80; }
.empty-state > span { color: #86a0d0; }
.spinner { border-color: #b6c8ec; border-top-color: #173f94; }
.search { border-color: #e1e7f2; }
.search input::placeholder { color: #8b98ae; }
.form-panel { border-color: #dfe6f2; box-shadow: 0 3px 15px #102d7b04; }
label input, label select, label textarea { background: #fcfdff; border-color: #d7dfed; }
input::placeholder, textarea::placeholder { color: #8a97ad; }
.section-title > span { background: #edf2fd; color: var(--cv-navy); }
.section-title h2 { color: #193b7b; }
.creation-note { color: #dce7ff; background: linear-gradient(150deg,#102d7b,#091a48); border: 0; overflow: hidden; }
.creation-note .eyebrow { color: #a8bff3; }
.creation-note .mini-orbit { color: #ef8b8b; }
.creation-note h2 em { color: #a9c5ff; }
.creation-note ol { color: #cfddfa; }
.creation-note > p:not(.eyebrow), .creation-note small { color: #a9bce1; }
.creation-note small { border-top-color: #ffffff24; }
.workspace-footer { color: #8392ad; border-top-color: #dfe5f1; }
.workspace-footer strong { color: var(--cv-navy); font-size: 12px; letter-spacing: -.3px; }
.footer-divider { color: var(--cv-red); margin: 0 8px; }
.toast { background: var(--cv-deep); }
.preview-dialog header { background: #f8faff; color: #183875; }
.login-page { background: #fff; min-height: 100vh; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
.login-visual { background: radial-gradient(ellipse at 15% 10%,#214da080,transparent 50%),linear-gradient(150deg,#102d7b 0%,#0b2059 60%,#071332 100%); position: relative; overflow: hidden; min-height: 850px; display: flex; flex-direction: column; }
.login-visual:before { content:''; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(#87a8ef 1px,transparent 1px),linear-gradient(90deg,#87a8ef 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(#000,transparent 90%); pointer-events:none; }
.corporate-logo { position: absolute; top: 23px; left: 30px; z-index: 2; }
.corporate-logo img { display: block; width: 190px; height: 108px; object-fit: contain; }
.visual-edition { position: absolute; top: 72px; right: 30px; color: #7f9dd9; letter-spacing: 1.3px; font-size: 7px; }
.login-visual .login-orbit { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 440px; height: 440px; margin: 0; }
.login-orbit:before { background: radial-gradient(circle at 28% 25%,#f4faff,#adc7f5 22%,#4c76be 48%,#183e8a 71%,#07183b); box-shadow: inset -24px -12px 55px #030d2e90,0 30px 90px #00000035,0 0 120px #537bcb20; }
.login-orbit > span { color: #ffffffdf; font-size: 128px; }
.login-orbit i { border-color: #8bb0fb44; }
.login-orbit i:nth-child(2) { border-color: #de626273; }
.visual-caption { position: absolute; left: 55px; bottom: 95px; right: 25px; }
.visual-caption .eyebrow { color: #9db8ed; font-size: 8px; letter-spacing: 1.7px; }
.visual-caption h2 { color: white; font-size: clamp(30px,3vw,47px); letter-spacing: -1.5px; line-height: 1.2; font-weight: 450; margin: 18px 0; }
.visual-caption em { color: #a9c6ff; }
.visual-caption > p { color: #9cb2dc; font-size: 12px; }
.visual-coordinate { position: absolute; left: 55px; bottom: 32px; right: 45px; display:flex; align-items:center; justify-content:space-between; font-size: 8px; color: #718fca; letter-spacing: 1.3px; }
.visual-coordinate b { color: #e16e6e; font-size: 21px; font-weight: 400; }
.login-card { margin: auto; width: min(100%,560px); padding: 65px 55px 35px; max-width: 560px; }
.login-card > .wordmark { margin-bottom: 60px; }
.login-card h1 { color: #14295b; font-size: clamp(37px,3.4vw,51px); letter-spacing: -1.8px; }
.login-card h1 em { color: #244aa0; }
.login-card .muted { color: #697a98; }
.google { background: white; border: 1px solid #ccd8ed; color: #18366e; box-shadow: 0 5px 18px #102d7b06; }
.google:hover { background: #f2f6ff; box-shadow: 0 5px 18px #102d7b0e; }
.google b { color: var(--cv-navy); }
.login-note { color: #8492aa; }
.login-note strong { color: #304d82; }
.login-card footer { border-top: 1px solid #e4eaf4; padding-top: 18px; margin-top: 45px; color: #8592a9; }
.brand-signature { display: flex; align-items: center; gap: 18px; width: fit-content; }
.login-card footer .brand-signature > span { display: inline; font-size: 7px; color: #7e8ca6; letter-spacing: 1.4px; }
.brand-signature img { width: 145px; height: 64px; object-fit: contain; }
.login-card footer > p { margin: 8px 0 0; font-size: 9px; }
@keyframes completed { 50% { outline-color:#416dbf; box-shadow:0 0 0 7px #416dbf20; background:#f1f6ff; } 0%,100% { box-shadow:0 0 0 1px #416dbf08; } }
@media(max-width:1150px) {
  .login-visual { min-height: 780px; }
  .visual-edition { display: none; }
  .login-visual .login-orbit { transform: translate(-50%,-50%) scale(.8); }
  .login-card { padding-inline: 35px; }
  .visual-caption, .visual-coordinate { left: 35px; }
  .visual-caption h2 { font-size: 34px; }
}
@media(max-width:720px) {
  .product-brand .wordmark { font-size: 31px; }
  .product-byline { font-size: 5px; letter-spacing: 1px; margin-top: 3px; }
  .sidebar { gap: 12px; padding: 15px 18px; }
  .sidebar-corporate { display: none; }
  .sidebar nav a { padding: 9px 8px; }
  .sidebar nav a.active { box-shadow: inset 0 -2px #e06767; }
  .sidebar .wordmark span { font-size: 20px; }
  .topbar { height: 60px; }
  .topbar-brand { gap: 9px; }
  .topbar-brand img { width: 105px; height: 47px; }
  .topbar-brand strong { font-size: 9px; }
  .live-dot { font-size: 7px; }
  .login-page { display: block; }
  .login-visual { min-height: 275px; height: 275px; }
  .corporate-logo { left: 16px; top: 0; }
  .corporate-logo img { width: 125px; height: 71px; }
  .login-visual .login-orbit { left: 77%; top: 52%; transform: translate(-50%,-50%) scale(.48); }
  .visual-caption { left: 27px; bottom: 35px; right: auto; z-index: 1; max-width: 220px; }
  .visual-caption .eyebrow { font-size: 6px; letter-spacing: 1px; max-width: 160px; line-height: 1.8; }
  .visual-caption h2 { font-size: 29px; letter-spacing: -.7px; margin-block: 10px; }
  .visual-caption > p, .visual-coordinate { display: none; }
  .login-card { padding: 30px 28px; max-width: 470px; }
  .login-card > .wordmark { margin-bottom: 26px; font-size: 36px; }
  .login-card h1 { font-size: 38px; }
  .login-card footer { margin-top: 28px; padding-top: 10px; }
  .brand-signature { gap: 13px; }
  .brand-signature img { width: 130px; height: 58px; }
}
@media(prefers-reduced-motion:reduce) { .completion-pulse { outline-color:var(--cv-navy); } }

/* Locale controls keep their position as labels change language. */
.header-controls{display:flex;align-items:center;gap:20px;min-width:0}
.language-switcher{display:inline-flex;align-items:center;gap:3px;padding:3px;background:#f1f5fd;border:1px solid #d8e2f4;border-radius:9px;flex-shrink:0}
.language-switcher button{background:transparent;border:0;border-radius:6px;color:#667a9f;min-width:36px;min-height:32px;padding:6px 8px;font-size:10px;font-weight:650;letter-spacing:.3px}
.language-switcher button[aria-pressed=true]{background:var(--cv-navy);color:white;box-shadow:0 2px 5px #102d7b18}
.language-switcher button:hover{background:#e0e9fb;color:#102d7b}
.language-switcher button[aria-pressed=true]:hover{background:#163c94;color:white}
.login-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:60px}
.login-toolbar .wordmark{margin:0}
.language-note{background:#edf3ff;border:1px solid #dbe6fb;border-radius:8px;padding:13px 15px;font-size:11px;line-height:1.7;color:#35558b;margin:5px 0 0}
.dialog-controls{display:flex;align-items:center;gap:8px;margin-left:10px;flex-shrink:0}
.dialog-controls .language-switcher button{min-width:30px;padding-inline:6px}
.action-dialog header>div:first-child{min-width:0}
.action-dialog h2{overflow-wrap:anywhere}
.sidebar nav a span[data-i18n]{min-width:0}
.google>span[data-i18n]{margin-left:0}
@media(max-width:1150px){.header-controls{gap:12px}.login-toolbar{gap:12px}.login-toolbar .wordmark{font-size:38px}}
@media(max-width:720px){.login-toolbar{margin-bottom:26px}.login-toolbar .wordmark{font-size:36px}.language-switcher button{min-width:34px;min-height:36px}.sidebar nav a{gap:6px}.topbar-brand img{width:96px;height:43px}.header-controls{gap:8px}.topbar .live-dot{display:none}.topbar-brand{gap:7px}}