/* TutorMitra blog: uses the site's own navy #012241 and green #037151, Inter + Playfair Display */
.tm-blog { --tm-navy:#012241; --tm-green:#037151; --tm-green-2:#06bb86; --tm-ink:#1d2a36; --tm-muted:#5b6b7a;
  --tm-line:#e3e8ee; --tm-soft:#f4f7f6; font-family:'Inter',sans-serif; color:var(--tm-ink); }
.tm-blog .content-wrap { padding:0 0 70px; }
.tm-blog em { font-family:'Playfair Display',serif; font-style:italic; font-weight:400; color:var(--tm-green-2); }

.tm-hero { background:var(--tm-navy); color:#fff; padding:80px 0 70px; position:relative; overflow:hidden; }
.tm-hero::after { content:""; position:absolute; right:-120px; bottom:-160px; width:420px; height:420px; border-radius:50%;
  border:60px solid rgba(6,187,134,.08); }
.tm-hero .container { position:relative; z-index:1; max-width:900px; }
.tm-hero h1 { color:#fff; font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.15; font-weight:700; margin:12px 0 16px; letter-spacing:-.01em; }
.tm-hero p { color:rgba(255,255,255,.78); font-size:1.1rem; max-width:620px; margin-bottom:28px; }
.tm-hero-sm { padding:60px 0 50px; }
.tm-eyebrow { display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tm-green-2); }

.tm-blog .tm-cta { background:var(--tm-green); color:#fff; border:0; margin:0; padding:0 28px; font-weight:600; }
.tm-blog .tm-cta:hover { background:var(--tm-green-2); color:#fff; }

.tm-wrap { padding-top:40px; }
.tm-topics { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px; }
.tm-topics a { padding:7px 16px; border:1px solid var(--tm-line); border-radius:999px; color:var(--tm-ink); font-size:.9rem; font-weight:500; }
.tm-topics a:hover { border-color:var(--tm-green); color:var(--tm-green); }
.tm-topics a.active { background:var(--tm-navy); border-color:var(--tm-navy); color:#fff; }

.tm-tag { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tm-green);
  background:rgba(3,113,81,.08); padding:4px 10px; border-radius:4px; }
.tm-meta { display:flex; align-items:center; gap:10px; color:var(--tm-muted); font-size:.85rem; line-height:1.4; }
.tm-meta strong { color:var(--tm-ink); font-weight:600; }
.tm-avatar { flex:none; width:36px; height:36px; border-radius:50%; background:var(--tm-navy); color:#fff; display:grid; place-items:center;
  font-size:.8rem; font-weight:600; }

.tm-featured { display:block; background:var(--tm-soft); border-left:4px solid var(--tm-green); border-radius:8px; padding:36px 40px; margin-bottom:36px; color:inherit; transition:box-shadow .2s; }
.tm-featured h2 { font-size:clamp(1.5rem,3vw,2.1rem); margin:14px 0 10px; color:var(--tm-navy); }
.tm-featured p { color:var(--tm-muted); font-size:1.05rem; max-width:760px; }
.tm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px; }
.tm-card { display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--tm-line); border-radius:8px; padding:26px; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.tm-card h3 { font-size:1.2rem; line-height:1.35; margin:0; color:var(--tm-navy); }
.tm-card p { color:var(--tm-muted); margin:0; flex:1; font-size:.95rem; }
.tm-card:hover, .tm-featured:hover { box-shadow:0 12px 30px rgba(1,34,65,.08); color:inherit; }
.tm-card:hover { transform:translateY(-3px); border-color:rgba(3,113,81,.35); }
.tm-card .tm-tag { align-self:flex-start; }

.tm-pager { display:flex; justify-content:center; gap:6px; margin-top:44px; }
.tm-pager a { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--tm-line); border-radius:6px; color:var(--tm-ink); }
.tm-pager a.active { background:var(--tm-navy); color:#fff; border-color:var(--tm-navy); }

.tm-empty { text-align:center; padding:60px 20px; }
.tm-empty h2 { color:var(--tm-navy); }

.tm-article { padding:50px 0 10px; }
.tm-article .container { max-width:760px; }
.tm-back { display:inline-block; margin-bottom:26px; color:var(--tm-muted); font-size:.9rem; }
.tm-article h1 { font-size:clamp(1.9rem,4.4vw,2.8rem); line-height:1.2; color:var(--tm-navy); margin:14px 0 20px; letter-spacing:-.01em; }
.tm-article .tm-meta { padding-bottom:26px; border-bottom:1px solid var(--tm-line); margin-bottom:32px; }
.tm-body { font-size:1.12rem; line-height:1.8; overflow-wrap:anywhere; }
.tm-body p { margin-bottom:1.3em; }
.tm-body h2 { font-size:1.5rem; color:var(--tm-navy); margin:1.6em 0 .6em; }
.tm-body ul { margin:0 0 1.3em 1.3em; }
.tm-body li { margin-bottom:.4em; }
.tm-note { margin-top:36px; padding-top:18px; border-top:1px solid var(--tm-line); font-size:.85rem; color:var(--tm-muted); }
.tm-share { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--tm-navy); color:#fff;
  border-radius:8px; padding:30px 36px; margin:20px 0 50px; }
.tm-share h3 { color:#fff; margin:0 0 4px; } .tm-share p { margin:0; color:rgba(255,255,255,.75); }
.tm-more-title { color:var(--tm-navy); margin-bottom:20px; }

.tm-write { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:40px; align-items:start; }
.tm-form label { display:block; font-weight:600; font-size:.9rem; color:var(--tm-navy); margin-bottom:18px; }
.tm-form input[type=text], .tm-form input[type=password], .tm-form select, .tm-form textarea { display:block; width:100%; margin-top:6px;
  padding:12px 14px; border:1px solid #012241; border-radius:6px; font:400 1rem/1.5 'Inter',sans-serif; color:var(--tm-ink); background:#fff; }
.tm-form textarea { min-height:360px; resize:vertical; line-height:1.7; }
.tm-form input:focus, .tm-form select:focus, .tm-form textarea:focus { outline:none; border-color:var(--tm-green); box-shadow:0 0 0 3px rgba(3,113,81,.15); }
.tm-row { display:grid; grid-template-columns:1fr 220px; gap:18px; }
.tm-count { margin:-10px 0 16px; font-size:.85rem; color:var(--tm-muted); }
.tm-count.ok { color:var(--tm-green); }
.tm-fine { font-size:.82rem; color:var(--tm-muted); }
.tm-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tm-errors { background:#fdecec; border:1px solid #f3c2c2; color:#8a1f1f; border-radius:6px; padding:14px 18px; margin-bottom:22px; }
.tm-errors ul { margin:6px 0 0 18px; }
.tm-ok { background:rgba(3,113,81,.08); color:var(--tm-green); border-radius:6px; padding:12px 16px; font-weight:500; }
.tm-tips { background:var(--tm-soft); border-radius:8px; padding:24px; position:sticky; top:110px; }
.tm-tips h3 { font-size:1rem; color:var(--tm-navy); margin-bottom:10px; }
.tm-tips ul { margin:0 0 20px 18px; font-size:.9rem; color:var(--tm-muted); }
.tm-tips code { background:#fff; padding:1px 6px; border-radius:4px; color:var(--tm-green); }

.tm-admin h1 { color:var(--tm-navy); }
.tm-login { max-width:360px; }
.tm-table { width:100%; border-collapse:collapse; margin:20px 0 30px; font-size:.92rem; }
.tm-table th, .tm-table td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--tm-line); vertical-align:middle; }
.tm-status { font-size:.75rem; font-weight:600; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--tm-soft); }
.tm-status.published { color:var(--tm-green); } .tm-status.pending { color:#a15c00; background:#fff4e0; }
.tm-actions form { display:flex; gap:6px; }
.tm-actions button { border:1px solid var(--tm-line); background:#fff; border-radius:4px; padding:5px 12px; font-size:.85rem; cursor:pointer; }
.tm-actions button.danger { color:#b3261e; border-color:#f3c2c2; }

@media (max-width:991px) { .tm-write { grid-template-columns:1fr; } .tm-tips { position:static; } }
@media (max-width:575px) {
  .tm-hero { padding:56px 0 48px; } .tm-featured { padding:26px 22px; } .tm-row { grid-template-columns:1fr; }
  .tm-share { padding:24px; } .tm-table { display:block; overflow-x:auto; }
}

/* The site's style.css sets heading and paragraph colours with higher priority; keep text readable on navy */
#content.tm-blog .tm-hero h1, #content.tm-blog .tm-share h3 { color:#fff !important; }
#content.tm-blog .tm-hero p { color:rgba(255,255,255,.78) !important; }
#content.tm-blog .tm-share p { color:rgba(255,255,255,.75) !important; }
#content.tm-blog .tm-hero em { color:var(--tm-green-2) !important; }
#content.tm-blog .tm-cta { background:#037151 !important; color:#fff !important; }
#content.tm-blog .tm-cta:hover { background:#06bb86 !important; color:#fff !important; }

/* accounts + admin */
.tm-auth { max-width:440px; }
.tm-switch { margin-top:18px; font-size:.92rem; color:var(--tm-muted); }
.tm-switch a { color:var(--tm-green); font-weight:600; }
.tm-hint { font-weight:400; color:var(--tm-muted); }
.tm-muted { color:var(--tm-muted); }
.tm-logout { display:inline; margin:0; }
.tm-admin-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:10px; }
.tm-tabs { display:flex; gap:4px; border-bottom:1px solid var(--tm-line); margin:20px 0; }
.tm-tabs a { padding:10px 18px; color:var(--tm-muted); font-weight:600; border-bottom:3px solid transparent; margin-bottom:-1px; }
.tm-tabs a.active { color:var(--tm-navy); border-bottom-color:var(--tm-green); }
.tm-actions input[type=text] { width:150px; padding:5px 8px; border:1px solid var(--tm-line); border-radius:4px; font-size:.85rem; }

/* review workflow + editor page */
.tm-warn { background:#fff4e0; color:#7a4a00; border-radius:6px; padding:12px 16px; }
.tm-warn a { color:#7a4a00; font-weight:600; text-decoration:underline; }
.tm-review-note { background:#fff4e0; border-left:3px solid #d08a1a; color:#5c3a00; padding:10px 14px; border-radius:4px; margin:8px 0 18px; font-size:.9rem; }
.tm-buttons { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
#content.tm-blog .tm-secondary { background:#fff !important; color:var(--tm-navy) !important; border:1px solid var(--tm-navy) !important; margin:0; }
.tm-form .tox-tinymce { border:1px solid #012241; border-radius:6px; margin:6px 0 18px; }
.tm-tips ol { margin:0 0 20px 18px; font-size:.9rem; color:var(--tm-muted); }
.tm-badge { background:#d08a1a; color:#fff; border-radius:999px; padding:2px 8px; font-size:.75rem; margin-left:4px; }
.tm-status.draft { color:var(--tm-muted); } .tm-status.rejected { color:#b3261e; background:#fdecec; }
.tm-review { flex-wrap:wrap; }
.tm-actions button.ok { background:var(--tm-green); color:#fff; border-color:var(--tm-green); }
.tm-btn { display:inline-block; border:1px solid var(--tm-line); border-radius:4px; padding:5px 12px; font-size:.85rem; color:var(--tm-navy); margin-right:6px; }
.tm-actions form { display:inline-flex; }
.tm-actions input[name=note] { width:190px; }

/* rich post content */
.tm-body h3 { font-size:1.25rem; color:var(--tm-navy); margin:1.4em 0 .5em; }
.tm-body h4 { font-size:1.08rem; color:var(--tm-navy); margin:1.2em 0 .4em; }
.tm-body ol { margin:0 0 1.3em 1.3em; }
.tm-body a { color:var(--tm-green); text-decoration:underline; }
.tm-body blockquote { border-left:4px solid var(--tm-green); margin:1.5em 0; padding:4px 0 4px 20px; color:var(--tm-muted); font-style:italic; }
.tm-body table { width:100%; border-collapse:collapse; margin:1.3em 0; font-size:1rem; display:block; overflow-x:auto; }
.tm-body td, .tm-body th { border:1px solid var(--tm-line); padding:8px 12px; }
.tm-body th { background:var(--tm-soft); }
.tm-body pre { background:#0f1f2e; color:#e6edf3; padding:16px; border-radius:6px; overflow-x:auto; font-size:.9rem; }
.tm-body hr { border:0; border-top:1px solid var(--tm-line); margin:2em 0; }

/* the site link at the bottom of every post */
.tm-site-link { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:40px; padding:22px 26px;
  border:1px solid rgba(3,113,81,.35); background:rgba(3,113,81,.05); border-radius:8px; color:var(--tm-ink); }
.tm-site-link strong { color:var(--tm-navy); font-size:1.1rem; }
.tm-site-link:hover { background:rgba(3,113,81,.1); color:var(--tm-ink); }
.tm-site-url { color:var(--tm-green); font-weight:600; white-space:nowrap; }

/* images in posts */
.tm-body img { max-width:100%; height:auto; border-radius:6px; margin:1em 0; }
.tm-body img[style*="float: left"] { margin:.3em 1.2em .8em 0; }
.tm-body img[style*="float: right"] { margin:.3em 0 .8em 1.2em; }
.tm-body figure { margin:1.5em 0; } .tm-body figcaption { font-size:.9rem; color:var(--tm-muted); text-align:center; }
@media (max-width:575px) { .tm-body img[style*="float"] { float:none !important; display:block; margin:1em 0; } }

/* ===== v6: image-card blog layout ===== */
.tm-hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; max-width:none !important; }
.tm-hero-row p { margin-bottom:0; }
.tm-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:44px; align-items:start; }
#content.tm-blog .tm-section { font-size:1.35rem; font-weight:700; color:var(--tm-navy); text-transform:uppercase; letter-spacing:.02em;
  border-left:4px solid var(--tm-green); padding-left:12px; margin:0 0 22px; line-height:1.2; }

.tm-media { position:relative; overflow:hidden; border-radius:8px; aspect-ratio:16/10; background:var(--tm-soft); }
.tm-cover { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.tm-cover-none { display:grid; place-items:center; background:linear-gradient(135deg,#012241,#037151); }
.tm-cover-none span { font:italic 400 3.5rem 'Playfair Display',serif; color:rgba(255,255,255,.85); }
.tm-tag-on { position:absolute; left:12px; top:12px; background:rgba(1,34,65,.85); color:#fff; }

#content.tm-blog .tm-card { padding:0; border:0; background:none; gap:10px; }
#content.tm-blog .tm-card:hover { transform:none; box-shadow:none; }
.tm-card:hover .tm-cover { transform:scale(1.05); }
#content.tm-blog .tm-card h3 { font-size:1.12rem; line-height:1.35; margin:6px 0 0; color:var(--tm-navy); transition:color .2s;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#content.tm-blog .tm-card:hover h3 { color:var(--tm-green); }
#content.tm-blog .tm-card p { font-size:.95rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tm-card-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.8rem; color:var(--tm-muted); }
.tm-card-meta span + span::before { content:"·"; margin-right:14px; color:#b8c2cc; }
.tm-author { color:var(--tm-green); font-weight:600; }

.tm-lead { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:36px; }
#content.tm-blog .tm-card-lg h3 { font-size:1.4rem; }
.tm-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 28px; }
.tm-pager a { width:auto; min-width:40px; padding:0 12px; }

.tm-side { position:sticky; top:100px; }
.tm-side-cta { background:var(--tm-navy); border-radius:8px; padding:24px; margin-bottom:34px; }
#content.tm-blog .tm-side-cta h3 { color:#fff !important; margin:0 0 6px; font-size:1.15rem; }
#content.tm-blog .tm-side-cta p { color:rgba(255,255,255,.75) !important; font-size:.92rem; margin-bottom:16px; }
.tm-overlay { position:relative; display:block; border-radius:8px; overflow:hidden; aspect-ratio:16/10; margin-bottom:16px; }
.tm-overlay::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(1,20,40,.9) 5%,rgba(1,20,40,.1) 65%); }
.tm-overlay span { position:absolute; left:18px; right:18px; bottom:16px; z-index:1; color:#fff; font-weight:700; font-size:1.15rem; line-height:1.3; }
.tm-overlay:hover .tm-cover { transform:scale(1.05); }
.tm-mini { display:flex; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--tm-line); color:var(--tm-ink); }
.tm-mini-img { flex:none; width:84px; height:64px; border-radius:6px; object-fit:cover; }
.tm-mini-img.tm-cover-none span { font-size:1.6rem; }
.tm-mini strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.93rem; line-height:1.35; color:var(--tm-navy); }
.tm-mini:hover strong { color:var(--tm-green); }
.tm-mini small { display:block; color:var(--tm-muted); font-size:.78rem; margin-top:4px; }
.tm-side .tm-section { margin-top:34px !important; }
.tm-topic-list { list-style:none; margin:0; padding:0; }
.tm-topic-list a { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--tm-line); color:var(--tm-ink); font-size:.93rem; }
.tm-topic-list a:hover { color:var(--tm-green); }
.tm-topic-list span { background:var(--tm-soft); border-radius:999px; padding:0 9px; font-size:.78rem; color:var(--tm-muted); }

.tm-article-cover { border-radius:10px; overflow:hidden; margin:0 0 32px; aspect-ratio:16/9; }

/* cover picker on the write page */
.tm-cover-pick { position:relative; border:2px dashed #9fb0c0; border-radius:8px; aspect-ratio:16/7; margin:6px 0 6px; background:var(--tm-soft);
  display:grid; place-items:center; overflow:hidden; cursor:pointer; transition:border-color .2s, background .2s; }
.tm-cover-pick:hover, .tm-cover-pick.drag { border-color:var(--tm-green); background:rgba(3,113,81,.06); }
.tm-cover-pick img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.tm-cover-pick.has img { display:block; }
.tm-cover-pick.has { border-style:solid; border-color:var(--tm-line); }
.tm-cover-empty { text-align:center; color:var(--tm-muted); padding:20px; font-size:.9rem; }
.tm-cover-empty strong { display:block; color:var(--tm-navy); font-size:1rem; margin-bottom:4px; }
.tm-cover-pick.has .tm-cover-empty { display:none; }
.tm-cover-pick input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2; }
.tm-cover-change { position:absolute; right:12px; bottom:12px; background:rgba(1,34,65,.85); color:#fff; font-size:.8rem; padding:6px 12px; border-radius:999px; display:none; }
.tm-cover-pick.has .tm-cover-change { display:block; }
.tm-cover-status { font-size:.85rem; min-height:1.4em; margin-bottom:14px; color:var(--tm-muted); }
.tm-cover-status.ok { color:var(--tm-green); } .tm-cover-status.bad { color:#b3261e; }

.tm-admin-post { display:flex; gap:12px; align-items:center; }
.tm-thumb { flex:none; width:72px; height:48px; border-radius:4px; object-fit:cover; }
.tm-thumb.tm-cover-none span { font-size:1.3rem; }

@media (max-width:991px) { .tm-layout { grid-template-columns:1fr; } .tm-side { position:static; } }
@media (max-width:640px) { .tm-lead, .tm-grid { grid-template-columns:1fr; } .tm-cover-pick { aspect-ratio:16/9; } }