/* ───────── 保险箱皮肤 · 芭比粉千禧年 · 电子剪贴簿骨架版 ─────────
   配合 vault.html / editor.html（frame/sheet/statusline/mast 结构）
   视觉语言与首页一致：粉色主调 + 浮雕 + 蓝渐变标题条 + LCD 结果屏 */
:root{
  --paper:#fffafe; --panel:#fff7fc; --panel2:#fff0f8;
  --ink:#4a2140; --muted:#8a5f80; --faint:#b28ba4;
  --link:#0000ee; --visited:#551a8b; --hover:#ff0000;
  --pink:#e0218a; --hot:#ff2d78; --rose:#ff5fa2;
  --mb2:#e88ab8;
  --head-a:#2f7fd8; --head-b:#a6dcff;
  --inputbg:#ffffff;
  --f-song:"宋体","SimSun","NSimSun",serif;
  --f-round:"幼圆","YouYuan","华文细黑","Microsoft YaHei",sans-serif;
  --f-art:"华文琥珀","STHupo","方正粗圆简体","幼圆","Microsoft YaHei",sans-serif;
  --f-mono:"Courier New","Courier",monospace;
}
[data-theme="dark"]{
  --paper:#170530; --panel:#1e0b3d; --panel2:#251047;
  --ink:#ffe9fb; --muted:#cbb0e4; --faint:#9d7fbd;
  --link:#66e6ff; --visited:#c98dff; --hover:#ffe45e;
  --pink:#ff7ac8; --hot:#ff4fd0; --rose:#ff8ae0;
  --mb2:#4a1d95;
  --head-a:#7a00ff; --head-b:#ff2fd0;
  --inputbg:#2b1152;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font:12px/1.8 var(--f-song);
  color:var(--ink);
  background-color:#ffc2e2;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.95) 2px, transparent 3px),
    radial-gradient(circle at 36px 36px, rgba(255,90,170,.5) 2.2px, transparent 3px),
    radial-gradient(circle at 62px 26px, rgba(160,107,255,.4) 1.8px, transparent 2.6px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 12px, transparent 12px 24px),
    linear-gradient(150deg,#ffb1d8 0%,#ffd9ec 46%,#d9c6ff 100%);
  background-size:48px 48px,48px 48px,48px 48px,auto,auto;
  background-attachment:fixed;
  padding:14px 8px 30px;
}
[data-theme="dark"] body{
  background-color:#12002b;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(255,79,208,.5) 1.8px, transparent 2.6px),
    radial-gradient(circle at 36px 36px, rgba(102,230,255,.42) 1.8px, transparent 2.6px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px),
    linear-gradient(150deg,#12002b 0%,#25004d 50%,#0b1038 100%);
  background-size:48px 48px,48px 48px,auto,auto;
}
::selection{background:#ff2d78;color:#fff;}
::-webkit-scrollbar{width:14px;height:14px;}
::-webkit-scrollbar-track{background:#ffe4f2;border:1px solid #ffc2e2;}
::-webkit-scrollbar-thumb{background:linear-gradient(#ffd1e8,#ff5fa2);border:2px solid #fff;box-shadow:inset 0 0 0 1px #e0218a;}
[data-theme="dark"] ::-webkit-scrollbar-track{background:#1c0938;border-color:#4c2482;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:linear-gradient(#ff4fd0,#7a00ff);border-color:#12002b;box-shadow:inset 0 0 0 1px #ff9ef0;}
a{color:var(--link);text-decoration:underline;}
a:visited{color:var(--visited);}
a:hover{color:var(--hover);}
code{font-family:var(--f-mono);font-size:11px;background:var(--panel2);padding:0 3px;border:1px solid var(--mb2);}

/* ── 剪贴簿纸面 ── */
.frame{display:flex;justify-content:center;}
.sheet{
  width:100%;max-width:760px;position:relative;
  background:var(--paper);
  border:2px solid var(--rose);
  box-shadow:0 0 0 3px #fff,0 0 0 5px #ffd1e8,12px 14px 0 rgba(160,40,120,.18);
}
[data-theme="dark"] .sheet{box-shadow:0 0 0 3px #12002b,0 0 0 5px #ff4fd0,12px 14px 0 rgba(0,0,0,.45);}
/* 纸面四角的胶带 */
.sheet::before,.sheet::after{
  content:'';position:absolute;width:86px;height:22px;z-index:3;pointer-events:none;
  background:rgba(255,158,214,.5);border:1px solid rgba(160,40,120,.18);
  box-shadow:0 1px 3px rgba(90,0,50,.12);
}
.sheet::before{top:-10px;left:26px;transform:rotate(-4deg);}
.sheet::after{top:-10px;right:26px;transform:rotate(3.5deg);}

/* ── 打孔纸带状态行 ── */
.statusline{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px 10px;
  background:#241028;color:#ffd1e8;
  font-family:var(--f-mono);font-size:11px;letter-spacing:1px;
  border-bottom:2px solid var(--rose);
}
[data-theme="dark"] .statusline{background:#0d0518;border-bottom-color:#ff4fd0;color:#e6dcff;}
.statusline .dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:#ff2d78;box-shadow:0 0 6px rgba(255,45,120,.9);
  animation:pulse 1.6s ease-in-out infinite;
}
[data-theme="dark"] .statusline .dot{background:#ff4fd0;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.statusline b{color:#ff9ed2;}
.statusline .grow{flex:1;}
.strip-btn{
  cursor:pointer;font-family:var(--f-mono);font-size:11px;color:#ffd1e8;
  background:#3a1a3e;border:2px outset #8a4d8e;padding:1px 10px;
}
.strip-btn:hover{background:#5a2a5e;color:#fff;}
.strip-btn:active{border-style:inset;}
[data-theme="dark"] .strip-btn{background:#3a1a6e;border-color:#8a4dff;color:#e6dcff;}
[data-theme="dark"] .strip-btn:hover{background:#5b2fa8;color:#ffe45e;}

/* ── 招牌 ── */
.mast{
  position:relative;overflow:hidden;
  padding:20px 12px 16px;text-align:center;
  background:linear-gradient(#6cc3ff 0%,#cdeeff 52%,#ffe0f2 100%);
  border-bottom:3px solid #ff9ed2;
}
[data-theme="dark"] .mast{background:linear-gradient(#12003a 0%,#2b0060 50%,#5a0a54 100%);border-bottom-color:#ff4fd0;}
.kicker{
  margin:0 0 6px;font-family:var(--f-mono);font-size:11px;font-weight:bold;
  letter-spacing:3px;color:#5a6a9a;
}
[data-theme="dark"] .kicker{color:#9db8e8;}
.title{
  position:relative;z-index:2;margin:0;padding:0 10px;display:inline-block;
  font-family:var(--f-art);font-size:34px;line-height:1.15;letter-spacing:3px;font-weight:900;
  color:transparent;
  background:linear-gradient(90deg,#ff2d78,#ffd93d,#39c9a2,#4d96ff,#a06bff,#ff2d78);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1.2px #fff;
  filter:drop-shadow(3px 4px 0 #8a2be2);
  transform:rotate(-1.5deg) skewX(-3deg);
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{0%{background-position:0% 0;}100%{background-position:300% 0;}}
[data-theme="dark"] .title{
  background:linear-gradient(90deg,#ff4fd0,#ffe45e,#66e6ff,#ff4fd0);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(3px 4px 0 #2a0050) drop-shadow(0 0 8px rgba(255,79,208,.5));
}
.sub{
  position:relative;z-index:2;margin:8px auto 0;display:inline-block;
  padding:1px 12px;
  font-family:var(--f-round);font-size:11px;font-weight:bold;
  color:#7a2f6b;background:rgba(255,255,255,.75);border:1px dashed #ff2d78;
}
[data-theme="dark"] .sub{color:#ffd9f5;background:rgba(20,0,50,.65);border-color:#66e6ff;}

/* ── 面包屑条 ── */
.crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:5px 10px;font-size:12px;
  background:linear-gradient(#f8fcff,#d8ecff);
  border-bottom:2px solid #7fb8e8;
}
[data-theme="dark"] .crumb{background:linear-gradient(#1c0938,#2b1152);border-bottom-color:#8a4dff;}
.crumb .spacer{margin-left:auto;}
.crumb .blink{color:#d1004e;font-size:11px;font-weight:bold;}
[data-theme="dark"] .crumb .blink{color:#ffd1e8;}

/* ── 按钮 ── */
.btn3d{
  cursor:pointer;font-size:12px;padding:3px 11px;line-height:1.6;
  color:#1a3d6b;background:linear-gradient(#fff,#dcecff);
  border:2px outset #b8d8f5;border-radius:0;text-decoration:none;font-family:var(--f-song);
}
.btn3d:hover{background:linear-gradient(#fffbe0,#ffe9a8);color:#8a4b00;}
.btn3d:active{border-style:inset;}
[data-theme="dark"] .btn3d{color:#d9f4ff;background:linear-gradient(#3a1a6e,#2b1152);border-color:#8a4dff;}
[data-theme="dark"] .btn3d:hover{background:linear-gradient(#5b2fa8,#3a1a6e);color:#ffe45e;}

/* ── 模块 ── */
.module{
  margin:10px;
  background:var(--panel);
  border:3px solid;border-color:#ffd1e8 var(--mb2) var(--mb2) #ffd1e8;
  box-shadow:2px 2px 0 #f0c0da,inset 0 0 0 1px #fff;
}
[data-theme="dark"] .module{border-color:#5b2fa8 var(--mb2) var(--mb2) #5b2fa8;box-shadow:2px 2px 0 #3a1470,inset 0 0 0 1px #2b1152;}
.modhead{
  display:flex;align-items:center;gap:7px;
  padding:4px 8px;min-height:27px;
  background:linear-gradient(var(--head-a),var(--head-b) 70%,#d8f0ff);
  border-bottom:1px solid #5b8fc9;
  color:#fff;font-family:var(--f-round);font-size:14px;font-weight:bold;
  letter-spacing:1px;text-shadow:1px 1px 0 #205a96;
}
[data-theme="dark"] .modhead{background:linear-gradient(var(--head-a),var(--head-b) 75%,#ff8ae8);border-bottom-color:#4a1d95;text-shadow:1px 1px 0 #3a006b;}
.modhead .no{
  display:inline-block;flex:0 0 auto;min-width:17px;height:17px;line-height:16px;text-align:center;
  font-family:var(--f-mono);font-size:10px;font-weight:bold;color:#7a3b00;
  background:linear-gradient(#fff7c2,#ffd24a);
  border:1px solid #c99b00;box-shadow:inset 0 1px 0 #fffbd0;
  padding:0 3px;text-shadow:none;
}
.modhead .mini{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--f-mono);font-size:10px;font-weight:bold;color:#e8f4ff;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);
  padding:0 7px;line-height:16px;text-shadow:none;text-decoration:none;cursor:default;
}
.mbody{padding:12px 13px;}
.mbody p{margin:0 0 6px;}
.mbody p:last-child{margin-bottom:0;}
.mbody.tips{background:var(--panel2);margin:6px;border:1px dashed var(--mb2);padding:10px 12px;}
[data-theme="dark"] .mbody.tips{background:#251047;}

/* ── 表单 ── */
label{
  display:block;margin:10px 0 4px;
  font-family:var(--f-round);font-size:12px;font-weight:bold;color:var(--pink);
}
label:first-child{margin-top:0;}
input[type=password],input[type=text],textarea{
  width:100%;padding:5px 7px;
  font-family:var(--f-song);font-size:13px;color:var(--ink);
  background:var(--inputbg);border:2px inset #e8b8d0;outline:none;
}
input[type=file]{
  width:100%;padding:3px;font-size:12px;color:var(--muted);
  background:var(--panel2);border:2px inset #e8b8d0;
}
input[type=file]::file-selector-button{
  margin-right:7px;padding:2px 11px;cursor:pointer;
  font-family:var(--f-song);font-size:12px;color:#1a3d6b;
  background:linear-gradient(#fff,#dcecff);border:2px outset #b8d8f5;
}
input[type=file]::file-selector-button:hover{background:linear-gradient(#fffbe0,#ffe9a8);color:#8a4b00;}
[data-theme="dark"] input[type=file]{background:#2b1152;border-color:#6b3aa8;color:#cbb0e4;}
[data-theme="dark"] input[type=file]::file-selector-button{color:#d9f4ff;background:linear-gradient(#3a1a6e,#2b1152);border-color:#8a4dff;}
input:focus,textarea:focus{border-color:#ff2d78;background:#fffef8;color:#333;}
[data-theme="dark"] input:focus,[data-theme="dark"] textarea:focus{background:#3a1a6e;color:#fff;}
textarea{
  min-height:160px;resize:vertical;line-height:1.65;
  font-family:var(--f-mono);font-size:12px;
}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.goldbtn{
  cursor:pointer;font-family:var(--f-round);font-weight:bold;font-size:13px;color:#7a3b00;
  background:linear-gradient(#fff7c2,#ffd24a 55%,#ffbe2e);
  border:2px outset #ffe89a;box-shadow:1px 1px 0 #c99b00;padding:4px 16px;text-shadow:none;
}
.goldbtn:hover{background:linear-gradient(#fffbe0,#ffe27a);color:#a3175c;}
.goldbtn:active{border-style:inset;}

/* ── 提示与结果（LCD 屏） ── */
.hint{font-size:11px;color:var(--faint);margin-top:6px;line-height:1.7;}
#msg{margin-top:10px;font-size:12px;font-weight:bold;min-height:18px;font-family:var(--f-round);}
#msg.err{color:#d10000;}
#msg.ok{color:#0a8a0a;}
[data-theme="dark"] #msg.err{color:#ff6b6b;}
[data-theme="dark"] #msg.ok{color:#5dff6a;}
#result{
  display:none;margin-top:10px;max-height:380px;overflow:auto;
  padding:9px 11px;white-space:pre-wrap;word-break:break-all;
  background:#0b0b0b;color:#5dff6a;border:3px inset #777;
  font-family:var(--f-mono);font-size:12px;line-height:1.6;
  text-shadow:0 0 3px rgba(93,255,106,.55);
}

/* ── 页脚 ── */
.footer{
  margin:0 10px;padding:10px 4px 14px;text-align:center;
  border-top:3px double var(--rose);
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:11px;color:var(--faint);
}
[data-theme="dark"] .footer{border-top-color:#6b3aa8;}
.footer .panel{
  display:inline-block;border:2px outset #f0c0da;background:var(--panel2);
  padding:2px 12px;color:var(--muted);font-size:11px;
}
[data-theme="dark"] .footer .panel{border-color:#4a1d95;background:#251047;color:#cbb0e4;}

/* ── 响应式与减动效 ── */
@media (max-width:760px){
  body{padding:8px 4px 24px;}
  .module{margin:8px;}
  .title{font-size:27px;}
  .mast{padding:16px 8px 13px;}
  .mbody{padding:10px;}
  .mbody.tips{margin:6px;padding:9px 10px;}
  input[type=password],input[type=text],textarea{font-size:16px;}
}
@media (prefers-reduced-motion: reduce){
  .statusline .dot,.title{animation:none !important;}
  .crumb .blink{animation:none !important;}
}