.hub-page { --hub-accent: #d8cab0; }
.hub-shell { position: relative; width: min(1360px, calc(100% - 56px)); margin: 0 auto; padding: 24px 0 72px; }
.hub-top { display: flex; align-items: center; gap: 20px; min-height: 54px; margin-bottom: 24px; }
.hub-top form { margin-left: auto; }
.hub-access { color: var(--muted); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; }
.hub-page a { color: var(--text); text-underline-offset: 5px; }
.hub-nav { display: flex; gap: 8px 22px; flex-wrap: wrap; padding: 20px 0; border-block: 1px solid var(--edge); margin-bottom: 36px; }
.hub-nav a { text-decoration: none; color: var(--muted); padding: 8px 0; }
.hub-nav a:hover, .hub-nav a[aria-current] { color: var(--text); box-shadow: 0 1px var(--hub-accent); }
.hub-heading { margin: 28px 0 36px; }
.hub-page h1 { font-size: clamp(2.4rem, 5vw, 4.7rem); max-width: 17ch; overflow-wrap: anywhere; }
.hub-page h2, .hub-page h3 { font-family: var(--font-display); font-weight: 500; }
.hub-page h2 { font-size: 1.7rem; }
.hub-page h3 { font-size: 1.35rem; }
.hub-page p { line-height: 1.65; }
.hub-muted { color: var(--muted); }
.hub-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 32px; align-items: start; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 22px; margin: 28px 0; }
.hub-card { position: relative; min-width: 0; border: 1px solid var(--edge); background: linear-gradient(145deg, #ffffff08, #ffffff02 60%, #00000030); padding: 26px; overflow-wrap: anywhere; }
.hub-card h2, .hub-card h3 { margin-top: 0; }
.hub-list .hub-card { margin: 0 0 18px; }
.hub-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hub-count { color: var(--muted); font-family: var(--font-body); font-size: .9rem; }
.hub-card.is-editing { border-color: var(--hub-accent); }
.hub-form { display: grid; gap: 18px; }
.hub-form label, .hub-upload label, .hub-feedback label { display: grid; gap: 8px; font-size: .95rem; line-height: 1.5; }
.hub-page input:not([type=checkbox]), .hub-page textarea, .hub-page select { width: 100%; min-width: 0; background: #0d0d0d; color: var(--text); border: 1px solid #ffffff35; padding: 12px; font: inherit; border-radius: 2px; color-scheme: dark; }
.hub-page textarea { resize: vertical; }
.hub-page input:focus-visible, .hub-page textarea:focus-visible, .hub-page select:focus-visible, .hub-page a:focus-visible, .hub-page button:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 4px; }
.hub-form .hub-check { display: flex; align-items: start; gap: 12px; }
.hub-check input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--hub-accent); }
.hub-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hub-actions button { padding-inline: 14px; }
.hub-danger { color: #f3b7ae !important; }
.hub-tag { display: inline-block; color: var(--hub-accent); border: 1px solid #d8cab040; padding: 5px 9px; font-size: .78rem; letter-spacing: .04em; margin-bottom: 12px; }
.hub-link { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0; }
.hub-tile { text-decoration: none; transition: border-color 150ms ease; }
.hub-tile:hover { border-color: var(--hub-accent); }
.hub-empty { color: var(--muted); padding: 40px 0; line-height: 1.7; }
.hub-feedback { color: #d6e7cc; margin: 20px 0; overflow-wrap: anywhere; }
.hub-feedback:empty { display: none; }
.hub-feedback.is-error { color: #ffb4a2; }
.hub-feedback input { margin-bottom: 12px; }
.hub-upload { border-top: 1px solid var(--edge); margin-top: 28px; padding-top: 26px; }
.hub-upload button { margin-top: 14px; }
.hub-requests { margin-block: 42px; }
.hub-gate { display: grid; justify-items: center; align-content: start; gap: 24px; text-align: center; padding: 10vh 0; }
.hub-gate .auth-card { text-align: left; }
.hub-prose { white-space: normal; line-height: 1.8; overflow-wrap: anywhere; }
.hub-cover { display: block; width: 100%; height: 240px; object-fit: contain; margin-bottom: 24px; }
.hub-rating { font: 2.3rem var(--font-display); display: inline-block; margin-bottom: 12px; }
.rating-S { border-color: #cfb478; background: linear-gradient(140deg, #b898391e, #16130a33 65%, #ffffff04); box-shadow: inset 0 0 30px #ae8a2610; }
.rating-S .hub-rating { color: #ebcc88; font-size: 3rem; }
.rating-C .hub-rating, .hub-rating.rating-C { color: #ef8c8c; }
.hub-sharing { margin-top: 28px; }
.personal-page { --hub-accent: #cbd3d8; background: radial-gradient(ellipse at 50% 0%, #ffffff10, transparent 65%), #07090a; }
.personal-rose { --hub-accent: #efbcc8; background: radial-gradient(ellipse at 50% 0%, #55223888, transparent 65%), #160b10; }
.personal-forest { --hub-accent: #c2d7b7; background: radial-gradient(ellipse at 50% 0%, #37513277, transparent 65%), #0a110c; }
.personal-sun { --hub-accent: #e4c992; background: radial-gradient(ellipse at 50% 0%, #72532655, transparent 65%), #18140c; }
.personal-page .hub-top { display: none; }
.personal-story { max-width: 760px; margin: 8vh auto; text-align: center; }
.personal-story h1 { max-width: none; line-height: 1.05; margin: 28px 0 40px; color: var(--hub-accent); }
.personal-recipient { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; }
.personal-story .hub-prose { font-size: 1.15rem; line-height: 1.95; text-align: left; }
.personal-story form { margin-top: 40px; }
.personal-image { max-width: 100%; max-height: 600px; object-fit: contain; margin-bottom: 36px; }
.hub-home-links { position: absolute; top: 28px; left: 0; display: flex; gap: 20px; padding: 14px 0; }
.hub-home-links a { color: var(--muted); text-decoration: none; }
.page-main .page-shell { padding-top: 80px; }
.page-main .sword-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.page-main .sword-title { font-size: clamp(1.15rem, 1.7vw, 1.65rem); }
.page-main .sword-visual { width: 100%; height: 480px; padding: 22px 0; display: flex; justify-content: center; align-items: center; }
.page-main .sword-image { width: auto; height: 100%; max-width: none; max-height: none; flex-shrink: 0; object-fit: contain; transform: none; position: relative; inset: auto; }
.page-main .sword-link { min-height: 640px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; }
.page-main .sword-title, .page-main .sword-description { max-width: 100%; overflow-wrap: anywhere; }
.calendar-year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.calendar-year-month { padding: 16px; border: 1px solid var(--edge); }
.calendar-year-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-year-days button { min-height: 36px; padding: 0; background: transparent; color: var(--text); border-color: transparent; }
.calendar-year-days button.has-events { border-color: var(--gold-soft); background: #ffffff12; }
@media (max-width: 1100px) { .page-main .sword-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calendar-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .hub-workspace { grid-template-columns: 1fr; } .hub-editor { order: -1; } .hub-shell { width: calc(100% - 32px); } .hub-card { padding: 20px; } }
@media (max-width: 540px) { .hub-top { flex-wrap: wrap; gap: 12px; } .hub-access { display: none; } .hub-nav { gap: 4px 16px; } .hub-page input, .hub-page select, .hub-page textarea { font-size: 16px; } .page-main .sword-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-main .sword-visual { height: 340px; } .page-main .sword-link { min-height: 490px; } .hub-home-links { top: 18px; gap: 12px; font-size: .8rem; } .calendar-year { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hub-page *, .page-main * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }