/*1. Vars
   2. Global reset
   3. Backgrounds per page
   4. Card + accent line
   5. Step-specific tweaks
   6. Headings
   7. Textarea
   8. Buttons  (primary + secondary)
   9. Radios / notice
   10. Fade-in animation */
 /* 1. reusable values */
:root{
    --radius:      8px;
    --speed:       .25s;
    --shadow-sm:   0 2px 4px rgba(0,0,0,.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,.12);
    --btn-bg:      #1c7cd6;
    --btn-bg-hov:  #1467b4;
    --btn-text:    #fff;
}
/* 2. base style */
body{
    font-family: Arial, Helvetica, sans-serif;
    margin:0; line-height:1.55;
    -webkit-font-smoothing: antialiased;
}

/* 3. page backgrounds */
body.step1{ background:linear-gradient(135deg,#f2f2f2,#fafafa); }
body.step2{ background:linear-gradient(135deg,#e9eef4,#f8fafc); }
body.step3{ background:linear-gradient(135deg,#edf3f8,#f9fcff); }

/* 4. main card + colour strip */
#box{
    width:90%; max-width:760px; margin:48px auto; padding:32px;
    background:var(--white); border:1px solid rgba(0,0,0,.1);
    border-radius:var(--r); box-shadow:var(--sh-sm);
    position:relative; animation:fadeIn .5s ease-out both;
}
#box::before{               /* top colour bar */
    content:''; position:absolute; top:0; left:0; right:0; height:6px;
    border-top-left-radius:inherit; border-top-right-radius:inherit;
    background:#777;
}
body.step1 #box::before{background:#4caf50;}
body.step2 #box::before{background:#ff9800;}
body.step3 #box::before{background:#2196f3;}

/* 5. small per-step tweaks */
body.step2 #box, body.step3 #box{ padding:28px; }
body.step3 #box{ border-color:rgba(0,0,0,.2); }

/* 6. headings */
h1{ margin:0 0 10px; font-size:28px; color:#222; }
h2{ margin:0 0 10px; font:italic 18px/1 Arial; color:#444; }

/* 7. textarea */
textarea{
    width:100%; height:280px; resize:vertical;
    font:14px/1.4 Consolas,monospace;
    padding:10px 12px; border-radius:var(--r);
    box-sizing:border-box; background:#fdfdfd;
    border:1px solid #ccd1d6; transition:border-color var(--t);
}
textarea:focus{
    outline:none; border-color:#4caf50;
    box-shadow:0 0 0 3px rgba(76,175,80,.2);
}
body.step3 textarea{ border-color:#b0b6bc; }

/* 8. buttons */
.btn{
    margin-top:18px; padding:8px 22px;
    font-size:15px; color:var(--white);
    background:var(--btn); border:none; border-radius:var(--r);
    cursor:pointer;
    transition:background var(--t),box-shadow var(--t),transform var(--t);
}
.btn:hover{ background:var(--btn-h); box-shadow:var(--sh-md); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(28,124,214,.35); }

.btn--secondary{ background:#6c757d; }
.btn--secondary:hover{ background:#5c646b; }
.btn--secondary:focus{ box-shadow:0 0 0 3px rgba(108,117,125,.35); }

/* 9. radios & warning */
label{ display:block; margin:6px 0; font-size:17px; cursor:pointer; }
label input{ margin-right:6px; }
.notice{ color:#d32f2f; font-weight:600; margin:0 0 14px; }

/* 10. fade-in */
@keyframes fadeIn{
    from{ opacity:0; transform:translateY(12px); }
    to  { opacity:1; transform:translateY(0); }
}