/* Cruz Institute brand: the one home for colors and backgrounds. config/settings.json "theme" picks the background. */
:root { --navy:#0D5597; --navy-deep:#083A68; --orange:#F26822; --yellow:#FEBD10; --gray:#58585A; --mist:#EEF3F9; --ok:#3fd17f; --warn:#FEBD10; --bad:#ff6b5a; }
* { box-sizing:border-box; margin:0; }
html, body { min-height:100%; }
body { font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:#fff; background:var(--navy); position:relative; }
.bg { position:fixed; inset:0; z-index:-1; overflow:hidden; }

/* The five backgrounds Emilya chose between */
.bg-sunrise .bg { background:
    radial-gradient(120% 60% at 50% 110%, rgba(254,189,16,.85) 0%, rgba(242,104,34,.75) 30%, rgba(242,104,34,0) 62%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, #1b67ad 100%); }
.bg-blueprint .bg { background:
    radial-gradient(60% 40% at 85% 12%, rgba(242,104,34,.55), rgba(242,104,34,0) 70%),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/5.5px 5.5px,
    linear-gradient(160deg, var(--navy-deep), var(--navy)); }
.bg-shapes .bg { background:linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 100%); }
.bg-shapes .bg::before { content:""; position:absolute; width:300px; height:300px; border-radius:60px; left:-150px; bottom:-200px; transform:rotate(-12deg); background:linear-gradient(135deg, var(--orange), var(--yellow)); opacity:.85; }
.bg-shapes .bg::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-75px; top:-55px; background:radial-gradient(circle at 35% 35%, var(--yellow), var(--orange) 70%); opacity:.9; }
.bg-warm .bg { background:linear-gradient(165deg, var(--orange) 0%, #f68a1f 55%, var(--yellow) 100%); }
.bg-warm .card { background:var(--navy); color:#fff; } .bg-warm .card b { color:#fff; }
.bg-warm .btn { background:var(--navy); box-shadow:0 8px 20px rgba(13,85,151,.45); }
.bg-split .bg { background:linear-gradient(172deg, var(--navy) 0%, var(--navy) 46%, var(--orange) 46%, var(--yellow) 52%, #3d3d3f 52%, var(--gray) 100%); }

/* Circuit (chosen): navy, faint circuit traces in two corners away from the text, safety stripe along the bottom */
.bg-circuit .bg { --circuit-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='180' viewBox='0 0 210 180'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='2'%3E%3Cpath d='M0 82 H44 L62 64 H98'/%3E%3Cpath d='M0 128 H76 L94 146 H140 L158 128 H210'/%3E%3Cpath d='M30 180 V160 L48 142 V118'/%3E%3C/g%3E%3Cg fill='%23F26822'%3E%3Ccircle cx='98' cy='64' r='4.5'/%3E%3Ccircle cx='48' cy='118' r='4.5'/%3E%3Ccircle cx='140' cy='146' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='190' viewBox='0 0 170 190'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='2'%3E%3Cpath d='M170 34 H140 L124 50 H110'/%3E%3Cpath d='M170 82 H150 L134 98 V130'/%3E%3C/g%3E%3Cg fill='%23F26822'%3E%3Ccircle cx='110' cy='50' r='4.5'/%3E%3Ccircle cx='134' cy='130' r='4.5'/%3E%3C/g%3E%3C/svg%3E") top right / 170px 190px no-repeat,
    var(--circuit-bl) left bottom 14px / 210px 180px no-repeat,
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(170deg, var(--navy-deep), var(--navy)); }
.bg-circuit .bg::after { content:""; position:absolute; left:0; right:0; bottom:0; height:14px;
    background:repeating-linear-gradient(-45deg, var(--yellow) 0 12px, #2a2a2c 12px 24px); opacity:.9; }
.bg-circuit main { padding-bottom:30px; }
/* Classroom screens (TV): text sits low on the left, so leave out the bottom-left circuit lines there */
.bg-circuit.tv .bg { --circuit-bl: none; }

/* Shared pieces */
header a { position:relative; z-index:1; color:#fff; background:rgba(8,58,104,.9); padding:7px 12px; border-radius:8px; text-decoration:none; }
.logo { width:180px; display:block; margin:0 auto; }
.card { background:rgba(255,255,255,.96); color:var(--gray); border-radius:14px; padding:14px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.card b { color:var(--navy); }
.btn { border:0; border-radius:16px; padding:20px; font-size:19px; font-weight:800; color:#fff; width:100%; background:var(--orange); box-shadow:0 8px 20px rgba(242,104,34,.45); cursor:pointer; font-family:inherit; }
.btn:disabled { opacity:.6; cursor:default; }
.btn.small { padding:12px 16px; font-size:15px; width:auto; border-radius:12px; }
input, select { width:100%; border:1.5px solid #c9d3df; border-radius:10px; padding:13px; font-size:16px; color:var(--gray); background:#fff; font-family:inherit; }
label { display:block; font-size:12.5px; font-weight:700; margin:12px 0 6px; color:var(--gray); text-align:left; }
.flag { display:inline-block; font-size:11.5px; font-weight:700; border-radius:20px; padding:3px 9px; margin:2px 4px 2px 0; background:#fff4d6; color:#7a5200; }
.flag.none { background:#dff6e8; color:#16653a; }