:root { --ink:#38202d; --muted:#8b6e7d; --line:#f0dfe6; --surface:#fff; --soft:#fff7fa; --brand:#e55d94; --brand-deep:#c84278; --radius:18px; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; font-family:ui-rounded,"SF Pro Rounded","PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:radial-gradient(circle at 12% 0,#ffe6f0 0,transparent 34%),linear-gradient(145deg,#fff9fc 0%,#fff8fa 42%,#fff0f6 100%); }
.app-shell { width:min(1180px,100%); margin:0 auto; padding:28px 24px 72px; }
.page-content > h1 { margin:26px 0 20px; font-size:clamp(27px,4vw,38px); letter-spacing:-.045em; color:#17264a; }
nav { position:sticky; top:12px; z-index:10; display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:10px 13px; border:1px solid rgba(230,234,240,.92); border-radius:15px; background:rgba(255,255,255,.84); box-shadow:0 8px 30px rgba(28,45,91,.08); backdrop-filter:blur(12px); color:var(--muted); font-size:14px; }
nav a { padding:7px 9px; border-radius:9px; color:#795564; text-decoration:none; white-space:nowrap; } nav a:hover { color:var(--brand); background:#ffeaf2; text-decoration:none; }
.insight-hub { margin:-7px 0 22px !important; padding:17px !important; overflow:hidden; }.hub-heading { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:0 0 13px; }.hub-heading span { color:#26375d; font-size:16px; font-weight:900; }.hub-heading small { color:#78849b; }.hub-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.hub-action { display:flex; align-items:center; gap:10px; min-height:72px; padding:11px 12px; border:1px solid #e5e9f4; border-radius:14px; background:linear-gradient(145deg,#fff,#f8faff); color:#30405f; transition:.16s ease; }.hub-action:hover { transform:translateY(-2px); color:#2f42c4; border-color:#cbd1ff; text-decoration:none; box-shadow:0 8px 16px #4c5fde1c; }.hub-action b { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; background:#e9ebff; color:#5263e8; font-size:22px; }.hub-action span { display:grid; gap:3px; font-size:14px; font-weight:850; }.hub-action small { color:#768298; font-size:11px; font-weight:600; line-height:1.3; }.hub-action.capsule b { color:#985bd8; background:#f2e9ff; }.hub-action.geometry b { color:#dd6d4c; background:#fff0ea; }.hub-action.insights b { color:#da568e; background:#ffeaf3; }.hub-action.today b { color:#2c9b8d; background:#e5faf7; }.hub-action.heatmap b { color:#217fbd; background:#e5f4ff; }
body:has(#hour-chart) .hub-action.report, body:has(#capsule-trend) .hub-action.capsule, body:has(.page-content h1) .hub-action.geometry[href="/geometry"]:hover, body:has(#emotion-wordcloud) .hub-action.insights, body:has(#heatmap) .hub-action.heatmap { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,#fff); }
.hub-actions { grid-template-columns:1fr !important; }.hub-action { min-height:76px; padding:13px 15px; gap:13px; }.hub-action b { flex-basis:42px; width:42px; height:42px; font-size:23px; }.hub-action span { font-size:15px; }.hub-action small { font-size:12px; }

/* Home cover inspired by the paired-avatar layout: quiet, personal, and compact. */
.relationship-hero { position:relative; display:grid; grid-template-columns:1fr minmax(190px,1.25fr) 1fr; align-items:center; gap:20px; min-height:218px; margin:0 0 18px; padding:20px 7%; overflow:hidden; border:1px solid #eed9e4; border-radius:25px; background:radial-gradient(circle at 50% 40%,#fff 0 25%,transparent 26%),radial-gradient(circle at 18% 80%,#e6f6ff 0,transparent 34%),radial-gradient(circle at 84% 15%,#ffe6f0 0,transparent 39%),linear-gradient(135deg,#fffdfd,#fff4f8); box-shadow:0 13px 30px #a6587915; }
.relationship-hero::before,.relationship-hero::after { content:"✦"; position:absolute; color:#f1a2c3; font-size:23px; opacity:.7; }.relationship-hero::before { top:24px; left:11%; }.relationship-hero::after { right:11%; bottom:22px; color:#8eb9df; }
.relationship-hero__person { position:relative; z-index:1; display:grid; justify-items:center; gap:8px; color:#75465d; font-weight:900; }.relationship-hero__person img { width:104px; height:104px; object-fit:cover; border:5px solid #fff; border-radius:50%; box-shadow:0 8px 18px #6d53612b; }.relationship-hero__person--female img { outline:2px solid #f4b6cf; }.relationship-hero__person--female span { color:#d4427e; }.relationship-hero__person--male img { outline:2px solid #a8c8e9; }.relationship-hero__person--male span { color:#245fca; }
.relationship-hero__middle { position:relative; z-index:1; display:grid; justify-items:center; gap:4px; text-align:center; color:#704055; }.relationship-hero__middle small { color:#ae6687; font-size:12px; letter-spacing:.16em; }.relationship-hero__middle b { display:grid; place-items:center; width:48px; height:48px; margin:2px 0; border-radius:50%; background:linear-gradient(145deg,#f587b3,#dc5b91); color:#fff; font-size:24px; box-shadow:0 7px 15px #d4517f3b; }.relationship-hero__middle strong { color:#513042; font-size:clamp(18px,2.5vw,25px); letter-spacing:.08em; }.relationship-hero__middle em { color:#987082; font-size:12px; font-style:normal; }
html[data-theme="dark"] .relationship-hero { border-color:#614253; background:radial-gradient(circle at 50% 40%,#3b2939 0 25%,transparent 26%),linear-gradient(135deg,#2d202e,#241923); }.relationship-hero__middle strong { color:#f4dce7; }.relationship-hero__middle em { color:#d4afbe; }
@media (max-width:620px) { .relationship-hero { grid-template-columns:1fr 1.1fr 1fr; gap:7px; min-height:174px; padding:15px 7px; border-radius:20px; }.relationship-hero__person img { width:70px; height:70px; border-width:4px; }.relationship-hero__person { gap:5px; font-size:13px; }.relationship-hero__middle b { width:38px; height:38px; font-size:19px; }.relationship-hero__middle strong { font-size:15px; letter-spacing:.03em; }.relationship-hero__middle em { max-width:120px; font-size:10px; line-height:1.4; }.relationship-hero__middle small { font-size:10px; } }
a { color:var(--brand); text-decoration:none; font-weight:600; } a:hover { color:var(--brand-deep); text-decoration:underline; }
section, form, table { background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 7px 25px rgba(31,43,72,.045); }
section, form { padding:22px; margin:16px 0; } section > h2 { margin:0 0 10px; font-size:20px; letter-spacing:-.025em; }
input, select, button { max-width:100%; min-height:42px; padding:9px 12px; border:1px solid #d8dfeb; border-radius:11px; background:#fff; color:var(--ink); font:inherit; } input:focus,select:focus { outline:3px solid #dfe3ff; border-color:#8792ff; }
html,body,a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; } button:focus:not(:focus-visible),a:focus:not(:focus-visible) { outline:none; }
button { border:0; background:linear-gradient(135deg,#ee7aa9,#db548b); color:#fff; font-weight:700; box-shadow:0 5px 12px #dc579438; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; } button:hover { transform:translateY(-1px); box-shadow:0 8px 17px #dc57944b; } button.secondary { background:#a77b8c; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:12px; } .card { padding:18px; border:1px solid #f4dce7; border-radius:16px; background:linear-gradient(145deg,#fff5f9,#fff0f6); color:#815466; } .card strong { display:block; margin-top:4px; font-size:28px; color:#613548; letter-spacing:-.04em; }
.muted { color:var(--muted); line-height:1.65; } .error { color:#c0293c; } .ok { color:#18794e; } .sender-blue { color:#3b5eea; font-weight:750; } .sender-pink { color:#de5590; font-weight:750; }
table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; } th,td { padding:12px 13px; border-bottom:1px solid #edf0f5; text-align:left; vertical-align:top; } th { background:#f8f9fd; color:#58657d; font-size:13px; } tr:last-child td { border-bottom:0; }
details { margin:14px 0; padding:12px 14px; border-radius:12px; background:#f7f9fe; } summary { cursor:pointer; color:#35476d; font-weight:700; }
.message { padding:14px 2px; border-bottom:1px solid #edf0f5; line-height:1.7; } .message:last-child { border-bottom:0; }
.page-content:has(.message) .message { margin:7px 0; padding:12px 14px; border:1px solid #f0e0e7; border-radius:13px; background:#fff; }
.page-content:has(.message) .message--male { border-color:#9cc9ef; background:#d8ecff; }.page-content:has(.message) .message--female { border-color:#efa9c4; background:#ffe0ec; }
.page-content:has(.message) .message--target { border-color:#f0a04e; background:#fff0d9; box-shadow:0 0 0 2px #f5b96b55; }
.timeline-message { display:inline-block; margin-top:4px; color:#1f2937; font-size:15px; font-weight:850; line-height:1.8; white-space:pre-wrap; word-break:break-word; }
.search-results .search-results__row--male td { background:#d8ecff; }
.search-results .search-results__row--female td { background:#ffe0ec; }
.search-results .search-results__row--male td:first-child { border-left:3px solid #4f98dd; }
.search-results .search-results__row--female td:first-child { border-left:3px solid #e5659a; }
.search-results .search-results__row--male:hover td { background:#cbe6ff; }
.search-results .search-results__row--female:hover td { background:#ffd3e3; }
.search-results .search-results__jump { color:#d84783; font-weight:800; white-space:nowrap; }
.search-summary { padding:18px; border:1px solid #f2d5e2; border-radius:18px; background:linear-gradient(135deg,#fff9fc,#f7f7ff); }
.search-summary__head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:13px; }.search-summary__head span { color:#d55289; font-size:13px; font-weight:800; }.search-summary__head h2 { margin:4px 0 0; color:#5f3148; font-size:21px; }.search-summary__head small { color:#8a6a79; }
.search-summary__metrics,.search-summary__accounts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.search-summary .card { min-height:94px; padding:13px; background:#fff; box-shadow:none; }.search-summary .card strong { font-size:23px; }.search-summary .card small { display:block; margin-top:3px; color:#94707f; }.search-summary__range strong { font-size:15px !important; letter-spacing:0; }.search-summary h3 { margin:18px 0 10px; color:#6f3c55; font-size:15px; }.search-summary__account { border-color:#efdce5; }.search-summary__account .sender-blue,.search-summary__account .sender-pink { display:block; min-height:21px; }
@media (max-width:680px) { .search-summary { padding:14px; }.search-summary__head { align-items:start; flex-direction:column; gap:3px; }.search-summary__head h2 { font-size:18px; }.search-summary__metrics,.search-summary__accounts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.search-summary .card { min-height:82px; padding:11px; }.search-summary .card strong { font-size:20px; }.search-summary__range strong { font-size:13px !important; } }
html[data-theme="dark"] .page-content:has(.message) .message { border-color:#4b3a45; background:#30252d; } html[data-theme="dark"] .page-content:has(.message) .message--male { background:#253646; border-color:#456784; } html[data-theme="dark"] .page-content:has(.message) .message--female { background:#402836; border-color:#754457; } html[data-theme="dark"] .page-content:has(.message) .message--target { background:#523b22; border-color:#bd8040; } html[data-theme="dark"] .timeline-message { color:#fff7fb; }
.loading-overlay { position:fixed; inset:0; display:none; z-index:99; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:#f8faffdc; color:#344675; font-weight:700; backdrop-filter:blur(4px); } .loading-overlay.show { display:flex; }
.spinner { width:44px; height:44px; border:4px solid #d9deff; border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } .progress-track { width:min(360px,72vw); height:7px; overflow:hidden; border-radius:999px; background:#e1e6ff; } .progress-bar { width:38%; height:100%; border-radius:99px; background:var(--brand); animation:loading-progress 1.1s ease-in-out infinite; } @keyframes loading-progress { from { transform:translateX(-110%); } to { transform:translateX(290%); } }
@media (max-width:680px) { .app-shell { padding:14px 14px 32px; } nav { position:static; gap:0; padding:8px; font-size:0; } nav::before { content:"聊天归档"; display:block; width:100%; padding:5px 7px 8px; color:#344264; font-size:14px; font-weight:800; } nav a { padding:8px 8px; font-size:13px; } .page-content > h1 { margin:20px 2px 14px; font-size:28px; } section,form { padding:16px; margin:12px 0; border-radius:15px; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .card { padding:13px; font-size:13px; } .card strong { font-size:23px; } table { display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; } table.search-results { white-space:normal; min-width:660px; } th,td { padding:10px; } input[type=file] { width:100%; } input:not([type=checkbox]),select,button { width:100%; } label { display:block; margin:6px 0; } .message { padding:13px 0; word-break:break-word; } }

/* Dedicated insight views: report, capsule, geometry, AI, today and heatmap. */
.page-content:has(#hour-chart), .page-content:has(#capsule-trend), .page-content:has(#emotion-wordcloud), .page-content:has(#heatmap) { --accent:#5567f2; }
.page-content:has(#capsule-trend) { --accent:#9a5bdd; }
.page-content:has(#emotion-wordcloud) { --accent:#e05d93; }
.page-content:has(#heatmap) { --accent:#138c83; }
.page-content:has(#hour-chart) > h1, .page-content:has(#capsule-trend) > h1, .page-content:has(#emotion-wordcloud) > h1, .page-content:has(#heatmap) > h1 { padding:26px 27px; border-radius:23px; color:#fff; background:linear-gradient(125deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#1d2853)); box-shadow:0 15px 35px color-mix(in srgb,var(--accent) 21%,transparent); }
.page-content:has(#hour-chart) > form:first-of-type, .page-content:has(#capsule-trend) section:first-of-type form, .page-content:has(#emotion-wordcloud) section:first-of-type form, .page-content:has(#heatmap) section:first-of-type form { display:flex; align-items:end; gap:10px; flex-wrap:wrap; padding:16px; border-color:color-mix(in srgb,var(--accent) 19%,#e6eaf0); background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--accent) 7%,#fff)); }
.page-content:has(#hour-chart) > form:first-of-type label, .page-content:has(#capsule-trend) section:first-of-type label, .page-content:has(#emotion-wordcloud) section:first-of-type label, .page-content:has(#heatmap) section:first-of-type label { display:grid; gap:5px; color:#56647e; font-size:13px; font-weight:700; }
.page-content:has(#hour-chart) button, .page-content:has(#capsule-trend) button, .page-content:has(#emotion-wordcloud) button, .page-content:has(#heatmap) button { background:var(--accent); }
.page-content:has(#hour-chart) .grid:first-of-type .card, .page-content:has(#emotion-wordcloud) .grid:first-of-type .card { border-top:3px solid var(--accent); background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--accent) 8%,#fff)); }
.page-content:has(#hour-chart) section:has(#hour-chart), .page-content:has(#capsule-trend) section:has(#capsule-trend), .page-content:has(#emotion-wordcloud) section:has(#emotion-wordcloud), .page-content:has(#heatmap) section:has(#heatmap) { position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--accent) 18%,#e6eaf0); }
.page-content:has(#hour-chart) section:has(#hour-chart)::before, .page-content:has(#capsule-trend) section:has(#capsule-trend)::before, .page-content:has(#emotion-wordcloud) section:has(#emotion-wordcloud)::before, .page-content:has(#heatmap) section:has(#heatmap)::before { content:"数据视图"; display:inline-block; margin-bottom:10px; padding:4px 9px; border-radius:999px; background:color-mix(in srgb,var(--accent) 12%,#fff); color:var(--accent); font-size:12px; font-weight:800; }
body:has(#hour-chart) nav a[href="/report"], body:has(#capsule-trend) nav a[href="/capsule"], body:has(#emotion-wordcloud) nav a[href="/insights"], body:has(#heatmap) nav a[href="/heatmap"] { color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,#fff); font-weight:800; }
body:has(#capsule-trend) section:has(table) .card { border-top:3px solid #9a5bdd; } body:has(#emotion-wordcloud) #emotion-wordcloud { min-height:340px; border-radius:16px; background:radial-gradient(circle at 50% 0,#fff7fb,#f8fbff); }
@media (max-width:680px) { .page-content:has(#hour-chart) > h1, .page-content:has(#capsule-trend) > h1, .page-content:has(#emotion-wordcloud) > h1, .page-content:has(#heatmap) > h1 { padding:22px 20px; font-size:28px; border-radius:19px; } .page-content:has(#hour-chart) > form:first-of-type, .page-content:has(#capsule-trend) section:first-of-type form, .page-content:has(#emotion-wordcloud) section:first-of-type form, .page-content:has(#heatmap) section:first-of-type form { display:block; } }

/* App shell / navigation. !important keeps this layer authoritative while
   legacy inline styles are gradually removed from the single-file backend. */
body { max-width:none !important; padding:0 !important; }
.app-shell { display:grid; grid-template-columns:238px minmax(0,1fr); width:min(1440px,100%) !important; max-width:none !important; padding:20px 24px 44px !important; gap:26px; }
.sidebar { position:sticky; top:20px; align-self:start; display:flex; flex-direction:column; gap:3px; margin:0 !important; padding:16px 12px !important; border:0 !important; border-radius:20px !important; background:linear-gradient(165deg,#202137,#292b46) !important; box-shadow:0 16px 36px #18214326 !important; color:#f8f8ff !important; backdrop-filter:none !important; }
.sidebar .brand { padding:7px 9px 15px; color:#fff; font-weight:900; font-size:19px; letter-spacing:-.04em; }.sidebar .user-chip { margin:0 5px 14px; padding:8px 9px; border-radius:10px; background:#ffffff16; color:#c7cae1; font-size:12px; }.sidebar .nav-group { padding:13px 9px 4px; color:#999eba; font-size:11px; font-weight:800; letter-spacing:.08em; }.sidebar a { padding:9px 10px !important; border-radius:10px !important; color:#e9eaf8 !important; font-size:14px !important; }.sidebar a:hover { background:#ffffff16 !important; color:#fff !important; }.sidebar .logout-link { margin-top:12px; color:#ffb8c7 !important; }
.mobile-top { display:none; }.page-content { min-width:0; }.page-content > h1 { margin-top:2px; }
#toast { position:fixed; top:20px; right:22px; z-index:110; padding:12px 16px; border-radius:12px; color:#fff; background:#1e8a5c; box-shadow:0 12px 30px #0d3a2850; transform:translateY(-20px); opacity:0; pointer-events:none; transition:.25s ease; font-weight:700; } #toast.show { transform:none; opacity:1; } #toast.error { background:#c63b55; }
html[data-theme="dark"] body { color:#e2e8f0; background:radial-gradient(circle at 20% 0,#1f2c51,#0f172a 55%); } html[data-theme="dark"] section,html[data-theme="dark"] form,html[data-theme="dark"] table { background:#1e293b !important; border-color:#334155 !important; box-shadow:none !important; } html[data-theme="dark"] th { background:#253248 !important; color:#cbd5e1 !important; } html[data-theme="dark"] td,html[data-theme="dark"] .message { border-color:#334155 !important; } html[data-theme="dark"] .page-content > h1,html[data-theme="dark"] section > h2 { color:#f1f5f9; } html[data-theme="dark"] .muted { color:#a9b7cc !important; } html[data-theme="dark"] input,html[data-theme="dark"] select { background:#0f172a !important; border-color:#475569 !important; color:#e2e8f0 !important; } html[data-theme="dark"] .card { background:linear-gradient(145deg,#263654,#1e293b) !important; border-color:#3b4a67 !important; color:#cbd5e1 !important; } html[data-theme="dark"] .card strong { color:#f1f5f9 !important; } html[data-theme="dark"] details { background:#263248 !important; }
@media (max-width:768px) { .app-shell { display:block; padding:12px 14px 86px !important; }.sidebar { position:fixed; inset:auto 0 0; z-index:20; display:grid; grid-template-columns:repeat(5,1fr); width:100%; padding:7px 6px calc(7px + env(safe-area-inset-bottom)) !important; border-radius:18px 18px 0 0 !important; box-shadow:0 -8px 26px #11182733 !important; }.sidebar .brand,.sidebar .user-chip,.sidebar .nav-group,.sidebar a:nth-of-type(n+6),.sidebar .logout-link { display:none; }.sidebar a { display:block; overflow:hidden; padding:8px 3px !important; text-align:center; font-size:11px !important; white-space:nowrap; text-overflow:ellipsis; }.mobile-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; color:#344264; font-weight:900; }.mobile-top button { width:40px !important; min-height:40px; padding:0 !important; border-radius:50%; background:#eef0ff; color:#4453ce; box-shadow:none; }.page-content > h1 { margin:0 2px 14px; }.insight-hub { margin-top:0 !important; }.hub-heading { display:block; }.hub-heading small { display:block; margin-top:4px; }.hub-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.hub-action { min-height:92px; align-items:flex-start; padding:11px 9px; gap:8px; }.hub-action b { flex-basis:31px; width:31px; height:31px; border-radius:10px; font-size:17px; }.hub-action span { font-size:13px; }.hub-action small { font-size:10px; } }
@media (max-width:768px) { .hub-actions { grid-template-columns:1fr !important; }.hub-action { min-height:70px; align-items:center; padding:10px; gap:9px; }.hub-action b { flex-basis:34px; width:34px; height:34px; font-size:18px; }.hub-action span { font-size:14px; }.hub-action small { font-size:11px; } }

/* Keep the Beta calendar reachable from the five-slot mobile dock. */
@media (max-width:768px) { .sidebar a[href="/imports"],.sidebar a[href="/packages"],.sidebar a[href="/capsule"],.sidebar a[href="/geometry"],.sidebar a[href="/insights"],.sidebar a[href="/today"],.sidebar a[href="/heatmap"] { display:none; }.sidebar a[href="/"],.sidebar a[href="/report"],.sidebar a[href="/mood-calendar"],.sidebar a[href="/mood-calendar-beta"] { display:block; }.sidebar { grid-template-columns:repeat(4,1fr); }.sidebar .mood-nav,.sidebar .mood-beta-nav { color:#fff !important; background:#ffffff20; font-weight:850; } }

/* Desktop navigation: keep the archive rail fixed while the page scrolls, and
   present insight tools before the smaller data-management links. */
@media (min-width:769px) {
  .app-shell { display:block; width:100% !important; max-width:none !important; padding:18px 28px 48px 282px !important; }
  .sidebar { position:fixed !important; left:18px; top:18px; bottom:18px; z-index:40; width:238px; max-height:calc(100vh - 36px); overflow-y:auto; }
  .page-content { width:min(1180px,100%); margin:0 auto; }
  .sidebar .nav-group:first-of-type { order:20; }
  .sidebar .nav-group:nth-of-type(2) { order:5; }
  .sidebar a[href="/report"] { order:6; }.sidebar a[href="/mood-calendar"] { order:7; }.sidebar a[href="/mood-calendar-beta"] { order:8; }.sidebar a[href="/month-notes"] { order:9; }.sidebar a[href="/capsule"] { order:10; }.sidebar a[href="/geometry"] { order:11; }.sidebar a[href="/insights"] { order:12; }.sidebar a[href="/today"] { order:13; }.sidebar a[href="/heatmap"] { order:14; }
  .sidebar a[href="/"] { order:21; }.sidebar a[href="/imports"] { order:22; }.sidebar a[href="/packages"] { order:23; }.sidebar .logout-link { order:30; }
  .page-content:has(.insight-hub) .insight-hub { margin-top:0 !important; padding:13px !important; }
  .page-content:has(.insight-hub) .hub-actions { gap:7px; }
  .page-content:has(.insight-hub) .hub-action { min-height:62px; padding:9px 11px; }
  .page-content:has(.insight-hub) .hub-action b { width:34px; height:34px; flex-basis:34px; font-size:20px; }
  .page-content:has(.insight-hub) .hub-actions { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

/* Final desktop sidebar layer. New class names avoid legacy group-button rules. */
@media (min-width:769px) {
  .sidebar .sidebar-section-title {
    display:flex; align-items:center; gap:8px; margin:17px 7px 5px; padding:0;
    color:#f2b8cf; font-size:11px; font-weight:900; letter-spacing:.13em;
    pointer-events:none; user-select:none;
  }
  .sidebar .sidebar-section-title::after { content:""; height:1px; flex:1; background:rgba(255,226,237,.24); }
  .sidebar .sidebar-section-title:first-of-type { margin-top:4px; }
  .sidebar a.is-active,[aria-current="page"].is-active {
    position:relative; border:1px solid rgba(255,229,240,.38) !important;
    background:linear-gradient(110deg,rgba(255,255,255,.25),rgba(255,209,227,.14)) !important;
    color:#fff !important; box-shadow:0 7px 18px rgba(47,13,30,.20),inset 0 1px 0 rgba(255,255,255,.18) !important;
    font-weight:900 !important;
  }
  .sidebar a.is-active::before { content:""; position:absolute; left:5px; width:4px; height:19px; border-radius:99px; background:#ffd5e6; box-shadow:0 0 11px rgba(255,213,230,.8); }
}

/* Phase 1: invitation-inspired home cover and memory-first dashboard. */
body:has(.relationship-hero) {
  --home-rose:#e55d94;
  --home-deep:#713a59;
  background:
    radial-gradient(circle at 8% 4%,rgba(255,207,225,.72),transparent 28%),
    radial-gradient(circle at 94% 15%,rgba(221,235,255,.52),transparent 25%),
    linear-gradient(145deg,#fffafd 0%,#fff7fa 48%,#fff0f6 100%);
}

body:has(.relationship-hero) .relationship-hero {
  min-height:clamp(260px,32vw,350px);
  margin-bottom:22px;
  padding:30px clamp(20px,7vw,96px);
  border-color:rgba(231,166,194,.72);
  border-radius:30px;
  background:
    radial-gradient(circle at 14% 18%,rgba(113,195,240,.38),transparent 29%),
    radial-gradient(circle at 86% 12%,rgba(247,123,171,.42),transparent 34%),
    radial-gradient(circle at 50% 62%,rgba(255,195,219,.40),transparent 40%),
    linear-gradient(135deg,#eaf8ff 0%,#fff9fb 50%,#ffe7f0 100%);
  box-shadow:0 22px 52px rgba(156,73,111,.14),inset 0 1px 0 rgba(255,255,255,.88);
  animation:home-cover-in .72s cubic-bezier(.22,.8,.25,1) both;
}

body:has(.relationship-hero) .relationship-hero::before,
body:has(.relationship-hero) .relationship-hero::after {
  color:#f09fc1;
  filter:drop-shadow(0 0 9px rgba(242,166,200,.78));
}

body:has(.relationship-hero) .relationship-hero__person {
  transition:transform .24s ease,filter .24s ease;
}

body:has(.relationship-hero) .relationship-hero__person:hover {
  transform:translateY(-5px) !important;
  filter:drop-shadow(0 12px 18px rgba(87,52,73,.16));
}

body:has(.relationship-hero) .relationship-hero__person img {
  width:clamp(86px,11vw,122px);
  height:clamp(86px,11vw,122px);
  border-width:6px;
  box-shadow:0 12px 24px rgba(76,54,69,.18),inset 0 1px 0 #fff;
}

body:has(.relationship-hero) .relationship-hero__middle {
  min-height:188px;
  padding:22px 25px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:26px;
  background:rgba(255,255,255,.38);
  box-shadow:0 16px 40px rgba(127,74,102,.15),inset 0 1px 0 rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
  backdrop-filter:blur(12px) saturate(1.08);
}

body:has(.relationship-hero) .relationship-hero__middle small {
  color:#b14b77;
  font-size:11px;
  font-weight:850;
  letter-spacing:.18em;
}

body:has(.relationship-hero) .relationship-hero__middle strong {
  color:#5c3047;
  font-size:clamp(21px,3vw,31px);
  letter-spacing:.12em;
}

body:has(.relationship-hero) .relationship-hero__middle strong::after {
  content:"把说过的话，慢慢收藏成我们的故事";
  display:block;
  max-width:230px;
  margin-top:7px;
  color:#94677b;
  font-family:"KaiTi","STKaiti",serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.55;
}

body:has(.relationship-hero) .relationship-hero__heart {
  width:55px;
  height:55px;
  margin:4px 0;
  box-shadow:0 10px 22px rgba(212,81,129,.25),inset 0 1px 0 rgba(255,255,255,.42);
  font-size:27px;
}

body:has(.relationship-hero) .dashboard-grid {
  gap:16px;
  margin-bottom:22px;
  perspective:1200px;
}

body:has(.relationship-hero) .dashboard-grid > .card {
  position:relative;
  overflow:hidden;
  border-color:#e46b9d !important;
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,241,247,.78)) !important;
  box-shadow:0 14px 30px rgba(112,62,86,.09),inset 0 1px 0 rgba(255,255,255,.9) !important;
  animation:home-card-in .58s cubic-bezier(.22,.8,.25,1) both;
}

body:has(.relationship-hero) .dashboard-grid > .card::before {
  content:"";
  position:absolute;
  top:-44px;
  right:-34px;
  width:112px;
  height:112px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,147,185,.22),transparent 68%);
  pointer-events:none;
}

body:has(.relationship-hero) .dashboard-grid > .card:nth-child(1) { animation-delay:.08s; }
body:has(.relationship-hero) .dashboard-grid > .card:nth-child(2) { animation-delay:.15s; }
body:has(.relationship-hero) .dashboard-grid > .card:nth-child(3) { animation-delay:.22s; }
body:has(.relationship-hero) .dashboard-grid > .card:nth-child(4) { animation-delay:.29s; }

body:has(.relationship-hero) .dashboard-grid > .card:hover {
  transform:translateY(-6px) rotateX(1deg) rotateY(-1deg) !important;
  box-shadow:0 22px 42px rgba(111,64,88,.16),inset 0 1px 0 #fff !important;
}

body:has(.relationship-hero) .dashboard-grid .total-card {
  justify-content:flex-end;
  min-height:214px;
  padding:23px !important;
}

body:has(.relationship-hero) .dashboard-grid .total-card > span,
body:has(.relationship-hero) .dashboard-grid .chart-card__heading span {
  color:#7a405a;
  font-size:14px;
  font-weight:900;
  letter-spacing:.03em;
}

body:has(.relationship-hero) .dashboard-grid .total-card strong {
  margin-top:10px;
  color:#b52f68 !important;
  font-size:clamp(36px,4vw,51px);
  line-height:1;
  text-shadow:0 5px 18px rgba(181,47,104,.12);
}

body:has(.relationship-hero) .dashboard-grid .total-card small { margin-top:12px; }
body:has(.relationship-hero) .dashboard-grid .chart-card { padding:18px !important; }
body:has(.relationship-hero) .dashboard-grid .chart-card__heading,
body:has(.relationship-hero) .dashboard-grid .sender-pie { position:relative; z-index:1; }

body:has(.relationship-hero) .memory-card {
  margin-top:0;
  border-color:#e7a7c1 !important;
  box-shadow:0 18px 38px rgba(112,62,86,.11),inset 0 1px 0 rgba(255,255,255,.9) !important;
  animation:home-card-in .62s .34s cubic-bezier(.22,.8,.25,1) both;
}

body:has(.relationship-hero) .memory-card::after {
  content:"❝";
  color:#e88daf;
  opacity:.25;
  transform:rotate(0deg);
}

body:has(.relationship-hero) .memory-card blockquote {
  max-width:900px;
  padding-left:20px;
  border-left-width:4px;
  color:#5b3045;
  font-family:"KaiTi","STKaiti",serif;
  font-size:clamp(17px,2vw,21px);
  line-height:1.8;
}

@keyframes home-cover-in {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:none; }
}

@keyframes home-card-in {
  from { opacity:0; transform:translateY(15px); }
  to { opacity:1; transform:none; }
}

/* Make the nine memory lenses feel like a curated invitation rather than a tool list. */
body:has(.relationship-hero) .insight-hub {
  margin:22px 0 !important;
  padding:20px !important;
  border-color:#e7bfd0;
  background:linear-gradient(140deg,rgba(255,255,255,.82),rgba(255,242,248,.72));
  box-shadow:0 14px 32px rgba(112,62,86,.08),inset 0 1px 0 rgba(255,255,255,.9);
  animation:home-card-in .62s .42s cubic-bezier(.22,.8,.25,1) both;
}

body:has(.relationship-hero) .hub-heading { margin-bottom:16px; }

body:has(.relationship-hero) .hub-heading span::before {
  content:"✦";
  display:inline-block;
  margin-right:7px;
  color:#e05d93;
  font-size:13px;
}

body:has(.relationship-hero) .hub-actions {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px;
}

body:has(.relationship-hero) .hub-action {
  min-height:78px;
  overflow:hidden;
  border-color:rgba(229,181,201,.78);
  background:rgba(255,252,253,.76);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
  animation:home-action-in .5s cubic-bezier(.22,.8,.25,1) both;
}

body:has(.relationship-hero) .hub-action:nth-child(1) { animation-delay:.48s; }
body:has(.relationship-hero) .hub-action:nth-child(2) { animation-delay:.53s; }
body:has(.relationship-hero) .hub-action:nth-child(3) { animation-delay:.58s; }
body:has(.relationship-hero) .hub-action:nth-child(4) { animation-delay:.63s; }
body:has(.relationship-hero) .hub-action:nth-child(5) { animation-delay:.68s; }
body:has(.relationship-hero) .hub-action:nth-child(6) { animation-delay:.73s; }
body:has(.relationship-hero) .hub-action:nth-child(7) { animation-delay:.78s; }
body:has(.relationship-hero) .hub-action:nth-child(8) { animation-delay:.83s; }
body:has(.relationship-hero) .hub-action:nth-child(9) { animation-delay:.88s; }

body:has(.relationship-hero) .hub-action:hover {
  transform:translateY(-5px) rotateX(2deg) rotateY(-1deg);
  border-color:#e98aac;
  background:rgba(255,255,255,.96);
  box-shadow:0 15px 27px rgba(206,77,129,.14);
}

body:has(.relationship-hero) .hub-action b { transition:transform .22s ease,box-shadow .22s ease; }

body:has(.relationship-hero) .hub-action:hover b {
  transform:rotate(-5deg) scale(1.08);
  box-shadow:0 7px 14px rgba(213,84,139,.15);
}

body:has(.relationship-hero) .memory-search {
  border-color:#e7bfd0 !important;
  box-shadow:0 12px 28px rgba(112,62,86,.07),inset 0 1px 0 rgba(255,255,255,.9) !important;
}

@keyframes home-action-in {
  from { opacity:0; transform:translateY(9px); }
  to { opacity:1; transform:none; }
}

@media (max-width:900px) {
  body:has(.relationship-hero) .hub-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width:620px) {
  body:has(.relationship-hero) .relationship-hero {
    min-height:214px;
    padding:17px 8px;
    border-radius:23px;
  }
  body:has(.relationship-hero) .relationship-hero__middle {
    min-height:166px;
    padding:15px 7px;
    border-radius:19px;
  }
  body:has(.relationship-hero) .relationship-hero__middle strong { font-size:16px; letter-spacing:.05em; }
  body:has(.relationship-hero) .relationship-hero__middle strong::after { max-width:132px; font-size:10px; }
  body:has(.relationship-hero) .relationship-hero__heart { width:42px; height:42px; font-size:20px; }
  body:has(.relationship-hero) .relationship-hero__person img { border-width:4px; }
  body:has(.relationship-hero) .hub-actions { grid-template-columns:1fr !important; }
  body:has(.relationship-hero) .hub-action { min-height:70px; }
}

@media (prefers-reduced-motion:reduce) {
  body:has(.relationship-hero) .relationship-hero,
  body:has(.relationship-hero) .dashboard-grid > .card,
  body:has(.relationship-hero) .memory-card,
  body:has(.relationship-hero) .insight-hub,
  body:has(.relationship-hero) .hub-action { animation:none !important; }
  body:has(.relationship-hero) .dashboard-grid > .card:hover,
  body:has(.relationship-hero) .hub-action:hover { transform:none !important; }
}

/* Desktop rail layout: labels run vertically beside their respective menus. */
@media (min-width:769px) {
  .sidebar { display:flex !important; gap:8px !important; padding:17px 12px !important; }
  .sidebar-group { display:grid; grid-template-columns:42px minmax(0,1fr); gap:8px; width:100%; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
  .sidebar-group__label { display:grid; place-items:center; min-height:100%; padding:10px 0; border-right:1px solid rgba(255,224,237,.32); color:#ffe2ed; font-family:inherit; font-size:17px; font-weight:750; letter-spacing:.18em; line-height:1.25; text-orientation:mixed; writing-mode:vertical-rl; }
  .sidebar-group__links { display:grid; gap:2px; min-width:0; padding:6px; border:1px solid rgba(255,226,237,.19); border-radius:14px; background:rgba(57,16,36,.17); }
  .sidebar-group__links a { order:0 !important; min-height:31px !important; padding:6px 8px !important; border-radius:8px !important; font-size:13px !important; line-height:1.2; }
  .sidebar-group--data .sidebar-group__label { font-size:16px; }
  .sidebar-group--data .sidebar-group__links { grid-template-columns:1fr; }
  .sidebar .logout-link { align-self:flex-end; width:calc(100% - 50px); margin:3px 0 0 50px; }
}

/* Desktop rail stays visually paired with the content, regardless of a wide screen. */
@media (min-width:769px) {
  .app-shell {
    padding:16px 24px 40px 274px !important;
  }
  .sidebar {
    left:12px !important;
    top:16px !important;
    bottom:auto !important;
    width:246px !important;
    height:calc(100dvh - 32px);
    max-height:calc(100vh - 32px);
    overflow-x:hidden;
    overscroll-behavior:contain;
    isolation:isolate;
    background:linear-gradient(155deg,#5c263f 0%,#74304d 52%,#4e2037 100%) !important;
    background-size:100% 160% !important;
    animation:sidebar-ambient 12s ease-in-out infinite;
    border:1px solid rgba(255,222,236,.24) !important;
    box-shadow:0 22px 46px rgba(83,25,52,.30),0 4px 12px rgba(83,25,52,.18),inset 0 1px 0 rgba(255,255,255,.13) !important;
    transition:transform .24s ease,box-shadow .24s ease;
  }
  .sidebar > * { position:relative; z-index:1; }
  .sidebar::after {
    content:"";
    position:absolute;
    z-index:0;
    width:190px;
    height:190px;
    right:-92px;
    top:22%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,205,226,.16),transparent 68%);
    pointer-events:none;
  }
  .page-content {
    width:min(1180px,100%);
    margin:0 !important;
  }
  .sidebar:hover {
    transform:none;
    box-shadow:0 28px 56px rgba(83,25,52,.36),0 6px 14px rgba(83,25,52,.18),inset 0 1px 0 rgba(255,255,255,.16) !important;
  }
}
@keyframes sidebar-ambient {
  0%,100% { background-position:50% 0; }
  50% { background-position:50% 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .sidebar { animation:none !important; }
}

/* Keep the rail and the reading area centered as one balanced desktop composition. */
@media (min-width:769px) {
  .app-shell {
    display:block !important;
    width:min(1080px,calc(100vw - 294px)) !important;
    max-width:none !important;
    margin:0 0 0 max(278px,calc(50vw - 409px)) !important;
    padding:16px 0 40px !important;
  }
  .sidebar {
    position:fixed !important;
    left:max(16px,calc(50vw - 671px)) !important;
    top:16px !important;
    bottom:auto !important;
    z-index:40;
    justify-content:center !important;
  }
  .page-content {
    width:100%;
    max-width:1080px;
    margin:0 !important;
  }
  .sidebar-group__links a,.sidebar .logout-link {
    display:flex;
    align-items:center;
  }
}

/* One soft pink outline system for white content surfaces. */
.page-content > section,
.page-content > form,
.page-content .card,
.page-content .memory-card,
.page-content .memory-search,
.page-content .conversation-summary,
.page-content .data-management,
.page-content .insight-hub,
.page-content .search-summary,
.page-content .mood-sheet,
.page-content .mood-trend,
.page-content table {
  border-color:#e46b9d !important;
}
.page-content > section,
.page-content > form,
.page-content .memory-card,
.page-content .memory-search,
.page-content .conversation-summary,
.page-content .data-management,
.page-content .insight-hub,
.page-content .search-summary,
.page-content .mood-sheet,
.page-content .mood-trend {
  box-shadow:0 8px 24px rgba(220,87,143,.07),inset 0 1px 0 rgba(255,255,255,.84);
}
.dashboard-grid > .card {
  border-color:#e46b9d !important;
}

/* On phones, the memory hub is a compact 3 × 3 launcher, not a list. */
@media (max-width:768px) {
  .insight-hub .hub-actions { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; }
  .insight-hub .hub-action { display:grid !important; place-items:center; align-content:center; min-height:92px; padding:10px 5px; gap:7px; text-align:center; }
  .insight-hub .hub-action b { flex:0 0 auto; width:34px; height:34px; font-size:18px; }
  .insight-hub .hub-action span { display:block; overflow:hidden; max-width:100%; color:#734457; font-size:12px; font-weight:850; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
  .insight-hub .hub-action small { display:none !important; }
}

/* Make the two sidebar sections easy to scan. */
@media (min-width:769px) {
  .sidebar .nav-group { font-size:15px !important; font-weight:900 !important; letter-spacing:.02em !important; padding-top:16px; }
  .sidebar .nav-group { display:block; margin:8px 4px 3px; padding:8px 10px !important; border-radius:9px; background:#fff !important; color:#c84278 !important; font-size:16px !important; font-weight:950 !important; letter-spacing:.04em !important; }
}
.beta-tag { display:inline-block; margin-left:7px; padding:3px 7px; border-radius:999px; color:#b93e70; background:#ffe4ef; font-size:11px; font-weight:800; vertical-align:middle; }

/* Pink theme overrides for every surface. */
.sidebar { background:linear-gradient(165deg,#5a263c,#71314c) !important; box-shadow:0 16px 36px #79254626 !important; color:#fff8fb !important; }.sidebar .user-chip { color:#ffdce9; }.sidebar .nav-group { color:#eeb2c9; }.sidebar a { color:#fff0f6 !important; }.sidebar .logout-link { color:#ffd0df !important; }
.hub-heading span { color:#63364a; }.hub-heading small,.hub-action small { color:#987283; }.hub-action { border-color:#f0dfe6; background:linear-gradient(145deg,#fff,#fff7fa); color:#63364a; }.hub-action:hover { color:#c84278; border-color:#f1bcd1; box-shadow:0 8px 16px #dc57941c; }.hub-action b,.hub-action.capsule b,.hub-action.geometry b,.hub-action.insights b,.hub-action.today b,.hub-action.heatmap b { color:#db548b; background:#ffe5ef; }
.page-content:has(#hour-chart), .page-content:has(#capsule-trend), .page-content:has(#emotion-wordcloud), .page-content:has(#heatmap) { --accent:#e55d94; }.mobile-top { color:#63364a !important; }.mobile-top button { background:#ffe5ef !important; color:#c84278 !important; }.spinner { border-color:#ffd9e8 !important; border-top-color:#e55d94 !important; }.progress-track { background:#ffe0ec !important; }.progress-bar { background:#e55d94 !important; }

/* Home: a warmer, more ceremonial presentation for the shared archive. */
.page-content:has(.relationship-card) > h1 { margin-bottom:8px; }
.page-content:has(.relationship-card) > h1::after { content:"把聊天，慢慢收藏成你们的故事"; display:block; margin-top:8px; color:#a16a80; font-size:14px; font-weight:650; letter-spacing:0; }
.page-content:has(.relationship-card) > .grid:first-of-type { gap:15px; }
.relationship-card { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; min-height:139px; padding-left:64px !important; color:#7c4058 !important; background:linear-gradient(135deg,#ffe8f1 0%,#f7bdd4 100%) !important; border-color:#ec9fbd !important; }
.relationship-card::before,.relationship-card::after { content:""; position:absolute; z-index:-1; border-radius:50%; background:#fff8fb99; }.relationship-card::before { width:150px; height:150px; right:-44px; top:-82px; }.relationship-card::after { width:78px; height:78px; right:36px; bottom:-48px; }
.relationship-card__heart { position:absolute; left:20px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; color:#fff; border-radius:50%; background:linear-gradient(145deg,#ef80ab,#d94f86); box-shadow:0 8px 20px #d451813b; font-size:19px; animation:relationship-heartbeat 2.5s ease-in-out infinite; }
.relationship-card strong { margin-top:3px; color:#b6366b !important; }.relationship-card small { margin-top:4px; color:#9a667b; font-size:12px; }.relationship-card .muted { color:#9a667b !important; }
.memory-card { position:relative; overflow:hidden; padding:28px !important; border-color:#f0c9d9 !important; background:linear-gradient(125deg,#fff 0%,#fff8fb 54%,#ffedf4 100%) !important; }.memory-card::after { content:"♥"; position:absolute; right:28px; top:20px; color:#f4b3cb; font-size:68px; line-height:1; opacity:.38; transform:rotate(10deg); pointer-events:none; }.memory-card__top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-right:42px; }.memory-card__eyebrow { color:#c44d7e; font-size:12px; font-weight:850; letter-spacing:.08em; }.memory-card__refresh { position:relative; z-index:1; padding:7px 10px; border:1px solid #f3c3d5; border-radius:999px; color:#bd4174; background:#fff9fb; font-size:13px; }.memory-card__refresh:hover { background:#fff0f6; text-decoration:none; }.memory-card h2 { margin-top:7px !important; font-size:25px !important; }.memory-card__meta { margin:18px 0 8px !important; color:#a2677e !important; font-size:13px; }.memory-card blockquote { max-width:830px; margin:0 0 17px; padding:2px 0 2px 17px; border-left:3px solid #eb8fb2; color:#5a3142; font-size:16px; line-height:1.85; white-space:pre-wrap; }.memory-card__link { display:inline-flex; align-items:center; gap:7px; color:#bc3f71; }.memory-card__link span { transition:transform .18s ease; }.memory-card__link:hover span { transform:translateX(4px); }
.memory-search { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 22px !important; border-color:#edcbd9 !important; background:linear-gradient(120deg,#fff8fb,#fff) !important; }.memory-search__eyebrow { color:#c44d7e; font-size:11px; font-weight:850; letter-spacing:.09em; }.memory-search h2 { margin:4px 0 3px !important; color:#63364a; font-size:19px !important; }.memory-search p { margin:0 !important; font-size:13px; }.memory-search form { display:grid; grid-template-columns:minmax(210px,330px) auto; gap:8px; flex:0 1 430px; margin:0; padding:0 !important; border:0; background:transparent !important; box-shadow:none; }.memory-search input { min-height:42px; }.memory-search button { min-height:42px; white-space:nowrap; }
@keyframes relationship-heartbeat { 0%,100% { transform:translateY(-50%) scale(1); } 10% { transform:translateY(-50%) scale(1.14); } 20% { transform:translateY(-50%) scale(1); } 30% { transform:translateY(-50%) scale(1.1); } 40% { transform:translateY(-50%) scale(1); } }
@media (prefers-reduced-motion:reduce) { .relationship-card__heart { animation:none; } }
html[data-theme="dark"] .relationship-card { background:linear-gradient(135deg,#42233a,#5a2945) !important; border-color:#74415b !important; color:#f3d9e4 !important; }.relationship-card small,html[data-theme="dark"] .relationship-card .muted { color:#d6a7ba !important; } html[data-theme="dark"] .relationship-card strong { color:#ffb4cf !important; } html[data-theme="dark"] .memory-card { background:linear-gradient(135deg,#2d2030,#3c2434) !important; border-color:#674153 !important; } html[data-theme="dark"] .memory-card blockquote { color:#f2dae4; } html[data-theme="dark"] .memory-card__refresh { background:#422739; border-color:#704358; color:#ffc0d8; }
@media (max-width:768px) { .page-content:has(.relationship-card) > h1::after { font-size:13px; }.relationship-card { min-height:124px; padding-left:57px !important; }.relationship-card__heart { left:16px; }.memory-card { padding:20px !important; }.memory-card__top { padding-right:23px; }.memory-card::after { right:14px; top:18px; font-size:48px; }.memory-card h2 { font-size:22px !important; }.memory-card blockquote { font-size:15px; } }
@media (max-width:620px) { .memory-search { display:block; padding:17px !important; }.memory-search form { grid-template-columns:1fr auto; margin-top:14px; }.memory-search input { min-width:0; }.memory-search button { width:auto !important; padding:9px 16px; } }

/* Dashboard charts: the two principal senders stay blue and pink; the rest are quiet supporting colors. */
.dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }.dashboard-grid .card { min-height:214px; }.total-card { display:flex; flex-direction:column; justify-content:center; }.total-card small { margin-top:8px; color:#9a667b; font-size:12px; }.chart-card { display:flex; flex-direction:column; padding:15px !important; }.chart-card__heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; color:#754359; font-weight:800; }.chart-card__heading small { color:#a16a80; font-size:11px; font-weight:600; }.sender-pie { display:flex; align-items:center; gap:12px; min-height:150px; margin-top:auto; }.pie-3d { position:relative; display:grid; flex:0 0 112px; place-items:center; width:112px; height:112px; border-radius:50%; box-shadow:0 8px 18px #65304724; }.pie-3d::before { content:""; position:absolute; inset:9px; border-radius:50%; background:rgba(255,255,255,.9); }.pie-3d span { position:relative; z-index:1; color:#653548; font-size:16px; font-weight:900; text-align:center; }.pie-3d span small { display:block; margin-top:2px; color:#a16a80; font-size:10px; font-weight:650; }.pie-legend { display:grid; flex:1; gap:5px; margin:0; padding:0; list-style:none; min-width:0; }.pie-legend li { display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:5px; color:#7c5263; font-size:11px; }.pie-legend i { width:9px; height:9px; border-radius:50%; }.pie-legend span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.pie-legend b { color:#63364a; font-variant-numeric:tabular-nums; }.relationship-card__heart { animation-duration:2.5s; }
html[data-theme="dark"] .chart-card__heading,html[data-theme="dark"] .pie-legend b { color:#f2d7e3; } html[data-theme="dark"] .chart-card__heading small,html[data-theme="dark"] .pie-legend li,html[data-theme="dark"] .pie-3d span small,html[data-theme="dark"] .total-card small { color:#d6a7ba; } html[data-theme="dark"] .pie-3d::before { background:#302031; } html[data-theme="dark"] .pie-3d span { color:#f6dce7; }
@media (max-width:1100px) { .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .dashboard-grid { grid-template-columns:1fr; }.dashboard-grid .card { min-height:178px; }.sender-pie { justify-content:flex-start; }.pie-3d { flex-basis:104px; width:104px; height:104px; } }

/* Secondary management stays compact so the memories and insights remain the focus. */
.data-management { padding:16px !important; background:linear-gradient(145deg,#fff,#fff9fb) !important; }.data-management__head,.conversation-summary__head { display:flex; align-items:center; justify-content:space-between; gap:14px; }.data-management__head h2,.conversation-summary__head h2 { margin:2px 0 0 !important; font-size:17px !important; }.data-management__head > a { font-size:13px; }.data-management__eyebrow { color:#c44d7e; font-size:11px; font-weight:850; letter-spacing:.08em; }.data-management__actions { display:grid; grid-template-columns:1.3fr .78fr 1fr; gap:9px; margin-top:12px; }.data-management__actions form { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:0; margin:0; padding:10px !important; border-radius:12px; box-shadow:none; background:#fff !important; }.data-management__actions label,.data-management__actions span { color:#7c5263; font-size:12px; font-weight:800; white-space:nowrap; }.data-management__actions select,.data-management__actions input:not([type="file"]) { min-height:34px; padding:5px 8px; font-size:12px; }.data-management__actions input[type="file"] { width:100%; min-height:28px; padding:2px; font-size:11px; }.data-management__actions button { min-height:34px; padding:6px 10px; font-size:12px; box-shadow:none; }.data-management__actions a { font-size:12px; }.data-management__reset { margin:10px 0 0; padding:7px 10px; background:#fff4f8; }.data-management__reset summary { font-size:12px; }.data-management__reset p { margin:7px 0; font-size:12px; }.data-management__reset form { display:flex; align-items:center; gap:10px; margin:0; padding:0 !important; border:0; box-shadow:none; background:transparent !important; }.data-management__reset form label { font-size:12px; }.data-management__reset button { min-height:32px; padding:5px 9px; font-size:12px; box-shadow:none; }.conversation-summary { padding:15px !important; }.conversation-summary__head { margin-bottom:8px; }.conversation-summary__head span { color:#a16a80; font-size:12px; }.conversation-summary th,.conversation-summary td { padding:8px 10px; font-size:13px; }.conversation-summary table { box-shadow:none; }
@media (max-width:900px) { .data-management__actions { grid-template-columns:1fr; }.data-management__actions form { min-height:50px; } }
@media (max-width:620px) { .data-management { padding:14px !important; }.data-management__actions { gap:7px; }.data-management__actions form { display:grid; grid-template-columns:auto 1fr auto; }.data-management__actions form:first-child input[type="file"] { grid-column:1 / -1; }.data-management__actions form:nth-child(2) { display:flex; }.data-management__reset form { display:block; }.data-management__reset button { display:block; width:100%; margin-top:7px; }.conversation-summary { padding:13px !important; }.conversation-summary table { white-space:nowrap; } }

/* Mood calendar: scores are cached server-side; the thresholds only reclassify locally. */
.mood-calendar-intro,.mood-calendar { max-width:980px; }.mood-controls { display:grid; grid-template-columns:1fr 1fr auto; gap:13px; align-items:end; margin-top:14px; }.mood-controls label { display:grid; gap:6px; color:#754359; font-size:14px; font-weight:800; }.mood-controls output { color:#c44d7e; font-variant-numeric:tabular-nums; }.mood-controls button,.mood-compute-button { min-height:40px; padding:8px 12px; font-size:13px; }.mood-calendar__nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }.mood-calendar__nav h2 { margin:0 !important; font-size:19px !important; }.mood-calendar__nav button { min-height:38px; padding:7px 11px; font-size:13px; }.mood-weekdays,.mood-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }.mood-weekdays { margin-bottom:6px; color:#9a667b; text-align:center; font-size:12px; font-weight:800; }.mood-day { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; min-width:44px; min-height:82px; padding:8px !important; border:1px solid #f2dbe5; border-radius:12px; background:#fff9fb; color:#754359; box-shadow:none; text-align:left; }.mood-day:hover { transform:translateY(-1px); background:#fff0f6; }.mood-day--blank { border:0; background:transparent; pointer-events:none; }.mood-day--empty { opacity:.52; background:#fbf7f9; }.mood-day__number { color:#88576a; font-size:13px; font-weight:850; }.mood-day__faces { display:grid; gap:2px; align-self:center; font-size:17px; }.mood-day__faces i { font-style:normal; white-space:nowrap; }.mood-face--male { color:#3b5eea; }.mood-face--female { color:#df5b91; }.mood-day small { display:block; width:100%; overflow:hidden; color:#9e7181; font-size:10px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.mood-compute-button { margin-right:10px; }.data-management__head > div:last-child { display:flex; align-items:center; }.data-management__head > div:last-child > a { font-size:13px; }.hub-action.mood b { color:#db548b; background:#ffe5ef; }
html[data-theme="dark"] .mood-day { border-color:#654153; background:#312132; color:#efd8e2; }.mood-day--empty { background:#251b27; }.mood-day__number { color:#e4b2c5; }.mood-day small,.mood-weekdays { color:#c999ab; }
.mood-color-controls { display:grid; grid-template-columns:1fr 1fr auto; gap:13px; align-items:end; margin:12px 0 2px; padding:11px 12px; border:1px solid #f0d8e3; border-radius:13px; background:#fff7fa; }.mood-color-controls label { display:grid; gap:6px; color:#754359; font-size:14px; font-weight:800; }.mood-color-controls output { color:#c44d7e; font-variant-numeric:tabular-nums; }.mood-color-controls small { color:#9e7181; font-size:12px; line-height:1.4; }.mood-day__faces i { font-family:Arial,"Microsoft YaHei",sans-serif; font-weight:900; letter-spacing:.02em; text-shadow:0 .3px currentColor,-.3px 0 currentColor,.3px 0 currentColor; } .mood-face--male { color:#2e55d4; }.mood-face--female { color:#d8447e; }
.mood-color-controls { display:none !important; }
@media (max-width:760px) { .mood-controls { grid-template-columns:1fr; }.mood-controls button { width:100%; }.mood-day { min-height:66px; padding:6px !important; }.mood-day__faces { font-size:17px; }.mood-day small { display:none; }.mood-calendar__nav button { min-height:44px; }.mood-calendar__nav h2 { font-size:17px !important; }.mood-weekdays,.mood-grid { gap:4px; }.mood-compute-button { margin-right:7px; font-size:11px; }.data-management__head > div:last-child > a { font-size:12px; } }
@media (max-width:760px) { .mood-color-controls { grid-template-columns:1fr; }.mood-color-controls small { margin-top:-2px; } .mood-day__faces { font-size:18px; } }

.mood-day__sparkle { position:absolute; right:5px; bottom:4px; font-size:13px; font-style:normal; }.mood-sheet { position:fixed; inset:0; z-index:130; display:none; }.mood-sheet.show { display:block; }.mood-sheet__backdrop { position:absolute; inset:0; background:#43253566; backdrop-filter:blur(5px); }.mood-sheet__panel { position:absolute; right:0; bottom:0; left:0; max-width:760px; min-height:48vh; margin:auto; padding:26px 24px max(26px,env(safe-area-inset-bottom)); border:1px solid #f2cbd9; border-radius:24px 24px 0 0; background:#fffafaee; box-shadow:0 -16px 46px #3d17363d; backdrop-filter:blur(12px); }.mood-sheet__close { position:absolute; top:12px; right:14px; width:38px; min-height:38px; padding:0; border-radius:50%; font-size:24px; line-height:1; }.mood-sheet__date { display:block; color:#a1647b; font-size:14px; font-weight:800; }.mood-sheet__scores { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 10px; }.mood-sheet__scores b { font-size:14px; }.mood-sheet__words { color:#8d6676; font-size:13px; }.mood-sheet__summary { margin:22px 0; padding:3px 0 3px 16px; border-left:3px solid #e876a3; color:#5c3143; font-family:"KaiTi","STKaiti",serif; font-size:23px; line-height:1.7; }.mood-sheet__timeline { display:inline-block; padding:10px 13px; border-radius:11px; background:#e55d94; color:#fff; }.mood-sheet__timeline:hover { color:#fff; text-decoration:none; } html[data-theme="dark"] .mood-sheet__panel { border-color:#74455b; background:#2f2132ee; }.mood-sheet__summary { color:#f1dce5; }

.mood-trend { max-width:980px; }.mood-trend__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.mood-trend__head h2 { margin:0 !important; font-size:18px !important; }.mood-trend__head span { display:flex; gap:10px; font-size:12px; }.male-mark { color:#3b5eea; }.female-mark { color:#df5b91; }.mood-trend svg { display:block; width:100%; height:auto; margin-top:12px; overflow:visible; }.mood-trend__grid line { stroke:#f1dce5; stroke-width:1; }.mood-trend__grid text,.mood-trend__ticks text { fill:#987283; font-size:11px; text-anchor:end; }.mood-trend__ticks text { text-anchor:middle; }.mood-trend__male,.mood-trend__female { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.mood-trend__male { stroke:#3b5eea; }.mood-trend__female { stroke:#df5b91; } html[data-theme="dark"] .mood-trend__grid line { stroke:#5b3b4b; } html[data-theme="dark"] .mood-trend__grid text,html[data-theme="dark"] .mood-trend__ticks text { fill:#d3a7b8; }

/* One pink visual system: blue remains exclusive to the highlighted sender. */
:root { accent-color:#e55d94; }
.page-content > h1 { color:#513043; }.hub-heading span { color:#63364a; }
input:focus,select:focus { outline-color:#f7c4d7; border-color:#e57aa4; }
input[type="range"] { accent-color:#e55d94; }
input[type="range"]::-webkit-slider-runnable-track { height:7px; border-radius:999px; background:#f6c9d9; }
input[type="range"]::-webkit-slider-thumb { width:17px; height:17px; margin-top:-5px; border:0; border-radius:50%; background:#e55d94; box-shadow:0 2px 6px #a2325b55; -webkit-appearance:none; }
input[type="range"]::-moz-range-track { height:7px; border-radius:999px; background:#f6c9d9; }
input[type="range"]::-moz-range-progress { height:7px; border-radius:999px; background:#e55d94; }
input[type="range"]::-moz-range-thumb { width:17px; height:17px; border:0; border-radius:50%; background:#e55d94; }
details { background:#fff6fa; } summary { color:#754359; }
th { background:#fff5f9; color:#815466; } th,td,.message { border-color:#f2e0e8; }
.loading-overlay { background:#fff9fcdc; color:#7a4058; }
html[data-theme="dark"] body { background:radial-gradient(circle at 20% 0,#42233d,#18111a 55%); }
html[data-theme="dark"] .muted { color:#d4afbe !important; } html[data-theme="dark"] details { background:#352438 !important; }

/* Beta diary is always the last visible section; use the browser's default
   sans-serif typography instead of the former calligraphic face. */
.page-content:has(.mood-ai-preview) { display:flex; flex-direction:column; }
.page-content:has(.mood-ai-preview) .mood-ai-preview { order:99; }
.mood-ai-preview__item span { font-family:inherit !important; }
.mood-sheet__summary { font-family:inherit !important; font-size:18px !important; }

/* Beta progress is database-derived, so it remains accurate after a server restart. */
.mood-beta-progress { margin-top:14px; padding:13px 14px; border:1px solid #f0cad9; border-radius:14px; background:linear-gradient(135deg,#fff7fa,#fff); }.mood-beta-progress__heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:#704053; font-size:14px; }.mood-beta-progress__heading span { color:#bf4d79; font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; }.mood-beta-progress__track { height:10px; margin:10px 0 7px; overflow:hidden; border-radius:999px; background:#f6d7e2; box-shadow:inset 0 1px 2px #9d31572b; }.mood-beta-progress__track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e976a2,#f1a5c1); box-shadow:0 1px 6px #d3487b66; transition:width .45s ease; }.mood-beta-progress.is-complete .mood-beta-progress__track i { background:linear-gradient(90deg,#cc4f7c,#ed83a9); }.mood-beta-progress small { color:#9a667b; font-size:12px; line-height:1.45; } html[data-theme="dark"] .mood-beta-progress { border-color:#714357; background:linear-gradient(135deg,#352438,#251a29); } html[data-theme="dark"] .mood-beta-progress__track { background:#5a3647; } html[data-theme="dark"] .mood-beta-progress small { color:#d4afbe; }
@media (max-width:620px) { .mood-beta-progress { padding:12px; }.mood-beta-progress__heading { align-items:flex-start; flex-direction:column; gap:3px; }.mood-beta-progress__heading span { white-space:normal; } }

.mood-ai-preview { max-width:980px; }.mood-ai-preview > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }.mood-ai-preview h2 { margin:0 !important; font-size:18px !important; }.mood-ai-preview > div:first-child p { margin:0; font-size:12px; }.mood-ai-preview__item { display:grid; grid-template-columns:90px minmax(0,1fr) auto; align-items:center; gap:13px; margin-top:8px; padding:12px 13px; border:1px solid #f1d6e1; border-radius:13px; background:linear-gradient(110deg,#fff8fb,#fff); color:#623a4d; text-decoration:none; }.mood-ai-preview__item:hover { border-color:#e98aac; background:#fff1f6; text-decoration:none; transform:translateY(-1px); }.mood-ai-preview__item time { display:grid; gap:5px; color:#b84b75; font-size:12px; font-weight:850; }.mood-ai-preview__item time b { display:inline-block; width:max-content; max-width:100%; padding:3px 6px; border-radius:999px; background:#ffe1ec; color:#a54068; font-size:11px; }.mood-ai-preview__item span { font-family:"KaiTi","STKaiti",serif; font-size:16px; line-height:1.55; }.mood-ai-preview__item small { color:#b66081; font-size:12px; white-space:nowrap; } html[data-theme="dark"] .mood-ai-preview__item { border-color:#694356; background:#302032; color:#f0dbe4; }.mood-ai-preview__item:hover { color:#fff; }
.mood-ai-preview__scores { display:grid; gap:2px; margin-top:2px; font-style:normal; font-size:11px; line-height:1.3; }.mood-ai-preview__scores i { font-style:normal; }.mood-ai-preview__scores i:first-child { color:#2e55d4; }.mood-ai-preview__scores i:last-child { color:#d8447e; }
.diary-name { display:inline-block; padding:1px 5px; margin:0 2px; border:1px solid currentColor; border-radius:5px; font-family:inherit; font-size:.88em; line-height:1.25; }.diary-name--male { color:#245fca; background:#eef5ff; }.diary-name--female { color:#d4427e; background:#fff0f6; }

/* Beta 日记：日期不折行，摘要占满下一行，人物名保留清晰的颜色识别。 */
.mood-ai-preview__item { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"meta link" "summary summary"; align-items:start; }
.mood-ai-preview__meta { grid-area:meta; display:flex; align-items:center; gap:11px; min-width:0; }
.mood-ai-preview__meta > b { flex:0 0 auto; white-space:nowrap; color:#a54068; font-size:13px; font-variant-numeric:tabular-nums; }
.mood-ai-preview__scores { display:flex; flex:0 1 auto; flex-wrap:wrap; align-items:center; gap:3px 10px; margin:0; font-family:inherit !important; font-size:12px !important; line-height:1.3 !important; }
.mood-ai-preview__scores i { font-style:normal; white-space:nowrap; }
.mood-ai-preview__mood { display:inline-block; padding:3px 8px; border-radius:999px; color:#9b3d69; background:#ffe7f0; font-family:inherit !important; font-size:11px !important; font-weight:800; line-height:1.3 !important; white-space:nowrap; }
.mood-ai-preview__score--male { color:#2e55d4; }
.mood-ai-preview__score--female { color:#d8447e; }
.mood-ai-preview__item > p { grid-area:summary; margin:2px 0 0; color:#623a4d; font-family:inherit !important; font-size:15px; line-height:1.72; }
.mood-ai-preview__item > a { grid-area:link; align-self:center; white-space:nowrap; }
.mood-ai-preview__item .diary-name { font-weight:850; white-space:nowrap; }
@media (max-width:620px) { .mood-ai-preview__item { grid-template-columns:1fr; grid-template-areas:"meta" "summary" "link"; gap:7px; }.mood-ai-preview__meta { align-items:flex-start; flex-wrap:wrap; gap:5px 10px; }.mood-ai-preview__meta > b { font-size:12px; }.mood-ai-preview__item > a { justify-self:start; } }
html[data-theme="dark"] .mood-ai-preview__item > p { color:#f0dbe4; }
@media (max-width:620px) { .mood-ai-preview > div:first-child { display:block; }.mood-ai-preview > div:first-child p { margin-top:4px; }.mood-ai-preview__item { grid-template-columns:1fr; gap:4px; }.mood-ai-preview__item span { font-size:15px; }.mood-ai-preview__item small { margin-top:2px; } }

/* A six-week month must extend the document instead of being clipped by a viewport. */
html,body { min-height:100%; overflow-y:auto; }.mood-calendar { height:auto !important; max-height:none !important; overflow:visible !important; padding-bottom:22px; }.mood-grid { height:auto !important; max-height:none !important; overflow:visible !important; align-content:start; }.mood-day { overflow:visible; }.mood-day small { min-height:2.9em; overflow:visible; text-overflow:clip; white-space:normal; word-break:break-all; line-height:1.42; }
@media (max-width:760px) { .mood-calendar { padding-bottom:110px; }.mood-grid { grid-auto-rows:minmax(88px,auto); }.mood-day { min-height:88px; }.mood-day small { display:block; min-height:2.8em; font-size:9px; } }
.mood-day small { color:#111 !important; font-weight:700; }
.mood-day--beta .mood-day__faces--inline { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px; width:100%; font-size:12px; line-height:1.25; white-space:nowrap; }
.mood-day--beta .mood-day__faces--inline i { display:inline-block; }
.mood-day--beta { min-height:112px; }
.mood-day--beta .mood-day__diary { display:-webkit-box; width:100%; min-height:4.15em; overflow:hidden; color:#111 !important; font-size:10px; line-height:1.42; text-overflow:ellipsis; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.mood-day--beta .mood-day__tag { display:block; align-self:center; width:max-content; max-width:100%; margin:1px 0 2px; overflow:hidden; padding:2px 6px; border-radius:999px; color:#a22e63; background:#ffe4efcc; font-size:10px; font-weight:900; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.mood-day--beta .mood-day__number { color:#3f1f2f !important; font-weight:950; }
.mood-sheet__date,.mood-sheet__scores,.mood-sheet__words { color:#5b263e !important; }
.mood-sheet__summary { color:#3d1729 !important; font-weight:700; }
.mood-sheet__hint { display:block; margin-top:10px; color:#8d6676; font-size:12px; line-height:1.5; }
body.mood-sheet-open { overflow:hidden; }
@media (max-width:760px) { .mood-day--beta { min-height:118px; } .mood-day--beta .mood-day__faces--inline { gap:2px; font-size:9px; } .mood-day--beta .mood-day__tag { font-size:10px; } .mood-day--beta .mood-day__diary { min-height:4.05em; font-size:9px; -webkit-line-clamp:4; } }
html[data-theme="dark"] .mood-day small { color:#f5f5f5 !important; }
.month-notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.month-note{padding:22px}.month-note__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.month-note__head h3{margin:0;color:#9d315f}.month-note__head span{background:#fde1ed;color:#b73570;border-radius:999px;padding:5px 10px;font-size:.85em}.month-note p{line-height:1.8;color:#2d2330}.month-note__stats{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 10px;color:#5e4b57;font-size:.9em}.month-note__stats b:first-child{color:#2777d8}.month-note__stats b:nth-child(2){color:#d94c8b}.month-note small{color:#111;font-weight:600}@media(max-width:600px){.month-notes-grid{grid-template-columns:1fr}.month-note{padding:18px}}
.mood-month-report{padding:18px;border:1px solid #f0c7d8;border-radius:14px;background:#fff7fb}.mood-month-report__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.mood-month-report__head h2{margin:0;font-size:18px}.mood-month-report__stats{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0;color:#5e4b57}.mood-month-report__stats b:first-child{color:#2777d8}.mood-month-report__stats b:nth-child(2){color:#d94c8b}

/* Compact two-person mood labels shared by the CPU and Beta calendars. */
.mood-day .mood-day__faces,
.mood-day .mood-day__faces--inline {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  font-size:11px;
  line-height:1.15;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.mood-day .mood-day__faces i,
.mood-day .mood-day__faces--inline i { display:inline-block; min-width:0; font-style:normal; white-space:nowrap; }
@media (max-width:760px) {
  .mood-day .mood-day__faces,
  .mood-day .mood-day__faces--inline { gap:2px; font-size:8px; letter-spacing:-.06em; }
}

/* On a phone the calendar controls and two-person mood labels need their own
   lines; this preserves the full month name and prevents score collisions. */
@media (max-width:760px) {
  .mood-calendar__nav { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; }
  .mood-calendar__nav button { min-width:0; padding:7px 5px; font-size:12px; white-space:nowrap; }
  .mood-calendar__nav h2 { min-width:0; margin:0 !important; font-size:15px !important; white-space:nowrap; }
  .mood-day .mood-day__faces,.mood-day .mood-day__faces--inline { display:grid; grid-template-columns:1fr; gap:2px; justify-items:center; font-size:9px; letter-spacing:0; line-height:1.18; white-space:normal; }
  .mood-day .mood-day__faces i,.mood-day .mood-day__faces--inline i { white-space:nowrap; }
}

/* Daily background intensity follows the average of both available mood scores. */
.mood-day[data-mood-average] {
  border-color:var(--mood-border);
  background:var(--mood-bg);
  transition:filter .16s ease,transform .16s ease,box-shadow .16s ease;
}
.mood-day[data-mood-average]:hover {
  background:var(--mood-bg);
  filter:saturate(1.08) brightness(.985);
  box-shadow:0 5px 14px #b83f7024;
}
html[data-theme="dark"] .mood-day[data-mood-average] {
  border-color:var(--mood-border);
  background:var(--mood-bg-dark);
}

/* Smooth month-level mood chart, rendered immediately below the calendar. */
.mood-month-report:empty { display:none; }
.mood-month-report { max-width:980px; margin-top:16px; overflow:hidden; }
.mood-trend__head { align-items:flex-start; }
.mood-trend__head > div { display:grid; gap:4px; }
.mood-trend__head small { color:#91677a; font-size:12px; }
.mood-trend__head span { gap:12px; }
.mood-trend__head b { display:inline-flex; align-items:center; gap:5px; font-size:12px; }
.mood-trend__head b::before { content:""; width:18px; height:3px; border-radius:999px; background:currentColor; }
.mood-trend svg { min-width:620px; }
.mood-trend__dot { stroke:#fff; stroke-width:1.5; }
.mood-trend__dot--male { fill:#3b5eea; }
.mood-trend__dot--female { fill:#df5b91; }
@media (max-width:680px) {
  .mood-month-report { overflow-x:auto; padding:14px !important; }
  .mood-trend__head { min-width:590px; }
  .mood-trend__head h2 { font-size:16px !important; }
}
html[data-theme="dark"] .mood-trend__head small { color:#d4afbe; }
.mood-day[data-mood-relative="0.000"] { box-shadow:inset 0 0 0 1px #fff8; }
.mood-day[data-mood-relative="1.000"] { box-shadow:0 5px 14px #b83f7040; }

/* The same Ollama month report is shown directly below both calendars. */
.mood-month-note { display:grid; gap:9px; margin-bottom:18px; padding:15px; border:1px solid #efc5d7; border-radius:13px; background:linear-gradient(125deg,#fff8fb,#fff); color:#63384d; }
.mood-month-note__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mood-month-note__head b { color:#8f3158; font-size:16px; }
.mood-month-note__head span { padding:4px 8px; border-radius:999px; background:#ffe2ed; color:#b63f6e; font-size:12px; font-weight:800; }
.mood-month-note p { margin:0; font-size:15px; line-height:1.75; }
.mood-month-note__scores { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; }
.mood-month-note__scores i { font-style:normal; font-weight:850; }
.mood-month-note__scores small,.mood-month-note__keywords { color:#8a6273; font-size:12px; line-height:1.5; }
.mood-month-note > a { justify-self:start; font-size:13px; }
.mood-month-note--pending { display:flex; flex-direction:row; align-items:center; color:#9b687d; font-size:13px; }
.mood-month-note--pending b { color:#8f3158; }
html[data-theme="dark"] .mood-month-note { border-color:#704257; background:#302032; color:#f0dbe4; }
html[data-theme="dark"] .mood-month-note__head span { background:#603147; color:#ffc4db; }
html[data-theme="dark"] .mood-month-note__scores small,html[data-theme="dark"] .mood-month-note__keywords { color:#d9b7c5; }

/* Glass UI refinement: translucent surfaces need visible color behind them. */
.relationship-hero {
  isolation:isolate;
  background:
    radial-gradient(circle at 14% 24%,rgba(99,189,242,.42),transparent 31%),
    radial-gradient(circle at 86% 18%,rgba(246,105,163,.40),transparent 34%),
    radial-gradient(circle at 50% 56%,rgba(255,194,218,.34),transparent 38%),
    linear-gradient(135deg,#e9f8ff 0%,#fff4f8 50%,#ffe8f1 100%);
}
.relationship-hero::before { filter:drop-shadow(0 0 9px #f2a6c8); }
.relationship-hero::after { filter:drop-shadow(0 0 9px #91c9eb); }
.relationship-hero__middle {
  min-width:190px;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:rgba(255,255,255,.34);
  box-shadow:0 15px 38px rgba(127,74,102,.16),inset 0 1px 0 rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(24px) saturate(1.45);
  backdrop-filter:blur(24px) saturate(1.45);
}
.relationship-hero__middle b {
  position:relative;
  will-change:transform,box-shadow;
  animation:relationship-heartbeat 2.5s ease-in-out infinite;
  transform-origin:center;
}
.relationship-hero__middle b::after {
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border:2px solid rgba(235,91,145,.48);
  border-radius:50%;
  animation:relationship-heart-ring 2.5s ease-out infinite;
}
.relationship-hero { overflow:visible; }.relationship-hero__person { align-self:center; justify-self:center; width:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:inherit !important; font:inherit; cursor:pointer; }.relationship-hero__person:hover { transform:none !important; box-shadow:none !important; }.relationship-hero__middle { cursor:pointer; }.relationship-hero__heart { position:relative; display:grid; place-items:center; width:48px; height:48px; margin:2px 0; padding:0; border:0; border-radius:50%; background:linear-gradient(145deg,#f587b3,#dc5b91); color:#fff; box-shadow:0 7px 15px #d451813b; font-size:24px; cursor:pointer; }.relationship-hero__heart.is-tapped { animation:hero-heart-tap .48s ease; }.hero-bubble { position:absolute; z-index:20; bottom:calc(100% + 9px); left:50%; min-width:max-content; max-width:min(220px,62vw); padding:8px 11px; border:1px solid #fff; border-radius:13px; background:#fffdfef2; box-shadow:0 8px 22px #61304624; color:#543041; font-size:13px; font-weight:800; line-height:1.4; text-align:center; text-decoration:none; transform:translateX(-50%); animation:hero-bubble-in .22s ease both; }.hero-bubble:hover { text-decoration:none; filter:brightness(.97); }.hero-bubble--male { color:#245fca; }.hero-bubble--female { color:#c9477a; }.relationship-hero__person .hero-bubble { bottom:calc(100% + 8px); }.relationship-hero__heart .hero-bubble { bottom:calc(100% + 10px); }@keyframes hero-heart-tap { 0%,100% { transform:scale(1); } 45% { transform:scale(1.24); } }@keyframes hero-bubble-in { from { opacity:0; transform:translate(-50%,7px) scale(.92); } to { opacity:1; transform:translateX(-50%); } }
.relationship-hero__person .hero-bubble { bottom:calc(100% - 5px); }
@keyframes relationship-heartbeat {
  0%,100% { transform:scale(1); box-shadow:0 7px 15px #d4517f3b; }
  18% { transform:scale(1.26); box-shadow:0 11px 28px #d4517f78; }
  34% { transform:scale(.96); box-shadow:0 6px 13px #d4517f35; }
  50% { transform:scale(1.13); box-shadow:0 9px 22px #d4517f62; }
  72% { transform:scale(1); box-shadow:0 7px 15px #d4517f3b; }
}
@keyframes relationship-heart-ring {
  0% { transform:scale(.72); opacity:.9; }
  60%,100% { transform:scale(1.8); opacity:0; }
}

.insight-hub,
.dashboard-grid > .card,
.memory-card,
.data-management,
.conversation-summary {
  border-color:rgba(255,255,255,.74) !important;
  background:rgba(255,255,255,.66) !important;
  box-shadow:0 12px 30px rgba(103,61,82,.08),inset 0 1px 0 rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.18);
  backdrop-filter:blur(16px) saturate(1.18);
}
.insight-hub { position:relative; overflow:hidden; }
.insight-hub::after {
  content:"";
  position:absolute;
  right:-80px;
  bottom:-115px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(246,148,190,.16),transparent 68%);
  pointer-events:none;
}
.hub-action {
  position:relative;
  z-index:1;
  border-color:rgba(226,205,216,.72);
  background:rgba(255,250,252,.72);
  box-shadow:0 5px 14px rgba(112,62,86,.045);
}
.hub-action:hover {
  border-color:rgba(230,106,157,.40);
  background:rgba(255,255,255,.91);
  box-shadow:0 11px 24px rgba(206,77,129,.12);
}
.dashboard-grid > .card { transition:transform .18s ease,box-shadow .18s ease; }
.dashboard-grid > .card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(111,64,88,.13),inset 0 1px 0 #fff !important; }
.dashboard-grid > .relationship-card {
  background:linear-gradient(135deg,#ffd3e4 0%,#f28ab5 100%) !important;
  border-color:#e46b9d !important;
  color:#6f2746 !important;
}
.dashboard-grid > .relationship-card strong { color:#9f2156 !important; }
.dashboard-grid > .relationship-card small,.dashboard-grid > .relationship-card .muted { color:#883a5e !important; }

/* The login card is also a good glass surface because the page already has a soft gradient. */
.page-content > form[action="/login"] {
  border-color:rgba(255,255,255,.80);
  background:rgba(255,255,255,.62);
  box-shadow:0 18px 46px rgba(105,65,87,.10),inset 0 1px 0 rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
}

html[data-theme="dark"] .relationship-hero__middle,
html[data-theme="dark"] .insight-hub,
html[data-theme="dark"] .dashboard-grid > .card,
html[data-theme="dark"] .memory-card,
html[data-theme="dark"] .data-management,
html[data-theme="dark"] .conversation-summary {
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(43,29,42,.68) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .hub-action { border-color:rgba(255,255,255,.09); background:rgba(54,37,52,.72); }
html[data-theme="dark"] .hub-action:hover { background:rgba(65,43,61,.90); }
@media (max-width:620px) {
  .relationship-hero__middle { min-width:0; padding:11px 6px; border-radius:17px; }
  .insight-hub,.dashboard-grid > .card,.memory-card,.data-management,.conversation-summary { -webkit-backdrop-filter:blur(12px) saturate(1.12); backdrop-filter:blur(12px) saturate(1.12); }
}

/* Keep the three dashboard statistics visually paired with the relationship card. */
.dashboard-grid > .total-card,
.dashboard-grid > .chart-card {
  border-color:#e46b9d !important;
}

html[data-theme="dark"] .dashboard-grid > .total-card,
html[data-theme="dark"] .dashboard-grid > .chart-card {
  border-color:#e46b9d !important;
}

/* Preserve the desktop rail's vertical centering while its hover shadow changes. */
@media (min-width:769px) {
  .sidebar:hover {
    transform:translateY(-50%) !important;
  }
}

/* The pink outline belongs to the animated 3D layer, so it rotates with it. */
.relationship-hero {
  border-color:transparent !important;
}
.relationship-hero__flip {
  box-sizing:border-box;
  border:1px solid rgba(231,166,194,.92);
}
.relationship-hero__face--back {
  border-color:transparent !important;
}

/* Mobile memory navigation: four stable destinations and a secondary sheet. */
.mobile-dock,.mobile-more-sheet,.mobile-compact-title { display:none; }
@media (max-width:768px) {
  .sidebar { display:none !important; }
  .app-shell { padding-bottom:96px !important; }
  .mobile-dock { position:fixed; inset:auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; z-index:110; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:6px; border:1px solid rgba(255,255,255,.34); border-radius:20px; background:rgba(105,42,70,.94); box-shadow:0 12px 32px rgba(71,23,49,.30); -webkit-backdrop-filter:blur(18px) saturate(1.16); backdrop-filter:blur(18px) saturate(1.16); }
  .mobile-dock a,.mobile-dock button { display:grid; place-items:center; gap:2px; min-width:0; min-height:52px; margin:0; padding:5px 2px; border:0; border-radius:14px; background:transparent; box-shadow:none; color:#fff4f9; font-size:18px; font-weight:850; line-height:1; text-decoration:none; }
  .mobile-dock span { font-size:11px; line-height:1.2; }
  .mobile-dock a.is-active,.mobile-dock button.is-active { background:rgba(255,255,255,.19); color:#fff; }
  .mobile-more-sheet { position:fixed; inset:0; z-index:140; }
  .mobile-more-sheet.show { display:block; }
  .mobile-more-sheet__backdrop { position:absolute; inset:0; width:100%; margin:0; border:0; border-radius:0; background:rgba(52,25,39,.48); box-shadow:none; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  .mobile-more-sheet__panel { position:absolute; inset:auto 0 0; max-height:min(78vh,650px); margin:0; overflow-y:auto; padding:10px 18px calc(22px + env(safe-area-inset-bottom)); border:1px solid #f0d4df; border-radius:26px 26px 0 0; background:rgba(255,250,252,.98); box-shadow:0 -18px 50px rgba(62,27,44,.28); }
  .mobile-more-sheet__handle { width:42px; height:5px; margin:0 auto 13px; border-radius:99px; background:#d7bec9; }
  .mobile-more-sheet__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .mobile-more-sheet__head small { color:#b4587d; font-weight:800; }.mobile-more-sheet__head h2 { margin:3px 0 0; color:#583347; font-size:19px; }
  .mobile-more-sheet__close { flex:0 0 44px; width:44px; min-height:44px; margin:0; padding:0; border-radius:50%; background:#f5e8ee; box-shadow:none; color:#704256; font-size:25px; }
  .mobile-more-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:18px; }
  .mobile-more-grid a { display:grid; justify-items:center; gap:7px; min-height:82px; padding:12px 5px; border:1px solid #f0dce5; border-radius:16px; background:#fff; color:#704256; font-size:12px; text-align:center; }
  .mobile-more-grid b { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#f5e9ff; color:#9155bf; font-size:18px; }
  .mobile-more-sheet__logout { display:block; margin-top:16px; padding:12px; color:#b6425c; text-align:center; }
  body.mobile-sheet-open { overflow:hidden; }
}
@media (max-width:680px) {
  .tool-floating-title.is-pinned { visibility:hidden; pointer-events:none; }
  .mobile-compact-title { position:fixed; top:8px; right:12px; left:12px; z-index:100; grid-template-columns:44px minmax(0,1fr) 54px; align-items:center; min-height:48px; padding:2px 5px; border:1px solid rgba(255,255,255,.45); border-radius:16px; background:rgba(255,250,252,.88); box-shadow:0 8px 24px rgba(76,34,54,.16); opacity:0; transform:translateY(-12px); pointer-events:none; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:opacity .18s ease,transform .18s ease; }
  .mobile-compact-title.is-visible { display:grid; opacity:1; transform:none; pointer-events:auto; }
  .mobile-compact-title strong { overflow:hidden; color:#5b3448; font-size:15px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-compact-title button { width:auto; min-height:44px; margin:0; padding:0 8px; background:transparent; box-shadow:none; color:#a4426d; font-size:13px; }
  .mobile-compact-title__back { font-size:22px !important; }
  input,select,button { min-height:44px; }
}
html[data-theme="dark"] .mobile-more-sheet__panel,html[data-theme="dark"] .mobile-compact-title { border-color:#684557; background:rgba(45,30,43,.96); }
html[data-theme="dark"] .mobile-more-sheet__head h2,html[data-theme="dark"] .mobile-compact-title strong { color:#f7dfe9; }
html[data-theme="dark"] .mobile-more-grid a { border-color:#5a3b4b; background:#382736; color:#f3dbe5; }

/* Data tables become labelled reading cards on small screens. */
@media (max-width:768px) {
  table.mobile-card-table { display:block; overflow:visible; border:0; background:transparent !important; box-shadow:none !important; white-space:normal; }
  .mobile-card-table tr:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .mobile-card-table tr:not(:first-child) { display:block; margin:0 0 10px; padding:13px 14px; border:1px solid #eed9e3; border-radius:15px; background:rgba(255,255,255,.86); box-shadow:0 5px 15px rgba(94,43,66,.06); }
  .mobile-card-table td { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:7px 0; border:0; color:#5d3c4b; text-align:right; font-variant-numeric:tabular-nums; }
  .mobile-card-table td::before { content:attr(data-label); flex:0 0 43%; color:#a16a80; font-size:12px; font-weight:800; text-align:left; }
  .mobile-card-table td:first-child { padding-top:0; color:#4d2c3c; font-size:16px; font-weight:850; }
  .mobile-card-table td:last-child { padding-bottom:0; }
  .mobile-card-table tr.mobile-card-table__empty { padding:14px; color:#987283; text-align:left; }
  .mobile-card-table tr.mobile-card-table__empty td { display:block; padding:0; text-align:left; }
  .mobile-card-table tr.mobile-card-table__empty td::before { content:none; }
  .mobile-card-table--rhythm tr:not(:first-child) { border-color:#e9c6d6; background:linear-gradient(135deg,#fff8fb,#fff); }
  .mobile-card-table--rhythm td:last-child { margin-top:5px; padding:9px 10px; border-radius:10px; background:#fff0f6; color:#bf4778; font-weight:900; }
  html[data-theme="dark"] .mobile-card-table tr:not(:first-child) { border-color:#624657; background:#342634; box-shadow:none; }
  html[data-theme="dark"] .mobile-card-table td { color:#f0dbe4; }
  html[data-theme="dark"] .mobile-card-table td::before { color:#d4a6b9; }
html[data-theme="dark"] .mobile-card-table--rhythm td:last-child { background:#512e42; color:#ffb8d1; }

/* Desktop navigation reads as a directory: section labels are not buttons,
   while the open page has a clear, persistent selection state. */
@media (min-width:769px) {
  .sidebar .nav-group {
    display:flex !important;
    align-items:center;
    gap:8px;
    margin:17px 7px 5px !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#f2b8cf !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.13em !important;
    pointer-events:none;
    user-select:none;
  }
  .sidebar .nav-group::after { content:""; height:1px; flex:1; background:rgba(255,226,237,.24); }
  .sidebar .nav-group:first-of-type { margin-top:4px !important; }
  .sidebar a {
    position:relative;
    display:flex !important;
    align-items:center;
    min-height:39px;
    padding:9px 11px 9px 15px !important;
    border:1px solid transparent;
    color:#ffeef5 !important;
    font-weight:720;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
  }
  .sidebar a:hover { background:rgba(255,255,255,.11) !important; transform:translateX(2px); }
  .sidebar a.is-active {
    border-color:rgba(255,229,240,.38);
    background:linear-gradient(110deg,rgba(255,255,255,.25),rgba(255,209,227,.14)) !important;
    color:#fff !important;
    box-shadow:0 7px 18px rgba(47,13,30,.20),inset 0 1px 0 rgba(255,255,255,.18);
    font-weight:900;
  }
  .sidebar a.is-active::before { content:""; position:absolute; left:5px; width:4px; height:19px; border-radius:99px; background:#ffd5e6; box-shadow:0 0 11px rgba(255,213,230,.8); }
  .sidebar .logout-link { margin-top:15px; padding-top:11px !important; border-top:1px solid rgba(255,226,237,.18); }
  .sidebar .logout-link.is-active { background:transparent !important; border-color:transparent; box-shadow:none; }
}
}

/* Final mobile dock isolation. Keep legacy sidebar/nav rules from leaking into
   the four-item memory navigation. This block intentionally comes last among
   navigation layers so future page styles cannot resurrect the old dock. */
@media (max-width:768px) {
  .app-shell > .sidebar { display:none !important; }
  nav.mobile-dock {
    position:fixed !important;
    top:auto !important;
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    left:10px !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:60px !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:6px !important;
    gap:4px !important;
    flex-wrap:nowrap !important;
    font-size:initial !important;
  }
  nav.mobile-dock::before,nav.mobile-dock::after { content:none !important; display:none !important; }
  nav.mobile-dock > a,nav.mobile-dock > button {
    width:auto !important;
    height:60px !important;
    min-height:60px !important;
    margin:0 !important;
    padding:5px 2px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .relationship-hero__middle b { animation:none; }
  .dashboard-grid > .card,.hub-action { transition:none; }
}

/* Mobile dock selection stays a bright, outlined tile; only one destination
   may be selected at a time. */
@media (max-width:768px) {
  nav.mobile-dock > a,nav.mobile-dock > button { opacity:1 !important; color:#fff4f9 !important; transition:background .16s ease,box-shadow .16s ease,border-color .16s ease !important; }
  nav.mobile-dock > a.is-active,nav.mobile-dock > button.is-active { border:1px solid rgba(255,255,255,.74) !important; background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,204,227,.24)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 4px 12px rgba(53,13,34,.25) !important; color:#fff !important; }
}

/* Side-by-side word lists in the yearly report. */
.person-word-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.person-word-card { padding:15px; border:1px solid #e7d7df; border-radius:15px; background:rgba(255,255,255,.58); box-shadow:inset 0 1px 0 rgba(255,255,255,.82); }
.person-word-card h3 { margin:0 0 10px; font-size:15px; }
.person-word-card ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:0; padding-left:22px; }
.person-word-card li { min-width:0; padding:3px 0; color:#694a59; font-size:13px; }
.person-word-card li span { display:inline-block; max-width:calc(100% - 42px); overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; white-space:nowrap; }
.person-word-card li b { margin-left:4px; color:#a77b8d; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.person-word-card--male { border-color:#c9ddf4; background:linear-gradient(135deg,rgba(238,247,255,.88),rgba(255,255,255,.58)); }
.person-word-card--female { border-color:#f0cbd9; background:linear-gradient(135deg,rgba(255,240,247,.88),rgba(255,255,255,.58)); }
html[data-theme="dark"] .person-word-card { border-color:#604657; background:rgba(47,33,46,.72); }
html[data-theme="dark"] .person-word-card li { color:#ecd8e1; }
html[data-theme="dark"] .person-word-card li b { color:#d9aabd; }
@media (max-width:620px) { .person-word-grid { grid-template-columns:1fr; }.person-word-card ol { grid-template-columns:1fr 1fr; gap:5px 10px; } }

/* Unified floating title bars for every insight tool page. */
.page-content:has(#hour-chart) > h1,
.page-content:has(.mood-calendar-intro) > h1,
.page-content:has(.month-notes-grid) > h1,
.page-content:has(#capsule-trend) > h1,
.page-content:has(#emotion-wordcloud) > h1,
.page-content:has(.geometry-intro) > h1,
.page-content:has(.today-controls) > h1,
.page-content:has(#heatmap) > h1 {
  position:sticky;
  top:16px;
  z-index:8;
  display:flex;
  align-items:center;
  min-height:58px;
  margin:0 0 20px;
  padding:20px 28px;
  border:0;
  border-radius:23px;
  color:#fff;
  background:linear-gradient(112deg,#df5a92 0%,#b34882 50%,#7b3b73 100%);
  box-shadow:0 15px 35px rgba(150,59,112,.22),inset 0 1px 0 rgba(255,255,255,.24);
  font-size:clamp(22px,3.2vw,34px);
  letter-spacing:-.055em;
}
.page-content:has(.mood-calendar-intro) > h1,
.page-content:has(.month-notes-grid) > h1 { background:linear-gradient(112deg,#e469a1,#a84278 52%,#743a71); }
.page-content:has(.geometry-intro) > h1 { background:linear-gradient(112deg,#df6b85,#b14c83 52%,#743a71); }
.page-content:has(.today-controls) > h1 { background:linear-gradient(112deg,#df6b92,#a2467f 52%,#713a70); }
html[data-theme="dark"] .page-content:has(#hour-chart) > h1,
html[data-theme="dark"] .page-content:has(.mood-calendar-intro) > h1,
html[data-theme="dark"] .page-content:has(.month-notes-grid) > h1,
html[data-theme="dark"] .page-content:has(#capsule-trend) > h1,
html[data-theme="dark"] .page-content:has(#emotion-wordcloud) > h1,
html[data-theme="dark"] .page-content:has(.geometry-intro) > h1,
html[data-theme="dark"] .page-content:has(.today-controls) > h1,
html[data-theme="dark"] .page-content:has(#heatmap) > h1 { color:#fff !important; }
@media (max-width:680px) {
  .page-content:has(#hour-chart) > h1,
  .page-content:has(.mood-calendar-intro) > h1,
  .page-content:has(.month-notes-grid) > h1,
  .page-content:has(#capsule-trend) > h1,
  .page-content:has(#emotion-wordcloud) > h1,
  .page-content:has(.geometry-intro) > h1,
  .page-content:has(.today-controls) > h1,
  .page-content:has(#heatmap) > h1 { top:8px; min-height:44px; margin-bottom:14px; padding:16px 20px; border-radius:18px; font-size:22px; }
}

/* Reliable fixed fallback for tool-title bars (activated by static/app.js). */
.tool-floating-title__anchor,.tool-floating-title__spacer { display:block; height:0; margin:0; padding:0; }
.tool-floating-title { position:relative !important; top:auto !important; }
.tool-floating-title.is-pinned { position:fixed !important; top:16px !important; z-index:80; margin:0 !important; }
@media (max-width:680px) { .tool-floating-title.is-pinned { top:8px !important; } }

/* Navigation refinement: a centred desktop rail and a compact mobile dock. */
@media (min-width:769px) {
  .sidebar {
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%);
    max-height:calc(100vh - 32px);
  }
}
@media (max-width:768px) {
  .app-shell { padding-bottom:104px !important; }
  .sidebar {
    inset:auto 10px calc(10px + env(safe-area-inset-bottom)) 10px !important;
    z-index:90 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-items:stretch;
    gap:4px;
    width:auto !important;
    padding:6px !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:20px !important;
    background:linear-gradient(120deg,rgba(103,40,68,.96),rgba(125,51,79,.96)) !important;
    box-shadow:0 12px 30px rgba(71,23,49,.30) !important;
    -webkit-backdrop-filter:blur(16px) saturate(1.15);
    backdrop-filter:blur(16px) saturate(1.15);
  }
  .sidebar a[href="/"],.sidebar a[href="/report"],.sidebar a[href="/mood-calendar"],.sidebar a[href="/mood-calendar-beta"] {
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-width:0 !important;
    min-height:48px;
    overflow:hidden;
    padding:5px 2px !important;
    border-radius:14px !important;
    color:#fff6fa !important;
    font-size:11px !important;
    font-weight:800;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .sidebar a[href="/mood-calendar"],.sidebar a[href="/mood-calendar-beta"] { background:rgba(255,255,255,.13) !important; }
  .sidebar a:active { transform:scale(.96); background:rgba(255,255,255,.20) !important; }
}

/* In-place curated-memory refresh. */
.memory-card blockquote,.memory-card__meta,.memory-card__link { transition:opacity .18s ease,transform .28s ease; }
.memory-card.is-loading blockquote,.memory-card.is-loading .memory-card__meta,.memory-card.is-loading .memory-card__link { opacity:.42; }
.memory-card.is-loading .memory-card__refresh { pointer-events:none; opacity:.72; }
.memory-card.is-changed blockquote,.memory-card.is-changed .memory-card__meta { animation:memory-card-arrive .4s ease; }
@keyframes memory-card-arrive { from { opacity:.2; transform:translateY(7px); } to { opacity:1; transform:none; } }

/* Calendar heading: keep the title, selected month, and today marker together. */
.mood-calendar__title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.mood-calendar__title-row h2 { margin:0 !important; color:#63364a; font-size:20px !important; }
.mood-calendar__date { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.mood-calendar__date strong { color:#63364a; font-size:18px; white-space:nowrap; }
.mood-calendar__date span { padding:4px 9px; border-radius:999px; color:#a3456d; background:#ffe4ef; font-size:11px; font-weight:850; white-space:nowrap; }
.mood-calendar__date span.is-current { color:#fff; background:linear-gradient(135deg,#e55d94,#ad457b); box-shadow:0 4px 10px #d55a8d33; }
.mood-calendar__date span.is-empty { color:#9a7b89; background:#f5edf2; }
.mood-calendar__nav-hint { color:#a16a80; font-size:11px; font-weight:700; }
.mood-calendar__nav-center { display:grid; justify-items:center; gap:4px; min-width:0; }
.mood-calendar__nav-center strong { color:#7c4a60; font-size:14px; font-weight:850; white-space:nowrap; }
.mood-calendar__nav-center span { max-width:240px; overflow:hidden; padding:4px 10px; border-radius:999px; color:#fff; background:linear-gradient(135deg,#e55d94,#ad457b); box-shadow:0 4px 10px #d55a8d33; font-size:12px; font-weight:850; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.mood-calendar__nav-center span.is-empty { color:#9a7b89; background:#f5edf2; box-shadow:none; }
.mood-day--today { border-color:#e55d94 !important; box-shadow:0 0 0 2px #e55d9422, inset 0 1px 0 #fff !important; }
.mood-day__today { display:inline-block; padding:2px 5px; border-radius:999px; color:#fff; background:#e55d94; font-size:9px; font-style:normal; font-weight:850; line-height:1.2; }
@media (max-width:620px) {
  .mood-calendar__title-row { align-items:flex-start; gap:8px; }
  .mood-calendar__title-row h2 { font-size:17px !important; }
  .mood-calendar__date { display:grid; gap:4px; justify-items:end; }
  .mood-calendar__date strong { font-size:15px; }
  .mood-calendar__date span { padding:3px 7px; font-size:10px; }
  .mood-calendar__nav-hint { font-size:10px; }
  .mood-calendar__nav-center { gap:3px; }
  .mood-calendar__nav-center strong { font-size:12px; }
  .mood-calendar__nav-center span { max-width:150px; padding:3px 7px; font-size:10px; }
}

/* Last-word desktop sidebar presentation: group headings never look clickable. */
@media (min-width:769px) {
  .sidebar .sidebar-section-title {
    display:flex !important; align-items:center; gap:8px; margin:17px 7px 5px !important; padding:0 !important;
    border:0 !important; border-radius:0 !important; background:transparent !important; color:#f2b8cf !important;
    font-size:11px !important; font-weight:900 !important; letter-spacing:.13em !important; pointer-events:none; user-select:none;
  }
  .sidebar .sidebar-section-title::after { content:""; height:1px; flex:1; background:rgba(255,226,237,.24); }
  .sidebar .sidebar-section-title:first-of-type { order:20; }
  .sidebar .sidebar-section-title:nth-of-type(2) { order:5; }
  .sidebar a.is-active,[aria-current="page"].is-active {
    position:relative; border:1px solid rgba(255,229,240,.38) !important;
    background:linear-gradient(110deg,rgba(255,255,255,.25),rgba(255,209,227,.14)) !important;
    color:#fff !important; box-shadow:0 7px 18px rgba(47,13,30,.20),inset 0 1px 0 rgba(255,255,255,.18) !important; font-weight:900 !important;
  }
  .sidebar a.is-active::before { content:""; position:absolute; left:5px; width:4px; height:19px; border-radius:99px; background:#ffd5e6; box-shadow:0 0 11px rgba(255,213,230,.8); }
}

/* Phase 1 final page-level overrides. */
body:has(.relationship-hero) .relationship-hero { border-color:rgba(231,166,194,.72) !important; }
body:has(.relationship-hero) .dashboard-grid > .card { border-color:#e46b9d !important; }
body:has(.relationship-hero) .dashboard-grid > .card:hover { transform:translateY(-6px) rotateX(1deg) rotateY(-1deg) !important; }
body:has(.relationship-hero) .insight-hub { border-color:#e7bfd0 !important; }
body:has(.relationship-hero) .hub-action:hover { transform:translateY(-5px) rotateX(2deg) rotateY(-1deg) !important; }

@media (max-width:900px) {
  body:has(.relationship-hero) .hub-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width:620px) {
  body:has(.relationship-hero) .hub-actions { grid-template-columns:1fr !important; }
  body:has(.relationship-hero) .dashboard-grid > .card:hover,
  body:has(.relationship-hero) .hub-action:hover { transform:translateY(-3px) !important; }
}

@media (prefers-reduced-motion:reduce) {
  body:has(.relationship-hero) .dashboard-grid > .card:hover,
  body:has(.relationship-hero) .hub-action:hover { transform:none !important; }
}

/* Final typography and home metric corrections. */
html,
body,
body * {
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif !important;
}

body:has(.relationship-hero) .dashboard-grid .total-card strong {
  font-size:28px !important;
  line-height:1.1;
}

body:has(.relationship-hero) .dashboard-grid .relationship-card strong {
  font-size:clamp(36px,4vw,51px) !important;
  line-height:1;
}

/* Keep the unit label independent from the enlarged relationship-day number. */
body:has(.relationship-hero) .relationship-card strong .relationship-card__unit {
  display:inline-block;
  margin:0 0 0 4px;
  color:#883a5e !important;
  font-size:12px !important;
  font-weight:700;
  line-height:1;
  vertical-align:baseline;
}

/* CSS fallback also updates an already-rendered cached home page. */
body:has(.relationship-hero) .relationship-hero__middle > small {
  font-size:0 !important;
}

body:has(.relationship-hero) .relationship-hero__middle > small::after {
  content:"C❤️7";
  color:#b14b77;
  font-size:11px;
  font-weight:850;
  letter-spacing:.18em;
}

/* Click the shared cover to reveal the current memory-card quote. */
body:has(.relationship-hero) .relationship-hero {
  display:block;
  padding:0 !important;
  overflow:hidden;
  perspective:1400px;
  cursor:pointer;
}

body:has(.relationship-hero) .relationship-hero__flip {
  position:relative;
  width:100%;
  min-height:clamp(260px,32vw,350px);
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.75,.25,1);
}

body:has(.relationship-hero) .relationship-hero.is-flipped .relationship-hero__flip {
  transform:rotateY(180deg);
}

body:has(.relationship-hero) .relationship-hero__face {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr minmax(190px,1.25fr) 1fr;
  align-items:center;
  gap:20px;
  padding:30px clamp(20px,7vw,96px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

body:has(.relationship-hero) .relationship-hero__face--front { z-index:2; }

body:has(.relationship-hero) .relationship-hero__face--back {
  z-index:1;
  grid-template-columns:1fr;
  justify-items:center;
  align-content:center;
  gap:10px;
  padding:32px clamp(22px,10vw,120px);
  border-radius:inherit;
  background:
    radial-gradient(circle at 14% 18%,rgba(113,195,240,.40),transparent 29%),
    radial-gradient(circle at 86% 12%,rgba(247,123,171,.46),transparent 34%),
    radial-gradient(circle at 50% 62%,rgba(255,195,219,.40),transparent 40%),
    linear-gradient(135deg,rgba(234,248,255,.78) 0%,rgba(255,249,251,.76) 50%,rgba(255,231,240,.82) 100%);
  border:1px solid rgba(255,255,255,.82);
  color:#5c3047;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 18px 42px rgba(127,74,102,.13);
  -webkit-backdrop-filter:blur(24px) saturate(1.38);
  backdrop-filter:blur(24px) saturate(1.38);
  text-align:center;
  transform:rotateY(180deg);
}

body:has(.relationship-hero.relationship-hero--back-blue) .relationship-hero__face--back {
  background:
    radial-gradient(circle at 13% 18%,rgba(255,255,255,.34),transparent 28%),
    radial-gradient(circle at 88% 13%,rgba(247,123,171,.28),transparent 33%),
    radial-gradient(circle at 50% 66%,rgba(134,178,247,.40),transparent 40%),
    linear-gradient(135deg,rgba(156,201,239,.72) 0%,rgba(219,235,255,.65) 48%,rgba(59,94,234,.64) 100%);
  color:#fff;
}

body:has(.relationship-hero) .relationship-hero__back-label {
  color:#a44370;
  font-size:12px;
  font-weight:850;
  letter-spacing:.16em;
  opacity:.82;
}

body:has(.relationship-hero) .relationship-hero__back-quote {
  max-width:780px;
  margin:0;
  padding:0;
  border:0;
  color:#5c3047;
  font-size:clamp(18px,2.7vw,28px);
  font-weight:800;
  line-height:1.65;
  text-shadow:0 2px 10px rgba(255,255,255,.62);
}

body:has(.relationship-hero) .relationship-hero__back-meta {
  max-width:100%;
  overflow:hidden;
  color:#8b6475;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body:has(.relationship-hero) .relationship-hero__back-hint {
  margin-top:8px;
  color:#a27488;
  font-size:11px;
  letter-spacing:.08em;
}

body:has(.relationship-hero.relationship-hero--back-blue) .relationship-hero__back-label,
body:has(.relationship-hero.relationship-hero--back-blue) .relationship-hero__back-quote,
body:has(.relationship-hero.relationship-hero--back-blue) .relationship-hero__back-meta,
body:has(.relationship-hero.relationship-hero--back-blue) .relationship-hero__back-hint {
  color:#fff;
  text-shadow:0 2px 10px rgba(40,58,133,.24);
}

@media (max-width:620px) {
  body:has(.relationship-hero) .relationship-hero__flip { min-height:214px; }
  body:has(.relationship-hero) .relationship-hero__face {
    grid-template-columns:1fr 1.1fr 1fr;
    gap:7px;
    padding:17px 8px;
  }
  body:has(.relationship-hero) .relationship-hero__face--back {
    grid-template-columns:1fr;
    gap:7px;
    padding:20px 18px;
  }
  body:has(.relationship-hero) .relationship-hero__back-quote { font-size:18px; line-height:1.55; }
  body:has(.relationship-hero) .relationship-hero__back-meta { font-size:10px; }
  body:has(.relationship-hero) .relationship-hero__back-hint { margin-top:4px; font-size:10px; }
}

@media (prefers-reduced-motion:reduce) {
  body:has(.relationship-hero) .relationship-hero__flip { transition:none; }
}

/* Browser fallback: keep the flip independent from :has(), which is missing
   in some older iPad Safari versions. */
.relationship-hero {
  display:block;
  padding:0 !important;
  overflow:hidden;
  perspective:1400px;
  cursor:pointer;
}
.relationship-hero__flip {
  position:relative;
  width:100%;
  min-height:clamp(260px,32vw,350px);
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .82s cubic-bezier(.2,.75,.25,1);
}
.relationship-hero.is-flipped .relationship-hero__flip { transform:rotateY(180deg); }
.relationship-hero__face {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,1.25fr) minmax(0,1fr);
  align-items:center;
  gap:20px;
  padding:30px clamp(20px,7vw,96px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.relationship-hero__face--front { z-index:2; }
.relationship-hero__face--back {
  z-index:1;
  grid-template-columns:1fr;
  justify-items:center;
  align-content:center;
  gap:10px;
  padding:32px clamp(22px,10vw,120px);
  border-radius:inherit;
  background:
    radial-gradient(circle at 14% 18%,rgba(113,195,240,.40),transparent 29%),
    radial-gradient(circle at 86% 12%,rgba(247,123,171,.46),transparent 34%),
    radial-gradient(circle at 50% 62%,rgba(255,195,219,.40),transparent 40%),
    linear-gradient(135deg,rgba(234,248,255,.78) 0%,rgba(255,249,251,.76) 50%,rgba(255,231,240,.82) 100%);
  border:1px solid rgba(255,255,255,.82);
  color:#5c3047;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 18px 42px rgba(127,74,102,.13);
  -webkit-backdrop-filter:blur(24px) saturate(1.38);
  backdrop-filter:blur(24px) saturate(1.38);
  text-align:center;
  transform:rotateY(180deg);
}
.relationship-hero.relationship-hero--back-blue .relationship-hero__face--back {
  background:
    radial-gradient(circle at 13% 18%,rgba(255,255,255,.34),transparent 28%),
    radial-gradient(circle at 88% 13%,rgba(247,123,171,.28),transparent 33%),
    radial-gradient(circle at 50% 66%,rgba(134,178,247,.40),transparent 40%),
    linear-gradient(135deg,rgba(156,201,239,.72) 0%,rgba(219,235,255,.65) 48%,rgba(59,94,234,.64) 100%);
  color:#fff;
}
.relationship-hero__back-label { color:#a44370; font-size:12px; font-weight:850; letter-spacing:.16em; opacity:.88; }
.relationship-hero__back-quote {
  max-width:780px;
  margin:0;
  padding:0;
  border:0;
  color:#5c3047;
  font-size:clamp(18px,2.7vw,28px);
  font-weight:800;
  line-height:1.65;
  text-shadow:0 2px 10px rgba(255,255,255,.62);
}
.relationship-hero__back-meta { min-height:1.2em; color:#8b6475; font-size:12px; }
.relationship-hero__back-hint { margin-top:8px; color:#a27488; font-size:11px; letter-spacing:.08em; }
.relationship-hero.relationship-hero--back-blue .relationship-hero__back-label,
.relationship-hero.relationship-hero--back-blue .relationship-hero__back-quote,
.relationship-hero.relationship-hero--back-blue .relationship-hero__back-meta,
.relationship-hero.relationship-hero--back-blue .relationship-hero__back-hint {
  color:#fff;
  text-shadow:0 2px 10px rgba(40,58,133,.24);
}

/* Keep the flip animated even when the desktop OS advertises reduced motion. */
.relationship-hero__flip { transition:transform .82s cubic-bezier(.2,.75,.25,1) !important; }

/* Keep the iPad portrait/landscape hero in a stable left/center/right row. */
@media (min-width:621px) and (max-width:1024px) {
  .relationship-hero__flip { min-height:260px; }
  .relationship-hero__face--front {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(190px,1.25fr) minmax(0,1fr) !important;
    align-items:center !important;
    gap:14px !important;
    padding:24px 28px !important;
  }
  .relationship-hero__face--front .relationship-hero__person,
  .relationship-hero__face--front .relationship-hero__middle { justify-self:center; }
  .relationship-hero__face--back {
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:center !important;
  }
}

@media (max-width:620px) {
  .relationship-hero__flip { min-height:214px; }
  .relationship-hero__face {
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
    gap:7px;
    padding:17px 8px;
  }
  .relationship-hero__face--back {
    grid-template-columns:1fr;
    gap:7px;
    padding:20px 18px;
  }
  .relationship-hero__back-quote { font-size:18px; line-height:1.55; }
  .relationship-hero__back-meta { font-size:10px; }
  .relationship-hero__back-hint { margin-top:4px; font-size:10px; }
}

/* Shared reverse side: mirror the cover's blue/pink background horizontally,
   then soften it with a translucent glass layer for every sender. */
.relationship-hero__face--back {
  background:
    radial-gradient(circle at 14% 12%,rgba(247,123,171,.46),transparent 34%),
    radial-gradient(circle at 86% 18%,rgba(113,195,240,.40),transparent 29%),
    radial-gradient(circle at 50% 62%,rgba(255,195,219,.40),transparent 40%),
    linear-gradient(45deg,rgba(255,231,240,.82) 0%,rgba(255,249,251,.76) 50%,rgba(234,248,255,.78) 100%) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  color:#5c3047 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 18px 42px rgba(127,74,102,.13) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.38) !important;
  backdrop-filter:blur(24px) saturate(1.38) !important;
}

.relationship-hero__back-label,
.relationship-hero__back-quote,
.relationship-hero__back-meta,
.relationship-hero__back-hint {
  color:#5c3047 !important;
  text-shadow:0 2px 10px rgba(255,255,255,.62);
}

/* Two-layer flip: a transparent base lets the webpage background show through. */
.relationship-hero {
  background:transparent !important;
}
.relationship-hero__backdrop {
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:transparent;
  pointer-events:none;
}
.relationship-hero__flip {
  z-index:1;
  border-radius:inherit;
}
.relationship-hero__face {
  border-radius:inherit;
}
.relationship-hero__face--front {
  overflow:hidden;
  border-radius:inherit;
  background:
    radial-gradient(circle at 14% 18%,rgba(113,195,240,.38),transparent 29%),
    radial-gradient(circle at 86% 12%,rgba(247,123,171,.42),transparent 34%),
    radial-gradient(circle at 50% 62%,rgba(255,195,219,.40),transparent 40%),
    linear-gradient(135deg,#eaf8ff 0%,#fff9fb 50%,#ffe7f0 100%);
}
.relationship-hero::before,
.relationship-hero::after {
  z-index:3;
  pointer-events:none;
}

/* Mobile home navigation: nine tools in a compact 3 x 3 grid. */
@media (max-width:768px) {
  body:has(.relationship-hero) .hub-actions {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  body:has(.relationship-hero) .hub-action {
    display:grid !important;
    justify-items:center;
    align-content:center;
    min-height:86px !important;
    padding:8px 4px !important;
    gap:5px !important;
    text-align:center;
  }
  body:has(.relationship-hero) .hub-action b {
    flex:0 0 auto !important;
    width:30px !important;
    height:30px !important;
    border-radius:9px;
    font-size:16px !important;
  }
  body:has(.relationship-hero) .hub-action span {
    display:grid;
    gap:1px;
    font-size:11px !important;
    line-height:1.2;
  }
  body:has(.relationship-hero) .hub-action small {
    font-size:9px !important;
    line-height:1.15;
  }
}

/* Override the older high-specificity home rule so only the animated border remains. */
body:has(.relationship-hero) .relationship-hero {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  perspective:3200px !important;
}

/* Directional memory-card flip: a gentler perspective and a centered hinge. */
body:has(.relationship-hero) .relationship-hero__flip {
  transform-origin:center center;
}

/* The reverse face shares the animated pink frame; remove its extra white inset
   line so its glass background reaches the frame like the front face. */
body:has(.relationship-hero) .relationship-hero__face--back {
  border:0 !important;
  box-shadow:0 18px 42px rgba(127,74,102,.13) !important;
  background-clip:border-box !important;
  -webkit-background-clip:border-box !important;
}

/* Same final values for browsers without :has(), including older iPad Safari. */
.relationship-hero {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  perspective:3200px !important;
}
.relationship-hero__face--back {
  border:0 !important;
  box-shadow:0 18px 42px rgba(127,74,102,.13) !important;
  background-clip:border-box !important;
  -webkit-background-clip:border-box !important;
}

/* Keep the central heart bubble above both avatar bubbles. */
.relationship-hero__middle {
  z-index:3;
}

/* Keep all nine insight icons monochrome and reserve the same slot for each
   glyph so every label starts on one clean vertical line. */
.hub-action b,
.hub-action.capsule b,
.hub-action.geometry b,
.hub-action.insights b,
.hub-action.today b,
.hub-action.heatmap b {
  flex:0 0 36px !important;
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
  color:#df5b91 !important;
  background:#ffe5ef !important;
  font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif !important;
  font-size:20px !important;
  font-style:normal;
  font-variant-emoji:text;
  line-height:1 !important;
  text-align:center;
}
.sidebar-nav-icon {
  flex:0 0 22px;
  width:22px;
  min-width:22px;
  display:inline-grid;
  place-items:center;
  color:#fff !important;
  font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif !important;
  font-size:15px;
  font-style:normal;
  font-variant-emoji:text;
  line-height:1;
  text-align:center;
}
@media (min-width:769px) {
  .sidebar-group__links a {
    gap:8px !important;
  }
  .sidebar-group__links a > span {
    min-width:0;
    white-space:nowrap;
  }
}