/* Compact device-token surfaces and touch-specific refinements. */
.device-create {
  max-width: 720px;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: rgba(3, 15, 31, .45);
}
.device-create .field { max-width: 540px; }
.secret-output {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(64, 238, 162, .30);
  border-radius: 16px;
  background: rgba(64, 238, 162, .07);
}
.secret-output strong { color: var(--green); }
.secret-output span { color: var(--mist); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.secret-output code {
  display: block;
  max-width: 100%;
  overflow: auto;
  padding: 11px;
  border-radius: 10px;
  background: #020a16;
  color: var(--cyan);
  user-select: all;
}
.secret-output .btn { justify-self: start; }

@media (max-width: 420px) {
  .workspace { padding-inline: 10px; }
  .content { padding-top: 14px; }
  .card, .sonar-card { padding: 16px; }
  .dashboard-hero { min-height: 0; padding: 21px 17px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-visual { padding: 4px 18px; }
  .command-console { padding: 11px; }
  .command-buttons .btn { flex-basis: 120px; }
  .telegram-card { padding: 0; }
  .telegram-hero, .telegram-layout { padding: 17px; }
  .metric { min-height: 116px; padding: 14px; }
  .metric-label { font-size: 9.5px; }
  .bottom-nav button { min-height: 59px; font-size: 8.5px; }
  .bottom-nav .nav-icon { font-size: 16px; }
  .page-head { margin-bottom: 18px; }
  .btn { padding-inline: 13px; }
}

@media (max-height: 700px) and (min-width: 860px) {
  .desktop-sidebar { padding-block: 10px; }
  .sidebar-panel { gap: 10px; }
  .side-nav-list { gap: 3px; }
  .side-nav button { min-height: 42px; }
}