/* The sign-in page: a white page with soft purple shapes, deep-indigo words and an orange button. */
@font-face { font-family: "Noto Sans Sinhala"; src: url(/assets/fonts/NotoSansSinhala.ttf); font-weight: 100 900; font-display: swap; }
:root { color-scheme: light; --ink: #2e1573; --dim: #5d4a99; --faint: #8b7cc0; --line: rgba(120, 70, 220, .16); --field: #fff; --fieldline: rgba(120, 70, 220, .28);
  --purple: #6d28d9; --orange1: #ffa24c; --orange2: #ff7a18; --err: #c0264b; --ok: #15803d;
  --ui: -apple-system, "SF Pro Text", "Segoe UI", "Noto Sans Sinhala", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 16px/1.55 var(--ui); color: var(--ink); background: #efe3ff; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; }
body::before { content: ""; position: fixed; left: -12vw; bottom: -22vh; width: 62vw; height: 78vh; background: linear-gradient(160deg, #d9bdfb, #c39cf5); border-radius: 62% 38% 60% 40% / 52% 58% 42% 48%; z-index: 0; }
body::after { content: ""; position: fixed; right: -14vw; bottom: -10vh; width: 42vw; height: 54vh; background: linear-gradient(200deg, #e6d3ff, #cfa9f7); border-radius: 48% 52% 40% 60% / 50% 42% 58% 50%; z-index: 0; }
a { color: inherit; }
.stage { position: relative; z-index: 1; min-height: 100vh; padding: clamp(10px, 3.2vw, 46px); display: flex; }
.frame { flex: 1; background: #fff; border-radius: clamp(14px, 1.6vw, 22px); box-shadow: 0 34px 80px -24px rgba(91, 33, 182, .45), 0 0 0 1px rgba(120, 70, 220, .06); padding: clamp(16px, 2.4vw, 32px) clamp(18px, 4vw, 60px) 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.top { display: flex; align-items: center; gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.logo i { width: 42px; height: 22px; border-radius: 99px; background: linear-gradient(135deg, #c4a2f7, #a78bfa); position: relative; font-size: 0; }
.logo i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(109, 40, 217, .3); }
.logo small { display: block; font-weight: 600; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-top: 1px; }
.top nav { display: flex; gap: clamp(16px, 2.8vw, 40px); margin-left: auto; }
.top nav a { text-decoration: none; font-size: 13.5px; letter-spacing: .02em; color: var(--dim); padding: 6px 1px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.top nav a:hover { color: var(--ink); } .top nav a[aria-current] { color: var(--ink); border-color: var(--ink); }
.hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 440px); gap: clamp(20px, 5vw, 80px); align-items: center; padding: clamp(14px, 2.6vw, 34px) 0; }
.artcol { display: grid; place-items: center; min-width: 0; }
.art { width: min(100%, 680px); height: auto; overflow: visible; }
.formcol h1 { font: 800 clamp(30px, 3.6vw, 44px)/1.12 var(--ui); margin: 0 0 12px; letter-spacing: -.015em; color: #3a1b8f; }
.formcol .lead { color: var(--dim); margin: 0 0 22px; max-width: 42ch; font-size: 15px; }
.card { border: 1px solid var(--line); background: linear-gradient(180deg, #faf6ff, #f5eeff); border-radius: 22px; padding: 22px; box-shadow: 0 22px 50px -30px rgba(109, 40, 217, .45); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 99px; border: 1px solid var(--line); background: #fff; margin-bottom: 18px; }
.tabs button { border: 0; background: none; color: var(--dim); font: 700 13.5px var(--ui); padding: 10px 10px; border-radius: 99px; cursor: pointer; transition: .2s; }
.tabs button[aria-selected="true"] { background: linear-gradient(135deg, var(--orange1), var(--orange2)); color: #fff; box-shadow: 0 8px 20px -8px rgba(255, 122, 24, .6); }
label { display: block; font-size: 12.5px; font-weight: 700; color: var(--dim); margin: 0 0 6px 4px; }
.fld { margin-bottom: 14px; position: relative; }
.fld input { width: 100%; font: 16px var(--ui); color: var(--ink); background: var(--field); border: 1px solid var(--fieldline); border-radius: 14px; padding: 13px 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.fld input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(139, 92, 246, .18); }
.fld .eye { position: absolute; right: 8px; top: 29px; border: 0; background: none; cursor: pointer; font-size: 16px; padding: 6px 8px; color: var(--dim); }
[hidden] { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 99px; border: 0; cursor: pointer; font: 800 13.5px var(--ui); letter-spacing: .04em; text-transform: uppercase; padding: 15px 20px; color: #fff; background: linear-gradient(135deg, var(--orange1), var(--orange2)); box-shadow: 0 14px 28px -10px rgba(255, 122, 24, .6); transition: transform .15s, filter .2s; text-decoration: none; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn:disabled { opacity: .6; cursor: wait; }
.msg { min-height: 20px; margin: 12px 4px 0; font-size: 13.5px; color: var(--err); } .msg.ok { color: var(--ok); }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12.5px; margin: 16px 0; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#gbtn { display: flex; justify-content: center; } #gbtn:empty { display: none; }
.fine { color: var(--faint); font-size: 12.5px; margin: 14px 4px 0; } .fine a { color: var(--purple); font-weight: 600; }
.perks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 4px 0; color: var(--dim); font-size: 13.5px; } .perks span::before { content: "✓"; color: var(--orange2); font-weight: 800; margin-right: 7px; }
.dots { position: absolute; right: clamp(18px, 4vw, 60px); bottom: 64px; display: flex; gap: 8px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: #d9c8f7; } .dots i:first-child { background: var(--orange2); }
.art .float1 { animation: fl 7s ease-in-out infinite; } .art .float2 { animation: fl 8s ease-in-out -2s infinite; } .art .float3 { animation: fl 6s ease-in-out -4s infinite; }
@keyframes fl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.foot { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; font-size: 12.5px; color: var(--faint); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .foot a { text-decoration: none; } .foot a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; } .artcol { max-height: 250px; overflow: hidden; } .art { width: min(100%, 420px); }
  .top nav { display: none; } .dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .art .float1, .art .float2, .art .float3 { animation: none; } }
/* a smaller card so the page does not need to scroll on a laptop */
.stage { padding: clamp(8px, 2vw, 28px); } .frame { min-height: calc(100vh - 2 * clamp(8px, 2vw, 28px)); padding-top: clamp(12px, 1.6vw, 20px); padding-bottom: 12px; }
.hero { padding: clamp(6px, 1.2vw, 16px) 0; }
.formcol h1 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 6px; } .formcol .lead { font-size: 14px; margin-bottom: 14px; }
.card { padding: 16px 18px; border-radius: 18px; } .tabs { margin-bottom: 12px; } .tabs button { padding: 8px 10px; font-size: 13px; }
.fld { margin-bottom: 10px; } label { margin-bottom: 4px; font-size: 12px; } .fld input { padding: 10px 14px; font-size: 15px; border-radius: 12px; } .fld .eye { top: 22px; }
.btn { padding: 12px 18px; } .msg { min-height: 0; margin: 8px 4px 0; font-size: 13px; } .msg:empty { display: none; }
.perks { margin-top: 10px; font-size: 13px; } .fine { margin-top: 8px; font-size: 12px; }
.dots { bottom: 52px; } .foot { padding-top: 10px; }
.art { width: min(100%, 600px); }
@media (max-width: 900px) { .frame { min-height: 0; } }
@media (min-width: 901px) and (max-height: 820px) { .perks { display: none; } .formcol .lead { margin-bottom: 10px; } #welcome { display: none; } }
@media (min-width: 901px) and (max-height: 740px) { .formcol h1 { font-size: 28px; } .fld { margin-bottom: 8px; } .fld input { padding: 8px 14px; } .fld .eye { top: 19px; } .btn { padding: 10px 18px; } .formcol .lead { display: none; } .dots { display: none; } }

/* purple buttons, a prettier card */
:root { --orange1: #9b6cf7; --orange2: #6d28d9; }
.card { border: 1.5px solid transparent; background: linear-gradient(180deg, #ffffff, #fbf8ff) padding-box, linear-gradient(135deg, #d9c4ff, #f4eaff 45%, #c9aaff) border-box; box-shadow: 0 30px 60px -28px rgba(109, 40, 217, .5), 0 2px 0 rgba(255, 255, 255, .8) inset; padding: 18px 20px; position: relative; }
.card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #a78bfa, #7c3aed, #c026d3); opacity: .9; }
.tabs { background: #f3ebff; border: 0; padding: 4px; box-shadow: inset 0 1px 3px rgba(109, 40, 217, .12); }
.tabs button { color: #6d4fb8; } .tabs button:hover { color: #4c1d95; }
.tabs button[aria-selected="true"] { background: linear-gradient(135deg, #9b6cf7, #6d28d9); color: #fff; box-shadow: 0 8px 18px -8px rgba(109, 40, 217, .75), 0 1px 0 rgba(255, 255, 255, .35) inset; }
.fld input { padding-left: 44px; background-repeat: no-repeat; background-position: 15px 50%; background-size: 19px; border-color: #e1d3fb; box-shadow: 0 1px 2px rgba(109, 40, 217, .06); }
#login { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b7be8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.5 4.2-6.5 8-6.5s7 2 8 6.5'/%3E%3C/svg%3E"); } #email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b7be8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3.5 7.5l8.5 6 8.5-6'/%3E%3C/svg%3E"); } #pw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b7be8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='3'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); padding-right: 46px; }
.fld input:hover { border-color: #c9b2f7; } .fld input:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, .16); }
.fld .eye { right: 6px; top: 20px; width: 36px; height: 34px; padding: 0; display: grid; place-items: center; color: #9b7be8; border-radius: 10px; } .fld .eye:hover { color: #6d28d9; background: #f3ebff; }
.fld .eye .e2 { display: none; } .fld .eye.on .e1 { display: none; } .fld .eye.on .e2 { display: block; }
.btn { position: relative; overflow: hidden; background: linear-gradient(135deg, #9b6cf7 0%, #6d28d9 55%, #5b21b6 100%); box-shadow: 0 16px 30px -12px rgba(109, 40, 217, .8), 0 1px 0 rgba(255, 255, 255, .3) inset; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s; }
.btn:hover::after { left: 130%; } .btn:active { transform: translateY(0) scale(.99); }
.formcol h1 .gt { background: linear-gradient(120deg, #7c3aed, #c026d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.perks span::before { color: #7c3aed; } .dots i:first-child { background: #7c3aed; }
.fine a { color: #6d28d9; } .or::before, .or::after { background: #e5d8fb; }

/* a white page; the card keeps its soft shadow */
body { background: #fff; } body::before, body::after { display: none; }
.stage { position: relative; z-index: 1; } .frame { box-shadow: 0 34px 80px -30px rgba(91, 33, 182, .4), 0 0 0 1px rgba(120, 70, 220, .1); }