/*
 * Majesty V2 — shared investor UI kit.
 * Loaded by user/includes/header.php. Every class is `ui-` prefixed and scoped to a `.ui` page wrapper,
 * so it never collides with the bespoke dashboard / transactions / portfolio styles.
 */

.ui {
    --sidebar: #2B190F; --choc: #3D2416; --brown: #65391F; --mocha: #875334; --bronze: #B27B50; --gold: #E2B07A; --sand: #F0C995;
    --card: #FFFFFF; --ink: #211811; --muted: #81756B; --line: #EEE6DC; --soft: #F6EEE5; --hover: #FCF9F5; --input: #FFFFFF;
    --pos: #15803D; --pos-bg: #E8F5EC; --neg: #B91C1C; --neg-bg: #FBEAEA; --warn: #B45309; --warn-bg: #FCF0E1; --info: #1D4ED8; --info-bg: #E8EEFC;
    color: var(--ink); font-feature-settings: "tnum" 1, "cv11" 1;
    max-width: 1440px; margin: 0 auto;
}
html.dark .ui {
    --card: #22150D; --ink: #F7F3ED; --muted: #A8998B; --line: rgba(178,123,80,0.16); --soft: rgba(178,123,80,0.1); --hover: rgba(178,123,80,0.06); --input: #1E130C;
    --pos: #4ADE80; --pos-bg: rgba(74,222,128,0.12); --neg: #F87171; --neg-bg: rgba(248,113,113,0.12); --warn: #FBBF24; --warn-bg: rgba(251,191,36,0.12); --info: #93B4FD; --info-bg: rgba(147,180,253,0.12);
}
.ui * { min-width: 0; }
.ui a { text-decoration: none; }
.ui .ui-muted { color: var(--muted); }
.ui .ui-pos { color: var(--pos); }
.ui .ui-neg { color: var(--neg); }
.ui .ui-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

/* ---------- Page header & breadcrumb ---------- */
.ui-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ui-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); }
.ui-h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.ui-lede { font-size: 13.5px; color: var(--muted); margin-top: 3px; max-width: 620px; }
.ui-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ui-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.ui-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color .15s ease; }
.ui-crumb a:hover { color: var(--mocha); }
.ui-crumb .ui-back { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); justify-content: center; }
.ui-crumb b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Hero (chocolate) ---------- */
.ui-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px; color: #fff; margin-bottom: 18px;
    background: linear-gradient(135deg, #5A3520 0%, #3D2416 55%, #2E1B10 100%);
    border: 1px solid rgba(178,123,80,0.35); box-shadow: 0 22px 48px rgba(43,25,15,0.28), inset 0 1px 0 rgba(255,255,255,0.08); }
.ui-hero::before { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(226,176,122,0.2), transparent 65%); pointer-events: none; }
.ui-hero > * { position: relative; }
.ui-hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.ui-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.ui-hero-logo { width: 52px; height: 52px; border-radius: 14px; background: rgba(226,176,122,0.18); border: 1px solid rgba(231,195,156,0.25); color: var(--sand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 15px; font-weight: 700; }
.ui-hero-logo.round { border-radius: 50%; }
.ui-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.ui-hero-name { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-hero-meta { font-size: 13px; color: rgba(255,255,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.ui-value { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-top: 8px; overflow-wrap: anywhere; }
.ui-value small { font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.55); letter-spacing: -0.01em; }
.ui-chg { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; margin-top: 10px; }
.ui-chg.up { background: rgba(34,197,94,0.18); color: #86EFAC; border: 1px solid rgba(134,239,172,0.25); }
.ui-chg.down { background: rgba(239,68,68,0.18); color: #FCA5A5; border: 1px solid rgba(252,165,165,0.25); }
.ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.ui-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-kpis.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-kpi { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(231,195,156,0.16); }
.ui-kpi p { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi strong { display: block; font-size: 17px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-hero .up { color: #86EFAC; }
.ui-hero .down { color: #FCA5A5; }
.ui-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; }
.ui-state i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,0.25); }
.ui-state.live i { animation: uipulse 1.8s ease-in-out infinite; }
.ui-state.wait i { background: #FBBF24; box-shadow: 0 0 0 3px rgba(251,191,36,0.25); }
.ui-state.done i { background: var(--sand); box-shadow: 0 0 0 3px rgba(240,201,149,0.25); }
.ui-state.off i { background: #FCA5A5; box-shadow: 0 0 0 3px rgba(252,165,165,0.25); }
@keyframes uipulse { 50% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } }

/* ---------- Layout ---------- */
.ui-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.ui-main.side-left { grid-template-columns: 380px minmax(0, 1fr); }
.ui-col { display: flex; flex-direction: column; gap: 18px; }
.ui-sticky { position: sticky; top: 88px; }
.ui-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ui-gap { margin-bottom: 18px; }

/* ---------- Cards ---------- */
.ui-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(43,25,15,0.04), 0 8px 24px rgba(43,25,15,0.04); }
.ui-pad { padding: 20px; }
.ui-clip { overflow: hidden; }
.ui-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ui-card-head.bar { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.ui-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--brown); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-icon svg { width: 20px; height: 20px; }
.ui-icon.soft { background: var(--soft); color: var(--mocha); }
html.dark .ui-icon.soft { color: var(--gold); }
.ui-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.ui-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
.ui-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; flex-shrink: 0; transition: color .15s ease; }
.ui-link:hover { color: var(--mocha); }
.ui-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ui-sec-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }

/* Dark side panel */
.ui-panel { position: relative; overflow: hidden; border-radius: 16px; padding: 20px; background: var(--sidebar); color: #fff; box-shadow: 0 14px 32px rgba(43,25,15,0.2); }
.ui-panel::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; border: 24px solid rgba(178,123,80,0.15); pointer-events: none; }
.ui-panel > * { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, transform .15s ease, filter .15s ease, border-color .15s ease; }
.ui-btn:hover { transform: translateY(-1px); }
.ui-btn:active { transform: translateY(0) scale(0.98); }
.ui-btn:disabled, .ui-btn.is-off { opacity: 0.5; pointer-events: none; }
.ui-btn svg { width: 16px; height: 16px; }
.ui-btn.lg { height: 50px; font-size: 14.5px; border-radius: 13px; }
.ui-btn.block { display: flex; width: 100%; }
.ui-btn-dark { background: var(--brown); color: #fff; box-shadow: 0 10px 22px rgba(61,36,22,0.18); }
.ui-btn-dark:hover { background: var(--choc); }
.ui-btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.ui-btn-ghost:hover { background: var(--soft); }
.ui-btn-gold { background: linear-gradient(135deg, #E2B07A, #B27B50); color: #2B190F; font-weight: 700; box-shadow: 0 10px 24px rgba(178,123,80,0.32); }
.ui-btn-gold:hover { filter: brightness(1.07); }
.ui-btn-pos { background: #15803D; color: #fff; }
.ui-btn-pos:hover { background: #166534; }
.ui-btn-neg { background: #B91C1C; color: #fff; }
.ui-btn-neg:hover { background: #991B1B; }
.ui-btn-soft-neg { background: var(--neg-bg); color: var(--neg); }

/* ---------- Forms ---------- */
.ui-form { display: flex; flex-direction: column; gap: 16px; }
.ui-field { display: flex; flex-direction: column; gap: 7px; }
.ui-flabel { font-size: 12.5px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; }
.ui-flabel span { font-weight: 500; color: var(--muted); }
.ui-input, .ui-select, .ui-textarea { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--input); border: 1px solid var(--line); color: var(--ink); font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ui-textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.ui-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2381756B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; }
.ui-select option { background: var(--card); color: var(--ink); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--muted); opacity: 0.8; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(178,123,80,0.16); }
.ui-input[readonly] { background: var(--soft); }
.ui-help { font-size: 12px; color: var(--muted); }
.ui-iconfield { position: relative; }
.ui-iconfield > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ui-iconfield .ui-input { padding-left: 40px; }
.ui-amt { display: flex; align-items: center; gap: 6px; height: 60px; padding: 0 16px; border-radius: 14px; background: var(--input); border: 1px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease; }
.ui-amt:focus-within { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(178,123,80,0.16); }
.ui-amt > span { font-size: 20px; font-weight: 600; color: var(--muted); }
.ui-amt input { flex: 1; height: 100%; background: transparent; border: 0; outline: none; font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; width: 100%; }
.ui-amt input::-webkit-outer-spin-button, .ui-amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ui-amt input[type=number] { -moz-appearance: textfield; }
.ui-amt .ui-amt-unit { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ui-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-quick button { padding: 6px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s ease; }
.ui-quick button:hover { color: var(--ink); border-color: var(--bronze); }
.ui-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.ui-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: #875334; flex-shrink: 0; }

/* Choice cards (radio) */
.ui-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ui-choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: all .15s ease; }
.ui-choice:hover { border-color: var(--bronze); }
.ui-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ui-choice:has(input:checked), .ui-choice.is-on { border-color: var(--mocha); background: var(--soft); box-shadow: 0 0 0 3px rgba(178,123,80,0.14); }
.ui-choice-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-choice-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Segmented control */
.ui-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--soft); gap: 2px; }
.ui-seg > * { padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; border: 0; background: transparent; transition: all .15s ease; text-align: center; }
.ui-seg > *:hover { color: var(--ink); }
.ui-seg > .is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(43,25,15,0.12); }
.ui-seg.full { display: flex; }
.ui-seg.full > * { flex: 1; }
.ui-seg .is-on.buy { background: #15803D; color: #fff; }
.ui-seg .is-on.sell { background: #B91C1C; color: #fff; }

/* Chip tabs */
.ui-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s ease; }
.ui-tab:hover { color: var(--ink); border-color: var(--bronze); }
.ui-tab em { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: var(--soft); color: var(--muted); }
.ui-tab.is-on { background: var(--brown); border-color: var(--brown); color: #fff; }
.ui-tab.is-on em { background: rgba(255,255,255,0.18); color: #fff; }

/* ---------- Toolbar ---------- */
.ui-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ui-search { position: relative; flex: 1; min-width: 220px; }
.ui-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.ui-search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ui-search input:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(178,123,80,0.16); }

/* ---------- Rows / lists ---------- */
.ui-row { display: grid; grid-template-columns: 42px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) 150px 16px; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--line); color: inherit; transition: background .12s ease; }
.ui-row:last-child { border-bottom: 0; }
a.ui-row:hover, .ui-row.is-link:hover { background: var(--hover); }
a.ui-row:hover .ui-go { color: var(--mocha); transform: translateX(2px); }
.ui-thead { display: grid; grid-template-columns: 42px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) 150px 16px; gap: 14px; padding: 10px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--soft); }
.ui-thead .r, .ui-row .r { text-align: right; }
.ui-thumb { width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--brown); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 12px; font-weight: 700; }
html.dark .ui-thumb { color: var(--gold); }
.ui-thumb.round { border-radius: 50%; }
.ui-thumb.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
.ui-thumb.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 14px; }
.ui-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ui-thumb svg { width: 18px; height: 18px; }
.ui-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-meta { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cell { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-cell span { display: block; font-size: 12px; color: var(--muted); }
.ui-num { font-size: 14.5px; font-weight: 700; white-space: nowrap; text-align: right; }
.ui-num span { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
.ui-go { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease, color .15s ease; }
.ui-list-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: inherit; }
.ui-list-row:first-child { border-top: 0; padding-top: 0; }
.ui-list-row:last-child { padding-bottom: 0; }

/* ---------- Badges ---------- */
.ui-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-transform: capitalize; }
.ui-ok { background: var(--pos-bg); color: var(--pos); }
.ui-wait { background: var(--warn-bg); color: var(--warn); }
.ui-bad { background: var(--neg-bg); color: var(--neg); }
.ui-neutral { background: var(--soft); color: var(--muted); }
.ui-blue { background: var(--info-bg); color: var(--info); }
.ui-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ui-delta.up { background: var(--pos-bg); color: var(--pos); }
.ui-delta.down { background: var(--neg-bg); color: var(--neg); }
.ui-delta svg { width: 12px; height: 12px; }

/* ---------- Definition lists ---------- */
.ui-dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ui-dl > div:first-child { border-top: 0; padding-top: 0; }
.ui-dl > div:last-child { padding-bottom: 0; }
.ui-dl dt { color: var(--muted); flex-shrink: 0; }
.ui-dl dd { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dl.wrap dd { white-space: normal; overflow-wrap: anywhere; }
.ui-panel .ui-dl > div { border-color: rgba(255,255,255,0.1); }
.ui-panel .ui-dl dt { color: rgba(255,255,255,0.62); }
.ui-dl .tot dd { font-size: 18px; font-weight: 700; }
.ui-panel .ui-dl .tot dd { color: var(--sand); }
.ui-copy { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 0; max-width: 100%; }
.ui-copy:hover { color: var(--mocha); }
.ui-copy code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Stat tiles (light) ---------- */
.ui-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ui-stat { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.ui-stat.soft { background: var(--soft); border-color: transparent; }
.ui-stat p { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-stat strong { display: block; font-size: 18px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Progress ---------- */
.ui-bar { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.ui-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #875334, #E2B07A); animation: uigrow 1.2s cubic-bezier(.2,.7,.2,1) both; }
.ui-hero .ui-bar, .ui-panel .ui-bar { background: rgba(255,255,255,0.14); }
.ui-hero .ui-bar > span, .ui-panel .ui-bar > span { background: linear-gradient(90deg, #B27B50, #F0C995); box-shadow: 0 0 12px rgba(240,201,149,0.5); }
.ui-bar-lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.ui-hero .ui-bar-lbl, .ui-panel .ui-bar-lbl { color: rgba(255,255,255,0.65); }
.ui-bar-lbl b { color: var(--ink); font-weight: 600; }
.ui-hero .ui-bar-lbl b, .ui-panel .ui-bar-lbl b { color: #fff; }
@keyframes uigrow { from { width: 0; } }

/* ---------- Alerts ---------- */
.ui-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid transparent; }
.ui-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ui-alert b { display: block; font-weight: 600; margin-bottom: 1px; }
.ui-alert.ok { background: var(--pos-bg); color: var(--pos); border-color: rgba(21,128,61,0.18); }
.ui-alert.err { background: var(--neg-bg); color: var(--neg); border-color: rgba(185,28,28,0.18); }
.ui-alert.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(180,83,9,0.18); }
.ui-alert.info { background: var(--soft); color: var(--ink); border-color: var(--line); }

/* ---------- Empty ---------- */
.ui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 20px; }
.ui-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--soft); color: var(--mocha); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ui-empty-icon svg { width: 24px; height: 24px; }
.ui-empty b { font-size: 15px; font-weight: 600; }
.ui-empty p { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 360px; }

/* ---------- Market cards ---------- */
.ui-markets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ui-mcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink); overflow: hidden;
    box-shadow: 0 1px 2px rgba(43,25,15,0.04), 0 8px 24px rgba(43,25,15,0.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ui-mcard:hover { transform: translateY(-3px); border-color: rgba(178,123,80,0.45); box-shadow: 0 18px 40px rgba(43,25,15,0.12); }
.ui-mcard-top { display: flex; align-items: center; gap: 12px; }
.ui-mcard-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ui-mcard-price strong { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ui-mcard-foot span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mcard-foot svg { width: 13px; height: 13px; flex-shrink: 0; }
.ui-own { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mocha); white-space: nowrap; }
html.dark .ui-own { color: var(--gold); }
.ui-own i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-spark { width: 100%; height: 44px; display: block; }
.ui-spark path.l { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ui-spark.up path.l { stroke: var(--pos); }
.ui-spark.down path.l { stroke: var(--neg); }

/* Featured image card */
.ui-photo { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--choc); color: #fff; isolation: isolate; min-height: 240px; box-shadow: 0 18px 40px rgba(43,25,15,0.16); }
.ui-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ui-photo:hover > img { transform: scale(1.06); }
.ui-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,14,9,0.1) 0%, rgba(23,14,9,0.25) 40%, rgba(23,14,9,0.9) 100%); }
.ui-photo-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; }

/* ---------- Charts ---------- */
.ui-chart-wrap { position: relative; height: 300px; }
.ui-range { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); }
.ui-range button { padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.ui-range button.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(43,25,15,0.12); }

/* ---------- Steps ---------- */
.ui-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ui-step { display: flex; gap: 12px; align-items: flex-start; }
.ui-step b { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; background: var(--soft); color: var(--mocha); font-size: 12.5px; flex-shrink: 0; }
.ui-hero .ui-step b, .ui-panel .ui-step b { background: rgba(226,176,122,0.2); color: var(--sand); }
.ui-timeline { position: relative; display: flex; flex-direction: column; gap: 18px; }
.ui-timeline > div { position: relative; display: flex; gap: 12px; }
.ui-timeline > div:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: -16px; width: 2px; background: var(--line); }
.ui-timeline .dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted); }
.ui-timeline .dot svg { width: 14px; height: 14px; }
.ui-timeline .is-done .dot { background: var(--pos); border-color: var(--pos); color: #fff; }
.ui-timeline .is-done:not(:last-child)::before { background: var(--pos); }
.ui-timeline .is-now .dot { background: var(--brown); border-color: var(--brown); color: #fff; box-shadow: 0 0 0 4px rgba(135,83,52,0.16); }
.ui-timeline .is-fail .dot { background: var(--neg); border-color: var(--neg); color: #fff; }

/* ---------- Upload ---------- */
.ui-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--soft); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ui-drop:hover, .ui-drop.is-over { border-color: var(--bronze); }
.ui-drop svg { width: 24px; height: 24px; color: var(--mocha); }
.ui-drop b { font-size: 13.5px; font-weight: 600; }
.ui-drop span { font-size: 12px; color: var(--muted); }
.ui-drop.has-file { border-style: solid; border-color: var(--pos); background: var(--pos-bg); }

/* ---------- Modal ---------- */
.ui-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(23,14,9,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ui-modal.is-open { display: flex; }
.ui-modal-box { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.35); padding: 22px; animation: uipop .18s ease-out; }
@keyframes uipop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* ---------- Receipt ---------- */
.ui-receipt { max-width: 560px; margin: 0 auto; }
.ui-receipt-card { position: relative; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(43,25,15,0.04), 0 18px 40px rgba(43,25,15,0.08); overflow: hidden; }
.ui-receipt-top { padding: 28px 24px 24px; text-align: center; background: linear-gradient(135deg, #5A3520 0%, #3D2416 55%, #2E1B10 100%); color: #fff; }
.ui-receipt-seal { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.ui-receipt-seal svg { width: 28px; height: 28px; }
.ui-receipt-seal.ok { background: rgba(74,222,128,0.16); color: #86EFAC; box-shadow: 0 0 0 8px rgba(74,222,128,0.07); }
.ui-receipt-seal.wait { background: rgba(251,191,36,0.16); color: #FCD34D; box-shadow: 0 0 0 8px rgba(251,191,36,0.07); }
.ui-receipt-seal.bad { background: rgba(248,113,113,0.16); color: #FCA5A5; box-shadow: 0 0 0 8px rgba(248,113,113,0.07); }
.ui-receipt-tear { height: 16px; background: radial-gradient(circle at 8px -2px, transparent 8px, var(--card) 8.5px) 0 0 / 16px 16px repeat-x; margin-top: -8px; position: relative; }
.ui-receipt-body { padding: 8px 24px 24px; }

@media (prefers-reduced-motion: reduce) { .ui-bar > span, .ui-state.live i { animation: none; } .ui-mcard:hover { transform: none; } }

@media (max-width: 1279px) {
    .ui-markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-main, .ui-main.side-left { grid-template-columns: minmax(0, 1fr) 340px; }
    .ui-main.side-left { grid-template-columns: 340px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
    .ui-main, .ui-main.side-left { grid-template-columns: minmax(0, 1fr); }
    .ui-sticky { position: static; }
    .ui-hero-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-thead { display: none; }
    .ui-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .ui-row .ui-hide-md, .ui-row .ui-go { display: none; }
}
@media (max-width: 767px) {
    .ui-head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 14px; }
    .ui-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .ui-h1 { font-size: 23px; }
    .ui-hero { padding: 20px 18px; border-radius: 18px; margin-bottom: 14px; }
    .ui-value { font-size: 34px; }
    .ui-value small { display: block; font-size: 14px; margin-top: 4px; }
    .ui-hero-name { font-size: 19px; }
    .ui-kpi strong { font-size: 15px; }
    .ui-main, .ui-col, .ui-grid2, .ui-grid3 { gap: 14px; }
    .ui-grid2, .ui-grid3 { grid-template-columns: minmax(0, 1fr); }
    .ui-markets { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ui-pad { padding: 16px; }
    .ui-card-head.bar { padding: 16px; }
    .ui-row { padding: 12px 16px; gap: 12px; }
    .ui-steps { grid-template-columns: minmax(0, 1fr); }
    .ui-gap { margin-bottom: 14px; }
    .ui-receipt-body { padding: 8px 18px 20px; }
}
@media (max-width: 420px) {
    .ui-kpis.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ui-search { min-width: 100%; }
}

/* ---------- Property cards ---------- */
.ui-pcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); color: var(--ink);
    box-shadow: 0 1px 2px rgba(43,25,15,0.04), 0 8px 24px rgba(43,25,15,0.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ui-pcard:hover { transform: translateY(-3px); border-color: rgba(178,123,80,0.45); box-shadow: 0 18px 40px rgba(43,25,15,0.12); }
.ui-pcard-img { position: relative; height: 190px; background: linear-gradient(135deg, #5A3520, #2E1B10); overflow: hidden; }
.ui-pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ui-pcard:hover .ui-pcard-img img { transform: scale(1.06); }
.ui-pcard-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,14,9,0) 45%, rgba(23,14,9,0.55)); }
.ui-pcard-img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(240,201,149,0.5); }
.ui-pcard-img .ph svg { width: 40px; height: 40px; }
.ui-pcard-tags { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; z-index: 1; }
.ui-roi { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 11px; border-radius: 11px; background: linear-gradient(135deg, #E2B07A, #B27B50); color: #2B190F; font-size: 11.5px; font-weight: 600; box-shadow: 0 8px 20px rgba(178,123,80,0.4); }
.ui-roi strong { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.ui-glass { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(23,14,9,0.45); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ui-pcard-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1; }
.ui-pcard-loc { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-pcard-loc svg { width: 14px; height: 14px; flex-shrink: 0; }
.ui-pcard-name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-pcard-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.ui-pcard-facts p { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.ui-pcard-facts strong { display: block; font-size: 13.5px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Gallery */
.ui-gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 380px; border-radius: 18px; overflow: hidden; }
.ui-gallery > * { position: relative; overflow: hidden; background: var(--soft); cursor: zoom-in; border: 0; padding: 0; }
.ui-gallery > *:first-child { grid-row: 1 / 3; }
.ui-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ui-gallery > *:hover img { transform: scale(1.04); }
.ui-gallery .more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(23,14,9,0.55); color: #fff; font-weight: 600; font-size: 14px; }
.ui-gallery.one { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ui-gallery.one > *:first-child { grid-row: auto; }
.ui-lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(10,6,4,0.92); padding: 24px; }
.ui-lightbox.is-open { display: flex; }
.ui-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }
.ui-lightbox button { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ui-lightbox button:hover { background: rgba(255,255,255,0.22); }
.ui-lightbox .x { top: 16px; right: 16px; }
.ui-lightbox .prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ui-lightbox .next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
    .ui-gallery { height: 240px; grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .ui-gallery > *:not(:first-child) { display: none; }
    .ui-gallery > *:first-child { grid-row: auto; }
}