:root {
  --love-bg: #5b7ea6;
  --love-bg-soft: #7c9ec3;
  --love-surface: rgba(115, 150, 187, 0.32);
  --love-surface-strong: rgba(97, 133, 173, 0.55);
  --love-text: #f4f8ff;
  --love-muted: #d9e5f4;
  --love-accent: #ffd8b8;
  --love-accent-soft: #ffd2a1;
  --love-line: rgba(245, 250, 255, 0.28);
  --love-focus: #fff2df;
}

#love-view {
  padding: 0;
}

.love-app {
  min-height: calc(100vh - 120px);
  color: var(--love-text);
  background:
    radial-gradient(circle at 18% 18%, rgba(230, 240, 255, 0.24), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(255, 232, 206, 0.22), transparent 34%),
    linear-gradient(160deg, #5a7fa7 0%, #6e93bc 52%, #80a5cb 100%);
  position: relative;
  overflow: hidden;
  font-family: "Inter", "PingFang SC", "Noto Sans SC", sans-serif;
}

.love-app::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px);
  background-size: 2px 2px;
  opacity: 0.28;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.love-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 18px 48px; position: relative; z-index: 2; }
.love-hero { padding: 54px 32px 40px; border: 1px solid var(--love-line); border-radius: 24px; background: linear-gradient(165deg, rgba(108,145,184,0.52), rgba(116,153,194,0.4)); backdrop-filter: blur(8px); }
.love-title { font-family: "Cormorant Garamond", "Noto Serif SC", serif; font-size: clamp(2rem,6vw,4rem); letter-spacing: .04em; margin-bottom: 8px; }
.love-sub { color: var(--love-muted); margin-bottom: 18px; }
.love-counterRow { display: grid; grid-template-columns: repeat(4,minmax(64px,1fr)); gap: 14px; max-width: 680px; }
.timeBlock { border: 1px solid var(--love-line); border-radius: 12px; padding: 12px 8px; text-align:center; background: rgba(255,255,255,0.02); }
.timeNum { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem,4vw,2.8rem); color: var(--love-accent); line-height: 1; }
.timeLabel { font-size: .75rem; color: var(--love-muted); letter-spacing: .16em; text-transform: uppercase; }

.love-grid { margin-top: 22px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.panel { border: 1px solid var(--love-line); border-radius: 18px; background: var(--love-surface); padding: 18px; }
.panel h3 { font-family: "Cormorant Garamond", serif; font-size: 1.55rem; margin-bottom: 10px; }
.meta { color: var(--love-muted); font-size: .92rem; }
.mile-list { margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }
.mile { padding: 6px 10px; border-radius: 999px; border:1px solid var(--love-line); color: var(--love-muted); font-size:.8rem; }
.mile.active { color: #111; background: var(--love-accent); border-color: transparent; }

.toolbar { margin-top: 18px; display:flex; flex-wrap: wrap; gap:10px; align-items: center; }
.btn { border:1px solid var(--love-line); background: rgba(255,255,255,.02); color:var(--love-text); border-radius: 999px; padding:8px 14px; font-size:.82rem; cursor:pointer; }
.btn:hover { border-color: var(--love-accent-soft); }
.btn:focus-visible, .cell:focus-visible, .field:focus-visible, textarea:focus-visible { outline:2px solid var(--love-focus); outline-offset:2px; }

.calendar { margin-top: 14px; border:1px solid var(--love-line); border-radius: 16px; background: var(--love-surface-strong); padding: 14px; }
.weekhead, .days { display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; }
.weekhead { color: var(--love-muted); font-size: .75rem; margin-bottom: 8px; }
.cell { min-height: 78px; border:1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 6px; background: rgba(255,255,255,.02); cursor:pointer; position:relative; transition: transform .25s ease, border-color .25s ease; }
.cell:hover { transform: translateY(-2px); border-color: var(--love-accent-soft); }
.cell.today { box-shadow: inset 0 0 0 1px var(--love-accent); }
.cell.special { background: rgba(214,177,143,.12); }
.cell.muted { opacity:.35; pointer-events:none; }
.d { font-size: .78rem; color: var(--love-muted); }
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--love-accent); position:absolute; left:8px; bottom:8px; }
.tag { position:absolute; right:6px; bottom:6px; font-size:.65rem; color: var(--love-accent); }

.stats { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:10px; margin-top: 16px; }
.stat { border:1px solid var(--love-line); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.02); }
.stat b { display:block; font-family: "Cormorant Garamond", serif; font-size: 1.45rem; color: var(--love-accent); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #6b90b8; border-left:1px solid var(--love-line); padding: 20px; z-index: 1200; transform: translateX(100%); transition: transform .3s ease; }
.drawer.open { transform: translateX(0); }
.field { width:100%; background: rgba(255,255,255,.03); border:1px solid var(--love-line); color:var(--love-text); border-radius:10px; padding:10px; }
textarea { width:100%; min-height:86px; margin-top:10px; background: rgba(255,255,255,.03); border:1px solid var(--love-line); color:var(--love-text); border-radius:10px; padding:10px; }
.tag-grid { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.chip { border:1px solid var(--love-line); border-radius:999px; padding:6px 10px; background:transparent; color:var(--love-muted); cursor:pointer; }
.chip.on { background: rgba(214,177,143,.2); color:var(--love-text); border-color: rgba(214,177,143,.8); }
.timeline { margin-top: 14px; border-left:1px solid var(--love-line); padding-left: 12px; max-height: 440px; overflow:auto; }
.timeline-item { margin-bottom: 10px; }
.media-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 220px; overflow:auto; }
.media-card { position: relative; border: 1px solid var(--love-line); border-radius: 10px; padding: 6px; background: rgba(255,255,255,.03); min-height: 64px; }
.media-card img, .media-card video, .media-card audio { width: 100%; border-radius: 6px; display: block; }
.media-remove { position: absolute; right: 6px; top: 6px; border: none; width: 20px; height: 20px; border-radius: 999px; background: rgba(0,0,0,.48); color: #fff; cursor: pointer; }
.media-placeholder { border-radius: 6px; padding: 8px; font-size: .72rem; color: #e9f2ff; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); margin-bottom: 6px; }
.audio-wave-placeholder { height: 28px; border-radius: 6px; margin-bottom: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 2px, transparent 2px 6px), linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)); }
.upload-block { margin-top: 8px; }
.upload-line { font-size: .76rem; margin-bottom: 4px; color: #f6fbff; }
.upload-track { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.2); }
.upload-fill { height: 100%; background: linear-gradient(90deg, #fff0dc, #ffd8b8); }

@media (max-width: 860px) {
  .love-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .love-hero { padding: 34px 18px; }
  .media-grid { grid-template-columns: 1fr; }
}