/* Local review: the existing console remains responsible for every interaction. */
/* Keep the original SLOW LOCK color tokens from slow-lock.css. */
@font-face {font-family:'SLOW LOCK Pixel Chinese';src:url('/fonts/slow-lock-pixel-zh.woff2') format('woff2');font-display:swap;font-weight:400;unicode-range:U+6162,U+9396;}
body {font-size:14px;}
body > .topbar {background:rgba(250,249,246,.95);backdrop-filter:blur(16px);min-height:88px;}
.topbar, main, footer {max-width:1480px;padding-inline:48px;}
.topbar:after {left:48px;right:48px;}
.wordmark {gap:3px;}
.wordmark-zh {font-family:'SLOW LOCK Pixel Chinese',monospace;font-size:20px;font-weight:400;line-height:1;letter-spacing:.04em;}
.wordmark-zh:before {content:'';width:1px;height:16px;background:var(--line);}
.wordmark .key-scene.brand-mark {width:70px;height:48px;animation:none;object-fit:initial;}
.key-scene {display:inline-block;flex-shrink:0;line-height:0;}
.key-scene > img {display:block;margin:6px 0 6px auto;transform:scaleX(-1);}
.key-film {width:100%;height:100%;overflow:visible;fill:var(--ink);transform:scaleX(-1);}
.keyhole-slot {fill:var(--ink);stroke:none;}
.header-actions {gap:26px;}
.nav-link {font-size:12px;}
.local-preview-bar {display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 48px;background:var(--soft);color:var(--ink);font-size:11px;}
.local-preview-bar > span {display:flex;align-items:center;gap:9px;}
.local-preview-bar small {font-size:10px;color:var(--muted);margin-left:6px;}
.local-preview-bar i {width:5px;height:5px;border-radius:50%;background:var(--muted);}
.local-preview-bar > div {display:flex;gap:23px;flex-wrap:wrap;}
.local-preview-bar button {border:0;background:none;font-size:11px;min-height:30px;padding:3px 0;color:inherit;}
.local-preview-bar button:hover {text-decoration:underline;text-underline-offset:5px;}
#demoBanner {margin:0;border:0;border-radius:0;padding:8px 48px;font-size:10px;color:var(--muted);background:none;text-align:left;}
.page-heading {grid-template-columns:minmax(0,1fr) 250px;gap:24px 50px;padding-block:30px 34px;}
.intro-label {grid-column:1/-1;flex-direction:row;justify-content:space-between;gap:20px;min-height:0;font-weight:400;padding:0;font-size:9px;letter-spacing:.1em;}
.intro-label > span:last-child {font-size:10px;}
.intro-main {display:flex;gap:55px;align-items:flex-end;}
.page-heading h1 {font-size:42px;line-height:1.45;}
.page-heading .muted {font-size:12px;line-height:1.95;margin:0 0 7px;}
.brand-field {min-height:0;align-self:stretch;justify-content:center;padding-left:32px;}
.space-kicker {font-size:9px;margin-bottom:12px;}
.brand-field label {font-size:11px;}
.brand-field select,.brand-value {font-size:19px;}
.brand-caption {font-size:10px;margin-bottom:0;}
.overview {padding-block:22px;margin-bottom:38px;}
.metric-card {padding-inline:30px;}
.metric-kicker {font-size:11px;}
.metric {font-size:48px;font-weight:400;letter-spacing:-.04em;}
.metric + span,.pin-status-detail {font-size:11px;}
.pin-status-card {transition:background .3s;}
.overview .pin-status-card:hover {background:var(--soft);}
.pin-status-main {font-size:22px;}
.overview-note {padding-left:28px;}
#updatedAt {font-size:14px;}
.workspace-grid {grid-template-columns:320px minmax(0,1fr);gap:40px;}
.detail-stack {padding-left:40px;}
.section-heading h2 {font-size:19px;}
.lock-tools .text-button {font-size:11px;}
.lock-filters {gap:28px;}
.lock-search[hidden] {display:none;}
.lock-row {position:relative;border-color:var(--line);}
.lock-item {min-height:86px;padding:17px 10px;transition:background .25s;}
.lock-item.selected {padding-left:14px;background:#eeece5;border:0;}
.lock-item.selected:before {content:"";width:3px;position:absolute;inset:17px auto 17px 0;background:var(--ink);border-radius:2px;}
.lock-item:not(:disabled):hover {background:#f2f0e9;}
.lock-room-key {font-size:12px;font-weight:400;color:var(--muted);}
.lock-door-role {font-size:18px;font-weight:500;color:var(--ink);}
.lock-meta {font-size:11px;}
.lock-status-icons .symbol-svg {width:20px;height:20px;}
.lock-item strong {gap:13px;}
.detail-panel {padding:28px 30px;background:transparent;border-radius:16px;}
.detail-top {margin-bottom:20px;}
.detail-top .eyebrow {font-size:9px;margin-bottom:22px;}
.detail-title .detail-room {font-size:21px;font-weight:500;letter-spacing:normal;line-height:1.4;color:var(--muted);}
.detail-top .detail-title > span:last-child {font-size:48px;font-weight:400;letter-spacing:-.05em;line-height:1.15;color:var(--ink);}
.detail-title {font-size:21px;gap:15px;}
.detail-top .fine {font-size:10px;}
.detail-indicators {padding-block:13px;border-color:var(--line);font-size:11px;}
.detail-stat small {overflow-wrap:anywhere;}
.lock-label-dialog {width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px;box-sizing:border-box;}
.lock-label-dialog form {display:grid;gap:16px;}
.label-dialog-heading {display:flex;justify-content:space-between;align-items:center;gap:16px;}
.label-dialog-heading h2 {font-size:22px;margin:0;}
.lock-label-dialog label {display:grid;gap:8px;min-width:0;}
.label-size-fields {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.label-color-fields {display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:end;}
.lock-label-dialog input[type="number"],.lock-label-dialog input[type="text"] {width:100%;min-width:0;box-sizing:border-box;}
.lock-label-dialog .label-default-color {display:flex;align-items:center;gap:10px;}
.label-default-color input {flex:0 0 18px;min-height:18px;}
.label-dialog-actions {display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.label-dialog-actions .text-button {margin-right:auto;}
@media(max-width:480px) {.lock-label-dialog {padding:20px;}.label-dialog-heading h2 {font-size:19px;}.label-dialog-actions .text-button {width:100%;text-align:left;}}
.primary,.secondary {border-radius:9px;font-size:12px;min-height:44px;transition:background .2s,color .2s;}
.primary {background:var(--ink);color:var(--paper);}
.primary:not(:disabled):hover {background:#45453f;}
.secondary {background:transparent;}
.secondary:not(:disabled):hover {background:#f2f0e9;}
.detail-actions {gap:10px;}
.detail-actions .primary {flex:1.1;}
.detail-actions .secondary {flex:1;}
.detail-tab {font-size:12px;min-height:48px;}
.detail-tabs {gap:26px;margin-top:24px;}
.content-section {border-color:var(--line);}
.pin-engine-panel {margin-top:28px;padding:25px 0 0;}
.pin-engine-panel h2 {font-size:17px;}
.pin-engine-panel > .fine {font-size:11px;}
.empty-state {min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.empty-state > span {color:var(--muted);}
.empty-state h2 {font-family:'Songti TC',serif;font-size:26px;font-weight:400;}
.empty-state p {font-size:12px;color:var(--muted);}
.login-panel {margin-block:65px 75px;gap:70px;}
.login-story {align-self:stretch;display:flex;flex-direction:column;justify-content:center;position:relative;min-height:470px;padding:25px 0;}
.login-story h1 {font-size:clamp(40px,4.4vw,64px);line-height:1.5;}
.login-story .eyebrow {font-size:9px;}
.login-story:after {content:"";position:absolute;width:230px;height:290px;border:1px solid var(--line);border-radius:120px 120px 0 0;right:20px;bottom:15px;pointer-events:none;z-index:-1;}
.login-story .story-description {font-size:14px;line-height:2;}
.login-signature {margin-top:45px;font-size:9px;}
.login-card {padding:34px 36px;background:var(--paper);border:0;border-radius:16px;}
.login-card h2 {font-size:26px;margin-top:24px;}
.login-card .muted {font-size:12px;line-height:1.9;}
.login-card .inline-field {margin-top:22px;}
.login-card input:not([type=checkbox]) {border:0;border-bottom:1px solid var(--line);background:#f2f0e9;border-radius:6px;padding:14px;font-size:13px;}
.login-card .login-submit {border-radius:8px;}
.local-login-hint {font-size:11px;color:var(--muted);padding-top:15px;border-top:1px solid var(--line);margin-bottom:0;}
.login-card .login-note {font-size:10px;}
footer {padding-block:32px;margin-top:50px;}
dialog {border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:30px;}
dialog::backdrop {background:rgba(32,32,30,.35);backdrop-filter:blur(5px);}
.key-preview-dialog {width:min(760px,calc(100vw - 32px));max-width:none;max-height:88svh;padding:34px;}
.key-preview-heading {display:flex;justify-content:space-between;align-items:start;gap:20px;}
.key-preview-heading .eyebrow {font-weight:400;font-size:10px;letter-spacing:.03em;margin-bottom:14px;}
.key-preview-heading h2 {font-family:'Songti TC',serif;font-size:30px;font-weight:500;margin:0;}
#closeKeyPreview {font-size:28px;border:0;background:none;min-width:36px;min-height:36px;}
.key-preview-stage {height:310px;display:grid;place-items:center;background:#f2f0e9;margin:28px 0;border-radius:12px;}
.key-preview-stage .key-scene {width:340px;height:260px;max-width:100%;}
.key-preview-phases {display:flex;gap:10px;flex-wrap:wrap;}
.key-preview-phases button {background:none;border:1px solid var(--line);border-radius:6px;padding:9px 15px;font-size:12px;min-height:40px;}
.key-preview-phases button[aria-pressed=true] {background:#eeece5;border-color:var(--ink);}
.key-preview-footer {display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:23px;}
.key-preview-footer p {font-size:11px;color:var(--muted);max-width:300px;margin:0;line-height:1.9;}
.key-preview-footer .primary {white-space:nowrap;padding:12px 18px;}
.motion-paused .key-scene *, .motion-paused .lock-item {transition:none!important;}
@media(min-width:1100px) { .lock-panel {position:sticky;top:110px;align-self:start;} .lock-list {max-height:65vh;overflow:auto;scrollbar-width:thin;} }
@media(max-width:1099px) {
 .topbar,main,footer {padding-inline:30px;}
 .topbar:after {left:30px;right:30px;}
 .local-preview-bar,#demoBanner {padding-inline:30px;}
 .intro-main {gap:25px;}
 .page-heading {grid-template-columns:minmax(0,1fr) 190px;gap:20px 25px;}
 .workspace-grid {grid-template-columns:285px minmax(0,1fr);gap:25px;}
 .detail-stack {padding-left:25px;}
 .detail-panel {padding:24px;}
 .login-panel {gap:35px;}
 .login-card {padding:28px;}
 .header-actions {gap:12px;}
}
@media(max-width:820px) {
 .topbar,main,footer {padding-inline:22px;}
 .topbar:after {left:22px;right:22px;}
 body > .topbar {padding-block:12px;min-height:76px;gap:10px;}
 .wordmark .key-scene.brand-mark {width:54px;height:42px;}
 .wordmark-en {font-size:17px;}
 .wordmark-zh {font-size:17px;gap:8px;}
 .wordmark-copy {gap:4px;}
 .local-preview-bar {padding:9px 22px;gap:8px;flex-wrap:wrap;}
 .local-preview-bar small {display:none;}
 .local-preview-bar > div {gap:18px;}
 .local-preview-bar button {font-size:10px;}
 #demoBanner {padding:8px 22px;font-size:9px;line-height:1.9;}
 .page-heading {padding-block:24px 26px;grid-template-columns:minmax(0,1fr);gap:20px;}
 .intro-main {justify-content:space-between;align-items:end;gap:18px;}
 .page-heading h1 {font-size:34px;}
 .page-heading .muted {font-size:11px;}
 .brand-field {border-left:0;border-top:1px solid var(--line);padding:15px 0 0;display:grid;grid-template-columns:auto 1fr;column-gap:15px;align-items:center;}
 .brand-field .space-kicker,.brand-caption {display:none;}
 .brand-field select {width:100%;min-height:34px;font-size:16px;}
 .overview {margin-bottom:26px;padding-block:19px;}
 .metric-card {padding-inline:16px;}
 .metric {font-size:38px;}
 .metric-kicker {font-size:10px;}
 .metric+span,.pin-status-detail {font-size:10px;}
 .overview-note {padding-left:0;}
 .workspace-grid {display:block;}
 .detail-stack {border:0;padding-left:0;}
 .detail-panel {padding:24px 20px;}
 .lock-list {max-height:none;}
 .lock-panel {position:static;}
 .lock-item {min-height:82px;}
 .login-panel {margin-block:28px 40px;grid-template-columns:1fr;gap:25px;}
 .login-story {min-height:0;padding:10px 0;}
 .login-story h1 {font-size:42px;margin:15px 0;}
 .login-story:after {width:140px;height:170px;right:0;bottom:0;}
 .login-signature {display:none;}
 .login-story .story-description {font-size:12px;}
 .login-story .eyebrow {font-size:9px;margin-bottom:0;}
 .login-card {padding:25px 24px;}
 .key-preview-dialog {padding:22px;}
 .key-preview-heading h2 {font-size:24px;}
 .key-preview-stage {height:250px;}
 .key-preview-stage .key-scene {width:280px;height:220px;}
 .key-preview-phases {gap:7px;}
 .key-preview-phases button {padding:8px 10px;font-size:11px;}
 .key-preview-footer {flex-direction:column;align-items:start;gap:17px;}
}
@media(max-width:480px) {
 .wordmark-copy {flex-direction:column;align-items:flex-start;gap:5px;}
 .wordmark-zh {display:flex;font-size:16px;}
 .wordmark-zh:before {display:none;}
 .header-actions {gap:7px;}
 .motion-toggle {font-size:9px;min-height:38px;}
 .header-menu > summary {font-size:10px;padding-inline:4px;}
 .wordmark-en {font-size:16px;}
 .wordmark .key-scene.brand-mark {width:48px;height:39px;}
 .local-preview-bar > span {font-size:10px;}
 .intro-label {gap:10px;font-size:8px;}
 .intro-label > span:last-child {font-size:9px;}
 .intro-main {align-items:start;}
 .page-heading h1 {font-size:31px;}
 .page-heading .muted {font-size:10px;max-width:84px;}
 .metric-card {padding-inline:10px;}
 .metric {font-size:34px;}
 .metric-card .pin-status-main {font-size:15px;gap:4px;}
 .metric-kicker {font-size:10px;gap:4px;}
 .metric-kicker .symbol-svg {width:13px;height:13px;}
 .metric+span {font-size:9px;}
 .pin-status-detail {font-size:9px;}
 .local-preview-bar {justify-content:center;}
 .local-preview-bar > div {width:100%;justify-content:space-between;gap:12px;}
 .detail-panel {border-radius:12px;}
 .detail-title {gap:9px;font-size:18px;}
 .detail-actions {gap:7px;}
 .detail-actions .primary,.detail-actions .secondary {font-size:11px;}
 .key-preview-stage {height:210px;}
}
@media(prefers-reduced-motion:reduce) {
 .key-scene *, .lock-item, .primary,.secondary {animation:none!important;transition:none!important;}
}
@media(max-width:480px) {
  .detail-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .detail-actions .primary,.detail-actions .secondary {white-space:nowrap;display:inline-flex;justify-content:center;align-items:center;gap:6px;padding-inline:8px;font-size:10px;min-width:0;}
  .detail-actions .symbol-svg {width:15px;height:15px;}
}

/* Keep the lock name primary in the mobile detail sheet as well. */
@media(max-width:820px) {
 .detail-title .detail-room {font-size:22px;}
 .detail-top .detail-title > span:last-child {font-size:49px;}
}
@media(max-width:479px) {
 .detail-title .detail-room {font-size:20px;}
 .detail-top .detail-title > span:last-child {font-size:41px;}
}