* { box-sizing: border-box; }
body { font-family: "Prompt", -apple-system, "Segoe UI", "Sarabun", sans-serif; margin: 0; background: #f4f6fa; color: #222; font-weight: 400; }
h1, h2, h3, .brand { font-family: "Prompt", -apple-system, sans-serif; font-weight: 700; letter-spacing: -.01em; }
a { color: #2962ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1300px; margin: 0 auto; padding: 15px 14px; box-sizing: border-box; }
.topbar { background: #fff; border-bottom: 1px solid #e3e8f0; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { font-size: 22px; font-weight: 800; color: #2962ff; }
.nav nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav nav a { color: #333; font-size: 15px; }
.me { color: #666; font-size: 14px; }

/* ===== Modern Navbar v2 ===== */
.navbar { position: sticky; top: 0; left: 0; right: 0; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; z-index: 120; transition: box-shadow .2s, border-color .2s, background .2s; }
.navbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.06); border-bottom-color: #eef1f6; background: rgba(255,255,255,.96); }
.nav-inner { display: flex; align-items: center; gap: 18px; padding: 14px 16px; }

.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.nav-brand:hover { text-decoration: none; }
.nav-logo { display: inline-flex; }
.nav-logo svg { display: block; width: 40px; height: 40px; }
.nav-brand-text { font-size: 26px; font-weight: 800; background: linear-gradient(135deg,#2962ff,#7b2cbf,#f72585); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -.02em; }

.nav-menu { display: flex; align-items: center; gap: 8px; flex: 1; }

.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border-radius: 10px; font-size: 15.5px; font-weight: 500; color: #444; text-decoration: none; transition: all .15s; position: relative; }
.nav-link:hover { background: #f0f3f8; color: #2962ff; text-decoration: none; }
.nav-link.active { color: #2962ff; background: #e8efff; }
.nav-link.active::after { content:''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: linear-gradient(90deg,#2962ff,#7b2cbf); border-radius: 2px; }

.nav-cta { display: inline-flex; align-items: center; padding: 11px 24px; border-radius: 30px; font-size: 15.5px; font-weight: 700; background: linear-gradient(135deg,#2962ff,#7b2cbf); color: #fff !important; text-decoration: none; box-shadow: 0 4px 14px rgba(41,98,255,.3); transition: all .2s; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(41,98,255,.4); text-decoration: none; }

/* Search */
.nav-search { display: flex; align-items: center; gap: 8px; background: #f4f6fa; border-radius: 26px; padding: 10px 16px; flex: 0 1 320px; max-width: 320px; margin: 0 4px; transition: all .2s; color: #888; }
.nav-search:focus-within { background: #fff; box-shadow: 0 0 0 2px #2962ff, 0 4px 14px rgba(41,98,255,.1); color: #2962ff; }
.nav-search input { border: 0; outline: none; background: transparent; flex: 1; font-size: 15px; font-family: inherit; color: #222; min-width: 0; }
.nav-search input::placeholder { color: #999; }

.nav-spacer { flex: 1; }

/* Dropdown */
.nav-drop { position: relative; }
.nav-drop-trigger { background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.nav-drop-trigger svg, .nav-user-trigger svg { transition: transform .2s; }
.nav-drop.open .nav-drop-trigger svg, .nav-drop.open .nav-user-trigger svg { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.12); border: 1px solid #eef1f6; padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s; z-index: 200; }
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }

.nav-cat-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: inherit; transition: background .15s; }
.nav-cat-row:hover { background: #f7f9fc; text-decoration: none; }
.nav-cat-icon { font-size: 22px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#e8efff,#f0e7ff); border-radius: 10px; flex-shrink: 0; }
.nav-cat-row strong { display: block; font-size: 14.5px; color: #222; }
.nav-cat-row small { display: block; color: #888; font-size: 12px; }

/* Notification icon */
.nav-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #555; transition: all .15s; }
.nav-icon-btn:hover { background: #f0f3f8; color: #2962ff; text-decoration: none; }
.nav-icon-btn.active { background: #e8efff; color: #2962ff; }
.nav-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f72585; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }

/* User dropdown */
.nav-user-trigger { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; background: transparent; border: 1px solid transparent; border-radius: 30px; cursor: pointer; transition: all .15s; font-family: inherit; }
.nav-user-trigger:hover { background: #f4f6fa; border-color: #eef1f6; }
.nav-drop.open .nav-user-trigger { background: #f4f6fa; border-color: #d0d8e6; }
.nav-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-avatar span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; }
.nav-user-name { font-size: 15px; font-weight: 600; color: #333; }

.user-menu { min-width: 280px; padding: 0; }
.user-card { padding: 14px 16px; border-bottom: 1px solid #eef1f6; background: linear-gradient(135deg,#f7f9fc 0%,#fff 100%); border-radius: 12px 12px 0 0; }
.user-card-name { font-weight: 700; color: #222; font-size: 15px; }
.user-card-email { color: #888; font-size: 12px; margin-top: 2px; }
.user-card-role { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.user-card-role.role-admin { background: #fff5d6; color: #8a6500; }
.user-card-role.role-tutor { background: #e8efff; color: #2962ff; }
.user-card-role.role-student { background: #ffe4ec; color: #c2185b; }

.user-menu-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: #333; text-decoration: none; font-size: 14px; transition: background .12s; position: relative; }
.user-menu-item:hover { background: #f7f9fc; color: #2962ff; text-decoration: none; }
.user-menu-item.danger:hover { background: #fdeaea; color: #d32f2f; }
.mini-badge { margin-left: auto; background: #f72585; color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 700; }
.user-menu-divider { height: 1px; background: #eef1f6; margin: 4px 0; }

/* Hamburger */
.nav-close { display: none; }
.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; background: transparent; border: 0; cursor: pointer; border-radius: 10px; padding: 0; align-items: center; }
.nav-hamburger span { display: block; width: 24px; height: 2.5px; background: #333; border-radius: 2px; transition: transform .25s, opacity .15s; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,25,45,.45); z-index: 105; opacity: 0; transition: opacity .2s; pointer-events: none; }
.nav-backdrop.show { display: block; opacity: 1; pointer-events: auto; }

/* Responsive */
@media (max-width: 1000px) {
  .nav-search { display: none; }
}
@media (max-width: 880px) {
  /* Disable backdrop-filter so child fixed positioning escapes to viewport */
  .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .navbar.scrolled { background: #fff; }
  .nav-hamburger { display: inline-flex; }
  .nav-menu { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 320px; max-width: 86vw; height: 100vh; height: 100dvh; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 64px 14px 20px; transform: translateX(100%); transition: transform .28s ease; box-shadow: -8px 0 24px rgba(0,0,0,.15); overflow-y: auto; overflow-x: hidden; z-index: 110; flex: none; }
  .nav-close { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #f4f6fa; color: #d32f2f; border: 0; cursor: pointer; transition: all .15s; z-index: 2; }
  .nav-close:hover { background: #fdeaea; transform: rotate(90deg); }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu .nav-link { padding: 12px 14px; font-size: 15px; }
  .nav-menu .nav-link.active::after { display: none; }
  .nav-menu .nav-link.active { background: linear-gradient(90deg,#e8efff,transparent); border-left: 3px solid #2962ff; padding-left: 11px; }
  .nav-search { display: flex; margin: 10px 0; flex: 0 0 auto; max-width: 100%; width: 100%; padding: 12px 16px; height: auto; border-radius: 26px; box-sizing: border-box; }
  .nav-search input { flex: 1 1 auto; }
  .nav-spacer { display: none; }
  .nav-drop-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 16px; display: none; }
  .nav-drop.open .nav-drop-menu { display: block; }
  .nav-icon-btn { width: 100%; height: auto; justify-content: flex-start; padding: 12px 14px; border-radius: 8px; gap: 10px; }
  .nav-icon-btn::after { content: 'แชท'; font-size: 15px; color: #444; }
  .nav-icon-btn.active::after { color: #2962ff; }
  .nav-badge { position: static; margin-left: auto; }
  /* .nav-backdrop is toggled via .show class — no display override needed */
  .nav-cta { width: 100%; justify-content: center; text-align: center; margin-top: 10px; }
  .nav-user-trigger { width: 100%; border: 1px solid #eef1f6; margin-top: 10px; }
}
.btn-primary, button.btn, .btn { display: inline-block; background: #2962ff; color: #fff !important; padding: 8px 18px; border-radius: 20px; border: 0; cursor: pointer; font-size: 15px; }
.btn-primary:hover, .btn:hover { background: #1e4cd1; text-decoration: none; }
.btn.outline { background: #fff; color: #2962ff !important; border: 1px solid #2962ff; }
.btn.danger { background: #d32f2f; }
.btn.small { padding: 5px 12px; font-size: 13px; }
main { padding: 24px 0 60px; min-height: 70vh; }
h1 { font-size: 28px; margin-top: 0; }
h2 { font-size: 22px; }
.card { background: #fff; border-radius: 10px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 18px; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cfd5e0; border-radius: 6px; font-size: 15px; font-family: inherit;
}
.form-row textarea { min-height: 100px; resize: vertical; }
.flash { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.flash.ok { background: #e6f4ea; color: #1e7a3a; }
.flash.err { background: #fdeaea; color: #b71c1c; }
.tutor-card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; gap: 14px; }
.tutor-card .avatar { width: 70px; height: 70px; border-radius: 50%; background: #dbe5f5; object-fit: cover; flex-shrink: 0; }
.tutor-card h3 { margin: 0 0 6px; font-size: 17px; }
.tutor-card .meta { color: #666; font-size: 13px; margin: 4px 0; }
.tutor-card .price { color: #2962ff; font-weight: 700; }
.tag { display: inline-block; background: #e8efff; color: #2962ff; padding: 2px 10px; border-radius: 12px; font-size: 12px; margin: 2px 4px 2px 0; }
.rating { color: #f59f00; font-weight: 600; }
.hero { background: linear-gradient(135deg,#2962ff,#5c8eff); color: #fff; padding: 60px 0; border-radius: 14px; text-align: center; margin-bottom: 28px; }
.hero h1 { font-size: 36px; margin: 0 0 12px; color: #fff; }
.hero p { font-size: 17px; opacity: .95; margin-bottom: 22px; }
.hero .btn { background: #fff; color: #2962ff !important; font-weight: 700; padding: 12px 28px; }
.filter-bar { background: #fff; padding: 16px; border-radius: 10px; margin-bottom: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.footer { background: #fff; border-top: 1px solid #e3e8f0; padding: 24px 0; color: #666; font-size: 14px; text-align: center; }
.footer a { color: #666; }

/* ===== Admin Login (dark/secure theme) ===== */
.admin-login-wrap { max-width: 460px; margin: 40px auto; }
.admin-login-card { background: linear-gradient(180deg, #0d1b2a 0%, #1a2a3e 100%); color: #e0e6ef; border-radius: 18px; padding: 38px 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.18); position: relative; overflow: hidden; }
.admin-login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2962ff, #7b2cbf, #f72585, #06d6a0); }
.admin-login-icon { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #2962ff, #7b2cbf); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: #fff; box-shadow: 0 8px 24px rgba(41,98,255,.35); }
.admin-login-card h1 { color: #fff; text-align: center; font-size: 24px; margin: 0 0 6px; letter-spacing: -.01em; }
.admin-login-sub { text-align: center; color: #8da3c3; font-size: 13px; margin: 0 0 22px; }
.admin-login-card .form-row label { color: #c5d0e0; font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; }
.admin-login-card input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; padding: 12px 14px; border-radius: 8px; width: 100%; font-size: 15px; font-family: inherit; transition: all .15s; }
.admin-login-card input::placeholder { color: #5d7194; }
.admin-login-card input:focus { background: rgba(255,255,255,.1); border-color: #2962ff; outline: none; box-shadow: 0 0 0 3px rgba(41,98,255,.2); }
.admin-login-btn { display: block; width: 100%; padding: 13px; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, #2962ff, #7b2cbf); border-radius: 8px !important; margin-top: 8px; box-shadow: 0 6px 18px rgba(41,98,255,.35); }
.admin-login-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(41,98,255,.5); }
.admin-login-foot { text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.admin-login-foot a { color: #8da3c3; font-size: 13px; }
.admin-login-foot a:hover { color: #fff; }
.admin-login-card .flash.err { background: rgba(211,47,47,.15); color: #ff9aa0; border: 1px solid rgba(211,47,47,.3); }
.admin-login-card .flash.ok { background: rgba(6,214,160,.15); color: #6ee0bd; border: 1px solid rgba(6,214,160,.3); }
.admin-login-note { text-align: center; color: #888; font-size: 12px; margin-top: 16px; padding: 0 20px; line-height: 1.6; }

/* ===== Credit pill (tutor profile) ===== */
.credit-pill { background: linear-gradient(135deg, #06d6a0 0%, #0bb88a 100%); color: #fff; padding: 12px 22px; border-radius: 14px; text-align: center; box-shadow: 0 6px 18px rgba(6,214,160,.3); flex-shrink: 0; }
.credit-pill-label { font-size: 12px; opacity: .9; margin-bottom: 2px; }
.credit-pill-value { font-size: 26px; font-weight: 800; line-height: 1.1; }
.credit-form .form-row { margin-bottom: 12px; }
.bank-box { background: #f7f9fc; border-radius: 10px; padding: 14px; }
.bank-row { padding: 12px 0; border-bottom: 1px dashed #e0e5ee; font-size: 14px; line-height: 1.6; }
.bank-row:last-child { border-bottom: 0; }
.bank-row code { background: #fff; padding: 3px 10px; border-radius: 4px; color: #2962ff; font-size: 15px; font-weight: 600; }
.slip-thumb { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid #e0e5ee; cursor: pointer; transition: transform .15s; display: block; }
.slip-thumb:hover { transform: scale(1.05); }
.slip-cell { text-align: center; }
.slip-cell small { display: block; margin-top: 4px; font-size: 11px; color: #888; }
.slip-thumb-zoom { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #e0e5ee; cursor: zoom-in; transition: all .15s; display: inline-block; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.slip-thumb-zoom:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(41,98,255,.2); border-color: #2962ff; }

/* ===== Slip zoom modal ===== */
.slip-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.slip-modal.open { display: block; }
.slip-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(4px); }
.slip-modal-panel { position: relative; width: 96%; max-width: 1100px; height: 92vh; margin: 4vh auto; background: #1a2a3e; border-radius: 14px; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.slip-modal-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.slip-modal-close:hover { background: #d32f2f; transform: rotate(90deg); }
.slip-modal-meta { padding: 18px 24px; background: linear-gradient(180deg, #0d1b2a, #1a2a3e); color: #fff; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.slip-modal-meta div span { color: #8da3c3; margin-right: 4px; }
.slip-modal-meta div strong { color: #fff; }
.slip-modal-imgwrap { background: #0a131f; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; position: relative; }
.slip-modal-imgwrap img { max-width: 100%; max-height: 100%; transition: transform .12s ease-out; transform-origin: center center; user-select: none; pointer-events: auto; }
.slip-modal-tools { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px 24px; background: linear-gradient(180deg, #1a2a3e, #0d1b2a); border-top: 1px solid rgba(255,255,255,.08); }
.slip-modal-tools .btn { padding: 6px 16px; font-size: 13px; min-width: 40px; }
.slip-modal-tools #zoomLevel { color: #fff; font-weight: 700; min-width: 60px; text-align: center; }
@media (max-width: 600px) {
  .slip-modal-panel { width: 100%; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; }
  .slip-modal-meta { padding: 12px 16px; font-size: 12px; }
  .slip-modal-tools { flex-wrap: wrap; padding: 10px; }
}

/* ===== Modern Admin Dashboard ===== */
.adm-hero { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #0d1b2a 0%, #1a2a3e 50%, #2962ff 100%); color: #fff; border-radius: 16px; padding: 28px 32px; margin-bottom: 22px; position: relative; overflow: hidden; }
.adm-hero::before { content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); border-radius: 50%; }
.adm-hero-text small { display: block; opacity: .8; margin-bottom: 4px; font-size: 13px; }
.adm-hero h1 { color: #fff; margin: 0 0 6px; font-size: 28px; }
.adm-hero p { margin: 0; opacity: .85; font-size: 14px; }
.adm-hero-live { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.12); padding: 14px 20px; border-radius: 14px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); position: relative; }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: #06d6a0; box-shadow: 0 0 0 4px rgba(6,214,160,.3); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(6,214,160,.3); } 50% { box-shadow: 0 0 0 10px rgba(6,214,160,.1); } }
.live-num { font-size: 28px; font-weight: 800; line-height: 1; color: #fff; }
.live-label { font-size: 11px; opacity: .9; }

/* Stat cards */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.adm-stat { background: #fff; border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; position: relative; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.04); transition: all .2s; border: 1px solid #eef1f6; }
.adm-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, #2962ff); }
.adm-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.1); text-decoration: none; border-color: var(--c, #2962ff); }
.adm-stat.blue   { --c: #2962ff; }
.adm-stat.pink   { --c: #f72585; }
.adm-stat.purple { --c: #7b2cbf; }
.adm-stat.green  { --c: #06d6a0; }
.adm-stat.orange { --c: #f59f00; }
.adm-stat.teal   { --c: #0096c7; }
.adm-stat.indigo { --c: #5340d1; }
.adm-stat.yellow { --c: #f9c74f; }
.adm-stat-icon { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, white); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.adm-stat-body { flex: 1; min-width: 0; }
.adm-stat-label { color: #888; font-size: 12px; margin-bottom: 2px; }
.adm-stat-num { font-size: 26px; font-weight: 800; color: #222; line-height: 1.1; }
.adm-stat-trend { font-size: 11px; color: #06d6a0; font-weight: 600; margin-top: 4px; }
.adm-stat-trend.warn { color: #f59f00; }
.adm-stat-trend.up::before { content: '↑ '; }

.adm-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eef1f6; gap: 12px; }
.adm-card-head h2 { margin: 0; font-size: 16px; }

.adm-traffic { background: linear-gradient(180deg, #fff, #fafbfd); }

/* Quick actions */
.adm-quick h2 { margin-top: 0; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-act { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fafbfd; border: 1px solid transparent; text-decoration: none; color: inherit; transition: all .15s; }
.quick-act:hover { background: #fff; border-color: #2962ff; transform: translateX(2px); text-decoration: none; }
.qa-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.quick-act strong { display: block; font-size: 13px; color: #222; }
.quick-act small { display: block; font-size: 11px; color: #888; }

/* List widget */
.adm-list { list-style: none; padding: 0; margin: 0; }
.adm-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #eef1f6; }
.adm-list li:last-child { border-bottom: 0; }
.adm-list-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.adm-list-main { flex: 1; min-width: 0; overflow: hidden; }
.adm-list-main strong { display: block; font-size: 14px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-list-main small { display: block; font-size: 11.5px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-list-end { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

@media (max-width: 700px) {
  .adm-hero { flex-direction: column; gap: 18px; align-items: flex-start; padding: 22px; }
  .adm-hero h1 { font-size: 22px; }
  .grid[style*="2fr 1fr"] { grid-template-columns: 1fr !important; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== Admin uniform components ===== */
.adm-page-head { background: #fff; border-radius: 14px; padding: 18px 22px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.04); border: 1px solid #eef1f6; flex-wrap: wrap; }
.adm-page-head-left { display: flex; align-items: center; gap: 14px; }
.adm-back { width: 36px; height: 36px; border-radius: 50%; background: #f0f3f8; display: inline-flex; align-items: center; justify-content: center; color: #333; font-size: 18px; text-decoration: none; transition: all .15s; flex-shrink: 0; }
.adm-back:hover { background: #2962ff; color: #fff; text-decoration: none; }
.adm-page-icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #2962ff, #7b2cbf); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.adm-page-head h1 { margin: 0; font-size: 22px; color: #222; }
.adm-page-head p { margin: 2px 0 0; color: #888; font-size: 13px; }
.adm-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.adm-toolbar { background: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 2px 6px rgba(0,0,0,.04); border: 1px solid #eef1f6; }
.adm-search { display: flex; align-items: center; gap: 8px; background: #f4f6fa; border-radius: 30px; padding: 6px 14px; min-width: 240px; flex: 1; max-width: 360px; }
.adm-search:focus-within { background: #fff; box-shadow: 0 0 0 2px #2962ff; }
.adm-search input { border: 0; outline: none; background: transparent; flex: 1; font-size: 14px; font-family: inherit; padding: 6px 0; min-width: 0; }
.adm-search-icon { color: #999; flex-shrink: 0; }
.adm-search .btn { flex-shrink: 0; padding: 6px 16px !important; font-size: 13px !important; }
.adm-filters { display: flex; gap: 14px; flex-wrap: wrap; }
.filter-chip-group { display: flex; gap: 4px; background: #f4f6fa; padding: 4px; border-radius: 30px; }
.filter-chip { padding: 7px 14px; border-radius: 30px; font-size: 13px; color: #555; text-decoration: none; transition: all .15s; font-weight: 500; }
.filter-chip:hover { background: rgba(255,255,255,.6); text-decoration: none; }
.filter-chip.on { background: #fff; color: #2962ff; box-shadow: 0 2px 8px rgba(41,98,255,.15); font-weight: 700; }

.adm-table-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04); border: 1px solid #eef1f6; }
.adm-table-head { padding: 14px 18px; border-bottom: 1px solid #eef1f6; background: linear-gradient(180deg, #fafbfd, #fff); }
.adm-table-head h3 { margin: 0; font-size: 14px; color: #555; }
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.adm-table th { background: #fafbfd; color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 12px 16px; border-bottom: 1px solid #eef1f6; text-align: left; }
.adm-table td { padding: 14px 16px; border-bottom: 1px solid #f5f7fb; font-size: 14px; vertical-align: middle; }
.adm-table tbody tr { transition: background .15s; }
.adm-table tbody tr:hover { background: #fafbfd; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table .text-right { text-align: right; }
.adm-table small { color: #888; font-size: 12px; display: block; }

.adm-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.adm-badge.green { background: #e6f4ea; color: #1e7a3a; }
.adm-badge.red { background: #fdeaea; color: #b71c1c; }
.adm-badge.yellow { background: #fff5d6; color: #8a6500; }
.adm-badge.gray { background: #f0f3f8; color: #666; }
.adm-badge.blue-badge { background: #e8efff; color: #2962ff; }
.adm-badge.pink-badge { background: #ffe0ec; color: #c2185b; }

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avi { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; overflow: hidden; flex-shrink: 0; object-fit: cover; }
.user-cell strong { font-size: 14px; color: #222; display: block; }
.user-cell small { font-size: 12px; color: #888; display: block; }

/* Stats hero */
.stats-hero { background: linear-gradient(135deg, #0d1b2a 0%, #2962ff 100%); color: #fff; border-radius: 16px; padding: 24px; margin-bottom: 22px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.stats-live { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.12); padding: 16px 22px; border-radius: 14px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); }
.stats-live-num { font-size: 36px; font-weight: 800; line-height: 1; }
.stats-live-label { font-size: 12px; opacity: .9; }
.stats-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; }
.stats-count { padding: 6px 14px; border-left: 2px solid rgba(255,255,255,.25); }
.stats-count small { display: block; opacity: .7; font-size: 11px; margin-bottom: 2px; }
.stats-count strong { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.stats-count span { font-size: 11px; opacity: .7; }

/* Top pages list */
.top-pages { list-style: none; padding: 0; margin: 0; }
.top-pages li { margin-bottom: 12px; }
.tp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.tp-rank { font-weight: 800; color: #2962ff; min-width: 28px; }
.tp-path { flex: 1; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; font-size: 12.5px; }
.tp-head strong { color: #222; }
.tp-bar { background: #eef1f6; height: 6px; border-radius: 3px; overflow: hidden; }
.tp-bar-fill { background: linear-gradient(90deg, #2962ff, #7b2cbf); height: 100%; border-radius: 3px; }

@media (max-width: 700px) {
  .stats-hero { grid-template-columns: 1fr; }
  .stats-counts { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ===== Modern Messenger (chat) ===== */
.messenger { display: grid; grid-template-columns: 340px 1fr; gap: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.08); height: calc(100vh - 180px); min-height: 540px; max-height: 800px; }
@media (max-width: 700px) { .messenger { grid-template-columns: 1fr; height: calc(100vh - 130px); } .messenger .msg-main { display: none; } .messenger.has-peer .msg-sidebar { display: none; } .messenger.has-peer .msg-main { display: flex; } }

.msg-sidebar { background: #fafbfd; border-right: 1px solid #eef1f6; display: flex; flex-direction: column; }
.msg-sidebar-head { padding: 18px 18px 12px; border-bottom: 1px solid #eef1f6; background: #fff; }
.msg-sidebar-head h2 { margin: 0 0 12px; font-size: 18px; }
.msg-search { display: flex; align-items: center; gap: 8px; background: #f4f6fa; border-radius: 24px; padding: 8px 14px; }
.msg-search:focus-within { background: #fff; box-shadow: 0 0 0 2px #2962ff; }
.msg-search input { border: 0; outline: none; background: transparent; flex: 1; font-size: 14px; font-family: inherit; min-width: 0; }
.msg-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.msg-empty { text-align: center; padding: 60px 20px; color: #888; }
.msg-empty p { margin: 12px 0 4px; }
.msg-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background .15s; border-left: 3px solid transparent; }
.msg-item:hover { background: rgba(41,98,255,.04); text-decoration: none; }
.msg-item.active { background: linear-gradient(90deg, rgba(41,98,255,.1), transparent); border-left-color: #2962ff; }
.msg-avi-wrap { position: relative; flex-shrink: 0; }
.msg-avi { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; overflow: hidden; object-fit: cover; }
.msg-unread { position: absolute; top: -3px; right: -3px; background: #f72585; color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 0 0 2px #fafbfd; }
.msg-item.active .msg-unread { box-shadow: 0 0 0 2px #fff; }
.msg-item-body { flex: 1; min-width: 0; overflow: hidden; }
.msg-item-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.msg-item-top strong { font-size: 14px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.msg-item-top small { color: #888; font-size: 11px; flex-shrink: 0; }
.msg-item-last { color: #888; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-tag { font-size: 11px; }

.msg-main { display: flex; flex-direction: column; background: linear-gradient(180deg, #f8faff 0%, #fff 100%); }
.msg-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #888; text-align: center; padding: 40px; }
.msg-empty-state h2 { color: #444; margin: 18px 0 6px; }

.msg-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid #eef1f6; box-shadow: 0 1px 4px rgba(0,0,0,.03); }
.msg-back { width: 36px; height: 36px; border-radius: 50%; background: #f0f3f8; display: none; align-items: center; justify-content: center; color: #333; text-decoration: none; flex-shrink: 0; }
@media (max-width: 700px) { .msg-back { display: inline-flex; } }
.msg-header strong { display: block; font-size: 15px; color: #222; }
.msg-header small { display: block; color: #888; font-size: 12px; }
.msg-header > div:not(.msg-header-tools) { flex: 1; min-width: 0; }
.msg-header-tools { display: flex; gap: 6px; }

.msg-stream { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.msg-divider { text-align: center; margin: 16px 0 8px; position: relative; }
.msg-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #eef1f6; }
.msg-divider span { background: #f8faff; padding: 4px 14px; border-radius: 10px; color: #888; font-size: 12px; position: relative; }
.msg-bubble-wrap { display: flex; flex-direction: column; max-width: 70%; }
.msg-bubble-wrap.in { align-self: flex-start; }
.msg-bubble-wrap.out { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 10px 16px; border-radius: 18px; word-wrap: break-word; font-size: 14.5px; line-height: 1.5; }
.msg-bubble-wrap.in .msg-bubble { background: #fff; color: #222; border: 1px solid #eef1f6; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.msg-bubble-wrap.out .msg-bubble { background: linear-gradient(135deg, #2962ff, #7b2cbf); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 14px rgba(41,98,255,.2); }
.msg-time { color: #aaa; font-size: 11px; margin-top: 3px; padding: 0 6px; }

.msg-compose { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: #fff; border-top: 1px solid #eef1f6; }
.msg-compose input { flex: 1; padding: 12px 18px; border: 1.5px solid #e0e5ee; border-radius: 30px; font-size: 14.5px; font-family: inherit; transition: all .15s; outline: none; }
.msg-compose input:focus { border-color: #2962ff; box-shadow: 0 0 0 3px rgba(41,98,255,.1); }
.msg-send { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #2962ff, #7b2cbf); color: #fff; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; box-shadow: 0 4px 14px rgba(41,98,255,.3); flex-shrink: 0; }
.msg-send:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(41,98,255,.4); }
.msg-send svg { margin-right: 2px; }

/* ===== Tutor View v2 ===== */
.tutor-view { max-width: 1100px; margin: 0 auto; }
.tv-hero { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.08); margin-bottom: 22px; position: relative; }
.tv-cover { height: 130px; position: relative; }
.tv-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.18), transparent 60%); }

.tv-hero-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px 24px; margin-top: -64px; position: relative; gap: 14px; }

.tv-avatar-wrap { position: relative; flex-shrink: 0; }
.tv-avatar { width: 128px; height: 128px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 52px; font-weight: 800; object-fit: cover; background-color: #ddd; }
.tv-verified { position: absolute; bottom: 4px; right: 4px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #06d6a0, #0bb88a); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(6,214,160,.3); }

.tv-info { width: 100%; }
.tv-info h1 { margin: 6px 0 4px; font-size: 28px; color: #222; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; line-height: 1.2; }
.tv-verified-badge { background: #e6f4ea; color: #1e7a3a; padding: 4px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; }
.tv-title { color: #666; font-size: 16px; margin: 0 0 14px; }

.tv-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 4px; }
.tv-meta-pill { background: #f0f3f8; color: #555; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; }

.tv-quick-stats { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 18px 24px; background: linear-gradient(180deg, #fafbfd, #fff); border-radius: 14px; width: 100%; max-width: 580px; border: 1px solid #eef1f6; }
.tv-stat { text-align: center; min-width: 0; }
.tv-stat strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.tv-stat small { color: #888; font-size: 12px; }
.tv-stat-divider { width: 1px; height: 36px; background: #e0e5ee; flex-shrink: 0; }

.tv-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.tv-actions .btn { padding: 12px 28px !important; font-size: 15px !important; }
.tv-btn-primary { background: linear-gradient(135deg, #2962ff, #7b2cbf) !important; box-shadow: 0 6px 18px rgba(41,98,255,.3); }
.tv-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(41,98,255,.4); }

@media (max-width: 600px) {
  .tv-cover { height: 100px; }
  .tv-hero-body { padding: 0 16px 20px; margin-top: -54px; gap: 12px; }
  .tv-avatar { width: 108px; height: 108px; font-size: 44px; border-width: 4px; }
  .tv-info h1 { font-size: 22px; }
  .tv-title { font-size: 14px; }
  .tv-quick-stats { gap: 14px; padding: 14px; }
  .tv-stat strong { font-size: 20px; }
  .tv-stat-divider { height: 28px; }
  .tv-actions { width: 100%; flex-direction: column; }
  .tv-actions .btn { width: 100%; text-align: center; }
}

.tv-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .tv-grid { grid-template-columns: 1fr; } }
.tv-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
@media (max-width: 900px) { .tv-side { position: static; } }
.tv-main { display: flex; flex-direction: column; gap: 16px; }
.tv-main .card, .tv-side .card { margin: 0; }

.tv-bio { line-height: 1.7; color: #444; }

.tv-subj-group { margin-bottom: 16px; }
.tv-subj-group:last-child { margin-bottom: 0; }
.tv-subj-group h4 { margin: 0 0 8px; color: #2962ff; font-size: 14px; font-weight: 600; }
.tv-chip { display: inline-flex; align-items: center; background: linear-gradient(135deg, #e8efff, #f0e7ff); color: #2962ff; padding: 6px 14px; border-radius: 18px; font-size: 13px; font-weight: 500; margin: 4px 4px 4px 0; }

.tv-rating-big strong { font-size: 22px; }
.tv-rating-big small { color: #888; font-size: 12px; margin-left: 4px; }

.tv-rating-dist { margin-bottom: 18px; padding: 14px; background: #fafbfd; border-radius: 10px; }
.rd-row { display: grid; grid-template-columns: 32px 1fr 32px; gap: 10px; align-items: center; margin-bottom: 4px; font-size: 12px; }
.rd-label { color: #f59f00; font-weight: 700; }
.rd-bar { background: #eef1f6; height: 8px; border-radius: 4px; overflow: hidden; }
.rd-bar-fill { background: linear-gradient(90deg, #ffd54f, #f59f00); height: 100%; border-radius: 4px; transition: width .3s; }
.rd-count { color: #888; text-align: right; }

.tv-reviews { list-style: none; padding: 0; margin: 0; }
.tv-review { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px dashed #eef1f6; }
.tv-review:last-child { border-bottom: 0; }
.tv-review .user-avi { width: 44px; height: 44px; font-size: 16px; flex-shrink: 0; }
.tv-review-body { flex: 1; min-width: 0; }
.tv-review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.tv-review-head strong { font-size: 14px; color: #222; }
.tv-review-head small { color: #888; font-size: 11.5px; margin-left: auto; }
.tv-stars .star { color: #ddd; font-size: 13px; }
.tv-stars .star.on { color: #f59f00; }
.tv-review p { margin: 4px 0 0; color: #444; line-height: 1.6; font-size: 14px; }

.tv-pricing { text-align: center; background: linear-gradient(180deg, #fff, #fafbfd); }
.tv-pricing small { color: #888; font-size: 13px; }
.tv-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 6px 0 0; }
.tv-price strong { font-size: 38px; color: #2962ff; font-weight: 800; line-height: 1; }
.tv-price span { color: #888; font-size: 14px; }
.tv-trust { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef1f6; text-align: left; }
.tv-trust div { padding: 5px 0; font-size: 13px; color: #555; display: flex; align-items: center; gap: 8px; }
.tv-trust span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e6f4ea; color: #1e7a3a; font-size: 12px; font-weight: 700; }

.tv-info-list { list-style: none; padding: 0; margin: 0; }
.tv-info-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #eef1f6; font-size: 13.5px; gap: 12px; align-items: center; }
.tv-info-list li:last-child { border-bottom: 0; }
.tv-info-list span { color: #888; }
.tv-info-list strong { color: #222; text-align: right; }

.tv-share { text-align: center; }

/* ===== Slides manager ===== */
.slide-sortable { list-style: none; padding: 0; margin: 0; }
.slide-item { display: grid; grid-template-columns: auto 120px 1fr auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #eef1f6; background: #fff; cursor: move; transition: background .15s; }
.slide-item:last-child { border-bottom: 0; }
.slide-item:hover { background: #fafbfd; }
.slide-item.dragging { opacity: .5; background: #e8efff; }
.drag-handle { color: #ccc; font-size: 16px; cursor: grab; padding: 4px; }
.drag-handle:active { cursor: grabbing; }
.slide-preview { width: 120px; height: 60px; border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; color: #fff; font-size: 11px; font-weight: 700; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.slide-preview strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.slide-info { min-width: 0; overflow: hidden; }
.slide-info strong { display: block; font-size: 14px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide-info small { display: block; color: #888; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.slide-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* ===== Subject manager ===== */
.cat-form-collapse { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.cat-form-collapse.show { max-height: 500px; }
.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-list li { border-bottom: 1px solid #eef1f6; }
.cat-list li:last-child { border-bottom: 0; }
.cat-list a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; text-decoration: none; color: inherit; transition: background .15s; border-left: 3px solid transparent; }
.cat-list a:hover { background: #fafbfd; text-decoration: none; }
.cat-list li.on a { background: linear-gradient(90deg, rgba(41,98,255,.1), transparent); border-left-color: #2962ff; }
.cat-icon { width: 38px; height: 38px; border-radius: 10px; background: #f0f3f8; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.cat-list strong { display: block; font-size: 14px; color: #222; }
.cat-list small { color: #888; font-size: 12px; }
.cat-list li a > div { flex: 1; min-width: 0; }

/* User edit page */
.user-edit-head { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid #eef1f6; }
.form-subhead { color: #2962ff; font-size: 14px; margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #eef1f6; text-transform: uppercase; letter-spacing: .04em; }

/* ===== Floating LINE button ===== */
.line-float { position: fixed; bottom: 20px; right: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #06c755, #04a648); color: #fff !important; padding: 12px 20px 12px 16px; border-radius: 40px; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 8px 24px rgba(6,199,85,.4), 0 4px 8px rgba(0,0,0,.1); transition: transform .2s, box-shadow .2s; animation: lineFloatBounce 2.5s ease-in-out infinite; }
.line-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 36px rgba(6,199,85,.55), 0 4px 8px rgba(0,0,0,.12); text-decoration: none; color: #fff !important; animation-play-state: paused; }
.line-float svg { flex-shrink: 0; }
.line-float-label { white-space: nowrap; }
@keyframes lineFloatBounce {
  0%, 100% { transform: translateY(0); }
  5% { transform: translateY(-6px); }
  10% { transform: translateY(0); }
  15% { transform: translateY(-3px); }
  20%, 100% { transform: translateY(0); }
}
@media (max-width: 600px) {
  .line-float { padding: 10px; bottom: 14px; right: 14px; }
  .line-float-label { display: none; }
}

/* ===== Modern Footer v2 ===== */
.footer-v2 { background: linear-gradient(180deg, #0d1b2a 0%, #1a2a3e 100%); color: #c5d0e0; padding: 50px 0 0; margin-top: 60px; position: relative; }
.footer-v2::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2962ff, #7b2cbf, #f72585, #06d6a0); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 36px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-logo { font-size: 28px; font-weight: 800; background: linear-gradient(135deg, #2962ff, #7b2cbf, #f72585); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; margin-bottom: 10px; }
.footer-tag { color: #8da3c3; font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border-radius: 50%; color: #c5d0e0; transition: all .2s; }
.footer-social a svg { width: 18px; height: 18px; }
.footer-social a:hover { background: linear-gradient(135deg, #2962ff, #7b2cbf); color: #fff; transform: translateY(-3px); text-decoration: none; }

.footer-col h4 { color: #fff; font-size: 15px; margin: 0 0 14px; font-weight: 700; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #8da3c3; font-size: 14px; transition: color .15s; }
.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #8da3c3; flex-wrap: wrap; gap: 12px; }
.footer-bottom strong { color: #fff; }
.footer-payment span { color: #8da3c3; }

/* ===== Post detail v2 ===== */
.post-detail-head { background: linear-gradient(135deg,#06d6a0,#0096c7,#2962ff); padding: 32px 30px; border-radius: 16px; color: #fff; margin-bottom: 22px; position: relative; overflow: hidden; }
.post-detail-head::before { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: rgba(255,255,255,.08); border-radius: 50%; }
.post-detail-head h1 { color: #fff; margin: 12px 0 18px; font-size: 30px; line-height: 1.3; position: relative; }
.pdh-status { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.pdh-status .badge { background: rgba(255,255,255,.2); color: #fff; }
.pdh-time { opacity: .9; }
.pdh-author { display: flex; align-items: center; gap: 14px; position: relative; }
.pdh-author .pcv2-avatar { width: 48px; height: 48px; border: 2px solid rgba(255,255,255,.4); }
.pdh-name { font-size: 15px; }
.pdh-name strong { color: #fff; }
.pdh-date { font-size: 13px; opacity: .85; }

.post-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
@media (max-width: 800px) { .post-detail-grid { grid-template-columns: 1fr; } }
.pd-desc { line-height: 1.75; color: #333; font-size: 15px; }

.pd-action h3 { margin-top: 0; }
.pd-action-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.pd-info h3 { margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid #eef1f6; }
.pd-info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #eef1f6; font-size: 14px; }
.pd-info-row span { color: #888; }
.pd-info-row strong { color: #333; text-align: right; }
.pd-budget { margin-top: 16px; padding-top: 16px; border-top: 2px solid #f0f3f8; text-align: center; }
.pd-budget small { color: #888; font-size: 12px; }
.pd-budget div { margin-top: 4px; }
.pd-budget strong { font-size: 32px; color: #06d6a0; font-weight: 800; }
.pd-budget span { color: #888; font-size: 13px; }

/* ===== Job card (post detail) — table style ===== */
.job-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.06); overflow: hidden; max-width: 880px; margin: 0 auto; }
.job-card-head { background: #2962ff; color: #fff; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.job-card-head strong { font-weight: 700; }
.job-card-head .job-date { font-size: 14px; opacity: .92; }

.job-table { width: 100%; border-collapse: collapse; }
.job-table th, .job-table td { padding: 14px 24px; text-align: left; vertical-align: top; font-size: 15px; border-bottom: 1px solid #eef1f6; background: #fff; }
.job-table th { color: #222; font-weight: 600; width: 38%; }
.job-table td { color: #2962ff; font-weight: 500; }
.job-table tr:last-child th, .job-table tr:last-child td { border-bottom: 0; }
.job-table tr:hover th, .job-table tr:hover td { background: #f7f9fc; }
.job-table tr.contact-row th, .job-table tr.contact-row td { background: #e8f5e9; }
.job-table tr.contact-row td a { color: #1e7a3a; text-decoration: none; }

.job-desc { padding: 20px 24px; border-top: 1px solid #eef1f6; background: #f7f9fc; }
.job-desc h3 { margin-top: 0; font-size: 16px; color: #444; }
.job-desc p { color: #555; line-height: 1.7; margin: 0; }

.job-cta { padding: 24px; border-top: 1px solid #eef1f6; text-align: center; background: #fff; }
.btn-contact { display: inline-block; background: linear-gradient(135deg,#06d6a0,#0bb88a); color: #fff !important; padding: 14px 36px; border-radius: 6px; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px rgba(6,214,160,.35); transition: all .2s; text-decoration: none; }
.btn-contact:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6,214,160,.45); text-decoration: none; }
.unlocked-msg { background: #e8f5e9; color: #1e7a3a; padding: 10px 16px; border-radius: 6px; margin-bottom: 12px; font-weight: 600; display: inline-block; }

@media (max-width: 600px) {
  .job-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .job-table th, .job-table td { padding: 10px 14px; font-size: 14px; }
  .job-table th { width: 45%; }
}
.hero-slider { position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 28px; height: 320px; background: #2962ff; }
.hero-slider .slides { position: relative; width: 100%; height: 100%; }
.hero-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 30px; background-size: cover; background-position: center; }
.hero-slider .slide:nth-child(1) { background: linear-gradient(135deg,#2962ff,#5c8eff); }
.hero-slider .slide:nth-child(2) { background: linear-gradient(135deg,#7b2cbf,#c77dff); }
.hero-slider .slide:nth-child(3) { background: linear-gradient(135deg,#f72585,#ff9e7d); }
.hero-slider .slide:nth-child(4) { background: linear-gradient(135deg,#06d6a0,#5bc0be); }
.hero-slider .slide.active { opacity: 1; }
.hero-slider .slide h1 { font-size: 34px; margin: 0 0 12px; color: #fff; }
.hero-slider .slide p { font-size: 17px; margin-bottom: 22px; opacity: .95; max-width: 600px; }
.hero-slider .slide .btn { background: #fff; color: #2962ff !important; font-weight: 700; padding: 12px 28px; }
.hero-slider .slide-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.3); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.hero-slider .slide-nav.prev { left: 14px; }
.hero-slider .slide-nav.next { right: 14px; }
.hero-slider .slide-dots { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; }
.hero-slider .dot { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 4px; background: rgba(255,255,255,.5); cursor: pointer; }
.hero-slider .dot.active { background: #fff; width: 22px; border-radius: 6px; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { color: #2962ff; }

/* ===== Tutor signup landing ===== */
.tutor-hero { background: linear-gradient(135deg, #2962ff 0%, #7b2cbf 100%); color: #fff; padding: 70px 30px; border-radius: 14px; text-align: center; margin-bottom: 28px; position: relative; overflow: hidden; }
.tutor-hero::after { content: ''; position: absolute; right: -50px; top: -50px; width: 300px; height: 300px; background: rgba(255,255,255,.08); border-radius: 50%; }
.tutor-hero::before { content: ''; position: absolute; left: -80px; bottom: -80px; width: 240px; height: 240px; background: rgba(255,255,255,.06); border-radius: 50%; }
.tutor-hero-inner { position: relative; z-index: 1; }
.tutor-hero h1 { font-size: 42px; margin: 0 0 14px; color: #fff; line-height: 1.2; }
.tutor-hero p { font-size: 18px; opacity: .95; margin-bottom: 24px; max-width: 600px; margin-left: auto; margin-right: auto; }
.tutor-hero .btn { background: #fff; color: #2962ff !important; font-weight: 700; padding: 14px 32px; font-size: 16px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 20px; }
.step { text-align: center; padding: 18px; }
.step .num { width: 50px; height: 50px; line-height: 50px; border-radius: 50%; background: #2962ff; color: #fff; font-size: 22px; font-weight: 800; margin: 0 auto 12px; }
.step h3 { margin: 8px 0; font-size: 17px; }
.step p { color: #666; font-size: 14px; }

.form-section { background: #f7f9fc; padding: 10px 14px; border-left: 4px solid #2962ff; margin: 28px 0 14px; font-size: 17px; }
.hint { color: #888; font-size: 13px; margin-top: -8px; margin-bottom: 10px; }

.subject-picker { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.subject-cat { background: #f7f9fc; border-radius: 8px; padding: 12px 16px; }
.subject-cat summary { font-weight: 600; cursor: pointer; font-size: 15px; }
.subject-cat .count { color: #999; font-weight: 400; }
.subject-chips, .chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #fff; border: 1.5px solid #cfd5e0; border-radius: 20px; cursor: pointer; font-size: 14px; user-select: none; transition: all .15s; }
.chip:hover { border-color: #2962ff; }
.chip input { display: none; }
.chip:has(input:checked) { background: #2962ff; color: #fff; border-color: #2962ff; }
.chip span { white-space: nowrap; }

.check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.btn-large { display: block; width: 100%; padding: 16px; font-size: 17px; font-weight: 700; }

/* ===== Tutor signup form sections (cyan band style) ===== */
.tutor-form { max-width: 880px; margin: 0 auto; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.form-band { background: linear-gradient(135deg,#4dd0e1,#26c6da); color: #fff; padding: 16px 24px; font-size: 20px; font-weight: 700; text-align: center; }
.form-section-body { padding: 22px 26px; }
.form-section-body + .form-band { margin-top: 10px; }
.form-subhead { color: #9ccc4a; font-size: 16px; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #f0f3f8; }
.req { color: #d32f2f; }
.dob-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }
.dob-row select { padding: 9px; }
.teach-row { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
@media (max-width: 600px) { .teach-row { grid-template-columns: 1fr; } }
.teach-row input[disabled] { background: #f4f6fa; color: #aaa; }
.radio-stack .radio-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.terms-box { background: #fafbfd; }
.terms-box a { color: #26c6da; font-weight: 600; }
.btn-confirm { background: linear-gradient(135deg,#9ccc4a,#7cb342); color: #fff !important; padding: 14px 60px; border-radius: 6px; border: 0; cursor: pointer; font-size: 18px; font-weight: 700; box-shadow: 0 6px 18px rgba(124,179,66,.4); font-family: inherit; }
.btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,179,66,.5); }

/* ===== Tutor wizard (multi-step) ===== */
.wiz-shell { display: grid; grid-template-columns: 280px 1fr; gap: 0; max-width: 1100px; margin: 0 auto; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
@media (max-width: 900px) { .wiz-shell { grid-template-columns: 1fr; } .wiz-side { padding: 24px !important; } }

.wiz-side { background: linear-gradient(180deg, #2962ff 0%, #7b2cbf 100%); color: #fff; padding: 36px 26px; position: relative; overflow: hidden; }
.wiz-side::before { content:''; position:absolute; right:-40px; top:-40px; width:180px; height:180px; background: rgba(255,255,255,.08); border-radius: 50%; }
.wiz-title { position: relative; margin-bottom: 28px; text-align: center; }
.wiz-emoji { font-size: 44px; display: block; margin-bottom: 6px; }
.wiz-title h1 { color: #fff; font-size: 26px; margin: 0 0 6px; }
.wiz-title p { color: rgba(255,255,255,.88); font-size: 13px; margin: 0; }

.wiz-steps { list-style: none; padding: 0; margin: 0; position: relative; }
.wiz-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; margin-bottom: 4px; cursor: not-allowed; transition: all .2s; color: rgba(255,255,255,.7); font-size: 14px; position: relative; }
.wiz-steps li.done { color: #fff; cursor: pointer; }
.wiz-steps li.done:hover { background: rgba(255,255,255,.08); }
.wiz-steps li.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.wiz-steps li .num { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.wiz-steps li.done .num { background: #06d6a0; }
.wiz-steps li.done .num::before { content: '✓'; }
.wiz-steps li.done .num span, .wiz-steps li.done .num { font-size: 0; }
.wiz-steps li.done .num::before { font-size: 14px; color: #fff; }
.wiz-steps li.active .num { background: #fff; color: #2962ff; }

.wiz-help { margin-top: 30px; padding: 16px; background: rgba(255,255,255,.1); border-radius: 12px; position: relative; }
.wiz-help strong { display: block; margin-bottom: 4px; }
.wiz-help p { margin: 0; font-size: 13px; opacity: .9; }

.wiz-main { display: flex; flex-direction: column; position: relative; min-height: 600px; }
.wiz-progress { padding: 18px 28px 10px; background: #fff; border-bottom: 1px solid #f0f3f8; position: relative; }
.wiz-progress::after { content: ''; display: block; height: 6px; background: #eef1f6; border-radius: 3px; margin-top: 8px; }
.wiz-progress-bar { position: absolute; left: 28px; right: 28px; bottom: 10px; height: 6px; background: linear-gradient(90deg,#2962ff,#7b2cbf); border-radius: 3px; transition: width .35s ease; max-width: calc(100% - 56px); }
.wiz-progress-text { font-size: 13px; color: #888; }

.wiz-form { display: flex; flex-direction: column; flex: 1; }
.wiz-step { display: none; padding: 28px 32px; flex: 1; animation: fadeSlide .35s ease; }
.wiz-step.active { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wiz-head { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid #f0f3f8; }
.wiz-head h2 { margin: 0 0 4px; font-size: 22px; color: #222; }
.wiz-head p { color: #888; font-size: 14px; margin: 0; }

/* Modern inputs */
.wiz-form .form-row label { font-size: 13px; color: #555; font-weight: 600; margin-bottom: 6px; }
.wiz-form input, .wiz-form select, .wiz-form textarea { padding: 11px 14px; border: 1.5px solid #e0e5ee; border-radius: 8px; transition: border-color .15s, box-shadow .15s; font-size: 15px; }
.wiz-form input:focus, .wiz-form select:focus, .wiz-form textarea:focus { outline: none; border-color: #2962ff; box-shadow: 0 0 0 3px rgba(41,98,255,.12); }
.wiz-form .grid-3 { grid-template-columns: 1fr 1.5fr 1.5fr; }
@media (max-width: 600px) { .wiz-form .grid-3 { grid-template-columns: 1fr; } }

/* Drop zone for ID card */
.drop-zone-wrap { margin-top: 14px; }
.drop-zone { display: block; border: 2px dashed #c5d0e0; border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all .2s; background: #fafbfd; }
.drop-zone:hover { border-color: #2962ff; background: #f0f5ff; }
.dz-icon { font-size: 40px; margin-bottom: 8px; }
.dz-text { font-weight: 600; color: #444; margin-bottom: 4px; }
.dz-hint { font-size: 12px; color: #999; }
.dz-filename { margin-top: 10px; color: #06d6a0; font-weight: 600; font-size: 14px; }

/* Teach grid (5 cards) */
.teach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.teach-card { background: #fafbfd; border: 1.5px solid #e0e5ee; border-radius: 10px; padding: 14px; transition: all .15s; }
.teach-card:has(.teach-check:checked) { border-color: #2962ff; background: #f0f5ff; }
.teach-card-head { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.teach-card-head input { accent-color: #2962ff; }
.teach-card input[disabled] { background: transparent; border-color: transparent; padding: 6px 0; color: #aaa; font-style: italic; }
.teach-card input:not([disabled]) { background: #fff; border: 1px solid #cfd5e0; padding: 8px 10px; }

/* Experience toggle */
.exp-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp-opt { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 2px solid #e0e5ee; border-radius: 10px; cursor: pointer; transition: all .15s; background: #fafbfd; }
.exp-opt:has(input:checked) { border-color: #2962ff; background: #f0f5ff; box-shadow: 0 4px 12px rgba(41,98,255,.1); }
.exp-opt input { accent-color: #2962ff; }

/* Review step */
.review-grid { background: #fafbfd; border-radius: 12px; padding: 8px 4px; margin-bottom: 20px; }
.rv-row { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 16px; border-bottom: 1px dashed #e0e5ee; font-size: 14px; }
.rv-row:last-child { border-bottom: 0; }
.rv-k { color: #888; }
.rv-v { color: #222; font-weight: 500; word-break: break-word; }
@media (max-width: 600px) { .rv-row { grid-template-columns: 1fr; gap: 4px; } }

.terms-card { background: linear-gradient(135deg,#fff5d6 0%,#fff8e1 100%); border: 1px solid #ffe082; border-radius: 12px; padding: 16px 20px; }
.terms-card .check-row { font-size: 14px; line-height: 1.7; }
.terms-card a { color: #2962ff; font-weight: 600; }

/* Sticky bottom nav */
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 28px; background: #fff; border-top: 1px solid #eef1f6; position: sticky; bottom: 0; z-index: 10; box-shadow: 0 -4px 12px rgba(0,0,0,.04); }
.wiz-dots { display: flex; gap: 8px; flex: 1; justify-content: center; }
.wiz-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: #d0d8e6; transition: all .2s; cursor: not-allowed; }
.wiz-dots .dot.on { width: 28px; border-radius: 6px; background: linear-gradient(90deg,#2962ff,#7b2cbf); }
.wiz-dots .dot.done { background: #06d6a0; cursor: pointer; }
.wiz-nav .btn { padding: 10px 22px; }
@media (max-width: 600px) { .wiz-dots { display: none; } }

/* ===== Student wizard (pink theme) ===== */
.student-wiz .wiz-side.student-side { background: linear-gradient(180deg, #ff6f91 0%, #f72585 100%); }
.student-wiz .wiz-progress-bar { background: linear-gradient(90deg,#ff6f91,#f72585); }
.student-wiz .wiz-step .wiz-head h2 { color: #c2185b; }
.student-wiz .form-subhead.pink { color: #f72585; border-bottom-color: #ffe0ec; }
.student-wiz .wiz-form input:focus, .student-wiz .wiz-form select:focus, .student-wiz .wiz-form textarea:focus { border-color: #f72585; box-shadow: 0 0 0 3px rgba(247,37,133,.12); }
.student-wiz .drop-zone.pink:hover { border-color: #f72585; background: #fff0f6; }
.student-wiz .chip.pink:has(input:checked) { background: #f72585; border-color: #f72585; }
.student-wiz .exp-opt.pink:has(input:checked) { border-color: #f72585; background: #fff0f6; box-shadow: 0 4px 12px rgba(247,37,133,.12); }
.student-wiz .exp-opt.pink input { accent-color: #f72585; }
.student-wiz .wiz-form input, .student-wiz .wiz-form select, .student-wiz .wiz-form textarea { font-family: inherit; }
.student-wiz .wiz-steps li.done .num { background: #ff8fab; }
.student-wiz .wiz-steps li.active .num { background: #fff; color: #f72585; }
.student-wiz .wiz-dots .dot.on { background: linear-gradient(90deg,#ff6f91,#f72585); }
.student-wiz .wiz-dots .dot.done { background: #ff8fab; }
.student-wiz .btn.pink-btn { background: linear-gradient(135deg,#ff6f91,#f72585); }
.student-wiz .btn.pink-btn:hover { background: linear-gradient(135deg,#ff5781,#e01874); }
.btn-pink-confirm { background: linear-gradient(135deg,#ff6f91,#f72585); color: #fff !important; padding: 14px 48px; border-radius: 6px; border: 0; cursor: pointer; font-size: 18px; font-weight: 700; box-shadow: 0 6px 18px rgba(247,37,133,.4); font-family: inherit; }
.btn-pink-confirm:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(247,37,133,.5); }
.review-grid.pink-rv .rv-row { border-bottom-color: #ffe0ec; }
.terms-card.pink-terms { background: linear-gradient(135deg,#fff0f6 0%,#ffe4ec 100%); border: 1px solid #ffc1d6; }
.terms-card.pink-terms a { color: #f72585; }

/* Place selection (radio cards) */
.place-stack { display: grid; gap: 10px; }
.place-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid #e0e5ee; border-radius: 12px; cursor: pointer; transition: all .15s; background: #fafbfd; }
.place-card:has(input:checked) { border-color: #f72585; background: #fff0f6; box-shadow: 0 4px 12px rgba(247,37,133,.1); }
.place-card input { accent-color: #f72585; flex-shrink: 0; }
.place-card div { display: flex; flex-direction: column; }
.place-card strong { font-size: 15px; color: #333; }
.place-card small { color: #888; font-size: 12px; margin-top: 2px; }

/* exp-toggle three columns */
.exp-toggle.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .exp-toggle.three { grid-template-columns: 1fr; } }

/* =================================================
   MOBILE POLISH — comprehensive fixes ≤ 880 / 600 / 380
   ================================================= */

/* Prevent horizontal scroll on whole page */
html, body { overflow-x: hidden; }
.container { max-width: 1300px; margin: 0 auto; padding: 15px 14px; box-sizing: border-box; }

@media (max-width: 880px) {
  /* Tighter container — keep vertical breathing room */
  .container { padding: 16px 16px; }
  .nav-inner { padding: 10px 12px; gap: 8px; }
  .nav-brand-text { font-size: 19px; }
  .nav-logo svg { width: 28px; height: 28px; }

  /* Headings smaller */
  h1 { font-size: 22px; }
  h2 { font-size: 19px; }
  main { padding: 16px 0 40px; }

  /* Heros */
  .hero { padding: 36px 18px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 14px; }
  .hero .btn { padding: 10px 22px; font-size: 14px; }

  .hero-slider { height: 240px; }
  .hero-slider .slide { padding: 24px 18px; }
  .hero-slider .slide h1 { font-size: 22px; }
  .hero-slider .slide p { font-size: 14px; margin-bottom: 14px; }
  .hero-slider .slide-nav { width: 32px; height: 32px; font-size: 18px; }
  .hero-slider .slide-nav.prev { left: 6px; }
  .hero-slider .slide-nav.next { right: 6px; }

  .search-hero { padding: 32px 16px; }
  .search-hero h1 { font-size: 24px; }
  .search-hero p { font-size: 13px; margin-bottom: 16px; }
  .search-big { padding: 5px; border-radius: 30px; gap: 4px; }
  .search-big input { font-size: 14px; padding: 9px 6px; min-width: 0; }
  .search-big .btn { padding: 8px 14px; font-size: 13px; flex-shrink: 0; }
  .search-big .search-icon { padding-left: 10px; font-size: 14px; }

  .tutor-hero { padding: 40px 18px; }
  .tutor-hero h1 { font-size: 26px; line-height: 1.25; }
  .tutor-hero p { font-size: 14px; }
  .tutor-hero .btn { padding: 11px 22px; font-size: 14px; }

  .role-hero { padding: 32px 18px; }
  .role-hero h1 { font-size: 26px; }
  .role-hero p { font-size: 14px; }
  .role-grid { gap: 16px; }
  .role-card { padding: 26px 22px 22px; border-radius: 14px; }
  .role-card h2 { font-size: 22px; }
  .role-icon { font-size: 44px; }

  /* Cards & grids tighter */
  .card { padding: 16px; border-radius: 10px; }
  .grid-3, .grid-2 { gap: 12px; }

  /* Tutor cards */
  .tutor-grid { gap: 12px; }
  .tutor-card-v2 { border-radius: 12px; }
  .tcv2-cover { height: 56px; }
  .tcv2-avatar { width: 72px; height: 72px; margin-top: -36px; }
  .tcv2-body h3 { font-size: 16px; }

  /* Post cards */
  .posts-grid { gap: 12px; grid-template-columns: 1fr; }
  .post-card-v2 { padding: 14px; }
  .pcv2-budget strong { font-size: 19px; }
  .pcv2-body h3 { font-size: 15.5px; }

  /* Tables → horizontal scroll wrapper */
  table { font-size: 13px; }
  table th, table td { padding: 8px 10px; }
  /* Make admin tables scrollable */
  .container > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Job table (post detail) → stack rows */
  .job-card-head { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; font-size: 14px; }
  .job-table th, .job-table td { padding: 10px 14px; font-size: 13.5px; line-height: 1.5; }
  .job-table th { width: 48%; }
  .job-desc { padding: 16px; }
  .job-cta { padding: 18px; }
  .btn-contact { width: 100%; padding: 12px; font-size: 14.5px; }

  /* Post detail head v1 (gradient) */
  .post-detail-head { padding: 22px 18px; border-radius: 12px; }
  .post-detail-head h1 { font-size: 22px; }
  .post-detail-grid { gap: 14px; }

  /* Tutor profile cards */
  .tutor-card { padding: 14px; gap: 10px; }
  .tutor-card .avatar { width: 56px; height: 56px; }

  /* Forms — make inputs more thumb-friendly */
  .form-row label { font-size: 13.5px; }
  .form-row input, .form-row select, .form-row textarea { padding: 11px 12px; font-size: 16px; /* prevent iOS zoom */ }
  .grid.grid-3 { grid-template-columns: 1fr; }

  /* Wizard — convert sidebar to compact top bar */
  .wiz-shell { grid-template-columns: 1fr; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.06); margin: 0 -2px; }
  .wiz-side { padding: 18px !important; }
  .wiz-title { text-align: left; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
  .wiz-emoji { font-size: 32px; margin: 0; }
  .wiz-title h1 { font-size: 20px; margin: 0; }
  .wiz-title p { font-size: 12px; }
  .wiz-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px; }
  .wiz-steps li { padding: 8px 10px; font-size: 12px; gap: 8px; margin-bottom: 0; }
  .wiz-steps li .num { width: 22px; height: 22px; font-size: 11px; }
  .wiz-steps li.done .num::before { font-size: 12px; }
  .wiz-help { margin-top: 14px; padding: 12px; font-size: 12px; }
  .wiz-help p { font-size: 12px; }
  .wiz-progress { padding: 12px 16px 8px; }
  .wiz-progress-bar { left: 16px; right: 16px; max-width: calc(100% - 32px); }
  .wiz-step { padding: 18px 16px; }
  .wiz-head h2 { font-size: 19px; }
  .wiz-head p { font-size: 13px; }
  .wiz-nav { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
  .wiz-nav .btn { padding: 10px 14px; font-size: 13.5px; flex: 1; min-width: 0; }

  /* Filter sidebar (search/posts) */
  .search-layout { gap: 14px; }

  /* Cookie banner */
  #dt-cookie { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 14px !important; font-size: 13px !important; }
  #dt-cookie button { padding: 8px 14px !important; font-size: 13px !important; }

  /* Filter bar grids */
  .filter-bar { grid-template-columns: 1fr; gap: 10px; padding: 12px; }

  /* Chat */
  .chat-list { grid-template-columns: 1fr; height: auto; }
  .chat-sidebar { max-height: 200px; }

  /* Flash messages */
  .flash { padding: 10px 14px; font-size: 14px; }

  /* Footer compact */
  .footer-v2 { padding: 36px 0 0; margin-top: 36px; }
  .footer-logo { font-size: 22px; }
  .footer-col h4 { font-size: 14px; margin-bottom: 10px; }
  .footer-col a { font-size: 13px; }
  .footer-col li { margin-bottom: 7px; }
  .footer-bottom { padding: 16px 0; font-size: 12px; flex-direction: column; gap: 8px; text-align: center; }
  .footer-social a { width: 34px; height: 34px; }
  .footer-social a svg { width: 16px; height: 16px; }

  /* Modal-like cards better margins */
  .card[style*="max-width"] { margin: 0 !important; }

  /* Tutor cards (homepage compact) */
  .tutor-card .avatar { width: 50px; height: 50px; }

  /* Reviews list */
  .review-grid .rv-row, .rv-row { padding: 10px 12px; font-size: 13px; }

  /* Subject picker */
  .subject-cat summary { font-size: 13.5px; }
  .chip { font-size: 12.5px; padding: 5px 11px; }

  /* Teach grid mobile */
  .teach-grid { grid-template-columns: 1fr; gap: 10px; }
  .teach-row { grid-template-columns: 1fr; gap: 6px; }

  /* DOB row */
  .dob-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .dob-row select { padding: 9px 6px; font-size: 14px; }

  /* Auth single-column cards — keep margin for breathing room */
  .card[style*="max-width:480px"], .card[style*="max-width:420px"], .card[style*="max-width:520px"], .card[style*="max-width:680px"], .card[style*="max-width:820px"], .card[style*="max-width:880px"] { max-width: 100% !important; margin: 20px auto !important; }

  /* Steps section (tutor-hero benefits) */
  .steps { gap: 12px; }
  .step { padding: 12px; }

  /* Learn categories (homepage) */
  .learn-categories { grid-template-columns: 1fr 1fr; gap: 16px; }
  .learn-col h3 { font-size: 15px; }
  .learn-col li a { font-size: 13px; }

  /* Job CTA full width buttons */
  .pd-action-btns { flex-direction: column; }
  .pd-action-btns .btn { width: 100%; text-align: center; }

  /* Active filter pills smaller */
  .pill { font-size: 12px; padding: 5px 10px; }

  /* Stats dashboard cards */
  .grid.grid-3 .card div[style*="font-size:32px"], .grid.grid-3 .card div[style*="font-size:30px"], .grid.grid-3 .card div[style*="font-size:36px"] { font-size: 26px !important; }
}

@media (max-width: 600px) {
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  .container { padding: 14px 14px; }
  .nav-inner { padding: 8px 10px; gap: 6px; }
  .nav-brand-text { font-size: 18px; }

  .hero-slider { height: 220px; border-radius: 12px; }
  .hero-slider .slide h1 { font-size: 19px; line-height: 1.3; }

  .search-hero { padding: 26px 14px; border-radius: 12px; }
  .search-hero h1 { font-size: 22px; }
  .search-big { flex-direction: row; }
  .search-big input { font-size: 13.5px; }

  .tutor-hero { padding: 32px 16px; border-radius: 12px; }
  .tutor-hero h1 { font-size: 22px; }

  /* Single column for learn cats on small */
  .learn-categories { grid-template-columns: 1fr; }

  /* Card content padding */
  .card { padding: 14px; }

  /* Footer single col */
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { font-size: 11.5px; }

  /* Tables: convert to definition-list style on tiny */
  table.responsive-stack tr { display: block; margin-bottom: 8px; border: 1px solid #eef1f6; border-radius: 8px; padding: 8px; }
  table.responsive-stack th, table.responsive-stack td { display: block; padding: 4px 0; border: 0; }

  /* Sticky wiz-nav becomes bigger */
  .wiz-nav { padding: 10px; }
  .wiz-nav .btn { font-size: 13px; padding: 9px 10px; }
}

@media (max-width: 400px) {
  .nav-brand-text { font-size: 16px; }
  .nav-logo svg { width: 24px; height: 24px; }
  h1 { font-size: 19px; }
  .hero h1, .search-hero h1, .tutor-hero h1, .role-hero h1 { font-size: 20px; }
  .form-row input, .form-row select, .form-row textarea { padding: 10px; }
  .btn, .btn-primary, button.btn { padding: 8px 14px; font-size: 13.5px; }
  .wiz-steps li span:last-child { font-size: 11px; }
  .step .num { width: 40px; height: 40px; line-height: 40px; font-size: 18px; }
  .step h3 { font-size: 15px; }
}

/* ===== Learn categories (homepage) ===== */
.learn-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-top: 18px; }
.learn-col h3 { font-size: 17px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #eef1f6; }
.learn-col h3 a { color: #222; }
.learn-col ul { list-style: none; padding: 0; margin: 0; }
.learn-col li { margin: 6px 0; }
.learn-col li a { color: #2962ff; font-size: 14px; }
.learn-col li a:hover { text-decoration: underline; }
.breadcrumb { font-size: 14px; color: #888; margin-bottom: 14px; }
.breadcrumb a { color: #2962ff; }

/* ===== Modern Search Page ===== */
.search-hero { background: linear-gradient(135deg, #2962ff 0%, #5c8eff 50%, #7b2cbf 100%); border-radius: 16px; padding: 50px 30px; text-align: center; color: #fff; margin-bottom: 24px; position: relative; overflow: hidden; }
.search-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.15), transparent 40%); }
.search-hero-inner { position: relative; max-width: 720px; margin: 0 auto; }
.search-hero h1 { color: #fff; font-size: 36px; margin: 0 0 8px; }
.search-hero p { opacity: .92; font-size: 16px; margin-bottom: 26px; }
.search-big { display: flex; gap: 8px; background: #fff; padding: 8px; border-radius: 50px; box-shadow: 0 8px 30px rgba(0,0,0,.18); align-items: center; }
.search-big .search-icon { display: flex; align-items: center; padding-left: 14px; color: #999; font-size: 18px; flex-shrink: 0; }
.search-big input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; padding: 12px 8px; font-size: 16px; font-family: inherit; background: transparent; color: #222; width: 100%; }
.search-big .btn { border-radius: 40px; padding: 12px 28px; flex-shrink: 0; white-space: nowrap; }

.search-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
@media (max-width: 880px) {
  .search-layout { grid-template-columns: 1fr; }
  .search-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 320px; max-width: 90%; background: #fff; z-index: 1000; transform: translateX(-100%); transition: transform .3s; overflow-y: auto; padding: 20px; box-shadow: 2px 0 20px rgba(0,0,0,.15); }
  body.filter-open .search-sidebar { transform: translateX(0); }
  body.filter-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; }
}

.search-sidebar { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eef1f6; }
.filter-head h2 { margin: 0; font-size: 18px; }
.clear-all { font-size: 13px; color: #2962ff; }
.filter-group { border-bottom: 1px solid #f0f3f8; padding: 12px 0; }
.filter-group summary { font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.filter-group summary::after { content: '⌄'; transition: transform .2s; font-size: 18px; color: #aaa; }
.filter-group[open] summary::after { transform: rotate(180deg); }
.filter-body { margin-top: 10px; }
.filter-body .radio-row, .filter-body .check-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 14px; }
.filter-body .radio-row:hover, .filter-body .check-row:hover { color: #2962ff; }
.filter-body .radio-row input, .filter-body .check-row input { accent-color: #2962ff; }
.filter-select { width: 100%; padding: 8px 10px; border: 1px solid #cfd5e0; border-radius: 6px; font-family: inherit; font-size: 14px; }
.chips-col { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-col .chip { padding: 5px 12px; font-size: 13px; }
.price-range { display: flex; align-items: center; gap: 6px; }
.price-range input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #cfd5e0; border-radius: 6px; font-size: 14px; font-family: inherit; }
.quick-range { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.quick-range .chip { padding: 4px 10px; font-size: 12px; cursor: pointer; }

.search-results { min-height: 400px; }
.results-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.count-text { font-size: 15px; color: #444; }
.count-text strong { color: #2962ff; font-size: 18px; }
.sort-wrap { display: flex; align-items: center; gap: 8px; }
.sort-wrap label { font-size: 14px; color: #666; }
.sort-wrap select { padding: 8px 10px; border: 1px solid #cfd5e0; border-radius: 6px; font-family: inherit; font-size: 14px; cursor: pointer; }
.filter-toggle-mobile { display: none; padding: 8px 14px; background: #fff; border: 1px solid #cfd5e0; border-radius: 6px; cursor: pointer; font-family: inherit; }
@media (max-width: 880px) { .filter-toggle-mobile { display: inline-block; } }

.active-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #e8efff; color: #2962ff; border-radius: 20px; font-size: 13px; text-decoration: none; }
.pill span { font-weight: 700; opacity: .6; }
.pill:hover { background: #d4dfff; text-decoration: none; }

.empty-state { text-align: center; padding: 80px 20px; background: #fff; border-radius: 12px; }
.empty-state h3 { margin: 12px 0 8px; }
.empty-state p { color: #888; }

/* ===== Tutor Card v2 ===== */
.tutor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.tutor-card-v2 { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; position: relative; display: flex; flex-direction: column; }
.tutor-card-v2:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(41,98,255,.15); }
.tcv2-cover { height: 70px; background: linear-gradient(135deg, #2962ff, #7b2cbf); }
.tcv2-avatar { display: block; width: 90px; height: 90px; border-radius: 50%; border: 4px solid #fff; background: #dbe5f5; margin: -45px auto 0; position: relative; overflow: visible; }
.tcv2-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tcv2-verified { position: absolute; right: -2px; bottom: 4px; width: 26px; height: 26px; line-height: 22px; text-align: center; background: #06d6a0; color: #fff; border-radius: 50%; border: 2px solid #fff; font-size: 14px; font-weight: 800; }
.tcv2-body { padding: 14px 16px 16px; text-align: center; flex: 1; display: flex; flex-direction: column; }
.tcv2-body h3 { font-size: 17px; margin: 8px 0 4px; }
.tcv2-body h3 a { color: #222; }
.tcv2-title { color: #666; font-size: 13px; margin: 0 0 10px; min-height: 16px; }
.tcv2-rating { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; }
.tcv2-rating .star { color: #ddd; font-size: 14px; }
.tcv2-rating .star.on { color: #f59f00; }
.tcv2-rating .rval { font-weight: 700; margin-left: 4px; font-size: 14px; }
.tcv2-rating .rcnt { color: #999; font-size: 12px; }
.tcv2-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px; min-height: 24px; }
.tcv2-tag { background: #f0f3f8; color: #555; padding: 2px 10px; border-radius: 12px; font-size: 12px; }
.tcv2-meta { color: #888; font-size: 12px; margin-bottom: 12px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-mode { background: #e8efff; color: #2962ff; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.tcv2-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f0f3f8; margin-top: auto; }
.tcv2-price { color: #06d6a0; font-size: 14px; }
.tcv2-price strong { font-size: 18px; color: #2962ff; }

/* ===== Posts grid v2 ===== */
.btn-create-post { display: inline-block; margin-top: 18px; background: rgba(255,255,255,.18); color: #fff !important; padding: 10px 22px; border-radius: 30px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.35); font-weight: 600; text-decoration: none; }
.btn-create-post:hover { background: #fff; color: #2962ff !important; text-decoration: none; }

.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.post-card-v2 { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; gap: 12px; position: relative; border: 1px solid transparent; }
.post-card-v2:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(6,214,160,.15); border-color: #d4f5e9; }
.pcv2-head { display: flex; align-items: center; gap: 12px; }
.pcv2-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; }
.pcv2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pcv2-meta-head { flex: 1; min-width: 0; }
.pcv2-author { font-weight: 600; font-size: 14px; color: #222; }
.pcv2-time { font-size: 12px; color: #888; }
.pcv2-budget { text-align: right; line-height: 1.1; }
.pcv2-budget small { color: #888; font-size: 11px; }
.pcv2-budget strong { color: #06d6a0; font-size: 22px; font-weight: 800; display: block; }
.pcv2-body { color: inherit; text-decoration: none; display: block; }
.pcv2-body:hover { text-decoration: none; }
.pcv2-body h3 { margin: 0 0 6px; font-size: 17px; color: #222; line-height: 1.35; }
.pcv2-body:hover h3 { color: #2962ff; }
.pcv2-desc { color: #666; font-size: 14px; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcv2-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pcv2-tag { background: #f0f3f8; color: #555; padding: 4px 10px; border-radius: 14px; font-size: 12px; }
.pcv2-tag.tag-subject { background: #e8efff; color: #2962ff; font-weight: 600; }
.pcv2-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid #f0f3f8; }

/* ===== Role chooser (register landing) ===== */
.role-hero { background: linear-gradient(135deg,#2962ff 0%,#7b2cbf 50%,#f72585 100%); border-radius: 16px; padding: 50px 30px; text-align: center; color: #fff; margin-bottom: 28px; position: relative; overflow: hidden; }
.role-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.18), transparent 50%); }
.role-hero-inner { position: relative; }
.role-hero h1 { color: #fff; font-size: 38px; margin: 0 0 8px; }
.role-hero p { opacity: .95; font-size: 17px; margin: 0; }

.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; max-width: 920px; margin: 0 auto; }
.role-card { display: block; background: #fff; border-radius: 18px; padding: 36px 30px 30px; text-decoration: none; color: #222; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.role-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.12); text-decoration: none; }
.role-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.role-student::before { background: linear-gradient(90deg,#0096c7,#06d6a0); }
.role-student:hover { border-color: #06d6a0; }
.role-tutor::before { background: linear-gradient(90deg,#7b2cbf,#f72585); }
.role-tutor:hover { border-color: #7b2cbf; }

.role-badge { position: absolute; top: 18px; right: 18px; background: #f72585; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(247,37,133,.3); }

.role-icon { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.role-tag { font-size: 12px; color: #888; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.role-card h2 { font-size: 26px; margin: 6px 0 12px; color: #222; }
.role-card h2 small { font-size: 16px; color: #999; font-weight: 500; }
.role-sub { color: #555; font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.role-features { list-style: none; padding: 0; margin: 0 0 24px; }
.role-features li { padding: 6px 0; color: #444; font-size: 14px; border-bottom: 1px dashed #eef1f6; }
.role-features li:last-child { border-bottom: 0; }

.role-cta { display: inline-block; padding: 12px 24px; border-radius: 30px; font-weight: 700; font-size: 15px; transition: all .2s; }
.role-student .role-cta { background: linear-gradient(135deg,#0096c7,#06d6a0); color: #fff; }
.role-tutor .role-cta { background: linear-gradient(135deg,#7b2cbf,#f72585); color: #fff; }
.role-card:hover .role-cta { transform: translateX(4px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }

/* hide old filter-bar — kept for back-compat if any page uses it */
table { width: 100%; border-collapse: collapse; background: #fff; }
table th, table td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
table th { background: #f7f9fc; }
.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge.green { background: #e6f4ea; color: #1e7a3a; }
.badge.red { background: #fdeaea; color: #b71c1c; }
.badge.yellow { background: #fff5d6; color: #8a6500; }
.badge.gray { background: #eee; color: #555; }
.chat-list { display: grid; grid-template-columns: 280px 1fr; gap: 0; background: #fff; border-radius: 10px; overflow: hidden; height: 70vh; }
.chat-sidebar { border-right: 1px solid #e3e8f0; overflow-y: auto; }
.chat-sidebar a { display: block; padding: 12px 16px; border-bottom: 1px solid #f0f3f8; color: #222; }
.chat-sidebar a.active { background: #e8efff; }
.chat-main { display: flex; flex-direction: column; }
.chat-msgs { flex: 1; padding: 16px; overflow-y: auto; }
.msg { margin-bottom: 10px; max-width: 70%; padding: 8px 14px; border-radius: 14px; }
.msg.in { background: #f0f3f8; }
.msg.out { background: #2962ff; color: #fff; margin-left: auto; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e3e8f0; }
.chat-form input { flex: 1; padding: 10px; border: 1px solid #cfd5e0; border-radius: 6px; }