/* FOL Hub v3: focused internal workspace */
:root {
  --ink: #102a43;
  --ink-soft: #334e68;
  --muted: #66788a;
  --quiet: #8a9aaa;
  --line: #d9e2ec;
  --line-strong: #c4d1de;
  --page: #f3f6fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --navy: #123a61;
  --navy-dark: #0b2947;
  --navy-light: #e8f0f8;
  --orange: #e87524;
  --orange-dark: #b94f0d;
  --orange-light: #fff0e5;
  --danger: #b42318;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, .04), 0 5px 18px rgba(16, 42, 67, .05);
  --shadow-lg: 0 24px 70px rgba(11, 41, 71, .2);
}

* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable="true"]:focus-visible { outline: 3px solid rgba(232, 117, 36, .28); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100dvh; }
.sidebar { position: sticky; top: 0; width: 264px; height: 100dvh; flex: 0 0 264px; padding: 24px 18px 18px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--navy); font-weight: 800; letter-spacing: -.3px; box-shadow: 4px 4px 0 #dce8f2; }
.brand-lockup strong { display: block; color: var(--ink); font-size: 17px; line-height: 1.1; }
.brand-lockup strong span { color: var(--orange); }
.brand-lockup small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.sidebar-label, .eyebrow { margin: 0; color: var(--quiet); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-label { padding: 0 12px 10px; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; color: #52687c; background: transparent; display: flex; align-items: center; gap: 11px; text-align: left; font-size: 13px; transition: background .16s ease, color .16s ease, transform .16s ease; }
.nav-item:hover { color: var(--navy); background: #f3f7fb; }
.nav-item:active { transform: translateY(1px); }
.nav-item.active { color: var(--navy); background: var(--navy-light); border-color: #d7e4ef; font-weight: 750; }
.nav-icon { width: 28px; height: 26px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 7px; color: #6b7f92; background: #f1f5f8; font-size: 8px; font-weight: 850; letter-spacing: .04em; }
.nav-item.active .nav-icon { color: #fff; background: var(--navy); }
.nav-item b { min-width: 24px; margin-left: auto; padding: 3px 7px; border-radius: 999px; color: var(--navy); background: #d8e7f4; font-size: 10px; text-align: center; }
.nav-subtle { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.sidebar-bottom { margin-top: auto; }
.backup-card { margin: 18px 0 14px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; }
.backup-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); background: var(--navy-light); font-size: 8px; font-weight: 850; }
.backup-card strong, .profile-row strong { display: block; font-size: 11px; }
.backup-card p, .profile-row small { margin: 3px 0 0; color: var(--quiet); font-size: 9px; }
.mini-button { padding: 6px 7px; border: 0; border-radius: 7px; color: var(--orange-dark); background: var(--orange-light); font-size: 9px; font-weight: 800; }
.profile-row { display: flex; align-items: center; gap: 9px; padding: 15px 5px 0; border-top: 1px solid var(--line); }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--navy); background: var(--navy-light); font-size: 9px; font-weight: 800; }
.logout-link { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 700; text-decoration: none; }
.logout-link:hover { color: var(--orange-dark); }

.main-area { min-width: 0; flex: 1; }
.topbar { height: 70px; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(243, 246, 250, .94); display: flex; align-items: center; justify-content: space-between; }
.breadcrumb, .topbar-actions { display: flex; align-items: center; gap: 11px; color: var(--quiet); font-size: 11px; }
.breadcrumb b { color: var(--line-strong); font-weight: 400; }
.breadcrumb strong { color: var(--ink); }
.secure-label { padding: 5px 8px; border-radius: 6px; color: #316448; background: #e9f5ee; font-size: 9px; font-weight: 800; }
.account-chip { color: var(--muted); font-size: 10px; font-weight: 700; text-decoration: none; }
.mobile-menu { display: none; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); background: var(--surface); font-size: 10px; font-weight: 800; }
.content-wrap { max-width: 1320px; margin: 0 auto; padding: 28px 42px 72px; }
.search-row { position: sticky; top: 0; z-index: 4; display: flex; gap: 12px; margin: -2px 0 29px; padding: 2px 0 10px; background: linear-gradient(var(--page) 75%, rgba(243, 246, 250, 0)); }
.search-box { height: 48px; max-width: 760px; flex: 1; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; align-items: center; gap: 11px; box-shadow: 0 1px 2px rgba(16, 42, 67, .03); }
.search-icon { padding-right: 10px; border-right: 1px solid var(--line); color: var(--navy); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.search-box input::placeholder { color: #8393a2; }
.search-box kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--quiet); background: var(--surface-soft); font-size: 9px; }

.button { min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button-primary { color: #fff; background: var(--navy); box-shadow: 0 7px 18px rgba(18, 58, 97, .15); }
.button-primary:hover { background: var(--navy-dark); }
.button-quiet { color: var(--navy); background: #edf3f8; border-color: #dce6ef; }
.text-button { padding: 5px 0; border: 0; color: var(--navy); background: transparent; font-size: 10px; font-weight: 800; white-space: nowrap; }
.text-button:hover { color: var(--orange-dark); }
.copy-button { min-height: 32px; padding: 7px 10px; border: 1px solid #cbd8e5; border-radius: 7px; color: var(--navy); background: #f8fafc; font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.copy-button:hover { border-color: var(--navy); }
.danger-button { margin-left: auto; padding: 8px 4px; border: 0; color: var(--danger); background: transparent; font-size: 10px; font-weight: 800; }
.icon-button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; color: var(--muted); background: #edf2f6; font-size: 16px; }

.home-brief { position: relative; overflow: hidden; min-height: 310px; padding: 46px; border-radius: 18px; color: #fff; background: var(--navy-dark); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); align-items: end; gap: 42px; }
.home-brief:after { display: none; }
.home-brief > * { position: relative; z-index: 1; }
.home-brief .eyebrow { color: #abc1d4; }
.home-brief h1 { max-width: 700px; margin: 12px 0 14px; color: #f8fbff; font-size: clamp(34px, 4.2vw, 55px); line-height: 1.02; letter-spacing: -.045em; }
.home-brief p:not(.eyebrow) { max-width: 650px; margin: 0; color: #c4d3df; font-size: 13px; line-height: 1.65; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.home-actions .button-primary { color: #fff; background: var(--orange); box-shadow: none; }
.home-actions .button-primary:hover { background: #d76517; }
.home-actions .button-quiet { color: #edf5fb; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.home-summary { display: grid; gap: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); }
.home-summary div { padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.11); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.home-summary div:last-child { border-bottom: 0; }
.home-summary strong { color: #fff; font-size: 23px; }
.home-summary span { color: #b8c9d7; font-size: 10px; }
.home-section, .section-block { margin-top: 38px; }
.section-heading { margin-bottom: 16px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading h2, .page-intro h1 { margin: 8px 0 0; color: var(--ink); font-size: 24px; line-height: 1.15; letter-spacing: -.025em; }
.work-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.1fr; gap: 11px; }
.work-step { position: relative; min-height: 128px; padding: 19px 17px 17px; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: 0 1px 0 rgba(16,42,67,.02); display: flex; align-items: flex-start; gap: 12px; text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.work-step:hover { transform: translateY(-2px); border-color: #b8cadb; box-shadow: var(--shadow-sm); }
.work-wordpress { border-top-color: #2878bd; background: #f5faff; }
.work-ehotel { border-top-color: #7654a8; background: #faf8fe; }
.work-hosting { border-top-color: var(--orange); background: #fffaf6; }
.work-sms { border-top-color: #b04c66; background: #fff8fa; }
.work-step b { min-width: 39px; height: 39px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--navy); font-size: 18px; line-height: 1; }
.work-wordpress b { background: #2878bd; }
.work-ehotel b { background: #7654a8; }
.work-hosting b { background: var(--orange); }
.work-sms b { background: #b04c66; }
.work-step span { min-width: 0; }
.work-step strong, .work-step small { display: block; }
.work-step strong { font-size: 12px; }
.work-step small { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.work-step i { align-self: center; margin-left: auto; padding: 5px 7px; border: 1px solid currentColor; border-radius: 6px; color: var(--navy); font-size: 9px; font-style: normal; font-weight: 800; }
.work-hosting i { color: var(--orange-dark); }
.work-ehotel i { color: #7654a8; }
.work-sms i { color: #b04c66; }

.page-intro { min-height: 130px; padding: 8px 0 27px; border-bottom: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.page-intro > div { max-width: 760px; }
.page-intro p:not(.eyebrow) { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.library-toolbar { margin: 20px 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.filter-row { display: flex; align-items: center; gap: 9px; }
.filter-chip { min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px; color: var(--ink-soft); background: var(--surface); font-size: 10px; font-weight: 800; white-space: nowrap; }
.filter-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.filter-chip.active { color: #fff !important; background: var(--navy) !important; border-color: var(--navy) !important; }
.filter-chip.cat-all { border-left-color: var(--navy); }
.filter-chip.cat-wordpress { border-left-color: #2878bd; }
.filter-chip.cat-ehotel { border-left-color: #7654a8; }
.filter-chip.cat-hosting { border-left-color: var(--orange); }
.filter-chip.cat-malaysia-sms { border-left-color: #b04c66; }
.filter-chip.cat-internal { border-left-color: #718096; }
.filter-chip.cat-review { border-left-color: var(--danger); }
.result-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 7px; color: var(--navy); background: var(--navy-light); font-size: 9px; font-weight: 800; }
.record-list { display: grid; gap: 9px; }
.record-row { min-height: 104px; padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: border-color .16s ease, box-shadow .16s ease; }
.record-row:hover { border-color: #bdcddd; box-shadow: var(--shadow-sm); }
.record-main { min-width: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: start; gap: 14px; }
.service-tag { min-width: 84px; margin-top: 1px; padding: 6px 8px; border-radius: 7px; font-size: 8px; font-weight: 850; text-align: center; }
.service-tag.cat-wordpress, .file-category.cat-wordpress { color: #175f99; background: #e8f3fd; }
.service-tag.cat-ehotel, .file-category.cat-ehotel { color: #67418f; background: #f0eafb; }
.service-tag.cat-hosting, .file-category.cat-hosting { color: #984814; background: var(--orange-light); }
.service-tag.cat-malaysia-sms, .file-category.cat-malaysia-sms { color: #913d55; background: #fbeaf0; }
.service-tag.cat-internal, .file-category.cat-internal { color: #506274; background: #edf1f5; }
.record-row h3 { margin: 0 0 5px; color: var(--ink); font-size: 13px; }
.record-row p { max-width: 760px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.record-row small { display: block; margin-top: 6px; color: var(--quiet); font-size: 9px; }
.row-actions, .inline-buttons { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.supported-formats { margin: 20px 0; padding: 15px 17px; border: 1px solid #d4e0eb; border-radius: var(--radius); background: #edf3f8; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.supported-formats strong { margin-right: 4px; color: var(--navy); font-size: 11px; }
.supported-formats span { padding: 5px 8px; border-radius: 6px; color: var(--ink-soft); background: #fff; font-size: 9px; font-weight: 700; }
.supported-formats em { margin-left: auto; color: var(--muted); font-size: 9px; font-style: normal; }
.file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.file-card { overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(16,42,67,.03); }
.file-card.cat-wordpress { border-top-color: #2878bd; }
.file-card.cat-hosting { border-top-color: var(--orange); }
.file-card.cat-domains { border-top-color: #6b5ba7; }
.file-card.cat-company-header { border-top-color: var(--navy); }
.file-preview { width: 100%; height: 220px; padding: 14px; border: 0; overflow: hidden; background: #eef3f7; display: grid; place-items: center; }
.file-preview img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; }
.file-preview:hover img { transform: scale(1.02); }
.file-placeholder { width: 110px; height: 140px; border: 1px solid #c7d4e0; border-radius: 9px; color: var(--navy); background: #fff; box-shadow: 0 8px 22px rgba(16,42,67,.08); display: grid; place-content: center; gap: 8px; text-align: center; }
.file-placeholder strong { font-size: 20px; }
.file-placeholder small { color: var(--muted); font-size: 8px; }
.file-body { padding: 15px 16px 16px; }
.item-top { display: flex; align-items: center; gap: 8px; }
.file-category { padding: 4px 7px; border-radius: 6px; color: var(--ink-soft); background: #eef2f6; font-size: 8px; font-weight: 850; }
.file-type { margin-left: auto; color: var(--quiet); font-size: 8px; font-weight: 850; }
.file-body h3 { min-height: 35px; margin: 11px 0 6px; color: var(--ink); font-size: 12px; line-height: 1.4; }
.file-body p { min-height: 32px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.item-footer { margin-top: 13px; padding-top: 12px; border-top: 1px solid #edf1f5; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.bill-header-upload { margin-top: 22px; padding: 21px 22px; border: 1px solid #cbd9e7; border-left: 5px solid var(--orange); border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.bill-header-upload h2 { margin: 7px 0 5px; font-size: 18px; }
.bill-header-upload p:not(.eyebrow) { max-width: 700px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.settings-layout { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; }
.settings-form, .letter-preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.settings-form { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-section-title { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.form-section-title strong, .form-section-title span { display: block; }
.form-section-title strong { font-size: 13px; }
.form-section-title span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.settings-form label, .editor-form label, .auth-card label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.settings-form label:nth-of-type(3), .settings-form button { grid-column: 1 / -1; }
.settings-form input, .settings-form textarea, .settings-form select, .editor-form input, .editor-form textarea, .editor-form select, .auth-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: #fff; font-size: 11px; }
.settings-form textarea, .editor-form textarea { resize: vertical; }
.letter-preview { padding: 23px; }
.letter-preview img { width: 100%; max-height: 90px; object-fit: contain; object-position: left center; margin: 17px 0 13px; }
.letter-preview strong, .letter-preview span { display: block; }
.letter-preview strong { color: var(--navy); font-size: 19px; }
.letter-preview span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.letter-preview hr { margin: 23px 0; border: 0; border-top: 3px solid var(--orange); }
.letter-preview b { font-size: 12px; }
.letter-preview p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.letter-logo { width: 52px; height: 52px; margin: 17px 0 13px; border-radius: 10px; color: #fff; background: var(--navy); display: grid; place-items: center; font-weight: 850; }

.vault-hero { margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-left: 5px solid var(--orange); border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; gap: 18px; }
.vault-lock { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 11px; color: #fff; background: var(--navy); display: grid; place-items: center; font-size: 9px; font-weight: 850; }
.vault-hero h2 { margin: 0 0 6px; font-size: 18px; }
.vault-hero p { max-width: 650px; margin: 0 0 14px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.vault-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.vault-entry { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: flex; align-items: center; gap: 11px; }
.vault-entry-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); background: var(--navy-light); font-size: 7px; font-weight: 850; }
.vault-entry strong, .vault-entry small { display: block; }
.vault-entry small { margin-top: 4px; color: var(--quiet); font-size: 9px; }
.vault-entry .text-button { margin-left: auto; }

.empty-state { min-height: 230px; padding: 30px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(255,255,255,.45); display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }
.empty-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--navy); font-size: 20px; }
.empty-state h3 { margin: 11px 0 4px; color: var(--ink); font-size: 15px; }
.empty-state p { max-width: 380px; margin: 0 0 15px; font-size: 10px; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; padding: 20px; background: rgba(7, 28, 49, .56); display: grid; place-items: center; }
.detail-modal, .file-modal, .editor-modal { position: relative; max-height: 94vh; overflow: auto; border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }
.detail-modal { width: min(680px, 100%); padding: 28px; }
.file-modal { width: min(1000px, 100%); padding: 27px; }
.editor-modal { width: min(1180px, 100%); padding: 0; }
.close-button { position: absolute; z-index: 2; right: 16px; top: 16px; width: 32px; height: 32px; border: 0; border-radius: 8px; color: var(--ink-soft); background: #edf2f6; font-size: 19px; }
.detail-modal h2, .file-modal h2 { margin: 8px 38px 8px 0; font-size: 22px; }
.modal-help { margin: 0 0 18px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.editor-title { padding: 26px 30px 20px; border-bottom: 1px solid var(--line); }
.editor-title h2 { margin: 8px 0 5px; font-size: 23px; }
.editor-title p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; }
.editor-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, .8fr); }
.editor-columns > .editor-form { padding: 24px 30px 28px; }
.editor-form { display: grid; gap: 14px; }
.form-two { display: grid; grid-template-columns: 1.55fr .85fr; gap: 13px; }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 8px 8px 0 0; background: #edf2f6; }
.editor-toolbar button { min-height: 31px; padding: 0 10px; border: 1px solid #d1dce6; border-radius: 6px; color: var(--ink-soft); background: #fff; font-size: 10px; font-weight: 700; }
.editor-toolbar button:hover { color: #fff; background: var(--navy); border-color: var(--navy); }
.rich-text { min-height: 310px; padding: 17px; border: 1px solid var(--line-strong); border-radius: 0 0 8px 8px; color: #243b53; background: #fff; font-size: 13px; line-height: 1.7; }
.rich-text:empty:before { content: "Write the customer-ready message or guideline here"; color: var(--quiet); }
.rich-text h2 { margin: 17px 0 8px; color: var(--navy); font-size: 19px; }
.rich-text ul, .rich-text ol { padding-left: 23px; }
.rich-text li { margin: 4px 0; }
.editor-help { margin: -7px 0 0; color: var(--quiet); font-size: 9px; }
.editor-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; }
.attachment-panel { padding: 24px; border-left: 1px solid var(--line); background: #f7f9fc; }
.attachment-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.attachment-heading h3 { margin: 7px 0 3px; font-size: 15px; }
.attachment-heading small { color: var(--quiet); font-size: 9px; }
.attached-list { display: grid; gap: 7px; margin: 16px 0; }
.attached-row { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: flex; align-items: center; gap: 8px; }
.file-type-badge { min-width: 35px; padding: 5px; border-radius: 6px; color: var(--navy); background: var(--navy-light); font-size: 7px; font-weight: 850; text-align: center; }
.attached-row div { min-width: 0; flex: 1; }
.attached-row strong, .attached-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attached-row strong { font-size: 10px; }
.attached-row small { margin-top: 3px; color: var(--quiet); font-size: 8px; }
.attachment-empty { padding: 16px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.attach-picker { padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; }
.attach-picker summary { cursor: pointer; color: var(--navy); font-weight: 800; }
.check-list { max-height: 260px; overflow: auto; margin-top: 10px; display: grid; gap: 4px; }
.check-list label { padding: 8px; border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 9px; }
.check-list label:hover { background: #eaf1f7; }
.check-list span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-list small { color: var(--quiet); }
.file-manage-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; }
.asset-preview { min-height: 480px; max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #eef3f7; display: grid; place-items: center; }
.asset-image-preview { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }
.asset-preview iframe { width: 100%; height: 68vh; min-height: 480px; border: 0; background: #fff; }
.file-big-type { width: 190px; height: 230px; border: 1px solid #c9d6e2; border-radius: 12px; color: var(--navy); background: #fff; box-shadow: 0 12px 28px rgba(16,42,67,.1); display: grid; place-content: center; gap: 8px; text-align: center; }
.file-big-type strong { font-size: 28px; }
.file-big-type small { color: var(--muted); font-size: 9px; }
.replace-file { padding: 12px; border: 1px dashed #b9cad9; border-radius: 8px; color: var(--navy) !important; background: #f7fafc; }
.replace-file small { color: var(--muted); font-weight: 400; }
.modal-actions { margin-top: 5px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.credential-fields { display: grid; gap: 11px; }
.credential-fields label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.credential-fields input { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #f7f9fb; }

.auth-page { min-height: 100dvh; padding: 22px; background: radial-gradient(circle at 12% 10%, #e1ebf4 0, transparent 36%), var(--page); display: grid; place-items: center; }
.auth-card { width: min(430px, 100%); padding: 38px; border: 1px solid var(--line); border-top: 5px solid var(--orange); border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }
.auth-card .brand-lockup { padding: 0 0 39px; }
.auth-card h1 { margin: 9px 0 10px; color: var(--ink); font-size: 29px; letter-spacing: -.03em; }
.auth-copy { color: var(--muted); font-size: 11px; line-height: 1.55; }
.auth-card form { display: grid; gap: 14px; margin-top: 24px; }
.auth-note { margin: 17px 0 0; color: var(--quiet); font-size: 9px; line-height: 1.5; }
.form-error { padding: 10px 11px; border: 1px solid #f2c9c5; border-radius: 8px; color: #8f2820; background: #fff1f0; font-size: 10px; }

@media (max-width: 1120px) {
  .content-wrap { padding-left: 28px; padding-right: 28px; }
  .topbar { padding: 0 28px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-columns { grid-template-columns: 1fr; }
  .attachment-panel { border-top: 1px solid var(--line); border-left: 0; }
  .settings-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sidebar { position: fixed; z-index: 15; left: -285px; box-shadow: 16px 0 50px rgba(11,41,71,.18); transition: left .2s ease; }
  .sidebar.open { left: 0; }
  .mobile-menu { display: inline-flex; align-items: center; }
  .topbar { height: 62px; padding: 0 17px; }
  .topbar-actions .secure-label { display: none; }
  .content-wrap { padding: 18px 17px 55px; }
  .search-row { flex-wrap: wrap; }
  .search-box { order: 2; max-width: none; flex-basis: 100%; }
  .search-row > .button { margin-left: auto; }
  .home-brief { min-height: 0; padding: 32px 25px; grid-template-columns: 1fr; gap: 28px; }
  .home-summary { grid-template-columns: repeat(3, 1fr); }
  .home-summary div { padding: 13px; border-right: 1px solid rgba(255,255,255,.11); border-bottom: 0; display: block; }
  .home-summary div:last-child { border-right: 0; }
  .home-summary span { display: block; margin-top: 3px; }
  .page-intro { align-items: flex-start; flex-direction: column; min-height: 0; }
  .library-toolbar { align-items: flex-start; }
  .library-filters { overflow-x: auto; padding-bottom: 5px; }
  .filter-chip { flex: 0 0 auto; }
  .record-row { align-items: flex-start; flex-direction: column; }
  .row-actions { width: 100%; justify-content: flex-end; }
  .supported-formats em { width: 100%; margin-left: 0; }
  .file-manage-grid { grid-template-columns: 1fr; }
  .asset-preview { min-height: 320px; max-height: 52vh; }
}
@media (max-width: 560px) {
  .breadcrumb > span, .breadcrumb > b { display: none; }
  .account-chip { display: none; }
  .home-brief h1 { font-size: 36px; }
  .home-actions { align-items: stretch; flex-direction: column; }
  .home-summary { grid-template-columns: 1fr; }
  .home-summary div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); display: flex; }
  .work-grid, .file-grid, .vault-grid { grid-template-columns: 1fr; }
  .record-main { grid-template-columns: 1fr; }
  .service-tag { width: max-content; }
  .row-actions { justify-content: space-between; }
  .settings-form, .form-two { grid-template-columns: 1fr; }
  .form-section-title, .settings-form label:nth-of-type(3), .settings-form button { grid-column: auto; }
  .bill-header-upload { align-items: flex-start; flex-direction: column; }
  .modal-backdrop { padding: 8px; }
  .editor-columns > .editor-form, .attachment-panel { padding: 20px 17px; }
  .editor-title { padding: 22px 18px 17px; }
  .editor-footer { align-items: stretch; flex-direction: column; }
  .editor-footer .danger-button { margin-left: 0; }
  .editor-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .editor-toolbar button { flex: 0 0 auto; }
  .file-modal, .detail-modal { padding: 20px 17px; }
  .modal-actions { align-items: stretch; flex-direction: column; }
  .modal-actions .danger-button { margin-left: 0; }
}

/* v4 application pages: calm B2B workspace, designed from the approved screens */
:root { --ink: #092b62; --ink-soft: #334c79; --muted: #667aa2; --quiet: #8393b2; --line: #dbe4f2; --line-strong: #cbd8eb; --page: #f7f9fd; --surface: #fff; --surface-soft: #fbfcff; --navy: #062d68; --navy-dark: #031f4d; --navy-light: #eaf2ff; --orange: #f37816; --orange-light: #fff1e6; --radius: 11px; --shadow-sm: 0 6px 20px rgba(26, 60, 112, .05); }
.sidebar { width: 288px; flex-basis: 288px; padding: 24px 18px 18px; }
.brand-lockup { padding-bottom: 31px; }
.brand-mark { width: 48px; height: 48px; border-radius: 13px; background: #062d68; box-shadow: none; font-size: 14px; }
.brand-lockup strong { color: #0a2c63; font-size: 22px; letter-spacing: -.04em; }
.brand-lockup small { color: #667aa2; font-size: 11px; }
.sidebar-label { color: #60759e; font-size: 10px; }
.nav-group-label { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.nav-item { min-height: 47px; padding: 10px 12px; border: 0; color: #31517e; font-size: 13px; font-weight: 650; }
.nav-item:hover { color: #0757d8; background: #f4f7fc; }
.nav-item.active { border: 0; color: #0756d8; background: #edf4ff; font-weight: 800; }
.nav-icon { width: 24px; height: 24px; color: #31517e; background: transparent; font-size: 17px; }
.nav-item.active .nav-icon { color: #0756d8; background: transparent; }
.nav-item b { color: #0756d8; background: #e8f1ff; }
.backup-card { grid-template-columns: 32px 1fr; margin-top: 20px; border-color: var(--line); background: #fbfdff; box-shadow: none; }
.backup-card .mini-button { grid-column: 1/-1; width: max-content; min-width: 91px; margin-top: 3px; color: var(--navy); background: #fff; border: 1px solid var(--line); font-size: 10px; }
.profile-row { padding: 18px 5px 0; }
.topbar { height: 80px; background: rgba(250,251,255,.95); }
.content-wrap { max-width: 1500px; padding: 30px 48px 70px; }
.search-row { margin-bottom: 35px; background: none; }
.search-box { height: 50px; max-width: 970px; border-color: #d2def0; box-shadow: none; }
.search-icon { border-right: 0; padding-right: 0; color: var(--navy); font-size: 24px; line-height: 1; }
.button { min-height: 46px; border-radius: 9px; font-size: 12px; }
.button-primary { background: var(--navy); box-shadow: 0 9px 20px rgba(6,45,104,.14); }
.button-quiet { color: var(--navy); background: #fff; border-color: #d5dfef; }
.button-primary:hover { background: #052457; }
.welcome, .page-head, .form-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin: 0 0 28px; }
.welcome { padding: 0 20px; }
.welcome .overline, .page-head h1 + p { color:#7183a5; }
.overline { margin: 0 0 7px; color:#6b82a8; font-size:10px; font-weight:800; letter-spacing:.14em; }
.welcome h1, .page-head h1, .form-head h1 { margin:0; color:#092b62; font-size:31px; line-height:1.2; letter-spacing:-.045em; }
.welcome p:not(.overline), .page-head p, .form-head p { max-width:760px; margin:5px 0 0; color:#6a7da2; font-size:14px; }
.work-areas { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0 20px 22px; }
.work-card { min-height:72px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; color:#173967; background:#fff; display:flex; align-items:center; gap:10px; text-align:left; box-shadow:none; }
.work-card:hover { border-color:#b9cce8; box-shadow:var(--shadow-sm); }
.work-card .entity-icon { width:34px; height:34px; flex:0 0 34px; font-size:13px; }
.work-card span { min-width:0; flex:1; }
.work-card strong,.work-card small { display:block; }.work-card strong{font-size:13px}.work-card small{color:#7183a5;font-size:11px}.work-card .work-open{color:#0756d8;font-size:11px;font-style:normal;font-weight:800;}
.work-wordpress .entity-icon,.icon-wordpress { color:#fff;background:#1776df; }.work-ehotel .entity-icon,.icon-ehotel { color:#fff;background:#6d43be; }.work-hosting .entity-icon,.icon-hosting { color:#fff;background:#ef7617; }.work-malaysia-sms .entity-icon,.icon-malaysia-sms { color:#fff;background:#b63d65; }
.summary-strip { margin:0 20px 22px; padding:16px 22px; border:1px solid var(--line); border-radius:12px; background:#fff; display:grid; grid-template-columns:repeat(3,1fr) 1.8fr; align-items:center; }
.summary-strip > div { min-height:44px; padding:0 22px; border-right:1px solid var(--line); display:grid; grid-template-columns:34px auto; grid-template-rows:21px 19px; column-gap:10px; align-items:center; }
.summary-strip > div .entity-icon,.summary-strip > div .status-check { grid-row:1 / 3; }.summary-strip strong{font-size:22px}.summary-strip span:not(.entity-icon):not(.status-check){color:#536d98;font-size:12px}.summary-strip .backup-strip{border:0;grid-template-columns:34px 1fr auto}.backup-strip small{color:#62779b;font-size:11px}.text-action{border:0;color:#0756d8;background:transparent;font-size:11px;font-weight:800;white-space:nowrap;}
.home-columns { margin:0 20px; display:grid; grid-template-columns:1.1fr 1.1fr .82fr; gap:16px; align-items:start; }
.surface-panel,.content-card,.form-card,.summary-aside,.search-aside { border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:none; }
.surface-panel { padding:17px; }.surface-panel header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px; }.surface-panel h2,.content-card h2,.form-card h2,.summary-aside h2,.search-aside h2 { margin:0; color:#092b62;font-size:15px;letter-spacing:-.02em; }.minor-head{margin-top:20px!important;padding-top:17px;border-top:1px solid var(--line);}
.simple-row,.quick-link { min-height:57px; padding:9px 0; border-bottom:1px solid #edf1f7; display:flex;align-items:center;gap:11px; }.simple-row:last-child{border:0}.simple-row>div{min-width:0;flex:1}.row-link,.row-title { padding:0;border:0;color:#0a2c63;background:transparent;font-weight:800;text-align:left;cursor:pointer; }.row-link{font-size:12px}.simple-row small,.quick-link small,.attention-item small{display:block;color:#7485a4;font-size:10px}.copy-button{min-height:32px;border-color:#d5dfef;background:#fff;color:#092b62}.attention-item{width:100%;padding:10px;border:1px solid #ffd8dd;border-radius:8px;color:#0a2c63;background:#fff8f8;display:flex;gap:10px;text-align:left}.attention-item+ .attention-item{margin-top:8px}.attention-item>span{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;color:#d5303c;background:#ffe4e7;font-weight:900}.attention-item div{min-width:0}.attention-item strong{display:block;font-size:12px}.good-state,.backup-hero{display:flex;gap:10px;align-items:center;padding:11px 0}.status-check{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#07913c;background:#e6f8eb;font-weight:900}.good-state strong,.backup-hero strong{display:block;font-size:12px}.good-state small,.backup-hero small{display:block;color:#7284a3;font-size:10px}.quick-panel>.button{margin:8px 0 13px}.quick-panel hr,.backup-layout hr{border:0;border-top:1px solid var(--line);margin:15px 0}.quick-link{width:100%;border:0;border-bottom:1px solid #edf1f7;background:transparent;text-align:left}.quick-link .entity-icon{width:28px;height:28px;flex:0 0 28px}.quick-link span{flex:1;font-size:11px;font-weight:800}.quick-link i{color:#0756d8;font-size:10px;font-style:normal}
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 21px; }.filter-tabs{display:flex;flex-wrap:wrap;gap:10px}.filter-tab{min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:9px;color:#29466f;background:#fff;font-size:11px;font-weight:800}.filter-tab.active{color:#fff;background:#062d68;border-color:#062d68}.filter-tab b{margin-left:5px;padding:2px 5px;border-radius:999px;background:#edf3ff;color:#0b56d2;font-size:9px}.filter-tab.active b{background:rgba(255,255,255,.15);color:#fff}.sort-field{display:flex;align-items:center;gap:8px;color:#536d98;font-size:10px;font-weight:700}.sort-field select{min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:#0a2c63;background:#fff;font-weight:700}
.data-list{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}.data-row{min-height:110px;padding:18px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px;background:#fff}.data-row:last-child{border-bottom:0}.data-row:hover{background:#fcfdff}.row-leading .entity-icon{width:40px;height:40px;font-size:15px}.entity-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:#0b5dcc;background:#eaf2ff;font-size:12px;font-weight:900}.row-content{min-width:0;flex:1}.row-title{font-size:14px}.row-content p{margin:5px 0 0;color:#6c7fa2;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-content small{display:block;margin-top:6px;color:#8290aa;font-size:10px}.row-actions{display:flex;align-items:center;gap:8px}.compact{min-height:36px;padding:0 11px;font-size:10px}.badge{display:inline-flex;align-items:center;margin-left:5px;padding:3px 7px;border-radius:6px;color:#1759b9;background:#e9f2ff;font-size:9px;font-weight:800}.badge-warning{color:#b64b00;background:#fff1de}.badge-neutral,.badge-document{color:#7240af;background:#f0eaff}.badge-file{color:#187a43;background:#e8f8ee}.badge-password{color:#be6510;background:#fff0e1}
.detail-head{display:flex;align-items:flex-start;gap:17px;margin:0 0 27px}.detail-head>.entity-icon{width:62px;height:62px;flex:0 0 62px;border-radius:12px;font-size:27px}.detail-title{min-width:0;flex:1}.detail-title h1{margin:0;color:#092b62;font-size:25px;letter-spacing:-.04em}.detail-title p{margin:7px 0;color:#657aa2;font-size:13px}.detail-title small{color:#8190ab;font-size:11px}.detail-actions,.button-row{display:flex;gap:10px;align-items:center}.detail-tabs{display:flex;gap:29px;margin:0 0 21px;border-bottom:1px solid var(--line)}.detail-tabs button{min-height:42px;padding:0;border:0;border-bottom:2px solid transparent;color:#62779d;background:transparent;font-size:12px;font-weight:800}.detail-tabs button.active{color:#0756d8;border-color:#0756d8}.detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.88fr) minmax(270px,.98fr);gap:18px;align-items:start}.content-card{padding:19px}.rich-display{margin-top:16px;color:#345071;font-size:14px;line-height:1.8}.rich-display h2,.rich-display h3{margin:23px 0 8px;color:#0a2c63}.rich-display ul,.rich-display ol{padding-left:22px}.side-stack{display:grid;gap:16px}.content-card dl,.settings-side dl{margin:16px 0 0;display:grid;grid-template-columns:40% 60%;gap:12px 4px;color:#304d78;font-size:11px}.content-card dt,.settings-side dt{font-weight:800}.content-card dd,.settings-side dd{margin:0;color:#667aa2}.full-action,.danger-action{width:100%;min-height:45px;margin-top:9px;padding:0 12px;border:1px solid #d5dfef;border-radius:8px;color:#0a2c63;background:#fff;font-size:11px;font-weight:800;text-align:center}.danger-action{color:#d22d38;border-color:#ffd1d5;background:#fff}.inline-danger{width:auto;min-height:36px}.stat-boxes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.stat-boxes div{padding:13px;border:1px solid #e4ebf5;border-radius:8px}.stat-boxes strong,.stat-boxes small{display:block}.stat-boxes strong{font-size:17px}.stat-boxes small{color:#6d80a3;font-size:10px}.attachment-list{margin-top:10px}.attachment-line{width:100%;padding:8px 0;border:0;border-bottom:1px solid #edf1f7;color:#0a2c63;background:#fff;display:flex;gap:9px;text-align:left}.attachment-line span{min-width:0;flex:1;font-size:11px;font-weight:800}.attachment-line small{display:block;color:#7082a3;font-size:10px}.attachment-thumb,.tiny-preview{width:31px;height:31px;object-fit:cover;border:1px solid var(--line);border-radius:6px}.file-type-visual{width:31px;height:31px;display:grid;place-items:center;border-radius:6px;color:#a14419;background:#fff1ea;font-size:8px}
.form-head{margin-bottom:25px}.page-form{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:18px;align-items:start}.page-form.single-form{grid-template-columns:minmax(0,1fr) 360px}.form-main,.settings-content{display:grid;gap:18px}.form-side,.settings-side{display:grid;gap:18px}.form-card{padding:21px}.form-card h2{margin-bottom:17px}.form-card label{display:block;margin-bottom:13px;color:#29466f;font-size:11px;font-weight:800}.form-card input,.form-card select,.form-card textarea{width:100%;min-height:43px;margin-top:6px;padding:10px 12px;border:1px solid #d6e0ee;border-radius:8px;color:#0a2c63;background:#fff;outline:0;font-size:12px;font-weight:500}.form-card textarea{min-height:auto;resize:vertical}.form-two,.form-four{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-four{grid-template-columns:repeat(4,1fr)}.rich-toolbar{padding:8px;border:1px solid #d6e0ee;border-bottom:0;border-radius:8px 8px 0 0;display:flex;gap:5px}.rich-toolbar button{width:30px;height:28px;border:0;border-radius:5px;color:#0a2c63;background:#f3f6fb;font-weight:800}.rich-editor{min-height:240px;padding:13px;border:1px solid #d6e0ee;border-radius:0 0 8px 8px;color:#213f6b;background:#fff;font-size:13px;line-height:1.65;outline:0}.field-help,.muted{color:#7385a4!important;font-size:11px!important;font-weight:500!important}.attachment-picker{max-height:250px;overflow:auto;border:1px solid #e2e9f4;border-radius:8px}.attachment-picker label{min-height:43px;margin:0!important;padding:10px;border-bottom:1px solid #edf1f7;display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px}.attachment-picker label:last-child{border:0}.attachment-picker input{width:auto;min-height:auto;margin:0}.attachment-picker small{color:#7b8ba6}.upload-drop{min-height:92px!important;padding:28px 14px!important;border:1px dashed #b8c9e0;border-radius:8px;color:#31517e!important;background:#fbfdff;text-align:center}.upload-drop input{width:auto!important;min-height:auto!important;margin:0 0 0 7px!important;border:0!important;padding:0!important}.danger-card{border-color:#ffd8da}
.files-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.file-card{min-height:252px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:11px}.file-card:hover{box-shadow:var(--shadow-sm)}.file-card-head{display:flex;justify-content:space-between}.file-preview{height:105px;display:grid;place-items:center;overflow:hidden;border:1px solid #edf1f7;border-radius:8px;background:#fbfcff}.file-preview img{width:100%;height:100%;object-fit:contain}.file-card strong{font-size:12px}.file-card small{color:#7183a5;font-size:10px}.file-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.file-card-foot .badge{margin:0}.large-preview{min-height:350px;margin-top:16px;padding:18px;border:1px solid #e5ecf5;border-radius:9px;background:#fbfcff;display:grid;place-items:center}.large-preview img{max-width:100%;max-height:560px;object-fit:contain}.preview-card{min-height:520px}
.file-grid-v4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.file-card-v4{min-height:294px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column}.file-card-v4:hover{box-shadow:var(--shadow-sm)}.file-preview-v4{height:132px;padding:12px;border:0;border-bottom:1px solid #edf1f7;background:#fbfcff;display:grid;place-items:center}.file-preview-v4 img{width:100%;height:100%;object-fit:contain}.file-preview-v4 .file-type-visual{width:54px;height:54px;font-size:12px}.file-card-body{min-width:0;padding:12px;display:flex;flex:1;flex-direction:column}.file-card-top,.card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.file-card-top .badge{margin:0}.file-card-body h3{margin:10px 0 4px;color:#092b62;font-size:12px;line-height:1.4}.file-card-body p{min-height:31px;margin:0;color:#7183a5;font-size:10px;line-height:1.5}.file-card-body>small{display:block;margin-top:7px;color:#8290aa;font-size:10px}.card-actions{margin-top:auto;padding-top:11px}.metadata-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}.metadata-pills .badge{margin:0}
.document-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}.document-category{min-height:150px;padding:19px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left}.document-category:hover{box-shadow:var(--shadow-sm)}.document-category .entity-icon{margin-bottom:17px}.document-category strong,.document-category small{display:block}.document-category strong{font-size:13px}.document-category small{margin-top:6px;color:#7183a5;font-size:10px}.document-table{padding:0}.document-table header{padding:17px 19px}.document-table table{width:100%;border-collapse:collapse;font-size:12px}.document-table th,.document-table td{padding:13px 19px;border-top:1px solid var(--line);color:#395579;text-align:left}.document-table th{color:#7485a3;font-size:10px}.document-table td strong{color:#0a2c63}
.document-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0 0 20px}.document-category-grid .document-category{min-height:145px}
.vault-locked,.backup-protection{padding:26px;border:1px solid #d8e6dc;border-radius:11px;background:#fbfffc;display:flex;gap:14px;align-items:center}.vault-locked>span{width:55px;height:55px;display:grid;place-items:center;border-radius:12px;color:#0e8a42;background:#e8f8ec;font-size:24px}.vault-locked h2,.backup-protection h2{margin:0;color:#092b62;font-size:16px}.vault-locked p,.backup-protection p{margin:5px 0 13px;color:#697da3;font-size:12px}.password-table{border:1px solid var(--line);border-radius:10px;overflow:auto;background:#fff}.password-head,.password-row{min-width:900px;display:grid;grid-template-columns:2.25fr 1.55fr 1.8fr 1.25fr 1.15fr .5fr;gap:12px;align-items:center}.password-head{min-height:50px;padding:0 18px;color:#7485a3;font-size:10px;font-weight:800}.password-row{min-height:72px;padding:10px 18px;border-top:1px solid var(--line);color:#213f6b;font-size:11px}.account-cell{display:flex;align-items:center;gap:9px;min-width:0}.account-cell .entity-icon{width:33px;height:33px;flex:0 0 33px}.account-cell span{min-width:0}.account-cell small{display:block;overflow:hidden;color:#7485a3;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.masked-cell{display:flex;align-items:center;gap:6px;letter-spacing:2px}.masked-cell .icon-button{width:27px;height:27px;font-size:13px;letter-spacing:0}.table-empty{padding:30px;color:#7485a3;text-align:center}
.search-summary{display:flex;align-items:center;gap:8px;margin:-5px 0 20px}.search-summary>strong{font-size:24px}.search-summary>span{color:#7183a5;font-size:11px}.search-summary .filter-tabs{margin-left:17px}.search-layout,.activity-layout,.backup-layout,.archive-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:17px}.search-aside,.summary-aside{padding:18px;align-self:start}.search-aside p,.summary-aside p{color:#7183a5;font-size:11px;line-height:1.65}.warning-note{padding:9px;border-radius:7px;color:#b64b00!important;background:#fff4e7}.activity-layout{grid-template-columns:minmax(0,1fr) 300px}.activity-list{border:1px solid var(--line);border-radius:11px;background:#fff}.activity-row{min-height:81px;padding:13px 17px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:74px 42px 1fr;gap:11px;align-items:center}.activity-row:last-child{border:0}.activity-row time{color:#60779f;font-size:10px;font-weight:800}.activity-row strong{display:block;color:#0a2c63;font-size:12px}.activity-row p{margin:2px 0;color:#58709a;font-size:11px}.activity-row small{color:#7a8ba7;font-size:10px}.summary-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.summary-mini-grid div{min-height:70px;padding:11px;border:1px solid #e3eaf4;border-radius:8px}.summary-mini-grid strong,.summary-mini-grid span{display:block}.summary-mini-grid strong{font-size:19px}.summary-mini-grid span{color:#7284a3;font-size:10px}
.backup-layout{grid-template-columns:minmax(0,1fr) 320px}.backup-table article{min-height:72px;padding:13px 17px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}.backup-table article>div:first-child{min-width:0;flex:1}.backup-table strong,.backup-table small{display:block}.backup-table strong{color:#0a2c63;font-size:12px}.backup-table small{color:#7082a3;font-size:10px}.status-good{padding:4px 7px;border-radius:6px;color:#087c38;background:#e6f7eb;font-size:9px;font-weight:800}.archive-layout{grid-template-columns:minmax(0,1fr) 260px}.summary-lines{display:grid;gap:10px;margin:18px 0}.summary-lines span{padding:10px;border:1px solid #e6edf6;border-radius:7px;color:#5d739a;font-size:11px}.summary-lines strong{margin-right:7px;color:#092b62;font-size:18px}
.settings-layout-v4{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:18px}.settings-nav{height:max-content;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}.settings-nav button{width:100%;min-height:55px;padding:0 17px;border:0;border-bottom:1px solid #edf1f7;color:#29466f;background:#fff;text-align:left;font-size:12px;font-weight:800}.settings-nav button.active{color:#0756d8;background:#edf4ff}.settings-nav button:last-child{border:0}.empty-state{padding:46px 20px;border:1px dashed #c8d7ea;border-radius:11px;background:#fff;text-align:center}.empty-state h2{margin:10px 0 5px;color:#092b62;font-size:17px}.empty-state p{margin:0 0 15px;color:#7082a3;font-size:12px}.empty-symbol{width:42px;height:42px;margin:auto;display:grid;place-items:center;border-radius:50%;color:#0756d8;background:#edf4ff;font-size:25px}
.modal-backdrop{background:rgba(4,27,65,.45)}.confirm-dialog{width:min(460px,100%);padding:25px;border-radius:13px;background:#fff;box-shadow:0 25px 80px rgba(4,27,65,.3)}.confirm-dialog h2{margin:0;color:#092b62;font-size:20px}.dialog-body{margin:13px 0;color:#58709a;font-size:13px}.dialog-field{display:block;margin:13px 0;color:#29466f;font-size:11px;font-weight:800}.dialog-field input{width:100%;min-height:42px;margin-top:6px;padding:9px 11px;border:1px solid #d6e0ee;border-radius:8px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.close-button{position:absolute;right:14px;top:12px;width:30px;height:30px;border:0;border-radius:8px;color:#5d739a;background:#f2f5fa;font-size:18px}
@media(max-width:1250px){.work-areas{grid-template-columns:repeat(3,1fr)}.home-columns{grid-template-columns:1fr 1fr}.quick-panel{grid-column:1/-1}.detail-grid{grid-template-columns:minmax(0,1.4fr) 1fr}.detail-grid>.side-stack:last-child{grid-column:1/-1;grid-template-columns:1fr 1fr}.document-cards,.document-category-grid{grid-template-columns:repeat(3,1fr)}.settings-layout-v4{grid-template-columns:220px minmax(0,1fr)}.settings-side{grid-column:2}}
@media(max-width:980px){.sidebar{position:fixed;z-index:30;left:-300px;transition:left .2s}.sidebar.open{left:0}.mobile-menu{display:inline-flex}.content-wrap{padding:24px}.topbar{padding:0 24px}.work-areas,.home-columns{margin-left:0;margin-right:0}.summary-strip{margin-left:0;margin-right:0;grid-template-columns:1fr 1fr}.summary-strip>div{border-bottom:1px solid var(--line)}.summary-strip .backup-strip{grid-column:1/-1}.files-grid,.file-grid-v4{grid-template-columns:repeat(3,1fr)}.detail-grid,.page-form,.page-form.single-form,.activity-layout,.backup-layout,.archive-layout{grid-template-columns:1fr}.detail-grid>.side-stack:last-child{grid-column:auto}.form-side,.settings-side{grid-column:auto}.settings-layout-v4{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-nav button{min-width:155px}.document-cards,.document-category-grid{grid-template-columns:repeat(2,1fr)}.search-layout{grid-template-columns:1fr}.search-aside{order:2}}
@media(max-width:620px){.content-wrap{padding:19px 14px 45px}.topbar{height:66px;padding:0 14px}.topbar-actions{display:none}.search-row{margin-bottom:25px}.search-row .button{min-width:47px;padding:0 8px;font-size:0}.search-row .button:after{content:'+';font-size:21px}.welcome,.page-head,.form-head{padding:0;display:block}.welcome .button,.page-head .button,.form-head>div:last-child{margin-top:14px}.work-areas{grid-template-columns:1fr}.summary-strip{padding:8px;grid-template-columns:1fr}.summary-strip>div{padding:9px;border-right:0}.home-columns{grid-template-columns:1fr}.toolbar{align-items:flex-start;flex-direction:column}.filter-tabs{flex-wrap:nowrap;max-width:100%;overflow:auto;padding-bottom:4px}.filter-tab{flex:0 0 auto}.data-row{padding:14px;align-items:flex-start}.row-actions{flex-wrap:wrap;justify-content:flex-end}.row-content p{white-space:normal}.files-grid,.file-grid-v4,.document-cards,.document-category-grid{grid-template-columns:1fr}.form-two,.form-four{grid-template-columns:1fr}.detail-head{display:block}.detail-head>.entity-icon{margin-bottom:12px}.detail-actions{flex-wrap:wrap;margin-top:14px}.detail-tabs{overflow:auto;white-space:nowrap}.detail-grid>.side-stack:last-child{grid-template-columns:1fr}.backup-table article{align-items:flex-start;flex-direction:column}.password-row,.password-head{min-width:780px}.document-table{overflow:auto}.search-summary{align-items:flex-start;flex-wrap:wrap}.search-summary .filter-tabs{order:3;width:100%;margin-left:0}.activity-row{grid-template-columns:56px 38px 1fr}.settings-side{display:grid}.dialog-actions{flex-wrap:wrap}.dialog-actions .button,.dialog-actions .danger-action{width:auto;flex:1}}
.checkbox-line{display:flex!important;align-items:center;gap:8px;margin:4px 0 0!important;color:#29466f!important}.checkbox-line input[type="checkbox"]{width:16px!important;min-height:16px!important;margin:0!important}.checkbox-line input[type="hidden"]{display:none}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Sample-inspired daily dashboard */
.dashboard-welcome { min-height: 92px; padding: 5px 0 20px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.dashboard-welcome h1 { margin: 6px 0 4px; color: var(--ink); font-size: 26px; letter-spacing: -.035em; }
.dashboard-welcome p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 11px; }
.workspace-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.workspace-card { min-height: 72px; padding: 13px 12px; border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 10px; color: var(--ink); background: var(--surface); display: flex; align-items: center; gap: 9px; text-align: left; box-shadow: 0 1px 2px rgba(16,42,67,.03); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.workspace-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.workspace-wordpress { border-top-color: #2878bd; }
.workspace-ehotel { border-top-color: #7654a8; }
.workspace-hosting { border-top-color: var(--orange); }
.workspace-sms { border-top-color: #b04c66; }
.workspace-all { border-style: dashed; border-top-color: var(--navy); background: #fbfcfe; }
.workspace-card .category-icon { width: 30px; height: 30px; flex: 0 0 30px; }
.workspace-card span:not(.category-icon) { min-width: 0; }
.workspace-card strong, .workspace-card small { display: block; }
.workspace-card strong { font-size: 11px; white-space: nowrap; }
.workspace-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.workspace-card i { margin-left: auto; color: var(--navy); font-size: 9px; font-style: normal; font-weight: 800; }
.workspace-hosting i { color: var(--orange-dark); }
.workspace-ehotel i { color: #7654a8; }
.workspace-sms i { color: #b04c66; }
.category-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 32px; border-radius: 8px; color: #fff; background: var(--navy); font-size: 15px; font-weight: 850; line-height: 1; }
.category-icon.cat-wordpress { background: #2878bd; }
.category-icon.cat-ehotel { background: #7654a8; }
.category-icon.cat-hosting { background: var(--orange); }
.category-icon.cat-malaysia-sms { background: #b04c66; }
.category-icon.cat-internal, .category-icon.cat-uploaded { color: var(--navy); background: var(--navy-light); }
.dashboard-stats { min-height: 72px; margin-top: 15px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; align-items: center; box-shadow: 0 1px 2px rgba(16,42,67,.03); }
.stat-cell, .backup-status { min-height: 43px; padding: 0 17px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.stat-cell:first-child { padding-left: 3px; }
.stat-cell .category-icon { width: 29px; height: 29px; font-size: 13px; }
.stat-cell span:not(.category-icon), .backup-status span:not(.backup-check) { display: block; }
.stat-cell strong, .stat-cell small, .backup-status strong, .backup-status small { display: block; }
.stat-cell strong { font-size: 17px; line-height: 1; }
.stat-cell small, .backup-status small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.stat-attention .category-icon { color: var(--danger); background: #fff0ef; }
.backup-status { border-right: 0; }
.backup-check { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #bce3c8; border-radius: 50%; color: #16703c; background: #eefaf1; font-size: 13px; font-weight: 900; }
.backup-status .text-button { margin-left: auto; }
.dashboard-columns { margin-top: 15px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }
.dashboard-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(16,42,67,.03); }
.panel-heading { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading h2 { margin: 0; color: var(--ink); font-size: 13px; letter-spacing: -.01em; }
.mini-list, .attention-list, .mini-file-list { margin-top: 9px; }
.mini-row, .attention-row, .mini-file-row { min-height: 52px; padding: 8px 0; border-top: 1px solid #edf1f5; display: flex; align-items: center; gap: 9px; }
.mini-row:first-child, .attention-row:first-child, .mini-file-row:first-child { border-top: 0; }
.mini-row > div, .attention-row > div, .mini-file-row > div { min-width: 0; flex: 1; }
.link-button { max-width: 100%; padding: 0; overflow: hidden; border: 0; color: var(--ink); background: transparent; font-size: 10px; font-weight: 800; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.link-button:hover { color: var(--orange-dark); }
.mini-row small, .attention-row small, .mini-file-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.mini-row .copy-button { margin-left: auto; }
.attention-row { padding: 9px 10px; margin-bottom: 5px; border: 1px solid #f5d8d5; border-top: 1px solid #f5d8d5; border-radius: 7px; background: #fff8f7; }
.attention-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--danger); background: #ffe4e1; font-size: 13px; font-weight: 900; }
.clear-state { min-height: 56px; padding: 10px; border-radius: 7px; background: #f1faf3; display: flex; align-items: center; gap: 9px; }
.clear-state > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #16703c; background: #d9f1df; font-weight: 900; }
.clear-state strong, .clear-state small { display: block; }
.clear-state strong { font-size: 10px; }
.clear-state small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.recent-file-heading { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.mini-file-thumb { width: 31px; height: 31px; flex: 0 0 31px; border: 1px solid var(--line); border-radius: 5px; object-fit: cover; }
.mini-file-type { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: var(--navy); background: var(--navy-light); font-size: 7px; font-weight: 850; }
.muted-copy { margin: 12px 0 0; color: var(--muted); font-size: 9px; }
.record-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.record-title-line h3 { margin: 0; }
.record-title-line .service-tag { min-width: auto; margin: 0; padding: 3px 6px; font-size: 7px; }
.review-badge { padding: 3px 6px; border-radius: 5px; color: var(--danger); background: #fff0ef; font-size: 7px; font-weight: 850; }
.compact-button { min-height: 31px; padding: 0 11px; font-size: 10px; }
.library-controls { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.library-local-search { height: 39px; max-width: 420px; flex: 1; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); display: flex; align-items: center; gap: 8px; }
.library-local-search span { padding-right: 7px; border-right: 1px solid var(--line); color: var(--navy); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.library-local-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.sort-control { min-height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; }
.sort-control select { border: 0; outline: 0; color: var(--navy); background: transparent; font-size: 9px; font-weight: 800; }
.filter-chip b { margin-left: 3px; color: inherit; opacity: .7; font-size: 8px; }
.file-meta { display: block; min-height: 15px; margin-top: 6px; color: var(--muted); font-size: 8px; }
.vault-status { min-height: 62px; margin-top: 19px; padding: 12px 15px; border: 1px solid #cce7d2; border-radius: 9px; background: #f1faf3; display: flex; align-items: center; gap: 10px; }
.vault-status-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #16703c; background: #d9f1df; font-weight: 900; }
.vault-status strong, .vault-status small { display: block; }
.vault-status strong { color: #16663a; font-size: 10px; }
.vault-status small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.vault-status b { margin-left: auto; color: #16663a; font-size: 9px; }
.vault-entry { min-height: 60px; border-radius: 8px; }
.vault-system { min-width: 150px; flex: 1; }
.vault-system strong, .vault-system small { display: block; }
.vault-system strong { font-size: 10px; }
.vault-system small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.vault-username, .masked-password { width: 145px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.masked-password { color: var(--ink); letter-spacing: 2px; }

@media (max-width: 1120px) {
  .workspace-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-all { grid-column: span 3; }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); gap: 8px 0; }
  .dashboard-stats .stat-cell:nth-child(2) { border-right: 0; }
  .dashboard-stats .backup-status { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); }
  .vault-username, .masked-password { width: 110px; }
}
@media (max-width: 820px) {
  .dashboard-columns { grid-template-columns: 1fr; }
  .workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-all { grid-column: span 2; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .dashboard-welcome .button { align-self: flex-start; }
  .library-controls { align-items: stretch; flex-direction: column; }
  .library-local-search { max-width: none; }
  .sort-control { width: max-content; }
  .vault-entry { flex-wrap: wrap; }
  .vault-system { min-width: calc(100% - 54px); }
  .vault-username, .masked-password { width: auto; flex: 1; }
}
@media (max-width: 560px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-all { grid-column: auto; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .stat-cell, .stat-cell:first-child, .dashboard-stats .stat-cell:nth-child(2) { min-height: 45px; padding: 4px 3px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dashboard-stats .backup-status { grid-column: auto; padding: 10px 3px 4px; border-top: 0; }
  .record-row .record-main { grid-template-columns: 34px minmax(0, 1fr); }
  .record-row .row-actions { width: 100%; }
}

/* v6 usability pass: clearer type, contained file previews, and consistent actions */
html, body, button, input, select, textarea {
  font-family: "Nunito Sans", "Open Sans", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { font-size: 15px; }
.content-wrap { padding-top: 28px; }
.search-row { display: block; }
.search-box { max-width: none; min-height: 54px; }
.search-box input { font-size: 15px; }
.search-icon { font-size: 20px; }
.button { min-height: 44px; padding: 0 16px; font-size: 13px; font-weight: 800; }
.button-primary { color: #fff; background: #062d68; }
.button-accent { color: #fff; background: #e96f14; border-color: #e96f14; box-shadow: 0 8px 18px rgba(218, 93, 0, .18); }
.button-accent:hover { color: #fff; background: #c95706; border-color: #c95706; }
.copy-button { font-size: 12px; font-weight: 800; }
.welcome h1, .page-head h1, .form-head h1 { font-size: 33px; }
.welcome p:not(.overline), .page-head p, .form-head p { font-size: 15px; line-height: 1.55; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-card { padding: 24px; }
.form-card h2, .content-card h2 { font-size: 17px; }
.form-card label { color: #183a69; font-size: 13px; }
.form-card input, .form-card select, .form-card textarea { min-height: 46px; font-size: 14px; line-height: 1.5; }
.field-help, .muted { font-size: 12px !important; line-height: 1.55; }
.entity-icon { line-height: 1; letter-spacing: 0; }
.icon-kind-service { color: #0b5dcc; background: #eaf2ff; }
.icon-kind-file { color: #0f7c45; background: #e9f8ee; }
.icon-kind-review { color: #bf371f; background: #fff0ed; }
.icon-kind-backup { color: #087b3d; background: #e8f8ed; }
.icon-company-information { color: #1765d1; background: #e8f1ff; }
.icon-company-policies { color: #187b4a; background: #e8f7ed; }
.icon-contact-information { color: #7245c3; background: #f0ebff; }
.icon-business-registration { color: #b66a00; background: #fff3db; }
.icon-financial-documents { color: #bb3d60; background: #fff0f4; }
.summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 1.25fr); }
.summary-strip > div { min-width: 0; padding: 0 16px; }
.summary-strip .backup-strip { grid-template-columns: 34px minmax(0, 1fr) auto; }
.summary-strip .backup-strip strong, .summary-strip .backup-strip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-strip .backup-strip strong { font-size: 15px; }
.summary-strip .backup-strip small { font-size: 11px; }
.editor-toolbar { min-height: 48px; padding: 8px; gap: 7px; align-items: center; overflow-x: auto; background: #f7f9fd; }
.editor-toolbar button, .editor-toolbar select { height: 32px; flex: 0 0 auto; padding: 0 10px; border: 1px solid #d4dfef; border-radius: 7px; color: #143661; background: #fff; font-family: inherit; font-size: 12px; font-weight: 800; }
.editor-toolbar button { width: auto; min-width: 32px; }
.editor-toolbar button:hover { color: #fff; background: #062d68; border-color: #062d68; }
.editor-toolbar button[data-color="foreColor:#d56600"] { color: #d56600; }
.editor-toolbar button[data-color="hiliteColor:#fff0c2"] { color: #715400; background: #fff7d9; }
.editor-divider { width: 1px; height: 24px; flex: 0 0 1px; background: #dce5f1; }
.rich-editor { min-height: 270px; padding: 16px; color: #263f65; font-size: 15px; line-height: 1.7; }
.modern-drop { min-height: 150px !important; margin: 16px 0 0 !important; padding: 22px !important; border: 1.5px dashed #a9bddb !important; border-radius: 12px !important; color: #173b73 !important; background: #f9fbff !important; display: grid !important; place-items: center; gap: 5px; cursor: pointer; text-align: center; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.modern-drop:hover, .modern-drop.is-dragging { border-color: #e96f14 !important; background: #fff8f1 !important; }
.modern-drop.is-dragging { transform: scale(1.01); }
.modern-drop .drop-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #e96f14; background: #fff0e2; font-size: 23px; font-weight: 900; }
.modern-drop .drop-title { color: #092b62; font-size: 14px; font-weight: 900; }
.modern-drop .drop-detail { color: #61789f; font-size: 13px; font-weight: 650; }
.modern-drop small { color: #8393ad; font-size: 11px; font-weight: 700; }
.file-grid-v4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.file-card-v4 { min-width: 0; min-height: 365px; overflow: hidden; }
.file-preview-v4 { height: 188px; min-height: 188px; padding: 14px; overflow: hidden; }
.file-preview-frame { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.file-preview-v4 img, .file-preview-v4 .file-card-image { width: 100%; height: 100%; display: block; object-fit: contain; }
.file-preview-v4 .file-type-visual { width: 64px; height: 64px; font-size: 12px; }
.file-card-body { min-height: 0; padding: 15px; overflow: hidden; }
.file-card-body h3 { min-height: 36px; margin: 10px 0 6px; overflow: hidden; color: #092b62; font-size: 14px; line-height: 1.3; }
.file-card-body p { min-height: 38px; max-height: 38px; overflow: hidden; color: #657a9f; font-size: 12px; line-height: 1.55; }
.file-card-body > small { font-size: 11px; }
.card-actions { gap: 10px; }
.card-actions .button, .card-actions .copy-button { min-height: 36px; font-size: 11px; }
.file-page-action { align-self: center; color: #60799f; font-size: 13px; font-weight: 800; }
.file-upload-inline { margin: -3px 0 22px; }
.file-upload-inline .modern-drop { min-height: 108px !important; margin: 0 !important; grid-template-columns: 38px auto; grid-template-rows: auto auto; justify-content: center; column-gap: 12px; text-align: left; }
.file-upload-inline .drop-icon { grid-row: 1 / 3; }
.file-upload-inline .drop-title { align-self: end; }
.file-upload-inline .drop-detail { align-self: start; }
.file-upload-inline small { display: none; }
.document-category { min-height: 155px; }
.document-category .entity-icon { width: 42px; height: 42px; font-size: 15px; }
@media (max-width: 1180px) {
  .file-grid-v4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip .backup-strip { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
}
@media (max-width: 700px) {
  .content-wrap { padding: 20px 16px 48px; }
  .welcome, .page-head, .form-head { gap: 16px; }
  .welcome h1, .page-head h1, .form-head h1 { font-size: 28px; }
  .work-areas, .summary-strip, .home-columns { margin-left: 0; margin-right: 0; }
  .summary-strip { grid-template-columns: 1fr; padding: 8px 12px; }
  .summary-strip > div { min-height: 50px; padding: 10px 4px; border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-strip .backup-strip { grid-column: auto; grid-template-columns: 30px minmax(0, 1fr) auto; border-top: 0; border-bottom: 0; padding: 10px 4px; }
  .summary-strip .backup-strip strong { font-size: 14px; }
  .summary-strip .backup-strip small { font-size: 10px; }
  .form-actions { width: 100%; }
  .form-actions .button { flex: 1; }
  .file-grid-v4 { grid-template-columns: 1fr; }
  .file-card-v4 { min-height: 350px; }
  .file-preview-v4 { height: 205px; min-height: 205px; }
  .file-upload-inline .modern-drop { grid-template-columns: 1fr; grid-template-rows: auto; text-align: center; }
  .file-upload-inline .drop-icon { grid-row: auto; margin: auto; }
}

/* v7 product UI repair: consistent icon system, clearer dashboard metrics and editor */
.nav-icon { width: 19px; margin-right: 0; color: inherit; font-size: 18px; line-height: 1; }
.entity-icon .ti { font-size: 19px; line-height: 1; }
.work-card .entity-icon .ti { font-size: 18px; }
.data-row .entity-icon .ti { font-size: 21px; }
.work-wordpress .entity-icon, .data-row .icon-wordpress, .simple-row .icon-wordpress, .quick-link .icon-wordpress { color: #fff; background: #1776df; }
.work-ehotel .entity-icon, .data-row .icon-ehotel, .simple-row .icon-ehotel, .quick-link .icon-ehotel { color: #fff; background: #6d43be; }
.work-hosting .entity-icon, .data-row .icon-hosting, .simple-row .icon-hosting, .quick-link .icon-hosting { color: #fff; background: #ef7617; }
.work-malaysia-sms .entity-icon, .data-row .icon-malaysia-sms, .simple-row .icon-malaysia-sms, .quick-link .icon-malaysia-sms { color: #fff; background: #b63d65; }
.data-row .icon-internal { color: #fff; background: #5d6c82; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 20px 24px; }
.metric-card { min-height: 118px; padding: 20px; border: 1px solid #dce6f4; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgba(20, 50, 94, .05); display: flex; align-items: center; gap: 15px; }
.metric-card .entity-icon { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; }
.metric-card .entity-icon .ti { font-size: 27px; }
.metric-card strong, .metric-card span, .metric-card small { display: block; }
.metric-card strong { color: #082d67; font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.metric-card span { margin-top: 5px; color: #183b70; font-size: 13px; font-weight: 800; }
.metric-card small { margin-top: 3px; color: #7990b2; font-size: 11px; line-height: 1.35; }
.metric-services .entity-icon { color: #1267d6; background: #eaf2ff; }
.metric-files .entity-icon { color: #13844c; background: #e9f8ee; }
.metric-review .entity-icon { color: #cf4a1a; background: #fff0e9; }
.metric-documents .entity-icon { color: #7540bd; background: #f2ebff; }
.row-actions { gap: 8px; }
.row-actions .list-action, .row-actions .list-menu { min-height: 38px; height: 38px; border: 1px solid #cedbed; border-radius: 8px; color: #0a326d; background: #fff; font-family: inherit; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.row-actions .list-action { min-width: 104px; padding: 0 12px; }
.row-actions .list-menu { width: 38px; padding: 0; }
.row-actions .list-action:hover, .row-actions .list-menu:hover { border-color: #0d4ea4; color: #fff; background: #0d4ea4; }
.row-actions .list-action .ti, .row-actions .list-menu .ti { font-size: 15px; }
.editor-shell { border: 1px solid #cddbf0; border-radius: 10px; background: #fff; overflow: hidden; }
.editor-shell .ql-toolbar.ql-snow { padding: 10px 12px; border: 0; border-bottom: 1px solid #d9e4f3; background: #f7faff; font-family: inherit; }
.editor-shell .ql-container.ql-snow { min-height: 330px; border: 0; color: #203c69; font-family: inherit; font-size: 15px; line-height: 1.7; }
.editor-shell .ql-editor { min-height: 330px; padding: 16px 18px; }
.editor-shell .ql-editor.ql-blank::before { color: #8aa0bd; font-style: normal; }
.editor-shell .ql-snow .ql-picker { color: #173965; font-family: inherit; font-size: 12px; font-weight: 700; }
.editor-shell .ql-snow .ql-stroke { stroke: #173965; }
.editor-shell .ql-snow .ql-fill { fill: #173965; }
.editor-shell .ql-snow .ql-picker.ql-expanded .ql-picker-label, .editor-shell .ql-snow .ql-picker-label:hover, .editor-shell .ql-snow button:hover .ql-stroke, .editor-shell .ql-snow button.ql-active .ql-stroke { color: #e76f18; stroke: #e76f18; }
.editor-shell .ql-snow .ql-picker-options { z-index: 30; border-color: #cfdbeb; border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 47, 91, .16); }
.editor-shell .ql-tooltip { z-index: 40; }
.pdf-export-group { margin-top: 10px; border: 1px solid #d4e1f1; border-radius: 9px; overflow: hidden; background: #f9fbff; }
.pdf-export-group > span { min-height: 40px; padding: 0 12px; border-bottom: 1px solid #dbe5f1; color: #163966; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; }
.pdf-export-group > span .ti { color: #d64b30; font-size: 17px; }
.pdf-export-group > a { min-height: 38px; padding: 0 12px; color: #0d4fa8; display: flex; align-items: center; border-bottom: 1px solid #e4ebf5; font-size: 12px; font-weight: 800; text-decoration: none; }
.pdf-export-group > a:last-child { border-bottom: 0; }
.pdf-export-group > a:hover { color: #fff; background: #0d4fa8; }
.full-action i, .danger-action i { margin-right: 7px; font-size: 15px; vertical-align: -1px; }
.action-copy { margin-top: 0; }
@media (max-width: 1180px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; margin-right: 0; } }
@media (max-width: 700px) { .metric-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; } .metric-card { min-height: 94px; padding: 16px; } .metric-card .entity-icon { width: 46px; height: 46px; flex-basis: 46px; } .row-actions .list-action { min-width: 96px; } .editor-shell .ql-toolbar.ql-snow { overflow-x: auto; white-space: nowrap; } .editor-shell .ql-editor, .editor-shell .ql-container.ql-snow { min-height: 250px; } }
.category-actions { gap: 8px; }
.editor-history { display: flex; gap: 7px; margin: 8px 0 -1px; }
.editor-history-button { min-height: 30px; padding: 0 10px; border: 1px solid #d7e1ed; border-radius: 6px; color: #49617e; background: #f8fafc; font-size: 10px; font-weight: 750; cursor: pointer; }
.editor-history-button:hover { color: #0d6efd; border-color: #9ec5fe; background: #e7f1ff; }
.editor-history-button .ti { margin-right: 4px; font-size: 13px; vertical-align: -2px; }
.icon-action { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; color: #0d6efd; background: #eaf3ff; display: inline-grid; place-items: center; cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; }
.icon-action:hover { color: #fff; background: #0d6efd; transform: translateY(-1px); }
.icon-action-danger { color: #dc3545; background: #fff0f1; }
.icon-action-danger:hover { color: #fff; background: #dc3545; }
.icon-action:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.icon-action .ti { font-size: 17px; line-height: 1; }
.category-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.colour-picker-row { display: flex; align-items: center; gap: 10px; }
.colour-picker-row input[type="color"] { width: 48px; height: 40px; padding: 3px; border: 1px solid #dee2e6; border-radius: 6px; background: #fff; cursor: pointer; }
.colour-hex { flex: 1; min-width: 0; }
.icon-picker-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.upload-icon-button { min-height: 38px; padding: 0 12px; border-radius: 6px; color: #0d6efd; background: #eaf3ff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.upload-icon-button:hover { color: #fff; background: #0d6efd; }
.upload-icon-button input { display: none; }
.icon-picker { max-height: 330px; margin-top: 7px; padding: 12px; border: 1px solid #dee2e6; border-radius: 8px; background: #f8f9fa; display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 8px; overflow-y: auto; }
.icon-choice { min-width: 64px; min-height: 64px; padding: 7px 4px; border: 1px solid #e5e7eb; border-radius: 8px; color: #6c757d; background: #fff; display: grid; place-items: center; align-content: center; gap: 4px; cursor: pointer; }
.icon-choice:hover, .icon-choice.selected { color: #0d6efd; background: #dbeafe; border-color: #0d6efd; box-shadow: inset 0 0 0 1px #0d6efd; }
.icon-choice .ti { font-size: 24px; line-height: 1; }
.icon-choice small { max-width: 62px; overflow: hidden; color: inherit; font-size: 8px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.custom-icon-choice img { width: 27px; height: 27px; object-fit: contain; }
.dialog-field input, .dialog-field select { border-color: #dee2e6; border-radius: 6px; }
@media (max-width: 560px) { .category-dialog-grid, .icon-picker-toolbar { grid-template-columns: 1fr; } .icon-picker { grid-template-columns: repeat(4, minmax(58px, 1fr)); } }

/* Category picker: Bootstrap-style cards, deliberately scoped to the modal so
   older global button rules cannot turn the picker back into native controls. */
#modalRoot .icon-picker-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
#modalRoot .upload-icon-button { width: 112px; height: 42px; min-height: 42px; align-self: end; margin: 0 0 13px; padding: 0 13px; border: 0; border-radius: 6px; color: #0d6efd; background: #e7f1ff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#modalRoot .upload-icon-button:hover { color: #fff; background: #0d6efd; }
#modalRoot .upload-icon-button input { display: none !important; }
#modalRoot .icon-picker { max-height: 300px; margin-top: 8px; padding: 12px; border: 1px solid #dee2e6; border-radius: 8px; background: #f8f9fa; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow-y: auto; }
#modalRoot .icon-choice { width: 100%; min-width: 0; min-height: 58px; padding: 8px 9px; border: 1px solid #e9ecef; border-radius: 7px; color: #495057; background: #fff; display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; text-align: left; }
#modalRoot .icon-choice:hover, #modalRoot .icon-choice.selected { color: #0d6efd; background: #e7f1ff; border-color: #86b7fe; box-shadow: none; }
#modalRoot .icon-choice .ti { flex: 0 0 25px; font-size: 25px; line-height: 1; }
#modalRoot .icon-choice small { max-width: none; overflow: hidden; color: inherit; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
#modalRoot .custom-icon-choice img { width: 25px; height: 25px; flex: 0 0 25px; object-fit: contain; }
#modalRoot .dialog-field input, #modalRoot .dialog-field select { border: 1px solid #ced4da; border-radius: 6px; box-shadow: none; }
@media (max-width: 560px) { #modalRoot .icon-picker-toolbar { grid-template-columns: 1fr; } #modalRoot .upload-icon-button { margin-bottom: 0; } #modalRoot .icon-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v9 dashboard: icon contrast and number-first metric widgets */
.work-card .work-open { flex: 0 0 auto; }
.work-card .entity-icon > .ti { color: #fff !important; font-size: 18px; line-height: 1; }
.all-work .entity-icon > .ti { color: #0756d8 !important; }
.work-wordpress .work-open { color: #0756d8; }
.work-ehotel .work-open { color: #6d43be; }
.work-hosting .work-open { color: #d85f08; }
.work-malaysia-sms .work-open { color: #b63d65; }

.metric-grid { gap: 18px; }
.metric-card {
  min-height: 132px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.metric-graphic { display: flex; align-items: center; justify-content: center; }
.metric-card .metric-graphic .entity-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(15, 43, 89, .10);
}
.metric-card .metric-graphic .entity-icon .ti {
  color: #fff !important;
  font-size: 32px;
  line-height: 1;
}
.metric-card .metric-copy { min-width: 0; }
.metric-card .metric-copy span {
  margin: 0;
  color: #37547d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.metric-card .metric-copy strong {
  margin-top: 7px;
  color: #082d67;
  font-size: 31px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.metric-services .metric-graphic .entity-icon { background: #1776df !important; }
.metric-files .metric-graphic .entity-icon { background: #149457 !important; }
.metric-review .metric-graphic .entity-icon { background: #e76f18 !important; }
.metric-documents .metric-graphic .entity-icon { background: #7750c7 !important; }
@media (max-width: 700px) {
  .metric-card { min-height: 108px; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .metric-card .metric-graphic .entity-icon { width: 54px; height: 54px; flex-basis: 54px; border-radius: 14px; }
  .metric-card .metric-graphic .entity-icon .ti { font-size: 27px; }
  .metric-card .metric-copy strong { font-size: 28px; }
}

/* v10 dashboard: centred status widgets, separate from service categories */
html, body, button, input, select, textarea, .ql-editor, .ql-toolbar {
  font-family: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.metric-grid { gap: 18px; }
.metric-card {
  min-height: 166px;
  padding: 20px 16px;
  grid-template-columns: 1fr;
  grid-template-rows: 72px auto;
  justify-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(20, 50, 94, .045);
}
.metric-card .metric-graphic .entity-icon {
  width: 68px;
  height: 68px;
  flex-basis: 68px;
  border-radius: 20px;
  box-shadow: none;
}
.metric-card .metric-graphic .entity-icon .ti { font-size: 34px; }
.metric-card .metric-copy { display: flex; flex-direction: column; align-items: center; }
.metric-card .metric-copy span {
  color: #41597e;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.metric-card .metric-copy strong {
  margin-top: 5px;
  font-size: 31px;
  font-weight: 750;
}
.metric-services { background: #f5f8ff; }
.metric-files { background: #f2faf6; }
.metric-review { background: #fff8f1; }
.metric-documents { background: #f8f5ff; }
.metric-services .metric-graphic .entity-icon { background: #dce9ff !important; }
.metric-services .metric-graphic .entity-icon .ti { color: #2459aa !important; }
.metric-files .metric-graphic .entity-icon { background: #dff3e8 !important; }
.metric-files .metric-graphic .entity-icon .ti { color: #18734b !important; }
.metric-review .metric-graphic .entity-icon { background: #ffe8d4 !important; }
.metric-review .metric-graphic .entity-icon .ti { color: #bd5b17 !important; }
.metric-documents .metric-graphic .entity-icon { background: #e9e0ff !important; }
.metric-documents .metric-graphic .entity-icon .ti { color: #6f48b9 !important; }

/* Quick links are navigation, not category badges. */
.quick-link .entity-icon,
.quick-link .icon-wordpress,
.quick-link .icon-ehotel,
.quick-link .icon-hosting,
.quick-link .icon-malaysia-sms,
.quick-link .icon-internal {
  color: #285494 !important;
  background: #eaf1ff !important;
}
.quick-link .entity-icon .ti { color: #285494 !important; }
.quick-link span { font-weight: 650; }
.quick-link i { color: #2861bd; font-weight: 650; }
@media (max-width: 700px) {
  .metric-card { min-height: 142px; grid-template-columns: 1fr; grid-template-rows: 60px auto; gap: 10px; padding: 16px; }
  .metric-card .metric-graphic .entity-icon { width: 56px; height: 56px; flex-basis: 56px; border-radius: 17px; }
  .metric-card .metric-graphic .entity-icon .ti { font-size: 28px; }
  .metric-card .metric-copy strong { font-size: 28px; }
}

/* v11 dashboard: left-to-right metrics with centred glyphs and a separate status palette */
html, body, button, input, select, textarea, .ql-editor, .ql-toolbar {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.metric-card {
  min-height: 126px;
  padding: 18px 20px;
  grid-template-columns: 66px minmax(0, 1fr);
  grid-template-rows: 1fr;
  justify-items: stretch;
  align-content: center;
  gap: 16px;
  text-align: left;
  background: #fff;
}
.metric-graphic {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
}
.metric-card .metric-graphic .entity-icon {
  width: 66px;
  height: 66px;
  flex-basis: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
}
.metric-card .metric-graphic .entity-icon .ti {
  display: block;
  margin: 0;
  font-size: 31px;
  line-height: 1;
}
.metric-card .metric-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.metric-card .metric-copy span { color: #394d68; font-size: 13px; font-weight: 700; }
.metric-card .metric-copy strong { margin-top: 6px; color: #122d50; font-size: 30px; font-weight: 750; }
.metric-services .metric-graphic .entity-icon { background: #d8f0ee !important; }
.metric-services .metric-graphic .entity-icon .ti { color: #176b65 !important; }
.metric-files .metric-graphic .entity-icon { background: #e8eed9 !important; }
.metric-files .metric-graphic .entity-icon .ti { color: #637337 !important; }
.metric-review .metric-graphic .entity-icon { background: #f5e2e5 !important; }
.metric-review .metric-graphic .entity-icon .ti { color: #a94858 !important; }
.metric-documents .metric-graphic .entity-icon { background: #f2e7d7 !important; }
.metric-documents .metric-graphic .entity-icon .ti { color: #86642d !important; }

.quick-link .entity-icon,
.quick-link .entity-icon.icon-wordpress,
.quick-link .entity-icon.icon-ehotel,
.quick-link .entity-icon.icon-hosting,
.quick-link .entity-icon.icon-malaysia-sms,
.quick-link .entity-icon.icon-internal {
  background: #eef2f6 !important;
  color: #50647b !important;
}
.quick-link .entity-icon .ti { color: #50647b !important; }
@media (max-width: 700px) {
  .metric-card { min-height: 106px; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 1fr; gap: 14px; padding: 16px; }
  .metric-graphic, .metric-card .metric-graphic .entity-icon { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; }
  .metric-card .metric-graphic .entity-icon .ti { font-size: 27px; }
}