:root{
  --bg:#f6f4f3;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --border:#e8e1df;
  --text:#191919;
  --text-dim:#6b6462;
  --text-faint:#9c9391;
  --accent:#ed5a2f;
  --accent-dark:#c8481f;
  --accent-soft:#fddfdd;
  --ink:#191919;
  --header-bg:#ed5a2f;
  --good:#12b76a;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(25,25,25,.06);
  --shadow-md:0 4px 16px rgba(25,25,25,.08);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100vh;
}
img{max-width:100%;display:block;}
button{font:inherit;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  background:var(--header-bg);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{height:26px; width:auto; max-width:200px;}
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:13px; color:rgba(255,255,255,.85);
}
.breadcrumb button{
  background:none; border:none; color:rgba(255,255,255,.85); cursor:pointer;
  padding:4px 8px; border-radius:6px; font-size:13px; font-weight:600;
}
.breadcrumb button:hover{background:rgba(255,255,255,.15); color:#fff;}
.breadcrumb .crumb-current{color:#fff; font-weight:700; padding:4px 8px;}
.breadcrumb .sep{color:rgba(255,255,255,.5);}

/* ---------- App layout ---------- */
.app{
  max-width:980px;
  margin:0 auto;
  padding:28px 20px 80px;
}

/* ---------- Picker screens (City / Company / Project / Month) ---------- */
.picker-head{margin-bottom:20px;}
.picker-head h1{font-size:22px; margin:0 0 4px;}
.picker-head p{margin:0; color:var(--text-dim); font-size:14px;}
.picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
.picker-card{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  text-align:left;
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.picker-card:hover{border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.picker-card .card-icon{font-size:22px;}
.picker-card .card-logo{height:32px; width:auto; max-width:100%; object-fit:contain; align-self:flex-start;}
.picker-card .card-label{font-weight:600; font-size:15px; color:var(--text);}
.picker-card .card-sub{font-size:12px; color:var(--text-faint);}
.empty-state{
  padding:40px 20px; text-align:center; color:var(--text-dim);
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-md);
}
.loading-state{padding:40px 20px; text-align:center; color:var(--text-dim);}
.error-state{
  padding:16px 18px; background:#fef3f2; border:1px solid #fecdca; color:#b42318;
  border-radius:var(--radius-md); font-size:14px;
}

/* ---------- Company login gate ---------- */
.login-wrap{
  display:flex; justify-content:center;
  padding:60px 20px;
}
.login-form{
  display:flex; flex-direction:column; gap:14px;
  width:100%; max-width:340px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  text-align:center;
}
.login-form h1{font-size:20px; margin:0;}
.login-hint{margin:0; color:var(--text-dim); font-size:13.5px; line-height:1.5;}
.login-form input{
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:16px;
  letter-spacing:.03em;
  text-align:center;
  background:var(--surface-2);
  color:var(--text);
}
.login-form input:hover{border-color:var(--ink);}
.login-form input:focus{outline:none; border-color:var(--ink); background:var(--surface);}
.login-error{color:#b42318; font-size:13px; min-height:16px;}

/* ---------- Project header ---------- */
.project-header{
  display:flex; gap:18px; align-items:center;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  margin-bottom:18px;
  flex-wrap:wrap;
}
.project-logo{
  width:64px; height:64px; border-radius:14px; overflow:hidden; flex-shrink:0;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:22px;
}
.project-logo img{width:100%; height:100%; object-fit:cover;}
.project-meta{flex:1; min-width:200px;}
.project-meta .project-path{
  font-size:12px; color:var(--text-faint); margin:0 0 4px; text-transform:uppercase; letter-spacing:.04em;
}
.project-meta h1{font-size:22px; margin:0 0 6px;}
.project-meta .project-bio{margin:0; color:var(--text-dim); font-size:14px; line-height:1.55; max-width:640px;}

/* ---------- Contact form ---------- */
.contact-form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 22px;
  margin-bottom:18px;
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
}
.contact-form .field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:180px;}
.contact-form label{font-size:12px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em;}
.contact-form input{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:15px;
  background:var(--surface-2);
  color:var(--text);
}
.contact-form input:hover{border-color:var(--ink);}
.contact-form input:focus,
.contact-form input:active{outline:none; border-color:var(--ink); background:var(--surface);}
.contact-form .submit-btn{
  padding:11px 22px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
}
.contact-form .submit-btn:hover{background:var(--accent-dark);}
.contact-hint{font-size:12px; color:var(--text-faint); width:100%; margin-top:-4px;}

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:4px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
  overflow-x:auto;
}
.tab-btn{
  padding:11px 18px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  font-weight:600;
  font-size:14px;
  color:var(--text-dim);
  cursor:pointer;
  white-space:nowrap;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent); border-bottom-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Posters ---------- */
.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
.poster-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.poster-canvas-wrap{
  background:
    linear-gradient(45deg, #eef0f3 25%, transparent 25%),
    linear-gradient(-45deg, #eef0f3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef0f3 75%),
    linear-gradient(-45deg, transparent 75%, #eef0f3 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0px;
  background-color:#f7f8fa;
}
.poster-canvas-wrap canvas{width:100%; height:auto; display:block;}
.poster-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  gap:8px;
}
.poster-card-foot .poster-name{font-size:12px; color:var(--text-faint);}
.download-btn{
  padding:7px 14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:13px; font-weight:600;
  cursor:pointer;
  color:var(--text);
}
.download-btn:hover{border-color:var(--accent); color:var(--accent);}
.download-btn:disabled{opacity:.6; cursor:wait;}

/* ---------- Videos ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
.video-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.video-frame-wrap{
  position:relative;
  background:#000;
  container-type:inline-size;
}
.video-frame-wrap video{width:100%; height:auto; display:block;}
.video-overlay-text{
  position:absolute;
  font-family:var(--font);
  font-weight:600;
  line-height:1.15;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.4);
  pointer-events:none;
  transition:opacity .15s linear;
}

/* ---------- Marketing text ---------- */
.marketing-list{display:flex; flex-direction:column; gap:14px;}
.marketing-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 20px;
}
.marketing-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px;}
.marketing-card-head .label{font-size:12px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em;}
.copy-btn{
  padding:6px 13px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  border:none;
  border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600;
  cursor:pointer;
}
.copy-btn:hover{background:#fbcac6;}
.marketing-text{
  white-space:pre-wrap;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  margin:0;
  font-family:var(--font);
}
.ph-highlight{background:var(--accent-soft); color:var(--accent-dark); border-radius:3px; padding:0 2px;}

/* ---------- Notifications ---------- */
.notif-list{display:flex; flex-direction:column; gap:12px;}
.notif-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-md);
  padding:14px 18px;
}
.notif-date{font-size:11.5px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;}
.notif-headline{font-size:15px; font-weight:700; margin:0 0 6px;}
.notif-content{font-size:13.5px; color:var(--text-dim); margin:0; line-height:1.55; white-space:pre-wrap;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:22px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--text); color:#fff;
  font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:999px;
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:600px){
  .app{padding:18px 14px 70px;}
  .project-header{padding:16px;}
  .contact-form{padding:14px 16px;}
  .contact-form .submit-btn{width:100%;}
}