/* Blogspace dashboard — lean: neutral surfaces, 1px borders, one accent, system
   sans. Flexbox/grid and custom properties are fine here (the public blog.css
   stays float-based); works down to ~320px. */
:root {
  --bg: #f5f6f8; --surface: #fff; --surface-2: #f8f9fb;
  --border: #e2e5ea; --border-strong: #c9ced6;
  --text: #1f2328; --muted: #6b7280;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eef3ff; --accent-ring: rgba(37, 99, 235, 0.25);
  --danger: #dc2626; --danger-hover: #b91c1c; --danger-soft: #fef2f2;
  --ok-bg: #ecfdf3; --ok-border: #a7e3bd; --ok-text: #14532d;
  --err-bg: #fef2f2; --err-border: #f5b5b5; --err-text: #7f1d1d;
  --radius: 8px; --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: 1.5em; margin: 0 0 0.6em; }
h2 { font-size: 1.1em; margin: 0 0 0.8em; }
h3 { font-size: 0.95em; margin: 0 0 0.4em; }
code, .mono { font-family: var(--mono); }
code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3em; font-size: 0.9em; }
p { margin: 0.6em 0; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.narrow { max-width: 480px; }
.center { margin-left: auto; margin-right: auto; }
.small { font-size: 0.9em; }

/* ---- bars ---------------------------------------------------------------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar a { color: var(--text); text-decoration: none; }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0.6em 1em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em 1em; }
.brand { font-weight: 700; letter-spacing: -0.01em; }
.who { color: var(--muted); font-size: 0.9em; }
.topbar .links { margin-left: auto; font-size: 0.9em; display: flex; gap: 1.2em; align-items: center; }
.topbar .links a, .topbar .links .linkbtn { color: var(--muted); }
.topbar .links a:hover, .topbar .links .linkbtn:hover { color: var(--text); }
.topbar .links a.active { color: var(--text); font-weight: 600; }
.blogbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.blogbar .topbar-inner { padding: 0.5em 1em 0; gap: 0 1.2em; }
.blogbar .blogname { font-weight: 600; padding-bottom: 0.55em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20em; }
.blogbar .tabs { display: flex; gap: 0.2em; }
.blogbar .tabs a { display: inline-block; padding: 0.35em 0.7em 0.55em; text-decoration: none; color: var(--muted); font-size: 0.92em; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.blogbar .tabs a:hover { color: var(--text); }
.blogbar .tabs a.active { color: var(--accent); border-color: var(--accent); }
.blogbar .view { margin: 0 0 0.5em auto; padding: 0.3em 0.75em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 0.85em; font-weight: 500; background: var(--surface); white-space: nowrap; }
.blogbar .view:hover { background: var(--surface-2); border-color: var(--muted); }

/* ---- page ---------------------------------------------------------------- */
.main { max-width: 1100px; margin: 0 auto; padding: 1.5em 1em 3em; }
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 1em; margin-bottom: 1em; }
.pagehead h1 { margin: 0; flex: 1 1 auto; }
.pagehead .actions { margin-left: auto; }
.pagehead .lead { flex-basis: 100%; margin: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25em 1.4em; margin: 0 0 1.4em; }
.card > :last-child { margin-bottom: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin-bottom: 1.4em; }
.cols .card { margin: 0; }
.flash { padding: 0.65em 1em; border: 1px solid; border-radius: var(--radius-sm); margin: 0 0 1.2em; font-size: 0.95em; }
.flash.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.flash.err { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.tag { display: inline-block; font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hover); padding: 0.1em 0.6em; margin-left: 0.5em; vertical-align: middle; line-height: 1.6; }
.tag.off { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* ---- forms --------------------------------------------------------------- */
label { display: block; margin: 0.9em 0; font-size: 0.875em; font-weight: 500; }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], input[type=url], input[type=search], input:not([type]), input[type=file], select, textarea {
  width: 100%; max-width: 100%; padding: 0.5em 0.65em; margin-top: 0.3em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; font-weight: normal; background: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
button:focus-visible, .btn:focus-visible, .tabs a:focus-visible, .view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=color] { width: 4em; height: 2.4em; padding: 0.15em; margin-top: 0.3em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
input[type=file] { padding: 0.35em; }
input[type=search] { -webkit-appearance: none; appearance: none; }
select { -webkit-appearance: none; appearance: none; padding-right: 1.9em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7em center; }
textarea { font-family: var(--mono); font-size: 0.92em; line-height: 1.55; }
textarea.tall { min-height: 28em; }
label.check { font-weight: normal; font-size: 0.95em; }
label.check input { width: auto; margin: 0 0.45em 0 0; vertical-align: middle; accent-color: var(--accent); }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }
.row { display: flex; flex-wrap: wrap; gap: 0 1.5em; }
/* The post form's list of existing tags, folded under the tags box; the chips are buttons only once the script runs. */
details.tagref { margin: -0.4em 0 0.6em; font-size: 0.9em; }
details.tagref summary { cursor: pointer; color: var(--muted); }
.chips { margin: 0.4em 0 0; line-height: 2; }
.chip { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 0.7em; margin: 0 0.3em 0.3em 0; line-height: 1.7; background: var(--surface-2); }
.tagref.live .chip { cursor: pointer; }
.chip.on { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); }
.row label { flex: 1 1 12em; min-width: 12em; }
button, .btn { display: inline-block; font: inherit; font-size: 0.9em; font-weight: 600; padding: 0.5em 1.05em; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; vertical-align: middle; line-height: 1.4; }
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn.secondary, button.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn.secondary:hover, button.secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); }
.btn.small, button.small { font-size: 0.8em; padding: 0.4em 0.85em; }
button.mini, .mini { font-size: 0.75em; font-weight: 500; padding: 0.15em 0.55em; background: var(--surface); color: var(--text); border-color: var(--border-strong); }
button.mini:hover, .mini:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
a.danger { color: var(--danger); }
button.mini.danger { color: var(--danger); border-color: var(--border-strong); background: var(--surface); }
button.mini.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
button.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
form.inline, .inline { display: inline; }
details.inline summary { display: inline; cursor: pointer; }
summary.mini { display: inline-block; list-style: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; line-height: 1.4; }
summary.mini::-webkit-details-marker { display: none; }
.filter { margin: 0 0 1em; }
.filter label { display: inline-block; margin: 0; }
.filter select { width: auto; margin: 0 0 0 0.4em; }
.actionrow { margin: 1.2em 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 0.9em; }
.actionrow a:not(.btn) { font-size: 0.95em; }

/* ---- tables & lists ------------------------------------------------------ */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.55em 0.6em; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--surface-2); }
tr.disabled td { color: var(--muted); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.35em 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }
details.help { margin: 0.8em 0 0; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 0.5em 1em; background: var(--surface-2); font-size: 0.95em; }
details.help summary { cursor: pointer; color: var(--muted); font-weight: 500; font-size: 0.9em; }
details.help[open] summary { margin-bottom: 0.5em; color: var(--text); }
.cheat td { border: 0; padding: 0.2em 1em 0.2em 0; background: none; }
.cheat tr:hover td { background: none; }

/* ---- editor: toolbar, textarea and preview share one frame ------------------ */
.editor { margin-top: 0.3em; }
.ed-format { margin: 0 0 0.4em; font-size: 0.9em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.9em; }
.ed-format label { display: inline-flex; align-items: center; gap: 0.3em; margin: 0; font-weight: normal; }
.ed-format input { width: auto; margin: 0; }
.editor.js:not(.html) .ed-htmlnote { display: none; } /* without JS the note is always there: cheap, and true */
.editor.html .ed-md, .editor.html .ed-linkbox, .editor.html .help { display: none; }
.editor.html .ed-group { border-right: 0; } /* Insert file stands alone */
.editor.html textarea { font-family: var(--mono); font-size: 0.9em; }
.ed-preview-frame { display: block; width: 100%; min-height: 10em; border: 1px solid var(--border-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: #fff; }
.editor textarea { margin-top: 0; display: block; }
.editor.js textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.ed-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em; padding: 0.35em 0.4em; background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.ed-group { display: inline-flex; gap: 0.1em; padding-right: 0.35em; margin-right: 0.1em; border-right: 1px solid var(--border-strong); }
.ed-group:last-of-type { border-right: 0; }
.ed-toolbar button[data-cmd] { width: 2em; height: 2em; padding: 0; border: 1px solid transparent; background: none; color: var(--text); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; }
.ed-toolbar button[data-cmd]:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }
.ed-toolbar svg { width: 16px; height: 16px; fill: currentColor; }
.ed-modes { margin-left: auto; display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ed-modes button { font-size: 0.8em; font-weight: 500; padding: 0.25em 0.75em; border: 0; border-radius: 0; background: var(--surface); color: var(--muted); }
.ed-modes button + button { border-left: 1px solid var(--border-strong); }
.ed-modes button:hover { background: var(--surface-2); color: var(--text); }
.ed-modes button[aria-pressed=true] { background: var(--accent); color: #fff; }
.editor.previewing .ed-toolbar button[data-cmd] { opacity: 0.35; pointer-events: none; }
.ed-linkbox { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; padding: 0.5em; background: var(--accent-soft); border: 1px solid var(--border-strong); border-bottom: 0; }
.ed-linkbox input { flex: 1 1 12em; margin: 0; padding: 0.35em 0.5em; font-size: 0.9em; }
.ed-preview { min-height: 10em; padding: 0.8em 1em; border: 1px solid var(--border-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--surface); overflow-x: auto; }
.ed-preview > :first-child { margin-top: 0; }
.ed-preview > :last-child { margin-bottom: 0; }
.ed-preview h1, .ed-preview h2, .ed-preview h3, .ed-preview h4 { margin: 1em 0 0.4em; }
.ed-preview h1 { font-size: 1.5em; } .ed-preview h2 { font-size: 1.3em; } .ed-preview h3 { font-size: 1.1em; }
.ed-preview img { max-width: 100%; height: auto; }
.ed-preview blockquote { margin: 0.8em 0; padding: 0.2em 1em; border-left: 3px solid var(--border-strong); color: var(--muted); }
.ed-preview pre { padding: 0.7em 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.9em; }
.ed-preview pre code { border: 0; padding: 0; background: none; }
.ed-preview table { width: auto; margin: 0.8em 0; }
.ed-preview th, .ed-preview td { border: 1px solid var(--border); }
.ed-preview hr { border: 0; border-top: 1px solid var(--border-strong); margin: 1.2em 0; }
.editor-tools { margin: 0.5em 0 0; font-size: 0.9em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.8em; }
.editor-tools .upload { display: inline-block; margin: 0; padding: 0.25em 0.7em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: 0.85em; }
.editor-tools .upload:hover { background: var(--surface-2); }
.editor-tools .upload input { display: inline-block; width: auto; max-width: 14em; margin: 0 0 0 0.4em; padding: 0; border: 0; background: none; font-size: 0.9em; }
.editor.js .editor-tools .upload { display: none; } /* the toolbar's Insert file button takes over */
.editor-tools .upload-status { font-size: 0.9em; color: var(--muted); }
.editor-tools .upload-status:empty { display: none; }

/* ---- files --------------------------------------------------------------- */
.dropzone.over { border: 1px dashed var(--accent); background: var(--accent-soft); }
.progress { list-style: none; margin: 0.6em 0 0; padding: 0; font-size: 0.9em; color: var(--muted); }
.progress:empty { display: none; }
.files-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.files-filter input[type=search] { width: auto; margin: 0; padding: 0.35em 0.6em; }
.kinds { display: inline-flex; flex-wrap: wrap; gap: 0.3em; margin-right: 0.5em; }
.kinds a { display: inline-block; padding: 0.25em 0.8em; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.85em; font-weight: 500; }
.kinds a:hover { background: var(--surface-2); }
.kinds a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
table.files td.icon { width: 56px; }
table.files .thumb { display: block; width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
table.files .badge { display: block; width: 48px; padding: 0.9em 0; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); text-align: center; font-family: var(--mono); font-size: 0.65em; letter-spacing: 0.05em; overflow: hidden; }
table.files td.name { word-break: break-all; }
table.files .copy { width: 100%; min-width: 11em; padding: 0.3em 0.4em; margin: 0; font-family: var(--mono); font-size: 0.75em; }
.pager { margin: 0 0 1.4em; text-align: center; font-size: 0.92em; }
.pager a, .pager span { margin: 0 0.8em; }
.imagepick { margin-top: 0.8em; padding-top: 0.6em; border-top: 1px solid var(--border); }
.imagepick > label { margin-bottom: 0.3em; }
.imagepick .picks { display: flex; flex-wrap: wrap; gap: 0.7em; margin: 0.4em 0 0; }
.imagepick .pick { width: 120px; margin: 0; padding: 0.4em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: center; font-size: 0.75em; font-weight: normal; cursor: pointer; }
.imagepick .pick:hover { border-color: var(--border-strong); background: var(--surface-2); }
.imagepick .pick input { display: block; width: auto; margin: 0 auto 0.3em; }
.imagepick .pick img, .imagepick .pick .swatch { display: block; width: 100%; height: 64px; margin: 0 auto 0.3em; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
.imagepick .pick img { object-fit: contain; }
.imagepick .pick .swatch { line-height: 64px; font-size: 1.6em; color: var(--muted); }
.imagepick .pick .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imagepick .pick input:checked ~ img, .imagepick .pick input:checked ~ .swatch { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ---- design page ---------------------------------------------------------- */
.jumps { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0 0 1.2em; font-size: 0.85em; }
.jumps a { display: inline-block; padding: 0.2em 0.75em; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; }
.jumps a:hover { border-color: var(--accent); color: var(--accent); }
.presets { display: flex; flex-wrap: wrap; gap: 0.8em; }
.presets .preset { width: 8.5em; margin: 0; padding: 0.55em 0.45em; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 500; text-align: center; }
.presets .preset:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.presets .sw { display: inline-block; width: 22%; height: 2.2em; margin: 0 1%; border: 1px solid rgba(0,0,0,0.15); border-radius: 3px; vertical-align: middle; }
.presets .pname { display: block; margin-top: 0.4em; }
/* layout page: the column diagram, area cards with their module tables */
.lay { margin: 0 0 1em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.75em; font-weight: 500; text-align: center; overflow: hidden; }
.lay-row { padding: 0.5em; background: var(--text); color: #fff; }
.lay-cols { display: flex; padding: 0.5em; gap: 0.3em; }
.lay-col { padding: 1.6em 0.3em; border: 1px dashed var(--border-strong); border-radius: 4px; background: var(--surface); }
.lay-col.lay-main { background: var(--accent-soft); border-color: var(--accent); border-style: solid; color: var(--accent-hover); }
.lay .off { opacity: 0.45; text-decoration: line-through; }
.lay-col.off { text-decoration: none; }
.lay-col.empty { background: transparent; }
.row input[type=number] { width: 6em; }
.cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 1em; }
.cardhead h2 { margin: 0 0 0.6em; }
.cardhead .switch { margin: 0 0 0.6em auto; }
.card.area-off { border-style: dashed; box-shadow: none; }
.card.area-off .modules, .card.area-off .addmod { opacity: 0.6; }
table.modules { margin: 0.5em 0 1em; }
table.modules td.order, table.modules td.actions { width: 1%; }
table.modules th { width: 10em; }
.addmod { border-top: 1px solid var(--border); padding-top: 0.6em; }
.addmod label, .add label { display: inline-block; margin: 0 0.8em 0.4em 0; min-width: 14em; }
.addmod select, .add select, .add input { width: auto; min-width: 14em; }
.addmod button, .add button { vertical-align: bottom; margin-bottom: 0.4em; }
.addrow { margin-top: 1em; border-top: 1px solid var(--border); padding-top: 0.6em; margin-bottom: 0; }
textarea.mono { font-size: 0.9em; }
.hoverpick { margin: 0.8em 0; }
.hoverpick > input { width: auto; margin: 0 0.4em 0 0; vertical-align: middle; }
.hoverpick > label.check { display: inline; margin: 0; }
.hoverpick .hover-color { margin: 0.4em 0 0 1.6em; }
.hoverpick > input:not(:checked) ~ .hover-color { display: none; }
.savebar { position: sticky; bottom: 0; margin: 0; padding: 0.8em 0; background: var(--bg); border-top: 1px solid var(--border-strong); display: flex; gap: 0.8em; align-items: center; }
details.reset { margin-top: 1.6em; }

/* ---- login --------------------------------------------------------------- */
.login-brand { text-align: center; font-weight: 700; font-size: 1.2em; letter-spacing: -0.01em; margin: 2.5em 0 1em; }

@media (max-width: 700px) {
  body { font-size: 15px; }
  .cols { grid-template-columns: 1fr; gap: 1.2em; }
  .row { gap: 0; }
  .row label { flex-basis: 100%; }
  .imagepick .pick { width: 46%; }
  .presets .preset { width: 46%; }
  .topbar .links { margin-left: 0; flex-basis: 100%; gap: 1em; }
  .blogbar .topbar-inner { display: block; }
  .blogbar .blogname { display: block; max-width: none; padding-bottom: 0.3em; }
  .blogbar .view { display: inline-block; margin: 0 0 0.6em; }
  .blogbar .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 0 -1em; padding: 0 1em; }
  .pagehead .actions { margin-left: 0; }
  .card { padding: 1em 1em; overflow-x: auto; }
  table { font-size: 0.9em; }
  th, td { padding: 0.4em 0.35em; }
  .ed-modes { margin-left: 0; }
}