.mrk-dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mrk-btn { display: inline-block; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-size: 14px; }
.mrk-btn-primary { background: #333; color: #fff; }
.mrk-btn-primary:hover { background: #000; color: #fff; }
.mrk-product-table { width: 100%; border-collapse: collapse; }
.mrk-product-table th, .mrk-product-table td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; }
.mrk-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.mrk-status { padding: 3px 8px; border-radius: 3px; font-size: 12px; text-transform: uppercase; }
.mrk-status-publish { background: #e6f4ea; color: #1e7e34; }
.mrk-status-pending { background: #fff3cd; color: #8a6d00; }
.mrk-status-draft { background: #eee; color: #666; }
.mrk-wizard-form .mrk-input { width: 100%; max-width: 480px; padding: 8px; margin-top: 4px; }
.mrk-color-checkbox { display: inline-block; margin-right: 14px; margin-bottom: 6px; }
.mrk-notice { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
.mrk-notice-success { background: #e6f4ea; color: #1e7e34; }
.mrk-notice-error { background: #fdecea; color: #a11c1c; }
.mrk-artist-switcher { margin-bottom: 16px; }

/* Earnings summary — added with the payout ledger */
.mrk-earnings-summary { margin-bottom: 28px; }
.mrk-earnings-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.mrk-earnings-card { flex: 1; min-width: 180px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.mrk-earnings-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; }
.mrk-earnings-value { font-size: 26px; font-weight: 700; color: #222; }
.mrk-earnings-sub { font-size: 12px; color: #999; }
.mrk-top-designs h3 { margin-bottom: 10px; }
.mrk-earnings-empty { color: #888; font-style: italic; }

/* Custom login screen — deliberately plain WordPress-branding-free form */
.mrk-login-box { max-width: 360px; margin: 40px auto; }
.mrk-login-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; margin: 14px 0 4px; }
.mrk-login-form input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
.mrk-login-form button { margin-top: 20px; width: 100%; padding: 10px; border: none; border-radius: 4px; background: #222; color: #fff; font-size: 14px; cursor: pointer; }
.mrk-login-form button:hover { background: #000; }
.mrk-login-error { background: #fdecea; color: #a11c1c; padding: 10px 14px; border-radius: 4px; margin-bottom: 14px; font-size: 14px; }

/* Site-wide Log In / My Account link — auto-injected on every storefront page
   (not shown on the Login/Dashboard/Admin Panel pages, which have their own
   dark header instead). Deliberately plain — a normal small text link in
   the corner, not a boxed/shadowed button. */
.mrk-account-bar { position: fixed; top: 16px; right: 20px; z-index: 99999; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; display: flex; gap: 14px; align-items: center; }
.mrk-account-link { color: #666; text-decoration: none; }
.mrk-account-link:hover { color: #000; }
.mrk-account-logout { color: #a11c1c; font-weight: 400; text-transform: none; letter-spacing: normal; }
@media (max-width: 600px) { .mrk-account-bar { top: 10px; right: 12px; font-size: 10px; gap: 10px; } }

/* Inline variant — used once JS (class-mrk-custom-login.php) finds your
   theme's cart icon and moves this link to sit right in front of it in
   the actual header row, instead of floating over everything. */
.mrk-account-bar.mrk-account-bar-inline { position: static; top: auto; right: auto; z-index: auto; display: inline-flex; margin-right: 14px; }
.mrk-account-bar.mrk-account-bar-inline .mrk-account-link { color: inherit; opacity: 0.85; }
.mrk-account-bar.mrk-account-bar-inline .mrk-account-link:hover { opacity: 1; }

/* Front-end Admin Panel — everything the owner needs, no wp-admin required */
.mrk-admin-panel { max-width: 1100px; }
.mrk-admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
.mrk-admin-tabs a { padding: 10px 16px; text-decoration: none; color: #666; font-size: 14px; border-bottom: 2px solid transparent; }
.mrk-admin-tabs a.active { color: #000; border-bottom-color: #000; font-weight: 600; }
.mrk-admin-tabs a:hover { color: #000; }
.mrk-notice-info { background: #eef4fb; color: #1a4a7a; }
.mrk-admin-cards { display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0; }
.mrk-card { flex: 1; min-width: 320px; max-width: 440px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; padding: 18px 20px; }
.mrk-card h3 { margin-top: 0; }
.mrk-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.mrk-table th, .mrk-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 14px; }