/* Brand Hub — Light Theme
   White base · Light grey accents · Modern blue feature colour
   Font: Plus Jakarta Sans */

   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

   /* ── Variables ─────────────────────────────────────── */
   :root {
       --font:         'Plus Jakarta Sans', sans-serif;
   
       /* Colours */
       --blue:         #1a6cf5;
       --blue-dark:    #1558d0;
       --blue-light:   #eff4ff;
       --blue-mid:     #dbeafe;
   
       --navy:         #0e214c;
       --navy-light:   #162d5e;
       --navy-border:  #1e3a6e;
   
       --accent:       #5bded7;
       --accent-dark:  #42c8c1;
       --accent-light: #e8faf9;
       --accent-mid:   #c4f2ef;
   
       --bg:           #ffffff;
       --bg-alt:       #f5f6f8;
       --surface:      #ffffff;
       --surface-2:    #f5f6f8;
       --surface-3:    #eceef2;
   
       --border:       #e4e7ec;
       --border-hover: #c8cdd8;
   
       --text:         #111827;
       --text-sub:     #374151;
       --text-muted:   #6b7280;
       --text-subtle:  #9ca3af;
   
       --success:      #16a34a;
       --success-bg:   #f0fdf4;
       --danger:       #dc2626;
       --danger-bg:    #fff5f5;
       --warning:      #d97706;
   
       --sidebar-w:    260px;
       --header-h:     56px;
       --radius:       10px;
       --radius-sm:    7px;
       --radius-lg:    14px;
       --transition:   0.15s ease;
   
       --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
       --shadow:       0 4px 16px rgba(0,0,0,0.08);
       --shadow-lg:    0 12px 40px rgba(0,0,0,0.12);
   
       /* Resources sections: Design best practice (blue) vs Handy tips (teal) */
       --resources-design:          #387e9c;
       --resources-design-border:   var(--resources-design);
       --resources-design-head-bg:  #e3f2fa;
       --resources-design-title:    var(--resources-design);
       --resources-design-mid:      #99d0f0;
       --resources-handy-border:    var(--accent-dark);
       --resources-handy-head-bg:   #dcf2f1;
       --resources-handy-title:     #36c9b8;
       --resources-inspiration:           #6d4fc4;
       --resources-inspiration-head-bg:   #ebe6fa;
       --resources-inspiration-title:     var(--resources-inspiration);
   }
   
   /* ── Reset ─────────────────────────────────────────── */
   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   html {
       font-size: 16px;
       -webkit-font-smoothing: antialiased;
   }
   
   body {
       font-family: var(--font);
       background: var(--bg-alt);
       color: var(--text);
       line-height: 1.6;
       min-height: 100vh;
   }
   
   a {
       color: var(--blue);
       text-decoration: none;
   }
   
   a:hover {
       color: var(--blue-dark);
   }
   
   
   /* ── Utilities ─────────────────────────────────────── */
   
   
   .text-center {
       text-align: center;
   }
   
   .pb-3 {
       padding-bottom: 1rem;
   }
   
   .mb-3 {
       margin-bottom: 1rem;
   }
   
   .pt-3 {
       padding-top: 1rem;
   }
   
   .mt-3 {
       margin-top: 1rem;
   }

    .pb-4 {
       padding-bottom: 2rem;
   }
   
   .mb-4 {
       margin-bottom: 2rem;
   }
   
   .pt-4 {
       padding-top: 2rem;
   }
   
   .mt-4 {
       margin-top: 2rem;
   }
   
   .pb-5 {
       padding-bottom: 3rem;
   }
   
   .mb-5 {
       margin-bottom: 3rem;
   }
   
   .pt-5 {
       padding-top: 3rem;
   }
   
   .mt-5 {
       margin-top: 3rem;
   }
   .lead {
    font-size: 1.1rem !important;
   }

   .fw-bold {
    font-weight: 600;
   }
   
   /* ── App Layout ─────────────────────────────────────── */
   .app-layout {
       display: flex;
       min-height: 100vh;
   }
   
   /* ── Sidebar ─────────────────────────────────────────── */
   .sidebar {
       width: var(--sidebar-w);
       background: var(--navy);
       border-right: none;
       display: flex;
       flex-direction: column;
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       z-index: 100;
       transition: transform var(--transition);
       color: rgba(255,255,255,0.75);
   }
   
   .sidebar-header {
       padding: 1.1rem 1.25rem 1rem;
       border-bottom: 1px solid var(--navy-border);
       flex-shrink: 0;
   }
   
   .sidebar-logo {
       font-size: 1.15rem;
       font-weight: 700;
       color: #fff;
       letter-spacing: -0.02em;
       display: block;
       line-height: 1.2;
       text-decoration: none;
       cursor: pointer;
   }
   
   .sidebar-logo:hover {
       color: var(--accent);
   }
   
   .sidebar-logo img {
       width: 100%;
       height: auto;
       max-width: 130px;
       margin-left: -10px;
   }
   
   .sidebar-section-label {
       padding: 1rem 1.25rem 0.35rem;
       font-size: 0.65rem;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       color: rgba(255,255,255,0.35);
       font-weight: 600;
   }
   
   .sidebar-nav {
       flex: 1;
       overflow-y: auto;
       padding-bottom: 0.5rem;
   }
   
   .sidebar-nav::-webkit-scrollbar {
       width: 4px;
   }
   
   .sidebar-nav::-webkit-scrollbar-track {
       background: transparent;
   }
   
   .sidebar-nav::-webkit-scrollbar-thumb {
       background: var(--navy-border);
       border-radius: 4px;
   }
   
   .brands-list {
       max-height: 33vh;
       overflow-y: auto;
   }
   
   .brands-list::-webkit-scrollbar {
       width: 4px;
   }
   
   .brands-list::-webkit-scrollbar-track {
       background: transparent;
   }
   
   .brands-list::-webkit-scrollbar-thumb {
       background: var(--navy-border);
       border-radius: 4px;
   }
   
   .brand-add-btn {
       color: rgba(255,255,255,0.5);
       font-size: 0.8rem;
       border: 1px dashed var(--navy-border);
       margin-bottom: 0.25rem;
   }
   
   .brand-add-btn:hover {
       border-color: var(--accent);
       color: var(--accent);
   }
   
   .brand-add-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: var(--navy-light);
       font-size: 0.6rem;
       flex-shrink: 0;
   }
   
   .brand-add-btn:hover .brand-add-icon {
       background: rgba(91,222,215,0.15);
       color: var(--accent);
   }
   
   .brand-item {
       display: flex;
       align-items: center;
       gap: 0.65rem;
       padding: 0.55rem 1.25rem;
       cursor: pointer;
       transition: background var(--transition), color var(--transition);
       color: rgba(255,255,255,0.7);
       font-size: 0.85rem;
       font-weight: 500;
       user-select: none;
       margin: 3px 0.5rem;
       border-radius: var(--radius-sm);
       border: 1px solid var(--navy);
       background-clip: padding-box;
   }
   
   .brand-item:hover,
   .brand-item:focus-visible {
       background: var(--navy-light);
       color: #fff;
       outline: none;
   }
   
   .brand-item:focus-visible {
       box-shadow: inset 0 0 0 2px var(--accent);
   }
   
   .brand-item.active {
       background: rgba(91,222,215,0.12);
       color: var(--accent);
       font-weight: 600;
   }
   
   .brand-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       flex-shrink: 0;
       background: currentColor;
       opacity: 0.7;
   }
   
   .brand-item.active .brand-dot {
       opacity: 1;
   }
   
   .sidebar-resources {
       margin-bottom: 0.35rem;
   }
   
   /* Align with brand list items (no extra sub-indent) */
   .sidebar-resources .brand-item-sub {
       padding-left: 1.25rem;
       font-size: 0.85rem;
   }
   
   .brand-item-sub {
       padding-left: 1.85rem;
       font-size: 0.82rem;
   }
   
   .brand-item-sub > i:first-child {
       width: 1.1rem;
       text-align: center;
       opacity: 0.9;
   }
   
   .sidebar #navResourcesDesign.brand-item-sub > i:first-child {
       color: #96c1d4;
       opacity: 1;
   }
   
   .sidebar #navResourcesHandy.brand-item-sub > i:first-child {
       color: #36c9b8;
       opacity: 1;
   }
   
   .sidebar #navResourcesInspiration.brand-item-sub > i:first-child {
       color: #c4b5f5;
       opacity: 1;
   }
   
   .sidebar #navResourcesDesign.brand-item-sub.active {
       background: rgba(43, 81, 196, 0.26);
       color: #eef1ff;
       font-weight: 600;
   }
   
   .sidebar #navResourcesHandy.brand-item-sub.active {
       background: rgba(91, 222, 215, 0.2);
       color: #e8faf9;
       font-weight: 600;
   }
   
   .sidebar #navResourcesInspiration.brand-item-sub.active {
       background: rgba(109, 79, 196, 0.26);
       color: #f5f0ff;
       font-weight: 600;
   }
   
   .sidebar-footer {
       padding: 0.85rem 1.25rem;
       border-top: 1px solid var(--navy-border);
       flex-shrink: 0;
   }
   
   .user-info {
       display: flex;
       align-items: center;
       gap: 0.65rem;
       margin-bottom: 0.65rem;
   }
   
   .user-avatar {
       width: 30px;
       height: 30px;
       background: rgba(91,222,215,0.12);
       border: 1.5px solid rgba(91,222,215,0.3);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.68rem;
       font-weight: 700;
       color: var(--accent);
       flex-shrink: 0;
       text-transform: uppercase;
   }
   
   .user-details {
       flex: 1;
       min-width: 0;
   }
   
   .user-name {
       font-size: 0.82rem;
       font-weight: 600;
       color: #fff;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .user-role {
       font-size: 0.68rem;
       color: rgba(255,255,255,0.4);
       text-transform: capitalize;
   }
   
   .sign-out-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.45rem;
       font-size: 0.75rem;
       font-weight: 500;
       color: rgba(255,255,255,0.5);
       padding: 0.35rem 0.7rem;
       border-radius: var(--radius-sm);
       transition: background var(--transition), color var(--transition);
       text-decoration: none;
   }
   
   .sign-out-btn:hover {
       background: var(--navy-light);
       color: #fff;
   }
   
   .sign-out-btn i {
       flex-shrink: 0;
   }
   
   /* ── Main Content ────────────────────────────────────── */
   .main-content {
       margin-left: var(--sidebar-w);
       flex: 1;
       display: flex;
       flex-direction: column;
       min-height: 100vh;
   }
   
   .main-header {
       height: var(--header-h);
       background: var(--surface);
       border-bottom: 1px solid var(--border);
       display: flex;
       align-items: center;
       padding: 0 1.5rem;
       gap: 1rem;
       position: sticky;
       top: 0;
       z-index: 50;
   }
   
   .breadcrumb {
       display: flex;
       align-items: center;
       gap: 0.4rem;
       font-size: 0.8rem;
       color: var(--text-muted);
       flex: 1;
   }
   
   .breadcrumb-sep {
       color: var(--border-hover);
   }
   
   .breadcrumb-item {
       color: var(--text-muted);
       cursor: pointer;
       transition: color var(--transition);
   }
   
   .breadcrumb-item:hover {
       color: var(--blue);
   }
   
   .breadcrumb-item.current {
       color: var(--text);
       font-weight: 600;
       cursor: default;
   }
   
   .header-actions {
       display: flex;
       align-items: center;
       gap: 0.6rem;
   }
   
   .main-body {
        max-width: 1920px;
       padding: 1.5rem;
       flex: 1;
   }
   
   /* ── Brand View Container ───────────────────────────── */
   #brandView {
       max-width: 1900px;
       margin: 0 auto;
   }
   
   /* ── Brand Main Image ────────────────────────────────── */
   .brand-main-image {
       margin-bottom: 1.25rem;
       border-radius: var(--radius-lg);
       overflow: hidden;
       line-height: 0;
   }
   
   .brand-main-image img {
       width: 100%;
       height: auto;
       display: block;
   }
   
   /* ── Brand Hero ──────────────────────────────────────── */
   .brand-hero {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 1.25rem 1.5rem;
       margin-bottom: 1.5rem;
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       box-shadow: var(--shadow-sm);
   }
   
   .brand-hero-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 1.25rem;
   }
   
   .brand-hero-icon {
       width: 48px;
       height: 48px;
       background: var(--blue-light);
       border: 1.5px solid var(--blue-mid);
       border-radius: var(--radius);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1rem;
       font-weight: 700;
       color: var(--blue);
       flex-shrink: 0;
       letter-spacing: -0.02em;
   }
   
   .brand-hero-logo img {
       display: block;
       max-height: 100px;
       width: 100%;
       max-width: 200px;
       height: auto;
   }
   
   .brand-hero-info {
       flex: 1;
       min-width: 0;
   }
   
   .brand-hero-name {
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--text);
       letter-spacing: -0.02em;
       line-height: 1.2;
   }
   
   .brand-hero-desc {
       color: var(--text-muted);
       font-size: 0.82rem;
       width: 100%;
   }
   
   .brand-hero-stats {
       display: flex;
       gap: 1.5rem;
       text-align: right;
   }
   
   .stat-num {
       font-size: 1.4rem;
       font-weight: 700;
       color: var(--navy);
       line-height: 1;
       letter-spacing: -0.02em;
   }
   
   .stat-label {
       font-size: 0.65rem;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--text-subtle);
       font-weight: 600;
   }
   
   /* ── Toolbar ─────────────────────────────────────────── */
   .toolbar {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       margin-bottom: 1rem;
       flex-wrap: wrap;
   }
   
   .toolbar-left {
       flex: 1;
       display: flex;
       align-items: center;
       gap: 0.6rem;
   }
   
   /* ── Buttons ─────────────────────────────────────────── */
   .btn {
       display: inline-flex;
       align-items: center;
       gap: 0.35rem;
       padding: 0.5rem 0.9rem;
       border-radius: var(--radius-sm);
       font-family: var(--font);
       font-size: 0.82rem;
       font-weight: 600;
       cursor: pointer;
       border: 1px solid transparent;
       transition: all var(--transition);
       white-space: nowrap;
       line-height: 1.4;
   }
   
   .btn-primary {
       background: var(--accent);
       color: var(--navy);
       border-color: var(--accent);
       font-weight: 700;
   }
   
   .btn-primary:hover {
       background: var(--accent-dark);
       border-color: var(--accent-dark);
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(91,222,215,0.3);
   }
   
   .btn-secondary {
       background: var(--surface);
       color: var(--text-sub);
       border-color: var(--border);
   }
   
   .btn-secondary:hover {
       background: var(--surface-2);
       border-color: var(--border-hover);
   }
   
   .btn-ghost {
       background: transparent;
       color: var(--text-muted);
       border-color: transparent;
   }
   
   .btn-ghost:hover {
       background: var(--surface-2);
       color: var(--text);
   }
   
   .btn-danger {
       background: var(--danger-bg);
       color: var(--danger);
       border-color: #fecaca;
   }
   
   .btn-danger:hover {
       background: #fee2e2;
   }
   
   .btn-sm {
       padding: 0.35rem 0.65rem;
       font-size: 0.75rem;
   }
   
   .btn-icon {
       padding: 0.4rem;
       width: 32px;
       height: 32px;
       justify-content: center;
   }
   
   /* ── View Toggle ─────────────────────────────────────── */
   .view-toggle {
       display: flex;
       background: var(--surface-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       overflow: hidden;
   }
   
   .view-toggle-btn {
       padding: 0.35rem 0.6rem;
       border: none;
       background: transparent;
       color: var(--text-muted);
       cursor: pointer;
       font-size: 0.85rem;
       transition: all var(--transition);
       display: flex;
       align-items: center;
   }
   
   .view-toggle-btn.active {
       background: var(--surface);
       color: var(--text);
       box-shadow: var(--shadow-sm);
   }
   
   /* ── Section labels ──────────────────────────────────── */
   .section-title {
       font-size: 0.68rem;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       color: var(--text-subtle);
       font-weight: 600;
       margin-bottom: 0.6rem;
   }
   
   /* ── Back Button ─────────────────────────────────────── */
   .btn-back {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       padding: 0.4rem 0.75rem;
       margin-bottom: 1rem;
       font-family: var(--font);
       font-size: 0.8rem;
       font-weight: 500;
       color: var(--text-muted);
       background: var(--surface-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: all var(--transition);
   }
   
   .btn-back:hover {
       color: var(--blue);
       border-color: var(--blue);
       background: var(--blue-light);
   }
   
   .btn-back i {
       font-size: 0.7rem;
   }
   
   /* ── Folder Grid ─────────────────────────────────────── */
   .folders-section,
   .brand-links-section {
       margin-bottom: 1.75rem;
   }
   
   .folder-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
       gap: 0.65rem;
   }
   
   .folder-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 0.9rem 1rem;
       cursor: pointer;
       transition: all var(--transition);
       display: flex;
       flex-direction: column;
       gap: 0.35rem;
       position: relative;
       overflow: hidden;
       box-shadow: var(--shadow-sm);
   }
   
   .folder-card:hover,
   .folder-card:focus-visible {
       border-color: var(--blue);
       transform: translateY(-2px);
       box-shadow: var(--shadow);
       outline: none;
   }
   
   .folder-card-icon {
       font-size: 1.4rem;
       line-height: 1;
   }
   
   .folder-card-name {
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--text);
   }
   
   .folder-card-count {
       font-size: 0.72rem;
       color: var(--text-muted);
   }
   
   .folder-card .folder-actions {
       position: absolute;
       top: 0.4rem;
       right: 0.4rem;
       display: none;
       gap: 0.2rem;
   }
   
   .folder-card:hover .folder-actions {
       display: flex;
   }
   
   .folder-add-card,
   .brand-link-add-card {
       border-style: dashed;
       justify-content: center;
       align-items: center;
       min-height: 80px;
   }
   
   .folder-add-card:hover,
   .brand-link-add-card:hover {
       border-color: var(--blue);
   }
   
   /* ── Brand Links ─────────────────────────────────────── */
   a.brand-link-card {
       text-decoration: none;
   }

   a.brand-link-card .folder-card-icon {
       color: var(--text);
   }
   
   .canva-link-icon {
       width: 1.4rem;
       height: 1.4rem;
       display: block;
   }
   
   /* ── File Grid ───────────────────────────────────────── */
   .file-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
       gap: 0.65rem;
   }
   
   .file-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       transition: all var(--transition);
       display: flex;
       flex-direction: column;
       box-shadow: var(--shadow-sm);
   }
   
   .file-card:hover {
       border-color: var(--border-hover);
       transform: translateY(-2px);
       box-shadow: var(--shadow);
   }
   
   .file-card-preview {
       height: 100px;
       background: var(--surface-2);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
       border-bottom: 1px solid var(--border);
       overflow: hidden;
   }
   
   .file-card-preview img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .file-card-body {
       padding: 0.6rem 0.75rem;
       flex: 1;
   }
   
   .file-card-name {
       font-size: 0.78rem;
       font-weight: 600;
       color: var(--text);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       margin-bottom: 0.15rem;
   }
   
   .file-card-meta {
       font-size: 0.68rem;
       color: var(--text-muted);
   }
   
   .file-card-footer {
       padding: 0.4rem 0.6rem;
       border-top: 1px solid var(--border);
       display: flex;
       gap: 0.35rem;
       background: var(--surface-2);
   }
   
   /* ── File List ───────────────────────────────────────── */
   .file-list {
       display: none;
       flex-direction: column;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       background: var(--surface);
       box-shadow: var(--shadow-sm);
   }
   
   .file-list.active {
       display: flex;
   }
   
   .file-grid.active {
       display: grid;
   }
   
   .file-grid:not(.active) {
       display: none;
   }
   
   .file-list-row {
       display: flex;
       align-items: center;
       padding: 0.6rem 1rem;
       border-bottom: 1px solid var(--border);
       transition: background var(--transition);
       gap: 0.65rem;
   }
   
   .file-list-row:last-child {
       border-bottom: none;
   }
   
   .file-list-row:hover {
       background: var(--surface-2);
   }
   
   .file-list-icon {
       font-size: 1.1rem;
       flex-shrink: 0;
       width: 26px;
       text-align: center;
   }
   
   .file-list-name {
       flex: 1;
       font-size: 0.84rem;
       color: var(--text);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-weight: 500;
   }
   
   .file-list-size {
       font-size: 0.74rem;
       color: var(--text-muted);
       width: 75px;
       text-align: right;
       flex-shrink: 0;
   }
   
   .file-list-date {
       font-size: 0.74rem;
       color: var(--text-muted);
       width: 115px;
       text-align: right;
       flex-shrink: 0;
   }
   
   .file-list-actions {
       display: flex;
       gap: 0.35rem;
       flex-shrink: 0;
   }
   
   /* ── Empty State ─────────────────────────────────────── */
   .empty-state {
       text-align: center;
       padding: 3.5rem 2rem;
   }
   
   .empty-state-icon {
       font-size: 2.5rem;
       margin-bottom: 0.75rem;
       opacity: 0.35;
   }
   
   .empty-state-title {
       font-size: 1rem;
       font-weight: 700;
       color: var(--text-sub);
       margin-bottom: 0.35rem;
   }
   
   .empty-state-text {
       font-size: 0.85rem;
       color: var(--text-muted);
   }
   
   /* ── Welcome Screen ──────────────────────────────────── */
   .welcome-screen {
       display: flex;
       flex-direction: column;
       align-items: start;
       justify-content: center;
       flex: 1;
       padding: 1rem 0rem 4rem;
       text-align: left;
       max-width: 1200px;
       margin: 0;
   }

   .welcome-screen .home-tips-promo {
       align-self: stretch;
   }

   .brand-links-dir-nav {
       margin-bottom: 0.75rem;
   }
   
   .welcome-title  {
       font-size: 2rem;
       font-weight: 700;
       color: var(--text);
       letter-spacing: -0.03em;
       line-height: 1.2;
   }
   
   .welcome-title span {
       color: var(--accent-dark);
   }
   
   .welcome-sub {
       color: var(--text-muted);
       font-size: 0.95rem;
       max-width: 480px;
       margin-bottom: 1.5rem;
   }
   
   .welcome-arrow {
       color: var(--text-subtle);
       font-size: 0.82rem;
       margin-bottom: 2rem;
   }
   
   .welcome-feature-cards {
       display: flex;
       flex-wrap: wrap;
       gap: 0.9rem;
       margin: 0.75rem 0 1.25rem;
       width: 100%;
       max-width: 860px;
   }

   .welcome-feature-card {
       display: flex;
       align-items: flex-start;
       gap: 1rem;
       flex: 0 1 calc(33.333% - 0.6rem);
       min-width: 220px;
       background: var(--surface-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 1.1rem 1.25rem;
       transition: box-shadow var(--transition), border-color var(--transition);
   }

   .welcome-feature-card:hover {
       box-shadow: var(--shadow-md);
       border-color: color-mix(in srgb, var(--accent-dark) 35%, var(--border));
   }

   .welcome-feature-card__icon {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       width: 2.4rem;
       height: 2.4rem;
       border-radius: 50%;
       background: var(--accent-light);
       color: var(--accent-dark);
       font-size: 1rem;
   }

   .welcome-feature-card:nth-child(2) .welcome-feature-card__icon {
       background: var(--resources-design-head-bg);
       color: var(--resources-design);
   }

   .welcome-feature-card:nth-child(3) .welcome-feature-card__icon {
       background: var(--resources-inspiration-head-bg);
       color: var(--resources-inspiration);
   }

   .welcome-feature-card__title {
       font-size: 0.85rem;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 0.2rem;
   }

   .welcome-feature-card__text {
       font-size: 0.82rem;
       color: var(--text-sub);
       line-height: 1.45;
   }

   .welcome-screen p {
       max-width: 1020px;
       color: var(--text-sub);
       font-size: 0.9rem;
       line-height: 1.7;
       margin-bottom: .8rem;
   }
   
   .custom-text-list {
       list-style-type: none;
       font-weight: 500;
       color: var(--accent-dark);
       margin-top: .6rem
   }
   
   .custom-text-list li {
       margin-bottom: .6rem;
   }

   /* ── Home: Tips & Tricks promo (inside welcome section) ── */
   .home-tips-promo {
       display: flex;
       align-items: center;
       gap: 1rem 1.25rem;
       width: 100%;
       padding: 1.15rem 1.35rem;
       background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       text-decoration: none;
       color: inherit;
       transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
   }

   .home-tips-promo:hover,
   .home-tips-promo:focus-visible {
       border-color: var(--accent-mid);
       box-shadow: var(--shadow);
       transform: translateY(-1px);
       outline: none;
   }

   .home-tips-promo-icon {
       flex-shrink: 0;
       width: 4.25rem;
       height: 4.25rem;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: var(--radius);
       background: var(--accent-light);
       color: var(--accent-dark);
       font-size: 2rem;
   }

   .home-tips-promo-body {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 0.35rem;
       text-align: left;
   }

   .home-tips-promo-title {
       font-size: 1.05rem;
       font-weight: 700;
       color: var(--text);
       letter-spacing: -0.02em;
   }

   .home-tips-promo-blurb {
       font-size: 0.88rem;
       line-height: 1.55;
       color: var(--text-muted);
   }

   .home-tips-promo-arrow {
       flex-shrink: 0;
       width: 2.25rem;
       height: 2.25rem;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       background: var(--surface);
       border: 1px solid var(--accent-mid);
       color: var(--accent-dark);
       font-size: 0.9rem;
       transition: background var(--transition), color var(--transition), border-color var(--transition);
   }

   .home-tips-promo:hover .home-tips-promo-arrow,
   .home-tips-promo:focus-visible .home-tips-promo-arrow {
       background: var(--accent-dark);
       color: #fff;
       border-color: var(--accent-dark);
   }

   @media (max-width: 720px) {
       .home-tips-promo {
           flex-wrap: wrap;
           padding: 1rem 1.1rem;
       }

       .home-tips-promo-arrow {
           margin-left: auto;
       }
   }
   
   /* ── Modals ──────────────────────────────────────────── */
   .modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0,0,0,0.35);
       backdrop-filter: blur(3px);
       z-index: 1000;
       display: none;
       align-items: flex-start;
       justify-content: center;
       padding: 2rem 1rem;
       overflow-y: auto;
   }
   
   .modal-overlay.active {
       display: flex;
   }
   
   .modal {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       width: 100%;
       max-width: 480px;
       box-shadow: var(--shadow-lg);
       animation: modalIn 0.18s ease;
       margin: auto 0;
       flex-shrink: 0;
   }
   
   @keyframes modalIn {
       from { opacity: 0; transform: translateY(10px) scale(0.98); }
       to { opacity: 1; transform: none; }
   }
   
   .modal-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1.1rem 1.5rem;
       border-bottom: 1px solid var(--border);
   }
   
   .modal-title {
       font-size: 1rem;
       font-weight: 700;
       color: var(--text);
       letter-spacing: -0.01em;
   }
   
   .modal-close {
       background: none;
       border: none;
       color: var(--text-muted);
       cursor: pointer;
       font-size: 1.1rem;
       padding: 0.2rem;
       border-radius: 4px;
       transition: all var(--transition);
   }
   
   .modal-close:hover {
       background: var(--surface-2);
       color: var(--text);
   }
   
   .modal-body {
       padding: 1.25rem 1.5rem;
   }
   
   .modal-footer {
       padding: 0.9rem 1.5rem;
       border-top: 1px solid var(--border);
       display: flex;
       justify-content: flex-end;
       gap: 0.6rem;
   }
   
   /* ── Forms ───────────────────────────────────────────── */
   .form-group {
       margin-bottom: 1rem;
   }
   
   .form-group:last-child {
       margin-bottom: 0;
   }
   
   .hub-mail-form {
       padding: 20px;
       background: #f2f2f2;
       border-radius: 10px;
       border: 1px solid #000;
   }
   
   .form-label {
       display: block;
       font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-sub);
       margin-bottom: 0.4rem;
   }
   
   .form-control {
       width: 100%;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 0.6rem 0.85rem;
       color: var(--text);
       font-family: var(--font);
       font-size: 0.875rem;
       transition: border-color var(--transition), box-shadow var(--transition);
       outline: none;
   }
   
   .form-control:focus {
       border-color: var(--blue);
       box-shadow: 0 0 0 3px rgba(26,108,245,0.1);
   }
   
   .form-control::placeholder {
       color: var(--text-subtle);
   }
   
   select.form-control {
       cursor: pointer;
       background-color: var(--surface);
   }
   
   textarea.form-control {
       resize: vertical;
       min-height: 60px;
   }
   
   /* ── Dropzone ────────────────────────────────────────── */
   .dropzone {
       border: 2px dashed var(--border);
       border-radius: var(--radius);
       padding: 1.75rem;
       text-align: center;
       cursor: pointer;
       transition: all var(--transition);
       color: var(--text-muted);
       position: relative;
       background: var(--surface-2);
       overflow: hidden;
   }
   
   .dropzone:hover,
   .dropzone.dragover {
       border-color: var(--blue);
       background: var(--blue-light);
       color: var(--blue);
   }
   
   .dropzone input[type="file"] {
       position: absolute;
       inset: 0;
       opacity: 0;
       cursor: pointer;
       width: 100%;
       height: 100%;
   }
   
   .dropzone-icon {
       font-size: 1.75rem;
       margin-bottom: 0.4rem;
   }
   
   .dropzone-text {
       font-size: 0.875rem;
       font-weight: 500;
   }
   
   .dropzone-sub {
       font-size: 0.74rem;
       margin-top: 0.2rem;
       color: var(--text-subtle);
   }
   
   /* ── Upload Progress ─────────────────────────────────── */
   .upload-list {
       margin-top: 0.75rem;
       display: flex;
       flex-direction: column;
       gap: 0.4rem;
   }
   
   .upload-item {
       background: var(--surface-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 0.6rem 0.8rem;
   }
   
   .upload-item-name {
       font-size: 0.8rem;
       color: var(--text);
       margin-bottom: 0.3rem;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-weight: 500;
   }
   
   .progress-bar {
       height: 3px;
       background: var(--border);
       border-radius: 2px;
       overflow: hidden;
   }
   
   .progress-fill {
       height: 100%;
       background: var(--accent);
       border-radius: 2px;
       transition: width 0.3s ease;
   }
   
   .upload-status {
       font-size: 0.7rem;
       color: var(--text-muted);
       margin-top: 0.2rem;
   }
   
   .upload-status.success {
       color: var(--success);
   }
   
   .upload-status.error {
       color: var(--danger);
   }
   
   /* ── Toast ───────────────────────────────────────────── */
   .toast-container {
       position: fixed;
       bottom: 1.25rem;
       right: 1.25rem;
       z-index: 2000;
       display: flex;
       flex-direction: column;
       gap: 0.4rem;
   }
   
   .toast {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 0.7rem 1rem;
       font-size: 0.84rem;
       color: var(--text);
       box-shadow: var(--shadow-lg);
       animation: toastIn 0.2s ease;
       max-width: 300px;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-weight: 500;
   }
   
   .toast.success {
       border-left: 3px solid var(--success);
   }
   
   .toast.error {
       border-left: 3px solid var(--danger);
   }
   
   .toast.info {
       border-left: 3px solid var(--blue);
   }
   
   @keyframes toastIn {
       from { opacity: 0; transform: translateX(16px); }
       to { opacity: 1; transform: none; }
   }
   
   /* ── Badges ──────────────────────────────────────────── */
   .badge {
       display: inline-block;
       padding: 0.18rem 0.5rem;
       border-radius: 4px;
       font-size: 0.65rem;
       text-transform: uppercase;
       letter-spacing: 0.07em;
       font-weight: 700;
   }
   
   .badge-superadmin {
       background: #fef3c7;
       color: #92400e;
       border: 1px solid #fde68a;
   }
   
   .badge-admin {
       background: var(--accent-light);
       color: var(--accent-dark);
       border: 1px solid var(--accent-mid);
   }
   
   .badge-user {
       background: var(--surface-2);
       color: var(--text-muted);
       border: 1px solid var(--border);
   }
   
   /* ── Admin cards ─────────────────────────────────────── */
   .admin-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
       gap: 0.85rem;
   }
   
   .admin-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 1.1rem 1.25rem;
       transition: border-color var(--transition), box-shadow var(--transition);
       box-shadow: var(--shadow-sm);
       display: flex;
       flex-direction: column;
   }
   
   .admin-card:hover {
       border-color: var(--border-hover);
       box-shadow: var(--shadow);
   }
   
   .admin-card-title {
       font-size: 0.95rem;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 0.2rem;
       letter-spacing: -0.01em;
   }
   
   .admin-card-sub {
       font-size: 0.8rem;
       color: var(--text-muted);
       margin-bottom: 0.85rem;
   }
   
   .admin-card-actions {
       display: flex;
       gap: 0.5rem;
       margin-top: auto;
       padding-top: 0.5rem;
   }
   
   .home-brand-card {
       cursor: pointer;
   }
   
   .home-brand-card:hover,
   .home-brand-card:focus-visible {
       border-color: var(--blue);
       transform: translateY(-2px);
       box-shadow: var(--shadow);
       outline: none;
   }
   
   #homeBrandCards {
       width:100%
   }
   
   .admin-card-logo {
       margin-bottom: 0.75rem;
       text-align: center;
   }
   
   .admin-card-logo img {
       max-width: 100%;
       max-height: 56px;
       object-fit: contain;
       display: block;
       margin: 0 auto;
   }
   
   /* ── User Table (Manage Users) ───────────────────────── */
   .user-table {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       box-shadow: var(--shadow-sm);
   }
   
   .user-row {
       display: flex;
       align-items: center;
       padding: 0.7rem 1rem;
       border-bottom: 1px solid var(--border);
       gap: 0.85rem;
   }
   
   .user-row.user-row-last {
       border-bottom: none;
   }
   
   .user-row-avatar {
       width: 32px;
       height: 32px;
       background: var(--blue-light);
       border: 1.5px solid var(--blue-mid);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.68rem;
       font-weight: 700;
       flex-shrink: 0;
       color: var(--blue);
   }
   
   .user-row-info {
       flex: 1;
       min-width: 0;
   }
   
   .user-row-name {
       font-size: 0.875rem;
       font-weight: 600;
   }
   
   .user-row-email {
       font-size: 0.75rem;
       color: var(--text-muted);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   .user-row-actions {
       display: flex;
       gap: 0.35rem;
       flex-shrink: 0;
   }
   
   /* ── Sidebar toggle (mobile) ─────────────────────────── */
   .sidebar-toggle {
       display: none;
       background: none;
       border: none;
       color: var(--text);
       font-size: 1.2rem;
       cursor: pointer;
       padding: 0.25rem;
   }
   
   .sidebar-close {
       display: none;
       background: none;
       border: none;
       color: rgba(255,255,255,0.5);
       font-size: 1.1rem;
       cursor: pointer;
       padding: 0.25rem;
       transition: color var(--transition);
   }
   
   .sidebar-close:hover {
       color: #fff;
   }
   
   @media (min-width: 1024px) {
       .brand-hero-icon {
           width: 80px;
           height: 80px;
           font-size: 1.5rem;
       }
   }
   
   /* ── Responsive ──────────────────────────────────────── */
   @media (max-width: 768px) {
       .sidebar {
           transform: translateX(-100%);
       }
   
       .sidebar.open {
           transform: translateX(0);
           box-shadow: var(--shadow-lg);
       }
   
       .main-content {
           margin-left: 0;
       }

       .welcome-screen {
         
           padding: 1rem 0rem 1.25rem;
        
       }

       .welcome-feature-card {
           flex: 0 1 100%;
           min-width: 0;
       }
   
       .sidebar-toggle {
           display: flex;
           align-items: center;
       }
   
       .sidebar-close {
           display: flex;
           align-items: center;
           justify-content: center;
       }
   
       .sidebar-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
       }
   
       .sidebar-overlay {
           display: none;
           position: fixed;
           inset: 0;
           background: rgba(0,0,0,0.3);
           z-index: 99;
       }
   
       .sidebar-overlay.active {
           display: block;
       }
   
       .folder-grid {
           grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       }
   
       .file-grid {
           grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
       }
   
       .brand-hero-stats {
           display: none;
       }

   }
   
   @media (max-width: 920px) {
       .header-btn .btn-label {
           display: none;
       }
   
       .header-btn {
           padding: 0.4rem;
           width: 32px;
           height: 32px;
           justify-content: center;
       }
   
       .tip-file-row {
           flex-wrap: wrap;
       }
   
       .tip-file-name {
           flex-basis: calc(100% - 2rem);
           min-width: 0;
       }
   
       .tip-file-size {
           width: auto;
           text-align: left;
       }
   
       .tip-file-btns {
           margin-left: auto;
       }
   
       .user-row {
           flex-wrap: wrap;
       }
   
       .user-row-info {
           flex-basis: calc(100% - 3rem);
           min-width: 0;
       }
   
       .user-row-actions {
           margin-left: auto;
       }
   }
   
   @media (max-width: 768px) {
       .tip-card-top {
           flex-direction: column;
           align-items: stretch;
       }
   
       .tip-card-actions {
           order: -1;
           align-items: stretch;
           width: 100%;
       }
   
       .tip-card-actions-icons {
           justify-content: flex-start;
       }
   
       .tip-card-footer-toolbar {
           justify-content: flex-start;
       }
   }
   
   /* ── Scrollbar ───────────────────────────────────────── */
   ::-webkit-scrollbar {
       width: 5px;
       height: 5px;
   }
   
   ::-webkit-scrollbar-track {
       background: transparent;
   }
   
   ::-webkit-scrollbar-thumb {
       background: var(--border);
       border-radius: 4px;
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: var(--border-hover);
   }
   
   /* ── Tooltips ────────────────────────────────────────── */
   .tooltip {
       position: fixed;
       z-index: 9999;
       padding: 0.35rem 0.65rem;
       background: var(--navy);
       color: #fff;
       font-family: var(--font);
       font-size: 0.72rem;
       font-weight: 500;
       border-radius: 6px;
       pointer-events: none;
       white-space: nowrap;
       opacity: 0;
       transform: translateY(4px);
       transition: opacity var(--transition), transform var(--transition);
       box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   }
   
   .tooltip.visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   /* ── Utilities ───────────────────────────────────────── */
   .hidden {
       display: none !important;
   }
   
   .text-muted {
       color: var(--text-muted);
   }
   
   /* ── Tips / Resources cards ──────────────────────────── */

   .resources-page-banner__img {
       display: block;
       width: 100%;
       height: auto;
       border-radius:20px;
   }
   
   .tips-page-head {
       margin: 1rem 0 1.1rem;
       padding: 0.75rem 1rem;
       border-radius: var(--radius-sm);
       background: transparent;
   }
   
   .tips-page-head-main {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 0.55rem;
   }
   
   .tips-page-subtitle {
       font-size: 0.95rem;
       font-weight: 500;
       letter-spacing: 0;
       line-height: 1.55;
       margin: 0;
       max-width: 90rem;
       color: var(--text);
   }
   
   @media (min-width: 1200px) {
       .tips-page-subtitle {
           font-size: 1.3rem;
       }
   }
   
   .tips-page-head--design .tips-page-subtitle,
   .tips-page-head--handy .tips-page-subtitle {
       color: #000;
   }
   
   .inspiration-placeholder {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: min(52vh, 28rem);
       margin-top: 0.5rem;
   }
   
   .inspiration-placeholder > i {
       font-size: clamp(4.5rem, 18vw, 9rem);
       line-height: 1;
       color: var(--resources-inspiration-title);
       opacity: 0.22;
   }
   
   #tipsPanel.tips-panel--design .empty-state-icon {
       color: var(--resources-design-border);
       opacity: 0.55;
   }
   
   #tipsPanel.tips-panel--handy .empty-state-icon {
       color: var(--resources-handy-border);
       opacity: 0.55;
   }
   
   .tips-list {
       display: flex;
       flex-direction: column;
       gap: 0.85rem;
   }
   
   #tipsPanel.tips-panel--design .tip-card {
       background: var(--surface);
       border: none;
       box-shadow: var(--shadow-sm);
   }
   
   #tipsPanel.tips-panel--design .tip-card:hover {
       box-shadow: 0 6px 20px color-mix(in srgb, var(--resources-design) 18%, transparent);
   }
   
   #tipsPanel.tips-panel--design .tip-card-title {
       color: color-mix(in srgb, var(--resources-design-title) 92%, var(--text));
   }
   
   #tipsPanel.tips-panel--design .tip-file-row {
       background: color-mix(in srgb, var(--resources-design-head-bg) 65%, var(--surface-2));
       border-color: color-mix(in srgb, var(--resources-design) 22%, var(--border));
   }
   
   #tipsPanel.tips-panel--design .tip-file-row:hover {
       background: color-mix(in srgb, var(--resources-design-head-bg) 85%, var(--surface-2));
       border-color: color-mix(in srgb, var(--resources-design) 35%, var(--border));
   }
   
   #tipsPanel.tips-panel--design .tip-card-footer-toolbar {
       border-top-color: color-mix(in srgb, var(--resources-design) 22%, var(--border));
   }
   
   #tipsPanel.tips-panel--design .tip-card-admin .tip-card-grip {
       background: color-mix(in srgb, var(--resources-design-head-bg) 70%, var(--surface-2));
       border-right-color: color-mix(in srgb, var(--resources-design) 20%, var(--border));
       color: color-mix(in srgb, var(--resources-design-title) 75%, var(--text-subtle));
   }
   
   #tipsPanel.tips-panel--design .tip-link-icon {
       color: var(--resources-design-title);
   }
   
   #tipsPanel.tips-panel--handy .tip-card {
       background: var(--surface);
       border: none;
       box-shadow: var(--shadow-sm);
   }
   
   #tipsPanel.tips-panel--handy .tip-card:hover {
       box-shadow: 0 6px 20px color-mix(in srgb, var(--resources-handy-title) 16%, transparent);
   }
   
   /* Non-admin: left accent only (no other card borders) */
   #tipsPanel.tips-panel--design .tip-card:not(.tip-card-admin) {
       border-left: 2rem solid color-mix(in srgb, var(--resources-design-title) 92%, var(--text));
   }
   
   #tipsPanel.tips-panel--handy .tip-card:not(.tip-card-admin) {
       border-left: 2rem solid color-mix(in srgb, var(--resources-handy-title) 88%, var(--text));
   }
   
   #tipsPanel.tips-panel--handy .tip-card-title {
       color: color-mix(in srgb, var(--resources-handy-title) 88%, var(--text));
   }
   
   #tipsPanel.tips-panel--handy .tip-file-row {
       background: color-mix(in srgb, var(--accent-light) 55%, var(--surface-2));
       border-color: color-mix(in srgb, var(--resources-handy-title) 22%, var(--border));
   }
   
   #tipsPanel.tips-panel--handy .tip-file-row:hover {
       background: color-mix(in srgb, var(--accent-light) 75%, var(--surface-2));
       border-color: color-mix(in srgb, var(--resources-handy-title) 34%, var(--border));
   }
   
   #tipsPanel.tips-panel--handy .tip-card-footer-toolbar {
       border-top-color: color-mix(in srgb, var(--resources-handy-title) 20%, var(--border));
   }
   
   #tipsPanel.tips-panel--handy .tip-card-admin .tip-card-grip {
       background: color-mix(in srgb, var(--accent-light) 65%, var(--surface-2));
       border-right-color: color-mix(in srgb, var(--resources-handy-title) 18%, var(--border));
       color: color-mix(in srgb, var(--resources-handy-title) 70%, var(--text-subtle));
   }
   
   #tipsPanel.tips-panel--handy .tip-link-icon {
       color: var(--resources-handy-title);
   }
   
   /* Tip row CTAs (Preview / Download / Open) — black / white, not admin footer Add actions */
   #tipsPanel.tips-panel--design .tip-card .tip-file-btns .btn.btn-secondary:not(.btn-danger),
   #tipsPanel.tips-panel--handy .tip-card .tip-file-btns .btn.btn-secondary:not(.btn-danger) {
       background: #000;
       color: #fff;
       border-color: #000;
       font-weight: 700;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
   
   #tipsPanel.tips-panel--design .tip-card .tip-file-btns .btn.btn-secondary:not(.btn-danger):hover,
   #tipsPanel.tips-panel--handy .tip-card .tip-file-btns .btn.btn-secondary:not(.btn-danger):hover {
       background: #1f2937;
       border-color: #1f2937;
       color: #fff;
       transform: translateY(-1px);
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
   }
   
   .tip-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 1.1rem 1.25rem;
       box-shadow: var(--shadow-sm);
       transition: border-color var(--transition);
   }
   
   #tipsPanel .tip-card {
       border: none;
   }
   
   .tip-card:hover {
       border-color: var(--border-hover);
   }
   
   #tipsPanel .tip-card:hover {
       border: none;
   }
   
   .tip-card-admin {
       display: flex;
       align-items: stretch;
       gap: 0.75rem;
   }
   
   .tip-card-body {
       flex: 1;
       min-width: 0;
   }
   
   .tip-card-grip {
       display: flex;
       align-items: center;
       justify-content: center;
       align-self: stretch;
       width: 2rem;
       flex-shrink: 0;
       margin: -1.1rem 0 -1.1rem -1.25rem;
       padding: 0 0.35rem;
       border-top-left-radius: var(--radius);
       border-bottom-left-radius: var(--radius);
       background: var(--surface-2);
       border-right: 1px solid var(--border);
       cursor: grab;
       color: var(--text-subtle);
       font-size: 0.85rem;
       user-select: none;
       touch-action: none;
   }
   
   .tip-card-grip:active {
       cursor: grabbing;
   }
   
   .tip-card.dragging {
       opacity: 0.5;
   }
   
   .tip-card-top {
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
       justify-content: space-between;
       gap: 0.65rem 1rem;
       margin-bottom: 0.5rem;
   }
   
   .tip-card-title {
       font-size: 0.95rem;
       font-weight: 700;
       color: var(--text);
       letter-spacing: -0.01em;
       flex: 1;
       min-width: 0;
   }
   
   .tip-card-actions {
       display: flex;
       flex-shrink: 0;
       max-width: 100%;
       align-items: flex-start;
   }
   
   .tip-card-actions-icons {
       display: flex;
       flex-wrap: wrap;
       gap: 0.2rem;
       justify-content: flex-end;
   }
   
   .tip-card-footer-toolbar {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem;
       justify-content: flex-end;
       align-items: center;
       margin-top: 0.85rem;
       padding-top: 0.85rem;
       border-top: 1px solid var(--border);
   }
   
   .tip-card-empty-msg {
       font-size: 0.8rem;
       color: var(--text-subtle);
       padding: 0.4rem 0 0;
   }
   
   .tip-card-desc {
       font-size: 0.84rem;
       line-height: 1.55;
       color: var(--text-muted);
       margin: 0 0 0.85rem;
       white-space: pre-wrap;
       clear: both;
   }
   
   .tip-files {
       display: flex;
       flex-direction: column;
       gap: 0.35rem;
   }
   
   .tip-file-row {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       padding: 0.5rem 0.75rem;
       background: var(--surface-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       transition: background var(--transition);
   }
   
   .tip-file-row:hover {
       background: var(--bg-alt);
   }
   
   .tip-file-icon {
       font-size: 1rem;
       flex-shrink: 0;
   }
   
   .tip-file-name {
       flex: 1;
       font-size: 0.82rem;
       font-weight: 500;
       color: var(--text);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   .tip-file-size {
       font-size: 0.72rem;
       color: var(--text-muted);
       flex-shrink: 0;
   }
   
   .tip-file-btns {
       display: flex;
       gap: 0.35rem;
       flex-shrink: 0;
   }
   
   .tip-link-icon {
       color: var(--text-muted);
   }
   
   .tip-link-url {
       max-width: 14rem;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   /* ── Login Page ──────────────────────────────────────── */
   body.login-page {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
       background: var(--navy);
   }
   
   .login-bg {
       position: fixed;
       inset: 0;
       background: radial-gradient(ellipse at 70% 30%, rgba(91,222,215,0.08) 0%, transparent 60%);
       pointer-events: none;
   }
   
   .login-wrap {
       width: 100%;
       max-width: 420px;
       padding: 1.5rem;
       position: relative;
       z-index: 1;
   }
   
   .login-logo-wrap {
       text-align: center;
       margin-bottom: 1rem;
   }
   
   .login-site-logo {
       display: block;
       max-width: 160px;
       margin: 0 auto;
   }
   
   .login-logo {
       font-size: 1.5rem;
       font-weight: 700;
       color: #fff;
       margin-bottom: 0.2rem;
       letter-spacing: -0.02em;
   }
   
   .login-sub {
       color: rgba(255,255,255,0.55);
       font-size: 0.85rem;
       margin-bottom: 2rem;
   }
   
   .login-card {
       background: #fff;
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 2rem;
       box-shadow: var(--shadow);
   }
   
   .login-card h2 {
       font-size: 1.2rem;
       font-weight: 700;
       color: var(--text);
       margin-bottom: 1.5rem;
       letter-spacing: -0.02em;
   }
   
   .remember-row {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       margin-bottom: 1.25rem;
   }
   
   .remember-row input[type="checkbox"] {
       width: 16px;
       height: 16px;
       accent-color: var(--accent);
       cursor: pointer;
       flex-shrink: 0;
   }
   
   .remember-row label {
       font-size: 0.85rem;
       color: var(--text-muted);
       cursor: pointer;
       user-select: none;
   }
   
   .btn-login {
       width: 100%;
       background: var(--accent);
       color: var(--navy);
       border: none;
       border-radius: var(--radius-sm);
       padding: 0.8rem;
       font-family: var(--font);
       font-size: 0.9rem;
       font-weight: 700;
       cursor: pointer;
       transition: background var(--transition), transform var(--transition);
   }
   
   .btn-login:hover {
       background: var(--accent-dark);
       transform: translateY(-1px);
   }
   
   .btn-login:active {
       transform: translateY(0);
   }
   
   .password-wrap {
       position: relative;
   }
   
   .password-wrap .form-control {
       padding-right: 2.5rem;
   }
   
   .password-toggle {
       position: absolute;
       right: 0;
       top: 0;
       bottom: 0;
       width: 2.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       background: none;
       border: none;
       color: var(--text-subtle);
       cursor: pointer;
       font-size: 0.85rem;
       transition: color var(--transition);
   }
   
   .password-toggle:hover {
       color: var(--text);
   }
   
   .error-msg {
       background: var(--danger-bg);
       border: 1px solid #fecaca;
       color: var(--danger);
       border-radius: var(--radius-sm);
       padding: 0.7rem 1rem;
       font-size: 0.85rem;
       margin-bottom: 1.25rem;
   }
   
   /* ── Logo Upload ────────────────────────────────────── */
   .logo-upload-area {
       position: relative;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 80px;
       height: 80px;
       border: 2px dashed var(--border);
       border-radius: var(--radius);
       cursor: pointer;
       overflow: hidden;
       transition: border-color var(--transition);
   }
   
   .logo-upload-area:hover {
       border-color: var(--blue);
   }
   
   .logo-upload-prompt {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.25rem;
       font-size: 0.7rem;
       color: var(--text-muted);
       text-align: center;
       padding: 0.4rem;
   }
   
   .logo-upload-prompt i {
       font-size: 1.2rem;
   }
   
   .logo-preview {
       width: 100%;
       height: 100%;
   }
   
   .logo-preview img {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }
   
   .logo-remove-btn {
       position: absolute;
       top: 2px;
       right: 2px;
       width: 20px;
       height: 20px;
       border-radius: 50%;
       border: none;
       background: var(--danger);
       color: #fff;
       font-size: 0.6rem;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       opacity: 0;
       transition: opacity var(--transition);
   }
   
   .logo-upload-area:hover .logo-remove-btn {
       opacity: 1;
   }
   
   /* ── Main Image Upload ────────────────────────────── */
   .main-image-upload-area {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100px;
       border: 2px dashed var(--border);
       border-radius: var(--radius);
       cursor: pointer;
       overflow: hidden;
       transition: border-color var(--transition);
       background: var(--surface-2);
   }
   
   .main-image-upload-area:hover {
       border-color: var(--blue);
   }
   
   .main-image-upload-prompt {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.8rem;
       color: var(--text-muted);
   }
   
   .main-image-upload-prompt i {
       font-size: 1.1rem;
   }
   
   .main-image-preview {
       width: 100%;
       height: 100%;
   }
   
   .main-image-preview img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .main-image-upload-area:hover .logo-remove-btn {
       opacity: 1;
   }
   
   .files-drop-area {
       position: relative;
   }
   
   /* ── Brand Overview / Brand Items ─────────────────── */
   .brand-overview {
       margin-top: 2rem;
   }
   
   .brand-overview .section-title {
       margin-bottom: 1rem;
   }
   
   .brand-items-panel {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       display: flex;
       min-height: 300px;
       overflow: hidden;
       box-shadow: var(--shadow-sm);
   }
   
   .brand-items-sidebar {
       width: 280px;
       min-width: 220px;
       border-right: 1px solid var(--border);
       display: flex;
       flex-direction: column;
       background: var(--surface-2);
   }
   
   .brand-items-list {
       flex: 1;
       overflow-y: auto;
       padding: 0.5rem;
   }
   
   .brand-item-row {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.55rem 0.75rem;
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: background var(--transition), color var(--transition);
       font-size: 0.84rem;
       font-weight: 500;
       color: var(--text-sub);
       user-select: none;
       position: relative;
   }
   
   .brand-item-row:hover,
   .brand-item-row:focus-visible {
       background: var(--bg-alt);
       outline: none;
   }
   
   .brand-item-row.active {
       background: var(--accent-light);
       color: var(--accent-dark);
       font-weight: 600;
   }
   
   .brand-item-row .item-grip {
       cursor: grab;
       color: var(--text-subtle);
       font-size: 0.7rem;
       flex-shrink: 0;
       padding: 0.15rem;
   }
   
   .brand-item-row .item-grip:active {
       cursor: grabbing;
   }
   
   .brand-item-row .item-title {
       flex: 1;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   .brand-item-row .item-chevron {
       flex-shrink: 0;
       color: var(--text-muted);
       font-size: 0.65rem;
       opacity: 0.65;
       transition:
           color var(--transition),
           opacity var(--transition);
   }
   
   .brand-item-row:hover .item-chevron,
   .brand-item-row:focus-visible .item-chevron {
       color: var(--text-sub);
       opacity: 1;
   }
   
   .brand-item-row.active .item-chevron {
       color: var(--accent-dark);
       opacity: 1;
   }
   
   .brand-item-row .item-actions {
       display: flex;
       flex-shrink: 0;
       align-items: center;
   }
   
   .brand-item-row .item-actions button {
       background: none;
       border: none;
       color: var(--text-muted);
       cursor: pointer;
       font-size: 0.72rem;
       padding: 0.2rem 0.3rem;
       border-radius: 4px;
       transition: color var(--transition), background var(--transition);
   }
   
   .brand-item-row .item-actions button:hover {
       color: var(--danger);
       background: var(--danger-bg);
   }
   
   .brand-items-add {
       padding: 0.35rem 0.5rem 0.5rem;
   }
   
   .brand-items-add .btn {
       width: 100%;
       justify-content: center;
   }
   
   /* Single preview image; height follows active item. Fade wrapper swaps content in JS. */
   .brand-items-preview {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
       padding: 1.5rem;
       background: var(--bg-alt);
       position: relative;
   }
   
   .brand-items-preview-fade {
       width: 100%;
       max-width: 1600px;
       margin: 0 auto;
       text-align: center;
       transition: opacity 0.28s ease;
       opacity: 1;
   }
   
   .brand-items-preview-fade.brand-items-preview-fade--out {
       opacity: 0;
   }
   
   @media (prefers-reduced-motion: reduce) {
       .brand-items-preview-fade {
           transition: opacity 0.08s ease;
       }
   }

   .brand-item-link-btn {
       position: absolute;
       top: 0.75rem;
       right: 0.75rem;
       display: inline-flex;
       align-items: center;
       gap: 0.35rem;
       padding: 0.4rem 0.75rem;
       background: var(--blue);
       color: #fff;
       font-family: var(--font);
       font-size: 0.78rem;
       font-weight: 600;
       border-radius: var(--radius-sm);
       text-decoration: none;
       transition: background var(--transition), transform var(--transition);
       z-index: 2;
       box-shadow: var(--shadow-sm);
   }
   
   .brand-item-link-btn:hover {
       background: var(--blue-dark);
       color: #fff;
       transform: translateY(-1px);
       box-shadow: var(--shadow);
   }
   
   .brand-item-link-btn i {
       font-size: 0.7rem;
   }
   
   .brand-items-preview img {
       width: 100%;
       max-width: 1600px;
       height: auto;
       border-radius: var(--radius);
       cursor: zoom-in;
   }
   
   .brand-items-empty {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.5rem;
       color: var(--text-subtle);
       font-size: 0.85rem;
       text-align: center;
   }
   
   .brand-items-empty i {
       font-size: 2rem;
       opacity: 0.4;
   }
   
   .brand-item-row.dragging {
       opacity: 0.5;
       background: var(--blue-light);
   }

   /* Inspiration page — override accent colours with the inspiration (purple) palette */
   #inspirationPanel .brand-item-row.active {
       background: var(--resources-inspiration-head-bg);
       color: var(--resources-inspiration-title);
   }

   #inspirationPanel .brand-item-row.active .item-chevron {
       color: var(--resources-inspiration-title);
   }
   
   @media (max-width: 768px) {
       .brand-items-panel {
           flex-direction: column;
       }
   
       .brand-items-sidebar {
           width: 100%;
           min-width: auto;
           border-right: none;
           border-bottom: 1px solid var(--border);
       }
   
       .brand-items-preview {
           min-height: 200px;
       }
   }
   
   /* ── Drop Overlay ──────────────────────────────────── */
   .drop-overlay {
       position: absolute;
       inset: 0;
       z-index: 50;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(14, 33, 76, 0.06);
       border-radius: var(--radius);
       pointer-events: none;
   }
   
   .drop-overlay.hidden {
       display: none;
   }
   
   .drop-overlay-inner {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.6rem;
       padding: 2.5rem 3rem;
       background: var(--surface);
       border: 2px dashed var(--blue);
       border-radius: var(--radius-lg);
       color: var(--blue);
       font-size: 1rem;
       font-weight: 600;
       box-shadow: 0 8px 30px rgba(0,0,0,0.08);
   }
   
   .drop-overlay-inner i {
       font-size: 2rem;
   }
   
   /* ── Loading Skeletons ─────────────────────────────── */
   @keyframes shimmer {
       0% { background-position: -400px 0; }
       100% { background-position: 400px 0; }
   }
   
   .skel {
       background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
       background-size: 800px 100%;
       animation: shimmer 1.5s infinite linear;
       border-radius: var(--radius-sm);
   }
   
   .skel-text {
       height: 0.75rem;
       margin-bottom: 0.4rem;
   }
   
   .skel-text-lg {
       height: 1.1rem;
       margin-bottom: 0.5rem;
   }
   
   .skel-text-sm {
       height: 0.6rem;
   }
   
   .skel-circle {
       border-radius: 50%;
   }
   
   .skel-hero {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       padding: 1.25rem 1.5rem;
       margin-bottom: 1.5rem;
       display: flex;
       align-items: center;
       gap: 1.25rem;
       box-shadow: var(--shadow-sm);
   }
   
   .skel-main-image {
       border-radius: var(--radius-lg);
       margin-bottom: 1.25rem;
       height: 200px;
   }
   
   .skel-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 0.9rem 1rem;
       display: flex;
       flex-direction: column;
       gap: 0.35rem;
       box-shadow: var(--shadow-sm);
   }
   
   .skel-overview {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       display: flex;
       min-height: 250px;
       overflow: hidden;
       box-shadow: var(--shadow-sm);
       margin-top: 2rem;
   }
   
   .skel-overview-sidebar {
       width: 280px;
       min-width: 220px;
       border-right: 1px solid var(--border);
       background: var(--surface-2);
       padding: 0.75rem;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .skel-overview-preview {
       flex: 1;
       background: var(--bg-alt);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 2rem;
   }
   
   .skel-row {
       border-radius: var(--radius-sm);
       height: 2rem;
   }
   
   .skel-img {
       border-radius: var(--radius);
       width: 60%;
       height: 180px;
   }
   
   /* ── Who's who (team directory) ─────────────────────── */
   .whos-who-page-title {
       font-family: var(--font-display);
       font-size: 2rem;
       letter-spacing: 0.06em;
       margin: 0 0 1.25rem;
       font-weight: 700;
       color: var(--text);
   }
   
   .whos-who-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 1.25rem;
       align-items: stretch;
   }

   .whos-who-team-section {
       margin-bottom: 2rem;
   }

   .whos-who-team-section:last-child {
       margin-bottom: 0;
   }

   .whos-who-team-heading {
       font-family: var(--font-display);
       font-size: 1.35rem;
       font-weight: 700;
       letter-spacing: 0.04em;
       color: #000;
       margin: 0 0 1rem;
       display: flex;
       align-items: center;
       gap: 0.65rem;
   }

   .whos-who-team-heading::before {
       content: '';
       flex-shrink: 0;
       width: 1rem;
       height: 1rem;
       border-radius: 50%;
       background: var(--border);
   }

   /* Team sections: white panels; accent dots / cards still use Resources palette */
   .whos-who-team-section--management,
   .whos-who-team-section--design,
   .whos-who-team-section--web,
   .whos-who-team-section--video {
       box-shadow: var(--shadow-sm);
       background: #fff;
       border-radius: var(--radius-lg);
       padding: 1rem 1.25rem 1.35rem;
   }

   .whos-who-team-section--management .whos-who-team-heading::before {
       background: #c47f3a;
   }

   .whos-who-team-section--management .team-member-card {
       border-color: color-mix(in srgb, #c47f3a 22%, var(--border));
       box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, #c47f3a 10%, transparent);
   }

   .whos-who-team-section--management .team-member-card:hover {
       box-shadow: 0 4px 14px color-mix(in srgb, #c47f3a 14%, transparent);
   }

   .whos-who-team-section--design .whos-who-team-heading::before {
       background: var(--resources-design);
   }

   .whos-who-team-section--design .team-member-card {
       border-color: color-mix(in srgb, var(--resources-design) 22%, var(--border));
       box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--resources-design) 10%, transparent);
   }

   .whos-who-team-section--design .team-member-card:hover {
       box-shadow: 0 4px 14px color-mix(in srgb, var(--resources-design) 14%, transparent);
   }

   .whos-who-team-section--web .whos-who-team-heading::before {
       background: var(--resources-handy-title);
   }

   .whos-who-team-section--web .team-member-card {
       border-color: color-mix(in srgb, var(--resources-handy-title) 22%, var(--border));
       box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--resources-handy-title) 10%, transparent);
   }

   .whos-who-team-section--web .team-member-card:hover {
       box-shadow: 0 4px 14px color-mix(in srgb, var(--resources-handy-title) 14%, transparent);
   }

   .whos-who-team-section--video .whos-who-team-heading::before {
       background: var(--resources-inspiration);
   }

   .whos-who-team-section--video .team-member-card {
       border-color: color-mix(in srgb, var(--resources-inspiration) 22%, var(--border));
       box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--resources-inspiration) 10%, transparent);
   }

   .whos-who-team-section--video .team-member-card:hover {
       box-shadow: 0 4px 14px color-mix(in srgb, var(--resources-inspiration) 14%, transparent);
   }

   .whos-who-team-section--design .team-member-email {
       color: var(--resources-design);
   }

   .whos-who-team-section--design .team-member-email:hover {
       color: color-mix(in srgb, var(--resources-design) 72%, #000);
   }

   .whos-who-team-section--web .team-member-email {
       color: var(--resources-handy-title);
   }

   .whos-who-team-section--web .team-member-email:hover {
       color: color-mix(in srgb, var(--resources-handy-title) 72%, #000);
   }

   .whos-who-team-section--video .team-member-email {
       color: var(--resources-inspiration);
   }

   .whos-who-team-section--video .team-member-email:hover {
       color: color-mix(in srgb, var(--resources-inspiration) 72%, #000);
   }

   .whos-who-team-section--management .team-member-email {
       color: #c47f3a;
   }

   .whos-who-team-section--management .team-member-email:hover {
       color: color-mix(in srgb, #c47f3a 72%, #000);
   }
   
   @media (max-width: 768px) {
       .whos-who-grid {
           justify-content: center;
       }
   }
   
   .team-member-card {
       max-width: 280px;
       width: 100%;
       background: #fff;
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       display: flex;
       flex-direction: column;
       overflow: hidden;
       transition: box-shadow 0.2s ease;
   }
   
   .team-member-photo {
       display: flex;
       justify-content: center;
       align-items: flex-start;
       padding: 1.35rem 1.25rem 0.65rem;
       background: #fff;
   }
   
   .team-member-photo img {
       width: 200px;
       height: 200px;
       max-width: min(200px, calc(100% - 0.5rem));
       aspect-ratio: 1;
       border-radius: 50%;
       object-fit: cover;
       display: block;
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   }
   
   .team-member-body {
       padding: 0.35rem 1.1rem 1.1rem;
       display: flex;
       flex-direction: column;
       gap: 0.3rem;
       flex: 1;
       text-align: center;
       align-items: center;
   }
   
   .team-member-name {
       font-weight: 700;
       font-size: 0.95rem;
       line-height: 1.3;
       color: var(--text);
   }
   
   .team-member-role {
       font-size: 0.8rem;
       color: var(--text-muted);
       line-height: 1.35;
   }
   
   .team-member-email {
       font-size: 0.78rem;
       color: var(--accent-dark);
       word-break: break-all;
       margin-top: 0.15rem;
   }
   
   .team-member-email:hover {
       text-decoration: underline;
   }
   
   .team-member-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 0.4rem;
       margin-top: 0.65rem;
       padding-top: 0.65rem;
       border-top: 1px solid var(--border);
       justify-content: center;
       width: 100%;
   }