[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_380":381,"_382":383},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_286":-5,"_20":287,"_22":288,"_289":290,"_291":292,"_26":293,"_24":294,"_295":-5,"_296":-5,"_297":53,"_298":299,"_300":45,"_301":-5,"_302":-5,"_303":304},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","asnfq50","name","najla-makeup","branchName","main","version","path","public/styles.css","project",{"_33":229,"_13":14,"_46":230,"_231":-5,"_232":53,"_233":56,"_234":56,"_235":236,"_237":-5,"_238":239,"_240":66,"_241":45,"_242":-5,"_243":-5,"_244":88,"_245":246,"_247":248,"_249":250,"_251":252,"_253":-5,"_254":255,"_256":255,"_257":258,"_259":258,"_260":258,"_261":255,"_262":255,"_263":264,"_265":266,"_267":268,"_269":53},"tree",[57,58,59,60,61,62,63],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_18":55},"contents",[],"upstream","pull","ahead","behind","envVars","id","53236b03-d51b-46d1-8f6c-52fcf1feca93","styles.css","fileId","ce70e468-afbc-11f1-a06e-1607ee4eb77e","parentId","01a09cac-8e2f-7716-b801-aca3218223d9","branchId","2fb3b93c-3153-49cc-928f-ccd798836746","branchVersion",48,"latest",true,"createdAt",["D",1789376509139],6,"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; 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.nav { background: rgba(27, 14, 16, 0.97); }\n.dish-tier { font-size: 0.84rem; color: var(--ink-2); line-height: 1.55; }\n@media (min-width: 641px) { .dish { grid-template-columns: minmax(0, 1fr) 16rem 18px; } }\n.work-lede { max-width: 66ch; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.95; }\n@media (max-width: 760px) {\n .foot-mark { height: 120px; }\n .foot-mark-svg { height: 220px; }\n}\n","deleted",false,"label",[56,35],"public",{"_33":214,"_13":215,"_36":216,"_38":-5,"_40":41,"_42":217,"_44":45,"_46":218,"_17":88,"_49":89,"_50":-5,"_52":53,"_54":-5,"_72":219,"_18":220},{"_33":172,"_13":173,"_36":174,"_38":-5,"_40":41,"_42":69,"_44":45,"_46":175,"_17":88,"_49":89,"_50":-5,"_52":53,"_54":-5,"_72":176,"_18":177},{"_33":147,"_13":56,"_36":39,"_38":-5,"_40":41,"_42":80,"_44":45,"_46":148,"_17":88,"_49":89,"_50":-5,"_52":53,"_54":-5,"_72":149,"_18":150},{"_33":140,"_13":141,"_36":142,"_38":-5,"_40":41,"_42":143,"_44":45,"_46":144,"_17":88,"_49":89,"_50":-5,"_52":53,"_54":-5,"_72":145,"_18":146},{"_33":84,"_13":85,"_36":86,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":87,"_17":88,"_49":89,"_50":-5,"_52":53,"_54":-5,"_72":90,"_18":91},{"_33":75,"_13":76,"_36":77,"_38":-5,"_40":41,"_42":78,"_44":45,"_46":79,"_17":80,"_49":24,"_50":81,"_52":53,"_54":-5,"_72":82,"_18":83},{"_33":64,"_13":65,"_36":66,"_38":-5,"_40":41,"_42":67,"_44":45,"_46":68,"_17":69,"_49":70,"_50":71,"_52":53,"_54":14,"_72":73,"_18":74},"14693d07-44e1-4cda-b719-b955edc6b2b1","index.tsx","01a09cac-8e2f-7716-b801-b7ea38740c6d",46,["D",1789376501345],2,"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, unitPrice } 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);\nconst list = (b: Body, key: string) => ([] as unknown[]).concat(b[key] ?? []).filter((v): v is string => typeof v === \"string\");\n\n/** Listed prices only apply in the configured cities; elsewhere the price is agreed on WhatsApp. */\nfunction bookingPrice(service: db.Service, people: number, city: string, s: Settings) {\n const unit = unitPrice(service, people);\n return unit != null && s.priceCities.includes(city) ? unit * people : null;\n}\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: addDays(today, Math.floor(s.minNoticeHours / 24)), 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: bookingPrice(service, people, city, s),\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 cityRaw = str(b, \"city\");\n const city = CITIES.includes(cityRaw) ? cityRaw : \"\";\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: bookingPrice(service, people, city, s),\n date,\n time,\n start_min: toMin(time),\n name,\n phone,\n location_type: isLocation(location) ? location : \"home\",\n 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 money = (key: string) => {\n const digits = toLatinDigits(str(b, key)).replace(/[^\\d]/g, \"\");\n return digits ? Math.min(Number(digits), 1_000_000) : null;\n };\n return {\n name,\n description: str(b, \"description\", 600),\n category: str(b, \"category\", 40),\n duration_min: int(str(b, \"duration_min\"), 5, 600, 60),\n price: money(\"price\"),\n price_pair: money(\"price_pair\"),\n price_group: money(\"price_group\"),\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(list(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, 1440, 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 pricingNote: str(b, \"pricingNote\", 200),\n priceCities: \"priceCitiesField\" in b ? list(b, \"priceCities\").filter((c) => CITIES.includes(c)) : cur.priceCities,\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","children",[],[65],"eea1a183-19dd-4dfc-b8f2-f299117b29db","README.md","01a09cac-8e2f-7716-b801-b39afe182f45",14,["D",1789336164645],1,"# موقع نجلاء الغفيلي — ميك اب ارتست\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",[],[76],"14393c21-7ac3-4629-bc0f-c1dea4cd24a0","views","37f26134-5ccd-45c7-af8e-dfb68d37fdd7",["D",1789335744271],0,"directory",[92,93,94,95,96],[85],{"_33":131,"_13":132,"_36":133,"_38":86,"_40":41,"_42":134,"_44":45,"_46":135,"_17":136,"_49":103,"_50":137,"_52":53,"_54":-5,"_72":138,"_18":139},{"_33":123,"_13":124,"_36":125,"_38":86,"_40":41,"_42":126,"_44":45,"_46":127,"_17":88,"_49":103,"_50":128,"_52":53,"_54":-5,"_72":129,"_18":130},{"_33":115,"_13":116,"_36":117,"_38":86,"_40":41,"_42":118,"_44":45,"_46":119,"_17":102,"_49":103,"_50":120,"_52":53,"_54":-5,"_72":121,"_18":122},{"_33":107,"_13":108,"_36":109,"_38":86,"_40":41,"_42":110,"_44":45,"_46":111,"_17":80,"_49":103,"_50":112,"_52":53,"_54":-5,"_72":113,"_18":114},{"_33":97,"_13":98,"_36":99,"_38":86,"_40":41,"_42":100,"_44":45,"_46":101,"_17":102,"_49":103,"_50":104,"_52":53,"_54":-5,"_72":105,"_18":106},"bc58168a-feee-40a5-b453-dfbcccf64962","public.tsx","3fd93c0a-afbc-11f1-a6ad-1607ee4eb77e",45,["D",1789376443057],3,"script","/** @jsxImportSource npm:hono@4/jsx */\nimport type { Booking, GalleryItem, Service, Settings } from \"../lib/db.ts\";\nimport {\n CITIES,\n fmtDuration,\n fmtPrice,\n LOCATIONS,\n peopleLabel,\n servicePrice,\n STATUS_LABELS,\n tierText,\n waLink,\n} 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