body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  background-color: #0b0c10;
  color: #e5e7eb;
  padding-top: var(--appbar-h);
}

/* === Unified Global Header (compact app style on every page) === */
:root{
  --appbar-h: 56px;       /* total header height */
  --appbar-item-h: 36px;  /* height for chips/buttons inside header */
}

.global-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  box-sizing: border-box;
  z-index: 50;
  background: rgba(17,18,20,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);

  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height: var(--appbar-h);
  padding: 6px 16px;      /* compact like app pages */
  gap: 12px;
}

/* Header content clusters */
.global-header .header-left,
.global-header .header-center,
.global-header .header-right{
  display:flex; align-items:center; gap:12px;
}

/* Brand + avatar sizing */
.global-header .brand img{ width:32px; height:32px; border-radius:8px; }
.global-header .brand{ font-size:18px; font-weight:600; gap:8px; }
.global-header .avatar{ width:36px; height:36px; border-radius:50%; }
.global-header .username{ font-size:14px; opacity:.85; }

/* Every header button/chip: fixed height + 0 vertical padding */
.global-header .btn,
.global-header .units-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--appbar-item-h);
  padding: 0 14px;
  line-height: 1;
}

/* Center units chip appears only on small screens */
.global-header .units-center-mobile{ display:none !important; }

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #e5e7eb;
  font-weight: 600;
  font-size: 18px;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-size: 14px;
  opacity: 0.85;
}

.main-content {
  padding: 20px;
}

.auth-form{display:grid;gap:10px;max-width:360px}
.auth-form label{display:grid;gap:6px}
input{padding:10px;border:1px solid #ddd;border-radius:8px}
.nav .nav-email{opacity:.8}

.auth-links { display: flex; gap: 8px; align-items: center; }
.profile .btn { margin-left: 8px; }
.btn.solid { background: #111; color: #fff; border: 1px solid #111; border-radius: 8px; padding: 6px 12px; text-decoration: none; }
.btn { border: 1px solid #ccc; border-radius: 8px; padding: 6px 12px; text-decoration: none; color: #111; }

/* ===== Auth page layout ===== */
.auth-page{
  min-height: calc(100vh - 120px); /* room for header/footer */
  display: grid;
  place-items: start center;
  padding: 32px 16px;
}
@media (min-width: 640px){
  .auth-page{ place-items: center; }
}
.auth-card{
  width: 100%;
  max-width: 420px;
  background: #111;           /* dark card */
  color: #eee;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.auth-title{
  margin: 0 0 14px 0;
  font-size: 26px;
  font-weight: 700;
}

/* ===== Form controls ===== */
.auth-form{ display: grid; gap: 12px; }
.auth-form label{ display: grid; gap: 6px; font-size: 14px; color: #cfcfcf; }
.auth-form input{
  padding: 12px 14px;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  background: #fff;          /* high contrast fields on dark card */
  color: #111;
  outline: none;
}
.auth-form input:focus{
  border-color: #6b6bff;
  box-shadow: 0 0 0 3px rgba(107,107,255,.2);
}

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #5a5a5a;
  border-radius: 10px;
  text-decoration: none;
  color: #eaeaea;
  background: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ background: #1f1f1f; border-color: #777; }
.btn.solid{
  background: #4f46e5;       /* visible accent (indigo) */
  border-color: #4f46e5;
  color: #fff;
}
.btn.solid:hover{ filter: brightness(1.05); }
.btn-wide{ width: 100%; margin-top: 4px; }

/* header auth links layout */
.auth-links{ display: flex; gap: 8px; align-items: center; }

/* Misc */
.muted{ color: #9b9b9b; margin-top: 12px; }
.muted a{ color: #a8b4ff; }

.flash-stack {
  max-width: 720px;
  margin: 12px auto;
  text-align: center;
}
.flash {
  padding: 10px 12px;
  border-radius: 6px;
  margin: 8px 0;
  border: 1px solid #ddd;
}
.flash-success { background: #edf7ed; border-color: #a6d8a8; color: #2b7a2b; }
.flash-error   { background: #fdecea; border-color: #f5a097; color: #a12a2a; }
.flash-warning { background: #fff4e5; border-color: #f9cf8f; color: #7a5200; }

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-link {
  display: inline-block;
  line-height: 0;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.avatar-link:hover .avatar {
  transform: scale(1.08);
  opacity: 0.9;
  cursor: pointer;
}


/* --- Page head (title + sub) --- */
.page-head {
  max-width: 1100px;
  margin: 10px auto 16px auto;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}
.page-sub {
  margin: 0;
  opacity: .7;
}

/* --- Grids --- */
.grid {
  display: grid;
  gap: 14px;
}
.grid-projects, .grid-files {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-apps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .grid-projects, .grid-files, .grid-apps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .grid-projects, .grid-files, .grid-apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .grid-projects, .grid-files, .grid-apps {
    grid-template-columns: 1fr;
  }
}

/* --- Cards base --- */
.project-card, .file-card, .app-card {
  display: block;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
@media (prefers-color-scheme: dark) {
  .project-card, .file-card, .app-card {
    background: #0f1115;
    border-color: rgba(255,255,255,0.12);
  }
}
.project-card:hover, .file-card:hover, .app-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.07);
  border-color: rgba(99,102,241,0.25);
}

/* --- Thumbnails --- */
.thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(99,102,241,0.06);
}
.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,0.45);
  font-size: 13px;
}
@media (prefers-color-scheme: dark) {
  .thumb-fallback { color: rgba(255,255,255,0.55); }
}

/* --- Card body --- */
.card-body {
  padding: 10px 12px 12px;
}
.card-body .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-body .meta {
  font-size: 12px;
  opacity: .7;
}

/* --- 3-dot menu on project cards --- */
.menu-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 28px;
  width: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.7);
  display: grid;
  place-items: center;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .menu-btn {
    border-color: rgba(255,255,255,0.15);
    background: rgba(15,17,21,0.85);
    color: #eaeefb;
  }
}
.menu-btn:hover {
  border-color: rgba(99,102,241,0.35);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.menu {
  position: absolute;
  top: 40px;
  right: 8px;
  min-width: 160px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  display: grid;
  gap: 4px;
  z-index: 30;
}
@media (prefers-color-scheme: dark) {
  .menu {
    background: #0f1115;
    border-color: rgba(255,255,255,0.12);
  }
}
.menu[hidden] { display: none; }
.menu button {
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}
.menu button:hover {
  background: rgba(99,102,241,0.08);
}

/* --- App cards (Unified white theme with black text) --- */
.app-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  color: #000000;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.07);
  border-color: rgba(99,102,241,0.25);
}

.app-card .app-icon {
  height: 120px;
  display: grid;
  place-items: center;
  background: rgba(99,102,241,0.06);
}
.app-card .app-icon img {
  max-height: 80px;
  max-width: 80%;
  display: block;
}
.app-icon-fallback {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #6366f1;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.app-card .app-body {
  padding: 10px 12px 14px;
  background: #ffffff;
}

.app-card .app-name {
  color: #000000;
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 15px;
}

.app-card .app-desc {
  color: #000000;
  opacity: 0.8;
  font-size: 13px;
  font-weight: 500;
}


/* --- Dashboard sections --- */
.dash-section {
  max-width: 1100px;
  margin: 18px auto 26px auto;
}
.dash-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dash-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* --- Buttons --- */
.btn.link {
  color: #6366f1;
  text-decoration: none;
}
.btn.link:hover { text-decoration: underline; }

.btn.sm {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  font-size: 13px;
}
@media (prefers-color-scheme: dark) {
  .btn.sm { background: #0f1115; border-color: rgba(255,255,255,0.18); color: #eaeefb; }
}

/* --- Empty states --- */
.empty-box {
  max-width: 720px;
  margin: 18px auto;
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 12px;
  color: rgba(0,0,0,0.6);
}
@media (prefers-color-scheme: dark) {
  .empty-box {
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
  }
}

/* --- Utility --- */
.hint { font-size: 13px; opacity: .7; }


/* ===== Autosave bar — compact + dark by default, matches page ===== */
:root { --page-max: 880px; } /* adjust: 820–920px will shorten/lengthen */

#project-bar{
  max-width: var(--page-max);
  width: 100%;
  margin: 14px auto 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;

  background: #121317;                 /* dark surface that blends with page */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

#project-bar #project-name{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.25;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: #0b0c10;                 /* same as body background */
  color: #e5e9f7;
}
#project-bar #project-name:focus{
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22);
}

#project-bar #save-status{
  margin-left: auto;
  font-size: 12.5px;
  padding: 6px 9px;
  border-radius: 8px;
  white-space: nowrap;
  border: 1px solid transparent;
  color: #9aa4b2;
}
#project-bar #save-status[data-state="saving"]{
  color:#60a5fa; background:rgba(96,165,250,.10); border-color:rgba(96,165,250,.25);
}
#project-bar #save-status[data-state="saved"]{
  color:#34d399; background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.22);
}
#project-bar #save-status[data-state="error"]{
  color:#f87171; background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.22);
}

/* compact on small screens */
@media (max-width: 520px){
  #project-bar { padding: 8px; gap: 8px; }
  #project-bar #save-status { padding: 5px 8px; font-size: 12px; }
}

/* --- Projects page container + tighter cards --- */
.projects-grid {            /* centers the grid under the page head */
  max-width: 1100px;
  margin: 0 auto;
}

.grid-projects {            /* auto-fills neat columns without over-stretching */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* improve legibility on dark cards */
/* ==== Enhanced project text visibility ==== */
.card-body .title {
  color: #000000;         /* solid black text */
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.15px;
  text-shadow: none;      /* remove the glow/shadow */
}

.card-body .meta {
  color: #000000;         /* solid black meta text */
  opacity: 0.8;           /* slight dim for contrast */
  font-size: 13px;
  margin-top: 2px;
  font-weight: 500;
}

@media (prefers-color-scheme: dark){
  .card-body .title { color: #eaeefb; }
  .card-body .meta  { color: #cbd5e1; opacity: .85; }
}


/* slightly smaller thumb to reduce card height */
.thumb-wrap { aspect-ratio: 5 / 3; }


.card-body { border-top: 1px solid rgba(255,255,255,0.06); }
@media (prefers-color-scheme: light){
  .card-body { border-top: 1px solid rgba(0,0,0,0.06); }
}

.flash-stack { position: sticky; top: 8px; z-index: 60; }


/* Optional: subtle divider between thumb and body */
.card-body { border-top: 1px solid rgba(255,255,255,0.08); }
@media (prefers-color-scheme: light){
  .card-body { border-top: 1px solid rgba(0,0,0,0.06); }
}

/* === Tiny confirm modal (non-intrusive) === */
.modal-backdrop[hidden] { display: none !important; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 200; /* above menus (menu is z-index:30) */
}

.confirm-modal {
  width: min(90vw, 420px);
  border-radius: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  background: #0f1115; color: #eaeefb;
}

@media (prefers-color-scheme: light){
  .confirm-modal { background: #ffffff; color: #111; border-color: rgba(0,0,0,.12); }
}

.confirm-title { font-size: 18px; font-weight: 700; margin: 4px 0 6px; }
.confirm-text  { font-size: 14px; opacity: .9; margin: 0 0 14px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }


/* Modal: cancel button in black + input field for prompt */
.confirm-modal .btn[data-confirm="cancel"],
.confirm-modal .btn[data-prompt="cancel"]{
  background: #ffffff;
  color: #000000;                  /* black text as requested */
  border-color: rgba(0,0,0,.18);
}
.confirm-modal .btn[data-confirm="cancel"]:hover,
.confirm-modal .btn[data-prompt="cancel"]:hover{
  filter: brightness(.98);
}

.modal-input {
  width: 100%;
  box-sizing: border-box;          /* ✅ prevents overflow */
  margin: 10px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  color: #111;
  outline: none;
  font-size: 15px;
  line-height: 1.4;
}

.modal-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.20);
}

.thumb-fallback.icon {
  display: grid;
  place-items: center;
  color: #8aa1b5;
  background: rgba(138,161,181,0.15);
}
.thumb-fallback.icon svg { opacity: 0.9; }


/* Edge rail (hover to reveal) — header-aware + flush handle */
.edge-rail {
  position: fixed;
  /* These CSS variables let us position the rail and handle cleanly */
  --header-h: 64px;    /* fallback; JS will update this to your actual header height */
  --rail-w: 240px;     /* expanded rail width */

  /* Start immediately below the header; never cover it */
  inset: var(--header-h) auto 0 0;
  height: calc(100vh - var(--header-h));

  width: 64px;                 /* collapsed footprint so hover still works */
  z-index: 1200;
  pointer-events: none;
}

/* Handle — attached to the rail edge (no gap) */
.edge-rail .rail-handle {
  position: absolute;
  top: 40%;
  left: 0;                     /* flush with the rail (no negative gap) */
  width: 14px;
  height: 56px;
  background: var(--card, #2a2a33);
  color: var(--muted-foreground, #a9b0c0);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: none;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  cursor: pointer;
  pointer-events: auto;
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease, left .2s ease;
}

/* Rail panel */
.edge-rail .rail-inner {
  width: var(--rail-w);
  height: 100%;
  background: var(--panel, #1b1c22);
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 16px 8px;
  box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  transform: translateX(calc(-1 * var(--rail-w)));   /* fully hidden by default */
  transition: transform .2s ease;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Open state: panel slides in; handle sits at the panel edge (still flush) */
.edge-rail.open .rail-inner { transform: translateX(0); }
.edge-rail.open .rail-handle {
  left: var(--rail-w);          /* move handle to rail's right edge */
  transform: rotate(180deg);
}

/* Hover/focus reveal without clicking */
@media (hover:hover) {
  .edge-rail:hover .rail-inner,
  .edge-rail:focus-within .rail-inner {
    transform: translateX(0);
  }
  .edge-rail:hover .rail-handle,
  .edge-rail:focus-within .rail-handle {
    left: var(--rail-w);
    transform: rotate(180deg);
  }
}

/* Items (unchanged – keep your visual style) */
.rail-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--muted-foreground, #b9c0d0);
  border-radius: 10px;
  text-decoration: none;
  outline: none;
}
.rail-item:hover,
.rail-item:focus-visible {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.rail-item.active {
  background: rgba(99, 102, 241, 0.18);
  color: #fff;
}
.rail-icon { font-size: 18px; line-height: 1; }
.rail-text { font-size: 14px; }

/* Accessibility helpers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Mobile: keep a small handle; you can later add a header button if you like */
@media (max-width: 900px) {
  .edge-rail { width: 0; }
  .edge-rail .rail-handle { left: 8px; }
}

@media (max-width: 900px) {
  .main-content { padding: 12px; }
  .page-head { max-width: none; margin: 10px 0 16px 0; padding: 0 12px; }
  .dash-section { max-width: none; margin: 18px 0 26px 0; padding: 0 12px; }
  .projects-grid { max-width: none; margin: 0; padding: 0 12px; }
}

.rail-sublist {
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail-subitem {
  opacity: 0.9;
  font-size: 0.95em;
  padding-left: 12px;
}
.rail-subitem:hover {
  opacity: 1;
}

.rail-subitem.active { opacity: 1; font-weight: 600; }

/* === Global header: units chip + CTA button === */
.units-chip{
  border-radius:9999px;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
}
.units-chip:hover{ background:rgba(255,255,255,0.12); }

/* Ensure all solid CTAs look identical everywhere */
.btn.solid{
  border-radius:12px;
  padding:10px 16px;
}

/* === Unified Global Header (compact app style on every page) === */
:root{
  --appbar-h: 56px;       /* total header height (visual) */
  --appbar-item-h: 36px;  /* height for chips / buttons inside header */
}

/* Make the header a strict, compact bar */
.global-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: var(--appbar-h);
  padding: 6px 16px;       /* compact like app pages */
  gap: 12px;
}

/* Header content clusters */
.global-header .header-left,
.global-header .header-center,
.global-header .header-right{
  display:flex; align-items:center; gap:12px;
}

/* Brand stays compact */
.global-header .brand img{ width:32px; height:32px; border-radius:8px; }
.global-header .brand{ font-size:18px; font-weight:600; gap:8px; }

/* Avatar + name always same size */
.global-header .avatar{ width:36px; height:36px; border-radius:50%; }
.global-header .username{ font-size:14px; opacity:.85; }

/* Every header button/chip: fixed height + zero vertical padding */
.global-header .btn,
.global-header .units-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height: var(--appbar-item-h);
  padding: 0 14px;
  line-height: 1;
}

/* === Notifications dropdown (clean + sticky head/foot) === */
.notif-dropdown{
    position: relative;
    display: inline-block;   /* keeps click-outside accurate */
}
.notif-dropdown .btn{ position: relative; }

.notif-badge{
    margin-left:6px; font-size:12px; line-height:1;
    padding:2px 6px; border-radius:10px;
    border:1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
}

/* Closed by default; visible only when [hidden] is removed */
.notif-menu{
    position:absolute; right:0; top:calc(100% + 8px);
    width:420px; max-height:420px;
    background: rgba(23,24,27,.98);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35);
    padding:10px; z-index:1000;

    display: none;            /* default closed */
}

.notif-menu{
    /* existing styles... */
    width:380px;                   /* slightly smaller, tighter panel */
    max-width:90vw;                /* responsive fallback on small screens */
}

/* When not hidden → show as flex column */
.notif-menu:not([hidden]){
    display:flex;
    flex-direction:column;
}
/* Make sure HTML hidden always wins if present */
.notif-menu[hidden]{ display:none !important; }

.notif-menu .menu-head,
.notif-menu .menu-foot{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 4px;
    position:sticky;
    background:rgba(23,24,27,.98);
    z-index:1;
}
.notif-menu .menu-head{ top:0; border-bottom:1px solid rgba(255,255,255,.08); }
.notif-menu .menu-foot{ bottom:0; border-top:1px solid rgba(255,255,255,.08); }

.notif-menu .menu-list{
    overflow:auto;                    /* only the middle scrolls */
    flex:1;                           /* fill between head/foot */
    display:grid; gap:8px; padding:8px 0;
}

.notif-item{
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    border-radius:10px;
    padding:6px 8px;
    font-size:13px;
    line-height:1.3;

    white-space:normal;            /* ✅ allow multi-line wrapping */
    word-break:break-word;         /* ✅ break long continuous words */
    overflow-wrap:break-word;      /* ✅ fallback for long URLs or tokens */
}

.notif-item.unread{
    background: rgba(79,70,229,.08);
    border-color: rgba(79,70,229,.35);
}

.notif-item .title{
    font-weight:600;
    font-size:13px;                  /* slightly smaller title */
}

.notif-item .time{
    opacity:.65;
    font-size:11px;                  /* smaller timestamp */
    margin-top:3px;
}

.menu-empty{
    opacity:.7;
    padding:8px;
    text-align:center;
    font-size:13px;
}

.btn.small{
    height:26px;
    padding:0 8px;
    font-size:12px;
}
/* === Mobile header layout === */
@media (max-width: 900px){
  .global-header{ gap:8px; padding:6px 10px; }
  .global-header .brand-text{ display:none; }
  .global-header .header-center{ flex:1; justify-content:center; }
  .global-header .units-center-mobile{ display:inline-flex !important; }
  .global-header .header-right .username,
  .global-header .header-right .units-chip,
  .global-header .header-right .btn.solid,
  .global-header .header-right .notif-dropdown,
  .global-header .header-right a.btn[href="/logout"]{ display:none; }
  .global-header .hamburger-btn{ display:inline-flex !important; }
}

/* Default: hide hamburger (desktop), show on mobile via media query */
.global-header .hamburger-btn{ display:none; height: var(--appbar-item-h); padding: 0 12px; }
.global-header .avatar-link + .hamburger-btn{ margin-left:8px; }

/* Mobile dropdown menu */
.mobile-menu{
  position:absolute; right:10px; top:calc(var(--appbar-h));
  width: min(88vw, 360px);
  max-height: 70vh;
  background: rgba(23,24,27,.98);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:10px; z-index:1000;
  display: none;
}
.mobile-menu:not([hidden]){ display:flex; flex-direction:column; gap:8px; }
.mobile-menu[hidden]{ display:none !important; }
.mobile-menu .menu-head{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu .greet{ font-size:14px; opacity:.9; }
.mobile-menu .menu-item{ display:block; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:#eaeaea; text-decoration:none; font-weight:600; }
.mobile-menu .menu-item:hover{ background:rgba(255,255,255,.12); border-color: rgba(255,255,255,.15); }
.mobile-menu .menu-item:active{ filter:brightness(.95); }