:root {
  --bg: #100b14;
  --card: rgba(255,255,255,.065);
  --card-border: rgba(255,255,255,.11);
  --text: #fff9fb;
  --muted: #c9bdc8;
  --pink: #ff7fa7;
  --pink2: #ffc0d4;
  --gold: #f3d49c;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,91,143,.18), transparent 30rem),
    radial-gradient(circle at 90% 30%, rgba(155,100,255,.12), transparent 28rem),
    var(--bg);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
button, input, textarea, select { touch-action: manipulation; }
body::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
}
.grain { position:fixed; inset:0; opacity:.05; pointer-events:none; background-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='.9' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.hidden { display:none !important; }
.card { border:1px solid var(--card-border); background:var(--card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius:28px; box-shadow:0 30px 90px rgba(0,0,0,.25); }
.eyebrow { margin:0 0 10px; text-transform:uppercase; letter-spacing:.19em; font-size:.72rem; font-weight:700; color:var(--pink2); }
h1,h2 { font-family:"Playfair Display", serif; }
h1 { margin:4px 0 10px; font-size:clamp(3rem,8vw,6.6rem); line-height:.98; letter-spacing:-.05em; }
h1 span { color:var(--pink); font-size:.7em; }
.subtitle { color:var(--muted); font-size:1.05rem; margin:0 auto 36px; }

.login-screen {
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:calc(28px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
  position:relative;
  z-index:1;
}
.login-card {
  width:min(520px, 100%);
  padding:48px 42px 42px;
  text-align:center;
}
.login-card h1 { font-size:clamp(3rem,10vw,5.3rem); margin-bottom:32px; }
.login-heart {
  width:54px; height:54px; margin:0 auto 18px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,127,167,.12); border:1px solid rgba(255,127,167,.25);
  color:var(--pink); font-size:1.35rem;
}
.identity-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 24px; }
.identity {
  min-height:48px; border:1px solid var(--card-border); background:rgba(255,255,255,.035); color:var(--text);
  border-radius:16px; padding:14px 12px; font:inherit; font-weight:700; cursor:pointer;
  transition:.2s ease;
}
.identity:hover { border-color:rgba(255,127,167,.45); transform:translateY(-1px); }
.identity.active { background:rgba(255,127,167,.13); border-color:rgba(255,127,167,.65); color:#fff; }
.password-label { display:block; text-align:left; margin:0 0 8px; color:var(--muted); font-size:.9rem; }
.password-input {
  width:100%; min-height:50px; border:1px solid var(--card-border); background:rgba(0,0,0,.2); color:var(--text);
  border-radius:16px; padding:15px 16px; font:inherit; outline:none; margin-bottom:12px;
}
.password-input:focus { border-color:rgba(255,127,167,.7); box-shadow:0 0 0 3px rgba(255,127,167,.09); }
.login-btn {
  width:100%; min-height:50px; border:0; border-radius:16px; padding:15px 18px; font:inherit; font-weight:800;
  background:linear-gradient(135deg,#ff7fa7,#ff9bb9); color:#23111a; cursor:pointer;
  box-shadow:0 12px 30px rgba(255,127,167,.18); transition:.2s ease;
}
.login-btn:hover { transform:translateY(-1px); box-shadow:0 16px 36px rgba(255,127,167,.24); }
.login-btn:disabled { opacity:.65; cursor:wait; transform:none; }
.login-error { min-height:1.2em; margin:12px 0 0; color:#ffb3c7; font-size:.88rem; }

.shell { width:min(1080px, calc(100% - 32px)); margin:auto; padding:calc(28px + env(safe-area-inset-top)) 0 calc(36px + env(safe-area-inset-bottom)); position:relative; }
.topbar { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:14px; color:var(--muted); flex-wrap:wrap; }
.logout,.admin-btn { min-height:44px; border:1px solid var(--card-border); background:rgba(255,255,255,.05); color:var(--text); border-radius:12px; padding:9px 12px; cursor:pointer; }
.admin-btn { border-color:rgba(255,127,167,.35); background:rgba(255,127,167,.09); }
.hero { text-align:center; padding:64px 32px 42px; overflow:hidden; position:relative; }
.hero::after { content:"❤"; position:absolute; font-size:260px; opacity:.025; right:-35px; top:-70px; transform:rotate(12deg); }
.route { display:grid; grid-template-columns:1fr minmax(90px,220px) 1fr; align-items:center; max-width:680px; margin:0 auto 42px; }
.route div:not(.line) { display:flex; flex-direction:column; gap:3px; }
.route small { color:var(--muted); }
.line { height:1px; background:linear-gradient(90deg,transparent,var(--pink),transparent); position:relative; }
.line span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#1c121f; padding:6px; color:var(--pink); }
.countdown-wrap { display:inline-block; padding:20px 28px; border-radius:20px; background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.07); }
.countdown-wrap p,.countdown-wrap small { margin:0; color:var(--muted); }
.countdown { display:flex; gap:18px; justify-content:center; margin:9px 0 5px; }
.time strong { font-size:1.75rem; display:block; }
.time span { font-size:.66rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.anniversary { margin-top:28px; color:var(--muted); }
.intro { display:grid; grid-template-columns:1.35fr .65fr; gap:30px; align-items:end; margin:76px 4px 26px; }
.intro h2 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.06; margin:0; max-width:700px; }
.intro-copy { color:var(--muted); line-height:1.65; margin:0; }
.capsule-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.capsule { min-height:190px; border-radius:22px; padding:20px; border:1px solid var(--card-border); background:var(--card); color:var(--text); text-align:left; font:inherit; position:relative; overflow:hidden; transition:.22s ease; }
.capsule.unlocked { cursor:pointer; }
.capsule.unlocked:hover { transform:translateY(-4px); border-color:rgba(255,127,167,.55); background:rgba(255,255,255,.09); }
.capsule.locked { opacity:.56; cursor:not-allowed; }
.number { color:var(--pink2); font-size:.72rem; letter-spacing:.14em; font-weight:700; }
.capsule-icon { font-size:2rem; margin:24px 0 13px; display:block; }
.capsule h3 { margin:0 0 5px; font-family:"Playfair Display",serif; font-size:1.2rem; }
.capsule p { margin:0; color:var(--muted); font-size:.84rem; }
.lock { position:absolute; right:16px; top:16px; opacity:.7; }
.finale { margin-top:56px; padding:34px; display:flex; gap:25px; align-items:center; }
.finale-icon { font-size:2.6rem; }
.finale h2 { margin:0 0 6px; font-size:2rem; }
.finale p:last-child { color:var(--muted); margin:0; }
footer { text-align:center; color:#8f818d; padding:52px 10px 8px; font-size:.85rem; }

dialog { width:min(600px,calc(100% - 30px)); max-height:min(88svh,900px); overflow:auto; border:1px solid var(--card-border); border-radius:26px; background:#1a111d; color:var(--text); padding:36px; box-shadow:0 40px 120px #000; -webkit-overflow-scrolling:touch; }
dialog::backdrop { background:rgba(5,2,7,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.close { position:absolute; right:15px; top:12px; width:44px; height:44px; border:0; background:transparent; color:var(--muted); font-size:2rem; cursor:pointer; }
.dialog-heart { font-size:3rem; }
#dialogContent h2 { font-size:2.2rem; margin:14px 0 12px; }
#dialogContent p { color:var(--muted); line-height:1.7; }
.capsule-media { display:block; width:100%; max-height:62svh; object-fit:contain; border-radius:18px; margin-top:20px; background:#09070a; }
.capsule-media-loading { color:var(--muted); padding:18px 0 4px; }
.media-open-link { display:inline-block; margin-top:18px; color:var(--pink2); }

.admin-dialog h2 { font-size:2.2rem; margin:5px 0 8px; }
.admin-help { color:var(--muted); line-height:1.55; margin:0 0 22px; }
.admin-dialog label,.media-label { display:block; margin:14px 0 7px; color:var(--muted); font-size:.88rem; }
.admin-dialog input,.admin-dialog textarea,.admin-dialog select {
  width:100%; border:1px solid var(--card-border); background:rgba(0,0,0,.22); color:var(--text);
  border-radius:14px; padding:13px 14px; font:inherit; outline:none;
}
.admin-dialog textarea { resize:vertical; min-height:170px; }
.admin-dialog input:focus,.admin-dialog textarea:focus,.admin-dialog select:focus { border-color:rgba(255,127,167,.65); box-shadow:0 0 0 3px rgba(255,127,167,.08); }
.admin-dialog .login-btn { margin-top:18px; }
.admin-status { min-height:1.2em; margin:12px 0 0; color:var(--pink2); font-size:.9rem; }
.media-field { margin-top:17px; }
.media-label small { color:#8f818d; }
.file-input { position:absolute !important; width:1px !important; height:1px !important; opacity:0; pointer-events:none; }
.file-picker { display:flex !important; align-items:center; justify-content:center; min-height:50px; margin:8px 0 !important; border:1px dashed rgba(255,127,167,.48); border-radius:15px; color:var(--text) !important; background:rgba(255,127,167,.07); font-weight:700; cursor:pointer; }
.media-hint { color:#998b97; font-size:.78rem; line-height:1.45; margin:7px 2px 10px; }
.media-preview { border:1px solid var(--card-border); border-radius:16px; padding:10px; background:rgba(0,0,0,.15); margin-top:10px; }
.media-preview img,.media-preview video { display:block; width:100%; max-height:300px; object-fit:contain; background:#080608; border-radius:11px; }
.media-preview small { display:block; margin:8px 3px 1px; color:var(--muted); overflow-wrap:anywhere; }
.preview-loading { color:var(--muted); font-size:.86rem; }
.remove-media { width:100%; min-height:44px; margin-top:8px; border:1px solid rgba(255,127,167,.25); border-radius:13px; color:#ffc0d4; background:rgba(255,127,167,.06); font:inherit; cursor:pointer; }

@media(max-width:800px){ .capsule-grid{grid-template-columns:repeat(2,1fr)} .intro{grid-template-columns:1fr} }
@media(max-width:520px){
  input,textarea,select,button { font-size:16px; }
  .login-screen{padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))}
  .login-card{padding:34px 20px 28px;border-radius:22px}
  .identity-picker{grid-template-columns:1fr 1fr}
  .shell{width:min(100% - 20px,1080px);padding-top:calc(14px + env(safe-area-inset-top))}
  .topbar{justify-content:center; gap:8px}
  .topbar span{width:100%; text-align:center; margin-bottom:2px}
  .topbar button{flex:1; min-width:145px}
  .hero{padding:45px 17px 30px;border-radius:22px}
  .hero h1{font-size:clamp(3rem,16vw,4.5rem)}
  .subtitle{font-size:.95rem; margin-bottom:30px}
  .route{grid-template-columns:1fr 52px 1fr;font-size:.83rem; gap:2px}
  .route small{font-size:.72rem}
  .countdown-wrap{padding:18px 15px; width:100%; max-width:330px}
  .countdown{gap:8px; justify-content:space-around}
  .time strong{font-size:1.28rem}
  .capsule-grid{grid-template-columns:1fr 1fr;gap:9px}
  .capsule{min-height:165px;padding:15px}
  .intro{margin-top:52px}
  .finale{padding:25px;align-items:flex-start}
  dialog{width:calc(100% - 16px); max-height:calc(100svh - 24px); padding:30px 18px calc(24px + env(safe-area-inset-bottom)); border-radius:22px}
  .admin-dialog textarea{min-height:145px}
  .file-picker{min-height:54px}
  .capsule-media{max-height:58svh}
}