:root {
    --bg: #0f1115;
    --panel: #171a21;
    --panel-2: #1d2028;
    --text: #e6e6e6;
    --muted: #9aa3b2;
    --accent: #6ea8fe;
    --error: #ff6b6b;
    --success: #5cd6a8;
    --warning: #ffcd6b;
    --border: #262a33;

    --status-live: #5cd6a8;
    --status-planned: #6ea8fe;
    --status-designed: #ffcd6b;
    --status-archived: #6c7180;

    --sidebar-w: 240px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- App shell (authed) ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand {
    display: block;
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.sidebar .brand:hover { text-decoration: none; color: var(--accent); }

.sidebar-search {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    margin: 0;
}
.sidebar-search input {
    width: 100%;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font: inherit;
}
.sidebar-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
}

.nav-section { margin-bottom: 1rem; }
.nav-section-title {
    padding: 0.35rem 1.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.nav-section ul { list-style: none; padding: 0; margin: 0; }
.nav-section li a {
    display: block;
    padding: 0.4rem 1.25rem;
    color: var(--text);
    border-left: 3px solid transparent;
}
.nav-section li a:hover {
    background: var(--panel-2);
    text-decoration: none;
}
.nav-section li a.active {
    background: var(--panel-2);
    border-left-color: var(--accent);
    color: var(--accent);
}

.sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}
.sidebar-footer form { margin: 0; padding: 0; display: block; }
.sidebar-footer a,
.sidebar-footer .linkish {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
    padding: 0;
    text-decoration: none;
    text-align: left;
}
.sidebar-footer a:hover,
.sidebar-footer .linkish:hover { color: var(--accent); }

.content {
    flex: 1;
    padding: 1.5rem 2rem 3rem;
    width: 100%;
    min-width: 0;
}

/* ---------- Public shell (unauthed) ---------- */

.public-shell { min-height: 100vh; display: flex; flex-direction: column; }
.public-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}
.public-header .brand { color: var(--text); font-weight: 700; }
.public-header nav a { margin-left: 1rem; color: var(--muted); }
.public-header nav a:hover { color: var(--accent); }

.public-content { max-width: 720px; margin: 2rem auto; padding: 0 1.5rem; width: 100%; }

.landing { text-align: center; padding: 3rem 0; }
.landing h1 { font-size: 2.5rem; margin: 0 0 0.5rem; }

/* ---------- Page chrome ---------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.25rem;
}
.page-header h1 { margin: 0; font-size: 1.5rem; }

/* ---------- Flashes ---------- */

.flashes { list-style: none; padding: 0; margin: 0 0 1rem; }
.flash {
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border);
    background: var(--panel);
}
.flash-error   { border-color: var(--error);   color: var(--error); }
.flash-success { border-color: var(--success); color: var(--success); }

/* ---------- Tables ---------- */

.table-wrap {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.925rem;
}
.table thead th {
    text-align: left;
    padding: 0.65rem 0.85rem;
    background: var(--panel-2);
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgba(110, 168, 254, 0.04); }

.row-actions { white-space: nowrap; text-align: right; width: 1%; }
.row-actions a { margin-right: 0.75rem; }
.row-actions-header { text-align: right; width: 1%; white-space: nowrap; }

.inline-form { display: inline; }
.inline-form select {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font: inherit;
}

.empty { color: var(--muted); padding: 1rem; }

/* Preview / import chrome */
.row-error { background: rgba(255, 107, 107, 0.06); }
.row-errors { margin: 0; padding-left: 1.1rem; color: var(--error); font-size: 0.85rem; }
.row-errors li { margin: 0; }

.import-hints { margin: 0; padding-left: 1.1rem; }
.import-hints li { margin: 0.15rem 0; }

.button-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Search results ---------- */
.search-count { color: var(--muted); margin-top: 0; }
.search-group {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
.search-group h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--muted);
}
.search-group h2 a { color: var(--muted); }
.search-group h2 a:hover { color: var(--accent); text-decoration: none; }
.search-group h2 small { color: var(--muted); font-weight: 400; margin-left: 0.35rem; }
.search-hits { list-style: none; padding: 0; margin: 0; }
.search-hits li { padding: 0.25rem 0; border-top: 1px solid var(--border); }
.search-hits li:first-child { border-top: none; }
.search-hits li a { display: block; }

/* ---------- 2FA setup ---------- */
.qr-wrap {
    display: inline-block;
    padding: 0.75rem;
    background: #ffffff;
    border-radius: 6px;
    margin: 0.5rem 0 1rem;
    color-scheme: light;
}
.qr-wrap svg {
    display: block;
    width: 200px;
    height: 200px;
    background: #ffffff;
}
.qr-wrap svg path,
.qr-wrap svg rect { fill: #000000; }
.totp-secret {
    display: inline-block;
    background: var(--panel-2);
    border: 1px solid var(--border);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    user-select: all;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--panel-2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.badge.status-live     { color: var(--status-live);     border-color: var(--status-live); }
.badge.status-planned  { color: var(--status-planned);  border-color: var(--status-planned); }
.badge.status-designed { color: var(--status-designed); border-color: var(--status-designed); }
.badge.status-archived { color: var(--status-archived); border-color: var(--status-archived); }

/* ---------- Forms ---------- */

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}
.detail-cards { display: flex; flex-direction: column; gap: 1rem; }

.stack { display: flex; flex-direction: column; gap: 0.9rem; }
.stack > label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.stack > label.inline { flex-direction: row; align-items: center; gap: 0.5rem; }

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field input[type="checkbox"] { align-self: flex-start; }
.field-label { font-size: 0.85rem; color: var(--muted); }
.field-label em { color: var(--error); font-style: normal; }
.help-text { color: var(--muted); font-size: 0.8rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], textarea, select {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.form-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

.danger-zone {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    padding: 0.5rem 0.95rem;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary   { background: var(--accent); color: #0b1220; }
.btn-secondary { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.btn-danger    { background: var(--error); color: #200; }

.linkish {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.linkish.danger { color: var(--error); }
.linkish:hover { text-decoration: underline; }

/* ---------- Tabs ---------- */

.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.tab {
    padding: 0.55rem 1rem;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.15rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Detail info ---------- */

.detail-info {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 0.35rem 1.25rem;
    margin: 0;
}
.detail-info dt { color: var(--muted); font-size: 0.85rem; }
.detail-info dd { margin: 0; min-height: 1.2em; word-break: break-word; }

.section-heading {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.card > .section-heading:first-child { margin-top: 0; }

.notes { margin: 0.25rem 0 0; white-space: pre-wrap; color: var(--text); }

/* ---------- Gallery ---------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.gallery-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.gallery-item figcaption {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Rack view ---------- */

.rack-view .rack-legend {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.rack-rus {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.ru-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.ru-row:last-child { border-bottom: none; }
.ru-num { color: var(--muted); font-family: ui-monospace, monospace; }
.ru-body a { margin-right: 0.75rem; }
.ru-occupied { background: rgba(110, 168, 254, 0.06); }

/* ---------- Path segments ---------- */

.btn-sm { padding: 0.2rem 0.55rem; font-size: 0.8rem; }

.segment-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.segment-tree .segment-tree {
    margin: 0.4rem 0 0.4rem 1.5rem;
    padding-left: 0.75rem;
    border-left: 1px dashed var(--border);
}
.segment-node { margin-bottom: 0.4rem; }
.segment-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    flex-wrap: wrap;
}
.segment-index {
    color: var(--muted);
    font-family: ui-monospace, monospace;
    min-width: 1.5rem;
}
.segment-company { color: var(--muted); font-size: 0.85rem; }
.segment-actions { display: flex; gap: 0.35rem; margin-left: auto; }
.subpath-kind { background: rgba(110, 168, 254, 0.14); }
.subpath-details > summary { cursor: pointer; list-style: none; }
.subpath-details > summary::-webkit-details-marker { display: none; }
.subpath-toggle::before { content: "▸"; color: var(--muted); }
.subpath-details[open] .subpath-toggle::before { content: "▾"; }

/* ---------- Floor plan ---------- */

.fp-meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.75rem; }

.fp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.fp-zoom-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
}
.fp-selection-info { font-size: 0.85rem; color: var(--muted); }

/* Full-width viewport window onto the grid; the grid itself pans inside it via transform,
   never native scrollbars, so click-drag always means "move the view". */
.fp-viewport {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 320px;
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.fp-viewport.fp-panning { cursor: grabbing; }

.fp-canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--panel);
    background-image:
        repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px var(--fp-cell-px, 26px)),
        repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--fp-cell-px, 26px));
}

.fp-cells, .fp-current-bounds, .fp-bounds, .fp-items, .fp-item-labels, .fp-selection {
    position: absolute;
    inset: 0;
}
.fp-cells { z-index: 0; }
.fp-current-bounds { z-index: 5; display: none; border: 6px solid var(--accent); opacity: 0.9; pointer-events: none; }
.fp-bounds { z-index: 5; border: 4px solid var(--accent); pointer-events: none; }
.fp-bounds.fp-resizing { border-color: var(--warning); }
.fp-items { z-index: 2; }
.fp-item-labels { z-index: 3; }
.fp-selection { z-index: 4; }
.fp-items, .fp-item-labels, .fp-selection { pointer-events: none; }

.fp-cell {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--border);
    background: var(--panel-2);
    cursor: pointer;
}
.fp-cell-occupied { cursor: not-allowed; }
.fp-cell-disabled { cursor: not-allowed; }
.fp-cell-selectable { cursor: pointer; }

.fp-cell-pending { position: absolute; box-sizing: border-box; }
.fp-cell-selected { background: rgba(110, 168, 254, 0.4); border: 1px solid var(--accent); }
.fp-cell-invalid { background: rgba(255, 107, 107, 0.4); border: 1px solid var(--error); }

.fp-item-cell {
    position: absolute;
    box-sizing: border-box;
    background: var(--accent);
    border: 1px solid rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.fp-item-rack { background: var(--status-designed); }
.fp-item-label { background: var(--status-archived); }
.fp-item-wall_label { background: var(--success); }
.fp-wall-cell-left { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); }
.fp-wall-cell-right { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.fp-wall-cell-top { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
.fp-wall-cell-bottom { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); }
.fp-wall-cell-left.fp-wall-cell-top { clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%); }
.fp-wall-cell-right.fp-wall-cell-top { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0 50%); }
.fp-wall-cell-left.fp-wall-cell-bottom { clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%); }
.fp-wall-cell-right.fp-wall-cell-bottom { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); }

.fp-segment {
    position: absolute;
    height: 4px;
    transform-origin: left center;
    background: var(--fp-segment-color, var(--accent));
    border-radius: 2px;
    z-index: 2;
    pointer-events: auto;
}
.fp-segment-line { background: var(--fp-segment-color, var(--warning)); }
.fp-segment-wall_label { background: var(--fp-segment-color, var(--success)); height: 6px; }
.fp-segment-pending { background: var(--fp-segment-color, var(--accent)); pointer-events: none; }
.fp-segment-editing { visibility: hidden; }
.fp-intersection-hover {
    position: absolute;
    z-index: 5;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--fp-active-color, var(--accent));
    box-shadow: 0 0 0 2px rgba(11, 18, 32, 0.75);
    pointer-events: none;
}
.fp-line-endpoint {
    position: absolute;
    z-index: 6;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--fp-active-color, var(--accent));
    box-shadow: 0 0 0 2px rgba(11, 18, 32, 0.85);
    cursor: move;
    pointer-events: auto;
}

.fp-wall-caption {
    position: absolute;
    z-index: 2;
    width: max-content;
    transform: translate(-50%, -50%);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: rgba(11, 18, 32, 0.9);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: auto;
}
.fp-line-caption {
    position: absolute;
    z-index: 3;
    width: max-content;
    transform: translate(-50%, -50%);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: rgba(11, 18, 32, 0.9);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease-out, visibility 120ms ease-out;
}
.fp-line-caption.fp-line-caption-visible { opacity: 1; visibility: visible; }
.fp-wall-caption-left { transform: translate(-100%, -50%); margin-left: -8px; }
.fp-wall-caption-right { transform: translate(0, -50%); margin-left: 8px; }
.fp-wall-caption-top { transform: translate(-50%, -100%); margin-top: -8px; }
.fp-wall-caption-bottom { transform: translate(-50%, 0); margin-top: 8px; }

.fp-resize-handle { position: absolute; z-index: 5; pointer-events: auto; }
.fp-viewport.fp-segment-mode .fp-resize-handle { pointer-events: none; }
.fp-resize-left, .fp-resize-right { top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.fp-resize-left { left: -9px; }
.fp-resize-right { right: -9px; }
.fp-resize-top, .fp-resize-bottom { left: 0; right: 0; height: 10px; cursor: ns-resize; }
.fp-resize-top { top: -9px; }
.fp-resize-bottom { bottom: -9px; }
.fp-resize-top_left, .fp-resize-top_right, .fp-resize-bottom_left, .fp-resize-bottom_right {
    width: 18px;
    height: 18px;
}
.fp-resize-top_left { top: -11px; left: -11px; cursor: nwse-resize; }
.fp-resize-top_right { top: -11px; right: -11px; cursor: nesw-resize; }
.fp-resize-bottom_left { bottom: -11px; left: -11px; cursor: nesw-resize; }
.fp-resize-bottom_right { right: -11px; bottom: -11px; cursor: nwse-resize; }
.fp-resize-preview {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0.2rem 0.45rem;
    background: rgba(11, 18, 32, 0.92);
    border: 1px solid var(--accent);
    border-radius: 3px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
}

.fp-bounds,
.fp-item-cell,
.fp-item-caption,
.fp-segment,
.fp-wall-caption {
    transition: left 140ms ease-out, top 140ms ease-out, width 140ms ease-out, height 140ms ease-out, transform 140ms ease-out;
}
.fp-viewport.fp-zooming .fp-bounds,
.fp-viewport.fp-zooming .fp-current-bounds,
.fp-viewport.fp-zooming .fp-item-cell,
.fp-viewport.fp-zooming .fp-item-caption,
.fp-viewport.fp-zooming .fp-segment,
.fp-viewport.fp-zooming .fp-wall-caption {
    transition: none;
}

/* Positioned at its item's anchor cell by the same [data-x][data-y] layout pass as the grid
   cells, but sized to its content (not clamped to one cell) and always painted above every
   cell fill, so it's never hidden behind a neighboring cell. */
.fp-item-caption {
    position: absolute;
    z-index: 1;
    width: max-content !important;
    height: auto !important;
    max-width: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 2px;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: rgba(11, 18, 32, 0.85);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: auto;
}
.fp-item-caption a { color: inherit; }
.fp-wall-label-caption { margin: 0; }
.fp-wall-label-left { transform: translate(-100%, 0); margin-left: -6px; }
.fp-wall-label-right { transform: translate(0, 0); margin-left: 6px; }
.fp-wall-label-top { transform: translate(0, -100%); margin-top: -6px; }
.fp-wall-label-bottom { transform: translate(0, 0); margin-top: 6px; }
.fp-wall-label-top_left { transform: translate(-100%, -100%); margin: -6px 0 0 -6px; }
.fp-wall-label-top_right { transform: translate(0, -100%); margin: -6px 0 0 6px; }
.fp-wall-label-bottom_left { transform: translate(-100%, 0); margin: 6px 0 0 -6px; }
.fp-wall-label-bottom_right { transform: translate(0, 0); margin: 6px 0 0 6px; }
.fp-item-edit {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 0.15rem;
}
.fp-item-delete { margin: 0; padding: 0; }
.fp-item-delete button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0.15rem;
}

.fp-add-form { max-width: 360px; margin-top: 1rem; }
.fp-edit-banner { font-size: 0.85rem; color: var(--warning); margin: 0; }