[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_377":378,"_379":380},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_109":90,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":59,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",34,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","public/styles.css","latestPath","fileId","ce70e468-afbc-11f1-a06e-1607ee4eb77e","name","styles.css","fileType","content",":root {\n --floor: #140a0b;\n --floor-2: #1b0e10;\n --lift: #241315;\n --lift-2: #2e181b;\n --ink: #f3e6e0;\n --ink-2: #c2aaa3;\n --ink-3: #9a817a;\n --rose: #dcb6a8;\n --wine: #7a2f36;\n --wine-hi: #8d3940;\n --ok: #a6d3b8;\n --warn: #e9c894;\n --bad: #f2adad;\n --gutter: clamp(20px, 5vw, 64px);\n --ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n --font: system-ui, -apple-system, \"SF Arabic\", \"Segoe UI\", \"Geeza Pro\", \"Noto Sans Arabic\", Tahoma, sans-serif;\n --grain: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .88 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n color-scheme: dark;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n[hidden] { display: none !important; }\nhtml { background: var(--floor); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\nbody {\n margin: 0;\n min-height: 100svh;\n color: var(--ink);\n font-family: var(--font);\n font-size: 17px;\n line-height: 1.75;\n background-color: var(--floor);\n background-image: var(--grain);\n -webkit-font-smoothing: antialiased;\n}\nimg { max-width: 100%; display: block; }\na { color: inherit; }\nh1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }\np { margin: 0; }\nfieldset { border: 0; margin: 0; padding: 0; min-width: 0; }\nlegend { padding: 0; }\n.small { font-size: 0.92rem; }\n.quiet, .muted { color: var(--ink-2); }\n.prose { white-space: pre-line; }\n.center { text-align: center; }\n.empty { color: var(--ink-2); padding: 20px 0; }\n.code { font-family: ui-monospace, \"SF Mono\", Menlo, monospace; letter-spacing: 0.06em; }\n:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }\n::selection { background: var(--wine); color: var(--ink); }\n\n/* ── Buttons: one bevelled silhouette (the angled tip of a lipstick) ── */\n.btn {\n --cut: 11px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.65em;\n padding: 0.95em 1.55em;\n border: 0;\n font: inherit;\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.2;\n color: var(--ink);\n background: var(--wine);\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));\n transition: background-color 0.25s var(--ease);\n}\n.btn:hover { background: var(--wine-hi); }\n.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rose); }\n.btn .arr { flex: none; transition: transform 0.3s var(--ease); }\n.btn:hover .arr { transform: translate(-2px, -2px); }\n.btn-primary { background: var(--wine); }\n.btn-ghost { background: var(--lift); }\n.btn-ghost:hover { background: var(--lift-2); }\n.btn-ok { background: #2c5a45; }\n.btn-ok:hover { background: #336a51; }\n.btn-wa { background: #1f5a3e; }\n.btn-wa:hover { background: #256a49; }\n.btn-danger { background: var(--lift); color: var(--bad); }\n.btn-danger:hover { background: var(--lift-2); }\n.btn-sm { --cut: 8px; padding: 0.55em 1em; font-size: 0.92rem; }\n.btn-lg { --cut: 13px; padding: 1.1em 1.9em; font-size: 1.08rem; }\n.btn-block { width: 100%; }\n\n/* ── Navigation: a contained, bevelled bar floating over the page ── */\n.nav-wrap {\n position: fixed;\n top: 12px;\n inset-inline: 0;\n z-index: 40;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n padding-inline: 12px;\n pointer-events: none;\n}\n.nav {\n pointer-events: auto;\n width: min(920px, 100%);\n display: flex;\n align-items: center;\n gap: clamp(14px, 3vw, 32px);\n padding: 8px;\n padding-inline-start: 16px;\n background: rgba(27, 14, 16, 0.93);\n clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);\n animation: nav-in 0.8s var(--ease);\n}\n@keyframes nav-in { from { transform: translateY(-8px); } }\n.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }\n.brand-mark { width: 30px; height: 30px; color: var(--rose); flex: none; }\n.brand-name { font-weight: 700; font-size: 1.02rem; white-space: nowrap; }\n.nav-links { display: flex; gap: clamp(16px, 2.6vw, 30px); margin-inline-start: auto; }\n.nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; transition: color 0.2s; }\n.nav-links a:hover { color: var(--ink); }\n.announce {\n pointer-events: auto;\n background: var(--lift);\n color: var(--ink);\n padding: 6px 16px;\n font-size: 0.92rem;\n clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);\n}\n@media (max-width: 720px) {\n .nav-links { display: none; }\n .nav .btn { margin-inline-start: auto; }\n}\n\n/* ── Hero: her name over her own work, owning the first screen ── */\n.hero {\n position: relative;\n isolation: isolate;\n min-height: 100svh;\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n}\n.hero-photo { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(64vw, 1040px); margin: 0; z-index: -1; }\n.hero-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 50% 22%;\n -webkit-mask-image:\n linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.66) 62%, rgba(0,0,0,.48) 69%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.16) 83%, rgba(0,0,0,.06) 91%, transparent 100%),\n linear-gradient(to top, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.22) 10%, rgba(0,0,0,.42) 15%, rgba(0,0,0,.64) 20%, rgba(0,0,0,.82) 25%, rgba(0,0,0,.94) 30%, #000 36%, #000 100%);\n -webkit-mask-composite: source-in;\n mask-image:\n linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.66) 62%, rgba(0,0,0,.48) 69%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.16) 83%, rgba(0,0,0,.06) 91%, transparent 100%),\n linear-gradient(to top, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.22) 10%, rgba(0,0,0,.42) 15%, rgba(0,0,0,.64) 20%, rgba(0,0,0,.82) 25%, rgba(0,0,0,.94) 30%, #000 36%, #000 100%);\n mask-composite: intersect;\n animation: settle 2.6s var(--ease);\n}\n@keyframes settle { from { transform: scale(1.05); } }\n.hero-body { width: 100%; padding: 0 var(--gutter) clamp(40px, 9vh, 100px); display: grid; gap: clamp(22px, 3.4vh, 36px); }\n.hero-name {\n font-size: clamp(3.3rem, 11vw, 10rem);\n font-weight: 800;\n line-height: 1.04;\n max-width: 12ch;\n text-wrap: balance;\n text-shadow: 0 2px 30px rgba(20, 10, 11, 0.5);\n}\n.hero-name span { color: var(--rose); }\n.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }\n.hero-meta { color: var(--ink); max-width: 36ch; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.65; text-shadow: 0 1px 16px rgba(20, 10, 11, 0.6); }\n.hero-meta span { display: block; color: var(--ink-2); font-size: 0.92em; }\n@media (max-width: 760px) {\n .hero-photo { width: 100%; inset-inline: 0; }\n .hero-photo img {\n object-position: 50% 16%;\n -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.1) 7%, rgba(0,0,0,.26) 14%, rgba(0,0,0,.46) 21%, rgba(0,0,0,.66) 28%, rgba(0,0,0,.82) 35%, rgba(0,0,0,.94) 42%, #000 50%, #000 100%);\n mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.1) 7%, rgba(0,0,0,.26) 14%, rgba(0,0,0,.46) 21%, rgba(0,0,0,.66) 28%, rgba(0,0,0,.82) 35%, rgba(0,0,0,.94) 42%, #000 50%, #000 100%);\n }\n .hero-body { padding-bottom: 44px; }\n}\n@media (prefers-reduced-motion: reduce) {\n html { scroll-behavior: auto; }\n .nav, .hero-photo img { animation: none; }\n}\n\n/* ── Services: a price list, not a card grid ── */\n.svc { padding: clamp(80px, 13vh, 150px) var(--gutter); }\n.svc-grid {\n max-width: 1280px;\n margin-inline: auto;\n display: grid;\n grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);\n gap: clamp(32px, 6vw, 100px);\n align-items: start;\n}\n.statement { font-size: clamp(2.1rem, 4.8vw, 3.7rem); font-weight: 800; line-height: 1.15; }\n.svc .statement { margin-bottom: clamp(28px, 4.5vh, 48px); }\n.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n.dish {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12.5rem 18px;\n grid-template-areas: \"name meta go\" \"desc meta go\";\n gap: 4px 24px;\n align-items: center;\n padding: 20px 22px;\n color: var(--ink);\n text-decoration: none;\n clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);\n transition: background-color 0.25s var(--ease);\n}\n.dish:hover { background: var(--floor-2); }\n.dish:focus-visible { outline: none; background: var(--lift); }\n.dish-name { grid-area: name; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; transition: color 0.25s; }\n.dish-desc { grid-area: desc; color: var(--ink-2); font-size: 0.98rem; line-height: 1.6; }\n.dish-meta { grid-area: meta; display: grid; gap: 2px; text-align: end; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }\n.dish-price { color: var(--ink); font-weight: 600; }\n.dish .arr { grid-area: go; color: var(--ink-3); transition: transform 0.3s var(--ease), color 0.25s; }\n.dish:hover .dish-name { color: var(--rose); }\n.dish:hover .arr { color: var(--rose); transform: translate(-2px, -2px); }\n.svc-note { margin-top: 22px; padding-inline: 22px; color: var(--ink-2); font-size: 0.95rem; }\n.svc-photo {\n position: sticky;\n top: 96px;\n margin: 0;\n aspect-ratio: 4 / 5;\n overflow: hidden;\n background: var(--floor-2);\n clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0 44px);\n}\n.svc-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }\n@supports (animation-timeline: view()) {\n @media (prefers-reduced-motion: no-preference) {\n .svc-photo img { animation: drift linear both; animation-timeline: view(); animation-range: cover; }\n @keyframes drift { from { transform: scale(1.1) translateY(-4%); } to { transform: scale(1.1) translateY(4%); } }\n }\n}\n@media (max-width: 900px) {\n .svc-grid { grid-template-columns: 1fr; }\n .svc-photo { display: none; }\n}\n@media (max-width: 640px) {\n .dish { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: \"name go\" \"desc go\" \"meta go\"; padding: 18px 14px; }\n .dish-meta { grid-auto-flow: column; justify-content: start; gap: 16px; text-align: start; margin-top: 6px; }\n .svc-note { padding-inline: 14px; }\n}\n\n/* ── Work: a slow reel of her looks ── */\n.work { padding: clamp(40px, 8vh, 96px) 0 clamp(80px, 13vh, 150px); }\n.work-head {\n max-width: 1280px;\n margin: 0 auto clamp(32px, 5vh, 56px);\n padding-inline: var(--gutter);\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n gap: 20px 40px;\n align-items: center;\n}\n.work-mark { width: clamp(64px, 7vw, 96px); height: auto; color: var(--rose); }\n.work-lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.75; max-width: 46ch; }\n.handle { color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color 0.2s; }\n.handle:hover { color: var(--ink); }\n@media (max-width: 760px) { .work-head { grid-template-columns: 1fr; } }\n.reel {\n direction: ltr;\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 2%, rgba(0,0,0,.45) 4%, rgba(0,0,0,.7) 6%, rgba(0,0,0,.9) 8%, #000 10%, #000 90%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.7) 94%, rgba(0,0,0,.45) 96%, rgba(0,0,0,.2) 98%, transparent 100%);\n mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 2%, rgba(0,0,0,.45) 4%, rgba(0,0,0,.7) 6%, rgba(0,0,0,.9) 8%, #000 10%, #000 90%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.7) 94%, rgba(0,0,0,.45) 96%, rgba(0,0,0,.2) 98%, transparent 100%);\n}\n.reel-track { display: flex; width: max-content; direction: ltr; animation: reel 80s linear infinite; }\n.reel:hover .reel-track { animation-play-state: paused; }\n.reel-set { display: flex; gap: 14px; padding-right: 14px; }\n.frame {\n margin: 0;\n height: clamp(300px, 44vw, 500px);\n aspect-ratio: 4 / 5;\n overflow: hidden;\n background: var(--floor-2);\n clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);\n}\n.frame img { width: 100%; height: 100%; object-fit: cover; }\n@keyframes reel { to { transform: translateX(-50%); } }\n@media (prefers-reduced-motion: reduce) {\n .reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }\n .reel-track { animation: none; }\n .reel-set[aria-hidden] { display: none; }\n}\n\n/* ── Closing: how booking works, beside another look ── */\n.closing {\n position: relative;\n isolation: isolate;\n min-height: 90svh;\n display: flex;\n align-items: center;\n padding: clamp(80px, 13vh, 150px) var(--gutter);\n overflow: hidden;\n}\n.closing-photo { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(58vw, 920px); margin: 0; z-index: -1; }\n.closing-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 50% 20%;\n -webkit-mask-image:\n linear-gradient(to left, #000 0%, #000 38%, rgba(0,0,0,.92) 46%, rgba(0,0,0,.8) 53%, rgba(0,0,0,.63) 60%, rgba(0,0,0,.45) 67%, rgba(0,0,0,.28) 74%, rgba(0,0,0,.14) 82%, rgba(0,0,0,.05) 90%, transparent 100%),\n linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 5%, rgba(0,0,0,.32) 11%, rgba(0,0,0,.58) 17%, rgba(0,0,0,.82) 24%, #000 31%, #000 69%, rgba(0,0,0,.82) 76%, rgba(0,0,0,.58) 83%, rgba(0,0,0,.32) 89%, rgba(0,0,0,.12) 95%, transparent 100%);\n -webkit-mask-composite: source-in;\n mask-image:\n linear-gradient(to left, #000 0%, #000 38%, rgba(0,0,0,.92) 46%, rgba(0,0,0,.8) 53%, rgba(0,0,0,.63) 60%, rgba(0,0,0,.45) 67%, rgba(0,0,0,.28) 74%, rgba(0,0,0,.14) 82%, rgba(0,0,0,.05) 90%, transparent 100%),\n linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 5%, rgba(0,0,0,.32) 11%, rgba(0,0,0,.58) 17%, rgba(0,0,0,.82) 24%, #000 31%, #000 69%, rgba(0,0,0,.82) 76%, rgba(0,0,0,.58) 83%, rgba(0,0,0,.32) 89%, rgba(0,0,0,.12) 95%, transparent 100%);\n mask-composite: intersect;\n}\n.closing-body { margin-inline-start: auto; width: min(560px, 100%); display: grid; gap: 28px; justify-items: start; }\n.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }\n.flow li { display: flex; align-items: center; gap: 14px; }\n.flow li::before { content: \"\"; flex: none; width: 12px; height: 12px; background: var(--rose); clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 45%); }\n.policy { color: var(--ink-2); font-size: 0.95rem; line-height: 1.85; max-width: 50ch; }\n@media (max-width: 760px) {\n .closing { flex-direction: column; align-items: stretch; padding-top: 0; min-height: 0; }\n .closing-photo { position: relative; width: auto; height: 60svh; margin-inline: calc(var(--gutter) * -1); }\n .closing-photo img {\n -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 55%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.58) 73%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.12) 91%, transparent 100%);\n mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 55%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.58) 73%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.12) 91%, transparent 100%);\n }\n .closing-body { margin-top: -90px; width: 100%; }\n}\n\n/* ── Footer: real marks, centred, her monogram anchored to the floor ── */\n.foot { position: relative; overflow: hidden; padding: clamp(56px, 9vh, 96px) var(--gutter) 0; text-align: center; }\n.foot-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }\n.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }\n.foot-links a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); text-decoration: none; font-size: 1.02rem; transition: color 0.2s; }\n.foot-links a:hover { color: var(--ink); }\n.soc { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }\n.soc-whatsapp { --icon: url(\"https://cdn.jsdelivr.net/npm/simple-icons@16.31.0/icons/whatsapp.svg\"); }\n.soc-instagram { --icon: url(\"https://cdn.jsdelivr.net/npm/simple-icons@16.31.0/icons/instagram.svg\"); }\n.soc-snapchat { --icon: url(\"https://cdn.jsdelivr.net/npm/simple-icons@16.31.0/icons/snapchat.svg\"); }\n.foot-note { color: var(--ink-3); font-size: 0.9rem; }\n.foot-mark { display: flex; justify-content: center; align-items: flex-start; height: clamp(150px, 22vw, 320px); margin-top: clamp(40px, 7vh, 72px); overflow: hidden; }\n.foot-mark-svg { flex: none; width: clamp(240px, 38vw, 560px); height: auto; color: var(--lift-2); }\n\n/* ── Inner pages ── */\n.page { padding: clamp(112px, 16vh, 160px) var(--gutter) clamp(64px, 10vh, 110px); }\n.page-narrow, .narrow { width: min(760px, 100%); margin-inline: auto; }\n.page-head { margin-bottom: clamp(28px, 4.5vh, 48px); }\n.page-title { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.15; }\n.page-lede { color: var(--ink-2); margin-top: 10px; font-size: 1.06rem; }\n.lost { display: grid; gap: 18px; justify-items: start; }\n\n.form { display: grid; gap: 30px; }\n.group { display: grid; gap: 10px; }\n.field { display: block; }\n.label { display: block; font-weight: 600; margin-bottom: 8px; }\n.group > .label { margin-bottom: 0; }\n.label small { color: var(--ink-2); font-weight: 400; }\ninput[type=\"text\"], input[type=\"tel\"], input[type=\"date\"], input[type=\"number\"], input[type=\"password\"],\ninput[type=\"time\"], input[type=\"file\"], select, textarea {\n width: 100%;\n min-height: 52px;\n padding: 0.8em 1em;\n border: 0;\n border-radius: 0;\n font: inherit;\n font-size: 1rem;\n color: var(--ink);\n background: var(--floor-2);\n box-shadow: inset 0 -1px 0 rgba(243, 230, 224, 0.16);\n transition: background-color 0.2s, box-shadow 0.2s;\n}\ninput:focus, select:focus, textarea:focus { outline: none; background: var(--lift); box-shadow: inset 0 -2px 0 var(--rose); }\nselect {\n appearance: none;\n -webkit-appearance: none;\n padding-inline-end: 2.6em;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23c2aaa3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: left 16px center;\n}\ntextarea { min-height: 120px; resize: vertical; }\n::placeholder { color: var(--ink-3); }\n.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n@media (max-width: 700px) { .two, .three { grid-template-columns: 1fr; } }\n.check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }\n.check input { width: 18px; height: 18px; accent-color: var(--wine); }\n\n.choices { display: grid; gap: 4px; }\n.choice { position: relative; display: block; cursor: pointer; }\n.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; }\n.choice span {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 2px 16px;\n align-items: center;\n padding: 16px 18px;\n background: var(--floor-2);\n clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);\n transition: background-color 0.2s;\n}\n.choice b { font-weight: 600; }\n.choice em { font-style: normal; color: var(--ink-2); font-size: 0.92rem; }\n.choice:hover span { background: var(--lift); }\n.choice input:checked + span { background: var(--wine); }\n.choice input:checked + span em { color: var(--ink); }\n.choice input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--rose); }\n@media (max-width: 520px) { .choice span { grid-template-columns: 1fr; } }\n\n#slots-hint { color: var(--ink-2); }\n.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }\n.slot { position: relative; cursor: pointer; }\n.slot input { position: absolute; inset: 0; opacity: 0; margin: 0; }\n.slot span {\n display: block;\n padding: 0.7em 0.4em;\n text-align: center;\n font-weight: 500;\n background: var(--floor-2);\n clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);\n transition: background-color 0.2s;\n}\n.slot:hover span { background: var(--lift); }\n.slot input:checked + span { background: var(--wine); }\n.slot input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--rose); }\n\n.form-policy { color: var(--ink-2); font-size: 0.95rem; line-height: 1.85; background: var(--floor-2); padding: 18px 20px; }\n.alert { padding: 14px 18px; margin-bottom: 20px; background: var(--lift); font-weight: 500; }\n.alert-error { color: var(--bad); }\n.alert-ok { color: var(--ok); }\n.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }\n\n.ticket {\n display: grid;\n gap: 20px;\n padding: clamp(26px, 5vw, 48px);\n background: var(--floor-2);\n clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);\n}\n.status { font-weight: 600; font-size: 0.95rem; }\n.st-pending { color: var(--warn); }\n.st-confirmed { color: var(--ok); }\n.st-cancelled { color: var(--bad); }\n.st-done { color: var(--rose); }\ndl.details { display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; margin: 0; }\ndl.details dt { color: var(--ink-2); }\ndl.details dd { margin: 0; font-weight: 500; }\n\n/* ── Admin ── */\n.admin-bar { background: var(--floor-2); }\n.admin-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px var(--gutter); }\n.admin-bar b { margin-inline-end: 8px; }\n.admin-bar a { color: var(--ink-2); text-decoration: none; }\n.admin-bar a:hover { color: var(--ink); }\n.admin-bar a.on { color: var(--ink); font-weight: 700; }\n.admin-bar form { margin-inline-start: auto; }\n.admin-bar button { font: inherit; color: var(--ink-2); background: var(--lift); border: 0; padding: 0.4em 1em; cursor: pointer; }\n.admin-bar button:hover { color: var(--ink); }\n.wrap { max-width: 1180px; margin-inline: auto; }\n.page.admin-page { padding: 32px var(--gutter) 80px; }\n.login { max-width: 420px; }\n.login-logo { width: 64px; height: 64px; margin: 0 auto 12px; }\n.card { background: var(--floor-2); padding: clamp(18px, 3vw, 28px); }\n.card-title { font-size: 1.25rem; }\n.form-grid { display: grid; gap: 20px; }\n.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; margin: 20px 0 28px; }\n.stat { background: var(--floor-2); padding: 16px 18px; }\n.stat b { display: block; font-size: 2rem; font-weight: 800; line-height: 1.15; }\n.stat span { color: var(--ink-2); font-size: 0.92rem; }\ndetails.card { padding: 0; margin-bottom: 6px; }\ndetails.card > summary { cursor: pointer; list-style: none; padding: 16px 22px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }\ndetails.card > summary::-webkit-details-marker { display: none; }\ndetails.card > summary .muted { font-weight: 400; font-size: 0.92rem; }\ndetails.card > form { padding: 0 22px 22px; }\n.add-booking { margin-bottom: 20px; }\n.row-actions { display: flex; gap: 10px; }\n.filters { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 16px; }\n.filters a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }\n.filters a:hover { color: var(--ink); }\n.filters a.on { color: var(--ink); font-weight: 700; }\n.day-group { margin-bottom: 28px; }\n.day-group h3 { font-size: 1.05rem; color: var(--rose); margin-bottom: 10px; }\n.bk { background: var(--floor-2); padding: 16px 18px; margin-bottom: 6px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }\n.bk h4 { font-size: 1.08rem; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }\n.bk .row { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--ink-2); font-size: 0.94rem; }\n.bk .note { margin-top: 8px; background: var(--lift); padding: 8px 12px; font-size: 0.94rem; white-space: pre-line; }\n.bk .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; justify-content: flex-end; }\n.bk form { display: inline; }\n@media (max-width: 700px) { .bk { grid-template-columns: 1fr; } .bk .acts { justify-content: flex-start; } }\n.upload { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 12px; }\n.upload .field { flex: 1 1 280px; }\n.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }\n.admin-gallery figure { margin: 0; background: var(--floor-2); }\n.admin-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }\n.admin-gallery figcaption { padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.hidden-img img { opacity: 0.35; }\n.days { display: flex; flex-wrap: wrap; gap: 6px; }\n.days label { display: flex; align-items: center; gap: 6px; background: var(--lift); padding: 0.35em 0.95em; cursor: pointer; }\n.days input { accent-color: var(--wine); }\n.blocked { margin-top: 24px; }\n.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }\n.inline-form input { width: auto; flex: 1 1 180px; }\n.blocked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n.blocked-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--lift); }\n\n/* ── Her monogram: cut from her own logo, tinted by the surface it sits on ── */\n.mark {\n display: inline-block;\n flex: none;\n aspect-ratio: 345 / 749;\n background: currentColor;\n -webkit-mask: url(\"/img/brand/mark\") center / contain no-repeat;\n mask: url(\"/img/brand/mark\") center / contain no-repeat;\n}\n.brand-mark { width: auto; height: 32px; color: var(--rose); }\n.work-mark { width: auto; height: clamp(88px, 9vw, 124px); color: var(--rose); }\n.foot-mark-svg { width: auto; height: clamp(280px, 40vw, 600px); color: #3a2124; }\n",":root {\n --floor: #140a0b;\n --floor-2: #1b0e10;\n --lift: #241315;\n --lift-2: #2e181b;\n --ink: #f3e6e0;\n --ink-2: #c2aaa3;\n --ink-3: #9a817a;\n --rose: #dcb6a8;\n --wine: #7a2f36;\n --wine-hi: #8d3940;\n --ok: #a6d3b8;\n --warn: #e9c894;\n --bad: #f2adad;\n --gutter: clamp(20px, 5vw, 64px);\n --ease: cubic-bezier(0.2, 0.7, 0.2, 1);\n --font: system-ui, -apple-system, \"SF Arabic\", \"Segoe UI\", \"Geeza Pro\", \"Noto Sans Arabic\", Tahoma, sans-serif;\n --grain: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .88 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n color-scheme: dark;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n[hidden] { display: none !important; }\nhtml { background: var(--floor); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }\nbody {\n margin: 0;\n min-height: 100svh;\n color: var(--ink);\n font-family: var(--font);\n font-size: 17px;\n line-height: 1.75;\n background-color: var(--floor);\n background-image: var(--grain);\n -webkit-font-smoothing: antialiased;\n}\nimg { max-width: 100%; display: block; }\na { color: inherit; }\nh1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }\np { margin: 0; }\nfieldset { border: 0; margin: 0; padding: 0; min-width: 0; }\nlegend { padding: 0; }\n.small { font-size: 0.92rem; }\n.quiet, .muted { color: var(--ink-2); }\n.prose { white-space: pre-line; }\n.center { text-align: center; }\n.empty { color: var(--ink-2); padding: 20px 0; }\n.code { font-family: ui-monospace, \"SF Mono\", Menlo, monospace; letter-spacing: 0.06em; }\n:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }\n::selection { background: var(--wine); color: var(--ink); }\n\n/* ── Buttons: one bevelled silhouette (the angled tip of a lipstick) ── */\n.btn {\n --cut: 11px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.65em;\n padding: 0.95em 1.55em;\n border: 0;\n font: inherit;\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.2;\n color: var(--ink);\n background: var(--wine);\n text-decoration: none;\n white-space: nowrap;\n cursor: pointer;\n clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));\n transition: background-color 0.25s var(--ease);\n}\n.btn:hover { background: var(--wine-hi); }\n.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rose); }\n.btn .arr { flex: none; transition: transform 0.3s var(--ease); }\n.btn:hover .arr { transform: translate(-2px, -2px); }\n.btn-primary { background: var(--wine); }\n.btn-ghost { background: var(--lift); }\n.btn-ghost:hover { background: var(--lift-2); }\n.btn-ok { background: #2c5a45; }\n.btn-ok:hover { background: #336a51; }\n.btn-wa { background: #1f5a3e; }\n.btn-wa:hover { background: #256a49; }\n.btn-danger { background: var(--lift); color: var(--bad); }\n.btn-danger:hover { background: var(--lift-2); }\n.btn-sm { --cut: 8px; padding: 0.55em 1em; font-size: 0.92rem; }\n.btn-lg { --cut: 13px; padding: 1.1em 1.9em; font-size: 1.08rem; }\n.btn-block { width: 100%; }\n\n/* ── Navigation: a contained, bevelled bar floating over the page ── */\n.nav-wrap {\n position: fixed;\n top: 12px;\n inset-inline: 0;\n z-index: 40;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n padding-inline: 12px;\n pointer-events: none;\n}\n.nav {\n pointer-events: auto;\n width: min(920px, 100%);\n display: flex;\n align-items: center;\n gap: clamp(14px, 3vw, 32px);\n padding: 8px;\n padding-inline-start: 16px;\n background: rgba(27, 14, 16, 0.93);\n clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);\n animation: nav-in 0.8s var(--ease);\n}\n@keyframes nav-in { from { transform: translateY(-8px); } }\n.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }\n.brand-mark { width: 30px; height: 30px; color: var(--rose); flex: none; }\n.brand-name { font-weight: 700; font-size: 1.02rem; white-space: nowrap; }\n.nav-links { display: flex; gap: clamp(16px, 2.6vw, 30px); margin-inline-start: auto; }\n.nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; transition: color 0.2s; }\n.nav-links a:hover { color: var(--ink); }\n.announce {\n pointer-events: auto;\n background: var(--lift);\n color: var(--ink);\n padding: 6px 16px;\n font-size: 0.92rem;\n clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);\n}\n@media (max-width: 720px) {\n .nav-links { display: none; }\n .nav .btn { margin-inline-start: auto; }\n}\n\n/* ── Hero: her name over her own work, owning the first screen ── */\n.hero {\n position: relative;\n isolation: isolate;\n min-height: 100svh;\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n}\n.hero-photo { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(64vw, 1040px); margin: 0; z-index: -1; }\n.hero-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 50% 22%;\n -webkit-mask-image:\n linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.66) 62%, rgba(0,0,0,.48) 69%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.16) 83%, rgba(0,0,0,.06) 91%, transparent 100%),\n linear-gradient(to top, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.22) 10%, rgba(0,0,0,.42) 15%, rgba(0,0,0,.64) 20%, rgba(0,0,0,.82) 25%, rgba(0,0,0,.94) 30%, #000 36%, #000 100%);\n -webkit-mask-composite: source-in;\n mask-image:\n linear-gradient(to right, #000 0%, #000 40%, rgba(0,0,0,.93) 48%, rgba(0,0,0,.82) 55%, rgba(0,0,0,.66) 62%, rgba(0,0,0,.48) 69%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.16) 83%, rgba(0,0,0,.06) 91%, transparent 100%),\n linear-gradient(to top, transparent 0%, rgba(0,0,0,.08) 5%, rgba(0,0,0,.22) 10%, rgba(0,0,0,.42) 15%, rgba(0,0,0,.64) 20%, rgba(0,0,0,.82) 25%, rgba(0,0,0,.94) 30%, #000 36%, #000 100%);\n mask-composite: intersect;\n animation: settle 2.6s var(--ease);\n}\n@keyframes settle { from { transform: scale(1.05); } }\n.hero-body { width: 100%; padding: 0 var(--gutter) clamp(40px, 9vh, 100px); display: grid; gap: clamp(22px, 3.4vh, 36px); }\n.hero-name {\n font-size: clamp(3.3rem, 11vw, 10rem);\n font-weight: 800;\n line-height: 1.04;\n max-width: 12ch;\n text-wrap: balance;\n text-shadow: 0 2px 30px rgba(20, 10, 11, 0.5);\n}\n.hero-name span { color: var(--rose); }\n.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }\n.hero-meta { color: var(--ink); max-width: 36ch; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.65; text-shadow: 0 1px 16px rgba(20, 10, 11, 0.6); }\n.hero-meta span { display: block; color: var(--ink-2); font-size: 0.92em; }\n@media (max-width: 760px) {\n .hero-photo { width: 100%; inset-inline: 0; }\n .hero-photo img {\n object-position: 50% 16%;\n -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.1) 7%, rgba(0,0,0,.26) 14%, rgba(0,0,0,.46) 21%, rgba(0,0,0,.66) 28%, rgba(0,0,0,.82) 35%, rgba(0,0,0,.94) 42%, #000 50%, #000 100%);\n mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.1) 7%, rgba(0,0,0,.26) 14%, rgba(0,0,0,.46) 21%, rgba(0,0,0,.66) 28%, rgba(0,0,0,.82) 35%, rgba(0,0,0,.94) 42%, #000 50%, #000 100%);\n }\n .hero-body { padding-bottom: 44px; }\n}\n@media (prefers-reduced-motion: reduce) {\n html { scroll-behavior: auto; }\n .nav, .hero-photo img { animation: none; }\n}\n\n/* ── Services: a price list, not a card grid ── */\n.svc { padding: clamp(80px, 13vh, 150px) var(--gutter); }\n.svc-grid {\n max-width: 1280px;\n margin-inline: auto;\n display: grid;\n grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);\n gap: clamp(32px, 6vw, 100px);\n align-items: start;\n}\n.statement { font-size: clamp(2.1rem, 4.8vw, 3.7rem); font-weight: 800; line-height: 1.15; }\n.svc .statement { margin-bottom: clamp(28px, 4.5vh, 48px); }\n.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n.dish {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12.5rem 18px;\n grid-template-areas: \"name meta go\" \"desc meta go\";\n gap: 4px 24px;\n align-items: center;\n padding: 20px 22px;\n color: var(--ink);\n text-decoration: none;\n clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);\n transition: background-color 0.25s var(--ease);\n}\n.dish:hover { background: var(--floor-2); }\n.dish:focus-visible { outline: none; background: var(--lift); }\n.dish-name { grid-area: name; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; transition: color 0.25s; }\n.dish-desc { grid-area: desc; color: var(--ink-2); font-size: 0.98rem; line-height: 1.6; }\n.dish-meta { grid-area: meta; display: grid; gap: 2px; text-align: end; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }\n.dish-price { color: var(--ink); font-weight: 600; }\n.dish .arr { grid-area: go; color: var(--ink-3); transition: transform 0.3s var(--ease), color 0.25s; }\n.dish:hover .dish-name { color: var(--rose); }\n.dish:hover .arr { color: var(--rose); transform: translate(-2px, -2px); }\n.svc-note { margin-top: 22px; padding-inline: 22px; color: var(--ink-2); font-size: 0.95rem; }\n.svc-photo {\n position: sticky;\n top: 96px;\n margin: 0;\n aspect-ratio: 4 / 5;\n overflow: hidden;\n background: var(--floor-2);\n clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0 44px);\n}\n.svc-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }\n@supports (animation-timeline: view()) {\n @media (prefers-reduced-motion: no-preference) {\n .svc-photo img { animation: drift linear both; animation-timeline: view(); animation-range: cover; }\n @keyframes drift { from { transform: scale(1.1) translateY(-4%); } to { transform: scale(1.1) translateY(4%); } }\n }\n}\n@media (max-width: 900px) {\n .svc-grid { grid-template-columns: 1fr; }\n .svc-photo { display: none; }\n}\n@media (max-width: 640px) {\n .dish { grid-template-columns: minmax(0, 1fr) 18px; grid-template-areas: \"name go\" \"desc go\" \"meta go\"; padding: 18px 14px; }\n .dish-meta { grid-auto-flow: column; justify-content: start; gap: 16px; text-align: start; margin-top: 6px; }\n .svc-note { padding-inline: 14px; }\n}\n\n/* ── Work: a slow reel of her looks ── */\n.work { padding: clamp(40px, 8vh, 96px) 0 clamp(80px, 13vh, 150px); }\n.work-head {\n max-width: 1280px;\n margin: 0 auto clamp(32px, 5vh, 56px);\n padding-inline: var(--gutter);\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n gap: 20px 40px;\n align-items: center;\n}\n.work-mark { width: clamp(64px, 7vw, 96px); height: auto; color: var(--rose); }\n.work-lede { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.75; max-width: 46ch; }\n.handle { color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color 0.2s; }\n.handle:hover { color: var(--ink); }\n@media (max-width: 760px) { .work-head { grid-template-columns: 1fr; } }\n.reel {\n direction: ltr;\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 2%, rgba(0,0,0,.45) 4%, rgba(0,0,0,.7) 6%, rgba(0,0,0,.9) 8%, #000 10%, #000 90%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.7) 94%, rgba(0,0,0,.45) 96%, rgba(0,0,0,.2) 98%, transparent 100%);\n mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 2%, rgba(0,0,0,.45) 4%, rgba(0,0,0,.7) 6%, rgba(0,0,0,.9) 8%, #000 10%, #000 90%, rgba(0,0,0,.9) 92%, rgba(0,0,0,.7) 94%, rgba(0,0,0,.45) 96%, rgba(0,0,0,.2) 98%, transparent 100%);\n}\n.reel-track { display: flex; width: max-content; direction: ltr; animation: reel 80s linear infinite; }\n.reel:hover .reel-track { animation-play-state: paused; }\n.reel-set { display: flex; gap: 14px; padding-right: 14px; }\n.frame {\n margin: 0;\n height: clamp(300px, 44vw, 500px);\n aspect-ratio: 4 / 5;\n overflow: hidden;\n background: var(--floor-2);\n clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);\n}\n.frame img { width: 100%; height: 100%; object-fit: cover; }\n@keyframes reel { to { transform: translateX(-50%); } }\n@media (prefers-reduced-motion: reduce) {\n .reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }\n .reel-track { animation: none; }\n .reel-set[aria-hidden] { display: none; }\n}\n\n/* ── Closing: how booking works, beside another look ── */\n.closing {\n position: relative;\n isolation: isolate;\n min-height: 90svh;\n display: flex;\n align-items: center;\n padding: clamp(80px, 13vh, 150px) var(--gutter);\n overflow: hidden;\n}\n.closing-photo { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(58vw, 920px); margin: 0; z-index: -1; }\n.closing-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 50% 20%;\n -webkit-mask-image:\n linear-gradient(to left, #000 0%, #000 38%, rgba(0,0,0,.92) 46%, rgba(0,0,0,.8) 53%, rgba(0,0,0,.63) 60%, rgba(0,0,0,.45) 67%, rgba(0,0,0,.28) 74%, rgba(0,0,0,.14) 82%, rgba(0,0,0,.05) 90%, transparent 100%),\n linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 5%, rgba(0,0,0,.32) 11%, rgba(0,0,0,.58) 17%, rgba(0,0,0,.82) 24%, #000 31%, #000 69%, rgba(0,0,0,.82) 76%, rgba(0,0,0,.58) 83%, rgba(0,0,0,.32) 89%, rgba(0,0,0,.12) 95%, transparent 100%);\n -webkit-mask-composite: source-in;\n mask-image:\n linear-gradient(to left, #000 0%, #000 38%, rgba(0,0,0,.92) 46%, rgba(0,0,0,.8) 53%, rgba(0,0,0,.63) 60%, rgba(0,0,0,.45) 67%, rgba(0,0,0,.28) 74%, rgba(0,0,0,.14) 82%, rgba(0,0,0,.05) 90%, transparent 100%),\n linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 5%, rgba(0,0,0,.32) 11%, rgba(0,0,0,.58) 17%, rgba(0,0,0,.82) 24%, #000 31%, #000 69%, rgba(0,0,0,.82) 76%, rgba(0,0,0,.58) 83%, rgba(0,0,0,.32) 89%, rgba(0,0,0,.12) 95%, transparent 100%);\n mask-composite: intersect;\n}\n.closing-body { margin-inline-start: auto; width: min(560px, 100%); display: grid; gap: 28px; justify-items: start; }\n.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }\n.flow li { display: flex; align-items: center; gap: 14px; }\n.flow li::before { content: \"\"; flex: none; width: 12px; height: 12px; background: var(--rose); clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 45%); }\n.policy { color: var(--ink-2); font-size: 0.95rem; line-height: 1.85; max-width: 50ch; }\n@media (max-width: 760px) {\n .closing { flex-direction: column; align-items: stretch; padding-top: 0; min-height: 0; }\n .closing-photo { position: relative; width: auto; height: 60svh; margin-inline: calc(var(--gutter) * -1); }\n .closing-photo img {\n -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 55%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.58) 73%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.12) 91%, transparent 100%);\n mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 55%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.58) 73%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.12) 91%, transparent 100%);\n }\n .closing-body { margin-top: -90px; width: 100%; }\n}\n\n/* ── Footer: real marks, centred, her monogram anchored to the floor ── */\n.foot { position: relative; overflow: hidden; padding: clamp(56px, 9vh, 96px) var(--gutter) 0; text-align: center; }\n.foot-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }\n.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }\n.foot-links a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); text-decoration: none; font-size: 1.02rem; transition: color 0.2s; }\n.foot-links a:hover { color: var(--ink); }\n.soc { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }\n.soc-whatsapp { --icon: url(\"https://cdn.jsdelivr.net/npm/simple-icons@16.31.0/icons/whatsapp.svg\"); }\n.soc-instagram { --icon: url(\"https://cdn.jsdelivr.net/npm/simple-icons@16.31.0/icons/instagram.svg\"); }\n.soc-snapchat { --icon: url(\"https://cdn.jsdelivr.net/npm/simple-icons@16.31.0/icons/snapchat.svg\"); }\n.foot-note { color: var(--ink-3); font-size: 0.9rem; }\n.foot-mark { display: flex; justify-content: center; align-items: flex-start; height: clamp(150px, 22vw, 320px); margin-top: clamp(40px, 7vh, 72px); overflow: hidden; }\n.foot-mark-svg { flex: none; width: clamp(240px, 38vw, 560px); height: auto; color: var(--lift-2); }\n\n/* ── Inner pages ── */\n.page { padding: clamp(112px, 16vh, 160px) var(--gutter) clamp(64px, 10vh, 110px); }\n.page-narrow, .narrow { width: min(760px, 100%); margin-inline: auto; }\n.page-head { margin-bottom: clamp(28px, 4.5vh, 48px); }\n.page-title { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.15; }\n.page-lede { color: var(--ink-2); margin-top: 10px; font-size: 1.06rem; }\n.lost { display: grid; gap: 18px; justify-items: start; }\n\n.form { display: grid; gap: 30px; }\n.group { display: grid; gap: 10px; }\n.field { display: block; }\n.label { display: block; font-weight: 600; margin-bottom: 8px; }\n.group > .label { margin-bottom: 0; }\n.label small { color: var(--ink-2); font-weight: 400; }\ninput[type=\"text\"], input[type=\"tel\"], input[type=\"date\"], input[type=\"number\"], input[type=\"password\"],\ninput[type=\"time\"], input[type=\"file\"], select, textarea {\n width: 100%;\n min-height: 52px;\n padding: 0.8em 1em;\n border: 0;\n border-radius: 0;\n font: inherit;\n font-size: 1rem;\n color: var(--ink);\n background: var(--floor-2);\n box-shadow: inset 0 -1px 0 rgba(243, 230, 224, 0.16);\n transition: background-color 0.2s, box-shadow 0.2s;\n}\ninput:focus, select:focus, textarea:focus { outline: none; background: var(--lift); box-shadow: inset 0 -2px 0 var(--rose); }\nselect {\n appearance: none;\n -webkit-appearance: none;\n padding-inline-end: 2.6em;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23c2aaa3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: left 16px center;\n}\ntextarea { min-height: 120px; resize: vertical; }\n::placeholder { color: var(--ink-3); }\n.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n@media (max-width: 700px) { .two, .three { grid-template-columns: 1fr; } }\n.check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }\n.check input { width: 18px; height: 18px; accent-color: var(--wine); }\n\n.choices { display: grid; gap: 4px; }\n.choice { position: relative; display: block; cursor: pointer; }\n.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; }\n.choice span {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 2px 16px;\n align-items: center;\n padding: 16px 18px;\n background: var(--floor-2);\n clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);\n transition: background-color 0.2s;\n}\n.choice b { font-weight: 600; }\n.choice em { font-style: normal; color: var(--ink-2); font-size: 0.92rem; }\n.choice:hover span { background: var(--lift); }\n.choice input:checked + span { background: var(--wine); }\n.choice input:checked + span em { color: var(--ink); }\n.choice input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--rose); }\n@media (max-width: 520px) { .choice span { grid-template-columns: 1fr; } }\n\n#slots-hint { color: var(--ink-2); }\n.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }\n.slot { position: relative; cursor: pointer; }\n.slot input { position: absolute; inset: 0; opacity: 0; margin: 0; }\n.slot span {\n display: block;\n padding: 0.7em 0.4em;\n text-align: center;\n font-weight: 500;\n background: var(--floor-2);\n clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);\n transition: background-color 0.2s;\n}\n.slot:hover span { background: var(--lift); }\n.slot input:checked + span { background: var(--wine); }\n.slot input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--rose); }\n\n.form-policy { color: var(--ink-2); font-size: 0.95rem; line-height: 1.85; background: var(--floor-2); padding: 18px 20px; }\n.alert { padding: 14px 18px; margin-bottom: 20px; background: var(--lift); font-weight: 500; }\n.alert-error { color: var(--bad); }\n.alert-ok { color: var(--ok); }\n.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n\n.ticket {\n display: grid;\n gap: 20px;\n padding: clamp(26px, 5vw, 48px);\n background: var(--floor-2);\n clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);\n}\n.status { font-weight: 600; font-size: 0.95rem; }\n.st-pending { color: var(--warn); }\n.st-confirmed { color: var(--ok); }\n.st-cancelled { color: var(--bad); }\n.st-done { color: var(--rose); }\ndl.details { display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; margin: 0; }\ndl.details dt { color: var(--ink-2); }\ndl.details dd { margin: 0; font-weight: 500; }\n\n/* ── Admin ── */\n.admin-bar { background: var(--floor-2); }\n.admin-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px var(--gutter); }\n.admin-bar b { margin-inline-end: 8px; }\n.admin-bar a { color: var(--ink-2); text-decoration: none; }\n.admin-bar a:hover { color: var(--ink); }\n.admin-bar a.on { color: var(--ink); font-weight: 700; }\n.admin-bar form { margin-inline-start: auto; }\n.admin-bar button { font: inherit; color: var(--ink-2); background: var(--lift); border: 0; padding: 0.4em 1em; cursor: pointer; }\n.admin-bar button:hover { color: var(--ink); }\n.wrap { max-width: 1180px; margin-inline: auto; }\n.page.admin-page { padding: 32px var(--gutter) 80px; }\n.login { max-width: 420px; }\n.login-logo { width: 64px; height: 64px; margin: 0 auto 12px; }\n.card { background: var(--floor-2); padding: clamp(18px, 3vw, 28px); }\n.card-title { font-size: 1.25rem; }\n.form-grid { display: grid; gap: 20px; }\n.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; margin: 20px 0 28px; }\n.stat { background: var(--floor-2); padding: 16px 18px; }\n.stat b { display: block; font-size: 2rem; font-weight: 800; line-height: 1.15; }\n.stat span { color: var(--ink-2); font-size: 0.92rem; }\ndetails.card { padding: 0; margin-bottom: 6px; }\ndetails.card > summary { cursor: pointer; list-style: none; padding: 16px 22px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }\ndetails.card > summary::-webkit-details-marker { display: none; }\ndetails.card > summary .muted { font-weight: 400; font-size: 0.92rem; }\ndetails.card > form { padding: 0 22px 22px; }\n.add-booking { margin-bottom: 20px; }\n.row-actions { display: flex; gap: 10px; }\n.filters { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 16px; }\n.filters a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }\n.filters a:hover { color: var(--ink); }\n.filters a.on { color: var(--ink); font-weight: 700; }\n.day-group { margin-bottom: 28px; }\n.day-group h3 { font-size: 1.05rem; color: var(--rose); margin-bottom: 10px; }\n.bk { background: var(--floor-2); padding: 16px 18px; margin-bottom: 6px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }\n.bk h4 { font-size: 1.08rem; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }\n.bk .row { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--ink-2); font-size: 0.94rem; }\n.bk .note { margin-top: 8px; background: var(--lift); padding: 8px 12px; font-size: 0.94rem; white-space: pre-line; }\n.bk .acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; justify-content: flex-end; }\n.bk form { display: inline; }\n@media (max-width: 700px) { .bk { grid-template-columns: 1fr; } .bk .acts { justify-content: flex-start; } }\n.upload { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 12px; }\n.upload .field { flex: 1 1 280px; }\n.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }\n.admin-gallery figure { margin: 0; background: var(--floor-2); }\n.admin-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }\n.admin-gallery figcaption { padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.hidden-img img { opacity: 0.35; }\n.days { display: flex; flex-wrap: wrap; gap: 6px; }\n.days label { display: flex; align-items: center; gap: 6px; background: var(--lift); padding: 0.35em 0.95em; cursor: pointer; }\n.days input { accent-color: var(--wine); }\n.blocked { margin-top: 24px; }\n.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }\n.inline-form input { width: auto; flex: 1 1 180px; }\n.blocked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n.blocked-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--lift); }\n\n/* ── Her monogram: cut from her own logo, tinted by the surface it sits on ── */\n.mark {\n display: inline-block;\n flex: none;\n aspect-ratio: 345 / 749;\n background: currentColor;\n -webkit-mask: url(\"/img/brand/mark\") center / contain no-repeat;\n mask: url(\"/img/brand/mark\") center / contain no-repeat;\n}\n.brand-mark { width: auto; height: 32px; color: var(--rose); }\n.work-mark { width: auto; height: clamp(88px, 9vw, 124px); color: var(--rose); }\n.foot-mark-svg { width: auto; height: clamp(280px, 40vw, 600px); color: #3a2124; }\n","createdAt",["D",1789337767411],"branchVersion","branchId","2fb3b93c-3153-49cc-928f-ccd798836746","id","d8f07974-33ec-460f-a8b5-8a56ac73d9bd","najla-makeup",["D",1789334949320],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","موقع نجلاء الغفيلي ميك اب ارتست — خدمات ونظام حجوزات","imageUrl","cca8102f-07bb-4295-b44a-38d66d1d3405","pinnedFileId","01a09cac-8e2f-7716-b801-b7ea38740c6d","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f1d6e-b169-7628-a2c5-3fdc2bb2972f","tursoName","d8f0797433ec460fa8b58a56ac73d9bd","tursoHostname","d8f0797433ec460fa8b58a56ac73d9bd-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789519256886],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",52,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","asnfq50","handle","displayName","mfcbr4krn8-hash","avatar","https://avatars.githubusercontent.com/u/294484094?v=4","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":372,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":373,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":374,"_84":375,"_86":376,"_88":25},"tree",[195,200,205,209,211,217,218],"files",[195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218],"counts",{"_185":63,"_186":144,"_187":63,"_188":189,"_190":191},"contents",[131,132,133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":179,"_32":180,"_30":181,"_140":-5,"_41":42,"_40":182,"_142":59,"_38":183,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_27":184},{"_43":173,"_32":174,"_30":175,"_140":-5,"_41":42,"_40":176,"_142":59,"_38":177,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_27":178},{"_43":169,"_32":50,"_30":170,"_140":-5,"_41":42,"_40":144,"_142":59,"_38":171,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_27":172},{"_43":163,"_32":164,"_30":165,"_140":-5,"_41":42,"_40":166,"_142":59,"_38":167,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_27":168},{"_43":156,"_32":157,"_30":158,"_140":-5,"_41":42,"_40":159,"_142":59,"_38":160,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_27":162},{"_43":149,"_32":150,"_30":151,"_140":-5,"_41":42,"_40":152,"_142":59,"_38":153,"_13":144,"_34":20,"_35":154,"_24":25,"_147":-5,"_27":155},{"_43":138,"_32":139,"_30":57,"_140":-5,"_41":42,"_40":141,"_142":25,"_38":143,"_13":144,"_34":145,"_35":146,"_24":25,"_147":45,"_27":148},"c013bed7-cc58-42f0-a813-ec40382a4629","index.tsx","parentId",11,"latest",["D",1789336142658],1,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport type { Context } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport * as db from \"./lib/db.ts\";\nimport type { BookingView, Settings, Status } from \"./lib/db.ts\";\nimport { addDays, availableSlots, isDate, isTime, nowRiyadh, toMin } from \"./lib/time.ts\";\nimport { CITIES, isLocation, normalizePhone, toLatinDigits } from \"./lib/format.ts\";\nimport { checkPassword, clientIp, endSession, requireAdmin, startSession } from \"./lib/auth.ts\";\nimport { BookingPage, BookPage, HomePage, NotFoundPage } from \"./views/public.tsx\";\nimport { BookingsAdmin, GalleryAdmin, LoginPage, ServicesAdmin, SettingsAdmin } from \"./views/admin.tsx\";\n\nconst app = new Hono();\n\ntype Body = Record;\nconst str = (b: Body, key: string, max = 500) => {\n const v = b[key];\n return typeof v === \"string\" ? v.trim().slice(0, max) : \"\";\n};\nconst int = (raw: string, min: number, max: number, fallback: number) => {\n const n = Number(toLatinDigits(raw));\n return raw !== \"\" && Number.isInteger(n) && n >= min && n <= max ? n : fallback;\n};\nconst clampPeople = (raw: string) => int(raw, 1, 6, 1);\n\nasync function render(c: Context, el: unknown, status = 200) {\n const html = await (el as { toString(): string | Promise }).toString();\n return c.html(\"\" + html, status as 200);\n}\n\napp.use(\"*\", async (c, next) => {\n await db.ensureSchema();\n await next();\n try {\n c.header(\"X-Content-Type-Options\", \"nosniff\");\n c.header(\"Referrer-Policy\", \"strict-origin-when-cross-origin\");\n if (c.req.path.startsWith(\"/admin\")) {\n c.header(\"X-Frame-Options\", \"DENY\");\n c.header(\"Cache-Control\", \"no-store\");\n }\n } catch {\n // some responses have immutable headers\n }\n});\n\n// ── Public site ─────────────────────────────────────────────\napp.get(\"/\", async (c) => {\n const [s, services, gallery] = await Promise.all([\n db.getSettings(),\n db.listServices(true),\n db.listGallery(true),\n ]);\n return render(c, );\n});\n\nfunction bookingRange(s: Settings) {\n const today = nowRiyadh().date;\n return { minDate: today, maxDate: addDays(today, s.maxDaysAhead) };\n}\n\napp.get(\"/book\", async (c) => {\n const [s, services] = await Promise.all([db.getSettings(), db.listServices(true)]);\n const values = { service_id: c.req.query(\"service\") ?? \"\", people: \"1\" };\n return render(c, );\n});\n\napp.get(\"/api/slots\", async (c) => {\n const [s, service] = await Promise.all([\n db.getSettings(),\n db.getService(Number(c.req.query(\"service\"))),\n ]);\n c.header(\"Cache-Control\", \"no-store\");\n if (!service || !service.active) return c.json({ ok: false, reason: \"الخدمة غير متاحة.\", slots: [] });\n const people = clampPeople(c.req.query(\"people\") ?? \"1\");\n return c.json(await availableSlots(c.req.query(\"date\") ?? \"\", service.duration_min * people, s));\n});\n\nconst BOOK_FIELDS = [\"service_id\", \"people\", \"location_type\", \"city\", \"date\", \"time\", \"name\", \"phone\", \"notes\"];\n\napp.post(\"/book\", async (c) => {\n const body = (await c.req.parseBody()) as Body;\n if (str(body, \"website\")) return c.redirect(\"/\"); // honeypot\n const v: Record = Object.fromEntries(BOOK_FIELDS.map((k) => [k, str(body, k, 1000)]));\n const [s, services] = await Promise.all([db.getSettings(), db.listServices(true)]);\n const fail = (error: string) =>\n render(c, , 422);\n\n const service = services.find((x) => String(x.id) === v.service_id);\n if (!service) return fail(\"اختاري الخدمة المطلوبة.\");\n const name = v.name.slice(0, 80);\n if (name.length < 2) return fail(\"اكتبي الاسم.\");\n const phone = normalizePhone(v.phone);\n if (!phone) return fail(\"رقم الجوال غير صحيح. اكتبيه مثل 05xxxxxxxx أو مع رمز الدولة.\");\n if (!isLocation(v.location_type) || (v.location_type === \"studio\" && !s.allowStudio)) {\n return fail(\"اختاري مكان الخدمة.\");\n }\n const city = CITIES.includes(v.city) ? v.city : \"\";\n if (v.location_type !== \"studio\" && !city) return fail(\"اختاري المدينة.\");\n\n const people = clampPeople(v.people);\n const duration = service.duration_min * people;\n const slots = await availableSlots(v.date, duration, s);\n if (!slots.ok) return fail(slots.reason);\n if (!slots.slots.includes(v.time)) return fail(\"الوقت المختار غير متاح، اختاري وقتاً آخر.\");\n if ((await db.countOpenBookingsByPhone(phone, nowRiyadh().date)) >= 3) {\n return fail(\"لديك عدة طلبات بانتظار التأكيد. تواصلي معنا عبر واتساب لإضافة المزيد.\");\n }\n\n const r = await db.createBooking({\n service_id: service.id,\n service_name: service.name,\n duration_min: duration,\n price: service.price == null ? null : service.price * people,\n date: v.date,\n time: v.time,\n start_min: toMin(v.time),\n name,\n phone,\n location_type: v.location_type,\n city,\n people,\n notes: v.notes,\n status: \"pending\",\n }, s.bufferMin);\n if (!r.ok) return fail(\"سبقك حجز آخر على هذا الوقت، اختاري وقتاً آخر.\");\n return c.redirect(`/b/${r.code}`);\n});\n\napp.get(\"/b/:code\", async (c) => {\n const b = await db.getBookingByCode(c.req.param(\"code\").toUpperCase());\n if (!b) return render(c, , 404);\n c.header(\"Cache-Control\", \"no-store\");\n return render(c, );\n});\n\nfunction sniffMime(b: Uint8Array) {\n if (b[0] === 0x89 && b[1] === 0x50) return \"image/png\";\n if (b[0] === 0x52 && b[1] === 0x49 && b[8] === 0x57 && b[9] === 0x45) return \"image/webp\";\n return \"image/jpeg\";\n}\n\napp.get(\"/img/:kind{gallery|brand}/:name\", async (c) => {\n try {\n const res = await blob.get(`${c.req.param(\"kind\")}/${c.req.param(\"name\")}`);\n if (!res.ok) return c.notFound();\n const bytes = new Uint8Array(await res.arrayBuffer());\n return c.body(bytes, 200, { \"Content-Type\": sniffMime(bytes), \"Cache-Control\": \"public, max-age=86400\" });\n } catch {\n return c.notFound();\n }\n});\n\napp.get(\"/robots.txt\", async (c) => {\n const s = await db.getSettings();\n return c.text(\n s.indexable ? \"User-agent: *\\nDisallow: /admin\\nDisallow: /b/\\n\" : \"User-agent: *\\nDisallow: /\\n\",\n );\n});\n\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\n\n// ── Admin ───────────────────────────────────────────────────\napp.use(\"/admin\", requireAdmin);\napp.use(\"/admin/*\", async (c, next) => {\n if (c.req.path === \"/admin/login\") return await next();\n return await requireAdmin(c, next);\n});\n\napp.get(\"/admin/login\", (c) => render(c, ));\n\napp.post(\"/admin/login\", async (c) => {\n const ip = clientIp(c);\n if ((await db.recentLoginFailures(ip)) >= 8) {\n return render(c, , 429);\n }\n const body = (await c.req.parseBody()) as Body;\n const password = typeof body.password === \"string\" ? body.password.slice(0, 200) : \"\";\n if (await checkPassword(password)) {\n await startSession(c);\n return c.redirect(\"/admin\");\n }\n await db.recordLoginFailure(ip);\n return render(c, , 401);\n});\n\napp.post(\"/admin/logout\", (c) => {\n endSession(c);\n return c.redirect(\"/admin/login\");\n});\n\nconst VIEWS: BookingView[] = [\"upcoming\", \"pending\", \"past\", \"all\"];\n\napp.get(\"/admin\", async (c) => {\n const today = nowRiyadh().date;\n const requested = c.req.query(\"view\") as BookingView;\n const view = VIEWS.includes(requested) ? requested : \"upcoming\";\n const [bookings, stats, services] = await Promise.all([\n db.listBookings(view, today),\n db.bookingStats(today, addDays(today, 7)),\n db.listServices(false),\n ]);\n return render(\n c,\n ,\n );\n});\n\napp.post(\"/admin/bookings/new\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const fail = (code: string) => c.redirect(`/admin?err=${code}`);\n const service = await db.getService(Number(str(b, \"service_id\")));\n if (!service) return fail(\"service\");\n const date = str(b, \"date\");\n if (!isDate(date)) return fail(\"date\");\n const time = str(b, \"time\").slice(0, 5);\n if (!isTime(time)) return fail(\"time\");\n const name = str(b, \"name\", 80);\n if (name.length < 2) return fail(\"name\");\n const phone = normalizePhone(str(b, \"phone\"));\n if (!phone) return fail(\"phone\");\n const people = clampPeople(str(b, \"people\"));\n const location = str(b, \"location_type\");\n const city = str(b, \"city\");\n const s = await db.getSettings();\n const r = await db.createBooking({\n service_id: service.id,\n service_name: service.name,\n duration_min: service.duration_min * people,\n price: service.price == null ? null : service.price * people,\n date,\n time,\n start_min: toMin(time),\n name,\n phone,\n location_type: isLocation(location) ? location : \"home\",\n city: CITIES.includes(city) ? city : \"\",\n people,\n notes: str(b, \"notes\", 1000),\n status: str(b, \"status\") === \"pending\" ? \"pending\" : \"confirmed\",\n }, s.bufferMin);\n return r.ok ? c.redirect(\"/admin?ok=added\") : fail(\"taken\");\n});\n\napp.post(\"/admin/bookings/:id/status\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const status = str(b, \"status\") as Status;\n if (!(db.STATUSES as readonly string[]).includes(status)) return c.text(\"bad request\", 400);\n await db.setBookingStatus(Number(c.req.param(\"id\")), status);\n const back = str(b, \"back\");\n return c.redirect(/^\\/admin(\\?[\\w=&]*)?$/.test(back) ? back : \"/admin\");\n});\n\nfunction serviceInput(b: Body): db.ServiceInput | null {\n const name = str(b, \"name\", 80);\n if (!name) return null;\n const price = toLatinDigits(str(b, \"price\")).replace(/[^\\d]/g, \"\");\n return {\n name,\n description: str(b, \"description\", 600),\n category: str(b, \"category\", 40),\n duration_min: int(str(b, \"duration_min\"), 15, 600, 60),\n price: price ? Math.min(Number(price), 1_000_000) : null,\n price_note: str(b, \"price_note\", 60),\n active: b.active === \"on\" ? 1 : 0,\n sort: int(str(b, \"sort\"), -1000, 1000, 0),\n };\n}\n\napp.get(\"/admin/services\", async (c) =>\n render(c, ));\n\napp.post(\"/admin/services\", async (c) => {\n const input = serviceInput((await c.req.parseBody()) as Body);\n if (input) await db.createService(input);\n return c.redirect(\"/admin/services?ok=1\");\n});\n\napp.post(\"/admin/services/:id\", async (c) => {\n const input = serviceInput((await c.req.parseBody()) as Body);\n const id = Number(c.req.param(\"id\"));\n if (input && Number.isInteger(id)) await db.updateService(id, input);\n return c.redirect(\"/admin/services?ok=1\");\n});\n\napp.post(\"/admin/services/:id/delete\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n if (Number.isInteger(id)) await db.deleteService(id);\n return c.redirect(\"/admin/services?ok=1\");\n});\n\nconst IMAGE_TYPES = [\"image/jpeg\", \"image/png\", \"image/webp\"];\n\napp.get(\"/admin/gallery\", async (c) =>\n render(\n c,\n ,\n ));\n\napp.post(\"/admin/gallery\", async (c) => {\n const body = await c.req.parseBody({ all: true });\n const files = ([] as unknown[]).concat(body.photos ?? []).filter((f): f is File => f instanceof File);\n let added = 0;\n let rejected = 0;\n for (const f of files) {\n if (!IMAGE_TYPES.includes(f.type) || f.size === 0 || f.size > 5_000_000) {\n rejected++;\n continue;\n }\n const key = `gallery/${crypto.randomUUID()}`;\n await blob.set(key, new Uint8Array(await f.arrayBuffer()));\n await db.addGalleryItem(key, f.type);\n added++;\n }\n return c.redirect(`/admin/gallery?added=${added}&rejected=${rejected}`);\n});\n\napp.post(\"/admin/gallery/:id/:action{hero|toggle|delete}\", async (c) => {\n const item = await db.getGalleryItem(Number(c.req.param(\"id\")));\n if (item) {\n const action = c.req.param(\"action\");\n if (action === \"hero\") await db.makeGalleryHero(item.id);\n else if (action === \"toggle\") await db.toggleGalleryItem(item.id);\n else {\n await db.deleteGalleryItem(item.id);\n await blob.delete(item.blob_key).catch(() => {});\n }\n }\n return c.redirect(\"/admin/gallery\");\n});\n\napp.get(\"/admin/settings\", async (c) => {\n const today = nowRiyadh().date;\n const [s, blocked] = await Promise.all([db.getSettings(), db.listBlocked(today)]);\n return render(\n c,\n ,\n );\n});\n\napp.post(\"/admin/settings\", async (c) => {\n const b = (await c.req.parseBody({ all: true })) as Body;\n const cur = await db.getSettings();\n const workDays = [...new Set(([] as unknown[]).concat(b.workDays ?? []).map(Number))]\n .filter((d) => Number.isInteger(d) && d >= 0 && d <= 6)\n .sort();\n if (!workDays.length) return c.redirect(\"/admin/settings?err=days\");\n const open = isTime(str(b, \"open\")) ? str(b, \"open\") : cur.open;\n const close = isTime(str(b, \"close\")) ? str(b, \"close\") : cur.close;\n if (toMin(open) >= toMin(close)) return c.redirect(\"/admin/settings?err=hours\");\n const handle = (key: string, fallback: string) => {\n const v = str(b, key, 60).replace(/^@/, \"\");\n return /^[A-Za-z0-9._-]{1,40}$/.test(v) ? v : fallback;\n };\n const next: Settings = {\n ...cur,\n workDays,\n open,\n close,\n slotStep: int(str(b, \"slotStep\"), 5, 120, cur.slotStep),\n bufferMin: int(str(b, \"bufferMin\"), 0, 240, cur.bufferMin),\n minNoticeHours: int(str(b, \"minNoticeHours\"), 0, 720, cur.minNoticeHours),\n maxDaysAhead: int(str(b, \"maxDaysAhead\"), 1, 730, cur.maxDaysAhead),\n allowStudio: b.allowStudio === \"on\",\n whatsapp: normalizePhone(str(b, \"whatsapp\")) ?? cur.whatsapp,\n instagram: handle(\"instagram\", cur.instagram),\n snapchat: handle(\"snapchat\", cur.snapchat),\n followers: str(b, \"followers\", 30),\n tagline: str(b, \"tagline\", 300),\n about: str(b, \"about\", 3000),\n policy: str(b, \"policy\", 3000),\n announcement: str(b, \"announcement\", 300),\n indexable: b.indexable === \"on\",\n };\n await db.saveSettings(next);\n return c.redirect(\"/admin/settings?ok=1\");\n});\n\napp.post(\"/admin/blocked\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const date = str(b, \"date\");\n if (isDate(date)) await db.addBlocked(date, str(b, \"reason\", 80));\n return c.redirect(\"/admin/settings?ok=1\");\n});\n\napp.post(\"/admin/blocked/delete\", async (c) => {\n const b = (await c.req.parseBody()) as Body;\n const date = str(b, \"date\");\n if (isDate(date)) await db.removeBlocked(date);\n return c.redirect(\"/admin/settings?ok=1\");\n});\n\napp.notFound((c) => render(c, , 404));\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[139],"eea1a183-19dd-4dfc-b8f2-f299117b29db","README.md","01a09cac-8e2f-7716-b801-b39afe182f45",14,["D",1789336164645],"# موقع نجلاء الغفيلي — ميك اب ارتست\n\nموقع تعريفي + نظام حجوزات + لوحة إدارة. Hono JSX على Val Town، SQLite للبيانات، Blob للصور.\n\n## الصفحات\n- `/` الرئيسية: الواجهة، النبذة، الخدمات، المعرض، طريقة الحجز، التواصل\n- `/book` نموذج الحجز (الأوقات المتاحة تُحسب من `/api/slots`)\n- `/b/:code` صفحة حالة الحجز + إرسال التفاصيل عبر واتساب\n- `/admin` لوحة الإدارة: الحجوزات (تأكيد/إلغاء/حجز يدوي)، الخدمات والأسعار، المعرض (رفع/إخفاء/واجهة)، الإعدادات (أيام وساعات العمل، أيام مغلقة، النصوص، الظهور في البحث)\n\n## متغيرات البيئة\n- `ADMIN_PASSWORD` كلمة مرور اللوحة\n- `SESSION_SECRET` مفتاح توقيع الجلسة\n\n## منطق التوفر\nالحجز يشغل `مدة الخدمة × عدد الأشخاص` + فاصل راحة/تنقّل. الإدخال ذرّي في SQL فلا يمكن حجز وقتين متداخلين حتى مع طلبين متزامنين. الحجوزات بحالة «بانتظار التأكيد» تحجز الوقت مبدئياً.\n\n## الصور\n`data/gallery.json` بذرة أولية من حساب إنستقرام @najla_makeupartist تُنسخ إلى Blob عند أول تشغيل؛ بعدها تُدار الصور من `/admin/gallery`.\n",[150],"14393c21-7ac3-4629-bc0f-c1dea4cd24a0","views","37f26134-5ccd-45c7-af8e-dfb68d37fdd7",6,["D",1789335744271],"directory",[157],"3560576c-1b42-4904-a976-cd09fc693174","scripts","d9ed626f-6a6b-4a0c-8bd3-b02c5e341b18",25,["D",1789337465670],[164],"f3656f81-2ad6-48a5-b486-9ad100c511b4","01a09cac-8e2f-7716-b801-aca3218223d9",["D",1789334949320],[50],"12e38241-4680-415c-b8f1-041b0c3ded6c","lib","200fe74d-8ef8-4343-a5a1-297a2da2eb49",2,["D",1789335703767],[174],"fcb4ad75-7daf-47b5-8f84-99f7512b34b7","data","4d434050-292d-4b99-a6f7-e44461613dca",13,["D",1789336152387],[180],"pulls","branches","forks","envVars",{"_192":176,"_194":63},"connections",{"_192":63,"_193":63},"count","unfilledCount","emptyCount",{"_43":179,"_32":180,"_30":181,"_140":-5,"_41":42,"_40":182,"_142":59,"_38":369,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_220":370,"_27":371},{"_43":362,"_32":363,"_30":364,"_140":181,"_41":42,"_40":182,"_142":59,"_38":365,"_13":63,"_34":20,"_35":366,"_24":25,"_147":-5,"_220":367,"_27":368},{"_43":354,"_32":355,"_30":356,"_140":181,"_41":42,"_40":357,"_142":25,"_38":358,"_13":63,"_34":20,"_35":359,"_24":25,"_147":-5,"_220":360,"_27":361},{"_43":346,"_32":347,"_30":348,"_140":181,"_41":42,"_40":349,"_142":25,"_38":350,"_13":63,"_34":20,"_35":351,"_24":25,"_147":-5,"_220":352,"_27":353},{"_43":338,"_32":339,"_30":340,"_140":181,"_41":42,"_40":341,"_142":25,"_38":342,"_13":63,"_34":20,"_35":343,"_24":25,"_147":-5,"_220":344,"_27":345},{"_43":173,"_32":174,"_30":175,"_140":-5,"_41":42,"_40":176,"_142":59,"_38":335,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_220":336,"_27":337},{"_43":327,"_32":328,"_30":329,"_140":175,"_41":42,"_40":330,"_142":59,"_38":331,"_13":63,"_34":231,"_35":332,"_24":25,"_147":-5,"_220":333,"_27":334},{"_43":319,"_32":320,"_30":321,"_140":175,"_41":42,"_40":322,"_142":25,"_38":323,"_13":144,"_34":231,"_35":324,"_24":25,"_147":-5,"_220":325,"_27":326},{"_43":311,"_32":312,"_30":313,"_140":175,"_41":42,"_40":314,"_142":25,"_38":315,"_13":63,"_34":231,"_35":316,"_24":25,"_147":-5,"_220":317,"_27":318},{"_43":304,"_32":305,"_30":306,"_140":175,"_41":42,"_40":264,"_142":25,"_38":307,"_13":63,"_34":231,"_35":308,"_24":25,"_147":-5,"_220":309,"_27":310},{"_43":169,"_32":50,"_30":170,"_140":-5,"_41":42,"_40":144,"_142":59,"_38":301,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_220":302,"_27":303},{"_43":293,"_32":294,"_30":295,"_140":170,"_41":42,"_40":296,"_142":59,"_38":297,"_13":63,"_34":231,"_35":298,"_24":25,"_147":-5,"_220":299,"_27":300},{"_43":286,"_32":287,"_30":288,"_140":170,"_41":42,"_40":144,"_142":59,"_38":289,"_13":63,"_34":20,"_35":290,"_24":25,"_147":-5,"_220":291,"_27":292},{"_43":282,"_32":33,"_30":31,"_140":170,"_41":42,"_40":14,"_142":25,"_38":283,"_13":264,"_34":20,"_35":37,"_24":25,"_147":-5,"_220":284,"_27":285},{"_43":163,"_32":164,"_30":165,"_140":-5,"_41":42,"_40":166,"_142":59,"_38":279,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_220":280,"_27":281},{"_43":271,"_32":272,"_30":273,"_140":165,"_41":42,"_40":274,"_142":25,"_38":275,"_13":144,"_34":231,"_35":276,"_24":25,"_147":-5,"_220":277,"_27":278},{"_43":156,"_32":157,"_30":158,"_140":-5,"_41":42,"_40":159,"_142":59,"_38":268,"_13":63,"_34":161,"_35":-5,"_24":25,"_147":-5,"_220":269,"_27":270},{"_43":259,"_32":260,"_30":261,"_140":158,"_41":42,"_40":262,"_142":25,"_38":263,"_13":264,"_34":231,"_35":265,"_24":25,"_147":-5,"_220":266,"_27":267},{"_43":251,"_32":252,"_30":253,"_140":158,"_41":42,"_40":254,"_142":59,"_38":255,"_13":63,"_34":231,"_35":256,"_24":25,"_147":-5,"_220":257,"_27":258},{"_43":243,"_32":244,"_30":245,"_140":158,"_41":42,"_40":246,"_142":25,"_38":247,"_13":144,"_34":231,"_35":248,"_24":25,"_147":-5,"_220":249,"_27":250},{"_43":235,"_32":236,"_30":237,"_140":158,"_41":42,"_40":238,"_142":59,"_38":239,"_13":144,"_34":231,"_35":240,"_24":25,"_147":-5,"_220":241,"_27":242},{"_43":226,"_32":227,"_30":228,"_140":158,"_41":42,"_40":229,"_142":25,"_38":230,"_13":176,"_34":231,"_35":232,"_24":25,"_147":-5,"_220":233,"_27":234},{"_43":149,"_32":150,"_30":151,"_140":-5,"_41":42,"_40":152,"_142":59,"_38":223,"_13":144,"_34":20,"_35":154,"_24":25,"_147":-5,"_220":224,"_27":225},{"_43":138,"_32":139,"_30":57,"_140":-5,"_41":42,"_40":141,"_142":25,"_38":219,"_13":144,"_34":145,"_35":146,"_24":25,"_147":45,"_220":221,"_27":222},["D",1789336142658],"children",[],[139],["D",1789336164645],[],[150],"9fdaa66c-6da9-410f-b43a-32caffb82cf6","public.tsx","3fd93c0a-afbc-11f1-a6ad-1607ee4eb77e",29,["D",1789337557631],"script","/** @jsxImportSource npm:hono@4/jsx */\nimport type { Booking, GalleryItem, Service, Settings } from \"../lib/db.ts\";\nimport { CITIES, fmtDuration, fmtPrice, LOCATIONS, peopleLabel, STATUS_LABELS, waLink } from \"../lib/format.ts\";\nimport { fmtDate, fmtTime } from \"../lib/time.ts\";\nimport { Arrow, Social, type SocialName } from \"./icons.tsx\";\nimport { Layout } from \"./layout.tsx\";\nimport { Mark } from \"./mark.tsx\";\n\nexport const NAME = \"نجلاء الغفيلي\";\nconst src = (g: GalleryItem) => `/img/${g.blob_key}`;\n\nfunction Nav({ s, book = true }: { s?: Settings; book?: boolean }) {\n return (\n

\n \n {s?.announcement ?

{s.announcement}

: null}\n

\n );\n}\n\nfunction Footer({ s }: { s: Settings }) {\n const links: { name: SocialName; label: string; href: string; ltr?: boolean }[] = [\n { name: \"whatsapp\", label: \"واتساب\", href: waLink(s.whatsapp, \"مرحبا نجلاء 🌸\") },\n { name: \"instagram\", label: `@${s.instagram}`, href: `https://www.instagram.com/${s.instagram}/`, ltr: true },\n { name: \"snapchat\", label: s.snapchat, href: `https://www.snapchat.com/add/${s.snapchat}`, ltr: true },\n ];\n return (\n \n );\n}\n\nexport function HomePage({ s, services, gallery }: { s: Settings; services: Service[]; gallery: GalleryItem[] }) {\n const hero = gallery[0];\n const side = gallery[1] ?? hero;\n const closing = gallery[2] ?? hero;\n const reel = gallery.length > 1 ? gallery.slice(1) : gallery;\n const place = `ميك اب ارتست · الشرقية والبحرين${s.followers ? ` · ${s.followers} متابعة` : \"\"}`;\n return (\n \n

\n {hero\n ? (\n

Diff · v34