:root{
  --navy:#0f2d52; --blue:#1b4d8f; --bright:#2f7de0; --sky:#53b1ff;
  --bg:#f4f7fb; --card:#fff; --line:#e3ebf4; --txt:#1f2933; --muted:#7a8794;
  --green:#1c7a3f; --greenbg:#d9f0e1; --red:#b3261e; --redbg:#fde7e6; --amber:#9a6b00;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--txt);}
.hidden{display:none!important}
button{cursor:pointer;font-family:inherit}
code{background:#eef3f9;padding:1px 6px;border-radius:5px;font-size:.88em;color:var(--blue)}

/* 登入 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f2d52,#1b4d8f 55%,#2f7de0)}
.login-card{background:#fff;border-radius:18px;padding:42px 38px;width:360px;box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center}
.logo{width:64px;height:64px;margin:0 auto 14px;border-radius:16px;background:linear-gradient(135deg,var(--bright),var(--navy));
  color:#fff;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center}
.login-card h1{font-size:22px;color:var(--navy)}
.login-card .sub{color:var(--muted);font-size:13px;margin:6px 0 22px}
.login-card input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;margin-bottom:14px}
.login-card input:focus{outline:none;border-color:var(--bright)}
.login-card button{width:100%;padding:12px;border:none;border-radius:10px;background:var(--bright);color:#fff;font-size:16px;font-weight:700;letter-spacing:4px}
.login-card button:hover{background:var(--blue)}
.err{color:var(--red);font-size:13px;margin-top:10px;min-height:18px}

/* 頂欄 */
.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;padding:14px 24px}
.brand{font-weight:700;font-size:17px;display:flex;align-items:center;gap:10px}
.logo-sm{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--sky),var(--bright));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.right{display:flex;align-items:center;gap:10px}
.badge{font-size:12px;padding:5px 11px;border-radius:20px;background:#214a7d;color:#cfe1ff;font-weight:600}
.badge-domain{background:#2f7de0}
.ghost{background:transparent;border:1px solid #4a6ea3;color:#cfe1ff;padding:6px 14px;border-radius:8px;font-size:13px}
.ghost:hover{background:#214a7d}
.ghost.sm{padding:4px 11px;font-size:12px;border-color:var(--line);color:var(--blue)}

/* 分頁 */
.tabs{display:flex;gap:4px;background:#fff;padding:0 24px;border-bottom:1px solid var(--line)}
.tab{background:transparent;border:none;padding:14px 18px;font-size:14px;color:var(--muted);border-bottom:3px solid transparent;font-weight:600}
.tab.active{color:var(--bright);border-bottom-color:var(--bright)}

main{max-width:980px;margin:24px auto;padding:0 24px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:20px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.panel h2{font-size:19px;color:var(--navy);margin-bottom:14px}
.panel-head h2{margin:0}
.muted{color:var(--muted);font-size:13.5px}

/* 表格 */
.grid{width:100%;border-collapse:collapse;font-size:14px}
.grid th{text-align:left;background:#f3f7fc;color:var(--blue);padding:10px 12px;font-weight:600;border-bottom:1px solid var(--line)}
.grid td{padding:10px 12px;border-bottom:1px solid #eef3f8;vertical-align:middle}
.grid tr:hover td{background:#f9fcff}
.pill{font-size:12px;padding:3px 10px;border-radius:14px;font-weight:700}
.pill.on{background:var(--greenbg);color:var(--green)}
.pill.off{background:var(--redbg);color:var(--red)}
.rowbtn{border:1px solid var(--line);background:#fff;color:var(--blue);padding:4px 9px;border-radius:7px;font-size:12px;margin-right:5px}
.rowbtn:hover{background:#eef5ff}
.rowbtn.danger{color:var(--red);border-color:#f3c9c6}
.rowbtn.danger:hover{background:var(--redbg)}
.rowbtn.mail{color:#fff;background:var(--bright);border-color:var(--bright);font-weight:700}
.rowbtn.mail:hover{background:var(--blue);border-color:var(--blue)}

/* 表單 */
.form{max-width:460px}
.form label{display:block;font-size:13.5px;color:#3e4c59;margin-bottom:14px;font-weight:600}
.form input[type=text],.form input:not([type]){width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;margin-top:5px}
.form input:focus{outline:none;border-color:var(--bright)}
.inline{display:flex;align-items:stretch;margin-top:5px}
.inline input{border-top-right-radius:0;border-bottom-right-radius:0;flex:1}
.suffix{display:flex;align-items:center;padding:0 12px;background:#eef3f9;border:1.5px solid var(--line);border-left:none;border-radius:0 9px 9px 0;color:var(--muted);font-size:14px}
.two{display:flex;gap:12px}.two label{flex:1}
.check{display:flex;align-items:center;gap:8px;font-weight:500!important}
.check input{width:auto;margin:0}
.form button,#batchBtn{margin-top:6px;padding:11px 26px;border:none;border-radius:9px;background:var(--bright);color:#fff;font-weight:700;font-size:15px}
.form button:hover,#batchBtn:hover{background:var(--blue)}
textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px;font-size:13px;font-family:ui-monospace,Menlo,monospace;margin:10px 0;resize:vertical}
textarea:focus{outline:none;border-color:var(--bright)}

/* 結果卡 */
.result-ok{background:var(--greenbg);border:1px solid #b6e3c6;border-radius:10px;padding:14px 16px;margin-top:16px;font-size:14px}
.result-ok b{color:var(--green)}
.result-ok .cred{background:#fff;border-radius:8px;padding:10px 12px;margin-top:8px;font-family:ui-monospace,monospace;font-size:13px}
.result-err{background:var(--redbg);border:1px solid #f1c3c0;border-radius:10px;padding:12px 16px;margin-top:16px;color:var(--red);font-size:14px}
.batch-item{display:flex;justify-content:space-between;padding:7px 12px;border-bottom:1px solid #eef3f8;font-size:13px}
.batch-item .ok{color:var(--green);font-weight:700}
.batch-item .no{color:var(--red);font-weight:700}
.mono{font-family:ui-monospace,monospace}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:30px;font-size:14px;box-shadow:0 8px 28px rgba(0,0,0,.3);z-index:99;
  max-width:90vw;text-align:center}

/* ============ RWD 手機／平板 ============ */
@media (max-width:640px){
  .login-card{width:92vw;max-width:360px;padding:34px 24px}
  .topbar{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .brand{font-size:15px}
  .right{gap:6px}
  .badge{font-size:11px;padding:4px 9px}
  .tabs{padding:0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{padding:12px 13px;font-size:13px;white-space:nowrap}
  main{margin:16px auto;padding:0 12px}
  .panel{padding:16px 14px;border-radius:12px}
  .panel h2{font-size:17px}
  .form{max-width:none}
  .two{flex-direction:column;gap:0}

  /* 表格改為卡片式堆疊 */
  .grid thead{display:none}
  .grid,.grid tbody,.grid tr,.grid td{display:block;width:100%}
  .grid tr{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:6px 4px;background:#fff}
  .grid tr:hover td{background:transparent}
  .grid td{border:none;padding:7px 12px;position:relative;padding-left:40%;min-height:20px}
  .grid td:before{content:attr(data-label);position:absolute;left:12px;top:7px;width:34%;
    color:var(--muted);font-size:12px;font-weight:600}
  .grid td:last-child{padding-left:12px;padding-top:4px}
  .grid td:last-child:before{display:none}
  .rowbtn{margin:4px 5px 2px 0;padding:6px 11px}
}