/* ============================================================
   نصيحة غلا — boutique stationery identity
   ============================================================ */
:root{
  --pink:#F7C8D3;
  --pink-2:#F1B2C3;
  --pink-soft:#FDEFF3;
  --beige:#F9F1E9;
  --paper:#FFFCF8;
  --ink:#5A3A42;
  --ink-2:#7C5A62;
  --ink-3:#9C8289;
  --gold:#D9A441;
  --gold-soft:#F3E3C4;
  --gold-ink:#8A6218;
  --green:#A8C3A0;
  --green-soft:#EDF3EA;
  --green-ink:#3F5B38;
  --radius:20px;
  --radius-sm:14px;
  --shadow:0 8px 20px rgba(90,58,66,.08);
  --shadow-lift:0 14px 30px rgba(90,58,66,.14);
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Tajawal',system-ui,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.8;
  color:var(--ink);
  background-color:var(--beige);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'El Messiri','Tajawal',serif;
  font-weight:600;
  margin:0;
  line-height:1.45;
  letter-spacing:0;
}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
[hidden]{display:none !important}
::selection{background:var(--pink);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.shell{width:100%;max-width:980px;margin-inline:auto;padding-inline:16px}
.app-main{padding-top:6px;padding-bottom:calc(var(--nav-h) + 34px)}

/* ---------------- header / awning ---------------- */
.app-header{
  position:sticky;top:0;z-index:40;
  background:var(--beige);
  border-bottom:1px solid rgba(217,164,65,.28);
}
.awning{
  height:26px;
  background-image:repeating-linear-gradient(90deg,var(--pink) 0 20px,#FDF4EC 20px 40px);
  position:relative;
}
.awning::after{
  content:"";position:absolute;inset-inline:0;bottom:-9px;height:9px;pointer-events:none;
  background-image:
    radial-gradient(circle at 10px 0,var(--pink) 9px,transparent 10px),
    radial-gradient(circle at 30px 0,#FDF4EC 9px,transparent 10px);
  background-size:40px 9px;
  background-repeat:repeat-x;
  filter:drop-shadow(0 2px 2px rgba(90,58,66,.07));
}
.brand-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-block:9px 10px;
}
.brand{display:flex;align-items:center;gap:10px;text-align:start;min-height:44px;border-radius:12px}
.brand-seal{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:var(--pink);border:1px solid var(--gold);
  display:grid;place-items:center;
  font-family:'El Messiri',serif;font-weight:700;font-size:18px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-text strong{font-family:'El Messiri',serif;font-size:16px;font-weight:600}
.brand-text small{font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.drawer-btn{
  display:flex;align-items:center;gap:6px;min-height:44px;
  padding:0 12px;border-radius:999px;
  background:var(--paper);border:1px solid rgba(217,164,65,.5);
  font-size:13px;font-weight:700;color:var(--ink);
  box-shadow:var(--shadow);
}
.drawer-btn:active{transform:translateY(1px)}
.drawer-btn svg{width:18px;height:18px;color:var(--ink-2)}
.badge{
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--pink);color:var(--ink);font-size:11px;font-weight:700;
  display:grid;place-items:center;
}

/* ---------------- bottom nav ---------------- */
.bottom-nav{
  position:fixed;inset-inline:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  padding:6px 6px 7px;
  background:rgba(255,252,248,.97);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(217,164,65,.35);
  box-shadow:0 -6px 20px rgba(90,58,66,.07);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;border-radius:14px;
  color:var(--ink-2);font-size:11px;font-weight:700;
  transition:background .18s ease,color .18s ease,transform .12s ease;
}
.nav-item svg{width:22px;height:22px}
.nav-item[aria-current="page"]{background:var(--pink-soft);color:var(--ink)}
.nav-item:active{transform:scale(.95)}
@media (hover:hover){.nav-item:hover{background:rgba(247,200,211,.35);color:var(--ink)}}
@media (min-width:760px){
  .bottom-nav{
    inset-inline:auto;left:50%;transform:translateX(-50%);
    bottom:14px;width:min(620px,92vw);
    border-radius:24px;border:1px solid rgba(217,164,65,.45);
    padding:7px;
  }
}

/* ---------------- views ---------------- */
.view{padding-block:14px 10px;animation:viewIn .32s cubic-bezier(.22,.85,.3,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.view-head{margin-bottom:16px}
.kicker{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--gold-ink);background:#FBF2DF;border:1px solid rgba(217,164,65,.45);
  padding:2px 10px;border-radius:999px;margin-bottom:8px;
}
.kicker-green{color:var(--green-ink);background:var(--green-soft);border-color:rgba(168,195,160,.9)}
.view-head h2{font-size:24px;margin-bottom:4px}
.view-head .sub{font-size:14px;color:var(--ink-2);line-height:1.75}

/* ---------------- common bits ---------------- */
.card{
  background:var(--paper);
  border:1px solid rgba(247,200,211,.95);
  border-radius:var(--radius);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.85);
  padding:18px;
}
.soft-card{background:rgba(255,252,248,.75);border-color:rgba(217,164,65,.32);box-shadow:none;margin-top:16px}
.mini-title{font-family:'El Messiri',serif;font-size:16px;margin-bottom:8px}
.tiny{font-size:13px;line-height:1.8}
.muted{color:var(--ink-2)}
.small{font-size:13px}
.points li{
  position:relative;padding-inline-start:18px;margin-bottom:7px;
  font-size:14px;line-height:1.8;color:var(--ink);
}
.points li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.85;
}
.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;line-height:1.75;white-space:nowrap;
}
.chip-pink{background:var(--pink-soft);color:var(--ink);border:1px solid var(--pink)}
.chip-gold{background:#FBF2DF;color:var(--gold-ink);border:1px solid rgba(217,164,65,.5)}
.chip-green{background:var(--green-soft);color:var(--green-ink);border:1px solid rgba(168,195,160,.95)}
.chip-soft{background:rgba(249,241,233,.92);color:var(--ink-2);border:1px solid rgba(217,164,65,.3)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;
  transition:transform .13s ease,background .18s ease,box-shadow .18s ease,color .18s;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.btn.primary{
  background:var(--pink);color:var(--ink);
  border:1px solid rgba(90,58,66,.14);
  box-shadow:0 4px 0 rgba(90,58,66,.1);
}
.btn.primary:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(90,58,66,.1)}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid rgba(217,164,65,.5)}
.btn.ghost:active{transform:translateY(1px)}
.btn.danger{background:#FBE7E7;color:#8C2F2F;border:1px solid rgba(140,47,47,.3)}
.btn.sm{min-height:42px;padding:0 14px;font-size:13.5px;border-radius:12px}
.btn.block{display:flex;width:100%}
.btn:disabled{opacity:.5;pointer-events:none}
@media (hover:hover){
  .btn.primary:hover{background:var(--pink-2)}
  .btn.ghost:hover{background:#FBF2DF}
}
.counter{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.counter b{color:var(--ink);font-size:13.5px}
.counter.warn b{color:#A6453F}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.row-gap{display:flex;gap:8px;flex-wrap:wrap}
.cmp-err{color:#8C2F2F;font-size:13px;margin-top:8px;font-weight:500}
textarea{
  width:100%;border-radius:16px;border:1px solid rgba(217,164,65,.45);
  background:#FFFDFA;padding:13px 14px;line-height:1.9;font-size:15.5px;
  resize:vertical;min-height:118px;color:var(--ink);display:block;
}
textarea::placeholder{color:var(--ink-3)}
textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,164,65,.18)}
.service-note{
  background:#FBF2DF;border:1px solid rgba(217,164,65,.45);
  color:var(--gold-ink);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;line-height:1.8;margin-bottom:14px;
}

/* ---------------- mascot ---------------- */
.mascot{display:block;width:112px;max-width:100%;animation:floaty 4.2s ease-in-out infinite;transform-origin:50% 92%}
.mascot svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes floaty{50%{transform:translateY(-4px) scale(1.014)}}
.mascot .m-eyes{transform-origin:66px 50px;transform-box:view-box;transition:transform .12s ease}
.mascot.blink .m-eyes{transform:scaleY(.12)}
.mascot.shake{animation:shaky .55s ease-in-out infinite}
@keyframes shaky{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.mascot.nod{animation:noddy .62s ease}
@keyframes noddy{40%{transform:translateY(6px) scale(.98)}70%{transform:translateY(-2px)}}
.mascot .arm{transform-box:view-box;transition:transform .3s ease}
.mascot .arm-l{transform-origin:17px 62px}
.mascot .arm-r{transform-origin:115px 62px}
.mascot.hug .arm-l{transform:rotate(-38deg)}
.mascot.hug .arm-r{transform:rotate(38deg)}
.mascot .m-seal{transform-origin:66px 80px;transform-box:view-box;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.mascot.seal-pop .m-seal{transform:scale(1.18)}

/* ---------------- home ---------------- */
.shop-sign{
  display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid rgba(217,164,65,.5);
  border-radius:var(--radius);box-shadow:var(--shadow),inset 0 0 0 3px rgba(247,200,211,.35);
  padding:14px 14px 12px;text-align:center;margin-bottom:16px;
}
.shop-sign h1{font-size:23px;flex:1 1 auto}
.sign-sub{font-size:11.5px;color:var(--ink-2);line-height:1.6;margin-top:2px}
.sign-line{width:16px;height:1px;background:var(--gold);flex:0 0 auto;opacity:.7}
.shop-sign{flex-wrap:wrap;justify-content:center}
.shop-sign .sign-line{display:none}
.shop-sign h1,.shop-sign .sign-sub{width:100%}

.greet{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.greet-mascot{width:96px;flex:0 0 auto}
.bubble{
  position:relative;background:var(--paper);
  border:1px solid rgba(247,200,211,.95);border-radius:18px;
  padding:12px 14px;box-shadow:var(--shadow);flex:1 1 auto;min-width:0;
  font-size:13.5px;line-height:1.7;
}
.bubble::before{
  content:"";position:absolute;inset-inline-start:-7px;top:22px;
  width:13px;height:13px;background:var(--paper);
  border-inline-start:1px solid rgba(247,200,211,.95);
  border-bottom:1px solid rgba(247,200,211,.95);
  transform:rotate(45deg);
}
.bubble-small{font-size:12px;color:var(--ink-2);margin-top:2px}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.door{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  text-align:start;padding:14px 13px 15px;
  background:var(--paper);
  border:1px solid var(--pink);
  border-radius:var(--radius);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);
  min-height:126px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.door::before{
  content:"";position:absolute;inset-inline:14px;top:9px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,164,65,.55),transparent);
}
.door:active{transform:scale(.985)}
@media (hover:hover){.door:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}}
.door--wide{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center;gap:12px;padding-block:14px}
.door--green{background:var(--green-soft);border-color:rgba(168,195,160,.95)}
.door--green .door-icon{background:#E1EBDB;border-color:rgba(168,195,160,.9);color:var(--green-ink)}
.door--gold{background:#FDF6E8;border-color:rgba(217,164,65,.55)}
.door--gold .door-icon{background:#FBF2DF;border-color:rgba(217,164,65,.55);color:var(--gold-ink)}
.door-icon{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--pink-soft);border:1px solid var(--pink);color:var(--ink);
}
.door-icon svg{width:23px;height:23px}
.door-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.door-body strong{font-family:'El Messiri',serif;font-size:17px;line-height:1.4}
.door-body small{font-size:12px;color:var(--ink-2);line-height:1.55}
.door-knob{
  position:absolute;bottom:12px;inset-inline-end:12px;
  width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 2px rgba(217,164,65,.2),inset 0 0 0 1px rgba(90,58,66,.25);
}
.door--wide .door-knob{position:static;display:none}

.today-strip{display:grid;gap:10px;margin-top:16px}
.today-card{
  display:flex;flex-direction:column;gap:2px;text-align:start;
  background:var(--paper);border:1px dashed rgba(217,164,65,.6);
  border-radius:var(--radius-sm);padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.today-card--green{background:var(--green-soft);border-color:rgba(168,195,160,.95);border-style:solid}
.today-card strong{font-family:'El Messiri',serif;font-size:15.5px;font-weight:600}
.today-label{font-size:11px;font-weight:700;color:var(--gold-ink);letter-spacing:.02em}
.today-card--green .today-label{color:var(--green-ink)}
.today-more{
  display:inline-flex;align-items:center;gap:2px;
  font-size:11.5px;color:var(--ink-2);margin-top:3px;font-weight:700;
}
.today-more svg{width:14px;height:14px}
.slogan{
  text-align:center;font-family:'El Messiri',serif;font-size:14px;
  color:var(--ink-2);margin:22px 0 8px;letter-spacing:.01em;
}
.plans-link{
  display:block;margin:0 auto 4px;font-size:12.5px;font-weight:700;
  color:var(--gold-ink);text-decoration:underline;text-underline-offset:4px;
  padding:10px 14px;min-height:44px;
}

/* ---------------- composer ---------------- */
.composer{padding:16px}
.composer .cmp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.cmp-privacy{font-size:11.5px;color:var(--ink-2)}
.composer textarea{margin-bottom:8px}
.samples{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.samples::-webkit-scrollbar{display:none}
.sample-chip{
  flex:0 0 auto;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12px;padding:7px 12px;border-radius:999px;
  background:var(--pink-soft);border:1px solid var(--pink);color:var(--ink);
  min-height:34px;
}
.sample-chip:active{background:var(--pink)}
.cmp-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.cmp-min{font-size:11.5px;color:var(--ink-3)}
.trust{font-size:11.5px;color:var(--ink-2);text-align:center;margin-top:10px;line-height:1.7}
.cmp-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cmp-row .btn{flex:1 1 140px}

.sealed-wrap,.sending-wrap,.saved-wrap{text-align:center;padding:6px 0}
.env-small{width:96px;margin:0 auto 6px}
.sealed-title{font-family:'El Messiri',serif;font-size:18px;margin-top:4px}
.sealed-note{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.75}
.price-line{
  display:inline-flex;align-items:center;gap:6px;
  margin:12px auto;padding:6px 14px;border-radius:999px;
  background:#FBF2DF;border:1px solid rgba(217,164,65,.5);
  font-size:13px;font-weight:700;color:var(--gold-ink);
}
.price-line.is-free{background:var(--green-soft);border-color:rgba(168,195,160,.95);color:var(--green-ink)}
.sending-wrap [data-mascot-mini]{width:100px;margin:0 auto 4px}
.sending-title{font-family:'El Messiri',serif;font-size:17px;margin-top:4px}
.dots{display:flex;gap:5px;justify-content:center;margin:8px 0 4px}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--pink-2);animation:dotPulse 1.1s infinite}
.dots span:nth-child(2){animation-delay:.18s}
.dots span:nth-child(3){animation-delay:.36s}
@keyframes dotPulse{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.answer-card{text-align:start}
.answer-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.seal-stamp{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gold);color:#FFF8EC;
  font-family:'El Messiri',serif;font-size:18px;font-weight:700;
  border:1px solid rgba(90,58,66,.25);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  animation:stampIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stampIn{0%{transform:scale(.3) rotate(-16deg);opacity:0}100%{transform:none;opacity:1}}
.answer-head strong{display:block;font-family:'El Messiri',serif;font-size:16px}
.answer-head small{font-size:11.5px;color:var(--ink-2)}
.answer-text{
  white-space:pre-wrap;font-size:14.5px;line-height:1.95;
  background:#FFFDFA;border:1px solid rgba(247,200,211,.9);
  border-radius:16px;padding:13px 14px;
}
.answer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.answer-actions .btn.primary{margin-inline-start:auto}

.err-title{font-family:'El Messiri',serif;font-size:16px;color:#8C2F2F}
.err-body{font-size:13px;color:var(--ink-2);line-height:1.8;margin-top:4px}

/* ---------------- discussions ---------------- */
.topic-card{margin-bottom:14px}
.topic-top{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.topic-title{font-size:20px;margin-bottom:6px}
.topic-intro{font-size:14px;line-height:1.9;color:var(--ink)}
.topic-q-label{font-size:12px;font-weight:700;color:var(--gold-ink);margin-top:14px;margin-bottom:4px}
.topic-questions li{
  position:relative;padding-inline-start:20px;font-size:13.5px;line-height:1.85;margin-bottom:5px;color:var(--ink);
}
.topic-questions li::before{
  content:"؟";position:absolute;inset-inline-start:0;color:var(--gold);font-weight:700;
}
.comment-card{margin-bottom:18px}
.comment-list{margin-top:12px;display:grid;gap:8px}
.comment-item{
  background:var(--pink-soft);border:1px solid var(--pink);border-radius:14px;
  padding:10px 12px;display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
}
.comment-item p{font-size:13.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.comment-item time{display:block;font-size:10.5px;color:var(--ink-2);margin-top:3px}
.icon-btn{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink-2);border:1px solid transparent;
}
.icon-btn svg{width:16px;height:16px}
.icon-btn:active{background:rgba(90,58,66,.08)}
@media (hover:hover){.icon-btn:hover{background:rgba(90,58,66,.07)}}
.chips-scroll{display:flex;gap:6px;overflow-x:auto;padding-block:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips-scroll::-webkit-scrollbar{display:none}
.topic-chip{
  flex:0 0 auto;font-size:12.5px;padding:7px 13px;border-radius:999px;
  background:var(--paper);border:1px solid rgba(217,164,65,.45);color:var(--ink);
  min-height:36px;white-space:nowrap;
}
.topic-chip[aria-pressed="true"]{background:var(--pink);border-color:var(--pink-2);font-weight:700}
.topics-strip{margin-top:4px}

/* ---------------- awareness ---------------- */
.tip-hero{border-color:rgba(168,195,160,.95);background:linear-gradient(180deg,#F3F8F0,var(--paper) 65%)}
.tip-card{display:flex;flex-direction:column;gap:6px}
.tip-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tip-title{font-size:17px;line-height:1.5}
.tip-lead{font-size:13.5px;line-height:1.85;color:var(--ink)}
.tip-body{margin-top:10px}
.tip-toggle{align-self:flex-start;margin-top:10px}
.tip-step{
  margin-top:10px;font-size:12.5px;line-height:1.8;
  background:var(--green-soft);border:1px solid rgba(168,195,160,.9);
  color:var(--green-ink);border-radius:12px;padding:9px 12px;
}
.read-chip{font-size:10.5px}
.aware-bar{margin:16px 0 10px;display:flex;flex-direction:column;gap:2px}
.aware-bar > .chip{align-self:flex-start}
.cards-grid{display:grid;gap:12px}
@media (min-width:700px){.cards-grid{grid-template-columns:1fr 1fr}}

/* ---------------- drawer ---------------- */
.drawer-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.confirm-clear{
  background:#FBE7E7;border:1px solid rgba(140,47,47,.25);
  border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:12px;
}
.confirm-clear p{font-size:13px;color:#8C2F2F;margin-bottom:8px}
.entry{margin-bottom:12px;padding:15px}
.entry-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.entry-date{font-size:11px;color:var(--ink-3);margin-inline-start:auto}
.entry-text{font-size:14px;line-height:1.9;white-space:pre-wrap;word-break:break-word}
.entry-answer{
  margin-top:10px;display:flex;gap:9px;align-items:flex-start;
  background:var(--pink-soft);border:1px solid var(--pink);border-radius:14px;padding:10px 12px;
}
.entry-answer p{font-size:13.5px;line-height:1.9;white-space:pre-wrap;word-break:break-word}
.seal-mini{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--gold);color:#FFF8EC;
  display:grid;place-items:center;font-family:'El Messiri',serif;font-size:12px;font-weight:700;
}
.entry-foot{display:flex;justify-content:flex-end;margin-top:8px}
.empty{text-align:center;padding:26px 10px}
.empty .mascot{width:104px;margin:0 auto 8px}
.empty p{font-size:14px;color:var(--ink-2);margin-bottom:14px}
.empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------------- plans ---------------- */
.view--plans{padding-bottom:60px}
.plans{display:grid;gap:12px}
@media (min-width:700px){.plans{grid-template-columns:1fr 1fr}}
.plan{
  background:var(--paper);border:1px solid var(--pink);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;flex-direction:column;
}
.plan--main{background:#FDF6E8;border-color:rgba(217,164,65,.6)}
.plan h3{font-size:17px}
.plan-price{margin:6px 0 10px;color:var(--ink);display:flex;align-items:baseline;gap:5px}
.plan-price b{font-family:'El Messiri',serif;font-size:30px;line-height:1;color:var(--ink)}
.plan-price span{font-size:12.5px;color:var(--ink-2)}
.plan-features{flex:1 1 auto}
.plan-features li{
  position:relative;padding-inline-start:18px;font-size:13.5px;line-height:1.8;margin-bottom:5px;
}
.plan-features li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--gold);font-weight:700}
.plan-lock{
  display:flex;align-items:center;gap:6px;margin-top:12px;
  font-size:11.5px;color:var(--ink-2);font-weight:700;
  background:rgba(249,241,233,.9);border:1px dashed rgba(217,164,65,.55);
  border-radius:10px;padding:7px 10px;
}
.plan-lock svg{width:15px;height:15px;flex:0 0 auto;color:var(--gold-ink)}

.honest-bar{
  position:fixed;inset-inline:0;bottom:var(--nav-h);z-index:45;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;
  background:#FBF2DF;border-top:1px solid rgba(217,164,65,.55);
  color:var(--gold-ink);font-size:12.5px;font-weight:700;text-align:center;
  pointer-events:none;
}
.honest-bar svg{width:16px;height:16px;flex:0 0 auto}
@media (min-width:760px){.honest-bar{bottom:calc(var(--nav-h) + 10px);inset-inline:auto;left:50%;transform:translateX(-50%);width:min(620px,92vw);border-radius:16px;border:1px solid rgba(217,164,65,.55);box-shadow:var(--shadow)}}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .view{animation:none}
}

/* ---------------- small phones ---------------- */
@media (max-width:359px){
  .door-body small{font-size:11px}
  .door-body strong{font-size:16px}
  .brand-text small{max-width:140px}
  .nav-item{font-size:10px}
  .nav-item svg{width:20px;height:20px}
}