Settings page: lang-ref heading + Premium upgrade CTA (Lite 2.0.4 prep)

css/admin.css

@@ -1,63 +1,215 @@
 .so_qmp-tab-content {
-	margin-top: 20px;
+        margin-top: 20px;
 }
 
 .nav-tab-wrapper {
-	margin-bottom: 20px;
+        margin-bottom: 20px;
 }
 
 #page-translations-table {
-	width: 100%;
-	border-collapse: collapse;
+        width: 100%;
+        border-collapse: collapse;
 }
 
 #page-translations-table th,
 #page-translations-table td {
-	padding: 10px;
-	border: 1px solid #ccc;
+        padding: 10px;
+        border: 1px solid #ccc;
 }
 
 #page-translations-table th {
-	background-color: #f1f1f1;
-	font-weight: bold;
+        background-color: #f1f1f1;
+        font-weight: bold;
 }
 
 .page-mapping-row select {
-	width: 100%;
+        width: 100%;
 }
 
 /* QML Premium "Number of Languages" control (disabled upsell). */
 .so_qmp-premium-field {
-	position: relative;
-	display: inline-block;
+        position: relative;
+        display: inline-block;
 }
 
 .so_qmp-premium-field .so_qmp-faded {
-	opacity: 0.4;
+        opacity: 0.4;
 }
 
 .so_qmp-premium-overlay {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	padding: 2px 10px;
-	font-size: 12px;
-	font-weight: 600;
-	color: #2271b1;
-	background: #f0f6fc;
-	border: 1px solid #72aee6;
-	border-radius: 4px;
-	white-space: nowrap;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 2px 10px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #2271b1;
+        background: #f0f6fc;
+        border: 1px solid #72aee6;
+        border-radius: 4px;
+        white-space: nowrap;
 }
 
 /* Grouped per-language field labels (General Settings tab). */
 .so_qmp-field-label {
-	display: block;
-	margin: 0 0 4px;
-	font-weight: 600;
+        display: block;
+        margin: 0 0 4px;
+        font-weight: 600;
 }
 
 .so_qmp-field-label:not(:first-child) {
-	margin-top: 10px;
+        margin-top: 10px;
+}
+
+/* Lang-reference paragraph styled to match h2 */
+p.so_qmp-lang-ref-link {
+    font-size: 1.3em;
+    font-weight: 600;
+}
+
+/* -------------------------------------------------------
+   Page title with inline logo
+------------------------------------------------------- */
+.so_qmp-page-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.so_qmp-title-logo {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+}
+
+/* -------------------------------------------------------
+   Two-column layout: main content + Premium sidebar
+------------------------------------------------------- */
+.so_qmp-content-with-sidebar {
+    display: flex;
+    align-items: flex-start;
+    gap: 24px;
+}
+
+.so_qmp-main-content {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+/* -------------------------------------------------------
+   Premium sidebar panel
+------------------------------------------------------- */
+.so_qmp-premium-sidebar {
+    flex: 0 0 240px;
+    width: 240px;
+}
+
+.so_qmp-sidebar-inner {
+    background: #fff;
+    border: 1px solid #c3c4c7;
+    border-radius: 4px;
+    padding: 16px;
+}
+
+.so_qmp-sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+
+.so_qmp-sidebar-logo {
+    width: 64px;
+    height: 64px;
+    flex-shrink: 0;
+}
+
+.so_qmp-sidebar-title {
+    font-weight: 600;
+    font-size: 0.95em;
+    line-height: 1.3;
+}
+
+.so_qmp-sidebar-features {
+    margin: 0 0 16px 0;
+    padding: 0 0 0 1.2em;
+}
+
+.so_qmp-sidebar-features li {
+    margin-bottom: 6px;
+    font-size: 0.9em;
+}
+
+.so_qmp-sidebar-btn {
+    display: block;
+    text-align: center;
+}
+
+/* -------------------------------------------------------
+   Inline Premium teaser (Number of Languages row)
+------------------------------------------------------- */
+.so_qmp-premium-teaser {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: 12px;
+    vertical-align: middle;
+}
+
+.so_qmp-teaser-logo {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.so_qmp-teaser-text {
+    font-size: 0.9em;
+    line-height: 1.4;
+}
+
+.so_qmp-teaser-text strong {
+    display: block;
+}
+
+.so_qmp-upgrade-btn .dashicons {
+    font-size: 18px;
+    width: 16px;
+    height: 14px;
+    margin-right: 3px;
+}
+
+/* -------------------------------------------------------
+   Language table: N/A cell and lang-ref row
+------------------------------------------------------- */
+.so_qmp_table.form-table th {
+    padding: 15px 10px;
+	width: 150px;
+}
+.so_qmp-na-cell {
+    vertical-align: middle;
+}
+
+.so_qmp-na {
+    color: #787c82;
+    font-style: italic;
+}
+
+.so_qmp-lang-ref-row td {
+    font-size: 1.2em;
+	font-style: italic;
+    font-weight: 600;
+}
+
+/* -------------------------------------------------------
+   General Settings: constrain language input width so the
+   folder column and Premium sidebar are not pushed out.
+------------------------------------------------------- */
+.so_qmp_table .regular-text {
+        max-width: 200px;
+}
+
+/* Push the Premium sidebar down */
+.so_qmp-premium-sidebar {
+        margin-top: 170px;
 }