static/css/main.css

/* static/css/main.css - full CSS tokens and styles (light theme) */
:root{
  --bg: #ffffff;             /* Primary background */
  --bg-surface: #F5F7FA;     /* Cards / surfaces */
  --divider: #E6E9EE;
  --text-primary: #111111;
  --text-secondary: #52575C;
  --text-muted: #8D9095;
  --accent: #336699;         /* deep muted blue */
  --muted-teal: #2A7F7F;
  --error: #E53935;
  --radius: 10px;
  --space: 16px;
}

/* base layout */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; background:var(--bg); color:var(--text-primary); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.container{padding:var(--space); margin:0 auto;}
.container.narrow{max-width:420px}

/* Cards & stacks */
.card{background:var(--bg-surface); border-radius:var(--radius); padding:14px; box-shadow: 0 6px 18px rgba(17,17,17,0.03); margin-bottom:12px;}
.stack > * + *{margin-top:10px}
.input-label{font-size:13px; color:var(--text-secondary); margin-bottom:6px; display:block;}
.input{width:100%; padding:12px; border-radius:8px; border:1px solid var(--divider); background:white; font-size:15px; color:var(--text-primary)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 6px 16px rgba(51,102,153,0.06)}

/* Buttons */
.btn{font-family:Inter, sans-serif; padding:10px 12px; border-radius:10px; border:1px solid transparent; font-weight:600; cursor:pointer; display:inline-block}
.btn.large{padding:12px 16px; font-size:16px}
.btn.primary{background:var(--accent); color:white}
.btn.outline{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn[disabled]{opacity:0.5; cursor:not-allowed}

/* small utilities */
.small{font-size:13px}
.mini{font-size:13px;color:var(--text-secondary)}

/* modal (basic) */
.modal{position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:18px; background:linear-gradient(transparent, rgba(0,0,0,0.12)); transition:opacity .25s; z-index:40}
.modal-inner{width:100%; max-width:420px; background:var(--bg); border-radius:14px; padding:16px; box-shadow:0 20px 50px rgba(17,17,17,0.12)}

/* simple icons fallback */
.control-btn{border:none; background:transparent; font-size:15px; color:var(--text-primary); padding:10px}
.control-btn.primary{border-radius:12px}

/* tiny animations */
.fade-in{animation:fadeIn .28s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}