@charset 'UTF-8';

/*

    Variables (values follow the original admin screen: header #172033, sidebar #1e2940, panel border #dfe4ec)

*/

:root {
	--main-color: #24304a;
	--main-dark-color: #172033;
	--main-light-color: #314264;
	--accent-color: #5164e8;
	--text-color: #1f2937;
	--muted-color: #667085;
	--border-color: #dfe4ec;
	--line-color: #e8edf3;
	--background-color: #f3f5f8;
	--panel-color: #ffffff;
	--link-color: #1f5fbf;
	--focus-color: #9db4e4;
	--success-color: #1f8f4e;
	--success-bg-color: #e6f6ec;
	--warning-color: #d97706;
	--warning-bg-color: #fff4e0;
	--danger-color: #c0392b;
	--danger-bg-color: #fdecea;
	--info-bg-color: #eef4fb;
	--active-bg-color: #314264;
	--active-border-color: #c7d0de;
	--sidebar-width: 240px;
	--header-height: 93px;
	--panel-shadow: 0 4px 14px rgba(31, 41, 55, 0.05);
}

/*

    Layout

*/

body.app { min-height: 100vh;}
div.body { display: flex; min-height: calc(100vh - var(--header-height)); position: relative;}

/*  header  */
header.global { color: #ffffff; background: var(--main-dark-color); position: sticky; top: 0; z-index: 30;}
header.global div.container { display: flex; align-items: center; gap: 2rem; min-height: var(--header-height); padding: 1.4rem 1.6rem;}
header.global div.sitetop { flex: 1 1 auto; min-width: 0; line-height: 1.3;}
header.global div.sitetop p.service { color: #aebbd1; letter-spacing: 0.14em; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
header.global div.sitetop h1 { font-size: 2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
header.global div.account { display: none; flex-shrink: 0; align-items: center; gap: 1.2rem;}
header.global div.account div.login { display: flex; flex-direction: column; gap: 0.2rem; background: #1a2438; border-radius: 8px; padding: 0.8rem 1.4rem; text-align: left;}
header.global div.account div.login span.name { color: #ffffff; font-size: 1.4rem; font-weight: 700;}
header.global div.account div.login span.role { color: #aebbd1; font-size: 1.2rem;}
header.global div.account form.logout { margin: 0;}
header.global div.account form.logout button { color: #ffffff; background: transparent; border: 1px #44516a solid; border-radius: 8px; padding: 0.9rem 1.5rem; font-size: 1.4rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background 0.2s;}
header.global div.account form.logout button:hover { background: #24304a;}
header.global div.account span.badge { display: inline-block; background: transparent; color: #ffffff; border: 1px #44516a solid; border-radius: 8px; padding: 0.9rem 1.5rem; font-size: 1.4rem; line-height: 1.2; white-space: nowrap;}
header.global div.account span.current { display: inline-block; background: #24304a; border-radius: 8px; padding: 0.9rem 1.5rem; font-size: 1.4rem; line-height: 1.2; white-space: nowrap;}

/*  menubutton  */
button.menubutton { width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 8px; flex-shrink: 0;}
button.menubutton span { display: block; width: 22px; height: 2px; background: #ffffff; border-radius: 2px; transition: all 0.2s;}
body.menu-open button.menubutton span:nth-child(1) { transform: translateY(7px) rotate(45deg);}
body.menu-open button.menubutton span:nth-child(2) { opacity: 0;}
body.menu-open button.menubutton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg);}

/*  sidebar  */
nav.global { position: fixed; top: var(--header-height); left: 0; bottom: 0; width: var(--sidebar-width); background: #1e2940; border-right: 1px #2f3d57 solid; padding: 2.4rem 1.6rem; overflow-y: auto; transform: translateX(-100%); transition: transform 0.2s; z-index: 25; display: flex; flex-direction: column;}
body.menu-open nav.global { transform: translateX(0); box-shadow: 2px 0 12px rgba(31, 41, 55, 0.3);}
nav.global p.group { font-size: 1.1rem; font-weight: 700; color: #8a9bb8; letter-spacing: 0.06em; margin: 1.6rem 0 0.4rem 1.6rem;}
nav.global ul.menu { display: flex; flex-direction: column; gap: 0.8rem;}
nav.global ul.menu a, nav.global ul.menu button.menuitem { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 1.4rem 1.6rem; border: none; border-radius: 10px; color: #c8d2e4; font-size: 1.5rem; line-height: 1.4; text-align: left; transition: background 0.2s, color 0.2s;}
nav.global ul.menu a:hover, nav.global ul.menu button.menuitem:hover { color: #ffffff; background: #283552; opacity: 1;}
nav.global ul.menu a.active { color: #ffffff; background: var(--active-bg-color); font-weight: 700;}
nav.global ul.menu svg.icon { display: none;}
nav.global ul.menu span.text { flex: 1 1 auto;}
nav.global ul.menu span.badge.addon { font-size: 1rem; background: #fff4e0; color: #b45309; border-radius: 999px; padding: 0.1em 0.7em;}
nav.global ul.menu.bottom { margin-top: auto; padding-top: 1.2rem; border-top: 1px #2f3d57 solid;}
nav.global ul.menu a.external svg.arrow { width: 14px; height: 14px; opacity: 0.6;}
div.overlay { position: fixed; inset: var(--header-height) 0 0 0; background: rgba(31, 41, 55, 0.4); z-index: 20; display: none;}
body.menu-open div.overlay { display: block;}

/*  main  */
main.content { flex: 1 1 auto; min-width: 0; padding: 1.6rem;}
main.content div.page { max-width: 1400px; margin: 0 auto;}

/*  plain (login)  */
main.plain { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.4rem 1.6rem;}
main.plain div.card { width: 100%; max-width: 440px; background: var(--panel-color); border: 1px var(--border-color) solid; border-radius: 16px; padding: 3.2rem 2.4rem; box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);}
main.plain div.sitetop { text-align: center; margin-bottom: 2.4rem;}
main.plain div.sitetop img.logo { width: 72px; height: 72px; margin-bottom: 0.8rem;}
main.plain div.sitetop p.brand { font-size: 1.8rem; font-weight: 700; color: var(--main-color);}
main.plain div.sitetop p.service { font-size: 1.3rem; color: var(--muted-color);}
main.plain h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1.6rem; text-align: center;}
main.plain p.lead { font-size: 1.4rem; color: var(--muted-color); margin-bottom: 1.6rem;}

/*

    Page parts

*/

section.heading { margin-bottom: 2.4rem;}
section.heading.row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.6rem;}
section.heading h2 { font-size: 2.2rem; font-weight: 700; line-height: 1.3; color: var(--main-dark-color);}
section.heading h2 small.code { font-size: 1.4rem; font-weight: 400; color: var(--muted-color); margin-left: 0.6em;}
section.heading p.lead { color: var(--muted-color); margin-top: 0.8rem; font-size: 1.5rem;}
section.heading div.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0;}

section.panel { background: var(--panel-color); border: 1px var(--border-color) solid; border-radius: 14px; padding: 2.2rem; margin-bottom: 2rem; box-shadow: var(--panel-shadow);}
section.panel.narrow { max-width: 680px;}
section.panel > h3 { font-size: 1.8rem; font-weight: 700; color: var(--main-dark-color); margin-bottom: 1.6rem;}
section.panel > h3 span.count { font-size: 1.4rem; font-weight: 400; color: var(--muted-color); margin-left: 0.6em;}
section.panel div.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.6rem;}
section.panel div.panel-head h3 { font-size: 1.8rem; font-weight: 700; color: var(--main-dark-color);}

p.message { padding: 1.2rem 1.6rem; border-radius: 10px; margin-bottom: 1.6rem; border: 1px solid transparent; font-size: 1.5rem;}
p.message.success { background: var(--success-bg-color); color: var(--success-color); border-color: #bfe6cc;}
p.message.error { background: var(--danger-bg-color); color: var(--danger-color); border-color: #f3c2bd;}
p.message.info { background: var(--info-bg-color); color: var(--main-color); border-color: var(--active-border-color);}
p.message.warning { background: var(--warning-bg-color); color: #92400e; border-color: #f6d9a8;}
ul.errors { background: var(--danger-bg-color); color: var(--danger-color); border: 1px #f3c2bd solid; border-radius: 10px; padding: 1.2rem 1.6rem 1.2rem 3rem; margin-bottom: 1.6rem; list-style: disc; font-size: 1.5rem;}
p.hint, p.notes { font-size: 1.4rem; color: var(--muted-color); margin-top: 0.6rem; line-height: 1.5;}
p.empty, td.empty { color: var(--muted-color); text-align: center; padding: 2.4rem 1rem;}

nav.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 2px var(--border-color) solid; margin-bottom: 2rem; overflow-x: auto;}
nav.tabs a { display: inline-block; padding: 1rem 1.6rem; color: var(--muted-color); font-size: 1.5rem; font-weight: 700; border-bottom: 3px transparent solid; margin-bottom: -2px; white-space: nowrap;}
nav.tabs a.active { color: var(--main-dark-color); border-bottom-color: var(--main-color);}
nav.tabs a span.badge { margin-left: 0.4em;}

/*  labels and tags  */
span.label { display: inline-block; font-size: 1.3rem; font-weight: 700; line-height: 1; padding: 0.45em 0.8em; border-radius: 999px; background: #e5e7eb; color: #374151; white-space: nowrap;}
span.label.requirement { background: var(--danger-color); color: #ffffff; font-weight: 400; font-size: 1.2rem; padding: 0.3em 0.6em; margin-left: 0.4em;}
span.label.optional { background: #e5e7eb; color: #4b5563; font-weight: 400; font-size: 1.2rem; padding: 0.3em 0.6em; margin-left: 0.4em;}
span.label.status.active, span.label.ok, span.label.db.ok { background: var(--success-bg-color); color: var(--success-color);}
span.label.status.paused, span.label.status.suspended, span.label.ng, span.label.db.error { background: var(--danger-bg-color); color: var(--danger-color);}
span.label.status.preparing, span.label.status.pending, span.label.db.pending, span.label.db.none { background: var(--warning-bg-color); color: #92400e;}
span.label.role { background: var(--info-bg-color); color: var(--main-color);}
span.label.role.admin { background: #e0e7ff; color: #3730a3;}
span.label.role.editor { background: var(--info-bg-color); color: var(--main-color);}
span.label.role.viewer { background: #e5e7eb; color: #374151;}
span.tag { display: inline-block; font-size: 1.3rem; background: var(--info-bg-color); color: var(--main-color); border: 1px var(--active-border-color) solid; border-radius: 6px; padding: 0.2em 0.6em; margin: 0.1em 0.2em 0.1em 0; white-space: nowrap;}
span.tag.light { background: #f5f7fa; color: #475467; border-color: var(--border-color);}
span.tag.more { background: #e5e7eb; color: #374151; border-color: #d1d5db;}
span.badge { display: inline-block; font-size: 1.2rem; background: var(--accent-color); color: #ffffff; border-radius: 999px; padding: 0.1em 0.7em; line-height: 1.5;}
ul.tags { display: flex; flex-wrap: wrap; gap: 0.4rem;}

/*  buttons (primary = dark navy, secondary = white with border)  */
a.button, button.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 45px; padding: 1rem 1.8rem; border: 1px transparent solid; border-radius: 10px; font-size: 1.5rem; font-weight: 700; line-height: 1.2; cursor: pointer; background: #ffffff; color: var(--main-dark-color); border-color: var(--active-border-color); transition: background 0.2s, border-color 0.2s, opacity 0.1s; white-space: nowrap;}
a.button:hover, button.button:hover { opacity: 1; background: #f3f5f8;}
a.button.primary, button.button.primary { background: var(--main-color); color: #ffffff; border-color: var(--main-color);}
a.button.primary:hover, button.button.primary:hover { background: var(--main-light-color); border-color: var(--main-light-color);}
a.button.secondary, button.button.secondary, a.button.light, button.button.light { background: #ffffff; color: var(--main-dark-color); border-color: var(--active-border-color);}
a.button.warning, button.button.warning { background: var(--warning-bg-color); color: #92400e; border-color: #f6d9a8;}
a.button.danger, button.button.danger { background: var(--danger-bg-color); color: var(--danger-color); border-color: #f3c2bd;}
a.button.success, button.button.success { background: var(--success-color); color: #ffffff; border-color: var(--success-color);}
a.button.small, button.button.small { min-height: 38px; padding: 0.8rem 1.4rem; font-size: 1.4rem; border-radius: 10px;}
a.button.xsmall, button.button.xsmall { min-height: 30px; padding: 0.3em 1em; font-size: 1.3rem; border-radius: 8px;}
a.button.large, button.button.large { min-height: 48px; padding: 1rem 2.4rem; font-size: 1.6rem;}
a.button.block, button.button.block { display: flex; width: 100%;}
a.button.back::before { content: '‹'; font-size: 1.2em; line-height: 0;}
button.button:disabled, a.button.disabled { opacity: 0.5; cursor: not-allowed;}
a.button.muted, button.button.muted { opacity: 0.6;}
div.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem;}
div.actions.right { justify-content: flex-end;}
form.inline { display: inline;}
div.operations { display: flex; flex-wrap: wrap; gap: 0.6rem;}
td.operations { white-space: nowrap;}
td.operations a.button, td.operations button.button { margin: 0.1em 0;}

/*  forms  */
form.edit div.field { margin-bottom: 1.8rem;}
form.edit div.field > label, div.field > label { display: block; font-weight: 700; font-size: 1.4rem; margin-bottom: 0.6rem; color: #344054;}
form.edit div.field.invalid input, form.edit div.field.invalid select, form.edit div.field.invalid textarea { border-color: var(--danger-color); background: #fff8f7;}
form.edit div.field p.error { color: var(--danger-color); font-size: 1.3rem; margin-top: 0.4rem;}
div.fields { display: grid; grid-template-columns: 1fr; gap: 0 2rem;}
div.fields div.field.wide { grid-column: 1 / -1;}
label.check { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 400; font-size: 1.5rem; cursor: pointer; margin-right: 1.2em;}
label.check input { margin: 0;}
ul.checks li { padding: 1rem 0; border-bottom: 1px var(--line-color) solid;}
ul.checks li label { display: flex; align-items: flex-start; gap: 1rem; cursor: pointer;}
ul.checks li label.disabled { opacity: 0.5; cursor: not-allowed;}
ul.checks li label input { margin-top: 0.4em;}
ul.checks li span.name { font-weight: 700; display: block;}
ul.checks li span.description { font-size: 1.4rem; color: var(--muted-color); display: block;}
div.radios { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;}
div.radios label { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer;}
form.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem 1.4rem; margin-bottom: 2rem;}
form.toolbar div.field { flex: 1 1 180px; margin: 0;}
form.toolbar div.field.submit { flex: 0 0 auto;}
form.toolbar div.field.lead { flex: 0 0 auto;}
form.toolbar div.field label { display: block; font-size: 1.4rem; font-weight: 700; color: #344054; margin-bottom: 0.6rem;}
div.field.submit span.result { display: block; font-size: 1.3rem; margin-top: 0.6rem;}
div.field.submit span.result.ok { color: var(--success-color);}
div.field.submit span.result.ng { color: var(--danger-color);}
div.field div.with-button { display: flex; gap: 0.6rem;}
div.field div.with-button input { flex: 1 1 auto;}
input.short, select.short { width: auto; min-width: 9em;}
input.number { text-align: right;}
dl.detail { display: grid; grid-template-columns: 1fr; gap: 0.2rem 1.6rem; font-size: 1.5rem;}
dl.detail dt { font-weight: 700; color: #344054; padding-top: 0.6rem;}
dl.detail dd { padding-bottom: 0.6rem; border-bottom: 1px var(--line-color) solid; min-height: 1.6em; word-break: break-all;}

/*  tables  */
div.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px var(--border-color) solid; border-radius: 12px;}
table.list { font-size: 1.6rem; min-width: 100%;}
table.list th { background: #f8fafc; color: #475467; font-weight: 700; font-size: 1.4rem; padding: 1.2rem 1.4rem; border-bottom: 1px var(--line-color) solid; white-space: nowrap;}
table.list td { padding: 1.2rem 1.4rem; border-bottom: 1px var(--line-color) solid; vertical-align: middle;}
table.list th + th, table.list td + td { border-left: 1px var(--line-color) solid;}
table.list tbody tr:last-child td { border-bottom: none;}
table.list tbody tr:hover { background: #f8fafc;}
table.list td.code, table.list th.code { font-family: Menlo, Consolas, monospace; font-size: 1.4rem;}
table.list td.number, table.list th.number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;}
table.list td.center, table.list th.center { text-align: center;}
table.list td.name a { font-weight: 700;}
table.list td.name small { color: var(--muted-color); font-size: 1.3rem;}
table.list td.url { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
table.list td.details { max-width: 320px; font-size: 1.3rem; color: var(--muted-color); word-break: break-all;}
table.list tr.inactive td { color: var(--muted-color);}
table.list tr.selected td { background: var(--info-bg-color);}
table.list tr.error td { background: #fff8f7;}
table.list tr.warning td { background: #fffbf2;}
table.list.compact th, table.list.compact td { padding: 0.6rem 0.8rem; font-size: 1.4rem;}
table.list tfoot td { font-weight: 700; background: #f8fafc;}
table.list th.sortable a { color: inherit;}

/*  pager  */
nav.page ol { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 1.6rem;}
nav.page ol li a, nav.page ol li span { display: inline-block; min-width: 38px; padding: 0.5em 0.7em; text-align: center; border: 1px var(--border-color) solid; border-radius: 8px; background: #ffffff;}
nav.page ol li span { background: var(--main-color); color: #ffffff; border-color: var(--main-color);}

/*  stats  */
div.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 1.6rem;}
div.stats div.stat { background: #f8fafc; border: 1px var(--border-color) solid; border-radius: 12px; padding: 1.4rem 1.6rem;}
div.stats div.stat p.name { font-size: 1.3rem; color: var(--muted-color);}
div.stats div.stat p.value { font-size: 2.4rem; font-weight: 700; line-height: 1.2; margin-top: 0.2rem; font-variant-numeric: tabular-nums; color: var(--main-dark-color);}
div.stats div.stat p.value small { font-size: 1.3rem; font-weight: 400; color: var(--muted-color); margin-left: 0.2em;}
div.stats div.stat p.sub { font-size: 1.3rem; color: var(--muted-color); margin-top: 0.4rem;}
div.stats div.stat.up p.sub { color: var(--success-color);}
div.stats div.stat.down p.sub { color: var(--danger-color);}
div.stats div.stat.warning { border-color: #f6d9a8; background: var(--warning-bg-color);}
div.stats div.stat.accent p.value { color: #1d4ed8;}

/*  cards  */
div.cards { display: grid; grid-template-columns: 1fr; gap: 1.2rem;}
div.cards a.card, div.cards div.card { display: block; background: var(--panel-color); border: 1px var(--border-color) solid; border-radius: 12px; padding: 1.6rem; color: inherit;}
div.cards a.card:hover { border-color: var(--active-border-color); box-shadow: 0 4px 12px rgba(31, 41, 55, 0.08); opacity: 1;}
div.cards a.card svg.icon { width: 28px; height: 28px; color: var(--accent-color); margin-bottom: 0.8rem;}
div.cards a.card h3 { font-size: 1.6rem; font-weight: 700;}
div.cards a.card p { font-size: 1.4rem; color: var(--muted-color); margin-top: 0.4rem;}

/*  modal  */
div.modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1.6rem; background: rgba(31, 41, 55, 0.5);}
div.modal.open { display: flex;}
div.modal div.dialog { background: var(--panel-color); border-radius: 16px; width: 100%; max-width: 640px; max-height: calc(100vh - 3.2rem); overflow-y: auto; padding: 2.4rem; box-shadow: 0 16px 40px rgba(31, 41, 55, 0.25);}
div.modal div.dialog.wide { max-width: 960px;}
div.modal div.dialog h3 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.2rem;}
div.modal div.dialog div.actions { justify-content: flex-end;}

/*  misc  */
div.em { background: var(--info-bg-color); border: 1px var(--active-border-color) solid; border-radius: 10px; padding: 1.2rem 1.6rem; margin-bottom: 1.6rem; font-size: 1.5rem;}
div.em.warning { background: var(--warning-bg-color); border-color: #f6d9a8; color: #92400e;}
div.em.danger { background: var(--danger-bg-color); border-color: #f3c2bd; color: var(--danger-color);}
div.split { display: grid; grid-template-columns: 1fr; gap: 2rem;}
ul.bullets { list-style: disc; padding-left: 1.6em; font-size: 1.5rem;}
ul.bullets li { margin-bottom: 0.3em;}
span.muted { color: var(--muted-color);}
span.nowrap { white-space: nowrap;}
p.right { text-align: right;}
div.progress { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden;}
div.progress span { display: block; height: 100%; background: var(--accent-color); border-radius: 999px; transition: width 0.3s;}
div.dropzone { border: 2px var(--active-border-color) dashed; border-radius: 12px; padding: 2.4rem 1.6rem; text-align: center; background: #fafbfd; cursor: pointer;}
div.dropzone.over { background: var(--info-bg-color); border-color: var(--accent-color);}
div.dropzone p { color: var(--muted-color); font-size: 1.4rem;}
div.dropzone p.name { color: var(--text-color); font-weight: 700; margin-top: 0.6rem;}
div.dropzone input[type="file"] { display: none;}
ol.steps { display: flex; gap: 0.4rem; margin-bottom: 1.6rem; counter-reset: step; flex-wrap: wrap;}
ol.steps li { flex: 1 1 120px; counter-increment: step; font-size: 1.3rem; color: var(--muted-color); padding: 0.6rem 0.8rem; border-radius: 8px; background: #f5f7fa; border: 1px var(--border-color) solid;}
ol.steps li::before { content: counter(step); display: inline-block; width: 1.8em; height: 1.8em; line-height: 1.8em; text-align: center; border-radius: 50%; background: #d1d5db; color: #ffffff; font-weight: 700; margin-right: 0.5em;}
ol.steps li.active { color: var(--main-color); background: var(--info-bg-color); border-color: var(--active-border-color); font-weight: 700;}
ol.steps li.active::before, ol.steps li.done::before { background: var(--accent-color);}
ol.steps li.done { color: var(--success-color);}

@media print {
	header.global, nav.global, div.actions, button.menubutton, nav.tabs, form.toolbar { display: none !important;}
	main.content { padding: 0;}
	section.panel { border: none; box-shadow: none; padding: 0;}
}

@media screen and (min-width: 768px) {
	header.global div.container { padding: 1.8rem 2.8rem;}
	header.global div.sitetop h1 { font-size: 2.2rem;}
	header.global div.account { display: flex;}
	main.content { padding: 2.8rem;}
	section.panel { padding: 2.2rem;}
	div.fields.two { grid-template-columns: repeat(2, 1fr);}
	div.fields.three { grid-template-columns: repeat(3, 1fr);}
	div.fields.four { grid-template-columns: repeat(4, 1fr);}
	dl.detail { grid-template-columns: 16em 1fr;}
	dl.detail dt { border-bottom: 1px var(--line-color) solid; padding-bottom: 0.6rem;}
	div.stats { grid-template-columns: repeat(4, 1fr);}
	div.stats.three { grid-template-columns: repeat(3, 1fr);}
	div.stats.six { grid-template-columns: repeat(6, 1fr);}
	div.cards { grid-template-columns: repeat(2, 1fr);}
	div.split { grid-template-columns: 1fr 1fr;}
	div.split.wide-left { grid-template-columns: 2fr 1fr;}
}

@media screen and (min-width: 1020px) {
	button.menubutton { display: none;}
	nav.global { position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); transform: none; flex-shrink: 0;}
	body.menu-open nav.global { box-shadow: none;}
	div.overlay { display: none !important;}
	div.cards { grid-template-columns: repeat(3, 1fr);}
}

/*

    Client

*/

body#client header.global span.badge.screen { background: rgba(255, 255, 255, 0.12);}
p.hint.center { text-align: center; margin-top: 1.6rem;}
div.cards a.card h3 span.badge.addon { font-size: 1rem; background: #fff4e0; color: #b45309; vertical-align: middle; margin-left: 0.4em;}