:root{
  --phone-w: 393px; /* iPhone 15 Pro logical width */
  --phone-h: 852px; /* iPhone 15 Pro logical height */
  --radius: 48px;
  --safe-top: 54px;
  --safe-bot: 150px; /* includes tab bar area (leave room for long content) */

  /* 可爱温馨主题（提亮版） */
  --bg-0: #2a1220;   /* 深玫瑰底（比纯黑亮） */
  --bg-1: #1f101b;
  --glass: rgba(255,255,255,.14);
  --glass-2: rgba(255,255,255,.18);
  --border: rgba(255,255,255,.20);
  --border-2: rgba(255,255,255,.26);
  --text: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.78);
  --faint: rgba(255,255,255,.58);
  --primary: rgba(244,114,182,1);
  --primary-2: rgba(244,114,182,.72);
}

html, body { height: 100%; }
body {
  background: var(--bg-0);
  font-family: ui-rounded, system-ui, -apple-system, "PingFang SC", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.phone {
  width: var(--phone-w);
  height: var(--phone-h);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-0);
  box-shadow:
    0 28px 70px rgba(0,0,0,.48),
    0 12px 28px rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.16);
  position: relative;
}

.phone::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.notch {
  position:absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 28px;
  border-radius: 18px;
  background: rgba(0,0,0,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  z-index: 30;
}

.statusbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--safe-top);
  padding: 10px 16px 8px 16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  background: linear-gradient(to bottom, rgba(42,18,32,.92), rgba(42,18,32,.68), rgba(42,18,32,0));
  backdrop-filter: blur(10px);
}

.appbar {
  position: sticky;
  top: var(--safe-top);
  z-index: 15;
  padding: 10px 16px 12px 16px;
  background: rgba(42,18,32,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.content {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--safe-bot);
  background:
    radial-gradient(1100px 650px at 85% -10%, rgba(244,114,182,.32), transparent 60%),
    radial-gradient(980px 700px at 10% 0%, rgba(253,186,116,.26), transparent 60%),
    radial-gradient(900px 560px at 20% 92%, rgba(167,243,208,.18), transparent 58%),
    radial-gradient(800px 520px at 85% 72%, rgba(147,197,253,.16), transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-0) 52%, var(--bg-1) 100%);
}

.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  padding: 10px 14px 18px 14px;
  background: rgba(42,18,32,.78);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.14);
  z-index: 25;
}

.tab-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 16px;
  color: rgba(255,255,255,.74);
  text-decoration:none;
  user-select:none;
}

.tab-item[data-active="true"]{
  color: #ffffff;
  background: rgba(244,114,182,.18);
  box-shadow:
    inset 0 0 0 1px rgba(244,114,182,.30),
    0 10px 22px rgba(244,114,182,.08);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.chip {
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}
.chip:active{ transform: translateY(1px); }

/* 统一“选中态”表现：用于常用入口/提醒筛选等 */
.chip[data-selected="true"],
.chip.is-selected{
  background: rgba(244,114,182,.18);
  border-color: rgba(244,114,182,.28);
  color: rgba(255,255,255,.95);
  box-shadow: 0 12px 26px rgba(244,114,182,.10);
}

.badge {
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
}

.badge-ok { background: rgba(34,197,94,.14); color: rgb(134 239 172); border-color: rgba(34,197,94,.25); }
.badge-warn { background: rgba(251,191,36,.16); color: rgb(254 240 138); border-color: rgba(251,191,36,.25); }
.badge-bad { background: rgba(248,113,113,.14); color: rgb(254 202 202); border-color: rgba(248,113,113,.25); }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.14);
  color: #fff;
  text-decoration:none;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  border-color: rgba(244,114,182,.42);
  background: linear-gradient(180deg, rgba(244,114,182,.96), rgba(244,114,182,.72));
  box-shadow: 0 14px 30px rgba(244,114,182,.10);
}
.btn-danger{
  border-color: rgba(239,68,68,.35);
  background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(239,68,68,.72));
}

.field {
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  padding: 12px 12px;
}

.divider {
  height: 1px;
  background: rgba(255,255,255,.08);
}

.shadow-soft{
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

/* 扫码横线动画（用于 add.html 取景器） */
@keyframes scanSweep {
  0%   { transform: translateY(-22px); opacity: .55; filter: blur(.0px); }
  45%  { opacity: .95; }
  50%  { transform: translateY(22px); opacity: .75; filter: blur(.2px); }
  95%  { opacity: .95; }
  100% { transform: translateY(-22px); opacity: .55; filter: blur(.0px); }
}

.scan-line{
  animation: scanSweep 1.9s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce){
  .scan-line{ animation: none; }
}