/* CleanCheck 2027 – Mobile-First Design System */
:root{--bg:#0a0c14;--surface:#12151f;--card:rgba(18,22,34,.7);--card-hover:rgba(24,30,48,.85);--border:rgba(255,255,255,.06);--border-hover:rgba(255,255,255,.12);--accent:#6C8EEF;--accent-glow:rgba(108,142,239,.3);--accent-soft:rgba(108,142,239,.1);--green:#34d399;--green-glow:rgba(52,211,153,.25);--green-soft:rgba(52,211,153,.08);--amber:#fbbf24;--amber-soft:rgba(251,191,36,.1);--red:#f87171;--red-soft:rgba(248,113,113,.1);--text:#e8ecf4;--text2:#8b95ab;--text3:#5a6478;--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:30px;--shadow:0 8px 32px rgba(0,0,0,.3);--font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--ease:.3s cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;min-height:100dvh;overflow-x:hidden}
.app-shell{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.mesh-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 20% 10%,rgba(108,142,239,.12) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(168,85,247,.08) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 50% 50%,rgba(52,211,153,.06) 0%,transparent 70%)}

/* Topbar */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:rgba(10,12,20,.8);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border)}
.topbar__brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text)}
.topbar__logo{font-size:1.4rem}
.topbar__name{font-size:1.05rem;font-weight:800;background:linear-gradient(135deg,#6C8EEF,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.topbar__right{display:flex;align-items:center;gap:.75rem}
.topbar__user{display:flex;align-items:center;gap:.5rem}
.topbar__avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a855f7);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff}
.topbar__role{font-size:.8rem;color:var(--text2);display:none}
@media(min-width:768px){.topbar__role{display:inline}}
.topbar__hamburger{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px}
.topbar__hamburger span{display:block;width:20px;height:2px;background:var(--text2);border-radius:2px;transition:var(--ease)}
@media(min-width:900px){.topbar__hamburger{display:none}}

/* Drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:280px;max-width:80vw;background:var(--surface);border-left:1px solid var(--border);z-index:201;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:1.5rem}
.drawer.open{transform:translateX(0)}
.drawer__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.drawer__greeting{font-weight:700;font-size:1rem}
.drawer__close{background:none;border:none;color:var(--text2);font-size:1.2rem;cursor:pointer;padding:4px}
.drawer__links{flex:1;display:flex;flex-direction:column;gap:.25rem}
.drawer__link{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-radius:var(--r-md);text-decoration:none;color:var(--text2);font-weight:600;font-size:.95rem;transition:var(--ease)}
.drawer__link:hover,.drawer__link--active{color:var(--text);background:rgba(255,255,255,.05)}
.drawer__link--active{color:var(--accent);background:var(--accent-soft)}
.drawer__link--logout{color:var(--red);margin-top:auto}
.drawer__icon{font-size:1.2rem}
@media(min-width:900px){.drawer,.drawer-overlay{display:none!important}}

/* Desktop Nav */
.desktop-nav{display:none;justify-content:center;gap:.25rem;padding:.5rem 1rem;background:rgba(10,12,20,.5);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
@media(min-width:900px){.desktop-nav{display:flex}}
.dnav{display:flex;align-items:center;gap:.35rem;padding:.55rem 1.1rem;border-radius:var(--r-sm);text-decoration:none;color:var(--text2);font-size:.85rem;font-weight:600;transition:var(--ease)}
.dnav:hover{color:var(--text);background:rgba(255,255,255,.05)}
.dnav--active{color:var(--accent);background:var(--accent-soft)}
.dnav--logout{color:var(--red);margin-left:auto}

/* Main */
.main{flex:1;width:100%;max-width:800px;margin:0 auto;padding:1.25rem 1rem 3rem}

body.no-scroll {
    overflow: hidden;
}

/* Toast */
.toast{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:var(--r-md);margin-bottom:.75rem;font-size:.88rem;font-weight:600;animation:slideIn .4s ease-out;transition:all .4s}
.toast--success{background:var(--green-soft);color:var(--green);border:1px solid rgba(52,211,153,.15)}
.toast--error{background:var(--red-soft);color:var(--red);border:1px solid rgba(248,113,113,.15)}
.toast__close{background:none;border:none;color:inherit;cursor:pointer;font-size:1rem;opacity:.6}
@keyframes slideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* Footer */
.footer{text-align:center;padding:1.25rem;font-size:.75rem;color:var(--text3);border-top:1px solid var(--border)}

/* Page Header */
.page-header{margin-bottom:1.5rem}
.page-header__title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.page-header__subtitle{color:var(--text3);font-size:.88rem;margin-top:.2rem}

/* Form Sections */
.form-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin-bottom:1rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:var(--ease);opacity:0;transform:translateY(16px)}
.form-section--visible{opacity:1;transform:translateY(0)}
.form-section:hover{border-color:var(--border-hover)}
.form-section--confirm{background:linear-gradient(135deg,rgba(108,142,239,.06),rgba(168,85,247,.06));border-color:rgba(108,142,239,.12)}

.section-badge{display:flex;align-items:center;gap:.6rem;margin-bottom:1.15rem}
.section-badge__icon{font-size:1.4rem}
.section-badge__title{font-size:1.05rem;font-weight:700;flex:1}

.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem}
.section-actions{display:flex;align-items:center;gap:1rem}
.section-counter{font-size:.85rem;font-weight:700;color:var(--text2);transition:var(--ease)}

/* Check All */
.check-all{display:flex;align-items:center;gap:.4rem;cursor:pointer;background:var(--accent-soft);padding:.35rem .7rem;border-radius:20px;font-size:.8rem;font-weight:700;color:var(--accent);transition:var(--ease);border:1px solid rgba(108,142,239,.1)}
.check-all:hover{background:var(--accent);color:#fff}
.check-all__input{cursor:pointer}

/* Form Elements */
.form-grid{display:grid;grid-template-columns:1fr;gap:.85rem}
@media(min-width:540px){.form-grid{grid-template-columns:1fr 1fr}}
.form-grid--meta{grid-template-columns:1fr}
@media(min-width:540px){.form-grid--meta{grid-template-columns:1fr 1fr 1fr}}
.form-group--full{grid-column:1/-1}

.form-label{display:block;font-size:.72rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.form-input,.form-select,.form-textarea{width:100%;padding:.65rem .85rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:.92rem;transition:var(--ease);outline:none;-webkit-appearance:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text3)}
.form-select option{background:var(--surface);color:var(--text)}
.form-textarea{resize:vertical;min-height:65px}
.form-hint{font-size:.73rem;color:var(--text3);font-style:italic;margin-top:.25rem}

/* Check Cards */
.check-grid{display:grid;gap:.4rem}
.check-card{display:flex;align-items:center;padding:.75rem .9rem;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:var(--ease);user-select:none}
.check-card:hover{background:rgba(255,255,255,.05);border-color:var(--border-hover);transform:translateX(3px)}
.check-card__input{display:none}
.check-card__content{display:flex;align-items:center;gap:.7rem;width:100%}
.check-card__box{flex-shrink:0;width:26px;height:26px;border-radius:var(--r-sm);border:2px solid var(--text3);display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.check-card__tick{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.5);transition:var(--ease)}
.check-card__text{font-size:.9rem;font-weight:500;color:var(--text2);transition:var(--ease)}
.check-card__input:checked~.check-card__content .check-card__box{background:linear-gradient(135deg,#34d399,#059669);border-color:transparent;box-shadow:0 0 10px var(--green-glow)}
.check-card__input:checked~.check-card__content .check-card__box .check-card__tick{opacity:1;transform:scale(1)}
.check-card__input:checked~.check-card__content .check-card__text{color:var(--green)}

/* Upload Zone */
.upload-zone{position:relative;border:2px dashed rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden;transition:var(--ease);cursor:pointer}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-soft)}
.upload-zone__input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.upload-zone__content{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;gap:.4rem}
.upload-zone__icon{font-size:2.2rem;opacity:.6}
.upload-zone__text{font-size:.9rem;font-weight:600;color:var(--text2)}
.upload-zone__info{font-size:.78rem;color:var(--text3)}

/* Confirm Card */
.confirm-card{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.08);border-radius:var(--r-md);cursor:pointer;transition:var(--ease);margin-bottom:1rem}
.confirm-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.confirm-card__input{display:none}
.confirm-card__content{display:flex;align-items:center;gap:.75rem;width:100%}
.confirm-card__box{flex-shrink:0;width:32px;height:32px;border-radius:var(--r-sm);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.confirm-card__tick{width:18px;height:18px;color:#fff;opacity:0;transform:scale(.5);transition:var(--ease)}
.confirm-card__text{font-size:.95rem;font-weight:700;color:var(--text2);transition:var(--ease)}
.confirm-card__input:checked~.confirm-card__content .confirm-card__box{background:linear-gradient(135deg,var(--accent),#a855f7);border-color:transparent;box-shadow:0 0 30px var(--accent-glow)}
.confirm-card__input:checked~.confirm-card__content .confirm-card__box .confirm-card__tick{opacity:1;transform:scale(1)}
.confirm-card__input:checked~.confirm-card__content .confirm-card__text{color:var(--accent)}

/* Submit Button */
.btn-submit{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.95rem;border:none;border-radius:50px;background:var(--accent);color:#fff;font-family:var(--font);font-size:1rem;font-weight:700;cursor:pointer;transition:var(--ease);box-shadow:0 4px 20px var(--accent-glow)}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}
.btn-submit:active{transform:translateY(0)}
.btn-submit__icon{font-size:1.1rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border-radius:50px;font-family:var(--font);font-size:.88rem;font-weight:600;text-decoration:none;transition:var(--ease);cursor:pointer;border:none}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn--secondary:hover{background:rgba(100,100,100,.1);color:var(--text)}
.btn--sm{padding:.45rem .9rem;font-size:.82rem}
.btn--lg{width:100%;padding:.8rem;font-size:.92rem;justify-content:center;border-radius:50px}

/* Success Page */
.success-page{display:flex;align-items:center;justify-content:center;min-height:55vh}
.success-card{text-align:center;padding:2.5rem 1.5rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);backdrop-filter:blur(12px);max-width:440px;width:100%;animation:popIn .5s cubic-bezier(.16,1,.3,1)}
.success-card__icon-wrap{margin-bottom:1.25rem}
.success-card__icon{font-size:3.5rem;display:inline-block;animation:bounce 1.2s ease infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
.success-card__title{font-size:1.6rem;font-weight:800;margin-bottom:.4rem}
.success-card__text{color:var(--text2);font-size:.9rem;margin-bottom:1.75rem;line-height:1.7}
.success-card__actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* Protocol List */
.protocol-list{display:flex;flex-direction:column;gap:.6rem}
.protocol-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:var(--ease)}
.protocol-card:hover{border-color:var(--border-hover)}
.protocol-card[open]{border-color:rgba(108,142,239,.15)}
.protocol-card__header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;cursor:pointer;list-style:none;transition:var(--ease);flex-wrap:wrap;gap:.4rem}
.protocol-card__header::-webkit-details-marker{display:none}
.protocol-card__header:hover{background:rgba(255,255,255,.03)}
.protocol-card__info{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.protocol-card__apt{font-weight:700;font-size:.9rem}
.protocol-card__date{font-size:.82rem;color:var(--text2)}
.protocol-card__person{font-size:.82rem;color:var(--text3)}
.protocol-card__actions{display:flex;align-items:center;gap:.75rem}
.protocol-card__badge{font-size:.72rem;font-weight:700;padding:.25rem .65rem;border-radius:100px}
.badge--ok{background:var(--green-soft);color:var(--green)}
.badge--warn{background:var(--amber-soft);color:var(--amber)}
.protocol-card__body{padding:0 1rem 1rem;border-top:1px solid var(--border);animation:slideIn .3s ease-out}
.protocol-section{padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.03)}
.protocol-section:last-child{border-bottom:none}
.protocol-section h3{font-size:.85rem;font-weight:700;margin-bottom:.4rem}
.protocol-section p{font-size:.85rem;color:var(--text2);line-height:1.6}
.protocol-checks{list-style:none;display:grid;gap:.2rem}
.protocol-checks li{font-size:.82rem;padding:.15rem 0}
.check--done{color:var(--green)}
.check--miss{color:var(--text3)}
.protocol-img{max-width:100%;max-height:200px;border-radius:var(--r-md);object-fit:contain;cursor:pointer;margin-top:.5rem}
.protocol-footer{padding-top:.5rem;border-top:1px solid var(--border)}
.protocol-timestamp{font-size:.72rem;color:var(--text3)}
.delete-form{display:inline-block}
.btn-delete{background:none;border:none;font-size:1rem;cursor:pointer;opacity:.35;transition:var(--ease);padding:3px}
.btn-delete:hover{opacity:1;transform:scale(1.15)}

/* Filter Bar */
.filter-bar{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem;margin-bottom:1.25rem;backdrop-filter:blur(12px)}
.filter-form{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.filter-group{flex:1;min-width:120px}
.filter-label{display:block;font-size:.65rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:.3rem}
.filter-group--reset{flex:0;min-width:auto}
.btn-reset{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--red-soft);color:var(--red);border-radius:var(--r-sm);text-decoration:none;font-weight:700;transition:var(--ease);border:1px solid rgba(248,113,113,.1)}
.btn-reset:hover{background:var(--red);color:#fff}
.empty-state{text-align:center;padding:3rem 1.5rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}
.empty-state__icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}
.empty-state__text{color:var(--text3);margin-bottom:1.25rem}

/* Settings */
.settings-page{max-width:800px}
.settings-actions{margin-bottom:.6rem}
.settings-test{margin-bottom:1.5rem}

/* Theme Toggle */
.theme-toggle-wrap{display:flex;justify-content:center}
.theme-toggle{display:flex;position:relative;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r-md);padding:3px;width:260px}
.theme-toggle__input{display:none}
.theme-toggle__option{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.55rem 1rem;border-radius:12px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--text3);transition:var(--ease);flex:1;text-align:center;z-index:2;position:relative;user-select:none}
.theme-toggle__input:checked+.theme-toggle__option{color:var(--text)}
.theme-toggle__slider{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);background:linear-gradient(135deg,var(--accent-soft),rgba(168,85,247,.1));border:1px solid rgba(108,142,239,.2);border-radius:12px;transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:1}
.theme-toggle__input#theme-light:checked~.theme-toggle__slider{transform:translateX(100%)}
.theme-toggle__icon{font-size:1rem}
.theme-toggle__label{font-size:.82rem}

/* Staff & Checklist Mgmt */
.staff-manager{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.staff-manager__title{font-size:.9rem;font-weight:700;margin-bottom:.85rem;color:var(--text)}
.cleaner-row,.checklist-item-row{display:flex;gap:.6rem;margin-bottom:.6rem;align-items:center}
.cleaner-row .form-input,.checklist-item-row .form-input{margin-bottom:0}
.btn-remove{background:var(--red-soft);color:var(--red);border:1px solid rgba(248,113,113,.1);width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--ease);flex-shrink:0;font-size:.8rem}
.btn-remove--small{width:24px;height:24px;font-size:.65rem}
.btn-remove:hover{background:var(--red);color:#fff}
.checklist-section-card{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--r-md);padding:.9rem;margin-bottom:1.25rem}
.checklist-section-header{display:flex;gap:.6rem;margin-bottom:.85rem;align-items:center}
.form-input--icon{width:55px;text-align:center;font-size:1.15rem}
.checklist-items-list{margin-bottom:.85rem;padding-left:.85rem;border-left:2px solid var(--border)}

/* SMTP Status */
.smtp-status{display:flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;margin-top:.85rem}
.smtp-status--ok{background:var(--green-soft);color:var(--green);border:1px solid rgba(52,211,153,.12)}
.smtp-status--warn{background:var(--amber-soft);color:var(--amber);border:1px solid rgba(251,191,36,.12)}

/* Light Theme */
[data-theme="light"]{--bg:#f2f4f8;--surface:#fff;--card:rgba(255,255,255,.85);--card-hover:rgba(255,255,255,.95);--border:rgba(0,0,0,.07);--border-hover:rgba(0,0,0,.14);--accent:#ff2a70;--accent-glow:rgba(255,42,112,.2);--accent-soft:rgba(255,42,112,.08);--green:#16a34a;--green-glow:rgba(22,163,74,.15);--green-soft:rgba(22,163,74,.06);--amber:#d97706;--amber-soft:rgba(217,119,6,.08);--red:#dc2626;--red-soft:rgba(220,38,38,.06);--text:#1a1d26;--text2:#4b5563;--text3:#9ca3af;--shadow:0 8px 32px rgba(0,0,0,.06)}
[data-theme="light"] .mesh-bg{background:radial-gradient(ellipse 60% 50% at 20% 10%,rgba(255,42,112,.06) 0%,transparent 70%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(139,92,246,.04) 0%,transparent 70%)}
[data-theme="light"] .topbar{background:rgba(255,255,255,.8)}
[data-theme="light"] .desktop-nav{background:rgba(255,255,255,.5)}
[data-theme="light"] .topbar__name{background:var(--accent);-webkit-background-clip:text;background-clip:text}
[data-theme="light"] .check-card{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
[data-theme="light"] .check-card:hover{background:rgba(0,0,0,.04)}
[data-theme="light"] .check-card__box{border-color:#9ca3af}
[data-theme="light"] .upload-zone{border-color:rgba(0,0,0,.12)}
[data-theme="light"] .confirm-card{background:rgba(255,42,112,.03);border-color:rgba(255,42,112,.12)}
[data-theme="light"] .btn-submit{box-shadow:0 4px 20px rgba(255,42,112,.2)}
[data-theme="light"] .drawer{background:#fff}
[data-theme="light"] .theme-toggle{background:rgba(0,0,0,.04)}

/* Responsive */
@media(max-width:640px){
  .topbar{padding:.65rem .85rem}
  .form-section{padding:1rem .85rem}
  .page-header__title{font-size:1.25rem}
  .protocol-card__info{flex-direction:column;align-items:flex-start;gap:.15rem}
  .success-card{padding:2rem 1.25rem}
  .success-card__actions{flex-direction:column}
  .filter-form{flex-direction:column}
  .filter-group{min-width:100%}
  .cleaner-row,.checklist-item-row{flex-wrap:wrap}
}
@media(max-width:360px){
  .main{padding:1rem .65rem 2rem}
  .form-section{padding:.85rem .7rem;border-radius:var(--r-md)}
}

/* Login Page */
.login-page{display:flex;align-items:center;justify-content:center;min-height:60vh}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:2.5rem 1.75rem;width:100%;max-width:380px;text-align:center;backdrop-filter:blur(12px);box-shadow:var(--shadow);animation:popIn .5s cubic-bezier(.16,1,.3,1)}
.login-card__header{margin-bottom:1.75rem}
.login-card__icon{font-size:2.8rem;display:block;margin-bottom:.4rem}
.login-card__title{font-size:1.4rem;font-weight:800;margin-bottom:.2rem}
.login-card__subtitle{color:var(--text2);font-size:.85rem}
.form-input--pin{text-align:center;font-size:1.8rem;letter-spacing:.5rem;padding:.9rem}
.login-card__footer{margin-top:1.5rem;font-size:.75rem;color:var(--text3)}
.login-form{display:flex;flex-direction:column;gap:1rem}

/* Progress */
.progress-bar{position:relative;height:6px;background:rgba(255,255,255,.06);border-radius:100px;margin-bottom:1rem;overflow:hidden}
.progress-bar__fill{height:100%;width:0%;border-radius:100px;background:linear-gradient(90deg,var(--accent),#a855f7,var(--green));background-size:200% 100%;animation:shimmer 3s linear infinite;transition:width .5s cubic-bezier(.4,0,.2,1)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Topbar Theme Toggle */
.topbar__left{display:flex;align-items:center;gap:.6rem}
.topbar__theme{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--ease);font-size:1rem;padding:0}
.topbar__theme:hover{background:rgba(255,255,255,.12);border-color:var(--border-hover);transform:scale(1.1)}
[data-theme="light"] .topbar__theme{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
[data-theme="light"] .topbar__theme:hover{background:rgba(0,0,0,.08)}

/* Per-Section Photos */
.section-photos {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.section-photo-group {
    flex: 1;
}
.photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--ease);
    position: relative;
    overflow: hidden;
}
.photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.photo-btn__icon {
    font-size: 1.1rem;
}
.photo-btn__text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text2);
}
.photo-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
}
.photo-btn--danger {
    background: var(--red-soft);
    border-color: rgba(248, 113, 113, 0.1);
}
.photo-btn--danger:hover {
    background: rgba(248, 113, 113, 0.2);
}
.photo-btn--active {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
}
.photo-btn--active .photo-btn__text {
    color: var(--accent);
}

@media (max-width: 480px) {
    .section-photos {
        flex-direction: column;
    }
}

/* Protocol View Photos */
.protocol-section-photos {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.protocol-photo-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.photo-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
}
.photo-label--danger {
    color: var(--red);
}
.protocol-img--thumb {
    height: 80px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

/* Apartment Manager Grid */
.cleaner-row--apt {
    display: grid;
    grid-template-columns: 2fr 1.5fr auto auto;
    gap: 0.5rem;
    align-items: center;
}
@media (max-width: 600px) {
    .cleaner-row--apt {
        grid-template-columns: 1fr auto;
    }
    .cleaner-row--apt select {
        grid-column: 1 / 2;
    }
}

/* Icon Picker Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: var(--ease);
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.icon-picker {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    width: 320px;
    max-width: 90vw;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transform: scale(0.9);
    transition: var(--ease);
}
.modal-overlay.open .icon-picker {
    transform: scale(1);
}
.icon-picker__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.icon-picker__close {
    background: none;
    border: none;
    color: var(--text3);
    font-size: 1.2rem;
    cursor: pointer;
}
.icon-picker__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
.icon-picker__grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: var(--ease);
}
.icon-picker__grid span:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    transform: scale(1.1);
}
[data-theme="light"] .icon-picker__grid span {
    background: rgba(0, 0, 0, 0.02);
}

/* Search & Print Controls */
.filter-group--search {
    flex: 2;
    min-width: 200px;
}
.btn-print {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.35;
    transition: var(--ease);
    padding: 3px;
}
.btn-print:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Print Styles */
@media print {
    .topbar, .filter-bar, .drawer, .footer, .btn-submit, .btn-print, .btn-delete, .toast, .desktop-nav {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .mesh-bg {
        display: none !important;
    }
    .main {
        padding: 0 !important;
        max-width: 100% !important;
    }
    .protocol-card {
        border: 1px solid #eee !important;
        background: #fff !important;
        color: #000 !important;
        margin-bottom: 20px !important;
        page-break-inside: avoid;
    }
    .protocol-card[open] {
        border: 1px solid #000 !important;
    }
    .protocol-card__header {
        background: #f9f9f9 !important;
        border-bottom: 1px solid #eee !important;
    }
    .protocol-card__apt, .protocol-card__date, .protocol-card__person {
        color: #000 !important;
    }
    .protocol-card__badge {
        border: 1px solid #000 !important;
        color: #000 !important;
        background: none !important;
    }
    .protocol-section h3 {
        color: #000 !important;
        border-bottom: 1px solid #eee !important;
    }
    .protocol-checks li {
        color: #333 !important;
    }
    .check--done {
        color: #000 !important;
    }
    .check--miss {
        text-decoration: line-through !important;
        color: #999 !important;
    }
}

/* Image Modal */
.image-modal {
    background: none;
    border: none;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transform: scale(0.9);
    transition: var(--ease);
}
.modal-overlay.open .image-modal {
    transform: scale(1);
}
.image-modal img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--r-md);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    object-fit: contain;
}
.image-modal__close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

/* Print Optimization */
@media print {
    body.printing-active * {
        visibility: hidden;
    }
    body.printing-active .print-focus,
    body.printing-active .print-focus * {
        visibility: visible;
    }
    body.printing-active .print-focus {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }
    .print-focus summary {
        background: #f0f0f0 !important;
        padding: 15px !important;
        border-bottom: 2px solid #000 !important;
    }
    .print-focus .btn-print, 
    .print-focus .btn-delete, 
    .print-focus .delete-form {
        display: none !important;
    }
    .print-focus .protocol-card__badge {
        border: 1px solid #000 !important;
        color: #000 !important;
    }
    .print-focus .protocol-img {
        width: 256px !important;
        height: 256px !important;
        object-fit: cover !important;
    }
}

/* Supplies Grid */
.supplies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.supply-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0.75rem;
    transition: var(--ease);
}
.supply-item:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.supply-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
}
.refill-wrap {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.supply-check--refill {
    font-size: 0.85rem;
    color: var(--accent);
}

/* Rooms Grid Dashboard */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}
.room-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: var(--ease);
    min-height: 120px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.room-card:active {
    transform: scale(0.96);
}
.room-card__icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.room-card__label {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    color: var(--text);
}
.room-card__counter {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.room-card__status {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 14px;
    transition: var(--ease);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.room-card.is-complete {
    border-color: var(--accent); /* Uses the new pink in light theme */
}
.room-card.is-complete .room-card__status {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Room Modal */
.room-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.room-modal.open {
    transform: translateX(0);
}
.room-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(15px + env(safe-area-inset-top)) 20px 15px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 10;
}
.room-modal__header h2 {
    font-size: 1.2rem;
    margin: 0;
    flex-grow: 1;
    text-align: center;
}
.room-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text);
    cursor: pointer;
    padding: 10px;
    margin-left: -10px;
}
.room-modal__content {
    padding: 20px;
    padding-bottom: 100px;
}

/* Bottom Navigation */
.drawer, .drawer-overlay, .topbar__hamburger {
    display: none !important;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
}
.bnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text3);
    font-size: 0.75rem;
    font-weight: 600;
    gap: 4px;
    transition: var(--ease);
    padding: 5px 20px;
    position: relative;
    cursor: pointer;
}
.bnav__icon {
    font-size: 1.3rem;
    margin-bottom: 2px;
}
.bnav__item:hover {
    color: var(--text2);
    background: rgba(255,255,255,0.02);
    border-radius: var(--r-md);
}
.bnav__item--active {
    color: var(--accent);
}
.bnav__item--active:hover {
    color: var(--accent);
}
.bnav__item--active::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--accent);
    border-radius: 3px;
}
.main {
    padding-bottom: 80px;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    animation: fadeIn 0.3s ease;
}
.loading-overlay.active {
    display: flex;
}
.loading-content {
    background: var(--surface);
    padding: 2.5rem;
    border-radius: 2rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    color: var(--text);
    width: 90%;
    max-width: 320px;
}
.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.loading-text {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.loading-subtext {
    font-size: 0.9rem;
    color: var(--text3);
    margin-top: -0.5rem;
}