.access-login .identity-art{background-image:linear-gradient(140deg,#163d34d9,#173d34d9),url(/images/calm-camp.webp);background-size:cover;background-position:center}
.access-login .identity-brand p{max-width:280px;line-height:2}
.access-login .identity-card{max-width:440px}
.access-private-note{font-size:11px;color:#829078;line-height:1.8;margin-top:24px}
.access-setup-link{font-size:12px;justify-content:center;margin-top:8px}
.access-modal{max-width:650px}
.access-modal .form-body{overflow-y:auto}
.access-modal .modal-header h2{font-size:20px}
.access-profile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f0f4eb;border:1px solid #dee5d7;padding:14px 16px;border-radius:12px;color:#2a503b}
.access-profile strong{font-size:15px}.access-profile bdi{font-size:12px;color:#6d8060}
.employee-card{display:grid;grid-template-columns:1fr auto;gap:12px 16px;background:linear-gradient(125deg,#163f33,#2a5540);color:#fff7e9;border:1px solid #bca775;padding:22px}
.employee-card-label{grid-column:1/-1;color:#d0bd90;font-size:10px;letter-spacing:.2px}
.employee-card strong{font-size:19px;line-height:1.8;overflow-wrap:anywhere}
.employee-card .access-role{align-self:start;background:#ffffff12;border:1px solid #c5b58466;color:#e9d9af}
.employee-card dl{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:3px 0 0;padding-top:15px;border-top:1px solid #ffffff20}
.employee-card dt{font-size:10px;color:#c1cdbb;margin-bottom:5px}.employee-card dd{margin:0;font-size:15px;overflow-wrap:anywhere}.employee-card bdi{font-size:15px;color:#fff7e9}
.employee-search{display:block;margin:0 0 12px}.employee-search input{box-sizing:border-box;width:100%;border:1px solid #dce4d1;border-radius:10px;background:#fff;padding:12px 14px;font:inherit;font-size:12px;color:#34543d}
.employee-search input:focus{outline:2px solid #79956a;outline-offset:2px}
.access-account-row{flex-wrap:wrap}.access-account-row .employee-summary{flex:1 1 220px}.access-account-row .employee-actions{display:flex;gap:6px 16px;flex-wrap:wrap;flex:1 1 100%;border-top:1px solid #edf0e7;padding-top:5px}
.access-account-row .employee-number{color:#45623d;font-size:12px}.access-account-row .employee-state{background:#edf4e7;padding:3px 7px;border-radius:5px;color:#527147;margin-inline-start:auto}
.access-account-row.is-disabled{background:#f7f5f1}.access-account-row.is-disabled .employee-state{background:#f0e4db;color:#855336}
.access-account-row .employee-danger{color:#955438}
.employee-target{font-size:12px;color:#5c7451;line-height:1.8;margin:0}.employee-status-note{font-size:13px;line-height:1.9;background:#f6f2e9;padding:14px;border-radius:10px;color:#795f37;margin:0}
.access-role{margin-inline-start:auto;background:#dce7d2;color:#466237;border-radius:6px;font-size:10px;padding:3px 8px}
.access-help{font-size:12px;line-height:1.9;color:#6d7c61;margin:17px 0}
.access-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:15px}
.access-account-list{display:flex;flex-direction:column;gap:8px}
.access-account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:white;border:1px solid #e1e6d9;border-radius:11px}
.access-account-row>div{display:flex;align-items:baseline;gap:5px 10px;flex-wrap:wrap;min-width:0}
.access-account-row strong{font-size:13px;overflow-wrap:anywhere;width:100%;color:#34543d}
.access-account-row bdi{font-size:11px;color:#718363;overflow-wrap:anywhere}
.access-account-row span{font-size:10px;color:#849074}
.access-account-row button{font-size:11px;white-space:nowrap;min-height:36px}
.access-form h3{color:#2a523a;font-size:16px;margin:10px 0}
.access-form select{width:100%;min-height:46px;border:1px solid #dce4d1;background:#fff;border-radius:10px;padding:10px;color:#36532c;font-family:inherit;font-size:13px}
.access-legacy .header-import,.access-legacy .header-actions>.btn-cream,.access-legacy .detail-buttons,.access-legacy .map-tools>button:last-child,.access-legacy .empty-sidebar>.btn,.access-legacy .empty-sidebar>.text-button{display:none}
.notification-bell{position:relative;display:grid;place-items:center;width:42px;height:42px;min-width:42px;border-radius:12px;border:1px solid #ffffff30;background:#ffffff08;color:#e8dec5}
.notification-bell:hover{background:#ffffff15}.notification-bell>span{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;border-radius:20px;padding:0 4px;background:#d2b476;color:#1b3c31;border:2px solid #20473c;font-family:Arial,sans-serif;font-size:10px;display:grid;place-items:center;font-weight:700}
.notification-panel{max-width:520px;max-height:88dvh}
.notification-panel .modal-header h2{font-size:21px}.notification-panel .modal-header .icon-btn{font-size:26px;color:#6c805c}
.notification-actions{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid #e3e8db;flex-wrap:wrap}
.notification-actions>span{font-size:12px;color:#436844;margin-inline-end:auto}
.notification-actions button{font-size:11px;min-height:30px}
.notification-hint{font-size:10px;color:#7a876e;line-height:1.8;margin:0;padding:10px 20px;background:#f8faf3}
.notification-list{padding:13px 16px 20px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.notification-empty{padding:30px 15px;color:#77866d;font-size:13px;line-height:1.9;text-align:center}
.notification-item{background:#fff;border:1px solid #e1e7d9;border-radius:13px;padding:15px 16px;position:relative;overflow-wrap:anywhere}
.notification-item.is-unread{background:#f0f6e9;border-color:#ccdcbc;border-inline-start:3px solid #6d9154}
.notification-item>strong{display:block;color:#2d5035;font-size:14px;margin-bottom:5px}
.notification-item>p{font-size:12px;color:#567448;line-height:1.8;margin:0 0 3px}
.notification-item>.notification-owner{color:#7d8d70;font-size:11px}
.notification-item time{display:block;color:#8b957c;font-size:10px;margin-top:7px}
.notification-item>button{margin-top:8px;min-height:30px;font-size:11px}
.notification-toast,.access-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1100;background:#244d3e;color:#faf5e8;padding:13px 20px;border:1px solid #c3b185;border-radius:12px;box-shadow:0 8px 30px #143b3033;font-size:13px;max-width:calc(100% - 30px);line-height:1.8}
@media(max-width:760px){
 .access-modal .modal-header h2{font-size:18px}.access-modal .form-body{padding:16px}.access-profile{padding:12px}.access-profile strong{font-size:14px}
 .access-actions .btn{font-size:11px;padding:10px 12px}.access-form input,.access-form select,.employee-search input{font-size:16px!important}
 .notification-panel{max-height:94dvh;border-radius:16px}.notification-panel .modal-header{padding:16px}.notification-panel .modal-header h2{font-size:18px}
 .notification-actions{padding:10px 15px;gap:10px}.notification-actions button{min-height:38px}.notification-list{padding:10px 12px 16px}.notification-item{padding:13px}
 .notification-toast,.access-toast{font-size:12px;bottom:14px;min-width:240px;text-align:center}
}

/* Keep account controls together in normal flow at every viewport width. */
.app-header .header-actions{flex-direction:row;flex-wrap:wrap;gap:10px}
.header-account-actions{display:flex;align-items:center;flex-direction:row;direction:rtl;gap:8px;flex:0 0 auto}
.app-header .header-account-actions .account-button,.app-header .header-account-actions .notification-bell{position:relative;inset:auto;display:grid;place-items:center;width:44px;height:44px;min-width:44px;flex:0 0 44px;border:1px solid #ffffff38;border-radius:12px;background:#ffffff08;color:#eee9d6}
.header-account-actions .account-button:hover,.header-account-actions .notification-bell:hover{background:#ffffff18}
.header-account-actions button:focus-visible{outline:2px solid #e8d4a3;outline-offset:3px}
.header-account-actions .account-button svg{width:21px;height:21px}
@media(max-width:760px){
 .app-header .header-actions{width:100%;padding-inline:0;position:static;gap:8px;justify-content:flex-start;align-items:center}
 .header-account-actions{margin-inline-end:auto;order:0}
 .header-actions>.btn-cream{order:1}.header-actions>.header-import{order:2}
 .app-header .header-actions>.btn{min-height:44px;padding:9px 11px;gap:6px;white-space:nowrap;flex:0 0 auto}
}
@media(max-width:359px){
 .header-account-actions{flex-basis:100%;margin-inline-end:0}
 .app-header .header-actions>.btn{flex:1 1 auto;justify-content:center}
}