:root {
  --ink:#28141d;
  --muted:#7f6870;
  --paper:#fbf5f0;
  --paper-2:#f3e9e5;
  --line:#e7d7d5;
  --wine:#7a244d;
  --rose:#c65f7f;
  --blush:#f7dfe5;
  --gold:#c89252;
  --shadow:0 26px 80px rgba(44, 18, 30, .18);
}
* { box-sizing:border-box; }
html { min-height:100%; }
body {
  margin:0;
  min-height:100vh;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 78% 8%, rgba(198,95,127,.28), transparent 24rem),
    linear-gradient(105deg, #160b11 0 19rem, #efe5e1 19rem 100%);
}
button, input, textarea, select { font:inherit; }
button { border:0; cursor:pointer; }
button.loading { opacity:.65; pointer-events:none; }
input, textarea, select {
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  border-radius:18px;
  padding:13px 14px;
  color:var(--ink);
  outline:none;
}
textarea { min-height:120px; resize:vertical; line-height:1.7; }
label { display:grid; gap:8px; color:var(--muted); font-size:13px; font-weight:700; }
.login-page { display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#180b12,#412035); }
.login-shell { width:min(440px, 100%); }
.login-panel {
  padding:44px;
  border-radius:32px;
  background:rgba(251,245,240,.94);
  box-shadow:0 30px 90px rgba(0,0,0,.32);
  text-align:center;
  backdrop-filter:blur(18px);
}
.brand-mark { width:64px; height:64px; margin:0 auto 18px; border-radius:22px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--rose),var(--wine)); font-size:32px; }
.login-panel h1, .hero h1, .section-head h1, .entry-detail h2 { font-family:"Noto Serif SC", Georgia, serif; letter-spacing:0; }
.login-panel h1 { margin:0; font-size:36px; }
.login-panel p { margin:8px 0 28px; color:var(--muted); }
.login-form { display:grid; gap:16px; text-align:left; }
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:285px;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:rgba(251,245,240,.9);
  border-right:1px solid rgba(255,255,255,.44);
  backdrop-filter:blur(22px);
}
.brand { display:flex; align-items:center; gap:15px; margin-bottom:28px; }
.brand span { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; background:var(--wine); color:#fff; font-size:27px; }
.brand strong { display:block; font-size:22px; line-height:1.1; }
.brand small { color:var(--muted); }
.nav, .ghost { background:transparent; color:var(--ink); box-shadow:none; text-align:left; border-radius:18px; padding:14px 18px; font-weight:850; }
.nav.active { background:#f2dce3; color:var(--wine); }
.ghost { margin-top:auto; border:1px solid var(--line); }
.ghost.small { margin:0; padding:10px 14px; font-size:13px; }
.solid { border-radius:18px; padding:13px 18px; background:var(--wine); color:#fff; font-weight:850; box-shadow:0 14px 28px rgba(122,36,77,.24); }
.app { margin-left:285px; padding:48px clamp(24px, 4vw, 72px); }
.view { display:none; }
.view.active { display:block; }
.editorial-card, .panel, .entry-card, .empty-list {
  background:rgba(251,245,240,.92);
  border:1px solid rgba(255,255,255,.56);
  box-shadow:var(--shadow);
}
.hero {
  min-height:355px;
  padding:42px;
  border-radius:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(135deg, rgba(122,36,77,.95), rgba(198,95,127,.78)),
    radial-gradient(circle at 85% 15%, rgba(200,146,82,.46), transparent 28rem);
  color:#fff;
}
.hero-kicker, .eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:850; color:rgba(255,255,255,.72); }
.hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.hero h1 { margin:10px 0 12px; font-size:clamp(58px, 8vw, 118px); line-height:.92; }
.lede { max-width:670px; margin:0; color:#ffe7ed; font-size:18px; line-height:1.75; }
.anniversary-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:34px; }
.anniversary-grid article { padding:18px; border-radius:22px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); }
.anniversary-grid span, .anniversary-grid small { display:block; color:#ffe1e8; }
.anniversary-grid strong { display:block; margin:8px 0; font-size:30px; }
.toolbar { margin-top:28px; padding:26px; border-radius:30px; display:flex; align-items:end; justify-content:space-between; gap:24px; }
.toolbar h2, .panel h2 { margin:0 0 8px; font-family:"Noto Serif SC", Georgia, serif; }
p { color:var(--muted); }
.toolbar p, .panel p { margin:0; }
.filters { display:grid; grid-template-columns:190px minmax(240px, 360px); gap:12px; }
.timeline-layout { display:grid; grid-template-columns:minmax(260px, 360px) 1fr; gap:28px; margin-top:28px; align-items:start; }
.entry-list { display:grid; gap:14px; align-content:start; max-height:calc(100vh - 190px); overflow:auto; padding-right:4px; }
.entry-card, .empty-list { border-radius:24px; padding:20px; color:var(--ink); text-align:left; box-shadow:0 16px 42px rgba(44,18,30,.12); }
.entry-card { display:grid; gap:8px; }
.entry-card.selected { outline:2px solid var(--rose); background:#fff3f2; }
.entry-date, .entry-card small { color:var(--muted); font-weight:800; }
.entry-card strong { font-size:18px; line-height:1.35; }
.entry-card em { display:flex; flex-wrap:wrap; gap:6px; font-style:normal; }
.entry-card em span { font-size:12px; padding:5px 8px; border-radius:999px; background:#f4dfe4; color:var(--wine); }
.entry-detail { border-radius:32px; padding:34px; min-height:540px; }
.detail-head { display:flex; align-items:start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.entry-detail .eyebrow { color:var(--rose); }
.entry-detail h2 { margin:6px 0 0; font-size:clamp(34px, 4vw, 58px); line-height:1.06; }
.diary-copy { font-family:"Noto Serif SC", Georgia, serif; font-size:20px; line-height:2; color:#3a202c; margin:26px 0; }
.tags, .preset-list { display:flex; gap:10px; flex-wrap:wrap; }
.tag, .preset { display:inline-flex; align-items:center; border-radius:999px; padding:8px 12px; background:#f2dfe2; color:var(--wine); font-size:13px; font-weight:800; }
.stats-strip { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 24px; }
.stats-strip span { border-top:1px solid var(--line); padding-top:10px; min-width:110px; color:var(--muted); font-weight:850; }
.events { display:grid; gap:12px; }
.event-row { display:grid; grid-template-columns:110px 1fr; gap:16px; padding:18px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.62); }
.event-mark { display:grid; gap:6px; align-content:start; color:var(--muted); font-size:13px; font-weight:800; }
.event-mark b { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--event-color), white 72%); color:var(--wine); }
.event-row strong { font-size:17px; }
.event-row p { margin:7px 0 0; line-height:1.7; }
.section-head { padding:32px; border-radius:32px; display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:26px; }
.section-head .eyebrow { color:var(--rose); }
.section-head h1 { margin:6px 0 0; font-size:48px; }
.section-head p { max-width:520px; line-height:1.7; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.panel { border-radius:28px; padding:26px; }
.panel > * + * { margin-top:16px; }
.note-panel { grid-column:span 2; display:grid; grid-template-columns:280px 1fr auto; gap:18px; align-items:end; }
.edit-panel { grid-row:span 2; }
dl { display:grid; grid-template-columns:150px 1fr; gap:10px 16px; }
dt { color:var(--muted); font-weight:800; } dd { margin:0; font-weight:850; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check { display:flex; align-items:center; gap:10px; }
.check input { width:auto; }
pre { white-space:pre-wrap; background:#2a1420; color:#ffe8ec; padding:14px; border-radius:16px; min-height:80px; overflow:auto; }
.preset { background:color-mix(in srgb, var(--c), white 80%); color:#3a1c28; }
.empty, .muted, .empty-list { color:var(--muted); }
@media (max-width: 1080px) {
  body { background:#efe5e1; }
  .sidebar { position:static; width:auto; flex-direction:row; align-items:center; overflow:auto; }
  .brand { margin:0 14px 0 0; }
  .ghost { margin:0; }
  .app { margin:0; padding:20px; }
  .timeline-layout, .settings-grid, .note-panel { grid-template-columns:1fr; }
  .note-panel { grid-column:auto; }
  .filters { grid-template-columns:1fr; width:100%; }
  .toolbar, .hero-row, .section-head { flex-direction:column; align-items:flex-start; }
  .anniversary-grid { grid-template-columns:1fr; }
  .entry-list { max-height:none; }
}
@media (max-width: 640px) {
  .sidebar { padding:14px; }
  .brand strong { font-size:18px; }
  .hero, .entry-detail, .panel, .toolbar, .section-head { border-radius:22px; padding:22px; }
  .event-row, .two { grid-template-columns:1fr; }
  .diary-copy { font-size:17px; }
}