/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/quicksand-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#f0f2f8;color:#1a1a2e;display:flex;min-height:100vh;font-size:14px}
#sidebar{width:240px;background:linear-gradient(180deg,#2d1b69 0%,#1a0f3d 100%);display:flex;flex-direction:column;padding:0 0 20px;flex-shrink:0;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,.15)}
.logo{padding:28px 24px 24px;font-size:18px;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.1)}
#sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 24px;font-size:13px;color:rgba(255,255,255,.7);cursor:pointer;border-left:3px solid transparent;transition:all .15s;font-weight:500}
#sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
#sidebar nav a.active{background:rgba(255,255,255,.15);color:#fff;border-left-color:#a78bfa;font-weight:600}
.nav-sec{font-size:10px;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px;padding:20px 24px 6px}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}
#topbar{background:#fff;border-bottom:1px solid #e4e7f0;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 6px rgba(0,0,0,.04)}
#topbar h1{font-size:20px;font-weight:700}
#content{flex:1;overflow-y:auto;padding:32px}
.page{display:none}.page.active{display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:16px;margin-bottom:24px}
.card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.card .lbl{font-size:11px;color:#94a3b8;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.card .val{font-size:26px;font-weight:800}.card .sub{font-size:11px;color:#94a3b8;margin-top:3px}
.card.accent{background:#f489a3}.card.accent .lbl,.card.accent .val,.card.accent .sub{color:#fff}
.card.green{background:#1f8f5f}.card.green .lbl,.card.green .val,.card.green .sub{color:#fff}
.sec{background:#fff;border-radius:16px;margin-bottom:22px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.sec-head{padding:18px 24px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.sec-head h2{font-size:15px;font-weight:700}
.sec-body{padding:22px}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:9px 12px;color:#94a3b8;font-weight:600;font-size:11px;border-bottom:1px solid #f1f5f9;text-transform:uppercase}
td{padding:9px 12px;border-bottom:1px solid #f8fafc;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f8fafc}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
/* NO .available / .sold / .homed HERE — a sale status wears the tone SALE_TONE gives it
   (app.js), because two places to write the colour is how SOLD ended up red on the tile and
   amber in the pop-out at the same time. Species and health badges keep their classes. */
.badge.dog{background:#ede9fe;color:#5b21b6}
.badge.cat{background:#fce7f3;color:#9d174d}.badge.bird{background:#dbeafe;color:#1e40af}
.badge.fish{background:#ccfbf1;color:#134e4a}.badge.rabbit{background:#fef9c3;color:#713f12}
.badge.other{background:#f3f4f6;color:#374151}.badge.male{background:#dbeafe;color:#1e3a5f}
.badge.female{background:#fce7f3;color:#831843}.badge.ready{background:#d1fae5;color:#065f46;font-weight:700}
.badge.rehab{background:#fee2e2;color:#991b1b;font-weight:700}.badge.deceased{background:#1a1a2e;color:#fff;font-weight:700}
.badge.returned{background:#dbeafe;color:#1e40af;font-weight:700}
.badge.vacc{background:#d1fae5;color:#065f46}.badge.novacc{background:#f3f4f6;color:#6b7280}
.fg{display:flex;flex-direction:column;gap:5px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
label.fl{font-size:12px;font-weight:600;color:#475569}
.req{color:#ef4444;margin-left:2px}.opt{font-size:11px;color:#94a3b8;font-weight:400;margin-left:4px}
input,select,textarea{border:1.5px solid #e2e8f0;border-radius:10px;padding:9px 13px;font-size:13px;font-family:inherit;color:#1a1a2e;outline:none;background:#fff;transition:border .15s,box-shadow .15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:#121212;box-shadow:0 0 0 3px rgba(244,137,163,.12)}
input.err,select.err{border-color:#ef4444;background:#fff8f8}
input[readonly]{background:#f8fafc;color:#64748b}
textarea{resize:vertical;min-height:70px}
.btn{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;white-space:nowrap}
.btn-primary{background:#f489a3;color:#fff;box-shadow:0 2px 8px rgba(244,137,163,.3)}.btn-primary:hover{opacity:.9}
.btn-green{background:#1f8f5f;color:#fff}.btn-green:hover{opacity:.9}
.btn-sm{padding:6px 13px;font-size:12px}
.btn-danger{background:#fff0f0;color:#dc2626;border:1.5px solid #fca5a5}.btn-danger:hover{background:#fee2e2}
.btn-outline{background:#fff;color:#475569;border:1.5px solid #e2e8f0}.btn-outline:hover{border-color:#121212;color:#121212}
.tabs{display:flex;gap:4px;background:#f1f5f9;border-radius:10px;padding:4px;margin-bottom:18px}
.tab{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:#64748b;border:none;background:none}
.tab.active{background:#fff;color:#121212;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.mom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.mom-card{background:#f8fafc;border-radius:12px;padding:14px;border:1px solid #e2e8f0;text-align:center}
.mom-card .m{font-size:11px;color:#94a3b8;margin-bottom:3px}.mom-card .v{font-size:20px;font-weight:800}
.ch.up{color:#10b981}.ch.down{color:#ef4444}.ch.flat{color:#94a3b8}
.bar-wrap{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:10px}
.bar-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:3px}
.bar{width:100%;background:#f489a3;border-radius:4px 4px 0 0;min-height:3px}
.bar-lbl{font-size:10px;color:#94a3b8}.bar-val{font-size:10px;font-weight:700;color:#121212}
.emp-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f1f5f9}
.emp-row:last-child{border:none}
.emp-av{width:34px;height:34px;border-radius:50%;background:#f489a3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.emp-name{font-size:13px;font-weight:600;flex:1}
.emp-bw{flex:2;height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}
.emp-bar{height:100%;background:#f489a3;border-radius:4px}
.emp-val{font-size:12px;font-weight:700;color:#121212;min-width:60px;text-align:right}
.alert{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
.alert.success{background:#d1fae5;color:#065f46}.alert.error{background:#fee2e2;color:#991b1b}
.empty{text-align:center;padding:36px;color:#94a3b8;font-size:13px}
.ub{border:2px dashed #cbd5e1;border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .15s;background:#f8fafc}
.ub:hover{border-color:#121212;background:#eef2ff}
.ub.has{border-style:solid;border-color:#121212;padding:6px}
.ub.err{border-color:#ef4444;background:#fff8f8}
.uprev{width:100%;max-height:160px;object-fit:cover;border-radius:10px;display:block}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:20px}
.pet-card{border:none;border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;transition:box-shadow .2s,transform .2s;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.pet-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.13);transform:translateY(-4px)}
.pt{width:40px;height:40px;border-radius:8px;object-fit:cover}
.ptp{width:40px;height:40px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:16px}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:20px;width:100%;max-width:780px;max-height:92vh;overflow-y:auto;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.2)}
.mc{position:absolute;top:14px;right:16px;background:rgba(0,0,0,.4);border:none;font-size:18px;cursor:pointer;color:#fff;z-index:10;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.miw{width:100%;min-height:120px;background:#f1f5f9;position:relative;}
.miw img{width:100%;height:auto;display:block;}
.dg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.di{background:#f8fafc;border-radius:10px;padding:10px 14px}
.di .dl{font-size:10px;color:#94a3b8;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px;font-weight:600}
.di .dv{font-size:13px;font-weight:600}
.msec{font-size:11px;font-weight:700;color:#121212;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;padding-bottom:6px;border-bottom:2px solid #eef2ff}
.bi{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:13px;background:#f8fafc;margin-bottom:8px}
.vt{display:flex;gap:3px;background:#f1f5f9;border-radius:10px;padding:3px}
.vb{padding:6px 13px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:none;color:#64748b}
.vb.active{background:#fff;color:#121212;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.fb{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.fb select{font-size:12px;padding:6px 10px;width:auto;border-radius:8px;border:1.5px solid #e2e8f0}
.sdiv{font-size:11px;font-weight:700;color:#121212;text-transform:uppercase;letter-spacing:.5px;padding:14px 0 8px;border-bottom:2px solid #eef2ff;margin-bottom:14px}
.pov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;align-items:center;justify-content:center}
.pb{background:#fff;border-radius:16px;padding:28px;width:340px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.pb h3{margin-bottom:8px;font-size:16px;font-weight:700}.pb p{font-size:12px;color:#64748b;margin-bottom:16px}
.pb input{margin-bottom:12px;text-align:center;letter-spacing:4px;font-size:17px}
.rl{margin-bottom:14px}
.rlt{font-size:11px;font-weight:700;color:#121212;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.rsr{display:flex;flex-wrap:wrap;gap:7px}
.rsb{position:relative;min-width:50px;padding:7px 12px;border-radius:10px;border:2px solid;font-size:12px;font-weight:600;cursor:pointer;text-align:center;background:#fff;transition:all .15s}
.rsb.free{border-color:#10b981;color:#065f46;background:#f0fdf4}.rsb.free:hover{background:#dcfce7}
.rsb.occupied{border-color:#e2e8f0;color:#94a3b8;background:#f8fafc}
.rsb.selected{border-color:#121212;background:#eef2ff;color:#121212}
.rsb .pc{position:absolute;top:-7px;right:-7px;background:#121212;color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dthumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.dthumb-wrap{position:relative;display:inline-block;cursor:grab;transition:transform .15s,opacity .15s}
.dthumb-wrap.dragging{opacity:.35;transform:scale(.93);cursor:grabbing}
.dthumb-wrap.drag-over{transform:scale(1.08);box-shadow:0 0 0 3px #121212}
.sale-panel{border-top:2px solid #eef2ff;padding:22px;background:#fafbff}
.rc{border:1.5px solid #e2e8f0;border-radius:12px;padding:14px;margin-bottom:12px;background:#f8fafc}
.rch{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rch span{font-size:12px;font-weight:700;color:#121212}
.rthumb{width:100%;height:100px;object-fit:cover;border-radius:8px;display:block}
.radd{border:2px dashed #cbd5e1;border-radius:12px;padding:14px;text-align:center;cursor:pointer;background:#f8fafc;transition:all .15s;margin-bottom:14px}
.radd:hover{border-color:#121212;background:#eef2ff}
.branch-rm-panel{border:1.5px solid #e2e8f0;border-radius:12px;margin-bottom:14px;overflow:hidden}
.branch-rm-head{background:#f8fafc;padding:12px 18px;font-size:13px;font-weight:700;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}
.branch-rm-body{padding:14px 18px}
.room-saved-toast{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#10b981;background:#d1fae5;padding:4px 10px;border-radius:20px;opacity:0;transition:opacity .3s;margin-left:8px}
.room-saved-toast.show{opacity:1}
/* ── pending-change highlights ── */
.field-dirty{border:2px solid #ef4444 !important;background:#fff8f8 !important;border-radius:10px;}
.sec-dirty{border:2px solid #ef4444 !important;box-shadow:0 2px 12px rgba(239,68,68,.12) !important;}

/* ── LOGIN SCREEN ── */
#login-screen{display:none;position:fixed;inset:0;background:linear-gradient(135deg,#2d1b69 0%,#1a0f3d 100%);z-index:10000;align-items:center;justify-content:center;padding:20px;}
.login-card{background:#fff;border-radius:24px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 32px 80px rgba(0,0,0,.3)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo .paw{font-size:48px;margin-bottom:12px}
.login-logo h1{font-size:22px;font-weight:800;color:#1a1a2e}
.login-logo p{font-size:13px;color:#94a3b8;margin-top:4px}
.btn-login{width:100%;padding:13px;border-radius:12px;border:none;background:#f489a3;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .15s;margin-top:4px}
.btn-login:hover{opacity:.9}
.btn-login:disabled{opacity:.6;cursor:not-allowed}
.login-err{background:#fee2e2;color:#991b1b;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:16px;display:none}
.login-success{background:#d1fae5;color:#065f46;border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:16px;display:none}
.login-loading{display:none;text-align:center;padding:12px;color:#64748b;font-size:13px}
.forgot-link{text-align:center;margin-top:16px;font-size:12px;color:#94a3b8}
.forgot-link a{color:#121212;cursor:pointer;text-decoration:none;font-weight:600}
.reset-panel{display:none;margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9}
.reset-panel p{font-size:12px;color:#64748b;margin-bottom:10px}
.btn-reset{width:100%;padding:10px;border-radius:10px;border:1.5px solid #121212;background:#fff;color:#121212;font-size:13px;font-weight:600;cursor:pointer}
.btn-reset:hover{background:#eef2ff}


/* ============================================================
   FlowFest skin — layered ON TOP of jujuba-base.css.
   Re-skins the Jujuba Pets management app into FlowFest's
   festival aesthetic (pink/cream, Sugar Peachy + Quicksand,
   thick black borders + offset shadows) while keeping dense
   data tables & forms clean and readable.
   ============================================================ */

@font-face{
  font-family:'Sugar Peachy';
  src:url("assets/fonts/sugar-peachy-500-01.woff2") format('woff2');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'Sugar Peachy';
  src:url("assets/fonts/sugar-peachy-900-01.woff2") format('woff2');
  font-weight:900; font-display:swap;
}

:root{
  --accent:#f489a3;
  --accent-2:#f8c8d6;
  --bg:#f3ecd2;
  --text:#121212;
  --card-bg:#fffefb;
  --shadow-sm:rgba(0,0,0,0.15) 0px 4.53px 0px 0px;
  --shadow-card:rgba(0,0,0,0.15) 6.8px 6.8px 0px 0px;
}

/* ---- Base document: undo sidebar flex layout ---- */
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family:'Quicksand',Arial,sans-serif !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  display:block !important;
  min-height:100vh;
  font-size:16px;
  font-weight:500;
  letter-spacing:-0.3px;
}

/* Every former "page" is now an always-visible scroll section */
.page{display:block !important;}

h1,h2{font-family:'Sugar Peachy',Arial,sans-serif;font-weight:500;letter-spacing:-1px;line-height:1.12;}
h3,h4{font-family:'Quicksand',Arial,sans-serif;font-weight:700;}

/* ============================================================
   NAV  (sticky FlowFest bar)
   ============================================================ */
.ff-progress{position:fixed;top:0;left:0;height:5px;width:0%;background:var(--accent);z-index:600;border-bottom:2px solid var(--text);will-change:width;}
.ff-nav{position:sticky;top:0;z-index:500;background:var(--bg);border-bottom:2px solid var(--text);transition:box-shadow .25s ease;}
.ff-nav.scrolled{box-shadow:rgba(0,0,0,0.12) 0px 6px 0px 0px;}
.ff-nav-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:6px 16px 6px 12px;margin:0;flex-wrap:wrap;}  /* 14px → 6px: OMAN 2026-09-14, "top row slightly shorter" */
.ff-logo{font-family:'Sugar Peachy',Arial,sans-serif;font-size:30px;font-weight:900;color:var(--text);display:inline-flex;align-items:center;gap:9px;cursor:pointer;}
.ff-logo .paw{font-size:24px;}
.ff-logo .star{color:var(--accent);display:inline-block;animation:ffspin 6s linear infinite;}
@keyframes ffspin{to{transform:rotate(360deg);}}
.ff-nav-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.ff-nav-links a{font-weight:700;font-size:17px;color:var(--text);cursor:pointer;position:relative;}
.ff-nav-links a:not(.btn){padding:5px 16px;border-radius:181px;border:2px solid transparent;transition:background .2s ease,border-color .2s ease;}
.ff-nav-links a:not(.btn):hover{background:var(--accent-2);}
.ff-nav-links a.active:not(.btn){background:var(--accent);border-color:var(--text);box-shadow:var(--shadow-sm);}

/* ---- Brand group + branch toggle ---- */
/* OMAN 2026-09-09: the Branches pill moved UNDER the wordmark, so the group stacks. Left
   aligned so the pill sits under the J, and a column is what lets the pill shrink to fit
   without touching the wordmark's size. */
.ff-brandgroup{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
/* The pill is a read-out now, not the only handle — the wordmark opens the bar too. Its own
   rule below still sets padding/min-height at the old size, so the inline style on the element
   wins for the shrunk one; these two properties have no inline counterpart. */
.ff-branch-toggle{min-height:0 !important;font-size:11.5px;}

/* ⛔ THE PROFILE MUST NOT BE PUSHED ONTO A ROW OF ITS OWN. Adding Stocks took the three
   children past the container's width (377 + 835 + 247 + gaps > 1425 at 1440px), and
   `flex-wrap:wrap` answers that by dropping the LAST child — the profile and the sync button —
   onto a second line. The links are the only part that reads fine wrapped, so they are the
   part allowed to: they shrink and wrap internally, and the two fixed ends stay put.

   ⛔ `flex:1 1 auto` is the WRONG fix and was the first one tried: grow makes the links TAKE
      the free space, so they swelled to 1002px and pushed the profile down exactly as before.
      What is needed is permission to YIELD — shrink with no grow.

   ⛔ AND `flex:0 1 auto` ALONE IS NOT ENOUGH EITHER: while the CONTAINER may wrap, the links
      never have to shrink — the browser drops the last child to a new line instead, which is
      the cheaper way to satisfy the same constraint. The container has to be told it may not
      wrap before shrinking becomes the only option left. */
.ff-nav-inner{flex-wrap:nowrap !important;}
.ff-nav-inner > .ff-nav-links{flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:2px;}
.ff-nav-inner > .ff-brandgroup,
.ff-nav-inner > .ff-userbar{flex:0 0 auto;}
.ff-branch-toggle{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--card-bg);color:var(--text);
  border:2px solid var(--text);border-radius:181px;
  padding:8px 14px 8px 13px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;
  cursor:pointer;min-height:42px;box-shadow:var(--shadow-sm);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.ff-branch-toggle:hover{transform:translate(-2px,-2px);box-shadow:rgba(0,0,0,0.25) 0px 7px 0px 0px;background:var(--accent-2);}
.ff-branch-toggle .ff-bt-icon{font-size:17px;line-height:1;}
.ff-branch-toggle .ff-bt-chev{font-size:20px;line-height:1;transition:transform .3s cubic-bezier(.2,.7,.2,1);font-weight:900;}
.ff-branch-toggle.open .ff-bt-chev{transform:rotate(90deg);}
.ff-branch-toggle.open{background:var(--accent);}

/* ---- Branch slide-out bar ---- */
.ff-branch-scrim{position:fixed;inset:0;background:rgba(18,18,18,.45);z-index:5500;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
.ff-branch-scrim.open{opacity:1;visibility:visible;}
.ff-branch-bar{
  position:fixed;top:0;left:0;height:100vh;width:min(420px,90vw);
  background:var(--bg);border-right:2px solid var(--text);
  box-shadow:rgba(0,0,0,0.25) 14px 0 0 0;
  z-index:5600;transition:transform .38s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
/* open/closed position is driven by inline transform in JS (cascade-proof) */
.ff-bb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:26px 24px 20px;border-bottom:2px solid var(--text);background:var(--accent-2);flex:0 0 auto;}
.ff-bb-titles .section-tag{margin-bottom:9px;}
.ff-bb-titles h2{font-size:40px;line-height:1;}
.ff-bb-close{background:var(--text);color:var(--bg);border:2px solid var(--text);width:40px;height:40px;border-radius:50%;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .15s ease;}
.ff-bb-close:hover{transform:rotate(90deg);}
.ff-bb-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 24px;border-bottom:2px solid var(--text);flex:0 0 auto;}
.ff-bb-stat{background:var(--card-bg);border:2px solid var(--text);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-sm);}
.ff-bb-stat .n{font-family:'Sugar Peachy',sans-serif;font-size:30px;line-height:1;}
.ff-bb-stat .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#6b6256;margin-top:4px;}
.ff-bb-list{flex:1 1 auto;overflow-y:auto;padding:18px 24px 30px;display:flex;flex-direction:column;gap:16px;}
.ff-bb-foot{flex:0 0 auto;padding:16px 24px;border-top:2px solid var(--text);background:var(--accent-2);}
.ff-bcard{flex:0 0 auto;background:var(--card-bg);border:2px solid var(--text);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;}
.ff-bcard-top{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--accent);border-bottom:2px solid var(--text);}
.ff-bcard-top .pin{font-size:18px;}
.ff-bcard-top .nm{font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;line-height:1.15;}
.ff-bcard-top .loc{font-size:12px;font-weight:600;color:#3a352c;}
.ff-bcard-body{padding:14px 16px;}
.ff-bcard-metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px;}
.ff-bm{text-align:center;background:#faf5e4;border:2px solid var(--text);border-radius:10px;padding:9px 4px;}
.ff-bm .v{font-family:'Sugar Peachy',sans-serif;font-size:23px;line-height:1;}
.ff-bm .l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#6b6256;margin-top:3px;}
.ff-bm.avail .v{color:#1f8f5f;}
.ff-bm.sold .v{color:#dc2626;}
.ff-bcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1.5px solid #ece3c8;}
.ff-bcard-foot .val{font-weight:700;font-size:15px;}
.ff-bcard-foot .val small{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#6b6256;}
.ff-bcard-foot .rooms{font-size:12px;font-weight:600;color:#3a352c;background:var(--accent-2);border:1.5px solid var(--text);border-radius:181px;padding:4px 11px;}
.ff-bb-empty{text-align:center;color:#6b6256;font-weight:600;padding:30px 10px;}

@media (max-width:768px){
  .ff-branch-toggle .ff-bt-label{display:none;}
  .ff-branch-toggle{padding:8px 11px;}
}

/* ============================================================
   BUTTONS  (FlowFest pill, applied to jujuba .btn family)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--accent);color:var(--text);
  border:2px solid var(--text);border-radius:181px;
  padding:11px 22px;font-size:14px;font-weight:700;
  font-family:'Quicksand',Arial,sans-serif;
  min-height:44px;text-align:center;white-space:nowrap;cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:rgba(0,0,0,0.25) 0px 7px 0px 0px;opacity:1;}
.btn:active{transform:translate(0,0);box-shadow:var(--shadow-sm);}
.btn-primary{background:var(--accent);color:var(--text);box-shadow:var(--shadow-sm);}
.btn-green{background:#1f8f5f;color:#fff;}
/* Added 2026-09-04: a warning-weight action that is neither destructive (btn-danger) nor a
   commit (btn-green). Reset PIN is the case it exists for -- it changes somebody's access
   without deleting anything. Dark text on amber because white on yellow fails contrast, and
   the 2px border + pill radius keep it in the same family as every other .btn. */
.btn-yellow{background:#f5c33b;color:var(--text);}
.btn-yellow:hover{background:#f0b81f;}
.btn-sm{padding:8px 16px;font-size:13px;min-height:38px;}
.btn-outline{background:var(--card-bg);color:var(--text);border:2px solid var(--text);box-shadow:var(--shadow-sm);}
.btn-outline:hover{color:var(--text);border-color:var(--text);}
.btn-danger{background:#fff0f0;color:#dc2626;border:2px solid #dc2626;box-shadow:var(--shadow-sm);}
.btn-danger:hover{background:#fee2e2;}
.btn-cancelappt{background:#dc2626;color:#fff;border:2px solid var(--text);box-shadow:var(--shadow-sm);}
.btn-cancelappt:hover{background:#c01f1f;}
.btn-completeappt{background:#1f8f5f;color:#fff;border:2px solid var(--text);box-shadow:var(--shadow-sm);}
.btn-completeappt:hover{background:#197a50;}

/* ============================================================
   HERO + festival decorations
   ============================================================ */
.ff-hero{padding:90px 24px 60px;text-align:center;position:relative;overflow:hidden;border-bottom:2px solid var(--text);}
.ff-hero .date-line{font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;display:inline-flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;}
.ff-hero .date-line .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);border:1.5px solid var(--text);}
.ff-hero h1{font-size:clamp(44px,7vw,104px);line-height:1.02;margin-bottom:16px;}
.ff-hero .sub{font-family:'Quicksand',sans-serif;font-size:clamp(18px,2vw,26px);font-weight:600;margin-bottom:30px;max-width:760px;margin-left:auto;margin-right:auto;}
.ff-hero .hero-cta{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.ff-hero .btn{font-size:17px;padding:16px 30px;min-height:54px;}
.blob{position:absolute;border:2px solid var(--text);z-index:1;will-change:transform;pointer-events:none;}
.blob.circle{border-radius:50%;background:var(--accent);}
.blob.ring{border-radius:50%;background:transparent;border-width:3px;}
.blob.square{background:var(--accent-2);}
.blob.star{border:none;background:none;font-family:'Sugar Peachy',sans-serif;color:var(--accent);display:flex;align-items:center;justify-content:center;}
.b1{width:80px;height:80px;top:16%;left:7%;}
.b2{width:50px;height:50px;top:22%;right:10%;}
.b3{width:110px;height:110px;bottom:8%;left:11%;}
.b4{width:62px;height:62px;bottom:20%;right:8%;transform:rotate(18deg);}
.b5{font-size:100px;top:10%;right:20%;}
.b6{font-size:64px;bottom:12%;left:42%;}

/* ============================================================
   MARQUEE band
   ============================================================ */
/* OMAN 2026-09-06: the band follows the page. It carries open tasks now, and a warning
   you have to scroll back up to read is a warning that gets read once. z-index sits
   under the modals (5000) and the SRR overlay (6000) so it can never cover a dialog. */
.marquee-band{background:var(--accent);border-top:2px solid var(--text);border-bottom:2px solid var(--text);padding:1px 0;overflow:hidden;white-space:nowrap;position:sticky;top:var(--nav-h,0px);z-index:499;}  /* padding 4px → 1px, OMAN 2026-09-14 */
/* --nav-h is measured in JS: the nav wraps to two rows on a narrow screen, so a
   hardcoded offset would either overlap it or leave a gap at exactly the widths
   nobody tests. z-index 499 keeps it under the nav (500) and over the page. */
.marquee-band .strip{display:inline-flex;gap:36px;align-items:center;font-family:'Sugar Peachy',sans-serif;font-size:clamp(20px,3.4vw,38px);line-height:1.1;will-change:transform;animation:ffmarquee 320s linear infinite;}
.marquee-band:hover .strip{animation-play-state:paused;}
.marquee-band .strip span{display:inline-flex;align-items:center;gap:36px;}
.marquee-band .sep{color:var(--card-bg);-webkit-text-stroke:2px var(--text);}
/* SPEC §186: a line of the moving bar is a door (the band already stands still under the finger) */
.mq-item[data-band-i]{cursor:pointer;}
.mq-item[data-band-i]:hover{text-decoration:underline;}
.band-tell{margin:6px 0 2px;font-size:16px;font-weight:800;line-height:1.45;}
@keyframes ffmarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   SCROLL SECTIONS
   ============================================================ */
.ff-section{padding:62px 0;position:relative;border-bottom:2px solid var(--text);}
.ff-section:last-of-type{border-bottom:none;}
.ff-section.alt{background:var(--accent-2);}
.ff-container{max-width:1280px;margin:0 auto;padding:0 28px;position:relative;z-index:2;}
/* OMAN 2026-09-16: the race, the apples, the off-day avatars and the bee hive sit BEHIND every content box (they are z 1,
   the boxes z 2). The container's own empty margin lets a click through, so an apple beside a box can still be picked. */
.ff-container{pointer-events:none;}
.ff-container > *{pointer-events:auto;}
.ff-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:30px;}
.ff-section-head .titles{max-width:760px;}
.section-tag{display:inline-block;white-space:nowrap;background:var(--accent);color:var(--text);font-weight:700;padding:5px 15px;border-radius:181px;border:2px solid var(--text);font-size:12px;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;}
.ff-section-head h2{font-size:clamp(32px,4.4vw,62px);}
.ff-section-head .actions{display:flex;gap:10px;flex-wrap:wrap;}
.ff-subhead{display:flex;align-items:center;gap:14px;margin:8px 0 18px;padding-top:26px;border-top:2px solid var(--text);}
.ff-subhead h3{font-family:'Sugar Peachy',Arial,sans-serif;font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1;}
.groom-add-btn{margin-left:auto;}
.dur-split{display:flex;gap:6px;}
.dur-split select{min-width:0;flex:1;}
.gsv-chip{display:inline-flex;align-items:center;gap:8px;background:var(--accent-2);border:2px solid var(--text);border-radius:181px;padding:6px 8px 6px 14px;font-weight:700;font-size:13px;box-shadow:var(--shadow-sm);}
#gsv-list .gsv-chip{cursor:grab;}
.gsv-chip .gsv-grip{cursor:grab;opacity:.5;font-size:12px;margin-right:-2px;}
.gsv-chip.dragging{opacity:.4;cursor:grabbing;}
.gsv-chip button{background:var(--text);color:var(--bg);border:none;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.gsv-chip button:hover{background:#dc2626;}
.adm-empty{color:#6b6256;font-size:13px;font-weight:600;}
#or-list,#br-list{display:flex;flex-wrap:wrap;gap:8px;}
.bd-group{border:2px solid var(--text);border-radius:12px;overflow:hidden;background:#fffefb;}
.bd-group-head{background:var(--accent-2);padding:9px 13px;font-size:12px;font-weight:700;border-bottom:2px solid var(--text);}
.bd-group-body{padding:11px 13px;display:flex;flex-wrap:wrap;gap:7px;}

/* ---- Grooming week calendar ---- */
.groom-range{margin-left:auto;white-space:nowrap;font-size:13px;font-weight:700;color:#6b6256;background:var(--accent-2);border:1.5px solid var(--text);border-radius:181px;padding:4px 13px;}
.groom-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;padding:18px;}
.groom-day{display:flex;flex-direction:column;border:2px solid var(--text);border-radius:14px;overflow:hidden;background:#fffefb;min-height:150px;}
.groom-day.is-today{box-shadow:var(--shadow-sm);}
.groom-day-head{display:flex;align-items:baseline;gap:6px;padding:9px 11px;background:var(--accent-2);border-bottom:2px solid var(--text);}
.groom-day.is-today .groom-day-head{background:var(--accent);}
.groom-day-head .gd-wd{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;}
.groom-day-head .gd-date{font-family:'Sugar Peachy',Arial,sans-serif;font-size:20px;line-height:1;}
.groom-day-head .gd-today{margin-left:auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--text);color:var(--bg);border-radius:181px;padding:2px 7px;align-self:center;}
.groom-day-body{display:flex;flex-direction:column;gap:7px;padding:9px;flex:1;}
.groom-appt{border:1.5px solid var(--text);border-radius:9px;padding:7px 8px;background:#faf5e4;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.groom-appt:hover,.groom-appt:focus-visible{transform:translateY(-1px);box-shadow:var(--shadow-sm);outline:none;}
.groom-appt .ga-time{font-weight:700;font-size:12px;color:#b8456a;}.groom-appt .ga-main{display:flex;flex-direction:column;min-width:0;flex:1;}.groom-appt .ga-main .ga-time{margin-bottom:5px;}
.groom-appt .ga-pet{font-weight:700;font-size:13px;line-height:1.15;overflow-wrap:anywhere;}
.groom-appt .ga-svc{font-size:11px;font-weight:600;color:#3a352c;}
.groom-appt .ga-by{font-size:10px;color:#6b6256;margin-top:2px;}
.groom-appt .ga-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:5px;}
.groom-appt .ga-top .ga-time{flex-shrink:0;}
.groom-appt .ga-cust{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0;flex:0 1 auto;max-width:46%;}
.groom-appt .ga-owner{font-size:10.5px;font-weight:700;color:#3a352c;line-height:1.2;overflow-wrap:anywhere;}
.groom-appt .ga-contact{font-size:9.5px;font-weight:600;color:#6b6256;line-height:1.2;overflow-wrap:anywhere;}
/* grooming appointment status (canceled / completed) */
.groom-appt.is-canceled{border:2px solid #dc2626;background:#fdecec;}
.groom-appt.is-completed{border:2px solid #1f8f5f;background:#ecf7f1;}
.groom-appt.is-canceled .ga-pet{text-decoration:line-through;text-decoration-color:#dc2626;}
.ga-status{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;border-radius:181px;padding:1px 7px;margin-top:4px;width:fit-content;border:1.5px solid;}
.ga-status-canceled{color:#dc2626;border-color:#dc2626;background:#fff;}
.ga-status-completed{color:#1f8f5f;border-color:#1f8f5f;background:#fff;}
/* SPEC §44: Arrived (grooming), the booking form layout, photos, the stay's services, Returning Customer */
.ga-status-arrived{color:#8a5a00;border-color:#8a5a00;background:#fdf3dc;}
.groom-appt.is-arrived{border:2px solid #b7791f;background:#fdf6e6;}
.gcal-appt.is-arrived{background:#fdf6e6;border-color:#b7791f;color:#8a5a00;}
#add-session .ff-modal-card.gstat-arrived{border-color:#b7791f !important;}
.btn-arrivedappt{background:#e2a70c;color:#121212;border:2px solid var(--text);box-shadow:var(--shadow-sm);}
.btn-arrivedappt:hover{background:#cf990b;}
.bk-return{margin:0 0 4px;}
.bk-grid{display:grid;gap:14px;margin-top:14px;}
.bk-c1{grid-template-columns:1fr;}
.bk-c2{grid-template-columns:1fr 1fr;}
.bk-c3{grid-template-columns:1.3fr 1fr 1fr;}
.bk-c4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:640px){ .bk-c3,.bk-c4{grid-template-columns:1fr 1fr;} }
#add-boarding .bd-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:64px;}
.bd-topright{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;}
.bd-svc-pills{display:contents;}
.bd-svc{background:#fff;border:2px solid var(--text);border-radius:181px;padding:5px 12px;font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;}
.bd-svc strong{color:#b8456a;}
.bk-groomtools{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:16px;}
.bk-photos{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;}
.bk-ph{display:flex;flex-direction:column;gap:6px;}
.bk-ph-row{display:flex;gap:8px;flex-wrap:wrap;}
/* SPEC §51: the empty tile draws its own camera rather than relying on an emoji font, and says what pressing it does */
.bk-tile{position:relative;width:92px;height:92px;border:2px dashed rgba(18,18,18,.45);border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;cursor:pointer;font-size:11px;font-weight:800;text-align:center;line-height:1.25;padding:4px;box-sizing:border-box;transition:border-color .12s,background .12s;}
.bk-tile:hover{border-color:var(--text);background:rgba(0,0,0,.02);}
.bk-cam{width:26px;height:26px;color:var(--text);opacity:.75;flex:none;}
.bk-tile-t{font-size:10.5px;}
.bk-tile-a{font-size:9px;font-weight:700;opacity:.55;text-transform:uppercase;letter-spacing:.05em;}
.bk-tile.has .bk-cam,.bk-tile.has .bk-tile-t,.bk-tile.has .bk-tile-a{display:none;}
/* the DD/MM/YYYY echo under a native date box (SPEC §51, the pick-up date's own pattern) */
.bk-dmy{font-size:11px;font-weight:700;letter-spacing:.04em;margin-top:3px;opacity:.45;}
.bk-tile.has{border-style:solid;border-color:var(--text);padding:0;}
.bk-tile img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.bk-tile .bk-x{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--text);background:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0;}
.bk-tile.bk-need{border-color:#dc2626;background:#fff1f1;animation:bk-need .5s ease-in-out 3;}
/* ══ SPEC §51 (OMAN 2026-09-21) — the three grooming add-ons, at the right end of the Pet Photo row ══ */
.gs-photo-row{align-items:flex-start;justify-content:space-between;}
.gs-addons{margin-left:auto;}
.gs-addons-lbl{font-size:10px;color:#94a3b8;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px;font-weight:600;}
.gs-addons-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.gs-addon{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;}
/* the name sits ON TOP of the logo (OMAN), and every logo is the same size — 78px, a little under the 92px photo frame */
.gs-addon-name{font-size:10px;font-weight:900;letter-spacing:.02em;text-align:center;line-height:1.2;min-height:24px;display:flex;align-items:flex-end;}
.gs-addon-btn{position:relative;width:78px;height:78px;padding:5px;border:2px solid rgba(18,18,18,.35);border-radius:14px;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .12s ease,border-color .12s,box-shadow .12s;}
.gs-addon-btn:hover{transform:translateY(-2px);}
.gs-addon-btn img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(.55);opacity:.62;transition:filter .12s,opacity .12s;}
.gs-addon.on .gs-addon-btn{border-color:var(--text);box-shadow:0 0 0 3px #f489a3;}
.gs-addon.on .gs-addon-btn img{filter:none;opacity:1;}
.gs-addon-tick{position:absolute;top:2px;right:3px;width:19px;height:19px;border-radius:50%;background:#1f8f5f;color:#fff;font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;line-height:1;}
.gs-addon-notes{display:flex;flex-direction:column;align-items:center;gap:3px;}
/* the reasons the groomer is looking for — read, not pressed */
.gs-note{font-size:8.5px;font-weight:800;line-height:1.2;text-align:center;white-space:nowrap;padding:2px 8px;border-radius:999px;
  border:1.5px solid #c1272d;color:#c1272d;background:#fff;pointer-events:none;animation:ph-owe 1.2s ease-in-out infinite;}
/* the names on the appointment card */
.ga-addons{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
.ga-addon{font-size:9px;font-weight:800;letter-spacing:.02em;padding:1px 7px;border-radius:999px;border:1.5px solid var(--text);background:#fff;}
@media (prefers-reduced-motion:reduce){.gs-note{animation:none;}}
@media (max-width:760px){.gs-addons{margin-left:0;}.gs-photo-row{gap:16px;}}
@keyframes bk-need{50%{transform:translateX(3px);}}
.ret-modal{position:fixed;inset:0;z-index:6000;background:rgba(18,18,18,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.ret-modal[hidden]{display:none !important;}
.ret-card{position:relative;width:100%;max-width:900px;background:var(--card-bg);border:2px solid var(--text);border-radius:22px;box-shadow:rgba(0,0,0,.3) 12px 12px 0 0;padding:26px;}
.ret-row{display:grid;grid-template-columns:64px 1.1fr 1.1fr 1.5fr;gap:12px;align-items:center;border:2px solid var(--text);border-radius:14px;padding:8px 10px;margin-bottom:8px;cursor:pointer;background:#fff;font-size:13px;}
.ret-row:hover,.ret-row:focus-visible{background:#fff4f7;outline:none;}
.ret-row small{opacity:.75;}
.ret-ph{width:64px;height:64px;border-radius:12px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:26px;}
.ret-ph img{width:100%;height:100%;object-fit:cover;}
@media (max-width:640px){ .ret-row{grid-template-columns:56px 1fr;} }
/* SPEC §45: the edit pen, Edit — Returning Customer, Appt., and MUSHROOM in a moving rainbow */
.ret-row{position:relative;padding-right:44px;}
.ret-pen{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:2px solid var(--text);background:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0;}
.ret-pen:hover{background:#fff4f7;}
.ret-modal.ret-edit{z-index:6100;}
.appt-linkrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0;}
.appt-linkrow input{flex:1 1 260px;min-width:0;font-size:12.5px;}
.appt-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px;}
.appt-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.appt-tab{border:2px solid var(--text);background:#fff;border-radius:181px;padding:5px 14px;font-weight:800;font-size:12.5px;cursor:pointer;}
.appt-tab.on{background:var(--text);color:#fff;}
.appt-row{display:grid;grid-template-columns:1.1fr 1.4fr 1.4fr .9fr auto;gap:12px;align-items:center;border:2px solid var(--text);border-radius:14px;padding:9px 12px;margin-bottom:8px;background:#fff;font-size:13px;}
.appt-row small{opacity:.75;}
.appt-code{letter-spacing:.04em;}
.appt-row.appt-arrived{background:#ecf7f1;border-color:#1f8f5f;}
.appt-row.appt-canceled,.appt-row.appt-no_show{opacity:.55;}
.appt-cfg{margin-top:14px;border:2px solid var(--text);border-radius:14px;padding:10px 14px;background:#fff;}
.appt-cfg summary{cursor:pointer;font-weight:800;}
@media (max-width:760px){ .appt-row{grid-template-columns:1fr 1fr;} }
/* eleven links now (Appt. added): tighter pills so the row stays one line — the 17 px text is kept */
.ff-nav-links{column-gap:6px;}
.ff-nav-links a:not(.btn){padding:5px 10px;}
/* on an inner span: the link's own hover/active background stays, the letters carry the rainbow */
.nav-rainbow{font-weight:900;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(45deg,#ff3b6b,#ff9f1c,#ffd60a,#2ec46b,#2f8cff,#8a4dff,#ff3b6b,#ff9f1c,#ffd60a,#2ec46b,#2f8cff,#8a4dff,#ff3b6b);
  background-size:200% 200%;animation:nav-rainbow 3.6s linear infinite;}
/* the colours drift up and to the right; the gradient repeats every half, so the loop has no seam */
@keyframes nav-rainbow{from{background-position:100% 0%;}to{background-position:0% 100%;}}
@media (prefers-reduced-motion:reduce){ .nav-rainbow{animation:none;} }
.gcal-appt.is-canceled{background:#fdecec;border-color:#dc2626;color:#dc2626;text-decoration:line-through;}
.gcal-appt.is-completed{background:#ecf7f1;border-color:#1f8f5f;color:#197a50;}
#add-session .ff-modal-card.gstat-canceled{border-color:#dc2626 !important;}
#add-session .ff-modal-card.gstat-completed{border-color:#1f8f5f !important;}
#add-session{z-index:5600;}
#add-boarding{z-index:5600;}
.bd-stbtn{border:2px solid var(--text);background:#fff;color:var(--text);border-radius:181px;padding:7px 16px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .1s ease;}
.bd-stbtn[data-st="canceled"]{border-color:var(--text);color:#fff;background:#dc2626;}
.bd-stbtn[data-st="canceled"]:hover{background:#c01f1f;}
.bd-stbtn[data-st="checkedin"]{border-color:var(--text);color:#fff;background:#1f8f5f;}
.bd-stbtn[data-st="checkedin"]:hover{background:#197a50;}
.bd-stbtn[data-st="checkedout"]{border-color:var(--text);color:#fff;background:#2a6fdb;}
.bd-stbtn[data-st="checkedout"]:hover{background:#225bb6;}
.bd-stbtn[data-st="extend"]{border-color:var(--text);color:#fff;background:#e2820c;}
.bd-stbtn[data-st="extend"]:hover{background:#c2700b;}
.bd-stbtn:hover{transform:translateY(-1px);}
.bd-stbtn.sel[data-st="checkedin"]{background:#1f8f5f;border-color:var(--text);color:#fff;outline:3px solid var(--text);outline-offset:2px;}
.bd-stbtn.sel[data-st="checkedout"]{background:#2a6fdb;border-color:var(--text);color:#fff;outline:3px solid var(--text);outline-offset:2px;}
.bd-stbtn.sel[data-st="extend"]{background:#e2820c;border-color:var(--text);color:#fff;outline:3px solid var(--text);outline-offset:2px;}
.bd-stbtn.sel[data-st="canceled"]{background:#dc2626;border-color:var(--text);color:#fff;outline:3px solid var(--text);outline-offset:2px;}
#add-boarding .ff-modal-card.bstat-checkedin{border-color:#1f8f5f !important;}
#add-boarding .ff-modal-card.bstat-checkedout{border-color:#2a6fdb !important;}
#add-boarding .ff-modal-card.bstat-extend{border-color:#c2700b !important;}
#add-boarding .ff-modal-card.bstat-canceled{border-color:#dc2626 !important;}
.fv-badge.cin{background:#bfe8cf;}
.fv-badge.cout{background:#bcd6ff;}
.fv-badge.ext{background:#ffd9a8;}
.board-bar.st-canceled{opacity:.7;}
/* SPEC §46: the strike is on the words only, so the CANCELED pill beside the nights stays readable */
.board-bar.st-canceled .bar-pet,.board-bar.st-canceled .bar-meta-t{text-decoration:line-through;}
.board-bar .bar-meta-row{display:flex;align-items:center;gap:5px;}
.board-bar .bar-meta-t{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.board-bar .bar-canc{flex:none;margin-top:0;}
.bcal-appt.is-in{background:#bfe8cf;}
.bcal-appt.is-out{background:#ffb3c4;}
.ms-wrap{position:relative;}
.ms-box{min-height:44px;border:2px solid var(--text);border-radius:10px;background:#fff;padding:7px 34px 7px 9px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;cursor:pointer;position:relative;}
.ms-box::after{content:'';position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:translateY(-70%) rotate(45deg);}
.ms-placeholder{color:#9b937f;font-size:13px;}
.ms-chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-2);border:1.5px solid var(--text);border-radius:181px;padding:2px 4px 2px 9px;font-size:12px;font-weight:700;line-height:1.4;}
.ms-chip button{border:none;background:none;cursor:pointer;font-size:11px;line-height:1;padding:0 2px;color:var(--text);}
.ms-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:#fff;border:2px solid var(--text);border-radius:10px;box-shadow:var(--shadow-sm);max-height:208px;overflow-y:auto;padding:4px;}
.ms-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;}
.ms-opt:hover{background:var(--accent-2);}
.ms-opt input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
/* the customer picker under Owner name / Contact number (OMAN 2026-09-15): the service menu's look, wide enough for a name */
.cust-host{position:relative;}
.cust-pick{min-width:280px;max-height:260px;}
.cust-pick-right{left:auto;}
.cust-opt{justify-content:space-between;}
.cust-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cust-opt small{flex:none;font-size:11.5px;opacity:.7;}
.cust-opt.on{background:var(--accent-2);}
.cust-pick-note{padding:8px 10px;font-size:12px;line-height:1.4;opacity:.75;}
.groom-empty{color:#c9bfa6;text-align:center;font-size:20px;padding:14px 0;}

/* enlarge the grooming frame + give the calendar more breathing room */
.groom-frame{padding-bottom:6px;}
.groom-frame .groom-day{min-height:200px;}

/* More sessions toggle + expandable list */
.groom-more{padding:4px 18px 18px;}
.groom-more-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent-2);color:var(--text);border:2px solid var(--text);border-radius:14px;padding:13px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s ease,transform .15s ease;}
.groom-more-btn:hover{background:var(--accent);transform:translateY(-1px);}
.groom-more-btn .gm-chev{font-size:16px;line-height:1;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.groom-more-btn.open .gm-chev{transform:rotate(180deg);}
.groom-more-list{margin-top:12px;border:2px solid var(--text);border-radius:14px;overflow:hidden;background:#fffefb;}
.groom-row{display:grid;grid-template-columns:150px 64px 1.2fr 1.4fr 1.2fr;gap:14px;align-items:center;padding:13px 16px;border-bottom:1.5px solid #ece3c8;font-size:14px;cursor:pointer;}
.groom-row:last-child{border-bottom:none;}
.groom-row:hover{background:#faf5e4;}
.groom-row .gr-date{font-weight:700;}
.groom-row .gr-time{font-weight:700;color:#b8456a;}
.groom-row .gr-pet{font-weight:700;}
.groom-row .gr-svc{font-weight:600;}
.groom-row .gr-by{color:#6b6256;font-weight:600;}
@media (max-width:720px){
  .groom-row{grid-template-columns:1fr 1fr;gap:4px 12px;}
  .groom-row .gr-svc,.groom-row .gr-by{grid-column:span 1;}
}

/* ---- Boarding board (Gantt-style weekly timeline) ---- */
.board-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px 18px 6px;}
.board-wrap{overflow-x:auto;padding:12px 18px 18px;}
.board-board{--lblw:232px;min-width:760px;border:2px solid var(--text);border-radius:14px;overflow:hidden;background:#fffefb;}
.board-row{position:relative;display:flex;align-items:stretch;min-height:68px;border-bottom:1.5px solid #ece3c8;}
.board-row:last-child{border-bottom:none;}
.board-head{min-height:0;background:var(--accent-2);border-bottom:2px solid var(--text);}
.board-label{flex:0 0 var(--lblw);width:var(--lblw);display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-right:2px solid var(--text);}
.board-head .board-label{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.6px;align-items:center;}
.board-av{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:2px solid var(--text);background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;}
.bl-info{min-width:0;}
.bl-name{font-weight:700;font-size:12px;line-height:1.1;}
.bl-sub{font-size:9.5px;color:#6b6256;font-weight:600;}
.bl-dates{font-size:9px;color:#3a352c;font-weight:700;margin-top:2px;line-height:1.15;}
.bl-datecol{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:42px;line-height:1.1;}
.bl-dc-in{font-size:10px;font-weight:800;color:#1f8f5f;white-space:nowrap;}
.bl-dc-n{font-size:10px;font-weight:800;color:#dc2626;margin:1px 0;}
.bl-dc-out{font-size:10px;font-weight:800;color:#2a6fdb;white-space:nowrap;}
.bl-dc-ne{font-size:10px;font-weight:800;color:#dc2626;white-space:nowrap;margin-top:1px;}
.bl-dc-out2{font-size:10px;font-weight:800;color:#1c4f9c;white-space:nowrap;margin-top:1px;}
.bl-datecol.dc5{line-height:1.05;}
.bl-datecol.dc5 .bl-dc-in,.bl-datecol.dc5 .bl-dc-n,.bl-datecol.dc5 .bl-dc-out,.bl-datecol.dc5 .bl-dc-ne,.bl-datecol.dc5 .bl-dc-out2{font-size:8.5px;}
.bl-datecol.dc5 .bl-dc-n{margin:0;}
.bl-datecol.dc5 .bl-dc-ne,.bl-datecol.dc5 .bl-dc-out2{margin-top:0;}
.bl-dc-ext{font-size:9.5px;font-weight:800;color:#e2820c;text-transform:uppercase;letter-spacing:.3px;margin-top:3px;}
.bl-dc-extn{font-size:11px;font-weight:800;color:#e2820c;white-space:nowrap;}
.bl-contact{font-size:10px;color:#3a352c;font-weight:700;margin-top:2px;}
.bl-cust{margin-left:auto;text-align:right;min-width:0;padding-left:6px;}
.bl-owner{font-size:10px;color:#3a352c;font-weight:700;line-height:1.1;overflow-wrap:anywhere;}
.board-track{flex:1;display:grid;grid-template-columns:repeat(7,1fr);}
.board-dhead{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0;border-left:1.5px solid var(--text);}
.board-dhead.is-today{background:var(--accent);}
.board-dhead .bd-wd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.board-dhead .bd-date{font-family:'Sugar Peachy',Arial,sans-serif;font-size:18px;line-height:1;}
.board-cell{border-left:1.5px solid #f0e8cf;}
.board-cell.is-today{background:rgba(244,137,163,.10);}
.board-bar{position:absolute;top:6px;bottom:6px;display:flex;flex-direction:column;justify-content:center;gap:0px;padding:4px 11px;border:2px solid var(--text);border-radius:181px;background:var(--accent);box-shadow:var(--shadow-sm);overflow:hidden;z-index:2;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
.board-bar:hover,.board-bar:focus-visible{transform:translateY(-2px);box-shadow:rgba(0,0,0,0.25) 0px 6px 0px 0px;outline:none;}
.board-bar .bar-pet{font-weight:700;font-size:11.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-bar .bar-status{font-size:9.5px;font-weight:700;line-height:1.05;}
.board-bar .bar-meta{font-size:8.5px;font-weight:600;color:#3a352c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-bar .bar-owner{font-size:8.5px;font-weight:700;color:#1f1a12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-bar.soon{background:#ffd9a8;}
.board-bar.out-today{background:#ffb3c4;}
.board-bar.in-today{background:#bdebd0;}
.board-bar.cont-l{border-top-left-radius:6px;border-bottom-left-radius:6px;}
.board-bar.cont-r{border-top-right-radius:6px;border-bottom-right-radius:6px;}
.board-empty{padding:30px;text-align:center;color:#6b6256;font-weight:600;}
#board-more-list{border:none;background:none;overflow:visible;}
#board-more-list .board-wrap{padding:0;}
@media (max-width:560px){
  .board-summary{grid-template-columns:1fr;}
  .board-board{--lblw:150px;}
}
@media (max-width:900px){
  .groom-cal{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .groom-cal{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   CARDS / SECTIONS (jujuba .card & .sec re-skin)
   ============================================================ */
.card{background:var(--card-bg) !important;border:2px solid var(--text) !important;border-radius:16px !important;box-shadow:var(--shadow-card) !important;transition:transform .18s ease,box-shadow .18s ease;}
.card:hover{transform:translate(-3px,-3px) !important;box-shadow:rgba(0,0,0,0.2) 10px 10px 0px 0px !important;}
.card .lbl{color:#6b6256 !important;}
.card .val{color:var(--text);}
.card.accent{background:var(--accent) !important;}
.card.accent .lbl,.card.accent .val,.card.accent .sub{color:var(--text) !important;}
.card.green{background:#1f8f5f !important;}
.card.green .lbl,.card.green .val,.card.green .sub{color:#fff !important;}

.sec{background:var(--card-bg) !important;border:2px solid var(--text) !important;border-radius:18px !important;box-shadow:var(--shadow-card) !important;}
.sec-head{border-bottom:2px solid var(--text) !important;}
.sec-head h2{font-family:'Quicksand',sans-serif;font-weight:700;font-size:17px;}

/* Section headings inside the app (msec / sdiv / rlt) */
.msec,.sdiv,.rlt{color:var(--text) !important;border-bottom:2px solid var(--accent) !important;}

/* ============================================================
   TABLES & FORMS — keep clean + readable, light festival touch
   ============================================================ */
th{color:#6b6256 !important;border-bottom:2px solid var(--text) !important;}
td{border-bottom:1px solid #ece3c8 !important;}
tr:hover td{background:#faf5e4 !important;}

input,select,textarea{border:2px solid var(--text) !important;border-radius:10px !important;font-family:'Quicksand',sans-serif !important;background:#fff !important;color:var(--text) !important;}
input:focus,select:focus,textarea:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(244,137,163,.35) !important;}
input[readonly]{background:#f6f1e0 !important;color:#6b6256 !important;}
label.fl{color:#3a352c !important;font-weight:700;}

/* Tabs / view toggles */
.tabs,.vt,.fb .vt{background:var(--accent-2) !important;border:2px solid var(--text) !important;border-radius:12px !important;}
.tab,.vb{color:#3a352c !important;font-weight:700;}
.tab.active,.vb.active{background:var(--card-bg) !important;color:var(--text) !important;box-shadow:var(--shadow-sm) !important;}

/* Badges — keep semantic colours, add cohesive thin border */
.badge{border:1.5px solid rgba(18,18,18,.45);font-weight:700;}

/* Pills / chips for filter selects */
.fb select{border:2px solid var(--text) !important;border-radius:10px !important;}

/* Mom cards / bars / avatars */
.mom-card{background:#faf5e4 !important;border:2px solid var(--text) !important;border-radius:12px !important;}
.emp-av{box-shadow:var(--shadow-sm);}
.bar{border-radius:6px 6px 0 0;}

/* ============================================================
   PET CARDS (grid)
   ============================================================ */
.pet-card{background:var(--card-bg) !important;border:2px solid var(--text) !important;border-radius:16px !important;box-shadow:var(--shadow-card) !important;}
.pet-card:hover{transform:translate(-4px,-4px) !important;box-shadow:rgba(0,0,0,0.2) 11px 11px 0px 0px !important;}

/* ============================================================
   MODALS  (jujuba .ov/.modal + custom form modals)
   ============================================================ */
.ov,.ff-modal{position:fixed;inset:0;background:rgba(18,18,18,.55);z-index:5000;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.ff-modal.open{display:flex;}
.modal,.ff-modal-card{background:var(--card-bg) !important;border:2px solid var(--text) !important;border-radius:22px !important;box-shadow:rgba(0,0,0,0.3) 12px 12px 0px 0px !important;width:100%;max-width:780px;position:relative;}
.ff-modal-card{max-height:none;margin:auto 0;}
.mc{background:var(--text) !important;color:var(--bg) !important;border:2px solid var(--text);width:36px;height:36px;}
.ff-modal-close{position:absolute;top:16px;right:18px;background:var(--text);color:var(--bg);border:2px solid var(--text);font-size:18px;cursor:pointer;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10;}
/* ⛔ .admin-modal-card BELONGS HERE TOO. It is the wide sibling of .ff-modal-card (SRR, Docs,
   Stocks, Admin) and it was never named, so the `.sec` inside it kept the 2px frame from line
   690 — an inner box drawn just inside the card's own border, which is the "inner frame …
   looks broken" OMAN reported on the Stocks pop-out. The inline `border:none` on those
   sections could not win against an `!important`, so the fix is here, once, for all four. */
.ff-modal-card .sec,.admin-modal-card .sec{box-shadow:none !important;border:none !important;border-radius:22px !important;max-width:none !important;}
.ff-modal-card .sec-head,.admin-modal-card .sec-head{border-radius:22px 22px 0 0;}

/* ══ STOCK TAKE ═══════════════════════════════════════════════════ OMAN 2026-09-10
   "a word appear on top center the same row as Stocks writing Stock Counting… in bigger size
    than stocks in red fades in and out continuously, we freeze the top part, even when
    employee scrolls down it follows."

   The banner is CSS, not a timer: an interval that keeps running after the modal closes is
   the classic leak, and `animation` stops itself when the node is removed. */
@keyframes stk-breathe{0%,100%{opacity:1}50%{opacity:.18}}
/* clamp, not a fixed 31px: on a laptop the banner ran straight into the word Stocks. It
   still has to be visibly BIGGER than the title at every width, which is the whole job. */
.stk-counting{font-family:'Sugar Peachy',Quicksand,sans-serif;font-size:clamp(21px,2.4vw,33px);line-height:1;font-weight:900;letter-spacing:.03em;color:#c1272d;text-transform:uppercase;animation:stk-breathe 1.5s ease-in-out infinite;white-space:nowrap;}
/* Refused is a LOOK as well as a state — a green button that does nothing reads as broken. */
#stk-complete:disabled{background:#9aa0a6 !important;color:#fff !important;box-shadow:none !important;cursor:not-allowed;opacity:.75;}
/* ⛔ A MESSAGE YOU CANNOT COPY IS A MESSAGE THAT GETS RETYPED WRONG — or, more often, gets
   described as "a long message in red" and never diagnosed at all. Anything carrying
   data-copyable can be dragged over with the mouse AND copied whole with one click. */
[data-copyable]{user-select:text;-webkit-user-select:text;cursor:copy;}
[data-copyable]:empty{cursor:default;}
[data-copyable][data-copied="1"]::after{content:' ✓ copied';font-weight:900;opacity:.8;}
/* The browser refused a scripted copy (an unfocused window will), but the text IS selected —
   so the click still moved the job forward and says which key finishes it. */
[data-copyable][data-copied="select"]::after{content:' ⌃ selected — press Ctrl+C';font-weight:900;opacity:.8;}

/* ⛔ [hidden] HAS TO WIN OVER .btn. An author rule beats the UA stylesheet's
   [hidden]{display:none} however specific it looks, and .btn sets display:inline-flex -- so
   COMPLETE would sit on screen outside a count, refusing to be pressed. Scoped to these two
   rather than made global: a blanket [hidden] !important would change every screen in the
   console, and none of them asked for it. */
#stk-banner[hidden],#stk-complete[hidden],#stk-restock-cancel[hidden],#stk-count-btn[hidden]{display:none !important;}
/* SPEC §159 (OMAN 2026-10-17): "why is there a X Cancel right next to +Stock Register … it works nothing" — §158's ✕ Cancel was never
   added to the list above, so .btn's display beat its [hidden] and it sat there outside any registering. Every Stocks button hidden by
   attribute is listed, the ones §159 hides until their own pass is open included. */
#stk-ecom-cancel[hidden],#stk-ecom-btn[hidden],#stk-restock-btn[hidden],#stk-done-box[hidden]{display:none !important;}
/* Sticky rather than fixed: fixed leaves the card and hangs over the page behind it. */
.stk-sticky{position:sticky;top:0;z-index:6;background:var(--card-bg);padding-top:4px;border-bottom:2px solid var(--text);}
.stk-tile{border:2px solid var(--text);border-radius:14px;padding:9px;background:var(--card-bg);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;}
.stk-tile:hover{transform:translate(-2px,-2px);box-shadow:rgba(0,0,0,0.22) 0px 7px 0px 0px;}
.stk-tile.on{border-color:#c1272d;box-shadow:rgba(193,39,45,.28) 0px 6px 0px 0px;}
/* OMAN 2026-09-12: touched in THIS cycle — counted in the open pass, or restocked and not yet
   sent — a green outline that breathes, so it is obvious which figures can still be corrected.
   Selected (.on, red) wins. Reduced motion stops the pulse; the green border stays. */
.stk-tile.stk-touched:not(.on){border-color:#1f7a3d;box-shadow:0 0 0 2px rgba(31,122,61,.45);animation:stk-glow 1.3s ease-in-out infinite;}
@keyframes stk-glow{0%,100%{border-color:#1f7a3d;box-shadow:0 0 0 3px rgba(31,122,61,.55)}50%{border-color:#7fcf9a;box-shadow:0 0 0 0 rgba(31,122,61,0)}}
.stk-group-head{display:flex;align-items:center;gap:8px;background:var(--accent-2);border:2px solid var(--text);border-radius:181px;padding:6px 16px;font-size:12.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;box-shadow:var(--shadow-sm);}
.stk-field-label{display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:3px;}
.stk-box{width:100%;padding:6px 9px;font-size:12px;border:2px solid var(--text);border-radius:10px;background:var(--card-bg);color:var(--text);}
/* ⛔ !important, BECAUSE THE THEME SHOUTS FIRST. Line 704 sets every input to a black 2px
   border !important and a white ground, and :focus repaints the border pink -- so the red
   "not this item's barcode" frame OMAN asked for was invisible in the one state it matters
   in: while somebody is typing into it. */
.stk-box.bad,.stk-box.bad:focus{border-color:#c1272d !important;background:#fff4f4 !important;}
.stk-box.ok,.stk-box.ok:focus{border-color:#1f7a3d !important;background:#e9f8ee !important;}
.stk-pill{width:100%;margin-top:7px;padding:7px;border:2px solid var(--text);border-radius:181px;background:#c1272d;color:#fff;font-weight:900;font-size:12px;letter-spacing:.04em;cursor:pointer;box-shadow:var(--shadow-sm);}
.stk-pill:disabled{background:#9aa0a6;cursor:not-allowed;opacity:.65;box-shadow:none;}
/* OMAN 2026-09-11: "LEAVE IT OPEN" means unfinished work — the Stocks tab breathes red, same
   keyframes as the Stock Counting banner, until the pass is completed or cancelled. */
#nav-stocks.stk-open{color:#c1272d !important;font-weight:900;animation:stk-breathe 1.5s ease-in-out infinite;}
/* The ✕ inside the search box. The padding is !important because the theme's input rule is. */
#stk-search{padding-right:36px !important;}
.stk-search-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:none;padding:0;background:var(--text);color:var(--bg);font-size:11px;font-weight:900;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* "This item carries a barcode in Loyverse" — a glyph, not the code. Red, top right of the tile's
   picker row. */
.stk-barcode{display:flex;justify-content:flex-end;margin-top:7px;line-height:0;}
/* Console | Loyverse on every tile (OMAN 2026-09-11) — two figures, never one.
   OMAN 2026-09-12: "slightly bigger" — 10.5px → 12px. */
.stk-figs{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin-top:3px;}
.stk-figs span{opacity:.9;}
/* OMAN 2026-09-15 (SPEC §29): the SKU row carries the barcode at its right end; under Console / Loyverse, Alert at
   the left end and P:xx (pending) in orange at the right end; the restock panel splits Arrived | Pending over E.X.P. */
.stk-sku-row{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10.5px;margin-top:2px;}
.stk-sku-row>span{opacity:.65;}
.stk-sku-row .stk-barcode{margin-top:0;}
.stk-figs2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;font-size:12px;}
.stk-figs2{flex-wrap:wrap;}
.stk-alert{display:inline-flex;align-items:center;gap:4px;font-weight:800;flex-wrap:wrap;}
.stk-alert input{width:52px;padding:2px 6px;font-size:12px;border:2px solid var(--text);border-radius:8px;background:var(--card-bg);color:var(--text);}
.stk-alert input:disabled{opacity:.75;cursor:default;background:transparent;}
.stk-alert-pen{border:none;background:none;padding:0 2px;font-size:14px;line-height:1;cursor:pointer;color:var(--text);}
.stk-alert-btn{border:2px solid var(--text);background:#fff;border-radius:999px;padding:1px 8px;font-size:10.5px;font-weight:900;cursor:pointer;}
.stk-alert-btn.save{background:#1f7a3d;color:#fff;border-color:#1f7a3d;}
.stk-alert.low{color:#c1272d;}
.stk-alert.low input{border-color:#c1272d;background:#fff4f4;}
.stk-p{color:#e8710a;font-weight:900;}
/* SPEC §89: the 0 button at the right end of the Alert row (a count is open) — an empty shelf is counted without a scan */
.stk-zero{margin-left:auto;min-width:30px;height:26px;padding:0 9px;border:2px solid var(--text);border-radius:999px;background:#fff;color:var(--text);
  font:inherit;font-size:13px;font-weight:900;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm);}
.stk-zero:hover{background:var(--accent-2);}
.stk-zero-note{font-size:11.5px;font-weight:700;margin-bottom:7px;}
.stk-split{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.stk-split label{display:block;min-width:0;}
.stk-exp-head{display:flex;align-items:center;gap:10px;margin-top:8px;}
.stk-exp-head .stk-field-label{margin-bottom:0;}
.stk-noexp{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:.06em;cursor:pointer;}
.stk-exp{margin-top:3px;}
.stk-exp:disabled{opacity:.45;}
.stk-memo-btn{background:#fff;border:2px solid var(--text);font-weight:900;letter-spacing:.06em;}
.stk-memo-btn.has{background:#fff1e3;border-color:#e8710a;color:#b5530a;}
.stk-memo-sec{margin-bottom:16px;}
.stk-memo-head{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.stk-memo-head span{opacity:.7;}
.stk-memo-row{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;margin-bottom:6px;border:1px solid var(--text);border-radius:10px;background:var(--bg,#fff);font-size:12px;}
.stk-memo-empty{font-size:12px;opacity:.65;}
.stk-memo-note{font-size:11px;opacity:.65;margin:4px 0 0;}
/* ══ SRR — Sales & Credit Note Posting (OMAN 2026-09-13) ══════════════════════════════════
   The pop-out says which posting mode it is in: green, breathing, centred in its title row
   (padding-left balances the ✕ on the right). A column to pick from wears a green frame. */
.srr-posting-head{margin:0 0 12px;font-size:18px;font-weight:900;letter-spacing:.02em;}
#srr-overlay-title.srr-posting{flex:1;text-align:center;padding-left:44px;color:#1f7a3d;font-weight:900;letter-spacing:.02em;animation:srr-post-breathe 1.5s ease-in-out infinite;}
@keyframes srr-post-breathe{0%,100%{opacity:1}50%{opacity:.35}}
.srr-pick-frame{outline:3px solid #1f7a3d;outline-offset:6px;border-radius:14px;animation:srr-pick-glow 1.2s ease-in-out infinite;}
@keyframes srr-pick-glow{0%,100%{outline-color:#1f7a3d}50%{outline-color:#9fe0b4}}
/* OMAN 2026-09-14: Refund is orange, and so is the Credit Note Posting title it opens. */
.btn.srr-refund{background:#e8710a !important;color:#fff !important;font-weight:800;padding:7px 16px;font-size:12px;}
/* OMAN 2026-09-15: Confirm fades and refuses until every compulsory detail is filled. */
.btn.srr-refund:disabled,.btn.srr-refund.srr-refund-off{opacity:.4;cursor:not-allowed;box-shadow:none !important;}
/* OMAN 2026-09-14: in a credit note, Sales Offsetting turns red and COMPLETE sits beside it in green —
   faded until the refund receipt is uploaded. The upload box is a dashed box you click to choose. */
.btn.cn-btn-red{background:#d92d20 !important;color:#fff !important;}
.btn.cn-btn-off{opacity:.4;cursor:not-allowed;box-shadow:none !important;}
.cn-file-box{flex:1;min-width:180px;font-size:12px;padding:6px 8px;border:1.5px dashed var(--text);border-radius:10px;background:#fff;cursor:pointer;}
.cn-doc-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border:1px solid var(--text);border-radius:999px;background:#fff;}
.cn-doc-chip a{color:inherit;font-weight:700;}
.cn-doc-chip button{border:none;background:none;cursor:pointer;font-size:11px;padding:0 2px;color:#a8271f;}
#srr-overlay-title.srr-posting-cn{flex:1;text-align:center;padding-left:44px;color:#e8710a;font-weight:900;letter-spacing:.02em;animation:srr-post-breathe 1.5s ease-in-out infinite;}
.srr-pick-hint{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 9px;padding:7px 10px;border-radius:10px;background:#e9f8ee;color:#1f7a3d;font-size:12px;font-weight:800;}

/* Grooming: full-calendar button + "more sessions" week + month view */
.groom-cal-fullbtn{margin-left:10px;display:inline-flex;align-items:center;gap:6px;}
.groom-more-range{width:fit-content;white-space:nowrap;margin:4px 4px 14px auto;font-size:13px;font-weight:700;color:#6b6256;background:var(--accent-2);border:1.5px solid var(--text);border-radius:181px;padding:4px 13px;}
.groom-more-note{margin-top:14px;font-size:13px;color:#6b6256;}
.board-more-range{width:fit-content;white-space:nowrap;margin:0 6px 12px auto;font-size:13px;font-weight:700;color:#6b6256;background:var(--accent-2);border:1.5px solid var(--text);border-radius:181px;padding:4px 13px;}
.linklike{background:none;border:none;color:var(--text);font-weight:800;cursor:pointer;text-decoration:underline;padding:0;font:inherit;}
.gcal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding-right:48px;flex-wrap:wrap;}
.gcal-head-l{display:flex;align-items:center;gap:12px;}
.gcal-head-l h2{margin:0;font-size:34px;line-height:1;}
.gcal-head-r{display:flex;align-items:center;gap:8px;}
.gcal-navbtn{min-width:38px;font-size:18px;line-height:1;padding:6px 12px;}
.gcal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.gcal-weekdays span{text-align:center;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#6b6256;padding:4px 0;}
.gcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.gcal-cell{min-height:104px;background:var(--card-bg);border:2px solid var(--text);border-radius:12px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:5px;overflow:hidden;transition:background .12s;}
.gcal-cell:hover{background:var(--accent-2);}
.gcal-cell.gcal-blank{background:transparent;border:none;cursor:default;}
.gcal-cell.gcal-blank:hover{background:transparent;}
.gcal-cell.is-today{background:var(--accent-2);}
.gcal-daynum{font-weight:800;font-size:14px;}
.gcal-cell.is-today .gcal-daynum{background:var(--accent);border:2px solid var(--text);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;}
.gcal-appts{display:flex;flex-direction:column;gap:3px;overflow-y:auto;}
.gcal-appt{background:var(--accent);border:1.5px solid var(--text);border-radius:6px;padding:2px 6px;font-size:10.5px;font-weight:700;line-height:1.25;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gcal-appt:hover{filter:brightness(.96);}
.gcal-appt-t{font-weight:800;}
.gcal-foot{margin-top:16px;font-size:12px;color:#6b6256;}
@media(max-width:640px){.gcal-cell{min-height:74px;}.gcal-head-l h2{font-size:26px;}}

/* Grooming / Boarding full-month breakdown view */
.fv-searchbar{display:flex;align-items:center;gap:8px;border:2px solid var(--text);border-radius:14px;background:#fffefb;padding:8px 14px;margin-bottom:14px;}
.fv-search-ic{font-size:15px;line-height:1;opacity:.7;}
.fv-search-input{flex:1;border:none;background:none;outline:none;font:inherit;font-size:14px;font-weight:600;color:var(--text);}
.fv-search-input::placeholder{color:#a89e8c;font-weight:600;}
.fv-search-clear{background:var(--text);color:var(--bg);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.fv-summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;}.fv-stat{flex:1;min-width:118px;border:2px solid var(--text);border-radius:14px;padding:12px 14px;background:#fffefb;}
.fv-stat .n{font-size:26px;font-weight:800;line-height:1;font-family:'Quicksand',sans-serif;}
.fv-stat .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#6b6256;margin-top:5px;}
.fv-body{max-height:54vh;overflow-y:auto;border:2px solid var(--text);border-radius:14px;background:#fffefb;}
.fv-daygroup:last-child{border-bottom:none;}
.fv-dayhead{position:sticky;top:0;background:var(--accent-2);padding:9px 16px;font-weight:800;font-size:13px;border-bottom:1.5px solid var(--text);display:flex;justify-content:space-between;align-items:center;z-index:1;}
.fv-dayhead .fv-daycount{font-size:11px;font-weight:700;color:#6b6256;}
.fv-row{display:grid;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid #f0ead6;font-size:13px;cursor:pointer;}
.fv-row:last-child{border-bottom:none;}
.fv-row:hover{background:#fff6e9;}
.gfv-row{grid-template-columns:58px 1.5fr 1fr 1.4fr 100px;}.bfv-row{grid-template-columns:1.4fr 0.9fr 1.6fr 1.4fr 110px;}
.statd-grow{grid-template-columns:76px 1.4fr 0.9fr 1.3fr 100px;}
.ff-bb-stat.stat-click{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
.ff-bb-stat.stat-click:hover{transform:translateY(-2px);box-shadow:0 4px 0 0 rgba(0,0,0,.12);}
.fv-time{font-weight:800;color:#b8456a;}
.fv-pet{font-weight:700;}
.fv-pet small{display:block;font-weight:600;color:#6b6256;font-size:11.5px;margin-top:1px;}
.fv-muted{color:#6b6256;}
.fv-cust{text-align:right;min-width:0;overflow-wrap:anywhere;}
.fv-cust .fv-co{font-weight:700;color:#3a352c;}
.fv-cust .fv-cc{font-size:11.5px;color:#6b6256;}
.fv-badge{justify-self:end;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 10px;border-radius:999px;border:1.5px solid var(--text);white-space:nowrap;}
.fv-badge.sched{background:#bfe0ff;}
.fv-badge.done{background:#bfe8cf;}
.fv-badge.canc{background:#ffc2cf;}
.fv-badge.arr{background:#fdf3dc;}
.fv-badge.arr{background:#fdf3dc;}
.fv-badge.past{background:#e7e1d4;color:#6b6256;}
.fv-empty{padding:34px;text-align:center;color:#6b6256;font-weight:600;}
@media(max-width:640px){.gfv-row,.bfv-row{grid-template-columns:1fr 1fr;}.fv-badge{justify-self:start;}}

/* Floating save/log bars: reposition (no sidebar now) + festival look */
#admin-log-fab,#pet-log-fab{left:24px !important;}
#admin-save-bar,#pet-save-bar{background:var(--accent) !important;color:var(--text) !important;border:2px solid var(--text);box-shadow:var(--shadow-card) !important;}
#admin-save-bar span,#pet-save-bar span{color:var(--text) !important;}
#admin-save-bar .btn,#pet-save-bar .btn{border:2px solid var(--text) !important;}

/* Toast */
#toast{background:var(--text) !important;color:var(--bg) !important;border:2px solid var(--text);border-radius:181px !important;}

/* Password modal */
.pov{z-index:6500 !important;}
/* ⛔ SPEC §52 (OMAN 2026-09-21): A CONFIRM IS ALWAYS THE TOP-MOST THING. "the unsaved guard appear at the back layer
   of the agreement, i cant see the unsaved guard and i cant click anything else making the agreement page stucked."
   Exactly that: #ui-modal is a .pov at 6500 and the agreement sits at 7000, so the question was painted behind the
   document that asked it — and because the dialog still had the page's attention, nothing else would answer. A dialog
   that BLOCKS is a dialog that must be visible, so these three sit above every content layer (the Watchdog's 8900
   included) and below the sign-in gate at 10000. Any future pop-out picks a z BELOW 9000 for the same reason. */
#ui-modal,#pwd-modal,#del-modal,#pin-modal{z-index:9500 !important;}
.pov .pb{background:var(--card-bg) !important;border:2px solid var(--text) !important;border-radius:20px !important;box-shadow:rgba(0,0,0,0.3) 10px 10px 0 0 !important;}
.pov .pb h3{font-family:'Quicksand',sans-serif;}

/* ============================================================
   FOOTER
   ============================================================ */
.ff-footer{background:var(--text);color:var(--bg);padding:54px 0 30px;text-align:center;border-top:2px solid var(--text);}
.ff-footer .foot-title{font-family:'Sugar Peachy',sans-serif;color:var(--accent);margin-bottom:14px;font-size:46px;}
.ff-footer p{font-size:15px;opacity:.92;}
.ff-footer .paw-row{font-size:30px;margin-bottom:14px;}

/* ============================================================
   REVEAL on scroll
   ============================================================ */
.anim [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);}
.anim [data-reveal].in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .anim [data-reveal]{opacity:1 !important;transform:none !important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  .ff-nav-links a:not(.btn):not(.ff-mini){display:none;}
  .b1,.b3,.b5{display:none;}
  .ff-hero{padding:54px 18px 40px;}
}


/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-05.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-05.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-05.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-05.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-02.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-03.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-04.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/merriweather-700-05.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-300-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-300-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/poppins-300-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-400-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-400-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/poppins-400-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-500-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-500-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/poppins-500-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-600-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-600-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-600-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-700-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* vietnamese */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/crimson-text-400-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/crimson-text-400-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/crimson-text-400-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/crimson-text-600-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/crimson-text-600-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/crimson-text-600-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/crimson-text-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/crimson-text-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/crimson-text-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-02.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dancing-script-700-03.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* latin-ext */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/architects-daughter-400-01.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/architects-daughter-400-02.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


.ff-rainbow-bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden;}
/* ── VACCINATION DUE (OMAN 2026-09-03) ────────────────────────────────────────────────
   A pet inside the ±7-day window whose 2nd jab is not confirmed. The frame pulses and the
   vaccination badge glows, so an overdue animal is visible while scanning rather than only
   on opening the card.
   prefers-reduced-motion holds the alert STATE without the movement — the warning must not
   disappear for someone who cannot tolerate flashing, it just stops flashing. */
.pet-card.vacc-due {
  border: 2px solid #d92d20 !important;
  animation: vaccPulse 1.15s ease-in-out infinite;
}
@keyframes vaccPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(217, 45, 32, 0); }
}
.badge.vacc-glow {
  background: #d92d20 !important;
  color: #fff !important;
  animation: vaccGlow 1.15s ease-in-out infinite;
}
@keyframes vaccGlow {
  0%, 100% { box-shadow: 0 0 3px 0 rgba(217, 45, 32, .9); }
  50%      { box-shadow: 0 0 11px 3px rgba(217, 45, 32, .65); }
}
.pet-no {
  display: inline-block;
  font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace;
  background: #111; color: #fff;
  padding: 3px 5px; border-radius: 4px;
  vertical-align: 1px; letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .pet-card.vacc-due { animation: none; box-shadow: 0 0 0 4px rgba(217, 45, 32, .35); }
  .badge.vacc-glow   { animation: none; }
}

/* ══ THE RECEIPT ZONE FILTER TOGGLE ════════════════════════ OMAN 2026-09-09
   "the square check box first change to round edge, then all it all to boarding and grooming"

   A native checkbox is a hard-cornered square the page cannot round — the shape belongs to the
   platform, not the stylesheet — so the control is drawn here instead. Round EDGES, not a
   circle: it is still a checkbox, and a circle would read as a radio button, which promises
   that picking one un-picks another. Same rule as the HUD (Gehirn §5.2, 2026-08-01).

   One selector, every zone: pet, boarding and grooming all mount the same `.srr-zone-filter`.

   !important throughout, and not for fun: the FlowFest theme block above sets border,
   border-radius and background on every `input` with !important, so a plain class loses to it
   even though it is the more specific selector. `width` is there for the same reason — the
   base input rule stretches every field to 100%, which on a 17px box is the whole toolbar. */
.srr-zone-filter{
  -webkit-appearance:none; appearance:none; margin:0; cursor:pointer;
  width:17px !important; height:17px; flex:none; padding:0 !important;
  border:2px solid var(--text,#1e293b) !important;
  border-radius:5px !important;
  background:#fff !important;
  display:inline-grid; place-content:center;
  transition:background .12s ease;
}
.srr-zone-filter::before{
  content:''; width:9px; height:9px;
  transform:scale(0); transition:transform .12s ease;
  box-shadow:inset 1em 1em #fff;
  clip-path:polygon(14% 44%,0 60%,40% 100%,100% 22%,84% 6%,38% 66%);
}
.srr-zone-filter:checked{ background:var(--text,#1e293b) !important; }
.srr-zone-filter:checked::before{ transform:scale(1); }
.srr-zone-filter:focus-visible{ outline:2px solid var(--text,#1e293b); outline-offset:2px; }


/* ══ BOOT SPLASH + LOGIN WORDMARK ══════════════════════════ OMAN 2026-09-09
   "shows whole black and a big (Star) JUJUBA PETS ... to be in the middle on the page, while
    refreshing, instead of showing our internal structure."

   ⛔ THE COVER IS CSS, NOT SCRIPT. The flash being hidden happens BEFORE any script runs, so a
      splash a script has to add is always one frame too late. This paints with the first frame
      because the element is the first thing in <body> and this rule is in the stylesheet the
      <head> already blocks on.

   ⛔ AND IT REMOVES ITSELF IF NOTHING ELSE DOES. A cover only script can lift turns any early
      throw into a permanently black console — strictly worse than the flash. The animation
      hard-hides it at 8s no matter what, so the failure mode is an ugly page, never no page. */
#boot-splash{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:#0d0b09;
  animation:boot-failsafe 8s step-end forwards;
}
#boot-splash.gone{display:none !important;}
@keyframes boot-failsafe{ from{visibility:visible} to{visibility:hidden;pointer-events:none} }

.boot-mark{
  font-family:'Merriweather',Georgia,serif;
  font-weight:900;letter-spacing:-.01em;
  font-size:clamp(30px,7vw,68px);
  color:#f7f4ef;
  display:flex;align-items:center;gap:.28em;
  padding:0 18px;text-align:center;
}
.boot-star{color:#e8547c;display:inline-block;animation:boot-spin 2.4s linear infinite;}
@keyframes boot-spin{ to{transform:rotate(360deg)} }

/* The login wordmark: the console's own mark, above the card rather than inside it.
   OMAN 2026-09-09: three times the size it was (42px -> 126px at the top of the clamp), and it
   no longer sits hard against the card. `margin:auto 0` inside the column is what centres it in
   the gap between the frame's top edge and the box, rather than a fixed margin that would be
   right at one window height and wrong at every other.
   The lower bound of the clamp is what stops it wrapping on a phone; the vw term is what keeps
   the ratio on a wide screen. */
/* ⛔ THE CARD IS CENTRED ON THE SCREEN, AND THE MARK IS TAKEN OUT OF THE FLOW SO IT STAYS
   THAT WAY. OMAN 2026-09-10: "move the credential box to the center of the screen." While the
   wordmark sat above it in the same column, the pair was centred and the box therefore sat
   half a wordmark BELOW centre — moving the box means the mark can no longer occupy the same
   stack. It is absolute now, filling the band from the top edge down to the card, which is
   also what "centered between the top framed edge and the top of the box" asked for.

   The 190px is half a card plus its gap. A magic number, and a bounded one: it only decides
   where the band ends, so being a little out nudges the mark rather than displacing the box.

   Sizing, in order: 126 -> 63 (halved, 2026-09-09) -> 80 (2026-09-10, "slightly bigger").

   ⛔ AND THE CARD DOES NOT MOVE WHEN THIS CHANGES. That is the point of the mark being
      absolute: it is laid out against the SCREEN, not stacked above the box, so its size is
      free to change without pushing anything. Growing it while it sat in the column would have
      shifted the box off centre again — which is the state the last change existed to fix. */
.login-mark{
  position:absolute;top:0;left:0;right:0;
  height:calc(50% - 190px);min-height:64px;
  display:flex;align-items:center;justify-content:center;gap:.22em;
  font-family:'Merriweather',Georgia,serif;font-weight:900;
  font-size:clamp(26px,8.2vw,80px);
  line-height:1.05;color:var(--text,#121212);
  margin:0;padding:0 16px;
  text-align:center;white-space:nowrap;pointer-events:none;
}
/* On a short window the band collapses to its min-height and would crowd the card, so the mark
   goes back into the flow above it — a smaller mark beats an overlapping one. */
@media (max-height:560px){
  .login-mark{position:static;height:auto;min-height:0;margin-bottom:14px;}
}
/* ⛔ SPINS ONLY WHILE TYPING. A star that turns forever is decoration; one that turns while
   credentials are being entered is feedback, and stopping is how it says the field is idle.
   The class is added on input by app.js and dropped after a pause. */
.login-mark .star{color:#e8547c;display:inline-block;transition:transform .25s ease;}
.login-mark.typing .star{animation:boot-spin 1.1s linear infinite;}

/* ══ WATCHDOG (OMAN 2026-09-14) ══════════════════════════════════════════════════════════════
   "top left corner, BETWEEN the moving words and rainbow… add a white rectangle box… title WATCHDOG".
   On a screen wide enough to HAVE that margin the box is pinned in it: under the band, above the
   rainbow, as wide as the margin. Narrower, there is no margin to put it in — it sits above
   Dashboard in the page instead of covering the numbers. */
/* OMAN 2026-09-16: nothing to watch = no box at all. The wide-screen rule below sets display:flex, which beats [hidden]. */
.watchdog[hidden]{display:none !important;}
.watchdog{background:#fff;border:2px solid var(--text);border-radius:18px;box-shadow:var(--shadow-card);padding:12px 14px;margin:0 0 24px;}
.watchdog .wd-title{text-align:center;font-weight:900;letter-spacing:.16em;font-size:16px;padding-bottom:8px;border-bottom:2px solid var(--text);}
.watchdog .wd-cat{display:flex;justify-content:space-between;align-items:center;margin:11px 0 6px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.watchdog .wd-cat span:last-child{min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--text);color:#fff;}
.watchdog .wd-empty{font-size:12px;opacity:.6;margin:6px 0 2px;}
.watchdog .wd-item{border:1.5px solid var(--text);border-radius:12px;margin-bottom:6px;background:#fff;overflow:hidden;}
.watchdog .wd-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 9px 3px;cursor:pointer;font-size:12px;}
.watchdog .wd-row:focus-visible{outline:2px solid #1f7a3d;outline-offset:-2px;border-radius:10px;}
.watchdog .wd-status{font-size:10px;font-weight:900;letter-spacing:.04em;padding:2px 7px;border-radius:999px;white-space:nowrap;}
.watchdog .wd-drafted{color:#e8710a;border:1.5px dashed #e8710a;background:#fff6ee;}
.watchdog .wd-pending{color:#8a5a00;border:1.5px solid #8a5a00;background:#fdf3dc;}
.watchdog .wd-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.watchdog .wd-amt{font-variant-numeric:tabular-nums;white-space:nowrap;}
.watchdog .wd-reason{padding:0 9px 7px;font-size:11.5px;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.watchdog .wd-item.open .wd-reason{display:none;}
.watchdog .wd-edit{padding:2px 9px 9px;}
.watchdog .wd-edit textarea{width:100%;box-sizing:border-box;font:inherit;font-size:12px;padding:7px;border:1.5px solid var(--text);border-radius:9px;resize:vertical;}
.watchdog .wd-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;}
.watchdog .wd-msg{font-size:11px;}
.watchdog .wd-stage{padding:0 9px 2px;font-size:11px;color:#8a5a00;}
.watchdog .wd-stage b{font-weight:900;}
/* OMAN 2026-09-14: moved to the RIGHT margin — slightly higher, nearer the edge, slightly shorter.
   wdPlace() measures the exact top and height; these are the fallbacks. */
/* SPEC §48 (2026-09-20): ABOVE every pop-out's backdrop — they live in the side margins, clear of the 1280 px column every
   pop-out card sits in, so they never cover one.
   ⛔ SPEC §49 (2026-09-20): THEY NEVER LEAVE THE VIEWPORT ANY MORE. Until now a width under 1700 px (a zoomed page is
      narrower) dropped both boxes back into the page, above Dashboard — still there, but scrolled off the moment anybody
      walked to Pet Home. That flip, not the z-index, is the "disappears and comes back" OMAN keeps reporting. They are
      position:fixed at EVERY width now; when the side margin is too thin to hold the box it becomes a 36 px tab on the
      edge (.wd-tab, set by wdDock/dlPlace) that opens on a click. A box that is always somewhere cannot vanish. */
/* ⛔ SPEC §52 (OMAN 2026-09-21): AND THE TWO BOXES GO BEHIND THE POP-OUTS. "DAILIES pop out at the front of
   anything including when i click at the SRR, Docs and Stocks pop out, bring the DAILIES and WATCHDOG to the back where
   it will not block any pop out."
   §48 raised them to 8900 so a pop-out's backdrop could not hide them, on the reasoning that they live in the side
   margins clear of the 1280 px column. That reasoning does not hold for SRR, Docs and Stocks, whose cards are up to
   1770 px wide and DO reach into those margins — so on a wide screen the boxes sat on top of the sheet being read.
   They are page furniture now: above the page, below the nav (500) and far below every pop-out. §49's fix stands and is
   what makes this safe — they no longer drop into the page and scroll away, so "covered while a pop-out is open" is the
   only thing that hides them, and closing it brings them straight back. */
.watchdog{position:fixed;z-index:460;margin:0;right:10px;left:auto;
  top:calc(var(--nav-h,64px) + 56px);
  width:min(340px,max(190px,calc((100vw - 1280px) / 2 - 12px)));
  max-height:calc(100vh - var(--nav-h,64px) - 56px - 520px);min-height:140px;overflow:hidden;
  display:flex;flex-direction:column;}
/* OMAN 2026-09-15: only the list scrolls, and its thin bar sits inside the box's padding, clear of the border */
.watchdog .wd-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin-right:-8px;padding-right:8px;}
/* the thin-margin form: the title turned on its side, the list closed, and a click opens it over the page */
.watchdog.wd-tab{width:36px;min-height:0;padding:10px 2px;cursor:pointer;}
.watchdog.wd-tab .wd-title{writing-mode:vertical-rl;border-bottom:none;padding:0;font-size:12px;margin:0 auto;}
.watchdog.wd-tab .wd-list{display:none;}
.watchdog.wd-tab.wd-open{width:min(340px,calc(100vw - 40px));padding:12px 14px;cursor:auto;}
.watchdog.wd-tab.wd-open .wd-title{writing-mode:horizontal-tb;border-bottom:2px solid var(--text);padding-bottom:8px;font-size:16px;}
.watchdog.wd-tab.wd-open .wd-list{display:block;}
.watchdog .wd-list{scrollbar-width:thin;scrollbar-color:rgba(18,18,18,.35) transparent;}
.watchdog .wd-list::-webkit-scrollbar{width:5px;}
.watchdog .wd-list::-webkit-scrollbar-thumb{background:rgba(18,18,18,.35);border-radius:5px;}
.watchdog .wd-list::-webkit-scrollbar-track{background:transparent;}
.watchdog .wd-warn{font-size:10.5px;opacity:.7;margin:6px 0 0;}

/* OMAN 2026-09-17 (SPEC §41): DAILIES — the Watchdog's mirror in the LEFT margin, one pill per state */
.watchdog.dailies{left:10px;right:auto;}
.watchdog .dl-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;padding:7px 9px 3px;font-size:12px;}
.watchdog .dl-done{color:#1f7a3d;border:1.5px solid #1f7a3d;background:#e2f5e8;}
.watchdog .dl-due{color:#8a5a00;border:1.5px solid #8a5a00;background:#fdf3dc;}
.watchdog .dl-late{color:#a8271f;border:1.5px solid #a8271f;background:#fde2e0;}
.watchdog .dl-next{color:#475569;border:1.5px solid #94a3b8;background:#f1f5f9;}
.watchdog .dl-event{color:#6b3fa0;border:1.5px dashed #6b3fa0;background:#f4eefb;}
.watchdog.dailies .wd-stage{color:inherit;opacity:.75;}
/* SPEC §42: the Dashboard strip that says this screen is not sharing */
.home-status{margin:0 0 16px;padding:10px 14px;border:2px solid #a8271f;border-radius:14px;background:#fde2e0;color:#a8271f;font-size:13px;font-weight:800;}
.home-status[hidden]{display:none !important;}

/* ══ THE TREE (OMAN 2026-09-14, replaced the same day with HIS tree) ═══════════════════════════════
   assets/img/tree.png is the half tree and its ground exactly as uploaded; it sits in the bottom-right
   corner at the rainbow's height (440px), trunk on the edge. The crown's flutter is the SVG filter in the
   markup; the sway below moves only under html.anim, so prefers-reduced-motion keeps it still. */
.ff-tree{position:absolute;right:0;bottom:0;height:440px;width:238px;overflow:visible;}
/* OMAN 2026-09-15: HIS rainbow path, running out from BEHIND the tree (it is earlier in the markup). The width is
   fixed and its shape set so rtGeometry knows the walk before the picture loads; translateY(43%) sinks the lower half
   below the screen edge — "only shows half of rainbow as walking path". It scales with the tree at the narrow size. */
.ff-rainbow-path{position:absolute;right:0;bottom:0;width:303px;height:auto;aspect-ratio:521/137;transform:translateY(43%);pointer-events:none;}
html.anim .ff-tree .tr-crown{transform-box:view-box;transform-origin:250px 330px;animation:tr-sway 7s ease-in-out infinite;}
@keyframes tr-sway{0%,100%{transform:rotate(-.9deg);}50%{transform:rotate(.9deg);}}

/* ══ THE GOLDEN APPLE (OMAN 2026-09-14) — on the tree's ground, shining, clickable ═════════════════
   .ff-orchard is the tree's own box; the apple sits on its grass. The shine is a light sweep masked to
   the apple's silhouette plus a warm glow — both only under html.anim. */
.ff-orchard{position:fixed;right:0;bottom:0;height:440px;width:238px;pointer-events:none;z-index:1;}   /* 40 → 1: behind the boxes (2026-09-16) */
.gold-apple{position:absolute;width:40px;height:43px;padding:0;border:none;background:none;cursor:pointer;pointer-events:auto;
  border-radius:50%;transition:transform .18s ease;filter:drop-shadow(0 0 4px rgba(255,200,40,.75));}
.gold-apple img{display:block;width:100%;height:100%;object-fit:contain;}
.gold-apple::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(assets/img/gold-apple.png) center/contain no-repeat;mask:url(assets/img/gold-apple.png) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%) -60px 0/200% 100% no-repeat;opacity:.0;}
.gold-apple:hover{transform:translate(-50%,0) translateY(-3px) scale(1.08);}
.gold-apple:focus-visible{outline:3px solid #1f7a3d;outline-offset:3px;}
html.anim .gold-apple{animation:apple-glow 2.4s ease-in-out infinite;}
html.anim .gold-apple::after{animation:apple-shine 3.2s ease-in-out infinite;}
/* OMAN 2026-09-15: "make the apple flutter too, and add flash shining effect" — it sways like the tree and the pets,
   and a white star flashes on it */
html.anim .gold-apple img{animation:apple-flutter 2.8s ease-in-out infinite;transform-origin:50% 90%;}
.gold-apple::before{content:"\2726";position:absolute;right:-7px;top:-9px;z-index:1;font-size:17px;line-height:1;color:#fff;pointer-events:none;
  text-shadow:0 0 4px #fff6c2,0 0 10px #ffd23f,0 0 16px #ffb300;opacity:0;}
html.anim .gold-apple::before{animation:apple-flash 2.6s ease-in-out infinite;}
/* OMAN 2026-09-16 (SPEC §39): the RED apple shines and flashes like the gold one but has NO star; the GREEN apple is an
   ordinary apple — no shine, no glow, no star. Both are the gold picture recoloured, so the three share one silhouette. */
.red-apple img,img.apple-tint-red{filter:hue-rotate(-42deg) saturate(2.4) brightness(.92);}
.green-apple img,img.apple-tint-green{filter:hue-rotate(62deg) saturate(1.5) brightness(.95);}
.red-apple::before,.green-apple::before{content:none;}
html.anim .red-apple::before,html.anim .green-apple::before{animation:none;}
.red-apple{filter:drop-shadow(0 0 4px rgba(255,60,50,.7));}
html.anim .red-apple{animation:apple-glow-red 2.4s ease-in-out infinite;}
@keyframes apple-glow-red{0%,100%{filter:drop-shadow(0 0 3px rgba(255,60,50,.55));}50%{filter:drop-shadow(0 0 12px rgba(255,80,60,1));}}
.green-apple,html.anim .green-apple{filter:none;animation:none;}
.green-apple::after,html.anim .green-apple::after{content:none;animation:none;}
@keyframes apple-flutter{0%,100%{transform:rotate(-6deg) translateY(0);}50%{transform:rotate(6deg) translateY(-2px);}}
@keyframes apple-flash{0%,52%,100%{opacity:0;transform:scale(.2) rotate(0deg);}62%{opacity:1;transform:scale(1.3) rotate(45deg);}
  72%{opacity:.9;transform:scale(.9) rotate(80deg);}84%{opacity:0;transform:scale(.3) rotate(120deg);}}
@keyframes apple-glow{0%,100%{filter:drop-shadow(0 0 3px rgba(255,200,40,.6));}50%{filter:drop-shadow(0 0 12px rgba(255,215,60,1));}}
@keyframes apple-shine{0%{background-position:-60px 0;opacity:0;}15%{opacity:1;}45%{background-position:60px 0;opacity:1;}60%,100%{background-position:60px 0;opacity:0;}}
@media (max-width:900px){
  .ff-tree,.ff-orchard{height:260px;width:141px;}
  .ff-rainbow-path{width:180px;}
  .gold-apple{width:30px;height:32px;}
  .bee-hive{width:26px;left:calc(82% - 13px);}
}

/* the apple's pop-out */
.apple-intro{display:flex;gap:12px;align-items:center;font-size:12.5px;line-height:1.45;padding-bottom:10px;border-bottom:1px solid var(--text);}
.apple-intro img{width:54px;height:auto;flex:none;}
.apple-note{margin-top:10px;padding:8px 10px;border-radius:10px;background:#fdf3dc;color:#8a5a00;font-size:12px;font-weight:700;}
.apple-sec{margin:14px 0 6px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.7;}
.apple-split{display:flex;flex-wrap:wrap;gap:6px;}
.apple-split span{font-size:12px;padding:3px 9px;border:1.5px solid var(--text);border-radius:999px;background:#fff;}
.apple-split i{opacity:.65;}
.apple-lane{display:grid;grid-template-columns:38px minmax(80px,140px) 1fr auto;gap:8px;align-items:center;margin-top:7px;font-size:12px;}
.apple-rank{font-weight:900;}
.apple-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
.apple-track{position:relative;height:22px;border-radius:999px;background:repeating-linear-gradient(90deg,#eef7e8 0 18px,#e1f0d6 18px 36px);border:1.5px solid var(--text);overflow:hidden;}
.apple-run{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#f0bb0d,#f97028);border-radius:999px;}
.apple-pet{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:14px;}
.apple-amt{font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ══ APPROVALS — full details, and the file one layer up (OMAN 2026-09-14) ═════════════════════ */
.apq-toggle{margin-top:7px;font-size:12px;font-weight:800;cursor:pointer;color:#1f7a3d;display:inline-block;}
.apq-detail{margin-top:8px;padding:10px 12px;border:1.5px dashed var(--text);border-radius:12px;background:#fffdf7;}
.doc-gallery{display:flex;flex-wrap:wrap;gap:8px;}
.doc-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;width:112px;padding:6px;border:1.5px solid var(--text);border-radius:12px;background:#fff;cursor:zoom-in;font:inherit;}
.doc-thumb img{width:98px;height:74px;object-fit:cover;border-radius:8px;background:#f3eee2;}
.doc-thumb .doc-pdf{display:flex;align-items:center;justify-content:center;width:98px;height:74px;border-radius:8px;background:#fdecea;color:#a8271f;font-weight:900;}
.doc-thumb .doc-name{font-size:10.5px;max-width:98px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.doc-viewer{position:fixed;inset:0;z-index:6800;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;}
.doc-viewer[hidden]{display:none;}
.doc-viewer .dv-box{background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:18px;width:min(1100px,96vw);height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:rgba(0,0,0,.35) 10px 10px 0 0;}
.doc-viewer .dv-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:2px solid var(--text);font-size:13px;}
.doc-viewer .dv-head b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.doc-viewer .dv-links a{font-size:12px;font-weight:700;color:inherit;}
.doc-viewer .dv-close{border:2px solid var(--text);background:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:14px;}
.doc-viewer .dv-body{flex:1;display:flex;align-items:center;justify-content:center;background:#f3eee2;overflow:auto;}
.doc-viewer .dv-body img{max-width:100%;max-height:100%;object-fit:contain;}
.doc-viewer .dv-body iframe{width:100%;height:100%;border:0;background:#fff;}

/* ══ THE RAINBOW TREE — the race (OMAN 2026-09-15, SPEC §28) ════════════════════════════════════
   #rt-race sits UNDER the content boxes (z 1 < .ff-container's 2) and over the rainbow, so a pet never
   covers a box; #rt-apples sits over everything so an apple can be clicked. A pet's point is its feet:
   translate(-50%,-100%). Left-lane pets bob in place; right-side pets drift slightly right; hoppers glide
   between lanes. All movement is html.anim only. */
.rt-race{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
/* OMAN 2026-09-16: apples behind the boxes too (45 → 1). And on a tablet the address bar folds away while scrolling, which
   moves the bottom of the screen — the tree moves with it (bottom:0) but pets and apples placed by `top` stayed behind for a
   moment. They are placed by `bottom` now (rtPaint), so they ride the bottom edge with the tree, frame for frame. */
.rt-apples{position:fixed;inset:0;pointer-events:none;z-index:1;}
.rt-race[hidden],.rt-apples[hidden],.bee-hive[hidden]{display:none;}
.rt-pet{position:absolute;width:54px;height:54px;transform:translate(-50%,0);}
/* OMAN 2026-09-15: the pet is HIS PNG as uploaded — no black line. Third ask: "slightly bigger (46 → 54px)… more contrast":
   a thin white rim and a soft shadow lift it off the rainbow; your own pet adds a green glow */
.rt-pet img{display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.45)) saturate(1.15) contrast(1.08);}
.rt-pet.rt-me img{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(31,122,61,.95)) saturate(1.15) contrast(1.08);}
/* the pet's name in a white pill that covers just the name */
.rt-name{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:900;line-height:1;
  color:#121212;background:#fff;border:1.5px solid #121212;border-radius:999px;padding:2px 7px;margin-bottom:2px;pointer-events:none;}
.rt-hopper{transition:left 1.4s cubic-bezier(.4,.1,.3,1),bottom 1.4s cubic-bezier(.4,.1,.3,1);}
/* every pet stays on its spot and flutters there, the way the tree's crown does */
html.anim .rt-pet img{animation:rt-flutter 2.6s ease-in-out infinite;transform-origin:50% 100%;}
html.anim .rt-right img{animation:rt-flutter-drift 2.6s ease-in-out infinite;}
@keyframes rt-flutter{0%,100%{transform:rotate(-3deg) translateY(0);}50%{transform:rotate(3deg) translateY(-1.5px);}}
@keyframes rt-flutter-drift{0%,100%{transform:rotate(-3deg) translateX(0);}50%{transform:rotate(3deg) translateX(4px);}}
.rt-apple{transform:translate(-50%,0);pointer-events:auto;}
.bee-hive{position:absolute;left:calc(82% - 20px);top:61.3%;width:40px;padding:0;border:none;background:none;cursor:pointer;pointer-events:auto;transform-origin:50% 0;}
.bee-hive img{display:block;width:100%;height:auto;}
.bee-hive:focus-visible{outline:3px solid #1f7a3d;outline-offset:2px;}
html.anim .bee-hive{animation:hive-sway 3.4s ease-in-out infinite;}
@keyframes hive-sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}

/* the pet picker (My Pet, Employee accounts) */
.pet-picker{display:grid;gap:7px;}
.pet-preview{display:flex;gap:12px;align-items:center;min-height:70px;padding:8px;border:1.5px dashed var(--text);border-radius:12px;background:#fff;}
.pet-preview img{width:84px;height:84px;object-fit:contain;background:repeating-conic-gradient(#f3eee2 0 25%,#fff 0 50%) 0 0/14px 14px;border-radius:8px;}
.pet-msg{font-size:11.5px;margin-top:4px;}

/* ══ MUSHROOM (OMAN 2026-09-15) — the whole pop-out is his picture ════════════════════════════════
   The card is the image's own size and shape, so nothing is cropped; ✕ is the console's own close button,
   the title is the JUJUBA PETS wordmark (Sugar Peachy; the star removed 2026-09-15) with a cream halo to read on the wood.
   The travel map: centred, then moved left and up by twice a small step (8% each way) — his "slightly left, slightly
   higher x 2". One number each for its place (left/top) and size (width). */
#sec-mushroom{padding:6px 16px;}
/* OMAN 2026-09-15 (fourth ask): "10% longer on the left and right". The card is 1.1 × the picture's width at the SAME
   height, and the picture is stretched sideways to fill it (object-fit:fill), never cropped — so every % place on it
   (couches, table, map, playbook) still lands on the same spot of his drawing. Height still fits the screen. */
.mushroom-card{position:relative;margin:auto 0;width:min(1298px,97vw,calc((100vh - 12px) * 905 * 1.1 / 897));aspect-ratio:995.5 / 897;
  border:2px solid var(--text);border-radius:22px;overflow:hidden;box-shadow:rgba(0,0,0,.3) 12px 12px 0 0;line-height:0;}
.mushroom-img{display:block;width:100%;height:100%;object-fit:fill;}
.mushroom-title{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:clamp(34px,6vw,60px);line-height:1;
  white-space:nowrap;cursor:default;text-shadow:0 0 3px var(--bg),0 0 6px var(--bg),0 0 12px var(--bg),0 0 18px var(--bg);}
.mushroom-title,.mushroom-card .ff-modal-close{z-index:5;}
/* OMAN 2026-09-15 (third ask): the map at HALF its size (26% → 13%), its centre moved from 42%/42% to 34%/34%. The two
   boxes hang off the map itself, a small gap above and below, exactly as wide as it; they are not buttons. */
/* OMAN 2026-09-15 (fourth ask): slightly smaller (13% → 10% of the now 10%-wider card ≈ 15% fewer pixels), down two small
   steps (34% → 42%), left one (34% → 30%), and the drawing alone tilted a little to the left (-3°); the boxes stay level. */
/* OMAN 2026-09-16 (fifth ask): "the travel drawing 2 times left" → 30% → 22% (two small steps of 4); the NEXT box above it
   "slightly longer to fit in all words, never 2 rows" → one line, as long as its words, centred over the map. */
/* OMAN 2026-09-16 (seventh ask): "make the travel drawing and playbook both slightly rightwards" → map 18% → 20%, book 53% → 55% */
.mr-trip{position:absolute;left:20%;top:42%;width:10%;transform:translate(-50%,-50%);z-index:3;line-height:1.15;}
.mr-trip-map{display:block;width:100%;padding:0;border:none;background:none;cursor:default;}
.mr-trip-map.can-edit{cursor:pointer;}
.mr-trip-map.can-edit:hover img{transform:rotate(-3deg) scale(1.04);}
.mr-trip-map img{display:block;width:100%;height:auto;transform:rotate(-3deg);transition:transform .15s;}
.mr-trip-next,.mr-trip-when{position:absolute;left:0;right:0;pointer-events:none;box-sizing:border-box;padding:4px 7px;border:2px solid #121212;
  border-radius:12px;background:#fff8eb;box-shadow:rgba(0,0,0,.28) 3px 3px 0 0;font-weight:900;font-size:clamp(8px,.78vw,11.5px);color:#121212;
  text-align:center;overflow-wrap:anywhere;}
.mr-trip-next{bottom:calc(100% + 5px);text-align:left;right:auto;left:50%;transform:translateX(-50%);min-width:100%;width:max-content;
  white-space:nowrap;overflow-wrap:normal;}
.mr-trip-when{top:calc(100% + 5px);}
.mr-arrow{width:1.9em;height:.9em;vertical-align:-.05em;color:#1f7a3d;}
#mr-trip-where{font-weight:800;}
/* the PLAYBOOK: its name above the book, both inside the left half of the table top (x 50–65%, top edge ~59%) */
/* OMAN 2026-09-15 (fourth ask): half its size — 9% of the old card → 4.1% of the 10%-wider one; the name shrinks with it
   and stays centred over the book even when it is wider than the book (flex column). */
/* SPEC §50: 30% bigger on the table as well, and the name plate reads gold */
.mr-playbook{position:absolute;left:55%;top:65.5%;width:6.5%;transform:translate(-50%,-100%);z-index:3;padding:0;border:none;background:none;cursor:pointer;line-height:1;
  display:flex;flex-direction:column;align-items:center;}
.mr-playbook img{display:block;width:100%;height:auto;transition:transform .15s;
  /* the PNG is a red book; hue-rotate + saturate turns that red cover gold without a second asset (SPEC §50) */
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)) hue-rotate(32deg) saturate(1.45) brightness(1.12);}
.mr-playbook:hover img{transform:translateY(-2px) scale(1.05);}
/* OMAN 2026-09-16 (sixth ask): the book slightly bigger (4.1% → 5%) and one step left (57% → 53%, still on the table's
   left half); its name box slightly bigger with it */
.mr-playbook-name{display:inline-block;margin-bottom:2px;padding:1px 6px;border:1.5px solid #121212;border-radius:999px;background:linear-gradient(135deg,#f7dd7a,#e8c33c);white-space:nowrap;
  font-family:'Sugar Peachy',Arial,sans-serif;font-size:clamp(7px,.56vw,10.5px);letter-spacing:.04em;color:#121212;}
/* everyone who lives here: heads in round frames under the ✕, names below */
/* OMAN 2026-09-16 (sixth ask): the crew runs SIDEWAYS, right to left, as people make their avatars (a new row below if it fills) */
.mr-crew{position:absolute;top:64px;right:12px;z-index:4;display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-items:flex-start;gap:8px 6px;max-width:calc(100% - 24px);max-height:calc(100% - 90px);overflow-y:auto;scrollbar-width:none;line-height:1;}
.mr-crew::-webkit-scrollbar{display:none;}
.mr-crew-one{display:flex;flex-direction:column;align-items:center;gap:3px;width:62px;}
.mr-crew-face{width:46px;height:46px;border-radius:50%;border:2.5px solid #121212;background:#fff8eb;overflow:hidden;box-shadow:rgba(0,0,0,.28) 2px 2px 0 0;}
.mr-crew-face .av-svg{display:block;width:100%;height:100%;}
.mr-crew-name{max-width:62px;padding:1px 5px;border-radius:999px;background:rgba(255,248,235,.92);border:1.5px solid #121212;font-size:9.5px;font-weight:900;
  color:#121212;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mr-crew-one.off{opacity:.55;}

/* ══ FLOWERS & EGGS (OMAN 2026-09-16, SPEC §35) ═════════════════════════════════════════════════════════════════
   Under each frame: a tiny flower (left) and egg (right) spanning exactly the frame's 46px, this year's count under each.
   Giving: every frame flashes; the one picked flashes GREEN for a flower, RED for an egg. */
.mr-crew-one{cursor:pointer;}
.mr-crew-gifts{display:flex;justify-content:space-between;width:46px;margin-top:1px;}
.mr-crew-gifts>span{display:flex;flex-direction:column;align-items:center;gap:1px;width:21px;}
.mr-crew-gifts img{width:19px;height:17px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}
/* the counts slightly bigger, flower GREEN and egg RED even at 0; the score centred under them (flower +1, egg -1) */
.mr-crew-gifts b{font-size:12.5px;font-weight:900;text-shadow:0 0 2px #fff8eb,0 0 4px #fff8eb,0 0 6px #fff8eb;}
.mr-crew-gifts b.mr-n-flower{color:#15803d;}
.mr-crew-gifts b.mr-n-egg{color:#c81e2c;}
.mr-crew-score{min-width:26px;padding:1px 6px;border-radius:999px;border:1.5px solid currentColor;background:rgba(255,248,235,.94);font-size:12px;font-weight:900;text-align:center;}
.mr-crew-score.up{color:#15803d;}
.mr-crew-score.down{color:#c81e2c;}
@keyframes mr-flash{from{border-color:#121212;box-shadow:rgba(0,0,0,.28) 2px 2px 0 0;}to{border-color:#f5c542;box-shadow:0 0 0 3px #f5c542,0 0 12px 3px rgba(245,197,66,.9);}}
@keyframes mr-flash-green{from{border-color:#1f9d55;box-shadow:0 0 0 2px #1f9d55;}to{border-color:#1f9d55;box-shadow:0 0 0 4px #37c871,0 0 14px 4px rgba(55,200,113,.95);}}
@keyframes mr-flash-red{from{border-color:#d62f3f;box-shadow:0 0 0 2px #d62f3f;}to{border-color:#d62f3f;box-shadow:0 0 0 4px #f05260,0 0 14px 4px rgba(240,82,96,.95);}}
.mushroom-card.mr-giving .mr-crew-one:not(.self) .mr-crew-face{animation:mr-flash .55s ease-in-out infinite alternate;}
.mushroom-card.mr-giving .mr-crew-one.self{opacity:.4;cursor:not-allowed;}
.mr-crew-one.picked-flower .mr-crew-face{animation:mr-flash-green .5s ease-in-out infinite alternate;}
.mr-crew-one.picked-egg .mr-crew-face{animation:mr-flash-red .5s ease-in-out infinite alternate;}
/* bottom right: his flower, then his egg, each with how many I can give */
.mr-wallet{position:absolute;right:14px;bottom:12px;z-index:6;display:flex;align-items:flex-end;gap:8px;line-height:1;}
.mr-wallet-one{display:flex;align-items:center;gap:5px;padding:4px 9px 4px 5px;border:2px solid #121212;border-radius:14px;background:rgba(255,248,235,.94);
  box-shadow:rgba(0,0,0,.28) 3px 3px 0 0;cursor:pointer;font:inherit;transition:transform .12s;}
.mr-wallet-one:hover{transform:translateY(-2px);}
.mr-wallet-one img{height:clamp(22px,2.6vw,36px);width:auto;display:block;}
.mr-wallet-n{font-weight:900;font-size:clamp(12px,1.2vw,17px);color:#121212;min-width:1ch;}
.mr-wallet-one.empty{opacity:.55;}
.mushroom-card.mr-giving-flower .mr-wallet-one[data-mr-give="flower"]{box-shadow:0 0 0 3px #37c871;}
.mushroom-card.mr-giving-egg .mr-wallet-one[data-mr-give="egg"]{box-shadow:0 0 0 3px #f05260;}
.mr-give-hint{position:absolute;right:0;bottom:calc(100% + 7px);white-space:nowrap;padding:5px 6px 5px 11px;border:2px solid #121212;border-radius:999px;
  background:#fff8eb;font-size:12px;font-weight:900;color:#121212;box-shadow:rgba(0,0,0,.28) 3px 3px 0 0;}
.mr-give-hint button{margin-left:6px;padding:2px 9px;border:1.5px solid #121212;border-radius:999px;background:#fff;font:inherit;font-size:11px;cursor:pointer;}
/* the "Why Flower?" pop out, in the middle of the Mushroom so the flashing frame stays in view */
.mr-give-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;width:min(400px,82%);box-sizing:border-box;padding:14px 16px 12px;
  border:3px solid #121212;border-radius:18px;background:#fff8eb;box-shadow:rgba(0,0,0,.35) 8px 8px 0 0;line-height:1.35;}
.mr-give-dialog.mr-give-flower{border-color:#1f9d55;}
.mr-give-dialog.mr-give-egg{border-color:#d62f3f;}
.mr-give-title{display:flex;align-items:center;gap:8px;font-family:'Sugar Peachy',Arial,sans-serif;font-size:26px;color:#121212;}
.mr-give-title img{height:34px;width:auto;}
.mr-give-to{font-size:12px;font-weight:800;opacity:.7;margin:2px 0 8px;}
.mr-give-dialog textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 10px;border:2px solid #121212;border-radius:11px;background:#fff;resize:vertical;}
.mr-give-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:9px;}
.mr-give-actions span{margin-right:auto;font-size:11.5px;font-weight:700;}
/* above a head: the last 7 days, oldest at the bottom, up to 8, a small gap between.
   SPEC §100 (OMAN 2026-10-02): "make the Flower or Eggs 3 time bigger in size of its current size" — 72 × 66 (was 24 × 22). Eight of
   that size in one column would stand taller than the scene and be cut off at its top, so they stand in rows of three from the head
   upward (wrap-reverse: the oldest row still at the bottom). */
.mr-gifts{position:absolute;left:50%;bottom:calc(100% + 22px);transform:translateX(-50%);display:flex;flex-flow:row wrap-reverse;justify-content:center;align-items:center;width:224px;gap:4px;pointer-events:none;}
.mr-gifts img{width:72px;height:66px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
.mr-sleep .mr-gifts{bottom:calc(100% + 20px);}
/* the record: a month at a time */
.mr-hist-month{border:2px solid var(--text);border-radius:12px;padding:9px 12px;margin-bottom:8px;background:#fff;}
.mr-hist-head{display:flex;align-items:center;gap:12px;font-size:13px;margin-bottom:4px;}
.mr-hist-head b{flex:1;}
.mr-hist-head span{display:flex;align-items:center;gap:3px;font-weight:900;}
.mr-hist-head img,.mr-hist-row img{width:20px;height:18px;object-fit:contain;}
.mr-hist-row{display:grid;grid-template-columns:22px 22px 1fr;gap:6px;align-items:start;padding:5px 0;border-top:1px dashed rgba(0,0,0,.15);font-size:12.5px;}
.mr-hist-day{font-weight:800;opacity:.65;}
.mr-hist-why{white-space:pre-wrap;overflow-wrap:anywhere;}
.mr-hist-from{display:block;font-size:11px;font-weight:800;opacity:.6;margin-top:2px;white-space:normal;}
.mr-hist-f{color:#15803d;}
.mr-hist-e{color:#c81e2c;}
/* OMAN 2026-09-16: the flower tilted 45° to the right wherever it stands for the count — bottom right, under the frames,
   above heads, in the record and on the Organization Tree. The "Why Flower?" title keeps it upright. */
.mr-flower{transform:rotate(45deg);}
/* Admin: HALL OF FAME in red, centred on the tree's heading row; a member's flowers beside their position */
.org-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:10px;margin-bottom:4px;}
.org-hall{font-family:'Sugar Peachy',Arial,sans-serif;font-size:22px;letter-spacing:.06em;color:#000;text-align:center;white-space:nowrap;}
/* SPEC §99 (OMAN 2026-10-02): Organization is the tree — the create button top right, the company boxes under WALL OF FAME, a pen
   on every box, and the three pop-outs (.svc-pop / .svc-card, the reminder pop-out's own layer: above every ff-modal, below the dialogs) */
.org-head-r{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;}
.org-company{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:2px 0 12px;}
.org-co{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:900;letter-spacing:.04em;color:var(--text);
  background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:11px;padding:6px 14px;}
button.org-co{cursor:pointer;}
button.org-co:hover{background:#fff7e0;}
.org-co-add{padding:6px 11px;opacity:.6;}
.org-name{display:flex;align-items:center;justify-content:center;gap:8px;}
.org-pen{flex:none;font:inherit;font-size:12px;line-height:1;color:var(--text);background:none;border:0;padding:0;cursor:pointer;opacity:.55;}
.org-pen:hover{opacity:1;}
.org-tree-cap{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin:6px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--text);}
.org-tree-cap span{font-weight:700;opacity:.6;letter-spacing:0;text-transform:none;margin-left:6px;}
.org-tree-cap ~ .org-tree-cap{margin-top:22px;}
.org-pop-card{max-width:820px;}
.org-pop-x{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--text);background:var(--card-bg,#fff);font-size:13px;font-weight:900;cursor:pointer;}
.acc-pos3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 14px;}
@media (max-width:640px){.acc-pos3{grid-template-columns:1fr;}}
.org-flower{display:inline-flex;align-items:center;gap:2px;margin-left:4px;font-weight:900;color:#15803d;opacity:1;}
.org-flower img{width:13px;height:12px;object-fit:contain;}
.mr-hist-empty{font-size:12.5px;opacity:.65;}

/* THE PLAYBOOK as a book: red cover, two cream ruled pages, a spine */
#pb-modal{align-items:center;}
/* SPEC §50 (OMAN 2026-09-20): "we make both PLAYBOOK and My Book size 30 bigger entirely" — 30%, on the book and on
   everything printed in it, so the whole thing grows rather than the cover growing around the same small type.
   And the PLAYBOOK's cover is GOLD now, on the table and open. MY BOOK keeps a cover of the employee's own colour. */
.pb-book{position:relative;margin:auto 0;width:min(1300px,96vw);height:min(832px,90vh);display:grid;grid-template-columns:1fr 23px 1fr;
  background:linear-gradient(135deg,#e8c33c,#f7dd7a 42%,#d9a81f);border:3px solid #121212;border-radius:28px;padding:21px;
  box-shadow:rgba(0,0,0,.35) 12px 12px 0 0;}
.pb-book .ff-modal-close{top:-16px;right:-16px;}
.pb-page{position:relative;overflow-y:auto;padding:34px 34px 29px;border:3px solid #121212;background:#fdf3e7
  repeating-linear-gradient(transparent 0 38px,rgba(120,140,170,.22) 38px 39px);}
.pb-left{border-radius:14px 4px 4px 14px;box-shadow:inset -14px 0 18px -14px rgba(0,0,0,.35);}
.pb-right{border-radius:4px 14px 14px 4px;box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.35);}
.pb-spine{background:linear-gradient(90deg,#c39a1a,#f7dd7a 45%,#c39a1a);border-top:3px solid #121212;border-bottom:3px solid #121212;}
/* MY BOOK: the same book in the employee's colour (--mb-cover, set by mbPaintColour) */
.mb-book{background:linear-gradient(135deg,var(--mb-cover,#6b7280),color-mix(in srgb,var(--mb-cover,#6b7280) 55%,#fff) 42%,var(--mb-cover,#6b7280));}
.mb-book .pb-spine{background:linear-gradient(90deg,var(--mb-cover,#6b7280),color-mix(in srgb,var(--mb-cover,#6b7280) 55%,#fff) 45%,var(--mb-cover,#6b7280));}
.pb-title{font-family:'Sugar Peachy',Arial,sans-serif;font-size:44px;text-align:center;margin-bottom:18px;color:#121212;}
.pb-cats{display:grid;gap:7px;}
.pb-cat{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;text-align:left;padding:9px 13px;border:2px solid #121212;border-radius:14px;
  background:#fff;cursor:pointer;font:inherit;font-size:17px;font-weight:800;}
.pb-cat.on{background:#f489a3;}
.pb-cat-no{width:29px;height:29px;border-radius:50%;background:#121212;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;}
.pb-cat-n{font-size:14px;opacity:.65;}
.pb-add{margin-top:16px;padding:8px 16px;border:2px dashed #121212;border-radius:14px;background:transparent;font:inherit;font-weight:900;font-size:16px;cursor:pointer;}
.pb-head{display:flex;align-items:center;gap:8px;border-bottom:2px solid #121212;padding-bottom:8px;margin-bottom:10px;}
.pb-head h3{margin:0;flex:1;font-size:26px;}
.pb-tool{border:none;background:none;cursor:pointer;font-size:18px;padding:2px 5px;}
.pb-entries{margin:0;padding-left:22px;display:grid;gap:10px;}
.pb-entries li{position:relative;font-size:17.5px;line-height:1.5;}
.pb-entry{white-space:pre-wrap;overflow-wrap:anywhere;padding-right:48px;}
.pb-entry-tools{position:absolute;top:0;right:0;}
.pb-editor textarea{width:100%;box-sizing:border-box;font:inherit;font-size:17px;padding:10px;border:2px solid #121212;border-radius:12px;background:#fff;resize:vertical;}
.pb-editor-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;}
.pb-empty{font-size:16px;opacity:.65;}
.pb-center{text-align:center;margin-top:40%;}
.pb-msg{font-size:12px;color:#a8271f;font-weight:700;}
@media (max-width:700px){ .pb-book{grid-template-columns:1fr;height:auto;max-height:90vh;overflow-y:auto;gap:10px;} .pb-page{overflow:visible;} .pb-spine{display:none;} .pb-left,.pb-right{border-radius:12px;} }
/* a photo on a PLAYBOOK detail (the shared book only — MY BOOK is words, SPEC §50) */
.pb-photo{display:block;max-width:100%;max-height:230px;object-fit:contain;border:2px solid #121212;border-radius:12px;margin:8px 0 0;cursor:zoom-in;}
.pb-photo-add{margin-left:6px;}
/* MY BOOK's button on the top row */
/* OMAN 2026-09-21 (SPEC §53): "remove the frame that is out the My book, and make the book slightly larger." The box
   was drawing a second outline around something that already has its own silhouette, and the padding inside it was
   what kept the book small. 38 → 46 with no border and no padding is a book half again as big in the same row. */
.mybook-btn{width:46px;height:46px;padding:0;border:none;border-radius:0;background:transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;transition:transform .12s ease;}
.mybook-btn:hover{transform:translateY(-2px);}
/* SPEC §52: the same book the Mushroom's table carries, at the top row's size.
   ⛔ SPEC §56 (OMAN 2026-09-22): "the My Book at top row … looks good as the uploaded png, but after i click at it … and
   exit the pop out, the entire my book becomes black, fix it to always look like how it should". The logo wore
   --mb-filter, which mbPaintColour sets on open (and on the band's beat) from My Color — and for BLACK (#121212) that
   filter is saturate(0) brightness(.35): a black book. The logo is the art as uploaded, always; My Color stays on the
   open book's cover (.mb-book), where a black cover is still a book. */
.mybook-btn img{width:100%;height:100%;object-fit:contain;display:block;filter:none;}
/* The Next Trip form */
.trip-form{display:grid;gap:12px;min-width:min(420px,80vw);}
.trip-form input,.trip-form select{padding:6px 8px;font:inherit;font-size:13px;border:2px solid #121212;border-radius:10px;}
.trip-form #trip-loc{width:100%;box-sizing:border-box;}
.trip-count,.trip-hint{font-weight:400;font-size:11px;opacity:.7;margin-left:6px;}
.trip-dates{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px;}
.trip-msg{font-size:12px;min-height:14px;}
.trip-actions{display:flex;justify-content:flex-end;}

/* ══ AVATARS · THE MUSHROOM SCENE · SHIFT (OMAN 2026-09-15, SPEC §31) ═══════════════════════════════════
   The builder: preview left, Gender (♂ blue / ♀ red) · Face · Outfit right, SAVE / CANCEL or the pen below. */
.av-builder{display:grid;grid-template-columns:110px 1fr;gap:8px 14px;align-items:start;padding:10px;border:1.5px dashed var(--text);border-radius:14px;background:#fff;}
.av-preview{grid-row:span 2;height:170px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#f3eee2;}
.av-preview .av-svg{height:160px;width:auto;}
.av-none{font-size:11px;opacity:.6;text-align:center;padding:0 8px;}
.av-controls{display:grid;gap:8px;}
.av-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.av-lab{width:48px;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.75;}
.av-gender{width:36px;height:36px;border-radius:50%;border:2px solid var(--text);background:#fff;font-size:20px;font-weight:900;line-height:1;cursor:pointer;}
.av-gender.m{color:#2f6fd6;}
.av-gender.f{color:#d62f3f;}
.av-gender.m.on{background:#2f6fd6;color:#fff;}
.av-gender.f.on{background:#d62f3f;color:#fff;}
.av-pick{width:48px;height:48px;padding:2px;border-radius:12px;border:2px solid rgba(18,18,18,.25);background:#fff;cursor:pointer;}
.av-pick .av-svg{width:100%;height:100%;}
.av-pick.on{border-color:var(--text);box-shadow:0 0 0 2px #f489a3;}
.av-builder:not(.editing) .av-pick,.av-builder:not(.editing) .av-gender{cursor:default;}
.av-builder:not(.editing) .av-pick:not(.on),.av-builder:not(.editing) .av-gender:not(.on){opacity:.45;}
.av-actions{grid-column:1 / -1;display:flex;justify-content:flex-end;align-items:center;gap:8px;}
.av-msg{font-size:11.5px;margin-right:auto;}
.av-pen{border:2px solid var(--text);background:#fff;border-radius:50%;width:32px;height:32px;font-size:15px;cursor:pointer;}

/* the scene sits over his picture; a person's point is their feet (a sleeper's is the middle of the bed) */
.mushroom-scene{position:absolute;inset:0;z-index:2;overflow:hidden;line-height:1;}
.mr-av{position:absolute;transform:translate(-50%,-100%);}
.mr-av .av-svg{display:block;width:100%;height:100%;}
.mr-name{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:900;color:#121212;
  background:rgba(255,248,235,.92);border:1.5px solid #121212;border-radius:999px;padding:1px 8px;margin-bottom:3px;}
.mr-left .av-svg{transform:scaleX(-1);}
.mr-sleep{transform:translate(-50%,-50%);}
.mr-sleep .mr-body{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);}
.mr-sleep .mr-name{opacity:.85;}
.mr-zzz{position:absolute;right:-6px;top:-26px;font-size:15px;font-weight:900;color:#fff;text-shadow:0 0 3px #121212,0 0 6px #121212;letter-spacing:2px;}
.mr-empty{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);background:rgba(255,248,235,.92);border:2px solid #121212;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;line-height:1.3;white-space:nowrap;}
/* OMAN 2026-09-17 (SPEC §41): every avatar in THE MUSHROOM sways like the pets on the tree. On the separate rotate/translate
   properties, so it adds to the walk's own transform animation instead of replacing it. */
html.anim .mr-av .av-svg{animation:mr-flutter 2.6s ease-in-out infinite;transform-origin:50% 100%;}
html.anim .mr-av > .av-svg{animation-delay:inherit;}
@keyframes mr-flutter{0%,100%{rotate:-3deg;translate:0 0;}50%{rotate:3deg;translate:0 -1.5px;}}
html.anim .mr-walk.mr-moving .av-svg{animation:mr-bob .5s ease-in-out infinite alternate,mr-flutter 2.6s ease-in-out infinite;}
html.anim .mr-walk.mr-moving .av-leg-l{animation:mr-step .5s ease-in-out infinite alternate;}
html.anim .mr-walk.mr-moving .av-leg-r{animation:mr-step .5s ease-in-out infinite alternate-reverse;}
html.anim .mr-zzz{animation:mr-zzz 2.4s ease-in-out infinite;}
@keyframes mr-bob{from{transform:translateY(0);}to{transform:translateY(-3%);}}
.mr-left.mr-moving .av-svg{animation-name:mr-bob-l,mr-flutter !important;}
@keyframes mr-bob-l{from{transform:scaleX(-1) translateY(0);}to{transform:scaleX(-1) translateY(-3%);}}
@keyframes mr-step{from{transform:translateY(0);}to{transform:translateY(-4px);}}
@keyframes mr-zzz{0%,100%{opacity:.35;transform:translateY(0);}50%{opacity:1;transform:translateY(-6px);}}

/* the tree: an off-day avatar sitting on the grass, half the Mushroom size */
.offday-tree{position:absolute;inset:0;pointer-events:none;}
.od-av{position:absolute;bottom:2px;height:100px;width:63px;}
.od-av .av-svg{display:block;width:100%;height:100%;}
.od-av .mr-name{font-size:10px;padding:0 6px;}
@media (max-width:900px){ .od-av{height:59px;width:37px;} }

/* SHIFT: seven day boxes; yours in pink, somebody else's in cream, past days faded */
.shift-frame .sec-head{flex-wrap:wrap;gap:8px;}
.shift-leave-btn{background:#fff;border:2px solid var(--text);font-weight:900;}
.shift-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;padding:14px;}
.shift-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;padding:10px 6px;border:2px solid var(--text);border-radius:14px;background:#fff;cursor:pointer;font:inherit;box-shadow:var(--shadow-sm);}
.shift-day:hover:not(:disabled){transform:translate(-1px,-1px);}
.shift-day.today{outline:3px solid #f0bb0d;outline-offset:2px;}
.shift-day.mine{background:#f489a3;}
.shift-day.taken{background:#fdf3dc;}
/* leave: a box turns red while any leave on it is not approved, green once all of it is (OMAN 2026-09-15) */
.shift-day.leave-no,.shift-cal-day.leave-no{background:#fde2e0;border-color:#c1272d;}
.shift-day.leave-ok,.shift-cal-day.leave-ok{background:#e2f5e8;border-color:#1f7a3d;}
.shift-day.past{opacity:.45;cursor:default;box-shadow:none;}
.shift-dow{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.shift-date{font-size:18px;font-weight:900;}
.shift-chips{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;}
.shift-chip{display:block;font-size:10.5px;font-weight:800;text-align:center;padding:2px 5px;border-radius:999px;border:1.5px solid var(--text);background:#fff;overflow-wrap:anywhere;line-height:1.2;}
.shift-chip.off{background:#fff8eb;}
.shift-chip.off.mine{background:#fff;}
.shift-chip.leave.pending,.shift-chip.leave.rejected{background:#c1272d;border-color:#c1272d;color:#fff;}
.shift-chip.leave.approved{background:#1f7a3d;border-color:#1f7a3d;color:#fff;}
.shift-cal-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px;font-size:15px;}
.shift-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;min-width:min(760px,86vw);}
.shift-cal-dow{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-align:center;opacity:.7;}
.shift-cal-day{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:74px;padding:5px;border:1.5px solid var(--text);border-radius:10px;background:#fff;cursor:pointer;font:inherit;text-align:left;}
.shift-cal-day.today{outline:3px solid #f0bb0d;outline-offset:1px;}
.shift-cal-day.mine{background:#f489a3;}
.shift-cal-day.taken{background:#fdf3dc;}
.shift-cal-day.past{opacity:.55;cursor:default;}
.shift-cal-n{font-size:12px;font-weight:900;}
.shift-ins-sec{margin-bottom:16px;min-width:min(620px,86vw);}
.shift-ins-head{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.shift-ins-head span{opacity:.65;}
.shift-ins-row{display:grid;grid-template-columns:170px 1fr auto auto;gap:8px;align-items:center;padding:6px 10px;margin-bottom:5px;border:1px solid var(--text);border-radius:10px;background:#fff;font-size:12.5px;}
.shift-ins-date{font-weight:800;}
.shift-ins-tools{display:flex;gap:5px;justify-content:flex-end;}
@media (max-width:600px){ .shift-ins-row{grid-template-columns:1fr auto;} }
.shift-note{grid-column:1 / -1;margin:0;font-size:12px;opacity:.8;}
.shift-msg{color:#a8271f;opacity:1;font-weight:700;}
@media (max-width:700px){ .shift-week{grid-template-columns:repeat(4,minmax(0,1fr));} }

/* ══ CHECK IN (OMAN 2026-09-15, SPEC §32) — the square scan box, the QR, the scanner, the ranking ══════════════════════ */
.att-btn{width:34px;height:34px;padding:5px;border:2px solid var(--text);border-radius:9px;background:#fff;color:#121212;cursor:pointer;box-shadow:var(--shadow-sm);flex:none;}
.att-btn svg{display:block;width:100%;height:100%;}
.att-btn:hover{background:var(--accent-2);}
.att-qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px;}
.att-qr .qr-svg{border:2px solid #121212;border-radius:12px;background:#fff;}
.att-qr-date{font-weight:900;font-size:14px;}
.att-qr-code{font-family:'Sugar Peachy',Arial,sans-serif;font-size:30px;letter-spacing:.18em;}
.att-wait{font-size:15px;padding:30px 10px;}
.att-scan{display:grid;gap:8px;margin-bottom:14px;min-width:min(420px,82vw);}
.att-scan video{width:100%;max-height:320px;border:2px solid #121212;border-radius:12px;background:#121212;object-fit:cover;}
.att-type{display:flex;gap:8px;}
.att-type input{width:110px;padding:7px 10px;font:inherit;font-size:18px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;border:2px solid #121212;border-radius:10px;}
.att-done{padding:10px 12px;border-radius:12px;font-size:14px;margin-bottom:12px;}
.att-done.ok{background:#e2f5e8;color:#1f7a3d;}
.att-done.late{background:#fde2e0;color:#a8271f;}
.att-sec{margin-bottom:14px;min-width:min(520px,82vw);}
.att-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 10px;margin-bottom:5px;border:1px solid var(--text);border-radius:10px;background:#fff;font-size:12.5px;}
.att-rank{grid-template-columns:26px 1fr auto auto auto;}
.att-no{width:22px;height:22px;border-radius:50%;background:#121212;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;}
.att-tag{font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:999px;color:#fff;}
.att-tag.ok{background:#1f7a3d;}
.att-tag.late{background:#c1272d;}
.att-late-n{color:#a8271f;font-weight:700;}
.att-avg{opacity:.7;}

/* ══ SPEC §47 (OMAN 2026-09-19) — Updated Today / Pending Update · HOMED stars · sale filter · documents · Stock Register ══ */
/* the pill on the photo: an oval, white ground, green or red ink, flashing */
/* SPEC §48 (2026-09-20): half the size; "Updated Today" stays still — only "Pending Update" breathes */
.pu-pill{position:absolute;top:6px;right:6px;z-index:6;background:#fff;border-radius:999px;padding:1.5px 6px;font-size:7px;font-weight:900;letter-spacing:.03em;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none;animation:stk-breathe 1.5s ease-in-out infinite;}
.pu-done{color:#1f7a3d;border:1.5px solid #1f7a3d;animation:none;}
.pu-pending{color:#c1272d;border:1.5px solid #c1272d;}
/* a pet owing today's update: a red flashing frame (the vaccination alert's pulse, same red) */
.pet-card.pet-pending{border:2px solid #d92d20 !important;animation:vaccPulse 1.15s ease-in-out infinite;}
#nav-pets.stk-open{color:#c1272d !important;font-weight:900;animation:stk-breathe 1.5s ease-in-out infinite;}
/* Available · Sold · Homed, at the right of the filter bar */
.ph-sale-f{display:flex;gap:8px;}
/* SPEC §48: drawn like the pet card's SOLD / HOMED buttons (SALE_TONE: pale tint, deep ink of the same hue), slightly larger */
.ph-f{border:2px solid var(--text);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:800;letter-spacing:.03em;cursor:pointer;transition:box-shadow .15s,transform .15s;}
.ph-f-available{background:#d1fae5;color:#065f46;}
.ph-f-sold{background:#fee2e2;color:#991b1b;}
.ph-f-homed{background:#ede9fe;color:#5b21b6;}
/* OMAN 2026-09-21 (SPEC §53): "instead of current outline being bolded in black, now colour the outline with the same
   series of the button in darker colour and slightly enlarge the button a little". One black ring on four differently
   coloured pills said only "something here is on"; a ring in the pill's OWN hue says WHICH, from across the room. */
.ph-f.on{transform:scale(1.07) translateY(-1px);}
.ph-f-all.on{border-color:#854d0e;box-shadow:0 0 0 3px rgba(133,77,14,.4);}
.ph-f-available.on{border-color:#065f46;box-shadow:0 0 0 3px rgba(6,95,70,.4);}
.ph-f-sold.on{border-color:#991b1b;box-shadow:0 0 0 3px rgba(153,27,27,.4);}
.ph-f-homed.on{border-color:#5b21b6;box-shadow:0 0 0 3px rgba(91,33,182,.4);}
/* SORTS — AGE and ROOM, the same pill in two more of the theme's tints */
.ph-f-age{background:#dbeafe;color:#1e40af;}
.ph-f-age.on{border-color:#1e40af;box-shadow:0 0 0 3px rgba(30,64,175,.4);}
.ph-f-room{background:#ffe4e6;color:#9f1239;}
.ph-f-room.on{border-color:#9f1239;box-shadow:0 0 0 3px rgba(159,18,57,.4);}
/* Product Sales — SHOP and E-COMMERCE */
.ph-f-shop{background:#dcfce7;color:#14532d;}
.ph-f-shop.on{border-color:#14532d;box-shadow:0 0 0 3px rgba(20,83,45,.4);}
.ph-f-ecom{background:#e0e7ff;color:#3730a3;}
.ph-f-ecom.on{border-color:#3730a3;box-shadow:0 0 0 3px rgba(55,48,163,.4);}
.ph-sorts{display:flex;gap:8px;}
.ph-lbl{font-size:13px;font-weight:900;letter-spacing:.07em;opacity:.85;margin-right:2px;}
.ps-chan-row{display:flex;gap:8px;margin:0 0 16px;}
.ps-chan{font-size:9.5px;font-weight:900;letter-spacing:.05em;border-radius:999px;padding:2px 8px;white-space:nowrap;}
.ps-chan-shop{background:#dcfce7;color:#14532d;}
.ps-chan-ecom{background:#e0e7ff;color:#3730a3;}
.ph-f.ph-owe{border-color:#c1272d;animation:ph-owe 1.2s ease-in-out infinite;}
@keyframes ph-owe{0%,100%{box-shadow:0 0 0 0 rgba(193,39,45,.6);}50%{box-shadow:0 0 12px 4px rgba(193,39,45,.55);}}
.ph-group{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;font-size:15px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;border-bottom:2px solid var(--text);padding:10px 2px 6px;margin-top:4px;}
.ph-group span{font-size:11px;font-weight:700;opacity:.65;text-transform:none;letter-spacing:0;}
/* the gender badge is a dropdown */
select.m-gender{appearance:auto;border:1.5px solid rgba(0,0,0,.25);cursor:pointer;padding:3px 6px;font-size:11px;font-weight:700;}
select.m-gender.field-dirty{border-color:#ef4444;background:#fff8f8;}
/* documents under Pets Room */
.pd-list{display:flex;flex-wrap:wrap;gap:10px;}
.pd-tile{width:132px;border:2px solid var(--text);border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--card-bg,#fff);}
.pd-tile img{display:block;width:100%;height:86px;object-fit:cover;}
.pd-ico{display:flex;align-items:center;justify-content:center;height:86px;font-size:34px;background:rgba(0,0,0,.04);}
.pd-cap{padding:6px 8px;font-size:10.5px;line-height:1.35;display:flex;flex-direction:column;}
.pd-cap b{font-size:11px;}
.pd-cap span{opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* the follow-up photos in the report, and on the day's record */
.rep-photos{display:flex;flex-wrap:wrap;gap:8px;}
.rep-ph{position:relative;width:74px;height:74px;}
.rep-ph img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:1.5px solid rgba(0,0,0,.2);}
.rep-ph-x,.rep-pf-x{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;border:2px solid #fff;background:#ef4444;color:#fff;font-size:10px;font-weight:800;cursor:pointer;padding:0;line-height:1;}
.rep-ph-add{width:74px;height:74px;border:2px dashed var(--text);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;opacity:.7;}
.rep-rec-phs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.rep-rec-ph{width:96px;height:96px;object-fit:cover;border-radius:10px;cursor:zoom-in;border:1.5px solid rgba(0,0,0,.2);}
/* Category Classification */
.cc-row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:start;padding:7px 0;border-bottom:1px dashed rgba(0,0,0,.14);}
.cc-lbl{font-size:12.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;padding-top:6px;}
.cc-sels{display:flex;flex-direction:column;gap:6px;}
.cc-sel{display:flex;gap:6px;align-items:center;}
.cc-sel select{min-width:240px;max-width:100%;padding:5px;}
.cc-x{border:none;background:none;cursor:pointer;font-size:13px;opacity:.6;}
/* Stock Register and ➕ Add Pet: "Category" with its dropdown(s), a heading over each */
.sreg-cat,.ap-cat{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px;}
.sreg-lbl{font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;padding-bottom:8px;}
.sreg-dd{display:flex;flex-direction:column;min-width:200px;flex:1;}
.sreg-dd select{padding:6px;}
.ap-cat select.err{border-color:#ef4444;}
.sreg-ph{display:flex;align-items:center;justify-content:center;min-height:110px;cursor:pointer;}
.stk-reg-btn{background:#1e40af;color:#fff;border:2px solid var(--text);}
@media (max-width:640px){.cc-row{grid-template-columns:1fr;}.cc-sel select{min-width:0;flex:1;}}
@media (prefers-reduced-motion:reduce){.pu-pill,.pet-card.pet-pending,#nav-pets.stk-open,.ph-f.ph-owe{animation:none;}}

/* ══ SPEC §48 (OMAN 2026-09-20) — Pet Home head · JOURNEY steps · HERE ! · photo framing · the pen · boarding pickers · QR ══ */
.ph-head .ph-fb{flex-basis:100%;}
/* ══ SPEC §49 (OMAN 2026-09-20) — Pet Home search · ALL · the MKA pill ══ */
.ph-search{position:relative;display:flex;align-items:center;}
.ph-search input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 34px 8px 14px;
  border:2px solid var(--text);border-radius:999px !important;background:var(--card-bg,#fff);color:var(--text);}
.ph-search input::placeholder{opacity:.5;}
.ph-q-x{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
  border:none;background:var(--text);color:var(--bg,#fff);font-size:11px;font-weight:900;cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0;line-height:1;}
.ph-search.has-q .ph-q-x{display:flex;}
/* ALL: the same pill as AVAILABLE / SOLD / HOMED, in yellow */
.ph-f-all{background:#fef3c7;color:#854d0e;}
/* the pet card's MKA mark — the word only, bottom left of the photo, drawn like "Updated Today" with a black outline */
.pc-mka{position:absolute;bottom:6px;left:6px;z-index:6;background:#fff;color:#121212;border:1.5px solid #121212;
  border-radius:999px;padding:1.5px 6px;font-size:7px;font-weight:900;letter-spacing:.06em;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none;}
@media (max-width:900px){.ph-search{flex-basis:100%;}}
/* the pop-out's detail rows: six tracks, so a row can be three even boxes or two wide ones */
.dg6{grid-template-columns:repeat(6,1fr);}
.dg6 > .di{grid-column:span 2;}
.dg6 > .di.di-wide{grid-column:span 3;}
/* the pen, and what "locked" looks like */
.m-pen{border-radius:999px;padding:4px 13px;font-size:11px;font-weight:800;white-space:nowrap;}
.m-pen.on{background:#1f8f5f;color:#fff;border-color:#1f8f5f;}
#m-name[readonly]{border-color:transparent;cursor:default;}
.dg6 input[disabled],.dg6 select[disabled]{background:rgba(0,0,0,.05);opacity:.75;cursor:default;}
/* SPEC §120: the price of a registered pet with ✎ Edit on and no "Edit Pet Selling Price" — locked, darkened */
.m-price-lock{display:inline-block;padding:3px 10px;border:2px solid #8a8577;border-radius:10px;background:#cfcabb;color:#5a554a;cursor:not-allowed;}
#m-price-input{font:inherit;font-size:20px;font-weight:800;width:130px;padding:3px 8px;border:2px solid var(--text);border-radius:10px;background:var(--card-bg,#fff);color:inherit;}
/* P.I.C.: the label, two boxes and Confirm, all the height of the tile's gender badge */
.pic-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.pic-lbl{font-size:9px;font-weight:800;letter-spacing:.09em;opacity:.65;}
.pic-row select,.pic-row .pic-chip{height:24px;box-sizing:border-box;font-size:10px;font-weight:700;padding:0 8px;
  border:1.5px solid var(--text);border-radius:999px;background:var(--card-bg,#fff);color:inherit;
  /* the page gives every select width:100%; here they are two chips on one line, not two form rows */
  width:auto;min-width:104px;max-width:170px;flex:0 0 auto;margin:0;border-radius:999px !important;}
.pic-row .pic-chip{display:inline-flex;align-items:center;}
/* OMAN asked for Confirm to be the height of the Position box; .btn carries min-height:44px, so it is overruled here */
.pic-row #pic-confirm{height:24px;min-height:0;box-sizing:border-box;padding:0 12px;font-size:9px;font-weight:800;border-radius:999px;line-height:1;}
.pic-row .pic-none{opacity:.45;}
.pic-row .pic-box.pic-none{opacity:.6;border-style:dashed;}
.pic-msg{font-size:9px;opacity:.75;}
/* ABOUT ME — the employee's own three, in one frame (SPEC §49) */
.abt-me{border:2px solid var(--text);border-radius:18px;padding:16px 18px 6px;margin-bottom:22px;}
.abt-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--text);padding-bottom:9px;margin-bottom:14px;}
.abt-head h3{margin:0;font-size:19px;letter-spacing:.04em;text-transform:uppercase;}
.abt-head span{font-size:11px;opacity:.65;}
.abt-box{border:1.5px solid var(--text);border-radius:14px;padding:14px 16px;margin-bottom:14px;background:var(--card-bg);}
/* MY COLOR — ten swatches; a taken one is struck through and cannot be pressed */
.mc-grid{display:flex;flex-wrap:wrap;gap:9px;}
.mc-sw{position:relative;width:44px;height:44px;border-radius:12px;border:2px solid var(--text);cursor:pointer;padding:0;
  box-shadow:var(--shadow-sm);transition:transform .12s ease;}
.mc-sw:hover:not([disabled]){transform:translateY(-2px);}
.mc-sw.on{box-shadow:0 0 0 3px var(--text);}
.mc-sw[disabled]{cursor:not-allowed;opacity:.45;}
.mc-sw[disabled]::after{content:"";position:absolute;inset:6px;border-top:2px solid var(--text);transform:rotate(-45deg);transform-origin:center;}
.mc-who{font-size:9px;font-weight:800;text-align:center;margin-top:3px;opacity:.7;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-cell{display:flex;flex-direction:column;align-items:center;}
.mc-msg{font-size:11.5px;margin-top:10px;}
/* DAILIES carries categories (SPEC §49): one clickable row each, breathing red while something is open */
.watchdog .wd-item.dl-cat{cursor:pointer;}
.watchdog .wd-item.dl-cat:hover{box-shadow:var(--shadow-sm);}
.watchdog .wd-item.dl-cat:focus-visible{outline:2px solid #1f7a3d;outline-offset:-2px;}
.watchdog .dl-cat .dl-row{grid-template-columns:auto minmax(0,1fr) auto;}
.watchdog .dl-cat .wd-name{font-weight:900;letter-spacing:.05em;text-transform:uppercase;}
.watchdog .dl-n{min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--text);color:#fff;font-size:10px;font-weight:900;}
.watchdog .dl-cat.dl-flash{border-color:#c1272d;animation:ph-owe 1.2s ease-in-out infinite;}
.watchdog .dl-cat.dl-flash .dl-n{background:#c1272d;}
/* the button a flashing category sends you to, still breathing when you get there */
.dl-flash-btn{border-color:#c1272d !important;animation:ph-owe 1.2s ease-in-out infinite;}
/* the pop-out behind a category */
.dlp-task{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;border:1.5px solid var(--text);border-radius:12px;margin-bottom:8px;font-size:12.5px;}
.dlp-task span:last-child{opacity:.7;font-size:11.5px;}
.dlp-head{font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin:16px 0 9px;}
.dlp-list{display:flex;flex-direction:column;gap:8px;}
.dlp-pet{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;text-align:left;width:100%;cursor:pointer;
  padding:10px 13px;border:2px solid var(--text);border-radius:14px;background:var(--card-bg,#fff);color:inherit;font:inherit;
  box-shadow:var(--shadow-sm);transition:transform .12s ease;}
.dlp-pet:hover{transform:translateY(-1px);}
.dlp-nm{font-size:13.5px;font-weight:800;}
.dlp-sub{grid-column:1;font-size:11px;opacity:.7;}
.dlp-go{grid-row:1/3;align-self:center;font-size:10.5px;font-weight:900;letter-spacing:.06em;white-space:nowrap;}
.dlp-note{font-size:11.5px;opacity:.7;margin:12px 0 0;}
@media (prefers-reduced-motion:reduce){.watchdog .dl-cat.dl-flash,.dl-flash-btn{animation:none;}}
/* ══ SPEC §50 (OMAN 2026-09-20) — P.I.C. across the tile, under the circles ══ */
/* SPEC §53: two halves of the tile, one word centred in each — no label, no dash */
.pc-pic{display:flex;align-items:center;gap:6px;padding:7px 10px 0;line-height:1.25;}
.pc-pic-c{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-width:0;}
.pc-pic-n{font-size:9.5px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pc-pic-none{opacity:.4;}
/* ══ SPEC §50 — the agreement has a band around it that a thumb can actually find ══ */
.ag-scrim{padding:max(24px,4vh) max(28px,6vw);}
.ag-card{max-height:min(88vh,calc(100vh - 8vh));}
/* the ownership photo in the sold form, drawn like the booking photo tiles */
.pow-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.pow-tile{position:relative;width:118px;height:118px;border:2px dashed var(--text);border-radius:12px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:700;text-align:center;
  cursor:pointer;background:var(--card-bg,#fff);overflow:hidden;}
.pow-tile.has{border-style:solid;}
.pow-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.pow-x{position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%;border:2px solid #fff;background:#ef4444;
  color:#fff;font-size:11px;font-weight:800;cursor:pointer;padding:0;line-height:1;z-index:2;}
.pow-note{font-size:11px;opacity:.7;max-width:260px;}
/* ══ SPEC §52 — the two answers the purchase agreement prints ══ */
.sf-parvo{max-width:340px;}
.seen-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.seen-pill{border:2px solid var(--text);border-radius:999px;padding:5px 13px;font:inherit;font-size:12px;font-weight:800;
  background:var(--card-bg,#fff);color:inherit;cursor:pointer;transition:background .12s,box-shadow .12s;}
.seen-pill:hover{background:rgba(0,0,0,.04);}
.seen-pill.on{background:var(--accent);box-shadow:0 0 0 2px var(--text) inset;}
.seen-other{flex:1 1 180px;min-width:150px;max-width:280px;}
/* the AGREEMENT box's doors (SPEC §52) */
.pa-door{border:2px solid var(--text);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--bg,#fff);
  cursor:pointer;display:flex;gap:12px;align-items:center;}
.pa-door.pa-need{border-color:#c1272d;animation:ph-owe 1.2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.pa-door.pa-need{animation:none;}}
/* a product receipt the console found for this customer rather than one the employee added */
.rc-auto{font-size:11px;font-weight:700;line-height:1.4;margin:0 0 8px;padding:6px 9px;border-radius:9px;
  border:1.5px dashed #1f7a3d;background:#e9f7ef;color:#155e38;}
/* ══ SPEC §50 — DRAFTED ══ */
.btn-draft{background:#fff3e6;color:#8a4b00;border-color:#e8710a;}
/* ⛔ AN OUTLINE, NOT A BORDER, AND OFFSET. OMAN: "we will see red frame outline cover by dashed orange outline, so we
   make the gap between dashed outline to a visible gap that we can see there is red outline at the back". A border would
   replace the red one that .pet-pending draws; an outline is painted OUTSIDE the box, and outline-offset is the gap, so
   both rings are visible at once and neither hides the other. */
.pet-card.pet-drafted{outline:2px dashed #e8710a;outline-offset:3px;}
.pc-draft{position:absolute;top:6px;left:6px;z-index:6;background:#fff;color:#e8710a;border:1.5px solid #e8710a;
  border-radius:999px;padding:1.5px 6px;font-size:7px;font-weight:900;letter-spacing:.03em;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none;}
/* what a reopened draft still owes */
.draft-owed{border-radius:12px;outline:2px solid #c1272d;outline-offset:4px;animation:ph-owe 1.2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.draft-owed{animation:none;}}
.pj-row{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px 8px;margin:0 0 14px;padding:10px 12px;border:1.5px solid var(--text);border-radius:14px;background:var(--bg,#fff);}
.pj-step{display:flex;flex-direction:column;align-items:center;gap:4px;}
.pj-chip{border:2px solid var(--text);border-radius:999px;padding:5px 13px;font-size:11.5px;font-weight:800;letter-spacing:.03em;white-space:nowrap;}
.pj-date{font-size:10.5px;font-weight:700;opacity:.7;}
.pj-arrow{align-self:center;margin-top:-16px;font-weight:900;opacity:.55;}
/* the pet's own room: red, breathing, and it says HERE ! */
.rsb.selected{border-color:#dc2626 !important;color:#b91c1c !important;background:#fff5f5 !important;animation:rsb-here 1.1s ease-in-out infinite;}
.rsb-here{font-size:8.5px;font-weight:900;letter-spacing:.06em;color:#dc2626;line-height:1;margin-top:2px;animation:stk-breathe 1.1s ease-in-out infinite;}
@keyframes rsb-here{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.55);}50%{box-shadow:0 0 0 5px rgba(220,38,38,0);}}
/* the pop-out photo: Edit Photo · Add photo, white outline */
.m-photo-btns{position:absolute;bottom:10px;right:10px;z-index:3;display:flex;gap:8px;}
.m-photo-btn{background:rgba(0,0,0,.55);color:#fff;font-size:15px;font-weight:700;padding:7px 15px;border-radius:12px;border:2px solid #fff;cursor:pointer;}
.miw.ph-editing img{cursor:grab;outline:3px dashed #fff;outline-offset:-6px;}
.miw.ph-editing img:active{cursor:grabbing;}
.miw.ph-editing .m-photo-prev,.miw.ph-editing .m-photo-next{display:none !important;}
/* Pets Room / Pet Locker — the pen and the arranging screen */
.rm-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rm-pen{border:2px solid var(--text);background:#fff;border-radius:999px;width:32px;height:32px;cursor:pointer;font-size:15px;line-height:1;}
.rm-pen.on{background:var(--text);color:#fff;}
.rme-zone{border:1.5px dashed rgba(0,0,0,.25);border-radius:12px;padding:8px 10px;margin-bottom:8px;background:#fff;}
.rme-zhead{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;margin-bottom:7px;}
.rme-zname{width:70px;padding:3px 6px;font-weight:800;text-transform:uppercase;}
.rme-chips{display:flex;flex-wrap:wrap;gap:6px;}
.rme-chip{display:inline-flex;align-items:center;gap:3px;border:2px solid var(--text);border-radius:10px;padding:2px 6px;background:#f8fafc;}
.rme-cname{width:52px;padding:2px 4px;border:none;background:transparent;font-weight:700;text-transform:uppercase;}
.rme-grip{cursor:grab;touch-action:none;user-select:none;opacity:.6;font-size:14px;padding:2px;}
.rme-dragging{opacity:.55;outline:2px solid #1f7a3d;}
.rme-bar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:10px;}
.rme-note{margin-right:auto;font-size:11px;opacity:.65;}
/* boarding: Pets Room | Pet Locker */
.bd-roomlock{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bdp{position:relative;}
.bdp-btn{width:100%;text-align:left;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:10px;background:#fff;cursor:pointer;font:inherit;font-size:13px;}
.bdp-btn::after{content:'▾';float:right;opacity:.6;}
.bdp-panel{display:none;position:absolute;left:0;top:calc(100% + 4px);z-index:40;min-width:100%;width:max-content;max-width:min(520px,80vw);max-height:340px;overflow:auto;background:#fff;border:2px solid var(--text);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.18);padding:10px 12px;}
.bdp.open .bdp-panel{display:block;}
.bdp-head{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.75;margin-bottom:8px;}
.att-qr-meta{font-size:12px;margin:4px 0 6px;}
@media (max-width:640px){.bd-roomlock{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.rsb.selected,.rsb-here{animation:none;}}


/* ══ SPEC §53 — THE AGREEMENT PILLS ════════════════════════════════════════════════════════════
   A signed one is solid, in its document's own colour (P&B blue, JPA red). A drafted one is colourless behind a dashed
   orange line — the SAME orange as the drafted pet's frame, because they are the same fact said in two places.
   ⛔ .btn sets min-height:44px (styles.css:790) — a pill built on a <span> has to say its own height or it becomes a
      tap target the size of a thumb sitting in a 12px row. */
.ag-pills{display:inline-flex;gap:4px;align-items:center;flex:none;}
.ag-pill{display:inline-flex;align-items:center;min-height:0;border:1.5px solid #121212;border-radius:999px;
  padding:1.5px 8px;font-size:9px;font-weight:900;letter-spacing:.05em;white-space:nowrap;cursor:pointer;
  background:#121212;color:#fff;transition:transform .12s ease;}
.ag-pill:hover{transform:translateY(-1px);}
.ag-pill.ag-pend{background:transparent !important;color:#b45309 !important;border:1.5px dashed #e8710a;}

/* ══ SPEC §53 — THE CLIENT ISSUE PAGE ══════════════════════════════════════════════════════
   16 rows at 1.55 is comfortably over a thousand words before anybody has to scroll, which is what OMAN asked for. */
.ci-text{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;line-height:1.55;padding:12px 14px;
  border:2px solid var(--text);border-radius:12px !important;background:var(--bg,#fff);color:var(--text);resize:vertical;
  min-height:300px;}
.ci-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.ci-chip{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--text);border-radius:12px;
  padding:5px 9px 5px 5px;background:var(--card-bg,#fff);max-width:260px;}
.ci-chip img{width:34px;height:34px;object-fit:cover;border-radius:8px;display:block;}
.ci-doc{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:19px;
  background:rgba(0,0,0,.05);border-radius:8px;}
.ci-nm{font-size:11.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ci-chip button{width:20px;height:20px;min-height:0;border-radius:50%;border:none;background:#ef4444;color:#fff;
  font-size:10px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;flex:none;}

/* ══ SPEC §53 — CPA ══════════════════════════════════════════════════════════════════════ */
.cpa-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.cpa-g{border:2px solid var(--text);border-radius:999px;padding:6px 15px;font-size:12px;font-weight:800;
  letter-spacing:.05em;cursor:pointer;background:var(--card-bg,#fff);color:var(--text);transition:transform .12s ease;}
.cpa-g.on{background:var(--text);color:var(--bg,#fff);transform:scale(1.05);}
.cpa-funnel{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.cpa-step{flex:1 1 0;min-width:120px;border:2px solid var(--text);border-radius:14px;padding:11px 13px;
  background:var(--card-bg,#fff);}
.cpa-step-n{font-size:24px;font-weight:900;line-height:1.1;}
.cpa-step-l{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.8;margin-top:2px;}
.cpa-step-r{font-size:10.5px;opacity:.65;margin-top:4px;}
.cpa-arrow{display:flex;align-items:center;font-size:18px;opacity:.4;flex:none;}
.cpa-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.cpa-kpi{flex:1 1 170px;border:2px solid var(--text);border-radius:14px;padding:11px 13px;background:var(--card-bg,#fff);}
.cpa-kpi span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.7;}
.cpa-kpi b{display:block;font-size:20px;font-weight:900;line-height:1.25;}
.cpa-kpi i{display:block;font-size:10px;opacity:.6;font-style:normal;margin-top:2px;}
.cpa-up{font-size:11px;font-weight:900;color:#1f7a3d;}
.cpa-down{font-size:11px;font-weight:900;color:#c1272d;}
.cpa-tw{overflow-x:auto;border:2px solid var(--text);border-radius:14px;margin-bottom:16px;}
.cpa-t{width:100%;border-collapse:collapse;font-size:12px;}
.cpa-t th{text-align:left;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  padding:9px 10px;border-bottom:2px solid var(--text);white-space:nowrap;}
.cpa-t td{padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.08);white-space:nowrap;}
.cpa-t tr:last-child td{border-bottom:none;}
.cpa-leak{font-size:9.5px;font-weight:900;letter-spacing:.05em;background:#fee2e2;color:#991b1b;
  border-radius:999px;padding:2px 8px;}
.cpa-ok{opacity:.4;}
.cpa-advice{border:2px dashed var(--text);border-radius:14px;padding:13px 15px;background:var(--card-bg,#fff);}
.cpa-advice-h{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:8px;}
.cpa-line{font-size:12.5px;line-height:1.7;margin-bottom:5px;}
.cpa-form{border:2px solid var(--text);border-radius:14px;padding:13px 15px;margin-bottom:16px;background:var(--card-bg,#fff);}
.cpa-form-h{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:9px;}
.cpa-form-r{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.cpa-form-r label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;opacity:.8;}
.cpa-form-r input,.cpa-form-r select{font:inherit;font-size:12.5px;padding:6px 9px;border:2px solid var(--text);
  border-radius:10px !important;background:var(--bg,#fff);color:var(--text);min-width:120px;}
.cpa-form-n{font-size:11px;opacity:.65;margin-top:9px;}


/* ══ SPEC §54 — the Organization Member editor's top block and the two POS boxes ════════════════════
   Employee Photo | Pet Image, then Branch across the row, then Employee Name | Pet Name. One grid, so the name and the
   pet name line up on the same baseline however long the Branch note under the photo runs. */
.acc-top{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-items:start;}
.acc-top .pet-picker{gap:5px;}
.acc-top .pet-preview{min-height:0;padding:6px;}
.acc-top .pet-preview img{width:64px;height:64px;}
.acc-pos2{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
@media (max-width:560px){.acc-top,.acc-pos2{grid-template-columns:1fr;}.acc-top > label[style*="grid-column"]{grid-column:auto !important;}}
/* SPEC §54: the reason CONFIRM said no, right above CONFIRM */
.sf-why{margin-top:16px;padding:9px 12px;border:2px solid #c1272d;border-radius:12px;background:#fff5f5;color:#a8271f;
  font-size:12.5px;font-weight:700;line-height:1.45;}

/* ══ SPEC §55 (OMAN 2026-09-22) ═══════════════════════════════════════════════════════════════════════════════════ */
/* the pen, when it is the save */
.m-pen.m-pen-save{background:#1f8f5f;color:#fff;border-color:#1f8f5f;}
/* PETS ROOM: AVAILABLE's oval, in blue, a chevron that turns when open */
.room-pill{font:inherit;font-size:13px;font-weight:800;letter-spacing:.04em;padding:6px 16px;border:none;border-radius:20px;
  background:#dbeafe;color:#1e40af;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;}
.room-pill:hover{box-shadow:0 0 0 2px #1e40af inset;}
.room-pill #m-room-cur{font-weight:700;opacity:.8;text-transform:none;}
.room-pill-chev{display:inline-block;transition:transform .15s ease;}
.room-pill.open .room-pill-chev{transform:rotate(180deg);}
.room-pill-row{border-bottom:none !important;}
#m-room{margin-top:8px;}
/* OWNERSHIP DETAILS: Pawmily Photo centred in the left half, the pick-up date and its boarding in the right */
.own-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-bottom:10px;}
.own-half{display:flex;flex-direction:column;gap:6px;min-width:0;}
.own-pow{align-items:center;text-align:center;}
.own-pow .pow-row{flex-direction:column;align-items:center;}
.own-pow .pow-note{max-width:none;text-align:center;opacity:.85;font-weight:700;}
.pow-heart{width:13px;height:13px;vertical-align:-2px;margin:0 1px;}
.pick-box{position:relative;max-width:280px;}
.pick-dmy{display:block;padding:9px 13px;border:2px solid var(--text);border-radius:10px;background:#fff;font-size:15px;font-weight:800;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.pick-dmy.pick-empty{color:#94a3b8;font-weight:600;}
.pick-box input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0 !important;border:none !important;}
.pick-box:focus-within .pick-dmy{border-color:var(--accent);box-shadow:0 0 0 3px rgba(244,137,163,.35);}
@media (max-width:640px){.own-row{grid-template-columns:1fr;}}
/* a SOLD pet's boarding: the schedule's bar, without its date column */
.sf-board{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.sold-stay{display:flex;flex-direction:column;gap:1px;padding:7px 14px;border:2px solid var(--text);border-radius:181px;background:var(--accent);
  box-shadow:var(--shadow-sm);cursor:pointer;max-width:420px;transition:transform .12s ease;}
.sold-stay:hover{transform:translateY(-2px);}
.sold-stay.st-canceled{background:#fdecec;border-color:#dc2626;}
.sold-stay .bar-pet{font-weight:800;font-size:12.5px;}
.sold-stay .bar-status{font-size:10.5px;font-weight:800;}
.sold-stay .bar-meta{font-size:10px;font-weight:600;color:#3a352c;}
.ss-svcs{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;}
.ss-svc{font-size:9.5px;background:#fff;border:1.5px solid var(--text);border-radius:999px;padding:1px 7px;}
.sold-board-add{align-self:flex-start;margin-left:0;}
.bl-sold{display:inline-block;margin-left:5px;padding:0 6px;border-radius:999px;background:#fee2e2;color:#991b1b;border:1.5px solid #991b1b;
  font-size:9px;font-weight:900;letter-spacing:.05em;vertical-align:1px;}
/* AGREEMENT sections */
.ag-sec{border:2px solid var(--text);border-radius:14px;padding:10px 12px 2px;margin-bottom:14px;background:var(--card-bg,#fff);}
.ag-sec-title{font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;margin:0 0 9px;}
.ag-door{cursor:default;}
.ag-door-t{font-size:12.5px;font-weight:800;line-height:1.4;}
.ag-door-s{font-size:11.5px;opacity:.72;margin-top:3px;}
.ag-miss{font-size:12px;font-weight:900;color:#c1272d;margin-top:4px;animation:ag-blink 1.1s ease-in-out infinite;}
@keyframes ag-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.ag-gen{padding:7px 16px;font-size:12px;font-weight:900;letter-spacing:.04em;flex:none;color:#fff !important;}
.ag-gen-red{background:#c1272d !important;border-color:#8f1b20 !important;}
.ag-gen-green{background:#1f8f5f !important;border-color:#15643f !important;}
.ag-row{position:relative;display:flex;align-items:center;gap:10px;border:1.5px solid var(--text);border-radius:12px;padding:8px 10px;margin-bottom:9px;
  cursor:pointer;background:var(--bg,#fff);}
.ag-row.ag-rej{border-color:#c1272d;background:#fff5f5;}
.ag-row-main{flex:1;min-width:0;display:flex;flex-direction:column;font-size:11.5px;line-height:1.4;}
.ag-row-main span{opacity:.72;}
.ag-thumb{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;border:1.5px solid var(--text);}
.ag-thumb-doc{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;background:rgba(0,0,0,.05);}
.ag-approval{position:absolute;top:-10px;right:34px;padding:4px 12px;font-size:11px;font-weight:900;background:#f489a3 !important;border-radius:999px;}
.ag-x{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#ef4444;color:#fff;
  font-size:11px;font-weight:900;cursor:pointer;padding:0;line-height:1;}
.ag-st{flex:none;font-size:9.5px;font-weight:900;letter-spacing:.05em;border-radius:999px;padding:2px 8px;border:1.5px solid;white-space:nowrap;}
.ag-st-signed,.ag-st-approved{color:#15643f;background:#e9f7ef;border-color:#15643f;}
.ag-st-pending,.ag-st-unsent{color:#8a5208;background:#fff3e0;border-color:#e2820c;}
.ag-st-rejected{color:#fff;background:#c1272d;border-color:#8f1b20;}
.ag-up-add{display:block;font-weight:800;font-size:12px;}
/* the screen tilt: round, the theme's pink, at the right end of the document's title row */
.ag-tilt{position:absolute;right:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:2px solid #121212;
  background:#f489a3;color:#121212;display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer;
  box-shadow:rgba(0,0,0,.3) 3px 3px 0 0;}
.ag-tilt svg{width:100%;height:100%;}
.ag-tilt.on{background:#121212;color:#f489a3;}
/* RECEIPT */
.rc-head{display:flex !important;align-items:center;gap:10px;}
.rc-add-btn{margin-left:auto;font:inherit;font-size:11.5px;font-weight:900;letter-spacing:.03em;padding:5px 13px;border:2px solid var(--text);
  border-radius:999px;background:#fff;cursor:pointer;text-transform:none;}
.rc-add-btn:hover{background:var(--accent);}
.rc-tiles{margin-bottom:12px;}
.rc-tile{cursor:pointer;}
.rc-tile.rc-unsaved{border-style:dashed;opacity:.85;}
.rc-tile.rc-rej{border-color:#c1272d;}
.rc-unsaved-note{color:#8a5208;font-weight:800;opacity:1 !important;white-space:normal !important;}
.rc-tile .ag-st{align-self:flex-start;margin-top:3px;}
.rc-none{font-size:12px;opacity:.6;}
.rc-zone{border-top:1px dashed rgba(0,0,0,.2);padding-top:10px;}
.rc-subhead{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin:6px 0 8px;}
.rc-foot{display:flex;justify-content:flex-start;margin:4px 0 6px;}
.rc-pop{font-size:13px;line-height:1.9;}
.rc-pop-t{width:100%;border-collapse:collapse;margin:8px 0;font-size:12.5px;}
.rc-pop-t th,.rc-pop-t td{border-bottom:1px solid rgba(0,0,0,.12);padding:4px 6px;text-align:left;}
.rc-pop-total{font-size:14px;}
/* MY BOOK: the bookmarks outside the left edge, and the red count on the logo */
/* SPEC §56 (OMAN 2026-09-22): "make the APPROVAL and NOTIFICS book mark rightwards, sits exactly left next to the white
   paper, not the outer frame of My Book". The book's padding box starts inside its 3px border and the left page starts
   21px (.pb-book padding) further in, so the tabs end at exactly that line and ride over the cover's frame to it. */
.mb-marks{position:absolute;right:calc(100% - 21px);top:60px;display:flex;flex-direction:column;gap:12px;align-items:flex-end;z-index:3;}
.mb-mark{position:relative;min-width:118px;padding:10px 16px 10px 20px;border:3px solid #121212;border-right:none;border-radius:999px 0 0 999px;
  background:#fdf3e7;font:inherit;font-size:14px;font-weight:900;letter-spacing:.08em;cursor:pointer;text-align:left;
  box-shadow:rgba(0,0,0,.25) -4px 4px 0 0;}
.mb-mark-approval{background:#fde68a;}
.mb-mark-notifics{background:#dbeafe;}
.mb-mark.on{background:#f489a3;transform:translateX(-6px);}
.mb-mark-n,.mb-badge{position:absolute;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;
  font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1;}
.mb-mark-n{top:-9px;left:-6px;}
.mybook-btn{position:relative;}
.mb-badge{top:-4px;right:-6px;}
.mb-badge[hidden]{display:none;}
.ap-cat{font-size:15px;font-weight:900;margin:14px 0 8px;border-bottom:2px dashed #121212;padding-bottom:4px;}
.ap-cat span{opacity:.6;}
.ap-row{display:flex;gap:12px;align-items:flex-start;border:2px solid #121212;border-radius:14px;background:#fff;padding:10px 12px;margin-bottom:10px;}
.ap-main{flex:1;min-width:0;}
.ap-title{border:none;background:none;padding:0;font:inherit;font-size:15px;font-weight:900;text-align:left;cursor:pointer;text-decoration:underline;}
.ap-sub{font-size:12px;opacity:.7;margin:2px 0 6px;}
.ap-files{display:flex;flex-wrap:wrap;gap:8px;}
.ap-file{border:1.5px solid #121212;border-radius:10px;background:#fff;padding:4px;cursor:zoom-in;display:flex;flex-direction:column;align-items:center;width:96px;}
.ap-file img{width:86px;height:64px;object-fit:cover;border-radius:6px;background:rgba(0,0,0,.05);}
.ap-file-doc{width:86px;height:64px;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgba(0,0,0,.05);border-radius:6px;}
.ap-file-n{font-size:10px;max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ap-rc{font-size:12.5px;margin-top:3px;}
.ap-why{margin-top:6px;padding:6px 9px;border-radius:8px;background:rgba(245,195,59,.18);font-size:12px;}
.ap-acts{display:flex;flex-direction:column;gap:7px;flex:none;}
.ap-yes{background:#1f8f5f !important;color:#fff !important;font-weight:900;}
.ap-no{background:#c1272d !important;color:#fff !important;font-weight:900;}
.ap-own{font-size:11px;opacity:.65;max-width:120px;}
.nt-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:2px solid #121212;border-radius:12px;background:#fff;
  padding:9px 12px;margin-bottom:9px;font:inherit;font-size:13px;cursor:pointer;opacity:.7;}
.nt-row.unread{opacity:1;border-color:#dc2626;box-shadow:rgba(220,38,38,.25) 3px 3px 0 0;}
.nt-row b{font-size:14px;}
.nt-when{font-size:11px;opacity:.6;}
.ap-focus{outline:3px solid #f489a3;outline-offset:4px;border-radius:12px;animation:ph-owe 1.2s ease-in-out 2;}
/* the check-in QR's MODE */
.att-mode-row{display:flex;justify-content:flex-end;margin-bottom:8px;}
.att-mode{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.06em;}
.att-mode select{width:auto !important;padding:4px 10px !important;font-weight:800;}
.att-min-code{font-size:44px;font-weight:900;letter-spacing:.3em;font-variant-numeric:tabular-nums;margin:2px 0 0 .3em;}
@media (prefers-reduced-motion:reduce){.ag-miss,.ap-focus{animation:none;}}

/* ══ SPEC §56 (OMAN 2026-09-22) — DRAFT under AGREEMENT · typed receipts · Service Link · Pet Home rows & multiple selection ·
      the ? · SHOP / E-COMMERCE pop-outs ══ */
/* DRAFT sits at the bottom left of the AGREEMENT section */
.ag-draft-foot{margin:12px 0 8px;}
/* Date · Total (RM) · Receipt no. above every service / shop receipt zone */
.rc-manual{gap:8px;margin-bottom:2px;}
.rc-manual .fl{font-size:11px;}
/* Service Link: the logo on top of the title (the header grows only while the stay/session is linked) */
.svc-head{position:relative;}
.svc-head.svc-linked{padding-top:52px !important;}
.svc-link-logo{position:absolute;left:24px;top:8px;width:42px;height:42px;object-fit:contain;pointer-events:auto;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.18));}
.svc-link-logo[hidden]{display:none;}
#add-session .gs-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:64px;}
/* the reminder pop-out: below the blocking dialogs (9500, §52's rule), above every ff-modal (5000) */
.svc-pop{position:fixed;inset:0;z-index:7000;background:rgba(18,18,18,.55);display:flex;align-items:center;justify-content:center;padding:24px;}
.svc-card{background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:18px;box-shadow:rgba(0,0,0,.3) 10px 10px 0 0;
  width:100%;max-width:680px;max-height:86vh;overflow-y:auto;padding:18px 22px;}
.svc-top{display:flex;align-items:center;gap:10px;font-size:20px;border-bottom:2px solid var(--text);padding-bottom:10px;margin-bottom:12px;}
.svc-logo{width:40px;height:40px;object-fit:contain;}
.svc-card p{font-size:13.5px;line-height:1.55;margin:0 0 10px;}
.svc-red{color:#c1272d;font-weight:900;font-size:15px;letter-spacing:.02em;margin:4px 0 14px;}
.svc-sub{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:0 0 8px;}
.svc-card .sold-stay{cursor:pointer;}
.svc-gcards{display:grid;gap:9px;}
.svc-gcard{display:flex;align-items:center;gap:12px;border:2px solid var(--text);border-radius:14px;padding:9px 12px;background:#fff;cursor:pointer;transition:transform .12s;}
.svc-gcard:hover{transform:translateY(-2px);}
.svc-gcard img,.svc-gph{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;border:1.5px solid rgba(0,0,0,.2);}
.svc-gph{display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(0,0,0,.04);}
.svc-gmain{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12px;line-height:1.45;}
.svc-gmain b{font-size:13.5px;}
.svc-gst{font-size:10.5px;font-weight:900;letter-spacing:.05em;border-radius:999px;padding:3px 10px;border:1.5px solid currentColor;white-space:nowrap;}
.svc-gst-completed{color:#1f8f5f;}
.svc-gst-arrived{color:#b7791f;}
.svc-gst-scheduled{color:#2563eb;}
.svc-foot{display:flex;justify-content:center;margin-top:16px;}
.svc-foot .btn{padding:9px 34px;font-weight:900;letter-spacing:.06em;}
/* a peek: the full stay / session, read-only, above the reminder; tapping outside comes back */
.ff-modal.svc-peek .ff-modal-card::before{content:'Viewing only — tap outside to go back';display:block;text-align:center;font-size:11px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;background:#fef3c7;border-bottom:2px solid var(--text);padding:6px;border-radius:22px 22px 0 0;}
.ff-modal.svc-peek .sec input,.ff-modal.svc-peek .sec select,.ff-modal.svc-peek .sec textarea,.ff-modal.svc-peek .ms-box,.ff-modal.svc-peek .bdp-btn,
.ff-modal.svc-peek .bk-ph{pointer-events:none;}
.ff-modal.svc-peek #bd-save,.ff-modal.svc-peek #bd-confirm,.ff-modal.svc-peek #bd-delete,.ff-modal.svc-peek #bd-cancel,.ff-modal.svc-peek .bd-stbtn,
.ff-modal.svc-peek #bd-add-groom,.ff-modal.svc-peek #gs-save,.ff-modal.svc-peek #gs-confirm,.ff-modal.svc-peek #gs-delete,.ff-modal.svc-peek #gs-cancel,
.ff-modal.svc-peek #gs-arrived,.ff-modal.svc-peek .bk-return,.ff-modal.svc-peek #bd-rc-zone,.ff-modal.svc-peek #gs-rc-zone{display:none !important;}

/* Pet Home: row 1 = SORTS + AGE ROOM (left) · search (the frame's centre) · Grid / Table (right);
   row 2 = CYCLE + ALL … HOMED (left, ALL exactly under AGE) · the dropdowns and Reset (right end) */
.ph-frame{position:relative;}
.ph-head{display:block !important;}
.ph-row1{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;}
.ph-row1 .vt{justify-self:end;}
.ph-left{display:flex;align-items:center;gap:12px;}
.ph-title{flex:0 0 84px;margin:0;font-family:'Quicksand',sans-serif;font-size:17px !important;font-weight:800 !important;letter-spacing:.06em;color:var(--text);opacity:1;}
.ph-head .ph-fb{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap;}
.ph-dd{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto;flex:0 1 auto;min-width:0;}
/* one row at the console's 1920 px: the five selects give up a little width rather than wrap onto a third line */
.ph-dd select{min-width:0;flex:0 1 auto;padding:6px 7px !important;}
@media (min-width:1201px){.ph-head .ph-fb{flex-wrap:nowrap;}}
/* the hold and the mode: a filling ring while held, then every option's outline flashes */
.ph-f{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;}
.ph-f.ph-holding{animation:ph-hold 3s linear forwards;}
@keyframes ph-hold{from{box-shadow:0 0 0 0 rgba(18,18,18,.35);}to{box-shadow:0 0 0 7px rgba(18,18,18,.35);}}
.ph-head.ph-multi .ph-f{animation:ph-flash .9s ease-in-out infinite;}
@keyframes ph-flash{0%,100%{outline:3px solid rgba(193,39,45,.95);outline-offset:2px;}50%{outline:3px solid rgba(193,39,45,0);outline-offset:4px;}}
/* the ? in the 30 px band between the Pet Home title and the frame (.ff-section-head margin-bottom), centred in it, over SORTS */
.ph-help-q{position:absolute;left:24px;top:-17px;transform:translateY(-50%);width:24px;height:24px;padding:0;border:none;background:transparent;cursor:pointer;z-index:2;line-height:0;}
.ph-help-q img{width:100%;height:100%;object-fit:contain;display:block;}
.ph-help-q:hover{transform:translateY(-50%) scale(1.12);}
.ph-help p{margin:0 0 9px;font-size:13px;line-height:1.55;text-align:left;}
@media (max-width:900px){.ph-row1{grid-template-columns:1fr;}.ph-row1 .vt{justify-self:start;}.ph-dd{margin-left:0;justify-content:flex-start;}}

/* Product Sales: the two pop-outs, titled in their own pill's colours */
.ps-pop{max-width:760px;}
/* ══ SPEC §158 (OMAN 2026-10-17) — E-Commerce · Receipt · Agenda refresh · today's product sales ══════════════════════════════ */
/* "make the E-Commerce Product Sale pop out 50% wider … on the left and 50% on the right" — twice its width, never past the screen */
#ecom-sale .ff-modal-card{max-width:min(1520px,96vw);width:min(1520px,96vw);}
/* a platform under its logo; its accounts in its colour, the chosen one filled */
.ecom-plat{margin:4px 0 10px;}
.ecom-plat-h{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 6px;}
.ecom-logo-m{height:26px;width:auto;display:block;}
.ecom-logo-s{height:1em;width:auto;vertical-align:-.14em;margin-right:5px;}
.ecom-logo-up{font-size:11px;font-weight:800;border:1.5px dashed var(--text);border-radius:999px;padding:2px 10px;cursor:pointer;background:#fff;}
.ecom-plat-shops{display:flex;flex-wrap:wrap;gap:8px;}
.ecom-plat .ecom-shop-pill{border-color:var(--ec,var(--text));color:var(--ec,var(--text));background:#fff;}
.ecom-plat .ecom-shop-pill.sel{background:var(--ec,var(--text));color:var(--ec-ink,#fff);box-shadow:rgba(0,0,0,.25) 2px 2px 0 0;}
.ecom-plat .ecom-shop-pill.sel .ecom-logo-s{filter:drop-shadow(0 0 1px #fff);}
.ecom-shops-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;}
.ecom-tag{display:inline-flex;align-items:center;font-weight:900;font-size:12px;color:var(--ec,var(--text));border:1.5px solid var(--ec,var(--text));border-radius:999px;
  padding:1px 9px;background:#fff;white-space:nowrap;line-height:1.35;}
.ecom-tag-xs{font-size:9.5px;padding:0 6px;}
.ecom-tag-l{font-size:15px;padding:3px 12px;}
.ecom-pick .ecom-plat-shops{gap:10px;}
/* the recorded bills, by account, with what is in each */
.awb-shop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0 2px 8px;font-size:12px;font-weight:800;}
.awb-items{flex-basis:100%;font-size:11.5px;margin-top:2px;opacity:.9;}
/* the airway bill's items — Confirm? stays in view while the list scrolls */
.epick-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;margin-top:-4px;
  background:var(--card-bg,#fff);border-bottom:1.5px dashed var(--text);}
.epick-who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.epick-ok{flex:none;font-weight:900;}
.epick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px 10px;margin-top:12px;}
.epick-tile{position:relative;border:2px solid var(--text);border-radius:12px;padding:14px 8px 8px;cursor:pointer;background:#fff;}
.epick-tile.on{border-color:#1f7a3d;box-shadow:0 0 0 2px rgba(31,122,61,.45);}
.epick-tags{position:absolute;top:-10px;right:6px;display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 12px);}
.epick-img{width:100%;height:90px;object-fit:cover;border-radius:8px;border:1.5px solid var(--text);display:block;}
.epick-ph{display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;background:var(--accent-2,#f4f4f4);}
.epick-nm{font-size:12px;font-weight:800;margin-top:6px;line-height:1.25;}
.epick-st{font-size:11px;opacity:.7;}
.epick-qty{display:flex;align-items:center;gap:5px;margin-top:6px;font-weight:900;}
.epick-qty input{width:72px;padding:4px 6px;border:2px solid #1f7a3d;border-radius:8px;font:inherit;font-weight:800;}
/* Stocks → ＋ E-Comm Register */
.stk-tile.stk-ecom{position:relative;}
.stk-tile.stk-ecom-on{border-color:var(--ec,#ee4d2d);animation:stk-ecom-glow 1.2s ease-in-out infinite;}
@keyframes stk-ecom-glow{0%,100%{box-shadow:0 0 0 3px var(--ec,#ee4d2d);}50%{box-shadow:0 0 0 1px rgba(0,0,0,0);}}
.stk-ecom-tag{position:absolute;top:-10px;right:10px;z-index:2;}
.stk-ecom-btn{background:#fff3ee;border:2px solid #ee4d2d;color:#b3321b;font-weight:800;}
.stk-ecom-btn.on{background:#ee4d2d;color:#fff;font-weight:900;}
/* ══ SPEC §159 (OMAN 2026-10-17) — Stocks: General ▾ · E-Commerce ▾ · every account's tag · the count's two views ══ */
.stk-tile{position:relative;}
/* an item on two accounts wears both tags, side by side on its top right (they wrap before they leave the frame) */
.stk-ecom-tag{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 20px);pointer-events:none;}
.stk-menu-wrap{position:relative;display:inline-flex;}
.stk-menu-btn{background:#fff;border:2px solid var(--text);font-weight:900;}
.stk-menu-btn[aria-expanded="true"]{background:var(--accent);box-shadow:var(--shadow-sm);}
.stk-menu{top:calc(100% + 8px);z-index:30;}
.stk-menu button[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none;}
/* E-Commerce ▾ holds the platforms' headings too, so it keeps a card under it (the Dashboard menu's own §69 frame) */
.stk-ec-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:flex;flex-direction:column;gap:8px;min-width:260px;padding:12px 14px;
  background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:20px;box-shadow:rgba(0,0,0,.28) 6px 6px 0 0;}
.stk-ec-menu[hidden]{display:none;}
.stk-ec-reg{font:inherit;font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer;padding:7px 16px;border:2px solid #ee4d2d;border-radius:999px;
  background:#fff3ee;color:#b3321b;box-shadow:var(--shadow-sm);}
.stk-ec-reg[disabled]{opacity:.45;cursor:not-allowed;}
.stk-ec-menu .ecom-plat{margin:2px 0 0;}
.stk-ec-menu .ecom-shop-pill[disabled]{opacity:.45;cursor:not-allowed;}
.stk-ec-note{font-size:10.5px;opacity:.7;margin:0 2px;white-space:normal;max-width:280px;}
.stk-ec-menu-btn.on{border-color:var(--ec,#ee4d2d);color:var(--ec,#b3321b);}
.stk-ec-menu-btn .ecom-tag{margin-left:4px;}
/* the count's corner: Counted (yellow) / Uncounted (blue) · what is left · COMPLETE, which breathes green once nothing is */
.stk-done-box{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto;}
.stk-view-btn{border:2px solid var(--text);border-radius:181px;font-weight:900;letter-spacing:.04em;}
.stk-view-btn.stk-view-blue{background:#2563eb;color:#fff;}
.stk-left{font-size:11.5px;font-weight:800;white-space:nowrap;}
.stk-left.all{color:#1f7a3d;font-weight:900;}
#stk-complete.stk-go{animation:stk-go 1.1s ease-in-out infinite;}
@keyframes stk-go{0%,100%{box-shadow:0 0 0 0 rgba(31,143,95,.75);filter:none;}50%{box-shadow:0 0 0 8px rgba(31,143,95,0);filter:brightness(1.2);}}
@media (prefers-reduced-motion:reduce){#stk-complete.stk-go{animation:none;}}
/* ⛔ THE SHELF WAS CHOPPY because every tile was drawn, laid out and painted, and every photo fetched and decoded, whether or not it
   was on screen. A group off screen is now skipped until it scrolls near (its height remembered once drawn); the photos load lazily.
   The padding keeps a tile's breathing frame and its tags inside the group, which clips what overflows it. */
.stk-group{content-visibility:auto;contain-intrinsic-size:auto 640px;padding:2px 5px 9px;margin-bottom:13px;}
/* the airway bill's item pop-out offers every stock registered on the account; Loyverse's 0 (or no figure) is said in red */
.epick-st.out{color:#a8271f;font-weight:800;}
/* Receipt: the month's cash, line by line */
.cash-btns{display:flex;gap:8px;align-items:center;margin-left:auto;}
.cash-btns .cash-wd{margin-left:0;}
.cash-rep{font-weight:900;background:#fff;border:2px solid var(--text);}
.crep-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px;}
.crep-sum{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;margin-bottom:12px;padding:8px 12px;border:1.5px solid var(--text);border-radius:12px;}
.crep-in{color:#1f7a3d;} .crep-out{color:#a8271f;} .crep-ok{color:#15643f;} .crep-bad{color:#a8271f;}
.crep-table{display:flex;flex-direction:column;font-size:12px;overflow-x:auto;}
.crep-row{display:grid;grid-template-columns:86px minmax(200px,1fr) 90px 90px 100px;gap:8px;padding:5px 2px;border-bottom:1px dashed rgba(0,0,0,.15);align-items:baseline;min-width:560px;}
.crep-row.crep-row3{grid-template-columns:96px minmax(200px,1fr) 100px;min-width:0;}
.crep-row > span:nth-child(n+3){text-align:right;}
.crep-head{font-weight:900;opacity:.7;}
.crep-row i{font-style:normal;font-size:11px;opacity:.6;}
.crep-count{background:#eef9f1;color:#15643f;}
.crep-count.crep-bad{background:#fde2e0;color:#a8271f;}
/* Agenda: ⟳ Refresh, the size of Review */
.agd-refresh{padding:3px 11px;border:2px solid #121212;border-radius:999px;background:#fff;font:inherit;font-size:11.5px;font-weight:900;line-height:15.5px;white-space:nowrap;
  cursor:pointer;box-shadow:rgba(0,0,0,.25) 2px 2px 0 0;}
/* today's product sales, by where they were sold */
.pst-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:12px;border-bottom:1px solid #f1f1f1;}
.pst-r{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.pst-ref{font-size:11px;opacity:.6;}
.pst-src{font-size:9.5px;font-weight:900;border:1.5px solid currentColor;border-radius:999px;padding:1px 7px;}
.pst-pet{color:#7c3aed;} .pst-shop{color:#15643f;} .pst-ecom{color:#ee4d2d;}
.pst-best-h{margin:14px 0 4px;font-weight:900;font-size:12.5px;}
.pst-best{display:grid;grid-template-columns:22px 1fr auto;gap:0 8px;font-size:12px;padding:4px 0;border-bottom:1px dashed rgba(0,0,0,.1);}
.pst-split{grid-column:2 / 4;font-size:10.5px;opacity:.65;}

.ps-pop-title{display:inline-block;border:2px solid var(--text);border-radius:999px;padding:6px 18px;font-weight:900 !important;letter-spacing:.03em;}
.ps-pop-shop{background:#dcfce7;color:#14532d;border-color:#14532d;}
.ps-pop-ecom{background:#e0e7ff;color:#3730a3;border-color:#3730a3;}
.ps-pop-foot{display:flex;justify-content:flex-end;margin-top:16px;}
.ps-pop-foot .btn{padding:9px 26px;font-weight:900;}
.ph-f-shop,.ph-f-ecom{cursor:pointer;}
.awb-scan{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 14px;border:2px dashed #3730a3 !important;border-radius:12px;
  background:#f5f7ff;letter-spacing:.04em;}
.awb-scan:focus{outline:3px solid rgba(55,48,163,.35);border-style:solid !important;}
.awb-detail{margin-top:14px;border:2px solid var(--text);border-radius:14px;padding:10px 12px;background:#fff;}
.awb-detail-t{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:6px;}
.awb-row{display:flex;align-items:center;gap:10px;}
.awb-text{flex:1;min-width:0;font-family:ui-monospace,Consolas,monospace;font-size:15px;font-weight:700;word-break:break-all;padding:8px 10px;
  border:1.5px solid rgba(0,0,0,.2);border-radius:10px;background:#fafafa;}
.awb-text.awb-empty{font-family:inherit;font-weight:400;font-size:12.5px;opacity:.6;}
.awb-row .btn{flex:none;padding:9px 20px;font-weight:900;}
.awb-row .btn:disabled{opacity:.45;cursor:not-allowed;}
.awb-note{font-size:11px;opacity:.65;margin-top:6px;}
.awb-recent{display:grid;gap:6px;max-height:320px;overflow-y:auto;padding-right:4px;}
.awb-rec{display:flex;justify-content:space-between;gap:10px;font-size:12px;border-bottom:1px dashed rgba(0,0,0,.14);padding:4px 2px;}
.awb-rec b{font-family:ui-monospace,Consolas,monospace;word-break:break-all;}
.awb-rec span{opacity:.65;white-space:nowrap;}
.awb-none{opacity:.6;}
@media (prefers-reduced-motion:reduce){.ph-head.ph-multi .ph-f,.ph-f.ph-holding{animation:none;}.ph-head.ph-multi .ph-f{outline:3px solid #c1272d;outline-offset:2px;}}

/* ══ SPEC §57 (OMAN 2026-09-23) — the Payment section above Where did you see us? ══ */
.sf-pay{margin-bottom:6px;}
.pay-row{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;}
.pay-col{display:flex;flex-direction:column;gap:8px;}
.pay-col-dep{flex-direction:row;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.pay-btn{padding:7px 16px;font-size:12px;font-weight:900;letter-spacing:.03em;border:2px solid var(--text);border-radius:999px;background:#fff;}
.pay-btn.on{background:var(--text);color:#fff;}
.pay-btn[disabled]{cursor:default;opacity:1;}
.pay-btn[disabled]:not(.on){opacity:.35;}
.pay-boxes{display:flex;gap:10px;flex-wrap:wrap;}
.pay-box{display:flex;flex-direction:column;gap:3px;width:128px;}
.pay-box .fl{margin:0;white-space:nowrap;}
.pay-in{width:100%;box-sizing:border-box;}
.pay-ro{padding:8px 10px;border:2px dashed rgba(18,18,18,.35);border-radius:10px;font-weight:800;font-size:13px;background:#f7f5ef;white-space:nowrap;}
.pay-note{font-size:11.5px;opacity:.75;margin-top:6px;}
.pay-match{font-size:12px;font-weight:800;margin-top:4px;}
.pay-match.pay-ok{color:#1f7a3d;}
.pay-match.pay-bad{color:#c1272d;}

/* ══ SPEC §57 — COMPANY POLICY on the Mushroom wall (the spot OMAN marked: x≈40%, y≈47%, about the PLAYBOOK's size) ══ */
.mr-policy{position:absolute;left:39.8%;top:47.4%;width:4.8%;transform:translate(-50%,-50%);z-index:3;padding:0;border:none;background:none;cursor:pointer;line-height:1;
  display:flex;flex-direction:column;align-items:center;}
.mr-policy img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));transition:transform .15s;}
.mr-policy:hover img{transform:translateY(-2px) scale(1.05);}
.mr-policy-name{display:inline-block;margin-bottom:2px;padding:1px 6px;border:1.5px solid #121212;border-radius:999px;background:#fff8eb;white-space:nowrap;
  font-family:'Sugar Peachy',Arial,sans-serif;font-size:clamp(7px,.56vw,10.5px);letter-spacing:.04em;color:#121212;}
.pol{max-width:760px;font-size:13px;line-height:1.55;}
.pol h3{margin:0 0 8px;font-size:16px;}
.pol h4{margin:14px 0 6px;font-size:13.5px;}
.pol p{margin:0 0 8px;}
.pol ul,.pol ol{margin:0 0 8px;padding-left:22px;}
.pol li{margin-bottom:6px;}
/* ══ SPEC §57 — the E-Commerce camera scanner ══ */
/* SPEC §88: the frame is always there — its own button switches the camera off and on; All Clear sits at its right */
.awb-camrow{display:flex;gap:14px;align-items:stretch;margin-top:10px;flex-wrap:wrap;}
.awb-cam{position:relative;flex:1 1 300px;border:2px solid var(--text);border-radius:14px;overflow:hidden;background:#111;max-width:760px;aspect-ratio:16/9;}
.awb-cam:not(.on) video,.awb-cam:not(.on) .awb-cam-aim{visibility:hidden;}
.awb-cam-toggle{position:absolute;right:8px;bottom:8px;font:inherit;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;border:2px solid #fff;
  background:rgba(17,17,17,.72);color:#fff;cursor:pointer;}
.awb-cam:not(.on) .awb-cam-toggle{right:auto;bottom:auto;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;padding:10px 18px;background:#fff;color:#111;}
.awb-clear{flex:0 0 150px;display:flex;flex-direction:column;justify-content:center;gap:8px;}
.awb-clear .btn{padding:14px 10px;font-size:15px;font-weight:900;}
.awb-clear .awb-note{margin-top:0;}
@media (max-width:560px){ .awb-clear{flex:1 1 100%;} }
.awb-day{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-top:8px;padding:5px 9px;border-radius:9px;background:#ede9fe;color:#3730a3;font-size:12px;}
.awb-day span{font-weight:900;white-space:nowrap;}
.awb-cam video{width:100%;height:100%;object-fit:cover;display:block;}
/* SPEC §159: a barcode's shape — as wide as §158's (90 %), half as tall (28 %), so the bars fill it and the parcel comes close */
.awb-cam-aim{position:absolute;left:5%;right:5%;top:36%;bottom:36%;border:3px solid rgba(255,255,255,.85);border-radius:8px;box-shadow:0 0 0 999px rgba(0,0,0,.28);}
.awb-cam.hit .awb-cam-aim{border-color:#22c55e;animation:awb-hit .6s ease-out;}
@keyframes awb-hit{0%{box-shadow:0 0 0 999px rgba(34,197,94,.35);}100%{box-shadow:0 0 0 999px rgba(0,0,0,.28);}}
.awb-cam-bar{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.awb-cam-msg{font-size:11.5px;opacity:.75;}

/* ══ SPEC §57 — the grooming add-ons answered ✓ / ✕ (Optional) ══ */
.gs-addons-req{text-transform:none;letter-spacing:0;font-weight:600;color:#b45309;}
.gs-addon-btn{position:relative;}
.gs-ans{position:absolute;top:0;bottom:0;width:50%;padding:0;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;}
.gs-ans-yes{left:0;}
.gs-ans-no{right:0;}
.gs-ans span{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;line-height:1;color:#fff;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);opacity:.8;transition:transform .1s,opacity .1s;}
.gs-ans-yes span{background:#1f8f5f;}
.gs-ans-no span{background:#c1272d;}
.gs-ans:hover span{opacity:1;transform:scale(1.1);}
.gs-addon.ans-yes .gs-addon-btn{border-color:#1f8f5f;box-shadow:0 0 0 3px #1f8f5f;}
.gs-addon.ans-no .gs-addon-btn{border-color:#c1272d;box-shadow:0 0 0 3px #c1272d;}
.gs-addon.ans-yes .gs-addon-btn img{filter:none;opacity:1;}
.gs-addon.ans-yes .gs-ans span,.gs-addon.ans-no .gs-ans span{opacity:0;}
.gs-addon.ans-yes .gs-ans:hover span,.gs-addon.ans-no .gs-ans:hover span{opacity:.85;}
.gs-addon-tick{z-index:3;pointer-events:none;}
.gs-tick-no{background:#c1272d;}
.gs-addon.gs-need .gs-addon-btn{animation:ph-owe 1.2s ease-in-out infinite;border-color:#c1272d;}
/* the ticked add-ons under the groomer on the appointment card: tiny, one row */
.ga-addons{flex-wrap:nowrap;gap:3px;margin-top:2px;}
.ga-addon{font-size:7.5px;padding:0 5px;line-height:1.5;border-width:1px;}
/* ══ SPEC §57 — Delayed (blue, a clock) and the answer glow ══ */
.svc-clock{width:1.05em;height:1.05em;vertical-align:-.16em;display:inline-block;}
.btn-delayedappt{background:#2563eb;color:#fff;border:2px solid var(--text);box-shadow:var(--shadow-sm);}
.btn-delayedappt:hover{background:#1d4ed8;}
.bd-stbtn[data-st="delayed"]{color:#fff;background:#2563eb;}
.bd-stbtn[data-st="delayed"]:hover{background:#1d4ed8;}
.ga-status-delayed{color:#1d4ed8;border-color:#1d4ed8;background:#eef4ff;}
.groom-appt.is-delayed{border:2px solid #2563eb;background:#f2f6ff;}
#add-session .ff-modal-card.gstat-delayed,#add-boarding .ff-modal-card.bstat-delayed{border-color:#2563eb !important;}
.groom-appt.svc-due,.board-bar.svc-due{animation:svc-due 1.6s ease-in-out infinite;}
@keyframes svc-due{0%,100%{box-shadow:0 0 0 2px rgba(193,39,45,.45);}50%{box-shadow:0 0 16px 6px rgba(193,39,45,.55),0 0 0 3px #c1272d;}}
/* ══ SPEC §57 — the two people in charge, beside Returning Customer; today's owner update ══ */
.bk-toprow{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.bk-toprow .bk-return{margin:0;}
.svc-pic{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;}
.svc-pic[hidden]{display:none;}
.svc-picbox{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:118px;padding:5px 10px;border:2px dashed rgba(18,18,18,.35);border-radius:12px;
  background:#fff;font:inherit;text-align:left;cursor:default;}
.svc-picbox.can{border-style:solid;border-color:var(--text);cursor:pointer;animation:ph-owe 1.4s ease-in-out infinite;}
.svc-picbox.done{border-style:solid;border-color:#1f8f5f;background:#effaf3;}
.svc-piccap{font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;opacity:.6;}
.svc-picname{font-size:12.5px;font-weight:800;}
.svc-picok{font-size:10.5px;font-weight:900;color:#1f8f5f;}
.svc-picgo{font-size:10px;font-weight:800;color:#b45309;}
.svc-ou{display:flex;flex-direction:column;gap:3px;padding:5px 10px;border:2px solid #c1272d;border-radius:12px;background:#fff5f5;}
.svc-ou.done{border-color:#1f8f5f;background:#effaf3;}
.svc-ou.need{animation:ph-owe 1.2s ease-in-out infinite;}
.svc-ou-t{font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;}
.svc-ou-row{display:flex;gap:5px;align-items:center;}
.svc-ou-row img{width:34px;height:34px;border-radius:7px;object-fit:cover;border:1.5px solid rgba(0,0,0,.25);cursor:pointer;}
.svc-ou-add{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border:2px dashed var(--text);border-radius:8px;
  font-size:11px;font-weight:900;cursor:pointer;background:#fff;white-space:nowrap;}
/* ══ SPEC §57 — the Service Link under the Pet Photo, its bar / cards breathing red ══ */
.svc-under{display:flex;align-items:flex-start;gap:12px;margin-top:10px;}
.svc-under[hidden]{display:none;}
.svc-under-logo{width:42px;height:42px;object-fit:contain;flex:none;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.18));}
.svc-under-main{flex:1;min-width:0;}
.svc-under .sold-stay,.svc-under .svc-gcard{outline:3px solid #c1272d;outline-offset:2px;animation:svc-under 1.3s ease-in-out infinite;cursor:pointer;}
@keyframes svc-under{0%,100%{outline-color:rgba(193,39,45,.25);}50%{outline-color:#c1272d;}}
/* ══ SPEC §57 — the services in the logo's row: 4 a row, right-aligned, two rows at most ══ */
.svc-head .bd-topright{position:absolute;top:8px;right:62px;margin:0;display:grid;grid-template-columns:repeat(var(--svc-cols,4),max-content);
  gap:6px;justify-content:end;align-items:center;z-index:2;}
.svc-head.svc-pills1{padding-top:50px !important;}
.svc-head.svc-pills2{padding-top:88px !important;}
#add-session .gs-head{padding-right:24px;}
@media (prefers-reduced-motion:reduce){.groom-appt.svc-due,.board-bar.svc-due,.svc-under .sold-stay,.svc-under .svc-gcard,.svc-picbox.can,.svc-ou.need,.gs-addon.gs-need .gs-addon-btn{animation:none;}}
/* ══ SPEC §57 — My Book: JUJU LOG (pink) above APPROVAL (yellow) and NOTIFICS (blue) ══ */
.mb-mark-jujulog{background:#f9a8c9;}
.mb-mark-jujulog.on{background:#f472b6;}
.jl-note{font-size:11.5px;opacity:.8;margin:0 0 12px;}
.jl-bad{color:#c1272d;font-weight:900;}
.jl-good{color:#1f7a3d;font-weight:900;}
.jl-emp{border:2px solid var(--text);border-radius:14px;padding:10px 12px;margin-bottom:12px;background:#fff;}
.jl-emp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.jl-name{font-weight:900;font-size:14px;}
.jl-growth{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:900;letter-spacing:.04em;color:#1f7a3d;}
.jl-leaf{width:15px;height:15px;}
.jl-chips{display:flex;gap:5px;margin-left:auto;}
.jl-chip{border:2px solid var(--text);border-radius:999px;background:#fff;padding:3px 9px;font:inherit;font-size:11px;font-weight:900;cursor:pointer;}
.jl-chip b{font-weight:900;}
.jl-chip.on{background:var(--text);color:#fff;}
.jl-chip.red{border-color:#c1272d;color:#c1272d;}
.jl-chip.red.on{background:#c1272d;color:#fff;}
.jl-why{font-size:11.5px;margin:8px 0 6px;}
.jl-tasks{width:100%;border-collapse:collapse;font-size:12px;}
.jl-tasks th{text-align:left;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;opacity:.6;padding:3px 6px;border-bottom:1.5px solid rgba(0,0,0,.15);}
.jl-tasks td{padding:6px;border-bottom:1px dashed rgba(0,0,0,.12);}
.jl-tasks td small{font-size:9px;opacity:.55;letter-spacing:.05em;}
.jl-task{cursor:pointer;}
.jl-task:hover{background:rgba(0,0,0,.03);}
.jl-task.red td{color:#c1272d;font-weight:800;}
.jl-task.red .jl-eff{background:#fdecec;}
.jl-detail td{background:#faf7f0;}
.jl-item{display:flex;gap:10px;align-items:center;font-size:11.5px;padding:3px 0;}
.jl-d{width:78px;flex:none;opacity:.7;}
.jl-l{flex:1;min-width:0;}
.jl-st{font-size:9px;font-weight:900;letter-spacing:.06em;border:1.5px solid currentColor;border-radius:999px;padding:1px 7px;}
.jl-st-ontime{color:#1f7a3d;}
.jl-st-late{color:#b45309;}
.jl-st-missed{color:#c1272d;}
.jl-st-open{color:#2563eb;}

/* ══ SPEC §58 (OMAN 2026-09-23) ═══════════════════════════════════════════════════════════════════════════════════════ */
/* 💾 Save beside 🗑 Delete — Delete's own shape, in green; the pair is the footer's left end */
.bk-foot-left{display:flex;gap:10px;align-items:center;margin-right:auto;}
.btn-save{background:#eefaf3;color:#1f8f5f;border:2px solid #1f8f5f;box-shadow:var(--shadow-sm);}
.btn-save:hover{background:#dcf3e6;}

/* THE RECEIPT STILL OWED — the uploaded scroll, bobbing; each place its own size and beat */
.rc-need{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer;line-height:0;
  animation:rc-bob 1.7s ease-in-out infinite;}
.rc-need img{display:block;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.25));}
.rc-need[hidden]{display:none;}
@keyframes rc-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.rc-need-b{width:24px;margin-top:3px;animation-duration:1.6s;}                 /* Boarding Schedule, under the contact number */
.rc-need-g{width:17px;margin-top:2px;animation-duration:1.9s;}                 /* grooming card, smaller */
.rc-need-pop{width:34px;height:30px;padding:3px 4px;border:2px solid #121212;border-radius:9px;background:#fff;animation-duration:1.8s;}
.bk-toprow .rc-need-pop{margin-left:auto;}                                     /* the right end of Returning Customer's row */
.pc-rc{position:absolute;top:6px;left:6px;z-index:7;width:28px;animation-duration:2s;}   /* Pet Home: top left of the photo */
.pc-draft ~ .pc-rc{top:28px;}
.rc-zone-flash{outline:3px solid #1f8f5f;outline-offset:4px;border-radius:12px;animation:rc-zone-flash .65s ease-in-out 4;}
@keyframes rc-zone-flash{0%,100%{outline-color:rgba(31,143,95,.2);}50%{outline-color:#1f8f5f;}}
.board-label.bl-open{cursor:pointer;}
.board-label.bl-open:hover{filter:brightness(.97);}

/* a filed receipt's ✕ (asks for the PIN) */
.rc-tile{position:relative;}
.rc-del{position:absolute;top:4px;right:4px;z-index:2;width:22px;height:22px;border-radius:50%;border:2px solid #121212;background:#fff;
  color:#dc2626;font-size:11px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.rc-del:hover{background:#fee2e2;}

/* Pet Home's ? — the very top right of the frame */
.ph-help-q{left:auto;right:5px;top:5px;transform:none;}   /* clear of Grid · Table, which ends 31 px from the frame edge */
.ph-help-q:hover{transform:scale(1.12);}

/* Edit boarding stay: the Service Link grooming card, as small as it goes, ✂ behind it at 50% */
.svc-gcards-s{display:flex;flex-wrap:wrap;gap:6px;}
.svc-gcard-s{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:10px;
  font-size:11.5px;line-height:1.3;width:auto;max-width:100%;}
.svc-gcard-s::before{content:"\2702";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;
  opacity:.5;pointer-events:none;z-index:0;}
.svc-gcard-s > *{position:relative;z-index:1;}
.svc-gcard-s b{font-size:12px;}
.svc-gcard-s .svc-gst{font-size:9.5px;padding:1px 7px;margin-right:22px;}

/* THE STAR — top left of the tree, in the tree's own box (so it scales with it), bobbing where it hangs */
.rt-stars{position:absolute;left:-1.7%;top:8.4%;width:25.2%;z-index:2;pointer-events:none;display:flex;gap:6%;}
.rt-stars[hidden]{display:none;}
/* SPEC §110 (OMAN 2026-10-05): THE FLOWER — his own picture, standing on the grass at the tree's foot, left of the trunk (where
   he marked it). Inside the tree's box like the star, so it rides the tree on every screen size; it sways from its root. */
.rt-flowers{position:absolute;left:17%;bottom:2.5%;width:20%;z-index:2;pointer-events:none;display:flex;gap:6%;align-items:flex-end;}
.rt-flowers[hidden]{display:none;}
.rt-flower{position:relative;flex:0 0 100%;padding:0;border:none;background:none;cursor:pointer;pointer-events:auto;line-height:0;transition:transform .15s;transform-origin:50% 100%;}
.rt-flower img{display:block;width:100%;height:auto;transform-origin:50% 100%;
  /* SPEC §119 (OMAN 2026-10-06): "make the outline slightly thicker" — the picture's own line colour, drawn once more around it */
  filter:drop-shadow(1.2px 0 0 #ac4258) drop-shadow(-1.2px 0 0 #ac4258) drop-shadow(0 1.2px 0 #ac4258) drop-shadow(0 -1.2px 0 #ac4258);}
.rt-flower:hover{transform:scale(1.08);}
.rt-flower:focus-visible{outline:3px solid #1f7a3d;outline-offset:3px;border-radius:12px;}
html.anim .rt-flower img{animation:rt-flower-sway 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.9s);}
@keyframes rt-flower-sway{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}
@media (prefers-reduced-motion:reduce){html.anim .rt-flower img{animation:none;}}
.apple-facts{margin-top:10px;padding:8px 12px;border:1.5px dashed var(--text);border-radius:10px;font-size:12.5px;line-height:1.5;}
/* Admin → Bonus: a kind's row and its stages */
.rtk{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.rtk-on{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:800;min-width:70px;padding-bottom:8px;}
.rtk-stage{margin-top:8px;padding:8px 10px;border:1.5px dashed #b8b0a2;border-radius:10px;}
.rtk-stage .fg{min-width:140px;}
.rtk-st{flex:0 0 100%;font-size:11.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;}
.rtk-hint{font-size:11.5px;opacity:.75;margin:10px 0 0;line-height:1.5;}
.rt-star{position:relative;flex:0 0 100%;padding:0;border:none;background:none;cursor:pointer;pointer-events:auto;line-height:0;
  filter:drop-shadow(0 0 5px rgba(255,214,60,.85));transition:transform .18s ease;}
.rt-star img{display:block;width:100%;height:auto;}
.rt-star:hover{transform:scale(1.08);}
.rt-star:focus-visible{outline:3px solid #1f7a3d;outline-offset:3px;border-radius:50%;}
html.anim .rt-star img{animation:rt-star-bob 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.8s);}
@keyframes rt-star-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* PLAYBOOK: a sub-category sits indented under its category */
.pb-cat.pb-sub{margin-left:22px;padding:6px 11px;font-size:.92em;border-width:1.5px;grid-template-columns:40px 1fr auto;}
.pb-cat.pb-sub .pb-cat-no{width:36px;height:22px;border-radius:999px;font-size:11px;background:#555;}
.pb-tool.pb-sub-add{font-size:12px;font-weight:900;border:2px solid #121212;border-radius:999px;padding:3px 10px;background:#fff;}
.pb-parent{font-size:12px;font-weight:700;opacity:.6;}

/* MY BOOK: a number that rises pops; APPROVAL's History */
.mb-pop{animation:mb-pop .55s cubic-bezier(.2,1.6,.4,1) 1;}
@keyframes mb-pop{0%{transform:scale(.4);}60%{transform:scale(1.35);}100%{transform:scale(1);}}
.ap-hist-btn{border:2px solid #121212;border-radius:999px;background:#fff;font:inherit;font-size:12px;font-weight:900;padding:4px 12px;cursor:pointer;}
.ap-hist-btn:hover{background:#fdf3dc;}
.pb-head .pb-head-tools{margin-left:auto;}
.ap-hist-head{gap:10px;}
.ap-back{border:2px solid #121212;border-radius:50%;width:32px;height:32px;background:#fff;font-size:17px;font-weight:900;line-height:1;cursor:pointer;flex:none;}
.ap-back:hover{background:#fdf3dc;}
.ap-hcat{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;opacity:.6;margin-bottom:2px;}
.ap-hist .ap-main{display:flex;flex-direction:column;align-items:flex-start;}
.ap-out{margin-top:6px;font-size:12px;}
.ap-out b{display:inline-block;padding:1px 8px;border-radius:999px;border:1.5px solid currentColor;font-size:10.5px;letter-spacing:.05em;}
.ap-out-yes{color:#1f7a3d;}
.ap-out-no{color:#a8271f;}

@media (prefers-reduced-motion:reduce){.rc-need,.rc-zone-flash,.mb-pop,html.anim .rt-star img{animation:none;}}

/* ══ SPEC §59 (OMAN 2026-09-24) ════════════════════════════════════════════════════════════════════════════════════ */
/* Registering SOLD / HOMED / RETURNED — the dropdown's own tone (SALE_TONE via --rt-bg / --rt-co), flashing */
.reg-tag{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;border:1.5px solid var(--rt-co);background:var(--rt-bg);color:var(--rt-co);
  font-size:10px;font-weight:900;letter-spacing:.05em;text-transform:none;vertical-align:middle;line-height:1.5;animation:reg-flash 1.1s ease-in-out infinite;}
@keyframes reg-flash{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--rt-co);}50%{opacity:.35;box-shadow:0 0 0 3px transparent;}}
.rc-head .reg-tag{margin-left:10px;}
.pay-match.pay-short{color:#b45309;}
.sf-discard{margin-right:auto;font-size:12px;padding:7px 14px;}
/* JOURNEY — Awaiting Response (HOMED), the customer update (SOLD), a flagged day */
.rep-await-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.rep-await-row span{font-size:11px;opacity:.7;flex:1;min-width:180px;}
.rep-await{border:2px solid #c1272d;color:#c1272d;background:#fff;border-radius:999px;padding:6px 15px;font-size:12px;font-weight:900;cursor:pointer;letter-spacing:.03em;}
.rep-await.on{background:#c1272d;color:#fff;}
.rep-row-off{opacity:.4;}
.rep-flagged{display:flex;gap:9px;align-items:flex-start;border:2px solid #dc2626;background:#fef2f2;border-radius:12px;padding:9px 12px;margin:0 0 13px;font-size:12px;}
.rep-flagged .flag-ico{width:20px;height:20px;flex:none;}
.rep-flagged span{display:block;font-size:11px;opacity:.75;margin-top:3px;}
.rep-rec-cap{font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin:4px 0 6px;}
/* the day's results at the end of every JOURNEY row */
.pr-row:not([style]){display:flex;align-items:center;gap:10px;border:1px solid var(--text);border-radius:11px;padding:8px 11px;margin-bottom:7px;cursor:pointer;background:var(--bg,#fff);}
.pr-row.on:not([style]){border-width:2px;background:rgba(0,0,0,.05);}
.pr-dot{width:12px;height:12px;border-radius:50%;flex:none;}
.pr-day{font-size:12.5px;font-weight:700;white-space:nowrap;}
.pr-day small{font-size:10.5px;opacity:.65;}
.pr-results{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;margin-left:auto;}
.pr-res{font-size:10px;font-weight:900;letter-spacing:.03em;padding:2px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.2);white-space:nowrap;}
.pr-res.pr-await{background:#c1272d;color:#fff;border-color:#c1272d;}
.pr-res.pr-ph{background:#fff;}
.pr-res.pr-none{opacity:.55;font-weight:700;}
/* the red flag */
.flag-ico{width:16px;height:16px;display:inline-block;vertical-align:-3px;}
.jl-item[data-jl-item]{cursor:pointer;border-radius:8px;padding:3px 6px;margin:0 -6px;}
.jl-item[data-jl-item]:hover{background:rgba(0,0,0,.05);}
.jl-st-flagged{border:none;padding:0;}
.jl-st-flagged .flag-ico{width:18px;height:18px;}
.m-flag{display:inline-flex;align-items:center;gap:3px;border:2px solid #dc2626;background:#fff;border-radius:999px;padding:3px 9px;cursor:pointer;animation:ph-owe 1.4s ease-in-out infinite;}
.m-flag b{font-size:11px;color:#dc2626;}
.svc-flag{display:inline-flex;align-items:center;gap:3px;align-self:center;border:2px solid #dc2626;background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer;animation:ph-owe 1.4s ease-in-out infinite;}
.svc-flag .flag-ico{width:20px;height:20px;}
.dl-flag .flag-ico{width:14px;height:14px;vertical-align:-2px;}
.watchdog .dl-flagged,.dlp-task .dl-flagged,.watchdog .wd-flagged{color:#b91c1c;border:1.5px solid #dc2626;background:#fef2f2;display:inline-flex;align-items:center;gap:3px;}
.dl-flagged,.wd-flagged{font-size:10px;font-weight:900;letter-spacing:.04em;padding:2px 7px;border-radius:999px;white-space:nowrap;}
.dl-flagged .flag-ico,.wd-flagged .flag-ico{width:12px;height:12px;}
.watchdog .wd-flag{border-color:#dc2626;}
.dlp-head-flag{color:#b91c1c;display:flex;align-items:center;gap:6px;}
.dlp-pet.dlp-flag{border-color:#dc2626;background:#fef2f2;}
.nt-row.nt-flag{flex-direction:row;align-items:center;gap:10px;}
.nt-flag-d{font-size:12px;font-weight:800;white-space:nowrap;}
.nt-row.nt-flag b{flex:1;min-width:0;}
.nt-flag-ico .flag-ico{width:22px;height:22px;}
/* the JUJU LOG pop-out: over My Book (5000) AND the booking editors (5600), under the pet card it opens, the composer, JOURNEY (6000) */
.jl-pop{position:fixed;inset:0;z-index:5700;background:rgba(18,18,18,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.jl-pop[hidden]{display:none;}
.flag-pop{z-index:5900;align-items:center;}
#pet-modal.over-jl{z-index:5800;}
.jlp-card{background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:18px;box-shadow:rgba(0,0,0,.3) 8px 8px 0 0;width:100%;max-width:760px;}
.jlp-head{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:2px solid var(--text);}
.jlp-title{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.jlp-title b{font-size:15px;}
.jlp-title small{flex-basis:100%;font-size:11px;opacity:.65;}
.jlp-d{font-size:12px;font-weight:800;opacity:.75;}
.jlp-tools{display:flex;align-items:center;gap:8px;flex:none;}
.jlp-flagbtn{border:2px solid #dc2626;background:#fff;border-radius:10px;padding:5px 8px;cursor:pointer;line-height:0;}
.jlp-flagbtn .flag-ico{width:22px;height:22px;}
.jlp-flagbtn:hover{background:#fef2f2;}
.jlp-x{border:none;background:none;cursor:pointer;font-size:15px;opacity:.6;}
.jlp-body{padding:14px 16px 16px;}
.jlp-flagged{display:flex;gap:10px;align-items:flex-start;border:2px solid #dc2626;background:#fef2f2;border-radius:12px;padding:10px 12px;margin-bottom:13px;}
.jlp-flagged .flag-ico{width:22px;height:22px;flex:none;}
.jlp-flagged p{margin:3px 0;font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere;}
.jlp-flagged span{font-size:10.5px;opacity:.7;}
.jlp-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.jlp-tile{width:230px;flex:none;}
.jlp-tile .pet-card{cursor:pointer;margin:0;}
.jlp-photos{flex:1;min-width:200px;}
.jlp-cap{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin:0 0 7px;}
.jlp-body > .jlp-cap{margin-top:16px;}
.jlp-phs{display:flex;flex-wrap:wrap;gap:8px;}
.jlp-phs img{width:150px;height:150px;object-fit:cover;border-radius:12px;border:2px solid var(--text);cursor:zoom-in;}
.jlp-none,.jlp-gone{font-size:12px;opacity:.6;}
.jlp-stay{border:2px solid var(--text);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:12px;cursor:pointer;background:var(--bg,#fff);}
.jlp-journey{max-height:320px;overflow-y:auto;}
.jlp-acts{display:flex;justify-content:flex-end;margin-top:14px;}
.flg-card{background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:16px;box-shadow:rgba(0,0,0,.3) 8px 8px 0 0;width:100%;max-width:440px;padding:14px 16px;}
.flg-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.flg-head b{flex:1;font-size:15px;}
.flg-head .flag-ico{width:22px;height:22px;}
.flg-title{font-size:13px;font-weight:800;margin-bottom:10px;}
.flg-title small{display:block;font-size:11px;font-weight:600;opacity:.65;}
.flg-lbl{font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin:8px 0 6px;}
.flg-cats{display:flex;gap:7px;flex-wrap:wrap;}
.flg-cat{border:2px solid var(--text);background:#fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;cursor:pointer;}
.flg-cat.on{background:#dc2626;border-color:#dc2626;color:#fff;}
#flg-msg{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;padding:8px 10px;border:2px solid var(--text);border-radius:11px;resize:vertical;}
.flg-err{font-size:11.5px;color:#c1272d;min-height:15px;margin-top:4px;}
.flg-foot{display:flex;justify-content:flex-end;margin-top:6px;}
.flg-go{background:#dc2626;border-color:#991b1b;color:#fff;font-weight:900;display:inline-flex;align-items:center;gap:6px;padding:8px 18px;}
.flg-go .flag-ico path:last-child{fill:#fff;stroke:#fff;}
.flg-go .flag-ico path:first-child{stroke:#fff;}
@media (prefers-reduced-motion:reduce){.reg-tag,.m-flag,.svc-flag,#m-status-pill.reg-pill{animation:none;}}
/* SPEC §133: "Registering SOLD" where AVAILABLE stood — the card's pill and the tile's badge wear the sale form's own flashing tag;
   "Registering SOLD (name)" at the centre bottom of the photo (the PICKUP: pill's place) never runs past the photo */
#m-status-pill.reg-pill{border:1.5px solid var(--rt-co) !important;animation:reg-flash 1.1s ease-in-out infinite;}
.reg-tag.reg-chip{margin-left:0;white-space:nowrap;flex:none;}
.pc-appt.pc-reg{max-width:94%;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:640px){.jlp-tile{width:100%;}.jlp-phs img{width:110px;height:110px;}}

/* ══ SPEC §60 (OMAN 2026-09-24) ══════════════════════════════════════════════════════════════════════════════════════ */
/* Pet Home's ? — the left end of the SORTS row, slightly up (it sat at the very top right) */
.ph-help-q{left:5px;right:auto;top:1px;transform:none;}
.ph-help-q:hover{transform:scale(1.12);}
/* PICKUP: / RETURN: at the centre bottom of the photo — Pending Update's pill, the dropdown's colours, still */
.pc-appt{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:6;background:var(--pa-bg);color:var(--pa-co);
  border:1.5px solid var(--pa-co);border-radius:999px;padding:1.5px 7px;font-size:7.5px;font-weight:900;letter-spacing:.03em;
  white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none;}
#m-imgwrap .pc-appt{font-size:11px;padding:3px 11px;bottom:10px;}
/* HOMED: GOLDEN WEEK · HISTORIES, under Reset at the right end — SPEC §61: below the head's rule, the head's own 24px inset */
.ph-hv{display:flex;justify-content:flex-start;gap:8px;margin-top:0;padding:10px 24px 0;}   /* SPEC §68: left, and close to the first name */
.ph-hv[hidden]{display:none;}
.ph-hv-b{padding:5px 14px;font-size:11.5px;}
#ph-hv-golden{background:#fef3c7;color:#92400e;}
#ph-hv-golden.on{border-color:#92400e;box-shadow:0 0 0 3px rgba(146,64,14,.4);}
#ph-hv-history{background:#e2e8f0;color:#334155;}
#ph-hv-history.on{border-color:#334155;box-shadow:0 0 0 3px rgba(51,65,85,.4);}
/* a HOMED card: the sale, read-only */
.sr-box{border:2px solid var(--text);border-radius:12px;padding:6px 12px;background:rgba(0,0,0,.02);font-size:12.5px;}
.sr-row{display:flex;gap:10px;padding:3px 0;}
.sr-row span{flex:0 0 150px;opacity:.7;}
.sr-row b{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:700;}
.sr-own{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;}
.sr-pow{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;}
.sr-pow img{width:118px;height:118px;object-fit:cover;border:2px solid var(--text);border-radius:12px;cursor:zoom-in;}
.sr-pow span{width:118px;height:118px;border:2px dashed rgba(0,0,0,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;opacity:.6;}
@media (max-width:640px){.sr-own{grid-template-columns:1fr;}}
/* the RETURNED form: Return Date, and PARVO with its photo on the row under the Pawmily Photo */
.rt-row{margin-top:6px;}
.own-half .rt-note{font-size:10.5px;opacity:.7;font-weight:600;}
#sf-rparvo{max-width:280px;}
/* Appt.: a pet's pick-up / return, derived from the pet */
.appt-pet .appt-kind{display:inline-block;padding:1px 9px;border-radius:999px;border:1.5px solid currentColor;font-size:11px;}
.appt-pickup .appt-kind{color:#991b1b;background:#fee2e2;}
.appt-return .appt-kind{color:#1e40af;background:#dbeafe;}
/* ONE booking, several pets */
.xp-head{display:flex;align-items:center;gap:12px;margin:6px 0 8px;}
.xp-title{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
.xp-add{padding:4px 12px;font-size:11.5px;font-weight:800;}
.xp-lbl{font-size:13px;font-weight:900;letter-spacing:.04em;}
.xp-first{margin:0 0 4px;}
.xp-first[hidden]{display:none;}
.xp-rainbow{background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#3b82f6,#6366f1,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;}
.xp-line{border:none;border-top:3px solid #f489a3;margin:14px 0 8px;}
.xp-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.xp-x{width:24px;height:24px;border-radius:50%;border:2px solid #121212;background:#fff;color:#dc2626;font-size:11px;font-weight:900;cursor:pointer;padding:0;line-height:1;}
.xp-x:hover{background:#fee2e2;}
.bk-ph-multi{display:flex;gap:14px;flex-wrap:wrap;}

/* ══ SPEC §61 (OMAN 2026-09-25) — the name boxes are dropdowns · ➕ Add Boarding · Extended · account tabs · E.A. / S.A. ══ */
/* the boxes beside Returning Customer: tap the name to choose anyone in the system */
.svc-picbox{position:relative;cursor:default;}
.svc-picbox.can{cursor:default;}
.svc-picbox.open{z-index:60;border-style:solid;border-color:var(--text);}
.svc-picbox.out.can{border-color:#2a6fdb;}
.svc-picname{display:inline-flex;align-items:center;gap:5px;max-width:190px;margin:0;padding:1px 0;border:0;background:none;font:inherit;font-size:12.5px;
  font-weight:800;text-align:left;cursor:pointer;color:inherit;}
.svc-picname i{font-style:normal;opacity:.55;font-weight:700;}
.svc-picname:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:6px;}
.svc-caret{font-size:10px;opacity:.6;}
button.svc-picgo{margin:1px 0 0;padding:1px 8px;border:1.5px solid #b45309;border-radius:999px;background:#fff7ed;font:inherit;font-size:10px;font-weight:800;
  color:#b45309;cursor:pointer;animation:ph-owe 1.4s ease-in-out infinite;}
.svc-picbox.out button.svc-picgo{border-color:#2a6fdb;background:#eef4ff;color:#1c4f9c;}
.svc-picpanel{position:absolute;left:-2px;top:calc(100% + 4px);z-index:61;min-width:220px;max-width:min(320px,86vw);max-height:300px;overflow:auto;
  background:#fff;border:2px solid var(--text);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px;}
.svc-pichead{font-size:9.5px;font-weight:900;letter-spacing:.08em;opacity:.6;padding:6px 6px 2px;}
.svc-picopt{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border:0;border-radius:9px;background:none;font:inherit;font-size:12.5px;
  font-weight:700;text-align:left;cursor:pointer;color:inherit;}
.svc-picopt:hover,.svc-picopt:focus-visible{background:#f1f5f9;outline:none;}
.svc-picopt.on{background:#fef3c7;}
.svc-picopt small{font-size:10px;font-weight:600;opacity:.6;margin-left:auto;white-space:nowrap;}
.svc-picclear{opacity:.7;font-style:italic;}
.svc-sa{font-size:8.5px;font-weight:900;letter-spacing:.04em;padding:0 5px;border-radius:999px;background:#fef3c7;color:#92400e;border:1px solid #92400e;}
@media (prefers-reduced-motion:reduce){button.svc-picgo{animation:none;}}

/* ➕ Add Grooming / ➕ Add Boarding carry the Service Link logo at their front */
.svc-addlink{display:inline-flex;align-items:center;gap:6px;}
.svc-addlogo{width:22px;height:22px;object-fit:contain;flex:none;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.15));}
/* SPEC §121: Extended's ask, at the Check-out date itself */
.bd-need{margin-top:4px;font-size:11.5px;font-weight:800;color:#b91c1c;line-height:1.3;}
#bd-out.bd-need-on{outline:2.5px solid #dc2626;outline-offset:2px;animation:bdNeed 1s ease-in-out infinite;}
@keyframes bdNeed{0%,100%{outline-color:#dc2626;}50%{outline-color:transparent;}}
@media (prefers-reduced-motion:reduce){#bd-out.bd-need-on{animation:none;}}
.bd-ext-hint{background:#fff7ed;border:1.5px solid #e2820c;color:#8a5208;border-radius:9px;padding:9px 12px;font-size:13px;font-weight:600;}

/* Admin → Employee Accounts | System Accounts */
.acc-tabs{display:inline-flex;gap:3px;background:#f1f5f9;border:2px solid var(--text);border-radius:14px;padding:3px;}
.acc-tab{padding:6px 14px;border:0;border-radius:10px;background:none;font:inherit;font-size:15px;font-weight:800;color:#3a352c;cursor:pointer;}
.acc-tab.on{background:var(--card-bg);color:var(--text);box-shadow:var(--shadow-sm);}
.acc-tab:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.acc-pane[hidden]{display:none;}
/* SPEC §99: E.A. / S.A. beside the position on the account's box in the tree (Organization Member's rows are gone) */
.org-kind{display:inline-block;font-size:8px;font-weight:900;line-height:1.35;letter-spacing:.03em;padding:0 4px;border-radius:999px;
  border:1.5px solid var(--text);white-space:nowrap;vertical-align:1px;}
.org-kind-ea{background:#dbeafe;color:#1e3a8a;}
.org-kind-sa{background:#fef3c7;color:#92400e;}
.acc-sa-err{margin-top:10px;font-size:11.5px;color:#a8271f;font-weight:700;}

/* ══ SPEC §62 (OMAN 2026-09-25) — Arrived wears Checked-In's green · still frames on the schedules · Delayed asks for a time ══ */
.btn-arrivedappt{background:#1f8f5f;color:#fff;border:2px solid var(--text);box-shadow:var(--shadow-sm);}
.btn-arrivedappt:hover{background:#197a50;}
#add-session .ff-modal-card.gstat-arrived{border-color:#1f8f5f !important;}
.ga-status-arrived{color:#15643f;border-color:#1f8f5f;background:#ecf7f1;}
/* the frame says where the pet is: green — arrived / checked in · red — canceled · blue — delayed or T.B.C. (no animation;
   the red breathing glow is only ever the answer still owed) */
.groom-appt.is-arrived{border:2px solid #1f8f5f;background:#ecf7f1;box-shadow:0 0 0 2px #1f8f5f;}
.groom-appt.is-canceled{box-shadow:0 0 0 2px #dc2626;}
.groom-appt.is-delayed,.groom-appt.is-tbc{border:2px solid #2563eb;background:#f2f6ff;box-shadow:0 0 0 2px #2563eb;}
.board-bar.fr-green{border-color:#1f8f5f;box-shadow:0 0 0 3px #1f8f5f;}
.board-bar.fr-red{border-color:#dc2626;box-shadow:0 0 0 3px #dc2626;}
.board-bar.fr-blue{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb;}
.svc-hint{background:#eef4ff;border:1.5px solid #2563eb;color:#1d4ed8;border-radius:9px;padding:9px 12px;font-size:13px;font-weight:600;}
.svc-hint .svc-clock{margin-right:3px;}
select.svc-need-time{outline:3px solid #2563eb;outline-offset:2px;}
.gcal-appt.is-arrived{background:#ecf7f1;border-color:#1f8f5f;color:#15643f;}

/* ══ SPEC §63 (OMAN 2026-09-26) — Customer Relationship Management: the waitlist, its pills, its red frames ══ */
.crm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:64px !important;}
.crm-ly-btn{white-space:nowrap;}
.crm-new{border:2px solid var(--text);border-radius:16px;padding:14px 16px;background:var(--card-bg);margin-bottom:18px;}
.crm-new-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;}
@media (max-width:760px){.crm-new-grid{grid-template-columns:1fr;}}
.crm-breed-fg,.crm-src-fg{position:relative;}
.crm-pills{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:38px;padding:4px 8px;border:2px solid var(--text);border-radius:10px;background:#fff;cursor:text;}
.crm-pills input{flex:1;min-width:110px;border:0 !important;outline:0;padding:4px 2px !important;background:transparent;box-shadow:none !important;}
.crm-pill-list{display:contents;}
.crm-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1.5px solid var(--text);border-radius:999px;background:#fdecf1;font-size:11.5px;font-weight:700;white-space:nowrap;}
.crm-pill button{border:0;background:none;cursor:pointer;font-size:10px;padding:0 0 0 2px;line-height:1;}
.crm-pill-s{background:#eef4ff;}
.crm-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:260px;overflow:auto;background:#fff;border:2px solid var(--text);border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px;}
.crm-suggest[hidden]{display:none;}
.crm-sug{border:0;background:none;text-align:left;padding:6px 8px;border-radius:8px;font:inherit;font-size:12.5px;cursor:pointer;}
.crm-sug:hover,.crm-sug:focus-visible{background:#f1f5f9;outline:none;}
.crm-sug-new{font-weight:800;color:#b8456a;}
.crm-sug-none{font-size:11.5px;opacity:.6;padding:6px 8px;}
.crm-src-btn{display:flex;flex-wrap:wrap;gap:4px;align-items:center;width:100%;min-height:38px;padding:4px 8px;border:2px solid var(--text);border-radius:10px;background:#fff;
  font:inherit;font-size:13px;text-align:left;cursor:pointer;}
.crm-src-opt{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;font-size:12.5px;cursor:pointer;}
.crm-src-opt:hover{background:#f1f5f9;}
.crm-ok{background:#effaf3;border:1.5px solid #1f8f5f;color:#15643f;border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;}
.crm-bad{background:#fff0f0;border:1.5px solid #dc2626;color:#b91c1c;border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;}
.crm-wl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:2px solid var(--text);margin-bottom:10px;padding-bottom:5px;}
.crm-wl-head h3{margin:0;font-size:16px;}
.crm-wl-head span{font-size:11.5px;opacity:.65;}
.crm-row{display:grid;grid-template-columns:minmax(90px,auto) minmax(130px,1.2fr) minmax(120px,1.4fr) minmax(90px,1fr) auto auto;gap:10px;align-items:center;
  padding:9px 12px;border:2px solid var(--text);border-radius:12px;background:var(--card-bg);margin-bottom:8px;cursor:pointer;}
.crm-row:hover{transform:translateY(-1px);}
@media (max-width:760px){.crm-row{grid-template-columns:1fr 1fr;}}
.crm-main{display:flex;flex-direction:column;min-width:0;}
.crm-main b{font-size:13px;}
.crm-main small{font-size:11px;opacity:.7;}
.crm-breeds{display:flex;flex-wrap:wrap;gap:4px;}
.crm-meta{font-size:11px;opacity:.7;}
.crm-date{font-size:11px;opacity:.6;white-space:nowrap;}
/* a customer still to be told flashes a red outer frame until Confirm */
.crm-row.crm-owe{border-color:#c1272d;animation:crm-owe 1.3s ease-in-out infinite;}
@keyframes crm-owe{0%,100%{box-shadow:0 0 0 2px rgba(193,39,45,.5);}50%{box-shadow:0 0 14px 5px rgba(193,39,45,.6),0 0 0 3px #c1272d;}}
@media (prefers-reduced-motion:reduce){.crm-row.crm-owe{animation:none;box-shadow:0 0 0 3px #c1272d;}}
.crm-owe-tag{font-size:10px;font-weight:900;color:#fff;background:#c1272d;border-radius:999px;padding:2px 8px;white-space:nowrap;}
.crm-kvs{display:grid;gap:4px;}
.crm-kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.14);font-size:12.5px;}
.crm-kv span{opacity:.7;}
.crm-kv b{text-align:right;overflow-wrap:anywhere;}
.crm-sub{font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;margin:16px 0 8px;}
.crm-pets{display:flex;flex-wrap:wrap;gap:10px;}
.crm-pet{display:flex;gap:9px;align-items:center;border:2px solid var(--text);border-radius:12px;padding:7px 10px;background:#fff;}
.crm-pet img,.crm-pet-ph{width:52px;height:52px;border-radius:9px;object-fit:cover;display:flex;align-items:center;justify-content:center;background:#f1f5f9;}
.crm-pet b{display:block;font-size:12.5px;}
.crm-pet small{display:block;font-size:10.5px;opacity:.7;}
.crm-kind{display:inline-block;margin-top:3px;font-size:9px;font-weight:900;letter-spacing:.05em;border-radius:999px;padding:1px 7px;border:1.5px solid;}
.crm-kind-new{color:#15643f;background:#ecf7f1;}
.crm-kind-aged{color:#8a5208;background:#fdf2e2;}
.crm-reply{display:flex;align-items:center;justify-content:center;min-height:120px;border:2px dashed var(--text);border-radius:14px;background:#fff;cursor:pointer;
  font-size:12.5px;font-weight:700;overflow:hidden;}
.crm-reply.has{border-style:solid;}
.crm-reply img{max-width:100%;max-height:260px;object-fit:contain;}
.crm-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.crm-sent{display:flex;flex-direction:column;gap:6px;}
.crm-sent-row{display:grid;grid-template-columns:1fr auto 44px;gap:10px;align-items:center;font-size:12px;border:1px solid rgba(0,0,0,.15);border-radius:10px;padding:6px 10px;}
.crm-sent-ph img{width:40px;height:40px;object-fit:cover;border-radius:7px;cursor:zoom-in;}

/* ══ SPEC §86 (OMAN 2026-09-30) — C.A.R.M.: Customer Acquisition, its list, the customer card, the link, the scanner ══ */
.carm-subhead{flex-wrap:wrap;}
.carm-subhead-btns{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.carm-body{padding:4px 22px 22px;}
/* SPEC §93: six tracks — Customer name 1 · Customer Chat Url 2 · Contact No. 1 · Where did you see us 2; Pet 3 · Product 1 · Service 1 · Other 1 */
.carm-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 14px;}
.carm-span2{grid-column:span 2;}
.carm-span3{grid-column:span 3;}
@media (max-width:760px){.carm-grid{grid-template-columns:1fr;}.carm-span2,.carm-span3{grid-column:auto;}.carm-body{padding:4px 12px 16px;}}
.carm-enq-l{margin:14px 0 6px;font-size:12px;font-weight:700;color:#3a352c;}
.crm-src-opt input{width:auto;flex:none;margin:0;}
.carm-enq-l small{font-weight:600;opacity:.65;text-transform:none;letter-spacing:0;}
.crm-pick-fg{position:relative;}
.carm-phone{display:flex;gap:4px 8px;align-items:center;flex-wrap:wrap;}
.carm-phone-box{position:relative;flex:1 1 100%;min-width:0;}   /* SPEC §93: the number keeps its whole half-width box — WhatsApp ↗ goes under it */
.carm-phone-box input{width:100%;padding-right:44px;}
.carm-scan-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:19px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:8px;}
.carm-scan-btn:hover,.carm-scan-btn:focus-visible{background:#f1f5f9;outline:none;}
.carm-wa{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:#128c4a;white-space:nowrap;text-decoration:none;
  border:1.5px solid #128c4a;border-radius:999px;padding:3px 10px;background:#effaf3;}
.carm-wa[hidden]{display:none;}
.crm-pill-products{background:#fff4dc;}
.crm-pill-services{background:#e8f7ef;}
.carm-list-head{align-items:center;flex-wrap:wrap;}
.carm-list-head input{flex:1 1 220px;max-width:340px;min-width:0;font-size:12.5px;padding:6px 10px;}
.carm-owed{border:1.5px solid #c1272d;color:#c1272d;background:#fff;border-radius:999px;font:inherit;font-size:11px;font-weight:900;padding:3px 10px;cursor:pointer;}
.carm-owed.on{background:#c1272d;color:#fff;}
.carm-owed[hidden]{display:none;}
/* "recently registered on top to 10 records below then employee will have to scroll downwards to see more" */
.carm-list{max-height:610px;overflow-y:auto;padding:3px 4px 3px 3px;}
.carm-noname{font-weight:600;opacity:.55;}
.carm-appt-ico{font-size:13px;}
.carm-cust-top{display:flex;gap:14px;align-items:flex-start;}
.carm-cust-top .crm-kvs{flex:1;min-width:0;}
.carm-appt-big{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--text);border-radius:16px;background:#fff7e0;
  padding:10px 12px;cursor:pointer;font:inherit;min-width:104px;box-shadow:rgba(0,0,0,.15) 3px 3px 0 0;}
.carm-appt-big:hover{transform:translateY(-1px);}
.carm-appt-big-i{font-size:40px;line-height:1;}
.carm-appt-big small{font-size:10.5px;text-align:center;line-height:1.3;}
@media (max-width:560px){.carm-cust-top{flex-direction:column;}}
.carm-cust-foot{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap;}
.carm-cust-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.carm-intro{border:2px solid var(--text);}
.carm-intro-new{background:#ecf7f1;color:#15643f;}
.carm-intro-aged{background:#fdf2e2;color:#8a5208;}
.carm-intro.on{box-shadow:0 0 0 3px var(--text);}
.carm-link-url{font-family:ui-monospace,Consolas,monospace;word-break:break-all;border:2px dashed var(--text);border-radius:12px;padding:12px 14px;background:#fff;
  font-size:13px;-webkit-user-select:all;user-select:all;}
.carm-link-row{display:flex;align-items:center;gap:10px;margin:12px 0 6px;}
.carm-link-left{margin-right:auto;font-size:12.5px;}
.carm-link-note{display:block;opacity:.7;line-height:1.45;}
.carm-link-gone{font-weight:800;margin:0 0 6px;}
.carm-appt-card{border:2px solid var(--text);border-radius:14px;padding:12px 14px;margin-bottom:12px;background:#fff;}
.carm-appt-h{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px;}
.carm-cam{position:relative;width:100%;aspect-ratio:4/3;background:#111;border-radius:14px;overflow:hidden;}
.carm-cam video{display:block;width:100%;height:100%;object-fit:cover;}
/* the scanning zone: what is inside the green box is read; the rest is dimmed */
.carm-zone{position:absolute;left:8%;top:37%;width:84%;height:26%;border:3px solid #22c55e;border-radius:10px;box-shadow:0 0 0 999px rgba(0,0,0,.45);pointer-events:none;}
.carm-zone::after{content:'';position:absolute;left:4%;right:4%;top:50%;height:2px;background:#ef4444;animation:carm-scanline 1.6s ease-in-out infinite;}
@keyframes carm-scanline{0%,100%{transform:translateY(-14px);}50%{transform:translateY(14px);}}
@media (prefers-reduced-motion:reduce){.carm-zone::after{animation:none;}}
.carm-scan-msg{font-size:12.5px;font-weight:700;margin:10px 0 0;min-height:18px;}
.jl-score{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:900;border:1.5px solid #1f8f5f;color:#15643f;border-radius:999px;padding:0 7px;}
.jl-score.jl-bad{border-color:#c1272d;color:#c1272d;}

/* ══ SPEC §64 — Role permissions in four columns: Edit · Oversees · Approval · Privilege, each cut by the top bar's titles ══ */
.perm-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;}
@media (max-width:980px){.perm-cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.perm-cols{grid-template-columns:1fr;}}
.perm-col{border:2px solid var(--text);border-radius:14px;padding:8px 8px 6px;background:#fff;min-width:0;}
.perm-col-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 4px 8px;border-bottom:2px solid var(--text);margin-bottom:4px;}
.perm-col-h b{font-size:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;}
.perm-col-h span{font-size:11px;font-weight:800;opacity:.65;white-space:nowrap;}
.perm-col[data-perm-col="edit"] .perm-col-h b{color:#1d4ed8;}
.perm-col[data-perm-col="oversee"] .perm-col-h b{color:#7c3aed;}
.perm-col[data-perm-col="approve"] .perm-col-h b{color:#15803d;}
.perm-col[data-perm-col="privilege"] .perm-col-h b{color:#b45309;}
.perm-sec{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin:10px 4px 2px;}
.perm-row{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;column-gap:4px;row-gap:2px;padding:7px 5px;
  border-bottom:1px solid rgba(0,0,0,.08);cursor:pointer;border-radius:6px;}
.perm-row.is-changed{background:rgba(245,195,59,.20);}
.perm-row input{grid-column:1;grid-row:1;margin:2px 0 0;}
.perm-t{grid-column:2;grid-row:1;font-size:12.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;}
.perm-d{grid-column:2;grid-row:2;font-size:10.8px;opacity:.68;line-height:1.4;overflow-wrap:anywhere;}
.perm-none{font-size:11.5px;opacity:.55;margin:10px 4px;}

/* ══ SPEC §64 — the Admin Settings tab bar (sticky under the title) and the part titles it leads to ══ */
.adm-tabs{position:sticky;top:0;z-index:20;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  margin:-8px -6px 20px;padding:8px 6px;background:var(--card-bg);border-bottom:2px solid var(--text);}
.adm-tabs button{flex:0 0 auto;font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;cursor:pointer;
  border:2px solid var(--text);border-radius:999px;background:#fff;color:var(--text);padding:6px 13px;}
.adm-tabs button:hover{background:#fff7e0;}
.adm-tabs button.on{background:var(--text);color:var(--card-bg);}
.adm-tabs button[hidden]{display:none;}
.adm-title{margin:26px 0 12px;font-size:20px;font-weight:900;letter-spacing:.03em;display:flex;align-items:center;gap:12px;}
.adm-title::after{content:"";flex:1;height:2px;background:var(--text);opacity:.25;}
.adm-title[hidden]{display:none;}
#sec-admin #admin-aboutme,#sec-admin .adm-title,#sec-admin #sec-lvcfg,#sec-admin #sec-responsibility,#sec-admin #sec-commission,
#sec-admin #sec-perms{scroll-margin-top:72px;}

/* ══ SPEC §64 — CRM: C.W.L. / C.A.T. tabs · the C.A.T. form, section by section · DAILIES proofs ══ */
.crm-tabs{display:flex;gap:8px;margin:0 0 16px;border-bottom:2px solid var(--text);}
.crm-tab{font:inherit;font-size:13.5px;font-weight:900;letter-spacing:.06em;cursor:pointer;border:2px solid var(--text);border-bottom:none;
  border-radius:12px 12px 0 0;background:#fff;color:var(--text);padding:8px 20px;margin-bottom:-2px;opacity:.65;}
.crm-tab.on{background:var(--card-bg);opacity:1;box-shadow:inset 0 -3px 0 var(--card-bg);}
.cat-card{border:2px solid var(--text);border-radius:16px;background:#fff;padding:16px 18px;margin-bottom:18px;}
.cat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.cat-kicker{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.6;}
.cat-trail{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11.5px;margin-top:3px;}
.cat-trail span{opacity:.6;}
.cat-trail span.on{opacity:1;font-weight:800;}
.cat-trail i{font-style:normal;opacity:.4;}
.cat-count{font-size:12px;font-weight:800;border:2px solid #c1272d;color:#c1272d;border-radius:999px;padding:3px 12px;white-space:nowrap;}
.cat-count.ok{border-color:#1f8f5f;color:#15643f;}
.cat-title{margin:12px 0 4px;font-size:18px;font-weight:900;}
.cat-desc{margin:0 0 10px;font-size:12px;opacity:.75;line-height:1.5;background:#fffbea;border-left:4px solid #f5c33b;padding:8px 10px;border-radius:6px;}
.cat-q{margin:14px 0 4px;}
.cat-ql{font-size:12.5px;font-weight:800;margin-bottom:7px;}
.cat-opts{display:flex;flex-wrap:wrap;gap:7px;}
.cat-opts.cat-many{max-height:260px;overflow-y:auto;padding:2px;border:1px dashed rgba(0,0,0,.18);border-radius:10px;padding:8px;}
.cat-opt{font:inherit;font-size:12px;font-weight:700;cursor:pointer;border:2px solid var(--text);border-radius:999px;background:#fff;color:var(--text);
  padding:5px 12px;text-align:left;max-width:100%;overflow-wrap:anywhere;}
.cat-opt small{font-weight:600;opacity:.65;}
.cat-opt:hover{background:#fff7e0;}
.cat-opt.on{background:var(--text);color:var(--card-bg);}
.cat-filter,.cat-other,.prf-in{width:100%;box-sizing:border-box;margin:0 0 8px;padding:7px 10px;border:2px solid var(--text);border-radius:10px;font:inherit;font-size:12.5px;background:#fff;}
.cat-other{margin-top:8px;}
.cat-clear{font:inherit;font-size:11px;border:none;background:none;text-decoration:underline;cursor:pointer;opacity:.7;}
.cat-none{font-size:11.5px;opacity:.6;}
.cat-msg{min-height:18px;font-size:12px;font-weight:700;color:#a8271f;margin-top:10px;}
.cat-nav{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px;}
.cat-list-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;}
.cat-list-head h3{margin:0;font-size:15px;}
.cat-list-head input{padding:4px 8px;border:2px solid var(--text);border-radius:9px;font:inherit;font-size:12px;}
.cat-list-head span{font-size:11.5px;opacity:.7;margin-left:auto;}
.cat-rows{display:flex;flex-direction:column;gap:6px;}
.cat-row{display:grid;grid-template-columns:48px minmax(90px,150px) 1fr;gap:10px;align-items:center;border:1.5px solid rgba(0,0,0,.18);border-radius:10px;
  padding:7px 10px;font-size:12px;background:#fff;}
.cat-t{font-weight:900;font-variant-numeric:tabular-nums;}
.cat-b{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0;}
.cat-b span{overflow-wrap:anywhere;}
.cat-b span+span::before{content:"· ";opacity:.4;}
@media (max-width:560px){.cat-row{grid-template-columns:44px 1fr;}.cat-b{grid-column:1/-1;}}
.prf-l{font-size:12px;font-weight:800;margin:12px 0 6px;}
.prf-pick{display:flex;flex-wrap:wrap;gap:7px;}
.prf-items{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto;border:1px dashed rgba(0,0,0,.18);border-radius:10px;padding:8px;}
.prf-items label{font-size:12px;display:flex;justify-content:flex-start;gap:8px;align-items:center;text-align:left;cursor:pointer;}
.prf-items input[type=checkbox]{width:auto;flex:0 0 auto;margin:0;}
.prf-items b{font-weight:800;}
.prf-items small{opacity:.65;}
.prf-file{min-height:84px;}
.prf-done{display:flex;flex-direction:column;gap:4px;font-size:12px;}
.dlp-pet.dlp-done{opacity:.7;}
.cat-msg.ok{color:#15643f;}

/* ══ SPEC §65 — CHECKED-IN · P.I.C. CHECK-IN · JOURNEY Update / Check · Growth · My Request ═══════════════════════ */
.bl-checkedin{display:inline-block;margin-top:3px;width:fit-content;font-size:9px;font-weight:900;letter-spacing:.06em;color:#fff;background:#15643f;border-radius:999px;padding:1px 8px;white-space:nowrap;}   /* SPEC §166: never split at its hyphen */
.jl-why-rule{display:block;opacity:.65;font-size:11px;margin-top:2px;}
.board-bar .bar-checkedin{display:inline-block;width:fit-content;font-size:9px;font-weight:900;letter-spacing:.06em;color:#fff;background:#15643f;border-radius:999px;padding:1px 7px;}
.pic-row .pic-box{height:24px;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;min-width:104px;max-width:190px;padding:0 10px;
  font:inherit;font-size:10px;font-weight:700;border:1.5px solid var(--text);border-radius:999px;background:var(--card-bg,#fff);color:inherit;cursor:pointer;}
.pic-row .pic-box:hover{box-shadow:2px 2px 0 var(--text);}
.pic-row .pic-box.pic-ok{border-color:#15643f;background:#e9f7ef;}
.pic-tick{color:#15643f;font-weight:900;}
.pic-for{font-size:8.5px;font-weight:700;opacity:.65;white-space:nowrap;}
.pj-tabs{display:inline-flex;gap:6px;margin-left:10px;vertical-align:middle;}
.pj-tab{border:2px solid var(--text);background:var(--card-bg,#fff);color:var(--text);border-radius:999px;padding:3px 13px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;}
.pj-tab.on{background:var(--text);color:var(--card-bg,#fff);}
.pr-by{font-size:10.5px;font-weight:700;opacity:.7;}
.pr-chk{color:#15643f;font-weight:900;}
.ps-msg{font-size:13px;line-height:1.55;margin:0 0 12px;}
.ps-acts{display:flex;justify-content:flex-end;gap:8px;}
.ps-edit{border:1.5px solid var(--text);background:transparent;border-radius:999px;padding:2px 10px;font:inherit;font-size:10.5px;font-weight:800;cursor:pointer;}
.ps-ok{border:none;cursor:pointer;font:inherit;}
.ps-ok:hover{box-shadow:0 0 0 2px var(--text);}
.ps-tick{font-weight:900;}
.ps-editrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.ps-editrow[hidden]{display:none;}
.ps-val{border:2px solid var(--text);background:transparent;border-radius:999px;padding:5px 12px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;opacity:.6;}
.ps-val.on{background:var(--ps-bg);color:var(--ps-c);opacity:1;}
.ps-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;}
.ps-foot[hidden]{display:none;}
.ps-chk-msg{font-size:11px;color:#a8271f;}
.ps-hint{font-size:11px;opacity:.65;margin:10px 0 0;}
.ps-chk-by{font-size:11px;margin-top:10px;color:#15643f;}
.jl-growth-title{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:900;letter-spacing:.02em;margin:4px 0 10px;color:#1f7a3d;}
.jl-growth-title .jl-leaf{width:22px;height:22px;}
.jl-nudges{display:flex;gap:8px;margin:6px 0 2px;}
.jl-nudge{font-size:10.5px;font-weight:800;letter-spacing:.03em;border:1.5px solid var(--text);border-radius:999px;padding:1px 9px;background:var(--card-bg,#fff);}
.jl-adj{width:auto;max-width:132px;height:22px;padding:0 6px;font-size:10px;border:1.5px solid var(--text);border-radius:8px;background:#fff;flex:none;}
.jl-adj-note{font-size:9.5px;font-weight:800;color:#7c3aed;}
.jl-st-excused{color:#6b7280;}
.ap-sec{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin:6px 0 4px;padding:4px 10px;border-radius:8px;background:#121212;color:#fff;width:fit-content;}
.ap-cat + .ap-sec,.ap-row + .ap-sec,.pb-empty + .ap-sec{margin-top:20px;}
.ap-state{font-size:10px;font-weight:900;letter-spacing:.06em;border:1.5px solid currentColor;border-radius:999px;padding:2px 10px;white-space:nowrap;}
.ap-state-pending{color:#8a5208;background:#fff3e0;}
.ap-state-approved{color:#15643f;background:#e9f7ef;}
.ap-state-rejected{color:#fff;background:#c1272d;border-color:#8f1b20;}

/* ══ SPEC §66 — ✎ Edit on a saved session / stay · Pet Status Check (Boarding) · Leave in Approval ══════════════════ */
.bk-toprow .svc-pen{margin-left:auto;flex:0 0 auto;}
.svc-locked .bk-return,.svc-locked .xp-add,.svc-locked .xp-list,.svc-locked .bdp,.svc-locked .ms-box,
.svc-locked .dur-split{pointer-events:none;}
/* SPEC §156 (OMAN 2026-10-16): "Arrived … required Pet Photo, but clicking at Pet Photo box … not responding" — an EMPTY photo box
   stays live with the pen off: Arrived / Checked-In ask for it. A photo already there stays locked (its ✕ hidden, below). */
.svc-locked .bk-grid,.svc-locked .xp-list,.svc-locked .xp-add,.svc-locked .bk-return{opacity:.72;}
.svc-locked .bk-x{display:none;}
.svc-locked .svc-picname{cursor:default;}
.svc-picbox .svc-psok{background:#15643f;color:#fff;border-color:#15643f;}
.svc-picbox .bps-go{font-size:9px;}
.svc-picbox .pic-for{display:block;}
.bps-row{margin-bottom:12px;}
.bps-lbl{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;}
.ap-title.ap-title-plain{display:block;text-decoration:none;cursor:default;}
.bk-toprow .rc-need-pop:not([hidden]) ~ .svc-pen{margin-left:8px;}

/* ══ SPEC §67 — NOTIFICS by date · the receipt case and its ⓘ · the Pet Code on the card ═════════════════════════ */
.nt-day{font-size:11px;font-weight:900;letter-spacing:.08em;margin:14px 0 6px;padding:2px 10px;border-radius:999px;background:#121212;color:#fff;width:fit-content;}
.nt-day:first-of-type{margin-top:4px;}
.nt-case{position:relative;}
.nt-case .nt-row{padding-right:46px;}
.nt-subj{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.02em;opacity:.8;}
.nt-info{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;border:none;background:transparent;cursor:pointer;}
.nt-info img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(1.5px 0 0 #dc2626) drop-shadow(-1.5px 0 0 #dc2626) drop-shadow(0 1.5px 0 #dc2626) drop-shadow(0 -1.5px 0 #dc2626);}
.nt-info:hover img{transform:scale(1.08);}
.nt-info-subj{font-size:11.5px;font-weight:800;margin-bottom:8px;opacity:.8;}
.nt-info-msg{font-size:13px;line-height:1.55;margin:0 0 8px;overflow-wrap:anywhere;}
.nt-info-when{font-size:11px;opacity:.6;margin-bottom:12px;}
.m-petcode{font-size:12px;padding:4px 7px;}
.m-petcode[hidden]{display:none;}

/* ══ SPEC §68 — Recent sales · CYCLE counts · the HOMED row · IN / OUT on the bar · the SRR search ══════════════════ */
.dash-sale{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 4px;border:none;border-bottom:1px solid #f1f5f9;
  background:transparent;font:inherit;font-size:12px;cursor:pointer;color:inherit;}
.dash-sale:hover{background:rgba(0,0,0,.035);}
.dash-sale .ds-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dash-sale .ds-main small{font-size:11px;opacity:.75;}
.dash-sale .ds-cat{font-weight:800;}
.dash-sale .ds-amt{font-weight:800;white-space:nowrap;}
.ph-f .ph-n{display:inline-block;min-width:18px;margin-left:4px;padding:0 6px;border-radius:999px;background:rgba(0,0,0,.14);font-size:10.5px;line-height:17px;text-align:center;}
.ph-f.on .ph-n{background:rgba(255,255,255,.35);}
#ph-hv:not([hidden]) + #inv-grid{padding-top:6px;}
#ph-hv:not([hidden]) + #inv-grid > .ph-group:first-child{margin-top:0;padding-top:4px;}
.board-bar .bar-io{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  font-size:8.5px;font-weight:900;letter-spacing:.02em;color:#fff;flex:0 0 auto;}
.board-bar .bar-in{background:#15803d;box-shadow:0 0 0 2px #fff;}
.board-bar .bar-out{background:#1c4f9c;box-shadow:0 0 0 2px #fff;}
.srr-posting-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;}
.srr-posting-row .srr-posting-head{margin:0;}
.srr-search{position:relative;flex:1 1 280px;max-width:460px;}
.srr-search input{width:100%;box-sizing:border-box;padding:8px 34px 8px 12px;border:2px solid var(--text);border-radius:999px;font-size:12.5px;background:var(--card-bg,#fff);}
.srr-search input::-webkit-search-cancel-button{display:none;}
.srr-q-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:50%;background:#121212;color:#fff;font-size:11px;cursor:pointer;line-height:22px;padding:0;}
.srr-q-x[hidden]{display:none;}
.srr-q-hide{display:none !important;}
.srr-q-none{font-size:12px;opacity:.6;padding:8px 2px;margin:0;}
.ph-sale-f .ph-f{white-space:nowrap;flex:0 0 auto;padding:8px 13px;}   /* SPEC §68: the word and its count on one line */

/* ══ SPEC §69 (OMAN 2026-09-27) — the Dashboard menu · Sales Record · Cash Record · Holiday · Position presets ══ */
.dash-menu-wrap{position:relative;display:inline-flex;}
#nav-dash.dash-open,#nav-cust.dash-open{background:var(--accent);border-color:var(--text);box-shadow:var(--shadow-sm);}   /* SPEC §114: + Customer */
.dash-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:6500;display:flex;flex-direction:column;gap:9px;padding:11px;min-width:196px;
  background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:20px;box-shadow:rgba(0,0,0,.28) 6px 6px 0 0;}
.dash-menu[hidden]{display:none;}
.dash-menu button{font:inherit;font-size:14px;font-weight:800;text-align:left;white-space:nowrap;cursor:pointer;padding:7px 16px;
  border:2px solid var(--text);border-radius:999px;background:#fff;color:var(--text);}
.dash-menu button:hover{background:var(--accent-2);}
/* ══ SPEC §75 (OMAN 2026-09-28) ══════════════════════════════════════════════════════════════════════════════ */
/* Dashboard menu: centred under the word, no frame, each option a Pet Home pill (ALL · AVAILABLE · SOLD · HOMED · AGE) */
.dash-menu{left:50%;right:auto;transform:translateX(-50%);min-width:176px;padding:0;background:transparent;border:none;box-shadow:none;}
.dash-menu button{text-align:center;background:var(--dm-bg,#fff);color:var(--dm-fg,var(--text));box-shadow:var(--shadow-sm);transition:transform .12s,filter .12s;}
.dash-menu button:hover{background:var(--dm-bg,#fff);filter:brightness(.96);transform:translateY(-1px);}
.dash-menu button:nth-child(1){--dm-bg:#fef3c7;--dm-fg:#854d0e;}
.dash-menu button:nth-child(2){--dm-bg:#d1fae5;--dm-fg:#065f46;}
.dash-menu button:nth-child(3){--dm-bg:#fee2e2;--dm-fg:#991b1b;}
.dash-menu button:nth-child(4){--dm-bg:#ede9fe;--dm-fg:#5b21b6;}
.dash-menu button:nth-child(5){--dm-bg:#dbeafe;--dm-fg:#1e40af;}
/* Loyverse Sync menu: the same pills, the age inside each */
.lv-sync-item{display:block;width:100%;margin:0 0 9px;border:2px solid var(--text);border-radius:999px;padding:7px 16px;font:inherit;font-size:12.5px;
  font-weight:800;letter-spacing:.02em;text-align:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s,filter .12s;}
.lv-sync-item:last-child{margin-bottom:0;}
.lv-sync-item .lv-si-l{display:block;}
.lv-sync-item .lv-si-t{display:block;font-size:10px;font-weight:700;margin-top:1px;letter-spacing:.01em;white-space:nowrap;}
.lv-sync-item:hover:not(.lv-off){filter:brightness(.96);transform:translateY(-1px);}
.lv-sync-item.lv-off{opacity:.55;cursor:not-allowed;}
/* Boarding bar: IN / OUT a little to the left of the bar's middle */
.board-bar .bar-io{margin-left:-8px;margin-right:8px;}
.pd-cap .rc-petno{opacity:1;overflow:visible;}
/* JUJUBA TEAM: one Staff Card per employee — the pet card's frame, the person's colour where the photo sits */
.team-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;}
.team-per{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.8;}
.team-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-bottom:30px;}
.staff-card{cursor:default;}
.staff-card .sc-top{position:relative;height:118px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--text);}
.staff-card .sc-ini{font-size:46px;font-weight:900;letter-spacing:.04em;}
.staff-card .sc-role{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);background:#fff;color:#121212;border:1.5px solid #121212;border-radius:999px;
  padding:1px 9px;font-size:9.5px;font-weight:900;letter-spacing:.04em;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;}
.staff-card .sc-body{padding:12px 13px 14px;}
.staff-card .sc-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14.5px;}
.staff-card .sc-chip{background:#ede9fe;color:#5b21b6;border-radius:999px;padding:2px 8px;font-size:9.5px;font-weight:900;letter-spacing:.06em;}
.staff-card .sc-hr{border:none;border-top:1px solid #f1f5f9;margin:8px 0;}
.staff-card .sc-rev{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;font-weight:800;opacity:.9;}
.staff-card .sc-rev b{font-size:17px;opacity:1;}
.staff-card .sc-kpis{display:flex;gap:12px;font-size:11.5px;margin:4px 0 9px;opacity:.85;}
.staff-card .sc-mix{display:flex;height:8px;border-radius:999px;overflow:hidden;border:1.5px solid var(--text);margin-bottom:9px;}
.staff-card .sc-mix span{display:block;min-width:2px;}
.staff-card .sc-cat{display:grid;grid-template-columns:10px 1fr auto 34px;align-items:center;gap:7px;font-size:12px;padding:3px 0;}
.staff-card .sc-cat b{font-weight:800;}
.staff-card .sc-cat i{font-style:normal;font-size:10.5px;opacity:.65;text-align:right;}
.staff-card .sc-dot{width:10px;height:10px;border-radius:50%;}
.staff-card .sc-zero{opacity:.45;}
/* JOURNEY: the Pet Status CONFIRM under its rows; SOLD's Customer Update as its own step-by-step section */
.rep-conf-row{display:flex;justify-content:flex-end;margin:10px 0 4px;}
.rep-conf-btn{padding:8px 22px;font-size:12px;font-weight:800;letter-spacing:.04em;}
.rep-conf-btn[disabled]{opacity:.45;cursor:not-allowed;}
.rep-cust-sec{margin-top:16px;padding:12px 14px;border:2px solid var(--text);border-radius:14px;background:#fff7ed;}
.rep-cust-h{font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;}
.rep-cust-h span{font-weight:700;text-transform:none;letter-spacing:0;opacity:.65;}
.rep-cust-steps{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px;font-size:12px;}
.rep-cust-steps li{display:flex;align-items:center;gap:8px;opacity:.7;}
.rep-cust-steps li.ok{opacity:1;font-weight:700;}
.rep-cust-steps small{opacity:.7;font-weight:600;}
.rep-cs-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--text);font-size:10.5px;font-weight:900;flex:0 0 auto;}
.rep-cust-steps li.ok .rep-cs-n{background:#1f7a3d;border-color:#1f7a3d;color:#fff;}
.rep-locked{opacity:.4;pointer-events:none;filter:grayscale(.6);}
/* Admin → Responsibility: a box per task, edited only behind its pen */
.resp-box{padding:12px 14px;border:2px solid var(--text);border-radius:14px;background:var(--card-bg);box-shadow:var(--shadow-sm);margin-bottom:10px;}
.resp-box.resp-editing{box-shadow:0 0 0 3px rgba(31,122,61,.35),var(--shadow-sm);}
.resp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.resp-name b{display:block;font-size:13.5px;font-weight:900;}
.resp-name small{display:block;font-size:10.5px;opacity:.7;margin-top:2px;}
.resp-pen{font:inherit;font-size:11.5px;font-weight:800;border:2px solid var(--text);border-radius:999px;padding:3px 12px;background:#fff;cursor:pointer;white-space:nowrap;}
.resp-pen:hover{background:#d1fae5;}
.resp-editing-tag{font-size:10px;font-weight:900;letter-spacing:.08em;color:#1f7a3d;border:1.5px solid #1f7a3d;border-radius:999px;padding:2px 9px;}
.resp-fields{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.resp-time-fg{min-width:186px;}
.resp-tsw{display:inline-flex;border:2px solid var(--text);border-radius:999px;overflow:hidden;margin-bottom:4px;}
.resp-tsw-b{font:inherit;font-size:10.5px;font-weight:900;letter-spacing:.05em;padding:2px 11px;border:none;background:#fff;color:var(--text);cursor:pointer;}
.resp-tsw-b.on{background:#121212;color:#fff;}
.resp-tsw-b[disabled]{cursor:default;}
.resp-allday{display:flex;align-items:center;gap:5px;font-size:10.5px;white-space:nowrap;cursor:pointer;}
.resp-phrase-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:10px;}
.resp-phrase-fg{flex:1 1 280px;}
.resp-voice-fg{flex:0 0 auto;}
.resp-voice{display:flex;align-items:center;gap:7px;min-height:32px;}
.resp-v-play,.resp-v-x{width:28px;height:28px;border-radius:50%;border:2px solid var(--text);background:#fff;cursor:pointer;font-size:11px;padding:0;}
.resp-v-play{background:#d1fae5;}
.resp-v-name,.resp-v-none{font-size:11px;opacity:.7;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.resp-v-up{padding:3px 12px;min-height:0;cursor:pointer;}
.resp-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;}
.resp-foot .resp-msg{margin-right:auto;font-size:11.5px;}
/* DAILIES: OPEN TASK beside the title */
.dl-ot-btn{display:inline-flex;align-items:center;gap:5px;margin-left:8px;vertical-align:middle;font:inherit;font-size:10px;font-weight:900;letter-spacing:.06em;
  border:2px solid #c1272d;color:#c1272d;background:#fff;border-radius:999px;padding:2px 9px;cursor:pointer;animation:stk-breathe 1.5s ease-in-out infinite;}
.dl-ot-btn b{background:#c1272d;color:#fff;border-radius:999px;padding:0 6px;}
.ot-land{display:grid;gap:8px;}
.ot-l-title{font-size:16px;font-weight:900;}
.ot-l-sub{font-size:12px;opacity:.75;}
.ot-l-h{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;}
.ot-names{display:flex;flex-wrap:wrap;gap:8px;}
.ot-name{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--text);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;background:#fff;cursor:pointer;}
.ot-name.on{background:#d1fae5;border-color:#065f46;}
.ot-name.owner{opacity:.5;}
.ot-msg{font-size:12px;margin:0;}
.jl-star{background:#fef3c7;color:#854d0e;}
/* MY BOOK: the title is a button, "(Name) Note" with its search, the open bookmark's subtitle */
.pb-title.mb-home{display:block;width:100%;background:none;border:none;cursor:pointer;padding:0;margin-bottom:8px;}
.pb-title.mb-home:hover,.pb-title.mb-home.on{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;}
.mb-note-row{display:flex;align-items:center;gap:8px;margin:0 0 12px;}
.mb-note-who{font-size:12px;font-weight:900;letter-spacing:.04em;white-space:nowrap;}
.mb-q{flex:1;min-width:0;padding:5px 11px;border:2px solid #121212;border-radius:999px;font:inherit;font-size:12px;background:#fff;}
.mb-sub{font-size:13px;font-weight:900;letter-spacing:.14em;text-align:center;margin:0 0 10px;padding:4px 0;border-top:2px dashed rgba(0,0,0,.25);border-bottom:2px dashed rgba(0,0,0,.25);}
.mb-hit{display:grid;gap:2px;width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer;font:inherit;}
.mb-hit small{font-size:10.5px;font-weight:800;opacity:.6;text-transform:uppercase;letter-spacing:.06em;}
.jn-days{display:inline-flex;align-items:center;gap:8px;font-size:13px;}
.jn-cat{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 6px;padding-bottom:3px;border-bottom:2px solid #121212;}
.jn-cat span{opacity:.6;}
.jn-row{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;line-height:1.45;padding:6px 8px;border:none;border-bottom:1px dashed rgba(0,0,0,.15);background:none;}
.jn-row.jn-open{cursor:pointer;}
.jn-row.jn-open:hover{background:rgba(0,0,0,.04);}
.jn-docs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.jn-doc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;border:1.5px solid rgba(0,0,0,.25);border-radius:10px;padding:4px 9px;background:#fff;}
.jn-doc img{width:34px;height:34px;object-fit:cover;border-radius:6px;cursor:zoom-in;}
/* Sales Record: each row's date; the pet code on a receipt tile */
.srec-date{font-size:11px;font-weight:700;opacity:.7;white-space:nowrap;}
.rc-petno{display:inline-block;align-self:flex-start;margin:2px 0;padding:0 7px;border:1.5px solid #121212;border-radius:999px;background:#fff;color:#121212;
  font-size:9.5px;font-weight:900;letter-spacing:.05em;white-space:nowrap;}

.srec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;margin-bottom:30px;align-items:start;}
.srec-grid .srec-box{margin-bottom:0;}
.srec-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-start !important;}
.srec-head h2{margin:0;}
.srec-count{display:inline-block;min-width:22px;padding:0 7px;border-radius:999px;background:rgba(0,0,0,.1);font-size:11px;font-weight:800;line-height:19px;text-align:center;}
.srec-modes{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.srec-mode{font:inherit;font-size:12px;font-weight:800;padding:4px 11px;border:2px solid var(--text);border-radius:999px;background:#fff;color:var(--text);cursor:pointer;}
.srec-mode.on{background:var(--text);color:var(--card-bg);}
.srec-mn{font-weight:700;opacity:.85;}
.srec-step{font:inherit;font-size:15px;font-weight:900;width:26px;height:26px;padding:0;line-height:1;border:2px solid var(--text);border-radius:50%;background:#fff;color:var(--text);cursor:pointer;}
.srec-period{font-size:12px;font-weight:800;min-width:104px;text-align:center;}
.srec-halves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px 14px;}
.srec-half-h{display:flex;align-items:center;gap:6px;margin:0 0 7px;font-size:11.5px;font-weight:800;letter-spacing:.03em;}
.srec-half-h b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--text);color:var(--card-bg);font-size:11px;}
/* ten receipts show at a time, each two rows; the rest scroll */
.srec-list{--sr-rh:50px;height:calc(var(--sr-rh) * 10 + 6px * 9);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;}
.srec-queue-box .srec-list{margin:12px 14px;height:calc(var(--sr-rh) * 10 + 6px * 9 + 25px);}
.srec-list .empty{padding:18px 8px;}
.srec-row{flex:0 0 var(--sr-rh);height:var(--sr-rh);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:3px;width:100%;min-width:0;
  text-align:left;font:inherit;color:var(--text);background:var(--bg,#fff);border:1px solid var(--text);border-radius:11px;padding:5px 10px;cursor:pointer;}
.srec-row:hover{background:#fff7e0;}
.srec-l1{display:flex;gap:7px;align-items:baseline;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;}
.srec-l2{display:block;min-width:0;font-size:11.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srec-emp{font-weight:900;flex:0 1 auto;min-width:0;max-width:38%;overflow:hidden;text-overflow:ellipsis;}
.srec-id{font-weight:800;flex:none;}
.srec-rcno{opacity:.8;flex:none;}
.srec-pm,.srec-amt{margin-left:auto;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:800;}
.srec-pm{font-size:10.5px;opacity:.85;}
.srec-pay{grid-column:1 / -1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:2px solid var(--text);border-radius:18px;background:var(--card-bg);box-shadow:var(--shadow-card);}
.srec-pay-list{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0;}
.srec-ch{display:flex;flex-direction:column;min-width:128px;padding:5px 12px;border:1px solid rgba(0,0,0,.25);border-radius:12px;background:#fff;}
.srec-ch-l{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.65;}
.srec-ch-v{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;}
.srec-ch-v small{font-size:10.5px;font-weight:700;opacity:.6;}
.srec-ch-bad{border-color:#a8271f;color:#a8271f;}
.srec-export{margin-left:auto;font-weight:900;}
.srec-err{color:#a8271f;font-size:12px;font-weight:700;margin:0 0 6px;}
.srec-exp-o{display:flex;align-items:center;gap:8px;margin:8px 0;padding:9px 12px;border:2px solid var(--text);border-radius:12px;font-size:13px;cursor:pointer;}
.srec-exp-o input{width:auto !important;flex:none;margin:0 !important;}
.srec-exp-note{font-size:11.5px;opacity:.7;}
.srec-exp-foot{display:flex;justify-content:flex-end;margin-top:12px;}
@media (max-width:900px){.srec-grid{grid-template-columns:1fr;}.srec-halves{grid-template-columns:1fr;}}

.cash-frame .sec-body{overflow-x:auto;padding:18px 20px;}
.cash-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.cash-cur{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cash-lbl{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.65;}
.cash-amt{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;}
.cash-sub{font-size:11.5px;opacity:.7;}
.cash-wd{margin-left:auto;font-weight:900;}
.cash-grid{display:grid;grid-template-columns:128px repeat(6,minmax(0,1fr));gap:8px;align-items:center;min-width:640px;}
.cash-rh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;}
.cash-c{display:flex;align-items:center;justify-content:center;min-width:0;min-height:38px;padding:0 8px;border:2px solid var(--text);border-radius:12px;background:#fff;font-size:14px;font-weight:800;}
.cash-c input{width:100%;min-width:0;font:inherit;text-align:center;outline:none;border:0 !important;box-shadow:none !important;background:transparent !important;padding:0 !important;min-height:0 !important;height:auto !important;border-radius:0 !important;}
.cash-note{background:#fdf1d6;}
.cash-editing .cash-c:has(.cash-note-in){background:#fff7e0;outline:2px dashed var(--text);outline-offset:2px;}
.cash-sum{background:var(--bg,#faf9f5);font-size:13px;font-variant-numeric:tabular-nums;}
.cash-rm{font-size:11px;opacity:.6;margin-right:2px;}
.cash-pen{padding:3px 8px;line-height:1;font-size:12px;border:2px solid var(--text);border-radius:999px;background:#fff;cursor:pointer;}
.cash-edit-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px;font-size:11.5px;min-width:640px;}
.cash-edit-foot span{margin-right:auto;opacity:.7;}
.cash-final{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:2px dashed rgba(0,0,0,.2);}
.cash-vd{padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:900;}
.cash-ok{background:rgba(31,107,58,.12);color:#1f6b3a;}
.cash-bad{background:rgba(168,39,31,.1);color:#a8271f;}
#cash-count-ok{margin-left:auto;}
.cash-wd-pop .fl{display:block;}
.cash-wd-pop input{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:8px 10px;border:2px solid var(--text);border-radius:10px;font-size:15px;}
.cash-wd-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}

/* SPEC §101: the E-Commerce pages above the airway-bill scanner (oval pills) and a page's withdrawals */
.ecom-shops{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 16px;}
.ecom-shop-pill{border:2px solid #3730a3;border-radius:999px;padding:7px 18px;font-size:12.5px;font-weight:800;background:#e0e7ff;color:#3730a3;cursor:pointer;}
.ecom-shop-pill:hover,.ecom-shop-pill:focus-visible{background:#3730a3;color:#fff;}
.ecom-shop-add{width:34px;height:34px;border:2px dashed var(--text);border-radius:999px;background:transparent;color:var(--text);font-size:18px;font-weight:800;line-height:1;cursor:pointer;}
.ecom-wd{min-width:min(100%,460px);}
.ecom-wd-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;}
.ecom-wd-row{border-top:1px solid rgba(128,128,128,.35);padding:8px 0;}
.ecom-wd-top{display:flex;align-items:center;gap:12px;font-size:13px;}
.ecom-wd-top b{margin-left:auto;}
.ecom-wd-who{font-size:11.5px;opacity:.8;margin-top:3px;}

/* Leave & Off: Holiday sits right beside the week's range */
.shift-hol-btn{margin-left:auto;background:#dff3e4;border:2px solid var(--text);font-weight:900;}
.shift-frame .shift-hol-btn + .groom-range{margin-left:0;}
.hol-year{margin-bottom:14px;}
.hol-y{font-size:15px;font-weight:900;margin-bottom:6px;}
.hol-y small{font-size:11px;font-weight:700;opacity:.6;}
.hol-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid rgba(0,0,0,.18);border-radius:10px;margin-bottom:5px;font-size:12.5px;}
.hol-d{flex:0 0 118px;font-weight:800;font-variant-numeric:tabular-nums;}
.hol-n{flex:1;min-width:0;}
.hol-past{opacity:.45;}
.hol-next{border:2px solid var(--text);background:#dff3e4;}
.hol-tag{font-size:10px;font-weight:900;padding:1px 8px;border-radius:999px;background:var(--text);color:var(--card-bg);}
.hol-note{font-size:11.5px;opacity:.72;}

/* Admin → Responsibility → Position presets */
.rp-box{margin-bottom:20px;}
.rp-note{font-size:11px;opacity:.72;margin:7px 2px 10px;}
.rp-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.rp-row select{display:block;min-width:230px;margin-top:3px;padding:5px;border:2px solid var(--text);border-radius:9px;background:var(--card-bg);color:var(--text);}
.rp-who{font-size:11.5px;opacity:.7;padding-bottom:6px;}
.rp-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.rp-cat{padding:9px 12px;border:2px solid var(--text);border-radius:14px;background:var(--card-bg);}
.rp-cat-h{font-size:10.5px;font-weight:900;letter-spacing:.06em;margin-bottom:5px;}
.rp-opt{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:12px;cursor:pointer;}
.rp-foot{display:flex;align-items:center;gap:10px;margin-top:10px;}
.rp-msg{font-size:11.5px;}
.rp-ed-note{display:block;margin-top:4px;font-size:10.5px;opacity:.7;}

/* Admin Settings' tab bar: one oval pill in a black outline (was a strip with only a bottom rule) */
.adm-tabs{margin:-8px 0 20px;padding:6px 7px;border:2px solid #000;border-radius:999px;}
/* Boarding bar: IN / OUT as an oval pill, no white outline (was a circle ringed in white) */
.board-bar .bar-io{width:auto;height:18px;padding:0 9px;border-radius:999px;}
.board-bar .bar-in,.board-bar .bar-out{box-shadow:none;}

/* ══ SPEC §72 (OMAN 2026-09-27) ═══════════════════════════════════════════════════════════════════════════════ */
/* Boarding bar: IN / OUT sit UNDER "Day 1 of 1 · 1 nights" (the bar is a flex column; the pill is drawn before the meta) */
.board-bar .bar-io{order:3;align-self:stretch;margin-top:2px;}   /* SPEC §74: the IN / OUT pill runs the bar's whole length */
/* My Color: the intensity slider under the swatches */
.mc-int{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;}
.mc-int-l{font-size:10px;font-weight:900;letter-spacing:.08em;}
.mc-int input[type=range]{flex:1 1 160px;max-width:260px;accent-color:var(--mc-base,#121212);}
.mc-int-n{min-width:14px;font-size:12px;font-weight:800;text-align:center;}
.mc-int-prev{font-size:11px;font-weight:800;border:1.5px solid #121212;border-radius:999px;padding:1px 9px;}
/* Employee → Edit → Responsibility: the chosen boxes under their category heads */
.accE-resp-cat{margin:9px 0 1px;font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.65;}
.accE-resp-cat:first-child{margin-top:2px;}
.accE-resp-gap{height:10px;border-bottom:1px dashed rgba(0,0,0,.2);margin-bottom:6px;}
/* Pet Home: ✓ on the small card; a name that still owes today's Update / Check flashes (card and pop-out) */
.pc-tick{margin-left:3px;color:#15643f;font-size:11px;font-weight:900;flex:0 0 auto;}
.pc-owed .pc-pic-n,.pic-row .pic-box.pic-owed{animation:pic-owe 1.1s ease-in-out infinite;}
.pic-row .pic-box.pic-owed{border-color:#c1272d;}
@keyframes pic-owe{0%,100%{opacity:1;}50%{opacity:.22;}}
@media (prefers-reduced-motion:reduce){
  .pc-owed .pc-pic-n,.pic-row .pic-box.pic-owed{animation:none;}
  .pc-owed .pc-pic-n{outline:2px dashed #c1272d;outline-offset:1px;}
}
/* Sales Record: a queue receipt filed on a pet card says so (held = the register refused it, with why) */
.srec-filed{margin-right:7px;font-weight:800;color:#1f6b3a;font-style:normal;}
.srec-filed.srec-held{color:#a8271f;}
/* Pet Home: MY PET beside AGE / ROOM — their shape, its own colour (green, like the ✓ it is about); not part of the hold mode */
.ph-f-mine{background:#fdba74;color:#7c2d12;}   /* SPEC §74: orange */
.ph-f-mine.on{border-color:#7c2d12;box-shadow:0 0 0 3px rgba(234,88,12,.45);}
.ph-head.ph-multi .ph-f.ph-f-mine{animation:none;outline:none;}
/* SPEC §119 (OMAN 2026-10-06): the employee pills are half the pill they were, and wear their employee's My Color (npaPillsHTML
   sets fill, ink and outline; a name with no colour yet stays orange). Lit = a black outline and a ring. */
.ph-f.ph-f-who{padding:3px 8px;font-size:10.5px;border-width:1.5px;letter-spacing:.01em;}
.ph-f.ph-f-who .ph-n{min-width:13px;margin-left:3px;padding:0 4px;font-size:9px;line-height:13px;}
.ph-f.ph-f-who.on{box-shadow:0 0 0 2.5px rgba(18,18,18,.4);}

/* ══ SPEC §74 (OMAN 2026-09-28) ═══════════════════════════════════════════════════════════════════════════════ */
/* Pet Home: MY PET at the right end of row 1, left of Grid / Table */
.ph-row1 .ph-right{justify-self:end;display:flex;align-items:center;gap:10px;}
@media (max-width:900px){.ph-row1 .ph-right{justify-self:start;}}
/* Cash Record → Petty Cash, under Final total */
.petty{margin-top:16px;padding-top:12px;border-top:2px solid var(--text);}
.petty-h{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.petty-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.petty-exp{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:10px;}
.petty-exp .fl{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;}
.petty-exp input{min-width:130px;}
.petty-ph{display:flex;align-items:center;justify-content:center;width:86px;height:60px;border:2px dashed var(--text);border-radius:10px;cursor:pointer;font-size:10.5px;overflow:hidden;background:#fff;}
.petty-ph.has{border-style:solid;}
.petty-ph img{width:100%;height:100%;object-fit:cover;}
.petty-list{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.petty-row{display:flex;align-items:center;gap:8px;font-size:11.5px;flex-wrap:wrap;}
.petty-k{font-size:9.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:1px 8px;border:1.5px solid currentColor;}
.petty-expense{color:#8a5a00;}
.petty-cashout{color:#1c4f9c;}
.petty-n{opacity:.75;}
.petty-w{opacity:.6;margin-left:auto;}
.petty-view{border:none;background:none;cursor:pointer;font-size:14px;padding:0 2px;}
#petty-exp-ok:disabled{opacity:.45;cursor:not-allowed;}   /* shut until the receipt photo is chosen */
/* The pet card's Receipt tiles: what the receipt was rung as, and its items with their categories */
.rc-pay{display:inline-block;margin-top:4px;width:fit-content;font-size:9px;font-weight:900;letter-spacing:.05em;border-radius:999px;padding:1px 8px;color:#fff;}
.rc-pay-full{background:#15643f;}
.rc-pay-deposit{background:#8a5208;}
.rc-pay-balance{background:#1c4f9c;}
.rc-items{display:block;margin-top:3px;font-size:10px;line-height:1.35;opacity:.85;}
.rc-cat{font-style:normal;font-weight:800;opacity:.7;}
.rc-held{display:block;margin-top:3px;font-size:9.5px;font-weight:800;color:#a8271f;}
.pd-cap .rc-items,.pd-cap .rc-held{white-space:normal;overflow:visible;text-overflow:clip;}   /* the lines wrap, never cut */

/* ══ SPEC §76 (OMAN 2026-09-28) — PET / CUS · the SOLD Position's two tasks · JOURNEY one task at a time ══════════════════════ */
/* the small card: PET before the Caregiver, CUS before the Position */
.pc-cap{flex:0 0 auto;margin-right:3px;font-size:7.5px;font-weight:900;letter-spacing:.08em;opacity:.55;}
.pc-pic-c .pc-pic-n + .pc-pic-n{margin-left:3px;}
/* the pop-out: PET / CUS over each box, in the gap under the photo — absolutely placed, so the gap keeps its height */
.pic-row .pic-box{position:relative;overflow:visible;}
.pic-cap{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);font-size:7.5px;font-weight:900;letter-spacing:.12em;
  line-height:1;opacity:.6;pointer-events:none;white-space:nowrap;}
.pic-caret{font-size:9px;opacity:.6;margin-left:1px;}
/* the SOLD Position's menu — the Loyverse Sync box, the Dashboard's pill colours; the name holding each task beside it */
.pic-wrap{position:relative;display:inline-flex;}
.pic-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:9px;
  padding:11px;min-width:250px;background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:20px;box-shadow:rgba(0,0,0,.28) 6px 6px 0 0;}
.pic-menu[hidden]{display:none;}
.pic-mi{display:flex;align-items:center;gap:10px;}
.pic-mt{flex:0 0 auto;min-width:138px;font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;cursor:pointer;padding:7px 16px;
  border:2px solid var(--text);border-radius:999px;background:var(--dm-bg,#fff);color:var(--dm-fg,var(--text));box-shadow:var(--shadow-sm);
  transition:transform .12s,filter .12s;}
.pic-mt:hover:not(:disabled){filter:brightness(.96);transform:translateY(-1px);}
.pic-mt:disabled{cursor:not-allowed;opacity:.7;}
.pic-mi:nth-child(1) .pic-mt{--dm-bg:#d1fae5;--dm-fg:#065f46;}
.pic-mi:nth-child(2) .pic-mt{--dm-bg:#fee2e2;--dm-fg:#991b1b;}
.pic-mn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;white-space:nowrap;}
.pic-mn i{font-weight:600;opacity:.55;}
/* JOURNEY: each task its own section; the one not taken is blacked out and does not answer */
.pj-sec{position:relative;}
.pj-sec:not(.rep-cust-sec){border:2px solid var(--text);border-radius:14px;padding:11px 12px 6px;margin:0 0 4px;}
.pj-sec-h{font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px;}
.pj-dim{pointer-events:none;user-select:none;}
.pj-dim::after{content:'';position:absolute;inset:-2px;border-radius:14px;background:rgba(10,10,10,.78);}
.rep-ph-note{font-weight:700;text-transform:none;letter-spacing:0;color:#b45309;}
.rep-cust-done{font-size:12px;font-weight:700;color:#15643f;margin:0 0 8px;}
/* ══ SPEC §77 — a grooming service stored in the list its name contradicts: one tap stages the fix for Save Changes ══ */
.gsv-namefix{display:block;width:100%;margin:0 0 8px;padding:7px 10px;border:1.5px dashed #b45309;border-radius:10px;background:#fff7ed;color:#7c2d12;font-size:12px;font-weight:700;}
.gsv-namefix button{margin-left:6px;border:1.5px solid #7c2d12;border-radius:999px;background:#fff;color:#7c2d12;font:inherit;font-size:11px;padding:2px 10px;cursor:pointer;}
/* ══ SPEC §80 — HOMED stars newest-first · the Receipt Zone pop-out and its logo · the payment verdict · Complete · Sale ID ══ */
.ps-star-due svg path{stroke-width:2.2;animation:ps-star-due 1.1s ease-in-out infinite;}
@keyframes ps-star-due{0%,100%{stroke:#94a3b8;}50%{stroke:#dc2626;}}
.ps-star-ahead{opacity:.45;}
.sf-emp{display:flex;align-items:center;gap:14px;max-width:520px;margin-bottom:18px;font-size:12.5px;padding:8px 12px;border:2px solid var(--text);border-radius:12px;background:rgba(0,0,0,.03);}
.sf-emp-who{flex:1;min-width:0;}
.rz-logo{flex:none;margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid var(--text);border-radius:12px;background:#fff;padding:6px 9px;cursor:pointer;}
.rz-logo img{width:30px;height:30px;object-fit:contain;animation:rc-bob 1.6s ease-in-out infinite;}
.rz-no{font-size:10.5px;font-weight:900;letter-spacing:.02em;white-space:nowrap;}
.rz-no[hidden]{display:none;}
.rz-ov{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;}
.rz-ov[hidden]{display:none;}
.rz-card{background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:20px;box-shadow:rgba(0,0,0,.3) 10px 10px 0 0;width:100%;max-width:760px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
.rz-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:2px solid var(--text);}
.rz-head b{font-size:15px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.rz-head-ico{width:24px;height:24px;object-fit:contain;flex:none;}
.rz-stage{flex:1;min-width:0;font-size:11.5px;opacity:.75;}
.rz-x{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--text);background:#fff;font-size:15px;font-weight:900;cursor:pointer;line-height:1;padding:0;}
.rz-body{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:14px;}
.rz-half{border:1.5px dashed rgba(18,18,18,.3);border-radius:14px;padding:10px 12px;}
.rz-half[hidden]{display:none;}
.rz-sub{font-size:10px;color:#94a3b8;font-weight:400;text-transform:none;letter-spacing:0;}
#rz-pet .rch .btn-danger{display:none;}
.rz-foot{display:flex;justify-content:flex-end;padding:10px 16px 14px;border-top:1.5px solid rgba(18,18,18,.12);}
.rz-card #rz-why{margin:0 16px 8px;}
.rz-red{color:#dc2626;}
.sf-foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:14px;}
.sf-foot #sf-discard{margin-right:auto;}
#sf-confirm[hidden]{display:none;}
.pay-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pay-res{align-self:flex-start;font-size:12px;font-weight:900;letter-spacing:.03em;padding-top:8px;}
.pay-res-short{color:#dc2626;}
.pay-res-markup{color:#15803d;}
.pay-res-std{color:#121212;}
.pay-paid{border-style:solid;}
.ag-complete-row{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:10px;font-size:11.5px;}
.ag-complete-row span{flex:1;opacity:.75;}
.ag-complete{padding:7px 18px;font-weight:900;border:2px solid var(--text);border-radius:999px;background:#e5e7eb;color:#475569;cursor:pointer;}
.ag-complete-ok{background:#16a34a;color:#fff;border-color:#14532d;}
.ag-done{margin-top:10px;font-size:12px;font-weight:900;color:#15803d;text-align:right;}
.rc-sid{display:block;font-size:10.5px;font-weight:900;color:#1e40af;letter-spacing:.02em;}
.rc-sid-dep{color:#b45309;}
.rc-sid-none{color:#dc2626;}
@media (prefers-reduced-motion:reduce){.ps-star-due svg path{animation:none;stroke:#dc2626;}.rz-logo img{animation:none;}}
/* ══ SPEC §81 — Position Responsibility & Permission: two tabs, the ladder's cards, green = new at this position ══ */
.prp-tabs{display:flex;gap:8px;margin:0 0 12px;}
.prp-tab{flex:0 0 auto;padding:7px 18px;border:2px solid var(--text);border-radius:999px;background:var(--card-bg);color:var(--text);font:inherit;font-size:12.5px;font-weight:900;cursor:pointer;}
.prp-tab.on{background:var(--text);color:var(--card-bg);}
.prp-tab[hidden]{display:none;}
.prp-head{font-size:11.5px;opacity:.85;margin:0 0 10px;}
.prp-green-w{color:#15803d;}
.prp-pend-w{color:#b45309;font-weight:800;}
.prp-msg{font-size:11.5px;font-weight:700;}
.prp-dept{margin-bottom:16px;}
.prp-dept .stk-group-head{margin-bottom:8px;}
.prp-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;align-items:stretch;}
.prp-row .prp-card{flex:0 0 240px;}
.prp-col{display:flex;flex-direction:column;gap:10px;}
.prp-card{border:2px solid var(--text);border-radius:14px;background:var(--card-bg);padding:9px 11px;min-width:0;}
.prp-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:2px solid var(--text);padding-bottom:6px;margin-bottom:6px;}
.prp-card-h b{font-size:13px;font-weight:900;}
.prp-card-h span{font-size:11px;font-weight:800;opacity:.6;}
.prp-part+.prp-part{border-top:1.5px dashed rgba(18,18,18,.25);margin-top:8px;padding-top:6px;}
.prp-part-h{font-size:10px;font-weight:900;letter-spacing:.08em;opacity:.65;margin-bottom:3px;}
.prp-cat{font-size:10.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-top:5px;}
.prp-pc-edit{color:#1d4ed8;}.prp-pc-oversee{color:#7c3aed;}.prp-pc-approve{color:#15803d;}.prp-pc-privilege{color:#b45309;}
.prp-card ul{margin:2px 0 0;padding-left:16px;font-size:11.5px;line-height:1.45;}
.prp-none{font-size:11.5px;opacity:.6;margin:4px 0;}
@keyframes prp-flash{0%,100%{background:rgba(22,163,74,.10);}50%{background:rgba(22,163,74,.42);}}
.prp-card li.prp-new{color:#15803d;font-weight:800;border-radius:6px;animation:prp-flash 1.4s ease-in-out infinite;}
.resp-box.prp-new,.perm-row.prp-new{animation:prp-flash 1.4s ease-in-out infinite;box-shadow:0 0 0 3px #16a34a,var(--shadow-sm);}
.perm-row.prp-new{border-radius:8px;box-shadow:inset 0 0 0 2px #16a34a;}
.resp-box.prp-off{opacity:.55;}
.resp-box.prp-pending,.perm-row.prp-pending{outline:2px dashed #b45309;outline-offset:2px;}
.resp-top .prp-chk-w{flex:none;display:flex;align-items:center;padding-top:2px;}
.resp-top .prp-chk-w input{width:18px;height:18px;accent-color:#16a34a;cursor:pointer;margin:0;}
.resp-top .prp-chk-w+.resp-name{flex:1;}
@media (prefers-reduced-motion:reduce){.prp-card li.prp-new,.resp-box.prp-new,.perm-row.prp-new{animation:none;background:rgba(22,163,74,.22);}}
@media (max-width:640px){.prp-row .prp-card{flex-basis:78vw;}}
/* ══ SPEC §81 — a stay of several pets: the total on top, one row per pet under it (two show, a 3rd scrolls) ══ */
.svc-pets{grid-column:1/-1;order:2;display:flex;flex-direction:column;gap:6px;max-height:70px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px;}
.svc-petrow{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex:none;}
.svc-petname{font-size:12px;font-weight:900;margin-right:2px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;}
.svc-head.svc-pills3{padding-top:126px !important;}
.svc-head.svc-pills4{padding-top:164px !important;}
/* ══ SPEC §81 — Add grooming from a stay: a green tick behind 1st Pet / 2nd Pet … (untick = not in this grooming) ══ */
#gs-xp-first:not([hidden]){display:flex;align-items:center;gap:8px;}
.xp-enrol{display:inline-flex;align-items:center;cursor:pointer;-webkit-text-fill-color:initial;}
.xp-row .xp-enrol{margin:0 auto 0 8px;}
.xp-enrol input{position:absolute;opacity:0;width:0;height:0;}
.xp-enrol span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:2px solid #121212;border-radius:6px;background:#fff;color:#fff;font-size:14px;font-weight:900;line-height:1;}
.xp-enrol.on span{background:#16a34a;border-color:#14532d;}
.xp-enrol input:focus-visible+span{outline:3px solid #2563eb;outline-offset:2px;}

/* ══ SPEC §84 (2026-09-30) — THE APPOINTMENT SCHEDULE (drawn like Grooming's) · ONE APPOINTMENT'S ANSWER · THE BOOKING VIDEO · C.O.M. ══ */
.appt-top{padding:12px 18px 0;}
.appt-top:last-child{padding-bottom:16px;}
.appt-tag{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.4px;border-radius:181px;padding:0 6px;border:1.5px solid;vertical-align:1px;}
.appt-tag-appt{color:#1e40af;border-color:#1e40af;background:#dbeafe;}
.appt-tag-walk{color:#5b21b6;border-color:#5b21b6;background:#ede9fe;}   /* SPEC §87: WALK in purple */
.appt-tag-kind{color:#991b1b;border-color:#991b1b;background:#fee2e2;}
.appt-card.appt-st-arrived{border:2px solid #1f8f5f;background:#ecf7f1;}
.appt-card.appt-st-canceled{border:2px solid #dc2626;background:#fdecec;}
.appt-card.appt-st-canceled .ga-pet{text-decoration:line-through;text-decoration-color:#dc2626;}
.appt-card.appt-st-no_show{border:2px dashed #6b6256;background:#f3f1ec;opacity:.8;}
.appt-card.appt-st-rescheduled{border:2px solid #2563eb;background:#f2f6ff;}
.appt-status-arrived{color:#15643f;border-color:#1f8f5f;background:#fff;}
.appt-status-canceled{color:#dc2626;border-color:#dc2626;background:#fff;}
.appt-status-no_show{color:#3a352c;border-color:#6b6256;background:#fff;}
.appt-status-rescheduled{color:#1d4ed8;border-color:#1d4ed8;background:#fff;}
.appt-result{font-size:10px;font-weight:800;margin-top:3px;color:#3a352c;}
.appt-out-bought{color:#15643f;}
.appt-row.appt-st-arrived{background:#ecf7f1;border-color:#1f8f5f;}
.appt-row.appt-st-canceled,.appt-row.appt-st-no_show{opacity:.55;}
.appt-ed-info{display:flex;flex-direction:column;gap:5px;font-size:13px;border:2px solid var(--text);border-radius:14px;padding:10px 12px;background:#faf5e4;}
.appt-ed-pos{margin-top:4px;font-size:12.5px;}
.appt-ed-pos .fl{display:inline;margin:0;}
.appt-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.appt-pill{border:2px solid var(--text);background:#fff;border-radius:181px;padding:6px 14px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit;}
.appt-pill.on{background:var(--text);color:#fff;}
.appt-pill-arrived.on,.appt-pill-bought.on{background:#1f8f5f;border-color:#1f8f5f;}
.appt-pill-canceled.on{background:#dc2626;border-color:#dc2626;}
.appt-pill-rescheduled.on{background:#2563eb;border-color:#2563eb;}
.appt-vbox{margin-top:16px;border-top:1.5px dashed var(--text);padding-top:12px;}
.appt-vtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 10px;}
.appt-vup{cursor:pointer;}
.appt-bg-name{font-size:12px;opacity:.75;}
.appt-vframe{width:100%;max-width:440px;aspect-ratio:420/307;border:2px solid var(--text);border-radius:18px;overflow:hidden;background:#f7efe7;}   /* SPEC §85: the page's taller frame */
.appt-vframe video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-select:none;}
.appt-vframe.editing{touch-action:none;box-shadow:0 0 0 3px var(--accent,#f489a3);}
.appt-vframe.editing video{cursor:grab;}
.appt-vframe.editing video:active{cursor:grabbing;}
.com-new{border:2px solid var(--text);border-radius:14px;padding:12px 14px;background:#fff;margin-bottom:16px;}
/* SPEC §114: twelve columns — the first row holds four boxes (Employee · Category · Page Name · Page URL), the rest three */
.com-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px 12px;}
.com-grid>.fg{grid-column:span 4;min-width:0;}
.com-grid>.fg.com-c3{grid-column:span 3;}
@media (max-width:760px){ .com-grid>.fg,.com-grid>.fg.com-c3{grid-column:1 / -1;} }
.com-grid input[readonly]{background:#f3f1ec;cursor:not-allowed;}
.com-photo{display:flex;align-items:center;justify-content:center;min-height:42px;border:2px dashed #b8b0a2;border-radius:10px;cursor:pointer;font-size:12.5px;font-weight:700;padding:4px;}
.com-photo img{max-height:80px;max-width:100%;border-radius:6px;}
/* SPEC §120: the sale's link — NON APPT. (orange) · APPT. (purple) at the right end of Ownership details; the calendar, Insight and
   the customer list in their pop-outs */
.sdiv-own{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.sf-link{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;text-transform:none;letter-spacing:0;border-radius:181px;}
.sf-link.draft-owed{outline:2.5px solid #dc2626;outline-offset:3px;}
.m-appt-btn.m-appt-non{border-color:#c2410c;background:#f97316;color:#fff;box-shadow:3px 3px 0 #7c2d12;}
.m-appt-set.m-appt-non{background:#fff7ed;color:#7c2d12;box-shadow:none;}
.slk-x{border:1.5px solid #8a8577;background:#fff;border-radius:50%;width:22px;height:22px;line-height:16px;font-size:11px;font-weight:800;cursor:pointer;padding:0;}
.apc-body{min-width:min(900px,88vw);}
.apc-wide{min-width:min(1800px,92vw);}
.apc-cell{cursor:pointer;min-height:92px;}
.apc-appt{display:block;width:100%;font:inherit;font-size:10.5px;font-weight:700;text-align:left;}
.slk-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;}
.slk-q{width:100%;margin-bottom:10px;}
.slk-note{font-size:12px;font-weight:800;color:#b45309;margin:0 0 8px;}
.slk-list{display:flex;flex-direction:column;gap:6px;max-height:56vh;overflow-y:auto;padding:2px;}
.slk-row{cursor:pointer;}
.slk-card{gap:9px;}
.slk-kv{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px;align-items:center;}
.api-sum{grid-template-columns:repeat(4,1fr);padding:0 0 12px;}
.api-who{margin-bottom:12px;}
.api-list{display:flex;flex-direction:column;gap:5px;max-height:38vh;overflow-y:auto;}
.api-row{display:grid;grid-template-columns:150px minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);gap:10px;align-items:center;text-align:left;font:inherit;font-size:12.5px;padding:6px 10px;border:1.5px solid var(--text);border-radius:10px;background:#fff;cursor:pointer;}
.api-st{font-weight:800;text-align:right;}
/* SPEC §120: Account Log — a box a fixed number of rows tall (20 one's own, 10 each for the owner), the rest scrolled to */
.acl-box{box-sizing:content-box;overflow-y:auto;overscroll-behavior:contain;border:2px solid var(--text);border-radius:12px;background:#fff;}
.acl-row{display:grid;grid-template-columns:112px minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:8px;height:30px;padding:0 10px;border-bottom:1px solid #ece3c8;font-size:12px;}
.acl-row:last-of-type{border-bottom:none;}
.acl-at{font-variant-numeric:tabular-nums;opacity:.7;white-space:nowrap;}
.acl-what,.acl-part{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acl-what i{font-style:normal;font-size:10.5px;font-weight:800;color:#1d4ed8;text-transform:uppercase;}
.acl-part{opacity:.65;text-align:right;}
.acl-more{display:block;margin:6px auto;}
.acl-emp{margin-bottom:14px;}
.acl-n{margin-left:auto;font-size:11px;opacity:.6;}
/* SPEC §120: the Outreach List — by day, then employee, then platform; ten posts and it scrolls (comPaint sets the exact height) */
.com-list{position:relative;display:flex;flex-direction:column;gap:8px;max-height:980px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;}
.com-day{display:flex;flex-direction:column;gap:8px;}
.com-day-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:2px solid var(--text);padding:6px 2px 3px;font-size:13.5px;position:sticky;top:0;background:var(--bg,#fbf6e6);z-index:2;}
.com-day-h>span,.com-who-h>span:not(.com-pill),.com-plat-h>span:not(.com-pill){font-size:11px;font-weight:700;opacity:.65;}
.com-who{display:flex;flex-direction:column;gap:6px;padding-left:6px;}
.com-who-h,.com-plat-h{display:flex;align-items:center;gap:8px;}
.com-plat{display:flex;flex-direction:column;gap:6px;padding-left:14px;}
.com-pill{display:inline-flex;align-items:center;max-width:100%;border:1.5px solid var(--text);border-radius:999px;padding:2px 11px;font-size:12px;font-weight:800;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.com-pill-who{font-size:12.5px;padding:3px 13px;}
.com-pill-n{background:#fff;color:#121212;border-color:#121212;}
.com-pill-go{outline:2.5px solid #dc2626;outline-offset:1.5px;animation:comPillGo 1s ease-in-out infinite;}
@keyframes comPillGo{0%,100%{outline-color:#dc2626;}50%{outline-color:transparent;}}
@media (prefers-reduced-motion:reduce){.com-pill-go{animation:none;}}
/* the Platform / Page Name lists: a button and a list of buttons, because an <option> cannot hold a pill */
.com-dd{position:relative;}
.com-dd-btn{display:flex;align-items:center;gap:6px;width:100%;min-height:38px;padding:4px 9px;font:inherit;text-align:left;border:2px solid var(--text);border-radius:10px;background:#fff;color:inherit;cursor:pointer;}
.com-dd-btn:disabled{background:#f3f1ec;cursor:not-allowed;}
.com-dd-val{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0;flex:1;}
.com-dd-ph{font-size:12.5px;opacity:.65;}
.com-dd-car{flex:none;font-size:11px;opacity:.7;}
.com-dd-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:30;min-width:100%;width:max-content;max-width:min(92vw,420px);max-height:320px;overflow-y:auto;border:2px solid var(--text);border-radius:12px;background:#fff;box-shadow:4px 4px 0 var(--text);padding:5px;}
.com-dd-opt{display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:100%;padding:6px 7px;border:none;border-radius:8px;background:transparent;font:inherit;text-align:left;cursor:pointer;}
.com-dd-opt:hover,.com-dd-opt:focus-visible,.com-dd-opt[aria-selected="true"]{background:#f3ecd6;}
.com-dd-opt small{flex-basis:100%;font-size:10.5px;font-weight:700;color:#b91c1c;padding-left:4px;}
.com-dd-grp{font-size:10.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;opacity:.7;padding:7px 7px 2px;}
.com-dd-none{font-size:12px;opacity:.7;padding:8px;}
.com-cat-n{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.com-color{width:30px;height:24px;padding:0;border:1.5px solid var(--text);border-radius:6px;background:#fff;cursor:pointer;}
.com-post{display:flex;gap:12px;border:2px solid var(--text);border-radius:14px;padding:9px 12px;background:#fff;}
.com-post.com-due{border-color:#b45309;background:#fff8ec;}
.com-thumb{flex:0 0 72px;height:72px;border-radius:9px;overflow:hidden;background:#f3f1ec;display:flex;align-items:center;justify-content:center;font-size:22px;}
.com-thumb img{width:100%;height:100%;object-fit:cover;}
.com-body{min-width:0;flex:1;font-size:13px;}
.com-meta{font-size:11.5px;opacity:.8;margin-top:2px;overflow-wrap:anywhere;}
.com-views{margin-top:6px;font-size:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.com-views input{width:96px;padding:4px 8px;font-size:12.5px;}
.com-due-t{color:#b45309;font-weight:800;}
.com-manage{margin:0 0 14px;}
.com-cat{border-bottom:1.5px dashed #d8d0c2;padding:8px 0;}
.com-cat-h{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.com-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;}
.com-chips input{flex:1 1 180px;min-width:0;padding:5px 9px;font-size:12.5px;}
.com-chip{display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--text);border-radius:181px;padding:2px 4px 2px 10px;font-size:12px;font-weight:700;background:#faf5e4;}
.com-chip button{border:none;background:transparent;cursor:pointer;font-size:11px;padding:0 4px;}
.com-err{font-size:12.5px;font-weight:800;color:#a8271f;}

/* ══ SPEC §85 (2026-09-30) — APPOINTMENT FORM SETTINGS AS A POP-OUT (read until ✎ Edit) · C.O.M. LISTS EDIT · CPA TOUCHPOINT TRACKING ══ */
.appt-foot{display:flex;justify-content:flex-end;padding:12px 18px 16px;}
.appt-set-head{display:flex;align-items:center;gap:10px;padding-right:64px;}
.appt-set-edit{margin-left:auto;}
.appt-set-edit[hidden]{display:none;}
.appt-lock{display:block;margin-top:5px;font-size:11.5px;opacity:.75;}
.appt-lock[hidden]{display:none;}
#appt-settings input[readonly],#appt-settings textarea[readonly]{background:#f3f1ec;cursor:default;}
.appt-set-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1.5px dashed var(--text);}
.appt-set-foot[hidden],.appt-vtools[hidden]{display:none;}
.appt-vnote{margin:6px 0 4px;font-size:12px;}
.appt-bg-msg{font-weight:800;}
.com-manage-h{display:inline-flex;align-items:center;gap:10px;width:calc(100% - 22px);vertical-align:middle;}
.com-manage-h .btn{margin-left:auto;}
.com-x{border:1.5px solid #dc2626;background:#fff;color:#dc2626;border-radius:50%;width:24px;height:24px;line-height:18px;font-weight:800;cursor:pointer;padding:0;flex:none;}
.com-x:hover{background:#fdecec;}
.com-lists-foot{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:10px;}
.cpa-track{border:2px solid var(--text);border-radius:16px;padding:12px 14px;margin-bottom:16px;background:#faf5e4;}
.cpa-track-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:800;font-size:15px;margin-bottom:10px;}
.cpa-track-h small{font-weight:600;opacity:.7;font-size:12px;}
.cpa-track-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
@media (max-width:900px){ .cpa-track-g{grid-template-columns:repeat(2,minmax(0,1fr));} }
.cpa-track-i{border:1.5px solid var(--text);border-radius:12px;background:#fff;padding:9px 10px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.cpa-track-i b{font-size:22px;line-height:1;}
.cpa-track-i span{font-weight:800;font-size:12.5px;}
.cpa-track-i small{font-size:11px;opacity:.75;line-height:1.3;}
.cpa-track-i button{margin-top:auto;align-self:flex-start;font-size:11px;padding:3px 10px;}

/* ══ SPEC §87 (2026-10-01) — THE CODE'S LAST FOUR · THE TIME WHEEL · GHOSTED + COLOURED ANSWERS · WALK-IN · THE GLOVE ·
      ARRIVING / PICKUP TIME · SELECTING PURCHASED PETS FOR APPOINTMENT · JOURNEY'S PROOF PHOTO · DELEGATE ══ */
.appt-c4{font-size:11px;font-weight:800;letter-spacing:.08em;color:#121212;}
.carm-head{display:flex;align-items:center;gap:10px;}
.carm-count{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;}   /* SPEC §186 */
.carm-count .carm-count-done{opacity:.6;}
.carm-walkin{margin-left:auto;background:#ede9fe;color:#5b21b6;border:2px solid #5b21b6;font-weight:800;}
.carm-walkin:hover{filter:brightness(.96);}
/* Arrived · Canceled · Rescheduled · Ghosted — the Dashboard menu's pills (.dash-menu button): a pale ground, its own deep colour, a soft
   shadow; the chosen one is ringed, the others stand back */
.appt-st-btns{gap:9px;}
.appt-st-btn{font:inherit;font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer;padding:7px 16px;border:2px solid var(--text);border-radius:181px;
  background:var(--dm-bg,#fff);color:var(--dm-fg,var(--text));box-shadow:var(--shadow-sm);transition:transform .12s,filter .12s,opacity .12s;}
.appt-st-btn:hover{filter:brightness(.96);transform:translateY(-1px);}
.appt-st-btn-arrived{--dm-bg:#d1fae5;--dm-fg:#065f46;}
.appt-st-btn-canceled{--dm-bg:#fee2e2;--dm-fg:#991b1b;}
.appt-st-btn-rescheduled{--dm-bg:#dbeafe;--dm-fg:#1e40af;}
.appt-st-btn-no_show{--dm-bg:#fef3c7;--dm-fg:#854d0e;}
.appt-st-btn.on{outline:3px solid var(--dm-fg);outline-offset:2px;}
.appt-st-btn.off{opacity:.45;}
.appt-status-no_show{color:#854d0e;border-color:#854d0e;}
/* the wheel: hour · minute · AM/PM. ⛔ 36px is TMW_ROW in srr.js — the two move together */
.tm-wheel{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;height:108px;border:2px solid var(--text);border-radius:12px;background:#fff;overflow:hidden;}
.tm-wheel::before{content:"";position:absolute;left:5px;right:5px;top:36px;height:36px;border-radius:8px;background:var(--accent-2);pointer-events:none;}
.tm-col{position:relative;height:108px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;text-align:center;}
.tm-col::-webkit-scrollbar{display:none;}
.tm-col::before,.tm-col::after{content:"";display:block;height:36px;}
.tm-col div{height:36px;line-height:36px;scroll-snap-align:center;font-size:16px;font-weight:800;opacity:.3;cursor:pointer;user-select:none;-webkit-user-select:none;}
.tm-col div.on{opacity:1;}
.tm-col:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:10px;}
/* the glove: one row tall, on the card's left frame, level with the name it points at, never over it (the card makes room) */
.gl-on{position:relative;}
.groom-appt.gl-on{padding-left:19px;overflow:visible;}
.glove-ptr{position:absolute;left:-10px;top:50%;width:22px;height:16.5px;color:var(--accent);pointer-events:none;z-index:3;transform:translateY(-50%);
  animation:gloveFlutter .85s ease-in-out infinite;}
/* SPEC §120: the boarding guest cell keeps its details where every other row has them — the glove stands on the box's left line
   (glovePlace hangs it on .board-wrap, which the board's own rounded frame does not clip) */
.board-wrap{position:relative;}
.glove-ptr svg{display:block;width:100%;height:100%;overflow:visible;}
@keyframes gloveFlutter{0%,100%{transform:translate(0,-50%) rotate(0deg);}50%{transform:translate(3px,-50%) rotate(-5deg);}}
@media (prefers-reduced-motion:reduce){.glove-ptr{animation:none;}}
/* Add grooming session: Date · Arriving Time (half) · Duration · Pickup Time (half, worked out) */
.gs-when{grid-template-columns:1.3fr .5fr 1fr .5fr;}
@media (max-width:640px){ .gs-when{grid-template-columns:1fr 1fr;} }
.gs-when select,.gs-when input{min-width:0;width:100%;}
#gs-pickup{background:#f3f1ec;font-weight:800;cursor:default;}
/* SELECTING PURCHASED PETS FOR APPOINTMENT: the red frame round the screen, the bar under the top row */
#aps-frame{position:fixed;inset:0;z-index:9400;pointer-events:none;border:7px solid #dc2626;animation:apsFrame 1s ease-in-out infinite;}
@keyframes apsFrame{0%,100%{border-color:#dc2626;box-shadow:inset 0 0 26px rgba(220,38,38,.55);}50%{border-color:rgba(220,38,38,.12);box-shadow:inset 0 0 0 rgba(220,38,38,0);}}
#aps-bar{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:4500;width:min(620px,calc(100vw - 40px));max-height:calc(100vh - 110px);overflow:auto;
  background:#fff;border:3px solid #dc2626;border-radius:16px;box-shadow:rgba(0,0,0,.25) 6px 6px 0 0;padding:10px 14px 12px;text-align:center;}
.aps-title{font-weight:900;font-size:15px;letter-spacing:.04em;color:#b91c1c;}
.aps-for{margin-top:4px;font-size:13px;font-weight:800;}
.aps-p{color:#5b21b6;font-weight:800;}
.aps-o{color:#c2410c;font-weight:800;}
.aps-hint{margin-top:8px;font-size:12.5px;opacity:.8;}
.aps-list{margin-top:8px;display:flex;flex-direction:column;gap:5px;text-align:left;}
.aps-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;border:1.5px solid #5b21b6;border-radius:10px;padding:5px 9px;background:#f5f3ff;}
.aps-row.aps-old{opacity:.7;}
.aps-row small{font-weight:600;opacity:.75;}
.aps-sum{text-align:right;font-size:13px;color:#5b21b6;font-weight:700;}
.aps-acts{margin-top:10px;display:flex;justify-content:center;gap:10px;}
.aps-ask{font-weight:800;font-size:14px;line-height:1.6;}
.aps-ask-note{font-size:12px;opacity:.8;margin:8px 0 0;}
.fam-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #5b21b6;color:#5b21b6;
  background:#fff;font-size:11px;font-weight:900;line-height:1;}
body.aps-on #ph-f-all,body.aps-on #ph-f-sold,body.aps-on #ph-f-homed{background:#111 !important;color:#4b4b4b !important;border-color:#111 !important;
  box-shadow:none !important;pointer-events:none;animation:none !important;}
body.aps-on #ph-f-available{pointer-events:none;}
body.aps-on #ph-s-mine{opacity:.35;pointer-events:none;}
/* a chosen tile: its frame flashes purple; with Pending Update's red on it too, the two take turns */
.pet-card.pet-appt-pick{border:2px solid #7c3aed !important;animation:apsPulse 1.15s ease-in-out infinite;}
@keyframes apsPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.6);}50%{box-shadow:0 0 0 7px rgba(124,58,237,0);}}
/* ponytail: two colours take turns today (red, purple); a third flashing colour = one more step in this one keyframe block */
.pet-card.pet-pending.pet-appt-pick,.pet-card.vacc-due.pet-appt-pick{border:2px solid var(--text) !important;animation:apsTurns 2.3s linear infinite;}
@keyframes apsTurns{
  0%{box-shadow:0 0 0 3px #d92d20,0 0 0 3px rgba(217,45,32,.5);} 25%{box-shadow:0 0 0 3px #d92d20,0 0 0 10px rgba(217,45,32,0);}
  49.9%{box-shadow:0 0 0 3px #d92d20,0 0 0 3px rgba(217,45,32,0);}
  50%{box-shadow:0 0 0 3px #7c3aed,0 0 0 3px rgba(124,58,237,.5);} 75%{box-shadow:0 0 0 3px #7c3aed,0 0 0 10px rgba(124,58,237,0);}
  100%{box-shadow:0 0 0 3px #7c3aed,0 0 0 3px rgba(124,58,237,0);}}
@media (prefers-reduced-motion:reduce){#aps-frame,.pet-card.pet-appt-pick,.m-appt-flash{animation:none !important;}
  .pet-card.pet-appt-pick{box-shadow:0 0 0 4px rgba(124,58,237,.45) !important;}}
.pet-appt-row{font-size:10.5px;line-height:1.4;margin:0 0 4px;overflow-wrap:anywhere;}
.pet-appt-row b{color:#5b21b6;font-size:9.5px;letter-spacing:.04em;}
/* the pet card pop-out: APPT. above the status pill, the family beside JOURNEY, its total under the price */
.m-status-col{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.m-appt[hidden],.m-fam-total[hidden]{display:none;}
.m-appt-btn{display:inline-block;font:inherit;font-size:13px;font-weight:800;letter-spacing:.03em;padding:6px 16px;border-radius:181px;border:2px solid #5b21b6;
  background:#ede9fe;color:#5b21b6;box-shadow:var(--shadow-sm);max-width:340px;text-align:right;line-height:1.35;}
button.m-appt-btn{cursor:pointer;}
.m-appt-flash{animation:apptFlash .8s ease-in-out infinite;}
@keyframes apptFlash{0%,100%{background:#ede9fe;color:#5b21b6;box-shadow:0 0 0 0 rgba(124,58,237,.7);}50%{background:#7c3aed;color:#fff;box-shadow:0 0 0 7px rgba(124,58,237,0);}}
.m-appt-set{font-size:11.5px;background:#f5f3ff;box-shadow:none;}
.m-appt-pend{border-style:dashed;}
.m-price-col{display:flex;flex-direction:column;align-items:flex-end;}
.m-fam-total{font-size:12.5px;font-weight:800;color:#5b21b6;}
.m-fam{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fam-chip{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;padding:0;cursor:pointer;font:inherit;}
.rep-proof-t{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px;}
/* DAILIES → Delegate (SPEC §88): the orange-yellow button beside the DAILIES title — only for whoever is off tomorrow; it opens the
   pop-out of their tasks that day, a colleague chosen for each */
.dlp-task .dlp-when{opacity:.7;font-size:11.5px;}
.dlg-btn{font:inherit;font-size:12px;font-weight:800;padding:5px 14px;border-radius:181px;border:2px solid #92400e;background:#fbbf24;color:#3b2a00;cursor:pointer;
  box-shadow:var(--shadow-sm);}
.dlg-btn:hover{filter:brightness(.96);}
.dl-dlg-btn{font-size:10px;font-weight:900;letter-spacing:.06em;padding:2px 9px;margin-right:8px;vertical-align:middle;box-shadow:none;}
.watchdog.wd-tab:not(.wd-open) .dl-dlg-btn{margin:0 0 6px;padding:8px 2px;}
.dlg-chip{font-size:11.5px;font-weight:700;border:1.5px solid #92400e;background:#fef3c7;color:#713f12;border-radius:181px;padding:2px 10px;display:inline-flex;align-items:center;gap:5px;}
.dlgp-days{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.dlgp-list{display:grid;gap:8px;max-height:min(52vh,460px);overflow-y:auto;padding-right:4px;}
.dlgp-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:center;padding:9px 12px;border:1.5px solid var(--text);border-radius:12px;font-size:12.5px;}
.dlgp-t{display:grid;min-width:0;}
.dlgp-t small{font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.6;}
.dlgp-row select{width:100%;min-width:0;}
/* SPEC §108: what the system already holds for that task on the day off; red while it has work and no colleague yet */
.dlgp-x{font-size:11px;font-weight:600;opacity:.8;margin-top:2px;}
.dlgp-row.dlgp-owe{border-color:#c1272d;}
.dlgp-row.dlgp-owe .dlgp-x{color:#c1272d;opacity:1;font-weight:800;}
@media (max-width:560px){ .dlgp-row{grid-template-columns:minmax(0,1fr);} }
.dlg-msg{margin:10px 0 0;font-size:12px;font-weight:800;color:#a8271f;}
.aps-linked{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.aps-linked-pet{display:flex;align-items:center;gap:8px;text-align:left;font:inherit;font-size:13px;font-weight:700;border:1.5px solid #5b21b6;border-radius:10px;
  padding:6px 10px;background:#f5f3ff;cursor:pointer;}

/* ══ SPEC §93 (OMAN 2026-10-02) ═══════════════════════════════════════════════════════════════════════════════════
   Customer Acquisition List: every row is its own grid, so `auto` tracks made each row's columns start somewhere else. Fixed
   tracks — the Breed and "Where did you see us" columns start on one line all the way down. */
.carm-row{grid-template-columns:112px minmax(140px,1.1fr) minmax(170px,1.7fr) minmax(130px,1.1fr) 82px 104px;}
.carm-row .crm-by{overflow:hidden;text-overflow:ellipsis;}
.carm-row .crm-owe-cell{display:flex;justify-content:flex-end;}
@media (max-width:760px){.carm-row{grid-template-columns:1fr 1fr;}}
.crm-pill-others{background:#ede9fe;}
/* Expenses Photo: the words sit in the middle of their box */
.petty-ph span{display:block;width:100%;text-align:center;line-height:1.25;padding:0 4px;}
/* PLAYBOOK's bookmarks (the SAFE) — My Book's tabs, on the PLAYBOOK's cover */
.pb-mark-book{background:#fde68a;}
.pb-mark-safe{background:#d1fae5;}
.pb-mark-book.on,.pb-mark-safe.on{background:#f489a3;}
.pb-safe-note{font-size:11.5px;text-align:center;opacity:.75;margin:-8px 0 12px;}
/* the PLAYBOOK is 1300 px wide — tabs on its side would hang off the screen, so its bookmarks stand on its top edge */
#pb-marks{right:auto;left:54px;top:-33px;flex-direction:row;align-items:flex-end;gap:8px;}
#pb-marks .mb-mark{min-width:0;padding:6px 18px 7px;border:3px solid #121212;border-bottom:none;border-radius:14px 14px 0 0;}
#pb-marks .mb-mark.on{transform:translateY(-5px);}
@media (max-width:700px){#pb-marks{position:static;margin:0 0 6px 10px;}}
/* ── ➕ Add Pet: Upcoming Pet · Unregistered Pet · what the breed sold for (SPEC §94) ── */
.upet-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.upet-lbl{font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;}
.upet-list{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1;min-width:0;}
.upet-none{font-size:11.5px;opacity:.55;}
.upet-none.upet-bad{opacity:1;color:#a8271f;font-weight:700;}
.upet-box,.upet-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 12px;border:2px solid var(--text);border-radius:12px;background:var(--card-bg);color:var(--text);font:inherit;font-size:12px;line-height:1.3;cursor:pointer;text-align:left;}
.upet-box b{font-size:13px;}
.upet-box.due{background:#fff3cd;border-color:#b7791f;animation:srr-post-breathe 1.5s ease-in-out infinite;}
.upet-chip{font-weight:800;}
.upet-chip small{font-weight:600;font-size:10.5px;opacity:.6;}
.upet-chip.held{opacity:.5;border-style:dashed;}
.upet-claim{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px;padding:8px 12px;border:2px solid #1f8f5f;border-radius:12px;background:#eaf7f0;font-size:12.5px;}
.upet-claim[hidden]{display:none;}
/* SPEC §98: the breed's sold prices at the right end of the "Basic information" row — High green · Avr black · Low red */
.upet-sdiv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.upet-guide{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;font-size:12px;font-weight:800;letter-spacing:0;text-transform:none;white-space:nowrap;}
.upet-ghi{color:#1f7a3d;}
.upet-gav{color:#121212;}
.upet-glo{color:#c0271f;}
.upet-gnote{font-weight:600;opacity:.6;}
.upet-gnote.upet-bad{opacity:1;color:#a8271f;}
/* SPEC §98: ADOPTION / R.I.P — an oval pill down the LEFT side of the pet's photo, read from the bottom up; and the two marks.
   The flower is black everywhere: it carries its own white disc, so it shows on the dark R.I.P pill too. */
.pc-mark{position:absolute;left:6px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:5px;pointer-events:none;}
.pc-mark-p{writing-mode:vertical-rl;transform:rotate(180deg);display:inline-flex;align-items:center;gap:3px;background:#fff;color:#121212;
  border:1.5px solid #121212;border-radius:999px;padding:8px 2.5px;font-size:9px;font-weight:900;letter-spacing:.06em;line-height:1;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.22);}
.pc-mark-adopt{border-color:#e11d48;}
.pc-mark-p svg{transform:rotate(90deg);}
#m-imgwrap .pc-mark{left:12px;gap:8px;}
#m-imgwrap .pc-mark-p{font-size:13px;padding:12px 4px;border-width:2px;gap:5px;}
.ico-rip,.ico-adopt{display:inline-block;vertical-align:-.15em;flex:none;}
.ico-rip{color:#121212;background:#fff;border-radius:50%;}
.rep-mark{display:inline-flex;align-items:center;gap:5px;}
.rep-mark svg{font-size:1.25em;}
.upet-line{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.upet-line .upet-b{flex:1;min-width:0;}
.upet-line .upet-q{width:90px;flex:none;}
.upet-line .upet-g{width:130px;flex:none;}
.upet-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:16px;}
.upet-msg{font-size:12px;font-weight:700;color:#a8271f;margin-top:10px;min-height:16px;}
.upet-hint{font-size:12px;opacity:.65;margin:0 0 10px;}
/* SPEC §118 (OMAN 2026-10-05): Category › Pet on one row above the trips (the box a third wide, its note behind it) · "New Pet
   Schedule" with New Pet Log at its right end · the CPV test in the arriving pop-out · the log · Pet Home's employee pills */
.ap-lvcat-row{display:flex;flex:1;min-width:0;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600;}   /* fills the row beside "Category" — the box's third is a third of THAT */
.ap-lvcat-row .fl{margin:0;white-space:nowrap;opacity:1;}
.ap-lvcat-row select{flex:0 0 33%;width:33%;min-width:120px;padding:6px;}
.ap-lvcat-note{flex:1;min-width:160px;font-size:10.5px;font-weight:600;opacity:.65;}
.ap-lvcat .ap-lvcat-note{opacity:.65;}
.upet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px;}
.upet-cpv{min-height:64px;}
.upet-cpv img{max-height:140px;}
.upet-cpv-res{display:flex;gap:10px;margin-top:8px;}
.upet-res{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:9px 12px;border:2px solid var(--text);border-radius:12px;font:inherit;font-size:13px;font-weight:900;color:#fff;cursor:pointer;opacity:.4;}
.upet-neg{background:#1f8f5f;}
.upet-pos{background:#c0271f;}
.upet-res.on{opacity:1;box-shadow:0 0 0 3px rgba(18,18,18,.25);}
.upet-foot .btn:disabled{opacity:.4;cursor:not-allowed;}
.upet-post{position:relative;overflow:hidden;}
.upet-post input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.upet-logc{border:2px solid var(--text);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--card-bg);}
.upet-logh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px;}
.upet-logh span{flex:1;min-width:0;opacity:.75;}
.upet-st{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;padding:2px 10px;border-radius:999px;border:2px solid var(--text);}
.upet-st-arrived{background:#d1fae5;color:#065f46;}
.upet-st-cancelled{background:#fee2e2;color:#991b1b;}
.upet-st-upcoming{background:#fff3cd;color:#7a5200;}
.upet-story{margin:8px 0 0;padding:0;list-style:none;font-size:12.5px;line-height:1.5;}
.upet-story li{display:flex;gap:10px;}
.upet-story small{flex:0 0 78px;font-weight:800;opacity:.6;}
.upet-logcpv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed #b8b0a2;}
.upet-logl{font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;}
.upet-logcpv .upet-res{flex:none;cursor:default;padding:4px 12px;font-size:12px;}
.upet-logcpv img{max-height:96px;border-radius:8px;border:2px solid var(--text);display:block;}
.ph-whos{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
@media (max-width:900px){.ph-whos{justify-content:flex-start;}}

/* ══ SPEC §100 (OMAN 2026-10-02) ═════════════════════════════════════════════════════════════════════════════════════════
   (the flowers and eggs above a head, three times their size, are amended where they are defined — .mr-gifts) */
/* boarding: how many of the three belongings photos are in; how many of the four lockers are chosen */
.bk-ph-n{font-weight:800;opacity:.6;margin-left:4px;letter-spacing:0;}
.bdp-n{float:right;margin-right:8px;font-size:11px;font-weight:800;opacity:.65;}
.bdp-note{font-size:11px;opacity:.7;margin:-2px 0 8px;}
/* Responsibility: who carries a task, by name, in one row */
.resp-name small:empty{display:none;}
.resp-who{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.resp-who span{border:1.5px solid var(--text);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:800;line-height:1.5;background:var(--card-bg,#fff);white-space:nowrap;}
.resp-who .resp-who-more{opacity:.65;border-style:dashed;}
/* Organization Members Tree: the System Accounts stand under the lowest level, inside the tree's zone, joined to nobody */
.org-sa-zone{margin:26px 4px 2px;padding:10px 12px 12px;border:2px dashed rgba(0,0,0,.35);border-radius:14px;}
.org-sa-cap{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.org-sa-cap span{font-weight:700;opacity:.6;letter-spacing:0;text-transform:none;margin-left:6px;}
.org-sa-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
/* SPEC §102: the Alumni row under the System Accounts (the same zone, a line apart); a CMH alumni's badge; the Employee · Agent
   tabs above the title. ⛔ [hidden] HAS TO WIN OVER .btn (see #stk-banner above): Create Organization Account stayed on screen
   for an account without the permission because .btn's display:inline-flex beat the browser's [hidden]. */
.org-al-zone{margin-top:14px;}
.org-kind-al{background:#e5e7eb;color:#374151;}
.org-tabs{margin-bottom:12px;}
#org-create[hidden],#org-tabs[hidden]{display:none !important;}
/* SPEC §103: the empty accounts stand at the bottom LEFT of Members, above the System Accounts; the note on top of an empty account's editor */
.org-empty-zone{margin:22px 4px 0;}
.org-empty-row{justify-content:flex-start;}
.acc-vacant-note{border:2px solid var(--text);border-radius:10px;padding:8px 10px;background:#fff7e0;font-size:12px;line-height:1.45;}
/* JUJUBA MENU: nine tiles in the pet card's own frame, the ranking under them */
.jm-bar{margin-bottom:16px;}
.jm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:20px;}
.jm-wide{grid-column:1/-1;}
.jm-tile{margin-bottom:0;padding:14px 16px 12px;}
.jm-h{display:flex;align-items:flex-start;gap:10px;padding-bottom:9px;border-bottom:2px solid var(--text);}
.jm-ico{font-size:24px;line-height:1;}
.jm-h b{display:block;font-size:14.5px;font-weight:900;letter-spacing:.02em;}
.jm-h small{display:block;font-size:10.5px;opacity:.7;margin-top:2px;line-height:1.3;}
.jm-list{list-style:none;margin:0;padding:0;}
.jm-list li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(0,0,0,.15);font-size:12.5px;}
.jm-list li:last-child{border-bottom:none;}
.jm-n{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--text);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:900;}
.jm-list li:first-child .jm-n{background:var(--text);color:var(--card-bg,#fff);}
.jm-name{font-weight:800;min-width:0;overflow-wrap:anywhere;}
.jm-name small{display:block;font-size:10.5px;font-weight:600;opacity:.65;margin-top:1px;}
.jm-fig{font-size:12.5px;font-weight:900;white-space:nowrap;text-align:right;}
.jm-go{cursor:pointer;}
.jm-go:hover .jm-name{text-decoration:underline;}
.jm-none{font-size:12px;opacity:.55;margin:14px 0 6px;text-align:center;}
.jm-note{font-size:11.5px;font-weight:700;opacity:.75;}
.jm-rank{margin-bottom:30px;}
.jm-rank-n{font-size:12px;font-weight:800;opacity:.7;}
.jm-table-w{overflow-x:auto;padding:4px 16px 14px;}
.jm-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.jm-table th{font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:9px 8px;border-bottom:2px solid var(--text);white-space:nowrap;}
.jm-table td{padding:8px;border-bottom:1px dashed rgba(0,0,0,.15);}
.jm-table .jm-r{text-align:right;}
.jm-table td:nth-child(2){font-weight:800;}
.jm-rk{font-weight:900;opacity:.6;width:28px;}
.jm-up{color:#15803d;font-weight:900;}
.jm-down{color:#c81e2c;font-weight:900;}
.jm-flat{opacity:.45;}
@media (max-width:1100px){.jm-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:680px){.jm-grid{grid-template-columns:1fr;}}

/* ══ SPEC §109 — JUJU LOG: KPI ACHIEVEMENT · LEADER-APPRENTICESHIP · TASK · SKILL; the tree's Leader / Apprentice; the on-time thumb ══ */
.jl-sec{font-size:10px;font-weight:900;letter-spacing:.09em;margin:12px 0 5px;padding-top:8px;border-top:1.5px solid rgba(0,0,0,.14);}
.jl-kpi{display:flex;align-items:center;gap:8px;margin:5px 0;}
.jl-kpi-mo{flex:none;width:62px;font-size:10.5px;font-weight:800;opacity:.7;}
.jl-kpi-bar{position:relative;flex:1;min-width:0;height:22px;border:2px solid var(--text);border-radius:999px;background:var(--card-bg,#fff);overflow:hidden;}
/* MUSHROOM's own moving rainbow (.nav-rainbow), as a fill */
.jl-kpi-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background-image:linear-gradient(45deg,#ff3b6b,#ff9f1c,#ffd60a,#2ec46b,#2f8cff,#8a4dff,#ff3b6b,#ff9f1c,#ffd60a,#2ec46b,#2f8cff,#8a4dff,#ff3b6b);
  background-size:200% 200%;animation:nav-rainbow 3.6s linear infinite;}
.jl-kpi-pct{position:absolute;left:10px;top:0;line-height:18px;font-size:10.5px;font-weight:900;color:#111;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;white-space:nowrap;}
.jl-kpi-goal{flex:none;font-size:11px;font-weight:900;white-space:nowrap;}
.jl-kpi-none,.jl-la{font-size:11.5px;margin:2px 0;opacity:.8;}
.jl-la-r{color:#c0392b;opacity:1;}
.jl-skills{display:flex;flex-wrap:wrap;gap:6px;}
.jl-skill{font-size:10.5px;font-weight:800;border:1.5px dashed rgba(0,0,0,.35);border-radius:999px;padding:1px 9px;}
.jl-skill b{opacity:.5;}
/* SPEC §152: SKILL opens how each rate is worked out · Admin → Responsibility: DAILIES | WEEKLY */
.jl-skills-btn{cursor:pointer;align-items:center;}
.jl-skills-btn:hover .jl-skill,.jl-skills-btn:focus-visible .jl-skill{border-style:solid;}
.jl-skill-on{border-style:solid;border-color:var(--text);}
.jl-skill-on b{opacity:1;}
.jl-skill-caret{font-size:12px;font-weight:900;margin-left:2px;}
.jl-sk{margin:8px 0 4px;padding:10px 12px;border:2px solid var(--text);border-radius:12px;background:var(--card-bg,#fff);font-size:11.5px;}
.jl-sk-msg{margin:0 0 8px;line-height:1.45;}
.jl-sk-tbl{width:100%;border-collapse:collapse;margin:4px 0 10px;}
.jl-sk-tbl th,.jl-sk-tbl td{text-align:left;vertical-align:top;padding:5px 6px;border-bottom:1px dashed rgba(0,0,0,.2);}
.jl-sk-tbl thead th{font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.7;}
.jl-sk-tbl td small{display:block;opacity:.65;font-size:10px;margin-top:2px;}
.jl-sk-st{font-size:10px;font-weight:900;letter-spacing:.05em;white-space:nowrap;}
.jl-sk-ph{font-size:10px;font-weight:900;letter-spacing:.06em;margin:10px 0 6px;}
.jl-sk-line{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dotted rgba(0,0,0,.15);}
.jl-sk-line b{text-align:right;}
.jl-sk-weeks{display:flex;flex-wrap:wrap;gap:6px;}
.jl-sk-wk{border:1.5px solid var(--text);border-radius:999px;padding:2px 9px;font-size:10.5px;}
.jl-sk-below{background:#fbe3e0;border-color:#a8271f;color:#a8271f;}
.jl-sk-met{background:#e4f4e9;border-color:#1f7a3d;color:#1f7a3d;}
.jl-sk-open{border-style:dashed;}
@media (max-width:640px){.jl-sk-tbl thead{display:none;}.jl-sk-tbl tr,.jl-sk-tbl td,.jl-sk-tbl th{display:block;}.jl-sk-tbl td,.jl-sk-tbl th{border:0;padding:2px 4px;}.jl-sk-tbl tr{border-bottom:1.5px dashed rgba(0,0,0,.25);padding:4px 0;}.jl-sk-tbl td[data-l]::before{content:attr(data-l) ': ';font-size:10px;font-weight:800;opacity:.6;}}
.resp-tabs{display:flex;gap:6px;margin:0 0 10px;}
.resp-tab{font:inherit;font-size:12px;font-weight:900;letter-spacing:.05em;cursor:pointer;padding:6px 16px;border:2px solid var(--text);border-radius:10px;background:var(--card-bg,#fff);color:var(--text);}
.resp-tab.on{background:var(--text);color:var(--card-bg,#fff);}
.resp-tab small{opacity:.7;font-weight:700;}
.wk-resp-tag{font-size:10px;font-weight:900;letter-spacing:.06em;border:1.5px dashed var(--text);border-radius:6px;padding:2px 7px;align-self:flex-start;}
.wk-resp-note{font-size:11.5px;line-height:1.5;margin:8px 2px 2px;}
@media (prefers-reduced-motion:reduce){ .jl-kpi-fill{animation:none;} }
.org-la{font-size:9.5px;font-weight:900;line-height:1.2;color:#c0392b;margin-top:2px;}
.org-la-lead{position:absolute;top:100%;right:calc(50% + 6px);margin-top:1px;white-space:nowrap;}
.att-thumb{width:17px;height:17px;flex:none;vertical-align:-3px;}
.att-end{display:inline-flex;align-items:center;gap:5px;}

/* ══ SPEC §111 — CASE HUB · the booking codes · the Time Log ═══════════════════════════════════════════ OMAN 2026-10-04 */
.ch-logo{width:1.25em;height:1.25em;vertical-align:-.28em;flex:none;}
.btn-casehub{background:#eff6ff;color:#1d4ed8;border:2px solid #1d4ed8;box-shadow:var(--shadow-sm);}
.btn-casehub:hover{background:#dbeafe;}
.ci-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 17px;border-bottom:2px solid var(--text);}
.ci-word{font-size:15px;color:#1d4ed8;white-space:nowrap;}
.ci-st{display:inline-block;font-size:11.5px;font-weight:900;padding:3px 10px;border:2px solid;border-radius:999px;background:#fff;white-space:nowrap;}
.ci-no{font-size:13px;font-weight:900;letter-spacing:.04em;white-space:nowrap;}
.ci-by{font-size:12.5px;font-weight:800;}
.ci-by-lead{color:#c1272d;}
.ci-row1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px;}
.ci-lab{font-size:12px;font-weight:900;white-space:nowrap;}
.ci-in{flex:1 1 180px;min-width:0;font:inherit;font-size:13px;padding:7px 10px;border:2px solid var(--text);border-radius:10px;background:var(--bg,#fff);color:var(--text);}
.ci-in-cat{flex:0 1 170px;}
.ci-sec{font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;margin:12px 0 5px;}
.ci-box{border:2px solid var(--text);border-radius:14px;padding:8px;}
.ci-box .ci-text{border:0 !important;box-shadow:none !important;padding:6px 8px;}   /* the box is the frame: the theme's own textarea border is taken off inside it */
.ci-box-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 4px 0;}
.ci-attach{padding:5px 12px;font-size:11.5px;cursor:pointer;margin:0;}
.ci-box .ci-files{margin:8px 4px 2px;}
.ci-pop-card{background:#fff;color:#121212;border:2px solid #121212;border-radius:16px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:18px 20px;position:relative;}
.ci-pop-x{position:absolute;top:10px;right:12px;border:none;background:none;font-size:20px;cursor:pointer;min-height:0;}
.ci-pop-title{font-weight:900;font-size:15px;padding-right:30px;}
.ci-dir{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ci-pill{font-size:12px;font-weight:900;padding:3px 12px;border-radius:999px;background:#1d4ed8;color:#fff;}
.ci-pill-code{background:#fff;color:#1d4ed8;border:2px solid #1d4ed8;padding:1px 10px;}
.ci-dir-nm{font-size:12.5px;font-weight:700;}
.ci-kv{display:flex;gap:10px;font-size:13px;padding:3px 0;border-bottom:1px dashed rgba(0,0,0,.15);}
.ci-kv span{width:84px;flex:none;opacity:.7;}
.ci-rcs{display:flex;flex-wrap:wrap;gap:8px;}
.ci-rc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font:inherit;font-size:12px;text-align:left;padding:8px 12px;border:2px solid #121212;border-radius:12px;background:#f8fafc;cursor:pointer;min-height:0;}
.ci-rc:hover{background:#eff6ff;}
.ci-none{font-size:12px;opacity:.65;}
.bl-code{display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.05em;color:#1d4ed8;border:1.5px solid #1d4ed8;border-radius:999px;padding:0 7px;margin-top:3px;background:#fff;width:fit-content;}
.mb-mark-casehub{background:#bfdbfe;}
.mb-mark-casehub.on{background:#60a5fa;}
.ch-row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;width:100%;text-align:left;font:inherit;padding:9px 12px;margin-bottom:7px;border:2px solid #121212;border-radius:12px;background:#fff;cursor:pointer;min-height:0;color:#121212;}
.ch-row:hover{background:#eff6ff;}
.ch-row .ch-no{font-weight:900;font-size:12.5px;}
.ch-row .ch-sub{grid-column:1 / -1;font-size:11.5px;opacity:.75;}
.att-log-btn{margin-top:6px;}
.att-mode-row{flex-direction:column;align-items:flex-end;}
.atl-who{font-weight:900;font-size:13px;margin:12px 0 5px;}
.atl-days{display:flex;flex-wrap:wrap;gap:5px;}
.atl-day{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1.5px solid #9ca3af;background:#f3f4f6;color:#374151;}
.atl-day b{font-weight:900;}
.atl-day.ok{border-color:#1f7a3d;background:#e9f7ee;color:#14532d;}
.atl-day.bad{border-color:#c1272d;background:#fdecec;color:#7f1d1d;}
.atl-sum{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px;}
.atl-sum th,.atl-sum td{padding:5px 8px;border-bottom:1px solid rgba(0,0,0,.15);text-align:center;}
.atl-sum th:first-child,.atl-sum td:first-child{text-align:left;}
.atl-sum .bad{color:#c1272d;font-weight:900;}
.atl-nav{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-weight:900;}
.atl-key{font-size:11.5px;opacity:.8;margin:2px 0 8px;}

/* ══ SPEC §112 — CASE HUB's rounds and stages · Suggest · the owner's record-a-check-in ════════════════ OMAN 2026-10-05 */
.ci-round{border:2px dashed #9ca3af;border-radius:14px;padding:4px 12px 10px;margin:10px 0;background:rgba(0,0,0,.025);}
.ci-round-h{font-size:12px;font-weight:900;color:#c1272d;margin-top:8px;}
.ci-round-now{font-size:12px;font-weight:900;color:#1d4ed8;margin:12px 0 2px;}
.ci-ro{font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 11px;border:1.5px solid rgba(0,0,0,.25);border-radius:10px;background:#fff;color:#121212;}
.ci-ro-plain{border:none;background:none;padding:4px 6px;white-space:normal;color:inherit;}
.ci-returned{font-size:12.5px;padding:8px 12px;margin-top:12px;border:2px solid #c1272d;border-radius:10px;background:#fdecec;color:#7f1d1d;}
.ci-suggest-row{display:flex;justify-content:flex-end;margin-top:6px;}
.ci-sug-from{font-weight:700;text-transform:none;letter-spacing:0;opacity:.7;}
.ci-sug-text{font-size:13px;line-height:1.5;padding:4px 8px;user-select:text;-webkit-user-select:text;overflow-wrap:anywhere;}
.ci-sug-text p{margin:0 0 8px;}
.ci-sug-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;font:inherit;font-size:12.5px;padding:9px 12px;margin-top:8px;border:2px solid #121212;border-radius:12px;background:#f8fafc;color:#121212;cursor:pointer;min-height:0;}
.ci-sug-row:hover{background:#eff6ff;}
.ci-sug-meta{font-size:11px;font-weight:700;color:#1d4ed8;}
.ci-sug-q{opacity:.8;}
.ci-sug-a{border-left:3px solid #15803d;padding-left:8px;}
.atl-rec{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;}
.atl-rec select,.atl-rec input{width:auto !important;padding:5px 9px !important;font-size:12.5px;}

/* ══ SPEC §113 — Problem Solving (GOOD · MODERATE · BAD) and the approver's box ════════════════════════ OMAN 2026-10-05 */
.ci-appr{border:2px solid #1d4ed8;border-radius:14px;padding:6px 10px 10px;margin-top:14px;background:#f8fbff;}
.ci-appr-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.ci-rate{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ci-rate-b{display:inline-block;font:inherit;font-size:11.5px;font-weight:900;letter-spacing:.04em;padding:4px 13px;border-radius:999px;border:2px solid currentColor;background:#fff;cursor:pointer;min-height:0;line-height:1.3;box-shadow:none;}
span.ci-rate-b{cursor:default;padding:2px 10px;font-size:10.5px;}
.ci-rate-b.good{color:#15803d;} .ci-rate-b.good.on{background:#15803d;border-color:#15803d;color:#fff;}
.ci-rate-b.moderate{color:#d97706;} .ci-rate-b.moderate.on{background:#d97706;border-color:#d97706;color:#fff;}
.ci-rate-b.bad{color:#c1272d;} .ci-rate-b.bad.on{background:#c1272d;border-color:#c1272d;color:#fff;}
.ci-dec-sum{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px;}
.ci-dec-over{font-size:12px;font-weight:800;color:#15803d;}
.ci-dec-over.bad{color:#c1272d;}
.ci-dec{font-size:12.5px;padding:6px 0;border-top:1px dashed rgba(0,0,0,.2);}
.ci-dec .ci-ro{margin-top:5px;}
.ci-dec-by{opacity:.7;font-size:11.5px;}
/* SPEC §113: the old Client issue box was 300px tall by a min-height every case box inherited — so §111's "reduce the Issue Description by
   half in height" never showed (rows=8 was overruled), and every other box was as tall. Each box is given its own height. */
#ci-text{min-height:150px;}
#ci-inv,#ci-best{min-height:110px;}
#ci-key,#ci-feedback{min-height:72px;}

/* ══ SPEC §114 (OMAN 2026-10-05) — CUSTOMER OUTREACH ON THE PAGE · A PAGE'S URL AND EMPLOYEE · DUPLICATED · BI-WEEKLY DAYS ══ */
.outreach-frame .carm-body{padding-top:14px;}
.com-pageurl{display:block;border:2px solid var(--text);border-radius:10px;padding:7px 10px;font-size:12.5px;font-weight:700;background:#eef6ff;color:#1e40af;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;}
.com-pageurl-none{background:#f3f1ec;color:inherit;opacity:.6;text-decoration:none;font-weight:400;}
.com-pages{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.com-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.7fr) auto;gap:8px;align-items:center;font-size:12.5px;}   /* SPEC §116: room for several employees */
.com-page input,.com-page select{min-width:0;width:100%;padding:5px 9px;font-size:12.5px;}
.com-page a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e40af;}
.com-page-none{opacity:.5;}
.com-page-who{font-weight:800;white-space:nowrap;}
.com-page-new{margin-top:4px;padding-top:6px;border-top:1.5px dashed #d8d0c2;}
@media (max-width:760px){ .com-page{grid-template-columns:minmax(0,1fr);} }
.com-thumb small{font-size:9.5px;line-height:1.2;text-align:center;opacity:.6;}
/* Duplicated: the To send button's shape, in amber */
.carm-dup{border-color:#b45309;color:#b45309;margin-right:auto;}   /* right next to the title: the row's free space goes after it */
.carm-dup.on{background:#b45309;color:#fff;}
.crm-dup-tag{background:#b45309;margin-left:4px;}
/* Admin → Responsibility: BI-WEEKLY — two rows of weekday toggles */
.resp-rota{flex:1 1 320px;min-width:260px;}
.resp-wk{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:4px;}
.resp-wk-l{font-size:10.5px;font-weight:900;min-width:50px;}
.resp-wd{font:inherit;font-size:11px;font-weight:800;padding:3px 8px;border:2px solid var(--text);border-radius:999px;background:var(--card-bg,#fff);color:var(--text);cursor:pointer;}
.resp-wd.on{background:var(--accent);}
.resp-wd:disabled{cursor:default;opacity:.55;}
.resp-wd.on:disabled{opacity:1;}
.resp-rota-who{display:block;font-size:10.5px;opacity:.7;margin-top:2px;}
.resp-wk-auto{font-size:10px;opacity:.6;margin-left:4px;}   /* SPEC §119: a posting task's Week 2 is filled by itself */
/* ══ SPEC §115 (OMAN 2026-10-05) — THE CUSTOMER CARD: ITS PEN, ITS WHOLE EMPLOYEE PILL ══ */
/* the pill is its own box now: the cell used to cut an inline pill at the line's height, taking the oval's top and bottom */
.carm-row{position:relative;padding-right:42px;}
.carm-row .crm-by{overflow:visible;min-width:0;display:flex;align-items:center;}
.carm-by-pill{display:inline-block;box-sizing:border-box;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1.5px solid var(--text);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:800;line-height:1.35;}
.carm-row-pen{position:absolute;top:6px;right:8px;width:25px;height:25px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--text);border-radius:50%;background:#fff;color:var(--text);font:inherit;font-size:12.5px;line-height:1;cursor:pointer;}
.carm-row-pen:hover{background:var(--accent-2);}
.carm-row.carm-editing{box-shadow:0 0 0 3px #1e40af;}
.carm-editing-note{margin-top:10px;border:2px solid #1e40af;border-radius:10px;background:#eef6ff;color:#1e40af;padding:7px 11px;font-size:12.5px;font-weight:800;}
.carm-editing-note[hidden]{display:none;}
/* ══ SPEC §116 (OMAN 2026-10-05) — A PAGE'S EMPLOYEES: PILLS TAPPED IN TURN ORDER ══ */
.com-emps{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0;}
.com-emp{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;font-weight:800;padding:3px 9px;border:1.5px solid var(--text);border-radius:999px;
  background:#fff;color:var(--text);cursor:pointer;white-space:nowrap;}
.com-emp.on{background:var(--accent);}
.com-emp b{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:50%;background:var(--text);color:#fff;font-size:10px;}
.com-emp-off{background:#fde68a !important;white-space:normal;text-align:left;}
.com-emp-v{cursor:default;margin-right:4px;}
.com-page-who{white-space:normal;}
.com-emp-hint{font-size:11.5px;opacity:.75;margin:10px 0 0;}
/* ══ SPEC §119 (OMAN 2026-10-06) — MAIN PAGE · SUB PAGE: TWO BOXES, THEIR NUMBER, A PAGE'S POSTS, THE GRIP ══ */
.com-grp{border:1.5px dashed #c9bfae;border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;gap:6px;}
.com-grp-h{display:flex;align-items:center;gap:7px;font-size:11.5px;}
.com-grp-h b{font-weight:900;letter-spacing:.03em;text-transform:uppercase;}
.com-grp-h small{opacity:.65;}
.com-min,.com-need{width:52px;min-width:0;padding:3px 6px;font:inherit;font-size:12px;font-weight:800;text-align:center;border:2px solid var(--text);border-radius:8px;}
.com-min-v{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--text);color:#fff;font-size:11px;font-weight:900;}
.com-grp-empty{font-size:11.5px;opacity:.5;padding:2px 0;}
.com-page.com-page-ed{grid-template-columns:auto 52px minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1.7fr) auto auto;}
.com-page.com-page-ed .com-need{width:100%;}
.com-grip{cursor:grab;font-size:15px;line-height:1;padding:2px 3px;user-select:none;opacity:.6;}
.com-grip:active{cursor:grabbing;}
.com-x.com-move{border-color:var(--text);color:var(--text);}   /* ⇅ moves, it does not remove: not the ✕'s red */
.com-x.com-move:hover{background:var(--accent-2);}
@media (max-width:760px){ .com-page.com-page-ed{grid-template-columns:auto 52px minmax(0,1fr) auto auto;} .com-page.com-page-ed .com-emps,.com-page.com-page-ed input[inputmode="url"]{grid-column:1 / -1;} }

/* ══ SPEC §122 (OMAN 2026-10-07) — AN ANSWER'S QUESTION · DELEGATED by … · TAKE TURN ══════════════════════════════════
   The question a status button asks (Extended and Delayed carry their date and time in it), the tag a booking wears when
   today's work on it was handed over, and the "Who does it" switch of a task in Admin → Responsibility. */
.svc-act-msg{margin-bottom:12px;line-height:1.45;}
.svc-act-when{display:flex;gap:12px;flex-wrap:wrap;}
.svc-act-when label{flex:1 1 150px;display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.svc-act-when input,.svc-act-when select{padding:9px 10px;border:2px solid var(--text);border-radius:9px;background:var(--card-bg);color:var(--text);font:inherit;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;}
.svc-deleg{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;background:#fff3cd;border:1.5px solid #8a5208;color:#8a5208;font-size:10px;font-weight:900;letter-spacing:.03em;line-height:1.5;white-space:nowrap;
  max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:top;}   /* SPEC §182: a whole oval, never wider than its card (svcDelegFit shrinks the words first) */
#bd-pic .svc-deleg,#gs-pic .svc-deleg{align-self:center;margin-top:0;}   /* beside the names: a pill, not a box stretched to their height */
.resp-turn-fg{min-width:190px;}
.resp-turn-who{display:block;margin-top:4px;font-size:10.5px;opacity:.75;}
.upet-turn{display:block;font-size:10px;opacity:.8;}

/* ══ SPEC §125 (2026-10-08) — OUTREACH LIST: TODAY · SEE ALL · DUPLICATED · FOLD · MAIN / SUB · THE STAR · "STAFF NAME" · DELEGATE BY CATEGORY · RESPONSIBILITY PILLS · THE KPI BAR IS A BUTTON ══ */
/* the title row: Outreach List · See All right next to it · Duplicated (n) at the right end; the words that stood there, a row below */
.com-list-head{justify-content:flex-start;align-items:center;margin-bottom:6px;}
.com-dup{margin-left:auto;border-color:#b45309;color:#b45309;}
.com-dup.on{background:#b45309;color:#fff;}
.com-list-note{margin:0 0 12px;font-size:11.5px;opacity:.72;}
.com-list-note b{opacity:1;color:#b45309;}
/* a name or a platform is a button: a tap folds its part */
.com-fold{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;border-radius:999px;}
.com-fold>span:not(.com-pill){font-size:11px;font-weight:700;opacity:.65;}
.com-fold>i{font-style:normal;font-size:11px;opacity:.6;}
.com-fold:focus-visible{outline:2px solid var(--text);outline-offset:3px;}
.com-fold[aria-expanded="false"]>.com-pill{opacity:.55;}
/* Main Page / Sub Page on a post */
.com-grp-tag{display:inline-block;border:1.5px solid var(--text);border-radius:999px;padding:0 8px;font-size:10px;font-weight:900;letter-spacing:.03em;line-height:1.5;background:#fff;vertical-align:middle;}
.com-grp-tag.com-grp-main{background:var(--text);color:#fff;}
/* the photo left the store a month after the post: a star in the middle of its frame */
.com-star{font-size:30px;line-height:1;color:#d4a017;}
/* "Staff Name": locked, the account's pill and whoever handed it a posting task */
.com-staff{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:38px;padding:4px 9px;border:2px solid var(--text);border-radius:10px;background:#f3f1ec;cursor:not-allowed;}
.com-staff-by{font-size:10.5px;font-weight:800;letter-spacing:.02em;opacity:.75;white-space:nowrap;}
/* See All */
.com-all{display:flex;flex-direction:column;gap:8px;min-width:0;}
.com-all-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr);align-items:center;gap:10px;position:sticky;top:0;z-index:4;background:var(--card-bg,#fff);padding:4px 0 8px;border-bottom:2px solid var(--text);}
.com-all-day{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;justify-self:start;}
.com-all-day input{padding:5px 8px;font-size:12.5px;}
#com-all-q{width:100%;padding:8px 14px;font-size:13.5px;border:2px solid var(--text);border-radius:999px;}
.com-all-bar>.btn{justify-self:end;}
.com-all-msg{margin:0;min-height:0;font-size:12px;font-weight:800;}
.com-all-msg:empty{display:none;}
.com-all-n{display:flex;align-items:center;gap:10px;font-size:11.5px;margin:2px 0 8px;}
.com-all-n>span{opacity:.72;}
.com-all-none{font-size:12.5px;opacity:.7;}
.com-list.com-list-all{max-height:none;overflow:visible;padding-right:0;}
.com-list-all .com-day-h{position:static;}
@media (max-width:620px){ .com-all-bar{grid-template-columns:minmax(0,1fr);} .com-all-bar>.btn,.com-all-day{justify-self:stretch;} }
/* Delegate: one box for a whole category */
.dlgp-cat{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:center;padding:7px 12px;border-radius:12px;background:var(--text);color:var(--card-bg,#fff);font-size:12px;margin-top:4px;}
.dlgp-cat b{letter-spacing:.05em;}
.dlgp-cat select{width:100%;min-width:0;}
@media (max-width:560px){ .dlgp-cat{grid-template-columns:minmax(0,1fr);} }
/* Admin → Responsibility: a pill for every category, under the Admin bar while the list scrolls */
/* SPEC §158 (OMAN 2026-10-17): the category pills enclosed in ONE bigger oval, as Admin's own tabs (Organization · About Me …) */
.resp-jump{position:sticky;top:50px;z-index:19;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:6px;
  margin:0 0 14px;padding:6px 7px;background:var(--card-bg,#fff);border:2px solid #000;border-radius:999px;}
.resp-jump button{flex:0 0 auto;}
.resp-jump button{font:inherit;font-size:11px;font-weight:900;letter-spacing:.04em;white-space:nowrap;cursor:pointer;padding:4px 12px;border:2px solid var(--text);border-radius:999px;background:var(--card-bg,#fff);color:var(--text);}
.resp-jump button:hover,.resp-jump button:focus-visible{background:var(--text);color:var(--card-bg,#fff);}
#sec-admin .resp-cat-sec{scroll-margin-top:150px;}
/* JUJU LOG: the rainbow bar opens the month's commission breakdown */
.jl-kpi-bar[role="button"]{cursor:pointer;}
.jl-kpi-bar[role="button"]:hover,.jl-kpi-bar[role="button"]:focus-visible{box-shadow:0 0 0 2px var(--text);outline:none;}

/* ══ SPEC §128 — PLACEHOLDER ACCOUNTS ═══════════════════════════════════════════════════════════════ OMAN 2026-10-09 */
/* "Who are you with?" — over the Receipt Zone (1500) and the agreement (7000); under the console's own questions (9500) */
.pla-ov{position:fixed;inset:0;z-index:9000;background:rgba(18,18,18,.55);display:flex;align-items:center;justify-content:center;padding:16px;}
.pla-ov[hidden]{display:none;}
.pla-card{position:relative;width:min(520px,100%);background:var(--card-bg,#fff);color:var(--text,#121212);border:2px solid var(--text,#121212);border-radius:18px;padding:24px 20px 20px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35);}
.pla-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:inherit;padding:8px;}
.pla-q{font-size:21px;font-weight:900;margin:0 0 4px;}
.pla-sub{font-size:11.5px;opacity:.7;margin:0 0 16px;line-height:1.45;}
.pla-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.pla-pill{border:2px solid #121212;border-radius:999px;padding:9px 22px;font-size:14px;font-weight:800;cursor:pointer;background:#fff;color:#121212;min-height:44px;white-space:nowrap;}
.pla-pill.pla-none{background:#c62828;border-color:#c62828;color:#fff;letter-spacing:.06em;}
.pla-pill.pla-back{background:transparent;color:inherit;border-color:currentColor;}
.pla-none-yet{font-size:12px;opacity:.65;align-self:center;}
/* the Placeholder a sale came through, behind the Position's name */
.pla-via{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:#e9e9e9;border:1.5px solid #6b6b6b;color:#3d3d3d;font-size:10px;font-weight:900;line-height:1.5;white-space:nowrap;vertical-align:middle;}
/* the pen: Employee | Placeholder, top right */
.acc-kind{display:flex;flex-wrap:wrap;justify-content:flex-end;margin:-2px 0 2px;}
.acc-kind-b{border:1.5px solid var(--text,#121212);background:transparent;color:inherit;padding:4px 13px;font-size:11.5px;font-weight:800;cursor:pointer;min-height:28px;}
.acc-kind-b:first-of-type{border-radius:999px 0 0 999px;border-right:0;}
.acc-kind-b:last-of-type{border-radius:0 999px 999px 0;}
.acc-kind-b.on{background:var(--text,#121212);color:var(--card-bg,#fff);}
.acc-kind-note{flex-basis:100%;text-align:right;font-size:10.5px;opacity:.75;margin-top:4px;}
.acc-kind-note[hidden],.acc-req-ph[hidden]{display:none;}
.acc-pos-clash{display:block;font-size:10.5px;color:#a8271f;font-weight:700;margin-top:2px;}
.pet-rm{display:block;margin:5px auto 0;border:1.5px solid #a8271f;background:transparent;color:#a8271f;border-radius:999px;padding:2px 10px;font-size:10.5px;font-weight:800;cursor:pointer;}
.org-kind-pa{background:#3d3d3d;color:#fff;}

/* ══ SPEC §130 — CASE HUB: ➕ Add CASE, in the bookmark's title row ═══════════════════════════════════════ OMAN 2026-10-09 */
.mb-sub.mb-sub-row{position:relative;}
.mb-add-case{position:absolute;right:0;top:50%;transform:translateY(-50%);padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:0;line-height:1.3;min-height:0;white-space:nowrap;}

/* ══ SPEC §131 — SRR: ➕ Add Credit Note in the column heading's row · ↻ Refresh beside the search ═══════════ OMAN 2026-10-09 */
/* the row is as tall as the heading's own line (the heading never wraps), and the button stretches to exactly that — measured: 20px
   beside a 20px heading in a 217px column. In a column too narrow for both, the button drops under the heading, at the row's end. */
.srr-cn-head{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:8px;margin:0 0 9px;}
.srr-cn-head h3{white-space:nowrap;flex:none;}
.srr-cn-add{display:inline-flex;align-items:center;box-sizing:border-box;min-height:20px;margin-left:auto;padding:0 7px;font-size:10.5px;font-weight:800;line-height:1;white-space:nowrap;}
.srr-refresh-btn{padding:7px 13px;font-size:12px;white-space:nowrap;}
.cnp-manual-note{margin-top:10px;padding:8px 10px;border:1.5px dashed #8a5a00;border-radius:10px;background:#fff8e6;color:#5c3d00;font-size:11.5px;line-height:1.45;}

/* SPEC §134: the sale form says when the owner let this one sale go without APPT. / NON APPT. */
.slk-waived{font-size:10px;font-weight:700;color:#065f46;background:#d1fae5;border:1px solid #065f46;border-radius:999px;padding:1px 8px;white-space:nowrap;}

/* SPEC §135: Acquisition · APPT. · Register Acquisition — the three ways a sale names its customer, after Confirm Receipt and in Ownership details */
.m-appt-btn.m-appt-reg{border-color:#0f766e;background:#14b8a6;color:#fff;}
.slk-choose{text-align:center;padding:6px 0 4px;}
.slk-choose-say{margin:0 0 14px;font-size:12.5px;opacity:.8;}
.slk-choose-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.slk-choose-row .m-appt-btn{font-size:14px;padding:10px 22px;}
.slkr{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
.slkr .slkr-wide{grid-column:1/-1;}
.slkr .slkr-pet{display:flex;gap:6px;flex-wrap:wrap;}
.slkr .slk-foot{display:flex;justify-content:flex-end;}
@media (max-width:640px){.slkr{grid-template-columns:1fr;}}

/* ══ SPEC §138 (OMAN 2026-10-11) — A PAGE'S BAN · ITS OWN DAYS · BY WEEK ══════════════════════════════════════════════ */
.com-page.com-page-v{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.7fr);}
.com-ban-btn{font:inherit;font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:3px 9px;border:2px solid #b91c1c;border-radius:999px;background:#dc2626;color:#fff;cursor:pointer;white-space:nowrap;}
.com-ban-btn:hover{background:#b91c1c;}
.com-ban-btn.com-ban-un{background:#fff;color:#b91c1c;}
.com-page.com-page-ban{background:#121212;color:#fff;border-radius:8px;padding:5px 8px;}
.com-page.com-page-ban a{color:#93c5fd;}
.com-page.com-page-ban .com-emp-v{opacity:.55;}
.com-ban-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:900;letter-spacing:.03em;white-space:nowrap;}
.com-sched-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;border:1.5px solid currentColor;font-size:10px;font-weight:800;white-space:nowrap;}
.com-page.com-page-ed .com-sched{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 0 4px 26px;}
/* SPEC §165: the page-day buttons' own class — as .com-day it also dressed the Outreach List's DAY as an oval pill */
.com-dayb{font:inherit;font-size:10.5px;font-weight:800;padding:2px 8px;border:1.5px solid var(--text);border-radius:999px;background:#fff;color:var(--text);cursor:pointer;}
.com-dayb.on{background:var(--text);color:#fff;}
.com-dayb.com-rota{margin-left:8px;border-style:dashed;}
.com-dayb.com-rota.on{border-style:solid;background:var(--accent);color:var(--text);}
.com-sched small{font-size:11px;opacity:.7;margin-left:6px;}
.com-ban-form{display:flex;flex-direction:column;gap:12px;min-width:min(420px,84vw);}
.com-ban-form .com-photo img{max-height:220px;}
.com-ban-foot{display:flex;align-items:center;gap:10px;}
@media (max-width:760px){ .com-page.com-page-v{grid-template-columns:auto minmax(0,1fr);} .com-page.com-page-v > a,.com-page.com-page-v > .com-page-none,.com-page.com-page-v > .com-page-who{grid-column:1 / -1;} }

/* ══ SPEC §141 (OMAN 2026-10-11) — TWIN: THE BUTTON AT THE LEFT OF EMPLOYEE | PLACEHOLDER · THE SECOND PERSON'S BOX ═════════ */
.acc-twin-b{margin-right:auto;border:1.5px solid var(--text,#121212);border-radius:999px;background:transparent;color:inherit;padding:4px 15px;font-size:11.5px;font-weight:800;cursor:pointer;min-height:28px;}
.acc-twin-b.on{background:var(--text,#121212);color:#fff;}
.acc-twin-b:disabled{opacity:.45;cursor:default;}
.acc-twin{display:grid;gap:7px;border:2px dashed var(--text,#121212);border-radius:10px;padding:9px 10px;background:rgba(0,0,0,.03);}
.acc-twin[hidden]{display:none;}
.acc-twin-h{display:flex;align-items:center;gap:8px;font-size:12px;}
.acc-twin-h b{letter-spacing:.06em;}
.acc-twin-h span{opacity:.7;margin-right:auto;}
.acc-twin-note{font-size:10.5px;opacity:.75;}
/* SPEC §149 — a twin account is a SHELL: its own box on top (Shell Name · Branch · Responsibility), then TWIN 1 and TWIN 2 */
.acc-shell{display:grid;gap:7px;border:2px solid var(--text,#121212);border-radius:10px;padding:9px 10px;background:rgba(0,0,0,.05);}
.acc-shell[hidden]{display:none;}
.acc-shell-slot{display:grid;gap:7px;}
.acc-one{display:grid;gap:7px;}
.acc-one.on{border:2px dashed var(--text,#121212);border-radius:10px;padding:9px 10px;background:rgba(0,0,0,.03);}
.acc-one > .acc-twin-h[hidden]{display:none;}

/* ══ SPEC §142 — TREASURE: the month's pets and packages, the PEARL bar and the GEM bar (JUJU LOG) · its ladders (Admin → Bonus) ══ */
.tr-counts{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 12px;}
.tr-count{font-size:11.5px;font-weight:800;border:2px solid var(--text);border-radius:999px;padding:2px 12px;background:var(--card-bg,#fff);}
.tr-count b{font-size:14px;margin-left:4px;}
.tr-row{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:0 14px 0 0;}
.tr-word{flex:0 0 46px;font-size:10px;font-weight:900;letter-spacing:.09em;}
/* SPEC §144: one track, three rows — the pictures ABOVE the bar, the bar, the numbers UNDER it; nothing overlaps */
.tr-track{position:relative;flex:1;min-width:0;display:block;padding:28px 0 15px;}
.tr-icons{position:absolute;left:0;right:0;top:0;height:26px;}
.tr-nums{position:absolute;left:0;right:0;bottom:0;height:13px;}
.tr-nums small{position:absolute;top:1px;transform:translateX(-50%);font-size:10px;font-weight:800;line-height:12px;white-space:nowrap;}
.tr-bar{position:relative;display:block;height:12px;border:2px solid var(--text);border-radius:999px;background:var(--card-bg,#fff);overflow:hidden;}
/* the rainbow bar's own moving gradient (.jl-kpi-fill), in one colour's shades: blue for the pearls, red for the gems */
.tr-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background-size:200% 200%;animation:nav-rainbow 3.6s linear infinite;transition:width .4s;}
.tr-bar-pearl .tr-fill{background-image:linear-gradient(45deg,#0b4fd6,#2f8cff,#8fdcff,#1aa7ec,#0b4fd6,#2f8cff,#8fdcff,#1aa7ec,#0b4fd6);}
.tr-bar-gem .tr-fill{background-image:linear-gradient(45deg,#b3001b,#ff3b6b,#ffa3b1,#e11d48,#b3001b,#ff3b6b,#ffa3b1,#e11d48,#b3001b);}
.tr-mark-1{left:33.333%;}.tr-mark-2{left:66.667%;}.tr-mark-3{left:100%;}
/* a picture: half the first size (15px), in its own colour, glowing and swept by light like the red and the gold apple */
/* SPEC §145: very slightly bigger (18px), and a button — a tap tells what it needs and what it is worth */
.tr-ico{position:absolute;bottom:3px;width:18px;height:18px;padding:0;border:none;background:none;cursor:pointer;transform:translateX(-50%);transition:transform .25s ease;filter:drop-shadow(0 0 2px var(--tr-glow,#fff));}
.tr-ico:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:50%;}
.tr-ico img{display:block;width:18px;height:18px;object-fit:contain;}
.tr-ico::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) -30px 0/200% 100% no-repeat;}
.tr-ico-pearl-1{--tr-glow:#3db4e6;}.tr-ico-pearl-2{--tr-glow:#ff7fa8;}.tr-ico-pearl-3{--tr-glow:#f1c40f;}
.tr-ico-gem-1{--tr-glow:#2fc8e0;}.tr-ico-gem-2{--tr-glow:#ff3b6b;}.tr-ico-gem-3{--tr-glow:#aab8ff;}
.tr-ico-pearl-1::after{-webkit-mask-image:url(assets/treasure/pearl-1.png?v=2);mask-image:url(assets/treasure/pearl-1.png?v=2);}
.tr-ico-pearl-2::after{-webkit-mask-image:url(assets/treasure/pearl-2.png?v=2);mask-image:url(assets/treasure/pearl-2.png?v=2);}
.tr-ico-pearl-3::after{-webkit-mask-image:url(assets/treasure/pearl-3.png?v=2);mask-image:url(assets/treasure/pearl-3.png?v=2);}
.tr-ico-gem-1::after{-webkit-mask-image:url(assets/treasure/gem-1.png?v=2);mask-image:url(assets/treasure/gem-1.png?v=2);}
.tr-ico-gem-2::after{-webkit-mask-image:url(assets/treasure/gem-2.png?v=2);mask-image:url(assets/treasure/gem-2.png?v=2);}
.tr-ico-gem-3::after{-webkit-mask-image:url(assets/treasure/gem-3.png?v=2);mask-image:url(assets/treasure/gem-3.png?v=2);}
html.anim .tr-ico{animation:tr-glow 2.4s ease-in-out infinite;}
html.anim .tr-ico::after{animation:tr-shine 3.2s ease-in-out infinite;}
/* reached: a little higher than the two beside it, and outlined in light */
.tr-ico.won{transform:translateX(-50%) translateY(-5px) scale(1.2);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px var(--tr-glow,#f1c40f));}
html.anim .tr-ico.won{animation:tr-won 1.6s ease-in-out infinite;}
@keyframes tr-glow{0%,100%{filter:drop-shadow(0 0 1px var(--tr-glow,#fff));}50%{filter:drop-shadow(0 0 4px var(--tr-glow,#fff));}}
@keyframes tr-won{0%,100%{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px var(--tr-glow,#f1c40f));}
  50%{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px var(--tr-glow,#f1c40f));}}
@keyframes tr-shine{0%{background-position:-30px 0;opacity:0;}15%{opacity:1;}45%{background-position:30px 0;opacity:1;}60%,100%{background-position:30px 0;opacity:0;}}
@media (prefers-reduced-motion:reduce){.tr-fill,.tr-ico,.tr-ico::after{animation:none!important;}}
/* SPEC §144: this account's unread notifications ring in its WATCHDOG */
.wd-ring{background:none;border:none;padding:0 2px;}
.wd-bell{display:inline-block;font-size:14px;line-height:1;transform-origin:50% 10%;}
html.anim .wd-bell{animation:wd-bell 1.4s ease-in-out infinite;}
@keyframes wd-bell{0%,55%,100%{transform:rotate(0);}8%{transform:rotate(16deg);}16%{transform:rotate(-14deg);}24%{transform:rotate(10deg);}32%{transform:rotate(-8deg);}40%{transform:rotate(4deg);}}
.tr-adm{margin-top:18px;}
.tr-adm-note{font-size:12.5px;opacity:.75;margin:0 0 10px;}
.tr-adm-kind{font-weight:900;font-size:12.5px;margin:12px 0 6px;}
.tr-adm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;}
.tr-adm-row img{width:30px;height:30px;object-fit:contain;}   /* SPEC §144: the pictures carry no background of their own any more */
.tr-adm-row b{flex:0 0 96px;font-size:12.5px;}
.tr-adm-row label{font-size:11.5px;display:flex;align-items:center;gap:6px;}
.tr-adm-row input{width:96px;padding:4px 6px;}
.tr-adm-foot{display:flex;align-items:center;gap:10px;margin-top:10px;}
.tr-adm-msg{font-size:12px;font-weight:700;}

/* ══ SPEC §143 — New / Aged Pet Feedback on the customer's card: the response buttons, what each asks for, the list's tag ══ */
.crm-fb-tag{background:#8a5208;margin-left:4px;}
.carm-fb{border-style:dashed;}
.crm-fb-opts{display:flex;flex-wrap:wrap;gap:8px;}
.crm-fb-opt{border:2px solid var(--text);background:var(--card-bg,#fff);color:var(--text);font-weight:800;}
.crm-fb-opt.on{background:var(--text);color:var(--card-bg,#fff);}
.crm-fb-in{display:block;width:100%;margin-top:10px;padding:8px 10px;border:2px solid var(--text);border-radius:10px;font:inherit;background:var(--card-bg,#fff);color:var(--text);box-sizing:border-box;}
.crm-fb-note{font-size:11.5px;font-weight:700;margin:8px 0 0;opacity:.8;}

/* ══ SPEC §146 ══ the time wheel over a select · the answer buttons · the top row · Delivery · the chain · New Pet / Aged Pet ══ */
.tml-src{position:absolute !important;width:1px !important;height:1px !important;min-width:0 !important;padding:0 !important;border:0 !important;opacity:0 !important;pointer-events:none !important;}
.tml{display:block;min-width:168px;max-width:260px;}
.tml.tml-unset .tm-wheel::before{background:transparent;border:2px dashed var(--text);box-sizing:border-box;}
.tml.tml-unset .tm-col div.on{opacity:.5;}
.tml.tml-off{opacity:.6;pointer-events:none;}
.tml-foot{display:flex;align-items:center;gap:8px;margin-top:5px;min-height:24px;text-transform:none;letter-spacing:0;}
.tml-tbc{font:inherit;border:2px solid var(--text);background:#fff;color:var(--text);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:900;cursor:pointer;}
.tml-tbc.on{background:#2563eb;color:#fff;}
.tml-say{font-size:12px;font-weight:800;opacity:.8;}
.tml-none{border:2px dashed rgba(18,18,18,.4);border-radius:12px;padding:14px 10px;font-size:12px;font-weight:700;text-align:center;opacity:.75;text-transform:none;letter-spacing:0;}
.svc-act-when .svc-act-t{flex:1 1 180px;display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
/* the answer buttons of a saved stay / session: faint while the day asks nothing, full and breathing red while it does */
.st-idle{opacity:.45 !important;}
.st-idle:hover,.st-idle:focus-visible{opacity:.85 !important;}
.st-need{opacity:1 !important;animation:st-need 1.05s ease-in-out infinite;}
@keyframes st-need{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.85);}50%{box-shadow:0 0 0 4px rgba(220,38,38,.35),0 0 16px 6px rgba(220,38,38,.8);}}
/* a tab of the top row (and the pill of its dropdown) while one of this account's tasks under it is owed */
.ff-nav-links a.nvf-on,.dash-menu button.nvf-on{color:#c1272d !important;font-weight:900;animation:stk-breathe 1.5s ease-in-out infinite;}
/* Upcoming Pet → Delivery */
.dlv-modes{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.dlv-mode{font:inherit;font-size:13px;font-weight:800;border:2px solid var(--text);background:#fff;color:var(--text);border-radius:999px;padding:7px 16px;cursor:pointer;}
.dlv-mode.on{background:var(--text);color:#fff;}
.dlv-svc{margin-top:10px;border:2px solid var(--text);border-radius:14px;padding:12px;background:#fffdf5;}
.dlv-svc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.dlv-svc-top b{font-size:14px;}
.dlv-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
.dlv-svc-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px;}
.dlv-ok{font-size:12px;font-weight:900;color:#1f8f5f;}
.dlv-kept{font-weight:800;}
.dlv-reg{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;}
@media (max-width:560px){.dlv-two,.dlv-reg{grid-template-columns:1fr;}}
/* the action chain in a task's box (Admin → Responsibility) */
.chn{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 8px;padding:5px 9px;border:1.5px dashed #2563eb;border-radius:10px;background:#f2f6ff;font-size:11px;}
.chn-name{font-weight:900;color:#1d4ed8;margin-right:4px;}
.chn-step{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:2px solid #1d4ed8;color:#1d4ed8;background:#fff;font-size:11px;font-weight:900;}
.chn-step.on{background:#1d4ed8;color:#fff;transform:scale(1.15);}
.chn-link{display:inline-block;width:14px;height:2px;background:#1d4ed8;}
.chn-how{font-weight:700;opacity:.85;margin-left:6px;}
/* Customer Acquisition List: New Pet · Aged Pet */
.crm-ip-wrap[hidden]{display:none;}
.crm-ip-menu{left:auto;right:0;transform:none;}
.crm-ip-menu button.on{outline:3px solid var(--text);outline-offset:1px;}
.crm-ip-n{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:#c1272d;color:#fff;font-size:11px;font-weight:900;text-align:center;}
@media (prefers-reduced-motion:reduce){.st-need,.ff-nav-links a.nvf-on,.dash-menu button.nvf-on{animation:none;}}

/* ══ SPEC §147 ══ Upcoming Pet Management · a schedule's delivery as one word · SerInv · the Treasure Chest ══ */
.btn.upet-word,.btn.upet-word:disabled,.btn.upet-word:hover{border-color:transparent !important;background:transparent !important;box-shadow:none !important;padding-left:0;padding-right:0;cursor:default;opacity:1 !important;color:var(--text);transform:none !important;font-weight:800;}
.dlv-kept{align-items:center;}
.dlv-kept .dlv-mode{cursor:default;letter-spacing:.05em;}
.dlv-serinv{font:inherit;font-size:13px;font-weight:800;border:2px solid var(--text);background:#fff7d6;color:var(--text);border-radius:999px;padding:7px 14px;cursor:pointer;}
.dlv-serinv:hover{filter:brightness(.96);}
.dlv-who{font-size:13px;font-weight:800;}
/* the chest stands in the Pet / Package row, as tall as a pill, centred on the Blue Pearl's column (the track's own left and right) */
.tr-counts{position:relative;}
.tr-chest-lane{position:absolute;left:56px;right:14px;top:0;bottom:0;pointer-events:none;}
/* SPEC §148: no value on it — it wears a pearl's own two looks: in its colour and shining; reached (`won`), raised and outlined in light */
.tr-chest{position:absolute;left:33.333%;top:50%;height:100%;min-height:24px;transform:translate(-50%,-50%);padding:0;border:none;background:none;cursor:pointer;pointer-events:auto;--tr-glow:#f1c40f;filter:drop-shadow(0 0 2px var(--tr-glow));transition:transform .25s ease;}
.tr-chest img{display:block;height:100%;width:auto;object-fit:contain;}
.tr-chest::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;-webkit-mask:url(assets/treasure/chest.png?v=1) center/contain no-repeat;mask:url(assets/treasure/chest.png?v=1) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) -30px 0/200% 100% no-repeat;}
html.anim .tr-chest{animation:tr-glow 2.4s ease-in-out infinite;}
html.anim .tr-chest::after{animation:tr-shine 3.2s ease-in-out infinite;}
.tr-chest.won{transform:translate(-50%,-50%) translateY(-5px) scale(1.2);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px var(--tr-glow));}
html.anim .tr-chest.won{animation:tr-won 1.6s ease-in-out infinite;}
.tr-chest:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:8px;}
.tr-adm-pair{flex:0 0 150px;font-size:11.5px;opacity:.8;}
@media (max-width:520px){.tr-chest-lane{position:static;display:inline-flex;align-items:center;height:26px;}.tr-chest{position:relative;left:auto;top:auto;height:26px;transform:none;}.tr-chest.won{transform:translateY(-4px) scale(1.2);}}
@media (prefers-reduced-motion:reduce){.tr-chest,.tr-chest::after{animation:none!important;}}
/* ══ SPEC §151 — CUSTOMER ACQUISITION LIST ═══════════════════════════════════════════════════════════════ OMAN 2026-10-14
   The title · the search in the MIDDLE of the row · New Pet, Aged Pet, Feedback at the right end. */
.carm-list-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,320px) minmax(0,1fr);align-items:center;gap:10px;}
.carm-list-head input{flex:none;width:100%;max-width:none;}
.carm-head-btns{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0;}
@media (max-width:760px){.carm-list-head{grid-template-columns:1fr;}.carm-head-btns{justify-content:flex-start;}}
/* ⛔ THE DROPDOWN STOOD BEHIND THE CUSTOMER CARDS ("the dropdown option appear at the back of customer card, making employee unable
   to click"): `.crm-wl-head span{opacity:.65}` — written for the small note — also caught the dropdown's wrapper. An opacity under 1
   is a stacking context of its own, so the menu's z-index never left it and every card (drawn later, positioned) covered it; it was
   also drawn at 65%. The wrapper and what it holds are opaque again, and the wrapper stands above the list. */
.crm-wl-head .crm-ip-wrap,.crm-wl-head .crm-ip-wrap span{opacity:1;}
.crm-wl-head .crm-ip-wrap{z-index:20;}   /* SPEC §168: one layer behind the form's dropdowns (.crm-suggest 30) — "New Pet · Bichon" no longer covers them */
.crm-wl-head .crm-ip-wrap .crm-ip-n{font-size:11px;}
/* the purple APPT. behind the employee's name ("APPT. 2" for a second one), and the appointment card it opens under the row */
.carm-row{grid-template-columns:176px minmax(140px,1.1fr) minmax(170px,1.7fr) minmax(130px,1.1fr) 82px 104px;}
@media (max-width:760px){.carm-row{grid-template-columns:1fr 1fr;}}
.carm-row .crm-by{gap:5px;}
.carm-appt-btn{flex:none;border:1.5px solid #5b21b6;background:#7c3aed;color:#fff;border-radius:999px;font:inherit;font-size:10px;font-weight:900;letter-spacing:.04em;padding:2px 8px;cursor:pointer;white-space:nowrap;}
.carm-appt-btn:hover,.carm-appt-btn.on{background:#5b21b6;}
.carm-appt-btn.on{box-shadow:0 0 0 2px #ddd6fe;}
.carm-appt-exp{margin:-2px 0 10px 16px;padding-left:12px;border-left:3px solid #7c3aed;}
.carm-appt-exp .carm-appt-card{border-color:#7c3aed;margin-bottom:8px;}
/* the customer's own card: one small row per appointment it has booked */
.carm-appt-rows{display:flex;flex-direction:column;gap:5px;}
.carm-appt-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;text-align:left;font:inherit;font-size:12px;border:1.5px solid #7c3aed;border-radius:10px;background:#f5f3ff;padding:5px 10px;cursor:pointer;}
.carm-appt-line:hover{background:#ede9fe;}
.carm-appt-line b{color:#5b21b6;}
/* SPEC §151 — a twin account: "Who is registering for the offday?" (the two names as two buttons) · its two avatar builders */
.od-who{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.od-who-b{flex:1 1 140px;border:2px solid var(--text);border-radius:999px;background:#fff7e0;font:inherit;font-size:14px;font-weight:900;padding:10px 16px;cursor:pointer;box-shadow:var(--shadow-sm);}
.od-who-b:hover{background:var(--accent-2);transform:translateY(-1px);}
.av-twin-h{font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin:12px 0 6px;}
.av-twin-h:first-child{margin-top:0;}
/* SPEC §151 — Upcoming Pet: Origin and Origin Registration on one row */
.ogn-row{display:flex;gap:8px;align-items:center;}
.ogn-row select{flex:1;min-width:0;}
.ogn-row .btn{flex:none;white-space:nowrap;}

/* ══ SPEC §153 (OMAN 2026-10-16) — Before the Rainbow · the Rainbow Board · the Village ═══════════════════════════════════════════
   Every % below is a spot OMAN marked on his screenshots, matched back onto the pictures (mushroom.png / tree.png / the village). */
/* BEFORE THE RAINBOW on the Mushroom wall (x 1 – 8 %, y 55 – 62 %): a small framed picture on a string, no name */
.mr-art{position:absolute;left:4.6%;top:58.6%;width:6%;transform:translate(-50%,-50%);z-index:3;padding:0;border:none;background:none;cursor:pointer;line-height:0;}
.mr-art img{display:block;width:100%;height:auto;box-sizing:border-box;border:3px solid #121212;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));transition:transform .15s;}
.mr-art:hover img{transform:scale(1.06);}
/* its pop-out: the name above, the picture in a black frame (SPEC §155 — it was wood, then white), the words below */
.art-card{flex:none;margin:auto;width:min(760px,calc(100vw - 32px));box-sizing:border-box;padding:18px 22px 22px;background:#fff8eb;border:2px solid #121212;
  border-radius:22px;box-shadow:rgba(0,0,0,.3) 12px 12px 0 0;text-align:center;}
.art-title{margin:0 0 14px;font-family:'Sugar Peachy',Arial,sans-serif;font-size:clamp(22px,3.2vw,34px);line-height:1.1;color:#121212;}
.art-frame{display:inline-block;max-width:100%;box-sizing:border-box;padding:10px;border:2px solid #121212;border-radius:6px;
  background:#121212;box-shadow:rgba(0,0,0,.25) 0 4px 10px;}
.art-frame img{display:block;width:min(680px,100%);height:auto;border:1px solid rgba(18,18,18,.35);}
.art-words{max-width:640px;margin:16px auto 0;font-size:15px;line-height:1.65;font-style:italic;color:#121212;}
/* THE RAINBOW BOARD between the round windows (x 56 – 87 %, y 35 – 56 %); rbSVG draws the bands */
.mr-board{position:absolute;left:57.75%;top:31.2%;width:28%;height:18.8%;z-index:3;padding:0;border:none;background:none;cursor:pointer;line-height:0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .15s;}
.mr-board:hover{transform:translateY(-2px);}
.rb-svg{position:absolute;inset:0;display:block;}
.rb-svg svg{display:block;width:100%;height:100%;}
/* opened: SPEC §155 — "increase 50% on top and 50% on bottom, 50% on left and 50% on right": twice §153's 860 × 626, never past the screen */
.rb-pop{position:relative;flex:none;margin:auto;width:min(1720px,calc(100vw - 48px));height:min(1252px,calc(100vh - 48px));line-height:0;filter:drop-shadow(10px 10px 0 rgba(0,0,0,.3));}
/* THE VILLAGE SIGN on the ground left of the tree (34 px past the tree's left edge, 75 px tall — his mark); scales with the tree */
.village-sign{position:absolute;left:-35px;bottom:0;width:75px;z-index:2;padding:0;border:none;background:none;cursor:pointer;pointer-events:auto;line-height:0;
  transform-origin:50% 100%;transition:transform .15s;}
.village-sign:hover{transform:rotate(-3deg) scale(1.05);}
.village-sign img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));}
.village-sign-word{position:absolute;left:6%;right:6%;top:5.5%;height:33%;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-family:'Sugar Peachy',Arial,sans-serif;font-size:13px;line-height:1;color:#6b4423;}
@media (max-width:900px){
  .village-sign{left:-21px;width:44px;}
  .village-sign-word{font-size:8px;}
}
/* THE VILLAGE pop-out (SPEC §154): his 1344 × 768 "MUSHROOM Village" as big as the screen allows, never above its own 1344 px — a
   picture drawn larger than it is, is a blurred one. content-box, so the picture's own box is exactly 1344 : 768, never stretched. */
.village-card{position:relative;flex:none;margin:auto 0;box-sizing:content-box;aspect-ratio:1344 / 768;
  width:min(1344px,calc(100vw - 64px),calc((100vh - 16px) * 1344 / 768));
  border:2px solid var(--text);border-radius:22px;overflow:hidden;box-shadow:rgba(0,0,0,.3) 12px 12px 0 0;line-height:0;}
#village-modal{padding:6px 16px;}
.village-img{display:block;width:100%;height:100%;}
.village-card .ff-modal-close{z-index:3;}
/* the house (the mound, its door and windows) goes into the MUSHROOM */
.village-house{position:absolute;left:10%;top:11%;width:88%;height:64%;z-index:1;padding:0;border:none;background:none;cursor:pointer;
  border-radius:50% 50% 6% 6% / 70% 70% 6% 6%;}
.village-house:hover,.village-house:focus-visible{background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent);outline:none;}
/* MUSHROOM on the roof, the main page's own rainbow word on a white pill; its size follows the picture's */
.village-pill{position:absolute;left:53.2%;top:25.5%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;padding:.16em .7em;border:2px solid #121212;
  border-radius:999px;background:#fff;box-shadow:rgba(0,0,0,.28) 3px 3px 0 0;font-weight:900;line-height:1.15;white-space:nowrap;
  font-size:min(35px,calc((100vw - 64px) * .026),calc((100vh - 16px) * .0455));}

/* ══ SPEC §170 (OMAN 2026-10-27) — WOOD SIGN 2 on the Village tree · THE BEACH · THE FISH HOOK ════════════════════════════════════
   The sign hangs from the branch where he drew it (x 11 – 26 %, the ropes from y 5 %). Its planks are measured on the picture
   (272 × 449): the top plank is y 111 – 192, x 34 – 236. */
.vg-sign{position:absolute;left:10.9%;top:3%;width:15%;z-index:2;line-height:0;transform-origin:50% 0;}
html.anim .vg-sign{animation:vg-sway 6s ease-in-out infinite;}
@keyframes vg-sway{0%,100%{transform:rotate(-1deg);}50%{transform:rotate(1deg);}}
.vg-sign img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));}
.vg-plank{position:absolute;left:12.5%;width:74.3%;padding:0;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:'Sugar Peachy',Arial,sans-serif;font-size:min(30px,calc((100vw - 64px) * .022),calc((100vh - 16px) * .0385));line-height:1;color:#5a3517;
  text-shadow:0 1px 0 rgba(255,236,200,.65);transition:transform .15s;}
.vg-plank-1{top:24.7%;height:18%;}
.vg-plank:hover,.vg-plank:focus-visible{transform:scale(1.06);outline:none;}
/* THE BEACH and THE FISH HOOK: 16 : 9 (the video's own shape), as big as the screen allows */
.bch-card,.fh-card{position:relative;flex:none;margin:auto 0;aspect-ratio:16 / 9;width:min(1280px,calc(100vw - 64px),calc((100vh - 24px) * 16 / 9));
  border:2px solid #121212;border-radius:22px;overflow:hidden;box-shadow:rgba(0,0,0,.3) 12px 12px 0 0;background:#0b3d63;line-height:0;}
#beach-modal,#fish-modal{padding:8px 16px;}
.bch-video{display:block;width:100%;height:100%;object-fit:cover;}
.bch-me,.fh-me{position:absolute;left:50%;bottom:2%;height:34%;transform:translateX(-50%);z-index:1;pointer-events:none;}
.bch-me svg,.fh-me svg{display:block;height:100%;width:auto;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));}
.bch-hook{position:absolute;right:2.5%;bottom:4%;z-index:2;padding:.55em 1.2em;border:2px solid #121212;border-radius:999px;background:#fff;color:#121212;
  font-weight:900;font-size:clamp(13px,1.6vw,20px);line-height:1.1;cursor:pointer;box-shadow:rgba(0,0,0,.3) 4px 4px 0 0;transition:transform .15s;}
.bch-hook:hover{transform:translateY(-2px);}
/* SPEC §170: what the Fish Hook says on the Beach — no hook yet (how to win one), or a read that failed */
.bch-say{position:absolute;right:2.5%;bottom:calc(4% + 3.4em);z-index:2;max-width:min(380px,44%);padding:.7em 1em;border:2px solid #121212;border-radius:14px;
  background:#fff8eb;color:#121212;font-weight:700;font-size:clamp(12px,1.3vw,15px);line-height:1.35;box-shadow:rgba(0,0,0,.3) 4px 4px 0 0;}
.bch-say.bad{background:#fde8e6;color:#a8271f;}
.fh-res-demo.bad{color:#a8271f;font-weight:900;font-size:12px;}
.fh-adm-dot{width:16px;height:16px;border-radius:50%;border:2px solid #121212;flex:none;}
.fh-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;}
.fh-me{display:none;transition:opacity .35s;}
.fh-card[data-st="ready"] .fh-me,.fh-card[data-st="cast"] .fh-me{display:block;}
.fh-me.gone{opacity:0;}
.fh-hud{position:absolute;left:2%;right:70px;top:18px;z-index:2;display:none;align-items:center;gap:10px;pointer-events:none;line-height:1.2;
  font-weight:900;color:#fff;font-size:clamp(11px,1.25vw,15px);text-shadow:0 1px 2px rgba(0,0,0,.6);}
.fh-card[data-st="reel"] .fh-hud,.fh-card[data-st="snap"] .fh-hud,.fh-card[data-st="land"] .fh-hud{display:flex;}
.fh-end{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}
.fh-end-lbl{letter-spacing:.08em;}
.fh-end-bar{position:relative;flex:1;height:16px;border:2px solid #121212;border-radius:999px;background:rgba(255,255,255,.88);}
.fh-end-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:#3fbf6a;transition:width .2s,background .2s;}
.fh-end-bar.warn i{background:#f2b632;}
.fh-end-bar.danger i{background:#e2453c;}
.fh-pill{white-space:nowrap;padding:.3em .8em;border-radius:999px;background:rgba(5,29,45,.72);border:1.5px solid rgba(255,255,255,.35);}
.fh-pill-rm{color:#ffd23a;}
.fh-banner{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);z-index:3;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;line-height:1.2;
  font-weight:900;font-size:clamp(15px,2.4vw,30px);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7);}
.fh-banner.on{opacity:1;}
.fh-banner.bad{color:#ff6b5e;}
.fh-banner.good{color:#7dffb0;}
.fh-cast{position:absolute;right:3%;bottom:6%;z-index:3;display:none;flex-direction:column;align-items:center;gap:8px;line-height:1.2;}
.fh-card[data-st="ready"] .fh-cast{display:flex;}
.fh-hooks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:300px;}
.fh-hooks-say{width:100%;text-align:center;font-weight:900;font-size:11px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.fh-hook-pick{display:inline-flex;align-items:center;gap:5px;padding:.35em .7em;border:2px solid #121212;border-radius:999px;background:rgba(255,255,255,.85);
  font-weight:800;font-size:12px;line-height:1;color:#121212;cursor:pointer;}
.fh-hook-pick i{width:10px;height:10px;border-radius:50%;border:1.5px solid #121212;}
.fh-hook-pick.on{background:#ffd23a;box-shadow:rgba(0,0,0,.3) 2px 2px 0 0;}
.fh-power{width:min(220px,22vw);height:14px;border:2px solid #121212;border-radius:999px;background:#fff;overflow:hidden;}
.fh-power i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fbf6a,#f2b632,#e2453c);}
.fh-btn{padding:.6em 1.4em;border:2px solid #121212;border-radius:999px;background:#ffd23a;color:#121212;font-weight:900;font-size:clamp(13px,1.5vw,18px);line-height:1.1;
  cursor:pointer;box-shadow:rgba(0,0,0,.3) 4px 4px 0 0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;}
.fh-btn:active{transform:translate(2px,2px);box-shadow:rgba(0,0,0,.3) 2px 2px 0 0;}
.fh-btn-2{background:#fff;}
.fh-reel{position:absolute;right:2.5%;bottom:4%;z-index:3;display:none;padding:.6em 1.3em;border:2px solid #121212;border-radius:999px;background:#fff;color:#121212;
  font-weight:900;font-size:clamp(13px,1.5vw,18px);line-height:1.1;cursor:pointer;box-shadow:rgba(0,0,0,.3) 4px 4px 0 0;}
.fh-card[data-st="reel"] .fh-reel{display:block;}
.fh-reel.hot{background:#e2453c;color:#fff;}
html.anim .fh-reel.hot{animation:fh-hot .45s ease-in-out infinite alternate;}
@keyframes fh-hot{to{transform:scale(1.08);}}
.fh-result{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;background:rgba(5,29,45,.4);line-height:1.3;}
.fh-card[data-st="result"] .fh-result{display:flex;}
.fh-res-card{width:min(420px,86%);max-height:90%;overflow:auto;box-sizing:border-box;padding:18px 20px;border:2px solid #121212;border-radius:18px;background:#fff8eb;
  box-shadow:rgba(0,0,0,.3) 8px 8px 0 0;text-align:center;color:#121212;}
.fh-res-title{font-family:'Sugar Peachy',Arial,sans-serif;font-size:clamp(20px,2.4vw,28px);}
.fh-res-sub{margin-top:6px;font-size:13px;}
.fh-res-tab{width:100%;margin-top:10px;border-collapse:collapse;font-size:13px;}
.fh-res-tab th,.fh-res-tab td{padding:4px 6px;border-bottom:1px solid rgba(18,18,18,.15);text-align:right;}
.fh-res-tab th:first-child,.fh-res-tab td:first-child{text-align:left;}
.fh-res-tab tr.fh-gone td{text-decoration:line-through;opacity:.55;}
.fh-res-total{margin-top:10px;font-weight:900;font-size:22px;}
.fh-res-demo{margin-top:4px;font-size:11px;color:#8a5a2b;}
.fh-res-btns{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
/* SPEC §171: his sea video UNDER the canvas · the avatar leans on its feet · the gauge's three depths · the words "a shark may appear"
   (the 🦈 half-way mark is gone) · the owner's list takes a name and a rate */
.fh-card{background:#0b2259;}
.fh-sea{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fh-me{transform-origin:50% 100%;}
.fh-power{position:relative;height:20px;}
.fh-power i{background:linear-gradient(90deg,#8fdcff,#2f8fe0 55%,#173f8f);background-size:calc(min(220px,22vw) - 4px) 100%;}   /* SPEC §177: one bar — no thirds, no words */
.fh-pill.fh-shark-msg{background:#e2453c;border-color:#fff;}
html.anim .fh-pill.fh-shark-msg{animation:fh-hot .45s ease-in-out infinite alternate;}
.tr-adm-row input.fh-adm-name{width:170px;}
.fh-adm-lv{font-size:11px;opacity:.75;}

/* SPEC §172: a registered receipt refunded in Loyverse, or deleted with approval — Pet Receipt #1 on top of the card, the tile's own words,
   and WATCHDOG's red REFUNDED / DELETED pill (breathing, like every WATCHDOG row) */
.rsw-host{margin:0 0 14px;}
.rsw-card{border:2px solid #c62828;border-radius:14px;padding:12px 14px;background:#fff5f5;}
.rsw-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14px;font-weight:800;}
.rsw-tag,.wd-status.wd-alarm{background:#c62828;color:#fff;border-radius:999px;padding:2px 10px;font-size:10.5px;font-weight:900;letter-spacing:.06em;}
html.anim .rsw-tag,html.anim .watchdog .wd-status.wd-alarm{animation:rsw-breath 1.6s ease-in-out infinite;}
@keyframes rsw-breath{0%,100%{opacity:1;}50%{opacity:.45;}}
.rsw-why{font-size:12px;line-height:1.5;margin-bottom:6px;}
.rsw-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px;}
.rsw-msg{flex:1;font-size:11.5px;color:#a8271f;}
.rc-delwait,.rc-refund,.pd-cap .rc-delwait,.pd-cap .rc-refund{display:block;margin-top:4px;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.04em;
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;}
.rc-delwait{background:#fff4d6;color:#8a5a00;}
.rc-refund{background:#c62828;color:#fff;}
.rc-subhead.rc-pet-done{opacity:.7;font-style:italic;text-transform:none;letter-spacing:0;}

/* SPEC §174: the amount on top of a boarding / grooming pop-out (TOTAL · DEPOSIT RECEIVED · BALANCE TO COLLECT), what it is made of under
   Total Nights, the deposit's zone; §175: Customer Details + Pass; the payment approval's Responsibility; a customer's remark; Admin's prices */
.bkp{margin:0;padding:10px 22px;border-bottom:2px solid var(--text);background:#f6fbf3;}
.bkp-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.bkp-cell{display:flex;flex-direction:column;line-height:1.15;}
.bkp-cell small{font-size:9.5px;font-weight:900;letter-spacing:.08em;opacity:.65;}
.bkp-cell b{font-size:18px;font-weight:900;}
.bkp-cell i{font-size:10.5px;opacity:.7;font-style:normal;}
.bkp-bal b{color:#c62828;}
.bkp-dep{margin-left:auto;}
.bkp-miss,.bkp-wait{margin-top:6px;font-size:11.5px;color:#8a5a00;font-weight:700;}
.bkp-wait{margin-top:0;}
.bkp-dep-zone{margin-top:10px;}
.bkp-dep-head{font-size:11.5px;font-weight:800;}
.bkp-dep-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px;}
.bkp-dep-msg{flex:1;font-size:11.5px;color:#a8271f;}
.bkp-lines{display:flex;flex-wrap:wrap;gap:6px;padding:8px 22px 0;justify-content:flex-end;}
.bkp-line{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.2;}
.bkp-line em{font-style:normal;font-size:9.5px;opacity:.65;font-weight:600;}
.bkc-head{margin-top:4px;}
/* SPEC §180: the VIP star beside Customer Details (gold = VIP); + Pass and +Add Pet stay out until their details are there */
.bkc-star{background:none;border:0;padding:0 2px;margin:0 -4px 0 -6px;font-size:22px;line-height:1;color:#a8a8a8;cursor:pointer;}
.bkc-star.on{color:#f5b301;text-shadow:0 0 6px rgba(245,179,1,.55);}
.bkc-star[hidden],.xp-add[hidden]{display:none!important;}
.pass-vip{color:#b07d00;}
/* SPEC §180: a card's Customer Code */
.carm-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.04em;}
.appay{display:flex;flex-direction:column;gap:10px;min-width:min(520px,80vw);}
.appay-what{font-size:12.5px;font-weight:800;}
.appay-q{font-size:12px;font-weight:900;letter-spacing:.04em;}
.appay-opt{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.45;padding:8px 10px;border:2px solid var(--text);border-radius:12px;cursor:pointer;}
.appay textarea{width:100%;font:inherit;font-size:12px;padding:8px;border:2px solid var(--text);border-radius:10px;}
.appay-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
#appay-msg{flex:1;font-size:11.5px;color:#a8271f;}
.crmk{display:flex;flex-direction:column;gap:8px;text-align:left;}
.crmk-row{border:2px solid #c62828;border-radius:10px;padding:8px 10px;background:#fff5f5;}
.crmk-txt{font-size:13px;font-weight:800;}
.crmk-sub{font-size:11px;opacity:.75;margin-top:3px;}
.bgp-note{font-size:11.5px;opacity:.8;margin-bottom:8px;}
.bgp-tab{width:100%;border-collapse:collapse;font-size:12px;}
.bgp-tab th,.bgp-tab td{border-bottom:1px solid rgba(0,0,0,.12);padding:4px 6px;text-align:left;}
.bgp-step{font-size:12px;margin:6px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.bgp-step input{width:64px;padding:3px 6px;font-size:12px;}
.bgp-x{border:0;background:none;cursor:pointer;color:#c62828;font-weight:900;}
.bgp-acts{display:flex;align-items:center;gap:10px;margin-top:10px;}
#bgp-msg{font-size:11.5px;opacity:.85;}
.pass-tabs{display:flex;gap:10px;margin-bottom:12px;}
.pass-tab{flex:1;padding:12px;border:2px solid var(--text);border-radius:14px;background:#fff;font-weight:900;cursor:pointer;}
.pass-tab.on{background:#121212;color:#fff;}
.pass-none,.pass-who{font-size:12.5px;margin:6px 0;}
.pass-form{display:flex;flex-direction:column;gap:8px;font-size:12px;}
.pass-form select{width:100%;padding:6px;font-size:12px;}
.pass-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:6px;}
#pass-msg,#pass-pay-msg{flex:1;font-size:11.5px;}
.pass-list{margin-top:14px;}
.pass-sub{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:6px;}
.pass-row{font-size:12px;padding:8px 0;border-top:1px solid rgba(0,0,0,.12);}
.pass-ok{color:#1f7a3d;font-weight:900;}
.pass-wait{color:#a8271f;font-weight:900;}

/* ══ SPEC §154 (OMAN 2026-10-16) — THE AGENDA on the Rainbow Board ═══════════════════════════════════════════════════════════
   The wall shows the board's top row; the pop-out holds the Agenda: "Agenda" top left, + top right, then each item numbered with
   its GEN (red) or VID (blue) tag. One section is edited at a time (its pen lit); Confirm saves that section alone. */
.mr-board-head{position:absolute;left:5.5%;right:5.5%;top:7%;display:flex;align-items:center;justify-content:space-between;pointer-events:none;
  font-family:'Sugar Peachy',Arial,sans-serif;font-size:min(13px,1.1vw,calc((100vh - 12px) * .0122));line-height:1;color:#121212;}
.mr-board-head b{font-weight:400;}
.mr-board-head i{font-style:normal;font-weight:900;font-family:inherit;}
.agd{position:absolute;inset:32px;overflow-y:auto;box-sizing:border-box;padding:8px 12px 14px;text-align:left;line-height:1.35;font-size:13px;color:#121212;}
.agd-add{flex:none;width:32px;height:32px;padding:0;border:2px solid #121212;border-radius:50%;background:#fff;font:inherit;font-size:20px;font-weight:900;line-height:1;cursor:pointer;
  box-shadow:rgba(0,0,0,.25) 2px 2px 0 0;}
.agd-add:hover{background:#fff7e0;}
.agd-msg{margin:4px 0;color:#a8271f;font-size:12px;font-weight:800;}
.agd-empty{margin:10px 0;opacity:.6;font-style:italic;}
.agd-item{padding:8px 0;border-top:1px dashed rgba(18,18,18,.28);}
.agd-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:28px;}
.agd-n{font-weight:900;min-width:18px;}
.agd-tag{flex:none;padding:2px 6px;border-radius:6px;color:#fff;font-size:10px;font-weight:900;letter-spacing:.06em;line-height:1.3;}
.agd-tag.gen{background:#d62828;}
.agd-tag.vid{background:#1f6fd1;}
.agd-title{font-weight:800;font-size:14px;overflow-wrap:anywhere;}
.agd-chip{flex:none;padding:2px 9px;border:1.5px solid #121212;border-radius:999px;background:#fff8eb;font:inherit;font-size:11px;font-weight:800;cursor:pointer;}
.agd-chip.set{background:#e8f6ec;}
.agd-chip.late{background:#fde2e0;border-color:#a8271f;color:#a8271f;}     /* SPEC §157: a Proposal Date passed, the proposal not sent */
.agd .agd-chip input{padding:0 2px;border:none;border-radius:0;background:transparent;font-size:11px;font-weight:800;}
.agd-pen{flex:none;margin-left:auto;width:28px;height:28px;padding:0;border:1.5px solid transparent;border-radius:50%;background:none;font-size:14px;cursor:pointer;opacity:.6;}
.agd-pen:hover{opacity:1;background:#fff7e0;}
.agd-pen.on{opacity:1;border-color:#1f7a3d;background:#e8f6ec;}
.agd-note{margin:4px 0 0 25px;white-space:pre-wrap;overflow-wrap:anywhere;}
.agd-sec{margin:4px 0 0 25px;}
.agd-scene{margin-top:8px;padding:8px 10px;border:1.5px solid rgba(18,18,18,.3);border-radius:12px;background:rgba(255,255,255,.65);}
.agd-scene.on{border-color:#1f7a3d;}
.agd-scene-name{font-weight:900;}
.agd-kv{margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere;}
.agd-kv b{font-weight:800;}
.agd-f{display:flex;flex-direction:column;gap:3px;margin-top:6px;font-size:11px;font-weight:800;}
.agd-f em{color:#a8271f;font-style:normal;}
.agd input,.agd textarea,.agd select{box-sizing:border-box;padding:4px 7px;border:1.5px solid #121212;border-radius:8px;background:#fff;font:inherit;font-size:13px;font-weight:500;color:#121212;}
.agd textarea{width:100%;min-height:52px;resize:vertical;}
.agd .agd-title-in{flex:1;min-width:160px;}
.agd-boards{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.agd-board-name{font-size:11px;font-weight:800;}
.agd-boards canvas{display:block;width:100%;aspect-ratio:3 / 1;border:1.5px dashed #121212;border-radius:8px;background:#fff;}
.agd-boards.drawing canvas{touch-action:none;cursor:crosshair;}
.agd-actions{display:flex;justify-content:flex-end;margin-top:8px;}
.agd-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.agd-pick button{display:flex;align-items:center;gap:8px;padding:8px 14px;border:2px solid #121212;border-radius:12px;background:#fff;font:inherit;font-weight:800;cursor:pointer;}
.agd-pick button.on{background:#fff7e0;box-shadow:rgba(0,0,0,.25) 2px 2px 0 0;}
.agd-new-title{display:flex;align-items:center;gap:8px;}
.agd-new-title input{flex:1;padding:7px 9px;border:2px solid #121212;border-radius:10px;font:inherit;font-size:14px;}
/* ══ SPEC §155 (OMAN 2026-10-16) — the Agenda's stages, DAILIES' AGENDA, the wall's titles ══════════════════════════════════ */
.agd-top{position:absolute;top:0;left:40px;right:40px;height:34px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none;}
.agd-top > *{pointer-events:auto;}
.agd-top-l,.agd-top-r{display:flex;align-items:center;gap:8px;}
.agd-top-l b{font-family:'Sugar Peachy',Arial,sans-serif;font-size:24px;font-weight:400;line-height:1;color:#121212;}
/* SPEC §157: "On Going" and "Completed" the size of Review (.agd-act) — the top row inherits line-height 0 from the board, which had
   squeezed them to a sliver */
.agd-view{padding:3px 11px;border:2px solid #121212;border-radius:999px;font-size:11.5px;font-weight:900;line-height:15.5px;white-space:nowrap;}
.agd-view.going{background:#ffb347;}
.agd-view.done{background:#7bd88f;}
.agd-swap{padding:3px 11px;border:2px solid #121212;border-radius:999px;font:inherit;font-size:11.5px;font-weight:900;line-height:15.5px;white-space:nowrap;cursor:pointer;box-shadow:rgba(0,0,0,.25) 2px 2px 0 0;}
.agd-swap.to-done{background:#37c871;color:#fff;}
.agd-swap.to-going{background:#ffb347;color:#121212;}
@media (max-width:600px){ .agd-top-l b{font-size:18px;} .agd-top .agd-add{width:26px;height:26px;font-size:16px;} }
.agd-pill{flex:none;padding:2px 9px;border:1.5px solid #121212;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap;}
.agd-pill-p{background:#fff;}
.agd-pill-r{background:#ffd27a;}
.agd-pill-ok{background:#7bd88f;}
.agd-pill-no{background:#f58c8c;}
.agd-act{flex:none;padding:3px 11px;border:2px solid #121212;border-radius:999px;background:#f7b531;font:inherit;font-size:11.5px;font-weight:900;color:#121212;cursor:pointer;
  box-shadow:rgba(0,0,0,.25) 2px 2px 0 0;}
.agd-act:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;}
.agd-confirm{flex:none;}
.agd-row .agd-confirm{margin-left:4px;}
.agd-msg.agd-in{margin:6px 0 2px;}
.agd-when{font-size:11.5px;font-weight:800;opacity:.75;}
.agd-scene-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;border:none;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit;}
.agd-scene-line::before{content:'▸';font-size:11px;opacity:.6;transition:transform .15s;}
.agd-scene.open .agd-scene-line::before{transform:rotate(90deg);}
.agd-scene.open,.agd-scene.on{background:rgba(255,255,255,.8);}
.agd-who{margin-top:2px;}
/* SPEC §157: every delegate pill one width (--agd-dl-w = the longest name), side by side, a name on one line; the tick is the fill */
.agd-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--agd-dl-w,14ch),100%),1fr));gap:6px;}
.agd-dl-one{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:28px;padding:3px 10px;border:2px solid #121212;
  border-radius:999px;background:#fff;color:#121212;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;cursor:pointer;}
.agd-dl-one span{overflow:hidden;text-overflow:ellipsis;}
.agd-dl-one.on{background:#e8f6ec;border-color:#1f7a3d;}
.agd .agd-dl-one input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none;}
.agd-dl-one:focus-within{outline:2px solid #1f6fd1;outline-offset:2px;}
/* SPEC §157: Scene Length — each box a third as long, its unit written above it */
.agd-len{display:flex;flex-wrap:wrap;align-items:flex-end;gap:5px;align-self:flex-start;}
.agd-len-u{display:flex;flex-direction:column;align-items:center;gap:2px;}
.agd-len-u small{font-size:10.5px;font-weight:800;opacity:.75;white-space:nowrap;}
.agd .agd-len select{width:86px;}
.agd-len > b{padding-bottom:6px;}
.agd-board{margin-top:6px;}
.agd-board-head{display:flex;align-items:center;justify-content:space-between;}
.agd-board-x{width:26px;height:26px;padding:0;border:1.5px solid #121212;border-radius:50%;background:#fff;font-size:13px;font-weight:900;cursor:pointer;}
.agd-board-x:hover{background:#fde2e0;}
.agd-board-tools{display:flex;gap:8px;margin-top:5px;}
.agd-board-tools button{padding:3px 10px;border:1.5px solid #121212;border-radius:8px;background:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer;}
.agd-url{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0;}
.agd-url input{flex:1;min-width:220px;}
.agd-kv a{color:#1f6fd1;overflow-wrap:anywhere;}
/* DAILIES' AGENDA — above every category; the employee's own rows breathe red */
.dl-agd{margin-bottom:8px;}
.dl-agd-head{font-size:11px;font-weight:900;letter-spacing:.08em;margin:2px 0 4px;}
.dl-agd-item{display:flex;flex-direction:column;gap:3px;}
.dl-agd-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0;border:none;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit;}
.dl-agd-title b{font-size:13px;}
.dl-agd-when{font-size:11px;font-weight:800;opacity:.7;}
.dl-agd-row{display:flex;flex-direction:column;align-items:flex-start;margin-left:18px;padding:3px 8px;border:1.5px solid rgba(18,18,18,.25);border-radius:9px;background:#fff;
  font:inherit;font-size:12px;font-weight:800;text-align:left;cursor:pointer;color:inherit;}
.dl-agd-row small{font-weight:600;opacity:.7;}
.dl-agd-row.mine{border-color:#121212;}
/* SPEC §164: the open agenda rows breathe red (no rule had ever drawn .dl-flash outside a category), and their dates are red — blinking while owed */
.watchdog .dl-agd-item.dl-flash,.dl-agd-row.dl-flash{border-color:#c1272d;animation:ph-owe 1.2s ease-in-out infinite;}
.dl-agd-date{color:#c1272d;font-size:12px;font-weight:900;}
.dl-agd-date.on{animation:agd-date-blink 1s ease-in-out infinite;}
@keyframes agd-date-blink{0%,100%{opacity:1;}50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.watchdog .dl-agd-item.dl-flash,.dl-agd-row.dl-flash,.dl-agd-date.on{animation:none;}}
/* the wall: the on-going titles with their dates, left and right */
.mr-board-list{position:absolute;left:6%;right:6%;top:24%;bottom:12%;display:grid;grid-template-columns:1fr 1fr;gap:0 6%;overflow:hidden;pointer-events:none;
  font-size:min(9px,.75vw,calc((100vh - 12px) * .0083));line-height:1.35;color:#121212;text-align:left;}
.mr-agd-col{display:flex;flex-direction:column;min-width:0;}
.mr-agd-one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mr-agd-one i{font-style:normal;opacity:.7;}
.mr-agd-tag{font-size:.8em;padding:0 .35em;border-radius:.35em;letter-spacing:.04em;vertical-align:.05em;}   /* SPEC §164: VID / GEN on the wall */
/* SPEC §164: the WEEKLY box's scoring switch, and the owner's word in SKILL */
.wk-score{margin:6px 0 0;font-size:12px;color:#a8271f;}
.wk-score.on{color:#1f7a3d;}
.wk-score-btn{margin-left:6px;}
.jl-sk-msg.wk-off{color:#a8271f;font-weight:700;}
/* ══ SPEC §160 (OMAN 2026-10-18) — the pet form shut until Unregistered Pet · a schedule's Origins with Direct Purchase / Consignment ══ */
.ap-gate{position:relative;}
.ap-gate[hidden],.ap-lvcat[hidden]{display:none;}   /* SPEC §161: not there at all until a pet is taken from Unregistered Pet */
.ugr-sec{margin-top:12px;padding:10px 12px;border:2px solid var(--text);border-radius:14px;background:var(--card-bg);}
.ugr-sec-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ugr-cats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px;}
.ugr-cat{font:inherit;font-size:12.5px;font-weight:800;padding:6px 14px;border-radius:999px;cursor:pointer;border:2px solid currentColor;background:#fff;}
.ugr-cat-direct{color:#1e40af;}
.ugr-cat-consign{color:#9a3412;}
.ugr-cat-direct.on{background:#1e40af;color:#fff;border-color:#1e40af;}
.ugr-cat-consign.on{background:#c2410c;color:#fff;border-color:#c2410c;}
.ugr-blk{margin-top:10px;padding:8px 10px;border-radius:10px;border-left:5px solid #1e40af;background:#eef2ff;}
.ugr-blk-consign{border-left-color:#c2410c;background:#fff7ed;}
.ugr-blk-h{font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;}
.ugr-cols{display:flex;justify-content:space-between;font-size:11px;font-weight:700;opacity:.7;margin:0 42px 4px 2px;}
.ugr-add{margin-top:10px;}
.ugr-wait{margin:6px 0 0;color:#9a3412;opacity:1;font-weight:700;}
.ugr-tag{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#c2410c;border-radius:999px;padding:1px 7px;margin-left:4px;}
/* ══ SPEC §161 (OMAN 2026-10-18) — ✎ a schedule before Arrive · the Delivery Route · Treasure's Pet / Package pop-outs ══ */
.ugr-blk-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ugr-pen{font:inherit;font-size:14px;line-height:1;cursor:pointer;border:2px solid currentColor;border-radius:999px;background:#fff;padding:3px 9px;color:inherit;}
.ugr-pen:hover{background:var(--text);color:#fff;}
.dlv-route{font-size:14px;padding:8px 10px;border:2px dashed var(--border,#cfc8b8);border-radius:10px;background:#faf8f3;min-height:20px;}
button.tr-count{font-family:inherit;color:inherit;cursor:pointer;}
button.tr-count:hover{background:var(--text);color:#fff;}
.tr-list{margin:0;padding-left:22px;font-size:13px;line-height:1.7;}
.tr-list small{opacity:.7;margin-left:4px;}
.tr-list-off{list-style:none;padding-left:0;opacity:.75;}
/* ══ SPEC §162 (OMAN 2026-10-18) — Delegate by CATEGORY: one box per category, its tasks listed under it ══ */
.dlgp-catbox{display:grid;gap:6px;padding:6px;border:2px solid transparent;border-radius:14px;}
.dlgp-catbox.dlgp-owe{border-color:#c1272d;}
.dlgp-catbox.dlgp-owe .dlgp-x{color:#c1272d;opacity:1;font-weight:800;}
.dlgp-catbox .dlgp-row{grid-template-columns:minmax(0,1fr) auto;margin-left:10px;padding:7px 10px;}
/* ══ SPEC §163 (OMAN 2026-10-18) — Outreach: BAN beside ✎ Edit, the half-size BAN mark, Page Health, Task Registration, a page's tasks · Upcoming Pet without Origins ══ */
.com-manage-btns{margin-left:auto;display:inline-flex;align-items:center;gap:8px;}
.com-manage-h .com-manage-btns .btn{margin-left:0;}
.com-ban-top{font:inherit;font-size:11px;font-weight:900;letter-spacing:.05em;padding:4px 12px;border:2px solid #b91c1c;border-radius:999px;background:#dc2626;color:#fff;cursor:pointer;}
.com-ban-top.on{background:#fff;color:#b91c1c;box-shadow:0 0 0 3px rgba(220,38,38,.25);}
.com-ban-pickhint{margin:6px 0 2px;font-size:12px;font-weight:800;color:#b91c1c;}
.com-page.com-ban-pick{cursor:pointer;border-radius:8px;animation:com-ban-pick 2.4s ease-in-out infinite;}
@keyframes com-ban-pick{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0);background:transparent;}50%{box-shadow:0 0 0 2px rgba(220,38,38,.55);background:rgba(254,226,226,.7);}}
@media (prefers-reduced-motion:reduce){.com-page.com-ban-pick{animation:none;box-shadow:0 0 0 2px rgba(220,38,38,.55);}}
.com-ban-slot{display:block;width:0;}
.com-ban-mark{display:inline-grid;grid-template-rows:auto auto;align-items:center;justify-items:center;padding:0;border:2px solid #b91c1c;border-radius:8px;overflow:hidden;cursor:pointer;line-height:1.1;min-width:44px;background:#fff;}
.com-ban-mark b{display:block;width:100%;background:#dc2626;color:#fff;font-size:9.5px;letter-spacing:.06em;padding:2px 6px;}
.com-ban-mark small{display:block;font-size:9.5px;font-weight:800;color:#b91c1c;padding:1px 4px;}
.com-ban-back{display:block;margin-top:4px;font-size:11.5px;}
.com-ban-view img{display:block;max-width:100%;max-height:46vh;margin:0 auto 10px;border-radius:10px;border:2px solid var(--text);}
.com-ban-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:12.5px;}
.com-ban-dl dt{font-weight:800;opacity:.7;}
.com-ban-dl dd{margin:0;}
.com-taskbox{position:relative;display:inline-grid;justify-items:center;gap:1px;}
.com-taskbox > small{font-size:9.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;opacity:.7;}
.com-need-btn{cursor:pointer;background:#fff;}
.com-task-pop{position:absolute;top:100%;left:0;z-index:30;display:grid;gap:4px;min-width:200px;margin-top:4px;padding:8px;background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:12px;box-shadow:var(--shadow-sm);}
.com-task-opt{display:flex;align-items:center;gap:6px;font:inherit;font-size:12px;padding:3px 6px;border:none;border-radius:8px;background:none;cursor:pointer;text-align:left;}
.com-task-opt.on{background:rgba(0,0,0,.06);}
.com-page.com-page-ed .com-tasks-row{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px;padding:0 0 0 26px;}
.com-tasks-row small{font-size:11px;opacity:.7;}
.com-pill.com-pill-task{font-size:11px;padding:1px 9px;margin-left:4px;}
.com-dd-opt.com-dd-task{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.com-health{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px;}
.com-h-item{display:grid;gap:6px;}
.com-h-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12.5px;font-weight:900;padding:6px 12px;border:2px solid var(--text);border-radius:999px;cursor:pointer;}
.com-h-btn[disabled]{cursor:default;opacity:1;}
.com-h-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#fff;font-size:12px;font-weight:900;line-height:1;}
.com-h-ok{color:#16a34a;}
.com-h-some{background:#f97316;border:2px solid #fff;}
.com-h-most{color:#b91c1c;}
.com-h-ban{font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:1px 8px;border-radius:999px;background:#dc2626;color:#fff;border:1.5px solid #fff;}
.com-h-box{display:grid;gap:6px;padding:8px 10px;border:2px solid var(--text);border-radius:12px;background:var(--card-bg,#fff);font-size:12px;max-width:420px;}
.com-h-row{display:grid;gap:1px;}
.com-h-row small{opacity:.7;}
.com-taskreg{margin:4px 0 14px;}
.com-taskreg-t{display:inline-flex;align-items:center;gap:4px;}
.com-taskreg-t small{font-size:10.5px;opacity:.65;}
.com-taskreg-add{margin-top:8px;align-items:center;}
.com-taskreg-add input[type="color"]{flex:0 0 34px;width:34px;min-width:34px;height:28px;padding:0;border:2px solid var(--text);border-radius:8px;}
.com-taskreg-msg{font-size:12px;font-weight:800;}
.ugr-plain .ugr-sec-plain{border:none;padding:0;margin-top:6px;background:none;}
.ugr-plain .ugr-blk-plain{border-left:none;background:none;padding:0;margin-top:4px;}
/* ══ SPEC §165 — Platforms, Pages, Tasks in its pop-out · a Save under every part · Page Health's pop-outs · the list's platform rows ══ */
.com-pp-btn{display:flex;align-items:center;gap:10px;width:100%;margin:2px 0 14px;padding:10px 14px;border:2px solid var(--text);border-radius:14px;background:var(--card-bg,#fff);color:var(--text);font:inherit;cursor:pointer;text-align:left;}
.com-pp-btn b{font-size:14px;font-weight:900;}
.com-pp-btn small{font-size:11.5px;opacity:.7;}
.com-pp-btn i{margin-left:auto;font-style:normal;font-size:20px;font-weight:900;line-height:1;}
.com-pp-btn:focus-visible{outline:3px solid var(--text);outline-offset:2px;}
#com-pp .com-pp-body{display:flex;flex-direction:column;gap:2px;}
.com-pp-top{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:6px;border-bottom:2px solid var(--text);}
/* SPEC §182: the Platforms pop-out's buttons sit in its header, left of the ✕ — no row of their own */
.srr-overlay-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.srr-overlay-tools:empty{display:none;}
.srr-overlay-tools .com-pp-top{padding-bottom:0;border-bottom:0;}
.com-pp-sec{font-size:13px;font-weight:900;letter-spacing:.04em;margin:14px 0 6px;padding-bottom:4px;border-bottom:2px solid var(--text);}
.com-acc-add{border:1.5px solid;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:800;cursor:pointer;margin-left:8px;white-space:nowrap;}
.com-acc-add[disabled]{opacity:.45;cursor:not-allowed;}
.com-acc-sec{margin-top:8px;}
.com-acc-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.com-acc-card{display:inline-flex;align-items:center;gap:4px;border:2px solid;border-radius:12px;background:var(--card-bg,#fff);padding:4px 8px;max-width:100%;}
.com-acc-open{background:none;border:0;font-weight:800;font-size:12px;cursor:pointer;padding:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.com-acc-x{background:none;border:0;cursor:pointer;font-size:12px;opacity:.6;padding:0 2px;}
.com-acc-err{font-size:11px;color:#a8271f;margin-top:4px;}
.com-acc-modal{position:fixed;inset:0;z-index:7200;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;}
.com-acc-box{background:var(--card-bg,#fff);border:2px solid var(--text);border-radius:16px;box-shadow:rgba(0,0,0,.3) 8px 8px 0 0;padding:18px 20px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px;}
.com-acc-box .fg{display:flex;flex-direction:column;gap:4px;}
.com-acc-box input{padding:8px 10px;border:1.5px solid var(--text);border-radius:10px;font-size:13px;}
.com-acc-t{font-size:15px;font-weight:900;}
.com-acc-kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;word-break:break-all;}
.com-acc-kv span{opacity:.7;white-space:nowrap;}
.com-acc-no{opacity:.75;font-style:italic;}
.com-acc-acts{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:4px;}
#com-acc-msg{flex:1;font-size:11.5px;color:#a8271f;}
/* SPEC §182: the Session Pass pays from a Receipt (default) or a free sale of the Sales Register */
.pass-src{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 4px;font-size:12px;}
.pass-src-on{font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.pass-src-sr{display:inline-flex;align-items:center;gap:6px;font-weight:800;cursor:pointer;}
.pass-sr{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;}
.pass-sr-row{display:grid;grid-template-columns:auto auto auto 1fr auto auto;gap:4px 10px;align-items:center;text-align:left;border:1.5px solid var(--text);border-radius:10px;background:var(--card-bg,#fff);padding:6px 10px;font-size:11.5px;cursor:pointer;}
.pass-sr-row small{grid-column:1/-1;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pass-sr-row.on{background:#e7f6ec;border-color:#1f7a3d;box-shadow:0 0 0 2px #1f7a3d inset;}
.pass-sr-row.off{opacity:.45;cursor:not-allowed;}
.com-pp-editing{margin-right:auto;font-size:11.5px;font-weight:900;letter-spacing:.03em;color:#b45309;}
.com-taskreg-h{font-size:13.5px;font-weight:900;}
.com-taskreg.com-cat{margin:0;}
.com-part-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px;}
.com-part-msg{margin-right:auto;font-size:12px;font-weight:800;color:#1f7a3d;}
.com-part-msg.bad{color:#a8271f;}
.com-part-dirty .com-part-msg{color:#b45309;}
.com-part-dirty [data-com-partsave]{animation:ph-owe 1.2s ease-in-out infinite;}
.com-types .fl{margin-top:4px;}
.com-plat-row{border:2px solid var(--text);border-radius:10px;padding:4px 10px;}
.com-plat-row .com-fold{width:100%;}
.com-plat-row .com-fold>span:not(.com-pill),.com-plat-row .com-fold>i{opacity:.9;}
.com-plat-row .com-fold>span:not(.com-pill){margin-left:auto;}
.com-plat-name{font-size:12.5px;font-weight:900;}
.com-plat-for{font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;border:1.5px solid currentColor;}
.com-h-all{background:var(--text);color:var(--bg,#fbf6e6);}
#srr-overlay-title .com-h-title{cursor:default;font-size:14px;}
.com-hp-all{display:flex;flex-direction:column;gap:18px;}
.com-hp{display:flex;flex-direction:column;gap:8px;}
.com-hp-face{align-self:flex-start;cursor:default;}
.com-hp-sec{font-size:11px;font-weight:900;letter-spacing:.06em;border-bottom:1.5px solid var(--text);padding-bottom:2px;}
.com-hp-bans{display:grid;gap:6px;font-size:12px;}
.com-hp-days{display:flex;flex-direction:column;gap:6px;}
.com-hp-day{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 10px;align-items:start;padding:6px 0;border-bottom:1px dashed #d8d0c2;font-size:12px;}
.com-hp-date{font-size:12px;}
.com-hp-cells{display:flex;flex-wrap:wrap;gap:6px;}
.com-hp-posts{grid-column:2;display:flex;flex-direction:column;gap:3px;}
.com-hp-cell{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-weight:800;font-size:11.5px;border:1.5px solid currentColor;}
.com-hp-done{color:#1f7a3d;background:#ecfdf3;}
.com-hp-missed{color:#a8271f;background:#fef2f2;}
.com-hp-open{color:#b45309;background:#fff7ed;}
.com-hp-off{color:#475569;background:#f1f5f9;}
.com-hp-who{display:inline-block;padding:0 6px;border:1.5px solid;border-radius:999px;font-weight:800;color:var(--text);background:#fff;}
.com-hp-none{opacity:.6;}
.com-hp-post small{opacity:.7;}
@media (max-width:560px){.com-hp-day{grid-template-columns:1fr;}.com-hp-posts{grid-column:1;}}
/* SPEC §165: a DAILIES task still owed, and a Feedback door, breathe red */
.dlp-task.dlp-due,.dlp-pet.dlp-due{border-color:#c1272d;animation:ph-owe 1.2s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.dlp-task.dlp-due,.dlp-pet.dlp-due,.com-part-dirty [data-com-partsave]{animation:none;}}
/* SPEC §165: the Customer APPT. Photo */
.carm-proof{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;}
.carm-proof .carm-proof-ph{flex:1 1 220px;min-height:96px;}
.carm-proof [data-carm-proof]{align-self:center;}
.carm-proof-note{display:block;margin-top:6px;font-size:11.5px;opacity:.75;}
.carm-proof-done{margin-top:14px;padding:8px 12px;border:2px solid #1f7a3d;border-radius:12px;background:#ecfdf3;color:#1f7a3d;font-size:12.5px;font-weight:800;}
.carm-proof-wait{margin-top:14px;padding:8px 12px;border:2px dashed #b45309;border-radius:12px;color:#b45309;font-size:12px;font-weight:800;}
.jl-sk-legend{font-size:11.5px;}
/* SPEC §167 — All product sales: 20 rows tall (newest first), the rest scroll; the head stays */
.psa-scroll{max-height:var(--psa-h,876px);overflow-y:auto;}   /* 20 rows of 43px + the head, measured on the preview */
.psa-scroll thead th{position:sticky;top:0;background:var(--card-bg,#fff);z-index:1;}
/* SPEC §167 — Login Access: green = a device approved · red = waiting for the owner · clear = no device yet */
.lga-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12.5px;margin:2px 0 4px;}
.lga-bs{display:inline-flex;gap:4px;vertical-align:middle;}
.lga-b{min-width:22px;height:22px;padding:0 5px;border-radius:6px;border:2px solid var(--text);background:transparent;color:var(--text);font-size:11.5px;font-weight:900;line-height:1;cursor:pointer;}
.lga-b.lga-on{background:#1f9d55;border-color:#1f9d55;color:#fff;}
.lga-b.lga-wait{background:#d93025;border-color:#d93025;color:#fff;animation:lga-breathe 1.6s ease-in-out infinite;}
@keyframes lga-breathe{0%,100%{box-shadow:0 0 0 0 rgba(217,48,37,.55);}50%{box-shadow:0 0 0 4px rgba(217,48,37,0);}}
.org-node .lga-bs{margin-right:5px;}
.org-node .lga-b{min-width:16px;height:16px;padding:0 3px;border-radius:4px;border-width:1.5px;font-size:9.5px;}
.lga-plus{width:22px;height:22px;border-radius:6px;border:2px dashed var(--text);background:transparent;color:var(--text);font-size:15px;font-weight:900;line-height:1;cursor:pointer;padding:0;}
.lga-pop{font-size:12.5px;min-width:min(520px,80vw);}
.lga-st{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.04em;margin-bottom:10px;border:2px solid var(--text);}
.lga-st.lga-on{background:#1f9d55;border-color:#1f9d55;color:#fff;}
.lga-st.lga-wait{background:#d93025;border-color:#d93025;color:#fff;}
.lga-kv{display:flex;gap:10px;padding:3px 0;}
.lga-kv span{width:110px;flex:none;opacity:.65;}
.lga-acts{display:flex;gap:8px;margin:12px 0 4px;}
.lga-msg{min-height:1em;color:#b42318;font-size:12px;margin:4px 0;}
.lga-log-h{font-size:10.5px;font-weight:900;letter-spacing:.08em;opacity:.65;margin:12px 0 4px;}
.lga-log{max-height:260px;overflow-y:auto;}
.lga-log table td,.lga-log table th{padding:5px 8px;font-size:11.5px;}
/* SPEC §168 — Customer Acquisition: Acquired (n), Platform / Page Name, WALK, SOLD, MISSING; the Violation Penalty in Admin → Permission */
.carm-acq{font-size:12px;font-weight:800;opacity:.75;margin-left:6px;}
#carm-platform,#carm-page{width:100%;}
.carm-sold-tag{border-color:#1f7a3d;color:#1f7a3d;}
.carm-sold-box{margin:12px 0 4px;padding:9px 12px;border:2px solid #1f7a3d;border-radius:12px;background:#ecfdf3;color:#14532d;font-size:12.5px;}
.carm-sold-box small{display:block;margin-top:3px;opacity:.8;}
.carm-missing{background:#c1272d;border:2px solid #c1272d;color:#fff;font-weight:900;letter-spacing:.04em;}
.carm-missing:hover{background:#a01f24;}
.perm-viol{display:block;margin-top:5px;font-size:11.5px;font-weight:800;color:#b42318;}
.perm-viol input{width:58px;margin:0 3px;padding:2px 4px;font-size:11.5px;}

/* SPEC §176: History, left of a pop-out's ✕ · its pop-out · Pets lands on Pet Home (the last section is at least a screen tall) */
.ff-modal-hist{position:absolute;top:16px;right:64px;height:38px;padding:0 14px;border:2px solid var(--text);border-radius:999px;background:var(--bg);color:var(--text);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;z-index:10;}
.ff-modal-hist:hover{background:var(--text);color:var(--bg);}
.svh-who{margin:0 0 8px;font-size:13px;}
.svh-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.svh-tab{font:inherit;font-size:12px;font-weight:800;padding:4px 12px;border:2px solid #121212;border-radius:999px;background:#fff;cursor:pointer;}
.svh-tab.on{background:#121212;color:#fff;}
.svh-list{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto;}
.svh-row{border:1.5px solid rgba(18,18,18,.18);border-radius:12px;padding:8px 10px;background:#fff;}
.svh-row.svh-open{border-color:#3aa0e8;box-shadow:0 0 0 2px rgba(58,160,232,.18);}
.svh-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px;}
.svh-kind{font-size:10.5px;font-weight:900;letter-spacing:.05em;padding:2px 8px;border-radius:999px;color:#fff;background:#2a6fdb;}
.svh-kind.svh-groom{background:#c2410c;}
.svh-st{margin-left:auto;font-size:12px;font-weight:800;opacity:.75;}
.svh-sub{font-size:12px;opacity:.75;margin-top:2px;}
.svh-pay{font-size:12px;margin-top:4px;}
.svh-pay b{font-weight:900;}
.svh-none{font-size:12px;opacity:.6;margin-top:4px;}
#sec-pets{min-height:100vh;}

/* SPEC §178: a detail and its photo in one row · Search · the stars (hollow, then glowing yellow) · General's topics · the editor's photo */
.pb-row{display:flex;gap:12px;align-items:flex-start;padding-right:48px;}
.pb-row .pb-entry{flex:1;min-width:0;padding-right:0;}
.pb-row .pb-photo{flex:0 0 auto;width:min(160px,34%);max-height:160px;margin:0;}
.pb-entries li:has(.pb-entry-tools){padding-top:30px;}   /* the tools (📷 ⊖ ✎ ✕) stand on their own line above the row — never over its words or photo */
.pb-entries li:has(.pb-entry-tools) .pb-row{padding-right:0;}
.pb-search{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:7px 14px;border:2px solid #121212;border-radius:999px;background:#fff;margin:0 0 12px;}
.pb-star{font:inherit;font-size:26px;line-height:1;background:none;border:0;cursor:pointer;color:#9a9a9a;padding:0 2px;}
.pb-star.on{color:#f5c518;text-shadow:0 0 6px rgba(245,197,24,.95),0 0 16px rgba(245,197,24,.6);}
.pb-grp{margin-bottom:16px;}
.pb-grp-h{display:flex;align-items:center;gap:6px;border-bottom:1.5px solid rgba(18,18,18,.25);margin-bottom:6px;}
.pb-grp-t{font:inherit;font-size:19px;font-weight:800;background:none;border:0;cursor:pointer;text-align:left;padding:2px 0;color:inherit;}
.pb-grp-t:hover{text-decoration:underline;}
.pb-draft-ph{display:inline-flex;align-items:center;gap:4px;margin-right:auto;}
.pb-draft-ph img{height:46px;border:2px solid #121212;border-radius:8px;}
.pb-editor-actions .pb-photo-add{margin-left:0;align-self:center;white-space:nowrap;}
.pb-entries mark{background:#fde68a;padding:0 2px;border-radius:3px;}

/* SPEC §179: Ads — its blue button beside BAN, every page flashing blue while it is pressed, a page's Ads tag, the pop-out's blue title */
.com-ads-top{font:inherit;font-size:11px;font-weight:900;letter-spacing:.05em;padding:4px 12px;border:2px solid #1d4ed8;border-radius:999px;background:#2563eb;color:#fff;cursor:pointer;margin-right:6px;}
.com-ads-top.on{background:#fff;color:#1d4ed8;box-shadow:0 0 0 3px rgba(37,99,235,.25);}
.com-ads-pickhint{margin:6px 0 2px;font-size:12px;font-weight:800;color:#1d4ed8;}
.com-page.com-ads-pick{cursor:pointer;border-radius:8px;animation:com-ads-pick 2.4s ease-in-out infinite;}
@keyframes com-ads-pick{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0);background:transparent;}50%{box-shadow:0 0 0 2px rgba(37,99,235,.55);background:rgba(219,234,254,.75);}}
@media (prefers-reduced-motion:reduce){.com-page.com-ads-pick{animation:none;box-shadow:0 0 0 2px rgba(37,99,235,.55);}}
.com-ads-tag{display:inline-block;font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;vertical-align:middle;}
.srr-ads{color:#2563eb;}
.com-ads-now{margin:0;font-size:12.5px;color:#1d4ed8;}
.com-ads-emps{display:flex;gap:6px;flex-wrap:wrap;}
.com-ads-emp{font:inherit;font-size:12.5px;font-weight:800;padding:5px 12px;border:2px solid #1d4ed8;border-radius:999px;background:#fff;color:#1d4ed8;cursor:pointer;}
.com-ads-emp.on{background:#2563eb;color:#fff;}
.com-ads-form select{font:inherit;width:100%;max-width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid #121212;border-radius:10px;background:#fff;}

/* ══ SPEC §183 ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Boarding and Grooming calendars: 15 % more on top and at the bottom (the wider card is the inline max-width in the page) */
#groom-calendar-modal .gcal-cell,#board-calendar-modal .gcal-cell{min-height:146px;}
@media(max-width:640px){#groom-calendar-modal .gcal-cell,#board-calendar-modal .gcal-cell{min-height:74px;}}
/* a date in full */
.svd{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start;}
.svd-col{display:flex;flex-direction:column;gap:8px;min-width:0;}
.svd-head{font-size:13px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;display:flex;justify-content:space-between;border-bottom:2px solid var(--text);padding-bottom:5px;}
.svd-card{display:block;width:100%;text-align:left;font:inherit;background:var(--card-bg,#fff);color:var(--text);border:1.5px solid var(--text);border-radius:12px;padding:10px 12px;cursor:pointer;}
.svd-card:hover{background:var(--accent-2);}
.svd-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;font-size:14.5px;font-weight:800;}
.svd-line{font-size:12.5px;margin-top:4px;opacity:.85;overflow-wrap:anywhere;}
.svd-none{font-size:12.5px;opacity:.6;padding:6px 0;}
/* + Pass */
.bkc-head{flex-wrap:wrap;}
.bkc-code{font:800 11px/1 ui-monospace,Consolas,monospace;border:1.5px solid var(--text);border-radius:999px;padding:4px 9px;margin-left:8px;background:var(--card-bg,#fff);}
.pass-chips{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:6px;}
.pass-chip{font:inherit;font-size:11.5px;font-weight:800;border:1.5px solid;border-radius:999px;padding:5px 11px;cursor:pointer;background:#fff;line-height:1.15;}
.pass-chip-ok{border-color:#1f8f5f;color:#15643f;background:#ecf7f1;}
.pass-chip-wait{border-color:#b7791f;color:#8a5a00;background:#fdf6e6;animation:ph-owe 1.2s ease-in-out infinite;}
.pass-row-btn{display:block;width:100%;text-align:left;font:inherit;background:none;color:inherit;border:0;border-top:1px solid rgba(0,0,0,.12);padding:9px 2px;cursor:pointer;font-size:12.5px;}
.pass-row-btn:hover{background:rgba(0,0,0,.04);}
.pass-det{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;font-size:13px;margin:8px 0 12px;}
.pass-det dt{font-weight:800;opacity:.7;}
.pass-det dd{margin:0;overflow-wrap:anywhere;}
.pass-bal{font-size:15px;font-weight:900;margin:10px 0 4px;}
.pass-use{display:flex;justify-content:space-between;gap:10px;width:100%;font:inherit;font-size:12.5px;text-align:left;background:none;color:inherit;border:0;border-top:1px solid rgba(0,0,0,.12);padding:7px 2px;cursor:pointer;}
.pass-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.pass-del{background:#fff;color:#b91c1c;border:1.5px solid #dc2626;}
/* DAILIES: Report an issue */
.dlp-task{position:relative;}
.dlp-report{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:11px;font-weight:800;color:#b91c1c;background:#fef2f2;border:1.5px solid #dc2626;border-radius:999px;padding:3px 9px;cursor:pointer;}
.dlp-report svg{width:12px;height:12px;}
.dlp-task .dl-reported{color:#8a5a00;border:1.5px solid #b7791f;background:#fdf6e6;}
.dlp-task .dl-cleared{color:#15643f;border:1.5px solid #1f8f5f;background:#ecf7f1;}
.watchdog .dl-reported{color:#8a5a00;}
.watchdog .dl-cleared{color:#15643f;}
.tir-wrap{position:fixed;inset:0;z-index:7000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:18px;}
.tir-card{width:min(480px,100%);background:var(--card-bg,#fff);color:var(--text);border:2px solid var(--text);border-radius:16px;box-shadow:rgba(0,0,0,.3) 6px 6px 0 0;padding:18px 20px;}
.tir-task{font-size:12px;opacity:.7;margin-bottom:10px;}
.tir-q{font-size:15px;font-weight:900;margin-bottom:10px;}
.tir-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.tir-kind{font:inherit;font-size:13px;font-weight:800;border:1.5px solid var(--text);border-radius:999px;padding:7px 14px;background:#fff;color:var(--text);cursor:pointer;}
.tir-kind.on{background:#c1272d;border-color:#c1272d;color:#fff;}
.tir-box{width:100%;min-height:96px;font:inherit;font-size:13px;border:1.5px solid var(--text);border-radius:10px;padding:8px 10px;box-sizing:border-box;}
.tir-msg{font-size:12px;color:#b91c1c;min-height:16px;margin-top:6px;}
.tir-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
/* Admin: Stack-up */
.resp-stack-fg{min-width:128px;}