/*
 * MyChrono — base.css
 * Design system foundation: tokens, reset, typography, primitives.
 * Premium dark theme with glassmorphism, mirroring the iOS app.
 */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
	/* Surfaces */
	--mc-bg: #0a0e1a;
	--mc-bg-elevated: #0f1426;
	--mc-bg-overlay: rgba(255, 255, 255, 0.04);
	--mc-bg-overlay-strong: rgba(255, 255, 255, 0.07);
	--mc-bg-glass: rgba(20, 26, 46, 0.55);
	--mc-bg-glass-strong: rgba(20, 26, 46, 0.78);

	/* Borders */
	--mc-border: rgba(255, 255, 255, 0.08);
	--mc-border-strong: rgba(255, 255, 255, 0.14);
	--mc-border-focus: rgba(120, 145, 255, 0.55);

	/* Text */
	--mc-text: #f5f7fb;
	--mc-text-muted: #a5adc2;
	--mc-text-dim: #6b7290;
	--mc-text-inverse: #0a0e1a;

	/* Accent gradients (matching iOS app) */
	--mc-grad-primary:   linear-gradient(135deg, #6f7bff 0%, #a16bff 100%);
	--mc-grad-maint:     linear-gradient(135deg, #ff8a3c 0%, #ff3a55 100%);
	--mc-grad-market:    linear-gradient(135deg, #28d086 0%, #2ab8e8 100%);
	--mc-grad-ai:        linear-gradient(135deg, #9d6bff 0%, #4c8aff 100%);
	--mc-grad-gain:      linear-gradient(135deg, #28d086 0%, #5be6a4 100%);
	--mc-grad-loss:      linear-gradient(135deg, #ff5f6d 0%, #ff8a3c 100%);

	/* Solid accents */
	--mc-accent: #6f7bff;
	--mc-accent-strong: #8b95ff;
	--mc-success: #28d086;
	--mc-warning: #ffb547;
	--mc-danger: #ff5f6d;

	/* Radius */
	--mc-r-sm: 8px;
	--mc-r-md: 12px;
	--mc-r-lg: 18px;
	--mc-r-xl: 24px;
	--mc-r-pill: 999px;

	/* Shadows */
	--mc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
	--mc-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--mc-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
	--mc-shadow-glow: 0 12px 36px rgba(111, 123, 255, 0.28);

	/* Spacing scale */
	--mc-s-1: 4px;
	--mc-s-2: 8px;
	--mc-s-3: 12px;
	--mc-s-4: 16px;
	--mc-s-5: 24px;
	--mc-s-6: 32px;
	--mc-s-7: 48px;
	--mc-s-8: 64px;

	/* Typography */
	--mc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
	--mc-font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
	--mc-font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

	/* Motion */
	--mc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mc-dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--mc-font-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--mc-text);
	background: var(--mc-bg);
	background-image:
		radial-gradient(ellipse 80% 60% at 15% -10%, rgba(111, 123, 255, 0.18), transparent 60%),
		radial-gradient(ellipse 60% 50% at 90% 0%, rgba(255, 138, 60, 0.10), transparent 60%),
		radial-gradient(ellipse 50% 40% at 50% 110%, rgba(40, 208, 134, 0.08), transparent 70%);
	background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }

::selection { background: rgba(111, 123, 255, 0.35); color: #fff; }

/* Utility focus ring */
:focus-visible {
	outline: 2px solid var(--mc-border-focus);
	outline-offset: 2px;
	border-radius: var(--mc-r-sm);
}

/* ============================================================
   Layout
   ============================================================ */
.mc-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--mc-s-5);
}
@media (max-width: 640px) {
	.mc-container { padding: 0 var(--mc-s-4); }
}

.mc-main {
	min-height: calc(100vh - 200px);
	padding: var(--mc-s-6) 0 var(--mc-s-8);
}

/* ============================================================
   Header
   ============================================================ */
.mc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--mc-bg-glass-strong);
	backdrop-filter: saturate(180%) blur(22px);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	border-bottom: 1px solid var(--mc-border);
}
.mc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-s-5);
	height: 68px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--mc-s-5);
}
@media (max-width: 640px) {
	.mc-header__inner { padding: 0 var(--mc-s-4); }
}

/* Brand */
.mc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-s-3);
	color: var(--mc-text);
}
.mc-brand--centered { justify-content: center; }
.mc-brand__icon {
	width: 36px;
	height: 36px;
	border-radius: var(--mc-r-md);
	display: grid;
	place-items: center;
	background: var(--mc-grad-primary);
	box-shadow: var(--mc-shadow-glow);
	color: #fff;
}
.mc-brand__icon svg { width: 20px; height: 20px; }
.mc-brand__name {
	font-family: var(--mc-font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Nav */
.mc-nav {
	display: flex;
	gap: var(--mc-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mc-nav a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--mc-r-pill);
	font-size: 14px;
	font-weight: 500;
	color: var(--mc-text-muted);
	transition: color var(--mc-dur) var(--mc-ease), background var(--mc-dur) var(--mc-ease);
}
.mc-nav a:hover { color: var(--mc-text); background: var(--mc-bg-overlay); }
.mc-nav li.is-active a { color: var(--mc-text); background: var(--mc-bg-overlay-strong); }

/* User menu / avatar / dropdown */
.mc-user-menu { position: relative; }
.mc-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mc-grad-primary);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	border: 1px solid var(--mc-border-strong);
	cursor: pointer;
	transition: transform var(--mc-dur) var(--mc-ease), box-shadow var(--mc-dur) var(--mc-ease);
}
.mc-avatar:hover { transform: translateY(-1px); box-shadow: var(--mc-shadow-glow); }

.mc-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 240px;
	padding: 6px;
	background: var(--mc-bg-glass-strong);
	backdrop-filter: saturate(180%) blur(22px);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	border: 1px solid var(--mc-border-strong);
	border-radius: var(--mc-r-md);
	box-shadow: var(--mc-shadow-lg);
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	pointer-events: none;
	transition: opacity var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease);
}
.mc-user-menu.is-open .mc-dropdown {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.mc-dropdown__header {
	padding: 10px 12px 12px;
	border-bottom: 1px solid var(--mc-border);
	margin-bottom: 4px;
}
.mc-dropdown__header strong { display: block; font-size: 14px; }
.mc-dropdown__header span { display: block; font-size: 12px; color: var(--mc-text-muted); margin-top: 2px; }
.mc-dropdown a, .mc-dropdown button {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	background: transparent;
	color: var(--mc-text);
	font-size: 14px;
	text-align: left;
	border-radius: var(--mc-r-sm);
	cursor: pointer;
	transition: background var(--mc-dur) var(--mc-ease);
}
.mc-dropdown a:hover, .mc-dropdown button:hover { background: var(--mc-bg-overlay-strong); }

/* ============================================================
   Footer
   ============================================================ */
.mc-footer {
	border-top: 1px solid var(--mc-border);
	padding: var(--mc-s-5) 0;
	margin-top: var(--mc-s-7);
}
.mc-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-s-4);
	font-size: 13px;
	color: var(--mc-text-dim);
}

/* ============================================================
   Hero (landing index.php)
   ============================================================ */
.mc-hero {
	display: grid;
	place-items: center;
	min-height: 70vh;
	padding: var(--mc-s-7) 0;
	text-align: center;
}
.mc-hero__inner { max-width: 680px; }
.mc-hero__title {
	font-family: var(--mc-font-display);
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, #ffffff 0%, #b8c0e0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: var(--mc-s-4);
}
.mc-hero__subtitle {
	font-size: 18px;
	color: var(--mc-text-muted);
	margin-bottom: var(--mc-s-6);
	max-width: 560px;
	margin-inline: auto;
}
.mc-hero__cta {
	display: flex;
	gap: var(--mc-s-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* ============================================================
   Buttons
   ============================================================ */
.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mc-s-2);
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--mc-r-pill);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--mc-dur) var(--mc-ease),
	            box-shadow var(--mc-dur) var(--mc-ease),
	            background var(--mc-dur) var(--mc-ease),
	            border-color var(--mc-dur) var(--mc-ease);
	white-space: nowrap;
}
.mc-btn:active { transform: translateY(1px); }
.mc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mc-btn--primary {
	background: var(--mc-grad-primary);
	color: #fff;
	box-shadow: var(--mc-shadow-md);
}
.mc-btn--primary:hover { box-shadow: var(--mc-shadow-glow); transform: translateY(-1px); }

.mc-btn--ghost {
	background: var(--mc-bg-overlay);
	color: var(--mc-text);
	border-color: var(--mc-border-strong);
}
.mc-btn--ghost:hover { background: var(--mc-bg-overlay-strong); border-color: var(--mc-border-focus); }

.mc-btn--block { width: 100%; }
.mc-btn--small { padding: 7px 14px; font-size: 13px; }

/* ============================================================
   Forms
   ============================================================ */
.mc-form { display: flex; flex-direction: column; gap: var(--mc-s-4); }
.mc-form--two-col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mc-s-4);
}
@media (max-width: 720px) {
	.mc-form--two-col { grid-template-columns: 1fr; }
}
.mc-form__group-title {
	grid-column: 1 / -1;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mc-text-dim);
	margin: var(--mc-s-3) 0 calc(-1 * var(--mc-s-2));
	padding-top: var(--mc-s-3);
	border-top: 1px solid var(--mc-border);
}
.mc-form__actions {
	display: flex;
	gap: var(--mc-s-3);
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	padding-top: var(--mc-s-2);
}
.mc-field-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mc-s-4);
}
@media (max-width: 720px) { .mc-field-row { grid-template-columns: 1fr; } }

.mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-field--full { grid-column: 1 / -1; }
.mc-field__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--mc-text-muted);
	letter-spacing: 0.02em;
}
.mc-field__hint {
	font-size: 12px;
	color: var(--mc-text-dim);
	margin-top: 2px;
}

.mc-input {
	width: 100%;
	padding: 11px 14px;
	font: inherit;
	color: var(--mc-text);
	background: var(--mc-bg-overlay);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-r-md);
	transition: border-color var(--mc-dur) var(--mc-ease), background var(--mc-dur) var(--mc-ease);
}
.mc-input::placeholder { color: var(--mc-text-dim); }
.mc-input:hover { border-color: var(--mc-border-strong); }
.mc-input:focus {
	outline: none;
	border-color: var(--mc-border-focus);
	background: var(--mc-bg-overlay-strong);
	box-shadow: 0 0 0 3px rgba(111, 123, 255, 0.15);
}
.mc-input:disabled { opacity: 0.55; cursor: not-allowed; }
.mc-input--textarea { min-height: 96px; resize: vertical; font-family: inherit; }

select.mc-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23a5adc2' d='M1.41 0L6 4.59 10.59 0 12 1.41l-6 6-6-6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.mc-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--mc-s-2);
	font-size: 14px;
	color: var(--mc-text-muted);
	cursor: pointer;
}

/* Password strength meter */
.mc-strength { display: flex; align-items: center; gap: var(--mc-s-3); margin-top: 4px; font-size: 12px; }
.mc-strength[hidden] { display: none; }
.mc-strength__bar {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--mc-bg-overlay-strong);
	position: relative;
	overflow: hidden;
}
.mc-strength__bar > [data-mc-strength-fill] {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--mc-danger);
	border-radius: 2px;
	transition: width var(--mc-dur) var(--mc-ease), background var(--mc-dur) var(--mc-ease);
}
.mc-strength__label { color: var(--mc-text-muted); min-width: 72px; text-align: right; }

/* ============================================================
   Cards
   ============================================================ */
.mc-card {
	background: var(--mc-bg-glass);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-r-lg);
	padding: var(--mc-s-5);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.mc-card--form { padding: var(--mc-s-6); }

/* ============================================================
   Alerts
   ============================================================ */
.mc-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--mc-s-3);
	padding: 12px 14px;
	border-radius: var(--mc-r-md);
	border: 1px solid var(--mc-border);
	font-size: 14px;
	background: var(--mc-bg-overlay);
}
.mc-alert--error {
	background: rgba(255, 95, 109, 0.10);
	border-color: rgba(255, 95, 109, 0.30);
	color: #ffb6bd;
}
.mc-alert--success {
	background: rgba(40, 208, 134, 0.10);
	border-color: rgba(40, 208, 134, 0.30);
	color: #9ee6c2;
}

/* ============================================================
   Badges
   ============================================================ */
.mc-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--mc-r-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--mc-bg-overlay-strong);
	color: var(--mc-text-muted);
	border: 1px solid var(--mc-border);
	white-space: nowrap;
}
.mc-badge.is-condition-mint      { background: rgba(123, 228, 255, 0.12); color: #a5e8ff; border-color: rgba(123, 228, 255, 0.30); }
.mc-badge.is-condition-excellent { background: rgba(40, 208, 134, 0.12);  color: #9ee6c2; border-color: rgba(40, 208, 134, 0.30); }
.mc-badge.is-condition-good      { background: rgba(255, 181, 71, 0.12);  color: #ffd6a0; border-color: rgba(255, 181, 71, 0.30); }
.mc-badge.is-condition-fair      { background: rgba(255, 138, 60, 0.12);  color: #ffc3a0; border-color: rgba(255, 138, 60, 0.30); }
.mc-badge.is-condition-poor      { background: rgba(255, 95, 109, 0.12);  color: #ffb6bd; border-color: rgba(255, 95, 109, 0.30); }

.mc-badge.is-status-authentic    { background: rgba(40, 208, 134, 0.12); color: #9ee6c2; border-color: rgba(40, 208, 134, 0.30); }
.mc-badge.is-status-fake         { background: rgba(255, 95, 109, 0.12); color: #ffb6bd; border-color: rgba(255, 95, 109, 0.30); }
.mc-badge.is-status-questionable { background: rgba(255, 181, 71, 0.12); color: #ffd6a0; border-color: rgba(255, 181, 71, 0.30); }
.mc-badge.is-status-pending      { background: var(--mc-bg-overlay-strong); color: var(--mc-text-muted); }

/* ============================================================
   Auth pages
   ============================================================ */
.mc-auth {
	min-height: calc(100vh - 200px);
	display: grid;
	place-items: center;
	padding: var(--mc-s-6) 0;
}
.mc-auth__panel {
	width: 100%;
	max-width: 460px;
	padding: var(--mc-s-7);
	background: var(--mc-bg-glass-strong);
	border: 1px solid var(--mc-border-strong);
	border-radius: var(--mc-r-xl);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	box-shadow: var(--mc-shadow-lg);
}
@media (max-width: 480px) { .mc-auth__panel { padding: var(--mc-s-5); } }
.mc-auth__title {
	font-family: var(--mc-font-display);
	font-size: 30px;
	letter-spacing: -0.01em;
	margin-top: var(--mc-s-5);
	text-align: center;
}
.mc-auth__subtitle {
	color: var(--mc-text-muted);
	text-align: center;
	margin-top: 6px;
	margin-bottom: var(--mc-s-5);
}
.mc-auth__alt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mc-s-3);
	font-size: 13px;
	color: var(--mc-text-muted);
}
.mc-auth__alt a { color: var(--mc-accent-strong); }
.mc-auth__alt a:hover { color: #fff; }
.mc-auth__switch {
	margin-top: var(--mc-s-5);
	padding-top: var(--mc-s-4);
	border-top: 1px solid var(--mc-border);
	text-align: center;
	font-size: 13px;
	color: var(--mc-text-muted);
}
.mc-auth__switch a { color: var(--mc-accent-strong); font-weight: 500; }

/* Greeting (dashboard top) */
.mc-greeting {
	font-family: var(--mc-font-display);
	font-size: clamp(28px, 4vw, 38px);
	letter-spacing: -0.01em;
}
.mc-greeting__sub {
	color: var(--mc-text-muted);
	margin-top: 6px;
}