/* 格爾空間設計：亞麻米白底、炭黑側欄、金色點綴（取自官網 #ccaa70 / #1a1a1a） */
:root{
  --navy:#1a1a1a;--navy2:#262320;--navy3:#a8864a;       /* navy=側欄；navy3=主強調（深金，淺底上對比足夠） */
  --gold:#ccaa70;--gold2:#e2c690;--blue:#8a6a2f;
  --grad:linear-gradient(120deg,#e2c690 0%,#ccaa70 50%,#b08c4e 100%);
  --bg:#f4f0e8;--panel:#fffdf9;--line:#e2dccf;--line2:#ece7dc;--text:#232120;--mute:#797365;
  --danger:#b3392b;--ok:#2f7d57;--warn:#a8741a;--hover:#f8f4ea;--unread:#f7f0de;
  --shadow:0 1px 2px #2321201a,0 6px 20px #23212010;
  --serif:"Cormorant Garamond","Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  color-scheme:light;
}
.wordmark{font-family:var(--serif);font-weight:700;letter-spacing:2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 -apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0}
a{color:var(--blue)}

/* 按鈕與表單 */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;line-height:1.3;white-space:nowrap;transition:.12s}
.btn:hover{background:var(--hover);border-color:var(--navy3)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.pri{background:var(--grad);border-color:transparent;color:#fff;font-weight:600;text-shadow:0 1px 2px #0003}
.btn.pri:hover{filter:brightness(1.08);background:var(--grad)}
.btn.gold{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.btn.gold:hover{filter:brightness(1.08)}
.btn.danger{color:var(--danger)}
.btn.sm{padding:4px 10px;font-size:13px;border-radius:6px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--hover)}
.input,select.input,textarea.input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 11px;outline:none;transition:.12s}
.input:focus{border-color:var(--navy3);box-shadow:0 0 0 3px #ccaa7033}
textarea.input{resize:vertical;line-height:1.6}
label.f{display:block;margin:12px 0 4px;color:var(--mute);font-size:12.5px;font-weight:500}
.hint{color:var(--mute);font-size:12.5px;margin-top:4px}
.hint.bad{color:var(--danger)}
.err{color:var(--danger);font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{display:flex;align-items:center;gap:6px;color:var(--text);font-size:13px;cursor:pointer}

/* 登入 */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.05fr 1fr}
.login .brand{background:radial-gradient(900px 500px at 85% 110%,#ccaa7055,transparent 60%),radial-gradient(700px 400px at 0% 0%,#8f7a523a,transparent 60%),#121110;color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login .brand::after{content:"";position:absolute;right:-140px;bottom:-140px;width:420px;height:420px;border-radius:50%;border:2px solid #ccaa7044;box-shadow:0 0 0 38px #ccaa7014,0 0 0 80px #8f7a520d}
.login .brand h1{font-size:36px;letter-spacing:4px;font-family:var(--serif);font-weight:700;text-shadow:0 0 28px #e8d3a666}
.login .brand .sub{letter-spacing:3px;color:#b9b09f;margin-top:6px;font-size:13px}
.login .brand .tag{border-left:3px solid var(--gold);padding-left:14px;color:#d8d0bf;max-width:360px;line-height:1.8}
.login .box{display:flex;align-items:center;justify-content:center;padding:32px}
.login form{width:min(360px,100%);display:flex;flex-direction:column;gap:12px}
.login form h2{font-size:22px;margin-bottom:4px}
.crest{margin-bottom:18px}
.crest img{width:56px;height:56px;display:block;border-radius:50%}
.login .brand .hd,.login .brand .tag{position:relative;z-index:2}
.login .brand .mascot{position:absolute;right:5%;bottom:0;width:min(340px,46%);height:auto;z-index:1;filter:drop-shadow(0 0 26px #e8d3a655)}
@media(max-width:820px){.login{grid-template-columns:1fr}.login .brand{padding:28px;min-height:200px}.login .brand .mascot{width:120px;right:16px}.login .brand .tag{display:none}.login .brand h1{font-size:26px}}

/* App 外框 */
.app{display:grid;grid-template-columns:248px 1fr;height:100vh;height:100dvh}
.side{background:var(--navy);border-right:1px solid #ffffff12;color:#e6e0d3;display:flex;flex-direction:column;min-height:0}
.side .logo{display:flex;gap:10px;align-items:center;padding:18px 18px 14px;border-bottom:1px solid #ffffff1a}
.side .logo img{width:36px;height:36px;flex:none;border-radius:50%}
.side .logo b{display:block;font-family:var(--serif);font-size:16px;letter-spacing:2px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.side .logo small{color:#b3a98f;font-size:11px;letter-spacing:1px}
.side .compose{margin:16px 16px 8px}
.side .compose .btn{width:100%;justify-content:center;padding:10px}
.nav{padding:6px 10px;overflow:auto;flex:1}
.nav h6{margin:14px 8px 4px;color:#a39a82;font-size:11px;font-weight:500;letter-spacing:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#e6e0d3;text-decoration:none;cursor:pointer;margin:1px 0}
.nav a:hover{background:#ffffff14}
.nav a.on{background:linear-gradient(90deg,#ccaa702e,#8f7a5214);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.nav a .n{margin-left:auto;background:var(--grad);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;font-weight:700}
.nav a .n2{margin-left:auto;color:#b3a98f;font-size:12px;font-weight:600}
.nav svg{width:18px;height:18px;flex:none;opacity:.9}
.me{border-top:1px solid #ffffff1a;padding:12px 14px;display:flex;gap:10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.me .who{min-width:0;flex:1}
.me .who b{display:block;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.me .who small{color:#b3a98f;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .btn{background:transparent;color:#cfdbf2;border-color:#ffffff2e;padding:4px 9px;font-size:12.5px}
.me .btn:hover{background:#ffffff1a}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:12px;padding:12px 22px;background:var(--panel);border-bottom:1px solid var(--line);min-height:58px}
.top h2{font-size:17px;font-weight:700;font-family:var(--serif);letter-spacing:1px}
.top .sp{flex:1}
.top .search{max-width:280px}
.menu-btn{display:none}
.content{flex:1;min-height:0;overflow:auto}
.pad{padding:22px;max-width:1180px;margin:0 auto}

/* 信件兩欄 */
.mail{display:grid;grid-template-columns:minmax(300px,380px) 1fr;height:100%}
.mlist{border-right:1px solid var(--line);background:var(--panel);overflow:auto}
.mrow{padding:11px 16px;border-bottom:1px solid var(--line2);cursor:pointer;border-left:3px solid transparent}
.mrow:hover{background:var(--hover)}
.mrow.unread{background:var(--unread);border-left-color:var(--gold)}
.mrow.unread .fr,.mrow.unread .sj{font-weight:650}
.mrow.sel{background:var(--hover);border-left-color:var(--navy3)}
.mrow .l1{display:flex;justify-content:space-between;gap:8px}
.mrow .fr,.mrow .sj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .dt{color:var(--mute);font-size:12px;flex:none}
.mrow .sj{color:var(--mute)}
.mview{overflow:auto;padding:24px 28px;min-width:0;background:var(--bg)}
.mview .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow)}
.mview h2{font-size:20px;margin-bottom:8px;word-break:break-word}
.mview .meta{color:var(--mute);font-size:13px;line-height:1.8;word-break:break-all}
.mview .meta b{color:var(--text);font-weight:500}
.mview .acts{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.mview .body{border-top:1px solid var(--line2);padding-top:14px;margin-top:6px}
.mview pre{white-space:pre-wrap;word-break:break-word;font:inherit;margin:0;line-height:1.75}
.mview iframe{width:100%;border:0;min-height:55vh;background:#fff;border-radius:6px}
.empty{color:var(--mute);text-align:center;padding:56px 20px}
.empty svg{width:44px;height:44px;opacity:.35;display:block;margin:0 auto 10px}
.back{display:none}

/* 卡片、表格、徽章 */
.card2{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.card2 .hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.card2 .hd h3{font-size:15px}
.card2 .bd{padding:18px}
table.t{width:100%;border-collapse:collapse}
.t th{font-weight:500;color:var(--mute);font-size:12.5px;text-align:left;padding:10px 14px;background:var(--hover);border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr:hover td{background:var(--hover)}
.t .ell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t .acts{display:flex;gap:6px;justify-content:flex-end}
.scroll-x{overflow-x:auto}
.badge{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;font-weight:500;white-space:nowrap}
.b-owner{background:#ccaa7026;color:var(--gold)}
.b-admin{background:#ccaa7026;color:var(--navy3)}
.b-user{background:#6b768624;color:var(--mute)}
.b-ok{background:#1e8e5a22;color:var(--ok)}
.b-failed,.b-off{background:#c0392b22;color:var(--danger)}
.b-shared{background:#ccaa7026;color:var(--navy3)}
.b-personal{background:#6b768624;color:var(--mute)}
@media(prefers-color-scheme:light){.b-owner{color:#b24a3d}}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tcard{padding:16px;display:flex;flex-direction:column;gap:8px}
.tcard h4{font-size:15px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tcard .pv{color:var(--mute);font-size:13px;white-space:pre-wrap;max-height:84px;overflow:hidden;position:relative}
.tcard .acts{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.toolbar .input{max-width:260px}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center}
.yes{color:var(--ok);font-weight:700}.no{color:var(--mute);opacity:.6}
.meter{height:8px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:var(--grad)}
.sigprev{border:1px dashed var(--line);border-radius:8px;padding:12px;color:var(--mute);white-space:pre-wrap;min-height:48px;font-size:13px}

/* 對話框、通知 */
dialog{border:0;border-radius:14px;padding:0;background:var(--panel);color:var(--text);width:min(680px,94vw);max-height:92vh;box-shadow:0 20px 60px #0006}
dialog.narrow{width:min(460px,94vw)}
dialog::backdrop{background:#0a1226aa;backdrop-filter:blur(2px)}
dialog .dh{display:flex;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#262320,#241a3d);color:#fff;border-radius:14px 14px 0 0}
dialog .dh h3{flex:1;font-size:16px;letter-spacing:1px}
dialog .dh button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
dialog .db{padding:6px 22px 18px;overflow:auto;max-height:calc(92vh - 130px)}
dialog .df{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:14px 22px;border-top:1px solid var(--line)}
dialog .df .err{flex:1}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:99}
.toast{background:#262320;color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--shadow);border-left:4px solid var(--gold);animation:in .2s}
.toast.bad{border-left-color:#ef6b5b}
@keyframes in{from{transform:translateY(8px);opacity:0}}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:30;transform:translateX(-100%);transition:.2s}
  .app.open .side{transform:none;box-shadow:0 0 0 100vmax #0007}
  .menu-btn{display:inline-flex}
  .mail{grid-template-columns:1fr}
  .mview{display:none;padding:14px}
  .mail.show .mlist{display:none}
  .mail.show .mview{display:block}
  .back{display:inline-flex}
  .top{padding:10px 14px}
  .pad{padding:14px}
  .row2{grid-template-columns:1fr}
}

/* ===== 圖文編輯器 ===== */
.rtew{border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden}
.rtew:focus-within{border-color:var(--navy3);box-shadow:0 0 0 3px #ccaa7033}
.rtb{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px;border-bottom:1px solid var(--line2);background:var(--hover)}
.tb{min-width:32px;height:32px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;white-space:nowrap}
.tb:hover{background:var(--panel);border-color:var(--line)}
.tb:active{background:var(--line2)}
.tbsel{height:32px;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:0 6px;font-size:13px}
.sepv{width:1px;height:20px;background:var(--line);margin:0 4px}
.ctext{font-weight:700;border-bottom:3px solid var(--gold);line-height:1}
.hl{font-weight:700;background:#fff3a3;color:#111;padding:0 4px;border-radius:3px;line-height:1.3}
.cwrap{position:relative;display:inline-block}
.palette{position:absolute;bottom:38px;left:0;z-index:5;display:grid;grid-template-columns:repeat(4,26px);gap:6px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.rte{min-height:190px;max-height:46vh;overflow:auto;padding:12px 14px;outline:none;line-height:1.75;word-break:break-word}
.rte:empty::before,.rte:has(> br:only-child)::before{content:attr(data-ph);color:var(--mute);pointer-events:none}
.rte blockquote{margin:8px 0;padding:2px 0 2px 12px;border-left:3px solid var(--line);color:var(--mute)}
.rte a{color:var(--blue)}
.rte ul,.rte ol{padding-left:1.5em;margin:6px 0}

/* ===== 收件人自動建議 ===== */
.sugwrap{position:relative}
.sug{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:260px;overflow:auto}
.si{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.si:last-child{border-bottom:0}
.si.on,.si:hover{background:var(--hover);box-shadow:inset 3px 0 0 var(--gold)}
.si span{color:var(--mute);font-size:12.5px;word-break:break-all}
.si em{font-style:normal;margin-left:auto;font-size:11px;padding:0 7px;border-radius:9px;background:#ccaa7026;color:var(--navy3)}

/* ===== 2FA ===== */
.input.code{letter-spacing:3px;font-variant-numeric:tabular-nums;text-align:center;font-size:17px}
.qrbox{width:200px;height:200px;margin:12px auto;background:#fff;padding:6px;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.qrbox svg{width:100%;height:100%;display:block}
.secret{display:inline-block;margin:6px 0 2px;padding:6px 12px;border-radius:8px;background:var(--hover);border:1px solid var(--line);letter-spacing:2px;font-size:14px;user-select:all;word-break:break-all}
.steps{margin:6px 0 0;padding-left:20px;color:var(--text)}.steps li{margin:4px 0}
.rcgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rcgrid code{padding:8px;text-align:center;background:var(--hover);border:1px solid var(--line);border-radius:8px;letter-spacing:2px;font-size:15px;user-select:all}

/* ===== 提醒橫幅 ===== */
.banner{display:flex;gap:12px;align-items:center;padding:8px 22px;background:linear-gradient(90deg,#ccaa7022,#ccaa7022);border-bottom:1px solid var(--line);font-size:13px}
.banner a{color:var(--blue);cursor:pointer;white-space:nowrap}
.banner .x{margin-left:auto;background:none;border:0;color:var(--mute);font-size:20px;cursor:pointer;line-height:1}

/* ===== 對話框尺寸 ===== */
dialog.wide{width:min(860px,96vw)}

/* ===== 手機底部分頁列 ===== */
.tabbar{display:none}

/* ===== 高度與安全區域（iPhone 瀏海、iPad 主畫面 App） ===== */
html,body{height:var(--app-h,100dvh)}
.app{height:var(--app-h,100dvh)}
.login{min-height:var(--app-h,100dvh)}
.top{padding-top:calc(12px + env(safe-area-inset-top))}
.side{padding-top:env(safe-area-inset-top)}
@media(display-mode:standalone){body{overscroll-behavior:none}}

@media(max-width:900px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--navy);border-top:1px solid #ffffff1a;padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:center}
  .tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#b3a98f;font-size:11px;padding:4px 0;cursor:pointer;min-height:44px;justify-content:center;-webkit-tap-highlight-color:transparent}
  .tabbar .tab.on{color:#fff}
  .tabbar .tab.on svg{color:var(--gold)}
  .tabbar .fab{flex:none;width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;margin-top:-18px;box-shadow:0 4px 14px #ccaa706b;flex-direction:row}
  .content{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .side{z-index:40;padding-bottom:env(safe-area-inset-bottom)}
  .app.open .side{z-index:40}
  .top .search{max-width:none;flex:1;min-width:0}
  .top{gap:8px}
  .banner{padding:8px 14px}
  .btn,.tb,.tbsel,.input{min-height:40px}
  .mrow{padding:13px 16px}
  .t th,.t td{padding:10px}
  .toolbar .input{max-width:none;flex:1}
  .grid3{grid-template-columns:1fr}
  #toasts{left:14px;right:14px;bottom:calc(76px + env(safe-area-inset-bottom))}
  .rte{max-height:34vh}
}
@media(max-width:600px){
  dialog,dialog.narrow,dialog.wide{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  dialog .dh{border-radius:0;padding-top:calc(16px + env(safe-area-inset-top))}
  dialog .db{max-height:calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  dialog .df{padding-bottom:calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .rtb{gap:2px}
  .tb{min-width:36px}
  .rcgrid{grid-template-columns:1fr}
  .pad{padding:12px}
}
@media(min-width:901px) and (max-width:1180px){
  .app{grid-template-columns:210px 1fr}
  .mail{grid-template-columns:minmax(260px,320px) 1fr}
  .pad{padding:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== 密碼欄位、邀請連結 ===== */
.pwwrap{position:relative}
.pwwrap .input{padding-right:62px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--blue);cursor:pointer;font-size:13px;padding:6px 8px;min-height:0!important}
.jform{width:min(380px,100%);display:flex;flex-direction:column;gap:2px}
.jform h2{font-size:22px;margin-bottom:6px}
.jform label.f{margin:10px 0 4px}
.linkbox{font-family:ui-monospace,Menlo,monospace;font-size:13px}

/* ============ 登入／註冊頁：動態視覺 ============ */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.login{position:relative;overflow:hidden;
  --bg:#121110;--panel:#1c1a18;--line:#35322d;--line2:#2a2723;--text:#efe9de;--mute:#a39b8c;--hover:#23201d;--danger:#ff7b6b;--blue:#ccaa70;color-scheme:dark;color:var(--text);background:#121110}
.login > .brand,.login > .box{position:relative;z-index:2}
.login .brand{background:transparent!important}
.login .brand::after{display:none}

/* 極光 */
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.aurora .a1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,#8f7a52 0%,#8f7a5200 68%);animation:drift1 22s ease-in-out infinite}
.aurora .a2{width:42vmax;height:42vmax;right:-12vmax;bottom:-16vmax;background:radial-gradient(circle,#ccaa70 0%,#ccaa7000 68%);animation:drift2 26s ease-in-out infinite}
.aurora .a3{width:36vmax;height:36vmax;left:34%;top:30%;background:radial-gradient(circle,#ccaa70 0%,#ccaa7000 68%);opacity:.38;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(9vw,8vh) scale(1.18)}}
@keyframes drift2{50%{transform:translate(-9vw,-7vh) scale(1.14)}}
@keyframes drift3{33%{transform:translate(-10vw,6vh) scale(1.2)}66%{transform:translate(8vw,-8vh) scale(.9)}}
.particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* 品牌區 */
.ltr{display:inline-block;animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 55ms + 150ms)}
.login .brand h1{animation:glow 4.5s ease-in-out infinite 1.6s}
.login .brand .sub{animation:rise .8s ease backwards;animation-delay:.95s}
.login .brand .tag{min-height:56px}
.rot.in{animation:fadeText .7s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fadeText{from{opacity:0;transform:translateY(10px)}}
@keyframes glow{50%{text-shadow:0 0 40px #e8d3a699,0 0 8px #ffffff33}}

/* 吉祥物：浮動＋隨滑鼠位移＋光暈脈動 */
.login .brand .mascot{transform:translate(calc(var(--mx,0) * -18px),calc(var(--my,0) * -12px));transition:transform .3s ease-out;animation:rise 1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:.5s}
.mimg{display:block;width:100%;height:auto;animation:float 6s ease-in-out infinite}
.mglow{position:absolute;inset:8% 6% 0;border-radius:50%;background:radial-gradient(circle,#ccaa7099,#8f7a5200 70%);filter:blur(28px);animation:glowp 4.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-.6deg)}}
@keyframes glowp{50%{opacity:.55;transform:scale(1.1)}}

/* 玻璃卡片＋旋轉的漸層邊框 */
.authcard{position:relative;padding:30px 28px;border-radius:20px;background:#1c1a18b8;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 20px 60px #0009,inset 0 1px 0 #ffffff14;animation:pop .8s cubic-bezier(.2,.8,.2,1) backwards}
.authcard::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),#e2c690,#ccaa70,#8f7a52,#35322d 55%,#e2c690);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ang 7s linear infinite}
@keyframes ang{to{--ang:360deg}}
@keyframes pop{from{opacity:0;transform:translateY(28px) scale(.96)}}
.authcard > *{animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards}
.authcard > :nth-child(1){animation-delay:.25s}.authcard > :nth-child(2){animation-delay:.32s}.authcard > :nth-child(3){animation-delay:.39s}
.authcard > :nth-child(4){animation-delay:.46s}.authcard > :nth-child(5){animation-delay:.53s}.authcard > :nth-child(6){animation-delay:.6s}
.authcard > :nth-child(7){animation-delay:.67s}.authcard > :nth-child(8){animation-delay:.74s}.authcard > :nth-child(9){animation-delay:.81s}
.authcard > :nth-child(n+10){animation-delay:.88s}
.authcard.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.crest img{animation:ring 3s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 #ccaa708c}100%{box-shadow:0 0 0 18px #ccaa7000}}
.authcard .input{background:#0e0d0ccc;transition:border-color .2s,box-shadow .2s,transform .2s}
.authcard .input:focus{transform:translateY(-1px)}

/* 登入按鈕：流動漸層、掃光、載入圈 */
.authcard .btn.pri{position:relative;overflow:hidden;background:linear-gradient(110deg,#e2c690,#ccaa70,#b08c4e,#e2c690);background-size:240% 100%;animation:flow 6s linear infinite;box-shadow:0 8px 24px #ccaa704d;transition:transform .15s,box-shadow .2s}
.authcard .btn.pri:hover{transform:translateY(-2px);box-shadow:0 12px 30px #ccaa7080;filter:none}
.authcard .btn.pri:active{transform:translateY(0) scale(.99)}
.authcard .btn.pri::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);transition:none}
.authcard .btn.pri:hover::before{left:130%;transition:left .7s ease}
@keyframes flow{to{background-position:240% 0}}
.btn.loading{pointer-events:none}
.btn.loading::after{content:"";width:14px;height:14px;margin-left:8px;border:2px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* 登入成功轉場 */
.login{transition:opacity .35s ease,transform .35s ease,filter .35s ease}
.login.leaving{opacity:0;transform:scale(1.03);filter:blur(6px)}

@media(max-width:820px){
  .login .brand{min-height:210px}
  .login .brand .mascot{width:128px;right:14px;top:14px;bottom:auto}
  .aurora i{filter:blur(60px)}
  .authcard{padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){.aurora i,.mimg,.mglow,.crest img,.authcard::before{animation:none!important}}

/* ===== 資料夾 ===== */
.nav h6.foldh{display:flex;align-items:center}
.nav .addf{margin-left:auto;width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:#b3a98f;cursor:pointer;display:grid;place-items:center;padding:0}
.nav .addf:hover{background:#ffffff1f;color:#fff}
.nav .addf svg{width:14px;height:14px}
.nav a .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nav a.hintlink{color:#b3a98f;font-size:13px}
.nav a.drop{background:#ccaa703a;outline:1px dashed var(--gold);outline-offset:-2px}
.mrow[draggable=true]{cursor:grab}
.mrow[draggable=true]:active{cursor:grabbing;opacity:.7}
.menulist{display:flex;flex-direction:column;gap:8px}
.btn.menurow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 14px;text-align:left;white-space:normal}
.btn.menurow span{color:var(--mute);font-size:12.5px}
.btn.menurow.danger b{color:var(--danger)}
.btn.menurow:disabled{opacity:.55}
.rulelist{display:flex;flex-direction:column;gap:6px}
.ruleitem{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--hover)}
.ruleitem span{flex:1;word-break:break-all}

/* ===== 格爾空間設計：細節調整 ===== */
.btn.pri,.btn.gold{color:#1a1a1a;text-shadow:none;font-weight:600}
.btn.pri:hover,.btn.gold:hover{filter:brightness(1.04);box-shadow:0 4px 14px #ccaa7055}
.authcard .btn.pri{color:#1a1a1a;box-shadow:0 8px 24px #ccaa7040}
.authcard .btn.pri:hover{box-shadow:0 12px 30px #ccaa7066}
.btn.loading::after{border-color:#1a1a1a44;border-top-color:#1a1a1a}
.input:focus{box-shadow:0 0 0 3px #ccaa7040}
.nav a .n,.tabbar .fab{color:#1a1a1a}
.nav a.on{background:linear-gradient(90deg,#ccaa7030,#ccaa7008)}
.btn,.input,select.input,textarea.input,.ruleitem{border-radius:4px}
.btn.sm{border-radius:3px}
.side .logo img,.crest img{border-radius:0;object-fit:contain}
.side .logo img{width:34px;height:34px}
.side .logo b,.wordmark{letter-spacing:3px}
.side .logo b{font-size:17px;font-weight:600}
.login .brand h1{font-size:32px;letter-spacing:6px;font-weight:600;text-shadow:none;white-space:normal}
.login .brand .sub{letter-spacing:5px}
.login .brand .mascot{width:min(300px,38%);filter:none;opacity:.96}
.mglow{background:radial-gradient(circle,#ccaa7040,#ccaa7000 70%)}
@keyframes ring{0%{box-shadow:0 0 0 0 #ccaa7066}100%{box-shadow:0 0 0 18px #ccaa7000}}
.crest img{animation:none;width:48px;height:62px}
.authcard{border-radius:6px}
.authcard::before{border-radius:7px}
.login .box{background:transparent}
/* 登入頁：建築製圖感的細線格線，緩慢移動 */
.login::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(#ccaa7014 1px,transparent 1px),linear-gradient(90deg,#ccaa7014 1px,transparent 1px);background-size:56px 56px;
  animation:grid 40s linear infinite;-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 30% 40%,#000 30%,transparent 80%)}
@keyframes grid{to{background-position:56px 56px,56px 56px}}
@media(prefers-reduced-motion:reduce){.login::before{animation:none}}
/* 郵件列表、閱讀區：更像設計事務所的書卷感 */
.badge{border-radius:3px}
.ruleitem.off{opacity:.6}
.ruleitem span b{word-break:break-all}
.warnbox{background:#f7f0de;border:1px solid #e4d3a8;border-radius:4px;padding:8px 10px;margin-top:12px;color:#6b5528}