/* ev-mobile.css — 3 Nov 2026 (owner: "mobile version beautiful banao").
   Phone-only polish for the AI checker pages (/ai-homework-checker/, /ai-test-paper-checker/, /ai-exam-answers-cross-checker/,
   all served by /app/evaluator.html). Loaded last; every rule sits inside max-width:640px so the PC layout is untouched. */
@media (max-width:640px){
  /* ---------- top bar: one tidy row, nothing overlapping ---------- */
  .hx__row{gap:8px!important}
  .hx__brand{min-width:0!important;flex:1 1 auto!important}
  .site-brand__mark{width:32px!important;height:32px!important;flex:none}
  .site-brand__name{font-size:14.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .hx__ctl{gap:6px!important;flex:none!important;align-items:center}
  .hx__ctl .acct-badge{gap:4px!important;padding:0!important;background:none!important;border:0!important}
  .hx__ctl .acct-badge__text,.hx__ctl .acct-badge__chev,.hx__ctl .acct-badge__meta{display:none!important}
  .hx__ctl .acct-badge__avatar{width:30px!important;height:30px!important;font-size:12px!important}
  .hx__ctl .acct-badge__signout{width:32px;height:32px;padding:0!important;border-radius:50%!important;font-size:0!important;display:inline-grid!important;place-items:center;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important}
  .hx__ctl .acct-badge__signout::before{content:"⏻";font-size:15px;line-height:1}
  .hx__ctl .acct-badge__signin{padding:6px 12px!important;font-size:12.5px!important;border-radius:999px!important}
  #abUpgrade.nav-upgrade{width:36px!important;height:36px!important;min-width:36px!important}

  /* ---------- hero: one gradient card ---------- */
  #evHead.ex-phead{padding:0!important;margin:10px 0 12px!important}
  #evHead .ev2-band{flex-direction:column!important;align-items:stretch!important;gap:14px!important;padding:18px 16px 16px!important;border-radius:20px!important;
    background:linear-gradient(135deg,#0B1B33 0%,#1d3a8a 55%,#5b21b6 100%)!important;box-shadow:0 12px 30px rgba(29,58,138,.28)!important;width:auto!important}
  #evHead .ev2-brand{align-items:flex-start!important;gap:12px!important}
  #evHead .ev2-logo{width:48px!important;height:48px!important;border-radius:14px!important;background:#fff!important;box-shadow:0 6px 16px rgba(0,0,0,.25)!important;flex:none;font-size:24px!important}
  #evHead h1{font-size:23px!important;line-height:1.15!important;color:#fff!important;margin:0 0 6px!important;letter-spacing:-.01em}
  #evHead .ev2-sub{font-size:13.5px!important;line-height:1.5!important;color:#dbe4f3!important;gap:6px!important}
  #evHead .ev2-sub *{color:inherit!important}
  #evHead .ev2-sub a,#evHead .ev2-sub b,#evHead .ev2-sub strong{color:#ffd66b!important}
  #evHead .ev2-chips{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;justify-content:stretch!important;margin:0!important;padding:0!important}
  #evHead .ev2-chips li{width:auto!important;margin:0!important;padding:8px 10px!important;border-radius:12px!important;gap:8px!important;justify-content:flex-start!important;
    background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important;color:#fff!important;font-size:12.5px!important;font-weight:600!important}
  #evHead .ev2-chips li *{color:#fff!important}
  #evHead .ev2-chip-i{font-size:17px!important;width:auto!important}

  /* ---------- mode switch (Homework / Exam / Marks) — was hidden on phones ---------- */
  .ev2-modes,.ev-modesel{display:flex!important;gap:8px!important;overflow-x:auto;scrollbar-width:none;margin:0 0 12px!important;padding:2px!important}
  .ev2-modes::-webkit-scrollbar{display:none}
  .ev2-mode{flex:1 0 auto!important;min-width:0;padding:10px 12px!important;border-radius:14px!important;font-size:13px!important}
  .ev2-mode *{font-size:inherit}

  /* ---------- step rail: one compact row ---------- */
  .ev5-rail{display:flex!important;gap:6px!important;overflow-x:auto;scrollbar-width:none;padding:0 0 2px!important;margin:0 0 12px!important}
  .ev5-rail::-webkit-scrollbar{display:none}
  .ev5-rail-i{flex:1 0 auto}
  .ev5-rail-b{padding:7px 10px!important;border-radius:999px!important;gap:6px!important;min-height:0!important;width:100%;justify-content:center}
  .ev5-rail-n{width:22px!important;height:22px!important;font-size:12px!important}
  .ev5-rail-t i{display:none!important}
  .ev5-rail-t b{font-size:12.5px!important}
  .ev5-rail-i.is-on .ev5-rail-b{background:linear-gradient(135deg,#C9A84C,#E2B64E)!important;border-color:transparent!important;color:#1B2A5E!important;box-shadow:0 6px 14px rgba(201,168,76,.35)}

  /* ---------- step card ---------- */
  .ev5-step.is-open{padding:16px 14px!important;border-radius:18px!important}
  .ev2-chead h2{font-size:18px!important}.ev2-chead p{font-size:12.5px!important}
  .ev5-signin{flex-wrap:wrap!important;gap:10px!important;padding:12px 14px!important;border-radius:14px!important}
  .ev5-signin>div{flex:1 1 180px}.ev5-signin>div span{font-size:12.5px!important;line-height:1.45!important}
  .ev5-signin .btn{flex:none}

  /* upload slots: 2 x 2 tiles instead of 4 tall cards */
  .ev2-slots,.hw-a-slots{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .hw-a-slot{padding:12px 10px!important;border-radius:16px!important;gap:6px!important}
  .hw-a-slot-icon{width:40px!important;height:40px!important;font-size:20px!important;margin:0 auto 4px!important}
  .hw-a-slot-title{font-size:13.5px!important;line-height:1.25!important}
  .hw-a-opt{display:block;font-size:11px!important}
  .hw-a-slothint{font-size:11.5px!important;margin:2px 0 6px!important}
  .hw-a-choose{width:100%;justify-content:center;padding:8px 6px!important;font-size:12.5px!important;border-radius:999px!important}
  .hw-a-drop,.hw-a-slotcaps{display:none!important}

  /* form + help */
  .ev2-meta{gap:10px!important}
  .ev2-meta input,.ev2-meta select,.ev2-meta textarea{font-size:16px!important;min-height:44px}   /* 16px stops iOS zoom-on-focus */
  .ev5-help{padding:14px!important;border-radius:18px!important;gap:10px!important}
  .ev5-help .btn{border-radius:999px!important;min-height:44px}
  .ev5-sum{padding:12px 14px!important}
}
@media (max-width:640px){
  /* round 2: hero never stretches; sub text light, second line soft gold */
  #evHead,#evHead .ev2-band,#evHead .ev2-brand,#evHead .ev2-brand>div{height:auto!important;min-height:0!important;flex:none!important}
  #evHead .ev2-sub b{font-weight:500!important}
  #evHead .ev2-sub .ev2-sub-a{color:#e6ecfa!important}
  #evHead .ev2-sub .ev2-sub-b{color:#ffd66b!important;font-weight:600!important}
  #evHead .ev2-sub .ev2-sub-b::before{background:#ffd66b!important}
  /* mode switch = three compact pills */
  .ev2-rail{position:static!important;height:auto!important;margin:8px 0 0!important;padding:0!important;width:auto!important}
  .ev2-modes{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .ev2-mode{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:4px!important;padding:9px 4px!important;min-height:0!important;border-radius:14px!important}
  .ev2-mode-i{width:30px!important;height:30px!important;font-size:16px!important;margin:0!important}
  .ev2-mode-t b{font-size:11.5px!important;line-height:1.2!important;display:block}
  .ev2-mode-t i,.ev2-mode-t em{display:none!important}
}
@media (max-width:640px){
  /* round 3: subtitle wraps inside the card */
  #evHead .ev2-brand>div{min-width:0!important;flex:1 1 auto!important}
  #evHead .ev2-sub{display:block!important;max-width:100%!important}
  #evHead .ev2-sub b{display:block!important;white-space:normal!important;max-width:100%!important;overflow-wrap:anywhere}
  #evHead .ev2-sub .ev2-sub-b{margin-top:6px!important;padding-left:0!important}
  #evHead .ev2-sub .ev2-sub-b::before{display:none!important}
}
@media (max-width:640px){
  /* round 4 (owner): upload tiles = 4 rows, one per row — icon left, title + hint middle, button right */
  .ev2-slots,.hw-a-slots{grid-template-columns:1fr!important;gap:10px!important}
  .hw-a-slot{display:grid!important;grid-template-columns:44px 1fr auto!important;grid-template-areas:"ic t btn" "ic h btn"!important;align-items:center!important;column-gap:12px!important;row-gap:2px!important;text-align:left!important;padding:12px 14px!important}
  .hw-a-slot-icon{grid-area:ic;margin:0!important;width:44px!important;height:44px!important}
  .hw-a-slot-title{grid-area:t;font-size:14.5px!important;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .hw-a-opt{display:inline!important;font-size:11.5px!important}
  .hw-a-slothint{grid-area:h;margin:0!important;font-size:12px!important}
  .hw-a-choose{grid-area:btn;width:auto!important;padding:8px 14px!important;font-size:13px!important;white-space:nowrap}
  .hw-a-slot>*:not(.hw-a-slot-icon):not(.hw-a-slot-title):not(.hw-a-slothint):not(.hw-a-choose):not(input){grid-column:1/-1}
  /* sign-out icon: draw it, don't depend on a font having ⏻ (showed as a box on Android) */
  .hx__ctl .acct-badge__signout::before{content:""!important;width:16px;height:16px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 3v9'/><path d='M6.3 7.2a8 8 0 1 0 11.4 0'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 3v9'/><path d='M6.3 7.2a8 8 0 1 0 11.4 0'/></svg>") center/contain no-repeat}
}
@media (max-width:640px){.hw-a-slot-title,.hw-a-slothint,.hw-a-opt{text-align:left!important;justify-content:flex-start!important;align-self:center}.hw-a-slot-title{display:block!important}.hw-a-opt{display:inline!important;margin-left:6px}}
@media (max-width:640px){
 /* round 6: tighter tiles, star only for required */
 .hw-a-slot{padding:8px 12px!important;column-gap:10px!important;row-gap:0!important;min-height:0!important}
 .hw-a-slot-icon{width:36px!important;height:36px!important;font-size:17px!important}
 .hw-a-slot-title{font-size:14px!important;line-height:1.2!important;text-align:left!important;margin:0!important}
 .hw-a-slothint{font-size:11.5px!important;line-height:1.3!important;text-align:left!important}
 .hw-a-choose{padding:6px 12px!important;font-size:12.5px!important}
 .ev2-slots,.hw-a-slots{gap:8px!important}
}
.hw-a-req{color:#dc2626;font-weight:800;margin-left:3px}

/* ===== round 7 — 3 Nov 2026 (owner: "UI/UX finalize for all devices") ===== */

/* every size: the required star stays on the title line (the desktop tile title was a flex COLUMN, so the
   star dropped under it and the four "Choose File" buttons no longer lined up); button pinned to the tile foot */
.ev2-slots .hw-a-slot-title{display:block;text-align:center}
.hw-a-req{display:inline}
.ev2-slots .hw-a-slot{display:flex;flex-direction:column;align-items:center}
.ev2-slots .hw-a-slothint{flex:0 0 auto}
.ev2-slots .hw-a-choose{margin-top:auto}
.ev2-slots .hw-a-drop,.ev2-slots .hw-a-slotcaps{margin-top:6px}

/* ---------- tablet 641–1099: the same card hero as phones, chips 2x2, mode switch as three pills ---------- */
@media (min-width:641px) and (max-width:1099px){
  #evHead.ex-phead{padding:0!important;margin:12px 0 14px!important}
  #evHead .ev2-band{display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;align-items:center!important;gap:16px 22px!important;padding:20px 22px!important;border-radius:22px!important;
    background:linear-gradient(135deg,#0B1B33 0%,#1d3a8a 55%,#5b21b6 100%)!important;box-shadow:0 12px 30px rgba(29,58,138,.28)!important}
  #evHead .ev2-brand{display:flex!important;align-items:flex-start!important;gap:14px!important;flex:none!important;min-width:0}
  #evHead .ev2-logo{width:52px!important;height:52px!important;border-radius:14px!important;background:#fff!important;box-shadow:0 6px 16px rgba(0,0,0,.25)!important;flex:none;font-size:26px!important}
  #evHead h1{font-size:24px!important;line-height:1.15!important;color:#fff!important;margin:0 0 6px!important}
  #evHead .ev2-sub{display:block!important;font-size:13.5px!important;line-height:1.5!important;color:#dbe4f3!important;max-width:100%!important}
  #evHead .ev2-sub b{display:block!important;font-weight:500!important;white-space:normal!important;color:#e6ecfa!important}
  #evHead .ev2-sub .ev2-sub-b{color:#ffd66b!important;font-weight:600!important;margin-top:4px!important;padding-left:0!important}
  #evHead .ev2-sub .ev2-sub-b::before{display:none!important}
  #evHead .ev2-chips{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;max-width:none!important;flex-wrap:wrap!important;margin:0!important;padding:0!important}
  #evHead .ev2-chips li{margin:0!important;padding:9px 11px!important;border-radius:12px!important;gap:8px!important;justify-content:flex-start!important;
    background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important;color:#fff!important;font-size:12.5px!important;font-weight:600!important;white-space:nowrap}
  #evHead .ev2-chips li *{color:#fff!important}
  #evHead .ev2-chip-i{font-size:18px!important;width:auto!important}
  /* mode switch was invisible between phone and desktop */
  .ev2-rail{display:block!important;position:static!important;height:auto!important;margin:0 0 12px!important;padding:0!important;width:auto!important}
  .ev2-rail .ev-modesel.ev2-modes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0!important;max-width:none!important}
  .ev2-rail .ev-modebtn.ev2-mode{flex-direction:row!important;align-items:center!important;text-align:left!important;gap:10px!important;padding:11px 13px!important;min-height:0!important;border-radius:14px!important}
  .ev2-rail .ev2-mode-i{width:38px!important;height:38px!important;font-size:19px!important;margin:0!important;flex:none}
  .ev2-rail .ev2-mode-t b{font-size:14px!important;line-height:1.2!important}
  .ev2-rail .ev2-mode-t i{font-size:11.5px!important}
  .ev2-rail .ev2-mode-t em{display:none!important}
  .ev5-rail-b{min-height:0!important}
}
@media (min-width:641px) and (max-width:820px){
  #evHead .ev2-band{grid-template-columns:minmax(0,1fr)!important}
  #evHead .ev2-chips{grid-template-columns:repeat(4,1fr)!important}
  #evHead .ev2-chips li{font-size:12px!important;padding:8px 9px!important}
}
@media (min-width:641px) and (max-width:700px){
  #evHead .ev2-chips{grid-template-columns:1fr 1fr!important}
}

/* ---------- phone ≤640 ---------- */
@media (max-width:640px){
  /* step rail: the 4th pill was cut off — the active step carries its name, the others show only their number */
  .ev5-rail{display:flex!important;gap:6px!important;overflow:visible!important;align-items:stretch}
  .ev5-rail-i{flex:0 0 auto!important;min-width:0}
  .ev5-rail-i.is-on{flex:1 1 auto!important}
  .ev5-rail-i:not(.is-on) .ev5-rail-t{display:none!important}
  .ev5-rail-i:not(.is-on) .ev5-rail-b{padding:7px!important;width:40px;justify-content:center}
  .ev5-rail-i.is-on .ev5-rail-b{padding:7px 14px!important}
  /* step heading: number, title and the Show Options button on ONE row */
  .ev2-chead{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important}
  .ev2-chead>div{flex:1 1 0!important;min-width:0!important}
  .ev2-chead h2{font-size:17px!important;line-height:1.2!important}
  .ev2-chead p{font-size:12px!important;line-height:1.35!important;margin-top:2px!important}
  .ev2-chead .ev2-num{flex:none;width:28px;height:28px;font-size:13px}
  .ev2-chead .ev2-advtoggle{flex:none!important;margin:0!important;padding:7px 11px!important;font-size:12.5px!important;white-space:nowrap;border-radius:999px!important}
  /* the Analyse button is never hidden by the bottom bar */
  .ev2-golane{padding-bottom:4px!important}
  .ev2-golane .hw-a-next{border-radius:16px!important;font-size:15px!important}
}

/* round 7b: tablet tile title was still a flex column (higher-specificity rule), star dropped under it */
@media (min-width:641px){.ev2-slots .hw-a-slot-title,.hw-a-slots.ev2-slots .hw-a-slot-title{display:block!important;text-align:center!important}}
@media (max-width:640px){
  /* Advanced Options: title + button on one line, no subtitle on phones */
  #evAdv .ev2-chead p{display:none!important}
  #evAdv .ev2-chead h2{font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* mode pills: shorter */
  .ev2-mode{padding:8px 4px!important;gap:3px!important}
  .ev2-mode-i{width:26px!important;height:26px!important;font-size:14px!important}
  .ev2-mode-t b{font-size:12px!important;line-height:1.15!important}
}

/* round 7c: premium.css styles the mode pills with a 3-class selector, so the phone sizes need the same weight */
@media (max-width:640px){
  .ev2-rail .ev-modebtn.ev2-mode{padding:8px 4px!important;gap:3px!important;border-radius:12px!important}
  .ev2-rail .ev2-mode-i{width:26px!important;height:26px!important;font-size:14px!important}
  .ev2-rail .ev2-mode-t b{font-size:12px!important;line-height:1.15!important}
}

/* round 7d: "Advanced Options" was cut to "Advanced Opti…" on a 375px phone — smaller title and button, no ellipsis */
@media (max-width:640px){
  #evAdv .ev2-chead h2{font-size:15px!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:-.01em}
  #evAdv .ev2-chead .ev2-advtoggle{padding:6px 9px!important;font-size:12px!important}
  #evAdv .ev2-chead{gap:8px!important}
}

/* 3 Nov 2026 (owner): the Need help? card repeated the number already in the footer and dock — hidden on every size */
.ev5 .ev5-help{display:none!important}