:root {
    --bg: #05060b;
    --bg-soft: #0a1020;
    --panel: rgba(16, 24, 44, 0.68);
    --panel-strong: #0e162a;
    --text: #eaf0ff;
    --muted: #90a2c2;
    --cyan: #39d6ff;
    --blue: #4f79ff;
    --purple: #925dff;
    --green: #31d38b;
    --red: #ff5f72;
    --border: rgba(154, 177, 221, 0.18);
    --shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100%; scroll-behavior: smooth; }

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background: radial-gradient(circle at 15% 20%, rgba(79,121,255,.16), transparent 35%),
                radial-gradient(circle at 80% 8%, rgba(146,93,255,.14), transparent 30%),
                var(--bg);
    color: var(--text);
    overflow-x: hidden;
    opacity: 0;
    transition: opacity .35s ease;
}

body.page-ready { opacity: 1; }

.aurora-bg {
    position: fixed;
    inset: -10%;
    background: radial-gradient(circle at 10% 40%, rgba(57,214,255,.12), transparent 26%),
                radial-gradient(circle at 88% 60%, rgba(146,93,255,.11), transparent 26%);
    filter: blur(35px);
    z-index: -1;
    animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateY(-12px);} to { transform: translateY(12px);} }

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    padding: 22px 16px;
    background: rgba(8, 13, 26, .9);
    border-right: 1px solid var(--border);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    z-index: 1000;
}

.kronex-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 22px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid var(--border);
}
.logo-icon { color: var(--cyan); filter: drop-shadow(0 0 10px rgba(57,214,255,.7)); }
.logo-text { font-weight: 800; letter-spacing: .8px; color: #fff; }
.logo-sub { font-size: 10px; letter-spacing: 2px; color: var(--muted); }

.sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #c8d6f2;
    text-decoration: none;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid transparent;
    transition: all .25s ease;
    overflow: hidden;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
    border-color: var(--border);
    background: linear-gradient(120deg, rgba(57,214,255,.12), rgba(146,93,255,.12));
    transform: translateX(2px);
}
.logout-btn { margin-top: 8px; color: #ffb2bb !important; }

.top-nav {
    position: fixed;
    top: 12px;
    right: 18px;
    left: 272px;
    z-index: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(8, 14, 28, .72);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}
.top-nav h2 { font-size: 16px; }
.top-nav small { color: var(--muted); }
.quick-actions { display: flex; gap: 10px; }
.quick-chip {
    text-decoration: none;
    color: #dce8ff;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    border-radius: 999px;
    padding: 8px 12px;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}
.quick-chip.primary { background: linear-gradient(120deg, rgba(79,121,255,.4), rgba(146,93,255,.4)); }
.quick-chip:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 20px rgba(79,121,255,.3); }

.main {
    margin-left: 250px;
    padding: 0 24px 28px;
    width: calc(100% - 250px);
}

h1, h2, h3 { letter-spacing: .3px; }
p, small, span { color: #d4def2; }

.hero, .chart-box, .wallet-card, .financial-card,
.security-box, .why-trust, .market-table, .withdraw-panel,
.auth-box, .history-table, .security-badges, .trust-metrics,
.owned-miners-section, .ref-box, .ref-link-box, .deposit-card,
.modal-box, .tx-table-wrap {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.hero { padding: 20px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(1.5rem, 2.8vw, 2.6rem); }
.hero p { color: var(--muted); margin-top: 6px; }

.ticker { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; background: rgba(12,18,34,.8); }
.ticker-track { white-space: nowrap; padding: 12px 16px; animation: ticker 20s linear infinite; color: #cde9ff; }
@keyframes ticker { from { transform: translateX(100%);} to { transform: translateX(-100%);} }

.price-cards, .wallet-grid, .wallet-cards, .trust-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.trust-stat {
    background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    gap: 6px;
}

.trust-stat strong {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    color: #f4f7ff;
    letter-spacing: .2px;
}

.trust-stat span {
    color: var(--muted);
    font-size: .95rem;
}

.security-box, .why-trust {
    margin-top: 14px;
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    box-shadow: 0 18px 40px rgba(5, 10, 30, .35), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(18px) saturate(130%);
}

.security-box h2, .why-trust h2 {
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #ffffff;
}

.security-list {
    list-style: none;
    display: grid;
    gap: 10px;
}

.security-box li,
.why-trust-text {
    line-height: 1.72;
    color: #e7efff;
}

.security-box li {
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(130deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14);
    font-weight: 500;
}

.why-trust-text {
    font-size: 1.02rem;
    max-width: 72ch;
    color: #dfe9ff;
}
.price-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.34); }
.price-card span { color: #fff; font-size: 1.2rem; display: block; margin-top: 8px; }
.price-card.up { box-shadow: inset 0 0 0 1px rgba(49,211,139,.35); }
.price-card.down { box-shadow: inset 0 0 0 1px rgba(255,95,114,.35); }
.up { color: var(--green); }
.down { color: var(--red); }

.chart-box { height: 520px; overflow: hidden; }
.chart-box iframe { width: 100%; height: 100%; border: 0; }

.market-head, .market-row {
    display: grid;
    grid-template-columns: 60px 1.5fr 1fr 1fr 1.5fr;
    padding: 12px 16px;
    align-items: center;
}
.market-row { border-top: 1px solid rgba(184,201,233,.14); transition: background .2s; }
.market-row:hover { background: rgba(79,121,255,.08); }
.market-row .coin small { color: var(--muted); display: block; }
.market-row img { width: 20px; margin-right: 8px; vertical-align: middle; }
#search, select, input, textarea {
    width: 100%;
    border: 1px solid var(--border);
    background: rgba(8, 14, 28, .76);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(57,214,255,.8);
    box-shadow: 0 0 0 3px rgba(57,214,255,.18);
    transform: translateY(-1px);
}

button {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(117,145,205,.35);
    border-radius: 12px;
    color: #eef4ff;
    background: linear-gradient(120deg, rgba(79,121,255,.5), rgba(146,93,255,.4));
    padding: 10px 14px;
    transition: transform .2s ease, box-shadow .2s ease;
}
button:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 10px 22px rgba(79,121,255,.3); }

.ripple {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: translate(-50%, -50%) scale(0);
    animation: ripple .55s ease;
    pointer-events: none;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(12); opacity: 0; } }

.auth-container {
    min-height: calc(100vh - 140px);
    display: grid;
    place-items: center;
    position: relative;
}
.auth-container::before {
    content: "";
    position: absolute;
    inset: 2% 12% 8%;
    border-radius: 28px;
    background: radial-gradient(circle at 20% 10%, rgba(57,214,255,.24), transparent 35%),
                radial-gradient(circle at 70% 70%, rgba(146,93,255,.2), transparent 34%);
    filter: blur(22px);
    z-index: -1;
}
.auth-box { width: min(430px, 94%); padding: 28px; }
.auth-box h2 { margin-bottom: 16px; text-align: center; }
.auth-box form { display: grid; gap: 12px; }
.auth-box a { color: #a9bbe0; text-decoration: none; display: block; margin-top: 14px; text-align: center; }
.auth-box a:hover { color: #fff; }

.password-wrapper { position: relative; }
.toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: .7; cursor: pointer; }
.strength.weak { color: var(--red); } .strength.medium { color: #ffe36d; } .strength.strong { color: var(--green); }

.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,4,10,.72); z-index: 1200; }
.modal.show { display: flex; }
.modal-box { width: min(460px, 95%); padding: 24px; animation: modalIn .25s ease; }
@keyframes modalIn { from { transform: translateY(10px) scale(.98); opacity: 0;} to { transform: translateY(0) scale(1); opacity: 1;} }
.modal-action { margin-top: 8px; width: 100%; }

.history-table { width: 100%; border-collapse: collapse; margin-top: 16px; overflow: hidden; }
.history-table th, .history-table td { padding: 12px 14px; border-bottom: 1px solid rgba(153,174,219,.15); text-align: left; }
.history-table th { color: #b6c8ee; background: rgba(255,255,255,.03); }
.history-table tr:hover td { background: rgba(79,121,255,.08); }
.status-pending { color: #ffcd56; font-weight: 700; }
.status-approved { color: #88f2c3; font-weight: 700; }
.status-rejected { color: #ff9cac; font-weight: 700; }

.tx-badge { padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tx-badge.pending { background: rgba(255,205,86,.2); color: #ffcd56; }
.tx-badge.approved { background: rgba(49,211,139,.18); color: #88f2c3; }
.tx-badge.rejected { background: rgba(255,95,114,.2); color: #ff9cac; }
.transaction-controls { display: grid; grid-template-columns: 220px 1fr; gap: 10px; margin: 16px 0; }
.tx-pagination { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.ref-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-top: 16px; }
.ref-box, .ref-link-box { padding: 18px; }
.ref-box p { font-size: 26px; color: #bca9ff; font-weight: 800; }

.footer-home {
    margin-top: 30px;
    color: #b0bfdc;
    font-size: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
    backdrop-filter: blur(16px) saturate(125%);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-links a {
    color: #d8e6ff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    transition: all .2s ease;
}
.footer-links a:hover {
    color: #fff;
    background: rgba(255,255,255,.14);
    transform: translateY(-1px);
}
.footer-bottom { margin-top: 8px; display: flex; gap: 7px; flex-wrap: wrap; }

.error, .error-box { color: #ffc5ce; background: rgba(255,95,114,.16); border: 1px solid rgba(255,95,114,.45); padding: 10px 12px; border-radius: 12px; }
.success-box { color: #b8ffdb; background: rgba(49,211,139,.14); border: 1px solid rgba(49,211,139,.45); padding: 10px 12px; border-radius: 12px; }
.pending-box { color: #ffeeb5; background: rgba(255,205,86,.14); border: 1px solid rgba(255,205,86,.38); padding: 10px 12px; border-radius: 12px; }

.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 14px;
    z-index: 1300;
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

@media (max-width: 960px) {
    .mobile-menu-toggle { display: inline-grid; place-items: center; }
    .sidebar { left: -270px; transition: left .25s ease; }
    .sidebar.open { left: 0; }
    .top-nav { left: 14px; right: 14px; top: 66px; }
    .top-nav-title h2 { font-size: 14px; }
    .top-nav-title small { display: none; }
    .quick-chip { padding: 7px 10px; font-size: 12px; }
    .main { margin-left: 0; width: 100%; padding: 56px 14px 24px; }
    .transaction-controls { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .price-cards, .wallet-grid, .wallet-cards, .trust-stats { grid-template-columns: 1fr; }
    .history-table { display: block; overflow-x: auto; white-space: nowrap; }
    .market-head, .market-row { grid-template-columns: 40px 1.4fr 1fr 1fr 1.2fr; font-size: 13px; }
}