body{font-family:Pretendard,-apple-system,sans-serif;display:flex;flex-direction:column;align-items:center;padding:15px;background-color:#f8f9fa;gap:1.5rem;color:#333}
h1{margin-top:10px;margin-bottom:5px;font-size:1.5rem;color:#222}
.info-text{color:#888;font-size:.8rem;margin-top:0;margin-bottom:5px}
.site-info-text{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:400px}
.btn-clear,.btn-gen{grid-column:span 1}
#syncEmail{grid-column:span 2}
#btnSync,#syncPassword{grid-column:span 1}
form.system{display:none!important}
form.system.active{display:contents!important}
.controls button{height:52px;border-radius:12px;font-size:15px;font-weight:600;border:none;cursor:pointer;transition:transform .1s,filter .1s;display:flex;align-items:center;justify-content:center}
.controls input{height:52px;border-radius:12px;font-size:15px;padding:10px;border:1px solid #ccc;width:100%;box-sizing:border-box}
.btn-gen-5{background-color:#3b82f6;color:#fff}
.btn-gen-1{background-color:#e2e8f0;color:#475569}
.btn-sync{background-color:#f1f5f9;color:#334155}
.btn-clear{background-color:#fff1f2;color:#e11d48}
button:active{transform:scale(.95);filter:brightness(.9)}
button:disabled{background-color:#95a5a6!important;cursor:not-allowed}
.table-container{width:100%;max-width:600px;border-radius:12px;overflow-x:auto;box-shadow:0 4px 12px rgba(0,0,0,.08)}
table{border-collapse:collapse;width:100%;background:#fff;font-size:.85rem}
th{background-color:#f8f9fa;color:#64748b;font-weight:600;padding:12px 4px;border-bottom:2px solid #e2e8f0;border-right:1px solid #e2e8f0;text-align:center;vertical-align:middle}
th:last-child{border-right:none}
td{padding:10px 4px;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;text-align:center;vertical-align:middle}
td:last-child{border-right:none}
td:first-child,th:first-child{width:3.5rem;text-align:center}
td:nth-child(2),th:nth-child(2){width:9rem;word-break:keep-all;text-align:center;line-height:1.3}
td:nth-child(4),th:nth-child(4){width:35px;text-align:center}
input[type=checkbox]{width:18px;height:18px;accent-color:#2196F3;cursor:pointer}
th{background-color:#f1f3f5;font-weight:600}
.number-ball{display:inline-block;width:28px;height:28px;line-height:28px;border-radius:50%;color:#fff;font-size:13px;font-weight:700;text-align:center;margin:2px;box-shadow:inset -2px -2px 4px rgba(0,0,0,.2);opacity:0;transform:scale(.5);transition:all .3s cubic-bezier(.175, .885, .32, 1.275)}
.number-ball.visible{opacity:1;transform:scale(1)}
.ball-yellow{background-color:#e08f00}
.ball-blue{background-color:#0063cc}
.ball-red{background-color:#d8314f}
.ball-gray{background-color:#6e7382}
.ball-green{background-color:#2c9e44}
@media (max-width:540px){
td:nth-child(2),th:nth-child(2){width:5rem}
}
@media (max-width:480px){
table{table-layout:auto}
td:first-child,th:first-child{width:2.5rem}
td:nth-child(3),th:nth-child(3){width:auto}
td{padding:8px 4px}
.number-ball{width:24px;height:24px;line-height:24px;font-size:11px}
button{font-size:13px;padding:10px 5px}
}
@media (max-width:410px){
td:first-child,th:first-child{display:none;width:0}
}
@media (max-width:320px){
body{padding:10px}
td,th{font-size:11px;padding:6px 2px}
.number-ball{width:22px;height:22px;line-height:22px;font-size:10px;margin:1px;margin:1px}
button{font-size:12px;padding:8px 4px}
}
#toast{position:fixed;top:50px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.85);color:#fff;padding:12px 24px;border-radius:25px;font-size:.9rem;z-index:9999;visibility:hidden;opacity:0;transition:opacity .3s,bottom .3s}
#toast.show{visibility:visible;opacity:1;top:50px}