/* KITSCH Workspace — Home Page */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --black:#1a1a1a;
  --white:#ffffff;
  --cream:#faf6f1;
  --warm-bg:#f5f0eb;
  --peach:#f8b68f;
  --peach-light:#fde8d8;
  --peach-dark:#e8956a;
  --charcoal:#303030;
  --mid-gray:#707070;
  --light-gray:#b0b0b0;
  --border:#e5ddd5;
  --border-light:#efe9e2;
  --radius:16px;
  --radius-sm:10px;
  --transition:all .2s ease;
}

html{height:100%}
body{
  font-family:'Figtree',sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* NAV BAR */
.ws-nav{
  background:var(--black);
  padding:0 40px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
.ws-logo{display:flex;align-items:center;gap:14px}
.ws-logo img{height:36px;width:auto;mix-blend-mode:screen;filter:invert(1)}
.ws-logo-divider{width:1px;height:28px;background:rgba(255,255,255,.2)}
.ws-logo-title{
  font-family:'PT Serif',serif;
  font-size:14px;font-weight:400;font-style:italic;
  color:rgba(255,255,255,.7);letter-spacing:.3px;
}
.ws-nav-right{display:flex;align-items:center;gap:16px}
.ws-nav-link{
  color:rgba(255,255,255,.6);
  font-size:13px;font-weight:500;
  text-decoration:none;
  transition:var(--transition);
}
.ws-nav-link:hover{color:var(--white)}

/* HERO */
.ws-hero{
  padding:80px 40px 60px;
  text-align:center;
}
.ws-hero h1{
  font-family:'PT Serif',serif;
  font-size:42px;font-weight:700;
  color:var(--black);
  margin-bottom:12px;
  letter-spacing:-.5px;
}
.ws-hero p{
  font-size:17px;
  color:var(--mid-gray);
  max-width:520px;
  margin:0 auto;
  line-height:1.6;
}

/* APP GRID */
.ws-grid{
  max-width:1100px;
  margin:0 auto 80px;
  padding:0 40px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:24px;
}

/* APP CARD */
.ws-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px 28px;
  text-decoration:none;
  color:inherit;
  transition:var(--transition);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.ws-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.08);
  border-color:var(--peach);
}
.ws-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--peach);
  opacity:0;
  transition:var(--transition);
}
.ws-card:hover::before{opacity:1}

.ws-card-icon{
  width:56px;height:56px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  margin-bottom:20px;
  flex-shrink:0;
}
.ws-card-icon.scout{background:var(--peach-light)}
.ws-card-icon.inventory{background:#e0f0e8}
.ws-card-icon.campaigns{background:#e8f0fe}
.ws-card-icon.analytics{background:#e8f5ef}
.ws-card-icon.content{background:#f3e0e4}
.ws-card-icon.brand{background:#fef3e0}
.ws-card-icon.settings{background:#f0f0f0}

.ws-card h2{
  font-family:'PT Serif',serif;
  font-size:20px;font-weight:700;
  color:var(--black);
  margin-bottom:8px;
}
.ws-card p{
  font-size:14px;
  color:var(--mid-gray);
  line-height:1.55;
  flex:1;
}
.ws-card-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  font-size:12px;
  font-weight:600;
  padding:5px 12px;
  border-radius:20px;
  width:fit-content;
}
.ws-card-badge.live{background:var(--peach-light);color:var(--peach-dark)}
.ws-card-badge.status-progress{background:#dbeafe;color:#3b82f6}
.ws-card-badge.soon{background:#f0f0f0;color:var(--mid-gray)}

.ws-card-badge .dot{
  width:7px;height:7px;border-radius:50%;
}
.ws-card-badge.live .dot{background:var(--peach-dark)}
.ws-card-badge.status-progress .dot{background:#3b82f6}
.ws-card-badge.soon .dot{background:var(--light-gray)}

/* IN PROGRESS OVERLAY — locked state (default) */
.ws-card.in-progress{cursor:pointer}
.ws-card.in-progress:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--border);
}
.ws-card.in-progress::before{display:none}
.ws-card.in-progress h2,
.ws-card.in-progress p{opacity:.65}
.ws-card.in-progress .ws-card-icon{opacity:.55}

/* IN PROGRESS — unlocked state */
body.dev-unlocked .ws-card.in-progress{cursor:pointer}
body.dev-unlocked .ws-card.in-progress:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(59,130,246,.1);
  border-color:#93c5fd;
}
body.dev-unlocked .ws-card.in-progress::before{display:block;background:#3b82f6}
body.dev-unlocked .ws-card.in-progress h2,
body.dev-unlocked .ws-card.in-progress p{opacity:1}
body.dev-unlocked .ws-card.in-progress .ws-card-icon{opacity:1}

/* PASSWORD MODAL */
.auth-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(26,26,26,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:999;
  align-items:center;
  justify-content:center;
}
.auth-overlay.visible{display:flex}
.auth-modal{
  background:var(--white);
  border-radius:20px;
  padding:44px 40px 36px;
  width:380px;
  max-width:90vw;
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  text-align:center;
  position:relative;
  animation:modalIn .25s ease;
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.95) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.auth-modal-icon{
  width:56px;height:56px;
  border-radius:14px;
  background:#dbeafe;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  margin:0 auto 18px;
}
.auth-modal h3{
  font-family:'PT Serif',serif;
  font-size:22px;font-weight:700;
  color:var(--black);
  margin-bottom:6px;
}
.auth-modal p{
  font-size:14px;
  color:var(--mid-gray);
  margin-bottom:22px;
  line-height:1.5;
}
.auth-input{
  width:100%;
  padding:12px 16px;
  font-family:'Figtree',sans-serif;
  font-size:15px;
  color:var(--charcoal);
  background:var(--warm-bg);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  outline:none;
  text-align:center;
  letter-spacing:2px;
  transition:var(--transition);
}
.auth-input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.auth-input.error{
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.12);
  animation:shake .4s ease;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
.auth-btn{
  width:100%;
  padding:13px 20px;
  font-family:'Figtree',sans-serif;
  font-size:14px;font-weight:700;
  color:var(--white);
  background:#3b82f6;
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  margin-top:14px;
  transition:var(--transition);
  letter-spacing:.3px;
}
.auth-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,.3)}
.auth-btn:active{transform:translateY(0)}
.auth-error-msg{
  font-size:12px;
  color:#ef4444;
  margin-top:8px;
  min-height:18px;
  font-weight:500;
}
.auth-close{
  position:absolute;
  top:14px;right:16px;
  background:none;border:none;
  font-size:20px;color:var(--light-gray);
  cursor:pointer;
  padding:4px;
  transition:var(--transition);
}
.auth-close:hover{color:var(--charcoal)}

/* Dev mode unlock indicator in nav */
.ws-dev-badge{
  display:none;
  align-items:center;gap:6px;
  font-size:11px;font-weight:700;
  color:#3b82f6;
  background:#dbeafe;
  padding:4px 12px;
  border-radius:20px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.ws-dev-badge .dot{width:6px;height:6px;border-radius:50%;background:#3b82f6}
body.dev-unlocked .ws-dev-badge{display:inline-flex}

/* COMING SOON OVERLAY */
.ws-card.coming-soon{cursor:default}
.ws-card.coming-soon:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--border);
}
.ws-card.coming-soon::before{display:none}
.ws-card.coming-soon h2,
.ws-card.coming-soon p{opacity:.5}
.ws-card.coming-soon .ws-card-icon{opacity:.4}

/* FOOTER */
.ws-footer{
  margin-top:auto;
  padding:24px 40px;
  text-align:center;
  font-size:12px;
  color:var(--light-gray);
  border-top:1px solid var(--border-light);
}

/* RESPONSIVE */
@media(max-width:768px){
  .ws-hero{padding:48px 24px 36px}
  .ws-hero h1{font-size:30px}
  .ws-grid{padding:0 20px;gap:16px;grid-template-columns:1fr}
  .ws-nav{padding:0 20px}
}