/* Keep the preview, controls and gallery together; explanations expand on demand. */
body {padding:12px 20px 20px;gap:10px;}
.k-header,.k-workspace,.k-help {width:100%;max-width:1240px;min-width:0;}
.k-heading,.k-toolbar {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.k-heading {justify-content:space-between;}
.k-heading h1 {width:auto;margin:0;font-size:20px;letter-spacing:.3px;}
.k-heading h1 span {font-size:12px;letter-spacing:0;color:var(--muted);-webkit-text-fill-color:var(--muted);margin-left:12px;}
.k-heading nav {display:flex;gap:16px;font-size:13px;}
.k-header a,.k-help a {color:var(--accent-2);}
.k-toolbar {margin-top:8px;}
.k-toolbar button,.k-more summary {min-height:36px;padding:7px 12px;font-size:12px;}
#kCardLabel {margin:0 auto 0 0;font-size:12px;color:var(--muted);}
#kSyncStatus {margin:5px 0 0;font-size:11px;line-height:1.5;color:var(--muted);}
.k-more {position:relative;}
.k-more summary,.k-help>summary {cursor:pointer;color:var(--muted);}
.k-more>div {position:absolute;right:0;top:100%;width:min(360px,85vw);padding:16px;background:#1f1f2a;border:1px solid #454551;border-radius:12px;z-index:30;box-shadow:0 14px 45px #0009;font-size:13px;line-height:1.7;}
.k-workspace {display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:10px 18px;align-items:start;}
.k-stage {min-width:0;display:flex;flex-direction:column;align-items:center;}
.k-stage .canvas-wrap {width:min(100%, max(260px,calc(100dvh - 365px)));max-width:640px;}
.k-stage .status-bar {width:100%;padding:7px 10px;margin-top:6px;gap:5px 12px;border-radius:8px;font-size:11px;}
.k-workspace .panel {grid-column:2;grid-row:1 / span 2;width:100%;margin:0;padding:12px;border-radius:12px;}
.k-workspace .panel .row {margin-bottom:9px;}
.k-workspace .panel .row:last-child {margin:0;}
.k-workspace .row-label {margin-bottom:5px;}
.k-workspace button {min-height:38px;padding:8px 6px;}
.k-workspace select {min-height:40px;padding:8px 28px 8px 10px;}
.k-workspace input[type=range] {height:24px;margin:0;background:linear-gradient(var(--line),var(--line)) center / 100% 4px no-repeat;}
.k-workspace .toggle {padding:0;}
.k-workspace .switch {min-height:28px;height:28px;padding:0;width:46px;flex-shrink:0;}
.k-workspace .switch::after {top:4px;left:4px;}
.k-workspace .gallery-section {grid-column:1;min-width:0;width:100%;margin:0;}
.k-workspace .gallery-header {margin-bottom:2px;}
.k-workspace .gallery-empty {padding:12px;line-height:1.5;}
.k-workspace .thumb {width:76px;height:76px;}
.k-workspace .thumb .thumb-btn {min-height:28px;padding:0;}
.k-help {font-size:12px;line-height:1.7;}
.k-help>summary {padding:6px 0;}
.k-help .hint {width:100%;max-width:none;margin:8px 0;padding:12px;}
button:focus-visible,summary:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {outline:2px solid var(--accent-2);outline-offset:3px;}
@media(min-width:760px) and (max-width:1050px) {
  body {padding:12px 16px 16px;}
  .k-workspace {grid-template-columns:minmax(0,1fr) 320px;gap:10px 12px;}
  .k-heading h1 {font-size:18px;}
}
@media(pointer:coarse) {
  .k-toolbar button,.k-more summary,.k-workspace button,.k-workspace select {min-height:44px;}
  .k-workspace .thumb {width:92px;height:92px;}
  .k-workspace .thumb .thumb-btn {min-height:32px;min-width:32px;}
  .k-workspace .switch {min-height:32px;height:32px;}
  .k-workspace .switch::after {top:6px;}
  .k-workspace input[type=range] {height:30px;}
}
@media(max-width:759px) {
  body {padding:12px 12px 20px;gap:8px;}
  .k-heading h1 {font-size:18px;}
  .k-heading h1 span {display:block;margin:3px 0 0;font-size:11px;}
  .k-heading nav {font-size:12px;gap:10px;}
  #kCardLabel {flex-basis:100%;font-size:11px;}
  .k-toolbar {gap:4px;margin-top:4px;}
  .k-toolbar button,.k-more summary {padding:8px;font-size:12px;min-height:40px;}
  .k-more {margin-left:auto;}
  .k-workspace {grid-template-columns:minmax(0,1fr);gap:8px;}
  .k-stage .canvas-wrap {width:min(100%, 48dvh);min-width:0;}
  .k-workspace .panel {grid-column:1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;}
  .k-workspace .panel .row {margin:0;min-width:0;}
  .k-workspace .panel .row:nth-child(3),.k-workspace .panel .row:nth-child(4) {grid-column:1 / -1;}
  .k-workspace .panel .row:last-child {display:flex;align-items:center;}
  .k-workspace .panel .toggle {width:100%;gap:6px;}
  .k-workspace .toggle-label {font-size:11px;}
  .k-workspace .btn-row.two {grid-template-columns:1fr;gap:6px;}
  .k-workspace .gallery-section {grid-column:1;}
  .k-stage .status-bar {gap:4px 9px;padding:6px 8px;}
}