.logo.cs-logo{background:transparent!important;border-radius:0!important;box-shadow:none!important;flex-shrink:0}
.cs-logo img{display:block;width:100%;height:100%;object-fit:contain}
.me-v3 .wallet,.me-v3 .guest-card{position:relative;isolation:isolate;overflow:hidden}
.home .balance::after,.me-v3 .wallet::after,.me-v3 .guest-card::after{content:"";position:absolute;z-index:0;pointer-events:none;right:clamp(16px,5vw,96px);top:50%;width:clamp(180px,24vw,300px);height:106px;transform:translateY(-50%);background:url('/assets/kailong-watermark.svg') center/contain no-repeat;opacity:.18}
.home .balance>*{position:relative;z-index:1}
.me-v3 .wallet::after,.me-v3 .guest-card::after{top:34px;right:12px;transform:none;width:210px;opacity:.22}
.cs-login-brand,.cs-page-brand{display:flex;align-items:center;gap:12px}
.cs-login-brand .logo{margin:0}
.cs-login-brand strong,.cs-page-brand strong{display:block;font-size:22px;letter-spacing:4px;color:#123a35}
.cs-login-brand small,.cs-page-brand small{display:block;margin-top:4px;font-size:11px;letter-spacing:3px;color:#806324}
.cs-page-brand>img{display:block;width:44px;height:44px}
.cs-page-brand h1{margin:4px 0 0;font-size:13px;font-weight:500;letter-spacing:1px;color:#68788e}
.cs-security-brand{margin:22px 0 18px}
@media(max-width:600px){.home .balance::after{top:9px;right:12px;width:150px;height:56px;transform:none;opacity:.2}.me-v3 .wallet::after,.me-v3 .guest-card::after{top:17px;right:12px;width:150px;height:60px;opacity:.24}.cs-agent-header{flex-wrap:wrap}.cs-agent-header .header-actions{margin-bottom:12px}.cs-page-brand strong{font-size:20px}}

.cs-member-brand{display:flex;align-items:center;gap:11px;padding:0 0 15px;margin:0 0 18px;border-bottom:1px solid #e8edf4}
.cs-member-brand>img{display:block;flex:none;width:44px;height:44px}
.cs-member-brand strong{display:block;color:#123a35;font-size:22px;line-height:1.25;letter-spacing:4px}
.cs-member-brand small{display:block;margin-top:4px;color:#806324;font-size:11px;letter-spacing:2.5px}
.cs-member-brand>span{margin-left:auto;color:#7b8799;font-size:12px;white-space:nowrap}
@media(max-width:600px){.cs-member-brand{margin-bottom:16px;padding-bottom:13px}.cs-member-brand>img{width:40px;height:40px}.cs-member-brand strong{font-size:20px}}

/* Kailong theme and responsive layout */
:root {
  --kl-ink: #143630;
  --kl-muted: #53665e;
  --kl-warning: #885000;
  --kl-card-radius: 16px;
  --kl-control-radius: 10px;
  --kl-pill-radius: 999px;
  --kl-green: #176455;
  --kl-gold: #d8b96e;
  --kl-line: #dbe7e2;
  --kl-canvas: #f2f7f4;
}
[data-kailong-page="login"] {
  background: radial-gradient(ellipse at 15% 10%, #d1e9df, transparent 54%),
    linear-gradient(145deg, #edf5f0, #f8faf6);
}
[data-kailong-page="login"] .box {
  width: min(460px, calc(100% - 32px));
  padding: clamp(22px, 5vw, 42px);
  border-color: var(--kl-line,#dbe7e2);
  border-radius: var(--kl-card-radius, 16px);
  box-shadow: 0 20px 56px #123a3514;
}
.cs-login-brand { padding-bottom: 18px; border-bottom: 1px solid var(--kl-line,#dbe7e2); }
[data-kailong-page="login"] h1 { color: var(--kl-ink,#143630); margin-top: 18px; }
[data-kailong-page="login"] input:focus-visible {
  outline: 2px solid var(--kl-green,#176455);
  outline-offset: 2px;
}
[data-kailong-page="login"] form button[type="submit"],
[data-kailong-page="login"] form button:not([type]) { background: var(--kl-green,#176455); }
[data-kailong-page="login"] .links { flex-wrap: wrap; gap: 10px 18px; }

[data-kailong-page="member"] .home {
  background: linear-gradient(165deg, #10382f, #22594c 27%, #e9f3ed 67%, #f9fbf8);
}
[data-kailong-page="member"] .homegrid > * { min-width: 0; }
[data-kailong-page="member"] .me-v3 .wallet {
  background: linear-gradient(145deg, #173b35, #276553);
}
[data-kailong-page="member"] .cs-member-brand { border-color: var(--kl-line,#dbe7e2); }

[data-kailong-page="admin"], [data-kailong-page="agent"] { background: var(--kl-canvas,#f2f7f4); }
[data-kailong-page="admin"] .sidebar { background: #122d28; color: #bdcec7; }
[data-kailong-page="admin"] .workspace { min-width: 0; }
[data-kailong-page="admin"] .main { padding-inline: clamp(14px, 2.5vw, 34px); }
[data-kailong-page="admin"] .topbar { padding-inline: clamp(14px, 2.5vw, 34px); }
[data-kailong-page="admin"] .pagehead, [data-kailong-page="admin"] .filters {
  flex-wrap: wrap;
  row-gap: 10px;
}
[data-kailong-page="admin"] .panel { border-color: var(--kl-line,#dbe7e2); }
[data-kailong-page="agent"] main { max-width: 980px; padding-inline: clamp(14px, 3vw, 28px); }
[data-kailong-page="agent"] .cs-agent-header {
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--kl-line,#dbe7e2);
  border-radius: 16px;
}
[data-kailong-page="agent"] .header-actions { flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) {
  [data-kailong-page="admin"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  [data-kailong-page="agent"] .cs-agent-header { padding: 10px 12px; }
}

/* Give compact controls room for a finger without enlarging their icons. */
[data-kailong-page="member"] .home .eyeline > button,
[data-kailong-page="member"] .home-art-dots > button,
[data-kailong-page="member"] .me-v3 .ghost,
[data-kailong-page="member"] .me-v3 .wallet :is(.detail, .eye) {
  min-inline-size: 44px;
  min-block-size: 44px;
}
[data-kailong-page="member"] .home .eyeline > button,
[data-kailong-page="member"] .me-v3 .wallet .eye {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
}
[data-kailong-page="member"] .me-v3 .wallet .detail { justify-content: flex-end; }

@media (max-width: 720px) {
  [data-kailong-page="admin"] :is(.textbutton, .topright .button),
  [data-kailong-page="agent"] :is(.header-actions a, .header-actions button, main button) {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
  [data-kailong-page="agent"] .header-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  [data-kailong-page="admin"] .sidebar nav {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  [data-kailong-page="admin"] .sidebar nav button {
    flex-direction: column;
    gap: 4px;
    height: 54px;
    line-height: 1.15;
  }
  [data-kailong-page="admin"] .sidebar nav button > span {
    display: block;
    max-width: 100%;
    font-size:11px;
    text-align: center;
    white-space: normal;
  }
  [data-kailong-page="admin"] .sidebar .brand { padding: 0 0 14px; justify-content: center; }
  [data-kailong-page="admin"] .sidebar .cs-logo { width: 38px; height: 38px; }
}

.shared-recon-note { margin-left: 12px; font-size:11px; }
.shared-member-link { color: #7f99c9; }
.chat-attach { flex: 0 0 auto; white-space: nowrap; }

@media (min-width: 1400px) {
  .phone, .phone * { scrollbar-width: auto; }
  .phone *::-webkit-scrollbar { display: revert; width: revert; height: revert; }
}
@media (max-width: 420px) {
  [data-kailong-page="admin"] .topbar { flex-wrap: wrap; gap: 8px; }
  [data-kailong-page="admin"] .topright { min-width: 0; }
  [data-kailong-page="admin"] .topright .role { min-width: 0; max-width: 100%; }
  [data-kailong-page="admin"] .topright select { max-width: 100%; }
}
@media (max-width: 420px) { [data-kailong-page="admin"] .kpi .value { overflow-wrap: anywhere; } }