/*
Theme Name: Cybe Hub Theme
Theme URI: https://cybehub.com.ng
Author: Cybe Hub
Author URI: https://cybehub.com.ng
Description: Cybe Hub custom neumorphic theme.
Version: 1.0.0
Text Domain: cybe-hub-theme
*/
  :root[data-theme="dark"] {
    --bg: #1a1e2e;
    --bg2: #141828;
    --surface: #1f2438;
    --surface2: #252b42;
    --text: #e2e8f8;
    --text2: #8892b0;
    --blue: #4d8ef8;
    --blue2: #3a7af0;
    --blue-glow: rgba(77,142,248,0.15);
    --neu-light: #2e3552;
    --neu-dark: #0a0c16;
    --nm-light: rgba(255,255,255,0.06);
    --nm-dark: rgba(0,0,0,0.6);
    --inset-light: rgba(0,0,0,0.6);
    --inset-dark: rgba(255,255,255,0.05);
    --border: rgba(212,175,110,0.14);
    --gold: #d4af6e;
    --gold2: #b8925a;
    --gold-glow: rgba(212,175,110,0.1);
  }
  :root[data-theme="light"] {
    --bg: #e8edf8;
    --bg2: #dce4f5;
    --surface: #edf1fb;
    --surface2: #f2f5fd;
    --text: #1a2040;
    --text2: #5a6482;
    --blue: #3a7af0;
    --blue2: #2568e0;
    --blue-glow: rgba(58,122,240,0.15);
    --neu-light: #ffffff;
    --neu-dark: #c8d4ee;
    --nm-light: rgba(255,255,255,0.9);
    --nm-dark: rgba(163,177,198,0.8);
    --inset-light: rgba(255,255,255,0.95);
    --inset-dark: rgba(163,177,198,0.55);
    --border: rgba(184,146,90,0.28);
    --gold: #a67c3d;
    --gold2: #8a6530;
    --gold-glow: rgba(166,124,61,0.12);
  }

  /* ===== STYLE MODE: FULL NEUMORPHISM, DEEP INTENSITY, NO DROP SHADOWS ===== */
  [data-style="neu"] * { box-shadow:none !important; text-shadow:none !important; border-color:transparent !important; }

  /* Raised surfaces — cards, tiles, rows (explicit list + generic catch-all for any *-card/*-chip/*-tile) */
  [data-style="neu"] .neu,
  [data-style="neu"] .service-card, [data-style="neu"] .pkg-card,
  [data-style="neu"] .cybe-ai-biz-card, [data-style="neu"] .cybe-ai-biz-body,
  [data-style="neu"] .drawer-link, [data-style="neu"] .profile-menu-item,
  [data-style="neu"] .p-stat, [data-style="neu"] .channel-item,
  [data-style="neu"] .settings-card, [data-style="neu"] .settings-row,
  [data-style="neu"] .hero-banner, [data-style="neu"] .banner-pill,
  [data-style="neu"] .style-option, [data-style="neu"] .nav-drawer,
  [data-style="neu"] .ai-widget, [data-style="neu"] .ai-header,
  [data-style="neu"] .toast, [data-style="neu"] .section-card,
  [data-style="neu"] .bottom-nav, [data-style="neu"] .header,
  [data-style="neu"] .brand-card, [data-style="neu"] .channel-card,
  [data-style="neu"] .cs-stat-chip, [data-style="neu"] .cybe-ai-composer-card,
  [data-style="neu"] .cybe-svc-card, [data-style="neu"] .fl-contract-card,
  [data-style="neu"] .fl-suggestion-card, [data-style="neu"] .form-chip,
  [data-style="neu"] .freelance-cta-card, [data-style="neu"] .inbox-card,
  [data-style="neu"] .portfolio-card, [data-style="neu"] .post-card,
  [data-style="neu"] .rev-card, [data-style="neu"] .stat-card,
  [data-style="neu"] .ai-assist-card, [data-style="neu"] .ai-account-chip,
  [data-style="neu"] .rev-summary, [data-style="neu"] .service-feat,
  [data-style="neu"] .rev-modal, [data-style="neu"] .compose-modal,
  [data-style="neu"] .ai-panel, [data-style="neu"] .info-modal,
  [data-style="neu"] .chat-bubble, [data-style="neu"] .quick-prompt-chip,
  [data-style="neu"] [class$="-card"], [data-style="neu"] [class*="-card "],
  [data-style="neu"] [class$="-chip"], [data-style="neu"] [class*="-chip "],
  [data-style="neu"] [class$="-tile"], [data-style="neu"] [class*="-tile "] {
    background:var(--surface) !important;
    border:1px solid var(--gold-glow) !important;
  }

  /* Recessed / pressed-in surfaces — inputs, search, compose bars */
  [data-style="neu"] .neu-inset,
  [data-style="neu"] .chat-input-row,
  [data-style="neu"] input, [data-style="neu"] textarea,
  [data-style="neu"] .forum-compose, [data-style="neu"] .ai-input-row,
  [data-style="neu"] .ai-input,
  [data-style="neu"] .rev-modal textarea, [data-style="neu"] .compose-textarea,
  [data-style="neu"] .comment-input-row, [data-style="neu"] .dm-search-row {
    background:var(--bg) !important;
    border:1px solid var(--gold-glow) !important;
    border-radius:14px;
  }

  /* DEEP raised shadow-pair with luxury gold rim-light (this IS the neumorphism) */
  [data-style="neu"] .neu,
  [data-style="neu"] .service-card, [data-style="neu"] .pkg-card,
  [data-style="neu"] .cybe-ai-biz-card, [data-style="neu"] .profile-menu-item,
  [data-style="neu"] .p-stat, [data-style="neu"] .settings-card, [data-style="neu"] .settings-row,
  [data-style="neu"] .hero-banner, [data-style="neu"] .banner-pill,
  [data-style="neu"] .style-option, [data-style="neu"] .nav-drawer,
  [data-style="neu"] .ai-widget, [data-style="neu"] .toast,
  [data-style="neu"] .section-card, [data-style="neu"] .bottom-nav,
  [data-style="neu"] .header,
  [data-style="neu"] .brand-card, [data-style="neu"] .channel-card,
  [data-style="neu"] .cs-stat-chip, [data-style="neu"] .cybe-ai-composer-card,
  [data-style="neu"] .cybe-svc-card, [data-style="neu"] .fl-contract-card,
  [data-style="neu"] .fl-suggestion-card, [data-style="neu"] .form-chip,
  [data-style="neu"] .freelance-cta-card, [data-style="neu"] .inbox-card,
  [data-style="neu"] .portfolio-card, [data-style="neu"] .post-card,
  [data-style="neu"] .rev-card, [data-style="neu"] .stat-card,
  [data-style="neu"] .ai-assist-card, [data-style="neu"] .ai-account-chip,
  [data-style="neu"] .rev-summary, [data-style="neu"] .service-feat,
  [data-style="neu"] .rev-modal, [data-style="neu"] .compose-modal,
  [data-style="neu"] .ai-panel, [data-style="neu"] .info-modal,
  [data-style="neu"] .chat-bubble, [data-style="neu"] .quick-prompt-chip,
  [data-style="neu"] [class$="-card"], [data-style="neu"] [class*="-card "],
  [data-style="neu"] [class$="-chip"], [data-style="neu"] [class*="-chip "],
  [data-style="neu"] [class$="-tile"], [data-style="neu"] [class*="-tile "] {
    box-shadow:
      10px 10px 22px var(--nm-dark),
      -10px -10px 22px var(--nm-light),
      0 0 0 1px var(--gold-glow) inset !important;
  }
  [data-style="neu"] .neu-inset,
  [data-style="neu"] .chat-input-row,
  [data-style="neu"] input, [data-style="neu"] textarea,
  [data-style="neu"] .forum-compose, [data-style="neu"] .ai-input-row,
  [data-style="neu"] .ai-input,
  [data-style="neu"] .rev-modal textarea, [data-style="neu"] .compose-textarea,
  [data-style="neu"] .comment-input-row, [data-style="neu"] .dm-search-row {
    box-shadow:
      inset 5px 5px 12px var(--inset-light),
      inset -5px -5px 12px var(--inset-dark) !important;
  }

  /* Circular / small interactive controls */
  [data-style="neu"] .neu-btn, [data-style="neu"] .icon-btn,
  [data-style="neu"] .cybe-ai-biz-call, [data-style="neu"] .cybe-ai-biz-btn,
  [data-style="neu"] .menu-icon, [data-style="neu"] .neu-circle,
  [data-style="neu"] .profile-bottom-tab-logo, [data-style="neu"] .cta-btn,
  [data-style="neu"] .drawer-close, [data-style="neu"] .theme-toggle,
  [data-style="neu"] .style-toggle, [data-style="neu"] .logo-mark,
  [data-style="neu"] .hamburger-btn, [data-style="neu"] .settings-toggle,
  [data-style="neu"] .profile-avatar-big, [data-style="neu"] .profile-avatar-banner,
  [data-style="neu"] .profile-edit-btn, [data-style="neu"] .profile-verified-badge,
  [data-style="neu"] .cybe-ai-small-avatar, [data-style="neu"] .service-tag,
  [data-style="neu"] .drawer-logo .logo-mark,
  [data-style="neu"] .pill, [data-style="neu"] .cs-range-tab,
  [data-style="neu"] .see-pkg-btn, [data-style="neu"] .btn-primary,
  [data-style="neu"] .btn-secondary, [data-style="neu"] .rev-cta-btn,
  [data-style="neu"] .rev-more-btn, [data-style="neu"] .rev-locked-note,
  [data-style="neu"] .form-submit-btn, [data-style="neu"] .cybe-ai-btn,
  [data-style="neu"] .profile-section-tab, [data-style="neu"] .fl-dash-tab,
  [data-style="neu"] .avatar, [data-style="neu"] .channel-icon,
  [data-style="neu"] .service-icon, [data-style="neu"] .service-icon-big,
  [data-style="neu"] .cybe-svc-icon, [data-style="neu"] .rev-avatar,
  [data-style="neu"] .post-avatar, [data-style="neu"] .chat-msg-avatar {
    background:var(--surface) !important;
    border:1px solid var(--gold-glow) !important;
    box-shadow:
      6px 6px 14px var(--nm-dark),
      -6px -6px 14px var(--nm-light) !important;
  }
  [data-style="neu"] .neu-btn:active, [data-style="neu"] .icon-btn:active,
  [data-style="neu"] .cybe-ai-biz-btn:active, [data-style="neu"] .profile-menu-item:active,
  [data-style="neu"] .style-option:active, [data-style="neu"] .pill.active,
  [data-style="neu"] .profile-section-tab.active, [data-style="neu"] .fl-dash-tab.active {
    box-shadow:
      inset 4px 4px 10px var(--inset-light),
      inset -4px -4px 10px var(--inset-dark) !important;
  }
  [data-style="neu"] .settings-toggle.on {
    box-shadow:
      inset 4px 4px 8px var(--inset-light),
      inset -4px -4px 8px var(--inset-dark) !important;
  }
  /* Subtle luxury gold edge — static, low-opacity, no animation */
  [data-style="neu"] body {
    box-shadow: inset 0 0 0 1px var(--gold-glow) !important;
  }
  [data-style="neu"] .header { border-bottom:1px solid var(--gold-glow) !important; }
  [data-style="neu"] .bottom-nav { border-top:1px solid var(--gold-glow) !important; }
  /* Contextual accent borders — vary the palette instead of gold everywhere */
  [data-style="neu"] .post-card.identity-main { border:1px solid rgba(77,142,248,0.22) !important; }
  [data-style="neu"] .post-card.identity-business { border:1px solid rgba(239,68,68,0.22) !important; }
  [data-style="neu"] .service-feat { border:1px solid rgba(212,175,110,0.25) !important; }
  [data-style="neu"] .rev-summary { border:1px solid rgba(34,197,94,0.22) !important; }
  [data-style="neu"] .ai-assist-card { border:1px solid rgba(77,142,248,0.25) !important; }
  [data-style="neu"] .theme-toggle::after, [data-style="neu"] .settings-toggle::after {
    box-shadow:
      3px 3px 6px var(--neu-dark),
      -3px -3px 6px var(--neu-light) !important;
  }
  [data-style="neu"] .pill.active {
    background:linear-gradient(135deg, var(--blue), var(--blue2)) !important;
    color:#fff !important;
    box-shadow:
      4px 4px 10px var(--neu-dark),
      -2px -2px 8px var(--nm-light) !important;
  }
  [data-style="neu"] .pill:not(.active) {
    background:var(--surface) !important;
    box-shadow:
      3px 3px 8px var(--neu-dark),
      -3px -3px 8px var(--neu-light) !important;
  }
  [data-style="neu"] .profile-banner-hero { border-radius:0 !important; overflow:hidden; }
  [data-style="neu"] .compose-modal, [data-style="neu"] .reaction-picker,
  [data-style="neu"] .typing-bubble, [data-style="neu"] .msg-reaction-pill {
    background:var(--surface) !important; border:none !important;
    box-shadow:6px 6px 12px var(--neu-dark), -6px -6px 12px var(--neu-light) !important;
  }
  [data-style="neu"] .compose-search {
    background:var(--bg) !important; border:none !important;
    box-shadow:inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light) !important;
  }
  [data-style="neu"] .msg-reaction-pill.mine { background:var(--blue-glow) !important; }
  [data-style="neu"] .pkg-card.premium { box-shadow:8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light) !important; }
  [data-style="neu"] .cybe-ai-biz-btn, [data-style="neu"] .cybe-ai-biz-btn-icon { color:var(--blue) !important; }
  [data-style="neu"] .style-option-check { background:transparent !important; }
  [data-style="neu"] .style-option.active .style-option-check {
    background:var(--surface) !important;
    box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light) !important;
    color:var(--blue) !important;
  }

  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  [style*="Cormorant"], .profile-name, .p-stat-num, .service-price, .pkg-name, .pkg-price, .drawer-link-title, .profile-name-banner {
    letter-spacing:.3px;
  }

  /* LUXURY MOTION SYSTEM */
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(14px); }
    to { opacity:1; transform:translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
  }
  @keyframes shimmer {
    0% { background-position:-200% 0; }
    100% { background-position:200% 0; }
  }
  .profile-banner-hero, .profile-hero {
    animation:fadeIn .6s ease both;
  }
  .profile-avatar-banner, .profile-avatar-big {
    animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .05s both;
  }
  .profile-name-row, .profile-name, .profile-role, .profile-bio {
    animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .12s both;
  }
  .profile-stats, .p-stat {
    animation:fadeUp .55s cubic-bezier(.16,1,.3,1) .18s both;
  }
  .cybe-ai-biz-card, .profile-section, .profile-menu-item {
    animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both;
  }
  .profile-menu-item:nth-of-type(1) { animation-delay:.05s; }
  .profile-menu-item:nth-of-type(2) { animation-delay:.1s; }
  .profile-menu-item:nth-of-type(3) { animation-delay:.15s; }
  .profile-menu-item:nth-of-type(4) { animation-delay:.2s; }
  .profile-name-banner, .profile-brand-tag {
    background:linear-gradient(90deg, currentColor 40%, #cfe0ff 50%, currentColor 60%);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
  }
  .profile-verified-badge {
    animation:fadeUp .4s cubic-bezier(.16,1,.3,1) .3s both;
  }
  * { transition-timing-function:cubic-bezier(.4,0,.2,1); }
  .profile-menu-item, .p-stat, .cybe-ai-biz-btn, .cybe-ai-biz-call, .profile-bottom-tab, .pkg-card, .service-card {
    transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  }
  .profile-menu-item:active, .p-stat:active { transform:scale(.97); }

  /* ===== LIGHTWEIGHT GLOBAL TAP/PRESS ANIMATION (transform + opacity only — GPU-cheap, no lag) ===== */
  .neu, .service-card, .pkg-card, .channel-card, .brand-card, .rev-card,
  .post-card, .stat-card, .inbox-card, .fl-suggestion-card, .fl-contract-card,
  .portfolio-card, .cybe-svc-card, .cs-stat-chip, .form-chip, .quick-prompt-chip,
  .icon-btn, .neu-btn, .neu-circle, .pill, .nav-item, .btn-primary, .cta-btn,
  .form-submit-btn, .see-pkg-btn, .avatar, .channel-icon, .service-icon,
  .notif-bell, .theme-toggle, .settings-toggle {
    transition:transform .15s cubic-bezier(.4,0,.2,1), opacity .15s ease;
    will-change:transform;
  }
  .neu:active, .service-card:active, .pkg-card:active, .channel-card:active,
  .brand-card:active, .rev-card:active, .post-card:active, .stat-card:active,
  .inbox-card:active, .fl-suggestion-card:active, .fl-contract-card:active,
  .portfolio-card:active, .cybe-svc-card:active, .cs-stat-chip:active,
  .form-chip:active, .quick-prompt-chip:active, .icon-btn:active,
  .neu-circle:active, .btn-primary:active, .cta-btn:active,
  .form-submit-btn:active, .see-pkg-btn:active, .avatar:active,
  .channel-icon:active, .service-icon:active, .notif-bell:active {
    transform:scale(.96);
  }
  .nav-item:active { transform:scale(.94); }

  /* Extra coverage: newer elements not yet in the tap-feedback list above */
  .map-open-btn, .rev-cta-btn, .rev-more-btn, .rev-star-pick, .testi-card,
  .brand-card-icon, .cybe-svc-icon, .see-all, .banner-pill, .pkg-btn {
    transition:transform .15s cubic-bezier(.4,0,.2,1), opacity .15s ease;
    will-change:transform;
  }
  .map-open-btn:active, .rev-cta-btn:active, .rev-more-btn:active,
  .rev-star-pick:active, .pkg-btn:active { transform:scale(.96); }
  .testi-card:active { transform:scale(.98); }

  /* Fade+rise entrance for cards as they appear in lists — short duration, staggered via nth-child */
  @keyframes cardIn {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
  }
  .channel-card, .service-card, .post-card, .rev-card, .fl-suggestion-card,
  .fl-contract-card, .inbox-card, .stat-card, .testi-card, .portfolio-card,
  .brand-card, .cybe-svc-card {
    animation:cardIn .32s cubic-bezier(.16,1,.3,1) both;
  }
  .channel-card:nth-child(2), .service-card:nth-child(2), .post-card:nth-child(2) { animation-delay:.03s; }
  .channel-card:nth-child(3), .service-card:nth-child(3), .post-card:nth-child(3) { animation-delay:.06s; }
  .channel-card:nth-child(4), .service-card:nth-child(4), .post-card:nth-child(4) { animation-delay:.09s; }
  .channel-card:nth-child(n+5), .service-card:nth-child(n+5), .post-card:nth-child(n+5) { animation-delay:.1s; }

  /* Page switch fade — cheap opacity-only transition */
  .page { transition:opacity .18s ease; }

  /* Toast / modal pop-in reuses existing actionBarPop-style scale+fade (already GPU-cheap) */
  @keyframes softPop {
    from { opacity:0; transform:scale(.94); }
    to { opacity:1; transform:scale(1); }
  }
  .compose-modal.open, .info-modal.open, .rev-modal.open { animation:softPop .18s cubic-bezier(.4,0,.2,1); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }
  html {
    background:var(--bg);
    margin:0; padding:0;
  }
  html, body {
    height:100%;
    margin:0; padding:0;
    width:100%;
  }
  body {
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    min-height:100dvh;
    max-width:none;
    margin:0 auto;
    position:relative;
    overflow-x:hidden;
  }
  /* On wider screens (tablet/desktop), keep the app centered as a fixed-width
     column instead of stretching edge-to-edge, and fill the rest of the
     viewport with a neutral backdrop so the app still visually "fills the screen". */
  @media (min-width:701px) {
    html, body {
      background:var(--bg2);
    }
    body {
      max-width:480px;
      min-height:100vh;
      min-height:100dvh;
      box-shadow:0 0 0 1px var(--border), 0 24px 80px rgba(0,0,0,0.45);
    }
  }
  /* On phones, the app truly fills the full screen edge-to-edge, app-like. */
  @media (max-width:700px) {
    body {
      max-width:100%;
      width:100%;
    }
  }

  /* NEUMORPHIC */
  .neu {
    background:var(--surface);
    border-radius:20px;
    box-shadow: none;
    border: 1px solid var(--border);
  }
  .neu-btn {
    background:var(--surface2);
    border-radius:14px;
    border:1px solid var(--border);
    cursor:pointer;
    transition:all .15s;
    box-shadow:none;
  }
  .neu-btn:active { transform:scale(.97); opacity:.85; }
  .neu-inset {
    background:var(--bg2);
    border-radius:14px;
    border:1px solid var(--border);
  }
  .neu-circle {
    border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
  }

  /* HEADER */
  .header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px 12px;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px;
    z-index:100;
    background:var(--bg);
    border-bottom:1px solid var(--border);
  }
  .logo-wrap { display:flex; align-items:center; gap:8px; }
  .logo-mark {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    display:flex; align-items:center; justify-content:center;
    font-family:'Cormorant Garamond',serif; font-weight:700; font-size:15px; color:#fff;
    box-shadow:0 2px 10px var(--blue-glow);
  }
  .logo {
    font-family:'Cormorant Garamond',serif;
    font-size:20px; font-weight:700;
    color:var(--blue);
    letter-spacing:-0.5px;
    position:relative; overflow:hidden;
    display:inline-block;
  }
  .logo::after {
    content:'';
    position:absolute; top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
    animation:logoShine 3.2s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes logoShine {
    0% { left:-60%; }
    45%, 100% { left:130%; }
  }
  .logo span { color:var(--text); }
  .header-right { display:flex; gap:12px; align-items:center; }
  .icon-btn {
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; cursor:pointer;
  }
  .theme-toggle {
    width:56px; height:28px;
    background:var(--surface2);
    border-radius:14px;
    border:1px solid var(--border);
    cursor:pointer;
    position:relative;
    transition:.2s;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
  }
  .theme-toggle::after {
    content:'';
    position:absolute;
    width:20px; height:20px;
    background:var(--blue);
    border-radius:50%;
    top:3px; left:3px;
    transition:.2s;
  }
  [data-theme="light"] .theme-toggle::after { left:33px; }

  /* NOTIFICATION BELL */
  .notif-bell {
    position:relative;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; cursor:pointer;
    border-radius:50%;
    background:var(--surface2);
    border:1px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
    transition:.15s;
  }
  .notif-bell:active { transform:scale(.9); background:var(--surface2); }
  .notif-badge {
    position:absolute; top:2px; right:2px;
    min-width:16px; height:16px; padding:0 3px;
    border-radius:8px;
    background:#ef4444; color:#fff;
    font-size:9.5px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--bg);
    line-height:1;
  }
  .notif-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.35);
    z-index:998;
  }
  .notif-overlay.open { display:block; }
  .notif-panel {
    position:fixed; top:58px; right:10px; left:10px;
    max-width:380px; margin-left:auto;
    max-height:70vh;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 12px 32px rgba(0,0,0,0.25);
    z-index:999;
    display:none;
    flex-direction:column;
    overflow:hidden;
    animation:notifPanelIn .18s cubic-bezier(.4,0,.2,1);
  }
  .notif-panel.open { display:flex; }
  @keyframes notifPanelIn {
    from { opacity:0; transform:translateY(-8px); }
    to { opacity:1; transform:translateY(0); }
  }
  .notif-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--border);
  }
  .notif-panel-title { font-size:15px; font-weight:800; }
  .notif-panel-clear { font-size:11.5px; font-weight:700; color:var(--blue); cursor:pointer; }
  .notif-panel-list { overflow-y:auto; flex:1; }
  .notif-item {
    display:flex; gap:10px; align-items:flex-start;
    padding:12px 16px; border-bottom:1px solid var(--border);
    cursor:pointer; transition:.15s;
    position:relative;
  }
  .notif-item:last-child { border-bottom:none; }
  .notif-item:active { background:var(--surface2); }
  .notif-item.unread { background:var(--blue-glow); }
  .notif-item-icon {
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; background:var(--surface2);
  }
  .notif-item-body { flex:1; min-width:0; }
  .notif-item-title { font-size:12.5px; font-weight:700; margin-bottom:2px; }
  .notif-item-msg { font-size:11.5px; color:var(--text2); line-height:1.4; }
  .notif-item-time { font-size:10px; color:var(--text2); margin-top:4px; opacity:.7; }
  .notif-empty { padding:36px 16px; text-align:center; font-size:12.5px; color:var(--text2); }

  /* FREELANCER DASHBOARD SUB-TABS */
  .fl-dash-tabs { display:flex; gap:6px; padding:10px 14px 0; border-bottom:1px solid var(--border); }
  .fl-dash-tab {
    padding:9px 4px; font-size:12px; font-weight:700; color:var(--text2);
    cursor:pointer; border-bottom:2px solid transparent; flex:1; text-align:center;
  }
  .fl-dash-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
  .fl-suggestion-card, .fl-contract-card {
    background:var(--bg2); border:1px solid var(--border); border-radius:12px;
    padding:10px 12px; margin-bottom:8px;
  }
  .fl-status-pill { font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:8px; display:inline-block; }

  /* ACCOUNT SWITCHER */
  .account-switch-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 10px; border-radius:12px; cursor:pointer;
    transition:.15s;
  }
  .account-switch-row:active { background:var(--surface2); }
  .account-switch-row.active { background:var(--blue-glow); }
  .account-switch-row.locked { opacity:.5; cursor:not-allowed; }
  .account-switch-icon {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; background:var(--surface2);
  }
  .account-switch-text { flex:1; min-width:0; }
  .account-switch-title { font-size:13px; font-weight:700; }
  .account-switch-sub { font-size:11px; color:var(--text2); margin-top:1px; }
  .account-switch-check { color:var(--blue); font-weight:800; }
  .account-switch-badge {
    min-width:20px; height:20px; padding:0 6px; border-radius:10px;
    background:var(--blue); color:#fff; font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }

  /* HEADER AVATAR / MODE SWITCHER TRIGGER */
  .header-avatar-wrap {
    position:relative; width:32px; height:32px; border-radius:50%;
    background:var(--surface2); display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer; border:2px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
  }
  .header-mode-dot {
    position:absolute; bottom:-1px; right:-1px; width:10px; height:10px;
    border-radius:50%; border:2px solid var(--bg); background:#888;
  }
  .header-mode-dot.guest { background:#9ca3af; }
  .header-mode-dot.personal { background:var(--blue); }
  .header-mode-dot.business { background:#a855f7; }
  .header-mode-dot.freelancer { background:#22c55e; }

  /* ACCOUNT SWITCHER BOTTOM SHEET */
  .acc-sheet-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:998; backdrop-filter:blur(2px);
  }
  .acc-sheet-overlay.open { display:block; }
  .acc-sheet {
    position:fixed; left:0; right:0; bottom:-100%; z-index:999;
    background:var(--bg); border-radius:20px 20px 0 0;
    padding:10px 14px 22px; max-width:520px; margin:0 auto;
    transition:bottom .25s ease; box-shadow:0 -8px 30px rgba(0,0,0,.3);
  }
  .acc-sheet.open { bottom:0; }
  .acc-sheet-handle {
    width:36px; height:4px; border-radius:2px; background:var(--border);
    margin:2px auto 12px;
  }
  .acc-sheet-title { font-weight:800; font-size:15px; margin-bottom:6px; padding:0 4px; }

  /* SETTINGS PAGE */
  .settings-section-label {
    font-size:11px; font-weight:700; color:var(--text2);
    letter-spacing:.8px; text-transform:uppercase;
    margin:20px 4px 8px;
  }
  .settings-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
  .settings-row {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
  }
  .settings-row:last-child { border-bottom:none; }
  .settings-row-icon {
    width:36px; height:36px; border-radius:10px;
    background:var(--blue-glow);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
  }
  .settings-row-text { flex:1; min-width:0; }
  .settings-row-title { font-size:14px; font-weight:600; color:var(--text); }
  .settings-row-sub { font-size:11.5px; color:var(--text2); margin-top:1px; }
  .style-options { display:flex; flex-direction:column; gap:10px; padding:12px 16px 16px; }
  .style-option {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1.5px solid var(--border);
    cursor:pointer;
    transition:.2s cubic-bezier(.4,0,.2,1);
  }
  .style-option.active { border-color:var(--blue); background:var(--blue-glow); }
  .style-option-preview {
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:var(--surface);
    border:1px solid var(--border);
  }
  .style-option-preview.neu-preview {
    box-shadow: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
    border:none;
  }
  .style-option-text { flex:1; }
  .style-option-title { font-size:13.5px; font-weight:600; color:var(--text); }
  .style-option-sub { font-size:11px; color:var(--text2); margin-top:1px; }
  .style-option-check {
    width:20px; height:20px; border-radius:50%;
    border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:#fff; flex-shrink:0;
  }
  .style-option.active .style-option-check { background:var(--blue); border-color:var(--blue); }
  .settings-toggle {
    width:44px; height:24px;
    background:var(--surface2);
    border-radius:12px;
    border:1px solid var(--border);
    cursor:pointer;
    position:relative;
    transition:.2s;
    flex-shrink:0;
  }
  .settings-toggle::after {
    content:'';
    position:absolute;
    width:16px; height:16px;
    background:var(--blue);
    border-radius:50%;
    top:3px; left:3px;
    transition:.2s;
  }
  .settings-toggle.on { background:var(--blue-glow); }
  .settings-toggle.on::after { left:23px; }

  /* SCROLL AREA */
  .page { display:none; padding:82px 16px 80px; }
  .page.active { display:block; }

  /* HOME */
  .hero-banner {
    padding:20px;
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg2) 100%);
    border-radius:24px;
    border:1px solid var(--border);
    margin-bottom:16px;
    position:relative;
    overflow:hidden;
  }
  .hero-banner::before {
    content:'';
    position:absolute;
    width:120px; height:120px;
    background:radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
    top:-20px; right:-20px;
    border-radius:50%;
  }
  .hero-tag {
    display:inline-block;
    background:var(--blue-glow);
    color:var(--blue);
    font-size:11px; font-weight:600;
    padding:4px 10px;
    border-radius:20px;
    border:1px solid var(--border);
    margin-bottom:10px;
    letter-spacing:.5px;
    text-transform:uppercase;
  }
  .hero-banner h1 {
    font-family:'Cormorant Garamond',serif;
    font-size:22px; font-weight:700;
    line-height:1.25;
    margin-bottom:8px;
  }
  .hero-banner h1 em { color:var(--blue); font-style:normal; }
  .hero-banner p { font-size:13px; color:var(--text2); line-height:1.5; margin-bottom:16px; }
  .hero-actions { display:flex; gap:10px; }
  .btn-primary {
    flex:1; padding:11px;
    background:var(--blue);
    color:#fff;
    border:none; border-radius:14px;
    font-family:'Cormorant Garamond',serif;
    font-size:14px; font-weight:600;
    cursor:pointer;
    transition:.15s;
  }
  .btn-primary:active { transform:scale(.97); }
  .btn-secondary {
    flex:1; padding:11px;
    background:var(--surface2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:14px;
    font-family:'Cormorant Garamond',serif;
    font-size:14px; font-weight:600;
    cursor:pointer;
  }

  /* STATS ROW */
  .stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }

  /* FREELANCER RECRUITMENT CTA */
  .freelance-cta-card {
    display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:18px; margin-bottom:16px;
    background:linear-gradient(135deg, rgba(34,197,94,0.14), rgba(77,142,248,0.14));
    border:1px solid rgba(52,211,153,0.35);
  }
  .freelance-cta-icon {
    width:44px; height:44px; border-radius:14px; flex-shrink:0; font-size:20px;
    background:linear-gradient(135deg,#22c55e,#4d8ef8); display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(34,197,94,0.35);
  }
  .freelance-cta-title { font-size:14.5px; font-weight:700; margin-bottom:3px; }
  .freelance-cta-sub { font-size:12px; color:var(--text2); line-height:1.4; margin-bottom:10px; }
  .freelance-cta-btn {
    background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border:none; border-radius:12px;
    padding:9px 16px; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .stat-card {
    padding:14px 10px;
    text-align:center;
  }
  .stat-num {
    font-family:'Cormorant Garamond',serif;
    font-size:20px; font-weight:700; color:var(--blue);
  }
  .stat-label { font-size:11px; color:var(--text2); margin-top:2px; }

  /* SECTION LABEL */
  .section-head {
    display:flex; justify-content:space-between; align-items:center;
    margin:18px 0 10px;
  }
  .section-head h2 {
    font-family:'Cormorant Garamond',serif;
    font-size:16px; font-weight:700;
  }
  .see-all { font-size:13px; color:var(--blue); cursor:pointer; font-weight:500; }

  /* CATEGORY PILLS */
  .pills { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; }
  .pills::-webkit-scrollbar { display:none; }
  .pill {
    white-space:nowrap;
    padding:8px 16px;
    border-radius:20px;
    font-size:13px; font-weight:500;
    cursor:pointer;
    border:1px solid var(--border);
    background:var(--surface2);
    color:var(--text2);
    transition:.15s;
  }
  .pill.active { background:var(--blue); color:#fff; border-color:var(--blue); }

  /* PERSON CARDS */
  .persons-row { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
  .persons-row::-webkit-scrollbar { display:none; }
  .person-card {
    min-width:130px;
    padding:16px 12px;
    text-align:center;
    flex-shrink:0;
  }
  .person-avatar {
    width:52px; height:52px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    margin:0 auto 8px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    border:2px solid var(--border);
    position:relative;
  }
  .online-dot {
    position:absolute; bottom:2px; right:2px;
    width:10px; height:10px;
    background:#22c55e;
    border-radius:50%;
    border:2px solid var(--surface);
  }
  .person-name { font-size:13px; font-weight:600; margin-bottom:3px; }
  .person-role {
    font-size:11px; color:var(--blue);
    background:var(--blue-glow);
    padding:3px 8px;
    border-radius:10px;
    display:inline-block;
    font-weight:500;
  }

  /* FEATURED SERVICE */
  .service-feat {
    padding:0;
    margin-bottom:10px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(77,142,248,0.35) !important;
    background:linear-gradient(160deg, rgba(77,142,248,0.12), rgba(124,58,237,0.10)) !important;
  }
  .service-feat-banner {
    width:100%; height:120px; border-radius:0;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:44px; position:relative; overflow:hidden;
  }
  .service-feat-banner::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 60%);
  }
  .service-feat-popular {
    position:absolute; top:10px; left:10px; z-index:2;
    font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; color:#fff;
    background:linear-gradient(90deg,#f59e0b,#ef4444);
    box-shadow:0 4px 12px rgba(239,68,68,0.4);
    display:flex; align-items:center; gap:4px;
  }
  .service-feat-badge {
    position:absolute; top:10px; right:10px; z-index:2;
    font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; color:#fff;
    background:rgba(255,255,255,0.22); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,0.35);
  }
  .service-feat-body { padding:14px 16px 16px; }
  .service-feat-top { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
  .service-icon-big {
    width:46px; height:34px;
    border-radius:10px;
    background:var(--blue-glow);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    flex-shrink:0;
  }
  .service-feat-info h3 { font-size:16px; font-weight:700; margin-bottom:2px; }
  .service-feat-info p { font-size:12px; color:var(--text2); line-height:1.45; }
  .rating { font-size:12px; color:var(--text2); }
  .rating span { color:#f59e0b; }

  /* ANIMATED "SEE PACKAGES" BUTTON */
  .see-pkg-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:12px; padding:12px; border-radius:14px; cursor:pointer;
    font-size:12.5px; font-weight:700; color:#fff; text-align:center;
    background:linear-gradient(270deg, var(--blue), #7c3aed, var(--blue));
    background-size:200% 200%;
    animation:pkgGradient 3s ease infinite, pkgPulse 2.2s ease-in-out infinite;
  }
  .see-pkg-btn:active { transform:scale(.96); }
  @keyframes pkgGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
  @keyframes pkgPulse { 0%,100%{box-shadow:0 4px 16px var(--blue-glow)} 50%{box-shadow:0 6px 22px rgba(124,58,237,0.45)} }

  /* CYBE SERVICES GRID */
  .cybe-svc-row { display:flex; flex-direction:column; gap:12px; }
  .cybe-svc-card { padding:14px; display:flex; gap:12px; align-items:flex-start; }
  .cybe-svc-icon {
    width:64px; height:48px; border-radius:12px; flex-shrink:0;
    background:var(--blue-glow); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:22px;
  }
  .cybe-svc-info { flex:1; min-width:0; }
  .cybe-svc-name { font-size:14px; font-weight:700; margin-bottom:3px; }
  .cybe-svc-desc { font-size:12px; color:var(--text2); line-height:1.45; margin-bottom:10px; }


  /* CYBE AI ASSISTANT CARD */
  .ai-assist-card {
    display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px;
    background:linear-gradient(135deg, rgba(77,142,248,0.16), rgba(124,58,237,0.16));
    border:1px solid rgba(77,142,248,0.35); cursor:pointer; margin-bottom:14px; position:relative; overflow:hidden;
  }
  .ai-assist-card::after {
    content:''; position:absolute; top:-40%; right:-20%; width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle, rgba(124,58,237,0.35), transparent 70%); pointer-events:none;
  }
  .ai-assist-icon {
    width:46px; height:46px; border-radius:14px; flex-shrink:0;
    background:linear-gradient(135deg,#4d8ef8,#7c3aed); display:flex; align-items:center; justify-content:center;
    font-size:22px; box-shadow:0 4px 14px rgba(77,142,248,0.4);
  }
  .ai-assist-info { flex:1; z-index:1; }
  .ai-assist-title { font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
  .ai-assist-title .ai-live-dot { width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,0.25); }
  .ai-assist-sub { font-size:11.5px; color:var(--text2); margin-top:2px; }
  .ai-assist-arrow { font-size:16px; color:var(--blue); z-index:1; }

  /* BRANDS / PARTNERS (horizontal scroll grid) */
  .brand-row {
    display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
  }
  .brand-row::-webkit-scrollbar { display:none; }
  .brand-card {
    min-width:130px; flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:16px 10px; text-align:center;
  }
  .brand-card-icon { font-size:28px; }
  .brand-card-name { font-size:12px; font-weight:700; color:var(--text); }
  .brand-card-desc { font-size:10px; color:var(--text2); line-height:1.35; }

  /* PORTFOLIO */
  .portfolio-sub { font-size:13px; font-weight:700; color:var(--blue); margin:14px 0 8px; }
  .portfolio-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
  .portfolio-row::-webkit-scrollbar { display:none; }
  .portfolio-card {
    min-width:140px; flex-shrink:0; cursor:pointer; overflow:hidden; transition:.15s;
  }
  .portfolio-card:active { transform:scale(.97); }
  .portfolio-thumb {
    height:88px; display:flex; align-items:center; justify-content:center;
    font-size:30px; border-radius:20px 20px 0 0;
  }
  .portfolio-name { font-size:12px; font-weight:600; padding:9px 10px 2px; line-height:1.3; }
  .portfolio-desc { font-size:10.5px; color:var(--text2); padding:0 10px 10px; line-height:1.4; }

  /* REVIEWS */
  .rev-summary {
    display:flex; align-items:center; gap:16px; padding:18px 16px; margin-bottom:14px;
  }
  .rev-summary-score { font-family:'Cormorant Garamond',serif; font-size:40px; font-weight:700; line-height:1; color:var(--text); }
  .rev-summary-stars { color:#f59e0b; font-size:15px; letter-spacing:2px; margin:4px 0 2px; }
  .rev-summary-count { font-size:11.5px; color:var(--text2); font-weight:600; }
  .rev-summary-bars { flex:1; display:flex; flex-direction:column; gap:4px; }
  .rev-bar-row { display:flex; align-items:center; gap:6px; }
  .rev-bar-label { font-size:10px; color:var(--text2); width:10px; flex-shrink:0; }
  .rev-bar-track { flex:1; height:5px; border-radius:3px; background:var(--bg2); overflow:hidden; }
  .rev-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, #f59e0b, #fbbf24); }
  .rev-cta-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px; border-radius:16px; margin-bottom:16px;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    color:#fff; font-size:13.5px; font-weight:700; cursor:pointer;
    box-shadow:0 6px 18px var(--blue-glow);
  }
  .rev-locked-note {
    padding:13px 14px; border-radius:16px; margin-bottom:16px;
    font-size:12px; color:var(--text2); text-align:center; line-height:1.5;
  }
  .rev-row { display:flex; flex-direction:column; gap:12px; }
  .rev-card { padding:16px; animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both; }
  .rev-card-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .rev-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    display:flex; align-items:center; justify-content:center; font-size:16px;
    border:1px solid var(--border); flex-shrink:0;
  }
  .rev-name-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .rev-name { font-size:13px; font-weight:700; }

  /* FIND US / MAP */
  .map-card { padding:14px; margin-top:20px; animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both; }
  .map-frame-wrap {
    position:relative; width:100%; border-radius:16px; overflow:hidden;
    aspect-ratio:4/3; background:var(--bg); border:1px solid var(--border);
  }
  .map-frame-wrap iframe { width:100%; height:100%; border:0; display:block; filter:saturate(1.15) contrast(1.03); }
  [data-theme="dark"] .map-frame-wrap iframe { filter:saturate(1.1) contrast(1.05) invert(0.92) hue-rotate(180deg) brightness(0.95); }
  .map-badge {
    position:absolute; top:10px; left:10px; z-index:2;
    display:flex; align-items:center; gap:6px;
    background:var(--surface); color:var(--text);
    font-size:11px; font-weight:700; letter-spacing:.2px;
    padding:6px 11px 6px 9px; border-radius:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.25); border:1px solid var(--border);
  }
  .map-badge .dot { width:6px; height:6px; border-radius:50%; background:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,0.25); flex-shrink:0; }
  .map-meta-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
  .map-meta-text { flex:1; min-width:0; }
  .map-meta-title { font-size:13.5px; font-weight:700; color:var(--text); }
  .map-meta-sub { font-size:11.5px; color:var(--text2); margin-top:2px; }
  .map-open-btn {
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    background:linear-gradient(135deg, var(--blue) 0%, var(--blue2) 100%);
    color:#fff; font-size:12.5px; font-weight:700;
    padding:10px 16px; border-radius:12px; border:none;
    cursor:pointer; white-space:nowrap; box-shadow:0 4px 14px var(--blue-glow); transition:.15s;
  }
  .map-open-btn:active { transform:scale(.96); }
  .map-open-btn svg { width:14px; height:14px; }
  .rev-time { font-size:10.5px; color:var(--text2); margin-top:1px; }
  .rev-stars { color:#f59e0b; font-size:12px; letter-spacing:1.5px; margin-bottom:6px; }
  .rev-text { font-size:13px; line-height:1.55; color:var(--text); }
  .rev-more-btn {
    text-align:center; padding:12px; border-radius:14px; margin-top:14px;
    font-size:12.5px; font-weight:700; color:var(--blue); cursor:pointer;
    background:var(--blue-glow);
  }
  .rev-empty { text-align:center; padding:24px 16px; color:var(--text2); font-size:12.5px; }

  /* WRITE REVIEW MODAL */
  .rev-modal {
    position:fixed; left:50%; bottom:0; transform:translate(-50%, 100%);
    width:100%; max-width:480px;
    background:var(--bg); border-radius:24px 24px 0 0;
    z-index:501; padding:18px 18px 24px;
    transition:.25s cubic-bezier(.16,1,.3,1);
  }
  .rev-modal.open { transform:translate(-50%, 0); }
  .rev-modal-title { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:700; margin-bottom:14px; }
  .rev-star-picker { display:flex; gap:8px; justify-content:center; margin-bottom:16px; }
  .rev-star-pick { font-size:30px; color:var(--border); cursor:pointer; transition:.15s; }
  .rev-star-pick.active { color:#f59e0b; transform:scale(1.1); }
  .rev-modal textarea {
    width:100%; min-height:90px; padding:12px 14px; border-radius:14px;
    font-family:inherit; font-size:13px; color:var(--text); resize:none; margin-bottom:14px;
  }
  .rev-modal-submit {
    width:100%; padding:13px; border-radius:14px; text-align:center;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    color:#fff; font-weight:700; font-size:13.5px; cursor:pointer;
  }
  .rev-pending-tag {
    display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.3px;
    text-transform:uppercase; padding:2.5px 8px; border-radius:8px; margin-left:6px;
    background:rgba(245,158,11,0.15); color:#f59e0b;
  }


  /* NEWSFEED */
  .post-card { padding:0; margin-bottom:14px; overflow:hidden; position:relative; }
  .post-card::before {
    content:''; position:absolute; top:-30px; right:-30px;
    width:110px; height:110px; border-radius:50%;
    pointer-events:none; z-index:0;
    filter:blur(6px);
  }
  .post-card.identity-main::before {
    background:radial-gradient(circle, rgba(77,142,248,0.55), rgba(77,142,248,0.08) 60%, transparent 75%);
  }
  .post-card.identity-business::before {
    background:radial-gradient(circle, rgba(239,68,68,0.55), rgba(239,68,68,0.08) 60%, transparent 75%);
  }
  .post-header, .post-body, .post-media, .post-actions, .post-footer { position:relative; z-index:1; }
  .post-header { display:flex; align-items:center; gap:11px; padding:15px 16px 12px; }
  .post-avatar {
    width:40px; height:40px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
    flex-shrink:0;
    box-shadow:0 3px 10px rgba(77,142,248,0.25);
  }
  .post-meta { flex:1; min-width:0; }
  .post-name { font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .post-time { font-size:11.5px; color:var(--text2); margin-top:1px; display:flex; align-items:center; gap:4px; }
  .post-time svg { width:11px; height:11px; opacity:.7; }
  .post-badge {
    font-size:10px; color:var(--blue);
    background:var(--blue-glow);
    padding:2.5px 9px; border-radius:9px; font-weight:700;
    letter-spacing:.2px;
  }
  .post-acct-tag {
    font-size:9.5px; font-weight:700; letter-spacing:.3px;
    padding:2.5px 8px; border-radius:9px;
    text-transform:uppercase;
  }
  .post-acct-business { background:rgba(239,68,68,0.14); color:#ef4444; }
  .post-acct-main { background:var(--blue-glow); color:var(--blue); }

  /* ===== CYBERSPACE STATS BAR (demo) ===== */
  .cs-stats-bar { margin-bottom:16px; }
  .cs-stat-title { font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .cs-range-tabs {
    display:flex; gap:5px; overflow-x:auto; margin-bottom:10px; padding-bottom:2px;
  }
  .cs-range-tabs::-webkit-scrollbar { display:none; }
  .cs-range-tab {
    flex-shrink:0; padding:6px 12px; border-radius:20px;
    font-size:10.5px; font-weight:700; letter-spacing:.2px; cursor:pointer;
    color:var(--text2); background:var(--bg2); border:1px solid var(--border);
    transition:.15s;
  }
  .cs-range-tab.active {
    color:#fff; background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    border-color:transparent; box-shadow:0 4px 12px var(--blue-glow);
  }
  .cs-range-tab:active { transform:scale(.95); }
  .cs-stat-row {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
    animation:fadeUp .3s cubic-bezier(.16,1,.3,1) both;
  }
  .cs-stat-chip {
    display:flex; align-items:center; gap:8px;
    padding:10px 11px; border-radius:14px;
  }
  .cs-stat-icon { font-size:18px; flex-shrink:0; width:24px; text-align:center; }
  .cs-stat-text { min-width:0; }
  .cs-stat-label { font-size:10px; color:var(--text2); font-weight:600; letter-spacing:.2px; }
  .cs-stat-name { font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cs-stat-sub { font-size:10.5px; color:var(--blue); font-weight:600; }

  /* ===== IDENTITY THEMES: Main Account (blue) vs Business Page (red) ===== */
  .identity-main   { --identity-color: var(--blue); --identity-color2: #3a7af0; --identity-glow: rgba(77,142,248,0.14); }
  .identity-business { --identity-color: #ef4444; --identity-color2: #dc2626; --identity-glow: rgba(239,68,68,0.14); }

  .post-card.identity-main    { border-left:3px solid var(--blue); }
  .post-card.identity-business{ border-left:3px solid #ef4444; }

  .post-avatar.identity-avatar-main {
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    cursor:pointer; transition:transform .15s;
  }
  .post-avatar.identity-avatar-business {
    background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    cursor:pointer; transition:transform .15s;
  }
  .post-avatar.identity-avatar-main:active,
  .post-avatar.identity-avatar-business:active { transform:scale(0.92); }

  .post-acct-business { background:rgba(239,68,68,0.14); color:#ef4444; }
  .post-acct-main { background:var(--blue-glow); color:var(--blue); }

  /* Identity picker (compose modal) */
  .identity-picker { display:flex; flex-direction:column; gap:8px; }
  .identity-option {
    display:flex; align-items:center; gap:10px;
    padding:11px 12px; border-radius:14px;
    background:var(--bg2); border:1.5px solid var(--border);
    cursor:pointer; transition:.15s;
  }
  .identity-option.identity-main.selected { border-color:var(--blue); background:var(--blue-glow); }
  .identity-option.identity-business.selected { border-color:#ef4444; background:rgba(239,68,68,0.10); }
  .identity-avatar {
    width:36px; height:36px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0;
  }
  .identity-option.identity-main .identity-avatar { background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%); }
  .identity-option.identity-business .identity-avatar { background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
  .identity-text { flex:1; min-width:0; }
  .identity-name { font-size:13.5px; font-weight:700; color:var(--text); }
  .identity-option.identity-main .identity-sub { font-size:11px; font-weight:600; color:var(--blue); }
  .identity-option.identity-business .identity-sub { font-size:11px; font-weight:600; color:#ef4444; }
  .identity-check { font-size:15px; font-weight:800; color:var(--blue); width:16px; text-align:center; }
  .identity-option.identity-business .identity-check { color:#ef4444; }
  .identity-hint { font-size:11px; color:var(--text2); padding:8px 2px 2px; line-height:1.5; }

  /* Forum message identity theming */
  .chat-msg-row.identity-main .chat-bubble { border-left:3px solid var(--blue); }
  .chat-msg-row.identity-business .chat-bubble { border-left:3px solid #ef4444; }
  .chat-msg-avatar.identity-avatar-main { background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%) !important; cursor:pointer; }
  .chat-msg-avatar.identity-avatar-business { background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; cursor:pointer; }
  .chat-msg-name.tag-main { color:var(--blue); }
  .chat-msg-name.tag-business { color:#ef4444; }
  .chat-msg-avatar { cursor:pointer; }

  /* Forum compose identity switcher (compact pill above input) */
  .forum-identity-switch {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; margin-bottom:8px;
    border-radius:12px; background:var(--bg2); border:1px solid var(--border);
    font-size:12px; cursor:pointer;
  }
  .forum-identity-switch .identity-avatar { width:26px; height:26px; font-size:13px; }
  .forum-identity-switch-label { flex:1; }
  .forum-identity-switch-name { font-weight:700; font-size:12.5px; }
  .forum-identity-switch.theme-main .forum-identity-switch-name { color:var(--blue); }
  .forum-identity-switch.theme-business .forum-identity-switch-name { color:#ef4444; }
  .forum-identity-switch-change { font-size:11px; color:var(--text2); text-decoration:underline; }


  .post-more-btn {
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--text2); cursor:pointer; flex-shrink:0; transition:.15s;
  }
  .post-more-btn:active { background:var(--bg2); }
  .post-more-btn svg { width:18px; height:18px; }
  .post-body { font-size:14px; line-height:1.62; color:var(--text); padding:0 16px 12px; }
  .post-image {
    width:100%; height:180px;
    background:linear-gradient(135deg, var(--bg2) 0%, var(--surface2) 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:40px;
    margin-bottom:0;
  }
  .post-stats-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; font-size:12px; color:var(--text2);
  }
  .post-stats-left { display:flex; align-items:center; gap:5px; }
  .post-stats-left .like-dot {
    width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--blue),#7c3aed); flex-shrink:0;
  }
  .post-stats-left .like-dot svg { width:10px; height:10px; fill:#fff; }
  .post-stats-right { display:flex; gap:12px; }
  .post-actions { display:flex; border-top:1px solid var(--border); }
  .post-btn {
    flex:1; padding:11px 0;
    font-size:13px; font-weight:600; color:var(--text2);
    display:flex; align-items:center; justify-content:center; gap:7px;
    cursor:pointer; transition:.15s; position:relative;
  }
  .post-btn svg { width:18px; height:18px; transition:.15s; }
  .post-btn:active { background:var(--bg2); }
  .post-btn.liked { color:var(--blue); }
  .post-btn.liked svg { fill:var(--blue); stroke:var(--blue); transform:scale(1.08); }
  .post-btn + .post-btn { border-left:1px solid var(--border); }
  .post-divider { display:none; }

  /* SERVICES PAGE */
  .search-bar {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px;
    margin-bottom:16px;
  }
  .search-input {
    flex:1;
    background:transparent;
    border:none; outline:none;
    color:var(--text);
    font-size:14px;
    font-family:'Inter',sans-serif;
  }
  .search-input::placeholder { color:var(--text2); }
  .search-icon { font-size:16px; }

  .service-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .service-card {
    padding:16px 12px;
    cursor:pointer;
    transition:.15s;
  }
  .service-card:active { transform:scale(.97); }
  .service-icon {
    width:100%; height:56px;
    border-radius:12px;
    background:var(--blue-glow);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    margin-bottom:10px;
  }
  .service-title { font-size:13px; font-weight:600; margin-bottom:4px; }
  .service-count { font-size:11px; color:var(--text2); }
  .service-card .see-pkg-btn { margin-top:10px; padding:9px; font-size:11px; }
  .service-tag {
    display:inline-block; margin-top:6px;
    font-size:10px; font-weight:700; color:var(--blue);
    background:var(--blue-glow); padding:2px 8px; border-radius:10px;
    border:1px solid var(--border);
  }

  /* PROFILE PAGE */
  .profile-hero {
    padding:24px 20px;
    text-align:center;
    margin-bottom:12px;
  }
  .profile-avatar-big {
    width:64px; height:64px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    margin:0 auto 10px;
    display:flex; align-items:center; justify-content:center;
    font-size:26px;
    border:2px solid var(--blue);
    position:relative;
  }
  .profile-edit-btn {
    position:absolute; bottom:0; right:0;
    width:24px; height:24px;
    background:var(--blue);
    border-radius:50%;
    border:2px solid var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-size:11px;
    cursor:pointer;
  }
  .profile-name {
    font-family:'Cormorant Garamond',serif;
    font-size:19px; font-weight:700; margin-bottom:2px;
  }
  .profile-role { font-size:11.5px; color:var(--blue); margin-bottom:4px; font-weight:500; }
  .profile-bio { font-size:12px; color:var(--text2); line-height:1.4; max-width:260px; margin:0 auto 12px; }
  .profile-stats { display:flex; gap:8px; justify-content:center; }
  .p-stat {
    flex:1; max-width:80px;
    padding:10px 8px;
    text-align:center;
  }
  .p-stat-num { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:700; color:var(--blue); }
  .p-stat-label { font-size:10px; color:var(--text2); margin-top:2px; }

  .profile-section { margin-bottom:12px; }
  .profile-menu-item {
    display:flex; align-items:center; gap:14px;
    padding:14px 16px;
    margin-bottom:8px;
    cursor:pointer;
    transition:.15s;
  }
  .profile-menu-item:active { transform:scale(.98); }
  .menu-icon {
    width:40px; height:40px;
    border-radius:12px;
    background:var(--blue-glow);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .menu-text { flex:1; }
  .menu-title { font-size:14px; font-weight:600; }
  .menu-sub { font-size:12px; color:var(--text2); margin-top:1px; }
  .menu-arrow { color:var(--text2); font-size:18px; }

  /* BOTTOM NAV */
  .bottom-nav {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px;
    background:var(--bg2);
    border-top:1px solid var(--border);
    display:flex;
    padding:10px 8px 20px;
    gap:6px;
    z-index:200;
  }
  .nav-item {
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    padding:8px 2px 7px;
    cursor:pointer;
    color:var(--text2);
    font-size:9.5px; font-weight:600;
    line-height:1.25;
    text-align:center;
    border-radius:16px;
    background:transparent;
    border:1px solid transparent;
    transform:scale(1);
    transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
  }
  .nav-item span { display:block; }
  .nav-item .nav-line1 { text-transform:uppercase; letter-spacing:.3px; opacity:.85; }
  .nav-item .nav-line2 { font-size:10.5px; letter-spacing:.2px; }
  .nav-item.active {
    color:var(--blue);
    background:var(--surface2);
    border-color:var(--border);
    box-shadow:
      inset 3px 3px 6px var(--neu-dark),
      inset -3px -3px 6px var(--neu-light);
  }
  .nav-item.pressed { transform:scale(.9); }
  .nav-icon { font-size:19px; line-height:1; margin-bottom:1px; }
  .nav-dot {
    width:4px; height:4px;
    border-radius:50%;
    background:var(--blue);
    opacity:0;
    transition:.15s;
    margin-top:1px;
  }
  .nav-item.active .nav-dot { opacity:1; }

  /* TOAST */
  .toast {
    position:fixed; top:70px; left:50%; transform:translateX(-50%) translateY(-20px);
    background:var(--blue); color:#fff;
    padding:10px 20px; border-radius:20px;
    font-size:13px; font-weight:500;
    opacity:0; transition:.3s; pointer-events:none; z-index:999;
    white-space:nowrap;
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width:4px; }
  ::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }

  /* FORUM PAGE */
  .forum-tabs { display:flex; gap:8px; margin-bottom:16px; }
  .forum-tab {
    flex:1; padding:9px 0;
    border-radius:14px; border:1px solid var(--border);
    background:var(--surface2); color:var(--text2);
    font-size:13px; font-weight:600;
    text-align:center; cursor:pointer;
    transition:.15s;
  }
  .forum-tab.active { background:var(--blue); color:#fff; border-color:var(--blue); }
  .forum-thread {
    padding:16px; margin-bottom:10px;
    cursor:pointer; transition:.15s;
  }
  .forum-thread:active { transform:scale(.98); }
  .forum-thread-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .forum-avatar {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0; border:1px solid var(--border);
  }
  .forum-meta { flex:1; }
  .forum-author { font-size:13px; font-weight:600; }
  .forum-time { font-size:11px; color:var(--text2); }
  .forum-category {
    font-size:10px; font-weight:700; color:var(--blue);
    background:var(--blue-glow); border:1px solid var(--border);
    padding:3px 9px; border-radius:10px;
  }
  .forum-title { font-size:14px; font-weight:600; margin-bottom:6px; line-height:1.4; }
  .forum-preview { font-size:13px; color:var(--text2); line-height:1.5; margin-bottom:10px; }
  .forum-footer { display:flex; gap:14px; align-items:center; }
  .forum-stat { font-size:12px; color:var(--text2); display:flex; align-items:center; gap:4px; }
  .forum-pin {
    display:inline-block; font-size:10px; font-weight:700;
    color:#f59e0b; background:rgba(245,158,11,0.12);
    border:1px solid rgba(245,158,11,0.25);
    padding:2px 8px; border-radius:10px; margin-bottom:6px;
  }
  .forum-compose {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; margin-bottom:14px;
    cursor:pointer;
  }

  /* ===== GROUP CHAT (Forum replacement) ===== */
  .channel-list { display:flex; flex-direction:column; gap:10px; }
  .channel-card {
    display:flex; align-items:center; gap:12px;
    padding:14px; cursor:pointer; transition:.15s;
    position:relative;
  }
  .channel-card:active { transform:scale(.98); }
  .channel-icon {
    width:48px; height:48px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; flex-shrink:0;
    border:1px solid var(--border);
  }
  .channel-info { flex:1; min-width:0; }
  .channel-top-row { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:3px; }
  .channel-name { font-size:14px; font-weight:700; }
  .channel-time { font-size:11px; color:var(--text2); flex-shrink:0; }
  .channel-preview {
    font-size:12.5px; color:var(--text2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:flex; align-items:center; gap:4px;
  }
  .channel-preview b { color:var(--text); font-weight:600; }
  .channel-bottom-row { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
  .channel-online { font-size:11px; color:#22c55e; display:flex; align-items:center; gap:4px; }
  .channel-online::before { content:''; width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 5px #22c55e; }
  .channel-unread {
    min-width:19px; height:19px; padding:0 5px;
    background:var(--blue); color:#fff;
    border-radius:10px; font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .channel-pinned-tag {
    position:absolute; top:8px; right:14px;
    font-size:9px; font-weight:700; color:#f59e0b;
  }
  .inbox-card { margin-bottom:18px; }
  .group-section-title {
    font-size:12px; font-weight:700; color:var(--text2);
    text-transform:uppercase; letter-spacing:.6px;
    margin:16px 2px 8px;
  }
  .group-section-title:first-child { margin-top:0; }

  /* Chat room */
  .chat-room-header {
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; margin:4px 0 12px;
  }
  .chat-room-header.chat-fixed {
    margin:0;
    position:fixed; top:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px;
    padding:10px 16px;
    z-index:100;
    background:var(--bg);
    border-bottom:1px solid var(--border);
  }
  .chat-back-btn {
    font-size:20px; cursor:pointer; padding:2px 4px;
    color:var(--text2);
  }
  .chat-room-icon {
    width:38px; height:38px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; border:1px solid var(--border);
    background:var(--blue-glow); flex-shrink:0;
  }
  .chat-room-meta { flex:1; min-width:0; }
  .chat-room-title { font-size:14px; font-weight:700; }
  .chat-room-sub { font-size:11px; color:var(--text2); }

  .chat-messages {
    display:flex; flex-direction:column; gap:12px;
    padding:70px 0 160px;
  }
  .chat-date-divider {
    text-align:center; font-size:11px; color:var(--text2);
    margin:6px 0; position:relative;
  }
  .chat-msg-row { display:flex; gap:8px; max-width:88%; }
  .chat-msg-row.me { align-self:flex-end; flex-direction:row-reverse; }
  .chat-msg-avatar {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; flex-shrink:0; margin-top:2px;
    border:1px solid var(--border);
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
  }
  .chat-msg-body { display:flex; flex-direction:column; gap:2px; }
  .chat-msg-name { font-size:11px; font-weight:600; color:var(--blue); margin-left:2px; }
  .chat-msg-row.me .chat-msg-name { display:none; }
  .chat-bubble {
    padding:9px 13px; border-radius:16px;
    font-size:13.5px; line-height:1.45;
    background:var(--surface2); border:1px solid var(--border);
    border-bottom-left-radius:5px;
  }
  .chat-msg-row.me .chat-bubble {
    background:var(--blue); color:#fff; border:none;
    border-bottom-left-radius:16px; border-bottom-right-radius:5px;
  }
  .chat-msg-time {
    font-size:10px; color:var(--text2); margin:0 4px;
    align-self:flex-end;
  }
  .chat-msg-row.me .chat-msg-time { align-self:flex-start; }

  /* TYPING INDICATOR */
  .typing-row { display:flex; gap:8px; max-width:88%; }
  .typing-bubble {
    padding:11px 15px; border-radius:16px; border-bottom-left-radius:5px;
    background:var(--surface2); border:1px solid var(--border);
    display:flex; align-items:center; gap:4px;
  }
  .typing-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--text2);
    animation:typingBounce 1.2s infinite ease-in-out;
  }
  .typing-dot:nth-child(2) { animation-delay:.15s; }
  .typing-dot:nth-child(3) { animation-delay:.3s; }
  @keyframes typingBounce {
    0%, 60%, 100% { transform:translateY(0); opacity:.5; }
    30% { transform:translateY(-4px); opacity:1; }
  }

  /* MESSAGE REACTIONS */
  .chat-bubble-wrap { position:relative; }
  .msg-reactions {
    display:flex; gap:3px; margin-top:2px; flex-wrap:wrap;
  }
  .msg-reaction-pill {
    display:flex; align-items:center; gap:3px;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:12px; padding:2px 7px;
    font-size:11px; cursor:pointer;
  }
  .msg-reaction-pill.mine { border-color:var(--blue); background:var(--blue-glow); }
  .reaction-picker {
    position:absolute; top:-38px; left:0; z-index:20;
    display:flex; gap:4px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:5px 8px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
  }
  .chat-msg-row.me .reaction-picker { left:auto; right:0; }
  .reaction-picker span { font-size:16px; cursor:pointer; transition:transform .15s; }
  .reaction-picker span:active { transform:scale(1.3); }

  /* TAP-TO-REVEAL MESSAGE ACTION BAR */
  .msg-action-bar {
    position:absolute; top:-40px; left:0; z-index:25;
    display:flex; align-items:center; gap:2px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:22px; padding:5px 6px;
    box-shadow:0 6px 20px rgba(0,0,0,0.3);
    animation:actionBarPop .12s ease-out;
  }
  .chat-msg-row.me .msg-action-bar { left:auto; right:0; }
  @keyframes actionBarPop { from { transform:scale(.85); opacity:0; } to { transform:scale(1); opacity:1; } }
  .msg-action-bar .quick-react {
    font-size:17px; cursor:pointer; padding:3px 5px; border-radius:50%; transition:transform .12s;
    line-height:1;
  }
  .msg-action-bar .quick-react:active { transform:scale(1.35); }
  .msg-action-bar .action-divider { width:1px; height:18px; background:var(--border); margin:0 3px; }
  .msg-action-bar .action-icon-btn {
    font-size:14px; cursor:pointer; padding:5px 7px; border-radius:50%; color:var(--text2);
    display:flex; align-items:center; justify-content:center;
  }
  .msg-action-bar .action-icon-btn:active { background:var(--bg2); }
  .chat-bubble { cursor:pointer; transition:filter .1s; }
  .chat-bubble-wrap.active .chat-bubble { filter:brightness(1.08); }

  /* COMPOSE NEW MESSAGE MODAL */
  .compose-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5);
    z-index:200; opacity:0; pointer-events:none; transition:.2s;
  }
  .compose-overlay.open { opacity:1; pointer-events:all; }
  .compose-modal {
    position:fixed; left:50%; bottom:0; transform:translate(-50%, 100%);
    width:100%; max-width:480px;
    background:var(--bg); border-radius:24px 24px 0 0;
    z-index:201; padding:16px 16px 24px;
    transition:.25s cubic-bezier(.16,1,.3,1);
    max-height:70vh; display:flex; flex-direction:column;
  }
  .compose-modal.open { transform:translate(-50%, 0); }
  /* Side-slide variant for the profile view modal, toggled via data-profile-anim="side" on <body> */
  html[data-profile-anim="side"] #profileViewModal {
    left:auto; right:0; top:0; bottom:0; transform:translateX(100%);
    width:85%; max-width:340px; max-height:100vh !important;
    border-radius:0; box-shadow:-4px 0 30px rgba(0,0,0,0.35);
  }
  html[data-profile-anim="side"] #profileViewModal.open { transform:translateX(0); }
  html[data-profile-anim="side"] #profileViewModal .compose-handle { display:none; }
  .compose-handle { width:36px; height:4px; border-radius:2px; background:var(--border); margin:0 auto 14px; }
  .compose-title { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; margin-bottom:12px; }
  .compose-search {
    width:100%; padding:11px 14px; border-radius:14px;
    background:var(--bg2); border:1px solid var(--border);
    color:var(--text); font-size:13px; font-family:'Inter',sans-serif;
    margin-bottom:10px;
  }
  .compose-list { overflow-y:auto; flex:1; }
  .compose-contact {
    display:flex; align-items:center; gap:12px;
    padding:10px 6px; cursor:pointer; border-radius:12px;
  }
  .compose-contact:active { background:var(--surface); }
  .compose-contact-avatar {
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0;
  }
  .compose-contact-name { font-size:13.5px; font-weight:600; }
  .compose-contact-sub { font-size:11px; color:var(--text2); }

  /* CHANNEL INFO PANEL */
  .info-modal { max-height:82vh; }
  .info-hero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:6px 0 18px; }
  .info-hero-icon {
    width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center;
    font-size:28px; margin-bottom:10px;
  }
  .info-hero-name { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:700; }
  .info-hero-sub { font-size:12px; color:var(--text2); margin-top:2px; }
  .info-actions { display:flex; gap:10px; padding:2px 0 16px; }
  .info-action-btn {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:12px 8px; border-radius:14px; background:var(--bg2); border:1px solid var(--border);
    cursor:pointer; font-size:11px; color:var(--text2); transition:.15s;
  }
  .info-action-btn:active { transform:scale(.96); }
  .info-action-btn .info-action-icon { font-size:18px; }
  .info-action-btn.danger { color:#ef4444; }
  .info-action-btn.on { color:var(--blue); background:var(--blue-glow); }
  .info-section-label {
    font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
    color:var(--text2); margin:14px 0 8px 2px;
  }
  .info-pinned-item {
    padding:10px 12px; border-radius:12px; background:var(--bg2); border:1px solid var(--border);
    margin-bottom:8px; font-size:12.5px;
  }
  .info-pinned-name { font-weight:600; font-size:11.5px; color:var(--blue); margin-bottom:3px; }
  .info-pinned-empty { font-size:12.5px; color:var(--text2); padding:8px 2px; }
  .info-member-row {
    display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:12px;
  }
  .info-member-avatar {
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0; background:var(--bg2); position:relative;
  }
  .info-member-dot {
    position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%;
    background:#34d399; border:2px solid var(--bg);
  }
  .info-member-name { font-size:13px; font-weight:500; }
  .info-member-role { font-size:10.5px; color:var(--text2); }

  /* DM INFO PANEL reuses .compose-modal styling */
  .dm-search-row {
    display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg2);
    border-bottom:1px solid var(--border);
    margin-top:58px;
  }
  .dm-search-row input { flex:1; background:transparent; border:none; color:var(--text); font-size:13px; font-family:'Inter',sans-serif; }
  .dm-search-close { cursor:pointer; color:var(--text2); font-size:13px; }
  .msg-ticks { font-size:11px; margin-left:4px; }
  .msg-ticks.seen { color:var(--blue); }
  .msg-ticks.sent { color:var(--text2); }
  .search-hit { background:rgba(77,142,248,0.22); border-radius:4px; }

  /* REPLY */
  .reply-preview-row {
    display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg2);
    border-top:1px solid var(--border); border-left:3px solid var(--blue);
  }
  .reply-preview-text { flex:1; font-size:12px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .reply-preview-text b { color:var(--text); }
  .reply-preview-close { cursor:pointer; color:var(--text2); font-size:14px; padding:2px 4px; }
  .msg-reply-quote {
    display:block; font-size:11.5px; color:var(--text2); background:rgba(120,120,140,0.12);
    border-left:2px solid var(--blue); border-radius:6px; padding:4px 8px; margin-bottom:4px; cursor:pointer;
  }
  .msg-reply-quote b { color:var(--blue); }
  .msg-reply-btn { cursor:pointer; opacity:.55; font-size:11px; margin-left:6px; }
  .msg-mention { color:var(--blue); font-weight:600; background:rgba(77,142,248,0.14); border-radius:4px; padding:0 3px; }
  .mention-badge {
    display:inline-flex; align-items:center; justify-content:center; background:var(--blue);
    color:#fff; font-size:10px; font-weight:700; border-radius:8px; padding:1px 6px; margin-left:6px;
  }
  .reply-count-badge {
    display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:var(--text2);
    margin-top:2px; cursor:pointer;
  }

  /* MENTION PICKER */
  .mention-picker {
    position:absolute; bottom:100%; left:8px; right:8px; max-height:180px; overflow-y:auto;
    background:var(--bg); border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.35);
    margin-bottom:6px; z-index:50;
  }
  .mention-picker-item { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; font-size:13px; }
  .mention-picker-item:hover, .mention-picker-item.active { background:var(--bg2); }
  .mention-picker-avatar { width:26px; height:26px; border-radius:50%; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:13px; }

  /* FORM MODALS (freelancer application, business page creation) */
  .form-field { margin-bottom:14px; }
  .form-label { font-size:12px; font-weight:600; color:var(--text2); margin-bottom:6px; display:block; }
  .form-input, .form-textarea, .form-select {
    width:100%; background:var(--bg2); border:1px solid var(--border); border-radius:12px;
    padding:11px 13px; font-size:13.5px; color:var(--text); font-family:'Inter',sans-serif;
  }
  .form-textarea { resize:vertical; min-height:72px; }
  .form-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
  .form-chip {
    padding:7px 13px; border-radius:20px; background:var(--bg2); border:1px solid var(--border);
    font-size:12px; cursor:pointer; color:var(--text2);
  }
  .form-chip.selected { background:var(--blue); border-color:var(--blue); color:#fff; }
  .form-submit-btn {
    width:100%; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border:none;
    border-radius:14px; padding:13px; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px;
  }
  .form-note { font-size:11px; color:var(--text2); text-align:center; margin-top:8px; line-height:1.4; }

  /* PROFILE ROLE STRIP */
  .role-strip { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px; margin:10px 0 4px; }
  .role-badge { font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:10px; }
  .role-personal { background:var(--bg2); color:var(--text2); border:1px solid var(--border); }
  .role-business { background:rgba(245,158,11,0.16); color:#f59e0b; border:1px solid rgba(245,158,11,0.35); }
  .role-freelancer { background:rgba(52,211,153,0.16); color:#34d399; border:1px solid rgba(52,211,153,0.35); }
  .role-pending { background:rgba(156,163,175,0.16); color:var(--text2); border:1px solid var(--border); }
  .profile-section-tabs { display:flex; gap:6px; padding:0 16px; margin:14px 0 12px; }
  .profile-section-tab {
    flex:1; text-align:center; padding:9px 6px; border-radius:12px; font-size:12px; font-weight:600;
    background:var(--bg2); border:1px solid var(--border); color:var(--text2); cursor:pointer;
  }
  .profile-section-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
  .profile-section { padding:14px; margin:0 16px; border-radius:16px; background:var(--surface); border:1px solid var(--border); }

  .chat-footer-fixed {
    position:fixed; bottom:72px; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px;
    padding:0 16px;
    z-index:150;
    background:var(--bg);
  }
  .chat-input-row {
    display:flex; align-items:center; gap:8px;
    padding:8px 10px 10px;
  }
  .chat-plus { font-size:18px; color:var(--text2); cursor:pointer; padding:0 2px; }
  .chat-input {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text); font-size:13.5px; font-family:'Inter',sans-serif;
  }
  .chat-input::placeholder { color:var(--text2); }
  .chat-send-btn {
    width:34px; height:34px; border-radius:50%;
    background:var(--blue); border:none; color:#fff;
    font-size:15px; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:.15s;
  }
  .chat-send-btn:active { transform:scale(.9); }

  /* SERVICE PACKAGES */
  .pkg-list { display:flex; flex-direction:column; gap:12px; }
  .pkg-card { padding:18px; position:relative; overflow:hidden; }
  .pkg-card.premium { border:1px solid var(--blue); box-shadow:0 0 0 1px var(--blue-glow); }
  .pkg-badge {
    position:absolute; top:12px; right:14px;
    font-size:9px; font-weight:700; letter-spacing:.4px;
    color:var(--blue); background:var(--blue-glow);
    border:1px solid var(--border); padding:3px 9px; border-radius:10px;
  }
  .pkg-name { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:700; margin-bottom:4px; }
  .pkg-price { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:var(--blue); margin-bottom:10px; }
  .pkg-price span { font-size:12px; font-weight:500; color:var(--text2); }
  .pkg-features { list-style:none; margin-bottom:14px; }
  .pkg-features li { font-size:12.5px; color:var(--text2); padding:5px 0; display:flex; gap:8px; align-items:flex-start; }
  .pkg-features li::before { content:'✓'; color:var(--blue); font-weight:700; flex-shrink:0; }
  .pkg-btn {
    width:100%; padding:11px; background:var(--blue); color:#fff; border:none;
    border-radius:14px; font-family:'Cormorant Garamond',serif; font-size:13px; font-weight:600; cursor:pointer;
  }
  .pkg-btn:active { transform:scale(.97); }

  /* Hero shimmer accent (from CybeHub design system) */
  .hero-banner { isolation:isolate; }
  .hero-banner::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
    background-size:250% 250%;
    animation:heroShimmer 5s ease-in-out infinite;
    pointer-events:none; z-index:0;
  }
  @keyframes heroShimmer {
    0% { background-position:200% 0; }
    100% { background-position:-50% 0; }
  }
  .hero-banner > * { position:relative; z-index:1; }

  /* CYBE AI FLOATING BUTTON */
  .cybe-ai-btn {
    position:fixed;
    bottom:90px; right:18px;
    width:56px; height:56px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--blue) 0%, #7c3aed 100%);
    box-shadow:0 4px 20px rgba(77,142,248,0.45);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:300;
    border:2px solid rgba(255,255,255,0.15);
    transition:.2s;
    flex-direction:column; gap:2px;
  }
  .cybe-ai-btn:active { transform:scale(.93); }
  .cybe-ai-btn.dragging { transition:none; box-shadow:0 8px 30px rgba(77,142,248,0.65); }
  .cybe-ai-btn .ai-icon { font-size:22px; line-height:1; }
  .cybe-ai-btn .ai-label { font-size:8px; font-weight:700; color:#fff; letter-spacing:.5px; }

  /* AI CHAT PANEL */
  .ai-panel {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(100%);
    width:100%; max-width:480px;
    background:var(--bg2);
    border-top:1px solid var(--border);
    border-radius:24px 24px 0 0;
    z-index:500;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
    height:70vh;
  }
  .ai-panel.open { transform:translateX(-50%) translateY(0); }

  /* ===== CYBE AI LIVE CALL (simulated voice call) ===== */
  .call-overlay {
    position:fixed; inset:0; z-index:900;
    background:radial-gradient(circle at 50% 30%, #1c2140 0%, #0a0c16 75%);
    display:none; align-items:stretch; justify-content:center;
  }
  .call-overlay.open { display:flex; }
  .call-screen {
    width:100%; max-width:420px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center;
    padding:56px 24px 34px; color:#fff; position:relative;
  }
  .call-status-label {
    font-size:12.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
    color:rgba(255,255,255,0.55); margin-bottom:6px;
  }
  .call-timer { font-size:13px; color:rgba(255,255,255,0.7); font-variant-numeric:tabular-nums; margin-bottom:auto; }
  .call-avatar-wrap { position:relative; width:150px; height:150px; margin:26px 0 22px; display:flex; align-items:center; justify-content:center; }
  .call-avatar-ring {
    position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(77,142,248,0.35);
    animation:callPulse 2.2s ease-out infinite;
  }
  .call-avatar-ring.r2 { animation-delay:.7s; }
  .call-avatar-ring.r3 { animation-delay:1.4s; }
  @keyframes callPulse {
    0% { transform:scale(.78); opacity:.9; }
    100% { transform:scale(1.35); opacity:0; }
  }
  .call-avatar {
    width:112px; height:112px; border-radius:50%;
    background:linear-gradient(135deg,#4d8ef8,#7c3aed);
    display:flex; align-items:center; justify-content:center;
    font-size:48px;
    box-shadow:0 10px 40px rgba(77,142,248,0.5);
    position:relative; z-index:2;
  }
  .call-name { font-size:21px; font-weight:700; font-family:'Cormorant Garamond',serif; margin-bottom:3px; }
  .call-sub { font-size:12.5px; color:rgba(255,255,255,0.55); margin-bottom:20px; text-align:center; }

  .call-waveform {
    display:flex; align-items:center; justify-content:center; gap:3px;
    height:34px; margin-bottom:14px; opacity:0; transition:opacity .3s;
  }
  .call-waveform.active { opacity:1; }
  .call-waveform span {
    display:block; width:3.5px; border-radius:3px;
    background:linear-gradient(180deg,#4d8ef8,#7c3aed);
    animation:callWave 1s ease-in-out infinite;
  }
  .call-waveform span:nth-child(1){height:10px; animation-delay:0s;}
  .call-waveform span:nth-child(2){height:22px; animation-delay:.1s;}
  .call-waveform span:nth-child(3){height:32px; animation-delay:.2s;}
  .call-waveform span:nth-child(4){height:18px; animation-delay:.3s;}
  .call-waveform span:nth-child(5){height:26px; animation-delay:.4s;}
  .call-waveform span:nth-child(6){height:14px; animation-delay:.5s;}
  .call-waveform span:nth-child(7){height:24px; animation-delay:.6s;}
  @keyframes callWave {
    0%,100% { transform:scaleY(.4); }
    50% { transform:scaleY(1); }
  }

  .call-caption-box {
    width:100%; min-height:64px; max-height:120px; overflow-y:auto;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:12px 14px; margin-bottom:auto;
    font-size:13.5px; line-height:1.5; color:rgba(255,255,255,0.92);
  }
  .call-caption-you { color:#8ab4ff; font-weight:600; }

  .call-controls { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:22px; }
  .call-ctrl-btn {
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; cursor:pointer; border:none;
    background:rgba(255,255,255,0.12); color:#fff;
    transition:.15s;
  }
  .call-ctrl-btn:active { transform:scale(.9); }
  .call-ctrl-btn.active { background:#4d8ef8; }
  .call-ctrl-btn.end-call {
    width:64px; height:64px; background:#ef4444;
    box-shadow:0 6px 20px rgba(239,68,68,0.5);
    font-size:24px;
  }
  .call-ctrl-label { font-size:9.5px; color:rgba(255,255,255,0.5); text-align:center; margin-top:6px; }

  /* ===== AI MESSAGE TEMPLATES SHEET ===== */
  .ai-tpl-item {
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 14px; border-radius:14px;
    background:var(--bg2); border:1px solid var(--border);
    margin-bottom:8px; cursor:pointer; transition:.15s;
  }
  .ai-tpl-item:active { background:var(--blue-glow); }
  .ai-tpl-icon { font-size:18px; flex-shrink:0; }
  .ai-tpl-title { font-size:13px; font-weight:700; margin-bottom:2px; }
  .ai-tpl-preview { font-size:11.5px; color:var(--text2); line-height:1.4; }

  .ai-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px 12px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .ai-panel-title {
    font-family:'Cormorant Garamond',serif;
    font-size:16px; font-weight:700;
    display:flex; align-items:center; gap:8px;
  }
  .ai-title-dot {
    width:8px; height:8px; border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 6px #22c55e;
  }
  .ai-close {
    width:32px; height:32px;
    border-radius:50%; background:var(--surface2);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer;
  }
  .ai-messages {
    flex:1; overflow-y:auto;
    padding:16px;
    display:flex; flex-direction:column; gap:12px;
  }
  .ai-msg {
    max-width:85%; padding:12px 14px;
    border-radius:18px; font-size:14px; line-height:1.5;
  }
  .ai-msg.bot {
    background:var(--surface2); color:var(--text);
    border:1px solid var(--border);
    border-bottom-left-radius:6px; align-self:flex-start;
  }
  .ai-msg.user {
    background:var(--blue); color:#fff;
    border-bottom-right-radius:6px; align-self:flex-end;
  }
  .ai-input-row {
    display:flex; gap:8px;
    padding:12px 16px 24px;
    border-top:1px solid var(--border);
    flex-shrink:0;
  }
  .ai-input {
    flex:1; background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px; padding:10px 16px;
    color:var(--text); font-size:14px;
    font-family:'Inter',sans-serif;
    outline:none;
  }
  .ai-input::placeholder { color:var(--text2); }
  .ai-send {
    width:42px; height:42px; border-radius:50%;
    background:var(--blue); border:none;
    color:#fff; font-size:18px;
    cursor:pointer; display:flex;
    align-items:center; justify-content:center;
    flex-shrink:0; transition:.15s;
  }
  .ai-send:active { transform:scale(.93); }
  .ai-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.4);
    z-index:490; display:none;
  }
  .ai-overlay.open { display:block; }

  /* HAMBURGER BUTTON */
  .hamburger-btn {
    width:40px; height:40px;
    border-radius:12px;
    background:var(--surface2);
    border:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    cursor:pointer;
    transition:.15s;
    flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
  }
  .hamburger-btn:active { transform:scale(.95); }
  .hamburger-btn .hb-line {
    width:18px; height:2px;
    background:var(--text);
    border-radius:2px;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    transform-origin:center;
  }
  .hamburger-btn.open .hb-line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .hamburger-btn.open .hb-line:nth-child(2) { opacity:0; transform:scaleX(0); }
  .hamburger-btn.open .hb-line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* DRAWER OVERLAY */
  .drawer-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.5);
    z-index:800;
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .drawer-overlay.open { opacity:1; pointer-events:all; }

  /* DRAWER */
  .nav-drawer {
    position:fixed; left:0; right:0; bottom:0;
    width:100%; max-width:100%; height:85vh; max-height:640px;
    background:var(--bg2);
    border-top:1px solid var(--border);
    border-radius:20px 20px 0 0;
    z-index:900;
    transform:translateY(100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
    padding:0;
    box-shadow:0 -4px 30px rgba(0,0,0,0.35);
  }
  .nav-drawer.open { transform:translateY(0); }
  /* Side-slide variant, toggled via data-drawer-anim="side" on <body> */
  html[data-drawer-anim="side"] .nav-drawer {
    top:0; right:0; bottom:auto; left:auto;
    width:78%; max-width:300px; height:100vh; max-height:none;
    border-top:none; border-left:1px solid var(--border);
    border-radius:0;
    box-shadow:-4px 0 30px rgba(0,0,0,0.35);
    transform:translateX(100%);
  }
  html[data-drawer-anim="side"] .nav-drawer .acc-sheet-handle { display:none; }
  html[data-drawer-anim="side"] .nav-drawer.open { transform:translateX(0); }

  .drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 20px 16px;
    border-bottom:1px solid var(--border);
  }
  .drawer-logo {
    display:flex; align-items:center; gap:8px;
  }
  .drawer-close {
    width:34px; height:34px; border-radius:50%;
    background:var(--surface2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer;
    color:var(--text2);
    transition:.15s;
  }
  .drawer-close:active { transform:scale(.93); }

  .drawer-links {
    flex:1; padding:20px 16px;
    display:flex; flex-direction:column; gap:6px;
    overflow-y:auto;
  }
  .drawer-link {
    display:flex; align-items:center; gap:14px;
    padding:15px 16px;
    border-radius:16px;
    cursor:pointer;
    transition:all .18s;
    border:1px solid transparent;
    color:var(--text);
    text-decoration:none;
  }
  .drawer-link:hover, .drawer-link:active {
    background:var(--surface2);
    border-color:var(--border);
    transform:translateX(4px);
  }
  .drawer-link-icon {
    width:40px; height:40px; border-radius:12px;
    background:var(--blue-glow);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0;
  }
  .drawer-link-text { flex:1; }
  .drawer-link-title { font-size:15px; font-weight:600; font-family:'Cormorant Garamond',serif; }
  .drawer-link-sub { font-size:12px; color:var(--text2); margin-top:1px; }
  .drawer-link-arrow { color:var(--text2); font-size:16px; }

  .drawer-footer {
    padding:16px 20px 28px;
    border-top:1px solid var(--border);
  }
  .drawer-footer-brand {
    font-size:12px; color:var(--text2); text-align:center;
  }
  .drawer-footer-brand strong { color:var(--blue); }

  /* ===== PROFILE PAGE REDESIGN (matching screenshot) ===== */
  .profile-banner-hero {
    position:relative;
    width:100%;
    height:236px;
    border-radius:0 !important;
    overflow:hidden;
    margin-bottom:0;
    background:
      radial-gradient(ellipse 120% 80% at 20% 0%, rgba(124,58,237,0.35), transparent 55%),
      radial-gradient(ellipse 100% 70% at 90% 10%, rgba(77,142,248,0.3), transparent 50%),
      linear-gradient(160deg, #0a1024 0%, #131b36 45%, #060a16 100%);
  }
  .profile-banner-bg {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .profile-banner-bg::before {
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, transparent 20%, rgba(6,10,22,0.55) 65%, rgba(4,7,16,0.96) 100%);
    z-index:1;
  }
  .profile-banner-bg::after {
    content:'';
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(180deg, #000 0%, transparent 75%);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 75%);
  }
  .profile-banner-photo {
    width:100%; height:100%;
    object-fit:cover;
    filter:brightness(0.75) saturate(1.2);
  }
  .profile-banner-placeholder {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:76px; opacity:0.16;
    filter:drop-shadow(0 0 30px rgba(77,142,248,0.5));
  }

  /* Sliding banner pills at top of banner */
  .banner-platforms {
    position:absolute; top:14px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:5; white-space:nowrap;
  }
  .banner-pill {
    display:flex; align-items:center; gap:6px;
    background:rgba(10,14,28,0.6);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:20px;
    padding:6px 12px 6px 6px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
  }
  .banner-pill-logo {
    width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg, #4d8ef8, #7c3aed);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:#fff; flex-shrink:0;
    box-shadow:0 0 8px rgba(77,142,248,0.6);
  }
  .banner-pill-text { font-size:11.5px; font-weight:700; color:#fff; letter-spacing:.6px; }
  .message-btn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(135deg, var(--blue) 0%, var(--blue2) 100%);
    color:#fff; font-size:13px; font-weight:700;
    padding:12px; border-radius:14px; margin-bottom:14px;
    cursor:pointer; box-shadow:0 4px 14px var(--blue-glow);
    transition:transform .15s cubic-bezier(.4,0,.2,1);
  }

  .message-btn-overlay {
    position:absolute; left:16px; right:16px; bottom:14px; z-index:5;
    margin-bottom:0; backdrop-filter:blur(4px);
  }

  /* Profile info overlay at bottom of banner */
  .profile-info-overlay {
    position:absolute; bottom:0; left:0; right:0; z-index:5;
    padding:0 16px 14px;
    display:flex; flex-direction:column; gap:0;
  }
  .profile-avatar-row {
    display:flex; align-items:flex-end; gap:13px;
    margin-bottom:8px;
  }
  .profile-avatar-banner {
    width:60px; height:60px; border-radius:50%;
    padding:2.5px;
    background:conic-gradient(from 180deg, #4d8ef8, #7c3aed, #ec4899, #4d8ef8);
    overflow:visible; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    box-shadow:0 6px 18px rgba(77,142,248,0.35);
  }
  .profile-avatar-banner::before {
    content:'';
    position:absolute; inset:2.5px; border-radius:50%;
    background:linear-gradient(135deg,#1a2a52,#0e1730);
  }
  .profile-avatar-banner span.avatar-emoji {
    position:relative; z-index:1; font-size:24px;
  }
  .profile-avatar-banner img { width:100%; height:100%; object-fit:cover; border-radius:50%; position:relative; z-index:1; }
  .profile-verified-badge {
    position:absolute; bottom:-1px; right:-1px; z-index:2;
    width:19px; height:19px; border-radius:50%;
    background:linear-gradient(135deg,#4d8ef8,#2855c8);
    border:2.5px solid #0a1024;
    display:flex; align-items:center; justify-content:center;
    font-size:9.5px; color:#fff;
    box-shadow:0 0 6px rgba(77,142,248,0.7);
  }
  /* Smaller corner badge variant for compact avatars (post cards, reviews, etc.) */
  .post-avatar, .rev-avatar { position:relative; }
  .post-avatar .profile-verified-badge,
  .rev-avatar .profile-verified-badge {
    width:14px; height:14px; border:2px solid var(--surface); font-size:7px;
  }
  .profile-name-row {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  }
  .profile-name-banner {
    font-family:'Cormorant Garamond',serif;
    font-size:16px; font-weight:700; color:#fff; line-height:1.25;
    letter-spacing:.2px;
    display:block; max-width:100%;
  }
  .profile-check { color:#4d8ef8; font-size:14px; display:inline-flex; filter:drop-shadow(0 0 4px rgba(77,142,248,0.8)); }
  .profile-check svg { width:14px; height:14px; display:block; }
  .profile-brand-tag {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10.5px; font-weight:700; color:#8fb4ff;
    letter-spacing:.6px; margin-top:4px;
    background:rgba(77,142,248,0.14); border:1px solid rgba(77,142,248,0.3);
    padding:2px 8px; border-radius:8px;
  }
  .profile-join-date {
    position:absolute; bottom:8px; right:14px; z-index:6;
    font-size:10px; color:rgba(255,255,255,0.55);
  }

  /* Scrolling ticker — now sits directly below the (straight) cover photo */
  .profile-ticker-wrap {
    width:100%;
    overflow:hidden;
    background:linear-gradient(90deg, rgba(20,32,64,0.9), rgba(40,55,110,0.9), rgba(20,32,64,0.9));
    border-bottom:1px solid rgba(77,142,248,0.25);
    padding:7px 0;
  }
  .profile-ticker {
    display:flex; gap:0;
    white-space:nowrap;
    animation:profileTicker 18s linear infinite;
  }
  @keyframes profileTicker {
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
  }
  .profile-ticker span {
    font-size:10.5px; font-weight:600; color:rgba(255,255,255,0.8);
    letter-spacing:.6px; padding:0 16px;
  }
  .profile-ticker span.dot { color:#7c9dff; padding:0 2px; }

  /* Profile stats row (baked into header) */
  .profile-stats-row {
    display:flex; z-index:5; position:relative; margin:0 16px;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:12px 4px; margin-top:-16px; box-shadow:0 8px 24px rgba(0,0,0,0.18);
  }
  .profile-stat-item { flex:1; text-align:center; border-right:1px solid var(--border); }
  .profile-stat-item:last-child { border-right:none; }
  .profile-stat-num { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:700; color:var(--blue); }
  .profile-stat-label { font-size:9.5px; color:var(--text2); text-transform:uppercase; letter-spacing:.4px; margin-top:1px; }

  /* CYBE AI FOR BUSINESS card */
  .cybe-ai-biz-card {
    margin:16px;
    border-radius:22px;
    position:relative;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(135deg, #4d8ef8, #7c3aed 45%, #ec4899 75%, #4d8ef8) border-box;
    border:1.5px solid transparent;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(77,142,248,0.14);
  }
  .cybe-ai-biz-card::before {
    content:'';
    position:absolute; top:-60%; right:-30%; width:220px; height:220px; z-index:0; pointer-events:none;
    background:radial-gradient(circle, rgba(124,58,237,0.22), transparent 70%);
  }
  .cybe-ai-biz-header {
    display:flex; align-items:center; gap:12px;
    padding:16px 16px 14px;
    position:relative; z-index:1;
  }
  .cybe-ai-biz-avatar {
    width:50px; height:50px; border-radius:50%;
    overflow:hidden; flex-shrink:0; position:relative;
    padding:2px;
    background:conic-gradient(from 180deg, #4d8ef8, #7c3aed, #ec4899, #4d8ef8);
    display:flex; align-items:center; justify-content:center; font-size:20px;
    box-shadow:0 4px 14px rgba(77,142,248,0.4);
  }
  .cybe-ai-biz-avatar::before {
    content:''; position:absolute; inset:2px; border-radius:50%;
    background:linear-gradient(135deg,#2a3a6a,#151f3f); z-index:0;
  }
  .cybe-ai-biz-avatar span.avatar-emoji { position:relative; z-index:1; }
  .cybe-ai-biz-avatar img { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; border-radius:50%; }
  .cybe-ai-online-dot {
    position:absolute; bottom:0px; right:0px; z-index:2;
    width:13px; height:13px; border-radius:50%;
    background:#22c55e; border:2.5px solid var(--surface);
    box-shadow:0 0 7px #22c55e;
  }
  .cybe-ai-biz-info { flex:1; min-width:0; }
  .cybe-ai-biz-name {
    font-size:12px; font-weight:800;
    background:linear-gradient(90deg, #4d8ef8, #a78bfa);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    letter-spacing:.7px; text-transform:uppercase;
    display:flex; align-items:center; gap:6px;
  }
  .cybe-ai-online-pulse {
    width:7px; height:7px; border-radius:50%; background:#4d8ef8;
    box-shadow:0 0 0 0 rgba(77,142,248,0.4);
    animation:pulse 1.8s infinite;
    flex-shrink:0;
  }
  @keyframes pulse {
    0% { box-shadow:0 0 0 0 rgba(77,142,248,0.5); }
    70% { box-shadow:0 0 0 6px rgba(77,142,248,0); }
    100% { box-shadow:0 0 0 0 rgba(77,142,248,0); }
  }
  .cybe-ai-biz-sub { font-size:12.5px; color:var(--text2); margin-top:2px; }
  .cybe-ai-biz-call {
    width:40px; height:40px; border-radius:50%;
    background:var(--bg2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer; flex-shrink:0;
    transition:.15s;
  }
  .cybe-ai-biz-call:active { transform:scale(.9); }

  .cybe-ai-biz-body {
    padding:18px 18px 16px;
    background:var(--bg2);
    margin:0 14px 12px;
    border-radius:16px;
    border:1px solid var(--border);
    position:relative; z-index:1;
  }
  .cybe-ai-quote-mark {
    font-size:26px; color:var(--blue); opacity:0.45;
    font-family:'Cormorant Garamond',serif; line-height:0.5;
    margin-bottom:6px;
    display:block;
  }
  .cybe-ai-quote-text {
    font-size:13.5px; font-style:italic; font-weight:500;
    line-height:1.55; color:var(--text);
  }

  .cybe-ai-biz-footer {
    padding:0 14px 16px;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    position:relative; z-index:1;
  }

  /* 3-way action row: Live Call / Chat / Templates — hidden until CTA button is tapped */
  .cybe-ai-biz-actions {
    display:none; grid-template-columns:repeat(3,1fr); gap:8px;
    padding:0 14px 14px; position:relative; z-index:1;
    animation:cybeAiActionsIn .25s cubic-bezier(.4,0,.2,1);
  }
  .cybe-ai-biz-actions.open { display:grid; }
  @keyframes cybeAiActionsIn {
    from { opacity:0; transform:translateY(-6px); }
    to { opacity:1; transform:translateY(0); }
  }
  .cybe-ai-biz-action {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:10px 6px; border-radius:14px;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border);
    cursor:pointer; transition:.15s;
  }
  [data-theme="light"] .cybe-ai-biz-action { background:rgba(255,255,255,0.6); }
  .cybe-ai-biz-action:active { transform:scale(.94); background:var(--blue-glow); }
  .cybe-ai-biz-action-icon { font-size:18px; }
  .cybe-ai-biz-action-label { font-size:10.5px; font-weight:700; color:var(--text2); letter-spacing:.2px; }

  .cybe-ai-biz-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 18px;
    background:linear-gradient(135deg, #4d8ef8 0%, #6d3fd6 100%);
    border-radius:50px;
    border:none; cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:13px; font-weight:700; color:#fff;
    letter-spacing:.2px;
    transition:.2s cubic-bezier(.4,0,.2,1);
    box-shadow:0 6px 18px rgba(77,142,248,0.4);
  }
  .cybe-ai-biz-btn:active { transform:scale(.96); }
  .cybe-ai-biz-btn-icon {
    font-size:14px; display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.18);
  }
  /* ===== CYBE AI FOR BUSINESS — newsfeed composer widget ===== */
  .cybe-ai-composer-card {
    margin:0 0 16px;
    border-radius:20px;
    position:relative;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(135deg, #4d8ef8, #7c3aed 45%, #ec4899 75%, #4d8ef8) border-box;
    border:1.5px solid transparent;
    overflow:hidden;
    padding:14px 16px;
    box-shadow:0 8px 22px rgba(77,142,248,0.14);
    cursor:pointer;
    display:flex; align-items:center; gap:12px;
  }
  .cybe-ai-composer-icon {
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:conic-gradient(from 180deg, #4d8ef8, #7c3aed, #ec4899, #4d8ef8);
    display:flex; align-items:center; justify-content:center; font-size:18px;
    box-shadow:0 4px 14px rgba(77,142,248,0.4);
  }
  .cybe-ai-composer-text { flex:1; min-width:0; }
  .cybe-ai-composer-title {
    font-size:12px; font-weight:800;
    background:linear-gradient(90deg, #4d8ef8, #a78bfa);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    letter-spacing:.5px; text-transform:uppercase;
  }
  .cybe-ai-composer-sub { font-size:12.5px; color:var(--text2); margin-top:3px; }
  .cybe-ai-composer-arrow { font-size:16px; color:var(--blue); flex-shrink:0; }

  .cybe-ai-pending-banner {
    margin:0 0 16px; padding:12px 16px; border-radius:16px;
    background:var(--bg2); border:1px solid var(--border);
    display:flex; align-items:center; gap:10px;
    font-size:12.5px; color:var(--text2);
  }
  .cybe-ai-pending-dot {
    width:8px; height:8px; border-radius:50%; background:#f59e0b; flex-shrink:0;
    box-shadow:0 0 0 0 rgba(245,158,11,0.5);
    animation:pulse 1.4s infinite;
  }

  /* Account selector chips inside the AI composer modal */
  .ai-account-selector { display:flex; gap:10px; }
  .ai-account-chip {
    flex:1; display:flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:14px;
    background:var(--bg2); border:1.5px solid var(--border);
    cursor:pointer; transition:.15s;
  }
  .ai-account-chip.selected { border-color:var(--blue); background:var(--blue-glow); }
  .ai-account-chip-avatar { font-size:18px; flex-shrink:0; }
  .ai-account-chip-text { min-width:0; }
  .ai-account-chip-name { font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ai-account-chip-sub { font-size:10.5px; color:var(--text2); }

  .ai-caption-box {
    position:relative;
    background:var(--bg); border-radius:14px;
    box-shadow:inset 3px 3px 8px var(--inset-light), inset -3px -3px 8px var(--inset-dark);
  }
  .ai-caption-generating {
    display:flex; align-items:center; gap:8px;
    padding:14px; font-size:12.5px; color:var(--text2);
  }
  .ai-caption-dots span {
    display:inline-block; width:5px; height:5px; border-radius:50%;
    background:var(--blue); margin-right:3px;
    animation:aiDotBounce 1.1s infinite;
  }
  .ai-caption-dots span:nth-child(2) { animation-delay:.15s; }
  .ai-caption-dots span:nth-child(3) { animation-delay:.3s; }
  @keyframes aiDotBounce {
    0%, 60%, 100% { transform:translateY(0); opacity:.5; }
    30% { transform:translateY(-4px); opacity:1; }
  }
  .ai-regenerate-btn {
    display:flex; align-items:center; gap:5px;
    font-size:11.5px; font-weight:700; color:var(--blue);
    cursor:pointer; margin-top:8px; width:fit-content;
  }
  .ai-regenerate-btn:active { opacity:.6; }

  .ai-media-row {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-radius:14px;
    background:var(--bg2); border:1px dashed var(--border);
    cursor:pointer;
  }
  .ai-media-row-icon { font-size:20px; }
  .ai-media-row-text { flex:1; font-size:12.5px; color:var(--text2); }
  .ai-media-preview {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:14px;
    background:var(--blue-glow); border:1px solid var(--border);
  }
  .ai-media-preview-thumb { width:38px; height:38px; border-radius:10px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:16px; }
  .ai-media-preview-name { flex:1; font-size:12px; color:var(--text); }
  .ai-media-remove { font-size:13px; color:var(--text2); cursor:pointer; padding:4px; }

  .ai-privacy-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-radius:14px; background:var(--bg2); border:1px solid var(--border);
  }
  .ai-privacy-row + .ai-privacy-row { margin-top:8px; }
  .ai-privacy-row-text { flex:1; padding-right:10px; }
  .ai-privacy-row-title { font-size:12.5px; font-weight:700; color:var(--text); }
  .ai-privacy-row-sub { font-size:11px; color:var(--text2); margin-top:1px; }

  .ai-pending-state {
    text-align:center; padding:26px 16px;
  }
  .ai-pending-spinner {
    width:44px; height:44px; border-radius:50%; margin:0 auto 14px;
    border:3px solid var(--border); border-top-color:var(--blue);
    animation:aiSpin 0.9s linear infinite;
  }
  @keyframes aiSpin { to { transform:rotate(360deg); } }
  .ai-pending-countdown { font-size:11.5px; color:var(--text2); margin-top:6px; }

  /* BOTTOM TABS for profile page */
  .profile-bottom-tabs {
    display:flex; border-top:1px solid var(--border);
    background:var(--bg2); margin-top:8px;
  }
  .profile-bottom-tab {
    flex:1; padding:14px 8px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    cursor:pointer; border-right:1px solid var(--border);
    transition:.15s;
  }
  .profile-bottom-tab:last-child { border-right:none; }
  .profile-bottom-tab:active { background:var(--surface); }
  .profile-bottom-tab-logo {
    width:36px; height:36px; border-radius:50%;
    background:var(--surface2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .profile-bottom-tab-label {
    font-size:10px; font-weight:700; color:var(--text2);
    letter-spacing:.5px; text-transform:uppercase;
  }

/* ===== BLOG PANEL ===== */
.cybehub-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.cybehub-blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.cybehub-blog-card-link { display: block; text-decoration: none; color: inherit; }
.cybehub-blog-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.cybehub-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cybehub-blog-card-body { padding: 14px 16px 18px; }
.cybehub-blog-date {
  font-size: 11px; color: var(--text2); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 6px;
}
.cybehub-blog-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 600; margin: 0 0 8px; color: var(--text);
}
.cybehub-blog-excerpt { font-size: 12.5px; color: var(--text2); line-height: 1.5; margin: 0 0 8px; }
.cybehub-blog-readmore { font-size: 12px; font-weight: 600; color: var(--blue); }
.cybehub-blog-empty { text-align: center; color: var(--text2); padding: 32px 0; font-size: 13px; }

/* ===== STANDALONE BLOG PAGE (page-blog.php) ===== */
.cybehub-standalone-page,
.cybehub-standalone-blog {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}
.cybehub-blog-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 18px;
}
.cybehub-blog-back:hover { text-decoration: underline; }