/* Offline (printed book) cover studio: 4-step process motion graph, 1x1 full-width preview, guest login gate. */
.pc-studio[hidden],[data-cover-online][hidden],[data-cover-ai-pane][hidden],.pc-panel[hidden],.pc-panel [hidden],.pc-guest-banner[hidden] { display:none !important; }
.pc-mode { display:grid; gap:18px; margin-block:36px 40px; }
.pc-mode h2 { margin:0; font:750 28px/1.4 var(--font-ui); letter-spacing:-.8px; }
.pc-mode-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.pc-mode-choices button { display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:4px; align-items:center; text-align:left; padding:20px 22px; border:1.5px solid var(--rm-line,#d9d1c3); border-radius:14px; background:var(--rm-paper,#fffdf8); color:var(--rm-ink,#26241f); cursor:pointer; font:inherit; transition:border-color .2s,background-color .2s,box-shadow .2s; }
.pc-mode-choices button:hover { border-color:var(--rm-purple,#6442d6); }
.pc-mode-choices button.is-active { border-color:var(--rm-purple,#6442d6); background:color-mix(in srgb,var(--rm-purple,#6442d6) 8%,var(--rm-paper,#fffdf8)); box-shadow:0 0 0 1px var(--rm-purple,#6442d6) inset; }
.pc-mode-choices .pc-mode-icon { grid-row:1 / span 2; font-size:34px; color:var(--rm-purple,#6442d6); line-height:1; }
.pc-mode-choices strong { font-size:round(nearest,max(var(--rm-ui-type-min,0px),calc(18px * var(--rm-ui-type-scale,1.2))),1px); font-weight:750; }
.pc-mode-choices button > span:last-child { font-size:round(nearest,max(var(--rm-ui-type-min,0px),calc(13px * var(--rm-ui-type-scale,1.2))),1px); line-height:1.6; color:var(--rm-ink-soft,#555); }
.pc-studio { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding-block:40px 24px; }

/* Guest preview notice & click-to-login dialog */
.pc-guest-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; margin-bottom:18px; border:1.5px solid color-mix(in srgb,var(--rm-purple,#6442d6) 42%,var(--rm-line,#d9d1c3)); border-radius:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--rm-purple,#6442d6) 9%,var(--rm-paper,#fffdf8)),var(--rm-paper,#fffdf8)); }
.pc-guest-banner strong { display:block; font-size:16px; margin-bottom:4px; }
.pc-guest-banner p { margin:0; font-size:13.5px; color:var(--rm-ink-soft,#555); line-height:1.55; }
.pc-workspace.is-guest-preview { position:relative; }
.pc-login-dialog { max-width:540px; width:calc(100% - 32px); border:1.5px solid var(--rm-line,#d9d1c3); border-radius:20px; padding:0; background:var(--rm-paper,#fffdf8); color:var(--rm-ink,#26241f); box-shadow:0 28px 64px rgba(18,16,28,.28); }
.pc-login-dialog::backdrop { background:rgba(16,14,24,.56); backdrop-filter:blur(3px); }
.pc-login-dialog-box { display:grid; gap:14px; padding:28px; }
.pc-login-dialog-box h3 { margin:0; font-size:21px; line-height:1.4; }
.pc-login-dialog-box p { margin:0; color:var(--rm-ink-soft,#555); line-height:1.65; font-size:14px; }
.pc-login-features { margin:4px 0; padding-left:20px; display:grid; gap:6px; font-size:13.5px; color:var(--rm-ink,#26241f); }
.pc-login-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

/* 4-Step Process Motion Graph */
@keyframes pcFlowShimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes pcPulseRing { 0%,100% { box-shadow:0 0 0 0 rgba(100,66,214,.36); } 50% { box-shadow:0 0 0 7px rgba(100,66,214,0); } }
@keyframes pcPanelEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.pc-stepper { position:relative; padding:20px 22px; margin-bottom:20px; border:1px solid var(--rm-line,#d9d1c3); border-radius:16px; background:var(--rm-paper,#fffdf8); overflow:hidden; }
.pc-stepper-track { position:relative; height:6px; border-radius:999px; background:color-mix(in srgb,var(--rm-line,#d9d1c3) 65%,transparent); margin:0 12px 18px; overflow:hidden; }
.pc-stepper-fill { position:absolute; inset:0 auto 0 0; width:var(--pc-step-progress,0%); border-radius:999px; background:linear-gradient(90deg,var(--rm-purple,#6442d6),#9b6bff,#4db8ff,var(--rm-purple,#6442d6)); background-size:200% 100%; animation:pcFlowShimmer 4.5s linear infinite; transition:width .48s cubic-bezier(.22,1,.36,1); }
.pc-stepper-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pc-step-tab { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; text-align:left; padding:12px 14px; border:1.5px solid var(--rm-line,#e1d9cc); border-radius:12px; background:var(--rm-paper,#fffdf8); color:var(--rm-ink,#26241f); cursor:pointer; font:inherit; transition:border-color .22s,background-color .22s,transform .18s; }
.pc-step-tab:hover { border-color:var(--rm-purple,#6442d6); transform:translateY(-1px); }
.pc-step-tab.is-active { border-color:var(--rm-purple,#6442d6); background:color-mix(in srgb,var(--rm-purple,#6442d6) 9%,var(--rm-paper,#fffdf8)); box-shadow:0 0 0 1px var(--rm-purple,#6442d6) inset; }
.pc-step-tab.is-done { border-color:color-mix(in srgb,var(--rm-purple,#6442d6) 45%,var(--rm-line,#d9d1c3)); background:color-mix(in srgb,var(--rm-purple,#6442d6) 4%,var(--rm-paper,#fffdf8)); }
.pc-step-node { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; border:2px solid var(--rm-line,#cbbca8); color:var(--rm-ink-soft,#666); background:var(--rm-paper,#fff); transition:all .25s ease; }
.pc-step-tab.is-active .pc-step-node { border-color:var(--rm-purple,#6442d6); background:var(--rm-purple,#6442d6); color:#fff; animation:pcPulseRing 2s infinite; }
.pc-step-tab.is-done .pc-step-node { border-color:var(--rm-purple,#6442d6); background:color-mix(in srgb,var(--rm-purple,#6442d6) 16%,var(--rm-paper,#fff)); color:var(--rm-purple,#6442d6); }
.pc-step-copy { display:grid; gap:2px; min-width:0; }
.pc-step-copy em { font-style:normal; font-size:11px; font-weight:750; letter-spacing:.06em; color:var(--rm-purple,#6442d6); }
.pc-step-copy strong { font-size:14.5px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-step-copy small { font-size:12px; color:var(--rm-ink-soft,#666); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }

/* Step Panels */
.pc-panel { border:1px solid var(--rm-line,#d9d1c3); border-radius:16px; padding:26px; margin-bottom:20px; background:var(--rm-paper,#fffdf8); color:var(--rm-ink,#26241f); animation:pcPanelEnter .26s ease-out; }
.pc-panel-head { display:grid; gap:6px; margin-bottom:6px; }
.pc-step-badge { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--rm-purple,#6442d6); margin-bottom:4px; }
.pc-panel h3 { margin:0; font-size:round(nearest,max(var(--rm-ui-type-min,0px),calc(19px * var(--rm-ui-type-scale,1.2))),1px); }
.pc-help,.pc-panel small { color:var(--rm-ink-soft,#555); font-size:round(nearest,max(var(--rm-ui-type-min,0px),calc(13px * var(--rm-ui-type-scale,1.2))),1px); line-height:1.65; margin:4px 0 0; }
.pc-step-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--rm-line,#e5dec9); }
.pc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.pc-grid.pc-sub { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; }
.pc-grid.pc-el-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pc-grid label,.pc-file { display:grid; gap:6px; min-width:0; font-weight:600; }
.pc-wide { grid-column:1 / -1; }
.pc-panel input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),.pc-panel select,.pc-panel textarea { width:100%; box-sizing:border-box; border:1px solid var(--rm-line,#ccc); border-radius:8px; padding:10px 12px; background:var(--rm-paper,#fff); color:inherit; font:inherit; }
.pc-panel input[readonly] { background:color-mix(in srgb,var(--rm-warm,#eee) 70%,var(--rm-paper,#fff)); }
.pc-panel input[type=color] { width:100%; height:44px; padding:2px; border:1px solid var(--rm-line,#ccc); border-radius:8px; background:var(--rm-paper,#fff); }
.pc-panel input[type=range] { width:100%; }
.pc-panel fieldset { border:1px solid var(--rm-line,#ccc); border-radius:10px; padding:14px 16px; margin:0; min-width:0; }
.pc-inline { display:flex !important; grid-template-columns:none; align-items:flex-start; gap:8px; font-weight:500 !important; cursor:pointer; }
.pc-inline input { margin-top:.35em; flex:none; }
.pc-summary { margin:16px 0 0; padding:12px 14px; border-radius:10px; background:color-mix(in srgb,var(--rm-purple,#6442d6) 8%,var(--rm-paper,#fff)); font-weight:650; }
.pc-summary.is-error { background:#fbe7e4; color:#8c2d22; }
.pc-diagram { display:flex; margin-top:14px; border:1px solid var(--rm-line,#bbb); border-radius:8px; overflow:hidden; min-height:64px; }
.pc-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; overflow:hidden; padding:6px 0; font-size:12px; border-left:1px solid rgba(0,0,0,.18); background:color-mix(in srgb,var(--rm-purple,#6442d6) 10%,var(--rm-paper,#fff)); }
.pc-zone:first-child { border-left:0; }
.pc-zone span { white-space:nowrap; }
.pc-zone b { font-variant-numeric:tabular-nums; }
.pc-zone-bleed { background:repeating-linear-gradient(45deg,#ead6e0,#ead6e0 4px,#f6e9ef 4px,#f6e9ef 8px); }
.pc-zone-spine { background:color-mix(in srgb,var(--rm-purple,#6442d6) 28%,var(--rm-paper,#fff)); }
.pc-zone-backWing,.pc-zone-frontWing { background:color-mix(in srgb,#2f8f6a 14%,var(--rm-paper,#fff)); }
.pc-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; }
.pc-tabs button { border:1px solid var(--rm-line,#ddd); background:transparent; color:inherit; border-radius:20px; padding:8px 16px; cursor:pointer; font:inherit; font-weight:650; }
.pc-tabs button.is-active { background:var(--rm-purple,#6442d6); border-color:var(--rm-purple,#6442d6); color:#fff; }
.pc-variants { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:14px; }
.pc-variants article { display:grid; gap:8px; min-width:0; }
.pc-variants img { width:100%; height:auto; border-radius:8px; border:1px solid var(--rm-line,#ddd); background:#eee; }
.pc-warning { margin:12px 0 0; color:#8a5a00; font-weight:600; }

/* Step 4: 1-Row 1-Column Full-Width Preview & Controls Below */
.pc-editor.is-blocked .pc-editor-layout { opacity:.45; pointer-events:none; }
.pc-editor-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; margin-top:16px; align-items:start; }
.pc-stage-wrap { display:grid; gap:10px; width:100%; min-width:0; }
.pc-stage-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border:1px solid var(--rm-line,#d9d1c3); border-radius:10px; background:color-mix(in srgb,var(--rm-purple,#6442d6) 5%,var(--rm-paper,#fffdf8)); font-size:13px; }
.pc-zoom-group { display:flex; flex-wrap:wrap; gap:6px; }
.pc-zoom-group button { border:1px solid var(--rm-line,#ccc); background:var(--rm-paper,#fff); color:inherit; border-radius:16px; padding:5px 12px; font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; }
.pc-zoom-group button.is-active { background:var(--rm-purple,#6442d6); border-color:var(--rm-purple,#6442d6); color:#fff; }
.pc-stage { width:100%; box-sizing:border-box; background:#232329; border-radius:14px; padding:16px; overflow-x:auto; position:static; }
.pc-stage canvas { display:block; width:100%; max-width:none; height:auto; margin:0 auto; touch-action:none; cursor:grab; border-radius:6px; box-shadow:0 12px 32px rgba(0,0,0,.35); transition:width .2s ease; }
.pc-controls { display:grid; gap:14px; min-width:0; padding:20px; border:1px solid var(--rm-line,#e1d9cc); border-radius:14px; background:color-mix(in srgb,var(--rm-warm,#f6f2e9) 35%,var(--rm-paper,#fffdf8)); }
.pc-controls-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.pc-list { display:flex; flex-wrap:wrap; gap:6px; }
.pc-list button { display:inline-flex; gap:6px; align-items:center; border:1px solid var(--rm-line,#ccc); background:var(--rm-paper,#fff); color:inherit; border-radius:16px; padding:6px 12px; cursor:pointer; font:inherit; font-size:round(nearest,max(var(--rm-ui-type-min,0px),calc(13px * var(--rm-ui-type-scale,1.2))),1px); }
.pc-list button.is-active { background:var(--rm-ink,#222); border-color:var(--rm-ink,#222); color:var(--rm-paper,#fff); }
.pc-list button.is-absent { opacity:.5; }
.pc-add { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pc-add select { width:auto; min-width:130px; }
.pc-toggles { display:flex; flex-wrap:wrap; gap:16px; margin-top:4px; }
.pc-warnings { margin:14px 0 0; padding-left:20px; color:#8c2d22; font-weight:600; }
.pc-warnings:empty { display:none; }
.pc-export { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--rm-line,#e5dec9); }
.pc-export .pc-help { margin:0; flex:1 1 320px; }
@media (max-width:960px) {
  .pc-stepper-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pc-mode-choices,.pc-variants,.pc-grid.pc-el-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px) {
  .pc-stepper-list,.pc-grid,.pc-grid.pc-sub { grid-template-columns:minmax(0,1fr); }
  .pc-panel { padding:18px; }
}

.pc-flow-status { min-height:1.5em; margin:0 0 18px; color:var(--rm-ink-soft); font:650 15px/1.6 var(--font-ui); }
.pc-step-tab:disabled { cursor:not-allowed; opacity:.5; }
.pc-step-nav button:disabled { cursor:not-allowed; opacity:.5; }

.pc-stage { max-height:70dvh; overflow:auto; }
.pc-stage canvas { cursor:default; }
.pc-stage.is-panning canvas { cursor:grabbing !important; }

.pc-diagram { overflow-x:auto; overflow-y:hidden; }
.pc-zone { min-width:44px; }
.pc-zone-bleed { color:#382632; }