/* ===== שאלון האישיות · נשמה טובה · עיצוב =====
   אותם צבעי מותג ופונט כמו באתר (Assistant). מובייל קודם. */
:root{
  --cream:#FFFFFF; --cream-2:#F3F1EC; --white:#FFFDF8; --ink:#26241E; --ink-soft:#514E44; --line:#DCD3BE;
  --gold:#CFB176; --gold-light:#DDC89F; --sage:#CFE9C4;
  --s1:#FF0000; --s1-bg:#FFEAEA; --s2:#D4A017; --s2-bg:#FBF2DC; --s3:#289A02; --s3-bg:#E5F3E1;
  --brand-green:#289A02; --brand-green-dark:#289A02;
  --hd-p:#26241E; --hd-d:#FF0000;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Assistant', sans-serif; background:linear-gradient(180deg, var(--sage) 0%, var(--cream-2) 320px, var(--cream-2) 100%); color:var(--ink); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased;}
button{font-family:inherit; color:inherit; cursor:pointer;}
button[disabled]{opacity:.45; cursor:not-allowed;}
img{max-width:100%;}
#app{max-width:680px; margin:0 auto; padding:0 16px 32px;}

/* מעטפת */
.q-top{display:flex; align-items:center; justify-content:space-between; padding:14px 0 8px;}
.q-brand img{height:48px; width:auto; display:block;}
.q-back{background:none; border:0; font-size:15px; font-weight:700; color:var(--ink-soft); padding:8px 4px;}
.q-progress{display:flex; align-items:center; gap:12px; margin:4px 0 16px;}
.q-progress-bar{flex:1; height:8px; background:rgba(255,255,255,.8); border-radius:999px; overflow:hidden;}
.q-progress-bar span{display:block; height:100%; background:linear-gradient(to left, var(--gold), var(--brand-green)); border-radius:999px; transition:width .35s ease;}
.q-chapter{font-size:13px; font-weight:800; color:var(--brand-green); white-space:nowrap;}
.q-main{display:flex; flex-direction:column; gap:14px;}
.q-foot{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:22px;}
.q-foot a{color:var(--brand-green); font-weight:700;}

/* נשמה טובה */
.q-soul{display:flex; align-items:flex-end; gap:10px;}
.q-soul img{width:56px; height:56px; object-fit:contain; flex-shrink:0;}
.q-bubble{background:#fff; border:1.5px solid var(--sage); border-radius:18px 18px 18px 4px; padding:12px 16px; font-size:15.5px; box-shadow:0 4px 14px rgba(38,36,30,.06);}
.q-bubble b{display:block; margin-bottom:2px;}
.q-bubble p + p{margin-top:6px;}

/* כרטיס */
.q-card{background:#fff; border:1.5px solid var(--line); border-radius:24px; padding:24px 20px; box-shadow:0 10px 30px rgba(38,36,30,.06);}
.q-card h1{font-size:clamp(26px,6vw,34px); font-weight:800; line-height:1.2; margin:4px 0 10px;}
.q-card h2{font-size:clamp(21px,5vw,26px); font-weight:800; line-height:1.3; margin:4px 0 8px;}
.q-card h3{font-size:17px; font-weight:800; margin:16px 0 4px;}
.q-card p{font-size:15.5px;}
.q-eyebrow{display:block; font-size:13px; font-weight:800; color:var(--gold); letter-spacing:.02em;}
.q-sub{color:var(--ink-soft); margin-bottom:14px;}
.q-small, .q-note{font-size:13.5px; color:var(--ink-soft); text-align:center; margin-top:10px;}
.q-note{text-align:right;}
.q-group-title{font-size:15px; font-weight:800; margin:16px 0 8px;}
.chip{display:inline-block; font-size:12px; font-weight:800; padding:2px 10px; border-radius:999px; background:var(--cream-2); color:var(--ink-soft); vertical-align:middle;}
.chip-fixed{background:var(--s3-bg); color:var(--brand-green);}
.chip-release{background:var(--s2-bg); color:#8a6a10;}

/* כפתורים */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:999px; font-size:16px; font-weight:800; padding:13px 26px; text-decoration:none; transition:transform .15s ease, background .15s ease;}
.btn:hover:not([disabled]){transform:translateY(-1px);}
.btn-primary{background:var(--brand-green); color:#fff; box-shadow:0 6px 16px rgba(40,154,2,.22);}
.btn-primary:hover:not([disabled]){background:var(--brand-green-dark);}
.btn-soft{background:#fff; color:var(--brand-green); border:1.5px solid var(--brand-green);}
.btn-link{background:none; color:var(--ink-soft); font-weight:700; text-decoration:underline; text-underline-offset:3px; padding:10px;}
.btn-block{width:100%;}
.q-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px;}
.q-actions-col{flex-direction:column; align-items:stretch;}

/* פתיחה */
.q-intro{text-align:center;}
.q-intro-soul{width:110px; height:110px; object-fit:contain; margin:0 auto 6px; display:block;}
.q-lead{font-size:17px !important; font-weight:600; margin-bottom:8px;}
.q-legend{list-style:none; display:flex; flex-direction:column; gap:8px; margin:16px 0; text-align:right; font-size:14px; color:var(--ink-soft);}
.q-private{background:var(--s3-bg); border-radius:14px; padding:10px 14px; font-size:14px !important; margin-bottom:18px; text-align:right;}

/* אפשרויות */
.q-options{display:flex; flex-direction:column; gap:10px;}
.q-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.q-three{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.q-opt{text-align:right; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:13px 16px; font-size:15.5px; font-weight:600; transition:border-color .15s ease, background .15s ease;}
@media (hover:hover){ .q-opt:not(.on):hover{border-color:var(--gold);} } /* בטלפון אין ריחוף - אחרת נשאר סימון זהב על מה שנגעו בו */
.q-opt.on{border-color:var(--brand-green); background:var(--s3-bg); color:var(--brand-green-dark);}
.q-opt.wide{grid-column:1 / -1;}
.q-opt-rich{display:flex; flex-direction:column; gap:2px; text-align:center;}
.q-opt-rich b{font-size:15px;}
.q-opt-rich span{font-size:13px; font-weight:500; color:var(--ink-soft);}
.q-elab{margin-top:14px;}
.q-elab label{display:block; font-size:14px; font-weight:700; margin-bottom:6px;}
textarea, input, select{width:100%; font-family:inherit; font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px;}
textarea:focus, input:focus, select:focus{outline:none; border-color:var(--brand-green);}

/* קבוצות וסוגים */
.q-groups{display:flex; flex-direction:column; gap:10px;}
.q-group{display:flex; gap:12px; align-items:flex-start; text-align:right; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px;}
.q-group.on{border-color:var(--brand-green); background:var(--s3-bg);}
.q-group-icon{font-size:26px; line-height:1;}
.q-group-body{display:flex; flex-direction:column; gap:3px;}
.q-group-body b{font-size:16px;}
.q-group-body > span{font-size:14px; color:var(--ink-soft);}
.q-group-types{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.q-group-types span{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; background:var(--cream-2); border-radius:999px; padding:2px 10px 2px 4px; color:var(--ink);}
.q-group-types img{width:20px; height:20px;}

.q-matchup{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch; margin-top:10px;}
.q-match{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:16px 12px; transition:border-color .15s ease, transform .1s ease;}
.q-match:hover{border-color:var(--brand-green); transform:translateY(-2px);}
.q-match img{width:52px; height:52px;}
.q-match-name{font-size:12px; font-weight:800; color:var(--gold);}
.q-match-text{font-size:15px; font-weight:600; line-height:1.5;}
.q-vs{align-self:center; font-size:13px; font-weight:800; color:var(--gold);}

.q-type-head{display:flex; align-items:center; gap:14px; margin:8px 0 10px;}
.q-type-head img{width:72px; height:72px;}
.q-word{font-size:14px; font-weight:700; color:var(--gold);}
.q-near{background:var(--cream-2); border-radius:12px; padding:10px 14px; margin-top:14px; font-size:14px !important;}
.q-near img{width:20px; height:20px; vertical-align:middle;}
.q-types{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.q-type-pick{display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:10px 6px;}
.q-type-pick.on{border-color:var(--brand-green); background:var(--s3-bg);}
.q-type-pick img{width:40px; height:40px;}
.q-type-pick b{font-size:13.5px;}
.q-type-pick span{font-size:11.5px; color:var(--gold); font-weight:700;}

/* חושים וצ'אקרות */
.q-rows{display:flex; flex-direction:column; gap:12px;}
.q-row{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px 16px;}
.q-row-text{display:flex; flex-direction:column; gap:2px; margin-bottom:10px;}
.q-row-text b{font-size:17px;}
.q-row-text span{font-size:14px; color:var(--ink-soft); line-height:1.5;}
.q-levels{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.q-level{background:var(--cream-2); border:1.5px solid transparent; border-radius:999px; padding:8px 4px; font-size:14.5px; font-weight:700;}
.q-level.on.l1{background:var(--s1-bg); border-color:var(--s1); color:#9a1010;}
.q-level.on.l2{background:var(--s2-bg); border-color:var(--s2); color:#7a5a12;}
.q-level.on.l3{background:var(--s3-bg); border-color:var(--s3); color:var(--brand-green-dark);}

/* עיצוב אנושי */
.q-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.q-fields label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700;}
.q-fields label[hidden]{display:none;}
.q-hd-result{display:grid; grid-template-columns:140px 1fr; gap:14px; align-items:center; background:var(--cream-2); border-radius:16px; padding:14px; margin-top:16px;}
.q-hd-result h3{margin-top:2px;}
.q-hd-result p{font-size:14px;}
.q-hd-graph svg{width:100%; height:auto;}
.hd-ch{stroke:#e5dfd0; stroke-width:4; fill:none; stroke-linecap:round;}
.hd-on{stroke-width:4; fill:none; stroke-linecap:round;}
.hd-center{fill:#fff; stroke:var(--ink-soft); stroke-width:1.5;}
.hd-center.on{fill:var(--gold); stroke:#a8853f;}

/* תוצאה */
.q-result-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 6px;}
.q-res{display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:14px;}
.q-res img{width:60px; height:60px;}
.q-res h3{margin:4px 0 0; font-size:20px;}
.q-res-stage{border-color:var(--gold);}
.q-stage-dot{font-size:36px; line-height:1;}
.q-soul-tone{display:flex; gap:10px; align-items:center; background:var(--s3-bg); border-radius:16px; padding:12px 14px; margin-top:16px;}
.q-soul-tone img{width:44px; height:44px; object-fit:contain;}
.q-soul-tone p{font-size:14.5px !important;}
.q-result-small{margin-top:14px;}
.q-result-small{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}
.q-res-talent{grid-column:1/-1; display:flex; align-items:baseline; gap:8px; min-width:0; overflow:hidden;} /* הכישרון בשורה אחת לרוחב מלא, כדי שהתוצאה תיכנס במסך */
.q-res-talent h4{margin:0 !important; white-space:nowrap;}
.q-res-talent p{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.q-res-box{background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:12px 14px;}
.q-res-box h4{font-size:15px; font-weight:800; margin-bottom:6px;}
.q-res-box p{font-size:14px !important;}
.q-dots{display:flex; flex-wrap:wrap; gap:6px;}
.q-dots span{font-size:13px; background:var(--cream-2); border-radius:999px; padding:3px 10px;}
.q-saved{text-align:center; font-weight:700; color:var(--brand-green); margin-top:16px;}
.q-crisis .q-bubble{font-size:16px;}
.q-crisis .btn{margin-top:10px;}

@media (max-width:520px){
  .q-grid, .q-result-grid, .q-fields{grid-template-columns:1fr;}
  .q-three{grid-template-columns:1fr;}
  .q-matchup{grid-template-columns:1fr;}
  .q-vs{justify-self:center;}
  .q-hd-result{grid-template-columns:1fr;}
  .q-hd-graph{max-width:180px; margin:0 auto;}
}

/* ===== כל מסך במסך אחד בטלפון (15.9.2026) ===== */
.q-more{margin-top:10px;}
.q-more summary{cursor:pointer; font-weight:800; font-size:15px; color:var(--brand-green);}
.q-more p{margin-top:6px;}
@media (max-width:520px){
  #app{padding:0 14px 10px;}
  .q-top{padding:8px 0 4px;}
  .q-brand img{height:34px;}
  .q-back{font-size:14px; padding:6px 2px;}
  .q-progress{margin:2px 0 8px; gap:8px;}
  .q-progress-bar{height:6px;}
  .q-chapter{font-size:12px;}
  .q-main{gap:8px;}
  .q-foot{display:none;}
  .q-soul img{width:38px; height:44px;}
  .q-bubble{padding:7px 12px; font-size:14px; line-height:1.45; border-radius:14px 14px 14px 4px;}
  .q-card{padding:14px 14px; border-radius:18px;}
  .q-card h1{font-size:23px; margin:2px 0 6px;}
  .q-card h2{font-size:19px; line-height:1.25; margin:2px 0 6px;}
  .q-card h3{font-size:15px; margin:10px 0 2px;}
  .q-card p{font-size:14.5px; line-height:1.5;}
  .q-eyebrow{font-size:12px;}
  .q-sub{font-size:13.5px; margin-bottom:8px; line-height:1.4;}
  .q-small, .q-note{font-size:12.5px; margin-top:6px;}
  .q-options{gap:9px;}
  .q-grid{grid-template-columns:1fr 1fr; gap:7px;}
  .q-grid.q-long{grid-template-columns:1fr;}
  .q-opt{padding:11px 13px; font-size:15.5px; border-radius:12px; line-height:1.35;}
  .q-elab{margin-top:8px;}
  .q-elab label{font-size:13px; margin-bottom:4px;}
  textarea, input, select{font-size:16px; padding:8px 10px; border-radius:10px;}
  .q-actions{margin-top:10px; gap:6px;}
  .btn{font-size:15px; padding:11px 22px;}
  .btn-link{padding:8px;}
  /* פתיחה */
  .q-intro-soul{width:64px; height:64px; margin-bottom:2px;}
  .q-lead{font-size:15px !important; margin-bottom:4px;}
  .q-legend{margin:8px 0; gap:4px; font-size:13px;}
  .q-private{padding:8px 12px; font-size:13px !important; margin-bottom:10px;}
  /* קבוצות רגישות */
  .q-groups{gap:7px;}
  .q-group{padding:9px 12px; gap:10px; border-radius:14px;}
  .q-group-icon{font-size:22px;}
  .q-group-body b{font-size:15px;}
  .q-group-body > span:not(.q-group-types){display:none;}
  .q-group-types{margin-top:2px; gap:4px;}
  .q-group-types span{font-size:12px; padding:1px 8px 1px 3px;}
  .q-group-types img{width:18px; height:18px;}
  /* טורניר */
  .q-matchup{grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
  .q-vs{display:none;}
  .q-match{padding:10px 8px; gap:4px; border-radius:14px;}
  .q-match img{width:40px; height:40px;}
  .q-match-text{font-size:13.5px; line-height:1.4;}
  /* סוג הרגישות */
  .q-type-head{margin:4px 0 6px; gap:10px;}
  .q-type-head img{width:52px; height:52px;}
  .q-near{margin-top:8px; padding:8px 12px;}
  .q-group-title{display:none;}
  .q-types{grid-template-columns:repeat(4,1fr); gap:6px;}
  .q-type-pick{padding:7px 2px; border-radius:12px;}
  .q-type-pick img{width:30px; height:30px;}
  .q-type-pick b{font-size:12px; line-height:1.2; text-align:center;}
  .q-type-pick span{display:none;}
  /* היקשרות ותודעה: כרטיסים קטנים עם תיאור מקוצר */
  .q-opt-rich{padding:8px 8px; gap:1px;}
  .q-opt-rich b{font-size:15px;}
  .q-opt-rich span{font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
  .q-three{grid-template-columns:repeat(3,1fr); gap:6px;}
  .q-three + .q-group-title, .q-three{margin-bottom:2px;}
  /* חושים וצ׳אקרות: שורה אחת לכל פריט */
  .q-rows{gap:8px;}
  .q-row{padding:9px 12px; border-radius:12px;}
  .q-row-text{margin-bottom:5px; gap:0;}
  .q-row-text b{font-size:16px;}
  .q-row-text span{font-size:13px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .q-levels{gap:5px;}
  .q-level{padding:6px 2px; font-size:14px;}
  /* עיצוב אנושי */
  .q-fields{grid-template-columns:1fr 1fr; gap:8px;}
  .q-fields label{font-size:13px; gap:3px;}
  .q-hd-result{grid-template-columns:90px 1fr; gap:10px; padding:10px; margin-top:10px;}
  .q-hd-graph{max-width:90px; margin:0;}
  .q-hd-result p{font-size:12.5px !important; line-height:1.4;}
  .q-hd-result p:nth-of-type(2){display:none;}
  /* תוצאה */
  .q-result-grid{grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 4px;}
  .q-res{padding:8px; gap:8px; border-radius:14px; flex-direction:column; text-align:center;}
  .q-res img{width:42px; height:42px;}
  .q-res h3{font-size:15px; margin:2px 0 0;}
  .q-res .q-word{font-size:12px;}
  .q-res .chip{font-size:10.5px; padding:1px 7px;}
  .q-stage-dot{font-size:28px;}
  .q-soul-tone{margin-top:8px; padding:8px 10px; gap:8px;}
  .q-soul-tone img{width:32px; height:36px;}
  .q-soul-tone p{font-size:13px !important; line-height:1.4;}
  .q-result-small{margin-top:8px;}
  .q-res-box{padding:8px 10px; border-radius:12px;}
  .q-res-box h4{font-size:13px; margin-bottom:3px;}
  .q-res-box h4 .chip{display:none;}
  .q-res-box p, .q-dots span{font-size:12px !important;}
  .q-dots{gap:3px;}
  .q-dots span{padding:1px 7px;}
  .q-saved{margin-top:8px; font-size:13.5px;}
  .q-actions-col{gap:4px;}
}
@media (max-width:520px) and (max-height:700px){
  .q-soul{display:none;}
  .q-sub{display:none;}
  .q-sub-keep{display:block;} /* 2.10.2026: ההסבר על שעת הלידה (בקשת דגן) נשאר גם בטלפון נמוך, במסך הזה יש מקום */
}

/* ===== 3 שלבים ===== */
.q-steps{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:2px 0 10px; padding:0;}
.q-step{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink-soft); opacity:.6;}
.q-step-num{width:22px; height:22px; border-radius:50%; background:#fff; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0;}
.q-step-name{white-space:nowrap;}
.q-step.now{opacity:1; color:var(--ink);}
.q-step.now .q-step-num{background:var(--brand-green); border-color:var(--brand-green); color:#fff;}
.q-step.done{opacity:1; color:var(--brand-green);}
.q-step.done .q-step-num{background:var(--s3-bg); border-color:var(--s3); color:var(--brand-green);}
.q-step-bar{flex-basis:100%; height:4px; border-radius:99px; background:rgba(255,255,255,.85); overflow:hidden;}
.q-step-bar i{display:block; height:100%; background:linear-gradient(to left, var(--gold), var(--brand-green)); border-radius:99px; transition:width .35s ease;}
.q-stage-done{background:var(--s3-bg); color:var(--brand-green-dark); border:1px solid #CFE9C4; border-radius:12px; padding:6px 12px; font-size:13.5px; font-weight:700; margin:0 0 8px; animation:q-pop .5s ease;}
@keyframes q-pop{from{transform:scale(.97); opacity:0;} to{transform:none; opacity:1;}}
@media (prefers-reduced-motion:reduce){ .q-stage-done{animation:none;} }
@media (max-width:520px){
  .q-steps{margin:0 0 6px; gap:4px;}
  .q-step{font-size:11.5px; gap:4px;}
  .q-step-num{width:19px; height:19px; font-size:10.5px;}
  .q-stage-done{font-size:12.5px; padding:5px 10px; margin-bottom:6px;}
}

/* ===== חושים וצ׳אקרות בשורה אחת + תוצאה קומפקטית ===== */
.q-level-legend{display:none;}
@media (max-width:520px){
  .q-level-legend{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:0 0 6px;}
  .q-rows + .q-actions, .q-card .q-rows{margin-top:0;}
  .q-card:has(.q-rows) .q-sub{display:none;}
  .q-row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:8px 12px;}
  .q-row-text{margin:0; min-width:0;}
  .q-row-text b{font-size:15.5px; line-height:1.3;}
  .q-row-text span{font-size:13px;}
  .q-levels{display:grid; grid-template-columns:repeat(3, 42px); gap:5px;}
  .q-level{padding:6px 0; font-size:16px; line-height:1; border-radius:10px;}
  .q-level-name{display:none;}
  .q-level.on{box-shadow:0 0 0 2px currentColor inset;}
  .q-soul-result{display:none;}
  .q-result h1{font-size:20px;}
  .q-result .q-actions-col .btn-link{padding:4px; font-size:13px;}
}
@media (max-width:520px){
  .q-result .q-eyebrow{display:none;}
  .q-result h1{font-size:19px; margin:0 0 4px;}
  .q-res .chip{display:none;}
  .q-res{padding:6px; gap:4px;}
  .q-res img{width:36px; height:36px;}
  .q-stage-dot{font-size:24px;}
  .q-res-box{padding:6px 10px;}
  .q-result-small{gap:6px; margin-top:6px;}
  .q-saved{margin-top:6px; font-size:12.5px;}
  .q-result .btn{padding:10px 20px;}
  .q-card:has(#hd-date) .q-sub{display:none;}
  .q-card:has(#hd-date) .q-sub-keep{display:block; font-size:13px; margin-bottom:10px;} /* 2.10.2026: ההסבר על השעה (בקשת דגן) מוצג גם בטלפון; נמדד: אפס גלילה ב-600 עד 844 */
}
@media (max-width:520px){ .q-saved{display:none;} }

/* ===== טיפה יותר גדול בטלפון (15.9.2026) - היה קטן מדי ===== */
@media (max-width:520px){
  .q-brand img{height:38px;}
  .q-bubble{font-size:15px; padding:8px 13px;}
  .q-card{padding:16px 16px;}
  .q-card h1{font-size:25px;}
  .q-card h2{font-size:23px; margin:2px 0 12px;}
  .q-card p{font-size:15.5px;}
  .q-sub{font-size:14.5px;}
  .q-small, .q-note{font-size:13.5px;}
  .q-options{gap:12px;}
  .q-grid{gap:12px;}
  .q-opt{padding:13px 15px; font-size:16.5px;}
  .btn{font-size:16px; padding:12px 24px;}
  .q-step{font-size:12.5px;}
  .q-step-num{width:21px; height:21px; font-size:11.5px;}
  .q-group-body b{font-size:15px;}
  .q-card:has(.q-groups) .q-bubble{font-size:14px; padding:7px 12px;}
  .q-card:has(.q-groups) h2{font-size:19px; margin-bottom:4px;}
  .q-card:has(.q-groups) .q-sub{font-size:13.5px; margin-bottom:6px;}
  .q-card:has(.q-groups) .btn{padding:11px 22px;}
  .q-groups{gap:6px;}
  .q-group{padding:8px 12px;}
  .q-row-text b{font-size:16.5px;}
  .q-match-text{font-size:15.5px;}
  .q-opt-rich b{font-size:16px;}
  .q-opt-rich span{font-size:13.5px;}
  .q-type-pick b{font-size:12.5px;}
  .q-fields label{font-size:14px;}
}

/* סימון בחירה אחד וברור, בלי הבהוב צבעים בנגיעה */
.q-opt{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
.q-opt.on{border-color:var(--brand-green); background:var(--s3-bg); color:var(--brand-green-dark); box-shadow:0 0 0 1px var(--brand-green) inset;}

/* ===== עמוד מלא בטלפון (16.9.2026): השאלון ממלא את כל המסך, גדול יותר, ועדיין בלי גלילה ===== */
@media (max-width:520px){
  #app{min-height:100svh; display:flex; flex-direction:column; padding-bottom:12px;}
  .q-main{flex:1; display:flex; flex-direction:column; min-height:0;}
  .q-card{flex:1; display:flex; flex-direction:column; min-height:0;}
  .q-card h1{font-size:26px;}
  .q-card h2{font-size:25px; line-height:1.28;}
  .q-bubble{font-size:15.5px;}
  .q-sub{font-size:15px;}
  .q-opt{font-size:16.5px; padding:12px 14px; border-radius:14px;}
  /* המקום הפנוי מתחלק בין התשובות, והכפתורים יורדים לתחתית */
  .q-card > .q-options, .q-card > .q-groups, .q-card > .q-rows{flex:1 0 auto; align-content:center;}
  .q-card > .q-options:not(.q-grid){justify-content:center;}
  .q-card > .q-options.q-grid{grid-auto-rows:auto; align-content:center;}
  .q-card > .q-options.q-grid .q-opt{max-height:86px;}
  .q-card > .q-groups{display:flex; flex-direction:column; justify-content:center;}
  .q-actions{margin-top:auto; padding-top:12px;}
  .btn{font-size:17px; padding:13px 26px;}
}
@media (max-width:520px){
  .q-card > .q-options.q-grid{grid-auto-rows:minmax(64px, 104px); align-content:center; gap:12px;}
  .q-card > .q-options.q-grid .q-opt{max-height:none; font-size:17px;}
}
@media (max-width:520px){
  .q-card > .q-options.q-grid{grid-auto-rows:minmax(min-content, 104px); gap:10px;}
}
/* מסך עם הרבה תשובות: שלב ביניים שעדיין ממלא את העמוד, ואם צריך - הגודל הקומפקטי */
@media (max-width:520px){
  #app.q-tight .q-card h2{font-size:23px;}
  #app.q-tight .q-bubble{font-size:14.5px;}
  #app.q-tight .q-opt{font-size:16.5px; padding:12px 14px;}
  #app.q-tight .q-card > .q-options.q-grid{grid-auto-rows:auto; align-content:center; gap:12px;}
  #app.q-tight .q-card > .q-options:not(.q-grid){justify-content:center; gap:12px;}
  #app.q-tighter .q-card h2{font-size:21px; margin-bottom:10px;}
  #app.q-tighter .q-card h1{font-size:23px;}
  #app.q-tighter .q-bubble{font-size:14px;}
  #app.q-tighter .q-sub{font-size:13.5px;}
  #app.q-tighter .q-opt{font-size:15.5px; padding:10px 13px;}
  /* מסך עם הרבה תשובות קטנות בשתי עמודות נשאר בדיוק בגודל של היום ברמה השנייה.
     אחרת ההגדלה מפילה אותו לרמת הדחיסה השלישית, והוא יוצא קטן יותר ממה שהיה. */
  #app.q-tighter .q-card > .q-options.q-grid{gap:10px;}
  #app.q-tighter .q-grid .q-opt{font-size:14.5px; padding:9px 12px;}
  #app.q-tighter .q-card > .q-options:not(.q-grid){gap:11px;}
  #app.q-tighter .btn{font-size:15px; padding:11px 22px;}
}

/* ===== תשובות בגובה קבוע ורווח קטן, חלון "במילים שלי", וחזרה ברורה (16.9.2026) ===== */
@media (max-width:520px){
  .q-card > .q-options:not(.q-grid){justify-content:flex-start !important; gap:10px !important;}
  .q-card > .q-options.q-grid{grid-auto-rows:auto !important; align-content:start !important; gap:10px !important;}
  .q-card > .q-groups{justify-content:flex-start !important; gap:8px !important;}
  .q-card .q-opt{min-height:52px; display:flex; align-items:center;}
  .q-card .q-opt.q-opt-rich{min-height:0; display:flex; flex-direction:column;}
}
.q-elab-row{margin-top:12px; display:flex; flex-direction:column; gap:6px;}
.q-elab-btn{align-self:flex-start; background:#fff; border:1.5px dashed var(--gold-light); border-radius:999px; padding:8px 14px; font-weight:800; font-size:14.5px; color:var(--ink);}
.q-elab-btn small{font-weight:600; color:var(--ink-soft);}
.q-elab-preview{margin:0; font-size:13.5px; color:var(--ink-soft); font-style:italic;}
.q-modal{position:fixed; inset:0; z-index:100; background:rgba(20,18,14,.45); display:flex; align-items:flex-end; justify-content:center; padding:0;}
.q-modal-card{width:100%; max-width:560px; background:var(--white); border-radius:24px 24px 0 0; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px; animation:q-pop .25s ease;}
.q-modal-card b{font-size:18px;}
.q-modal-card p{margin:0; font-size:14px; color:var(--ink-soft);}
.q-modal-card textarea{width:100%; font-size:16px; padding:12px; border-radius:14px; border:1.5px solid var(--line); resize:none;}
.q-modal-actions{display:flex; align-items:center; gap:12px;}
@media (min-width:521px){ .q-modal{align-items:center;} .q-modal-card{border-radius:24px;} }
.q-back{background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:6px 14px; font-weight:800; color:var(--ink);}
.q-back-inline{font-size:14px; color:var(--ink-soft); font-weight:700;}
@media (max-width:520px){
  .q-card .q-actions{flex-wrap:nowrap; gap:8px;}
  .q-back-inline{font-size:13px; white-space:nowrap; padding:6px 2px; margin-inline-start:auto;}
  #app.q-tight .q-card .q-opt{min-height:44px;}
  #app.q-tighter .q-card .q-opt{min-height:0;}
  #app.q-tight .q-card > .q-groups, #app.q-tighter .q-card > .q-groups{gap:6px !important;}
  #app.q-tighter .q-back-inline{display:none;}
}
.q-back-inline, .q-modal-actions .btn-link{border:0; background:none; text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.q-card .q-actions .btn{white-space:nowrap;}
@media (max-width:520px){ .q-card .q-actions .btn{padding:12px 20px;} }
.q-auto-hint{font-size:13.5px; color:var(--ink-soft); font-weight:600;}
/* חזרה ברורה למטה, "במילים שלי" צמוד לתשובות */
@media (max-width:520px){
  .q-top .q-back{display:none;}
  .q-card > .q-options, .q-card > .q-groups, .q-card > .q-rows{flex:0 0 auto !important;}
  .q-elab-row{margin-top:10px;}
}
.q-back-bottom{margin-inline-start:auto; background:#fff; border:1.5px solid var(--line); color:var(--ink); font-weight:800; font-size:15px; padding:10px 16px; border-radius:999px;}
.q-back-inline{display:none;}
#app.q-tighter .q-back-bottom{padding:8px 12px; font-size:14px;}

/* ===== הסברים פשוטים בכל חלק ===== */
.q-explain{margin:2px 0 10px; font-size:14px; line-height:1.45; color:var(--ink);}
.q-info{display:inline; border:0; background:none; padding:0 2px; font:inherit; font-size:13.5px; font-weight:800; color:var(--brand-green, #289A02); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.q-stage-why{display:block; font-weight:600; font-size:12.5px; color:var(--ink); margin-top:2px;}
.q-scale{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px;}
.q-scale span{font-size:12.5px; padding:4px 9px; border-radius:99px; white-space:nowrap;}
.q-scale .l1{background:#FDE3E0; color:#8E2A20;} .q-scale .l2{background:#FBF0D6; color:#1A1A1A;} .q-scale .l3{background:#E8F4E5; color:#289A02;}
.q-type h3{margin:12px 0 2px; font-size:15px;}
.q-type-school{margin:10px 0 0; padding:8px 12px; border-radius:12px; background:#E8F4E5; font-size:13.5px; font-weight:600;}
.q-info-card p{margin:0 0 10px; line-height:1.55;}
@media (max-width:640px){
  .q-explain{font-size:13px; margin-bottom:6px;}
  .q-scale span{font-size:11.5px; padding:3px 7px;}
}
.q-scale .q-info{font-size:12.5px; padding:3px 2px;}
.q-eyebrow .q-info{font-size:12.5px; margin-inline-start:6px; letter-spacing:0; text-transform:none;}
.q-bubble .q-info{font-size:inherit;}
@media (max-width:640px){
  #app.q-tight .q-scale{gap:4px; margin-bottom:4px;}
  #app.q-tight .q-scale span{font-size:11px; padding:2px 6px;}
  #app.q-tighter .q-card:has(.q-scale) h2{font-size:20px; margin-bottom:7px;}
}
.q-card.q-type .q-actions{flex-wrap:wrap !important;}
.q-card.q-type .q-actions .btn{flex:1 1 100%;}

/* איך עונים: שורה אחת קבועה בכל שאלה */
.q-how{margin:-2px 0 10px; font-size:13px; color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;}
.q-how span{font-weight:800; padding:2px 9px; border-radius:99px;}
.q-how.single span{background:#FBF0D6; color:#1A1A1A;}
.q-how.multi span{background:#E8F4E5; color:#289A02;}
@media (max-width:640px){ .q-how{font-size:12px; margin-bottom:6px;} #app.q-tighter .q-how{margin-bottom:4px;} }

/* ===== עיצוב נעים ופשוט יותר (17.9) ===== */
.q-card h2{font-weight:900; color:#1A1814; letter-spacing:-.005em; margin:6px 0 10px;}
.q-eyebrow{font-size:12.5px;}
.q-how{display:inline-flex; align-self:flex-start; margin:2px 0 18px; padding:6px 14px; border-radius:99px; font-size:14px; font-weight:700; color:#1A1814; gap:4px;}
.q-how.single{background:#FBF0D6;}
.q-how.multi{background:#E8F4E5;}
.q-how b{font-weight:900;}
.q-opt{font-weight:700; border-radius:16px; color:#1A1814;}
.q-opt.on{position:relative; font-weight:800;}
.q-opt.on::after{content:'✓'; position:absolute; top:50%; left:12px; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:#289A02; color:#fff; font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center;}
.q-group{position:relative; align-items:center; border-radius:18px; padding:12px 14px;}
.q-group-body b{font-size:16px; font-weight:900; color:#1A1814;}
.q-group-types{gap:5px;}
.q-group-types span{font-size:12.5px; font-weight:600; padding:3px 10px; background:#F6F1E4;}
.q-group.on .q-group-types span{background:#fff;}
.q-group-check{margin-inline-start:auto; flex-shrink:0; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); color:transparent; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center;}
.q-group.on .q-group-check{background:#289A02; border-color:#289A02; color:#fff;}
@media (max-width:640px){
  .q-how{font-size:13.5px; margin-bottom:16px; padding:5px 13px;}
  #app.q-tighter .q-how{margin-bottom:5px;}
  .q-group{padding:10px 12px;}
}
.q-group-plain{font-size:13px; line-height:1.4; color:var(--ink-soft); font-weight:500;}
.q-group.on .q-group-plain{color:#1A1814;}
@media (max-width:640px){ .q-group-plain{font-size:12.5px;} .q-groups{gap:7px;} }
.q-group-body > span.q-group-plain{display:block !important;}
@media (max-width:640px){
  #app:has(.q-groups) .q-stage-why{display:none;}
  .q-group-plain{font-size:12px; line-height:1.3;}
}
@media (max-width:640px){ .q-groups{gap:6px;} .q-group{padding:8px 12px;} .q-group-body{gap:1px;} }

/* ===== רווחים נעימים יותר באזור הכותרת ===== */
.q-card{padding-top:24px;}
.q-eyebrow{margin-bottom:2px;}
.q-card h2{margin:8px 0 12px;}
@media (max-width:640px){
  #app:not(.q-tight) .q-card h2{margin:8px 0 12px;}
  #app:not(.q-tight) .q-card{padding-top:22px;}
}

/* ===== החושים: תיאור קצר ומלא, בלי חיתוך ===== */
.q-rows-senses .q-row-text span{white-space:normal !important; overflow:visible !important; text-overflow:clip !important; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35;}

/* ===== איך אני מתמודד/ת: כותרת לכל שאלה ===== */
.q-cons-title{display:block !important; font-size:13.5px; font-weight:800; margin:10px 0 5px; color:#1A1814;}
#app.q-tighter .q-cons-title{font-size:12.5px; margin:6px 0 3px;}

/* ===== עיר הלידה: רשימה נפתחת שמשלימה ===== */
.q-combo{position:relative;}
.q-combo-box{position:relative; display:block;}
.q-combo-box input{width:100%; padding-left:34px;}
.q-combo-arrow{position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--ink-soft); cursor:pointer; padding:4px;}
.q-combo-list{position:absolute; z-index:30; top:100%; right:0; left:0; margin-top:4px; max-height:210px; overflow-y:auto; background:#fff; border:1.5px solid var(--line); border-radius:14px; box-shadow:0 12px 28px rgba(38,36,30,.16); padding:4px; display:flex; flex-direction:column;}
.q-combo-list[hidden]{display:none;}
.q-combo-opt{text-align:right; padding:10px 12px; border:0; background:none; border-radius:10px; font:inherit; font-size:15px; font-weight:600; color:#1A1814;}
.q-combo-opt:hover, .q-combo-opt:focus{background:#E8F4E5;}

/* ===== העיצוב האנושי: התוצאה נכנסת בלי להזיז את הדף ===== */
@media (max-width:640px){
  .q-card:has(#hd-date) .q-actions{gap:6px;}
  .q-hd-result{grid-template-columns:72px 1fr !important; padding:8px 10px !important; margin-top:8px !important;}
  .q-hd-graph{max-width:72px !important;}
  .q-hd-result h3{font-size:15px; margin:0;}
}
.q-scale-how{flex-basis:100%; font-size:12.5px; font-weight:800; color:#1A1814;}
#app.q-tighter .q-scale-how{font-size:11.5px;}
@media (max-width:640px){
  #app.q-tighter .q-card:has(.q-scale){padding-top:14px;}
  #app.q-tighter .q-scale{flex-wrap:nowrap; gap:3px;}
  #app.q-tighter .q-scale{flex-wrap:wrap;}
  #app.q-tighter .q-scale span{padding:1px 5px; font-size:10.5px;}
  #app.q-tighter .q-rows .q-row{padding-top:3px; padding-bottom:3px;}
}

/* ===== טיפוגרפיה כמו בפלטפורמה: כותרות גדולות ועבות, תשובות קלות ===== */
.q-card h2{font-size:clamp(23px, 6vw, 28px); font-weight:900;}
.q-opt, .q-opt.on{font-weight:500;}
.q-opt.on{font-weight:600;}
.q-opt-rich b{font-weight:700;}
.q-opt-rich span{font-weight:400;}
.q-row-text b{font-weight:700;}
.q-row-text span{font-weight:400;}
.q-group-body b{font-weight:800;}
.q-match-text{font-weight:400;}
#app.q-tight .q-card h2{font-size:22px;}
#app.q-tighter .q-card h2{font-size:20px;}
/* הסימון ✓ לא עולה על הטקסט */
.q-opt.on:not(.q-opt-rich){padding-left:40px;}
.q-opt-rich.on::after, .q-level.on::after, .q-type-pick.on::after, .q-match.on::after{top:6px !important; left:6px !important; transform:none !important; width:16px !important; height:16px !important; font-size:10px !important;}
.q-level.on::after{display:none !important;}
.q-how{justify-content:flex-start;}

/* ===== שלב 3: טלפון נמוך, עדיין בלי גלילה ===== */
@media (max-width:640px){
  #app.q-tightest .q-top{padding-top:4px; padding-bottom:2px;}
  #app.q-tightest .q-brand img{height:30px;}
  #app.q-tightest .q-steps{margin-bottom:4px;}
  #app.q-tightest .q-stage-done{padding:3px 8px; font-size:11.5px; margin-bottom:4px;}
  #app.q-tightest .q-stage-why{display:none;}
  #app.q-tightest .q-card{padding:10px 12px 10px;}
  #app.q-tightest .q-card h2{font-size:19.5px; margin:2px 0 7px;}
  #app.q-tightest .q-eyebrow{font-size:11px;}
  #app.q-tightest .q-how{font-size:12.5px; padding:4px 10px; margin-bottom:9px;}
  #app.q-tightest .q-opt{padding:10px 12px; font-size:15.5px;}
  #app.q-tightest .q-options{gap:8px;}
  #app.q-tightest .q-actions{padding-top:6px;}
  #app.q-tightest .q-actions .btn{padding-top:9px; padding-bottom:9px;}
  #app.q-tightest .q-group{padding:6px 10px;}
  #app.q-tightest .q-group-icon{font-size:20px;}
  #app.q-tightest .q-type p{font-size:13px; line-height:1.35; margin:0;}
  #app.q-tightest .q-type h3{font-size:13.5px; margin:4px 0 1px;}
  #app.q-tightest .q-type-school{font-size:12px; padding:5px 10px; margin-top:4px;}
  #app.q-tightest .q-type-head img{width:40px; height:40px;}
  #app.q-tightest .q-rows .q-row{padding-top:3px; padding-bottom:3px;}
  #app.q-tightest .q-rows{gap:6px;}
  #app.q-tightest .q-cons-title{margin:4px 0 2px;}
  #app.q-tightest .q-opt-rich span{font-size:12px;}
  /* מסך עם הרבה תשובות קטנות בשתי עמודות (הכישרון, 13) נשאר צפוף יותר ברמה השלישית:
     שם הבעיה היא כמות הפריטים ולא גודל הטקסט, וההגדלה דחפה אותו 8 פיקסלים מעל המסך. */
  #app.q-tightest .q-options.q-grid{gap:5px;}
  #app.q-tightest .q-grid .q-opt{padding:7px 10px; font-size:14px;}
}

/* ===== מסך התוצאה (17.9.2026, בסגנון הפלטפורמה: כותרות 900 שחורות עם קו זהב, טקסט רגיל, כרטיסים מרווחים, הצצות שנפתחות בלחיצה) ===== */
.q-card.q-result{padding:26px 20px 20px;}
.q-r-eyebrow{display:inline-block; align-self:flex-start; width:fit-content; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:#fff; background:var(--gold); border-radius:999px; padding:2px 12px;}
.q-card.q-result .q-r-title{font-size:clamp(26px,6.5vw,34px); font-weight:900; color:#1A1A1A; line-height:1.15; margin:10px 0 0; text-wrap:balance;}
.q-card.q-result .q-r-title::after, .q-r-h::after{content:''; display:block; width:48px; height:4px; border-radius:4px; background:var(--gold); margin-top:10px;}
.q-r-h{font-size:22px; font-weight:900; color:#1A1A1A; line-height:1.2; margin:28px 0 12px;}
.q-r-hero{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
.q-r-main{background:#F1F9EC; border-radius:20px; padding:18px 14px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;}
.q-r-main img{width:64px; height:64px; margin-bottom:4px;}
.q-r-bigdot{font-size:52px; line-height:64px; height:68px;}
.q-r-stage{background:#fff; border:2px solid var(--gold);}
.q-r-tagline{font-size:12px; font-weight:700; color:#1A1A1A; background:#FBF2DC; border:1px solid var(--gold); border-radius:999px; padding:1px 10px;}
.q-card.q-result .q-r-main h2{font-size:21px; font-weight:900; color:#1A1A1A; margin:6px 0 0; line-height:1.2;}
.q-r-main p{font-size:14px !important; font-weight:400; color:var(--ink-soft); line-height:1.45;}
.q-r-soul{display:flex; gap:12px; align-items:center; background:#F3EEF8; border-radius:18px; padding:14px 16px; margin-top:14px;}
.q-r-soul img{width:46px; height:52px; object-fit:contain; flex:none;}
.q-r-soul p{font-size:14.5px !important; font-weight:400; line-height:1.45;}
.q-r-soul b{display:block; font-weight:800; color:#1A1A1A;}
.q-r-talent{background:#F1F9EC; border-radius:20px; padding:4px 16px 16px; margin-top:28px;}
.q-r-talent .q-r-h{margin:16px 0 12px;}
.q-r-tags{display:flex; flex-wrap:wrap; gap:8px;}
.q-r-tag{background:#fff; border:1.5px solid var(--gold); border-radius:999px; padding:5px 12px; font-size:14.5px; font-weight:400;}
.q-r-box{background:#fff; border-radius:14px; padding:12px 14px; margin-top:10px;}
.q-r-box b{display:block; font-weight:800; font-size:15px; margin-bottom:6px; color:#1A1A1A;}
.q-r-box p{font-size:14.5px !important; font-weight:400;}
.q-r-level{display:flex; align-items:center; gap:6px;}
.q-r-level i{width:22px; height:10px; border-radius:99px; background:#E5F3E1;}
.q-r-level i.on{background:var(--brand-green);}
.q-r-level span{font-size:14px; margin-inline-start:6px;}
.q-r-peeks{display:flex; flex-direction:column; gap:10px;}
.q-r-peek{background:#fff; border:1.5px solid var(--line); border-radius:16px;}
.q-r-peek summary{list-style:none; display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer;}
.q-r-peek summary::-webkit-details-marker{display:none;}
.q-r-peek summary:focus-visible{outline:2px solid var(--brand-green); outline-offset:2px; border-radius:16px;}
.q-r-ico{font-size:28px; line-height:1; flex:none;}
.q-r-txt{display:flex; flex-direction:column; min-width:0; flex:1;}
.q-r-txt b{font-size:16px; font-weight:800; color:#1A1A1A;}
.q-r-txt span{font-size:13.5px; font-weight:400; color:var(--ink-soft); line-height:1.4;}
.q-r-more{font-size:13px; font-weight:700; color:var(--brand-green); flex:none;}
.q-r-more::after{content:' ⌄';}
.q-r-peek[open] .q-r-more::after{content:' ⌃';}
.q-r-body{padding:0 14px 14px 14px; font-size:14.5px; font-weight:400;}
.q-r-body p{font-size:14.5px !important;}
.q-r-dots{list-style:none; display:flex; flex-direction:column; gap:4px;}
.q-r-dots li{display:flex; align-items:center; gap:6px; font-size:14.5px;}
.q-r-dots small{color:var(--ink-soft); font-size:12.5px;}
.q-r-empty{font-size:14px !important; color:var(--ink-soft);}
.q-r-saved{text-align:center; font-size:14px; color:var(--brand-green); font-weight:700; margin:22px 0 4px;}
.q-card.q-result .q-r-go{font-size:18px; font-weight:800; padding:16px 20px;}
@media (max-width:520px){
  .q-card.q-result{padding:20px 14px 14px;}
  .q-r-hero{gap:10px; margin-top:16px;}
  .q-r-main{padding:14px 8px 12px;}
  .q-r-main img{width:52px; height:52px;}
  .q-r-bigdot{font-size:42px; line-height:52px; height:56px;}
  .q-card.q-result .q-r-main h2{font-size:18px;}
  .q-r-main p{font-size:12.5px !important;}
  .q-r-h{font-size:20px; margin:22px 0 10px;}
  .q-r-talent{margin-top:22px;}
}

/* פרטיות: שורת המכשיר המשותף וכפתור המחיקה (דן, 26.9.2026) */
.q-device{font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:6px;}
.q-wipe{color:var(--ink-soft) !important; font-size:13.5px;}
.q-wipe[disabled]{opacity:.6;}
.q-wipe-done{font-size:13.5px; font-weight:700; color:var(--brand-green); margin-top:4px;}
@media (max-width:520px){ .q-device{font-size:12px;} }

/* 9 תחומי החיים: השורה "השלב שלך לא משתנה לפי זה" נשארת גלויה גם בדחיסה (26.9.2026) */
.q-stage-note{font-size:13px; color:var(--ink-soft); text-align:center; margin:6px 0 0; background:#F1F9EC; border-radius:10px; padding:5px 10px;}
#app.q-tight .q-stage-note{font-size:12px; margin-top:6px; padding:5px 8px;}
#app.q-tighter .q-stage-note{font-size:11.5px; margin-top:5px; padding:4px 8px; line-height:1.35;}


/* ===== 29.9.2026, בקשת דגן: "תמרכז את כל השאלון לאמצע, כרגע זה נמצא יותר מדי למעלה והכותרת ממש קטנה...
   לתת מרווחים בין הכותרת לחץ הקטן שגם אותו להגדיל ובין התשובות, שים רקע לבן" =====
   המרכוז: כל הבלוק (כותרת, שורת ה-👇 והתשובות) יושב באמצע הגובה שבין ראש הכרטיס לכפתורים.
   הרווח הפנוי מתחלק שווה מעל הבלוק ומתחתיו. כשהמסך צפוף אין רווח פנוי, ושום דבר לא זז.
   התשובות עצמן נשארות בגובה קבוע וברווח קבוע (ההחלטה מ-16.9), רק המיקום של הבלוק השתנה */
@media (max-width:520px){
  /* דגן, 29.9: "אני רוצה שהכותרת לא זזה אף פעם גם אם יש פחות לחצנים". לכן הכותרת יושבת במקום קבוע בראש הכרטיס,
     ורק התשובות מתמרכזות בגובה שנשאר בינה לבין הכפתורים. במסך הפתיחה (בלי כפתורים למטה) הכל ממורכז */
  .q-card:has(> .q-actions) > :first-child{margin-top:12px !important;}
  /* גם מה שמעל הכרטיס לא מזיז את הכותרת: לבועה של נשמה טובה שמור גובה קבוע (2 שורות),
     ובמסך בלי בועה הכרטיס מתחיל גבוה יותר אבל הכותרת נשארת באותו מקום. במסכים צפופים (רמות הדחיסה) הרווח מצטמצם כדי שלא תהיה גלילה */
  .q-main > .q-soul{min-height:63px;}
  .q-main > .q-card:first-child:has(> .q-actions) > :first-child{margin-top:83px !important;} /* 12 + 71: הגובה של הבועה והרווח שמתחתיה */
  #app.q-tight .q-main > .q-card:first-child:has(> .q-actions) > :first-child{margin-top:40px !important;}
  #app.q-tighter .q-main > .q-card:first-child:has(> .q-actions) > :first-child{margin-top:0 !important;}
  #app.q-tightest .q-main > .q-card:first-child:has(> .q-actions) > :first-child{margin-top:0 !important;}
  #app.q-tighter .q-main > .q-soul, #app.q-tightest .q-main > .q-soul{min-height:0;}
  .q-card:not(:has(> .q-actions)) > :first-child{margin-top:auto;}
  .q-card > .q-options, .q-card > .q-groups, .q-card > .q-rows{margin-top:auto !important;}
  .q-card > .q-actions{margin-top:auto;}
  #app.q-tight .q-card:has(> .q-actions) > :first-child{margin-top:6px !important;}
  #app.q-tighter .q-card:has(> .q-actions) > :first-child{margin-top:0 !important;}
  #app.q-tightest .q-card:has(> .q-actions) > :first-child{margin-top:0 !important;}
  .q-card:not(:has(> .q-actions)) > :last-child{margin-bottom:auto;} /* מסך בלי כפתורים למטה (הפתיחה): הרווח מתחלק מעל ומתחת */
  .q-card h2{font-size:27px; line-height:1.25; margin:4px 0 14px;}
  .q-how{margin:0 0 20px;}
  .q-card > .q-options:not(.q-grid){gap:13px !important;}
  .q-card > .q-options.q-grid{gap:12px !important;}
  #app.q-tight .q-how{margin-bottom:16px;}
  #app.q-tighter .q-how{margin-bottom:12px;}
  #app.q-tighter .q-card > .q-options:not(.q-grid), #app.q-tighter .q-card > .q-options.q-grid{gap:10px !important;}
  #app.q-tightest .q-how{margin-bottom:8px;}
  #app.q-tightest .q-card > .q-options:not(.q-grid), #app.q-tightest .q-card > .q-options.q-grid{gap:8px !important;}
}

/* השורה הקטנה מעל הכותרת ומילת ההנעה: שחור במקום זהב (דגן, 29.9.2026). הזהב על רקע בהיר נמדד 2.06, מתחת לרף הקריאות 4.5 */
.q-eyebrow, .q-word{color:#1A1814;}

/* דלת מצוקה בשאלת הרגע הקשה (הכרעת דן 29.9.2026, Y15). דלת שהאדם בוחר, לא זיהוי מילים,
   ולא בשאלה הראשונה: דגן ביקש לא לפתוח בזה, וכאן האדם כבר כותב על רגע קשה.
   שקטה בכוונה, לא מסלימה, ולא נשמרת כתשובה. הניסוח זהה לזה שכבר בשימוש באתר.
   בשאלון אין חשבון ולכן אין למי לסמן, והתגובה היחידה האפשרית היא על המסך. */
.q-crisis-door{display:block; width:100%; margin:10px 0 0; background:transparent; border:1.5px dashed var(--line); border-radius:14px; padding:10px 12px; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;}
.q-crisis-door:hover{border-color:var(--s1); color:var(--s1);}
/* שורת ההקשר: מתחת לנוסח המאוחד, אף פעם לא בתוכו (כלל 5ד) */
.q-crisis-ctx{font-size:14px; color:var(--ink-soft); margin:2px 0 14px; text-align:center;}

/* ===== 29.9.2026, סבב שני של דגן: "תגדיל את הכותרות כמו מה הביא אותך לכאן, שים את המשפט עם האצבע למטה
   בצמוד לכפתורים מאשר צמוד לכותרת אבל ברווח יפה, תן יותר מקום למעלה עם הלוגו" =====
   1. הכותרת גדולה גם במסכים הצפופים (ברמות הדחיסה), ולא רק בגודל הבסיסי.
   2. שורת ה-👇 שייכת לתשובות: הרווח הפנוי נכנס מעליה, והיא יושבת 14px מעל התשובה הראשונה.
   3. יותר אוויר סביב הלוגו ושורת השלבים. */
@media (max-width:520px){
  .q-top{padding:18px 0 10px;}
  .q-brand img{height:46px;}
  .q-steps{margin:6px 0 16px;}
  .q-card h2{font-size:30px; line-height:1.22;}
  #app.q-tight .q-card h2{font-size:27px;}
  #app.q-tighter .q-card h2{font-size:25px; margin-bottom:8px;}
  #app.q-tightest .q-card h2{font-size:23px; margin-bottom:6px;}
  .q-card > .q-how{margin:auto 0 14px !important;}
  .q-card > .q-how + .q-options, .q-card > .q-how + .q-groups, .q-card > .q-how + .q-rows{margin-top:0 !important;}
  #app.q-tight .q-card > .q-how{margin-bottom:12px !important;}
  #app.q-tighter .q-card > .q-how{margin-bottom:10px !important;}
  #app.q-tightest .q-card > .q-how{margin-bottom:8px !important;}
  #app.q-tight .q-top{padding:14px 0 8px;} #app.q-tight .q-brand img{height:42px;} #app.q-tight .q-steps{margin:4px 0 12px;}
  #app.q-tighter .q-top{padding:10px 0 6px;} #app.q-tighter .q-brand img{height:38px;} #app.q-tighter .q-steps{margin:2px 0 8px;}
  #app.q-tightest .q-top{padding:4px 0 2px;} #app.q-tightest .q-brand img{height:30px;} #app.q-tightest .q-steps{margin:0 0 4px;}
}

/* טלפון נמוך: הבועה של נשמה טובה מוסתרת שם, ולכן אין צורך לשמור לה מקום. בלי זה הכותרת קפצה בין מסכים */
@media (max-width:520px) and (max-height:700px){
  .q-main > .q-card:first-child:has(> .q-actions) > :first-child{margin-top:12px !important;}
  #app.q-tight .q-main > .q-card:first-child:has(> .q-actions) > :first-child{margin-top:6px !important;}
  #app.q-tighter .q-main > .q-card:first-child:has(> .q-actions) > :first-child, #app.q-tightest .q-main > .q-card:first-child:has(> .q-actions) > :first-child{margin-top:0 !important;}
}

/* ===== שלב 2, סוג הרגישות (דגן, 29.9.2026: "גם בסוג הרגישות תתאים את העיצוב") =====
   אותה כותרת ואותם רווחים כמו בשלב ההיכרות: כותרת גדולה, הסבר ברווח נעים, והכרטיסים ממורכזים בגובה שנשאר */
@media (max-width:520px){
  .q-card:has(.q-groups) h2{font-size:30px; margin-bottom:10px;}
  #app.q-tight .q-card:has(.q-groups) h2{font-size:27px;}
  #app.q-tighter .q-card:has(.q-groups) h2{font-size:25px; margin-bottom:6px;}
  #app.q-tightest .q-card:has(.q-groups) h2{font-size:23px; margin-bottom:4px;}
  .q-card > .q-matchup{margin-top:auto !important; gap:12px;}
  .q-card > .q-matchup ~ :last-child:not(.q-actions){margin-bottom:auto;}
  .q-match{padding:16px 12px; gap:8px;}
  .q-match-name{color:#1A1814; font-size:13.5px;}
  .q-match-text{font-size:16px; line-height:1.45;}
  #app.q-tight .q-match-text{font-size:15px;} #app.q-tight .q-match{padding:12px 10px; gap:6px;}
  #app.q-tighter .q-match-text{font-size:14px;} #app.q-tighter .q-match{padding:10px 8px; gap:4px;}
  #app.q-tightest .q-match-text{font-size:13.5px;}
}

/* 29.9.2026 (חיה): השורה הרכה אחרי זיהוי מילות מצוקה. הנוסח והכללים של דן, ההערה המלאה ב-quiz.js ליד careLine.
   יושבת בראש המסך במקום פס השלבים, באותו מסך בלבד. */
.q-care{margin:2px 0 10px; padding:7px 12px; border-radius:14px; background:rgba(40,154,2,.06); border:1px solid rgba(40,154,2,.18); font-size:13px; line-height:1.45; color:#1A1A1A; text-align:center; text-wrap:balance;}
.q-care a{color:#1A1A1A; font-weight:800; text-decoration:none; border-bottom:1.5px solid #289A02; white-space:nowrap;}
#app.q-tighter .q-care{margin:0 0 6px; padding:5px 10px; font-size:12.5px; line-height:1.4;}
#app.q-tightest .q-care{margin:0 0 4px; padding:4px 10px;}

/* 30.9.2026 (חיה): דלת המצוקה בקטן (דגן: "זה מוגזם וגדול מדי", וכלל 5יג: "אם כן שמים אז בקטן").
   המילים לא השתנו (הנוסח של דן). רק הגודל: בלי מסגרת ובלי תיבה, שורת טקסט קטנה עם קו תחתון.
   12.5 פיקסלים בכל רמות הדחיסה, מעל רצפת הכתב של 11.5 (כלל 5יד). */
.q-crisis-door, #app.q-tight .q-crisis-door, #app.q-tighter .q-crisis-door, #app.q-tightest .q-crisis-door{
  display:block; width:auto; margin:6px auto 0; padding:4px 8px; border:0; border-radius:0; background:none;
  font-size:12.5px; font-weight:400; line-height:1.3; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.q-crisis-door:hover{color:#1A1A1A;}

/* 1.10.2026 (חיה): גלילה אחרי בחירת תשובה וכתיבה "במילים שלי" (דגן: "כן לבנות").
   ברמת הכיווץ השלישית בלבד: הכפתור "להוסיף במילים שלי" הופך לשורת טקסט עם קו תחתון,
   שורת הציטוט לא מוצגת (הכפתור כבר אומר "לערוך את מה שכתבתי", והטקסט נשמר),
   ובמסך של שתי עמודות "אחר" חולק שורה עם הכפתור במקום להתרחב לבד.
   נמדד: הכישרון היה גולל 66 עד 96 פיקסלים אחרי בחירה וכתיבה; אחרי זה אפס בכל הגבהים חוץ מ-600 (10, פחות מה-14 שהיו שם לפני כל נגיעה).
   המסכים שאינם צפופים לא משתנים. */
#app.q-tightest .q-elab-row{margin-top:4px; gap:0;}
#app.q-tightest .q-elab-btn{border:0; background:none; padding:2px 0; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px;}
#app.q-tightest .q-elab-btn small{display:none;}
#app.q-tightest .q-elab-preview{display:none;}
#app.q-tightest .q-grid:not(.q-long):has(+ .q-elab-row) .q-opt.wide{grid-column:auto;} /* רק כשיש שורת "במילים שלי" אחרי הרשת, אחרת מסך "מצב משפחתי" (שגם בו "אחר" לבד בשורה) היה משתנה בלי סיבה */
#app.q-tightest .q-options.q-grid:not(.q-long):has(.q-opt.wide) + .q-elab-row{margin-top:-30px; width:48%; margin-inline-start:auto; align-items:center; min-height:26px;}
#app.q-tightest .q-options.q-grid:not(.q-long):has(.q-opt.wide) + .q-elab-row .q-elab-btn{align-self:center;}


/* ===== 2.10.2026, מחשב רחב: בלי גלילה, והשלבים בצד (בקשת דגן: "לדאוג שלא תהיה גלילה, ואולי להעביר את תצוגת השלבים לצד במחשב") =====
   נמדד לפני: ב-1440x719 גללו 15 מסכים (עד 506 פיקסלים), כי במחשב הכרטיס היה ברוחב טלפון (680) עם כל השורות אחת מתחת לשנייה.
   הפתרון: עמודה צדדית (לוגו · חזרה · 3 השלבים · הבועה של נשמה טובה), כרטיס רחב יותר, ותוכן בעמודות.
   ה-DOM לא השתנה: .q-main הופך ל-display:contents, והבועה והכרטיס מקבלים אזור משלהם ברשת.
   רמות הדחיסה (q-tight וכו׳) רצות גם כאן, עם כללים משלהן בהמשך. בטלפון (עד 520) כלום מזה לא חל. */
@media (min-width:1000px){
  #app{max-width:1260px; padding:0 28px 18px; display:grid; grid-template-columns:230px minmax(0,1fr); grid-template-rows:auto auto auto auto 1fr auto;
       grid-template-areas:"top main" "steps main" "stage main" "soul main" "rail main" "foot foot"; column-gap:34px; align-content:start; min-height:100vh;}
  .q-top{grid-area:top; flex-direction:column; align-items:flex-start; gap:12px; padding:24px 0 8px;}
  .q-brand img{height:66px;}
  .q-top .q-back{padding:6px 0; font-size:15px;}
  .q-steps, .q-care{grid-area:steps;}
  .q-steps{display:flex; flex-direction:column; gap:16px; margin:10px 0 0; padding:16px 0 0; border-top:1px solid rgba(38,36,30,.1);}
  .q-step{font-size:15.5px; gap:8px;}
  .q-step-num{width:26px; height:26px; font-size:13px;}
  .q-step-bar{flex-basis:100%; margin-top:2px;}
  .q-stage-done{grid-area:stage; margin:14px 0 0; font-size:13.5px;}
  .q-main{display:contents;}
  .q-main > .q-soul{grid-area:soul; flex-direction:column; align-items:flex-start; gap:6px; margin-top:16px;}
  .q-main > .q-soul img{width:62px; height:62px;}
  .q-main > .q-soul .q-bubble{border-radius:18px 4px 18px 18px; font-size:14.5px; padding:10px 14px;}
  .q-main > .q-card{grid-area:main; align-self:start; width:100%; max-width:960px; padding:26px 30px; margin-top:24px;} /* באותו גובה של הלוגו, ולא צמוד לקצה המסך */
  .q-main > .q-card.q-intro{margin-top:24px;}
  .q-card h2{font-size:28px;}
  .q-foot{grid-area:foot; margin-top:16px;}
  /* התוכן בעמודות: רשימת אפשרויות ב-3 עמודות, שורות (חושים · מרכזים · תחומים) וקבוצות ב-2 */
  .q-grid{grid-template-columns:repeat(3,1fr);}
  .q-rows{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .q-groups{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .q-fields{grid-template-columns:1fr 1fr 1fr;}
  /* רמות הדחיסה במחשב: רק רווחים וריפוד, הכתב לא יורד מתחת ל-14 */
  #app.q-tight .q-main > .q-card{padding:20px 26px;}
  #app.q-tight .q-card h2{font-size:26px; margin-bottom:6px;}
  #app.q-tight .q-sub{margin-bottom:8px;}
  #app.q-tight .q-rows{gap:8px;} #app.q-tight .q-row{padding:10px 14px;} #app.q-tight .q-row-text{margin-bottom:6px;}
  #app.q-tight .q-options{gap:8px;} #app.q-tight .q-grid{gap:8px;} #app.q-tight .q-opt{padding:10px 14px;}
  #app.q-tight .q-groups{gap:8px;} #app.q-tight .q-group{padding:10px 12px;}
  #app.q-tight .q-actions{margin-top:12px;}
  #app.q-tighter .q-main > .q-card{padding:16px 24px;}
  #app.q-tighter .q-card h2{font-size:24px; margin-bottom:4px;}
  #app.q-tighter .q-row{padding:8px 12px;} #app.q-tighter .q-row-text span{font-size:13.5px;} #app.q-tighter .q-level{padding:6px 4px; font-size:14px;}
  #app.q-tighter .q-opt{padding:8px 12px; font-size:15px;} #app.q-tighter .q-group{padding:8px 12px;}
  #app.q-tighter .q-scale, #app.q-tighter .q-how{margin-bottom:6px;}
  #app.q-tightest .q-rows{gap:6px;} #app.q-tightest .q-row{padding:6px 12px;} #app.q-tightest .q-row-text{margin-bottom:4px;}
  #app.q-tightest .q-options, #app.q-tightest .q-grid, #app.q-tightest .q-groups{gap:6px;}
  #app.q-tightest .q-foot{display:none;}
}