/* LunoNFT Mini App  Portals Market Style */

:root {
    --bg: #0d0d12;
    --text: #ffffff;
    --hint: #7a7a8e;
    --link: #3b82f6;
    --btn: #3b82f6;
    --btn-text: #ffffff;
    --secondary-bg: #16161f;
    --card-bg: #1a1a24;
    --border: rgba(255, 255, 255, 0.06);
    --radius: 14px;
    --radius-sm: 10px;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ======== SPLASH SCREEN ======== */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: linear-gradient(180deg, #1a1530 0%, #0d0d12 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.splash-screen.fade-out { opacity: 0; visibility: hidden; }

.splash-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.splash-logo {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fff 0%, #a8d8ff 25%, #fff 50%, #7ec8f8 75%, #fff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(120, 180, 255, 0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation: splashPulse 1.8s ease-in-out infinite, logoShimmer 3s linear infinite;
    position: relative;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.splash-pepe {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 50%;
    animation: splashPepe 1.2s ease-in-out infinite alternate;
    filter: drop-shadow(0 8px 24px rgba(59, 130, 246, 0.4));
}

@keyframes splashPepe { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }

.splash-bubble {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
    opacity: 0;
    animation: sbAppear 0.5s ease forwards, sbFloat 3s ease-in-out infinite alternate;
}
.sb-1 { width:52px;height:52px;font-size:24px;top:10%;left:8%;animation-delay:0.2s,0.2s; }
.sb-2 { width:46px;height:46px;font-size:22px;top:8%;right:12%;animation-delay:0.4s,0.4s; }
.sb-3 { width:56px;height:56px;font-size:26px;top:25%;left:2%;animation-delay:0.1s,0.1s; }
.sb-4 { width:44px;height:44px;font-size:20px;top:22%;right:4%;animation-delay:0.6s,0.6s; }
.sb-5 { width:40px;height:40px;font-size:18px;top:55%;left:5%;animation-delay:0.3s,0.3s; }
.sb-6 { width:48px;height:48px;font-size:22px;top:58%;right:6%;animation-delay:0.5s,0.5s; }
.sb-7 { width:38px;height:38px;font-size:18px;top:72%;left:10%;animation-delay:0.7s,0.7s; }
.sb-8 { width:36px;height:36px;font-size:16px;top:70%;right:12%;animation-delay:0.35s,0.35s; }
.sb-9 { width:42px;height:42px;font-size:20px;top:40%;left:0%;animation-delay:0.55s,0.55s; }
.sb-10 { width:42px;height:42px;font-size:20px;top:42%;right:2%;animation-delay:0.15s,0.15s; }

@keyframes sbAppear { 0% { opacity:0;transform:scale(0.3); } 100% { opacity:1;transform:scale(1); } }
@keyframes sbFloat { 0% { transform:translateY(0); } 100% { transform:translateY(-12px); } }

.splash-sparkle {
    position: absolute;
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    animation: ssFlicker 1.5s ease-in-out infinite alternate;
}
.ss-1 { top:15%;left:30%;animation-delay:0s; }
.ss-2 { top:35%;right:22%;animation-delay:0.4s; }
.ss-3 { top:60%;left:25%;animation-delay:0.8s; }
.ss-4 { top:18%;right:35%;animation-delay:0.2s; }
.ss-5 { top:75%;right:30%;animation-delay:0.6s; }
.ss-6 { top:48%;left:18%;animation-delay:1s; }

@keyframes ssFlicker { 0% { opacity:0.2;transform:scale(0.6); } 100% { opacity:0.9;transform:scale(1.2); } }
@keyframes splashPulse { 0%,100% { opacity:0.85;transform:scale(1); } 50% { opacity:1;transform:scale(1.04); } }
@keyframes logoShimmer { 0% { background-position:200% 50%; } 100% { background-position:-200% 50%; } }

.splash-loader { width:120px;height:4px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;margin-bottom:60px; }
.splash-loader-bar { width:0%;height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:4px;animation:splashLoad 2.7s ease-in-out forwards; }
@keyframes splashLoad { 0% { width:0%; } 60% { width:70%; } 100% { width:100%; } }

/* ======== PASSWORD SCREEN ======== */
.pw-screen { position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;align-items:center;justify-content:center; }
.pw-screen-inner { width:100%;max-width:340px;padding:32px 24px;text-align:center; }
.pw-lock-icon { font-size:56px;margin-bottom:12px; }
.pw-title { font-size:20px;font-weight:700;margin-bottom:6px;color:var(--text); }
.pw-desc { font-size:13px;color:var(--hint);margin-bottom:20px;line-height:1.4; }
.pw-type-selector { display:flex;gap:8px;margin-bottom:18px; }
.pw-type-btn { flex:1;padding:10px 0;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--hint);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s; }
.pw-type-btn.active { border-color:var(--btn);color:var(--btn);background:rgba(59,130,246,0.1); }
.pw-input-wrap { margin-bottom:12px; }
.pw-input { width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--secondary-bg);color:var(--text);font-size:16px;text-align:center;letter-spacing:6px;outline:none;transition:border-color 0.2s; }
.pw-input:focus { border-color:var(--btn); }
.pw-input[inputmode="text"] { letter-spacing:normal;text-align:left; }
.pw-error { color:#ef4444;font-size:13px;margin-bottom:10px; }
.pw-submit-btn { width:100%;padding:14px;border:none;border-radius:var(--radius-sm);background:var(--btn);color:var(--btn-text);font-size:15px;font-weight:700;cursor:pointer;transition:opacity 0.2s; }
.pw-submit-btn:active { opacity:0.8; }
.pw-submit-btn:disabled { opacity:0.4;cursor:not-allowed; }
.pw-reset-link { display:block;margin-top:14px;color:var(--btn);font-size:13px;font-weight:600;text-decoration:none;opacity:0.85;transition:opacity 0.2s; }
.pw-reset-link:active { opacity:0.6; }

/* Terms screen */
.terms-screen-inner { max-width:360px; }
.terms-link-btn { display:block;width:100%;padding:14px;margin-bottom:16px;border:1.5px solid var(--btn);border-radius:var(--radius-sm);background:rgba(59,130,246,0.08);color:var(--btn);font-size:14px;font-weight:600;text-decoration:none;text-align:center;transition:all 0.2s; }
.terms-link-btn:active { opacity:0.7; }
.terms-checkbox-wrap { display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;text-align:left;cursor:pointer;font-size:13px;color:var(--hint);line-height:1.4; }
.terms-checkbox-wrap input[type="checkbox"] { width:20px;height:20px;min-width:20px;margin-top:1px;accent-color:var(--btn);cursor:pointer; }

/* Settings terms button */
.settings-terms-btn { display:block;width:100%;color:var(--btn);font-size:14px;font-weight:600;text-decoration:none;text-align:center;transition:opacity 0.2s; }
.settings-terms-btn:active { opacity:0.7; }

/* ======== HEADER ======== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    position: sticky;
    top: 0;
    background: rgba(13, 13, 18, 0.85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.logo {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-settings-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(59,130,246,0.12);
    border: none;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance {
    background: var(--secondary-bg);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
}

/* ======== BOTTOM NAVIGATION ======== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(13, 13, 18, 0.92);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-top: 1px solid rgba(255,255,255,0.05);
    z-index: 200;
    gap: 4px;
}

.nav-main-tabs {
    flex: 1;
    display: flex;
    gap: 2px;
}

.nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px 6px;
    border: none;
    background: transparent;
    color: var(--hint);
    font-size: 10px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
}

.nav-tab.active {
    color: var(--btn);
}

.nav-tab.active .nav-icon {
    transform: scale(1.1);
}

.nav-icon {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.25s;
}

.nav-label {
    font-size: 10px;
    white-space: nowrap;
    letter-spacing: -0.2px;
}

.nav-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 8px;
    background: #ef4444;
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
}

.nav-badge:empty { display: none; }

.nav-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--btn);
    padding: 2px;
    cursor: pointer;
    transition: all 0.25s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.nav-avatar.active {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}

.nav-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
}

.nav-avatar-img img { width:100%;height:100%;border-radius:50%;object-fit:cover; }

.nav-tab-admin {
    width: 36px;
    flex: 0 0 36px !important;
    background: rgba(239,68,68,0.12) !important;
    border-radius: 10px;
}

.nav-tab-admin.active { background: #ef4444 !important; color: #fff !important; }

/* Content */
.content { padding: 8px 10px 80px; }
.page { display: none; animation: pageIn 0.2s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity:0; } to { opacity:1; } }

/* ======== MARKETPLACE TABS (All / Collections) ======== */
.mp-tabs {
    display: flex;
    gap: 16px;
    padding: 4px 2px 12px;
}

.mp-tab {
    background: none;
    border: none;
    color: var(--hint);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
    letter-spacing: -0.3px;
}

.mp-tab.active {
    color: var(--text);
}

/* ======== SEARCH BAR ======== */
.search-bar {
    margin-bottom: 10px;
    position: relative;
}

.search-bar::before {
    content: '\1F50D';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    z-index: 1;
    opacity: 0.4;
}

.search-bar input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.search-bar input::placeholder { color: var(--hint); }
.search-bar input:focus { border-color: var(--btn); }

/* ======== FILTER/SORT BAR ======== */
.filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.filter-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--hint);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:active,
.filter-pill.active {
    background: rgba(59,130,246,0.12);
    border-color: var(--btn);
    color: var(--btn);
}

.sort-dropdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.sort-option {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--hint);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.sort-option.active,
.sort-option:active {
    background: var(--btn);
    color: #fff;
    border-color: var(--btn);
}

/* ======== TOKEN CARDS  Portals Style ======== */
.tokens-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.token-card {
    background: var(--card-bg);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
    position: relative;
}

.token-card:active {
    transform: scale(0.96);
}

.token-card-bg {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
}

.token-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
    filter: none;
}

.token-image-placeholder {
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
}

.token-info {
    padding: 8px 10px 10px;
}

.token-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    letter-spacing: -0.2px;
}

.token-id {
    font-size: 11px;
    color: var(--hint);
    margin-top: 1px;
}

.token-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.token-price-badge {
    background: var(--btn);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

.token-cart-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--secondary-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.token-cart-btn:active {
    background: var(--btn);
    border-color: var(--btn);
}

.token-owned-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #22c55e;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    z-index: 2;
}

.token-collection {
    font-size: 11px;
    color: var(--hint);
    margin-top: 2px;
}

/* ======== COLLECTION CARDS ======== */
.collections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.collection-card {
    background: var(--card-bg);
    border-radius: 14px;
    display: flex;
    align-items: stretch;
    cursor: pointer;
    transition: transform 0.15s;
    overflow: hidden;
}

.collection-card:active { transform: scale(0.98); }

.collection-icon {
    width: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.collection-body {
    flex: 1;
    padding: 14px 4px 14px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.collection-name {
    font-size: 15px;
    font-weight: 700;
}

.collection-desc {
    font-size: 12px;
    color: var(--hint);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-right {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 14px;
    flex-shrink: 0;
}

.collection-count {
    background: rgba(59,130,246,0.15);
    color: var(--btn);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 700;
}

.collection-arrow {
    color: var(--hint);
    font-size: 18px;
    opacity: 0.4;
}

/* Back bar */
.back-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--btn);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* ======== BUTTONS ======== */
.btn {
    padding: 11px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:active { opacity: 0.8; transform: scale(0.97); }

.btn-primary {
    background: var(--btn);
    color: var(--btn-text);
    width: 100%;
}

.btn-outline {
    background: transparent;
    color: var(--btn);
    border: 1.5px solid rgba(59,130,246,0.35);
    width: 100%;
}

.btn-sell {
    background: #ef4444;
    color: #fff;
    width: 100%;
}

.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ======== MODAL  Bottom Sheet ======== */
.modal {
    position: fixed;
    top: 0;left: 0;right: 0;bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-content {
    background: var(--bg);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 0 16px 16px;
    animation: slideUp 0.3s cubic-bezier(0.32,0.72,0,1);
    position: relative;
}

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    margin: 10px auto 12px;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
}

.modal-image {
    width: calc(100% + 32px);
    margin-left: -16px;
    max-height: 260px;
    object-fit: cover;
    border-radius: 0;
}

.modal-title {
    font-size: 20px;
    font-weight: 800;
    margin: 14px 0 6px;
    letter-spacing: -0.3px;
}

.modal-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--hint);
    font-size: 13px;
}

.modal-description {
    font-size: 14px;
    color: var(--hint);
    margin-bottom: 14px;
    line-height: 1.45;
}

.modal-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(59,130,246,0.08);
    border-radius: 12px;
    border: 1px solid rgba(59,130,246,0.12);
}

.modal-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.modal-base-price {
    font-size: 13px;
    color: var(--hint);
    text-decoration: line-through;
}

.modal-owner {
    font-size: 13px;
    color: var(--hint);
    margin-bottom: 12px;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
}

/* Sale history */
.modal-history { margin-top:14px;border-top:1px solid var(--border);padding-top:12px; }
.modal-history h3 { font-size:15px;font-weight:700;margin-bottom:8px; }
.history-list { display:flex;flex-direction:column;gap:6px; }
.history-item { display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--secondary-bg);border-radius:var(--radius-sm);font-size:13px; }
.history-price { font-weight:700;color:var(--btn); }
.history-date { color:var(--hint);font-size:11px; }

/* ======== PROFILE ======== */
.profile-card {
    text-align: center;
    padding: 24px 16px 20px;
    background: var(--card-bg);
    border-radius: 18px;
    margin-bottom: 8px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 12px;
    padding: 3px;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg);
}

.profile-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
}

.profile-id {
    font-size: 12px;
    color: var(--hint);
    margin-bottom: 8px;
}

.profile-verification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.verification-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.verification-badge.verified {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.verification-badge.not-verified {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.verification-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--btn);
    text-decoration: none;
    padding: 4px 12px;
    border: 1.5px solid var(--btn);
    border-radius: 20px;
    transition: all 0.2s;
}

.verification-btn:active {
    opacity: 0.7;
}

.profile-balance {
    font-size: 15px;
    color: var(--hint);
    margin-bottom: 16px;
}

.profile-balance span:last-child {
    color: var(--btn);
    font-weight: 700;
}

.profile-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.stat {
    text-align: center;
    padding: 10px 14px;
    background: var(--secondary-bg);
    border-radius: 12px;
    flex: 1;
}

.stat-value {
    font-size: 20px;
    font-weight: 800;
    display: block;
    color: var(--btn);
}

.stat-label {
    font-size: 11px;
    color: var(--hint);
    margin-top: 2px;
}

/* Profile actions */
.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: none;
    border-radius: 14px;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.profile-action-btn:active { transform: scale(0.98); background: var(--secondary-bg); }

.pab-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(59,130,246,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.pab-text { flex:1;text-align:left; }
.pab-arrow { color:var(--hint);font-size:20px;opacity:0.4; }

/* Profile sub-pages */
.profile-subpage { margin-top: -8px; }
.subpage-back { font-size:14px;color:var(--btn);cursor:pointer;padding:8px 0;margin-bottom:10px;font-weight:600; }
.subpage-title { font-size:17px;font-weight:800;margin-bottom:14px; }

/* ======== WALLET ======== */
.wallet-balance-card {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    border-radius: 18px;
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 14px;
}

.wbc-label { font-size:13px;opacity:0.85;margin-bottom:4px; }
.wbc-value { font-size:32px;font-weight:800;letter-spacing:-0.5px; }

.wallet-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.wallet-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--card-bg);
    color: var(--text);
}

.wallet-btn:active { transform: scale(0.97); }

.wallet-btn-icon {
    font-size: 22px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet-btn-deposit .wallet-btn-icon { background:rgba(34,197,94,0.12);color:#22c55e; }
.wallet-btn-withdraw .wallet-btn-icon { background:rgba(239,68,68,0.12);color:#ef4444; }

/* Wallet forms */
.wallet-form { background:var(--card-bg);border-radius:14px;padding:16px;margin-bottom:14px; }
.wf-back { color:var(--btn);font-size:14px;cursor:pointer;margin-bottom:10px;font-weight:600; }
.wf-title { font-size:17px;font-weight:800;margin-bottom:14px; }
.wf-group { margin-bottom:12px; }
.wf-group label { display:block;font-size:13px;color:var(--hint);margin-bottom:5px; }
.wf-group input, .wf-group select { width:100%;padding:10px 14px;background:var(--secondary-bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none; }
.wf-group input:focus, .wf-group select:focus { border-color:var(--btn); }
.wf-group select { -webkit-appearance:none;appearance:none; }
.wf-hint { font-size:11px;color:var(--hint);margin-top:4px; }

/* Active request */
.wallet-active-request { background:var(--card-bg);border:1px solid var(--btn);border-radius:14px;padding:16px;margin-bottom:14px;text-align:center; }
.war-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.war-label { font-size:13px;color:var(--hint); }
.war-status { font-size:12px;padding:2px 8px;border-radius:10px;font-weight:600; }
.war-status-pending { background:rgba(234,179,8,0.15);color:#eab308; }
.war-status-replenished { background:rgba(34,197,94,0.15);color:#22c55e; }
.war-amount { font-size:26px;font-weight:800;margin-bottom:4px; }
.war-timer { font-size:22px;font-weight:800;color:var(--btn);font-variant-numeric:tabular-nums;margin-bottom:12px; }
.war-card-details { text-align:left;margin-bottom:12px;padding:10px;background:var(--secondary-bg);border-radius:10px; }
.war-detail { display:flex;justify-content:space-between;font-size:13px;padding:3px 0; }
.war-detail span:first-child { color:var(--hint); }
.war-copyable { cursor:pointer;color:var(--btn);font-weight:600; }
.war-actions { display:flex;flex-direction:column;gap:8px; }
.war-cancel-btn { border-color:#ef4444 !important;color:#ef4444 !important; }

/* Wallet history */
.wallet-history { margin-top:8px; }
.wh-title { font-size:15px;font-weight:700;margin-bottom:8px; }
.wh-list { display:flex;flex-direction:column;gap:6px; }
.wh-item { display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--card-bg);border-radius:12px; }
.wh-item-left { display:flex;align-items:center;gap:10px; }
.wh-item-icon { width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px; }
.wh-item-icon-deposit { background:rgba(34,197,94,0.12);color:#22c55e; }
.wh-item-icon-withdrawal { background:rgba(239,68,68,0.12);color:#ef4444; }
.wh-item-type { font-size:13px;font-weight:600; }
.wh-item-date { font-size:11px;color:var(--hint); }
.wh-item-right { text-align:right; }
.wh-item-amount { font-size:14px;font-weight:700; }
.wh-item-amount-deposit { color:#22c55e; }
.wh-item-amount-withdrawal { color:#ef4444; }
.wh-item-status { font-size:11px;color:var(--hint); }

/* ======== PORTFOLIO TABS ======== */
.portfolio-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--secondary-bg);
    border-radius: 12px;
    padding: 3px;
}

.portfolio-tab {
    flex: 1;
    padding: 9px;
    border: none;
    background: transparent;
    color: var(--hint);
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s;
}

.portfolio-tab.active {
    background: var(--btn);
    color: var(--btn-text);
}

.btn-create-nft {
    width:100%;padding:12px;border:2px dashed rgba(59,130,246,0.4);background:transparent;color:var(--btn);border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:12px;
}

.btn-create-nft:active { background:rgba(59,130,246,0.08); }

/* Fav active */
.fav-active { color:#ef4444 !important;border-color:#ef4444 !important; }

/* ======== EMPTY & LOADING ======== */
.loading { text-align:center;padding:40px;color:var(--hint); }
.empty-state { text-align:center;padding:40px 20px;color:var(--hint); }
.empty-state p { margin-bottom:14px; }
.empty-icon { font-size:44px;margin-bottom:10px;opacity:0.4; }

/* Skeleton */
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
.skeleton-card { height:60px;border-radius:14px;background:linear-gradient(90deg,var(--card-bg) 25%,rgba(255,255,255,0.04) 50%,var(--card-bg) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;margin-bottom:8px; }
.skeleton-token { aspect-ratio:0.82;border-radius:14px;background:linear-gradient(90deg,var(--card-bg) 25%,rgba(255,255,255,0.04) 50%,var(--card-bg) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite; }

/* Skeleton collection with cover */
.skeleton-collection { display:flex;align-items:center;gap:0;background:var(--card-bg);border-radius:14px;overflow:hidden;margin-bottom:8px;animation:shimmer 1.5s infinite;background-size:200% 100%;background-image:linear-gradient(90deg,var(--card-bg) 25%,rgba(255,255,255,0.04) 50%,var(--card-bg) 75%); }
.skeleton-collection .sk-cover { width:60px;height:60px;background:var(--secondary-bg);flex-shrink:0; }
.skeleton-collection .sk-body { flex:1;padding:12px; }
.skeleton-collection .sk-line { height:12px;border-radius:6px;background:var(--secondary-bg);margin-bottom:6px; }
.skeleton-collection .sk-line.short { width:60%; }
.skeleton-collection .sk-line.tiny { width:35%;height:10px; }

/* Skeleton token card */
.skeleton-token-card { background:var(--card-bg);border-radius:14px;overflow:hidden; }
.skeleton-token-card .sk-img { aspect-ratio:1;background:linear-gradient(90deg,var(--secondary-bg) 25%,rgba(255,255,255,0.04) 50%,var(--secondary-bg) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite; }
.skeleton-token-card .sk-info { padding:8px 10px 10px; }
.skeleton-token-card .sk-line { height:11px;border-radius:6px;background:var(--secondary-bg);margin-bottom:5px; }
.skeleton-token-card .sk-line.short { width:50%; }
.skeleton-token-card .sk-price { width:60px;height:22px;border-radius:8px;background:var(--secondary-bg);margin-top:6px; }

/* ======== CONFIRM OVERLAY ======== */
.confirm-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:300;display:flex;align-items:center;justify-content:center; }
.confirm-card { background:var(--card-bg);border-radius:20px;padding:24px 20px;width:88%;max-width:320px;text-align:center;animation:scaleIn 0.2s ease; }
@keyframes scaleIn { from { transform:scale(0.9);opacity:0; } to { transform:scale(1);opacity:1; } }
.confirm-icon { font-size:44px;margin-bottom:12px; }
.confirm-title { font-size:17px;font-weight:800;margin-bottom:8px; }
.confirm-details { font-size:14px;color:var(--hint);margin-bottom:16px;line-height:1.5; }
.confirm-price-input { width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:18px;font-weight:700;text-align:center;margin-bottom:12px;outline:none;box-sizing:border-box; }
.confirm-price-input:focus { border-color:var(--accent); }
.confirm-actions { display:flex;flex-direction:column;gap:8px; }

/* Toast */
.toast { position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:10px 18px;display:flex;align-items:center;gap:8px;z-index:400;font-size:14px;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,0.4);animation:toastIn 0.3s ease; }
@keyframes toastIn { from { transform:translateX(-50%) translateY(-30px);opacity:0; } to { transform:translateX(-50%) translateY(0);opacity:1; } }
.toast-icon { font-size:18px; }

/* Balance anim */
@keyframes balancePulse { 0% { transform:scale(1); } 50% { transform:scale(1.1);color:#22c55e; } 100% { transform:scale(1); } }
.balance-updated { animation:balancePulse 0.5s ease; }

/* Token card portfolio hint */
.token-card-portfolio .token-info::after { content:'Tap to sell';display:block;font-size:10px;color:var(--hint);margin-top:3px;opacity:0.5; }

/* ======== REVIEWS ======== */
.modal-reviews { margin-top:14px;border-top:1px solid var(--border);padding-top:12px; }
.modal-reviews h3 { font-size:15px;font-weight:700;margin-bottom:8px; }
.reviews-avg { font-size:13px;color:var(--btn);font-weight:400; }
.reviews-list { display:flex;flex-direction:column;gap:8px;margin-bottom:8px; }
.review-card { padding:10px 12px;background:var(--secondary-bg);border-radius:var(--radius-sm); }
.review-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; }
.review-stars-display { color:#eab308;font-size:14px;letter-spacing:1px; }
.review-date { font-size:11px;color:var(--hint); }
.review-comment { font-size:13px;color:var(--text);opacity:0.9; }
.review-form { display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;background:var(--secondary-bg);border-radius:var(--radius-sm); }
.review-stars { display:flex;gap:6px;justify-content:center; }
.review-stars .star { font-size:28px;cursor:pointer;color:var(--hint);transition:color 0.15s,transform 0.15s; }
.review-stars .star.active { color:#eab308;transform:scale(1.15); }
.review-input { width:100%;padding:8px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;outline:none; }
.review-input:focus { border-color:var(--btn); }

/* ======== CREATE NFT ======== */
.cnf-preview { width:100%;aspect-ratio:1;border:2px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:12px;overflow:hidden;background:var(--secondary-bg); }
.cnf-preview:active { border-color:var(--btn); }
.cnf-preview-text { color:var(--hint);font-size:14px; }
.cnf-preview-img { width:100%;height:100%;object-fit:cover; }
.create-nft-form textarea { width:100%;padding:10px 14px;background:var(--secondary-bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;font-family:inherit;outline:none;resize:none; }
.create-nft-form textarea:focus { border-color:var(--btn); }

/* ======== SETTINGS ======== */
.settings-section { background:var(--card-bg);border-radius:14px;padding:14px 16px;margin-bottom:8px; }
.settings-label { font-size:14px;font-weight:700;margin-bottom:10px; }

.theme-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.theme-option { display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;background:transparent;border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all 0.2s;color:var(--text); }
.theme-option.active { border-color:var(--btn);background:rgba(59,130,246,0.08); }
.theme-preview { width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,0.1); }
.theme-preview-dark { background:linear-gradient(135deg,#0d0d12,#1a1a24); }
.theme-preview-light { background:linear-gradient(135deg,#f5f5f7,#e8e8ed);border-color:rgba(0,0,0,0.1); }
.theme-preview-purple { background:linear-gradient(135deg,#2d1b69,#6c5ce7); }
.theme-preview-ocean { background:linear-gradient(135deg,#0a1628,#0984e3); }
.theme-preview-sunset { background:linear-gradient(135deg,#2d1a0e,#e17055); }
.theme-preview-emerald { background:linear-gradient(135deg,#0a2818,#00b894); }
.theme-name { font-size:11px;font-weight:600; }

.lang-buttons { display:flex;gap:4px; }
.lang-btn { padding:4px 12px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:13px;border-radius:6px;cursor:pointer;transition:all 0.2s; }
.lang-btn.active { background:var(--btn);color:var(--btn-text);border-color:var(--btn); }

/* ======== REFERRAL ======== */
.referral-card { background:var(--card-bg);border-radius:14px;padding:18px 16px;margin-bottom:10px; }
.referral-stats { display:flex;gap:16px; }
.ref-stat { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; }
.ref-stat-value { font-size:22px;font-weight:800;color:var(--btn); }
.ref-stat-label { font-size:12px;color:var(--hint); }
.referral-link-card { background:var(--card-bg);border-radius:14px;padding:14px;margin-bottom:10px; }
.ref-link-label { font-size:13px;font-weight:600;margin-bottom:8px; }
.ref-link-row { display:flex;gap:8px;margin-bottom:10px; }
.ref-link-input { flex:1;background:var(--secondary-bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--text);outline:none;min-width:0; }
.ref-copy-btn { width:42px;height:42px;border-radius:10px;background:var(--secondary-bg);border:1px solid var(--border);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.ref-copy-btn:active { background:var(--border); }
.ref-share-btn { width:100%; }
.referral-list { background:var(--card-bg);border-radius:14px;padding:14px; }
.ref-list-title { font-size:14px;font-weight:600;margin-bottom:10px; }
.ref-empty { text-align:center;color:var(--hint);font-size:13px;padding:16px 0; }
.ref-user-item { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border); }
.ref-user-item:last-child { border-bottom:none; }
.ref-user-avatar { width:32px;height:32px;border-radius:50%;background:var(--btn);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center; }
.ref-user-name { font-size:14px;font-weight:500; }

/* ======== ADMIN ======== */
.tab-admin { background:rgba(239,68,68,0.12) !important;color:#ef4444 !important;font-size:12px !important;min-width:36px;flex:0 0 auto !important; }
.tab-admin.active { background:#ef4444 !important;color:#fff !important; }
.admin-header { margin-bottom:14px; }
.admin-title { font-size:18px;font-weight:800; }
.admin-stats { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px; }
.admin-stat-card { background:var(--card-bg);border-radius:var(--radius);padding:12px;text-align:center; }
.admin-stat-card.admin-stat-accent { background:rgba(239,68,68,0.08); }
.asc-value { font-size:20px;font-weight:800;color:var(--btn); }
.admin-stat-accent .asc-value { color:#ef4444; }
.asc-label { font-size:11px;color:var(--hint);margin-top:2px; }
.admin-tabs { display:flex;gap:4px;margin-bottom:12px;overflow-x:auto; }
.admin-tab { padding:7px 14px;border:none;background:var(--secondary-bg);color:var(--hint);font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;white-space:nowrap;transition:all 0.2s; }
.admin-tab.active { background:var(--btn);color:var(--btn-text); }
.admin-list { display:flex;flex-direction:column;gap:6px; }
.admin-card { background:var(--card-bg);border-radius:var(--radius);padding:12px;cursor:pointer;transition:transform 0.15s; }
.admin-card:active { transform:scale(0.98); }
.admin-card-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:4px; }
.admin-card-name { font-size:14px;font-weight:600; }
.admin-card-id { font-size:12px;color:var(--hint); }
.admin-card-row { display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--hint); }
.admin-card-balance { color:var(--btn);font-weight:700; }
.admin-card-status { font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600; }
.admin-card-status.pending { background:rgba(234,179,8,0.12);color:#eab308; }
.admin-card-status.approved { background:rgba(34,197,94,0.12);color:#22c55e; }
.admin-card-status.rejected, .admin-card-status.cancelled { background:rgba(239,68,68,0.12);color:#ef4444; }
.admin-card-actions { display:flex;gap:8px;margin-top:6px; }
.admin-btn { flex:1;padding:7px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer; }
.admin-btn-approve { background:rgba(34,197,94,0.15);color:#22c55e; }
.admin-btn-reject { background:rgba(239,68,68,0.15);color:#ef4444; }
.admin-empty { text-align:center;color:var(--hint);padding:28px;font-size:14px; }
.admin-user-info { background:var(--secondary-bg);border-radius:var(--radius-sm);padding:12px;margin-bottom:12px;font-size:13px;color:var(--hint); }
.admin-toggles { margin:12px 0; }
.admin-toggle-row { display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;cursor:pointer; }
.admin-toggle-row input[type="checkbox"] { width:18px;height:18px;accent-color:var(--btn); }
.admin-lock-icon { font-size:44px;text-align:center;margin-bottom:8px; }
.admin-pw-desc { text-align:center;color:var(--hint);font-size:13px;margin-bottom:14px; }
.admin-pw-error { color:#ef4444;font-size:13px;text-align:center;margin-bottom:8px; }

/* ======== COLOR THEMES ======== */
body.theme-light {
    --bg: #f5f5f7;
    --text: #1a1a2e;
    --hint: #8e8e93;
    --link: #3b82f6;
    --btn: #3b82f6;
    --btn-text: #ffffff;
    --secondary-bg: #e8e8ed;
    --card-bg: #ffffff;
    --border: rgba(0, 0, 0, 0.06);
}

body.theme-purple {
    --bg: #1a0e2e;
    --text: #ede7f6;
    --hint: #9e8cbf;
    --link: #b388ff;
    --btn: #7c4dff;
    --btn-text: #ffffff;
    --secondary-bg: #2d1b69;
    --card-bg: #2a1552;
    --border: rgba(179,136,255,0.1);
}

body.theme-ocean {
    --bg: #0a1628;
    --text: #e3f2fd;
    --hint: #78909c;
    --link: #4fc3f7;
    --btn: #0984e3;
    --btn-text: #ffffff;
    --secondary-bg: #0d2137;
    --card-bg: #112940;
    --border: rgba(79,195,247,0.1);
}

body.theme-sunset {
    --bg: #1a0e0a;
    --text: #fbe9e7;
    --hint: #a1887f;
    --link: #ff8a65;
    --btn: #e17055;
    --btn-text: #ffffff;
    --secondary-bg: #2d1a0e;
    --card-bg: #3e2214;
    --border: rgba(255,138,101,0.1);
}

body.theme-emerald {
    --bg: #0a1a14;
    --text: #e0f2f1;
    --hint: #80cbc4;
    --link: #69f0ae;
    --btn: #00b894;
    --btn-text: #ffffff;
    --secondary-bg: #0d2818;
    --card-bg: #133322;
    --border: rgba(105,240,174,0.1);
}

/* Light theme adjustments */
body.theme-light .header { background:rgba(245,245,247,0.88); }
body.theme-light .bottom-nav { background:rgba(245,245,247,0.92); }
body.theme-light .token-price-badge { background:var(--btn); }

/* ======== COLLECTION COVER ======== */
.collection-cover {
    width: 60px;
    min-height: 60px;
    flex-shrink: 0;
    overflow: hidden;
}
.collection-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.collection-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

/* ======== USER PUBLIC PROFILE ======== */
.user-profile-modal .modal-content { padding-top:16px; }
.up-header { display:flex;align-items:center;gap:14px;margin-bottom:16px; }
.up-avatar { width:56px;height:56px;border-radius:50%;background:var(--btn);color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.up-info { flex:1;min-width:0; }
.up-name { font-size:18px;font-weight:800; }
.up-verified { font-size:12px;color:#22c55e;margin-top:2px; }
.up-not-verified { font-size:12px;color:var(--hint);margin-top:2px; }
.up-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px; }
.up-stat { text-align:center;background:var(--secondary-bg);border-radius:12px;padding:12px 6px; }
.up-stat-value { font-size:18px;font-weight:800;color:var(--btn); }
.up-stat-label { font-size:11px;color:var(--hint);margin-top:2px; }
.up-rating { display:flex;align-items:center;justify-content:center;gap:6px;background:var(--secondary-bg);border-radius:12px;padding:12px;margin-bottom:14px; }
.up-rating-stars { color:#eab308;font-size:20px;letter-spacing:2px; }
.up-rating-text { font-size:14px;font-weight:600; }
.up-rating-count { font-size:12px;color:var(--hint); }

/* ======== AUCTION ======== */
.auction-section { margin-top:8px; }
.auction-card {
    background: var(--card-bg);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
    margin-bottom: 8px;
}
.auction-card:active { transform: scale(0.98); }
.auction-top { display: flex; align-items: stretch; }
.auction-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
}
.auction-img-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-bg);
    font-size: 28px;
    flex-shrink: 0;
}
.auction-body { flex: 1; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; }
.auction-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.auction-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.auction-price { font-size: 16px; font-weight: 800; color: var(--btn); }
.auction-bids { font-size: 11px; color: var(--hint); }
.auction-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239,68,68,0.1);
    padding: 3px 10px;
    border-radius: 8px;
}
.auction-timer.ending-soon { animation: timerPulse 1s infinite; }
@keyframes timerPulse { 0%,100%{opacity:1;}50%{opacity:0.5;} }

/* Auction detail in modal */
.auction-detail-timer { text-align:center;margin:12px 0; }
.auction-detail-timer .timer-big { font-size:28px;font-weight:800;color:#ef4444;font-variant-numeric:tabular-nums; }
.auction-detail-timer .timer-label { font-size:12px;color:var(--hint);margin-top:2px; }
.auction-bid-row { display:flex;gap:8px;margin-top:12px; }
.auction-bid-row input { flex:1; }
.auction-bid-row .btn { flex-shrink:0; }

/* Auction tab in marketplace */
.mp-tab-auction { position:relative; }
.mp-tab-auction .auction-live-dot { width:6px;height:6px;border-radius:50%;background:#ef4444;display:inline-block;margin-left:4px;animation:timerPulse 1s infinite; }