:root{--navy:#102a43;--blue:#1769aa;--cyan:#2bb0ed;--ink:#243b53;--muted:#627d98;--line:#d9e2ec;--bg:#f4f7fb;--green:#14804a;--red:#c62828;--amber:#a86100;--white:#fff}
.top{height:78px!important;position:relative}.layout{min-height:calc(100vh - 78px)!important}.brand img{width:154px!important;height:64px!important;background:#fff;border-radius:8px;padding:2px;object-fit:contain!important}.system-title{position:absolute;left:50%;transform:translateX(-50%);font-size:22px;font-weight:800;letter-spacing:.3px;white-space:nowrap}.login-logo{width:300px!important;height:140px!important;object-fit:contain}.login-title{text-align:center;color:var(--navy);margin:0 0 5px}.share-record{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line)}
.whatsapp-message{min-width:360px;min-height:330px!important;white-space:pre-wrap;line-height:1.45}
.brand{display:flex!important;align-items:center}.brand img{width:158px;height:39px;object-fit:contain;object-position:left center}.login-logo{display:block;width:190px;height:46px;margin:0 auto 10px}.renewal-comments{min-width:300px}.comment-list{max-height:220px;overflow:auto;margin:10px 0}.comment-item{padding:8px;border-bottom:1px solid var(--line)}.comment-meta{font-size:11px;color:var(--muted);margin-bottom:3px}.compact-form{display:flex;gap:6px;align-items:flex-end}.compact-form textarea{min-height:52px;min-width:210px}.direction-inward{background:#e8f3ff;color:#1769aa}.direction-outward{background:#fff2cf;color:#a86100}
.tick-form{display:grid;gap:7px;min-width:210px}.tick-form label{font-size:12px;font-weight:700}.tick-form input[type=text],.tick-form input:not([type]){padding:7px;border:1px solid #bcccdc;border-radius:7px}
@media(max-width:900px){.system-title{font-size:16px}.brand img{width:120px!important}.top .user span{display:none}}@media(max-width:700px){.system-title{display:none}}
.btn.amber{background:#a86100}.review-panel{background:#fff9e6;border:1px solid #efc75e;border-radius:12px;margin-bottom:16px;padding:16px;display:grid;gap:10px}.review-chips{display:flex;gap:7px;flex-wrap:wrap}.review-chip{border-radius:999px;padding:5px 9px;font-size:12px;font-weight:750}.review-chip.missing{background:#ffe0a6;color:#744500}.review-chip.ok{background:#dcf7e9;color:var(--green)}.field.review-required{background:#fff8dc;border:1px solid #e0ad28;border-radius:9px;padding:8px}.field.review-required label:after{content:" · CHECK";color:#a86100;font-size:11px}
.inline-reset{display:flex;gap:6px;min-width:230px}.inline-reset input{min-width:130px;padding:6px 8px;border:1px solid #bcccdc;border-radius:7px}
.permission-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:350px}.permission-form label{white-space:nowrap;font-size:12px}.customer-fetch{margin-top:4px;padding:8px;background:#eef7fc;border-radius:7px;line-height:1.45}
.access-section{padding:14px;background:#f8fbfe;border:1px solid var(--line);border-radius:10px}.permission-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:9px}.permission-grid label{padding:9px;background:#fff;border:1px solid var(--line);border-radius:7px;font-size:13px}.permission-grid input{width:auto;margin-right:5px}@media(max-width:1000px){.permission-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.permission-grid{grid-template-columns:1fr}}
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.row-actions form,.actions form,td form{margin:0}.upload-group{margin-top:8px;padding:12px;background:#f6fbfe;border:1px dashed #7abddd;border-radius:9px}
.section-label{padding:10px 12px;background:#eaf5fc;border-left:4px solid var(--blue);border-radius:7px;font-weight:800;color:var(--navy)}[hidden]{display:none!important}.upload-group>.field{margin-top:10px}
.multi-kyc-list{display:grid;gap:7px;margin-top:10px}.kyc-file-row{display:grid;grid-template-columns:1fr minmax(180px,260px);gap:10px;align-items:center;padding:8px;background:#fff;border:1px solid var(--line);border-radius:7px}.kyc-file-row span{overflow-wrap:anywhere}.message-list{display:grid;gap:10px}.message-item{padding:12px;border-radius:9px;border:1px solid var(--line);max-width:78%}.message-in{background:#eef7fc}.message-out{background:#e5f7ec;margin-left:auto}.dashboard-filter{background:#fff;padding:12px;border:1px solid var(--line);border-radius:10px}
.dashboard-card{display:block;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}.dashboard-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #1769aa22;border-color:#8bc7e8}.dashboard-card .hint{color:var(--blue)}
.account-detail .panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-detail .grid{margin-bottom:0}.account-detail .card{box-shadow:none}.account-meta{margin-bottom:18px;padding:13px;background:#f8fbfe;border:1px solid var(--line);border-radius:9px}.table-scroll{overflow-x:auto}td a:not(.btn){color:var(--blue);font-weight:650;text-decoration:none}td a:not(.btn):hover{text-decoration:underline}
.settings-section>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}.settings-section>summary::-webkit-details-marker{display:none}.settings-section>summary:after{content:"+";font-size:22px;line-height:1;color:var(--blue);margin-left:4px}.settings-section[open]>summary:after{content:"−"}.settings-section[open]>summary{background:#eef7fc}.settings-section>.panel-body,.settings-section>form.panel-body{border-top:0}.summary-count{margin-left:auto;color:var(--muted);font-size:12px;font-weight:600}
.mobile-menu-toggle{display:none;border:0;background:transparent;color:#fff;font-size:26px;line-height:1;padding:8px;cursor:pointer}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,Arial,sans-serif;font-size:14px}.top{height:64px;background:linear-gradient(110deg,var(--navy),#164e78);display:flex;align-items:center;padding:0 24px;color:#fff;box-shadow:0 2px 12px #0b223933}.brand{font-weight:800;font-size:20px;letter-spacing:.2px}.brand small{font-weight:500;opacity:.72;font-size:12px;margin-left:8px}.top .user{margin-left:auto;display:flex;gap:12px;align-items:center}.top a{color:#fff;text-decoration:none}.layout{display:flex;min-height:calc(100vh - 64px)}nav{width:225px;background:#fff;border-right:1px solid var(--line);padding:18px 12px}nav a{display:block;padding:11px 14px;margin:2px 0;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600}nav a:hover{background:#eaf5fc;color:var(--blue)}main{flex:1;padding:24px;min-width:0}.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.head h1{margin:0;font-size:25px;color:var(--navy)}.sub{color:var(--muted);font-size:13px}.grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:15px;margin-bottom:20px}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 3px 12px #334e6812}.metric .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}.metric .value{font-size:26px;font-weight:800;color:var(--navy);margin-top:7px}.metric .hint{font-size:12px;color:var(--muted);margin-top:4px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:18px;overflow:hidden}.panel-title{padding:15px 18px;font-size:16px;font-weight:750;border-bottom:1px solid var(--line);background:#fbfdff}.panel-body{padding:18px}.btn{display:inline-block;border:0;border-radius:8px;padding:9px 14px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;cursor:pointer;font-size:13px}.btn.secondary{background:#e9f2f9;color:var(--blue)}.btn.green{background:var(--green)}.btn.red{background:var(--red)}.btn.small{padding:6px 10px;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}table{width:100%;border-collapse:collapse}th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:12px;text-transform:uppercase;color:var(--muted);background:#f8fafc}tr:hover td{background:#fbfdff}.money{text-align:right;white-space:nowrap}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.badge.paid{background:#dcf7e9;color:var(--green)}.badge.partial{background:#fff2cf;color:var(--amber)}.badge.unpaid{background:#fde4e4;color:var(--red)}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:700;color:#334e68}.field input,.field select,.field textarea{width:100%;padding:10px 11px;border:1px solid #bcccdc;border-radius:8px;background:#fff;font:inherit}.field textarea{min-height:80px}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #b9e5fb;border-color:var(--cyan)}.notice{padding:12px 14px;border-radius:8px;margin-bottom:14px}.notice.ok{background:#ddf7e9;color:#0b6b3a}.notice.error{background:#fde7e7;color:#a61b1b}.notice.warn{background:#fff3cd;color:#795600}.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.filters input,.filters select{padding:9px 11px;border:1px solid #bcccdc;border-radius:8px}.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#102a43,#1769aa)}.login{width:390px;background:#fff;padding:32px;border-radius:16px;box-shadow:0 20px 50px #001a3377}.login h1{color:var(--navy);margin:0 0 5px}.login .field{margin:15px 0}.login .btn{width:100%;padding:12px}.empty{padding:30px;text-align:center;color:var(--muted)}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.kv{display:grid;grid-template-columns:170px 1fr;gap:9px}.kv div:nth-child(odd){color:var(--muted)}.footer{padding:16px 0;color:var(--muted);font-size:12px}.danger{color:var(--red)}@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}nav{width:185px}}@media(max-width:700px){.layout{display:block}nav{width:auto;display:flex;overflow:auto;padding:8px}nav a{white-space:nowrap}main{padding:14px}.grid,.two{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.brand small{display:none}}

/* Mobile application layout */
@media(max-width:700px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{font-size:14px}
  .top{height:62px!important;padding:0 9px;position:sticky;top:0;z-index:50;gap:6px}
  .mobile-menu-toggle{display:block;flex:0 0 42px}
  .brand{min-width:0;flex:1}.brand img{width:105px!important;height:48px!important;padding:2px!important}
  .system-title{display:none}.top .user{margin-left:0;gap:9px;font-size:12px;white-space:nowrap}.top .user span,.top .user a:first-of-type{display:none}
  .layout{display:block;min-height:calc(100vh - 62px)!important}
  nav{display:none;position:fixed;left:0;top:62px;bottom:0;width:min(84vw,320px);padding:10px;background:#fff;overflow-y:auto;border-right:1px solid var(--line);box-shadow:8px 0 24px #102a4333;z-index:49}
  nav.mobile-open{display:block}nav a{white-space:normal;padding:12px 14px;border-bottom:1px solid #edf2f7}
  main{width:100%;max-width:100%;padding:10px;overflow:hidden}
  .head{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:13px}.head h1{font-size:21px;line-height:1.2;overflow-wrap:anywhere}.head>.actions{width:100%}
  .actions{gap:6px}.head>.btn,.head>.actions .btn{flex:1;text-align:center}.btn{min-height:40px;padding:10px 12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.two{grid-template-columns:1fr;gap:10px}
  .card{min-width:0;padding:12px;border-radius:10px}.metric .label{font-size:10px;line-height:1.25;overflow-wrap:anywhere}.metric .value{font-size:19px;line-height:1.2;overflow-wrap:anywhere}.metric .hint{font-size:10px}
  .panel{margin-bottom:12px;border-radius:10px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.panel-title{padding:12px;font-size:15px;position:sticky;left:0}.panel-body{padding:12px;min-width:0}
  .panel>table,.table-scroll table{width:max-content;min-width:680px}.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding:9px 10px;max-width:260px;overflow-wrap:anywhere}.money{text-align:right;white-space:nowrap}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:11px}.field.full{grid-column:auto}.field input,.field select,.field textarea{min-width:0;font-size:16px;padding:11px}.field input[type=file]{font-size:13px}
  .filters{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.filters input,.filters select,.filters .btn{width:100%;min-width:0;font-size:16px}
  .login-wrap{padding:14px;align-items:center}.login{width:100%;max-width:390px;padding:22px 17px}.login-logo{width:220px!important;max-width:100%;height:105px!important}
  .kv{grid-template-columns:105px minmax(0,1fr);gap:9px}.kv div{min-width:0;overflow-wrap:anywhere}
  .whatsapp-message{min-width:0!important;width:100%;min-height:250px!important}.renewal-comments,.compact-form textarea,.inline-reset,.permission-form{min-width:0;width:100%}.compact-form,.inline-reset{flex-direction:column;align-items:stretch}.inline-reset input{min-width:0}
  .kyc-file-row{grid-template-columns:minmax(0,1fr);gap:7px}.message-item{max-width:94%}.account-detail .panel-title{align-items:flex-start;flex-wrap:wrap}.summary-count{white-space:nowrap}
  details>summary{touch-action:manipulation}.notice{padding:10px 11px;overflow-wrap:anywhere}.footer{text-align:center;padding-bottom:max(16px,env(safe-area-inset-bottom))}
}

@media(max-width:380px){
  .grid{grid-template-columns:1fr}.top .user{gap:6px}.brand img{width:94px!important}.btn{font-size:12px}.metric .value{font-size:21px}
}

/* Display preferences and safe wrapping (desktop + mobile app) */
html[data-font-size="small"] body{font-size:12px!important}html[data-font-size="normal"] body{font-size:14px!important}html[data-font-size="large"] body{font-size:17px!important}
.display-controls{display:grid;gap:7px;padding:0 2px 12px;margin-bottom:8px;border-bottom:1px solid var(--line)}.display-controls label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700}.display-controls select,.display-toggle{min-height:34px;border:1px solid #b9cad8;border-radius:7px;background:#f4f8fb;color:var(--ink);font:inherit;padding:6px 8px}.display-toggle{width:100%;font-weight:750;cursor:pointer}.wrap-text{display:block;min-width:120px;max-width:280px;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}.reminder-alert{border-left:5px solid var(--amber)}
th,td{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
html[data-theme="dark"]{--ink:#e7eef7;--muted:#adbdcc;--line:#33485b;--bg:#0d1722;--white:#172534;--blue:#68b8f1;--cyan:#54c7f7;--green:#46c987;--red:#ff7777;--amber:#f0b657}
html[data-theme="dark"] body,html[data-theme="dark"] nav{background:#0d1722;color:var(--ink)}html[data-theme="dark"] nav{background:#132231}html[data-theme="dark"] nav a{color:#e7eef7}html[data-theme="dark"] nav a:hover,html[data-theme="dark"] .settings-section[open]>summary{background:#20384b;color:#8fd1ff}
html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .login,html[data-theme="dark"] .dashboard-filter,html[data-theme="dark"] .access-section,html[data-theme="dark"] .account-meta,html[data-theme="dark"] .upload-group,html[data-theme="dark"] .kyc-file-row,html[data-theme="dark"] .message-item{background:#172534;color:#e7eef7;box-shadow:none}html[data-theme="dark"] .panel-title,html[data-theme="dark"] th,html[data-theme="dark"] .section-label{background:#1d3041;color:#c6d7e5}html[data-theme="dark"] tr:hover td{background:#1b2e3e}html[data-theme="dark"] .head h1,html[data-theme="dark"] .metric .value,html[data-theme="dark"] .login-title{color:#eaf5ff}
html[data-theme="dark"] .field label{color:#d5e3ef}html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .filters input,html[data-theme="dark"] .filters select,html[data-theme="dark"] .display-controls select,html[data-theme="dark"] .display-toggle{background:#0f1d29;color:#e7eef7;border-color:#456077}html[data-theme="dark"] .btn.secondary{background:#29435a;color:#9bd5ff}html[data-theme="dark"] .notice.warn{background:#493b1e;color:#ffe5a1}html[data-theme="dark"] .notice.ok{background:#173d2e;color:#9be5be}html[data-theme="dark"] .notice.error{background:#4b252a;color:#ffc3c8}
@media(max-width:700px){.wrap-text{min-width:135px;max-width:220px}.display-controls{position:sticky;top:0;background:inherit;z-index:2;padding-top:4px}html[data-theme="dark"] nav{background:#132231}}