:root{
  --bg:#f4f0ea; --surface:#fffdf9; --surface2:#f7f3ee; --ink:#242420; --muted:#777169;
  --line:#e0d8cf; --sidebar:#1e2822; --sidebar2:#293229; --sage:#829080; --sage2:#a4aca0;
  --tan:#b88a5d; --tan2:#d2b18d; --red:#b84940; --blue:#718797; --olive:#8a9b39;
  --shadow:0 12px 35px rgba(55,45,37,.07); --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.dark{--bg:#171c18;--surface:#222a24;--surface2:#29312a;--ink:#f6f1e9;--muted:#b7b0a7;--line:#3b463d;--sidebar:#121813;--sidebar2:#202820;--shadow:0 14px 40px rgba(0,0,0,.22)}
button,input,select,textarea{font:inherit}button{cursor:pointer}
.app{min-height:100vh;display:grid;grid-template-columns:258px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(155deg,var(--sidebar),#162019 76%);color:#f6f1e8;padding:22px 18px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.07);z-index:20}
.brand{display:flex;align-items:center;gap:12px;padding:0 4px 18px}
.logo{width:54px;height:54px;border-radius:14px;border:1px solid rgba(224,205,181,.55);background:linear-gradient(145deg,#394039,#202821);display:grid;place-items:center;font-size:27px}
.brand h1{font:25px/1.0 Georgia,serif;margin:0}.brand small{font-size:10px;letter-spacing:.28em;color:#cfbea9}
.nav{display:grid;gap:5px;overflow:auto;padding-right:2px}
.nav button{border:0;background:transparent;color:#eee8de;text-align:left;padding:11px 10px;border-radius:10px;display:flex;gap:10px;align-items:center;font-weight:600}
.nav button:hover,.nav button.active{background:rgba(255,255,255,.09)}.nav .icon{width:22px;text-align:center}
.side-progress,.welcome-side{border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(255,255,255,.04);padding:15px;margin-top:16px}
.side-progress{margin-top:auto}.side-progress b{font:34px Georgia,serif}.side-progress small,.welcome-side small{color:#d4cec5}
.main{min-width:0}.dashboard-wrap{padding:0 30px 30px}
.hero{height:258px;position:relative;margin:0 -30px;background-image:linear-gradient(90deg,rgba(35,38,31,.72),rgba(35,38,31,.15) 43%,rgba(35,38,31,.05)),url('/renovation-hero.jpg');background-size:cover;background-position:center;overflow:hidden}
.hero-top{padding:16px 30px 0;display:flex;justify-content:space-between;gap:12px;position:relative;z-index:2}.project-chip{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.6);padding:12px 16px;border-radius:10px;min-width:280px;display:flex;align-items:center;justify-content:space-between;color:#20231f}.hero-tools{display:flex;gap:9px}.hero-tools button,.hero-tools select{height:42px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:rgba(255,255,255,.93);padding:0 13px;color:#1f211e}
.hero-copy{position:absolute;left:30px;top:92px;color:white;z-index:2}.hero-copy h2{font:40px Georgia,serif;margin:0 0 8px;text-shadow:0 2px 12px rgba(0,0,0,.18)}.hero-copy p{margin:0;font-size:16px}
.metrics{position:relative;z-index:3;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:-54px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:16px 15px;min-height:130px}
.metric-head{display:flex;gap:10px;align-items:center;min-width:0}
.metric-icon{width:38px;height:38px;border-radius:11px;background:var(--surface2);display:grid;place-items:center;font-size:20px;flex:0 0 38px}
.metric small{font-size:10px;letter-spacing:.10em;font-weight:800;color:var(--muted);line-height:1.25;min-width:0}
.metric strong,.metric-value{display:block;width:100%;font-size:clamp(18px,1.32vw,24px);line-height:1.08;margin-top:10px;white-space:nowrap;overflow:visible;text-overflow:clip;letter-spacing:-.035em}.metric-link{font-size:12px;color:#8b7b69;margin-top:24px;display:flex;justify-content:space-between}
.grid3{display:grid;grid-template-columns:1.15fr .9fr .9fr;gap:14px;margin-top:16px}.grid3.equal{grid-template-columns:1fr 1.1fr 1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px;min-width:0}.card h3{font-size:16px;margin:0 0 12px}.card .sub{font-size:12px;color:var(--muted);margin-top:-4px;margin-bottom:12px}
.chart-empty{height:220px;display:grid;place-items:center;color:var(--muted);font-size:12px}
.linechart{height:220px;width:100%;display:block}.legend{display:flex;gap:18px;font-size:11px;justify-content:center;margin-bottom:2px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.donut-wrap{display:flex;align-items:center;gap:20px;min-height:220px}.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--sage) 0 var(--pct),#d9d7d2 var(--pct) 100%);position:relative;display:grid;place-items:center;flex:none}.donut:before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:var(--surface)}.donut-label{position:relative;text-align:center;z-index:1}.donut-label b{font-size:21px}.donut-label small{display:block;color:var(--muted);font-size:10px}.legend-list{display:grid;gap:10px;font-size:11px;flex:1}.legend-row{display:flex;justify-content:space-between;gap:10px}
.timeline{min-height:210px;display:grid;place-items:center;text-align:center;color:var(--muted)}.timeline .btn{margin-top:10px}
.task-overview{display:flex;gap:30px;align-items:center;justify-content:center;min-height:210px}.task-ring{width:125px;height:125px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;text-align:center}.task-ring b{font-size:25px}.task-ring small{display:block;color:var(--muted)}
.alert-list{display:grid;gap:9px;font-size:12px}.alert-row{display:flex;gap:9px;align-items:flex-start}.check{color:#c9c5bd}.alert-row.warn{color:var(--red)}
.section-head{display:flex;justify-content:space-between;align-items:center}.section-head a,.linkbtn{font-size:12px;color:var(--ink);text-decoration:none;background:none;border:0}.recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.recent-card{min-height:120px}
.fab{position:fixed;right:28px;bottom:28px;width:58px;height:58px;border-radius:50%;border:0;background:var(--tan);color:white;font-size:30px;box-shadow:0 15px 30px rgba(112,82,52,.28);z-index:30}
.progress{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--tan))}
.page{padding:26px 30px}.page-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:800;color:var(--tan);text-transform:uppercase}.page-head h2{font:34px Georgia,serif;margin:2px 0}
.toolbar{display:flex;gap:8px}.toolbar select,.toolbar button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}.stack{display:grid;gap:10px}.row{display:flex;gap:10px}.row>*{flex:1}
input,select,textarea{width:100%;border:1px solid var(--line);background:#fffdfa;color:#282823;border-radius:10px;padding:11px 12px;outline:none}.dark input,.dark select,.dark textarea{background:#1d241f;color:#f5f0e8}textarea{min-height:105px;resize:vertical}
.btn{border:0;border-radius:10px;padding:11px 14px;background:var(--tan);color:white;font-weight:700}.btn.sage{background:var(--sage)}.btn.secondary{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}.btn.danger{background:var(--red)}
.tablewrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;font-size:12px}.table th{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.tiny{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:7px;padding:5px 8px}
.rooms-grid,.photos-grid,.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.room-card,.photo-card,.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.room-cover{height:128px;background:linear-gradient(135deg,#cfc4b8,#a8a191);position:relative}.room-cover:after{content:"";position:absolute;inset:14px;background:linear-gradient(135deg,rgba(255,255,255,.4),transparent);border:1px solid rgba(255,255,255,.35);border-radius:6px}.pad{padding:14px}.room-card h4,.tile h4{font:19px Georgia,serif;margin:0 0 6px}.meta{font-size:11px;color:var(--muted)}
.photo-card img{display:block;width:100%;height:190px;object-fit:cover}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--surface2);font-size:9px;letter-spacing:.09em;font-weight:800;text-transform:uppercase}.empty{padding:28px;text-align:center;border:1px dashed var(--line);border-radius:13px;color:var(--muted);background:rgba(255,255,255,.22)}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:14px}.slot{min-height:260px;border-radius:14px;border:1px dashed var(--line);background:var(--surface2);overflow:hidden;display:grid;place-items:center}.slot img{width:100%;height:100%;object-fit:cover}
.mood{columns:3 270px;column-gap:12px}.mood .photo-card{break-inside:avoid;margin-bottom:12px}
.modal{position:fixed;inset:0;background:rgba(19,23,20,.68);backdrop-filter:blur(9px);z-index:100;display:grid;place-items:center;padding:20px}.modal-card{width:min(720px,96vw);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.28);padding:28px}.modal-card h2{font:34px Georgia,serif;margin:4px 0 10px}.modal-card p{color:var(--muted);line-height:1.5}.onboard-hero{height:115px;border-radius:14px;background:url('/renovation-hero.jpg') center/cover;margin-bottom:18px;position:relative}.onboard-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,27,23,.5),transparent);border-radius:14px}
.edit-form{margin-top:12px}.room-detail-hero{height:220px;border-radius:18px;background:linear-gradient(90deg,rgba(35,38,31,.55),rgba(35,38,31,.08)),url('/renovation-hero.jpg') center/cover;color:white;padding:28px;display:flex;align-items:flex-end}.room-detail-hero h2{font:38px Georgia,serif;margin:0}
.lang-note{font-size:11px;color:var(--muted)}
@media(max-width:1180px){.app{grid-template-columns:82px 1fr}.brand>div:last-child,.nav button span:last-child,.side-progress,.welcome-side{display:none}.brand{justify-content:center}.nav button{justify-content:center}.metrics{grid-template-columns:repeat(3,1fr)}.grid3,.grid3.equal{grid-template-columns:1fr 1fr}.rooms-grid,.photos-grid,.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;padding:7px;z-index:80}.brand,.side-progress,.welcome-side{display:none}.nav{display:flex;overflow:auto}.nav button{min-width:60px;padding:10px}.main{padding-bottom:75px}.dashboard-wrap{padding:0 14px 20px}.hero{margin:0 -14px;height:300px}.hero-top{padding:12px 14px}.project-chip{min-width:0;flex:1}.hero-copy{left:16px;top:110px}.hero-copy h2{font-size:34px}.metrics{grid-template-columns:1fr 1fr;margin-top:-42px}.grid3,.grid3.equal,.recent-grid,.grid2,.rooms-grid,.photos-grid,.tiles,.beforeafter{grid-template-columns:1fr}.page{padding:18px 14px}.page-head h2{font-size:28px}.row{flex-direction:column}.hero-tools select{display:none}.mood{columns:1}.fab{bottom:88px}}



/* KPI amount visibility: never replace the currency with ellipsis */
.metric{min-width:0;overflow:visible}
.metric-value{max-width:none}
@media(max-width:1550px){
  .metric{padding:14px 12px}
  .metric-value{font-size:17px}
  .metric small{font-size:9px;letter-spacing:.08em}
  .metric-icon{width:34px;height:34px;flex-basis:34px;font-size:18px}
}
@media(max-width:1350px){
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric-value{font-size:21px}
}

/* Localized custom file chooser — does not inherit browser/OS language */
.file-picker{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;border:1px solid var(--line);background:#fffdfa;border-radius:10px;padding:6px}
.dark .file-picker{background:#1d241f}
.native-file{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.file-btn{flex:0 0 auto;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;color:var(--ink)}
.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13px}