:root {
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color: #17202b;
  background: #f3f5f8;
  line-height: 1.45;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; }
body { margin: 0; overflow-x: hidden; }

.shell {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 24px;
}

.login-card {
  width: min(420px, 100%);
  margin: 10vh auto;
  padding: 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 60px #20304018;
}

.brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  font-size: 29px;
  font-weight: 700;
  background: #275df5;
  border-radius: 18px;
}

.login-card h1 { margin-bottom: 4px; }
.login-card p, .section-heading p { margin-top: 0; color: #687386; }
.muted { margin-top: -6px; color: #687386; }
.stack { display: grid; gap: 16px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 18px 0; padding: 5px; background: #e9eef6; border-radius: 12px; }
.auth-tabs button { color: #59677b; background: transparent; border: 0; }
.auth-tabs button.active { color: #173caa; background: #fff; box-shadow: 0 2px 8px #23334d12; }

.stack label, .form-grid label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #4c596c;
  font-size: 14px;
}

input, select, button {
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  border: 1px solid #cfd6e0;
  border-radius: 10px;
}

input, select { width: 100%; }
button {
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  background: #275df5;
  border-color: #275df5;
}
button:hover { filter: brightness(.96); }
button:disabled { cursor: default; opacity: .6; }
button.ghost { color: #334054; background: #fff; border-color: #d7dde6; }
button.danger { background: #b42318; border-color: #b42318; }
button.small { min-height: 34px; padding: 6px 9px; font-size: 13px; }
.error { margin-top: 14px; color: #b42318; }

.topbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.topbar h1 { margin: 0; }
.topbar span { color: #687386; font-size: 13px; overflow-wrap: anywhere; }
.topbar-actions { display: flex; flex: 0 0 auto; gap: 8px; }
hr { width: 100%; border: 0; border-top: 1px solid #e4e8ef; }

.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  margin-bottom: 20px;
  background: #e6eaf0;
  border-radius: 14px;
}
.tabs button { color: #49566a; background: transparent; border: 0; }
.tabs button.active {
  color: #173caa;
  background: #fff;
  box-shadow: 0 2px 8px #23334d12;
}

.tab-panel { display: grid; gap: 18px; }
.section-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.section-heading > div { min-width: 0; }
.section-heading h2, .card h2 { margin: 0 0 12px; }

.card, .device-card {
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 16px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}
.device-card h3 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.status {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: #5c6675;
  font-size: 12px;
  background: #eceff4;
  border-radius: 999px;
}
.status.online { color: #137333; background: #dff7e8; }
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  color: #566275;
  font-size: 14px;
}
.metrics strong { display: block; color: #17202b; overflow-wrap: anywhere; }

.pair-code {
  padding: 20px;
  color: #17202b;
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 8px;
  background: #f2f6ff;
  border: 2px dashed #7f9df5;
  border-radius: 16px;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.inline-form { display: flex; gap: 8px; }
.inline-form label { display: grid; gap: 6px; color: #4c596c; font-size: 14px; }
.inline-form input { flex: 1; }
.compact-list { display: grid; gap: 8px; margin-top: 14px; }
.compact-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f4;
}
.compact-row > span:last-child { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.form-actions { display: flex; gap: 8px; align-items: end; }
.form-actions button { flex: 1; }

.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 10px;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #edf0f4;
}
th { color: #667286; font-weight: 600; }
.row-actions { white-space: normal; }
.row-actions button { margin: 2px 2px 2px 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  padding: 2px 7px;
  color: #234eaf;
  font-size: 12px;
  background: #e8efff;
  border-radius: 999px;
}
.tag.empty { color: #6c7584; background: #f0f2f5; }

.plan-list { display: grid; gap: 14px; }
.plan-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.plan-card:hover { border-color: #aebee4; box-shadow: 0 4px 18px #23334d12; }
.plan-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.plan-head > div:first-child { min-width: 0; }
.plan-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.plan-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; color: #657185; font-size: 13px; }
.plan-meta span { overflow-wrap: anywhere; }
.plan-state { padding: 2px 8px; font-weight: 700; border-radius: 999px; }
.plan-state.state-enabled { color: #137333; background: #dff7e8; }
.plan-state.state-completed { color: #174ea6; background: #dbe9ff; }
.plan-state.state-canceled { color: #8a3b12; background: #ffeadc; }
.plan-state.state-draft { color: #5d6674; background: #edf0f4; }
.plan-items { max-height: 420px; margin-top: 14px; overflow: auto; }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  color: #fff;
  background: #17202b;
  border-radius: 12px;
  box-shadow: 0 8px 30px #0003;
}
progress { width: 100%; }

dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 22px;
  overflow: auto;
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 22px 80px #0005;
}
dialog.wide-dialog { width: min(980px, calc(100% - 24px)); }
dialog::backdrop { background: #17202b88; }
dialog h2 { margin: 0 0 10px; }
.check-list {
  display: grid;
  max-height: 360px;
  gap: 7px;
  padding: 8px;
  overflow: auto;
  border: 1px solid #e0e5ec;
  border-radius: 12px;
}
.check-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; }
.check-row:hover { background: #f3f6fa; }
.check-row input { width: 18px; height: 18px; }
.confirm-option { align-items: flex-start; background: #f3f7ff; border: 1px solid #d7e2f2; }
.confirm-option small { color: #687386; font-weight: 400; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

@media (max-width: 960px) {
  .two-column { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-head { align-items: flex-start; flex-direction: column; }
  .plan-actions { width: 100%; }
  .plan-actions button { flex: 1; }
}

@media (max-width: 640px) {
  .shell { padding: 10px; }
  .login-card { margin: 4vh auto; padding: 22px 18px; border-radius: 16px; }
  .topbar { align-items: flex-start; }
  .topbar h1 { font-size: 22px; }
  .topbar .ghost { flex: 0 0 auto; }
  .topbar-actions { flex-direction: column; }

  .tabs { position: sticky; top: 4px; z-index: 10; gap: 4px; padding: 4px; margin-bottom: 14px; }
  .tabs button { min-height: 42px; padding: 8px 4px; font-size: 13px; }

  .tab-panel { gap: 12px; }
  .section-heading { align-items: stretch; flex-direction: column; gap: 8px; }
  .section-heading button { width: 100%; min-height: 44px; }
  .section-heading h2 { margin-bottom: 6px; font-size: 21px; }

  .card, .device-card { padding: 14px; border-radius: 14px; }
  .card h2 { font-size: 20px; }
  .device-card h3 { font-size: 17px; }
  .metrics { grid-template-columns: 1fr; }
  .pair-code { padding: 16px 8px; font-size: 28px; letter-spacing: 5px; }

  .inline-form { align-items: stretch; flex-direction: column; }
  .inline-form button { min-height: 44px; }
  .compact-row { align-items: stretch; flex-direction: column; }
  .compact-row > span:last-child { display: grid; grid-template-columns: repeat(3, 1fr); }

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

  .table-wrap { overflow: visible; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .responsive-table tr {
    padding: 5px;
    margin-bottom: 10px;
    background: #fbfcff;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
  }
  .responsive-table td {
    display: grid;
    grid-template-columns: minmax(72px, 30%) minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
    overflow-wrap: anywhere;
    white-space: normal;
    border: 0;
  }
  .responsive-table td::before { color: #687386; font-weight: 600; content: attr(data-label); }
  .responsive-table td.row-actions { display: block; padding-top: 10px; border-top: 1px solid #edf0f4; }
  .responsive-table td.row-actions::before { display: block; margin-bottom: 6px; }

  .plan-list { gap: 10px; }
  .plan-card { padding: 13px; }
  .plan-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
  .plan-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .plan-actions button { width: 100%; }
  .plan-items { max-height: 55vh; max-height: 55dvh; }

  dialog, dialog.wide-dialog {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 16px 14px;
    border-radius: 15px;
  }
  .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog-actions button { min-height: 42px; }
  .check-list { max-height: 48vh; max-height: 48dvh; }

  .toast { right: 10px; bottom: 10px; left: 10px; max-width: none; text-align: center; }
}

@media (max-width: 380px) {
  .form-actions, .dialog-actions { grid-template-columns: 1fr; }
  .plan-meta { grid-template-columns: 1fr; }
  .compact-row > span:last-child { grid-template-columns: 1fr; }
}