@@ -1,72 +1,765 @@
/*#if (SampleContent)*/
/* ===================================================================
SilverOS Welcome — Mercury Aesthetic
Theme: precision dark, slate-steel dominant, electric-ice accent.
Typography: "DM Mono" for headings/UI text, fallback to Courier
variant stacks for the "terminal-built" feel of a security OS.
Atmosphere: layered radial + linear gradients, subtle scanline texture.
Motion: staggered CSS entrance on .step reveal — one orchestrated
arrival, not scattered micro-animations.
=================================================================== */
/* ── Web Font ───────────────────────────────────────────────────────── */
@ import url ( 'https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Inter:wght@300;400;500&display=swap' ) ;
/* ── Design Tokens ──────────────────────────────────────────────────── */
: root {
/* Palette */
--clr-void : #0b0f14 ; /* near-black background */
--clr-surface : #111720 ; /* card / panel surface */
--clr-surface-2 : #19202e ; /* raised surface */
--clr-border : #1e2a3a ; /* subtle border */
--clr-border-hi : #2a3d56 ; /* highlighted border */
--clr-accent : #00d4ff ; /* electric ice — primary CTA, progress */
--clr-accent-dim : #0099bb ; /* dimmer accent for hover states */
--clr-accent-glow : rgba ( 0 , 212 , 255 , 0.18 ) ;
--clr-success : #00e5a0 ; /* completion green */
--clr-warn : #f5a623 ; /* error / warning amber */
--clr-text-hi : #e8edf5 ; /* high-emphasis text */
--clr-text-mid : #8fa4bc ; /* mid-emphasis: labels, subtitles */
--clr-text-lo : #4a5f78 ; /* low-emphasis: placeholders, hints */
/* Typography */
--font-mono : 'DM Mono' , 'Fira Code' , 'Consolas' , monospace ;
--font-ui : 'Inter' , system-ui , - apple-system , sans-serif ;
/* Geometry */
--radius-sm : 4 px ;
--radius-md : 8 px ;
--radius-lg : 12 px ;
/* Motion */
--ease-out : cubic-bezier ( 0.22 , 0.61 , 0.36 , 1 ) ;
--ease-in : cubic-bezier ( 0.64 , 0 , 0.78 , 0 ) ;
}
/* ── Reset & Base ───────────────────────────────────────────────────── */
* , * :: before , * :: after {
box-sizing : border-box ;
margin : 0 ;
padding : 0 ;
}
html , body {
font-family : 'Helvetica Neue' , Helvetica , Arial , sans-serif ;
height : 100 % ;
background-color : var ( - - clr - void ) ;
color : var ( - - clr - text - hi ) ;
font-family : var ( - - font - ui ) ;
font-size : 15 px ;
line-height : 1.6 ;
-webkit- font-smoothing : antialiased ;
}
a , . btn-link {
color : #006bb7 ;
}
. btn-primary {
color : #fff ;
background-color : #1b6ec2 ;
border-color : #1861ac ;
}
. btn : focus , . btn : active : focus , . btn-link . nav-link : focus , . form-control : focus , . form-check-input : focus {
box-shadow : 0 0 0 0.1 rem white , 0 0 0 0.25 rem #258cfb ;
}
. content {
padding-top : 1.1 rem ;
}
/*#endif*/
h1 : focus {
outline : none ;
}
. valid . modified : not ( [ type = checkbox ] ) {
outline : 1 px solid #26b050 ;
}
. invalid {
outline : 1 px solid #e50000 ;
}
. validation-message {
color : #e50000 ;
/* Atmospheric background — layered radial glow on deep void */
body {
background :
radial-gradient ( ellipse 80 % 60 % at 50 % -10 % , rgba ( 0 , 100 , 180 , 0.18 ) 0 % , transparent 70 % ) ,
radial-gradient ( ellipse 50 % 40 % at 90 % 100 % , rgba ( 0 , 180 , 140 , 0.08 ) 0 % , transparent 60 % ) ,
var ( - - clr - void ) ;
min-height : 100 vh ;
}
/* ── Blazor error overlay (keep readable) ──────────────────────────── */
# blazor-error-ui {
background : lightyellow ;
background : #1a0a0a ;
border-top : 2 px solid var ( - - clr - warn ) ;
color : var ( - - clr - warn ) ;
bottom : 0 ;
box-shadow : 0 -1 px 2 px rgba ( 0 , 0 , 0 , 0.2 ) ;
box-shadow : 0 -2 px 1 2px rgba ( 245 , 166 , 35 , 0.15 ) ;
display : none ;
left : 0 ;
padding : 0.6 rem 1.25 rem 0.7 rem 1.25 rem ;
position : fixed ;
width : 100 % ;
z-index : 1000 ;
font-family : var ( - - font - mono ) ;
font-size : 0.8 rem ;
}
# blazor-error-ui . dismiss {
cursor : pointer ;
position : absolute ;
right : 0.75 rem ;
top : 0.5 rem ;
}
# blazor-error-ui . dismiss {
cursor : pointer ;
position : absolute ;
right : 0.75 rem ;
top : 0.5 rem ;
color : var ( - - clr - text - mid ) ;
}
. blazor-error-boundary {
background : url ( data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4= ) no-repeat 1 rem / 1.8 rem , #b32121 ;
background : #1a0a0a ;
border : 1 px solid var ( - - clr - warn ) ;
padding : 1 rem 1 rem 1 rem 3.7 rem ;
color : white ;
color : var ( - - clr - warn ) ;
border-radius : var ( - - radius - md ) ;
}
. blazor-error-boundary :: after {
content : "An error has occurred."
}
. blazor-error-boundary :: after {
content : "An error has occurred."
}
/* ── Validation ─────────────────────────────────────────────────────── */
h1 : focus { outline : none ; }
. valid . modified : not ( [ type = checkbox ] ) {
outline : 1 px solid var ( - - clr - success ) ;
}
. invalid {
outline : 1 px solid var ( - - clr - warn ) ;
}
. validation-message {
color : var ( - - clr - warn ) ;
font-size : 0.75 rem ;
font-family : var ( - - font - mono ) ;
}
/* ══════════════════════════════════════════════════════════════════════
WIZARD CHROME
══════════════════════════════════════════════════════════════════════ */
. wizard {
display : grid ;
grid-template-rows : auto 1 fr auto ;
min-height : 100 vh ;
max-width : 760 px ;
margin : 0 auto ;
}
/* ── Step indicator ─────────────────────────────────────────────────── */
. wizard-header {
padding : 1.5 rem 2 rem 1 rem ;
border-bottom : 1 px solid var ( - - clr - border ) ;
background : linear-gradient ( to bottom , rgba ( 17 , 23 , 32 , 0.95 ) , transparent ) ;
position : sticky ;
top : 0 ;
z-index : 10 ;
}
. wizard-steps-indicator {
display : flex ;
gap : 0 ;
align-items : center ;
}
. wizard-step-dot {
font-family : var ( - - font - mono ) ;
font-size : 0.7 rem ;
font-weight : 400 ;
letter-spacing : 0.05 em ;
color : var ( - - clr - text - lo ) ;
padding : 0.25 rem 0.75 rem ;
border-radius : var ( - - radius - sm ) ;
transition : color 0.25 s var ( - - ease-out ) , background 0.25 s var ( - - ease-out ) ;
position : relative ;
white-space : nowrap ;
}
. wizard-step-dot + . wizard-step-dot :: before {
content : '› ;
position : absolute ;
left : -2 px ;
color : var ( - - clr - border - hi ) ;
font-size : 0.9 rem ;
top : 50 % ;
transform : translateY ( -50 % ) ;
}
. wizard-step-dot . done {
color : var ( - - clr - success ) ;
}
. wizard-step-dot . done :: after {
content : ' ✓' ;
font-size : 0.6 rem ;
}
. wizard-step-dot . active {
color : var ( - - clr - accent ) ;
background : var ( - - clr - accent - glow ) ;
font-weight : 500 ;
}
/* ── Wizard body ────────────────────────────────────────────────────── */
. wizard-body {
padding : 2.5 rem 2 rem ;
overflow-y : auto ;
}
/* ── Wizard footer ──────────────────────────────────────────────────── */
. wizard-footer {
padding : 1.25 rem 2 rem ;
border-top : 1 px solid var ( - - clr - border ) ;
display : flex ;
justify-content : space-between ;
align-items : center ;
background : linear-gradient ( to top , rgba ( 11 , 15 , 20 , 0.98 ) , transparent ) ;
gap : 1 rem ;
}
/* ── Loading / error states ─────────────────────────────────────────── */
. loading {
font-family : var ( - - font - mono ) ;
color : var ( - - clr - text - lo ) ;
font-size : 0.85 rem ;
animation : pulse 1.4 s ease-in-out infinite ;
}
@ keyframes pulse {
0 % , 100 % { opacity : 0.4 ; }
50 % { opacity : 1 ; }
}
. error-panel {
border : 1 px solid var ( - - clr - warn ) ;
border-radius : var ( - - radius - md ) ;
padding : 1.5 rem ;
background : rgba ( 245 , 166 , 35 , 0.06 ) ;
}
. error {
color : var ( - - clr - warn ) ;
font-weight : 500 ;
margin-bottom : 0.4 rem ;
}
. error-detail {
color : var ( - - clr - text - lo ) ;
font-family : var ( - - font - mono ) ;
font-size : 0.75 rem ;
margin-bottom : 1 rem ;
}
/* ══════════════════════════════════════════════════════════════════════
BUTTONS
══════════════════════════════════════════════════════════════════════ */
. btn-primary ,
. btn-secondary {
font-family : var ( - - font - mono ) ;
font-size : 0.8 rem ;
font-weight : 500 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
padding : 0.6 rem 1.4 rem ;
border-radius : var ( - - radius - sm ) ;
border : none ;
cursor : pointer ;
transition :
background 0.2 s var ( - - ease-out ) ,
box-shadow 0.2 s var ( - - ease-out ) ,
opacity 0.15 s ;
outline-offset : 3 px ;
}
. btn-primary {
background : var ( - - clr - accent ) ;
color : var ( - - clr - void ) ;
}
. btn-primary : hover : not ( : disabled ) {
background : #1ae0ff ;
box-shadow : 0 0 18 px var ( - - clr - accent - glow ) ;
}
. btn-primary : focus-visible {
outline : 2 px solid var ( - - clr - accent ) ;
}
. btn-primary : disabled {
opacity : 0.35 ;
cursor : not-allowed ;
}
. btn-secondary {
background : transparent ;
color : var ( - - clr - text - mid ) ;
border : 1 px solid var ( - - clr - border - hi ) ;
}
. btn-secondary : hover : not ( : disabled ) {
background : var ( - - clr - surface -2 ) ;
color : var ( - - clr - text - hi ) ;
border-color : var ( - - clr - accent - dim ) ;
}
. btn-secondary : focus-visible {
outline : 2 px solid var ( - - clr - accent ) ;
}
. btn-secondary : disabled {
opacity : 0.3 ;
cursor : not-allowed ;
}
/* ══════════════════════════════════════════════════════════════════════
STEP ENTRANCE ANIMATION (orchestrated stagger)
══════════════════════════════════════════════════════════════════════ */
. step {
animation : step-enter 0.45 s var ( - - ease-out ) both ;
}
@ keyframes step-enter {
from {
opacity : 0 ;
transform : translateY ( 16 px ) ;
}
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
}
/* heading and subtitle arrive slightly after the container */
. step h1 {
font-family : var ( - - font - mono ) ;
font-size : 1.6 rem ;
font-weight : 300 ;
letter-spacing : -0.02 em ;
color : var ( - - clr - text - hi ) ;
line-height : 1.2 ;
margin-bottom : 0.4 rem ;
animation : step-enter 0.5 s 0.05 s var ( - - ease-out ) both ;
}
. step-subtitle {
font-family : var ( - - font - ui ) ;
font-size : 0.9 rem ;
color : var ( - - clr - text - mid ) ;
margin-bottom : 2 rem ;
animation : step-enter 0.5 s 0.1 s var ( - - ease-out ) both ;
}
/* ══════════════════════════════════════════════════════════════════════
WELCOME STEP
══════════════════════════════════════════════════════════════════════ */
. welcome-step {
display : flex ;
flex-direction : column ;
justify-content : center ;
min-height : 50 vh ;
}
. welcome-hero {
animation : step-enter 0.55 s 0.05 s var ( - - ease-out ) both ;
}
. welcome-hero h1 {
font-size : 2.2 rem ;
font-weight : 300 ;
color : var ( - - clr - text - hi ) ;
margin-bottom : 0.5 rem ;
/* Accent underline */
background : linear-gradient ( 90 deg , var ( - - clr - accent ) 0 % , var ( - - clr - success ) 100 % ) ;
background-clip : text ;
-webkit- background-clip : text ;
-webkit- text-fill-color : transparent ;
animation : step-enter 0.55 s 0.1 s var ( - - ease-out ) both ;
}
. tagline {
font-size : 1.05 rem ;
color : var ( - - clr - text - mid ) ;
font-style : italic ;
margin-bottom : 1.5 rem ;
animation : step-enter 0.5 s 0.15 s var ( - - ease-out ) both ;
}
. time-estimate {
font-family : var ( - - font - mono ) ;
font-size : 0.75 rem ;
color : var ( - - clr - text - lo ) ;
margin-top : 1.5 rem ;
animation : step-enter 0.5 s 0.2 s var ( - - ease-out ) both ;
}
/* ══════════════════════════════════════════════════════════════════════
FLAVOUR STEP
══════════════════════════════════════════════════════════════════════ */
. flavour-grid {
display : grid ;
grid-template-columns : repeat ( auto - fill , minmax ( 260 px , 1 fr ) ) ;
gap : 1 rem ;
margin-top : 0.5 rem ;
}
. flavour-card {
background : var ( - - clr - surface ) ;
border : 1 px solid var ( - - clr - border ) ;
border-radius : var ( - - radius - lg ) ;
padding : 1.5 rem ;
cursor : pointer ;
transition :
border-color 0.2 s var ( - - ease-out ) ,
box-shadow 0.2 s var ( - - ease-out ) ,
background 0.2 s var ( - - ease-out ) ;
position : relative ;
overflow : hidden ;
}
. flavour-card :: before {
content : '' ;
position : absolute ;
inset : 0 ;
background : linear-gradient ( 135 deg , var ( - - clr - accent - glow ) 0 % , transparent 60 % ) ;
opacity : 0 ;
transition : opacity 0.25 s var ( - - ease-out ) ;
border-radius : inherit ;
}
. flavour-card : hover {
border-color : var ( - - clr - border - hi ) ;
box-shadow : 0 0 0 1 px var ( - - clr - border - hi ) , 0 4 px 20 px rgba ( 0 , 0 , 0 , 0.4 ) ;
}
. flavour-card : hover :: before {
opacity : 0.5 ;
}
. flavour-card . selected {
border-color : var ( - - clr - accent ) ;
box-shadow : 0 0 0 1 px var ( - - clr - accent ) , 0 0 28 px var ( - - clr - accent - glow ) ;
background : var ( - - clr - surface -2 ) ;
}
. flavour-card . selected :: before {
opacity : 1 ;
}
. flavour-card h3 {
font-family : var ( - - font - mono ) ;
font-size : 0.95 rem ;
font-weight : 500 ;
color : var ( - - clr - text - hi ) ;
letter-spacing : 0.03 em ;
margin-bottom : 0.5 rem ;
}
. flavour-card . selected h3 {
color : var ( - - clr - accent ) ;
}
. flavour-card p {
font-size : 0.82 rem ;
color : var ( - - clr - text - mid ) ;
line-height : 1.5 ;
}
/* Staggered card entrance */
. flavour-card : nth-child ( 1 ) { animation : step-enter 0.45 s 0.1 s var ( - - ease-out ) both ; }
. flavour-card : nth-child ( 2 ) { animation : step-enter 0.45 s 0.18 s var ( - - ease-out ) both ; }
. flavour-card : nth-child ( 3 ) { animation : step-enter 0.45 s 0.26 s var ( - - ease-out ) both ; }
. flavour-card : nth-child ( 4 ) { animation : step-enter 0.45 s 0.34 s var ( - - ease-out ) both ; }
/* ══════════════════════════════════════════════════════════════════════
ACCOUNT STEP / FORM FIELDS
══════════════════════════════════════════════════════════════════════ */
. field-group {
margin-bottom : 1.4 rem ;
animation : step-enter 0.4 s var ( - - ease-out ) both ;
}
. field-group : nth-child ( 2 ) { animation-delay : 0.06 s ; }
. field-group : nth-child ( 3 ) { animation-delay : 0.12 s ; }
. field-group : nth-child ( 4 ) { animation-delay : 0.18 s ; }
. field-group label {
display : block ;
font-family : var ( - - font - mono ) ;
font-size : 0.72 rem ;
font-weight : 500 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
color : var ( - - clr - text - mid ) ;
margin-bottom : 0.4 rem ;
}
. field-group input [ type = "text" ] ,
. field-group input [ type = "password" ] {
width : 100 % ;
background : var ( - - clr - surface ) ;
border : 1 px solid var ( - - clr - border ) ;
border-radius : var ( - - radius - sm ) ;
padding : 0.65 rem 0.9 rem ;
font-family : var ( - - font - mono ) ;
font-size : 0.9 rem ;
color : var ( - - clr - text - hi ) ;
outline : none ;
transition :
border-color 0.2 s var ( - - ease-out ) ,
box-shadow 0.2 s var ( - - ease-out ) ;
}
. field-group input : focus {
border-color : var ( - - clr - accent ) ;
box-shadow : 0 0 0 3 px var ( - - clr - accent - glow ) ;
}
. field-group input :: placeholder {
color : var ( - - clr - text - lo ) ;
font-style : italic ;
}
. field-error {
display : block ;
font-family : var ( - - font - mono ) ;
font-size : 0.72 rem ;
color : var ( - - clr - warn ) ;
margin-top : 0.3 rem ;
}
/* ══════════════════════════════════════════════════════════════════════
PREFS STEP
══════════════════════════════════════════════════════════════════════ */
. prefs-list {
display : flex ;
flex-direction : column ;
gap : 0.75 rem ;
}
. pref-item {
background : var ( - - clr - surface ) ;
border : 1 px solid var ( - - clr - border ) ;
border-radius : var ( - - radius - md ) ;
padding : 0.9 rem 1.1 rem ;
animation : step-enter 0.4 s var ( - - ease-out ) both ;
}
. pref-item : nth-child ( 2 ) { animation-delay : 0.07 s ; }
. pref-item : nth-child ( 3 ) { animation-delay : 0.14 s ; }
. pref-item label {
display : flex ;
align-items : center ;
gap : 0.75 rem ;
cursor : pointer ;
font-size : 0.88 rem ;
color : var ( - - clr - text - hi ) ;
}
. pref-item input [ type = "checkbox" ] {
width : 1 rem ;
height : 1 rem ;
accent-color : var ( - - clr - accent ) ;
cursor : pointer ;
flex-shrink : 0 ;
}
. pref-item small {
font-family : var ( - - font - mono ) ;
font-size : 0.72 rem ;
color : var ( - - clr - text - lo ) ;
}
/* ══════════════════════════════════════════════════════════════════════
APPLY STEP
══════════════════════════════════════════════════════════════════════ */
. apply-step {
display : flex ;
flex-direction : column ;
gap : 2 rem ;
min-height : 40 vh ;
}
. apply-header h1 {
font-size : 1.7 rem ;
}
/* Ready state */
. apply-ready {
background : var ( - - clr - surface ) ;
border : 1 px solid var ( - - clr - border ) ;
border-radius : var ( - - radius - lg ) ;
padding : 2 rem ;
text-align : center ;
animation : step-enter 0.4 s 0.1 s var ( - - ease-out ) both ;
}
. apply-ready-text {
color : var ( - - clr - text - mid ) ;
font-size : 0.9 rem ;
margin-bottom : 1.5 rem ;
}
. btn-start {
min-width : 140 px ;
}
/* Progress state */
. apply-progress-container {
animation : step-enter 0.35 s var ( - - ease-out ) both ;
}
. apply-stage-label {
font-family : var ( - - font - mono ) ;
font-size : 0.8 rem ;
color : var ( - - clr - accent ) ;
letter-spacing : 0.04 em ;
margin-bottom : 0.6 rem ;
}
. apply-progress-track {
width : 100 % ;
height : 6 px ;
background : var ( - - clr - surface -2 ) ;
border-radius : 99 px ;
overflow : hidden ;
border : 1 px solid var ( - - clr - border ) ;
}
. apply-progress-bar {
height : 100 % ;
background : linear-gradient ( 90 deg , var ( - - clr - accent ) 0 % , var ( - - clr - success ) 100 % ) ;
border-radius : 99 px ;
transition : width 0.4 s var ( - - ease-out ) ;
box-shadow : 0 0 10 px var ( - - clr - accent - glow ) ;
}
. apply-percent-label {
font-family : var ( - - font - mono ) ;
font-size : 0.72 rem ;
color : var ( - - clr - text - lo ) ;
text-align : right ;
margin-top : 0.3 rem ;
}
/* Complete state */
. apply-complete {
display : flex ;
align-items : center ;
gap : 0.75 rem ;
background : rgba ( 0 , 229 , 160 , 0.08 ) ;
border : 1 px solid var ( - - clr - success ) ;
border-radius : var ( - - radius - md ) ;
padding : 1 rem 1.25 rem ;
animation : step-enter 0.4 s var ( - - ease-out ) both ;
}
. apply-complete-icon {
font-size : 1.4 rem ;
color : var ( - - clr - success ) ;
line-height : 1 ;
}
. apply-complete p {
color : var ( - - clr - success ) ;
font-family : var ( - - font - mono ) ;
font-size : 0.85 rem ;
}
/* Error state */
. apply-error {
background : rgba ( 245 , 166 , 35 , 0.07 ) ;
border : 1 px solid var ( - - clr - warn ) ;
border-radius : var ( - - radius - md ) ;
padding : 1.5 rem ;
display : flex ;
flex-direction : column ;
gap : 0.6 rem ;
animation : step-enter 0.35 s var ( - - ease-out ) both ;
}
. apply-error-icon {
font-size : 1.5 rem ;
color : var ( - - clr - warn ) ;
line-height : 1 ;
}
. apply-error-title {
font-family : var ( - - font - mono ) ;
font-size : 0.85 rem ;
font-weight : 500 ;
color : var ( - - clr - warn ) ;
}
. apply-error-detail {
font-family : var ( - - font - mono ) ;
font-size : 0.78 rem ;
color : var ( - - clr - text - mid ) ;
margin-bottom : 0.5 rem ;
word-break : break-word ;
}
. btn-retry {
align-self : flex-start ;
}
/* ══════════════════════════════════════════════════════════════════════
DONE STEP
══════════════════════════════════════════════════════════════════════ */
. done-step {
display : flex ;
flex-direction : column ;
align-items : center ;
text-align : center ;
justify-content : center ;
min-height : 50 vh ;
gap : 1.5 rem ;
}
. done-step h1 {
background : linear-gradient ( 90 deg , var ( - - clr - success ) 0 % , var ( - - clr - accent ) 100 % ) ;
background-clip : text ;
-webkit- background-clip : text ;
-webkit- text-fill-color : transparent ;
font-size : 2.2 rem ;
}
. done-step p {
color : var ( - - clr - text - mid ) ;
max-width : 440 px ;
font-size : 0.92 rem ;
}
. btn-restart {
min-width : 160 px ;
background : linear-gradient ( 90 deg , var ( - - clr - accent ) , var ( - - clr - success ) ) ;
color : var ( - - clr - void ) ;
font-weight : 500 ;
}
. btn-restart : hover : not ( : disabled ) {
box-shadow : 0 0 28 px rgba ( 0 , 229 , 160 , 0.25 ) , 0 0 18 px var ( - - clr - accent - glow ) ;
opacity : 0.92 ;
}
/* ── Accessibility / focus safety ───────────────────────────────────── */
@ media ( prefers-reduced-motion : reduce ) {
. step ,
. step h1 ,
. step-subtitle ,
. welcome-hero ,
. welcome-hero h1 ,
. tagline ,
. time-estimate ,
. flavour-card ,
. field-group ,
. pref-item ,
. apply-progress-container ,
. apply-ready ,
. apply-complete ,
. apply-error {
animation : none !important ;
transition : none !important ;
}
}
/* ── MAUI layout safety ─────────────────────────────────────────────── */
. status-bar-safe-area {
display : none ;
}
@@ -77,7 +770,7 @@ h1:focus {
position : sticky ;
top : 0 ;
height : env ( safe - area - inset - top ) ;
background-color : #f7f7f7 ;
background-color : var ( - - clr - void ) ;
width : 100 % ;
z-index : 1 ;
}