/*
Projekt: Piding Intercom – ESP32-S3-Webgestaltung
Version: 0.19.1 | 2026-08-12 09:18:54
Datum: 2026-08-10
Zweck: Übernimmt Palette, Roboto Condensed, Formhöhen, Modals, Toasts und
die deutlich verdichtete Mobilansicht der zentralen Intercom-PWA.
*/

@font-face { font-family: "Roboto Condensed"; src: url("/assets/roboto-condensed.ttf") format("truetype"); font-display: swap; }
:root { --color-background:#101214; --color-surface:#171a1d; --color-surface-raised:#1d2125; --color-border:#343a40; --color-text:#f3f4f4; --color-muted:#aab0b5; --color-accent:#f0b429; --color-success:#55c58a; --color-danger:#ef6b73; --color-warning:#e6b64f; --color-information:#70aee8; --color-shadow:rgb(0 0 0 / 24%); --color-backdrop:rgb(0 0 0 / 68%); --color-background-translucent:rgb(16 18 20 / 50%); --color-warning-soft:rgb(230 182 79 / 15%); --color-success-soft:rgb(85 197 138 / 15%); --color-danger-soft:rgb(239 107 115 / 15%); --color-information-soft:rgb(112 174 232 / 16%); --radius:14px; --control-height:44px; --shadow:0 18px 44px var(--color-shadow); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { min-height:100%; background:var(--color-background); color-scheme:dark; }
body { min-width:320px; min-height:100vh; margin:0; background:var(--color-background); color:var(--color-text); font-family:"Roboto Condensed",sans-serif; font-size:18px; line-height:1.45; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:var(--color-information); }
.skip-link { position:fixed; z-index:30; top:-100px; left:12px; padding:8px 12px; border-radius:8px; background:var(--color-accent); color:var(--color-background); font-weight:700; }
.skip-link:focus { top:12px; }
.app-header { min-height:72px; display:flex; align-items:center; gap:24px; max-width:1160px; padding:0 28px; margin:auto; border-bottom:1px solid var(--color-border); }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--color-text); text-decoration:none; font-weight:700; font-size:24px; }
.brand img { border-radius:9px; }
.desktop-nav { display:flex; gap:18px; margin-left:auto; }
.desktop-nav a { color:var(--color-muted); text-decoration:none; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { color:var(--color-text); }
.icon-button.menu-trigger { display:none; margin-left:auto; }
.page-shell { width:min(100% - 40px,1104px); margin:28px auto 42px; }
.status-strip { display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 14px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); color:var(--color-muted); font-size:16px; }
.status-mode-badge { margin-left:auto; white-space:nowrap; }
.status-dot { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--color-warning); box-shadow:0 0 0 3px var(--color-warning-soft); }
.status-dot.is-online { background:var(--color-success); box-shadow:0 0 0 3px var(--color-success-soft); }
.status-dot.is-error { background:var(--color-danger); box-shadow:0 0 0 3px var(--color-danger-soft); }
.hero-card { display:flex; justify-content:space-between; gap:28px; margin-top:22px; padding:34px; border:1px solid var(--color-border); border-radius:var(--radius); background:linear-gradient(132deg,var(--color-surface-raised),var(--color-surface)); box-shadow:var(--shadow); }
.eyebrow { margin:0 0 4px; color:var(--color-accent); font-weight:700; font-size:15px; letter-spacing:.11em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:10px; font-size:clamp(34px,5vw,48px); line-height:1; }
h2 { margin-bottom:0; font-size:26px; line-height:1.1; }
.lead { max-width:640px; margin-bottom:0; color:var(--color-muted); }
.station-state { min-width:225px; display:grid; align-content:center; justify-items:center; gap:5px; padding:18px; border:1px solid var(--color-border); border-radius:12px; background:var(--color-background-translucent); text-align:center; }
.state-kicker { color:var(--color-muted); font-size:12px; font-weight:700; letter-spacing:.11em; }
.station-icon { color:var(--color-information); font-size:34px; }
.station-state strong { font-size:20px; }
.station-state span:last-child { color:var(--color-muted); font-size:14px; }
.station-state.state-success { border-color:var(--color-success); background:var(--color-success-soft); }.station-state.state-success .station-icon { color:var(--color-success); }
.station-state.state-warning { border-color:var(--color-warning); background:var(--color-warning-soft); }.station-state.state-warning .station-icon { color:var(--color-warning); }
.station-state.state-danger { border-color:var(--color-danger); background:var(--color-danger-soft); }.station-state.state-danger .station-icon { color:var(--color-danger); }
.content-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.panel { min-width:0; padding:22px; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-surface); }
.panel-wide { grid-column:1/-1; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.panel > p { margin:10px 0 16px; color:var(--color-muted); }
.badge { min-height:26px; display:inline-flex; align-items:center; padding:3px 9px; border:1px solid var(--color-information); border-radius:999px; color:var(--color-information); font-size:14px; white-space:nowrap; }
.badge-muted { border-color:var(--color-border); color:var(--color-muted); }
.badge-success { border-color:var(--color-success); color:var(--color-success); }
.badge-warning { border-color:var(--color-warning); color:var(--color-warning); }
.badge-danger { border-color:var(--color-danger); color:var(--color-danger); }
.badge-information { border-color:var(--color-information); color:var(--color-information); }
.decision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.decision-card { min-width:0; display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--color-border); border-radius:11px; background:var(--color-surface-raised); }
.decision-card-primary { grid-column:1/-1; min-height:92px; padding:17px; border-width:2px; }
.decision-card-primary .decision-symbol { width:46px; height:46px; flex-basis:46px; font-size:25px; }
.decision-card-primary small { font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.decision-card-primary strong { font-size:27px; }
.decision-card-primary div > span { font-size:15px; }
.decision-symbol { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; color:var(--color-muted); font-size:20px; font-weight:700; }
.decision-card div { min-width:0; }.decision-card small,.decision-card strong,.decision-card div > span { display:block; }.decision-card small { color:var(--color-muted); font-size:13px; }.decision-card strong { margin-top:2px; font-size:20px; line-height:1.1; }.decision-card div > span { margin-top:4px; color:var(--color-muted); font-size:14px; }
.decision-card.state-information { border-color:var(--color-information); background:var(--color-information-soft); }.decision-card.state-information .decision-symbol,.decision-card.state-information strong { color:var(--color-information); }
.decision-card.state-success { border-color:var(--color-success); background:var(--color-success-soft); }.decision-card.state-success .decision-symbol,.decision-card.state-success strong { color:var(--color-success); }
.decision-card.state-warning { border-color:var(--color-warning); background:var(--color-warning-soft); }.decision-card.state-warning .decision-symbol,.decision-card.state-warning strong { color:var(--color-warning); }
.decision-card.state-danger { border-color:var(--color-danger); background:var(--color-danger-soft); }.decision-card.state-danger .decision-symbol,.decision-card.state-danger strong { color:var(--color-danger); }
.control-message { margin:14px 0 0 !important; padding:10px 12px; border-left:3px solid var(--color-information); border-radius:7px; background:var(--color-information-soft); color:var(--color-text) !important; }
.action-group { display:grid; grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr); align-items:center; gap:18px; margin-top:14px; padding-top:14px; border-top:1px solid var(--color-border); }
.action-group h3 { margin:0; font-size:19px; }.action-group p { margin:3px 0 0; color:var(--color-muted); font-size:14px; }.action-group .control-row { justify-content:flex-end; }
.mode-actions { display:grid; grid-template-columns:repeat(2,minmax(190px,1fr)); }
.resource-summary-grid,.guest-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
.guest-status-grid { margin-top:10px; }
.resource-status-card { min-width:0; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px; border:1px solid var(--color-border); border-radius:11px; background:var(--color-surface-raised); }
.resource-status-card h3 { margin:2px 0 4px; font-size:20px; line-height:1.15; }
.resource-status-card p { margin:0; color:var(--color-muted); font-size:14px; }
.resource-type { color:var(--color-information); font-size:12px; font-weight:700; letter-spacing:.09em; }
.live-status-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--color-border); color:var(--color-muted); font-size:14px; }
.control-row { display:flex; flex-wrap:wrap; gap:9px; }
.button,.icon-button { border:1px solid transparent; border-radius:9px; cursor:pointer; transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease; }
.button { min-height:var(--control-height); padding:8px 14px; font-weight:700; }
.button:hover:not(:disabled) { transform:translateY(-1px); }
.button:disabled { cursor:not-allowed; opacity:.6; }
.button-primary { background:var(--color-accent); color:var(--color-background); }
.button-secondary { border-color:var(--color-border); background:var(--color-surface-raised); color:var(--color-text); }
.button-success { border-color:var(--color-success); background:var(--color-success); color:var(--color-background); }
.button-danger { border-color:var(--color-danger); background:var(--color-danger); color:var(--color-background); }
.button-mode-active,.button-mode-active:disabled { border-color:var(--color-information); background:var(--color-information-soft); color:var(--color-information); box-shadow:0 0 0 2px var(--color-information-soft); opacity:1; }
.button-mode-active-success,.button-mode-active-success:disabled { border-color:var(--color-success); background:var(--color-success-soft); color:var(--color-success); box-shadow:0 0 0 2px var(--color-success-soft); }
.schedule-list { display:grid; gap:7px; margin-top:14px; }
.schedule-row { display:grid; grid-template-columns:minmax(120px,1fr) 110px 24px 110px; align-items:center; gap:8px; padding:8px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface-raised); }
.schedule-row label { display:flex; align-items:center; gap:8px; font-weight:700; }
.schedule-row input[type="checkbox"] { width:20px; height:20px; margin:0; accent-color:var(--color-accent); }
.form-control { width:100%; height:var(--control-height); padding:8px 11px; border:1px solid var(--color-border); border-radius:9px; outline:none; background:var(--color-surface-raised); color:var(--color-text); }
.form-control:focus { border-color:var(--color-information); box-shadow:0 0 0 3px var(--color-information-soft); }
.form-control[aria-invalid="true"] { border-color:var(--color-danger); }
.field-label { display:block; margin:15px 0 6px; color:var(--color-text); font-weight:700; font-size:16px; }
.field-label:first-child { margin-top:0; }
.field-error { min-height:20px; margin:4px 0 0; color:var(--color-danger); font-size:14px; }
.field-hint { margin:5px 0 11px; color:var(--color-muted); font-size:14px; }
.optional-label { color:var(--color-muted); font-size:13px; font-weight:400; }
.credential-status { display:flex; align-items:center; gap:11px; margin:15px 0 4px; padding:11px 12px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface-raised); }
.credential-status-symbol { width:28px; height:28px; flex:0 0 28px; display:inline-grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-weight:700; }
.credential-status strong,.credential-status small { display:block; }
.credential-status small { margin-top:2px; color:var(--color-muted); font-size:13px; }
.credential-status-loading { color:var(--color-information); background:var(--color-information-soft); }
.credential-status-success { border-color:var(--color-success); color:var(--color-success); background:var(--color-success-soft); }
.credential-status-danger { border-color:var(--color-danger); color:var(--color-danger); background:var(--color-danger-soft); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.dialog-actions { display:flex; justify-content:end; flex-wrap:wrap; gap:9px; margin-top:18px; }
.dialog-introduction { margin:0 0 14px; color:var(--color-muted); }
.dialog-warning { margin:0 0 14px; padding:10px 11px; border:1px solid var(--color-warning); border-radius:9px; background:var(--color-warning-soft); color:var(--color-text); }
.dialog-warning strong { color:var(--color-warning); }
.mode-confirmation-card { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--color-success); border-radius:10px; background:var(--color-success-soft); }
.mode-confirmation-card > span { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:1px solid var(--color-success); border-radius:50%; color:var(--color-success); font-size:22px; font-weight:700; }
.mode-confirmation-card strong,.mode-confirmation-card small { display:block; }.mode-confirmation-card small { margin-top:3px; color:var(--color-muted); line-height:1.35; }
.shutdown-choice-list { display:grid; gap:8px; min-width:0; margin:0; padding:0; border:0; }
.shutdown-choice-list legend { margin-bottom:7px; color:var(--color-text); font-size:16px; font-weight:700; }
.shutdown-choice { display:flex; gap:10px; align-items:flex-start; padding:11px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface-raised); cursor:pointer; }
.shutdown-choice:has(input:checked) { border-color:var(--color-information); box-shadow:0 0 0 2px var(--color-information-soft); }
.shutdown-choice-warning:has(input:checked) { border-color:var(--color-warning); box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning) 20%,transparent); }
.shutdown-choice-disabled { cursor:not-allowed; opacity:.52; }
.shutdown-choice input { width:19px; height:19px; flex:0 0 19px; margin:1px 0 0; accent-color:var(--color-information); }
.shutdown-choice span,.shutdown-choice strong,.shutdown-choice small { display:block; }
.shutdown-choice small { margin-top:3px; color:var(--color-muted); line-height:1.35; }
.token-tools { display:flex; flex-wrap:wrap; gap:9px; margin-top:10px; }
.dialog-actions-padded { padding:0 24px 24px; }
.exception-list { display:grid; gap:7px; }
.exception-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface-raised); }
.exception-item strong,.exception-item small { display:block; }
.exception-item small { color:var(--color-muted); }
.exception-delete { min-height:34px; padding:4px 9px; border:1px solid var(--color-danger); border-radius:7px; background:transparent; color:var(--color-danger); cursor:pointer; }
.trusted-device-list { display:grid; gap:7px; margin-bottom:10px; }
.trusted-device-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface-raised); }
.trusted-device-item strong,.trusted-device-item small { display:block; }
.trusted-device-item small { color:var(--color-muted); }
.check-row { display:flex; align-items:center; gap:9px; margin-top:12px; color:var(--color-text); font-weight:700; }
.check-row input { width:20px; height:20px; margin:0; accent-color:var(--color-accent); }
.empty-state { padding:10px; border:1px dashed var(--color-border); border-radius:9px; text-align:center; }
.progress-track { height:10px; margin:12px 0; overflow:hidden; border:1px solid var(--color-border); border-radius:999px; background:var(--color-background); }
.progress-track span { display:block; width:0; height:100%; background:var(--color-success); transition:width .2s ease; }
.manual-ota-area { margin-top:16px; padding-top:16px; border-top:1px solid var(--color-border); }
.manual-ota-area h3 { margin:0; font-size:19px; }
.manual-ota-area > p { margin:5px 0 10px; color:var(--color-muted); font-size:14px; }
.file-control { height:auto; min-height:var(--control-height); padding:5px; }
.file-control::file-selector-button { min-height:calc(var(--control-height) - 12px); margin-right:10px; padding:5px 10px; border:1px solid var(--color-border); border-radius:7px; background:var(--color-surface); color:var(--color-text); font:inherit; font-weight:700; cursor:pointer; }
.app-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; padding:20px; border-top:1px solid var(--color-border); color:var(--color-muted); font-size:14px; }
.app-dialog { width:min(calc(100vw - 32px),500px); max-height:min(760px,calc(100dvh - 32px)); padding:0; overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow); }
.app-dialog.wide-dialog { width:min(calc(100vw - 32px),700px); }
.app-dialog::backdrop { background:var(--color-backdrop); }
.app-dialog > p,.app-dialog form,.mobile-nav { display:block; margin:0; padding:0 24px 24px; color:var(--color-muted); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 20px; margin-bottom:18px; border-bottom:1px solid var(--color-border); }
.icon-button { width:var(--control-height); height:var(--control-height); display:inline-grid; place-items:center; border-color:var(--color-border); background:var(--color-surface-raised); color:var(--color-text); font-size:24px; }
.mobile-nav a { display:block; padding:12px 0; border-bottom:1px solid var(--color-border); text-decoration:none; }
.toast-region { position:fixed; z-index:40; right:20px; bottom:20px; display:grid; justify-items:end; gap:10px; width:min(420px,calc(100vw - 40px)); pointer-events:none; }
.toast { width:100%; padding:12px; border:1px solid var(--color-border); border-left:4px solid var(--color-information); border-radius:10px; background:var(--color-surface-raised); box-shadow:var(--shadow); pointer-events:auto; }
.toast-success { border-left-color:var(--color-success); }.toast-error { border-left-color:var(--color-danger); }
.toast-header { display:flex; align-items:start; gap:10px; }.toast-message { flex:1; margin:0; }.toast-actions { display:flex; gap:7px; margin-top:8px; }
.toast .icon-button { width:30px; height:30px; font-size:20px; }.toast-copy { min-height:30px; padding:3px 8px; border:1px solid var(--color-border); border-radius:7px; background:var(--color-surface); color:var(--color-text); cursor:pointer; }

@media (max-width:768px),(max-height:600px) and (orientation:landscape) {
  :root { --radius:10px; --control-height:38px; }
  body { font-size:15px; line-height:1.35; }
  .app-header { min-height:54px; padding:0 14px; }.brand { gap:7px; font-size:18px; }.brand img { width:25px; height:25px; }.desktop-nav { display:none; }.icon-button.menu-trigger { display:inline-grid; }
  .page-shell { width:min(100% - 22px,680px); margin:12px auto 20px; }.status-strip { flex-wrap:wrap; min-height:32px; padding:6px 9px; font-size:12px; }.status-mode-badge { margin-left:auto; }
  .hero-card { display:block; margin-top:10px; padding:14px; }.hero-card h1 { font-size:28px; }.lead { font-size:12px; }.station-state { min-width:0; display:grid; grid-template-columns:auto auto 1fr; justify-content:start; justify-items:start; gap:3px 7px; margin-top:10px; padding:8px; text-align:left; }.state-kicker { grid-column:1/-1; font-size:9px; }.station-icon { font-size:20px; }.station-state strong { font-size:14px; }.station-state span:last-child { align-self:center; font-size:11px; }
  .content-grid { grid-template-columns:1fr; gap:8px; margin-top:8px; }.panel { padding:13px; }.panel h2 { font-size:19px; }.panel > p { margin:7px 0 10px; font-size:12px; }.eyebrow { font-size:10px; }.badge { min-height:21px; padding:2px 6px; font-size:10px; }.button { padding:6px 9px; font-size:12px; }
  .resource-summary-grid,.guest-status-grid { grid-template-columns:1fr; gap:6px; }.guest-status-grid { margin-top:6px; }.resource-status-card { gap:8px; padding:8px; }.resource-status-card h3 { margin:1px 0 2px; font-size:15px; }.resource-status-card p { font-size:10px; }.resource-type { font-size:9px; }.live-status-footer { align-items:stretch; flex-direction:column; gap:7px; margin-top:8px; padding-top:8px; font-size:10px; }.live-status-footer .button { width:100%; }
  .decision-grid { grid-template-columns:1fr; gap:6px; margin-top:10px; }.decision-card { gap:8px; padding:8px; }.decision-card-primary { min-height:68px; padding:10px; }.decision-symbol,.decision-card-primary .decision-symbol { width:27px; height:27px; flex-basis:27px; font-size:15px; }.decision-card small,.decision-card-primary small { font-size:9px; }.decision-card strong,.decision-card-primary strong { font-size:15px; }.decision-card div > span,.decision-card-primary div > span { margin-top:2px; font-size:10px; }.control-message { margin-top:8px !important; padding:7px 8px; font-size:11px !important; }.action-group { grid-template-columns:1fr; gap:7px; margin-top:9px; padding-top:9px; }.action-group h3 { font-size:14px; }.action-group p { font-size:10px; }.action-group .control-row { justify-content:stretch; }.mode-actions,.power-actions { display:grid; grid-template-columns:1fr 1fr; }.mode-actions .button,.power-actions .button { width:100%; }
  .schedule-row { grid-template-columns:1fr 90px 16px 90px; gap:5px; padding:6px; font-size:11px; }.schedule-row input[type="checkbox"] { width:17px; height:17px; }.schedule-row .form-control { padding:4px; font-size:11px; }
  .form-grid { grid-template-columns:1fr; }.field-label { margin:11px 0 4px; font-size:13px; }.form-control { padding:6px 8px; font-size:13px; }.field-error { min-height:16px; font-size:11px; }.field-hint,.optional-label { font-size:11px; }.credential-status { gap:8px; margin-top:11px; padding:8px; font-size:12px; }.credential-status-symbol { width:23px; height:23px; flex-basis:23px; }.credential-status small { font-size:10px; }
  .exception-item,.trusted-device-item { padding:7px; font-size:12px; }.exception-item small,.trusted-device-item small { font-size:10px; }.check-row { font-size:12px; }.dialog-warning { padding:8px; font-size:11px; }.mode-confirmation-card { gap:8px; padding:9px; }.mode-confirmation-card > span { width:28px; height:28px; flex-basis:28px; font-size:17px; }.mode-confirmation-card strong { font-size:12px; }.mode-confirmation-card small { font-size:10px; }.shutdown-choice-list legend { font-size:13px; }.shutdown-choice { gap:7px; padding:8px; }.shutdown-choice input { width:17px; height:17px; flex-basis:17px; }.shutdown-choice strong { font-size:12px; }.shutdown-choice small { font-size:10px; }
  .manual-ota-area { margin-top:10px; padding-top:10px; }.manual-ota-area h3 { font-size:14px; }.manual-ota-area > p { font-size:10px; }.file-control::file-selector-button { margin-right:6px; padding:4px 7px; font-size:11px; }
  .app-footer { padding:10px; font-size:10px; }.app-dialog { width:min(calc(100vw - 20px),460px); }.dialog-heading { padding:13px 14px; margin-bottom:12px; }.dialog-heading h2 { font-size:18px; }.app-dialog > p,.app-dialog form,.mobile-nav { padding:0 14px 14px; font-size:13px; }.dialog-actions-padded { padding:0 14px 14px; }
  .toast-region { right:50%; bottom:10px; width:min(calc(100vw - 20px),420px); transform:translateX(50%); }.toast { padding:9px; font-size:12px; }
}

@media (max-width:520px) {
  .schedule-row { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }.schedule-row label { grid-column:1/-1; }
  .mode-actions,.power-actions { grid-template-columns:1fr; }.mode-actions .button:last-child { grid-column:auto; }
}