.card button{border-radius:8px;width:142px;padding:7px;border:none}.card button.edit{color:var(--text-primary);background:var(--bg-hover)}.card button.pause{color:#b91c1c;background:#fef2f2}.card button.enable{color:#15803d;background:#f0fdf4}.card button.delete{color:#b91c1c;background:#fef2f2}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.modal-content{background:var(--bg-card);border-radius:12px;padding:24px;max-width:400px;width:90%;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideIn .2s ease-out}.modal-title{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--text-primary)}.modal-message{margin:0 0 24px;font-size:14px;color:var(--text-secondary);line-height:1.5}.modal-message strong{color:var(--text-primary);font-weight:600}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.modal-actions button{padding:10px 20px;border-radius:8px;border:1px solid var(--border-color);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;width:auto}.modal-actions button.secondary{background:var(--bg-card);color:var(--text-primary)}.modal-actions button.secondary:hover{background:var(--bg-hover)}.modal-actions button.danger{background:#dc2626;color:#fff;border-color:#dc2626}.modal-actions button.danger:hover{background:#b91c1c}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}:root[data-theme=dark] .card button.pause,:root[data-theme=dark] .card button.delete{color:#fca5a5;background:#450a0a}:root,:root[data-theme=light]{--bg-main: #f6f7fb;--bg-card: #ffffff;--bg-hover: #f9fafb;--bg-active: #fef3ef;--text-primary: #0b1220;--text-secondary: #6b7280;--border-color: #e5e7eb;--shadow: rgba(0, 0, 0, .06);--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230b1220' d='M6 9L1 4h10z'/%3E%3C/svg%3E")}:root[data-theme=dark]{--bg-main: #0f172a;--bg-card: #1e293b;--bg-hover: #334155;--bg-active: #3d2f27;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border-color: #334155;--shadow: rgba(0, 0, 0, .3);--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f1f5f9' d='M6 9L1 4h10z'/%3E%3C/svg%3E")}body{font-family:system-ui,sans-serif;margin:0;background:var(--bg-main);color:var(--text-primary)}main{padding:32px;max-width:980px;margin:0 auto}.shell{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:32px;box-shadow:0 8px 24px var(--shadow)}.title{font-size:28px;font-weight:700;text-align:center;color:var(--text-primary)}.subtitle{text-align:center;color:var(--text-secondary);margin:8px 0 24px}#totp-config{grid-template-columns:1fr}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}label{font-size:13px;color:var(--text-primary);font-weight:600}input,select{width:auto;padding:12px;border-radius:10px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);box-sizing:border-box}input::placeholder,select::placeholder{color:var(--text-secondary);opacity:.7}input:focus,select:focus{outline:none;border-color:#fe6835;box-shadow:0 0 0 3px #fe683526}.inline{display:flex;gap:8px}button{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:10px;border:1px solid var(--border-color);background:#64748b;color:#fff;cursor:pointer;white-space:nowrap;justify-content:center;transition:all .2s ease}button.secondary{background:var(--bg-hover);color:var(--text-primary)}button.secondary:hover{background:var(--bg-active)}button.primary{background:#fe6835;color:#fff}button:disabled{opacity:.6;cursor:not-allowed}.actions{display:flex;gap:12px;align-items:center;margin-top:20px}.actions .secondary{min-width:120px}#btnSave{width:300px;text-align:center}.qrpanel{background:var(--bg-main);border:1px solid var(--border-color);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;align-self:stretch}.qrbox{width:240px;height:240px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px}.muted{opacity:.85}.divider{height:1px;background:var(--border-color);margin:16px 0;border:0}.section{display:block}.section+.section{border-top:1px solid var(--border-color);padding-top:16px;margin-top:16px}.section--config{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}@media(max-width:900px){.section--config{grid-template-columns:1fr}}:root{color-scheme:light dark}:root,:root[data-theme=light]{--bg-main: #f6f7fb;--bg-card: #ffffff;--bg-hover: #f9fafb;--bg-active: #fef3ef;--text-primary: #0b1220;--text-secondary: #6b7280;--border-color: #e5e7eb;--shadow: rgba(0, 0, 0, .06);--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230b1220' d='M6 9L1 4h10z'/%3E%3C/svg%3E")}:root[data-theme=dark]{--bg-main: #0f172a;--bg-card: #1e293b;--bg-hover: #334155;--bg-active: #3d2f27;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border-color: #334155;--shadow: rgba(0, 0, 0, .3);--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f1f5f9' d='M6 9L1 4h10z'/%3E%3C/svg%3E")}body{font-family:system-ui,sans-serif;margin:0;background:var(--bg-main);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}main{padding:24px;max-width:1024px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}.page-header .settings-btn img{vertical-align:middle}.page-title{font-size:28px;font-weight:800;color:var(--text-primary);text-align:left}.toolbar{display:flex;gap:12px;align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:12px;position:sticky;top:0;z-index:10}.toolbar button img{vertical-align:middle}.tool-input,.tool-select{padding:10px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary)}.tool-input:focus,.tool-select:focus{outline:none;border:1px solid var(--border-color)}.tool-input:focus-visible,.tool-select:focus-visible{outline:none;border:1px solid var(--border-color)}.tool-select{padding-right:30px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 8px center;background-color:var(--bg-card)}.tool-input{flex:1}.tool-actions{margin-left:auto;display:flex;gap:8px}button{padding:10px 14px;border-radius:8px;border:1px solid var(--border-color);background:#eff6ff;color:#1f2937;cursor:pointer;transition:all .2s ease}button.secondary{background:var(--bg-card);color:var(--text-primary)}button.secondary:hover{background:var(--bg-hover)}button.primary{background:#fe6835;color:#021019}button.primary:hover{opacity:.9}.card button img{vertical-align:middle}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:16px;box-shadow:0 2px 6px var(--shadow);transition:background-color .3s ease,border-color .3s ease}.row{display:flex;gap:8px;align-items:center}.issuer{font-weight:700;color:var(--text-primary)}.status{margin-left:auto;padding:4px 8px;border-radius:999px;font-size:12px}.status.active{background:#dcfce7;color:#166534}.status.inactive{background:#fee2e2;color:#991b1b}.code{font-size:32px;letter-spacing:3px;font-weight:800;color:var(--text-primary)}.progress{height:6px;background:#f3f4f6;border-radius:999px;overflow:hidden}.progress .bar{height:100%;background:#0ea5e9;width:0%;transition:width 1s linear}:root[data-theme=dark] .progress{background:#334155}.list{display:grid;gap:16px}.small{font-size:12px;color:var(--text-secondary)}.shared-progress{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:12px;margin-top:16px}.shared-progress .progress{flex:1}.progress-label{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}.progress-row{display:flex;align-items:center;gap:12px}.time-remaining{font-size:14px;font-weight:600;color:var(--text-primary);min-width:40px;text-align:right}.empty-state{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;text-align:center;grid-column:1 / -1}.empty-state .empty-title{font-size:16px;color:var(--text-secondary)}@media(max-width:768px){.grid{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:stretch}.page-header .settings-btn{width:100%}.toolbar{flex-wrap:wrap}.toolbar .tool-input,.toolbar .tool-select{flex:1 1 100%}.toolbar .tool-actions{width:100%;margin-left:0}.toolbar .tool-actions a{flex:1}}.settings-page{max-width:800px;margin:0 auto}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}.settings-header button img{vertical-align:middle}.settings-title{font-size:28px;font-weight:800;color:var(--text-primary);margin:0}.settings-content{display:flex;flex-direction:column;gap:24px}.settings-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.section-header{margin-bottom:16px}.section-title{font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 8px}.section-desc{font-size:13px;color:var(--text-secondary);margin:0}.option-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.option-card{position:relative;display:block;background:var(--bg-main);border:2px solid var(--border-color);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s ease}.option-card:hover{border-color:#fe6835;background:var(--bg-hover)}.option-card.active{border-color:#fe6835;background:var(--bg-active)}.option-card input[type=radio]{position:absolute;opacity:0;pointer-events:none}.option-content{display:flex;flex-direction:column;align-items:center;gap:8px}.option-icon{font-size:32px;line-height:1}.option-label{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center}@media(max-width:768px){.settings-header{flex-direction:column;align-items:stretch}.settings-header button{width:100%}.option-group{grid-template-columns:1fr}}:root[data-theme=dark] .settings-page .option-icon img{filter:invert(1) brightness(1.1)}
