:root {
  --green: #1f3027;
  --green-d: #283a2f;
  --green-mu: #6f9a7e;
  --green-l: #a8c4b5;
  --green-soft: #f0f5f1;
  --green-tint: #e3eee6;
  --bg: #ffffff;
  --bg-soft: #f7f7f8;
  --bg-card: #ffffff;
  --border: #ebebec;
  --border-soft: #f3f3f4;
  --txt: #0f1311;
  --txt-s: #5d5d62;
  --txt-mu: #9c9ca5;
  --accent: #6f9a7e;
  --err: #d04434;
  --err-soft: #fdf2f0;
  --warn: #b8901c;
  --warn-soft: #fdf6e3;
  --ok-soft: #ecf5ee;
  --shadow-xs: 0 1px 2px rgba(15,19,17,.04);
  --shadow-sm: 0 1px 3px rgba(15,19,17,.06), 0 1px 2px rgba(15,19,17,.03);
  --shadow-md: 0 4px 12px rgba(15,19,17,.06);
  --shadow-lg: 0 12px 28px rgba(15,19,17,.08);
  --r: 10px;
  --r-sm: 6px;
  --r-pill: 999px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:15px}

body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  color:var(--txt);
  background:var(--bg-soft);
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.005em;
}

a{color:var(--green);text-decoration:none;transition:color .15s,opacity .15s}
a:hover{opacity:.7}

/* ─── SHELL LAYOUT ─── */
body.has-shell{
  display:grid;
  grid-template-columns:248px 1fr;
  grid-template-rows:60px 1fr;
  grid-template-areas:"topbar topbar" "sidebar main";
  background:var(--bg);
}
body.has-shell .topbar{grid-area:topbar}
body.has-shell .sidebar{grid-area:sidebar}
body.has-shell .page-shell{grid-area:main;padding:2.5rem 3rem;overflow-x:auto;background:var(--bg-soft)}

/* ─── TOPBAR ─── */
.topbar{
  display:flex;
  align-items:center;
  padding:0 1.5rem;
  background:#fff;
  border-bottom:1px solid var(--border);
  height:60px;
  position:relative;
  z-index:10;
}
.topbar-admin{background:#fff;border-bottom:1px solid var(--border)}
.brand{display:flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none;gap:2px}
.brand-main{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.2rem;font-weight:400;letter-spacing:.3em;
  color:var(--txt);text-transform:uppercase;padding-left:.3em;
}
.brand-sub{
  font-family:'Manrope',sans-serif;font-weight:600;
  font-size:.46rem;letter-spacing:.34em;color:var(--txt-mu);
  text-transform:uppercase;padding-left:.34em;
}
.topbar-admin .brand-main{color:var(--txt)}
.topbar-admin .brand-sub{color:var(--green-mu)}
.v-accent{color:inherit}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.who{font-size:.82rem;color:var(--txt-s);font-weight:500}

/* ─── SIDEBAR ─── */
.sidebar{
  background:#fff;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:1rem .75rem 1.2rem;
  min-height:calc(100vh - 60px);
}
.sb-nav{display:flex;flex-direction:column;gap:.15rem;flex:1}
.sb-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .85rem;
  font-size:.88rem;color:var(--txt-s);
  border-radius:var(--r-sm);
  transition:all .12s;font-weight:500;
}
.sb-item:hover{background:var(--bg-soft);color:var(--txt);opacity:1}
.sb-item.active{background:var(--green-soft);color:var(--green);font-weight:600}
.sb-item.active svg{color:var(--green)}
.sb-item svg{color:var(--txt-mu);flex-shrink:0;width:17px;height:17px}
.sb-item.active svg{color:var(--green)}
.sb-foot{padding-top:.8rem;border-top:1px solid var(--border-soft);margin-top:1rem}
.sb-logout-form{margin:0}
.sb-logout{
  display:flex;align-items:center;gap:.7rem;width:100%;
  background:none;border:none;padding:.55rem .85rem;
  font-size:.85rem;color:var(--txt-s);
  border-radius:var(--r-sm);cursor:pointer;transition:all .12s;
  font-weight:500;
}
.sb-logout:hover{background:var(--bg-soft);color:var(--err)}
.sb-logout svg{color:var(--txt-mu);width:16px;height:16px}
.sb-logout:hover svg{color:var(--err)}

/* ─── PAGES ─── */
.page{max-width:440px;margin:0 auto;padding:6rem 1.5rem}
.page-shell{max-width:1140px;margin:0 auto}

h1{
  font-family:'Manrope',sans-serif;
  font-size:1.9rem;font-weight:700;
  line-height:1.15;margin-bottom:.4rem;
  letter-spacing:-.018em;color:var(--txt);
}
h2{
  font-family:'Manrope',sans-serif;
  font-size:1.25rem;font-weight:700;
  line-height:1.2;margin-bottom:1rem;
  letter-spacing:-.012em;color:var(--txt);
}
h3{
  font-family:'Manrope',sans-serif;
  font-size:.95rem;font-weight:600;
  color:var(--txt);margin-bottom:.5rem;letter-spacing:-.005em;
}
.sub{color:var(--txt-s);font-size:.92rem;margin-bottom:1.8rem;line-height:1.55}

/* ─── CARDS ─── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:1.6rem;border-radius:var(--r);
  box-shadow:var(--shadow-xs);
  transition:box-shadow .15s,border-color .15s;
}
.card:hover{box-shadow:var(--shadow-sm)}

/* ─── LOGIN PAGE ─── */
.login-card{
  max-width:400px;margin:5rem auto 0;
  padding:2.6rem 2.2rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-md);
}
.login-card h1{text-align:center;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}
.login-card .sub{text-align:center;margin-bottom:1.6rem;font-size:.88rem}
.login-card form{display:flex;flex-direction:column;gap:1rem}
.login-card label{
  display:flex;flex-direction:column;gap:.4rem;
  font-size:.78rem;color:var(--txt-s);font-weight:600;
  letter-spacing:0;text-transform:none;
}
.lang-switch{text-align:center;margin-top:1.4rem;font-size:.82rem;color:var(--txt-s)}
.lang-switch a{padding:0 .4rem;color:var(--txt-s)}
.lang-switch a.active{color:var(--green);font-weight:600}

/* ─── INPUTS ─── */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=file],select,textarea{
  padding:.7rem .85rem;
  border:1px solid var(--border);
  background:#fff;
  border-radius:var(--r-sm);
  font-size:.92rem;font-family:inherit;
  color:var(--txt);
  transition:border .15s,box-shadow .15s,background .15s;
  width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--green-mu);
  box-shadow:0 0 0 4px rgba(111,154,126,.13);
}
input::placeholder{color:var(--txt-mu)}
input[disabled]{background:var(--bg-soft);color:var(--txt-mu);cursor:not-allowed}
textarea{resize:vertical;min-height:80px}

/* ─── BUTTONS ─── */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--green);color:#fff;border:1px solid var(--green);
  padding:.65rem 1.15rem;
  font-size:.85rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;font-family:inherit;
  border-radius:var(--r-sm);
  transition:all .15s;text-decoration:none;
  box-shadow:var(--shadow-xs);
}
.btn-primary:hover{background:var(--green-d);border-color:var(--green-d);color:#fff;opacity:1;box-shadow:var(--shadow-sm)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

.btn-link{
  background:none;border:none;color:var(--txt-s);
  font-size:.85rem;cursor:pointer;font-family:inherit;
  text-decoration:none;padding:.55rem .8rem;font-weight:500;
  border-radius:var(--r-sm);transition:background .12s;
}
.btn-link:hover{background:var(--bg-soft);color:var(--txt)}

.btn-danger{
  background:none;border:none;color:var(--err);
  font-size:.85rem;cursor:pointer;font-family:inherit;
  padding:.55rem .8rem;font-weight:500;
  border-radius:var(--r-sm);transition:background .12s;
}
.btn-danger:hover{background:var(--err-soft);color:#9a2e22}

.btn-small{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--green);color:#fff;border:none;
  padding:.4rem .85rem;
  font-size:.78rem;font-weight:600;
  cursor:pointer;border-radius:var(--r-sm);
  font-family:inherit;text-decoration:none;
}
.btn-small:hover{background:var(--green-d);color:#fff;opacity:1}

.link-danger{color:var(--err) !important;font-weight:500}
.link-danger:hover{color:#9a2e22 !important;opacity:1}

/* ─── ALERTS ─── */
.alert{
  padding:.85rem 1.1rem;font-size:.9rem;
  margin-bottom:1.4rem;
  border-radius:var(--r-sm);
  border-left:3px solid var(--err);
  background:var(--err-soft);color:#8a2c1f;
}
.alert.success{border-left-color:var(--green-mu);background:var(--ok-soft);color:var(--green-d)}
.alert.warning{border-left-color:var(--warn);background:var(--warn-soft);color:#7a5e0c}

/* ─── PAGE HEADER ─── */
.row-between{
  display:flex;justify-content:space-between;
  align-items:center;margin-bottom:1.8rem;
  gap:1rem;flex-wrap:wrap;
}
.row-between h1,.row-between h2{margin:0}
.muted{color:var(--txt-s)}
.center{text-align:center;margin:2rem 0}

/* ─── ONBOARD HERO CARD ─── */
.onboard-cta{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:linear-gradient(135deg,#2a4435 0%,#1f3027 100%);
  padding:1.7rem 2rem;border-radius:var(--r);
  text-decoration:none;color:#fff !important;
  transition:transform .2s,box-shadow .2s;
  margin-bottom:1.8rem;
  box-shadow:var(--shadow-sm);
}
.onboard-cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  color:#fff !important;opacity:1;
}
.onboard-cta h3,.onboard-cta p{color:#fff !important;margin:0;font-family:'Manrope',sans-serif}
.onboard-cta h3{font-size:1.05rem;font-weight:700;margin-bottom:.25rem;letter-spacing:-.008em}
.onboard-cta p{font-size:.85rem;opacity:.78;font-weight:400}
.onboard-cta .arrow{font-size:1.4rem;line-height:1;opacity:.8}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.stat-card{
  display:block;text-decoration:none;color:var(--txt);
  transition:all .18s;padding:1.4rem 1.5rem;
  cursor:pointer;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--txt);opacity:1}
.stat-num{
  font-family:'Manrope',sans-serif;
  font-size:1.9rem;font-weight:700;
  color:var(--txt);line-height:1;
  margin-bottom:.4rem;letter-spacing:-.02em;
}
.stat-l{
  font-size:.78rem;color:var(--txt-s);font-weight:600;letter-spacing:-.005em;
}

/* ─── TABLES ─── */
.data-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;margin-bottom:1.5rem;
  box-shadow:var(--shadow-xs);
}
.data-table thead{background:var(--bg-soft)}
.data-table th{
  padding:.75rem 1rem;text-align:left;
  font-size:.72rem;color:var(--txt-s);
  font-weight:600;letter-spacing:-.002em;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:.9rem 1rem;
  border-top:1px solid var(--border-soft);
  font-size:.9rem;vertical-align:middle;color:var(--txt);
}
.data-table tbody tr{transition:background .12s}
.data-table tbody tr:hover{background:var(--bg-soft)}
.data-table tbody tr:first-child td{border-top:none}
.data-table a{color:var(--green);font-weight:500}
.data-table a:hover{opacity:.7}

/* ─── FORMS ─── */
.form-grid{
  display:flex;flex-direction:column;gap:1rem;
  max-width:640px;background:#fff;
  padding:2rem 1.8rem;border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.form-grid label{
  display:flex;flex-direction:column;gap:.4rem;
  font-size:.78rem;color:var(--txt-s);
  font-weight:600;letter-spacing:0;text-transform:none;
}
.form-grid h3{
  margin:.6rem 0 .3rem;font-size:.95rem;
  color:var(--txt);padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
  font-weight:700;
}
.form-grid h3:first-child{margin-top:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-actions{
  display:flex;justify-content:flex-end;gap:.6rem;
  margin-top:.6rem;align-items:center;
  padding-top:1.2rem;border-top:1px solid var(--border-soft);
}

/* ─── CREDENTIALS BOX ─── */
.cred-box{margin:1.4rem 0;border-color:var(--green-l)}
.cred-row{display:flex;align-items:center;gap:1rem;padding:.85rem 0;border-top:1px solid var(--border-soft)}
.cred-row:first-child{border-top:none;padding-top:0}
.cred-l{
  font-size:.72rem;color:var(--txt-s);
  font-weight:600;min-width:100px;
}
.cred-row code{
  font-family:'SF Mono','Menlo','Monaco',monospace;
  font-size:.92rem;color:var(--green);
  background:var(--green-soft);
  padding:.4rem .75rem;border-radius:var(--r-sm);flex:1;
}
.msg-box{
  width:100%;min-height:200px;padding:1rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-family:'SF Mono','Menlo','Monaco',monospace;
  font-size:.85rem;color:var(--txt);
  background:var(--bg-soft);line-height:1.6;
  resize:vertical;margin-bottom:.8rem;
}

/* ─── AI EXTRACT CARD ─── */
.ai-extract-card{
  background:linear-gradient(135deg,var(--green-soft) 0%,#f7fbf8 100%);
  border:1px solid var(--green-l);
  margin-bottom:1.6rem;
}
.ai-extract-card h3{margin-bottom:.3rem;color:var(--green-d)}
.ai-extract-card .btn-primary:disabled{opacity:.4;cursor:not-allowed}

/* ─── KEY-VALUE LIST ─── */
.kv{display:flex;flex-direction:column;gap:.7rem;line-height:1.55}
.kv > div{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.92rem}
.kv strong{color:var(--txt-s);font-weight:500;min-width:130px;font-size:.78rem}

/* ─── STATUS PILLS ─── */
.pill{
  display:inline-block;padding:.18rem .6rem;
  border-radius:var(--r-pill);
  font-size:.7rem;letter-spacing:0;
  font-weight:600;
}
.pill.active{background:var(--ok-soft);color:var(--green-d)}
.pill.pending{background:var(--warn-soft);color:#7a5e0c}
.pill.ended,.pill.cancelled{background:#f1f1f3;color:var(--txt-s)}

/* ─── EMPTY STATE ─── */
.empty{
  text-align:center;padding:4rem 2rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r);
  color:var(--txt-s);
  box-shadow:var(--shadow-xs);
}
.empty h3{font-size:1.05rem;font-weight:600;color:var(--txt);margin-bottom:.5rem}
.empty p{font-size:.92rem;margin-bottom:1.4rem;color:var(--txt-s)}

/* ─── MOBILE ─── */
@media (max-width:780px){
  body.has-shell{
    grid-template-columns:1fr;
    grid-template-rows:60px auto 1fr;
    grid-template-areas:"topbar" "sidebar" "main";
  }
  .sidebar{
    min-height:auto;border-right:none;
    border-bottom:1px solid var(--border);
    padding:.5rem;flex-direction:row;overflow-x:auto;
  }
  .sb-nav{flex-direction:row;gap:.1rem}
  .sb-item{padding:.5rem .7rem;font-size:.82rem}
  .sb-item span{display:none}
  .sb-foot{border-top:none;border-left:1px solid var(--border-soft);padding-left:.5rem;padding-top:0;margin-top:0;margin-left:auto}
  .sb-logout span{display:none}
  body.has-shell .page-shell{padding:1.5rem 1rem}
  .form-row{grid-template-columns:1fr}
  .data-table{font-size:.84rem}
  .data-table th,.data-table td{padding:.6rem .55rem}
  .who{display:none}
  h1{font-size:1.55rem}
}
