/* ============================================================
   POSQBLink - AdvEntPOS / QuickBooks Interface
   Shared stylesheet, consolidated from the approved mock-ups in
   Docs/Mock UI. Class names are kept identical to the mock-ups so
   the markup can be compared side by side.
   ============================================================ */

:root{
  --aep-blue:        #1266c8;
  --aep-blue-dark:   #0b4a97;
  --aep-blue-light:  #2f8ae8;
  --qb-green:        #2ca01c;
  --qb-green-dark:   #1d7412;
  --qb-green-light:  #46c435;
  --teal:            #17a2a8;
  --teal-dark:       #0f7d82;
  --teal-light:      #2bc4ca;
  --amber:           #e08c14;
  --amber-dark:      #b56d06;
  --amber-light:     #f2a83a;
  --red:             #d64545;
  --red-dark:        #a92f2f;
  --red-light:       #ea6a6a;

  --ink:             #0f2338;
  --ink-soft:        #4a5f77;
  --line:            #c9d6e4;

  --bg:              #eef3f9;
  --panel:           rgba(255,255,255,.72);

  --shadow-sm: 0 1px 2px rgba(15,35,56,.08), 0 2px 6px rgba(15,35,56,.06);
  --shadow-md: 0 4px 10px rgba(15,35,56,.12), 0 10px 24px rgba(15,35,56,.10);
  --shadow-lg: 0 10px 20px rgba(15,35,56,.16), 0 24px 48px rgba(15,35,56,.16);
  --shadow-xl: 0 18px 40px rgba(15,35,56,.22), 0 40px 80px rgba(15,35,56,.22);

  --radius: 12px;
  --speed: .28s;
  --ease: cubic-bezier(.22,.75,.3,1);

  --side-w: 244px;
  --side-w-min: 68px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

/* Baseline for every <Icon>. Declared first so the more specific rules further
   down (.btn svg, .titlebar .tico svg, ...) still win on size and colour.
   Without this an icon rendered outside those contexts falls back to the SVG
   default of 300x150 with fill:black. */
svg.ic{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

/* FocusOnNavigate puts tabindex="-1" on the page heading and focuses it;
   suppress the resulting outline. */
h1:focus,[tabindex="-1"]:focus{outline:none}

body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 100% 110%, #dfe9f6 0%, rgba(223,233,246,0) 65%),
    linear-gradient(180deg,#f6f9fd 0%, var(--bg) 100%);
  min-height:100vh;
  overflow-x:hidden;
}

.map-wash{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at center, rgba(18,102,200,.14) 1.2px, transparent 1.3px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 45%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 65% 55% at 50% 45%, #000 0%, transparent 78%);
  opacity:.75;
}

/* ============================== SIDEBAR ============================== */
.sidenav{
  position:fixed; top:0; left:0; bottom:0; z-index:40;
  width:var(--side-w);
  display:flex; flex-direction:column;
  background:linear-gradient(170deg,#0e5cb8 0%, #0a4794 55%, #083c7e 100%);
  color:#fff;
  box-shadow:4px 0 22px rgba(8,45,100,.28);
  transition:width var(--speed) var(--ease), transform var(--speed) var(--ease);
  overflow:hidden;
}
.app.nav-collapsed .sidenav{width:var(--side-w-min)}

.sidenav .brand{
  display:flex; align-items:center; gap:12px;
  padding:16px 14px;
  border-bottom:1px solid rgba(255,255,255,.14);
  min-height:66px;
}
.sidenav .brand .mark{
  width:38px;height:38px;border-radius:10px;flex:none;
  background:#fff;color:var(--aep-blue-dark);
  display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.sidenav .brand .txt{min-width:0;white-space:nowrap}
.sidenav .brand .txt b{display:block;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.sidenav .brand .txt span{font-size:11px;opacity:.72;letter-spacing:.06em;text-transform:uppercase}

.sidenav .menu{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.sidenav .menu .sec{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;padding:12px 12px 6px;white-space:nowrap;
}
/* .nav-item is listed explicitly: a locked row renders as a <span>, which these
   rules would otherwise skip, leaving it with no layout at all. */
.sidenav .menu a,
.sidenav .menu button,
.sidenav .menu .nav-item{
  display:flex;align-items:center;gap:13px;
  width:100%;padding:11px 12px;
  background:transparent;border:0;border-radius:10px;
  color:#e8f1fd;font:inherit;font-size:14.5px;text-align:left;text-decoration:none;
  cursor:pointer;position:relative;white-space:nowrap;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.sidenav .menu .mi{flex:none;width:22px;height:22px;display:grid;place-items:center}
.sidenav .menu .mi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.sidenav .menu .ml{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sidenav .menu a:hover,
.sidenav .menu button:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateX(2px)}
.sidenav .menu a:focus-visible,
.sidenav .menu button:focus-visible{outline:2px solid #ffb703;outline-offset:2px}
.sidenav .menu a.active{background:rgba(255,255,255,.2);color:#fff;font-weight:600}
.sidenav .menu a.active::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:#8fe27f;
}

.sidenav .foot{padding:10px;border-top:1px solid rgba(255,255,255,.14)}
.sidenav .foot button{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:10px 12px;border:0;border-radius:10px;
  background:rgba(255,255,255,.1);color:#e8f1fd;
  font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap;
  transition:background var(--speed) var(--ease);
}
.sidenav .foot button:hover{background:rgba(255,255,255,.2)}
.sidenav .foot svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--speed) var(--ease)}
.app.nav-collapsed .sidenav .foot svg{transform:rotate(180deg)}

.app.nav-collapsed .sidenav .brand .txt,
.app.nav-collapsed .sidenav .menu .sec,
.app.nav-collapsed .sidenav .menu .ml,
.app.nav-collapsed .sidenav .foot .fl{opacity:0;width:0;overflow:hidden}
.app.nav-collapsed .sidenav .menu a,
.app.nav-collapsed .sidenav .menu button,
.app.nav-collapsed .sidenav .menu .nav-item,
.app.nav-collapsed .sidenav .foot button{justify-content:center;padding-left:10px;padding-right:10px}
.app.nav-collapsed .sidenav .brand{justify-content:center;padding-left:10px;padding-right:10px}

.app.nav-collapsed .sidenav .menu a::after,
.app.nav-collapsed .sidenav .menu button::after,
.app.nav-collapsed .sidenav .menu .nav-item::after{
  content:attr(data-menu);
  position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) scale(.9);
  background:#0f2338;color:#fff;font-size:12.5px;padding:6px 10px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--shadow-md);
  transition:opacity .18s var(--ease), transform .18s var(--ease);z-index:50;
}
.app.nav-collapsed .sidenav .menu a:hover::after,
.app.nav-collapsed .sidenav .menu button:hover::after,
.app.nav-collapsed .sidenav .menu .nav-item:hover::after{opacity:1;transform:translateY(-50%) scale(1)}

.burger{
  display:none;position:fixed;z-index:45;top:12px;left:12px;
  width:44px;height:44px;border:0;border-radius:11px;
  background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark));
  color:#fff;cursor:pointer;box-shadow:var(--shadow-md);
  place-items:center;
}
.burger svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round}
.scrim{display:none;position:fixed;inset:0;z-index:39;background:rgba(9,30,56,.45);backdrop-filter:blur(2px)}

/* ============================== SHELL ============================== */
.shell{
  /* No z-index here on purpose. A z-index would make the shell a stacking
     context, trapping the module dialog inside it and painting the sidebar
     (z-index 40) over the top of it. With z-index auto the overlay competes
     at the root level and covers the whole window, as a modal should.
     The shell still paints above .map-wash because it comes later in the DOM. */
  position:relative;
  margin-left:var(--side-w);
  transition:margin-left var(--speed) var(--ease);
  padding-bottom:48px;
}
.app.nav-collapsed .shell{margin-left:var(--side-w-min)}

.statusbar{
  background:linear-gradient(180deg,#e4f6e2,#d6efd3);
  border-bottom:1px solid #b9dfb4;
  font-size:12.5px;color:#1f4f18;
  padding:9px 22px;
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
}
.statusbar b{font-weight:700;color:#123c0d}
.statusbar .sep{color:#8fc389}
.statusbar .store{
  margin-left:auto;background:#fff;border:1px solid #b9dfb4;
  padding:4px 12px;border-radius:999px;font-weight:600;
}

.wrap{max-width:1500px;margin:0 auto;padding:0 22px}

.page-head{text-align:center;padding:36px 0 8px}
.page-head h1{
  font-size:clamp(28px,4.4vw,52px);
  font-weight:800; letter-spacing:-.02em; line-height:1.08;
  background:linear-gradient(92deg,var(--aep-blue-dark) 0%, var(--aep-blue) 42%, var(--qb-green) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-head p{margin-top:10px;color:var(--ink-soft);font-size:15px}
.head-rule{width:150px;height:4px;margin:18px auto 0;border-radius:4px;background:linear-gradient(90deg,var(--aep-blue),var(--qb-green))}

/* ============================== BOARD ============================== */
.board{
  display:grid;
  grid-template-columns:200px repeat(4,minmax(0,1fr));
  gap:0 26px;
  margin-top:34px;
  padding:26px 22px 30px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.9);
  border-radius:20px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-md);
  position:relative;
}
.rail{display:flex;flex-direction:column;justify-content:space-between;padding:56px 0 6px}
.logo{display:flex;flex-direction:column;align-items:center;gap:10px;user-select:none}
.logo .disc{
  width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:800;font-size:23px;letter-spacing:.04em;
  color:#fff;box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease);
}
.logo:hover .disc{transform:rotate(-8deg) scale(1.06)}
.logo.aep .disc{background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark))}
.logo.qb .disc{background:linear-gradient(145deg,var(--qb-green-light),var(--qb-green-dark));font-size:34px}
.logo .name{font-weight:800;font-size:19px;letter-spacing:-.01em}
.logo.aep .name{color:var(--aep-blue-dark)}
.logo.qb .name{color:var(--qb-green-dark)}
.logo .role{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}

.col{position:relative;padding:0 8px;display:flex;flex-direction:column}
.col::before{
  content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.col h2{
  text-align:center;font-size:19px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);line-height:1.25;min-height:52px;
  display:flex;align-items:center;justify-content:center;
}
.flow{display:flex;flex-direction:column;align-items:center;flex:1}
.board::after{
  content:"";position:absolute;left:24px;right:24px;top:calc(50% + 26px);height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 20px);
  opacity:.9;pointer-events:none;
}

/* ============================= BUTTONS ============================= */
.btn{
  --c1:var(--aep-blue-light); --c2:var(--aep-blue-dark); --glow:rgba(18,102,200,.45);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border:0;border-radius:var(--radius);
  background:linear-gradient(145deg,var(--c1),var(--c2));
  color:#fff;font:inherit;font-size:15px;font-weight:600;text-decoration:none;
  cursor:pointer;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.btn.green{--c1:var(--qb-green-light);--c2:var(--qb-green-dark);--glow:rgba(44,160,28,.45)}
.btn.teal{--c1:var(--teal-light);--c2:var(--teal-dark);--glow:rgba(23,162,168,.42)}
.btn.amber{--c1:var(--amber-light);--c2:var(--amber-dark);--glow:rgba(224,140,20,.42)}
.btn.red{--c1:var(--red-light);--c2:var(--red-dark);--glow:rgba(214,69,69,.42)}
.btn.ghost{background:#fff;color:var(--ink-soft);box-shadow:inset 0 0 0 1.5px var(--line),var(--shadow-sm);--glow:rgba(74,95,119,.22)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%)}
.btn.ghost::before{display:none}
.btn::after{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
  transform:skewX(-22deg);pointer-events:none;transition:left .6s var(--ease)}
.btn.ghost::after{display:none}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-lg),0 0 0 4px var(--glow)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn:focus-visible{outline:3px solid #ffb703;outline-offset:3px}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:var(--shadow-sm) !important}
.btn svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.lg{padding:16px 34px;font-size:17px}
.btn.sm{padding:10px 16px;font-size:14px;border-radius:10px}
.btn.sm svg{width:17px;height:17px}

/* full-width board button (home page flow) */
.btn.flow-btn{
  width:100%;max-width:290px;justify-content:flex-start;text-align:left;
  padding:14px 18px;font-size:15.5px;
}
.btn.flow-btn .ico{flex:none;width:26px;height:26px;display:grid;place-items:center;transition:transform var(--speed) var(--ease)}
.btn.flow-btn:hover .ico{transform:scale(1.14) rotate(-5deg)}
.btn.flow-btn .ico svg{width:24px;height:24px}
.btn.flow-btn .label{flex:1;min-width:0}

/* ============================= ARROWS ============================= */
.arrow{width:2px;height:44px;margin:10px 0;position:relative;flex:none;background:var(--aep-blue);border-radius:2px}
.arrow.dashed{background:none;border-left:2px dashed var(--aep-blue);width:0}
.arrow.green{background:var(--qb-green)}
.arrow.green.dashed{background:none;border-left-color:var(--qb-green)}
.arrow::after{
  content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:10px solid var(--aep-blue);
}
.arrow.dashed::after{left:0}
.arrow.green::after{border-top-color:var(--qb-green)}
.arrow .pulse{
  position:absolute;left:50%;top:0;width:8px;height:8px;border-radius:50%;
  transform:translateX(-50%);background:#fff;box-shadow:0 0 0 2px currentColor;
  color:var(--aep-blue);animation:travel 2.4s linear infinite;
}
.arrow.dashed .pulse{left:0}
.arrow.green .pulse{color:var(--qb-green)}
@keyframes travel{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.arrow.long{height:96px}
.arrow.short{height:34px}

.sync{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0;
  color:var(--ink-soft);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.sync .ring{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:var(--shadow-sm);border:2px solid var(--line);
  animation:spin 7s linear infinite;
}
.sync .ring svg{width:26px;height:26px;stroke:var(--aep-blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes spin{to{transform:rotate(360deg)}}

.tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0}
.tag.imp{color:var(--qb-green-dark)}
.tag.exp{color:var(--aep-blue-dark)}

.legend{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:26px;font-size:13.5px;color:var(--ink-soft)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.legend i.b{background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark))}
.legend i.g{background:linear-gradient(145deg,var(--qb-green-light),var(--qb-green-dark))}

/* ============================== MODULE PAGE ============================== */
.module{
  max-width:1240px;margin:26px auto 0;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;min-height:calc(100vh - 190px);
}
.titlebar{display:flex;align-items:center;gap:13px;padding:15px 18px;
  background:linear-gradient(160deg,#0e5cb8,#0a4794);color:#fff}
.titlebar .tico{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.titlebar .tico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.titlebar h2{flex:1;min-width:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.titlebar h2 small{display:block;font-size:11.5px;font-weight:500;opacity:.75;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}
.titlebar .close{
  width:34px;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.16);
  color:#fff;cursor:pointer;display:grid;place-items:center;text-decoration:none;
  transition:background var(--speed) var(--ease),transform var(--speed) var(--ease);
}
.titlebar .close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.titlebar .close svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}

.hero{text-align:center;padding:20px 22px 4px}
.hero h3{
  font-size:26px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(92deg,var(--aep-blue-dark),var(--aep-blue) 45%,var(--qb-green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{margin-top:6px;color:var(--ink-soft);font-size:14px}
.hero .rule{width:110px;height:3px;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--aep-blue),var(--qb-green))}

.toolbar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  padding:18px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fafcff,#f2f6fb);
}
.toolbar .grow{flex:1}
.fieldset{display:flex;flex-direction:column;gap:6px}
.fieldset > .cap{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.fieldset .rowline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.txt,.dt{
  padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font:inherit;font-size:14px;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.txt:focus,.dt:focus{outline:0;border-color:var(--aep-blue);box-shadow:0 0 0 4px rgba(18,102,200,.16)}
.txt::placeholder{color:#9fb0c3}

.pill{
  padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:border-color var(--speed) var(--ease), color var(--speed) var(--ease), background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.pill:hover{border-color:var(--aep-blue-light);color:var(--aep-blue-dark);transform:translateY(-1px)}
.pill:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.pill.on{background:#f4f9ff;border-color:var(--aep-blue);color:var(--aep-blue-dark)}

/* =============================== GRID =============================== */
.gridwrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 22px}
.gridhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 2px 0;font-size:13px;color:var(--ink-soft)}
.gridhead .badge{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;background:#eef4ff;color:var(--aep-blue-dark);border:1px solid #c2d8f5}
.gridhead .badge.g{background:#f0fbee;color:var(--qb-green-dark);border-color:#bfe6b8}
.gridhead .badge.a{background:#fff6e8;color:var(--amber-dark);border-color:#f3d9a8}
.gridhead .spacer{flex:1}
.tablescroll{
  flex:1;min-height:0;overflow:auto;
  border:1px solid var(--line);border-radius:14px;margin-top:11px;
  background:#fff;box-shadow:var(--shadow-sm);
}
.tablescroll::-webkit-scrollbar{height:12px;width:12px}
.tablescroll::-webkit-scrollbar-track{background:#f2f6fb;border-radius:12px}
.tablescroll::-webkit-scrollbar-thumb{background:#c3d3e5;border-radius:12px;border:3px solid #f2f6fb}
.tablescroll::-webkit-scrollbar-thumb:hover{background:var(--aep-blue-light)}

table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;white-space:nowrap}
thead th{
  position:sticky;top:0;z-index:3;
  background:linear-gradient(180deg,#f6f9fd,#e9f0f8);
  border-bottom:1.5px solid var(--line);
  padding:11px 13px;text-align:right;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  cursor:pointer;user-select:none;
  transition:color var(--speed) var(--ease), background var(--speed) var(--ease);
}
thead th:hover{color:var(--aep-blue-dark);background:linear-gradient(180deg,#eef5fd,#dfeaf7)}
thead th.lft{text-align:left}
thead th.ctr{text-align:center}
thead th.nosort{cursor:default}
thead th.nosort:hover{background:linear-gradient(180deg,#f6f9fd,#e9f0f8);color:var(--ink-soft)}
thead th .sortic{display:inline-block;margin-left:5px;opacity:.3;font-size:9px;transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease)}
thead th.sorted .sortic{opacity:1;color:var(--aep-blue)}
thead th.sorted.desc .sortic{transform:rotate(180deg)}
tbody td{padding:10px 13px;border-bottom:1px solid #eef3f9;text-align:right;font-variant-numeric:tabular-nums}
tbody td.lft{text-align:left}
tbody td.ctr{text-align:center}
tbody tr{transition:background var(--speed) var(--ease)}
tbody tr:nth-child(even){background:#fbfdff}
tbody tr:hover{background:#eef6ff}
tbody tr.sel{background:#e7f2ff}
tbody tr:last-child td{border-bottom:0}
tfoot td{
  position:sticky;bottom:0;z-index:2;
  background:linear-gradient(180deg,#eef4fb,#e2ebf6);
  border-top:1.5px solid var(--line);
  padding:11px 13px;text-align:right;font-weight:800;font-size:13.5px;color:var(--aep-blue-dark);
  font-variant-numeric:tabular-nums;
}
tfoot td.lft{text-align:left;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}
.money{font-weight:600}
.money.zero{color:#a9b8c8;font-weight:500}
.money.neg{color:var(--red-dark)}
.money.hero{color:var(--qb-green-dark)}

.empty{padding:52px 20px;text-align:center;color:var(--ink-soft)}
.empty svg{width:46px;height:46px;stroke:#b8c8da;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.empty b{display:block;margin-top:12px;font-size:15px;color:var(--ink)}
.empty span{display:block;margin-top:5px;font-size:13.5px}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{background:#f0fbee;color:var(--qb-green-dark)}
.chip.no{background:#f1f5f9;color:#7b8ea3}
.chip.warn{background:#fff6e8;color:var(--amber-dark)}
.chip.bad{background:#fdeeee;color:var(--red-dark)}
.chip.info{background:#eef4ff;color:var(--aep-blue-dark)}
.chip.plain::before{display:none}

/* =============================== FOOTER =============================== */
.footer{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 22px;
  border-top:1px solid var(--line);background:linear-gradient(180deg,#fafcff,#f2f6fb);margin-top:14px;
}
.footer .hint{font-size:12.5px;color:var(--ink-soft)}
.footer .spacer{flex:1}

/* =============================== TABS =============================== */
.tabs{display:flex;gap:6px;padding:10px 12px 0;background:linear-gradient(180deg,#eef4fb,#e4edf7);border-bottom:1px solid var(--line);overflow-x:auto}
.tabs > button{
  position:relative;display:flex;align-items:center;gap:9px;
  padding:12px 20px;border:0;border-radius:12px 12px 0 0;cursor:pointer;
  background:transparent;color:var(--ink-soft);font:inherit;font-size:15px;font-weight:600;white-space:nowrap;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.tabs > button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs > button:hover{background:rgba(18,102,200,.08);color:var(--aep-blue-dark)}
.tabs > button:focus-visible{outline:2px solid #ffb703;outline-offset:-2px}
.tabs > button.on{background:#fff;color:var(--aep-blue-dark);box-shadow:0 -2px 8px rgba(15,35,56,.07)}
.tabs > button.on::after{
  content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--aep-blue),var(--qb-green));
}
.tabs .count{margin-left:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(18,102,200,.12);color:var(--aep-blue-dark)}
.tabs > button.on .count{background:var(--aep-blue);color:#fff}

/* segmented control */
.seg{display:inline-flex;gap:4px;padding:5px;border-radius:12px;background:#eaf1f9;border:1px solid var(--line)}
.seg > button{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:9px;
  background:transparent;color:var(--ink-soft);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.seg > button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seg > button:hover{color:var(--aep-blue-dark)}
.seg > button.on{background:linear-gradient(145deg,var(--qb-green-light),var(--qb-green-dark));color:#fff;box-shadow:var(--shadow-sm)}
.seg > button.on.blue{background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark))}
.seg .count{padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.28)}
.seg > button:not(.on) .count{background:rgba(18,102,200,.12);color:var(--aep-blue-dark)}

/* =============================== FIELDS =============================== */
.body{padding:20px 22px;overflow:auto;flex:1;min-height:0}
.grp{margin-bottom:22px}
.grph{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.grph .gi{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--qb-green-light),var(--qb-green-dark))}
.grph .gi.blue{background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark))}
.grph .gi svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grph b{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--qb-green-dark)}
.grph b.blue{color:var(--aep-blue-dark)}
.grph .gsub{font-size:12.5px;color:var(--ink-soft)}
.grph .gline{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.field{
  display:grid;grid-template-columns:1fr minmax(230px,300px) 40px;
  gap:14px;align-items:center;padding:11px 12px;border-radius:12px;
  transition:background var(--speed) var(--ease);
}
.field:hover{background:#f5f9fe}
.field > label{font-size:14.5px;font-weight:600;text-align:right;line-height:1.35}
.field > label .hint{display:block;font-weight:500;font-size:12px;color:var(--ink-soft);margin-top:2px}
.select{position:relative}
.select select{
  width:100%;appearance:none;-webkit-appearance:none;
  padding:11px 38px 11px 13px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.select select:hover{border-color:var(--aep-blue-light)}
.select select:focus{outline:0;border-color:var(--aep-blue);box-shadow:0 0 0 4px rgba(18,102,200,.16)}
.select::after{
  content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);
}
.select.unset select{color:var(--ink-soft);border-style:dashed}
.select.set select{border-color:var(--qb-green);background:#f6fdf4}
.info{
  width:32px;height:32px;border-radius:9px;border:0;cursor:help;position:relative;
  background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark));color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.info:hover{transform:translateY(-2px) scale(1.07);box-shadow:var(--shadow-md)}
.info svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.info::after{
  content:attr(data-tip);
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) scale(.94);
  width:250px;padding:10px 13px;border-radius:10px;
  background:#0f2338;color:#fff;font-size:12.5px;font-weight:500;line-height:1.5;text-align:left;
  opacity:0;pointer-events:none;box-shadow:var(--shadow-lg);z-index:5;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.info:hover::after,.info:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}

.optdiv{
  display:flex;align-items:center;gap:10px;margin:16px 0 8px;padding:9px 13px;
  border-radius:10px;background:#fff8ec;border:1px solid #f3ddb4;
  font-size:12.5px;font-weight:700;color:var(--amber-dark);
}
.optdiv svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.optdiv span{font-weight:500;color:var(--ink-soft)}

/* check + radio */
.chk{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background var(--speed) var(--ease)}
.chk:hover{background:#f5f9fe}
.chk input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin-top:1px;border:2px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;
  transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease);
}
.chk input:checked{background:var(--qb-green);border-color:var(--qb-green)}
.chk input:checked::after{content:"";display:block;width:5px;height:10px;margin:1px auto;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.chk input:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.chk input[type=radio]{border-radius:50%}
.chk input[type=radio]:checked{background:var(--aep-blue);border-color:var(--aep-blue)}
.chk input[type=radio]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:#fff;margin:4px auto;transform:none}
.chk .ct b{display:block;font-size:14.5px;font-weight:600}
.chk .ct span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.chk.sub{margin-left:30px;border-left:2px dashed var(--line);border-radius:0 12px 12px 0}
.chk.off{opacity:.45;pointer-events:none}

/* radio card */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{
  display:flex;align-items:center;gap:13px;padding:16px;border-radius:14px;cursor:pointer;
  border:2px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);
  transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease),transform var(--speed) var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--aep-blue-light)}
.card.on{border-color:var(--aep-blue);background:#f4f9ff;box-shadow:var(--shadow-md)}
.card .ci{width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;background:#eef4ff;color:var(--aep-blue-dark)}
.card.on .ci{background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark));color:#fff}
.card .ci svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card .ct b{display:block;font-size:15.5px;font-weight:700}
.card .ct span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.card .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;margin-left:auto;display:grid;place-items:center}
.card.on .dot{border-color:var(--aep-blue)}
.card.on .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--aep-blue)}

/* dropzone */
.drop{
  /* The file input inside is position:absolute; inset:0. Without a positioned
     ancestor here it anchors to the dialog overlay instead and covers the whole
     window, swallowing every click in the dialog. */
  position:relative;
  border:2.5px dashed var(--line);border-radius:16px;background:#fbfdff;
  padding:38px 22px;text-align:center;cursor:pointer;
  transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease),transform var(--speed) var(--ease);
}
/* Belt and braces: confine the picker to the drop zone whatever the inline
   style says, so this cannot regress into covering the dialog again. */
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:hover,.drop.hot{border-color:var(--aep-blue);background:#f2f8ff;transform:translateY(-2px)}
.drop .di{
  width:64px;height:64px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark));color:#fff;box-shadow:var(--shadow-md);
}
.drop .di svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.drop b{display:block;font-size:17px;font-weight:700}
.drop span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-soft)}

/* callouts */
.callout{display:flex;gap:12px;padding:13px 16px;border-radius:12px;font-size:13.5px;line-height:1.55;margin-bottom:16px}
.callout svg{width:19px;height:19px;flex:none;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.callout.amber{background:#fff8ec;border:1px solid #f3ddb4;color:var(--amber-dark)}
.callout.blue{background:#f2f8ff;border:1px solid #c2d8f5;color:var(--aep-blue-dark)}
.callout.green{background:#f2fbf0;border:1px solid #bfe6b8;color:var(--qb-green-dark)}
.callout b{font-weight:700}
.callout .ctext{color:var(--ink-soft);font-weight:500}

.steps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:11px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);font-family:Consolas,"Courier New",monospace;font-size:13px;color:var(--aep-blue-dark)}
.steps i{color:#9fb0c3;font-style:normal}

/* summary strip */
.strip{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px 16px;border-radius:12px;background:#f5f9fe;border:1px solid #d8e6f5;font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.strip b{color:var(--ink);font-weight:800}
.strip .big{font-size:19px;font-weight:800;color:var(--aep-blue-dark);font-variant-numeric:tabular-nums}

/* ============================== TOAST ============================== */
.toast-host{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;gap:10px}
.toast{
  min-width:250px;max-width:340px;background:#0f2338;color:#fff;border-radius:12px;
  padding:13px 16px;box-shadow:var(--shadow-lg);display:flex;gap:11px;align-items:flex-start;
  animation:toastIn .32s var(--ease);border-left:4px solid var(--aep-blue-light);
}
.toast.green{border-left-color:var(--qb-green-light)}
.toast.amber{border-left-color:var(--amber-light)}
.toast.red{border-left-color:var(--red-light)}
.toast .t{font-weight:700;font-size:14px}
.toast .s{font-size:12.5px;opacity:.8;margin-top:2px}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px}
  .rail{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:70px;padding:6px 0 10px}
  .col::before{display:none}
  .col{border-top:1px solid var(--line);padding-top:14px}
  .board::after{display:none}
}
@media (max-width:900px){
  .sidenav{transform:translateX(-100%);width:var(--side-w)}
  .app.nav-open .sidenav{transform:translateX(0)}
  .app.nav-collapsed .sidenav{width:var(--side-w)}
  .app.nav-collapsed .sidenav .brand .txt,
  .app.nav-collapsed .sidenav .menu .sec,
  .app.nav-collapsed .sidenav .menu .ml,
  .app.nav-collapsed .sidenav .foot .fl{opacity:1;width:auto}
  .app.nav-collapsed .sidenav .menu a,
  .app.nav-collapsed .sidenav .menu button,
  .app.nav-collapsed .sidenav .brand{justify-content:flex-start}
  .sidenav .foot{display:none}
  .shell,.app.nav-collapsed .shell{margin-left:0}
  .burger{display:grid}
  .app.nav-open .scrim{display:block}
  .statusbar{padding-left:68px}
  .field{grid-template-columns:1fr;gap:8px}
  .field > label{text-align:left}
  .info::after{right:auto;left:0;top:calc(100% + 10px);transform:translateY(4px) scale(.96);width:230px}
  .info:hover::after,.info:focus-visible::after{transform:none}
}
@media (max-width:680px){
  .board{grid-template-columns:1fr}
  .rail{gap:34px;flex-wrap:wrap}
  .wrap{padding:0 14px}
  .btn.flow-btn{max-width:100%}
  .statusbar .store{margin-left:0}
  .toolbar{padding:14px 16px}
  .gridwrap{padding:0 16px}
  .footer{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* progress bar shown while a POS extraction runs */
.progress{height:6px;border-radius:6px;background:#e3ecf7;overflow:hidden;position:relative}
.progress > span{
  position:absolute;left:0;top:0;bottom:0;width:35%;border-radius:6px;
  background:linear-gradient(90deg,var(--aep-blue-light),var(--qb-green-light));
  animation:progressSlide 1.15s var(--ease) infinite;
}
@keyframes progressSlide{0%{left:-35%}100%{left:100%}}
/* ============================== MODAL DIALOG ==============================
   The module screens in Docs/Mock UI are dialogs over a scrim. The route is
   unchanged - only the presentation differs - so they stay deep-linkable.
   ========================================================================== */
.overlay{
  position:fixed; inset:0; z-index:55;
  background:rgba(9,30,56,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:24px;
  animation:overlayIn .18s var(--ease);
}
@keyframes overlayIn{from{opacity:0}}

.overlay .modal{
  width:min(1240px,100%);
  height:min(830px,calc(100vh - 48px));
  display:flex; flex-direction:column;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-xl);
  animation:modalIn .28s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.96)}}

/* the dialog owns the scrolling, so the page behind never scrolls with it */
.overlay .modal > .body{flex:1;min-height:0;overflow:auto}
.overlay .modal > .gridwrap{flex:1;min-height:0}
.overlay .modal > .footer{margin-top:0}
.overlay .modal > .hero{flex:none}
.overlay .modal > .toolbar{flex:none}
.overlay .modal > .tabs{flex:none}

@media (max-width:820px){
  .overlay{padding:10px}
  .overlay .modal{height:calc(100vh - 20px)}
}
/* A sub-option that is inert because its parent option is switched off. */
.opt-off{opacity:.45;pointer-events:none}
.sub-block{margin-left:30px;border-left:2px dashed var(--line);padding:6px 0 6px 14px;display:flex;flex-direction:column;gap:2px}
.card{user-select:none}
.card:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
/* ====================== SIDEBAR EXPANDABLE GROUP ======================
   "Export" is a group header rather than a link: it opens a submenu of the
   individual export screens.
   ===================================================================== */
.sidenav .menu button.group .caret{
  margin-left:auto;display:grid;place-items:center;flex:none;
  transition:transform var(--speed) var(--ease);opacity:.7;
}
.sidenav .menu button.group .caret svg{width:16px;height:16px}
.sidenav .menu button.group.open .caret{transform:rotate(180deg)}

/* a child route is active, so the group reads as current too */
.sidenav .menu button.group.active-group{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.sidenav .menu button.group.active-group::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:#8fe27f;
}

.sidenav .menu .submenu{
  display:flex;flex-direction:column;gap:3px;
  margin:3px 0 5px 14px;padding-left:8px;
  border-left:2px solid rgba(255,255,255,.2);
}
/* Tight enough that "Export Purchase Invoices" fits without truncating. */
.sidenav .menu .submenu a{font-size:12.5px;padding:9px 10px;gap:8px}
.sidenav .menu .submenu .mi{width:16px;height:16px}
.sidenav .menu .submenu .mi svg{width:15px;height:15px}
.sidenav .menu .submenu a.active::before{left:-10px}

/* collapsed to icons there is no room for a submenu; opening the group
   widens the sidebar first (see NavMenu.ToggleExport) */
.app.nav-collapsed .sidenav .menu .submenu,
.app.nav-collapsed .sidenav .menu button.group .caret{display:none}
/* ==================== SET-UP GATING (locked menu items) ====================
   A store unlocks the interface in stages, so items that are not available yet
   render inert rather than as links. See ReadinessService.
   ========================================================================== */
.sidenav .menu .nav-item.disabled,
.sidenav .menu button.group.disabled{
  opacity:.38;cursor:not-allowed;
}
.sidenav .menu .nav-item.disabled:hover,
.sidenav .menu button.group.disabled:hover{
  background:transparent;transform:none;color:#e8f1fd;
}
.sidenav .menu .caret.lock{margin-left:auto;display:grid;place-items:center;flex:none;opacity:.8}
.sidenav .menu .caret.lock svg{width:14px;height:14px}

.setup-note{
  margin:8px 10px;padding:11px 12px;border-radius:11px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  display:flex;gap:10px;align-items:flex-start;color:#e8f1fd;
}
.setup-note svg{width:17px;height:17px;flex:none;margin-top:1px;opacity:.85}
.setup-note b{display:block;font-size:12.5px;line-height:1.3}
.setup-note span{display:block;font-size:11.5px;opacity:.72;margin-top:3px;line-height:1.4}
.app.nav-collapsed .setup-note{display:none}

/* Home-page set-up banner. Most of the board is greyed out until set-up is
   finished; this says why, confirms what is already done and offers the next
   step, so a part-configured store does not read as a broken one. */
.setup-banner{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:0 0 20px;padding:16px 20px;border-radius:14px;
  background:linear-gradient(135deg,#fff6e6 0%, #fffdf8 60%);
  border:1px solid #f0d3a0;box-shadow:var(--shadow-sm);
}
.setup-banner .sb-icon{
  width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--amber-light),var(--amber-dark));color:#fff;
}
.setup-banner .sb-icon svg{width:22px;height:22px}
.setup-banner .sb-text{flex:1 1 320px;min-width:260px}
.setup-banner .sb-text > b{display:block;font-size:15px;color:var(--amber-dark);letter-spacing:-.01em}
.setup-banner .sb-text > span{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
.setup-banner .sb-text b.ok{color:var(--qb-green-dark)}

.setup-banner .sb-steps{display:flex;gap:10px;list-style:none;flex:none}
.setup-banner .sb-steps li{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ink-soft);
  padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);
  white-space:nowrap;
}
.setup-banner .sb-steps .sb-dot{
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--line);color:#fff;font-size:11px;font-weight:700;
}
.setup-banner .sb-steps li.done{border-color:#bfe6b6;background:#f3fbf1;color:var(--qb-green-dark)}
.setup-banner .sb-steps li.done .sb-dot{background:var(--qb-green)}
.setup-banner .sb-steps li.now{border-color:#f0d3a0;background:#fffaf0;color:var(--amber-dark);font-weight:600}
.setup-banner .sb-steps li.now .sb-dot{background:var(--amber)}

.setup-banner .sb-go{flex:none}

@media (max-width:900px){
  .setup-banner .sb-steps{order:3;width:100%}
  .setup-banner .sb-go{order:4;width:100%;justify-content:center}
}

/* a home-page flow button for a step that is not available yet */
.btn.flow-btn.locked{
  filter:grayscale(.85);opacity:.5;
}
.btn.flow-btn.locked:hover{
  transform:none;box-shadow:var(--shadow-sm);
}

/* ============================ STATUS BAR LINKS ============================ */
.statusbar .sb-right{margin-left:auto;display:flex;align-items:center;gap:6px 14px;white-space:nowrap}
.statusbar .sb-right .store{margin-left:0}
.statusbar .sb-form{display:contents}
.statusbar .sb-link{
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font:inherit;font-weight:600;color:var(--qb-green-dark);text-decoration:underline;text-underline-offset:3px;
}
.statusbar .sb-link:hover{color:#123c0d}
.statusbar .sb-link:focus-visible{outline:3px solid #ffb703;outline-offset:2px;border-radius:4px}

/* ============================== SIGN-IN PAGES ============================== */
.auth{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:48px 16px 24px;
}
.auth-main{position:relative;z-index:1;width:100%;max-width:440px;margin:auto 0}
.auth-foot{position:relative;z-index:1;margin-top:28px;font-size:12px;color:var(--ink-soft);letter-spacing:.04em}

.auth-card{
  background:#fff;border-radius:18px;box-shadow:var(--shadow-xl);
  border-top:5px solid var(--aep-blue);
  padding:30px 32px 26px;
}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-brand .mark{
  width:42px;height:42px;border-radius:11px;flex:none;
  background:linear-gradient(145deg,var(--aep-blue-light),var(--aep-blue-dark));color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.02em;
  box-shadow:var(--shadow-sm);
}
.auth-brand b{display:block;font-size:16px;line-height:1.2}
.auth-brand span{font-size:11px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}

.auth-card h1{font-size:24px;letter-spacing:-.01em;margin-bottom:4px}
.auth-sub{font-size:14px;color:var(--ink-soft);margin-bottom:20px;line-height:1.5}

.auth-alert{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;padding:11px 13px;
  border-radius:10px;background:#fdeeee;border:1px solid #f1c4c4;color:var(--red-dark);
  font-size:13.5px;line-height:1.45;
}
.auth-alert svg.ic{width:18px;height:18px;margin-top:1px}
.auth-alert.info{background:#eef5fd;border-color:#c5dcf5;color:var(--aep-blue-dark)}

.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field label{font-size:13px;font-weight:700;color:var(--ink)}
.auth-field input{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font:inherit;font-size:15px;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.auth-field input:hover{border-color:var(--aep-blue-light)}
.auth-field input:focus{outline:0;border-color:var(--aep-blue);box-shadow:0 0 0 4px rgba(18,102,200,.16)}
.auth-field input.invalid{border-color:var(--red);outline:0}
.auth-field .validation-message{font-size:12.5px;color:var(--red-dark)}

.auth-remember{padding:6px 2px;margin-top:-2px}
.auth-remember .ct b{font-size:13.5px;font-weight:600}
.auth-submit{width:100%;margin-top:4px}

.store-list{display:flex;flex-direction:column;gap:8px}
.store-option{border:1.5px solid var(--line);align-items:center}
.store-option:has(input:checked){border-color:var(--aep-blue);background:#f2f7fd}
.store-option .ct b{display:block;font-size:15px}
.store-option .ct span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.store-option input{margin-top:0}

.auth-alt{margin-top:16px;text-align:center}
.auth-link{
  background:none;border:0;padding:4px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--aep-blue);
  text-decoration:underline;text-underline-offset:3px;
}
.auth-link:hover{color:var(--aep-blue-dark)}
.auth-link:focus-visible{outline:3px solid #ffb703;outline-offset:2px;border-radius:4px}

@media (max-width:480px){
  .auth{padding-top:24px}
  .auth-card{padding:24px 20px 20px}
}