:root{
  --red:#db0007; --yellow:#ffbc0d; --green:#0b3d1b; --ink:#202124;
  --muted:#6c7177; --line:#e8dfd6; --bg:#f7f3eb; --white:#fff;
  --shadow:0 18px 50px rgba(32,33,36,.12); --radius:24px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter,Arial,sans-serif;color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0}
.app{display:grid;grid-template-columns:285px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.brand img{width:56px;height:56px;border-radius:18px;object-fit:cover}
.brand strong{display:block;font-size:19px;font-weight:900;letter-spacing:-.04em}
.brand small{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;margin-top:4px}
.sidebar nav{display:grid;gap:8px}
.sidebar nav button{height:48px;border-radius:16px;background:#f8f4ed;color:#413b35;text-align:left;padding:0 16px;font-weight:900}
.sidebar nav button.active{background:var(--green);color:#fff}
.side-card{margin-top:auto;background:linear-gradient(150deg,var(--green),#063012);color:#fff;border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.side-card strong{font-size:18px}
.side-card p{color:#dce9df;line-height:1.5}
main{padding:22px;min-width:0}
.topbar{height:74px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:22px;z-index:5}
.topbar strong{display:block;font-size:18px;font-weight:900}
.topbar small{display:block;color:var(--muted);margin-top:2px}
.pill,.score{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;border-radius:999px;background:#fff3cf;color:#4a3600;font-weight:900}
.hidden{display:none!important}
.login-card{width:min(460px,100%);margin:80px auto;background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:var(--shadow);text-align:center}
.login-card img{width:88px;height:88px;object-fit:cover;border-radius:24px;margin:0 auto 16px}
.login-card h1,.hero h1{font-size:clamp(34px,5vw,58px);line-height:.98;letter-spacing:-.07em;margin:10px 0}
.login-card p,.hero p{color:var(--muted);line-height:1.6}
label{display:grid;gap:7px;color:#3d3732;font-size:13px;font-weight:900;text-align:left}
input,select,textarea{width:100%;min-height:46px;border:1px solid #ddd3c8;border-radius:14px;background:#fff;padding:12px 14px;outline:0}
textarea{min-height:118px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,188,13,.22)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;font-weight:900;margin-top:16px}
.btn.red{background:var(--red);color:#fff}
.btn.yellow{background:var(--yellow);color:#211800}
.message{min-height:22px;color:var(--red);font-weight:900}
.hero{margin-top:22px;background:linear-gradient(135deg,var(--yellow),#ffe08a);border-radius:32px;padding:36px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}
.hero.small{background:linear-gradient(135deg,var(--green),#0e5728);color:#fff}
.hero.small p{color:#e1eee4}
.eyebrow{display:inline-flex;min-height:28px;align-items:center;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.7);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--green)}
.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
.panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.panel h2{margin:0 0 18px;font-size:24px;letter-spacing:-.04em}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.wide,.full{grid-column:1/-1}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
#checklist{display:grid;gap:12px}
.check-item{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fffaf2}
.check-top{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:start}
.check-item strong{line-height:1.45}
.toggle{display:flex;gap:8px}
.toggle button{min-width:68px;height:36px;border-radius:999px;background:#eee7dd;font-weight:900}
.toggle button.active.ok{background:#dff4e6;color:#086128}
.toggle button.active.no{background:#ffe1e1;color:#b00005}
.reason{margin-top:12px}
.result{margin-top:18px;border-radius:18px;background:#f3fbf5;border:1px solid #c9ebd2;padding:18px;color:#114c25;font-weight:800;line-height:1.5}
@media(max-width:980px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.form-grid{grid-template-columns:1fr}.topbar{top:0;border-radius:0;margin:-22px -22px 0}.hero{border-radius:22px}.login-card{margin:40px auto}}


/* V2 dark professional theme */
:root{
  --red:#b90005;
  --yellow:#ffbc0d;
  --green:#062514;
  --ink:#f7f4ef;
  --muted:#c9c1b7;
  --line:rgba(255,255,255,.13);
  --bg:#141414;
  --white:#242424;
  --shadow:0 22px 70px rgba(0,0,0,.38);
}
body{
  background:
    radial-gradient(circle at 15% 0%, rgba(255,188,13,.10), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(185,0,5,.10), transparent 25%),
    #141414;
  color:#f7f4ef;
}
.sidebar{background:#1f1f1f;border-right:1px solid var(--line)}
.brand{color:#fff}
.brand small,.topbar small,.hero p,.side-card p,.login-card p{color:#c9c1b7}
.sidebar nav button{background:#2d2d2d;color:#f7f4ef}
.sidebar nav button.active{background:#063b1d;color:#fff}
.side-card{background:linear-gradient(145deg,#062514,#0b3d1b);border:1px solid rgba(255,255,255,.12)}
.topbar,.login-card,.panel{background:rgba(31,31,31,.92);border:1px solid var(--line);color:#f7f4ef}
.pill,.score{background:#312b1a;color:#ffdc75}
.hero{background:linear-gradient(135deg,#242424,#1b1b1b);border:1px solid var(--line)}
.hero h1,.login-card h1{color:#fff}
.eyebrow{background:#332b15;color:#ffcf55}
label{color:#f2ede7}
input,select,textarea{background:#171717;color:#fff;border:1px solid rgba(255,255,255,.18)}
input::placeholder,textarea::placeholder{color:#81796f}
.panel h2{color:#fff}
.check-item{background:#1a1a1a;border:1px solid rgba(255,255,255,.14)}
.check-item.unanswered{border-color:rgba(255,188,13,.35)}
.toggle button{background:#303030;color:#e8e0d8}
.toggle button.active.ok{background:#0f6b35;color:#fff}
.toggle button.active.no{background:#b90005;color:#fff}
.reason-preview{margin-top:12px;padding:12px 14px;border-radius:14px;background:#2a1717;border:1px solid rgba(219,0,7,.35);color:#ffd7d7;font-weight:800}
.result{background:#102818;border-color:#235c35;color:#d8ffe3}
.btn.red{background:#b90005;color:#fff}
.btn.yellow{background:#ffbc0d;color:#201700}
.message{color:#ffb4b4}


/* V3 polished mobile + inline comments */
.brand img,
.login-card img {
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 18px !important;
}

.inline-reason {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  background: rgba(185,0,5,.12);
  border: 1px solid rgba(219,0,7,.35);
  border-radius: 16px;
  padding: 14px;
}

.inline-reason textarea {
  min-height: 92px;
  border-radius: 14px;
}

.toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 220px;
}

.toggle button {
  min-height: 42px;
  border-radius: 14px;
  font-size: 14px;
}

.sidebar nav button.locked {
  opacity: .72;
}

.mobile-menu,
.sidebar-overlay {
  display: none;
}

@media(max-width: 980px) {
  .mobile-menu {
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 80;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: #ffbc0d;
    color: #1d1600;
    box-shadow: 0 18px 45px rgba(0,0,0,.38);
    font-size: 24px;
    font-weight: 900;
  }

  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 90;
    width: min(86vw, 320px);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(3px);
  }

  .app {
    display: block !important;
  }

  main {
    padding: 14px !important;
  }

  .topbar {
    margin: 0 !important;
    top: 10px !important;
    border-radius: 20px !important;
    min-height: 76px;
    height: auto;
    padding: 16px !important;
  }

  .topbar small {
    display: block;
    margin-top: 4px;
  }

  .hero {
    margin-top: 14px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  .hero h1,
  .login-card h1 {
    font-size: 34px !important;
  }

  .panel {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .check-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .toggle {
    width: 100%;
    min-width: 0;
  }

  .toggle button {
    min-height: 48px;
  }

  .check-item {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .section-head {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .score {
    width: 100%;
  }

  .login-card {
    margin: 34px auto !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }
}

@media(max-width: 520px) {
  body {
    font-size: 14px;
  }

  .topbar {
    padding-right: 74px !important;
  }

  .topbar strong {
    font-size: 16px;
  }

  .sidebar {
    width: 88vw;
    padding: 18px;
  }

  .brand strong {
    font-size: 17px;
  }

  .brand img {
    width: 50px !important;
    height: 50px !important;
  }

  .hero h1,
  .login-card h1 {
    font-size: 30px !important;
    line-height: 1.05;
  }

  .btn {
    width: 100%;
  }
}