/* R120 老人用药提醒 */
:root {
  --font-base: 16px; --font-lg: 20px; --font-xl: 24px; --font-xxl: 32px; --font-xxxl: 48px;
  --gap-base: 16px; --gap-lg: 24px; --touch-min: 48px; --touch-lg: 56px; --touch-xl: 64px; --touch-xxl: 72px;
  --color-primary: #2563EB; --color-primary-light: #DBEAFE; --color-bg: #F0F9FF; --color-surface: #FFFFFF;
  --color-text: #1E293B; --color-text-secondary: #64748B; --color-accent: #F59E0B;
  --color-success: #16A34A; --color-danger: #DC2626; --color-warning: #D97706;
  --radius-card: 16px; --radius-btn: 12px; --shadow-card: 0 2px 8px rgba(0,0,0,.08);
  --card-columns: 2;
  --contact-footer-h: 50px;
  --bottom-nav-h: 52px;
}
body.theme-large {
  --font-base: 24px; --font-lg: 28px; --font-xl: 32px; --font-xxl: 40px; --font-xxxl: 56px;
  --gap-base: 24px; --touch-min: 56px; --touch-lg: 64px; --card-columns: 1;
}
body.theme-senior {
  --font-base: 32px; --font-lg: 40px; --font-xl: 48px; --font-xxl: 56px; --font-xxxl: 64px;
  --gap-base: 32px; --touch-min: 64px; --touch-lg: 72px; --card-columns: 1;
  --color-bg: #000; --color-surface: #1A1A1A; --color-text: #FFF; --color-text-secondary: #CCC; --color-primary: #60A5FA;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:var(--font-base);background:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-tap-highlight-color:transparent;padding-bottom:calc(var(--contact-footer-h) + var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom))}
body.share-page,body.invite-page{padding-bottom:calc(var(--contact-footer-h) + 16px + env(safe-area-inset-bottom))}
button,input{font:inherit;border:none;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

#skeleton .sk-dash{height:200px;margin:12px;background:#dbeafe;border-radius:16px;animation:shimmer 1.2s infinite}
#skeleton .sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
#skeleton .sk-card{height:160px;background:#dbeafe;border-radius:16px;animation:shimmer 1.2s infinite}
@keyframes shimmer{0%,100%{opacity:.6}50%{opacity:1}}

.dashboard{padding:var(--gap-lg);text-align:center;background:var(--color-surface);border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:var(--shadow-card);margin-bottom:var(--gap-base)}
.date-display{font-size:var(--font-lg);color:var(--color-text-secondary)}
.timeline-ring{width:160px;height:160px;margin:var(--gap-base) auto;display:block}
.ring-bg{fill:none;stroke:var(--color-primary-light);stroke-width:12}
.ring-progress{fill:none;stroke:var(--color-success);stroke-width:12;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .5s}
.completion-rate{font-size:var(--font-xxxl);font-weight:700;color:var(--color-primary);min-height:1.2em}
.rate-overdue{color:var(--color-danger);animation:pulse-warning 2s infinite}
.all-done{color:var(--color-success)}
.period-status{display:flex;justify-content:center;gap:var(--gap-lg);margin-top:var(--gap-base);flex-wrap:wrap}
.period-item{text-align:center;min-width:72px}
.period-icon{font-size:var(--font-xl);display:block}
.period-label{font-size:var(--font-base);color:var(--color-text-secondary)}
.period-state{font-size:.85em;display:block;margin-top:4px}
.status-done{color:var(--color-success)}.status-overdue{color:var(--color-danger);font-weight:700}

.pill-list{display:grid;grid-template-columns:repeat(var(--card-columns),1fr);gap:var(--gap-base);padding:var(--gap-base)}
.pill-card{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--gap-lg);box-shadow:var(--shadow-card);animation:card-in .4s ease both;position:relative}
@keyframes card-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.pill-card.confirmed{background:linear-gradient(135deg,#F0FDF4,#DCFCE7)}
.pill-card.overdue{background:linear-gradient(135deg,#FEF2F2,#FEE2E2);animation:pulse-warning 2s infinite}
.pill-emoji{font-size:var(--font-xxl)}
.pill-name{font-size:var(--font-xl);font-weight:700;margin:8px 0 4px}
.pill-dosage{font-size:var(--font-lg);color:var(--color-text-secondary)}
.pill-next-time{font-size:var(--font-base);color:var(--color-primary);margin-top:8px}
.pill-actions{margin-top:12px}
.btn-confirm-large{width:var(--touch-xxl);height:var(--touch-xxl);border-radius:50%;background:var(--color-primary);color:#fff;font-size:var(--font-xl);box-shadow:var(--shadow-card)}
.pill-done-tag{font-size:var(--font-xxl);color:var(--color-success)}
.pill-progress{height:6px;background:var(--color-primary-light);border-radius:3px;margin-top:10px;overflow:hidden}
.pill-progress-fill{height:100%;background:var(--color-primary);border-radius:3px}

.empty-state{text-align:center;padding:var(--gap-lg);color:var(--color-text-secondary);font-size:var(--font-lg)}
.empty-illustration{font-size:64px;margin-bottom:var(--gap-base)}

.reminder-modal,.form-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.reminder-content,.form-steps{position:relative;background:var(--color-surface);border-radius:var(--radius-card) var(--radius-card) 0 0;padding:var(--gap-lg);width:100%;max-width:500px;animation:slide-up .3s ease}
.reminder-pill-icon{font-size:var(--font-xxxl);animation:vibrate 3s ease-in-out}
.reminder-text{font-size:var(--font-xl);margin:var(--gap-base) 0;font-weight:600}
.reminder-actions{display:flex;flex-direction:column;gap:12px}
.btn-primary-large,.btn-primary{min-height:var(--touch-lg);padding:12px 20px;border-radius:var(--radius-btn);background:var(--color-primary);color:#fff;font-weight:700;font-size:var(--font-lg)}
.btn-secondary,.btn-outline{min-height:var(--touch-min);padding:12px 20px;border-radius:var(--radius-btn);border:2px solid var(--color-primary);color:var(--color-primary);background:var(--color-surface);font-size:var(--font-lg)}
.btn-danger{background:var(--color-danger);color:#fff;padding:10px 16px;border-radius:var(--radius-btn)}

.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--gap-base)}
.form-header h3{font-size:var(--font-xl)}
.form-steps label{display:block;margin-bottom:var(--gap-base);font-weight:600}
.form-steps input{width:100%;min-height:var(--touch-lg);font-size:var(--font-lg);padding:12px;border:2px solid var(--color-primary-light);border-radius:var(--radius-btn);margin-top:6px}
.time-presets{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.time-preset{padding:12px 16px;border-radius:var(--radius-btn);background:var(--color-primary-light);font-size:var(--font-lg);min-height:var(--touch-min)}
.time-preset.active{background:var(--color-primary);color:#fff}
.form-nav{display:flex;gap:8px;margin-top:var(--gap-base);flex-wrap:wrap}
.form-hint,.form-selected{color:var(--color-text-secondary);margin-bottom:8px}

.confirm-overlay{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);pointer-events:none}
.pill-drop-anim{font-size:80px;animation:pill-drop .9s ease}
.celebrate-particles{position:absolute;inset:0;overflow:hidden}
.particle{position:absolute;top:-10px;width:10px;height:10px;border-radius:50%;animation:particle-fall 2s ease forwards}
@keyframes pill-drop{0%{transform:translateY(-100vh);opacity:0}60%{transform:translateY(0);opacity:1}100%{transform:translateY(0)}}
@keyframes particle-fall{to{transform:translateY(100vh) rotate(360deg);opacity:0}}
@keyframes slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes vibrate{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes pulse-warning{0%,100%{opacity:1}50%{opacity:.65}}

.inventory-bar{position:fixed;left:12px;right:12px;bottom:calc(var(--contact-footer-h) + var(--bottom-nav-h) + 10px + env(safe-area-inset-bottom));background:var(--color-danger);color:#fff;padding:var(--gap-base);border-radius:var(--radius-card);display:flex;justify-content:space-between;align-items:center;font-size:var(--font-lg);font-weight:700;z-index:90}
.btn-refill{background:#fff;color:var(--color-danger);padding:8px 14px;border-radius:var(--radius-btn);font-weight:700}

.share-panel{position:fixed;inset:auto 0 calc(var(--contact-footer-h) + var(--bottom-nav-h)) 0;background:var(--color-surface);padding:var(--gap-lg);border-radius:var(--radius-card) var(--radius-card) 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.15);z-index:95}
.share-url{word-break:break-all;font-size:.85em;margin:12px 0;color:var(--color-text-secondary)}

.bottom-nav{position:fixed;bottom:calc(var(--contact-footer-h) + env(safe-area-inset-bottom));left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--color-surface);border-top:1px solid rgba(0,0,0,.08);z-index:80;padding:4px 0;min-height:var(--bottom-nav-h);box-shadow:0 -2px 8px rgba(0,0,0,.04)}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;font-size:.9em;color:var(--color-text-secondary);gap:2px}
.bottom-nav button.active{color:var(--color-primary);font-weight:700}

.btn-font-scale{position:fixed;top:12px;right:12px;width:var(--touch-min);height:var(--touch-min);border-radius:50%;background:var(--color-accent);font-weight:700;font-size:var(--font-lg);z-index:200;box-shadow:var(--shadow-card)}

.profile-panel{padding:var(--gap-lg)}
.profile-panel h3{font-size:var(--font-xl);margin-bottom:var(--gap-base)}
.profile-panel .btn-primary,.profile-panel .btn-outline,.profile-link{display:block;width:100%;text-align:center;margin-top:10px;padding:14px}

.undo-bar{position:fixed;top:70px;left:12px;right:12px;background:var(--color-surface);padding:12px 16px;border-radius:var(--radius-card);box-shadow:var(--shadow-card);display:flex;justify-content:space-between;align-items:center;z-index:150;opacity:0;pointer-events:none;transition:opacity .2s}
.undo-bar.show{opacity:1;pointer-events:auto}
.voice-marquee{position:fixed;top:120px;left:0;white-space:nowrap;font-size:var(--font-xxxl);font-weight:700;color:var(--color-primary);animation:marquee 5s linear;z-index:300}
@keyframes marquee{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

.family-view{padding:var(--gap-lg)}
.family-header h2{font-size:var(--font-xl)}
.family-periods{display:grid;gap:10px;margin:var(--gap-base) 0}
.family-period{display:flex;justify-content:space-between;padding:12px;background:var(--color-surface);border-radius:var(--radius-btn)}
.family-inv{padding:8px 12px;border-radius:8px;margin:4px 0;font-size:var(--font-lg)}
.inv-red{background:#FEE2E2;color:var(--color-danger)}
.inv-yellow{background:#FEF3C7;color:var(--color-warning)}
.inv-green{background:#DCFCE7;color:var(--color-success)}
.family-call{display:block;text-align:center;margin:16px 0}

.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(30,41,59,.92);color:#fff;padding:12px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:400;font-size:var(--font-lg)}
.toast.show{opacity:1}.toast.ok{background:rgba(22,163,74,.92)}.toast.warn{background:rgba(220,38,38,.92)}

.share-page,.invite-page{background:var(--color-bg)}
.share-main,.invite-main{max-width:480px;margin:0 auto;padding:24px 16px}
.share-hero,.invite-card{background:var(--color-surface);border-radius:20px;padding:28px 20px;text-align:center;box-shadow:var(--shadow-card)}
.share-icon{font-size:64px;margin-bottom:12px}
.share-features{list-style:none;text-align:left;margin:16px auto;max-width:240px;font-size:var(--font-lg)}
.share-features li{margin:8px 0}
.share-qr-block{margin-top:20px;text-align:center}
.invite-from{color:var(--color-primary);margin-bottom:8px}

.contact-footer{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e2e8f0;padding:5px 10px calc(5px + env(safe-area-inset-bottom));z-index:100;min-height:var(--contact-footer-h)}
.contact-footer__btns{display:flex;gap:6px;justify-content:center;max-width:320px;margin:0 auto}
.contact-footer__cta,.contact-footer__btn{flex:1;max-width:96px;text-align:center;padding:6px 6px;border-radius:8px;font-size:12px;line-height:1.2;white-space:nowrap}
.contact-footer__cta{background:var(--color-primary);color:#fff;font-weight:600}
.contact-footer__btn{border:1px solid #cbd5e1;background:#fff}
.contact-footer__brand{text-align:center;font-size:10px;color:#94a3b8;margin-top:3px;line-height:1.25;padding:0 4px}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}