*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#1a1d21;background:#f5f6f8}.app{display:flex;min-height:100vh;align-items:flex-start}nav.sidebar{flex:0 0 210px;padding:16px;background:#172033;color:#fff;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}nav.sidebar .brand{font-weight:700;font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:8px}nav.sidebar .brand img{width:26px;height:26px;border-radius:7px;flex:0 0 auto}nav.sidebar a{color:#c7d0e0;text-decoration:none;padding:7px 10px;border-radius:6px}nav.sidebar a:hover{background:#243149;color:#fff}nav.sidebar button{margin-top:auto}main.content{flex:1;padding:24px 32px;max-width:1100px}h1{font-size:22px}h2{font-size:17px}table{border-collapse:collapse;width:100%;background:#fff}th,td{border:1px solid #e2e5ea;padding:7px 10px;text-align:left;font-size:14px}th{background:#eef0f4}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}td.nowrap,th.nowrap{white-space:nowrap}input,select,button,textarea{font:inherit;padding:7px 10px;border:1px solid #c9cdd4;border-radius:6px;background:#fff}button{cursor:pointer;background:#2454d6;color:#fff;border-color:#2454d6}button.secondary{background:#fff;color:#1a1d21;border-color:#c9cdd4}button.danger{background:#c22f2f;border-color:#c22f2f}button:disabled{opacity:.5;cursor:default}form.stack{display:flex;flex-direction:column;gap:10px;max-width:420px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.field{display:flex;flex-direction:column;gap:4px;font-size:13px}.error{color:#c22f2f}.cards{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}.card{background:#fff;border:1px solid #e2e5ea;border-radius:8px;padding:14px 18px;min-width:150px}.card .big{font-size:22px;font-weight:700}.card.user-card{flex:1 1 220px;max-width:300px;color:inherit;text-align:left;cursor:pointer;border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,#e4572e,#f0a202,#f2d024,#3aab5c,#2c8ad6,#6a4cc0,#b93fb1) border-box}.user-card-name{font-weight:600;margin-bottom:8px}.user-card-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.user-card-line .big{font-size:18px}.card.user-card:hover{box-shadow:0 2px 10px #1720332e}.simple-app{min-height:100vh;min-height:100dvh;max-width:460px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px}.simple-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}.simple-head img{border-radius:9px}.simple-title{font-size:19px;font-weight:700}.simple-back{background:#fff;color:#1a1d21;border:1px solid #dfe3e9;font-size:20px;line-height:1;padding:8px 14px;border-radius:12px;box-shadow:0 2px 6px #17203314}.big-btn{--tint: #2e9e5b;--tint-dark: #1f7a44;display:flex;align-items:center;gap:14px;width:100%;min-height:88px;padding:16px 18px;color:#fff;text-align:left;cursor:pointer;border:none;border-radius:18px;background:linear-gradient(135deg,var(--tint),var(--tint-dark));box-shadow:0 10px 22px -10px var(--tint),inset 0 1px #ffffff40;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.big-btn:hover{filter:brightness(1.05)}.big-btn:active{transform:translateY(2px);box-shadow:0 4px 10px -8px var(--tint),inset 0 1px #ffffff40}.big-btn:focus-visible{outline:3px solid #1a1d21;outline-offset:3px}.big-btn:disabled,.big-btn.is-disabled{filter:grayscale(.45);opacity:.55;cursor:default;box-shadow:none;transform:none}.big-btn.compact{min-height:66px;border-radius:15px}.big-btn.compact .big-btn-icon{width:38px;height:38px;border-radius:11px}.big-btn.compact .big-btn-chevron{display:none}.big-btn-icon{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#ffffff2e}.big-btn-text{display:flex;flex-direction:column;gap:2px;min-width:0}.big-btn-label{font-size:18px;font-weight:650;line-height:1.2}.big-btn-sub{font-size:13px;font-weight:500;opacity:.85}.big-btn-chevron{margin-left:auto;flex:0 0 auto;opacity:.65}.big-btn.green{--tint: #34b46a;--tint-dark: #1d7a46}.big-btn.blue{--tint: #3f6fe4;--tint-dark: #1e3fa8}.big-btn.dark{--tint: #3a4a68;--tint-dark: #172033}.big-btn.orange{--tint: #f59128;--tint-dark: #cc6206}.big-btn.violet{--tint: #8b5cf0;--tint-dark: #5b34ad}.big-btn.ghost{background:#fff;color:#1a1d21;border:1px solid #dfe3e9;box-shadow:0 4px 12px -9px #17203399}.big-btn.ghost .big-btn-icon{background:#17203312}.big-btn.ghost:active{box-shadow:0 2px 5px -6px #17203399}@media(prefers-reduced-motion:reduce){.big-btn{transition:none}.big-btn:active{transform:none}}.simple-link{background:none;border:none;color:#2454d6;text-decoration:underline;padding:6px;font-size:15px}.simple-label{font-size:14px;color:#69707b;margin-top:4px}.simple-amount,.simple-text{width:100%;font-size:30px;font-weight:700;text-align:center;padding:14px;border:1px solid #dfe3e9;border-radius:14px;box-shadow:inset 0 1px 3px #1720330f}.simple-amount:focus,.simple-text:focus{outline:2px solid #3f6fe4;outline-offset:1px}.simple-text{font-size:17px;font-weight:400;text-align:left}.simple-photo{max-width:100%;max-height:34vh;object-fit:contain;border-radius:12px;align-self:center}.simple-info{color:#69707b;font-size:15px;margin:0;text-align:center}.simple-flash{background:#dcf3e1;color:#14702e;padding:12px 14px;border-radius:12px;margin:0;font-weight:500}.simple-actions{display:flex;flex-direction:column;gap:12px;margin:auto 0}.simple-note{background:#fff;border:1px solid #e6e9ee;border-radius:16px;padding:16px;box-shadow:0 6px 18px -12px #17203380}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#17203373;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}.modal{background:#fff;border-radius:10px;padding:18px 20px;width:min(760px,100%);max-height:86vh;overflow-y:auto}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-head h2{margin:0}.badge{padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}.badge-draft{background:#e8eaee;color:#444}.badge-submitted{background:#fff3d6;color:#8a6100}.badge-approved{background:#dcf3e1;color:#14702e}.badge-rejected{background:#fadbdb;color:#a11c1c}.badge-paid{background:#dbe7fa;color:#1c46a1}.dropzone{border:2px dashed #b9c0cb;border-radius:8px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.receipt-preview{max-width:220px;max-height:220px;border-radius:6px}.ocr-info{background:#eef6ff;padding:8px 10px;border-radius:6px;font-size:13px}.login-page{max-width:360px;margin:12vh auto;background:#fff;padding:28px;border-radius:10px;border:1px solid #e2e5ea}.login-head{text-align:center;margin-bottom:18px}.login-head h1{margin:10px 0 2px}.login-head p{margin:0}.login-logo{width:72px;height:72px;border-radius:18px}.reimb-preview{font-weight:700}.muted{color:#69707b;font-size:13px}.money-input{width:90px;text-align:right}.qty-input{width:80px}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:640px){.app{flex-direction:column;align-items:stretch}nav.sidebar{flex:0 0 auto;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 12px;gap:2px 4px;height:auto;max-height:40vh;overflow-y:auto;z-index:10}nav.sidebar .brand{margin-bottom:0;margin-right:8px;font-size:16px}nav.sidebar a{padding:4px 7px;font-size:14px}nav.sidebar button{margin-top:0;margin-left:auto;padding:5px 10px;font-size:14px}main.content{padding:14px;max-width:100%}.row{flex-direction:column;align-items:stretch}.field,.field input,.field select,.money-input,.qty-input{width:100%}}