/* ==========================================================================
       sjlx.net  —  MtF Pastel Dream · Glass UI  v2.1
       Rich animations · micro-interactions · performance-aware
       ========================================================================== */

    @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600;700&family=Fredoka:wght@400;500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Nunito:wght@400;600;700;800;900&family=Noto+Serif+JP:wght@400;600;700&family=Quicksand:wght@500;600;700&family=ZCOOL+KuaiLe&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;
      /* 侧边栏：英文优先 Fredoka/Comfortaa（圆润可爱），中文快乐体，日文圆体 */
      --font-cute: 'Fredoka', 'Comfortaa', 'Quicksand', 'M PLUS Rounded 1c', 'ZCOOL KuaiLe', 'Nunito', '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;font-size:17px}
    body{
      font-family:var(--font);
      font-size:1rem;
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
      display:flex;
      overflow-x:hidden;
      line-height:1.65;
    }
    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;contain:strict}
    .orb{
      position:absolute;border-radius:50%;
      /* lighter blur = cheaper paint; scale up soft edges */
      filter:blur(80px);opacity:0.55;will-change:transform;
      animation:orbFloat 22s ease-in-out infinite;
    }
    .orb-a{
      width:380px;height:380px;background:var(--orb-a);
      top:-8%;left:-6%;animation-delay:0s;
    }
    .orb-b{
      width:320px;height:320px;background:var(--orb-b);
      bottom:-10%;right:-5%;animation-delay:-7s;
    }
    .orb-c{
      width:240px;height:240px;background:var(--orb-c);
      top:45%;left:48%;animation-delay:-14s;
    }
    @keyframes orbFloat{
      0%,100%{transform:translate3d(0,0,0) scale(1)}
      33%{transform:translate3d(24px,-36px,0) scale(1.06)}
      66%{transform:translate3d(-28px,16px,0) scale(0.96)}
    }

    /* Floating sparkle particles */
    .sparkle-container{position:fixed;inset:0;pointer-events:none;z-index:1;contain:strict}
    .sparkle{
      position:absolute;width:6px;height:6px;
      background:var(--primary);
      border-radius:50%;
      animation:sparkleFloat 7s 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:translate3d(0,0,0) scale(1)}
      20%{opacity:0.7}
      50%{opacity:0.35;transform:translate3d(0,-48px,0) scale(1.4)}
      80%{opacity:0.08}
    }

    /* Reduced motion / low-power */
    @media (prefers-reduced-motion: reduce){
      .orb,.sparkle{animation:none!important;opacity:0.35}
      .sparkle{opacity:0}
      .page-entering,.card-stagger,.gallery-card,.music-item,.gb-message{animation:none!important}
      .empty-state .empty-icon{animation:none!important}
    }
    html.reduce-motion .orb,
    html.reduce-motion .sparkle{animation:none!important}
    html.reduce-motion .sparkle{opacity:0}
    @media (max-width:768px){
      .orb{filter:blur(60px);opacity:0.4}
      .sparkle-container{display:none}
    }

    /* ==================================================================
       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;
      font-family:var(--font-cute);
    }
    .sidebar.collapsed{width:var(--sidebar-collapsed);padding:16px 8px 12px}
    .sidebar.collapsed .brand-name,
    .sidebar.collapsed .nav-label,
    .sidebar.collapsed .footer-text{opacity:0;pointer-events:none;width:0;overflow:hidden;transition:opacity 0.15s}
    .sidebar.collapsed .brand-avatar{width:40px;height:40px}
    .sidebar.collapsed .nav-item{padding:10px 0;justify-content:center;gap:0}
    .sidebar.collapsed .nav-icon{font-size:1.3rem;margin-right:0;width:auto}
    .sidebar.collapsed .nav-child{padding-left:0}
    /* 收起时隐藏左侧激活竖条，改用背景高亮，避免出现突兀黑线 */
    .sidebar.collapsed .nav-item.active::before{display:none}
    .sidebar.collapsed .nav-item:hover{transform:none}
    .sidebar.collapsed .nav-item.active{
      background:var(--grad-soft);
      box-shadow:var(--shadow-sm);
    }
    /* 收起时隐藏滚动条，避免侧边出现黑色细线 */
    .sidebar.collapsed .sidebar-nav{
      overflow-x:hidden;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .sidebar.collapsed .sidebar-nav::-webkit-scrollbar{display:none;width:0;height:0}
    .sidebar.collapsed .sidebar-footer{border-top:none;padding-top:8px}

    .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;flex-shrink:0;
    }
    .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.collapsed .sidebar-toggle{
      position:relative;top:auto;right:auto;
      margin:0 auto 10px;
      width:36px;height:36px;
    }

    .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);
    }
    .sidebar.collapsed .sidebar-brand{
      justify-content:center;
      padding:4px 0 14px;
      margin-bottom:6px;
      gap:0;
    }
    .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-family:var(--font-cute);
      font-weight:700;font-size:1.32rem;
      letter-spacing:0.03em;
      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-family:var(--font-cute);
      font-size:1rem;font-weight:600;
      letter-spacing:0.02em;
      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;
      font-family:var(--font-cute);
      font-weight:600;
      letter-spacing:0.02em;
    }
    .nav-child{padding-left:28px;font-size:0.92rem;font-weight:500}
    .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-family:var(--font-cute);
      font-size:0.88rem;color:var(--text-muted);
      font-weight:600;letter-spacing:0.08em;
    }

    /* ==================================================================
       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(12px) saturate(150%);
      -webkit-backdrop-filter:blur(12px) saturate(150%);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:24px 28px;
      box-shadow:var(--shadow);
      margin-bottom:20px;
      transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);
      content-visibility:auto;
      contain-intrinsic-size:auto 200px;
    }
    .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}

    /* ==================================================================
       ENA HUB — 绘画入口选择页
       ================================================================== */
    .ena-hub{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      margin-top:8px;
    }
    @media(max-width:720px){.ena-hub{grid-template-columns:1fr}}

    .ena-hub-card{
      position:relative;
      display:flex;flex-direction:column;
      min-height:220px;
      padding:28px 26px 24px;
      border-radius:var(--radius-lg);
      border:1.5px solid var(--border);
      background:var(--bg-card);
      backdrop-filter:blur(16px) saturate(160%);
      box-shadow:var(--shadow-sm);
      overflow:hidden;
      cursor:pointer;
      transition:all 0.4s var(--ease-bounce);
      text-decoration:none;color:inherit;
    }
    .ena-hub-card::before{
      content:'';position:absolute;inset:0;
      opacity:0.55;pointer-events:none;
      transition:opacity 0.35s;
    }
    .ena-hub-card.sketch::before{
      background:linear-gradient(145deg, rgba(255,240,245,0.95) 0%, rgba(255,255,255,0.4) 45%, rgba(220,238,255,0.7) 100%);
    }
    .ena-hub-card.perfect::before{
      background:linear-gradient(145deg, rgba(255,248,236,0.95) 0%, rgba(255,255,255,0.4) 45%, rgba(244,236,248,0.75) 100%);
    }
    .ena-hub-card:hover{
      transform:translateY(-6px) scale(1.01);
      box-shadow:var(--shadow-lg);
      border-color:var(--border-glow);
    }
    .ena-hub-card:hover::before{opacity:0.85}
    .ena-hub-card:active{transform:scale(0.98)}

    .ena-hub-deco{
      position:absolute;right:-12px;bottom:-18px;
      font-size:7.5rem;line-height:1;
      opacity:0.12;pointer-events:none;
      transform:rotate(-8deg);
      transition:transform 0.45s var(--ease-bounce),opacity 0.35s;
    }
    .ena-hub-card:hover .ena-hub-deco{
      opacity:0.2;transform:rotate(-4deg) scale(1.08);
    }

    .ena-hub-badge{
      position:relative;z-index:1;
      align-self:flex-start;
      padding:5px 12px;border-radius:var(--radius-full);
      font-size:0.78rem;font-weight:800;letter-spacing:0.04em;
      margin-bottom:16px;
    }
    .ena-hub-card.sketch .ena-hub-badge{
      background:linear-gradient(135deg,#fff0f5,#dceeff);
      color:var(--text-soft);border:1px solid var(--border);
    }
    .ena-hub-card.perfect .ena-hub-badge{
      background:linear-gradient(135deg,#fff4e8,#f4ecf8);
      color:#9a7a5c;border:1px solid #f0e0d0;
    }

    .ena-hub-icon{
      position:relative;z-index:1;
      width:56px;height:56px;border-radius:18px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.7rem;margin-bottom:14px;
      box-shadow:var(--shadow-sm);
      transition:transform 0.4s var(--ease-bounce);
    }
    .ena-hub-card.sketch .ena-hub-icon{
      background:linear-gradient(135deg,#fff0f5,#dceeff);
    }
    .ena-hub-card.perfect .ena-hub-icon{
      background:linear-gradient(135deg,#ffe8c8,#f0d8f8);
    }
    .ena-hub-card:hover .ena-hub-icon{transform:scale(1.1) rotate(-4deg)}

    .ena-hub-title{
      position:relative;z-index:1;
      font-family:var(--font-cute);
      font-size:1.45rem;font-weight:800;
      color:var(--text);margin-bottom:8px;line-height:1.25;
    }
    .ena-hub-desc{
      position:relative;z-index:1;
      font-size:0.92rem;color:var(--text-soft);
      line-height:1.65;flex:1;
    }
    .ena-hub-go{
      position:relative;z-index:1;
      margin-top:18px;
      display:inline-flex;align-items:center;gap:6px;
      font-family:var(--font-cute);
      font-weight:800;font-size:0.92rem;
      color:var(--primary);
      transition:gap 0.3s,color 0.2s;
    }
    .ena-hub-card.perfect .ena-hub-go{color:#c9a06a}
    .ena-hub-card:hover .ena-hub-go{gap:12px;color:var(--text)}

    .ena-hub-tip{
      margin-top:22px;
      padding:14px 18px;
      border-radius:var(--radius-sm);
      background:var(--grad-soft);
      border:1px dashed var(--border-strong);
      font-size:0.88rem;color:var(--text-soft);
      line-height:1.55;
    }

    /* ==================================================================
       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);
      background:var(--grad-soft);
    }
    .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-block{
      margin-top:12px;display:flex;flex-direction:column;gap:8px;
    }
    .perfect-card .attribution-row{
      display:flex;align-items:center;gap:10px;
      padding:10px 14px;border-radius:var(--radius-sm);
      background:var(--grad-soft);border:1px solid var(--border);
    }
    .perfect-card .attribution-icon{
      width:30px;height:30px;border-radius:50%;
      background:var(--grad-pink-blue);
      display:flex;align-items:center;justify-content:center;
      font-size:0.88rem;color:#fff;flex-shrink:0;
    }
    .perfect-card .attribution-info{flex:1;min-width:0}
    .perfect-card .attribution-label{
      font-size:0.8rem !important;font-weight:700;letter-spacing:0.04em;
      color:var(--text-muted);text-transform:none;margin-bottom:2px;
    }
    .perfect-card .attribution-name{
      font-weight:800;font-size:0.95rem !important;color:var(--text);line-height:1.35;
    }
    .perfect-card .attribution-link{
      font-size:0.92rem !important;color:var(--accent);font-weight:700;
      word-break:break-all;text-decoration:none;line-height:1.35;
      transition:color 0.2s;
    }
    .perfect-card .attribution-link:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
    .perfect-card .attribution-note{
      font-size:0.85rem !important;color:var(--text-soft);line-height:1.55;
      padding:0 4px;
    }

    /* ==================================================================
       MORINEORI LOCK GATE
       ================================================================== */
    .mori-gate{
      max-width:420px;margin:40px auto 0;
      text-align:center;
    }
    .mori-gate-icon{
      font-size:3.2rem;margin-bottom:12px;
      animation:emptyBounce 2.4s ease-in-out infinite;
    }
    .mori-gate-title{
      font-size:1.45rem;font-weight:900;color:var(--text);margin-bottom:6px;
    }
    .mori-gate-desc{
      font-size:0.92rem;color:var(--text-soft);margin-bottom:22px;line-height:1.6;
    }
    .mori-gate-form{
      display:flex;flex-direction:column;gap:12px;align-items:stretch;
    }
    .mori-gate-input{
      width:100%;padding:13px 16px;
      border:1.5px solid var(--border);border-radius:var(--radius-sm);
      background:var(--bg-input);color:var(--text);
      font-size:1rem;outline:none;text-align:center;
      letter-spacing:0.08em;transition:var(--transition);
    }
    .mori-gate-input:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 3px rgba(245,160,178,0.18);
    }
    .mori-gate-btn{
      padding:12px 20px;border:none;border-radius:var(--radius-full);
      background:var(--grad-pink-blue);color:#fff;
      font-weight:800;font-size:0.98rem;cursor:pointer;
      box-shadow:var(--shadow-sm);transition:var(--transition);
    }
    .mori-gate-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
    .mori-gate-btn:active{transform:scale(0.97)}
    .mori-gate-btn:disabled{opacity:0.65;cursor:not-allowed;transform:none}
    .mori-gate-error{
      min-height:1.2em;font-size:0.85rem;color:#e07090;font-weight:700;
    }
    .mori-unlocked-bar{
      display:flex;align-items:center;justify-content:flex-end;
      margin-bottom:12px;
    }
    .mori-logout-btn{
      font-size:0.82rem;padding:6px 14px;border-radius:var(--radius-full);
      background:var(--grad-soft);color:var(--text-soft);font-weight:700;
      border:1px solid var(--border);cursor:pointer;transition:var(--transition);
    }
    .mori-logout-btn:hover{color:var(--text);border-color:var(--border-glow)}

    /* ==================================================================
       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;
      font-size:0.92rem;color:var(--text);
      opacity:0;transform:translateX(40px);
      transition:opacity 0.35s var(--ease-out),transform 0.35s var(--ease-bounce);
    }
    .toast.show{opacity:1;transform:translateX(0)}
    .toast.out{opacity:0;transform:translateX(40px);transition:opacity 0.3s,transform 0.3s}

    /* ==================================================================
       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}
    }
    

    /* ==================================================================
       GUESTBOOK
       ================================================================== */
    .guestbook-form-card {
      margin-bottom: 20px;
    }
    .guestbook-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .gb-input,
    .gb-textarea {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--bg-input);
      color: var(--text);
      font-size: 0.95rem;
      transition: var(--transition);
      outline: none;
      resize: vertical;
    }
    .gb-input:focus,
    .gb-textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(245,160,178,0.15);
    }
    .gb-textarea {
      min-height: 80px;
    }
    .gb-submit {
      align-self: flex-end;
      padding: 10px 24px;
      background: var(--grad-pink);
      color: #fff;
      font-weight: 700;
      font-size: 0.95rem;
      border-radius: var(--radius-full);
      border: none;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .gb-submit:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }
    .gb-submit:active {
      transform: scale(0.97);
    }

    /* Guestbook message list */
    .guestbook-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .gb-message {
      padding: 16px 18px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      animation: cardSlideIn 0.5s var(--ease-out) both;
      transition: var(--transition);
    }
    .gb-message:hover {
      border-color: var(--border-glow);
      box-shadow: var(--shadow-sm);
    }
    .gb-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .gb-name {
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--primary);
    }
    .gb-time {
      font-size: 0.75rem;
      color: var(--text-muted);
    }
    .gb-text {
      font-size: 0.95rem;
      line-height: 1.7;
      color: var(--text);
      word-break: break-word;
    }

    /* Guestbook empty state uses .empty-state */

    /* Fallback if cardSlideIn missing */
    @keyframes cardSlideIn{
      from{opacity:0;transform:translateY(12px)}
      to{opacity:1;transform:translateY(0)}
    }