:root{
  --bg:#0d0d0f;
  --panel:#171719;
  --panel2:#202024;
  --gold:#d6b46a;
  --gold2:#f0d28f;
  --text:#f7f4ed;
  --muted:#bdb7ab;
  --line:#363238;
  --good:#b7d7b0;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 0%,rgba(214,180,106,.13),transparent 34rem),
    linear-gradient(180deg,#0b0b0d,#121214 45%,#0c0c0e);
  min-height:100vh;
}
a{color:inherit}
button,input{font:inherit}
.db-shell{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:34px 0 72px}
.db-topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}
.db-brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.01em}
.db-brand-mark{
  width:42px;height:42px;border:1px solid rgba(214,180,106,.65);border-radius:50%;
  display:grid;place-items:center;color:var(--gold2);font-family:Georgia,serif;font-size:22px;
}
.db-home{color:var(--muted);text-decoration:none;font-size:.95rem}
.db-home:hover{color:var(--gold2)}
.db-hero{
  padding:42px 42px 34px;border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(145deg,rgba(35,33,36,.92),rgba(20,20,22,.96));
  box-shadow:var(--shadow);margin-bottom:22px;position:relative;overflow:hidden;
}
.db-hero:after{
  content:"";position:absolute;right:-120px;top:-140px;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,180,106,.18),transparent 68%);pointer-events:none;
}
.db-eyebrow{color:var(--gold2);font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:.78rem}
.db-hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,5vw,3.65rem);line-height:1.02;margin:12px 0 14px;max-width:760px}
.db-hero p{color:var(--muted);font-size:1.06rem;line-height:1.65;max-width:760px;margin:0}
.db-progress-wrap{margin-top:28px;display:flex;align-items:center;gap:14px}
.db-progress-track{height:8px;background:#2a282c;border-radius:99px;overflow:hidden;flex:1}
.db-progress{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .3s ease}
.db-progress-label{font-size:.86rem;color:var(--muted);min-width:92px;text-align:right}

.db-card{
  border:1px solid var(--line);border-radius:var(--radius);background:rgba(22,22,25,.94);
  box-shadow:var(--shadow);padding:32px;
}
.db-step{display:none}
.db-step.is-active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}
.db-step h2{font-family:Georgia,serif;font-size:clamp(1.55rem,3vw,2.15rem);margin:0 0 7px}
.db-step .lead{color:var(--muted);margin:0 0 24px;line-height:1.55}

.db-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.db-choice{
  width:100%;text-align:left;color:var(--text);background:var(--panel2);border:1px solid #39363b;
  border-radius:17px;padding:18px 17px;cursor:pointer;transition:.18s ease;min-height:78px;
  display:flex;align-items:center;gap:14px;
}
.db-choice:hover{border-color:#716653;transform:translateY(-1px)}
.db-choice.is-selected{
  border-color:var(--gold);background:linear-gradient(145deg,rgba(214,180,106,.16),rgba(32,32,36,.9));
  box-shadow:inset 0 0 0 1px rgba(240,210,143,.14)
}
.db-choice-icon{
  width:38px;height:38px;border-radius:12px;background:#2b292d;display:grid;place-items:center;
  color:var(--gold2);flex:0 0 auto;font-size:1.05rem;
}
.db-choice-title{font-weight:800;display:block}
.db-choice-sub{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}

.db-favorite{
  width:100%;border:1px solid #464148;background:#111114;color:var(--text);border-radius:15px;
  padding:16px 17px;outline:none;font-size:1rem;
}
.db-favorite:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,180,106,.12)}
.db-note{color:var(--muted);font-size:.9rem;line-height:1.55;margin-top:12px}

.db-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.db-btn{
  border-radius:14px;padding:13px 19px;border:1px solid var(--line);font-weight:800;cursor:pointer;
  transition:.18s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
.db-btn-secondary{background:#1d1d20;color:var(--text)}
.db-btn-secondary:hover{border-color:#6c6559}
.db-btn-primary{background:linear-gradient(135deg,#b99242,var(--gold2));color:#17120a;border-color:transparent}
.db-btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.db-btn[disabled]{opacity:.42;cursor:not-allowed;transform:none}

.db-loading{display:none;padding:45px;text-align:center;color:var(--muted)}
.db-loading.is-active{display:block}
.db-spinner{
  width:34px;height:34px;border:3px solid #353238;border-top-color:var(--gold2);border-radius:50%;
  animation:spin .8s linear infinite;margin:0 auto 14px
}
@keyframes spin{to{transform:rotate(360deg)}}

.db-results{display:none}
.db-results.is-active{display:block}
.db-result-head{text-align:center;margin:3px 0 23px}
.db-result-head .eyebrow{color:var(--gold2);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.db-result-head h2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.7rem);margin:8px 0 8px}
.db-result-head p{color:var(--muted);line-height:1.55;margin:0 auto;max-width:760px}

.db-main-rec{
  border:1px solid rgba(214,180,106,.55);border-radius:24px;padding:27px;
  background:linear-gradient(145deg,rgba(214,180,106,.12),rgba(25,25,28,.96));
  box-shadow:var(--shadow);margin-bottom:18px
}
.db-rec-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.db-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.db-badge{
  border:1px solid #4b464d;border-radius:999px;padding:5px 9px;font-size:.76rem;font-weight:800;color:#d8d2c8;background:#201f22
}
.db-badge.gold{border-color:rgba(214,180,106,.55);color:var(--gold2);background:rgba(214,180,106,.08)}
.db-main-rec h3{font-family:Georgia,serif;font-size:clamp(1.65rem,4vw,2.4rem);margin:0 0 6px}
.db-inspired{color:var(--muted);line-height:1.45}
.db-score{
  min-width:104px;text-align:center;border-radius:18px;padding:13px 12px;background:#111114;border:1px solid #3b373d
}
.db-score strong{display:block;color:var(--gold2);font-size:1.5rem}
.db-score span{color:var(--muted);font-size:.76rem}
.db-reason{margin:20px 0 0;padding:17px 18px;border-left:3px solid var(--gold);background:#171619;border-radius:0 14px 14px 0;line-height:1.6;color:#e6e1d8}
.db-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:17px}
.db-info{background:#141416;border:1px solid #302e32;border-radius:14px;padding:13px}
.db-info-label{font-size:.76rem;color:var(--muted);margin-bottom:5px}
.db-info-value{font-weight:800;line-height:1.35}

.db-alt-title{font-family:Georgia,serif;font-size:1.45rem;margin:27px 0 13px}
.db-alts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.db-alt{
  border:1px solid var(--line);background:#18181b;border-radius:18px;padding:18px;
}
.db-alt-rank{color:var(--gold2);font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.db-alt h4{font-family:Georgia,serif;font-size:1.28rem;margin:7px 0 5px}
.db-alt .muted{color:var(--muted);font-size:.9rem;line-height:1.45}
.db-alt-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.db-pill{border-radius:999px;background:#252429;padding:5px 8px;font-size:.75rem;color:#d7d0c5}

.db-samples{
  margin-top:20px;border:1px solid #53492f;background:linear-gradient(145deg,rgba(214,180,106,.1),rgba(25,24,20,.9));
  border-radius:18px;padding:20px;text-align:center
}
.db-samples strong{color:var(--gold2)}
.db-result-actions{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:20px}
.db-error{
  display:none;border:1px solid #6b3939;background:#2b1818;color:#ffd5d5;border-radius:14px;padding:14px 16px;margin-bottom:15px
}
.db-error.is-active{display:block}

.db-footer{text-align:center;color:#827c73;font-size:.82rem;margin-top:26px}
.db-footer a{text-decoration:none;color:#aaa297}

@media (max-width:780px){
  .db-shell{width:min(100% - 18px,1120px);padding-top:16px}
  .db-topbar{margin-bottom:16px}
  .db-hero{padding:29px 20px 25px;border-radius:22px}
  .db-card{padding:22px 16px}
  .db-options,.db-alts{grid-template-columns:1fr}
  .db-choice{min-height:70px}
  .db-rec-top{display:block}
  .db-score{margin-top:16px;width:112px}
  .db-info-grid{grid-template-columns:1fr}
  .db-actions{position:sticky;bottom:8px;background:rgba(15,15,17,.92);backdrop-filter:blur(12px);padding:10px;border-radius:16px;border:1px solid #302d32}
}
@media (max-width:450px){
  .db-brand{font-size:.92rem}
  .db-home{font-size:.82rem}
  .db-hero h1{font-size:2.15rem}
  .db-choice{padding:15px 13px}
}