/* ==========================================================================
       sjlx.net  —  MtF Pastel Dream · Glass UI  v2
       Inspired by DeepSeek For the Break v5.8
       Rich animations · micro-interactions · polished
       ========================================================================== */

    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Noto+Serif+JP:wght@400;600;700&family=ZCOOL+XiaoWei&display=swap');

    /* ---------- Design Tokens ---------- */
    :root {
      --pink-50:  #fff7fa;
      --pink-100: #fff0f5;
      --pink-200: #fddde6;
      --pink-300: #fcc9d9;
      --pink-500: #f5a0b2;

      --blue-200: #dceeff;
      --blue-300: #b8ddfe;
      --blue-400: #8ec9fc;
      --blue-500: #5bbdfa;

      --lilac:    #d4b0dd;
      --lilac-soft: #f4ecf8;

      --bg: linear-gradient(160deg, #fef0f5 0%, #fef7fa 22%, #ffffff 48%, #f8f6ff 74%, #f0f5ff 100%);
      --bg-solid: #fef5f8;
      --bg-card: rgba(255,255,255,0.78);
      --bg-card-solid: #ffffff;
      --bg-hover: #fff5f8;
      --bg-input: #fffafc;
      --bg-elevated: rgba(255,255,255,0.82);

      --text: #3d2c3a;
      --text-soft: #7a5d72;
      --text-muted: #b8a0b0;
      --text-primary: var(--text);

      --border: #f0dce5;
      --border-strong: #e8c8d8;
      --border-glow: rgba(245,160,178,0.45);

      --grad-pink-blue: linear-gradient(135deg, #f5a0b2 0%, #e8a0c8 25%, #d4b0dd 50%, #b0c8ee 75%, #8ec9fc 100%);
      --grad-pink: linear-gradient(135deg, #fddde6, #f9b4c4, #f5a0b2);
      --grad-blue: linear-gradient(135deg, #dceeff, #b8ddfe, #8ec9fc);
      --grad-soft: linear-gradient(135deg, #fff0f5, #f0f7ff);
      --grad-card: linear-gradient(160deg, #ffffff, #fffafc, #fef7fa);

      --shadow-sm: 0 2px 12px rgba(245,160,178,0.10);
      --shadow: 0 6px 24px rgba(245,160,178,0.14);
      --shadow-lg: 0 12px 40px rgba(245,160,178,0.18);
      --shadow-glow: 0 0 36px rgba(245,160,178,0.14), 0 0 72px rgba(142,201,252,0.08);

      --radius-xs: 8px;
      --radius-sm: 14px;
      --radius: 20px;
      --radius-lg: 26px;
      --radius-xl: 34px;
      --radius-full: 9999px;

      --font: 'Nunito', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
      --ease-out: cubic-bezier(0.16,1,0.3,1);
      --ease-spring: cubic-bezier(0.22,0.68,0,1.28);
      --transition: 0.28s var(--ease-out);

      --sidebar-width: 260px;
      --sidebar-collapsed: 72px;

      --primary: #f5a0b2;
      --primary-light: #fcc9d9;
      --accent: #8ec9fc;

      --orb-a: rgba(245,160,178,0.30);
      --orb-b: rgba(142,201,252,0.25);
      --orb-c: rgba(212,176,221,0.25);
    }

    /* ---------- Reset ---------- */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
    body{
      font-family:var(--font);
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
      display:flex;
      overflow-x:hidden;
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button{cursor:pointer;font-family:inherit;border:none;outline:none;background:none}
    input,textarea{font-family:inherit;font-size:inherit}

    /* ==================================================================
       BACKGROUND ORBS + PARTICLES
       ================================================================== */
    .bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
    .orb{
      position:absolute;border-radius:50%;filter:blur(120px);opacity:0.6;
      animation:orbFloat 18s ease-in-out infinite;
    }
    .orb-a{
      width:420px;height:420px;background:var(--orb-a);
      top:-8%;left:-6%;animation-delay:0s;
    }
    .orb-b{
      width:360px;height:360px;background:var(--orb-b);
      bottom:-10%;right:-5%;animation-delay:-6s;
    }
    .orb-c{
      width:280px;height:280px;background:var(--orb-c);
      top:45%;left:48%;animation-delay:-12s;
    }
    @keyframes orbFloat{
      0%,100%{transform:translate(0,0) scale(1)}
      25%{transform:translate(30px,-40px) scale(1.08)}
      50%{transform:translate(-20px,-60px) scale(0.94)}
      75%{transform:translate(-40px,20px) scale(1.06)}
    }

    /* Floating sparkle particles */
    .sparkle-container{position:fixed;inset:0;pointer-events:none;z-index:1}
    .sparkle{
      position:absolute;width:6px;height:6px;
      background:var(--primary);
      border-radius:50%;
      animation:sparkleFloat 6s ease-in-out infinite;
      opacity:0;
    }
    .sparkle:nth-child(1){left:10%;top:20%;animation-delay:0s;width:4px;height:4px}
    .sparkle:nth-child(2){left:25%;top:65%;animation-delay:-1.5s;width:3px;height:3px;background:var(--accent)}
    .sparkle:nth-child(3){left:70%;top:30%;animation-delay:-3s;width:5px;height:5px;background:var(--lilac)}
    .sparkle:nth-child(4){left:55%;top:75%;animation-delay:-4.5s;width:3px;height:3px}
    .sparkle:nth-child(5){left:85%;top:50%;animation-delay:-2s;width:4px;height:4px;background:var(--accent)}
    .sparkle:nth-child(6){left:40%;top:12%;animation-delay:-5s;width:3px;height:3px;background:var(--lilac)}
    .sparkle:nth-child(7){left:15%;top:85%;animation-delay:-3.5s;width:5px;height:5px}
    .sparkle:nth-child(8){left:90%;top:15%;animation-delay:-1s;width:4px;height:4px;background:var(--accent)}
    @keyframes sparkleFloat{
      0%,100%{opacity:0;transform:translateY(0) scale(1)}
      20%{opacity:0.8}
      50%{opacity:0.4;transform:translateY(-60px) scale(1.5)}
      80%{opacity:0.1}
    }

    /* ==================================================================
       SIDEBAR
       ================================================================== */
    .sidebar{
      position:fixed;top:0;left:0;bottom:0;z-index:100;
      width:var(--sidebar-width);
      background:rgba(255,255,255,0.72);
      backdrop-filter:blur(24px) saturate(180%);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
      border-right:1px solid var(--border);
      display:flex;flex-direction:column;
      padding:20px 14px 16px;
      transition:width var(--transition),transform var(--transition);
      overflow:hidden;
    }
    .sidebar.collapsed{width:var(--sidebar-collapsed)}
    .sidebar.collapsed .brand-name,
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .footer-text{opacity:0;pointer-events:none;transition:opacity 0.15s}
    .sidebar.collapsed .brand-avatar{width:40px;height:40px}
    .sidebar.collapsed .nav-item{padding:10px 8px;justify-content:center}
    .sidebar.collapsed .nav-icon{font-size:1.3rem;margin-right:0}

    .sidebar-toggle{
      position:absolute;top:14px;right:10px;
      width:34px;height:34px;border-radius:var(--radius-xs);
      background:var(--bg-hover);color:var(--text-soft);
      display:flex;align-items:center;justify-content:center;
      font-size:1.1rem;transition:all var(--transition);
      z-index:2;
    }
    .sidebar-toggle:hover{background:var(--border);color:var(--text);transform:scale(1.08)}
    .sidebar-toggle:active{transform:scale(0.94)}
    .toggle-icon{transition:transform 0.3s}
    .sidebar.collapsed .toggle-icon{transform:rotate(180deg)}

    .sidebar-brand{
      display:flex;align-items:center;gap:12px;
      padding:4px 6px 16px;margin-bottom:8px;
      border-bottom:1px solid var(--border);
      cursor:pointer;white-space:nowrap;
      transition:opacity var(--transition);
    }
    .brand-avatar{
      width:48px;height:48px;border-radius:var(--radius-full);
      overflow:hidden;flex-shrink:0;
      box-shadow:0 2px 14px rgba(245,160,178,0.25);
      border:2.5px solid transparent;
      background:var(--grad-pink-blue);
      padding:2px;
      transition:width var(--transition),height var(--transition),transform 0.3s var(--ease-bounce);
    }
    .brand-avatar:hover{transform:scale(1.1) rotate(-3deg)}
    .brand-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff}
    .brand-name{
      font-weight:800;font-size:1.2rem;
      background:var(--grad-pink-blue);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
    }

    /* Sidebar Nav */
    .sidebar-nav{flex:1;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
    .nav-item{
      display:flex;align-items:center;gap:11px;
      padding:10px 12px;border-radius:var(--radius-sm);
      font-size:0.95rem;font-weight:600;
      color:var(--text-soft);
      transition:all var(--transition);
      white-space:nowrap;position:relative;
      overflow:hidden;
    }
    .nav-item::after{
      content:'';position:absolute;inset:0;
      background:var(--grad-soft);opacity:0;
      transition:opacity 0.3s;
    }
    .nav-item:hover{color:var(--text);transform:translateX(3px)}
    .nav-item:hover::after{opacity:1}
    .nav-item:active{transform:scale(0.96)}
    .nav-item.active{
      background:var(--grad-soft);
      color:var(--text);
      box-shadow:var(--shadow-sm);
      transform:none;
    }
    .nav-item.active::before{
      content:'';position:absolute;left:0;top:20%;bottom:20%;
      width:3px;border-radius:2px;
      background:var(--grad-pink-blue);
      animation:navIndicatorIn 0.4s var(--ease-bounce);
    }
    @keyframes navIndicatorIn{
      from{transform:scaleY(0);opacity:0}
      to{transform:scaleY(1);opacity:1}
    }
    .nav-icon{font-size:1.15rem;flex-shrink:0;width:22px;text-align:center;position:relative;z-index:1}
    .nav-label{position:relative;z-index:1}
    .nav-child{padding-left:28px;font-size:0.88rem}
    .nav-parent{font-weight:700}

    .sidebar-footer{
      margin-top:auto;padding-top:12px;
      border-top:1px solid var(--border);
      text-align:center;
    }
    .footer-text{font-size:0.8rem;color:var(--text-muted);font-weight:700;letter-spacing:0.04em}

    /* ==================================================================
       MOBILE HAMBURGER
       ================================================================== */
    .mobile-hamburger{
      display:none;position:fixed;top:16px;left:16px;z-index:150;
      width:42px;height:42px;border-radius:var(--radius-sm);
      background:var(--bg-elevated);backdrop-filter:blur(16px);
      border:1px solid var(--border);box-shadow:var(--shadow);
      flex-direction:column;align-items:center;justify-content:center;
      gap:5px;cursor:pointer;transition:all var(--transition);
    }
    .mobile-hamburger:hover{box-shadow:var(--shadow-lg);transform:scale(1.05)}
    .mobile-hamburger:active{transform:scale(0.92)}
    .mobile-hamburger span{
      display:block;width:20px;height:2.5px;border-radius:2px;
      background:var(--text-soft);transition:all 0.3s;
    }

    /* ==================================================================
       MAIN CONTENT
       ================================================================== */
    .main-content{
      margin-left:var(--sidebar-width);
      flex:1;min-height:100vh;
      padding:32px 40px 60px;
      position:relative;z-index:1;
      transition:margin-left var(--transition);
    }
    .sidebar.collapsed ~ .main-content{margin-left:var(--sidebar-collapsed)}

    .page-container{max-width:1100px;margin:0 auto}

    /* Page entrance animation */
    .page-entering{animation:pageIn 0.5s var(--ease-out)}
    @keyframes pageIn{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }

    .page-header{margin-bottom:32px}
    .page-title{
      font-size:2rem;font-weight:900;
      background:var(--grad-pink-blue);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
      letter-spacing:-0.02em;
    }
    .page-subtitle{color:var(--text-soft);font-size:1rem;margin-top:6px;font-weight:500}

    /* ==================================================================
       CARD (Glass)
       ================================================================== */
    .card{
      background:var(--bg-card);
      backdrop-filter:blur(16px) saturate(160%);
      -webkit-backdrop-filter:blur(16px) saturate(160%);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:24px 28px;
      box-shadow:var(--shadow);
      margin-bottom:20px;
      transition:all var(--transition);
    }
    .card:hover{box-shadow:var(--shadow-lg);border-color:var(--border-glow)}
    .card-header{
      display:flex;align-items:center;justify-content:space-between;
      margin-bottom:16px;flex-wrap:wrap;gap:12px;
    }
    .card-title{font-size:1.25rem;font-weight:800;color:var(--text)}
    .card-subtitle{font-size:0.85rem;color:var(--text-muted);margin-top:2px}

    /* Staggered card entrance */
    .card-stagger{animation:cardUp 0.5s var(--ease-out) both}
    @keyframes cardUp{
      from{opacity:0;transform:translateY(30px)}
      to{opacity:1;transform:translateY(0)}
    }

    /* ==================================================================
       PROFILE CARD
       ================================================================== */
    .profile-card{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
    .profile-avatar-wrap{position:relative;cursor:pointer;flex-shrink:0}
    .profile-avatar{
      width:100px;height:100px;border-radius:var(--radius-full);
      border:3px solid transparent;
      background:var(--grad-pink-blue);padding:3px;
      overflow:hidden;
      box-shadow:0 4px 22px rgba(245,160,178,0.30);
      transition:all 0.4s var(--ease-bounce);
    }
    .profile-avatar:hover{
      transform:scale(1.08) rotate(2deg);
      box-shadow:0 8px 36px rgba(245,160,178,0.45);
    }
    .profile-avatar:active{transform:scale(0.95)}
    .profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff}
    .profile-avatar-edit{
      position:absolute;bottom:2px;right:2px;
      width:30px;height:30px;border-radius:50%;
      background:var(--grad-pink-blue);color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-size:0.8rem;box-shadow:var(--shadow);
      transition:all 0.3s var(--ease-bounce);
    }
    .profile-avatar-wrap:hover .profile-avatar-edit{transform:scale(1.2)}
    .profile-info{flex:1;min-width:180px}
    .profile-nickname{
      font-size:1.8rem;font-weight:900;display:inline-flex;align-items:center;gap:8px;
    }
    .edit-btn{
      font-size:0.85rem;background:var(--grad-soft);
      border-radius:var(--radius-xs);padding:4px 12px;
      color:var(--text-soft);cursor:pointer;
      transition:all var(--transition);font-weight:600;
    }
    .edit-btn:hover{background:var(--primary-light);color:#fff;transform:scale(1.05)}
    .edit-btn:active{transform:scale(0.93)}
    .profile-bio{color:var(--text-soft);margin-top:6px;font-size:0.95rem}

    /* Stats */
    .stats-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
    .stat-chip{
      background:var(--grad-soft);
      border-radius:var(--radius-full);padding:7px 18px;
      font-size:0.85rem;font-weight:700;
      color:var(--text-soft);
      border:1px solid var(--border);
      transition:all var(--transition);
    }
    .stat-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--primary-light)}

    /* ==================================================================
       QUICK LINKS
       ================================================================== */
    .quick-links{display:flex;gap:12px;flex-wrap:wrap}
    .quick-link{
      display:flex;align-items:center;gap:8px;
      padding:12px 22px;border-radius:var(--radius-full);
      background:var(--grad-soft);border:1.5px solid var(--border);
      font-weight:700;font-size:0.92rem;
      color:var(--text-soft);
      transition:all 0.35s var(--ease-bounce);
      cursor:pointer;position:relative;overflow:hidden;
    }
    .quick-link::before{
      content:'';position:absolute;inset:0;
      background:var(--grad-pink);opacity:0;
      transition:opacity 0.3s;
    }
    .quick-link:hover{
      color:#fff;border-color:transparent;
      box-shadow:var(--shadow-lg);
      transform:translateY(-3px);
    }
    .quick-link:hover::before{opacity:1}
    .quick-link:active{transform:scale(0.94)}
    .quick-link span{position:relative;z-index:1}

    /* ==================================================================
       QUOTE CARDS (Dashboard)
       ================================================================== */
    .quote-section{
      display:grid;grid-template-columns:1fr 1fr;
      gap:20px;margin-bottom:0;
    }
    @media(max-width:900px){.quote-section{grid-template-columns:1fr}}

    .quote-card{
      position:relative;
      background:linear-gradient(160deg, rgba(255,255,255,0.90), rgba(255,250,252,0.92), rgba(240,247,255,0.90));
      backdrop-filter:blur(20px) saturate(1.2);
      -webkit-backdrop-filter:blur(20px) saturate(1.2);
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      padding:26px 30px 22px;
      box-shadow:var(--shadow);
      cursor:pointer;user-select:none;
      transition:all 0.4s var(--ease-bounce);
      overflow:hidden;
      min-height:150px;
      display:flex;flex-direction:column;justify-content:center;
    }
    .quote-card:hover{
      box-shadow:var(--shadow-lg);
      transform:translateY(-4px);
      border-color:var(--border-glow);
    }
    .quote-card:active{transform:scale(0.975);transition:0.12s}
    .quote-card.flash{animation:quoteFlash 0.6s var(--ease-out)}
    @keyframes quoteFlash{
      0%{box-shadow:0 0 0 0 rgba(245,160,178,0.7)}
      50%{box-shadow:0 0 48px 12px rgba(245,160,178,0.35)}
      100%{box-shadow:var(--shadow)}
    }
    .quote-card::before{
      content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='20' cy='30' r='2.5' fill='%23fcc9d9' opacity='0.5'/%3E%3Ccircle cx='120' cy='50' r='2' fill='%23fcc9d9' opacity='0.35'/%3E%3Ccircle cx='170' cy='40' r='3' fill='%23b8ddfe' opacity='0.4'/%3E%3Ccircle cx='50' cy='120' r='2' fill='%23fcc9d9' opacity='0.4'/%3E%3Ccircle cx='140' cy='110' r='2.5' fill='%23b8ddfe' opacity='0.3'/%3E%3Ccircle cx='30' cy='160' r='1.8' fill='%23d4b0dd' opacity='0.35'/%3E%3Ccircle cx='160' cy='150' r='2.2' fill='%23d4b0dd' opacity='0.35'/%3E%3C/svg%3E") center/cover no-repeat;
      opacity:0.55;
    }
    .quote-card-header{
      position:relative;z-index:1;
      display:flex;align-items:center;gap:8px;margin-bottom:14px;
    }
    .quote-card-header .qc-icon{font-size:1.3rem}
    .quote-card-header .qc-label{
      font-size:0.78rem;font-weight:800;text-transform:uppercase;
      letter-spacing:0.08em;color:var(--text-muted);
    }
    .quote-card .qc-jp{
      position:relative;z-index:1;
      font-family:'Noto Serif JP','ZCOOL XiaoWei',serif;
      font-size:1.15rem;font-weight:600;
      color:var(--text);line-height:1.75;
      margin-bottom:8px;letter-spacing:0.02em;
    }
    .quote-card .qc-cn{
      position:relative;z-index:1;
      font-size:0.95rem;color:var(--text-soft);
      line-height:1.65;margin-bottom:10px;
    }
    .quote-card .qc-src{
      position:relative;z-index:1;
      font-size:0.8rem;font-weight:700;
      color:var(--primary);align-self:flex-end;
    }
    .quote-card .qc-flower{
      position:relative;z-index:1;
      font-size:0.85rem;font-weight:800;
      color:var(--lilac);align-self:flex-end;
      display:flex;align-items:center;gap:6px;
    }
    .quote-card.anime-card{border-left:4px solid transparent;border-image:linear-gradient(180deg,var(--primary),var(--lilac)) 1}
    .quote-card.flower-card{border-left:4px solid transparent;border-image:linear-gradient(180deg,var(--lilac),var(--accent)) 1}
    .refresh-hint{
      position:absolute;top:14px;right:18px;z-index:2;
      font-size:0.72rem;color:var(--text-muted);
      opacity:0;transition:all 0.3s;
      pointer-events:none;
    }
    .quote-card:hover .refresh-hint{opacity:1;transform:translateY(-2px)}

    /* ==================================================================
       GALLERY GRID — Sketch & Perfect
       ================================================================== */
    .gallery-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
      gap:24px;
    }

    .gallery-card{
      background:var(--bg-card);
      backdrop-filter:blur(16px) saturate(160%);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      overflow:hidden;
      box-shadow:var(--shadow-sm);
      transition:all 0.4s var(--ease-bounce);
      cursor:default;
      animation:cardUp 0.5s var(--ease-out) both;
    }
    .gallery-card:hover{
      box-shadow:var(--shadow-lg);
      transform:translateY(-6px);
      border-color:var(--border-glow);
    }
    .gallery-card:active{transform:scale(0.975)}
    .gallery-card-img{
      width:100%;aspect-ratio:4/3;overflow:hidden;
      background:var(--grad-soft);
      display:flex;align-items:center;justify-content:center;
      font-size:3rem;color:var(--text-muted);
      position:relative;
    }
    .gallery-card-img img{
      width:100%;height:100%;object-fit:cover;
      transition:transform 0.6s var(--ease-out);
    }
    .gallery-card:hover .gallery-card-img img{transform:scale(1.06)}
    .gallery-card-img .img-overlay{
      position:absolute;inset:0;
      background:linear-gradient(to top, rgba(245,160,178,0.12), transparent);
      opacity:0;transition:opacity 0.3s;
    }
    .gallery-card:hover .img-overlay{opacity:1}
    .gallery-card-body{padding:18px 20px}
    .gallery-card-title{font-weight:800;font-size:1.05rem;color:var(--text);line-height:1.3}
    .gallery-card-meta{font-size:0.82rem;color:var(--text-muted);margin-top:6px}
    .gallery-card-artist{
      margin-top:8px;padding-top:10px;
      border-top:1px solid var(--border);
      font-size:0.85rem;color:var(--text-soft);
      display:flex;align-items:center;gap:6px;
    }
    .gallery-card-artist .artist-label{
      font-weight:700;font-size:0.75rem;text-transform:uppercase;
      letter-spacing:0.05em;color:var(--text-muted);
    }
    .gallery-card-artist a{
      color:var(--accent);font-weight:700;
      text-decoration:underline;text-underline-offset:3px;
      transition:color 0.2s;
    }
    .gallery-card-artist a:hover{color:var(--primary)}
    .gallery-card-actions{
      display:flex;gap:8px;margin-top:12px;padding-top:10px;
      border-top:1px solid var(--border);
    }
    .gallery-card-actions button{
      font-size:0.78rem;padding:5px 14px;border-radius:var(--radius-full);
      background:var(--grad-soft);color:var(--text-soft);
      font-weight:700;transition:all var(--transition);
      border:1px solid transparent;
    }
    .gallery-card-actions button:hover{
      background:var(--primary-light);color:#fff;border-color:transparent;
      transform:translateY(-1px);
    }
    .gallery-card-actions button.danger:hover{background:#fca5a5;color:#fff}

    /* Lightbox */
    .lightbox-overlay{
      position:fixed;inset:0;z-index:250;
      background:rgba(20,10,16,0.75);
      backdrop-filter:blur(12px);
      display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;
      transition:opacity 0.3s;
      cursor:pointer;
    }
    .lightbox-overlay.open{opacity:1;pointer-events:auto}
    .lightbox-overlay img{
      max-width:92vw;max-height:90vh;
      border-radius:var(--radius);
      box-shadow:0 8px 48px rgba(0,0,0,0.4);
      animation:lightboxIn 0.4s var(--ease-bounce);
    }
    @keyframes lightboxIn{
      from{opacity:0;transform:scale(0.88)}
      to{opacity:1;transform:scale(1)}
    }
    .lightbox-close{
      position:absolute;top:24px;right:28px;
      width:44px;height:44px;border-radius:50%;
      background:rgba(255,255,255,0.2);color:#fff;
      font-size:1.4rem;display:flex;align-items:center;justify-content:center;
      transition:all 0.3s;z-index:1;
    }
    .lightbox-close:hover{background:rgba(255,255,255,0.35);transform:scale(1.1)}

    /* ==================================================================
       PERFECT CARD — Special attribution layout
       ================================================================== */
    .perfect-card .gallery-card-body{
      background:linear-gradient(180deg, var(--bg-card-solid), var(--bg-hover));
    }
    .perfect-card .attribution-row{
      display:flex;align-items:center;gap:10px;margin-top:10px;
      padding:10px 14px;border-radius:var(--radius-sm);
      background:var(--grad-soft);border:1px solid var(--border);
    }
    .perfect-card .attribution-icon{
      width:32px;height:32px;border-radius:50%;
      background:var(--grad-pink-blue);
      display:flex;align-items:center;justify-content:center;
      font-size:0.9rem;color:#fff;flex-shrink:0;
    }
    .perfect-card .attribution-info{flex:1;min-width:0}
    .perfect-card .attribution-name{font-weight:800;font-size:0.9rem;color:var(--text)}
    .perfect-card .attribution-link{font-size:0.75rem;color:var(--accent);word-break:break-all}
    .perfect-card .attribution-link:hover{text-decoration:underline}

    /* ==================================================================
       MUSIC LIST
       ================================================================== */
    .music-list{display:flex;flex-direction:column;gap:14px}
    .music-item{
      display:flex;align-items:center;gap:18px;
      background:var(--bg-card);
      backdrop-filter:blur(12px);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:18px 22px;
      box-shadow:var(--shadow-sm);
      transition:all var(--transition);
      animation:cardUp 0.5s var(--ease-out) both;
    }
    .music-item:hover{box-shadow:var(--shadow);transform:translateX(4px);border-color:var(--border-glow)}
    .music-num{
      font-size:1.6rem;font-weight:900;min-width:40px;
      background:var(--grad-pink-blue);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .music-info{flex:1}
    .music-title{font-weight:800;font-size:1.08rem}
    .music-meta{font-size:0.84rem;color:var(--text-muted);margin-top:3px}
    .music-actions button{
      font-size:0.85rem;padding:6px 10px;border-radius:var(--radius-xs);
      background:transparent;color:var(--text-muted);
      transition:all var(--transition);
    }
    .music-actions button:hover{background:#fee2e2;color:#e88}

    /* ==================================================================
       PHIGROS PAGE
       ================================================================== */
    .phigros-b30-img{
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      max-width:100%;
      transition:all 0.4s;
    }
    .phigros-b30-img:hover{box-shadow:0 16px 48px rgba(245,160,178,0.25)}
    .phigros-b30-img img{width:100%;display:block}

    /* ==================================================================
       EMPTY STATE
       ================================================================== */
    .empty-state{
      text-align:center;padding:52px 24px;
      color:var(--text-muted);
    }
    .empty-state .empty-icon{font-size:4rem;margin-bottom:14px;animation:emptyBounce 2s ease-in-out infinite}
    @keyframes emptyBounce{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-10px)}
    }
    .empty-state .empty-text{font-size:1.15rem;font-weight:700;color:var(--text-soft)}
    .empty-state .empty-hint{font-size:0.92rem;margin-top:8px}

    /* ==================================================================
       BUTTONS
       ================================================================== */
    .btn-add{
      display:inline-flex;align-items:center;gap:7px;
      padding:11px 24px;border-radius:var(--radius-full);
      background:var(--grad-pink-blue);
      color:#fff;font-weight:700;font-size:0.92rem;
      box-shadow:var(--shadow);
      transition:all 0.35s var(--ease-bounce);
      cursor:pointer;position:relative;overflow:hidden;
    }
    .btn-add::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,0.25),transparent);
      opacity:0;transition:opacity 0.3s;
    }
    .btn-add:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
    .btn-add:hover::after{opacity:1}
    .btn-add:active{transform:scale(0.94)}
    .btn-add-outline{
      background:transparent;border:2px solid var(--border-strong);
      color:var(--text-soft);
    }
    .btn-add-outline:hover{background:var(--grad-soft);color:var(--text)}

    /* ==================================================================
       MODAL
       ================================================================== */
    .modal-overlay{
      position:fixed;inset:0;z-index:200;
      background:rgba(30,10,20,0.35);
      backdrop-filter:blur(6px);
      display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;
      transition:opacity 0.25s;
    }
    .modal-overlay.open{opacity:1;pointer-events:auto}
    .modal-card{
      background:var(--bg-card);
      backdrop-filter:blur(28px) saturate(180%);
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      padding:0;width:90%;max-width:520px;
      box-shadow:var(--shadow-lg);
      overflow:hidden;
      animation:modalIn 0.4s var(--ease-bounce);
    }
    @keyframes modalIn{
      from{opacity:0;transform:translateY(30px) scale(0.94)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }
    .modal-header{
      display:flex;align-items:center;justify-content:space-between;
      padding:20px 26px;border-bottom:1px solid var(--border);
    }
    .modal-header h3{font-weight:800;font-size:1.15rem}
    .modal-close{
      width:34px;height:34px;border-radius:50%;
      background:var(--bg-hover);color:var(--text-soft);
      display:flex;align-items:center;justify-content:center;
      font-size:1rem;transition:all var(--transition);
    }
    .modal-close:hover{background:var(--border);color:var(--text);transform:rotate(90deg)}
    .modal-body{padding:22px 26px}
    .modal-body label{display:block;font-weight:700;font-size:0.9rem;margin-bottom:5px;margin-top:16px;color:var(--text-soft)}
    .modal-body label:first-child{margin-top:0}
    .modal-body input,.modal-body textarea{
      width:100%;padding:11px 16px;border-radius:var(--radius-sm);
      border:1.5px solid var(--border);background:var(--bg-input);
      color:var(--text);font-size:0.95rem;
      transition:all var(--transition);
      resize:vertical;
    }
    .modal-body input:focus,.modal-body textarea:focus{
      outline:none;border-color:var(--primary);
      box-shadow:0 0 0 4px rgba(245,160,178,0.12)
    }
    .modal-footer{
      padding:16px 26px 22px;display:flex;gap:10px;justify-content:flex-end;
    }
    .modal-footer button{
      padding:10px 24px;border-radius:var(--radius-full);
      font-weight:700;font-size:0.92rem;transition:all var(--transition);
    }
    .btn-primary{
      background:var(--grad-pink-blue);color:#fff;box-shadow:var(--shadow-sm);
    }
    .btn-primary:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
    .btn-primary:active{transform:scale(0.95)}
    .btn-secondary{
      background:var(--bg-hover);color:var(--text-soft);
    }
    .btn-secondary:hover{background:var(--border);color:var(--text)}

    /* ==================================================================
       TOAST
       ================================================================== */
    .toast-container{position:fixed;bottom:30px;right:30px;z-index:300;display:flex;flex-direction:column;gap:8px}
    .toast{
      background:var(--bg-elevated);backdrop-filter:blur(20px);
      border:1px solid var(--border);border-radius:var(--radius-sm);
      padding:14px 22px;box-shadow:var(--shadow);font-weight:700;
      animation:toastIn 0.4s var(--ease-bounce);
      font-size:0.92rem;color:var(--text);
    }
    .toast.out{animation:toastOut 0.35s forwards}
    @keyframes toastIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
    @keyframes toastOut{to{opacity:0;transform:translateX(50px)}}

    /* ==================================================================
       INLINE EDIT
       ================================================================== */
    .inline-edit{
      border:none;background:transparent;
      font:inherit;font-weight:inherit;font-size:inherit;
      color:inherit;border-bottom:2.5px dashed var(--primary);
      outline:none;min-width:60px;transition:border 0.2s;
    }
    .inline-edit:focus{border-bottom-style:solid;border-bottom-color:var(--accent)}

    /* ==================================================================
       RIPPLE EFFECT
       ================================================================== */
    .ripple{position:relative;overflow:hidden}
    .ripple-effect{
      position:absolute;border-radius:50%;
      background:rgba(245,160,178,0.3);
      transform:scale(0);animation:ripple 0.6s linear;
      pointer-events:none;
    }
    @keyframes ripple{to{transform:scale(4);opacity:0}}

    /* ==================================================================
       RESPONSIVE
       ================================================================== */
    @media(max-width:768px){
      .mobile-hamburger{display:flex}
      .sidebar{transform:translateX(-100%);width:260px}
      .sidebar.open{transform:translateX(0)}
      .sidebar-toggle{display:none}
      .main-content{margin-left:0!important;padding:20px 16px 40px;padding-top:70px}
      .profile-card{flex-direction:column;align-items:flex-start}
      .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
      .page-title{font-size:1.5rem}
      .quote-section{grid-template-columns:1fr}
      .quick-links{gap:8px}
      .quick-link{padding:10px 16px;font-size:0.85rem}
    }
    @media(max-width:480px){
      .gallery-grid{grid-template-columns:1fr 1fr;gap:10px}
      .quick-links{flex-direction:column}
      .page-container{padding:0 4px}
      .card{padding:18px 16px}
    }