/* ==========================================================
   Advicer 3.0.4 — Mobile Creation + Visual Polish
   Loaded after mobile-v303.css. No database migration needed.
   ========================================================== */
:root{
  --v304-brand:#0a9189;
  --v304-brand-soft:#e9f7f4;
  --v304-coral:#f25f69;
  --v304-ink:#14272d;
  --v304-muted:#728187;
  --v304-line:#dde8e5;
}

/* 1) Remove decorative/profile rings everywhere. */
.author-avatar::before{content:none!important;display:none!important}
.author-avatar .avatar{
  border:0!important;
  box-shadow:none!important;
  background:#edf4f2!important;
}
.people-avatar{
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.people-avatar img{border:0!important;box-shadow:none!important}
.avatar-wrap img,.mini-profile img{border:0!important;box-shadow:none!important}

/* 2) Feed tabs: truly centered, equal-width, independent of viewport quirks. */
.home-simple{
  width:min(100%,820px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.feed-simple{
  width:min(100%,720px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.feed-simple .feed-tabs{
  width:min(100%,680px)!important;
  margin:0 auto 10px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.feed-simple .feed-tabs a{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
}
.feed-simple .feed-simple-hint{
  width:min(100%,680px)!important;
  margin:8px auto 16px!important;
  text-align:center!important;
}

/* 3) Result badge: always a real circle, including 100%. */
.choice-pct{
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  padding:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  font-size:11px!important;
  line-height:1!important;
  letter-spacing:-.03em!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.choice.is-winner .choice-pct{
  background:var(--v304-brand)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(10,145,137,.22)!important;
}

/* 4) Notifications: thinner 2026-style glyphs, less bulky icon containers. */
.notification-type-icon{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  background:#f1f7f5!important;
  color:var(--v304-brand)!important;
  border:1px solid #e0ebe8!important;
  box-shadow:none!important;
}
.notification-type-icon svg{
  width:18px!important;
  height:18px!important;
  stroke-width:1.65!important;
}
.notification-card-v18.type-vote .notification-type-icon{background:#eaf8f5!important;color:#078a82!important}
.notification-card-v18.type-comment .notification-type-icon{background:#f1f5fb!important;color:#4b6f9d!important}
.notification-card-v18.type-message .notification-type-icon{background:#eff8f7!important;color:#118f87!important}
.notification-card-v18.type-friend_request .notification-type-icon,
.notification-card-v18.type-friend_accepted .notification-type-icon,
.notification-card-v18.type-friend .notification-type-icon{background:#fff4ef!important;color:#c86c4f!important}

/* 5) Create request: compact two-step flow. */
.create-v304-card{max-width:820px!important;margin-left:auto!important;margin-right:auto!important}
.create-stepper-v304{
  padding:10px 12px!important;
  border:1px solid var(--v304-line)!important;
  border-radius:16px!important;
  background:#f7faf9!important;
}
.create-stepper-v304>span{
  width:25px!important;height:25px!important;
  border-radius:9px!important;
}
.create-stepper-v304 small{display:flex!important;flex-direction:column!important;gap:1px!important;font-style:normal!important}
.create-stepper-v304 small b{color:var(--v304-ink)!important;font-size:12px!important}
.create-stepper-v304 small em{color:#879397!important;font-size:9px!important;font-style:normal!important;font-weight:600!important}
.create-choice-grid-v304{align-items:start!important}
.image-picker-v304{min-height:210px!important}
.image-picker-v304>span{display:grid!important;place-items:center!important;gap:3px!important;text-align:center!important}
.image-picker-v304>span>b{font-size:25px!important;line-height:1!important;color:var(--v304-brand)!important}
.image-picker-v304>span>strong{font-size:12px!important;color:#40545a!important}
.image-picker-v304>span>small{font-size:9px!important;color:#879397!important;font-weight:600!important}
.image-picker-v304 img.has-preview{display:block!important}
.publish-summary-v304{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  padding:13px!important;
  border:1px solid #dce8e5!important;
  border-radius:15px!important;
  background:#f8fbfa!important;
}
.publish-summary-icon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--v304-brand-soft);color:var(--v304-brand)
}
.publish-summary-icon svg{width:20px;height:20px;stroke-width:1.7}
.publish-summary-v304 div{display:grid;gap:3px}
.publish-summary-v304 b{font-size:12px;color:var(--v304-ink)}
.publish-summary-v304 small{font-size:10px;line-height:1.35;color:var(--v304-muted)}
.create-step-actions-v304.bottom{justify-content:center!important;margin-top:9px!important}
.create-step-actions-v304.bottom .pill{min-height:38px!important;padding:8px 13px!important;font-size:10px!important}
.create-v304-card .form-submit{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.create-v304-card .form-submit svg{width:18px;height:18px;stroke-width:1.7}

@media(max-width:760px){
  /* exact centering on phones */
  .home-shell.home-simple{padding-left:8px!important;padding-right:8px!important}
  .feed-simple{width:100%!important;margin:12px auto!important}
  .feed-simple .feed-tabs{
    width:calc(100% - 18px)!important;
    max-width:560px!important;
    margin:0 auto 9px!important;
    padding:4px!important;
    border-radius:16px!important;
  }
  .feed-simple .feed-tabs a{
    min-height:42px!important;
    padding:8px 2px!important;
    font-size:12px!important;
    line-height:1!important;
  }
  .feed-simple .feed-simple-hint{
    width:calc(100% - 30px)!important;
    max-width:540px!important;
    margin:9px auto 14px!important;
    font-size:11px!important;
    line-height:1.4!important;
  }

  .choice-pct{
    right:7px!important;
    bottom:7px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    font-size:10.5px!important;
  }
  .choice-label{right:54px!important}

  .notification-card-v18{
    grid-template-columns:36px 38px minmax(0,1fr) 14px!important;
    gap:8px!important;
  }
  .notification-type-icon{width:36px!important;height:36px!important;border-radius:11px!important}
  .notification-type-icon svg{width:17px!important;height:17px!important}

  /* two fast steps; image cards remain side-by-side but compact */
  .create-v14-wrap{padding:0 8px!important}
  .create-v14-hero{
    min-height:106px!important;
    margin:0 -8px!important;
    padding:14px 14px 17px!important;
    border-radius:0 0 18px 18px!important;
  }
  .create-v14-hero h1{font-size:22px!important;line-height:1.12!important;margin:3px 0!important}
  .create-v14-hero p{display:none!important}
  .create-v14-card.create-v304-card{
    margin-top:7px!important;
    padding:12px!important;
    border-radius:17px!important;
  }
  .create-stepper-v304{margin-bottom:10px!important;padding:8px 9px!important;border-radius:13px!important}
  .create-stepper-v304 small{margin-left:2px!important}
  .create-question-field{margin:8px 0 10px!important}
  .create-question-field textarea{min-height:74px!important;max-height:110px!important;padding:11px 12px!important;border-radius:12px!important}
  .choice-label-row{margin:8px 0!important;font-size:10px!important}
  .create-choice-grid-v304{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  .choice-edit-card{min-width:0!important;padding:0!important}
  .image-picker-v304{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    border-radius:13px!important;
  }
  .image-picker-v304>span>b{font-size:22px!important}
  .image-picker-v304>span>strong{font-size:10px!important}
  .image-picker-v304>span>small{font-size:7.5px!important}
  .upload-status{
    min-height:28px!important;
    padding:5px 2px 0!important;
    font-size:8px!important;
    line-height:1.2!important;
  }
  .choice-edit-card .field{margin:7px 0 0!important;gap:4px!important}
  .choice-edit-card .field label{font-size:9px!important}
  .choice-edit-card .field input{padding:9px 9px!important;border-radius:10px!important;font-size:12px!important}
  .create-step-actions-v304{margin-top:10px!important}
  .create-step-actions-v304 .pill.primary{width:100%!important;min-height:43px!important}
  .publish-summary-v304{padding:11px!important;border-radius:13px!important}
  .visibility-switches{margin-top:9px!important}
  .visibility-switches .switch-row{padding:11px 2px!important}
  .upload-progress{margin:11px 0 8px!important}
  .create-v304-card .form-submit{margin-top:8px!important;min-height:46px!important;border-radius:13px!important}
}

@media(max-width:390px){
  .feed-simple .feed-tabs{width:calc(100% - 12px)!important}
  .feed-simple .feed-tabs a{font-size:11px!important}
  .choice-pct{
    width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;font-size:10px!important
  }
  .choice-label{right:50px!important}
  .create-v14-card.create-v304-card{padding:10px!important}
  .create-choice-grid-v304{gap:6px!important}
}

@media(prefers-reduced-motion:reduce){
  .create-step.active{animation:none!important}
}