.companion-body { margin:0; min-height:100vh; background:#0d0c11; color:#f8f4f7; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.companion-shell { min-height:100vh; display:flex; }
.companion-rail { width:220px; flex:0 0 220px; padding:28px 18px 24px; background:#111014; border-right:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; }
.companion-brand { display:flex; align-items:center; gap:10px; padding:0 8px; color:#f8f4f7; text-decoration:none; }
.companion-brand .brand-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(135deg,#cfac6b,#f1dfb4); color:#24180e; font-weight:900; }
.companion-brand b { display:block; font-size:18px; letter-spacing:.04em; }.companion-brand small { color:#a9a1ad; font-size:9px; letter-spacing:1.6px; }
.companion-nav { display:grid; gap:8px; margin-top:42px; }.companion-nav a,.companion-rail-foot a { color:#aaa1ad; text-decoration:none; border-radius:13px; padding:12px 13px; font-size:13px; transition:.2s; }.companion-nav a { display:flex; gap:10px; align-items:center; }.companion-nav a span { width:18px; text-align:center; color:#d4a962; }.companion-nav a:hover,.companion-nav a.active { color:#f8f4f7; background:rgba(212,169,98,.14); }.companion-rail-foot { margin-top:auto; display:grid; gap:3px; border-top:1px solid rgba(255,255,255,.07); padding-top:16px; }.companion-rail-foot a { font-size:11px; }
.companion-main { min-width:0; flex:1; padding:42px clamp(24px,5vw,76px) 64px; background:radial-gradient(75% 50% at 100% 0%,rgba(175,130,68,.16),transparent 64%),linear-gradient(180deg,#171511 0%,#0d0c11 62%); overflow:auto; }.companion-head { max-width:1120px; margin:0 auto 30px; display:flex; align-items:flex-end; justify-content:space-between; gap:22px; }.eyebrow { color:#d4a962; font-size:10px; letter-spacing:2.4px; font-weight:800; }.companion-head h1 { margin:8px 0 4px; font-size:34px; letter-spacing:-.03em; }.companion-head p { margin:0; color:#aaa1ad; font-size:13px; }.head-actions { display:flex; align-items:center; gap:10px; }.sync-state { color:#9fcbb2; font-size:11px; }.head-actions .btn { min-height:40px; padding:0 15px; border-radius:12px; color:#e8d7b6; border-color:rgba(212,169,98,.33); background:rgba(212,169,98,.08); }
.companion-layout { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.75fr); gap:18px; align-items:start; }.companion-primary,.companion-secondary { display:grid; gap:18px; }.selected-card,.section-block,.side-card { border:1px solid rgba(212,169,98,.19); background:rgba(28,24,20,.86); border-radius:24px; box-shadow:0 18px 52px rgba(0,0,0,.22); }.selected-card { min-height:245px; position:relative; overflow:hidden; }.selected-card::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,12,17,.96) 0%,rgba(13,12,17,.6) 45%,rgba(13,12,17,.12) 100%); pointer-events:none; }.selected-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; opacity:.76; }.selected-content { position:relative; z-index:1; padding:28px; max-width:610px; }.selected-label { color:#d4a962; font-size:10px; letter-spacing:1.5px; font-weight:800; }.selected-content h2 { margin:6px 0 3px; font-size:29px; }.selected-tag { color:#c1b8c0; font-size:12px; }.selected-copy { color:#aaa1ad; font-size:12px; line-height:1.65; margin:14px 0 18px; max-width:440px; }.selected-actions { display:flex; gap:9px; flex-wrap:wrap; }.selected-actions .btn { min-height:39px; padding:0 16px; border-radius:12px; }.gold-btn { background:linear-gradient(135deg,#b6814d,#e6c28e); color:#24180e; box-shadow:0 8px 22px rgba(177,126,70,.22); }.gold-btn:hover { transform:translateY(-1px); }.stage-line { display:flex; align-items:center; gap:9px; margin-top:16px; color:#eee5d8; font-size:12px; }.stage-line strong { color:#f0d8a8; }.progress { height:6px; flex:1; max-width:220px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b6814d,#f0d8a8); }
.section-block { padding:22px; }.block-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }.block-kicker { color:#d4a962; font-size:10px; letter-spacing:1.7px; font-weight:800; }.block-title { margin:4px 0 0; font-size:19px; }.block-sub { color:#aaa1ad; font-size:11px; margin-top:4px; }.block-note { color:#c8bdc5; font-size:13px; line-height:1.7; margin:12px 0 17px; }.mission-pill { color:#e8d7b6; background:rgba(212,169,98,.12); border:1px solid rgba(212,169,98,.24); border-radius:999px; padding:7px 10px; font-size:10px; white-space:nowrap; }.block-actions { display:flex; align-items:center; gap:12px; }.block-actions .btn { min-height:39px; border-radius:12px; padding:0 15px; }.muted { color:#aaa1ad; font-size:11px; }.checkin-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }.checkin-day { min-height:83px; border:1px solid rgba(255,255,255,.09); border-radius:15px; padding:10px 8px; color:#aaa1ad; background:rgba(255,255,255,.025); cursor:pointer; text-align:left; transition:.18s; }.checkin-day strong { display:block; font-size:10px; letter-spacing:1px; }.checkin-day span { display:block; margin-top:12px; color:#e8d7b6; font-size:12px; font-weight:800; }.checkin-day.current { border-color:#d4a962; background:rgba(212,169,98,.12); }.checkin-day.claimed { background:rgba(159,203,178,.1); border-color:rgba(159,203,178,.4); color:#9fcbb2; }.checkin-day:disabled { cursor:default; opacity:.55; }
.side-card { padding:20px; }.side-card h3 { margin:4px 0 4px; font-size:17px; }.side-card .side-sub { color:#aaa1ad; font-size:11px; margin-bottom:14px; }.chapter-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid rgba(255,255,255,.07); }.chapter-row:first-of-type { border-top:0; }.chapter-mark { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; background:rgba(212,169,98,.13); color:#e8d7b6; font-size:11px; }.chapter-copy { min-width:0; flex:1; }.chapter-copy b { display:block; color:#eee5d8; font-size:12px; }.chapter-copy span { color:#aaa1ad; font-size:10px; }.chapter-status { color:#9fcbb2; font-size:10px; }.mini-item { padding:10px 0; border-top:1px solid rgba(255,255,255,.07); }.mini-item:first-of-type { border-top:0; }.mini-item b { display:block; color:#eee5d8; font-size:12px; }.mini-item span { display:block; color:#aaa1ad; font-size:10px; line-height:1.5; margin-top:2px; }.link-row { display:flex; gap:8px; align-items:center; color:#cbbba1; font-size:11px; text-decoration:none; padding:8px 0; }.link-row:hover { color:#f0d8a8; }.plan-card { background:linear-gradient(145deg,rgba(212,169,98,.14),rgba(28,24,20,.88)); }.plan-copy { color:#c8bdc5; font-size:11px; line-height:1.6; margin:10px 0 14px; }.plan-status { display:inline-flex; align-items:center; gap:6px; color:#d4a962; font-size:11px; }.plan-status::before { content:""; width:6px; height:6px; border-radius:50%; background:#d4a962; }.plan-cta { width:100%; min-height:38px; border:1px solid rgba(212,169,98,.3); border-radius:11px; background:transparent; color:#e8d7b6; cursor:not-allowed; margin-top:13px; font-size:11px; }
.wallet-line { margin-top:7px; color:#aaa1ad; font-size:10px; text-align:right; }.companion-toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:11px 16px; border-radius:12px; background:#e8d7b6; color:#24180e; font-size:12px; box-shadow:0 10px 28px rgba(0,0,0,.35); transition:.25s; }.companion-toast.show { opacity:1; transform:translate(-50%,0); }
.login-modal { position:fixed; inset:0; z-index:20; display:none; place-items:center; padding:20px; background:rgba(0,0,0,.66); backdrop-filter:blur(8px); }.login-modal.open { display:grid; }.login-card { width:min(100%,390px); padding:24px; border:1px solid rgba(212,169,98,.28); border-radius:22px; background:#1b1815; box-shadow:0 22px 70px rgba(0,0,0,.5); }.login-head { display:flex; justify-content:space-between; align-items:center; }.login-title { color:#f0d8a8; font-size:19px; font-weight:900; }.login-close { border:0; background:transparent; color:#aaa1ad; font-size:25px; cursor:pointer; }.login-sub { color:#aaa1ad; font-size:12px; line-height:1.6; margin:9px 0 16px; }.login-card input { width:100%; min-height:44px; margin-top:9px; padding:0 13px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#11100e; color:#f8f4f7; outline:none; }.login-card input:focus { border-color:rgba(212,169,98,.62); box-shadow:0 0 0 3px rgba(212,169,98,.1); }.login-msg { min-height:19px; color:#e5a4a4; font-size:11px; margin-top:8px; }.login-actions { display:flex; gap:9px; margin-top:8px; }.login-actions .btn { flex:1; min-height:42px; border-radius:12px; }.login-actions .btn:not(.btn-primary) { color:#e8d7b6; border:1px solid rgba(212,169,98,.3); background:transparent; }
@media (max-width:900px) { .companion-rail { width:70px; flex-basis:70px; padding:18px 8px; }.companion-brand { justify-content:center; padding:0; }.companion-brand>span:not(.brand-mark) { display:none; }.companion-nav a { justify-content:center; padding:12px 6px; }.companion-nav a span { font-size:18px; }.companion-nav a:not(.active) { color:#aaa1ad; }.companion-nav a { font-size:0; }.companion-rail-foot a { font-size:0; text-align:center; }.companion-main { padding:30px 18px 48px; }.companion-layout { grid-template-columns:1fr; }.companion-secondary { grid-template-columns:repeat(2,minmax(0,1fr)); }.plan-card { grid-column:span 2; } }
@media (max-width:580px) { .companion-head { align-items:flex-start; flex-direction:column; }.head-actions { width:100%; justify-content:space-between; }.companion-head h1 { font-size:28px; }.selected-content { padding:22px; }.selected-card { min-height:300px; }.selected-card::after { background:linear-gradient(180deg,rgba(13,12,17,.2),rgba(13,12,17,.96) 82%); }.selected-content { padding-top:125px; }.checkin-grid { gap:5px; }.checkin-day { padding:8px 4px; min-height:74px; }.checkin-day span { font-size:10px; }.companion-secondary { grid-template-columns:1fr; }.plan-card { grid-column:auto; } }
.cards-mini-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }.mini-card { display:block; position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:#13110f; }.mini-card img { width:100%; height:100%; object-fit:cover; opacity:.78; }.mini-card span { position:absolute; left:6px; right:6px; bottom:5px; color:#f8f4f7; font-size:9px; font-weight:800; text-shadow:0 1px 4px #000; }.mini-card.locked img { filter:grayscale(.7) brightness(.45); }.mini-card.locked span { color:#c1b8c0; }
.archive-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;margin-top:14px;border:1px solid rgba(232,215,182,.2)}
.archive-caption{display:block;color:var(--muted);font-size:11px;text-align:center;margin:7px 0 12px}.archive-list{display:grid;gap:8px}.archive-locked{opacity:.48;filter:saturate(.45)}