/* Native app ergonomics: retain desktop layout on larger screens, optimize phone widths. */
.mobile-bottom-nav, .mobile-settings-title { display: none; }

.mobile-guard-card { display: none; }

.mobile-hero, .mobile-stat-grid, .mobile-scroll-card, .mobile-launch-card, .mobile-next-card { display: none; }

@media (max-width: 700px) {
  :root { font-size: 16px; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); background: #f8faf6; }
  header { position: sticky; top: 0; z-index: 30; min-height: 64px; padding: 10px 16px; background: #f8faf6; gap: 10px; }
  .header-end { gap: 5px; margin-left: auto; }
  .header-end .quiet, .header-end .area-back { padding: 8px; font-size: 0; border: 0; }
  .header-end .quiet::before, .header-end .area-back::before { font-size: 20px; }
  .header-end .quiet[href*="school"]::before { content: "⌂"; }
  .header-end .quiet[href*="focus"]::before { content: "◉"; }
  .header-end .area-back::before { content: "←"; }
  .header-end .theme-picker { display: none; }
  .brand-logo { width: 38px !important; height: 38px !important; }
  .brand { font-size: 22px; white-space: nowrap; gap: 6px; }
  main { padding: 0 16px; }
  .intro { padding: 20px 0 12px; }
  .intro .eyebrow { margin-bottom: 8px; }
  h1 { font-size: 34px; letter-spacing: -1.7px; }
  .intro-copy { margin-top: 10px; line-height: 1.45; }
  .intro-copy br { display: none; }
  .demo-banner { margin: 8px 0 0; border-radius: 12px; }
  .toolbar { position: sticky; top: 64px; z-index: 25; padding: 12px 0 10px; margin: 0; background: #f8faf6; }
  .tabs { flex: 1; justify-content: space-between; gap: 12px; }
  .tabs button { padding: 10px 2px; white-space: nowrap; }
  .primary { min-height: 44px; border-radius: 12px; }
  .workspace { border: 0; border-radius: 0; background: transparent; }
  .plan-content { order: 1; padding: 14px 0 0; }
  .settings { order: 2; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #f0f4ed; }
  .settings.mobile-collapsed > :not(.mobile-settings-title) { display: none; }
  .mobile-settings-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mobile-settings-title button { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: white; color: var(--forest); font-weight: 650; }
  .plan-heading { align-items: flex-start; }
  .plan-heading h2 { font-size: 23px; }
  .plan-heading .quiet { display: none; }
  .stats { gap: 8px; margin: 18px 0; }
  .stat { padding-right: 6px; }
  .stat strong { font-size: 21px; }
  .stat span { font-size: 10px; line-height: 1.25; }
  .week { overflow-x: auto; grid-template-columns: repeat(7, 58px); padding: 0 0 8px; margin: 0 -2px; }
  .day { min-height: 94px; }
  .day-heading { margin: 20px 0 10px; }
  .session { padding: 12px; gap: 9px; border-radius: 12px; }
  .session-time { font-size: 16px; }
  .focus-session { padding: 8px; font-size: 12px; }
  .assignment { padding: 14px; border-radius: 12px; }
  .assignment-buttons button { flex: 1; }
  .mobile-guard-card { display: block; margin: 0 0 16px; padding: 20px; border: 1px solid #bad2b6; border-radius: 20px; background: linear-gradient(145deg, #eff8e9, #fff); box-shadow: 0 10px 25px #123b3210; }
  .guard-mobile-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  .guard-mobile-head h2 { margin: 3px 0 0; font-size: 23px; line-height: 1.1; }
  .guard-power { border: 0; border-radius: 999px; padding: 8px 10px; background: #dce7d8; color: #385a36; font-weight: 700; white-space: nowrap; }
  .guard-power[aria-pressed="true"] { background: var(--forest); color: var(--lime); }
  .guard-mobile-copy, .guard-note { margin: 12px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
  .guard-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
  .guard-usage div { padding: 12px; border-radius: 12px; background: white; border: 1px solid #d9e6d4; }
  .guard-usage span, .guard-usage strong { display: block; }
  .guard-usage span { color: var(--muted); font-size: 11px; }
  .guard-usage strong { margin-top: 5px; font-size: 15px; }
  .guard-label { margin: 14px 0 7px; font-size: 12px; font-weight: 750; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
  .guard-apps { display: flex; flex-wrap: wrap; gap: 7px; }
  .guard-apps button { border: 1px solid #c6d6c1; border-radius: 999px; padding: 8px 10px; background: white; color: var(--ink); font-size: 13px; }
  .guard-apps button[aria-pressed="true"] { background: #dff1b5; border-color: #8eaa58; color: var(--forest); font-weight: 700; }
  .guard-intervention { display: flex; gap: 10px; padding: 13px; margin: 15px 0; border-radius: 13px; background: #173e38; color: white; }
  .guard-intervention small { display: block; margin-top: 5px; color: #d7e7c4; font-size: 11px; line-height: 1.35; }
  .guard-stop { font-size: 25px; }
  .guard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .guard-actions .quiet { min-height: 44px; padding: 8px; font-size: 12px; }
  .mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 40; display: flex; justify-content: space-around; min-height: 68px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
  .mobile-bottom-nav a { display: grid; place-items: center; gap: 3px; min-width: 72px; color: var(--muted); text-decoration: none; font-size: 11px; }
  .mobile-bottom-nav .nav-icon { font-size: 20px; line-height: 1; }
  .mobile-bottom-nav a[aria-current="page"] { color: var(--forest); font-weight: 700; }
  dialog { width: calc(100% - 20px); padding: 20px; border-radius: 20px; }
}

/* The mobile shell can stay mounted when DevTools changes the viewport: keep its theme consistent. */
#mobileApp { background:radial-gradient(85% 44% at 100% -8%,#123d6059 0%,transparent 62%),radial-gradient(70% 38% at -8% 27%,#0c482f48 0%,transparent 66%),#070b14!important; }
#mobileApp h1 em { color:#72e891!important; }
#mobileApp .m-kicker { color:#78aef5!important; }
#mobileApp .m-round-play { background:linear-gradient(135deg,#5ae47c,#3595f4)!important; color:#06121a!important; box-shadow:0 12px 28px #2289df40,0 0 0 5px #51d98614!important; }
#mobileApp .m-metrics article,#mobileApp .m-insight-grid article,#mobileApp .m-guard,#mobileApp .m-next,#mobileApp .m-schedule,#mobileApp .m-date-card,#mobileApp .m-task,#mobileApp .m-permission,#mobileApp .m-subject-card,#mobileApp .m-chart { border:1px solid rgba(132,177,255,.17)!important; background:linear-gradient(145deg,rgba(29,47,73,.72),rgba(12,19,33,.74))!important; box-shadow:inset 0 1px 0 #ffffff0a,0 10px 30px #00000020!important; backdrop-filter:blur(16px); }
#mobileApp .m-start { background:linear-gradient(125deg,#123d65,#145843)!important; color:#effaff!important; border:1px solid #5ca8ff55!important; box-shadow:0 14px 32px #0c62a940!important; }
#mobileApp .m-start small { color:#b8d5ee!important; } #mobileApp .m-start button { background:#5ae47c!important; color:#092416!important; }
#mobileApp .m-primary { background:linear-gradient(135deg,#5ae47c,#55aaff)!important; color:#061721!important; }
#mobileApp .m-ring-card { border:1px solid #5d9ed653!important; background:radial-gradient(circle at 50% 5%,#1b5a6e88,#101a28aa 57%,#09101bda)!important; box-shadow:inset 0 1px 0 #ffffff0d,0 18px 38px #0006!important; }
#mobileApp .m-ring { border-color:#243e52!important; border-top-color:#5ae47c!important; border-right-color:#58a6ff!important; }
#mobileApp .m-presets .selected { background:linear-gradient(135deg,#5ae47c,#55aaff)!important; color:#061721!important; }
#mobileApp .m-focus-launch,#mobileApp .m-add { background:linear-gradient(135deg,#dff7ff,#c8ebff)!important; color:#082238!important; }
#mobileApp .m-task button { background:#56b6ff!important; color:#061a2a!important; }
#mobileApp .m-subject-card>span { background:linear-gradient(135deg,#174c6b,#173d5d)!important; color:#aee8ff!important; }
.m-nav { background:rgba(7,12,21,.9)!important; border-top-color:#3e6a9255!important; backdrop-filter:blur(20px); }.m-nav .active { color:#72e891!important; text-shadow:0 0 15px #5ae47c77; }
#mobileApp .m-screen:not([hidden]) { animation:m-screen-in .42s cubic-bezier(.2,.8,.2,1) both; }

/* Account and avatar experience */
#mobileApp .m-user-orb { display:grid;place-items:center;position:absolute;top:18px;left:16px;z-index:2;width:48px;height:48px;padding:0;border:1px solid #92a18c55;border-radius:50%;background:linear-gradient(145deg,#313633,#111413);box-shadow:inset 1px 1px 1px #ffffff20,0 8px 18px #0008; }
#mobileApp .m-screen[data-screen="home"]>.m-kicker { margin-left:60px; }
.m-avatar-face { display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#4f7354,#16251a);background-size:cover;background-position:center;color:#eaffe5;font-weight:900;font-size:18px;overflow:hidden;box-shadow:inset 0 0 0 2px #b6ffb044;animation:m-avatar-float 3.6s ease-in-out infinite; }
.m-avatar-face[data-avatar-style="orbit"] { background-color:#28302a;background-image:radial-gradient(circle at 68% 25%,#a4ff84 0 8%,transparent 9%),linear-gradient(145deg,#667268,#171b18); }.m-avatar-face[data-avatar-style="sprout"] { background-color:#1d3220;background-image:radial-gradient(circle at 50% 15%,#72e891 0 14%,transparent 15%),linear-gradient(145deg,#466346,#152017); }
#mobileApp .m-account-hero { display:flex;align-items:center;gap:15px;padding:17px;border:1px solid #89918744;border-radius:20px;background:linear-gradient(145deg,#323733d9,#141716e8);box-shadow:inset 1px 1px 0 #ffffff13,0 15px 38px #0007; }
#mobileApp .m-profile-avatar { position:relative;width:86px;height:86px;padding:4px;border:1px solid #a7b0a355;border-radius:50%;background:#1a1d1b; }.m-profile-avatar i { position:absolute;right:-7px;bottom:2px;border:1px solid #c8ffc066;border-radius:99px;background:#26362a;color:#dfffd9;padding:4px 6px;font-size:9px;font-style:normal;font-weight:800; }.m-account-hero>div{min-width:0;flex:1}.m-account-hero b,.m-account-hero small{display:block}.m-account-hero b{font-size:21px}.m-account-hero small{margin:5px 0 10px;color:#b7c0b5;font-size:12px}.m-account-edit{border:1px solid #9ab29466;border-radius:99px;padding:7px 11px;background:#242925;color:#e6f0e3;font-size:11px}
#mobileApp .m-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.m-profile-stats article{padding:12px 9px;border:1px solid #858e8444;border-radius:14px;background:linear-gradient(145deg,#292d2ad9,#171a18e8);text-align:center}.m-profile-stats span,.m-profile-stats b{display:block}.m-profile-stats span{color:#aeb6ad;font-size:10px}.m-profile-stats b{margin-top:5px;color:#85f08d;font-size:18px}
#mobileApp .m-account-summary{padding:16px;border:1px solid #88928844;border-radius:17px;background:linear-gradient(145deg,#292e2ad9,#151816e8)}.m-account-summary b,.m-account-summary small{display:block}.m-account-summary small{margin-top:6px;color:#b1b9b0;font-size:12px}.m-account-summary i{display:block;overflow:hidden;height:6px;margin-top:14px;border-radius:99px;background:#0d100f}.m-account-summary i span{display:block;width:14%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4ba455,#9df28c);box-shadow:0 0 12px #70e87988}.m-account-blocks{width:100%;margin-top:14px;padding:15px;border:1px solid #87a08555;border-radius:14px;background:linear-gradient(145deg,#202521,#101311);color:#ebf3e8;text-align:left;font-weight:800}.m-account-blocks strong{float:right;color:#82ec8c;font-size:19px}
.m-profile-dialog .m-avatar-styles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.m-profile-dialog .m-avatar-styles button{border:1px solid #7d877d66;border-radius:11px;padding:12px 5px;background:#242925;color:#dce4da;font-size:11px}.m-profile-dialog .m-avatar-styles .selected{border-color:#7ce789;background:#25442b;color:#dfffd9;box-shadow:0 0 0 2px #72e89120}.m-profile-dialog input[type=file]{padding:8px;color:#b7c3b4;font-size:11px}
@keyframes m-avatar-float { 0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(2deg)} }

/* Final metallic palette: graphite surfaces and green status only. */
#mobileApp { background:radial-gradient(95% 50% at 100% -15%,#333a352e 0%,transparent 66%),radial-gradient(70% 38% at -8% 27%,#1f482f3b 0%,transparent 67%),#0b0d0c!important; }
#mobileApp .m-kicker { color:#aeb9ae!important; } #mobileApp h1 em { color:#83ed91!important; text-shadow:0 0 20px #58dc6d33; }
#mobileApp .m-round-play,#mobileApp .m-primary { background:linear-gradient(135deg,#9bf49a,#49a858)!important; color:#071008!important; }
#mobileApp .m-metrics article,#mobileApp .m-insight-grid article,#mobileApp .m-guard,#mobileApp .m-next,#mobileApp .m-schedule,#mobileApp .m-date-card,#mobileApp .m-task,#mobileApp .m-permission,#mobileApp .m-subject-card,#mobileApp .m-chart { border-color:#858d8344!important; background:linear-gradient(145deg,rgba(43,47,44,.83),rgba(20,22,21,.9))!important; }
#mobileApp .m-start { background:linear-gradient(135deg,#343a36,#1e3324)!important;border-color:#90a68b55!important; } #mobileApp .m-start button { background:#76df7e!important; }
#mobileApp .m-ring-card { border-color:#8e9a8a55!important;background:radial-gradient(circle at 50% 5%,#3e4b4290,#1b211ddf 58%,#101211)!important; }.m-ring { border-color:#343d36!important;border-top-color:#83ed91!important;border-right-color:#657264!important; }
#mobileApp .m-task button { background:#78dd82!important;color:#071308!important; }.m-nav{background:rgba(10,12,11,.92)!important;border-top-color:#7f8b7c44!important}.m-nav .active{color:#83ed91!important;text-shadow:0 0 14px #76df7e55!important}

#mobileApp .m-avatar-studio{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid #87918444;border-radius:18px;background:linear-gradient(145deg,#303531,#141716);overflow:hidden}.m-avatar-studio>div:last-child{flex:1}.m-avatar-studio b,.m-avatar-studio small{display:block}.m-avatar-studio small{margin:5px 0 9px;color:#b4bcb2;font-size:11px;line-height:1.35}.m-avatar-studio button{border:1px solid #8bc99266;border-radius:99px;padding:7px 10px;background:#253228;color:#dbf8d7;font-size:11px}.m-avatar-full{position:relative;width:92px;height:112px;border-radius:44px 44px 20px 20px;background:radial-gradient(ellipse at 50% 25%,#bc835f 0 18%,transparent 19%),radial-gradient(ellipse at 50% 21%,#25201b 0 24%,transparent 25%),linear-gradient(180deg,transparent 42%,#5b665b 43% 72%,#222723 73%);box-shadow:inset 0 0 0 1px #d9ffe027,0 10px 20px #0006;animation:m-buddy-idle 3.4s ease-in-out infinite}.m-avatar-full::before{content:"";position:absolute;top:30px;left:27px;width:38px;height:14px;border-radius:0 0 12px 12px;border-bottom:3px solid #1b1714}.m-avatar-full i{position:absolute;left:25px;top:23px;width:42px;height:16px;border-radius:8px;background:linear-gradient(90deg,#17211c 43%,transparent 44% 56%,#17211c 57%);z-index:2}.m-avatar-full b{position:absolute;left:15px;right:15px;bottom:12px;height:28px;border-radius:13px 13px 5px 5px;background:#314a36}.m-avatar-full span{position:absolute;left:34px;bottom:32px;width:23px;height:14px;border-radius:8px;background:#bc835f}.m-avatar-studio:has(.m-avatar-face[data-avatar-style="orbit"]) .m-avatar-full b{background:#394042}.m-avatar-studio:has(.m-avatar-face[data-avatar-style="sprout"]) .m-avatar-full b{background:#2f6a42}.m-streak-card{display:flex;justify-content:space-between;align-items:center;padding:17px;border:1px solid #82a08155;border-radius:18px;background:radial-gradient(circle at 88% 28%,#4c795030,transparent 28%),linear-gradient(145deg,#2a302c,#151815)}.m-streak-card span,.m-streak-card b,.m-streak-card small{display:block}.m-streak-card span{color:#aeb8ad;font-size:11px}.m-streak-card b{margin:4px 0;font-size:29px;color:#8bf194}.m-streak-card small{color:#aeb8ad;font-size:11px}.m-streak-card>i{display:grid;place-items:center;width:54px;height:54px;border:1px solid #a1f79755;border-radius:17px;background:linear-gradient(135deg,#3a7141,#1d2f20);color:#dfffd8;font-size:18px;font-style:normal;font-weight:900;box-shadow:0 0 22px #6fe47e33}.m-achievement-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.m-achievement-row article{padding:11px 7px;border:1px solid #7c887944;border-radius:13px;background:#202420;text-align:center}.m-achievement-row span,.m-achievement-row b{display:block}.m-achievement-row span{color:#c8d1c6;font-size:10px}.m-achievement-row b{margin-top:5px;color:#83ed91;font-size:10px}.m-share-action{width:100%;margin-top:12px;padding:15px;border:0;border-radius:99px;background:linear-gradient(135deg,#eff5ed,#c9e8c7);color:#102012;font-size:15px;font-weight:800}.m-share-action strong{float:right;color:#347b3e;font-size:18px}.m-location-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border:1px solid #82907f44;border-radius:16px;background:linear-gradient(145deg,#272c27,#151815)}.m-location-card b,.m-location-card small{display:block}.m-location-card small{margin-top:5px;color:#b5beb4;font-size:11px;line-height:1.35}.m-location-card button{border:1px solid #82e38b66;border-radius:99px;padding:9px 12px;background:#24432a;color:#dcfbd9;font-weight:800}.m-profile-avatar:has(.m-avatar-face:not([style*="url"]))::before{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(ellipse at 50% 39%,#c98b61 0 20%,transparent 21%),radial-gradient(ellipse at 50% 26%,#29231c 0 28%,transparent 29%),linear-gradient(180deg,transparent 47%,#465647 48%);opacity:.9}.m-profile-avatar .m-avatar-face{position:relative;z-index:1;background-color:transparent!important;color:transparent}.m-profile-avatar .m-avatar-face[style*="url"]{color:transparent;background-color:#243025!important}.m-user-orb .m-avatar-face{font-size:0}.m-user-orb .m-avatar-face::before{content:"";display:block;width:42%;height:42%;margin:14% auto 0;border-radius:50%;background:#c98b61;box-shadow:0 -7px 0 4px #29231c,0 21px 0 9px #3e5543}
@keyframes m-buddy-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1deg)}}

@media (max-width:700px){.m-nav{grid-template-columns:repeat(6,1fr)!important}.m-nav b{font-size:16px!important}}
#mobileApp .m-town-hero{display:flex;justify-content:space-between;gap:12px;padding:18px;border:1px solid #9abc9655;border-radius:20px;background:radial-gradient(circle at 85% 10%,#5ca26735,transparent 34%),linear-gradient(145deg,#303932,#141815);box-shadow:inset 1px 1px #ffffff12,0 14px 32px #0006}.m-town-hero span,.m-town-hero b,.m-town-hero small{display:block}.m-town-hero span{color:#9be89e;font-size:10px;font-weight:800;letter-spacing:.1em}.m-town-hero b{margin:5px 0;font-size:24px}.m-town-hero small{color:#b7c1b6;font-size:11px;line-height:1.35}.m-town-hero button{align-self:center;border:1px solid #9ee99b66;border-radius:99px;background:#75d57d;color:#0b190d;padding:10px 12px;font-weight:800}.m-town-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.m-town-actions button{min-height:54px;border:1px solid #87948655;border-radius:13px;background:linear-gradient(145deg,#2d332e,#161916);color:#e9f0e8;font-size:11px;font-weight:800}.m-room-card,.m-server,.m-friend,.m-chat{display:flex;align-items:center;gap:11px;margin:9px 0;padding:14px;border:1px solid #89988755;border-radius:16px;background:linear-gradient(145deg,#292f2a,#151816)}.m-room-card>div:not(.m-room-avatars),.m-friend div{min-width:0;flex:1}.m-room-card b,.m-room-card small,.m-server b,.m-server small,.m-friend b,.m-friend small{display:block}.m-room-card small,.m-server small,.m-friend small{margin-top:4px;color:#b3bdb2;font-size:11px}.m-room-card button,.m-server button,.m-friend button{border:1px solid #86d98c66;border-radius:9px;padding:8px;background:#25442a;color:#dbfad9;font-size:11px}.m-room-avatars{display:flex}.m-room-avatars i,.m-friend>i{display:grid;place-items:center;width:30px;height:30px;margin-left:-7px;border:2px solid #1d211e;border-radius:50%;background:#426747;color:#e8ffe4;font-size:10px;font-style:normal;font-weight:800}.m-room-avatars i:first-child{margin-left:0}.m-town-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0 8px}.m-town-tabs button{border:1px solid #67716555;border-radius:99px;padding:10px 5px;background:#151815;color:#b9c2b7;font-size:11px}.m-town-tabs .active{border-color:#8ee995;background:#27452a;color:#dfffdc;font-weight:800}.m-town-panel[hidden]{display:none}.m-server{display:grid;grid-template-columns:1fr auto}.m-server b,.m-server small{grid-column:1}.m-server button{grid-column:2;grid-row:1/3;align-self:center}.m-chat{display:block}.m-chat>p{margin:0 0 11px}.m-chat>p b,.m-chat>p span{display:block}.m-chat>p span{margin-top:4px;color:#b5bdb4;font-size:11px;line-height:1.4}.m-chat-message{margin:7px 0!important;padding:9px!important;border-radius:10px!important;background:#294a2d!important;color:#e9ffe7!important;font-size:12px!important}.m-chat-input{display:flex;gap:7px;margin-top:10px}.m-chat-input input{min-width:0;flex:1;border:1px solid #71816f66;border-radius:10px;background:#101310;color:white;padding:10px;font:inherit}.m-chat-input button{border:0;border-radius:10px;background:#7ae183;color:#0b190d;padding:0 12px;font-weight:800}.m-note-upload{display:block;margin-top:9px;border:1px dashed #78907477;border-radius:10px;padding:10px;color:#c4d0c2;font-size:11px}.m-note-upload input{display:block;width:100%;margin-top:6px;color:#aec2ad;font-size:10px}.m-call-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.m-call-row button{border:1px solid #86a08266;border-radius:12px;padding:12px;background:#222822;color:#e6eee5;font-weight:800}.m-call-row button:last-child{background:#315f38;color:#e6ffe3}.m-town-panel+.m-hint{margin-top:10px}

/* Rebound mobile visual system: midnight glass, electric blue, and growth green. */
@media (max-width: 700px) {
  :root { --rebound-bg:#070b14; --rebound-panel:rgba(18,29,47,.72); --rebound-line:rgba(132,177,255,.17); --rebound-blue:#58a6ff; --rebound-green:#5ae47c; }
  body { background:var(--rebound-bg); }
  #mobileApp { background:radial-gradient(85% 44% at 100% -8%,#123d6059 0%,transparent 62%),radial-gradient(70% 38% at -8% 27%,#0c482f48 0%,transparent 66%),var(--rebound-bg); }
  #mobileApp h1 em { color:#72e891; text-shadow:0 0 22px #50e17b33; }
  .m-kicker { color:#78aef5; }
  .m-screen:not([hidden]) { animation:m-screen-in .42s cubic-bezier(.2,.8,.2,1) both; }
  .m-round-play { background:linear-gradient(135deg,#5ae47c,#3595f4); color:#06121a; box-shadow:0 12px 28px #2289df40,0 0 0 5px #51d98614; transition:transform .2s ease,box-shadow .2s ease; animation:m-pulse 2.8s ease-in-out infinite; }
  .m-round-play:active,.m-focus-launch:active,.m-add:active { transform:scale(.96); }
  .m-metrics article,.m-insight-grid article,.m-guard,.m-next,.m-schedule,.m-date-card,.m-task,.m-permission,.m-subject-card,.m-chart { border:1px solid var(--rebound-line); background:linear-gradient(145deg,rgba(29,47,73,.72),rgba(12,19,33,.74)); box-shadow:inset 0 1px 0 #ffffff0a,0 10px 30px #00000020; backdrop-filter:blur(16px); }
  .m-metrics article,.m-insight-grid article { transition:transform .24s ease,border-color .24s ease; }
  .m-metrics article:hover,.m-insight-grid article:hover { transform:translateY(-2px); border-color:#61aaff66; }
  .m-metrics i { background:linear-gradient(90deg,#58a6ff,#5ae47c); box-shadow:0 0 12px #4dabff88; }
  .m-guard button,.m-next button { background:#15385caa; border:1px solid #65aaff45; color:#dcecff; }
  .m-start { background:linear-gradient(125deg,#123d65,#145843); color:#effaff; border:1px solid #5ca8ff55; box-shadow:0 14px 32px #0c62a940; overflow:hidden; }
  .m-start::after { content:""; position:absolute; inset:-80% 48% auto -35%; height:210%; background:linear-gradient(90deg,transparent,#9dccff20,transparent); transform:rotate(18deg); animation:m-sheen 5s ease-in-out infinite; }
  .m-start small { color:#b8d5ee; }.m-start button { background:#5ae47c; color:#092416; box-shadow:0 7px 20px #59e37a55; }
  .m-primary { background:linear-gradient(135deg,#5ae47c,#55aaff)!important; color:#061721!important; }
  .m-study-fields input,.m-study-fields textarea,.m-task-dialog input,.m-task-dialog textarea { background:rgba(6,13,25,.68); border-color:#4c86bc66; }
  .m-study-fields input:focus,.m-study-fields textarea:focus { border-color:#58a6ff; box-shadow:0 0 0 3px #58a6ff24; }
  .m-ring-card { border:1px solid #5d9ed653; background:radial-gradient(circle at 50% 5%,#1b5a6e88,#101a28aa 57%,#09101bda); box-shadow:inset 0 1px 0 #ffffff0d,0 18px 38px #0006; backdrop-filter:blur(18px); }
  .m-ring-card>p { color:#b9daf7; }.m-ring { border-color:#243e52; border-top-color:#5ae47c; border-right-color:#58a6ff; box-shadow:0 0 32px #42aaff1f; animation:m-ring-breathe 3.2s ease-in-out infinite; }
  .m-presets button { border:1px solid #42668966; background:#0d1a2acc; }.m-presets .selected { background:linear-gradient(135deg,#5ae47c,#55aaff); color:#061721; border-color:transparent; }
  .m-focus-launch,.m-add { background:linear-gradient(135deg,#dff7ff,#c8ebff); color:#082238; box-shadow:0 10px 25px #168dce30; transition:transform .2s ease,filter .2s ease; }.m-focus-launch strong { color:#1374c8; }
  .m-date-card span { background:#0d2033aa; border:1px solid #3a6b9260; }.m-task i { background:linear-gradient(135deg,#0c5a54,#164e86); color:#c4ffe2; }.m-task button { background:#56b6ff; color:#061a2a; }
  .m-subject-card>span { background:linear-gradient(135deg,#174c6b,#173d5d); color:#aee8ff; }.m-subject-card strong { color:#72e891; }
  .m-chart .m-bars i { background:linear-gradient(180deg,#3e76b3,#1a2e48); }.m-chart .m-bars i:nth-child(7) { background:linear-gradient(180deg,#5ae47c,#318dcc); }
  .m-block-list button { border:1px solid #38567577; background:linear-gradient(145deg,rgba(28,43,63,.78),rgba(10,17,29,.8)); }.m-block-list button.enabled { box-shadow:inset 4px 0 #5ae47c,0 10px 30px #0003; }.m-permission button { background:#173e63; color:#b8e5ff; }
  .m-nav { background:rgba(7,12,21,.86); border-top-color:#3e6a9255; box-shadow:0 -10px 30px #0004; backdrop-filter:blur(20px); }.m-nav .active { color:#72e891; text-shadow:0 0 15px #5ae47c77; }.m-nav button { transition:color .2s ease,transform .2s ease; }.m-nav button:active { transform:translateY(2px); }
  .m-guard-dialog,.m-task-dialog { border-color:#5b8fc477; background:linear-gradient(145deg,rgba(21,38,60,.94),rgba(8,15,27,.96)); box-shadow:0 24px 80px #000b,inset 0 1px 0 #ffffff12; backdrop-filter:blur(24px); }.m-guard-dialog h2,.m-task-dialog h2 { color:#f1f8ff; }.m-time-picks button,.m-reset-options button { border-color:#4b739b80; background:#10233aaa; }.m-time-picks .selected { border-color:#5ae47c; background:linear-gradient(135deg,#174c4b,#164e82); color:#c4ffe2; }.m-stop { background:linear-gradient(135deg,#164a6b,#164e55); }.m-stop .ui-icon { color:#aee8ff; }.m-guard-dialog #mStartTask { background:linear-gradient(135deg,#5ae47c,#55aaff); color:#061721; }.m-guard-dialog #mResetIcon { background:linear-gradient(135deg,#164f64,#174078); }.m-guard-dialog #mResetClock { color:#8befff; }.m-guard-dialog #mResetIcon .ui-icon,.m-guard b .ui-icon { color:#79e99a; }
  @keyframes m-screen-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
  @keyframes m-pulse { 0%,100% { box-shadow:0 12px 28px #2289df40,0 0 0 5px #51d98614; } 50% { box-shadow:0 15px 34px #2289df70,0 0 0 10px #51d9860a; } }
  @keyframes m-ring-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.018); } }
  @keyframes m-sheen { 0%,60%,100% { transform:translateX(-85%) rotate(18deg); } 78% { transform:translateX(290%) rotate(18deg); } }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
}

@media (max-width: 700px) {
  #mobileApp { display:block; min-height:100dvh; padding:24px 16px 98px; background:#101216; color:#f6f7f8; }
  #mobileApp .m-screen[hidden] { display:none; }
  .m-kicker { margin:0 0 8px; color:#a9b1bd; font-size:11px; font-weight:800; letter-spacing:.12em; }
  #mobileApp h1 { margin:0 0 20px; color:#fff; font-size:35px; line-height:1.02; letter-spacing:-1.7px; } #mobileApp h1 em { color:#dff58b; font-style:normal; }
  .m-round-play { position:absolute; top:126px; right:24px; width:58px; height:58px; border:0; border-radius:50%; background:#f5a000; color:#201507; font-size:21px; }.m-screen[data-screen=home]{position:relative}
  .m-metrics,.m-insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.m-metrics article,.m-insight-grid article { min-height:105px; padding:14px; border-radius:14px; background:#1c222d; }.m-metrics span,.m-metrics small,.m-insight-grid span,.m-insight-grid small { display:block; color:#aeb6c5; font-size:11px; }.m-metrics b,.m-insight-grid b { display:block; margin:8px 0 4px; font-size:24px; }.m-metrics i { display:block; height:4px; margin-top:10px; border-radius:99px; background:#57d9a8; }
  .m-guard,.m-next,.m-schedule,.m-date-card,.m-task,.m-permission { margin:12px 0; padding:15px; border-radius:15px; background:#212329; }.m-guard { display:flex; align-items:center; justify-content:space-between; gap:10px; }.m-guard b,.m-guard small,.m-next b,.m-next small,.m-schedule strong,.m-schedule small,.m-permission b,.m-permission small { display:block; }.m-guard small,.m-next small,.m-schedule small,.m-permission small { margin-top:5px; color:#aab1ba; font-size:12px; }.m-guard button,.m-next button { border:0; border-radius:8px; padding:8px; background:#3a3d45; color:white; font-size:12px; }
  .m-start { position:relative; display:grid; gap:5px; margin:12px 0; padding:17px; border-radius:15px; background:linear-gradient(135deg,#f7b637,#ed8f00); color:#2a1a05; }.m-start span,.m-next span { font-size:11px; font-weight:800; letter-spacing:.1em; }.m-start b { font-size:22px; }.m-start small { color:#75510f; }.m-start button { position:absolute; right:16px; top:27px; width:44px; height:44px; border:0; border-radius:50%; background:#633e05; color:white; }
  .m-next { display:grid; gap:5px; }.m-next div { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }.m-primary { background:#57d9a8!important; color:#11261f!important; }
  .m-study-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 14px}.m-study-fields label{display:grid;gap:6px;color:#aab4aa;font-size:11px;font-weight:700;letter-spacing:.04em}.m-study-fields label:nth-child(3){grid-column:1/-1}.m-study-fields input,.m-study-fields textarea{box-sizing:border-box;width:100%;border:1px solid #2b3930;border-radius:12px;background:#161b19;color:#f2f4ef;padding:11px 12px;font:inherit;letter-spacing:normal;outline:none}.m-study-fields textarea{resize:vertical;min-height:54px}.m-study-fields input:focus,.m-study-fields textarea:focus{border-color:#65df49;box-shadow:0 0 0 3px #63dd4720}.m-ring-card { padding:20px; border-radius:20px; background:radial-gradient(circle at 50% 10%,#213728,#15191a 62%); text-align:center; }.m-ring-card>p{margin:0 0 12px;color:#c9d5c5;font-size:13px;font-weight:700}.m-ring { display:grid; place-content:center; width:205px; height:205px; margin:0 auto 20px; border:20px solid #2e3931; border-top-color:#62df45; border-radius:50%; }.m-ring b{font-size:34px}.m-ring small{color:#adb6aa}.m-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.m-presets button{border:0;border-radius:9px;padding:10px;background:#282d2c;color:#d9ded9}.m-presets .selected{background:#63dd47;color:#142312;font-weight:800}.m-focus-launch{width:100%;margin-top:18px;border:0;border-radius:99px;padding:16px;background:#f4f7ef;color:#173d24;font-size:16px;font-weight:800}.m-focus-launch strong{float:right;color:#46b939}.m-section-title{margin:22px 0 8px;color:#b7bec8;font-size:14px}.m-schedule strong{font-size:17px}.m-segment{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}.m-segment button{border:1px solid #2c3035;border-radius:13px;padding:13px 5px;background:#0c0e10;color:#d6d8dc}.m-segment .active{color:#61dc45}
  .m-date-card{display:grid;grid-template-columns:1fr 1fr;gap:8px}.m-date-card b{grid-column:1/-1}.m-date-card span{padding:11px;border-radius:9px;background:#292c30;color:#aeb4bd;font-size:12px}.m-date-card strong{display:block;color:white;font-size:19px}.m-task{display:flex;align-items:center;gap:10px}.m-task i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#3d542e;color:#dff58b;font-style:normal;font-size:12px}.m-task div{flex:1}.m-task b,.m-task small{display:block}.m-task small{margin-top:4px;color:#adb3bc;font-size:12px}.m-task button{border:0;border-radius:8px;padding:8px;background:#58d8a8;color:#12271f}.m-add{display:block;margin:40px auto 0;border:0;border-radius:99px;padding:14px 23px;background:#f5f7f1;color:#1a241e;font-size:16px}.m-hint{color:#9da6b3;font-size:12px;line-height:1.5}
  .m-subject-card{display:flex;align-items:center;gap:11px;margin:8px 0;padding:13px;border:1px solid #27302b;border-radius:14px;background:#151a18}.m-subject-card>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#253e2a;color:#8cef72;font-size:10px;font-weight:800}.m-subject-card div{flex:1}.m-subject-card b,.m-subject-card small{display:block}.m-subject-card small{margin-top:3px;color:#aeb6ae;font-size:11px}.m-subject-card strong{color:#8cef72;font-size:12px}.m-task-dialog{width:min(360px,calc(100vw - 32px));border:1px solid #354039;border-radius:22px;background:#151a18;color:#f4f7f1;padding:20px}.m-task-dialog::backdrop{background:#000b}.m-task-dialog form{display:grid;gap:11px}.m-task-dialog h2{margin:0 0 6px;font-size:22px}.m-task-dialog label{display:grid;gap:5px;color:#b8c2b7;font-size:11px;font-weight:800}.m-task-dialog input,.m-task-dialog textarea{box-sizing:border-box;width:100%;border:1px solid #344139;border-radius:10px;background:#101412;color:white;padding:10px;font:inherit}.m-task-dialog form>div{display:grid;grid-template-columns:1fr 1fr;gap:9px}.m-task-dialog .m-focus-launch{margin-top:2px}.m-dialog-cancel{border:0;background:transparent;color:#b7c0b7;padding:8px;font:inherit}
  .m-chart{margin:12px 0;padding:16px;border-radius:15px;background:#1d2021}.m-chart p,.m-chart small{color:#aeb4bc;font-size:12px}.m-bars{display:flex;align-items:end;height:120px;gap:10px;margin:15px 0}.m-bars i{flex:1;border-radius:4px 4px 0 0;background:#3d4142}.m-bars i:nth-child(1){height:35%}.m-bars i:nth-child(2){height:58%}.m-bars i:nth-child(3){height:42%}.m-bars i:nth-child(4){height:74%}.m-bars i:nth-child(5){height:52%}.m-bars i:nth-child(6){height:84%}.m-bars i:nth-child(7){height:64%;background:#e7f3ca}
  .m-block-list button{display:block;width:100%;margin:10px 0;padding:16px;border:0;border-radius:15px;background:#1e2020;color:#f5f5f5;text-align:left}.m-block-list b,.m-block-list span{display:block}.m-block-list span{margin-top:6px;color:#a9afb4;font-size:12px}.m-block-list i{float:right;font-style:normal;font-size:20px}.m-block-list button.enabled{box-shadow:inset 4px 0 #62df45}.m-permission{display:flex;justify-content:space-between;align-items:center}.m-permission button{border:0;border-radius:99px;padding:8px 12px;background:#303536;color:#dff58b}
  .m-nav { position:fixed;inset:auto 0 0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 7px calc(8px + env(safe-area-inset-bottom));background:#101216;border-top:1px solid #292c32; }.m-nav button{display:grid;place-items:center;gap:3px;border:0;background:transparent;color:#959daa;font-size:10px}.m-nav b{font-size:18px;font-weight:400}.m-nav .active{color:#dff58b}
  .m-guard-dialog { position:fixed; inset:auto 14px 18px; width:auto; max-width:none; padding:24px; border:1px solid #353b43; border-radius:24px; background:#1d2128; color:#f6f7f8; box-shadow:0 20px 70px #000a; }.m-guard-dialog::backdrop{background:#06080bbd;backdrop-filter:blur(5px)}.m-guard-dialog h2{margin:6px 0 10px;font-size:28px;line-height:1.05}.m-guard-dialog p{color:#b6bec9;line-height:1.45}.m-time-picks,.m-reset-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0}.m-time-picks button,.m-reset-options button{border:1px solid #3a414b;border-radius:12px;padding:13px;background:#272d36;color:white;text-align:left}.m-time-picks .selected{border-color:#67df4b;background:#29452a;color:#dff58b;font-weight:800}.m-dialog-note{font-size:12px}.m-close-guard{position:absolute;top:11px;right:13px;border:0;background:transparent;color:#a8b0ba;font-size:27px}.m-stop{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#56332c;font-size:23px}.m-guard-dialog #mContinueWatch,.m-guard-dialog #mStartTask{width:100%;margin-top:9px;border:0;border-radius:12px;padding:13px;background:#343a45;color:white}.m-guard-dialog #mStartTask{background:#58d8a8;color:#12271f;font-weight:800}.m-guard-dialog #mResetIcon{display:grid;place-items:center;width:66px;height:66px;margin:10px auto;border-radius:50%;background:#2c4a3a;font-size:33px}.m-guard-dialog #mResetClock{display:block;margin:15px 0;text-align:center;font-size:58px;color:#dff58b}.m-round-play .ui-icon,.m-start button .ui-icon{width:22px;height:22px;vertical-align:middle}.m-guard b .ui-icon{width:17px;height:17px;margin-right:8px;vertical-align:-3px;color:#dff58b}.m-stop .ui-icon,.m-reset-options .ui-icon{width:20px;height:20px;margin-right:7px;vertical-align:-5px}.m-stop .ui-icon{margin:0;color:#ffd3c8}.m-guard-dialog #mResetIcon .ui-icon{width:33px;height:33px;color:#dff58b}.m-focus-launch .ui-icon{width:18px;height:18px;vertical-align:-4px}
}

@media (max-width: 700px) {
  body { background: #10141e; color: #f5f6fb; }
  header { background: #10141e; border-color: #242a36; }
  .brand { color: #f5f6fb; }
  .mobile-bottom-nav { background: rgba(16,20,30,.97); border-top-color: #292f3d; padding-left: 8px; padding-right: 8px; }
  .mobile-bottom-nav button { display: grid; place-items: center; gap: 3px; min-width: 56px; border: 0; background: transparent; color: #929bab; font-size: 10px; }
  .mobile-bottom-nav button[aria-current="page"] { color: #dff58b; font-weight: 700; }
  #mobileHome { display: block; padding: 10px 16px 100px; color: #f5f6fb; }
  #mobileHome[hidden] { display: none; }
  .mobile-hero { display: block; position: relative; min-height: 140px; padding: 16px 0; }
  .mobile-hero p, .mobile-launch-card p, .mobile-next-card p { margin: 0 0 6px; color: #a8b1c2; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
  .mobile-hero h1 { margin: 0; font-size: 34px; color: #f7f8fc; }.mobile-hero h1 span { color: #dff58b; }
  .mobile-play { position: absolute; right: 2px; bottom: 18px; width: 58px; height: 58px; border: 0; border-radius: 50%; background: #f5a000; color: #1e1605; font-size: 20px; }
  .mobile-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-stat-grid article { min-height: 108px; padding: 14px; border-radius: 13px; background: #1b212d; }.mobile-stat-grid span,.mobile-stat-grid small { display:block; color:#aeb6c6; font-size:11px; }.mobile-stat-grid strong { display:block; margin:8px 0 4px; color:#f7f8fc; font-size:25px; }.mobile-stat-grid i { display:block; width:78%; height:4px; margin-top:10px; border-radius:99px; background:#50d6a4; }
  .mobile-scroll-card { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin:12px 0; padding:15px; border-radius:13px; background:#2a2c33; }.mobile-scroll-card h2 { margin:0; font-size:16px; }.mobile-scroll-card p { margin:4px 0 0; color:#c7cad2; font-size:12px; }.scroll-badge { float:left; display:grid; place-items:center; width:30px; height:30px; margin:0 9px 8px 0; border-radius:9px; background:#604b23; color:#f5c65a; }.mobile-switch { width:42px; height:25px; border:0; border-radius:99px; background:#efa653; }.mobile-scroll-card > button:last-child { grid-column:2; border:0; border-radius:7px; padding:5px 8px; background:#424650; color:#f5f6fb; font-size:11px; }
  .mobile-launch-card { position:relative; display:block; margin:12px 0; padding:17px; border-radius:13px; background:linear-gradient(135deg,#f6b33b,#ed9000); color:#251904; }.mobile-launch-card h2 { margin:4px 0; font-size:23px; }.mobile-launch-card small { color:#67460e; }.mobile-launch-card button { position:absolute; right:16px; top:24px; width:44px; height:44px; border:0; border-radius:50%; background:#5e3b06; color:white; }
  .mobile-next-card { display:block; padding:16px; border-radius:13px; background:#1b212d; }.mobile-next-card strong,.mobile-next-card span { display:block; }.mobile-next-card strong { margin:5px 0; font-size:16px; }.mobile-next-card span { color:#b5bece; font-size:12px; line-height:1.4; }.mobile-next-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }.mobile-next-actions button { min-height:39px; padding:8px; font-size:12px; }.mobile-next-actions .primary { background:#50d6a4; color:#10241f; border-color:#50d6a4; }
}