:root {
  --bg: #0e1118;
  --bg-soft: #141925;
  --surface: #191f2d;
  --surface-2: #212838;
  --paper: #f3eee4;
  --paper-ink: #241f1a;
  --text: #f2f3f7;
  --muted: #969eb0;
  --line: rgba(255,255,255,.10);
  --accent: #e8a856;
  --accent-2: #f1c986;
  --danger: #ff7777;
  --success: #7bd8a4;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 85% -10%, #2a2430 0, transparent 32%), var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.app-shell { max-width: 1500px; min-height: 100vh; margin: 0 auto; }
.site-header { height: 82px; display: flex; align-items: center; gap: 28px; padding: 0 36px; position: sticky; top: 0; z-index: 30; background: rgba(14,17,24,.88); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #17120c; background: linear-gradient(135deg, var(--accent-2), var(--accent)); font-family: var(--serif); font-weight: 800; font-size: 22px; box-shadow: 0 8px 24px rgba(232,168,86,.2); }
.brand strong { display: block; font-family: var(--serif); font-size: 23px; letter-spacing: -.5px; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-top: -2px; }
.main-nav { display: flex; gap: 6px; }
.nav-link { border: 0; color: var(--muted); background: transparent; padding: 10px 13px; border-radius: 10px; }
.nav-link:hover, .nav-link.active { color: var(--text); background: rgba(255,255,255,.06); }
.header-actions { margin-left: auto; display: flex; gap: 9px; }
.button { border: 1px solid transparent; border-radius: 12px; padding: 10px 16px; color: var(--text); background: transparent; font-weight: 700; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #20170d; box-shadow: 0 8px 24px rgba(232,168,86,.16); }
.button.secondary { background: var(--surface-2); border-color: var(--line); }
.button.ghost { border-color: var(--line); }
.button.large { padding: 13px 20px; }
.button.full { width: 100%; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.view { display: none; }
.view.active { display: block; }
.hero { min-height: 620px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); gap: 64px; align-items: center; padding: 74px 68px 64px; border-bottom: 1px solid var(--line); }
.eyebrow { display: inline-block; color: var(--accent-2); font-size: 12px; text-transform: uppercase; letter-spacing: 2.2px; font-weight: 800; margin-bottom: 12px; }
.hero h1, .page-intro h1 { margin: 0; font-family: var(--serif); font-size: clamp(52px,7vw,98px); line-height: .92; letter-spacing: -4px; font-weight: 500; }
.hero h1 em { color: var(--accent-2); font-weight: 400; }
.hero-copy > p { max-width: 660px; color: #c1c6d2; font-size: 19px; line-height: 1.7; margin: 28px 0 30px; }
.hero-actions { display: flex; gap: 10px; }
.featured-card { position: relative; min-height: 470px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: linear-gradient(155deg,#252b39,#131722); box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: flex-end; }
.featured-card::after { content:""; position:absolute; inset:0; background: linear-gradient(to top,rgba(5,7,11,.98) 0%,rgba(5,7,11,.3) 55%,transparent 75%); pointer-events:none; }
.featured-art { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.75; }
.featured-art.fallback { background: radial-gradient(circle at 70% 25%,#795b47,transparent 25%), linear-gradient(145deg,#1a1b22,#352c2b 48%,#11151b); }
.featured-content { position:relative; z-index:2; padding: 32px; }
.featured-content .badge { display:inline-block; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.25); padding:7px 9px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; }
.featured-content h2 { font-family:var(--serif); font-size:42px; margin:12px 0 5px; }
.featured-content p { color:#d1d3d9; line-height:1.55; }
.featured-meta { display:flex; gap:9px; color:#b8bdc8; font-size:13px; margin:14px 0 20px; flex-wrap:wrap; }
.feed-section { padding: 64px 44px 90px; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:28px; }
.section-heading h2 { font-family:var(--serif); font-size:38px; margin:0; font-weight:500; }
.filters { display:flex; gap:10px; }
input, textarea, select { width:100%; color:var(--text); background:#10151f; border:1px solid var(--line); border-radius:11px; padding:11px 12px; outline:none; }
input:focus, textarea:focus, select:focus { border-color:rgba(232,168,86,.55); box-shadow:0 0 0 3px rgba(232,168,86,.08); }
textarea { resize:vertical; line-height:1.55; }
.search-box input { width:min(380px,42vw); }
.filters select { width:160px; }
.story-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.story-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.2s ease; cursor:pointer; min-width:0; }
.story-card:hover { transform:translateY(-4px); border-color:rgba(232,168,86,.28); box-shadow:0 18px 45px rgba(0,0,0,.2); }
.story-cover { height:210px; background-size:cover; background-position:center; background-color:#232938; display:flex; align-items:flex-end; padding:16px; position:relative; }
.story-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,10,15,.65),transparent 65%); }
.story-cover.fallback { background:linear-gradient(145deg,#2b2630,#161c27); }
.story-genre { position:relative; z-index:1; font-size:10px; letter-spacing:1px; text-transform:uppercase; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 8px; }
.story-card-body { padding:19px; }
.story-card h3 { font-family:var(--serif); font-size:25px; margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story-author { color:var(--accent-2); font-size:13px; }
.story-summary { color:#abb1bf; line-height:1.55; font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:65px; }
.story-footer { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; padding-top:13px; border-top:1px solid var(--line); }
.empty-state, .gate-card { text-align:center; border:1px dashed rgba(255,255,255,.18); border-radius:var(--radius); padding:55px 25px; color:var(--muted); }
.empty-state h3, .gate-card h2 { color:var(--text); font-family:var(--serif); font-size:30px; margin:0 0 10px; }
.gate-card { max-width:720px; margin:45px auto 100px; background:var(--surface); }
.gate-card .button { margin-top:10px; }
.content-view { padding:64px 48px 100px; }
.page-intro { max-width:900px; margin-bottom:45px; }
.page-intro h1 { font-size:clamp(46px,6vw,78px); }
.page-intro p { color:var(--muted); font-size:18px; line-height:1.6; }
.writer-studio { max-width:1200px; margin:0 auto; }
.studio-grid, .profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.panel-heading h2 { font-family:var(--serif); font-size:30px; margin:0; font-weight:500; }
.stack-form { display:grid; gap:14px; }
.stack-form label { display:grid; gap:7px; color:#c8ccd6; font-size:13px; font-weight:700; }
.field-note { color:var(--muted); font-weight:400; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.chapter-editor-panel { margin-top:22px; }
.manuscript-input { font-family:var(--serif); font-size:17px; line-height:1.7; }
.my-stories { display:grid; gap:10px; }
.my-story-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:13px; background:#121722; }
.my-story-row h4 { margin:0 0 5px; }
.my-story-row small { color:var(--muted); }
.status-pill { display:inline-block; padding:4px 7px; border-radius:999px; font-size:10px; text-transform:uppercase; letter-spacing:.8px; border:1px solid var(--line); }
.status-pill.published { color:var(--success); }
.reader-view { padding:28px 38px 80px; }
.back-link { border:0; background:transparent; color:var(--muted); padding:12px 0; margin-bottom:10px; }
.reader-layout { display:grid; grid-template-columns:310px minmax(0,820px); justify-content:center; gap:38px; align-items:start; }
.reader-sidebar { position:sticky; top:105px; }
.reader-cover { aspect-ratio:2/3; border-radius:17px; background:linear-gradient(145deg,#372f31,#161a21); background-size:cover; background-position:center; box-shadow:var(--shadow); margin-bottom:20px; }
.reader-sidebar h1 { font-family:var(--serif); font-size:32px; line-height:1.05; margin:0 0 5px; }
.reader-sidebar .reader-summary { color:var(--muted); line-height:1.55; font-size:13px; }
.reader-actions { display:grid; gap:8px; margin:18px 0; }
.chapter-nav { display:grid; gap:4px; max-height:330px; overflow:auto; padding-right:4px; }
.chapter-link { width:100%; border:0; background:transparent; color:var(--muted); text-align:left; padding:9px 10px; border-radius:8px; font-size:13px; }
.chapter-link:hover, .chapter-link.active { background:rgba(255,255,255,.06); color:var(--text); }
.reader-paper { background:var(--paper); color:var(--paper-ink); border-radius:4px; min-height:800px; box-shadow:0 24px 70px rgba(0,0,0,.32); padding:clamp(38px,6vw,82px); }
.reader-chapter h2 { font-family:var(--serif); font-size:40px; line-height:1.1; margin:0 0 38px; text-align:center; font-weight:500; }
.reader-chapter p { font-family:var(--serif); font-size:18px; line-height:1.8; margin:0 0 1.1em; text-indent:1.5em; }
.reader-chapter p:first-of-type { text-indent:0; }
.reader-pagination { display:flex; justify-content:space-between; gap:10px; border-top:1px solid rgba(36,31,26,.15); margin-top:45px; padding-top:20px; }
.reader-paper .button { color:var(--paper-ink); border-color:rgba(36,31,26,.2); }
.comments-section { margin-top:65px; border-top:2px solid rgba(36,31,26,.12); padding-top:30px; }
.comments-heading { display:flex; align-items:center; justify-content:space-between; }
.comments-heading h3 { font-family:var(--serif); font-size:27px; }
.comment-form { display:grid; gap:8px; margin-bottom:22px; }
.comment-form textarea { background:rgba(255,255,255,.46); color:var(--paper-ink); border-color:rgba(36,31,26,.16); }
.comment-form .button.primary { justify-self:end; }
.inline-notice { border:1px solid rgba(36,31,26,.14); color:#766d63; padding:12px; border-radius:9px; font-size:13px; margin-bottom:18px; }
.comments-list { display:grid; gap:14px; }
.comment { border-bottom:1px solid rgba(36,31,26,.1); padding-bottom:14px; }
.comment-head { display:flex; gap:8px; align-items:center; font-size:12px; color:#766d63; }
.comment-head strong { color:var(--paper-ink); }
.comment p { font-family:var(--sans); line-height:1.55; font-size:14px; }
.profile-hero { max-width:1000px; margin:0 auto 30px; display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); padding:15px 0 34px; }
.avatar { border-radius:50%; background:linear-gradient(135deg,#685346,#2a2f3b); background-size:cover; background-position:center; display:grid; place-items:center; font-family:var(--serif); color:white; }
.avatar.large { width:120px; height:120px; font-size:42px; flex:0 0 auto; }
.profile-summary h1 { font-family:var(--serif); margin:0; font-size:46px; }
.profile-stats { display:flex; gap:18px; margin-top:14px; color:var(--muted); font-size:13px; }
.profile-stats strong { color:var(--text); font-size:18px; display:block; }
.profile-grid { max-width:1000px; margin:0 auto; }
.auth-dialog { width:min(470px,calc(100vw - 30px)); border:1px solid var(--line); border-radius:22px; background:#141925; color:var(--text); padding:28px; box-shadow:var(--shadow); }
.auth-dialog::backdrop { background:rgba(3,5,9,.72); backdrop-filter:blur(5px); }
.dialog-close { position:absolute; top:12px; right:14px; background:transparent; border:0; color:var(--muted); font-size:27px; }
.auth-brand { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:26px; margin-bottom:24px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; background:#0e131c; border-radius:10px; padding:4px; margin-bottom:20px; }
.auth-tab { border:0; background:transparent; color:var(--muted); padding:10px; border-radius:8px; }
.auth-tab.active { background:var(--surface-2); color:var(--text); }
.auth-form { display:grid; gap:13px; }
.auth-form label { display:grid; gap:6px; font-size:13px; font-weight:700; }
.auth-help { color:var(--muted); font-size:12px; line-height:1.5; text-align:center; }
.form-message { padding:11px; border-radius:9px; margin-top:12px; font-size:13px; background:rgba(255,255,255,.06); }
.form-message.error { color:#ffc1c1; border:1px solid rgba(255,119,119,.2); }
.form-message.success { color:#bdf1d3; border:1px solid rgba(123,216,164,.2); }
.toast { position:fixed; right:25px; bottom:25px; z-index:80; background:#232a37; color:white; border:1px solid var(--line); border-radius:12px; padding:12px 16px; box-shadow:var(--shadow); transform:translateY(30px); opacity:0; pointer-events:none; transition:.2s; max-width:min(420px,calc(100vw - 40px)); }
.toast.show { transform:translateY(0); opacity:1; }
.site-footer { border-top:1px solid var(--line); margin-top:30px; padding:32px 44px; display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.site-footer strong { color:var(--text); font-family:var(--serif); font-size:22px; margin-right:12px; }
.skeleton { background:linear-gradient(90deg,#222836 25%,#2b3242 38%,#222836 55%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:10px; }
.skeleton.tall { position:absolute; inset:0; }
@keyframes shimmer { to { background-position:-200% 0; } }
@media (max-width:1100px) {
  .story-grid { grid-template-columns:repeat(3,1fr); }
  .hero { gap:35px; padding:55px 40px; }
  .reader-layout { grid-template-columns:250px minmax(0,1fr); }
}
@media (max-width:820px) {
  .site-header { padding:0 16px; height:70px; }
  .brand small, .main-nav { display:none; }
  .header-actions .ghost { display:none; }
  .hero { grid-template-columns:1fr; padding:50px 22px; }
  .hero h1 { font-size:64px; letter-spacing:-2px; }
  .featured-card { min-height:400px; }
  .feed-section, .content-view { padding:45px 20px 70px; }
  .section-heading { align-items:stretch; flex-direction:column; }
  .filters { width:100%; }
  .search-box { flex:1; }
  .search-box input { width:100%; }
  .story-grid { grid-template-columns:repeat(2,1fr); }
  .studio-grid, .profile-grid { grid-template-columns:1fr; }
  .reader-view { padding:18px 12px 60px; }
  .reader-layout { display:block; }
  .reader-sidebar { position:static; display:grid; grid-template-columns:110px 1fr; gap:16px; align-items:start; margin-bottom:18px; }
  .reader-cover { margin:0; }
  .reader-actions, .chapter-nav { grid-column:1 / -1; }
  .reader-paper { padding:35px 24px; }
  .profile-hero { align-items:flex-start; }
}
@media (max-width:560px) {
  .story-grid { grid-template-columns:1fr; }
  .filters { flex-direction:column; }
  .filters select { width:100%; }
  .form-row { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; }
  .hero h1 { font-size:53px; }
  .site-footer { flex-direction:column; gap:10px; }
  .profile-hero { flex-direction:column; }
  .reader-sidebar { grid-template-columns:85px 1fr; }
  .reader-chapter p { font-size:17px; }
}