@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: hsl(36 33% 97%);
  --fg: hsl(20 14% 14%);
  --card: hsl(0 0% 100%);
  --primary: hsl(20 14% 16%);
  --primary-fg: hsl(36 33% 97%);
  --secondary: hsl(36 20% 93%);
  --muted: hsl(36 18% 94%);
  --muted-fg: hsl(20 8% 45%);
  --accent: hsl(14 58% 54%);
  --accent-light: hsl(14 58% 54% / 0.12);
  --border: hsl(36 15% 90%);
  --radius: 24px;
  --green: hsl(150 45% 42%);
  --green-light: hsl(150 45% 42% / 0.12);
  --blue: hsl(210 65% 48%);
  --blue-light: hsl(210 65% 48% / 0.12);
  --purple: hsl(265 55% 52%);
  --purple-light: hsl(265 55% 52% / 0.12);
  --yellow: hsl(38 75% 45%);
  --yellow-light: hsl(38 75% 45% / 0.12);
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body.portrait { width: 2048px; height: 2732px; }
body.landscape { width: 2732px; height: 2048px; }

.screen { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
body.landscape .screen { flex-direction: row; }

/* Status bar */
.statusbar {
  height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; font-size: 28px; font-weight: 600; flex-shrink: 0;
}
.statusbar .time { font-weight: 700; }
.statusbar .icons { display: flex; gap: 10px; align-items: center; font-size: 24px; }

/* Main column */
.main-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* App header */
.app-header {
  padding: 12px 48px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.app-header .logo { font-family: 'Fraunces', serif; font-size: 52px; font-weight: 700; letter-spacing: -0.02em; }
.app-header .logo .dot { color: var(--accent); }
.app-header .subtitle { font-size: 26px; color: var(--muted-fg); font-weight: 500; }

/* Content */
.content { flex: 1; overflow: hidden; padding: 0 48px 32px; display: flex; flex-direction: column; gap: 28px; }
.content.scroll { overflow-y: auto; }

/* Section */
.section-title { font-family: 'Fraunces', serif; font-size: 34px; font-weight: 600; margin-bottom: 4px; }

/* Card */
.card { background: var(--card); border-radius: var(--radius); padding: 32px; box-shadow: 0 2px 16px rgba(41,35,30,0.05); }

/* Event card */
.event-card { display: flex; align-items: center; gap: 24px; padding: 26px 30px; background: var(--card); border-radius: 20px; box-shadow: 0 2px 12px rgba(41,35,30,0.04); }
.event-card .time { font-size: 25px; font-weight: 600; color: var(--muted-fg); width: 130px; flex-shrink: 0; }
.event-card .info { flex: 1; }
.event-card .title { font-size: 29px; font-weight: 600; }
.event-card .meta { font-size: 23px; color: var(--muted-fg); margin-top: 4px; }

/* Badge */
.badge { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 999px; font-size: 21px; font-weight: 500; }
.badge.accent { background: var(--accent-light); color: hsl(14 58% 44%); }
.badge.green { background: var(--green-light); color: var(--green); }
.badge.blue { background: var(--blue-light); color: var(--blue); }
.badge.purple { background: var(--purple-light); color: var(--purple); }
.badge.yellow { background: var(--yellow-light); color: var(--yellow); }
.badge.gray { background: hsl(36 15% 90%); color: hsl(20 8% 40%); }

/* Avatar */
.avatar { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; color: white; flex-shrink: 0; }
.avatar.lg { width: 120px; height: 120px; font-size: 44px; }
.avatar.sm { width: 60px; height: 60px; font-size: 24px; }

/* Tab bar */
.tabbar { height: 132px; display: flex; align-items: flex-start; justify-content: space-around; background: var(--card); border-top: 1px solid var(--border); padding-top: 22px; flex-shrink: 0; }
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted-fg); font-size: 23px; font-weight: 500; }
.tabbar .tab.active { color: var(--accent); }
.tabbar .tab .icon { font-size: 42px; }

/* Sidebar */
.sidebar { width: 360px; background: hsl(36 30% 95%); border-right: 1px solid var(--border); padding: 48px 28px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.sidebar .logo { font-family: 'Fraunces', serif; font-size: 44px; font-weight: 700; margin-bottom: 28px; padding: 0 12px; letter-spacing: -0.02em; }
.sidebar .logo .dot { color: var(--accent); }
.sidebar .nav-item { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 16px; font-size: 27px; font-weight: 500; color: var(--fg); }
.sidebar .nav-item.active { background: var(--card); color: var(--accent); font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sidebar .nav-item .icon { font-size: 32px; width: 36px; text-align: center; }

/* List item */
.list-item { display: flex; align-items: center; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: none; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }

/* Group card */
.group-card { background: var(--card); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.group-card .icon-box { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.group-card .name { font-size: 28px; font-weight: 600; }
.group-card .meta { font-size: 22px; color: var(--muted-fg); }

/* Toggle */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 26px 30px; background: var(--card); border-radius: 18px; margin-bottom: 14px; }
.toggle-row .label { font-size: 27px; font-weight: 500; }
.toggle-row .sub { font-size: 22px; color: var(--muted-fg); margin-top: 4px; }
.toggle { width: 76px; height: 44px; border-radius: 999px; background: var(--secondary); position: relative; flex-shrink: 0; }
.toggle.on { background: var(--accent); }
.toggle::after { content: ''; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: white; top: 4px; left: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.toggle.on::after { left: 36px; }

/* Chat */
.chat-bubble { max-width: 78%; padding: 26px 34px; border-radius: 28px; font-size: 27px; line-height: 1.5; }
.chat-bubble.user { background: var(--accent); color: white; align-self: flex-end; border-bottom-right-radius: 8px; }
.chat-bubble.ai { background: var(--card); align-self: flex-start; border-bottom-left-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

/* Banner */
.banner { padding: 28px 48px 16px; flex-shrink: 0; }
.banner h1 { font-family: 'Fraunces', serif; font-size: 52px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.banner p { font-size: 28px; color: var(--muted-fg); margin-top: 10px; }

/* Table */
.standings { width: 100%; border-collapse: collapse; }
.standings th { text-align: left; font-size: 23px; color: var(--muted-fg); font-weight: 500; padding: 18px 22px; border-bottom: 2px solid var(--border); }
.standings td { font-size: 27px; padding: 22px; border-bottom: 1px solid var(--border); }
.standings .rank { font-family: 'Fraunces', serif; font-weight: 700; font-size: 30px; width: 70px; }
.standings .rank.top { color: var(--accent); }

/* Calendar */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; flex: 1; }
.cal-day { background: var(--card); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cal-day .day-label { font-size: 22px; font-weight: 600; color: var(--muted-fg); text-align: center; }
.cal-day .day-num { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.cal-day.today { background: var(--accent); color: white; }
.cal-day.today .day-label, .cal-day.today .day-num { color: white; }
.cal-event { font-size: 18px; padding: 8px 12px; border-radius: 8px; font-weight: 500; line-height: 1.3; }

/* Bracket */
.bracket-round { display: flex; flex-direction: column; gap: 40px; justify-content: space-around; }
.bracket-game { background: var(--card); border-radius: 14px; padding: 18px 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); min-width: 240px; }
.bracket-game .team { display: flex; justify-content: space-between; font-size: 23px; padding: 4px 0; }
.bracket-game .team.winner { font-weight: 700; }
.bracket-game .team .score { color: var(--muted-fg); font-weight: 600; }
.bracket-game .team.winner .score { color: var(--accent); }

/* Misc helpers */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 14px; }
.gap-3 { gap: 22px; }
.gap-4 { gap: 30px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 22px; }
.text-muted { color: var(--muted-fg); }
.text-sm { font-size: 23px; }
.text-md { font-size: 26px; }
.text-lg { font-size: 30px; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.flex-1 { flex: 1; }
.rounded { border-radius: 16px; }
.pill { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 999px; font-size: 24px; font-weight: 500; background: var(--secondary); }