:root{
  --bg: #FCF7F2;
  --surface: #F5ECE4;
  --surface-2: #EFE4DA;
  --primary: #6D4C41; /* warm brown */
  --primary-600: #5D4037;
  --accent: #A26A42; /* cinnamon */
  --text: #3E2723; /* dark coffee */
  --muted: #8D6E63; /* latte */
  --success: #2E7D32;
  --warning: #B26A00;
  --danger: #8E2828;
  --ring: #C48A6A;
  --shadow: 0 10px 30px rgba(61, 39, 35, 0.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

.br-header{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 20px;
  background: linear-gradient(180deg, #fff8f1e0, transparent), var(--bg);
  border-bottom: 1px solid var(--surface-2);
  backdrop-filter: blur(6px);
}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); font-weight:700; font-size:20px}
.brand-mark{display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--surface-2); border-radius:8px; box-shadow: var(--shadow)}
.brand-name{letter-spacing:0.3px}

.br-nav{display:flex; gap:16px}
.nav-link{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px}
.nav-link:focus-visible, .nav-link:hover{outline: 3px solid var(--ring); outline-offset:2px; background:var(--surface)}

.br-app{max-width: 1100px; margin: 0 auto; padding: 24px}

.hero{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items:center;
  padding: 36px; background: var(--surface); border:1px solid var(--surface-2); border-radius: 16px; box-shadow: var(--shadow)
}
.hero h1{margin:0 0 10px; font-size: 40px; line-height:1.15}
.hero p{margin:0 0 18px; color:var(--muted)}

.actions{display:flex; gap:12px; flex-wrap:wrap}
.button{
  appearance:none; cursor:pointer; border:none; 
  padding: 12px 16px; border-radius:12px; font-weight:600; letter-spacing:0.2px; 
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
}
.button.primary{background: var(--primary); color:white}
.button.primary:hover{background: var(--primary-600)}
.button.secondary{background: var(--surface); border:1px solid var(--surface-2); color:var(--text)}
.button.ghost{background: transparent; color: var(--primary);}
.button:focus-visible{outline: 3px solid var(--ring); outline-offset:3px}

.kicker{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; background:#FFF4EA; color:#8a4f25; border:1px solid #ffd9b9; border-radius:999px; font-weight:600; font-size:12px}

.panel{background: var(--surface); border:1px solid var(--surface-2); border-radius:14px; padding:16px}

.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}

.search-toolbar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.input, .select{
  background:white; border:1px solid var(--surface-2); border-radius:10px; padding:10px 12px; color:var(--text);
}
.input:focus-visible, .select:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.toggle{display:inline-flex; gap:10px; align-items:center; background:white; border:1px solid var(--surface-2); padding:8px 10px; border-radius:12px}

.card{background:white; border:1px solid var(--surface-2); border-radius:14px; padding:14px; display:flex; gap:12px; align-items:flex-start; box-shadow: var(--shadow)}
.avatar{width:56px; height:56px; border-radius:12px; background: linear-gradient(135deg, #EBD9CE, #F6EDE6); display:inline-grid; place-items:center; color:var(--primary); font-weight:800}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--surface-2); background:#fff}
.badge.verified{border-color:#d2efda; background:#f1fbf4; color:#176c2e}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--surface-2); color:var(--muted)}
.card-actions{margin-left:auto; display:flex; gap:8px}

.section-title{margin:10px 0; font-size:18px}
.muted{color:var(--muted)}
.divider{height:1px; background: var(--surface-2); margin:10px 0}

.timeline{display:grid; gap:10px}
.step{display:flex; gap:10px; align-items:center; padding:10px; border:1px dashed var(--surface-2); border-radius:10px; background:white}
.step.pass{border-style:solid; border-color:#D5E8D8; background:#F6FBF7}
.step .icon{width:26px; height:26px; display:inline-grid; place-items:center; border-radius:8px; background: var(--surface); border:1px solid var(--surface-2)}

.chips{display:flex; gap:8px; flex-wrap:wrap}

.slot-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px}
.slot{padding:10px; background:white; border:1px solid var(--surface-2); border-radius:10px; cursor:pointer; text-align:center}
.slot[aria-pressed="true"], .slot:hover{outline:3px solid var(--ring); outline-offset:2px}

.br-footer{padding:20px; text-align:center; color:var(--muted)}

@media (max-width: 900px){
  .hero{grid-template-columns: 1fr}
  .grid.cols-3{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .grid.cols-2, .grid.cols-3{grid-template-columns: 1fr}
}