/* ModiBind design refinement: shared navigation and the home workspace. */
:root {
  --ink:#19334e; --text:#415b73; --muted:#647c92; --line:#dce6ef;
  --blue:#286bbb; --blue-deep:#1e5595; --blue-soft:#edf4fc;
  --soft:#f4f7fb; --radius:12px; --shadow:0 5px 22px #19334e06;
}
body {font-size:14px;background:#f5f8fb;line-height:1.7}
.container,body[data-view="home"] .container {width:min(1440px,calc(100% - 80px))}
.utility-bar {height:30px;background:#edf3f8;border-bottom:1px solid #e4ecf3}
.utility-left {font-size:10px;letter-spacing:1.25px;color:#627e99}
.utility-right {font-size:11px;color:#62788e}
.site-header {background:#fffffffa;border-bottom:1px solid var(--line);box-shadow:0 3px 18px #19334e04}
.header-inner {height:82px;min-height:82px;gap:32px}
.brand {flex-shrink:0;gap:12px}
.brand-title {font-size:29px;letter-spacing:-1px}
.brand-subtitle {font-size:8px;letter-spacing:1.35px;color:#69839c}
.brand-mark {width:39px;height:43px}
.main-nav {height:82px;gap:24px;min-width:0;align-items:stretch}
.main-nav button {font-size:14px;white-space:nowrap;color:#60758b;padding:0 1px}
.main-nav button.active {color:var(--blue);font-weight:650}
.main-nav button:hover {color:var(--blue)}
.main-nav button.active::after {height:3px;border-radius:3px 3px 0 0}
.nav-count {background:#eff4f9;color:#587591}
.header-actions {gap:12px}
.visit-display {min-height:40px;padding:8px 11px;border-color:#e4ecf3;background:#f7f9fc;color:#617b94;font-size:12px;border-radius:8px}
.visit-display strong {font-size:15px}
.header-actions .create-design {min-height:42px;font-size:13px;padding:10px 14px;border-radius:8px}
.btn {border-radius:8px;min-height:42px;font-size:13px;padding:10px 16px;transition:background .16s,border-color .16s,box-shadow .16s}
.btn.primary {background:var(--blue);border-color:var(--blue);box-shadow:0 3px 9px #286bbb18}
.btn.primary:hover {background:var(--blue-deep);border-color:var(--blue-deep);box-shadow:0 4px 12px #286bbb25}
.btn:not(.primary):hover {background:#f2f7fc;border-color:#b9cfe4}
.text-btn {min-height:36px;font-size:13px;gap:7px}
:is(button,a,input,select,textarea,summary):focus-visible {outline:3px solid #75a7dd;outline-offset:4px}
button:disabled {box-shadow:none}
.hero {background:linear-gradient(115deg,#f2f7fd 5%,#f9fbfe 53%,#eaf3fc 100%);border-bottom:1px solid #dfeaf5;overflow:hidden}
body[data-view="home"] .hero-inner {min-height:364px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}
body[data-view="home"] .hero-copy {padding:38px 0 40px}
body[data-view="home"] .hero .eyebrow {font-size:10px;letter-spacing:1.5px}
body[data-view="home"] .hero h1 {font-size:clamp(36px,3.1vw,48px);line-height:1.36;letter-spacing:-1.25px;margin:18px 0;font-weight:700}
body[data-view="home"] .hero-description {font-size:14px;line-height:1.95;color:#56728d;max-width:700px}
body[data-view="home"] .hero-actions {margin-top:26px;gap:12px;flex-wrap:wrap}
body[data-view="home"] .hero-actions .btn {font-size:14px;min-height:46px;padding:11px 20px}
body[data-view="home"] .hero-visual {display:flex;align-items:center;justify-content:center;min-width:0;height:auto;opacity:1;inset:auto}
body[data-view="home"] .hero-visual .molecule-svg {width:100%;max-width:560px;max-height:330px;filter:drop-shadow(0 10px 18px #1d5d9420)}
.source-stats {background:#fff}
.source-stats .stats-grid {padding:24px 0 20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.source-stats .stat-item {min-width:0;min-height:56px;align-items:center;padding-left:30px;gap:14px}
.source-stats .stat-icon {width:42px;height:42px;border-radius:11px;background:#eef5fc;color:#6291bd}
.source-stats .stat-number {font-size:30px;line-height:1.15;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.source-stats .stat-title {font-size:13px;margin-top:6px;color:#637d96}
.stats-link-row {min-height:38px}
.stats-link-row .text-btn,.stats-link-row>span {font-size:11px;color:#587899}
.home-page {padding:28px 0 44px}
.home-workspace-links {height:auto;min-height:80px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px 20px;margin:0 0 24px;gap:24px;align-items:center;box-shadow:var(--shadow)}
.home-search {flex:1;max-width:none;min-width:0;margin:0;border:1px solid #cfdeec;border-radius:8px;padding:4px 4px 4px 14px;box-shadow:none}
.home-search input {font-size:14px;line-height:1.5;padding:9px 0}
.home-workspace-links .home-search button {font-size:13px;min-height:40px;padding:8px 17px;background:var(--blue);color:white;border:1px solid var(--blue);border-radius:6px;white-space:nowrap}
.home-workspace-links .workspace-shortcut {font-size:14px;border:0;padding:8px 0;gap:9px;min-height:44px;white-space:nowrap;color:var(--text)}
.home-workspace-links .workspace-shortcut:hover {color:var(--blue)}
.home-workspace-links .workspace-shortcut .icon {width:18px;height:18px}
.home-workspace-links .workspace-shortcut span {font-size:10px;padding:3px 6px}
.reference-overview {border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);scroll-margin-top:110px}
.reference-heading {padding:25px 28px;background:#fff}
.reference-heading .eyebrow {font-size:10px;color:#5881aa;letter-spacing:1.4px}
.reference-heading h2 {font-size:23px;margin-top:7px;letter-spacing:-.5px}
.reference-heading .btn {font-size:13px;min-height:42px}
.reference-columns {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.reference-columns>section {min-width:0;padding:25px 28px 28px}
.reference-columns h3 {font-size:13px;color:#506e8b;font-weight:600;margin-bottom:18px}
.reference-table {color:#496983;font-size:14px}
.reference-table th,.reference-table td {padding:15px 12px;border-color:#e8eef5}
.reference-table th:first-child {width:53%}
.reference-table thead {background:#f4f7fb;color:#586f88}
.reference-table thead th {font-size:12px}
.reference-table thead small {font-size:9px;color:#6b839c}
.reference-table tbody th {font-weight:500;color:#375876}
.reference-table tbody th small {font-size:11px;color:#6e859b;line-height:1.5;margin-top:4px}
.reference-table td {color:#375876;font-size:14px;letter-spacing:-.25px;white-space:nowrap}
.reference-table tbody tr:hover>* {background:#f4f8fc}
.reference-distribution-heading>span {font-size:10px;color:#6a8299}
.reference-bar-row {margin-bottom:25px}
.reference-bar-row>div:first-child {font-size:14px;color:#466887;margin-bottom:10px}
.reference-bar-track {height:7px;background:#edf2f7}
.reference-distribution-footer {padding-top:18px;color:#637e98}
.reference-note {font-size:12px;color:#6c8298;line-height:1.8}
.home-full-statistics {border-radius:12px;border-color:var(--line);box-shadow:none;margin-top:18px}
.home-full-statistics>summary {padding:20px 24px}
.home-full-statistics>summary b {font-size:14px}
.home-full-statistics>summary small {font-size:12px;color:#647d95}
.home-full-content {padding:0 22px 22px}
.site-footer {background:#edf3f8;border-top:1px solid var(--line)}
.footer-inner {padding-top:28px;padding-bottom:28px;gap:28px}
.footer-brand {font-size:20px}
.footer-brand span,.footer-small,.footer-version {font-size:12px;color:#60788f}
.footer-links button {font-size:13px;min-height:36px;color:#486985}
@media(max-width:1320px) {
 .header-inner {gap:22px}.main-nav {gap:17px}.main-nav button {font-size:13px}
 .brand-title {font-size:26px}.brand-subtitle {font-size:7px;letter-spacing:1px}.brand-mark {width:35px}
 .header-actions .create-design {padding:9px 11px;font-size:12px}.visit-display {gap:5px;font-size:11px}
 .source-stats .stat-item {padding-left:24px}.source-stats .stat-number {font-size:28px}
}
@media(max-width:1120px) {
 .container,body[data-view="home"] .container {width:calc(100% - 48px)}
 .header-inner {display:grid;grid-template-columns:1fr auto;min-height:0;height:auto;padding-top:14px;gap:0}
 .main-nav {grid-column:1/-1;grid-row:2;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;height:50px;gap:28px;margin-top:10px;scrollbar-width:thin}
 .main-nav button {flex-shrink:0;font-size:14px;min-height:44px}
 .header-actions {grid-column:2;grid-row:1}.brand-title {font-size:27px}
 body[data-view="home"] .hero-inner {gap:16px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
 body[data-view="home"] .hero h1 {font-size:36px}
 .reference-columns>section {padding:22px 20px}.reference-table th,.reference-table td {padding:14px 8px}
 .source-stats .stat-number {font-size:25px}.source-stats .stat-icon {width:35px;height:38px}
 .home-workspace-links {gap:18px;padding:14px 16px}.home-workspace-links .workspace-shortcut {font-size:13px}
}
@media(max-width:800px) {
 body[data-view="home"] .hero-inner {grid-template-columns:1fr;gap:0;min-height:0}
 body[data-view="home"] .hero-copy {padding:32px 0 12px}
 body[data-view="home"] .hero h1 {font-size:38px}
 body[data-view="home"] .hero-description {max-width:650px}
 body[data-view="home"] .hero-visual {height:215px;margin-bottom:12px}
 body[data-view="home"] .hero-visual .molecule-svg {height:235px;max-width:410px}
 .reference-columns {grid-template-columns:1fr}.reference-site-statistics {border-right:0;border-bottom:1px solid var(--line)}
 .home-workspace-links {flex-wrap:wrap;gap:5px 24px}.home-search {flex:1 0 100%}
 .source-stats .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 0}
 .source-stats .stat-item {border:0;padding:18px 20px;min-height:90px;gap:14px}
 .source-stats .stat-item:nth-child(odd) {padding-left:0;border-right:1px solid var(--line)}
 .source-stats .stat-item:nth-child(-n+2) {border-bottom:1px solid var(--line)}
 .source-stats .stat-number {font-size:28px}.source-stats .stat-title {font-size:13px}
 .footer-inner {flex-direction:column;align-items:flex-start}.footer-links {justify-content:flex-start}
}
@media(max-width:520px) {
 .container,body[data-view="home"] .container {width:calc(100% - 32px)}
 .utility-left {font-size:8px;letter-spacing:.6px}.utility-right {font-size:10px}.utility-right>span:first-child {display:none!important}
 .brand-title {font-size:24px}.brand-mark {width:32px;height:36px}.brand-subtitle {display:none}
 .header-inner {padding-top:12px}.header-actions {gap:6px}.header-actions .create-design {display:none}
 .visit-display {min-height:36px;font-size:11px;padding:7px 9px}.visit-display strong {font-size:14px}
 .main-nav {justify-content:flex-start;gap:24px;margin-top:8px}.main-nav button {font-size:13px}
 body[data-view="home"] .hero h1 {font-size:32px;letter-spacing:-.75px;margin:14px 0}
 body[data-view="home"] .hero .eyebrow {font-size:8px;letter-spacing:1px}
 body[data-view="home"] .hero-description {font-size:14px;line-height:1.9}
 body[data-view="home"] .hero-description br {display:none}
 body[data-view="home"] .hero-actions {gap:8px;margin-top:22px}
 body[data-view="home"] .hero-actions .btn {font-size:13px;padding:10px 12px;min-height:44px}
 body[data-view="home"] .hero-visual {height:180px}
 body[data-view="home"] .hero-visual .molecule-svg {height:200px}
 .source-stats .stat-item {gap:10px;padding-right:0;padding-left:16px}.source-stats .stat-number {font-size:24px;letter-spacing:-.7px}
 .source-stats .stat-icon {width:32px;height:36px}.source-stats .stat-title {font-size:12px}
 .home-page {padding-top:20px}.home-workspace-links {padding:12px;gap:4px 18px;margin-bottom:20px}
 .home-search {padding-left:10px;gap:7px}.home-search input {font-size:16px}.home-search>.icon {width:16px}
 .home-workspace-links .home-search button {padding:8px 12px;min-height:44px}
 .reference-heading {padding:20px 16px;align-items:flex-start;flex-wrap:wrap;gap:14px}.reference-heading h2 {font-size:21px}
 .reference-heading .btn {min-height:40px;font-size:12px}
 .reference-columns>section {padding:21px 14px}.reference-table {font-size:12px}
 .reference-table th,.reference-table td {padding:14px 5px}.reference-table td {font-size:12px}
 .reference-table tbody th small {font-size:10px}.reference-table th:first-child {width:48%}
 .reference-table thead small {font-size:8px}.reference-table thead th {font-size:11px}
 .reference-distribution-heading>span {font-size:9px}.reference-distribution-footer {font-size:12px}
 .home-full-statistics>summary {padding:18px 16px}.home-full-statistics>summary small {display:block;margin:5px 0 0}
 .home-full-content {padding:0 12px 18px}.footer-brand span {display:block;margin:5px 0 0}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 *,*::before,*::after {animation:none!important;transition:none!important}
}