:root{--ui-text-scale:1}
html{font-size:calc(16px * var(--ui-text-scale))}
.appearance-control{min-width:110px;max-width:100%;padding:10px 28px 10px 12px;border:1px solid var(--line,#cad9e1);border-radius:6px;background:var(--white,#fff);color:var(--ink,#17252e);font:inherit}
.setting-row{gap:16px;flex-wrap:wrap;padding:12px 0}.setting-row>span{min-width:0;flex:1 1 180px}
.appearance-reset{margin-top:18px}
.profile-dialog{font-size:calc(16px * var(--ui-text-scale))}
.profile-dialog :is(input:not([type=checkbox]),textarea,select){font-size:calc(16px * var(--ui-text-scale))}
.profile-dialog button{font-size:calc(15px * var(--ui-text-scale))}
html[data-ui-scale]:not([data-ui-scale="100"]) :is(.view-heading,.welcome-row,.toolbar,.panel-title,.journal-periods,.calendar-header){flex-wrap:wrap}
html[data-ui-scale]:not([data-ui-scale="100"]) :is(.table-row,.table-head){height:auto;padding-top:12px;padding-bottom:12px;overflow-wrap:anywhere}
html[data-ui-scale]:not([data-ui-scale="100"]) :is(.account-layout,.account-section,.profile-detail-buttons,.workspace-panel,.appointment-details){min-width:0}
html[data-ui-scale]:not([data-ui-scale="100"]) :is(.primary-command,.secondary-command,.appointment-action,.journal-tabs button,.inspection-view-tabs button){height:auto;min-height:44px;white-space:normal;overflow-wrap:anywhere}
html[data-ui-scale]:not([data-ui-scale="100"]) :is(.account-button strong,.account-menu strong){white-space:normal;overflow-wrap:anywhere;max-height:none}
html[data-ui-scale]:not([data-ui-scale="100"]) :is(input,select,textarea){max-width:100%;min-width:0}
html[data-ui-scale]:not([data-ui-scale="100"]) :is(.search-control,.toolbar select){height:auto;min-height:44px;padding-top:8px;padding-bottom:8px}
html[data-ui-theme=dark]{color-scheme:dark;--ink:#edf1f2;--muted:#b3c0c3;--line:#465155;--soft:#171c1e;--white:#242b2e;--green:#27c9a0;--green-dark:#69dfbd;background:#171c1e}
html[data-ui-theme=dark] body{background:#171c1e;color:#edf1f2}
html[data-ui-theme=dark] :is(.cabinet-main,.organization-main,.cabinet-content){background:#171c1e;color:#edf1f2}
html[data-ui-theme=dark] :is(.workspace-panel,.account-section,.cabinet-topbar,.organization-topbar,.organization-panel,.account-menu,.profile-dialog,.journal-editor,.program-dialog,.reference-atlas-shell,.mobile-bottom-nav,dialog,.bg-white){background:#242b2e;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] :is(.table-head,.table-row,.calendar-day,.profile-detail-buttons button,.search-control,.program-option,.reference-group,.reference-part,.reference-node,.bg-slate-50,.bg-gray-50){background:#20272a;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] :is(input,select,textarea,.field-input,.appearance-control){background:#1b2225;color:#edf1f2;border-color:#59676d}
html[data-ui-theme=dark] :is(input,textarea)::placeholder{color:#a7b6bc;opacity:1}
html[data-ui-theme=dark] :is(.icon-button,.secondary-command,.account-button,.profile-dialog button,.journal-tabs button,.organization-icon-button,.organization-tabs button,.calendar-header button){background:#293438;color:#edf1f2;border-color:#59676d}
html[data-ui-theme=dark] :is(h1,h2,h3,h4,.field-label,.setting-row strong,.profile-dialog h2,.text-slate-900,.text-slate-800,.text-gray-900){color:#edf1f2}
html[data-ui-theme=dark] :is(.view-heading p,.welcome-row p,.panel-title p,.field-hint,.profile-detail-buttons span,.text-slate-500,.text-slate-600,.text-gray-500,.text-gray-600,.cabinet-eyebrow){color:#b3c0c3}
html[data-ui-theme=dark] :is(.profile-dialog button[type=submit],.primary-command,.btn-primary){background:#087f68;color:white;border-color:#24b995}
html[data-ui-theme=dark] :is(.is-active,.is-selected).journal-tab{background:#154d40;color:#b3f7df}
html[data-ui-theme=dark] :is(canvas,#profileSignaturePreview){background:white;color:#173f8a;color-scheme:light}
html[data-ui-theme=dark] .profile-dialog :is(#profileSignatureHelp,.profile-check){color:#edf1f2}
html[data-ui-theme=dark] :is(.journal-summary article,.organization-metrics article,.organization-billing article){background:#242b2e;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] .organization-tabs button.is-active{background:#154d40;color:#a5f3d6;border-color:#27c9a0}
html[data-ui-theme=dark] :is(.inspection-view-tabs,.journal-periods select){background:#242b2e;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] :is(.panel-kicker,.verified-line,.template-copy span){color:#71dbbb}
html[data-ui-theme=dark] :is(.template-add,.inspection-examples){background:#303b3e;color:#c8d5d9;border-color:#59676d}
html[data-ui-theme=dark] .setting-row{border-color:#465155}
html[data-ui-theme=dark] :is(.inspect-bottom-nav,.signature-fullscreen-header,.signature-fullscreen-footer){background:#242b2e;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] :is(.signature-fullscreen-title,.signature-fullscreen-subtitle){color:#edf1f2}
html[data-ui-theme=dark] :is(.bg-slate-100,.damage-row){background:#20272a;color:#edf1f2}
html[data-ui-theme=dark] body>header{background:#242b2e;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] :is(.btn-secondary,.journal-export){background:#293438;color:#edf1f2;border-color:#59676d}
html[data-ui-theme=dark] :is(.reference-zone,.reference-section,.reference-zone-summary,.reference-viewer-shell,.reference-index,.reference-item,.reference-detail,.reference-atlas-header,.reference-atlas-index,.reference-atlas-detail,.reference-atlas-row,.reference-atlas-viewbar,.reference-atlas-toolbar){background:#242b2e;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] :is(.reference-zone-group>strong,.reference-zone-summary span,.reference-detail ul,.reference-detail h4){color:#b3c0c3}
html[data-ui-theme=dark] :is(.reference-zone.is-active,.reference-item.is-active,.reference-atlas-row.is-active){background:#154d40;color:#a5f3d6;border-color:#27c9a0}
html[data-ui-theme=dark] :is(.template-row,.inspection-row,.table-row,.reference-item):hover{background:#2c393b}
html[data-ui-theme=dark] :is(.appointment-time.is-soon){background:#493a0b;color:#ffe082}
html[data-ui-theme=dark] :is(.appointment-time.is-overdue){background:#482323;color:#ffaaaa}
@media(max-width:900px){html[data-ui-scale]:not([data-ui-scale="100"]) .account-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
 html[data-ui-scale]:not([data-ui-scale="100"]) .cabinet-content{padding-left:16px;padding-right:16px}
 html[data-ui-scale]:not([data-ui-scale="100"]) .setting-row{align-items:flex-start}.appearance-control{min-height:44px}
 html[data-ui-scale]:not([data-ui-scale="100"]) .cabinet-topbar{height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}
 html[data-ui-scale]:not([data-ui-scale="100"]) .calendar-header h3{min-width:0;font-size:calc(17px * var(--ui-text-scale))}
 html[data-ui-scale]:not([data-ui-scale="100"]) .mobile-bottom-nav{height:auto;min-height:64px;grid-template-rows:calc(61px * var(--ui-text-scale,1));padding-bottom:env(safe-area-inset-bottom)}
 html[data-ui-scale]:not([data-ui-scale="100"]) .mobile-bottom-nav button{min-width:0;padding-left:2px;padding-right:2px}
 html[data-ui-scale]:not([data-ui-scale="100"]) .mobile-bottom-nav button:not(.mobile-create)>svg{width:calc(19px * var(--ui-text-scale,1));height:calc(19px * var(--ui-text-scale,1));flex-shrink:0}
 html[data-ui-scale]:not([data-ui-scale="100"]) .mobile-bottom-nav .mobile-create svg{width:calc(36px * var(--ui-text-scale,1));height:calc(36px * var(--ui-text-scale,1));max-width:calc(100% - 24px);flex-shrink:0}
 html[data-ui-scale]:not([data-ui-scale="100"]) .mobile-bottom-nav .mobile-create{justify-content:flex-end;padding-bottom:4px}
 html[data-ui-scale]:not([data-ui-scale="100"]) .mobile-bottom-nav button span{font-size:calc(11px * var(--ui-text-scale,1));line-height:1.25;overflow-wrap:anywhere}
 html[data-ui-scale]:not([data-ui-scale="100"]) .account-list-row{grid-template-columns:38px minmax(0,1fr)}
 html[data-ui-scale]:not([data-ui-scale="100"]) .account-list-row #profileSupport{grid-column:1/-1;width:100%;min-width:0}
}
@media print{html{--ui-text-scale:1!important;color-scheme:light!important}body{background:white!important;color:black!important}}

/* Theme-aware feedback without changing geometry or moving controls. */
:root{--interaction-fill:#d9f0e8;--interaction-edge:#48a88e;--interaction-ring:rgba(8,167,127,.18)}
html[data-ui-theme=dark]{--interaction-fill:#304842;--interaction-edge:#60cdb0;--interaction-ring:rgba(70,206,167,.18)}
.account-section:has(>#profileContactSupport){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px}
.account-section:has(>#profileContactSupport)>:is(h3,.security-note,p,#profileNewsWithdraw){grid-column:1/-1}
.account-section:has(>#profileContactSupport)>:is([data-logout],#profileContactSupport){width:100%;height:auto;min-height:46px;margin:0;padding:10px 12px;align-self:stretch;line-height:1.35;white-space:normal}
html[data-ui-theme] .search-control input{background:transparent;box-shadow:none}
html[data-ui-theme=dark] .calendar-day.has-events{background:#203c34;border-color:#448c76}
html[data-ui-theme=dark] .calendar-day.is-outside{background:#1c2225;color:#849298}
html[data-ui-theme=dark] :is(.calendar-day span,.month-chart-value){color:#80dfbc}
html[data-ui-theme=dark] .calendar-day .calendar-booking-count{color:#f0c66b}
html[data-ui-theme=dark] .journal-table-head{background:#20272a;color:#b3c0c3}
html[data-ui-theme=dark] :is(.inspection-view-tabs button.is-active,.reference-section.is-active){background:#154d40;color:#a5f3d6;border-color:#27c9a0}
html[data-ui-theme] :is(.secondary-command,.primary-command,.icon-button,.table-action,.appearance-control,.reference-zone,.reference-section,.calendar-day,.inspection-view-tabs button,.journal-tabs button,.avatar-upload,.profile-detail-buttons button,.reference-atlas-row,.reference-view-tab,.reference-atlas-viewbar button){transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,color 160ms ease}
html[data-ui-theme] :is(.journal-table-row,.table-row,.inspection-row){transition:background-color 160ms ease,box-shadow 160ms ease}
html[data-ui-theme] :is(.secondary-command,.primary-command,.icon-button,.table-action,.appearance-control,.reference-zone,.reference-section,.calendar-day,.inspection-view-tabs button,.journal-tabs button,.avatar-upload,.profile-detail-buttons button):focus-visible{outline:2px solid var(--interaction-edge);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
 html[data-ui-theme] :is(.secondary-command,.icon-button,.table-action,.appearance-control,.reference-zone,.reference-section,.calendar-day,.inspection-view-tabs button,.journal-tabs button,.avatar-upload,.profile-detail-buttons button,.reference-atlas-row,.reference-view-tab,.reference-atlas-viewbar button):not(:disabled):not([aria-disabled=true]):hover{background:var(--interaction-fill);border-color:var(--interaction-edge);box-shadow:inset 0 0 0 1px var(--interaction-edge)}
 html[data-ui-theme] .primary-command:not(:disabled):hover{box-shadow:0 0 0 3px var(--interaction-ring);filter:brightness(1.06)}
 html[data-ui-theme] :is(.journal-table-row,.table-row,.inspection-row):hover{background:var(--interaction-fill)}
 html[data-ui-theme] :is(.journal-table-row,.table-row):focus-within{background:var(--interaction-fill)}
}
@media(max-width:520px){.account-section:has(>#profileContactSupport){grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
 html[data-ui-theme] :is(.secondary-command,.primary-command,.icon-button,.table-action,.appearance-control,.reference-zone,.reference-section,.calendar-day,.inspection-view-tabs button,.journal-tabs button,.avatar-upload,.profile-detail-buttons button,.reference-atlas-row,.reference-view-tab,.reference-atlas-viewbar button,.journal-table-row,.table-row,.inspection-row){transition:none}
}

html[data-ui-theme=dark] :is(.inspection-mode-switch,.selection-modal){background:#242b2e;color:#edf1f2;border-color:#465155}
html[data-ui-theme=dark] .inspection-mode-switch button{color:#becbcd}
html[data-ui-theme=dark] .inspection-mode-switch button.is-active{background:#154d40;color:#a5f3d6}
html[data-ui-theme=dark] .modal-close{background:#293438;color:#edf1f2}
.modal-close{transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
.modal-close:focus-visible{outline:2px solid var(--interaction-edge);outline-offset:2px}
@media(hover:hover) and (pointer:fine){html[data-ui-theme] .modal-close:hover{background:var(--interaction-fill);box-shadow:inset 0 0 0 1px var(--interaction-edge)}}
html[data-ui-theme] .modal-close:active{box-shadow:inset 0 0 0 2px var(--interaction-edge)}
@media(prefers-reduced-motion:reduce){.modal-close{transition:none}}
html[data-ui-theme] :is(.inspection-mode-switch button,.template-row,.program-option,.calendar-header button,.appointment-action,.admin-console button,.admin-avatar-upload){transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,color 160ms ease}
html[data-ui-theme] :is(.inspection-mode-switch button,.program-option,.calendar-header button,.appointment-action,.admin-console button,.admin-avatar-upload):focus-visible{outline:2px solid var(--interaction-edge);outline-offset:2px}
html[data-ui-theme] .template-row:focus-within{background:var(--interaction-fill);box-shadow:inset 3px 0 var(--interaction-edge)}
@media(hover:hover) and (pointer:fine){
 html[data-ui-theme] :is(.inspection-mode-switch button,.program-option,.calendar-header button,.appointment-action,.admin-console button,.admin-avatar-upload):not(:disabled):not([aria-disabled=true]):hover{background:var(--interaction-fill);color:var(--ink);box-shadow:inset 0 0 0 1px var(--interaction-edge);border-color:var(--interaction-edge)}
 html[data-ui-theme] .template-row:hover{background:var(--interaction-fill);box-shadow:inset 3px 0 var(--interaction-edge)}
}
html[data-ui-theme] :is(.inspection-mode-switch button,.program-option,.calendar-header button,.appointment-action,.admin-console button):not(:disabled):active{background:var(--interaction-fill);box-shadow:inset 0 0 0 2px var(--interaction-edge);transform:none}
@media(prefers-reduced-motion:reduce){html[data-ui-theme] :is(.inspection-mode-switch button,.template-row,.program-option,.calendar-header button,.appointment-action,.admin-console button,.admin-avatar-upload,.user-drawer,.drawer-overlay){transition:none}}

/* Shared work controls: exports, filters and booking actions in both workspaces. */
html[data-ui-theme=dark] :is(.button-secondary,.organization-seat-toggle){background:#263c36;color:#d8f3e9;border-color:#548e7e}
html[data-ui-theme=dark] :is(.button-primary,.organization-command){background:#0a6655;color:#fff;border-color:#45bc9e}
html[data-ui-theme=dark] :is(.appointment-person p,.appointment-person small){color:#b3c0c3}
html[data-ui-theme=dark] .appointment-time.is-future{color:#80dfbc}
html[data-ui-theme=dark] .appointment-time.is-future small{color:#b3c0c3}
html[data-ui-theme] :is(.button-secondary,.button-primary,.journal-periods select,.toolbar select,.appointment-route,.organization-command,.organization-seat-toggle,.organization-icon-button,.organization-tabs button){transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,color 160ms ease}
html[data-ui-theme] :is(.button-secondary,.button-primary,.journal-periods select,.toolbar select,.organization-command,.organization-seat-toggle,.organization-icon-button,.organization-tabs button):focus-visible{outline:2px solid var(--interaction-edge);outline-offset:2px}
.appointment-row{transition:background-color 160ms ease}
.appointment-row:focus-within{background:var(--row-feedback)}
@media(hover:hover) and (pointer:fine){
 html[data-ui-theme] :is(.button-secondary,.journal-periods select,.toolbar select,.organization-seat-toggle,.organization-icon-button,.organization-tabs button):not(:disabled):not([aria-disabled=true]):hover{background:var(--interaction-fill);color:var(--ink);border-color:var(--interaction-edge);box-shadow:inset 0 0 0 1px var(--interaction-edge)}
 html[data-ui-theme] :is(.button-primary,.organization-command):not(:disabled):hover{background:#076e5c;color:#fff;border-color:var(--interaction-edge);box-shadow:0 0 0 3px var(--interaction-ring)}
 .appointment-row:hover{background:var(--row-feedback)}
}
html[data-ui-theme] :is(.button-secondary,.button-primary,.journal-periods select,.toolbar select,.organization-command,.organization-seat-toggle,.organization-icon-button,.organization-tabs button):not(:disabled):active{transform:none;box-shadow:inset 0 0 0 2px var(--interaction-edge)}
@media(prefers-reduced-motion:reduce){html[data-ui-theme] :is(.button-secondary,.button-primary,.journal-periods select,.toolbar select,.appointment-route,.appointment-row,.organization-command,.organization-seat-toggle,.organization-icon-button,.organization-tabs button){transition:none}}
@media(max-width:600px){.journal-periods>div{grid-template-columns:4.5rem minmax(0,1fr)}}

:root{--row-feedback:rgba(63,101,91,.045);--field-edge:#80b3a5;--field-focus:#159b82;--field-ring:rgba(21,155,130,.14)}
html[data-ui-theme=dark]{--row-feedback:rgba(177,203,193,.045);--field-edge:#648b81;--field-focus:#64c4aa;--field-ring:rgba(100,196,170,.16)}
.appearance-control{width:10rem;min-width:0;flex:none}
html[data-ui-theme] :is(.search-control,input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden],[type=submit],[type=button]),textarea){transition:border-color 160ms ease,box-shadow 160ms ease}
@media(hover:hover) and (pointer:fine){
 html[data-ui-theme] :is(.search-control,input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden],[type=submit],[type=button]):not(.search-control input),textarea):not(:disabled):not(:focus-within):hover{border-color:var(--field-edge);box-shadow:0 0 0 2px var(--field-ring)}
}
html[data-ui-theme] :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden],[type=submit],[type=button]):not(.search-control input),textarea):focus,
html[data-ui-theme] .search-control:focus-within{border-color:var(--field-focus);box-shadow:0 0 0 3px var(--field-ring);outline:none}
html[data-ui-theme] .search-control input:is(:hover,:focus){border:0;box-shadow:none;outline:none}
@media(prefers-reduced-motion:reduce){html[data-ui-theme] :is(.search-control,input,textarea){transition:none}}

html[data-ui-theme] .toolbar select:not(:disabled):not([aria-disabled=true]):is(:hover,:focus,:active){background:#fff;color:#27404d;border-color:var(--field-focus);box-shadow:none;outline:none}
html[data-ui-theme=dark] .toolbar select:not(:disabled):not([aria-disabled=true]):is(:hover,:focus,:active){background:#1b2225;color:#edf1f2}
html[data-ui-theme] .toolbar select:not(:disabled):not([aria-disabled=true]):focus-visible{outline:2px solid var(--field-focus);outline-offset:-2px;box-shadow:none}
html[data-ui-theme] .toolbar select option{background:#fff;color:#27404d;color-scheme:light}
.inspection-mode-switch{gap:4px;max-width:100%;flex-wrap:wrap}
.month-chart-track{box-sizing:border-box;padding-top:12px}
.month-chart-summary dd{white-space:normal;overflow-wrap:anywhere}
.month-chart-bar{transform-origin:center bottom;transition:background-color 160ms ease,transform 160ms ease,box-shadow 160ms ease}
@media(hover:hover) and (pointer:fine){
 .month-chart-day.has-value:hover .month-chart-bar{transform:translateY(-3px) scale(1.18,1.03);background:#087f68;box-shadow:0 0 0 2px var(--field-ring)}
 html[data-ui-theme=dark] .month-chart-day.has-value:hover .month-chart-bar{background:#64c4aa}
}
.month-chart-day.has-value:is(:focus,:active) .month-chart-bar{transform:translateY(-4px) scale(1.22,1.04);background:#087f68;box-shadow:0 0 0 2px var(--field-ring)}
html[data-ui-theme=dark] .month-chart-day.has-value:is(:focus,:active) .month-chart-bar{background:#64c4aa}
@media(prefers-reduced-motion:reduce){.month-chart-bar{transition:none}.month-chart-day.has-value:is(:hover,:focus,:active) .month-chart-bar{transform:none}}

/* Selects keep one neutral surface; button feedback must not leak into native menus. */
:root{--select-surface:#fff;--select-ink:#27404d;--select-focus:#159b82}
html[data-ui-theme=dark]{--select-surface:#242b2e;--select-ink:#edf1f2;--select-focus:#64c4aa}
html[data-ui-theme] select{background:var(--select-surface)!important;color:var(--select-ink)!important;box-shadow:none!important;outline:none!important}
html[data-ui-theme] select:not(:disabled):is(:hover,:focus,:active){border-color:var(--select-focus)!important}
html[data-ui-theme] select:not(:disabled):focus-visible{outline:2px solid var(--select-focus)!important;outline-offset:-2px!important}
html[data-ui-theme] select :is(option,optgroup){background:#fff!important;color:#27404d!important;color-scheme:light}

/* Unavailable actions stay neutral, independent of active-button theme colors. */
html[data-ui-theme] .inspection-examples:disabled{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;min-height:40px;height:auto;padding:9px 12px;font-size:calc(14px * var(--ui-text-scale,1));font-weight:400;line-height:1.4;text-align:left;opacity:1}
html[data-ui-theme] .inspection-examples:disabled svg{width:18px;height:18px;flex:none}
html[data-ui-theme] .inspection-examples:disabled small{font-size:calc(12px * var(--ui-text-scale,1));font-weight:400}
html[data-ui-theme] :is(.inspection-examples,.appointment-actions .icon-button):disabled{background:#f3f5f6;color:#899298;border-color:#dce1e4;box-shadow:none;transform:none;cursor:not-allowed}
html[data-ui-theme=dark] :is(.inspection-examples,.appointment-actions .icon-button):disabled{background:#282d30;color:#889195;border-color:#3c4448;box-shadow:none}
#appointmentRouteDialog [hidden],#journalFileDialog [hidden]{display:none!important}
#journalFileDialog{width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:20px;border:1px solid var(--line);border-radius:8px}
#journalFileDialog::backdrop{background:rgba(16,25,30,.5)}
#journalFileDialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#journalFileDialog h2{font-size:20px;margin:0}
#journalFileDialog p{overflow-wrap:anywhere}
#journalFileDialog footer{display:flex;flex-wrap:wrap;gap:10px}