/* ═══════════════════════════════════════════════════════════════
   NJ-98425 v3 — /mypage rebuilt from the design handoff
   (~/Downloads/nativecamp-home-handoff, nc-design-suite 0.8.15).
   Token NAMES kept identical to the handoff's src/tokens.css so the
   React components (src/components/*) port 1:1 into PHP partials.
   All component rules are scoped under .ncv3 (never collide with the
   layout's global CSS, the old /mypage, or v2). The guided-tour DOM
   is reused from v2 (mypage_v3_base.css supplies .ncv3-launcher/wel/tip…).
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens — verbatim values from handoff src/tokens.css ── */
:root {
  --color-brand-primary:#f1890e; --color-brand-primary-press:#c7710c; --color-brand-secondary:#092846;
  --color-text-primary:#191919; --color-text-secondary:#767676; --color-text-inverse:#ffffff;
  --color-text-on-dark:rgb(255 255 255 / 90%); --color-text-on-dark-2:rgb(255 255 255 / 80%);
  --color-text-on-dark-3:rgb(255 255 255 / 70%); --color-text-link:#1e73dc;
  --color-text-subtle:#767676; --color-text-muted:#767676; /* → text-secondary */
  --color-ghost-bg:rgb(255 255 255 / 10%); --color-ghost-border:rgb(255 255 255 / 25%);
  --color-surface-default:#ffffff; --color-surface-page:#ffffff; --color-surface-subtle:#f5f5f5;
  --color-notice-bg:#ffeae3; --color-notice-accent:#d92929;
  --color-border-default:#e3e3e3; --color-border-strong:#cccccc;
  --color-info:#1e73dc; --color-info-fg:#144e91; --color-info-bg:#f4f7fb;
  --color-success-strong:#32d74b; --color-success-fg:#1e8b2e;
  --color-lesson-now:#0bcafa; --color-lesson-now-press:#00b4e1; --color-lesson-reservation:#03c9a9;
  --color-btn-secondary-bg:#f5f5f5; --color-btn-border:#cccccc;
  --color-favorite:#f0295d; --color-favorite-empty:#cccccc;
  --color-coin-ring:#c7710c; --color-coin-core:#f1890e; --color-coin-center:#f7be7a; --color-gold:#f1890e;
  --color-status-error:#d92929; --color-status-error-strong:#ff3535;
  --color-dot-online:#0bcafa; --color-dot-offline:#b3b3b3; --color-country-dot:#d92929;
  --color-chip-specialty-bg:#fcf8f3; --color-chip-specialty-fg:#9d5909;
  --gradient-avatar:linear-gradient(135deg,#f7be7a,#f1890e);
  --gradient-hero:linear-gradient(130deg,#092846,#0e3b6c);
  --gradient-lessons:linear-gradient(135deg,#32d74b,#5fe073);
  --color-checkbox-border:#cccccc; --color-checkbox-checked:#1e73dc;
  --color-view-btn-idle:#f5f5f5; --color-view-icon-idle:#767676;
  --overlay-hover-on-light:rgb(0 0 0 / 4%); --overlay-modal-backdrop:rgb(0 0 0 / 50%);
  --focus-ring-color:rgb(9 40 70 / 30%);
  --shadow-card:0 1px 4px 0 rgb(0 0 0 / 10%),0 2px 4px -1px rgb(0 0 0 / 10%);
  --shadow-card-lg:0 2px 6px 0 rgb(0 0 0 / 10%),0 4px 6px -2px rgb(0 0 0 / 10%);
  --shadow-menu:0 4px 12px 0 rgb(0 0 0 / 10%),0 8px 16px -4px rgb(0 0 0 / 10%);
  /* spacing (4px grid; off-grid handoff tokens snapped: 7→8 9→8 11→12 13→12 14→16 18→16 22→24 26→24) */
  --space-xxs:4px; --space-xs:6px; --space-7:8px; --space-sm:8px; --space-9:8px; --space-sm-plus:10px;
  --space-11:12px; --space-md:12px; --space-14:16px; --space-base:16px; --space-lg:20px; --space-xl:24px;
  --space-2xl:32px; --space-3xl:40px; --space-4xl:48px;
  /* radius */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-tile:12px; --radius-xl:16px;
  --radius-card:24px; --radius-2xl:24px; --radius-hero:24px; --radius-full:9999px;
  /* border widths */
  --border-thin:1px; --border-medium:2px;
  /* font weights (400 / 500 / 700 only) */
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  /* motion */
  --duration-fast:150ms; --ease-standard:ease;
  /* font family — Noto Sans (handoff) with JP + system fallbacks for JA glyphs */
  --font-sans:"Noto Sans","Noto Sans JP","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

/* ── Base ── */
.ncv3{
  font-family:var(--font-sans);
  color:var(--color-text-primary);
  background:var(--color-surface-page);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  font-weight:var(--fw-regular);
}
.ncv3 *{box-sizing:border-box}
.ncv3 .num{font-variant-numeric:tabular-nums}
.ncv3 button{font-family:inherit}
.ncv3 .ncv3-shell{overflow-x:auto}
.ncv3 .ncv3-content{max-width:1200px;margin:0 auto;padding:var(--space-xl) var(--space-lg) var(--space-4xl)}

/* ── Scaffold placeholder (temporary — sections replace this as they port from the handoff) ── */
.ncv3 .ncv3-scaffold{
  border:2px dashed var(--color-border-strong);
  border-radius:var(--radius-card);
  padding:var(--space-4xl) var(--space-xl);
  text-align:center;
  background:var(--color-surface-subtle);
}
.ncv3 .ncv3-scaffold h1{font-size:28px;font-weight:var(--fw-bold);color:var(--color-brand-secondary);margin-bottom:var(--space-sm)}
.ncv3 .ncv3-scaffold p{font-size:15px;color:var(--color-text-secondary)}
.ncv3 .ncv3-scaffold .ncv3-swatches{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-lg);flex-wrap:wrap}
.ncv3 .ncv3-scaffold .ncv3-swatches i{width:40px;height:40px;border-radius:var(--radius-md);display:inline-block;box-shadow:var(--shadow-card)}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — ported 1:1 from the handoff (src/components/*).
   Inline style objects → .ncv3 classes; every value maps to the same
   token the React component referenced. NC buttons are FLAT (no 3D
   shadow) per the DS; :active gives a subtle 1px press for feedback.
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons (Button.tsx) ── */
.ncv3 .v3btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  font-family:inherit;font-weight:var(--fw-bold);letter-spacing:.005em;line-height:1;
  border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast) ease,transform .06s}
.ncv3 .v3btn.lg{padding:var(--space-md) var(--space-lg);font-size:16px}
.ncv3 .v3btn.sm{padding:var(--space-sm-plus) var(--space-base);font-size:14px}
.ncv3 .v3btn.full{width:100%}
.ncv3 .v3btn:active{transform:translateY(1px)}
.ncv3 .v3btn--primary{background:var(--color-brand-primary);color:var(--color-text-inverse)}
.ncv3 .v3btn--primary:hover{background:var(--color-brand-primary-press)}
.ncv3 .v3btn--lessonNow{background:var(--color-lesson-now);color:var(--color-text-inverse)}
.ncv3 .v3btn--lessonNow:hover{background:var(--color-lesson-now-press)}
/* --shadow modifier: tactile key-shadow + press ONLY on the 3 CTAs the user wants
   (Change / Search / Start-lesson). All other buttons stay FLAT like the artifact. */
.ncv3 .v3btn--shadow.v3btn--primary{box-shadow:0 4px 0 var(--color-brand-primary-press)}
.ncv3 .v3btn--shadow.v3btn--primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-brand-primary-press)}
.ncv3 .v3btn--shadow.v3btn--lessonNow{box-shadow:0 4px 0 var(--color-lesson-now-press)}
.ncv3 .v3btn--shadow.v3btn--lessonNow:active{transform:translateY(3px);box-shadow:0 1px 0 var(--color-lesson-now-press)}
.ncv3 .v3btn--secondary{background:var(--color-btn-secondary-bg);color:var(--color-text-primary)}
.ncv3 .v3btn--outline{background:transparent;color:var(--color-text-primary);border:var(--border-thin) solid var(--color-btn-border)}
.ncv3 .v3btn--outline:hover{background:var(--overlay-hover-on-light)}
.ncv3 .v3btn--ghost{background:var(--color-ghost-bg);color:var(--color-text-inverse);border:var(--border-thin) solid var(--color-ghost-border)}
.ncv3 .v3btn--ghost:hover{background:rgb(255 255 255 / 16%)}
.ncv3 .v3btn--text{background:none;color:var(--color-text-link);text-decoration:underline;text-underline-offset:3px;padding:var(--space-xxs) var(--space-xs)}

/* icon helpers */
.ncv3 .v3ic{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none}
.ncv3 .v3ic svg{display:block}
.ncv3 .v3flag{display:block;flex:none;box-sizing:border-box;border:1px solid var(--color-border-strong);border-radius:2px}
.ncv3 .v3coin{display:block;flex:none}

/* ── NoticeBar (NoticeBar.tsx) ── */
.ncv3 .v3-notice{display:flex;align-items:center;gap:var(--space-base);background:var(--color-notice-bg);
  border-radius:var(--radius-card);padding:var(--space-11) var(--space-lg)}
.ncv3 .v3-notice-tag{flex:none;display:inline-flex;align-items:center;gap:var(--space-7);
  color:var(--color-notice-accent);font-weight:var(--fw-bold);font-size:13px;white-space:nowrap}
.ncv3 .v3-notice-body{flex:1;display:flex;align-items:center;gap:var(--space-md);font-size:14px;
  color:var(--color-text-primary);font-weight:var(--fw-bold);min-width:0;overflow:hidden}
.ncv3 .v3-notice-body .clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ncv3 .v3-notice-body .dot{color:var(--color-border-strong);flex:none}
.ncv3 .v3-notice-count{flex:none;font-size:13px;font-weight:var(--fw-bold);color:var(--color-text-secondary);white-space:nowrap}

/* ── Top row: Textbook + Hero ── */
.ncv3 .v3-toprow{display:flex;gap:var(--space-xl);margin-top:var(--space-lg);align-items:stretch}

/* TextbookCard (TextbookCard.tsx) */
.ncv3 .v3-tb{width:300px;flex:none;background:var(--color-surface-default);border-radius:var(--radius-card);
  padding:var(--space-xl) var(--space-xl);box-shadow:var(--shadow-card-lg);display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.ncv3 .v3-tb-h{font-size:14px;font-weight:var(--fw-bold);color:var(--color-text-primary);margin-bottom:var(--space-base);line-height:1.4}
.ncv3 .v3-tb-h small{color:var(--color-text-subtle);font-weight:var(--fw-medium);font-size:13px}
.ncv3 .v3-tb-row{display:flex;align-items:center;gap:var(--space-14);margin-bottom:var(--space-14);width:100%}
.ncv3 .v3-tb-ic{width:56px;height:56px;border-radius:var(--radius-tile);background:var(--color-brand-primary);
  display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.ncv3 .v3-tb-ic img{width:100%;height:100%;border-radius:var(--radius-tile);object-fit:cover;display:block}
.ncv3 .v3-tb-name{font-weight:var(--fw-bold);font-size:16px;line-height:1.35;color:var(--color-text-primary)}
.ncv3 .v3-tb-sub{font-size:13px;color:var(--color-text-secondary);font-weight:var(--fw-bold)}
.ncv3 .v3-tb-sub2{font-size:12px;color:var(--color-text-subtle);margin-top:6px}
.ncv3 .v3-tb-btns{display:flex;flex-direction:column;gap:var(--space-sm-plus);width:100%;margin-top:var(--space-lg)}

/* HeroCard (HeroCard.tsx) */
.ncv3 .v3-hero{flex:1}
.ncv3 .v3-hero-in{background:var(--gradient-hero);border-radius:var(--radius-hero);padding:var(--space-4xl) var(--space-4xl);
  position:relative;overflow:hidden;height:100%}
.ncv3 .v3-hero-glow{position:absolute;border-radius:var(--radius-full);pointer-events:none}
.ncv3 .v3-hero-glow.g1{right:-60px;top:-60px;width:340px;height:340px;background:radial-gradient(circle at center,rgb(255 255 255 / 6%) 0%,transparent 68%)}
.ncv3 .v3-hero-glow.g2{right:60px;bottom:-60px;width:220px;height:220px;background:radial-gradient(circle at center,rgb(255 255 255 / 5%) 0%,transparent 70%)}
.ncv3 .v3-hero-body{position:relative;z-index:1}
.ncv3 .v3-hero-eyebrow{font-size:16px;color:var(--color-text-on-dark);font-weight:var(--fw-medium);margin-bottom:var(--space-sm-plus)}
.ncv3 .v3-hero-h1{font-size:48px;font-weight:var(--fw-bold);color:var(--color-text-inverse);line-height:1.1;
  margin-bottom:var(--space-14);letter-spacing:-.011em}
.ncv3 .v3-hero-p{font-size:16px;color:var(--color-text-on-dark-2);line-height:1.65;max-width:500px;margin-bottom:var(--space-base)}
.ncv3 .v3-hero-cta{display:flex;align-items:center;gap:var(--space-14);flex-wrap:wrap}
.ncv3 .v3-hero-coins{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-on-dark-2);font-size:16px;font-weight:var(--fw-bold)}
.ncv3 .v3-hero-coins b{color:var(--color-text-inverse);font-weight:var(--fw-bold)}

/* ── FavoriteTutors (FavoriteTutors.tsx) ── */
.ncv3 .v3-fav{background:var(--color-surface-page);border-radius:var(--radius-2xl);padding:var(--space-md) var(--space-xl);margin-top:var(--space-sm)}
.ncv3 .v3-fav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm-plus)}
.ncv3 .v3-fav-title{display:flex;align-items:center;gap:var(--space-md)}
.ncv3 .v3-fav-title .t{font-weight:var(--fw-bold);font-size:24px;letter-spacing:-.017em}
.ncv3 .v3-fav-nav{display:flex;align-items:center;gap:var(--space-14)}
.ncv3 .v3-fav-range{font-size:14px;color:var(--color-text-subtle);font-weight:var(--fw-bold)}
.ncv3 .v3-fav-btns{display:flex;gap:var(--space-sm-plus);align-items:center}
.ncv3 .v3-round{width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  border-radius:var(--radius-md);background:var(--color-surface-default);border:var(--border-thin) solid var(--color-border-default);color:var(--color-text-secondary)}
.ncv3 .v3-round:hover{background:var(--overlay-hover-on-light)}
/* flex TRACK (all fav cards in one horizontal row); translateX scrolls it 5-at-a-time inside .v3-fav-viewport */
.ncv3 .v3-fav-grid{display:flex;gap:var(--space-base);transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
.ncv3 .v3-fcard{flex:0 0 calc((100% - 4 * var(--space-base)) / 5);background:var(--color-surface-default);border-radius:var(--radius-xl);padding:var(--space-14);border:var(--border-thin) solid var(--color-border-default)}
.ncv3 .v3-fcard-ph{position:relative}
.ncv3 .v3-fcard-ph .photo{width:100%;height:215px;border-radius:12px;object-fit:cover;display:block;background:var(--color-border-default)}
.ncv3 .v3-fcard-heart{position:absolute;top:var(--space-sm-plus);right:var(--space-sm-plus);color:var(--color-favorite);filter:drop-shadow(0 1px 3px rgba(0,0,0,.2))}
.ncv3 .v3-fcard-name{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-14)}
.ncv3 .v3-fcard-name .dot{width:14px;height:14px;border-radius:var(--radius-full);flex:none}
.ncv3 .v3-fcard-name .n{font-weight:var(--fw-bold);font-size:20px;color:var(--color-text-primary)}
.ncv3 .v3-fcard-row{display:flex;align-items:center;gap:var(--space-7);margin-top:var(--space-sm);font-size:14px;font-weight:var(--fw-bold)}
.ncv3 .v3-fcard-row.country{color:var(--color-text-secondary)}
.ncv3 .v3-fcard-row.rating{color:var(--color-text-primary)}
.ncv3 .v3-fcard-row.rating .sub{color:var(--color-text-subtle);font-weight:var(--fw-medium)}
/* NJ-98425 (Aug 12): favorite-card coins row is 16px in the handoff (number + "Coins"), matching grid5. */
.ncv3 .v3-fcard-row.coins{color:var(--color-text-primary);font-size:16px}
.ncv3 .v3-dot-online{background:var(--color-dot-online)}
.ncv3 .v3-dot-offline{background:var(--color-dot-offline)}

/* ── FilterBar (FilterBar.tsx) — fields keep gray border in every state ── */
.ncv3 .v3-filter{margin-top:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm-plus)}
.ncv3 .v3-filter-row1{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.ncv3 .v3-field{position:relative}
.ncv3 .field-box{width:100%;background:var(--color-surface-default);border:var(--border-thin) solid var(--color-border-strong);
  border-radius:var(--radius-tile);padding:var(--space-14) var(--space-14);display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left;font:inherit;line-height:normal}
.ncv3 .field-box .fb-l{display:block;font-size:12px;color:var(--color-text-subtle);font-weight:var(--fw-bold);margin-bottom:3px}
.ncv3 .field-box .fb-v{display:block;font-size:16px;font-weight:var(--fw-bold);color:var(--color-text-primary);min-height:24px}
.ncv3 .field-box .fb-caret{color:var(--color-text-subtle);flex:none}
.ncv3 .v3-filter-row2{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm-plus);flex-wrap:wrap}
.ncv3 .v3-filter-left{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}
.ncv3 .v3-pill{display:inline-flex;align-items:center;gap:var(--space-7);background:var(--color-surface-default);
  border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-9) var(--space-base);
  font-weight:var(--fw-bold);font-size:13px;color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;font:inherit}
.ncv3 .v3-count{display:inline-flex;align-items:center;justify-content:center;background:var(--color-checkbox-checked);color:#fff;
  font-weight:var(--fw-bold);font-size:12px;border-radius:var(--radius-full);width:20px;height:20px;line-height:1}
.ncv3 .v3-search{display:flex;align-items:center;gap:var(--space-sm);background:var(--color-surface-default);
  border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-9) var(--space-14);
  min-width:210px;color:var(--color-text-subtle);font-size:13px;font-weight:var(--fw-bold);flex-shrink:0}
.ncv3 .v3-search input{border:none;background:transparent;font-family:inherit;font-size:13px;font-weight:var(--fw-bold);color:var(--color-text-primary);width:100%;outline:none}
.ncv3 .v3-filter-actions{display:flex;align-items:center;gap:var(--space-sm);flex:none}

/* ── TutorSection heading + controls ── */
.ncv3 .v3-avail-head{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap;gap:var(--space-md)}
.ncv3 .v3-avail-title{font-weight:var(--fw-bold);font-size:24px;letter-spacing:-.017em;margin:0}
.ncv3 .v3-avail-title .cnt{font-weight:var(--fw-medium);font-size:16px;color:var(--color-text-secondary);margin-left:var(--space-xs)}
.ncv3 .v3-avail-ctrl{display:flex;align-items:center;gap:var(--space-14)}
.ncv3 .v3-sort{position:relative;width:210px}
/* NJ-98425 (Aug 12): Sort-by is the FULL-SIZE field box in the handoff (210×74, 16px padding),
   NOT a compact one — inherits base .field-box / .fb-l / .fb-v, same as the row-1 fields. */
.ncv3 .v3-changeview-l{font-size:12px;color:var(--color-text-subtle);font-weight:var(--fw-medium);margin-left:var(--space-xs)}
.ncv3 .v3-views{display:flex;gap:var(--space-xs)}
.ncv3 .v3-view{background:var(--color-view-btn-idle);border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-md);
  width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:var(--color-view-icon-idle)}
.ncv3 .v3-view.on{background:var(--color-brand-primary);border:none;color:#fff}

/* specialty chip (shared) */
.ncv3 .v3-chip{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--color-chip-specialty-bg);color:var(--color-chip-specialty-fg);font-weight:var(--fw-bold);border-radius:var(--radius-full)}

/* view container visibility (toggled by JS) */
.ncv3 .v3-view-pane{display:none}
.ncv3 .v3-view-pane.on{display:block}

/* ── List card (ListCard) ── */
.ncv3 .v3-list{display:flex;flex-direction:column;gap:var(--space-14)}
.ncv3 .v3-lc{background:var(--color-surface-default);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-xl);
  border:var(--border-thin) solid var(--color-border-default);display:grid;grid-template-columns:150px 1fr 240px;gap:var(--space-xl);align-items:center}
.ncv3 .v3-lc-photo{width:150px;height:160px;border-radius:18px;object-fit:cover;align-self:center;background:var(--color-border-default);display:block}
.ncv3 .v3-lc-mid{min-width:0}
.ncv3 .v3-lc-namerow{display:flex;align-items:center;gap:var(--space-9);flex-wrap:wrap}
.ncv3 .v3-lc-name{font-weight:var(--fw-bold);font-size:24px}
.ncv3 .v3-status{border-radius:var(--radius-full);flex:none}
.ncv3 .v3-lc-namerow .v3-status{width:17px;height:17px}
.ncv3 .v3-lc-speaks{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-9);font-size:14px;color:var(--color-text-secondary);font-weight:var(--fw-bold)}
.ncv3 .v3-lc-bio{margin:var(--space-14) 0 0;font-size:16px;line-height:1.55;color:var(--color-text-primary);overflow-wrap:anywhere;word-break:break-word;min-height:calc(1.55em * 2)}
.ncv3 .v3-lc-pop{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-md);font-size:13px;font-weight:var(--fw-bold);color:var(--color-text-secondary)}
.ncv3 .v3-lc-pop b{color:var(--color-text-primary)}
.ncv3 .v3-lc-right{border-left:var(--border-thin) solid var(--color-border-default);padding-left:var(--space-xl);display:flex;flex-direction:column;justify-content:center;align-self:stretch}
.ncv3 .v3-lc-coinrow{display:flex;align-items:center;gap:var(--space-9)}
.ncv3 .v3-lc-coinrow .coins{font-weight:var(--fw-bold);font-size:32px;color:var(--color-text-primary)}
.ncv3 .v3-lc-coinrow .lbl{font-size:14px;color:var(--color-text-subtle);font-weight:var(--fw-bold)}
.ncv3 .v3-heart{border:none;cursor:pointer;background:none;padding:var(--space-xxs);border-radius:var(--radius-md);color:var(--color-favorite-empty);line-height:0}
.ncv3 .v3-heart.on{color:var(--color-favorite)}
.ncv3 .v3-lc-coinrow .v3-heart{margin-left:auto}
.ncv3 .v3-2c-coins .v3-heart{margin-left:auto}
.ncv3 .v3-lc-stats{display:flex;align-items:center;gap:var(--space-base);margin-top:var(--space-base);line-height:normal}
.ncv3 .v3-lc-stats .v{font-weight:var(--fw-bold);font-size:16px;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-xxs)}
.ncv3 .v3-lc-stats .k{font-size:12px;color:var(--color-text-subtle)}
.ncv3 .v3-lc-chip{font-size:13px;padding:var(--space-7) var(--space-base);margin-top:var(--space-base);align-self:flex-start}

/* ── 2-col card (Grid2Card) ── */
.ncv3 .v3-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-14)}
.ncv3 .v3-2c{background:var(--color-surface-default);border-radius:var(--radius-lg);padding:var(--space-lg);border:var(--border-thin) solid var(--color-border-default)}
.ncv3 .v3-2c-top{display:flex;gap:var(--space-14);align-items:stretch}
.ncv3 .v3-2c-photo{width:110px;height:110px;flex:none;border-radius:18px;object-fit:cover;background:var(--color-border-default);display:block}
.ncv3 .v3-2c-mid{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.ncv3 .v3-2c-name{display:flex;align-items:center;gap:var(--space-sm)}
.ncv3 .v3-2c-name .n{font-weight:var(--fw-bold);font-size:20px}
.ncv3 .v3-2c-name .v3-status{width:14px;height:14px}
.ncv3 .v3-2c-meta{font-size:13px;color:var(--color-text-secondary);margin-top:var(--space-7);font-weight:var(--fw-bold)}
.ncv3 .v3-2c-chip{font-size:12px;padding:var(--space-xs) var(--space-md);align-self:flex-start}
.ncv3 .v3-2c-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex:none}
.ncv3 .v3-2c-coins{display:flex;align-items:center;gap:var(--space-7)}
.ncv3 .v3-2c-coins .v3coin{width:24px;height:24px}
.ncv3 .v3-2c-coins .n{font-weight:var(--fw-bold);font-size:20px;color:var(--color-text-primary)}
.ncv3 .v3-2c-coins .lbl{font-size:14px;color:var(--color-text-subtle)}
.ncv3 .v3-2c-right .v3btn{white-space:nowrap}

/* ── 5-col card (Grid5Card) ── */
.ncv3 .v3-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md)}
.ncv3 .v3-5c{position:relative;background:var(--color-surface-default);border-radius:var(--radius-lg);padding:var(--space-14);border:var(--border-thin) solid var(--color-border-default)}
/* NJ-98425 — whole-card click → tutor profile (grid5 has no button). Stretched link under the heart (heart is z-index:2). */
.ncv3 .v3-5c-link{position:absolute;inset:0;z-index:1;border-radius:var(--radius-lg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ncv3 .v3-5c-link:focus-visible{outline:2px solid var(--color-brand-primary);outline-offset:2px}
.ncv3 .v3-5c-ph{position:relative}
.ncv3 .v3-5c-ph .photo{width:100%;height:215px;border-radius:14px;object-fit:cover;display:block;background:var(--color-border-default)}
.ncv3 .v3-5c-heart{position:absolute;top:var(--space-sm-plus);right:var(--space-sm-plus);border:none;cursor:pointer;background:none;padding:0;z-index:2;color:var(--color-favorite-empty);line-height:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.15))}
.ncv3 .v3-5c-heart.on{color:var(--color-favorite)}
.ncv3 .v3-5c-name{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-14)}
.ncv3 .v3-5c-name .v3-status{width:14px;height:14px}
.ncv3 .v3-5c-name .n{font-weight:var(--fw-bold);font-size:20px;line-height:1.35;color:var(--color-text-primary)}
.ncv3 .v3-5c-row{display:flex;align-items:center;gap:var(--space-7);margin-top:var(--space-9);font-size:14px;font-weight:var(--fw-bold)}
.ncv3 .v3-5c-row.country{color:var(--color-text-secondary)}
.ncv3 .v3-5c-row.rating{color:var(--color-text-primary)}
.ncv3 .v3-5c-row.rating .sub{color:var(--color-text-subtle);font-weight:var(--fw-medium)}
/* NJ-98425 (Aug 12): grid5 (view-3) coins row is 16px in the handoff (number + "Coins"),
   while country/rating stay 14px. */
.ncv3 .v3-5c-row.coins{color:var(--color-text-primary);font-size:16px}

/* ── FilterBar row-2 refinements (align to artifact) ──
   The four TOP fields stay big; row 2 (pills + search + actions) is one consistent compact height.
   Fixes: pills weren't tiny, search <input> UA styling made it bulky, Reset looked smaller than the
   shadowed Search → give Reset a matching key-shadow so the pair aligns. */
/* NJ-98425 (Aug 12): row-1 fields match the handoff EXACTLY — 16×16 padding (sp.s14/s18),
   label mb 3, value min-h 24. Height is now driven by padding + `normal` leading (set on
   .field-box above), not the legacy body line-height the .ncv3 scope was inheriting. */
.ncv3 .v3-filter-row1 .field-box{padding:var(--space-14) var(--space-14)}
.ncv3 .v3-filter-row1 .fb-l{margin-bottom:3px}
.ncv3 .v3-filter-row1 .fb-v{min-height:24px}
/* NJ-98425 (Aug 12): row-2 pills + search match the handoff — padding-driven ~37px (8×16 +
   `normal` leading), 13px text. (Base .v3-pill ends in `font:inherit`, so size/weight/leading
   must be re-set here explicitly or they fall back to the legacy inherited values.) */
.ncv3 .v3-pill{padding:var(--space-9) var(--space-base);font-size:13px;font-weight:var(--fw-bold);line-height:normal}
.ncv3 .v3-search{line-height:normal}
.ncv3 .v3-search input{padding:0;margin:0;line-height:normal;font-size:13px;font-weight:var(--fw-bold);-webkit-appearance:none;appearance:none;border:0;box-shadow:none;border-radius:0}
.ncv3 .v3-search input::placeholder{color:var(--color-text-subtle);font-weight:var(--fw-bold);opacity:1}
/* NJ-98425 (Aug 12): Reset + Search match the handoff Button sm exactly — base .v3btn.sm
   (10×16, 14px, line-height 1) ≈ 36px (Reset's outline adds 1px border each side). The forced
   40px override is removed; shadow already flat per the earlier FB. */

/* list-card bio: 2-line clamp + ellipsis (like v2); "Learn more" toggles .is-open to expand */
.ncv3 .v3-lc-bio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ncv3 .v3-lc-bio.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}

/* ── Grid fix: allow grid/flex items to shrink below content width so the wide teacher/banner
   photos don't blow out the 1fr tracks (was making 2-col + 5-grid columns uneven / images huge). */
.ncv3 .v3-5c,.ncv3 .v3-2c{min-width:0}
.ncv3 .v3-2c-top{min-width:0}
.ncv3 .v3-5c-ph{min-width:0;overflow:hidden;border-radius:14px}
.ncv3 .v3-5c-ph .photo{max-width:100%}
.ncv3 .v3-lc,.ncv3 .v3-lc-mid{min-width:0}
.ncv3 .v3-lc-photo{max-width:100%}
/* campaign banner spans the full grid width inside the 2-col / 5-grid views (like v2) */
.ncv3 .v3-grid5 .ncv3-list-banner,.ncv3 .v3-grid2 .ncv3-list-banner{grid-column:1/-1}

/* ── Filter/Sort dropdown menus (Teacher Status + Sort by are wired to the AJAX) ── */
.ncv3 .v3-ddl{position:relative}
.ncv3 .v3-ddl-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:300;background:var(--color-surface-default);
  border-radius:var(--radius-tile);box-shadow:var(--shadow-menu);border:var(--border-thin) solid var(--color-border-default);overflow:hidden;display:none}
.ncv3 .v3-ddl.open .v3-ddl-menu{display:block}
.ncv3 .v3-sort .v3-ddl-menu{min-width:190px;right:auto}
.ncv3 .v3-ddl-opt{display:block;width:100%;text-align:left;padding:var(--space-md) var(--space-lg);font-size:14px;
  color:var(--color-text-primary);background:var(--color-surface-default);border:none;border-bottom:var(--border-thin) solid var(--color-border-default);cursor:pointer;font-family:inherit}
.ncv3 .v3-ddl-opt:last-child{border-bottom:none}
.ncv3 .v3-ddl-opt:hover{background:var(--color-surface-subtle)}
.ncv3 .v3-ddl-opt.on{background:rgb(30 115 220 / 8%);color:var(--color-info)}

/* ── Status LED spectrum (matches platform / v2 .ncv3-dot--*) — the mapping's $t['status'] drives it ── */
.ncv3 .v3-dot--wait,.ncv3 .v3-dot--on{background:var(--color-lesson-now)}      /* standby / available now → cyan */
.ncv3 .v3-dot--lesson,.ncv3 .v3-dot--live{background:var(--color-favorite)}    /* in class / live lesson → red */
.ncv3 .v3-dot--on-break{background:#fcc916}                                    /* on break → amber */
.ncv3 .v3-dot--reserved{background:#f9ce15}                                    /* own reservation → gold */
.ncv3 .v3-dot--offline,.ncv3 .v3-dot--off{background:var(--color-dot-offline)} /* offline → gray */

/* ── Filter popovers (Specialties / Also speaks) — multi-select checkboxes, applied on Search ── */
.ncv3 .v3-fpop{position:relative}
.ncv3 .v3-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:300;background:var(--color-surface-default);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-menu);border:var(--border-thin) solid var(--color-border-default);min-width:290px;padding:var(--space-sm) 0;display:none}
.ncv3 .v3-fpop.open .v3-pop{display:block}
.ncv3 .v3-pop-head{padding:var(--space-md) var(--space-lg) var(--space-xs);font-size:12px;font-weight:var(--fw-bold);color:var(--color-text-primary);letter-spacing:.02em}
.ncv3 .v3-pop-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-11) var(--space-lg);
  font-size:14px;font-weight:var(--fw-medium);color:var(--color-text-primary);cursor:pointer;border-bottom:var(--border-thin) solid var(--color-border-default)}
.ncv3 .v3-pop-row:last-child{border-bottom:none}
.ncv3 .v3-pop-row:hover{background:var(--color-surface-subtle)}
.ncv3 .v3-pop-row input{width:20px;height:20px;flex:none;accent-color:var(--color-checkbox-checked);cursor:pointer}
.ncv3 .v3-pill-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--color-checkbox-checked);color:#fff;
  font-weight:var(--fw-bold);font-size:12px;border-radius:var(--radius-full);width:20px;height:20px;line-height:1}
.ncv3 .v3-pill-badge[hidden]{display:none}

/* ── Favorites: real carousel — a flex TRACK that translateX-scrolls inside a clipped viewport ── */
.ncv3 .v3-fav{position:relative}
.ncv3 .v3-fav-viewport{overflow:hidden}
/* Carousel scroll speed — tune the transition here (or set `transition:none` to disable the slide). */
/* (the flex-track + transform:translateX are set on .v3-fav-grid in the component block above) */
@media (prefers-reduced-motion:reduce){.ncv3 .v3-fav-grid{transition:none}}
/* pager buttons disabled at the ends */
.ncv3 .v3-round:disabled{opacity:.4;cursor:default;pointer-events:none}

/* ── Real announcements bar (Elements/important_announcements.php) — ported from v2, scoped .ncv3 ── */
/* NJ-98425 (Aug 12): match the handoff NoticeBar — light red-orange bar, "📣 What's new" as red
   TEXT (no pill), notice title in text-primary, count in warm-muted grey. The dropdown toggle +
   click→modal behaviour is kept. Explicit resets (border/background/padding/text-decoration) override
   the now-superseded base block in mypage_v3_base.css so its old red pill can't leak through. */
.ncv3 .important-announcements-container{background:var(--color-notice-bg);border:none;border-radius:var(--radius-card);overflow:hidden}
.ncv3 .important-announcements-container .announcement-group{box-sizing:border-box;padding:12px 20px;border-bottom:1px solid #f7cdba}
.ncv3 .important-announcements-container .announcement-group:last-child{border-bottom:none}
.ncv3 .important-announcements-container .announcement-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-base);width:100%;max-width:none;margin:0}
.ncv3 .important-announcements-container .announcement-header{display:flex;align-items:center;gap:var(--space-base);min-width:0}
.ncv3 .important-announcements-container .announcement-tag{flex:none;background:none;padding:0;border-radius:0;color:var(--color-notice-accent);font-weight:var(--fw-bold);font-size:13px;white-space:nowrap}
.ncv3 .important-announcements-container .announcement-content{color:var(--color-text-primary);font-weight:var(--fw-bold);font-size:14px;text-decoration:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.ncv3 .important-announcements-container .announcement-content:hover{text-decoration:underline}
.ncv3 .important-announcements-container .announcement-details{display:flex;align-items:center;gap:var(--space-base);flex:none}
.ncv3 .important-announcements-container .announcement-count{color:#767676;font-size:13px;font-weight:var(--fw-bold);white-space:nowrap}
.ncv3 .important-announcements-container .announcement-toggle{cursor:pointer;line-height:0}
.ncv3 .important-announcements-container .announcement-toggle .on,.ncv3 .important-announcements-container .announcement-toggle .off{box-sizing:border-box;padding:6px;width:28px;height:28px;border-radius:50%}
.ncv3 .important-announcements-container .announcement-toggle .on{background:#798998}
.ncv3 .important-announcements-container .announcement-toggle .off{background:var(--color-notice-accent)}
.ncv3 .important-announcements-container .announcement-toggle.on .off{display:none}
.ncv3 .important-announcements-container .announcement-toggle.off .on{display:none}
.ncv3 .important-announcements-container .announcement-group:not(:first-child) .announcement-details{display:none}
/* NJ-98425 (Aug 12): notice-bar expand/collapse as a CSS-transition accordion (v3 only) — replaces the janky
   jQuery slideUp/Down (JS height animation → reflow every frame). ═══ LIVE-TUNABLE ═══ open DevTools, select
   .important-announcements-container.ncv3-anim and scrub these three, then tell me the values to bake in:
     --ncv3-notice-dur  = speed        (try .25s–.5s)
     --ncv3-notice-ease = easing curve (try cubic-bezier(.4,0,.2,1) / cubic-bezier(.16,1,.3,1) / ease-out)
     --ncv3-notice-maxh = per-row cap  (notices are 1 line ~48px; raise if a notice ever clips) */
.ncv3 .important-announcements-container.ncv3-anim{--ncv3-notice-dur:.38s;--ncv3-notice-ease:cubic-bezier(.4,0,.2,1);--ncv3-notice-maxh:64px}
.ncv3 .important-announcements-container.ncv3-anim .announcement-group:not(:first-child){
  max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0;border-bottom-width:0;
  transition:max-height var(--ncv3-notice-dur) var(--ncv3-notice-ease),opacity calc(var(--ncv3-notice-dur) * .6) ease,padding var(--ncv3-notice-dur) var(--ncv3-notice-ease),border-bottom-width var(--ncv3-notice-dur) var(--ncv3-notice-ease)}
.ncv3 .important-announcements-container.ncv3-anim.open .announcement-group:not(:first-child){max-height:var(--ncv3-notice-maxh);opacity:1;padding-top:12px;padding-bottom:12px}
.ncv3 .important-announcements-container.ncv3-anim.open .announcement-group:not(:first-child):not(:last-child){border-bottom-width:1px}

/* ── Tour "refresher" launcher (v3 only): orange brand pill (design update from teal); v2 keeps teal ── */
.ncv3-launcher.ncv3-launcher--v3{background:var(--color-brand-primary,#f1890e);box-shadow:0 10px 26px rgba(241,137,14,.42);left:auto;right:24px}
.ncv3-launcher.ncv3-launcher--v3 .ncv3-launcher-txt .s{color:rgba(255,255,255,.9)}

/* ── NJ-98216: AI Support floating button on v3 — right side, stacked ABOVE the tour launcher
   (#ncv3-launcher sits at bottom:24px right:24px). Right edges aligned; ~72px button clears the pill. ── */
.ai-support-floating-btn.ai-support--v3{right:24px;bottom:98px}
@media (max-width:640px){ .ai-support-floating-btn.ai-support--v3{bottom:88px} }

/* ── Free-trial banner (NJ-13482) — below announcements, above textbook/hero ── */
.ncv3 .v3-free-trial{margin-top:var(--space-lg)}
.ncv3 .v3-free-trial .fio_banner{display:block;line-height:0;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}
.ncv3 .v3-free-trial img{display:block;width:100%;height:auto}
/* ── Campaign banner in the tutor list — round it + soft shadow so it reads as a card (was raw full-width) ── */
.ncv3 .ncv3-list-banner{margin:var(--space-md) 0;width:100%}
.ncv3 .ncv3-list-banner .banner_area{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card)}
.ncv3 .ncv3-list-banner .fio_banner{display:block;line-height:0}
.ncv3 .ncv3-list-banner img{display:block;width:100%;height:auto}