/* Versione da telefono: colonna stretta e lunga, schede semitrasparenti, più aria tra una e l'altra
   così lo sfondo si vede sia fra le schede sia ai lati. */
:root{--glass:76%;--glass2:56%;--blur:9px}
:root[data-vetro="0"]{--glass:100%;--glass2:100%;--blur:0px}
:root[data-vetro="2"]{--glass:50%;--glass2:36%;--blur:12px}

body{padding-block:14px 96px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
.wrap{max-width:520px;gap:26px}
main[role="tabpanel"]{gap:26px!important}
#shelf-lists{gap:26px!important}

/* le schede */
.panel,.top,.empty,.tabs{
  background:color-mix(in srgb,var(--surface) var(--glass),transparent);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.15);backdrop-filter:blur(var(--blur)) saturate(1.15);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.35)}
.panel{padding:14px;gap:12px;border-radius:18px}
.panel h2{font-size:20px}
.row,.rec,.goal,.lib,.box{background:color-mix(in srgb,var(--surface) var(--glass2),transparent)}
.row{padding:10px;gap:12px;border-radius:14px}
input[type="search"],input[type="text"],input[type="number"],select,textarea{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.chip,.ghost,.state button,.links a,.lib-pop .pr button{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.chip[aria-pressed="true"]{background:var(--accent-soft)}
.chip{padding:5px 11px;font-size:13.5px}
.chips{gap:7px}
.f-split>*{flex:1 1 100%}
.actions{gap:8px}

/* testata compatta (senza sfocatura: altrimenti la barra fissa in basso resterebbe intrappolata qui dentro) */
.top{-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 14px;border-radius:18px;border:1px solid var(--line);gap:10px 12px}
.eyebrow{font-size:11px}
h1{font-size:clamp(26px,8vw,34px)}
.theme{width:38px;height:38px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.tools{gap:6px}
.quote{font-size:22px;margin-top:8px}

/* barra delle sezioni fissa in basso, comoda col pollice */
.top .tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:15;
  width:min(496px,calc(100% - 24px));justify-self:auto;padding:5px;border-radius:999px;border:1px solid var(--line);
  box-shadow:0 8px 26px -8px rgba(0,0,0,.45)}
.top .tabs button{flex:1;padding:10px 8px;border-radius:999px;font-size:14px;white-space:nowrap}
#toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* il velo sullo sfondo più leggero, perché il disegno si veda */
body::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 26%,transparent) 0,color-mix(in srgb,var(--bg) 8%,transparent) 55%,transparent 100%)}
:root[data-theme="dark"] body::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent) 0,color-mix(in srgb,var(--bg) 10%,transparent) 60%,transparent 100%)}
:root[data-vetro="0"] body::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 45%,transparent) 0,color-mix(in srgb,var(--bg) 20%,transparent) 100%)}

/* scaffali e dorsi: restano su un'asse, ma senza sfondo pieno dietro */
.lib{padding:12px;border-radius:16px}
.goal{border-radius:14px}
.shelf-row{margin-bottom:26px}

/* schede e pannello Personalizza: leggermente trasparenti anche loro */
#sheet,#cust{background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* su schermi grandi la colonna resta stretta al centro: ai lati si vede lo sfondo */
@media (min-width:760px){body{padding-top:28px}}

/* frase e obiettivo a tutta larghezza della testata */
.top>div:first-child{display:contents}
.top .eyebrow{grid-column:1;grid-row:1;margin:0}
.top h1{grid-column:1;grid-row:2}
.top .tools{grid-column:2;grid-row:1 / 3;align-self:start}
.top .quote{grid-column:1 / -1;display:flex;margin:0}
.top .gstrip{grid-column:1 / -1}