:root {
  --pink: #ff4f91;
  --pink-dark: #ea347b;
  --pink-soft: #fff0f7;
  --lavender: #7564e8;
  --lavender-soft: #f1efff;
  --ink: #17184f;
  --muted: #77799a;
  --line: #eceaf5;
  --paper: #ffffff;
  --canvas: #fbfbfe;
  --success: #25b882;
  --warning: #f29a38;
  --shadow: 0 12px 36px rgba(35, 28, 91, .07);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img { max-width: 100%; }
.shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
.page { padding: 28px 0 64px; min-height: calc(100vh - 80px); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(35,28,91,.035); }
.muted { color: var(--muted); }
.pink { color: var(--pink-dark); }
.section-title { display:flex; align-items:center; gap:10px; margin:0 0 20px; font-size:24px; line-height:1.2; }
.section-title::before { content:""; width:5px; height:26px; border-radius:6px; background:var(--pink); }
.btn { border: 1px solid var(--line); background:#fff; color:var(--ink); border-radius:12px; padding:10px 18px; transition:.2s ease; }
.btn:hover { transform:translateY(-1px); border-color:#d8d2f5; box-shadow:0 8px 20px rgba(69,52,150,.08); }
.btn-primary { background:linear-gradient(135deg,#ff68a1,#ff3e86); color:#fff; border-color:transparent; font-weight:700; }
.btn-ghost { background:var(--lavender-soft); color:#5144be; border-color:transparent; }
.btn-dark { background:linear-gradient(135deg,#2c205f,#4c357d); color:#fff; border-color:transparent; }
.btn-block { width:100%; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:13px; line-height:1.4; background:var(--lavender-soft); color:#6557cc; }
.pill.pink { background:var(--pink-soft); color:var(--pink-dark); }
.pill.green { background:#e8fbf3; color:#149567; }
.pill.gold { background:#fff3df; color:#b46c10; }
.tag-group-label { margin:16px 0 9px; font-size:14px; color:var(--ink); }
.tag-group-label:first-of-type { margin-top:4px; }

/* Header */
.site-header { height:80px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); }
.header-inner { height:100%; display:flex; align-items:center; gap:34px; }
.brand { display:flex; align-items:center; min-width:180px; }
.brand-logo { display:block; width:158px; height:auto; object-fit:contain; }
.main-nav { display:flex; gap:8px; align-self:stretch; }
.main-nav a { display:flex; align-items:center; position:relative; padding:0 15px; font-weight:600; white-space:nowrap; }
.main-nav a:hover, .main-nav a.active { color:var(--pink-dark); }
.main-nav a.active::after { content:""; position:absolute; left:15px; right:15px; bottom:0; height:3px; border-radius:4px; background:var(--pink); }
.header-search { margin-left:auto; position:relative; width:min(360px,26vw); }
.header-search input { width:100%; height:44px; border:1px solid #ddd9ed; border-radius:12px; padding:0 46px 0 16px; outline:none; background:#fff; }
.header-search input:focus { border-color:#a99cf3; box-shadow:0 0 0 4px rgba(117,100,232,.09); }
.search-icon { position:absolute; right:5px; top:5px; width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:9px; background:transparent; color:#514a83; }
.search-icon:hover { color:var(--pink-dark); background:var(--pink-soft); }
.search-icon .icon { width:20px; height:20px; }
.header-actions { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.submit-link { display:inline-flex; align-items:center; gap:5px; padding:8px 12px; border:1px solid #f0cfe0; border-radius:10px; color:var(--pink-dark); background:#fff7fb; font-weight:700; }
.submit-link:hover { color:#fff; border-color:var(--pink); background:var(--pink); }
.submit-link strong { font-size:20px; line-height:1; }
.user-chip { display:flex; align-items:center; gap:9px; font-weight:700; }
.avatar { border-radius:50%; background-image:url('assets/portraits.png'); background-size:300% 200%; background-position:0 0; flex:none; }
.avatar.sm { width:34px; height:34px; }
.avatar.md { width:54px; height:54px; }
.avatar.lg { width:96px; height:96px; }
.mobile-menu { display:none; margin-left:auto; }
.icon { display:inline-block; width:24px; height:24px; flex:none; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.icon-clock { -webkit-mask-image:url('assets/icons/clock.svg'); mask-image:url('assets/icons/clock.svg'); }
.icon-flame { -webkit-mask-image:url('assets/icons/flame.svg'); mask-image:url('assets/icons/flame.svg'); }
.icon-sparkles { -webkit-mask-image:url('assets/icons/sparkles.svg'); mask-image:url('assets/icons/sparkles.svg'); }
.icon-book-open { -webkit-mask-image:url('assets/icons/book-open.svg'); mask-image:url('assets/icons/book-open.svg'); }
.icon-download { -webkit-mask-image:url('assets/icons/download.svg'); mask-image:url('assets/icons/download.svg'); }
.icon-headset { -webkit-mask-image:url('assets/icons/headset.svg'); mask-image:url('assets/icons/headset.svg'); }
.icon-search { -webkit-mask-image:url('assets/icons/search.svg'); mask-image:url('assets/icons/search.svg'); }
.icon-flower { -webkit-mask-image:url('assets/icons/flower.svg'); mask-image:url('assets/icons/flower.svg'); }
.icon-crown { -webkit-mask-image:url('assets/icons/crown.svg'); mask-image:url('assets/icons/crown.svg'); }
.icon-bell { -webkit-mask-image:url('assets/icons/bell.svg'); mask-image:url('assets/icons/bell.svg'); }
.icon-arrow-up { -webkit-mask-image:url('assets/icons/arrow-up.svg'); mask-image:url('assets/icons/arrow-up.svg'); }
.icon-bookmark { -webkit-mask-image:url('assets/icons/bookmark.svg'); mask-image:url('assets/icons/bookmark.svg'); }
.icon-share { -webkit-mask-image:url('assets/icons/share.svg'); mask-image:url('assets/icons/share.svg'); }
.icon-flag { -webkit-mask-image:url('assets/icons/flag.svg'); mask-image:url('assets/icons/flag.svg'); }
.nav-icon { width:17px; height:17px; margin-right:7px; }

/* Shared */
.breadcrumbs { color:#8a8baa; font-size:14px; margin-bottom:16px; }
.notice { background:#faf9ff; color:#66688c; padding:12px 16px; border:1px solid #eeebfa; border-radius:12px; font-size:14px; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.sidebar { display:grid; gap:18px; }
.side-card { padding:20px; }
.side-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 15px; font-size:20px; }
.up-profile-link { display:flex; align-items:center; gap:12px; color:inherit; border-radius:12px; transition:background .18s ease; }
.up-profile-link:hover { background:#fff5fa; }
.up-profile-copy { display:grid; gap:4px; min-width:0; }
.up-name-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.up-vip-badge { display:inline-block; padding:3px 7px; border-radius:10px; color:#9b5d00; background:linear-gradient(135deg,#fff3b7,#ffd776); font-size:10px; font-weight:700; line-height:1; }
.creator-profile { overflow:hidden; }
.creator-cover-art { height:150px; display:flex; align-items:flex-start; justify-content:flex-end; gap:12px; padding:28px 34px; color:#9a7bc8; background:radial-gradient(circle at 15% 25%,rgba(255,255,255,.9) 0 5%,transparent 6%),linear-gradient(115deg,#ffe7f2,#f1eaff 62%,#e4e8ff); font-weight:700; }
.creator-cover-art span:first-child { color:var(--pink); font-size:25px; }
.creator-profile-main { display:flex; align-items:center; gap:22px; padding:0 32px 24px; margin-top:-48px; position:relative; }
.creator-profile-avatar { width:118px; height:118px; flex:none; border:5px solid #fff; box-shadow:0 8px 24px rgba(46,33,92,.18); }
.creator-profile-copy { min-width:0; padding-top:48px; flex:1; }
.creator-name-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.creator-name-line h1 { margin:0; font-size:30px; }
.creator-signature { margin:8px 0 10px; color:var(--muted); }
.creator-facts { display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.creator-facts strong { color:var(--ink); font-weight:600; }
.creator-follow { min-width:112px; margin-top:48px; }
.creator-stats { display:grid; grid-template-columns:repeat(3,110px); justify-content:center; padding:16px 24px; border-top:1px solid var(--line); background:#fffafd; }
.creator-stats div { display:grid; gap:3px; text-align:center; border-right:1px solid var(--line); }
.creator-stats div:last-child { border-right:0; }
.creator-stats strong { font-size:21px; color:var(--ink); }
.creator-stats span { color:var(--muted); font-size:13px; }
.creator-resources-section { margin-top:24px; }
.creator-section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:16px; }
.creator-section-head h2 { margin:0 0 5px; font-size:25px; }
.creator-section-head p { margin:0; }
.creator-resource-count { padding:7px 12px; border-radius:16px; color:var(--pink-dark); background:var(--pink-soft); font-size:13px; font-weight:700; }
.resource-grid.creator-resource-grid { grid-template-columns:repeat(auto-fill,minmax(220px,240px)); gap:14px; justify-content:start; }
.creator-resource-grid .resource-card { width:100%; }
.creator-empty { grid-column:1/-1; padding:70px 20px; text-align:center; color:var(--muted); }
.submit-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.submit-panel { padding:28px; }
.submit-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.submit-head h1 { margin:4px 0 6px; font-size:31px; }
.submit-head p { margin:0; color:var(--muted); }
.submit-head > .icon { width:52px; height:52px; color:#a37add; }
.submit-kicker { color:var(--pink-dark); font-size:12px; font-weight:800; letter-spacing:.12em; }
.submit-form { display:grid; gap:23px; }
.submit-field { display:grid; gap:9px; margin:0; padding:0; border:0; color:var(--ink); font-weight:700; }
.submit-field legend { margin-bottom:10px; padding:0; font-weight:700; }
.submit-field small { color:var(--muted); font-size:12px; font-weight:400; }
.required { color:var(--pink-dark); }
.submit-form textarea.form-input { min-height:190px; resize:vertical; }
.submit-upload-row { display:grid; grid-template-columns:minmax(180px,.72fr) minmax(0,2fr); gap:22px; align-items:start; }
.upload-tile-list { display:flex; align-items:flex-start; gap:10px; min-height:112px; flex-wrap:wrap; }
.upload-box { width:108px; height:108px; flex:0 0 108px; order:2; display:grid; place-items:center; align-content:center; gap:4px; padding:10px; border:1.5px dashed #cfc6e7; border-radius:12px; color:#6f6298; background:#fbf9ff; cursor:pointer; text-align:center; }
.upload-box:hover { border-color:var(--pink); background:#fff5fa; }
.upload-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--pink),#9b70dd); font-size:25px; line-height:1; }
.upload-box strong { font-size:13px; }
.upload-preview { display:contents; }
.upload-preview img { width:108px; height:108px; border-radius:12px; border:1px solid var(--line); object-fit:cover; }
.cover-upload-field.has-image .upload-box { display:none; }
.resource-upload-field.is-full .upload-box { display:none; }
.upload-count { color:var(--muted); font-size:13px; }
.creator-picker { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:10px; }
.creator-search-box { position:relative; }
.creator-search-box > .icon { position:absolute; z-index:1; left:14px; top:50%; width:18px; height:18px; color:#8d7bae; transform:translateY(-50%); }
.creator-search-box .form-input { padding-left:42px; }
.creator-current { display:flex; align-items:center; gap:9px; min-height:46px; padding:6px 12px; border:1px solid #ffc4da; border-radius:11px; color:inherit; background:var(--pink-soft); cursor:pointer; font:inherit; text-align:left; }
.creator-current:hover:not(:disabled) { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,79,144,.08); }
.creator-current.empty { border-color:var(--line); background:#faf9fd; cursor:default; }
.creator-current > span:last-child { display:grid; gap:1px; }
.creator-current small { color:var(--muted); font-size:11px; font-weight:500; }
.creator-current strong { color:var(--pink-dark); font-size:13px; }
.creator-library { position:absolute; z-index:20; top:54px; left:0; right:190px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:254px; padding:8px; overflow:auto; box-shadow:0 14px 34px rgba(59,38,102,.16); }
.creator-library[hidden] { display:none; }
.creator-option { display:flex; align-items:center; gap:9px; min-width:0; padding:8px 10px; border:0; border-radius:9px; color:var(--ink); background:#fff; cursor:pointer; text-align:left; }
.creator-option:hover,.creator-option.active { color:var(--pink-dark); background:var(--pink-soft); }
.creator-option span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.creator-library-empty { grid-column:1/-1; padding:18px; color:var(--muted); font-size:13px; font-weight:500; text-align:center; }
.creator-radio-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.creator-radio-grid label { display:flex; align-items:center; gap:7px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:13px; }
.creator-radio-grid label:has(input:checked) { color:var(--pink-dark); border-color:var(--pink); background:var(--pink-soft); }
.creator-radio-grid input { accent-color:var(--pink); }
.submit-tag-grid { display:flex; flex-wrap:wrap; gap:8px; }
.submit-tag-grid label { cursor:pointer; }
.submit-tag-grid input { position:absolute; opacity:0; pointer-events:none; }
.submit-tag-grid span { display:block; padding:8px 12px; border:1px solid var(--line); border-radius:18px; color:var(--muted); background:#fff; font-size:13px; font-weight:600; }
.submit-tag-grid input:checked + span { color:#fff; border-color:var(--pink); background:var(--pink); }
.submit-two-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.price-input { position:relative; }
.price-input .form-input { padding-right:58px; }
.price-input span { position:absolute; right:16px; top:50%; color:var(--muted); font-size:13px; transform:translateY(-50%); }
.submit-actions { display:flex; gap:10px; padding-top:4px; }
.submit-actions .btn-primary { min-width:140px; }
.submit-sidebar { display:grid; gap:16px; position:sticky; top:94px; }
.submit-guide { display:grid; gap:11px; margin:0; padding-left:20px; color:var(--muted); line-height:1.6; font-size:14px; }
.moon-cat { height:136px; display:grid; place-items:center; padding:8px 12px; background:linear-gradient(180deg,#fff8fc,#f2efff); border-radius:14px; margin-bottom:12px; overflow:hidden; }
.moon-cat img { display:block; width:100%; height:100%; object-fit:contain; }
.sign-copy { text-align:center; margin:0 0 12px; }
[data-sign-wrap] { display:grid; gap:18px; }
.announcement-card { padding:18px 20px; }
.announcement-card .side-heading { margin-bottom:10px; }
.announcement-list { display:grid; }
.announcement-item { display:flex; align-items:center; gap:9px; min-width:0; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.announcement-item:last-child { border-bottom:0; padding-bottom:2px; }
.announcement-date { flex:none; color:var(--pink-dark); font-size:12px; font-weight:700; }
.announcement-title { min-width:0; overflow:hidden; color:var(--ink); text-overflow:ellipsis; white-space:nowrap; }
.footer { border-top:1px solid var(--line); background:#fff; padding:28px 0; color:var(--muted); font-size:14px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:24px; }
.floating-tools { position:fixed; right:22px; bottom:30px; z-index:45; display:grid; gap:10px; }
.floating-tools button { width:46px; height:46px; display:grid; place-items:center; border:1px solid #eadff5; border-radius:50%; color:#7261c9; background:rgba(255,255,255,.96); box-shadow:0 9px 26px rgba(43,35,91,.14); }
.floating-tools button:hover { color:#fff; border-color:var(--pink); background:var(--pink); transform:translateY(-2px); }
.floating-tools .icon { width:23px; height:23px; }
.info-page { padding:28px; }
.info-page h1 { margin:0 0 10px; font-size:30px; }
.info-sections { display:grid; gap:16px; margin-top:24px; }
.info-section { padding:20px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.info-section h2 { margin:0 0 8px; font-size:20px; }
.info-section p { margin:0; color:var(--muted); line-height:1.8; }
.toast { position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px); background:#211a4d; color:#fff; padding:12px 20px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; z-index:99; }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* Portrait sprite */
.portrait { background-image:url('assets/portraits.png'); background-size:300% 200%; background-repeat:no-repeat; background-color:#eeeaf8; }
.p1 { background-position:0 0; }
.p2 { background-position:50% 0; }
.p3 { background-position:100% 0; }
.p4 { background-position:0 100%; }
.p5 { background-position:50% 100%; }
.p6 { background-position:100% 100%; }

/* Homepage */
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; }
.hero { min-height:330px; padding:48px 54px; position:relative; overflow:hidden; background:linear-gradient(115deg,#fff1f7 0%,#f3efff 58%,#e9e8ff 100%); }
.hero::before { content:"✦  ·  ✧  ·  ✦"; position:absolute; right:30px; top:24px; color:#c3b7f9; letter-spacing:18px; font-size:22px; }
.hero-photo { position:absolute; right:0; top:0; width:46%; height:100%; background-image:url('assets/portraits.png'); background-size:300% 200%; mask-image:linear-gradient(to right,transparent 0,#000 35%); }
.hero-copy { position:relative; z-index:2; width:58%; }
.hero h1 { font-size:48px; margin:0 0 12px; line-height:1.2; letter-spacing:-.02em; font-weight:800; }
.hero-slider { padding:0; }
.hero-slider::before { z-index:3; pointer-events:none; }
.hero-slides { position:absolute; inset:0; }
.hero-slide { position:absolute; inset:0; padding:48px 54px; opacity:0; visibility:hidden; transform:translateX(18px); transition:opacity .45s ease,transform .45s ease,visibility .45s; pointer-events:none; background:linear-gradient(115deg,#fff1f7 0%,#f3efff 58%,#e9e8ff 100%); }
.hero-slide.active { opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; }
.hero-kicker { display:inline-block; margin-bottom:10px; padding:5px 10px; border-radius:14px; color:var(--pink-dark); background:rgba(255,255,255,.72); font-size:13px; font-weight:700; }
.hero-slider-controls { position:absolute; z-index:5; left:50%; bottom:16px; display:flex; align-items:center; gap:10px; transform:translateX(-50%); }
.hero-slider-controls > button { width:30px; height:30px; padding:0; border:1px solid rgba(111,92,158,.16); border-radius:50%; color:#67588d; background:rgba(255,255,255,.82); font-size:22px; line-height:1; }
.hero-dots { display:flex; gap:7px; padding:7px 10px; border-radius:16px; background:rgba(255,255,255,.76); }
.hero-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#c9c0df; }
.hero-dots button.active { width:22px; border-radius:5px; background:var(--pink); }
.hero p { font-size:20px; letter-spacing:2px; margin:0 0 28px; }
.hero-actions { display:flex; gap:12px; }
.vip-card { min-height:330px; padding:0; text-align:center; color:#fff; border:none; overflow:hidden; background:#171945 url('assets/vip-card-bg.png') center 34% / cover no-repeat; }
.vip-card-copy { min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; padding:142px 32px 30px; background:linear-gradient(180deg,rgba(14,17,57,0) 18%,rgba(17,18,57,.14) 42%,rgba(15,17,53,.58) 100%); }
.vip-card h2 { font-size:29px; margin:0 0 8px; text-shadow:0 2px 12px rgba(7,8,31,.42); }
.vip-card p { color:#f0ebff; margin:0 0 22px; text-shadow:0 2px 10px rgba(7,8,31,.52); }
.vip-card .btn { border-color:rgba(255,255,255,.72); box-shadow:0 8px 22px rgba(255,73,145,.24); }
.shortcut-bar { margin:18px 0; padding:18px; display:grid; grid-template-columns:repeat(3,1fr); }
.shortcut { display:flex; align-items:center; justify-content:center; gap:14px; border-right:1px solid var(--line); }
.shortcut:last-child { border:none; }
.shortcut-icon { width:58px; height:54px; display:grid; place-items:center; color:var(--lavender); }
.shortcut-icon .icon { width:38px; height:38px; }
.shortcut strong { display:block; font-size:18px; line-height:1.35; color:var(--ink); }
.shortcut span { display:block; color:var(--muted); font-size:14px; line-height:1.45; }
.home-discovery-head { display:flex; align-items:center; gap:24px; margin-bottom:16px; }
.home-discovery-head .section-title, .home-latest-link { flex:none; }
.home-discovery-tags { flex:0 1 auto; }
.home-discovery-tags .pill { font-size:15px; padding:7px 14px; font-weight:600; }
.home-latest-link { margin-left:auto; font-size:15px; }

/* Browse and resource cards */
.filter-panel { padding:24px; margin-bottom:24px; }
.browse-intro { display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line); }
.browse-intro h1 { margin:0; font-size:30px; }
.mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mode-tab { padding:16px; border:1px solid #d9d3f7; background:#fff; border-radius:12px; font-weight:700; color:#4d419f; text-align:center; display:flex; align-items:center; justify-content:center; gap:9px; }
.mode-tab.active { background:var(--pink); color:#fff; border-color:var(--pink); }
.mode-icon { width:22px; height:22px; }
.filter-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.filter-panel .filter-row:first-child { margin-top:0; }
.creator-filter-row { flex-wrap:nowrap; }
.creator-filter-strip { flex:1; min-width:0; display:flex; align-items:center; gap:10px; overflow-x:auto; scroll-behavior:smooth; overscroll-behavior-inline:contain; scrollbar-width:none; cursor:grab; user-select:none; }
.creator-filter-strip::-webkit-scrollbar { display:none; }
.creator-filter-strip:active { cursor:grabbing; }
.creator-filter-strip .tag-btn { flex:none; }
.creator-filter-row .filter-tools { flex:none; margin-left:0; }
.filter-label { width:85px; font-weight:700; }
.tag-btn { border:1px solid transparent; background:#f6f4fd; color:#545478; border-radius:10px; padding:7px 15px; }
.tag-btn.active { background:var(--pink); color:#fff; }
.hot-creators { align-items:flex-start; }
.hot-creators .tag-btn.active::before { content:'✓ '; }
.filter-spacer { margin-left:auto; color:var(--muted); font-size:14px; }
.filter-tools { display:flex; align-items:center; gap:7px; }
.browse-list-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.browse-list-head .section-title { margin:0; }
.browse-list-tools { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.browse-sort-tabs { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.browse-sort-tabs button { padding:7px 11px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:13px; }
.browse-sort-tabs button:hover { color:var(--pink-dark); background:var(--pink-soft); }
.browse-sort-tabs button.active { color:#fff; background:var(--pink); font-weight:700; }
.browse-view-label { margin-left:4px; color:var(--muted); font-size:13px; }
.sort-select { height:36px; padding:0 30px 0 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#4d4b70; font:inherit; outline:none; }
.sort-select:focus { border-color:#a99cf3; box-shadow:0 0 0 3px rgba(117,100,232,.08); }
.view-btn { width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:9px; background:#fff; color:#797593; font-size:20px; line-height:1; }
.view-btn:hover, .view-btn.active { color:#fff; border-color:var(--pink); background:var(--pink); }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.resource-grid.list-view { grid-template-columns:1fr; }
.resource-grid.list-view .resource-card { display:grid; grid-template-columns:176px minmax(0,1fr); min-height:220px; }
.resource-grid.list-view .cover { height:220px; aspect-ratio:auto; }
.resource-grid.list-view .resource-body { display:flex; flex-direction:column; justify-content:center; padding:22px; }
.resource-grid.list-view .resource-title { min-height:0; font-size:18px; margin-bottom:18px; }
.resource-card { overflow:hidden; transition:.2s ease; }
.resource-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.cover { aspect-ratio:3/4; position:relative; display:block; }
.access-badge { position:absolute; right:10px; top:10px; padding:5px 11px; color:#fff; background:linear-gradient(135deg,#ff5d9c,#a879f1); border:1px solid rgba(255,255,255,.65); border-radius:9px; font-size:13px; font-weight:700; box-shadow:0 5px 14px rgba(47,31,101,.18); }
.resource-body { padding:12px 13px 13px; }
.resource-title { font-size:16px; font-weight:800; line-height:1.45; min-height:46px; margin:0 0 9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.author-row, .meta-row, .drive-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.author-row { justify-content:space-between; margin-bottom:9px; }
.author-identity { display:flex; align-items:center; gap:7px; min-width:0; }
.publish-time { white-space:nowrap; margin-left:auto; }
.meta-row { justify-content:flex-start; flex-wrap:wrap; min-height:29px; }
.drive-row { justify-content:flex-end; padding-top:8px; margin-top:8px; border-top:1px solid #f0eef7; }
.pagination { display:flex; justify-content:center; gap:8px; margin-top:26px; }
.page-btn { min-width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:10px; }
.page-btn.active { background:var(--pink); color:#fff; border-color:var(--pink); }
.rank-list { display:grid; gap:10px; }
.rank-item { display:grid; grid-template-columns:28px 60px 1fr; gap:10px; align-items:center; padding:8px; border:1px solid #f0eef7; border-radius:12px; }
.rank-num { color:var(--pink); font-weight:800; }
.rank-thumb { width:60px; aspect-ratio:3/4; border-radius:9px; }
.rank-title { font-weight:700; font-size:14px; line-height:1.35; }
.rank-meta { color:var(--muted); font-size:12px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:9px; }

/* Detail */
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
.article { padding:22px; }
.article-head h1 { font-size:29px; line-height:1.35; margin:0 0 14px; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.detail-tags { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.article-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.article-actions button { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; color:#696685; background:#fff; }
.article-actions button:hover, .article-actions button.active { color:var(--pink-dark); border-color:#f1bad1; background:var(--pink-soft); }
.article-actions .icon { width:17px; height:17px; }
.detail-action-bar { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.detail-action-bar button { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; color:#696685; background:#fff; }
.detail-action-bar button:hover, .detail-action-bar button.active { color:var(--pink-dark); border-color:#f1bad1; background:var(--pink-soft); }
.detail-action-bar .icon { width:17px; height:17px; }
.article-hero { height:520px; border-radius:14px; margin:20px 0; background-size:300% 200%; background-position:0 0; }
.resource-intro { display:flex; align-items:flex-start; gap:22px; }
.resource-intro-copy { flex:1; min-width:0; }
.resource-intro-copy p:first-child { margin-top:4px; }
.detail-cover { width:210px; flex:none; margin:0; padding:8px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(54,42,110,.08); }
.detail-cover-image { width:100%; aspect-ratio:3/4; border-radius:10px; }
.detail-cover figcaption { padding:9px 4px 2px; color:var(--muted); font-size:13px; text-align:center; }
.rich-section { margin-top:28px; }
.rich-section h2 { font-size:22px; margin:0 0 14px; padding-left:12px; border-left:4px solid var(--pink); }
.rich-section p { color:#565879; }
.info-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#f8dfeb; border-radius:12px; overflow:hidden; margin:20px 0; }
.info-strip div { background:#fff0f7; padding:13px; text-align:center; font-weight:700; font-size:14px; }
.preview-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:10px; height:620px; }
.preview-main, .preview-small { border-radius:12px; }
.preview-stack { display:grid; gap:10px; grid-template-rows:repeat(2,1fr); }
.preview-gallery { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-inline:contain; cursor:grab; scrollbar-color:#d8cff3 transparent; }
.preview-gallery:active { cursor:grabbing; }
.preview-slide { flex:0 0 250px; height:340px; padding:0; border:0; border-radius:13px; scroll-snap-align:start; box-shadow:inset 0 0 0 1px rgba(33,26,77,.08); cursor:zoom-in; }
.preview-hint { margin:8px 0 0; text-align:right; }
.lightbox { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(10,8,31,.88); backdrop-filter:blur(8px); }
.lightbox[hidden] { display:none; }
.lightbox-image { width:min(720px,82vw); height:min(88vh,900px); border-radius:16px; box-shadow:0 20px 70px rgba(0,0,0,.42); }
.lightbox-close { position:fixed; right:26px; top:22px; width:44px; height:44px; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#fff; background:rgba(255,255,255,.12); font-size:30px; line-height:1; }
body.lightbox-open { overflow:hidden; }
body.modal-open { overflow:hidden; }
.report-modal { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px; background:rgba(18,14,47,.55); backdrop-filter:blur(5px); }
.report-modal[hidden] { display:none; }
.report-dialog { width:min(460px,100%); padding:22px; }
.report-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.report-head h2 { margin:0; }
.report-head button { width:34px; height:34px; border:0; border-radius:50%; color:var(--muted); background:#f3f0fa; font-size:23px; }
.report-options { display:grid; gap:8px; }
.report-options label { padding:11px 13px; border:1px solid var(--line); border-radius:10px; }
.report-options label:has(input:checked) { border-color:#f0a5c3; background:var(--pink-soft); }
.report-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.comments-section { padding-top:4px; }
.comment-list { display:grid; gap:14px; }
.comment-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; }
.comment-head { display:flex; align-items:center; gap:8px; }
.comment-head time { color:var(--muted); font-size:12px; }
.comment-item p { margin:7px 0 0; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
.author-reply { margin-top:13px; padding:12px; border-radius:10px; background:#faf7ff; }
.author-badge { padding:2px 7px; border-radius:9px; color:#fff; background:var(--pink); font-size:11px; }
.comment-form { margin-top:18px; padding:18px; border-radius:12px; background:#faf9ff; }
.comment-form > label { display:block; margin-bottom:9px; font-weight:700; }
.comment-form textarea { resize:vertical; }
.comment-form-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.comment-captcha { display:flex; gap:8px; }
.comment-captcha .form-input { width:150px; }
.comment-captcha .captcha-code { height:44px; }
.comment-form > .muted { margin:8px 0 0; font-size:12px; }
.spec-table { width:100%; border-collapse:collapse; overflow:hidden; border:1px solid var(--line); border-radius:12px; }
.spec-table th, .spec-table td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; }
.spec-table th { width:22%; color:var(--muted); background:#faf9ff; }
.download-box { padding:20px; position:static; }
.unlock-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.unlock-option { padding:16px 10px; border:2px solid var(--line); border-radius:14px; text-align:center; background:#fff; }
.unlock-option.active { border-color:var(--pink); background:var(--pink-soft); }
.unlock-option strong { display:block; font-size:18px; }
.unlock-option .price { display:block; font-size:24px; font-weight:800; color:var(--pink); }
.unlock-option.vip { color:#fff; background:linear-gradient(135deg,#2d225f,#61448e); border-color:transparent; }
.points-row { display:flex; justify-content:space-between; padding:14px; background:#fff8ed; border-radius:11px; margin:14px 0; }
.locked-panel { position:relative; padding:14px; background:#f1f1f6; border-radius:12px; color:#9090a3; overflow:hidden; }
.locked-panel p { filter:blur(2px); margin:6px 0; }
.lock-overlay { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; background:rgba(71,69,91,.42); font-weight:800; }
.permission-list { display:grid; gap:8px; }
.permission-row { display:flex; justify-content:space-between; padding:10px 12px; background:#faf9ff; border-radius:9px; }
.download-revealed { background:#effbf6; color:#246b53; }

/* Auth */
.auth-page { min-height:calc(100vh - 80px); padding:42px 24px; background:radial-gradient(circle at 12% 25%,#fff0f7,transparent 25%), radial-gradient(circle at 90% 80%,#eeeaff,transparent 28%),#fdfcff; }
.auth-top { width:min(1260px,100%); margin:0 auto 20px; display:flex; justify-content:flex-end; gap:12px; align-items:center; }
.auth-card { width:min(1160px,100%); min-height:680px; margin:auto; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; box-shadow:var(--shadow); }
.auth-art { padding:65px 70px; position:relative; background:linear-gradient(145deg,#ffe9f4,#eee9ff); overflow:hidden; }
.auth-art::after { content:"☁️  ☁️  🌙  🐈"; position:absolute; bottom:50px; left:50px; right:50px; font-size:78px; letter-spacing:18px; opacity:.82; white-space:nowrap; }
.auth-art h1 { font-size:48px; margin:0 0 8px; }
.auth-art > p { font-size:23px; color:#555786; }
.benefits { display:grid; gap:24px; margin-top:38px; }
.benefit { display:flex; align-items:center; gap:14px; }
.benefit-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.7); font-size:24px; }
.auth-form { padding:52px 60px; background:#fff; }
.auth-form h2 { font-size:32px; margin:0; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); margin:22px 0; }
.auth-tab { padding:11px; text-align:center; font-weight:700; }
.auth-tab.active { color:var(--pink); border-bottom:3px solid var(--pink); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:700; margin-bottom:6px; }
.form-input { width:100%; height:48px; border:1px solid #d9d4ee; border-radius:10px; padding:0 14px; outline:none; }
.form-input:focus { border-color:#9e8ff0; box-shadow:0 0 0 4px rgba(117,100,232,.08); }
.form-row { display:flex; gap:10px; }
.form-row .form-input { flex:1; }
.captcha-code { width:126px; height:48px; flex:none; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid #d9d4ee; border-radius:10px; color:#4f4199; background:repeating-linear-gradient(135deg,#faf7ff 0,#faf7ff 7px,#f1ebff 7px,#f1ebff 9px); }
.captcha-code strong { font-size:20px; letter-spacing:4px; transform:skew(-8deg); }
.captcha-code small { color:var(--muted); white-space:nowrap; }
.captcha-code:hover { border-color:#a99cf3; }
.form-help { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted); margin:2px 0 18px; }
.agreement { font-size:13px; color:var(--muted); margin:15px 0; }
.auth-bottom { text-align:center; color:var(--muted); margin-top:18px; }
.strength { height:5px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:7px; }
.strength span { background:#e6e4ee; border-radius:4px; }
.strength span.on { background:var(--pink); }

/* Account */
.account-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; }
.profile-side { padding:20px 16px; position:sticky; top:100px; }
.profile-summary { text-align:center; padding-bottom:18px; border-bottom:1px solid var(--line); }
.profile-summary h2 { margin:8px 0 4px; }
.profile-signature { margin:8px auto 0; max-width:190px; font-size:12px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.profile-social-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:13px 0; padding:9px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.profile-social-stats button { display:grid; gap:2px; padding:3px 0; border:0; border-right:1px solid var(--line); color:var(--muted); background:transparent; font-size:12px; }
.profile-social-stats button:last-child { border-right:0; }
.profile-social-stats button:hover { color:var(--pink-dark); }
.profile-social-stats strong { color:var(--ink); font-size:16px; }
.creator-verified-badge { display:inline-block; margin-left:6px; padding:3px 7px; border-radius:10px; color:#fff; background:linear-gradient(135deg,#ff4d91,#a56af2); font-size:10px; font-weight:700; vertical-align:middle; }
.side-nav { display:grid; gap:4px; margin-top:16px; }
.side-nav button { display:flex; align-items:center; gap:12px; border:0; background:transparent; color:var(--ink); padding:11px 14px; border-radius:10px; text-align:left; }
.side-nav button::before { content:''; width:18px; height:18px; flex:none; color:#756b9b; background:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.side-nav [data-account-view="overview"]::before { -webkit-mask-image:url('assets/icons/home.svg'); mask-image:url('assets/icons/home.svg'); }
.side-nav [data-account-view="points"]::before { -webkit-mask-image:url('assets/icons/coins.svg'); mask-image:url('assets/icons/coins.svg'); }
.side-nav [data-account-view="membership"]::before { -webkit-mask-image:url('assets/icons/crown.svg'); mask-image:url('assets/icons/crown.svg'); }
.side-nav [data-account-view="favorites"]::before { -webkit-mask-image:url('assets/icons/bookmark.svg'); mask-image:url('assets/icons/bookmark.svg'); }
.side-nav [data-account-view="purchased"]::before { -webkit-mask-image:url('assets/icons/shopping-bag.svg'); mask-image:url('assets/icons/shopping-bag.svg'); }
.side-nav [data-account-view="notifications"]::before { -webkit-mask-image:url('assets/icons/bell.svg'); mask-image:url('assets/icons/bell.svg'); }
.side-nav [data-account-view="certification"]::before { -webkit-mask-image:url('assets/icons/badge-check.svg'); mask-image:url('assets/icons/badge-check.svg'); }
.side-nav [data-account-view="settings"]::before { -webkit-mask-image:url('assets/icons/settings.svg'); mask-image:url('assets/icons/settings.svg'); }
.side-nav .logout-button::before { -webkit-mask-image:url('assets/icons/log-out.svg'); mask-image:url('assets/icons/log-out.svg'); }
.side-nav button.active, .side-nav button:hover { color:var(--pink-dark); background:var(--pink-soft); }
.side-nav button.active::before, .side-nav button:hover::before { color:var(--pink-dark); }
.side-nav-divider { display:block; height:1px; margin:8px 5px; background:var(--line); }
.side-nav .logout-button { margin-top:10px; border-top:1px solid var(--line); border-radius:0; color:var(--muted); }
.menu-count { margin-left:auto; min-width:22px; height:22px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--pink); font-size:12px; }
.dashboard { display:grid; gap:16px; }
.welcome { min-height:170px; padding:30px 40px; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(115deg,#ffe8f3,#f0ebff); }
.welcome h1 { margin:0; font-size:34px; }
.welcome-art { font-size:72px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat { padding:18px; display:flex; gap:14px; align-items:center; }
.stat-icon { width:52px; height:52px; flex:none; position:relative; display:grid; place-items:center; border-radius:15px; color:#9a74be; background:linear-gradient(145deg,#fff3f8,#f1ecff); box-shadow:inset 0 0 0 1px rgba(137,101,181,.08); }
.stat-icon::before { content:''; width:25px; height:25px; background:currentColor; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.stat-icon-points::before { -webkit-mask-image:url('assets/icons/coins.svg'); mask-image:url('assets/icons/coins.svg'); }
.stat-icon-purchased::before { -webkit-mask-image:url('assets/icons/shopping-bag.svg'); mask-image:url('assets/icons/shopping-bag.svg'); }
.stat-icon-favorites::before { -webkit-mask-image:url('assets/icons/bookmark.svg'); mask-image:url('assets/icons/bookmark.svg'); }
.stat-icon-messages::before { -webkit-mask-image:url('assets/icons/bell.svg'); mask-image:url('assets/icons/bell.svg'); }
.stat strong { display:block; font-size:27px; line-height:1.1; color:var(--pink-dark); }
.stat-quick-actions { display:flex; flex-direction:column; gap:5px; margin-left:auto; }
.stat-recharge, .stat-withdraw { padding:5px 9px; border-radius:14px; color:#fff; background:var(--pink); font-size:12px; font-weight:700; }
.stat-withdraw { color:var(--pink-dark); background:var(--pink-soft); box-shadow:inset 0 0 0 1px rgba(255,77,145,.2); }
.member-row { display:grid; grid-template-columns:1.15fr 1fr; gap:16px; }
.member-card { padding:25px; color:#fff; background:linear-gradient(135deg,#2c205f,#553a84); }
.member-card h2 { margin:0; font-size:25px; }
.member-title { display:flex; align-items:center; gap:9px; }
.member-crown-icon { width:25px; height:25px; flex:none; background:#ffd770; -webkit-mask:url('assets/icons/crown.svg') center/contain no-repeat; mask:url('assets/icons/crown.svg') center/contain no-repeat; }
.social-modal { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px; background:rgba(18,14,47,.5); backdrop-filter:blur(5px); }
.social-modal[hidden] { display:none; }
.social-dialog { width:min(460px,100%); max-height:min(620px,82vh); padding:0; overflow:hidden; }
.social-dialog header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.social-dialog h2 { margin:0; font-size:21px; }
.social-dialog header button { width:34px; height:34px; border:0; border-radius:50%; color:var(--muted); background:#f7f4fc; font-size:24px; }
.social-list { max-height:500px; overflow:auto; padding:8px 20px 16px; }
.social-person { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.social-person:last-child { border-bottom:0; }
.social-person-copy { display:grid; gap:3px; min-width:0; }
.social-person-copy span { color:var(--muted); font-size:13px; }
.member-actions { display:flex; gap:10px; margin-top:22px; }
.checkin-card { padding:24px; background:linear-gradient(145deg,#fff,#fff2f8); }
.week { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin:14px 0; }
.day { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#eeeaf8; font-size:13px; }
.day.done { background:var(--pink); color:#fff; }
.recent-card { padding:16px; }
.recent-card .side-heading { margin:0 0 12px; }
.recent-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.recent-item .portrait { height:116px; border-radius:9px; background-size:300% auto; background-position-y:8%; }
.recent-item .portrait.p4, .recent-item .portrait.p5, .recent-item .portrait.p6 { background-position-y:59%; }
.recent-item strong { display:block; overflow:hidden; margin-top:6px; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
.recent-item .muted { font-size:12px; }
.account-bottom { display:grid; grid-template-columns:1.4fr .8fr; gap:16px; }
.account-bottom.security-only { grid-template-columns:1fr; }
.points-table, .security { padding:20px; }
.mini-table { width:100%; border-collapse:collapse; font-size:14px; }
.mini-table th, .mini-table td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; }
.account-table-title { margin:4px 0 12px; font-size:20px; }
.withdraw-records-title { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.withdraw-pending { color:#b87516; }
.empty-record { padding:28px !important; color:var(--muted); text-align:center !important; }
.table-scroll { overflow-x:auto; }
.table-scroll .mini-table { min-width:720px; }
.security-row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }
.account-panel { min-height:620px; padding:28px; }
.account-panel-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.account-panel-head h1 { margin:0 0 7px; font-size:28px; }
.account-panel-head p { margin:0; }
.account-mini-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.account-mini-card { min-width:0; display:flex; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.account-mini-card:hover { border-color:#d8cbed; box-shadow:0 8px 22px rgba(54,42,110,.07); }
.account-mini-thumb { width:72px; height:96px; flex:none; border-radius:8px; background-size:300% auto; background-position-y:8%; }
.account-mini-thumb.p4, .account-mini-thumb.p5, .account-mini-thumb.p6 { background-position-y:59%; }
.account-mini-info { min-width:0; flex:1; display:flex; flex-direction:column; }
.account-mini-info strong { display:-webkit-box; overflow:hidden; color:var(--ink); font-size:13px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.account-mini-info > span { overflow:hidden; margin-top:5px; color:var(--muted); font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.account-mini-actions { display:flex; gap:8px; margin-top:auto; font-size:12px; }
.account-mini-actions a, .account-mini-actions button { padding:0; border:0; color:var(--pink-dark); background:transparent; font-size:12px; }
.account-mini-actions button { color:var(--muted); }
.account-list { display:grid; gap:10px; }
.account-list-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:13px; border:1px solid var(--line); border-radius:12px; color:var(--ink); }
.account-list-row:hover { border-color:#d8cbed; background:#fffafd; }
.account-list-row small { display:block; margin-top:5px; color:var(--muted); }
.list-thumb { width:64px; height:64px; border-radius:10px; }
.row-action { color:var(--pink-dark); font-weight:700; }
.points-summary { display:flex; align-items:center; gap:16px; padding:22px; margin-bottom:20px; border-radius:14px; background:var(--pink-soft); }
.points-summary strong { margin-right:auto; color:var(--pink-dark); font-size:34px; }
.points-tabs { display:flex; gap:6px; margin-bottom:14px; padding:5px; border-radius:12px; background:#f4f1fb; }
.points-tabs button { flex:1; padding:11px 16px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-weight:700; }
.points-tabs button.active { color:#fff; background:var(--pink); box-shadow:0 5px 14px rgba(255,77,145,.22); }
.points-tab-panel[hidden] { display:none; }
.card-recharge { margin-bottom:24px; padding:20px; border:1px solid var(--line); border-radius:14px; }
.card-recharge > label { display:block; margin-bottom:10px; font-weight:700; }
.card-recharge-row { display:flex; gap:10px; }
.card-recharge-row .form-input { flex:1; }
.card-recharge .muted { margin:9px 0 0; font-size:13px; }
.withdraw-form { margin-bottom:24px; padding:20px; border:1px solid var(--line); border-radius:14px; }
.withdraw-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.withdraw-grid label { display:grid; gap:8px; font-weight:700; }
.withdraw-account { grid-column:1/-1; }
.withdraw-actions { display:flex; align-items:center; gap:14px; margin-top:16px; }
.positive { color:var(--success); }
.account-member { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.account-member p { color:#ddd7f8; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.benefit-grid div { padding:20px; border:1px solid var(--line); border-radius:12px; }
.benefit-grid strong, .benefit-grid span { display:block; }
.benefit-grid span { margin-top:6px; color:var(--muted); font-size:13px; }
.notice-dot { width:10px; height:10px; border-radius:50%; background:var(--pink); }
.settings-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:22px; }
.settings-grid label { display:grid; gap:8px; font-weight:700; }
.settings-grid .settings-signature { grid-column:1/-1; }
.settings-signature textarea { min-height:86px; resize:vertical; line-height:1.6; }
.settings-grid small { color:var(--muted); font-size:12px; font-weight:400; }
.settings-avatar { display:flex; align-items:center; gap:18px; margin-bottom:22px; padding:18px; border:1px solid var(--line); border-radius:14px; }
.settings-avatar-preview { display:block; width:88px; height:88px; flex:none; }
.settings-avatar p { margin:5px 0 10px; font-size:12px; }
.settings-avatar .disabled { pointer-events:none; opacity:.5; }
.email-setting { margin-bottom:22px; padding:18px; border:1px solid var(--line); border-radius:14px; }
.email-setting-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.email-status { padding:4px 10px; border-radius:12px; color:var(--pink-dark); background:var(--pink-soft); font-size:12px; }
.email-status.success { color:var(--success); background:#eafaf2; }
.email-setting.verified .form-input { color:var(--muted); background:#f3f3f7; cursor:not-allowed; }
.email-setting > .muted { margin:8px 0 0; font-size:12px; }
.email-code-row { display:grid; grid-template-columns:auto minmax(150px,1fr) auto; gap:10px; margin-top:10px; }
.settings-notice { display:grid; gap:8px; max-width:460px; margin-bottom:22px; font-weight:700; }
.certification-guide { margin-bottom:20px; padding:20px; border-radius:14px; background:linear-gradient(135deg,#fff0f6,#f4efff); }
.certification-guide h2 { margin:0 0 10px; font-size:20px; }
.certification-guide p { margin:0 0 10px; }
.certification-guide ol { margin:0; padding-left:22px; line-height:1.9; }
.certification-voice-note { margin-left:8px; color:#e33c65; font-size:12px; font-weight:600; }
.certification-form { padding:22px; border:1px solid var(--line); border-radius:14px; }
.certification-form input[readonly] { color:var(--muted); background:#f5f4f8; }
.video-upload { display:grid; gap:9px; margin-bottom:16px; font-weight:700; }
.video-upload small { color:var(--muted); font-weight:400; }
.video-upload small.valid { color:var(--success); }
.certification-agree { display:block; margin:16px 0; color:var(--muted); font-size:13px; }
.certification-success { min-height:380px; display:grid; place-content:center; justify-items:center; text-align:center; }
.certification-success > span { width:72px; height:72px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--success); font-size:36px; }
.certification-success h2 { margin:18px 0 6px; }
.certification-success p { margin:0; color:var(--muted); }

@media (max-width: 1100px) {
  .main-nav { display:none; }
  .mobile-menu { display:block; }
  .header-search { width:auto; flex:1; }
  .layout, .detail-layout, .hero-grid { grid-template-columns:1fr; }
  .sidebar { grid-template-columns:repeat(2,1fr); }
  .download-box { position:static; }
  .account-layout { grid-template-columns:1fr; }
  .profile-side { position:static; }
  .side-nav { grid-template-columns:repeat(3,1fr); }
  .side-nav-divider { grid-column:1/-1; }
}

@media (max-width: 760px) {
  .shell { width:min(100% - 24px, 680px); }
  .site-header { height:auto; }
  .header-inner { min-height:70px; gap:12px; flex-wrap:wrap; padding:10px 0; }
  .brand { min-width:0; }
  .filter-spacer { width:100%; margin-left:0; }
  .creator-filter-row { flex-wrap:wrap; }
  .creator-filter-row .filter-tools { width:auto; margin-left:auto; }
  .browse-list-head { align-items:flex-start; flex-direction:column; }
  .browse-list-tools { width:100%; justify-content:flex-start; }
  .browse-sort-tabs { max-width:100%; overflow:auto; }
  .creator-filter-strip { order:3; flex-basis:100%; }
  .resource-grid.list-view .resource-card { grid-template-columns:120px minmax(0,1fr); min-height:170px; }
  .resource-grid.list-view .cover { height:170px; }
  .resource-grid.list-view .resource-body { padding:14px; }
  .brand strong { font-size:20px; }
  .header-search { order:3; flex-basis:100%; width:100%; }
  .header-actions .login-link { display:none; }
  .hero { min-height:360px; padding:34px 24px; }
  .hero-slide { padding:34px 24px; }
  .hero-copy { width:100%; }
  .hero h1 { font-size:36px; }
  .hero-photo { opacity:.25; width:80%; }
  .shortcut-bar { grid-template-columns:1fr; gap:14px; }
  .shortcut { justify-content:flex-start; border-right:0; border-bottom:1px solid var(--line); padding-bottom:12px; }
  .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sidebar { grid-template-columns:1fr; }
  .browse-intro { grid-template-columns:1fr; }
  .mode-tabs { grid-template-columns:1fr; }
  .filter-label { width:100%; }
  .filter-spacer { margin-left:0; width:100%; }
  .article { padding:15px; }
  .article-head h1 { font-size:23px; }
  .article-hero { height:380px; }
  .resource-intro { flex-direction:column; }
  .detail-cover { width:min(260px,100%); }
  .preview-grid { height:450px; }
  .preview-slide { flex-basis:210px; height:290px; }
  .info-strip { grid-template-columns:1fr; }
  .auth-card { grid-template-columns:1fr; }
  .auth-art { display:none; }
  .auth-form { padding:34px 24px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .member-row, .account-bottom { grid-template-columns:1fr; }
  .account-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .benefit-grid, .settings-grid { grid-template-columns:1fr; }
  .email-code-row { grid-template-columns:1fr; }
  .card-recharge-row { flex-wrap:wrap; }
  .card-recharge-row .form-input { flex-basis:100%; }
  .comment-form-bottom { align-items:stretch; flex-direction:column; }
  .comment-captcha .form-input { width:100%; }
  .withdraw-grid { grid-template-columns:1fr; }
  .withdraw-account { grid-column:auto; }
  .withdraw-actions { align-items:flex-start; flex-direction:column; }
  .recent-grid { grid-template-columns:repeat(2,1fr); }
  .side-nav { grid-template-columns:repeat(2,1fr); }
  .creator-profile-main { align-items:flex-start; flex-wrap:wrap; padding:0 22px 22px; }
  .creator-profile-copy { flex-basis:calc(100% - 145px); }
  .creator-follow { width:100%; margin-top:0; }
  .creator-facts { display:grid; gap:6px; }
  .submit-layout { grid-template-columns:1fr; }
  .submit-sidebar { position:static; }
  .submit-upload-row { grid-template-columns:1fr; }
  .creator-picker { grid-template-columns:1fr; }
  .creator-library { right:0; }
  .creator-radio-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 480px) {
  .resource-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr; }
  .account-mini-grid { grid-template-columns:1fr; }
  .header-actions .btn { padding:8px 12px; }
  .brand small { display:none; }
  .recent-grid { grid-template-columns:1fr 1fr; }
  .creator-cover-art { height:120px; padding:20px; }
  .creator-profile-avatar { width:92px; height:92px; }
  .creator-profile-copy { flex-basis:calc(100% - 114px); padding-top:48px; }
  .creator-name-line h1 { font-size:24px; }
  .creator-stats { grid-template-columns:repeat(3,1fr); }
  .submit-panel { padding:20px; }
  .submit-two-columns { grid-template-columns:1fr; }
  .creator-radio-grid { grid-template-columns:repeat(2,1fr); }
}