/* The Warehouse — Espace Client · spacious + readable */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden;width:100%;max-width:100vw}
:root{
  --bg:#FBFBFD;
  --surface:#fff;
  --surface-2:#F5F5F7;
  --hairline:rgba(0,0,0,.06);
  --text:#1D1D1F;
  --text-2:#3C3C43;
  --text-3:#6E6E73;
  --text-4:#86868B;
  --gray-100:#F2F2F5;
  --gray-200:#E5E5EA;
  --gray-300:#D1D1D6;
  --brand:#1D1D1F;
  --brand-h:#000;
  --radius:14px;
  --radius-lg:18px;
  --safe-bottom:env(safe-area-inset-bottom,0);
  --safe-top:env(safe-area-inset-top,0);
  --nav-h:68px;
  --hdr-h:60px;
  --content-w:32rem;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  min-height:100vh;
  font-size:17px;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;font-size:inherit}
img,svg{max-width:100%;height:auto;display:block}
.material-icons-outlined{font-feature-settings:'liga';-webkit-font-smoothing:antialiased;user-select:none;line-height:1;flex-shrink:0}
*:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ── HEADER (top, clean single circle) ── */
.app-hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,253,.92);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--hairline);
  padding-top:var(--safe-top);
}
.app-hdr-in{
  max-width:var(--content-w);
  margin:0 auto;
  padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  min-height:var(--hdr-h);
}
.hdr-brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:16px;
  letter-spacing:-.01em;
  color:var(--text);
  min-width:0;flex:1;
}
.hdr-brand img{height:24px;width:auto;flex-shrink:0}
.hdr-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Avatar = ONE circle, not two */
.hdr-user{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  flex-shrink:0;
  overflow:hidden;
  border:none;
}
.hdr-user-avatar{
  width:100%;height:100%;
  background:transparent;
  color:inherit;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  border-radius:50%;
}
.hdr-user span:not(.material-icons-outlined){display:none}

/* HIDE the old horizontal nav — replaced by bottom nav */
.app-nav{display:none}

/* EC-TABS — discrete pill switcher just below the header (replaces bnav 2026-06-04) */
.ec-tabs{
  position:sticky;top:60px;z-index:40;
  background:rgba(251,251,253,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.ec-tabs-in{
  max-width:var(--content-w);margin:0 auto;padding:10px 18px;
  display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ec-tabs-in::-webkit-scrollbar{display:none}
.ec-tabs a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:9999px;
  font-size:13px;font-weight:600;color:var(--text-3);
  background:var(--surface);border:1px solid var(--gray-200);
  white-space:nowrap;text-decoration:none;
  transition:all .15s ease;
}
.ec-tabs a:hover{color:var(--text);border-color:var(--gray-300)}
.ec-tabs a.active{background:var(--text);color:#fff;border-color:var(--text)}
.ec-tabs a .material-icons-outlined{font-size:16px}
@media(max-width:600px){
  .ec-tabs-in{padding:8px 14px;gap:4px}
  .ec-tabs a{padding:7px 11px;font-size:12.5px}
}
/* Restore main padding-bottom since bnav is gone */
body.no-bnav main{padding-bottom:var(--tw-sp-6, 56px)}

/* ── MAIN LAYOUT ── */
main{
  max-width:var(--content-w);
  margin:0 auto;
  padding:32px 20px calc(var(--nav-h) + 48px + var(--safe-bottom));
}

/* ── PAGE HEADER ── */
.page-hdr{margin-bottom:32px}
.eyebrow{display:none}
h1{
  font-size:32px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:10px;
  color:var(--text);
}
.lead{
  font-size:17px;
  color:var(--text-3);
  line-height:1.5;
  max-width:28rem;
}

/* ── CARDS (the new core unit) ── */
.card{
  background:var(--surface);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:24px 22px;
  margin-bottom:20px;
  overflow:hidden;
}
.card h3{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:18px;
}

/* Rows inside cards */
.card-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--hairline);
  min-width:0;
}
.card-row:first-child{padding-top:0}
.card-row:last-child{border-bottom:none;padding-bottom:0}
.card-row-ico{
  width:40px;height:40px;
  border-radius:11px;
  background:var(--gray-100);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-row-ico .material-icons-outlined{font-size:20px}
.card-row-body{flex:1;min-width:0}
.card-row-title{
  font-size:16px;
  font-weight:600;
  color:var(--text);
  margin-bottom:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
}
.card-row-sub{
  font-size:14px;
  color:var(--text-3);
  word-break:break-word;
  line-height:1.4;
}

/* ── ACTION TILES (the home grid) ── */
.tiles{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.tile{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:20px 22px;
  color:var(--text);
  min-height:80px;
  transition:border-color .15s ease;
  min-width:0;
}
.tile-ico{
  width:46px;height:46px;
  border-radius:13px;
  background:var(--gray-100);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tile-ico .material-icons-outlined{font-size:24px}
.tile-body{flex:1;min-width:0}
.tile-title{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:3px;
}
.tile-sub{
  font-size:14px;
  color:var(--text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tile-arrow{color:var(--text-4);flex-shrink:0}
.tile-arrow .material-icons-outlined{font-size:22px}
@media(hover:hover){.tile:hover{border-color:var(--text-3)}}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 22px;
  border-radius:9999px;
  font-size:16px;font-weight:600;
  cursor:pointer;
  border:1px solid;
  min-height:52px;
  font-family:inherit;
  touch-action:manipulation;
  width:100%;
  line-height:1;
  letter-spacing:-.005em;
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--text)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--gray-200)}
.btn .material-icons-outlined{font-size:20px}
.btn:active{opacity:.85}
@media(hover:hover){
  .btn-primary:hover{background:var(--brand-h)}
  .btn-secondary:hover{background:var(--text);color:#fff}
  .btn-ghost:hover{background:var(--gray-100)}
}

/* ── FORM ── */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{
  font-size:13px;
  font-weight:600;
  color:var(--text-3);
}
.field input,.field select,.field textarea{
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--gray-200);
  border-radius:12px;
  font-family:inherit;
  font-size:16px;
  color:var(--text);
  min-height:52px;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  line-height:1.3;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--brand);
}
.field input:disabled{background:var(--surface-2);color:var(--text-3)}

/* ── BOTTOM NAV (bigger touch targets, readable text) ── */
.bnav{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-top:1px solid var(--hairline);
  padding-bottom:var(--safe-bottom);
}
.bnav-in{
  max-width:var(--content-w);
  margin:0 auto;
  display:flex;
  align-items:stretch;
  height:var(--nav-h);
}
.bnav a{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:4px;
  color:var(--text-4);
  font-size:12px;font-weight:600;
  min-height:var(--nav-h);
  text-decoration:none;
  letter-spacing:-.005em;
}
.bnav a .material-icons-outlined{font-size:24px}
.bnav a.active{color:var(--text)}
.bnav a.active .material-icons-outlined{color:var(--text)}

/* ── EMPTY STATES ── */
.empty{
  background:var(--surface);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:48px 24px;
  text-align:center;
  margin-bottom:20px;
}
.empty .material-icons-outlined{
  font-size:40px;
  color:var(--text-4);
  margin-bottom:14px;
}
.empty h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
  text-transform:none;
  letter-spacing:-.01em;
}
.empty p{
  font-size:15px;
  color:var(--text-3);
  max-width:320px;
  margin:0 auto 22px;
  line-height:1.5;
}

/* ── TOAST ── */
.tw-toast-container{
  position:fixed;
  bottom:calc(var(--nav-h) + 16px + var(--safe-bottom));
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;flex-direction:column;
  gap:8px;
  pointer-events:none;
  width:100%;
  max-width:90vw;
  padding:0 16px;
}
.tw-toast{
  background:var(--text);
  color:#fff;
  padding:14px 20px;
  border-radius:9999px;
  font-size:14px;font-weight:600;
  box-shadow:0 12px 32px rgba(15,23,42,.22);
  display:flex;align-items:center;justify-content:center;gap:8px;
  pointer-events:auto;
  animation:tw-toast-in .25s cubic-bezier(.16,1,.3,1);
}
.tw-toast.fade{animation:tw-toast-out .3s ease forwards}
.tw-toast .material-icons-outlined{font-size:18px}
@keyframes tw-toast-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tw-toast-out{to{transform:translateY(12px);opacity:0}}

/* ── CONFIRM DIALOG ── */
.tw-modal-bg{
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:9998;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.tw-modal-box{
  background:var(--surface);
  border-radius:20px;
  max-width:400px;width:100%;
  padding:28px 24px;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.tw-modal-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:10px;
  color:var(--text);
  letter-spacing:-.015em;
}
.tw-modal-msg{
  font-size:15px;
  color:var(--text-2);
  line-height:1.5;
  margin-bottom:22px;
}
.tw-modal-actions{
  display:flex;
  gap:10px;
  flex-direction:column-reverse;
}
.tw-modal-actions .btn{width:100%}

/* ── NOTICE ── */
.notice{
  font-size:14px;
  padding:16px 18px;
  border-radius:12px;
  margin-top:14px;
  border:1px solid var(--gray-200);
  background:var(--surface-2);
  color:var(--text-2);
  line-height:1.5;
}

/* ── SKELETON loading state ── */
.skel{
  background:linear-gradient(90deg,var(--gray-100) 0%,var(--gray-200) 50%,var(--gray-100) 100%);
  background-size:200% 100%;
  animation:skel-pulse 1.4s ease-in-out infinite;
  border-radius:6px;
  color:transparent;
}
@keyframes skel-pulse{0%,100%{background-position:0% 0%}50%{background-position:-200% 0%}}