/* CarnetFlow web app (login + dashboard) */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,system-ui,'Segoe UI',sans-serif;color:#37352f;background:#f7f6f3;line-height:1.5}
.serif{font-family:'Source Serif 4',Georgia,serif}
a{color:#b5654a}

/* top bar */
.appbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(55,53,47,.08)}
.appbar .wrap{max-width:960px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#37352f}
.brand .logo{width:28px;height:28px;border-radius:7px;background:#b5654a;display:flex;align-items:center;justify-content:center;font:600 15px 'Source Serif 4',serif;color:#fff}
.brand span{font:600 18px 'Source Serif 4',serif}
.appbar .right{display:flex;align-items:center;gap:14px}
.appbar .email{font:500 13px -apple-system;color:#9b9a97;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;border-radius:9px;font:600 14px -apple-system;text-decoration:none}
.btn-dark{background:#191918;color:#fff;padding:11px 18px}
.btn-green{background:#b5654a;color:#fff;padding:12px 18px}
.btn-ghost{background:#fff;color:#37352f;border:1px solid rgba(55,53,47,.16);padding:9px 14px}
.btn:disabled{opacity:.55;cursor:default}

/* layout */
.page{max-width:960px;margin:0 auto;padding:34px 24px 80px}
h1.title{font:600 30px 'Source Serif 4',serif;letter-spacing:-.01em;margin-bottom:4px}
.sub{font:500 14px -apple-system;color:#9b9a97;margin-bottom:26px}
.section-label{font:600 12px -apple-system;letter-spacing:.06em;text-transform:uppercase;color:#9b9a97;margin:30px 0 12px}
.card{background:#fff;border:1px solid rgba(55,53,47,.1);border-radius:16px}

/* stat grid */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:#fff;border:1px solid rgba(55,53,47,.1);border-radius:16px;padding:16px 16px}
.stat .num{font:600 27px 'Source Serif 4',serif;color:#b5654a;line-height:1}
.stat .lbl{font:500 12px -apple-system;color:#6b6a66;margin-top:6px}

/* readiness */
.bar{height:8px;border-radius:99px;background:#ecebe7;overflow:hidden;margin-top:10px}
.bar > i{display:block;height:100%;border-radius:99px;background:#b5654a}

/* topic rows */
.topic{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid rgba(55,53,47,.07)}
.topic:last-child{border-bottom:none}
.topic .name{flex:1;font:600 14px -apple-system;color:#37352f}
.topic .meta{font:500 12.5px -apple-system;color:#9b9a97;white-space:nowrap}
.topic .tbar{width:120px;height:6px;border-radius:99px;background:#ecebe7;overflow:hidden}
.topic .tbar > i{display:block;height:100%;background:#57755f}

/* attempts */
.attempt{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid rgba(55,53,47,.07)}
.attempt:last-child{border-bottom:none}
.attempt .date{width:96px;font:500 13px -apple-system;color:#6b6a66}
.attempt .score{font:600 15px 'Source Serif 4',serif;color:#37352f}
.attempt .acc{font:500 12.5px -apple-system;color:#9b9a97;margin-left:auto}
.badge{font:700 11.5px -apple-system;border-radius:99px;padding:4px 11px}
.badge.pass{color:#57755f;background:#e7ede9}
.badge.fail{color:#b5573f;background:#f6e4dd}

.empty{padding:22px 16px;font:500 13.5px -apple-system;color:#9b9a97}
.muted{color:#9b9a97}

/* login — split brand + form */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{background:linear-gradient(150deg,#2b2f35,#40454c);color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brand .abtop{display:flex;align-items:center;gap:10px}
.auth-brand .ablogo{width:34px;height:34px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;font:600 18px 'Source Serif 4',serif;color:#b5654a}
.auth-brand .abname{font:600 20px 'Source Serif 4',serif;color:#fff}
.auth-brand h2{font:600 34px/1.2 'Source Serif 4',serif;margin:0 0 12px;max-width:15ch}
.auth-brand .lead{font:400 15px -apple-system;color:#c4c8ce;line-height:1.6;max-width:34ch}
.vbullets{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.vbullets li{display:flex;align-items:flex-start;gap:11px;font:500 14.5px -apple-system;color:#f1e8e3}
.vbullets .ck{width:22px;height:22px;border-radius:50%;background:rgba(127,201,155,.22);color:#a9d3b8;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px}
.auth-brand .abfoot{font:600 11px -apple-system;letter-spacing:.08em;text-transform:uppercase;color:#8a9098}
.auth-form{display:flex;align-items:center;justify-content:center;padding:24px}
.auth-form .login-card{box-shadow:none;border:none;max-width:360px}
.auth-form .card-brand{display:none}
@media (max-width:860px){ .auth{grid-template-columns:1fr} .auth-brand{display:none} .auth-form .login-card{border:1px solid rgba(55,53,47,.1);box-shadow:0 20px 50px -24px rgba(40,40,30,.28)} .auth-form .card-brand{display:flex} }
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid rgba(55,53,47,.1);border-radius:20px;padding:30px 26px;box-shadow:0 20px 50px -24px rgba(40,40,30,.28)}
.login-card h1{font:600 24px 'Source Serif 4',serif;text-align:center;margin-bottom:4px}
.login-card .hint{text-align:center;font:500 13.5px -apple-system;color:#9b9a97;margin-bottom:22px}
/* social sign-in (matches the app: Google + Apple) */
.social{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.sbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;border:1px solid rgba(55,53,47,.18);background:#fff;color:#37352f;border-radius:10px;font:600 14.5px -apple-system;cursor:pointer}
.sbtn:hover{background:#faf9f6}
.sbtn-apple{background:#000;border-color:#000;color:#fff}
.sbtn-apple:hover{background:#161616}
.sbtn:disabled{opacity:.6;cursor:default}
.ordiv{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:#9b9a97;font:500 12px -apple-system;white-space:nowrap}
.ordiv:before,.ordiv:after{content:"";flex:1;height:1px;background:rgba(55,53,47,.12)}
.field{margin-bottom:12px}
.field label{display:block;font:600 12.5px -apple-system;color:#6b6a66;margin-bottom:5px}
.field input{width:100%;border:1px solid rgba(55,53,47,.16);border-radius:10px;padding:11px 12px;font:500 15px -apple-system;color:#37352f;background:#fff}
.field input:focus{outline:none;border-color:#b5654a}
.err{color:#b5573f;font:500 13px -apple-system;margin:6px 0 0;min-height:18px}
.rowlinks{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font:500 13px -apple-system}
.rowlinks a{cursor:pointer}

@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .topic .tbar{width:70px}
}