body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 16px;
  color: #0F172A;
  position: relative;
  isolation: isolate;
  --bg-bokeh-a: radial-gradient(900px 620px at 16% 10%, rgba(59, 130, 246, 0.12), transparent 66%);
  --bg-bokeh-b: radial-gradient(820px 560px at 92% 18%, rgba(249, 115, 22, 0.10), transparent 68%);
  --bg-base-top: #F8FAFC;
  --bg-base-bottom: #EEF2F6;
  --bg-accent-a: rgba(30, 58, 138, 0.08);
  --bg-accent-b: rgba(249, 115, 22, 0.06);
  --bg-effect-a: radial-gradient(520px 520px at 84% 16%, rgba(255, 255, 255, 0.18), transparent 62%);
  --bg-effect-b: radial-gradient(420px 420px at 10% 84%, rgba(255, 255, 255, 0.10), transparent 68%);
  background: linear-gradient(180deg, var(--bg-base-top) 0%, var(--bg-base-bottom) 100%);
  transition: background 700ms ease;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  transition: opacity 700ms ease;
}

body::before {
  inset: -8% -18% 46% -18%;
  background:
    radial-gradient(1100px 300px at 12% 16%, rgba(255, 255, 255, 0.16), transparent 68%),
    radial-gradient(820px 240px at 36% 6%, rgba(248, 250, 252, 0.14), transparent 72%),
    radial-gradient(980px 320px at 66% 14%, rgba(226, 232, 240, 0.16), transparent 70%),
    radial-gradient(760px 220px at 90% 18%, rgba(241, 245, 249, 0.12), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(241, 245, 249, 0.06) 42%, transparent 100%);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.82) 48%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.82) 48%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  animation: cloudDrift 32s ease-in-out infinite;
  will-change: transform, opacity;
}

body::after {
  inset: -18%;
  background:
    var(--bg-bokeh-a),
    var(--bg-bokeh-b),
    var(--bg-effect-a),
    var(--bg-effect-b),
    radial-gradient(1200px 800px at 18% -12%, var(--bg-accent-a), transparent 60%),
    radial-gradient(900px 700px at 112% 18%, var(--bg-accent-b), transparent 55%),
    radial-gradient(960px 420px at 52% 92%, rgba(241, 245, 249, 0.10), transparent 76%);
  opacity: 1;
  animation: ambientLayerDrift 54s ease-in-out infinite;
  will-change: transform, opacity;
}

body.scene-day {
  --bg-bokeh-a: radial-gradient(900px 620px at 18% 12%, rgba(59, 130, 246, 0.14), transparent 66%);
  --bg-bokeh-b: radial-gradient(820px 560px at 92% 16%, rgba(249, 115, 22, 0.11), transparent 68%);
  --bg-base-top: #F8FAFF;
  --bg-base-bottom: #EEF2F8;
  --bg-accent-a: rgba(59, 130, 246, 0.10);
  --bg-accent-b: rgba(249, 115, 22, 0.06);
  --bg-effect-a: radial-gradient(540px 540px at 84% 14%, rgba(255, 255, 255, 0.22), transparent 58%);
  --bg-effect-b: radial-gradient(420px 420px at 14% 82%, rgba(191, 219, 254, 0.18), transparent 68%);
}

body.scene-night {
  --bg-bokeh-a: radial-gradient(900px 620px at 18% 12%, rgba(15, 23, 42, 0.08), transparent 68%);
  --bg-bokeh-b: radial-gradient(820px 560px at 92% 16%, rgba(251, 191, 36, 0.08), transparent 70%);
  --bg-base-top: #EEF0F6;
  --bg-base-bottom: #E2E7F0;
  --bg-accent-a: rgba(15, 23, 42, 0.10);
  --bg-accent-b: rgba(251, 191, 36, 0.06);
  --bg-effect-a: radial-gradient(520px 520px at 86% 18%, rgba(248, 250, 252, 0.14), transparent 62%);
  --bg-effect-b: radial-gradient(420px 420px at 12% 82%, rgba(251, 191, 36, 0.08), transparent 70%);
}

body.scene-rain {
  --bg-bokeh-a: radial-gradient(900px 620px at 18% 12%, rgba(2, 132, 199, 0.12), transparent 68%);
  --bg-bokeh-b: radial-gradient(820px 560px at 92% 16%, rgba(148, 163, 184, 0.12), transparent 70%);
  --bg-base-top: #F3F6FA;
  --bg-base-bottom: #E8EEF5;
  --bg-accent-a: rgba(2, 132, 199, 0.10);
  --bg-accent-b: rgba(148, 163, 184, 0.08);
  --bg-effect-a: radial-gradient(560px 360px at 84% 14%, rgba(255, 255, 255, 0.16), transparent 68%);
  --bg-effect-b: radial-gradient(520px 340px at 12% 86%, rgba(226, 232, 240, 0.14), transparent 72%);
}
  --bg-bokeh-a: radial-gradient(900px 620px at 18% 12%, rgba(30, 41, 59, 0.12), transparent 70%);
  --bg-bokeh-b: radial-gradient(820px 560px at 92% 16%, rgba(148, 163, 184, 0.12), transparent 72%);
  --bg-bokeh-a: radial-gradient(900px 620px at 18% 12%, rgba(30, 41, 59, 0.14), transparent 70%);

@media (min-width: 992px) {
  body {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  body::before,
  body::after,
  body.scene-rain::before,
  body.scene-rain::after,
  body.scene-night.scene-rain::before,
  body.scene-night.scene-rain::after {
    animation: none !important;
  }
}
  --bg-base-top: #E9EDF6;
  --bg-base-bottom: #DCE3EF;
  --bg-accent-a: rgba(30, 41, 59, 0.12);
  --bg-accent-b: rgba(148, 163, 184, 0.09);
  --bg-effect-a: radial-gradient(560px 360px at 84% 14%, rgba(248, 250, 252, 0.12), transparent 70%);
  --bg-effect-b: radial-gradient(520px 340px at 12% 86%, rgba(226, 232, 240, 0.10), transparent 74%);
}

body.scene-rain::before {
  background:
    radial-gradient(1240px 340px at 10% 18%, rgba(255, 255, 255, 0.30), transparent 66%),
    radial-gradient(880px 230px at 34% 2%, rgba(248, 250, 252, 0.24), transparent 72%),
    radial-gradient(1120px 320px at 62% 16%, rgba(226, 232, 240, 0.28), transparent 68%),
    radial-gradient(760px 210px at 92% 20%, rgba(241, 245, 249, 0.18), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(241, 245, 249, 0.10) 40%, transparent 100%);
  opacity: 1;
  animation: cloudDriftRain 22s ease-in-out infinite;
}

body.scene-rain::after {
  opacity: 0.82;
  animation: ambientLayerDrift 54s ease-in-out infinite, fogDriftRain 18s ease-in-out infinite;
}

body.scene-night.scene-rain::before {
  background:
    radial-gradient(1240px 340px at 10% 18%, rgba(255, 255, 255, 0.20), transparent 66%),
    radial-gradient(880px 230px at 34% 2%, rgba(248, 250, 252, 0.16), transparent 72%),
    radial-gradient(1120px 320px at 62% 16%, rgba(226, 232, 240, 0.20), transparent 68%),
    radial-gradient(760px 210px at 92% 20%, rgba(241, 245, 249, 0.12), transparent 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(241, 245, 249, 0.06) 40%, transparent 100%);
  background-repeat: no-repeat;
  opacity: 0.96;
  animation: cloudDriftRain 24s ease-in-out infinite;
}

body.scene-night.scene-rain::after {
  background:
    radial-gradient(720px 340px at 14% 16%, rgba(255, 255, 255, 0.12), transparent 72%),
    radial-gradient(900px 380px at 82% 24%, rgba(226, 232, 240, 0.12), transparent 74%),
    radial-gradient(960px 420px at 52% 92%, rgba(241, 245, 249, 0.08), transparent 76%);
  opacity: 0.76;
  animation: ambientLayerDrift 54s ease-in-out infinite, fogDriftRain 20s ease-in-out infinite;
}

@keyframes ambientLayerDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-1.2%, 0.9%, 0) scale(1.04);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes cloudDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-1.5%, 1%, 0) scale(1.03);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes fogDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1.5%, -1%, 0) scale(1.03);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes cloudDriftRain {
  0% {
    transform: translate3d(-1%, 0.5%, 0) scale(1.02);
  }
  50% {
    transform: translate3d(-6%, 2.4%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-1%, 0.5%, 0) scale(1.02);
  }
}

@keyframes fogDriftRain {
  0% {
    transform: translate3d(1%, -0.5%, 0) scale(1.01);
  }
  50% {
    transform: translate3d(4%, -2.5%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(1%, -0.5%, 0) scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  body::before,
  body::after {
    animation: none;
  }
}
    .panel { background: #fff; border: 0; padding: 16px; margin-bottom: 16px; border-radius: 22px; box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08); }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { border: 1px solid #E5E7EB; padding: 8px; text-align: center; }
    th { background-color: #F3F4F6; }
    .shared-label { color: #0d6efd; font-weight: bold; margin-left: 8px; }
    .btn { border-radius: 12px; }
      .btn-fixed-width {
  width: 140px;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center; 
}
   .col-h{height: 10px;}   
   
.alert{border-radius: 10px;}

.form-control,
.form-select {
  border-radius: 14px;
  border-color: rgba(15, 23, 42, 0.10);
  background: #F8FAFC;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.14);
}

.modal-content {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(17, 24, 39, 0.18);
}

.modal-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.modal-footer {
  border-top-color: rgba(15, 23, 42, 0.08);
}

.auth-shell {
  min-height: calc(100dvh - 32px);
  display: grid;
  place-items: center;
  padding: 24px 12px;
}

.auth-body {
  margin: 0;
}

.auth-body .auth-shell {
  min-height: 100dvh;
}

.auth-card {
  width: min(420px, 92vw);
}

.auth-logo {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.10);
}

.auth-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0 0 8px;
}

.auth-subtitle {
  font-size: 13px;
  color: #64748B;
  margin: 0 0 16px;
}

.social-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #0F172A;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.social-login-btn:hover,
.social-login-btn:focus {
  background: #FFFFFF;
  color: #0F172A;
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.social-login-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.social-login-btn__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-login-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.social-login-btn__label {
  line-height: 1;
}

@media (max-width: 575.98px) {
  .topbar__row {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar__meta {
    width: 100%;
    justify-content: space-between;
  }

  .weather-chip {
    flex: 1 1 auto;
    min-width: 0;
  }

  .weather-chip__place {
    white-space: normal;
  }
}

  	 .btn3d {
	position: relative;
	border: 0;
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, filter 180ms ease;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 2px;
	margin-right: 2px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    will-change: transform, box-shadow;
}

.pagination {
  display: flex;
  flex-wrap: wrap;    /* 允許換行 */
  gap: 4px;           /* 按鈕之間加點間距 */
  max-width: 250px;   /* 可依容器調整，控制每行大概 5 個 */
}

.pagination li {
  flex: 1 0 18%;   /* 每個大約佔 20%，一行剛好 5 個 */
  max-width: 18%;
  text-align: center;
}


.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
	-moz-outline-style: none;
	outline: medium none;
}

.btn3d:active,
.btn3d.active {
	transform: translateY(2px) scale(0.96);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
     
   .btn3d.btn-white {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0, 0, 0, .2);
	background-color: #fff;
}

.btn3d.btn-white:active,
.btn3d.btn-white.active {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
	background-color: #fff;
}

.btn3d.btn-default {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
	background-color: #f9f9f9;
}

.btn3d.btn-default:active,
.btn3d.btn-default.active {
	color: #666666;
	box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
	background-color: #f9f9f9;
}

.btn3d.btn-primary {
	box-shadow: 0 4px 14px rgba(66, 116, 215, 0.24);
	background-color: #4274D7;
}

.btn3d.btn-primary:active,
.btn3d.btn-primary.active {
	box-shadow: 0 2px 10px rgba(66, 116, 215, 0.22);
	background-color: #4274D7;
}

.btn3d.btn-success {
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.22);
	background-color: #22C55E;
}

.btn3d.btn-success:active,
.btn3d.btn-success.active {
	box-shadow: 0 2px 10px rgba(16, 185, 129, 0.20);
	background-color: #22C55E;
}

.btn3d.btn-info {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #39B3D7;
}

.btn3d.btn-info:active,
.btn3d.btn-info.active {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #39B3D7;
}

.btn3d.btn-warning {
	box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #D79A34, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #FEAF20;
}

.btn3d.btn-warning:active,
.btn3d.btn-warning.active {
	box-shadow: 0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #FEAF20;
}

.btn3d.btn-danger {
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.20);
	background-color: #EF4444;
}

.btn3d.btn-danger:active,
.btn3d.btn-danger.active {
	box-shadow: 0 2px 10px rgba(239, 68, 68, 0.18);
	background-color: #EF4444;
}

.btn3d.btn-magick {
	color: #fff;
	box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #9823d5, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #bb39d7;
}

.btn3d.btn-magick:active,
.btn3d.btn-magick.active {
	box-shadow: 0 0 0 1px #9a00cd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #bb39d7;
}    

.cam-app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cam-app-bar__left {
  min-width: 0;
  flex: 1 1 auto;
}

.cam-app-bar__right {
  margin-left: auto;
  flex: 0 0 auto;
}

.cam-app-bar--status {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.timestamp {
  display: inline-block;
  white-space: pre-line;
  line-height: 1.2;
  font-size: 12px;
  color: #6B7280;
}

.cam-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  background: rgba(34, 197, 94, 0.12) !important;
  border: 0 !important;
  color: #166534 !important;
  border-radius: 999px;
}

.cam-app-btn svg {
  width: 14px;
  height: 14px;
}

.topbar {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 6px 6px 14px;
}

.topbar h3 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0;
}

.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.topbar__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #334155;
  backdrop-filter: blur(10px);
}

.weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  color: #334155;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}

.weather-chip--loading {
  opacity: 0.72;
}

.weather-chip__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
  flex: 0 0 auto;
}

.weather-chip__icon svg {
  width: 28px;
  height: 28px;
}

.weather-chip__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.weather-chip__temp {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #0F172A;
}

.weather-chip__place {
  font-size: 12px;
  color: #64748B;
  line-height: 1.2;
  white-space: nowrap;
}

.weather-chip__detail {
  font-size: 11px;
  color: #94A3B8;
  line-height: 1.2;
  white-space: nowrap;
}

.weather-chip--combo {
  justify-content: space-between;
}

.weather-chip__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.weather-chip__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(15, 23, 42, 0.10);
  flex: 0 0 auto;
}

.weather-chip__user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.weather-chip__user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334155;
}

@media (max-width: 575.98px) {
  .weather-chip--combo {
    flex-wrap: wrap;
  }

  .weather-chip__divider {
    display: none;
  }

  .weather-chip__user {
    width: 100%;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }

  .weather-chip__user-name {
    max-width: 60%;
  }
}

.panel.section {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 6px;
}

.btn-brand {
  background: #1E3A8A;
  border: 0;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 0 12px 26px rgba(30, 58, 138, 0.22);
}

.btn-brand:hover,
.btn-brand:focus {
  background: #162C66;
  color: #fff;
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.25rem 0.25rem;
  border: 0;
  background: transparent;
  color: #6B7280;
}

.btn-logout:hover,
.btn-logout:focus {
  color: #111827;
  text-decoration: none;
}

#adminDeviceGrid > .col,
#sharedDeviceGrid > .col,
.col[data-device-key],
[id^="deviceContainer_"] {
  position: relative;
}

.device-card-shell {
  position: relative;
  width: 100%;
}

.quick-action-picker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.quick-action-picker .btn3d {
  margin-bottom: 0;
}

.quick-action-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  color: #64748B;
  user-select: none;
  white-space: nowrap;
}

.quick-action-toggle__input {
  width: 14px;
  height: 14px;
  accent-color: #1E3A8A;
}

.device-quick-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  z-index: 3;
}

.device-quick-actions[hidden] {
  display: none !important;
}

.device-quick-action {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}

.device-quick-action.btn3d {
  margin: 0;
}

.device-quick-actions .device-quick-action.btn3d.btn-primary {
  color: #FFFFFF;
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
  box-shadow: 0 12px 26px rgba(51, 65, 85, 0.28);
}

.device-quick-actions .device-quick-action.btn3d.btn-primary:hover,
.device-quick-actions .device-quick-action.btn3d.btn-primary:focus {
  background: linear-gradient(180deg, #526174 0%, #3B4A5C 100%);
  box-shadow: 0 16px 30px rgba(51, 65, 85, 0.30);
}

.device-quick-actions .device-quick-action.btn3d.btn-primary:active,
.device-quick-actions .device-quick-action.btn3d.btn-primary.active {
  background: linear-gradient(180deg, #3B4A5C 0%, #2F3B4A 100%);
  box-shadow: 0 6px 14px rgba(51, 65, 85, 0.22);
}

.device-quick-actions .device-quick-action.btn3d.btn-danger {
  color: #FFFFFF;
  background: linear-gradient(180deg, #FB923C 0%, #F97316 100%);
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.26);
}

.device-quick-actions .device-quick-action.btn3d.btn-danger:hover,
.device-quick-actions .device-quick-action.btn3d.btn-danger:focus {
  background: linear-gradient(180deg, #FDBA74 0%, #FB923C 100%);
  box-shadow: 0 16px 30px rgba(249, 115, 22, 0.28);
}

.device-quick-actions .device-quick-action.btn3d.btn-danger:active,
.device-quick-actions .device-quick-action.btn3d.btn-danger.active {
  background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.20);
}

.device-tile--has-quick-actions {
  padding-right: 104px;
  padding-bottom: 60px;
}

.device-quick-action svg {
  width: 18px;
  height: 18px;
}

.device-quick-action:hover,
.device-quick-action:focus {
  transform: translateY(-1px);
}

.sorting-enabled .device-quick-actions {
  display: none !important;
}

@media (max-width: 575.98px) {
  .device-quick-actions {
    right: 10px;
    bottom: 10px;
    gap: 6px;
  }

  .device-quick-action {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .device-tile--has-quick-actions {
    padding-right: 92px;
    padding-bottom: 52px;
  }
}

.device-tile {
  background: #fff;
  border: 0;
  color: #0F172A;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
  border-radius: 22px;
  padding: 14px 14px;
  width: 100%;
  height: auto;
  min-height: 124px;
  text-align: left;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
}

.device-tile::before {
  content: none;
}

.device-tile:hover,
.device-tile:focus {
  box-shadow: 0 22px 56px rgba(17, 24, 39, 0.10);
}

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

.device-tile strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.device-tile__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748B;
  line-height: 1;
}

.device-tile__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #CBD5E1;
  box-shadow: 0 0 0 4px rgba(203, 213, 225, 0.24);
  flex: 0 0 auto;
}

.device-tile__meta,
.device-tile__updated {
  display: block;
  width: 100%;
  font-size: 11px;
  color: #94A3B8;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-tile__updated {
  color: #64748B;
}

.device-tile--online {
  box-shadow: 0 20px 48px rgba(17, 24, 39, 0.10);
}

.device-tile--online .device-tile__dot {
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.device-tile--stale {
  opacity: 0.84;
}

.device-tile--stale .device-tile__dot {
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.device-tile--offline {
  opacity: 0.72;
  filter: saturate(0.85);
}

.device-tile--offline .device-tile__dot {
  background: #CBD5E1;
  box-shadow: 0 0 0 4px rgba(203, 213, 225, 0.24);
}

.device-tile--checking .device-tile__status {
  color: #64748B;
}

.device-tile--checking .device-tile__dot {
  background: #94A3B8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18);
}

.device-tile--checking .device-tile__status > span:last-child::after {
  content: '...';
  display: inline-block;
  width: 0ch;
  overflow: hidden;
  animation: statusDots 1s steps(4, end) infinite;
}

@keyframes statusDots {
  to { width: 3ch; }
}

.device-tile--noresponse .device-tile__status {
  color: #B45309;
}

.device-tile--noresponse .device-tile__dot {
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.sorting-enabled {
  user-select: none;
}

.sorting-enabled .device-tile {
  cursor: grab;
  touch-action: none;
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 237, 213, 0.92) 100%);
  border: 1px solid rgba(249, 115, 22, 0.22);
  box-shadow: 0 22px 54px rgba(249, 115, 22, 0.16);
  transform: translateY(-1px);
}

.sorting-enabled .device-tile strong {
  color: #9A3412;
}

.sorting-enabled .device-tile__status {
  color: #C2410C;
}

.sorting-enabled .device-tile__updated {
  color: #B45309;
}

.sorting-enabled .device-tile__dot {
  background: #F97316;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.sorting-enabled .device-tile:active {
  cursor: grabbing;
  box-shadow: 0 16px 38px rgba(249, 115, 22, 0.18);
}

.sort-placeholder {
  border: 2px dashed rgba(15, 23, 42, 0.18);
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.04);
}

.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 0.96;
  border-radius: 22px;
  box-shadow: 0 28px 68px rgba(15, 23, 42, 0.22);
  transform: translate(-9999px, -9999px);
}

.shared-device-card {
  border-radius: 22px;
  border: 0;
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
  padding: 14px 14px;
}

.shared-device-card__top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.shared-device-card__info {
  flex: 1 1 auto;
  min-width: 0;
}

.shared-device-card__name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #0F172A;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-device-card .cam-app-btn {
  margin-left: auto;
  align-self: flex-start;
}

.shared-device-card .device-action-table {
  margin-top: 10px;
}

.info-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #475569;
  font-size: 12px;
}

table.device-action-table {
  border-collapse: separate;
  border-spacing: 12px 10px;
  margin-top: 12px;
}

table.device-action-table th,
table.device-action-table td {
  border: 0 !important;
  padding: 0;
  background: transparent;
}

table.device-action-table .btn3d {
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

table.device-action-table .btn3d.btn-primary {
  color: #FFFFFF;
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
  box-shadow: 0 12px 26px rgba(51, 65, 85, 0.28);
}

table.device-action-table .btn3d.btn-primary:hover,
table.device-action-table .btn3d.btn-primary:focus {
  background: linear-gradient(180deg, #526174 0%, #3B4A5C 100%);
  box-shadow: 0 16px 30px rgba(51, 65, 85, 0.30);
}

table.device-action-table .btn3d.btn-primary:active,
table.device-action-table .btn3d.btn-primary.active {
  background: linear-gradient(180deg, #3B4A5C 0%, #2F3B4A 100%);
  box-shadow: 0 6px 14px rgba(51, 65, 85, 0.22);
}

table.device-action-table .btn3d.btn-danger {
  color: #FFFFFF;
  background: linear-gradient(180deg, #FB923C 0%, #F97316 100%);
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.26);
}

table.device-action-table .btn3d.btn-danger:hover,
table.device-action-table .btn3d.btn-danger:focus {
  background: linear-gradient(180deg, #FDBA74 0%, #FB923C 100%);
  box-shadow: 0 16px 30px rgba(249, 115, 22, 0.28);
}

table.device-action-table .btn3d.btn-danger:active,
table.device-action-table .btn3d.btn-danger.active {
  background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.20);
}

table.device-action-table .btn3d.btn-default,
table.device-action-table .btn3d.btn-white {
  color: #475569;
  background: linear-gradient(180deg, #F5F5F4 0%, #E7E5E4 100%);
  box-shadow: 0 10px 22px rgba(120, 113, 108, 0.14);
}

table.device-action-table .btn3d:hover,
table.device-action-table .btn3d:focus {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

table.device-action-table .btn3d:active,
table.device-action-table .btn3d.active {
  transform: translateY(2px) scale(0.93);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
}

table.device-action-table .btn3d svg {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 auto;
}

table.device-action-table .btn3d.btn3d--pending {
  transform: translateY(1px) scale(0.95);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
  filter: brightness(0.98);
}

.control-feedback {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(8px);
  min-width: min(320px, calc(100vw - 32px));
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.control-feedback--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cam-app-btn--empty {
  visibility: hidden;
  pointer-events: none;
}

.device-admin-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 10px;
  align-items: center;
}

@media (min-width: 420px) {
  .device-admin-actions {
    grid-template-columns: 1fr auto;
  }
}

.device-admin-actions__notify {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.device-admin-actions__label {
  white-space: nowrap;
}

.device-admin-actions__tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

@media (min-width: 420px) {
  .device-admin-actions__tools {
    justify-content: flex-end;
  }
}

.device-admin-actions__tools .btn {
  white-space: nowrap;
}

.device-status {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.device-status__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.form-switch .form-check-input {
  width: 44px;
  height: 24px;
  margin-top: 0;
  border: 0;
  background-color: #E5E7EB;
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.10);
}

.form-switch .form-check-input:checked {
  background-color: #F97316;
}

.form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}

.device-tile.btn-fixed-width {
  width: 100%;
  height: 104px;
}

.device-status__title-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.device-status__title-btn:focus {
  outline: none;
}