:root{font-family:"Microsoft JhengHei",sans-serif;color:#f5f5f5;background:#080a0f}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,#2a1015,transparent 30%),#080a0f}button,input,select,textarea{font:inherit}button{background:#e12832;color:white;border:0;border-radius:9px;padding:11px 15px;font-weight:700;cursor:pointer}.secondary{background:#252a34}label{display:grid;gap:7px;margin:12px 0}input,select,textarea{width:100%;background:#090c12;color:white;border:1px solid #2b313d;border-radius:8px;padding:11px}textarea{min-height:100px}.card{background:#11141b;border:1px solid #2b313d;border-radius:16px;padding:22px}.login{width:min(430px,calc(100% - 30px))}.logo{font-size:48px}#login{min-height:100vh;display:grid;place-items:center}#app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}aside{position:fixed;inset:0 auto 0 0;width:240px;padding:20px;background:#090c12;border-right:1px solid #2b313d;display:grid;align-content:start;gap:8px}aside button{text-align:left;background:transparent;color:#aab2c0}aside button:hover{background:#ffffff0d;color:white}main{grid-column:2;padding:26px;max-width:1500px;width:100%;margin:auto}header{display:flex;justify-content:space-between;align-items:center}.page{display:none}.page.active{display:block}.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}.stats article{background:#11141b;border:1px solid #2b313d;border-radius:14px;padding:18px}.stats b,.stats span{display:block}.stats b{font-size:28px}.stats span{color:#9ba4b4}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}#preview{background:#313338;border-radius:10px;padding:18px}#previewEmbed{background:#2b2d31;border-left:4px solid #e12832;padding:14px;border-radius:4px}#previewImage{display:block;max-width:100%;margin-top:10px}#previewThumb{float:right;width:80px;height:80px;object-fit:cover}.row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px;border-bottom:1px solid #2b313d}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:10px;border-bottom:1px solid #2b313d;text-align:left}#toast{position:fixed;right:20px;bottom:20px;background:#202530;padding:12px 16px;border-radius:9px;opacity:0;transition:.2s}#toast.show{opacity:1}@media(max-width:900px){#app{display:block}aside{position:static;width:100%}main{padding:16px}.grid,.stats{grid-template-columns:1fr}}

:root{font-size:18px} body{font-size:18px} input,select,textarea,button{font-size:18px} .sidebar nav button{font-size:18px} header h1{font-size:38px} .panel h2{font-size:30px}


/* V4.1 響應式版面 */
html,body{min-width:0;overflow-x:hidden}
#app[hidden],#login[hidden]{display:none!important}
.header-left,.sidebar-head{display:flex;align-items:center;gap:12px}.sidebar-head{justify-content:space-between}
.icon-btn{display:none;width:46px;height:46px;padding:0;place-items:center;background:#171b23;border:1px solid #2b313d;border-radius:10px;color:#fff;font-size:23px;line-height:1}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);z-index:40}
.table-wrap,#recentLogs,#logsList,#auditList{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{min-width:680px}
.card,.stats article,.row,main,.grid>*{min-width:0}
img{max-width:100%}

@media (max-width:1200px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  main{padding:22px}
}

@media (max-width:900px){
  #app{display:block;min-height:100vh}
  aside{position:fixed;top:0;bottom:0;left:0;width:min(330px,86vw);height:100dvh;z-index:50;transform:translateX(-105%);transition:transform .24s ease;overflow-y:auto;box-shadow:20px 0 50px rgba(0,0,0,.45)}
  aside.open{transform:translateX(0)}
  .icon-btn{display:grid}
  #closeSidebar{display:grid}
  main{grid-column:auto;width:100%;padding:18px}
  header{position:sticky;top:0;z-index:20;margin:-18px -18px 18px;padding:14px 18px;background:rgba(8,10,15,.92);backdrop-filter:blur(14px);border-bottom:1px solid #2b313d}
  header h1{font-size:clamp(24px,6vw,34px);margin:0}
  #currentUser{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aab2c0}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats article{padding:15px}
  .stats b{font-size:clamp(25px,7vw,34px)}
  .card{padding:17px;border-radius:13px}
  .row{grid-template-columns:1fr;gap:12px}
  .row>div:last-child{display:flex;flex-wrap:wrap;gap:7px}
  .row button{margin:0!important}
  #editor .grid>.card:last-child{order:-1}
  #preview{padding:13px}
}

@media (max-width:560px){
  :root,body{font-size:16px}
  #login{padding:14px}
  .login{width:100%;padding:22px 18px}
  .login h1{font-size:clamp(27px,9vw,38px);line-height:1.15}
  .logo{font-size:42px}
  main{padding:12px}
  header{margin:-12px -12px 14px;padding:11px 12px}
  .menu-btn{width:42px;height:42px}
  #currentUser{font-size:13px;max-width:34vw}
  .stats{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
  .stats article{padding:12px;border-radius:11px}
  .stats span{font-size:13px}
  .grid{gap:11px}
  .card{padding:14px;margin-bottom:11px}
  .card h2{font-size:22px}
  label{margin:10px 0}
  input,select,textarea{font-size:16px;padding:12px}
  button{font-size:16px;padding:11px 13px;min-height:44px}
  #channelSelect{min-height:165px}
  textarea{min-height:115px;resize:vertical}
  #previewThumb{width:64px;height:64px}
  .table{min-width:610px;font-size:14px}
  .table td,.table th{padding:9px}
  #toast{left:12px;right:12px;bottom:12px;text-align:center}
}

@media (max-width:380px){
  .stats{grid-template-columns:1fr}
  #currentUser{display:none}
}