.wk-workspace, .wk-account, .wk-result { --wk-line:rgba(255,255,255,.09); --wk-muted:#96989f; --wk-accent:#ffab6e; --wk-white:#f2eee9; color:var(--wk-white); }
.wk-workspace { display:grid; gap:22px; max-width:1200px; margin:0 auto; }
.wk-back { width:fit-content; color:var(--wk-muted); text-decoration:none; font-size:13px; padding:4px 0; }
.wk-back:hover, .wk-text-link:hover { color:#fff; }
.wk-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.wk-eyebrow, .wk-label { font:10px/1.5 'IBM Plex Mono',monospace; letter-spacing:.13em; color:var(--wk-accent); }
.wk-heading h1 { display:flex; align-items:center; gap:13px; font-size:36px; letter-spacing:-1.5px; margin:10px 0; }
.wk-heading p { margin:0; max-width:560px; font-size:14px; color:var(--wk-muted); }
.wk-mark { display:inline-block; width:24px; height:24px; flex:none; background:currentColor; mask:url('/static/wallkid/wallkid-mark.png') center/contain no-repeat; -webkit-mask:url('/static/wallkid/wallkid-mark.png') center/contain no-repeat; }
.wk-heading .wk-mark { width:36px; height:36px; }
.wk-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:16px; align-items:start; }
.wk-column { display:grid; gap:16px; min-width:0; }
.wk-panel { min-width:0; border:1px solid var(--wk-line); border-radius:20px; padding:26px; background:radial-gradient(ellipse at 0 0,rgba(193,116,57,.04),transparent 50%),#0b0c0e; }
.wk-workspace .wk-panel { padding:20px; border-radius:14px; }
.wk-section-title { display:flex; gap:13px; align-items:flex-start; margin-bottom:24px; }
.wk-section-title h2 { font-size:18px; letter-spacing:-.4px; margin:0 0 6px; }
.wk-workspace .wk-section-title { align-items:center; justify-content:space-between; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--wk-line); min-height:35px; }
.wk-workspace .wk-section-title h2 { margin:0; font-size:16px; line-height:1.4; }
.wk-refresh { display:grid; place-items:center; flex:none; width:34px; height:34px; margin:-8px -6px -8px 0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
.wk-refresh img { filter:brightness(0) invert(.65); }
.wk-refresh:hover { background:#ffffff09; }
.wk-refresh:focus-visible { outline:2px solid #f5bb86; outline-offset:2px; }
.wk-refresh[aria-busy=true] img { animation:wk-spin .9s linear infinite; }
.wk-section-title p, .wk-details p { font-size:12px; line-height:1.65; margin:0; color:var(--wk-muted); }
.wk-section-title .wk-state { margin-left:auto; }
.wk-step { font:11px/28px 'IBM Plex Mono',monospace; color:var(--wk-accent); border:1px solid #533821; border-radius:8px; width:29px; text-align:center; flex:none; }
.wk-form { display:grid; gap:19px; }
.wk-workspace .wk-form { gap:12px; }
.wk-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wk-field { display:flex; flex-direction:column; gap:9px; min-width:0; font-size:12px; color:#d3d3d6; }
.wk-field--row { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; align-items:start; }
.wk-field--row > label { padding-top:13px; font-weight:500; }
.wk-field-control { display:grid; min-width:0; gap:6px; }
.wk-save-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:2px; }
.wk-save-meta { display:grid; gap:4px; text-align:right; font-size:10px; line-height:1.5; color:var(--wk-muted); }
.wk-save-meta small { font-size:10px; }
.wk-save-meta [data-dirty=true] { color:var(--wk-accent); }
[data-settings-revision] { font-family:'IBM Plex Mono',monospace; }
.wk-field input { width:100%; min-width:0; border:1px solid var(--wk-line); border-radius:10px; height:46px; padding:11px 13px; color:#eee; font:13px/1.4 'IBM Plex Sans',sans-serif; background:#101114; outline:none; }
.wk-field input:focus-visible { border-color:#c9854d; box-shadow:0 0 0 3px #e9953220; }
.wk-field input[readonly] { color:#a5a8b0; font-family:'IBM Plex Mono',monospace; font-size:11px; }
.wk-field input::placeholder { color:#676a73; }
.wk-field small, .wk-hint { font-size:11px; color:var(--wk-muted); line-height:1.7; }
.wk-hint { margin:0; }
.wk-copy-row { display:flex; gap:8px; }
.wk-copy-row textarea { width:100%; min-width:0; resize:none; padding:11px 12px; border:1px solid var(--wk-line); border-radius:10px; background:#14171c; color:#a5a8b0; font:11px/1.6 'IBM Plex Mono',monospace; overflow-wrap:anywhere; }
.wk-copy-row textarea:focus-visible { outline:2px solid #f5bb86; outline-offset:2px; }
.wk-copy-row textarea::placeholder { color:#676a73; }
.wk-mobile-summary { display:none; }
.wk-icon-button { width:46px; flex:none; border:1px solid var(--wk-line); border-radius:10px; background:transparent; color:#ddd; }
.wk-icon-button img { filter:brightness(0) invert(.85); }
.wk-toggle { display:flex; align-items:center; gap:12px; min-height:66px; position:relative; padding:12px 0; border-block:1px solid var(--wk-line); cursor:pointer; }
.wk-toggle > span:first-child { flex:1; }
.wk-toggle strong, .wk-toggle small { display:block; }
.wk-toggle strong { font-size:13px; font-weight:500; }
.wk-toggle small { font-size:11px; color:var(--wk-muted); margin-top:5px; }
.wk-toggle input { position:absolute; opacity:0; width:44px; height:26px; right:0; }
.wk-toggle-track { width:44px; height:26px; border:1px solid #474951; border-radius:20px; background:#25272c; flex:none; transition:background .18s; }
.wk-toggle-track::after { content:''; display:block; width:18px; height:18px; border-radius:50%; margin:3px; background:#c8c8cc; transition:transform .18s; }
.wk-toggle input:checked + .wk-toggle-track { background:#ac652e; border-color:#db8c50; }
.wk-toggle input:checked + .wk-toggle-track::after { transform:translateX(18px); background:#fff1e6; }
.wk-toggle input:focus-visible + .wk-toggle-track { outline:2px solid #ffc18d; outline-offset:4px; }
.wk-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.wk-button { display:inline-flex; justify-content:center; align-items:center; gap:9px; min-height:44px; padding:11px 16px; border:1px solid #303136; border-radius:10px; font:500 12px/1.4 'IBM Plex Sans',sans-serif; color:#e5e5e7; background:#17181c; text-decoration:none; cursor:pointer; transition:border-color .18s,background .18s; }
.wk-button:hover { background:#222328; color:#fff; border-color:#64646c; }
.wk-button--primary { color:#ffe2ca; border-color:#71441d; background:linear-gradient(135deg,#58351c,#352214); }
.wk-button--primary:hover { background:#664020; border-color:#c58246; }
.wk-button--graphite { background:linear-gradient(120deg,#31353d,#20232a); border-color:#41464f; }
.wk-button--graphite:hover { background:#393e48; }
.wk-button--unavailable:disabled { cursor:not-allowed; background:#ffffff04; border-color:#ffffff08; }
.wk-button:focus-visible, .wk-icon-button:focus-visible, .wk-text-link:focus-visible { outline:2px solid #f5bb86; outline-offset:4px; }
.wk-button:disabled { opacity:.55; cursor:wait; }
.wk-button[aria-busy=true]::after { content:''; width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:wk-spin .9s linear infinite; }
.wk-state { font-size:10px; color:#b5b6bc; padding:7px 10px; border:1px solid var(--wk-line); border-radius:7px; white-space:normal; }
.wk-state[data-on=true] { color:#8ed8bc; border-color:#275b47; }
.wk-checks { display:grid; gap:16px; }
.wk-workspace .wk-checks .wk-section-title { margin-bottom:0; }
.wk-check { position:relative; display:grid; gap:8px; padding-bottom:20px; border-bottom:1px solid var(--wk-line); }
.wk-check:last-child { padding-bottom:0; border-bottom:0; }
.wk-check-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:10px; row-gap:7px; }
.wk-check-heading h3 { font-size:12px; margin:0; font-weight:500; }
.wk-check-status { display:inline-flex; align-items:center; gap:7px; font-size:11px; color:#bfc0c6; }
.wk-monitor-details { font-size:11px; color:var(--wk-muted); }
.wk-monitor-details summary { cursor:pointer; padding:5px 0; }
.wk-monitor-details[open] .wk-hint { margin-top:6px; }
.wk-check strong { display:block; font-size:15px; font-weight:500; margin-top:6px; }
.wk-check small { font-size:11px; color:var(--wk-muted); overflow-wrap:anywhere; }
.wk-check dl { margin:9px 0 0; display:grid; gap:9px; }
.wk-check dl > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; }
.wk-check dt, .wk-check dd { margin:0; font-size:11px; font-weight:400; color:var(--wk-muted); }
.wk-check dd { color:#d5d6d9; }
.wk-indicator { width:7px; height:7px; flex:none; border-radius:50%; background:#72747f; box-shadow:0 0 9px #72747f40; }
.wk-indicator[data-state=healthy] { background:#7bdab6; box-shadow:0 0 12px #7bdab661; }
.wk-indicator[data-state=unavailable], .wk-indicator[data-state=configuration_error] { background:#ec897d; box-shadow:0 0 10px #ec897d50; }
.wk-indicator[data-state=stale], .wk-indicator[data-state=degraded], .wk-indicator[data-state=recovering] { background:#e5b273; box-shadow:0 0 10px #e5b27350; }
.wk-actions--stack { display:grid; grid-template-columns:1fr; }
.wk-details { font-size:12px; border-top:1px solid var(--wk-line); padding-top:16px; }
.wk-details summary { color:#cacbd0; cursor:pointer; min-height:28px; }
.wk-details[open] { display:grid; gap:14px; }
.wk-details[open] > :not(summary) { margin-top:12px; }
.wk-text-link { color:#d2ac8b; font-size:12px; text-decoration:none; display:inline-block; }
.wk-details a { margin-left:0; display:block; }
.wk-notice { border:1px solid #624326; border-radius:11px; padding:13px 16px; background:#a5651c0d; color:#ebc7a9; font-size:12px; line-height:1.65; margin:0; overflow-wrap:anywhere; }
.wk-notice[data-error=true] { border-color:#704344; color:#edb1ae; background:#a139390a; }
.wk-notice--quiet { border-color:#373028; color:#c7b198; }
.wk-export { display:grid; gap:20px; }
.wk-workspace .wk-export .wk-section-title { margin-bottom:0; }
.wk-export .wk-state { font-size:9px; padding:4px 7px; }
.wk-export-notice { display:flex; gap:12px; align-items:flex-start; padding:13px; border:1px solid #b079303d; border-radius:9px; background:linear-gradient(105deg,#b879211a,#6f461309); color:#e1bd8e; }
.wk-alert-icon { display:grid; place-items:center; flex:none; width:21px; height:21px; border-radius:50%; background:#e2a452; color:#201406; font:bold 14px 'IBM Plex Sans',sans-serif; box-shadow:0 0 15px #e4a5551c; }
.wk-export-notice strong { display:block; font-size:12px; line-height:1.5; font-weight:500; }
.wk-export-notice p { margin:4px 0 0; font-size:11px; line-height:1.5; color:#bda78d; }
.wk-export-overview { display:grid; grid-template-columns:minmax(100px,.65fr) minmax(0,1fr); gap:16px; }
.wk-export-total { display:flex; flex-direction:column; justify-content:center; gap:5px; }
.wk-export-total strong { font:600 26px/1.1 'IBM Plex Mono',monospace; color:#f2eee9; }
.wk-export-total > span, .wk-export-fields > span { font-size:11px; color:var(--wk-muted); }
.wk-export-fields { border-left:1px solid var(--wk-line); padding-left:16px; }
.wk-export-fields ul { list-style:none; display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 0; padding:0; }
.wk-export-fields li { border:1px solid #41475255; border-radius:20px; background:#27303c44; color:#bbc4cf; padding:4px 8px; font-size:10px; line-height:1.25; }
.wk-progress { display:flex; list-style:none; gap:10px; padding:0; margin:0; }
.wk-progress li { display:flex; align-items:center; gap:7px; flex:1; min-width:0; font-size:10px; color:#777b84; }
.wk-progress li:not(:last-child)::after { content:''; height:1px; flex:1; min-width:8px; background:var(--wk-line); margin-left:3px; }
.wk-progress li:last-child { flex:0 1 auto; }
.wk-progress-dot { display:grid; place-items:center; flex:none; width:15px; height:15px; border:2px solid #383e47; border-radius:50%; }
.wk-progress [data-state=pending], .wk-progress [data-state=running] { color:#d6c0a9; }
.wk-progress [data-state=pending] .wk-progress-dot, .wk-progress [data-state=running] .wk-progress-dot { border-color:#d6a16d; box-shadow:0 0 10px #d6a16d20; }
.wk-progress [data-state=running] .wk-progress-dot::after { content:''; width:5px; height:5px; border-radius:50%; background:#d6a16d; }
.wk-progress [data-state=ready] { color:#8ed8bc; }
.wk-progress [data-state=ready] .wk-progress-dot { border-color:#6ab396; }
.wk-progress [data-state=ready] .wk-progress-dot::after { content:''; width:6px; height:3px; border-left:1px solid #8ed8bc; border-bottom:1px solid #8ed8bc; transform:translateY(-1px) rotate(-45deg); }
.wk-export-summary { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:6px 12px; }
.wk-export-summary p { flex:1; min-width:0; overflow-wrap:anywhere; }
.wk-export-summary > span { white-space:nowrap; }
.wk-entry .wk-toggle { padding:0; border:0; min-height:44px; margin:-5px 0 8px; }
.wk-entry .wk-toggle strong { font-size:12px; font-weight:400; }
.wk-entry-preview { display:flex; justify-content:center; align-items:center; position:relative; gap:12px; min-height:54px; padding:12px; margin-bottom:12px; border:1px solid #41464f; border-radius:8px; background:linear-gradient(110deg,#30363d,#20242a); color:#eef0f2; font-size:16px; font-weight:500; }
.wk-entry-preview .wk-mark { width:30px; height:30px; color:#c0d5e9; }
.wk-registration > .wk-hint { margin-bottom:14px; }
.wk-application > summary { width:100%; list-style:none; }
.wk-application > summary::-webkit-details-marker { display:none; }
.wk-application[open] > :not(summary) { margin-top:14px; }
.wk-application textarea { width:100%; resize:vertical; min-height:170px; border:1px solid var(--wk-line); border-radius:9px; padding:12px; color:#bfc5ce; background:#07090b; font:11px/1.7 'IBM Plex Mono',monospace; }
.wk-application textarea:focus-visible { outline:2px solid #f5bb86; outline-offset:2px; }
.wk-application > .wk-button { width:100%; }
.wk-export-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:0; gap:18px; padding-block:5px; }
.wk-export-stats > div + div { border-left:1px solid var(--wk-line); padding-left:20px; }
.wk-export-stats dt { font-weight:400; color:var(--wk-muted); font-size:11px; margin-bottom:8px; }
.wk-export-stats dd { font:23px 'IBM Plex Mono',monospace; margin:0; }
.wk-preview { padding-top:18px; display:grid; gap:15px; font-size:12px; }
.wk-confirm { display:flex; align-items:flex-start; gap:11px; font-size:12px; line-height:1.6; color:#babbc1; cursor:pointer; padding:8px 0; }
.wk-confirm input { accent-color:#e99557; width:18px; height:18px; flex:none; margin-top:2px; }
.wk-preview pre { color:#aaa; max-height:220px; overflow:auto; font-size:11px; }
.wk-footnote { font-size:11px; line-height:1.7; color:#777b84; }
.wk-account { max-width:590px; margin:18px auto; display:grid; gap:22px; }
.wk-account .wk-panel { display:grid; gap:24px; }
.wk-result { max-width:480px; margin:8vh auto; padding:20px; display:grid; gap:26px; text-align:center; }
.wk-result .brand-logo { width:85px; height:100px; }
.wk-result .wk-panel { display:grid; gap:22px; }
.wk-result h1 { font-size:25px; margin:0; }
.wk-result p { font-size:13px; line-height:1.7; margin:0; color:var(--wk-muted); }
.wk-result .wk-actions { justify-content:center; gap:24px; }
.wk-result .wk-field { text-align:left; }
.wk-result input[name=code] { font:22px 'IBM Plex Mono',monospace; text-align:center; letter-spacing:.45em; }
.wk-login-button { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; min-height:48px; margin-top:16px; padding:12px 16px; color:#ebebed; border:1px solid #45474f; border-radius:8px; background:#22242a; font:500 14px/1.4 'IBM Plex Sans',sans-serif; text-decoration:none; transition:background .18s,border-color .18s; }
.wk-login-button:hover { color:#fff; background:#2e3037; border-color:#787983; }
.wk-login-divider { display:flex; align-items:center; gap:14px; margin:20px 0 12px; font-size:11px; color:#929ba9; }
.wk-login-divider::before, .wk-login-divider::after { content:''; flex:1; height:1px; background:#b9c5d524; }
.wk-login-divider + .wk-login-button { margin-top:0; background:linear-gradient(115deg,#303640,#22252c); }
.wk-login-arrow { position:absolute; right:16px; color:#cbd3dc; font:20px/1 'IBM Plex Sans',sans-serif; }
.wk-login-button .wk-spinner { position:absolute; right:16px; }
.wk-login-button[aria-busy=true] .wk-login-arrow { visibility:hidden; }
.wk-login-help { margin:10px 0 0; text-align:center; font:11px/1.6 'IBM Plex Sans',sans-serif; color:#9ba5b5; }
.wk-login-button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.wk-spinner { display:none; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; }
.wk-login-button[aria-busy=true] .wk-spinner { display:block; animation:wk-spin .9s linear infinite; }
.wk-login-button[aria-busy=true] { opacity:.8; cursor:progress; }
[hidden].wk-notice, [hidden].wk-actions, [hidden].wk-preview, [hidden].wk-confirm, [hidden].wk-button { display:none; }
@keyframes wk-spin { to { transform:rotate(360deg); } }
@media(max-width:1100px) { .wk-layout { grid-template-columns:1fr; } .wk-column { display:contents; } .wk-connection { order:1; } .wk-checks { order:2; } .wk-entry { order:3; } .wk-registration { order:4; } .wk-export { order:5; } }
@media(max-width:600px) { .wk-workspace { gap:18px; } .wk-heading { align-items:flex-start; flex-direction:column; gap:14px; } .wk-heading h1 { font-size:30px; } .wk-heading p { font-size:12px; } .wk-panel, .wk-workspace .wk-panel { padding:18px 16px; border-radius:14px; } .wk-fields { grid-template-columns:1fr; } .wk-field--row { grid-template-columns:1fr; gap:7px; } .wk-field--row > label { padding:0; } .wk-save-row { flex-wrap:wrap; } .wk-save-row > .wk-button { width:100%; } .wk-save-meta { width:100%; display:flex; justify-content:space-between; gap:10px; text-align:left; } .wk-refresh { width:44px; height:44px; } .wk-actions .wk-button { flex:1 1 100%; } .wk-export-overview { grid-template-columns:minmax(80px,.65fr) minmax(0,1fr); gap:12px; } .wk-export-fields { padding-left:12px; } .wk-progress { gap:5px; } .wk-progress li { gap:5px; font-size:9px; } .wk-progress li:not(:last-child)::after { min-width:3px; margin-left:0; } .wk-account { margin:0 auto; } .wk-field input, .wk-field input[readonly], .wk-application textarea { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .wk-button, .wk-login-button, .wk-toggle-track, .wk-toggle-track::after { transition:none; } .wk-spinner, .wk-login-button[aria-busy=true] .wk-spinner, .wk-button[aria-busy=true]::after, .wk-refresh[aria-busy=true] img { animation:none; } }
@media(max-width:600px) {
  .wk-workspace, .wk-layout { gap:12px; }
  .wk-heading { flex-direction:row; align-items:center; gap:12px; }
  .wk-heading h1 { font-size:25px; margin:0; gap:9px; }
  .wk-heading .wk-mark { width:27px; height:27px; }
  .wk-heading .wk-eyebrow, .wk-heading p { display:none; }
  .wk-heading > .wk-state { max-width:135px; font-size:9px; }
  .wk-mobile-summary { display:grid; padding:6px 16px; background:#0b0c0e; border:1px solid var(--wk-line); border-radius:12px; }
  .wk-mobile-summary > div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; font-size:12px; }
  .wk-mobile-summary > div + div { border-top:1px solid var(--wk-line); }
  .wk-copy-row textarea { font:16px/1.5 'IBM Plex Sans',sans-serif; min-height:74px; }
  .wk-export { order:3; }
  .wk-entry { order:4; }
  .wk-registration { order:5; }
  .wk-export-overview { grid-template-columns:1fr; gap:12px; }
  .wk-export-fields { border:0; padding:0; }
  .wk-progress li { font-size:10px; }
  .wk-login-button { min-height:52px; padding-inline:40px; }
}