@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0a0a0a;
  --surface:#141414;
  --surface-2:#1f1f1f;
  --border:#2e2e2e;
  --text:#f5f5f5;
  --text-2:#a3a3a3;
  --text-3:#6b6b6b;
  --gold:#c79a3f;
  --gold-dim:#8a6b2c;
  --success:#7fa36b;
  --danger:#c1573c;
  --info:#5d8c82;
}
*{box-sizing:border-box;}
body{
  margin:0; background:radial-gradient(ellipse 1200px 800px at 15% -10%, #1a1a1a 0%, var(--bg) 55%);
  color:var(--text); font-family:'Inter',sans-serif; font-size:14px; line-height:1.5;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Fraunces',serif; font-weight:600; margin:0; color:var(--text); }
a{ color:inherit; }

.shell{ display:flex; min-height:100vh; }

/* ---- sidebar ---- */
.sidebar{
  width:236px; flex-shrink:0; background:linear-gradient(180deg, var(--surface) 0%, #121212 100%);
  border-right:1px solid var(--border); padding:26px 14px; display:flex; flex-direction:column;
  box-shadow:2px 0 20px rgba(0,0,0,0.25);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
.sidebar::-webkit-scrollbar-thumb:hover{ background:var(--gold-dim); }
.brand{ margin-bottom:6px; padding-left:2px; }
.brand h1{ font-size:19px; letter-spacing:0.03em; }
.brand .tag{ font-size:10.5px; color:var(--gold); letter-spacing:0.1em; text-transform:uppercase; margin-top:3px; display:flex; align-items:center; gap:5px; }
.brand-logo-img{ height:12px; width:auto; display:block; }
.brand-rule{ height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin:16px 0 18px; border-radius:2px; opacity:0.7; }

.nav-group-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); margin:16px 0 6px 10px; }
.nav-item{
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:7px;
  color:var(--text-2); cursor:pointer; font-size:13px; user-select:none;
  transition:background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav-item.standalone{ margin-bottom:6px; }
.nav-item:hover{ background:var(--surface-2); color:var(--text); padding-left:13px; }
.nav-item.active{ background:linear-gradient(90deg, rgba(199,154,63,0.14), rgba(199,154,63,0.03)); color:var(--gold); font-weight:500; border-left:2px solid var(--gold); padding-left:8px; }
.nav-dot{ width:5px; height:5px; border-radius:50%; background:var(--text-3); flex-shrink:0; transition:background .15s ease, box-shadow .15s ease; }
.nav-item.active .nav-dot{ background:var(--gold); box-shadow:0 0 6px rgba(199,154,63,0.6); }

.nav-group{ margin-bottom:2px; }
.nav-group-header{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none;
  padding:10px 10px 6px 10px; margin-top:8px;
}
.nav-group-header span:first-child{
  font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); font-weight:600;
  transition:color .15s ease;
}
.nav-group-header:hover span:first-child{ color:var(--text-2); }
.nav-group-header .chevron{
  font-size:12px; color:var(--text-3); transition:transform .25s ease; display:inline-block;
}
.nav-group-header.collapsed .chevron{ transform:rotate(-90deg); }
.nav-group-items{
  display:flex; flex-direction:column; gap:1px;
  max-height:500px; overflow:hidden; opacity:1;
  transition:max-height .3s ease, opacity .2s ease;
}
.nav-group-items.collapsed{ max-height:0; opacity:0; }

/* ---- main ---- */
.main{ flex:1; padding:34px 44px; max-width:1120px; }
.view{ display:none; }
.view.active{ display:block; animation:view-in .25s ease; }
@keyframes view-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
.view-header{ margin-bottom:26px; }
.view-header h2{ font-size:27px; letter-spacing:0.01em; }
.view-header p{ color:var(--text-2); margin-top:7px; font-size:13.5px; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.card{
  background:linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 140%);
  border:1px solid var(--border); border-radius:13px; padding:19px;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:#3a3a3a; transform:translateY(-1px); }
.card h3{ font-size:13.5px; font-weight:500; font-family:'Inter',sans-serif; color:var(--text-2); margin-bottom:7px; }
.stat{ font-family:'Fraunces',serif; font-size:clamp(20px, 5vw, 29px); color:var(--gold); white-space:nowrap; overflow:visible; }

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:23px; margin-bottom:20px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15); overflow-x:auto;
}
.panel h3{ font-size:15px; margin-bottom:14px; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:0.01em; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:left; color:var(--text-3); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; font-size:11px; padding:8px 10px; border-bottom:1px solid var(--border); }
td{ padding:10px; border-bottom:1px solid var(--border); color:var(--text); }
tbody tr{ transition:background .12s ease; }
tbody tr:hover{ background:rgba(199,154,63,0.04); }
tr:last-child td{ border-bottom:none; }
.empty-row td{ color:var(--text-3); font-style:italic; }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.field{ display:flex; flex-direction:column; gap:4px; }
.panel > .field{ margin-bottom:14px; }
.field label{ font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.04em; }
input,select{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:7px; font-size:13px; font-family:'Inter',sans-serif; min-width:140px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,154,63,0.15); }

button{
  background:linear-gradient(160deg, #d6a94a, var(--gold)); color:#1a1a1a; border:none; padding:9px 16px; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif;
  transition:filter .15s ease, transform .1s ease; box-shadow:0 2px 8px rgba(199,154,63,0.15);
}
button:hover{ filter:brightness(1.08); }
button:active{ transform:translateY(1px); }
button.secondary{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); box-shadow:none; }
button.secondary:hover{ background:var(--border); filter:none; }
button.small{ padding:6px 12px; font-size:12px; }

.badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.badge.paid,.badge.complete{ background:rgba(127,163,107,0.18); color:var(--success); }
.badge.deposit_paid{ background:rgba(93,140,130,0.2); color:var(--info); }
.badge.unpaid,.badge.in_progress{ background:rgba(199,154,63,0.18); color:var(--gold); }

/* progress bar — the signature element */
.tracker{ margin-top:6px; }
.tracker-track{ height:8px; background:var(--surface-2); border-radius:6px; overflow:hidden; border:1px solid var(--border); }
.tracker-fill{ height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); border-radius:6px; transition:width .4s ease; }
.tracker-stages{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--text-3); }
.tracker-stages span.done{ color:var(--gold); }

.msg{ font-size:12.5px; padding:8px 12px; border-radius:7px; margin-top:8px; }
.msg.ok{ background:rgba(127,163,107,0.12); color:var(--success); }
.msg.err{ background:rgba(193,87,60,0.12); color:var(--danger); }

.coming-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.coming-card{ background:var(--surface); border:1px dashed var(--border); border-radius:10px; padding:14px; color:var(--text-3); font-size:12.5px; }
.coming-card b{ display:block; color:var(--text-2); font-size:13px; margin-bottom:3px; font-weight:500; }

textarea{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:9px 11px; border-radius:7px; font-size:13px; font-family:'Inter',sans-serif;
  width:100%; resize:vertical; transition:border-color .15s ease, box-shadow .15s ease;
}
textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,154,63,0.15); }

.lr-tabs{ display:flex; gap:12px; margin-bottom:20px; }
.lr-tab{
  flex:1; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
  font-family:'Fraunces',serif; font-size:17px; color:var(--text-2);
}
.lr-tab:hover{ border-color:var(--gold-dim); }
.lr-tab.active{ border-color:var(--gold); background:linear-gradient(160deg, rgba(199,154,63,0.1), var(--surface)); color:var(--gold); }
.lr-tab-sub{ display:block; font-family:'Inter',sans-serif; font-size:11.5px; color:var(--text-3); font-weight:400; margin-top:4px; }

.settings-modules-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.settings-module-toggle{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--border); font-size:13px; cursor:pointer;
  transition:border-color .15s ease;
}
.settings-module-toggle:hover{ border-color:var(--gold-dim); }
.settings-module-toggle input{ width:auto; min-width:0; margin:0; accent-color:var(--gold); }

/* modal */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:80;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px;
  max-width:520px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.5); max-height:85vh; overflow-y:auto;
}
.scratch-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.scratch-row input{ flex:1; }

/* founder resources */
.founder-panel{ border-left-width:3px; border-left-style:solid; }
.founder-panel.accent-teal{ border-left-color:var(--info); }
.founder-panel.accent-gold{ border-left-color:var(--gold); }
.founder-panel.accent-coral{ border-left-color:#c1573c; }
.founder-panel-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.founder-icon{
  width:34px; height:34px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--gold); flex-shrink:0;
}
.founder-sub{ color:var(--text-3); font-size:12.5px; margin-top:2px; }
.founder-prompt-box{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-bottom:14px;
}
.founder-prompt-box p{ margin:0; color:var(--text); font-size:13.5px; font-style:italic; }
.decision-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.decision-chip{
  display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--border); font-size:12.5px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.decision-chip:has(input:checked){ border-color:var(--gold); background:rgba(199,154,63,0.1); color:var(--gold); }
.decision-chip input{ width:auto; min-width:0; margin:0; accent-color:var(--gold); }

/* send button: glows when unsent, goes quiet once sent */
.btn-send-unsent{
  animation: send-glow 1.8s ease-in-out infinite;
}
@keyframes send-glow{
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,154,63,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(199,154,63,0); }
}
.btn-send-sent{
  background: var(--surface-2) !important; color: var(--text-3) !important;
  box-shadow: none !important; border: 1px solid var(--border);
}

/* workflow layout: action panel + results side by side instead of stacked */
.workflow-grid{ display:grid; grid-template-columns:360px 1fr; gap:20px; align-items:start; }
.workflow-grid-equal{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
@media (max-width:900px){
  .workflow-grid, .workflow-grid-equal{ grid-template-columns:1fr; }
}

/* reusable subtab system */
.subtabs{ display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.subtab{
  padding:10px 16px; background:none; border:none; border-radius:0; color:var(--text-3); font-size:13px; font-weight:500;
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; box-shadow:none; transition:color .15s ease;
}
.subtab:hover{ color:var(--text-2); filter:none; }
.subtab.active{ color:var(--gold); border-bottom-color:var(--gold); }
.subtab-panel{ display:none; }
.subtab-panel.active{ display:block; }

/* ---- mobile ---- */
.mobile-menu-btn{ display:none; }
.mobile-overlay{ display:none; }
@media (max-width: 820px){
  .mobile-menu-btn{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; left:14px; z-index:60;
    width:40px; height:40px; border-radius:9px; background:var(--surface);
    border:1px solid var(--border); color:var(--gold); font-size:18px; cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
  }
  .shell{ flex-direction:column; }
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:55; width:250px;
    transform:translateX(-100%); transition:transform .25s ease; box-shadow:4px 0 24px rgba(0,0,0,0.4);
  }
  .sidebar.mobile-open{ transform:translateX(0); }
  .mobile-overlay.mobile-open{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:54;
  }
  .main{ padding:70px 16px 30px; max-width:100%; }
  .view-header h2{ font-size:22px; }
  .row{ flex-direction:column; align-items:stretch; }
  .field{ width:100%; }
  input, select, textarea, .field input{ min-width:0; width:100%; }
  table{ display:block; overflow-x:auto; white-space:nowrap; }
  .grid{ grid-template-columns:1fr 1fr; }
  .lr-tabs{ flex-direction:column; }
}

/* booking calendar */
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day{
  aspect-ratio:1.35; border-radius:7px; border:1px solid var(--border); background:var(--surface-2);
  padding:5px; font-size:11.5px; color:var(--text-2); cursor:pointer; position:relative;
  transition:border-color .15s ease, background .15s ease;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
}
.cal-day:hover{ border-color:var(--gold-dim); }
.cal-day.empty{ background:transparent; border:none; cursor:default; }
.cal-day.today{ border-color:var(--gold); }
.cal-day.selected{ background:rgba(199,154,63,0.14); border-color:var(--gold); }
.cal-day-num{ font-weight:600; }
.cal-dots{ display:flex; gap:3px; margin-top:auto; flex-wrap:wrap; }
.cal-dot{ width:6px; height:6px; border-radius:50%; }
.cal-dot.deliverable{ background:var(--gold); }
.cal-dot.appointment{ background:var(--info); }
.cal-dot.pickup{ background:var(--success); }

/* digital business card + animated reveal */
.biz-card{
  width:300px; min-height:260px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,0.35); position:relative;
}
.biz-card-inner{ position:relative; width:100%; min-height:260px; }
.biz-reveal-a,.biz-reveal-b{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
.biz-reveal-a{ animation:biz-fade-out 0.6s ease 1.4s forwards; }
.biz-reveal-b{ opacity:0; animation:biz-fade-in 0.6s ease 1.6s forwards; }
@keyframes biz-fade-out{ from{opacity:1; transform:scale(1);} to{opacity:0; transform:scale(0.94);} }
@keyframes biz-fade-in{ from{opacity:0; transform:scale(1.05);} to{opacity:1; transform:scale(1);} }