.approvals-case-page {
  --approval-cyan:#2ac8c5;
  --approval-cyan-deep:#128f9f;
  --approval-coral:#f07b68;
  --approval-lime:#b8db5b;
  --approval-violet:#7464df;
  background:var(--paper);
}
.approvals-hero {
  background:
    radial-gradient(circle at 84% 15%,rgba(42,200,197,.24),transparent 27%),
    radial-gradient(circle at 18% 82%,rgba(240,123,104,.11),transparent 28%),
    linear-gradient(145deg,#06131f 0%,#081827 54%,#10334a 100%);
}
.approvals-live {
  color:#bcf6f3;
  background:rgba(42,200,197,.09);
  border-color:rgba(42,200,197,.28);
}
.approvals-live::before { background:var(--approval-cyan); box-shadow:0 0 0 5px rgba(42,200,197,.11); }
.approvals-window {
  position:relative;
  min-height:560px;
  color:var(--ink);
  background:#edf3f6;
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  box-shadow:0 38px 95px rgba(0,0,0,.35);
  overflow:hidden;
  transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.approvals-window::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); border-radius:inherit; }
.approvals-topbar { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 20px; color:#fff; background:#092033; }
.approvals-status { padding:6px 9px; color:#bff6ef; background:rgba(42,200,197,.1); border:1px solid rgba(42,200,197,.24); border-radius:999px; font-size:.56rem; font-weight:900; letter-spacing:.05em; }
.approvals-body { padding:20px; }
.approvals-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.approvals-heading small { color:#6e8190; font-size:.57rem; font-weight:800; letter-spacing:.11em; }
.approvals-heading h2 { margin:3px 0 0; font-family:var(--font-display); font-size:1.18rem; letter-spacing:-.03em; }
.approvals-progress { text-align:right; }
.approvals-progress strong { display:block; color:var(--approval-cyan-deep); font-family:var(--font-display); font-size:1.55rem; line-height:1; }
.approvals-progress span { color:#738693; font-size:.55rem; }
.approval-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.approval-kpis div { padding:13px; background:#fff; border:1px solid rgba(8,24,39,.07); border-radius:11px; }
.approval-kpis span,.approval-kpis small { display:block; color:#748591; font-size:.53rem; }
.approval-kpis strong { display:block; margin:4px 0; font-family:var(--font-display); font-size:1.18rem; }
.approval-steps { display:grid; gap:8px; margin-top:15px; }
.approval-step { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:11px 12px; background:#fff; border:1px solid rgba(8,24,39,.07); border-radius:10px; }
.approval-step > i { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; font-style:normal; font-size:.58rem; font-weight:900; }
.approval-step div { min-width:0; display:grid; }
.approval-step div strong { font-size:.66rem; }
.approval-step div small { color:#7b8d99; font-size:.52rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.approval-step > b { padding:4px 7px; border-radius:999px; font-size:.49rem; }
.approval-step.done > i { color:#176743; background:#e2f7ed; }
.approval-step.done > b { color:#176743; background:#e2f7ed; }
.approval-step.active > i { color:#087d82; background:#dff7f5; }
.approval-step.active > b { color:#087d82; background:#dff7f5; }
.approval-step.wait > i { color:#735b00; background:#fff2b8; }
.approval-step.wait > b { color:#735b00; background:#fff2b8; }
.approval-alert { display:flex; gap:10px; align-items:center; margin-top:15px; padding:12px; color:#714235; background:#fff0ec; border:1px solid #f1c9bf; border-radius:10px; }
.approval-alert > span { width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; color:#fff; background:var(--approval-coral); border-radius:50%; font-size:.65rem; font-weight:900; }
.approval-alert div { display:grid; }
.approval-alert strong { font-size:.65rem; }
.approval-alert small { font-size:.54rem; }
.approval-flow li::before { background:var(--approval-cyan); box-shadow:0 0 0 7px rgba(42,200,197,.09); }
.approval-flow span { color:#76e4df; }

.request-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:20px; }
.request-sidebar { padding:22px; color:#dce7ee; background:#0a2032; border-radius:16px; }
.request-sidebar > small { color:#8ea5b5; font-size:.57rem; letter-spacing:.11em; }
.request-sidebar > strong { display:block; margin:7px 0 18px; font-family:var(--font-display); }
.request-sidebar dl { display:grid; gap:0; margin:0; }
.request-sidebar dl div { padding:11px 0; border-top:1px solid rgba(255,255,255,.09); }
.request-sidebar dt { color:#819aaa; font-size:.54rem; }
.request-sidebar dd { margin:3px 0 0; font-size:.65rem; }
.request-form { padding:25px; background:#fff; border-radius:16px; }
.request-form-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.request-form-head span { color:#6d7f8d; font-size:.57rem; font-weight:800; letter-spacing:.08em; }
.request-form-head b { padding:5px 8px; color:#087d82; background:#dff7f5; border-radius:999px; font-size:.52rem; }
.request-form h3 { margin:22px 0 16px; font-family:var(--font-display); font-size:1.05rem; }
.form-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-preview-grid div { min-height:76px; padding:13px; background:#f5f8fa; border:1px solid #e1e8ec; border-radius:10px; }
.form-preview-grid div.wide { grid-column:1 / -1; }
.form-preview-grid span { display:block; color:#748693; font-size:.52rem; font-weight:800; text-transform:uppercase; }
.form-preview-grid strong,.form-preview-grid p { display:block; margin:8px 0 0; color:#536775; font-size:.64rem; line-height:1.5; }
.attachment-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:12px; background:#edf8f8; border:1px solid #cae9e7; border-radius:10px; }
.attachment-row div { display:grid; }
.attachment-row strong { font-size:.63rem; }
.attachment-row small { color:#67818a; font-size:.53rem; }
.attachment-row b { color:#087d82; font-size:.54rem; }

.inbox-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.approval-inbox,.approval-detail { padding:22px; background:#fff; border:1px solid rgba(8,24,39,.08); border-radius:14px; }
.inbox-head,.detail-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.inbox-head strong,.detail-head strong { font-family:var(--font-display); font-size:.83rem; }
.inbox-head span,.detail-head span { color:#82939e; font-size:.53rem; }
.inbox-list { display:grid; gap:8px; margin-top:17px; }
.inbox-item { display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px; background:#f5f8fa; border:1px solid #e3eaee; border-radius:10px; }
.inbox-item.active { background:#eafafa; border-color:#bfe5e3; }
.inbox-item div { display:grid; min-width:0; }
.inbox-item strong { font-size:.63rem; }
.inbox-item small { margin-top:3px; color:#7a8b97; font-size:.52rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-item b { align-self:center; padding:4px 7px; color:#7a5a0c; background:#fff0b7; border-radius:999px; font-size:.49rem; }
.detail-head span { padding:5px 8px; color:#087d82; background:#dff7f5; border-radius:999px; }
.approval-detail h3 { margin:22px 0 6px; font-family:var(--font-display); font-size:1.05rem; }
.approval-detail > p { margin:0; color:#657886; font-size:.65rem; line-height:1.6; }
.detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:17px; }
.detail-meta div { padding:11px; background:#f5f8fa; border-radius:9px; }
.detail-meta span,.detail-meta strong { display:block; }
.detail-meta span { color:#7a8c98; font-size:.5rem; }
.detail-meta strong { margin-top:4px; font-size:.61rem; }
.approval-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:17px; }
.approval-actions button { min-height:38px; border-radius:8px; font-size:.55rem; font-weight:800; }
.approval-actions .correct { color:#805d12; background:#fff6d5; border:1px solid #ead795; }
.approval-actions .reject { color:#8c4037; background:#fff0ed; border:1px solid #edc8c0; }
.approval-actions .approve { color:#fff; background:var(--approval-cyan-deep); border:1px solid var(--approval-cyan-deep); }

.history-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
.history-card,.quality-card { padding:22px; background:#fff; border:1px solid rgba(8,24,39,.08); border-radius:14px; }
.history-card > strong,.quality-card > strong { font-family:var(--font-display); font-size:.83rem; }
.approval-timeline { list-style:none; padding:20px 0 0; margin:0; }
.approval-timeline li { display:grid; grid-template-columns:16px 1fr auto; gap:10px; min-height:70px; position:relative; }
.approval-timeline li::after { content:""; position:absolute; top:15px; bottom:0; left:6px; width:1px; background:#d9e2e7; }
.approval-timeline li:last-child::after { display:none; }
.approval-timeline i { width:13px; height:13px; border:2px solid #c3d0d8; border-radius:50%; background:#fff; z-index:1; }
.approval-timeline li.done i { background:var(--approval-cyan); border-color:var(--approval-cyan); }
.approval-timeline li.correction i { background:var(--approval-coral); border-color:var(--approval-coral); }
.approval-timeline li.current i { background:var(--approval-lime); border-color:var(--approval-lime); box-shadow:0 0 0 5px rgba(184,219,91,.13); }
.approval-timeline div { display:grid; align-content:start; }
.approval-timeline b { font-size:.62rem; }
.approval-timeline small { margin-top:3px; color:#7d8e99; font-size:.52rem; line-height:1.45; }
.approval-timeline time { color:#8a9aa4; font-size:.49rem; }
.quality-card p { color:#657886; font-size:.65rem; line-height:1.6; }
.quality-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }
.quality-grid div { padding:12px; background:#f5f8fa; border-radius:9px; }
.quality-grid span,.quality-grid strong { display:block; }
.quality-grid span { color:#7a8c98; font-size:.5rem; }
.quality-grid strong { margin-top:4px; font-size:.61rem; }
.quality-close { margin-top:14px; padding:12px; color:#176743; background:#e2f7ed; border:1px solid #c2ead8; border-radius:9px; font-size:.58rem; font-weight:800; }

@media (max-width:1050px) {
  .approvals-window { max-width:820px; transform:none; }
}
@media (max-width:780px) {
  .approval-kpis { grid-template-columns:1fr 1fr; }
  .approval-kpis div:last-child { grid-column:1 / -1; }
  .request-layout,.inbox-layout,.history-layout { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .approvals-heading { flex-direction:column; }
  .approvals-progress { text-align:left; }
  .approval-kpis,.form-preview-grid,.detail-meta,.quality-grid,.approval-actions { grid-template-columns:1fr; }
  .approval-kpis div:last-child,.form-preview-grid div.wide { grid-column:auto; }
  .approval-step { grid-template-columns:31px 1fr; }
  .approval-step > b { grid-column:2; justify-self:start; }
  .approvals-topbar { align-items:flex-start; flex-direction:column; }
  .mockup-caption { align-items:flex-start; flex-direction:column; }
}