:root{
  --primary:#6a48ff; --on-primary:#fff; --primary-soft:#8b74ff;
  --container:#ece9fe; --on-container:#2a2161;
  --surface:#ffffff; --card-line:rgba(255,255,255,.7);
  --ink:#26252e; --muted:#83879a; --line:#e7e6f2;
  --glass:rgba(255,255,255,.5);
  --wall1:#14112e; --wall2:#483b9e; --wall3:#7c6bd0;
  --sh:0 26px 60px rgba(70,60,140,.16), 0 6px 18px rgba(70,60,140,.06);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;color:var(--ink);
     font-family:'Mitr','Noto Sans Thai',system-ui,sans-serif;line-height:1.5;font-size:15px;
     background:linear-gradient(165deg,#eef1fb 0%,#f7f3ff 55%,#f8faf7 100%);
     background-attachment:fixed;overflow-x:hidden}

/* ── Ambient ─────────────────────────────── */
.bg-orb{position:fixed;border-radius:50%;filter:blur(100px);z-index:-2;pointer-events:none}
.o1{width:520px;height:520px;top:-150px;right:-110px;background:#d7d0ff;opacity:.65}
.o2{width:460px;height:460px;bottom:-150px;left:-130px;background:#d9f0dd;opacity:.6}

/* ── Status bar (iOS) ────────────────────── */
.statusbar{position:fixed;top:0;left:0;right:0;z-index:20;height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px 0 26px;color:var(--ink);font-size:14px}
.st-left,.st-right{display:flex;align-items:center;gap:7px;min-width:86px}
.st-left svg{width:13px;height:13px;color:var(--muted)}
.st-center{font-size:13px;color:var(--muted);letter-spacing:.04em;font-weight:400}
.st-right svg{height:15px;color:var(--ink)}
.st-right .ic-bat svg{height:13px}

/* ── Stage ───────────────────────────────── */
.stage{max-width:960px;margin:0 auto;padding:84px 20px 120px;display:flex;
  flex-direction:row;gap:20px;align-items:stretch}
.card{flex:1 1 0;min-width:0;border-radius:30px;
  background:var(--surface);border:1px solid var(--card-line);
  box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}

/* ── Clock card (iOS Lock Screen) ────────── */
.clock-card{padding:0}
.wall{position:relative;flex:1;background:
  radial-gradient(120% 90% at 12% 8%, rgba(124,107,208,.55), transparent 55%),
  radial-gradient(120% 110% at 90% 100%, rgba(20,17,46,.5), transparent 55%),
  linear-gradient(155deg,var(--wall1) 0%,var(--wall2) 55%,var(--wall3) 100%);
  color:#fff;padding:40px 30px 30px;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center;min-height:250px}
.glow{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none}
.g1{width:220px;height:220px;top:-90px;right:-40px;background:#8877ff}
.g2{width:180px;height:180px;bottom:-70px;left:-50px;background:#55c7a8;opacity:.4}
.wall-date{margin:0 0 6px;font-size:15px;font-weight:300;opacity:.9;letter-spacing:.02em}
.wall-time{margin:0;font-weight:200;font-size:clamp(56px,9vw,96px);line-height:1.05;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.wall-time em{font-style:normal;font-weight:200;opacity:.75;margin:0 2px}
.wall-sec{font-size:clamp(20px,3vw,30px);font-weight:300;opacity:.75;margin-left:12px}
.wall-sub{margin:8px 0 0;font-size:12px;font-weight:300;opacity:.7;letter-spacing:.2em}

.widgets{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.widget{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;
  background:#f4f3ff;border:1px solid #eee9ff}
.w-day{font-size:30px;font-weight:600;color:var(--primary);line-height:1;
  font-variant-numeric:tabular-nums}
.w-meta{font-size:12.5px;color:var(--muted)}
.w-ico{font-size:22px;color:var(--primary);line-height:1}

/* ── Calendar card (Material You) ────────── */
.cal-card{padding:26px}
.cal-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  margin-bottom:18px}
.cal-eyebrow{margin:0;font-size:12px;color:var(--primary);font-weight:500;letter-spacing:.12em}
.cal-meta h2{margin:2px 0 0;font-size:24px;font-weight:600;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.cal-nav{display:flex;gap:8px}
.mini-nav{width:42px;height:42px;border:1px solid var(--line);background:#fff;
  border-radius:14px;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;
  transition:all .18s var(--spring)}
.mini-nav:hover{color:var(--primary);border-color:var(--container);transform:translateY(-2px)}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:12px;font-weight:400;color:var(--muted);margin-bottom:10px}
.weekdays span:first-child,.weekdays span:last-child{color:#c8b7ff}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;
  font-size:14.5px;color:var(--ink);cursor:default;
  transition:transform .18s var(--spring),background .18s var(--spring),color .18s var(--spring)}
.day.today{background:var(--container);color:var(--on-container);font-weight:600}
.day.other{color:#d4d2e0}
.day.empty{pointer-events:none}
.day:not(.empty):hover{background:#f3f1ff}

/* ── Tab bar (M3) ────────────────────────── */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:20;
  display:flex;gap:4px;padding:6px;border-radius:26px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 44px rgba(70,60,140,.18), inset 0 1px 0 #fff}
.tab{border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:4px;padding:10px 22px;border-radius:20px;color:var(--muted);
  transition:background .22s var(--spring);min-width:96px}
.tab svg{width:22px;height:22px;transition:transform .22s var(--spring)}
.tab span{font-size:11.5px;font-weight:400}
.tab.active{background:var(--container);color:var(--primary);font-weight:500}
.tab.active svg{transform:translateY(-1px)}
.tab:hover:not(.active){color:var(--primary)}

.foot{text-align:center;color:#b9bcc9;font-size:11px;letter-spacing:.3em;
  padding:6px 0 16px;position:relative;z-index:1}

@media (max-width:860px){
  .stage{flex-direction:column}
  .wall{min-height:220px}
}
@media (max-width:520px){
  .statusbar{padding:0 16px}
  .st-left,.st-right{min-width:64px}
  .tab{padding:9px 14px;min-width:0}
  .cal-card{padding:20px}
  .day{font-size:13px}
  .widgets{grid-template-columns:1fr}
}