/* ═══════════════════════════════════════════════════════════════════════════
DM Prompts Theme v5 — CSS
Font: Plus Jakarta Sans (loaded via wp_enqueue_style in functions.php)
═══════════════════════════════════════════════════════════════════════════ */
:root {
--dm-primary: #E60023;
--dm-primary-hover: #CC001F;
--dm-primary-light: #FFF0F3;
--dm-primary-mid: #FFB3C1;
--dm-bg: #f7f7f8;
--dm-surface: #ffffff;
--dm-text: #111111;
--dm-text-secondary:#6b7280;
--dm-text-muted: #9ca3af;
--dm-border: #e5e7eb;
--dm-border-light: #f3f4f6;
--dm-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--dm-shadow-md: 0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
--dm-shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
--dm-shadow-xl: 0 24px 48px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.05);
--dm-radius: 16px;
--dm-radius-sm: 10px;
--dm-radius-xs: 6px;
--dm-radius-pill: 999px;
--dm-sidebar-w: 264px;
--dm-header-h: 80px;
--dm-success: #10b981;
--dm-danger: #ef4444;
--dm-warning: #f59e0b;
--dm-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--dm-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--dm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dm-nav-pill: #ffffff; /* mobile nav pill background — light mode */
}
/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--dm-font); color: var(--dm-text); background: var(--dm-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
#dm4-site { min-height: 100vh; display: flex; flex-direction: column; }
#dm4-main { flex: 1; }
/* ═══════════════════════════════════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════════════════════════════════ */
.dm-feed-header {
display: flex; align-items: center; gap: 24px; padding: 0 28px;
height: var(--dm-header-h);
background: var(--dm-surface); border-bottom: 1px solid var(--dm-border);
position: sticky; top: 0; z-index: 500;
}
/* Logo */
.dm-feed-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.dm-brand-logo-img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.dm-brand-icon {
width: 70px; height: 70px; border-radius: 50%;
background: var(--dm-primary); display: flex; align-items: center;
justify-content: center; flex-shrink: 0;
box-shadow: 0 3px 12px rgba(230,0,35,.30); color: #fff;
}
.dm-brand-name { font-size: 16px; font-weight: 800; color: var(--dm-text); white-space: nowrap; letter-spacing: -.2px; }
/* Search — centered, takes available space */
.dm-feed-search { flex: 1; min-width: 0; max-width: 580px; margin: 0 auto; }
.dm-search-wrap { position: relative; display: flex; align-items: center; }
.dm-search-icon { position: absolute; left: 18px; color: var(--dm-text-muted); pointer-events: none; z-index: 1; flex-shrink: 0; }
.dm-search-field {
width: 100%; padding: 12px 112px 12px 46px;
border: 1.5px solid var(--dm-border); background: var(--dm-bg);
border-radius: var(--dm-radius-pill); font-size: 14px;
font-family: var(--dm-font); outline: none; transition: var(--dm-transition); color: var(--dm-text);
height: 46px;
}
.dm-search-field::placeholder { color: var(--dm-text-muted); }
.dm-search-field::-webkit-search-cancel-button,.dm-search-field::-webkit-search-decoration { -webkit-appearance:none; display:none; }
.dm-search-field:focus { background: var(--dm-surface); border-color: var(--dm-primary); box-shadow: 0 0 0 3px rgba(230,0,35,.08); }
.dm-search-clear {
position: absolute; right: 96px; background: none; border: none;
color: var(--dm-text-muted); cursor: pointer; padding: 4px; font-size: 15px;
display: none; transition: color .2s; align-items: center; justify-content: center;
z-index: 2;
}
.dm-search-clear:hover { color: var(--dm-text); }
/* ── Search Autocomplete Dropdown ──────────────────────────────────────── */
.dm-suggest-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
background: var(--dm-surface);
border: 1px solid var(--dm-border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,.18);
list-style: none;
margin: 0; padding: 6px 0;
z-index: 9999;
display: none;
max-height: 360px;
overflow-y: auto;
}
.dm-suggest-dropdown.is-open { display: block; }
.dm-suggest-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
cursor: pointer;
font-size: 13px;
color: var(--dm-text);
transition: background .1s;
}
.dm-suggest-item:hover,
.dm-suggest-item.is-active { background: var(--dm-hover); }
.dm-suggest-icon {
width: 20px; height: 20px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 12px; opacity: .6;
}
.dm-suggest-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-suggest-label em { font-style: normal; color: var(--dm-primary); font-weight: 600; }
.dm-suggest-pill {
font-size: 10px; padding: 2px 7px; border-radius: 99px; flex-shrink: 0;
background: var(--dm-border); color: var(--dm-text-muted); text-transform: capitalize;
}
.dm-suggest-divider {
height: 1px; background: var(--dm-border);
margin: 4px 14px;
}
.dm-search-submit {
position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
background: var(--dm-primary); color: #fff; border: none;
padding: 9px 22px; border-radius: var(--dm-radius-pill);
font-size: 14px; font-weight: 700; cursor: pointer;
font-family: var(--dm-font); transition: var(--dm-transition);
white-space: nowrap; z-index: 2; height: 36px;
display: flex; align-items: center;
box-shadow: 0 2px 8px rgba(230,0,35,.25);
}
.dm-search-submit:hover { background: var(--dm-primary-hover); box-shadow: 0 4px 14px rgba(230,0,35,.35); }
/* Nav */
.dm-feed-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dm-nav-link { color: var(--dm-text-secondary); text-decoration: none; font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: var(--dm-radius-pill); transition: var(--dm-transition); white-space: nowrap; }
.dm-nav-link:hover { background: var(--dm-bg); color: var(--dm-text); }
/* Dashboard = red pill, + Create = dark pill */
.dm-nav-btn {
background: var(--dm-primary); color: #fff; text-decoration: none; font-weight: 700;
font-size: 14px; padding: 10px 22px; border-radius: var(--dm-radius-pill);
transition: var(--dm-transition); white-space: nowrap;
box-shadow: 0 2px 8px rgba(230,0,35,.22); border: none; cursor: pointer;
font-family: var(--dm-font); height: 42px; display: inline-flex; align-items: center;
}
.dm-nav-btn:hover { background: var(--dm-primary-hover) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(230,0,35,.32); }
/* + Create button gets dark styling */
.dm-nav-btn.dm-nav-create {
background: #111 !important; color: #fff !important;
box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}
.dm-nav-btn.dm-nav-create:hover { background: #222 !important; box-shadow: 0 4px 14px rgba(0,0,0,.25) !important; }
/* Avatar dropdown */
.dm4-avatar-wrap { position: relative; }
.dm4-avatar-btn { padding: 0; border-radius: 50%; overflow: hidden; width: 36px; height: 36px; display: block; border: 2px solid var(--dm-border); transition: border-color .2s; }
.dm4-avatar-btn:hover { border-color: var(--dm-primary); }
.dm4-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.dm4-user-drop {
display: none; position: absolute; right: 0; top: calc(100% + 10px);
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: 18px; box-shadow: var(--dm-shadow-xl);
min-width: 220px; overflow: hidden; z-index: 2000;
animation: dm-dropdown-in .2s ease;
}
.dm4-avatar-wrap.open .dm4-user-drop { display: block; }
@keyframes dm-dropdown-in { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.dm4-drop-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--dm-border-light); }
.dm4-drop-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dm4-drop-name { font-size: .9rem; font-weight: 700; color: var(--dm-text); }
.dm4-drop-email { font-size: .75rem; color: var(--dm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.dm4-drop-divider { height: 1px; background: var(--dm-border-light); margin: 4px 0; }
.dm4-drop-item {
display: flex; align-items: center; gap: 10px; padding: 10px 16px;
font-size: .88rem; color: var(--dm-text-secondary); transition: background .15s;
text-decoration: none; width: 100%; text-align: left; border: none; background: none;
font-family: var(--dm-font); cursor: pointer;
}
.dm4-drop-item svg { opacity: .6; flex-shrink: 0; }
.dm4-drop-item:hover { background: var(--dm-bg); color: var(--dm-text); }
.dm4-drop-logout { color: var(--dm-primary) !important; }
.dm4-drop-logout:hover { background: var(--dm-primary-light) !important; }
/* Mobile search toggle / drawer */
.dm4-mob-search-btn { display: none; width: 36px; height: 36px; border-radius: 50%; background: var(--dm-bg); color: var(--dm-text-secondary); border: 1px solid var(--dm-border); align-items: center; justify-content: center; flex-shrink: 0; }
/* ── Mobile: hide entire header, bottom nav takes over ─────────────────── */
@media (max-width: 768px) {
#dm4-header,
.dm-feed-header,
header.dm-feed-header { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
.dm4-mob-search { display: none !important; }
#dm4-main { padding-top: 0 !important; }
body { padding-top: 0 !important; margin-top: 0 !important; }
}
.dm4-mob-search { display: none; padding: 10px 16px 12px; background: var(--dm-surface); border-bottom: 1px solid var(--dm-border); }
.dm4-mob-search.open { display: block; }
/* ═══════════════════════════════════════════════════════════════════════════
FEED WRAPPER + CATEGORY PILLS
═══════════════════════════════════════════════════════════════════════════ */
.dm-feed-wrapper { background: var(--dm-bg); font-family: var(--dm-font); color: var(--dm-text); }
.dm-categories {
display: flex; flex-wrap: nowrap; gap: 6px; padding: 14px 24px 16px; overflow-x: auto;
background: var(--dm-surface); border-bottom: 1px solid var(--dm-border);
scrollbar-width: none; -webkit-overflow-scrolling: touch;
margin-bottom: 0; box-shadow: 0 1px 0 rgba(0,0,0,.02);
user-select: none; -webkit-user-select: none;
}
.dm-categories::-webkit-scrollbar { display: none; }
.dm-cat-btn {
padding: 6px 16px; border-radius: var(--dm-radius-pill); border: 1.5px solid var(--dm-border);
background: var(--dm-surface); font-size: 13px; font-weight: 600; cursor: pointer;
white-space: nowrap; font-family: var(--dm-font); transition: var(--dm-transition);
color: var(--dm-text-secondary); flex-shrink: 0; line-height: 1.4;
}
.dm-cat-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); background: var(--dm-primary-light); }
.dm-cat-btn.active { background: var(--dm-text); color: #fff; border-color: var(--dm-text); }
/* Search indicator banner */
.dm-search-indicator {
display: none; padding: 12px 24px; background: var(--dm-primary-light);
border-bottom: 1px solid var(--dm-primary-mid);
font-size: 14px; font-weight: 600; color: var(--dm-primary);
align-items: center; gap: 12px;
}
.dm-search-indicator.visible { display: flex; }
.dm-search-clear-btn {
margin-left: auto; background: none; border: 1.5px solid var(--dm-primary);
color: var(--dm-primary); border-radius: var(--dm-radius-pill);
padding: 4px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
font-family: var(--dm-font); transition: var(--dm-transition);
}
.dm-search-clear-btn:hover { background: var(--dm-primary); color: #fff; }
/* ═══════════════════════════════════════════════════════════════════════════
MASONRY GRID
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) { .dm-masonry { grid-template-columns: repeat(4,1fr) !important; } }
@media (max-width: 1024px) { .dm-masonry { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 680px) { .dm-masonry { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; padding: 10px 8px !important; } }
@media (max-width: 400px) { .dm-masonry { grid-template-columns: repeat(2,1fr) !important; gap: 6px !important; padding: 8px 6px !important; } }
/* ═══════════════════════════════════════════════════════════════════════════
PROMPT CARD — minimal Pinterest
═══════════════════════════════════════════════════════════════════════════ */
.dm-card {
break-inside: avoid;
background: var(--dm-surface);
border-radius: 16px;
overflow: hidden;
margin-bottom: 14px;
cursor: pointer;
position: relative;
transition: transform .2s var(--dm-ease-spring), box-shadow .2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
will-change: transform;
}
.dm-card:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 6px 24px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.06);
}
.dm-card:active { transform: scale(.99); }
@media (max-width: 768px) {
.dm-card { border-radius: 12px; margin-bottom: 8px; }
.dm-card:hover { transform: translateY(-2px); }
}
/* Full-card link removed — overlay + body handle navigation */
/* ── Image area ──────────────────────────────────────────────────────────── */
.dm-card-img-wrap {
position: relative; overflow: hidden;
background: #f1f2f4;
border-radius: 16px 16px 0 0;
}
.dm-card-img {
width: 100%; height: auto; display: block;
transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.dm-card:hover .dm-card-img { transform: scale(1.04); }
.dm-card-img[src] { animation: dm-img-fade-in .25s ease; }
@keyframes dm-img-fade-in { from { opacity:0; } to { opacity:1; } }
/* Placeholder */
.dm4-card-placeholder {
width: 100%; aspect-ratio: 3/4;
background: linear-gradient(145deg,#f3f4f6,#eaecf0);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
}
/* Category capsule — top-left ON image */
.dm-card-badge {
position: absolute; top: 10px; left: 10px; z-index: 4;
display: inline-flex; align-items: center; gap: 5px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #111;
font-size: 10.5px; font-weight: 700;
padding: 4px 10px 4px 8px;
border-radius: 999px;
line-height: 1;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(0,0,0,.12);
letter-spacing: .1px;
max-width: calc(100% - 20px);
overflow: hidden; text-overflow: ellipsis;
}
.dm-card-badge img { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.dm-card-badge--cat { color: #fff !important; background: rgba(15,15,15,.85) !important; }
/* Hover overlay — dark + View pill center */
.dm-card-overlay {
position: absolute; inset: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.38);
text-decoration: none;
opacity: 0; transition: opacity .18s ease;
border-radius: 16px 16px 0 0;
}
.dm-card:hover .dm-card-overlay { opacity: 1; }
.dm-card-view-btn {
background: #fff; color: #111;
padding: 9px 22px; border-radius: 999px;
font-weight: 700; font-size: 13px;
box-shadow: 0 2px 12px rgba(0,0,0,.2);
pointer-events: none;
transform: translateY(6px) scale(.96);
transition: transform .2s var(--dm-ease-spring);
letter-spacing: .1px;
display: inline-block;
}
.dm-card:hover .dm-card-view-btn { transform: translateY(0) scale(1); }
/* Card body as tag */
a.dm-card-body { color: inherit; text-decoration: none !important; }
a.dm-card-body:hover .dm-card-title { color: var(--dm-primary); }
/* ── Bottom strip: title + likes inline ──────────────────────────────────── */
.dm-card-body {
display: flex !important;
flex-direction: row !important;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
padding: 6px 10px 7px;
}
.dm-card-title {
font-size: 12.5px; font-weight: 600;
color: var(--dm-text); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
flex: 1; min-width: 0;
letter-spacing: -.05px;
margin: 0; padding: 0;
}
.dm-card-likes {
display: inline-flex; align-items: center; gap: 3px;
color: var(--dm-primary); font-size: 11px; font-weight: 700;
flex-shrink: 0; white-space: nowrap;
padding-top: 1px;
}
.dm-card-likes svg { flex-shrink: 0; }
@media (max-width: 768px) {
.dm-card-body { padding: 5px 8px 6px; gap: 5px; }
.dm-card-title { font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
INFINITE SCROLL / LOAD MORE
═══════════════════════════════════════════════════════════════════════════ */
.dm-load-more { text-align: center; padding: 24px; }
.dm-load-btn {
background: var(--dm-surface); border: 1.5px solid var(--dm-border);
padding: 11px 32px; border-radius: var(--dm-radius-pill); font-size: 14px;
font-weight: 600; cursor: pointer; font-family: var(--dm-font);
transition: var(--dm-transition); color: var(--dm-text);
}
.dm-load-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); background: var(--dm-primary-light); }
.dm-empty { text-align: center; padding: 16px 20px 8px; color: var(--dm-text-secondary); font-size: 15px; }
.dm-empty-icon { display: none; }
.dm-empty h3 { font-size: 14px; font-weight: 600; color: var(--dm-text-secondary); margin-bottom: 4px; }
.dm-empty p { display: none; }
/* Infinite scroll status */
.dm-infinite-status { text-align: center; padding: 20px; display: none; }
.dm-infinite-spinner {
display: inline-block; width: 20px; height: 20px;
border: 2px solid var(--dm-border); border-top-color: var(--dm-primary);
border-radius: 50%; animation: dm-spin .7s linear infinite; vertical-align: middle; margin-right: 8px;
}
.dm-infinite-text { font-size: 14px; color: var(--dm-text-muted); font-weight: 500; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
/* ═══════════════════════════════════════════════════════════════════════════
SINGLE POST
═══════════════════════════════════════════════════════════════════════════ */
.dm-single-wrapper { padding-bottom: 48px; }
.dm-single { display: flex; gap: 28px; padding: 28px 24px; max-width: 960px; margin: 0 auto; }
.dm-left { flex: 0 0 320px; max-width: 320px; min-width: 0; }
.dm-right { flex: 1; min-width: 0; }
.dm-image { width: 100%; border-radius: var(--dm-radius); display: block; box-shadow: var(--dm-shadow-md); margin-bottom: 16px; }
/* Tool card */
.dm-tool-card {
background: var(--dm-surface); border-radius: var(--dm-radius);
border: 1px solid var(--dm-border); padding: 16px; margin-bottom: 16px;
box-shadow: var(--dm-shadow);
}
.dm-tool-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dm-tool-card-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; flex-shrink: 0; }
.dm-tool-card-icon-fallback { font-size: 24px; }
.dm-tool-card-label { display: block; font-size: 11px; color: var(--dm-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.dm-tool-card-name { display: block; font-size: 15px; font-weight: 700; color: var(--dm-text); margin-top: 2px; }
.dm-tool-card-btn {
display: block; width: 100%; padding: 10px; text-align: center;
background: var(--dm-primary); color: #fff; border-radius: var(--dm-radius-sm);
font-size: 13px; font-weight: 700; text-decoration: none;
transition: var(--dm-transition); box-shadow: 0 2px 8px rgba(230,0,35,.22);
}
.dm-tool-card-btn:hover { background: var(--dm-primary-hover); color: #fff; transform: translateY(-1px); }
/* Similar prompts sidebar */
.dm4-similar { margin-top: 4px; }
.dm4-similar-title { font-size: 14px; font-weight: 800; color: var(--dm-text); margin-bottom: 10px; }
.dm4-similar-card {
display: flex; gap: 10px; align-items: center;
background: var(--dm-surface); border-radius: var(--dm-radius-sm);
padding: 10px; margin-bottom: 8px; border: 1px solid var(--dm-border);
box-shadow: var(--dm-shadow); text-decoration: none;
transition: var(--dm-transition);
}
.dm4-similar-card:hover { border-color: var(--dm-primary-mid); transform: translateY(-1px); box-shadow: var(--dm-shadow-md); }
.dm4-similar-card img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.dm4-similar-placeholder { width: 64px; height: 48px; background: var(--dm-bg); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.dm4-similar-info { flex: 1; min-width: 0; }
.dm4-similar-cat { display: block; font-size: 10px; font-weight: 700; color: var(--dm-primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.dm4-similar-name { font-size: 12px; font-weight: 600; color: var(--dm-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
/* Tags */
.prompt-tags { margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.prompt-tag { background: var(--dm-bg); padding: 4px 12px; border-radius: var(--dm-radius-pill); font-size: 12px; font-weight: 500; color: var(--dm-text-secondary); }
.prompt-tag-cat { background: var(--dm-primary-light); color: var(--dm-primary); font-weight: 600; text-decoration: none; transition: var(--dm-transition); }
.prompt-tag-cat:hover { background: var(--dm-primary); color: #fff; }
/* Title */
.dm-title { font-size: 22px; font-weight: 800; margin-bottom: 14px; line-height: 1.3; letter-spacing: -.3px; }
/* Prompt box — scrollable container, no toggle needed */
.dm-prompt-box {
background: var(--dm-surface); padding: 16px 18px; border-radius: 12px; margin-bottom: 12px;
line-height: 1.75; font-size: 14px; color: var(--dm-text);
border: 1px solid var(--dm-border); border-left: 3px solid var(--dm-primary);
height: 160px; overflow-y: auto; overflow-x: hidden;
white-space: pre-wrap; word-break: break-word;
/* Custom scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--dm-primary-mid) transparent;
}
.dm-prompt-box::-webkit-scrollbar { width: 4px; }
.dm-prompt-box::-webkit-scrollbar-track { background: transparent; }
.dm-prompt-box::-webkit-scrollbar-thumb { background: var(--dm-primary-mid); border-radius: 4px; }
.dm-prompt-box::-webkit-scrollbar-thumb:hover { background: var(--dm-primary); }
/* Hide the show more toggle — scrolling replaces it */
.dm-prompt-toggle { display: none !important; }
/* Copy button */
.dm-copy-btn {
background: var(--dm-primary); color: #fff; border-radius: var(--dm-radius-sm);
padding: 12px 22px; border: none; cursor: pointer; font-size: 14px; font-weight: 600;
font-family: var(--dm-font); transition: var(--dm-transition);
display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
box-shadow: 0 2px 8px rgba(230,0,35,.22);
}
.dm-copy-btn:hover { background: var(--dm-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(230,0,35,.32); }
.dm-copy-btn.copied { background: var(--dm-success); }
.dm-copy-btn-count {
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.25); color: #fff;
border-radius: 20px; padding: 1px 7px; font-size: 12px; font-weight: 700;
min-width: 20px; line-height: 1.4; margin-left: 2px;
}
/* Mobile open-in-tool button */
.dm-prompt-ai-btn {
display: none; align-items: center; gap: 8px; padding: 10px 16px;
border-radius: var(--dm-radius-sm); border: 1.5px solid var(--dm-border);
background: var(--dm-surface); color: var(--dm-text); font-size: 13px; font-weight: 600;
text-decoration: none; margin-bottom: 12px; transition: var(--dm-transition);
}
@media (max-width: 640px) { .dm-prompt-ai-btn-mobile { display: inline-flex; } }
.dm-prompt-ai-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* Like bar */
.dm-like-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dm-like-count { font-size: 14px; font-weight: 700; color: var(--dm-text); }
/* Action buttons */
.dm-actions { margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.dm-btn {
border: 1.5px solid var(--dm-border); border-radius: var(--dm-radius-sm);
padding: 9px 16px; background: var(--dm-surface); cursor: pointer;
font-size: 13px; font-weight: 500; font-family: var(--dm-font);
transition: var(--dm-transition); display: inline-flex; align-items: center;
gap: 6px; color: var(--dm-text); line-height: 1.4;
}
.dm-btn:hover { border-color: var(--dm-text); }
.dm-like-btn { }
.dm-like-btn.liked { background: var(--dm-primary); border-color: var(--dm-primary); color: #fff; box-shadow: 0 2px 8px rgba(230,0,35,.20); }
.dm-like-btn.liked svg { stroke: #fff; fill: #fff; }
.dm-like-btn:disabled { opacity: .6; cursor: not-allowed; }
.dm-save-btn svg { stroke: currentColor; fill: none; transition: stroke .18s, fill .18s; }
.dm-save-btn:hover { color: var(--dm-primary); border-color: var(--dm-primary); background: var(--dm-primary-light); }
.dm-save-btn.saved { background: var(--dm-primary); color: #fff; border-color: var(--dm-primary); box-shadow: 0 2px 8px rgba(230,0,35,.20); }
.dm-save-btn.saved svg { stroke: #fff; fill: #fff; }
/* Stats inline — single post */
.dm-stats {
color: var(--dm-text-muted); font-size: 13px;
margin-top: 4px; padding: 14px 0; margin-bottom: 16px;
border-top: 1px solid var(--dm-border);
display: flex; gap: 6px 14px; flex-wrap: wrap;
align-items: center;
}
.dm-stats-inline { width: 100%; }
.dm-stat-pill { display: inline-flex; align-items: center; gap: 5px; }
.dm-stat-icon { font-size: 14px; line-height: 1; display: inline-flex; flex-shrink: 0; }
.dm-stat-value { font-size: 14px; font-weight: 800; color: var(--dm-text); }
.dm-stat-label { font-size: 11px; font-weight: 500; color: var(--dm-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.dm-stat-sep { color: var(--dm-text-muted); opacity: .4; font-size: 13px; user-select: none; margin: 0 2px; }
/* Author row */
.author { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--dm-border); }
.dm4-author-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dm-primary-mid); display: block; }
.author-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.dm4-author-name { font-size: 15px; font-weight: 700; color: var(--dm-text); text-decoration: none; transition: color .2s; }
.dm4-author-name:hover { color: var(--dm-primary); }
.author-followers { font-size: 13px; color: var(--dm-text-secondary); }
.author-followers span { font-weight: 700; color: var(--dm-text); }
/* Follow button */
.dm-follow-inline-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 14px; border-radius: var(--dm-radius-pill);
font-size: 13px; font-weight: 700; cursor: pointer;
border: 1.5px solid var(--dm-primary); background: var(--dm-primary); color: #fff;
transition: var(--dm-transition); font-family: var(--dm-font);
}
.dm-follow-inline-btn:hover { background: var(--dm-primary-hover); border-color: var(--dm-primary-hover); }
.dm-follow-inline-btn.following { background: transparent; color: var(--dm-text-secondary); border-color: var(--dm-border); }
.dm-follow-inline-btn.following:hover { background: var(--dm-primary-light); border-color: var(--dm-primary); color: var(--dm-primary); }
/* Share panel */
.dmsp-wrap { position: relative; display: inline-block; }
.dmsp-panel {
display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 9999;
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.13);
padding: 16px; min-width: 280px;
}
.dmsp-panel.dmsp-open { display: block; }
.dmsp-title { font-size: 12px; font-weight: 700; color: var(--dm-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.dmsp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.dmsp-item {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 6px; border-radius: 10px; border: 1.5px solid var(--dm-border);
text-decoration: none; font-size: 11px; font-weight: 600; color: var(--dm-text-secondary);
background: var(--dm-surface); cursor: pointer; transition: all .15s ease;
font-family: var(--dm-font);
}
.dmsp-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.dmsp-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dmsp-icon svg { width: 20px; height: 20px; }
.dmsp-icon-wa { background: #25D366; } .dmsp-wa:hover { border-color: #25D366; }
.dmsp-icon-x { background: #000; } .dmsp-x:hover { border-color: #000; }
.dmsp-icon-rd { background: #FF4500; } .dmsp-rd:hover { border-color: #FF4500; }
.dmsp-icon-li { background: #0A66C2; } .dmsp-li:hover { border-color: #0A66C2; }
.dmsp-icon-pt { background: #E60023; } .dmsp-pt:hover { border-color: #E60023; }
.dmsp-icon-cp { background: #374151; } .dmsp-cp:hover { border-color: #374151; }
@media (max-width: 480px) { .dmsp-panel { left: auto; right: 0; min-width: 260px; } .dmsp-grid { grid-template-columns: repeat(2,1fr); } }
/* Embed modal */
.dm-embed-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.5); align-items: center; justify-content: center; padding: 20px; }
.dm-embed-modal.open { display: flex; }
.dm-embed-box { background: var(--dm-surface); border-radius: 16px; padding: 24px; max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.dm-embed-box h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.dm-embed-box p { font-size: 13px; color: var(--dm-text-secondary); margin: 0 0 14px; }
.dm-embed-box textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--dm-border); border-radius: 10px; padding: 10px 12px; font-size: 12px; font-family: monospace; resize: none; height: 90px; color: var(--dm-text); outline: none; }
.dm-embed-box textarea:focus { border-color: var(--dm-primary); }
.dm-embed-actions { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
.dm-embed-copy-btn { background: var(--dm-primary); color: #fff; border: none; border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--dm-font); }
.dm-embed-close-btn { background: transparent; color: var(--dm-text-secondary); border: 1.5px solid var(--dm-border); border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--dm-font); }
/* ═══════════════════════════════════════════════════════════════════════════
AUTH PAGES
═══════════════════════════════════════════════════════════════════════════ */
.dm-auth-wrap {
display: flex; align-items: center; justify-content: center;
min-height: calc(100vh - var(--dm-header-h));
background: linear-gradient(135deg, rgba(230,0,35,.06) 0%, var(--dm-bg) 50%, rgba(230,0,35,.04) 100%);
padding: 24px; font-family: var(--dm-font); position: relative; overflow: hidden;
}
.dm-auth-wrap::before { content: ''; position: absolute; top: -20%; left: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(230,0,35,.06) 0%, transparent 70%); pointer-events: none; }
.dm-auth-card {
background: var(--dm-surface); border-radius: 24px;
box-shadow: var(--dm-shadow-xl); padding: 48px 40px;
width: 100%; max-width: 420px; position: relative; z-index: 1;
border: 1px solid rgba(0,0,0,.06);
animation: dm-card-in .4s cubic-bezier(0,0,.2,1) both;
backdrop-filter: blur(20px);
}
@keyframes dm-card-in { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width: 480px) { .dm-auth-card { padding: 32px 20px; } }
.dm-auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; }
.dm-auth-logo-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--dm-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; box-shadow: 0 4px 14px rgba(230,0,35,.3); }
.dm-auth-logo-name { font-size: 22px; font-weight: 800; color: var(--dm-text); }
.dm-auth-header { text-align: center; margin-bottom: 28px; }
.dm-auth-title { font-size: 26px; font-weight: 800; color: var(--dm-text); margin-bottom: 6px; }
.dm-auth-subtitle { color: var(--dm-text-secondary); font-size: 15px; line-height: 1.5; }
/* Form */
.dm-form { display: flex; flex-direction: column; gap: 16px; }
.dm-form-group { display: flex; flex-direction: column; gap: 6px; }
.dm-form-group label { font-size: 13px; font-weight: 600; color: var(--dm-text); }
.dm-form-group input, .dm-form-group textarea, .dm-form-group select {
padding: 13px 16px; border: 1.5px solid var(--dm-border); border-radius: var(--dm-radius-sm);
font-size: 15px; transition: var(--dm-transition); outline: none;
background: var(--dm-surface); color: var(--dm-text); font-family: var(--dm-font);
}
.dm-form-group input::placeholder { color: var(--dm-text-muted); }
.dm-form-group input:focus, .dm-form-group textarea:focus, .dm-form-group select:focus {
border-color: var(--dm-primary); box-shadow: 0 0 0 3px rgba(230,0,35,.08); background: #fff;
}
.dm-password-wrap { position: relative; display: flex; align-items: center; }
.dm-password-wrap input { width: 100%; padding-right: 44px; }
.dm-password-toggle { position: absolute; right: 12px; background: none; border: none; cursor: pointer; padding: 4px; color: var(--dm-text-secondary); display: flex; align-items: center; transition: color .2s; }
.dm-password-toggle:hover { color: var(--dm-text); }
/* Buttons */
.dm-btn-primary-full {
width: 100%; padding: 13px; border-radius: var(--dm-radius-sm);
background: linear-gradient(135deg, #E60023, #CC001F); color: #fff; border: none;
font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--dm-font);
box-shadow: 0 2px 8px rgba(230,0,35,.22); transition: var(--dm-transition);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.dm-btn-primary-full:hover { background: linear-gradient(135deg,#FF1A3D,#E60023); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(230,0,35,.35); }
.dm-btn-primary-full:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.dm-btn-google {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
padding: 12px 16px; border: 1.5px solid var(--dm-border); border-radius: var(--dm-radius-sm);
background: var(--dm-surface); color: var(--dm-text); font-size: 14px; font-weight: 600;
cursor: pointer; transition: var(--dm-transition); margin-bottom: 4px; font-family: var(--dm-font);
text-decoration: none;
}
.dm-btn-google:hover { background: var(--dm-bg); border-color: #4285F4; box-shadow: 0 2px 8px rgba(66,133,244,.15); color: var(--dm-text); }
.dm-auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--dm-text-muted); font-size: 12px; font-weight: 500; }
.dm-auth-divider::before, .dm-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--dm-border); }
.dm-form-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; color: var(--dm-text-secondary); text-align: center; margin-top: 4px; }
.dm-form-footer a { color: var(--dm-primary); text-decoration: none; font-weight: 600; }
.dm-form-footer a:hover { text-decoration: underline; }
.dm-message { padding: 0; font-size: 14px; text-align: center; min-height: 18px; font-weight: 600; }
.dm-message.success { color: var(--dm-success); }
.dm-message.error { color: var(--dm-danger); }
/* ═══════════════════════════════════════════════════════════════════════════
DASHBOARD LAYOUT
═══════════════════════════════════════════════════════════════════════════ */
.dashboard { display: flex; align-items: flex-start; min-height: calc(100vh - var(--dm-header-h)); background: var(--dm-bg); font-family: var(--dm-font); }
.admin-bar .dm-sidebar { top: 32px; height: calc(100vh - 32px); }
@media (max-width: 782px) { .admin-bar .dm-sidebar { top: 46px; height: calc(100vh - 46px); } }
.dm-sidebar {
width: var(--dm-sidebar-w); background: rgba(255,255,255,.96);
backdrop-filter: blur(12px); border-right: 1px solid var(--dm-border);
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh; z-index: 1000; flex-shrink: 0;
transition: transform .28s cubic-bezier(.4,0,.2,1); overflow: hidden;
}
@media (max-width: 960px) {
.dm-sidebar { position: fixed; left: 0; top: 0; height: calc(100vh - 60px); transform: translateX(-100%); overflow: hidden; }
.dm-sidebar.open { transform: translateX(0); box-shadow: var(--dm-shadow-xl); }
}
.dm-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; backdrop-filter: blur(1px); }
.dm-sidebar-overlay.open { display: block; }
.dm-sidebar-close { display: none; position: absolute; top: 14px; right: 14px; background: var(--dm-bg); border: 1px solid var(--dm-border); border-radius: 50%; width: 32px; height: 32px; font-size: 14px; cursor: pointer; align-items: center; justify-content: center; color: var(--dm-text); z-index: 10; flex-shrink: 0; transition: var(--dm-transition); }
.dm-sidebar-close:hover { background: var(--dm-primary-light); color: var(--dm-primary); border-color: var(--dm-primary); }
@media (max-width: 960px) { .dm-sidebar-close { display: flex; } }
/* Sidebar brand */
.dm-sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 16px 16px; border-bottom: 1px solid var(--dm-border-light); flex-shrink: 0; }
.dm-logo-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--dm-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(230,0,35,.25); color: #fff; }
.dm-brand-name-sidebar { font-size: 16px; font-weight: 800; color: var(--dm-text); letter-spacing: -.2px; }
/* Sidebar user card */
.dm-sidebar-user-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--dm-border-light); flex-shrink: 0; }
.dm-sidebar-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dm-primary); flex-shrink: 0; }
.dm-sidebar-user-name { font-size: 14px; font-weight: 700; color: var(--dm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-sidebar-user-role { font-size: 11px; color: var(--dm-text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 500; margin-top: 1px; }
/* Nav */
.dm-sidebar-nav { flex: 1 1 0; min-height: 0; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; }
.dm-sidebar-nav::-webkit-scrollbar { width: 3px; }
.dm-sidebar-nav::-webkit-scrollbar-thumb { background: var(--dm-border); border-radius: 2px; }
.dm-nav-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dm-text-muted); padding: 12px 10px 5px; }
.dm-nav-item {
display: flex !important; align-items: center !important; gap: 12px !important;
padding: 11px 12px !important; border-radius: var(--dm-radius-sm) !important;
color: var(--dm-text-secondary) !important; text-decoration: none !important;
font-size: 14px !important; font-weight: 500 !important;
transition: all .18s ease !important; cursor: pointer !important;
border: none !important; background: transparent !important;
width: 100% !important; text-align: left !important; box-sizing: border-box !important;
font-family: var(--dm-font) !important;
}
.dm-nav-item:hover { background: var(--dm-bg) !important; color: var(--dm-text) !important; }
.dm-nav-item.active { background: rgba(230,0,35,.08) !important; color: var(--dm-primary) !important; font-weight: 600 !important; }
.dm-nav-item.active .dm-nav-icon { background: rgba(230,0,35,.12) !important; }
.dm-nav-item.active .dm-nav-icon svg { stroke: var(--dm-primary) !important; }
.dm-nav-icon {
width: 36px !important; height: 36px !important; border-radius: 8px !important;
background: rgba(0,0,0,.04) !important; display: flex !important;
align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
transition: background .18s !important;
}
.dm-nav-item:hover .dm-nav-icon { background: rgba(0,0,0,.07) !important; }
.dm-nav-icon svg { width: 17px !important; height: 17px !important; stroke: #6b7280 !important; stroke-width: 1.8 !important; }
.dm-nav-item:hover .dm-nav-icon svg { stroke: var(--dm-text) !important; }
.dm-nav-label { flex: 1; font-size: 14px; font-weight: 500; }
.dm-nav-badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--dm-primary); color: #fff; font-size: 10px; font-weight: 700; display: flex !important; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.dm-nav-divider { height: 1px; background: var(--dm-border-light); margin: 6px 4px; flex-shrink: 0; }
.dm-nav-logout-btn { color: var(--dm-primary) !important; }
.dm-nav-logout-btn .dm-nav-icon { background: rgba(230,0,35,.08) !important; }
.dm-nav-logout-btn .dm-nav-icon svg { stroke: var(--dm-primary) !important; }
.dm-nav-logout-btn:hover { background: rgba(230,0,35,.06) !important; }
.dm-nav-add .dm-nav-icon svg { stroke: var(--dm-primary) !important; }
/* Main content area */
.dm-main { flex: 1; min-width: 0; }
.dm-topbar {
display: flex; align-items: center; padding: 0 28px; min-height: 60px;
background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0,0,0,.06); gap: 12px;
position: sticky; top: 0; z-index: 100; flex-wrap: nowrap;
}
.dm-page-title { font-size: 18px; font-weight: 700; color: var(--dm-text); flex-shrink: 0; letter-spacing: -.2px; }
.dm-topbar-buttons { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-shrink: 0; }
.dm-user-info { font-size: 14px; color: var(--dm-text-secondary); display: flex; align-items: center; gap: 10px; font-weight: 500; flex-shrink: 0; }
.dm-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dm-primary-mid); }
.dm-mobile-toggle { display: none; background: none; border: none; font-size: 20px; cursor: pointer; padding: 6px; color: var(--dm-text); flex-shrink: 0; }
@media (max-width: 960px) { .dm-mobile-toggle { display: flex; align-items: center; } }
/* Tab content */
.dm-tab-content { display: none; padding: 28px 24px; animation: dm-fade-up .3s ease; }
.dm-tab-content.active { display: block; }
@keyframes dm-fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 640px) { .dm-tab-content { padding: 18px 14px; } }
/* Stats grid */
.dm-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; margin-bottom: 24px; }
.dm-stat-card {
background: var(--dm-surface); border-radius: var(--dm-radius); padding: 22px 18px;
box-shadow: var(--dm-shadow); text-align: center; border: 1px solid var(--dm-border);
position: relative; overflow: hidden; transition: var(--dm-transition);
}
.dm-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--dm-primary); opacity: 0; transition: opacity .2s; border-radius: var(--dm-radius) var(--dm-radius) 0 0; }
.dm-stat-card:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md); }
.dm-stat-card:hover::before { opacity: 1; }
.dmd-stat-card .dm-stat-icon { font-size: 20px; margin-bottom: 8px; display: block; }
.dmd-stat-card .dm-stat-value { font-size: 26px; font-weight: 800; color: var(--dm-text); letter-spacing: -.5px; display: block; }
.dmd-stat-card .dm-stat-label { font-size: 10px; color: var(--dm-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; display: block; }
/* Highlight cards */
.dm-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.dm-highlight-card { background: linear-gradient(135deg, #E60023 0%, #a80019 100%); border-radius: var(--dm-radius); padding: 22px 20px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(230,0,35,.25); transition: var(--dm-transition); }
.dm-highlight-card::after { content: ''; position: absolute; right: -24px; top: -24px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none; }
.dm-highlight-card:hover { transform: translateY(-2px); }
.dm-highlight-likes { background: linear-gradient(135deg, #E60023 0%, #ff4060 100%); }
.dm-highlight-views { background: linear-gradient(135deg, #5A52D5 0%, #E60023 100%); }
.dm-highlight-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; opacity: .8; margin-bottom: 8px; }
.dm-highlight-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.dm-highlight-count { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.dm-highlight-link { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: 13px; }
.dm-highlight-link:hover { color: #fff; text-decoration: underline; }
/* Posts grid (dashboard my-posts) */
.dm-posts-grid { columns: 3; column-gap: 14px; }
@media (max-width: 960px) { .dm-posts-grid { columns: 2; } }
@media (max-width: 480px) { .dm-posts-grid { columns: 2; column-gap: 10px; } }
.dm-post-card { break-inside: avoid; background: var(--dm-surface); border-radius: var(--dm-radius); overflow: hidden; box-shadow: var(--dm-shadow); margin-bottom: 14px; transition: transform .28s var(--dm-ease-spring), box-shadow .28s ease; cursor: pointer; border: 1px solid var(--dm-border); }
.dm-post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.dm-post-card img { width: 100%; display: block; object-fit: cover; }
.dm-post-card-body { padding: 12px 14px 8px; }
.dm-post-card-title { font-size: 13px; font-weight: 600; color: var(--dm-text); margin-bottom: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-post-card-excerpt { font-size: 12px; color: var(--dm-text-secondary); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dm-post-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--dm-text-muted); }
.dm-post-status { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.dm-post-status.publish { background: #dcfce7; color: #166534; }
.dm-post-status.draft { background: #fef3c7; color: #92400e; }
.dm-post-status.pending { background: var(--dm-primary-light); color: var(--dm-primary); }
.dm-post-card-actions { display: flex; gap: 8px; padding: 8px 14px 12px; flex-wrap: wrap; }
/* Logout modal */
.dm-logout-modal { display: none !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0,0,0,.55) !important; backdrop-filter: blur(6px) !important; z-index: 999999 !important; align-items: center !important; justify-content: center !important; padding: 20px !important; box-sizing: border-box !important; margin: 0 !important; }
.dm-logout-modal.show { display: flex !important; }
.dm-logout-modal-box { background: #fff !important; border-radius: 20px !important; padding: 32px 28px 24px !important; max-width: 340px !important; width: 100% !important; text-align: center !important; box-shadow: 0 24px 60px rgba(0,0,0,.18) !important; animation: dm-modal-pop .22s var(--dm-ease-spring) !important; }
@keyframes dm-modal-pop { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dm-logout-modal-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(230,0,35,.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.dm-logout-modal-title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin: 0 0 8px; font-family: var(--dm-font); }
.dm-logout-modal-desc { font-size: 14px; color: #6b7280; margin: 0 0 24px; line-height: 1.5; font-family: var(--dm-font); }
.dm-logout-modal-actions { display: flex; gap: 10px; }
.dm-logout-cancel { flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid #e5e7eb; background: #f9fafb; color: #374151; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--dm-transition); font-family: var(--dm-font); }
.dm-logout-cancel:hover { background: #f3f4f6; }
.dm-logout-confirm { flex: 1; padding: 12px; border-radius: 10px; border: none; background: var(--dm-primary); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--dm-transition); font-family: var(--dm-font); text-decoration: none; display: flex; align-items: center; justify-content: center; }
.dm-logout-confirm:hover { background: var(--dm-primary-hover); color: #fff; }
/* Add-post form */
.dm-add-post-wrap { max-width: 1000px; margin: 0 auto; padding: 24px 20px; font-family: var(--dm-font); }
.dm-add-post-header { margin-bottom: 22px; }
.dm-back-link { color: var(--dm-primary); text-decoration: none; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dm-back-link:hover { text-decoration: underline; }
.dm-add-post-header h2 { font-size: 22px; font-weight: 800; color: var(--dm-text); }
.dm-add-post-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .dm-add-post-layout { grid-template-columns: 1fr; } }
.dm-dropzone { border: 2px dashed var(--dm-border); border-radius: var(--dm-radius); min-height: 280px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--dm-transition); overflow: hidden; background: var(--dm-bg); position: relative; }
.dm-dropzone:hover, .dm-dropzone.dragover { border-color: var(--dm-primary); background: var(--dm-primary-light); }
.dm-dropzone-placeholder { text-align: center; color: var(--dm-text-secondary); padding: 20px; pointer-events: none; }
.dm-drop-icon { font-size: 40px; margin-bottom: 12px; display: block; opacity: .6; }
.dm-dropzone-placeholder p { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.dm-dropzone-placeholder small { font-size: 12px; color: var(--dm-text-muted); }
.dm-preview-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: calc(var(--dm-radius) - 2px); }
.dm-profile-card { background: var(--dm-surface); border-radius: var(--dm-radius); padding: 24px; box-shadow: var(--dm-shadow); border: 1px solid var(--dm-border); }
/* Tool chips */
.dm-tool-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dm-tool-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--dm-radius-sm); border: 1.5px solid var(--dm-border); background: var(--dm-surface); color: var(--dm-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--dm-transition); font-family: var(--dm-font); }
.dm-tool-chip:hover { border-color: var(--dm-primary); background: var(--dm-primary-light); color: var(--dm-primary); }
.dm-tool-chip.selected { border-color: var(--dm-primary); background: var(--dm-primary); color: #fff; box-shadow: 0 2px 8px rgba(230,0,35,.25); }
.dm-tool-chip-icon { width: 20px; height: 20px; flex-shrink: 0; color: inherit; }
.dm-tool-chip.selected .dm-tool-chip-icon { filter: brightness(0) invert(1); }
/* ═══════════════════════════════════════════════════════════════════════════
SEARCH RESULTS BAR
═══════════════════════════════════════════════════════════════════════════ */
.dm-search-bar-shortcode { max-width: 600px; margin: 20px auto; padding: 0 24px; width: 100%; }
.dm-search-bar-form { position: relative !important; display: flex !important; align-items: center; width: 100%; isolation: isolate; }
.dm-search-bar-icon { position: absolute !important; left: 18px; top: 50%; transform: translateY(-50%); color: var(--dm-text-muted); pointer-events: none; z-index: 2; }
.dm-search-bar-input {
position: relative; z-index: 1; width: 100%;
padding: 13px 120px 13px 50px !important; border: 1.5px solid var(--dm-border) !important;
background: var(--dm-surface) !important; border-radius: var(--dm-radius-pill) !important;
font-size: 15px; font-family: var(--dm-font); outline: none; transition: var(--dm-transition);
color: var(--dm-text); box-sizing: border-box;
}
.dm-search-bar-input::placeholder { color: var(--dm-text-muted); }
.dm-search-bar-input:focus { border-color: var(--dm-primary) !important; box-shadow: 0 0 0 3px rgba(230,0,35,.08) !important; background: #fff !important; }
.dm-search-bar-btn { position: absolute !important; right: 6px; top: 50%; transform: translateY(-50%); z-index: 3; background: var(--dm-primary) !important; color: #fff !important; border: none !important; padding: 8px 18px; border-radius: var(--dm-radius-pill) !important; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--dm-font); transition: var(--dm-transition); white-space: nowrap; }
.dm-search-bar-btn:hover { background: var(--dm-primary-hover) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
FOOTER — base (dark default) + explicit light mode overrides
═══════════════════════════════════════════════════════════════════════════ */
.dm4-footer {
background: #060608;
color: #888;
font-family: var(--dm-font);
margin-top: auto;
border-top: 1px solid #1a1a1c;
}
.dm4-footer-inner {
max-width: 1200px; margin: 0 auto; padding: 48px 24px 32px;
display: flex; gap: 48px; flex-wrap: wrap;
}
.dm4-footer-brand { flex: 1; min-width: 200px; }
.dm4-footer-logo {
display: flex; align-items: center; gap: 8px;
font-size: 16px; font-weight: 800;
color: #fff; margin-bottom: 10px; text-decoration: none;
}
.dm4-footer-tagline { font-size: 13px; color: #666; line-height: 1.55; }
.dm4-footer-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.dm4-footer-col { min-width: 110px; }
.dm4-footer-col h4 {
font-size: 11px; font-weight: 800; color: #fff;
text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px;
}
.dm4-footer-col a {
display: block; font-size: 13px; color: #888;
margin-bottom: 8px; transition: color .2s; text-decoration: none;
}
.dm4-footer-col a:hover { color: #fff; }
.dm4-footer-bottom {
border-top: 1px solid #1a1a1c;
padding: 16px 24px; font-size: 12px; color: #555;
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px;
}
/* ── Light mode — every element explicitly overridden ─────────────────── */
[data-theme="light"] .dm4-footer { background: #f3f4f6; color: #555; border-top-color: #d1d5db; }
[data-theme="light"] .dm4-footer-logo { color: #111; }
[data-theme="light"] .dm4-footer-tagline { color: #666; }
[data-theme="light"] .dm4-footer-col h4 { color: #111; }
[data-theme="light"] .dm4-footer-col a { color: #555; }
[data-theme="light"] .dm4-footer-col a:hover{ color: #000; }
[data-theme="light"] .dm4-footer-bottom { border-top-color: #d1d5db; color: #666; }
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE — SINGLE POST
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.dm-single { display: flex !important; flex-direction: column; gap: 16px; padding: 16px 14px; }
.dm-left { flex: none; max-width: 100%; }
.dm4-similar { display: none; }
.dm-title { font-size: 18px; }
.dm-stats-inline { gap: 4px 8px; }
}
/* Animations */
@keyframes dm-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* ═══════════════════════════════════════════════════════════════════════════
ADD / EDIT PROMPT PAGE (dmap- prefix = dm add prompt)
Matches screenshots exactly: 2-col desktop / stacked mobile
═══════════════════════════════════════════════════════════════════════════ */
/* ── Page wrapper ────────────────────────────────────────────────────────── */
.dmap-page {
max-width: 1040px;
margin: 0 auto;
padding: 28px 24px 80px;
font-family: var(--dm-font);
}
/* ── Header: back link + h1 ─────────────────────────────────────────────── */
.dmap-back {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; font-weight: 700; color: var(--dm-primary);
text-decoration: none; margin-bottom: 10px;
transition: opacity .18s;
}
.dmap-back:hover { opacity: .75; }
.dmap-title {
font-size: 26px; font-weight: 800; color: var(--dm-text);
margin: 0 0 24px; letter-spacing: -.4px;
}
@media (max-width: 640px) { .dmap-title { font-size: 22px; } }
/* ── Flash message ──────────────────────────────────────────────────────── */
.dmap-msg {
padding: 12px 18px; border-radius: var(--dm-radius-sm);
font-size: 14px; font-weight: 600; margin-bottom: 20px; line-height: 1.5;
}
.dmap-msg-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.dmap-msg-error { background: #fff1f2; color: #9f1239; border: 1px solid #fca5a5; }
/* ── 2-column grid ──────────────────────────────────────────────────────── */
.dmap-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 820px) { .dmap-grid { grid-template-columns: 1fr; } }
/* ── LEFT: Image upload zone ────────────────────────────────────────────── */
.dmap-dropzone {
border: 2px dashed var(--dm-border);
border-radius: var(--dm-radius);
background: var(--dm-bg);
min-height: 320px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
cursor: pointer; position: relative; overflow: hidden;
transition: border-color .2s, background .2s, box-shadow .2s;
outline: none;
}
.dmap-dropzone:focus-visible { box-shadow: 0 0 0 3px rgba(230,0,35,.15); }
.dmap-dropzone:hover,
.dmap-dropzone.dragging {
border-color: var(--dm-primary);
background: var(--dm-primary-light);
box-shadow: 0 0 0 4px rgba(230,0,35,.07);
}
.dmap-dropzone.dragging { transform: scale(1.01); }
/* Placeholder content */
.dmap-placeholder {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px; text-align: center; padding: 32px 24px;
pointer-events: none;
}
.dmap-cam-icon { margin-bottom: 4px; }
.dmap-drop-main {
font-size: 15px; font-weight: 600; color: var(--dm-text-secondary);
margin: 0;
}
.dmap-drop-sub { font-size: 13px; color: var(--dm-text-muted); margin: 0; }
.dmap-img-required {
font-size: 12px; color: var(--dm-danger); font-weight: 600; margin: 4px 0 0;
}
.dmap-dropzone.img-error {
border-color: var(--dm-danger) !important;
box-shadow: 0 0 0 3px rgba(230,0,35,.12) !important;
animation: dmap-shake .3s ease;
}
@keyframes dmap-shake {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
[data-theme="dark"] .dmap-dropzone.img-error {
border-color: #f87171 !important;
box-shadow: 0 0 0 3px rgba(248,113,113,.15) !important;
}
.dmap-req { color: var(--dm-danger); }
/* Preview state */
.dmap-preview {
position: absolute; inset: 0; display: flex;
align-items: center; justify-content: center;
background: var(--dm-bg-alt, #111);
}
/* When image has loaded: expand the dropzone to show full image height */
.dmap-dropzone.has-preview {
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
padding: 0;
cursor: default;
}
.dmap-dropzone.has-preview .dmap-preview {
position: relative !important;
inset: auto !important;
width: 100%;
background: var(--dm-bg-alt, #111);
border-radius: calc(var(--dm-radius) - 2px);
overflow: hidden;
display: block;
}
.dmap-preview-img {
width: 100%; height: auto !important;
max-height: 700px;
object-fit: contain;
border-radius: calc(var(--dm-radius) - 2px);
display: block;
}
.dmap-remove-img {
position: absolute; top: 10px; right: 10px;
background: rgba(0,0,0,.65); color: #fff;
border-radius: 50%; width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800; cursor: pointer; border: none;
transition: background .18s; z-index: 2; font-family: var(--dm-font);
}
.dmap-remove-img:hover { background: var(--dm-primary); }
/* Progress bar */
.dmap-progress {
position: absolute; bottom: 0; left: 0; right: 0;
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 16px 12px;
background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 100%);
border-radius: 0 0 var(--dm-radius) var(--dm-radius);
}
.dmap-progress-track {
width: 100%; height: 4px; background: rgba(255,255,255,.25);
border-radius: 999px; overflow: hidden;
}
.dmap-progress-bar {
height: 100%; width: 0; background: var(--dm-primary);
border-radius: 999px; transition: width .15s;
}
.dmap-progress-pct { font-size: 11px; font-weight: 700; color: #fff; }
/* Image error */
.dmap-img-error {
position: absolute; bottom: 12px; left: 0; right: 0;
text-align: center; font-size: 12px; font-weight: 600;
color: var(--dm-danger); background: rgba(255,241,242,.95);
padding: 6px 16px; border-radius: 0 0 var(--dm-radius) var(--dm-radius);
}
[data-theme="dark"] .dmap-img-error {
background: rgba(230,0,35,.18);
color: #fca5a5;
}
/* ── RIGHT: Form fields ──────────────────────────────────────────────────── */
.dmap-right { display: flex; flex-direction: column; gap: 20px; }
.dmap-field-group { display: flex; flex-direction: column; gap: 7px; }
/* Labels — uppercase bold small-caps style matching screenshot */
.dmap-label {
font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: .06em;
color: var(--dm-text); display: flex; align-items: center; gap: 5px;
flex-wrap: wrap;
}
.dmap-label-hint {
font-weight: 600; font-size: 11px; color: var(--dm-text-muted);
letter-spacing: 0; text-transform: none; white-space: nowrap;
}
/* Inputs */
.dmap-input, .dmap-select, .dmap-textarea {
width: 100%; padding: 12px 14px;
border: 1.5px solid var(--dm-border);
border-radius: var(--dm-radius-sm);
font-family: var(--dm-font); font-size: 15px;
color: var(--dm-text); background: var(--dm-surface);
outline: none; transition: border-color .2s, box-shadow .2s;
-webkit-appearance: none; appearance: none;
caret-color: var(--dm-text);
}
.dmap-input::placeholder,
.dmap-textarea::placeholder { color: var(--dm-text-muted); }
.dmap-input:focus,
.dmap-select:focus,
.dmap-textarea:focus {
border-color: var(--dm-primary);
box-shadow: 0 0 0 3px rgba(230,0,35,.08);
background: var(--dm-surface);
}
.dmap-textarea { resize: vertical; min-height: 150px; line-height: 1.65; }
.dmap-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23555' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
cursor: pointer;
}
/* Char count */
.dmap-char-hint {
font-size: 12px; color: var(--dm-text-muted);
text-align: right; margin-top: -4px;
}
/* ── AI Tool grid ───────────────────────────────────────────────────────── */
.dmap-tool-hint {
font-size: 12px; color: var(--dm-text-muted); margin: 0 0 10px; line-height: 1.5;
}
.dmap-tools {
display: flex; flex-wrap: wrap; gap: 8px;
}
@media (max-width: 820px) {
/* On mobile: force 2-column tool grid */
.dmap-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.dmap-tool {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: var(--dm-radius-sm);
border: 1.5px solid var(--dm-border); background: var(--dm-surface);
font-size: 14px; font-weight: 600; color: var(--dm-text);
cursor: pointer; transition: border-color .2s, background .2s, color .2s, box-shadow .2s, transform .18s;
font-family: var(--dm-font); white-space: nowrap; user-select: none;
-webkit-tap-highlight-color: transparent;
}
.dmap-tool:hover {
border-color: var(--dm-primary);
background: var(--dm-primary-light);
color: var(--dm-primary);
}
.dmap-tool.selected {
border-color: var(--dm-primary);
background: var(--dm-primary);
color: #fff;
box-shadow: 0 2px 10px rgba(230,0,35,.25);
}
.dmap-tool.selected:hover { background: var(--dm-primary-hover); color: #fff !important; }
/* For selected state: let CSS class handle SVG color (see dm-icon-dark-adaptive overrides above) */
.dmap-tool:active { transform: scale(.97); }
.dmap-tool-icon {
width: 20px; height: 20px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
object-fit: contain;
}
.dmap-tool-icon .dm-tool-svg-icon { width: 20px; height: 20px; }
/* Dark-adaptive icons (Grok, Midjourney) in light mode create-post */
.dmap-tool .dm-icon-dark-adaptive { color: #111; }
[data-theme="dark"] .dmap-tool .dm-icon-dark-adaptive { color: #f4f4f5; }
/* When tool is selected (red bg), all SVG icons should be white */
.dmap-tool.selected .dm-tool-svg-icon path,
.dmap-tool.selected .dm-tool-svg-icon circle,
.dmap-tool.selected .dm-tool-svg-icon stop { fill: #fff !important; stop-color: #fff !important; }
.dmap-tool.selected .dm-icon-dark-adaptive { color: #fff; }
/* Tool error + visit link */
.dmap-tool-error {
font-size: 12px; font-weight: 600; color: var(--dm-danger); margin: 4px 0 0;
}
.dmap-tool-visit { margin-top: 8px; }
.dmap-visit-btn {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--dm-primary);
text-decoration: none; padding: 6px 14px;
border: 1.5px solid var(--dm-primary);
border-radius: var(--dm-radius-sm);
background: var(--dm-primary-light);
transition: background .18s, color .18s;
}
.dmap-visit-btn:hover { background: var(--dm-primary); color: #fff; }
/* ── Multi-tool slot labels ──────────────────────────────────────────────── */
.dmap-tool-slot-label {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .08em; color: var(--dm-text); margin: 14px 0 6px;
}
.dmap-tool-slot-optional { color: var(--dm-text-muted); margin-top: 20px; }
.dmap-tools-extra { opacity: .85; }
.dmap-tools-extra .dmap-tool.selected { opacity: 1; }
/* ── Unified tool grid — order badge ───────────────────────────────────── */
.dmap-tools-unified .dmap-tool { position: relative; }
.dmap-tool-order-badge {
position: absolute;
top: -6px; right: -6px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--dm-primary, #E60023);
color: #fff;
font-size: 10px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
line-height: 1;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
pointer-events: none;
z-index: 2;
}
.dmap-tools-unified .dmap-tool.selected { opacity: 1; }
/* dim unchosen slots when 3 already picked */
.dmap-tools-unified.max-reached .dmap-tool:not(.selected) {
opacity: .35; cursor: not-allowed;
}
/* ── Extra tool open buttons on single post ─────────────────────────────── */
.dm-copy-ai-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin: 10px 0;
}
.dm-copy-ai-label {
font-size: 12px; font-weight: 600; color: var(--dm-text-muted);
white-space: nowrap; flex-shrink: 0;
}
/* All tool buttons in the row */
.dm-copy-ai-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600;
background: var(--dm-surface); border: 1.5px solid var(--dm-border);
color: var(--dm-text); cursor: pointer;
transition: background .18s, border-color .18s;
white-space: nowrap;
}
.dm-copy-ai-btn:hover { background: var(--dm-bg); border-color: var(--dm-primary); color: var(--dm-primary); }
[data-theme="dark"] .dm-copy-ai-btn { background: #27272a; border-color: #3f3f46; color: #f4f4f5; }
[data-theme="dark"] .dm-copy-ai-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
/* ── Inline SVG icon helper — adapts fill for dark icons on light bg ─── */
.dm-tool-svg-icon {
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
}
/* Icons using currentColor (Grok, Midjourney) adapt automatically */
.dm-icon-dark-adaptive {
color: #111;
}
[data-theme="dark"] .dm-icon-dark-adaptive {
color: #f4f4f5;
}
/* Icon inside Open-with button */
.dm-copy-ai-btn-icon,
.dm-tool-open-btn-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.dm-copy-ai-btn-icon .dm-tool-svg-icon,
.dm-tool-open-btn-icon .dm-tool-svg-icon {
width: 16px; height: 16px;
}
/* Desktop: show all up to 4 tool buttons (slots 1-4 after label) */
/* 5th button onwards hidden on desktop, all hidden on mobile past 2 */
.dm-copy-ai-row .dm-copy-ai-btn:nth-child(n+6) { display: none; }
/* Mobile: show only first 2 tool buttons */
@media (max-width: 640px) {
.dm-copy-ai-row .dm-copy-ai-btn:nth-child(n+4) { display: none; }
}
.dm-tool-extra-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600;
background: var(--dm-surface); border: 1.5px solid var(--dm-border);
color: var(--dm-text); cursor: pointer;
transition: background .18s, border-color .18s;
}
.dm-tool-extra-btn:hover { background: var(--dm-bg); border-color: var(--dm-primary); color: var(--dm-primary); }
[data-theme="dark"] .dm-tool-extra-btn { background: #27272a; border-color: #3f3f46; color: #f4f4f5; }
[data-theme="dark"] .dm-tool-extra-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
/* Ensure tool button text visible in both modes (belt-and-suspenders) */
.dm-copy-ai-btn .dm-tool-btn-label,
.dm-tool-extra-btn .dm-tool-btn-label { color: #111111; }
[data-theme="light"] .dm-copy-ai-btn .dm-tool-btn-label,
[data-theme="light"] .dm-tool-extra-btn .dm-tool-btn-label { color: #111111 !important; }
[data-theme="dark"] .dm-copy-ai-btn .dm-tool-btn-label,
[data-theme="dark"] .dm-tool-extra-btn .dm-tool-btn-label { color: #ffffff !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dm-copy-ai-btn .dm-tool-btn-label,
:root:not([data-theme="light"]) .dm-tool-extra-btn .dm-tool-btn-label { color: #ffffff !important; }
}
/* ── Custom tool row ─────────────────────────────────────────────────────── */
.dmap-custom-tool-label {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .08em; color: var(--dm-text-muted); margin-bottom: 6px;
}
.dmap-custom-tool-row {
display: flex; gap: 8px; align-items: center; flex-wrap: nowrap;
}
.dmap-custom-name-input { flex: 1; min-width: 0; }
.dmap-custom-url-input { flex: 1.6; min-width: 0; }
.dmap-add-btn {
padding: 11px 18px;
border: 1.5px solid var(--dm-border);
border-radius: var(--dm-radius-sm);
background: var(--dm-surface); color: var(--dm-text);
font-size: 14px; font-weight: 700; cursor: pointer;
font-family: var(--dm-font); white-space: nowrap; flex-shrink: 0;
transition: border-color .18s, background .18s, color .18s;
}
.dmap-add-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
@media (max-width: 480px) {
.dmap-custom-tool-row { flex-wrap: wrap; }
.dmap-custom-name-input, .dmap-custom-url-input { flex: 1 1 100%; }
.dmap-add-btn { width: 100%; justify-content: center; }
}
/* ── Action buttons ──────────────────────────────────────────────────────── */
.dmap-actions { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.dmap-btn-draft {
padding: 12px 24px; border-radius: var(--dm-radius-sm);
border: 1.5px solid var(--dm-border); background: var(--dm-surface);
color: var(--dm-text); font-size: 15px; font-weight: 700;
cursor: pointer; font-family: var(--dm-font);
transition: border-color .18s, background .18s;
}
.dmap-btn-draft:hover { border-color: var(--dm-text); background: var(--dm-bg); }
.dmap-btn-draft:disabled { opacity: .55; cursor: not-allowed; }
.dmap-btn-publish {
padding: 12px 28px; border-radius: var(--dm-radius-sm);
border: none; background: var(--dm-primary); color: #fff;
font-size: 15px; font-weight: 800; cursor: pointer;
font-family: var(--dm-font);
box-shadow: 0 3px 12px rgba(230,0,35,.28);
transition: background .18s, box-shadow .18s, transform .18s;
}
.dmap-btn-publish:hover {
background: var(--dm-primary-hover);
box-shadow: 0 6px 20px rgba(230,0,35,.38);
transform: translateY(-1px);
}
.dmap-btn-publish:active { transform: scale(.97); }
.dmap-btn-publish:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE BOTTOM NAV
═══════════════════════════════════════════════════════════════════════════ */
.dmbn-nav {
display: none; /* hidden on desktop */
position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
background: var(--dm-surface);
border-top: 1px solid var(--dm-border);
padding: 0 8px env(safe-area-inset-bottom, 0px);
height: 60px;
align-items: stretch;
justify-content: space-around;
box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
@media (max-width: 768px) { .dmbn-nav { display: flex; } }
/* Add bottom padding to body so content doesn't hide behind nav */
@media (max-width: 768px) {
#dm4-main { padding-bottom: 72px; }
.dashboard .dm-main { padding-bottom: 0; }
}
.dmbn-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; flex: 1; color: var(--dm-text-muted); text-decoration: none;
font-family: var(--dm-font); font-size: 10px; font-weight: 600;
padding: 8px 0; transition: color .18s;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.dmbn-item:hover, .dmbn-item.active { color: var(--dm-primary); }
.dmbn-item.active::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 20px; height: 3px; background: var(--dm-primary); border-radius: 0 0 3px 3px;
}
.dmbn-icon {
width: 22px; height: 22px;
transition: stroke .18s;
}
.dmbn-item.active .dmbn-icon { stroke: var(--dm-primary); }
.dmbn-label { line-height: 1; letter-spacing: .01em; }
/* FAB — large red circle in the centre */
.dmbn-fab {
display: flex; align-items: center; justify-content: center;
flex: 1; position: relative;
-webkit-tap-highlight-color: transparent;
}
.dmbn-fab::before { display: none; } /* no top-border indicator */
.dmbn-fab > svg {
width: 48px; height: 48px;
background: var(--dm-primary); border-radius: 50%; stroke: #fff;
padding: 13px;
box-shadow: 0 4px 16px rgba(230,0,35,.4);
transition: transform .22s var(--dm-ease-spring), box-shadow .2s;
position: relative; top: -10px; /* lift above nav bar */
}
.dmbn-fab:hover > svg, .dmbn-fab:active > svg {
transform: scale(1.1);
box-shadow: 0 6px 22px rgba(230,0,35,.5);
}
/* ═══════════════════════════════════════════════════════════════════════════
SEARCH RESULTS PAGE
═══════════════════════════════════════════════════════════════════════════ */
.dmsr-page { font-family: var(--dm-font); }
/* Search bar */
.dmsr-search-bar-wrap {
padding: 20px 24px 0;
background: var(--dm-surface);
}
.dmsr-search-bar {
max-width: 700px; margin: 0 auto;
display: flex; align-items: center; gap: 0;
background: var(--dm-surface);
border: 1.5px solid var(--dm-border);
border-radius: var(--dm-radius-pill);
height: 52px; overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.dmsr-search-bar:focus-within {
border-color: var(--dm-primary);
box-shadow: 0 0 0 3px rgba(230,0,35,.08);
}
.dmsr-search-icon {
width: 16px; height: 16px; flex-shrink: 0;
color: var(--dm-text-muted); margin-left: 18px; pointer-events: none;
}
.dmsr-input {
flex: 1; border: none; outline: none; background: transparent;
font-family: var(--dm-font); font-size: 15px; color: var(--dm-text);
padding: 0 14px;
}
.dmsr-input::placeholder { color: var(--dm-text-muted); }
.dmsr-btn {
background: var(--dm-primary); color: #fff; border: none; cursor: pointer;
font-family: var(--dm-font); font-size: 14px; font-weight: 700;
padding: 0 24px; height: 100%; border-radius: 0 var(--dm-radius-pill) var(--dm-radius-pill) 0;
transition: background .18s; white-space: nowrap; flex-shrink: 0;
}
.dmsr-btn:hover { background: var(--dm-primary-hover); }
/* Results header */
.dmsr-results-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 24px; flex-wrap: wrap; gap: 8px;
background: var(--dm-surface); border-bottom: 1px solid var(--dm-border);
}
.dmsr-results-title {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 700; color: var(--dm-text);
}
.dmsr-results-title svg { opacity: .5; }
.dmsr-clear-btn {
font-size: 13px; font-weight: 600; color: var(--dm-text-secondary);
text-decoration: none; transition: color .18s;
}
.dmsr-clear-btn:hover { color: var(--dm-primary); }
/* Category pills */
.dmsr-cats {
display: flex; gap: 8px; padding: 14px 24px 16px;
overflow-x: auto; scrollbar-width: none;
background: var(--dm-surface); border-bottom: 1px solid var(--dm-border);
}
.dmsr-cats::-webkit-scrollbar { display: none; }
.dmsr-cat-pill {
display: inline-flex; align-items: center; padding: 7px 18px;
border-radius: var(--dm-radius-pill); border: 1.5px solid var(--dm-border);
font-size: 13px; font-weight: 600; color: var(--dm-text-secondary);
white-space: nowrap; text-decoration: none; transition: var(--dm-transition);
background: var(--dm-surface); flex-shrink: 0;
}
.dmsr-cat-pill:hover { border-color: var(--dm-primary); color: var(--dm-primary); background: var(--dm-primary-light); }
.dmsr-cat-pill.active { background: var(--dm-text); color: #fff; border-color: var(--dm-text); }
/* ═══════════════════════════════════════════════════════════════════════════
DASHBOARD PAGE EXTRAS
═══════════════════════════════════════════════════════════════════════════ */
/* User card in sidebar */
.dmd-user-avatar-wrap { margin-bottom: 10px; }
.dmd-user-avatar {
width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
border: 3px solid var(--dm-primary-mid); display: block; margin: 0 auto;
}
.dmd-user-info-wrap { text-align: center; }
.dmd-user-name { font-size: 15px; font-weight: 800; color: var(--dm-text); margin-bottom: 3px; }
.dmd-user-email { font-size: 11px; color: var(--dm-text-muted); margin-bottom: 10px; word-break: break-all; }
.dmd-edit-profile-btn {
display: block; width: 100%; padding: 9px; border-radius: var(--dm-radius-sm);
background: var(--dm-primary); color: #fff; text-align: center;
font-size: 13px; font-weight: 700; text-decoration: none;
transition: background .18s; border: none; cursor: pointer; font-family: var(--dm-font);
}
.dmd-edit-profile-btn:hover { background: var(--dm-primary-hover); color: #fff; }
/* Most viewed highlight card */
.dmd-highlight-card {
background: linear-gradient(135deg, #E60023 0%, #c4135a 60%, #f07 100%);
border-radius: var(--dm-radius); padding: 22px 24px; color: #fff;
margin-bottom: 24px; position: relative; overflow: hidden;
box-shadow: 0 6px 20px rgba(230,0,35,.3);
}
.dmd-highlight-card::after {
content: ''; position: absolute; right: -32px; top: -32px;
width: 130px; height: 130px; border-radius: 50%;
background: rgba(255,255,255,.08); pointer-events: none;
}
.dmd-highlight-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: .12em; opacity: .85; margin-bottom: 10px;
}
.dmd-highlight-title {
font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 6px;
max-width: 460px;
}
.dmd-highlight-count {
font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px;
}
.dmd-highlight-link {
display: inline-flex; align-items: center; gap: 4px;
color: rgba(255,255,255,.88); font-size: 13px; font-weight: 700;
text-decoration: none; transition: opacity .18s;
}
.dmd-highlight-link:hover { opacity: 1; text-decoration: underline; color: #fff; }
/* Recent posts section */
.dmd-recent-section { }
.dmd-recent-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.dmd-recent-header h3 { font-size: 18px; font-weight: 800; color: var(--dm-text); }
.dmd-filter-tabs { display: flex; gap: 6px; }
.dmd-filter-tab {
padding: 6px 14px; border-radius: var(--dm-radius-pill);
border: 1.5px solid var(--dm-border); background: var(--dm-surface);
font-size: 11px; font-weight: 800; letter-spacing: .06em;
cursor: pointer; font-family: var(--dm-font); transition: var(--dm-transition);
color: var(--dm-text-secondary);
}
.dmd-filter-tab:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dmd-filter-tab.active { background: var(--dm-primary); color: #fff; border-color: var(--dm-primary); }
/* Tab sub-headers */
.dmd-tab-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.dmd-tab-header h2 { font-size: 20px; font-weight: 800; color: var(--dm-text); }
/* Override dm-post-card btn colors */
.dm-post-card-actions .dm-btn-danger {
background: var(--dm-danger); color: #fff; border-color: var(--dm-danger);
}
.dm-post-card-actions .dm-btn-danger:hover { background: #dc2626; border-color: #dc2626; }
/* ── dm-mob-nav alias (points to dmbn styles) ─────────────────────────────── */
/* The footer uses dmbn-* classes which are already correct above */
/* ═══════════════════════════════════════════════════════════════════════════
SEARCH RESULTS PAGE (dmsr- prefix)
═══════════════════════════════════════════════════════════════════════════ */
.dmsr-search-bar {
background: var(--dm-bg); padding: 16px 24px 0;
border-bottom: 1px solid var(--dm-border);
}
.dmsr-search-wrap {
max-width: 680px; margin: 0 auto;
display: flex; align-items: center; position: relative;
background: var(--dm-surface); border: 1.5px solid var(--dm-border);
border-radius: var(--dm-radius-pill); height: 50px; gap: 0;
transition: border-color .2s, box-shadow .2s;
}
.dmsr-search-wrap:focus-within {
border-color: var(--dm-primary);
box-shadow: 0 0 0 3px rgba(230,0,35,.08);
}
.dmsr-search-icon { position: absolute; left: 16px; color: var(--dm-text-muted); pointer-events: none; flex-shrink: 0; }
.dmsr-input {
flex: 1; border: none; background: transparent; padding: 0 8px 0 44px;
font-size: 15px; outline: none; font-family: var(--dm-font); color: var(--dm-text);
}
.dmsr-input::placeholder { color: var(--dm-text-muted); }
.dmsr-btn {
background: var(--dm-primary); color: #fff; border: none;
border-radius: var(--dm-radius-pill); padding: 9px 22px;
font-size: 14px; font-weight: 700; cursor: pointer;
margin: 6px 6px 6px 0; font-family: var(--dm-font);
transition: background .18s; white-space: nowrap; flex-shrink: 0;
}
.dmsr-btn:hover { background: var(--dm-primary-hover); }
/* Results banner */
.dmsr-banner {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 24px; background: var(--dm-surface);
border-bottom: 1px solid var(--dm-border);
font-size: 14px; gap: 12px;
}
.dmsr-banner-left { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--dm-text); }
.dmsr-clear-btn {
font-size: 13px; font-weight: 700; color: var(--dm-text-muted);
background: none; border: none; cursor: pointer; font-family: var(--dm-font);
transition: color .18s; flex-shrink: 0;
}
.dmsr-clear-btn:hover { color: var(--dm-primary); }
/* ═══════════════════════════════════════════════════════════════════════════
DASHBOARD (dmd- prefix = dm dashboard)
═══════════════════════════════════════════════════════════════════════════ */
.dmd-wrap {
display: flex; min-height: calc(100vh - var(--dm-header-h));
background: var(--dm-bg); font-family: var(--dm-font);
width: 100%; max-width: 100%; overflow-x: hidden;
}
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.dmd-sidebar {
width: 220px; background: var(--dm-surface); border-right: 1px solid var(--dm-border);
display: flex; flex-direction: column; flex-shrink: 0;
position: sticky; top: var(--dm-header-h); height: calc(100vh - var(--dm-header-h));
overflow-y: auto; overflow-x: hidden;
}
@media (max-width: 960px) {
.dmd-sidebar {
position: fixed; left: 0; top: 0; height: 100vh;
z-index: 1200; transform: translateX(-100%);
transition: transform .28s ease; width: 260px;
box-shadow: var(--dm-shadow-xl); padding-top: 60px;
}
.dmd-sidebar.open { transform: translateX(0); }
}
.dmd-sidebar-close {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px; border-radius: 50%;
background: var(--dm-primary); border: none; cursor: pointer;
display: none; align-items: center; justify-content: center;
box-shadow: 0 2px 10px rgba(230,0,35,.35); z-index: 2;
}
@media (max-width: 960px) { .dmd-sidebar-close { display: flex; } }
.dmd-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1100; backdrop-filter: blur(1px); }
.dmd-overlay.show { display: block; }
/* User card */
.dmd-user-card {
padding: 20px 16px 16px; border-bottom: 1px solid var(--dm-border-light);
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.dmd-user-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--dm-primary); }
.dmd-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.dmd-user-name { font-size: 14px; font-weight: 700; color: var(--dm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmd-user-email { font-size: 11px; color: var(--dm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmd-edit-profile-btn {
background: var(--dm-primary); color: #fff; border: none;
border-radius: var(--dm-radius-pill); padding: 7px 20px;
font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--dm-font);
transition: background .18s; margin-top: 4px;
}
.dmd-edit-profile-btn:hover { background: var(--dm-primary-hover); }
/* Nav */
.dmd-nav { display: flex; flex-direction: column; padding: 8px 10px 16px; gap: 1px; }
.dmd-nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--dm-radius-sm);
color: var(--dm-text-secondary); text-decoration: none;
font-size: 14px; font-weight: 500; cursor: pointer;
border: none; background: transparent; width: 100%;
text-align: left; font-family: var(--dm-font);
transition: background .18s, color .18s;
}
.dmd-nav-item:hover { background: var(--dm-bg); color: var(--dm-text); }
.dmd-nav-item.active { background: rgba(230,0,35,.06); color: var(--dm-primary); font-weight: 600; }
.dmd-nav-item.active .dmd-nav-icon { background: rgba(230,0,35,.12); }
.dmd-nav-item.active .dmd-nav-icon svg { stroke: var(--dm-primary); }
.dmd-nav-add { color: var(--dm-primary); }
.dmd-nav-add .dmd-nav-icon { background: rgba(230,0,35,.06); }
.dmd-nav-add .dmd-nav-icon svg { stroke: var(--dm-primary); }
.dmd-nav-icon {
width: 32px; height: 32px; border-radius: 8px;
background: var(--dm-bg); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background .18s;
}
.dmd-nav-icon svg { width: 16px; height: 16px; stroke: var(--dm-text-secondary); stroke-width: 1.8; }
.dmd-nav-item:hover .dmd-nav-icon { background: var(--dm-border, #e5e7eb); }
.dmd-nav-label { flex: 1; }
.dmd-nav-chevron { opacity: .3; flex-shrink: 0; }
.dmd-nav-item:hover .dmd-nav-chevron,
.dmd-nav-item.active .dmd-nav-chevron { opacity: .7; }
.dmd-notif-badge {
min-width: 18px; height: 18px; border-radius: 9px;
background: var(--dm-primary); color: #fff;
font-size: 10px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
/* ── Main ───────────────────────────────────────────────────────────────── */
.dmd-main { flex: 1; min-width: 0; }
/* Topbar */
.dmd-topbar {
display: flex; align-items: center; gap: 12px;
padding: 0 24px; min-height: 60px;
background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--dm-border);
position: sticky; top: 0; z-index: 100;
}
.dmd-ham {
display: none; background: none; border: none;
cursor: pointer; padding: 4px; color: var(--dm-text);
}
@media (max-width: 960px) { .dmd-ham { display: flex; align-items: center; } }
.dmd-topbar-title { font-size: 18px; font-weight: 800; color: var(--dm-text); flex: 1; letter-spacing: -.2px; }
.dmd-topbar-right { display: flex; align-items: center; gap: 10px; }
.dmd-create-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--dm-primary); color: #fff; border: none;
border-radius: var(--dm-radius-pill); padding: 8px 18px;
font-size: 14px; font-weight: 700; cursor: pointer;
font-family: var(--dm-font); text-decoration: none;
transition: background .18s; box-shadow: 0 2px 8px rgba(230,0,35,.22);
}
.dmd-create-btn:hover { background: var(--dm-primary-hover); color: #fff; }
/* Bell */
.dmd-bell-wrap { position: relative; }
.dmd-bell-btn {
background: none; border: none; cursor: pointer;
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--dm-text-secondary); transition: background .18s;
position: relative;
}
.dmd-bell-btn:hover { background: var(--dm-bg); }
.dmd-bell-badge {
position: absolute; top: 4px; right: 4px;
min-width: 16px; height: 16px; border-radius: 8px;
background: var(--dm-primary); color: #fff;
font-size: 9px; font-weight: 800;
display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.dmd-bell-drop {
display: none; position: absolute; right: 0; top: calc(100% + 8px);
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: var(--dm-radius); box-shadow: var(--dm-shadow-xl);
min-width: 300px; z-index: 999;
animation: dm-dropdown-in .2s ease;
}
.dmd-bell-wrap.open .dmd-bell-drop { display: block; }
.dmd-bell-drop-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--dm-border-light); font-weight: 700; font-size: 14px; }
.dmd-bell-drop-header button { background: none; border: none; cursor: pointer; font-size: 12px; color: var(--dm-primary); font-weight: 700; font-family: var(--dm-font); }
.dmd-bell-list { max-height: 300px; overflow-y: auto; padding: 8px 0; }
.dmd-bell-empty { font-size: 13px; color: var(--dm-text-muted); text-align: center; padding: 20px; }
.dmd-topbar-user { display: flex; align-items: center; gap: 8px; }
.dmd-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dm-primary-mid); }
.dmd-topbar-name { font-size: 13px; font-weight: 700; color: var(--dm-text); }
@media (max-width: 480px) { .dmd-topbar-name { display: none; } }
/* Tabs */
.dmd-tab { display: none; padding: 24px 24px 60px; animation: dm-fade-up .25s ease; }
.dmd-tab.active { display: block; }
.dmd-section-title { font-size: 20px; font-weight: 800; color: var(--dm-text); margin: 0 0 20px; letter-spacing: -.2px; }
/* Stats grid */
.dmd-stats-row {
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 12px; margin-bottom: 20px;
}
.dmd-stat-card {
background: var(--dm-surface); border-radius: var(--dm-radius);
padding: 18px 14px; text-align: center;
border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow);
transition: transform .2s, box-shadow .2s;
}
.dmd-stat-card:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md); }
.dmd-stat-icon { font-size: 18px; margin-bottom: 6px; }
.dmd-stat-val { font-size: 22px; font-weight: 800; color: var(--dm-text); letter-spacing: -.5px; }
.dmd-stat-lbl { font-size: 9px; font-weight: 700; color: var(--dm-text-muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }
/* Highlight card — red gradient like screenshot */
.dmd-highlight {
background: linear-gradient(135deg, #E60023 0%, #9B0016 55%, #5A4BD1 100%);
border-radius: var(--dm-radius); padding: 22px 24px;
color: #fff; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(230,0,35,.28);
}
.dmd-highlight-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; opacity: .8; margin-bottom: 8px; }
.dmd-highlight-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
.dmd-highlight-count { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.dmd-highlight-link { color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; font-weight: 700; }
.dmd-highlight-link:hover { color: #fff; text-decoration: underline; }
/* Recent posts header */
.dmd-recent { margin-top: 4px; }
.dmd-recent-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.dmd-recent-title { font-size: 18px; font-weight: 800; color: var(--dm-text); margin: 0; }
.dmd-recent-tabs { display: flex; gap: 6px; }
.dmd-rec-tab {
padding: 6px 14px; border-radius: var(--dm-radius-pill);
border: 1.5px solid var(--dm-border); background: var(--dm-surface);
font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--dm-font);
color: var(--dm-text-secondary); transition: all .18s;
}
.dmd-rec-tab:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dmd-rec-tab.active { background: var(--dm-text); border-color: var(--dm-text); color: #fff; }
/* Post cards grid */
.dmd-posts-grid { columns: 3; column-gap: 14px; }
@media (max-width: 900px) { .dmd-posts-grid { columns: 2; } }
@media (max-width: 480px) { .dmd-posts-grid { columns: 2; column-gap: 8px; } }
.dmd-post-card {
break-inside: avoid; background: var(--dm-surface); border-radius: var(--dm-radius);
overflow: hidden; margin-bottom: 14px; box-shadow: var(--dm-shadow);
border: 1px solid var(--dm-border); transition: transform .2s, box-shadow .2s;
}
.dmd-post-card:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md); }
.dmd-post-img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 16/9; }
.dmd-post-img-placeholder { width: 100%; aspect-ratio: 16/9; background: var(--dm-bg); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.dmd-post-body { padding: 12px; }
.dmd-post-title { font-size: 13px; font-weight: 700; color: var(--dm-text); margin-bottom: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dmd-post-excerpt { font-size: 12px; color: var(--dm-text-secondary); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dmd-post-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dmd-post-date { font-size: 11px; color: var(--dm-text-muted); }
.dmd-status-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 20px; }
.dmd-status-publish { background: #dcfce7; color: #166534; }
.dmd-status-draft { background: #fef3c7; color: #92400e; }
.dmd-status-pending { background: var(--dm-primary-light); color: var(--dm-primary); }
.dmd-post-actions { display: flex; gap: 6px; }
.dmd-pa-btn {
display: inline-flex; align-items: center; padding: 5px 12px;
border-radius: var(--dm-radius-xs); font-size: 11px; font-weight: 700;
border: 1.5px solid var(--dm-border); background: var(--dm-surface);
color: var(--dm-text); cursor: pointer; text-decoration: none;
font-family: var(--dm-font); transition: all .15s;
}
.dmd-pa-btn:hover { border-color: var(--dm-text); color: var(--dm-text); background: var(--dm-bg); }
.dmd-pa-delete { color: var(--dm-danger); }
.dmd-pa-delete:hover { border-color: var(--dm-danger); background: rgba(239,68,68,.08); color: var(--dm-danger); }
.dmd-empty-posts { text-align: center; padding: 48px 24px; color: var(--dm-text-muted); }
.dmd-empty-posts a { color: var(--dm-primary); font-weight: 700; }
/* Notification items */
.dmd-notif-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dmd-mark-read-btn { background: none; border: 1.5px solid var(--dm-border); border-radius: var(--dm-radius-pill); padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--dm-font); color: var(--dm-text-secondary); transition: all .18s; }
.dmd-mark-read-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dmd-notif-item { padding: 14px 0; border-bottom: 1px solid var(--dm-border-light); }
.dmd-notif-unread .dmd-notif-text { font-weight: 700; }
.dmd-notif-unread { background: var(--dm-primary-light); margin: 0 -4px; padding: 14px 4px; border-radius: var(--dm-radius-xs); }
.dmd-notif-text { font-size: 14px; color: var(--dm-text); margin-bottom: 4px; }
.dmd-notif-meta { font-size: 12px; color: var(--dm-text-muted); }
.dmd-notif-lnk { color: var(--dm-primary); font-weight: 700; text-decoration: none; }
/* Profile form */
.dmd-profile-wrap { max-width: 600px; }
.dmd-avatar-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
.dmd-avatar-ring { position: relative; display: inline-block; }
.dmd-avatar-large { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; display: block; border: 3px solid var(--dm-primary); }
.dmd-avatar-cam {
position: absolute; bottom: 2px; right: 2px;
width: 28px; height: 28px; border-radius: 50%;
background: var(--dm-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 2px 8px rgba(230,0,35,.3);
transition: background .18s;
}
.dmd-avatar-cam:hover { background: var(--dm-primary-hover); }
.dmd-avatar-msg { font-size: 13px; font-weight: 600; margin-top: 8px; min-height: 18px; }
.dmd-profile-form { display: flex; flex-direction: column; gap: 18px; }
.dmd-pf-group { display: flex; flex-direction: column; gap: 6px; }
.dmd-pf-group label { font-size: 13px; font-weight: 700; color: var(--dm-text); }
.dmd-input {
padding: 12px 14px; border: 1.5px solid var(--dm-border);
border-radius: var(--dm-radius-sm); font-size: 15px; font-family: var(--dm-font);
color: var(--dm-text); background: var(--dm-surface); outline: none;
transition: border-color .2s, box-shadow .2s; width: 100%; box-sizing: border-box;
}
.dmd-input:focus { border-color: var(--dm-primary); box-shadow: 0 0 0 3px rgba(230,0,35,.08); }
.dmd-input:disabled { background: var(--dm-bg); color: var(--dm-text-muted); cursor: not-allowed; }
.dmd-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.dmd-pf-divider { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--dm-text-muted); border-top: 1px solid var(--dm-border); padding-top: 16px; margin-top: 4px; }
.dmd-pf-actions { padding-top: 4px; }
.dmd-save-btn {
background: var(--dm-primary); color: #fff; border: none;
border-radius: var(--dm-radius-sm); padding: 12px 28px;
font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--dm-font);
box-shadow: 0 2px 10px rgba(230,0,35,.22); transition: background .18s;
}
.dmd-save-btn:hover { background: var(--dm-primary-hover); }
.dmd-msg { font-size: 13px; font-weight: 600; margin-top: 10px; min-height: 18px; }
.dmd-msg-success { color: var(--dm-success); }
.dmd-msg-error { color: var(--dm-danger); }
/* Danger zone */
.dmd-danger-zone { margin-top: 32px; padding: 20px; border: 1.5px solid #fca5a5; border-radius: var(--dm-radius); background: #fff1f2; }
.dmd-danger-zone h3 { font-size: 15px; font-weight: 800; color: var(--dm-danger); margin: 0 0 12px; }
.dmd-logout-trigger-btn { background: none; border: 1.5px solid var(--dm-danger); border-radius: var(--dm-radius-sm); padding: 10px 20px; font-size: 14px; font-weight: 700; color: var(--dm-danger); cursor: pointer; font-family: var(--dm-font); transition: background .18s; }
.dmd-logout-trigger-btn:hover { background: var(--dm-danger); color: #fff; }
/* Preferences toggles */
.dmd-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--dm-border-light); }
.dmd-pref-row strong { display: block; font-size: 14px; font-weight: 700; color: var(--dm-text); margin-bottom: 4px; }
.dmd-pref-row p { font-size: 13px; color: var(--dm-text-muted); margin: 0; }
.dmd-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.dmd-toggle input { opacity: 0; width: 0; height: 0; }
.dmd-toggle-slider {
position: absolute; cursor: pointer; inset: 0;
background: var(--dm-border); border-radius: 12px; transition: background .2s;
}
.dmd-toggle-slider::after {
content: ''; position: absolute; left: 3px; top: 3px;
width: 18px; height: 18px; border-radius: 50%; background: #fff;
transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.dmd-toggle input:checked + .dmd-toggle-slider { background: var(--dm-primary); }
.dmd-toggle input:checked + .dmd-toggle-slider::after { transform: translateX(20px); }
/* ═══════════════════════════════════════════════════════════════════════════
AUTH PAGES — Login & Register (exact match to screenshots 2 & 3)
═══════════════════════════════════════════════════════════════════════════ */
.dm-auth-page {
min-height: calc(100vh - var(--dm-header-h));
display: flex; align-items: center; justify-content: center;
padding: 32px 16px;
background: radial-gradient(ellipse 80% 60% at 15% 20%, rgba(230,0,35,.07) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 85% 80%, rgba(230,0,35,.05) 0%, transparent 60%),
var(--dm-bg);
}
.dm-auth-card {
background: var(--dm-surface);
border-radius: 18px;
box-shadow: 0 4px 32px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
padding: 44px 40px 36px;
width: 100%; max-width: 440px;
position: relative; z-index: 1;
animation: dm-card-in .3s cubic-bezier(0,0,.2,1) both;
}
@keyframes dm-card-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 480px) { .dm-auth-card { padding: 32px 22px 28px; border-radius: 12px; } }
/* Heading */
.dm-auth-heading {
font-size: 26px; font-weight: 800; color: var(--dm-text);
margin: 0 0 6px; text-align: center; letter-spacing: -.4px;
}
.dm-auth-sub {
font-size: 15px; color: var(--dm-text-secondary);
text-align: center; margin: 0 0 26px; line-height: 1.5;
}
/* Google button */
.dm-google-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 13px 20px;
border: 1.5px solid var(--dm-border); border-radius: var(--dm-radius-sm);
background: var(--dm-surface); color: var(--dm-text);
font-size: 15px; font-weight: 600; text-decoration: none;
font-family: var(--dm-font); cursor: pointer;
transition: border-color .2s, box-shadow .2s, background .2s;
margin-bottom: 20px;
}
.dm-google-btn:hover {
border-color: #4285F4; background: #f0f6ff;
box-shadow: 0 2px 10px rgba(66,133,244,.14); color: var(--dm-text);
}
/* Divider */
.dm-auth-divider-line {
display: flex; align-items: center; gap: 10px;
margin: 0 0 20px; color: var(--dm-text-muted);
font-size: 13px; font-weight: 500;
}
.dm-auth-divider-line::before, .dm-auth-divider-line::after {
content: ''; flex: 1; height: 1px; background: var(--dm-border);
}
.dm-auth-divider-line span { flex-shrink: 0; color: var(--dm-text-muted); }
/* Flash messages */
.dm-auth-msg {
padding: 11px 16px; border-radius: var(--dm-radius-xs);
font-size: 14px; font-weight: 600; margin-bottom: 18px; line-height: 1.5;
text-align: center;
}
.dm-auth-msg-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.dm-auth-msg-error { background: #fff1f2; color: #9f1239; border: 1px solid #fecaca; }
/* Fields */
.dm-auth-field { margin-bottom: 18px; }
.dm-auth-label {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--dm-text); margin-bottom: 7px;
}
.dm-auth-label-req { color: var(--dm-primary); }
.dm-captcha-q {
font-size: 11px; font-weight: 800; color: var(--dm-primary);
text-transform: uppercase; letter-spacing: .06em;
}
.dm-auth-input {
width: 100%; padding: 14px 16px;
border: 1.5px solid #e8e8e8; border-radius: var(--dm-radius-sm);
background: #f9f9f9; color: var(--dm-text);
font-size: 15px; font-family: var(--dm-font); outline: none;
transition: border-color .2s, background .2s, box-shadow .2s;
box-sizing: border-box;
}
.dm-auth-input::placeholder { color: #b0b0b0; }
.dm-auth-input:focus {
border-color: var(--dm-primary); background: var(--dm-surface);
box-shadow: 0 0 0 3px rgba(230,0,35,.08);
}
/* Password wrapper */
.dm-auth-pw-wrap { position: relative; display: flex; align-items: center; }
.dm-auth-pw-wrap .dm-auth-input { padding-right: 48px; }
.dm-auth-pw-eye {
position: absolute; right: 14px; background: none; border: none;
cursor: pointer; color: var(--dm-text-muted); padding: 4px;
display: flex; align-items: center; transition: color .18s;
}
.dm-auth-pw-eye:hover { color: var(--dm-text); }
/* Username availability hints */
.dm-field-hint-msg { display: block; font-size: 12px; font-weight: 600; margin-top: 5px; min-height: 16px; }
.dm-hint-ok { color: var(--dm-success); }
.dm-hint-err { color: var(--dm-danger); }
/* Small hint text */
.dm-auth-hint-small { display: block; font-size: 12px; color: var(--dm-text-muted); margin-top: 5px; }
/* Submit button */
.dm-auth-submit {
display: block; width: 100%; padding: 15px;
background: var(--dm-primary); color: #fff; border: none;
border-radius: var(--dm-radius-sm); font-size: 16px; font-weight: 700;
cursor: pointer; font-family: var(--dm-font); margin-top: 6px;
box-shadow: 0 3px 14px rgba(230,0,35,.28);
transition: background .18s, box-shadow .18s, transform .18s;
letter-spacing: -.1px;
}
.dm-auth-submit:hover {
background: var(--dm-primary-hover);
box-shadow: 0 6px 20px rgba(230,0,35,.38);
transform: translateY(-1px);
}
.dm-auth-submit:active { transform: scale(.98); }
.dm-auth-submit:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
/* Forgot / footer links */
.dm-auth-forgot {
display: block; text-align: center; margin: 16px 0 4px;
font-size: 14px; font-weight: 700; color: var(--dm-primary); text-decoration: none;
transition: opacity .18s;
}
.dm-auth-forgot:hover { opacity: .75; }
.dm-auth-footer-text {
text-align: center; font-size: 14px; color: var(--dm-text-secondary);
margin: 8px 0 0;
}
.dm-auth-footer-link { color: var(--dm-primary); font-weight: 700; text-decoration: none; }
.dm-auth-footer-link:hover { text-decoration: underline; }
/* Register success box */
.dm-reg-success-box {
text-align: center; padding: 12px 0 8px;
}
.dm-reg-success-icon { font-size: 40px; margin-bottom: 14px; display: block; }
.dm-reg-success-box h3 { font-size: 20px; font-weight: 800; color: var(--dm-text); margin: 0 0 10px; }
.dm-reg-success-box p { font-size: 14px; color: var(--dm-text-secondary); line-height: 1.6; }
/* ── Single post: primary action row (Copy + Open Tool truly side by side) ── */
.dm-primary-actions {
display: flex;
align-items: stretch;
gap: 10px;
margin: 16px 0 12px;
flex-wrap: nowrap; /* NEVER wrap — force side by side */
}
/* Override base dm-copy-btn styles inside this row */
.dm-primary-actions .dm-copy-btn {
flex: 1 1 auto;
min-width: 0;
margin-bottom: 0 !important; /* kill base margin */
border-radius: var(--dm-radius-pill) !important;
justify-content: center;
padding: 12px 24px;
}
.dm-tool-open-btn {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 8px;
background: var(--dm-surface); color: var(--dm-text);
border: 1.5px solid var(--dm-border);
border-radius: var(--dm-radius-pill);
padding: 12px 20px;
font-size: 14px; font-weight: 600;
text-decoration: none; white-space: nowrap;
transition: var(--dm-transition);
font-family: var(--dm-font);
cursor: pointer;
}
.dm-tool-open-btn:hover {
border-color: var(--dm-primary);
color: var(--dm-primary);
background: var(--dm-primary-light);
}
.dm-tool-open-btn-icon {
width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
object-fit: contain;
}
/* ── Secondary actions: Like, Save, Share all on one row ─────────────────── */
.dm-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
margin: 0 0 16px;
}
.dm-actions .dm-like-btn {
display: inline-flex; align-items: center; gap: 6px;
}
.dm-actions .dm-like-count {
font-size: 12px; color: var(--dm-text-muted); font-weight: 600;
}
/* ── Stats row labels uppercase like screenshot ──────────────────────────── */
.dm-stat-label { text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
/* ═══════════════════════════════════════════════════════════════════════════
HERO V2 — Dark SaaS Hero (always dark, screen-optimised)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Section shell ── */
.dm-hero.dm-hero-v2 {
position: relative;
overflow: hidden;
padding: 84px 24px 80px;
background: #060606;
border-bottom: 1px solid rgba(255,255,255,0.05);
min-height: 680px;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Red radial glow — bottom centre (the signature effect) ── */
.dmhv2-glow-bottom {
position: absolute;
bottom: -120px;
left: 50%;
transform: translateX(-50%);
width: 1000px;
height: 480px;
background: radial-gradient(ellipse, rgba(230,0,35,.42) 0%, rgba(230,0,35,.20) 30%, rgba(230,0,35,.06) 60%, transparent 75%);
pointer-events: none;
z-index: 0;
border-radius: 50%;
}
/* ── Top-right accent glow ── */
.dmhv2-glow-tr {
position: absolute;
top: -60px;
right: -80px;
width: 380px;
height: 380px;
background: radial-gradient(circle at top right, rgba(230,0,35,.12) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
/* ── Sparkle stars ── */
.dmhv2-star {
position: absolute;
pointer-events: none;
z-index: 1;
color: rgba(255,255,255,.3);
font-size: 16px;
line-height: 1;
animation: dmhv2-twinkle 3.2s ease-in-out infinite;
}
.dmhv2-star::before { content: '✦'; }
.dmhv2-star--sm { font-size: 9px; opacity: .4; }
.dmhv2-star--lg { font-size: 22px; opacity: .25; }
@keyframes dmhv2-twinkle {
0%, 100% { opacity: .15; transform: scale(1) rotate(0deg); }
50% { opacity: .65; transform: scale(1.2) rotate(15deg); }
}
/* ══ FLOATING CARDS ════════════════════════════════════════════════════════ */
.dmhv2-float {
position: absolute;
z-index: 2;
background: rgba(18,18,18,.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 18px 18px 14px;
width: 218px;
box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
display: flex;
flex-direction: column;
gap: 10px;
}
/* Positions */
.dmhv2-float--tl {
top: 80px;
left: max(20px, calc(50% - 580px));
transform: rotate(-8deg);
animation: dmhv2-bob-tl 6s ease-in-out infinite;
}
.dmhv2-float--tr {
top: 56px;
right: max(20px, calc(50% - 580px));
transform: rotate(6deg);
animation: dmhv2-bob-tr 7s ease-in-out infinite;
}
.dmhv2-float--bl {
bottom: 120px;
left: max(8px, calc(50% - 610px));
transform: rotate(-5deg);
opacity: .5;
animation: dmhv2-bob-bl 8s ease-in-out infinite;
}
.dmhv2-float--br {
bottom: 100px;
right: max(8px, calc(50% - 610px));
transform: rotate(4deg);
animation: dmhv2-bob-br 6.5s ease-in-out infinite;
}
@keyframes dmhv2-bob-tl { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-9px); } }
@keyframes dmhv2-bob-tr { 0%,100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(5.5deg) translateY(-11px); } }
@keyframes dmhv2-bob-bl { 0%,100% { transform: rotate(-5deg) translateY(0);opacity:.5; } 50% { transform: rotate(-4.5deg) translateY(-7px);opacity:.55; } }
@keyframes dmhv2-bob-br { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(3.5deg) translateY(-10px); } }
/* Card internals */
.dmhv2-float-head { display: flex; align-items: center; gap: 10px; }
.dmhv2-float-icon {
width: 32px; height: 32px; border-radius: 8px;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.dmhv2-float-icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
.dmhv2-float-name { font-size: 13px; font-weight: 700; color: #f4f4f5; font-family: var(--dm-font); line-height: 1.2; }
.dmhv2-float-text { font-size: 12px; color: #71717a; line-height: 1.55; font-family: var(--dm-font); margin: 0; }
.dmhv2-float-foot { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #71717a; font-family: var(--dm-font); }
.dmhv2-float-foot svg { flex-shrink: 0; }
/* Hide floats below 1220px — they'd overlap content */
@media (max-width: 1220px) { .dmhv2-float { display: none !important; } }
/* ══ INNER CONTENT ════════════════════════════════════════════════════════ */
.dmhv2-inner {
position: relative;
z-index: 3;
max-width: 700px;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
/* ── Badge ── */
.dmhv2-badge {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(230,0,35,.08);
border: 1px solid rgba(230,0,35,.32);
border-radius: 999px;
padding: 7px 20px;
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
color: #E60023;
margin-bottom: 28px;
font-family: var(--dm-font);
text-transform: uppercase;
}
.dmhv2-badge-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #E60023;
flex-shrink: 0;
animation: dm-pulse 2.2s ease-in-out infinite;
}
/* ── Headline ── */
.dmhv2-title {
font-size: 62px;
font-weight: 900;
color: #ffffff;
line-height: 1.06;
letter-spacing: -2px;
margin: 0 0 22px;
font-family: var(--dm-font);
}
.dmhv2-accent {
background: linear-gradient(130deg, #E60023 0%, #ff4466 45%, #E60023 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: dm-gradient-shift 4s linear infinite;
font-weight: 900;
white-space: nowrap;
display: inline-block;
}
/* ── Subtitle ── */
.dmhv2-sub {
font-size: 17px;
color: #71717a;
line-height: 1.7;
margin: 0 0 36px;
max-width: 560px;
font-family: var(--dm-font);
}
.dmhv2-br-hide { display: inline; }
/* ── Search bar ── */
.dmhv2-search-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 660px;
margin-bottom: 20px;
background: #0f0f0f;
border: 1.5px solid rgba(255,255,255,.10);
border-radius: 999px;
transition: border-color .2s, box-shadow .2s;
box-shadow: 0 0 0 1px rgba(230,0,35,.06), 0 4px 28px rgba(0,0,0,.45);
}
.dmhv2-search-wrap:focus-within {
border-color: rgba(230,0,35,.45);
box-shadow: 0 0 0 3px rgba(230,0,35,.10), 0 6px 32px rgba(0,0,0,.5);
}
.dmhv2-search-icon {
position: absolute;
left: 22px;
color: #52525b;
pointer-events: none;
flex-shrink: 0;
z-index: 1;
}
.dmhv2-search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 20px 150px 20px 58px;
font-size: 15px;
color: #f4f4f5;
font-family: var(--dm-font);
width: 100%;
caret-color: #E60023;
}
.dmhv2-search-input::placeholder { color: #3f3f46; }
.dmhv2-search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: #E60023;
color: #fff;
border: none;
border-radius: 999px;
padding: 12px 30px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
font-family: var(--dm-font);
transition: background .2s, box-shadow .2s, transform .15s;
box-shadow: 0 2px 14px rgba(230,0,35,.45);
white-space: nowrap;
letter-spacing: -.1px;
}
.dmhv2-search-btn:hover { background: #CC001F; box-shadow: 0 4px 20px rgba(230,0,35,.60); transform: translateY(-50%) scale(1.02); }
.dmhv2-search-btn:active { transform: translateY(-50%) scale(.97); }
/* ── Trending ── */
.dmhv2-trending {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 52px;
}
.dmhv2-trending-label {
font-size: 13px;
font-weight: 600;
color: #52525b;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
font-family: var(--dm-font);
}
.dmhv2-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
border-radius: 999px;
padding: 6px 16px;
font-size: 13px;
font-weight: 600;
color: #a1a1aa;
cursor: pointer;
font-family: var(--dm-font);
text-decoration: none;
transition: background .18s, border-color .18s, color .18s, transform .15s;
white-space: nowrap;
}
.dmhv2-tag:hover {
background: rgba(230,0,35,.09);
border-color: rgba(230,0,35,.32);
color: #E60023;
transform: translateY(-1px);
}
.dmhv2-tag-icon { font-size: 13px; flex-shrink: 0; }
/* ── Stats strip ── */
.dmhv2-stats {
display: flex;
align-items: stretch;
width: 100%;
max-width: 660px;
background: rgba(12,12,12,.92);
border: 1px solid rgba(255,255,255,.07);
border-radius: 18px;
overflow: hidden;
margin-bottom: 32px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 6px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.dmhv2-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 22px 20px;
flex: 1;
border-right: 1px solid rgba(255,255,255,.06);
transition: background .2s;
}
.dmhv2-stat:last-child { border-right: none; }
.dmhv2-stat:hover { background: rgba(255,255,255,.02); }
.dmhv2-stat-icon {
width: 42px; height: 42px;
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.dmhv2-stat-icon--red { background: rgba(230,0,35,.16); }
.dmhv2-stat-icon--orange { background: rgba(251,146,60,.14); }
.dmhv2-stat-icon--yellow { background: rgba(234,179,8,.14); }
.dmhv2-stat-body { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.dmhv2-stat-val { font-size: 21px; font-weight: 800; color: #f4f4f5; letter-spacing: -.5px; line-height: 1; font-family: var(--dm-font); display: block; }
.dmhv2-stat-lbl { font-size: 10px; font-weight: 700; color: #52525b; text-transform: uppercase; letter-spacing: .09em; font-family: var(--dm-font); white-space: nowrap; }
/* ── Social proof ── */
.dmhv2-proof {
display: flex;
align-items: center;
gap: 14px;
justify-content: center;
}
.dmhv2-avatars {
display: flex;
align-items: center;
flex-shrink: 0;
}
.dmhv2-avatar {
width: 36px; height: 36px;
border-radius: 50%;
border: 2.5px solid #060606;
margin-left: -10px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: #fff;
flex-shrink: 0;
font-family: var(--dm-font);
}
.dmhv2-avatars .dmhv2-avatar:first-child { margin-left: 0; }
.dmhv2-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.dmhv2-avatar-more {
width: 36px; height: 36px;
border-radius: 50%;
border: 2.5px solid #060606;
margin-left: -10px;
background: #E60023;
color: #fff;
font-size: 10px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-family: var(--dm-font);
letter-spacing: -.2px;
}
.dmhv2-proof-text {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.dmhv2-proof-main { font-size: 14px; font-weight: 600; color: #a1a1aa; font-family: var(--dm-font); line-height: 1.3; }
.dmhv2-proof-main strong { color: #f4f4f5; font-weight: 800; }
.dmhv2-proof-sub { font-size: 12px; color: #3f3f46; font-family: var(--dm-font); }
/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.dmhv2-title { font-size: 42px; letter-spacing: -1px; }
.dmhv2-accent { white-space: nowrap; }
.dm-hero.dm-hero-v2 { padding: 60px 20px 60px; }
.dmhv2-stats { flex-wrap: wrap; }
.dmhv2-stat { min-width: 50%; border-bottom: 1px solid rgba(255,255,255,.06); }
.dmhv2-stat:nth-child(2) { border-right: none; }
.dmhv2-stat:nth-child(3), .dmhv2-stat:nth-child(4) { border-bottom: none; }
}
@media (max-width: 640px) {
.dmhv2-title { font-size: 24px; letter-spacing: -.3px; word-break: normal; overflow-wrap: normal; line-height: 1.15; }
.dmhv2-accent { white-space: nowrap !important; font-size: inherit; }
.dmhv2-sub { font-size: 15px; }
.dm-hero.dm-hero-v2 { padding: 48px 16px 52px; min-height: auto; }
.dmhv2-search-input { padding: 18px 130px 18px 52px; font-size: 14px; }
.dmhv2-search-btn { padding: 10px 22px; font-size: 14px; }
.dmhv2-stats { display: none !important; }
.dmhv2-stat { width: 100%; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.dmhv2-stat:last-child { border-bottom: none !important; }
.dmhv2-trending { gap: 6px; }
.dmhv2-br-hide { display: none; }
.dmhv2-proof { flex-direction: column; gap: 10px; text-align: center; }
.dmhv2-proof-text { text-align: center; }
}
@media (max-width: 768px) {
/* Hero stays visible on mobile (override old hide) */
.dm-hero.dm-hero-v2 { display: flex !important; }
}
/* ── Dark mode: hero overrides (these are irrelevant — hero is always dark) */
[data-theme="dark"] .dm-hero.dm-hero-v2,
[data-theme="dark"] .dm-hero-v2 { background: #060606 !important; }
/* ═══════════════════════════════════════════════════════════════════════════
DARK MODE — full variable override on [data-theme="dark"]
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
--dm-bg: #0f0f10;
--dm-surface: #1a1a1c;
--dm-text: #f4f4f5;
--dm-text-secondary: #a1a1aa;
--dm-text-muted: #71717a;
--dm-border: #27272a;
--dm-border-light: #1f1f22;
--dm-primary-light: rgba(230,0,35,.15);
--dm-primary-mid: rgba(230,0,35,.35);
--dm-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
--dm-shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
--dm-shadow-lg: 0 8px 24px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.3);
--dm-shadow-xl: 0 24px 48px rgba(0,0,0,.65), 0 8px 16px rgba(0,0,0,.4);
--dm-nav-pill: #18181b; /* mobile nav pill background — dark mode */
}
/* System dark mode fallback */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--dm-bg: #0f0f10;
--dm-surface: #1a1a1c;
--dm-text: #f4f4f5;
--dm-text-secondary: #a1a1aa;
--dm-text-muted: #71717a;
--dm-border: #27272a;
--dm-border-light: #1f1f22;
--dm-primary-light: rgba(230,0,35,.15);
--dm-primary-mid: rgba(230,0,35,.35);
}
}
/* ── Dark: general components ──────────────────────────────────────────── */
[data-theme="dark"] body { background: #0f0f10; color: #f4f4f5; }
[data-theme="dark"] .dm-feed-header {
background: rgba(18,18,20,.94) !important;
backdrop-filter: blur(20px) !important;
border-bottom-color: #27272a !important;
}
[data-theme="dark"] .dm-search-field {
background: #27272a; border-color: #3f3f46; color: #f4f4f5;
}
[data-theme="dark"] .dm-search-field:focus {
background: #2d2d30; border-color: var(--dm-primary);
}
[data-theme="dark"] .dm-search-field::placeholder { color: #52525b; }
[data-theme="dark"] .dm4-user-drop {
background: #1a1a1c; border-color: #27272a;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
[data-theme="dark"] .dm4-drop-item:hover { background: #27272a; }
[data-theme="dark"] .dm4-drop-user { border-bottom-color: #27272a; }
[data-theme="dark"] .dm-card {
background: #1a1a1c;
box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
}
[data-theme="dark"] .dm-card:hover {
box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="dark"] .dm-card-img-wrap { background: #27272a; }
[data-theme="dark"] .dm4-card-placeholder { background: linear-gradient(145deg,#27272a,#1f1f21); }
[data-theme="dark"] .dm-card-badge { background: rgba(15,15,15,.88); color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
[data-theme="dark"] .dm-card-badge--cat { color: #fff !important; background: rgba(15,15,15,.88) !important; }
[data-theme="dark"] .dm-cat-btn {
background: #1a1a1c; border-color: #27272a; color: #a1a1aa;
}
[data-theme="dark"] .dm-cat-btn.active { background: #f4f4f5; color: #0f0f10; border-color: #f4f4f5; }
[data-theme="dark"] .dm-categories { background: #1a1a1c; border-bottom-color: #27272a; }
/* ── Dark: hero ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .dm-hero {
background:
radial-gradient(ellipse 55% 80% at 92% 8%, rgba(230,0,35,.15) 0%, transparent 55%),
radial-gradient(ellipse 45% 55% at 8% 92%, rgba(230,0,35,.12) 0%, transparent 50%),
#0f0f10;
}
[data-theme="dark"] .dm-hero-tool-chip {
background: #1a1a1c; border-color: #27272a; color: #a1a1aa;
}
[data-theme="dark"] .dm-hero-tool-icon { filter: brightness(1.4) saturate(0.8); }
[data-theme="dark"] .dm-hero-stats-strip { border-top-color: #27272a; }
[data-theme="dark"] .dm-hero-stat { border-right-color: #27272a; }
[data-theme="dark"] .dm-hero-stat-icon { background: rgba(230,0,35,.18); }
/* ── Dark: single prompt page (THE FIX for invisible text) ─────────────── */
[data-theme="dark"] .dm-prompt-box {
background: #27272a !important;
color: #f4f4f5 !important;
border-color: #3f3f46 !important;
border-left-color: var(--dm-primary) !important;
}
[data-theme="dark"] .dm-prompt-box::-webkit-scrollbar-thumb { background: #4f4f55; }
[data-theme="dark"] .dm-title { color: #f4f4f5; }
[data-theme="dark"] .dm-single-wrapper { background: #0f0f10; }
[data-theme="dark"] .dm-tool-card { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dm-tool-card-name { color: #f4f4f5; }
[data-theme="dark"] .dm-stats { border-top-color: #27272a; color: #71717a; }
[data-theme="dark"] .dm-stat-value { color: #f4f4f5; }
[data-theme="dark"] .author { border-top-color: #27272a; }
[data-theme="dark"] .prompt-tag { background: #27272a; color: #a1a1aa; }
[data-theme="dark"] .dm4-similar-card { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dmsp-panel { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dmsp-item { background: #1a1a1c; border-color: #27272a; color: #a1a1aa; }
/* ── Dark: buttons ──────────────────────────────────────────────────────── */
[data-theme="dark"] .dm-btn {
background: #27272a; border-color: #3f3f46; color: #f4f4f5;
}
[data-theme="dark"] .dm-btn:hover { border-color: #71717a; }
[data-theme="dark"] .dm-load-btn {
background: #1a1a1c; border-color: #27272a; color: #f4f4f5;
}
/* ── Dark: auth pages ───────────────────────────────────────────────────── */
[data-theme="dark"] .dm-auth-page, [data-theme="dark"] .dm-auth-wrap {
background: radial-gradient(ellipse 80% 60% at 15% 20%, rgba(230,0,35,.12) 0%, transparent 60%),
radial-gradient(ellipse 70% 50% at 85% 80%, rgba(230,0,35,.08) 0%, transparent 60%),
#0f0f10;
}
[data-theme="dark"] .dm-auth-card {
background: #1a1a1c; border-color: #27272a;
box-shadow: 0 4px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] .dm-auth-input, [data-theme="dark"] .dm-auth-heading { color: #f4f4f5; }
[data-theme="dark"] .dm-auth-input {
background: #27272a; border-color: #3f3f46; color: #f4f4f5;
}
[data-theme="dark"] .dm-auth-input:focus { background: #2d2d30; border-color: var(--dm-primary); }
[data-theme="dark"] .dm-auth-input::placeholder { color: #52525b; }
[data-theme="dark"] .dm-google-btn, [data-theme="dark"] .dm-btn-google {
background: #27272a; border-color: #3f3f46; color: #f4f4f5;
}
[data-theme="dark"] .dm-auth-divider-line::before,
[data-theme="dark"] .dm-auth-divider-line::after,
[data-theme="dark"] .dm-auth-divider::before,
[data-theme="dark"] .dm-auth-divider::after { background: #27272a; }
/* ── Dark: dashboard ────────────────────────────────────────────────────── */
[data-theme="dark"] .dmd-wrap { background: #0f0f10; }
[data-theme="dark"] .dmd-sidebar { background: #1a1a1c; border-right-color: #27272a; }
[data-theme="dark"] .dmd-user-card { border-bottom-color: #27272a; }
[data-theme="dark"] .dmd-nav-item:hover { background: #27272a; }
[data-theme="dark"] .dmd-nav-item.active { background: rgba(230,0,35,.12); }
[data-theme="dark"] .dmd-nav-icon { background: #27272a; }
[data-theme="dark"] .dmd-topbar {
background: rgba(18,18,20,.97) !important;
border-bottom-color: #27272a !important;
}
[data-theme="dark"] .dmd-stat-card { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dmd-post-card { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dmd-post-body { background: #1a1a1c; }
[data-theme="dark"] .dmd-post-title { color: #f4f4f5; }
[data-theme="dark"] .dmd-input {
background: #27272a; border-color: #3f3f46; color: #f4f4f5;
}
[data-theme="dark"] .dmd-input::placeholder { color: #52525b; }
[data-theme="dark"] .dmd-input:focus { border-color: var(--dm-primary); background: #2d2d30; }
[data-theme="dark"] .dmd-bell-drop { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dmd-bell-drop-header { border-bottom-color: #27272a; color: #f4f4f5; }
[data-theme="dark"] .dmd-bell-empty { color: #71717a; }
/* ── Dark: search/filter pages ──────────────────────────────────────────── */
[data-theme="dark"] .dmsr-mob-search-bar { background: #1a1a1c; border-bottom-color: #27272a; }
[data-theme="dark"] .dmsr-mob-search-inner { background: #27272a; border-color: #3f3f46; }
[data-theme="dark"] .dmsr-mob-input { color: #f4f4f5; }
[data-theme="dark"] .dmsr-banner { background: #1a1a1c; border-bottom-color: #27272a; }
[data-theme="dark"] .dmsr-banner-left { color: #f4f4f5; }
/* ── Dark: leaderboard ──────────────────────────────────────────────────── */
/* leaderboard dark-mode handled below in dml- dark block */
/* ── Dark: modals ───────────────────────────────────────────────────────── */
[data-theme="dark"] .dm-logout-modal-box { background: #1a1a1c !important; }
[data-theme="dark"] .dm-logout-modal-title { color: #f4f4f5 !important; }
[data-theme="dark"] .dm-logout-modal-desc { color: #a1a1aa !important; }
[data-theme="dark"] .dm-logout-cancel { background: #27272a !important; border-color: #3f3f46 !important; color: #f4f4f5 !important; }
/* ── Dark: mobile nav ───────────────────────────────────────────────────── */
[data-theme="dark"] #dm4-mobnav {
background: #1c1c1e !important;
box-shadow:
0 8px 32px rgba(0,0,0,.45),
0 2px 8px rgba(0,0,0,.3),
0 0 0 1px rgba(255,255,255,.04) !important;
}
[data-theme="dark"] #dm4-mobnav .mbn-item { color: rgba(255,255,255,0.38); }
[data-theme="dark"] #dm4-mobnav .mbn-item.active { color: var(--dm-primary); }
/* Icon must remain visible in active state — do NOT hide it */
[data-theme="dark"] #dm4-mobnav .mbn-item.active .mbn-icon { opacity: 1 !important; transform: translateY(-1px) !important; stroke: var(--dm-primary) !important; }
[data-theme="dark"] #dm4-mobnav .mbn-item.active .mbn-lbl { font-weight: 700 !important; opacity: 1 !important; color: var(--dm-primary) !important; }
[data-theme="dark"] #dm4-mobnav .mbn-item .mbn-icon { stroke: currentColor !important; }
[data-theme="dark"] #dm4-mobnav .mbn-fab { border-color: #1c1c1e !important; }
/* ── Dark: add-prompt form ──────────────────────────────────────────────── */
[data-theme="dark"] .dmap-page { background: #0f0f10; }
[data-theme="dark"] .dmap-dropzone { background: #1a1a1c; border-color: #3f3f46; }
[data-theme="dark"] .dmap-drop-main { color: #a1a1aa; }
[data-theme="dark"] .dmap-input,
[data-theme="dark"] .dmap-select,
[data-theme="dark"] .dmap-textarea {
background: #27272a !important;
background-color: #27272a !important;
border-color: #3f3f46 !important;
color: #f4f4f5 !important;
-webkit-text-fill-color: #f4f4f5 !important;
caret-color: #f4f4f5 !important;
color-scheme: dark;
}
[data-theme="dark"] .dmap-input::placeholder,
[data-theme="dark"] .dmap-textarea::placeholder { color: #52525b !important; -webkit-text-fill-color: #52525b !important; }
[data-theme="dark"] .dmap-input:focus,
[data-theme="dark"] .dmap-select:focus,
[data-theme="dark"] .dmap-textarea:focus {
background: #2d2d30 !important;
background-color: #2d2d30 !important;
border-color: var(--dm-primary) !important;
color: #f4f4f5 !important;
-webkit-text-fill-color: #f4f4f5 !important;
caret-color: #f4f4f5 !important;
box-shadow: 0 0 0 3px rgba(230,0,35,.12) !important;
}
/* Kill browser autofill white-bg override */
[data-theme="dark"] .dmap-input:-webkit-autofill,
[data-theme="dark"] .dmap-textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #27272a inset !important;
-webkit-text-fill-color: #f4f4f5 !important;
caret-color: #f4f4f5 !important;
}
[data-theme="dark"] .dmap-label { color: #f4f4f5; }
[data-theme="dark"] .dmap-label-hint { color: #71717a; }
[data-theme="dark"] .dmap-char-hint { color: #71717a; }
[data-theme="dark"] .dmap-tool-hint { color: #71717a; }
[data-theme="dark"] .dmap-tool {
background: #1a1a1c;
border-color: #3f3f46;
color: #a1a1aa;
}
[data-theme="dark"] .dmap-tool:hover {
background: #27272a;
border-color: var(--dm-primary);
color: #f4f4f5;
}
[data-theme="dark"] .dmap-tool.selected {
background: var(--dm-primary);
border-color: var(--dm-primary);
color: #fff;
}
[data-theme="dark"] .dmap-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] .dmap-msg-success { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.25); }
[data-theme="dark"] .dmap-msg-error { background: rgba(230,0,35,.12); color: #fca5a5; border-color: rgba(230,0,35,.25); }
[data-theme="dark"] .dmap-title { color: #f4f4f5; }
[data-theme="dark"] .dmap-back { color: #a1a1aa; }
[data-theme="dark"] .dmap-back:hover { color: #f4f4f5; }
[data-theme="dark"] .dmap-right { color: #f4f4f5; }
[data-theme="dark"] .dmap-custom-tool-row input {
background: #27272a;
border-color: #3f3f46;
color: #f4f4f5;
}
[data-theme="dark"] .dmap-custom-tool-row input:focus {
background: #2d2d30;
border-color: var(--dm-primary);
color: #f4f4f5;
}
[data-theme="dark"] .dmap-custom-tool-row input::placeholder { color: #52525b; }
[data-theme="dark"] .dmap-img-error { color: #fca5a5; background: rgba(230,0,35,.1); }
[data-theme="dark"] .dmap-req { color: #f87171; }
/* ═══════════════════════════════════════════════════════════════════════════
DARK MODE TOGGLE — bulletproof pill design
═══════════════════════════════════════════════════════════════════════════ */
.dm-theme-toggle {
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
display: inline-flex;
align-items: center;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.dm-tgl-pill {
position: relative;
display: flex;
align-items: center;
width: 58px;
height: 30px;
border-radius: 15px;
background: #e2e8f0;
border: 1.5px solid #cbd5e1;
transition: background .3s ease, border-color .3s ease;
box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] .dm-tgl-pill {
background: #27272a;
border-color: #3f3f46;
box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
}
.dm-tgl-knob {
position: absolute;
left: 3px;
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
transition: left .3s cubic-bezier(.34,1.56,.64,1);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
line-height: 1;
}
[data-theme="dark"] .dm-tgl-knob {
left: 31px;
background: #1a1a1c;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* icon inside knob changes via JS data attribute */
.dm-tgl-knob::before { content: '☀️'; }
[data-theme="dark"] .dm-tgl-knob::before { content: '🌙'; }
/* track labels */
.dm-tgl-sun, .dm-tgl-moon {
position: absolute;
font-size: 10px;
line-height: 1;
transition: opacity .2s;
pointer-events: none;
user-select: none;
}
.dm-tgl-sun { left: 7px; opacity: 0; }
.dm-tgl-moon { right: 7px; opacity: 0; }
/* tooltip */
.dm-theme-toggle:focus-visible .dm-tgl-pill {
outline: 2px solid var(--dm-primary);
outline-offset: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
FOOTER DARK MODE TOGGLE SECTION
═══════════════════════════════════════════════════════════════════════════ */
.dm4-footer-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
border-top: 1px solid #1e1e20;
max-width: 1200px;
margin: 0 auto;
}
.dm4-footer-toggle-label {
font-size: 13px;
font-weight: 600;
color: #888;
display: flex;
align-items: center;
gap: 8px;
}
/* Dark explicit */
[data-theme="dark"] .dm4-footer-toggle-row { border-top-color: #1a1a1c; }
[data-theme="dark"] .dm4-footer-toggle-label { color: #555; }
/* Light mode */
[data-theme="light"] .dm4-footer-toggle-row { border-top-color: #d1d5db; }
[data-theme="light"] .dm4-footer-toggle-label { color: #555; }
[data-theme="light"] .dm4-footer-toggle-row .dm-tgl-pill { background: #e4e4e7 !important; border-color: #d1d5db !important; }
[data-theme="light"] .dm4-footer-toggle-row .dm-tgl-knob { background: #fff !important; }
/* ═══════════════════════════════════════════════════════════════════════════
LEADERBOARD PAGE (dml- prefix) — v3 redesign
═══════════════════════════════════════════════════════════════════════════ */
/* ── Wrap ── */
.dml-wrap { max-width: 900px; margin: 0 auto; padding: 28px 16px 100px; font-family: var(--dm-font); }
/* ── Hero card ── */
.dml-hero {
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: var(--dm-radius); padding: 24px 24px 20px; margin-bottom: 14px;
position: relative; overflow: hidden;
}
.dml-hero::before {
content:''; position:absolute; top:-60px; right:-60px;
width:200px; height:200px; border-radius:50%;
background:rgba(230,0,35,.05); pointer-events:none;
}
.dml-eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--dm-primary); margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.dml-eyebrow::before { content:''; width:16px; height:2px; background:var(--dm-primary); border-radius:2px; }
.dml-hero-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.dml-title { font-size: 24px; font-weight: 800; color: var(--dm-text); margin: 0 0 4px; letter-spacing: -.4px; }
.dml-sub { font-size: 13px; color: var(--dm-text-secondary); margin: 0; }
/* ── CTA button (shared) ── */
.dml-cta-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--dm-primary); color: #fff !important;
border-radius: var(--dm-radius-pill); padding: 9px 18px;
font-size: 13px; font-weight: 700; text-decoration: none;
white-space: nowrap; flex-shrink: 0;
transition: opacity .15s, transform .15s;
}
.dml-cta-btn:hover { opacity: .88; transform: translateY(-1px); }
/* ── Tabs ── */
.dml-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dml-tab {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 13px; border-radius: 20px; font-size: 12px; font-weight: 500;
cursor: pointer; border: 1px solid var(--dm-border); background: transparent;
color: var(--dm-text-secondary); font-family: var(--dm-font);
transition: background .15s, border-color .15s, color .15s;
}
.dml-tab:hover { background: var(--dm-bg); color: var(--dm-text); }
.dml-tab.active { background: var(--dm-primary); color: #fff; border-color: var(--dm-primary); }
/* ── Period bar ── */
.dml-period-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dml-period-label { font-size: 11px; color: var(--dm-text-muted); font-weight: 500; }
.dml-pill {
padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
cursor: pointer; border: 1px solid var(--dm-border); background: transparent;
color: var(--dm-text-secondary); font-family: var(--dm-font);
transition: background .15s, border-color .15s, color .15s;
}
.dml-pill:hover { background: var(--dm-surface); color: var(--dm-text); }
.dml-pill.active { background: var(--dm-surface); border-color: var(--dm-text-muted); color: var(--dm-text); font-weight: 700; }
/* ── Podium skeleton ── */
.dml-pod-skel { height: 160px; background: var(--dm-bg); border-radius: var(--dm-radius); animation: dmlPulse 1.5s ease-in-out infinite; }
.dml-pod-skel--tall { height: 200px; }
@keyframes dmlPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
/* ── Podium grid ── */
.dml-podium { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 10px; margin-bottom: 16px; align-items: end; }
@media (max-width: 500px) { .dml-podium { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } }
.dml-pod-empty { min-height: 120px; }
/* ── Podium card ── */
.dml-pod {
display: flex; flex-direction: column; gap: 6px;
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: var(--dm-radius); padding: 12px 10px;
text-decoration: none; color: inherit;
transition: transform .18s, box-shadow .18s;
position: relative; overflow: hidden;
}
.dml-pod:hover { transform: translateY(-3px); box-shadow: var(--dm-shadow-md); }
.dml-pod--gold { border-color: #e6b800; }
.dml-pod--gold::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#e6b800; }
/* Medal badge */
.dml-medal {
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.dml-medal-g { background: rgba(230,185,0,.15); color: #b88b00; }
.dml-medal-s { background: rgba(160,168,184,.15); color: #6b7585; }
.dml-medal-b { background: rgba(180,100,50,.15); color: #8b4a18; }
/* Podium thumbnail */
.dml-pod-img {
width: 100%; height: 80px; object-fit: cover;
border-radius: var(--dm-radius-sm); display: block; background: var(--dm-bg);
}
.dml-pod-img--ph {
width: 100%; height: 80px; background: var(--dm-bg);
border-radius: var(--dm-radius-sm);
display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
@media (max-width: 500px) { .dml-pod-img, .dml-pod-img--ph { height: 60px; } }
.dml-pod-cat { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dm-primary); }
.dml-pod-title {
font-size: 11px; font-weight: 700; color: var(--dm-text); line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dml-pod-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dml-pod-meta span { font-size: 10px; color: var(--dm-text-secondary); font-weight: 500; }
.dml-pod-author { display: flex; align-items: center; gap: 4px; }
.dml-pod-author span { font-size: 10px; color: var(--dm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dml-pod-aimg { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dml-pod-ainit { width: 16px; height: 16px; border-radius: 50%; background: rgba(230,0,35,.1); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: var(--dm-primary); flex-shrink: 0; }
/* ── List header ── */
.dml-list-hd {
display: grid; grid-template-columns: 40px 1fr 70px 70px;
gap: 8px; padding: 0 10px 8px;
font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--dm-text-muted); border-bottom: 1px solid var(--dm-border); margin-bottom: 8px;
}
.dml-text-right { text-align: right; }
@media (max-width: 560px) { .dml-list-hd { grid-template-columns: 36px 1fr 64px; } .dml-hide-xs { display: none !important; } }
/* ── List ── */
.dml-list { display: flex; flex-direction: column; gap: 5px; }
/* ── Row ── */
.dml-row {
display: grid; grid-template-columns: 40px 1fr 70px 70px;
gap: 8px; align-items: center;
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: var(--dm-radius-sm); padding: 8px 10px;
text-decoration: none; color: inherit;
transition: transform .14s, box-shadow .14s;
}
.dml-row:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md); }
.dml-row-top { border-color: var(--dm-border-light); }
@media (max-width: 560px) { .dml-row { grid-template-columns: 36px 1fr 64px; } }
/* Rank number */
.dml-rn {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800;
color: var(--dm-text-secondary); background: var(--dm-bg); border: 1px solid var(--dm-border); flex-shrink: 0;
}
.dml-rn-g { background: rgba(230,185,0,.12); color: #b88b00; border-color: rgba(230,185,0,.3); }
.dml-rn-s { background: rgba(160,168,184,.12); color: #6b7585; border-color: rgba(160,168,184,.3); }
.dml-rn-b { background: rgba(180,100,50,.12); color: #8b4a18; border-color: rgba(180,100,50,.3); }
/* Row body */
.dml-row-body { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dml-row-img {
width: 52px; height: 38px; object-fit: cover;
border-radius: var(--dm-radius-xs); flex-shrink: 0; display: block; background: var(--dm-bg);
}
.dml-row-img--ph {
width: 52px; height: 38px; border-radius: var(--dm-radius-xs);
background: var(--dm-bg); display: flex; align-items: center;
justify-content: center; flex-shrink: 0; font-size: .9rem;
}
@media (max-width: 420px) { .dml-row-img, .dml-row-img--ph { width: 40px; height: 32px; } }
.dml-row-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dml-row-cat { font-size: 9px; font-weight: 700; color: var(--dm-primary); text-transform: uppercase; letter-spacing: .05em; }
.dml-row-title { font-size: 13px; font-weight: 600; color: var(--dm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dml-row-by { font-size: 11px; color: var(--dm-text-muted); display: flex; align-items: center; gap: 4px; }
.dml-mini-av { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dml-mini-av-init { width: 14px; height: 14px; border-radius: 50%; background: rgba(230,0,35,.1); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: var(--dm-primary); flex-shrink: 0; }
/* Stat cell */
.dml-cell { text-align: right; }
.dml-cell strong { display: block; font-size: 15px; font-weight: 800; color: var(--dm-text); line-height: 1.1; }
.dml-cell small { font-size: 9px; color: var(--dm-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* Badges */
.dml-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-top: 3px; }
.dml-badge-hot { background: rgba(230,0,35,.1); color: var(--dm-primary); }
.dml-badge-up { background: rgba(16,185,129,.1); color: #059669; }
.dml-badge-cr { background: rgba(230,0,35,.08); color: var(--dm-primary); align-self: flex-start; }
/* Row skeleton */
.dml-row-skel { height: 56px; background: var(--dm-bg); border-radius: var(--dm-radius-sm); animation: dmlPulse 1.5s ease-in-out infinite; margin-bottom: 5px; }
/* ── Section heading ── */
.dml-section-hd {
display: flex; align-items: center; gap: 12px;
font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--dm-text-muted); margin: 28px 0 12px;
}
.dml-section-hd::after { content:''; flex:1; height:1px; background:var(--dm-border); }
/* ── Creators grid ── */
.dml-creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 10px; }
.dml-cr {
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: var(--dm-radius-sm); padding: 14px;
display: flex; flex-direction: column; gap: 8px;
text-decoration: none; color: inherit;
transition: transform .15s, box-shadow .15s;
}
.dml-cr:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md); }
.dml-cr-top { display: flex; align-items: center; gap: 10px; }
.dml-cr-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dml-cr-init {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
background: rgba(230,0,35,.1); display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: var(--dm-primary);
}
.dml-cr-name { font-size: 13px; font-weight: 700; color: var(--dm-text); }
.dml-cr-sub { font-size: 11px; color: var(--dm-text-muted); }
.dml-cr-stats { display: flex; gap: 12px; }
.dml-cr-stats span { display: flex; flex-direction: column; font-size: 11px; color: var(--dm-text-secondary); }
.dml-cr-stats strong { font-size: 15px; font-weight: 800; color: var(--dm-text); line-height: 1.1; }
.dml-cr-stats small { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dm-text-muted); }
.dml-cr-skel { height: 110px; background: var(--dm-bg); border-radius: var(--dm-radius-sm); animation: dmlPulse 1.5s ease-in-out infinite; }
/* ── CTA banner ── */
.dml-cta-banner {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: var(--dm-radius); padding: 20px 24px; margin-top: 28px;
}
.dml-cta-icon {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(230,0,35,.08); display: flex; align-items: center;
justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.dml-cta-text { flex: 1; min-width: 160px; }
.dml-cta-text strong { display: block; font-size: 15px; font-weight: 800; color: var(--dm-text); }
.dml-cta-text p { margin: 2px 0 0; font-size: 13px; color: var(--dm-text-secondary); }
/* ── Empty ── */
.dml-empty { text-align: center; padding: 36px 16px; color: var(--dm-text-muted); font-size: 14px; }
/* ── Dark mode ── */
[data-theme="dark"] .dml-hero { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dml-pod { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dml-row { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dml-cr { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dml-cta-banner { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dml-row-skel,
[data-theme="dark"] .dml-pod-skel,
[data-theme="dark"] .dml-cr-skel,
[data-theme="dark"] .dml-row-img--ph,
[data-theme="dark"] .dml-pod-img--ph { background: #27272a; }
/* ═══════════════════════════════════════════════════════════════════════════
TRENDING / HOT BADGE
═══════════════════════════════════════════════════════════════════════════ */
.dm-trending-badge {
position: absolute; top: 8px; left: 8px; z-index: 5;
display: inline-flex; align-items: center; gap: 3px;
background: linear-gradient(135deg, #ff4060, #E60023);
color: #fff; border-radius: 999px; padding: 3px 9px;
font-size: 10px; font-weight: 800; letter-spacing: .04em;
pointer-events: none; box-shadow: 0 2px 8px rgba(230,0,35,.35);
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════════════════
SKELETON LOADING
═══════════════════════════════════════════════════════════════════════════ */
.dm-card-skeleton {
break-inside: avoid; background: var(--dm-surface);
border-radius: var(--dm-radius); overflow: hidden;
margin-bottom: 14px; border: 1px solid var(--dm-border);
}
.dm-skel-img {
width: 100%; aspect-ratio: 4/3;
background: linear-gradient(90deg, var(--dm-border-light) 25%, var(--dm-border) 50%, var(--dm-border-light) 75%);
background-size: 200% 100%;
animation: dm-shimmer 1.4s infinite;
}
.dm-skel-body { padding: 12px 14px; }
.dm-skel-line {
height: 12px; border-radius: 6px; margin-bottom: 8px;
background: linear-gradient(90deg, var(--dm-border-light) 25%, var(--dm-border) 50%, var(--dm-border-light) 75%);
background-size: 200% 100%;
animation: dm-shimmer 1.4s infinite;
}
.dm-skel-line-short { width: 60%; height: 10px; }
@keyframes dm-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════════════════════ */
.dm-toast-wrap {
position: fixed; bottom: 24px; right: 24px; z-index: 999999;
display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
@media (max-width: 768px) { .dm-toast-wrap { bottom: 80px; right: 12px; left: 12px; } }
.dm-toast {
display: flex; align-items: center; gap: 10px;
background: #1a1a1a; color: #fff; border-radius: 12px;
padding: 13px 18px; font-size: 14px; font-weight: 600;
font-family: var(--dm-font); box-shadow: 0 8px 32px rgba(0,0,0,.25);
animation: dm-toast-in .3s cubic-bezier(.34,1.56,.64,1) both;
pointer-events: auto; max-width: 320px;
}
.dm-toast.dm-toast-success { background: #065f46; }
.dm-toast.dm-toast-error { background: #9f1239; }
@keyframes dm-toast-in {
from { opacity: 0; transform: translateY(12px) scale(.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.dm-toast.dm-toast-out { animation: dm-toast-out .25s ease forwards; }
@keyframes dm-toast-out { to { opacity: 0; transform: translateY(8px) scale(.95); } }
/* ── Mini "Copied!" popup (floats above clicked element) ─────────────────── */
.dm-copied-pop {
position: fixed;
z-index: 99999;
background: var(--dm-primary, #e60023);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 5px 12px;
border-radius: 20px;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0,0,0,.35);
animation: dm-pop-in .18s cubic-bezier(.34,1.56,.64,1) both;
letter-spacing: .02em;
}
@keyframes dm-pop-in {
from { opacity:0; transform:translateY(6px) scale(.8); }
to { opacity:1; transform:translateY(0) scale(1); }
}
.dm-copied-pop.dm-pop-out {
animation: dm-pop-out .22s ease forwards;
}
@keyframes dm-pop-out {
to { opacity:0; transform:translateY(-8px) scale(.85); }
}
/* ═══════════════════════════════════════════════════════════════════════════
HEADER — glassmorphism upgrade
═══════════════════════════════════════════════════════════════════════════ */
.dm-feed-header {
background: rgba(255,255,255,.9) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
/* Card hover upgrade */
.dm-card { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease !important; }
.dm-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.05) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE SEARCH BAR — search results page (desktop: hidden)
═══════════════════════════════════════════════════════════════════════════ */
.dmsr-mob-search-bar { display: none !important; }
@media (max-width: 768px) {
.dmsr-mob-search-bar {
display: block !important;
position: sticky; top: 0; z-index: 600;
background: var(--dm-surface);
border-bottom: 1px solid var(--dm-border);
padding: 10px 14px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.dmsr-mob-search-inner {
position: relative; display: flex; align-items: center;
background: var(--dm-bg); border: 1.5px solid var(--dm-border);
border-radius: 999px; height: 46px; overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.dmsr-mob-search-inner:focus-within {
border-color: var(--dm-primary);
box-shadow: 0 0 0 3px rgba(230,0,35,.08);
background: var(--dm-surface);
}
.dmsr-mob-search-icon {
position: absolute; left: 14px; color: var(--dm-text-muted);
pointer-events: none; flex-shrink: 0; z-index: 2;
}
.dmsr-mob-input {
flex: 1; border: none; background: transparent;
padding: 0 8px 0 42px; font-size: 15px;
font-family: var(--dm-font); color: var(--dm-text);
outline: none; height: 100%; min-width: 0;
}
.dmsr-mob-input::placeholder { color: var(--dm-text-muted); }
.dmsr-mob-clear {
background: none; border: none; color: var(--dm-text-muted);
cursor: pointer; padding: 0 8px; font-size: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: color .2s; height: 100%;
}
.dmsr-mob-clear:hover { color: var(--dm-text); }
.dmsr-mob-submit {
background: var(--dm-primary); color: #fff; border: none;
border-radius: 0 999px 999px 0; padding: 0 18px;
font-size: 14px; font-weight: 700; cursor: pointer;
font-family: var(--dm-font); height: 100%; flex-shrink: 0;
transition: background .18s; white-space: nowrap;
}
.dmsr-mob-submit:hover { background: var(--dm-primary-hover); }
}
/* ═══════════════════════════════════════════════════════════════════════════
NOTCH PILL MOBILE NAV v4 — SVG animated notch + circle
═══════════════════════════════════════════════════════════════════════════ */
/* Hide on desktop */
#dm4-mobnav { display: none !important; }
#dm4-lnav-svg, #dm4-lnav-path { display: none !important; }
@media (max-width: 768px) {
/* ── Content clearance ──────────────────────────────────────────────── */
#dm4-main, .dm-feed-wrapper, .dmd-wrap, .dma-wrap { padding-bottom: 110px !important; }
#dm4-main { padding-top: 0 !important; }
.dm-masonry { column-count: 2 !important; column-gap: 8px !important; padding: 10px !important; }
/* ── Nav container — transparent, SVG provides background ──────────── */
#dm4-mobnav {
display: flex !important;
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 28px);
max-width: 430px;
height: 76px;
z-index: 9999;
align-items: flex-start;
justify-content: space-around;
overflow: visible;
background: transparent !important;
padding: 0 0 10px 0;
-webkit-tap-highlight-color: transparent;
}
/* ── SVG pill background ────────────────────────────────────────────── */
#dm4-nav-svg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: visible;
pointer-events: none;
z-index: 0;
}
/* ── Active circle — top:-30px so centre sits on pill top edge ─────── */
#dm4-lnav-circle {
position: absolute;
top: -30px;
left: 0;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--dm-primary, #E60023);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
pointer-events: none;
box-shadow:
0 0 0 5px rgba(230, 0, 35, .16),
0 6px 20px rgba(230, 0, 35, 0.55),
0 2px 8px rgba(0, 0, 0, .25);
transition: box-shadow .3s;
}
#dm4-lnav-circle svg {
width: 26px; height: 26px;
stroke: #fff; fill: none;
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* ── Nav items ──────────────────────────────────────────────────────── */
#dm4-mobnav .mbn-item {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-end;
gap: 3px; text-decoration: none;
color: #999;
font-size: 9.5px; font-weight: 600; font-family: var(--dm-font);
letter-spacing: .03em;
height: 76px; position: relative; z-index: 5;
transition: color .22s;
border: none; background: none; cursor: pointer;
padding: 0 0 12px 0;
-webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] #dm4-mobnav .mbn-item { color: #555; }
#dm4-mobnav .mbn-item:active { opacity: .7; }
#dm4-mobnav .mbn-item .mbn-icon {
width: 22px; height: 22px;
stroke: currentColor !important; fill: none !important;
stroke-width: 1.8; display: block;
transition: opacity .18s ease, transform .18s ease;
}
#dm4-mobnav .mbn-item .mbn-lbl {
transition: color .22s, margin-top .22s ease;
line-height: 1;
}
/* Active tab — icon stays visible, turns brand colour */
#dm4-mobnav .mbn-item.active { color: var(--dm-primary, #E60023); }
#dm4-mobnav .mbn-item.active .mbn-icon {
opacity: 1;
transform: translateY(-1px);
stroke: var(--dm-primary, #E60023);
}
#dm4-mobnav .mbn-item.active .mbn-lbl {
margin-top: 0;
font-weight: 700;
color: var(--dm-primary, #E60023);
}
/* ── FAB (centre + button) ─────────────────────────────────────────── */
#dm4-mobnav .mbn-fab-wrap {
flex: 1;
display: flex; align-items: center; justify-content: center;
height: 76px; position: relative; z-index: 6;
}
#dm4-mobnav .mbn-fab {
width: 46px; height: 46px;
border-radius: 50%;
background: var(--dm-primary, #E60023);
display: flex; align-items: center; justify-content: center;
text-decoration: none;
box-shadow: 0 4px 18px rgba(230, 0, 35, .45), 0 2px 6px rgba(230, 0, 35, .25);
position: relative; top: -8px;
border: 3px solid var(--dm-surface, #fff);
transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
[data-theme="dark"] #dm4-mobnav .mbn-fab { border-color: #1c1c1e; }
#dm4-mobnav .mbn-fab:hover,
#dm4-mobnav .mbn-fab:focus-visible {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 8px 24px rgba(230,0,35,.5);
}
#dm4-mobnav .mbn-fab:active { transform: scale(.88) translateY(0) !important; }
#dm4-mobnav .mbn-fab svg {
width: 20px; height: 20px;
stroke: #fff; fill: none;
stroke-width: 2.8; display: block;
}
}/* end @media */
/* ═══════════════════════════════════════════════════════════════════════════
DARK MODE TOGGLE — updated: clear sun/moon icons visible in both modes
═══════════════════════════════════════════════════════════════════════════ */
.dm-theme-toggle {
background: none; border: none; padding: 0;
cursor: pointer; flex-shrink: 0;
display: inline-flex; align-items: center;
-webkit-tap-highlight-color: transparent;
}
.dm-tgl-pill {
position: relative;
display: flex; align-items: center; justify-content: space-between;
width: 62px; height: 32px;
border-radius: 16px;
background: #e9eaec;
border: 2px solid #d1d5db;
padding: 0 7px;
transition: background .3s, border-color .3s;
box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] .dm-tgl-pill {
background: #27272a;
border-color: #3f3f46;
box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
}
.dm-tgl-knob {
position: absolute;
left: 3px;
width: 24px; height: 24px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
transition: left .36s cubic-bezier(.34,1.56,.64,1);
z-index: 2;
}
[data-theme="dark"] .dm-tgl-knob {
left: 33px;
background: #1a1a1c;
box-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.dm-tgl-icon-sun,
.dm-tgl-icon-moon {
display: flex; align-items: center; justify-content: center;
z-index: 1; flex-shrink: 0;
transition: opacity .25s, color .25s;
line-height: 1;
}
.dm-tgl-icon-sun { color: #f59e0b; opacity: 1; }
.dm-tgl-icon-moon { color: #818cf8; opacity: .4; }
[data-theme="dark"] .dm-tgl-icon-sun { opacity: .25; }
[data-theme="dark"] .dm-tgl-icon-moon { opacity: 1; }
.dm-theme-toggle:focus-visible .dm-tgl-pill {
outline: 2px solid var(--dm-primary);
outline-offset: 2px;
}
/* Footer toggle variant */
.dm4-footer-toggle-row .dm-tgl-pill {
background: #2a2a2c;
border-color: #3f3f46;
}
.dm4-footer-toggle-row .dm-tgl-knob { background: #555558; }
.dm4-footer-toggle-row .dm-tgl-icon-sun { color: #fbbf24; }
.dm4-footer-toggle-row .dm-tgl-icon-moon { color: #a78bfa; }
[data-theme="dark"] .dm4-footer-toggle-row .dm-tgl-pill { background: #1a1a1c; border-color: #27272a; }
[data-theme="dark"] .dm4-footer-toggle-row .dm-tgl-knob { background: #0d0d0f; }
[data-theme="light"] .dm4-footer-toggle-row .dm-tgl-pill { background: #e4e4e7 !important; border-color: #d1d5db !important; }
[data-theme="light"] .dm4-footer-toggle-row .dm-tgl-knob { background: #ffffff !important; }
/* ═══════════════════════════════════════════════════════════════════════════
HERO v4 — 2-column grid layout (left: content | right: stats card)
Overrides any previous hero CSS with !important on layout-critical props
═══════════════════════════════════════════════════════════════════════════ */
.dm-hero {
padding: 52px 40px 44px !important;
border-bottom: 1px solid var(--dm-border);
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse 55% 70% at 92% 10%, rgba(230,0,35,.09) 0%, transparent 55%),
radial-gradient(ellipse 45% 50% at 5% 90%, rgba(230,0,35,.06) 0%, transparent 50%),
var(--dm-surface);
transition: background .35s;
}
.dm-hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(230,0,35,.07) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 30%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 30%, transparent 100%);
}
/* 2-column grid: content 60% | stats card auto width */
.dm-hero-grid {
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 52px !important;
align-items: center !important;
max-width: 1040px;
margin: 0 auto;
position: relative;
z-index: 1;
}
@media (max-width: 960px) {
.dm-hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
.dm-hero-stats-card { display: none !important; } /* hidden on tablet — shown on desktop */
.dm-hero { padding: 40px 24px 36px !important; }
}
@media (max-width: 768px) {
.dm-hero { display: none !important; } /* mobile uses bottom nav, no hero */
}
/* Left content column */
.dm-hero-left {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
}
/* Badge */
.dm-hero-badge {
display: inline-flex !important;
align-items: center;
gap: 8px;
background: rgba(230,0,35,.08);
border: 1px solid rgba(230,0,35,.22);
border-radius: 999px;
padding: 6px 16px;
font-size: 12px; font-weight: 700; letter-spacing: .05em;
color: var(--dm-primary);
margin-bottom: 20px !important;
}
.dm-hero-badge-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--dm-primary);
animation: dm-pulse 2.2s ease-in-out infinite;
flex-shrink: 0;
}
/* Headline */
.dm-hero-title {
display: block !important;
font-size: 44px !important;
font-weight: 800 !important;
color: var(--dm-text) !important;
line-height: 1.13 !important;
letter-spacing: -.8px !important;
margin: 0 0 14px !important;
max-width: 580px;
transition: color .35s;
}
@media (max-width: 1100px) { .dm-hero-title { font-size: 36px !important; } }
.dm-hero-accent {
background: linear-gradient(130deg, #E60023 0%, #ff3355 50%, #E60023 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: dm-gradient-shift 4s linear infinite;
}
/* Subtitle */
.dm-hero-sub {
display: block !important;
font-size: 16px !important;
color: var(--dm-text-secondary) !important;
line-height: 1.65 !important;
margin: 0 0 24px !important;
max-width: 500px;
transition: color .35s;
}
/* Tool chips row */
.dm-hero-tools {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 26px !important;
}
.dm-hero-tools-label {
font-size: 11px; font-weight: 700; color: var(--dm-text-muted);
text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
}
.dm-hero-tool-chip {
display: inline-flex; align-items: center; gap: 5px;
background: var(--dm-surface); border: 1px solid var(--dm-border);
border-radius: 999px; padding: 5px 12px;
font-size: 12px; font-weight: 600; color: var(--dm-text-secondary);
box-shadow: var(--dm-shadow);
transition: border-color .18s, color .18s, background .35s;
}
.dm-hero-tool-chip:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dm-hero-tool-icon { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; border-radius: 2px; }
/* CTA buttons */
.dm-hero-actions {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
.dm-hero-cta {
display: inline-flex; align-items: center; gap: 7px;
background: var(--dm-primary); color: #fff !important;
border-radius: 999px; padding: 14px 28px;
font-size: 15px; font-weight: 700; text-decoration: none !important;
box-shadow: 0 4px 18px rgba(230,0,35,.32);
transition: background .2s, transform .2s, box-shadow .2s;
letter-spacing: -.1px;
}
.dm-hero-cta:hover {
background: var(--dm-primary-hover); color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(230,0,35,.42);
}
.dm-hero-browse {
font-size: 15px; font-weight: 700;
color: var(--dm-text-secondary) !important;
text-decoration: none !important;
transition: color .18s;
}
.dm-hero-browse:hover { color: var(--dm-primary) !important; }
/* Right stats card */
.dm-hero-stats-card {
background: var(--dm-surface);
border: 1px solid var(--dm-border);
border-radius: 22px;
padding: 8px 0;
min-width: 190px;
box-shadow: 0 4px 20px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
transition: background .35s, border-color .35s, box-shadow .35s;
}
[data-theme="dark"] .dm-hero-stats-card {
box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.dm-hsc-item {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 24px;
border-bottom: 1px solid var(--dm-border);
transition: border-color .35s;
}
.dm-hsc-item:last-child { border-bottom: none; }
.dm-hsc-emoji {
font-size: 22px;
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 11px;
background: var(--dm-primary-light);
display: flex; align-items: center; justify-content: center;
transition: background .35s;
}
.dm-hsc-body { display: flex; flex-direction: column; gap: 2px; }
.dm-hsc-val {
font-size: 24px; font-weight: 800;
color: var(--dm-text); letter-spacing: -.5px; line-height: 1;
display: block;
transition: color .35s;
}
.dm-hsc-lbl {
font-size: 10px; font-weight: 700; color: var(--dm-text-muted);
text-transform: uppercase; letter-spacing: .08em;
display: block;
transition: color .35s;
}
/* ═══════════════════════════════════════════════════════════════════════════
DARK MODE TOGGLE — CSS support layer (JS overrides inline styles anyway)
═══════════════════════════════════════════════════════════════════════════ */
.dm-theme-toggle { cursor: pointer; }
#dm-tgl-pill { cursor: pointer; }
/* Fallback CSS dark mode styles (JS already handles this inline) */
[data-theme="dark"] #dm-tgl-pill {
background: #27272a !important;
border-color: #3f3f46 !important;
}
[data-theme="dark"] #dm-tgl-knob {
left: 33px !important;
background: #1a1a1c !important;
}
[data-theme="dark"] #dm-tgl-sun { opacity: .25 !important; }
[data-theme="dark"] #dm-tgl-moon { opacity: 1 !important; }
/* Footer toggle (different ID since it has no inline ID) */
.dm-theme-toggle-footer .dm-tgl-pill {
background: #2a2a2c;
border-color: #3f3f46;
}
.dm-theme-toggle-footer .dm-tgl-knob { background: #555; }
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE NAV — v4 override (ensures notch circle + active label correct)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Legacy SVG hidden */
#dm4-lnav-svg, #dm4-lnav-path { display: none !important; }
/* Circle position override */
#dm4-lnav-circle {
position: absolute !important;
top: -26px !important;
width: 52px !important; height: 52px !important;
border-radius: 50% !important;
background: var(--dm-primary, #E60023) !important;
box-shadow: 0 4px 20px rgba(230,0,35,.55) !important;
}
[data-theme="dark"] #dm4-lnav-circle {
box-shadow: 0 4px 24px rgba(230,0,35,.65) !important;
}
/* Active tab overrides */
#dm4-mobnav .mbn-item.active { color: var(--dm-primary) !important; }
#dm4-mobnav .mbn-item.active .mbn-icon { opacity: 1 !important; transform: translateY(-1px) !important; stroke: var(--dm-primary, #E60023) !important; fill: none !important; }
#dm4-mobnav .mbn-item.active .mbn-lbl { margin-top: 0 !important; font-weight: 700 !important; opacity: 1 !important; }
}/* end mobile */
/* ═══════════════════════════════════════════════════════════════════════════
FINAL CRITICAL OVERRIDES — mobile masonry, dark mode toggle state
═══════════════════════════════════════════════════════════════════════════ */
/* Mobile: ensure 2-column masonry (matches existing design) */
@media (max-width: 680px) {
.dm-masonry {
column-count: 2 !important;
column-gap: 10px !important;
padding: 12px 10px !important;
}
.dm-masonry .dm-card { margin-bottom: 10px !important; }
}
/* Ensure tool chip images render inline (overrides global img{display:block}) */
.dm-hero-tool-icon,
[style*="dm-hero-tool-icon"] {
display: inline-block !important;
vertical-align: middle !important;
}
/* Dark mode: hero grid border — scoped away from float cards */
[data-theme="dark"] #dm-hero > div > div:last-child {
box-shadow: 0 4px 20px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] #dm-hero > div > div:last-child > div {
border-color: #27272a !important;
}
/* Override: float card foot div must NOT get the box-shadow above (specificity match via #dm-hero) */
[data-theme="dark"] #dm-hero .dmhv2-float > div,
[data-theme="dark"] #dm-hero .dmhv2-float-foot,
[data-theme="dark"] #dm-hero .dmhv2-float-head,
[data-theme="dark"] #dm-hero .dmhv2-float-text,
[data-theme="dark"] #dm-hero .dmhv2-float-name {
box-shadow: none !important;
border-color: transparent !important;
background: transparent !important;
background-color: transparent !important;
outline: none !important;
}
/* Dark mode toggle: ensure knob position works in dark mode */
[data-theme="dark"] #dm-tgl-pill {
background: #27272a !important;
border-color: #3f3f46 !important;
}
[data-theme="dark"] #dm-tgl-knob { left: 33px !important; background: #1a1a1c !important; }
[data-theme="dark"] #dm-tgl-sun { opacity: .25 !important; }
[data-theme="dark"] #dm-tgl-moon { opacity: 1 !important; }
/* ═══════════════════════════════════════════════════════════════════════════
PATCH v7.1 — All bug fixes
═══════════════════════════════════════════════════════════════════════════ */
/* ── Fix: Author page dark mode text visibility ──────────────────────────── */
[data-theme="dark"] .dau-wrap { background: var(--dm-bg); }
[data-theme="dark"] .dau-name,
[data-theme="dark"] .dau-section { color: #f4f4f5 !important; }
[data-theme="dark"] .dau-bio { color: #a1a1aa !important; }
[data-theme="dark"] .dau-meta { color: #a1a1aa !important; }
[data-theme="dark"] .dau-meta strong { color: #f4f4f5 !important; }
[data-theme="dark"] .dau-follow-btn.following {
background: transparent !important;
border-color: #3f3f46 !important;
color: #a1a1aa !important;
}
[data-theme="dark"] .dau-follow-btn.following:hover {
border-color: var(--dm-primary) !important;
color: var(--dm-primary) !important;
}
/* ── Fix: Active tab pill text invisible in dark mode ────────────────────── */
/* PUBLISHED/DRAFTS toggle and similar */
[data-theme="dark"] .dmd-rec-tab.active {
background: var(--dm-primary) !important;
border-color: var(--dm-primary) !important;
color: #fff !important;
}
[data-theme="dark"] .dmd-filter-tab.active,
[data-theme="dark"] .dm-cat-btn.active,
[data-theme="dark"] .dmsr-cat-pill.active {
background: var(--dm-primary) !important;
border-color: var(--dm-primary) !important;
color: #fff !important;
}
/* ── Fix: Category select dropdown — single arrow, no flood ──────────────── */
.dmap-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23555' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px 16px !important;
-webkit-appearance: none !important;
appearance: none !important;
padding-right: 42px !important;
}
[data-theme="dark"] .dmap-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px 16px !important;
}
/* ── Fix: Dashboard dark mode toggle — hide on desktop, show only on mobile ── */
#dm-theme-toggle-dash {
display: none !important;
}
@media (max-width: 768px) {
#dm-theme-toggle-dash {
display: inline-flex !important;
}
}
/* ── Fix: Dark mode toggle knob position — ensure CSS transitions work ───── */
/* Knob relies on CSS when NOT using inline styles (footer toggle) */
.dm-tgl-knob {
transition: left .36s cubic-bezier(.34,1.56,.64,1), background .3s !important;
}
/* ── Fix: Mobile dashboard sidebar — clear bottom nav ───────────────────── */
@media (max-width: 960px) {
.dmd-sidebar.open {
padding-bottom: 80px !important;
overflow-y: auto !important;
}
/* Ensure sidebar nav items don't hide behind nav */
.dmd-nav {
padding-bottom: 16px !important;
}
}
/* ── Fix: Mobile content clears bottom nav (dashboard) ─────────────────── */
@media (max-width: 768px) {
.dmd-tab,
.dmd-tab.active {
padding-bottom: 100px !important;
}
.dmd-wrap {
padding-bottom: 80px !important;
}
}
/* ── Fix: Active tab in light mode — ensure dark text readable ───────────── */
.dmd-rec-tab.active {
background: #111 !important;
border-color: #111 !important;
color: #fff !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
PATCH v7.2 — UI, embed, toggle, copy, cards
═══════════════════════════════════════════════════════════════════════════ */
/* ── Dashboard topbar toggle — clean compact pill, mobile only ───────────── */
.dmd-topbar-toggle {
display: none !important;
background: none;
border: none;
padding: 0;
cursor: pointer;
flex-shrink: 0;
align-items: center;
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 960px) {
.dmd-topbar-toggle { display: inline-flex !important; }
}
.dmd-tgl-track {
position: relative;
width: 44px; height: 24px;
border-radius: 12px;
background: #d1d5db;
border: 2px solid #d1d5db;
transition: background .25s, border-color .25s;
display: block;
flex-shrink: 0;
}
[data-theme="dark"] .dmd-tgl-track {
background: #3f3f46;
border-color: #3f3f46;
}
.dmd-tgl-thumb {
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
transition: left .28s cubic-bezier(.34,1.56,.64,1), background .25s;
}
[data-theme="dark"] .dmd-tgl-thumb {
left: 22px;
background: #E60023;
}
/* ── Copy button — clean, no count badge ─────────────────────────────────── */
.dm-copy-btn-count { display: none !important; }
/* ── Embed share item ────────────────────────────────────────────────────── */
.dmsp-em { cursor: pointer; }
.dmsp-icon { background: #374151; }
/* ── Embed modal improvements ────────────────────────────────────────────── */
.dm-embed-modal { z-index: 99999; }
.dm-embed-box textarea { font-family: monospace; font-size: 11px; line-height: 1.5; }
/* ═══════════════════════════════════════════════════════════════════════════
EMBED WIDGET PAGE (?embed=1)
═══════════════════════════════════════════════════════════════════════════ */
.dmembed-wrap {
max-width: 640px; margin: 0 auto;
font-family: var(--dm-font);
background: var(--dm-surface);
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--dm-border);
}
.dmembed-img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.dmembed-img-placeholder { width: 100%; aspect-ratio: 4/3; background: var(--dm-bg); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.dmembed-body { padding: 18px 20px; }
.dmembed-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dm-primary); margin-bottom: 6px; }
.dmembed-title { font-size: 18px; font-weight: 800; color: var(--dm-text); margin: 0 0 10px; line-height: 1.3; }
.dmembed-prompt {
background: var(--dm-bg); border-radius: 8px; padding: 12px 14px;
font-size: 13px; line-height: 1.7; color: var(--dm-text);
border-left: 3px solid var(--dm-primary); margin-bottom: 14px;
max-height: 160px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
scrollbar-width: thin; scrollbar-color: var(--dm-primary-mid) transparent;
}
.dmembed-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dmembed-copy-btn {
background: var(--dm-primary); color: #fff; border: none;
border-radius: 999px; padding: 9px 20px;
font-size: 13px; font-weight: 700; cursor: pointer;
font-family: var(--dm-font);
display: inline-flex; align-items: center; gap: 6px;
transition: background .2s, transform .18s;
box-shadow: 0 2px 8px rgba(230,0,35,.25);
}
.dmembed-copy-btn:hover { background: var(--dm-primary-hover); transform: translateY(-1px); }
.dmembed-copy-btn.copied { background: #10b981; }
.dmembed-view-btn {
background: transparent; color: var(--dm-text-secondary);
border: 1.5px solid var(--dm-border); border-radius: 999px;
padding: 8px 18px; font-size: 13px; font-weight: 600;
cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--dm-font); transition: border-color .2s, color .2s;
}
.dmembed-view-btn:hover { border-color: var(--dm-primary); color: var(--dm-primary); }
.dmembed-footer {
padding: 10px 20px;
border-top: 1px solid var(--dm-border);
display: flex; align-items: center; justify-content: space-between;
font-size: 11px; color: var(--dm-text-muted);
}
.dmembed-footer-brand { display: flex; align-items: center; gap: 5px; font-weight: 700; text-decoration: none; color: var(--dm-text-muted); }
.dmembed-footer-brand:hover { color: var(--dm-primary); }
/* ═══════════════════════════════════════════════════════════════════════════
PATCH v7.3 — Similar feed section + share panel embed fix
═══════════════════════════════════════════════════════════════════════════ */
/* ── Share panel — expand to fit 7 items cleanly ────────────────────────── */
.dmsp-panel { min-width: 310px !important; }
.dmsp-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
@media (max-width: 520px) {
.dmsp-panel { min-width: 260px !important; left: auto !important; right: 0 !important; }
.dmsp-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ── Similar Feed Section ────────────────────────────────────────────────── */
.dm-similar-feed-section {
background: var(--dm-bg);
padding: 32px 24px 48px;
border-top: 1px solid var(--dm-border);
}
.dm-similar-feed-header {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1300px;
margin: 0 auto 20px;
padding: 0 0 0 0;
}
.dm-similar-feed-title {
font-size: 20px;
font-weight: 800;
color: var(--dm-text);
margin: 0;
letter-spacing: -.3px;
display: flex;
align-items: center;
gap: 10px;
}
.dm-similar-feed-title svg { color: var(--dm-primary); flex-shrink: 0; }
.dm-similar-feed-see-all {
font-size: 14px;
font-weight: 700;
color: var(--dm-primary);
text-decoration: none;
transition: opacity .18s;
flex-shrink: 0;
}
.dm-similar-feed-see-all:hover { opacity: .75; text-decoration: underline; }
/* ── Similar masonry grid — matches home page exactly ───────────────────── */
.dm-similar-masonry {
max-width: 1300px !important;
margin: 0 auto !important;
column-count: 5 !important;
column-gap: 14px !important;
padding: 0 !important;
}
@media (max-width: 1400px) { .dm-similar-masonry { column-count: 4 !important; } }
@media (max-width: 1024px) { .dm-similar-masonry { column-count: 3 !important; } }
@media (max-width: 680px) { .dm-similar-masonry { column-count: 2 !important; column-gap: 10px !important; } }
@media (max-width: 400px) { .dm-similar-masonry { column-count: 2 !important; column-gap: 8px !important; } }
/* ── Single post: remove the old dm-left similar sidebar space ───────────── */
.dm4-similar { display: none !important; } /* hidden everywhere — moved below */
/* ── Dark mode for similar section ──────────────────────────────────────── */
[data-theme="dark"] .dm-similar-feed-section {
background: var(--dm-bg);
border-top-color: var(--dm-border);
}
[data-theme="dark"] .dm-similar-feed-title { color: var(--dm-text); }
/* ── Mobile single post layout: left col full width ────────────────────── */
@media (max-width: 768px) {
.dm-similar-feed-section { padding: 24px 14px 60px; }
.dm-similar-feed-header { margin-bottom: 16px; }
.dm-similar-feed-title { font-size: 17px; }
}
/* ── Dark mode: Embed modal — fix invisible text on dark bg ─────────────── */
[data-theme="dark"] .dm-embed-modal { background: rgba(0,0,0,.72) !important; }
[data-theme="dark"] .dm-embed-box {
background: #1a1a1c !important;
border: 1px solid #27272a !important;
box-shadow: 0 20px 64px rgba(0,0,0,.65) !important;
}
[data-theme="dark"] .dm-embed-box h3 { color: #f4f4f5 !important; }
[data-theme="dark"] .dm-embed-box p { color: #a1a1aa !important; }
[data-theme="dark"] .dm-embed-box textarea {
background: #27272a !important;
background-color: #27272a !important;
color: #f4f4f5 !important;
-webkit-text-fill-color: #f4f4f5 !important;
border-color: #3f3f46 !important;
caret-color: #f4f4f5 !important;
}
[data-theme="dark"] .dm-embed-close-btn {
background: #27272a !important;
border-color: #3f3f46 !important;
color: #f4f4f5 !important;
}
[data-theme="dark"] .dm-embed-close-btn:hover { background: #3f3f46 !important; }
/* ── Screen-reader-only utility (used for SEO H2 on homepage feed) ────────── */
.dm-sr-only{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;}
/* ── SEO visually-hidden H1 (server-side, no JS needed) ──────────────────── */
.dm-seo-h1{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;}
/* ── Mobile live-stats: badge above post image (max-width:768px) ─────────── */
.dm-stats-mobile-top { display: none; }
@media (max-width: 768px) {
#dm-stats-bar { display: none !important; }
.dm-stats-mobile-top { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 0 6px; margin-bottom: 10px; overflow: hidden; }
.dm-stats-mobile-top .dm-stat-pill { flex-shrink: 0; white-space: nowrap; }
.dm-stats-mobile-top .dm-live-badge { flex-shrink: 0; white-space: nowrap; margin-right: 4px; }
.dm-stats-mobile-top .dm-stat-sep { flex-shrink: 0; color: var(--dm-text-muted, #888); font-size: 12px; }
.dm-stats-mobile-top .dm-stat-label { font-size: 10px; }
.dm-stats-mobile-top .dm-stat-value { font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PINE PROMPTS — PREMIUM DESIGN UPGRADE PATCH
Version: Design v2.0 — Alignment, Spacing & Visual Polish
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. ROOT REFINEMENTS ─────────────────────────────────────────────────── */
:root {
--dm-radius: 14px;
--dm-radius-sm: 10px;
--dm-radius-xs: 6px;
--dm-header-h: 68px;
--dm-sidebar-w: 256px;
--dm-content-max: 1280px;
--dm-card-gap: 16px;
--dm-section-gap: 32px;
/* Elevated shadow system */
--dm-shadow: 0 1px 4px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
--dm-shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
--dm-shadow-lg: 0 10px 32px rgba(0,0,0,.09), 0 3px 10px rgba(0,0,0,.04);
--dm-shadow-xl: 0 24px 56px rgba(0,0,0,.11), 0 8px 20px rgba(0,0,0,.05);
/* Tighter transitions */
--dm-transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── 2. HEADER — tighter, cleaner ────────────────────────────────────────── */
.dm-feed-header {
height: var(--dm-header-h) !important;
padding: 0 32px !important;
gap: 20px !important;
background: rgba(255,255,255,.97) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 1px solid var(--dm-border) !important;
}
.dm-brand-logo-img { width: 36px !important; height: 36px !important; }
.dm-brand-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
.dm-brand-name { font-size: 15px !important; margin-left: 10px !important; }
/* Search — proper centering, better proportions */
.dm-feed-search { max-width: 520px !important; }
.dm-search-field { height: 42px !important; font-size: 14px !important; padding: 0 100px 0 44px !important; }
.dm-search-submit { height: 32px !important; padding: 0 18px !important; font-size: 13px !important; right: 5px !important; }
/* Nav — consistent button heights */
.dm-nav-link { padding: 8px 14px !important; font-size: 13px !important; }
.dm-nav-btn { height: 38px !important; padding: 0 20px !important; font-size: 13px !important; }
/* ── 3. CATEGORY PILLS — more breathing room ─────────────────────────────── */
.dm-categories {
padding: 12px 32px 14px !important;
gap: 8px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
background: #fff !important;
border-bottom: 1px solid var(--dm-border) !important;
}
.dm-cat-btn {
padding: 7px 18px !important;
font-size: 12px !important;
font-weight: 700 !important;
border-radius: 999px !important;
height: 34px !important;
letter-spacing: .01em !important;
}
.dm-cat-btn:hover {
background: var(--dm-primary-light) !important;
border-color: var(--dm-primary) !important;
color: var(--dm-primary) !important;
transform: translateY(-1px) !important;
}
.dm-cat-btn.active {
background: var(--dm-text) !important;
border-color: var(--dm-text) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
/* ── 4. HERO — more spacious, refined ───────────────────────────────────── */
.dm-hero {
padding: 56px 40px 52px !important;
background:
radial-gradient(ellipse 50% 80% at 95% 5%, rgba(230,0,35,.09) 0%, transparent 55%),
radial-gradient(ellipse 40% 50% at 5% 95%, rgba(230,0,35,.06) 0%, transparent 50%),
#fff !important;
}
.dm-hero::before {
background-image: radial-gradient(circle, rgba(230,0,35,.06) 1px, transparent 1px) !important;
background-size: 32px 32px !important;
}
.dm-hero-title { font-size: 48px !important; letter-spacing: -.9px !important; }
.dm-hero-sub { font-size: 16px !important; line-height: 1.7 !important; max-width: 540px !important; }
.dm-hero-cta { padding: 14px 32px !important; font-size: 15px !important; letter-spacing: -.1px !important; }
.dm-hero-stats-strip { margin-top: 36px !important; padding-top: 28px !important; }
.dm-hero-stat-val { font-size: 24px !important; }
/* ── 5. MASONRY GRID — better proportions, consistent gaps ──────────────── */
.dm-masonry {
column-gap: var(--dm-card-gap) !important;
padding: 24px 32px !important;
}
@media (max-width: 1400px) { .dm-masonry { padding: 20px 28px !important; } }
@media (max-width: 1100px) { .dm-masonry { padding: 18px 20px !important; } }
@media (max-width: 768px) { .dm-masonry { padding: 14px 14px !important; column-gap: 10px !important; } }
/* ── 6. CARD REDESIGN — premium card feel ────────────────────────────────── */
.dm-card {
margin-bottom: var(--dm-card-gap) !important;
border-radius: var(--dm-radius) !important;
border: 1px solid var(--dm-border) !important;
box-shadow: var(--dm-shadow) !important;
transition: transform .22s var(--dm-ease-spring), box-shadow .22s ease, border-color .18s !important;
overflow: hidden !important;
}
.dm-card:hover {
transform: translateY(-4px) !important;
box-shadow: var(--dm-shadow-lg) !important;
border-color: rgba(230,0,35,.18) !important;
}
.dm-card:active {
transform: translateY(-1px) scale(.99) !important;
box-shadow: var(--dm-shadow-md) !important;
}
/* Card image — subtle separator */
.dm-card-img-wrap { border-bottom: none !important; }
/* Card body — tight Pinterest row */
.dm-card-body {
padding: 6px 10px 7px !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 6px !important;
margin: 0 !important;
}
.dm-card-title {
font-size: 12.5px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--dm-text) !important;
flex: 1 !important;
min-width: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.dm-card-meta { display: none !important; }
.dm-card-author-row { display: none !important; }
/* Tool/category badge — cleaner */
.dm4-card-tool {
font-size: 10px !important;
font-weight: 700 !important;
padding: 3px 9px !important;
border-radius: 999px !important;
letter-spacing: .01em !important;
background: var(--dm-border-light) !important;
border: 1px solid var(--dm-border) !important;
}
.dm4-card-cat {
background: var(--dm-primary-light) !important;
border-color: rgba(230,0,35,.18) !important;
color: var(--dm-primary) !important;
}
/* Overlay view button */
.dm-card-overlay { background: rgba(0,0,0,.4) !important; }
.dm-card-view-btn {
padding: 9px 22px !important;
font-size: 13px !important;
font-weight: 800 !important;
border-radius: 999px !important;
box-shadow: 0 4px 16px rgba(0,0,0,.2) !important;
letter-spacing: -.1px !important;
}
/* Trending badge — tighter */
.dm-trending-badge {
padding: 3px 10px !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .05em !important;
box-shadow: 0 2px 8px rgba(230,0,35,.4) !important;
}
/* ── 7. SINGLE POST — improved two-col layout ────────────────────────────── */
.dm-single-wrapper { padding-bottom: 0 !important; }
.dm-single {
display: grid !important;
grid-template-columns: 300px 1fr !important;
grid-template-rows: auto auto !important;
gap: 0 36px !important;
padding: 36px 32px !important;
max-width: 1000px !important;
align-items: start !important;
}
.dm-left { grid-column: 1 !important; grid-row: 1 !important; }
.dm-right { grid-column: 2 !important; grid-row: 1 / 3 !important; }
.dm-comments { grid-column: 1 !important; grid-row: 2 !important; }
.dm-image {
border-radius: var(--dm-radius) !important;
box-shadow: var(--dm-shadow-md) !important;
margin-bottom: 20px !important;
}
.dm-title {
font-size: 24px !important;
font-weight: 800 !important;
letter-spacing: -.4px !important;
line-height: 1.3 !important;
margin-bottom: 16px !important;
}
/* Prompt box — more readable */
.dm-prompt-box {
padding: 18px 20px !important;
font-size: 14px !important;
line-height: 1.8 !important;
border-radius: 12px !important;
border-left-width: 4px !important;
height: 180px !important;
margin-bottom: 14px !important;
}
/* Copy button */
.dm-copy-btn {
border-radius: 999px !important;
padding: 12px 26px !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: -.1px !important;
}
/* Tool card */
.dm-tool-card {
padding: 18px !important;
border-radius: var(--dm-radius) !important;
border: 1px solid var(--dm-border) !important;
box-shadow: var(--dm-shadow) !important;
margin-bottom: 18px !important;
}
.dm-tool-card-btn { border-radius: 999px !important; padding: 11px !important; font-size: 13px !important; }
/* Tags */
.prompt-tags { gap: 7px !important; margin-bottom: 18px !important; }
.prompt-tag {
padding: 5px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 999px !important;
background: var(--dm-bg) !important;
border: 1px solid var(--dm-border) !important;
}
.prompt-tag-cat {
background: var(--dm-primary-light) !important;
border-color: rgba(230,0,35,.2) !important;
}
/* Stats row */
.dm-stats {
padding: 16px 0 !important;
margin-bottom: 18px !important;
gap: 6px 18px !important;
}
.dm-stat-value { font-size: 15px !important; font-weight: 800 !important; }
/* Action buttons — clean row */
.dm-actions {
gap: 8px !important;
margin-bottom: 18px !important;
flex-wrap: nowrap !important;
}
.dm-btn {
padding: 9px 18px !important;
font-size: 13px !important;
border-radius: 999px !important;
font-weight: 600 !important;
}
.dm-like-btn.liked { box-shadow: 0 2px 10px rgba(230,0,35,.25) !important; }
/* Author row */
.author { gap: 14px !important; padding-top: 16px !important; margin-top: 4px !important; }
.dm4-author-avatar { width: 48px !important; height: 48px !important; border-radius: 50% !important; }
.dm4-author-name { font-size: 15px !important; font-weight: 800 !important; }
/* ── 8. AUTH PAGES — premium card feel ───────────────────────────────────── */
.dm-auth-page {
background:
radial-gradient(ellipse 70% 55% at 20% 15%, rgba(230,0,35,.07) 0%, transparent 55%),
radial-gradient(ellipse 55% 45% at 80% 85%, rgba(230,0,35,.05) 0%, transparent 55%),
var(--dm-bg) !important;
}
.dm-auth-card {
padding: 48px 44px 40px !important;
border-radius: 22px !important;
box-shadow: 0 6px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
border: 1px solid rgba(0,0,0,.05) !important;
max-width: 440px !important;
}
@media (max-width: 480px) { .dm-auth-card { padding: 32px 22px 28px !important; } }
.dm-auth-heading { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.4px !important; margin-bottom: 8px !important; }
.dm-auth-sub { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 28px !important; }
.dm-auth-input {
padding: 14px 16px !important;
font-size: 15px !important;
border-radius: var(--dm-radius-sm) !important;
background: #f9f9f9 !important;
border: 1.5px solid #e8e8e8 !important;
}
.dm-auth-input:focus {
background: #fff !important;
border-color: var(--dm-primary) !important;
box-shadow: 0 0 0 3px rgba(230,0,35,.09) !important;
}
.dm-auth-submit {
padding: 15px !important;
font-size: 15px !important;
font-weight: 800 !important;
border-radius: var(--dm-radius-sm) !important;
margin-top: 8px !important;
letter-spacing: -.1px !important;
}
.dm-auth-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(230,0,35,.38) !important;
}
.dm-google-btn {
padding: 14px 20px !important;
font-size: 15px !important;
border-radius: var(--dm-radius-sm) !important;
}
.dm-auth-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em !important; margin-bottom: 7px !important; }
.dm-auth-field { margin-bottom: 18px !important; }
/* ── 9. DASHBOARD SIDEBAR ────────────────────────────────────────────────── */
.dmd-sidebar {
width: 232px !important;
background: var(--dm-surface) !important;
border-right: 1px solid var(--dm-border) !important;
}
.dmd-user-card {
padding: 22px 18px 18px !important;
gap: 10px !important;
}
.dmd-user-avatar { width: 68px !important; height: 68px !important; border-width: 3px !important; }
.dmd-user-name { font-size: 14px !important; font-weight: 800 !important; }
.dmd-edit-profile-btn { padding: 8px 22px !important; font-size: 13px !important; font-weight: 700 !important; }
.dmd-nav { padding: 10px 10px 20px !important; gap: 2px !important; }
.dmd-nav-item {
padding: 11px 14px !important;
border-radius: var(--dm-radius-sm) !important;
font-size: 13px !important;
font-weight: 500 !important;
}
.dmd-nav-item.active { font-weight: 700 !important; }
.dmd-nav-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.dmd-nav-icon svg { width: 15px !important; height: 15px !important; }
/* Dashboard topbar */
.dmd-topbar {
padding: 0 28px !important;
min-height: 58px !important;
border-bottom: 1px solid var(--dm-border) !important;
background: rgba(255,255,255,.97) !important;
backdrop-filter: blur(12px) !important;
}
.dmd-topbar-title { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.2px !important; }
/* Dashboard tabs */
.dmd-tab.active { padding: 28px 28px 80px !important; }
@media (max-width: 640px) { .dmd-tab.active { padding: 18px 14px 100px !important; } }
/* Stats grid */
.dmd-stats-row {
gap: 14px !important;
margin-bottom: 24px !important;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
}
.dmd-stat-card {
padding: 20px 16px !important;
border-radius: var(--dm-radius) !important;
transition: transform .2s, box-shadow .2s !important;
}
.dmd-stat-card:hover { transform: translateY(-3px) !important; box-shadow: var(--dm-shadow-md) !important; }
.dmd-stat-val { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.5px !important; }
.dmd-stat-lbl { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .08em !important; }
/* Highlight card */
.dmd-highlight {
border-radius: var(--dm-radius) !important;
padding: 24px 28px !important;
margin-bottom: 28px !important;
}
.dmd-highlight-title { font-size: 16px !important; line-height: 1.4 !important; }
.dmd-highlight-count { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.6px !important; }
/* Recent header */
.dmd-recent-header { margin-bottom: 18px !important; }
.dmd-recent-title { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.2px !important; }
.dmd-rec-tab {
padding: 7px 16px !important;
font-size: 12px !important;
font-weight: 700 !important;
border-radius: 999px !important;
height: 32px !important;
}
/* Post cards in dashboard */
.dmd-post-card { border-radius: var(--dm-radius) !important; margin-bottom: var(--dm-card-gap) !important; }
.dmd-post-body { padding: 13px 14px !important; }
.dmd-post-title { font-size: 13px !important; font-weight: 700 !important; }
.dmd-pa-btn { padding: 5px 13px !important; font-size: 11px !important; font-weight: 700 !important; border-radius: 999px !important; }
/* ── 10. ADD PROMPT PAGE ──────────────────────────────────────────────────── */
.dmap-page { padding: 32px 28px 100px !important; max-width: 1060px !important; }
.dmap-title { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.4px !important; margin-bottom: 28px !important; }
.dmap-grid { gap: 36px !important; }
.dmap-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .07em !important; }
.dmap-input, .dmap-select, .dmap-textarea {
padding: 13px 15px !important;
font-size: 14px !important;
border-radius: var(--dm-radius-sm) !important;
border: 1.5px solid var(--dm-border) !important;
}
.dmap-input:focus, .dmap-select:focus, .dmap-textarea:focus {
border-color: var(--dm-primary) !important;
box-shadow: 0 0 0 3px rgba(230,0,35,.08) !important;
}
.dmap-textarea { min-height: 160px !important; line-height: 1.7 !important; }
.dmap-dropzone:not(.has-preview) {
min-height: 300px !important;
border-radius: var(--dm-radius) !important;
border-width: 2px !important;
}
.dmap-tool {
padding: 10px 16px !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: var(--dm-radius-sm) !important;
border: 1.5px solid var(--dm-border) !important;
}
.dmap-tool.selected { box-shadow: 0 2px 12px rgba(230,0,35,.25) !important; }
.dmap-btn-publish {
padding: 13px 32px !important;
font-size: 15px !important;
font-weight: 800 !important;
border-radius: var(--dm-radius-sm) !important;
letter-spacing: -.1px !important;
}
.dmap-btn-draft { padding: 13px 26px !important; font-size: 14px !important; border-radius: var(--dm-radius-sm) !important; }
.dmap-right { gap: 22px !important; }
.dmap-field-group { gap: 8px !important; }
/* ── 11. LEADERBOARD — styles live in the main dml- block above ─── */
.dml-section-label { margin-bottom: 14px !important; font-size: 10px !important; letter-spacing: .1em !important; }
/* ── 12. PROFILE/AUTHOR PAGE ─────────────────────────────────────────────── */
.dmd-profile-wrap { max-width: 620px !important; }
.dmd-avatar-large { width: 96px !important; height: 96px !important; border-width: 3px !important; }
.dmd-avatar-section { margin-bottom: 28px !important; }
.dmd-profile-form { gap: 20px !important; }
.dmd-pf-group { gap: 7px !important; }
.dmd-pf-group label { font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.dmd-input {
padding: 13px 15px !important;
font-size: 14px !important;
border-radius: var(--dm-radius-sm) !important;
border: 1.5px solid var(--dm-border) !important;
}
.dmd-input:focus { box-shadow: 0 0 0 3px rgba(230,0,35,.08) !important; }
.dmd-save-btn { padding: 13px 32px !important; font-size: 14px !important; font-weight: 800 !important; border-radius: var(--dm-radius-sm) !important; }
/* ── 13. FOOTER ──────────────────────────────────────────────────────────── */
.dm4-footer { background: #0c0c0d !important; color: #888 !important; }
.dm4-footer-inner { padding: 56px 32px 36px !important; gap: 56px !important; max-width: var(--dm-content-max) !important; margin: 0 auto !important; }
.dm4-footer-tagline { font-size: 13px !important; line-height: 1.65 !important; color: #4a4a4d !important; }
.dm4-footer-cols { gap: 56px !important; }
.dm4-footer-col h4 { font-size: 10px !important; letter-spacing: .12em !important; margin-bottom: 14px !important; color: #888 !important; }
.dm4-footer-col a { font-size: 13px !important; color: #555 !important; margin-bottom: 10px !important; }
.dm4-footer-col a:hover { color: #fff !important; }
.dm4-footer-bottom { padding: 20px 32px !important; font-size: 12px !important; max-width: var(--dm-content-max) !important; margin: 0 auto !important; }
/* Light mode — must also use !important to beat the rules above */
[data-theme="light"] .dm4-footer { background: #f3f4f6 !important; color: #555 !important; border-top: 1px solid #d1d5db !important; }
[data-theme="light"] .dm4-footer-logo { color: #111 !important; }
[data-theme="light"] .dm4-footer-brand-name { color: #111 !important; }
[data-theme="light"] .dm4-footer-tagline { color: #666 !important; }
[data-theme="light"] .dm4-footer-col h4 { color: #111 !important; }
[data-theme="light"] .dm4-footer-col a { color: #555 !important; }
[data-theme="light"] .dm4-footer-col a:hover{ color: #000 !important; }
[data-theme="light"] .dm4-footer-bottom { color: #666 !important; border-top-color: #d1d5db !important; }
[data-theme="light"] .dm4-footer-toggle-row { border-top-color: #d1d5db !important; }
[data-theme="light"] .dm4-footer-toggle-label { color: #555 !important; }
[data-theme="light"] .dm4-footer-legal-links { color: #666 !important; }
[data-theme="light"] .dm4-footer-legal-links a { color: #555 !important; }
[data-theme="light"] .dm4-footer-legal-links a:hover { color: #000 !important; }
[data-theme="light"] .dm4-footer-legal-links span { color: #bbb !important; }
[data-theme="light"] .dm4-footer-toggle-row .dm-tgl-pill { background: #e4e4e7 !important; border-color: #d1d5db !important; }
[data-theme="light"] .dm4-footer-toggle-row .dm-tgl-knob { background: #fff !important; }
/* ── 14. MOBILE BOTTOM NAV ───────────────────────────────────────────────── */
.dmbn-nav {
height: 62px !important;
background: rgba(255,255,255,.96) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-top: 1px solid rgba(0,0,0,.07) !important;
box-shadow: 0 -4px 20px rgba(0,0,0,.06) !important;
padding: 0 4px env(safe-area-inset-bottom, 0px) !important;
}
.dmbn-item {
font-size: 10px !important;
font-weight: 600 !important;
gap: 4px !important;
padding: 10px 0 !important;
}
.dmbn-item.active::before {
width: 24px !important;
height: 3px !important;
border-radius: 0 0 4px 4px !important;
}
.dmbn-fab > svg {
width: 50px !important;
height: 50px !important;
padding: 14px !important;
top: -12px !important;
box-shadow: 0 4px 20px rgba(230,0,35,.45) !important;
}
/* ── 15. TOASTS ──────────────────────────────────────────────────────────── */
.dm-toast {
border-radius: 14px !important;
padding: 13px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
box-shadow: 0 8px 40px rgba(0,0,0,.28) !important;
max-width: 340px !important;
}
/* ── 16. SEARCH RESULTS PAGE ─────────────────────────────────────────────── */
.dmsr-search-wrap, .dmsr-search-bar {
max-width: 720px !important;
height: 52px !important;
}
.dmsr-input { font-size: 15px !important; padding: 0 8px 0 48px !important; }
.dmsr-btn {
padding: 10px 24px !important;
font-size: 14px !important;
font-weight: 700 !important;
border-radius: 999px !important;
margin: 6px 6px 6px 0 !important;
}
.dmsr-banner { padding: 12px 32px !important; font-size: 14px !important; }
.dmsr-cats { padding: 12px 32px 14px !important; gap: 8px !important; }
.dmsr-cat-pill { padding: 7px 18px !important; font-size: 12px !important; font-weight: 700 !important; height: 34px !important; }
/* ── 17. SKELETON CARDS — refined shimmer ────────────────────────────────── */
.dm-card-skeleton { border-radius: var(--dm-radius) !important; margin-bottom: var(--dm-card-gap) !important; border: 1px solid var(--dm-border) !important; }
.dm-skel-img { aspect-ratio: 4/3 !important; }
/* ── 18. DARK MODE SUPPLEMENTS ───────────────────────────────────────────── */
[data-theme="dark"] .dm-feed-header {
background: rgba(26,26,28,.97) !important;
border-bottom-color: #27272a !important;
}
[data-theme="dark"] .dm-categories {
background: var(--dm-surface) !important;
border-bottom-color: var(--dm-border) !important;
}
[data-theme="dark"] .dm-cat-btn.active {
background: var(--dm-primary) !important;
border-color: var(--dm-primary) !important;
}
[data-theme="dark"] .dmd-topbar {
background: rgba(26,26,28,.97) !important;
border-bottom-color: #27272a !important;
}
/* Pinterest cards have no border — dark mode hover uses shadow only */
[data-theme="dark"] .dm-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1.5px rgba(230,0,35,.18); }
[data-theme="dark"] .dm-auth-card {
background: var(--dm-surface) !important;
border-color: #27272a !important;
box-shadow: 0 6px 40px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25) !important;
}
[data-theme="dark"] .dm-auth-input {
background: #27272a !important;
border-color: #3f3f46 !important;
color: var(--dm-text) !important;
}
[data-theme="dark"] .dm-auth-input:focus { background: #1f1f22 !important; border-color: var(--dm-primary) !important; }
[data-theme="dark"] .dm-hero { background: var(--dm-surface) !important; }
[data-theme="dark"] .dm-prompt-box { background: #1f1f22 !important; }
[data-theme="dark"] .dmbn-nav { background: rgba(26,26,28,.97) !important; }
[data-theme="dark"] .dml-podium-first { border-color: rgba(230,0,35,.35) !important; }
/* ── 19. GLOBAL SPACING & TYPOGRAPHY POLISH ──────────────────────────────── */
/* Section titles consistent */
.dm-section-title,
.dmd-section-title,
.dmd-recent-title,
.dml-title { letter-spacing: -.3px !important; }
/* Consistent border-radius on interactive elements */
.dm-btn-primary-full { border-radius: var(--dm-radius-sm) !important; }
.dm-follow-inline-btn { border-radius: 999px !important; padding: 7px 18px !important; font-size: 13px !important; }
/* Load more button */
.dm-load-btn {
padding: 12px 36px !important;
font-size: 14px !important;
font-weight: 700 !important;
border-radius: 999px !important;
border: 1.5px solid var(--dm-border) !important;
box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
transition: var(--dm-transition) !important;
}
.dm-load-btn:hover {
border-color: var(--dm-primary) !important;
color: var(--dm-primary) !important;
background: var(--dm-primary-light) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px rgba(230,0,35,.12) !important;
}
/* Similar prompts sidebar links */
.dm4-similar-card {
border-radius: var(--dm-radius-sm) !important;
padding: 11px 12px !important;
gap: 11px !important;
border: 1px solid var(--dm-border) !important;
transition: var(--dm-transition) !important;
}
.dm4-similar-card:hover { border-color: rgba(230,0,35,.22) !important; transform: translateY(-2px) !important; }
/* ── 20. RESPONSIVE — SINGLE POST ───────────────────────────────────────── */
@media (max-width: 768px) {
.dm-single { display: flex !important; flex-direction: column !important; padding: 20px 16px !important; gap: 16px !important; }
.dm-left, .dm-right, .dm-comments { grid-column: unset !important; grid-row: unset !important; width: 100% !important; max-width: 100% !important; }
.dm-title { font-size: 20px !important; }
.dm-prompt-box { height: 160px !important; padding: 14px 16px !important; }
.dm-copy-btn { padding: 12px 22px !important; width: 100% !important; justify-content: center !important; }
.dm-actions { flex-wrap: nowrap !important; gap: 5px !important; }
.dm-actions .dm-btn { padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap; }
.dm-actions .dmsp-wrap { flex-shrink: 0; }
}
/* ── END UPGRADE PATCH ───────────────────────────────────────────────────── */
/* ── Card author row (added in card template upgrade) ────────────────────── */
.dm-card-body > div[style*="border-top"] {
display: flex;
align-items: center;
}
.dm-card-body .dm-card-author-link {
font-size: 11px !important;
font-weight: 600 !important;
color: var(--dm-text-muted) !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color .18s !important;
}
.dm-card-body .dm-card-author-link:hover { color: var(--dm-primary) !important; }
/* ── BADGE FINAL OVERRIDE — black bg + white text always ────────────────── */
.dm-card-badge,
.dm-card-badge--cat,
.dm-card-badge.dm-card-badge--cat {
background: rgba(10,10,10,.82) !important;
color: #ffffff !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
[data-theme="dark"] .dm-card-badge,
[data-theme="dark"] .dm-card-badge--cat,
[data-theme="dark"] .dm-card-badge.dm-card-badge--cat {
background: rgba(10,10,10,.88) !important;
color: #ffffff !important;
}
/* ── Dark mode: SEO hero sections — use page bg, not surface ─────────────── */
[data-theme="dark"] #hero-faip,
[data-theme="dark"] #hero-fap,
[data-theme="dark"] #hero-fpeg,
[data-theme="dark"] #hero-apg {
background:
radial-gradient(ellipse 55% 80% at 92% 8%, rgba(230,0,35,.10) 0%, transparent 55%),
radial-gradient(ellipse 45% 55% at 8% 92%, rgba(230,0,35,.07) 0%, transparent 50%),
radial-gradient(ellipse 70% 40% at 50% 55%, rgba(255,64,96,.04) 0%, transparent 60%),
#0f0f10 !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #hero-faip,
:root:not([data-theme="light"]) #hero-fap,
:root:not([data-theme="light"]) #hero-fpeg,
:root:not([data-theme="light"]) #hero-apg {
background:
radial-gradient(ellipse 55% 80% at 92% 8%, rgba(230,0,35,.10) 0%, transparent 55%),
radial-gradient(ellipse 45% 55% at 8% 92%, rgba(230,0,35,.07) 0%, transparent 50%),
radial-gradient(ellipse 70% 40% at 50% 55%, rgba(255,64,96,.04) 0%, transparent 60%),
#0f0f10 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
HERO V2 — FINAL OVERRIDE (always dark, beats all above rules)
═══════════════════════════════════════════════════════════════════════════ */
#dm-hero.dm-hero-v2,
html #dm-hero.dm-hero-v2,
body #dm-hero.dm-hero-v2,
[data-theme] #dm-hero.dm-hero-v2,
[data-theme="light"] #dm-hero.dm-hero-v2,
[data-theme="dark"] #dm-hero.dm-hero-v2 {
background: #060606 !important;
background-color: #060606 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 680px !important;
padding: 88px 24px 80px !important;
position: relative !important;
overflow: hidden !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
@media(max-width:768px){
#dm-hero.dm-hero-v2 {
display: flex !important;
min-height: auto !important;
padding: 48px 16px 52px !important;
}
}
/* ═══ HERO V2 LIGHT MODE CORRECTION ═══════════════════════════════════════ */
html:not([data-theme="dark"]) #dm-hero.dm-hero-v2,
[data-theme="light"] #dm-hero.dm-hero-v2 {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
ANDROID WEBVIEW — SPECIFIC FIXES
Applied via body.is-android-webview (set in functions.php when the
HTTP User-Agent contains the Android WebView "wv" marker).
Goals:
1. Safe-area insets — status bar + gesture nav bar don't overlap UI
2. Font sizes ≥ 16px on inputs — prevents Android auto-zoom on focus
3. Touch targets ≥ 48px — meets material design minimum
4. Correct bottom-nav clearance — content never hides behind bottom nav
5. Remove hover states — desktop-only effects look wrong on touch
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. Safe-area compensation (needs viewport-fit=cover in ) ───────── */
body.is-android-webview {
/* Push body content below the device status bar */
padding-top: env(safe-area-inset-top, 0px) !important;
}
/* ── 2. Bottom nav — respect the Android gesture bar ─────────────────────── */
body.is-android-webview .dmbn-nav {
height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
padding-left: max(8px, env(safe-area-inset-left, 8px)) !important;
padding-right: max(8px, env(safe-area-inset-right, 8px)) !important;
}
/* ── 3. Main content — clear both header-safe-area and bottom nav ─────────── */
body.is-android-webview #dm4-main {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ── 4. Auth pages (login / register / forgot password) ──────────────────── */
body.is-android-webview .dma-wrap {
min-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 16px)) !important;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
padding-left: max(12px, env(safe-area-inset-left, 12px)) !important;
padding-right: max(12px, env(safe-area-inset-right, 12px)) !important;
}
/* Card shrinks on small phones */
body.is-android-webview .dma-card {
padding: 28px 20px 24px !important;
border-radius: 16px !important;
}
/* ── 5. Prevent auto-zoom on input focus (font-size must be ≥ 16px) ──────── */
body.is-android-webview .dma-input,
body.is-android-webview input[type="text"],
body.is-android-webview input[type="email"],
body.is-android-webview input[type="password"],
body.is-android-webview input[type="search"],
body.is-android-webview textarea,
body.is-android-webview select {
font-size: 16px !important;
}
/* ── 6. Larger tap targets on auth buttons ────────────────────────────────── */
body.is-android-webview .dma-submit {
padding: 16px 20px !important;
min-height: 52px !important;
font-size: 16px !important;
border-radius: 12px !important;
}
body.is-android-webview .dma-google {
padding: 14px 20px !important;
min-height: 52px !important;
font-size: 15px !important;
}
body.is-android-webview .dma-input {
padding: 14px 16px !important;
min-height: 52px !important;
border-radius: 12px !important;
}
body.is-android-webview .dma-pw-wrap .dma-input {
padding-right: 50px !important;
}
body.is-android-webview .dma-field {
margin-bottom: 20px !important;
}
/* ── 7. Remove active hover transforms on touch (feel wrong on mobile) ────── */
body.is-android-webview .dma-submit:hover,
body.is-android-webview .dma-google:hover,
body.is-android-webview .dm-card:hover {
transform: none !important;
}
body.is-android-webview .dm-card:hover .dm-card-img {
transform: none !important;
}
body.is-android-webview .dm-card:hover .dm-card-overlay {
opacity: 0 !important;
}
/* ── 8. Masonry grid — tighter gutters on phone ───────────────────────────── */
@media (max-width: 680px) {
body.is-android-webview .dm-masonry {
column-gap: 8px !important;
padding: 10px 8px !important;
}
body.is-android-webview .dm-masonry .dm-card {
margin-bottom: 8px !important;
}
body.is-android-webview .dm-categories {
padding: 10px 10px 12px !important;
gap: 6px !important;
}
body.is-android-webview .dm-cat-btn {
padding: 7px 14px !important;
font-size: 13px !important;
}
}
/* ── 9. Category pills — bigger touch targets ─────────────────────────────── */
body.is-android-webview .dmbn-item {
min-height: 48px !important;
padding: 6px 0 !important;
}
body.is-android-webview .dmbn-fab > svg {
width: 52px !important;
height: 52px !important;
}
/* ── 10. Dashboard sidebar — full viewport minus safe areas ───────────────── */
body.is-android-webview .dm-dash-sidebar {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ── 11. Modals / overlays — respect top safe area ───────────────────────── */
body.is-android-webview .dm-logout-modal,
body.is-android-webview [role="dialog"] {
padding-top: env(safe-area-inset-top, 0px) !important;
}
/* ── 12. Single-prompt page — content clearance ──────────────────────────── */
body.is-android-webview .dmsp-wrap,
body.is-android-webview .dm-single-wrap {
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ── 13. Search bar on search/results pages — prevent zoom ───────────────── */
body.is-android-webview .dm-search-field,
body.is-android-webview .dmsr-search-input {
font-size: 16px !important;
}
/* ── 14. Add-prompt / edit-prompt pages ──────────────────────────────────── */
body.is-android-webview .dmap-wrap {
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ── END ANDROID WEBVIEW FIXES ─────────────────────────────────────────────── */
/* ── Inline column-count responsive overrides ─────────────────────────────── */
/* For all inline column-count:3 containers (pack cards, feature grids, etc.) */
@media (max-width: 900px) {
[style*="column-count:3"] { column-count: 2 !important; }
}
@media (max-width: 560px) {
[style*="column-count:3"] { column-count: 1 !important; }
[style*="column-count:4"] { column-count: 2 !important; }
}
/* ── END inline column-count overrides ────────────────────────────────────── */