:root { color-scheme:dark; --bg:#292929; --work:#252525; --header:#333; --text:#DDD; --text-dim:#AAA; --border:#454545; --accent-hover:#72AFE0; --danger:#E47777; --mono:Consolas,'Cascadia Mono',monospace; font:13px/1.4 'Segoe UI',Tahoma,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); height:100dvh; min-height:440px; display:flex; flex-direction:column; }
[hidden] { display:none !important; }
a,.link { color:#72AFE0; text-decoration:underline; }
a:hover { color:#9DC8EA; }
button,input,select { font:inherit; color:inherit; border:1px solid #555; border-radius:0; min-height:27px; padding:3px 8px; }
button { background:#383838; cursor:pointer; white-space:nowrap; }
button:hover { background:#444; border-color:#777; }
button:disabled { opacity:.5; cursor:default; }
input,select { background:#202020; }
input { min-width:0; }
input[readonly] { color:var(--text-dim); }
input:focus,select:focus,:focus-visible { outline:1px solid #72AFE0; outline-offset:-1px; box-shadow:none; }
button:focus:not(:focus-visible),tr:focus:not(:focus-visible) { outline:none; }
.appbar { flex:none; min-height:42px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:5px 8px; background:var(--header); border-bottom:1px solid var(--border); }
.brand { color:var(--text); font-size:21px; letter-spacing:-.5px; text-decoration:none; white-space:nowrap; }
.brand span { font-weight:300; }
.appbar nav { display:flex; }
.appbar nav a { padding:5px 10px; color:var(--text); text-decoration:none; }
.appbar nav .nav-current { background:#315B80; }
.app-tools { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.app-tools>a { text-decoration:none; color:var(--text-dim); }
.app-tools>a:hover { color:var(--text); text-decoration:underline; }
.app-tools .dev { color:#B39AD6; }
.role { padding:0 4px; color:var(--text-dim); border:1px solid var(--border); text-transform:uppercase; font-size:11px; }
.user { color:var(--text-dim); }
#page-content { flex:1; min-height:0; display:flex; flex-direction:column; }
.page-heading { flex:none; min-height:36px; padding:7px 10px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:#303030; border-bottom:1px solid #202020; }
h1 { font-size:14px; margin:0; font-weight:600; }
.section-heading { flex:none; padding:7px 10px; background:var(--header); border-bottom:1px solid var(--border); }
.workspace { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 8px 8px; }
.toolbar { flex:none; min-height:43px; padding:7px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.toolbar input[type=search] { width:300px; }
.filter { margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--text-dim); }
.filter input[type=search] { width:230px; }
.tablewrap { flex:1; min-height:190px; overflow:auto; border:1px solid var(--border); background:var(--work); scrollbar-gutter:stable; }
table { border-collapse:separate; border-spacing:0; table-layout:fixed; width:100%; min-width:620px; }
th { position:sticky; top:0; z-index:2; height:30px; padding:5px 8px; background:#383838; text-align:left; font-weight:400; border:solid var(--border); border-width:0 1px 1px 0; }
td { height:32px; padding:4px 8px; border:solid #393939; border-width:0 1px 1px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
th:last-child,td:last-child { border-right:0; }
tbody tr:nth-child(even)>td { background:#282828; }
tbody tr:hover>td { background:#303030; }
.project-name { color:var(--text); text-decoration:none; display:block; }
.project-name:hover { color:#72AFE0; text-decoration:underline; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.muted { color:var(--text-dim); }
.healthy { color:#91C957; }
.danger { color:var(--danger); }
.empty { color:var(--text-dim); padding:16px 10px; }
.error-strip { padding:8px 10px; margin:8px 0; border:1px solid #725252; background:#382B2B; color:var(--danger); white-space:normal; overflow-wrap:anywhere; }
.statusbar { flex:none; min-height:25px; padding:3px 8px; display:flex; flex-wrap:wrap; gap:12px; background:var(--header); border-top:1px solid var(--border); color:var(--text-dim); font-size:12px; }
.name-line { display:flex; align-items:center; gap:6px; }
.level-1 { padding-left:24px; }
.level-2 { padding-left:48px; }
.name-text { overflow:hidden; text-overflow:ellipsis; }
.object-icon { width:16px; height:16px; flex:none; color:#BBB; }
.toggle-space { width:20px; flex:none; }
/* The launcher's project tree (2026-11-13): a + / - with no box. */
.tree-toggle,.tree-toggle:hover { display:inline-flex; align-items:center; justify-content:center; width:20px; height:22px; min-height:22px; padding:0; flex:none; border:0; background:transparent; }
.tree-toggle svg { width:15px; height:15px; stroke:#D0D0D0; stroke-width:1; fill:none; shape-rendering:crispEdges; }
.tree-toggle[aria-expanded=true] .plus { display:none; }
/* No line under an ordinary row; records alternate within their parent
   (data-alt, set by the page); a film is a full-width band with a line above
   it, darker after another film; a group (Components, Layouts) is a darker
   band, with a line above only after another group. */
.hierarchy-table td { border-bottom-width:0; height:26px; padding-top:2px; padding-bottom:2px; }
.hierarchy-table tbody tr:nth-child(even)>td { background:var(--work); }
.hierarchy-table tbody tr[data-alt]>td { background:#292929; }
.hierarchy-table tbody tr[data-entity]:hover>td { background:#363636; }
.hierarchy-table tbody tr[data-kind=film]>td { background:#494949; box-shadow:inset 0 1px 0 #454545; height:26px; }
.hierarchy-table tbody tr[data-kind=film][data-after-film]>td { box-shadow:inset 0 1px 0 #303030; }
.hierarchy-table tbody tr[data-kind=film]:first-child>td { box-shadow:none; }
.hierarchy-table tbody tr[data-kind=film]:hover>td { background:#535353; }
tr[data-kind=film] .name-text { font-weight:600; }
.hierarchy-table tbody tr.asset-heading>td { color:var(--text-dim); background:#323232; height:26px; }
.hierarchy-table tbody tr.asset-heading[data-after-group]>td { box-shadow:inset 0 1px 0 #222222; }
.hierarchy-table tbody tr[aria-selected=true]>td,.hierarchy-table tbody tr[aria-selected=true]:hover>td { background:#315B80; }
tr[aria-selected=true] .object-icon { color:var(--text); }
#selection-actions,#child-actions { display:flex; align-items:center; gap:6px; }
.close-selection { width:26px; min-height:26px; padding:0; font-size:18px; border-color:transparent; background:none; color:var(--text-dim); }
.more-wrap { position:relative; }
#more-actions { width:28px; padding:0; }
#entity-menu { position:absolute; top:100%; left:0; min-width:130px; padding:3px; border:1px solid #666; background:#333; z-index:8; }
#entity-menu button { width:100%; border:0; text-align:left; }
.modal-overlay { position:fixed; inset:0; z-index:30; background:#0009; display:none; align-items:center; justify-content:center; padding:12px; }
.modal-overlay.open { display:flex; }
.modal-card { width:520px; max-width:100%; max-height:calc(100dvh - 24px); display:flex; flex-direction:column; border:1px solid #666; background:var(--work); }
.modal-header,.modal-footer { display:flex; gap:8px; align-items:center; padding:8px 10px; background:var(--header); }
.modal-header { border-bottom:1px solid var(--border); }
.modal-header h3 { margin:0; font-size:14px; font-weight:600; }
.modal-close { margin-left:auto; width:26px; padding:0; font-size:18px; border:0; background:none; }
.modal-body { padding:12px; overflow:auto; }
.modal-footer { border-top:1px solid var(--border); }
.form-group { position:relative; margin-bottom:10px; }
.form-label,.form-group label { display:block; color:var(--text-dim); margin-bottom:4px; }
.form-group input,.form-group select { display:block; width:100%; }
.form-hint { display:none; }
#add-entity-modal .form-group input { color:var(--text) !important; }
#add-entity-modal input:disabled { color:var(--text-dim) !important; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.account-workspace { flex:1; min-height:0; overflow:auto; padding:clamp(24px,8vh,80px) 12px 32px; }
.account-form { width:360px; max-width:100%; margin:0 auto; }
.card-title { font-size:17px; font-weight:600; padding:0 0 10px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.card-sub { margin-bottom:12px; color:var(--text-dim); }
.account-form input { min-height:32px; }
.account-form .form-group:has(.eye) input { padding-right:34px; }
.eye { position:absolute; bottom:0; right:0; width:32px; height:32px; padding:6px; background:none; border:0; color:var(--text-dim); }
.eye svg { width:18px; height:18px; }
.login-btn { display:block; width:100%; min-height:32px; margin-top:14px; background:#383838; border:1px solid #666; text-align:center; color:var(--text); text-decoration:none; padding:6px 10px; }
.login-btn:hover { color:var(--text); background:#444; }
.login-error,.field-error { color:var(--danger); margin:10px 0; overflow-wrap:anywhere; }
.login-error:empty { display:none; }
.card-links { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.card-foot { margin-top:12px; color:var(--text-dim); font-size:12px; }
.notice { margin:0 0 12px; line-height:1.5; }
.notice strong { font-weight:400; }
.account-email { color:var(--text-dim); margin-bottom:16px; overflow-wrap:anywhere; }
@media(max-width:700px) { .app-tools { gap:8px; } .appbar { gap:6px 10px; } .app-tools .user,.app-tools .role { display:none; } .brand { font-size:18px; } .filter { margin-left:0; } .toolbar input[type=search] { width:min(280px,65vw); } .page-heading { gap:6px 10px; } .statusbar { gap:4px 10px; } }
@media(max-width:420px) { .app-tools { width:100%; } .form-row { grid-template-columns:1fr; gap:0; } }