/* Q版小游戏工坊主题：在不改变后台信息架构的前提下，统一圆润、明亮和玩具感。 */
:root {
  --bg: #f7f5ff;
  --panel: #fffefe;
  --ink: #41365f;
  --muted: #8c82a5;
  --line: #e9e1f4;
  --violet: #8c6cf2;
  --cyan: #38c8d5;
  --green: #55c99f;
  --amber: #ffb957;
  --red: #ff7791;
  --nav: #fff9fd;
  --shadow: 0 12px 0 rgba(118, 87, 175, .055), 0 18px 45px rgba(91, 66, 145, .10);
}

body {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 201, 106, .18) 0 65px, transparent 66px),
    radial-gradient(circle at 88% 82%, rgba(88, 214, 199, .16) 0 90px, transparent 91px),
    #f7f5ff;
}

button { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
button:hover { transform: translateY(-2px); filter: saturate(1.06); }
button:active { transform: translateY(1px) scale(.98); }

.login-screen {
  grid-template-columns: 1.12fr .88fr;
  background: #fff8f0;
}

.login-copy {
  padding: 42px 58px;
  color: #49375f;
  background:
    radial-gradient(circle at 12% 86%, rgba(255,255,255,.85) 0 75px, transparent 76px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.66) 0 120px, transparent 121px),
    linear-gradient(145deg, #a9eff0 0%, #b9dcff 45%, #d3c8ff 100%);
}

.login-copy:before {
  opacity: .6;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.75) 0 3px, transparent 4px),
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size: 54px 54px, 28px 28px, 28px 28px;
}

.brand-glyph {
  width: 52px;
  height: 52px;
  border: 4px solid rgba(255,255,255,.85);
  border-radius: 18px;
  background: linear-gradient(145deg,#ffcc66,#ff8ea6);
  box-shadow: 0 7px 0 rgba(101,73,150,.16), 0 14px 25px rgba(82,91,173,.16);
  font-size: 25px;
}

.brand strong { color: #49375f; font-weight: 1000; }
.brand small { color: #70628d; font-weight: 800; }
.login-message { max-width: 660px; margin: 18vh 0 0 5vw; }
.kicker, .eyebrow { color: #7653d2; letter-spacing: .14em; }
.login-message h1 { margin: 18px 0; color: #49375f; font-size: clamp(38px,4vw,58px); text-shadow: 0 3px 0 rgba(255,255,255,.7); }
.login-message h1 em, .hero-card h1 em {
  background: linear-gradient(90deg,#ff668d,#8a61ed,#21bfc8);
  background-clip: text;
}
.login-message p { color: #6d6087; font-weight: 600; }

.workshop-flow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
}
.workshop-flow span {
  display: grid;
  place-items: center;
  min-width: 84px;
  height: 78px;
  border: 3px solid rgba(255,255,255,.78);
  border-radius: 22px;
  background: rgba(255,255,255,.57);
  box-shadow: 0 8px 0 rgba(86,70,145,.09);
  font-size: 25px;
}
.workshop-flow b { display: block; color: #625375; font-size: 10px; }
.workshop-flow i { color: #fff; font-style: normal; text-shadow: 0 2px 4px rgba(80,63,129,.22); }

.login-mascot {
  position: absolute;
  right: 7%;
  bottom: 10%;
  width: 132px;
  height: 132px;
  border: 6px solid white;
  border-radius: 46% 46% 42% 42%;
  color: white;
  text-align: center;
  background: linear-gradient(145deg,#8a70f3,#5f52cf);
  box-shadow: 0 15px 0 rgba(80,62,140,.12), 0 25px 50px rgba(70,60,150,.2);
  transform: rotate(4deg);
}
.mascot-ears { position:absolute; top:-24px; width:100%; color:#7860df; font-size:35px; }
.mascot-face { margin-top: 24px; font-size: 31px; font-weight: 1000; letter-spacing: 4px; }
.mascot-body { margin: 6px auto; width: 50px; padding: 6px; border-radius: 13px; background: rgba(255,255,255,.2); font-weight: 1000; }
.spark { position:absolute; color:#ffdc69; animation: bob 2.4s ease-in-out infinite; }
.spark.s1 { left:-32px; top:12px; font-size:25px; }
.spark.s2 { right:-28px; top:-10px; font-size:28px; animation-delay:.5s; }
.spark.s3 { right:-17px; bottom:1px; color:#ff91aa; animation-delay:1s; }
@keyframes bob { 50% { transform: translateY(-9px) rotate(10deg); } }

.system-line { color: #66577d; font-weight: 800; }
.system-line i { background:#58cca4; box-shadow:0 0 0 5px rgba(255,255,255,.48); }
.login-panel { background: linear-gradient(150deg,#fffdfb,#f9f3ff); }
.login-card {
  border: 3px solid #fff;
  border-radius: 32px;
  box-shadow: 0 10px 0 #e9e0f5, 0 35px 80px rgba(84,61,135,.16);
}
.login-card:before {
  content:"🎮";
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:-78px auto 22px;
  border:5px solid white;
  border-radius:23px;
  background:linear-gradient(145deg,#ffd166,#ff8ca3);
  box-shadow:0 7px 0 #e8dff3;
  font-size:30px;
}
.login-card h2 { color:#493861; font-size:30px; text-align:center; }
.login-card > p, .login-card > .eyebrow { text-align:center; }
.login-card input, .settings-card input, .settings-card select, .preview-panel input {
  border: 2px solid #e8e0f2;
  border-radius: 15px;
  background: #fbf9ff;
}
.login-error { margin:12px 0; padding:10px 12px; border-radius:12px; color:#b63f5a; background:#fff0f3; font-size:12px; }
.logout-button { min-height:36px; padding:0 13px; }
.editor-meta { display:grid; grid-template-columns:1.2fr 1.6fr .8fr .8fr 1fr; gap:12px; align-items:end; margin-bottom:14px; padding:15px 18px; }
.editor-meta label { display:grid; gap:6px; color:#756987; font-size:10px; }
.editor-meta input,.editor-meta select { height:38px; border:2px solid #e8e0f1; border-radius:12px; padding:0 10px; color:#544368; background:#fbf9ff; }
.editor-meta .check { display:flex!important; align-items:center; height:38px; margin:0!important; }
.editor-meta .check input { width:18px; height:18px; }
.modal-card p { white-space:pre-wrap; overflow-wrap:anywhere; }
.primary {
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 14px;
  background: linear-gradient(100deg,#39cbd1,#8668ef 68%,#ff84a3);
  box-shadow: 0 6px 0 #6555bd, 0 11px 25px rgba(108,85,198,.22);
}
.secondary {
  border: 2px solid #e6ddf1;
  border-radius: 14px;
  color:#68577f;
  box-shadow:0 4px 0 #e6dff0;
}

.sidebar {
  width: 246px;
  color: #655675;
  border-right: 3px solid #eee5f6;
  background:
    radial-gradient(circle at 20% 100%,rgba(255,195,109,.18),transparent 25%),
    linear-gradient(180deg,#fffafd,#f4f0ff);
  box-shadow: 10px 0 35px rgba(82,58,128,.06);
}
.brand.compact { border-bottom: 2px dashed #ebe1f4; }
.brand.compact .brand-glyph { width:46px; height:46px; border-width:3px; font-size:21px; }
.nav-label { color:#aa9bb8; }
.nav-item { min-height:49px; border-radius:16px; color:#88799c; }
.nav-item span { font-size:18px; }
.nav-item:hover { background:#f0eaff; }
.nav-item.active {
  border: 2px solid #dcd1fa;
  color:#5b4592;
  background:linear-gradient(100deg,#ece8ff,#fff1f7);
  box-shadow:0 5px 0 #dfd5f1;
}
.nav-item em { color:#7254c7; background:#e9e2ff; }
.sidebar-status { border:2px solid #dfd6ef; border-radius:17px; background:#fff; box-shadow:0 5px 0 #e9e1f2; }
.sidebar-status b { color:#5d4d73; }
.sidebar-status small { color:#9b8dad; }
main { margin-left:246px; }

.topbar {
  height:98px;
  border-bottom:3px solid #eee7f5;
  background:rgba(255,253,255,.9);
}
.topbar h2 { color:#493b61; }
.ghost, .avatar { border:2px solid #e8dff3; border-radius:14px; box-shadow:0 4px 0 #e9e2f1; }
.avatar { background:linear-gradient(145deg,#ffd265,#ff8eaa); }
.page { padding-top:32px; }

.hero-card {
  position: relative;
  overflow:hidden;
  border:3px solid white;
  border-radius:28px;
  background:
    radial-gradient(circle at 86% 50%,rgba(255,255,255,.65) 0 110px,transparent 111px),
    linear-gradient(125deg,#d9fbf2,#dfe5ff 55%,#f1dcff);
  box-shadow:0 9px 0 #e6ddf2,0 22px 55px rgba(83,61,131,.10);
}
.hero-card:after { content:"☁️  ✦  ☁️"; position:absolute; right:7%; top:27px; opacity:.65; letter-spacing:22px; }
.hero-card h1 { color:#4c3b66; }
.orbital .ring { border:3px dashed rgba(112,86,191,.18); }
.core { width:120px; height:120px; border:6px solid white; background:linear-gradient(145deg,#ffcf66,#ff88a4); box-shadow:0 10px 0 rgba(102,75,158,.13),0 18px 40px rgba(91,83,179,.2); }
.node { border:3px solid white; width:18px; height:18px; }

.metrics article, .panel, .plugin-card, .client-summary article {
  border:3px solid white;
  border-radius:21px;
  box-shadow:0 6px 0 #e8e0f1,0 16px 35px rgba(81,59,127,.08);
}
.metrics article:nth-child(1){background:linear-gradient(145deg,#fff,#eeebff)}
.metrics article:nth-child(2){background:linear-gradient(145deg,#fff,#e7fbfc)}
.metrics article:nth-child(3){background:linear-gradient(145deg,#fff,#fff5db)}
.metrics article:nth-child(4){background:linear-gradient(145deg,#fff,#ffeef3)}
.metrics b { color:#55406f; }
.panel-head { border-bottom:2px dashed #eee8f4; }
.panel-head span { color:#8a67e7; }
.icon { width:40px; height:40px; border:3px solid white; border-radius:15px; box-shadow:0 4px 0 #e9e1f2; }
.status { border-radius:15px; font-weight:800; }

.page-heading h1 { color:#49385f; }
.filterbar { padding:12px; border:3px solid white; border-radius:20px; background:rgba(255,255,255,.72); box-shadow:0 5px 0 #e9e2f1; }
.search, .chip, .filterbar select { border:2px solid #e8e0f1; border-radius:14px; }
.chip.active { border-color:#d8c9ff; background:#eee8ff; box-shadow:0 3px 0 #ddd2ef; }
.plugin-card { position:relative; overflow:hidden; }
.plugin-card:after { content:"✦"; position:absolute; right:16px; bottom:48px; color:#f6cf69; opacity:.65; font-size:25px; }
.plugin-card:hover { transform:translateY(-5px) rotate(-.3deg); box-shadow:0 10px 0 #e4dbee,0 24px 45px rgba(83,60,130,.12); }
.toggle { border:2px solid white; height:23px; box-shadow:0 2px 0 #ddd4e8; }

.file-tree, .preview-panel { background:linear-gradient(160deg,#fff,#faf6ff); }
.tree-item { border-radius:12px; }
.tree-item:hover,.tree-item.active { color:#6548bd; background:#eee8ff; }
.code-panel textarea { background:#fffefa; }
.variables code { border-radius:9px; }
.release-banner { border:3px solid white; border-radius:24px; background:linear-gradient(110deg,#eafff6,#eef1ff,#fff0f5); box-shadow:0 7px 0 #e2daee,0 18px 40px rgba(78,57,125,.08); }
.release-score { display:grid; place-items:center; width:92px; height:92px; border:5px solid white; border-radius:50%; background:#fff6c9; box-shadow:0 7px 0 #eadfae; }
.modal-card { border:4px solid white; border-radius:28px; box-shadow:0 10px 0 #ded3ea,0 35px 90px rgba(56,36,96,.28); }

@media(max-width:1050px){
  .sidebar{width:190px} main{margin-left:190px}
  .login-mascot{opacity:.38;right:2%}
  .editor-meta{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:760px){
  .sidebar{width:70px}.sidebar .brand-glyph{width:42px;height:42px}.sidebar-status{border-radius:16px}
  main{margin-left:70px}.workshop-flow{display:none}.login-card{margin-top:35px}
}