/***********************************************************
*   ######  ######   ######  ######  ######  #######
*   ##   ## ##   ## ##      ##    ## ##   ## ##
*   ######  ######  ##      ##    ## ##   ## #####
*   ##   ## ##   ## ##      ##    ## ##   ## ##
*   ##   ## ######   ######  ######  ######  #######
*
************************************************************
* Copyright (C) 2007-2026 Renato Brunetti - Tutti i diritti riservati
* Nome file  : labs.css
* Descrizione: Stili dell'interfaccia pubblica del laboratorio Labs OCEWeb.
* Autore     : Renato Brunetti
* Sito web   : https://www.renato-brunetti.it
* E-mail     : sviluppo@oceweb.it
************************************************************
* Data creazione: 25/09/2026
* Data modifica : 25/09/2026
***********************************************************/
/* Labs OCEWeb · vista Napoli, mockup approvato.
   HTML/CSS/JS senza dipendenze. Le illustrazioni non contengono l'interfaccia. */
:root {
  color-scheme: light;
  --ink: #071650;
  --blue: #1362c4;
  --link: #064cdd;
  --paper: #fff;
  --ice: #eaf9ff;
  --border: #b9e7ff;
  --body-font: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  --ui-font: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --mono-font: "Lucida Console", "Courier New", monospace;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #dceff9; font: 18px/1.35 var(--body-font); }
button, input { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--link); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #a53296; outline-offset: 3px; }
[hidden] { display: none !important; }
img { max-width: 100%; }
svg.icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.tint-lilac { fill: #c8bcff; stroke: none; }
.tint-yellow { fill: var(--bulb-fill, #ffe780); }
svg.star { fill: #ffde56; stroke: #ffd94b; stroke-width: 1; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; z-index: 100; top: -90px; left: 16px; padding: 12px 18px; color: white; background: var(--ink); border: 2px solid white; border-radius: 6px; }
.skip-link:focus { top: 10px; }
.lab-page { max-width: 1440px; margin: 0 auto; background: var(--ice); box-shadow: 0 0 65px #4176a326; overflow: clip; }
.hero { position: relative; background: #bfe8fb; }
.hero-art { display: block; width: 100%; height: auto; }
/* La griglia è fluida: testi lunghi e archivi estesi non dipendono dalle dimensioni dell'immagine. */
.workspace { position: relative; isolation: isolate; display: grid; grid-template-columns: 192px minmax(0,1fr); gap: 28px; padding: 12px 32px 88px; min-height: 770px; background: radial-gradient(ellipse at 36% 38%,#fff 0%,#f0fbff 45%,#d1f1ff 100%); }
.workspace::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent 18%,#c9efff66 18.5%,transparent 20%); }
.landscape { position: absolute; pointer-events: none; }
.landscape-right { z-index: 2; right: 0; bottom: 0; width: 24%; height: auto; }
.landscape-flowers { z-index: 5; right: 0; top: 0; width: 35px; height: auto; }
.landscape-leaves { z-index: 5; left: 0; top: 0; width: 25px; height: auto; }
.sidebar { position: relative; z-index: 2; min-width: 0; padding-right: 0; }
.main-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 21px; padding: 8px 17px; border: 1px solid transparent; border-radius: 10px; color: var(--ink); text-align: left; text-decoration: none; font: 500 17px/1.2 var(--body-font); background: transparent; transition: background .16s ease; }
.nav-item .icon { width: 29px; height: 31px; flex-basis: 29px; }
.nav-item.is-active { color: #fff; background: linear-gradient(120deg,#147af0,#3399ff); border-color: #54a6ff; box-shadow: inset 0 1px 0 #ffffff40; }
.nav-item.is-active .tint-yellow,.nav-item.is-active .tint-lilac { fill: #ffffff42; }
.nav-item:hover:not(.is-active) { background: #deefff; border-color: #b9deff; }
.sidebar-motto { padding: 10px 0; margin: 15px 18px 19px; border-top: 1px solid #a0c8e8; border-bottom: 1px solid #a0c8e8; }
.sidebar-motto img { display: block; width: 147px; height: auto; margin: auto; }
.network-link { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-decoration: none; color: var(--ink); font: 700 20px/1.0 var(--body-font); }
.network-link img { width: 59px; height: auto; }
.network-link:hover > span { text-decoration: underline; }
.content-area { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) 250px; grid-template-areas: "primary aside" "categories aside"; align-content: start; align-items: start; gap: 8px 24px; min-width: 0; }
.content-area:focus:not(:focus-visible) { outline: none; }
.primary-column { grid-area: primary; min-width: 0; }
.panel { overflow: hidden; background: #ffffffed; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 8px #45b7e311, 0 0 0 3px #ffffff70; }
.panel-heading { display: flex; align-items: center; gap: 17px; min-height: 45px; padding: 7px 16px; color: white; background: linear-gradient(112deg,#07589e,#1456b0 48%,#167bd9); box-shadow: inset 0 1px 0 #ffffff45; }
.panel-heading h2 { margin: 0; font: 700 23px/1.2 var(--ui-font); }
.panel-heading .star { width: 31px; height: 31px; flex-basis: 31px; }
.feed-panel .panel-heading h2 { flex: 1; }
.rss-button { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; background: none; border: 0; border-radius: 5px; padding: 3px 0 3px 7px; color: white; font: 600 17px/1.2 var(--body-font); }
.rss-button .icon { width: 22px; height: 22px; flex-basis: 22px; }
.rss-button:hover { background: #ffffff20; }
.feed-list { display: grid; gap: 8px; padding: 9px 12px 15px; }
.post-card { display: grid; grid-template-columns: 112px minmax(0,1fr) 111px; grid-template-rows: auto 1fr auto; gap: 4px 20px; min-height: 120px; min-width: 0; padding: 8px 10px; border: 1px solid #bce4ff; border-radius: 8px; background: linear-gradient(115deg,#fff 60%,#fbfeff); }
.post-avatar { grid-column: 1; grid-row: 1 / -1; width: 112px; height: 102px; object-fit: cover; object-position: center top; /*border: 1px solid #b0e4fa; border-radius: 5px; */align-self: start; }
.post-card:has(.post-copy[data-lines="3"]) .post-avatar { height: 119px; }
.post-date { grid-column: 2 / -1; grid-row: 1; color: #5476ad; font: 14px/1.2 var(--body-font); }
.post-copy { grid-column: 2; grid-row: 2; font: 18px/1.2 var(--body-font); margin: 0; overflow-wrap: anywhere; }
.post-copy strong { font-weight: 700; }
.post-tags { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5px 7px; padding-top: 4px; }
.tag { max-width: 100%; overflow-wrap: anywhere; min-height: 25px; border: 0; padding: 3px 10px; border-radius: 6px; color: #0649c9; background: #e0f3ff; font: 15px/1.2 var(--body-font); }
.tag:nth-child(3n+1) { background: #eee6ff; color: #4926bb; }
.tag:hover { background: #cae8ff; color: #092770; box-shadow: inset 0 0 0 1px #83bded; }
.post-decoration { grid-column: 3; grid-row: 1 / 3; position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 2px 7px 0 0; }
.post-decoration > .icon { width: 58px; height: 70px; flex-basis: 58px; color: #0b1b72; }
.post-decoration img { width: auto; max-width: 96px; height: auto; max-height: 85px; object-fit: contain; }
.post-decoration::before { content: ""; position: absolute; left: -27px; top: 25px; width: 3px; height: 30px; background: #63e2f3; border-radius: 8px; transform: rotate(42deg); box-shadow: 10px 8px 0 #7be7f3; }
.post-card:nth-child(2) .post-decoration::before { background: #ffd864; box-shadow: 10px 9px 0 #ffd864; }
.text-link { background: none; border: 0; padding: 0; color: var(--link); display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 3px; font: 18px/1.2 var(--body-font); }
.text-link .icon { width: 22px; height: 21px; flex-basis: 22px; }
.text-link:hover { color: #082063; }
.post-link { grid-column: 3; grid-row: 3; justify-self: end; align-self: end; min-height: 26px; }
.filter-bar { padding: 10px 13px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; background: #e6f6ff; font-size: 16px; }
.filter-bar button { border: 1px solid #a4cde9; border-radius: 5px; padding: 5px 9px; background: white; font-size: 15px; }
.more-wrap { display: flex; justify-content: center; padding-top: 12px; }
.more-wrap .primary-button { min-width: min(374px,100%); font: 400 16px/1.2 var(--body-font); }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 46px; padding: 9px 24px; border: 1px solid #1764c8; border-radius: 26px; box-shadow: 0 0 0 3px #ffffffb3,0 3px 8px #137fc02b,inset 0 1px 0 #79c7ff; background: linear-gradient(112deg,#208cf2,#1654c9); color: white; font: 18px/1.25 var(--body-font); text-decoration: none; transition: background .16s; }
.primary-button:hover { background: linear-gradient(112deg,#1172d6,#1044b0); }
.primary-button:active { box-shadow: 0 0 0 2px #ffffffaa,inset 0 2px 3px #03326b42; }
.right-column { grid-area: aside; min-width: 0; }
.status-panel .panel-heading { gap: 15px; padding-left: 15px; min-height: 45px; }
.status-panel .panel-heading h2 { font-size: 21px; white-space: nowrap; }
.status-dot { display: block; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid #6affac; border-radius: 50%; background: #27e885; box-shadow: 0 0 9px #52eead96; }
.status-body { padding: 10px 15px 17px; }
.status-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.status-list li { min-height: 32px; display: flex; align-items: center; gap: 17px; font: 17px/1.2 var(--body-font); }
.status-glyph { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: #0b1b72; }
.status-glyph .icon { width: 29px; height: 29px; }
.status-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.status-check { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border: 1px solid #9cbaef; border-radius: 4px; background: #fff; }
.status-check.is-done { background: #10c975; border-color: #0abe68; color: white; }
.status-check .icon { width: 17px; height: 17px; stroke-width: 1.75; }
.progress-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; border: 1px solid #c4dcf6; border-radius: 8px; padding: 5px; }
progress { display: block; flex: 1; min-width: 0; width: 80px; height: 16px; border: 1px solid #98bee9; border-radius: 8px; overflow: hidden; appearance: none; background: #fff; }
progress::-webkit-progress-bar { background: #fff; }
progress::-webkit-progress-value { background: #17c97d; border-radius: 5px 0 0 5px; }
progress::-moz-progress-bar { background: #17c97d; }
.progress-label { flex: 0 0 auto; padding-right: 1px; font: 700 17px/1 var(--body-font); }
.sticky-note { display: block; width: 212px; height: auto; margin: 14px auto 0; filter: drop-shadow(1px 5px 2px #68aac221); }
.category-grid { grid-area: categories; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; min-width: 0; }
.category-card .panel-heading { min-height: 50px; padding: 7px 17px; gap: 16px; }
.category-card .panel-heading h2 { font: 700 20px/1.2 var(--body-font); }
.category-card .panel-heading .icon { width: 30px; height: 31px; flex: 0 0 30px; color: #ffe14c; }
.category-card:nth-child(2) .panel-heading .icon { color: white; }
.category-card { --bulb-fill: none; }
.category-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 10px 23px 9px; min-height: 87px; }
.category-body p { margin: 0 0 7px; font-size: 17px; line-height: 1.2; }
.category-body .text-link { align-self: flex-end; }
/* Il prato è decorativo. Nessun timer, trasformazione o animazione per la cagnolina. */
.meadow { position: absolute; left: 0; right: 0; bottom: 0; height: 151px; pointer-events: none; overflow: hidden; }
.landscape-bottom { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: auto; min-height: 75px; object-fit: cover; object-position: center bottom; }
.dog-static { position: absolute; z-index: 4; bottom: 0; left: 20px; width: 191px; height: 130px; }
.dog-static > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dog-heart { position: absolute; top: -14px; right: -22px; display: grid; place-items: center; width: 43px; height: 39px; border: 1.3px solid #263d49; border-radius: 50% 50% 50% 12%; background: #fff; }
.dog-heart .icon { color: #fb414c; fill: #ff5058; width: 24px; height: 24px; stroke-width: 1; }
.status-bar { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 45px; padding: 10px 32px; color: #93efc9; background: linear-gradient(112deg,#0d292c,#0c1b2e); border-top: 1px solid #3e826b; font: 12px/1.35 var(--mono-font); }
.ticker { margin: 0; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; font-size: inherit; }
.ticker > span[aria-hidden] { font: 25px/.8 var(--body-font); color: #8ee6be; }
.ticker > span:last-child { margin-left: 8px; }
.footer-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 14px; flex: none; }
.footer-actions > a,.footer-actions > button { display: inline-flex; align-items: center; min-height: 44px; color: #a9e6ff; text-decoration: none; }
.footer-actions > a { gap: 18px; }
.footer-actions > button { padding: 0 3px; border: 0; background: transparent; font: inherit; }
.footer-actions > a:hover,.footer-actions > button:hover { text-decoration: underline; }
svg.footer-heart { width: 23px; height: 23px; fill: #ff665f; stroke: #ff7971; stroke-width: 1; }
/* Stati secondari e finestra di lettura. */
.loading-message,.empty-message,.fallback-message { padding: 22px 12px; margin: 0; font-size: 19px; }
.project-card { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 10px 13px; padding: 18px; border: 1px solid #b9dfff; border-radius: 8px; background: white; }
.project-card > .icon { grid-row: 1 / 3; width: 35px; height: 35px; color: #196bba; }
.project-card > h3 { margin: 0; font: 700 23px/1.2 var(--body-font); }
.project-card > div { grid-column: 2; min-width: 0; }
.project-card p { margin: 6px 0; overflow-wrap: anywhere; }
.project-card > button { grid-column: 2; justify-self: start; margin-top: 7px; text-align: left; }
.project-state { display: inline-block; padding: 3px 8px; background: #e0f5ed; color: #19624e; border-radius: 5px; font-size: 15px; }
.about-content { padding: 10px; }
.about-profile { width: 112px; height: 106px; float: left; object-fit: cover; /*border: 1px solid #a0d6ee; border-radius: 8px;*/ margin: 0 19px 12px 0; }
.about-content h3 { margin-top: 0; font-size: 25px; line-height: 1.2; }
.about-content p { font-size: 19px; line-height: 1.4; }
.about-links { display: flex; flex-wrap: wrap; gap: 14px; clear: both; }
.demo-callout { border-left: 3px solid #aa8bd6; background: #f5efff; padding: 12px 15px; border-radius: 0 7px 7px 0; font-size: 16px !important; }
body.dialog-open { overflow: hidden; }
.lab-dialog { padding: 0; width: min(640px,calc(100% - 30px)); max-height: min(86dvh,900px); color: var(--ink); background: #fff; border: 1px solid #87caec; border-radius: 14px; box-shadow: 0 30px 100px #001e5860,0 0 0 3px #d5f3ff; }
.lab-dialog::backdrop { background: #081e4680; backdrop-filter: blur(3px); }
.lab-dialog .panel-heading { position: sticky; z-index: 1; top: 0; }
.lab-dialog h2 { flex: 1; font-size: 22px; }
.dialog-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 5px; border: 1px solid #87c8ff; background: #ffffff15; color: white; border-radius: 6px; }
.dialog-close:hover { background: #ffffff35; }
.dialog-content { padding: 22px 28px 28px; overflow-wrap: anywhere; }
.dialog-content h3 { margin: 22px 0 14px; font-size: 28px; line-height: 1.2; }
.dialog-content p { font-size: 20px; line-height: 1.5; }
.dialog-meta { display: flex; align-items: center; gap: 13px; }
.dialog-meta img { width: 62px; height: 59px; object-fit: cover; border-radius: 7px; border: 1px solid #b9def4; }
.dialog-meta strong { display: block; font-size: 21px; }
.dialog-date { display: block; margin-top: 4px; color: #4a668d; font-size: 15px; }
.dialog-tags,.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.dialog-actions .primary-button { min-height: 42px; padding: 8px 17px; font-size: 18px; }
.permalink-field { display: block; width: 100%; padding: 12px; border: 1px solid #98bfde; border-radius: 6px; background: #f3faff; font-size: 16px; }
.toast { position: fixed; z-index: 90; bottom: 22px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 13px 20px; background: #123556; color: white; border: 1px solid #a3d9ff; border-radius: 9px; box-shadow: 0 8px 32px #0003; font: 17px/1.4 var(--body-font); }
#page-body > footer > p > span { padding-bottom: 8px; }
@media (min-width: 1350px) {
  .workspace { grid-template-columns: 211px minmax(0,1fr); padding-left: 36px; padding-right: 36px; gap: 30px; }
  .content-area { grid-template-columns: minmax(0,1fr) 274px; }
  .post-card { min-height: 125px; }
  .post-copy { font-size: 19px; line-height: 1.24; }
  .post-avatar { height: 112px; }
  .post-card:has(.post-copy[data-lines="3"]) .post-avatar { height: 129px; }
}
@media (max-width: 1170px) {
  .workspace { grid-template-columns: 167px minmax(0,1fr); gap: 19px; padding-left: 22px; padding-right: 24px; }
  .content-area { grid-template-columns: minmax(0,1fr) 215px; gap: 15px 18px; }
  .nav-item { gap: 15px; padding-left: 12px; }
  .panel-heading { gap: 11px; padding-left: 12px; padding-right: 12px; }
  .panel-heading h2 { font-size: 22px; }
  .post-card { grid-template-columns: 89px minmax(0,1fr) 82px; column-gap: 13px; }
  .post-avatar { width: 89px; }
  .post-copy { font-size: 18px; }
  .post-date { font-size: 14px; }
  .post-decoration img { max-width: 76px; max-height: 79px; }
  .post-decoration::before { left: -16px; height: 25px; }
  .tag { padding: 4px 7px; font-size: 14px; }
  .status-panel .panel-heading { gap: 11px; }
  .status-panel .panel-heading h2 { font-size: 20px; }
  .status-list li { gap: 11px; }
  .status-body { padding: 10px 12px 15px; }
  .sticky-note { max-width: 100%; }
  .category-card .panel-heading { gap: 9px; padding: 7px 12px; }
  .category-card .panel-heading h2 { font-size: 19px; }
  .category-card .panel-heading .icon { width: 27px; flex-basis: 27px; }
  .category-body { padding: 12px 14px; }
  .sidebar-motto { margin-left: 10px; margin-right: 10px; }
  .landscape-leaves { width: 19px; }
  .landscape-flowers { width: 24px; }
  .status-bar { padding-left: 22px; padding-right: 22px; }
  .ticker { gap: 10px; font-size: 11px; }
  .dog-static { width: 166px; height: 113px; left: 9px; }
  .dog-heart { right: -13px; top: -17px; }
}
@media (max-width: 980px) {
  .workspace { grid-template-columns: 145px minmax(0,1fr); gap: 18px; }
  .content-area { grid-template-columns: minmax(0,1fr); grid-template-areas: "primary" "categories" "aside"; gap: 20px; }
  .nav-item { padding: 8px 7px; gap: 9px; font-size: 16px; }
  .nav-item .icon { width: 27px; flex-basis: 27px; }
  .post-card { grid-template-columns: 103px minmax(0,1fr) 100px; column-gap: 17px; }
  .post-avatar { width: 103px; }
  .post-decoration img { max-width: 86px; }
  .right-column { display: grid; grid-template-columns: minmax(0,1fr) 195px; align-items: center; gap: 35px; padding-right: 10px; }
  .sticky-note { margin: 0; width: 195px; }
  .status-list { gap: 4px; }
  .status-list li { min-height: 30px; }
  .status-list li { gap: 15px; }
  .sidebar-motto { margin-top: 22px; }
  .dog-static { width: 153px; height: 104px; }
  .landscape-right { width: 200px; }
  .status-bar { flex-wrap: wrap; }
  .footer-actions { margin-left: auto; }
}
@media (max-width: 720px) {
  html { scrollbar-gutter: auto; }
  .workspace { display: block; padding: 0 14px 143px; min-height: 0; }
  .sidebar { padding: 10px 0 14px; }
  .main-nav { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; }
  .nav-item { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; min-height: 65px; padding: 7px 1px; font-size: 13px; border-radius: 8px; }
  .nav-item .icon { width: 25px; height: 28px; flex: 0 0 28px; }
  .sidebar-extra { display: none; }
  .content-area { display: grid; gap: 19px; }
  .post-card { grid-template-columns: 97px minmax(0,1fr) 88px; column-gap: 14px; }
  .post-avatar { width: 97px; }
  .right-column { grid-template-columns: minmax(0,1fr) 185px; gap: 26px; }
  .landscape-leaves,.landscape-flowers { display: none; }
  .landscape-right { width: 170px; }
  .meadow { height: 136px; }
  .dog-static { left: 17px; width: 171px; height: 116px; }
  .landscape-bottom { width: 100%; height: 78px; object-fit: cover; }
  .status-bar { gap: 12px; padding: 12px 17px; }
  .ticker { width: 100%; justify-content: flex-start; gap: 9px; }
  .footer-actions { margin-left: 0; }
}
@media (max-width: 520px) {
  .workspace { padding-left: 11px; padding-right: 11px; }
  .nav-item { font-size: 11px; }
  .panel-heading { gap: 9px; min-height: 43px; padding: 8px 11px; }
  .panel-heading h2 { font-size: 20px; }
  .panel-heading .star { width: 25px; height: 25px; flex-basis: 25px; }
  .rss-button { font-size: 15px; }
  .rss-button .icon { width: 19px; flex-basis: 19px; }
  .feed-list { padding: 9px; gap: 9px; }
  .post-card { grid-template-columns: 63px minmax(0,1fr) 43px; grid-template-rows: auto auto auto; gap: 7px 10px; padding: 9px; min-height: 123px; }
  .post-avatar,.post-card:has(.post-copy[data-lines="3"]) .post-avatar { width: 63px; height: 69px; grid-row: 1 / 3; }
  .post-date { grid-column: 2 / -1; grid-row: 1; font-size: 12px; line-height: 1.25; }
  .post-copy { grid-column: 2 / -1; grid-row: 2; font-size: 16px; line-height: 1.25; }
  .post-tags { grid-column: 1 / 3; grid-row: 3; gap: 5px; padding-top: 2px; }
  .tag { font-size: 12px; padding: 5px 7px; }
  .post-link { grid-column: 3; grid-row: 3; align-self: center; gap: 2px; font-size: 15px; }
  .post-link .icon { width: 16px; flex-basis: 16px; }
  .post-decoration { display: none; }
  .primary-button { min-height: 45px; }
  .more-wrap .primary-button { min-width: min(324px,100%); font-size: 15px; }
  .category-grid { gap: 9px; }
  .category-card .panel-heading { flex-direction: column; min-height: 69px; gap: 3px; padding: 8px 4px; text-align: center; }
  .category-card .panel-heading h2 { font-size: 16px; }
  .category-card .panel-heading .icon { width: 26px; height: 27px; flex-basis: 27px; }
  .category-body { min-height: 128px; padding: 11px 10px; }
  .category-body p { font-size: 15px; line-height: 1.4; }
  .category-body p br { display: none; }
  .category-body .text-link { font-size: 17px; }
  .right-column { grid-template-columns: minmax(0,1fr) 122px; gap: 14px; padding: 0; }
  .status-panel .panel-heading { gap: 9px; padding: 8px 10px; }
  .status-panel .panel-heading h2 { font-size: 16px; }
  .status-dot { width: 13px; height: 13px; flex-basis: 13px; }
  .status-body { padding: 10px; }
  .status-list { gap: 5px; margin-bottom: 10px; }
  .status-list li { min-height: 29px; gap: 9px; font-size: 15px; }
  .status-glyph { width: 23px; height: 26px; flex-basis: 23px; }
  .status-glyph .icon { width: 23px; height: 25px; }
  .status-check { width: 17px; height: 18px; flex-basis: 17px; }
  .status-check .icon { width: 15px; height: 15px; }
  .progress-label { font-size: 15px; }
  .progress-wrap { gap: 8px; }
  .ticker { font-size: 10px; gap: 7px; }
  .ticker > span:last-child { margin-left: 0; }
  .footer-actions > a,.footer-actions > button { font-size: 11px; }
  .dialog-content { padding: 18px 20px 23px; }
  .lab-dialog h2 { font-size: 20px; }
  .dialog-content h3 { font-size: 25px; }
  .dialog-content p { font-size: 19px; }
}
@media (max-width: 440px) {
  .main-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .nav-item { flex-direction: row; min-height: 46px; gap: 7px; padding: 7px 5px; font-size: 12px; }
  .nav-item .icon { width: 22px; height: 25px; flex-basis: 22px; }
}
@media (max-width: 370px) {
  .workspace { padding-left: 9px; padding-right: 9px; }
  .main-nav { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
  .nav-item { flex-direction: row; min-height: 45px; padding: 6px 2px; font-size: 11px; gap: 4px; }
  .nav-item .icon { width: 18px; height: 23px; flex-basis: 18px; }
  .panel-heading { gap: 6px; padding-left: 9px; padding-right: 8px; }
  .panel-heading h2 { font-size: 18px; }
  .panel-heading .star { width: 22px; height: 22px; flex-basis: 22px; }
  .post-card { grid-template-columns: 53px minmax(0,1fr) 43px; gap: 7px 8px; padding: 8px; }
  .post-avatar,.post-card:has(.post-copy[data-lines="3"]) .post-avatar { width: 53px; height: 58px; }
  .post-date { font-size: 11px; }
  .post-copy { font-size: 15px; }
  .tag { padding: 5px 6px; font-size: 11px; }
  .category-grid { gap: 7px; }
  .category-card .panel-heading h2 { font-size: 14px; }
  .category-body { padding: 9px 8px; }
  .category-body p { font-size: 14px; }
  .right-column { grid-template-columns: minmax(0,1fr) 94px; gap: 9px; }
  .status-list li { gap: 6px; font-size: 14px; }
  .status-panel .panel-heading h2 { font-size: 16px; }
  .status-panel .panel-heading { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  body { background: #fff; }
  .lab-page { box-shadow: none; max-width: none; }
  .sidebar,.right-column,.more-wrap,.category-grid,.status-bar,.landscape,.meadow,.post-decoration,.post-link,.rss-button,.skip-link { display: none; }
  .workspace,.content-area { display: block; padding: 0; min-height: 0; background: #fff; }
  .hero { margin-bottom: 20px; }
  .post-card { break-inside: avoid; }
}