/* ============================================================
   PassVault — Apple iOS Liquid Glass Design System
   低饱和柔和活力配色 · 圆角柔和 · 留白充足 · 毛玻璃 · 卡片分层
   ============================================================ */

:root{
  /* 毛玻璃基础 */
  --glass-bg: rgba(255,255,255,.62);
  --glass-bg-strong: rgba(255,255,255,.82);
  --glass-border: rgba(255,255,255,.75);
  --glass-shadow: 0 8px 32px rgba(31,42,66,.10), 0 1px 2px rgba(31,42,66,.04);

  /* 页面底层柔和渐变(低饱和活力) */
  --bg-grad-a: #eef1ff;
  --bg-grad-b: #e6faf2;
  --bg-grad-c: #fdf1f6;

  /* 文字 */
  --ink: #232a3a;
  --ink-2: #5c6678;
  --ink-3: #98a1b1;

  /* 主色(低饱和蓝紫) & 强调 */
  --brand: #5b7cfa;
  --brand-deep: #4a63d6;
  --brand-soft: rgba(91,124,250,.14);
  --accent: #35c2a1;
  --accent-soft: rgba(53,194,161,.14);
  --warn: #f5a623;
  --warn-soft: rgba(245,166,35,.16);
  --danger: #ef5b6f;
  --danger-soft: rgba(239,91,111,.14);

  /* 分类配色 */
  --cat-work:#5b7cfa; --cat-work-soft:rgba(91,124,250,.16);
  --cat-person:#35c2a1; --cat-person-soft:rgba(53,194,161,.16);
  --cat-mail:#f5a623; --cat-mail-soft:rgba(245,166,35,.18);
  --cat-bank:#a78bfa; --cat-bank-soft:rgba(167,139,250,.16);
  --cat-social:#ef6d9f; --cat-social-soft:rgba(239,109,159,.16);

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --font: -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 85% -10%, var(--bg-grad-a), transparent 60%),
    radial-gradient(1000px 700px at -10% 30%, var(--bg-grad-b), transparent 55%),
    radial-gradient(900px 700px at 60% 110%, var(--bg-grad-c), transparent 60%),
    #f4f6fb;
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
a{color:var(--brand);text-decoration:none}
::selection{background:var(--brand-soft)}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(120,130,150,.28);border-radius:10px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 毛玻璃卡片 ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius-lg);
}

/* ---------- 顶部导航栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.6);
}
.topbar .brand{
  display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.2px;
}
.brand-logo{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;
  box-shadow:0 4px 10px rgba(91,124,250,.35);
}
.topbar .spacer{flex:1}
.icon-btn{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.8);
  color:var(--ink-2);font-size:18px;transition:.2s;
}
.icon-btn:hover,.icon-btn.active{background:#fff;color:var(--brand);transform:translateY(-1px)}
.icon-btn svg{width:20px;height:20px;stroke-width:2;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 主容器 ---------- */
.main{
  max-width:1080px;margin:0 auto;padding:20px 20px 120px;
}

/* ============ 搜索栏 ============ */
.searchbar{
  display:flex;align-items:center;gap:12px;
  margin:6px 0 20px;
}
.searchbox{
  flex:1;display:flex;align-items:center;gap:10px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:16px;padding:0 16px;height:50px;
  box-shadow:var(--glass-shadow);
}
.searchbox svg{width:19px;height:19px;color:var(--ink-3);stroke-width:2;fill:none;stroke:currentColor}
.searchbox input{
  flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--ink);height:100%;
}
.searchbox input::placeholder{color:var(--ink-3)}

/* ============ 分类chips ============ */
.chips-row{
  display:flex;gap:9px;overflow-x:auto;padding:4px 2px 16px;scrollbar-width:none;
}
.chips-row::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:500;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.8);
  color:var(--ink-2);display:flex;align-items:center;gap:6px;transition:.2s;
  box-shadow:0 2px 8px rgba(31,42,66,.05);
}
.chip .dot{width:7px;height:7px;border-radius:50%}
.chip:hover{background:#fff}
.chip.active{
  background:linear-gradient(135deg,var(--brand),#6f8cff);color:#fff;
  border-color:transparent;box-shadow:0 5px 14px rgba(91,124,250,.35);
}
.chip.active .cnt{color:rgba(255,255,255,.85)}
.chip .cnt{font-size:11.5px;color:var(--ink-3);font-weight:600}

/* ============ 条目卡片网格 ============ */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;
}
.item-card{
  position:relative;padding:18px;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.item-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(31,42,66,.14)}
.item-card .accent-bar{
  position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 4px 4px 0;opacity:.9;
}
.item-card .top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.site-avatar{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;color:#fff;
  box-shadow:0 4px 12px rgba(31,42,66,.18);
}
.card-title{flex:1;min-width:0}
.card-title .name{
  font-size:15.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-title .url{
  font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
}
.row-field{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid rgba(120,130,160,.10);font-size:14px}
.row-field .fl{color:var(--ink-3);font-size:12px;width:42px;flex-shrink:0}
.row-field .fv{
  flex:1;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);
}
.row-field .quick{display:flex;gap:3px}
.mini-btn{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:rgba(120,130,160,.10);font-size:15px;transition:.15s;
}
.mini-btn:hover{background:var(--brand-soft);color:var(--brand)}
.mini-btn svg{width:15px;height:15px;stroke-width:2;fill:none;stroke:currentColor}
.tag-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tag-pill{
  font-size:11px;padding:2px 9px;border-radius:999px;color:var(--brand-deep);
  background:var(--brand-soft);font-weight:500;
}

/* ---------- 空状态 ---------- */
.empty{
  text-align:center;padding:70px 20px;color:var(--ink-2);
}
.empty .e-ico{
  width:90px;height:90px;margin:0 auto 20px;border-radius:28px;
  background:var(--glass-bg);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;font-size:40px;
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
}
.empty h3{font-size:18px;margin-bottom:8px;color:var(--ink)}
.empty p{font-size:14px;color:var(--ink-2);max-width:340px;margin:0 auto}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 20px;height:48px;border-radius:15px;font-size:15px;font-weight:600;
  transition:.2s;border:none;white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),#6f8cff);color:#fff;
  box-shadow:0 8px 20px rgba(91,124,250,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(91,124,250,.45)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{
  background:rgba(255,255,255,.7);color:var(--ink-2);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 8px rgba(31,42,66,.06);
}
.btn-ghost:hover{background:#fff;color:var(--brand)}
.btn-danger-ghost{background:var(--danger-soft);color:var(--danger)}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;stroke-width:2;fill:none;stroke:currentColor}
.btn.sm{height:40px;padding:0 16px;font-size:14px;border-radius:13px}
.btn.lg{height:52px;font-size:16px}

/* 浮动新增按钮 (移动端) */
.fab{
  position:fixed;right:22px;bottom:28px;z-index:40;
  width:58px;height:58px;border-radius:20px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:300;
  box-shadow:0 10px 28px rgba(91,124,250,.45);
  transition:.2s;
}
.fab:hover{transform:translateY(-3px) scale(1.04)}

/* ============ 底部导航(移动端) ============ */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.75);backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.7);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around;
}
.bottom-nav .bn-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 0;color:var(--ink-3);font-size:10px;font-weight:500;min-width:64px;
}
.bottom-nav .bn-item svg{width:23px;height:23px;stroke-width:1.8;fill:none;stroke:currentColor}
.bottom-nav .bn-item.active{color:var(--brand)}

/* ============ 弹窗 / 抽屉 ============ */
.overlay{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(25,32,45,.32);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.overlay.show{display:flex;animation:fadeIn .25s ease}
.sheet{
  width:100%;max-width:600px;max-height:92vh;overflow-y:auto;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border-radius:26px 26px 0 0;
  border:1px solid var(--glass-border);
  animation:slideUp .3s cubic-bezier(.2,.9,.3,1);
}
@media(min-width:700px){
  .overlay{align-items:center;padding:20px}
  .sheet{border-radius:26px;max-height:90vh}
}
.sheet-head{
  display:flex;align-items:center;padding:20px 24px 12px;
  position:sticky;top:0;background:transparent;z-index:5;
}
.sheet-head h3{font-size:18px;font-weight:650;flex:1}
.sheet-body{padding:6px 24px 26px}
.sheet-grip{width:40px;height:5px;border-radius:99px;background:rgba(120,130,160,.25);margin:0 auto 6px}
@media(min-width:700px){.sheet-grip{display:none}}

/* 表单 */
.field{margin-bottom:16px}
.field label{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px;letter-spacing:.2px;
}
.field .lbl-row{display:flex;justify-content:space-between;align-items:center}
.input-wrap{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.72);border:1px solid rgba(120,130,160,.16);
  border-radius:14px;padding:0 14px;height:50px;transition:.2s;
}
.input-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.input-wrap input,.input-wrap textarea{
  flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--ink);width:100%;
}
.input-wrap textarea{height:auto;padding:14px 0;resize:none;line-height:1.5;min-height:70px}
.input-wrap .eye{
  color:var(--ink-3);display:flex;align-items:center;padding:4px;flex-shrink:0;
}
.input-wrap .eye:hover{color:var(--brand)}
.input-wrap .eye svg{width:20px;height:20px;stroke-width:2;fill:none;stroke:currentColor}

select.input-ctrl{
  width:100%;height:50px;border-radius:14px;border:1px solid rgba(120,130,160,.16);
  background:rgba(255,255,255,.72);padding:0 14px;font-size:15px;color:var(--ink);outline:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a1b1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.form-actions{display:flex;gap:11px;margin-top:22px}
.form-actions .btn{flex:1}

/* 密码强度条 */
.strength{display:flex;gap:5px;margin-top:9px;align-items:center}
.strength .seg{flex:1;height:5px;border-radius:99px;background:rgba(120,130,160,.15);transition:.3s}
.strength .st-label{font-size:11.5px;color:var(--ink-3);width:56px;text-align:right;font-weight:600}

/* 标签输入 */
.tag-input-area{
  background:rgba(255,255,255,.72);border:1px solid rgba(120,130,160,.16);
  border-radius:14px;padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.tag-input-area:focus-within{border-color:var(--brand)}
.tag-input-area .ti-item{
  display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;
  color:var(--brand-deep);background:var(--brand-soft);padding:4px 8px;border-radius:9px;
}
.tag-input-area .ti-item .x{cursor:pointer;opacity:.6;font-size:14px;line-height:1}
.tag-input-area input{
  flex:1;min-width:90px;border:none;outline:none;background:transparent;font-size:13.5px;padding:5px;color:var(--ink);
}

/* 颜色选择(分类) */
.color-picker{display:flex;gap:9px;flex-wrap:wrap}
.color-opt{
  width:34px;height:34px;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;
  border:2px solid transparent;
}
.color-opt.on{border-color:#fff;box-shadow:0 0 0 2.5px var(--brand), 0 4px 10px rgba(31,42,66,.2)}
.color-opt .glyph{font-size:16px}

/* 危险区 */
.danger-zone{
  margin-top:18px;padding:16px;border-radius:16px;background:var(--danger-soft);
  border:1px solid rgba(239,91,111,.2);
}
.danger-zone h4{color:var(--danger);font-size:14px;margin-bottom:6px}

/* ============ 授权页 (登录/注册) ============ */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{
  width:100%;max-width:420px;padding:36px 32px;position:relative;overflow:hidden;
}
.auth-logo{
  width:64px;height:64px;border-radius:20px;margin:0 auto 22px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:30px;box-shadow:0 12px 30px rgba(91,124,250,.4);
}
.auth-card h1{font-size:23px;text-align:center;font-weight:700;margin-bottom:6px;letter-spacing:-.3px}
.auth-sub{text-align:center;color:var(--ink-2);font-size:14px;margin-bottom:28px}
.auth-switch{text-align:center;margin-top:20px;font-size:13.5px;color:var(--ink-2)}
.auth-switch a{font-weight:600}

/* ============ 分段切换(设置页) ============ */
.seg{
  display:flex;background:rgba(120,130,160,.12);border-radius:13px;padding:4px;gap:3px;
}
.seg button{
  flex:1;padding:9px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;gap:7px;transition:.2s;
}
.seg button.on{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(31,42,66,.12)}
.seg button svg{width:16px;height:16px;stroke-width:2;fill:none;stroke:currentColor}

/* ============ 列表行(设置/管理页) ============ */
.list-row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;transition:.15s;
}
.list-row:hover{transform:translateX(2px)}
.list-row .row-ico{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.list-row .row-main{flex:1;min-width:0}
.list-row .row-title{font-size:14.5px;font-weight:600}
.list-row .row-sub{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ============ Toast ============ */
#toastWrap{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:999;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.toast{
  padding:11px 20px;border-radius:14px;font-size:13.5px;font-weight:500;color:#fff;
  box-shadow:0 10px 30px rgba(31,42,66,.2);display:flex;align-items:center;gap:8px;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1);pointer-events:auto;max-width:90vw;
}
.toast.success{background:linear-gradient(135deg,#35c2a1,#2fb095)}
.toast.error{background:linear-gradient(135deg,#ef5b6f,#e0445a)}
.toast.info{background:linear-gradient(135deg,#5b7cfa,#4a63d6)}
.toast.out{animation:toastOut .3s forwards}

/* ============ 顶部概览 ============ */
.stat-row{display:flex;gap:13px;margin-bottom:20px;flex-wrap:wrap}
.stat-card{flex:1;min-width:150px;padding:17px 19px}
.stat-card .v{font-size:26px;font-weight:750;letter-spacing:-.5px}
.stat-card .l{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.stat-card svg{float:right;width:30px;height:30px;stroke-width:1.8;fill:none;stroke:currentColor;opacity:.85}

/* ============ 通用工具 ============ */
.flex{display:flex;align-items:center;gap:8px}
.grow{flex:1}
.gray{color:var(--ink-3)}
.text-center{text-align:center}
.mt10{margin-top:10px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.section-title{font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.4px;margin:24px 0 12px;text-transform:uppercase}

/* ============ 动画 ============ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}
@keyframes popIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

/* 骨架屏 */
.skeleton{
  border-radius:18px;height:130px;margin-bottom:16px;
  background:linear-gradient(100deg,rgba(255,255,255,.4) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.4) 70%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}

/* ============ 响应式 ============ */
@media(max-width:760px){
  .main{padding:14px 14px 110px}
  .grid{grid-template-columns:1fr;gap:12px}
  .bottom-nav{display:flex}
  .fab{display:none}
  .topbar{padding:12px 14px}
  .desktop-only{display:none!important}
  .auth-card{padding:30px 22px}
}
@media(min-width:761px){
  .mobile-only{display:none!important}
  .fab-bottom{display:none}
}

/* 隐藏桌面新增按钮逻辑: 用类控制 */
.new-entry-btn-desktop{display:none}
@media(min-width:761px){.new-entry-btn-desktop{display:inline-flex}}

/* 点击反馈 */
.ripple{position:relative;overflow:hidden}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}