:root{--bg:#f7f8fc;--ink:#202235;--muted:#9295a8;--line:#e7e8f0;--purple:#6e63e8;--purple-soft:#efedff;--green:#2aa48f;--green-soft:#e6f8f3;--red:#e36d75;--red-soft:#ffedef;--shadow:0 8px 24px rgba(26,31,62,.04)}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:18px;margin:0}.approval-header{align-items:center;background:#fff;border-bottom:1px solid var(--line);display:flex;height:70px;justify-content:space-between;padding:0 6.3%}.approval-header>a{color:#777b90;font-size:16px;font-weight:600;text-decoration:none}.approval-header>a:first-letter{color:var(--purple);font-size:23px}.approval-header>div{align-items:center;display:flex;gap:15px}.draft-state{color:#989baa;font-size:14px}.draft-state i{background:#efab45;border-radius:50%;display:inline-block;height:6px;margin-right:4px;width:6px}.user-mark{background:#6fa7dc;border-radius:50%;color:#fff;font-size:14px;font-weight:700;height:29px;line-height:29px;text-align:center;width:29px}.approval-content{margin:auto;max-width:1210px;padding:36px 25px 24px}.page-intro{align-items:flex-end;display:flex;justify-content:space-between;margin-bottom:24px}.eyebrow,.small-label{color:#9a9cac;font-size:14px;font-weight:700;letter-spacing:1.2px;margin:0 0 8px}.page-intro h1{font-family:'Plus Jakarta Sans';font-size:28px;letter-spacing:-.6px;margin:0}.page-intro h1 span{color:var(--purple)}.page-intro p:last-child{color:var(--muted);font-size:16px;margin:8px 0 0}.priority-high{background:var(--red-soft);border-radius:14px;color:var(--red);font-size:14px;font-weight:700;padding:7px 10px}.approval-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1.7fr) minmax(285px,1fr)}.detail-card,.note-card,.history-card{background:#fff;border:1px solid #eeeff4;border-radius:12px;box-shadow:var(--shadow)}.detail-card{padding:23px}.detail-heading{align-items:flex-start;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding-bottom:18px}.detail-heading strong,.detail-heading small{display:block}.detail-heading strong{font-size:17px}.detail-heading small{color:var(--muted);font-size:14px;margin-top:5px}.status{border-radius:14px;font-size:14px;font-weight:700;padding:6px 9px}.status.pending{background:#fff3df;color:#d99542}.customer-block{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:11px;padding:20px 0}.customer-avatar{background:#fff0d9;border-radius:50%;color:#df9142;font-size:15px;font-weight:700;height:34px;line-height:34px;text-align:center;width:34px}.customer-block strong,.customer-block small{display:block}.customer-block strong{font-size:17px}.customer-block small{color:var(--muted);font-size:14px;margin-top:4px}.small-label{display:block;font-size:13px;margin-bottom:5px}.line-items{padding-top:20px}.line-items h2,.history-card h2{font-family:'Plus Jakarta Sans';font-size:17px;margin:0 0 16px}.line-header,.line{display:grid;gap:10px;grid-template-columns:minmax(190px,2fr) .45fr 1fr 1fr}.line-header{background:#fafaff;border-bottom:1px solid var(--line);color:#aaaeba;font-size:13px;padding:11px 10px}.line{align-items:center;border-bottom:1px solid #f0f0f5;color:#777b90;font-size:14px;padding:13px 10px}.line:last-child{border:0}.line strong{color:#55596e;font-size:15px}.line small{color:#a1a4b2;display:block;font-size:13px;margin-top:4px}.line>span:nth-last-child(-n+2),.line>strong:last-child{text-align:right}.amounts{display:grid;gap:12px 20px;grid-template-columns:1fr auto;margin:20px 0 0 auto;max-width:260px}.amounts span{color:#9497a7;font-size:15px}.amounts strong{color:#5b5f73;font-size:15px;text-align:right}.amounts .discount{color:#df8b72}.amounts .grand-label{border-top:1px dashed var(--line);color:#4e5268;font-weight:700;padding-top:13px}.amounts .grand-total{border-top:1px dashed var(--line);color:var(--purple);font-family:'Plus Jakarta Sans';font-size:21px;padding-top:10px}.side-column{display:flex;flex-direction:column;gap:18px}.note-card,.history-card{padding:20px}.side-heading{align-items:center;display:flex;gap:10px;margin-bottom:16px}.side-icon{border-radius:7px;font-size:22px;height:29px;line-height:29px;text-align:center;width:29px}.side-icon.purple{background:var(--purple-soft);color:var(--purple)}.side-heading h2{font-family:'Plus Jakarta Sans';font-size:17px;margin:0}.side-heading p{color:var(--muted);font-size:14px;margin:4px 0 0}.note-card textarea{border:1px solid var(--line);border-radius:7px;color:#55596e;font:19px 'DM Sans';padding:10px;resize:vertical;width:100%}.note-card textarea:focus{border-color:#aaa4ef;outline:0}.decision-buttons{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-top:13px}.decision-buttons button{border-radius:6px;cursor:pointer;font:700 15px 'DM Sans';padding:10px}.reject-button{background:var(--red-soft);border:1px solid #ffd8db;color:var(--red)}.approve-button{background:var(--green);border:1px solid var(--green);color:#fff}.history-card h2{margin-bottom:18px}.history-item{align-items:flex-start;display:flex;gap:10px;padding:9px 0}.history-item+.history-item{border-top:1px solid #f0f0f5}.history-dot{border-radius:50%;height:8px;margin-top:3px;width:8px}.history-dot.purple{background:var(--purple)}.history-dot.gray{background:#c9cad3}.history-item strong,.history-item small{display:block}.history-item strong{font-size:14px}.history-item small{color:#a5a8b5;font-size:13px;margin-top:4px}.approval-content>footer{color:#a7a9b6;font-size:14px;padding:18px 2px}.approval-content>footer span{padding:0 5px}.decision-toast{align-items:center;background:#fff;border:1px solid #e4e5ed;border-radius:9px;bottom:24px;box-shadow:0 10px 30px #20223522;display:none;gap:10px;padding:12px 16px;position:fixed;right:24px}.decision-toast.show{display:flex}.toast-icon{background:var(--green-soft);border-radius:50%;color:var(--green);font-size:18px;height:24px;line-height:24px;text-align:center;width:24px}.decision-toast strong,.decision-toast small{display:block}.decision-toast strong{font-size:15px}.decision-toast small{color:var(--muted);font-size:14px;margin-top:3px}@media(max-width:800px){.approval-content{padding:27px 16px}.approval-grid{grid-template-columns:1fr}.page-intro{align-items:flex-start;flex-direction:column;gap:15px}.line-header,.line{grid-template-columns:minmax(145px,2fr) .4fr 1fr 1fr}.detail-card{padding:16px}.line-items{overflow:auto}.line-header,.line{min-width:550px}.customer-block{align-items:flex-start}.approval-header{padding:0 16px}.approval-header>a span{display:none}}@media(max-width:520px){.page-intro h1{font-size:25px}.detail-heading{gap:10px}.detail-heading .status{white-space:nowrap}.decision-toast{bottom:15px;left:15px;right:15px}}

.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
.skip-link{background:var(--ink);border-radius:0 0 6px 0;color:#fff;font-weight:700;left:0;padding:10px 14px;position:fixed;top:0;transform:translateY(-120%);transition:transform .15s;z-index:100}
.skip-link:focus{transform:translateY(0)}
[hidden]{display:none!important}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #3026a8;outline-offset:3px}
.form-error{background:var(--red-soft);border:1px solid #ffd8db;border-radius:7px;color:#a23d47;font-size:14px;line-height:1.5;margin:12px 0 0;padding:9px}
.field-hint{color:#777b8e;font-size:13px;line-height:1.5;margin:7px 0 0}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}