:root {
  --ink: #092844;
  --paper: #f3f6f8;
  --card: #ffffff;
  --line: #dce2e7;
  --green: #0a3c63;
  --green2: #e2eef6;
  --orange: #f04b0b;
  --shadow: 0 18px 50px rgba(9, 40, 68, .1);
}
.login-shell { background: #082d4a; }
.login-shell { grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); }
.login-brand { padding: 9vh 7vw; background: linear-gradient(145deg, #0a3658 0%, #062b47 100%); }
.login-brand:after { display: none; }
.login-logo { width: min(370px, 70%); height: auto; object-fit: contain; background: white; padding: 8px 14px; border-radius: 12px; margin-bottom: 46px; box-shadow: 0 14px 40px rgba(0, 15, 28, .2); }
.company-block { max-width: 640px; border-left: 3px solid #f04b0b; padding-left: 24px; }
.login-brand .company-block h1 { margin: 0; font-family: Inter,"PingFang SC","Microsoft YaHei",sans-serif; font-size: clamp(28px, 3vw, 42px); line-height: 1.35; font-weight: 650; letter-spacing: .02em; }
.system-name { margin: 15px 0 0!important; color: #fff!important; font-size: 22px!important; line-height: 1.4!important; font-weight: 600; letter-spacing: .16em; }
.system-description { margin: 28px 0 0!important; color: #a9c3d2!important; font-size: 15px!important; line-height: 1.8!important; }
.sidebar { background: linear-gradient(180deg, #092f4d 0%, #06243b 100%); padding: 24px 16px; }
.sidebar-logo { width: 100%; height: 72px; object-fit: contain; background: #fff; border-radius: 12px; padding: 7px 12px; box-shadow: 0 10px 28px rgba(0, 13, 25, .18); }
.logo { display: block; padding: 0 6px 28px; }
.logo > div { padding: 14px 4px 0; }
.logo strong { font-size: 14px; line-height: 1.35; letter-spacing: .04em; }
.logo span { color: #8eb4c9; font-size: 10px; letter-spacing: .18em; margin-top: 5px; }
.sidebar nav { gap: 6px; }
.sidebar nav button { color: #aac2d0; padding: 13px 14px; border-radius: 9px; font-weight: 650; transition: .2s ease; }
.sidebar nav button span { color: #7fb5cf; }
.sidebar nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav button.active { background: rgba(255,255,255,.11); color: #fff; box-shadow: inset 3px 0 0 #f04b0b; }
.sidebar nav button.active span { color: #ff7040; }
.primary { background: #0a3c63; }
.primary:hover { background: #072e4d; }
.user-avatar { background: #f04b0b; color: white; }
.inline-customer { padding: 16px; border: 1px solid #cbdce8; border-radius: 12px; background: #f3f8fb; }
.inline-customer > p { display: flex; justify-content: space-between; margin: 0 0 14px; color: #0a3c63; }
.inline-customer > p span { color: #6f7c83; font-size: 11px; font-weight: 400; }
.customer-orders { overflow-x: auto; margin-bottom: 24px; border: 1px solid #e2e8ec; border-radius: 10px; }
.customer-orders table { min-width: 720px; }
.customer-summary { margin-top: 10px; }
.danger-link { border: 0; background: #fff0ee; color: #b23d32; padding: 6px 10px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.danger-link:hover { background: #f8d8d3; }
.payment-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.payment-sections > section { border: 1px solid #dce5eb; border-radius: 12px; padding: 16px; background: #fafcfd; }
.payment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.payment-form .wide { grid-column: 1 / -1; }
.payment-record { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; background: white; border: 1px solid #e6ebee; border-radius: 9px; padding: 11px; }
.payment-record div span, .payment-record div small { display: block; color: #6f7c83; font-size: 10px; margin-top: 4px; }
.payment-record button, .payment-record > span { grid-column: 1 / -1; justify-self: start; }
.cost-form { display: grid; grid-template-columns: 1.2fr .7fr 1fr 1.3fr auto; gap: 8px; margin-bottom: 15px; }
.cost-form input { border: 1px solid #dce2e7; padding: 9px; border-radius: 8px; min-width: 0; }
.cost-voucher-field { position: relative; display: grid; place-items: center; min-height: 38px; border: 1px dashed #9eb9ca; border-radius: 8px; color: #0a3c63; background: #f5f9fb; font-size: 12px; font-weight: 700; cursor: pointer; overflow: hidden; }
.cost-voucher-field:hover { border-color: #0a3c63; background: #edf5f9; }
.cost-voucher-field input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cost-row, .fee-row { grid-template-columns: 1fr auto auto; align-items: center; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.cashflow-section { margin-top: 28px; border-top: 1px solid #e2e8ec; padding-top: 22px; }
.cashflow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cashflow-head h3 { margin: 0 0 5px; }
.cashflow-head > div:last-child { display: flex; gap: 8px; }
.receive-action { color: #16714f; border-color: #b7ddcc; }
.pay-action { color: #c25922; border-color: #efc8b1; }
.receive-action.active { background: #e5f4ed; }
.pay-action.active { background: #fff0e7; }
.payment-entry { max-width: 680px; margin: 14px 0 20px; padding: 16px; background: #f7fafc; border: 1px solid #dce5eb; border-radius: 12px; }
.cashflow-table { overflow-x: auto; border: 1px solid #e2e8ec; border-radius: 11px; }
.cashflow-table table { min-width: 700px; }
.flow-tag { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.flow-tag.received { color: #16714f; background: #e5f4ed; }
.flow-tag.paid { color: #c25922; background: #fff0e7; }
.flow-amount.received { color: #16714f; }
.flow-amount.paid { color: #c25922; }
.cashflow-empty { padding: 28px; }
@media (max-width: 760px) { .login-logo { width: 260px; } .sidebar nav { grid-template-columns: repeat(5, 1fr); } .payment-sections { grid-template-columns: 1fr; } .cost-form { grid-template-columns: 1fr 1fr; } .cashflow-head { display: block; } .cashflow-head > div:last-child { margin-top: 12px; } }