:root {
  --bg: #0a0d14;
  --surface: #121622;
  --surface2: #1a1f2e;
  --surface3: #232a3b;
  --border: #2a3247;
  --text: #eef1f7;
  --text-dim: #9aa4ba;
  --text-faint: #5e6781;
  --primary: #5b8dee;
  --primary-glow: rgba(91, 141, 238, 0.35);
  --success: #2dd4a0;
  --warning: #f5a623;
  --danger: #f06060;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  --font: "Segoe UI", system-ui, -apple-system, "Tahoma", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(91, 141, 238, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(45, 212, 160, 0.08), transparent 55%),
    var(--bg);
  padding-bottom: 90px;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 20px 16px; }

/* Header */
header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; padding-top: 8px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), #7c5cff);
  display: grid; place-items: center; font-size: 22px;
  box-shadow: 0 6px 20px var(--primary-glow);
}
.brand h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.brand p { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.header-right { display: flex; align-items: center; gap: 10px; }
.lock-btn { width: 38px; height: 38px; border-radius: 11px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; transition: 0.15s; }
.lock-btn:hover { color: var(--text); border-color: var(--primary); }

/* ---- PIN lock (iOS-style passcode) ---- */
.pinlock { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: var(--bg); }
.pinlock.hidden { display: none; }
.pin-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 320px; padding: 24px; }
.pin-brand { font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
.pin-title { font-size: 15px; color: var(--text-dim); }
.pin-dots { display: flex; gap: 18px; height: 18px; margin: 8px 0 2px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text-faint); transition: 0.15s; }
.pin-dot.filled { background: var(--primary); border-color: var(--primary); }
.pin-err { font-size: 13px; color: var(--danger); min-height: 18px; font-weight: 600; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 74px); gap: 18px; justify-content: center; direction: ltr; }
.pin-key { width: 74px; height: 74px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font-size: 30px; font-family: var(--font-nums, inherit); cursor: pointer; transition: 0.1s;
  display: grid; place-items: center; }
.pin-key:active { background: var(--surface3); transform: scale(0.93); }
.pin-key.blank { background: none; border: none; cursor: default; }
.pin-key.act svg { width: 26px; height: 26px; }
@keyframes pinshake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }
.pin-inner.shake { animation: pinshake 0.5s; }

.status-pill {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 13px; border-radius: 999px; font-size: 12px; color: var(--text-dim);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.dot.on { background: var(--success); box-shadow: 0 0 8px var(--success); }
.dot.off { background: var(--danger); }

/* Quick actions */
.quick { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.qbtn {
  flex: 1; min-width: 130px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 13px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.15s;
}
.qbtn:hover { border-color: var(--primary); background: var(--surface2); }
.qbtn.danger:hover { border-color: var(--danger); }
.qbtn .ic { font-size: 18px; }

/* Cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

/* Device sections (lights / ACs / TV) */
.dev-section { margin-bottom: 26px; }
.dev-section-title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700;
  color: var(--text); margin: 4px 2px 14px; cursor: pointer; user-select: none; }
.dev-section-title > svg { color: var(--primary); }
.dev-section-title .dev-count { font-size: 12px; font-weight: 600; color: var(--text-faint);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.acc-chev { margin-inline-start: auto; display: inline-flex; color: var(--text-faint); transition: transform 0.2s; }
.acc-chev > svg { color: inherit; }
.dev-section.collapsed .dev-section-title { margin-bottom: 4px; }
.dev-section.collapsed .acc-chev { transform: rotate(-90deg); }
.dev-section.collapsed .grid { display: none; }

.card {
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); transition: border-color 0.2s;
}
.card.active { border-color: var(--primary); }

.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-title { display: flex; align-items: center; gap: 11px; }
.card-title .ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 19px; background: var(--surface3); color: var(--text-dim);
}
.card.active .card-title .ic {
  background: linear-gradient(135deg, var(--primary), #7c5cff); color: #fff;
  box-shadow: 0 4px 14px var(--primary-glow);
}
.card-title h3 { font-size: 16px; font-weight: 700; }
.card-title .sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

.badge { font-size: 10px; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.badge.online { background: rgba(45, 212, 160, 0.15); color: var(--success); }
.badge.offline { background: rgba(240, 96, 96, 0.15); color: var(--danger); }

/* Gang rows */
.gang { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; }
.gang + .gang { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.gang-name { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 9px; }
.gang-name .gdot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); transition: 0.2s; }
.gang.on .gang-name .gdot { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.gang-name .editname { cursor: pointer; opacity: 0; font-size: 11px; color: var(--text-faint); }
.gang:hover .editname { opacity: 1; }

/* Toggle switch */
.toggle { width: 48px; height: 28px; border-radius: 999px; background: var(--surface3);
  border: 1px solid var(--border); position: relative; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--text-dim); transition: 0.2s; }
.toggle.on { background: linear-gradient(135deg, var(--primary), #7c5cff); border-color: transparent; }
.toggle.on::after { right: 22px; background: #fff; }
.toggle.busy { opacity: 0.5; pointer-events: none; }

/* Tabs / bottom nav */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(12, 15, 22, 0.92); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border); display: flex; justify-content: center;
}
.nav-inner { display: flex; width: 100%; max-width: 480px; }
.nav button {
  flex: 1; background: none; border: none; color: var(--text-faint);
  padding: 12px 6px 14px; cursor: pointer; font-family: inherit; font-size: 11px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: 0.15s;
}
.nav button .ic { font-size: 21px; }
.nav button.active { color: var(--primary); }

/* Sections */
.section { display: none; }
.section.active { display: block; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.section-head h2 { font-size: 17px; font-weight: 700; }

/* Generic button */
.btn {
  background: linear-gradient(135deg, var(--primary), #7c5cff); color: #fff; border: none;
  padding: 10px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
.btn.sm { padding: 7px 12px; font-size: 12px; }

/* Scene / automation list items */
.item {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.item-info { display: flex; align-items: center; gap: 13px; }
.item-info .emoji { font-size: 26px; }
.item-info h4 { font-size: 15px; font-weight: 700; }
.item-info .meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.item-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn { background: var(--surface3); border: 1px solid var(--border); color: var(--text-dim);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px; transition: 0.15s; }
.icon-btn:hover { color: var(--text); border-color: var(--primary); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

.empty { text-align: center; padding: 50px 20px; color: var(--text-faint); }
.empty .big { font-size: 44px; margin-bottom: 12px; opacity: 0.6; }
.empty p { font-size: 14px; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-bg.show { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex;
  align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--surface); }
.modal-head h3 { font-size: 17px; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-foot { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.modal-foot .btn { flex: 1; justify-content: center; }

label.field { display: block; margin-bottom: 16px; }
label.field span { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 7px; font-weight: 600; }
input, select {
  width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 13px; border-radius: var(--radius-xs); font-family: inherit; font-size: 14px;
}
input:focus, select:focus { outline: none; border-color: var(--primary); }

.days { display: flex; gap: 6px; flex-wrap: wrap; }
.day {
  flex: 1; min-width: 38px; text-align: center; padding: 9px 4px; border-radius: var(--radius-xs);
  background: var(--surface2); border: 1px solid var(--border); cursor: pointer; font-size: 12px; transition: 0.15s;
}
.day.on { background: linear-gradient(135deg, var(--primary), #7c5cff); border-color: transparent; color: #fff; }

/* Tri-state gang picker (scene builder) */
.gangpick { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.gangpick .name { font-size: 13px; }
.tri { display: flex; gap: 4px; }
.tri button { background: var(--surface2); border: 1px solid var(--border); color: var(--text-faint);
  padding: 5px 11px; border-radius: var(--radius-xs); font-family: inherit; font-size: 12px; cursor: pointer; }
.tri button.on { background: rgba(45,212,160,0.18); color: var(--success); border-color: var(--success); }
.tri button.off { background: rgba(240,96,96,0.15); color: var(--danger); border-color: var(--danger); }

.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface3); border: 1px solid var(--border); color: var(--text); padding: 12px 20px;
  border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: 0.25s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.note { background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.3); color: var(--warning);
  padding: 12px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.6; margin-top: 8px; }

/* ---- Icons ---- */
svg { vertical-align: middle; }
.logo { color: #fff; }
.logo svg, .card-title .ic svg { display: block; }
.nav button .ic { display: grid; place-items: center; }
.icon-btn { display: inline-grid; place-items: center; }
.item .emoji { color: var(--primary); display: flex; align-items: center; }
.item .emoji.dim { color: var(--text-faint); }
.empty .big { display: flex; justify-content: center; color: var(--text-faint); }
.editname svg { display: block; }

/* ---- Scene icon picker ---- */
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.iconopt { width: 42px; height: 42px; border-radius: 12px; background: var(--surface2);
  border: 1px solid var(--border); color: var(--text-dim); display: grid; place-items: center;
  cursor: pointer; transition: 0.15s; }
.iconopt:hover { color: var(--text); border-color: var(--primary); }
.iconopt.on { background: linear-gradient(135deg, var(--primary), #7c5cff); color: #fff; border-color: transparent; }

/* ---- TV remote pad ---- */
.remote { display: flex; flex-direction: column; gap: 16px; align-items: center; padding-top: 6px; }
.remote-loading { color: var(--text-faint); padding: 20px; }
.remote-row { display: flex; gap: 14px; }
.rbtn { width: 46px; height: 46px; border-radius: 50%; background: var(--surface3);
  border: 1px solid var(--border); color: var(--text); display: grid; place-items: center;
  cursor: pointer; transition: transform 0.1s, border-color 0.15s, color 0.15s; }
.rbtn:hover { border-color: var(--primary); color: var(--primary); }
.rbtn:active { transform: scale(0.9); }
.rbtn.busy { opacity: 0.45; pointer-events: none; }
.rbtn.power { color: var(--danger); }
.rbtn.power:hover { border-color: var(--danger); background: rgba(240, 96, 96, 0.12); }
.rbtn.ghost { visibility: hidden; }
.dpad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px);
  gap: 6px; place-items: center; background: var(--surface2); border-radius: 50%; padding: 10px;
  direction: ltr; /* keep arrows spatially correct regardless of page RTL */ }
.dpad .up { grid-area: 1 / 2; } .dpad .left { grid-area: 2 / 1; } .dpad .ok { grid-area: 2 / 2; }
.dpad .right { grid-area: 2 / 3; } .dpad .down { grid-area: 3 / 2; }
.dpad .ok { background: linear-gradient(135deg, var(--primary), #7c5cff); color: #fff; border: none; }
.dpad .ok:hover { color: #fff; }
.remote-grid { display: flex; gap: 28px; }
.rgroup { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.rlabel { font-size: 11px; color: var(--text-faint); }
.rstack { display: flex; flex-direction: column; gap: 9px; }

/* ---- Clickable TV card ---- */
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--primary); }
.card-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px;
  padding: 11px; border-radius: var(--radius-sm); background: var(--surface3); color: var(--text-dim);
  font-size: 13px; font-weight: 600; transition: color 0.15s; }
.card.clickable:hover .card-cta { color: var(--primary); }

.tv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 5px;
  background: var(--text-faint); vertical-align: middle; }
.tv-dot.on { background: var(--success); box-shadow: 0 0 7px var(--success); }

/* ---- TV modal ---- */
.tv-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tv-meta-sub { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.seg { display: flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; }
.seg button { flex: 1; background: none; border: none; color: var(--text-dim); font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 9px; border-radius: var(--radius-xs); cursor: pointer; transition: 0.15s; }
.seg button.active { background: linear-gradient(135deg, var(--primary), #7c5cff); color: #fff; }

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 240px; margin: 0 auto; }
.rbtn.sq { width: auto; height: 54px; border-radius: var(--radius-sm); font-family: var(--font-nums, inherit);
  font-size: 20px; font-weight: 600; }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 14px; border-radius: 999px; font-family: inherit; font-size: 13px; cursor: pointer; transition: 0.15s; }
.chip:hover { border-color: var(--primary); }
.chip.busy { opacity: 0.45; pointer-events: none; }

/* ---- webOS smart TV panel ---- */
.tv-power-row { display: flex; gap: 10px; margin-bottom: 16px; }
.tv-power-row .btn { flex: 1; justify-content: center; }
.btn.tv-off:hover { border-color: var(--danger); color: var(--danger); }
.tv-vol { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tv-vol-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tv-vol-val { font-family: var(--font-nums, inherit); font-size: 30px; font-weight: 700; }
.rbtn.mute { width: 40px; height: 40px; }
.tv-lbl { margin: 16px 0 8px; }
#tvPanelSmart .dpad { margin: 18px auto 4px; }
.tv-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.tv-nav .chip { display: inline-flex; align-items: center; gap: 6px; }
.tv-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-app { flex: 1 1 auto; min-width: 90px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.15s; }
.tv-app:hover { border-color: var(--primary); color: var(--primary); }
.tv-app.busy { opacity: 0.5; }
.tv-kb { display: flex; gap: 8px; }
.tv-kb input { flex: 1; }
.tv-kb .btn { white-space: nowrap; }
.tv-kb-actions { display: flex; gap: 8px; margin-top: 10px; }
.tv-kb-actions .btn { flex: 1; justify-content: center; }

/* ---- On-screen keyboard ---- */
.kb-hint { font-size: 12px; color: var(--text-dim); line-height: 1.7; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; }
.kb-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kb-bar .btn { white-space: nowrap; }
.kb-preview { flex: 1; min-height: 38px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 9px 12px; font-family: var(--font-nums, monospace); font-size: 16px;
  letter-spacing: 2px; direction: ltr; text-align: left; color: var(--text); overflow-x: auto; white-space: nowrap; }
#kbReset.warn { border-color: var(--warning); color: var(--warning); }
.kb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; direction: ltr; }
.kb-key { aspect-ratio: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-xs); font-family: var(--font-nums, inherit); font-size: 18px; font-weight: 600;
  cursor: pointer; transition: 0.12s; }
.kb-key:hover { border-color: var(--primary); color: var(--primary); }
.kb-key:active { transform: scale(0.9); background: var(--surface3); }
.kb-manual { margin-top: 18px; text-align: center; }
.kb-manual-pad { display: flex; justify-content: center; gap: 8px; margin: 10px 0; }
.kb-warn { font-size: 11px; color: var(--warning); }

/* ---- Laundry (ThinQ) card ---- */
.laundry-remain { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.laundry-remain svg { color: var(--primary); }
.laundry-remain .lr-val { font-family: var(--font-nums, inherit); font-size: 30px; font-weight: 700; color: var(--text); }
.laundry-remain .lr-lbl { font-size: 12px; color: var(--text-dim); }
.laundry-idle { margin-top: 10px; font-size: 14px; color: var(--text-dim); }
.laundry-idle.done { color: var(--success); font-weight: 700; }

/* ---- Smart plug card ---- */
.plug-stats { display: flex; gap: 10px; margin-top: 6px; }
.plug-stat { flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; }
.plug-stat .pv { font-family: var(--font-nums, inherit); font-size: 24px; font-weight: 700; color: var(--text); }
.plug-stat .pl { display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px; }

/* ---- Gree AC card ---- */
.ac-body.off { opacity: 0.5; }
.ac-temp { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.ac-temp-val { font-family: var(--font-nums, inherit); font-size: 44px; font-weight: 700; color: var(--text); line-height: 1; }
.ac-temp-val span { font-size: 22px; color: var(--text-dim); }
.ac-step { width: 48px; height: 48px; border-radius: 50%; background: var(--surface3);
  border: 1px solid var(--border); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: 0.15s; }
.ac-step:hover { border-color: var(--primary); color: var(--primary); }
.ac-step:active { transform: scale(0.92); }
.ac-modes { display: flex; gap: 8px; margin-bottom: 14px; }
.ac-mode { flex: 1; height: 42px; border-radius: var(--radius-xs); background: var(--surface2);
  border: 1px solid var(--border); color: var(--text-dim); display: grid; place-items: center; cursor: pointer; transition: 0.15s; }
.ac-mode:hover { color: var(--text); border-color: var(--primary); }
.ac-mode.on { background: linear-gradient(135deg, var(--primary), #7c5cff); color: #fff; border-color: transparent; }
.ac-fan .rlabel { display: block; margin-bottom: 7px; }
.ac-fan-row { display: flex; flex-wrap: nowrap; gap: 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ac-fan-row::-webkit-scrollbar { display: none; }
.ac-fan-btn { flex: 0 0 auto; padding: 8px 9px; border-radius: var(--radius-xs); background: var(--surface2);
  border: 1px solid var(--border); color: var(--text-dim); font-family: var(--font-nums, inherit); font-size: 12.5px; cursor: pointer; transition: 0.15s; white-space: nowrap; }
.ac-fan-btn:hover { color: var(--text); }
.ac-fan-btn.on { background: var(--surface3); color: var(--text); border-color: var(--primary); }
.ac-features { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ac-feat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.15s; }
.ac-feat:hover { color: var(--text); border-color: var(--primary); }
.ac-feat.on { background: rgba(91, 141, 238, 0.16); color: var(--primary); border-color: var(--primary); }
.ac-feat svg { width: 15px; height: 15px; }
.card-title .editname { cursor: pointer; color: var(--text-faint); opacity: 0; transition: 0.15s; }
.ac-card:hover .card-title .editname { opacity: 0.7; }
.card-title .editname:hover { opacity: 1; color: var(--text); }

.skeleton { background: linear-gradient(90deg, var(--surface2), var(--surface3), var(--surface2));
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); height: 160px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }