*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f4f5f7;
  color: #1f2430;
  min-height: 100vh;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* Login */
#login-page { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; gap:24px; }
.login-box { background:#fff; border:1px solid #e3e6ea; border-radius:12px; padding:40px 48px; text-align:center; max-width:380px; width:100%; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.login-box h1 { font-size:20px; font-weight:600; margin-bottom:6px; color:#111827; }
.login-box p { color:#6b7280; font-size:13px; margin-bottom:28px; }
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 20px; background:#fff; color:#1a1a1a; border:1px solid #dadce0; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s; }
.btn-google:hover { background:#f7f8fa; }
.btn-google:disabled { opacity:.5; cursor:not-allowed; }
.btn-google svg { flex-shrink:0; }
#login-error { color:#dc2626; font-size:13px; margin-top:14px; min-height:18px; }

/* App */
#app-page { display:none; }

header { background:#fff; border-bottom:1px solid #e3e6ea; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; z-index:10; }
header h2 { font-size:15px; font-weight:600; color:#111827; white-space:nowrap; }
.user-info { font-size:12px; color:#6b7280; display:flex; align-items:center; gap:10px; }
.btn-logout { background:transparent; border:1px solid #d1d5db; color:#4b5563; padding:4px 10px; border-radius:5px; font-size:12px; cursor:pointer; transition:.15s; }
.btn-logout:hover { border-color:#9ca3af; color:#111827; }

.controls { padding:14px 20px; background:#fafbfc; border-bottom:1px solid #eceef1; display:flex; flex-direction:column; gap:12px; }
.source-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.source-btn { background:#fff; border:1px solid #d1d5db; color:#4b5563; padding:6px 14px; border-radius:6px; font-size:13px; cursor:pointer; transition:.15s; }
.source-btn:hover { border-color:#9ca3af; color:#111827; }
.source-btn.active { background:#e8f0fe; border-color:#3b82f6; color:#1d4ed8; font-weight:500; }
.source-status { font-size:12px; margin-left:4px; }
.source-status.ok { color:#16a34a; }
.source-status.warn { color:#b45309; }
.source-status.err { color:#dc2626; }
.source-status.load { color:#2563eb; }

.search-bar { display:flex; align-items:center; gap:8px; }
.search-bar input { flex:1; background:#fff; border:1px solid #d1d5db; color:#1f2430; padding:9px 12px; border-radius:7px; font-size:13px; outline:none; max-width:420px; }
.search-bar input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.search-bar input::placeholder { color:#9ca3af; }

/* list */
#secrets-container { padding:16px 20px 48px; max-width:880px; }
.loading-msg, .empty-msg { color:#9ca3af; padding:40px 0; text-align:center; font-size:13px; }

.group-section { margin-bottom:18px; background:#fff; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
.group-header { display:flex; align-items:center; gap:8px; padding:11px 14px; color:#374151; font-size:13px; font-weight:600; background:#f6f7f9; border-bottom:1px solid #eceef1; cursor:pointer; user-select:none; }
.group-header:hover { background:#eef0f3; }
.group-toggle { font-size:10px; color:#9ca3af; transition:transform .15s; }
.group-section.collapsed .group-toggle { transform:rotate(-90deg); }
.group-section.collapsed .group-body { display:none; }

.secret-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #f0f1f3; transition:background .1s; }
.secret-row:last-child { border-bottom:none; }
.secret-row:hover { background:#f9fafb; }
.secret-name { flex:0 0 38%; font-size:13px; color:#4b5563; font-family:'SF Mono','Fira Mono',Consolas,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.secret-value { flex:1; font-size:13px; font-family:'SF Mono','Fira Mono',Consolas,monospace; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.secret-value.hidden { color:#cbd0d6; letter-spacing:2px; }
.secret-actions { display:flex; gap:4px; flex-shrink:0; }
.icon-btn { background:transparent; border:1px solid transparent; color:#9ca3af; padding:5px 8px; border-radius:5px; font-size:14px; cursor:pointer; transition:.15s; line-height:1; }
.icon-btn:hover { border-color:#d1d5db; color:#374151; background:#fff; }
.icon-btn.active { color:#16a34a; border-color:#86efac; }
.copy-feedback { font-size:11px; color:#16a34a; white-space:nowrap; }

@media (max-width:600px) {
  .secret-row { flex-wrap:wrap; }
  .secret-name { flex-basis:100%; }
}