/* SNDK UI v3 — content, community and fixed-investment pages. */
body.ui-v3-content {
    --ci-panel: linear-gradient(145deg, rgba(25, 35, 55, .98), rgba(13, 20, 35, .98));
    --ci-panel-soft: rgba(22, 31, 50, .9);
    --ci-panel-raised: rgba(31, 43, 67, .96);
    --ci-line: rgba(148, 163, 184, .16);
    --ci-line-strong: rgba(148, 163, 184, .28);
    --ci-copy: #f8fafc;
    --ci-muted: #94a3b8;
    --ci-muted-strong: #cbd5e1;
    --ci-gold: #f6b73c;
    --ci-gold-bright: #ffd66b;
    --ci-green: #38d996;
    --ci-purple: #8b5cf6;
    --ci-blue: #4f8cff;
    --ci-danger: #fb7185;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
    overflow-wrap: anywhere;
}

body.ui-v3-content:not(.dark) {
    --ci-panel: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(244, 247, 252, .98));
    --ci-panel-soft: rgba(255, 255, 255, .9);
    --ci-panel-raised: rgba(237, 242, 248, .96);
    --ci-line: rgba(30, 41, 59, .1);
    --ci-line-strong: rgba(30, 41, 59, .18);
    --ci-copy: #172033;
    --ci-muted: #64748b;
    --ci-muted-strong: #334155;
}

body.ui-v3-content .card-glass {
    color: var(--ci-copy);
    background: var(--ci-panel);
    border: 1px solid var(--ci-line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

body.ui-v3-content:not(.dark) .card-glass {
    box-shadow: 0 12px 28px rgba(30, 41, 59, .09);
}

body.ui-v3-content .v3-content-header-copy {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline: 10px;
}

body.ui-v3-content .v3-content-header-copy .nav-title { padding: 0; }
body.ui-v3-content .v3-header-spacer { display: block; width: 44px; height: 44px; }
/* The overview already supplies the task heading.  On narrow screens, keep
   the fixed global utilities above it instead of giving the title a second,
   easily-overlapped row. */
body.ui-v3-content .v3-task-header {
    display: block;
    min-height: 0;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: 14px;
}
body.ui-v3-content .v3-task-header .v3-header-spacer,
body.ui-v3-content .v3-task-header .v3-content-header-copy { display: none; }
body.ui-v3-content .v3-task-header .v3-content-overview {
    width: 100%;
    margin: 0;
}

body.ui-v3-content .v3-content-kicker,
body.ui-v3-content .v3-overview-kicker,
body.ui-v3-content .investment-kicker,
body.ui-v3-content .ui-eyebrow {
    display: block;
    color: var(--ci-gold-bright);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.ui-v3-content .v3-content-overview {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(calc(100% - 28px), 592px);
    min-height: 88px;
    margin: 14px auto 16px;
    padding: 15px;
    color: #f8fafc;
    border: 1px solid rgba(255, 214, 107, .2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 12%, rgba(246, 183, 60, .24), transparent 32%),
        linear-gradient(140deg, #1b2944, #111a2c 66%);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
    overflow: hidden;
}

body.ui-v3-content .v3-content-overview::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -46px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(139, 92, 246, .22);
    border-radius: 50%;
}

body.ui-v3-content .v3-overview-icon,
body.ui-v3-content .v3-overview-count {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 214, 107, .34);
    border-radius: 15px;
    background: rgba(246, 183, 60, .12);
}

body.ui-v3-content .v3-overview-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--ci-gold-bright);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.ui-v3-content .v3-overview-count {
    width: auto;
    min-width: 44px;
    height: 38px;
    padding-inline: 10px;
    color: #161105;
    border: 0;
    background: linear-gradient(135deg, var(--ci-gold-bright), var(--ci-gold));
}

body.ui-v3-content .v3-content-overview h1,
body.ui-v3-content .v3-section-heading h2 {
    margin: 3px 0 0;
    color: inherit;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.15;
}

body.ui-v3-content .v3-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    width: min(calc(100% - 28px), 592px);
    margin: 18px auto 10px;
}

body.ui-v3-content .v3-live-dot {
    width: 9px;
    height: 9px;
    margin-bottom: 7px;
    border-radius: 50%;
    background: var(--ci-green);
    box-shadow: 0 0 0 5px rgba(56, 217, 150, .12);
}

body.ui-v3-content .v3-loading-card,
body.ui-v3-content .v3-error-state {
    display: grid;
    place-items: center;
    width: min(calc(100% - 28px), 592px);
    min-height: 150px;
    margin: 14px auto;
    padding: 24px;
    color: var(--ci-muted);
    text-align: center;
    border: 1px solid var(--ci-line);
    border-radius: 20px;
    background: var(--ci-panel);
}

body.ui-v3-content button.v3-error-state {
    gap: 10px;
    cursor: pointer;
}

body.ui-v3-content .v3-error-state strong { color: var(--ci-copy); }
body.ui-v3-content .v3-error-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ci-danger);
    border-radius: 14px;
    background: rgba(251, 113, 133, .12);
}
body.ui-v3-content .v3-error-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.ui-v3-content .v3-inline-empty { margin: 18px 0 4px; color: var(--ci-muted); }

/* Tasks */
body.ui-v3-content .v3-task-list {
    display: grid;
    gap: 12px;
    padding: 0 14px 24px;
}

body.ui-v3-content .task-card {
    position: relative;
    margin: 0;
    padding: 15px;
    border-radius: 18px;
    overflow: hidden;
}

body.ui-v3-content .task-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(var(--ci-purple), var(--ci-blue));
}

body.ui-v3-content .task-status-completed::before { background: linear-gradient(var(--ci-gold-bright), var(--ci-gold)); }
body.ui-v3-content .task-status-claimed::before { background: var(--ci-green); }

body.ui-v3-content .task-card-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
}

body.ui-v3-content .task-card-icon,
body.ui-v3-content .post-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--ci-gold-bright);
    border: 1px solid rgba(246, 183, 60, .24);
    border-radius: 13px;
    background: rgba(246, 183, 60, .1);
}

body.ui-v3-content .task-card-icon svg,
body.ui-v3-content .post-avatar svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.ui-v3-content .task-card-copy { min-width: 0; }
body.ui-v3-content .task-card-copy strong { display: block; color: var(--ci-copy); font-size: 15px; line-height: 1.25; }
body.ui-v3-content .task-card-copy p { margin: 4px 0 0; color: var(--ci-muted); font-size: 12px; line-height: 1.4; }
body.ui-v3-content .task-card .badge-grad { min-width: 60px; padding: 7px 9px; color: #171005; text-align: center; border-radius: 11px; background: linear-gradient(135deg, var(--ci-gold-bright), var(--ci-gold)); }
body.ui-v3-content .task-card .badge-grad small { margin-right: 2px; font-size: 10px; }
body.ui-v3-content .task-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--ci-muted); font-size: 11px; }
body.ui-v3-content .task-progress-percent { color: var(--ci-muted-strong, #cbd5e1); font-size: 11px; }
body.ui-v3-content .task-progress { height: 6px; margin: 7px 0 12px; border-radius: 99px; background: rgba(148, 163, 184, .13); overflow: hidden; }
body.ui-v3-content .task-progress .progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ci-purple), var(--ci-blue)); }
body.ui-v3-content .task-card-footer { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-top: 10px; border-top: 1px solid var(--ci-line); }
body.ui-v3-content .task-state-dot { width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: var(--ci-purple); box-shadow: 0 0 0 4px rgba(139, 92, 246, .12); }
body.ui-v3-content .task-status-completed .task-state-dot { background: var(--ci-gold); box-shadow: 0 0 0 4px rgba(246, 183, 60, .12); }
body.ui-v3-content .task-status-claimed .task-state-dot { background: var(--ci-green); box-shadow: 0 0 0 4px rgba(56, 217, 150, .12); }
body.ui-v3-content .task-card-footer button { min-width: 112px; min-height: 44px; border-radius: 12px; }

/* News */
body.ui-v3-content .v3-news-list { display: grid; gap: 11px; padding: 0 14px 24px; }
body.ui-v3-content .news-card { margin: 0; padding: 0; border-radius: 18px; overflow: hidden; }
body.ui-v3-content .news-card-link { display: grid; grid-template-columns: 96px minmax(0, 1fr) 22px; align-items: center; gap: 12px; min-height: 108px; padding: 10px; }
body.ui-v3-content .news-thumb { width: 96px; height: 86px; border-radius: 13px; background: var(--ci-panel-raised); overflow: hidden; }
body.ui-v3-content .news-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.ui-v3-content .news-thumb-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ci-gold); background: linear-gradient(145deg, rgba(139,92,246,.18), rgba(79,140,255,.1)); }
body.ui-v3-content .news-thumb-placeholder svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body.ui-v3-content .news-copy { min-width: 0; }
body.ui-v3-content .news-copy h2 { display: -webkit-box; margin: 5px 0 7px; color: var(--ci-copy); font-size: 14px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ui-v3-content .news-copy time { color: var(--ci-muted); font-size: 10px; }
body.ui-v3-content .news-arrow { width: 9px; height: 9px; border-top: 2px solid var(--ci-muted); border-right: 2px solid var(--ci-muted); transform: rotate(45deg); }
body.ui-v3-content .v3-list-action,
body.ui-v3-content .v3-load-more-wrap { width: min(calc(100% - 28px), 592px); margin: 0 auto 24px; }
body.ui-v3-content .v3-list-action button,
body.ui-v3-content .v3-load-more { width: 100%; min-height: 46px; border-radius: 14px; }

body.ui-v3-content .v3-news-detail { padding: 0 14px 28px; }
body.ui-v3-content .v3-news-article { margin: 14px auto 0; padding: 0; border-radius: 22px; overflow: hidden; }
body.ui-v3-content .v3-news-article-head { position: relative; padding: 22px 18px 18px; border-bottom: 1px solid var(--ci-line); }
body.ui-v3-content .v3-news-article-head::after { content: ""; position: absolute; inset: auto 18px 0; height: 2px; background: linear-gradient(90deg, var(--ci-gold), var(--ci-purple), transparent); }
body.ui-v3-content .v3-news-article h1 { margin: 7px 0 10px; color: var(--ci-copy); font-size: clamp(21px, 6vw, 29px); line-height: 1.2; }
body.ui-v3-content .v3-news-article time { color: var(--ci-muted); font-size: 11px; }
body.ui-v3-content .news-detail-cover { margin: 0; aspect-ratio: 16 / 9; background: var(--ci-panel-raised); }
body.ui-v3-content .news-detail-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.ui-v3-content .news-article-content { padding: 20px 18px 28px; color: var(--ci-muted-strong, #cbd5e1); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
body.ui-v3-content .news-article-content > :first-child { margin-top: 0; }
body.ui-v3-content .news-article-content > :last-child { margin-bottom: 0; }
body.ui-v3-content .news-article-content p,
body.ui-v3-content .news-article-content ul,
body.ui-v3-content .news-article-content ol,
body.ui-v3-content .news-article-content blockquote { margin: 0 0 16px; }
body.ui-v3-content .news-article-content h2,
body.ui-v3-content .news-article-content h3,
body.ui-v3-content .news-article-content h4 { margin: 24px 0 10px; color: var(--ci-copy); line-height: 1.3; }
body.ui-v3-content .news-article-content h2 { font-size: 19px; }
body.ui-v3-content .news-article-content h3 { font-size: 17px; }
body.ui-v3-content .news-article-content h4 { font-size: 15px; }
body.ui-v3-content .news-article-content ul,
body.ui-v3-content .news-article-content ol { padding-left: 22px; }
body.ui-v3-content .news-article-content li + li { margin-top: 7px; }
body.ui-v3-content .news-article-content blockquote { padding: 10px 14px; color: var(--ci-copy); border-left: 3px solid var(--ci-gold); border-radius: 0 12px 12px 0; background: rgba(246,183,60,.07); }
body.ui-v3-content .news-article-content pre { max-width: 100%; padding: 12px; overflow-x: auto; color: var(--ci-copy); border: 1px solid var(--ci-line); border-radius: 12px; background: var(--ci-panel-raised); }
body.ui-v3-content .news-article-content img { height: auto; border-radius: 14px; }
body.ui-v3-content .news-article-content a { color: var(--ci-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Rules */
body.ui-v4-rules {
    --rules-green: #218653;
    --rules-green-dark: #17683f;
    --rules-paper: #fffdf3;
    --rules-border: #d6b46d;
    --rules-brown: #65401f;
    color: var(--rules-brown);
    background: linear-gradient(180deg, #ddf1d2, #f2f1d9);
}
body.ui-v4-rules .rules-routebar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    min-height: calc(68px + env(safe-area-inset-top, 0px));
    padding: max(8px, env(safe-area-inset-top, 0px)) 14px 8px;
    background: linear-gradient(180deg, #fff8d8, #f6e8ad);
    border-bottom: 2px solid #c18a3f;
    box-shadow: 0 4px 12px rgba(91, 62, 25, .14);
}
body.ui-v4-rules .rules-routebar h1 {
    margin: 0;
    color: var(--rules-brown);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
}
body.ui-v4-rules .rules-back {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #fffbe7;
    background: linear-gradient(180deg, #38ad67, var(--rules-green));
    border: 2px solid #f3ce62;
    border-radius: 13px;
    box-shadow: 0 3px 0 var(--rules-green-dark);
}
body.ui-v4-rules .rules-back svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.ui-v3-content.ui-v4-rules .v3-rules-content.rules-paper {
    display: block;
    width: min(calc(100% - 28px), 592px);
    margin: 14px auto 28px;
    padding: 0;
    overflow: hidden;
    background: var(--rules-paper);
    border: 1px solid var(--rules-border);
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(91, 62, 25, .1);
}
body.ui-v4-rules .v3-rule-section {
    margin: 0;
    padding: 18px 16px;
    color: var(--rules-brown);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.ui-v4-rules .v3-rule-section + .v3-rule-section { border-top: 1px solid rgba(138, 99, 46, .22); }
body.ui-v3-content .page-card-heading { display: flex; align-items: center; gap: 11px; }
body.ui-v3-content .page-card-heading > div { min-width: 0; }
body.ui-v3-content .page-card-heading h2 { margin: 3px 0 0; color: var(--ci-copy); font-size: 17px; line-height: 1.25; }
body.ui-v3-content .page-card-icon,
body.ui-v3-content .investment-section-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; color: var(--ci-gold-bright); border: 1px solid rgba(246, 183, 60, .24); border-radius: 13px; background: rgba(246, 183, 60, .1); }
body.ui-v3-content .page-card-icon svg,
body.ui-v3-content .investment-section-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.ui-v3-content .rule-intro { margin: 14px 0; color: var(--ci-muted); font-size: 12px; line-height: 1.55; }
body.ui-v3-content .rule-intro strong { color: var(--ci-gold-bright); }
body.ui-v3-content .rule-table-wrap { max-width: 100%; border: 1px solid var(--ci-line); border-radius: 13px; overflow-x: auto; }
body.ui-v3-content .rule-table { width: 100%; min-width: 470px; border-collapse: collapse; font-size: 11px; }
body.ui-v3-content .rule-table th { padding: 10px 9px; color: var(--ci-muted); font-size: 9px; text-align: left; letter-spacing: .05em; text-transform: uppercase; background: rgba(148, 163, 184, .07); }
body.ui-v3-content .rule-table td { padding: 11px 9px; color: var(--ci-muted-strong, #cbd5e1); border-top: 1px solid var(--ci-line); }
body.ui-v3-content .v3-rule-level { display: inline-flex; padding: 5px 8px; color: #171005; font-weight: 900; border-radius: 8px; background: linear-gradient(135deg, var(--ci-gold-bright), var(--ci-gold)); }
body.ui-v3-content .reward-rule-list { display: grid; gap: 8px; }
body.ui-v3-content .reward-rule-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 56px; padding: 9px 10px; border: 1px solid var(--ci-line); border-radius: 13px; background: rgba(148, 163, 184, .055); }
body.ui-v3-content .reward-rule-row small { grid-column: 2 / 4; color: var(--ci-muted); font-size: 10px; }
body.ui-v3-content .v3-rule-rank { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ci-gold-bright); font-size: 10px; font-weight: 900; border-radius: 9px; background: rgba(246, 183, 60, .12); }
body.ui-v3-content .reward-rule-row .badge-grad { padding: 5px 8px; color: var(--ci-green); border-radius: 8px; background: rgba(56, 217, 150, .12); }
body.ui-v3-content .earning-rule-list { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
body.ui-v3-content .earning-rule-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--ci-line); border-radius: 12px; background: rgba(148, 163, 184, .05); }
body.ui-v3-content .earning-rule-list li > span { display: grid; place-items: center; width: 28px; height: 28px; color: #171005; font-size: 10px; font-weight: 900; border-radius: 9px; background: var(--ci-gold); }
body.ui-v3-content .earning-rule-list p { margin: 3px 0 0; color: var(--ci-muted-strong, #cbd5e1); font-size: 12px; line-height: 1.5; }
body.ui-v4-rules .page-card-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    color: #ad690e;
    background: #fff2c7;
    border-color: #e5c16a;
    border-radius: 50%;
}
body.ui-v4-rules .page-card-icon svg { width: 20px; }
body.ui-v4-rules .page-card-heading h2 { color: var(--rules-brown); font-size: 16px; }
body.ui-v4-rules .v3-content-kicker { color: var(--rules-green); }
body.ui-v4-rules .rule-intro { margin: 12px 0; color: #766b58; }
body.ui-v4-rules .rule-intro strong { color: #ad690e; }
body.ui-v4-rules .v3-inline-empty { margin: 10px 0 0; color: #766b58; }
body.ui-v4-rules .rule-table-wrap { border-color: rgba(138, 99, 46, .22); }
body.ui-v4-rules .rule-table th { color: #766b58; background: #f9f0d2; }
body.ui-v4-rules .rule-table td { color: #574c3d; border-color: rgba(138, 99, 46, .16); }
body.ui-v4-rules .reward-rule-list,
body.ui-v4-rules .earning-rule-list { gap: 0; margin-top: 10px; }
body.ui-v4-rules .reward-rule-row {
    min-height: 54px;
    padding: 10px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(138, 99, 46, .16);
    border-radius: 0;
}
body.ui-v4-rules .reward-rule-row small { color: #766b58; }
body.ui-v4-rules .earning-rule-list li {
    padding: 11px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(138, 99, 46, .16);
    border-radius: 0;
}
body.ui-v4-rules .earning-rule-list li::before { display: none !important; content: none !important; }
body.ui-v4-rules .earning-rule-list li > span {
    width: 26px;
    height: 26px;
    color: #fffbe7;
    background: var(--rules-green);
    border-radius: 50%;
}
body.ui-v4-rules .earning-rule-list p { color: #574c3d; }
body.ui-v4-rules .v3-loading-card { min-height: 160px; margin: 0; background: transparent; border: 0; box-shadow: none; }

/* Photo sharing */
body.ui-v3-content .post-reward-hero {
    position: relative;
    width: min(calc(100% - 28px), 592px);
    min-height: 236px;
    margin: 14px auto 18px;
    color: #fff;
    border: 1px solid rgba(255, 214, 107, .2);
    border-radius: 22px;
    background: linear-gradient(145deg, #131d31, #0a111f);
    box-shadow: 0 20px 42px rgba(0, 0, 0, .3);
    overflow: hidden;
}
body.ui-v3-content .post-reward-hero::after { content: ""; position: absolute; inset: auto -42px -78px auto; width: 180px; height: 180px; border: 1px solid rgba(139,92,246,.28); border-radius: 50%; }
body.ui-v3-content .post-reward-copy { position: relative; z-index: 3; width: 56%; padding: 26px 0 0 18px; }
body.ui-v3-content .post-share-title { display: grid; color: #fff; font-size: clamp(24px, 8vw, 36px); font-weight: 1000; line-height: .9; letter-spacing: -.06em; }
body.ui-v3-content .post-moments-word { color: var(--ci-gold-bright); }
body.ui-v3-content .post-reward-ribbon { display: inline-flex; max-width: 100%; margin-top: 14px; padding: 7px 10px; color: #171005; font-size: 10px; font-weight: 800; line-height: 1.25; border-radius: 10px; background: var(--ci-gold); }
body.ui-v3-content .post-reward-art-wrap { position: absolute; z-index: 2; right: -12px; bottom: 0; width: 67%; height: 90%; }
body.ui-v3-content .post-reward-art { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
body.ui-v3-content .post-upload-trigger { position: absolute; z-index: 5; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 10px 6px 6px; color: #171005; border: 0; border-radius: 15px; background: linear-gradient(135deg, var(--ci-gold-bright), var(--ci-gold)); box-shadow: 0 10px 22px rgba(246, 183, 60, .22); }
body.ui-v3-content .post-upload-orb { display: grid; place-items: center; width: 34px; height: 34px; color: #171005; border-radius: 11px; background: rgba(255,255,255,.34); }
body.ui-v3-content .post-upload-orb svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.ui-v3-content .post-upload-orb i { display: none; }
body.ui-v3-content .post-upload-label { max-width: 92px; font-size: 11px; font-weight: 900; line-height: 1.15; }
body.ui-v3-content .post-reward-a11y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
body.ui-v3-content .v3-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.ui-v3-content .post-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 20px; }
body.ui-v3-content .post-card { margin: 0; padding: 10px; border-radius: 17px; }
body.ui-v3-content .post-author-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; margin-bottom: 9px; }
body.ui-v3-content .post-avatar { width: 34px; height: 34px; border-radius: 11px; }
body.ui-v3-content .post-avatar svg { width: 18px; }
body.ui-v3-content .post-author-copy { min-width: 0; }
body.ui-v3-content .post-author-copy strong { display: block; color: var(--ci-copy); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-v3-content .post-author-copy p { display: -webkit-box; margin: 3px 0 0; color: var(--ci-muted); font-size: 9px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ui-v3-content .post-media-matte { border-radius: 13px; overflow: hidden; background: var(--ci-panel-raised); }
body.ui-v3-content .post-img-box { aspect-ratio: 1 / 1; margin: 0; border: 0; border-radius: 13px; background: var(--ci-panel-raised); }
body.ui-v3-content .post-img-box img { width: 100%; height: 100%; object-fit: cover; }
body.ui-v3-content .v3-post-feed-heading { margin-top: 0; }

body.ui-v3-content .post-upload-overlay,
body.ui-v3-content .v3-dialog-overlay { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-top: max(24px, env(safe-area-inset-top)); background: rgba(2, 6, 14, .76); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.ui-v3-content .post-upload-overlay[hidden],
body.ui-v3-content .v3-dialog-overlay[hidden] { display: none; }
body.ui-v3-content .post-upload-sheet,
body.ui-v3-content .v3-dialog-sheet { width: min(100%, 620px); max-height: min(88dvh, 760px); padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); color: var(--ci-copy); border: 1px solid var(--ci-line-strong); border-bottom: 0; border-radius: 24px 24px 0 0; background: linear-gradient(160deg, #182238, #0b1220 72%); box-shadow: 0 -22px 50px rgba(0,0,0,.4); overflow-y: auto; }
body.ui-v3-content:not(.dark) .post-upload-sheet,
body.ui-v3-content:not(.dark) .v3-dialog-sheet { background: linear-gradient(160deg, #fff, #eef3f9); }
body.ui-v3-content .post-sheet-grabber,
body.ui-v3-content .v3-dialog-grabber { display: block; width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 99px; background: var(--ci-line-strong); }
body.ui-v3-content .post-sheet-header,
body.ui-v3-content .v3-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ci-line); }
body.ui-v3-content .post-sheet-header h2,
body.ui-v3-content .v3-dialog-head h2 { margin: 3px 0 0; color: var(--ci-copy); font-size: 18px; }
body.ui-v3-content .post-sheet-kicker { color: var(--ci-gold); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
body.ui-v3-content .post-sheet-close,
body.ui-v3-content .v3-dialog-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; color: var(--ci-muted); border: 1px solid var(--ci-line); border-radius: 13px; background: var(--ci-panel-raised); }
body.ui-v3-content .post-sheet-close svg,
body.ui-v3-content .v3-dialog-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body.ui-v3-content .post-sheet-content { padding-top: 14px; }
body.ui-v3-content .post-manage-panel { padding: 14px; border-radius: 17px; }
body.ui-v3-content .post-file-picker { display: grid; place-items: center; min-height: 112px; margin: 12px 0; color: var(--ci-muted); text-align: center; border: 1px dashed var(--ci-line-strong); border-radius: 15px; background: rgba(148,163,184,.055); cursor: pointer; }
body.ui-v3-content .post-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
body.ui-v3-content .post-file-picker-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 7px; color: var(--ci-gold); border-radius: 13px; background: rgba(246,183,60,.1); }
body.ui-v3-content .post-file-picker-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body.ui-v3-content .post-upload-card .input-grad { width: 100%; min-height: 48px; padding: 12px; color: var(--ci-copy); font-size: 16px; border: 1px solid var(--ci-line); border-radius: 13px; background: var(--ci-panel-raised); }
body.ui-v3-content .post-upload-card > .btn-grad { width: 100%; min-height: 46px; margin-top: 10px; }
body.ui-v3-content .post-reward-card { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--ci-line); border-radius: 14px; background: rgba(148,163,184,.05); }
body.ui-v3-content .post-reward-card p { margin: 0; color: var(--ci-muted); font-size: 11px; }
body.ui-v3-content .post-reward-card .is-success { color: var(--ci-green); }
body.ui-v3-content .post-history-card,
body.ui-v3-content .post-pending-card { margin-top: 10px; padding: 10px; border-radius: 14px; }
body.ui-v3-content .post-history-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
body.ui-v3-content .post-img-sm { width: 68px; height: 68px; border-radius: 11px; object-fit: cover; }
body.ui-v3-content .post-history-card p { margin: 0 0 5px; color: var(--ci-copy); font-size: 11px; }
body.ui-v3-content .post-history-card time { display: block; margin-top: 5px; color: var(--ci-muted); font-size: 9px; }

/* Fixed plans */
body.ui-v3-investment .tab-grad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: min(calc(100% - 28px), 592px);
    margin: 12px auto;
    padding: 5px;
    border: 1px solid var(--ci-line);
    border-radius: 16px;
    background: var(--ci-panel-soft);
    box-shadow: none;
}

body.ui-v3-investment .tab-grad a {
    display: grid;
    place-items: center;
    min-height: 43px;
    padding: 8px 10px;
    color: var(--ci-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    border-radius: 12px;
}

body.ui-v3-investment .tab-grad a.active {
    color: #171005;
    background: linear-gradient(135deg, var(--ci-gold-bright), var(--ci-gold));
    box-shadow: 0 7px 18px rgba(246, 183, 60, .17);
}

body.ui-v3-investment .v3-investment-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    align-items: center;
    gap: 12px;
    width: min(calc(100% - 28px), 592px);
    min-height: 154px;
    margin: 14px auto 18px;
    padding: 20px;
    color: #f8fafc;
    border: 1px solid rgba(255, 214, 107, .2);
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 10%, rgba(246, 183, 60, .25), transparent 32%),
        linear-gradient(145deg, #1b2944, #101827 70%);
    box-shadow: 0 18px 36px rgba(0,0,0,.25);
    overflow: hidden;
}

body.ui-v3-investment .v3-investment-hero::after { content: ""; position: absolute; right: -48px; bottom: -80px; width: 190px; height: 190px; border: 1px solid rgba(139, 92, 246, .25); border-radius: 50%; }
body.ui-v3-investment .v3-investment-hero-copy { position: relative; z-index: 2; min-width: 0; }
body.ui-v3-investment .investment-hero h1 { margin: 6px 0 8px; color: #fff; font-size: clamp(22px, 7vw, 31px); line-height: 1.1; }
body.ui-v3-investment .investment-hero p { max-width: 350px; margin: 0; color: #aab7ca; font-size: 12px; line-height: 1.5; }
body.ui-v3-investment .v3-investment-hero-mark { position: relative; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; color: var(--ci-gold-bright); border: 1px solid rgba(255,214,107,.32); border-radius: 17px; background: rgba(246, 183, 60, .11); }
body.ui-v3-investment .v3-investment-hero-mark svg { width: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

body.ui-v3-investment .fixed-plan-list { display: grid; gap: 13px; padding: 0 14px 28px; }
body.ui-v3-investment .fixed-plan-card { margin: 0; border: 1px solid var(--ci-line); border-radius: 20px; background: var(--ci-panel); box-shadow: 0 14px 34px rgba(0,0,0,.2); overflow: hidden; }
body.ui-v3-investment:not(.dark) .fixed-plan-card { box-shadow: 0 12px 28px rgba(30,41,59,.1); }
body.ui-v3-investment .fixed-plan-card-link { display: grid; grid-template-columns: 120px minmax(0, 1fr); min-height: 194px; }
body.ui-v3-investment .fixed-plan-image { position: relative; min-height: 100%; background: #111b2e; overflow: hidden; }
body.ui-v3-investment .fixed-plan-image > img { width: 100%; height: 100%; object-fit: cover; }
body.ui-v3-investment .fixed-plan-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,9,17,.65), transparent 58%); pointer-events: none; }
body.ui-v3-investment .plan-image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 176px; color: var(--ci-gold); background: linear-gradient(145deg, #17243d, #0d1525); }
body.ui-v3-investment .plan-image-placeholder > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .38; }
body.ui-v3-investment .plan-chart-axis { stroke: rgba(148,163,184,.28); }
body.ui-v3-investment .plan-chart-line { stroke: var(--ci-purple); stroke-width: 3; }
body.ui-v3-investment .plan-image-placeholder circle { fill: var(--ci-gold); }
body.ui-v3-investment .plan-visual-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(246,183,60,.12); }
body.ui-v3-investment .plan-visual-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body.ui-v3-investment .plan-status { position: absolute; z-index: 3; top: 10px; left: 10px; display: inline-flex; max-width: calc(100% - 20px); padding: 6px 8px; color: #06150f; font-size: 9px; font-weight: 900; line-height: 1.1; border-radius: 8px; background: var(--ci-green); }
body.ui-v3-investment .plan-status.presale { color: #171005; background: var(--ci-gold); }
body.ui-v3-investment .fixed-plan-body { min-width: 0; padding: 14px; }
body.ui-v3-investment .fixed-plan-heading { display: grid; gap: 8px; }
body.ui-v3-investment .fixed-plan-heading h2 { margin: 0; color: var(--ci-copy); font-size: 16px; line-height: 1.25; }
body.ui-v3-investment .plan-rate { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; width: fit-content; max-width: 100%; color: var(--ci-green); }
body.ui-v3-investment .plan-rate b { font-size: 19px; line-height: 1; }
body.ui-v3-investment .plan-rate small { color: var(--ci-muted); font-size: 10px; }
body.ui-v3-investment .fixed-plan-description { display: -webkit-box; margin: 8px 0 0; color: var(--ci-muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ui-v3-investment .plan-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 11px; }
body.ui-v3-investment .plan-meta > span { min-width: 0; padding: 7px 6px; border: 1px solid var(--ci-line); border-radius: 9px; background: rgba(148,163,184,.05); }
body.ui-v3-investment .plan-meta small { display: block; color: var(--ci-muted); font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
body.ui-v3-investment .plan-meta strong { display: block; margin-top: 4px; color: var(--ci-copy); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .plan-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin-top: 10px; padding: 8px 9px; color: #171005; font-size: 11px; font-weight: 900; border-radius: 10px; background: linear-gradient(135deg, var(--ci-gold-bright), var(--ci-gold)); }
body.ui-v3-investment .plan-link svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
body.ui-v3-investment .investment-empty { width: 100%; padding: 36px 20px; color: var(--ci-muted); text-align: center; border: 1px solid var(--ci-line); border-radius: 20px; background: var(--ci-panel); }
body.ui-v3-investment .investment-empty a { display: inline-flex; min-height: 40px; margin-top: 12px; padding: 10px 14px; color: #171005; font-weight: 800; border-radius: 11px; background: var(--ci-gold); }

/* Fixed plan detail */
body.ui-v3-investment #plan-detail { width: min(100%, 620px); }
body.ui-v3-investment .v3-detail-skeleton { width: calc(100% - 28px); height: 220px; margin: 14px; border-radius: 20px; }
body.ui-v3-investment .v3-plan-stage { position: relative; width: calc(100% - 28px); min-height: 252px; margin: 14px auto 0; color: #f8fafc; border: 1px solid rgba(255,214,107,.18); border-radius: 22px 22px 0 0; background: #101a2c; overflow: hidden; }
body.ui-v3-investment .plan-detail-image { display: block; width: 100%; height: 252px; object-fit: cover; }
body.ui-v3-investment .v3-plan-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,10,18,.95) 8%, rgba(6,10,18,.28) 66%, rgba(6,10,18,.08)); pointer-events: none; }
body.ui-v3-investment .v3-plan-stage .plan-status { right: 12px; left: auto; }
body.ui-v3-investment .plan-detail-summary { position: absolute; z-index: 3; right: 16px; bottom: 16px; left: 16px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-items: end; }
body.ui-v3-investment .v3-plan-stage-index { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; color: var(--ci-gold); border: 1px solid rgba(255,214,107,.28); border-radius: 13px; background: rgba(8,13,25,.66); }
body.ui-v3-investment .v3-plan-stage-index svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body.ui-v3-investment .plan-detail-title-row { grid-column: 2; display: flex; align-items: end; justify-content: space-between; gap: 10px; min-width: 0; }
body.ui-v3-investment .plan-detail-title-row h1 { margin: 0; color: #fff; font-size: clamp(20px, 6vw, 27px); line-height: 1.15; }
body.ui-v3-investment .detail-rate { flex: 0 0 auto; color: var(--ci-green); font-size: 20px; font-weight: 900; text-align: right; }
body.ui-v3-investment .detail-rate small { display: block; max-width: 110px; color: #aab7ca; font-size: 10px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .v3-plan-detail-sheet { width: calc(100% - 28px); margin: 0 auto 24px; padding: 14px; border: 1px solid var(--ci-line); border-top: 0; border-radius: 0 0 22px 22px; background: var(--ci-panel); }
body.ui-v3-investment .plan-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
body.ui-v3-investment .plan-facts > div { min-width: 0; padding: 10px 8px; border: 1px solid var(--ci-line); border-radius: 11px; background: rgba(148,163,184,.05); }
body.ui-v3-investment .plan-facts .plan-range { grid-column: 1 / -1; }
body.ui-v3-investment .plan-facts small { display: block; color: var(--ci-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .plan-facts strong { display: block; margin-top: 4px; color: var(--ci-copy); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
body.ui-v3-investment .plan-description { margin-top: 12px; padding: 13px; border: 1px solid var(--ci-line); border-radius: 14px; background: rgba(148,163,184,.04); }
body.ui-v3-investment .investment-section-heading { display: flex; align-items: center; gap: 9px; }
body.ui-v3-investment .investment-section-heading h2 { margin: 0; color: var(--ci-copy); font-size: 14px; }
body.ui-v3-investment .investment-section-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; }
body.ui-v3-investment .investment-section-icon svg { width: 19px; }
body.ui-v3-investment .plan-description p { margin: 10px 0 0; color: var(--ci-muted); font-size: 11px; line-height: 1.55; white-space: pre-line; }
body.ui-v3-investment .v3-return-simulator { margin-top: 12px; padding: 14px; border: 1px solid rgba(139,92,246,.22); border-radius: 16px; background: linear-gradient(145deg, rgba(139,92,246,.11), rgba(79,140,255,.05)); }
body.ui-v3-investment .simulator-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 5px 10px; }
body.ui-v3-investment .simulator-heading .investment-kicker { grid-column: 1 / -1; }
body.ui-v3-investment .simulator-amount-label { color: var(--ci-muted); font-size: 10px; }
body.ui-v3-investment #amount-display { color: var(--ci-gold-bright); font-size: 20px; line-height: 1; }
body.ui-v3-investment .investment-amount-input { width: 100%; min-height: 50px; margin-top: 11px; padding: 12px 14px; color: var(--ci-copy); font-size: 16px; border: 1px solid var(--ci-line-strong); border-radius: 13px; outline: 0; background: var(--ci-panel-raised); }
body.ui-v3-investment .investment-amount-input:focus { border-color: rgba(246,183,60,.6); box-shadow: 0 0 0 3px rgba(246,183,60,.1); }
body.ui-v3-investment .quick-amounts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 8px; }
body.ui-v3-investment .quick-amounts button { min-height: 44px; color: var(--ci-muted-strong, #cbd5e1); font-size: 11px; font-weight: 800; border: 1px solid var(--ci-line); border-radius: 11px; background: var(--ci-panel-raised); }
body.ui-v3-investment .amount-guidance,
body.ui-v3-investment .investment-note { margin: 9px 0 0; color: var(--ci-muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
body.ui-v3-investment .return-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 12px; }
body.ui-v3-investment .return-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--ci-line); border-radius: 11px; background: rgba(8,13,25,.24); }
body.ui-v3-investment:not(.dark) .return-grid > div { background: rgba(226,232,240,.5); }
body.ui-v3-investment .return-grid small { display: block; color: var(--ci-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .return-grid strong { display: block; margin-top: 5px; color: var(--ci-green); font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
body.ui-v3-investment .return-grid .return-total strong { color: var(--ci-gold-bright); }
body.ui-v3-investment .field-error { min-height: 19px; padding-top: 6px; color: var(--ci-danger); font-size: 10px; }
body.ui-v3-investment .investment-submit { width: 100%; min-height: 48px; border-radius: 13px; }

/* My investments and read-only detail sheet */
body.ui-v3-investment .v3-my-plan-summary { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 48px; align-items: center; gap: 12px; width: min(calc(100% - 28px),592px); min-height: 126px; margin: 14px auto 16px; padding: 18px; color: #f8fafc; border: 1px solid rgba(255,214,107,.2); border-radius: 21px; background: radial-gradient(circle at 90% 10%,rgba(246,183,60,.2),transparent 34%),linear-gradient(145deg,#1b2944,#101827); overflow: hidden; }
body.ui-v3-investment .my-plan-summary h1 { margin: 5px 0 6px; color: #fff; font-size: 23px; line-height: 1.15; }
body.ui-v3-investment .my-plan-summary p { margin: 0; color: #aab7ca; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
body.ui-v3-investment .portfolio-link { display: grid; place-items: center; width: 46px; height: 46px; color: var(--ci-gold); border: 1px solid rgba(255,214,107,.3); border-radius: 14px; background: rgba(246,183,60,.1); }
body.ui-v3-investment .portfolio-link svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.ui-v3-investment .my-investment-list { display: grid; gap: 12px; padding: 0 14px 24px; }
body.ui-v3-investment .v3-investment-card-button { display: block; width: 100%; margin: 0; padding: 14px; color: var(--ci-copy); text-align: left; border: 1px solid var(--ci-line); border-radius: 18px; background: var(--ci-panel); box-shadow: 0 14px 34px rgba(0,0,0,.18); cursor: pointer; }
body.ui-v3-investment:not(.dark) .v3-investment-card-button { box-shadow: 0 12px 28px rgba(30,41,59,.09); }
body.ui-v3-investment .my-investment-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
body.ui-v3-investment .my-investment-head > div { min-width: 0; }
body.ui-v3-investment .my-investment-head small { color: var(--ci-muted); font-size: 10px; overflow-wrap: anywhere; }
body.ui-v3-investment .my-investment-head h2 { margin: 4px 0 0; color: var(--ci-copy); font-size: 15px; line-height: 1.25; }
body.ui-v3-investment .investment-state { display: inline-flex; flex: 0 0 auto; max-width: 42%; padding: 6px 8px; color: var(--ci-green); font-size: 8px; font-weight: 900; line-height: 1.2; text-align: center; overflow-wrap: anywhere; border-radius: 8px; background: rgba(56,217,150,.12); }
body.ui-v3-investment .investment-state.waiting { color: var(--ci-gold); background: rgba(246,183,60,.12); }
body.ui-v3-investment .investment-state.completed { color: #06150f; background: var(--ci-green); }
body.ui-v3-investment .investment-money-flow { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr); align-items: center; gap: 4px; margin-top: 13px; }
body.ui-v3-investment .investment-money-flow > div { min-width: 0; }
body.ui-v3-investment .investment-money-flow small { display: block; color: var(--ci-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .investment-money-flow strong { display: block; margin-top: 4px; color: var(--ci-copy); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .investment-money-flow .profit strong { color: var(--ci-green); }
body.ui-v3-investment .investment-money-flow > svg { width: 12px; fill: none; stroke: var(--ci-muted); stroke-width: 2; }
body.ui-v3-investment .investment-progress { height: 6px; margin-top: 13px; border-radius: 99px; background: rgba(148,163,184,.13); overflow: hidden; }
body.ui-v3-investment .investment-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--ci-purple),var(--ci-blue),var(--ci-green)); }
body.ui-v3-investment .investment-timeline { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 10px; color: var(--ci-muted); font-size: 10px; line-height: 1.35; }
body.ui-v3-investment .investment-timeline span { min-width: 0; overflow-wrap: anywhere; }
body.ui-v3-investment .investment-timeline small { display: block; margin-bottom: 2px; color: var(--ci-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .timeline-due { text-align: right; }
body.ui-v3-investment .investment-live-row,
body.ui-v3-investment .investment-settled { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--ci-line); }
body.ui-v3-investment .investment-live-row small { display: block; color: var(--ci-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-investment .investment-live-row .accent { display: block; margin-top: 2px; color: var(--ci-green); font-size: 12px; }
body.ui-v3-investment .remaining-time { color: var(--ci-gold-bright); font-size: 10px; line-height: 1.3; text-align: right; overflow-wrap: anywhere; }
body.ui-v3-investment .investment-settled { justify-content: flex-start; color: var(--ci-green); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
body.ui-v3-investment .investment-settled-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(56,217,150,.12); }
body.ui-v3-investment .investment-settled-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

body.ui-v3-content.v3-dialog-open,
body.ui-v3-content.post-panel-open { overflow: hidden; }
body.ui-v3-content .v3-confirm-summary,
body.ui-v3-content .v3-investment-detail-content { padding-top: 14px; }
body.ui-v3-content .v3-confirm-plan,
body.ui-v3-content .v3-detail-identity { position: relative; padding: 14px; border: 1px solid var(--ci-line); border-radius: 14px; background: rgba(148,163,184,.055); }
body.ui-v3-content .v3-confirm-plan strong,
body.ui-v3-content .v3-detail-identity h3 { display: block; margin: 5px 0 0; color: var(--ci-copy); font-size: 17px; line-height: 1.25; }
body.ui-v3-content .v3-detail-identity small { color: var(--ci-muted); font-size: 10px; overflow-wrap: anywhere; }
body.ui-v3-content .v3-detail-identity .investment-state { position: absolute; top: 12px; right: 12px; }
body.ui-v3-content .v3-confirm-metrics,
body.ui-v3-content .v3-detail-money-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
body.ui-v3-content .v3-confirm-metrics > div,
body.ui-v3-content .v3-detail-money-grid > div { min-width: 0; padding: 10px 8px; border: 1px solid var(--ci-line); border-radius: 11px; background: rgba(148,163,184,.05); }
body.ui-v3-content .v3-detail-money-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.ui-v3-content .v3-confirm-metrics small,
body.ui-v3-content .v3-detail-money-grid small { display: block; color: var(--ci-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-content .v3-confirm-metrics strong,
body.ui-v3-content .v3-detail-money-grid strong { display: block; margin-top: 5px; color: var(--ci-copy); font-size: 11px; line-height: 1.2; }
body.ui-v3-content .is-profit { color: var(--ci-green) !important; }
body.ui-v3-content .v3-confirm-summary + .investment-submit { margin-top: 12px; }
body.ui-v3-content .v3-detail-timeline { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); align-items: center; gap: 8px; margin-top: 11px; padding: 12px; border: 1px solid var(--ci-line); border-radius: 12px; }
body.ui-v3-content .v3-detail-timeline > span { height: 1px; background: linear-gradient(90deg,var(--ci-purple),var(--ci-green)); }
body.ui-v3-content .v3-detail-timeline small { display: block; color: var(--ci-muted); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
body.ui-v3-content .v3-detail-timeline strong { display: block; margin-top: 4px; color: var(--ci-copy); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
body.ui-v3-content .v3-detail-timeline > div:last-child { text-align: right; }

@media (max-width: 390px) {
    body.ui-v3-content .v3-content-overview,
    body.ui-v3-content .v3-section-heading,
    body.ui-v3-content .post-reward-hero,
    body.ui-v3-investment .tab-grad,
    body.ui-v3-investment .v3-investment-hero,
    body.ui-v3-investment .v3-my-plan-summary { width: calc(100% - 24px); }
    body.ui-v3-content .v3-task-list,
    body.ui-v3-content .v3-news-list,
    body.ui-v3-content .v3-news-detail,
    body.ui-v3-content .v3-rules-content,
    body.ui-v3-content .post-feed,
    body.ui-v3-investment .fixed-plan-list,
    body.ui-v3-investment .my-investment-list { padding-inline: 12px; }
    body.ui-v3-content.ui-v4-rules .v3-rules-content.rules-paper { width: calc(100% - 24px); padding-inline: 0; }
    body.ui-v3-investment .v3-plan-stage,
    body.ui-v3-investment .v3-plan-detail-sheet { width: calc(100% - 24px); }
    body.ui-v3-content .post-reward-copy { width: 58%; padding-left: 14px; }
}

@media (max-width: 350px) {
    body.ui-v3-content .task-card { padding: 12px; }
    body.ui-v3-content .task-card-head { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; }
    body.ui-v3-content .task-card-icon { width: 38px; height: 38px; }
    body.ui-v3-content .task-card .badge-grad { grid-column: auto; grid-row: auto; min-width: 54px; padding-inline: 7px; }
    body.ui-v3-content .news-card-link { grid-template-columns: 80px minmax(0,1fr) 16px; gap: 9px; }
    body.ui-v3-content .news-thumb { width: 80px; height: 78px; }
    body.ui-v3-content .post-feed { grid-template-columns: 1fr; }
    body.ui-v3-content .post-card { display: grid; grid-template-columns: minmax(0,1fr) 126px; gap: 9px; }
    body.ui-v3-content .post-author-row { align-self: start; }
    body.ui-v3-investment .fixed-plan-card-link { grid-template-columns: 104px minmax(0,1fr); }
    body.ui-v3-investment .fixed-plan-body { padding: 11px; }
    body.ui-v3-investment .fixed-plan-card-link { grid-template-columns: 82px minmax(0,1fr); }
    body.ui-v3-investment .plan-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.ui-v3-investment .plan-meta > span:last-child { grid-column: 1 / -1; }
    body.ui-v3-investment .plan-detail-title-row { align-items: start; flex-direction: column; }
    body.ui-v3-investment .detail-rate { text-align: left; }
    body.ui-v3-investment .return-grid,
    body.ui-v3-content .v3-confirm-metrics { grid-template-columns: 1fr; }
    body.ui-v3-investment .investment-money-flow { grid-template-columns: repeat(3,minmax(0,1fr)); }
    body.ui-v3-investment .investment-money-flow > svg { display: none; }
}

@media (max-width: 480px) {
    body.ui-v3-content .rule-table {
        min-width: 0;
        table-layout: fixed;
        font-size: 10px;
    }
    body.ui-v3-content .rule-table th,
    body.ui-v3-content .rule-table td {
        padding: 9px 6px;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
    body.ui-v3-content .rule-table th {
        font-size: 9px;
        line-height: 1.25;
        white-space: normal;
    }
    body.ui-v3-content .rule-table th:first-child,
    body.ui-v3-content .rule-table td:first-child { width: 31%; }
    body.ui-v3-content .rule-table th:nth-child(n+2),
    body.ui-v3-content .rule-table td:nth-child(n+2) { width: 23%; }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-v3-content *,
    body.ui-v3-content *::before,
    body.ui-v3-content *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* V4 plan catalogue: plan research index rather than stacked investment cards. */
body.ui-v4-plan-catalog .plan-routebar { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; width: min(100% - 28px, 640px); min-height: 58px; margin: calc(10px + env(safe-area-inset-top, 0px)) auto 12px; }
body.ui-v4-plan-catalog .plan-routebar-back { display: grid; width: 46px; height: 46px; place-items: center; color: var(--ci-text); border: 1px solid var(--ci-line); border-radius: 50%; background: var(--ci-surface); }
body.ui-v4-plan-catalog .plan-routebar-back svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
body.ui-v4-plan-catalog .plan-routebar > div { min-width: 0; }
body.ui-v4-plan-catalog .plan-routebar span,
body.ui-v4-plan-catalog .plan-stream-heading > div > span { color: var(--ci-purple); font-size: 9px; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
body.ui-v4-plan-catalog .plan-routebar h1 { margin: 2px 0 0; color: var(--ci-text); font-size: 17px; font-weight: 950; letter-spacing: -.035em; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100% - 28px, 640px); margin: 0 auto; border: 1px solid var(--ci-line-strong); border-radius: 3px 15px 3px 15px; overflow: hidden; }
body.ui-v4-plan-catalog .plan-switcher a { min-height: 44px; display: grid; place-items: center; padding: 7px; color: var(--ci-muted-strong); font-size: 11px; font-weight: 900; text-align: center; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-switcher a + a { border-left: 1px solid var(--ci-line-strong); }
body.ui-v4-plan-catalog .plan-switcher a.active { color: var(--ci-surface); background: var(--ci-text); }
body.ui-v4-plan-catalog .plan-index { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 18px; align-items: end; width: min(100% - 28px, 640px); margin: 18px auto 0; padding: 20px 0; border-bottom: 2px solid var(--ci-text); }
body.ui-v4-plan-catalog .plan-index > div > span { color: var(--ci-gold); font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
body.ui-v4-plan-catalog .plan-index h2 { margin: 5px 0 0; color: var(--ci-text); font-size: clamp(25px, 7.4vw, 36px); font-weight: 950; letter-spacing: -.07em; line-height: .92; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-index p { margin: 10px 0 0; color: var(--ci-muted-strong); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-index-mark { display: grid; width: 72px; height: 72px; place-items: center; justify-self: end; color: var(--ci-purple); border: 1px solid currentColor; border-radius: 50% 50% 4px 50%; }
body.ui-v4-plan-catalog .plan-index-mark svg { width: 35px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body.ui-v4-plan-catalog .plan-stream-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; width: min(100% - 28px, 640px); margin: 18px auto 0; }
body.ui-v4-plan-catalog .plan-stream-heading h2 { margin: 4px 0 0; color: var(--ci-text); font-size: 16px; font-weight: 950; }
body.ui-v4-plan-catalog .plan-stream-heading > span { display: block; width: 11px; height: 11px; background: var(--ci-green); border-radius: 50%; box-shadow: 0 0 0 6px var(--ci-green-soft); }
body.ui-v4-plan-catalog .plan-catalog-stream { display: grid; gap: 0; width: min(100% - 28px, 640px); margin: 12px auto 0; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ci-line-strong); }
body.ui-v4-plan-catalog .plan-catalog-entry { border-bottom: 1px solid var(--ci-line-strong); }
body.ui-v4-plan-catalog .plan-catalog-entry > a { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 13px; padding: 14px 0; color: inherit; }
body.ui-v4-plan-catalog .plan-catalog-visual { position: relative; align-self: start; width: 110px; height: 128px; overflow: hidden; background: var(--ci-surface-2); border-radius: 2px 14px 2px 14px; }
body.ui-v4-plan-catalog .plan-catalog-visual img { width: 100%; height: 100%; object-fit: cover; }
body.ui-v4-plan-catalog .plan-catalog-visual .plan-image-placeholder { display: grid; width: 100%; height: 100%; place-items: center; }
body.ui-v4-plan-catalog .plan-catalog-visual .plan-image-placeholder > svg { width: 88%; }
body.ui-v4-plan-catalog .plan-catalog-visual .plan-visual-icon { display: none; }
body.ui-v4-plan-catalog .plan-catalog-visual .plan-status { position: absolute; top: 7px; left: 7px; min-height: 23px; padding: 5px 7px; font-size: 9px; border-radius: 99px; }
body.ui-v4-plan-catalog .plan-catalog-copy { display: grid; align-content: start; min-width: 0; }
body.ui-v4-plan-catalog .plan-catalog-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body.ui-v4-plan-catalog .plan-catalog-heading h2 { margin: 0; color: var(--ci-text); font-size: 15px; font-weight: 950; line-height: 1.2; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-catalog-rate { color: var(--ci-purple); text-align: right; white-space: nowrap; }
body.ui-v4-plan-catalog .plan-catalog-rate b { font-size: 16px; font-weight: 950; }
body.ui-v4-plan-catalog .plan-catalog-rate small { font-size: 9px; font-weight: 800; }
body.ui-v4-plan-catalog .plan-catalog-copy > p { margin: 7px 0 0; color: var(--ci-muted-strong); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-catalog-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 10px; background: var(--ci-line); border: 1px solid var(--ci-line); }
body.ui-v4-plan-catalog .plan-catalog-facts > span { min-width: 0; padding: 7px 5px; background: var(--ci-surface-2); }
body.ui-v4-plan-catalog .plan-catalog-facts small { display: block; color: var(--ci-muted); font-size: 8px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-catalog-facts strong { display: block; margin-top: 3px; color: var(--ci-text); font-size: 10px; font-weight: 950; overflow-wrap: anywhere; }
body.ui-v4-plan-catalog .plan-catalog-open { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--ci-purple); font-size: 10px; font-weight: 950; }
body.ui-v4-plan-catalog .plan-catalog-open svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
body.ui-v4-plan-catalog .investment-empty,
body.ui-v4-plan-catalog .v3-error-state { grid-column: 1 / -1; }
body.ui-v4-plan-catalog:not(.dark) .plan-catalog-facts > span { background: #fff; }

@media (max-width: 350px) {
    body.ui-v4-plan-catalog .plan-routebar,
    body.ui-v4-plan-catalog .plan-switcher,
    body.ui-v4-plan-catalog .plan-index,
    body.ui-v4-plan-catalog .plan-stream-heading,
    body.ui-v4-plan-catalog .plan-catalog-stream { width: calc(100% - 18px); }
    body.ui-v4-plan-catalog .plan-index { grid-template-columns: minmax(0, 1fr) 58px; gap: 10px; }
    body.ui-v4-plan-catalog .plan-index-mark { width: 54px; height: 54px; }
    body.ui-v4-plan-catalog .plan-catalog-entry > a { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; }
    body.ui-v4-plan-catalog .plan-catalog-visual { width: 86px; height: 120px; }
    body.ui-v4-plan-catalog .plan-catalog-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ui-v4-plan-catalog .plan-catalog-facts > span:last-child { grid-column: 1 / -1; }
}