:root{
  --eggshell:#F7F5EE;
  --paper:#FBFAF6;
  --ink:#1E1C16;
  --muted:#6B5E4E;
  --accent:#E4572E;
  --accent2:#F2A65A;
  --gold:#B88E2A;
  --red:#C74D36;
  --ok:#2F855A;
  --cardShadow: 0 10px 30px rgba(0,0,0,0.08);
  --line: 1px solid rgba(0,0,0,0.08);
}
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; background: radial-gradient(1200px 600px at 50% -10%, #FFF 0%, var(--eggshell) 60%); color: var(--ink); }
a{ color: var(--accent); text-decoration: none; }

.header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; background: var(--paper); border: var(--line); border-radius:14px; box-shadow: var(--cardShadow); margin: 22px auto 0; max-width: 1100px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:36px; height:36px; border-radius:8px; border: var(--line); background:#fff; }
.brand h1{ font-size:20px; margin:0; letter-spacing:.5px; text-transform: uppercase; }
.badge{ font-size:12px; padding:4px 10px; border-radius:999px; border: var(--line); color: var(--muted); background: #fff; }

.container{ max-width:1100px; margin: 0 auto; padding: 18px; }

.menu{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-top: 24px; }
.tile{ position:relative; background: linear-gradient(180deg, #FFFFFF, var(--paper)); border: var(--line); border-radius:16px; padding:22px; min-height: 200px; box-shadow: var(--cardShadow); transition: transform .08s ease, box-shadow .2s ease; }
.tile:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.tile h2{ margin: 0 0 8px 0; letter-spacing: .4px; }
.tile p{ margin: 0; color: var(--muted); line-height: 1.4; }
.tile .cta{ position:absolute; bottom: 16px; left: 22px; display:flex; gap:10px; align-items:center; }

.btn{ background:#fff; border: var(--line); color:var(--ink); padding:10px 14px; border-radius:10px; cursor:pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.06); }
.btn.gold{ background: #FFF7E6; border-color:#E9D3A0; }
.btn.red{ background:#FFEDE9; border-color:#F2C6BA; }
.btn.lang{ background:#fff; }

.status{ display:inline-flex; align-items:center; gap:8px; font-weight:600; padding:6px 10px; border-radius:999px; border: var(--line); background:#fff; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.gold{ background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.dot.red{ background: var(--red); box-shadow: 0 0 6px var(--red); }

.flagGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:20px; }
.flagBtn{ background:#fff; border: var(--line); border-radius:12px; padding:12px; cursor:pointer; display:flex; align-items:center; gap:12px; box-shadow: var(--cardShadow); }
.flagBtn img{ width:36px; height:24px; object-fit:cover; border-radius:4px; border: var(--line); }
.flagBtn .big{ font-size:16px; font-weight:700; }

.card{ background: linear-gradient(180deg, #FFFFFF, var(--paper)); border: var(--line); border-radius:14px; padding:18px; box-shadow: var(--cardShadow); margin-top: 18px; }
.q{ font-weight:700; margin: 0 0 12px 0; }
.ribbon{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; border: var(--line); background:#fff; color: var(--muted); font-size:12px; }
.r-ownership{ background: #FFF0EB; color:#9a3e27; border-color:#F2C6BA; }
.r-team{ background: #EFF8FF; color:#1b4a7a; border-color:#CDE4F5; }
.r-risk{ background: #FFF7E6; color:#7a530f; border-color:#E9D3A0; }
.r-customer{ background:#EEF9F1; color:#1b6a44; border-color:#CBE8D1; }

.opts{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.opt{ background:#fff; border: var(--line); border-radius:10px; padding:10px; cursor:pointer; }
.opt.correct{ border-color: #7bc47f; background:#F4FBF5; }
.opt.incorrect{ border-color: #E6B0A6; background:#FFF4F1; }
.feedback{ margin-top:10px; color: var(--ink); }
.toolbar{ display:flex; gap:10px; margin-top:12px; flex-wrap: wrap; }
.score{ font-size:13px; color: var(--muted); }

.tape{ position:absolute; top:16px; right:-20px; transform: rotate(6deg); background: repeating-linear-gradient( -45deg, #222, #222 12px, var(--accent2) 12px, var(--accent2) 24px ); color:#fff; font-weight:700; letter-spacing:.5px; padding:6px 14px; border-radius:6px; border: var(--line); box-shadow: var(--cardShadow); }
.cones{ position:absolute; right:18px; bottom:12px; display:flex; gap:8px; opacity: .95; }
.cone{ width: 28px; height: 28px; background: linear-gradient(180deg, #fff7, var(--accent2)); border: var(--line); border-bottom-width:6px; border-radius: 4px 4px 2px 2px; position:relative; transform: rotate(-6deg); }
.cone::after{ content:''; position:absolute; top:8px; left:5px; right:5px; height:6px; background:#fff8; border-radius:2px; }

.metaBar{ display:flex; gap:12px; flex-wrap:wrap; justify-content: space-between; align-items:center; }
.nameBox{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nameBox input, .nameBox select{ padding:8px 10px; border-radius:8px; border: var(--line); background:#fff; }

.badgeRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.badgeAvatar{ font-size:22px; }
.badgeFlag{ font-size:18px; }
.badgeTier{ font-size:12px; color:var(--muted); }

.progressBar{ display:flex; gap:8px; align-items:center; margin:6px 0; }
.progressTrack{ flex:1; height:10px; border: var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.progressFill{ height:100%; background:#F2A65A; }