:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #06111e;
  --panel: #0d2033;
  --line: rgba(255,255,255,.1);
  --text: #f8fafc;
  --muted: #91a5ba;
  --gold: #f5c45b;
  --mint: #5ee7bb;
  --rose: #ff7c9c;
  --cyan: #5dd9f6;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100svh; margin: 0; color: var(--text); background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 2%, rgba(32,187,188,.16), transparent 29%), radial-gradient(circle at 91% 48%, rgba(231,111,81,.12), transparent 31%), linear-gradient(150deg,#06111e,#071827 48%,#10172a); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.fanpage-shell { position: relative; width: min(1320px,calc(100% - 36px)); margin: auto; padding: max(18px,env(safe-area-inset-top)) 0 max(24px,env(safe-area-inset-bottom)); }
.topbar { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand img { border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.brand span { display: grid; gap: 2px; }.brand strong { font-size: 16px; }.brand small { color: var(--muted); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.sync-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.sync-pill i { width: 8px; height: 8px; border-radius: 50%; background: #f5c45b; box-shadow: 0 0 15px currentColor; }
.sync-pill.online i { color: #50e3ad; background: #50e3ad; }.sync-pill.offline i { color: #ff7c9c; background: #ff7c9c; }
.home-button,.refresh-button { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; color: #dce9f5; background: rgba(255,255,255,.055); text-decoration: none; }
main { padding-top: 22px; }
.fanpage-hero { position: relative; min-height: 330px; display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 34px; overflow: hidden; background: linear-gradient(125deg,rgba(8,37,48,.98),rgba(19,28,55,.96) 60%,rgba(56,30,52,.9)); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.hero-copy { position: relative; z-index: 2; padding: 46px 52px; }
.eyebrow { margin: 0 0 9px; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.fanpage-hero h1 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(38px,5.5vw,69px); line-height: 1.02; letter-spacing: -.045em; }
.fanpage-hero h1 em { color: #ffe3a7; font-weight: 500; }
.hero-copy > p:nth-of-type(2) { max-width: 680px; margin: 17px 0 0; color: #b9cad8; line-height: 1.65; }
.safety-note { width: fit-content; max-width: 620px; display: grid; grid-template-columns: auto auto; gap: 1px 8px; align-items: center; margin-top: 22px; padding: 11px 15px; border: 1px solid rgba(94,231,187,.18); border-radius: 15px; color: #bdffea; background: rgba(37,166,131,.1); }
.safety-note > span { grid-row: 1/3; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #061a16; background: #5ee7bb; font-weight: 900; }
.safety-note strong { font-size: 12px; }.safety-note small { color: #90beaF; font-size: 10px; }
.hero-pattern { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(30deg,transparent 48%,rgba(255,255,255,.1) 49%,rgba(255,255,255,.1) 51%,transparent 52%); background-size: 44px 76px; mask-image: linear-gradient(90deg,transparent 30%,black); }
.hero-pattern i { position: absolute; border: 1px solid rgba(245,196,91,.7); border-radius: 50%; }
.hero-pattern i:nth-child(1) { width: 320px; height: 320px; right: 32px; top: 4px; }.hero-pattern i:nth-child(2) { width: 250px; height: 250px; right: 67px; top: 39px; }.hero-pattern i:nth-child(3) { width: 180px; height: 180px; right: 102px; top: 74px; }.hero-pattern i:nth-child(4) { width: 110px; height: 110px; right: 137px; top: 109px; }
.hero-orbit { position: relative; z-index: 1; width: 220px; height: 220px; display: grid; place-items: center; justify-self: center; border: 1px solid rgba(245,196,91,.24); border-radius: 50%; background: radial-gradient(circle,rgba(245,196,91,.11),transparent 64%); }
.hero-orbit strong { font-family: Georgia,serif; color: #ffe3a7; font-size: 86px; line-height: 1; }.hero-orbit small { position: absolute; bottom: 45px; color: #aab9c9; letter-spacing: .12em; }
.hero-orbit > span { position: absolute; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 50%; background: #10283a; font-size: 21px; }
.hero-orbit > span:nth-child(1) { top: -8px; }.hero-orbit > span:nth-child(2) { right: -6px; bottom: 33px; }.hero-orbit > span:nth-child(3) { left: -6px; bottom: 33px; }
.view-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 18px 0 28px; padding: 7px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.035); }
.view-tabs button { min-height: 52px; border: 0; border-radius: 14px; color: #8fa5ba; background: transparent; font-weight: 750; }
.view-tabs button span { margin-right: 5px; }.view-tabs button.active { color: #071825; background: linear-gradient(135deg,#ffe19a,#f5b73f); box-shadow: 0 10px 26px rgba(245,183,63,.14); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 17px; }
.section-heading h2,.topic-guide h2 { margin: 0; font-size: clamp(25px,3vw,38px); letter-spacing: -.04em; }.section-heading > div > p:last-child,.topic-guide > div > p:last-child { max-width: 720px; margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.posts-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: start; }
.post-card { --accent:#5dd9f6; position: relative; min-width: 0; border: 1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius: 27px; background: linear-gradient(165deg,color-mix(in srgb,var(--accent) 7%,#102235),#0a1728 72%); box-shadow: 0 22px 65px rgba(0,0,0,.2); overflow: hidden; }
.post-card::before { content:""; position:absolute; width:180px; height:180px; right:-90px; top:-100px; border-radius:50%; background:color-mix(in srgb,var(--accent) 15%,transparent); }
.post-cover { position: relative; min-height: 210px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg,color-mix(in srgb,var(--accent) 16%,#0c1c2c),#121931); }
.post-cover img { width: 100%; height: 100%; min-height: 210px; max-height: 330px; object-fit: cover; }
.post-cover-placeholder { display: grid; place-items: center; gap: 7px; color: color-mix(in srgb,var(--accent) 75%,white); }.post-cover-placeholder span { font-size: 42px; }.post-cover-placeholder small { color: #8fa3b6; }
.post-body { position: relative; padding: 20px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; }
.topic-chip,.status-chip,.word-chip { padding: 6px 9px; border: 1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius: 999px; color: color-mix(in srgb,var(--accent) 73%,white); background: color-mix(in srgb,var(--accent) 8%,transparent); font-size: 9px; font-weight: 850; letter-spacing: .05em; }
.status-chip { margin-left: auto; border-color: var(--line); color: #aebed0; background: rgba(255,255,255,.045); }.status-chip.published { color:#97f5d2; }.status-chip.error { color:#ff9ab1; }
.post-card h3 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: 25px; line-height: 1.18; letter-spacing: -.025em; }
.post-hook { margin: 11px 0 0; color: #d3dce6; font-weight: 650; line-height: 1.55; }
.post-content { position: relative; max-height: 245px; margin: 15px 0 0; padding: 14px 11px 14px 15px; border-left: 2px solid color-mix(in srgb,var(--accent) 40%,transparent); color: #aebecd; background: rgba(255,255,255,.025); overflow: auto; overscroll-behavior: contain; font-family: Georgia,"Times New Roman",serif; font-size: 15px; line-height: 1.7; white-space: pre-wrap; }
.post-content.expanded { max-height: none; }.expand-button { width: 100%; min-height: 38px; border: 0; color: #8fa6ba; background: transparent; font-size: 11px; }
.hashtags { margin: 12px 0 0; color: color-mix(in srgb,var(--accent) 68%,white); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.source-box { margin-top: 13px; padding: 11px; border: 1px solid rgba(94,231,187,.12); border-radius: 13px; color: #a5bbcb; background: rgba(31,150,115,.06); font-size: 10px; line-height: 1.5; }.source-box strong { display:block; margin-bottom:4px; color:#9bf2d2; }.source-box a { color:#79dff4; overflow-wrap:anywhere; }
.post-error { margin: 12px 0 0; padding: 10px; border: 1px solid rgba(255,124,156,.18); border-radius: 12px; color: #ffb1c3; background: rgba(255,124,156,.08); font-size: 11px; }
.post-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.post-actions button { min-height: 43px; border: 1px solid var(--line); border-radius: 13px; color: #d8e4ef; background: rgba(255,255,255,.05); font-weight: 750; }.post-actions button:hover { border-color: color-mix(in srgb,var(--accent) 45%,transparent); }.post-actions .image-action { color:#061720; border:0; background:linear-gradient(135deg,#7ce8fb,#4ac8ef); }.post-actions .publish-action { color:#061813; border:0; background:linear-gradient(135deg,#88f0c8,#4ed6a4); }.post-actions button:disabled { opacity:.42; cursor:not-allowed; }
.post-date { margin: 15px 0 0; color: #71869a; font-size: 10px; text-align: right; }
.empty-state { grid-column:1/-1; min-height:270px; display:grid; place-items:center; align-content:center; gap:8px; padding:30px; border:1px dashed rgba(255,255,255,.14); border-radius:27px; color:var(--muted); text-align:center; }.empty-state span { font-size:44px; }.empty-state strong { color:#e4edf6; font-size:22px; }.empty-state p { max-width:470px; margin:0; line-height:1.55; }
.loading { min-height: 470px; padding: 22px; }.loading div,.loading span { display:block; border-radius:12px; background:linear-gradient(100deg,rgba(255,255,255,.035),rgba(255,255,255,.09),rgba(255,255,255,.035)); background-size:220% 100%; animation:shimmer 1.5s infinite; }.loading div { height:180px; }.loading span { height:18px; margin-top:18px; }.loading span:nth-child(3){width:75%;}.loading span:nth-child(4){height:100px;} @keyframes shimmer{to{background-position:-220% 0}}
.topic-guide { display: grid; grid-template-columns: .78fr 1.22fr; gap: 30px; align-items: center; margin-top: 26px; padding: 27px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.035); }
.topic-cloud { display:flex; flex-wrap:wrap; gap:8px; }.topic-cloud span { padding:8px 11px; border:1px solid rgba(245,196,91,.13); border-radius:999px; color:#cbbf9d; background:rgba(245,196,91,.05); font-size:11px; }
footer { padding: 30px 4px 8px; color:#62778b; text-align:center; font-size:11px; }
.modal { width:min(540px,calc(100% - 28px)); max-height:calc(100svh - 30px); padding:0; border:1px solid var(--line); border-radius:25px; color:var(--text); background:#0d1f31; box-shadow:0 30px 110px rgba(0,0,0,.7); overflow:auto; }.modal::backdrop{background:rgba(1,7,15,.82);backdrop-filter:blur(8px)}
.modal-card { position:relative; padding:28px; }.modal-card h2{margin:0;font-size:28px;letter-spacing:-.035em}.modal-card>p:not(.eyebrow):not(.form-error){color:var(--muted);line-height:1.55}.modal-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border:0;border-radius:12px;color:#a9bacb;background:rgba(255,255,255,.06);font-size:24px}.topic-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.topic-choice{min-height:48px;padding:9px 11px;border:1px solid var(--line);border-radius:13px;color:#c7d5e3;background:rgba(255,255,255,.04);text-align:left}.topic-choice.selected{border-color:rgba(245,196,91,.55);color:#ffe3a7;background:rgba(245,196,91,.09)}
.field{display:grid;gap:7px;margin-top:16px;color:#cbd7e4;font-size:12px}.field input{width:100%;min-height:50px;padding:0 14px;border:1px solid var(--line);border-radius:13px;outline:none;color:var(--text);background:rgba(255,255,255,.05);color-scheme:dark}.field input:focus{border-color:rgba(93,217,246,.65);box-shadow:0 0 0 3px rgba(93,217,246,.1)}.primary-button{width:100%;min-height:50px;margin-top:12px;border:0;border-radius:14px;color:#161204;background:linear-gradient(135deg,#ffe39e,#f4b43d);font-weight:900}.primary-button:disabled{opacity:.5;cursor:wait}.form-error{min-height:18px;margin:10px 0 0;color:#ffa2b7;font-size:11px}.toast{position:fixed;z-index:30;left:50%;bottom:max(22px,env(safe-area-inset-bottom));max-width:calc(100% - 30px);padding:12px 17px;border:1px solid var(--line);border-radius:14px;color:#f4f8fb;background:#173049;box-shadow:0 18px 50px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,15px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}
@media(max-width:980px){.posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fanpage-hero{grid-template-columns:1fr .45fr}.hero-copy{padding:40px}.topic-guide{grid-template-columns:1fr}.posts-grid>.post-card:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:680px){.fanpage-shell{width:min(100% - 20px,580px)}.topbar{min-height:54px}.sync-pill span{display:none}.home-button{padding:0 11px;font-size:12px}main{padding-top:12px}.fanpage-hero{min-height:350px;display:block;border-radius:25px}.hero-copy{padding:31px 24px 120px}.fanpage-hero h1{font-size:39px}.hero-copy>p:nth-of-type(2){font-size:13px}.safety-note{align-items:start}.hero-orbit{position:absolute;right:-25px;bottom:-64px;width:195px;height:195px;opacity:.8}.hero-orbit>span{display:none}.hero-orbit strong{font-size:72px}.view-tabs{grid-template-columns:1fr 1fr;margin-bottom:23px}.view-tabs button{font-size:12px}.section-heading{align-items:start}.refresh-button span{display:none}.posts-grid{grid-template-columns:1fr}.posts-grid>.post-card:last-child:nth-child(odd){grid-column:auto}.post-card{border-radius:23px}.topic-guide{padding:22px 18px}.topic-choices{grid-template-columns:1fr}.modal-card{padding:26px 20px}.post-actions button{font-size:12px}}
@media(max-width:390px){.brand small{display:none}.brand img{width:40px;height:40px}.post-actions{grid-template-columns:1fr}.section-heading h2{font-size:26px}}
@media(display-mode:standalone){.fanpage-shell{padding-top:max(12px,env(safe-area-inset-top))}.topbar{position:sticky;z-index:12;top:0;padding:6px 0;background:rgba(6,17,30,.86);backdrop-filter:blur(16px)}}