/* RyanCFC8's App World — minimal shared style, deliberately neutral so the
   sibling apps can each own their brand colour. */
:root {
  --bg:           #0a0e14;
  --bg-card:      #121821;
  --bg-input:     #1a2230;
  --bg-elevated:  #1d2533;
  --border:       #1f2937;
  --border-mid:   #2a3441;
  --text-main:    #e5e7eb;
  --text-sub:     #94a3b8;
  --text-dim:     #64748b;
  --accent:       #ec4899;   /* personal hub accent, distinct from sibling apps */
  --accent-glow:  rgba(236,72,153,.16);
  --discord:      #5865F2;
  --espana:       #DA5100;
  --espana-glow:  rgba(218,81,0,.14);
  --sky:          #0ea5e9;
  --sky-glow:     rgba(14,165,233,.14);
  --purple:       #a855f7;
  --green:        #10b981;
  --red:          #ef4444;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; line-height: 1.5; }

.top-bar { height: 4px; background: linear-gradient(90deg, var(--accent), #f472b6, var(--accent)); }

main { max-width: 980px; margin: 0 auto; }

.login-page  { display: flex; align-items: center; justify-content: center; min-height: 78vh; padding: 28px; }
.login-card  { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 38px 36px; max-width: 420px; width: 100%; text-align: center; }
.login-logo  { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--accent); }
.login-logo svg { width: 100%; height: 100%; display: block; }

/* App World mark — the orbital "A" with the app-tile cluster. Used on the
   sign-in card, the picker page, and the favicon. */
.app-world-logo    { width: 64px; height: 64px; border-radius: 14px; display: block; margin: 0 auto; }
.app-world-logo-lg { width: 96px; height: 96px; border-radius: 20px; display: block; margin: 0 auto 18px;
                     box-shadow: 0 12px 32px rgba(99,102,241,.22); }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.login-sub   { font-size: 13px; color: var(--text-sub); margin-bottom: 22px; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--border-mid); background: var(--bg-input); color: var(--text-main); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--bg-elevated); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-discord { background: var(--discord); border-color: var(--discord); color: #fff; padding: 12px 22px; font-size: 14px; font-weight: 700; }
.btn-discord:hover { background: #4752c4; }

.alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.alert-error   { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #f87171; }
.alert-info    { background: rgba(14,165,233,.08); border: 1px solid rgba(14,165,233,.25); color: #38bdf8; }
.alert-success { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #34d399; }

.section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-sub); margin-bottom: 12px; }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }

.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .g3 { grid-template-columns: 1fr; } }

.app-tile { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); text-decoration: none; color: inherit; transition: transform .12s, border-color .12s, background .12s; }
.app-tile:hover { transform: translateY(-2px); border-color: var(--ac, var(--border-mid)); background: var(--ac-bg, var(--bg-elevated)); }
.app-tile-icon  { font-size: 30px; }
.app-tile-title { font-size: 17px; font-weight: 700; color: var(--ac, var(--text-main)); }
.app-tile-sub   { font-size: 13px; color: var(--text-sub); }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-sub); margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 9px 12px; background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; }
input:focus, select:focus { outline: none; border-color: var(--accent); }

.code-input { font-family: 'SF Mono', Menlo, monospace; letter-spacing: .35em; text-align: center; font-size: 18px; }

footer { padding: 26px 28px; color: var(--text-dim); font-size: 11px; text-align: center; }