:root{
  --bg:#070b08;
  --bg-2:#0a100c;
  --panel:#0e1711;
  --panel-2:#111d14;
  --panel-3:#152219;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(116,255,157,.30);
  --text:#effff3;
  --muted:rgba(239,255,243,.55);
  --dim:rgba(239,255,243,.34);
  --green:#74ff9d;
  --green-soft:rgba(116,255,157,.13);
  --purple:#b58cff;
  --purple-soft:rgba(181,140,255,.14);
  --yellow:#ffd76a;
  --danger:#ff7272;
  --shadow:0 22px 60px rgba(0,0,0,.32);
  --radius:20px;
  --sidebar:280px;
  --topbar:76px;
  --content:1440px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  min-height:100%;
  background:var(--bg);
  color-scheme:dark;
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 8% -10%,rgba(116,255,157,.08),transparent 30%),
    radial-gradient(circle at 100% 20%,rgba(181,140,255,.045),transparent 28%),
    linear-gradient(135deg,var(--bg),var(--bg-2) 55%,#08100b);
  color:var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height:1.45;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 85%);
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:0;
}

button:focus,
input:focus,
textarea:focus,
select:focus{
  outline:none;
}

a{
  color:inherit;
}

.hidden{
  display:none !important;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(116,255,157,.25) transparent;
}

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(116,255,157,.22);
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(116,255,157,.38);
}

/* ============================================================
   TOAST
   ============================================================ */

.toast{
  position:fixed;
  z-index:10000;
  top:18px;
  left:50%;
  max-width:min(92vw,520px);
  padding:12px 16px;
  border:1px solid rgba(116,255,157,.28);
  border-radius:14px;
  background:rgba(9,17,12,.94);
  box-shadow:
    0 15px 40px rgba(0,0,0,.35),
    0 0 22px rgba(116,255,157,.08);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  transform:translate(-50%,-140%);
  opacity:0;
  pointer-events:none;
  transition:
    transform .28s var(--ease),
    opacity .28s ease;
  backdrop-filter:blur(18px);
}

.toast.show{
  transform:translate(-50%,0);
  opacity:1;
}

.toast[data-type="error"]{
  border-color:rgba(255,114,114,.38);
  box-shadow:
    0 15px 40px rgba(0,0,0,.35),
    0 0 22px rgba(255,114,114,.08);
}

/* ============================================================
   LOADING
   ============================================================ */

.loading-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:
    radial-gradient(circle at center,rgba(116,255,157,.07),transparent 34%),
    var(--bg);
}

.loading-screen b{
  letter-spacing:.16em;
  font-size:14px;
}

.loading-screen span{
  color:var(--muted);
  font-size:12px;
}

.loader{
  width:48px;
  height:48px;
  border:3px solid rgba(116,255,157,.12);
  border-top-color:var(--green);
  border-right-color:rgba(116,255,157,.48);
  border-radius:50%;
  animation:spin .8s linear infinite;
  box-shadow:0 0 28px rgba(116,255,157,.10);
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

/* ============================================================
   AUTH
   ============================================================ */

.auth-view{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px 18px;
  position:relative;
  overflow:hidden;
}

.auth-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(116,255,157,.10),transparent 32%),
    radial-gradient(circle at 80% 70%,rgba(181,140,255,.08),transparent 30%);
  pointer-events:none;
}

.auth-card{
  position:relative;
  z-index:1;
  width:min(100%,480px);
  padding:24px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    linear-gradient(145deg,
      rgba(17,29,20,.96),
      rgba(8,14,10,.97));
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px);
}

.auth-banner{
  display:block;
  width:100%;
  max-height:160px;
  object-fit:cover;
  border-radius:17px;
  margin-bottom:20px;
  border:1px solid var(--line);
}

.brand-mark{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:17px;
  font-weight:950;
  letter-spacing:.08em;
}

.brand-mark span{
  font-size:25px;
  filter:drop-shadow(0 0 9px rgba(116,255,157,.35));
}

.muted{
  color:var(--muted);
}

.auth-card > .muted{
  margin:7px 0 22px;
  font-size:13px;
}

.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.18);
}

.tab{
  min-height:42px;
  border:0;
  border-radius:10px;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.tab:hover{
  color:var(--text);
}

.tab.active{
  color:var(--text);
  background:var(--green-soft);
  box-shadow:
    inset 0 0 0 1px rgba(116,255,157,.15),
    0 0 16px rgba(116,255,157,.06);
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.auth-form label,
.grid-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.auth-form input,
.grid-form input,
.grid-form textarea,
.grid-form select{
  width:100%;
  min-height:45px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
  background:rgba(0,0,0,.20);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.auth-form input:focus,
.grid-form input:focus,
.grid-form textarea:focus,
.grid-form select:focus{
  border-color:rgba(116,255,157,.42);
  background:rgba(116,255,157,.035);
  box-shadow:0 0 0 3px rgba(116,255,157,.06);
  outline:none;
}

.security-note{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--line);
  color:var(--dim);
  text-align:center;
  font-size:10px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  min-height:43px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 15px;
  color:var(--text);
  background:rgba(255,255,255,.045);
  cursor:pointer;
  font-size:11px;
  font-weight:950;
  letter-spacing:.03em;
  transition:
    transform .18s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(116,255,157,.26);
  background:rgba(116,255,157,.08);
}

.btn:disabled{
  cursor:not-allowed;
  opacity:.45;
  transform:none;
}

.btn.primary{
  border-color:rgba(116,255,157,.35);
  color:#031008;
  background:var(--green);
  box-shadow:0 8px 24px rgba(116,255,157,.12);
}

.btn.primary:hover{
  background:#8dffad;
  box-shadow:0 10px 30px rgba(116,255,157,.20);
}

.btn.wide{
  width:100%;
}

.icon-btn{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

.icon-btn:hover{
  border-color:rgba(116,255,157,.25);
  background:var(--green-soft);
}

/* ============================================================
   APPLICATION SHELL
   ============================================================ */

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  z-index:100;
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  border-right:1px solid var(--line);
  background:
    linear-gradient(180deg,
      rgba(10,18,12,.97),
      rgba(6,12,8,.98));
  box-shadow:18px 0 50px rgba(0,0,0,.15);
  overflow-y:auto;
  overscroll-behavior:contain;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:6px 10px 20px;
}

.wolf-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(116,255,157,.15);
  border-radius:13px;
  background:var(--green-soft);
  box-shadow:0 0 20px rgba(116,255,157,.07);
  font-size:22px;
}

.sidebar-brand strong{
  display:block;
  font-size:13px;
  font-weight:950;
  letter-spacing:.10em;
}

.sidebar-brand small{
  display:block;
  margin-top:2px;
  color:var(--dim);
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.profile-mini{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:63px;
  margin:0 4px 12px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(116,255,157,.20);
  border-radius:12px;
  color:var(--green);
  background:rgba(116,255,157,.07);
  font-size:11px;
  font-weight:950;
}

.profile-mini b{
  display:block;
  max-width:155px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.profile-mini small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
}

.nav{
  flex:1;
  min-height:0;
}

/* ============================================================
   THREE WORKSPACES SIDEBAR
   ============================================================ */

.wp-sidebar{
  height:100%;
  min-height:430px;
  display:flex;
  flex-direction:column;
}

.wp-sidebar-heading{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 11px;
  color:var(--dim);
  font-size:8px;
  font-weight:950;
  letter-spacing:.17em;
}

.wp-sidebar-light{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(116,255,157,.75);
}

.wp-sidebar-items{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.wp-sidebar-item{
  position:relative;
  width:100%;
  min-height:68px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:15px;
  color:var(--text);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.012));
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:
    transform .18s var(--ease),
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.wp-sidebar-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(
      circle at 0 50%,
      rgba(116,255,157,.28),
      transparent 45%
    );
  transition:opacity .22s ease;
}

.wp-sidebar-item::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-80%;
  width:50%;
  opacity:0;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );
}

.wp-sidebar-item:hover{
  transform:translateX(2px);
  border-color:rgba(116,255,157,.25);
  background:
    linear-gradient(110deg,
      rgba(116,255,157,.08),
      rgba(116,255,157,.018));
  box-shadow:
    0 8px 25px rgba(0,0,0,.16),
    0 0 18px rgba(116,255,157,.06);
}

.wp-sidebar-item:hover::before,
.wp-sidebar-item.active::before{
  opacity:1;
}

.wp-sidebar-item.active{
  border-color:rgba(116,255,157,.42);
  background:
    linear-gradient(110deg,
      rgba(116,255,157,.16),
      rgba(116,255,157,.035));
  box-shadow:
    inset 3px 0 0 var(--green),
    0 0 25px rgba(116,255,157,.11);
}

.wp-sidebar-item.active::after{
  opacity:1;
  animation:sidebarSweep 2.5s ease-in-out infinite;
}

.wp-sidebar-item.protected:hover{
  border-color:rgba(181,140,255,.34);
  background:
    linear-gradient(110deg,
      rgba(181,140,255,.11),
      rgba(181,140,255,.02));
}

.wp-sidebar-item.protected.active{
  border-color:rgba(181,140,255,.50);
  background:
    linear-gradient(110deg,
      rgba(181,140,255,.18),
      rgba(181,140,255,.035));
  box-shadow:
    inset 3px 0 0 var(--purple),
    0 0 26px rgba(181,140,255,.13);
}

.wp-sidebar-icon{
  position:relative;
  z-index:1;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--green);
  background:rgba(116,255,157,.08);
  box-shadow:inset 0 0 0 1px rgba(116,255,157,.09);
  font-size:18px;
  font-weight:950;
}

.wp-sidebar-item:nth-child(2) .wp-sidebar-icon{
  color:var(--yellow);
  background:rgba(255,215,106,.08);
}

.wp-sidebar-item.protected .wp-sidebar-icon{
  color:var(--purple);
  background:var(--purple-soft);
}

.wp-sidebar-copy{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.wp-sidebar-copy strong{
  font-size:12px;
  line-height:1.1;
  font-weight:950;
}

.wp-sidebar-copy small{
  color:var(--muted);
  font-size:8px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.wp-sidebar-arrow{
  position:relative;
  z-index:1;
  color:var(--dim);
  font-size:20px;
  line-height:1;
  transition:
    transform .18s ease,
    color .18s ease;
}

.wp-sidebar-item:hover .wp-sidebar-arrow,
.wp-sidebar-item.active .wp-sidebar-arrow{
  transform:translateX(3px);
  color:rgba(255,255,255,.82);
}

.wp-sidebar-spacer{
  flex:1;
  min-height:22px;
}

.wp-sidebar-bottom{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.wp-sidebar-access{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  color:var(--dim);
  font-size:8px;
}

.wp-sidebar-access span:first-child{
  color:var(--green);
  font-size:7px;
  text-shadow:0 0 7px rgba(116,255,157,.7);
}

.wp-sidebar-logout{
  width:100%;
  min-height:40px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  color:var(--muted);
  background:rgba(255,255,255,.025);
  cursor:pointer;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  transition:
    border-color .2s ease,
    color .2s ease,
    background .2s ease;
}

.wp-sidebar-logout:hover{
  color:var(--text);
  border-color:rgba(255,114,114,.28);
  background:rgba(255,114,114,.07);
}

@keyframes sidebarSweep{
  0%{left:-80%;opacity:0}
  15%{opacity:1}
  55%{opacity:1}
  100%{left:130%;opacity:0}
}

/* ============================================================
   MAIN
   ============================================================ */

.main{
  min-width:0;
  min-height:100vh;
}

.topbar{
  position:sticky;
  top:0;
  z-index:80;
  min-height:var(--topbar);
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 24px;
  border-bottom:1px solid var(--line);
  background:rgba(7,12,9,.84);
  backdrop-filter:blur(18px);
}

#mobileMenu{
  display:none;
}

.topbar > div:nth-child(2){
  min-width:0;
  flex:1;
}

.eyebrow{
  color:var(--green);
  font-size:8px;
  font-weight:950;
  letter-spacing:.17em;
}

.topbar h1{
  margin:2px 0 0;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.02em;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:9px;
}

.status-pill{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.025);
  font-size:9px;
  font-weight:900;
}

.status-pill.green{
  color:var(--green);
  border-color:rgba(116,255,157,.18);
  background:rgba(116,255,157,.055);
}

.cart-btn{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:7px 10px;
  color:var(--text);
  background:rgba(255,255,255,.035);
  cursor:pointer;
  font-size:11px;
  font-weight:850;
}

.cart-btn b{
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#031008;
  background:var(--green);
  font-size:9px;
}

.maintenance{
  margin:16px auto 0;
  width:min(calc(100% - 48px),var(--content));
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border:1px solid rgba(255,215,106,.22);
  border-radius:13px;
  color:#ffe8a1;
  background:rgba(255,215,106,.055);
  font-size:11px;
}

.maintenance span{
  color:rgba(255,232,161,.65);
}

.content{
  width:min(100%,var(--content));
  margin:0 auto;
  padding:30px 24px 60px;
}

/* ============================================================
   PAGE FOUNDATION
   ============================================================ */

.wp-page{
  min-width:0;
}

.wp-page-heading{
  margin-bottom:24px;
}

.wp-page-heading h2{
  margin:5px 0 6px;
  font-size:clamp(25px,3vw,38px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.wp-page-heading p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.wp-workspace-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.wp-panel{
  min-width:0;
  display:flex;
  gap:14px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(145deg,
      rgba(17,29,20,.78),
      rgba(8,14,10,.72));
  box-shadow:0 14px 40px rgba(0,0,0,.16);
}

.wp-panel.protected{
  border-color:rgba(181,140,255,.15);
}

.wp-panel-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:var(--green);
  background:var(--green-soft);
}

.wp-panel.protected .wp-panel-icon{
  color:var(--purple);
  background:var(--purple-soft);
}

.wp-panel h3{
  margin:0 0 5px;
  font-size:14px;
}

.wp-panel p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}

.wp-route-placeholder{
  padding:24px;
  border:1px dashed rgba(255,255,255,.11);
  border-radius:var(--radius);
  background:rgba(255,255,255,.018);
}

.wp-route-placeholder strong,
.wp-route-placeholder span{
  display:block;
}

.wp-route-placeholder strong{
  font-size:13px;
}

.wp-route-placeholder span{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

/* ============================================================
   OWNER PERMISSIONS
   ============================================================ */

.wp-permission-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.wp-permission{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:17px;
  border:1px solid rgba(116,255,157,.12);
  border-radius:16px;
  background:rgba(116,255,157,.035);
}

.wp-permission > span{
  color:var(--green);
  font-size:15px;
}

.wp-permission strong{
  font-size:12px;
  text-transform:capitalize;
}

.wp-permission small{
  color:var(--green);
  font-size:9px;
  font-weight:850;
}

.wp-empty-permissions{
  grid-column:1/-1;
  padding:24px;
  border:1px dashed var(--line);
  border-radius:16px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
}

/* ============================================================
   EMPTY / ERROR
   ============================================================ */

.wp-empty-page{
  min-height:45vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.wp-empty-page h2{
  margin:10px 0 6px;
}

.wp-empty-page p{
  max-width:500px;
  margin:0 0 18px;
  color:var(--muted);
  font-size:12px;
}

.wp-empty-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:1px solid rgba(116,255,157,.18);
  border-radius:19px;
  color:var(--green);
  background:var(--green-soft);
  font-size:23px;
  font-weight:950;
}

.wp-empty-page.error .wp-empty-icon{
  color:var(--danger);
  border-color:rgba(255,114,114,.20);
  background:rgba(255,114,114,.06);
}

/* ============================================================
   MODALS / FORMS — FOUNDATION
   ============================================================ */

.modal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.66);
  backdrop-filter:blur(7px);
}

.modal.hidden{
  display:none;
}

.modal-card{
  width:min(100%,620px);
  max-height:min(90vh,850px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    linear-gradient(145deg,
      #101a13,
      #080f0a);
  box-shadow:var(--shadow);
}

.modal-card.large{
  width:min(100%,900px);
}

.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  padding:20px;
  border-bottom:1px solid var(--line);
}

.modal-head h2{
  margin:4px 0 0;
  font-size:20px;
}

.grid-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:20px;
}

.grid-form .span2{
  grid-column:1/-1;
}

.paypal-box{
  padding:20px;
  border-top:1px solid var(--line);
}

.small-note{
  margin-bottom:15px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media(max-width:1100px){
  :root{
    --sidebar:250px;
  }

  .wp-permission-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .content{
    padding-left:20px;
    padding-right:20px;
  }

  .topbar{
    padding-left:20px;
    padding-right:20px;
  }
}

/* ============================================================
   RESPONSIVE — TABLET / SMALL LAPTOP
   ============================================================ */

@media(max-width:900px){
  :root{
    --sidebar:270px;
  }

  .app-shell{
    display:block;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(var(--sidebar),88vw);
    height:100vh;
    transform:translateX(-105%);
    transition:transform .28s var(--ease);
    box-shadow:25px 0 70px rgba(0,0,0,.45);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .main{
    min-height:100vh;
  }

  #mobileMenu{
    display:grid;
    flex:0 0 42px;
  }

  .top-actions .status-pill{
    display:none;
  }

  .content{
    padding-top:24px;
  }

  body:has(.sidebar.open)::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:90;
    background:rgba(0,0,0,.52);
    backdrop-filter:blur(2px);
    pointer-events:none;
  }

  .sidebar{
    z-index:100;
  }

  .wp-workspace-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media(max-width:600px){
  :root{
    --topbar:68px;
  }

  .auth-view{
    padding:14px;
  }

  .auth-card{
    padding:18px;
    border-radius:20px;
  }

  .auth-banner{
    max-height:120px;
  }

  .brand-mark{
    font-size:14px;
  }

  .topbar{
    min-height:var(--topbar);
    padding:10px 12px;
    gap:9px;
  }

  .topbar h1{
    font-size:17px;
  }

  .topbar .eyebrow{
    font-size:7px;
  }

  .top-actions{
    gap:5px;
  }

  .cart-btn span{
    display:none;
  }

  .cart-btn{
    width:40px;
    height:40px;
    min-height:40px;
    justify-content:center;
    padding:6px;
  }

  .content{
    padding:20px 13px 40px;
  }

  .maintenance{
    width:calc(100% - 26px);
    margin-top:10px;
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
    font-size:10px;
  }

  .wp-page-heading{
    margin-bottom:18px;
  }

  .wp-page-heading h2{
    font-size:27px;
  }

  .wp-page-heading p{
    font-size:11px;
  }

  .wp-panel{
    padding:16px;
    border-radius:16px;
  }

  .wp-permission-grid{
    grid-template-columns:1fr;
  }

  .wp-sidebar-item{
    min-height:63px;
    grid-template-columns:39px minmax(0,1fr) 17px;
    gap:9px;
    padding:9px;
    border-radius:14px;
  }

  .wp-sidebar-icon{
    width:37px;
    height:37px;
    border-radius:11px;
  }

  .wp-sidebar-copy strong{
    font-size:12px;
  }

  .wp-sidebar-copy small{
    font-size:8px;
  }

  .wp-sidebar-heading{
    padding-left:9px;
  }

  .grid-form{
    grid-template-columns:1fr;
    padding:15px;
  }

  .grid-form .span2{
    grid-column:auto;
  }

  .modal{
    padding:10px;
  }

  .modal-card,
  .modal-card.large{
    max-height:94vh;
    border-radius:17px;
  }

  .modal-head{
    padding:15px;
  }

  .modal-head h2{
    font-size:17px;
  }
}

/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media(max-width:380px){
  .topbar{
    gap:6px;
  }

  .topbar h1{
    font-size:15px;
  }

  .content{
    padding-left:10px;
    padding-right:10px;
  }

  .auth-card{
    padding:15px;
  }

  .wp-page-heading h2{
    font-size:24px;
  }
}


/* ============================================================
   PHASE 35 — REMOVE INITIAL FOCUS BOX
   ============================================================ */

button,
[role="button"],
a{
  -webkit-tap-highlight-color:transparent;
}

button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
a:focus:not(:focus-visible){
  outline:none;
  box-shadow:inherit;
}

.wp-sidebar-item:focus,
.wp-sidebar-logout:focus,
.icon-btn:focus,
.cart-btn:focus,
.btn:focus,
.tab:focus{
  outline:none;
}


/* ============================================================
   PHASE 36 — SIDEBAR PANEL FOCUS / REFRESH FIX
   ============================================================ */

/*
 * The sidebar panels receive inline lighting from app.js.
 * Keep that lighting, but never allow the browser's default
 * focus rendering to create a white rectangle inside a panel.
 */
.wp-sidebar-item,
.wp-sidebar-item:hover,
.wp-sidebar-item:active,
.wp-sidebar-item:focus,
.wp-sidebar-item:focus-visible{
  outline:none !important;
  -webkit-outline:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

.wp-sidebar-item:focus,
.wp-sidebar-item:focus-visible{
  border-color:rgba(116,255,157,.42) !important;
}

.wp-sidebar-item.protected:focus,
.wp-sidebar-item.protected:focus-visible{
  border-color:rgba(181,140,255,.50) !important;
}

/*
 * Prevent a browser-generated inner focus ring from appearing
 * around the panel contents.
 */
.wp-sidebar-item *,
.wp-sidebar-item *:focus,
.wp-sidebar-item *:focus-visible{
  outline:none !important;
}

/*
 * Preserve the intended panel background during the first paint
 * after refresh instead of allowing a default focused-button
 * appearance to flash.
 */
.wp-sidebar-item{
  -webkit-appearance:none;
  appearance:none;
}

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print{
  body{
    background:#fff;
    color:#000;
  }

  .sidebar,
  .topbar,
  .toast,
  .modal,
  .loading-screen{
    display:none !important;
  }

  .app-shell{
    display:block;
  }

  .content{
    width:100%;
    padding:0;
  }
}