:root{
  --bg:#ffffff; --sidebar-bg:#f7f5f0; --card:#f7f5f0; --card2:#f0ede6;
  --ink:#121212; --muted:#8c8c86; --muted2:#a8a6a0; --line:#e2e0d8;
  --maroon:#59170f; --maroon-2:#3f0f0a;
  --yellow:#f4e162; --yellow-2:#ecd23a;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{min-height:100%;}
body{background:var(--bg); color:var(--ink); font-family:var(--sans);}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;}

/* ---- sidebar ---- */
.sidebar{width:236px; box-sizing:border-box; background:var(--sidebar-bg); border-right:1px solid var(--line);
  position:fixed; top:0; left:0; height:100vh; z-index:5;
  display:flex; flex-direction:column; padding:26px 22px; overflow-y:auto;}
.brand-logo{width:100%; height:auto; display:block;}
.brand span{display:block; font-family:var(--mono); font-size:10px; color:var(--muted2); letter-spacing:.1em; margin-top:8px; font-weight:400;}
nav{margin-top:40px; display:flex; flex-direction:column; gap:4px;}
nav button{all:unset; cursor:pointer; font-family:var(--sans); font-size:14px; color:var(--muted);
  padding:10px 12px; border-radius:6px; display:flex; align-items:center; gap:10px;}
nav button .n{font-family:var(--mono); font-size:11px; color:var(--muted2);}
nav button:hover{color:var(--ink); background:var(--card2);}
nav button.active{color:var(--ink); background:var(--card2);}
nav button.active .n{color:var(--maroon);}
.sidebar-foot{margin-top:auto; padding-top:24px; font-family:var(--mono); font-size:10px; color:var(--muted2); line-height:1.6;}
.sidebar-foot b{color:var(--muted);}
.sidebar-foot .sync{margin-top:10px; font-weight:700;}
.sidebar-foot .weather{margin-top:2px;}

/* ---- main ---- */
main{margin-left:236px; padding:40px 52px 180px; max-width:1080px;}
.view{display:none;}
.view.active{display:block;}
.tracker-head{display:flex; align-items:flex-start; justify-content:space-between; gap:24px;}
.tracker-head-text{flex:1; min-width:0;}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--maroon); margin-bottom:10px;}
h1{font-size:32px; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px;}
.lede{color:var(--muted); font-size:14px; max-width:640px; line-height:1.6; margin-bottom:34px;}

.donut-wrap{flex:none;}
.donut-center{fill:var(--ink); font-family:var(--sans); font-weight:800;}
.donut-center-lbl{fill:var(--muted2); font-family:var(--mono);}

/* ---- progress ---- */
.progress-row{display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap;}
.progress-card{background:var(--card); border-radius:10px; padding:16px 18px; min-width:140px; flex:1;}
.progress-card .num{font-family:var(--mono); font-size:24px; color:var(--maroon);}
.progress-card .lbl{font-family:var(--mono); font-size:10px; color:var(--muted2); letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
.bar{height:6px; background:var(--card); border-radius:3px; overflow:hidden; margin-bottom:34px;}
.bar-fill{height:100%; background:var(--maroon); width:0%; transition:width .3s ease;}

/* ---- phase ---- */
.phase{margin-bottom:44px;}
.phase-head{display:flex; align-items:baseline; gap:10px; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.phase-head .tag{font-family:var(--mono); font-size:11px; color:var(--muted2);}
.phase-head h2{font-size:19px; font-weight:700;}
.row{display:grid; grid-template-columns:1.3fr 1.8fr 150px 140px; gap:18px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);}
.row:last-child{border-bottom:none;}
.row .name{font-weight:700; font-size:13.5px;}
.row .obj{color:var(--muted); font-size:12.5px; line-height:1.5;}
select.owner-select{width:100%; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; text-align:center;
  padding:6px 8px; border-radius:20px; cursor:pointer; color:var(--ink); background:var(--bg); border:1px solid var(--line);}
select.owner-select option{background:#fff; text-align:left;}
.row[data-owner="Adom"] select.owner-select{color:var(--maroon-2); background:var(--yellow); border-color:var(--yellow-2);}
.row[data-owner="Lucia / Adom"] select.owner-select{color:#fff; background:var(--maroon); border-color:var(--maroon);}
select.stato{width:100%; background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:7px 8px; font-family:var(--sans); font-size:12.5px; cursor:pointer;}
select.stato option{background:#fff;}
.row[data-status="Fatto"] select.stato{border-color:var(--maroon); color:#fff; background:var(--maroon);}
.row[data-status="In corso"] select.stato{border-color:var(--yellow-2); color:var(--maroon-2); background:var(--yellow);}

/* ---- moodboard ---- */
.mb-group{margin-bottom:52px;}
.mb-head{margin-bottom:16px;}
.mb-head .src{font-family:var(--mono); font-size:11px; color:var(--maroon); text-transform:uppercase; letter-spacing:.1em;}
.mb-head h2{font-size:20px; font-weight:700; margin:6px 0 6px;}
.mb-head p{color:var(--muted); font-size:13px; max-width:600px; line-height:1.6;}
.mb-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.mb-card{background:var(--card); border-radius:10px; overflow:hidden; cursor:pointer;}
.mb-card img, .mb-card video{width:100%; height:170px; object-fit:cover; display:block; background:#000; pointer-events:none;}
.mb-card .cap{padding:10px 12px;}
.mb-card .cap .t{font-size:12px; font-weight:700;}
.mb-card .cap .d{font-family:var(--mono); font-size:10px; color:var(--muted2); margin-top:2px;}
.mb-card.wide{grid-column:span 2;}

/* ---- riferimenti ---- */
.ref-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.ref-card{background:var(--card); border-radius:10px; padding:20px 22px; overflow:hidden;}
.ref-preview{margin:-20px -22px 16px; background:#0c0d0f;}
.ref-preview img{width:100%; height:180px; object-fit:cover; display:block;}
.ref-card .kicker{font-family:var(--mono); font-size:10px; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em;}
.ref-card h3{font-size:17px; font-weight:700; margin:6px 0 8px;}
.ref-card p{color:var(--muted); font-size:12.5px; line-height:1.6; margin-bottom:14px;}
.ref-card a{color:var(--maroon); font-family:var(--mono); font-size:11.5px; text-decoration:none;}
.ref-card a:hover{text-decoration:underline;}

/* ---- lightbox ---- */
.lightbox{position:fixed; inset:0; background:rgba(18,18,18,0.94); z-index:60; display:none; align-items:center; justify-content:center; padding:40px; flex-direction:column;}
.lightbox.open{display:flex;}
.lightbox img, .lightbox video{max-width:min(1100px,90vw); max-height:74vh; display:block;}
.lightbox-cap{color:#d8d6ce; font-size:13px; margin-top:16px; text-align:center; font-family:var(--mono);}
.lightbox-close{position:absolute; top:26px; right:36px; background:none; border:none; color:#fff; font-size:30px; cursor:pointer; line-height:1;}

img, video{max-width:100%;}

@media(max-width:880px){
  html{overflow-x:hidden;}
  .sidebar{position:sticky; top:0; z-index:8; width:100%; height:auto; flex-direction:row; align-items:center; padding:14px 18px; gap:14px;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-logo{width:96px; flex:none;}
  .brand span{display:none;}
  nav{flex-direction:row; margin-top:0; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex:1;}
  nav button{padding:8px 10px; font-size:13px; white-space:nowrap;}
  .sidebar-foot{display:none;}

  main{margin-left:0; padding:24px 18px 60px;}

  .tracker-head{flex-wrap:wrap; gap:10px;}
  .tracker-head-text{flex-basis:100%;}
  .donut-wrap svg{width:84px; height:84px;}

  .progress-row{gap:10px;}
  .progress-card{min-width:0; flex:1 1 calc(50% - 10px); padding:14px 14px;}
  .progress-card .num{font-size:20px;}

  .phase-head{flex-wrap:wrap;}

  .row{grid-template-columns:1fr; gap:10px; padding:16px 14px; margin-bottom:10px;
    background:var(--card); border-radius:10px; border-bottom:none;}
  .row .name{font-size:14px;}
  .row .obj{font-size:12.5px;}
  select.stato{padding:10px 10px; font-size:13px;}
  select.owner-select{justify-self:start; width:auto; min-width:140px;}

  .mb-grid, .ref-grid{grid-template-columns:1fr;}
  .mb-card.wide{grid-column:span 1;}
  .mb-card img, .mb-card video{height:200px;}
  .ref-preview img{height:200px;}

  .lightbox{padding:20px;}
  .lightbox-close{top:14px; right:16px; font-size:26px;}
}

@media(max-width:480px){
  .progress-card{flex:1 1 100%;}
  h1{font-size:26px;}
  .brand-logo{width:84px;}
}