#connected-message{padding:12px 16px;border-left:3px solid #ed8669;background:#f9eee7;line-height:1.5;max-width:760px}
#connected-message.is-error{border-left-color:#9d3023;background:#faeae6;color:#7a2418}
#verification-panel{margin:16px 0;padding:24px;background:#fff;border:1px solid #deded5;border-radius:16px}
#verify-code{margin-top:20px}
#invitation-result input{display:block;width:100%;box-sizing:border-box;margin:16px 0;padding:12px;border:1px solid #c7d2ca;border-radius:8px}
.connected-logout{margin:12px 0}
.dashboard-side .connected-logout{color:#fffdf9;border-color:#8caaa7;background:transparent}
.dashboard-side .connected-logout:hover{background:rgba(255,255,255,.08);border-color:#fffdf9;color:#fffdf9}
#person-categories{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#person-categories label{display:flex;gap:8px;align-items:center}
#person-categories input{width:auto}
button:disabled{opacity:.6;cursor:wait}
[hidden]{display:none!important}
@media(max-width:600px){#person-categories{grid-template-columns:1fr}}
.connected-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:32px 0}
.connected-steps li{border-top:1px solid #cad6ce;padding-top:20px;line-height:1.6}
.connected-steps span{font:600 28px Outfit,sans-serif;color:#bd563d}
.connected-steps h2{font:600 22px Outfit,sans-serif;margin:10px 0}
.connected-steps p{color:#617471}
.dashboard-main>header p{max-width:660px;line-height:1.6}
.side-user small{display:block;margin-top:6px}
.side-user{flex-wrap:wrap;overflow-wrap:anywhere}
@media(max-width:850px){.side-user small{display:none}.side-user{flex-wrap:nowrap}}
.team-controls label{display:grid;gap:8px;font-size:14px}
.team-controls select{min-height:46px;border:1px solid #cad6ce;border-radius:8px;padding:10px;background:white;color:#173a3e;font:inherit}
.form-error,#employer-message.is-error{color:#9d3023}
#connected-dialog .category-choice{display:block}
#connected-dialog h2{font:600 25px Outfit,sans-serif}
.finance-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:20px}
[data-employer-page="budgets"] fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:10px}
[data-employer-page="budgets"] .management-table label{margin:0;display:grid;gap:8px}
.dashboard-main summary{cursor:pointer;font-weight:600}
@media(max-width:700px){.connected-steps{grid-template-columns:1fr;gap:12px}.dashboard-main>header{align-items:flex-start}.finance-actions .button{max-width:100%;white-space:normal}}
@media(max-width:540px){[data-employer-page="budgets"] .management-table form{grid-template-columns:1fr}[data-employer-page="budgets"] .management-table form .small-action{height:auto;min-height:48px}}
.password-field{display:block;position:relative;margin-top:7px}
.password-field input{margin-top:0;padding-right:44px}
.password-toggle{position:absolute;top:0;bottom:0;right:2px;width:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;border-radius:12px}
.password-toggle:hover{color:var(--ink)}
.password-toggle:focus-visible{outline:2px solid var(--coral);outline-offset:-2px}
.password-toggle svg{width:18px;height:18px;pointer-events:none}
.password-toggle .icon-eye-off{display:none}
.password-toggle.is-visible .icon-eye{display:none}
.password-toggle.is-visible .icon-eye-off{display:block}
.employee-balance-line{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;margin:20px 0;border-radius:14px;background:#e1f1ea}
.employee-balance-line span{font-size:12px;color:var(--ink-soft)}
.employee-balance-line strong{font:700 20px var(--display);letter-spacing:-.6px}
.employee-search{display:block;margin:20px 0 0;font-size:12px;font-weight:700}
.employee-search input{width:100%;height:46px;margin-top:7px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);font:400 15px var(--body);outline:0}
.employee-search input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(250,112,73,.14)}
.operation-credit b{color:#2f7c5f}
.perqo-budget-card{width:100%;box-sizing:border-box;max-width:360px;padding:22px 24px;border-radius:20px;background:var(--ink);color:white;box-shadow:var(--shadow);margin:24px 0}
.perqo-budget-card .pbc-top,.perqo-budget-card .pbc-bottom{display:flex;justify-content:space-between;align-items:center;font:400 10px var(--mono);letter-spacing:.03em}
.perqo-budget-card .pbc-badge{color:#b8e7d5}
.perqo-budget-card .pbc-badge:before{content:'';width:5px;height:5px;margin-right:4px;display:inline-block;background:#b8e7d5;border-radius:50%}
.perqo-budget-card .pbc-chip{width:30px;height:22px;border-radius:5px;margin:18px 0 12px;background:linear-gradient(110deg,#e7bf61,#8b6c24)}
.perqo-budget-card .pbc-balance{font:700 32px var(--display);letter-spacing:-1px;margin:0}
.perqo-budget-card .pbc-balance small{font:400 11px var(--mono);letter-spacing:0}
.perqo-budget-card .pbc-bottom{margin-top:16px}
.perqo-budget-card .pbc-bottom strong{font-weight:600}
.employee-header-actions{display:flex;align-items:center;gap:8px}
.employee-header-actions .employee-profile-link{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:99px;background:#f0eee5;color:var(--ink);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.employee-header-actions .employee-profile-link:hover{background:#e6e2d5}
.employee-header-actions .link-icon{font-size:13px}
.employee-header-actions #unread-count:not(:empty){display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--coral);color:white;font:600 9px var(--mono)}
.employee-header-actions .connected-logout{margin:0;padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:white;color:var(--ink);font:600 12px var(--body);cursor:pointer;white-space:nowrap}
.employee-header-actions .connected-logout:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:480px){.employee-header-actions{gap:5px}.employee-header-actions .employee-profile-link,.employee-header-actions .connected-logout{padding:8px 10px;font-size:0}.employee-header-actions .employee-profile-link .link-icon{font-size:15px}.employee-header-actions .connected-logout:before{content:'⏻';font-size:15px}.employee-header-actions #unread-count:not(:empty){font-size:9px}}
.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}
.category-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;border:1px solid #dfe5de;border-radius:18px;background:white;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.category-tile:hover{border-color:var(--coral)}
.category-tile-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--mint)}
.category-tile strong{font:700 15px var(--display)}
.category-tile small{color:var(--ink-soft);font-size:11px}
.back-link{border:0;background:none;padding:0;margin-bottom:14px;color:var(--coral);font:600 12px var(--body);cursor:pointer}
.merchant-code{display:block;margin-top:4px;color:#556f64;font:500 10px var(--mono)}
.employee-quickpay{margin-top:20px;display:grid;gap:14px;max-width:360px}
.employee-quickpay label{display:block;font-size:12px;font-weight:700}
.employee-quickpay input{width:100%;height:49px;margin-top:7px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);font:400 15px var(--body);outline:0;text-transform:uppercase}
.employee-quickpay input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(250,112,73,.14)}
#quick-pay-error{color:#9b3025;font-size:13px}
#benefit-dialog #benefit-detail label{display:block;margin:16px 0;font-size:12px;font-weight:700}
#benefit-dialog #benefit-detail input{display:block;width:100%;box-sizing:border-box;height:46px;margin-top:7px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);font:400 15px var(--body);outline:0}
#benefit-dialog #benefit-detail input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(250,112,73,.14)}
.status-badge{display:inline-block;padding:5px 11px;border-radius:99px;font:600 11px var(--mono);letter-spacing:.02em}
.status-active{background:#def3e7;color:#1f6e4f}
.status-invited{background:#fdecc8;color:#8a5a12}
.status-disabled{background:#ece9e2;color:#6b675c}
.status-left{background:#f7e2dc;color:#9b3025}
.small-action{background:#f6f4ee;border-color:#e3e0d5;font-weight:600;transition:border-color .15s,color .15s,background .15s,box-shadow .15s,transform .15s}
.small-action:hover{background:white;border-color:var(--ink);color:var(--ink);box-shadow:0 2px 6px rgba(23,58,62,.1);transform:translateY(-1px)}
.small-action:active{transform:translateY(0);box-shadow:none}
.small-action:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.small-action-danger{color:#9b3025;background:#fbf1ee;border-color:#f0d4cc}
.small-action-danger:hover{background:#f7e2dc;border-color:#9b3025;color:#9b3025}
.month-end-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;margin-bottom:20px;border-radius:16px;background:#fbe6db;border:1px solid #f0c2a8}
.month-end-banner strong{display:block;font:700 16px var(--display)}
.month-end-banner p{margin:4px 0 0;font-size:13px;color:#7a4a2c}
.finance-status{font-weight:600}
.finance-status-pending{color:#8a5a12}
.finance-status-funded{color:#1f6e4f}
@media(max-width:600px){.month-end-banner{flex-direction:column;align-items:stretch;text-align:left}.month-end-banner .button{width:100%;text-align:center}}
.perqo-budget-card{position:relative}
.perqo-budget-card.pbc-closed .pbc-balance,.perqo-budget-card.pbc-closed .pbc-chip,.perqo-budget-card.pbc-closed .pbc-bottom{filter:grayscale(1);opacity:.35}
.pbc-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;border-radius:20px;background:rgba(11,26,28,.55);backdrop-filter:blur(1px)}
.pbc-overlay span{text-align:center;color:white;font:600 13px var(--body);line-height:1.4}
.employee-refer{margin-top:32px;padding:22px;border-radius:16px;background:#f0eee5}
.employee-refer h2{margin:0 0 8px;font:700 19px var(--display)}
.employee-refer p{margin:0 0 14px;color:var(--ink-soft);font-size:13px}
.employee-refer input{display:block;width:100%;box-sizing:border-box;margin-bottom:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);font:400 13px var(--mono)}
/* .management-panel forms outside a <dialog> (Super Admin: merchant create/edit)
   never got the "field below its label" rule — that rule only ever targeted
   dialog label input, because every other screen puts its forms in a dialog. */
.management-panel label input:not([type=checkbox]),.management-panel label select{display:block;width:100%;box-sizing:border-box;margin-top:8px}
.management-panel .form-row{margin:12px 0}
.management-panel .form-row label{margin:0}
/* #account-form (merchant self-service "Mon établissement" edit form) sits
   directly in the employee-style single-page flow, outside any <dialog> or
   .management-panel — same gap as above, same fix, scoped to this form. */
#account-form{display:grid;gap:14px;max-width:420px;margin:20px 0}
#account-form label{display:block;font-size:12px;font-weight:700}
#account-form input{display:block;width:100%;box-sizing:border-box;height:46px;margin-top:7px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);font:400 15px var(--body);outline:0}
#account-form input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(250,112,73,.14)}
#account-form button{justify-self:start}
.merchant-qr{margin:16px 0;max-width:220px}
.merchant-qr svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:white;padding:12px;box-sizing:border-box}
#scan-video{display:block;width:100%;max-height:60vh;margin:16px 0;border-radius:14px;background:#0b1a1c;object-fit:cover}