:root{
  --ana-blue:#00256c; --ana-sky:#0086d1; --bg:#f4f6fa; --card:#ffffff;
  --text:#1a2233; --muted:#6b7487; --border:#dde3ee;
  --ok:#1e8e5a; --warn:#c77700; --danger:#c0392b; --chip:#eef3fb;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif; background:var(--bg); color:var(--text); line-height:1.55; padding-bottom:60px;}
header{background:linear-gradient(120deg,var(--ana-blue),#003f9e 60%,var(--ana-sky)); color:#fff; padding:24px 24px 20px;}
header h1{font-size:1.3rem; letter-spacing:.02em;}
header .sub{opacity:.85; font-size:.8rem; margin-top:6px;}
main{max-width:1280px; margin:0 auto; padding:20px 16px;}
h2{font-size:1.02rem; color:var(--ana-blue); margin:24px 0 10px; padding-left:10px; border-left:4px solid var(--ana-sky);}

.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-top:16px;}
.toolbar label{font-size:.8rem; color:var(--muted);}
.toolbar input[type=text]{padding:6px 9px; border:1px solid var(--border); border-radius:6px; font-size:.85rem;}
.btn{background:var(--ana-blue); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:.85rem; cursor:pointer;}
.btn:hover{background:var(--ana-sky);}
.btn.secondary{background:var(--muted);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
#signout-btn{display:none;}
#g-signin{display:inline-block;}

.status-line{font-size:.82rem; color:var(--muted); margin-top:8px;}
.status-line.err{color:var(--danger);}

.progress-wrap{background:#eef1f7; border-radius:8px; height:8px; overflow:hidden; margin-top:8px; display:none;}
.progress-bar{height:100%; background:var(--ana-sky); width:0%; transition:width .2s;}

.tablewrap{overflow-x:auto; background:var(--card); border:1px solid var(--border); border-radius:10px; margin-top:12px;}
table{border-collapse:collapse; width:100%; font-size:.8rem; min-width:1100px;}
th{background:var(--chip); color:var(--ana-blue); text-align:left; padding:8px 9px; white-space:nowrap; border-bottom:2px solid var(--border); position:sticky; top:0; cursor:pointer; user-select:none;}
th:hover{background:#e2ebf9;}
td{padding:7px 9px; border-bottom:1px solid var(--border); vertical-align:top; white-space:nowrap;}
tr:hover td{background:#f7faff;}
.mono{font-family:Consolas,"Courier New",monospace; font-size:.8rem;}
.pw{font-family:Consolas,monospace; background:#f1f4f9; border:1px dashed #c6d0e0; padding:1px 5px; border-radius:4px; cursor:pointer;}
.pw:hover{background:#e3ecfa;}
.chip{display:inline-block; font-size:.7rem; padding:1px 7px; border-radius:10px; white-space:nowrap;}
.st-ok{background:#e6f4ec; color:var(--ok);}
.st-warn{background:#fff3e0; color:var(--warn);}
.st-err{background:#fdecea; color:var(--danger);}
.note{font-size:.76rem; color:var(--muted); margin-top:8px;}
.empty-state{padding:30px; text-align:center; color:var(--muted); font-size:.9rem;}
footer{max-width:1280px; margin:30px auto 0; padding:0 16px; font-size:.72rem; color:var(--muted);}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ana-blue); color:#fff; padding:8px 18px; border-radius:20px; font-size:.8rem; opacity:0; transition:opacity .3s; pointer-events:none;}
.toast.show{opacity:1;}
@media (max-width:640px){ header h1{font-size:1.1rem;} }