/* Talven console base stylesheet.
   Visual design by GPT-6-Astra (design_previews/astra/app.css), reformatted one declaration per line.
   The only changes are the approved legibility pass (lines marked "legibility" raise informational
   text to an 11px floor or darken grey text to 4.5:1) and hover styles wrapped in
   @media(hover:hover), so a tap on a touch screen never leaves a hover highlight behind.
   New components, and the focus and selection states, live in console.css. */

:root {
  --bg:#f8f9fc;
  --surface:#fff;
  --ink:#202634;
  --body:#4c5364;
  --muted:#686f7d; /* legibility: was #848b99 */
  --line:#e6e8ef;
  --soft:#f1f3f8;
  --accent:#b5430b;
  --accent-dark:#93360a;
  --accent-soft:#fdf0e9;
  --green:#25795b;
  --green-soft:#eaf5ef;
  --sidebar:226px;
  --shadow:0 3px 8px #1c244105,0 1px 2px #1c244106;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Until sign-in has decided (js/auth.js, js/main.js), the page shows only the mark: a signed-out visitor goes on to Clerk's pages
   without the console showing first. The mark comes in after a moment, so a quick hand-over shows only the background. */
.signin-hold {
  display:none;
}

.signing-in body > :not(.signin-hold):not(noscript) {
  display:none!important;
}

.signing-in .signin-hold {
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100dvh;
  color:var(--ink);
}

.signin-mark {
  width:48px;
  height:48px;
  animation:signin-mark-in .3s ease-out .6s both;
}

.signin-mark .signin-accent {
  fill:var(--accent);
}

@keyframes signin-mark-in {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

button,input,textarea,select {
  font:inherit;
}

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent;
}

button,a {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:not-allowed;
  opacity:.5;
}

button {
  color:inherit;
}

button,a,input,textarea,select {
  outline-offset:4px;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  border:0;
  background:none;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  font-weight:600;
}

h1 {
  font-size:27px;
  line-height:1.25;
  letter-spacing:-.85px;
}

h2 {
  font-size:19px;
  letter-spacing:-.35px;
}

h3 {
  font-size:15px;
  letter-spacing:-.15px;
}

svg.icon {
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

[data-icon] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.muted {
  color:var(--muted);
}

.mono {
  font-family:"Cascadia Code",Consolas,monospace;
}

.skip {
  position:fixed;
  z-index:100;
  top:-100px;
  left:20px;
  background:white;
  padding:12px;
  border:1px solid var(--line);
}

.skip:focus {
  top:10px;
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  background:#fbfcfe;
  border-right:1px solid var(--line);
  padding:28px 16px 0;
  display:flex;
  flex-direction:column;
  z-index:30;
}

.brand {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 9px;
  line-height:1;
  color:var(--ink);
}

/* the one logo (marketing/public/brand/talven-logo.svg, inline): the mark and the wordmark in the ink, the accent in the theme's */
.brand-logo {
  display:block;
  height:28px;
  width:auto;
  flex:none;
}

.brand-logo .brand-accent {
  fill:var(--accent);
}

.brand-console {
  font-size:8px;
  letter-spacing:1.2px;
  color:var(--muted);
  font-weight:600;
  padding-top:7px;
}

.workspace-button {
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  margin:29px 0 28px;
  padding:10px 8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:white;
  box-shadow:var(--shadow);
}

.workspace-icon {
  border:1px solid #dedfea;
  background:#f0f0f9;
  color:#6d6c90; /* legibility: was #777698 */
  border-radius:5px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:600;
}

.workspace-button strong {
  font-size:11px; /* legibility: was 10.5px */
  font-weight:600;
  display:block;
}

.workspace-button small {
  font-size:11px; /* legibility: was 9px */
  color:var(--muted);
}

.chevron {
  margin-left:auto;
  color:var(--muted);
}

.nav-caption {
  font-size:11px; /* legibility: was 9px */
  letter-spacing:1.2px;
  font-weight:600;
  color:#666f80; /* legibility: was #9198a7 */
  padding:0 12px;
  margin-bottom:10px;
}

nav {
  display:flex;
  flex-direction:column;
  gap:5px;
}

nav a {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:6px;
  color:#676f80; /* legibility: was #697183 */
  font-size:12px;
  font-weight:500;
  position:relative;
}

@media(hover:hover) {
  nav a:hover {
    background:#f0f2f8;
    color:var(--ink);
  }
}

nav a.active {
  background:var(--accent-soft);
  color:var(--accent-dark);
}

nav a.active:before {
  position:absolute;
  left:-16px;
  top:10px;
  bottom:10px;
  width:3px;
  background:var(--accent);
  content:"";
  border-radius:0 2px 2px 0;
}

.nav-count {
  margin-left:auto;
  display:inline-grid;
  place-items:center;
  min-width:19px;
  height:18px;
  font-size:11px; /* legibility: was 10px */
  border-radius:4px;
  background:#e9ecf2;
  color:#676f80; /* legibility: was #858d9d */
}

.active .nav-count {
  background:#f6d7c6;
  color:var(--accent);
}

.nav-dot {
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
  margin-left:auto;
  margin-right:6px;
}

.sidebar-bottom {
  margin-top:auto;
  padding-top:50px;
}

.credits-panel {
  margin:0 4px 20px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px 12px 11px;
  background:white;
}

.credits-label {
  display:flex;
  align-items:center;
  font-size:11px; /* legibility: was 10px */
  color:#666f85; /* legibility: was #677086 */
  gap:6px;
}

.credits-label svg {
  width:13px;
  height:13px;
}

.credits-label .icon-button {
  margin-left:auto;
  width:20px;
  height:20px;
  font-size:11px;
}

.credit-value {
  display:flex;
  align-items:baseline;
  gap:5px;
  margin-top:8px;
}

.credit-value strong {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.8px;
}

.credit-value>span {
  font-size:11px; /* legibility: was 10px */
  color:var(--muted);
}

.credit-meter {
  height:3px;
  background:#ebedf4;
  border-radius:4px;
  margin-top:11px;
}

.credit-meter span {
  display:block;
  height:100%;
  width:70%;
  background:var(--accent);
  border-radius:4px;
}

.credits-panel p {
  font-size:11px; /* legibility: was 9px */
  color:#686f7d; /* legibility: was #949aa6 */
  margin-top:7px;
}

.design-link {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px; /* legibility: was 10px */
  color:#686f81; /* legibility: was #808799 */
  margin:0 9px 20px;
}

.design-link svg {
  width:14px;
  height:14px;
}

.design-link>span:last-child {
  margin-left:auto;
}

.account {
  width:calc(100% + 32px);
  margin:0 -16px;
  padding:17px 24px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  border-top:1px solid var(--line);
}

.avatar {
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ede9e3;
  color:#776d61; /* legibility: was #817669 */
  font-weight:600;
  font-size:11px;
}

.account strong {
  display:block;
  font-size:11px;
}

.account small {
  font-size:11px; /* legibility: was 9px */
  color:var(--muted);
}

.account>span:last-child {
  color:#676f81; /* legibility: was #9299a8 */
  margin-left:auto;
}

.account svg {
  width:15px;
  height:15px;
}

.app-shell {
  margin-left:var(--sidebar);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar {
  height:66px;
  padding:0 32px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  gap:20px;
}

.breadcrumb {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:11px;
  color:#696f7d; /* legibility: was #848a98 */
}

.breadcrumb b {
  font-weight:400;
  color:#c3c7d0;
}

.breadcrumb strong {
  font-weight:500;
  color:#414959;
}

.topbar-actions {
  display:flex;
  align-items:center;
  gap:22px;
}

.search-trigger {
  display:flex;
  align-items:center;
  gap:9px;
  color:#686f80; /* legibility: was #9096a5 */
  font-size:11px;
}

.search-trigger svg {
  width:15px;
  height:15px;
}

.search-trigger kbd {
  font-family:inherit;
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 5px;
  color:#686f7f; /* legibility: was #9a9fac */
  font-size:11px; /* legibility: was 9px */
  margin-left:20px;
}

.model-tag {
  font-size:11px; /* legibility: was 10px */
  border:1px solid var(--line);
  border-radius:5px;
  padding:4px 8px;
  color:#646f89; /* legibility: was #65708a */
  display:flex;
  gap:6px;
  align-items:center;
}

.model-tag i {
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
}

.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:5px;
  color:#666f82; /* legibility: was #868ea0 */
  flex:0 0 auto;
}

@media(hover:hover) {
  .icon-button:hover {
    background:var(--soft);
    color:var(--ink);
  }
}

.icon-button svg {
  width:17px;
  height:17px;
}

.mobile-toggle {
  display:none;
}

.preview-notice {
  min-height:32px;
  padding:6px 32px;
  background:#f1f3fb;
  border-bottom:1px solid #e4e7f4;
  display:flex;
  align-items:center;
  gap:18px;
  color:#666e89; /* legibility: was #8a91a8 */
  font-size:11px; /* legibility: was 9px */
}

.preview-notice>span:first-child {
  color:#626e8f; /* legibility: was #727d9e */
  display:flex;
  align-items:center;
  gap:6px;
}

.preview-notice i {
  width:4px;
  height:4px;
  background:#8794bf;
  border-radius:50%;
}

.preview-notice button {
  margin-left:auto;
  font-size:11px; /* legibility: was 9px */
  color:#626e8f; /* legibility: was #727d9e */
}

.preview-notice button span {
  margin-left:8px;
}

main {
  width:100%;
  max-width:1420px;
  padding:32px 32px 24px;
  margin:0 auto;
  flex:1;
}

main:focus {
  outline:none;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:27px;
}

.page-heading p {
  font-size:13px;
  color:#4c5364;
  margin-top:7px;
}

.summary-stats {
  display:flex;
  gap:30px;
  padding:3px 1px 0;
}

.summary-stat {
  border-left:1px solid var(--line);
  padding-left:24px;
}

.summary-stat strong {
  font-size:22px;
  letter-spacing:-.5px;
  font-weight:550;
  line-height:1.15;
  display:block;
}

.summary-stat span {
  font-size:11px; /* legibility: was 10px */
  color:#686f80; /* legibility: was #8a91a0 */
  display:block;
  margin-top:5px;
}

.request-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  border:1px solid #dfe3ee;
  border-radius:10px;
  background:white;
  box-shadow:var(--shadow);
  margin-bottom:32px;
  overflow:hidden;
}

.composer {
  padding:23px 25px 19px;
}

.composer h2 {
  font-size:18px;
  margin-bottom:14px;
}

.composer textarea {
  width:100%;
  border:1px solid #e2e5ed;
  background:#fafbfe;
  border-radius:7px;
  padding:12px 13px;
  min-height:83px;
  resize:vertical;
  display:block;
  font-size:12px;
  line-height:1.65;
  color:#424b61;
}

.composer textarea::placeholder {
  color:#a0a6b5;
}

.composer-controls {
  display:flex;
  flex-wrap:wrap; /* longer labels (French) must not push the button past the page */
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:12px;
}
.composer-controls>.button {
  margin-left:auto;
}

.input-options {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.select-wrap {
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:5px;
  background:white;
  padding:0 7px;
  color:#666f84; /* legibility: was #818a9e */
}

.select-wrap svg {
  width:13px;
  height:13px;
}

.select-wrap select {
  max-width:128px;
  font-size:11px; /* legibility: was 10px */
  border:0;
  background:none;
  color:#646f86; /* legibility: was #657087 */
  padding:6px 0;
  cursor:pointer;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 13px;
  min-height:35px;
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
  font-size:11px;
  font-weight:550;
  line-height:1.4;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}

@media(hover:hover) {
  .button:hover {
    background:#f5f6fb;
    border-color:#d6dbea;
  }
}

.button svg {
  width:14px;
  height:14px;
}

.button-primary {
  background:var(--accent);
  color:white;
  border-color:var(--accent);
  box-shadow:0 2px 3px #b5430b12;
}

@media(hover:hover) {
  .button-primary:hover {
    background:var(--accent-dark);
    border-color:var(--accent-dark);
  }
}

.button-dark {
  background:#293144;
  border-color:#293144;
  color:white;
}

@media(hover:hover) {
  .button-dark:hover {
    background:#3b455e;
    border-color:#3b455e;
  }
}

.button-small {
  min-height:29px;
  font-size:11px; /* legibility: was 10px */
  padding:6px 10px;
}

.button-block {
  width:100%;
}

.text-button {
  font-size:12px;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:3px 0;
}

.text-button svg {
  width:14px;
  height:14px;
}

.quick-prompts {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:13px;
  font-size:12px;
  color:#55607a;
}

.quick-prompts button {
  font-size:12px;
  color:#4c5364;
  border:1px solid #ebedf4;
  border-radius:4px;
  padding:3px 7px;
}

@media(hover:hover) {
  .quick-prompts button:hover {
    border-color:#e9b89f;
    color:var(--accent);
  }
}

.request-side {
  padding:25px 24px;
  background:#fbfcff;
  border-left:1px solid var(--line);
  position:relative;
  display:flex;
  flex-direction:column;
}

.request-side .badge {
  margin-top:22px;
  align-self:flex-start;
}

.request-side h3 {
  font-size:15px;
  line-height:1.5;
  margin-top:10px;
  letter-spacing:-.3px;
}

.request-side p {
  color:#656f84; /* legibility: was #99a1b1 */
  font-size:11px; /* legibility: was 10px */
  margin-top:5px;
}

.request-side .text-button {
  margin-top:auto;
  padding-top:23px;
  font-size:11px; /* legibility: was 10px */
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  line-height:1.3;
  padding:4px 6px;
  border-radius:4px;
  font-weight:500;
  white-space:nowrap;
  background:var(--soft);
  color:#656e82; /* legibility: was #7a8498 */
}

.badge i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}

.badge-green {
  background:var(--green-soft);
  color:var(--green);
}

.badge-purple {
  background:#f0eefc;
  color:#7563ae; /* legibility: was #8170b5 */
}

.badge-blue {
  background:var(--accent-soft);
  color:var(--accent-dark);
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px;
  gap:20px;
}

.section-heading h2 {
  font-size:18px;
}

.section-heading p {
  font-size:13px;
  color:#4c5364;
  margin-top:4px;
}

.section-heading .text-button {
  font-size:12px;
}

.dataset-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
}

.dataset-card {
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  overflow:hidden;
  transition:box-shadow .18s,transform .18s;
  box-shadow:var(--shadow);
}

@media(hover:hover) {
  .dataset-card:hover {
    box-shadow:0 7px 20px #24376009;
    border-color:#cfd5e5;
    transform:translateY(-2px);
  }
}

.card-visual {
  display:block;
  position:relative;
  width:100%;
  height:172px;
  background:#dfe3e9;
  padding:0;
  overflow:hidden;
  text-align:left;
}

.card-visual img {
  height:100%;
  width:100%;
  object-fit:cover;
  display:block;
}

.card-visual:after {
  content:"";
  position:absolute;
  inset:65% 0 0;
  background:linear-gradient(transparent,#15203b2b);
  pointer-events:none;
}

.visual-label {
  position:absolute;
  left:12px;
  top:12px;
  background:#ffffffdc;
  border:1px solid #ffffff73;
  padding:3px 6px;
  border-radius:4px;
  font-size:11px; /* legibility: was 8px */
  color:#5c636e;
  z-index:2;
  display:flex;
  gap:5px;
  align-items:center;
}

.visual-label svg {
  height:11px;
  width:11px;
}

.visual-duration {
  position:absolute;
  bottom:12px;
  right:12px;
  background:#1823367a;
  padding:2px 5px;
  border-radius:3px;
  color:#fff;
  font-size:11px; /* legibility: was 8px */
  z-index:2;
  font-family:Consolas,monospace;
}

.play-circle {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  width:36px;
  height:36px;
  border:1px solid #ffffff91;
  background:#ffffff27;
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  color:white;
  opacity:0;
  transition:opacity .2s;
  z-index:2;
}

@media(hover:hover) {
  .dataset-card:hover .play-circle {
    opacity:1;
  }
}

.play-circle svg {
  width:14px;
  height:14px;
  fill:currentColor;
  stroke-width:0;
}

.card-body {
  padding:16px 16px 13px;
}

.card-title {
  display:block;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.1px;
  margin-bottom:6px;
  text-align:left;
  padding:0;
}

@media(hover:hover) {
  .card-title:hover {
    color:var(--accent);
  }
}

.card-meta {
  font-size:12px;
  color:#55607a;
  margin-bottom:0;
}

.card-meta b {
  font-weight:400;
  padding:0 6px;
  color:#c7cbd5;
}

.card-footer {
  border-top:1px solid #edf0f5;
  padding-top:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#656f84; /* legibility: was #8b93a6 */
}

.card-footer strong {
  color:#515c76;
  font-weight:600;
}

.card-footer button {
  display:flex;
  align-items:center;
  gap:5px;
}

/* a primary button in a card's footer keeps its own label colour */
.card-footer button:not(.button-primary) {
  color:var(--accent-dark);
  font-size:11px; /* legibility: was 9px */
}

.card-footer button svg {
  width:12px;
  height:12px;
}

.code-visual {
  background:#e9eef9;
  display:flex;
  align-items:center;
  padding:21px;
  position:relative;
  color:#516eab; /* legibility: was #637db5 */
}

.code-paper {
  border:1px solid #d9e1f1;
  background:#f8faff;
  width:100%;
  padding:14px 15px 12px;
  border-radius:5px;
  box-shadow:0 5px 13px #8094b519;
  transform:rotate(-2deg);
  font-family:Consolas,monospace;
  font-size:9px;
  line-height:1.9;
  white-space:nowrap;
}

.code-paper .n {
  display:inline-block;
  color:#b5bfd0;
  width:22px;
}

.code-paper .s {
  color:#7e85bd;
}

.code-paper .v {
  color:#638b8c;
}

.code-paper .line-indent {
  padding-left:11px;
}

.code-paper .code-dots {
  display:flex;
  gap:4px;
  margin-bottom:6px;
}

.code-paper .code-dots i {
  height:4px;
  width:4px;
  background:#ced7e8;
  border-radius:50%;
}

.overview-bottom {
  margin-top:29px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:26px;
}

.mini-section {
  border-top:1px solid var(--line);
  padding-top:18px;
}

.mini-section .section-heading {
  margin-bottom:14px;
}

.mini-section h2 {
  font-size:13px;
}

.recent-delivery {
  display:flex;
  align-items:center;
  gap:12px;
}

.file-icon {
  width:35px;
  height:38px;
  border:1px solid #e1e6f0;
  background:white;
  display:grid;
  place-items:center;
  border-radius:5px;
  color:#5a6f98; /* legibility: was #8999b9 */
  flex:0 0 auto;
}

.recent-delivery strong {
  font-size:13px;
  font-weight:600;
}

.recent-delivery small {
  display:block;
  font-size:12px;
  color:#4c5364;
  margin-top:3px;
}

.recent-delivery .button {
  margin-left:auto;
}

.activity-line {
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.activity-line>span:first-child {
  width:22px;
  height:22px;
  border-radius:50%;
  background:#eef1f9;
  color:#5a6ca3; /* legibility: was #8b98bf */
  display:grid;
  place-items:center;
}

.activity-line svg {
  width:12px;
  height:12px;
}

.activity-line p {
  font-size:11px; /* legibility: was 10px */
  color:#656f83; /* legibility: was #7d879b */
}

.activity-line small {
  font-size:11px; /* legibility: was 9px */
  color:#647084; /* legibility: was #a4acba */
  display:block;
  margin-top:4px;
}

.page-footer {
  padding:14px 32px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px; /* legibility: was 9px */
  color:#666e82; /* legibility: was #a2a8b6 */
  gap:15px;
}

.page-footer>span:first-child {
  display:flex;
  align-items:center;
  gap:6px;
}

.page-footer i {
  background:#9eafa5;
  border-radius:50%;
  width:4px;
  height:4px;
}

.page-footer b {
  font-weight:400;
  margin:0 7px;
}

.toolbar {
  display:flex;
  align-items:center;
  gap:9px;
  margin:20px 0 22px;
}

.search-field {
  position:relative;
  display:flex;
  align-items:center;
  flex:1;
  max-width:320px;
}

.search-field svg {
  position:absolute;
  left:11px;
  width:14px;
  height:14px;
  color:#636f89; /* legibility: was #a0a8ba */
}

.search-field input {
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 12px 9px 33px;
  background:white;
  font-size:11px;
  color:var(--ink);
}

.toolbar select {
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px;
  background:white;
  font-size:11px;
  color:#646f85; /* legibility: was #78839a */
}

.segmented {
  display:flex;
  align-items:center;
  gap:3px;
  background:#eef0f6;
  padding:3px;
  border-radius:6px;
}

.segmented button {
  font-size:11px; /* legibility: was 10px */
  padding:5px 11px;
  border-radius:4px;
  color:#656f83; /* legibility: was #8a93a5 */
}

.segmented button.active {
  background:white;
  box-shadow:0 1px 3px #1221410c;
  color:#4f5b73;
}

.catalog-info {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#4c5364;
  margin-bottom:13px;
}

.empty-state {
  padding:60px 24px;
  text-align:center;
  border:1px dashed #d9dfea;
  border-radius:10px;
  background:#fbfcff;
  grid-column:1/-1;
}

.empty-state>svg {
  margin:0 auto 16px;
  width:29px;
  height:29px;
  color:var(--accent);
}

.empty-state h3 {
  font-size:16px;
  margin-bottom:7px;
}

.empty-state p {
  font-size:13px;
  color:#4c5364;
  max-width:370px;
  margin:0 auto 18px;
}

.back-link {
  color:#4c5364;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:17px;
}

.back-link svg {
  width:13px;
  height:13px;
}

.detail-heading {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:start;
  margin-bottom:22px;
}

.detail-heading h1 {
  font-size:25px;
}

.detail-subtitle {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  color:#4c5364;
  margin-top:9px;
}

.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);
  gap:22px;
}

.media-panel {
  background:white;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
}

.video-stage {
  background:#171c2a;
  aspect-ratio:832/480;
  position:relative;
}

.video-stage video {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.video-stage .code-visual {
  height:100%;
  justify-content:center;
}

.video-stage .code-paper {
  max-width:380px;
  font-size:14px;
  transform:none;
  padding:25px;
}

.asset-titlebar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 15px;
  border-bottom:1px solid var(--line);
}

.asset-titlebar strong {
  font-size:11px;
  font-weight:500;
}

.asset-titlebar span {
  font-size:11px; /* legibility: was 9px */
  color:#656f84; /* legibility: was #9aa2b2 */
}

.thumbnails {
  padding:12px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
}

.thumb {
  position:relative;
  border:2px solid transparent;
  border-radius:4px;
  padding:0;
  overflow:hidden;
  aspect-ratio:1.4;
  background:#e9edf6;
}

.thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.thumb span {
  position:absolute;
  right:3px;
  bottom:2px;
  font-size:7px;
  background:#20293d99;
  color:white;
  padding:0 3px;
  border-radius:2px;
}

.thumb.active {
  border-color:var(--accent);
  box-shadow:0 0 0 2px white inset;
}

.thumb .selected-mark {
  left:3px;
  right:auto;
  top:3px;
  bottom:auto;
  background:var(--accent);
  width:11px;
  height:11px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:3px;
  font-size:8px;
}

.thumb-text {
  font-family:Consolas,monospace;
  font-size:15px;
  color:#8594b4;
}

.purchase-panel {
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  padding:21px;
  align-self:start;
}

.purchase-panel h2 {
  font-size:16px;
  margin-bottom:4px;
}

.purchase-panel>.muted {
  font-size:11px; /* legibility: was 10px */
}

.purchase-modes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:20px 0 17px;
}

.purchase-mode {
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px;
  text-align:left;
  font-size:11px; /* legibility: was 10px */
  color:#646f85; /* legibility: was #78839a */
  position:relative;
}

.purchase-mode.active {
  border-color:var(--accent);
  background:var(--sel-fill);
}

.purchase-mode strong {
  display:block;
  font-size:12px;
  font-weight:500;
  color:#485779;
  margin-top:4px;
}

.purchase-mode.active:after {
  content:"";
  position:absolute;
  right:8px;
  top:8px;
  border:3px solid var(--sel-line);
  background:var(--accent);
  border-radius:50%;
  width:5px;
  height:5px;
}

.selection-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px; /* legibility: was 10px */
  color:#646e83; /* legibility: was #8b94a6 */
  margin-bottom:9px;
}

.selection-label button {
  font-size:11px; /* legibility: was 10px */
  color:var(--accent);
}

.asset-checks {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:20px;
}

.asset-check {
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 5px;
  border:1px solid var(--line);
  border-radius:4px;
  color:#646e84; /* legibility: was #8b94a7 */
  font-size:11px; /* legibility: was 9px */
  cursor:pointer;
}

.asset-check.checked {
  border-color:#e9b89f;
  color:var(--accent-dark);
  background:#f8f9ff;
}

.asset-check input {
  accent-color:var(--accent);
  margin:0;
  width:11px;
  height:11px;
}

.price-line {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:15px;
  font-size:11px; /* legibility: was 10px */
  color:#636f87; /* legibility: was #8e98ac */
  margin-bottom:13px;
}

.price-line strong {
  font-size:20px;
  color:#34415e;
  letter-spacing:-.6px;
}

.price-line strong span {
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  color:#55607a;
}

.purchase-footnote {
  font-size:12px;
  color:#55607a;
  margin:9px 0 16px;
  text-align:center;
}

.rights-list {
  border-top:1px solid var(--line);
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.rights-list p {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12px;
  color:#4c5364;
}

.rights-list svg {
  width:13px;
  height:13px;
  color:#527764; /* legibility: was #77a18c */
}

.detail-info {
  margin-top:22px;
  background:white;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
}

.tabbar {
  display:flex;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:0 19px;
  overflow:auto;
}

.tabbar button {
  padding:14px 0 12px;
  font-size:11px;
  color:#646e84; /* legibility: was #8f98aa */
  white-space:nowrap;
  border-bottom:2px solid transparent;
}

.tabbar button.active {
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.tab-content {
  padding:21px;
}

.field-label {
  font-size:12px;
  font-weight:600;
  color:#55607a;
  margin-bottom:7px;
}

.field-value {
  font-size:13px;
  color:#2f3747;
  line-height:1.65;
}

.caption-block+.caption-block {
  margin-top:19px;
  padding-top:18px;
  border-top:1px solid #f0f2f7;
}

.field-subnote {
  font-size:13px;
  color:#4c5364;
  margin-top:8px;
}

.key-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.key-grid div {
  padding-bottom:10px;
  border-bottom:1px solid #f0f2f7;
}

.key-grid dt {
  font-size:12px;
  color:#55607a;
  margin-bottom:4px;
}

.key-grid dd {
  margin:0;
  font-size:13px;
  color:#2f3747;
}

.asset-identity {
  font-size:12px;
  color:#4c5364;
  margin-top:16px;
  overflow-wrap:anywhere;
}

.notice-box {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px;
  border:1px solid #e4e8f3;
  background:#f7f9ff;
  border-radius:6px;
  color:#3f4d68;
  font-size:13px;
  line-height:1.6;
}

.notice-box svg {
  width:15px;
  height:15px;
  flex:0 0 auto;
  margin-top:2px;
}

.notice-box strong {
  font-weight:600;
  color:#616f89; /* legibility: was #687793 */
}

.feedback-form textarea,.brief-form textarea,.brief-form input,.brief-form select {
  display:block;
  width:100%;
  border:1px solid var(--line);
  padding:10px;
  border-radius:6px;
  font-size:11px;
  color:var(--ink);
  background:#fbfcfe;
  min-height:60px;
  margin:9px 0 12px;
}

.feedback-note {
  padding:12px;
  border:1px solid #e7eaf1;
  border-radius:6px;
  margin:12px 0;
  font-size:11px;
  color:#626f86; /* legibility: was #75829a */
}

.feedback-note small {
  font-size:11px; /* legibility: was 9px */
  display:block;
  color:#616f89; /* legibility: was #a1aabc */
  margin-bottom:4px;
}

.table-wrap {
  border:1px solid var(--line);
  border-radius:9px;
  overflow:auto;
  background:white;
}

table {
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
}

th {
  text-align:left;
  font-size:12px; /* sentence case, no tracking: was 11px caps */
  color:#656f87; /* legibility: was #949caf */
  background:#fafbfe;
  font-weight:600;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
}

td {
  padding:18px;
  border-bottom:1px solid #f0f2f7;
  font-size:11px;
  color:#647084; /* legibility: was #818c9f */
}

tr:last-child td {
  border-bottom:0;
}

td strong {
  font-weight:500;
  color:#4c5b74;
}

td small {
  font-size:11px; /* legibility: was 9px */
  color:#636f86; /* legibility: was #a2aaba */
  display:block;
  margin-top:3px;
}

.table-name {
  display:flex;
  align-items:center;
  gap:12px;
}

.table-name .file-icon {
  width:33px;
  height:35px;
}

.request-row {
  cursor:pointer;
}

@media(hover:hover) {
  .request-row:hover {
    background:#fafbff;
  }
}

.result-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:8px;
  background:white;
  gap:15px;
  margin-bottom:23px;
}

.result-intro .request-quote {
  font-size:13px;
  color:#56627b;
  line-height:1.7;
}

.result-intro>.badge {
  flex:0 0 auto;
}

.result-summary {
  border-left:3px solid var(--accent);
  padding-left:15px;
  margin:0 0 25px;
}

.result-summary h2 {
  font-size:18px;
  margin-bottom:6px;
}

.result-summary p {
  font-size:11px;
  color:#636e85; /* legibility: was #8a94a8 */
  max-width:720px;
  line-height:1.8;
}

.route-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:27px;
}

.route-card {
  border:1px solid var(--line);
  background:white;
  border-radius:8px;
  padding:18px;
  display:flex;
  flex-direction:column;
  position:relative;
}

.route-card.recommended {
  border-color:#e3a07f;
  box-shadow:0 0 0 1px var(--sel-line);
}

.route-icon {
  width:29px;
  height:29px;
  background:var(--soft);
  border-radius:6px;
  display:grid;
  place-items:center;
  color:#5e6f95; /* legibility: was #8d9ab7 */
  margin-bottom:15px;
}

.route-card.recommended .route-icon {
  background:var(--accent-soft);
  color:var(--accent);
}

.route-card>.badge {
  position:absolute;
  top:18px;
  right:13px;
  font-size:11px; /* legibility: was 8px */
}

.route-card h3 {
  font-size:13px;
  margin-bottom:7px;
}

.route-card p {
  font-size:13px;
  line-height:1.6;
  color:#4c5364;
  margin-bottom:17px;
  flex:1;
}

.route-card .button {
  font-size:11px; /* legibility: was 10px */
  min-height:30px;
}

.result-matches {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.match-card {
  padding:14px;
  border:1px solid var(--line);
  background:white;
  border-radius:7px;
  display:flex;
  align-items:center;
  gap:12px;
}

.match-card img {
  width:80px;
  height:54px;
  object-fit:cover;
  border-radius:4px;
}

.match-card .file-icon {
  width:54px;
  height:54px;
}

.match-card h3 {
  font-size:11px;
}

.match-card p {
  font-size:11px; /* legibility: was 9px */
  color:#636f85; /* legibility: was #9aa3b4 */
  margin-top:4px;
}

.match-card .icon-button {
  margin-left:auto;
  color:var(--accent);
}

.export-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:7px;
  padding:13px 16px;
  background:#fff;
  font-size:11px; /* legibility: was 10px */
  color:#626f87; /* legibility: was #8995aa */
}

.export-row svg {
  color:#596f9e; /* legibility: was #8193b8 */
}

.export-row strong {
  font-weight:500;
  color:#5f708a; /* legibility: was #697b97 */
}

.export-row .text-button {
  margin-left:auto;
  font-size:11px; /* legibility: was 10px */
}

.library-banner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
  padding:17px 20px;
  background:#eff2fc;
  border:1px solid var(--sel-line);
  border-radius:8px;
}

.library-banner h3 {
  font-size:12px;
  color:#5b6f93; /* legibility: was #677ba1 */
}

.library-banner p {
  font-size:11px; /* legibility: was 10px */
  color:#5f708f; /* legibility: was #9aa6bc */
  margin-top:4px;
}

.library-banner>svg {
  color:#526dae; /* legibility: was #99a9cf */
  width:27px;
  height:27px;
}

.modal-layer {
  position:fixed;
  inset:0;
  background:#1a244651;
  backdrop-filter:blur(3px);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.modal-layer[hidden] {
  display:none;
}

.modal {
  width:480px;
  max-width:100%;
  max-height:calc(100vh - 48px);
  overflow:auto;
  border:1px solid #dfe4f2;
  border-radius:12px;
  background:white;
  box-shadow:0 25px 100px #18234830;
  padding:25px;
  position:relative;
  animation:modal-in .18s ease;
}

.modal-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:18px;
}

.modal h2 {
  font-size:19px;
}

.modal p {
  font-size:11px;
  color:#646f86; /* legibility: was #8b95a9 */
  line-height:1.8;
}

.modal-header p {
  font-size:11px; /* legibility: was 10px */
  margin-top:6px;
}

.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:24px;
}

.modal .notice-box {
  margin:16px 0;
}

.about-points {
  display:flex;
  flex-direction:column;
  gap:13px;
  margin:20px 0;
}

.about-points li {
  font-size:11px;
  color:#636f86; /* legibility: was #8c96aa */
  line-height:1.8;
}

.modal-search {
  border:1px solid var(--line);
  width:100%;
  padding:12px;
  border-radius:6px;
  margin-bottom:15px;
  color:var(--ink);
}

.search-result {
  width:100%;
  text-align:left;
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:5px;
}

@media(hover:hover) {
  .search-result:hover {
    background:#f4f6fb;
  }
}

.search-result strong {
  font-size:12px;
  font-weight:500;
}

.search-result small {
  display:block;
  font-size:11px; /* legibility: was 10px */
  color:#636f86; /* legibility: was #9ca5b6 */
  margin-top:3px;
}

.search-result>svg {
  color:#55709d; /* legibility: was #9aabc8 */
}

.export-options {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.export-option {
  display:flex;
  align-items:flex-start;
  gap:11px;
  border:1px solid var(--line);
  border-radius:6px;
  padding:12px;
  cursor:pointer;
}

.export-option:has(input:checked) {
  border-color:#e3a07f;
  background:#f9faff;
}

.export-option:has(input:disabled) {
  opacity:.45;
  cursor:not-allowed;
}

.export-option input {
  accent-color:var(--accent);
  margin-top:4px;
}

.export-option strong {
  font-size:11px;
  font-weight:500;
}

.export-option small {
  display:block;
  font-size:11px; /* legibility: was 9px */
  color:#61708b; /* legibility: was #98a3b7 */
  margin-top:3px;
}

.brief-form label {
  display:block;
  font-size:11px; /* legibility: was 10px */
  color:#61708a; /* legibility: was #8592a9 */
  margin-top:14px;
}

.brief-form input,.brief-form select {
  min-height:35px;
  margin-top:6px;
}

.brief-form textarea {
  min-height:85px;
}

.toast {
  position:fixed;
  bottom:24px;
  left:calc(50% + 90px);
  transform:translate(-50%,20px);
  padding:12px 19px;
  border:1px solid #424c61;
  background:#293247;
  color:white;
  border-radius:7px;
  font-size:11px;
  z-index:90;
  box-shadow:0 5px 20px #26345425;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s,transform .18s;
  max-width:calc(100% - 30px);
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0);
}

.loading-spinner {
  width:12px;
  height:12px;
  border:2px solid #ffffff57;
  border-top-color:white;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

.inline-error {
  font-size:11px; /* legibility: was 10px */
  color:#b54b61; /* legibility: was #ba586c */
  margin-top:10px;
}

.fullset-note {
  padding:10px;
  background:#f7f9fe;
  border-radius:5px;
  margin-bottom:20px;
  font-size:11px; /* legibility: was 10px */
  color:#5f6e8e; /* legibility: was #8996b0 */
  line-height:1.7;
}

.run-checks {
  margin:15px 0;
  padding-left:18px;
  color:#61708a; /* legibility: was #8794ab */
  font-size:11px;
  line-height:1.8;
}

.run-checks li {
  padding-bottom:10px;
}

.order-meta {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:15px;
}

.order-meta small {
  display:block;
  font-size:11px; /* legibility: was 9px */
  color:#606f8a; /* legibility: was #a0aabd */
  margin-bottom:5px;
}

.order-meta strong {
  font-size:12px;
  font-weight:500;
  color:#616f8b; /* legibility: was #62708c */
}

@keyframes spin {
  to {
    transform:rotate(360deg);
  }
}

@keyframes modal-in {
  from {
    opacity:0;
    transform:translateY(5px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1600px) {
  main {
    padding-top:40px;
  }
  .card-visual {
    height:208px;
  }
  .request-panel {
    grid-template-columns:minmax(0,1fr) 310px;
  }
  .composer {
    padding:26px 29px;
  }
  .composer textarea {
    min-height:95px;
  }
}

@media(max-width:1180px) {
  :root {
    --sidebar:204px;
  }
  .sidebar {
    padding-left:12px;
    padding-right:12px;
  }
  .brand {
    gap:5px;
    padding-left:7px;
  }
  .brand-logo {
    height:25px;
  }
  .brand-console {
    font-size:7px;
  }
  .workspace-button {
    padding:9px 6px;
    gap:6px;
  }
  .workspace-button strong {
    font-size:11px; /* legibility: was 10px */
  }
  .workspace-button small {
    font-size:11px; /* legibility: was 8px */
  }
  .sidebar nav a.active:before {
    left:-12px;
  }
  .sidebar nav a {
    font-size:11px;
    padding-left:10px;
    gap:10px;
  }
  .account {
    width:calc(100% + 24px);
    margin-left:-12px;
    margin-right:-12px;
    padding-left:19px;
    padding-right:19px;
  }
  .topbar,main,.preview-notice,.page-footer {
    padding-left:24px;
    padding-right:24px;
  }
  .request-panel {
    grid-template-columns:minmax(0,1fr) 218px;
  }
  .composer {
    padding:20px;
  }
  .request-side {
    padding:23px 18px;
  }
  .summary-stats {
    gap:18px;
  }
  .summary-stat {
    padding-left:18px;
  }
  .card-visual {
    height:151px;
  }
  .card-body {
    padding:14px 12px;
  }
  .card-title {
    font-size:12px;
  }
  .card-meta {
    font-size:11px; /* legibility: was 9px */
  }
  .card-footer {
    font-size:11px; /* legibility: was 9px */
  }
  .dataset-grid {
    gap:12px;
  }
  .code-visual {
    padding:15px;
  }
  .code-paper {
    font-size:8px;
    padding:10px;
  }
  .code-paper .n {
    width:16px;
  }
  .detail-grid {
    grid-template-columns:minmax(0,1.55fr) minmax(255px,1fr);
  }
  .topbar-actions {
    gap:14px;
  }
  .request-side h3 {
    font-size:14px;
  }
  .search-trigger kbd {
    margin-left:10px;
  }
  .toolbar {
    flex-wrap:wrap;
  }
  .route-card {
    padding:15px;
  }
  .route-card>.badge {
    position:static;
    align-self:start;
    margin-top:-5px;
    margin-bottom:8px;
  }
  .route-card .route-icon {
    margin-bottom:12px;
  }
  .route-card>.badge+.route-icon {
    margin-bottom:12px;
  }
}

@media(max-width:980px) {
  .request-panel {
    grid-template-columns:1fr;
  }
  .request-side {
    display:none;
  }
  .summary-stat:last-child {
    display:none;
  }
  .card-visual {
    height:136px;
  }
  .card-meta b {
    padding:0 3px;
  }
  .card-footer button {
    font-size:11px; /* legibility: was 8px */
  }
  .overview-bottom {
    grid-template-columns:1fr;
  }
  .mini-section:last-child {
    display:none;
  }
  .topbar-actions .search-trigger>span:not([data-icon]),.search-trigger kbd {
    display:none;
  }
  .request-side {
    display:none;
  }
  .detail-grid {
    grid-template-columns:1fr;
  }
  .purchase-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 25px;
  }
  .purchase-panel h2,.purchase-panel>.muted,.purchase-panel .purchase-modes,.purchase-panel .rights-list,.purchase-panel .selection-label,.purchase-panel .asset-checks,.purchase-panel .fullset-note {
    grid-column:1;
  }
  .purchase-panel .price-line {
    grid-column:2;
    grid-row:1/3;
    border:0;
    padding-top:0;
    align-items:center;
    margin-bottom:0;
  }
  .purchase-panel>#purchase-button {
    grid-column:2;
    grid-row:3;
  }
  .purchase-panel .purchase-footnote {
    grid-column:2;
    grid-row:4;
  }
  .purchase-panel .rights-list {
    grid-column:2;
    grid-row:5/7;
  }
  .purchase-modes {
    margin-top:16px;
  }
  .route-grid {
    grid-template-columns:1fr;
    gap:10px;
  }
  .route-card {
    display:grid;
    grid-template-columns:35px 1fr auto;
    gap:2px 12px;
    align-items:center;
  }
  .route-card .route-icon {
    grid-row:1/4;
    margin:0;
  }
  .route-card h3 {
    grid-column:2;
    grid-row:1;
  }
  .route-card p {
    grid-column:2;
    grid-row:2;
    margin:0;
    max-width:500px;
  }
  .route-card .button {
    grid-column:3;
    grid-row:1/4;
  }
  .route-card>.badge {
    grid-column:2;
    grid-row:3;
    margin:3px 0 0;
    justify-self:start;
  }
  .result-matches {
    grid-template-columns:1fr;
  }
  .model-tag {
    font-size:11px; /* legibility: was 9px */
  }
  .preview-notice {
    gap:12px;
  }
  .preview-notice>span:nth-child(2) {
    font-size:11px; /* legibility: was 8px */
  }
}

@media(max-width:760px) {
  :root {
    --sidebar:0px;
  }
  .sidebar {
    transform:translateX(-100%);
    width:226px;
    transition:transform .2s;
    box-shadow:8px 0 30px #26365017;
  }
  .sidebar.open {
    transform:translateX(0);
  }
  .mobile-toggle {
    display:inline-flex;
    margin-left:-7px;
  }
  .topbar {
    height:58px;
    padding:0 18px;
  }
  .breadcrumb {
    gap:11px;
    font-size:11px; /* legibility: was 10px */
  }
  .topbar-actions {
    gap:9px;
  }
  .topbar-actions>.icon-button {
    display:none;
  }
  .search-trigger {
    padding:0;
  }
  .model-tag {
    font-size:11px; /* legibility: was 8px */
    padding:4px 6px;
  }
  .preview-notice {
    padding:6px 18px;
    gap:9px;
    font-size:11px; /* legibility: was 8px */
  }
  .preview-notice>span:nth-child(2) {
    display:none;
  }
  .preview-notice button {
    font-size:11px; /* legibility: was 8px */
  }
  main {
    padding:25px 18px 20px;
  }
  .page-heading {
    margin-bottom:22px;
  }
  h1 {
    font-size:24px;
  }
  .page-heading p {
    font-size:11px; /* legibility: was 10px */
  }
  .summary-stats {
    gap:15px;
  }
  .summary-stat {
    padding-left:15px;
  }
  .summary-stat strong {
    font-size:20px;
  }
  .summary-stat span {
    font-size:11px; /* legibility: was 9px */
  }
  .summary-stat:nth-child(2) {
    display:none;
  }
  .composer {
    padding:19px;
  }
  .composer h2 {
    font-size:16px;
  }
  .composer textarea {
    min-height:90px;
    font-size:11px;
  }
  .composer-controls {
    gap:8px;
    flex-wrap:wrap;
  }
  .select-wrap select {
    font-size:11px; /* legibility: was 9px */
    max-width:95px;
  }
  .composer-controls>.button {
    font-size:11px; /* legibility: was 10px */
    padding:8px 11px;
  }
  .input-options {
    gap:5px;
  }
  .request-panel {
    margin-bottom:25px;
  }
  .quick-prompts {
    font-size:11px; /* legibility: was 8px */
    gap:5px;
  }
  .quick-prompts button {
    font-size:11px; /* legibility: was 8px */
  }
  .dataset-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .card-visual {
    height:145px;
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1.5fr;
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) .card-visual {
    height:100%;
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) .card-body {
    padding:15px;
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) .code-visual {
    padding:14px;
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) .code-paper {
    font-size:7px;
  }
  .card-meta {
    font-size:11px; /* legibility: was 8px */
  }
  .card-footer {
    font-size:11px; /* legibility: was 9px */
    gap:4px;
  }
  .card-footer button {
    font-size:11px; /* legibility: was 8px */
  }
  .card-footer button svg {
    display:none;
  }
  .section-heading h2 {
    font-size:15px;
  }
  .section-heading p {
    font-size:11px; /* legibility: was 9px */
  }
  .section-heading .text-button {
    font-size:11px; /* legibility: was 9px */
  }
  .code-paper {
    font-size:8px;
  }
  .card-title {
    font-size:11px;
  }
  .overview-bottom {
    margin-top:23px;
  }
  .page-footer {
    padding:14px 18px;
    font-size:11px; /* legibility: was 8px */
  }
  .page-footer>span:last-child {
    display:none;
  }
  .toast {
    left:50%;
    font-size:11px; /* legibility: was 10px */
  }
  .detail-heading h1 {
    font-size:22px;
  }
  .detail-subtitle {
    flex-wrap:wrap;
    font-size:11px; /* legibility: was 9px */
    gap:6px;
  }
  .detail-heading>.badge {
    display:none;
  }
  .purchase-panel {
    display:block;
    padding:18px;
  }
  .purchase-panel .price-line {
    border-top:1px solid var(--line);
    padding-top:14px;
    margin-bottom:13px;
  }
  .purchase-panel .rights-list {
    margin-top:5px;
  }
  .detail-heading {
    margin-bottom:18px;
  }
  .detail-grid {
    gap:16px;
  }
  .tabbar {
    gap:18px;
    padding-left:16px;
  }
  .tabbar button {
    font-size:11px; /* legibility: was 10px */
  }
  .tab-content {
    padding:17px;
  }
  .key-grid {
    gap:12px;
  }
  .key-grid dd {
    font-size:11px; /* legibility: was 10px */
  }
  .toolbar {
    gap:7px;
    margin-top:14px;
  }
  .toolbar .search-field {
    max-width:none;
    flex-basis:100%;
  }
  .toolbar select {
    font-size:11px; /* legibility: was 10px */
    padding:8px;
  }
  .segmented {
    margin-right:auto;
  }
  .segmented button {
    padding:4px 8px;
    font-size:11px; /* legibility: was 9px */
  }
  .catalog-info {
    font-size:11px; /* legibility: was 9px */
  }
  .result-intro {
    padding:15px;
  }
  .result-intro .request-quote {
    font-size:11px;
  }
  .result-intro>.badge {
    display:none;
  }
  .result-summary h2 {
    font-size:16px;
  }
  .result-summary p {
    font-size:11px; /* legibility: was 10px */
  }
  .route-card {
    grid-template-columns:29px 1fr;
    gap:4px 12px;
  }
  .route-card .button {
    grid-column:2;
    grid-row:4;
    justify-self:start;
    margin-top:7px;
  }
  .route-card .route-icon {
    grid-row:1/3;
  }
  .route-card h3 {
    font-size:12px;
  }
  .route-card p {
    font-size:11px; /* legibility: was 10px */
  }
  .export-row {
    flex-wrap:wrap;
    font-size:11px; /* legibility: was 9px */
  }
  .export-row .text-button {
    margin-left:27px;
  }
  .library-banner {
    padding:14px;
  }
  .library-banner h3 {
    font-size:11px;
  }
  .library-banner p {
    font-size:11px; /* legibility: was 9px */
  }
  .page-heading .button {
    font-size:11px; /* legibility: was 9px */
    padding:7px 9px;
    min-height:30px;
  }
  .table-wrap th,.table-wrap td {
    padding-left:14px;
    padding-right:14px;
  }
  .modal-layer {
    padding:15px;
  }
  .modal {
    padding:20px;
    max-height:calc(100vh - 30px);
  }
  .modal h2 {
    font-size:17px;
  }
  .section-heading {
    gap:10px;
  }
  .asset-titlebar {
    padding:10px 12px;
  }
  .asset-titlebar strong {
    font-size:11px; /* legibility: was 10px */
  }
  .asset-titlebar span {
    font-size:11px; /* legibility: was 8px */
  }
  .thumbnails {
    gap:5px;
    padding:10px;
  }
  .video-stage .code-paper {
    font-size:10px;
    max-width:280px;
  }
  .back-link {
    margin-bottom:14px;
  }
}

@media(max-width:420px) {
  .dataset-grid {
    grid-template-columns:1fr;
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) {
    display:block;
    grid-column:auto;
  }
  .card-visual {
    height:178px;
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) .card-visual {
    height:155px;
  }
  .card-title {
    font-size:13px;
  }
  .card-meta {
    font-size:11px; /* legibility: was 10px */
  }
  .card-footer {
    font-size:11px; /* legibility: was 10px */
  }
  .card-footer button {
    font-size:11px; /* legibility: was 10px */
  }
  .dataset-grid>.dataset-card:last-child:nth-child(odd) .code-paper {
    font-size:10px;
  }
  .code-paper {
    font-size:10px;
  }
  .code-visual {
    padding:22px;
  }
  .composer-controls {
    display:block;
  }
  .composer-controls>.button {
    margin-top:11px;
    width:100%;
  }
  .select-wrap {
    flex:1;
  }
  .input-options {
    display:flex;
  }
  .select-wrap select {
    max-width:100%;
    width:100%;
  }
  .quick-prompts>span {
    display:none;
  }
  .summary-stats {
    display:none;
  }
  .page-heading {
    align-items:flex-start;
  }
  .brand-console {
    font-size:8px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important;
  }
  .dataset-card:hover {
    transform:none;
  }
}

/* Keep authored text previews legible without the video overlay. */
button.card-visual:has(.code-visual):after,.code-visual.card-visual:after {
  display:none;
}