/* ======================================================================== PAGE SHELL — menu, hero, how-it-works, FAQ, help note, footer Hardcoded to the teachBD brand palette so this looks right regardless of whatever WordPress theme is active on the page. ======================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap'); .gp-wrap { --bg: #f5f5f6; --bg-alt: #ece8fb; --surface: #ffffff; --border: #d3d7dd; --muted: #6f6e85; --ink: #100e29; --text: #46455c; --primary: #3a2d97; --primary-light: #5b46d6; --primary-bg: #ece8fb; --glow: #8b6fe8; font-family: 'Inter', sans-serif; color: var(--text); background: var(--bg); line-height: 1.65; width: 100%; box-sizing: border-box; overflow-x: clip; } .gp-wrap * { box-sizing: border-box; } .gp-wrap img { max-width: 100%; display: block; } .gp-menu { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; background: rgba(245,245,246,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .gp-menu-logo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; flex-shrink: 0; } .gp-menu-links { display: flex; gap: 4px; align-items: center; } .gp-menu-links a { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; padding: 9px 16px; border-radius: 999px; transition: color 0.2s, background 0.2s; } .gp-menu-links a:hover { color: var(--primary); background: var(--primary-bg); } .gp-menu-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--primary); color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px 20px; text-decoration: none; border-radius: 999px; transition: background 0.2s, transform 0.15s; flex-shrink: 0; } .gp-menu-cta:hover { background: var(--primary-light); transform: translateY(-1px); } @media (max-width: 700px) { .gp-menu { padding: 14px 18px; } .gp-menu-links { display: none; } } .gp-hero { position: relative; background: radial-gradient(120% 100% at 50% -10%, var(--glow) 0%, #b6a1ef 22%, #e4defa 46%, var(--bg) 68%); padding: 64px 24px 44px; text-align: center; } .gp-hero-eyebrow { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); opacity: 0.6; margin: 0 0 14px; } .gp-hero h1 { font-family: 'Poppins', sans-serif; font-size: clamp(30px,4.4vw,44px); font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0 0 14px; letter-spacing: -0.5px; } .gp-hero-sub { font-size: 15.5px; color: var(--muted); max-width: 520px; margin: 0 auto; } .gp-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; max-width: 640px; } .gp-chip { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--primary); background: rgba(255,255,255,0.75); border: 1px solid rgba(58,45,151,0.18); padding: 6px 14px; border-radius: 999px; } .gp-portal-mount { max-width: 1100px; margin: -20px auto 0; padding: 0 24px 20px; position: relative; z-index: 2; } .gp-info-strip { max-width: 1100px; margin: 40px auto 0; padding: 0 24px; text-align: center; } .gp-info-strip h3 { font-family: 'Poppins', sans-serif; font-size: 20px; color: var(--ink); margin-bottom: 26px; } .gp-info-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; } @media (max-width: 760px) { .gp-info-steps { grid-template-columns: 1fr; } } .gp-info-step { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } .gp-info-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; margin-bottom: 12px; } .gp-info-step h4 { font-family: 'Poppins', sans-serif; font-size: 15.5px; color: var(--ink); margin: 0 0 6px; } .gp-info-step p { font-size: 13.5px; color: var(--muted); margin: 0; } .gp-faq { max-width: 760px; margin: 48px auto 0; padding: 0 24px; } .gp-faq h3 { font-family: 'Poppins', sans-serif; font-size: 20px; color: var(--ink); margin-bottom: 18px; text-align: center; } .gp-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 18px; margin-bottom: 10px; } .gp-faq-item summary { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); padding: 14px 0; cursor: pointer; } .gp-faq-item p { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; } .gp-help-note { max-width: 460px; margin: 44px auto 0; text-align: center; font-size: 12.5px; color: var(--muted); font-family: 'Inter', sans-serif; padding: 0 24px; } .gp-help-note b { color: var(--ink); font-weight: 600; } .gp-footer-note { text-align: center; padding: 26px 20px 20px; margin-top: 20px; font-size: 11.5px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); font-family: 'Inter', sans-serif; } /* ======================================================================== PORTAL BOX (login + dashboard) — restyled to match the brand, on top of the plugin's own dynamic curriculum colours (--sgp-primary etc., set inline per Cambridge/Edexcel student — left untouched here). ======================================================================== */ .sgp-portal, .sgp-portal * { font-family: 'Inter', sans-serif; box-sizing: border-box; } /* v3.30.0 — "white space on both sides" fix. This is almost always the WordPress theme's own content-area max-width/padding wrapping around the shortcode output, not something this plugin's own CSS was ever adding — .sgp-portal itself had no width rule at all. This full-bleed technique breaks the portal out of whatever container the theme puts around it, so it genuinely spans the full viewport width no matter which theme is active. */ /* v3.37.0 CRITICAL FIX — the v3.30.0 full-bleed attempt (width:100vw + left:50%/margin-left:-50vw) assumed the theme's parent container is simply centered with equal left/right gutters. That assumption was wrong for this theme's actual page template, and the result was exactly the opposite of the fix's intent: a large dead zone on one side and real content pushed off the other edge of the screen entirely (confirmed by screenshot). Reverted to a safe, theme- agnostic rule instead — this fills whatever width the theme's own content area actually provides, with no assumptions about that area's position on the page, so it can't produce this kind of regression on any theme. It won't force the portal past a narrow theme content column the way the old rule tried to (and badly failed to) do; that specific goal needs a theme-level full-width page template, not plugin CSS guessing at an unknown parent structure. */ .sgp-portal { width: 100%; max-width: none; box-sizing: border-box; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } @media (min-width: 1024px) { .sgp-portal { padding-left: 24px; padding-right: 24px; } } .sgp-login-wrap { display: flex; justify-content: center; padding: 0; } .sgp-login-card { width: 100%; max-width: 440px; background: #fff; border-radius: 22px; padding: 40px 36px; box-shadow: 0 24px 60px rgba(16,14,41,0.14); border: 1px solid #d3d7dd; } .sgp-login-header p { color: #6f6e85; margin-bottom: 26px; font-size: 14.5px; text-align: center; } #sgp-login-form label { display: block; font-weight: 600; margin: 14px 0 6px; color: #100e29; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } #sgp-login-form input { width: 100%; padding: 12px 14px; border: 1.5px solid #d3d7dd; border-radius: 10px; font-size: 15px; line-height: 1.5; transition: border-color .15s; } #sgp-login-form input:focus { outline: none; border-color: #3a2d97; } .sgp-btn { display: inline-block; border: none; cursor: pointer; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; text-align: center; transition: transform .1s, opacity .15s, background .2s; } .sgp-btn:hover { opacity: .96; transform: translateY(-1px); } .sgp-btn-primary { width: 100%; margin-top: 22px; background: #3a2d97; color: #fff; box-shadow: 0 6px 16px rgba(58,45,151,0.3); } .sgp-btn-primary:hover { background: #5b46d6; opacity: 1; } /* v3.13.1 — .sgp-btn-ghost (white text on near-transparent white) is ONLY legible on a dark background (the purple dashboard header, e.g. "Log Out"). It was mistakenly reused for delete/remove/cancel buttons sitting on white cards throughout the Tutor Portal — white-on-white, invisible until hover/focus happened to reveal it. Those all now use one of the two classes below instead; .sgp-btn-ghost itself is untouched so the header still looks right. */ .sgp-btn-ghost { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4); } .sgp-btn-outline { background: #fff; color: var(--sgp-primary, #3a2d97); border: 1.5px solid var(--sgp-primary, #3a2d97); } .sgp-btn-outline:hover { background: var(--sgp-light, #ece8fb); opacity: 1; } .sgp-btn-danger-outline { background: #fff; color: #a13a2f; border: 1.5px solid #d99089; } .sgp-btn-danger-outline:hover { background: #fdecea; opacity: 1; } .sgp-error { margin-top: 14px; background: #fdecea; color: #a13a2f; padding: 10px 14px; border-radius: 10px; font-size: 13px; } /* ---------- Dashboard shell ---------- */ .sgp-dashboard { background: linear-gradient(160deg, var(--sgp-light, #eef3f8) 0%, #ffffff 120%); border-radius: 22px; padding: 28px; } .sgp-dash-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; background: linear-gradient(135deg, var(--sgp-secondary), var(--sgp-primary)); color: #fff; padding: 20px 24px; border-radius: 16px; margin-bottom: 20px; box-shadow: 0 10px 28px rgba(0,0,0,0.14); } .sgp-student-block { display: flex; align-items: center; gap: 16px; } .sgp-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--sgp-accent); color: #1e2530; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.18); } .sgp-dash-header h2 { margin: 0 0 4px; font-size: 20px; font-family: 'Poppins', sans-serif; } .sgp-badge { background: var(--sgp-accent); color: #1e2530; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-right: 8px; } .sgp-sub { font-size: 13px; opacity: .9; } /* ---------- Tabs ---------- */ .sgp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } /* ===================================================================== * v3.15.0 — item 5/6: desktop/tablet sidebar layout. Pure CSS — the * three elements below are already direct siblings of .sgp-dashboard in * the actual markup, so CSS Grid named areas can lay them out as a * sidebar + content pane with ZERO markup changes. Below 1024px, * everything reverts to the existing stacked pill-row/dropdown layout, * completely unaffected. * ===================================================================== */ @media (min-width: 1024px) { .sgp-dashboard { display: grid; grid-template-columns: 230px 1fr; grid-template-areas: "banner banner" "header header" "tabs content"; gap: 28px; align-items: start; } .sgp-pwa-banner { grid-area: banner; } .sgp-dash-header { grid-area: header; } .sgp-tabs { grid-area: tabs; flex-direction: column; flex-wrap: nowrap; position: sticky; top: 20px; gap: 4px; } .sgp-tab-btn { display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; width: 100%; border-radius: 10px; padding: 12px 16px; } .sgp-tab-content { grid-area: content; min-width: 0; } .sgp-tabs-mobile-select-wrap { display: none !important; } } .sgp-tab-btn { background: #fff; border: 1.5px solid #d3d7dd; padding: 10px 16px; border-radius: 999px; font-weight: 600; cursor: pointer; font-size: 13.5px; color: #444; transition: all .15s; } .sgp-tab-btn:hover { border-color: var(--sgp-secondary); transform: translateY(-1px); } .sgp-tab-btn.active { background: var(--sgp-primary); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(0,0,0,0.16); } /* ---------- Content cards ---------- */ .sgp-tab-content { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 12px 30px rgba(16,14,41,0.06); min-height: 220px; } .sgp-loading { text-align: center; color: #888; padding: 60px 0; } .sgp-subhead { margin: 26px 0 10px; font-size: 15px; color: #333; } /* v3.12.0 — recent daily attendance list */ .sgp-daily-att-guardian-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; } .sgp-daily-att-guardian-row { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid #f0f0f0; font-size: 13.5px; } /* v3.19.0 — Attendance calendar view, the guardian portal's most-used monitoring tool. Deliberately given its own distinct card treatment (rather than blending into the generic tab styling) since this is meant to be immediately recognizable and easy to scan at a glance. */ .sgp-att-calendar { background: #fff; border-radius: 18px; padding: 20px; margin: 4px 0 24px; box-shadow: 0 6px 20px rgba(16,14,41,0.08); } .sgp-att-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .sgp-att-cal-header h4 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 16px; color: #100e29; } .sgp-att-cal-nav { background: var(--sgp-light, #ece8fb); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; font-weight: 700; color: var(--sgp-primary, #3a2d97); cursor: pointer; } .sgp-att-cal-nav:hover { background: var(--sgp-primary, #3a2d97); color: #fff; } .sgp-att-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .sgp-att-cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; padding-bottom: 6px; } .sgp-att-cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 13px; font-weight: 700; color: #444; background: #f5f6f8; } .sgp-att-cal-empty { background: transparent; } .sgp-att-cal-present { background: #d7f0e0; color: #1e7a3c; } .sgp-att-cal-late { background: #ffe9c2; color: #8a6100; } .sgp-att-cal-absent { background: #f8d4cf; color: #a13a2f; } .sgp-att-cal-noclass { background: #f5f6f8; color: #ccc; } .sgp-att-cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 12px; color: #555; } .sgp-att-cal-legend span { display: flex; align-items: center; gap: 6px; } .sgp-att-cal-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; } @media (max-width: 480px) { .sgp-att-calendar { padding: 14px; } .sgp-att-cal-grid { gap: 4px; } .sgp-att-cal-cell { font-size: 11px; border-radius: 8px; } } .sgp-daily-status-present { color: #1e7a3c; font-weight: 700; } .sgp-daily-status-absent { color: #a13a2f; font-weight: 700; } .sgp-daily-status-late { color: #8a6100; font-weight: 700; } .sgp-summary-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .sgp-summary-box { flex: 1; min-width: 160px; background: var(--sgp-light); border-left: 5px solid var(--sgp-primary); border-radius: 12px; padding: 16px 18px; box-shadow: 0 3px 10px rgba(16,14,41,0.06); } .sgp-summary-box .sgp-sbox-num { font-size: 26px; font-weight: 700; color: var(--sgp-primary); display: block; } .sgp-summary-box .sgp-sbox-label { font-size: 12px; color: #4a4a5a; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .sgp-chart-wrap { position: relative; height: 320px; margin-bottom: 26px; } .sgp-data-table { width: 100%; border-collapse: collapse; font-size: 14px; box-shadow: 0 3px 12px rgba(16,14,41,0.06); border-radius: 10px; overflow: hidden; } .sgp-data-table th { background: var(--sgp-primary); color: #fff; text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .sgp-data-table th:first-child { border-top-left-radius: 8px; } .sgp-data-table th:last-child { border-top-right-radius: 8px; } .sgp-data-table td { padding: 10px 12px; border-bottom: 1px solid #eee; } .sgp-data-table tr:hover td { background: var(--sgp-light); } .sgp-empty { text-align: center; padding: 40px 0; color: #888; } .sgp-status-pill { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; } .sgp-status-pending { background: #fdecea; color: #a13a2f; } .sgp-status-resolved { background: #e6f6ec; color: #1e7a3c; } /* ---------- Homework / Classwork ---------- */ .sgp-hw-card { border: 1px solid #e6e9ee; border-left: 5px solid var(--sgp-accent); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; position: relative; background: #fff; box-shadow: 0 2px 8px rgba(16,14,41,0.05); transition: box-shadow 0.2s, transform 0.2s; } .sgp-hw-card:hover { box-shadow: 0 6px 16px rgba(16,14,41,0.09); transform: translateY(-1px); } .sgp-hw-card .sgp-hw-due { float: right; font-size: 12px; font-weight: 700; color: var(--sgp-primary); } .sgp-hw-status-line { display: flex; gap: 16px; font-size: 12px; font-weight: 600; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #eee; } .sgp-hw-remarks-line { font-size: 12px; color: #555; font-style: italic; margin-top: 6px; } .sgp-hw-card h4 { margin: 6px 0 4px; font-family: 'Poppins', sans-serif; font-size: 15px; } .sgp-hw-type { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; } .sgp-hw-type-homework { background: var(--sgp-light); color: var(--sgp-primary); } .sgp-hw-type-classwork { background: var(--sgp-accent); color: #1e2530; } .sgp-attachment-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--sgp-primary); text-decoration: none; } .sgp-attachment-link:hover { text-decoration: underline; } /* ---------- Notices ---------- */ .sgp-notice-card { border-radius: 14px; background: var(--sgp-light); padding: 14px 16px; margin-bottom: 12px; border-left: 5px solid var(--sgp-secondary); } .sgp-notice-card.sgp-notice-pinned { border-left-color: var(--sgp-accent); background: #fff8e8; } .sgp-notice-card h4 { margin: 2px 0 6px; font-family: 'Poppins', sans-serif; font-size: 15px; } .sgp-notice-meta { font-size: 12px; color: #666; margin-bottom: 4px; } /* ---------- Report cards ---------- */ .sgp-reportcard-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid #e6e9ee; border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; background: #fff; } .sgp-reportcard-card h4 { margin: 0 0 4px; font-family: 'Poppins', sans-serif; font-size: 15px; } .sgp-reportcard-card .sgp-btn { width: auto; margin-top: 0; padding: 9px 18px; font-size: 13px; } .sgp-exam-pct-pill { display: inline-block; background: var(--sgp-light); color: var(--sgp-primary); font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 999px; margin-left: 4px; } /* ---------- Exam Reports (structured) ---------- */ .sgp-exam-list { display: flex; flex-direction: column; gap: 16px; } .sgp-exam-card { border: 1px solid #e6e9ee; border-radius: 16px; padding: 20px 22px; background: #fff; } .sgp-exam-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .sgp-exam-card-title h4 { margin: 6px 0 4px; font-family: 'Poppins', sans-serif; font-size: 16.5px; color: #1a1a2e; } .sgp-exam-curriculum-badge { background: var(--sgp-light); color: var(--sgp-primary); } .sgp-exam-pct-ring { flex-shrink: 0; width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .sgp-exam-pct-inner { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); } .sgp-band-high { color: #1e7a3c; } .sgp-band-high .sgp-exam-pct-inner { color: #1e7a3c; } .sgp-band-mid { color: #b8860b; } .sgp-band-mid .sgp-exam-pct-inner { color: #b8860b; } .sgp-band-low { color: #c0392b; } .sgp-band-low .sgp-exam-pct-inner { color: #c0392b; } .sgp-band-none { color: #b6bac2; } .sgp-band-none .sgp-exam-pct-inner { color: #888; } .sgp-exam-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 4px; } .sgp-exam-stat { background: var(--sgp-light); border-radius: 10px; padding: 10px 14px; } /* v3.19.0 — Progress Report infographic */ .sgp-progress-rings { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin: 16px 0 20px; padding: 20px; background: #fff; border-radius: 16px; box-shadow: 0 3px 12px rgba(16,14,41,0.06); } .sgp-progress-ring-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .sgp-progress-ring-label { font-size: 12px; font-weight: 600; color: #555; text-align: center; max-width: 100px; } .sgp-progress-stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .sgp-progress-stat-pill { background: var(--sgp-light); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #333; } .sgp-pill-good { background: #e6f6ec; color: #1e7a3c; } .sgp-pill-warn { background: #fff3cd; color: #8a6100; } .sgp-progress-callout { border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; } .sgp-progress-callout strong { display: block; font-size: 12.5px; margin-bottom: 4px; } .sgp-progress-callout p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #333; } .sgp-callout-remarks { background: #eef3fb; border-left: 4px solid #3a6ea5; } .sgp-callout-improve { background: #fff8ec; border-left: 4px solid #e0a12e; } .sgp-exam-stat span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #666; margin-bottom: 2px; } .sgp-exam-stat strong { font-size: 15px; color: #1a1a2e; } @media (max-width: 480px) { .sgp-exam-card-head { flex-direction: column; align-items: center; text-align: center; } } /* ---------- Overview ---------- */ .sgp-overview-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 10px; } .sgp-overview-col h4 { margin: 0 0 12px; font-size: 14px; color: #333; font-family: 'Poppins', sans-serif; } .sgp-overview-col { background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(16,14,41,0.05); border-left: 4px solid transparent; } .sgp-overview-col-subjects { border-left-color: #2e5cd6; } .sgp-overview-col-upcoming { border-left-color: #e0a12e; } .sgp-overview-col-notices { border-left-color: #7b3fe4; } .sgp-overview-col-comments { border-left-color: #1e9c7c; } .sgp-subject-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f4f4f4; } .sgp-subject-row:last-child { border-bottom: none; } .sgp-subject-name { font-weight: 700; font-size: 13.5px; color: #222; } .sgp-subject-teacher { display: flex; align-items: center; font-size: 12px; color: #666; } /* ---------- Comments ---------- */ .sgp-comment-card { border-radius: 14px; background: var(--sgp-light); padding: 14px 16px; margin-bottom: 12px; } .sgp-comment-card .sgp-comment-meta { font-size: 12px; color: #666; margin-bottom: 6px; } @media (max-width: 600px) { .sgp-dash-header { flex-direction: column; align-items: flex-start; } /* v3.8.0 FIX — two complaints, one root cause: nested padding. .sgp-dashboard (28px) + .sgp-tab-content (24px) stacked on both sides ate over 100px of a ~375px phone screen — that's the "narrow margins / lots of white space" guardians were seeing: the padding wasn't wrong on its own, it just doesn't scale down for a small screen, so the actual content column got squeezed. Tightened for mobile only; desktop is untouched. */ .sgp-dashboard { padding: 14px; border-radius: 16px; } .sgp-tab-content { padding: 16px; border-radius: 14px; } .sgp-login-card { padding: 28px 20px; } .sgp-dash-header { padding: 16px 18px; border-radius: 14px; } } /* ---------- Mobile tab dropdown (hidden on desktop, shown only ≤600px below) ---------- v3.16.0 — after THREE rounds of native /