:root {
  color-scheme: dark;
  --bg: #050505;
  --text: #f5f5f5;
  --muted: #989898;
  --line: rgb(255 255 255 / 14%);
  --line-strong: rgb(255 255 255 / 28%);
  --green: #b3d9bc;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: var(--sans); -webkit-font-smoothing: antialiased; isolation: isolate; }
::selection { color: #050505; background: #eee; }
button, input { font: inherit; }
button { color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #eee; outline-offset: 5px; }
.hidden { display: none !important; }
.site-shell { position: relative; z-index: 3; min-height: 100vh; }

/* Silver glass follows the Travka login surfaces; the three background layers
   are defined by its original, unmodified color-bends.css. */
.login-card, .power-action, .last-shutdown, .history {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgb(27 27 27 / 76%), rgb(5 5 5 / 90%));
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%), inset 0 1px 0 rgb(255 255 255 / 7%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.login-view { display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: 40px 20px; }
.login-card {
  position: relative;
  isolation: isolate;
  width: min(412px, 100%);
  min-width: 0;
  padding: 36px;
  border-color: rgb(240 240 240 / 24%);
  border-radius: 22px;
  box-shadow: 0 38px 100px rgb(0 0 0 / 76%), inset 0 1px 0 rgb(255 255 255 / 15%);
  backdrop-filter: blur(34px) saturate(155%);
  -webkit-backdrop-filter: blur(34px) saturate(155%);
  animation: appear 550ms ease backwards;
}
.login-card::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 18% 0, rgb(255 255 255 / 18%), transparent 34%), linear-gradient(115deg, rgb(255 255 255 / 6%), transparent 38% 66%, rgb(255 255 255 / 3%)); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 36px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 12px; background: linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 2%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 0 26px rgb(255 255 255 / 5%); transform: rotate(45deg); }
.brand-mark span { width: 12px; height: 12px; border: 1px solid #eee; border-radius: 3px; background: linear-gradient(135deg, #eee, #777); box-shadow: 0 0 20px rgb(255 255 255 / 20%); }
.brand-mark-small { width: 29px; height: 29px; margin: 0; border-radius: 8px; }
.brand-mark-small span { width: 8px; height: 8px; border-radius: 2px; }
.eyebrow { margin: 0 0 16px; color: #a4a4a4; font: 500 10px/1.4 var(--mono); letter-spacing: .16em; }
.login-card h1 { margin: 0; font-size: 56px; font-weight: 550; line-height: 1; letter-spacing: -.055em; }
.login-note { margin: 16px 0 34px; color: #aaa; font-size: 13px; line-height: 1.6; }
.field { display: grid; gap: 10px; }
.field > span { color: #c4c4c4; font-size: 12px; }
.field input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--text); background: rgb(6 6 6 / 68%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); transition: border-color 160ms, box-shadow 160ms; font-size: 16px; }
.field input::placeholder { color: #727272; font-size: 13px; }
.field input:focus { border-color: rgb(245 245 245 / 62%); box-shadow: 0 0 0 3px rgb(255 255 255 / 8%); }
.turnstile-frame { display: grid; place-items: center; width: 100%; min-width: 0; min-height: 68px; margin: 16px 0; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid #eee; border-radius: 10px; color: #111; background: linear-gradient(135deg, #fff, #d1d1d1); box-shadow: 0 10px 30px rgb(255 255 255 / 5%); font-size: 13px; font-weight: 650; cursor: pointer; transition: box-shadow 180ms, transform 180ms; }
.primary-button > span:last-child { font-size: 21px; font-weight: 400; }
.primary-button:hover:not(:disabled) { box-shadow: 0 0 26px rgb(255 255 255 / 18%); transform: translateY(-1px); }
.primary-button:disabled, .power-action:disabled, .quiet-button:disabled { cursor: wait; opacity: .5; }
.form-message { min-height: 18px; margin: 12px 0 0; color: #ffaaaa; font-size: 12px; line-height: 1.5; }
.login-footer { display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 18px; margin-top: 12px; border-top: 1px solid var(--line); color: #929292; font-size: 10px; }
.mini-lock { color: #d0d0d0; }
.control-view { min-height: 100vh; min-height: 100dvh; padding: 24px 32px 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1120px, 100%); min-height: 76px; margin: 0 auto; padding: 0 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, rgb(25 25 25 / 85%), rgb(8 8 8 / 82%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.brand { display: flex; align-items: center; gap: 15px; font-size: 13px; font-weight: 650; letter-spacing: .14em; }
.brand small { display: block; margin-top: 4px; color: #969696; font-size: 10px; font-weight: 400; letter-spacing: .01em; }
.topbar-section { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 4%); font-size: 12px; color: #d0d0d0; }
.topbar-section > span { font-size: 16px; }
.quiet-button { min-height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; color: #aaa; background: transparent; cursor: pointer; font-size: 12px; transition: background 180ms, color 180ms, border-color 180ms; }
.quiet-button:hover { border-color: var(--line); color: #fff; background: rgb(255 255 255 / 5%); }
.control-content { width: min(960px, 100%); margin: 0 auto; padding: 64px 0 max(26px, env(safe-area-inset-bottom)); animation: appear 500ms ease backwards; }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.hero-row h1 { margin: 0; font-size: clamp(42px, 6vw, 68px); font-weight: 500; line-height: 1.1; letter-spacing: -.06em; }
.title-dot { color: #858585; }
.hero-note { margin: 15px 0 0; font-size: 13px; line-height: 1.6; color: #a5a5a5; }
.online-state { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: rgb(12 12 12 / 80%); color: #aaa; font-size: 11px; white-space: nowrap; }
.status-dot, .toast-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #777; }
.online-state.is-online { color: #c5ddcb; border-color: rgb(179 217 188 / 24%); }
.online-state.is-online .status-dot, .toast-dot { background: var(--green); box-shadow: 0 0 12px rgb(179 217 188 / 45%); }
.last-shutdown { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 18px; margin-bottom: 18px; padding: 19px 23px; border-radius: 14px; }
.last-shutdown > span { display: flex; align-items: center; gap: 11px; color: #b4b4b4; font-size: 12px; }
.shutdown-time-icon { color: #c6c6c6; font-size: 20px; }
.last-shutdown strong { grid-column: 2; grid-row: 1 / 3; font: 500 13px/1.5 var(--mono); text-align: right; }
.last-shutdown small { padding-left: 31px; color: #858585; font-size: 10px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.power-action { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 35px; min-height: 252px; padding: 28px; border-radius: 20px; color: var(--text); cursor: pointer; text-align: left; overflow: hidden; transition: transform 220ms, border-color 220ms, box-shadow 220ms; }
.power-action::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 0 0, rgb(255 255 255 / 7%), transparent 65%); opacity: .65; transition: opacity 220ms; }
.power-action:hover:not(:disabled) { transform: translateY(-4px); border-color: rgb(255 255 255 / 34%); box-shadow: 0 28px 70px rgb(0 0 0 / 48%), inset 0 1px 0 rgb(255 255 255 / 16%); }
.power-action:hover:not(:disabled)::before { opacity: 1; }
.power-action:active:not(:disabled) { transform: translateY(-1px) scale(.99); }
.shutdown-action:hover:not(:disabled) { border-color: rgb(255 180 180 / 35%); }
.power-action.is-loading { opacity: .62; }
.action-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 13px; background: linear-gradient(135deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 2%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); color: #ddd; }
.lock-symbol::after { content: ""; position: absolute; top: 22px; width: 18px; height: 14px; border: 1.5px solid currentColor; border-radius: 4px; }
.lock-symbol::before { content: ""; position: absolute; top: 12px; width: 12px; height: 12px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; }
.power-symbol::after { content: ""; width: 23px; height: 23px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.power-symbol::before { content: ""; position: absolute; top: 10px; width: 1.5px; height: 15px; border-radius: 2px; background: currentColor; }
.shutdown-action:hover .power-symbol { color: #ffc0c0; }
.action-copy { display: grid; gap: 9px; min-width: 0; }
.action-copy small { margin-bottom: 2px; color: #909090; font: 500 9px/1.3 var(--mono); letter-spacing: .12em; }
.action-copy strong { font-size: clamp(21px, 2.5vw, 28px); font-weight: 500; letter-spacing: -.035em; }
.action-copy > span { color: #a0a0a0; font-size: 12px; line-height: 1.5; }
.action-arrow { position: absolute; top: 29px; right: 29px; color: #858585; font-size: 26px; line-height: 1; transition: transform 220ms, color 220ms; }
.power-action:hover .action-arrow { color: #eee; transform: translate(2px, -2px); }
.history { margin-top: 28px; padding: 24px 26px 10px; border-radius: 18px; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.history-head .eyebrow { margin-bottom: 8px; font-size: 9px; }
.history-head h2 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.025em; }
.activity-list { border-top: 1px solid var(--line); }
.activity-row, .activity-empty { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; min-height: 65px; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.activity-row:last-child, .activity-empty:last-child { border-bottom: 0; }
.activity-main { display: grid; gap: 6px; }
.activity-main strong { font-size: 12px; font-weight: 500; }
.activity-main time, .activity-empty { color: #999; font-size: 11px; }
.activity-empty { min-height: 72px; }
.activity-status { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; color: #b4b4b4; font: 500 9px/1.2 var(--mono); }
.status-completed .activity-status { color: #bfd7c5; border-color: rgb(179 217 188 / 20%); }
.status-failed .activity-status, .status-expired .activity-status { color: #efabab; border-color: rgb(255 170 170 / 22%); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 26px; color: #929292; font: 400 9px/1.5 var(--mono); }
.footer-brand { letter-spacing: .1em; color: #c2c2c2; }
.footer-brand > span { margin-left: 6px; color: #929292; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 11px; max-width: calc(100% - 48px); padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgb(18 18 18 / 96%); box-shadow: 0 16px 50px rgb(0 0 0 / 55%); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 160ms, transform 160ms; font-size: 12px; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
@keyframes appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .control-view { padding: 14px 18px 0; }
  .topbar { min-height: 66px; padding: 0 17px; border-radius: 14px; }
  .topbar-section { display: none; }
  .control-content { padding-top: 38px; }
  .hero-row { align-items: flex-start; gap: 12px; margin-bottom: 26px; }
  .hero-row h1 { font-size: clamp(36px, 7.8vw, 52px); }
  .hero-row .eyebrow { font-size: 8px; letter-spacing: .08em; }
  .hero-note { max-width: 225px; font-size: 12px; }
  .online-state { min-height: 30px; gap: 6px; padding: 0 9px; font-size: 10px; margin-top: 25px; }
  .actions { gap: 14px; }
  .power-action { min-height: 225px; padding: 20px; gap: 24px; border-radius: 16px; }
  .action-copy strong { font-size: 21px; }
  .action-arrow { top: 22px; right: 20px; }
  .action-copy > span { font-size: 11px; }
  .last-shutdown { padding: 17px; }
  .last-shutdown > span { font-size: 11px; gap: 8px; }
  .last-shutdown small { font-size: 9px; padding-left: 28px; }
  .last-shutdown strong { font-size: 11px; }
  .history { padding: 20px 19px 8px; margin-top: 22px; }
  .history-head h2 { font-size: 18px; }
  footer { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .actions { grid-template-columns: 1fr; }
  .power-action { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 18px; min-height: 132px; padding: 23px 20px; }
  .action-copy { gap: 6px; }
  .action-copy strong { font-size: 21px; }
  .action-copy small { font-size: 8px; }
  .action-arrow { top: 18px; right: 17px; font-size: 18px; }
  .login-card { padding: 30px 24px; }
  .login-card h1 { font-size: 50px; }
  .login-view { padding: 30px 16px; }
}
@media (max-width: 360px) {
  .control-view { padding-left: 12px; padding-right: 12px; }
  .hero-row h1 { font-size: 34px; }
  .online-state { font-size: 9px; padding: 0 7px; }
  .last-shutdown { grid-template-columns: 1fr; }
  .last-shutdown strong { grid-column: 1; grid-row: 2; padding-left: 28px; text-align: left; }
  .action-copy strong { font-size: 20px; }
  .action-copy > span { font-size: 10px; }
}
/* The hosted challenge has a 300px minimum; fit it inside narrow login cards. */
@media (max-width: 380px) {
  .cf-turnstile { zoom: .78; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.text-action { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 90px; padding: 20px 25px; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(125deg, rgb(30 30 30 / 82%), rgb(8 8 8 / 90%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); cursor: pointer; text-align: left; transition: border-color 180ms, transform 180ms; }
.text-action:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-2px); }
.text-action:disabled { opacity: .5; cursor: not-allowed; }
.text-action > span:nth-child(2) { display: grid; gap: 6px; }
.text-action strong { font-size: 15px; font-weight: 500; }
.text-action small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.text-symbol { display: grid; place-items: center; position: relative; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 4%); font: 21px/1 Georgia, serif; }
.text-symbol > span { position: absolute; right: 5px; color: #999; font-size: 16px; }
.text-action-arrow { margin-left: auto; color: #999; font-size: 23px; }
.text-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 28px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 22px; color: var(--text); background: linear-gradient(145deg, #242424, #090909 80%); box-shadow: 0 30px 100px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 10%); }
.text-dialog::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(8px); }
.text-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.text-dialog-head .eyebrow { margin: 0; }
.text-dialog-head .quiet-button { margin-right: -10px; }
.text-dialog h2 { margin: 18px 0 12px; font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
#textDialogHint { margin: 0 0 26px; color: #aaa; font-size: 13px; line-height: 1.7; }
.text-input-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: #999; font-size: 10px; line-height: 1.5; }
.text-input-meta output { flex-shrink: 0; }
.text-dialog .form-message { margin-bottom: 16px; }
.activity-detail { max-width: 600px; color: #aaa; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 480px) { .text-action { padding: 20px; gap: 13px; } .text-action strong { font-size: 13px; } .text-action small { font-size: 10px; } .text-dialog { padding: 22px; } }

/* Compact remote-control panel */
.control-content{width:min(1060px,100%);padding-top:32px}.hero-row{margin-bottom:22px}.hero-row h1{font-size:44px}.hero-note{margin-top:10px}.last-shutdown{padding:13px 18px;margin-bottom:14px}.actions{gap:12px}.power-action{min-height:86px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:16px 18px;gap:14px;border-radius:13px}.action-icon{width:42px;height:42px;flex-shrink:0}.lock-symbol::before{top:8px}.lock-symbol::after{top:18px}.power-symbol::before{top:7px}.action-copy{gap:4px}.action-copy small{display:none}.action-copy strong{font-size:17px}.action-copy>span{font-size:11px}.action-arrow{top:16px;right:15px;font-size:17px}.text-action{min-height:68px;padding:12px 18px;margin-top:12px;border-radius:13px}.text-action strong{font-size:14px}.text-action small{font-size:11px}.text-symbol{width:34px;height:34px}.live-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:0 0 18px;background:var(--line)}.live-overview>div{display:grid;gap:9px;padding:16px 18px;background:#121212}.live-overview span{font-size:10px;color:#999}.live-overview strong{font-size:13px;font-weight:500}.control-group{margin-top:27px}.group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:12px}.group-heading h2{font-size:17px;font-weight:500;margin:0;letter-spacing:-.02em}.group-heading p{color:#929292;font-size:10px;margin:0}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.compact-action{min-width:0;display:flex;align-items:center;gap:12px;min-height:78px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(125deg,rgb(31 31 31 / 88%),rgb(10 10 10 / 92%));box-shadow:inset 0 1px 0 rgb(255 255 255 / 5%);color:var(--text);text-align:left;cursor:pointer;transition:transform 160ms,border-color 160ms}.compact-action:hover:not(:disabled){transform:translateY(-2px);border-color:#666}.compact-action:disabled{opacity:.45;cursor:not-allowed}.compact-action[aria-pressed=true]{border-color:#8b7777;background:linear-gradient(125deg,#292323,#151111)}.compact-icon{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:1px solid var(--line);border-radius:9px;font-size:21px;color:#ccc}.compact-action>span:last-child{display:grid;gap:5px;min-width:0}.compact-action strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}.compact-action small{font-size:10px;line-height:1.4;color:#969696;overflow-wrap:anywhere}.history{margin-top:25px;padding:19px 22px 8px}.dialog-hint{font-size:13px;color:#aaa;line-height:1.7;margin:0 0 22px}.field select{width:100%;min-height:48px;border:1px solid var(--line);background:#151515;color:#eee;border-radius:10px;padding:10px;font:inherit}.timer-choices{display:flex;gap:8px;margin-top:10px}.timer-choices button{background:#252525;flex:1}.result-dialog{width:min(1000px,calc(100% - 32px))}.result-dialog img{max-width:100%;height:auto;border-radius:10px;display:block}.result-dialog .dialog-hint{margin:15px 0 0}.metrics-list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}.metrics-list dt,.metrics-list dd{padding:14px 0;border-bottom:1px solid var(--line);margin:0;font-size:13px;overflow-wrap:anywhere}.metrics-list dt{color:#aaa}.metrics-list dd{text-align:right}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ccc;outline-offset:3px}
@media(max-width:700px){.control-content{padding-top:25px}.hero-row h1{font-size:36px}.group-heading{display:block}.group-heading p{margin-top:6px}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.live-overview>div{padding:12px 14px}.power-action{padding:14px;min-height:86px;gap:10px}.action-copy strong{font-size:14px}.action-copy>span{font-size:10px}.actions{grid-template-columns:1fr 1fr}.action-arrow{display:none}.action-icon{display:none}.compact-action{padding:12px 10px;min-height:80px;gap:8px}.compact-icon{width:28px;height:28px;font-size:18px}.compact-action strong{font-size:11px}.compact-action small{font-size:9px}.text-action{padding:12px 15px}.text-action strong{font-size:13px}.text-action small{font-size:10px}.online-state{margin-top:15px}.metrics-list dt,.metrics-list dd{font-size:11px}.control-group{margin-top:22px}}
/* Mobile remote: one task per screen, navigation within thumb reach. */
[hidden]{display:none!important}button{touch-action:manipulation}svg{width:24px;height:24px;flex:none}.control-view{padding:22px 24px 110px}.topbar{width:min(760px,100%);min-height:68px;padding:12px 20px;gap:14px}.brand{margin-right:auto}.online-state{margin:0;font-size:12px}.quiet-button{min-height:44px}.control-content{width:min(720px,100%);padding:28px 0 0;animation:none}.panel-heading{margin:0 0 22px}.panel-heading h1{font-size:34px;line-height:1.2;letter-spacing:-.04em;font-weight:550;margin:0 0 8px}.panel-heading p{font-size:14px;line-height:1.5;color:#a9a9a9;margin:0}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.compact-action{min-height:92px;padding:18px;gap:14px;border-radius:17px;background:linear-gradient(135deg,rgb(34 34 34 / 95%),rgb(14 14 14 / 94%));box-shadow:inset 0 1px 0 #ffffff09;align-items:center}.compact-icon{border:0;background:transparent;width:28px;height:32px;color:#d5d5d5}.compact-icon svg{width:25px;height:25px}.compact-action strong{font-size:15px;line-height:1.3;font-weight:550;overflow-wrap:normal}.compact-action small{font-size:12px;line-height:1.45;color:#aaa;overflow-wrap:normal}.compact-action>span:last-child{gap:6px}.compact-action:disabled{opacity:.42}.compact-action:active:not(:disabled),.text-action:active:not(:disabled){transform:scale(.975);background:#353535}.compact-action[aria-pressed=true]{border-color:#b89a80;background:linear-gradient(135deg,#332b23,#1e1814)}.danger-action .compact-icon{color:#e4a7a7}.text-action{margin:0 0 12px;min-height:86px;border-radius:17px;padding:18px;gap:14px;background:linear-gradient(125deg,#343434ef,#1a1a1af2)}.text-action strong{font-size:16px}.text-action small{font-size:12px}.panel-footnote{font-size:12px;line-height:1.6;color:#9a9a9a;margin:20px 2px}.panel-footnote strong{color:#ddd;font-weight:500}.remote-nav{position:fixed;z-index:10;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(480px,calc(100% - 32px));padding:6px;border:1px solid #ffffff26;border-radius:22px;background:#131313f2;box-shadow:0 8px 45px #000b;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.remote-nav button{display:grid;place-items:center;gap:6px;min-height:62px;border:0;border-radius:16px;color:#999;background:transparent;font-size:12px;cursor:pointer}.remote-nav button[aria-selected=true]{background:#303030;color:white;box-shadow:inset 0 1px 0 #ffffff12}.remote-nav svg{width:22px;height:22px}.volume-card{padding:19px 16px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#242424f2,#121212f2)}.volume-heading{display:flex;justify-content:space-between;align-items:center;margin:0 4px 17px;color:#bbb;font-size:14px}.volume-heading strong{color:white;font-size:24px;font-weight:550}.volume-buttons{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:9px}.volume-buttons .compact-action{display:flex;flex-direction:column;gap:6px;min-height:102px;padding:13px 4px;text-align:center;border-radius:13px}.volume-buttons .compact-action small{font-size:11px}.volume-buttons .compact-action strong{font-size:13px}.volume-buttons .compact-icon{height:24px}.timer-card{display:flex;justify-content:space-between;gap:12px;padding:18px;margin-top:14px;border:1px solid var(--line);border-radius:14px;background:#171717;font-size:13px}.timer-card span{color:#aaa}.timer-card strong{font-weight:500}.history{margin:0 0 16px;padding:16px;border-radius:18px}.history-head h2{font-size:15px}.history-head{gap:8px}.activity-main strong{font-size:14px}.activity-detail{font-size:12px;color:#b7b7b7}.activity-status{font-size:11px}.last-shutdown{padding:15px}.connection-notice,.command-feedback{border:1px solid #ffffff24;border-radius:14px;padding:14px 16px;margin-bottom:18px;background:#1d1d1df5;font-size:13px;line-height:1.5}.connection-notice{color:#edc8a2;border-color:#c59c6a45;background:#251f17f5}.command-feedback{display:flex;gap:11px;align-items:flex-start}.command-feedback strong{font-size:13px;font-weight:550}.command-feedback p{font-size:12px;color:#b4b4b4;margin:4px 0 0;overflow-wrap:anywhere}.feedback-dot{width:7px;height:7px;border-radius:50%;background:#a4caae;flex:none;margin-top:6px}.command-feedback[data-state=failed] .feedback-dot,.command-feedback[data-state=expired] .feedback-dot{background:#ec9999}.command-feedback[data-state=failed],.command-feedback[data-state=expired]{border-color:#ec999950}.command-feedback[data-state=queued] .feedback-dot,.command-feedback[data-state=claimed] .feedback-dot{background:#ddc79d;animation:feedback-pulse 1s ease-in-out infinite alternate}@keyframes feedback-pulse{to{opacity:.3}}.toast{bottom:110px;max-width:calc(100% - 32px)}.text-dialog .quiet-button{min-width:44px;min-height:44px}.field select,.field input{font-size:16px}.text-dialog{overscroll-behavior:contain}.text-dialog .primary-button{position:sticky;bottom:0;min-height:52px}.timer-choices button{min-height:48px}.result-dialog img{cursor:zoom-in}.result-dialog img.is-zoomed{max-width:none;width:1920px}.metrics-list dt,.metrics-list dd{font-size:13px}.result-dialog{overscroll-behavior:contain}
@media(max-width:700px){.control-view{padding:12px 16px calc(108px + env(safe-area-inset-bottom))}.topbar{min-height:60px;padding:8px 12px;border-radius:17px;gap:10px}.brand{gap:11px;font-size:11px}.brand small{font-size:10px}.brand-mark-small{width:24px;height:24px;border-radius:6px}.topbar .quiet-button{padding:0 6px;font-size:12px}.online-state{padding:0 9px;min-height:30px;font-size:11px;gap:6px}.control-content{padding-top:23px}.panel-heading{margin-bottom:20px}.panel-heading h1{font-size:30px}.panel-heading p{font-size:13px}.control-grid{gap:10px}.compact-action{min-height:108px;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:15px;border-radius:16px}.compact-action strong{font-size:14px}.compact-action small{font-size:11px;line-height:1.4}.compact-action>span:last-child{gap:4px}.compact-icon{height:25px;width:25px}.text-action{min-height:80px;padding:16px;gap:12px}.text-action strong{font-size:15px}.text-action small{font-size:11px}.remote-nav{bottom:0;width:100%;border-radius:20px 20px 0 0;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-bottom:0}.remote-nav button{min-height:58px;font-size:11px}.remote-nav svg{width:21px;height:21px}.text-dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:calc(100dvh - 16px);border-radius:24px 24px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom));border-bottom:0}.text-dialog h2{font-size:26px;margin-top:12px}.text-dialog::before{content:'';display:block;width:36px;height:4px;background:#555;border-radius:4px;margin:0 auto 9px}.dialog-hint,#textDialogHint{font-size:13px;line-height:1.5;margin-bottom:18px}.text-input-meta{font-size:11px}.last-shutdown{grid-template-columns:1fr;gap:7px}.last-shutdown strong{grid-column:1;grid-row:2;text-align:left;padding:0;font-size:13px}.last-shutdown small{padding:0}.history{padding:14px}.activity-row{gap:12px}.activity-status{white-space:nowrap}.toast{bottom:calc(88px + env(safe-area-inset-bottom))}.connection-notice,.command-feedback{padding:12px;margin-bottom:16px}}
@media(max-width:350px){.control-view{padding-left:12px;padding-right:12px}.brand small{display:none}.topbar{gap:7px}.brand{font-size:10px}.compact-action{padding:13px;min-height:108px}.compact-action strong{font-size:13px}.compact-action small{font-size:11px}.text-action small{max-width:180px}.online-state{font-size:10px}}
@media(hover:none){.compact-action:hover:not(:disabled),.text-action:hover:not(:disabled){transform:none}.compact-action:active:not(:disabled),.text-action:active:not(:disabled){transform:scale(.975)}}