/* iTeamHQ Mobile v0.22.0 — Night Paddock design system.
   Presentation only. Supabase/auth, app logic, push, and update behaviour are unchanged. */
:root{
  color-scheme:dark;
  --hq-bg:#090911;
  --hq-canvas:#0d0b15;
  --hq-surface:#171321;
  --hq-surface-raised:#21192e;
  --hq-surface-input:#14111f;
  --hq-line:rgba(184,145,227,.20);
  --hq-line-strong:rgba(182,130,238,.43);
  --hq-ink:#f7f3ff;
  --hq-muted:#b6a9c5;
  --hq-purple:#ad72f5;
  --hq-purple-hi:#cb9aff;
  --hq-purple-low:#41245d;
  --hq-green:#4dd9a3;
  --hq-amber:#f4c26a;
  --hq-red:#ff7894;
  --hq-radius-sm:12px;
  --hq-radius:18px;
  --hq-radius-lg:24px;
  --hq-ease:cubic-bezier(.2,.7,.2,1);
  --hq-shadow:0 12px 34px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.035);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--hq-bg);color:var(--hq-ink);
}
*{ -webkit-tap-highlight-color:transparent; }
html{background:var(--hq-bg);scroll-behavior:smooth;}
body{background:var(--hq-bg);line-height:1.45;overscroll-behavior-y:contain;}
button,input,textarea,select{font:inherit;}
button,a,[role="button"]{touch-action:manipulation;}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--hq-purple-hi);outline-offset:3px;
}
::selection{background:rgba(184,124,255,.34);color:#fff;}
.shell{
  max-width:640px;margin:0 auto;min-height:100dvh;
  background:radial-gradient(ellipse 110% 370px at 4% 2%,rgba(86,42,129,.20),transparent 76%),
             linear-gradient(165deg,#12101c 0%,var(--hq-canvas) 35%,#0b0a13 100%);
  border-left:1px solid rgba(190,148,226,.07);border-right:1px solid rgba(190,148,226,.07);
}
/* Header and three primary destinations: permanent hierarchy, never a floating overlay. */
.top{
  padding-bottom:14px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));gap:10px;
  background:linear-gradient(112deg,rgba(34,23,53,.95),rgba(17,14,27,.95));
  border-bottom:1px solid rgba(177,139,219,.14);
}
.brand-art{max-width:148px;filter:drop-shadow(0 0 14px rgba(164,100,244,.17));}
.mobile-label{left:34px;bottom:-9px;letter-spacing:2.15px;font-size:8px;color:#b2a0c9;}
.header-right{gap:12px;}
.notification-bell,.account-avatar{
  border-radius:50%;border:1px solid var(--hq-line-strong);
  background:linear-gradient(145deg,rgba(94,60,129,.38),rgba(33,25,49,.75));
  box-shadow:0 3px 15px rgba(0,0,0,.20);
  transition:transform .18s var(--hq-ease),border-color .18s ease,background .18s ease;
}
.notification-bell:active,.account-avatar:active{transform:scale(.95);}
.bell-count,.unread-badge,.activity-badge{
  background:linear-gradient(135deg,#bc81ff,#925bec);color:#160e20;
  box-shadow:0 2px 9px rgba(161,96,243,.25);
}
.top-nav{
  min-height:68px;padding:5px 10px 0;gap:7px;
  background:rgba(17,13,25,.96);border-bottom:1px solid var(--hq-line);
}
.top-nav button{
  min-height:63px;border-radius:14px 14px 0 0;
  font-size:12px;font-weight:730;letter-spacing:.01em;
  color:var(--hq-muted);transition:color .18s ease,background .18s ease,transform .18s var(--hq-ease);
}
.top-nav button.selected{
  color:#e5c7ff;
  background:linear-gradient(180deg,rgba(119,63,175,.18),rgba(91,48,143,.12));
}
.top-nav button.selected::after{
  left:24%;right:24%;height:3px;
  background:linear-gradient(90deg,#a75dff,#ddabff);
  box-shadow:0 -3px 14px rgba(182,117,255,.35);
}
.top-nav .navicon{color:inherit;}
.top-nav button:active{transform:scale(.97);}
main{padding:23px 17px calc(36px + env(safe-area-inset-bottom));}
.eyebrow{color:var(--hq-purple-hi);font-size:10px;letter-spacing:3px;}
.h1{font-size:clamp(29px,7vw,36px);line-height:1.13;letter-spacing:-.045em;font-weight:790;margin:6px 0 19px;}
.sub,.muted,.detail-row span,.inbox-row small{color:var(--hq-muted);}
.section{margin:24px 0 13px;}
.section h2{font-size:17px;letter-spacing:-.025em;font-weight:760;}
/* All card surfaces share one material and one spacing model. */
.card{
  background:linear-gradient(150deg,rgba(38,29,51,.96) 0%,rgba(23,19,33,.98) 68%,rgba(22,19,33,.99));
  border:1px solid var(--hq-line);border-radius:var(--hq-radius-lg);
  padding:19px;margin-bottom:14px;box-shadow:var(--hq-shadow);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.card h2{font-size:19px;font-weight:770;letter-spacing:-.025em;}
.card h3{font-weight:730;letter-spacing:-.012em;}
.teamhero{
  background:radial-gradient(circle at 82% 0,rgba(150,89,215,.20),transparent 48%),
    linear-gradient(145deg,#31213f 0%,#191523 73%);
  border-color:rgba(188,132,245,.39);
  box-shadow:0 15px 34px rgba(0,0,0,.26),inset 0 1px rgba(226,190,255,.06);
}
.biglogo,.profile-avatar,.league-avatar,.circle{
  background:linear-gradient(135deg,#3e2554,#21172f);border-color:var(--hq-line-strong);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
}
.divider{border-color:var(--hq-line);}
.stats{gap:10px;}
.stat{
  background:linear-gradient(155deg,rgba(13,12,23,.94),rgba(23,17,34,.94));
  border:1px solid rgba(200,160,234,.12);border-radius:16px;
  padding:17px 7px;min-width:0;
}
.stat strong{font-size:27px;line-height:1.18;letter-spacing:-.04em;}
.stat span{font-size:11px;line-height:1.3;color:var(--hq-muted);}
.driver,.integration,.detail-row,.activity-line{border-bottom-color:rgba(205,181,230,.11);}
.driver{min-height:61px;}
.driver strong,.league-card strong{font-weight:740;}
.tag,.pill{
  border:1px solid rgba(189,141,236,.20);
  border-radius:9px;background:rgba(110,76,150,.21);color:#dcbfff;
}
/* Buttons: unified height, pressure, legibility and tactile state. */
.button,.switch-button,.event-button,.feed-action,.quick-tile,.quick-community-post{
  transition:transform .17s var(--hq-ease),background-color .18s ease,
    border-color .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.button{
  min-height:44px;padding:11px 16px;border-radius:14px;
  background:linear-gradient(112deg,#a367e9,#9153db);color:#fff;
  border:1px solid rgba(229,196,255,.18);font-weight:760;
  box-shadow:0 6px 18px rgba(126,64,196,.17),inset 0 1px rgba(255,255,255,.10);
}
.button.secondary{
  background:linear-gradient(135deg,#33263e,#292035);
  border:1px solid rgba(178,127,225,.44);color:#f0e2ff;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.button:not(:disabled):active,.switch-button:not(:disabled):active,.event-button:active,
.quick-tile:active,.quick-community-post:active{transform:scale(.975);}
.button:disabled{filter:saturate(.45);opacity:.58;}
/* Tabs inside screens and Community filters */
.switch-button{
  min-height:44px;background:rgba(48,33,66,.70);
  border:1px solid rgba(175,123,220,.38);border-radius:14px;
  color:#ccb6e4;font-weight:730;
}
.switch-button.active,.switch-button.selected{
  background:linear-gradient(135deg,rgba(144,83,214,.59),rgba(110,58,176,.52));
  border-color:rgba(204,156,255,.69);color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.11);
}
.community-switch{gap:8px;}
.community-four .switch-button{white-space:nowrap;}
/* Controls, menus and mobile bottom sheets */
.field,input.field,textarea.field,select.field{
  min-height:46px;background:var(--hq-surface-input);
  border:1px solid rgba(171,129,207,.40);border-radius:14px;
  padding:12px 13px;color:var(--hq-ink);
  transition:border-color .17s ease,box-shadow .17s ease;
}
.field:focus{border-color:#bd85ff;box-shadow:0 0 0 3px rgba(174,104,251,.14);outline:none;}
.field::placeholder,textarea::placeholder,input::placeholder{color:#8d829e;opacity:1;}
select.field{color-scheme:dark;}
.modal-backdrop{
  background:rgba(3,2,10,.75);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.modal{
  border:1px solid rgba(185,138,231,.42);border-bottom:0;
  background:linear-gradient(160deg,#292032,#1a1526 64%,#181320);
  border-radius:27px 27px 0 0;
  max-height:min(89dvh,900px);padding:23px 20px calc(27px + env(safe-area-inset-bottom));
  box-shadow:0 -15px 55px rgba(0,0,0,.45);
}
.modal h2{font-size:21px;letter-spacing:-.03em;}
.modal-top{margin-bottom:17px;}
/* Social feed and conversation list */
.feed-card{border-color:rgba(195,151,236,.21);}
.feedhead strong{font-size:14px;font-weight:770;}
.post-body,.post{color:#e9e0f1;line-height:1.6;}
.feed-image,.league-poster-image,.league-calendar-image{
  border-radius:16px;max-width:100%;
}
.feed-buttons{border-top-color:rgba(205,180,231,.14);gap:5px;}
.feed-action{border-radius:12px;min-height:43px;color:#c1b3d1;}
.feed-action.active{background:rgba(114,70,157,.22);color:#dbafff;}
.inbox-row{min-height:74px;border-color:rgba(201,176,231,.10);}
.inbox-row strong{font-size:14px;}
.inbox-row.unread strong,.inbox-row.unread .message-snippet{color:#fff;}
.message-snippet{color:#c3b6ce;}
.notification-row{min-height:64px;border-color:rgba(204,175,232,.11);}
.notification-row strong{font-size:14px;}
.notification-row.is-unread{background:rgba(136,75,200,.085);border-radius:12px;}
/* Events and leagues: visual grouping without altering click destinations. */
.event-date{
  min-width:62px;border-radius:14px;border-color:var(--hq-line-strong);
  background:linear-gradient(145deg,#352144,#1d162a);
}
.event-date strong{font-size:24px;letter-spacing:-.035em;}
.league-card{border-radius:17px;min-height:72px;}
.league-card .league-avatar{border-radius:14px;}
.league-detail-actions .button{min-height:48px;}
.league-links a,.external,.text-action{color:#d0a0ff;}
/* Update banner: consistent with app and safely outside iOS home indicator. */
.update-toast{
  background:linear-gradient(130deg,#31213f,#191523);
  border:1px solid rgba(204,155,249,.62);border-radius:20px;
  padding:16px;box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08);
}
.update-toast button{min-height:42px;border-radius:13px;}
.update-toast .update-now{background:linear-gradient(110deg,#ae70ed,#9457da);color:#160e1c;}
/* Only animate interfaces that are already visible; no costly global page motion. */
@media (hover:hover) and (pointer:fine){
  .button:not(:disabled):hover{box-shadow:0 10px 24px rgba(126,64,196,.25);}
  .card.clickable:hover,.card.event-button:hover,.league-card:hover{border-color:rgba(190,135,247,.44);}
  .top-nav button:not(.selected):hover{color:#e2cdfa;background:rgba(98,65,131,.15);}
}
@media(max-width:385px){
  .top{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));}
  main{padding-inline:13px;}
  .card{padding:15px;border-radius:21px;}
  .community-four{gap:5px;}
  .community-four .switch-button{font-size:10px;}
  .stats{gap:7px;}
  .stat{padding:14px 4px;}
}
@media(min-width:600px){main{padding-inline:25px}.top{padding-left:max(25px,env(safe-area-inset-left,0px));padding-right:max(25px,env(safe-area-inset-right,0px));}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .button,.switch-button,.event-button,.feed-action,.quick-tile,.quick-community-post,
  .top-nav button,.notification-bell,.account-avatar,.card,.field{transition:none!important;animation:none!important;}
}