/* 家庭驿站 —— 暖光纸感设计系统。自包含(系统字体, 无网络字体/CDN), 手机优先。 */
:root{
  --font-display:"Yuanti SC","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  --font:"PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Microsoft YaHei",sans-serif;

  --paper:oklch(0.966 0.015 78);
  --surface:oklch(0.992 0.008 82);
  --surface-2:oklch(0.975 0.013 76);
  --ink:oklch(0.33 0.022 50);
  --ink-2:oklch(0.50 0.022 54);
  --ink-3:oklch(0.64 0.018 58);
  --clay:oklch(0.61 0.125 40);
  --clay-2:oklch(0.52 0.12 37);
  --amber:oklch(0.80 0.10 72);
  --teal:oklch(0.58 0.065 215);
  --teal-2:oklch(0.49 0.06 218);
  --line:oklch(0.89 0.018 76);
  --line-2:oklch(0.935 0.012 78);

  --sh-sm:0 2px 10px oklch(0.42 0.05 48 / .09);
  --sh:0 12px 32px oklch(0.42 0.05 46 / .13);
  --sh-lg:0 22px 56px oklch(0.42 0.06 44 / .18);
  --r:22px; --r-2:15px; --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); line-height:1.6;
  background:var(--paper); min-height:100svh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:oklch(0.61 0.125 40 / .22)}

/* ---- 氛围层：暖灯光晕 + 细颗粒 ---- */
.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none}
.atmosphere .lamp{position:absolute;inset:0;
  background:
    radial-gradient(64% 42% at 50% -4%, oklch(0.92 0.075 70 / .9), transparent 70%),
    radial-gradient(40% 30% at 88% 8%, oklch(0.86 0.09 55 / .5), transparent 70%),
    radial-gradient(70% 50% at 10% 108%, oklch(0.9 0.05 80 / .55), transparent 60%);
  animation:lampOn 1.4s ease both}
.atmosphere .grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}

/* ---- 入场动画 ---- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lampOn{from{opacity:0}to{opacity:1}}
@keyframes winGlow{from{opacity:.2}to{opacity:1}}
.rise{animation:rise .7s var(--ease) both;animation-delay:var(--d,0s)}
.logo-mark .lm-halo{animation:winGlow 1.6s ease both}
.logo-mark .lm-window{transform-origin:center;animation:winGlow 1.2s ease .3s both}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- Logo 尺寸 ---- */
.logo-mark{display:block}
.logo-lg{width:92px;height:92px;filter:drop-shadow(0 8px 16px oklch(0.5 0.1 45 / .22))}
.logo-sm{width:34px;height:34px}

a{color:var(--clay-2);text-decoration:none}

/* ===== 登录 / 改密：居中暖卡 ===== */
.auth{min-height:100svh;display:grid;place-items:center;padding:28px 20px;
  padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom))}
.auth-card{width:100%;max-width:392px;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--sh-lg);border:1px solid var(--line-2);padding:38px 28px 30px;position:relative}
.auth-brand{text-align:center;margin-bottom:24px}
.auth-brand .logo-mark{margin:0 auto}
.auth-brand h1{font-family:var(--font-display);font-size:1.95rem;font-weight:600;letter-spacing:.06em;
  margin:14px 0 5px;color:var(--ink)}
.auth-brand p{margin:0;color:var(--ink-3);font-size:.92rem;letter-spacing:.02em}

label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin:18px 0 7px;letter-spacing:.02em}
input[type=text],input[type=tel],input[type=password]{
  width:100%;font-size:16px;font-family:var(--font);padding:14px 16px;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-2);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s}
input::placeholder{color:var(--ink-3);opacity:.7}
input:focus{outline:none;border-color:var(--clay);background:var(--surface);
  box-shadow:0 0 0 4px oklch(0.61 0.125 40 / .13)}

.btn{display:block;width:100%;border:0;cursor:pointer;font-family:var(--font-display);
  font-size:1.08rem;font-weight:600;letter-spacing:.14em;color:oklch(0.99 0.01 80);
  padding:15px;border-radius:var(--r-2);margin-top:26px;
  background:linear-gradient(165deg,var(--clay),var(--clay-2));
  box-shadow:0 10px 22px oklch(0.52 0.12 37 / .32),inset 0 1px 0 oklch(1 0 0 / .25);
  transition:transform .15s var(--ease),box-shadow .2s,filter .2s}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(1px) scale(.992);box-shadow:0 5px 14px oklch(0.52 0.12 37 / .3)}
.btn-ghost{display:block;text-align:center;width:100%;margin-top:11px;padding:13px;
  border-radius:var(--r-2);border:1.5px solid var(--line);color:var(--ink-2);
  font-weight:600;font-size:.96rem;background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}

/* 改密实时校验 */
.pwchk{display:flex;flex-wrap:wrap;gap:7px;margin:10px 2px 0}
.pwchk span{font-size:.76rem;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);
  padding:3px 11px 3px 23px;border-radius:var(--pill);position:relative;transition:color .2s,background .2s,border-color .2s}
.pwchk span::before{content:"○";position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:.66rem;color:var(--ink-3)}
.pwchk span.ok{color:oklch(0.43 0.08 150);background:oklch(0.94 0.045 145);border-color:oklch(0.85 0.06 148)}
.pwchk span.ok::before{content:"✓";color:oklch(0.5 0.09 150)}
.pwmatch{font-size:.8rem;margin:9px 2px 0;min-height:1.15em;font-weight:600}
.pwmatch.ok{color:oklch(0.45 0.08 150)}
.pwmatch.bad{color:oklch(0.52 0.14 30)}

.hint{margin:17px 2px 0;font-size:.8rem;color:var(--ink-3);text-align:center;line-height:1.75}
.hint b{color:var(--clay-2);font-weight:600}
.note{border-radius:var(--r-2);padding:11px 15px;font-size:.88rem;margin:2px 0 4px;line-height:1.6}
.note.err{background:oklch(0.93 0.05 32);color:oklch(0.46 0.13 30);border:1px solid oklch(0.86 0.07 33)}
.note.ok{background:oklch(0.94 0.045 145);color:oklch(0.43 0.08 150);border:1px solid oklch(0.87 0.06 148)}

/* ===== 首页 ===== */
.wrap{max-width:540px;margin:0 auto;
  padding:24px 20px calc(56px + env(safe-area-inset-bottom));padding-top:max(24px,env(safe-area-inset-top))}
.home-top{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.home-top .logo-mark{flex:none}
.home-top .who{flex:1;min-width:0}
.home-top .who h1{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:0;
  color:var(--ink);letter-spacing:.02em;line-height:1.2}
.home-top .who p{margin:3px 0 0;color:var(--ink-3);font-size:.86rem}
.logout{flex:none;align-self:flex-start;color:var(--ink-2);font-size:.82rem;font-weight:600;
  padding:7px 14px;border-radius:var(--pill);border:1.5px solid var(--line);background:var(--surface)}

.eyebrow{font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--ink-3);
  letter-spacing:.22em;margin:32px 2px 14px;display:flex;align-items:center;gap:10px}
.eyebrow::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}

/* 房间入口：有性格的大入口（非等大卡片网格） */
.rooms{display:flex;flex-direction:column;gap:15px}
.room{--accent:var(--clay-2);--accent-soft:oklch(0.84 0.09 50 / .5);
  position:relative;display:flex;align-items:center;gap:17px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  padding:19px 20px;box-shadow:var(--sh-sm);text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease)}
.room::after{content:"";position:absolute;right:-30%;top:-60%;width:62%;height:220%;
  background:radial-gradient(circle,var(--accent-soft),transparent 68%);opacity:.85;pointer-events:none}
.room:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.room:active{transform:translateY(0) scale(.993)}
.room .ic{flex:none;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  font-size:31px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px oklch(1 0 0 / .4)}
.room .tx{flex:1;min-width:0;position:relative;z-index:1}
.room .tx h3{font-family:var(--font-display);font-size:1.28rem;font-weight:600;margin:0;color:var(--ink)}
.room .tx p{margin:4px 0 0;color:var(--ink-2);font-size:.87rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room .go{flex:none;color:var(--accent);font-size:1.35rem;position:relative;z-index:1;
  transition:transform .25s var(--ease)}
.room:hover .go{transform:translateX(3px)}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);
  padding:30px;text-align:center;color:var(--ink-3);box-shadow:var(--sh-sm)}

/* 工具栏：轻量小工具（视觉从属，列表非卡片） */
.shelf{margin-top:8px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-2);overflow:hidden;box-shadow:var(--sh-sm)}
.shelf-item{display:flex;align-items:center;gap:13px;padding:14px 18px;color:var(--ink);
  border-top:1px solid var(--line-2)}
.shelf-item:first-child{border-top:0}
.shelf-item .si-ic{flex:none;width:30px;text-align:center;font-size:19px;opacity:.92}
.shelf-item .si-tx{flex:1}
.shelf-item .si-tx b{font-weight:600;font-size:.98rem}
.shelf-item .si-tx span{display:block;color:var(--ink-3);font-size:.78rem;margin-top:1px}
.shelf-item .si-go{color:var(--ink-3);font-size:1.1rem}

.foot{text-align:center;color:var(--ink-3);font-size:.76rem;margin-top:34px;line-height:1.85;
  letter-spacing:.02em}
.foot .hr{width:30px;height:1px;background:var(--line);margin:0 auto 13px}

/* ===== 管理后台 ===== */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:.9rem;
  font-weight:600;margin-bottom:16px}
.page-h{font-family:var(--font-display);font-size:1.6rem;font-weight:600;margin:0;color:var(--ink)}
.page-h + .sub{color:var(--ink-3);font-size:.88rem;margin:4px 0 0}
.panel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:20px;margin-top:18px}
.panel h2{font-family:var(--font-display);font-size:1.08rem;font-weight:600;margin:0 0 16px;
  display:flex;align-items:center;gap:9px;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:430px){.grid2{grid-template-columns:1fr}}

.checks{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0}
.checks label{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:500;
  color:var(--ink);font-size:.93rem;cursor:pointer}
.checks input{width:19px;height:19px;accent-color:var(--clay);flex:none}

.minibtn{font-family:var(--font);font-size:.88rem;font-weight:600;padding:9px 16px;
  border-radius:11px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;transition:filter .15s,transform .12s}
.minibtn:active{transform:scale(.97)}
.minibtn.primary{background:linear-gradient(165deg,var(--clay),var(--clay-2));color:#fff;border-color:transparent;
  box-shadow:0 6px 14px oklch(0.52 0.12 37 / .26)}
.minibtn.danger{color:oklch(0.5 0.14 30);border-color:oklch(0.85 0.07 33)}
.row-btns{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.row-btns form{margin:0}

/* 成员列表：分隔的行（非嵌套卡片） */
.member{padding:16px 0;border-top:1px solid var(--line-2)}
.member:first-of-type{border-top:0;padding-top:4px}
.m-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.m-name{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.m-phone{color:var(--ink-3);font-size:.85rem;font-variant-numeric:tabular-nums}
.tag{font-size:.7rem;padding:2px 9px;border-radius:var(--pill);font-weight:600;letter-spacing:.02em}
.tag.admin{background:oklch(0.92 0.06 70);color:oklch(0.5 0.1 62)}
.tag.off{background:oklch(0.92 0.008 70);color:var(--ink-3)}
.tag.pend{background:oklch(0.93 0.05 32);color:oklch(0.5 0.12 30)}
.m-note{color:var(--ink-3);font-size:.85rem;margin:0 0 11px}

/* ===== 桌面/平板：网页版布局（非手机拉伸）===== */
@media (min-width:820px){
  .wrap{max-width:900px;padding:42px 28px 64px}
  .home-top{margin-bottom:12px}
  .home-top .logo-mark.logo-sm{width:42px;height:42px}
  .home-top .who h1{font-size:1.72rem}
  /* 房间双列网格 */
  .rooms{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .room{padding:22px 22px}
  /* 工具栏（仅管理员、单项）限宽，避免桌面拉太宽 */
  .shelf{max-width:520px}
  /* 登录/改密卡在大屏稍微大一点更舒展 */
}
@media (min-width:820px){
  .auth-card{max-width:420px}
}