/* ============================================
   ToyForge 造物 — Common Design System
   Shared by all pages. Edit once, apply everywhere.
   ============================================ */

/* ----- CSS Variables (8px spacing system) ----- */
:root{
  --primary:#FF6B35; --primary-hover:#E85D2C; --primary-light:rgba(255,107,53,.1);
  --dark:#1A1A2E; --text:#2D2D2D; --text-secondary:#6B6B6B; --text-muted:#A0A0A0;
  --gold:#FFD700; --gold-dark:#D4A800;
  --bg:#FAFAFA; --surface:#FFFFFF; --border:#F0F0F0;
  --success:#22C55E; --danger:#FF4757; --info:#3B82F6;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:9999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
}

/* ----- Reset & Base ----- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  font-family:'Noto Sans SC','PingFang SC',sans-serif;
  background:#EDEDED;color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* ----- App Shell ----- */
.app{width:100%;max-width:390px;margin:0 auto;background:var(--bg);min-height:100vh;padding-bottom:var(--space-8);position:relative;overflow:hidden;}

/* ----- Page Header ----- */
.page-header{padding:var(--space-4) var(--space-4) var(--space-1);}
.page-header h1{font-size:20px;font-weight:800;color:var(--dark);margin-bottom:var(--space-1);}
.page-header p{font-size:12px;color:var(--text-muted);}

/* ----- Top Bar (sub-pages) ----- */
.top-bar{
  position:sticky;top:0;z-index:50;background:var(--bg);
  padding:var(--space-3);display:flex;align-items:center;gap:var(--space-2);
}
.back-btn{
  width:36px;height:36px;border-radius:50%;background:var(--surface);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--dark);
  font-size:16px;flex-shrink:0;text-decoration:none;
}
.back-btn:active{background:var(--border);}

/* ----- Search Bar ----- */
.search-bar{
  flex:1;display:flex;align-items:center;gap:6px;
  background:var(--surface);border-radius:var(--radius-full);
  padding:8px 14px;box-shadow:var(--shadow-sm);
}
.search-bar i{color:var(--text-muted);font-size:13px;}
.search-bar input{flex:1;border:none;outline:none;font-size:13px;background:transparent;font-family:inherit;}
.search-bar input::placeholder{color:var(--text-muted);}
.search-filter{background:var(--primary-light);border:none;color:var(--primary);font-size:16px;padding:4px 6px;border-radius:6px;cursor:pointer;}

/* ----- Section Header ----- */
.section-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--space-4) var(--space-2);}
.section-title{font-size:16px;font-weight:700;color:var(--dark);}
.section-more{font-size:12px;color:var(--text-muted);cursor:pointer;text-decoration:none;transition:color .2s;}
.section-more:hover{color:var(--primary);}
.section-more i{font-size:10px;margin-left:2px;}

/* ----- Horizontal Scroll ----- */
.h-scroll{display:flex;gap:var(--space-2);overflow-x:auto;padding:0 var(--space-4) var(--space-3);scroll-padding:0 var(--space-4);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.h-scroll::-webkit-scrollbar{display:none;}

/* ----- Filter / Category Tabs ----- */
.filter-row,.cat-row{display:flex;gap:var(--space-1);padding:var(--space-3) var(--space-4);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.filter-row::-webkit-scrollbar,.cat-row::-webkit-scrollbar{display:none;}
.pill-tab{font-size:12px;padding:6px 16px;border-radius:var(--radius-full);border:none;font-family:inherit;cursor:pointer;transition:all .2s;background:var(--border);color:var(--text-secondary);white-space:nowrap;flex-shrink:0;}
.pill-tab.active{background:var(--dark);color:#fff;font-weight:500;}
.pill-tab:active{transform:scale(.95);}

/* ----- Progress Bar ----- */
.progress-wrap{margin-bottom:var(--space-1);}
.progress-bar-bg{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.progress-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--primary),#FF8B5E);width:0;transition:width 1.2s ease-out;}

/* ----- Waterfall (2-col grid) ----- */
.waterfall{column-count:2;column-gap:var(--space-2);padding:0 var(--space-4);}
.toy-card{break-inside:avoid;margin-bottom:var(--space-2);background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s;}
.toy-card:active{transform:scale(.97);}
.toy-card-img{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:30px;position:relative;}
.toy-card-img .card-badge{position:absolute;top:6px;right:6px;font-size:9px;padding:2px 6px;border-radius:var(--radius-full);background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(4px);}
.toy-card-body{padding:var(--space-2) var(--space-2) var(--space-3);}
.toy-card-body h5{font-size:12px;font-weight:600;margin-bottom:var(--space-1);line-height:1.3;}
.toy-card-footer{display:flex;justify-content:space-between;align-items:center;}
.toy-card-author{display:flex;align-items:center;gap:4px;}
.toy-card-author .mini-av{width:16px;height:16px;border-radius:50%;}
.toy-card-author span{font-size:10px;color:var(--text-muted);}
.toy-card-like{display:flex;align-items:center;gap:2px;font-size:10px;color:var(--text-muted);cursor:pointer;transition:color .2s;}
.toy-card-like:hover{color:var(--danger);}
.toy-card-like.liked{color:var(--danger);}
.toy-card-like i{font-size:11px;}

/* ----- Creator Card ----- */
.creator-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:64px;scroll-snap-align:start;cursor:pointer;transition:transform .2s;}
.creator-card:active{transform:scale(.95);}
.creator-avatar{width:48px;height:48px;border-radius:50%;position:relative;border:2px solid var(--surface);box-shadow:var(--shadow-sm);}
.verified-badge{position:absolute;bottom:-1px;right:-1px;width:16px;height:16px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:8px;border:2px solid var(--surface);}
.creator-name{font-size:10px;color:var(--text-secondary);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ----- Badges ----- */
.badge{font-size:9px;padding:2px 6px;border-radius:var(--radius-full);font-weight:500;}
.badge-orange{background:rgba(255,107,53,.12);color:var(--primary);}
.badge-green{background:rgba(34,197,94,.12);color:var(--success);}
.badge-blue{background:rgba(59,130,246,.12);color:var(--info);}
.badge-gold{background:rgba(255,215,0,.15);color:var(--gold-dark);}
.copyright-badge{position:absolute;top:6px;left:6px;font-size:9px;padding:2px 8px;border-radius:var(--radius-full);background:linear-gradient(135deg,#1A1A2E,#162447);color:var(--gold);font-weight:600;display:flex;align-items:center;gap:3px;z-index:3;border:1px solid rgba(255,215,0,.3);}
.copyright-badge i{font-size:8px;}

/* ----- Menu List (Profile page) ----- */
.menu-list{}
.menu-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border);}
.menu-item:last-child{border-bottom:none;}
.menu-item:active{background:var(--bg);}
.menu-icon{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.menu-icon.red{background:rgba(255,71,87,.1);color:var(--danger);}
.menu-icon.blue{background:rgba(59,130,246,.1);color:var(--info);}
.menu-icon.orange{background:var(--primary-light);color:var(--primary);}
.menu-icon.green{background:rgba(34,197,94,.1);color:var(--success);}
.menu-icon.purple{background:rgba(139,92,246,.1);color:#8B5CF6;}
.menu-icon.gray{background:var(--border);color:var(--text-secondary);}
.menu-item-info{flex:1;min-width:0;}
.menu-label{font-size:14px;font-weight:500;margin-bottom:1px;}
.menu-desc{font-size:10px;color:var(--text-muted);}
.menu-arrow{color:var(--text-muted);font-size:12px;}

/* ===== GRADIENT LIBRARY (14 colors) ===== */
.grad-1{background:linear-gradient(135deg,#667EEA,#764BA2);}.grad-2{background:linear-gradient(135deg,#F093FB,#F5576C);}
.grad-3{background:linear-gradient(135deg,#4FACFE,#00F2FE);}.grad-4{background:linear-gradient(135deg,#43E97B,#38F9D7);}
.grad-5{background:linear-gradient(135deg,#FA709A,#FEE140);}.grad-6{background:linear-gradient(135deg,#A18CD1,#FBC2EB);}
.grad-7{background:linear-gradient(135deg,#FFD700,#FF6B35);}.grad-8{background:linear-gradient(135deg,#434343,#1A1A2E);}
.grad-9{background:linear-gradient(135deg,#FF9A9E,#FECFEF);}.grad-10{background:linear-gradient(135deg,#A1C4FD,#C2E9FB);}
.grad-11{background:linear-gradient(135deg,#D4FC79,#96E6A1);}.grad-12{background:linear-gradient(135deg,#FFECD2,#FCB69F);}
.grad-13{background:linear-gradient(135deg,#FF6B35,#FFB088);}.grad-14{background:linear-gradient(135deg,#E2B0FF,#9F44D3);}

/* ===== AVATAR GRADIENTS ===== */
.av-g1{background:linear-gradient(135deg,#FF9A9E,#FECFEF);}.av-g2{background:linear-gradient(135deg,#A1C4FD,#C2E9FB);}
.av-g3{background:linear-gradient(135deg,#D4FC79,#96E6A1);}.av-g4{background:linear-gradient(135deg,#FFE29F,#FFB347);}
.av-g5{background:linear-gradient(135deg,#F093FB,#F5576C);}.av-g6{background:linear-gradient(135deg,#667EEA,#764BA2);}

/* ===== BOTTOM NAV ===== */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:390px;height:64px;background:var(--surface);
  border-top:1px solid var(--border);display:flex;align-items:center;
  justify-content:space-around;z-index:100;box-shadow:0 -2px 12px rgba(0,0,0,.04);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;text-decoration:none;color:var(--text-muted);font-size:10px;padding:6px 0;min-width:48px;position:relative;}
.nav-item.active{color:var(--primary);}
.nav-item i{font-size:20px;}
.nav-item .nav-dot{position:absolute;top:4px;left:50%;margin-left:6px;width:7px;height:7px;border-radius:50%;background:var(--danger);z-index:2;}
.nav-item.fab-item{position:relative;top:-16px;color:#fff !important;}
.nav-item.fab-item .fab-btn{width:52px;height:52px;background:linear-gradient(135deg,var(--primary),#FF8B5E);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(255,107,53,.4);}

/* ===== MICRO-INTERACTIONS ===== */
.tappable:active{transform:scale(.97);transition:transform .15s;}
.fab{box-shadow:0 4px 16px rgba(255,107,53,.4);}
.animate-in{animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}