:root{font-family:Arial,system-ui,sans-serif;color:#212121;background:#f2eee7;font-synthesis:none;--yellow:#ffd321;--ink:#212121;--muted:#6d6a63;--line:#e4e0d8;--green:#247a51}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}button,input,textarea,select{font:inherit}.top{height:62px;background:#212121;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 920px)/2));gap:14px}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.mark{background:var(--yellow);color:#212121;padding:7px 9px;border-radius:4px;font-size:13px}.environment{font-size:10px;letter-spacing:.09em;color:#f4df8a}main{width:min(100% - 32px,780px);margin:34px auto}.welcome{padding:14px 2px 23px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;color:#817a6a;margin:0 0 8px}.welcome h1{font-size:clamp(28px,6vw,42px);letter-spacing:-.04em;margin:0 0 9px}.welcome>p:last-child{color:var(--muted);margin:0}.tabs{display:flex;gap:8px;overflow:auto;margin-bottom:14px}.tab{border:1px solid var(--line);border-radius:999px;background:#fff;padding:11px 16px;white-space:nowrap;color:#5d5a54;cursor:pointer}.tab.active{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:700}.panel{background:#fff;border:1px solid #e9e5dd;border-radius:15px;padding:clamp(18px,4vw,30px);box-shadow:0 8px 28px #352b1510}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}.section-title h2{font-size:22px;margin:0;letter-spacing:-.025em}.pill{border-radius:999px;background:#fff6d0;padding:8px 12px;font-size:12px;font-weight:700}form{display:grid;gap:17px}label{display:grid;gap:7px;font-size:13px;font-weight:700}label small{font-size:12px;font-weight:400;color:var(--muted);line-height:1.45}input,select,textarea{width:100%;border:1px solid #d9d5cd;background:#fff;border-radius:8px;padding:12px;color:var(--ink);min-width:0}textarea{resize:vertical;line-height:1.5}input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #ffd32188;outline-offset:2px;border-color:#8a6d00}.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.recipient{display:flex;gap:12px;padding:15px;background:#faf8f3;border-radius:10px}.recipient.required{background:#fff9dc;border:1px solid #f4e7aa}.recipient-icon{height:27px;width:27px;flex:0 0 auto;background:var(--yellow);border-radius:50%;display:grid;place-items:center;font-weight:700}.recipient strong{font-size:13px}.recipient p{font-size:12px;line-height:1.5;color:var(--muted);margin:5px 0 0}.button{border:0;border-radius:8px;padding:13px 16px;font-weight:700;cursor:pointer}.primary{background:var(--yellow);color:#171717}.primary:hover{background:#f1c400}.secondary{background:#f4f2ed;color:#333;border:1px solid var(--line)}.compact{padding:9px 12px;font-size:12px}.primary span{float:right;margin-left:15px}.callout{padding:13px 15px;background:#f5f3ee;border-left:3px solid var(--yellow);border-radius:4px;color:#555;font-size:13px;line-height:1.5;margin:0 0 18px}.callout.error{background:#fff0ed;border-color:#c24132;color:#8e2b21}.notice{padding:12px 15px;margin:0 0 16px;border-radius:8px;background:#fff4c2;color:#4e441d;font-size:13px;line-height:1.45}.notice.ok{background:#eaf5ee;color:#24583c}.notice.bad{background:#fff0ed;color:#8e2b21}.hidden{display:none!important}.review-data{margin:0 0 19px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.review-data div{border-bottom:1px solid var(--line);padding:12px 0}.review-data dt{color:var(--muted);font-size:11px;margin-bottom:5px}.review-data dd{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.actions>*{flex:1}.empty{padding:20px;color:var(--muted);background:#faf9f6;border-radius:9px;font-size:13px}.record{padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.record h3{font-size:14px;margin:0 0 5px}.record p{font-size:12px;color:var(--muted);margin:0}.status{font-size:11px;color:#285f40;background:#eaf5ee;border-radius:999px;padding:6px 9px;white-space:nowrap}.status.pending{background:#fff4c2;color:#5c4c08}footer{display:flex;justify-content:space-between;gap:10px;color:#817c72;font-size:11px;padding:20px 2px}dialog{width:min(100% - 28px,520px);border:0;border-radius:14px;padding:24px;box-shadow:0 20px 80px #0004}dialog::backdrop{background:#1a1916aa}.icon-button{border:0;background:#f4f2ed;border-radius:50%;width:36px;height:36px;font-size:24px;cursor:pointer}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;background:#212121;color:#fff;padding:12px 18px;border-radius:8px;transition:.2s;max-width:calc(100% - 32px);font-size:13px;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:520px){main{width:calc(100% - 24px);margin:18px auto}.top{height:54px;padding:0 12px}.environment{font-size:8px}.welcome{padding:10px 1px 18px}.tab{padding:10px 13px;font-size:12px}.fields{grid-template-columns:1fr;gap:12px}.panel{padding:18px 15px}.review-data{grid-template-columns:1fr 1fr;gap:0 9px}.review-data dd{font-size:13px}.actions{flex-direction:column-reverse}.actions .button{width:100%}footer{flex-direction:column}}
@media(max-width:360px){.record{align-items:flex-start}.record>div{min-width:0;max-width:100%}.record p{overflow-wrap:anywhere;word-break:break-word}.record .status{white-space:normal;max-width:100%;text-align:center}.record{flex-wrap:wrap}.record .status{margin-left:auto}}
.demo-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px}.demo-controls strong,.demo-controls small{display:block}.demo-controls strong{font-size:12px}.demo-controls small{color:var(--muted);font-size:11px;margin-top:3px}.demo-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}@media(max-width:520px){.demo-controls{align-items:flex-start;flex-direction:column}.demo-actions{justify-content:flex-start}.demo-actions .button{padding:9px 10px;font-size:11px}}
.session-actions{display:flex;justify-content:flex-end;margin-top:-8px;margin-bottom:10px}.session-actions:has(#logout.hidden){display:none}
.demo-explanation{max-width:480px;margin:8px 0 0;color:#555;font-size:12px;line-height:1.45}
.employee-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}.employee-choice>label{min-width:0}.add-employee{white-space:nowrap;min-height:42px}.employee-panel{margin-top:20px;padding:18px;background:#faf9f6;border:1px solid var(--line);border-radius:12px}.employee-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.employee-panel-heading h3{font-size:18px;margin:0}.employee-intro{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5}.employee-panel .callout{margin-bottom:14px}.employee-panel form{gap:14px}.employee-form-actions{display:flex;gap:10px}.employee-form-actions>*{flex:1;min-width:0}
@media(max-width:520px){.employee-choice{grid-template-columns:minmax(0,1fr)}.add-employee{width:100%}.employee-panel{padding:15px 12px}.employee-form-actions{flex-direction:column}.employee-form-actions .button{width:100%}}
#request-dialog{max-height:min(88dvh,800px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:clamp(16px,4vw,24px)}
#request-dialog .request-card-section{min-width:0;padding-top:16px;border-top:1px solid var(--line)}
#request-dialog .request-card-section h3{font-size:15px;margin:0 0 10px}
#request-dialog .request-state,#request-dialog .request-substate{overflow-wrap:anywhere;line-height:1.5}
#request-dialog .request-card-actions{display:flex;gap:10px;margin-top:12px;min-width:0}
#request-dialog .request-card-actions .button{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
@media(max-width:360px){#request-dialog{width:calc(100% - 16px);max-height:90dvh;padding:16px 12px}#request-dialog .request-card-actions{flex-direction:column}#request-dialog .request-card-actions .button{width:100%}}
.mail-name-fields{min-width:0;margin:0;padding:14px;border:1px solid var(--line);border-radius:10px;display:grid;gap:8px}
.mail-name-fields legend{padding:0 6px;font-size:13px;font-weight:700}
.mail-name-help{margin:0 0 4px;color:var(--muted);font-size:12px;line-height:1.45}
.mail-name-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:520px){.mail-name-fields{padding:12px}.mail-name-grid{grid-template-columns:minmax(0,1fr);gap:10px}}

.auth-panel,.chat-confirmation{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(16px,4vw,24px);margin:0 0 16px}.auth-panel .section-title{margin-bottom:10px}.auth-help,.chat-confirmation p{font-size:13px;line-height:1.5;color:var(--muted)}.chat-confirmation h3{font-size:15px;margin:0 0 8px}.chat-command{overflow-wrap:anywhere;color:var(--ink);font-family:ui-monospace,monospace}.credential-dialog{max-height:min(88dvh,700px);overflow:auto;overscroll-behavior:contain}.credential-dialog .review-data{grid-template-columns:minmax(0,1fr)}.credential-dialog dd{user-select:all;overflow-wrap:anywhere}.environment{white-space:nowrap}.chat-confirmation button{max-width:100%}