*{box-sizing:border-box}body{margin:0;background:#dcebe4;color:#1d2a26;font:16px/1.6 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:32px 20px}.top,.top>div,nav{display:flex;align-items:center;gap:16px}.top{justify-content:space-between;flex-wrap:wrap}h1{font-size:32px;line-height:1.2;margin:0}h1 small{display:block;font-size:13px;font-weight:500;margin-top:6px}a{color:#176342;text-underline-offset:3px}.intro{max-width:800px;color:#4d6258}#filters{display:flex;gap:14px;flex-wrap:wrap;align-items:end;padding:20px;background:#f7fbf8;border-radius:20px;margin:24px 0}label{display:grid;gap:6px;font-size:13px;flex:1;min-width:160px}input,select,button{font:inherit;min-height:44px;padding:10px 14px;border:1px solid #b9d3c7;border-radius:12px}button{background:#1f8b5b;color:white;cursor:pointer;font-weight:650}button:disabled{opacity:.5;cursor:wait}.appointments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card{background:#fff;border:1px solid #b9d3c7;border-radius:20px;padding:22px}.card h2{font-size:21px;margin:12px 0;overflow-wrap:anywhere}.card p{margin:8px 0}.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:bold;background:#fff2cd;color:#735612}.badge.confirmed{background:#d9f4df;color:#176342}.badge.cancelled{background:#f5dce0;color:#8d3144}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.actions button:last-child{background:#f7fbf8;color:#5b3439}.ref{font:11px/1.5 ui-monospace,monospace;overflow-wrap:anywhere;color:#55665f}.privacy{font-size:13px;color:#55665f;margin-top:28px}.error{color:#9b243a;font-weight:600}:focus-visible{outline:3px solid #7a5cf0;outline-offset:3px}@media(max-width:700px){.appointments{grid-template-columns:1fr}main{padding:20px 14px}.top nav{width:100%}#filters{padding:16px}#filters>button{width:100%}}

.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.summary>div{background:#f7fbf8;border-radius:16px;padding:18px;display:grid;gap:4px}.summary strong{font-size:30px;line-height:1.2}.summary span{font-size:12px}#newRequests{background:#fff2cd;padding:14px 18px;border-radius:12px;color:#735612;font-weight:650}@media(max-width:500px){.summary{gap:6px}.summary>div{padding:12px 8px}.summary strong{font-size:25px}}

.manual-booking{background:#f7fbf8;border-radius:16px;padding:20px;margin:20px 0}.manual-booking summary{cursor:pointer;font-weight:700}.manual-booking form{display:flex;flex-wrap:wrap;gap:14px}.agreement{display:flex;align-items:center;flex-basis:100%}.agreement input{flex:none;min-height:22px;width:22px}.manual-booking [role=status]{flex-basis:100%}

.customer-controls{border-top:1px solid #dcebe4;margin-top:18px;padding-top:14px}.customer-controls summary{font-weight:650;cursor:pointer}.customer-controls label{margin:12px 0;min-width:0}.customer-controls textarea{font:inherit;padding:12px;max-width:100%;resize:vertical;border:1px solid #b9d3c7;border-radius:12px}.customer-controls button{margin:5px 5px 5px 0;font-size:13px}.customer-controls p{font-size:13px}.customer-main{max-width:760px}.customer-main>.card{margin:24px 0}#customerResponse{white-space:pre-wrap;overflow-wrap:anywhere}

[hidden]{display:none!important}

.login-card{background:#fff;border:1px solid #b9d3c7;border-radius:22px;padding:clamp(20px,5vw,32px);max-width:520px;margin:28px auto;display:grid;gap:14px}.login-card h2{margin:0;font-size:25px}.login-card p{font-size:14px;color:#55665f;margin:0}.login-card label{display:block;min-width:0}.login-card input{width:100%;min-width:0}.login-card button{margin-top:4px}.customer-main .top nav{flex-wrap:wrap;gap:14px}
.staff-row{background:#fff;border:1px solid #b9d3c7;border-radius:14px;padding:16px;margin-top:12px;overflow-wrap:anywhere}#teamLoginScreen .privacy{max-width:520px;margin-inline:auto}#teamLogin button:not([type=submit]){background:#edf5ef;color:#176342}#teamPanel[hidden],#teamLoginScreen[hidden]{display:none!important}

/* Private appointment ticket: visual status with optional practical details. */
.appointment-portal .customer-main{max-width:880px}.portal-intro{color:#55665f}.appointment-ticket{padding:0;overflow:hidden;display:grid;grid-template-columns:240px minmax(0,1fr);animation:ticket-enter .5s ease-out}.ticket-content{padding:30px}.ticket-content h2{font-size:26px;line-height:1.25;overflow-wrap:anywhere;margin:14px 0 8px}.state-hint{color:#55665f;font-size:14px;margin:0 0 22px}.appointment-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px;background:#edf6ef;overflow:hidden}.calendar-art{z-index:1;position:relative;width:142px;min-height:166px;background:white;border:2px solid #b9d3c7;border-radius:22px;box-shadow:0 16px 0 #d2e6d9,0 24px 35px #263d3420;text-align:center;transform:rotate(-6deg);animation:calendar-float 5s ease-in-out infinite}.calendar-top{display:block;background:#ed8580;color:#fff;padding:17px 6px 10px;border-radius:19px 19px 0 0;font-size:12px;font-weight:750;letter-spacing:2px}.calendar-art strong{display:block;font-size:58px;line-height:1.15;padding-top:8px}.calendar-art>span:last-of-type:not(.calendar-mark){text-transform:uppercase;font-size:13px}.calendar-rings:before,.calendar-rings:after{content:'';position:absolute;top:-9px;width:9px;height:23px;background:#29463a;border:3px solid white;border-radius:9px}.calendar-rings:before{left:30px}.calendar-rings:after{right:30px}.calendar-mark{position:absolute;right:-19px;bottom:-10px;width:47px;height:47px;border:4px solid white;border-radius:50%;background:#21885d;color:white;display:grid;place-items:center;font-size:28px;font-weight:700}.orbit{position:absolute;width:230px;height:230px;border:1px dashed #b9d3c7;border-radius:50%}.orbit-two{width:310px;height:310px;opacity:.5}.visual-spark{position:absolute;color:#ed8580;font-size:30px;animation:spark-breathe 3s ease-in-out infinite}.spark-one{top:19%;left:15%}.spark-two{bottom:17%;right:13%;font-size:19px;animation-delay:1s}.appointment-when{padding:17px 0;border-block:1px dashed #b9d3c7;display:grid;gap:4px}.appointment-when p{margin:0;font-size:15px}.appointment-when strong{font-size:34px;line-height:1.3}.appointment-when small{color:#55665f;font-size:12px}.appointment-response h3{font-size:14px;margin:22px 0 8px}.appointment-response p{margin:0;font-size:15px}.appointment-details{margin:22px 0;font-size:13px;color:#55665f}.appointment-details summary{cursor:pointer;font-weight:650;min-height:32px}.appointment-details p{line-height:1.6}.appointment-ticket[data-state=pending] .calendar-mark{background:#b17a22}.appointment-ticket[data-state=cancelled] .calendar-mark{background:#b04459}.appointment-ticket[data-state=cancelled] .calendar-top{background:#ad7b87}.appointment-ticket[data-state=cancelled] .appointment-visual{background:#f7eef0}#customerStatus{font-size:13px;color:#55665f;min-height:20px}#customerStatus.is-loading:before{content:'';display:inline-block;width:12px;height:12px;border:2px solid #b9d3c7;border-top-color:#21885d;border-radius:50%;margin-right:9px;vertical-align:-2px;animation:status-spin .8s linear infinite}
@keyframes calendar-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(-2deg)}}@keyframes spark-breathe{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}@keyframes ticket-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes status-spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.appointment-ticket{grid-template-columns:1fr}.appointment-visual{min-height:210px}.calendar-art{width:120px;min-height:146px}.calendar-art strong{font-size:46px}.calendar-top{padding-top:13px}.ticket-content{padding:24px 20px}.ticket-content h2{font-size:23px}.spark-one{left:22%;top:25%}.spark-two{right:22%;bottom:25%}.appointment-when strong{font-size:30px}}
@media(prefers-reduced-motion:reduce){.appointment-ticket,.calendar-art,.visual-spark,#customerStatus.is-loading:before{animation:none}}

/* Administrative cards animate in place; routine polling does not replay entrances. */
.admin-appointment{position:relative;isolation:isolate;border-top:4px solid #eac364;transition:border-color .25s,box-shadow .25s}.admin-appointment[data-state=confirmed]{border-top-color:#63aa83}.admin-appointment[data-state=cancelled]{border-top-color:#d89aa8}.admin-appointment h2{padding-right:68px;overflow-wrap:anywhere}.admin-card-visual{position:absolute;right:24px;top:23px;width:58px;height:68px;pointer-events:none}.admin-mini-calendar{display:grid;width:48px;text-align:center;background:#f0f7f2;border:1px solid #bfd8ca;border-radius:11px;overflow:hidden;box-shadow:0 4px 0 #e4efe8}.admin-mini-calendar small{font-size:9px;background:#ed8580;color:#fff;letter-spacing:1px;text-transform:uppercase;padding:2px}.admin-mini-calendar strong{font-size:25px;line-height:1.35}.admin-state-mark{position:absolute;bottom:0;right:0;background:#b08428;color:#fff;border:3px solid #fff;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;font-size:16px;font-weight:700}.admin-appointment[data-state=confirmed] .admin-state-mark{background:#21885d}.admin-appointment[data-state=cancelled] .admin-state-mark{background:#ad5268}.appointment-arrived{animation:admin-card-appear .45s ease-out both}.appointment-arrived .admin-state-mark{animation:admin-state-pop .4s .2s ease-out both}.appointment-arrived[data-state=pending] .badge{animation:admin-pending-glow 1.3s .4s ease-in-out 3}.appointment-changed{animation:admin-card-highlight 1s ease-out}.appointment-changed .admin-state-mark{animation:admin-state-pop .45s ease-out}.appointment-saving:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:18px;background:linear-gradient(110deg,transparent 20%,#dcebe466 45%,transparent 70%);background-size:200% 100%;animation:admin-saving 1.2s linear infinite}.appointment-saving .actions button:disabled:after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid #ffffff70;border-top-color:currentColor;border-radius:50%;animation:status-spin .7s linear infinite}.admin-appointment .actions button{transition:background-color .2s,box-shadow .2s}.admin-appointment .actions button:hover{box-shadow:0 0 0 3px #21885d22}.admin-appointment .customer-controls[open]{animation:admin-card-appear .2s ease-out}
@keyframes admin-card-appear{from{opacity:0}to{opacity:1}}@keyframes admin-state-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes admin-pending-glow{0%,100%{box-shadow:0 0 0 0 #eac36400}50%{box-shadow:0 0 0 5px #eac36430}}@keyframes admin-card-highlight{0%{box-shadow:0 0 0 4px #63aa8380}100%{box-shadow:0 0 0 0 #63aa8300}}@keyframes admin-saving{to{background-position:-200% 0}}
@media(max-width:500px){.admin-card-visual{right:18px;top:20px}.admin-appointment h2{padding-right:62px}}
@media(prefers-reduced-motion:reduce){.admin-appointment,.admin-appointment .badge,.admin-appointment .admin-state-mark,.admin-appointment .customer-controls,.appointment-saving:after,.appointment-saving .actions button:disabled:after{animation:none!important;transition:none}}

/* Quiet appointment feedback and compact public reference. */
.admin-appointment h2{padding-right:0}.admin-appointment .ref{font-size:11px;line-height:1.4;margin:7px 0;color:#68796f}.admin-appointment.appointment-arrived{animation:admin-card-appear .25s ease-out}.admin-appointment.appointment-arrived[data-state=pending] .badge{animation:none}.admin-appointment.appointment-changed{animation:admin-card-appear .3s ease-out}.admin-appointment .actions button:hover{box-shadow:none}.admin-appointment.appointment-saving:after{display:none}

/* Small, stationary dental accents; only clock hands and enamel sparkle animate. */
.admin-appointment>.badge{display:inline-flex;align-items:center;gap:7px}.appointment-clock{display:inline-block;position:relative;width:15px;height:15px;border:1.7px solid currentColor;border-radius:50%;flex:none}.appointment-clock:before,.appointment-clock:after{content:'';position:absolute;left:50%;top:50%;width:1.5px;background:currentColor;border-radius:2px;transform-origin:50% 100%}.appointment-clock:before{height:5px;margin-top:-5px;margin-left:-.75px;animation:appointment-clock-tick 8s linear infinite}.appointment-clock:after{height:3.5px;margin-top:-3.5px;margin-left:-.75px;transform:rotate(110deg)}.appointment-teeth{position:absolute;right:22px;top:20px;width:76px;height:64px;pointer-events:none}.appointment-teeth svg{display:block}.tooth-heal-spark{position:absolute;right:0;top:0;color:#ed8580;font-size:21px;line-height:1;transform-origin:center;animation:tooth-heal-shine 2.8s ease-in-out infinite}.appointment-teeth:after{content:'✧';position:absolute;left:6px;top:5px;font-size:15px;color:#53a07a;animation:tooth-heal-shine 2.8s 1.2s ease-in-out infinite}.admin-appointment[data-state=cancelled] .appointment-teeth{opacity:.5}.admin-appointment[data-state=cancelled] .tooth-heal-spark,.admin-appointment[data-state=cancelled] .appointment-teeth:after{animation:none}.admin-appointment h2{padding-right:60px}
@keyframes appointment-clock-tick{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes tooth-heal-shine{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
@media(max-width:500px){.appointment-teeth{right:16px;width:66px}.appointment-teeth svg{width:64px}.admin-appointment h2{padding-right:50px}}
@media(prefers-reduced-motion:reduce){.appointment-clock:before,.tooth-heal-spark,.appointment-teeth:after{animation:none}}

/* Illustrated appointment records, matching the client's ticket. */
#appointments{grid-template-columns:repeat(auto-fit,minmax(min(100%,490px),1fr));align-items:start}.admin-appointment{padding:0;overflow:hidden;display:grid;grid-template-columns:145px minmax(0,1fr);border-top-width:1px}.admin-ticket-illustration{position:relative;align-self:stretch;min-height:310px;background:#edf6ef;display:flex;align-items:center;justify-content:center;overflow:hidden}.admin-ticket-content{padding:25px;min-width:0}.admin-ticket-content h2{padding:0;margin:16px 0;font-size:23px;line-height:1.25}.admin-ticket-content>p{font-size:14px;line-height:1.5}.admin-booking-when{border-block:1px dashed #bfd8ca;padding:13px 0;margin:14px 0;display:grid;gap:4px}.admin-booking-when p{margin:0;font-size:13px;line-height:1.45}.admin-booking-when strong{font-size:29px;line-height:1.25}.admin-booking-when small{font-size:11px;color:#68796f}.admin-ticket-content .actions{gap:7px}.admin-ticket-content .actions button{font-size:12px;padding:10px 12px;min-height:40px}.admin-ticket-content .customer-controls summary{font-size:13px}.admin-ticket-content .customer-controls input,.admin-ticket-content .customer-controls textarea{width:100%;min-width:0}.admin-ticket-content .ref{font-size:10px}.admin-ticket-illustration .calendar-art{width:97px;min-height:124px;transform:rotate(-5deg);animation:admin-calendar-light 4s ease-in-out infinite}.admin-ticket-illustration .calendar-top{font-size:9px;padding:13px 3px 7px;letter-spacing:1px}.admin-ticket-illustration .calendar-art strong{font-size:44px}.admin-ticket-illustration .calendar-art>span:not([class]){font-size:11px;text-transform:uppercase}.admin-ticket-illustration .calendar-mark{width:33px;height:33px;right:-9px;bottom:-9px;font-size:22px;border-width:3px}.admin-ticket-illustration .calendar-rings:before{left:19px}.admin-ticket-illustration .calendar-rings:after{right:19px}.admin-ticket-illustration .calendar-rings:before,.admin-ticket-illustration .calendar-rings:after{width:7px;height:19px;top:-7px;border-width:2px}.admin-ticket-orbit{position:absolute;width:180px;height:180px;border:1px dashed #b9d3c7;border-radius:50%;box-shadow:0 0 0 24px #dcebe433}.admin-ticket-illustration .appointment-teeth{right:auto;top:auto;left:34px;bottom:24px;transform:scale(.8);transform-origin:center bottom}.admin-ticket-spark{position:absolute;top:23%;left:15%;color:#ed8580;font-size:22px;animation:tooth-heal-shine 3s ease-in-out infinite}.admin-appointment[data-state=cancelled] .admin-ticket-illustration{background:#f7eef0}.admin-appointment[data-state=cancelled] .calendar-top{background:#b88591}.admin-appointment[data-state=cancelled] .calendar-mark{background:#ad5268}.admin-appointment[data-state=pending] .calendar-mark{background:#b08428}.admin-appointment[data-state=cancelled] .calendar-art{animation:none}.admin-ticket-content .actions button:first-child{flex-basis:100%;background:#eff6f1;color:#216c50}.admin-ticket-content .customer-controls{margin-top:16px}
@keyframes admin-calendar-light{0%,100%{box-shadow:0 9px 0 #d2e6d9,0 15px 22px #263d3410}50%{box-shadow:0 9px 0 #d2e6d9,0 15px 27px #263d3429}}
@media(max-width:600px){.admin-appointment{grid-template-columns:100px minmax(0,1fr)}.admin-ticket-content{padding:20px 15px}.admin-ticket-content h2{font-size:21px}.admin-ticket-illustration .calendar-art{width:75px;min-height:105px}.admin-ticket-illustration .calendar-art strong{font-size:34px}.admin-ticket-illustration .calendar-top{font-size:8px}.admin-ticket-illustration .calendar-rings:before{left:13px}.admin-ticket-illustration .calendar-rings:after{right:13px}.admin-ticket-illustration .appointment-teeth{left:10px;transform:scale(.7)}.admin-booking-when strong{font-size:25px}.admin-ticket-content .actions button{flex:1;min-width:75px}.admin-ticket-illustration .calendar-mark{right:-4px}}
@media(max-width:350px){.admin-appointment{grid-template-columns:1fr}.admin-ticket-illustration{min-height:155px}.admin-ticket-illustration .appointment-teeth{left:18px;bottom:14px}.admin-ticket-content{padding:18px}}
@media(prefers-reduced-motion:reduce){.admin-ticket-illustration .calendar-art,.admin-ticket-spark{animation:none}}

.trash-toggle{background:#f4f8f5;color:#53675b;border:1px solid #b9d3c7;margin:0 0 15px;font-size:13px}.admin-ticket-content .actions .delete-record{background:#fff4f5;color:#9b394d;border:1px solid #e5bdc6;flex-basis:auto}

.customer-entry{max-width:520px;margin:28px auto;padding:32px 28px;background:#fff;border:1px solid #b9d3c7;border-radius:26px;text-align:center;animation:admin-card-appear .35s ease-out}.entry-art{position:relative;display:grid;place-items:center;width:150px;height:116px;margin:0 auto 15px;background:radial-gradient(ellipse,#e7f4eb,transparent 70%)}.entry-link-icon{display:grid;place-items:center;width:70px;height:70px;border:2px solid #bed9c9;border-radius:22px;background:#edf7f0;color:#21885d;font-size:47px;line-height:1;box-shadow:0 7px 0 #d8ebe0;animation:entry-link-shine 3s ease-in-out infinite}.entry-art img{position:absolute;right:7px;bottom:0;border:4px solid white;border-radius:18px}.entry-spark{position:absolute;left:10px;top:3px;font-size:24px;color:#ed8580;animation:tooth-heal-shine 2.8s ease-in-out infinite}.customer-entry h2{font-size:29px;line-height:1.2;margin:0 0 13px}.customer-entry>p{font-size:15px;line-height:1.65;color:#55665f;margin:0 0 23px}.entry-whatsapp{display:block;padding:15px 18px;background:#21885d;border-radius:14px;color:white;text-decoration:none;font-weight:650;font-size:15px}.entry-whatsapp:hover{background:#196d4a}.entry-alternative{margin-top:24px;text-align:left;border-top:1px solid #e1ece5;padding-top:16px}.entry-alternative>summary{text-align:center;color:#55665f;font-size:13px;cursor:pointer;padding:5px}.entry-alternative .login-card{margin:18px 0 0;border:0;padding:0;border-radius:0}.entry-alternative[open] .login-card{animation:admin-card-appear .25s ease-out}.appointment-portal .appointment-ticket{animation:admin-card-appear .4s ease-out}.appointment-portal .calendar-art{animation:entry-link-shine 4s ease-in-out infinite;transform:rotate(-5deg)}
@keyframes entry-link-shine{0%,100%{box-shadow:0 7px 0 #d8ebe0,0 0 0 0 #d8ebe000}50%{box-shadow:0 7px 0 #d8ebe0,0 0 0 9px #d8ebe044}}
@media(max-width:500px){.customer-entry{padding:25px 20px}.customer-entry h2{font-size:26px}.customer-entry>p{font-size:14px}.entry-whatsapp{font-size:14px}}
@media(prefers-reduced-motion:reduce){.customer-entry,.entry-link-icon,.entry-spark,.entry-alternative[open] .login-card,.appointment-portal .appointment-ticket,.appointment-portal .calendar-art{animation:none}}

.entry-direct .login-card{margin:18px 0 0;padding:0;border:0;text-align:left;border-radius:0}.entry-direct>p{margin-bottom:12px}.entry-direct .entry-art{height:85px;margin-bottom:12px}.entry-direct .entry-link-icon{width:60px;height:60px;font-size:35px}.entry-direct h2{font-size:27px}.entry-direct .entry-art img{width:40px;height:40px}.entry-direct .login-card button{margin-top:8px}