/* Global site variables (inspired by root mystyle.css, slightly lighter) */
:root{
    --maxw: 1100px;
    --pad: 16px;

    --bg: #e6f4ff; /* slightly darker outer background */
    --surface: #ffffff;
    --text: #16202b;
    --muted: #5b6475;

    --brand: #4a9eff;    /* friendly accent */
    --accent: #6db3ff;   /* lighter accent for this page */
    --border: #e9f0fb;

    --radius: 12px;
    --shadow: 0 10px 28px rgba(16,24,40,.06);
    --content-surface: #c8eaff; /* one more shade darker */
    --panel-bg: #5d90d8;        /* shared panel background */
}


*{ box-sizing: border-box; }
body{font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); margin:0}
.site-header #header{background: linear-gradient(180deg, #1b4b78 0%, #2a6aa0 100%); padding:1rem 0}
.site-header h1{margin:0; font-size:1.5rem; color:#fff}
.site-content{background-color:var(--content-surface); padding:1rem 0; margin-top:1rem; border-radius:var(--radius)}
/* Panel background options — change the active number to pick a shade:
   1: #b8d8f5   (light steel blue)
   2: #9dc3ee   (medium-light blue)
   3: #7eaae4   (medium blue)
   4: #5d90d8   (deeper blue)
   5: #3a74c8   (dark blue)                                             */
.menu-panel,.results-panel{background-color:var(--panel-bg); border-radius:var(--radius); padding:0.5rem}
.menu-panel{min-height:700px; width:100%; text-align:center}
.spacer-20{height:20px}
.spacer-15{height:15px}
.spacer-10{height:10px}
.canvas-wrap{padding-left:0.5rem}
.canvas-box{display:block; position:relative; height:300px; width:100%; max-width:320px; margin:0 auto; background-color:rgb(200,200,245)}
.site-footer{background: linear-gradient(180deg, #1b4b78 0%, #2a6aa0 100%); clear:both; padding:1rem 0; margin-top:1rem; color:#fff}

/* Responsive tweaks */
@media (max-width:767px){
    .menu-panel{min-height:auto}
    .canvas-box{max-width:100%; height:200px}
}

/* Button green options — change the active number to pick a shade:
   1: #34c759   (bright iOS green)
   2: #28a745   (Bootstrap success green)
   3: #1e9438   (medium-deep green)
   4: #17802e   (deep green)
   5: #0f6623   (forest green)                                          */
.btn-primary{background-color:#34c759; border-color:#34c759; color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:#28b34d; border-color:#28b34d; color:#fff}
.btn-outline-primary{color:#34c759; border-color:#34c759}
.btn-outline-primary:hover,.btn-check:checked+.btn-outline-primary{background-color:#34c759; border-color:#34c759; color:#fff}

/* Small form input tweaks */
input[readonly]{background:#fff}
input[type="text"]{width:80%; margin:0.3rem auto}