:root{
  --bg: #0b0d10;
  --card: #11151a;
  --fg: #e6edf3;
  --muted: #9aa7b2;
  --primary: #2f81f7;
  --danger: #ff6464;
  --ok: #30a46c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: var(--bg); color: var(--fg);
}
.topbar{display:flex; align-items:flex-start; flex-direction:column; gap:12px; padding:16px 20px; border-bottom:1px solid #1a1f25; position:sticky; top:0; background:linear-gradient(to bottom,var(--bg), rgba(11,13,16,0.92)); backdrop-filter:saturate(1.2) blur(10px); z-index:100; box-shadow:0 2px 12px rgba(0,0,0,0.3)}
.topbar h1{margin:0; font-size:20px; font-weight:600; background:linear-gradient(135deg, var(--fg), var(--primary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.actions{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; width:100%}
button{background:var(--primary); color:white; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:500; transition:all 0.2s ease; box-shadow:0 2px 8px rgba(47,129,247,0.3)}
button:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(47,129,247,0.4); background:#3d8fff}
button:active{transform:translateY(0); box-shadow:0 1px 4px rgba(47,129,247,0.3)}
button.secondary{background:#27313b; color:var(--fg); box-shadow:0 2px 6px rgba(0,0,0,0.2)}
button.secondary:hover{background:#2f3a46; box-shadow:0 3px 10px rgba(0,0,0,0.25)}
button:disabled{opacity:.5; cursor:not-allowed; transform:none!important; box-shadow:none!important}
main{max-width:900px; margin:0 auto; padding:16px}
.notice{padding:12px 16px; background:#0e1217; border:1px solid #1a1f25; border-radius:10px; color:var(--muted)}
.notice > p{margin:0 0 12px 0}
.status-indicators{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin:12px 0; padding:12px; background:rgba(47,129,247,0.05); border-radius:8px; border:1px solid rgba(47,129,247,0.1)}
.status-item{display:flex; align-items:center; gap:6px}
.status-label{font-size:13px; color:var(--muted); font-weight:500}
.status-value{font-size:13px; color:var(--fg); font-weight:600; padding:2px 8px; background:#1a1f25; border-radius:4px}
.status-value.active{color:#30a46c; background:#0f1a13; border:1px solid #264230}
.status-value.warning{color:#ffb366; background:#1a150b; border:1px solid #5a4a1f}
.help-section{margin-top:12px}
.help-section summary{font-size:13px; font-weight:500; color:var(--primary); cursor:pointer; user-select:none}
.help-section summary:hover{text-decoration:underline}
.help-content{padding:12px 0 0; font-size:13px; line-height:1.6}
.help-content h4{margin:12px 0 6px; font-size:14px; color:var(--fg)}
.help-content ul{margin:0 0 12px; padding-left:24px}
.help-content li{margin-bottom:4px}
.help-content a{color:var(--primary); text-decoration:none}
.help-content a:hover{text-decoration:underline}
.card{padding:16px; background:var(--card); border:1px solid #1a1f25; border-radius:12px; margin-top:16px}
.hidden{display:none}
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:8px}
label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
input, select, textarea{width:100%; background:#0b0f14; color:var(--fg); border:1px solid #1a2028; border-radius:8px; padding:10px 12px; font-size:14px; transition:all 0.2s ease}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,129,247,0.15); background:#0d1217}
input:hover, select:hover, textarea:hover{border-color:#252f3a}
input[type="checkbox"]{width:20px; height:20px; cursor:pointer; accent-color:var(--primary)}
textarea{min-height:90px}
.or{margin:10px 0; text-align:center; color:var(--muted)}
.buttons{display:flex; gap:8px; margin-top:10px}
.scanner{display:flex; gap:10px; align-items:flex-start}
video{width:320px; height:240px; background:#0b0f14; border:1px solid #1a1f25; border-radius:8px}
.list{display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:16px; margin-top:16px}
.item{display:flex; flex-direction:column; gap:12px; transition:all 0.25s ease; border:2px solid transparent}
.item:hover{transform:translateY(-2px); border-color:#1a2f42; box-shadow:0 8px 24px rgba(47,129,247,0.15)}
.meta{display:flex; justify-content:space-between; gap:8px}
.meta .issuer{font-weight:600; font-size:14px; color:var(--fg)}
.meta .account{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.code-wrap{display:flex; align-items:center; gap:12px; padding:16px; background:linear-gradient(135deg, rgba(47,129,247,0.08), rgba(30,166,108,0.08)); border-radius:10px; margin:4px 0}
.code{font-size:32px; font-weight:700; letter-spacing:4px; font-family:'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace; background:linear-gradient(135deg, #4da3ff, #3dd68c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.period{flex:1; display:flex; flex-direction:column; gap:4px; align-items:flex-end}
.period .bar{position:relative; width:100%; height:6px; background:#1a1f25; border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,0.4)}
.period .bar::after{content:""; position:absolute; left:0; top:0; bottom:0; width:50%; background:linear-gradient(90deg, var(--ok), var(--primary)); transition:width 0.3s linear; border-radius:999px}
.period .left{color:var(--muted); font-size:13px; font-weight:600; min-width:28px; text-align:right; font-variant-numeric:tabular-nums}
.item-actions{display:flex; gap:8px; flex-wrap:wrap}
.hint{color:var(--muted); font-size:12px; margin-bottom:8px}

/* HOTP items hide period bar */
.item.hotp .period{display:none}

/* Badges and status */
.badge{display:inline-block; font-size:10px; padding:2px 6px; border-radius:999px; background:#27313b; color:#c8d1d9; margin-right:6px}
.sync-status{font-size:12px; color:var(--muted); background:#0e1217; border:1px solid #1a1f25; padding:4px 8px; border-radius:999px}
.sync-status.ok{color:#c2f5d4; border-color:#264230; background:#0f1a13}
.sync-status.warn{color:#ffe5a7; border-color:#5a4a1f; background:#1a150b}
.sync-status.err{color:#ffc0c0; border-color:#5a2323; background:#1a0f0f}

.row{display:flex; align-items:center; gap:8px}

/* Expiring code */
.item.totp.expiring .code{color:#ffb3b3}

/* Toast */
.toast{position:fixed; right:16px; bottom:16px; background:#0e1217; color:var(--fg); border:1px solid #1a1f25; padding:12px 16px; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.5); opacity:0; transform:translateY(20px) scale(0.96); pointer-events:none; transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1); max-width:70vw; z-index:1000}
.toast.show{opacity:1; transform:translateY(0) scale(1)}
.toast.ok{border-color:#264230; background:#0f1a13}
.toast.warn{border-color:#5a4a1f; background:#1a150b}
.toast.err{border-color:#5a2323; background:#1a0f0f}

/* Modal */
.modal{position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; z-index:900; animation:modalFadeIn 0.25s ease; overflow:auto; padding:4vh 0}
.modal.hidden{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(4px); animation:backdropFadeIn 0.25s ease}
.modal-panel{position:relative; width:min(520px, 92vw); max-height:85vh; overflow:auto; animation:panelSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}

@keyframes modalFadeIn{from{opacity:0}}
@keyframes backdropFadeIn{from{opacity:0}}
@keyframes panelSlideIn{from{opacity:0; transform:translateY(20px) scale(0.96)}}

/* Mobile adaptations */
@media (max-width: 640px) {
  .topbar{padding:calc(14px + env(safe-area-inset-top, 0px)) 14px 14px; gap:10px}
  .topbar h1{font-size:18px}
  main{padding:14px}
  .actions{grid-template-columns:repeat(2, 1fr); gap:6px}
  button{padding:11px 14px; min-height:48px; font-size:14px}
  input, select, textarea{font-size:16px; padding:11px}
  .scanner{flex-direction:column}
  video{width:100%; height:auto}
  .list{grid-template-columns: 1fr; gap:12px}
  .item{gap:10px}
  .code-wrap{padding:14px; gap:10px}
  .code{font-size:28px; letter-spacing:3px}
  .item-actions{gap:6px}
  .sync-status{display:none}
  .modal-panel{width:94vw}
  .toast{right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); max-width:88vw; padding:10px 14px}
  .grid{grid-template-columns:1fr; gap:10px}
}

/* Sync form */
#sync-form h2{margin-top:0}
.permission-notice{margin:16px 0; padding:14px; background:rgba(255,179,102,0.08); border:1px solid rgba(255,179,102,0.2); border-radius:8px}
.permission-notice h4{margin:0 0 10px; font-size:14px; color:#ffb366}
.permission-item{margin-bottom:10px}
.permission-item:last-child{margin-bottom:0}
.permission-item strong{color:var(--fg); font-size:13px}
.permission-item ul{margin:6px 0 0; padding-left:20px; font-size:12px; color:var(--muted)}
.permission-item li{margin-bottom:3px}

/* Add Form Enhancements */
.form-section{margin-bottom:20px}
.primary-section{padding:16px; background:rgba(47,129,247,0.05); border:1px solid rgba(47,129,247,0.15); border-radius:10px}
.form-label-highlight{font-size:14px!important; color:var(--fg)!important}
.label-text{display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:4px}
.badge-required{font-size:10px; padding:2px 6px; background:var(--danger); color:white; border-radius:4px; font-weight:500}
.input-large{font-size:15px!important; padding:12px!important; border:2px solid #1a2f42!important; font-family:'SF Mono', Monaco, 'Cascadia Code', monospace; letter-spacing:0.5px}
.input-large:focus{border-color:var(--primary)!important}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))!important}

/* Advanced Options & otpauth Section */
details{margin:8px 0; border:1px solid #1a1f25; border-radius:10px; overflow:hidden}
details summary{padding:14px 16px; background:#0e1217; cursor:pointer; font-weight:500; user-select:none; list-style:none; display:flex; align-items:center; transition:all 0.2s ease}
details summary::-webkit-details-marker{display:none}
details summary:before{content:'▶'; margin-right:8px; font-size:10px; transition:transform 0.2s ease}
details[open] summary:before{transform:rotate(90deg)}
details summary:hover{background:#111721; color:var(--primary)}
details[open] summary{border-bottom:1px solid #1a1f25; margin-bottom:0}
details .grid, details textarea{margin:16px}
.otpauth-section textarea{width:calc(100% - 32px); min-height:70px}
.advanced-options{margin-top:20px; margin-bottom:16px}
.otpauth-section{margin-top:16px; margin-bottom:20px}

/* Scan Form Enhancements */
.scan-modes{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0}
.scan-mode-btn{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; background:#0e1217; border:2px solid #1a1f25; border-radius:10px; cursor:pointer; transition:all 0.2s ease; font-size:14px; font-weight:500; text-align:center}
.scan-mode-btn .icon{font-size:32px}
.scan-mode-btn:hover{border-color:#2f3a46; background:#111721; transform:translateY(-2px)}
.scan-mode-btn.active{border-color:var(--primary); background:rgba(47,129,247,0.08)}
.scan-hint{margin-top:8px}
label.scan-mode-btn{margin:0; padding:16px; color:var(--fg); justify-content:center}

/* Token Input with Toggle */
.token-input-wrapper{display:flex; align-items:center; gap:8px; position:relative}
.token-input-wrapper input{flex:1; padding-right:80px}
.token-toggle{position:absolute; right:48px; background:transparent; border:0; padding:6px 8px; cursor:pointer; font-size:16px; opacity:0.6; transition:opacity 0.2s; box-shadow:none!important; min-height:auto; transform:none!important}
.token-toggle:hover{opacity:1; background:transparent!important}
.token-status{position:absolute; right:8px; font-size:11px; padding:2px 8px; border-radius:4px; background:#0f1a13; color:#30a46c; border:1px solid #264230; white-space:nowrap; pointer-events:none}
.token-status:empty{display:none}

/* Shares Management */
.sub-card{background:#0e1217; border:1px solid #1a1f25; padding:16px; margin:16px 0}
.sub-card h3{margin:0 0 12px 0; font-size:16px; color:var(--fg)}
.shares-list{display:flex; flex-direction:column; gap:12px; margin-top:12px; min-height:60px}
.shares-list:empty::before{content:'暂无记录'; color:var(--muted); font-size:14px; display:flex; align-items:center; justify-content:center; min-height:60px}
.share-item{display:flex; align-items:center; gap:12px; padding:12px; background:#0b0f14; border:1px solid #1a1f25; border-radius:8px}
.share-item .share-info{flex:1; display:flex; flex-direction:column; gap:4px}
.share-item .share-name{font-weight:600; font-size:14px}
.share-item .share-sid{font-size:12px; color:var(--muted); font-family:monospace}
.share-item .share-actions{display:flex; gap:6px}

/* Sync Projects Management */
.sync-project-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.sync-project-header h3{margin:0}
.btn-small{padding:6px 12px; font-size:13px; min-height:auto}
.sync-projects-list{display:flex; flex-direction:column; gap:10px; min-height:60px}
.sync-projects-list:empty::before{content:'暂无项目，点击"新建项目"开始'; color:var(--muted); font-size:14px; display:flex; align-items:center; justify-content:center; min-height:60px}
.sync-project-item{display:flex; align-items:center; gap:12px; padding:12px 14px; background:#0b0f14; border:2px solid #1a1f25; border-radius:8px; cursor:pointer; transition:all 0.2s ease}
.sync-project-item:hover{border-color:#2f3a46; background:#0f1318}
.sync-project-item.active{border-color:var(--primary); background:rgba(47,129,247,0.08)}
.sync-project-item.virtual-project{background:linear-gradient(135deg, rgba(47,129,247,0.05), rgba(30,166,108,0.05)); border-color:#1a2f3f}
.sync-project-item.virtual-project:hover{border-color:#2f4a5f; background:linear-gradient(135deg, rgba(47,129,247,0.08), rgba(30,166,108,0.08))}
.sync-project-item.virtual-project.active{border-color:#3d8fff; background:rgba(47,129,247,0.12)}
.sync-project-item .project-info{flex:1; display:flex; flex-direction:column; gap:4px}
.sync-project-item .project-name{font-weight:600; font-size:14px}
.sync-project-item .project-id{font-size:12px; color:var(--muted); font-family:monospace}
.sync-project-item .project-badge{font-size:10px; padding:2px 6px; border-radius:4px; background:#0f1a13; color:#30a46c; border:1px solid #264230}
.sync-project-item .project-actions{display:flex; gap:6px}
.sync-project-item .btn-icon{background:transparent; padding:4px 8px; border:0; font-size:16px; cursor:pointer; opacity:0.6; transition:opacity 0.2s; box-shadow:none!important; min-height:auto; transform:none!important}
.sync-project-item .btn-icon:hover{opacity:1; background:transparent!important}
#sync-config-panel{margin-top:20px}
#sync-config-panel h3{margin:0 0 12px 0; font-size:16px}

/* Cloud Browse (Admin) */
.cloud-projects-list{display:flex; flex-direction:column; gap:10px; max-height:400px; overflow-y:auto; padding:10px; background:#0b0f14; border:1px solid #1a1f25; border-radius:8px}
.cloud-project-item{display:flex; flex-direction:column; gap:8px; padding:12px; background:#11151a; border:1px solid #1a1f25; border-radius:8px}
.cloud-project-item .cloud-project-header{display:flex; justify-content:space-between; align-items:center}
.cloud-project-item .cloud-project-id{font-weight:600; font-size:14px; color:var(--fg); font-family:monospace}
.cloud-project-item .cloud-project-meta{font-size:12px; color:var(--muted)}
.cloud-project-item .cloud-project-actions{display:flex; gap:6px}
.cloud-project-item .cloud-project-actions button{padding:6px 12px; font-size:12px}