/* ════════════════════════════════════════════════════════════════════════════
   pages.css  —  Pages Hub specific styles
   Standalone design system: tool cards, favorites, colour key, access overlay.
   Bell/user/alerts-panel sections are covered by header.css.
   ════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; width: 100%; overflow-x: hidden; }

:root {
  /* ── Surface ── */
  --bg:           #07070f;
  --bg2:          #0c0b18;
  --card-bg:      rgba(255,255,255,0.04);
  --border:       rgba(255,255,255,0.07);
  --border-hi:    rgba(255,255,255,0.14);
  --row-border:   rgba(255,255,255,0.05);
  --shadow-card:  0 0 0 1px rgba(255,255,255,0.06), 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);

  /* ── Text ── */
  --text:         #eeeef8;
  --text-dim:     #9898b8;
  --text-muted:   #4a4a68;

  /* ── Accent ── */
  --accent:       #7c5cfc;
  --accent2:      #a78bfa;
  --accent-dim:   rgba(124,92,252,0.14);

  /* ── Card category colours ── */
  --c-media:   46,196,255;
  --c-general: 255,140,80;
  --c-support: 56,215,160;
  --c-admin:   162,110,255;
  --c-static:  100,115,148;
  --c-service: 100,140,255;
  --c-fav:     255,195,55;

  /* ── Backend badge colours ── */
  --be-finleys-bg: rgba(46,196,255,0.08);  --be-finleys-bd: rgba(46,196,255,0.2);  --be-finleys-tx: rgba(46,196,255,0.85);
  --be-static-bg:  rgba(100,115,148,0.07); --be-static-bd:  rgba(100,115,148,0.18);--be-static-tx:  rgba(100,115,148,0.75);

  /* ── Geometry ── */
  --radius:    18px;
  --radius-sm: 10px;
  --radius-xs: 7px;

  /* ── Page layout ── */
  --page-max:  1060px;
  --page-pad:  1.5rem;
  --btn-w:     52px;
  --btn-gap:   0.55rem;
  --red:       #f87171;
  --green:     #34d399;
  --amber:     #fbbf24;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  padding: 1.5rem var(--page-pad) 3rem;
  display: flex;
  justify-content: center;
}

/* ── Atmospheric background ── */
.space-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 800px 600px at 5% 10%,  rgba(124,92,252,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 92% 80%, rgba(46,196,255,0.10)  0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 50% 115%,rgba(56,215,160,0.08)  0%, transparent 70%);
  animation: spaceshift 30s ease-in-out infinite alternate;
}
@keyframes spaceshift { from{opacity:.65} to{opacity:1} }

/* ── Page wrapper ── */
.outer {
  position: relative; z-index: 10;
  width: 100%; max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: flex-start; gap: 1.1rem;
  animation: rise 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes rise { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.container { flex: 1; min-width: 0; }

/* ── Title card ── */
.page-header-row {
  display: flex;
  align-items: center;
  gap: var(--btn-gap);
  margin-bottom: 1.1rem;
  height: 68px; min-height: 68px;
}
.title-card {
  flex: 1;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 1.4rem;
  height: 62px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: flex 0.35s cubic-bezier(0.16,1,0.3,1);
  min-width: 0;
}
.title-card::before {
  content: ''; position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.title-card .title-content {
  display: flex; align-items: center; gap: 0.75rem;
  overflow: hidden;
  transition: opacity 0.25s ease, max-width 0.35s cubic-bezier(0.16,1,0.3,1);
  max-width: 600px; opacity: 1;
}
.title-card .title-content.hidden {
  max-width: 0; opacity: 0; overflow: hidden;
}
.page-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.page-icon img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; }
.title-card h1 { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0; }
.title-card .page-sub {
  font-size: 0.72rem; color: var(--text-dim); margin-top: 0.1rem; margin-bottom: 0;
  white-space: nowrap;
}

/* ── Search results content classes (pages-specific labels/items) ── */
  font-size: 0.6rem; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0.6rem 0.85rem 0.3rem;
}
.sr-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer; transition: background 0.1s;
  text-decoration: none; color: var(--text);
}
.sr-item:hover { background: rgba(124,92,252,0.08); }
.sr-item-icon { font-size: 1rem; flex-shrink: 0; width: 1.4rem; text-align: center; }
.sr-item-text { flex: 1; min-width: 0; }
.sr-item-title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.sr-item-title mark { background: rgba(124,92,252,0.35); color: var(--accent2); border-radius: 2px; padding: 0 2px; }
.sr-item-desc { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0.25rem 0; }
.sr-web {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer; transition: background 0.1s;
  color: var(--accent2); font-size: 0.8rem; font-weight: 600;
}
.sr-web:hover { background: rgba(124,92,252,0.08); }

/* ── Logo error fallback ── */
.logo-err { color: var(--red); font-weight: 800; font-size: 0.75rem; }

/* ── Glass card (section wrapper) ── */
.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.1rem;
  margin-bottom: 0.85rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  border-left: 3px solid rgba(var(--gc-c, 150,150,180), 0.35);
}
.glass-card::before {
  content: ''; position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.gc-fav     { --gc-c: 255,195,55; }
.gc-media   { --gc-c: 46,196,255; }
.gc-general { --gc-c: 255,140,80; }
.gc-support { --gc-c: 56,215,160; }
.gc-service { --gc-c: 100,140,255; }
.gc-admin   { --gc-c: 162,110,255; }

/* ── Section label ── */
.section-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; margin-bottom: 0.9rem;
  color: rgba(var(--sl-c, 150,150,180), 0.85);
  position: relative; z-index: 1;
}
.section-label .sl-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgb(var(--sl-c, 150,150,180));
  box-shadow: 0 0 8px rgba(var(--sl-c, 150,150,180), 0.55);
  flex-shrink: 0;
}
.section-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(var(--sl-c,150,150,180),0.2), transparent);
}
.sl-fav     { --sl-c: 255,195,55; }
.sl-media   { --sl-c: 46,196,255; }
.sl-general { --sl-c: 255,140,80; }
.sl-support { --sl-c: 56,215,160; }
.sl-service { --sl-c: 100,140,255; }
.sl-admin   { --sl-c: 162,110,255; }

/* ── Tool grid ── */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
  align-items: stretch;
  position: relative; z-index: 1;
}
.tool-grid--mt { margin-top: 0.75rem; }

/* ── Tool card ── */
.tool-card {
  display: flex; flex-direction: row; align-items: center; gap: 0.55rem;
  padding: 0.75rem 0.85rem;
  height: 100%; box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--tc), 0.2);
  background: rgba(var(--tc), 0.05);
  text-decoration: none; color: var(--text);
  position: relative; overflow: visible;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(var(--tc), 0.07), inset 0 1px 0 rgba(255,255,255,0.05);
  --tc: var(--c-static);
}
.tool-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tc), 0.55), transparent);
}
/* Tile: lift + glow on any hover */
.tool-card:hover {
  border-color: rgba(var(--tc), 0.38);
  background: rgba(var(--tc), 0.1);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(var(--tc), 0.16), inset 0 1px 0 rgba(255,255,255,0.07);
}
/* When heart is hovered: cancel tile glow, keep lift */
.tool-card:has(.fav-star:hover) {
  border-color: rgba(var(--tc), 0.2);
  background: rgba(var(--tc), 0.05);
  box-shadow: 0 2px 10px rgba(var(--tc), 0.07), inset 0 1px 0 rgba(255,255,255,0.05);
}
.tool-card:active {
  transform: translateY(0) scale(0.97);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  box-shadow: 0 2px 8px rgba(var(--tc), 0.1);
}
.tool-card.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* Category colour classes */
.tc-media   { --tc: var(--c-media); }
.tc-general { --tc: var(--c-general); }
.tc-support { --tc: var(--c-support); }
.tc-admin   { --tc: var(--c-admin); }
.tc-service { --tc: var(--c-service); }
.tc-static  { --tc: var(--c-static); }
.tc-fav     { --tc: var(--c-fav); }

/* ── Card internals ── */
.card-icon {
  font-size: 1.25rem; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(var(--tc), 0.1); border: 1px solid rgba(var(--tc), 0.18);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 32px;
}
.card-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.18rem;
}
.card-icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
.card-title { font-size: 0.86rem; font-weight: 700; color: var(--text); margin: 0; }
.card-desc  { font-size: 0.7rem; color: var(--text-dim); line-height: 1.4; margin: 0; }
.card-footer {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: auto; padding-top: 0.3rem;
}

/* ── Favorite star on cards ── */
.fav-star {
  position: absolute; top: 0.35rem; right: 0.35rem;
  transform: translate(10px, -10px);
  width: 34px; height: 34px;
  background: #0c0a1c;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  font-size: 1.15rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
  opacity: 1;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  z-index: 10; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}

.fav-star:hover { background: #1e1640; transform: translate(10px,-10px) scale(1.12); box-shadow: 0 0 0 2px rgba(167,139,250,0.5), 0 4px 14px rgba(124,92,252,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }
.fav-star.active { opacity: 1; color: var(--red); background: #2a1020; border-color: rgba(248,113,113,0.65); box-shadow: 0 0 0 1px rgba(248,113,113,0.25), 0 2px 12px rgba(248,113,113,0.3), inset 0 1px 0 rgba(255,255,255,0.1); }
.fav-star.active:hover { transform: translate(10px,-10px) scale(1.12); }

/* ── Backend badge ── */
.card-badge {
  font-family: 'DM Mono', monospace;
  font-size: 0.57rem; font-weight: 500; letter-spacing: 0.2px;
  padding: 0.1rem 0.45rem; border-radius: 20px;
  background: var(--badge-bg); border: 1px solid var(--badge-bd); color: var(--badge-tx);
}
.be-finleys  { --badge-bg:var(--be-finleys-bg);  --badge-bd:var(--be-finleys-bd);  --badge-tx:var(--be-finleys-tx); }
.be-static   { --badge-bg:var(--be-static-bg);   --badge-bd:var(--be-static-bd);   --badge-tx:var(--be-static-tx); }

/* ── Status dot ── */
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; margin-left: auto;
  background: rgba(255,255,255,0.12);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.status-dot.up   { background: var(--green); box-shadow: 0 0 7px rgba(52,211,153,0.55); }
.status-dot.down { background: var(--red); box-shadow: 0 0 5px rgba(248,113,113,0.45); }

/* ── External tool modal ── */
.ext-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
  z-index: 500; align-items: center; justify-content: center;
}
.ext-backdrop.open { display: flex; }
.ext-box {
  background: linear-gradient(145deg,#0e0e1c,#12121e);
  border: 1px solid rgba(124,92,252,0.3);
  border-radius: var(--radius); padding: 1.75rem 2rem;
  width: 90%; max-width: 400px;
  box-shadow: 0 0 0 1px rgba(124,92,252,0.1), 0 24px 64px rgba(0,0,0,0.6);
  animation: rise 0.22s cubic-bezier(.16,1,.3,1) both;
}
.ext-box h3 { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--text); }
.ext-box p  { margin: 0 0 1.1rem; font-size: 0.8rem; color: var(--text-dim); }
.ext-input {
  width: 100%; background: rgba(0,0,0,0.4);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 0.5rem 0.75rem; color: var(--text);
  font-family: 'DM Mono', monospace; font-size: 0.84rem;
  outline: none; margin-bottom: 1.1rem;
  transition: border-color 0.18s;
}
.ext-input:focus { border-color: rgba(124,92,252,0.45); }
.ext-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
/* btn-ghost + btn-accent inherited from shared.css */


/* ── Colour key sidebar ── */
.key-sidebar {
  width: 152px; flex-shrink: 0;
  position: sticky; top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.key-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.75rem 0.9rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.key-card::before {
  content: ''; position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}
.key-heading {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.6rem;
}
.key-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.22rem 0; border-bottom: 1px solid var(--row-border);
}
.key-row:last-child { border-bottom: none; }
.key-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.key-label  { font-size: 0.69rem; font-weight: 500; color: var(--text-dim); white-space: nowrap; }
.ks-service { background: rgb(100,140,255); box-shadow: 0 0 4px rgba(100,140,255,0.5); }
.ks-fav     { background: rgb(255,195,55);  box-shadow: 0 0 4px rgba(255,195,55,0.5); }
.ks-media   { background: rgb(46,196,255);  box-shadow: 0 0 4px rgba(46,196,255,0.5); }
.ks-general { background: rgb(255,140,80);  box-shadow: 0 0 4px rgba(255,140,80,0.5); }
.ks-support { background: rgb(56,215,160);  box-shadow: 0 0 4px rgba(56,215,160,0.5); }
.ks-admin   { background: rgb(162,110,255); box-shadow: 0 0 4px rgba(162,110,255,0.5); }
.ks-static  { background: rgb(100,115,148); }
.ks-be-finleys  { background: rgb(46,196,255);  box-shadow: 0 0 4px rgba(46,196,255,0.4); }
.ks-be-static   { background: rgb(100,115,148); }
.ks-on   { background: var(--green); box-shadow: 0 0 5px rgba(52,211,153,0.6); }
.ks-off  { background: var(--red); box-shadow: 0 0 5px rgba(248,113,113,0.5); }
.ks-none { background: rgba(255,255,255,0.15); }

/* ── Bell / alerts button ── */
.bell-btn {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 1rem;
  height: 62px; min-width: 48px; align-self: auto;
  color: var(--text-dim); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.18s;
  box-shadow: var(--shadow-card);
}
.bell-btn:hover { border-color: var(--border-hi); color: var(--text); }
.bell-btn:active { transform: scale(0.92); }

/* ── User icon button ── */
.user-btn {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 1rem;
  height: 62px; min-width: 48px; align-self: auto;
  color: var(--text-dim); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.18s;
  box-shadow: var(--shadow-card);
}
.user-btn:hover { border-color: var(--border-hi); color: var(--text); }
.user-btn:active { transform: scale(0.92); }

.bell-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; border-radius: 10px;
  background: var(--red); color: var(--text); 
  font-size: 0.58rem; font-weight: 800; font-family: 'DM Mono', monospace;
  display: none; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  box-shadow: 0 0 6px rgba(248,113,113,0.6);
}
.bell-badge.visible { display: flex; }

/* ── Alerts panel (pop-out from bell button) ── */
.alerts-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 320px;
  background: rgba(14,14,30,0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 900;
  overflow: hidden;
  transform-origin: top right;
  transform: scale(0.92) translateY(-6px);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), opacity 0.18s ease, visibility 0s linear 0.2s;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  max-height: min(520px, 80vh);
}
.alerts-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), opacity 0.18s ease, visibility 0s linear 0s;
}
.alerts-panel::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  z-index: 1;
}
.alerts-panel-header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.alerts-panel-title { font-size: 0.84rem; font-weight: 700; color: var(--text); flex: 1; }
.alerts-dismiss-all {
  font-size: 0.68rem; color: var(--text-muted); cursor: pointer;
  background: none; border: none; font-family: inherit;
  padding: 0.2rem 0.4rem; border-radius: 4px; transition: color 0.15s;
}
.alerts-dismiss-all:hover { color: var(--text-dim); }
.alerts-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 0.95rem; cursor: pointer; padding: 0.2rem 0.3rem;
  border-radius: 4px; transition: color 0.15s; font-family: inherit;
}
.alerts-close:hover { color: var(--text); }
.alerts-list {
  flex: 1; overflow-y: auto; padding: 0.5rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.alert-item {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xs); padding: 0.65rem 0.8rem;
  position: relative; transition: opacity 0.2s;
}
.alert-item.dismissed { opacity: 0.35; }
.alert-item-ts {
  font-size: 0.62rem; color: var(--text-muted);
  font-family: 'DM Mono', monospace; margin-bottom: 0.25rem;
}
.alert-item-msg {
  font-size: 0.78rem; color: var(--text); line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  padding-right: 1.8rem;
}
.alert-item-dismiss {
  position: absolute; top: 0.5rem; right: 0.55rem;
  background: none; border: none; color: var(--text-muted);
  font-size: 0.72rem; cursor: pointer; padding: 0.1rem 0.3rem;
  border-radius: 3px; transition: color 0.15s; font-family: inherit;
}
.alert-item-dismiss:hover { color: var(--red); }
.alerts-empty {
  color: var(--text-muted); font-size: 0.78rem;
  text-align: center; padding: 1.5rem 1rem;
}
.alerts-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 0.5rem 0.6rem;
}
.alerts-footer a {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  width: 100%; padding: 0.45rem 0.6rem; border-radius: var(--radius-xs);
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; transition: background 0.12s, color 0.12s;
}
.alerts-footer a:hover { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* ── User panel (pop-out from button) ── */
.user-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 240px;
  background: rgba(14,14,30,0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 900;
  overflow: hidden;
  transform-origin: top right;
  transform: scale(0.92) translateY(-6px);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), opacity 0.18s ease, visibility 0s linear 0.2s;
  visibility: hidden;
  pointer-events: none;
}
.user-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), opacity 0.18s ease, visibility 0s linear 0s;
}
.user-panel::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.user-panel-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(124,92,252,0.18); border: 1.5px solid rgba(124,92,252,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.user-panel-info { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem 1rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.user-panel-name { font-size: 0.84rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.user-panel-role { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.1rem; }
.user-panel-body { padding: 0.4rem 0.4rem; display: flex; flex-direction: column; }
.user-panel-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0.3rem 0; }
.user-panel-btn {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; background: none; border: none;
  padding: 0.55rem 0.65rem; border-radius: var(--radius-xs);
  color: var(--text-dim); font-size: 0.8rem; font-weight: 500;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.user-panel-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.user-panel-btn .upb-icon { font-size: 0.92rem; width: 1.2rem; text-align: center; flex-shrink: 0; }

/* ── User panel login form ── */
.user-login-form {
  padding: 0.5rem 0.25rem 0.25rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.user-login-input {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xs);
  color: var(--text); font-size: 0.8rem;
  padding: 0.45rem 0.65rem;
  outline: none; font-family: inherit;
  transition: border-color 0.15s;
}
.user-login-input:focus { border-color: rgba(124,92,252,0.5); }
.user-login-btn {
  width: 100%;
  background: linear-gradient(135deg, #7c5cfc, #6344e0);
  border: none; border-radius: var(--radius-xs);
  color: var(--text); font-size: 0.8rem; font-weight: 700;
  padding: 0.5rem; cursor: pointer;
  font-family: inherit; margin-top: 0.1rem;
  transition: opacity 0.15s;
}
.user-login-btn:hover { opacity: 0.88; }
.user-login-err {
  font-size: 0.72rem; color: var(--red);
  text-align: center; min-height: 1em;
}

/* ── Shared overlay ── */
.side-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4); z-index: 799;
}
.side-overlay.open { display: block; }

/* ── Responsive ── */
@media(max-width:900px) {
  .key-sidebar { display: none; }
}
@media(max-width:540px) {
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .title-card h1 { font-size: 1.2rem; }
  body { padding: 1.25rem 0.85rem 3rem; }
  /* Mobile tile layout: column, centered, dot pinned to corner */
  .tool-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.7rem 1.2rem;
    gap: 0.3rem;
  }
  .card-icon { flex: 0 0 auto; }
  .card-body {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: 0.15rem; min-width: 0; width: 100%;
  }
  .card-title { font-size: 0.78rem; }
  .card-desc  { font-size: 0.65rem; }
  .card-footer { display: none; }
  .card-badge { display: none; }
  /* Status dot: absolute, bottom-right corner */
  .status-dot {
    position: absolute;
    bottom: 0.45rem; right: 0.5rem;
    margin-left: 0;
    width: 7px; height: 7px;
  }
}
@media(max-width:360px) { .tool-grid { grid-template-columns: 1fr; } }

/* ── Pages access restriction (G-4) ── */
.tool-card.restricted {
  opacity: 0.38;
  pointer-events: none;
  filter: grayscale(0.6);
  position: relative;
}
.tool-card.restricted .fav-star { display: none; }
.tool-card.restricted::after {
  content: '\1F512';
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 0.75rem;
  opacity: 0.6;
  left: auto; width: auto; height: auto;
  background: none;
  transition: none;
}

/* ── Mobile header ── */
@media(max-width:600px){
  .page-header-row{flex-wrap:wrap;gap:0.35rem;margin-bottom:0.75rem}
  .back-btn{width:38px;min-width:38px;font-size:1rem}
  .title-card{padding:0.6rem 0.85rem;gap:0.5rem;min-width:0;flex:1}
  .title-card .title-content{max-width:100%;overflow:visible;min-width:0}
  .title-card .title-content > div{min-width:0}
  .title-card h1,.title-card .main-title{font-size:1.05rem;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
  .title-card .page-sub{font-size:0.68rem;white-space:normal;word-break:break-word;overflow-wrap:anywhere;overflow:visible}
  .page-sub{font-size:0.68rem}
  .page-icon{font-size:1.15rem}
  .user-btn,.bell-btn{padding:0 0.55rem;font-size:1rem}
}
/* ── pages.html header mobile ── */

@media(max-width:380px){
  .title-card h1,.title-card .main-title{font-size:0.9rem}
}