:root{
  --bg:#F6F6FB;
  --surface:#FFFFFF;
  --surface-2:#EFEFF8;
  --ink:#20222E;
  --ink-soft:#63677A;
  --ink-faint:#9497A8;
  --line:#E6E6F0;
  --accent:#5457E5;
  --accent-ink:#FFFFFF;
  --accent-soft:#ECECFD;
  --flame-1:#FF7A59;
  --flame-2:#FFC65C;
  --flame-ink:#3E1400;
  --danger:#E5484D;
  --danger-soft:#FDEAEA;
  --shadow-sm:0 1px 2px rgba(32,34,46,.05);
  --shadow-md:0 10px 30px -8px rgba(32,34,46,.18);
  --shadow-warm:0 14px 34px -10px rgba(255,122,89,.45);
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"]{
  --bg:#15161C;
  --surface:#1D1F27;
  --surface-2:#242631;
  --ink:#EDEDF2;
  --ink-soft:#A2A5B5;
  --ink-faint:#6B6E80;
  --line:#2D2F3B;
  --accent:#8A8DFF;
  --accent-ink:#12121A;
  --accent-soft:#242642;
  --flame-1:#FF8A66;
  --flame-2:#FFCE73;
  --flame-ink:#2B0F00;
  --danger:#FF6B6F;
  --danger-soft:#3A1F22;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 12px 28px -8px rgba(0,0,0,.45);
  --shadow-warm:0 16px 36px -10px rgba(255,122,89,.35);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope','Noto Sans Armenian',system-ui,-apple-system,sans-serif;
  transition:background .25s ease, color .25s ease;
}
img{max-width:100%;}

.page{max-width:640px;margin:0 auto;padding-block:40px 64px;padding-inline:20px;}
@media (max-width:480px){ .page{padding-block:28px 48px;padding-inline:16px;} }

a{color:inherit;}

/* ---------- language switch & theme toggle ---------- */
.header-actions{display:flex;align-items:center;gap:10px;}

.lang-switch{display:inline-flex;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:3px;gap:2px;flex-shrink:0;}
.lang-btn{border:none;background:transparent;color:var(--ink-soft);font-weight:800;font-size:12px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s ease;font-family:inherit;text-decoration:none;display:inline-block;}
.lang-btn.active{background:var(--accent);color:var(--accent-ink);}
.lang-btn:not(.active):hover{color:var(--accent);}

.theme-toggle{
  width:34px;height:34px;flex-shrink:0;border-radius:999px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:.2s ease;
}
.theme-toggle svg{width:16px;height:16px;}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);}

/* ---------- header ---------- */
.site-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:30px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand svg{width:32px;height:32px;flex-shrink:0;}
.brand h1{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:clamp(26px,6vw,32px);letter-spacing:-0.02em;margin:0;text-wrap:balance;}
.subtitle{color:var(--ink-soft);font-size:13.5px;margin-top:3px;}

/* ---------- record list ---------- */
.list{display:flex;flex-direction:column;gap:12px;}

.record{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:18px 18px 6px 6px;
  padding:14px 18px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, background .4s ease, color .3s ease, padding .3s ease;
  animation:rise .55s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--i) * 70ms);
}
.record:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.date-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;flex-shrink:0;}
.date-badge .month{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;}
.date-badge .day{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:25px;line-height:1.05;font-variant-numeric:tabular-nums;}
.date-badge .weekday{font-size:10.5px;color:var(--ink-faint);}

.perforation{align-self:stretch;width:0;border-left:2px dashed var(--line);position:relative;flex-shrink:0;}
.perforation::before,.perforation::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:9px;height:9px;background:var(--bg);border-radius:50%;}
.perforation::before{top:-13px;}
.perforation::after{bottom:-13px;}

.info{flex:1;min-width:0;}
.info .name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.info .meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.info .meta-sub{font-size:11.5px;color:var(--ink-faint);margin-top:1px;}

.countdown{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:7px 12px;border-radius:999px;flex-shrink:0;white-space:nowrap;}
.countdown svg{width:13px;height:13px;}

/* record becoming "due soon": from 3 days out through the whole birthday day */
.record.is-soon{
  background:linear-gradient(135deg,var(--flame-1),var(--flame-2));
  border-color:transparent;
  color:var(--flame-ink);
  padding:21px 22px;
  box-shadow:var(--shadow-warm);
}
.record.is-soon .date-badge .month,
.record.is-soon .date-badge .weekday{color:rgba(62,20,0,.65);}
.record.is-soon .date-badge .day{font-size:31px;}
.record.is-soon .perforation{border-left-color:rgba(62,20,0,.22);}
.record.is-soon .perforation::before,
.record.is-soon .perforation::after{opacity:0;}
.record.is-soon .info .name{color:var(--flame-ink);font-size:17px;}
.record.is-soon .info .meta{color:rgba(62,20,0,.75);}
.record.is-soon .info .meta-sub{color:rgba(62,20,0,.6);}
.record.is-soon .countdown{background:rgba(255,255,255,.38);color:var(--flame-ink);}

.record.is-today{z-index:1;}
.record.is-today::after{
  content:'';position:absolute;inset:-6px;border-radius:inherit;
  background:linear-gradient(135deg,var(--flame-1),var(--flame-2));
  opacity:.4;filter:blur(16px);z-index:-1;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.28;}50%{opacity:.55;}}

.empty{padding:34px 16px;text-align:center;color:var(--ink-soft);font-size:14px;border:1.5px dashed var(--line);border-radius:16px;}

@media (max-width:420px){
  .record{gap:12px;padding:12px 14px;}
  .record.is-soon{padding:17px 16px;}
  .date-badge{width:44px;}
  .date-badge .day{font-size:21px;}
  .record.is-soon .date-badge .day{font-size:25px;}
  .countdown{padding:6px 10px;font-size:11px;}
  .info .name{font-size:15px;}
}

/* ---------- admin: gate ---------- */
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.back-link{display:inline-block;color:var(--ink-soft);text-decoration:none;font-size:13.5px;font-weight:700;}
.back-link:hover{color:var(--accent);}

.gate{max-width:340px;margin:6vh auto 0;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:32px 26px;box-shadow:var(--shadow-md);text-align:center;}
.gate h2{font-family:'Fraunces',Georgia,serif;font-size:22px;margin:0 0 6px;}
.gate p{color:var(--ink-soft);font-size:13.5px;margin:0 0 20px;line-height:1.5;}

input[type=password],input[type=text],input[type=date],input[type=number]{
  width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface-2);font-size:15px;font-family:inherit;color:var(--ink);
  transition:border-color .2s;
}
input:focus{outline:none;border-color:var(--accent);}

button{font-family:inherit;}
button.primary{
  width:100%;margin-top:14px;padding:12px 14px;border:none;border-radius:12px;
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14.5px;
  cursor:pointer;transition:transform .15s, box-shadow .15s;
}
button.primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
button.primary:active{transform:translateY(0);}

.error{color:var(--danger);font-size:13px;font-weight:700;margin-top:10px;min-height:16px;}
.shake{animation:shake .4s;}
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}

/* ---------- admin: panel ---------- */
.logout-btn{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.2s;}
.logout-btn:hover{border-color:var(--danger);color:var(--danger);}

.panel-title{font-family:'Fraunces',Georgia,serif;font-size:22px;margin:0 0 16px;}

.add-form{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:18px;margin-bottom:24px;box-shadow:var(--shadow-sm);}
.add-form .row{display:flex;gap:12px;flex-wrap:wrap;}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px;}
.field label{font-size:11.5px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
.add-form button.primary{margin-top:2px;}

.admin-list-head{font-size:12px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;margin:22px 2px 10px;}

.admin-row{display:flex;align-items:center;gap:14px;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:8px;box-shadow:var(--shadow-sm);}
.admin-row .date-badge{width:42px;}
.admin-row .date-badge .day{font-size:17px;}
.admin-row .info{flex:1;min-width:0;}
.admin-row .info .name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-row .info .meta{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.admin-row .info .meta-sub{font-size:11px;color:var(--ink-faint);margin-top:1px;}
.admin-row .del-form{flex-shrink:0;}

.del-btn,.edit-btn{flex-shrink:0;width:40px;height:40px;min-width:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;text-decoration:none;}
.del-btn svg,.edit-btn svg{width:16px;height:16px;}
.del-btn:hover{border-color:var(--danger);color:var(--danger);}
.del-btn.confirm{width:auto;padding:0 14px;background:var(--danger-soft);border-color:var(--danger);color:var(--danger);font-size:12px;font-weight:800;}
.edit-btn:hover{border-color:var(--accent);color:var(--accent);}

.edit-form{margin-bottom:8px;}
.edit-form .row:last-child{align-items:center;gap:14px;}
.edit-form button.primary{width:auto;flex:0 0 auto;padding-inline:22px;margin-top:0;}
.cancel-link{color:var(--ink-soft);font-weight:700;font-size:13.5px;text-decoration:none;padding:8px 6px;}
.cancel-link:hover{color:var(--danger);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}