/* ==========================================================
   متحف الذكريات — الهوية البصرية
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --ink:        #3A3358;
  --ink-2:      #635C86;
  --ink-3:      #736C94;
  --violet:     #7C5CC4;
  --violet-deep:#5F42A6;
  --lilac:      #C9B6F2;
  --lilac-soft: #E7DDFB;
  --peach:      #FFB7A5;
  --peach-soft: #FFE6DE;
  --paper:      #FFFDFB;
  --line:       rgba(124, 92, 196, .16);
  --line-soft:  rgba(124, 92, 196, .10);
  --shadow:     0 12px 32px rgba(112, 86, 164, .12);
  --shadow-sm:  0 4px 14px rgba(112, 86, 164, .09);
  --shadow-lg:  0 24px 60px rgba(58, 51, 88, .20);
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --base: 16px;
  --tilt: 0deg;
}

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size: var(--base);
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink);
  background-color: #F6F1FE;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

body[data-tint="sky"]{
  background-image:
    radial-gradient(120% 55% at 100% 0%, #E7DDFB 0%, rgba(231,221,251,0) 58%),
    radial-gradient(110% 48% at 0% 8%, #DBEEFD 0%, rgba(219,238,253,0) 62%),
    linear-gradient(180deg, #EAF4FD 0%, #F6F1FE 46%, #FFFFFF 100%);
  background-attachment: fixed;
}
body[data-tint="rose"]{
  background-image:
    radial-gradient(120% 55% at 100% 0%, #FFE3DA 0%, rgba(255,227,218,0) 58%),
    radial-gradient(110% 48% at 0% 8%, #EFE3FC 0%, rgba(239,227,252,0) 62%),
    linear-gradient(180deg, #FDF0EC 0%, #F7F0FE 46%, #FFFFFF 100%);
  background-attachment: fixed;
}
body[data-tint="cream"]{
  background-image:
    radial-gradient(120% 55% at 100% 0%, #FBEFD8 0%, rgba(251,239,216,0) 58%),
    radial-gradient(110% 48% at 0% 8%, #E6F1FB 0%, rgba(230,241,251,0) 62%),
    linear-gradient(180deg, #FBF5E9 0%, #F7F1FB 46%, #FFFFFF 100%);
  background-attachment: fixed;
}

body[data-font="sm"]{ --base: 15px; }
body[data-font="md"]{ --base: 16px; }
body[data-font="lg"]{ --base: 18px; }

h1, h2, h3, h4{
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  letter-spacing: 0;
}

p{ margin: 0; }

button, input, textarea, select{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button{ -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

.is-hidden{ display: none !important; }
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.svg-defs{ position: absolute; width: 0; height: 0; overflow: hidden; }

.ico{ width: 22px; height: 22px; display: block; }

:focus-visible{
  outline: 2.5px solid var(--violet);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ================= BACKGROUND DECOR ================= */
.bg-deco{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.dec{ position: absolute; color: var(--violet); opacity: .16; }
.dec-cloud{ width: 120px; height: 66px; }
.c1{ top: 8%; inset-inline-end: -26px; transform: rotate(-6deg); opacity: .18; }
.c2{ top: 44%; inset-inline-start: -34px; width: 150px; transform: scaleX(-1); opacity: .13; }
.c3{ bottom: 12%; inset-inline-end: 6%; width: 96px; opacity: .12; }
.dec-star{ width: 26px; height: 26px; color: #B99BEB; opacity: .42; }
.s1{ top: 16%; inset-inline-start: 12%; }
.s2{ top: 58%; inset-inline-end: 14%; width: 18px; }
.s3{ top: 34%; inset-inline-end: 34%; width: 14px; opacity: .3; }
.dec-heart{ width: 22px; height: 22px; color: #F0A392; opacity: .34; }
.h1{ top: 26%; inset-inline-start: 6%; }
.h2{ bottom: 22%; inset-inline-start: 22%; width: 16px; }
.dec-fly{ width: 54px; height: 50px; opacity: .16; }
.f1{ top: 68%; inset-inline-end: 8%; }
.f2{ top: 4%; inset-inline-start: 30%; width: 36px; height: 33px; opacity: .14; }

@media (max-width: 420px){
  .dec-fly, .dec-heart, .c3 { display: none; }
}

/* ================= WELCOME ================= */
.welcome-screen{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 34px 22px calc(34px + env(safe-area-inset-bottom, 0px));
  background-image:
    radial-gradient(90% 50% at 100% 0%, #E7DDFB 0%, rgba(231,221,251,0) 60%),
    radial-gradient(90% 50% at 0% 100%, #FCE7DF 0%, rgba(252,231,223,0) 58%),
    linear-gradient(180deg, #EAF4FD 0%, #F5EFFD 55%, #FFFFFF 100%);
  transition: opacity .55s ease, transform .55s ease;
}
.welcome-screen.is-leaving{ opacity: 0; transform: scale(1.03); pointer-events: none; }

.welcome-deco{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w-cloud{ position: absolute; color: var(--violet); opacity: .17; }
.w-cloud.w1{ width: 150px; height: 82px; top: 7%; inset-inline-end: -30px; animation: floaty 7s ease-in-out infinite; }
.w-cloud.w2{ width: 110px; height: 60px; bottom: 14%; inset-inline-start: -26px; transform: scaleX(-1); animation: floaty 9s ease-in-out infinite .8s; }
.w-star{ position: absolute; color: #B99BEB; width: 22px; height: 22px; opacity: .5; animation: twinkle 4s ease-in-out infinite; }
.w-star.s1{ top: 20%; inset-inline-start: 16%; }
.w-star.s2{ top: 34%; inset-inline-end: 12%; width: 15px; animation-delay: 1.2s; }
.w-star.s3{ bottom: 22%; inset-inline-end: 24%; width: 12px; animation-delay: 2.1s; }
.w-heart{ position: absolute; color: #F0A392; width: 24px; height: 24px; opacity: .4; animation: floaty 6s ease-in-out infinite; }
.w-heart.h1{ top: 46%; inset-inline-start: 9%; }
.w-heart.h2{ bottom: 30%; inset-inline-end: 10%; width: 18px; animation-delay: 1.4s; }
.w-flymini{ position: absolute; width: 46px; height: 42px; top: 60%; inset-inline-end: 16%; opacity: .38; animation: floaty 5s ease-in-out infinite .4s; }

.welcome-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: riseIn .7s cubic-bezier(.22,1,.36,1) both;
}
.fly-wrap{
  width: 152px;
  height: 140px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  animation: floaty 3.6s ease-in-out infinite;
}
.fly-hero{ width: 100%; height: 100%; overflow: visible; }
.wing-l{ transform-box: fill-box; transform-origin: 100% 50%; animation: wingBeat 3.6s ease-in-out infinite; }
.wing-r{ transform-box: fill-box; transform-origin: 0% 50%; animation: wingBeat 3.6s ease-in-out infinite; }
.fly-hero.is-fluttering .wing-l,
.fly-hero.is-fluttering .wing-r{ animation: wingBeat .22s ease-in-out 4; }

.welcome-eyebrow{
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--violet);
  font-weight: 600;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
}
.welcome-title{
  font-size: clamp(30px, 8.4vw, 42px);
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}
.welcome-tagline{
  font-family: 'Tajawal', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 4.4vw, 19px);
  color: var(--violet-deep);
}
.welcome-sub{
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.9;
  max-width: 340px;
  margin-bottom: 8px;
}
.welcome-foot{
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 6px;
}

.btn-lg{ padding: 15px 40px; font-size: 17px; min-height: 54px; }

/* ================= APP SHELL ================= */
.app{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 253, 251, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.brand{ display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-fly{ width: 32px; height: 29px; flex: none; animation: floaty 4s ease-in-out infinite; }
.brand-name{
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn{
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #FFFDFB;
  color: var(--violet-deep);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.icon-btn:hover{ background: #F6F0FF; }
.icon-btn:active{ transform: scale(.93); }

.main{
  flex: 1 1 auto;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 18px 16px 118px;
}

.view{ animation: fadeUp .32s ease-out both; }

/* ================= BOTTOM NAV ================= */
.bottomnav{
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(255, 253, 251, .93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -8px 26px rgba(112, 86, 164, .08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-inner{
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 2px;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px 6px 8px;
}
.nav-btn{
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  border-radius: 14px;
  cursor: pointer;
  transition: color .18s ease, transform .15s ease, background .18s ease;
}
.nav-btn:active{ transform: scale(.94); }
.nav-ico{ width: 23px; height: 23px; display: block; }
.nav-label{ font-size: 10.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.nav-btn.is-active{ color: var(--violet-deep); }
.nav-btn.is-active .nav-label{ font-weight: 700; }

.nav-add{ flex: 0 0 auto; }
.nav-add-circle{
  width: 54px;
  height: 54px;
  margin-top: -18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #9174DE 0%, #6B49B8 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(124, 92, 196, .42);
  transition: transform .16s ease, box-shadow .2s ease;
}
.nav-add-circle .nav-ico{ width: 26px; height: 26px; }
.nav-add:active .nav-add-circle{ transform: scale(.92); }
.nav-add.is-active .nav-label{ color: var(--violet-deep); font-weight: 700; }
.nav-add.is-active .nav-add-circle{ box-shadow: 0 10px 26px rgba(124, 92, 196, .6); }

/* ================= BUTTONS ================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .22s ease, background .2s ease, opacity .2s ease;
}
.btn:active{ transform: scale(.965); }
.btn:disabled{ opacity: .55; cursor: not-allowed; }
.btn.ico-only{ width: 48px; padding: 0; }

.btn-primary{
  background: linear-gradient(145deg, #9174DE 0%, #6B49B8 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(124, 92, 196, .32);
}
.btn-primary:hover{ box-shadow: 0 12px 30px rgba(124, 92, 196, .42); }

.btn-ghost{
  background: #FFFDFB;
  color: var(--violet-deep);
  border: 1.5px solid rgba(124, 92, 196, .3);
}
.btn-ghost:hover{ background: #F7F2FF; }

.btn-danger{
  background: linear-gradient(145deg, #EE8B7D 0%, #D2604F 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(210, 96, 79, .28);
}
.btn-danger-ghost{
  background: #FFF2EF;
  color: #B94B3D;
  border: 1.5px solid #F3CCC5;
}
.btn-block{ width: 100%; }

.link-btn{
  background: none;
  border: none;
  color: var(--violet-deep);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 10px;
}
.link-btn:hover{ text-decoration: underline; }

/* ================= HOME ================= */
.hero-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 100% 0%, #F4ECFF 0%, rgba(244,236,255,0) 62%),
    linear-gradient(150deg, #FFFFFF 0%, #FBF6FF 100%);
  box-shadow: var(--shadow);
  padding: 22px 20px 24px;
}
.hero-fly{
  position: absolute;
  top: -8px;
  inset-inline-start: 10px;
  width: 92px;
  height: 84px;
  opacity: .9;
  animation: floaty 4s ease-in-out infinite;
  pointer-events: none;
}
.hero-eyebrow{
  font-size: 12px;
  font-weight: 600;
  color: var(--violet);
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.hero-title{
  font-size: clamp(21px, 5.6vw, 27px);
  font-weight: 800;
  color: var(--ink);
  max-width: 78%;
}
.hero-sub{
  font-family: 'Tajawal', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--violet-deep);
  margin-top: 6px;
}
.hero-note{
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

.stat-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
@media (min-width: 520px){
  .stat-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat-chip{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 8px;
  text-align: center;
}
.stat-num{
  display: block;
  font-family: 'Tajawal', sans-serif;
  font-size: 25px;
  font-weight: 800;
  color: var(--violet-deep);
  line-height: 1.2;
}
.stat-lbl{
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}

.block{ margin-top: 26px; }
.block-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.block-title{
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-title svg{ width: 18px; height: 18px; color: var(--violet); }

.mini-scroll{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mini-scroll::-webkit-scrollbar{ display: none; }
.mini-scroll > *{ flex: 0 0 46%; max-width: 200px; scroll-snap-align: start; }

.quick-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.quick-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: start;
  transition: transform .16s ease, box-shadow .22s ease;
  min-height: 64px;
}
.quick-card:active{ transform: scale(.97); }
@media (hover: hover){
  .quick-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
}
.quick-ico{
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #F2EAFF, #E8DCFB);
  color: var(--violet-deep);
}
.quick-ico svg{ width: 20px; height: 20px; }
.quick-ico.peach{ background: linear-gradient(145deg, #FFEFEA, #FFE1D7); color: #C0674F; }
.quick-ico.sky{ background: linear-gradient(145deg, #EAF3FD, #DCE9FA); color: #4A6E9E; }
.quick-ico.mint{ background: linear-gradient(145deg, #E8F6EE, #D9EEE3); color: #3F7D61; }
.quick-txt{ min-width: 0; }
.quick-title{ font-family: 'Tajawal', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.quick-sub{ font-size: 11.5px; color: var(--ink-3); }

.quote{
  margin: 26px auto 0;
  text-align: center;
  font-family: 'Tajawal', sans-serif;
  font-size: 14.5px;
  color: var(--violet-deep);
  opacity: .86;
  max-width: 320px;
  line-height: 1.8;
}

/* ================= POLAROID CARD ================= */
.polaroid-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 560px){ .polaroid-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 880px){ .polaroid-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.polaroid{
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid rgba(201, 182, 242, .55);
  border-radius: 22px;
  padding: 10px 10px 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-user-select: none;
  user-select: none;
}
.polaroid.tilt-a{ --tilt: -1.8deg; }
.polaroid.tilt-b{ --tilt: 1.8deg; }
body[data-tilt="off"] .polaroid{ --tilt: 0deg; }
@media (hover: hover){
  .polaroid:hover{ transform: rotate(0deg) translateY(-4px); box-shadow: 0 20px 44px rgba(112, 86, 164, .2); }
}
.polaroid:active{ transform: rotate(0deg) scale(.975); }

.polaroid-photo{
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #F4EEFF, #FDEDE8);
}
.polaroid-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-fallback{
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #F1E9FD 0%, #FDEBE4 100%);
}
.photo-fallback svg{ width: 56%; height: auto; opacity: .82; }

.fav-btn{
  position: absolute;
  top: 7px;
  inset-inline-start: 7px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 253, 251, .88);
  backdrop-filter: blur(6px);
  color: #B5836F;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(58, 51, 88, .16);
  transition: transform .16s ease, background .2s ease, color .2s ease;
}
.fav-btn svg{ width: 19px; height: 19px; }
.fav-btn:active{ transform: scale(.86); }
.fav-btn.is-fav{ color: #E2647C; background: #FFF2F5; }
.fav-btn.is-fav svg{ animation: pop .3s ease-out; }

.polaroid-body{ padding: 9px 4px 0; }
.polaroid-title{
  font-family: 'Tajawal', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.polaroid-date{
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.polaroid .tag{ margin-top: 7px; }

.tag{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--tag-bg, #F0E9FD);
  color: var(--tag-ink, #5F42A6);
  white-space: nowrap;
  line-height: 1.7;
}
.tag .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tag-ink, #5F42A6);
  flex: none;
}

/* ================= PAGE HEAD ================= */
.page-head{ margin-bottom: 16px; }
.page-head h1{
  font-size: clamp(22px, 5.8vw, 28px);
  font-weight: 800;
  color: var(--ink);
}
.page-head p{
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 3px;
}

/* ================= SEARCH & FILTERS ================= */
.search-wrap{ position: relative; margin-bottom: 12px; }
.search-wrap .search-icon{
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--ink-3);
  pointer-events: none;
}
.search-input{
  width: 100%;
  min-height: 50px;
  padding: 12px 46px 12px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(124, 92, 196, .2);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-input::placeholder{ color: var(--ink-3); }
.search-input:focus{
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 92, 196, .12);
}

.chip-row{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chip-row::-webkit-scrollbar{ display: none; }

.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 999px;
  border: 1.5px solid rgba(124, 92, 196, .18);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .14s ease;
  -webkit-user-select: none;
  user-select: none;
}
.chip:active{ transform: scale(.95); }
.chip.is-active{
  background: linear-gradient(145deg, #F3EBFF, #EADFFC);
  border-color: var(--lilac);
  color: var(--violet-deep);
  font-weight: 700;
}
.chip .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--dot-c, var(--violet));
}

.filter-row{
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.filter-row .select-wrap{ flex: 1 1 0; min-width: 0; position: relative; }
.filter-row select{
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(124, 92, 196, .18);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.filter-row select:focus{
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 92, 196, .12);
}

.count-line{
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 6px 2px 12px;
}

/* ================= EMPTY STATE ================= */
.empty{
  text-align: center;
  padding: 30px 22px;
  border-radius: var(--r-lg);
  border: 1.6px dashed rgba(124, 92, 196, .28);
  background: rgba(255, 253, 251, .72);
}
.empty-fly{ width: 78px; height: 71px; margin: 0 auto 8px; animation: floaty 4s ease-in-out infinite; }
.empty h3{
  font-size: 16.5px;
  color: var(--ink);
  margin-bottom: 4px;
}
.empty p{
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 300px;
  margin: 0 auto 14px;
}

/* ================= FORM ================= */
.form-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 18px 16px 20px;
}

.upload{
  position: relative;
  margin-bottom: 20px;
}
.upload-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 168px;
  padding: 18px;
  border-radius: 20px;
  border: 1.8px dashed rgba(124, 92, 196, .34);
  background: linear-gradient(150deg, #FBF7FF, #FFF3EF);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
  overflow: hidden;
}
.upload-inner:hover{ border-color: var(--violet); }
.upload-inner img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}
.upload.has-image .upload-inner{
  min-height: 240px;
  padding: 0;
  border-style: solid;
  border-color: var(--line);
  overflow: hidden;
}
.upload-ico{ width: 40px; height: 40px; color: var(--violet); }
.upload-title{
  font-family: 'Tajawal', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}
.upload-hint{ font-size: 12.5px; color: var(--ink-3); }
.upload-clear{
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 253, 251, .92);
  color: #B94B3D;
  box-shadow: 0 3px 12px rgba(58, 51, 88, .2);
  cursor: pointer;
}
.upload-clear:active{ transform: scale(.9); }
.upload-clear svg{ width: 18px; height: 18px; }

.field{ margin-bottom: 16px; }
.field-label{
  display: block;
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.req{ color: #D2604F; }
.input, .textarea{
  width: 100%;
  padding: 12px 14px;
  min-height: 50px;
  border-radius: 15px;
  border: 1.5px solid rgba(124, 92, 196, .2);
  background: #FFFEFD;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.textarea{ resize: vertical; min-height: 118px; padding-top: 12px; }
.input::placeholder, .textarea::placeholder{ color: var(--ink-3); }
.input:focus, .textarea:focus{
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(124, 92, 196, .12);
}
.input.has-error, .textarea.has-error{ border-color: #D2604F; }

.field-error{
  font-size: 12.5px;
  color: #B94B3D;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.form-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

/* ================= TIMELINE ================= */
.tl-toggle{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.timeline{ position: relative; padding-inline-start: 28px; }
.timeline::before{
  content: '';
  position: absolute;
  inset-inline-start: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #C9B6F2 0%, #FFC8B8 100%);
}
.tl-month{
  position: relative;
  margin: 0 0 12px;
  margin-inline-start: -28px;
  padding-inline-start: 28px;
}
.tl-month span{
  display: inline-block;
  font-family: 'Tajawal', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--violet-deep);
  background: linear-gradient(145deg, #F3EBFF, #EBE0FC);
  border: 1px solid rgba(201, 182, 242, .7);
  border-radius: 999px;
  padding: 3px 14px;
  margin-top: 12px;
}
.tl-item{ position: relative; margin-bottom: 12px; }
.tl-dot{
  position: absolute;
  inset-inline-start: -26px;
  top: 26px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid #FFFDFB;
  box-shadow: 0 0 0 1.6px rgba(124, 92, 196, .22);
  box-sizing: content-box;
}
.tl-card{
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 10px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .22s ease;
}
.tl-card:active{ transform: scale(.985); }
@media (hover: hover){ .tl-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); } }
.tl-thumb{
  flex: none;
  width: 76px;
  height: 92px;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(150deg, #F1E9FD, #FDEBE4);
  display: grid;
  place-items: center;
}
.tl-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.tl-thumb svg{ width: 70%; opacity: .8; }
.tl-body{ min-width: 0; flex: 1 1 auto; padding: 2px 0; }
.tl-title{
  font-family: 'Tajawal', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.tl-date{ font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.tl-snippet{
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-body .tag{ margin-top: 6px; }

/* ================= STATS ================= */
.stats-hero{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 0% 0%, #FDF0EA 0%, rgba(253,240,234,0) 60%),
    linear-gradient(150deg, #FFFFFF, #F8F3FF);
  box-shadow: var(--shadow);
}
.stats-hero .fly-mini{ width: 62px; height: 57px; flex: none; animation: floaty 4.2s ease-in-out infinite; }
.stats-hero h2{ font-size: 17px; color: var(--ink); }
.stats-hero p{ font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }

.set-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-top: 14px;
}
.set-card h2{
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 10px;
}
.set-card h3{ font-size: 14px; color: var(--ink); }
.set-card .hint{ font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.bar-row{ margin-bottom: 12px; }
.bar-row:last-child{ margin-bottom: 0; }
.bar-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.bar-head .bar-num{ font-weight: 700; color: var(--ink); font-family: 'Tajawal', sans-serif; }
.bar-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(124, 92, 196, .10);
  overflow: hidden;
}
.bar-fill{
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  min-width: 0;
}

.highlight-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, #F7F1FF, #FFF3EE);
  border: 1px solid var(--line-soft);
}
.highlight-row + .highlight-row{ margin-top: 10px; }
.highlight-ico{
  width: 40px; height: 40px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #FFFDFB;
  color: var(--violet-deep);
  box-shadow: var(--shadow-sm);
}
.highlight-ico svg{ width: 20px; height: 20px; }
.highlight-txt{ min-width: 0; }
.highlight-lbl{ font-size: 11.5px; color: var(--ink-3); }
.highlight-val{ font-family: 'Tajawal', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); }

/* ================= SETTINGS ================= */
.segmented{
  display: flex;
  gap: 6px;
  background: rgba(124, 92, 196, .07);
  padding: 5px;
  border-radius: 16px;
}
.segmented button{
  flex: 1 1 0;
  min-height: 42px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.segmented button.is-active{
  background: #FFFDFB;
  color: var(--violet-deep);
  box-shadow: 0 3px 10px rgba(112, 86, 164, .14);
}

.swatches{ display: flex; gap: 10px; }
.swatch{
  flex: 1 1 0;
  min-height: 54px;
  border-radius: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color .18s ease, transform .15s ease;
}
.swatch:active{ transform: scale(.96); }
.swatch.is-active{ border-color: var(--violet); color: var(--violet-deep); }
.swatch.sky{ background: linear-gradient(145deg, #EAF4FD, #EFE6FD); }
.swatch.rose{ background: linear-gradient(145deg, #FDEBE5, #F1E5FC); }
.swatch.cream{ background: linear-gradient(145deg, #FBF2DF, #EFE9FA); }

.switch-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}
.switch-row + .switch-row{ border-top: 1px solid var(--line-soft); }
.switch{
  flex: none;
  width: 54px;
  height: 31px;
  border-radius: 999px;
  border: none;
  background: rgba(124, 92, 196, .2);
  position: relative;
  cursor: pointer;
  transition: background .22s ease;
}
.switch::after{
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(58, 51, 88, .22);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.switch[aria-checked="true"]{ background: linear-gradient(145deg, #9174DE, #6B49B8); }
.switch[aria-checked="true"]::after{ transform: translateX(-23px); }
html[dir="rtl"] .switch[aria-checked="true"]::after{ transform: translateX(-23px); }

.set-action{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border-radius: 15px;
  border: 1.5px solid rgba(124, 92, 196, .18);
  background: #FFFEFD;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.set-action + .set-action{ margin-top: 9px; }
.set-action:active{ transform: scale(.985); }
.set-action svg{ width: 20px; height: 20px; color: var(--violet-deep); flex: none; }
.set-action.danger{ color: #B94B3D; border-color: #F3CCC5; background: #FFF4F2; }
.set-action.danger svg{ color: #C05A4E; }

.app-foot{
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 24px;
  line-height: 1.9;
}

/* ================= MODALS ================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal.is-center{ align-items: center; z-index: 70; padding: 20px; }
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(48, 42, 74, .42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn .25s ease-out;
}
.sheet{
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFFDFB 0%, #FAF6FF 100%);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 48px rgba(58, 51, 88, .24);
  overflow: hidden;
  animation: sheetUp .34s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 720px){
  .modal{ align-items: center; padding: 24px; }
  .sheet{ border-radius: 28px; max-height: 86vh; }
}
.sheet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 253, 251, .94);
  flex: none;
}
.sheet-head h2{
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
}
.sheet-body{
  overflow-y: auto;
  padding: 18px 16px 26px;
  -webkit-overflow-scrolling: touch;
}

.detail-polaroid{
  margin: 0 auto;
  max-width: 340px;
  --tilt: 0deg;
  cursor: default;
}
.detail-polaroid:hover{ transform: none; }
.detail-polaroid:active{ transform: none; }
.detail-polaroid .polaroid-photo{ aspect-ratio: 4 / 5; }

.detail-name{
  font-size: clamp(20px, 5.4vw, 25px);
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin-top: 18px;
}
.detail-date{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}
.detail-date svg{ width: 16px; height: 16px; }

.detail-tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.detail-tags .tag{ font-size: 12px; padding: 5px 13px; }

.detail-story{
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: #FFFEFD;
  border: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink);
  white-space: pre-line;
  word-break: break-word;
}
.detail-story.is-empty{ color: var(--ink-3); font-style: normal; text-align: center; }

.detail-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.detail-actions .wide{ grid-column: 1 / -1; }

.confirm-card{
  position: relative;
  width: 100%;
  max-width: 350px;
  background: linear-gradient(180deg, #FFFDFB, #FBF6FF);
  border-radius: 26px;
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: popIn .28s cubic-bezier(.22,1,.36,1);
}
.confirm-fly{ width: 62px; height: 57px; margin: 0 auto 6px; }
.confirm-fly .fly-mini{ width: 100%; height: 100%; animation: floaty 3.6s ease-in-out infinite; }
.confirm-title{ font-size: 18px; font-weight: 800; color: var(--ink); }
.confirm-msg{ font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.8; }
.confirm-actions{ display: flex; gap: 10px; margin-top: 20px; }
.confirm-actions .btn{ flex: 1 1 0; min-height: 46px; padding: 10px 14px; font-size: 14.5px; }

/* ================= TOAST ================= */
.toast{
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 104px;
  transform: translate(-50%, 16px);
  max-width: calc(100% - 36px);
  padding: 12px 22px;
  border-radius: 999px;
  background: #3A3358;
  color: #FFFDFB;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
  box-shadow: 0 14px 34px rgba(58, 51, 88, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1);
}
.toast.is-show{ opacity: 1; transform: translate(-50%, 0); }

/* ================= ANIMATIONS ================= */
@keyframes floaty{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes wingBeat{
  0%, 100%{ transform: scaleX(1); }
  50%{ transform: scaleX(.84); }
}
@keyframes twinkle{
  0%, 100%{ opacity: .25; transform: scale(.9); }
  50%{ opacity: .6; transform: scale(1.1); }
}
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes riseIn{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes sheetUp{
  from{ transform: translateY(30px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
@keyframes popIn{
  from{ transform: scale(.9); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
@keyframes pop{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.32); }
  100%{ transform: scale(1); }
}

body[data-motion="off"] .dec,
body[data-motion="off"] .w-cloud,
body[data-motion="off"] .w-star,
body[data-motion="off"] .w-heart,
body[data-motion="off"] .w-flymini,
body[data-motion="off"] .fly-wrap,
body[data-motion="off"] .fly-hero,
body[data-motion="off"] .brand-fly,
body[data-motion="off"] .hero-fly,
body[data-motion="off"] .empty-fly,
body[data-motion="off"] .fly-mini{
  animation: none !important;
}

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

/* ================= SMALL SCREEN TWEAKS ================= */
@media (max-width: 360px){
  .main{ padding-inline: 12px; }
  .nav-label{ font-size: 9.5px; }
  .nav-ico{ width: 21px; height: 21px; }
  .nav-add-circle{ width: 50px; height: 50px; }
  .hero-title{ max-width: 100%; }
  .hero-fly{ opacity: .55; }
  .quick-card{ padding: 12px 10px; gap: 8px; }
  .quick-ico{ width: 34px; height: 34px; }
  .polaroid-grid{ gap: 10px; }
  .mini-scroll > *{ flex-basis: 54%; }
}

@media (min-width: 900px){
  .main{ padding-top: 26px; }
  .mini-scroll > *{ flex: 0 0 30%; max-width: 230px; }
}