:root{--navy:#1B2A4A;--rust:#C0522A;--beige:#FDF6EC;--border:#e2e8f0;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f8fafc;color:#1a202c;display:flex;min-height:100vh;}
.sidebar{width:260px;background:var(--navy);color:#fff;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
.sidebar-brand{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar-brand h2{font-size:.95rem;font-weight:700;line-height:1.3;}
.sidebar-brand p{font-size:.72rem;opacity:.6;margin-top:4px;}
.sidebar nav{padding:12px 0;flex:1;}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 20px;color:rgba(255,255,255,.75);text-decoration:none;font-size:.83rem;transition:all .15s;}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.1);color:#fff;}
.sidebar nav a i{width:16px;text-align:center;font-size:.8rem;}
.sidebar nav .nav-section{padding:14px 20px 4px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.35);}
.main{flex:1;padding:36px 48px;max-width:900px;}
.main h1{font-size:1.5rem;font-weight:800;color:var(--navy);margin-bottom:6px;}
.main .subtitle{color:#64748b;font-size:.88rem;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.section{margin-bottom:36px;}
.section h2{font-size:1.05rem;font-weight:700;color:var(--navy);border-left:4px solid var(--rust);padding-left:12px;margin-bottom:14px;}
.section h3{font-size:.92rem;font-weight:600;color:var(--navy);margin:16px 0 8px;}
.section p,.section li{font-size:.87rem;line-height:1.75;color:#374151;}
.section ul,.section ol{padding-left:22px;margin-bottom:12px;}
.section li{margin-bottom:5px;}
.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px 22px;margin-bottom:14px;}
.step-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:12px;display:flex;gap:16px;align-items:flex-start;}
.step-num{width:32px;height:32px;background:var(--navy);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0;margin-top:2px;}
.step-body h3{margin:0 0 6px;font-size:.9rem;color:var(--navy);}
.step-body p{margin:0;font-size:.84rem;color:#374151;line-height:1.6;}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;font-weight:700;}
.badge-architect{background:#dbeafe;color:#1e40af;}
.badge-deo{background:#fef3c7;color:#92400e;}
.badge-bocw{background:#d1fae5;color:#065f46;}
.badge-leo{background:#ede9fe;color:#5b21b6;}
.badge-rdc{background:#fee2e2;color:#991b1b;}
.badge-pending{background:#fff3cd;color:#856404;}
.badge-paid{background:#d1fae5;color:#065f46;}
.badge-approved{background:#d1fae5;color:#065f46;}
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:16px 0;}
.flow-step{background:var(--navy);color:#fff;padding:6px 14px;border-radius:6px;font-size:.78rem;font-weight:600;}
.flow-step.shortfall{background:#f59e0b;}
.flow-step.approved{background:#065f46;}
.flow-arrow{color:#94a3b8;font-size:1rem;}
.tip{background:#fffbeb;border:1px solid #fcd34d;border-radius:8px;padding:12px 16px;font-size:.83rem;color:#92400e;margin:12px 0;}
.warn{background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;padding:12px 16px;font-size:.83rem;color:#991b1b;margin:12px 0;}
.info{background:#dbeafe;border:1px solid #93c5fd;border-radius:8px;padding:12px 16px;font-size:.83rem;color:#1e40af;margin:12px 0;}
table{width:100%;border-collapse:collapse;font-size:.83rem;margin:12px 0;}
th{background:var(--navy);color:#fff;padding:8px 12px;text-align:left;font-weight:600;}
td{padding:8px 12px;border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
tr:nth-child(even) td{background:#f8fafc;}
.breadcrumb{font-size:.78rem;color:#94a3b8;margin-bottom:16px;}
.breadcrumb a{color:#64748b;text-decoration:none;}
.breadcrumb a:hover{color:var(--navy);}
@media(max-width:700px){.sidebar{display:none;}.main{padding:20px;}}