:root{--teal:#073f3d;--gold:#d9a52e;--bg:#f5f7f6;--surface:#fff;--text:#172725;--muted:#697875;--line:#e1e8e5;--shadow:0 22px 65px rgba(7,63,61,.09)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;min-height:100vh}.topbar{height:82px;padding:0 max(5vw,22px);display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}.brand img{width:54px;height:54px;object-fit:contain}.brand span{display:grid;gap:3px}.brand b{font-size:16px;letter-spacing:.02em}.brand small{font-size:9px;letter-spacing:.19em;color:var(--muted)}.header-actions{display:flex;gap:10px;align-items:center}.theme-btn,.admin-btn{height:40px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 15px;text-decoration:none;display:grid;place-items:center;font-weight:650}.admin-btn{background:var(--teal);color:#fff;border-color:var(--teal)}main{width:min(920px,90%);margin:56px auto 44px}.welcome-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,5vw,54px);box-shadow:var(--shadow);text-align:center}.eyebrow,.section-label,.contact small{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--gold)}h1{font-size:clamp(28px,5vw,44px);line-height:1.2;max-width:700px;margin:17px auto 14px;color:var(--teal)}h1 span{display:block}.intro{font-size:16px;line-height:1.7;color:var(--muted);max-width:610px;margin:0 auto 30px}.lookup-form{text-align:left;max-width:650px;margin:auto}.lookup-form label{display:block;font-size:13px;font-weight:700;margin-bottom:9px}.phone-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:7px;border-radius:12px;background:var(--bg)}.phone-icon{padding-left:12px;color:var(--gold);font-size:20px}.phone-row input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:15px;padding:12px 4px}.phone-row button{border:0;border-radius:8px;background:var(--gold);color:#1c211d;font-weight:800;padding:14px 20px;cursor:pointer}.form-message{font-size:12px;color:var(--muted);margin:12px 2px}.privacy{margin:20px auto 0;color:var(--muted);font-size:12px}.privacy span{color:var(--gold);margin-right:6px}.ad-section{margin:35px 0}.section-label{display:flex;justify-content:space-between;margin:0 3px 12px}.section-label i{font-style:normal;color:var(--muted);font-size:9px}.ad-card{display:grid;grid-template-columns:34% 1fr;min-height:190px;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;background:var(--teal);box-shadow:var(--shadow)}.ad-art{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(140deg,#052f2d,#0b514c)}.ad-orbit{position:absolute;width:210px;height:210px;border:1px solid rgba(217,165,46,.35);border-radius:50%;box-shadow:0 0 0 22px rgba(217,165,46,.05),0 0 0 48px rgba(217,165,46,.04)}.ad-mark{position:relative;color:var(--gold);font-family:Georgia,serif;font-size:86px}.ad-mark span{font-size:22px;vertical-align:top}.ad-copy{padding:30px 36px;color:#fff}.ad-copy small{font-size:9px;letter-spacing:.2em;color:var(--gold)}.ad-copy h2{font-size:24px;margin:10px 0}.ad-copy p{color:#d1dfdc;font-size:13px}.ad-cta{display:inline-block;margin-top:9px;color:var(--gold);font-weight:750;font-size:12px}.ad-note{font-size:11px;color:var(--muted);margin:9px 3px}.contact{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 30px;background:#e9efec;border-radius:16px}.contact h2{font-size:22px;color:var(--teal);margin:8px 0}.contact p{margin:0;color:var(--muted);font-size:13px}.contact-actions{display:grid;gap:10px;text-align:right}.whatsapp{background:var(--teal);color:white;text-decoration:none;padding:12px 17px;border-radius:8px;font-size:12px;font-weight:750}.email{font-size:12px;color:var(--teal);text-decoration:none}footer{padding:20px 5vw;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}footer a{color:var(--teal);font-weight:700;text-decoration:none}.dark{--bg:#101a19;--surface:#172422;--text:#edf4f1;--muted:#a7b6b1;--line:#2a3c38;--shadow:0 22px 65px rgba(0,0,0,.2)}.dark .contact{background:#1d302c}.dark .contact h2,.dark footer a{color:#e6b94d}.dark .phone-row{background:#101a19}.dark .ad-card{border:1px solid #34514a}@media(max-width:650px){main{margin:28px auto}.topbar{height:70px}.brand img{width:44px;height:44px}.brand b{font-size:14px}.welcome-card{border-radius:16px}.phone-row{flex-wrap:wrap}.phone-row input{flex-basis:calc(100% - 60px)}.phone-row button{width:100%}.ad-card{grid-template-columns:1fr}.ad-art{min-height:125px}.ad-mark{font-size:64px}.ad-copy{padding:23px}.contact{display:grid;padding:23px}.contact-actions{text-align:left}}

.ad-art.has-image{background:#071f1e}.ad-art #publicAdImage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.ad-art.has-image .ad-orbit,.ad-art.has-image .ad-mark{display:none}
/* Advertisement layout controls driven by Admin > Settings */
.ad-card{grid-template-columns:var(--ad-image-width,34%) 1fr;min-height:var(--ad-height,202px)}
.ad-art{min-height:var(--ad-height,202px)}
.ad-art #publicAdImage{object-fit:var(--ad-fit,cover)}
.ad-copy h2{font-size:var(--ad-title-size,24px)}
.ad-copy p{font-size:var(--ad-text-size,13px)}
body.dark .topbar{background:var(--surface);border-color:var(--line)}
body.dark .theme-btn,body.dark .admin-btn{background:var(--surface);color:var(--text);border-color:var(--line)}
body.dark .admin-btn{background:var(--teal);color:#fff;border-color:var(--teal)}

/* Customer self-service profile — premium teal/gold */
.client-private-view{max-width:1120px;margin:48px auto;padding:0 24px;color:var(--ink,#17352e)}
.client-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.client-head h2{font:700 clamp(25px,3vw,36px)/1.2 Arial,sans-serif;margin:8px 0}.client-head p{color:#718078;margin:0;font-size:13px}.client-kicker{font-size:10px;font-weight:900;letter-spacing:2px;color:#a77a20}.client-refresh,.client-invoice-btn{border:0;border-radius:9px;padding:12px 17px;background:#073f3d;color:#fff;font-weight:800;cursor:pointer}.client-profile,.client-about,.client-empty{background:#fff;border:1px solid #e3e9e4;border-radius:18px;padding:24px;margin:16px 0;box-shadow:0 18px 45px #0b2c2410}.client-profile-top{display:grid;grid-template-columns:82px minmax(0,1fr) minmax(210px,.7fr);align-items:center;gap:18px}.client-avatar{width:82px;height:82px;border-radius:18px;object-fit:cover;background:#e8eee9}.client-avatar-fallback{display:grid;place-items:center;background:#073f3d;color:#d9a52e;font-size:34px;font-weight:900}.client-identity h3{font-size:24px;margin:5px 0}.client-identity p{font-size:12px;color:#718078;margin:0 0 9px}.client-status{display:inline-block;padding:6px 11px;border-radius:30px;font-size:10px;font-weight:900;text-transform:uppercase}.is-active{background:#e1f3e8;color:#17643b}.is-inactive{background:#f6edda;color:#88651c}.client-service-highlight{background:#073f3d;color:#fff;border-radius:13px;padding:17px 19px;border-left:4px solid #d9a52e}.client-service-highlight small,.client-service-highlight strong,.client-service-highlight span{display:block}.client-service-highlight small{font-size:9px;letter-spacing:1.5px;color:#e5c879}.client-service-highlight strong{font-size:18px;margin:8px 0}.client-service-highlight span{font-size:11px;color:#c7d8d0}.client-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.client-info-grid>div,.client-timer{padding:13px;background:#f6f8f5;border:1px solid #e8eee9;border-radius:10px;min-width:0}.client-info-grid small,.client-info-grid b,.client-timer small,.client-timer strong,.client-timer span{display:block}.client-info-grid small,.client-timer small{font-size:10px;color:#78857d;margin-bottom:6px}.client-info-grid b{font-size:12px;overflow-wrap:anywhere}.client-media-row{display:flex;gap:16px;flex-wrap:wrap;margin:15px 0}.client-media-row figure{margin:0}.client-media-row img{max-width:150px;max-height:120px;object-fit:contain;border:1px solid #e2e9e3;border-radius:10px;padding:5px}.client-media-row figcaption{font-size:10px;color:#77847c;margin-top:5px}.client-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:16px 0}.client-card{border:1px solid #e5ebe6;border-radius:13px;padding:18px;background:#fff}.client-card h4{font-size:16px;margin:7px 0}.client-card p{font-size:12px;color:#68766e}.client-progress-card{display:grid;grid-template-columns:1fr 120px;align-items:center}.client-progress-card>div:first-child{grid-column:1}.progress-ring{width:112px;height:112px;grid-column:2;grid-row:1/3}.ring-bg{fill:none;stroke:#e8eee9;stroke-width:10}.ring-value{fill:none;stroke:#d9a52e;stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px}.ring-number{font-size:21px;font-weight:900;fill:#073f3d}.ring-label{font-size:8px;letter-spacing:1px;fill:#849087}.client-progress-track,.billing-track{height:8px;background:#e9eee9;border-radius:20px;overflow:hidden;margin:10px 0}.client-progress-track span,.billing-track span{display:block;height:100%;background:linear-gradient(90deg,#073f3d,#d9a52e);border-radius:20px}.client-progress-card>small{grid-column:1/-1;color:#7a867f;font-size:11px}.client-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:15px 0}.client-days span{padding:9px 0;text-align:center;border-radius:7px;background:#f0f3f0;color:#87938b;font-size:10px;font-weight:800}.client-days span.selected{background:#073f3d;color:#f5d37a}.client-next-work{margin:8px 0 0!important}.client-timer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.client-timer strong{font-size:21px;color:#073f3d}.client-timer span{font-size:10px;color:#78857d;line-height:1.5}.timer-warning{border-color:#e3bd67;background:#fff9e9}.timer-warning strong{color:#9b6c13}.client-billing{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;align-items:center}.client-billing h4{margin:6px 0}.balance-due{color:#a04b27!important;font-weight:800}.balance-paid{color:#17643b!important;font-weight:800}.billing-values{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.billing-values small,.billing-values b{display:block}.billing-values small{font-size:10px;color:#7c8981}.billing-values b{font-size:13px;margin-top:5px}.billing-track{grid-column:1/-1}.client-invoice-btn{grid-column:1/-1;justify-self:start;background:#d9a52e;color:#073f3d}.client-about{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}.client-about h3{font-size:23px;margin:8px 0}.client-about p{font-size:13px;line-height:1.8;color:#69766e;white-space:pre-wrap}.client-about-media img,.client-about-media video{width:100%;max-height:280px;object-fit:cover;border-radius:12px}.client-about-placeholder{min-height:160px;border-radius:12px;background:#073f3d;color:#d9a52e;display:grid;place-items:center;font:700 28px Georgia,serif}.client-empty{padding:32px;text-align:center}.reg-photo{width:110px;height:110px;object-fit:cover;border-radius:12px}.reg-signature{max-width:220px;max-height:90px;object-fit:contain;background:#fff;border:1px solid #ddd;border-radius:8px}.service-highlight{padding:15px 18px;background:#073f3d;color:#fff;border-left:4px solid #d9a52e;border-radius:10px;margin:14px 0}.service-highlight span,.service-highlight strong,.service-highlight small{display:block}.service-highlight span{font-size:9px;letter-spacing:1.5px;color:#e6c978}.service-highlight strong{font-size:20px;margin:6px 0}.service-highlight small{color:#c7d8d0}
@media(max-width:760px){.client-private-view{padding:0 14px}.client-profile,.client-about{padding:16px}.client-profile-top{grid-template-columns:65px 1fr}.client-avatar{width:65px;height:65px}.client-service-highlight{grid-column:1/-1}.client-info-grid{grid-template-columns:1fr 1fr}.client-work-grid,.client-about{grid-template-columns:1fr}.client-timer-grid{grid-template-columns:1fr}.client-billing{grid-template-columns:1fr}.billing-values{grid-template-columns:1fr 1fr 1fr}.client-head{align-items:flex-start}.client-progress-card{grid-template-columns:1fr 100px}.progress-ring{width:96px;height:96px}}
body.dark-mode .client-profile,body.dark-mode .client-about,body.dark-mode .client-card,body.dark-mode .client-empty{background:#14231d;color:#e9eee9;border-color:#293a33}body.dark-mode .client-info-grid>div,body.dark-mode .client-timer{background:#0e1a15;border-color:#293a33}body.dark-mode .client-identity p,body.dark-mode .client-about p,body.dark-mode .client-timer span{color:#a4b0a8}

/* Work completion checklist + high-contrast customer billing in both themes */
.work-check{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;padding:8px 11px;border-radius:9px}.work-check input{width:17px;height:17px;accent-color:#16834b}.work-check.checked{background:#e5f6eb;color:#17643b}.work-check.missed{background:#fff0ef;color:#b42318}.work-done-row{background:#f1faf3}.work-missed-row{background:#fff8f7}.work-done-row td,.work-missed-row td{color:#24332d}
.client-billing{background:#fff!important;color:#172b25!important;border:1px solid #d6e1da!important}.client-billing h4,.client-billing .billing-values b{color:#142e26!important}.client-billing .billing-values small{color:#52645b!important}.client-billing .balance-due{color:#a52b22!important}.client-billing .balance-paid{color:#17643b!important}
body.dark .client-billing,body.dark-mode .client-billing,body[data-theme=dark] .client-billing{background:#172722!important;color:#f4f8f5!important;border-color:#40534a!important}.dark .client-billing h4,.dark-mode .client-billing h4,body[data-theme=dark] .client-billing h4,.dark .client-billing .billing-values b,.dark-mode .client-billing .billing-values b,body[data-theme=dark] .client-billing .billing-values b{color:#f4f8f5!important}.dark .client-billing .billing-values small,.dark-mode .client-billing .billing-values small,body[data-theme=dark] .client-billing .billing-values small{color:#c0d0c7!important}.dark .client-billing .balance-due,.dark-mode .client-billing .balance-due,body[data-theme=dark] .client-billing .balance-due{color:#ff9b91!important}.dark .client-billing .balance-paid,.dark-mode .client-billing .balance-paid,body[data-theme=dark] .client-billing .balance-paid{color:#83e0a5!important}
body.dark .work-done-row,body.dark .work-missed-row,body[data-theme=dark] .work-done-row,body[data-theme=dark] .work-missed-row{background:#172722}body.dark .work-done-row td,body.dark .work-missed-row td,body[data-theme=dark] .work-done-row td,body[data-theme=dark] .work-missed-row td{color:#eef5f0}

/* Work completion history */
.client-work-history{margin-top:18px;padding:18px;border:1px solid var(--line,#dce5e1);border-radius:14px;background:var(--card,#fff);color:var(--text,#172321)}
.client-work-history h4{margin:0 0 12px;font-size:16px}
.client-work-history .table-wrap{overflow-x:auto}
.client-work-history table{width:100%;border-collapse:collapse;min-width:520px}
.client-work-history th,.client-work-history td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line,#dce5e1);font-size:13px}
.client-work-history th{font-weight:700;color:var(--muted,#64736f)}

/* Customer portal analytics: responsive payment/work trends and day calendar */
.client-chart-card,.client-calendar-card{margin:16px 0;animation:clientRise .55s ease both}.client-chart-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.client-chart-heading h4{font-size:17px;margin:5px 0 0}.client-chart-note{font-size:10px;color:#78857d;background:#f1f5f2;border-radius:30px;padding:7px 10px}.client-svg-wrap{width:100%;overflow:hidden;color:#78857d}.client-svg-wrap svg{display:block;width:100%;height:auto;min-height:150px}.chart-empty{padding:22px 14px;border-radius:10px;background:#f5f7f5;color:#75827a;font-size:12px;text-align:center}.client-mini-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.client-mini-calendar>span{min-height:37px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800}.client-mini-calendar .mini-week{color:#76837b;background:transparent;min-height:25px}.client-mini-calendar .mini-blank{background:transparent}.client-mini-calendar .mini-day{background:#eef1ef;color:#65726a}.client-mini-calendar .mini-day.done{background:#dff4e6;color:#176b3a}.client-mini-calendar .mini-day.missed{background:#ffebe9;color:#b42318}.client-mini-calendar .mini-day.upcoming{background:#e8f1ff;color:#245da8}.client-mini-calendar .mini-day.off{background:#f0f2f3;color:#75818a}.client-calendar-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.client-calendar-legend span{font-size:10px;font-weight:800;padding:6px 9px;border-radius:30px}.client-calendar-legend .done{background:#dff4e6;color:#176b3a}.client-calendar-legend .missed{background:#ffebe9;color:#b42318}.client-calendar-legend .upcoming{background:#e8f1ff;color:#245da8}.client-calendar-legend .off{background:#f0f2f3;color:#68737d}.client-history-list{display:grid;gap:0}.client-history-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #e7ece8}.client-history-item:last-child{border-bottom:0}.client-history-item .history-dot{width:10px;height:10px;border-radius:50%;background:#16834b;box-shadow:0 0 0 5px #e1f3e8;flex:none}.client-history-item div{display:grid;gap:4px;flex:1}.client-history-item b{font-size:12px}.client-history-item small{font-size:10px;color:#78857d}.client-history-item strong{font-size:10px;color:#176b3a}.form-message.is-error{color:#d14b42}.client-empty{animation:clientRise .4s ease both}.client-profile{animation:clientRise .55s ease both}.client-profile:nth-of-type(2){animation-delay:.08s}.client-profile:nth-of-type(3){animation-delay:.16s}@keyframes clientRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
body.dark .client-chart-note,body.dark-mode .client-chart-note{background:#20332c;color:#bdc9c1}body.dark .chart-empty,body.dark-mode .chart-empty{background:#102019;color:#afbbb3}body.dark .client-mini-calendar .mini-day.off,body.dark-mode .client-mini-calendar .mini-day.off{background:#263238;color:#c4cdd1}body.dark .client-mini-calendar .mini-day.done,body.dark-mode .client-mini-calendar .mini-day.done{background:#153b2a;color:#a8e6bb}body.dark .client-mini-calendar .mini-day.missed,body.dark-mode .client-mini-calendar .mini-day.missed{background:#452321;color:#ffb7af}body.dark .client-mini-calendar .mini-day.upcoming,body.dark-mode .client-mini-calendar .mini-day.upcoming{background:#1c3451;color:#b7d3ff}
@media(max-width:700px){.client-chart-heading{align-items:flex-start;flex-direction:column}.client-mini-calendar{gap:4px}.client-mini-calendar>span{min-height:33px}.client-history-item{align-items:flex-start}}

/* MUFAKIR DESIGNS — cinematic visual layer (public site, admin workspace and customer portal) */
:root{--cinema-gold:#e2b54b;--cinema-teal:#0a514b;--cinema-glow:rgba(226,181,75,.22)}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{isolation:isolate;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-35%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 12% 18%,rgba(17,112,99,.10),transparent 34%),radial-gradient(ellipse at 88% 12%,rgba(226,181,75,.10),transparent 29%),radial-gradient(ellipse at 72% 86%,rgba(21,94,82,.08),transparent 34%);animation:cinemaAmbient 22s ease-in-out infinite alternate}
@keyframes cinemaAmbient{0%{transform:translate3d(-1.5%,0,0) scale(1);filter:hue-rotate(0)}100%{transform:translate3d(1.5%,1%,0) scale(1.06);filter:hue-rotate(12deg)}}
/* Soft moving light across the main brand surfaces */
.hero,.register,.login-wrap,.sidebar,.agreement-pro,.agreement-card,.client-profile,.welcome-card,.ad-card{position:relative;isolation:isolate;overflow:hidden}
.hero:before,.register:before,.login-wrap:before,.sidebar:before,.agreement-pro:before,.agreement-card:before,.client-profile:before,.welcome-card:before,.ad-card:before{content:"";position:absolute;inset:-60% -80%;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 37%,rgba(255,255,255,.045) 45%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.045) 55%,transparent 63%);transform:translateX(-55%) rotate(8deg);animation:cinemaSweep 13s ease-in-out infinite}
@keyframes cinemaSweep{0%,22%{transform:translateX(-60%) rotate(8deg)}72%,100%{transform:translateX(60%) rotate(8deg)}}
/* Entrance motion */
.hero-copy,.hero-art,.section-head,.service-card,.steps>div,.register-copy,.register-form,.welcome-card,.ad-card,.contact,.login-card,.stat,.panel,.client-profile,.client-card,.client-chart-card,.client-calendar-card,.client-about{animation:cinemaRise .72s cubic-bezier(.2,.72,.25,1) both}
.hero-art{animation-delay:.12s}.service-card:nth-child(2),.steps>div:nth-child(2){animation-delay:.07s}.service-card:nth-child(3),.steps>div:nth-child(3){animation-delay:.14s}.service-card:nth-child(4),.steps>div:nth-child(4){animation-delay:.21s}
@keyframes cinemaRise{from{opacity:0;transform:translate3d(0,22px,0) scale(.99);filter:blur(3px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
/* Glass edges, cinematic highlights and responsive interaction */
.service-card,.stat,.panel,.method-card,.client-card,.client-profile,.client-about,.welcome-card,.register-form,.login-card,.agreement-pro,.agreement-card{border:1px solid rgba(145,166,153,.22);box-shadow:0 16px 42px rgba(7,42,35,.08),inset 0 1px 0 rgba(255,255,255,.48);transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s,border-color .38s,background .38s}
.service-card:hover,.stat:hover,.panel:hover,.method-card:hover,.client-card:hover,.client-profile:hover,.client-about:hover,.welcome-card:hover,.register-form:hover,.login-card:hover,.agreement-pro:hover,.agreement-card:hover{transform:translateY(-5px);border-color:rgba(226,181,75,.55);box-shadow:0 25px 65px rgba(7,42,35,.15),0 0 0 1px rgba(226,181,75,.10),0 0 32px var(--cinema-glow)}
.btn,.btn-gold,.btn-outline,.whatsapp,.phone-row button,.nav-link,.icon-btn,.theme-btn,.admin-btn{position:relative;overflow:hidden;transition:transform .25s,box-shadow .3s,filter .3s}
.btn:after,.btn-gold:after,.whatsapp:after,.phone-row button:after,.admin-btn:after{content:"";position:absolute;top:-80%;bottom:-80%;left:-55%;width:32%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:left .65s ease;pointer-events:none}
.btn:hover:after,.btn-gold:hover:after,.whatsapp:hover:after,.phone-row button:hover:after,.admin-btn:hover:after{left:130%}
.btn:hover,.btn-gold:hover,.btn-outline:hover,.whatsapp:hover,.phone-row button:hover,.nav-link:hover,.icon-btn:hover,.theme-btn:hover,.admin-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(7,63,61,.18),0 0 18px rgba(226,181,75,.16)}
/* Hero and brand artwork */
.hero{background-image:radial-gradient(ellipse at 76% 30%,rgba(226,181,75,.17),transparent 34%),linear-gradient(115deg,#052e2b,#0a514b 62%,#123c35)}
.preview,.floating-note,.hero-art .orb{will-change:transform}.preview{box-shadow:0 35px 100px rgba(0,0,0,.38),0 0 35px rgba(226,181,75,.12)}
.orb-one{animation:cinemaPulse 8s ease-in-out infinite alternate}.orb-two{animation:cinemaOrbit 24s linear infinite}
@keyframes cinemaPulse{from{transform:scale(.92);opacity:.65}to{transform:scale(1.12);opacity:1}}
@keyframes cinemaOrbit{to{transform:rotate(360deg)}}
.ad-art img,.client-about-media img,.client-about-media video{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}.ad-card:hover .ad-art img,.client-about-media:hover img{transform:scale(1.055);filter:saturate(1.12) contrast(1.04)}
/* Chart line draw-in */
.trend-line,.client-svg-wrap svg polyline,.client-svg-wrap svg path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:cinemaDraw 2.2s .25s ease forwards}
@keyframes cinemaDraw{to{stroke-dashoffset:0}}
.trend-point{animation:cinemaPoint .45s ease both;transform-box:fill-box;transform-origin:center}
@keyframes cinemaPoint{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
/* Admin navigation and portal sections */
.sidebar{box-shadow:12px 0 42px rgba(4,32,27,.12)}.nav-link{transition:background .25s,color .25s,transform .25s,padding .25s}.nav-link:hover{padding-left:17px}.topbar,.header,.topbar{backdrop-filter:blur(16px)}
.client-chart-card,.client-calendar-card{box-shadow:0 14px 38px rgba(7,63,61,.08)}
/* Scrollbar polish */
*{scrollbar-width:thin;scrollbar-color:rgba(13,91,80,.42) transparent}*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-thumb{background:linear-gradient(var(--cinema-teal),var(--cinema-gold));border-radius:20px;border:2px solid transparent;background-clip:padding-box}
/* Keep motion accessible */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transform:none!important}}

.client-expiry-reminder{position:relative;margin:14px 0;padding:16px 48px 16px 18px;border:1px solid #d9a52e;border-left:5px solid #d9a52e;border-radius:12px;background:#fff6df;color:#483615}.client-expiry-reminder p{line-height:1.65;margin:8px 0}.client-expiry-reminder>button{cursor:pointer;border:0;border-radius:7px;padding:8px 12px}.client-expiry-reminder>button:first-child{position:absolute;right:10px;top:8px;background:transparent;font-size:22px}.client-expiry-reminder>button:last-of-type{background:#073f3d;color:#fff}.client-profile-media-footer{margin-top:18px}.client-profile-media-footer .client-media-row img{max-width:220px;max-height:220px;object-fit:contain;cursor:zoom-in}body.dark .client-expiry-reminder,body[data-theme=dark] .client-expiry-reminder{background:#332b17;color:#ffe6a3;border-color:#9a742b}
/* Customer portal dark theme: enforce readable contrast across every profile section */
body.dark-mode .client-private-view,
body.dark .client-private-view,
body[data-theme="dark"] .client-private-view{color:#edf5ef!important}
body.dark-mode .client-profile,
body.dark .client-profile,
body[data-theme="dark"] .client-profile,
body.dark-mode .client-card,
body.dark .client-card,
body[data-theme="dark"] .client-card,
body.dark-mode .client-about,
body.dark .client-about,
body[data-theme="dark"] .client-about,
body.dark-mode .client-chart-card,
body.dark .client-chart-card,
body[data-theme="dark"] .client-chart-card,
body.dark-mode .client-calendar-card,
body.dark .client-calendar-card,
body[data-theme="dark"] .client-calendar-card{
  background:#14251e!important;color:#edf5ef!important;border-color:#344a3e!important;
}
body.dark-mode .client-profile :is(h1,h2,h3,h4,h5,b,strong,label,th,td,p,small,span,figcaption),
body.dark .client-profile :is(h1,h2,h3,h4,h5,b,strong,label,th,td,p,small,span,figcaption),
body[data-theme="dark"] .client-profile :is(h1,h2,h3,h4,h5,b,strong,label,th,td,p,small,span,figcaption),
body.dark-mode .client-about :is(h1,h2,h3,h4,h5,b,strong,label,th,td,p,small,span),
body.dark .client-about :is(h1,h2,h3,h4,h5,b,strong,label,th,td,p,small,span),
body[data-theme="dark"] .client-about :is(h1,h2,h3,h4,h5,b,strong,label,th,td,p,small,span){
  color:#edf5ef!important;
}
body.dark-mode .client-info-grid>div,
body.dark .client-info-grid>div,
body[data-theme="dark"] .client-info-grid>div,
body.dark-mode .client-progress-card,
body.dark .client-progress-card,
body[data-theme="dark"] .client-progress-card,
body.dark-mode .client-working-card,
body.dark .client-working-card,
body[data-theme="dark"] .client-working-card,
body.dark-mode .client-stat-card,
body.dark .client-stat-card,
body[data-theme="dark"] .client-stat-card{
  background:#1b3027!important;color:#edf5ef!important;border-color:#3a5145!important;
}
body.dark-mode .client-profile :is(.muted,.client-identity p,.client-service-highlight small,.client-info-grid small,.client-progress-card p,.client-chart-note,.client-history-item small),
body.dark .client-profile :is(.muted,.client-identity p,.client-service-highlight small,.client-info-grid small,.client-progress-card p,.client-chart-note,.client-history-item small),
body[data-theme="dark"] .client-profile :is(.muted,.client-identity p,.client-service-highlight small,.client-info-grid small,.client-progress-card p,.client-chart-note,.client-history-item small){
  color:#bdcfc4!important;
}
body.dark-mode .client-service-highlight,
body.dark .client-service-highlight,
body[data-theme="dark"] .client-service-highlight{background:#073f3b!important;color:#fff!important}
body.dark-mode .client-service-highlight *,
body.dark .client-service-highlight *,
body[data-theme="dark"] .client-service-highlight *{color:#fff!important}
body.dark-mode .client-mini-calendar .mini-day,
body.dark .client-mini-calendar .mini-day,
body[data-theme="dark"] .client-mini-calendar .mini-day{background:#25382f!important;color:#e3eee7!important}
body.dark-mode .client-mini-calendar .mini-day.done,
body.dark .client-mini-calendar .mini-day.done,
body[data-theme="dark"] .client-mini-calendar .mini-day.done{background:#174b31!important;color:#b8f0c8!important}
body.dark-mode .client-mini-calendar .mini-day.missed,
body.dark .client-mini-calendar .mini-day.missed,
body[data-theme="dark"] .client-mini-calendar .mini-day.missed{background:#512c2a!important;color:#ffd0ca!important}
body.dark-mode .client-mini-calendar .mini-day.upcoming,
body.dark .client-mini-calendar .mini-day.upcoming,
body[data-theme="dark"] .client-mini-calendar .mini-day.upcoming{background:#203d5c!important;color:#d1e3ff!important}
body.dark-mode .client-profile table td,
body.dark .client-profile table td,
body[data-theme="dark"] .client-profile table td{color:#edf5ef!important}
body.dark-mode .client-profile .client-media-row figcaption,
body.dark .client-profile .client-media-row figcaption,
body[data-theme="dark"] .client-profile .client-media-row figcaption{color:#bdcfc4!important}

/* Customer profile: high-contrast status pills in dark mode */
body.dark-mode .client-status.is-active,
body.dark .client-status.is-active,
body[data-theme="dark"] .client-status.is-active{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:28px!important;padding:6px 13px!important;border-radius:999px!important;
  background:#b8f2cf!important;color:#064b2a!important;border:1px solid #62c98b!important;
  font-weight:900!important;letter-spacing:.02em!important;opacity:1!important;
}
body.dark-mode .client-status.is-inactive,
body.dark .client-status.is-inactive,
body[data-theme="dark"] .client-status.is-inactive{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:28px!important;padding:6px 13px!important;border-radius:999px!important;
  background:#ffd6d2!important;color:#78231c!important;border:1px solid #ef8f85!important;
  font-weight:900!important;opacity:1!important;
}

/* Dark-mode contrast repair for remaining pale/white customer dashboard cards */
body.dark-mode .client-timer,
body.dark .client-timer,
body[data-theme="dark"] .client-timer,
body.dark-mode .client-info-grid>div,
body.dark .client-info-grid>div,
body[data-theme="dark"] .client-info-grid>div,
body.dark-mode .client-chart-note,
body.dark .client-chart-note,
body[data-theme="dark"] .client-chart-note,
body.dark-mode .client-svg-wrap,
body.dark .client-svg-wrap,
body[data-theme="dark"] .client-svg-wrap,
body.dark-mode .client-calendar-grid,
body.dark .client-calendar-grid,
body[data-theme="dark"] .client-calendar-grid,
body.dark-mode .client-work-history,
body.dark .client-work-history,
body[data-theme="dark"] .client-work-history{
  background:#1b3027!important;
  color:#edf5ef!important;
  border-color:#3a5145!important;
}
body.dark-mode .client-timer :is(small,strong,span),
body.dark .client-timer :is(small,strong,span),
body[data-theme="dark"] .client-timer :is(small,strong,span),
body.dark-mode .client-info-grid :is(small,b),
body.dark .client-info-grid :is(small,b),
body[data-theme="dark"] .client-info-grid :is(small,b){
  color:#edf5ef!important;
}
body.dark-mode .client-timer small,
body.dark .client-timer small,
body[data-theme="dark"] .client-timer small,
body.dark-mode .client-timer span,
body.dark .client-timer span,
body[data-theme="dark"] .client-timer span,
body.dark-mode .client-info-grid small,
body.dark .client-info-grid small,
body[data-theme="dark"] .client-info-grid small{
  color:#bdcfc4!important;
}
body.dark-mode .client-timer strong,
body.dark .client-timer strong,
body[data-theme="dark"] .client-timer strong{color:#f3d27a!important}
body.dark-mode .client-days span:not(.selected),
body.dark .client-days span:not(.selected),
body[data-theme="dark"] .client-days span:not(.selected){
  background:#263b31!important;color:#d7e4dc!important;border:1px solid #3b5145!important;
}
body.dark-mode .client-days span.selected,
body.dark .client-days span.selected,
body[data-theme="dark"] .client-days span.selected{
  background:#07524b!important;color:#ffe08a!important;border:1px solid #d9a52e!important;
}
body.dark-mode .client-chart-note,
body.dark .client-chart-note,
body[data-theme="dark"] .client-chart-note{background:#263b31!important;color:#d7e4dc!important}
body.dark-mode .client-svg-wrap svg text,
body.dark .client-svg-wrap svg text,
body[data-theme="dark"] .client-svg-wrap svg text{fill:#d7e4dc!important}
body.dark-mode .client-progress-track,
body.dark .client-progress-track,
body[data-theme="dark"] .client-progress-track{background:#34483e!important}
body.dark-mode .client-progress-track>span,
body.dark .client-progress-track>span,
body[data-theme="dark"] .client-progress-track>span{background:linear-gradient(90deg,#0b665c,#e2b43e)!important}
body.dark-mode .ring-bg,
body.dark .ring-bg,
body[data-theme="dark"] .ring-bg{stroke:#3a5145!important}
body.dark-mode .ring-number,
body.dark .ring-number,
body[data-theme="dark"] .ring-number{fill:#f3d27a!important}
body.dark-mode .ring-label,
body.dark .ring-label,
body[data-theme="dark"] .ring-label{fill:#bdcfc4!important}
body.dark-mode .timer-warning,
body.dark .timer-warning,
body[data-theme="dark"] .timer-warning{background:#3b301b!important;border-color:#9a742b!important}
body.dark-mode .timer-warning strong,
body.dark .timer-warning strong,
body[data-theme="dark"] .timer-warning strong{color:#ffe08a!important}

/* Customer Workspace / Portal Files */
.workspace-upload{margin:16px 0}.workspace-file-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line,#dce5df)}.workspace-file-row>div{display:grid;gap:4px;flex:1;min-width:0}.workspace-file-row small{color:var(--muted,#78857d);font-size:11px}.workspace-file-row button{white-space:nowrap}
.my-files-section{margin:18px 0}.my-files-head h3{margin:5px 0}.my-files-head p{font-size:12px;color:var(--muted,#78857d)}.my-files-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.my-files-filters label{display:grid;gap:6px;font-size:11px;font-weight:800}.my-files-filters select{width:100%;min-width:0;padding:10px;border:1px solid #cbd8cf;border-radius:9px;background:#fff;color:#183329}.my-files-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.my-file-card{overflow:hidden;border:1px solid #dce5df;border-radius:12px;background:#fff;color:#183329}.my-file-card img,.my-file-card video{display:block;width:100%;height:150px;object-fit:contain;background:#101a16}.my-file-card audio{width:100%;margin-top:55px}.my-file-card>div{display:grid;gap:6px;padding:11px}.my-file-card small{font-size:10px;color:#68766e;overflow-wrap:anywhere}.my-file-card a{font-size:12px;font-weight:800;color:#07574c}.my-file-pdf{height:150px;display:grid;place-items:center;background:#263b31;color:#ffe08a;font-size:28px;font-weight:900}
body.dark-mode .my-files-section,body.dark .my-files-section,body[data-theme="dark"] .my-files-section{background:#14251e!important;color:#edf5ef!important;border-color:#344a3e!important}
body.dark-mode .my-files-filters select,body.dark .my-files-filters select,body[data-theme="dark"] .my-files-filters select{background:#1b3027!important;color:#edf5ef!important;border-color:#496354!important}
body.dark-mode .my-file-card,body.dark .my-file-card,body[data-theme="dark"] .my-file-card{background:#1b3027!important;color:#edf5ef!important;border-color:#3a5145!important}
body.dark-mode .my-file-card small,body.dark .my-file-card small,body[data-theme="dark"] .my-file-card small{color:#bdcfc4!important}
@media(max-width:650px){.my-files-filters{grid-template-columns:1fr}.workspace-file-row{flex-wrap:wrap}.workspace-file-row>div{flex-basis:100%}.workspace-file-row button{flex:1}.my-files-results{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Customer file preview: zoomable images and in-browser media playback */
.my-file-thumb{display:block;width:100%;padding:0;border:0;background:#101a16;cursor:zoom-in}.my-file-thumb img{width:100%;height:150px;object-fit:contain}.my-file-audio{height:150px;display:grid;place-items:center;padding:12px;background:#14251e}.my-file-audio audio{width:100%;margin:0}.my-file-preview{border:0;border-radius:7px;padding:8px 10px;background:#0a5149;color:#fff;font-weight:800;cursor:pointer}.my-file-card .my-file-pdf{width:100%;border:0;cursor:pointer}.customer-file-viewer{width:min(94vw,1100px);height:min(92vh,850px);max-width:none;max-height:none;padding:0;border:1px solid #52675c;border-radius:14px;background:#101b16;color:#f4f7f4;overflow:hidden}.customer-file-viewer::backdrop{background:#000d}.customer-file-viewer>header,.customer-file-viewer>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#17271f}.customer-file-viewer>header strong{overflow-wrap:anywhere}.customer-file-viewer button{cursor:pointer}.customer-file-viewer .viewer-close{border:0;border-radius:8px;padding:5px 12px;background:#35483e;color:white;font-size:24px}.customer-file-viewer>main{height:calc(100% - 105px);display:grid;place-items:center;overflow:auto;background:#080e0b}.customer-file-viewer>main video{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.customer-file-viewer>main iframe{width:100%;height:100%;border:0;background:#fff}.customer-file-image-stage{width:100%;height:100%;overflow:auto;display:grid;place-items:center}.customer-file-image-stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;transition:transform .15s ease}.image-zoom-tools{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;background:#21352a}.image-zoom-tools button{border:1px solid #64796a;border-radius:7px;padding:6px 13px;background:#31483a;color:#fff;font-weight:800}.customer-file-audio-stage{width:min(90%,520px);display:grid;justify-items:center;gap:24px}.customer-file-audio-stage .audio-file-icon{font-size:90px;color:#e8c66b}.customer-file-audio-stage audio{width:100%}.customer-file-viewer>footer{font-size:12px;overflow-wrap:anywhere}.customer-file-viewer>footer a{color:#f2d17a;font-weight:800;white-space:nowrap}
.debt-access-block{border:1px solid #b7791f;background:rgba(217,165,46,.10);padding:24px;border-radius:16px}.debt-access-block h2{margin-top:0;color:#b7791f}.debt-access-block p{line-height:1.6}


/* MSMS mobile header repair: stable menu, title and compact actions */
@media(max-width:640px){
  .app .topbar{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:9px;width:100%;min-width:0;min-height:72px;height:auto;padding:10px 12px;align-items:center;box-sizing:border-box}
  .app .topbar>#menuBtn{grid-column:1;grid-row:1;display:grid;place-items:center;width:42px;height:42px;min-width:42px;padding:0;font-size:21px;line-height:1;color:var(--green);border:1px solid var(--line);background:var(--surface-2);border-radius:10px}
  .app .topbar>div:first-of-type{grid-column:2;grid-row:1;min-width:0;flex:none}
  .app .top-kicker{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;letter-spacing:.12em;line-height:1.25}
  .app .topbar h2,#pageTitle{font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0 0}
  .app .top-actions{grid-column:3;grid-row:1;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
  .app .top-actions .view-site-link,.app .top-actions .today-label{display:none!important}
  .app .top-actions .theme-toggle{display:inline-grid;place-items:center;min-width:48px;height:38px;padding:0 8px;font-size:11px;line-height:1;white-space:nowrap}
  .app .top-actions .avatar{width:32px;height:32px;flex:0 0 32px}
  .app .content{min-width:0;width:100%;box-sizing:border-box;padding-left:12px;padding-right:12px}
}
@media(max-width:380px){
  .app .topbar{grid-template-columns:40px minmax(0,1fr) auto;gap:7px;padding-left:9px;padding-right:9px}
  .app .topbar>#menuBtn{width:40px;height:40px;min-width:40px}
  .app .topbar h2,#pageTitle{font-size:17px}
  .app .top-actions .theme-toggle{min-width:43px;padding:0 6px;font-size:10px}
}

.backup-panel .form-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.backup-panel small{display:block;color:var(--muted);line-height:1.6}.backup-panel button:disabled{opacity:.6;cursor:wait}