/* Workspace presentation layer. Load after style.css; no role permissions live here. */
:root {
  color-scheme: dark;
  --bg: #0b0e14;
  --panel: #131820;
  --panel2: #1a2230;
  --line: #293443;
  --text: #edf2fa;
  --muted: #a3b0c3;
  --accent: #426de4;
  --accent2: #a1bfff;
  --pos: #81d6b4;
  --neg: #ffa4aa;
  --neu: #c5cfdf;
  --crit: #ff9ca7;
  --high: #efbd8c;
  --med: #e0ce8e;
  --low: #81d6b4;
  --workspace-radius: 15px;
  --workspace-gap: 16px;
}

html { min-width: 280px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #9cbcff;
  outline-offset: 3px;
}
a { color: var(--accent2); }
::selection { background: #345388; color: #fff; }

/* A full-width content track prevents a wide table from widening the page. */
.layout { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  flex: 0 0 216px;
  width: 216px;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  background: #10151e;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.logo { gap: 10px; padding: 25px 18px 22px; min-height: 88px; }
.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  border: 1px solid #4867ab;
  border-radius: 10px;
  background: linear-gradient(140deg, #3157b7, #233b75);
  font-size: 18px;
  color: #e5edff;
}
.logo b { color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.logo small { font-size: 10px; letter-spacing: .5px; color: var(--muted); }
.sidebar .logo div { min-width: 0; font-size: 14px; }
#nav { padding: 22px 12px; gap: 7px; }
.sidebar .nav-item {
  min-height: 44px;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #aab7cb;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sidebar .nav-item > span:first-child {
  width: 20px;
  min-width: 20px;
  flex: 0 0 20px;
  font-size: 17px;
}
.sidebar .nav-item .nav-label { width: auto; min-width: 0; flex: 1; text-align: left; font-size: 13px; }
.sidebar .nav-item:hover { background: #1b2433; color: #fff; }
.sidebar .nav-item.active {
  background: #1d3053;
  border-color: #344e7e;
  color: #c3d8ff;
  box-shadow: inset 2px 0 #8cb0ff;
}
.sidebar-foot { padding: 18px; gap: 10px; margin-top: auto; }
.sidebar .sidebar-foot div { display: block; min-width: 0; overflow-wrap: anywhere; }
.sidebar-foot b { font-size: 12px; font-weight: 500; }
.sidebar-foot small { font-size: 11px; }
.llm-dot { width: 7px; height: 7px; background: var(--med); }
.llm-dot.on { box-shadow: 0 0 0 4px #81d6b410; }
.badge { min-width: 20px; background: #733343; font-size: 11px; text-align: center; }

.main { flex: 1 1 0%; width: 0; min-width: 0; max-width: none; padding: 28px 30px 48px; }
.topbar { gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; }
.topbar > div, .topbar > h1 { min-width: 0; }
.topbar h1 { font-size: 25px; font-weight: 600; letter-spacing: -.7px; line-height: 1.35; }
.topbar-right, .workspace-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.topbar-right { margin-left: auto; }
.clock { font-size: 12px; white-space: nowrap; }
.workspace-context { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 12px; margin-top: 7px; overflow-wrap: anywhere; }
.workspace-context b, .workspace-context strong { color: #bfd2f3; font-weight: 500; }
.workspace-context .tag { font-size: 11px; }
.workspace-tools .btn { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.workspace-tools .btn.active, .workspace-tools .btn[aria-current="page"] { border-color: #587ab8; background: #203658; color: #d4e3ff; }
.workspace-subnav {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 5px;
  margin: 0 0 22px;
  width: fit-content;
  max-width: 100%;
  background: #111823;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.workspace-subnav button {
  border: 1px solid transparent;
  background: transparent;
  padding: 7px 14px;
  border-radius: 7px;
  min-height: 36px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.workspace-subnav button:hover { background: #1b273a; color: var(--text); }
.workspace-subnav button.active, .workspace-subnav button[aria-current="page"], .workspace-subnav button[aria-selected="true"], .workspace-subnav button[aria-pressed="true"] {
  background: #243b63;
  border-color: #3b5786;
  color: #d6e5ff;
}
.mobile-nav-select { display: none; }
.view { min-width: 0; }
.view.active { animation: workspace-enter .16s ease-out; }
@keyframes workspace-enter { from { opacity: .5; } to { opacity: 1; } }

/* Bento surfaces use size and spacing, with only the lead metric accented. */
.panel, .stat-card, .topic-card, .collector-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--workspace-radius);
  background: var(--panel);
  padding: 20px;
  box-shadow: 0 3px 10px #0000000d;
}
.panel { margin-bottom: var(--workspace-gap); overflow: visible; }
.panel > :last-child { margin-bottom: 0; }
.panel-title { color: #e0e8f5; font-size: 14px; font-weight: 500; line-height: 1.6; margin-bottom: 16px; overflow-wrap: anywhere; }
.panel-title-row { gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.panel-title-row h3 { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.panel-title-row > .btn { margin-left: auto; flex-shrink: 0; }
.panel .panel { background: #101720; box-shadow: none; padding: 16px; }
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--workspace-gap); margin-bottom: var(--workspace-gap); }
.stat-card { min-height: 142px; padding: 20px 22px; }
.stat-grid > .stat-card:first-child {
  background: radial-gradient(ellipse at 100% 0%, #426ce747, transparent 75%), linear-gradient(135deg, #1c3777, #152946);
  border-color: #3d5996;
}
.stat-label { color: #b6c3d6; font-size: 12px; margin-bottom: 14px; }
.stat-value { font-size: 33px; font-weight: 500; line-height: 1.12; letter-spacing: -.8px; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 11px; overflow-wrap: anywhere; }
.stat-card:first-child .stat-label, .stat-card:first-child .stat-sub { color: #c3d3ef; }
.chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--workspace-gap); }
.chart-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart-grid > .panel { margin-bottom: 0; }
.dashboard-primary-grid, .dashboard-event-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--workspace-gap); margin-bottom: var(--workspace-gap); }
.dashboard-primary-grid > .panel, .dashboard-event-grid > .panel { margin-bottom: 0; }
.chart { width: 100%; min-width: 0; height: 270px; overflow: hidden; }
.dashboard-primary-grid .chart { height: 300px; }
#chart-wordcloud { height: 270px; }
.dashboard-event-grid .list-item { padding: 15px 0; }
.dashboard-secondary { margin: 0 0 var(--workspace-gap); border: 1px solid var(--line); border-radius: var(--workspace-radius); background: #10161f; min-width: 0; }
.dashboard-secondary > summary { cursor: pointer; padding: 16px 20px; color: #b9c9e2; font-size: 13px; }
.dashboard-secondary > summary::marker { color: #80a8f4; }
.dashboard-secondary[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.dashboard-secondary > .chart-grid { padding: 0 16px 16px; margin-bottom: 0; }
.dashboard-secondary .chart { height: 270px; min-height: 270px; }
.dashboard-secondary > .panel { margin: 0 16px 16px; }

/* Shared controls and flexible forms. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #35445b;
  border-radius: 8px;
  background: #1d293c;
  color: #d6e2f5;
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  white-space: normal;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { border-color: #6d91d3; background: #253754; }
.btn.primary { background: #345fe3; border-color: #527bec; color: #fff; }
.btn.primary:hover { background: #406beb; border-color: #84a8ff; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: #1b273a; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.input {
  min-width: 0;
  max-width: 100%;
  min-height: 39px;
  padding: 8px 11px;
  border: 1px solid #354359;
  border-radius: 8px;
  background: #0e141f;
  color: #e2eafa;
  font-size: 13px;
  line-height: 1.5;
}
.input::placeholder { color: #92a0b6; opacity: 1; }
.input:focus { border-color: #82a8ff; outline: 2px solid #426de433; outline-offset: 1px; }
select.input { padding-right: 25px; text-overflow: ellipsis; }
textarea.input { width: 100%; min-height: 104px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: #6d98ff; flex-shrink: 0; }
input[type="file"] { width: min(100%, 360px); }
input[type="file"]::file-selector-button { border: 0; border-radius: 4px; padding: 5px 8px; margin-right: 10px; color: #dbe7fa; background: #253a5d; cursor: pointer; }
.filter-bar, .action-row, .import-row { gap: 9px; flex-wrap: wrap; align-items: center; }
.filter-bar { margin-bottom: 18px; }
.filter-bar > .input { flex: 0 1 auto; }
.filter-bar > input:not([type="date"]):not([type="datetime-local"]) { flex-basis: 180px; }
.filter-bar > .hint, .import-row > .hint { overflow-wrap: anywhere; }
.field-row { flex-wrap: wrap; gap: 14px; }
.field-row .field { flex: 1 1 220px; min-width: 0; }
.field { font-size: 13px; color: #b4c1d5; gap: 7px; margin-bottom: 14px; min-width: 0; }
.field .input { width: 100%; }
.checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checkbox-item { color: #c0cce0; background: #182233; border: 1px solid #2b384d; padding: 10px 12px; line-height: 1.6; }
.settings-panel h3 { margin: 28px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); color: #dae6f8; font-size: 15px; font-weight: 500; }
.settings-panel h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-panel .hint { margin: 8px 0 16px; }
.customer-status-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.customer-status-actions .btn { font-size: 12px; min-height: 34px; padding: 6px 10px; }
.customer-status-actions .btn.active, .customer-status-actions .btn[aria-pressed="true"] { color: #dce9ff; background: #284875; border-color: #608ad0; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--workspace-gap); align-items: start; }
.profile-grid > .panel { margin-bottom: 0; }
.profile-grid .list-item { padding: 12px 0; }
#view-customers .filter-bar > .input { flex: 1 1 190px; }

/* Tables scroll inside their own surfaces, never clip the surrounding panel. */
.table-scroll { min-width: 0; max-width: 100%; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 10px; }
.table-scroll:focus-visible { outline: 2px solid #9cbcff; outline-offset: 3px; }
.table { width: 100%; border-collapse: collapse; line-height: 1.6; }
.table-scroll > .table { min-width: 640px; }
.table th { background: #17202d; color: #aebbd0; padding: 12px 14px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.table td { color: #d7e0ee; padding: 14px; font-size: 13px; vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #6b9cff09; }
.table .t-title { min-width: 200px; max-width: 420px; white-space: normal; overflow-wrap: anywhere; }
.table .btn, .table .jump-link { white-space: nowrap; }
.pager { gap: 8px; flex-wrap: wrap; padding-top: 16px; }
.pager > span { margin-right: auto; color: var(--muted); font-size: 12px; }
.pager .btn { min-height: 34px; font-size: 12px; }
.empty { padding: 32px 18px !important; font-size: 13px; line-height: 1.8; color: var(--muted); }
.list-item { padding: 14px 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.list-item .l-title { color: #e1e9f6; font-weight: 500; }
.list-item .l-sub { color: var(--muted); margin-top: 6px; gap: 6px 12px; font-size: 12px; }
.list-item .l-sub > span { min-width: 0; overflow-wrap: anywhere; }
.tag { border-radius: 5px; padding: 3px 8px; font-size: 11px; line-height: 1.5; }
.tag.pos, .tag.risk-low { background: #1b332e; color: #a0dec5; }
.tag.neg, .tag.risk-critical { background: #38242e; color: #ffb0b7; }
.tag.neu, .tag.plain { background: #26303f; color: #c4cfe0; }
.tag.risk-medium { background: #393224; color: #e4d499; }
.tag.risk-high { background: #3b3025; color: #edc79f; }
.tag.src { background: #20324f; color: #afcaff; }
.hint { font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.kw-banner { border-radius: 10px; background: #2d271e; border-color: #655332; color: #ead4ac; }
.topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--workspace-gap); }
.topic-card:hover { transform: none; border-color: #526b97; }
.topic-card p, .collector-card p { color: #aebcd1; font-size: 13px; line-height: 1.75; }
.topic-summary, .post-content { color: #c5d0e1; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; }
.topic-meta, .collector-foot { gap: 8px 12px; flex-wrap: wrap; }
.collector-card h4 { gap: 10px; }
.collector-card h4 > span { min-width: 0; }
.social-search-controls { grid-template-columns: minmax(0, 1fr) 150px 150px auto; }
.social-search-toolbar { flex-wrap: wrap; }
.social-result-row { grid-template-columns: 20px 78px minmax(100px, 1fr) 100px 65px 105px 75px; gap: 9px; background: #192230; }
.social-result-title b { font-weight: 500; }
.social-platform-badge { background: #294575; font-size: 11px; }
.jump-link { color: #b8d0ff; border-radius: 6px; padding: 4px 9px; }

/* Conversation, identity, and overlays share the same type and surface scale. */
.chat-panel { min-height: 440px; height: calc(100vh - 205px); height: calc(100dvh - 205px); max-height: 900px; }
.chat-box { min-height: 0; gap: 18px; padding: 12px 4px 20px; }
.msg { max-width: min(86%, 900px); padding: 14px 18px; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; border: 1px solid transparent; }
.msg.user { background: #234274; border-color: #365788; color: #eaf1ff; }
.msg.assistant { background: #192230; border-color: #2b3a50; color: #d7e2f3; }
.msg a { color: #b9d0ff; }
.chat-suggests { gap: 8px; padding: 12px 0; }
.suggest { padding: 7px 12px; border-radius: 8px; font-size: 12px; line-height: 1.6; color: #bac9e0; background: #162237; }
.chat-input-row { flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.chat-input-row .input { flex: 1 1 180px; }
.login-wrap { min-height: calc(100vh - 100px); min-height: calc(100dvh - 100px); padding: 28px 0; }
.login-card { width: 400px; max-width: 100%; gap: 15px; padding: 32px; border-radius: 18px; box-shadow: 0 20px 80px #00000030; }
.login-card .logo { margin-bottom: 4px; }
.login-card h3 { font-size: 19px; font-weight: 500; }
.login-card .input { min-height: 44px; }
body.login-mode .main { width: 100%; padding: 22px; }
body.login-mode .workspace-subnav, body.login-mode .mobile-nav-select, body.login-mode .workspace-tools, body.login-mode .workspace-context { display: none; }
.modal-mask { padding: 18px; background: #030812c7; backdrop-filter: blur(4px); }
.modal { width: 720px; max-width: 100%; max-height: 88vh; max-height: 88dvh; padding: 25px; border-radius: 16px; box-shadow: 0 24px 90px #0006; }
.modal h3 { font-weight: 500; overflow-wrap: anywhere; }
.meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.meta-grid .m { overflow-wrap: anywhere; }

@media (min-width: 1660px) {
  .main { padding-left: 44px; padding-right: 44px; }
}
@media (max-width: 1240px) {
  .main { padding: 24px 22px 40px; }
  .topbar { gap: 12px; }
  .topbar h1 { font-size: 23px; }
  .clock { display: none; }
  .social-search-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .social-result-row { grid-template-columns: 20px 70px minmax(0, 1fr) 65px 75px; }
  .social-result-author, .social-result-time { display: none; }
}
@media (max-width: 1100px) {
  .sidebar { width: 200px; flex-basis: 200px; }
  .sidebar .logo div { font-size: 14px; }
  .sidebar .nav-item, .sidebar .nav-item:not(.active) { font-size: 13px; }
  .sidebar .nav-item > span:first-child { font-size: 17px; }
  .sidebar .sidebar-foot div { display: block; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-grid, .chart-grid.cols-3, .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-primary-grid, .dashboard-event-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-primary-grid .chart { height: 270px; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .topbar-right { width: 100%; justify-content: flex-start; margin-left: 0; }
  .workspace-tools { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .chart-grid, .chart-grid.cols-3, .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 22px 18px 36px; }
  .panel, .topic-card, .collector-card { padding: 17px; }
  .stat-card { padding: 18px; }
}
@media (max-width: 760px) {
  :root { --workspace-gap: 12px; --workspace-radius: 13px; }
  .layout { display: block; }
  .sidebar { display: none; }
  .main { width: 100%; min-width: 0; padding: 20px 16px 32px; }
  .topbar { margin-bottom: 16px; gap: 12px; }
  .topbar h1 { font-size: 23px; }
  .workspace-context { font-size: 12px; }
  .topbar-right { gap: 8px; }
  .workspace-tools { flex: 1 1 100%; gap: 7px; }
  .workspace-tools .btn { flex: 0 1 auto; min-height: 38px; }
  .mobile-nav-select { display: block; width: 100%; min-width: 0; min-height: 44px; margin-bottom: 14px; }
  .topbar .mobile-nav-select { margin-bottom: 0; }
  .workspace-subnav { width: 100%; margin-bottom: 16px; }
  .workspace-subnav button { flex: 1 1 auto; padding: 7px 10px; }
  .stat-grid { gap: 12px; }
  .stat-card { min-height: 130px; padding: 16px; }
  .stat-value { font-size: 29px; }
  .stat-label { margin-bottom: 12px; }
  .stat-sub { font-size: 11px; margin-top: 10px; }
  .chart-grid, .chart-grid.cols-3, .topic-grid, .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 16px; }
  .panel-title { margin-bottom: 13px; }
  .dashboard-primary-grid .chart { height: 270px; }
  .dashboard-secondary > summary { padding: 14px 16px; }
  .dashboard-secondary > .chart-grid { padding: 0 12px 12px; }
  .filter-bar { gap: 8px; }
  .filter-bar > .input { flex: 1 1 140px; }
  .filter-bar > input:not([type="date"]):not([type="datetime-local"]) { flex-basis: 180px; }
  .filter-bar > .btn { flex: 0 1 auto; }
  .field-row .field { flex-basis: 100%; }
  .checkbox-grid { grid-template-columns: minmax(0, 1fr); }
  .input { font-size: 16px; }
  .btn { min-height: 40px; }
  .social-search-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .social-search-controls > input { grid-column: 1 / -1; }
  .social-result-row { grid-template-columns: 20px 70px minmax(0, 1fr); padding: 12px; }
  .social-result-row > .btn, .social-result-row > .jump-link { grid-column: 2 / -1; justify-self: start; }
  .chat-panel { min-height: 420px; height: calc(100dvh - 245px); max-height: none; }
  .msg { max-width: 94%; padding: 12px 14px; }
  .chat-input-row .input { flex-basis: 100%; }
  .chat-input-row > .btn { flex: 1; }
  .login-card { padding: 26px 22px; }
  .modal-mask { padding: 12px; }
  .modal { padding: 20px 16px; }
  .meta-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .stat-card { padding: 14px 12px; }
  .stat-value { font-size: 27px; }
  .workspace-tools .btn { padding-left: 8px; padding-right: 8px; }
  .social-search-controls { grid-template-columns: minmax(0, 1fr); }
  .pager .btn { padding-left: 8px; padding-right: 8px; }
}
@media (pointer: coarse) {
  .btn, .workspace-tools .btn, .workspace-subnav button, .suggest, .customer-status-actions .btn { min-height: 44px; }
  .dashboard-secondary > summary { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .view.active { animation: none; }
  .btn, .nav-item, .topic-card, .switch, .switch::after { transition: none; }
}

/* Keep auth/role/interaction visibility authoritative after every layout rule. */
.customer-only { display: none; }
body.customer-mode .customer-only { display: block; }
body.customer-mode .customer-status-actions.customer-only { display: flex; }
body.customer-mode .admin-only { display: none !important; }
.hidden, [hidden] { display: none !important; }
/* Inline actions retain the same visual language as card controls. */
.text-action { appearance:none; border:0; padding:0; background:transparent; color:var(--primary, #6b9cff); font:inherit; text-align:left; cursor:pointer; }
.text-action:hover { text-decoration:underline; }
.text-action:focus-visible { outline:2px solid #6b9cff; outline-offset:4px; border-radius:3px; }