/* Q Moment — واجهة المنصة بهوية «ليلة العاج». القوالب لها ملفاتها في tpl/ */
:root {
  --night: #1E1426;
  --velvet: #3A2A47;
  --champ: #D8B98A;
  --champ-2: #E6CDA6;
  --bronze: #7D5F31;
  --ivory: #F7F1E8;
  --ivory-2: #FBF7F0;
  --card: #FFFDF9;
  --ink: #2A1D33;
  --muted: #6A5A70;
  --line: #E8DCCB;
  --line-2: #F0E7DA;
  --rose: #C99A9E;
  --yes: #245A3F; --yes-bg: #E3F0E8;
  --no: #8E2A2A; --no-bg: #FBEAEA;
  --open: #7A4E0E; --open-bg: #FBF0DC;
  --new: #5A4566; --new-bg: #EFE8F0;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 1rem/1.75 'Plex Arabic', system-ui, 'Segoe UI', sans-serif; }
h1, h2, h3, p { margin: 0; }
a { color: var(--bronze); }
a:hover { color: var(--ink); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--champ); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 20; background: var(--champ); color: var(--night); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
.ruqaa { font-family: 'Aref Ruqaa', 'Amiri', serif; font-weight: 700; }
.latin { font-family: 'Syncopate', sans-serif; letter-spacing: .18em; font-size: .7rem; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
code { font-size: .85em; background: var(--line-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* أزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 1rem 'Plex Arabic', sans-serif; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.btn-glow { background: var(--champ); color: var(--night); }
.btn-glow:hover { background: var(--champ-2); color: var(--night); }
.btn-line { border-color: rgba(247,241,232,.4); color: #fff; }
.btn-line:hover { border-color: var(--champ); color: #fff; }
.btn-ink { background: var(--ink); color: var(--ivory); }
.btn-ink:hover { background: var(--night); color: var(--ivory); }
.btn-ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-ghost:hover { border-color: var(--bronze); }

/* الترويسة */
.top { background: var(--night); color: var(--ivory); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 0; }
.brand { display: flex; }
.brand svg { height: 32px; width: auto; }
.nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav a:not(.btn) { color: rgba(247,241,232,.8); text-decoration: none; font-weight: 500; }
.nav a:not(.btn):hover, .nav a[aria-current=page]:not(.btn) { color: var(--champ); }
.home .top { background: transparent; position: absolute; inset-inline: 0; top: 0; z-index: 2; }

/* البطل */
.hero { position: relative; overflow: hidden; background: radial-gradient(900px 600px at 20% 15%, var(--velvet), transparent 70%), var(--night); color: #fff; padding: 140px 0 70px; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--champ); font-size: .85rem; font-weight: 600; }
.eyebrow i { width: 28px; height: 2px; background: var(--champ); border-radius: 2px; }
.hero h1 { font-size: clamp(3.2rem, 7.4vw, 6.4rem); line-height: 1.25; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: rgba(255,255,255,.82); max-width: 34ch; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-phone { display: flex; justify-content: center; }
.phone { width: 290px; height: 590px; border-radius: 44px; background: var(--velvet); padding: 12px; box-shadow: 0 40px 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-3deg); }
.phone-screen { height: 100%; border-radius: 34px; overflow: hidden; background: radial-gradient(420px 360px at 50% 30%, #4B5A48, #2E382D); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; text-align: center; color: #E9DFC9; font-family: 'Amiri', serif; }
.ph-guest { display: flex; flex-direction: column; font-size: 15px; }
.ph-guest strong { font-size: 20px; }
.ph-env { position: relative; width: 236px; height: 160px; background: #EFE6D3; border-radius: 6px; box-shadow: 0 18px 30px rgba(0,0,0,.35); }
.ph-env .f { position: absolute; top: 0; left: 0; right: 0; height: 92px; background: #E6DBC4; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ph-env .s { position: absolute; top: 64px; left: 50%; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #A63A46, #6E1A25 70%); display: flex; align-items: center; justify-content: center; color: #E7B9A0; font: 700 20px 'Amiri', serif; font-style: normal; }
.phone-screen small { font-family: 'Plex Arabic', sans-serif; font-size: 12px; color: rgba(233,223,201,.75); }

/* خط الزمن — توقيع الصفحة */
.timeline { margin-top: 80px; }
.tl-track { position: relative; height: 40px; }
.tl-line { position: absolute; top: 50%; inset-inline: 0; height: 2px; border-radius: 2px; background: linear-gradient(to left, #9A8AA0 0%, var(--champ) 52%, rgba(154,138,160,.25) 100%); transform-origin: right center; animation: draw 2.2s cubic-bezier(.6,.05,.2,1) both; }
.tl-node { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(50%, -50%); background: var(--night); border: 2px solid #9A8AA0; }
.tl-node.n1, .tl-labels .n1 { right: 14%; }
.tl-node.now, .tl-labels .now { right: 52%; }
.tl-node.n3, .tl-labels .n3 { right: 86%; }
.tl-node.n3 { border-style: dashed; opacity: .6; }
.tl-node.now { width: 22px; height: 22px; background: var(--champ); border: 0; animation: beat 2.8s ease-in-out infinite; }
.tl-labels { position: relative; height: 54px; font-size: .9rem; }
.tl-labels span { position: absolute; transform: translateX(50%); white-space: nowrap; color: rgba(255,255,255,.6); }
.tl-labels .now { color: var(--champ); font-weight: 600; }
.tl-labels .n3 { color: rgba(255,255,255,.58); }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes beat { 0%, 100% { box-shadow: 0 0 0 8px rgba(216,185,138,.16), 0 0 34px rgba(216,185,138,.6); } 50% { box-shadow: 0 0 0 14px rgba(216,185,138,.08), 0 0 60px rgba(216,185,138,.9); } }
.rise { animation: rise .9s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* أقسام */
.sec { padding: 100px 0; }
.sec-alt { background: var(--ivory-2); border-block: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-bottom: 40px; }
.sec-head.row { max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sec-head h1, .sec-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--ink); line-height: 1.4; }
.sec-head p { color: var(--muted); font-size: 1.08rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; }
.steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 3px solid var(--ink); }
.steps li:nth-child(2) { border-color: #5A4566; }
.steps li:nth-child(3) { border-color: var(--bronze); }
.step-n { font-weight: 700; color: var(--bronze); font-size: .9rem; }
.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--muted); }

/* بطاقات القوالب */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 22px; }
.tcard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.tcard:hover .thumb, .tlink:hover .thumb { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(42,29,51,.18); }
.tmeta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tmeta strong { font-size: 1.08rem; }
.tmeta span { color: var(--muted); font-size: .9rem; }
.tmeta .live { color: var(--bronze); font-weight: 600; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.tmeta .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); }
.tmeta .soon { font-size: .8rem; }

/* المزايا */
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 22px; }
.feat-main { background: var(--ink); color: #fff; border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.feat-url { text-align: right; color: var(--champ); background: rgba(255,255,255,.06); border-radius: 12px; padding: 12px 16px; font-size: .95rem; overflow-wrap: anywhere; }
.feat-greet { font-family: 'Amiri', serif; font-size: 1.5rem; line-height: 1.8; }
.feat-list { display: flex; flex-direction: column; gap: 22px; }
.feat-item { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; display: flex; gap: 16px; align-items: flex-start; color: var(--bronze); }
.feat-item svg { flex: none; margin-top: 4px; }
.feat-item h3 { font-size: 1.1rem; color: var(--ink); }
.feat-item p { color: var(--muted); }

.price { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 28px; align-items: center; }
.price h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
.price p { color: var(--muted); margin-bottom: 10px; max-width: 46ch; }
.price-card { border: 1.5px solid var(--ink); border-radius: 26px; padding: 36px; display: flex; flex-direction: column; gap: 22px; background: var(--card); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-card li { display: flex; gap: 12px; align-items: center; }
.price-card li svg { color: var(--bronze); flex: none; }
.price-card .btn { align-self: flex-start; }

.close { background: var(--night); color: #fff; padding: 110px 0 60px; text-align: center; }
.close .wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.close p { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.4; }

.foot { background: var(--night); color: rgba(247,241,232,.68); font-size: .9rem; }
.foot-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); padding: 26px 0 34px; }
.foot a { color: var(--champ); }
.foot-links { display: flex; gap: 22px; }
.foot-links a { color: rgba(247,241,232,.72); }

/* صور القوالب المصغّرة */
.thumb { aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; position: relative; transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 1px 2px rgba(42,29,51,.06); display: flex; align-items: center; justify-content: center; }
.thumb > svg { width: 70%; }
.thumb i { position: absolute; display: block; }
.th-envelope { background: radial-gradient(circle at 50% 35%, #4B5A48, #2E382D); }
.th-envelope .env-b { top: 34%; left: 15%; right: 15%; height: 36%; background: #EFE6D3; border-radius: 4px; }
.th-envelope .env-f { top: 34%; left: 15%; right: 15%; height: 21%; background: #E3D7BE; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.th-envelope .env-s { top: 48%; left: 50%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #A63A46, #6E1A25 70%); }
.th-rings { background: radial-gradient(circle at 50% 45%, #3A3024, #161310 75%); }
.th-andalus { background: #F4EFE6; }
.th-andalus > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.th-andalus .zel { left: 0; right: 0; bottom: 0; height: 18%; background: conic-gradient(#1D3D7A 25%, #F4EFE6 0 50%, #2F6B4F 0 75%, #F4EFE6 0) 0 0/16px 16px; }
.th-pearls { background: radial-gradient(circle at 50% 45%, #4A5260, #262B34 75%); }
.th-pearls .ring { width: 120px; height: 120px; border-radius: 50%; border: 9px dotted #EEE7E4; position: static; }
.th-pearls .clasp { top: calc(50% - 72px); left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F1DDA3, #C2A05A 55%, #8C6A3A); }
.th-henna { background: radial-gradient(circle at 50% 45%, #F7EBD8, #E9D3B3); }
.th-henna > svg { width: 50%; }
.th-shanasheel { background: #3A2418; gap: 6px; padding: 28px 22px; align-items: stretch; }
.th-shanasheel .sh { position: static; flex: 1; border: 4px solid #6B4429; border-radius: 60px 60px 4px 4px; }
.th-shanasheel .a { background: repeating-linear-gradient(0deg, transparent 0 16px, #6B4429 16px 19px), repeating-linear-gradient(90deg, rgba(42,140,140,.85) 0 16px, #6B4429 16px 19px); }
.th-shanasheel .b { background: repeating-linear-gradient(0deg, transparent 0 16px, #6B4429 16px 19px), repeating-linear-gradient(90deg, rgba(216,154,58,.85) 0 16px, #6B4429 16px 19px); }
.th-door { background: #2B1D14; gap: 4px; padding: 30px 30px 0; align-items: stretch; }
.th-door .dr { position: static; flex: 1; background: repeating-linear-gradient(90deg, #7A4B2A 0 10px, #6A3F22 10px 12px); box-shadow: inset 0 0 0 5px #4A2E1A; }
.th-door .a { border-radius: 0 80px 0 0; }
.th-door .b { border-radius: 80px 0 0 0; }
.th-star { background: #10294A; }
.th-star .star { position: relative; width: 96px; height: 96px; border: 2px solid #D4B06A; }
.th-star .star i { inset: -2px; border: 2px solid #D4B06A; transform: rotate(45deg); }
.th-lanterns { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 18%, #fff, transparent), radial-gradient(1px 1px at 40% 60%, #fff, transparent), radial-gradient(circle at 50% 20%, #1C2D63, #0B1330); }
.th-lanterns .lan { top: 34%; left: 50%; width: 46px; height: 72px; margin-left: -23px; border-radius: 22px 22px 10px 10px; background: radial-gradient(circle at 50% 55%, #FFD68A, #D98E2B 70%); box-shadow: 0 0 50px rgba(255,190,90,.6); }
.th-goldink { background: #141414; }
.th-watercolor { background: #F6E4E1; }
.th-watercolor .wc { border-radius: 50%; }
.th-watercolor .a { top: 18%; right: 20%; width: 90px; height: 90px; background: rgba(214,130,140,.35); }
.th-watercolor .b { top: 40%; left: 18%; width: 70px; height: 70px; background: rgba(170,190,150,.4); }
.th-watercolor .c { bottom: 18%; right: 34%; width: 54px; height: 54px; background: rgba(214,130,140,.25); }
.th-oneline { background: #fff; border: 1px solid var(--line); }
.th-oneline .ol { display: flex; flex-direction: column; align-items: center; gap: 14px; font: 600 26px 'Amiri', serif; color: #222; }
.th-oneline .ol i { position: static; width: 60px; height: 1px; background: #222; }
.th-scratch { background: #DCE6EA; }
.th-scratch .scr { position: static; width: 68%; height: 30%; border-radius: 14px; background: linear-gradient(135deg, #C9CED6, #F2F4F7 45%, #B5BCC6); }
.th-letter { background: #5A4632; }
.th-letter .let { position: static; width: 62%; height: 58%; background: #E2CFA8; border-radius: 3px; box-shadow: 0 -10px 0 -4px #CDB78C, 0 10px 0 -4px #CDB78C; }
.th-velvet { background: radial-gradient(2px 2px at 25% 30%, #E6C27A, transparent), radial-gradient(1.5px 1.5px at 65% 22%, #E6C27A, transparent), radial-gradient(2px 2px at 45% 62%, #E6C27A, transparent), radial-gradient(1.5px 1.5px at 80% 70%, #E6C27A, transparent), radial-gradient(circle at 50% 40%, #6B1626, #3A0A14); }
.th-cinema { background: #0E0E10; flex-direction: column; gap: 10px; padding: 0 16px; align-items: stretch; }
.th-cinema .film { position: static; height: 10px; background: repeating-linear-gradient(90deg, #2A2A2E 0 12px, transparent 12px 20px); }
.th-cinema .frame { position: static; height: 120px; background: linear-gradient(135deg, #3A3A40, #1C1C20); border-radius: 4px; }

/* المعرض */
.gallery { padding: 64px 0 110px; }
.filters { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; margin-bottom: 18px; }
.frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.frow > span { font-weight: 600; min-width: 72px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; font: 600 .95rem 'Plex Arabic', sans-serif; cursor: pointer; background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.chip[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.count { color: var(--muted); margin-bottom: 22px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 36px 24px; }
.tlink { display: block; border-radius: 18px; }
.tdesc { color: var(--muted); font-size: .92rem; margin-top: -6px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tags span { font-size: .76rem; color: var(--muted); background: #EFE5D6; border-radius: 999px; padding: 2px 10px; }
.tact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.empty { text-align: center; padding: 40px; color: var(--muted); }

/* النماذج والحسابات */
.authp main, .narrow-page { padding: 70px 0 110px; }
.auth { display: flex; justify-content: center; }
.auth-card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.auth-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { font-size: 1.6rem; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }
label small { font-weight: 400; color: var(--muted); }
input:not([type=checkbox]):not([type=radio]), select, textarea { font: 400 1rem 'Plex Arabic', sans-serif; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(216,185,138,.35); }
input[dir=ltr] { text-align: right; }
.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; min-height: 40px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
legend { font-weight: 700; padding: 0 6px; }
.alert { background: var(--no-bg); color: var(--no); padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.flash { background: var(--yes-bg); color: var(--yes); padding: 12px 16px; border-radius: 12px; font-weight: 600; margin-bottom: 16px; }
.note-box { background: var(--ivory-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; color: var(--muted); margin-bottom: 16px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.seg { flex-direction: row; flex-wrap: wrap; }
.seg label { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.seg label:has(input:checked) { border-color: var(--ink); background: var(--ivory-2); }

.create { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; padding: 50px 0 100px; align-items: start; }
.create-side { display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.create-form { display: flex; flex-direction: column; gap: 18px; grid-column: span 2; }
.create-form h1 { font-size: 1.6rem; }
@media (max-width: 700px) { .create-form { grid-column: auto; } }

/* لوحة العروسين */
.dash, .manage { padding: 44px 0 100px; }
.empty-state { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.inv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.inv-item { display: grid; grid-template-columns: 90px 1fr; gap: 16px; text-decoration: none; color: var(--ink); align-items: center; padding: 16px; }
.inv-item > div:last-child { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.inv-item .thumb { border-radius: 12px; }
.st { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.st-yes { background: var(--yes-bg); color: var(--yes); }
.st-no { background: var(--no-bg); color: var(--no); }
.st-open { background: var(--open-bg); color: var(--open); }
.st-new { background: var(--new-bg); color: var(--new); }
.manage-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.manage-head h1 { font-size: 1.8rem; }
.manage-head .actions form { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; }
.kpi span { color: var(--muted); font-size: .9rem; }
.kpi strong { font-size: 2rem; line-height: 1.3; }
.kpi small { color: var(--muted); }
.c-yes { color: var(--yes); } .c-no { color: var(--no); } .c-open { color: var(--open); }
.manage-grid { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; margin-bottom: 22px; }
.manage-grid > .panel { flex: 999 1 560px; min-width: 0; }
.side-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.panel h2 { font-size: 1.2rem; margin-bottom: 14px; }
.panel h3 { font-size: 1rem; margin: 20px 0 8px; }
.add-guest { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: var(--ivory-2); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.add-guest label { flex: 1 1 180px; font-size: .85rem; }
.guests { list-style: none; margin: 14px 0 0; padding: 0; }
.guests li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); }
.g-main { display: flex; flex-direction: column; min-width: 0; }
.g-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-act { display: flex; gap: 6px; }
.g-act form { margin: 0; }
.ic { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.ic.wa { background: #1F7A4D; border-color: #1F7A4D; color: #fff; }
.ic.done { border-color: var(--yes); color: var(--yes); }
@media (max-width: 600px) { .guests li { grid-template-columns: minmax(0, 1fr) auto; } .guests .st { display: none; } }
.wishes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wishes li { background: var(--ivory-2); border-radius: 14px; padding: 12px 14px; }
.details { display: flex; flex-direction: column; gap: 16px; }
.details > .btn { align-self: flex-start; }
.hall-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px dashed var(--line); }
.prose ul { padding-inline-start: 22px; }
.prose p, .prose ul { margin-bottom: 14px; }
.narrow-page { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 720px; }
.narrow-page h1 { font-size: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .tl-line, .tl-node.now, .rise { animation: none; }
  .btn, .thumb { transition: none; }
}

/* الهاتف: الترويسة في مكانها فوق البطل، وروابط أقل */
@media (max-width: 760px) {
  .home .top { position: static; background: var(--night); }
  .hero { padding-top: 36px; }
  .timeline { margin-top: 48px; }
  .sec { padding: 64px 0; }
}
@media (max-width: 520px) {
  .nav { gap: 16px; }
  .nav .nav-x { display: none; }
  .brand svg { height: 26px; }
}

/* التصميم الخاص */
.q-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.eyebrow-ink { color: var(--bronze); font-weight: 700; font-size: .85rem; }
.custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 40px; padding: 60px 0 100px; align-items: start; }
.custom-intro { display: flex; flex-direction: column; gap: 14px; }
.custom-intro h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.4; }
.custom-steps { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: s; }
.custom-steps li { display: flex; flex-direction: column; padding-inline-start: 44px; position: relative; counter-increment: s; }
.custom-steps li::before { content: counter(s, arabic-indic); position: absolute; inset-inline-start: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--ivory); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.custom-steps span { color: var(--muted); }
.custom-form, .custom-done { display: flex; flex-direction: column; gap: 16px; }
.custom-form > .btn, .custom-done > .btn { align-self: flex-start; }
.custom-form .check span { font-weight: 500; }
.custom-band { background: var(--card); border-block: 1px solid var(--line); }
.custom-band-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.custom-band-in > div { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.custom-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.custom-band p { color: var(--muted); }
.custom-cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.custom-cta h2 { font-size: 1.3rem; }