/* =====================================================================
   MieWord Public Dashboard — v2.0 (fully corrected & professional)
   ===================================================================== */

/* ── Reset & scope ──────────────────────────────────────────────────── */
.mw-dashboard,
.mw-dashboard * {
	box-sizing: border-box;
}

/* ── Design tokens ──────────────────────────────────────────────────── */
.mw-dashboard {
	--mw-indigo  : #4f46e5;
	--mw-indigo-d: #3730a3;
	--mw-green   : #059669;
	--mw-amber   : #d97706;
	--mw-red     : #dc2626;
	--mw-blue    : #2563eb;
	--mw-muted   : #6b7280;
	--mw-border  : #e5e7eb;
	--mw-bg      : #f9fafb;
	--mw-card-bg : #ffffff;
	--mw-text    : #111827;
	--mw-radius  : 14px;
	--mw-shadow  : 0 2px 16px rgba(0,0,0,.08);
	--mw-font    : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	font-family  : var(--mw-font);
	color        : var(--mw-text);
	font-size    : 15px;
	line-height  : 1.5;
	max-width    : 1100px;
	margin       : 0 auto;
	padding      : 0 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO BANNER
   ══════════════════════════════════════════════════════════════════════ */
.mw-hero {
	background   : linear-gradient(135deg, var(--mw-indigo) 0%, #7c3aed 100%);
	border-radius: var(--mw-radius);
	padding      : 28px 32px;
	margin-bottom: 24px;
	display      : flex;
	align-items  : center;
	justify-content: space-between;
	gap          : 24px;
	flex-wrap    : wrap;
	color        : #fff;
}

.mw-hero-greeting {
	display    : flex;
	align-items: center;
	gap        : 14px;
	flex-shrink: 0;
}

.mw-hero-avatar {
	width        : 56px;
	height       : 56px;
	border-radius: 50%;
	border       : 3px solid rgba(255,255,255,.4);
	display      : block;
}

.mw-hero-hi {
	margin : 0 0 2px;
	font-size: 13px;
	opacity : .75;
}

.mw-hero-name {
	margin : 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color  : #fff;
}

.mw-hero-balances {
	display    : flex;
	align-items: center;
	gap        : 24px;
	flex-wrap  : wrap;
}

.mw-hbal {
	display       : flex;
	flex-direction: column;
	align-items   : flex-end;
}

.mw-hbal-label {
	font-size: 11px;
	opacity  : .7;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-bottom : 2px;
}

.mw-hbal-value {
	font-size  : 20px;
	font-weight: 700;
}

.mw-hbal-value.mw-amber  { color: #fcd34d; }
.mw-hbal-value.mw-green  { color: #6ee7b7; }
.mw-hbal-value.mw-muted  { color: rgba(255,255,255,.55); font-size: 16px; }

.mw-hbal-main .mw-hbal-value { font-size: 28px; }

/* ══════════════════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════════════════ */
.mw-tabs {
	display      : flex;
	gap          : 2px;
	background   : var(--mw-card-bg);
	border       : 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	padding      : 6px;
	margin-bottom: 20px;
	overflow-x   : auto;
	-webkit-overflow-scrolling: touch;
}

.mw-tab {
	flex          : 1;
	min-width     : 110px;
	padding       : 10px 14px;
	border        : none;
	background    : transparent;
	border-radius : 10px;
	cursor        : pointer;
	font-size     : 14px;
	font-weight   : 500;
	color         : var(--mw-muted);
	white-space   : nowrap;
	transition    : background .15s, color .15s;
	font-family   : var(--mw-font);
}

.mw-tab:hover {
	background: var(--mw-bg);
	color     : var(--mw-indigo);
}

.mw-tab.mw-tab-active,
.mw-tab[aria-selected="true"] {
	background: var(--mw-indigo);
	color     : #fff;
	font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════════════════ */
.mw-panel {
	display: none;
}

.mw-panel.mw-panel-active {
	display: block;
	animation: mwFadeIn .2s ease;
}

@keyframes mwFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════ */
.mw-card {
	background   : var(--mw-card-bg);
	border       : 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	padding      : 24px 28px;
	margin-bottom: 20px;
	box-shadow   : var(--mw-shadow);
}

.mw-card:last-child {
	margin-bottom: 0;
}

.mw-card-head {
	display        : flex;
	align-items    : center;
	justify-content: space-between;
	flex-wrap      : wrap;
	gap            : 8px;
	margin-bottom  : 12px;
}

.mw-card-head h3 {
	margin : 0;
	font-size: 17px;
	font-weight: 700;
}

.mw-card h3 {
	margin-top   : 0;
	margin-bottom: 12px;
	font-size    : 17px;
	font-weight  : 700;
}

.mw-desc {
	color        : var(--mw-muted);
	font-size    : 14px;
	margin-bottom: 16px;
	margin-top   : 0;
}

/* ══════════════════════════════════════════════════════════════════════
   REFERRAL LINK
   ══════════════════════════════════════════════════════════════════════ */
.mw-ref-code-badge {
	background   : #f0f9ff;
	border       : 1px solid #bae6fd;
	border-radius: 6px;
	padding      : 4px 10px;
	font-size    : 13px;
	color        : #0369a1;
}

.mw-link-row {
	display  : flex;
	gap      : 10px;
	margin-bottom: 14px;
}

.mw-link-input {
	flex         : 1;
	padding      : 11px 14px;
	border       : 1px solid var(--mw-border);
	border-radius: 8px;
	font-size    : 14px;
	background   : var(--mw-bg);
	color        : var(--mw-text);
	min-width    : 0;
}

.mw-share-strip {
	display    : flex;
	align-items: center;
	gap        : 8px;
	flex-wrap  : wrap;
}

.mw-share-label {
	font-size: 13px;
	color    : var(--mw-muted);
	flex-shrink: 0;
}

.mw-share-btn {
	display      : inline-block;
	padding      : 6px 14px;
	border-radius: 20px;
	text-decoration: none;
	font-size    : 12px;
	font-weight  : 600;
	color        : #fff !important;
	transition   : opacity .15s;
	line-height  : 1.4;
}

.mw-share-btn:hover { opacity: .85; }

.mw-share-wa { background: #25d366; }
.mw-share-fb { background: #1877f2; }
.mw-share-tw { background: #1da1f2; }
.mw-share-tg { background: #2ca5e0; }
.mw-share-em { background: #6b7280; }

/* ══════════════════════════════════════════════════════════════════════
   STATS GRID
   ══════════════════════════════════════════════════════════════════════ */
.mw-stats-grid {
	display              : grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap                  : 16px;
	margin-bottom        : 20px;
}

.mw-stat-card {
	background   : var(--mw-card-bg);
	border       : 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	padding      : 20px 16px;
	text-align   : center;
	box-shadow   : var(--mw-shadow);
	display      : flex;
	flex-direction: column;
	align-items  : center;
	gap          : 4px;
}

.mw-stat-icon {
	font-size    : 26px;
	line-height  : 1;
	display      : block;
	margin-bottom: 4px;
}

.mw-stat-val {
	font-size  : 26px;
	font-weight: 700;
	color      : var(--mw-indigo);
	line-height: 1.1;
	display    : block;
}

.mw-stat-lbl {
	font-size: 12px;
	color    : var(--mw-muted);
	display  : block;
}

/* ══════════════════════════════════════════════════════════════════════
   CONDITIONS LIST
   ══════════════════════════════════════════════════════════════════════ */
.mw-card-conditions { border-left: 4px solid var(--mw-indigo); }

.mw-conditions {
	list-style: none;
	margin     : 0;
	padding    : 0;
}

.mw-conditions li {
	display      : flex;
	align-items  : flex-start;
	gap          : 14px;
	padding      : 14px 0;
	border-bottom: 1px solid var(--mw-border);
}

.mw-conditions li:last-child { border-bottom: none; }

.mw-cond-icon {
	font-size : 20px;
	flex-shrink: 0;
	line-height: 1.4;
}

.mw-cond-body {
	flex: 1;
}

.mw-cond-body strong {
	display  : block;
	font-size: 15px;
	margin-bottom: 2px;
}

.mw-cond-body small {
	color    : var(--mw-muted);
	font-size: 13px;
}

.mw-cond-done  .mw-cond-body strong { color: var(--mw-green); }
.mw-cond-pending .mw-cond-body strong { color: var(--mw-amber); }

.mw-cond-progress {
	height       : 6px;
	background   : var(--mw-border);
	border-radius: 99px;
	overflow     : hidden;
	margin-top   : 8px;
	max-width    : 300px;
}

.mw-cond-fill {
	height       : 100%;
	background   : var(--mw-green);
	border-radius: 99px;
	transition   : width .5s ease;
}

/* ══════════════════════════════════════════════════════════════════════
   BONUS RATES GRID
   ══════════════════════════════════════════════════════════════════════ */
.mw-rates-grid {
	display              : grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap                  : 12px;
}

.mw-rate-item {
	background   : var(--mw-bg);
	border       : 1px solid var(--mw-border);
	border-radius: 10px;
	padding      : 14px 16px;
	display      : grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows   : auto auto;
	gap          : 2px 10px;
	align-items  : center;
}

.mw-rate-icon {
	grid-row    : 1 / 3;
	font-size   : 22px;
	line-height : 1;
}

.mw-rate-type {
	font-size  : 14px;
	font-weight: 600;
	color      : var(--mw-text);
	grid-column: 2;
}

.mw-rate-amount {
	font-size  : 16px;
	font-weight: 700;
	color      : var(--mw-indigo);
	grid-column: 3;
	grid-row   : 1 / 3;
	text-align : right;
}

.mw-rate-note {
	font-size  : 12px;
	color      : var(--mw-muted);
	grid-column: 2;
}

/* ══════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════ */
.mw-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mw-table {
	width          : 100%;
	border-collapse: collapse;
	font-size      : 14px;
	min-width      : 480px;
}

.mw-table th {
	text-align   : left;
	padding      : 10px 14px;
	background   : var(--mw-bg);
	border-bottom: 2px solid var(--mw-border);
	font-weight  : 600;
	white-space  : nowrap;
	color        : #374151;
}

.mw-table td {
	padding      : 11px 14px;
	border-bottom: 1px solid var(--mw-border);
	vertical-align: middle;
}

.mw-table tbody tr:last-child td { border-bottom: none; }
.mw-table tbody tr:hover { background: #fafafa; }

.mw-td-user {
	display    : flex;
	align-items: center;
	gap        : 10px;
}

.mw-rav {
	width        : 32px;
	height       : 32px;
	border-radius: 50%;
	flex-shrink  : 0;
}

.mw-td-user-info strong { display: block; }
.mw-td-user-info small  { color: var(--mw-muted); font-size: 12px; }
.mw-td-note { max-width: 220px; }

/* ── Mini progress in tables ──────────────────────────────────────── */
.mw-mini-track {
	height       : 6px;
	background   : var(--mw-border);
	border-radius: 99px;
	overflow     : hidden;
	margin-bottom: 3px;
	width        : 90px;
}

.mw-mini-fill {
	height       : 100%;
	background   : var(--mw-green);
	border-radius: 99px;
}

/* ══════════════════════════════════════════════════════════════════════
   PILLS / BADGES
   ══════════════════════════════════════════════════════════════════════ */
.mw-pill {
	display      : inline-block;
	padding      : 3px 11px;
	border-radius: 20px;
	font-size    : 12px;
	font-weight  : 600;
	white-space  : nowrap;
}

.mw-pill-green { background: #d1fae5; color: #065f46; }
.mw-pill-amber { background: #fef3c7; color: #92400e; }
.mw-pill-red   { background: #fee2e2; color: #991b1b; }
.mw-pill-grey  { background: #f3f4f6; color: #374151; }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.mw-btn {
	display        : inline-flex;
	align-items    : center;
	justify-content: center;
	gap            : 6px;
	padding        : 10px 20px;
	border-radius  : 8px;
	border         : none;
	cursor         : pointer;
	font-size      : 14px;
	font-weight    : 600;
	font-family    : var(--mw-font);
	text-decoration: none;
	transition     : all .15s;
	line-height    : 1;
	white-space    : nowrap;
}

.mw-btn:hover { opacity: .88; transform: translateY(-1px); }
.mw-btn:active { transform: translateY(0); }

.mw-btn-primary { background: var(--mw-indigo); color: #fff; }
.mw-btn-white   { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); }
.mw-btn-copy    { background: #f3f4f6; color: var(--mw-text); flex-shrink: 0; }
.mw-btn-sm      { padding: 6px 14px; font-size: 13px; }
.mw-btn-lg      { padding: 13px 28px; font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════════
   WITHDRAWAL FORM
   ══════════════════════════════════════════════════════════════════════ */
.mw-wd-form-card { border-top: 4px solid var(--mw-indigo); }

.mw-wd-balances {
	display      : flex;
	gap          : 24px;
	flex-wrap    : wrap;
	background   : var(--mw-bg);
	border       : 1px solid var(--mw-border);
	border-radius: 10px;
	padding      : 16px 20px;
	margin-bottom: 22px;
}

.mw-wdb-item span  { display: block; font-size: 12px; color: var(--mw-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.mw-wdb-item strong{ font-size: 20px; font-weight: 700; color: var(--mw-text); }

.mw-form-grid {
	display              : grid;
	grid-template-columns: 1fr 1fr;
	gap                  : 16px;
	margin-bottom        : 20px;
}

.mw-field {
	display       : flex;
	flex-direction: column;
	gap           : 6px;
}

.mw-field.mw-field-full { grid-column: 1 / -1; }

.mw-field label {
	font-size  : 14px;
	font-weight: 600;
	color      : #374151;
}

.mw-field input,
.mw-field select,
.mw-field textarea {
	padding      : 10px 14px;
	border       : 1px solid var(--mw-border);
	border-radius: 8px;
	font-size    : 14px;
	font-family  : var(--mw-font);
	color        : var(--mw-text);
	background   : #fff;
	width        : 100%;
	transition   : border-color .15s;
	outline      : none;
}

.mw-field input:focus,
.mw-field select:focus,
.mw-field textarea:focus {
	border-color: var(--mw-indigo);
	box-shadow  : 0 0 0 3px rgba(79,70,229,.12);
}

.mw-field textarea { resize: vertical; min-height: 90px; }

.mw-money-field {
	display: flex;
	align-items: stretch;
}

.mw-currency-sym {
	display      : flex;
	align-items  : center;
	padding      : 10px 12px;
	background   : var(--mw-bg);
	border       : 1px solid var(--mw-border);
	border-right : none;
	border-radius: 8px 0 0 8px;
	font-weight  : 700;
	color        : #374151;
	font-size    : 15px;
}

.mw-money-field input {
	border-radius: 0 8px 8px 0 !important;
	flex         : 1;
}

/* ══════════════════════════════════════════════════════════════════════
   BALANCE SUMMARY (in bonuses tab)
   ══════════════════════════════════════════════════════════════════════ */
.mw-balance-summary {
	font-size: 14px;
	color    : var(--mw-muted);
}

.mw-balance-summary strong { color: var(--mw-indigo); }

/* ══════════════════════════════════════════════════════════════════════
   MESSAGES / ALERTS
   ══════════════════════════════════════════════════════════════════════ */
.mw-msg {
	margin-top   : 14px;
	padding      : 12px 16px;
	border-radius: 8px;
	font-size    : 14px;
	font-weight  : 500;
}

.mw-msg.mw-msg-ok  { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.mw-msg.mw-msg-err { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.mw-alert {
	padding      : 14px 18px;
	border-radius: 10px;
	font-size    : 14px;
}

.mw-alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* ══════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════════════════ */
.mw-empty-state {
	text-align   : center;
	padding      : 48px 24px;
	color        : var(--mw-muted);
}

.mw-empty-icon {
	display    : block;
	font-size  : 48px;
	margin-bottom: 12px;
	line-height: 1;
}

.mw-empty-state p { font-size: 15px; margin: 0 0 16px; }

/* ══════════════════════════════════════════════════════════════════════
   INLINE REFERRAL LINK WIDGET  [mieword_ref_link]
   ══════════════════════════════════════════════════════════════════════ */
.mw-ref-inline-wrap { display: flex; gap: 8px; }
.mw-ref-input       { flex: 1; padding: 9px 13px; border: 1px solid var(--mw-border); border-radius: 8px; font-size: 13px; background: var(--mw-bg); min-width: 0; }
.mw-btn-copy        { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet / mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.mw-dashboard { font-size: 14px; }

	.mw-hero {
		flex-direction: column;
		align-items   : flex-start;
		padding       : 22px 20px;
	}

	.mw-hero-balances {
		justify-content: flex-start;
		gap            : 16px;
	}

	.mw-hbal { align-items: flex-start; }

	.mw-form-grid { grid-template-columns: 1fr; }
	.mw-field.mw-field-full { grid-column: 1; }

	.mw-stats-grid { grid-template-columns: repeat(2, 1fr); }

	.mw-rates-grid { grid-template-columns: 1fr; }

	.mw-tab { font-size: 13px; padding: 9px 10px; min-width: auto; flex: none; }

	.mw-card { padding: 18px 16px; }

	.mw-wd-balances { gap: 14px; }
}

@media (max-width: 480px) {
	.mw-hero { padding: 18px 16px; }
	.mw-hero-name { font-size: 18px; }
	.mw-hbal-main .mw-hbal-value { font-size: 22px; }
	.mw-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.mw-stat-card  { padding: 14px 10px; }
	.mw-stat-val   { font-size: 22px; }
	.mw-link-row   { flex-direction: column; }
	.mw-btn-copy   { width: 100%; }
	.mw-tabs       { gap: 1px; padding: 4px; }
	.mw-tab        { font-size: 12px; padding: 8px 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS (added via JS)
   ══════════════════════════════════════════════════════════════════════ */
.mw-toast {
	position     : fixed;
	bottom       : 24px;
	right        : 24px;
	z-index      : 99999;
	padding      : 13px 20px;
	border-radius: 10px;
	font-size    : 14px;
	font-weight  : 500;
	box-shadow   : 0 4px 20px rgba(0,0,0,.18);
	opacity      : 0;
	transform    : translateY(10px);
	transition   : opacity .25s, transform .25s;
	max-width    : 320px;
}

.mw-toast.mw-toast-show { opacity: 1; transform: translateY(0); }
.mw-toast-ok   { background: #065f46; color: #fff; }
.mw-toast-err  { background: #991b1b; color: #fff; }
.mw-toast-info { background: #1e40af; color: #fff; }