/* 放大星系｜手機優先（直式 390×844 為主），電腦版在檔案最後用 min-width 補。
   原則：可點的東西至少 44px、主要操作放畫面下半部（拇指區）、面板從底部滑上來。 */
:root{
  --deep:#000F24; --navy:#002349; --mid:#0E3A75; --sky:#6FA8FF;
  --orange:#FC7300; --olight:#FFB877; --cream:#F2E4CE; --violet:#3B2A7A;
  --glass:rgba(10,18,52,.9); --line:rgba(111,168,255,.28);
  --font:"Noto Sans TC","Microsoft JhengHei","PingFang TC","Heiti TC",sans-serif;
  --tap:44px; --sb:env(safe-area-inset-bottom); --st:env(safe-area-inset-top);
  --dock-h:calc(68px + var(--sb));
  --sheet:bottom;   /* js/sheet.js 讀這個決定能不能往下滑收起 */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--deep);color:var(--cream);font:15px/1.6 var(--font);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
#scene.drag{cursor:grabbing}
.hidden{display:none!important}
.note{font-size:12.5px;color:rgba(242,228,206,.6)}

/* ---------- 上方：品牌（不放操作） ---------- */
#top{position:fixed;top:calc(10px + var(--st));left:14px;z-index:5;pointer-events:none}
.brand{font-weight:900;font-size:17px;letter-spacing:.06em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);display:flex;align-items:center;gap:8px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}

/* 操作提示：底部操作列上方 */
#hint{position:fixed;left:50%;bottom:calc(var(--dock-h) + 12px);transform:translateX(-50%);z-index:4;font-size:13px;color:rgba(242,228,206,.85);
  background:rgba(0,15,36,.55);border:1px solid rgba(111,168,255,.2);padding:6px 14px;border-radius:999px;white-space:nowrap;max-width:calc(100vw - 24px);
  overflow:hidden;text-overflow:ellipsis;transition:opacity 1.2s;pointer-events:none}
#hint b{color:var(--olight)}
#hint.fade{opacity:0}
body.panel-open #hint{opacity:0}

/* 行星名牌 */
#labels{position:fixed;inset:0;pointer-events:none;z-index:2}
.plabel{position:absolute;left:0;top:0;transform:translate(-50%,-100%);text-align:center;white-space:nowrap;transition:opacity .3s}
.plabel .n{font-weight:900;font-size:14px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8),0 0 14px rgba(111,168,255,.5)}
.plabel .s{font-size:11px;color:var(--olight);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.plabel .pin{width:2px;height:14px;margin:2px auto 0;background:linear-gradient(var(--olight),transparent)}
.plabel.mine .n{color:var(--olight)}

/* ---------- 底部操作列（拇指區） ---------- */
#dock{position:fixed;left:0;right:0;bottom:0;z-index:7;display:flex;gap:8px;padding:10px 12px calc(10px + var(--sb));
  background:linear-gradient(transparent,rgba(0,15,36,.75) 35%)}
.dk{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;border-radius:16px;
  border:1px solid var(--line);background:var(--glass);color:var(--cream);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0 8px;white-space:nowrap}
.dk .ic{font-size:18px}
.dk.primary{background:var(--orange);border-color:var(--orange);color:var(--deep)}
.dk.wide{flex:2}
.dk:active{transform:scale(.97)}
body.editing #dock, body.editing #top, body.editing #labels, body.editing #touch, body.editing #hint,
body.editing #panel, body.editing #drawer{display:none!important}

/* 觸控搖桿：輔助用，小一點，放在操作列上方左邊 */
#touch{display:none}
body.touch #touch{display:block}
#stick{position:fixed;left:16px;bottom:calc(var(--dock-h) + 52px);width:96px;height:96px;border-radius:50%;z-index:6;
  background:rgba(0,15,36,.3);border:2px solid rgba(111,168,255,.3);touch-action:none;opacity:.8}
#knob{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--olight),var(--orange));box-shadow:0 0 14px rgba(252,115,0,.5)}
#vbtns{position:fixed;right:16px;bottom:calc(var(--dock-h) + 52px);display:flex;flex-direction:column;gap:10px;z-index:6}
#vbtns button{width:52px;height:52px;border-radius:50%;font-size:18px;background:rgba(0,15,36,.45);border:2px solid rgba(111,168,255,.35);touch-action:none}
#vbtns button.on{background:rgba(252,115,0,.5)}
body.mode-25d #vbtns, body.mode-2d #vbtns{display:none}
body.panel-open #touch{display:none}

/* ---------- 底部滑出面板（星星清單、儀表板共用） ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;flex-direction:column;max-height:62vh;
  background:var(--glass);border:1px solid var(--line);border-bottom:none;border-radius:22px 22px 0 0;
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 -10px 40px rgba(0,0,0,.5);
  padding-bottom:var(--sb);transition:transform .25s ease;animation:sheetUp .32s cubic-bezier(.2,.9,.3,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.grab{display:flex;justify-content:center;padding:8px 0 2px;touch-action:none;cursor:grab}
.handle{width:44px;height:5px;border-radius:3px;background:rgba(242,228,206,.35)}
.sheet-head,.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 16px 8px;touch-action:none}
.sheet-head h2{margin:0;font-size:18px;color:#fff}
.x{flex:0 0 var(--tap);width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:rgba(0,15,36,.4);font-size:22px;line-height:1;cursor:pointer}
.sheet-body,.panel-body{overflow-y:auto;padding:0 14px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* 星星清單 */
#starlist{display:flex;flex-direction:column;gap:6px;margin:6px 0 14px}
#starlist button{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,15,36,.5);text-align:left;cursor:pointer}
#starlist .sw{flex:0 0 26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
#starlist .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
#starlist .t b{color:#fff;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#starlist .t small{color:var(--olight);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#starlist .d{color:var(--sky);font-size:12px;white-space:nowrap}
#starlist button.near,#starlist button.auto{border-color:var(--orange);background:rgba(252,115,0,.2)}
#starlist button.mine{border-color:rgba(255,184,119,.6)}
.drawer-more{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:12px}
.seg{display:flex;gap:6px}
.seg a{flex:1;min-height:var(--tap);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--cream);text-decoration:none;border-radius:12px;border:1px solid var(--line);background:rgba(0,15,36,.4)}
.seg a.on{background:var(--orange);color:var(--deep);border-color:var(--orange);font-weight:700}
#drawer-user{display:flex;align-items:center;justify-content:space-between;gap:10px}
#drawer-user .who{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
#drawer-user .who small{display:block;color:rgba(242,228,206,.55);font-size:12px}

/* 儀表板 */
.panel-head h2{margin:0;font-size:21px;font-weight:900;color:#fff;letter-spacing:.03em;line-height:1.25}
.p-sub{font-size:12.5px;color:var(--olight)}
.tabs{display:flex;padding:0 8px;border-bottom:1px solid var(--line)}
.tabs button{flex:1;min-height:var(--tap);background:none;border:none;color:rgba(242,228,206,.65);font-size:14px;cursor:pointer;border-bottom:3px solid transparent}
.tabs button.on{color:#fff;border-bottom-color:var(--orange);font-weight:700}
.panel-body{padding-top:12px;-webkit-user-select:text;user-select:text}
.card{background:rgba(0,15,36,.5);border:1px solid rgba(111,168,255,.2);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.card b{color:#fff}
.card p{margin:6px 0 0;font-size:14.5px;color:rgba(242,228,206,.9)}
.card.soon{text-align:center;padding:18px 14px}
.soon-ic{font-size:30px}
.owner-role{color:var(--olight);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chips span{font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--sky)}
.owner-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.owner-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,184,119,.5);color:var(--olight);text-decoration:none}
.contact{margin-top:10px;font-size:14.5px;color:var(--olight)}
.btn-edit{width:100%;min-height:48px;border:none;border-radius:14px;background:var(--orange);color:var(--deep);font-weight:700;cursor:pointer;margin-top:4px}

#toast{position:fixed;left:50%;top:calc(12px + var(--st));transform:translate(-50%,-160%);opacity:0;z-index:12;background:rgba(252,115,0,.95);color:var(--deep);
  font-weight:700;padding:9px 18px;border-radius:999px;transition:transform .35s,opacity .35s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
#toast.show{transform:translate(-50%,0);opacity:1}

#nogl{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--navy)}

/* ---------- 共用按鈕 ---------- */
.ubtn{min-height:var(--tap);font-size:14px;font-weight:700;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:0 16px;cursor:pointer;white-space:nowrap}
.ubtn.primary{background:var(--orange);border-color:var(--orange);color:var(--deep)}
.ubtn.ghost{background:transparent}
.ubtn.big{min-height:50px;font-size:16px;padding:0 22px}
.ubtn:disabled{opacity:.6;cursor:wait}

/* ---------- 登入（整頁，手機上像 App 開場） ---------- */
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(42,35,102,.5),rgba(0,15,36,.88))}
.login-card{width:100%;max-width:440px;max-height:100%;overflow-y:auto;background:var(--glass);border:1px solid var(--line);border-bottom:none;border-radius:26px 26px 0 0;
  padding:22px 20px calc(18px + var(--sb));text-align:center;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.login-card h1{font-size:23px;margin:10px 0 4px;color:#fff;letter-spacing:.04em}
.login-card h2{color:#fff}
.lead{font-size:14px;color:rgba(242,228,206,.85);margin:0 0 14px}
.planet-ic{width:60px;height:60px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9ff0c8,#3fae8a 55%,#1d5a52);box-shadow:0 0 30px rgba(63,174,138,.6),0 0 0 6px rgba(252,115,0,.25)}
.lbtn{min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:#fff;color:#1f1f1f;font-size:15.5px;font-weight:700;cursor:pointer;text-decoration:none}
.lbtn .g{font-weight:900;width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:#4285F4;color:#fff;font-size:13px}
.lbtn.google{margin-bottom:10px}
.lbtn.google.blocked{opacity:.55}
.lbtn.discord{background:#5865F2;color:#fff;border-color:#5865F2;margin-top:10px}
.lbtn.discord .g{background:#fff;color:#5865F2}
.lbtn.discord:disabled{opacity:.45;cursor:not-allowed}
.lbtn.discord small{font-weight:500;font-size:12px;opacity:.85}
.lbtn.primary{background:var(--orange);color:var(--deep);border-color:var(--orange)}
.lbtn.ghost{background:rgba(0,15,36,.5);color:var(--cream)}
.email-form,.code-form{display:flex;flex-direction:column;gap:8px;text-align:left}
.email-form label,.code-form label{font-size:13.5px;color:rgba(242,228,206,.85)}
.login-card input{width:100%;min-height:50px;font:inherit;font-size:16px;color:var(--cream);background:rgba(0,15,36,.6);border:1px solid var(--line);border-radius:14px;padding:0 14px;-webkit-user-select:text;user-select:text}
.code-form{margin-top:12px}
.code-form .row{display:flex;gap:8px}
.code-form input{letter-spacing:.35em;font-size:20px;text-align:center}
.code-form .lbtn{width:auto;flex:0 0 96px}
.or{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(242,228,206,.5);margin:16px 0 12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.sent{margin-top:12px;font-size:14px;background:rgba(63,174,138,.18);border:1px solid rgba(63,174,138,.5);border-radius:14px;padding:10px 12px;text-align:left}
.sent a{color:var(--olight)}
.err{color:#ff9a8a;font-size:13.5px;min-height:1em;margin-top:8px}
.linkbtn{min-height:var(--tap);font-size:14px;background:none;border:none;color:rgba(242,228,206,.75);cursor:pointer;text-decoration:underline}
.inapp{text-align:left;font-size:14px;background:rgba(252,115,0,.14);border:1px solid rgba(252,115,0,.55);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.inapp p{margin:6px 0}
.inapp .small{font-size:12.5px;color:rgba(242,228,206,.75)}
.inapp-btns{display:flex;gap:8px;margin:8px 0 4px}
.inapp-btns .lbtn{min-height:var(--tap);font-size:14px}
/* 不是內建瀏覽器時，Google 排最前面；內建瀏覽器時 Email 在前（HTML 順序） */
#login:not(.in-app) .login-card .or{order:3}
#login:not(.in-app) #l-google{order:2}
#login:not(.in-app) .email-form,#login:not(.in-app) #l-sent,#login:not(.in-app) .code-form{order:4}
#login:not(.in-app) #l-discord,#login:not(.in-app) #l-err,#login:not(.in-app) #l-backend,#login:not(.in-app) #l-guest{order:5}
#login:not(.in-app) .or{margin-top:6px}

/* ---------- 編輯器：上半部預覽、下半部選項、最下面大按鈕 ---------- */
#editor{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:linear-gradient(170deg,#1a1050 0%,#0e1a48 45%,#000F24 100%)}
.ed-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:calc(8px + var(--st)) 12px 8px}
.ed-head h2{margin:0;font-size:17px;color:#fff;flex:1}
#ed-close{min-height:38px;font-size:13px}
#ed-steps{flex:1 1 100%;display:flex;gap:6px}
#ed-steps .st{flex:1;min-height:40px;font-size:14px;background:rgba(0,15,36,.45);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:0 6px}
#ed-steps .st b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(242,228,206,.18);font-size:12px}
#ed-steps .st.on{background:var(--orange);color:var(--deep);border-color:var(--orange);font-weight:700}
#ed-steps .st.on b{background:var(--deep);color:var(--orange)}
#ed-steps .st.todo{opacity:.45;cursor:default}
.ed-main{flex:1;display:flex;flex-direction:column;min-height:0}
.ed-view{flex:0 0 42%;position:relative;min-height:0}
#ed-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#ed-canvas.over-prop{cursor:pointer}
#ed-canvas.grabbing{cursor:grabbing}
#ed-hint{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:12px;color:rgba(242,228,206,.8);background:rgba(0,15,36,.55);padding:3px 12px;border-radius:999px;white-space:nowrap;pointer-events:none}
#ed-card-preview{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:min(330px,calc(100% - 24px));background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:8px 12px;pointer-events:none}
.pv-name{font-weight:900;font-size:16px;color:#fff}
.pv-role{color:var(--olight);font-size:13.5px}
.pv-chips{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0}
.pv-chips span{font-size:12px;padding:1px 9px;border-radius:999px;border:1px solid var(--line);color:var(--sky)}
.pv-bio{font-size:13px;color:rgba(242,228,206,.85)}
/* 選中物件時，預覽下緣的大按鈕 */
#ed-sel{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;background:rgba(0,15,36,.82);border:1px solid rgba(252,115,0,.6);border-radius:16px;padding:6px}
#ed-sel .nm{flex:1;min-width:0;font-size:14px;font-weight:700;color:#fff;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ed-sel button{min-width:var(--tap);height:var(--tap);border-radius:12px;border:1px solid var(--line);background:rgba(0,15,36,.6);font-size:18px;cursor:pointer}
#ed-sel button.danger{border-color:#ff8a7a}
#ed-sel button.ok{background:var(--orange);color:var(--deep);border-color:var(--orange);font-size:14px;font-weight:700;padding:0 12px}
#ed-controls{flex:1;overflow-y:auto;padding:10px 14px 16px;border-top:1px solid var(--line);background:rgba(0,15,36,.4);border-radius:20px 20px 0 0;-webkit-user-select:text;user-select:text;overscroll-behavior:contain}
#ed-controls h3{font-size:15px;color:#fff;margin:14px 0 8px}
#ed-controls h3:first-child{margin-top:2px}
.subtabs{display:flex;gap:6px;margin-bottom:12px;position:sticky;top:-10px;z-index:1;padding-top:2px;background:linear-gradient(#0a1330 80%,transparent)}
.subtabs button{flex:1;min-height:var(--tap);border-radius:12px;border:1px solid var(--line);background:rgba(0,15,36,.5);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.subtabs button.on{background:var(--cream);color:var(--deep);border-color:var(--cream);font-weight:700}
.grid{display:grid;gap:8px}
.grid.roles{grid-template-columns:repeat(4,1fr)}
.grid.tpls{grid-template-columns:repeat(3,1fr)}
.grid.props{grid-template-columns:repeat(4,1fr)}
.grid.hulls{grid-template-columns:repeat(2,1fr)}
.opt{position:relative;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border-radius:14px;border:1px solid var(--line);background:rgba(0,15,36,.5);font-size:13px;cursor:pointer}
.opt .ic{font-size:24px;line-height:1.15}
.opt.on{border-color:var(--orange);background:rgba(252,115,0,.22);box-shadow:0 0 0 1px var(--orange) inset;color:#fff}
.opt:disabled{opacity:.4;cursor:not-allowed}
.opt:active{transform:scale(.96)}
.opt small{font-size:11.5px;color:rgba(242,228,206,.65)}
.opt b{font-size:15px}
.grid.tpls .opt{min-height:76px}
.grid.hulls .opt{min-height:72px}
.opt .rec{position:absolute;top:-6px;right:-3px;font-style:normal;font-size:10px;font-weight:700;background:var(--orange);color:var(--deep);border-radius:999px;padding:0 6px}
.fld{display:block;font-size:13.5px;color:rgba(242,228,206,.85);margin:12px 0 0}
.fld small{color:var(--sky);margin-left:4px}
#ed-controls input:not([type=color]):not([type=checkbox]){font:inherit;font-size:16px;width:100%;min-height:var(--tap);color:var(--cream);background:rgba(0,15,36,.6);border:1px solid var(--line);border-radius:12px;padding:0 12px;margin-top:4px}
#ed-controls .row{display:flex;gap:8px;align-items:center}
#ed-controls .row input{margin-top:0!important}
.chips.pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{min-height:40px;font-size:14px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(0,15,36,.5);color:var(--sky);cursor:pointer}
.chip.on{background:var(--sky);color:var(--deep);border-color:var(--sky);font-weight:700}
.mini{min-height:var(--tap);font-size:14px;font-weight:700;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:rgba(0,15,36,.6);cursor:pointer;white-space:nowrap}
.more{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:4px 12px 10px}
.more summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;font-size:14px;color:var(--olight)}
.more .row.link{margin-top:8px}
.more .row.link input:first-child{flex:0 0 38%}
.check{display:flex;gap:10px;align-items:center;font-size:14px;margin-top:10px;min-height:var(--tap)}
.check input{width:22px;height:22px;flex:0 0 22px}
.tip{font-size:13.5px;color:rgba(242,228,206,.8);background:rgba(111,168,255,.1);border:1px dashed rgba(111,168,255,.35);border-radius:12px;padding:8px 10px;margin-bottom:10px}
.tip.warn{border-color:rgba(252,115,0,.6);background:rgba(252,115,0,.12)}
.swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sw{width:var(--tap);height:var(--tap);border-radius:50%;border:2px solid rgba(255,255,255,.25);background:var(--c);cursor:pointer;padding:0}
.sw.on{border-color:#fff;box-shadow:0 0 0 3px var(--orange)}
.sw.custom{width:auto;border-radius:999px;display:flex;align-items:center;gap:6px;padding:0 12px 0 6px;background:rgba(0,15,36,.5);font-size:13px;color:var(--cream);position:relative}
.sw.custom input{width:30px;height:30px;border:none;border-radius:50%;padding:0;background:none;cursor:pointer}
.ed-foot{display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + var(--sb));border-top:1px solid var(--line);background:rgba(0,15,36,.75)}
#ed-msg{flex:1;font-size:13px;color:var(--olight);text-align:right;line-height:1.35}
#ed-next{min-width:46%}

/* ================= 電腦版（次要，只要不壞、好用） ================= */
@media (min-width: 900px) and (pointer: fine){
  :root{--sheet:side}
  .sheet{animation:none}
  #panel{left:auto;right:16px;top:16px;bottom:auto;width:390px;max-height:calc(100vh - 110px);border-radius:20px;border-bottom:1px solid var(--line);padding-bottom:0}
  #drawer{left:16px;right:auto;bottom:84px;width:400px;max-height:calc(100vh - 110px);border-radius:20px;border-bottom:1px solid var(--line);padding-bottom:0}
  .grab{display:none}
  .sheet-head,.panel-head{padding-top:14px}
  #dock{left:50%;right:auto;transform:translateX(-50%);width:560px;background:none}
  #hint{bottom:84px}
  .overlay{align-items:center}
  .login-card{border-radius:24px;border-bottom:1px solid var(--line);max-height:calc(100vh - 32px)}
  #editor .ed-main{flex-direction:row}
  .ed-view{flex:1.2}
  #ed-controls{flex:0 0 440px;border-top:none;border-left:1px solid var(--line);border-radius:0}
  .ed-head{padding:12px 18px}
  .ed-head h2{flex:0 0 auto}
  #ed-steps{flex:1 1 auto;order:0}
  #ed-close{order:1}
  #ed-next{min-width:220px}
}