:root{font-family:Arial,Helvetica,sans-serif;color:#303030;background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}.topbar{height:64px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{font-size:28px;font-weight:750;letter-spacing:.4px;color:#303030}.brand span{color:#8a343e}.brand.small{font-size:21px}.header-right{display:flex;align-items:center;gap:24px;color:#777;font-size:13px}.logout{color:#555;text-decoration:none;border:1px solid #ddd;padding:9px 15px;border-radius:5px}.logout:hover{background:#f7f7f7}.main{max-width:1500px;margin:0 auto;padding:28px 30px}.toolbar{display:grid;grid-template-columns:1fr 1fr;gap:30px}.toolbar select{height:43px;width:100%;border:1px solid #d6d6d6;border-radius:6px;background:white;padding:0 16px;color:#333}.subbar{display:flex;align-items:center;gap:12px;margin:22px 0 12px;justify-content:flex-end}.subbar input{height:38px;border:1px solid #ddd;border-radius:5px;padding:0 12px;min-width:200px}.subbar #customDates{display:flex;gap:8px;margin-right:auto}.add,.primary{background:#353535;color:#fff;border:1px solid #353535;border-radius:5px;padding:11px 16px}.add:hover,.primary:hover{background:#555}.hint{font-size:12px;color:#888;margin:0 0 14px}.table-scroll{overflow-x:auto}.tx-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}.tx-table th{background:#353535;color:#fff;text-align:left;font-size:11px;font-weight:600;height:38px;padding:0 12px}.tx-table th:first-child{border-radius:8px 0 0 8px;width:14%}.tx-table th:nth-child(3){width:16%}.tx-table th:last-child{border-radius:0 8px 8px 0;width:50px}.tx-table td{height:40px;border-bottom:1px solid #ddd;padding:6px 12px;vertical-align:middle}.tx-table tr:last-child td{border-bottom:0}.editable{cursor:text}.editable:hover{background:#f6f6f6}.positive{color:#458f65}.negative{color:#ad454b}.cell-input{width:100%;height:29px;border:1px solid #777;border-radius:3px;padding:4px 6px;outline:none;background:#fff}.delete{background:transparent;border:0;color:#999;font-size:18px;padding:4px 8px}.delete:hover{color:#b44}.empty{text-align:center;color:#888;padding:35px!important}.bottom{display:flex;justify-content:space-between;align-items:center;color:#777;font-size:12px;margin-top:24px}.pagination{display:flex;gap:12px;align-items:center}.pagination button,.dialog-actions button{border:1px solid #ddd;border-radius:5px;background:white;padding:8px 12px}.pagination button:disabled{opacity:.4;cursor:default}#feedback{font-size:13px;margin-bottom:6px;min-height:16px;color:#ad454b}#feedback.ok{color:#458f65}dialog{border:1px solid #ddd;border-radius:9px;max-width:390px;box-shadow:0 14px 60px #0003;padding:25px}dialog::backdrop{background:#0006}dialog h2{font-size:20px;margin:0 0 10px}dialog p{font-size:14px;line-height:1.6;color:#666}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.dialog-actions .danger{background:#a33d45;color:white;border-color:#a33d45}.auth-wrap{min-height:100vh;background:#f6f6f6;display:grid;place-items:center;padding:25px}.auth-card{width:min(100%,420px);padding:34px;background:#fff;border:1px solid #e6e6e6;border-radius:10px;box-shadow:0 10px 35px #0000000c}.auth-card.install{width:min(100%,500px)}.auth-card h1{font-size:21px;text-align:center;margin:28px 0 24px}.auth-card label{display:block;font-size:13px;font-weight:600;margin:16px 0}.auth-card input{display:block;width:100%;margin-top:8px;height:42px;border:1px solid #ccc;border-radius:5px;padding:10px}.auth-card .primary{width:100%;margin-top:12px}.muted{color:#888;font-size:13px;line-height:1.6}.center{text-align:center}.auth-card .brand{text-align:center}.alert{background:#fff1f1;color:#a33d45;padding:12px;border-radius:5px;font-size:13px}.notice{background:#edf7ef;color:#35754d;padding:12px;border-radius:5px;font-size:13px}@media(max-width:700px){.topbar{padding:0 16px}.header-right span{display:none}.main{padding:20px 12px}.toolbar{gap:10px}.toolbar select{font-size:12px;padding:0 8px}.subbar{flex-wrap:wrap}.subbar #search{flex:1;min-width:130px}.subbar #customDates{width:100%}.subbar #customDates input{min-width:0;width:50%}.tx-table{min-width:650px}.bottom{gap:12px;flex-wrap:wrap}}

/* Screenshot-faithful transaction history presentation */
.main{max-width:none;padding:0 30px 32px;margin:0 auto}
.topbar{height:50px;padding:0 30px;border-bottom:1px solid #f0f0f0}
.brand.small{font-size:16px}.header-right{font-size:11px}.logout{padding:6px 11px}
.toolbar{grid-template-columns:1fr 1fr;gap:30px;margin:0 0 29px}
.toolbar select{height:40px;border-radius:6px;font-size:13px;padding:0 34px 0 35px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.subbar{margin:0 0 9px;min-height:0;gap:9px}
.subbar input{height:31px;font-size:12px;min-width:160px}
.add{padding:8px 11px;font-size:12px}
#customDates[hidden]{display:none!important}
#customDates input{height:31px}
#feedback{min-height:0;margin:0;font-size:12px}
#feedback:not(:empty){margin:5px 0}
.tx-table{font-size:12px;table-layout:fixed}
.tx-table th{height:37px;font-size:11px;padding:0 10px}
.tx-table th:first-child{width:14%}
.tx-table th:nth-child(3){width:12%}
.tx-table th:last-child{width:34px}
.tx-table td{height:39px;padding:5px 10px;border-bottom:1px solid #dedede}
.tx-table th:first-child{border-radius:8px 0 0 8px}
.tx-table th:last-child{border-radius:0 8px 8px 0}
.tx-table .delete{font-size:14px;opacity:.4}
.tx-table tr:hover .delete,.tx-table .delete:focus{opacity:1}
.bottom{margin-top:12px}
@media(max-width:700px){.main{padding:0 12px 24px}.topbar{padding:0 12px}.toolbar{gap:10px;margin-bottom:20px}.toolbar select{padding-left:10px}.tx-table{min-width:600px}.subbar{flex-wrap:wrap}}

/* TMS layout: action controls above transaction filters */
.main > .subbar{margin:0 0 14px}
.main > .toolbar{margin:0 0 22px}

/* TMS header and footer customization — scoped to transaction page */
.tms-header{height:76px;display:flex;align-items:stretch;justify-content:flex-start;padding:0;border-bottom:1px solid #e7e9e9;background:#fff}
.tms-identity{width:260px;flex-shrink:0;background:#10433d;color:#fff;padding:16px 20px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.tms-identity strong{font-size:17px;letter-spacing:.15px;line-height:1.15}
.tms-identity span{font-size:11px;line-height:1.22;color:#d5e5e2}
.tms-admin{padding:17px 26px;display:flex;flex-direction:column;gap:4px;justify-content:center;flex:1}
.tms-admin strong{font-size:16px;color:#183d3d}.tms-admin span{font-size:12px;color:#8390a0}
.tms-header .logout{align-self:center;margin-right:30px;font-size:12px}
.main{padding-top:25px}
.tms-footer{height:105px;position:relative;margin-top:28px;border-bottom:9px solid transparent;background-image:repeating-linear-gradient(45deg,transparent 0 3px,#f8f3e9 3px 4px,transparent 4px 8px);background-size:100% 8px;background-repeat:no-repeat;background-position:bottom}
.footer-next{position:absolute;right:20px;bottom:29px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1.5px solid #333;border-radius:50%;background:#ffcb3d;color:#292929;padding:0;box-shadow:none}
.footer-next:hover:not(:disabled){background:#ffd963}.footer-next:disabled{opacity:1;cursor:default;background:#ffcb3d;color:#292929;border-color:#333}
@media(max-width:700px){.tms-header{height:75px}.tms-identity{width:190px;padding:12px}.tms-identity strong{font-size:13px}.tms-identity span{font-size:9px}.tms-admin{padding:10px;min-width:0}.tms-admin strong{font-size:12px}.tms-header .logout{margin-right:10px;padding:6px}.main{padding-top:20px}.tms-footer{height:80px}}

/* TMS four-page navigation and purple identity; other controls retain existing colors */
.tms-identity{background:#45207A}
.tms-nav{display:flex;align-items:center;gap:5px;margin:0 20px 0 auto;flex-shrink:0}
.tms-nav a{color:#444;text-decoration:none;font-size:13px;padding:10px 13px;border-radius:5px}
.tms-nav a:hover{background:#f4f4f4}
.tms-nav a.active{font-weight:700;border-bottom:2px solid #45207A;border-radius:0}
.tms-admin{flex:1;min-width:0}
.tms-header .logout{margin-right:30px;flex-shrink:0}
.blank-page{min-height:calc(100vh - 76px);background:#fff}
.profile-page{max-width:650px;margin:36px auto 60px;padding:0 20px}
.profile-page h1{font-size:23px;margin:0 0 22px}
.profile-card{border:1px solid #e5e5e5;border-radius:8px;padding:24px;margin-bottom:20px;background:#fff}
.profile-card h2{font-size:17px;margin:0 0 20px}
.profile-card label{display:block;font-size:13px;font-weight:600;margin:15px 0}
.profile-card input{height:42px;width:100%;padding:9px 12px;border:1px solid #ccc;border-radius:5px;margin-top:7px;background:#fff}
.profile-card input[readonly]{background:#f7f7f7;color:#666}
.profile-help{color:#777;font-size:12px;line-height:1.6}
.password-field{position:relative}
.password-field input{padding-right:75px}
.password-toggle{position:absolute;right:5px;top:12px;border:0;background:transparent;color:#555;padding:8px 12px;font-size:12px}
@media(max-width:850px){.tms-header{height:auto;min-height:76px;flex-wrap:wrap}.tms-identity{min-height:76px}.tms-admin{flex:1}.tms-nav{order:3;width:100%;margin:0;padding:4px 10px;justify-content:center;border-top:1px solid #eee}.tms-header .logout{margin-right:12px}.blank-page{min-height:calc(100vh - 120px)}}
@media(max-width:500px){.tms-identity{width:170px}.tms-admin strong{font-size:11px}.tms-nav a{padding:9px 11px}}

/* Match reference arrow: fixed 34px gold circle, dark outline and chevron, even when pagination is unavailable. */
.footer-next,.footer-next:disabled{box-sizing:border-box;width:34px;height:34px;min-width:34px;min-height:34px;opacity:1;background:#ffcb3d;color:#292929;border:1.5px solid #333;border-radius:50%;box-shadow:none;filter:none;}
.footer-next svg{width:18px;height:18px;stroke:#292929;stroke-width:2;opacity:1;}


/* M2U reference alignment: transaction list (picture 1) and footer (picture 3). */
/* Keep pagination operational via the existing gold arrow, without the extra text controls. */
.main > .bottom{display:none!important}
.main > .toolbar{gap:30px;margin-bottom:29px}
.main > .toolbar select{height:47px;font-size:14px;padding-left:35px}
.tx-table{font-size:13px}
.tx-table th{height:38px;font-size:12px;padding:0 10px}
.tx-table td{height:40px;font-size:13px;padding:6px 10px}
.tx-table th:first-child{width:16%}
.tx-table th:nth-child(3){width:13%}
.tx-table th:last-child{width:34px}
/* Reference footer has a thin top divider and a single right-aligned yellow arrow. */
.tms-footer{margin-top:26px;height:105px;border-top:1px solid #e7e7e7;border-bottom:0;
 background-image:repeating-linear-gradient(45deg,transparent 0 4px,#f7f3e9 4px 5px,transparent 5px 9px);
 background-size:100% 8px;background-position:bottom;background-repeat:no-repeat}
.footer-next{right:40px;bottom:22px}
@media(max-width:700px){
 .main > .toolbar{gap:10px;margin-bottom:20px}
 .main > .toolbar select{height:44px;font-size:12px;padding-left:10px}
 .footer-next{right:18px;bottom:22px}
}

/* M2U typography refinement to match the reference screenshot. */
/* Use one predictable font across controls, table headings and rows. */
.main .toolbar select, .main .tx-table, .main .tx-table th, .main .tx-table td,
.main .tx-table button, .main .tx-table input {
 font-family: Arial, Helvetica, sans-serif !important;
 font-style: normal !important;
 letter-spacing: 0 !important;
 text-transform: none;
}
.main .toolbar select {font-size:14px !important;font-weight:400 !important;line-height:1.3 !important;}
.main .tx-table {font-size:12px !important;}
.main .tx-table th {font-size:11px !important;font-weight:700 !important;line-height:1.2 !important;}
.main .tx-table td {font-size:12px !important;font-weight:400 !important;line-height:1.35 !important;}
.main .tx-table td input {font-size:12px !important;font-weight:400 !important;}
.main .tx-table td .delete {font-size:14px !important;}

/* M2U table reference: typography, spacing, three-column alignment. */
.main {padding-left:16px;padding-right:16px;}
.main > .toolbar {gap:30px;margin-bottom:29px;}
.main > .toolbar select {height:47px;padding-left:35px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:400;}
.main .tx-table {table-layout:fixed;font-family:Arial,Helvetica,sans-serif;}
.main .tx-table th {height:38px;font-size:11px;font-weight:700;text-align:left;padding:0 10px;}
.main .tx-table td {height:40px;font-size:12px;font-weight:400;padding:6px 10px;}
.main .tx-table th:first-child {width:16%;}
.main .tx-table th:nth-child(2) {width:auto;}
.main .tx-table th:nth-child(3) {width:13%;}
.main .tx-table th:last-child {width:26px;}
.main .tx-table td:nth-child(2) {background:transparent;}
.main .tx-table td:nth-child(3) {white-space:nowrap;}
.main .tx-table th:first-child {border-radius:7px 0 0 7px;}
.main .tx-table th:last-child {border-radius:0 7px 7px 0;}
@media(max-width:700px) {.main{padding-left:12px;padding-right:12px}.main > .toolbar{gap:10px}.main > .toolbar select{padding-left:12px;font-size:12px}}

/* Transaction amount colors matching the supplied reference palette. */
.main .tx-table td.positive{color:#00B37A;}
.main .tx-table td.negative{color:#EF4444;}