/* BSN tokens, same values as the landing styles.css */
:root {
    --ink: #0E1A2D;
    --star: #4F7CFF;
    --star-lo: #2D5BDB;
    --g50: #F4F6FA;
    --g100: #E8ECF4;
    --g200: #D2D9E6;
    --g400: #7B89A7;
    --g500: #54627F;
    --paper: #FAFBFD;
    --f-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --gutter: 24px;
    --control: 36px;
    --icon-btn: 32px;
    --t: 160ms cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font: 400 14px/1.45 var(--f-sans);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
ul { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; border-radius: 6px; }
.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.icon { width: 16px; height: 16px; flex: none; }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--g500); font-size: 12px; }
.mono { font-family: var(--f-sans); font-size: 12px; color: var(--g500); }

.mark {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px; border-radius: 8px;
    background: #051c2c; color: #fff;
}
.search {
    display: flex; align-items: center; gap: 8px;
    width: 22.5rem; max-width: 100%; height: var(--control); padding: 0 14px;
    border: 1px solid var(--g200); border-radius: 999px; background: #fff;
    color: var(--g400); transition: border-color var(--t);
}
.search:focus-within { border-color: var(--star); }
.search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: none;
    font: 400 13px var(--f-sans); color: var(--ink);
}

button.icon-btn { border: 0; background: none; cursor: pointer; }

/* Sidebar (BlueRoom sidebar recipe): icon axis at 32px in both states */
:root { --sb-open: 220px; --sb-closed: 4rem; --sb: var(--sb-open); --sb-t: 200ms cubic-bezier(.2, .8, .2, 1); }
html.sb-collapsed { --sb: var(--sb-closed); }
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 5;
    display: flex; flex-direction: column; width: var(--sb);
    padding-left: .5rem; padding-right: calc(.5rem - 1px);
    background: var(--g50); border-right: 1px solid var(--g100);
    transition: width var(--sb-t);
}
.sb-label { white-space: nowrap; transition: opacity 160ms cubic-bezier(.2, .8, .2, 1); }
html.sb-collapsed .sidebar .sb-label { opacity: 0; pointer-events: none; }
.sb-brand {
    position: relative; display: flex; align-items: center; gap: 8px;
    height: 3.5rem; padding-inline: .625rem; margin-bottom: .5rem;
    border-bottom: 1px solid var(--g100); overflow: hidden;
}
.sb-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-logo .mark { transition: opacity 160ms, transform 160ms; }
.sb-name { font-size: 15px; font-weight: 600; }
.sb-toggle {
    display: grid; place-items: center; flex: none; margin-left: auto;
    width: 28px; height: 28px; border: 0; border-radius: 8px; background: none;
    color: var(--g500); cursor: pointer; transition: opacity 160ms, transform 160ms, background var(--t);
}
.sb-toggle:hover { background: var(--g100); color: var(--ink); }
/* Collapsed: the toggle takes the logo's place while the sidebar is hovered or the toggle has keyboard focus. */
html.sb-collapsed .sb-toggle { position: absolute; left: .625rem; opacity: 0; transform: scale(.9); pointer-events: none; }
html.sb-collapsed .sidebar:hover .sb-toggle,
html.sb-collapsed .sb-toggle:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
html.sb-collapsed .sidebar:hover .sb-logo .mark,
html.sb-collapsed .sb-brand:has(.sb-toggle:focus-visible) .sb-logo .mark { opacity: 0; transform: scale(.9); }

.sb-nav {
    position: relative; flex: 0 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: .25rem;
    margin-inline: .375rem; overflow-x: hidden; overflow-y: auto;
}
.sb-item {
    position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem;
    width: 100%; height: 2.25rem; padding-inline: .625rem; border-radius: .5rem;
    font-size: .8125rem; line-height: 1.25; color: rgba(14, 26, 45, .62);
}
.sb-item .icon { color: rgba(14, 26, 45, .78); }
.sb-item:hover, .sb-item[aria-current="page"], .sb-item:hover .icon, .sb-item[aria-current="page"] .icon { color: var(--ink); }
.sb-item[aria-current="page"] { font-weight: 550; }
.sb-highlight {
    position: absolute; inset: 0 0 auto 0; border-radius: .5rem;
    background: rgba(14, 26, 45, .085); opacity: 0; pointer-events: none;
}
.sb-highlight.is-ready { transition: transform 160ms cubic-bezier(.2, .8, .2, 1), height 160ms, opacity 160ms; }

.sb-footer { position: relative; margin-top: auto; padding-block: .5rem; border-top: 1px solid var(--g100); }
.sb-account {
    display: flex; align-items: center; gap: .5rem;
    width: calc(100% - .25rem); min-height: 2.75rem; margin-left: .125rem; padding-inline: .375rem;
    border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; overflow: hidden;
    text-align: left; transition: background var(--t);
}
.sb-account:hover, .sb-account[aria-expanded="true"] { background: rgba(14, 26, 45, .06); }
.avatar {
    display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 8px;
    background: var(--g100); color: var(--g500); font-size: 13px; font-weight: 600;
}
.sb-account__name { flex: 1; font-size: .8125rem; font-weight: 600; }
.sb-account__more { display: grid; color: var(--g500); }

.menu {
    position: absolute; left: .5rem; bottom: calc(100% - .25rem); z-index: 10;
    width: 240px; max-width: calc(100vw - 16px); padding: 6px;
    background: #fff; border: 1px solid var(--g100); border-radius: 20px;
    box-shadow: 0 8px 24px rgba(14, 26, 45, .14);
}
.menu__email { padding: 8px 16px 6px; font-size: 12px; color: var(--g500); }
.menu__item {
    display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 16px;
    border: 0; border-radius: 12px; background: none; font-size: 13px; color: var(--ink); cursor: pointer;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--g100); outline: none; }

.sb-tip {
    position: fixed; z-index: 20; padding: 10px 16px; border-radius: 12px;
    background: #fff; border: 1px solid var(--g100); box-shadow: 0 8px 24px rgba(14, 26, 45, .12);
    font-size: 13px; line-height: 1.3; white-space: nowrap; pointer-events: none;
}

.shell { margin-left: var(--sb); transition: margin-left var(--sb-t); }
.toolbar {
    display: flex; align-items: center; gap: 8px;
    max-width: 1200px; margin: 0 auto; padding: 20px var(--gutter) 0;
}

main { max-width: 1200px; margin: 0 auto; padding: 12px var(--gutter) 64px; }
h3 { font: 600 14px/1.3 var(--f-sans); margin-bottom: 8px; }

/* Landing table */
.table-wrap { overflow-x: auto; }
.grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.grid col.w-path { width: 230px; }
.grid col.w-status { width: 112px; }
.grid col.w-copy { width: 140px; }
.grid col.w-date { width: 112px; }
.grid col.w-actions { width: 84px; }
.grid th {
    height: 40px; padding: 0 8px; text-align: left;
    font-size: 12px; font-weight: 600; color: var(--g500);
    border-bottom: 1px solid var(--g200);
}
.grid td { height: 60px; padding: 8px; vertical-align: middle; border-bottom: 1px solid var(--g100); }
.grid tbody tr { transition: background var(--t); }
.grid tbody tr:hover { background: var(--g50); }
.center, .c-status { text-align: center; }
.c-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.c-path, .c-date { color: var(--g500); font-size: 13px; }
.c-copy { white-space: nowrap; }
.c-copy .text-link + .text-link { margin-left: 10px; }
.c-actions { text-align: right; white-space: nowrap; }
.thumb {
    display: grid; place-items: center; flex: none;
    width: 76px; height: 40px; border-radius: 6px; overflow: hidden;
    background: var(--ink); color: var(--star);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.stack { display: flex; flex-direction: column; min-width: 0; }
.title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.title:hover { color: var(--star-lo); }
.mono.ellipsis { display: block; }

.chip {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
    border-radius: 999px; font-size: 12px; font-weight: 500;
    background: var(--g100); color: var(--g500);
}
.chip--live { background: #E3F4EA; color: #1D7A45; }

.text-link {
    font: 500 13px var(--f-sans); color: var(--star-lo);
    background: none; border: 0; cursor: pointer;
}
.text-link:hover { text-decoration: underline; }

/* Flat icon actions with hover/focus tooltip */
.icon-btn {
    position: relative; display: inline-grid; place-items: center; vertical-align: middle;
    width: var(--icon-btn); height: var(--icon-btn); border-radius: 8px;
    color: var(--g500); transition: background var(--t), color var(--t);
}
.icon-btn:hover { background: var(--g100); color: var(--ink); }
.icon-btn--empty { pointer-events: none; }
.icon-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 3;
    padding: 5px 9px; border-radius: 8px; white-space: nowrap;
    background: var(--ink); color: #fff; font-size: 12px; line-height: 1.4;
    box-shadow: 0 8px 24px rgba(14, 26, 45, .18);
    opacity: 0; pointer-events: none; transition: opacity 120ms;
}
.icon-btn:hover::after, .icon-btn:focus-visible::after { opacity: 1; }

/* Material */
.group { padding-top: 16px; }
.docs { border-top: 1px solid var(--g100); }
.doc {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px;
    border-bottom: 1px solid var(--g100); color: var(--g500);
}
.doc .title { flex: 1; color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
.tile { min-width: 0; }
.tile__img {
    display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 14px;
    border-radius: 12px; background: #fff; border: 1px solid var(--g100);
    transition: border-color var(--t);
}
.tile__img:hover { border-color: var(--star); }
.tile__img.tile--dark { background: var(--ink); border-color: var(--ink); }
.tile__img { overflow: hidden; }
.tile__img img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.tile__row { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.tile__name { flex: 1; font-size: 12px; color: var(--g500); }
.empty { padding: 24px 0; color: var(--g500); }

/* Login: dark illustrated panel + flat form (login recipe) */
body.bare { background: #fff; }
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; max-width: none; padding: 0; }
.login__art {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    padding: 40px 48px; background: var(--ink); color: #fff; overflow: hidden;
}
.login__logo { width: 168px; height: auto; }
.login__scene { width: min(440px, 100%); margin: 0 auto; }
.login__scene rect { fill: #15243C; stroke: #26314A; }
.login__scene .line { fill: #7FA0FF; stroke: none; }
.login__scene .dim { fill: #3A4660; }
.login__scene .block { fill: #1E3252; stroke: none; }
.login__scene .glow { fill: var(--star); transform-box: fill-box; }
.drift { animation: drift 16s ease-in-out infinite alternate; }
.drift--b { animation-delay: -8s; }
.glow { animation: light 8s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes light { from { opacity: .55; } to { opacity: 1; } }
.is-paused .drift, .is-paused .glow { animation-play-state: paused; }
.login__claim { font: 500 26px/1.3 var(--f-sans); }
.login__claim span { color: var(--g400); }
.login__desc { margin-top: 12px; max-width: 440px; color: #A8B3CF; font-size: 15px; line-height: 1.55; }
.login__motion {
    position: absolute; right: 24px; bottom: 24px;
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid #26314A; background: transparent; color: #A8B3CF; cursor: pointer;
}
.login__motion:hover { color: #fff; border-color: var(--g500); }
.login__panel { display: grid; place-items: center; padding: 40px 28px; }
.login__form { display: flex; flex-direction: column; width: 100%; max-width: 400px; animation: enter 420ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.login__form h1 { font: 600 26px/1.25 var(--f-sans); margin-bottom: 28px; }
.login__form label { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.login__form input {
    height: 48px; padding: 0 14px; margin-bottom: 18px;
    border: 1px solid var(--g200); border-radius: 8px; background: #fff;
    font: 400 15px var(--f-sans); color: var(--ink);
}
.login__form input:focus { outline: none; border-color: var(--star); box-shadow: 0 0 0 3px rgba(79, 124, 255, .18); }
.login__error { min-height: 20px; margin: -6px 0 12px; font-size: 13px; color: #B42318; }
.login__submit {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px; padding: 0 18px; border: 0; border-radius: 8px;
    background: var(--ink); color: #fff; font: 500 15px var(--f-sans); cursor: pointer;
    transition: background var(--t);
}
.login__submit:hover { background: #15243C; }
.login__submit:disabled { opacity: .7; cursor: progress; }

@media (max-width: 680px) {
    .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .login__art { height: 128px; padding: 20px 28px; }
    .login__logo { width: 132px; }
    .login__scene { position: absolute; right: -40px; top: 8px; width: 240px; opacity: .6; }
    .login__copy { display: none; }
    .login__motion { right: 12px; bottom: 12px; }
    .login__panel { place-items: start center; padding: 32px 28px; }
    .login__form input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .drift, .glow, .login__form { animation: none; }
    .login__motion { display: none; }
}

@media (max-width: 760px) {
    :root { --gutter: 16px; --icon-btn: 44px; }
    /* Mobile: the sidebar becomes a bottom tab bar */
    .sidebar {
        inset: auto 0 0 0; width: auto; height: 64px; flex-direction: row; align-items: center;
        padding: 0 8px env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--g100);
    }
    .sb-brand, .sb-highlight, .sb-tip { display: none; }
    .sb-nav { flex: 1; flex-direction: row; margin: 0; overflow: visible; }
    .sb-item { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 52px; padding: 0; font-size: 11px; }
    .sb-item[aria-current="page"] { background: rgba(14, 26, 45, .085); }
    html.sb-collapsed .sidebar .sb-label { opacity: 1; pointer-events: auto; }
    .sb-footer { margin: 0; padding: 0 0 0 4px; border: 0; }
    .sb-account { width: 52px; min-height: 52px; margin: 0; justify-content: center; }
    .sb-account .sb-label, html.sb-collapsed .sidebar .sb-account .sb-label { display: none; }
    .menu { left: auto; right: 0; bottom: calc(100% + 8px); }
    .shell { margin-left: 0; padding-bottom: 72px; }
    .toolbar { padding-top: 12px; }
    .search { width: 100%; height: 44px; }
    .search input { font-size: 16px; }
    .grid thead { display: none; }
    .grid, .grid tbody { display: block; }
    .grid tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
        gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--g100);
    }
    .grid td { display: block; height: auto; padding: 0; border: 0; }
    .grid td:first-child { grid-column: 1 / -1; }
    .c-path { display: none !important; }
    .c-status, .c-copy, .c-date { grid-column: 1; text-align: left; }
    .c-actions { grid-column: 2; grid-row: 2 / span 3; }
    .icon-btn--empty { display: none; }
    .text-link { display: inline-block; min-height: 32px; line-height: 32px; }
    .doc { height: 52px; }
    .gallery { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}