:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#192940;background:#f3f7fc;font-size:15px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{border:0;background:#1365bd;color:white;border-radius:9px;padding:11px 17px;font-weight:700;cursor:pointer}button:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{border:1px solid #cddaea;border-radius:8px;padding:11px 12px;background:#fff;color:#14253d;width:100%;outline-color:#287dcc}label{display:block;color:#364b65;font-weight:650;font-size:13px;margin:10px 0}label input,label select,label textarea{display:block;margin-top:7px}h1,h2,h3,p{margin-top:0}h1{font-size:28px;margin-bottom:4px;letter-spacing:-.8px}h2{font-size:21px;margin-bottom:5px}h3{font-size:16px}small{font-size:12px}.muted{color:#74849a;font-weight:450}.sidebar{position:fixed;inset:0 auto 0 0;width:235px;background:#fff;border-right:1px solid #dce5f0;padding:24px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:3px 8px 36px}.brand strong{font-size:20px;color:#125ea9;letter-spacing:1.5px}.brand small{display:block;color:#8d9eaf;font-size:10px;letter-spacing:1px}.logo-mark{height:42px;width:42px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#2b8bd8,#0d4686);color:#fff;font-size:26px;font-weight:800}.nav{display:block;text-align:left;width:100%;background:transparent;color:#587087;font-weight:650;padding:15px;margin:3px 0}.nav:hover,.nav.active{background:#edf5ff;color:#1166b8}.sidebar-foot{margin-top:auto;padding:18px 12px;color:#8a9eb4;font-style:italic;font-size:13px;line-height:1.65}.main{margin-left:235px;min-height:100vh}.top{display:flex;justify-content:space-between;align-items:center;background:white;border-bottom:1px solid #dde6f1;padding:24px 35px}.eyebrow{letter-spacing:1.8px;color:#1268b5;font-size:11px;font-weight:800;margin-bottom:8px}.eyebrow span{color:#238958}.top .muted{margin-bottom:0}.top-actions{display:flex;align-items:center;gap:18px}.ghost{color:#536c86;background:#f0f4fa}.content{padding:30px 35px;max-width:1800px;margin:auto}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:30px}.stat,.panel{background:white;border:1px solid #e0e8f3;border-radius:12px;box-shadow:0 2px 10px #183d6908}.stat{padding:22px 23px;border-top:3px solid #418dd8}.stat.red{border-top-color:#f2656c}.stat.green{border-top-color:#2eac85}.stat small{display:block;letter-spacing:1px;font-weight:800;color:#778ca7}.stat b{display:block;font-size:38px;color:#155ca0;margin:8px 0}.stat.red b{color:#d84e59}.stat.green b{color:#15966c}.stat span{font-size:12px;color:#8191a5}.sectionbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:8px 0 20px}.sectionbar p{margin-bottom:0}.buttons{display:flex;gap:9px}.outline{background:#fff;border:1px solid #c8dbee;color:#145f9f}.panel{overflow:hidden}.toolbar{display:flex;gap:12px;padding:18px;border-bottom:1px solid #e6eef7}.toolbar input{max-width:430px}.toolbar select{width:auto;min-width:165px}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap}th{text-align:left;background:#f5f9fd;color:#778aa1;font-size:11px;letter-spacing:.8px;padding:16px;font-weight:850}td{padding:17px 16px;border-bottom:1px solid #eff3f9;font-size:13px;color:#31435d}tbody tr{cursor:pointer}tbody tr:hover{background:#f4f9ff}td.title-cell{white-space:normal;min-width:250px;font-weight:700;color:#1b3656}td.title-cell small{display:block;color:#8b9bad;font-weight:400;margin-top:4px}.pill{padding:6px 10px;border-radius:20px;font-size:11px;font-weight:800;display:inline-block;background:#e9f2fd;color:#1762ab}.pill.High,.pill.Critical,.pill.Blocked{background:#ffebec;color:#b84253}.pill.Completed{background:#dff5e9;color:#16815d}.pill.Medium,.pill.In.Progress{background:#fff1d8;color:#95600b}.tablefoot{padding:13px 19px;font-size:12px;color:#7b8fa5}footer{text-align:center;color:#a4afbd;font-size:12px;padding:35px 0 15px}.analytics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.chart,.adminpanel{padding:24px}.bars{display:grid;gap:15px;margin-top:20px}.bar-label{display:flex;justify-content:space-between;font-size:13px;color:#536b85;margin-bottom:6px}.bar-bg{background:#ecf2fa;border-radius:8px;height:11px;overflow:hidden}.bar-fg{height:100%;background:#267cc8;border-radius:8px}.chart:nth-child(2) .bar-fg{background:#2fa98c}.chart:nth-child(3) .bar-fg{background:#7f78df}.chart:nth-child(4) .bar-fg{background:#e98c60}.meeting-category{margin:20px 0}.meeting-category h3{padding:12px 0;border-bottom:2px solid #d7e7f8;color:#155eaa}.meeting-card{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid #e1e9f3;border-radius:10px;padding:15px 19px;margin:9px 0;cursor:pointer}.meeting-card:hover{background:#eff6ff}.meeting-card small{color:#8a9aac}.adminpanel label{margin:17px 0}.check{display:flex;gap:10px;align-items:center}.check input{width:auto;margin:0}.adminpanel button{margin:10px 0}#usersList{font-size:13px;color:#4c6784;line-height:2}dialog{border:0;padding:0;border-radius:14px;box-shadow:0 30px 100px #0e2e5070;width:min(760px,94vw);max-height:90vh}dialog::backdrop{background:#0f284e77}.modal-form{padding:25px 30px;overflow-y:auto;max-height:90vh}.modal-title{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid #e3eaf4;padding-bottom:13px}.close{background:#edf3fa;color:#526983;font-size:25px;padding:4px 12px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.wide{grid-column:1/-1}.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;border-top:1px solid #e1eaf3;padding-top:20px}.danger-btn{background:#d54b5a;margin-right:auto}#notesArea{border-top:1px solid #e3eaf4;margin-top:20px;padding-top:18px}.note-item{background:#f4f8fe;padding:12px;border-radius:8px;margin:8px 0;font-size:13px;white-space:pre-wrap}.note-item small{display:block;color:#71869e;margin-bottom:5px}.login{display:grid;place-items:center;min-height:100vh;background:linear-gradient(140deg,#eff6ff,#dbeafa)}.login-card{max-width:420px;width:92%;background:#fff;padding:45px;border:1px solid #dbe5f3;border-radius:16px;box-shadow:0 25px 80px #225d9820}.login-card .logo-mark{margin-bottom:20px}.login-card button{width:100%;margin:12px 0 18px}.login-card small{color:#8999ac}.error{color:#b33c4d}#toast{position:fixed;bottom:25px;right:28px;background:#203d58;color:white;border-radius:10px;padding:13px 20px;display:none;max-width:380px;z-index:30}@media(max-width:1050px){.sidebar{width:74px;padding:20px 8px}.sidebar .brand strong,.sidebar .brand small,.sidebar-foot{display:none}.sidebar .brand{padding:4px 8px 30px}.nav{font-size:0}.nav:first-letter{font-size:20px}.main{margin-left:74px}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.sidebar{position:static;width:auto;height:auto;padding:8px}.sidebar .brand{padding:2px 8px}.sidebar nav{display:flex;overflow:auto}.nav{font-size:12px;width:auto;white-space:nowrap;padding:10px}.main{margin-left:0}.top{padding:20px;align-items:start;gap:10px}.top-actions{flex-direction:column;gap:5px}h1{font-size:21px}.content{padding:18px}.stats{gap:8px}.stat{padding:13px}.stat b{font-size:27px}.analytics{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.sectionbar{flex-wrap:wrap}.formgrid{grid-template-columns:1fr}.modal-form{padding:16px}}
[hidden]{display:none!important}


/* ACTENARA v1.2 — approved Hydrokem boardroom dashboard visual direction */
:root{font-family:Arial,Inter,system-ui,sans-serif;color:#102c55;background:#f5f8fd;font-size:14px}
body{background:linear-gradient(150deg,#f8fbff 0%,#eef4fd 90%)}
.sidebar{width:190px;padding:0 7px;background:#f8fbff;border-color:#e1e9f5;box-shadow:3px 0 18px #18447e08}
.side-brand{height:93px;display:flex;align-items:center;justify-content:center;gap:10px;border-bottom:1px solid #e0e7f2;margin:0 -7px 24px;padding:4px}
.brand-logo{width:136px;max-height:75px;object-fit:contain}
.hamburger{border:0;background:transparent;color:#244f8c;padding:5px;font-size:19px}
.sidebar nav{display:grid;gap:4px}.sidebar .nav{font-size:14px;font-weight:700;color:#203758;text-align:left;padding:13px 12px;border-radius:8px;margin:0;display:flex;align-items:center;gap:12px}
.sidebar .nav.active,.sidebar .nav:hover{background:#dbeafd;color:#0750b0}.nav-icon{font-size:21px;width:24px;text-align:center;color:#3d5987}
.sidebar-foot{font-style:normal;font-weight:800;color:#225aa0}.sidebar-foot span{font-size:11px;color:#8192aa}
.main{margin-left:190px}.top{min-height:92px;padding:14px 25px;background:#fff;gap:20px;box-shadow:0 2px 12px #003e8b08}
.top h1{font-size:27px;color:#104b9e;letter-spacing:-.4px;margin:0 0 6px;white-space:normal}
.top p{font-size:15px;color:#687d9d;margin:0}.top-actions{gap:10px;white-space:nowrap}
.company-chip{padding:11px 12px;background:#f0f5fd;border:1px solid #c4d7f3;border-radius:10px;font-weight:700;color:#284b80}
.notification-icon{font-size:23px;margin:0 7px;position:relative}.notification-icon i{width:7px;height:7px;background:#ef3744;border-radius:50%;position:absolute;right:-3px;top:1px}
.user-avatar{display:grid;place-items:center;background:#0b55b7;color:#fff;border-radius:50%;width:36px;height:36px;font-size:12px;font-weight:800}
#userBadge{font-weight:650;color:#23395d}.text-logout{padding:5px;color:#31558a;background:none;font-size:12px}
.content{padding:16px 17px 20px;max-width:none}.summary-actions{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:15px;flex:1;min-width:0;margin:0}
.stat{border:1px solid #e4ecf8;min-height:105px;box-shadow:0 3px 15px #1c55900a;border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:13px}
.stat.red,.stat.green{border-top:1px solid #e4ecf8}.stat-icon{font-size:26px;display:grid;place-items:center;min-width:62px;height:62px;border-radius:12px}
.stat-blue{color:#0756ae;background:#eaf3ff}.stat-red{color:#de2538;background:#ffedf0}.stat-green{color:#18a046;background:#e8f8ed}
.stat-copy small{font-size:14px;font-weight:750;letter-spacing:0;color:#263858;white-space:nowrap}.stat-copy b{font-size:39px;line-height:1;margin:8px 0 0;color:#0b53b5}
.stat.red b{color:#da2635}.stat.green b{color:#20a44d}.stat-extra{background:#ffebee;border-radius:10px;padding:8px;color:#df2435;font-weight:800;text-align:center;margin-left:auto}.stat.green .stat-extra{background:#e6f8ee;color:#1b9844}.stat-extra small{display:block;font-size:10px;font-weight:550}
.heading-buttons{flex-shrink:0;gap:8px;display:flex}.heading-buttons button{font-size:14px;padding:13px 15px;white-space:nowrap}.outline{color:#084b9e;border-color:#8bb0e8}.primary{background:#0b56b5}
.filters-line{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.filter-controls{display:flex;gap:8px;flex-wrap:wrap}
.filters-line select{background:#f8fbff;border:1px solid #c6d8ed;min-width:112px;width:auto;color:#315078;padding:11px 15px;border-radius:10px;font-size:13px}
.filters-line select:first-child{color:white;background:#075bbd;border-color:#075bbd;font-weight:750}
.filters-line input{max-width:360px;min-width:240px;padding:11px 14px;font-size:13px;border-radius:9px}
.action-table-panel{border:1px solid #ccdcf5;box-shadow:0 5px 20px #1d46840b;border-radius:12px}
.action-table{min-width:1120px}.action-table thead th{background:#eaf2ff;color:#1a3155;font-weight:800;font-size:12px;letter-spacing:0;padding:13px 10px;white-space:nowrap}
.action-table td{padding:9px 10px;font-size:12px;color:#1e3557;border-color:#e4edf9;white-space:nowrap}
.action-table td.title-cell{font-weight:600;min-width:220px;max-width:325px;white-space:normal;color:#1f2c42}.action-table .ref{font-weight:700;color:#253b5e}
.action-table .last-update small{display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;color:#71839e}
.action-table .category-tag{background:#e9f2ff;color:#25569b;border-radius:20px;padding:5px 8px;font-weight:650}
.action-table .pill{font-size:11px;min-width:58px;padding:5px 10px;text-align:center}
.action-table .pill.Open{background:#e3efff;color:#0c58b9}.action-table .pill.In.Progress{background:#dbeaff;color:#0756b4}.action-table .pill.Low{background:#e4faed;color:#14914a}
.action-table .person{display:flex;gap:7px;align-items:center}.action-table .person i{display:grid;place-items:center;width:28px;height:28px;background:#dfe9f9;color:#284e86;border-radius:50%;font-size:11px;font-weight:800;font-style:normal}
.tablebottom{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;gap:8px;font-size:12px}.pagination{display:flex;gap:4px}.pagination button{padding:7px 10px;background:white;color:#124c92;border:1px solid #dce6f5;border-radius:5px;font-size:12px}.pagination button.current{background:#095bbb;color:white}
.dashboard-charts{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.dashboard-charts .chart{padding:13px;min-height:250px;border:1px solid #dce7fa;overflow:hidden}.dashboard-charts .chart h3{color:#0e3981;font-size:14px;margin:2px 0 13px}
.dashboard-charts .chart h3 small{font-size:11px;font-weight:550}.donut-wrap{display:flex;align-items:center;gap:10px;height:175px}.donut{width:138px;height:138px;flex:0 0 138px;border-radius:50%;display:grid;place-items:center}.donut>div{width:77px;height:77px;border-radius:50%;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:23px;font-weight:800;color:#1a3459}.donut small{display:block;font-size:10px;font-weight:550}.legend{min-width:0;flex:1;display:grid;gap:7px}.legend>div{display:flex;align-items:center;gap:5px;font-size:11px}.legend>div span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend>div b{font-size:11px}.legend-dot{height:9px;width:9px;border-radius:2px;flex-shrink:0}
.bars{gap:7px;margin:0}.bar-label{font-size:11px;color:#314668;margin-bottom:3px}.bar-bg{height:12px}.bar-fg{background:linear-gradient(90deg,#96c3fc,#0959bb)}
.age-chart{display:flex;align-items:flex-end;justify-content:space-around;height:178px;border-bottom:1px solid #d4e3f7;padding:0 2px}.age-column{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.age-column b{font-size:12px}.age-track{height:125px;display:flex;align-items:flex-end;width:70%;max-width:60px}.age-track span{width:100%;background:linear-gradient(180deg,#1255ae,#7ab3f8);border-radius:4px 4px 0 0}.age-column small{text-align:center;font-size:10px;min-height:26px}
.info-panel{padding:24px}.overview-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-charts .chart{min-height:260px}
@media(max-width:1450px){.summary-actions{display:block}.heading-buttons{justify-content:flex-end;margin-top:12px}.dashboard-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.top h1{font-size:23px}}
@media(max-width:1020px){.sidebar{width:70px}.brand-logo{display:none}.side-brand{height:75px}.sidebar .nav{font-size:0;justify-content:center}.sidebar .nav-icon{font-size:22px}.sidebar-foot{display:none}.main{margin-left:70px}.top-actions .company-chip,.top-actions .notification-icon{display:none}.stats{grid-template-columns:repeat(3,minmax(145px,1fr))}.stat-icon{min-width:43px;height:43px;font-size:21px}.stat-copy b{font-size:30px}.stat-extra{display:none}}
@media(max-width:700px){.sidebar{position:static;width:100%;padding:0 6px}.side-brand{height:70px;margin:0}.brand-logo{display:block;height:58px}.sidebar nav{display:flex;overflow-x:auto;gap:3px}.sidebar .nav{font-size:12px;white-space:nowrap;padding:9px}.sidebar .nav-icon{font-size:14px}.main{margin:0}.top{padding:15px}.top-actions #userBadge{display:none}.stats{grid-template-columns:1fr;gap:7px}.stat{min-height:72px}.summary-actions{margin-bottom:10px}.filters-line{display:block}.filter-controls{margin-bottom:8px}.filters-line input{max-width:none;width:100%}.dashboard-charts,.overview-charts,.admin-grid{grid-template-columns:1fr}.heading-buttons{justify-content:stretch}.heading-buttons button{flex:1;padding:10px 4px;font-size:12px}}

/* ACTENARA v1.3 account administration and trial labels */
.trial-badge{background:#e7f1ff;color:#1155a3;border-radius:20px;padding:7px 10px;font-size:11px;font-weight:700;white-space:nowrap}.trial-badge.expired{background:#ffedf0;color:#c3253b}.user-list-row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:10px 2px;border-bottom:1px solid #e2eafa;flex-wrap:wrap}.user-list-row button{font-size:11px;padding:7px 9px;margin:2px}.mail-log{max-height:240px;overflow:auto}.mail-row{padding:9px 2px;border-bottom:1px solid #e1eafa;font-size:12px}.mail-row small{display:block;color:#5c7191;padding-top:4px}@media(max-width:900px){.trial-badge{display:none}}


/* ACTENARA master accessibility typography pass — 13 November 2026
   Approved Hydrokem palette/layout retained. Readable UI text minimum: 14px.
   Intentional illustrative icons may use other sizes; no text scales below 14px. */
:root {
  font-family: Arial, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { font-size: 16px; }
button, input, select, textarea { font-family: inherit; font-size: 15px; line-height: 1.4; }
label, small, .muted, .sidebar-foot, .sidebar-foot span, .eyebrow,
.stat span, .stat small, .stat-extra small, .stat-copy small,
.tablefoot, .tablebottom, footer, .trial-badge, #usersList,
.note-item, .note-item small, .mail-row, .mail-row small,
.login-card small, .meeting-card small, .text-logout,
.action-table .last-update small, .action-table .category-tag,
.action-table .pill, .action-table .person i, .pagination button,
.dashboard-charts .chart h3 small, .donut small, .legend>div,
.legend>div b, .bar-label, .age-column b, .age-column small,
.user-list-row button { font-size: 14px; }
.sidebar .nav { font-size: 15px; line-height: 1.4; }
.top p { font-size: 16px; }
.top h1 { font-size: 28px; line-height: 1.22; }
.stat-copy small { font-size: 15px; }
.filters-line select, .filters-line input { font-size: 15px; }
.action-table thead th { font-size: 14px; line-height: 1.4; }
.action-table td { font-size: 14px; line-height: 1.45; padding-top: 11px; padding-bottom: 11px; }
.action-table .last-update small { max-width: 155px; }
.heading-buttons button { font-size: 15px; }
.dashboard-charts .chart h3 { font-size: 16px; line-height: 1.35; }
.dashboard-charts .chart { min-height: 280px; }
.legend { gap: 8px; }
.legend>div { gap: 5px; }
.bars { gap: 9px; }
.bar-label { margin-bottom: 5px; }
.donut-wrap { height: auto; min-height: 190px; }
.donut { width: 116px; height: 116px; flex-basis: 116px; }
.donut>div { width: 69px; height: 69px; }
.age-chart { height: 200px; }
.age-track { height: 135px; }
/* More legible secondary text on light backgrounds. */
.muted, .sidebar-foot span, .tablebottom, .stat span,
.action-table .last-update small, .mail-row small, .note-item small,
.login-card small, .meeting-card small { color: #526781; }
/* Maintain visible keyboard navigation for all screens. */
:focus-visible { outline: 3px solid #1766bd; outline-offset: 2px; }
@media (max-width: 1450px) { .top h1 { font-size: 25px; } }
@media (max-width: 1020px) {
  /* Icon-only sidebar: icons retain size, labels are hidden intentionally. */
  .sidebar .nav { font-size: 0; }
  .sidebar .nav-icon { font-size: 23px; }
}
@media (max-width: 700px) {
  .sidebar .nav { font-size: 14px; }
  .top h1 { font-size: 23px; }
  .heading-buttons button { font-size: 14px; }
  .action-table td { font-size: 14px; }
  .action-table thead th { font-size: 14px; }
}

/* Customer identity must not leak across company workspaces. */
.generic-brand{font-family:Arial,'Segoe UI',sans-serif;font-weight:800;font-size:21px;letter-spacing:.8px;color:#18559f;max-width:100%;overflow-wrap:anywhere}
#customerLogo[hidden],#genericBrand[hidden]{display:none!important}
@media(max-width:1020px){.generic-brand{font-size:14px;text-align:center;letter-spacing:0}}
@media(max-width:700px){.generic-brand{font-size:20px}}
/* Final browser readability refinements: preserve font sizes rather than shrinking text. */
.donut>div{width:86px;height:86px;line-height:1.1;text-align:center;padding:5px}
.donut small{font-size:14px;line-height:1.05;max-width:76px;overflow-wrap:normal}
@media(max-width:700px){
  .top{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .title-area{min-width:0}
  .top h1{font-size:23px;line-height:1.24;overflow-wrap:normal}
  .top-actions{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:9px}
  .top-actions .text-logout{font-size:14px;padding:7px 9px}
  .donut-wrap{justify-content:flex-start;gap:18px}
  .donut{width:136px;height:136px;flex-basis:136px}
  .donut>div{width:88px;height:88px}
}

/* Dedicated action register: accessible, readable and visually aligned with approved dashboard. */
.register-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:16px;margin-bottom:16px}
.register-toolbar label{margin:0;min-width:220px;flex:1;max-width:500px;font-size:15px}
.register-toolbar input,.register-toolbar select{min-height:44px;font-size:15px}
#registerRows tr:focus-visible{outline:3px solid #1766bd;outline-offset:-3px}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:700px){.register-toolbar label{max-width:none;min-width:100%}.register-toolbar{gap:12px}.sectionbar{flex-wrap:wrap}}