/* Shared public and member UI. Bootstrap remains responsible for layout and behavior. */
:root {
    --bs-primary: #0066cc; --bs-primary-rgb: 0, 102, 204;
    --bs-link-color: #0066cc; --bs-link-color-rgb: 0, 102, 204;
    --bs-link-hover-color: #0052a3; --bs-link-hover-color-rgb: 0, 82, 163;
    --bs-body-color: #1a1a1a; --bs-body-bg: #f8f9fa;
    --bs-border-color: #dee2e6; --bs-border-radius: .75rem;
    --ink: #1a1a1a; --muted: #666666; --surface: #fff; --line: #dee2e6;
}
body { min-height: 100vh; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
main { flex: 1; }
h1, h2, h3, h4 { letter-spacing: -.035em; }
a, button, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid #b17b22 !important; outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 2000; background: #fff; padding: .75rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.btn { font-weight: 600; padding: .65rem 1.15rem; border-radius: .65rem; }
.btn-sm { padding: .45rem .85rem; }
.btn-lg { padding: .9rem 1.4rem; font-size: 1rem; }
.btn-primary { --bs-btn-bg: #0066cc; --bs-btn-border-color: #0066cc; --bs-btn-hover-bg: #0052a3; --bs-btn-hover-border-color: #0052a3; --bs-btn-active-bg: #0052a3; --bs-btn-active-border-color: #0052a3; --bs-btn-disabled-bg: #0066cc; --bs-btn-disabled-border-color: #0066cc; --bs-btn-focus-shadow-rgb: 0, 102, 204; }
.btn-outline-primary { --bs-btn-color: #0066cc; --bs-btn-border-color: #b3d1f0; --bs-btn-hover-bg: #0066cc; --bs-btn-hover-border-color: #0066cc; --bs-btn-active-bg: #0052a3; --bs-btn-active-border-color: #0052a3; }
.navbar { min-height: 88px; box-shadow: none; }
.navbar-brand { display: flex; align-items: center; gap: .65rem; font-weight: 750; color: var(--ink); letter-spacing: -.04em; font-size: 1.35rem; }
.navbar-brand img { height: 36px; width: auto; }
.navbar-nav { gap: .65rem; }
.navbar .nav-link { padding: .5rem .8rem !important; font-size: .9rem; border-radius: .5rem; color: var(--muted); }
.navbar .nav-link.active, .navbar .nav-link:hover { background: #e6f0ff; color: #0066cc; }
.user-avatar { width: 38px; height: 38px; background: #e6f0ff; border: 1px solid #b3d1f0; }
.dropdown-menu { border: 1px solid var(--line); padding: .5rem; min-width: 260px; box-shadow: 0 15px 45px #1a1a1a15; }
.dropdown-header { background: #e6f0ff; border-radius: .5rem; padding: .75rem; }
.dropdown-item { padding: .65rem .75rem; border-radius: .35rem; }
.dropdown-item:hover { background: #e6f0ff; }
.site-footer { border-top: 1px solid var(--line); background: #1a1a1a; color: #b8b8b8; font-size: .8rem; }
.site-footer a { color: #80b3e6; }
.home-hero { position: relative; background: #e0ecf0; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 4rem; min-height: 570px; padding-top: 65px; padding-bottom: 65px; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: #023a51; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #0066cc; box-shadow: 0 0 0 4px #0066cc12; flex-shrink: 0; }
.hero-copy h1 { color: #023a51; font-size: clamp(2.3rem, 4.2vw, 4rem); line-height: 1.09; font-weight: 750; margin: 1.5rem 0; overflow-wrap: anywhere; }
.hero-description { max-width: 32rem; font-size: 1.06rem; line-height: 1.85; color: #023a51; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.75rem; margin-top: 2rem; }
.hero-actions .btn-primary { --bs-btn-bg: #023a51; --bs-btn-border-color: #023a51; --bs-btn-hover-bg: #012a3b; --bs-btn-hover-border-color: #012a3b; }
.hero-secondary { font-size: .9rem; font-weight: 650; text-decoration: none; }
.hero-platforms { display: flex; align-items: center; gap: .75rem; margin-top: 2.2rem; color: #526b78; font-size: .75rem; }
.hero-art { height: 390px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; width: 370px; height: 370px; border: 1px solid #c1d6df; border-radius: 50%; }
.orbit-two { width: 470px; height: 470px; border-style: dashed; opacity: .7; }
.preview-window { position: relative; width: 330px; max-width: 85%; background: #fff; border: 1px solid #d7e4eb; border-radius: 16px; transform: rotate(-6deg); box-shadow: 0 30px 60px #023a5118; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 19px; border-bottom: 1px solid #edf2f6; font-size: .65rem; }
.preview-dots { font-size: .5rem; letter-spacing: 3px; color: #a9bdca; }
.preview-body { padding: 25px; }
.preview-label { text-transform: uppercase; letter-spacing: .08em; font-size: .55rem; color: var(--muted); }
.preview-app { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.preview-app > i { margin-left: auto; }
.preview-app-icon { display: grid; place-items: center; width: 53px; height: 53px; background: #e6f0ff; color: #0066cc; border-radius: 15px; font-size: 1.6rem; }
.preview-app strong, .preview-app div span { display: block; }
.preview-app div span { font-size: .7rem; margin-top: 3px; color: var(--muted); }
.preview-lines { display: grid; gap: 9px; margin: 24px 0; }
.preview-lines span { height: 6px; border-radius: 8px; background: #edf2f6; }
.preview-lines span:last-child { width: 72%; }
.preview-progress { height: 6px; background: #e6f0ff; border-radius: 8px; }
.preview-progress span { display: block; width: 76%; height: 100%; background: #6699cc; border-radius: inherit; }
.preview-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; font-size: .65rem; color: var(--muted); }
.floating-feedback { position: absolute; bottom: 10px; right: -5px; display: flex; align-items: center; gap: 14px; padding: 18px; max-width: 95%; background: #fff; border: 1px solid var(--line); box-shadow: 0 15px 40px #023a5112; border-radius: 12px; transform: rotate(3deg); }
.floating-feedback > span { color: #023a51; background: #e6f0ff; border-radius: 50%; padding: 10px; font-size: 1.2rem; }
.floating-feedback strong, .floating-feedback small { display: block; }
.floating-feedback strong { font-size: .8rem; }
.floating-feedback small { font-size: .6rem; color: var(--muted); margin-top: 3px; }
.floating-feedback > i { color: #0066cc; }
.art-spark { position: absolute; font-size: 1.5rem; font-weight: 300; color: #6699aa; }
.spark-one { top: 0; right: 20px; }.spark-two { bottom: 35px; left: 0; }
.art-caption { position: absolute; bottom: -45px; font-size: .55rem; letter-spacing: .3em; color: #627e8b; }
.apps-section { padding: 64px 0 80px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 30px; }
.section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; margin: .65rem 0; }
.section-heading p, .catalog-heading p { color: var(--muted); margin: 0; }
.section-heading > a { flex-shrink: 0; font-size: .8rem; }
.app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.app-card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 26px; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; min-width: 0; }
.app-card:hover { transform: translateY(-4px); box-shadow: 0 14px 35px #1a1a1a0b; }
.app-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 22px; }
.app-icon { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.app-icon-placeholder { display: grid; place-items: center; background: #e6f0ff; color: #0066cc; font-size: 1.7rem; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; font-size: .6rem; font-weight: 650; background: #edf6ed; color: #397348; }
.status-pill > span { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.app-card h2, .app-card h3 { font-size: 1.22rem; font-weight: 700; overflow-wrap: anywhere; }
.app-description { color: var(--muted); font-size: .87rem; line-height: 1.7; flex: 1; margin: .35rem 0 1.5rem; overflow-wrap: anywhere; }
.app-card-meta { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .7rem; margin-bottom: 18px; }
.meta-separator { padding: 0 8px; color: #adb5bd; }
.app-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; justify-content: space-between; border-top: 1px solid #edf2f6; padding-top: 16px; }
.app-detail-link { display: flex; gap: 20px; justify-content: space-between; font-size: .8rem; font-weight: 650; text-decoration: none; flex: 1; }
.store-link { font-size: .7rem; text-decoration: none; padding-right: .35rem; }
.catalog-page { padding-top: 60px; padding-bottom: 80px; }
.catalog-heading h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 750; margin: 1rem 0; }
.catalog-search { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 12px 16px; margin: 32px 0; }
.catalog-search input { border: none; background: transparent; min-width: 0; }
.catalog-search > i { color: var(--muted); }.catalog-search .btn { flex-shrink: 0; }
.empty-state { grid-column: 1 / -1; padding: 4rem 1rem; text-align: center; border: 1px dashed #cbd9e6; border-radius: 15px; color: var(--muted); }
.empty-state > i { font-size: 2rem; }.empty-state h2, .empty-state h3 { font-size: 1.3rem; margin: 1rem 0; }
.card { --bs-card-border-color: var(--line); --bs-card-border-radius: 1rem; }.card-header { border-bottom-color: var(--line); }
.form-control, .form-select { padding: .7rem .9rem; border-color: #ced4da; }
.form-control:focus, .form-select:focus { border-color: #80b3e6; box-shadow: 0 0 0 .2rem #0066cc18; }
.dashboard-sidebar { background: #f8f9fa; border-right: 1px solid var(--line); min-height: calc(100vh - 88px); }
.sidebar-link { color: var(--muted); }.sidebar-link:hover { background: #e9ecef; }.sidebar-link.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white !important; font-weight: 600; }
@media (max-width: 991px) { .navbar-collapse { padding: 1rem 0; }.navbar-nav { margin-bottom: 1rem; }.hero-grid { gap: 1.5rem; }.hero-copy h1 { font-size: 2.6rem; }.floating-feedback { right: 0; }.app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .navbar { min-height: 74px; }.hero-grid { grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 50px; gap: 35px; }.hero-copy h1 { max-width: 32rem; font-size: clamp(2.2rem, 8vw, 3.3rem); }.hero-art { max-width: 380px; width: 100%; margin: auto; height: 350px; }.orbit { width: 310px; height: 310px; }.orbit-two { width: 365px; height: 365px; }.art-caption { bottom: -30px; }.apps-section, .catalog-page { padding-top: 40px; padding-bottom: 45px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }.app-grid { grid-template-columns: 1fr; }.dashboard-sidebar { min-height: auto; border-bottom: 1px solid var(--line); }.catalog-search { flex-wrap: wrap; gap: 8px; }.catalog-search input { flex: 1; width: 50%; }.catalog-search .btn { font-size: .8rem; }.hero-platforms { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }.app-card:hover { transform: none; } }