/* Arena Lab — graphite broadcast workspace. Shared shell and data views. */
:root {
  color-scheme: dark;
  --bg: #121414;
  --surface: #1a1d1d;
  --surface-2: #222626;
  --surface-hover: #2b3030;
  --line: #333939;
  --line-soft: #292e2e;
  --muted: #929d9b;
  --text: #eef1ed;
  --cyan: #9de3c6;
  --coral: #efa58f;
  --gold: #e6c68d;
  font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, a, select, summary { cursor: pointer; }
button { color: inherit; border: 0; }
button:disabled { opacity: .42; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
input, select { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #161a19; color: var(--text); outline: none; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button, input, select { touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 21px; line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
small { font-size: 11px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 !important; }
.skip-link { position: fixed; z-index: 2000; top: -60px; left: 16px; padding: 10px 18px; border-radius: 5px; background: var(--cyan); color: #14241e; }
.skip-link:focus { top: 10px; }
/* A single horizontal navigation keeps the match, rather than chrome, in view. */
.sidebar { height: 56px; display: flex; align-items: center; gap: 22px; padding: 0 22px; border-bottom: 1px solid var(--line); background: #191c1c; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; font-size: 16px; font-weight: 650; letter-spacing: -.025em; white-space: nowrap; }
.brand-symbol { color: var(--cyan); font-size: 34px; font-weight: 750; line-height: 1; letter-spacing: -5px; padding-right: 4px; }
.brand-symbol span { color: var(--coral); font-size: 27px; }
#game-nav { flex: 1; min-width: 0; display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
#game-nav::-webkit-scrollbar { display: none; }
.game-nav-item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 40px; margin: 0; padding: 7px 11px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); text-align: left; white-space: nowrap; }
.game-nav-item:hover { background: var(--surface-hover); color: var(--text); }
.game-nav-item.is-active { background: #2b3430; color: #d7f3e3; border-color: #435a4f; }
.nav-icon { display: grid; place-items: center; width: 23px; height: 23px; font-size: 18px; color: #a6b7af; }
.nav-name { font-size: 12px; font-weight: 550; }
.nav-subtitle, .nav-arrow, .nav-state { display: none; }
.game-nav-item.is-training .nav-icon { color: var(--cyan); }
.nav-loading { color: var(--muted); font-size: 12px; padding: 8px; }
.header-status { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--muted); font-size: 11px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #737d78; }
.status-dot.online { background: var(--cyan); }
.sidebar>#admin-open { min-height: 36px; background: transparent; border-color: var(--line); }
.workspace { min-width: 0; }
main { max-width: 1920px; margin: 0 auto; padding: 0 18px 18px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
.hero { display: flex; align-items: center; min-width: 0; gap: 20px; }
.workspace-title { min-width: 0; }
.title-dot, .hero-description, .hero-tags { display: none; }
.hero>#start-open { padding: 5px 9px; min-height: 32px; border-color: transparent; background: transparent; color: var(--muted); font-size: 11px; }
.hero>#start-open:hover { background: var(--surface-hover); color: var(--text); }
.workspace-tabs { display: flex; align-items: center; gap: 4px; }
.workspace-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 65px; padding: 8px 18px; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 550; }
.workspace-tab:hover { background: #252b28; color: var(--text); }
.workspace-tab.is-active, .workspace-tab[aria-selected=true] { background: #e7eee5; color: #202a24; border-color: #e7eee5; }
.workspace-panel { min-width: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; font-weight: 550; white-space: nowrap; background: var(--surface-2); color: #c9d3cc; }
.button:hover { background: var(--surface-hover); border-color: #526057; }
.button-primary { color: #1b3025; background: var(--cyan); border-color: var(--cyan); font-weight: 650; }
.button-primary:hover { background: #bbedd5; }
.button-danger { color: #ffc2b4; background: #442d2a; border-color: #745049; }
.is-disabled { opacity: .35; pointer-events: none; }
.panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 52px; }
.panel-heading>div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.section-heading>div:first-child { display: flex; align-items: center; gap: 8px; }
.section-number, .panel-subtitle, .eyebrow { display: none; }
.count-chip, .run-status { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; background: #232b26; color: #adbbb1; font-size: 11px; font-variant-numeric: tabular-nums; }
.run-status.running { color: var(--cyan); border-color: #426d55; }
.run-status.failed { color: var(--coral); border-color: #754e42; }
.error-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 15px; margin-top: 12px; border: 1px solid #755048; background: #3f2a27; border-radius: 8px; color: #ffd0bd; font-size: 12px; }
.error-banner button { min-width: 40px; height: 40px; background: transparent; font-size: 23px; }
/* Data views are intentionally separate from watching. */
.summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 22px; background: var(--surface); }
.summary-card { padding: 14px 20px; border-right: 1px solid var(--line); }
.summary-card:last-child { border-right: 0; }
.summary-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #b4c0b7; }
.summary-label>span { display: none; }
.summary-card strong { display: block; font-size: 26px; font-weight: 500; line-height: 1.5; margin: 5px 0; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.summary-card small { color: var(--muted); font-size: 11px; }
.training-section, .records-section { margin: 0; }
.run-selector { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.run-selector select { max-width: 350px; font-size: 12px; }
.telemetry-notice { margin-bottom: 14px; padding: 12px 15px; border: 1px solid #3d4b40; border-radius: 7px; background: #202a22; color: #aab9ac; font-size: 12px; }
.chart-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.chart-panel { padding: 16px 18px 12px; }
.chart-heading { display: flex; justify-content: space-between; gap: 10px; }
.chart-heading>div>span { display: none; }
.chart-heading strong { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.chart-panel canvas { display: block; height: 170px; width: 100%; margin: 14px 0 10px; }
.chart-caption { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.chart-caption>span:first-child { display: flex; align-items: center; gap: 5px; }
.legend-line { display: inline-block; width: 12px; height: 2px; }
.legend-line.coral { margin-left: 8px; }
.cyan { background: var(--cyan); }
.coral { background: var(--coral); }
.metric-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.metric-item { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); }
.metric-item:last-child { border-right: 0; }
.metric-item>span { display: block; color: var(--muted); font-size: 11px; }
.metric-item strong { display: block; font-size: 19px; font-weight: 500; margin-top: 5px; font-variant-numeric: tabular-nums; }
.metric-item small { display: block; margin-top: 3px; color: #7e9082; font-size: 10px; }
.advanced-panel { margin-top: 14px; }
.advanced-panel>summary, .record-parameters>summary { display: flex; justify-content: space-between; gap: 10px; padding: 14px 17px; font-size: 12px; color: #bdcbbd; min-height: 44px; }
.advanced-panel>summary span { color: var(--muted); font-size: 11px; }
.advanced-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 8px 18px 18px; }
.advanced-field { margin: 0; border-bottom: 1px solid var(--line); padding-bottom: 9px; min-width: 0; }
.advanced-field dt { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.advanced-field dd { margin: 4px 0 0; color: #d0d9cd; font-size: 12px; overflow-wrap: anywhere; }
.download-actions { display: flex; gap: 7px; }
.record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.config-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0; padding: 0 18px 15px; }
.config-list>div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; border-bottom: 1px solid var(--line-soft); padding: 10px 0; font-size: 12px; }
.config-list dt { color: var(--muted); overflow-wrap: anywhere; }
.config-list dd { max-width: 64%; text-align: right; margin: 0; color: #d2dbd1; overflow-wrap: anywhere; }
.record-parameters { border-top: 1px solid var(--line); margin: 0 18px; }
.record-parameters>summary { padding-left: 0; padding-right: 0; }
.record-parameters .config-list { padding: 0 0 12px; }
.records-export-note { padding: 5px 18px 16px; color: var(--muted); font-size: 11px; }
.records-more { display: block; min-height: 40px; margin: 12px 18px; padding: 8px 12px; border: 1px solid #4b6451; border-radius: 6px; font-size: 12px; color: #b2d8bd; }
.checkpoint-list { max-height: 370px; overflow-y: auto; padding: 0 18px 12px; }
.checkpoint-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.checkpoint-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 6px; background: #2a3e2e; color: var(--cyan); font-size: 18px; }
.checkpoint-row strong { font-size: 12px; font-weight: 500; }
.checkpoint-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.checkpoint-row .button { margin-left: auto; }
.checkpoint-incompatible .checkpoint-icon { background: #38352b; color: #c1ac7d; }
.checkpoint-incompatible small.compatibility-note { color: #c1ac7d; }
.evaluation-panel { margin-top: 14px; }
.evaluation-note, .mono { color: var(--muted); font-size: 11px; }
.table-scroll { overflow: auto; }
.evaluation-panel .table-scroll { max-height: 530px; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; font-size: 12px; }
th, td { padding: 12px 18px; border-top: 1px solid var(--line-soft); }
th { color: #9fac9e; background: #1d2520; font-size: 11px; font-weight: 500; }
td { color: #d1dacf; font-variant-numeric: tabular-nums; }
.empty-small { padding: 18px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.empty-small a { color: var(--cyan); }
footer { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-soft); color: #77847b; font-size: 11px; }
.footer-brand { display: none; }
footer>span:last-child { margin-left: auto; }
body[data-workspace-tab=watch] footer { display: none; }
/* Administrative controls retain the same API and form semantics. */
dialog { width: min(640px,calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow-y: auto; color: var(--text); background: #1b211d; border: 1px solid #526152; border-radius: 14px; box-shadow: 0 20px 90px #0008; }
dialog::backdrop { background: #080d09bb; backdrop-filter: blur(8px); }
dialog form { padding: 26px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dialog-heading h2 { font-size: 23px; }
.dialog-close { width: 40px; height: 40px; border-radius: 7px; background: var(--surface-hover); color: #c8d5c9; font-size: 25px; }
.dialog-intro { margin: 14px 0 22px; color: #a1b3a2; font-size: 12px; line-height: 1.8; }
.form-label { display: block; color: #c7d5c6; font-size: 12px; }
.form-label>span { margin-left: 5px; color: var(--muted); font-size: 11px; }
.form-label input, .form-label select { display: block; width: 100%; margin-top: 7px; font-size: 13px; }
.token-row { display: flex; gap: 9px; margin-top: 8px; }
.token-row input { flex: 1; width: 100%; }
.token-row .button { flex: none; }
.form-help { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.form-label .form-help { display: block; margin: 7px 0 0; font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0; }
.active-training { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px; border: 1px solid #4a6651; border-radius: 7px; background: #29392c; color: #bddbbd; font-size: 12px; }
.active-training span { display: block; margin-top: 5px; color: #9eb79d; font-size: 11px; }
.dialog-error { padding: 12px; margin-top: 15px; color: #ffd0bd; background: #442d29; border: 1px solid #785449; border-radius: 7px; font-size: 12px; }
.dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.dialog-footer>span { color: var(--muted); font-size: 11px; max-width: 300px; }
/* Learning summaries share the typography and surfaces of the rest of the app. */
#kitchen-learning { margin-bottom: 16px; border-color: #405245; background: #1d2921; }
.learning-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; }
.learning-heading h3 { font-size: 17px; }
.learning-heading p { color: #a6b9a8; margin-top: 6px; font-size: 12px; }
.learning-phase { border: 1px solid #587054; border-radius: 6px; background: #34462f; padding: 6px 9px; color: #dae6c9; font-size: 12px; white-space: nowrap; }
.learning-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; gap: 10px; margin: 0 0 18px; padding: 0 18px; }
.learning-stages li { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; border-bottom: 2px solid #3c4b3c; color: #8eaa91; }
.learning-stages li>span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #52674e; border-radius: 50%; font-size: 11px; }
.learning-stages strong { font-size: 12px; font-weight: 500; }
.learning-stages .is-current { color: #dae6c9; border-color: #b5cc92; }
.learning-stages .is-current>span { color: #223923; background: #b5cc92; }
.learning-stages .is-complete { color: #a9d5b0; border-color: #74a279; }
.learning-facts { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-block: 1px solid #3a4e3b; }
.learning-fact { padding: 14px; border-right: 1px solid #3a4e3b; min-width: 0; }
.learning-fact:last-child { border: 0; }
.learning-fact>span { color: #aabcaa; font-size: 11px; }
.learning-fact strong { display: block; margin-top: 6px; font-size: 23px; font-weight: 500; font-variant-numeric: tabular-nums; }
.learning-fact small { display: block; margin-top: 5px; color: #91a692; font-size: 10px; }
.learning-gate { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 18px; }
.learning-gate strong { display: block; font-size: 12px; font-weight: 500; }
.learning-gate>div>span { display: block; margin-top: 5px; color: #a2b6a1; font-size: 11px; }
.gate-state { flex: none; padding: 5px 8px; border: 1px solid #716a4a; border-radius: 5px; background: #3b392a; color: #dfcf95; font-size: 11px; }
.gate-state.is-passed { color: #c1e0b9; background: #334c30; border-color: #618d58; }
.learning-bootstrap { padding: 12px 18px; border-top: 1px solid #3a4e3b; color: #acbea8; font-size: 12px; }
.learning-bootstrap p { margin-top: 10px; color: #9cb198; line-height: 1.8; }
.learning-events-list { display: grid; gap: 9px; margin-top: 12px; }
.learning-event { display: flex; align-items: baseline; gap: 12px; font-size: 12px; }
.learning-event time { color: #91a68d; font-size: 11px; white-space: nowrap; }
.learning-event span { overflow-wrap: anywhere; }
.learning-recovery { margin: 0 18px 15px; padding: 12px; border: 1px solid #7b6a47; border-radius: 7px; background: #3d3526; color: #e0c895; }
.learning-recovery p { margin-top: 6px; color: #c3b38f; font-size: 12px; line-height: 1.8; }
.learning-recovery summary { margin-top: 10px; font-size: 12px; }
.learning-recovery .recovery-technical { font-size: 11px; overflow-wrap: anywhere; }
@media(max-width:1100px) {
  .sidebar { gap: 10px; padding-inline: 15px; }
  .brand { font-size: 14px; }
  .game-nav-item { padding-inline: 8px; }
  .header-status { display: none; }
  .metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .metric-item:nth-child(3) { border-right: 0; }
  .metric-item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .learning-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .learning-fact:nth-child(3) { border-right: 0; }
  .learning-fact:nth-child(-n+3) { border-bottom: 1px solid #3a4e3b; }
}
@media(max-width:700px) {
  input, select, .button { min-height: 44px; }
  .sidebar { height: 50px; gap: 8px; padding: 0 10px; }
  .brand { gap: 5px; font-size: 12px; }
  .brand-symbol { font-size: 29px; }
  .brand-symbol span { font-size: 23px; }
  .brand>span:last-child { display: none; }
  .game-nav-item { min-height: 44px; padding: 6px 9px; gap: 5px; }
  .nav-name { font-size: 12px; }
  .nav-icon { width: 19px; font-size: 16px; }
  .sidebar>#admin-open { width: 44px; min-height: 44px; padding: 0; overflow: hidden; font-size: 0; border-color: transparent; }
  .sidebar>#admin-open:before { content: '⚙'; font-size: 20px; color: #aab6ab; }
  main { padding: 0 8px 12px; }
  .workspace-heading { display: block; min-height: 81px; padding: 7px 0 6px; }
  .hero { justify-content: space-between; gap: 8px; height: 24px; }
  h1 { font-size: 16px; }
  .hero>#start-open { min-height: 24px; padding: 0 6px; font-size: 11px; }
  .workspace-tabs { width: 100%; margin-top: 4px; gap: 3px; }
  .workspace-tab { flex: 1; min-height: 44px; padding: 7px 12px; font-size: 13px; }
  .panel-heading { padding: 12px 14px; min-height: 48px; flex-wrap: wrap; }
  .panel-heading h2 { font-size: 14px; }
  .summary-grid { grid-template-columns: 1fr 1fr; margin-bottom: 17px; }
  .summary-card { padding: 12px 14px; }
  .summary-card:nth-child(2) { border-right: 0; }
  .summary-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .summary-card strong { font-size: 25px; }
  .summary-card small { font-size: 10px; }
  .run-selector { width: 100%; font-size: 11px; gap: 7px; }
  .run-selector select { flex: 1; max-width: none; font-size: 11px; }
  .run-status { font-size: 10px; }
  .chart-grid { grid-template-columns: 1fr; gap: 12px; }
  .chart-panel { padding: 15px; }
  .chart-panel canvas { height: 170px; }
  .chart-caption { font-size: 10px; }
  .metric-item { padding: 12px 10px; }
  .metric-item>span { font-size: 10px; }
  .metric-item strong { font-size: 18px; }
  .metric-item small { font-size: 9px; }
  .advanced-metrics { grid-template-columns: 1fr 1fr; padding-inline: 14px; }
  .record-grid { grid-template-columns: 1fr; gap: 12px; }
  .config-list { grid-template-columns: 1fr; padding-inline: 14px; }
  .config-list>div { font-size: 12px; }
  .download-actions { width: 100%; }
  .download-actions .button { flex: 1; font-size: 11px; padding-inline: 8px; }
  .evaluation-note { font-size: 10px; }
  th, td { padding: 11px 14px; font-size: 11px; }
  th { font-size: 10px; }
  .record-parameters { margin-inline: 14px; }
  .records-export-note { padding-inline: 14px; }
  .checkpoint-list { padding-inline: 14px; }
  .checkpoint-row { gap: 8px; }
  .checkpoint-row strong { font-size: 11px; }
  .checkpoint-row small { font-size: 10px; }
  .checkpoint-row .button { font-size: 11px; padding-inline: 9px; }
  footer { flex-wrap: wrap; gap: 7px; font-size: 10px; }
  footer>span:last-child { margin-left: 0; width: 100%; }
  dialog form { padding: 20px; }
  .dialog-heading h2 { font-size: 20px; }
  .dialog-intro { font-size: 12px; }
  .form-grid { gap: 16px 12px; }
  .dialog-footer>span { max-width: 165px; font-size: 10px; }
  .dialog-footer .button { font-size: 12px; padding-inline: 12px; }
  .active-training { flex-wrap: wrap; }
  .learning-heading, .learning-gate { padding: 15px 14px; }
  .learning-heading h3 { font-size: 15px; }
  .learning-phase { font-size: 11px; padding: 5px 7px; }
  .learning-stages { padding: 0 14px; gap: 7px; }
  .learning-stages strong { font-size: 11px; }
  .learning-stages li { gap: 5px; }
  .learning-fact { padding: 12px 10px; }
  .learning-fact>span { font-size: 10px; }
  .learning-fact strong { font-size: 21px; }
  .learning-fact small { font-size: 9px; }
  .learning-gate { align-items: flex-start; }
  .learning-bootstrap { padding-inline: 14px; }
  .learning-recovery { margin-inline: 14px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}