/* ============================================================
   Seda Circle+ — Corporate Bookers Portal — Draft Styles
   Palette (brand): Prussian Blue #1E2C33 · Amber #DD8732
                    Terracotta #BE4E27 · Olive #42490F
   ============================================================ */
:root{
  --prussian:#1e2c33;
  --prussian-soft:#2c404a;
  --amber:#dd8732;
  --terracotta:#be4e27;
  --olive:#42490f;
  --cream:#f7f5f0;
  --paper:#ffffff;
  --line:#d9d4ca;
  --ink:#1e2c33;
  --ink-soft:#5f6b70;
  --ink-faint:#8a938f;
  --box:#ece8e0;
  --serif:'Georgia','Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--serif);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber);
}
.placeholder{
  background:var(--box);
  background-image:repeating-linear-gradient(45deg,rgba(30,44,51,.05) 0 12px,transparent 12px 24px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-faint); font-family:var(--sans); font-size:11px;
  text-transform:uppercase; letter-spacing:.12em; padding:12px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; padding:13px 26px;
  border:1px solid var(--prussian); color:var(--prussian);
  background:transparent; cursor:pointer; transition:all .18s ease; text-align:center;
}
.btn:hover{background:var(--prussian); color:#fff;}
.btn-amber{background:var(--amber); border-color:var(--amber); color:#fff;}
.btn-amber:hover{background:var(--terracotta); border-color:var(--terracotta); color:#fff;}
.btn-light{border-color:rgba(255,255,255,.7); color:#fff;}
.btn-light:hover{background:#fff; color:var(--prussian);}
.btn-block{display:block; width:100%;}
.btn-small{
  display:inline-block; font-family:var(--sans); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; padding:9px 16px;
  border:1px solid var(--prussian); color:var(--prussian); cursor:pointer;
  background:transparent; transition:all .18s ease;
}
.btn-small:hover{background:var(--prussian); color:#fff;}
.btn-small.btn-amber{background:var(--amber); border-color:var(--amber); color:#fff;}
.btn-small.btn-amber:hover{background:var(--terracotta); border-color:var(--terracotta);}
.btn-small.disabled{color:#b3b3ae; border-color:#d4d4cf; pointer-events:none; background:transparent;}

/* ---------- Top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 40px; background:var(--cream); border-bottom:2px solid var(--prussian);
  position:relative; z-index:50;
}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand img{height:52px; width:auto;}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a{
  font-family:var(--sans); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--prussian); padding-bottom:3px;
  border-bottom:2px solid transparent; transition:color .18s ease;
}
.nav-links a:hover{color:var(--terracotta);}
.nav-links a.active{color:var(--terracotta); border-bottom-color:var(--terracotta);}
.nav-links a.my-account{
  border:1px solid var(--prussian); padding:9px 16px; margin-left:6px; border-bottom-width:1px;
}
.nav-links a.my-account.active{border-color:var(--terracotta); color:var(--terracotta);}
.nav-links a.my-account:hover{background:var(--prussian); color:#fff; border-color:var(--prussian);}
.account-block{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.account-meta{font-family:var(--sans); font-size:10px; line-height:1.55; text-align:right;}
.account-meta .line1{font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--prussian);}
.account-meta .line2{color:var(--ink-soft);}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--prussian); color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:12px; font-weight:700; flex-shrink:0;
}
.menu-toggle{
  display:none; font-family:var(--sans); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--prussian);
  background:transparent; color:var(--prussian); padding:8px 12px; cursor:pointer;
}

/* ---------- Hero (home) ---------- */
.hero{display:grid; grid-template-columns:1.25fr 1fr; border-bottom:2px solid var(--prussian);}
.hero-copy{padding:56px 48px; background:var(--prussian); color:#fff;}
.hero-copy h1{font-size:36px; margin:14px 0 16px; line-height:1.22; font-weight:normal;}
.hero-copy p{color:#c8d2d6; max-width:400px; line-height:1.65; margin:0 0 28px; font-size:15px;}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.points-here{margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.22); display:flex; gap:44px;}
.ph-item .num{font-size:28px; font-weight:bold; color:#fff;}
.ph-item .label{
  font-family:var(--sans); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--amber); margin-top:5px;
}
.hero-image{min-height:360px; position:relative;}
.promo-badge{
  position:absolute; top:18px; left:18px; background:var(--terracotta); color:#fff;
  font-family:var(--sans); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; padding:7px 14px; z-index:2;
}

/* ---------- Sections / cards ---------- */
.section-heading{
  padding:36px 40px 0; display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.section-heading h2{
  font-family:var(--sans); font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; color:var(--prussian); margin:0;
}
.section-heading .link{
  font-family:var(--sans); font-size:11px; font-weight:600; color:var(--terracotta);
  text-transform:uppercase; letter-spacing:.1em;
}
.section-heading .link:hover{color:var(--amber);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:24px 40px 44px;}
.card{border:1px solid var(--prussian); background:var(--paper); padding:24px; transition:box-shadow .18s ease;}
.card:hover{box-shadow:0 4px 16px rgba(30,44,51,.12);}
.card .tag{
  font-family:var(--sans); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--terracotta); margin-bottom:10px;
}
.card h3{margin:0 0 8px; font-size:19px; font-weight:normal;}
.card p{margin:0; color:var(--ink-soft); font-size:13px; line-height:1.6;}

/* ---------- Footer ---------- */
.footer-strip{
  background:var(--prussian); color:#aebbc0; padding:26px 40px; display:flex;
  justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.footer-brand{display:flex; align-items:center; gap:14px;}
.footer-brand img{height:44px; width:auto;}
.footer-nav{display:flex; gap:20px; flex-wrap:wrap; align-items:center;}
.footer-nav a:hover{color:#fff;}
.footer-nav a.foot-account{border:1px solid #aebbc0; padding:5px 11px;}
.footer-nav a.foot-account:hover{border-color:#fff;}

/* ---------- Auth (login / join) ---------- */
.auth-wrap{display:flex; min-height:calc(100vh - 84px);}
.auth-visual{flex:1; background:var(--prussian); position:relative; display:flex; align-items:center;}
.auth-visual .av-overlay{padding:64px 56px; color:#fff;}
.auth-visual h2{font-size:32px; max-width:420px; line-height:1.3; margin:16px 0 0; font-weight:normal;}
.auth-form-col{flex:1; display:flex; align-items:center; justify-content:center; padding:48px 32px;}
.auth-form{width:100%; max-width:400px;}
.auth-form .form-logo{height:96px; width:auto; margin-bottom:32px;}
.auth-form h1{font-size:24px; margin:0 0 8px; font-weight:normal;}
.auth-form .sub{color:var(--ink-soft); font-size:14px; margin:0 0 30px; line-height:1.5;}
.form-field{margin-bottom:18px;}
.form-field label{
  display:block; font-family:var(--sans); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin-bottom:7px;
}
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--prussian); background:#fff; padding:13px 14px;
  font-family:var(--sans); font-size:14px; color:var(--ink); outline:none;
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--amber); box-shadow:0 0 0 2px rgba(221,135,50,.2);}
.form-links{display:flex; justify-content:flex-end; margin:14px 0 24px;}
.form-links a{
  font-family:var(--sans); font-size:11px; font-weight:600; color:var(--terracotta);
  text-transform:uppercase; letter-spacing:.08em;
}
.auth-alt{
  margin-top:26px; padding-top:24px; border-top:1px solid var(--line);
  text-align:center; font-size:14px; color:var(--ink-soft);
}
.auth-alt a{
  color:var(--terracotta); font-family:var(--sans); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- Registration steps ---------- */
.reg-steps{display:flex; padding:28px 48px 0; max-width:960px; margin:0 auto;}
.reg-step{
  flex:1; text-align:center; font-family:var(--sans); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; padding-bottom:14px;
  border-bottom:3px solid var(--line); color:var(--ink-faint);
}
.reg-step.active{border-bottom-color:var(--amber); color:var(--terracotta);}
.reg-step.done{border-bottom-color:var(--olive); color:var(--olive);}
.reg-body{max-width:560px; margin:0 auto; padding:44px 24px 64px;}
.reg-body h1{font-size:24px; margin:0 0 8px; font-weight:normal;}
.reg-body .sub{color:var(--ink-soft); font-size:14px; margin:0 0 28px; line-height:1.6;}
.invite-box{
  border:2px dashed var(--amber); padding:26px; text-align:center; margin-bottom:24px; background:#fdf6ed;
}
.invite-box label{
  display:block; font-family:var(--sans); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.15em; color:var(--terracotta); margin-bottom:10px;
}
.invite-box input{
  width:240px; max-width:100%; text-align:center; letter-spacing:.25em; text-transform:uppercase;
  font-family:var(--sans); font-size:15px; font-weight:600; border:1px solid var(--prussian); padding:12px;
}
.invite-note{font-family:var(--sans); font-size:11px; color:var(--ink-soft); text-align:center; margin-top:10px;}

/* ---------- Benefits ---------- */
.benefits-hero{background:var(--prussian); color:#fff; padding:56px 40px; text-align:center;}
.benefits-hero h1{font-size:32px; margin:12px 0 10px; font-weight:normal;}
.benefits-hero p{color:#c8d2d6; margin:0; font-size:15px;}
.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:44px 40px;}
.benefit-card{border:1px solid var(--prussian); background:var(--paper); padding:30px 24px; text-align:center;}
.benefit-card .icon{
  width:52px; height:52px; border:1px solid var(--amber); border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; color:var(--terracotta); font-size:20px;
}
.benefit-card h3{margin:0 0 8px; font-size:17px; font-weight:normal;}
.benefit-card p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.6;}
.faq-list{margin:8px 0 48px;}
.faq-row{border-top:1px solid var(--line);}
.faq-row:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; background:none; border:none; padding:18px 40px; display:flex;
  justify-content:space-between; align-items:baseline; gap:16px; cursor:pointer;
  font-family:var(--serif); font-size:15px; color:var(--ink); text-align:left;
}
.faq-q .faq-icon{font-family:var(--sans); color:var(--terracotta); font-size:16px; font-weight:600;}
.faq-a{display:none; padding:0 40px 20px; color:var(--ink-soft); font-size:14px; line-height:1.7; max-width:840px;}
.faq-row.open .faq-a{display:block;}

/* ---------- Account layout ---------- */
.profile-layout{display:grid; grid-template-columns:340px 1fr; min-height:640px; background:var(--paper);}
.side-nav{border-right:2px solid var(--prussian); padding:26px 0; background:var(--cream);}
.member-card{
  margin:0 24px 16px; background:var(--prussian); color:#fff; padding:22px; position:relative;
}
.member-card .id-row{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.member-card h3{margin:6px 0 4px; font-size:19px; font-weight:normal;}
.member-card .id{font-family:var(--sans); font-size:11px; color:#aebbc0; margin-bottom:12px;}
.card-icon{
  width:36px; height:25px; border:1px solid var(--amber); border-radius:3px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:7px; font-weight:700; color:var(--amber);
  text-transform:uppercase; letter-spacing:.06em;
}
a.card-icon:hover{background:var(--amber); color:var(--prussian);}
.member-card .company{
  font-family:var(--sans); font-size:11px; border-top:1px solid rgba(255,255,255,.22);
  padding-top:11px; text-transform:uppercase; letter-spacing:.06em; color:#fff;
}
.member-card .company span{color:var(--amber);}
.points-breakdown{margin:0 24px 18px; border:1px solid var(--prussian); background:var(--paper);}
.pb-head{
  background:var(--box); padding:10px 16px; font-family:var(--sans); font-size:10px;
  font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--prussian);
}
.pb-row{display:flex; justify-content:space-between; padding:10px 16px; font-size:13px; border-top:1px solid var(--line);}
.pb-row .pb-val{font-weight:bold; color:var(--olive);}
.pb-row.total{background:var(--cream); font-weight:bold;}
.side-nav ul{list-style:none; margin:18px 0 0; padding:0;}
.side-nav li a{
  display:block; padding:13px 24px; font-family:var(--sans); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; border-left:3px solid transparent; color:var(--prussian);
}
.side-nav li a:hover{background:var(--box); color:var(--terracotta);}
.side-nav li a.active{border-left-color:var(--terracotta); color:var(--terracotta); background:var(--box);}
.content-area{padding:36px 44px;}
.content-area h1{margin:0 0 26px; font-size:24px; font-weight:normal;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.field{border:1px solid var(--prussian); padding:13px 16px; background:var(--paper);}
.field .field-label{
  font-family:var(--sans); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); margin-bottom:5px;
}
.field .field-value{font-size:14px;}
.field.preselected{background:var(--box);}
.field.preselected .field-value{font-weight:bold;}
.field-action{
  font-family:var(--sans); font-size:10px; font-weight:600; color:var(--terracotta);
  text-transform:uppercase; letter-spacing:.06em; margin-left:8px;
}

/* ---------- Summary tiles + history table ---------- */
.summary-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;}
.summary-tile{border:1px solid var(--prussian); padding:20px 12px; text-align:center; background:var(--paper);}
.summary-tile .num{font-size:25px; font-weight:bold; color:var(--olive);}
.summary-tile .label{
  font-family:var(--sans); font-size:9px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); margin-top:7px;
}
table.history{width:100%; border-collapse:collapse; font-size:13px; background:var(--paper);}
table.history th, table.history td{border:1px solid var(--line); padding:11px 13px; text-align:left;}
table.history th{
  font-family:var(--sans); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; background:var(--box); color:var(--prussian);
}
.pts-plus{color:var(--olive); font-weight:bold;}
.pts-minus{color:var(--terracotta); font-weight:bold;}

/* ---------- Digital card ---------- */
.card-stage{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:520px; padding:24px;}
.digital-card{
  width:400px; max-width:100%; aspect-ratio:1.586/1; border-radius:14px;
  background:linear-gradient(135deg,#2c404a,#1e2c33 65%);
  color:#fff; padding:26px; display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:0 10px 28px rgba(30,44,51,.3); position:relative; overflow:hidden;
}
.digital-card::after{
  content:''; position:absolute; right:-48px; top:-48px; width:180px; height:180px;
  border:1px solid rgba(221,135,50,.35); border-radius:50%;
}
.digital-card::before{
  content:''; position:absolute; right:-16px; top:-16px; width:180px; height:180px;
  border:1px solid rgba(255,255,255,.12); border-radius:50%;
}
.dc-top{display:flex; justify-content:space-between; align-items:flex-start;}
.dc-top img{height:44px; width:auto;}
.dc-tier{
  font-family:var(--sans); font-size:9px; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--amber); padding-top:4px;
}
.dc-name{font-size:21px; margin:0;}
.dc-company{font-family:var(--sans); font-size:11px; color:#aebbc0; margin-top:5px; text-transform:uppercase; letter-spacing:.08em;}
.dc-id-row{display:flex; justify-content:space-between; font-family:var(--sans); font-size:11px; letter-spacing:.1em; color:#c8d2d6;}
.card-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; justify-content:center;}

/* ---------- Rewards ---------- */
.balance-strip{
  background:var(--prussian); color:#fff; padding:26px 40px; display:flex;
  justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.bal-label{
  font-family:var(--sans); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--amber); margin-bottom:4px;
}
.bal-num{font-size:30px; font-weight:bold;}
.filter-row{display:flex; gap:12px; padding:28px 40px 0; flex-wrap:wrap;}
.filter-chip{
  font-family:var(--sans); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; padding:9px 18px; border:1px solid var(--prussian);
  background:transparent; color:var(--prussian); cursor:pointer; transition:all .15s ease;
}
.filter-chip:hover{background:var(--box);}
.filter-chip.active{background:var(--prussian); color:#fff;}
.reward-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:28px 40px 48px;}
.reward-card{border:1px solid var(--prussian); background:var(--paper); display:flex; flex-direction:column;}
.reward-card .thumb{height:130px;}
.reward-card .body{padding:18px; display:flex; flex-direction:column; flex:1;}
.reward-card h3{margin:0 0 6px; font-size:15px; font-weight:normal; line-height:1.4;}
.reward-card .property{
  font-family:var(--sans); font-size:10px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px;
}
.cost-row{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:14px; gap:8px;}
.cost{font-weight:bold; color:var(--olive); font-size:14px; font-family:var(--sans);}

/* ---------- Offers ---------- */
.offer-banner{position:relative; height:340px; border-bottom:2px solid var(--prussian);}
.banner-label{
  position:absolute; top:24px; left:40px; background:var(--terracotta); color:#fff;
  font-family:var(--sans); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; padding:8px 16px; z-index:2;
}
.banner-caption{
  position:absolute; bottom:24px; left:40px; background:var(--prussian); color:#fff;
  padding:18px 26px; max-width:540px; z-index:2;
}
.banner-caption h2{margin:0 0 6px; font-size:21px; font-weight:normal;}
.banner-caption p{margin:0; font-size:13px; color:#c8d2d6; line-height:1.5;}
.key-rate-strip{margin:36px 40px; border:2px solid var(--amber); display:grid; grid-template-columns:1fr 1fr; background:var(--paper);}
.krs-copy{padding:32px;}
.krs-copy h2{margin:10px 0 12px; font-size:23px; font-weight:normal;}
.krs-copy p{margin:0 0 20px; color:var(--ink-soft); font-size:14px; line-height:1.65;}
.krs-rate{border:1px solid var(--prussian); padding:16px 20px; display:inline-block; margin-bottom:20px;}
.krs-rate .num{font-size:24px; font-weight:bold; color:var(--olive);}
.krs-rate .label{
  font-family:var(--sans); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); margin-top:4px;
}
.offers-list{padding:8px 40px 44px; display:flex; flex-direction:column; gap:18px;}
.offer-row{display:grid; grid-template-columns:190px 1fr 210px; border:1px solid var(--prussian); background:var(--paper);}
.offer-row .thumb{border-right:1px solid var(--prussian);}
.offer-row .info{padding:22px;}
.offer-row .info .tag{
  font-family:var(--sans); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--terracotta); margin-bottom:7px;
}
.offer-row .info h3{margin:0 0 7px; font-size:17px; font-weight:normal;}
.offer-row .info p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.6;}
.offer-row .action{
  border-left:1px solid var(--prussian); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; padding:20px; text-align:center;
}
.offer-row .action .rate{font-size:18px; font-weight:bold; color:var(--olive); font-family:var(--sans);}
.offer-row .action .rate-label{
  font-family:var(--sans); font-size:9px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-soft);
}

/* ---------- Booking modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(30,44,51,.55); z-index:200;
  display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px;
}
.modal-overlay.open{display:flex;}
.modal{max-width:660px; width:100%; background:var(--paper); border:2px solid var(--prussian);}
.modal-head{
  padding:20px 28px; border-bottom:1px solid var(--prussian); display:flex;
  justify-content:space-between; align-items:center; gap:16px;
}
.modal-head h2{margin:0; font-size:18px; font-weight:normal;}
.modal-close{
  background:none; border:none; font-size:18px; cursor:pointer; color:var(--prussian);
  font-family:var(--sans); line-height:1; padding:4px;
}
.modal-close:hover{color:var(--terracotta);}
.modal-body{padding:28px;}
.modal-body .field-row{margin-bottom:14px;}
.modal-body .form-field{margin-bottom:14px;}
.guest-section-label{
  font-family:var(--sans); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--prussian); margin:20px 0 10px;
}
.guest-block{border:1px solid var(--prussian); margin-bottom:10px;}
.gb-head{
  background:var(--box); padding:8px 14px; font-family:var(--sans); font-size:10px;
  font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--prussian);
  display:flex; justify-content:space-between; align-items:center;
}
.gb-remove{
  background:none; border:none; color:var(--terracotta); cursor:pointer;
  font-family:var(--sans); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.gb-body{padding:12px 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.gb-body input{
  width:100%; border:1px solid var(--line); padding:9px 10px; font-family:var(--sans); font-size:13px;
}
.gb-body .field-label{
  font-family:var(--sans); font-size:9px; font-weight:600; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:4px; letter-spacing:.06em;
}
.add-room-btn{
  width:100%; border:1px dashed var(--prussian); background:transparent; text-align:center;
  padding:11px; font-family:var(--sans); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:var(--olive);
  cursor:pointer; margin-bottom:16px;
}
.add-room-btn:hover{background:var(--box);}
.modal-footer{padding:18px 28px; border-top:1px solid var(--prussian); display:flex; justify-content:flex-end; gap:12px;}

/* ---------- Mobile bottom nav ---------- */
.m-nav-bottom{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:100;
  border-top:2px solid var(--prussian); background:var(--cream);
}
.m-nav-bottom a{
  flex:1; text-align:center; padding:11px 0 9px; font-family:var(--sans); font-size:9px;
  font-weight:600; text-transform:uppercase; letter-spacing:.05em; border-right:1px solid var(--line);
  color:var(--prussian);
}
.m-nav-bottom a:last-child{border-right:none;}
.m-nav-bottom a.active{color:var(--terracotta); box-shadow:inset 0 2px 0 var(--terracotta);}

/* ---------- Toast (prototype feedback) ---------- */
.toast{
  position:fixed; bottom:70px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--prussian); color:#fff; font-family:var(--sans); font-size:12px;
  padding:12px 22px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:300;
  letter-spacing:.04em;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .grid-3, .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .reward-grid{grid-template-columns:repeat(2,1fr);}
  .profile-layout{grid-template-columns:290px 1fr;}
}
@media (max-width:820px){
  body{padding-bottom:44px;} /* room for bottom nav */
  .topbar{padding:12px 16px;}
  .brand img{height:42px;}
  .menu-toggle{display:block;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--cream); border-bottom:2px solid var(--prussian);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 20px; border-bottom:1px solid var(--line);}
  .nav-links a.active{border-bottom:1px solid var(--line);}
  .nav-links a.my-account{border:none; border-bottom:1px solid var(--line); margin:0;}
  .account-block .account-meta{display:none;}
  .hero{grid-template-columns:1fr;}
  .hero-copy{padding:32px 20px;}
  .hero-copy h1{font-size:26px;}
  .hero-image{min-height:200px;}
  .section-heading{padding:28px 20px 0;}
  .grid-3, .benefit-grid{grid-template-columns:1fr; padding-left:20px; padding-right:20px;}
  .footer-strip{padding:20px 16px;}
  .auth-wrap{flex-direction:column;}
  .auth-visual{min-height:220px;}
  .auth-visual .av-overlay{padding:32px 24px;}
  .auth-visual h2{font-size:22px;}
  .reg-steps{padding:20px 16px 0;}
  .profile-layout{grid-template-columns:1fr;}
  .side-nav{border-right:none; border-bottom:2px solid var(--prussian);}
  .content-area{padding:24px 16px;}
  .field-row{grid-template-columns:1fr;}
  .summary-grid{grid-template-columns:1fr 1fr;}
  .reward-grid{grid-template-columns:1fr; padding:20px 16px 40px;}
  .filter-row{padding:20px 16px 0; overflow-x:auto; flex-wrap:nowrap;}
  .balance-strip{padding:20px 16px;}
  .offer-banner{height:230px;}
  .banner-label{left:16px; top:16px;}
  .banner-caption{left:16px; right:16px; bottom:16px; padding:14px;}
  .key-rate-strip{grid-template-columns:1fr; margin:20px 16px;}
  .krs-image{min-height:160px;}
  .offers-list{padding:8px 16px 40px;}
  .offer-row{grid-template-columns:1fr;}
  .offer-row .thumb{border-right:none; border-bottom:1px solid var(--prussian); min-height:140px;}
  .offer-row .action{border-left:none; border-top:1px solid var(--prussian);}
  .faq-q{padding:16px 20px;}
  .faq-a{padding:0 20px 18px;}
  .gb-body{grid-template-columns:1fr;}
  .m-nav-bottom{display:flex;}
  table.history{font-size:12px;}
  table.history th, table.history td{padding:8px;}
}
