/* ============================================
   愛縮減 (Jump) - 全域樣式 v2.1
   現代化 UI 設計系統
   ============================================ */

/* ----- 基礎重置與變數 ----- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --surface-card: var(--bg-card);
    --surface-card-border: var(--border);
    --surface-card-shadow: 0 18px 48px color-mix(in srgb, var(--shadow) 55%, transparent);
    --surface-card-muted: color-mix(in srgb, var(--bg-card) 88%, var(--primary) 12%);
}

.tracked-ad { position: relative; overflow: hidden; border-radius: 14px; }
.tracked-ad img { display: block; max-width: 100%; height: auto; margin: auto; }
.language-switcher{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);border-radius:999px;background:color-mix(in srgb,var(--card-bg) 82%,transparent)}
.language-switcher a{display:grid;place-items:center;min-width:30px;height:28px;padding:0 7px;border-radius:999px;color:var(--text-light);font-size:.74rem;font-weight:800;text-decoration:none}
.language-switcher a.active{background:var(--primary);color:#fff;box-shadow:0 0 18px color-mix(in srgb,var(--primary) 42%,transparent)}

/* Shared visit analytics for URL, video, image and text pages. */
.view-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 22px 0;
}
.view-stat {
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 108px;
    padding: 16px 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.view-stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.view-stat strong {
    color: var(--text-color);
    font-size: 1.2rem;
    line-height: 1;
}
.view-stat > span:last-child {
    color: var(--text-light);
    font-size: .78rem;
}
.ranking-privacy-note {
    max-width: 760px;
    margin: -6px auto 18px;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 12px;
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 7%, var(--card-bg));
    text-align: center;
    font-size: .86rem;
}
@media (max-width: 768px) {
    .view-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .view-stat { min-height: 96px; padding: 13px 8px; }
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    background: var(--primary);
    color: #fff;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

/* ----- 載入動畫 ----- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ----- Navbar ----- */
.navbar {
    background: var(--bg-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s;
}
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.navbar .container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
}
.navbar-brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}
.navbar-brand i {
    font-size: 1.5rem;
}
.navbar-menu {
    display: flex;
    gap: 4px;
    flex: 1;
    align-items: center;
}
.nav-link {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.nav-link:hover {
    background: var(--primary);
    color: #fff !important;
    transform: translateY(-1px);
}
.nav-link i {
    margin-right: 5px;
    font-size: 0.85rem;
}
.btn-register {
    background: var(--primary);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
}
.btn-register:hover {
    box-shadow: 0 4px 12px rgba(108,99,255,0.3);
}
.btn-logout {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--error);
    transition: all 0.2s;
}
.btn-logout:hover {
    color: #ff4757;
    transform: translateY(-1px);
}

/* Theme Switcher */
.theme-switcher {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg);
    border-radius: 20px;
    border: 1px solid var(--border);
}
.theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid transparent;
    display: block;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}
.theme-dot:hover {
    transform: scale(1.35);
    border-color: var(--primary);
}
.theme-dot.default { background: #6C63FF; }
.theme-dot.ai { background: conic-gradient(from 210deg, #31d7ff, #8b5cf6, #20e3b2, #31d7ff); }
.theme-dot.dark { background: #2d3436; }
.theme-dot.minimal { background: #000; }
.theme-dot.gradient { background: linear-gradient(135deg, #667eea, #764ba2); }
.theme-dot.retro { background: #d4a574; }
.theme-dot.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px color-mix(in srgb, var(--primary) 45%, transparent);
    transform: scale(1.12);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text);
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.mobile-toggle:hover {
    background: var(--bg);
}

.mobile-app-nav {
    display: none;
}

/* ----- Alerts / Notifications ----- */
.alert {
    padding: 16px 20px;
    border-radius: var(--radius);
    margin: 15px auto;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.92rem;
    border-left: 4px solid transparent;
}
.alert-success {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: #fff;
    border-left-color: #00836a;
    box-shadow: 0 4px 15px rgba(0,184,148,0.25);
}
.alert-error {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #fff;
    border-left-color: #c0392b;
    box-shadow: 0 4px 15px rgba(255,107,107,0.25);
}
.alert i {
    font-size: 1.2rem;
}
.short-url-display {
    font-weight: 700;
    font-size: 1.1rem;
    word-break: break-all;
    flex: 1;
}
.btn-copy {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-copy:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

/* ----- Main Content ----- */
.main-content {
    flex: 1;
    padding: 30px 0;
    animation: fadeIn 0.3s ease;
}

/* ----- Footer ----- */
.footer {
    background: var(--bg-nav);
    padding: 50px 0 0;
    margin-top: 60px;
    border-top: 1px solid var(--border);
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 25px;
}
.footer-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-section h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
}
.footer-section a {
    color: var(--text-light);
    font-size: 0.9rem;
    transition: all 0.2s;
    padding: 2px 0;
}
.footer-section a:hover {
    color: var(--primary);
    transform: translateX(4px);
}
.footer-section--brand p {
    max-width: 32ch;
    color: var(--text-light);
    line-height: 1.75;
}
.footer-section--friends a i {
    margin-left: 4px;
    font-size: .7em;
    opacity: .65;
}
.footer-bottom {
    text-align: center;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    color: var(--text-light);
    font-size: 0.85rem;
}

/* ----- Cards ----- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px var(--shadow), 0 1px 2px rgba(0,0,0,0.02);
    padding: 25px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}
.card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-title i {
    color: var(--primary);
}

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    opacity: 0;
    transition: opacity 0.2s;
}
.btn:hover::after {
    opacity: 1;
}
.btn:active {
    transform: scale(0.97);
}
.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(108,99,255,0.2);
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108,99,255,0.3);
    color: #fff !important;
}
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.btn-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}
.btn-block {
    width: 100%;
    justify-content: center;
}
.btn-sm {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: 6px;
}
.btn-lg {
    padding: 14px 36px;
    font-size: 1.05rem;
}

/* ----- Forms ----- */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-light);
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: var(--bg-card);
    color: var(--text);
    transition: all 0.25s ease;
    font-family: inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(108,99,255,0.1);
}
.form-input::placeholder, .form-textarea::placeholder {
    color: var(--text-light);
    opacity: 0.6;
}
.form-textarea {
    resize: vertical;
    min-height: 100px;
}
select.form-select {
    cursor: pointer;
    appearance: auto;
}

/* ----- Hero Section ----- */
.hero {
    text-align: center;
    padding: 50px 0 35px;
    animation: fadeInUp 0.6s ease;
}
.hero h1 {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.hero p {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ----- Feature Cards Grid ----- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 40px 0;
}
.feature-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 28px 22px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}
.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.06);
    border-color: var(--primary-light);
}
.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
    transition: transform 0.3s;
}
.feature-card:hover .feature-icon {
    transform: scale(1.15);
}
.feature-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.feature-card p {
    color: var(--text-light);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ----- URL Input / Shortener Form ----- */
.url-form {
    max-width: 760px;
    margin: 0 auto 30px;
    animation: fadeInUp 0.6s ease 0.1s both;
}
.url-input-group {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    position: relative;
}
.url-input-group .form-input {
    flex: 1;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 16px 20px;
    font-size: 1rem;
    border-right: none;
}
.url-input-group .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 16px 28px;
    font-size: 1rem;
    flex-shrink: 0;
}
.options-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* Type Selector Cards */
.type-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.type-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 0.88rem;
    font-weight: 500;
    background: var(--bg-card);
    color: var(--text);
}
.type-option:hover {
    border-color: var(--primary-light);
    background: rgba(108,99,255,0.03);
}
.type-option.selected {
    border-color: var(--primary);
    background: rgba(108,99,255,0.08);
    color: var(--primary);
    font-weight: 600;
}
.type-option input[type="radio"] {
    display: none;
}
.type-option i, .type-option .emoji {
    font-size: 1.2rem;
}

/* Password toggle */
.password-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-light);
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.2s;
    user-select: none;
}
.password-toggle:hover {
    background: rgba(108,99,255,0.05);
    color: var(--primary);
}
.password-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* File Upload Area */
.file-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 30px 20px;
    text-align: center;
    background: var(--bg);
    transition: all 0.3s;
    cursor: pointer;
    margin-bottom: 15px;
}
.file-upload-area:hover {
    border-color: var(--primary);
    background: rgba(108,99,255,0.02);
}
.file-upload-area .upload-icon {
    font-size: 2.5rem;
    color: var(--primary-light);
    margin-bottom: 8px;
    display: block;
}
.file-upload-area p {
    color: var(--text-light);
    font-size: 0.88rem;
}
.file-upload-area input[type="file"] {
    margin-top: 10px;
}

/* Description Input */
.description-input {
    width: 100%;
    max-width: 500px;
}

/* Expiry Select */
.expiry-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-light);
}
.expiry-select select {
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}

/* ----- Ranking Section ----- */
.ranking-section {
    margin-top: 50px;
    animation: fadeInUp 0.6s ease 0.2s both;
}
.ranking-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
    overflow-x: auto;
}
.ranking-tab {
    padding: 12px 22px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-light);
    border-bottom: 3px solid transparent;
    transition: all 0.25s;
    white-space: nowrap;
    text-decoration: none;
}
.ranking-tab:hover {
    color: var(--primary);
    border-bottom-color: var(--primary-light);
}
.ranking-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.ranking-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}
.ranking-item:last-child {
    border-bottom: none;
}
.ranking-item:hover {
    background: rgba(108,99,255,0.02);
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 8px;
}
.ranking-num {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary);
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.ranking-item:first-child .ranking-num { color: #ffd700; }
.ranking-item:nth-child(2) .ranking-num { color: #c0c0c0; }
.ranking-item:nth-child(3) .ranking-num { color: #cd7f32; }
.ranking-info {
    flex: 1;
    overflow: hidden;
}
.ranking-url {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ranking-url a {
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ranking-url a:hover {
    color: var(--primary);
}
.ranking-url i {
    font-size: 0.85rem;
    color: var(--primary-light);
}
.ranking-meta {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 3px;
    display: flex;
    gap: 12px;
}
.ranking-clicks {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ranking-clicks i {
    color: var(--primary-light);
    font-size: 0.9rem;
}

/* ----- Auth Pages (Login / Register) ----- */
.auth-container {
    max-width: 420px;
    margin: 40px auto;
    animation: fadeInUp 0.5s ease;
}
.auth-container .card {
    padding: 35px;
}
.auth-container h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.4rem;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    color: var(--text-light);
    font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.btn-google {
    background: var(--bg-card);
    color: var(--text);
    border: 2px solid var(--border);
    width: 100%;
    justify-content: center;
    font-weight: 600;
}
.btn-google:hover {
    border-color: var(--primary-light);
    background: rgba(108,99,255,0.03);
    transform: translateY(-1px);
}

/* ----- Dashboard ----- */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 1px 3px var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.3s;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
.stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}
.stat-label {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 5px;
    font-weight: 500;
}
.member-analytics-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
}
.member-analytics-heading h2 {
    margin: 4px 0 6px;
    font-size: clamp(1.45rem, 3vw, 2rem);
}
.member-analytics-heading p,
.member-analytics-card__head > span {
    color: var(--text-light);
    font-size: .86rem;
}
.member-analytics-card {
    margin-bottom: 22px;
    padding: 24px;
}
.member-analytics-card__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.member-analytics-card__head h3 {
    margin-top: 4px;
}
.member-trend {
    display: grid;
    grid-template-columns: repeat(14, minmax(24px, 1fr));
    align-items: end;
    gap: 8px;
    min-height: 220px;
    padding-top: 20px;
    overflow-x: auto;
}
.member-trend__point {
    display: grid;
    grid-template-rows: 24px 150px 24px;
    align-items: end;
    min-width: 30px;
    text-align: center;
}
.member-trend__value,
.member-trend__label {
    color: var(--text-light);
    font-size: .7rem;
}
.member-trend__bar {
    width: min(24px, 80%);
    min-height: 4px;
    justify-self: center;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, var(--primary-light), var(--primary));
    box-shadow: 0 0 18px rgba(108,99,255,.18);
}
.member-dimension-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.member-dimension {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-card) 94%, var(--primary) 6%);
}
.member-dimension h4 {
    margin-bottom: 12px;
}
.member-dimension-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}
.member-dimension-table th,
.member-dimension-table td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.member-dimension-table th:last-child,
.member-dimension-table td:last-child {
    text-align: right;
    font-weight: 700;
}
.member-analytics-empty {
    color: var(--text-light);
    font-size: .85rem;
}
.member-link-metrics small {
    display: block;
    margin-top: 4px;
    color: var(--text-light);
    white-space: nowrap;
}

/* Link Table */
.link-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.link-table th {
    padding: 14px 15px;
    text-align: left;
    font-weight: 700;
    color: var(--text-light);
    border-bottom: 2px solid var(--border);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.link-table td {
    padding: 14px 15px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.link-table tbody tr {
    transition: background 0.2s;
}
.link-table tbody tr:hover {
    background: rgba(108,99,255,0.03);
}
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.status-active {
    background: rgba(0,184,148,0.12);
    color: #00b894;
}
.status-paused {
    background: rgba(253,203,110,0.2);
    color: #f39c12;
}
.status-disabled {
    background: rgba(255,107,107,0.12);
    color: #ff6b6b;
}

/* ----- Redirect Page ----- */
.redirect-container {
    text-align: center;
    padding: 60px 20px;
    max-width: 700px;
    margin: 0 auto;
}
.redirect-timer {
    font-size: 5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 10px;
    line-height: 1;
    animation: pulse 1s ease infinite;
}
.redirect-text {
    color: var(--text-light);
    margin-bottom: 25px;
    font-size: 1.1rem;
}
.ad-container {
    max-width: 728px;
    margin: 20px auto;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    flex-direction: column;
    gap: 8px;
}
.redirect-info {
    margin-top: 25px;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border);
}
.redirect-info strong {
    word-break: break-all;
    font-size: 1rem;
}
.redirect-url {
    font-size: 0.82rem;
    color: var(--text-light);
    word-break: break-all;
    margin-top: 8px;
}

/* ----- Media Pages (Video / Image / Text) ----- */
.media-container {
    max-width: 850px;
    margin: 0 auto;
    animation: fadeInUp 0.5s ease;
}
.media-container video {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    background: #000;
}
.media-container img {
    max-width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.media-container img:hover {
    transform: scale(1.01);
}
.media-info {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.media-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.media-info p {
    color: var(--text-light);
    font-size: 0.88rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.media-ad-slot {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Text Content */
.text-content-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 25px;
    border: 1px solid var(--border);
    max-height: 600px;
    overflow-y: auto;
    line-height: 1.8;
    font-size: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.text-content-card::-webkit-scrollbar {
    width: 6px;
}

/* ----- Report Form ----- */
.report-form {
    max-width: 520px;
    margin: 0 auto;
    animation: fadeInUp 0.5s ease;
}
.report-reason {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}
.report-reason label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    font-size: 0.9rem;
    font-weight: 500;
}
.report-reason label:hover {
    border-color: var(--primary-light);
    background: rgba(108,99,255,0.03);
}
.report-reason input[type="radio"] {
    display: none;
}
.report-reason label:has(input:checked) {
    border-color: var(--error);
    background: rgba(255,107,107,0.05);
    color: var(--error);
}
.report-reason input:checked + span {
    font-weight: 700;
}

/* ----- Ad Recruitment ----- */
.ad-recruit {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-radius: var(--radius);
    padding: 35px 30px;
    text-align: center;
    margin: 30px 0;
    animation: fadeInUp 0.6s ease;
}
.ad-recruit h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.ad-recruit p {
    opacity: 0.95;
    margin-bottom: 18px;
    font-size: 1rem;
}
.ad-recruit .btn {
    background: #fff;
    color: var(--primary);
    font-weight: 700;
}
.ad-recruit .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255,255,255,0.2);
}

/* ----- Ads ----- */
.ad-slot {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* ----- Unlock Page ----- */
.unlock-container {
    max-width: 420px;
    margin: 60px auto;
    text-align: center;
    animation: fadeInUp 0.5s ease;
}
.unlock-icon {
    font-size: 4rem;
    color: var(--primary);
    margin-bottom: 15px;
    display: block;
    animation: pulse 2s ease infinite;
}
.unlock-error-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 8, 24, .74);
    backdrop-filter: blur(12px);
}
.unlock-error-dialog {
    position: relative;
    width: min(440px, 100%);
    padding: 20px 24px 28px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--error) 45%, var(--border));
    border-radius: 24px;
    background: color-mix(in srgb, var(--card-bg) 94%, var(--primary) 6%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .38), 0 0 45px color-mix(in srgb, var(--error) 20%, transparent);
    text-align: center;
    animation: unlockErrorIn .35s ease both;
}
.unlock-error-illustration {
    display: block;
    width: min(280px, 84%);
    margin: 0 auto 14px;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(7, 15, 45, .26);
}
.unlock-error-close {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--text-light) 25%, transparent);
    border-radius: 50%;
    color: #fff;
    background: rgba(8, 12, 30, .72);
    cursor: pointer;
}
.unlock-error-kicker,
.link-status-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.unlock-error-dialog h2 { margin-bottom: 8px; }
.unlock-error-dialog p { margin-bottom: 20px; color: var(--text-light); }
@keyframes unlockErrorIn {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----- Link status and error pages ----- */
.link-status-page {
    width: min(760px, 100%);
    margin: 38px auto 52px;
}
.link-status-card {
    padding: clamp(24px, 5vw, 46px);
    border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
    border-radius: 28px;
    background: color-mix(in srgb, var(--card-bg) 94%, var(--primary) 6%);
    box-shadow: var(--surface-card-shadow);
    text-align: center;
    animation: fadeInUp .5s ease;
}
.link-status-visual { position: relative; width: min(420px, 100%); margin: 0 auto 20px; }
.link-status-illustration {
    display: block;
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 22px 56px rgba(7, 15, 45, .3);
}
.link-status-code {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: #fff;
    background: rgba(5, 9, 28, .72);
    backdrop-filter: blur(8px);
    font-size: .75rem;
    font-weight: 800;
}
.link-status-card h1 { margin-bottom: 10px; font-size: clamp(1.55rem, 4vw, 2.25rem); }
.link-status-card > p { max-width: 580px; margin: 0 auto 22px; color: var(--text-light); }
.link-status-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--text-light);
    font-size: .9rem;
}
.link-status-countdown strong { color: var(--primary); font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.link-status-progress {
    width: min(360px, 100%);
    height: 7px;
    margin: 0 auto 24px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--border));
}
.link-status-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--secondary, #52e5ff));
    transition: width .9s linear;
}
.link-status-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.status-managed-ad {
    margin-top: 24px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--card-bg) 96%, var(--primary) 4%);
}
.status-managed-ad__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.status-managed-ad .media-ad-slot { margin-bottom: 0; }
@media (max-width: 520px) {
    .link-status-page { margin-top: 18px; }
    .link-status-card { border-radius: 22px; }
    .link-status-actions .btn { width: 100%; }
    .unlock-error-dialog { padding-inline: 18px; }
}

/* ----- Profile Page ----- */
.profile-container {
    max-width: 550px;
    margin: 30px auto;
    animation: fadeInUp 0.5s ease;
}
.profile-email-box {
    padding: 16px 20px;
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 24px;
}
.profile-email-box label {
    font-size: 0.82rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.profile-email-box .email-value {
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: 4px;
}

/* ----- Policy Page ----- */
.policy-container {
    max-width: 780px;
    margin: 0 auto;
    padding: 30px 0;
    animation: fadeInUp 0.5s ease;
}
.policy-container .card {
    padding: 40px 45px;
}
.policy-container h1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.policy-date {
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 0.88rem;
}
.policy-content {
    line-height: 1.9;
    color: var(--text);
}
.policy-content h3 {
    margin: 25px 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
}
.policy-content p {
    margin-bottom: 10px;
    color: var(--text-light);
}
.policy-content ul {
    margin: 8px 0 10px 20px;
}
.policy-content li {
    margin-bottom: 5px;
    color: var(--text-light);
}

/* ----- About Page ----- */
.about-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 10px 0;
}
.about-feature-item {
    text-align: center;
    padding: 25px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: all 0.3s;
}
.about-feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-color: var(--primary-light);
}
.about-feature-item .icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}
.about-feature-item h4 {
    font-weight: 700;
    margin-bottom: 8px;
}
.about-feature-item p {
    color: var(--text-light);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* ----- Loading / Spinner ----- */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}
.spinner-white {
    border-color: rgba(255,255,255,0.3);
    border-top-color: #fff;
}

/* ----- Scroll-to-top ----- */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(108,99,255,0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
}
.scroll-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(108,99,255,0.4);
}

/* ----- Beautiful Transitions ----- */
.fade-in {
    animation: fadeInUp 0.5s ease;
}
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
.fade-in-delay-4 { animation-delay: 0.4s; }

/* ----- Responsive Design ----- */
@media (max-width: 1120px) {
    .navbar-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--bg-nav);
        padding: 15px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        border-bottom: 1px solid var(--border);
        gap: 2px;
    }
    .navbar-menu.active {
        display: flex;
        animation: slideDown 0.3s ease;
    }
    .mobile-toggle {
        display: block;
    }
    .theme-switcher {
        margin-left: auto;
        order: 2;
    }
}

@media (max-width: 992px) {
    .hero h1 { font-size: 2.2rem; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .about-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; }

    .options-row {
        flex-direction: column;
        align-items: stretch;
    }
    .url-input-group {
        flex-direction: column;
        gap: 10px;
    }
    .url-input-group .form-input {
        border-radius: var(--radius);
        border-right: 2px solid var(--border);
    }
    .url-input-group .btn {
        border-radius: var(--radius);
    }
    .type-selector {
        flex-wrap: wrap;
        justify-content: center;
    }

    .features-grid { grid-template-columns: 1fr; }
    .about-features { grid-template-columns: 1fr; }
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .report-reason { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; }

    .link-table { font-size: 0.8rem; }
    .link-table th, .link-table td { padding: 10px 8px; }
    .link-table th:nth-child(4),
    .link-table td:nth-child(4),
    .link-table th:nth-child(7),
    .link-table td:nth-child(7) { display: none; }

    .policy-container .card { padding: 25px 20px; }

    .stat-card { padding: 18px 12px; }
    .stat-number { font-size: 1.6rem; }

    .redirect-timer { font-size: 3.5rem; }

    .ranking-tabs { gap: 0; }
    .ranking-tab { padding: 10px 14px; font-size: 0.82rem; }

    .auth-container { margin: 20px auto; padding: 0 15px; }
    .auth-container .card { padding: 25px 20px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.5rem; }
    .navbar-brand { font-size: 1.1rem; }
    .theme-switcher { display: none; }
    .dashboard-stats { grid-template-columns: 1fr; }
    .link-table th:nth-child(5),
    .link-table td:nth-child(5) { display: none; }
    .container { padding: 0 12px; }
}

/* ============================================
   v3.0 - Shortener workspace & content viewer
   ============================================ */
.nav-link.active {
    background: rgba(108, 99, 255, 0.1);
    color: var(--primary);
    font-weight: 700;
}

.main-content {
    background:
        radial-gradient(circle at 8% 5%, rgba(108, 99, 255, 0.08), transparent 24rem),
        radial-gradient(circle at 92% 18%, rgba(0, 184, 148, 0.06), transparent 22rem);
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 58px 36px 36px;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
    box-shadow: 0 24px 70px rgba(31, 38, 135, 0.08);
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}
.hero::before {
    width: 260px;
    height: 260px;
    top: -155px;
    right: -70px;
    background: linear-gradient(135deg, rgba(108,99,255,.22), rgba(0,184,148,.12));
}
.hero::after {
    width: 180px;
    height: 180px;
    left: -90px;
    bottom: -110px;
    border: 28px solid rgba(108,99,255,.07);
}
.hero > * {
    position: relative;
    z-index: 1;
}
.hero-badge,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(108,99,255,.1);
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.hero h1 {
    max-width: 820px;
    margin: 18px auto 12px;
    font-size: clamp(2.1rem, 5vw, 3.65rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    color: var(--text);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.hero h1 span {
    display: block;
    background: linear-gradient(120deg, var(--primary), #00b894);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.hero .hero-subtitle {
    max-width: 720px;
    margin-bottom: 26px;
    font-size: 1.05rem;
}

.shortener-panel {
    max-width: 900px;
    margin-bottom: 0;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    box-shadow: 0 18px 50px rgba(36, 32, 95, .1);
    text-align: left;
}
.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    color: var(--text);
}
.panel-heading > div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-step {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
}
.panel-note {
    color: var(--text-light);
    font-size: .78rem;
}
.panel-note i { color: #f6b93b; }
.url-input-group {
    gap: 10px;
    margin-bottom: 14px;
}
.url-input-group .primary-input {
    min-width: 0;
    border: 2px solid var(--border);
    border-radius: 13px;
    background: var(--bg);
}
.url-input-group .btn {
    min-width: 126px;
    border-radius: 13px;
}
.shortener-controls {
    justify-content: space-between;
    padding: 12px;
    border-radius: 13px;
    background: var(--bg);
}
.content-type-select {
    width: min(100%, 330px);
    border-width: 1px;
    background: var(--bg-card);
}
.password-toggle {
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.dynamic-section {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg);
}
.file-upload-area {
    position: relative;
    margin: 0;
    padding: 28px;
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    background: color-mix(in srgb, var(--primary) 4%, var(--bg-card));
}
.file-upload-area strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
}
.file-upload-area input[type="file"] {
    width: min(100%, 380px);
    color: var(--text-light);
}
.description-row { margin: 12px 0; }
.advanced-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 15px;
}
.advanced-options .expiry-select {
    justify-content: space-between;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}
.advanced-options select,
.limit-input {
    width: 112px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
}
.form-legal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    color: var(--text-light);
    font-size: .76rem;
    text-align: center;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 32px;
}
.service-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 28px 24px;
    text-align: left;
}
.service-card::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -35px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(108,99,255,.06);
}
.service-card.featured {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 14px 36px rgba(108,99,255,.12);
}
.service-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 17px;
    background: rgba(108,99,255,.1);
    font-size: 1.7rem;
}
.media-service .service-icon { background: rgba(255,107,107,.12); }
.image-service .service-icon { background: rgba(0,184,148,.12); }
.service-card h3 { font-size: 1.05rem; }

.benefits-section {
    margin-top: 58px;
    text-align: center;
}
.benefits-section h2 {
    margin: 12px 0 24px;
    font-size: clamp(1.45rem, 3vw, 2rem);
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.benefits-grid .feature-item {
    padding: 24px 18px !important;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    transition: transform .25s ease, box-shadow .25s ease;
}
.benefits-grid .feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.07);
}

.content-page {
    max-width: 1000px;
    padding-top: 18px;
}
.content-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(22, 27, 62, .1);
    animation: fadeInUp .45s ease;
}
.content-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px 22px;
}
.content-header h1 {
    margin-top: 9px;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.content-header p {
    margin-top: 8px;
    color: var(--text-light);
}
.content-kind {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}
.image-kind { background: rgba(0,184,148,.12); color: #009b78; }
.video-kind { background: rgba(255,107,107,.12); color: #e55039; }
.text-kind { background: rgba(108,99,255,.12); color: var(--primary); }
.content-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.content-meta span {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text-light);
    font-size: .76rem;
    white-space: nowrap;
}
.media-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    margin: 0 20px;
    overflow: hidden;
    border-radius: 18px;
    background: #111827;
}
.image-stage {
    background-color: #eef1f6;
    background-image:
        linear-gradient(45deg, rgba(148,163,184,.16) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148,163,184,.16) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148,163,184,.16) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.16) 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}
.image-stage img {
    width: auto;
    max-width: 100%;
    max-height: 72vh;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}
.video-stage {
    flex-direction: column;
    padding: 0;
}
.video-stage video {
    width: 100%;
    max-height: 72vh;
    border-radius: 0;
}
.video-stage audio {
    width: min(90%, 720px);
    margin: 0 0 34px;
}
.audio-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 52px 0 28px;
    color: #fff;
}
.audio-art i { font-size: 4.5rem; color: #8b83ff; }
.audio-art span { color: #aeb7c8; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.text-stage {
    margin: 0 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg);
}
.text-stage pre {
    max-height: 64vh;
    overflow: auto;
    padding: 28px;
    color: var(--text);
    font: 400 1rem/1.85 var(--font);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.content-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 28px 28px;
}
.content-report {
    margin-left: auto;
    color: var(--error);
    font-size: .82rem;
}

@media (max-width: 900px) {
    .service-grid,
    .benefits-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .hero {
        padding: 38px 14px 18px;
        border-radius: 20px;
    }
    .hero h1 { font-size: 2rem; }
    .shortener-panel { padding: 14px; border-radius: 15px; }
    .panel-heading { align-items: flex-start; }
    .panel-note { display: none; }
    .shortener-controls { align-items: stretch; }
    .content-type-select { width: 100%; }
    .advanced-options,
    .service-grid,
    .benefits-grid { grid-template-columns: 1fr; }
    .member-dimension-grid { grid-template-columns: 1fr; }
    .member-analytics-card { padding: 18px 14px; }
    .member-analytics-card__head { align-items: flex-start; flex-direction: column; }
    .service-card:last-child { grid-column: auto; }
    .form-legal { text-align: left; }
    .content-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px 18px 18px;
    }
    .content-meta { justify-content: flex-start; }
    .media-stage,
    .text-stage { margin: 0 10px; border-radius: 14px; }
    .content-actions { flex-wrap: wrap; padding: 18px; }
    .content-actions .btn { flex: 1; }
    .content-report { width: 100%; margin: 8px 0 0; text-align: center; }
}
.trust-page h1{margin-bottom:12px}.trust-page .lead{font-size:1.05rem;line-height:1.8;color:var(--text-light);margin-bottom:24px}.trust-page h2{font-size:1.18rem;margin:26px 0 10px}.trust-page p,.trust-page li{line-height:1.85}.trust-page ul{margin:10px 0 10px 22px}.faq-list{display:grid;gap:12px;margin-top:22px}.faq-list details{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:0 18px}.faq-list summary{cursor:pointer;font-weight:700;padding:17px 0}.faq-list details p{padding:0 0 17px;color:var(--text-light)}

.trust-center{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:38px 0 70px}.trust-hero{position:relative;overflow:hidden;padding:34px;border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--bg-card) 92%,#071329 8%),color-mix(in srgb,var(--bg-card) 84%,#2a1857 16%));box-shadow:0 22px 70px color-mix(in srgb,var(--shadow) 52%,transparent);color:var(--text-color);border-radius:22px}.trust-hero:after{content:"";position:absolute;inset:auto -8% -55% 45%;height:220px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 28%,transparent),transparent 68%);pointer-events:none}.trust-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--primary-light);font-size:.76rem;font-weight:850;letter-spacing:.1em}.trust-hero h1{margin:0 0 12px;font-size:clamp(1.75rem,3vw,3rem);line-height:1.15;letter-spacing:-.035em}.trust-hero p{max-width:760px;color:var(--text-light);line-height:1.85}.review-mode-banner{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:12px 16px;border-radius:999px;font-weight:700}.review-mode-banner.enabled{color:#052e26;background:linear-gradient(135deg,#7cf8d4,#d8fff5)}.review-mode-banner.disabled{color:#3b1d04;background:linear-gradient(135deg,#ffd18a,#fff4d8)}.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}.trust-grid.compact{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.trust-card,.trust-faq-panel,.trust-step{border:1px solid var(--surface-card-border);background:var(--surface-card);color:var(--text-color);box-shadow:var(--surface-card-shadow);backdrop-filter:blur(18px) saturate(125%);border-radius:18px}.trust-card{position:relative;overflow:hidden;padding:25px}.trust-card:after{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,transparent,var(--primary),transparent);opacity:.7}.trust-card.wide{grid-column:1/-1}.trust-index{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);border-radius:13px;color:color-mix(in srgb,var(--primary) 25%,#071025);background:linear-gradient(135deg,var(--primary),var(--primary-light));box-shadow:0 10px 26px color-mix(in srgb,var(--primary) 23%,transparent);font-weight:900}.trust-card h2,.trust-step h2{margin:0 0 10px;color:var(--text-color);font-size:1.08rem;letter-spacing:-.015em}.trust-card p,.trust-card li,.trust-step p{color:var(--text-light);line-height:1.85}.trust-card ul{margin:12px 0 0;padding-left:20px}.trust-action{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}.trust-timeline{display:grid;gap:16px;margin-top:22px}.trust-step{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:24px}.trust-step>span{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--primary) 36%,transparent);border-radius:16px;background:var(--surface-card-muted);color:var(--primary);font-weight:900}.trust-faq-panel{margin-top:22px;padding:22px}.trust-faq-panel .faq-list{margin-top:0}.trust-faq-panel details{border:1px solid var(--surface-card-border);border-radius:14px;padding:17px 18px;background:var(--surface-card-muted);color:var(--text-color)}.trust-faq-panel details+details{margin-top:12px}.trust-faq-panel summary{cursor:pointer;font-weight:800;padding:0}.trust-faq-panel p{margin-top:10px;color:var(--text-light);line-height:1.75}
.trust-home-section{margin-top:34px}.trust-home-section>a,.trust-home-section .trust-card{text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}.trust-home-section .trust-card:hover{transform:translateY(-4px);border-color:rgba(77,232,255,.38)}

@media (max-width:768px){
    body{padding-bottom:calc(92px + env(safe-area-inset-bottom) + var(--adsense-anchor-bottom-offset,0px))}
    .navbar{top:var(--adsense-anchor-top-offset,0px)}
    .main-content{padding-bottom:18px}
    .mobile-app-nav{position:fixed;z-index:1200;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + var(--adsense-anchor-bottom-offset,0px));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;width:min(calc(100% - 20px),520px);min-height:74px;padding:8px 7px 7px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:24px;background:color-mix(in srgb,var(--bg-nav) 91%,transparent);box-shadow:0 18px 52px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(24px) saturate(150%);transform:translateX(-50%);transition:bottom .2s ease}
    .mobile-app-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;padding:5px 2px;border-radius:15px;color:var(--text-light);font-size:.67rem;font-weight:750;line-height:1.1;text-align:center;transition:color .2s ease,background .2s ease,transform .2s ease}
    .mobile-app-nav__item>i{font-size:1.08rem}
    .mobile-app-nav__item.active{color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,transparent)}
    .mobile-app-nav__primary{margin-top:-24px;color:var(--primary)}
    .mobile-app-nav__primary-icon{display:grid;place-items:center;width:52px;height:52px;border:4px solid var(--bg);border-radius:18px;color:#06101d;background:linear-gradient(135deg,var(--primary),var(--success));box-shadow:0 10px 30px color-mix(in srgb,var(--primary) 35%,transparent)}
    .mobile-app-nav__primary-icon i{font-size:1.15rem}
    .footer{padding-bottom:28px}
}

@media (max-width:640px){.trust-center{width:min(100% - 20px,1120px);padding:20px 0 34px}.trust-hero{padding:24px 20px;border-radius:18px}.trust-hero h1{font-size:1.78rem}.trust-grid,.trust-grid.compact{grid-template-columns:1fr;gap:14px;margin-top:14px}.trust-card,.trust-faq-panel,.trust-step{border-radius:16px}.trust-card{padding:22px}.trust-step{grid-template-columns:1fr;gap:12px}.trust-action{gap:10px;margin-top:18px}.trust-action .btn{width:100%;min-height:50px;justify-content:center}}

.guide-center,.guide-article{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:40px 0 72px}.guide-center--home{width:100%;padding:34px 0 12px}.guide-hero,.guide-article__header{position:relative;overflow:hidden;padding:clamp(28px,5vw,58px);border:1px solid var(--surface-card-border);border-radius:26px;background:linear-gradient(135deg,var(--surface-card),color-mix(in srgb,var(--primary) 10%,var(--surface-card)));box-shadow:var(--surface-card-shadow)}.guide-hero:after,.guide-article__header:after{content:"";position:absolute;right:-80px;bottom:-130px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 25%,transparent),transparent 68%);pointer-events:none}.guide-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--primary);font-size:.76rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.guide-hero h1,.guide-article__header h1{max-width:920px;margin:0 0 16px;color:var(--text-color);font-size:clamp(2rem,5vw,3.7rem);line-height:1.08;letter-spacing:-.045em}.guide-hero p,.guide-article__summary{max-width:820px;color:var(--text-light);font-size:1.04rem;line-height:1.9}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.guide-card{position:relative;padding:26px;border:1px solid var(--surface-card-border);border-radius:19px;background:var(--surface-card);box-shadow:var(--surface-card-shadow);color:var(--text-color);transition:transform .2s ease,border-color .2s ease}.guide-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 45%,var(--surface-card-border))}.guide-card__meta,.guide-byline{display:flex;flex-wrap:wrap;gap:9px 18px;margin-bottom:14px;color:var(--text-light);font-size:.78rem}.guide-card h2,.guide-card h3{margin:0 0 11px;font-size:1.18rem;line-height:1.4}.guide-card h2 a,.guide-card h3 a{color:var(--text-color);text-decoration:none}.guide-card p{color:var(--text-light);line-height:1.75}.guide-card__link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--primary);font-weight:800;text-decoration:none}.guide-editorial-note{display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:16px 18px;border:1px solid var(--surface-card-border);border-radius:14px;background:var(--surface-card-muted);color:var(--text-light);line-height:1.7}.guide-editorial-note i{margin-top:5px;color:var(--success)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.section-heading h2{margin:5px 0 6px}.section-heading p{max-width:760px;color:var(--text-light);line-height:1.75}.guide-breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--text-light);font-size:.82rem;overflow:hidden}.guide-breadcrumb a{color:var(--primary);text-decoration:none}.guide-breadcrumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guide-byline{position:relative;z-index:1;margin:24px 0 0}.guide-byline span{display:inline-flex;align-items:center;gap:7px}.guide-article__body{display:grid;gap:0;margin-top:24px;border:1px solid var(--surface-card-border);border-radius:22px;background:var(--surface-card);box-shadow:var(--surface-card-shadow);overflow:hidden}.guide-article__body section{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:30px;border-bottom:1px solid var(--surface-card-border)}.guide-article__body section:last-child{border-bottom:0}.guide-section-number{display:grid;place-items:center;width:48px;height:48px;border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);border-radius:15px;color:var(--primary);background:var(--surface-card-muted);font-weight:900}.guide-article__body h2{margin:0 0 10px;color:var(--text-color);font-size:1.25rem}.guide-article__body p{color:var(--text-light);font-size:1rem;line-height:1.95}.guide-checklist{margin-top:24px;padding:28px;border:1px solid color-mix(in srgb,var(--success) 30%,var(--surface-card-border));border-radius:22px;background:linear-gradient(135deg,var(--surface-card),color-mix(in srgb,var(--success) 7%,var(--surface-card)))}.guide-checklist h2{margin:0 0 18px}.guide-checklist ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none}.guide-checklist li{display:flex;gap:10px;color:var(--text-light);line-height:1.55}.guide-checklist li i{margin-top:4px;color:var(--success)}.guide-related{margin-top:38px}.guide-related>h2{margin-bottom:4px}
@media(max-width:720px){.guide-center,.guide-article{width:min(100% - 20px,1120px);padding:20px 0 38px}.guide-hero,.guide-article__header{padding:25px 21px;border-radius:19px}.guide-hero h1,.guide-article__header h1{font-size:2rem}.guide-grid{grid-template-columns:1fr;gap:13px}.guide-card{padding:21px}.section-heading{align-items:flex-start;flex-direction:column}.section-heading .btn{width:100%;justify-content:center}.guide-article__body{border-radius:17px}.guide-article__body section{grid-template-columns:1fr;gap:12px;padding:23px 20px}.guide-checklist{padding:22px 20px;border-radius:17px}.guide-checklist ul{grid-template-columns:1fr}.guide-byline{flex-direction:column;gap:8px}.guide-breadcrumb{padding:0 3px}}
/* Resumable upload and membership status */
.upload-progress-panel,.upload-policy-summary,.profile-membership-card{margin-top:14px;padding:16px;border:1px solid var(--border,rgba(148,163,184,.24));border-radius:16px;background:var(--surface,rgba(255,255,255,.72));display:grid;gap:10px}.upload-progress-track{height:10px;overflow:hidden;border-radius:999px;background:rgba(148,163,184,.2)}.upload-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6c63ff,#20d9ff);transition:width .2s ease}.upload-progress-actions{display:flex;gap:8px;flex-wrap:wrap}.upload-policy-summary span{display:inline-flex;margin-right:14px}.membership-badge{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:7px 12px;border-radius:999px;font-weight:800}.membership-badge.vip{color:#6b4300;background:linear-gradient(135deg,#fff2a8,#f7bd38);box-shadow:0 8px 24px rgba(247,189,56,.24)}.membership-badge.member{color:#31506d;background:#e8f2ff}.alert-error a{font-weight:800;text-decoration:underline}@media(max-width:640px){.upload-progress-actions .btn{flex:1;min-width:90px}.profile-membership-card{grid-template-columns:1fr}}


/* Member promotion banner */
.member-promo-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    margin: 12px 0;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, var(--card-bg)), color-mix(in srgb, var(--primary) 12%, var(--card-bg)));
    font-size: 0.9rem;
    color: var(--text-color);
    flex-wrap: wrap;
}
.member-promo-banner i.fa-crown {
    color: var(--primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.member-promo-banner span {
    flex: 1;
    min-width: 200px;
    line-height: 1.5;
}
.member-promo-banner .btn-sm {
    padding: 6px 14px;
    font-size: 0.82rem;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .member-promo-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .member-promo-banner span {
        min-width: unset;
    }
}

.member-analytics-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    color: var(--primary);
    font-weight: 700;
}

.member-trend--thirty .member-trend__point span {
    font-size: .64rem;
}

/* v4.2 responsive theme menu, upload console, contact and footer */
.theme-menu{position:relative;display:block;padding:0;background:transparent;border:0;border-radius:12px}.theme-menu>summary{display:flex;align-items:center;gap:7px;min-height:38px;padding:8px 11px;border:1px solid var(--border);border-radius:11px;background:color-mix(in srgb,var(--bg-card) 84%,transparent);color:var(--text);font-size:.82rem;font-weight:750;cursor:pointer;list-style:none}.theme-menu>summary::-webkit-details-marker{display:none}.theme-menu>summary .fa-chevron-down{font-size:.62rem;transition:transform .2s}.theme-menu[open]>summary .fa-chevron-down{transform:rotate(180deg)}.theme-menu__options{position:absolute;z-index:120;top:calc(100% + 9px);right:0;display:grid;min-width:190px;padding:8px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--bg-card) 95%,transparent);box-shadow:0 18px 50px rgba(10,18,38,.2);backdrop-filter:blur(18px)}.theme-menu__options a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--text);font-size:.84rem;text-decoration:none}.theme-menu__options a:hover,.theme-menu__options a.active{color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}.theme-menu__options .theme-dot{width:14px;height:14px;flex:0 0 14px}

.upload-progress-panel{position:relative;overflow:hidden;margin-top:16px;padding:18px;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border));border-radius:19px;background:linear-gradient(145deg,color-mix(in srgb,var(--bg-card) 94%,transparent),color-mix(in srgb,var(--primary) 7%,var(--bg-card)));box-shadow:0 18px 45px color-mix(in srgb,var(--primary) 9%,transparent),inset 0 1px rgba(255,255,255,.16);display:grid;gap:14px}.upload-progress-panel:before{content:"";position:absolute;inset:-70% 35% auto -15%;height:170px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 18%,transparent),transparent 68%);pointer-events:none}.upload-progress-header{position:relative;display:flex;align-items:center;gap:12px}.upload-progress-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--primary),#20d9ff);box-shadow:0 10px 28px color-mix(in srgb,var(--primary) 28%,transparent)}.upload-progress-header>div{display:grid;gap:3px}.upload-progress-header strong{color:var(--text);font:850 1.12rem/1.1 ui-monospace,monospace}.upload-progress-header small{color:var(--text-light);font-size:.78rem}.upload-progress-track{position:relative;height:12px;overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 78%,transparent);border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent)}.upload-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#20d9ff,#20e3b2);background-size:180% 100%;box-shadow:0 0 20px color-mix(in srgb,var(--primary) 40%,transparent);animation:upload-flow 2s linear infinite;transition:width .22s ease}.upload-progress-panel.is-paused .upload-progress-track span{animation-play-state:paused;filter:saturate(.45)}.upload-progress-actions{position:relative;display:flex;gap:8px;flex-wrap:wrap}.upload-progress-actions .btn{min-height:38px;border-color:color-mix(in srgb,var(--primary) 24%,var(--border));background:color-mix(in srgb,var(--bg-card) 68%,transparent)}@keyframes upload-flow{to{background-position:-180% 0}}

.view-limit-member-note{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px dashed color-mix(in srgb,var(--primary) 34%,var(--border));border-radius:10px;color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent);font-size:.82rem;font-weight:750;text-decoration:none}.vip-promo-banner{border-color:color-mix(in srgb,#f5b942 38%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,#f5b942 8%,var(--bg-card)),color-mix(in srgb,var(--primary) 7%,var(--bg-card)))}.vip-promo-banner .fa-gem{color:#f5b942}.footer-custom-html,.contact-custom-html{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);color:var(--text-light);line-height:1.75}.footer-custom-html a,.contact-custom-html a{display:inline-flex;align-items:center;margin:3px 9px 3px 0;color:var(--primary);font-weight:700;text-decoration:none}.footer-custom-html a:hover,.contact-custom-html a:hover{text-decoration:underline}

@media(max-width:768px){.theme-switcher{margin-left:auto;order:2}.theme-menu>summary span{display:none}.theme-menu__options{position:absolute;top:calc(100% + 9px);right:0;bottom:auto;left:auto;width:min(280px,calc(100vw - 24px));grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.upload-progress-panel{padding:15px;border-radius:16px}.upload-progress-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.upload-progress-actions .btn{min-width:0;padding-inline:8px}.member-promo-banner{align-items:stretch}.member-promo-banner .btn{justify-content:center}.view-limit-member-note{width:100%;justify-content:center;text-align:center}}
@media(max-width:480px){.theme-switcher{display:block}.theme-menu__options{grid-template-columns:1fr 1fr}.upload-progress-actions{grid-template-columns:1fr}.upload-progress-actions .btn{width:100%}}
.developer-recommendation {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 92%, var(--primary) 8%);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}

.developer-recommendation__icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.developer-recommendation__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    text-align: left;
}

.developer-recommendation__copy small {
    color: var(--text-light);
    line-height: 1.5;
}

.developer-recommendation__action {
    margin-left: auto;
    white-space: nowrap;
}

.global-managed-ad {
    position: relative;
    padding: 18px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 4%, var(--bg)));
}

.global-managed-ad__shell {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-card) 94%, var(--primary) 6%);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 7%, transparent);
}

.global-managed-ad__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: var(--text-light);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.media-ad-slot--compact {
    gap: 5px;
    margin: 6px 0 0;
}

.media-ad-slot--compact .media-ad-disclosure {
    margin-bottom: 4px;
    font-size: .72rem;
}

.media-ad-slot--compact .tracked-ad {
    max-height: 150px;
    overflow: auto;
    border-radius: 12px;
}

.media-ad-slot--compact .tracked-ad img {
    width: auto;
    max-width: 100%;
    max-height: 126px;
    object-fit: contain;
}

.redirect-actions {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 18px;
}

.media-ad-disclosure {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: var(--text-light);
    font-size: .8rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .global-managed-ad {
        padding: 12px 0;
    }

    .global-managed-ad__shell {
        padding: 10px;
        border-radius: 14px;
    }

    .media-ad-slot--compact .tracked-ad {
        max-height: 112px;
    }

    .media-ad-slot--compact .tracked-ad img {
        max-height: 92px;
    }

    .developer-recommendation {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 15px;
    }

    .developer-recommendation__copy {
        flex: 1 1 calc(100% - 60px);
    }

    .developer-recommendation__action {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}