:root{
  --ink:#7c6b57;
  --ink2:#98856d;
  --line:rgba(151,126,93,.18);
  --shadow:0 22px 60px rgba(126,98,61,.12);

  --bg1:#faf6ef;
  --bg2:#f3ecdf;
  --bg3:#efe5d6;
  --ink-shell:#7b6853;
  --ink-strong:#6b5948;
  --muted:#ad987a;
  --line-shell:rgba(151,126,93,.12);
  --shadow-shell:0 18px 50px rgba(158,128,84,.10);
  --shadow-soft:0 10px 26px rgba(158,128,84,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;
  background:
    radial-gradient(70rem 46rem at -12% 20%, rgba(226,211,189,.62), transparent 58%),
    radial-gradient(56rem 38rem at 112% 78%, rgba(214,196,173,.40), transparent 58%),
    radial-gradient(32rem 24rem at 83% 42%, rgba(241,219,201,.34), transparent 52%),
    radial-gradient(26rem 20rem at 17% 82%, rgba(246,234,219,.28), transparent 54%),
    linear-gradient(180deg,#faf6ef 0%,#f3ecdf 52%,#efe5d6 100%);
  color:var(--ink);
  position:relative;
}
body::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(145deg, transparent 72%, rgba(255,255,255,.42) 77%, transparent 82%),
    linear-gradient(29deg, transparent 78%, rgba(255,255,255,.26) 82%, transparent 86%),
    radial-gradient(28rem 16rem at 50% 10%, rgba(255,255,255,.34), transparent 70%);
  pointer-events:none;
}
body::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(14rem 14rem at 50% 11%, rgba(255,255,255,.52), transparent 70%);
  pointer-events:none;
}

.view{
  position:relative;
  width:100%;
  min-height:100dvh;
  height:100dvh;
}
.hidden{display:none !important}

/* LOGIN */
.screen{
  position:relative;
  width:100%;
  min-height:100dvh;
  height:100dvh;
}
.stage{
  position:absolute;
  left:50%;
  top:8.2dvh;
  transform:translateX(-50%);
  width:min(56vw, 580px);
  text-align:center;
}
.logoHalo{
  width:min(15vw,146px);
  height:min(15vw,146px);
  min-width:110px;
  min-height:110px;
  margin:0 auto 1.8dvh;
  border-radius:999px;
  padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.20));
  border:1px solid rgba(168,139,104,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88), 0 20px 54px rgba(169,136,91,.14);
}
.logoMark{
  width:100%;
  height:100%;
  border-radius:999px;
  border:3px solid rgba(156,124,87,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
}
.lines{
  width:48%;
  display:flex;
  flex-direction:column;
  gap:min(1vw,10px);
}
.lines span{
  height:min(.68vw,7px);
  min-height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#d8c09a,#b99162);
  box-shadow:0 1px 0 rgba(255,255,255,.45);
}
.brand{
  font-size:clamp(42px, 5.5vw, 64px);
  line-height:1;
  letter-spacing:.24em;
  font-weight:300;
  color:#8d7559;
  margin-left:.24em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.form{
  margin-top:7.2dvh;
}
.field{
  position:relative;
  margin-bottom:1.4dvh;
}
.field input{
  width:100%;
  height:clamp(72px, 7.1dvh, 86px);
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px rgba(170,142,101,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  outline:none;
  padding:0 24px 0 72px;
  font-size:clamp(18px, 2.3vw, 24px);
  color:var(--ink2);
  font-weight:400;
}
.field input::placeholder{ color:#b29d83; }
.field input:focus{
  border-color:rgba(188,153,108,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 0 0 5px rgba(219,195,158,.18),
    0 12px 28px rgba(170,142,101,.10);
}
.icon{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  color:#b19878;
  opacity:.95;
}
.forgot{
  text-align:right;
  padding-right:.2rem;
  margin-top:.25dvh;
  margin-bottom:2.2dvh;
  font-size:clamp(14px, 1.8vw, 17px);
  color:#ac977a;
  font-weight:500;
}
.signin{
  width:78%;
  height:clamp(78px, 7.8dvh, 92px);
  border:none;
  border-radius:999px;
  cursor:pointer;
  color:#fffdf8;
  font-size:clamp(28px, 4vw, 42px);
  font-weight:400;
  letter-spacing:-.04em;
  background:linear-gradient(90deg,#dcc29c 0%, #c89f74 34%, #b98967 69%, #e6c8ac 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 18px 34px rgba(172,132,83,.22),
    0 3px 0 rgba(255,255,255,.45);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.signin:hover{
  transform:translateY(-1px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 22px 40px rgba(172,132,83,.26),
    0 3px 0 rgba(255,255,255,.48);
  filter:saturate(1.04);
}
.signin:active{transform:translateY(0) scale(1)}
.footer{
  position:absolute;
  left:50%;
  bottom:4.2dvh;
  transform:translateX(-50%);
  width:min(70vw, 520px);
  text-align:center;
  font-size:clamp(14px, 1.8vw, 18px);
  color:#b09a7c;
  font-weight:500;
}
.footer strong{
  margin-left:6px;
  color:#8f7558;
  font-weight:800;
}
.status{
  min-height:22px;
  margin-top:1dvh;
  font-size:15px;
  font-weight:600;
  color:#9e8b73;
}
.status.err{color:#b26b5f}
.success{
  display:none;
  margin-top:3dvh;
  font-size:clamp(24px,3vw,34px);
  color:#8f7558;
}
.success.show{display:block}


.linkBtn{
  border:none;
  background:none;
  color:#8f7558;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.linkBtn:hover{opacity:.82}


/* SIGNUP */
.signupScreen{
  position:relative;
  width:100%;
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
}
.signupStage{
  position:relative;
  width:min(95vw, 1240px);
  height:100dvh;
  margin:0 auto;
  display:flex;
  align-items:center;
  padding:24px 0;
}
.signupCard{
  width:100%;
  height:calc(100dvh - 48px);
  border-radius:36px;
  padding:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.22));
  border:1px solid rgba(151,126,93,.14);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.signupTop{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.signupBrand{display:flex;align-items:center;gap:16px}
.miniHalo{width:68px;height:68px;border-radius:999px;padding:6px;background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.18));border:1px solid rgba(168,139,104,.14);box-shadow:var(--shadow-soft)}
.miniMark{width:100%;height:100%;border-radius:999px;border:2.5px solid rgba(156,124,87,.72);display:flex;align-items:center;justify-content:center}
.signupTitle{font-size:clamp(28px,3.6vw,42px);line-height:1;color:#8d7559;font-weight:300;letter-spacing:.06em}
.ghostBtn{height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(151,126,93,.18);background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));color:#8d7559;font-size:15px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.signupGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;flex:1;min-height:0}
.panel{border-radius:30px;padding:18px 20px;background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));border:1px solid rgba(151,126,93,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);display:flex;flex-direction:column;min-height:0;height:100%}
.stepTabs{display:none}
.signupProgress{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px;padding:8px 2px 2px}
.progressMeta{display:grid;gap:4px}
.progressKicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b49b7b;font-weight:800}
.progressTitle{font-size:28px;line-height:1;color:#7e6852;font-weight:500}
.progressHint{font-size:13px;color:#a28c73;line-height:1.45;max-width:520px}
.progressSide{display:grid;justify-items:end;gap:10px;margin-left:auto}
.progressCount{font-size:13px;color:#a28c73;font-weight:700}
.progressDots{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.progressDot{width:12px;height:12px;border-radius:999px;background:rgba(186,160,127,.25);border:1px solid rgba(151,126,93,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.progressDot.active{background:linear-gradient(180deg,#dcc29c,#c89f74);border-color:transparent;box-shadow:0 4px 10px rgba(172,132,83,.18)}
.progressDot.done{background:rgba(194,160,116,.55)}
.stepTab{padding:10px 12px;border-radius:18px;border:1px solid rgba(151,126,93,.12);background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));text-align:left;cursor:pointer;transition:.16s ease;min-height:62px}
.stepTab small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#af997b;margin-bottom:6px}
.stepTab strong{font-size:13px;color:#8a735a;font-weight:700;line-height:1.12}
.stepTab.active{border-color:rgba(188,153,108,.34);box-shadow:0 0 0 4px rgba(219,195,158,.14), inset 0 1px 0 rgba(255,255,255,.9);background:linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.24))}
.stepPanel{display:none;flex:1;min-height:0;overflow:hidden;padding-right:0}
.stepPanel.active{display:block}
.stepHeader{display:grid;gap:4px;margin-bottom:8px}
.stepHeader h2{font-size:22px;font-weight:500;color:#806b55}
.stepHeader p{font-size:12px;color:#a08a70;line-height:1.35;max-width:680px}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formGrid .full{grid-column:1 / -1}
.signupField{display:flex;flex-direction:column;gap:8px}
.signupField label{font-size:13px;color:#8f775c;font-weight:700;letter-spacing:.01em}
.signupField input,.signupField select,.signupField textarea{width:100%;min-height:52px;border-radius:16px;border:1px solid rgba(151,126,93,.16);background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.24));box-shadow:inset 0 1px 0 rgba(255,255,255,.95);padding:12px 14px;font-size:15px;color:#7f6b56;outline:none}
.signupField textarea{min-height:64px;resize:none}
.signupField input:focus,.signupField select:focus,.signupField textarea:focus{border-color:rgba(188,153,108,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 0 0 5px rgba(219,195,158,.18)}
.compactGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.authSplit{display:grid;grid-template-columns:minmax(320px,560px) minmax(260px,1fr);gap:18px;align-items:start}
.authNarrow{max-width:560px}
.authNarrow .signupField{margin-bottom:12px}
.kitchenGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kitchenGrid .full{grid-column:1 / -1}
.kitchenGrid .full textarea{min-height:58px}
.summaryMini{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.noteCard.compact{padding:12px 14px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.18));border:1px solid rgba(151,126,93,.12);font-size:12px;color:#a18c72;line-height:1.45}
.noteCard.compact strong{display:block;color:#806b55;margin-bottom:4px;font-size:14px}
@media (max-width: 1180px){.planGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.summaryMini,.authSplit{grid-template-columns:1fr}}
.hint{font-size:12px;color:#aa9478;line-height:1.45;margin-top:4px}
.passwordCard,.summaryPanel,.finishPanel,.paymentPanel{border-radius:24px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16));border:1px solid rgba(151,126,93,.10)}
.passwordRules{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.passwordRule{display:flex;align-items:center;gap:10px;font-size:13px;color:#a18c72;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.48);border:1px solid rgba(151,126,93,.08);transition:.18s ease;min-height:46px}
.passwordRule::before{content:"";width:10px;height:10px;border-radius:999px;background:#cbb499;box-shadow:0 0 0 4px rgba(203,180,153,.18)}
.passwordRule.ok{color:#5d8a5f;border-color:rgba(108,160,113,.22);background:rgba(233,247,232,.85)}
.passwordRule.ok::before{background:#6aa56f;box-shadow:0 0 0 4px rgba(106,165,111,.16)}
.planGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch}
.planCard{position:relative;padding:14px;border-radius:22px;border:1px solid rgba(151,126,93,.12);background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28));cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;min-height:0;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;text-align:left;box-shadow:0 10px 24px rgba(158,128,84,.07), inset 0 1px 0 rgba(255,255,255,.72)}
.planCard::after{content:"";position:absolute;inset:auto -20% -35% auto;width:170px;height:170px;border-radius:999px;background:radial-gradient(circle, rgba(220,194,156,.22), transparent 70%);pointer-events:none}
.planCard:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(172,132,83,.14), inset 0 1px 0 rgba(255,255,255,.9)}
.planCard.active{border-color:rgba(188,153,108,.42);box-shadow:0 0 0 5px rgba(219,195,158,.20), 0 22px 44px rgba(172,132,83,.18), inset 0 1px 0 rgba(255,255,255,.92);background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.34))}
.planCard.active .planSelect{background:linear-gradient(90deg,#dcc29c 0%, #c89f74 34%, #b98967 69%, #e6c8ac 100%);color:#fffdf8;border-color:transparent;box-shadow:0 12px 22px rgba(172,132,83,.18)}
.planBadge{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(151,126,93,.10);font-size:11px;font-weight:800;color:#8c755c;text-transform:uppercase;letter-spacing:.08em}
.planEyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b19778;font-weight:800;margin-bottom:10px}
.planName{font-size:24px;color:#755f4b;font-weight:600;margin-bottom:4px;letter-spacing:-.03em}
.planPrice{display:flex;align-items:flex-end;gap:6px;margin-bottom:6px;color:#8d7559}
.planPrice strong{font-size:28px;line-height:.95;font-weight:500;letter-spacing:-.05em}
.planPrice span{font-size:11px;color:#a6937b;padding-bottom:3px}
.planLead{font-size:12px;color:#8f7a62;line-height:1.4;margin-bottom:10px;min-height:34px}
.planMeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.planMeta span{display:inline-flex;align-items:center;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(151,126,93,.10);font-size:11px;color:#876f58;font-weight:700}
.featureList{display:grid;gap:6px;margin-bottom:10px}
.featureList div{font-size:11px;color:#876f58;line-height:1.3;padding-left:18px;position:relative}
.featureList div::before{content:"✓";position:absolute;left:0;top:0;color:#bb946e;font-weight:800}
.planSelect{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;border-radius:999px;border:1px solid rgba(151,126,93,.14);background:rgba(255,255,255,.8);font-size:13px;font-weight:800;color:#8d7559;transition:.18s ease}
.summaryPanel{display:grid;gap:12px}
.summaryHero{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.summaryBox{border-radius:20px;padding:14px;background:linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.18));border:1px dashed rgba(151,126,93,.18)}
.summaryBox h3{font-size:15px;color:#856f57;margin-bottom:8px}
.summaryRow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid rgba(151,126,93,.08)}
.summaryRow:last-child{border-bottom:none}
.summaryRow span:first-child{font-size:13px;color:#ab967b}
.summaryRow span:last-child{font-size:14px;color:#7d6954;font-weight:600;text-align:right}
.noteCard{padding:14px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18));border:1px solid rgba(151,126,93,.10)}
.noteCard strong{display:block;color:#806b55;margin-bottom:8px;font-size:14px}
.noteCard span{font-size:13px;color:#a18c72;line-height:1.55;display:block}
.paymentGrid{display:grid;grid-template-columns:1fr 1fr 110px;gap:10px}
.paymentOptionRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.paymentChoice{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(151,126,93,.12);background:rgba(255,255,255,.62);font-size:12px;color:#846d55;font-weight:700}
.paymentChoice.active{background:linear-gradient(90deg,#dcc29c 0%, #c89f74 34%, #b98967 69%, #e6c8ac 100%);color:#fffdf8;border-color:transparent}
.paymentHint{font-size:11px;color:#a18c72;line-height:1.35;margin-top:2px}
.finishPanel{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%}
.finishMark{width:72px;height:72px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.38));border:1px solid rgba(151,126,93,.14);box-shadow:var(--shadow-soft);font-size:34px;color:#8d7559;margin-bottom:16px}
.finishPanel h2{font-size:34px;color:#7a6550;font-weight:500;margin-bottom:10px}
.finishPanel p{max-width:620px;font-size:15px;line-height:1.65;color:#9f8a70;margin-bottom:18px}
.ctaRow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}
.buttonStack{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.primaryWide,.secondaryWide{min-width:160px;height:52px;border:none;border-radius:999px;cursor:pointer;font-size:17px;font-weight:500;letter-spacing:-.02em}
.primaryWide{color:#fffdf8;background:linear-gradient(90deg,#dcc29c 0%, #c89f74 34%, #b98967 69%, #e6c8ac 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 18px 34px rgba(172,132,83,.22),0 3px 0 rgba(255,255,255,.45)}
.secondaryWide{color:#8d7559;background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16));border:1px solid rgba(151,126,93,.15)}
.signupStatus{min-height:24px;font-size:14px;font-weight:600;color:#9e8b73;max-width:420px}
.signupStatus.err{color:#b26b5f}
.signupStatus.ok{color:#7f8365}
.codePill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(151,126,93,.10);font-size:12px;color:#8b755b}
@media (max-width: 1180px){.signupGrid{grid-template-columns:1fr}.summaryHero,.paymentGrid,.formGrid,.passwordRules{grid-template-columns:1fr}.signupCard{height:auto;min-height:calc(100dvh - 48px)}.signupScreen{overflow:auto;height:auto}}
@media (max-width: 960px){.planGrid{grid-template-columns:1fr}.ctaRow{align-items:flex-start}.buttonStack{margin-left:0}.signupStage{padding:14px 0}.signupCard{padding:18px;height:auto}.signupProgress{flex-direction:column;align-items:flex-start}.progressSide{justify-items:start}.stepPanel{overflow:auto}}
@media (max-width: 640px){.signupTitle{font-size:28px}.signupTop{align-items:flex-start;flex-direction:column}}


/* SHELL */
.shellBody{
  color:var(--ink-shell);
  overflow:hidden;
  background:
    radial-gradient(62rem 40rem at 0% 18%, rgba(226,211,189,.54), transparent 58%),
    radial-gradient(48rem 34rem at 100% 12%, rgba(214,196,173,.42), transparent 56%),
    radial-gradient(32rem 22rem at 94% 44%, rgba(241,219,201,.30), transparent 54%),
    linear-gradient(180deg,var(--bg1),var(--bg2) 55%,var(--bg3));
}
.shellBody::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    linear-gradient(160deg, transparent 74%, rgba(255,255,255,.36) 79%, transparent 84%),
    linear-gradient(28deg, transparent 80%, rgba(255,255,255,.22) 84%, transparent 88%);
}
.app{
  height:100dvh;
  display:grid;
  grid-template-columns:118px 1fr;
}
.sidebar{
  min-height:0;
  overflow:hidden;
  border-right:1px solid rgba(151,126,93,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  box-shadow: inset -1px 0 0 rgba(255,255,255,.42);
  padding:14px 8px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.logoTop{
  display:flex;
  justify-content:center;
  margin-bottom:14px;
}
.shellLogoHalo{
  width:70px;height:70px;border-radius:999px;
  padding:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.18));
  border:1px solid rgba(168,139,104,.14);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.8);
}
.shellLogoMark{
  width:100%;height:100%;
  border-radius:999px;
  border:2.5px solid rgba(156,124,87,.72);
  display:flex;align-items:center;justify-content:center;
}
.logoLines{width:28px;display:flex;flex-direction:column;gap:6px}
.logoLines span{
  height:5px;border-radius:999px;
  background:linear-gradient(90deg,#d8c09a,#b99162);
}
.nav{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:2px;
}
.navItem{
  border-radius:24px;
  min-height:72px;
  padding:10px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--ink-strong);
  text-align:center;
  font-size:13px;
  line-height:1.02;
  letter-spacing:-.02em;
  background:transparent;
  border:1px solid transparent;
  transition:.18s ease;
}
.navItem.active{
  background:linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.18));
  border-color:rgba(174,145,104,.10);
  box-shadow:var(--shadow-soft);
}
.navItem:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
}
.navIcon{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  color:#c09b73;
}
.navItem svg,.util svg{width:27px;height:27px}
.main{
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100dvh;
}
.topband{
  padding:8px 14px 6px 14px;
  border-bottom:1px solid rgba(151,126,93,.08);
}
.controlBar{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  border:1px solid rgba(151,126,93,.10);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.brandName{
  font-size:20px;
  letter-spacing:.20em;
  font-weight:300;
  color:#8f7558;
  white-space:nowrap;
  margin-left:.16em;
}
.buttonRow{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.chip{
  height:36px;
  min-width:86px;
  border-radius:999px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:#8d7559;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12));
  border:1px solid rgba(151,126,93,.08);
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56);
}
.searchPill{
  width:min(30vw, 320px);
  height:36px;
  border-radius:999px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(151,126,93,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  min-width:220px;
}
.searchPill span{
  font-size:15px;
  color:#b09a7c;
}
.contentShell{
  flex:1;
  min-height:0;
  padding:14px 18px 18px 18px;
  position:relative;
}
.emptyCanvas{
  height:100%;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px dashed rgba(174,145,104,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.profileBlock{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.avatarRing{
  width:56px;height:56px;border-radius:999px;
  padding:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
  border:1px solid rgba(168,139,104,.12);
  box-shadow: var(--shadow-soft);
}
.avatar{
  width:100%;height:100%;border-radius:999px;
  background:linear-gradient(135deg,#eadbc7,#fff8f1);
  display:flex;align-items:center;justify-content:center;
  color:#c09b73;
  font-size:24px;
}
.profileName{
  font-size:13px;
  color:#7b6853;
}
.util{
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:#b49874;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}
.shellLogout{
  position:absolute;
  right:14px;
  bottom:14px;
  height:32px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(151,126,93,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
  color:#8d7559;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  cursor:pointer;
}

@media (max-width: 1200px){
  .controlBar{grid-template-columns:1fr;justify-items:start}
  .buttonRow{flex-wrap:wrap}
  .searchPill{width:100%;max-width:380px}
}
@media (max-width: 1020px){
  .app{grid-template-columns:96px 1fr}
  .planGrid{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .stage{width:min(88vw, 520px);top:8dvh}
  .form{margin-top:6.4dvh}
  .field input{padding-left:66px;height:70px}
  .icon{left:21px;width:22px;height:22px}
  .signin{width:80%;height:78px;font-size:28px}
  .footer{bottom:3.2dvh;width:88vw}
}
@media (max-height: 820px){
  .stage{ top:7dvh; }
  .form{ margin-top:5.8dvh; }
  .footer{ bottom:2.4dvh; }
}
@media (max-height: 740px){
  .stage{ top:5.8dvh; }
  .logoHalo{
    width:102px;height:102px;min-width:102px;min-height:102px;
    margin-bottom:1.2dvh;
  }
  .brand{ font-size:40px; }
  .form{ margin-top:4.8dvh; }
  .field input{ height:66px; }
  .signin{ height:72px; }
  .footer{ bottom:1.6dvh; font-size:14px; }
}

/* USER MANAGER + TOKEN + PINPAD */
.navItem.user-manager-active{
  background:linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.18));
  border-color:rgba(174,145,104,.10);
  box-shadow:var(--shadow-soft);
}
.contentShell{overflow:hidden}
.canvasView{height:100%;display:none}
.canvasView.active{display:block}
.userManagerWrap{height:100%;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);gap:14px;align-items:start}
.umPanel{min-height:0;display:flex;flex-direction:column;background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14));border:1px solid rgba(151,126,93,.10);border-radius:28px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
.umTitle{font-size:clamp(24px,2vw,30px);line-height:1;color:#776355;letter-spacing:-.04em;margin-bottom:12px;font-weight:650}
.umRoleTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.umRoleTab{border:none;cursor:pointer;border-radius:20px;min-height:74px;padding:10px;background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.24));border:1px solid rgba(151,126,93,.10);color:#7a6758}
.umRoleTab strong{display:block;font-size:clamp(18px,1.7vw,22px);line-height:1;margin-bottom:5px}
.umRoleTab span{font-size:13px;color:#9a8a7c}
.umRoleTab.active{box-shadow:0 0 0 4px rgba(212,173,125,.14);border-color:rgba(199,152,99,.26)}
.umCard{background:linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.24));border:1px solid rgba(151,126,93,.10);border-radius:24px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.umUpload{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px;border:2px dashed rgba(212,173,125,.34);background:rgba(255,255,255,.34);border-radius:20px;margin-bottom:10px}
.umAvatar,.stateIcon,.pinpadLogo{border-radius:50%;background:linear-gradient(180deg,#eadccf,#dfccb8);border:1px solid rgba(180,153,119,.14);display:flex;align-items:center;justify-content:center;overflow:hidden}
.umAvatar{width:64px;height:64px;font-size:28px;color:#8f7a63}
.umAvatar img{width:100%;height:100%;object-fit:cover}
.umUploadCopy strong{display:block;font-size:16px;color:#786557;margin-bottom:4px}
.umUploadCopy span{display:block;font-size:13px;line-height:1.32;color:#9a8a7c}
.umBtn,.umSecondary,.rowBtn,.pinBtn{border:none;border-radius:999px;cursor:pointer;font-weight:700}
.umBtn,.pinBtn{height:46px;padding:0 18px;font-size:16px;color:#fffdf9;background:linear-gradient(90deg,#d4ad7d 0%, #c79863 100%);box-shadow:0 10px 18px rgba(199,152,99,.18)}
.umSecondary{height:46px;padding:0 18px;font-size:16px;color:#8f7a63;background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.24));border:1px solid rgba(151,126,93,.10)}
.umFields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.umField.full{grid-column:1 / -1}
.umField label{display:block;margin:0 0 5px;font-size:14px;font-weight:650;color:#887460}
.umField input{width:100%;height:52px;border-radius:18px;border:1px solid rgba(151,126,93,.10);background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.36));box-shadow:inset 0 1px 0 rgba(255,255,255,.85);padding:0 16px;font-size:16px;color:#736252;outline:none}
.umCreate{width:100%;height:54px;margin-top:10px;font-size:18px}
.umMessage{margin-top:8px;font-size:13px;min-height:16px;color:#9d8d80;text-align:center}
.umMessage.ok{color:#6b8c60}
.umMessage.err{color:#b87063}
.umFilters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.umFilter{min-height:46px;padding:0 16px;border:none;border-radius:999px;cursor:pointer;background:linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.16));border:1px solid rgba(151,126,93,.08);font-size:15px;color:#8f7a63}
.umFilter.active{color:#fffdf9;background:linear-gradient(90deg,#d4ad7d 0%, #c79863 100%);border-color:transparent}
.umMeta{font-size:14px;font-weight:650;color:#9a8a7c;margin-bottom:8px}
.umListCard{flex:1;min-height:0;overflow:auto;background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.22));border:1px solid rgba(151,126,93,.10);border-radius:24px;padding:12px;display:flex;flex-direction:column;gap:8px}
.umEmpty{color:#9b8a7d;font-size:18px;line-height:1.45;padding:14px 8px}
.umRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;background:rgba(255,255,255,.42);border:1px solid rgba(151,126,93,.08);border-radius:18px;padding:10px 12px}
.umMain{display:flex;align-items:center;gap:12px;min-width:0}
.umUserAvatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,#eadccf,#dfccb8);border:1px solid rgba(151,126,93,.10);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#8f7a63;font-size:20px}
.umUserAvatar img{width:100%;height:100%;object-fit:cover}
.umName{font-size:16px;font-weight:650;color:#786557;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umEmail{font-size:13px;color:#9a8a7c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.umStatus{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:#8f7a63;white-space:nowrap}
.umDot{width:11px;height:11px;border-radius:50%;background:#86ab69;box-shadow:0 0 0 4px rgba(134,171,105,.16)}
.umRowActions{display:flex;gap:8px}
.rowBtn{width:36px;height:36px;background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.30));border:1px solid rgba(151,126,93,.10);color:#8f7a63;font-size:15px;display:flex;align-items:center;justify-content:center}
.rowBtn.selected{background:linear-gradient(90deg,#d4ad7d 0%, #c79863 100%);color:#fffdf9;border-color:transparent}
.umFoot{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(151,126,93,.14);font-size:13px;color:#9a8a7c;line-height:1.4}
.overlay{position:absolute;inset:0;background:rgba(91,72,54,.26);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;z-index:20}
.overlay.show{display:flex}
.modalCard{width:min(620px,100%);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72));border:1px solid rgba(151,126,93,.14);border-radius:28px;box-shadow:0 24px 60px rgba(124,100,78,.18);padding:20px}
.modalCard h3{margin:0 0 10px;font-size:28px;line-height:1;color:#776355}
.modalCard p{margin:0 0 14px;font-size:16px;line-height:1.4;color:#978779}
.modalActions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.linkBox{width:100%;min-height:72px;border-radius:22px;border:1px solid rgba(151,126,93,.12);background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.56));padding:16px 18px;font-size:18px;line-height:1.35;color:#735f51;word-break:break-all}
.pinpadView,.tokenView,.stateView{position:relative;width:100%;min-height:100dvh;height:100dvh;display:none;align-items:center;justify-content:center;padding:16px}
.pinpadView.show,.tokenView.show,.stateView.show{display:flex}
.routeShell{width:min(760px,100%);background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.20));border:1px solid rgba(151,126,93,.14);border-radius:34px;padding:18px;box-shadow:0 22px 60px rgba(126,98,61,.12)}
.routeCard{background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.24));border:1px solid rgba(151,126,93,.10);border-radius:28px;padding:20px}
.routeBrand{font-size:28px;letter-spacing:.20em;font-weight:300;color:#8f7558;margin:0 0 16px .18em}
.routeCard h1{font-size:44px;line-height:.96;letter-spacing:-.05em;color:#776355;margin:0 0 10px}
.routeCard p{font-size:18px;line-height:1.4;color:#9b8a7d;margin:0 0 16px}
.identityRow{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.pinpadLogo{width:88px;height:88px;font-size:34px;color:#8f7a63}
.pinInput{width:100%;height:66px;border-radius:22px;border:1px solid rgba(151,126,93,.10);background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.36));box-shadow:inset 0 1px 0 rgba(255,255,255,.85);padding:0 18px;font-size:26px;letter-spacing:.35em;text-align:center;color:#736252;outline:none;margin-bottom:12px}
.pinpadGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pinKey{height:64px;border:none;border-radius:22px;cursor:pointer;font-size:22px;font-weight:700;color:#7b6853;background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.30));border:1px solid rgba(151,126,93,.10)}
.routeMessage{margin-top:12px;min-height:20px;font-size:14px;text-align:center;color:#9d8d80}
.routeMessage.ok{color:#6b8c60}
.routeMessage.err{color:#b87063}
.passwordRulesLive{display:grid;gap:8px;margin:14px 0 4px}
.passwordRuleLive{display:flex;align-items:center;gap:10px;min-height:44px;border-radius:16px;border:1px solid rgba(151,126,93,.08);background:rgba(255,255,255,.42);padding:0 12px;font-size:14px;color:#a18c72}
.passwordRuleLive::before{content:"";width:10px;height:10px;border-radius:50%;background:#cbb499;box-shadow:0 0 0 4px rgba(203,180,153,.18)}
.passwordRuleLive.ok{color:#5d8a5f;background:rgba(233,247,232,.85);border-color:rgba(108,160,113,.22)}
.passwordRuleLive.ok::before{background:#6aa56f;box-shadow:0 0 0 4px rgba(106,165,111,.16)}
.routeAction{width:100%;margin-top:14px;height:58px;font-size:18px}
.stateCard{text-align:center}
.stateCard .stateIcon{width:84px;height:84px;font-size:36px;color:#8f7a63;margin:0 auto 14px}
@media (max-width:980px){.userManagerWrap{grid-template-columns:1fr}}
@media (max-width:760px){
  .umRoleTabs{grid-template-columns:1fr}
  .umUpload{grid-template-columns:1fr}
  .umFields{grid-template-columns:1fr}
  .umRow{grid-template-columns:1fr;gap:12px}
  .umRowActions{justify-content:flex-start}
  .identityRow{flex-direction:column;align-items:flex-start}
  .routeCard h1{font-size:34px}
  .pinpadGrid{gap:8px}
  .pinKey{height:56px;border-radius:18px}
}