:root {
  --violet-900: #24114f;
  --violet-800: #35146e;
  --violet-700: #4f1fa1;
  --violet-600: #6b32c9;
  --violet-500: #7c3aed;
  --violet-100: #eee8ff;
  --violet-50: #f8f6ff;
  --ink: #141426;
  --muted: #686879;
  --line: #e9e6f1;
  --white: #ffffff;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --shadow: 0 24px 70px rgba(47, 21, 96, 0.12);
  --radius: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--white); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(233,230,241,.8);
}
.nav-wrap { height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-weight: 700; font-size: 30px; letter-spacing: -1.3px; }
.brand-text span { color: var(--violet-600); }
.brand-mark { width: 34px; height: 42px; color: var(--violet-700); display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; color: #4f4d5c; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--violet-700); }
.nav-write, .nav-login { padding: 10px 17px; border-radius: 10px; }
.nav-write { color: white !important; background: var(--violet-700); box-shadow: 0 8px 22px rgba(79,31,161,.18); }
.nav-login { border: 1px solid var(--line); }
.menu-toggle { display: none; border: 0; background: transparent; cursor: pointer; }

.hero { position: relative; min-height: 700px; overflow: hidden; background: linear-gradient(135deg, #fff 0%, #fbfaff 52%, #f2ecff 100%); }
.hero-grid { min-height: 700px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; position: relative; z-index: 2; }
.eyebrow { color: var(--violet-700); text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; margin-bottom: 14px; }
.hero h1 { font-family: var(--serif); font-size: clamp(52px, 6vw, 78px); line-height: .99; letter-spacing: -3px; max-width: 650px; }
.hero h1 span { color: var(--violet-700); }
.hero-description { max-width: 560px; margin: 26px 0 30px; font-size: 17px; line-height: 1.8; color: var(--muted); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 21px; border-radius: 11px; font-size: 13px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--violet-700); color: white; box-shadow: 0 12px 30px rgba(79,31,161,.22); }
.btn-secondary { background: white; border: 1px solid #ded9ea; color: var(--ink); }
.btn-light { background: white; color: var(--violet-800); margin-top: 24px; }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 38px; color: #777286; font-size: 12px; letter-spacing: .08em; }
.note-line { width: 42px; height: 1px; background: var(--violet-600); }

.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; pointer-events: none; }
.orb-one { width: 420px; height: 420px; background: #eee6ff; right: -140px; top: -120px; }
.orb-two { width: 260px; height: 260px; background: #f4efff; left: -110px; bottom: -120px; }
.hero-dots { position: absolute; width: 180px; height: 120px; right: 25px; top: 20px; opacity: .35; background-image: radial-gradient(#7c5bc5 1.4px, transparent 1.4px); background-size: 16px 16px; }

.hero-art { height: 570px; position: relative; display: grid; place-items: center; }
.art-glow { position: absolute; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(116,75,190,.18), transparent 68%); }
.book-stack { position: absolute; width: 410px; height: 300px; right: 45px; bottom: 85px; transform: rotate(-8deg); filter: drop-shadow(0 28px 30px rgba(33,18,74,.16)); }
.book { position: absolute; left: 30px; width: 350px; height: 78px; border-radius: 8px 14px 14px 8px; }
.book-back { bottom: 0; background: #1f1740; }
.book-middle { bottom: 48px; background: #5a269b; }
.book-front { bottom: 96px; height: 180px; background: #fff; border: 1px solid #ddd7eb; overflow: hidden; }
.book-front::before { content: ""; position: absolute; inset: 0 0 0 18px; border-left: 2px solid #e5e0ed; }
.book-pages { position: absolute; right: 15px; top: 20px; width: 240px; height: 120px; background: repeating-linear-gradient(to bottom, #ddd8e7 0 1px, transparent 1px 8px); transform: skewY(-5deg); opacity: .65; }
.book-cover-title { position: absolute; left: 42px; bottom: 30px; font-family: var(--serif); font-size: 28px; color: var(--violet-800); }
.feather-art { position: absolute; color: var(--violet-700); width: 180px; height: 240px; right: 130px; top: 85px; transform: rotate(12deg); filter: drop-shadow(0 14px 18px rgba(75,34,133,.12)); }

.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: rgba(255,255,255,.92); border: 1px solid rgba(230,225,240,.9); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.floating-card strong { display: block; font-size: 12px; }
.floating-card small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.card-read { top: 150px; left: 10px; }
.card-write { right: 0; bottom: 45px; }
.mini-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: var(--violet-50); color: var(--violet-700); }
.mini-icon svg { width: 19px; height: 19px; }

.trust-strip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); background: white; }
.trust-inner { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 24px; color: #8b8794; font-size: 12px; }
.trust-inner div { display: flex; align-items: center; gap: 20px; color: var(--ink); font-size: 13px; }
.trust-inner i { width: 4px; height: 4px; background: #b9b1c9; border-radius: 50%; }

.section { padding: 105px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 38px; }
.section-heading h2, .writer-banner h2 { font-family: var(--serif); font-size: clamp(35px, 4vw, 50px); line-height: 1.1; letter-spacing: -1.8px; }
.text-link { color: var(--violet-700); font-weight: 700; font-size: 13px; white-space: nowrap; }
.text-link span { margin-left: 6px; }
.category-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.category { border: 1px solid var(--line); background: white; color: #686574; padding: 9px 16px; border-radius: 99px; font-size: 12px; cursor: pointer; transition: .2s; }
.category:hover, .category.active { background: var(--violet-700); border-color: var(--violet-700); color: white; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story-card { min-width: 0; }
.story-cover { aspect-ratio: 3 / 4; height: auto; border-radius: 20px; padding: 25px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: end; color: white; box-shadow: 0 18px 40px rgba(38,22,74,.12); transition: transform .3s ease, box-shadow .3s ease; }
.story-card:hover .story-cover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(38,22,74,.18); }
.story-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,9,35,.65), transparent 60%); }
.story-cover > * { position: relative; z-index: 1; }
.story-cover span { position: absolute; top: 22px; right: 22px; font-size: 11px; opacity: .7; }
.story-cover strong { font-family: var(--serif); font-size: 29px; line-height: 1.1; }
.story-cover small { margin-top: 7px; opacity: .82; font-size: 11px; max-width: 210px; }
.cover-one { background: radial-gradient(circle at 70% 25%, #8864c7, transparent 25%), linear-gradient(135deg, #21133e, #5a2b9a 58%, #aa8ae3); }
.cover-two { background: radial-gradient(circle at 25% 25%, #df91ba, transparent 26%), linear-gradient(135deg, #2d183a, #8e3d75 55%, #c57bb0); }
.cover-three { background: radial-gradient(circle at 75% 22%, #6c9fd2, transparent 25%), linear-gradient(135deg, #101f37, #245080 56%, #7aa8c7); }
.cover-user { background-size:cover; background-position:center; }
.cover-six { background: radial-gradient(circle at 70% 20%, #8cc0d8, transparent 24%), linear-gradient(135deg, #123442, #347a88 58%, #9ac7ce); }
.cover-seven { background: radial-gradient(circle at 25% 20%, #f0bd68, transparent 24%), linear-gradient(135deg, #4a2414, #a75b2d 58%, #e4a65e); }
.cover-eight { background: radial-gradient(circle at 70% 18%, #b95f6f, transparent 25%), linear-gradient(135deg, #220f1c, #70263b 58%, #b65765); }
.cover-nine { background: radial-gradient(circle at 30% 20%, #77a8ff, transparent 24%), linear-gradient(135deg, #10183d, #274f99 58%, #7db4d7); }
.cover-ten { background: radial-gradient(circle at 75% 20%, #8bcb8a, transparent 24%), linear-gradient(135deg, #193423, #3f7548 58%, #9bbf79); }
.cover-eleven { background: radial-gradient(circle at 30% 20%, #9e79c9, transparent 24%), linear-gradient(135deg, #180e24, #482361 58%, #8b5eb4); }
.cover-twelve { background: radial-gradient(circle at 75% 20%, #d4a56c, transparent 24%), linear-gradient(135deg, #3a2114, #79502e 58%, #c58d55); }
.cover-thirteen { background: radial-gradient(circle at 25% 20%, #7cc7b0, transparent 24%), linear-gradient(135deg, #12332f, #2d7467 58%, #85c5a9); }
.cover-fourteen { background: radial-gradient(circle at 70% 20%, #d38c9c, transparent 24%), linear-gradient(135deg, #3d1827, #804058 58%, #c67b8f); }
.cover-fifteen { background: radial-gradient(circle at 25% 20%, #f0cf7a, transparent 24%), linear-gradient(135deg, #40301b, #806329 58%, #c6a14f); }
.cover-sixteen { background: radial-gradient(circle at 75% 20%, #8e929c, transparent 24%), linear-gradient(135deg, #171a21, #424a56 58%, #7f8994); }
.cover-seventeen { background: radial-gradient(circle at 30% 20%, #c98d70, transparent 24%), linear-gradient(135deg, #3c1f1b, #80503f 58%, #b97c61); }
.cover-eighteen { background: radial-gradient(circle at 70% 20%, #a89ed4, transparent 24%), linear-gradient(135deg, #211d3e, #554c8a 58%, #9e95c7); }
.cover-nineteen { background: radial-gradient(circle at 25% 20%, #8db9a2, transparent 24%), linear-gradient(135deg, #17352c, #3f725d 58%, #93b69a); }
.story-meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 15px; }
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--violet-700); font-weight: 800; }
.story-meta h3 { font-family: var(--serif); font-size: 20px; margin-top: 4px; }
.story-meta p, .read-time { color: var(--muted); font-size: 11px; }
.read-time { padding-top: 25px; white-space: nowrap; }

.hall-section { background: #fbf9ff; }
.hall-card { min-height: 430px; border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(135deg, #2d1260, #5a269d); color: white; box-shadow: 0 25px 65px rgba(63,26,121,.18); }
.hall-copy { padding: 60px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 20% 30%, rgba(174,139,245,.22), transparent 35%); }
.eyebrow.light { color: #cdb9fa; }
.hall-copy h2 { font-family: var(--serif); font-size: clamp(35px, 4vw, 50px); line-height: 1.08; letter-spacing: -1.8px; max-width: 510px; }
.hall-copy p:not(.eyebrow) { color: #d9cef0; max-width: 450px; margin-top: 18px; font-size: 14px; }
.hall-ranking { padding: 50px 45px; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: rgba(19,8,46,.17); }
.rank-item { display: grid; grid-template-columns: 30px 45px 1fr auto; align-items: center; gap: 13px; padding: 15px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.07); border-radius: 14px; }
.rank-item > span { color: #cdb9fa; font-size: 11px; }
.rank-item strong, .rank-item small { display: block; }
.rank-item strong { font-family: var(--serif); font-size: 15px; }
.rank-item small { color: #cfc2e8; font-size: 10px; margin-top: 2px; }
.rank-item b { font-size: 11px; color: #ddd2f4; }
.rank-avatar { width: 40px; height: 40px; border-radius: 50%; background: #f0eaff; color: var(--violet-800); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.rank-one { background: rgba(255,255,255,.13); }

.centered { justify-content: center; text-align: center; }
.centered p:not(.eyebrow) { max-width: 650px; color: var(--muted); font-size: 14px; margin: 18px auto 0; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.feature-card { border: 1px solid var(--line); border-radius: 18px; padding: 28px; background: white; transition: .25s; }
.feature-card:hover { border-color: #d4c4ef; box-shadow: 0 18px 40px rgba(45,24,90,.07); transform: translateY(-3px); }
.feature-number { color: var(--violet-600); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.feature-card h3 { font-family: var(--serif); font-size: 22px; margin: 34px 0 8px; }
.feature-card p { color: var(--muted); font-size: 12px; line-height: 1.7; }

.writer-section { padding-top: 25px; padding-bottom: 110px; }
.writer-banner { padding: 48px 55px; border: 1px solid #e2d9f1; border-radius: 24px; background: linear-gradient(120deg, #f8f5ff, #fff); display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.writer-banner p:not(.eyebrow) { color: var(--muted); font-size: 13px; max-width: 590px; margin-top: 10px; }

.site-footer { background: #171022; color: white; padding-top: 65px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 50px; padding-bottom: 55px; }
.footer-brand p { color: #9f96ad; margin-top: 12px; font-size: 12px; }
.footer-column { display: flex; flex-direction: column; gap: 10px; }
.footer-column h4 { font-size: 12px; color: #fff; margin-bottom: 8px; }
.footer-column a { color: #9f96ad; font-size: 12px; }
.footer-column a:hover { color: #cdb9fa; }
.footer-bottom { border-top: 1px solid #2a2236; padding: 20px 0; display: flex; justify-content: space-between; gap: 15px; color: #777080; font-size: 10px; }

@media (max-width: 900px) {
  .main-nav { gap: 16px; }
  .hero-grid { grid-template-columns: 1fr; padding: 80px 0 30px; }
  .hero-art { height: 470px; margin-top: -10px; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .hall-card { grid-template-columns: 1fr; }
  .hall-copy { padding: 45px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
@media (max-width: 700px) {
  .container { width: min(100% - 28px, 1160px); }
  .nav-wrap { height: 70px; }
  .brand { font-size: 27px; }
  .menu-toggle { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
  .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); }
  .main-nav { display: none; position: absolute; top: 70px; left: 14px; right: 14px; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px 12px; }
  .nav-write, .nav-login { text-align: center; }
  .hero { min-height: auto; }
  .hero-grid { min-height: auto; padding: 70px 0 0; }
  .hero h1 { font-size: 50px; letter-spacing: -2.3px; }
  .hero-description { font-size: 15px; }
  .hero-art { height: 410px; transform: scale(.86); transform-origin: top center; margin-bottom: -65px; }
  .book-stack { right: -15px; bottom: 50px; }
  .feather-art { right: 75px; top: 55px; }
  .card-read { left: -10px; top: 105px; }
  .card-write { right: -15px; bottom: 10px; }
  .trust-inner { flex-direction: column; gap: 8px; padding: 16px 0; }
  .section { padding: 75px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
  .story-grid, .feature-grid { grid-template-columns: 1fr; }
  .story-cover { aspect-ratio: 3 / 4; height: auto; }
  .hall-copy { padding: 35px 28px; }
  .hall-ranking { padding: 25px 18px 35px; }
  .writer-banner { padding: 34px 25px; flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

/* Story cards are full clickable reading links. */
.story-card-link { display:block; color:inherit; text-decoration:none; cursor:pointer; }
.story-card-link:focus-visible { outline:3px solid rgba(107,50,201,.3); outline-offset:5px; border-radius:20px; }
.story-card-link .story-meta h3 { transition:color .2s ease; }
.story-card-link:hover .story-meta h3 { color:var(--violet-700); }
.story-cover.cover-user { background:linear-gradient(145deg,#34205e,#7950bd); }
.story-cover.cover-fiction { background:linear-gradient(145deg,#1a2047,#57428d); }
.story-cover.cover-romance { background:linear-gradient(145deg,#54213d,#9a5a7b); }
.story-cover.cover-adventure { background:linear-gradient(145deg,#172e37,#496b67); }
.story-cover.cover-mystery { background:linear-gradient(145deg,#301452,#6f42a3); }
.story-cover.cover-poetry { background:linear-gradient(145deg,#3c2a2a,#76534b); }

/* CreatInk discovery interface */
.section-subtitle{max-width:620px;margin-top:9px;color:var(--muted);font-size:13px;line-height:1.7}
.discover-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 14px;padding-bottom:4px}
.discover-tab,.genre-pill{border:1px solid #e4deed;background:#fff;color:#6d6478;border-radius:999px;padding:10px 15px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:.2s ease}
.discover-tab:hover,.genre-pill:hover{border-color:#cdbde5;color:var(--violet-700);transform:translateY(-1px)}
.discover-tab.active{background:var(--violet-700);border-color:var(--violet-700);color:#fff;box-shadow:0 8px 20px rgba(79,31,161,.16)}
.genre-strip{display:flex;gap:7px;overflow-x:auto;padding:3px 1px 16px;scrollbar-width:thin}
.genre-pill{padding:8px 12px;font-size:10px;white-space:nowrap}
.genre-pill.active{background:#f1ebff;border-color:#d6c7ed;color:#5a279f}
.collection-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:30px 0 18px;padding-top:4px}
.collection-kicker{display:block;color:#8d8498;font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;margin-bottom:5px}
.collection-heading h3{font-family:var(--serif);font-size:25px}
.story-result-count{color:#918899;font-size:10px;font-weight:700}
.enhanced-story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.enhanced-card{position:relative;overflow:hidden}
.enhanced-card .story-cover{height:auto;aspect-ratio:3/4}
.story-metrics{display:flex;gap:14px;flex-wrap:wrap;padding:11px 1px 0;color:#8a8291;font-size:9px;border-top:1px solid #eeeaf3;margin-top:13px}
.story-metrics b{color:#5f5668;font-weight:800}
.empty-discover{padding:60px 20px;text-align:center;border:1px dashed #ddd5e9;border-radius:18px;color:#8b8391;font-size:12px;background:#fcfbff}
@media(max-width:900px){.enhanced-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.enhanced-story-grid{grid-template-columns:1fr}.enhanced-card .story-cover{height:auto;aspect-ratio:3/4}.collection-heading{align-items:flex-start;flex-direction:column;gap:5px}}

/* Profile photo rendering: consistent square crop, then circular display */
.profile-avatar-lg{overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat;}


/* Private writer drafts */
.profile-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px;}
.profile-section-head h2{margin-bottom:0;}
.profile-draft-list{display:grid;gap:12px;}
.profile-draft-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;}
.profile-draft-card h3{font-family:var(--serif);font-size:20px;margin:8px 0 5px;}
.profile-draft-card p{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 7px;}
.profile-draft-card small{color:#93899f;font-size:10px;}
.profile-draft-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.profile-draft-actions .btn{white-space:nowrap;}
.danger-link{border:0;background:none;color:#b33b4a;font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:6px;}
.danger-link:hover{text-decoration:underline;}
@media(max-width:700px){.profile-section-head,.profile-draft-card{align-items:flex-start;flex-direction:column;}.profile-draft-actions{width:100%;}.profile-draft-actions .btn{flex:1;text-align:center;}}

/* CreatInk search controls */
.discover-search-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 7px;}
.discover-search-box{min-height:52px;display:flex;align-items:center;gap:12px;padding:0 13px 0 16px;border:1px solid #e1d9ed;border-radius:15px;background:rgba(255,255,255,.96);box-shadow:0 8px 25px rgba(55,30,94,.045);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.discover-search-box:focus-within{border-color:#bda5e8;box-shadow:0 12px 30px rgba(84,42,153,.1);transform:translateY(-1px);}
.discover-search-icon{width:19px;height:19px;display:grid;place-items:center;flex:0 0 auto;color:#7350b3;}
.discover-search-icon svg{width:19px;height:19px;}
.discover-search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;}
.discover-search-box input::placeholder{color:#a39aaa;}
.search-clear{border:0;background:#f0eafb;color:#65409e;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1;cursor:pointer;padding:0;}
.search-clear:hover{background:#e4d9f6;}
.search-help{color:#91879c;font-size:10px;margin:0 0 17px 2px;}
.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;}
.nav-login{display:inline-flex!important;align-items:center;gap:9px;min-height:40px;white-space:nowrap;}
.nav-profile-photo{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;flex:0 0 27px;overflow:hidden;background:linear-gradient(145deg,#efe8ff,#d9c9f7);color:#5c2aa6;font-size:9px;font-weight:800;background-size:cover;background-position:center;}
.nav-profile-photo.has-image{background-color:#eee7ff;}
.nav-profile-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.nav-profile-chevron{width:13px;height:13px;color:#8b8296;}
@media(max-width:700px){.discover-search-grid{grid-template-columns:1fr;gap:9px;margin-top:18px}.discover-search-box{min-height:50px}.nav-login{justify-content:center;}}

/* Writer story management */
.profile-story{position:relative;}
.profile-story-main{min-width:0;}
.story-delete-btn{margin-top:16px;border:1px solid #f0d3d7;background:#fff7f8;color:#a93646;border-radius:10px;padding:9px 12px;font:inherit;font-size:10px;font-weight:800;cursor:pointer;transition:.2s ease;}
.story-delete-btn:hover{background:#fcecef;border-color:#e6b7bf;transform:translateY(-1px);}
.story-delete-btn:disabled{opacity:.6;cursor:wait;transform:none;}

/* Uploaded CreatInk covers: fixed 3:4 frame, full image visible, no crop/overlay. */
.story-cover-uploaded{background:#fff!important;padding:0!important;display:block!important;border:1px solid #e6e0ee;}
.story-cover-uploaded::before{display:none!important;}
.story-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#fff;}
.story-cover-number{position:absolute!important;top:14px!important;right:14px!important;z-index:2!important;color:#fff!important;text-shadow:0 1px 5px rgba(0,0,0,.45);font-size:11px!important;opacity:.9!important;}