:root {
  color-scheme: dark;
  --bg: #070b14;
  --panel: rgba(15, 23, 40, .86);
  --panel-strong: #111b2d;
  --line: rgba(154, 178, 215, .16);
  --text: #f3f7ff;
  --muted: #8f9db4;
  --cyan: #46e0d2;
  --blue: #5a8dff;
  --violet: #9a72ff;
  --red: #ff657a;
  --radius: 22px;
  font-family: Inter, "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 1020px;
  min-height: 100vh;
  overflow-x: auto;
  color: var(--text);
  background:
    radial-gradient(circle at 45% -10%, #1b2d52 0, transparent 40%),
    linear-gradient(145deg, #090e19, #050810 72%);
}
button, select, input { font: inherit; }
button { color: inherit; }
.ambient {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .1;
  pointer-events: none;
}
.ambient-a { background: var(--cyan); left: -180px; top: 25%; }
.ambient-b { background: var(--violet); right: -160px; bottom: -120px; }
.shell { width: min(1500px, calc(100% - 48px)); margin: 24px auto; }
.topbar, .actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: rgba(10, 16, 28, .82);
  backdrop-filter: blur(18px);
}
.topbar { border-radius: var(--radius) var(--radius) 0 0; }
.brand, .connection, .system-actions, .save-actions { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(70, 224, 210, .45);
  border-radius: 14px;
  color: var(--cyan);
  background: rgba(70, 224, 210, .08);
  font-weight: 800;
  letter-spacing: -.04em;
}
h1, h2, p { margin: 0; }
h1 { font-size: 19px; letter-spacing: -.02em; }
.brand p, .panel-copy, .controller-hint, #dirtyText { color: var(--muted); }
.brand p { margin-top: 3px; font-size: 12px; }
.connection { color: #cbd5e8; font-size: 13px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #5d687a; box-shadow: 0 0 0 4px rgba(93,104,122,.12); }
.status-dot.connected { background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.workspace {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 710px;
  border: 1px solid var(--line);
  border-top: 0;
  background: rgba(5, 10, 19, .56);
}
.tabs { padding: 28px 16px; border-right: 1px solid var(--line); }
.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 15px 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.tab span { color: #5e6b82; font: 700 10px/1 monospace; }
.tab:hover { color: var(--text); background: rgba(255,255,255,.035); }
.tab.active {
  border-color: rgba(70,224,210,.24);
  color: var(--text);
  background: linear-gradient(90deg, rgba(70,224,210,.12), rgba(90,141,255,.04));
  box-shadow: inset 3px 0 var(--cyan);
}
.tab.active span { color: var(--cyan); }
.content-grid { display: grid; grid-template-columns: minmax(610px, 1.45fr) minmax(350px, .75fr); gap: 18px; padding: 24px; }
.controller-card, .editor-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.controller-card { padding: 24px; }
.editor-card { padding: 28px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.eyebrow { margin-bottom: 8px; color: var(--cyan); font: 700 10px/1.2 monospace; letter-spacing: .15em; }
h2 { font-size: 23px; letter-spacing: -.035em; }
.selection-badge {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  font-size: 12px;
}
.controller-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  margin: 12px 0 2px;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.controller-stage { position: relative; width: min(100%, 790px); aspect-ratio: 3 / 2; }
.controller-image {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.52));
  pointer-events: none; user-select: none;
}
.pad-button {
  position: absolute; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(154,178,215,.42); border-radius: 11px;
  color: #e5edf9; background: rgba(11,18,32,.56);
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  cursor: pointer; outline: none; transition: .18s ease;
  backdrop-filter: blur(3px);
}
.pad-button span { pointer-events: none; font-size: 13px; font-weight: 850; text-shadow: 0 1px 4px #020712; }
.pad-button.round { border-radius: 50%; }
.pad-button.stick { width: 53px; height: 53px; border-style: dashed; }
.pad-button.dpad { width: 36px; height: 36px; border-radius: 9px; }
.pad-button.center { width: 38px; height: 28px; border-radius: 9px; }
.pad-button.shoulder { width: 76px; height: 29px; border-radius: 12px; }
.pad-button:hover, .pad-button:focus-visible, .pad-button.selected {
  color: white; border-color: var(--cyan); background: rgba(18,72,76,.78);
  box-shadow: 0 0 0 3px rgba(70,224,210,.14), 0 0 18px rgba(70,224,210,.65);
}
.pad-button.rapid {
  color: white; border-color: var(--violet); background: rgba(58,44,101,.82);
  box-shadow: 0 0 0 3px rgba(154,114,255,.14), 0 0 18px rgba(154,114,255,.7);
}
.pad-button.macro-trigger {
  color: white; border-color: #ffc360; background: rgba(73,52,20,.84);
  box-shadow: 0 0 0 3px rgba(255,195,96,.13), 0 0 18px rgba(255,195,96,.65);
}
.pad-button.macro-held {
  color: white; border-color: #7ce7a5; background: rgba(28,87,56,.84);
  box-shadow: 0 0 0 3px rgba(124,231,165,.13), 0 0 18px rgba(124,231,165,.62);
}
.pad-button.hotkey {
  color: white; border-color: #ff8fd8; background: rgba(91,35,77,.84);
  box-shadow: 0 0 0 3px rgba(255,143,216,.13), 0 0 18px rgba(255,143,216,.62);
}
.zl { left: 29%; top: 5%; } .zr { left: 71%; top: 5%; }
.l { left: 33%; top: 11%; } .r { left: 67%; top: 11%; }
.face-x { left: 72.3%; top: 22.6%; } .face-a { left: 78.4%; top: 30.9%; }
.face-b { left: 72.5%; top: 38.5%; } .face-y { left: 66.1%; top: 30.9%; }
.dpad-up { left: 36.4%; top: 41.8%; } .dpad-right { left: 40.5%; top: 47.8%; }
.dpad-down { left: 36.4%; top: 53.8%; } .dpad-left { left: 32.4%; top: 47.8%; }
.l3 { left: 27%; top: 30.8%; } .r3 { left: 61.3%; top: 48.5%; }
.minus { left: 39.2%; top: 22.4%; } .plus { left: 60.4%; top: 22.4%; }
.home { left: 56.1%; top: 30.9%; } .capture { left: 43.2%; top: 30.9%; width: 50px; }
.controller-hint { text-align: center; font-size: 13px; }
.panel { display: none; height: 100%; }
.panel.active { display: flex; flex-direction: column; }
.panel-copy { margin: 10px 0 26px; font-size: 13px; line-height: 1.65; }
.field-card {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding: 15px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255,255,255,.025);
}
.field-card label, .field-label, .metric label { color: var(--muted); font-size: 12px; }
.field-label { display: block; margin: 13px 0 8px; }
select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); background: #111b2d; outline: none;
}
select:focus { border-color: var(--cyan); }
.mapping-list { margin-top: 22px; max-height: 365px; overflow: auto; }
.mapping-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid rgba(154,178,215,.09); font-size: 12px;
}
.mapping-row span:last-child { color: var(--cyan); text-align: right; }
.mapping-row i { color: #4f5c72; font-style: normal; }
.metric { margin-bottom: 22px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.metric > div { display: flex; justify-content: space-between; margin-bottom: 14px; }
.metric strong { color: var(--cyan); font-family: monospace; }
input[type=range] { width: 100%; accent-color: var(--cyan); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.chips.empty { color: var(--muted); font-size: 12px; }
.chip { padding: 8px 10px; border: 1px solid rgba(154,114,255,.35); border-radius: 9px; color: #d8caff; background: rgba(154,114,255,.1); font-size: 12px; }
.macro-slots { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.macro-slot { padding: 10px 5px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.macro-slot.active { color: #ffd997; border-color: rgba(255,195,96,.55); background: rgba(255,195,96,.08); }
.macro-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 12px; }
.hold-mode {
  display: flex; align-items: center; gap: 9px; margin: 4px 0 14px;
  color: #c7f7d9; font-size: 12px; cursor: pointer;
}
.hold-mode input { width: 16px; height: 16px; accent-color: var(--cyan); }
.macro-count {
  display: flex; justify-content: space-between; align-items: center;
  margin: 15px 0 8px; color: var(--muted); font-size: 12px;
}
.macro-count strong { color: #ffd997; font-family: monospace; }
.toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; cursor: pointer; }
.toggle input { display: none; }
.toggle span { width: 30px; height: 17px; border-radius: 10px; background: #28334a; position: relative; }
.toggle span::after { content:""; position:absolute; width:11px; height:11px; left:3px; top:3px; border-radius:50%; background:#8794aa; transition:.18s; }
.toggle input:checked + span { background: rgba(70,224,210,.4); }
.toggle input:checked + span::after { transform: translateX(13px); background: var(--cyan); }
.macro-steps { display: flex; flex-direction: column; gap: 8px; max-height: 290px; overflow: auto; }
.macro-step { display: grid; grid-template-columns: 25px 1fr 96px 32px; gap: 7px; align-items: center; }
.macro-step > span { color: #66758c; font: 700 11px monospace; }
.macro-step input { width: 100%; padding: 11px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background:#111b2d; }
.macro-step .remove { height: 36px; border: 0; border-radius: 9px; background: rgba(255,101,122,.1); color: var(--red); cursor:pointer; }
.step-state {
  min-height: 38px; display: flex; align-items: center; padding: 8px 10px;
  border: 1px solid rgba(124,231,165,.25); border-radius: 10px;
  color: #c7f7d9; background: rgba(48,133,81,.08); font-size: 12px;
}
.step-state.sleep { color: #9eabc0; border-color: var(--line); background: #111b2d; }
.step-duration-static {
  color: #66758c; text-align: center; font: 700 11px monospace;
}
.macro-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.macro-chip { border-color: rgba(255,195,96,.35); color: #ffe2ad; background: rgba(255,195,96,.08); }
#editMacroTrigger.active { border-style: solid; color: #07100b; background: #ffc360; }
.hotkey-slots {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px;
  margin-bottom: 12px;
}
.hotkey-slot {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; color: var(--muted); background: transparent;
  text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
  font-size: 11px;
}
.hotkey-slot span { flex: 0 0 auto; color: #65738a; font: 700 10px monospace; }
.hotkey-slot.active {
  color: #ffd9f2; border-color: rgba(255,143,216,.5); background: rgba(255,143,216,.08);
}
.hotkey-slot.active span { color: #ff8fd8; }
.hotkey-chip { border-color: rgba(255,143,216,.35); color: #ffd9f2; background: rgba(255,143,216,.09); }
.hotkey-options {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 18px;
}
.hotkey-note {
  margin-top: 16px; padding: 12px; border: 1px solid var(--line);
  border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.02);
  font-size: 11px; line-height: 1.55;
}
.button { border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px; background: rgba(255,255,255,.04); cursor: pointer; transition: .18s ease; }
.button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.28); }
.button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.button.primary { border-color: rgba(70,224,210,.45); color: #05110f; background: linear-gradient(135deg, #63efe2, #56bfe9); font-weight: 800; }
.button.danger { color: #ffdbe0; border-color: rgba(255,101,122,.35); background: rgba(255,101,122,.09); }
.button.ghost { color: #b5c0d2; background: transparent; }
.button.outline { color: var(--cyan); border-style: dashed; background: rgba(70,224,210,.035); }
.button.full { width: 100%; margin-top: 10px; }
.button.large { padding: 13px 22px; }
.small-button { padding: 7px 9px; font-size: 11px; }
.actionbar { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
#dirtyText { font-size: 12px; }
.toast {
  position: fixed; right: 28px; bottom: 28px; max-width: 420px;
  padding: 14px 18px; border: 1px solid rgba(70,224,210,.35); border-radius: 13px;
  color: #dffefa; background: rgba(12,29,36,.95); box-shadow: 0 18px 55px rgba(0,0,0,.42);
  opacity: 0; transform: translateY(12px); pointer-events:none; transition:.22s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255,101,122,.45); color:#ffdce1; background:rgba(46,16,25,.96); }

@media (max-width: 1180px) {
  .content-grid { grid-template-columns: minmax(550px, 1fr) 350px; }
  .controller-wrap { min-height: 460px; }
}