/* ============================================================================
   CFOP Lab — 设计系统（浅色 · 苹果风）
   干净 / 专业 / 克制：极淡画布、发丝描边、柔和分层阴影、SF 系统字体、靛蓝强调色。
   本文件同时服务于 登录/注册、教程主页(admin)、编辑器(editor)。
   注意：保留所有 JS 依赖的类名（.ed-fields/.ed-palette/.ed-tools/.ed-inputrow/
   .ed-mine/.ed-rail/.sub/.modeBanner/.save-btn/.ro-mode/.tab-pill/
   .tut-card/.ed-stage 等），仅改观感、不改钩子。
   ============================================================================ */
:root{
  /* 画布与表面 */
  --bg:        #f5f5f7;   /* 苹果经典浅灰画布 */
  --bg-grad-a: #fbfbfd;
  --bg-grad-b: #eef0f4;
  --panel:     #ffffff;
  --panel-2:   #fafafc;
  --panel-3:   #f2f2f7;
  /* 描边（发丝线） */
  --line:      #e6e6eb;
  --line-2:    #d8d8df;
  --line-3:    #c9c9d2;
  /* 文字 */
  --text:      #1d1d1f;   /* 近黑 */
  --text-2:    #3a3a3c;
  --muted:     #6e6e73;   /* 次要 */
  --dim:       #8a8a8f;   /* 三级 / 占位 */
  /* 品牌强调：靛蓝（苹果系统 indigo，兼顾原 blurple 调性） */
  --accent:        #5e5ce6;
  --accent-strong: #4a48cf;
  --accent-soft:   rgba(94,92,230,.10);
  --accent-soft-2: rgba(94,92,230,.16);
  --accent-ink:    #ffffff;
  /* 语义色（苹果原生取值） */
  --danger:     #ff3b30;
  --danger-soft:rgba(255,59,48,.10);
  --warn:       #ff9f0a;
  --ok:         #34c759;
  --pink:       #ff375f;
  --link:       #0071e3;
  /* 阴影：偏移 + 柔化模糊，构成真实景深 */
  --sh-sm:  0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --sh-md:  0 6px 18px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --sh-lg:  0 18px 50px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --sh-btn:0 1px 2px rgba(94,92,230,.25);
  /* 圆角 / 节奏 */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 980px;

  /* ---------------------------------------------------------------------
     主按钮令牌：后台所有「主要动作」（登录 / 保存 / 增加）共用一套。
     观感与官网 CTA 同源 —— 顶部高光 + 底部内阴影 + 外投影 = 立体贴纸，
     只改这里的令牌即可全局换肤（改色只动 --accent）。
     --------------------------------------------------------------------- */
  --btn-r:             13px;                 /* squircle 圆角，内阴影才立得住 */
  --btn-line:          rgba(0,0,0,.06);
  --btn-ink:           var(--accent-ink);
  --btn-bg:            linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  --btn-bg-hover:      linear-gradient(180deg, color-mix(in srgb, var(--accent-strong) 82%, #fff), var(--accent-strong));
  --btn-sh:            var(--cb-bevel);
  --btn-sh-hover:      var(--cb-bevel-hover);
  --btn-sh-active:     var(--cb-bevel-active);
  /* 浅色（tinted）变体：用于「增加」这类次级主按钮 */
  --btn-soft-bg:       var(--accent-soft);
  --btn-soft-bg-hover: var(--accent-soft-2);
  --btn-soft-sh:       inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(94,92,230,.16);

  /* ---------------------------------------------------------------------
     官网首页（index.html）共用令牌：首页演示区的「魔方贴纸按钮」与六色魔方
     仍引用以下变量，后台自身不再使用。保留定义以免首页样式失效。
     --------------------------------------------------------------------- */
  --cb-r: 15px;                                   /* 主按钮方块圆角（squircle） */
  --cb-r-sm: 12px;                                /* 小图标 / 工具按钮 */
  --cb-bevel:        inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -4px 7px rgba(0,0,0,.18), 0 7px 15px rgba(40,40,90,.26), 0 2px 4px rgba(40,40,90,.14);
  --cb-bevel-hover:  inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -4px 9px rgba(0,0,0,.20), 0 15px 30px rgba(40,40,90,.32), 0 3px 6px rgba(40,40,90,.16);
  --cb-bevel-active: inset 0 4px 11px rgba(0,0,0,.30), 0 1px 2px rgba(40,40,90,.18);
  --cube-red:#d8392f; --cube-orange:#ff9f0a; --cube-yellow:#f5c518; --cube-green:#2ecf5b; --cube-teal:#20c4b0; --cube-blue:#0a6cf0; --cube-white:#eef0f4;
  --cube-color:var(--accent); --cube-ink:#fff;     /* 贴纸色：默认=品牌靛蓝 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-grad-a), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
  background-attachment:fixed;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:15px; line-height:1.5;
  min-height:100vh;
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--accent);text-decoration:none}
::selection{background:var(--accent-soft-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* 自定义滚动条（浏览器表面也归设计系统管） */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted)}
*::-webkit-scrollbar-track{background:transparent}

/* ----------------------------- 排版辅助 ----------------------------- */
.page-title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text)}
.section-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.muted{color:var(--muted)}
.dim{color:var(--dim)}

/* ----------------------------- 按钮 ----------------------------- */
/* 主按钮：令牌驱动（顶部高光 + 底部内阴影 + 投影，见 :root 的 --btn-* ） */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--btn-r);
  background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid var(--btn-line);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  box-shadow:var(--btn-sh);
  transition:transform .14s ease, background .15s, box-shadow .15s;
}
.btn-primary:hover{background:var(--btn-bg-hover);box-shadow:var(--btn-sh-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--btn-sh-active)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:42px;padding:0 16px;border-radius:var(--btn-r);
  background:var(--panel);color:var(--text-2);
  border:1px solid var(--line-2);font-size:14px;font-weight:500;transition:.15s;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--panel-2)}

.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 16px;border-radius:var(--btn-r);
  background:var(--danger-soft);color:var(--danger);
  font-size:13.5px;font-weight:600;transition:.15s;
}
.btn-danger:hover{background:rgba(255,59,48,.16)}
.btn-cancel{height:38px;padding:0 16px;border-radius:var(--btn-r);border:1px solid var(--line-2);
  background:var(--panel);color:var(--text-2);font-size:13.5px;font-weight:500;transition:.15s}
.btn-cancel:hover{border-color:var(--line-3);background:var(--panel-2)}

.icon-btn{
  width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line-2);color:var(--muted);transition:.15s;
}
.icon-btn:hover{color:var(--text);border-color:var(--line-3);background:var(--panel-2)}
.icon-btn svg{width:18px;height:18px;fill:currentColor}

/* ----------------------------- 表单字段 ----------------------------- */
.field{display:block;margin-bottom:14px}
.field > label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.field > label .req{color:var(--danger);margin-left:2px}
.text-input,textarea.text-input{
  width:100%;height:46px;padding:0 14px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:12px;color:var(--text);
  font-size:15px;transition:border-color .15s, box-shadow .15s;outline:none;
}
textarea.text-input{height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
.text-input::placeholder{color:var(--muted)}
.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field.has-error .text-input{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}
.field-err{display:none;margin-top:6px;font-size:12.5px;color:var(--danger)}
.field.has-error .field-err{display:block}

/* ----------------------------- 卡片 ----------------------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}

/* ============================ 登录 / 注册 ============================ */
#loginScreen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;
  overflow:auto;padding:24px 0;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(94,92,230,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
}
.login-card{
  width:400px;max-width:92vw;flex:none;margin:auto;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:34px 32px 28px;box-shadow:var(--sh-lg);
}
.login-card h1{margin:0 0 4px;font-size:25px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.login-card .dom{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:11px;letter-spacing:.16em;font-weight:700;margin-bottom:22px}
.login-card .dom::before{content:"";width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#a9a7f5);display:inline-block}
.login-card .hint-line{font-size:12px;color:var(--dim);margin:14px 0 18px;line-height:1.6}
.login-card .big{width:100%;height:48px;margin-top:6px}
.login-card .sub{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.65}
.login-card .sub .switch{color:var(--accent);font-weight:600;cursor:pointer}
.login-card .sub .switch:hover{text-decoration:underline}

/* ============================ 应用外壳（admin 主页） ============================ */
#app{display:none;height:100vh;grid-template-columns:280px 1fr}
#app.on{display:grid}

.sidebar{
  background:var(--panel);border-right:1px solid var(--line);
  padding:24px 18px 20px;display:flex;flex-direction:column;gap:14px;overflow:auto;
}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:0 6px;margin-bottom:4px}
.sidebar .brand .logo{width:34px;height:34px;flex:none}
.sidebar .brand b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.sidebar .brand small{display:block;color:var(--accent);font-size:10px;letter-spacing:.16em;margin-top:3px;font-weight:700}

/* 中间：菜单（占据品牌与个人信息之间的剩余空间，内部垂直居中） */
.sidebar .nav{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:3px;margin:2px 0 0}
.nav-item{
  display:flex;align-items:center;height:42px;padding:0 15px;box-sizing:border-box;
  border:none;background:transparent;color:var(--text-2);border-radius:11px;
  font:600 13.5px/1 ui-sans-serif,system-ui,-apple-system,sans-serif;
  cursor:pointer;text-align:left;transition:background .14s,color .14s;
}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.on{background:var(--accent-soft);color:var(--accent)}

/* 底部：个人信息（昵称 + 邮箱） */
.sidebar .me{
  margin-top:auto;display:flex;align-items:center;gap:11px;min-width:0;
  padding:14px 6px 0;border-top:1px solid var(--line);
}
.avatar{
  width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,#a9a7f5,var(--accent));
  color:#fff;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex:none;box-shadow:var(--sh-sm);
}
.sidebar .me-body{min-width:0;flex:1}
.sidebar .me-nick{
  display:block;width:100%;height:20px;padding:0;border:none;background:transparent;
  color:var(--text);font:650 13.5px/1.3 ui-sans-serif,system-ui,-apple-system,sans-serif;
  outline:none;border-radius:4px;text-overflow:ellipsis;
}
.sidebar .me-nick:hover{background:var(--panel-2)}
.sidebar .me-nick:focus{background:var(--panel-2);box-shadow:0 0 0 3px var(--accent-soft)}
.sidebar .me-nick::placeholder{color:var(--dim);font-weight:500}
.sidebar .me-mail{
  display:block;font-size:11.5px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 操作按钮（导出备份 / 退出登录）：默认常显 */
.me-acts{display:flex;gap:6px;margin-left:auto;flex:none}
.me-act{
  width:32px;height:32px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
  border-radius:10px;display:flex;align-items:center;justify-content:center;transition:.15s;cursor:pointer;
}
.me-act:hover{color:var(--text);border-color:var(--line-3);background:var(--panel-2)}
.me-act.danger:hover{color:var(--danger);border-color:rgba(255,59,48,.35);background:var(--danger-soft)}
.me-act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}

/* 「暂未开通」占位页 */
.page-empty{
  display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:40px 24px 80px;
}
.main.empty .topbar{display:flex}
.main.empty .tabbar,
.main.empty .scroll{display:none}
.main.empty .page-empty{display:flex}
.page-empty .pe-ico{
  background:none;border-radius:0;margin-bottom:8px;
}
.page-empty .pe-ico img{width:110px;height:auto;display:block}
.page-empty .pe-title{margin:0;font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.page-empty .pe-sub{margin:0;font-size:13px;color:var(--dim);max-width:440px;line-height:1.75;text-align:center}

/* 右侧主区：高度锁定整屏，内部由 .list 滚动；标题/tab/状态条 flex:none 固定不动 */
.main{display:flex;flex-direction:column;height:100vh;min-height:0;overflow:hidden;background:transparent}
.topbar{
  padding:22px 30px 6px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  flex:none;
}
.topbar h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
/* 提示条：随内容排在列表末尾（不钉在视口底部），文字居中 */
.main .hint{display:block;text-align:center;padding:6px 20px 22px;font-size:12.5px;color:var(--dim)}

.tabbar{display:flex;align-items:center;gap:8px;padding:14px 30px 4px;flex-wrap:wrap;flex:none}
.tab-pill{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 8px 0 15px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);
  border-radius:var(--r-pill);font-size:13.5px;font-weight:600;transition:.15s;
}
.tab-pill:hover{border-color:var(--accent);color:var(--text)}
.tab-pill.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tab-pill .x{
  width:20px;height:20px;border-radius:50%;border:none;background:transparent;color:var(--dim);
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s;
}
.tab-pill .x:hover{background:var(--danger-soft);color:var(--danger)}
.tab-pill .x[disabled]{opacity:.25;cursor:not-allowed}
.tab-pill.rename{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tab-pill.drop-on{border-color:var(--accent)!important;background:var(--accent-soft-2)!important;box-shadow:0 0 0 3px var(--accent-soft)!important}
.tab-add{
  height:38px;width:38px;border:1px dashed var(--line-3);background:transparent;color:var(--muted);
  border-radius:50%;font-size:18px;transition:.15s;flex:none;
}
.tab-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* 分类管理齿轮（tab 栏最右侧，右对齐） */
.tab-gear{
  margin-left:auto;
  height:38px;width:38px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
  border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.15s;flex:none;
}
.tab-gear:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tab-gear svg{display:block}

/* 分类管理弹层 */
.modal-mask{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(17,19,24,.42);backdrop-filter:blur(3px);
}
.modal-mask.on{display:flex}
.tab-manage{
  width:min(440px,calc(100vw - 48px));max-height:min(70vh,560px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 24px 60px rgba(17,19,24,.25);padding:20px 20px 16px;
}
.tm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tm-head h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.tm-x{
  width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--dim);
  font-size:16px;line-height:1;cursor:pointer;transition:.12s;
}
.tm-x:hover{background:var(--danger-soft);color:var(--danger)}
.tm-tip{margin:0 0 12px;font-size:12px;line-height:1.6;color:var(--dim)}
.tm-rows{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;min-height:0}
.tm-row{
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg,transparent);transition:.15s;
}
.tm-row:hover{border-color:var(--line-2)}
.tm-move{
  width:26px;height:26px;flex:none;border:1px solid var(--line-2);border-radius:8px;
  background:var(--panel);color:var(--text-2);font-size:13px;line-height:1;cursor:pointer;transition:.12s;
}
.tm-move:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tm-move[disabled]{opacity:.25;cursor:not-allowed}
.tm-move[disabled]:hover{border-color:var(--line-2);color:var(--text-2);background:var(--panel)}
.tm-name{
  flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid transparent;border-radius:9px;
  background:transparent;color:var(--text);font-size:13.5px;font-weight:600;transition:.15s;
}
.tm-name:hover{border-color:var(--line-2)}
.tm-name:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--panel)}
.tm-del{
  height:28px;padding:0 10px;flex:none;border:1px solid var(--line-2);border-radius:9px;
  background:transparent;color:var(--danger);font-size:12px;font-weight:600;cursor:pointer;transition:.12s;
}
.tm-del:hover{background:var(--danger-soft);border-color:rgba(255,59,48,.3)}
.tm-del[disabled]{opacity:.25;cursor:not-allowed}
.tm-del[disabled]:hover{background:transparent;border-color:var(--line-2)}
.tm-foot{display:flex;justify-content:flex-end;margin-top:14px}
.tm-done{
  height:34px;padding:0 22px;border:none;border-radius:11px;cursor:pointer;
  background:var(--accent);color:#fff;font-size:13px;font-weight:600;transition:.15s;
}
.tm-done:hover{filter:brightness(1.06)}

/* 教程列表滚动容器：标题/tab 固定，仅此块内部滚动；状态条随内容排在末尾 */
.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;display:block}
/* 教程列表（普通网格，自然高度，跟随 .scroll 滚动） */
.list{
  padding:18px 30px 88px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px;align-content:start;
}
.list.drop-end{box-shadow:inset 0 0 0 2px var(--accent-soft-2);border-radius:var(--r)}
.tut-card{
  position:relative;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .15s ease, box-shadow .15s, border-color .15s;cursor:grab;
  box-shadow:var(--sh-sm);
}
.tut-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.tut-card:active{cursor:grabbing}
.tut-card.dragging{opacity:.4;transform:scale(.97)}
/* 拖拽排序的插入位置提示：左侧竖条 = 插到该卡前面，右侧竖条 = 插到后面 */
.tut-card.drop-before,.tut-card.drop-after{border-color:var(--accent);transform:none}
.tut-card.drop-before{box-shadow:inset 4px 0 0 var(--accent),0 0 0 3px var(--accent-soft),var(--sh-md)}
.tut-card.drop-after{box-shadow:inset -4px 0 0 var(--accent),0 0 0 3px var(--accent-soft),var(--sh-md)}
/* 右上角抓手：hover 时出现，提示卡片可拖动排序 */
.tut-grip{
  position:absolute;top:9px;right:9px;z-index:2;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(255,255,255,.86);border:1px solid var(--line);color:var(--dim);
  font-size:16px;line-height:1;opacity:0;transition:.15s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.tut-card:hover .tut-grip,.tut-card.dragging .tut-grip{opacity:1}
.tut-thumb{
  height:158px;background:radial-gradient(120% 120% at 50% 22%,var(--panel-3),var(--panel-2) 70%);
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);
}
.tut-thumb svg{width:100%;height:100%}
.tut-body{padding:14px 15px 12px;flex:1;display:flex;flex-direction:column;gap:5px}
.tut-name{font-size:15px;font-weight:650;color:var(--text);line-height:1.3;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 描述固定占 2 行高度，避免长短不一撑动下方公式位置 */
.tut-desc{font-size:12.5px;color:var(--muted);line-height:1.5;height:38px;flex:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 公式始终贴卡片底部，位置固定不随描述高度变化 */
.tut-alg{
  font:600 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:9px;
  padding:7px 10px;margin-top:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tut-acts{display:flex;align-items:center;gap:8px;padding:0 15px 14px}
.tut-acts .act{
  flex:1;height:34px;border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);
  border-radius:10px;font-size:13px;font-weight:500;transition:.15s;
}
.tut-acts .act:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tut-acts .more{position:relative;flex:0 0 36px}
.tut-acts .more>button{width:100%;height:34px;border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
  border-radius:10px;font-size:16px;transition:.15s}
.tut-acts .more>button:hover{color:var(--text);border-color:var(--line-3)}
.menu{
  position:absolute;right:0;bottom:42px;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;
  padding:6px;min-width:118px;box-shadow:var(--sh-lg);z-index:5;display:none;
}
.menu.on{display:block}
.menu button{display:block;width:100%;text-align:left;height:36px;padding:0 12px;background:none;border:none;
  color:var(--text);font-size:13px;border-radius:8px;transition:.12s}
.menu button:hover{background:var(--panel-3)}
.menu button.danger{color:var(--danger)}

/* 右下角悬浮「新建教程」按钮：圆形 + 动态脉冲环（替代原卡片式新建）
   与后台主按钮同源（--btn-bg 渐变 + --cb-bevel 立体贴纸阴影），保证视觉一致。 */
.fab-new{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;padding:0;cursor:pointer;color:#fff;background:var(--btn-bg);
  box-shadow:var(--cb-bevel);
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.2,.9,.3,1),box-shadow .18s,filter .18s,opacity .18s;
  animation:fab-in .34s cubic-bezier(.2,.9,.3,1);
}
.fab-new svg{width:26px;height:26px;stroke:#fff;stroke-width:2.2;fill:none}
/* 动态脉冲环：单一节奏的扩散提醒，ease-out 展开、淡出 */
.fab-new::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--accent);opacity:0;
  animation:fab-pulse 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
.fab-new:hover{transform:scale(1.07);box-shadow:var(--cb-bevel-hover);filter:saturate(1.06)}
.fab-new:active{transform:scale(.93);box-shadow:var(--cb-bevel-active)}
.fab-new:focus-visible{outline:none;box-shadow:var(--cb-bevel),0 0 0 3px var(--accent-soft-2)}
.fab-new.drag-on{transform:scale(1.08);box-shadow:var(--cb-bevel-hover),0 0 0 5px var(--accent-soft-2)}
/* 非教程页 / 登录前隐藏 */
.fab-new.hidden{opacity:0;transform:scale(.5);pointer-events:none}
@keyframes fab-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes fab-pulse{
  0%{transform:scale(1);opacity:.5}
  70%{opacity:0}
  100%{transform:scale(1.95);opacity:0}
}
/* 空分类：列表占满滚动区，空状态提示垂直+水平居中 */
.list.is-empty{min-height:100%;align-content:center;padding-top:0;padding-bottom:88px}
.empty-list{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;line-height:1.7;padding:24px}

/* ============================ 编辑器 ============================ */
.editor-window{display:flex;flex-direction:column;height:100vh;min-height:0;background:transparent}
.win-titlebar{
  display:flex;align-items:center;justify-content:space-between;flex:0 0 52px;height:52px;
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);padding:0 14px;gap:10px;
}
.win-titlebar .tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.win-back{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--panel);color:var(--text-2);border:1px solid var(--line-2);font-size:13.5px;font-weight:500;transition:.15s;white-space:nowrap;
}
.win-back:hover{border-color:var(--accent);color:var(--accent)}
.win-title{font-size:15px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-close{
  width:36px;height:36px;border-radius:11px;background:var(--panel);color:var(--muted);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.win-close:hover{color:var(--danger);border-color:rgba(255,59,48,.35);background:var(--danger-soft)}

.win-content{flex:1 1 auto;min-height:0;overflow:auto;padding:26px}
.win-footer{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.win-footer .f-left{display:flex;gap:10px;align-items:center;min-width:0}
.footer-msg{font-size:12.5px;color:var(--muted);min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer-msg.ok{color:var(--accent)}
.footer-msg.err{color:var(--danger)}
.save-btn{
  height:44px;padding:0 26px;border-radius:var(--btn-r);
  background:var(--btn-bg);color:var(--btn-ink);border:1px solid var(--btn-line);
  font-size:14.5px;font-weight:600;box-shadow:var(--btn-sh);
  transition:transform .14s ease, background .15s, box-shadow .15s;
}
.save-btn:hover{background:var(--btn-bg-hover);box-shadow:var(--btn-sh-hover);transform:translateY(-1px)}
.save-btn:active{transform:translateY(0);box-shadow:var(--btn-sh-active)}

/* 关闭确认弹窗 */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.modal.on{display:flex}
.modal-card{width:360px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 18px;box-shadow:var(--sh-lg)}
.modal-card h3{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.modal-card p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.6}
.modal-acts{display:flex;justify-content:flex-end;gap:10px}

/* 编辑器布局（按布局图）：左列=魔方舞台 + 说明，右列=标题描述 / 公式与播放组件。
   两列各自独立纵向堆叠，右列卡片不会被左列舞台的高度拉开。 */
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;max-width:1180px;margin:0 auto}
.ed-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.ed-stage{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:var(--sh-sm)}
.ed-stage h2{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;color:var(--text)}
.ed-stage .sub{font-size:12.5px;color:var(--muted);margin:0 0 16px;line-height:1.6;max-width:60ch}

/* 左上角 (!) 说明：默认只留一个小圆图标，悬停 / 聚焦才展开原本的说明文字 */
.help-wrap{position:relative;flex:none;display:flex;align-items:flex-start;gap:10px}
.help-badge{
  flex:none;width:24px;height:24px;border-radius:50%;cursor:help;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--muted);
  font:700 13px/1 ui-sans-serif,system-ui,-apple-system,sans-serif;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.help-badge:hover,.help-wrap:focus-within .help-badge{background:var(--accent);border-color:var(--accent);color:#fff}
.ed-help{
  display:none;position:absolute;top:30px;left:0;z-index:20;
  width:max-content;max-width:min(460px,70vw);
  padding:14px 16px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-lg);
}
.help-wrap:hover .ed-help,.help-wrap:focus-within .ed-help{display:block}
.ed-help h2{font-size:15px;margin:0 0 7px}
.ed-help .modeBanner{margin:0 0 8px;padding:8px 10px;font-size:12px}
.ed-help .sub{margin:0;font-size:12px;line-height:1.6}

/* 右侧卡片 */
.ed-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm)}
.ed-panel .panel-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 13px}

/* 标题 / 描述：右上卡片，纵向两个输入框 */
.ed-fields{display:flex;flex-direction:column;gap:9px;margin:0}
.ed-field{width:100%;height:40px;padding:0 13px;box-sizing:border-box;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);border-radius:10px;
  font:500 13px/1.3 ui-sans-serif,system-ui,-apple-system,sans-serif;outline:none;transition:.15s}
.ed-field:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ed-field::placeholder{color:var(--muted)}

/* 右下「公式 + 播放组件」卡片 */
.ed-formula .ed-inputrow{margin-bottom:8px}
.ed-formula .ed-msg{margin-bottom:10px}
.ed-player{
  padding:14px 12px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;gap:10px;
}
.ed-player .progress{margin:0}
.ed-player .controls{flex-direction:column;align-items:center;gap:12px}
.ed-player .btnrow{justify-content:center}
.ed-player .opts{justify-content:center;gap:10px}
.ed-player .speed-seg button{padding:0 11px}

/* 调色板 */
.ed-palette{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:14px}
.ed-palette .plabel{font-size:11px;color:var(--dim);margin-right:2px}
.swatch{width:34px;height:34px;border-radius:10px;border:1.5px solid rgba(0,0,0,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);cursor:pointer;transition:.12s;position:relative}
.swatch:hover{transform:translateY(-1px)}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-2),inset 0 0 0 1px rgba(255,255,255,.25)}
.swatch .ck{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#0b1020;font-size:15px;font-weight:800;text-shadow:0 1px 1px rgba(255,255,255,.5)}
.swatch.on .ck{display:flex}

/* 工具行 */
.ed-tools{display:flex;gap:8px;flex-wrap:wrap}
.toolbtn{height:36px;padding:0 13px;border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);border-radius:10px;font-size:13px;font-weight:500;transition:.15s}
.toolbtn:hover{background:var(--panel-2);border-color:var(--line-3);color:var(--text)}
.toolbtn.warn{color:var(--warn);border-color:rgba(255,159,10,.3)}
.toolbtn.warn:hover{background:rgba(255,159,10,.1)}

/* 魔方视口 */
.viewport{
  position:relative;background:radial-gradient(120% 120% at 50% 20%,var(--panel-3),var(--panel-2) 70%);
  border:1px solid var(--line);border-radius:var(--r);padding:10px;display:grid;place-items:center;
}
.viewport svg{cursor:grab;width:100%;max-width:460px;height:auto;display:block;touch-action:none}
.viewport svg.dragging{cursor:grabbing}
/* 限定作用域到魔方视口，避免误伤管理页的 .hint 提示条 */
.viewport .hint{position:absolute;left:12px;bottom:10px;font-size:11.5px;color:var(--dim);background:rgba(255,255,255,.7);
  padding:4px 10px;border-radius:8px;pointer-events:none;backdrop-filter:blur(6px)}

/* 魔方左上角的「上色 / 工具」浮层：紧凑，不遮住中间魔方 */
.ed-toolbox{
  position:absolute;top:12px;left:12px;z-index:2;width:150px;padding:10px;box-sizing:border-box;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm);
}
.ed-toolbox .tool-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 9px}
.ed-toolbox .tool-head .plabel{font-size:10.5px;letter-spacing:.06em;color:var(--dim)}
.ed-toolbox .help-badge{width:19px;height:19px;font-size:11px}
/* 从画笔浮层向右下展开，宽度限制在左列内，避免溢出到视口左侧 */
.ed-toolbox .ed-help{top:25px;left:0;right:auto;max-width:min(360px,70vw)}
.ed-toolbox .ed-palette{
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
  padding:0;background:none;border:none;margin:0 0 9px;
}
.ed-toolbox .swatch{width:100%;height:auto;aspect-ratio:1;border-radius:8px}
.ed-toolbox .ed-tools{display:grid;gap:6px}
.ed-toolbox .toolbtn{width:100%;height:30px;padding:0 9px;font-size:12px;text-align:left}

.progress{height:5px;background:var(--panel-3);border-radius:99px;overflow:hidden;margin:12px 0 10px}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#a9a7f5);transition:width .22s ease}

/* 公式：独占一行加长，多行自适应，过长自动折行 */
.ed-inputrow{display:flex;flex-direction:row;align-items:flex-end;gap:10px;margin-bottom:10px}
.ed-input{flex:1 1 auto;width:100%;box-sizing:border-box;min-height:76px;max-height:220px;
  background:var(--panel);border:1px solid var(--line-2);color:var(--text);border-radius:12px;padding:11px 13px;
  font:500 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;
  resize:vertical;overflow-y:auto;overflow-wrap:anywhere;white-space:pre-wrap;word-break:break-word}
.ed-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ed-input::placeholder{color:var(--muted)}
/* 「增加」按钮：与「公式」小节标题同一行，右对齐 */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 13px}
.panel-head .panel-t{margin:0}
.ed-add{flex:0 0 auto;display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:10px;
  border:1px solid var(--accent);background:var(--btn-soft-bg);color:var(--accent);font-size:13px;font-weight:600;
  box-shadow:var(--btn-soft-sh);transition:.15s;white-space:nowrap}
.ed-add:hover{background:var(--btn-soft-bg-hover)}
.ed-add svg{width:13px;height:13px;fill:currentColor}
/* 提示文案：画面中央气泡，自动淡出（不再贴在公式框下方） */
.ed-msg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  z-index:300;pointer-events:none;opacity:0;margin:0;
  padding:13px 22px;border-radius:14px;max-width:min(86vw,520px);
  background:rgba(22,18,34,.94);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:15px;font-weight:600;line-height:1.45;text-align:center;
  box-shadow:0 14px 44px rgba(0,0,0,.5);backdrop-filter:blur(8px);
  transition:opacity .22s ease, transform .22s ease}
.ed-msg.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ed-msg.ok{background:rgba(35,160,95,.96);border-color:rgba(255,255,255,.22);color:#fff}

/* 公式步骤条：紧跟在魔方下方，居中排列 */
.ed-timeline{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:40px;padding:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;margin:12px 0 0;align-content:flex-start}
.ed-timeline .empty{color:var(--dim);font-size:11.5px;align-self:center;padding:0 4px}
.step{position:relative;min-width:38px;height:32px;padding:0 9px;border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);
  border-radius:9px;font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;transition:.14s;flex:0 0 auto}
.step:hover{border-color:var(--accent);color:var(--accent)}
.step.done{background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent)}
.step.cursor{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;box-shadow:0 0 0 3px var(--accent-soft)}
.step.rotation{border-style:dashed;color:var(--warn)}
.step.rotation.done{background:rgba(255,159,10,.12);border-color:rgba(255,159,10,.4);color:var(--warn)}
.step.rotation.cursor{background:var(--warn);border-color:var(--warn);color:#3a2400;box-shadow:0 0 0 3px rgba(255,159,10,.2)}
/* 公式条里的括号：还原玩家输入的 ( ) 分组，不参与点击跳步 */
.paren{display:inline-flex;align-items:center;justify-content:center;min-width:8px;align-self:center;
  color:var(--dim);font:700 18px/1 ui-monospace,SFMono-Regular,Menlo,monospace;user-select:none}
.ed-timeline .paren,.algbar .paren{height:32px}
/* 分组重复角标：如 (R U)×2，不参与点击跳步。
   - 默认：浅色主题下的普通态
   - .active：当前正在播放的这组（强调）
   - .done：整组已播完（变回总次数 ×N，弱化显示） */
.rep-badge{display:inline-flex;align-items:center;justify-content:center;align-self:center;margin-left:1px;
  height:32px;min-width:34px;padding:0 7px;border:1px solid var(--accent-soft-2);background:var(--accent-soft);
  color:var(--accent);border-radius:8px;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;user-select:none}
.rep-badge.active{background:var(--accent);border-color:var(--accent);color:#fff}
.rep-badge.done{opacity:.45}

/* 编辑态：魔方下方的公式按布局图显示为一行大字（仍可点击跳步、当前步高亮），
   只读查看页保留卡片式步骤条，见 .ro-mode 里的规则。 */
.editor-window:not(.ro-mode) .ed-timeline{
  background:transparent;border:none;padding:4px 6px 0;min-height:46px;
  margin:10px 0 0;gap:12px;align-items:center;align-content:center;
}
.editor-window:not(.ro-mode) .ed-timeline .empty{font-size:12.5px}
.editor-window:not(.ro-mode) .ed-timeline .step{
  min-width:0;height:auto;padding:2px 0;border:none;border-radius:0;background:transparent;
  box-shadow:none;color:var(--muted);cursor:pointer;
  font:500 23px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.editor-window:not(.ro-mode) .ed-timeline .step:hover{color:var(--accent)}
.editor-window:not(.ro-mode) .ed-timeline .step.done{background:transparent;color:var(--text-2)}
.editor-window:not(.ro-mode) .ed-timeline .step.cursor{
  background:transparent;color:var(--accent);font-weight:700;box-shadow:none;
}
.editor-window:not(.ro-mode) .ed-timeline .step.rotation{color:var(--warn)}
.editor-window:not(.ro-mode) .ed-timeline .step.rotation.done{background:transparent;color:var(--warn)}
.editor-window:not(.ro-mode) .ed-timeline .step.rotation.cursor{background:transparent;color:var(--warn);font-weight:700;box-shadow:none}

.controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.btnrow{display:flex;gap:7px;align-items:center}
.btn{width:42px;height:42px;border:1px solid var(--line-2);background:var(--panel);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:.15s}
.btn:hover{background:var(--panel-2);border-color:var(--line-3);color:var(--text)}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn.primary{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.btn.primary:hover{background:var(--accent-soft-2)}
.btn .ico-play{display:block}
.btn .ico-pause{display:none}
.btn.playing .ico-play{display:none}
.btn.playing .ico-pause{display:block}
.opts{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.opts-label{white-space:nowrap}
/* 步速：三档分段控件 慢速 900 / 中速 400 / 快速 100 (ms) */
.speed-seg{
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r-pill);
}
.speed-seg button{
  height:28px;padding:0 15px;border:none;border-radius:var(--r-pill);
  background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;
  white-space:nowrap;transition:.15s;
}
.speed-seg button:hover{color:var(--text)}
.speed-seg button.on{background:var(--panel);color:var(--accent);box-shadow:var(--sh-sm)}
.linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12.5px;font-weight:500}
.linkbtn:hover{text-decoration:underline}

/* 键盘操作提示：比「步速」标签弱一号（更小、更淡）。
   默认隐藏（编辑页不显示），仅只读查看页/影院模式出现 */
.kbd-hint{display:none;font-size:11px;color:var(--dim);letter-spacing:.02em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd-hint kbd{display:inline-block;margin:0 1px;padding:1.5px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  background:var(--panel-2);color:var(--dim);
  font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}

/* 状态行（进度 / 已复原 / 当前步 / 视角）已从 editor.html 整体移除，这里不再保留样式。
   注：训练页 index.trainer.html 用的是 style.css，其 .status 不受影响。 */

.ed-mine{margin-top:0}
.ed-mine .panel-t{font-size:10.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin:0 0 9px;font-weight:600}
.mine-row{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--panel);border:1px solid var(--line);border-radius:11px;margin-bottom:7px;font-size:12.5px}
.mine-row .tag{font-size:10px;color:var(--accent);border:1px solid var(--accent-soft-2);border-radius:6px;padding:2px 7px;white-space:nowrap}
.mine-row .nm{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mine-row .al{color:var(--dim);font-size:11px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mine-row button{background:none;border:1px solid var(--line-2);color:var(--warn);border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:13px;line-height:1;transition:.12s}
.mine-row button:hover{background:rgba(255,159,10,.1)}

/* 右侧说明 rail（编辑态的帮助） */
.ed-rail .panel-t{font-size:11px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin:0 0 11px;font-weight:600}
.note{font-size:12.5px;color:var(--muted);line-height:1.75}
.note code{background:var(--panel-3);padding:1px 6px;border-radius:5px;color:var(--text-2);font-size:11.5px}
.note b{color:var(--text);font-weight:650}

/* 顶部提示条（编辑态） */
.modeBanner{margin:0 0 16px;padding:10px 14px;background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:12px;font-size:12.5px;color:var(--accent);font-weight:500}

/* ============================ 查看模式（只读） ============================
   只保留：中间一个魔方 + 下方公式条（当前步高亮）+ 播放控制器。
   编辑页已是左右两列，这里用 display:contents 摊平两列的子模块，
   再按 order 重排成单列：魔方舞台 → 播放组件（播放组件原先在右列）。 */
.ro-mode .win-titlebar,
.ro-mode .win-footer,
.ro-mode .ed-meta,
.ro-mode .ed-explain,
.ro-mode .ed-fields,
.ro-mode .ed-palette,
.ro-mode .ed-tools,
.ro-mode .ed-toolbox,
.ro-mode .help-wrap,
.ro-mode .ed-inputrow,
.ro-mode .panel-head,
.ro-mode .ed-msg,
.ro-mode .progress,
.ro-mode .ed-mine,
.ro-mode .ed-stage h2,
.ro-mode .sub,
.ro-mode .modeBanner,
.ro-mode .save-btn,
.ro-mode .viewport .hint{display:none}

/* 画布：真正居中，魔方直接浮在页面底色上（无白底、无边框、无阴影） */
.ro-mode .ed-col{display:contents}
.ro-mode .win-content{display:flex;padding:24px}
.editor-window.ro-mode .editor-grid{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  width:100%;max-width:none;margin:0;min-height:100%;
}
.ro-mode .ed-stage{
  order:1;width:100%;flex:1 1 auto;min-height:0;
  background:transparent;border:none;box-shadow:none;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
/* 右下公式卡片在查看页只剩播放组件，且不带卡片外观；整块居中（max-width 下不贴左） */
.ro-mode .ed-formula{
  order:2;width:100%;max-width:660px;margin:0 auto;
  background:transparent;border:none;box-shadow:none;padding:0;
  display:flex;flex-direction:column;align-items:center;
}
.ro-mode .ed-formula .panel-t{display:none}
.ro-mode .ed-player{
  width:100%;padding:0;background:transparent;border:none;
  display:flex;flex-direction:column;align-items:center;
}

/* 教程名 / 简介：贴在页面左上角，左对齐，给魔方让出居中空间 */
.ro-info{text-align:left;margin:0 0 22px;order:0;width:100%}
.ro-info .ro-name{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 6px}
.ro-info .ro-desc{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6;max-width:52ch;margin-inline:0}

/* 魔方：无白底、无边框；高度撑满 ed-stage 的剩余空间，宽度随正方形比例自适应，确保一屏放得下 */
.ro-mode .viewport{
  order:1;background:transparent;border:none;padding:0;
  width:100%;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
.ro-mode .viewport svg{height:100%;width:auto;max-height:100%;max-width:100%}

/* 公式条：魔方正下方，居中；当前步亮起 */
.ro-mode .ed-timeline{
  order:2;width:100%;max-width:660px;margin:clamp(14px,3.4vh,34px) auto 0;padding:0;min-height:0;
  background:transparent;border:none;
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;
}
.ro-mode .ed-timeline .empty{color:var(--dim);font-size:12.5px}
.ro-mode .ed-timeline .step{
  min-width:42px;height:38px;padding:0 11px;border-radius:10px;
  font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text-2);
  box-shadow:var(--sh-sm);cursor:default;pointer-events:none;
  transition:transform .18s ease, background .18s, box-shadow .18s, color .18s, border-color .18s;
}
.ro-mode .ed-timeline .step:hover{transform:none;border-color:var(--line-2);color:var(--text-2)}
.ro-mode .ed-timeline .step.done{
  background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent);box-shadow:none;
}
.ro-mode .ed-timeline .step.cursor{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 8px 22px rgba(94,92,230,.38),0 0 0 4px var(--accent-soft);
}
.ro-mode .ed-timeline .step.rotation.done{background:rgba(255,159,10,.14);border-color:rgba(255,159,10,.35);color:var(--warn)}
.ro-mode .ed-timeline .step.rotation.cursor{
  background:var(--warn);border-color:var(--warn);color:#3a2400;
  box-shadow:0 8px 22px rgba(255,159,10,.35),0 0 0 4px rgba(255,159,10,.18);
}

/* 播放控制器：按钮居中成一行，步速/复位在下方居中一行 */
.ro-mode .controls{
  order:3;width:100%;max-width:660px;margin:28px auto 0;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
.ro-mode .kbd-hint{display:block;order:4;margin:14px auto 0}
.ro-mode .btnrow{justify-content:center;gap:10px}
.ro-mode .btn{width:44px;height:44px;border-radius:13px}
.ro-mode .btn svg{width:19px;height:19px}
.ro-mode .btn.primary{
  width:54px;height:54px;border-radius:16px;
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(94,92,230,.28);
}
.ro-mode .btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.ro-mode .opts{justify-content:center;gap:14px}

/* 窄/矮窗口下的查看页：缩小魔方与间距，保证公式条和步速都在首屏 */
@media(max-width:680px){
  .ro-mode .ro-info{margin-bottom:14px}
  .ro-mode .ro-info .ro-name{font-size:20px}
  .ro-mode .ed-timeline{margin-top:14px;gap:6px}
  .ro-mode .ed-timeline .step{height:34px;min-width:38px;padding:0 9px;font-size:13px}
  .ro-mode .controls{margin-top:18px;gap:14px}
  .ro-mode .btn{width:40px;height:40px}
  .ro-mode .btn.primary{width:48px;height:48px}
}
@media(max-height:760px){
  .ro-mode .ed-timeline{margin-top:14px}
  .ro-mode .controls{margin-top:18px;gap:14px}
}
/* ============================ 全屏播放（影院模式） ============================
   播放页右上角「全屏」：优先调用浏览器全屏 API；若被 iframe 策略拦截
   （没带 allow="fullscreen"），自动退化为页面内影院态（.cinema），效果一致。
   影院态下只保留 魔方 → 公式条 → 播放控制器，深色幕布 + 居中放大，
   全屏按钮静止 2.6s 后淡出、鼠标一动再浮现（Esc 或点它退出）。 */
.ro-fs{
  position:fixed;top:16px;right:18px;z-index:60;
  display:none;align-items:center;gap:8px;height:40px;padding:0 16px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  color:var(--text-2);font-size:13.5px;font-weight:600;box-shadow:var(--sh-sm);
  transition:opacity .35s ease, transform .15s, border-color .15s, color .15s, background .15s;
}
.ro-mode .ro-fs{display:inline-flex}
.ro-fs:hover{border-color:var(--accent);color:var(--accent);background:var(--panel)}
.ro-fs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ro-fs .ico-collapse{display:none}
.cinema .ro-fs .ico-expand{display:none}
.cinema .ro-fs .ico-collapse{display:block}

/* 影院幕布：整页深色，只聚焦魔方 */
html.cinema-lock,html.cinema-lock body{overflow:hidden}
.editor-window.cinema{
  position:fixed;inset:0;z-index:50;height:auto;min-height:0;background:#0a0a0c;
}
.editor-window.cinema .win-content{padding:26px 16px;overflow:auto}
.cinema .editor-grid{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;width:100%;max-width:none;min-height:100%;margin:0 auto;
}
.cinema .ed-stage{
  order:1;width:100%;max-width:none;padding:0;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.cinema .ed-formula{
  order:2;width:100%;max-width:none;margin:0;padding:0;
  background:transparent;border:none;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;
}
.cinema .viewport{order:1;width:100%;max-width:none;margin:0 auto;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.cinema .viewport svg{height:100%;width:auto;max-height:100%;max-width:100%}
.cinema .ro-info{margin:0 0 12px}
.cinema .ro-info .ro-name{color:#f5f5f7}
.cinema .ro-info .ro-desc{color:rgba(235,235,245,.58)}

/* 公式条：深色底上的浅色胶囊 */
.cinema .ed-timeline{order:2;max-width:none;margin:clamp(16px,3.4vh,34px) auto 0;gap:9px}
.cinema .ed-timeline .empty{color:rgba(235,235,245,.45)}
.cinema .ed-timeline .step{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);
  color:rgba(235,235,245,.82);box-shadow:none;
}
.cinema .ed-timeline .step:hover{transform:none;border-color:rgba(255,255,255,.16);color:rgba(235,235,245,.82)}
.cinema .ed-timeline .step.done{background:rgba(94,92,230,.30);border-color:rgba(94,92,230,.55);color:#cbcaff}
.cinema .ed-timeline .step.cursor{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 10px 30px rgba(94,92,230,.55),0 0 0 5px rgba(94,92,230,.22);
}
.cinema .ed-timeline .step.rotation{color:#ffb340;border-color:rgba(255,159,10,.28)}
.cinema .ed-timeline .step.rotation.done{background:rgba(255,159,10,.2);border-color:rgba(255,159,10,.42);color:#ffb340}
.cinema .ed-timeline .step.rotation.cursor{
  background:var(--warn);border-color:var(--warn);color:#3a2400;
  box-shadow:0 10px 30px rgba(255,159,10,.45),0 0 0 5px rgba(255,159,10,.2);
}
/* 分组重复角标 ×N 与括号：深色影院态下，数字与括号同色（明亮浅色），不再用白底深字 */
.cinema .rep-badge{
  background:transparent;border-color:rgba(255,255,255,.32);
  color:rgba(255,255,255,.92);
  font-size:18px;font-weight:800;letter-spacing:.3px;
}
.cinema .rep-badge.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(94,92,230,.38),0 2px 12px rgba(0,0,0,.45);
}
.cinema .rep-badge.done{
  background:transparent;border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.55);box-shadow:none;
}
.cinema .paren{color:rgba(255,255,255,.92);font-size:22px;font-weight:800}

/* 播放控制器：深色玻璃 */
.cinema .controls{order:3;max-width:none;margin:30px auto 0;gap:18px}
.cinema .kbd-hint{display:block;order:4;margin:14px auto 0}
.cinema .btn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);color:#e8e8ed}
.cinema .btn:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.34);color:#fff}
.cinema .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(94,92,230,.45)}
.cinema .btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.cinema .opts{color:rgba(235,235,245,.62)}
.cinema .speed-seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.cinema .speed-seg button{color:rgba(235,235,245,.7)}
.cinema .speed-seg button:hover{color:#fff}
.cinema .speed-seg button.on{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.cinema .linkbtn{color:#a9a7f5}
.cinema .hint{display:none}
.cinema .ro-fs{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#f2f2f7}
.cinema .ro-fs:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.42);color:#fff}
.cinema .kbd-hint{color:rgba(235,235,245,.38)}
.cinema .kbd-hint kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(235,235,245,.55)}
/* 静止后按钮淡出，鼠标移动再浮现 */
.cinema.idle .ro-fs{opacity:0;pointer-events:none}

/* 窄屏（仅编辑态）：工具浮层改成魔方上方的一整行，避免盖住魔方 */
@media(max-width:680px){
  .editor-window:not(.ro-mode) .viewport{display:flex;flex-direction:column;align-items:center}
  .editor-window:not(.ro-mode) .viewport svg{margin:0 auto}
  .ed-toolbox{position:relative;top:auto;left:auto;width:100%;margin:0 0 12px;order:-1}
  .ed-toolbox .ed-palette{grid-template-columns:repeat(7,1fr)}
  .ed-toolbox .ed-tools{grid-template-columns:repeat(3,1fr)}
  .ed-field{font-size:12px}
  .editor-window:not(.ro-mode) .ed-timeline .step{font-size:18px}
}
/* 窗口不够宽时两列改单列：把四个模块摊平后按 信息→舞台→播放→说明 排列 */
@media(max-width:980px){
  .editor-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ed-col{display:contents}
  .ed-meta{order:0}
  .ed-stage{order:1}
  .ed-formula{order:2}
  .ed-explain{order:3}
  .ed-fields{flex-direction:row;flex-wrap:wrap}
  .ed-field{flex:1 1 220px;width:auto}
  #app{grid-template-columns:1fr}
  .sidebar{display:none}
}
@media(max-width:560px){
  .topbar,.tabbar,.list{padding-left:18px;padding-right:18px}
  .win-content{padding:16px}
}