:root{
  --lm-bg:#0b1220;
  --lm-surface:#0f1a30;
  --lm-card:#121f3a;
  --lm-border:rgba(255,255,255,.10);
  --lm-text:#e7eefc;
  --lm-muted:rgba(231,238,252,.70);
  --lm-accent:#5eead4;
  --lm-accent2:#60a5fa;
  --lm-danger:#fb7185;
  --lm-warn:#fbbf24;
  --lm-ok:#34d399;
  --lm-shadow:0 12px 30px rgba(0,0,0,.45);
  --lm-radius:14px;
  --lm-radius-sm:10px;
  --lm-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --lm-font-size: 14px;
}

.lm-app-shell{
  font-family:var(--lm-font);
  font-size:var(--lm-font-size);
  color:var(--lm-text);
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}
.lm-app-shell *{box-sizing:border-box;}
.lm-app-loading{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.lm-card{background:linear-gradient(180deg,var(--lm-card), rgba(18,31,58,.85)); border:1px solid var(--lm-border); box-shadow:var(--lm-shadow); border-radius:var(--lm-radius); padding:22px; width:min(520px, 92vw);}
.lm-title{font-size:22px; font-weight:700; letter-spacing:.2px;}
.lm-subtitle{margin-top:8px; color:var(--lm-muted);}

.lm-app{
  min-height: 100vh;
  background: radial-gradient(1000px 600px at 20% 0%, rgba(96,165,250,.18), transparent 60%),
              radial-gradient(1000px 600px at 80% 0%, rgba(94,234,212,.14), transparent 60%),
              linear-gradient(180deg, var(--lm-bg), #070b14 70%);
  padding:26px 18px;
}

.lm-container{max-width:1140px; margin:0 auto;}
.lm-topbar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 16px; border:1px solid var(--lm-border); border-radius:var(--lm-radius);
  background:rgba(15,26,48,.65); backdrop-filter: blur(10px);
}
.lm-brand{display:flex; gap:12px; align-items:center;}
.lm-logo{
  width:36px; height:36px; border-radius:12px;
  background:linear-gradient(135deg,var(--lm-accent2), var(--lm-accent));
  box-shadow:0 10px 24px rgba(96,165,250,.20);
}
.lm-brand h1{font-size:16px; margin:0; font-weight:700;}
.lm-meta{font-size:12px; color:var(--lm-muted);}
.lm-actions{display:flex; gap:10px; align-items:center;}

.lm-btn{
  border:1px solid var(--lm-border);
  background:rgba(18,31,58,.7);
  color:var(--lm-text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
.lm-btn:hover{border-color: rgba(94,234,212,.4);}
.lm-btn.primary{background:linear-gradient(135deg, rgba(96,165,250,.9), rgba(94,234,212,.85)); color:#07101f; border-color: transparent;}
.lm-btn.danger{background:rgba(251,113,133,.12); border-color: rgba(251,113,133,.35); color:var(--lm-text);}

.lm-grid{display:grid; grid-template-columns: 280px 1fr; gap:16px; margin-top:16px;}
@media(max-width: 980px){.lm-grid{grid-template-columns: 1fr;}}

.lm-nav{
  border:1px solid var(--lm-border);
  border-radius:var(--lm-radius);
  background:rgba(15,26,48,.55);
  padding:10px;
}
.lm-nav a{
  display:flex; gap:10px; align-items:center;
  padding:10px 12px;
  color:var(--lm-text);
  text-decoration:none !important;
  border-radius:12px;
  border:1px solid transparent;
}
.lm-nav a *{text-decoration:none !important;}
.lm-nav a:hover{background:rgba(255,255,255,.04); border-color: rgba(255,255,255,.06);}
.lm-nav a.active{background:rgba(96,165,250,.12); border-color: rgba(96,165,250,.25);}
.lm-pill{font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--lm-border); color:var(--lm-muted);}

.lm-panel{
  border:1px solid var(--lm-border);
  border-radius:var(--lm-radius);
  background:rgba(15,26,48,.55);
  padding:16px;
}
.lm-panel h2{margin:0 0 12px 0; font-size:16px;}
.lm-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
@media(max-width: 760px){.lm-row{grid-template-columns:1fr;}}
.lm-field label{display:block; font-size:12px; color:var(--lm-muted); margin:0 0 6px 0;}
.lm-field input,.lm-field select,.lm-field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--lm-border);
  background:rgba(18,31,58,.65);
  color:var(--lm-text);
  outline:none;
}
.lm-field textarea{min-height:92px; resize:vertical;}
.lm-help{font-size:12px; color:var(--lm-muted); margin-top:6px;}

.lm-divider{height:1px; background:rgba(255,255,255,.08); margin:14px 0;}
.lm-kpis{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;}
@media(max-width: 980px){.lm-kpis{grid-template-columns: repeat(2, 1fr);}}
.lm-kpi{padding:14px; border-radius:16px; border:1px solid var(--lm-border); background:rgba(18,31,58,.55);}
.lm-kpi .v{font-size:18px; font-weight:800;}
.lm-kpi .k{font-size:12px; color:var(--lm-muted); margin-top:6px;}

.lm-table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:16px; border:1px solid var(--lm-border);}
.lm-table th,.lm-table td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13px; vertical-align:top;}
.lm-table th{text-align:left; color:var(--lm-muted); font-weight:700; background:rgba(18,31,58,.55);}
.lm-table tr:hover td{background:rgba(255,255,255,.02);}
/* Guarantor group header row - no repeat of thead, just customer name row */
.lm-table tr.lm-group-row td{background:rgba(18,31,58,.75); color:var(--lm-accent); font-weight:700; font-size:12px; padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.10);}
.lm-table tr.lm-empty-row td{color:var(--lm-muted); font-style:italic;}

.lm-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--lm-border); color:var(--lm-muted);}
.lm-badge.ok{border-color: rgba(52,211,153,.35); color: rgba(52,211,153,.95);}
.lm-badge.warn{border-color: rgba(251,191,36,.35); color: rgba(251,191,36,.95);}
.lm-badge.danger{border-color: rgba(251,113,133,.35); color: rgba(251,113,133,.95);}

.lm-login{
  min-height:70vh; display:flex; align-items:center; justify-content:center;
}
.lm-login .lm-card{width:min(460px, 94vw);}
.lm-error{margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(251,113,133,.14); border:1px solid rgba(251,113,133,.35);}
.lm-success{margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.30);}

.lm-upload{display:flex; gap:12px; align-items:flex-start;}
.lm-preview{width:76px; height:76px; border-radius:14px; border:1px solid var(--lm-border); overflow:hidden; background:rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center;}
.lm-preview img{width:100%; height:100%; object-fit:cover; display:block;}
.lm-preview .txt{font-size:11px; color:var(--lm-muted); padding:6px; text-align:center;}

/* Appearance color swatches */
.lm-swatch-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}
.lm-swatch{width:28px; height:28px; border-radius:8px; cursor:pointer; border:2px solid transparent; transition: border-color .15s;}
.lm-swatch.active, .lm-swatch:hover{border-color: var(--lm-text);}

/* ── Chip list editor ──────────────────────────────────────────────── */
.lm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--lm-border);
  border-radius: 12px;
  background: rgba(18,31,58,.55);
  min-height: 44px;
  align-items: flex-start;
}
.lm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border-radius: 999px;
  background: rgba(96,165,250,.14);
  border: 1px solid rgba(96,165,250,.28);
  font-size: 13px;
  font-weight: 600;
}
.lm-chip-del {
  background: none;
  border: none;
  color: var(--lm-danger);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  opacity: .7;
}
.lm-chip-del:hover { opacity: 1; }
.lm-chip-addrow {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.lm-chip-input {
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid var(--lm-border);
  background: rgba(18,31,58,.7);
  color: var(--lm-text);
  font-size: 13px;
  outline: none;
  flex: 1;
}