/* =========================================================================
   BASE: reset, page background, phone frame, screen chrome
   ========================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(39, 66, 214, 0.30), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, rgba(15, 163, 163, 0.18), transparent 55%),
    linear-gradient(180deg, #060a18 0%, #0b1020 100%);
  min-height: 100vh;
  color: #e9ecf6;
  padding: 36px 16px 80px;
  display: flex;
  justify-content: center;
}

/* PHONE FRAME (demo chrome, not part of the app itself) */
.phone {
  width: 380px; height: 800px;
  background: #0d1226; border-radius: 46px; padding: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  position: relative; flex-shrink: 0;
}
.phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: #0d1226; border-radius: 20px; z-index: 5;
}
.screen {
  background: var(--paper); color: var(--text);
  width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}

/* App header */
.app-header {
  background: var(--brand-primary); color: var(--brand-name-color);
  padding: 52px 18px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.app-header .greeting-head { font-weight: 400; }
.app-header .greet-line { font-size: 15px; line-height: 1.25; }
.app-header .greet-name { font-size: 15px; line-height: 1.25; }

/* Header action icons: bell (notifications) + person (account menu).
   No boxes — the icons sit directly on the header background. */
.header-actions { display: flex; gap: 14px; align-items: center; }
.icon-btn {
  position: relative;
  width: 32px; height: 32px; border: none; padding: 0;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-name-color); flex-shrink: 0;
}
.bell-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: #ff5a45; color: #fff; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
}

/* Menu overlay: veil + panel under the header */
.menu-veil {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(7, 12, 28, 0.45);
}
.menu-panel {
  position: absolute; top: 104px; right: 10px; width: 240px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 6px;
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 12px; border: none; border-radius: 11px;
  background: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--paper); }
.menu-item .ico { font-size: 16px; }
.menu-item.soon { color: var(--muted); cursor: default; }
.menu-item .soon-tag {
  margin-left: auto; font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--paper); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 999px;
}

/* View container: views are stacked, one visible at a time */
#view-root { flex: 1; overflow-y: auto; }
.view { display: none; padding: 16px 16px 90px; }
.view.active { display: block; }

/* Bottom tab bar */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--paper-2); border-top: 1px solid var(--line);
  display: flex; padding: 8px 6px 18px;
}
.tabbar button {
  flex: 1; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tabbar button .ico { font-size: 19px; }
.tabbar button.active { color: var(--accent); font-weight: 700; }