:root{
  --sb-bg:#ffffff; --sb-text:#111827; --sb-muted:#6b7280;
  --sb-border:#e5e7eb; --sb-hover:#f9fafb; --sb-active:#111827;
  --sb-shadow:0 10px 30px rgba(0,0,0,.06);
  --sb-width:260px; --sb-radius:16px; --sb-gap:12px;
  --topbar-h:72px;

  --card-bg: rgba(255,255,255,.90);
  --card-tint: rgba(0,0,0,.045);
  --card-border: rgba(229,231,235,.85);
  --card-blur: saturate(140%) blur(6px);
}
@media (max-width:640px){ :root{ --topbar-h:64px; } }

.ss-link{display:flex;align-items:center;gap:.5rem}
.ss-badge{
  margin-left:.25rem; padding:.1rem .35rem; border-radius:.25rem;
  font-size:.625rem; font-weight:700; letter-spacing:.03em; line-height:1;
  border:1px solid transparent; text-transform:uppercase;
}
.ss-badge--beta{ background:#fde68a; color:#78350f; border-color:#fcd34d; }



/* TOPBAR */
header.topbar-full{
  position:fixed;
  z-index:35;
  background:
    linear-gradient(var(--card-tint), var(--card-tint)),
    var(--card-bg);
  backdrop-filter:var(--card-blur);
  -webkit-backdrop-filter:var(--card-blur);
  top:var(--sb-gap);
  left:var(--sb-gap);
  right:var(--sb-gap);
  border:1px solid var(--card-border);
  border-radius:var(--sb-radius);
  box-shadow:var(--sb-shadow);
}
@media (min-width:1025px){
  header.topbar-full{
    left:calc(var(--sb-width) + var(--sb-gap)*2);
    right:var(--sb-gap);
  }
}
.topbar-inner{ padding:12px 16px; }
@media (min-width:640px){ .topbar-inner{ padding:16px 24px; } }
@media (min-width:1025px){ .topbar-inner{ padding-left:16px; padding-right:16px; } }
.topbar-spacer{ height:calc(var(--topbar-h) + var(--sb-gap)); }
.topbar-shadow{ box-shadow:0 8px 24px rgba(0,0,0,.06); }

/* SIDEBAR */
.ss-sidebar{
  position:sticky; top:var(--sb-gap);
  width:var(--sb-width);
  background:
    linear-gradient(var(--card-tint), var(--card-tint)),
    var(--card-bg);
  backdrop-filter:var(--card-blur);
  -webkit-backdrop-filter:var(--card-blur);
  color:var(--sb-text);
  border:1px solid var(--card-border);
  border-radius:var(--sb-radius);
  box-shadow:var(--sb-shadow);
  padding:12px;
}
.ss-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 10px; border-bottom:1px dashed var(--sb-border); margin-bottom:8px; }
.ss-logo{ width:38px; height:38px; border:1px solid var(--sb-border); border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden; }
.ss-logo img{ width:100%; height:100%; object-fit:cover; display:block }
.ss-brandname{ font-weight:800; font-size:15px; line-height:1.1 }
.ss-brandsub{ color:var(--sb-muted); font-size:12px; margin-top:2px }
.ss-nav{ list-style:none; margin:8px 0 0; padding:0 }
.ss-item{ margin:4px 0 }
.ss-link{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; text-decoration:none; color:var(--sb-text); border:1px solid transparent; transition:background .16s ease, border-color .16s ease, transform .06s ease; }
.ss-link:hover{ background:var(--sb-hover); border-color:var(--sb-border); transform:translateY(-1px); }
.ss-link.active{ border-color:var(--sb-border); background:#fff; box-shadow:inset 0 0 0 2px #f5f5f5; color:var(--sb-active); font-weight:700; }
.ss-ico{ width:18px; height:18px; flex:0 0 18px; opacity:.85 }
.ss-label{ flex:1 1 auto; font-size:14px }
.ss-kbd{ font-size:11px; color:var(--sb-muted); border:1px solid var(--sb-border); border-radius:6px; padding:.05rem .35rem }

/* Drawer mobil (cu spațiu mărit sub topbar) */
.ss-toggle{ display:none }
.ss-fab{
  display:none; position:fixed; left:14px; bottom:14px; z-index:80;
  width:46px; height:46px; border-radius:12px; border:1px solid var(--sb-border);
  background:#fff; box-shadow:var(--sb-shadow); align-items:center; justify-content:center; cursor:pointer;
}
.ss-fab svg{ width:22px; height:22px }

@media (max-width:1024px){
  .ss-sidebar{
    position:fixed; z-index:100;
    top:calc(var(--topbar-h) + var(--sb-gap) * 2);
    left:var(--sb-gap);
    width:min(92vw, 360px);
    height:calc(100vh - var(--topbar-h) - var(--sb-gap) * 3);
    border-radius:var(--sb-radius);
    border:1px solid var(--card-border);
    background:
      linear-gradient(var(--card-tint), var(--card-tint)),
      var(--card-bg);
    backdrop-filter:var(--card-blur);
    -webkit-backdrop-filter:var(--card-blur);
    box-shadow:var(--sb-shadow);
    padding:12px;
    transform:translateX(-115%);
    transition:transform .2s ease;
    overflow:auto; -webkit-overflow-scrolling:touch;
  }

  .ss-overlay{
    content:""; position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.25);
    z-index:34;
    display:none;
  }

  .ss-fab{ display:flex }
  .ss-toggle:checked ~ .ss-sidebar{ transform:translateX(0); }
  .ss-toggle:checked ~ .ss-overlay{ display:block; }
}

/* Desktop */
@media (min-width:1025px){
  .ss-sidebar{
    position:fixed; z-index:36;
    top:var(--sb-gap);
    bottom:var(--sb-gap);
    left:var(--sb-gap);
    height:auto; overflow:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column;
  }
  body{
    padding-left:calc(var(--sb-width) + var(--sb-gap)*2);
    padding-right:var(--sb-gap);
  }
}