:root{
  --navy:#081631;
  --navy-2:#0d224f;
  --blue:#2f66e3;
  --blue-2:#1d55d7;
  --green:#11a36a;
  --green-soft:#eaf8f1;
  --red:#d34b4b;
  --red-soft:#fceeee;
  --white:#ffffff;
  --soft:#eff3f8;
  --line:#dbe3ef;
  --text:#0b1b3b;
  --muted:#677b98;
  --box:#021333;
  --shadow:0 10px 30px rgba(8,22,49,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#edf1f6;color:var(--text)}
.hidden{display:none!important}
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#07142d,#10234a)}
.login-card{width:100%;max-width:430px;background:#fff;border-radius:24px;padding:32px;box-shadow:0 25px 70px rgba(0,0,0,.25)}
.login-card h1{margin:0 0 8px 0;font-size:32px}
.login-card p{margin:0 0 18px 0;color:var(--muted)}
.login-form{display:grid;gap:12px}
.alert-error{background:#fdecec;color:#902222;padding:12px 14px;border-radius:14px;margin-bottom:14px}
.login-note{margin-top:14px;color:var(--muted);font-size:14px}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:14px 15px;border-radius:14px;border:1px solid #d7dfeb;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:#7ea3ff;box-shadow:0 0 0 3px rgba(47,102,227,.12)}
textarea{min-height:108px;resize:vertical}
button,.logout-btn{cursor:pointer;border:none;background:var(--blue);color:#fff;font-weight:700;border-radius:14px;padding:13px 16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
button:hover,.logout-btn:hover{background:var(--blue-2)}
.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--navy);padding:18px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand-block{padding:10px 8px 18px 8px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.brand-block h2{color:#fff;margin:0 0 8px 0;font-size:24px}
.brand-block div{color:#c6d3ee;font-size:13px;line-height:1.6}
.nav-btn{width:100%;text-align:left;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.08);padding:14px 16px;border-radius:16px;margin-bottom:10px}
.nav-btn:hover,.nav-btn.active{background:#132a60;border-color:#2758cb}
.sidebar-spacer{flex:1}
.logout-btn{background:transparent;border:1px solid rgba(255,255,255,.12)}
.logout-btn:hover{background:rgba(255,255,255,.08)}
.main-content{padding:24px}
.tab-panel{display:none}.tab-panel.active{display:block}
.panel{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.section-head h2{margin:0 0 6px 0;font-size:22px}
.section-head p{margin:0;color:var(--muted)}
.small-btn{width:auto;padding:11px 16px;border-radius:12px}
.search-row{display:grid;grid-template-columns:1fr 160px;gap:12px}
.result-card{background:var(--box);border-radius:22px;padding:16px;color:#fff}
.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.result-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#dbe7ff;color:#2047ab;font-size:12px;font-weight:700}
.result-copy{width:auto;background:#0f2757;border:1px solid rgba(255,255,255,.12);padding:10px 14px}
.result-copy:hover{background:#173673}
.result-text{white-space:pre-wrap;line-height:1.8;font-family:Consolas, monospace;font-size:14px;margin:0;min-height:260px}
.drawer{background:#f8fbff;border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:18px}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.drawer-head h3{margin:0}
.close-btn{width:auto;background:#6f819f;padding:10px 14px}
.close-btn:hover{background:#5e708f}
.manager-grid{display:grid;grid-template-columns:380px 1fr;gap:18px}
.manager-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.manager-card h4{margin:0 0 12px 0}
.form-stack{display:grid;gap:12px}
.company-editor.empty-state{color:var(--muted);padding:12px 0}
.email-edit-grid{display:grid;gap:10px;margin-top:12px}
.email-edit-item{display:grid;grid-template-columns:1fr 1fr 120px;gap:10px}
.inline-search{display:grid;grid-template-columns:1fr 120px;gap:10px}
.payment-top-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.due-highlight{background:linear-gradient(135deg,#1c4fd0,#2f66e3);color:#fff;border-radius:22px;padding:20px 22px;min-width:320px;box-shadow:0 12px 24px rgba(47,102,227,.18)}
.card-label{font-size:14px;opacity:.9;margin-bottom:8px}
.card-value{font-size:34px;font-weight:800}
.payment-form-grid,.website-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.full-width-input{margin-bottom:14px}
.history-list{display:grid;gap:12px}
.history-item{border-radius:18px;padding:14px 18px;display:grid;grid-template-columns:1fr 180px;gap:14px;align-items:center}
.history-item.due{background:var(--red-soft);color:#822323;border:1px solid #f2c7c7}
.history-item.received{background:var(--green-soft);color:#06533a;border:1px solid #bae7cd}
.history-content{display:grid;gap:8px}
.history-title{font-size:16px;font-weight:800}
.history-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;font-size:14px}
.history-amount{text-align:right;font-size:20px;font-weight:800}
.website-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.web-tab-btn{width:auto;background:#edf3ff;color:#1f3f88;border:1px solid #d7e1f1}
.web-tab-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
table{width:100%;min-width:760px;border-collapse:collapse}
th,td{padding:14px 12px;border-bottom:1px solid #edf2f7;text-align:left}
th{background:#f8fbff;color:#324668}
@media (max-width: 1100px){.manager-grid{grid-template-columns:1fr}.payment-form-grid,.website-form-grid{grid-template-columns:1fr 1fr}.history-meta{grid-template-columns:1fr}}
@media (max-width: 900px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.main-content{padding:16px}}
@media (max-width: 680px){.search-row,.inline-search,.email-edit-item,.payment-form-grid,.website-form-grid,.history-item{grid-template-columns:1fr}.history-amount{text-align:left}.due-highlight{min-width:100%}}
.result-card.mail-box-here {
    margin-top: 35px;
}