:root {
  --bg: #1a1a1d;
  --panel: #232326;
  --text: #ffffff;
  --muted: #ccccd4;
  --line: rgba(255,255,255,.09);
  --red: #d90101;
  --cyan: #08a9dd;
  --green: #18c11c;
  --gray: #85858a;
  --darkbtn: #34343a;
  --discord: #5865f2;
  --rows: 3;
  --cols: 5;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.auth-body,
.config-body,
.deck-body {
  background: linear-gradient(180deg, #202025 0%, #17171a 100%);
}

.auth-wrap,
.page-wrap,
.deck-wrap {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 22px 16px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 26px;
}

.brand-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 28px;
  background: linear-gradient(135deg, #2d2d33, #1f1f24);
  border-radius: 24px;
  border: 1px solid var(--line);
}

.auth-brand h1,
.simple-topbar h1,
.deck-topbar h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 38px);
}

.auth-brand p {
  margin: 0;
  color: var(--muted);
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
}

.auth-card h2,
.config-panel h2 {
  margin: 0 0 16px;
}

.auth-form,
.config-form {
  display: grid;
  gap: 12px;
}

label span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #17171a;
  color: var(--text);
  padding: 0 14px;
}

input:focus,
select:focus {
  outline: none;
  border-color: #aaaaaa;
}

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 14px;
  border: 0;
  font-weight: 800;
  cursor: pointer;
}

.btn-primary { background: var(--green); color: #fff; }
.btn-dark { background: var(--darkbtn); color: #fff; }
.btn-discord { background: var(--discord); color: #fff; margin-top: 10px; }
.btn-disabled { background: #4d4d54; color: #cfcfd5; pointer-events: none; }
.full { width: 100%; }

.simple-topbar,
.deck-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.mini-label {
  font-size: 11px;
  letter-spacing: .18em;
  color: #9f9fa9;
  font-weight: 900;
  margin-bottom: 5px;
}

.top-actions,
.top-right-pack {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mini-link {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--darkbtn);
  font-weight: 800;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2a2a31;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #83838a;
}

.status-dot.on {
  background: #14d814;
  box-shadow: 0 0 10px rgba(20,216,20,.65);
}

.status-dot.warn {
  background: #ffb100;
  box-shadow: 0 0 10px rgba(255,177,0,.55);
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.checkbox-line input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--green);
}

.checkbox-line span { margin: 0; }

.actions-line,
.layout-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.layout-settings > label {
  flex: 1 1 160px;
}

.message-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #2c2c32;
  color: #e9e9ef;
  border: 1px solid var(--line);
  font-size: 13px;
}

.message-warn {
  background: #4b2f10;
  color: #ffe4b6;
}

.compact-box { margin-top: 14px; }

.mini-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #2b2b31;
  color: #d4d4dd;
  font-size: 13px;
}

.table-wrap {
  width: 100%;
  margin-top: 14px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.config-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #1d1d22;
}

.config-table th,
.config-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
}

.config-table th {
  color: var(--muted);
  font-weight: 900;
}

.config-table input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--green);
}

.config-table input[type="number"],
.config-table input[type="text"] {
  min-height: 34px;
  border-radius: 10px;
}

.deck-page-label {
  margin: 8px 0 12px;
  color: #d7d7dd;
  font-weight: 900;
  font-size: 14px;
}

.deck-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 12px;
  min-height: min(72vh, 650px);
}

.tile {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 78px;
  border: 0;
  border-radius: 18px;
  background: var(--gray);
  color: #fff;
  padding: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  box-shadow: inset 0 -22px 32px rgba(0,0,0,.18);
  overflow: hidden;
}

.tile:hover {
  transform: translateY(-1px);
}

.tile-label {
  font-weight: 900;
  font-size: clamp(10px, 1.8vw, 15px);
  line-height: 1.1;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
  word-break: break-word;
}

.tile-sub {
  margin-top: 5px;
  font-size: clamp(8px, 1.3vw, 11px);
  color: rgba(255,255,255,.88);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,.55);
}

.tile-gray { background: linear-gradient(180deg, #97979d 0%, #7d7d82 100%); }
.tile-green { background: linear-gradient(180deg, #1acf1f 0%, #13ad17 100%); }
.tile-red { background: linear-gradient(180deg, #ee1010 0%, #c90707 100%); }
.tile-cyan { background: linear-gradient(180deg, #18b7ea 0%, #0f95c0 100%); }
.tile-blue { background: linear-gradient(180deg, #3777ff 0%, #2256ce 100%); }
.tile-purple { background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%); }
.tile-active { outline: 3px solid rgba(255,255,255,.50); }

.hidden-status {
  display: none;
}

.app-deck-body {
  height: 100dvh;
  overflow: hidden;
}

.app-deck-body .deck-wrap {
  width: 100%;
  height: 100dvh;
  padding: 8px;
  display: grid;
  grid-template-rows: 1fr;
}

.app-deck-body .deck-topbar,
.app-deck-body #httpsWarning,
.app-deck-body #logBox,
.app-deck-body .deck-page-label {
  display: none !important;
}

.app-deck-body .deck-grid {
  height: calc(100dvh - 16px);
  min-height: 0;
  gap: clamp(6px, 1.5vw, 12px);
}

.app-deck-body .tile {
  border-radius: clamp(10px, 2.8vw, 18px);
  min-height: 0;
}

.app-exit-btn {
  position: fixed;
  z-index: 50;
  top: 8px;
  right: 8px;
  min-width: 58px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,15,18,.78);
  color: white;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
}

.app-config-body .page-wrap {
  padding: 14px;
}

@media (max-width: 900px) {
  .auth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .simple-topbar,
  .deck-topbar {
    flex-direction: column;
  }

  .top-actions,
  .top-right-pack {
    width: 100%;
  }

  .btn,
  .mini-link,
  .status-badge {
    flex: 1 1 auto;
  }

  .deck-grid {
    gap: 10px;
  }

  .tile {
    border-radius: 16px;
    padding: 9px;
  }
}



/* V5 custom button builder */
.panel { margin-bottom: 16px; }
.panel-title-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.button-builder, .layout-settings, .actions-line, .top-actions, .top-right-pack { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.button-builder > label, .layout-settings > label { flex:1 1 170px; }
.btn-danger { background:#b91c1c; color:#fff; }
input[type="color"] { min-height:46px; padding:3px; }
.config-table input[type="color"] { min-height:34px; width:56px; padding:2px; }
.muted-cell { color:#b8b8c2; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile-inactive { background:linear-gradient(180deg, #97979d 0%, #7d7d82 100%) !important; }