:root {
    color-scheme: dark;
    --ph-bg: #121212;
    --ph-surface: #1e1e1e;
    --ph-surface-soft: #242424;
    --ph-surface-strong: #2c2c2c;
    --ph-text: #f3eff7;
    --ph-text-soft: #cbc4d1;
    --ph-muted: #9f98a6;
    --ph-line: #38343c;
    --ph-line-strong: #514a58;
    --ph-accent: #bb86fc;
    --ph-accent-hover: #d0a6ff;
    --ph-accent-soft: rgba(187, 134, 252, .14);
    --ph-success: #69d49a;
    --ph-warning: #e6b45f;
    --ph-danger: #ff837d;
    --ph-radius-sm: 10px;
    --ph-radius: 16px;
    --ph-radius-lg: 22px;
    --ph-shadow: 0 22px 55px rgba(0, 0, 0, .42);
    --ph-shell-height: 68px;
    --ph-local-nav-height: 48px;
    --ph-app-accent: var(--ph-accent);
}

* { box-sizing: border-box; }

html { background: var(--ph-bg); color-scheme: dark; }

body.ph-shell-active {
    min-width: 0;
    background: radial-gradient(circle at 88% -8%, color-mix(in srgb, var(--ph-app-accent) 13%, transparent), transparent 28rem), var(--ph-bg) !important;
    color: var(--ph-text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-hub-app="travel"] { --ph-app-accent: #79b8e8; }
body[data-hub-app="expenses"] { --ph-app-accent: #69d49a; }
body[data-hub-app="floorplans"] { --ph-app-accent: #e6b45f; }
body[data-hub-app="map"] { --ph-app-accent: #55c8bd; }
body[data-hub-app="manga"] { --ph-app-accent: #d49ce8; }
body[data-hub-app="rubik"] { --ph-app-accent: #55c8bd; }
body[data-hub-app="prices"] { --ph-app-accent: #79b8e8; }
body[data-hub-app="cv"] { --ph-app-accent: #c5a0ef; }
body[data-hub-app="tft"] {
    --ph-app-accent: #d6a85f;
    --bg: var(--ph-bg);
    --surface: var(--ph-surface);
    --surface-strong: var(--ph-surface-soft);
    --ink: var(--ph-text);
    --muted: var(--ph-muted);
    --line: var(--ph-line);
    --accent: #a87932;
    --accent-dark: #8e6428;
    --danger: var(--ph-danger);
    --warning: var(--ph-warning);
    --ok: var(--ph-success);
    --shadow: 0 18px 40px rgba(0, 0, 0, .24);
}

body.ph-shell-active :is(button, input, select, textarea, a):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ph-app-accent) 56%, transparent) !important;
    outline-offset: 3px;
}

.ph-shell {
    position: sticky;
    z-index: 1000;
    top: 0;
    width: 100%;
    border-bottom: 1px solid var(--ph-line);
    background: rgba(18, 18, 18, .94);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ph-topbar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    min-height: var(--ph-shell-height);
    max-width: 1280px;
    margin: auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 18px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ph-hub-link,
.ph-app-identity,
.ph-apps-summary,
.ph-primary-action,
.ph-local-nav :is(a, button),
.ph-mobile-nav :is(a, button) {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: var(--ph-radius-sm);
    color: var(--ph-text);
    font: inherit;
    font-weight: 750;
    text-decoration: none;
}

.ph-hub-link {
    width: max-content;
    padding: 7px 10px 7px 7px;
}

.ph-hub-link:hover,
.ph-apps-summary:hover,
.ph-local-nav :is(a, button):hover,
.ph-mobile-nav :is(a, button):hover { background: var(--ph-surface-soft); }

.ph-brand-mark,
.ph-app-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ph-app-accent) 34%, var(--ph-line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--ph-app-accent) 16%, var(--ph-surface));
    color: var(--ph-app-accent);
    font-size: 18px;
}

.ph-brand-copy { display: grid; line-height: 1.05; }
.ph-brand-copy strong { font-size: 14px; }
.ph-brand-copy small { margin-top: 4px; color: var(--ph-muted); font-size: 11px; font-weight: 600; }

.ph-app-identity { justify-self: center; min-width: 0; }
.ph-app-identity-copy { display: grid; line-height: 1.08; }
.ph-app-identity strong { font-size: 15px; white-space: nowrap; }
.ph-app-identity small { margin-top: 4px; color: var(--ph-muted); font-size: 11px; font-weight: 600; }

.ph-top-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.ph-apps { position: relative; }
.ph-apps summary { list-style: none; }
.ph-apps summary::-webkit-details-marker { display: none; }
.ph-apps-summary { padding: 0 12px; border: 1px solid var(--ph-line); background: var(--ph-surface); cursor: pointer; }
.ph-chevron { color: var(--ph-muted); font-size: 11px; transition: transform .18s ease; }
.ph-apps[open] .ph-chevron { transform: rotate(180deg); }

.ph-app-picker {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(420px, calc(100vw - 24px));
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 1px solid var(--ph-line-strong);
    border-radius: var(--ph-radius);
    background: var(--ph-surface);
    box-shadow: var(--ph-shadow);
}

.ph-app-picker a {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--ph-text-soft);
    text-decoration: none;
}

.ph-app-picker a:hover { border-color: var(--ph-line); background: var(--ph-surface-soft); color: var(--ph-text); }
.ph-app-picker a[aria-current="page"] { border-color: color-mix(in srgb, var(--ph-app-accent) 45%, var(--ph-line)); background: color-mix(in srgb, var(--ph-app-accent) 12%, var(--ph-surface)); color: var(--ph-text); }
.ph-picker-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ph-surface-strong); }
.ph-picker-copy { min-width: 0; display: grid; }
.ph-picker-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ph-picker-copy small { margin-top: 2px; color: var(--ph-muted); font-size: 10px; }

.ph-primary-action {
    padding: 0 14px;
    border: 1px solid var(--ph-app-accent);
    background: var(--ph-app-accent);
    color: #151019;
    cursor: pointer;
}
.ph-primary-action:hover { filter: brightness(1.08); }

.ph-local-nav {
    min-height: var(--ph-local-nav-height);
    padding: 0 max(20px, calc((100vw - 1280px) / 2 + 20px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow-x: auto;
    border-top: 1px solid rgba(255, 255, 255, .035);
    scrollbar-width: none;
}
.ph-local-nav::-webkit-scrollbar { display: none; }
.ph-local-nav :is(a, button) { min-height: 36px; padding: 0 13px; border: 0; background: transparent; color: var(--ph-muted); cursor: pointer; white-space: nowrap; }
.ph-local-nav :is(a, button).is-active { background: color-mix(in srgb, var(--ph-app-accent) 14%, transparent); color: var(--ph-app-accent); }
.ph-local-nav :is(a, button):disabled { opacity: .35; cursor: not-allowed; }

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

body.ph-shell-active :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
    border: 1px solid var(--ph-line) !important;
    border-radius: var(--ph-radius-sm) !important;
    background: var(--ph-surface-soft) !important;
    color: var(--ph-text) !important;
}
body.ph-shell-active :is(input, textarea)::placeholder { color: var(--ph-muted) !important; }
body.ph-shell-active label { color: var(--ph-text-soft); }

body.ph-shell-active :is(.modal, .login-box) {
    border-color: var(--ph-line) !important;
    background: var(--ph-surface) !important;
    color: var(--ph-text) !important;
    box-shadow: var(--ph-shadow) !important;
}

body.ph-shell-active :is(.btn-primary, .button-primary) {
    border-color: var(--ph-app-accent) !important;
    background: var(--ph-app-accent) !important;
    color: #151019 !important;
}

body[data-hub-app="investments"] .app-header,
body[data-hub-app="investments"] > .mobile-nav,
body[data-hub-app="travel"] > header,
body[data-hub-app="floorplans"] > header,
body[data-hub-app="rubik"] > .navbar { display: none !important; }

body[data-hub-app="travel"] > .fab,
body[data-hub-app="expenses"] > .fab { display: none !important; }

body[data-hub-app="travel"] .trip-tabs { display: none; }
body[data-hub-app="manga"] .manga-switcher { display: none; }
body[data-hub-app="tft"] .tabs { display: none; }
body[data-hub-app="tft"] > .app-shell { min-height: calc(100vh - var(--ph-shell-height) - var(--ph-local-nav-height)); }
body[data-hub-app="tft"] .sidebar { background: rgba(30, 30, 30, .9); }

body[data-hub-app="travel"], body[data-hub-app="expenses"] {
    --bg-color: var(--ph-bg);
    --card-bg: var(--ph-surface);
    --text-primary: var(--ph-text);
    --text-secondary: var(--ph-muted);
    --accent-color: var(--ph-app-accent);
    --accent-hover: color-mix(in srgb, var(--ph-app-accent) 82%, white);
    --success: var(--ph-success);
    --danger: var(--ph-danger);
    --warning: var(--ph-warning);
}

body[data-hub-app="floorplans"] {
    --header-height: 116px;
    --bg-color: var(--ph-bg);
    --panel-bg: var(--ph-surface);
    --surface: var(--ph-surface);
    --border: var(--ph-line);
    --border-strong: var(--ph-line-strong);
    --text-primary: var(--ph-text);
    --text-secondary: var(--ph-muted);
    --accent: var(--ph-app-accent);
    --accent-dark: color-mix(in srgb, var(--ph-app-accent) 78%, black);
    --danger: var(--ph-danger);
    --danger-soft: rgba(255, 131, 125, .12);
    --grid-line: #343038;
    --nested-fill: rgba(187, 134, 252, .11);
}

body[data-hub-app="floorplans"] :is(.panel, .sidebar, .floorplan-card, .empty-state, .empty-panel, .modal) { background: var(--ph-surface) !important; }
body[data-hub-app="floorplans"] .panel { background: var(--ph-surface-soft) !important; }
body[data-hub-app="floorplans"] .floorplan-preview { background: #f2f0f4; }

body[data-hub-app="manga"].ph-shell-active {
    height: 100vh;
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}
body[data-hub-app="manga"] .ph-shell { grid-column: 1 / -1; }
body[data-hub-app="manga"] #sidebar { grid-column: 1; grid-row: 2; width: 300px; min-height: 0; }
body[data-hub-app="manga"] #main-content { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; }

body[data-hub-app="map"]:not(.city-page).ph-shell-active {
    height: 100vh;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
}
body[data-hub-app="map"]:not(.city-page) .map-layout { flex: 1; }

body[data-hub-app="map"] .map-header { background: var(--ph-surface); border-color: var(--ph-line); color: var(--ph-text); }
body[data-hub-app="map"] .map-header p { color: var(--ph-muted); }
body[data-hub-app="map"] .map-header > a { display: none; }
body[data-hub-app="map"] .places-panel { border-color: var(--ph-line); background: var(--ph-surface); }
body[data-hub-app="map"] .place-button { border-color: var(--ph-line); background: var(--ph-surface-soft); color: var(--ph-text); }
body[data-hub-app="map"].city-page { background: var(--ph-bg) !important; color: var(--ph-text); }
body[data-hub-app="map"] .city-nav { display: none; }
body[data-hub-app="map"] .city-info section { border-color: var(--ph-line); background: var(--ph-surface); color: var(--ph-text); box-shadow: 0 12px 34px rgba(0, 0, 0, .22); }

body[data-hub-app="rubik"] { --bg-color: var(--ph-bg); --card-bg: var(--ph-surface); --text-color: var(--ph-text); --accent-color: var(--ph-app-accent); }
body[data-hub-app="prices"] header { top: calc(var(--ph-shell-height) + var(--ph-local-nav-height)); background: rgba(18, 18, 18, .92); border-color: var(--ph-line); }
body[data-hub-app="prices"] header h1 { display: none; }
body[data-hub-app="prices"] .loading-state { grid-column: 1 / -1; min-height: 180px; display: grid; place-items: center; border: 1px solid var(--ph-line); border-radius: var(--ph-radius); background: var(--ph-surface); color: var(--ph-muted); }

body[data-hub-app="cv"] { background: var(--ph-bg) !important; }
body[data-hub-app="cv"] > .container { margin-top: 24px; border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow); }

body[data-hub-app="expenses"] > header {
    top: calc(var(--ph-shell-height) + var(--ph-local-nav-height));
    padding: 8px 0;
    border-color: var(--ph-line);
    background: rgba(18, 18, 18, .9);
}
body[data-hub-app="expenses"] > header :is(.left, .right) { visibility: hidden; }

body[data-hub-app="travel"] :is(.trip-card, .item-card),
body[data-hub-app="expenses"] :is(.summary-card, .column),
body[data-hub-app="rubik"] .step,
body[data-hub-app="prices"] :is(.card, .matrix-card) {
    border: 1px solid var(--ph-line) !important;
    border-radius: var(--ph-radius) !important;
    background-color: var(--ph-surface) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .2) !important;
}

body[data-hub-app="travel"] .trip-card:hover,
body[data-hub-app="prices"] :is(.card, .matrix-card):hover {
    border-color: color-mix(in srgb, var(--ph-app-accent) 55%, var(--ph-line)) !important;
    transform: translateY(-3px);
}

body.ph-shell-active :is(.empty-state, .empty-panel, .loading, .error-state) {
    border-color: var(--ph-line) !important;
    color: var(--ph-muted) !important;
}

.ph-toast-region {
    position: fixed;
    z-index: 1300;
    right: 18px;
    bottom: 18px;
    width: min(380px, calc(100vw - 24px));
    display: grid;
    gap: 10px;
}

.ph-toast {
    min-height: 58px;
    padding: 12px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--ph-line-strong);
    border-radius: 14px;
    background: var(--ph-surface);
    color: var(--ph-text);
    box-shadow: var(--ph-shadow);
}
.ph-toast-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--ph-accent-soft); color: var(--ph-accent); font-weight: 900; }
.ph-toast-error .ph-toast-icon { background: rgba(255, 131, 125, .13); color: var(--ph-danger); }
.ph-toast-success .ph-toast-icon { background: rgba(105, 212, 154, .13); color: var(--ph-success); }
.ph-toast div { min-width: 0; display: grid; gap: 2px; }
.ph-toast strong { font-size: 13px; }
.ph-toast span { color: var(--ph-text-soft); font-size: 12px; }
.ph-toast button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--ph-muted); font-size: 20px; cursor: pointer; }

.ph-confirm-overlay {
    position: fixed;
    z-index: 1400;
    inset: 0;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
}
.ph-confirm-dialog { width: min(430px, 100%); padding: 22px; border: 1px solid var(--ph-line-strong); border-radius: var(--ph-radius); background: var(--ph-surface); color: var(--ph-text); box-shadow: var(--ph-shadow); }
.ph-confirm-dialog h2 { margin: 0 0 8px; font-size: 1.2rem; }
.ph-confirm-dialog p { margin: 0; color: var(--ph-muted); line-height: 1.55; }
.ph-confirm-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 8px; }
.ph-confirm-actions button { min-height: 42px; padding: 0 15px; border-radius: 10px; font: inherit; font-weight: 750; cursor: pointer; }
.ph-confirm-cancel { border: 1px solid var(--ph-line); background: var(--ph-surface-soft); color: var(--ph-text); }
.ph-confirm-accept { border: 1px solid var(--ph-accent); background: var(--ph-accent); color: #151019; }
.ph-confirm-danger { border: 1px solid var(--ph-danger); background: var(--ph-danger); color: #1a0d0c; }

@media (max-width: 720px) {
    :root { --ph-shell-height: 60px; --ph-local-nav-height: 0px; }
    body.ph-shell-active { padding-bottom: 82px !important; }
    .ph-topbar { min-height: 60px; padding: 0 12px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; }
    .ph-hub-link { width: 42px; padding: 0; }
    .ph-hub-link .ph-brand-copy { display: none; }
    .ph-brand-mark, .ph-app-icon { width: 36px; height: 36px; }
    .ph-app-identity { justify-self: start; }
    .ph-app-identity small { display: none; }
    .ph-apps-summary { width: 42px; padding: 0; }
    .ph-apps-summary-label, .ph-chevron { display: none; }
    .ph-app-picker { position: fixed; top: 68px; right: 8px; left: 8px; width: auto; max-height: calc(100vh - 154px); overflow: auto; }
    .ph-primary-action { min-width: 42px; padding: 0 10px; }
    .ph-primary-action-label { display: none; }
    .ph-local-nav { display: none; }
    .ph-mobile-nav {
        position: fixed;
        z-index: 950;
        right: 10px;
        bottom: 10px;
        left: 10px;
        min-height: 64px;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(58px, 1fr);
        align-items: center;
        gap: 3px;
        padding: 6px;
        overflow-x: auto;
        border: 1px solid var(--ph-line-strong);
        border-radius: 18px;
        background: rgba(30, 30, 30, .96);
        box-shadow: var(--ph-shadow);
        backdrop-filter: blur(18px);
        scrollbar-width: none;
    }
    .ph-mobile-nav::-webkit-scrollbar { display: none; }
    .ph-mobile-nav :is(a, button) { min-width: 58px; min-height: 50px; padding: 4px 7px; flex-direction: column; gap: 2px; border: 0; background: transparent; color: var(--ph-muted); font-size: 10px; cursor: pointer; white-space: nowrap; }
    .ph-mobile-nav :is(a, button).is-active { background: var(--ph-accent-soft); color: var(--ph-app-accent); }
    .ph-mobile-nav-icon { font-size: 17px; line-height: 1; }
    .ph-mobile-nav .ph-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body[data-hub-app="prices"] header { top: var(--ph-shell-height); }
    body[data-hub-app="expenses"] > header { top: var(--ph-shell-height); }
    body[data-hub-app="floorplans"] { --header-height: 60px; }
    body[data-hub-app="manga"].ph-shell-active { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding-bottom: 0 !important; }
    body[data-hub-app="manga"] #main-content { grid-column: 1; grid-row: 2; }
    body[data-hub-app="manga"] #sidebar { position: fixed; top: var(--ph-shell-height); bottom: 82px; left: 0; height: auto; z-index: 940; }
    body[data-hub-app="floorplans"].editor-active main,
    body[data-hub-app="floorplans"].editor-active .editor-shell { min-height: calc(100vh - var(--ph-shell-height)); }
    .ph-toast-region { right: 12px; bottom: 88px; left: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-shell *, .ph-shell *::before, .ph-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}