/* ============================================================
   Concierge Connect — Les Clefs d'Or Indonesia
   Luxury theme engine (10 themes via [data-theme])
   ============================================================ */

/* ---------- Default = Les Clefs d'Or (Gold & Navy) ---------- */
:root,
[data-theme="lesclefs"] {
  --bg:        #0a1220;
  --bg-soft:   #101b2e;
  --surface:   #14213a;
  --surface-2: #1b2c4a;
  --border:    #2a3d5f;
  --text:      #eef2f8;
  --text-dim:  #9fb0c9;
  --accent:    #c9a227;   /* gold */
  --accent-2:  #e6c65a;
  --accent-ink:#1a1405;
  --ok:        #2fbf87;
  --warn:      #e0a83a;
  --danger:    #e05a5a;
  --shadow:    0 18px 45px -12px rgba(0,0,0,.55);
  --radius:    18px;
}

[data-theme="midnight"]{
  --bg:#0b0f19;--bg-soft:#111726;--surface:#151d31;--surface-2:#1d2740;--border:#2a3651;
  --text:#eaf0fb;--text-dim:#93a1bd;--accent:#6d8dff;--accent-2:#9db2ff;--accent-ink:#0b1024;
  --ok:#3ccf8e;--warn:#e6b23a;--danger:#f06a6a;--shadow:0 18px 45px -12px rgba(0,0,0,.6);--radius:18px;
}
[data-theme="emerald"]{
  --bg:#07130f;--bg-soft:#0c1c17;--surface:#0f241d;--surface-2:#163127;--border:#22463a;
  --text:#e9f6f0;--text-dim:#93bcaa;--accent:#2fbf87;--accent-2:#63e0ad;--accent-ink:#04130d;
  --ok:#2fbf87;--warn:#e0b03a;--danger:#e06a6a;--shadow:0 18px 45px -12px rgba(0,0,0,.55);--radius:18px;
}
[data-theme="burgundy"]{
  --bg:#170a10;--bg-soft:#22101a;--surface:#2a1420;--surface-2:#381a2b;--border:#4d283c;
  --text:#f8ecf1;--text-dim:#c99fb2;--accent:#c0455f;--accent-2:#e0708a;--accent-ink:#1c0810;
  --ok:#37bf87;--warn:#e0a83a;--danger:#f06a6a;--shadow:0 18px 45px -12px rgba(0,0,0,.55);--radius:18px;
}
[data-theme="royal"]{
  --bg:#0c0a1e;--bg-soft:#14112e;--surface:#1a163a;--surface-2:#241e4e;--border:#332b66;
  --text:#eeeafb;--text-dim:#a99fce;--accent:#8a6df0;--accent-2:#b39bff;--accent-ink:#0d0824;
  --ok:#37bf87;--warn:#e0b03a;--danger:#f06a6a;--shadow:0 18px 45px -12px rgba(0,0,0,.55);--radius:18px;
}
[data-theme="platinum"]{
  --bg:#eef1f5;--bg-soft:#e6eaf0;--surface:#ffffff;--surface-2:#f4f6fa;--border:#d8dee8;
  --text:#1a2233;--text-dim:#5f6b81;--accent:#9099a8;--accent-2:#b7bdc9;--accent-ink:#ffffff;
  --ok:#1e9e6d;--warn:#c98a1a;--danger:#d24b4b;--shadow:0 16px 40px -16px rgba(30,40,60,.28);--radius:18px;
}
[data-theme="ivory"]{
  --bg:#f7f3ea;--bg-soft:#efe9db;--surface:#fffdf8;--surface-2:#f6f1e6;--border:#e3dbca;
  --text:#26221a;--text-dim:#6d6455;--accent:#b8892b;--accent-2:#d6ad4f;--accent-ink:#fffdf8;
  --ok:#1e9e6d;--warn:#c98a1a;--danger:#d24b4b;--shadow:0 16px 40px -16px rgba(120,100,60,.22);--radius:18px;
}
[data-theme="ocean"]{
  --bg:#061620;--bg-soft:#0a2130;--surface:#0d293b;--surface-2:#12384f;--border:#1d5069;
  --text:#e7f4fb;--text-dim:#8fb4c6;--accent:#2bb3d6;--accent-2:#5fd4f0;--accent-ink:#041016;
  --ok:#2fbf9a;--warn:#e0b03a;--danger:#f06a6a;--shadow:0 18px 45px -12px rgba(0,0,0,.5);--radius:18px;
}
[data-theme="rosegold"]{
  --bg:#1a1113;--bg-soft:#26191c;--surface:#2e1f23;--surface-2:#3c292e;--border:#513940;
  --text:#f9edef;--text-dim:#cba7ae;--accent:#d98a75;--accent-2:#eeb0a0;--accent-ink:#1a0f0c;
  --ok:#37bf87;--warn:#e0a83a;--danger:#f06a6a;--shadow:0 18px 45px -12px rgba(0,0,0,.55);--radius:18px;
}
[data-theme="onyx"]{
  --bg:#0c0c0e;--bg-soft:#141418;--surface:#18181d;--surface-2:#212128;--border:#30303a;
  --text:#f0f0f3;--text-dim:#9b9ba6;--accent:#d4af37;--accent-2:#ecd27a;--accent-ink:#0c0b06;
  --ok:#37bf87;--warn:#e0b03a;--danger:#f06a6a;--shadow:0 18px 45px -12px rgba(0,0,0,.7);--radius:18px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
     radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
     radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
     var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.serif{font-family:'Cormorant Garamond',Georgia,serif}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:264px;flex-shrink:0;padding:22px 16px;
  background:linear-gradient(180deg, var(--bg-soft), color-mix(in srgb,var(--bg-soft) 70%, var(--bg)));
  border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.main{flex:1;min-width:0;padding:26px 30px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:26px;padding:4px 6px}
.brand .keys{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);display:grid;place-items:center;font-size:22px;font-weight:800;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--accent) 60%, transparent);
}
.brand .keys img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.brand b{font-size:15px;letter-spacing:.3px;display:block;line-height:1.15}
.brand small{color:var(--text-dim);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

.nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  color:var(--text-dim);font-weight:600;font-size:14px;transition:all .22s ease;
}
.nav a .ic{width:20px;text-align:center;font-size:16px}
.nav a:hover{background:var(--surface);color:var(--text)}
.nav a.active{
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 22%, var(--surface)), var(--surface));
  color:var(--text);box-shadow:inset 0 0 0 1px var(--border);
}
.nav a.active .ic{color:var(--accent)}
.nav-sep{margin:14px 8px 6px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);opacity:.7}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 96%, transparent), var(--surface));
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;
}
.card.pad-sm{padding:16px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g2,.g3,.g4{grid-template-columns:1fr}}

.h-page{font-size:26px;font-weight:800;letter-spacing:-.5px;margin:0}
.sub{color:var(--text-dim);font-size:13px;margin-top:2px}
.section-title{font-size:16px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px}

/* ---------- Stat cards ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .n{font-size:30px;font-weight:800;letter-spacing:-1px}
.stat .l{color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.stat .ic{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:6px;
  background:color-mix(in srgb,var(--accent) 16%, transparent);color:var(--accent);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);transition:all .2s ease;text-decoration:none;
}
.btn:hover{transform:translateY(-1px);border-color:var(--accent)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);border:none;
  box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 65%, transparent);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 50%,var(--border));color:var(--danger)}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:10px}
.btn-block{width:100%;justify-content:center}

/* ---------- Forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin:0 0 6px}
.input,textarea,select{
  width:100%;padding:11px 14px;border-radius:12px;font-size:14px;font-family:inherit;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text);transition:border .2s;
}
.input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical;min-height:90px}
.field{margin-bottom:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1;min-width:160px}

/* ---------- Badges & chips ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:color-mix(in srgb,var(--accent) 16%, transparent);color:var(--accent);
}
.badge.gold{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink)}
.badge.muted{background:var(--surface-2);color:var(--text-dim)}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);
  font-size:12.5px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .2s}
.chip.active,.chip:hover{border-color:var(--accent);color:var(--text)}

/* ---------- Post / board ---------- */
.post{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:20px;margin-bottom:18px}
.post.pinned{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
.post-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex-shrink:0;
  display:grid;place-items:center;font-weight:800;color:var(--accent);border:1px solid var(--border)}
.avatar.lg{width:96px;height:96px;font-size:32px}
.avatar.sm{width:32px;height:32px;font-size:13px}
.post-meta b{font-size:14.5px}
.post-meta small{color:var(--text-dim);font-size:12px;display:block}
.post h3{margin:4px 0 8px;font-size:18px}
.post-body{color:var(--text);white-space:pre-wrap;font-size:14.5px}
.post-img{width:100%;max-height:420px;object-fit:cover;border-radius:14px;margin-top:14px;border:1px solid var(--border)}
.post-actions{display:flex;gap:8px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap}

.comment{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.comment .body{flex:1}
.comment b{font-size:13px}
.comment small{color:var(--text-dim);font-size:11px}
.comment p{margin:2px 0 0;font-size:13.5px}

/* ---------- Member cards ---------- */
.member-card{text-align:center;padding:24px 18px;transition:transform .25s}
.member-card:hover{transform:translateY(-3px)}
.member-card .avatar{margin:0 auto 12px}
.member-card b{display:block;font-size:15px}
.member-card .pos{color:var(--accent);font-size:12.5px;font-weight:600;margin-top:2px}
.member-card .hotel{color:var(--text-dim);font-size:12px;margin-top:2px}

/* ---------- Place cards ---------- */
.place-card{overflow:hidden;padding:0}
.place-card .ph{height:160px;background:var(--surface-2);object-fit:cover;width:100%;display:block}
.place-card .body{padding:16px}
.stars{color:var(--accent);letter-spacing:2px;font-size:13px}

/* ---------- Map ---------- */
#map,.mini-map{width:100%;border-radius:14px;border:1px solid var(--border);z-index:1}
#map{height:420px}
.mini-map{height:200px}
.leaflet-popup-content b{color:#111}

/* ---------- Table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)}
th{color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
tr:hover td{background:color-mix(in srgb,var(--surface-2) 50%,transparent)}

/* ---------- Alerts ---------- */
.alert{padding:13px 16px;border-radius:12px;font-size:13.5px;font-weight:600;margin-bottom:18px;border:1px solid}
.alert.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:var(--ok);color:var(--ok)}
.alert.err{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:var(--danger);color:var(--danger)}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(4,8,16,.7);backdrop-filter:blur(4px);z-index:1000;
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);width:100%;max-width:560px;padding:26px;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal h2{margin:0 0 4px;font-size:20px}

/* theme swatch */
.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:700px){.theme-grid{grid-template-columns:repeat(2,1fr)}}
.swatch{border:2px solid var(--border);border-radius:14px;padding:14px;cursor:pointer;text-align:center;transition:all .2s}
.swatch:hover{transform:translateY(-2px)}
.swatch.active{border-color:var(--accent)}
.swatch .dots{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.swatch .dot{width:20px;height:20px;border-radius:50%}
.swatch small{font-size:12px;font-weight:600}

/* mobile nav */
.menu-toggle{display:none}
@media(max-width:900px){
  .sidebar{position:fixed;left:-280px;z-index:900;transition:left .25s;box-shadow:var(--shadow)}
  .sidebar.open{left:0}
  .menu-toggle{display:inline-flex}
  .main{padding:18px 16px 60px}
}
/* ---------- Region picker ---------- */
.region-picker{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:6px 10px 6px 12px}
.region-picker .rp-ic{font-size:15px}
.region-picker select{background:transparent;border:none;color:var(--text);font-weight:700;font-size:13.5px;
  padding:2px 4px;cursor:pointer;max-width:150px}
.region-picker select:focus{outline:none}

/* ---------- Minimalist board ---------- */
.board{max-width:680px;margin:0 auto}
.board-strip{display:flex;gap:22px;justify-content:center;padding:0 0 18px;color:var(--text-dim);font-size:13px;flex-wrap:wrap}
.board-strip b{color:var(--text);font-weight:800}
.compose{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:8px 8px 8px 16px;margin-bottom:20px;transition:border .2s}
.compose:hover{border-color:var(--accent)}
.compose .ph{flex:1;color:var(--text-dim);font-size:14px;background:none;border:none;text-align:left;cursor:pointer;padding:8px 0}
.chips-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;-ms-overflow-style:none;scrollbar-width:none}
.chips-row::-webkit-scrollbar{display:none}
.chips-row .chip{white-space:nowrap;flex-shrink:0}

.post-min{border:none;border-bottom:1px solid var(--border);border-radius:0;background:none;
  padding:20px 4px;margin:0;box-shadow:none}
.post-min:last-child{border-bottom:none}
.post-min.pinned{background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:14px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));padding:20px;margin-bottom:8px}
.post-min h3{margin:2px 0 8px;font-size:17px;letter-spacing:-.2px}
.post-min .post-actions{border-top:none;padding-top:10px;gap:6px}
.act{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;transition:all .2s}
.act:hover{background:var(--surface-2);color:var(--text)}
.act.on{color:var(--accent)}
/* ============================================================
   LUXURY BOARD
   ============================================================ */
.board-lux{max-width:720px;margin:0 auto}
.board-intro{text-align:center;padding:6px 0 26px;position:relative}
.board-intro .eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-weight:700}
.board-intro h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:38px;font-weight:700;
  margin:6px 0 4px;letter-spacing:-.5px;line-height:1.05}
.board-intro p{color:var(--text-dim);font-size:14px;margin:0}
.board-intro .rule{width:60px;height:2px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}

.lux-stats{display:flex;justify-content:center;gap:0;margin:0 auto 28px;max-width:560px;
  border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface)}
.lux-stats .s{flex:1;text-align:center;padding:16px 8px;border-right:1px solid var(--border)}
.lux-stats .s:last-child{border-right:none}
.lux-stats .n{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--text);line-height:1}
.lux-stats .l{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-top:5px}

.lux-compose{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:24px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 8%,var(--surface)), var(--surface));
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);transition:all .25s}
.lux-compose:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.lux-compose .avatar{border:2px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.lux-compose .ph{flex:1;text-align:left;background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-size:14.5px;font-family:inherit;padding:6px 0}

.lux-filter{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;margin-bottom:22px;
  scrollbar-width:none;justify-content:center;flex-wrap:wrap}
.lux-filter::-webkit-scrollbar{display:none}
.lux-chip{white-space:nowrap;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;
  border:1px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;transition:all .2s}
.lux-chip:hover{border-color:var(--accent);color:var(--text)}
.lux-chip.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);border-color:transparent;font-weight:700}

.lux-post{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:26px 28px;margin-bottom:20px;box-shadow:var(--shadow);transition:transform .25s,border-color .25s}
.lux-post:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.lux-post.pinned{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
.lux-post.pinned::before{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 40%)}
.lux-post .head{display:flex;align-items:center;gap:13px;margin-bottom:16px;position:relative}
.lux-post .head .avatar{border:2px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.lux-post .head b{font-size:14.5px;letter-spacing:.1px}
.lux-post .head small{color:var(--text-dim);font-size:12px;display:block;margin-top:1px}
.lux-featured{margin-left:auto;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:var(--accent);display:flex;align-items:center;gap:5px}
.lux-post h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-weight:700;
  letter-spacing:-.3px;margin:0 0 10px;line-height:1.15;position:relative}
.lux-post .body{color:var(--text);font-size:15px;line-height:1.65;white-space:pre-wrap;position:relative}
.lux-post .post-img{border-radius:16px;margin-top:16px}
.lux-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:relative}
.lux-tag{font-size:11px;font-weight:600;padding:5px 12px;border-radius:999px;
  background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border)}
.lux-tag.gold{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-color:transparent}
.lux-actions{display:flex;align-items:center;gap:4px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border);position:relative}
.lux-act{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;transition:all .2s}
.lux-act:hover{background:var(--surface-2);color:var(--text)}
.lux-act.on{color:var(--accent)}
.lux-comments{margin-top:8px;position:relative}
@media(max-width:640px){
  .lux-post{padding:22px 20px}
  .board-intro h2{font-size:30px}
  .lux-post h3{font-size:22px}
}
.muted{color:var(--text-dim)}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap{gap:12px}.wrap{flex-wrap:wrap}
.mt{margin-top:16px}.mb{margin-bottom:16px}.mt-s{margin-top:8px}
.empty{text-align:center;padding:50px 20px;color:var(--text-dim)}
.empty .ic{font-size:44px;opacity:.4;margin-bottom:10px}