/*
 * Shared visual tokens for every share surface:
 * daily image, daily public H5, period-summary image, and period-summary H5.
 * Keep these values aligned with the corresponding app theme.
 */
body[data-theme] {
  --share-page-bg: linear-gradient(150deg, #dbeafe, #ccfbf1 52%, #2563eb);
  --share-canvas: #f0f5ff;
  --share-ink: #1f2937;
  --share-muted: #475569;
  --share-hero: #2563eb;
  --share-hero-ink: #ffffff;
  --share-panel-1: #0f766e;
  --share-panel-2: #1d4ed8;
  --share-panel-3: #4338ca;
  --share-panel-4: #115e59;
  --share-panel-ink: var(--share-hero-ink);
  --share-highlight: #dbeafe;
  --share-note: #ccfbf1;
  --share-note-ink: #134e4a;
  --share-border: rgba(37, 99, 235, .22);
  --share-display-font: Georgia, 'Noto Serif SC', serif;
  --share-body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --share-hero-radius: 28px;
  --share-panel-radius: 20px;
  --share-shadow: 0 28px 80px rgba(30, 64, 175, .2);
  --share-texture-opacity: .035;
  --share-texture-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-theme="boy"] {
  --share-page-bg:
    linear-gradient(rgba(56,189,248,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.07) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, #102a4c, #020617 62%);
  --share-canvas: #07101f;
  --share-ink: #e2e8f0;
  --share-muted: #94a3b8;
  --share-hero: #0c1834;
  --share-hero-ink: #e2e8f0;
  --share-panel-1: #155e75;
  --share-panel-2: #0369a1;
  --share-panel-3: #166534;
  --share-panel-4: #155e75;
  --share-highlight: #0c1834;
  --share-note: #102a36;
  --share-note-ink: #a7f3d0;
  --share-border: rgba(56, 189, 248, .32);
  --share-display-font: 'Space Mono', monospace;
  --share-body-font: 'Space Mono', monospace;
  --share-hero-radius: 14px;
  --share-panel-radius: 10px;
  --share-shadow: 0 28px 80px rgba(0, 0, 0, .58), 0 0 34px rgba(56, 189, 248, .12);
  --share-texture-opacity: .12;
  --share-texture-image:
    linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px);
}

body[data-theme="girl"] {
  --share-page-bg: radial-gradient(circle at 15% 10%, #f9a8d4, transparent 34%), linear-gradient(145deg, #fff0f6, #e9d5ff);
  --share-canvas: #fff0f6;
  --share-ink: #4a044e;
  --share-muted: #86198f;
  --share-hero: #be185d;
  --share-hero-ink: #ffffff;
  --share-panel-1: #be185d;
  --share-panel-2: #7e22ce;
  --share-panel-3: #9d174d;
  --share-panel-4: #6b21a8;
  --share-highlight: #fce7f3;
  --share-note: #f3e8ff;
  --share-note-ink: #6b21a8;
  --share-border: rgba(236, 72, 153, .25);
  --share-hero-radius: 32px;
  --share-panel-radius: 24px;
  --share-shadow: 0 28px 80px rgba(190, 24, 93, .2);
}

body[data-theme="princess"] {
  --share-page-bg: radial-gradient(circle at 20% 6%, #fde68a, transparent 34%), linear-gradient(145deg, #fffaf0, #d6a84f);
  --share-canvas: #fffaf0;
  --share-ink: #3f2306;
  --share-muted: #92400e;
  --share-hero: #78350f;
  --share-hero-ink: #fef3c7;
  --share-panel-1: #92400e;
  --share-panel-2: #854d0e;
  --share-panel-3: #78350f;
  --share-panel-4: #713f12;
  --share-highlight: #fef3c7;
  --share-note: #f7df9a;
  --share-note-ink: #78350f;
  --share-border: rgba(180, 83, 9, .28);
  --share-display-font: 'Noto Serif SC', Georgia, serif;
  --share-body-font: 'Noto Serif SC', Georgia, serif;
  --share-hero-radius: 30px;
  --share-panel-radius: 20px;
  --share-shadow: 0 28px 80px rgba(120, 53, 15, .22);
}

body[data-theme="anime"] {
  --share-page-bg:
    radial-gradient(circle, rgba(17,24,39,.13) 1px, transparent 1px),
    linear-gradient(145deg, #fef9c3, #facc15);
  --share-canvas: #fffdf0;
  --share-ink: #111827;
  --share-muted: #374151;
  --share-hero: #b91c1c;
  --share-hero-ink: #ffffff;
  --share-panel-1: #facc15;
  --share-panel-2: #60a5fa;
  --share-panel-3: #22c55e;
  --share-panel-4: #f97316;
  --share-panel-ink: #111827;
  --share-highlight: #fef08a;
  --share-note: #fee2e2;
  --share-note-ink: #991b1b;
  --share-border: #111827;
  --share-display-font: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
  --share-body-font: 'Noto Sans SC', system-ui, sans-serif;
  --share-hero-radius: 12px;
  --share-panel-radius: 10px;
  --share-shadow: 8px 8px 0 #111827;
  --share-texture-opacity: .08;
  --share-texture-image: radial-gradient(circle, #111827 1px, transparent 1.5px);
}

body[data-theme="warmpaper"] {
  --share-page-bg: linear-gradient(145deg, #e3caa5, #a04e29);
  --share-canvas: #f4ead7;
  --share-ink: #3a2e23;
  --share-muted: #6f6353;
  --share-hero: #8f4f37;
  --share-hero-ink: #fbf5e8;
  --share-panel-1: #7b4430;
  --share-panel-2: #6f4f38;
  --share-panel-3: #8f4f37;
  --share-panel-4: #6f5b2e;
  --share-highlight: #ead8bb;
  --share-note: #e7d6ba;
  --share-note-ink: #593b2b;
  --share-border: rgba(58, 46, 35, .25);
  --share-display-font: 'Noto Serif SC', Georgia, serif;
  --share-body-font: 'Noto Serif SC', Georgia, serif;
  --share-hero-radius: 8px;
  --share-panel-radius: 8px;
  --share-shadow: 0 28px 80px rgba(58, 46, 35, .24);
}

body[data-theme="editorial"] {
  --share-page-bg: linear-gradient(145deg, #d8cfbe, #6a6055);
  --share-canvas: #faf7f0;
  --share-ink: #1a1813;
  --share-muted: #6a6055;
  --share-hero: #1a1813;
  --share-hero-ink: #faf7f0;
  --share-panel-1: #a8472f;
  --share-panel-2: #5b7a52;
  --share-panel-3: #6a6055;
  --share-panel-4: #1a1813;
  --share-highlight: #ece7dd;
  --share-note: #f3e3dd;
  --share-note-ink: #6f2d20;
  --share-border: rgba(26, 24, 19, .28);
  --share-display-font: 'Noto Serif SC', Georgia, serif;
  --share-body-font: 'Noto Sans SC', sans-serif;
  --share-hero-radius: 2px;
  --share-panel-radius: 2px;
  --share-shadow: 0 28px 80px rgba(20, 16, 8, .2);
}

body[data-theme="receipt"] {
  --share-page-bg: #d9ccb2;
  --share-canvas: #f6eeda;
  --share-ink: #221c14;
  --share-muted: #6f6353;
  --share-hero: #221c14;
  --share-hero-ink: #f6eeda;
  --share-panel-1: #e3d7bd;
  --share-panel-2: #d4c4a4;
  --share-panel-3: #c6ad7c;
  --share-panel-4: #afb187;
  --share-panel-ink: #221c14;
  --share-highlight: #ece0c6;
  --share-note: #e3d7bd;
  --share-note-ink: #221c14;
  --share-border: rgba(34, 28, 20, .42);
  --share-display-font: 'Noto Serif SC', serif;
  --share-body-font: 'Space Mono', monospace;
  --share-hero-radius: 0;
  --share-panel-radius: 0;
  --share-shadow: 0 18px 48px rgba(34, 28, 20, .2);
  --share-texture-opacity: .055;
  --share-texture-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(34,28,20,.08) 4px 5px);
}

body[data-theme="sakura"] {
  --share-page-bg: radial-gradient(circle at 20% 8%, #ffd4df, transparent 35%), linear-gradient(145deg, #fff6f4, #9b85d8);
  --share-canvas: #fff6f4;
  --share-ink: #6b4651;
  --share-muted: #9c6978;
  --share-hero: #b94962;
  --share-hero-ink: #ffffff;
  --share-panel-1: #287d65;
  --share-panel-2: #6d55b5;
  --share-panel-3: #a83f56;
  --share-panel-4: #397f83;
  --share-highlight: #ffe7ee;
  --share-note: #e3f5ee;
  --share-note-ink: #276b57;
  --share-border: rgba(244, 132, 158, .28);
  --share-display-font: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
  --share-body-font: 'Noto Sans SC', system-ui, sans-serif;
  --share-hero-radius: 30px;
  --share-panel-radius: 20px;
  --share-shadow: 0 28px 80px rgba(224, 102, 127, .2);
}

body[data-theme="space"] {
  --share-page-bg: radial-gradient(circle at 30% 0%, #34538a, transparent 36%), linear-gradient(150deg, #11172a, #1b2138);
  --share-canvas: #1b2138;
  --share-ink: #eaf0ff;
  --share-muted: #aeb9dd;
  --share-hero: #161c30;
  --share-hero-ink: #eaf0ff;
  --share-panel-1: #1d4ed8;
  --share-panel-2: #445783;
  --share-panel-3: #365314;
  --share-panel-4: #34538a;
  --share-highlight: #232b47;
  --share-note: #26331c;
  --share-note-ink: #d9ffae;
  --share-border: rgba(90, 169, 255, .3);
  --share-display-font: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif;
  --share-body-font: 'Space Mono', monospace;
  --share-hero-radius: 18px;
  --share-panel-radius: 12px;
  --share-shadow: 0 28px 80px rgba(0, 0, 0, .5), 0 0 30px rgba(90, 169, 255, .1);
  --share-texture-opacity: .12;
  --share-texture-image: radial-gradient(circle, rgba(182,255,90,.75) 1px, transparent 1.4px);
}

body[data-theme="epic"] {
  --share-page-bg: radial-gradient(ellipse at 50% 0%, #49371d, transparent 48%), linear-gradient(150deg, #0e0b06, #1d1610);
  --share-canvas: #1d1610;
  --share-ink: #ebdcb8;
  --share-muted: #b9a77f;
  --share-hero: #14100a;
  --share-hero-ink: #ebdcb8;
  --share-panel-1: #6a4e1e;
  --share-panel-2: #59411d;
  --share-panel-3: #633779;
  --share-panel-4: #365d2f;
  --share-highlight: #2a2014;
  --share-note: #2a1c33;
  --share-note-ink: #d8b7ed;
  --share-border: rgba(202, 160, 68, .42);
  --share-display-font: 'Cinzel', 'Noto Serif SC', serif;
  --share-body-font: 'Noto Serif SC', serif;
  --share-hero-radius: 4px;
  --share-panel-radius: 4px;
  --share-shadow: 0 28px 80px rgba(0, 0, 0, .62);
  --share-texture-opacity: .11;
  --share-texture-image: repeating-linear-gradient(0deg, rgba(202,160,68,.08) 0 1px, transparent 1px 5px);
}

/* Public daily share pages inherit the same scene treatment as summaries. */
body.public-share-page {
  background: var(--share-page-bg) !important;
  background-size: 40px 40px, 40px 40px, cover;
}
body.public-share-page .public-share-card {
  box-shadow: var(--share-shadow);
}
body.public-share-page .public-share-avatar,
body.public-share-page .public-share-cta {
  background: var(--share-hero);
  color: var(--share-hero-ink);
  border-radius: var(--share-panel-radius);
}
body.public-share-page .public-share-sub,
body.public-share-page .public-share-views {
  color: inherit;
  opacity: .72;
}