/* ============================================================ LIGHT THEME (default) - Update these variables to match your site ============================================================ */ #mmc-container { --mmc-bg: inherit !important; /* Inherit from your site's main area */ --mmc-surface: inherit !important; /* Or set to a light grey if preferred */ --mmc-surface-alt: rgba(0,0,0,0.05) !important; /* Light grey for hover/alt states */ --mmc-border: #ccc !important; /* Ensure border is visible on white */ --mmc-text: inherit !important; /* Force text to inherit your site's color */ --mmc-text-muted: #666 !important; --mmc-primary: #0079D3 !important; } /* Update the input area to be transparent so it adopts the theme background */ #mmc-container .mmc-input-wrapper { flex-grow: 1; background: transparent !important; border: 1px solid var(--mmc-border); border-radius: 4px; padding: 8px 12px; } #mmc-container .mmc-textarea { width: 100%; min-height: 80px; background: transparent !important; color: var(--mmc-text) !important; /* Forces text to use theme color */ border: none; resize: vertical; outline: none; } #mmc-container .mmc-submit-btn { background-color: #0079D3 !important; /* Blue background */ color: #ffffff !important; /* White text */ border: none !important; padding: 6px 16px !important; border-radius: 9999px !important; cursor: pointer !important; font-weight: bold !important; font-size: 14px !important; opacity: 1 !important; } #mmc-container .mmc-submit-btn:hover { background-color: #005fa3 !important; /* Slightly darker blue on hover */ opacity: 1 !important; } /* ============================================================ DARK THEME — must apply to #mmc-container when is dark. `body.dark :root` is invalid (root = , not inside body), so we scope variables directly to the container. ============================================================ */ body.dark #mmc-container, body.dark-mode #mmc-container, body.text-ui-dark #mmc-container, html[data-theme="dark"] #mmc-container { --mmc-bg: transparent; --mmc-surface: #1a1a1b; --mmc-surface-alt: #272729; --mmc-border: #343536; --mmc-text: #d7dadc; --mmc-text-muted: #818384; --mmc-primary: #d7dadc; --mmc-hover: #343536; --mmc-line: #343536; } #mmc-container.mmc-wrapper { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--mmc-bg); color: var(--mmc-text); padding: 20px; border-radius: 8px; margin-top: 30px; box-sizing: border-box; } #mmc-container * { box-sizing: border-box; } .mmc-push-banner { background: var(--mmc-primary); color: #fff; padding: 12px 15px; border-radius: 4px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; } .mmc-push-banner button { background: #fff; color: var(--mmc-primary); border: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: bold; font-size: 12px; flex-shrink: 0; margin-left: 15px; } #mmc-container .mmc-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--mmc-border); padding-bottom: 15px; margin-bottom: 20px; } #mmc-container .mmc-header h3 { margin: 0; font-size: 16px; color: var(--mmc-text); font-weight: 500; } #mmc-container .mmc-header-actions { display: flex; align-items: center; gap: 15px; } #mmc-container .mmc-sort-dropdown { background: transparent; color: var(--mmc-text-muted); border: none; font-size: 13px; cursor: pointer; font-weight: 700; outline: none; } #mmc-container .mmc-sort-dropdown option { background: var(--mmc-surface); color: var(--mmc-text); } #mmc-container #mmc-notification-bell { cursor: pointer; color: var(--mmc-text-muted); transition: color 0.2s; display: flex; align-items: center; } #mmc-container #mmc-notification-bell:hover { color: var(--mmc-text); } #mmc-container .mmc-form-flex { display: flex; gap: 10px; margin-bottom: 20px; align-items: flex-start; } #mmc-container .mmc-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--mmc-surface); } #mmc-container .mmc-input-wrapper { flex-grow: 1; background: var(--mmc-surface); border: 1px solid var(--mmc-border); border-radius: 4px; padding: 8px 12px; transition: border 0.2s; } #mmc-container .mmc-input-wrapper:focus-within { border-color: var(--mmc-text); } #mmc-container .mmc-textarea { width: 100%; min-height: 80px; background: transparent; border: none; color: var(--mmc-text); resize: vertical; outline: none; font-size: 14px; padding: 0; } #mmc-container .mmc-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; flex-wrap: wrap; gap: 10px; } #mmc-container .mmc-tools-left { display: flex; align-items: center; gap: 6px; position: relative; } /* Reset for any button inside the container to eliminate default theme "black box" styling */ #mmc-container button { box-shadow: none !important; } #mmc-container .mmc-tool-btn { background-color: transparent !important; border: none !important; cursor: pointer; color: var(--mmc-text-muted); transition: color 0.2s, background-color 0.2s; padding: 4px 6px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } #mmc-container .mmc-tool-btn:hover, #mmc-container .mmc-tool-btn.active { background-color: var(--mmc-surface-alt) !important; color: var(--mmc-text) !important; } #mmc-container .mmc-emoji-wrapper { position: relative; } .mmc-native-emoji-picker { display: none; position: absolute; top: 35px; left: 0; z-index: 100; background: var(--mmc-surface); border: 1px solid var(--mmc-border); border-radius: 6px; padding: 10px; width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); grid-template-columns: repeat(6, 1fr); gap: 5px; max-height: 150px; overflow-y: auto; } .mmc-native-emoji-picker.active { display: grid; } .mmc-emoji-item { cursor: pointer; font-size: 20px; text-align: center; border-radius: 4px; padding: 2px; } .mmc-emoji-item:hover { background: var(--mmc-hover); } #mmc-container .mmc-gif-input { background: var(--mmc-surface); border: 1px solid var(--mmc-border); color: var(--mmc-text); padding: 6px 10px; border-radius: 4px; font-size: 12px; width: 160px; outline: none; margin-left: 6px; } #mmc-container .mmc-cancel-edit-btn { background: transparent !important; color: var(--mmc-text-muted) !important; border: 1px solid var(--mmc-border) !important; padding: 6px 16px; border-radius: 9999px; cursor: pointer; font-weight: bold; font-size: 14px; transition: color 0.2s; } #mmc-container .mmc-cancel-edit-btn:hover { color: var(--mmc-text) !important; background: var(--mmc-surface-alt) !important; } /* Update this in style.css to force visibility hidden by default */ #mmc-container .mmc-spoiler { background-color: #777777 !important; /* Force high contrast color */ color: #777777 !important; /* Hide text by matching background */ border-radius: 4px; padding: 0 4px; cursor: pointer; user-select: none; transition: background-color 0.2s; display: inline-block; /* Ensure it behaves like a block to hold background */ } /* Ensure the text inside is explicitly hidden until revealed */ #mmc-container .mmc-spoiler:not(.revealed) * { visibility: hidden !important; } #mmc-container .mmc-spoiler.revealed { background-color: inherit !important; color: inherit !important; } #mmc-container .mmc-spoiler.revealed * { visibility: visible; } /* Container for the media + the spoiler label */ .mmc-spoiler-media-wrapper { position: relative; display: inline-block; cursor: pointer; overflow: hidden; border-radius: 4px; } /* Update this in style.css */ .mmc-spoiler-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold; z-index: 2; /* Remove 'pointer-events: none;' */ cursor: pointer; } /* Hide label when revealed */ .mmc-spoiler-media-wrapper.revealed .mmc-spoiler-label { display: none; } /* Only uploaded images get blurred when explicitly spoiled */ .mmc-comment-media.mmc-spoiled-media:not(.revealed) { filter: blur(30px) brightness(0.7) !important; transition: filter 0.3s ease; cursor: pointer !important; } /* Remove blur when revealed */ .mmc-comment-media.revealed { filter: blur(0) brightness(1) !important; } #mmc-container #mmc-comments-list { margin-top: 15px; } #mmc-container .mmc-comment { width: 100%; margin-bottom: 8px; position: relative; } #mmc-container .mmc-comment-layout { display: flex; width: 100%; } #mmc-container .mmc-avatar-column { display: flex; flex-direction: column; align-items: center; width: 32px; margin-right: 8px; flex-shrink: 0; } /* The single vertical thread line under each comment's avatar. This is the ONLY indentation indicator — no second border on the replies container. */ #mmc-container .mmc-threadline { flex-grow: 1; width: 2px; background: var(--mmc-line); margin-top: 8px; cursor: pointer; transition: background 0.2s; } #mmc-container .mmc-threadline:hover { background: var(--mmc-text-muted); } #mmc-container .mmc-content-column { flex-grow: 1; min-width: 0; } #mmc-container .mmc-comment-meta { font-size: 12px; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; color: var(--mmc-text-muted); } #mmc-container .mmc-comment-meta strong { color: var(--mmc-text); font-weight: 500; font-size: 13px; } #mmc-container .mmc-dot { font-size: 10px; } #mmc-container .mmc-comment-text { font-size: 14px; line-height: 21px; margin-bottom: 8px; color: var(--mmc-text); word-break: break-word; } #mmc-container .mmc-comment-media { max-width: 100%; max-height: 250px; border-radius: 4px; display: block; margin-bottom: 8px; } #mmc-container .mmc-tenor-wrapper { width: 100%; max-width: 350px; height: 250px; border-radius: 4px; overflow: hidden; margin-bottom: 8px; } #mmc-container .mmc-tenor-wrapper iframe { width: 100%; height: 100%; pointer-events: none; } /* Inline [+] / [-] toggle in the comment meta line and collapsed header */ #mmc-container .mmc-toggle-btn { background-color: transparent !important; border: none !important; box-shadow: none !important; color: var(--mmc-text-muted); cursor: pointer; padding: 0 4px; margin-right: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; line-height: 1; border-radius: 3px; transition: background-color 0.15s, color 0.15s; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; } #mmc-container .mmc-toggle-btn:hover { background-color: var(--mmc-surface-alt) !important; color: var(--mmc-text) !important; } #mmc-container .mmc-comment-actions { display: flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--mmc-text-muted); margin-bottom: 8px; margin-left: -6px; flex-wrap: wrap; } #mmc-container .mmc-vote-btn, #mmc-container .mmc-reply-btn, #mmc-container .mmc-edit-btn, #mmc-container .mmc-delete-btn { background-color: transparent !important; border: none !important; box-shadow: none !important; color: var(--mmc-text-muted); cursor: pointer; padding: 4px 6px; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; transition: background-color 0.2s; font-weight: bold; font-size: 12px; margin-right: 2px; } #mmc-container .mmc-vote-btn:hover, #mmc-container .mmc-reply-btn:hover, #mmc-container .mmc-edit-btn:hover, #mmc-container .mmc-delete-btn:hover { background-color: var(--mmc-surface-alt) !important; color: var(--mmc-text) !important; } #mmc-container .mmc-vote-btn.active-up { color: #ff4500 !important; } #mmc-container .mmc-vote-btn.active-down { color: #7193ff !important; } #mmc-container .mmc-vote-count { font-size: 12px; min-width: 12px; text-align: center; } #mmc-container .mmc-collapsed-header { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mmc-text-muted); padding: 8px 0; background: var(--mmc-bg); } /* Replies container — NO left border, NO extra padding. The threadline under each comment's avatar is the only visual nesting cue. */ #mmc-container .mmc-replies-container { margin-left: 0; padding-left: 0; border-left: none; margin-top: 4px; } #mmc-container .mmc-login-prompt { padding: 15px; background: var(--mmc-surface-alt); border-radius: 4px; text-align: center; border: 1px solid var(--mmc-border); } #mmc-container .mmc-login-prompt a { color: var(--mmc-text); text-decoration: underline; font-weight: bold; } /* Soft-deleted comment: muted author, italic placeholder text, no actions visible. */ #mmc-container .mmc-comment-deleted > .mmc-collapsible-body .mmc-comment-meta strong, #mmc-container .mmc-comment-deleted > .mmc-collapsed-header strong { color: var(--mmc-text-muted); font-style: italic; font-weight: 500; } #mmc-container .mmc-comment-deleted .mmc-deleted-text { color: var(--mmc-text-muted); font-style: italic; } #mmc-container .mmc-comment-deleted > .mmc-collapsible-body .mmc-avatar { opacity: 0.5; } /* ============================================================ "MY COMMENTS" — user-settings tab Inherits the same theme variables as the main comment system, so dark mode flips automatically when body.dark toggles. ============================================================ */ .mmc-my-comments-wrap { --mmc-bg: transparent; --mmc-surface: #f8f9fa; --mmc-surface-alt: #f0f0f0; --mmc-border: #e1e4e8; --mmc-text: #24292e; --mmc-text-muted: #586069; --mmc-primary: #0079D3; --mmc-line: #e1e4e8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--mmc-text); } body.dark .mmc-my-comments-wrap, body.dark-mode .mmc-my-comments-wrap, body.text-ui-dark .mmc-my-comments-wrap, html[data-theme="dark"] .mmc-my-comments-wrap { --mmc-surface: #1a1a1b; --mmc-surface-alt: #272729; --mmc-border: #343536; --mmc-text: #d7dadc; --mmc-text-muted: #818384; --mmc-line: #343536; } .mmc-my-comments-wrap * { box-sizing: border-box; } .mmc-my-comments-wrap .mmc-mc-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--mmc-border); } .mmc-my-comments-wrap .mmc-mc-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--mmc-text); } .mmc-my-comments-wrap .mmc-mc-count { font-size: 13px; color: var(--mmc-text-muted); } .mmc-my-comments-wrap .mmc-mc-empty { padding: 30px 15px; text-align: center; color: var(--mmc-text-muted); background: var(--mmc-surface); border-radius: 6px; } .mmc-my-comments-wrap .mmc-mc-list { display: flex; flex-direction: column; gap: 12px; } .mmc-my-comments-wrap .mmc-mc-row { background: var(--mmc-surface); border: 1px solid var(--mmc-border); border-radius: 6px; padding: 14px 16px; transition: border-color 0.15s; } .mmc-my-comments-wrap .mmc-mc-row:hover { border-color: var(--mmc-text-muted); } .mmc-my-comments-wrap .mmc-mc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--mmc-text-muted); margin-bottom: 8px; } .mmc-my-comments-wrap .mmc-mc-post-link { color: var(--mmc-text); font-weight: 600; text-decoration: none; font-size: 13px; } .mmc-my-comments-wrap .mmc-mc-post-link:hover { text-decoration: underline; } .mmc-my-comments-wrap .mmc-mc-post-missing { color: var(--mmc-text-muted); font-style: italic; font-weight: 500; } .mmc-my-comments-wrap .mmc-mc-dot { font-size: 10px; opacity: 0.6; } .mmc-my-comments-wrap .mmc-mc-score { font-weight: 600; } .mmc-my-comments-wrap .mmc-mc-media-badge { cursor: default; } .mmc-my-comments-wrap .mmc-mc-body { font-size: 14px; line-height: 1.5; color: var(--mmc-text); word-break: break-word; margin-bottom: 10px; } .mmc-my-comments-wrap .mmc-mc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mmc-my-comments-wrap .mmc-mc-action { background: transparent !important; border: 1px solid var(--mmc-border) !important; color: var(--mmc-text-muted) !important; cursor: pointer; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background-color 0.15s, color 0.15s, border-color 0.15s; box-shadow: none !important; line-height: 1.4; display: inline-flex; align-items: center; } .mmc-my-comments-wrap .mmc-mc-action:hover { background: var(--mmc-surface-alt) !important; color: var(--mmc-text) !important; border-color: var(--mmc-text-muted) !important; } .mmc-my-comments-wrap .mmc-mc-delete:hover { color: #e74c3c !important; border-color: #e74c3c !important; } .mmc-my-comments-wrap .mmc-mc-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mmc-border); } .mmc-my-comments-wrap .mmc-mc-page-btn { background: transparent !important; color: var(--mmc-text) !important; border: 1px solid var(--mmc-border) !important; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; box-shadow: none !important; transition: background-color 0.15s; } .mmc-my-comments-wrap .mmc-mc-page-btn:hover:not(:disabled) { background: var(--mmc-surface-alt) !important; } .mmc-my-comments-wrap .mmc-mc-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .mmc-my-comments-wrap .mmc-mc-page-info { font-size: 13px; color: var(--mmc-text-muted); } /* Inline edit form on the My Comments page */ .mmc-my-comments-wrap .mmc-mc-edit-form { margin-bottom: 10px; } .mmc-my-comments-wrap .mmc-mc-edit-form .mmc-input-wrapper { background: var(--mmc-surface-alt); border: 1px solid var(--mmc-border); border-radius: 4px; padding: 8px 12px; } .mmc-my-comments-wrap .mmc-mc-edit-form .mmc-textarea { width: 100%; min-height: 80px; background: transparent; border: none; color: var(--mmc-text); resize: vertical; outline: none; font-size: 14px; padding: 0; font-family: inherit; } .mmc-my-comments-wrap .mmc-mc-edit-actions { margin-top: 8px; display: flex; gap: 10px; } .mmc-my-comments-wrap .mmc-mc-edit-form .mmc-submit-btn { background: var(--mmc-text) !important; color: var(--mmc-surface) !important; border: none !important; padding: 6px 16px; border-radius: 9999px; cursor: pointer; font-weight: bold; font-size: 14px; box-shadow: none !important; } .mmc-my-comments-wrap .mmc-mc-edit-form .mmc-cancel-edit-btn { background: transparent !important; color: var(--mmc-text-muted) !important; border: 1px solid var(--mmc-border) !important; padding: 6px 16px; border-radius: 9999px; cursor: pointer; font-weight: bold; font-size: 14px; box-shadow: none !important; } .mmc-my-comments-wrap .mmc-mc-edit-form .mmc-cancel-edit-btn:hover { background: var(--mmc-surface-alt) !important; color: var(--mmc-text) !important; } @media (max-width: 600px) { .mmc-my-comments-wrap .mmc-mc-row { padding: 12px; } .mmc-my-comments-wrap .mmc-mc-meta { font-size: 11px; } .mmc-my-comments-wrap .mmc-mc-actions { flex-wrap: wrap; } } /* ============================================================ PREMIUM — badge + name styling (applied wherever names render) ============================================================ */ .mmc-premium-badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.4; vertical-align: middle; background: linear-gradient(135deg, #ffd700 0%, #ff9500 100%); color: #1a1a1b; text-shadow: 0 1px 0 rgba(255,255,255,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.15); user-select: none; } .mmc-premium-name { /* base — only sets weight if not overridden by .mmc-premium-bold below */ font-weight: 500; } .mmc-premium-name.mmc-premium-bold { font-weight: 700; } .mmc-premium-name.mmc-premium-italic { font-style: italic; } @keyframes mmc-premium-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .mmc-premium-name.mmc-premium-animated { background: linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcf7f, #4d96ff, #c77dff, #ff6b6b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mmc-premium-gradient-shift 6s linear infinite; } /* ============================================================ PREMIUM SETTINGS PAGE ============================================================ */ .mmc-premium-wrap { --mmc-bg: transparent; --mmc-surface: #f8f9fa; --mmc-surface-alt: #f0f0f0; --mmc-border: #e1e4e8; --mmc-text: #24292e; --mmc-text-muted: #586069; --mmc-primary: #0079D3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--mmc-text); } body.dark .mmc-premium-wrap, body.dark-mode .mmc-premium-wrap, html[data-theme="dark"] .mmc-premium-wrap { --mmc-surface: #1a1a1b; --mmc-surface-alt: #272729; --mmc-border: #343536; --mmc-text: #d7dadc; --mmc-text-muted: #818384; } .mmc-premium-wrap * { box-sizing: border-box; } .mmc-premium-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--mmc-border); } .mmc-premium-header h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--mmc-text); } .mmc-premium-sub { margin: 0; color: var(--mmc-text-muted); font-size: 13px; } .mmc-premium-preview-card { background: var(--mmc-surface); border: 1px solid var(--mmc-border); border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; } .mmc-premium-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--mmc-text-muted); margin-bottom: 8px; font-weight: 600; } .mmc-premium-preview-box { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mmc-premium-preview-meta { color: var(--mmc-text-muted); font-size: 12px; margin-left: 6px; } .mmc-premium-form { margin-bottom: 24px; } .mmc-premium-row { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--mmc-border); } .mmc-premium-row:last-of-type { border-bottom: none; } .mmc-premium-label { display: block; font-weight: 600; color: var(--mmc-text); margin-bottom: 8px; font-size: 13px; } .mmc-premium-switch, .mmc-premium-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--mmc-text); font-size: 13px; } .mmc-premium-switch input, .mmc-premium-check input { cursor: pointer; } .mmc-premium-select { background: var(--mmc-surface); color: var(--mmc-text); border: 1px solid var(--mmc-border); padding: 6px 10px; border-radius: 4px; font-size: 13px; min-width: 180px; } .mmc-premium-color-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .mmc-premium-color-input { width: 44px; height: 32px; padding: 0; border: 1px solid var(--mmc-border); border-radius: 4px; cursor: pointer; background: transparent; } .mmc-premium-color-text { background: var(--mmc-surface); color: var(--mmc-text); border: 1px solid var(--mmc-border); padding: 6px 10px; border-radius: 4px; font-size: 13px; width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .mmc-premium-btn-link { background: transparent !important; border: none !important; color: var(--mmc-text-muted) !important; cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0 4px; box-shadow: none !important; } .mmc-premium-btn-link:hover { color: var(--mmc-text) !important; } .mmc-premium-palette { display: flex; flex-wrap: wrap; gap: 6px; } .mmc-premium-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--mmc-border) !important; cursor: pointer; padding: 0; box-shadow: none !important; transition: transform 0.15s, border-color 0.15s; } .mmc-premium-swatch:hover { transform: scale(1.15); border-color: var(--mmc-text) !important; } .mmc-premium-flourishes { display: flex; flex-wrap: wrap; gap: 20px; } .mmc-premium-submit-row { display: flex; align-items: center; gap: 14px; } .mmc-premium-save { background: linear-gradient(135deg, #ffd700 0%, #ff9500 100%) !important; color: #1a1a1b !important; border: none !important; padding: 8px 22px; border-radius: 9999px; cursor: pointer; font-weight: 700; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; transition: transform 0.15s, opacity 0.15s; } .mmc-premium-save:hover { transform: translateY(-1px); } .mmc-premium-save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .mmc-premium-status { font-size: 13px; font-weight: 600; } .mmc-premium-status-ok { color: #1DB954; } .mmc-premium-status-err { color: #e74c3c; } .mmc-premium-perks { background: var(--mmc-surface); border: 1px solid var(--mmc-border); border-radius: 6px; padding: 16px 20px; margin-top: 20px; } .mmc-premium-perks h4 { margin: 0 0 10px; font-size: 14px; color: var(--mmc-text); } .mmc-premium-perks ul { margin: 0; padding-left: 18px; color: var(--mmc-text-muted); font-size: 13px; line-height: 1.7; }