/* Mapflex brand system — derived from the supplied logo assets. */
:root {
    --ink: #25273a;
    --paper: #f3f4f9;
    --paper-light: #ffffff;
    --field: #434660;
    --deep: #34364f;
    --sprout: #b9bbd5;
    --clay: #bd626c;
    --muted: #70738a;
    --line: rgba(67, 70, 96, .14);
    --brand: #434660;
    --brand-deep: #34364f;
    --brand-mid: #62657d;
    --brand-soft: #eceef6;
    --brand-mist: #f7f7fb;
    --brand-accent: #b9bbd5;
    --font-ui: "Noto Sans KR", "Malgun Gothic", sans-serif;
    --font-display: "Manrope", "Noto Sans KR", sans-serif;
    --soft-shadow: 0 24px 70px rgba(52, 54, 79, .11);
}

html { color-scheme: light; }
body,
.project-page,
.admin-page {
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 4%, rgba(125, 128, 164, .14), transparent 26rem),
        linear-gradient(120deg, rgba(67,70,96,.025) 1px, transparent 1px),
        linear-gradient(30deg, rgba(67,70,96,.025) 1px, transparent 1px),
        var(--paper);
    background-size: auto, 68px 68px, 68px 68px, auto;
    font-family: var(--font-ui);
}

::selection { color: #fff; background: var(--brand-mid); }
a, button { transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(98, 101, 125, .28);
    outline-offset: 3px;
}

/* Shared navigation and supplied logo */
.topbar,
.admin-page .topbar {
    min-height: 76px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(67, 70, 96, .97);
    box-shadow: 0 12px 36px rgba(35, 37, 58, .12);
    backdrop-filter: blur(18px);
}
.brand-lockup {
    min-width: 180px;
    gap: 13px;
    color: #fff;
}
.brand-logo {
    display: block;
    width: 156px;
    height: auto;
}
.brand-copy {
    padding-left: 13px;
    border-left: 1px solid rgba(255,255,255,.22);
}
.brand-copy small {
    display: block;
    color: rgba(255,255,255,.58);
    font: 700 8px/1.35 var(--font-display);
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}
.top-actions a,
.admin-page .top-actions a,
.top-actions .back-link {
    color: rgba(255,255,255,.72);
}
.top-actions a:hover,
.admin-page .top-actions a:hover { color: #fff; }
.top-actions .admin-link,
.top-actions .project-context,
.top-actions .project-context.missing,
.workflow-nav-locked,
.system-state,
.local-only {
    color: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.08);
}
.top-actions .project-context,
.top-actions .project-context.missing { color: #fff; background: rgba(255,255,255,.12); }
.system-state { border-color: rgba(255,255,255,.12); }
.system-state i { background: #d39aa0; }
.system-state.online i,
.service-badge.online i,
.local-only i {
    background: #7ee0b0;
    box-shadow: 0 0 0 4px rgba(126,224,176,.14);
}

/* Project workspace */
.project-main { padding-top: 30px; }
.project-hero {
    position: relative;
    min-height: 360px;
    padding: 62px;
    overflow: hidden;
    color: #fff;
    border: 0;
    border-radius: 30px;
    background:
        linear-gradient(132deg, rgba(255,255,255,.045), transparent 45%),
        var(--brand);
    box-shadow: var(--soft-shadow);
}
.project-hero::before {
    content: "";
    position: absolute;
    width: 410px;
    height: 290px;
    right: -45px;
    top: 28px;
    opacity: .075;
    background: url("mapflex-logo.svg") center / contain no-repeat;
    transform: rotate(-8deg);
    pointer-events: none;
}
.project-hero > * { position: relative; z-index: 1; }
.project-kicker,
.workspace-section__head p { color: var(--brand-accent); }
.project-hero h1 { max-width: 720px; color: #fff; }
.project-hero__copy p { color: rgba(255,255,255,.70); }
.project-hero .project-primary {
    color: var(--brand);
    background: #fff;
    box-shadow: 0 14px 34px rgba(25,27,44,.22);
}
.project-hero .project-primary:hover { transform: translateY(-2px); background: var(--brand-soft); }
.project-shell {
    margin-top: 20px;
    border-color: var(--line);
    background: rgba(255,255,255,.92);
    box-shadow: var(--soft-shadow);
}
.project-rail { border-color: var(--line); background: #f0f1f7; }
.rail-head button,
.project-item.active { color: var(--brand); border-color: rgba(67,70,96,.18); }
.project-item:hover,
.project-item.active { background: #fff; }
.project-item.active { box-shadow: 0 12px 30px rgba(52,54,79,.09); }
.project-item__status,
.workspace-empty > span,
.project-flow .done span,
.project-flow .current span,
.project-tool > span,
.project-tool em,
.text-button { color: var(--brand); }
.device-note i,
.project-item__status i { background: #7a7eaa; }
.workspace-empty { background: radial-gradient(circle at 85% 15%, rgba(185,187,213,.28), transparent 20rem); }
.workspace-header {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% -12%, rgba(185,187,213,.32), transparent 22rem),
        var(--brand-deep);
}
.workspace-header::after {
    content: "";
    position: absolute;
    right: 42px;
    bottom: -54px;
    width: 220px;
    height: 155px;
    opacity: .06;
    background: url("mapflex-logo.svg") center / contain no-repeat;
}
.project-status { color: #e3e4f2; background: rgba(185,187,213,.16); }
.complete-button { color: var(--brand-deep); background: #dfe0ee; }
.complete-button:hover { background: #fff; }
.project-primary,
.primary-action { color: #fff; background: var(--brand); box-shadow: 0 12px 28px rgba(67,70,96,.18); }
.project-primary:hover,
.primary-action:hover:not(:disabled) { background: var(--brand-deep); }
.project-flow { background: var(--brand-mist); }
.project-flow .current { background: #e9eaf3; }
.project-tool:hover { border-color: rgba(67,70,96,.26); box-shadow: 0 14px 34px rgba(52,54,79,.10); }
.project-tool.featured {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #535671, #34364f);
}
.project-tool.featured::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 106px;
    right: -22px;
    top: 20px;
    opacity: .08;
    background: url("mapflex-logo.svg") left center / auto 100% no-repeat;
}
.project-tool.featured > span,
.project-tool.featured em { color: #d9daea; }
.group-row:hover { background: var(--brand-mist); }

/* Tool catalog and analysis workspaces */
.hub-hero { min-height: 620px; }
.hero-kicker { color: var(--muted); }
.hero-kicker span { background: var(--brand); }
.hub-hero h1 em { color: var(--brand); }
.hub-hero__copy > p { color: var(--muted); }
.primary-cta { background: var(--brand); box-shadow: 0 12px 28px rgba(67,70,96,.22); }
.primary-cta:hover { background: var(--brand-deep); }
.secondary-cta { color: var(--brand); }
.status-console {
    background:
        radial-gradient(circle at 100% 0%, rgba(185,187,213,.22), transparent 17rem),
        var(--brand-deep);
    box-shadow: 0 34px 84px rgba(52,54,79,.22);
}
.console-feature > span,
.console-feature a b,
.featured-tool__index,
.featured-tool__copy > span { color: #d7d8e8; }
.featured-tool {
    background:
        linear-gradient(125deg, rgba(255,255,255,.045), transparent 54%),
        var(--brand);
}
.tool-card { box-shadow: 0 12px 34px rgba(52,54,79,.045); }
.tool-card:hover { border-color: rgba(67,70,96,.28); box-shadow: var(--soft-shadow); }
.tool-icon,
.tone-vision .tool-icon,
.tone-facility .tool-icon,
.tone-spatial .tool-icon,
.tone-point .tool-icon { color: var(--brand); background: var(--brand-soft); }
.tool-card footer b,
.usage-flow span { color: var(--brand); }
.tool-hero,
.accent-forest .tool-hero,
.accent-forest-light .tool-hero,
.accent-vision .tool-hero,
.accent-facility .tool-hero,
.accent-spatial .tool-hero,
.accent-spatial-light .tool-hero {
    position: relative;
    background-color: var(--brand);
    background-image:
        linear-gradient(120deg, rgba(255,255,255,.05), transparent 52%),
        radial-gradient(circle at 92% 0%, rgba(255,255,255,.15), transparent 19rem);
}
.tool-hero::before {
    content: "";
    position: absolute;
    right: 42px;
    bottom: 18px;
    width: 190px;
    height: 130px;
    opacity: .07;
    background: url("mapflex-logo.svg") left center / auto 100% no-repeat;
}
.tool-hero .overline { color: #d9daea; }
.tool-live-state { background: rgba(25,27,44,.28); }
.progress-panel,
.drop-zone { background: var(--brand-mist); }
.drop-zone:hover,
.drop-zone.is-dragging { border-color: var(--brand); background: #eceef6; }
.drop-mark,
.panel-number { color: var(--brand); }

/* Operations and storage */
.admin-page { color: var(--ink); }
.admin-main { padding-top: 54px; }
.admin-hero {
    margin-bottom: 28px;
    padding: 50px;
    color: #fff;
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 0%, rgba(185,187,213,.24), transparent 20rem),
        var(--brand);
    box-shadow: var(--soft-shadow);
}
.admin-hero .eyebrow { color: #d9daea; }
.admin-hero-copy > p { color: rgba(255,255,255,.68); }
.privacy-note { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.08); }
.privacy-note b { color: #fff; }
.privacy-note span { color: rgba(255,255,255,.62); }
.overview-card,
.admin-page .workspace { border-color: var(--line); box-shadow: 0 16px 46px rgba(52,54,79,.06); }
.overview-card:first-child { color: #fff; background: var(--brand); }
.overview-card:first-child > span,
.overview-card:first-child small { color: rgba(255,255,255,.62); }
.eyebrow,
.column code { color: var(--brand); }
.architecture-hero { background: linear-gradient(135deg, #51546f, #34364f) !important; }
.architecture-hero .overline { color: #d9daea !important; }
.flow-node.database,
.table-card header { background: var(--brand-deep) !important; }
.table-card:nth-child(2) header { background: #565b7c !important; }
.table-card:nth-child(3) header { background: #6e6179 !important; }
.table-card:nth-child(5) header { background: #4d5875 !important; }

/* Footer lockup */
.hub-footer .brand-lockup { padding:13px 15px; border-radius:13px; background:var(--brand); }
.hub-footer .brand-logo { width: 138px; }
.hub-footer .brand-copy small { color: rgba(255,255,255,.58); }
.hub-footer .brand-copy { border-color: rgba(255,255,255,.22); }

@media (max-width: 900px) {
    .brand-logo { width: 140px; }
    .brand-copy { display: none; }
    .project-hero { min-height: 0; padding: 48px 36px; gap: 38px; }
    .admin-hero { padding: 38px; }
}

@media (max-width: 640px) {
    .topbar,
    .admin-page .topbar { min-height: 68px; }
    .topbar { gap:10px; }
    .brand-lockup { min-width: auto; }
    .brand-logo { width: 120px; }
    .top-actions { gap:7px; }
    .workflow-nav-locked,
    .top-actions .admin-link,
    .admin-page .local-only { display:none; }
    .system-state {
        max-width:112px;
        padding:7px 9px;
        font-size:9px;
        line-height:1.2;
        white-space:nowrap;
    }
    .project-main { width: min(100% - 24px, 560px); padding-top: 16px; }
    .project-hero { padding: 38px 24px; border-radius: 22px; }
    .project-hero::before { width: 260px; right: -70px; opacity: .05; }
    .project-hero h1 { font-size: clamp(40px, 12vw, 57px); }
    .project-shell { border-radius: 20px; }
    .workspace-empty { padding: 48px 24px; }
    .admin-main { width: min(100% - 24px, 560px); padding-top: 22px; }
    .admin-hero { padding: 30px 22px; border-radius: 22px; }
    .hub-hero { padding-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}