/* ==========================================================================
MeinStack Design System v2
Premium dark "tech cockpit" aesthetic built around the robot-mascot brand
(deep space blue, electric cyan/violet accents, brushed-silver highlights).
One system, reused across the public site, the app and the admin panel.
All selector names are intentionally unchanged from v1 so every view keeps
working — only the visual treatment underneath got a serious upgrade.
========================================================================== */
:root{
--bg: #070914;
--bg-soft: #0b0f24;
--panel: #10163a;
--panel-2: #141b46;
--panel-glass: rgba(20, 27, 70, 0.55);
--border: #262f60;
--border-soft: #1a2147;
--border-bright: rgba(87, 185, 255, 0.35);
--text: #f3f5ff;
--text-dim: #aab2e0;
--muted: #7c86b8;
--accent: #2fb2ff;
--accent-2: #7c5cff;
--accent-3: #59e6c9;
--accent-grad: linear-gradient(90deg, var(--accent), var(--accent-2));
--accent-grad-2: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, #b98bff 100%);
--silver-grad: linear-gradient(135deg, #f4f7ff 0%, #c7cdea 50%, #8b93c4 100%);
--ok: #37d38f;
--warn: #ffb020;
--danger: #ff5a7a;
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 22px;
--shadow: 0 20px 50px rgba(3, 6, 20, 0.5);
--shadow-lg: 0 30px 80px rgba(3, 6, 20, 0.6);
--glow-accent: 0 0 0 1px rgba(47,178,255,.18), 0 12px 40px rgba(47,178,255,.16);
--glow-accent-lg: 0 0 0 1px rgba(47,178,255,.25), 0 20px 60px rgba(47,178,255,.22);
--sidebar-w: 264px;
--topbar-h: 68px;
/* One typeface everywhere, on Thorsten's request - headings/hero/stat
values used to render in Space Grotesk while the sidebar menu (and
everything else) used Inter, which read as two different fonts on the
same page. --font-display is kept as its own variable (rather than
deleted) so headings can still be targeted separately later - it just
points at the same font stack as --font-body for now. */
--font-display: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
--ease: cubic-bezier(.22,1,.36,1);
/* A handful of surfaces (sidebar, cards, topbar, form fields) used literal
hex/rgba values instead of the tokens above, because they need a second
stop for a gradient or a translucent tone the base tokens don't cover.
Pulled out into their own variables here so the Hell-Modus block below
can override just these, rather than duplicating whole rules. */
--sidebar-grad-1: #0c1130;
--sidebar-grad-2: #090d24;
--card-grad-2: #0c1230;
--topbar-bg: rgba(7,9,20,.78);
--input-bg: #0b1130;
--body-bg-decor:
radial-gradient(1200px 620px at 12% -8%, rgba(124,92,255,0.22) 0%, transparent 60%),
radial-gradient(900px 500px at 96% 8%, rgba(47,178,255,0.16) 0%, transparent 55%),
radial-gradient(1400px 900px at 50% 110%, rgba(89,230,201,0.08) 0%, transparent 60%);
}
/* ---------- Hell-Modus (light theme) ----------
Toggled by setting data-theme="light" on (see app.php / admin.php
head script + the topbar toggle button) and remembered in the browser via
localStorage - no DB column, no server round-trip. Every component below
already reads its colors from the tokens above, so overriding the tokens
here is enough for almost the whole app; the few places that used literal
pale-on-dark colors (alerts, .btn-danger) get an explicit override lower
down since they don't route through a variable. */
:root[data-theme="light"] {
--bg: #f2f4fa;
--bg-soft: #e9edf7;
--panel: #ffffff;
--panel-2: #f4f6fc;
--panel-glass: rgba(255, 255, 255, 0.72);
--border: #dbe1f0;
--border-soft: #e5e9f5;
--border-bright: rgba(13, 141, 221, 0.4);
--text: #161a2c;
--text-dim: #4c5170;
--muted: #767ea3;
--accent: #0d8ddd;
--accent-2: #6c4fe0;
--accent-3: #0d9488;
--accent-grad: linear-gradient(90deg, var(--accent), var(--accent-2));
--accent-grad-2: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 55%, #8b5cf6 100%);
--ok: #1a9d63;
--warn: #b8790b;
--danger: #d1435f;
--shadow: 0 16px 36px rgba(30, 41, 63, 0.1);
--shadow-lg: 0 24px 60px rgba(30, 41, 63, 0.14);
--glow-accent: 0 0 0 1px rgba(13,141,221,.15), 0 12px 32px rgba(13,141,221,.12);
--glow-accent-lg: 0 0 0 1px rgba(13,141,221,.22), 0 18px 46px rgba(13,141,221,.16);
--sidebar-grad-1: #ffffff;
--sidebar-grad-2: #f0f3fb;
--card-grad-2: #eef1fa;
--topbar-bg: rgba(255,255,255,.82);
--input-bg: #f7f8fd;
--body-bg-decor:
radial-gradient(1200px 620px at 12% -8%, rgba(124,92,255,0.10) 0%, transparent 60%),
radial-gradient(900px 500px at 96% 8%, rgba(13,141,221,0.08) 0%, transparent 55%),
radial-gradient(1400px 900px at 50% 110%, rgba(13,148,136,0.05) 0%, transparent 60%);
}
:root[data-theme="light"] .ms-sidebar { box-shadow: 1px 0 0 rgba(20,27,70,.04) inset; }
:root[data-theme="light"] .alert-error { color: #a4283f; }
:root[data-theme="light"] .alert-success { color: #157a4d; }
:root[data-theme="light"] .alert-info { color: #0b6fa8; }
:root[data-theme="light"] .btn-danger { color: #b8395a; }
:root[data-theme="light"] .ms-empty .ms-icon { color: #c4cbe2; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
margin: 0;
position: relative;
background: var(--body-bg-decor), var(--bg);
background-attachment: fixed;
transition: background-color .2s var(--ease), color .2s var(--ease);
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* subtle film-grain / noise overlay for a premium, non-flat surface */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.ms-shell, .ms-auth-wrap, .ms-public-header, .ms-hero, .ms-pricing-grid, .ms-bio-page { position: relative; z-index: 1; }
h1,h2,h3,h4 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.015em; font-family: var(--font-display); }
p { margin: 0 0 1em; color: var(--text-dim); }
a { color: var(--accent); text-decoration: none; transition: color .15s var(--ease); }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
::selection { background: var(--accent-2); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }
.ms-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ms-icon-lg { width: 26px; height: 26px; }
.ms-icon-sm { width: 14px; height: 14px; }
/* ---------- Layout shell ---------- */
.ms-shell { display: flex; min-height: 100vh; }
.ms-sidebar {
width: var(--sidebar-w); flex-shrink: 0;
background: linear-gradient(180deg, var(--sidebar-grad-1) 0%, var(--sidebar-grad-2) 100%);
border-right: 1px solid var(--border-soft);
padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
transition: transform .25s var(--ease), width .25s var(--ease), padding .25s var(--ease); z-index: 40;
box-shadow: 1px 0 0 rgba(255,255,255,.02) inset;
}
.ms-sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 12px; }
.ms-sidebar-logo { display: block; line-height: 0; }
.ms-sidebar-brand img { width: 120px; height: 120px; object-fit: contain; display: block; }
.ms-sidebar-brand .ms-sidebar-logo + div { margin-right: auto; }
.ms-sidebar-brand > .ms-sidebar-logo:has(img[width="72"]) img { width: 72px; height: 72px; }
.ms-sidebar-brand .name { font-weight: 700; font-size: 18px; font-family: var(--font-display); background: var(--accent-grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.01em; }
.ms-sidebar-brand .ver { display:block; font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .03em; }
.ms-nav-group { margin-bottom: 18px; }
.ms-nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); padding: 0 12px; margin-bottom: 7px; font-weight: 700; }
.ms-nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; font-weight: 500; margin-bottom: 2px; position: relative; transition: background .15s var(--ease), color .15s var(--ease); }
.ms-nav-link .ms-icon { color: var(--muted); transition: color .15s var(--ease); }
.ms-nav-link:hover { background: rgba(47,178,255,0.09); color: var(--text); text-decoration: none; }
.ms-nav-link:hover .ms-icon { color: var(--accent); }
.ms-nav-link.active { background: linear-gradient(90deg, rgba(47,178,255,.16), rgba(124,92,255,.08)); color: #fff; }
.ms-nav-link.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-grad); box-shadow: 0 0 12px rgba(47,178,255,.7); }
.ms-nav-link.active .ms-icon { color: var(--accent); }
.ms-nav-link .badge { margin-left: auto; }
.ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-topbar {
height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 0 24px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--topbar-bg);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 30;
}
.ms-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ms-topbar-title { font-size: 16px; font-weight: 700; font-family: var(--font-display); }
.ms-topbar-right { display: flex; align-items: center; gap: 10px; }
.ms-burger { display: none; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px; cursor: pointer; }
.ms-content { padding: 28px 28px 60px; max-width: 1400px; width: 100%; margin: 0 auto; }
.ms-workspace-switch { display:flex; align-items:center; gap:8px; background: var(--panel); border: 1px solid var(--border); padding: 7px 12px; border-radius: 10px; font-size: 13px; cursor: pointer; color: var(--text); }
/* ---------- Cards / panels ---------- */
.ms-card {
background: linear-gradient(165deg, var(--panel) 0%, var(--card-grad-2) 100%);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow);
position: relative;
transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ms-card + .ms-card { margin-top: 18px; }
/* ...but NOT when the .ms-card is itself a grid item (e.g. the platform
tiles on /accounts, each one is a .ms-card) - .ms-grid already spaces
its children evenly via `gap`. Without this, every tile except the
first in the grid also picked up this 18px margin-top. On a grid item,
margin increases that item's own outer height, which raises the whole
row's track height (align-items:stretch), which the *first* item in
the row then gets stretched to fill - so the first tile in each row
rendered ~18px taller than its own siblings. That's the exact bug
Thorsten saw as "Facebook is bigger than all the other platforms" -
Facebook is the enabled tile, first in DOM order, so it was the one
item in row 1 with no margin-top and got stretched to fill the taller
row track that its own margin-carrying neighbours created. */
.ms-grid > .ms-card + .ms-card { margin-top: 0; }
.ms-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.ms-card-header h2, .ms-card-header h3 { margin: 0; }
.ms-card-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
/* Default vertical rhythm after a grid block, so a card/grid that follows
(e.g. Analytics: two-column grid -> full-width card) never sits flush
against it. An inline margin-bottom="" on individual grids still wins
(higher specificity), this is just the fallback spacing. */
.ms-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.ms-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ms-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px){ .ms-grid-4{grid-template-columns:repeat(2,1fr);} .ms-grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 680px){ .ms-grid-2,.ms-grid-3,.ms-grid-4{grid-template-columns:1fr;} }
/* Feature/app cards on the marketing homepage get a hover lift + glow */
.ms-grid .ms-card:hover { transform: translateY(-3px); border-color: var(--border-bright); box-shadow: var(--glow-accent); }
.ms-grid .ms-card .ms-icon-lg { padding: 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(47,178,255,.16), rgba(124,92,255,.12)); color: var(--accent); margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ms-stat { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 19px 20px; position: relative; overflow: hidden; }
.ms-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-grad); }
.ms-stat .label { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ms-stat .value { font-size: 29px; font-weight: 800; margin-top: 6px; font-family: var(--font-display); letter-spacing: -0.02em; }
.ms-stat .value small { font-size: 14px; color: var(--muted); font-weight: 600; font-family: var(--font-body); }
.ms-stat .delta { font-size: 12.5px; margin-top: 4px; color: var(--ok); font-weight: 600; }
/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 11px; border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .15s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease), border-color .15s var(--ease); text-decoration: none; font-family: var(--font-body); }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent-grad-2); background-size: 160% 160%; color: #06101f; box-shadow: 0 8px 24px rgba(47,178,255,.28); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 30px rgba(47,178,255,.4); transform: translateY(-1px); }
.btn-secondary { background: var(--panel-2); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
.btn-danger { background: rgba(255,90,122,.14); color: #ffb4c2; border-color: rgba(255,90,122,.35); }
.btn-danger:hover { background: rgba(255,90,122,.22); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn-icon { padding: 9px; }
/* ---------- Forms ---------- */
label, .ms-label { display: block; font-size: 12.5px; color: var(--text-dim); margin: 0 0 6px; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search], textarea, select {
width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 14px; font-family: inherit;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea { resize: vertical; min-height: 90px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,178,255,.15); }
input::placeholder, textarea::placeholder { color: var(--muted); }
/* File inputs (e.g. Avatar-Upload) - the browser's native "Datei auswählen"
button otherwise renders in the OS's default grey button style, clashing
with the rest of the design. The wrapper gets the same look as the other
form fields above, and ::file-selector-button (the modern standard - all
current browsers; ::-webkit-file-upload-button covers older WebKit) is
reskinned to match .btn-secondary. The file input itself can't take a
placeholder, so its own text ("Keine ausgewählt") stays in the browser's
UI font - only the clickable button part is themeable. */
input[type=file] {
width: 100%; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-dim); font-size: 13px; font-family: inherit;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
margin-right: 12px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .15s var(--ease), transform .12s var(--ease);
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover { border-color: var(--accent); }
input[type=file]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,178,255,.15); }
.ms-field { margin-bottom: 16px; }
.ms-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-dim); font-weight: 500; }
.ms-check input { width: auto; }
.ms-help { font-size: 12px; color: var(--muted); margin-top: 5px; }
fieldset { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 4px 16px 16px; margin: 0 0 16px; }
legend { padding: 0 8px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
/* ---------- Badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.badge-ok { background: rgba(55,211,143,.14); color: var(--ok); }
.badge-warn { background: rgba(255,176,32,.14); color: var(--warn); }
.badge-danger { background: rgba(255,90,122,.14); color: var(--danger); }
.badge-muted { background: rgba(124,134,184,.14); color: var(--muted); }
.badge-accent { background: rgba(47,178,255,.14); color: var(--accent); }
/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
td { padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr { transition: background .15s var(--ease); }
tbody tr:hover { background: rgba(47,178,255,.04); }
tr:last-child td { border-bottom: none; }
.ms-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); }
.ms-table-wrap table { border: none; }
/* ---------- Alerts / flash ---------- */
.alert { padding: 13px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert-error { background: rgba(255,90,122,.1); border: 1px solid rgba(255,90,122,.35); color: #ffc3cf; }
.alert-success { background: rgba(55,211,143,.1); border: 1px solid rgba(55,211,143,.35); color: #b9f5da; }
.alert-info { background: rgba(47,178,255,.1); border: 1px solid rgba(47,178,255,.35); color: #bfe6ff; }
/* ---------- Avatars ---------- */
.ms-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--panel-2); border: 1px solid var(--border); }
.ms-avatar-sm { width: 26px; height: 26px; }
.ms-avatar-lg { width: 60px; height: 60px; }
.ms-avatar-fallback { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); background: rgba(47,178,255,.12); }
/* ---------- Platform chips ---------- */
.platform-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; transition: border-color .15s var(--ease); }
.platform-chip:hover { border-color: var(--border-bright); }
.platform-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 6px currentColor; flex-shrink: 0; }
.flex > .platform-dot, .flex-between > .platform-dot { align-self: center; }
.p-facebook{background:#1877F2} .p-instagram{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)} .p-twitter{background:#0f1419}
.p-linkedin{background:#0A66C2} .p-pinterest{background:#E60023} .p-tiktok{background:#111} .p-youtube{background:#FF0000}
.p-google_business{background:#4285F4} .p-telegram{background:#26A5E4} .p-threads{background:#111}
.p-mastodon{background:#6364FF} .p-reddit{background:#FF4500} .p-bluesky{background:#1185FE} .p-discord{background:#5865F2}
/* ---------- Auth pages ---------- */
.ms-auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.ms-auth-card { width: 100%; max-width: 420px; background: linear-gradient(180deg, var(--panel), var(--card-grad-2)); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-lg); }
.ms-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; text-align: center; }
.ms-auth-brand img { width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(47,178,255,.28)); }
.ms-auth-brand { margin-bottom: 20px; }
.ms-auth-brand h1 { font-size: 20px; margin: 0; }
.ms-auth-brand span { color: var(--muted); font-size: 13px; }
.ms-auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
/* ---------- Public marketing ---------- */
.ms-public-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 5vw; }
.ms-public-nav { display: flex; align-items: center; gap: 26px; }
.ms-public-nav a { color: var(--text-dim); font-weight: 600; font-size: 14px; }
.ms-public-nav a:hover { color: var(--text); }
.ms-hero { padding: 92px 5vw 56px; text-align: center; max-width: 900px; margin: 0 auto; position: relative; }
.ms-hero::before, .ms-hero::after {
content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
}
.ms-hero::before { width: 420px; height: 420px; top: -140px; left: 8%; background: radial-gradient(circle, rgba(47,178,255,.45), transparent 70%); }
.ms-hero::after { width: 380px; height: 380px; top: -80px; right: 6%; background: radial-gradient(circle, rgba(124,92,255,.4), transparent 70%); }
.ms-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: var(--panel-glass); border: 1px solid var(--border-bright); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--accent); backdrop-filter: blur(8px); margin-bottom: 22px; }
.ms-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 8px var(--accent-3); }
.ms-hero h1 { font-size: clamp(34px, 5.2vw, 58px); line-height: 1.05; font-family: var(--font-display); background: var(--accent-grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; }
.ms-hero p.lead { font-size: 18px; color: var(--text-dim); max-width: 620px; margin: 20px auto 32px; }
.ms-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 20px 5vw 90px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .ms-pricing-grid { grid-template-columns: 1fr; } }
.ms-plan-card { background: linear-gradient(180deg, var(--panel), var(--card-grad-2)); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 30px; position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease); display: flex; flex-direction: column; }
.ms-plan-card:hover { transform: translateY(-4px); }
.ms-plan-card.featured { border-color: var(--accent); box-shadow: var(--glow-accent-lg); }
.ms-plan-card.featured::before {
content: attr(data-badge); position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--accent-grad-2); color: #06101f; font-size: 11px; font-weight: 800; letter-spacing: .03em;
padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(47,178,255,.4); white-space: nowrap;
}
.ms-plan-card form { display: flex; margin: 0; }
.ms-plan-card h3 { font-size: 17px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ms-plan-price { font-size: 40px; font-weight: 800; margin: 10px 0; font-family: var(--font-display); letter-spacing: -0.02em; }
.ms-plan-price small { font-size: 14px; color: var(--muted); font-weight: 500; font-family: var(--font-body); }
.ms-plan-features { flex: 1 1 auto; list-style: none; padding: 0; margin: 18px 0 24px; font-size: 13.5px; color: var(--text-dim); }
.ms-plan-features li { display: flex; gap: 8px; padding: 5px 0; align-items: center; }
.ms-plan-features li .ms-icon { color: var(--ok); }
/* ---------- Bio link public page ---------- */
.ms-bio-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 60px 20px; }
.ms-bio-avatar { width: 104px; height: 104px; border-radius: 18px; border: 3px solid var(--border); margin-bottom: 14px; object-fit: cover; box-shadow: 0 0 0 6px rgba(47,178,255,.08); }
.ms-bio-links { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.ms-bio-link { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 16px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); font-weight: 600; color: var(--text); transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); position: relative; overflow: hidden; }
.ms-bio-link:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; box-shadow: var(--glow-accent); }
/* ---------- Calendar ---------- */
.ms-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ms-cal-day { min-height: 108px; border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px; background: var(--panel-2); transition: border-color .15s var(--ease); }
.ms-cal-day:hover { border-color: var(--border-bright); }
.ms-cal-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ms-cal-day .num { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; background: none; border: 0; padding: 2px 4px; margin-left: -4px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.ms-cal-day .num:hover { color: var(--accent); background: rgba(47,178,255,.1); }
.ms-cal-post { font-size: 10.5px; background: rgba(47,178,255,.14); color: var(--accent); border-radius: 6px; padding: 3px 6px; margin-bottom: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cal-post b { font-weight: 700; margin-inline-end: 2px; }
.ms-cal-post.st-published { background: rgba(55,211,143,.14); color: var(--ok); }
.ms-cal-post.st-pending_approval { background: rgba(255,176,32,.14); color: var(--warn); }
.ms-cal-post.st-failed { background: rgba(255,90,122,.14); color: var(--danger); }
.ms-cal-weekday { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 700; text-align: center; padding-bottom: 6px; }
/* ---------- Calendar: toolbar + week view ---------- */
#cal-week[hidden], #cal-month[hidden] { display: none !important; }
.ms-cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 18px; padding: 12px 16px; background: linear-gradient(180deg, var(--panel), var(--card-grad-2)); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
.ms-cal-title { display: flex; align-items: center; gap: 12px; margin-inline-end: 6px; }
.ms-cal-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: rgba(47,178,255,.12); border: 1px solid var(--border-soft); }
.ms-cal-title small { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ms-cal-title strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -.01em; }
.ms-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; }
.ms-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 9px; cursor: pointer; }
.ms-seg button:hover { color: var(--text); }
.ms-seg button.active { background: var(--accent); color: #04121f; box-shadow: 0 4px 14px rgba(47,178,255,.35); }
.ms-cal-nav { display: inline-flex; align-items: center; gap: 8px; }
.ms-cal-tools { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.ms-cal-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; list-style: none; padding: 0; transition: border-color .15s var(--ease), color .15s var(--ease); }
.ms-cal-iconbtn::-webkit-details-marker { display: none; }
.ms-cal-iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.ms-cal-iconbtn-sm { width: 32px; height: 32px; border-radius: 9px; }
[dir="rtl"] .ms-cal-iconbtn .ms-icon { transform: scaleX(-1); }
[dir="rtl"] .ms-cal-iconbtn-sm .ms-icon { transform: none; }
.ms-cal-filter { position: relative; }
.ms-cal-filter > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.ms-cal-filter > summary::-webkit-details-marker { display: none; }
.ms-cal-filter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ms-cal-filter-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30; width: 250px; padding: 14px; display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.ms-cal-filter-panel label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ms-cal-filter-panel select { width: 100%; }
.ms-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; align-items: stretch; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow-x: auto; }
.ms-wk-col { min-width: 0; border-inline-end: 1px solid var(--border-soft); display: flex; flex-direction: column; }
.ms-wk-col:last-child { border-inline-end: 0; }
.ms-wk-col.today { background: rgba(47,178,255,.06); }
.ms-wk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 14px 12px 12px; border-bottom: 1px solid var(--border-soft); min-height: 70px; }
.ms-wk-dow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ms-wk-dnum { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.2; }
.ms-wk-col.today .ms-wk-dnum { color: var(--accent); }
.ms-wk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ms-wk-today { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(47,178,255,.18); color: var(--accent); }
.ms-wk-count { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }
.ms-wk-stack { padding: 10px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ms-wk-card { min-width: 0; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); transition: border-color .15s var(--ease), transform .15s var(--ease); }
.ms-wk-card:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.ms-wk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ms-wk-top .badge { margin-inline-start: auto; font-size: 10px; padding: 3px 8px; letter-spacing: .05em; text-transform: uppercase; }
.ms-wk-plats { display: inline-flex; align-items: center; }
.ms-wk-plat { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; border: 2px solid var(--panel-2); margin-inline-end: -6px; }
.ms-wk-plat-more { margin-inline-start: 10px; font-size: 11px; color: var(--muted); font-weight: 700; }
.ms-wk-plats .ms-wk-plat:last-child { margin-inline-end: 0; }
.ms-wk-time { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-inline-start: 8px; }
.ms-wk-body { display: flex; gap: 10px; align-items: flex-start; }
.ms-wk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ms-wk-title { cursor: pointer; margin: 0; font-size: 14px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-wk-src { font-size: 10px; padding: 2px 8px; }
.ms-wk-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ms-wk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-wk-excerpt { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ms-wk-actions { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.ms-wk-actions > .btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-content: center; }
.ms-wk-more { position: relative; }
.ms-wk-more > summary { list-style: none; }
.ms-wk-menu { position: absolute; inset-inline-end: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 150px; padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); display: grid; gap: 2px; }
.ms-wk-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: start; cursor: pointer; text-decoration: none; }
.ms-wk-menu-item:hover { background: rgba(47,178,255,.1); }
.ms-wk-menu-danger { color: var(--danger); }
.ms-wk-menu-danger:hover { background: rgba(255,90,122,.12); }
.ms-wk-card.st-failed { border-color: rgba(255,90,122,.45); }
.ms-cal-modal { max-width: 460px; width: 92%; max-height: 90vh; overflow-y: auto; display: grid; gap: 12px; }
.ms-cal-modal-badges { display: flex; gap: 6px; }
.ms-cal-modal-when { margin: 0; font-size: 13px; }
.ms-cal-modal-media img, .ms-cal-modal-media video { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; display: block; }
.ms-cal-modal-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.ms-cal-modal-link { font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.ms-cal-modal-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-cal-modal-foot { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 1200px) { .ms-week { grid-template-columns: repeat(7, minmax(210px, 1fr)); } }
@media (max-width: 680px) {
.ms-week { grid-template-columns: 1fr; overflow-x: visible; }
.ms-wk-col { border-inline-end: 0; border-bottom: 1px solid var(--border-soft); }
.ms-wk-col:last-child { border-bottom: 0; }
.ms-cal-tools { margin-inline-start: 0; width: 100%; justify-content: space-between; }
.ms-cal-filter-panel { inset-inline-end: auto; inset-inline-start: 0; }
}
/* ---------- Composer ---------- */
.composer-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 980px){ .composer-layout { grid-template-columns: 1fr; } }
.platform-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; margin-bottom: 8px; transition: border-color .15s var(--ease), background .15s var(--ease); }
.platform-toggle.active { border-color: var(--accent); background: rgba(47,178,255,.08); }
.platform-toggle input { width: auto; }
.media-drop { border: 2px dashed var(--border); border-radius: 14px; padding: 26px; text-align: center; color: var(--muted); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); }
.media-drop:hover { border-color: var(--accent); color: var(--text-dim); background: rgba(47,178,255,.04); }
.media-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.media-thumb { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
/* ---------- Composer live post preview ---------- */
.composer-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.composer-preview-tile { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px; }
.composer-preview-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.composer-preview-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.composer-preview-name { font-weight: 700; font-size: 13.5px; }
.composer-preview-provider { font-size: 11.5px; color: var(--muted); }
.composer-preview-text { font-size: 13.5px; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.composer-preview-media:empty { display: none; }
.composer-preview-media { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* The preview clones the composer's upload thumbnails, which carry the
.media-thumb class (fixed 76x76 + object-fit: cover). Inside the preview
that forced a cropped banner. Like Discord, a single image/video is shown
in full at its natural aspect ratio (capped in height); several are shown
as a 2-column grid of squares. */
.composer-preview-media img, .composer-preview-media video { display: block; width: 100%; height: auto; max-width: 100%; max-height: 320px; border-radius: 8px; object-fit: contain; background: rgba(0,0,0,.25); }
.composer-preview-media img:only-child, .composer-preview-media video:only-child { background: none; }
.composer-preview-media img:not(:only-child), .composer-preview-media video:not(:only-child) { width: calc(50% - 3px); height: 120px; object-fit: cover; }
.composer-preview-link { font-size: 12px; color: var(--accent); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; word-break: break-all; }
/* ---------- Onboarding checklist (dashboard) ---------- */
.ms-onboarding { position: relative; }
.ms-onboarding .ms-card-header { padding-right: 30px; }
.ms-onboarding-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.ms-onboarding-close:hover { border-color: var(--border); color: var(--text); }
.ms-onboarding-bar { height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin: 4px 0 18px; }
.ms-onboarding-bar-fill { height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .3s var(--ease); }
.ms-onboarding-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ms-onboarding-step { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--panel-2); text-decoration: none; transition: border-color .15s var(--ease), transform .12s var(--ease); }
.ms-onboarding-step:hover { border-color: var(--accent); transform: translateY(-1px); }
.ms-onboarding-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: transparent; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.ms-onboarding-check .ms-icon { width: 13px; height: 13px; }
.ms-onboarding-step.is-done .ms-onboarding-check { background: var(--ok); border-color: var(--ok); color: #06110c; }
.ms-onboarding-label { display: block; font-weight: 600; font-size: 13.5px; color: var(--text); }
.ms-onboarding-step.is-done .ms-onboarding-label { color: var(--muted); text-decoration: line-through; }
.ms-onboarding-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* ---------- Misc ---------- */
.ms-empty { text-align: center; padding: 54px 20px; color: var(--muted); }
.ms-empty .ms-icon { width: 44px; height: 44px; margin-bottom: 12px; color: var(--border); }
.ms-divider { height: 1px; background: var(--border-soft); margin: 20px 0; border: none; }
.ms-kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.ms-kv:last-child { border-bottom: none; }
.ms-kv .k { color: var(--muted); }
.ms-progress { height: 7px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.ms-progress > div { height: 100%; background: var(--accent-grad); }
.text-muted { color: var(--muted); }
.text-sm { font-size: 12.5px; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
/* ---------- Entrance animation (marketing pages only) ---------- */
@media (prefers-reduced-motion: no-preference) {
.ms-hero, .ms-pricing-grid { animation: ms-fade-up .6s var(--ease) both; }
.ms-pricing-grid { animation-delay: .08s; }
}
@keyframes ms-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* ---------- Mobile ---------- */
@media (max-width: 960px) {
/* Mobile-menu fix: .ms-shell has "position: relative; z-index: 1" (see
above), which makes it its own stacking context. The sidebar's z-index
(40) then only counts INSIDE the shell, while the .ms-overlay sits
outside it (z-index 35) and therefore painted on top of the whole shell
- including the open sidebar - so the menu looked dark and blurred and
couldn't be tapped. With z-index:auto the shell no longer forms a
stacking context, so sidebar (40) > overlay (35) > topbar (30). */
.ms-shell { z-index: auto; }
.ms-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: var(--shadow);
height: 100vh; height: 100dvh; max-width: 85vw; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ms-sidebar.open { transform: translateX(0); }
.ms-burger { display: inline-flex; }
.ms-content { padding: 18px 16px 50px; }
.ms-grid-2, .ms-grid-3, .ms-grid-4 { grid-template-columns: 1fr; }
}
/* ---------- Sidebar: desktop icon rail ----------
On desktop the sidebar can be collapsed to a slim icon rail (like a dock).
State lives in - set by a tiny inline script in the
layout head *before* first paint (no flash) from localStorage "ms_sidebar"
('open' = wide, anything else = rail; default is the rail). Clicking a
menu icon in rail mode expands the sidebar again (see js/app.js); the
chevron button in the brand row toggles it. Phones (<= 960px) never use
the rail - they keep the slide-in menu, so every rule is min-width scoped. */
.ms-nav-btn { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; }
.ms-sidebar-toggle { display: none; }
.ms-tooltip {
position: fixed; z-index: 60; pointer-events: none; padding: 7px 12px; border-radius: 9px;
background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow);
opacity: 0; transform: translateX(-4px); transition: opacity .12s var(--ease), transform .12s var(--ease);
}
.ms-tooltip.show { opacity: 1; transform: none; }
@media (min-width: 961px) {
.ms-sidebar-toggle {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto;
width: 30px; height: 30px; padding: 0; border-radius: 9px; cursor: pointer;
background: transparent; border: 1px solid var(--border); color: var(--muted);
transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.ms-sidebar-toggle:hover { color: var(--accent); border-color: var(--accent); background: rgba(47,178,255,.08); }
.ms-sidebar-toggle .ms-icon { width: 16px; height: 16px; transition: transform .25s var(--ease); }
html.ms-rail .ms-sidebar { width: 72px; padding: 20px 12px; overflow-x: hidden; scrollbar-width: none; }
html.ms-rail .ms-sidebar::-webkit-scrollbar { display: none; }
html.ms-rail .ms-sidebar-toggle { margin-left: 0; }
html.ms-rail .ms-sidebar-toggle .ms-icon { transform: rotate(180deg); }
html.ms-rail .ms-sidebar-brand { flex-direction: column; gap: 6px; padding: 2px 0 10px; }
html.ms-rail .ms-sidebar-brand img { width: 60px; height: 60px; }
html.ms-rail .ms-sidebar-brand > div { display: none; } /* name + version */
/* Groups become icon clusters separated by a hairline; the group title
collapses to a small "..." marker. */
html.ms-rail .ms-nav-group { margin-bottom: 0; padding: 10px 0; border-top: 1px solid var(--border-soft); }
html.ms-rail .ms-nav-label { font-size: 0; line-height: 1; padding: 0; margin: 0 0 8px; text-align: center; height: 10px; overflow: hidden; }
html.ms-rail .ms-nav-label::before { content: "\2022\2022\2022"; font-size: 9px; letter-spacing: 3px; color: var(--muted); opacity: .8; }
html.ms-rail .ms-nav-link { justify-content: center; gap: 0; width: 44px; height: 44px; padding: 0; margin: 0 auto 4px; border-radius: 12px; }
html.ms-rail .ms-nav-link .ms-icon { width: 20px; height: 20px; }
html.ms-rail .ms-nav-text { display: none; }
html.ms-rail .ms-nav-link.active::before { display: none; }
/* active = filled accent tile (same gradient as the primary buttons) */
html.ms-rail .ms-nav-link.active { background: var(--accent-grad-2); color: #06101f; box-shadow: 0 8px 22px rgba(47,178,255,.32); }
html.ms-rail .ms-nav-link.active .ms-icon { color: #06101f; }
}
/* ---------- Header polish (all sizes) ---------- */
/* Topbar icon buttons (theme toggle, bell, "new post" on phones) share one
exact 38x38 box - the moon used a smaller 14px icon and was 4px smaller
than the bell. Same 38px as .ms-avatar. */
.ms-topbar-right .btn-icon { width: 38px; height: 38px; padding: 0; }
.ms-topbar-right .btn-icon .ms-icon { width: 18px; height: 18px; }
.ms-topbar-new { white-space: nowrap; flex-shrink: 0; }
/* Page heads ("Dashboard" + action button): the button must never squeeze
its label into two lines - the title text shrinks/wraps instead. */
.flex-between > .btn { white-space: nowrap; flex-shrink: 0; }
.flex-between { gap: 12px; }
/* The "Kostenlos starten" button in the public header inherited the pale
.ms-public-nav link colour (higher specificity than .btn-primary) and was
hard to read on the gradient. */
.ms-public-nav a.btn, .ms-public-nav a.btn:hover { color: #06101f; white-space: nowrap; }
.ms-public-nav a.btn-primary { color: #06101f; }
/* ---------- Phones ---------- */
@media (max-width: 700px) {
.ms-topbar { padding: 0 12px; gap: 8px; }
.ms-topbar-left { gap: 8px; }
.ms-topbar-right { gap: 8px; }
.ms-topbar-title { display: none; } /* workspace name */
.ms-workspace-switch { max-width: 42vw; }
.ms-burger { width: 38px; height: 38px; padding: 0; align-items: center; justify-content: center; }
/* "Neuer Beitrag" in the topbar becomes a compact + button (the label
would otherwise wrap onto two lines and push the avatar off-screen). */
.ms-topbar-new { width: 38px; height: 38px; padding: 0; border-radius: 11px; }
.ms-topbar-new .ms-btn-label { display: none; }
.ms-topbar-new .ms-icon { width: 18px; height: 18px; }
.ms-content { padding: 18px 14px 50px; }
/* Public header: logo only, tighter, shifted left, nothing may wrap. */
.ms-public-header { padding: 14px 12px; gap: 10px; }
.ms-public-brand-text { display: none; }
.ms-public-nav { gap: 14px; }
.ms-public-nav a { white-space: nowrap; font-size: 13.5px; }
.ms-public-nav a.btn { padding: 9px 14px; font-size: 13px; }
}
.ms-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 35; display: none; }
.ms-overlay.open { display: block; }
/* ---------- Theme toggle button (topbar) ----------
Both icons are always in the DOM (simplest possible markup, no JS-driven
swap needed) - CSS just shows the one matching the current theme. Default
(no data-theme attribute = dark mode): moon shown, i.e. the icon depicts
the mode you're currently in. */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-flex; }
:root[data-theme="light"] .theme-icon-sun { display: inline-flex; }
:root[data-theme="light"] .theme-icon-moon { display: none; }
/* ---------- Notifications dropdown (topbar bell) ----------
Der Klingel-Button war bisher ein reiner href="#" Platzhalter (live von
Thorsten gemeldet: "wenn ich auf die Glocke draufklicke, passiert
nichts") - jetzt ein echtes Dropdown, serverseitig aus layouts/app.php
mit den letzten 15 Benachrichtigungen befüllt (siehe $notifications
dort), Ein-/Ausblenden + "alle gelesen" per JS (assets/js/app.js). */
.ms-notif-wrap { position: relative; }
.ms-notif-panel {
display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: calc(100vw - 32px);
max-height: 420px; overflow-y: auto;
background: linear-gradient(165deg, var(--panel) 0%, var(--card-grad-2) 100%); border: 1px solid var(--border-soft);
border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50;
}
.ms-notif-panel.open { display: block; }
.ms-notif-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); font-weight: 700; font-size: 13.5px; }
.ms-notif-mark-all { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 0; }
.ms-notif-mark-all:hover { text-decoration: underline; }
.ms-notif-empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.ms-notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.ms-notif-item:last-child { border-bottom: none; }
.ms-notif-item.is-unread { background: rgba(47,178,255,.05); }
.ms-notif-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.ms-notif-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ms-notif-body { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ms-notif-time { font-size: 11px; color: var(--muted); margin-top: 5px; }
/* ---------- Language switcher (public header, login/registration) ----------
dropdown - works without JS; app.js only closes it on an outside
click / Escape. z-index of the public header must sit above the hero so the
opened menu is never covered. */
.ms-public-header { z-index: 20; }
.ms-lang { position: relative; }
.ms-lang > summary { list-style: none; }
.ms-lang > summary::-webkit-details-marker { display: none; }
.ms-lang-btn {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
height: 38px; padding: 0 12px; border-radius: 11px; white-space: nowrap;
border: 1px solid var(--border-soft); background: rgba(255,255,255,.03);
color: var(--text-dim); font-size: 13.5px; font-weight: 600;
transition: border-color .15s, color .15s, background .15s;
}
.ms-lang-btn:hover, .ms-lang[open] > .ms-lang-btn { color: var(--text); border-color: var(--accent); }
.ms-lang-btn .ms-icon { width: 16px; height: 16px; }
.ms-lang-code { display: none; }
.ms-lang-menu {
position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; max-height: 320px; overflow-y: auto;
padding: 6px; border-radius: var(--radius); z-index: 60;
background: linear-gradient(165deg, var(--panel) 0%, var(--card-grad-2) 100%);
border: 1px solid var(--border-soft); box-shadow: var(--shadow-lg);
}
.ms-lang-menu a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-dim);
}
.ms-lang-menu a:hover { background: rgba(47,178,255,.08); color: var(--text); }
.ms-lang-menu a.active { color: var(--accent); }
.ms-lang-menu .ms-icon { width: 15px; height: 15px; }
.ms-public-nav .ms-lang-btn { color: var(--text-dim); }
/* login / registration: fixed top-right corner */
.ms-auth-lang { position: fixed; top: 16px; right: 16px; z-index: 30; }
@media (max-width: 640px) {
.ms-lang-name { display: none; }
.ms-lang-code { display: inline; }
.ms-lang-btn { padding: 0 10px; gap: 6px; }
}
@media (max-width: 480px) {
/* keep the phone header on one line: logo | language | Anmelden | Start */
.ms-public-nav .ms-nav-pricing { display: none; }
}
/* ---------- User menu (topbar avatar) ---------- */
.ms-user-wrap { position: relative; }
.ms-user-wrap > summary { list-style: none; }
.ms-user-wrap > summary::-webkit-details-marker { display: none; }
.ms-user-btn { display: block; padding: 0; margin: 0; border: none; background: none; border-radius: 50%; cursor: pointer; line-height: 0; user-select: none; }
.ms-user-btn .ms-avatar { transition: border-color .15s, box-shadow .15s; }
.ms-user-btn:hover .ms-avatar, .ms-user-wrap[open] .ms-avatar { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,178,255,.15); }
.ms-user-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-user-menu {
display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 240px; max-width: calc(100vw - 32px); padding: 6px;
background: linear-gradient(165deg, var(--panel) 0%, var(--card-grad-2) 100%); border: 1px solid var(--border-soft);
border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50;
}
.ms-user-wrap[open] > .ms-user-menu { display: block; }
.ms-user-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.ms-user-menu-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-user-menu-mail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-user-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; text-align: left;
color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; border-radius: 8px; cursor: pointer;
}
.ms-user-menu-item:hover { background: rgba(47,178,255,.09); color: var(--accent); }
.ms-user-menu-danger:hover { background: rgba(255,90,110,.1); color: #ff6b81; }
.ms-user-menu-sep { height: 1px; background: var(--border-soft); margin: 6px 0; }
.ms-user-menu form { margin: 0; }
#profile, #password { scroll-margin-top: 90px; }
/* ---------- Copyright line ---------- */
.ms-copyright { text-align: center; padding: 22px 16px; color: var(--muted); font-size: 12.5px; }
.ms-main > .ms-copyright { margin-top: auto; }
.ms-auth-wrap > .ms-copyright { padding: 18px 0 0; }
footer > .ms-copyright { padding: 30px; }
/* ---------- Right-to-left languages (Arabic, ...): ---------- */
[dir="rtl"] .ms-sidebar { border-right: none; border-left: 1px solid var(--border-soft); box-shadow: -1px 0 0 rgba(255,255,255,.02) inset; }
[dir="rtl"] .ms-nav-link.active::before { left: auto; right: -14px; border-radius: 3px 0 0 3px; }
[dir="rtl"] .ms-nav-link .badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ms-nav-btn, [dir="rtl"] .ms-user-menu-item { text-align: right; }
[dir="rtl"] th { text-align: right; }
[dir="rtl"] .ms-stat::before { left: auto; right: 0; }
[dir="rtl"] .ms-notif-panel, [dir="rtl"] .ms-user-menu, [dir="rtl"] .ms-lang-menu { right: auto; left: 0; }
[dir="rtl"] .ms-auth-lang { right: auto; left: 16px; }
[dir="rtl"] .ms-onboarding-close { right: auto; left: 16px; }
[dir="rtl"] .ms-onboarding .ms-card-header { padding-right: 0; padding-left: 30px; }
[dir="rtl"] .ms-notif-dot { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .ms-tooltip { transform: translateX(4px); }
[dir="rtl"] .ms-tooltip.show { transform: none; }
@media (min-width: 961px) {
[dir="rtl"] .ms-sidebar-toggle { margin-left: 0; margin-right: auto; }
html[dir="rtl"].ms-rail .ms-sidebar-toggle { margin-right: 0; }
[dir="rtl"] .ms-sidebar-toggle .ms-icon { transform: rotate(180deg); }
html[dir="rtl"].ms-rail .ms-sidebar-toggle .ms-icon { transform: none; }
}
@media (max-width: 960px) {
[dir="rtl"] .ms-sidebar { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] .ms-sidebar.open { transform: translateX(0); }
}
/* Row of action buttons of equal size (e.g. Herunterladen / Löschen): same width and height,
whether the buttons are links or form buttons. */
.ms-btn-row { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: stretch; vertical-align: middle; }
.ms-btn-row form { display: flex; margin: 0; }
.ms-btn-row .btn { width: 100%; box-sizing: border-box; line-height: 1.25; white-space: nowrap; }
/* ---------- Bio-Link editor: profile picture ---------- */
.ms-bio-avatar-edit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ms-bio-avatar-thumb { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.ms-bio-avatar-edit .ms-check { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.ms-bio-avatar-edit input[type=file] { width: auto; max-width: 100%; padding: 6px; }
.ms-bio-avatar-edit .ms-check input { width: auto; }
/* ---------- Bio-Link: blocks (heading / divider / image) ---------- */
.ms-bio-heading { width: 100%; margin: 10px 0 0; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.ms-bio-text { width: 100%; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); text-align: center; overflow-wrap: anywhere; }
.ms-bio-divider { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.ms-bio-figure { width: 100%; margin: 0; }
.ms-bio-image { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.ms-bio-figure figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
.ms-bio-block { align-items: center; gap: 12px; }
.ms-bio-block-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ms-bio-block-main > div { min-width: 0; overflow-wrap: anywhere; }
.ms-bio-block-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; }
.ms-bio-block-hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0 2px; width: 120px; }
.ms-bio-block-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ms-bio-block-actions form { margin: 0; display: flex; }
.ms-bio-block-actions .btn[disabled] { opacity: .35; cursor: default; }
.ms-bio-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ms-bio-add select { flex: 0 0 auto; width: auto; min-width: 130px; }
.ms-bio-add input[type=text], .ms-bio-add input[type=url] { flex: 1 1 160px; min-width: 120px; }
.ms-bio-add input[type=file] { flex: 1 1 160px; width: auto; padding: 6px; }
.ms-bio-add textarea { flex: 1 1 100%; min-height: 120px; resize: vertical; }
.ms-bio-add [hidden] { display: none !important; }
/* ---------- Bio-Link: theme picker ---------- */
.ms-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ms-theme-tile { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ms-theme-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ms-theme-swatch { position: relative; height: 54px; border-radius: 12px; border: 2px solid var(--border); display: block; overflow: hidden; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ms-theme-swatch i { position: absolute; inset-inline-start: 10px; bottom: 10px; width: 46%; height: 8px; border-radius: 999px; }
.ms-theme-tile:hover .ms-theme-swatch { border-color: var(--border-bright); }
.ms-theme-tile input:checked + .ms-theme-swatch { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,178,255,.25); }
.ms-theme-tile input:focus-visible + .ms-theme-swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-theme-name { line-height: 1.25; }
.ms-shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ms-shape-tile { position: relative; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--text-dim); }
.ms-shape-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ms-shape-sample { display: block; height: 38px; background: var(--panel-2, var(--panel)); border: 2px solid var(--border); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ms-shape-tile:hover .ms-shape-sample { border-color: var(--border-bright); }
.ms-shape-tile input:checked + .ms-shape-sample { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,178,255,.25); }
.ms-shape-tile input:focus-visible + .ms-shape-sample { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- MeinLink: pages overview, statistics ---- */
.ml-page-card { display: flex; flex-direction: column; gap: 12px; }
.ml-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ml-page-head h3 { margin: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-page-url { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); word-break: break-all; }
.ml-page-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ml-page-stats div { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.ml-page-stats b { display: block; font-size: 18px; }
.ml-page-stats span { font-size: 11.5px; color: var(--text-dim); }
.ml-page-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: auto; }
.ml-page-actions form { margin: 0; display: flex; }
.ml-page-actions .btn { display: inline-flex; align-items: center; justify-content: center; }
.ml-page-actions form .btn { height: 100%; }
.ml-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ml-spark { width: 100%; height: 70px; display: block; }
.ml-spark rect { fill: var(--accent); opacity: .85; }
.ml-spark rect:hover { opacity: 1; }
.ml-empty { text-align: center; padding: 34px 18px; }
.ml-empty h3 { margin-bottom: 6px; }
.ml-new-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 720px) { .ml-new-form { grid-template-columns: 1fr; } }
/* ---------- Landing page ---------- */
.ml-land-hero { max-width: 1160px; margin: 0 auto; padding: 84px 5vw 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; position: relative; }
.ml-land-hero::before, .ml-land-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1; }
.ml-land-hero::before { width: 420px; height: 420px; top: -80px; left: -6%; background: radial-gradient(circle, rgba(47,178,255,.32), transparent 70%); }
.ml-land-hero::after { width: 420px; height: 420px; bottom: -40px; right: 0; background: radial-gradient(circle, rgba(124,92,255,.32), transparent 70%); }
.ml-land-copy h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; font-family: var(--font-display); background: var(--accent-grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; margin: 0; }
.ml-land-copy .lead { font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 560px; margin: 22px 0 32px; }
.ml-land-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-lg { padding: 14px 28px; font-size: 15.5px; border-radius: 12px; }
.ml-land-visual { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.ml-phone-glow { position: absolute; inset: 8% 14%; border-radius: 50%; background: var(--accent-grad); opacity: .28; filter: blur(60px); }
.ml-phone { position: relative; width: 270px; aspect-ratio: 9 / 18.2; border-radius: 40px; padding: 10px; background: linear-gradient(160deg, #2a3268, #0d1230); border: 1px solid var(--border-bright); box-shadow: var(--shadow-lg), var(--glow-accent-lg); transform: rotate(3deg); }
.ml-phone-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 76px; height: 20px; border-radius: 999px; background: #05070f; z-index: 2; }
.ml-phone-screen { height: 100%; border-radius: 31px; overflow: hidden; padding: 58px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: radial-gradient(400px 260px at 50% -6%, #23307a, #0a0e1f 62%); }
.ml-mock-avatar { width: 74px; height: 74px; border-radius: 50%; background: var(--accent-grad-2); box-shadow: 0 0 0 4px rgba(47,178,255,.2); }
.ml-mock-name { font-weight: 800; font-size: 16px; color: #fff; margin-top: 2px; }
.ml-mock-bio { width: 68%; height: 8px; border-radius: 99px; background: rgba(170,178,224,.35); margin-bottom: 10px; }
.ml-mock-btn { width: 100%; padding: 12px 0; text-align: center; border-radius: 999px; background: var(--accent); color: #06122a; font-weight: 700; font-size: 13.5px; }
.ml-mock-btn-alt { background: var(--accent-grad); color: #fff; }
.ml-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; font-weight: 800; font-size: 14px; color: var(--text); background: var(--panel-glass); border: 1px solid var(--border-bright); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.ml-chip .ms-icon-sm { color: var(--accent-3); }
.ml-chip-a { top: 16%; left: 6%; }
.ml-chip-b { bottom: 18%; right: 4%; }
@media (prefers-reduced-motion: no-preference) {
.ml-phone { animation: ml-float 6s ease-in-out infinite; }
.ml-chip-a { animation: ml-float-s 5s ease-in-out infinite; }
.ml-chip-b { animation: ml-float-s 5.6s ease-in-out infinite reverse; }
}
@keyframes ml-float { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-10px); } }
@keyframes ml-float-s { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ml-features { max-width: 1100px; margin: 0 auto; padding: 40px 5vw 30px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 20px; }
.ml-feature { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), #0d1330); border: 1px solid var(--border); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ml-feature:hover { transform: translateY(-4px); border-color: var(--border-bright); box-shadow: var(--glow-accent); }
.ml-feature-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #fff; background: var(--accent-grad); box-shadow: 0 10px 24px rgba(47,178,255,.25); }
.ml-feature h3 { margin: 0 0 8px; font-size: 19px; }
.ml-feature p { margin: 0; color: var(--text-dim); line-height: 1.6; }
.ml-cta { max-width: 1100px; margin: 40px auto 70px; padding: 48px 5vw; text-align: center; border-radius: 28px; background: linear-gradient(135deg, rgba(47,178,255,.16), rgba(124,92,255,.2)); border: 1px solid var(--border-bright); width: calc(100% - 10vw); }
.ml-cta h2 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 34px); font-family: var(--font-display); }
.ml-cta p { margin: 0 auto 26px; color: var(--text-dim); max-width: 520px; }
@media (max-width: 900px) {
.ml-land-hero { grid-template-columns: 1fr; padding-top: 56px; text-align: center; }
.ml-land-copy .lead { margin-left: auto; margin-right: auto; }
.ml-land-actions { justify-content: center; }
.ml-features { grid-template-columns: 1fr; grid-auto-rows: auto; }
}
/* Settings: list of own pages */
.ml-link-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.ml-link-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border, rgba(255,255,255,.08));}
.ml-link-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ml-link-main a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.ml-link-actions{display:flex;gap:8px;}
.ml-cta { position: relative; }
.ml-cta-logo { width: 150px; height: 150px; object-fit: contain; display: block; margin: -100px auto 6px; filter: drop-shadow(0 16px 36px rgba(47,178,255,.35)); }
/* Public header: large logo (contains the wordmark) */
.ml-public-logo { display: flex; align-items: center; margin: -10px 0; }
.ml-public-logo img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 20px rgba(47,178,255,.35)); }
@media (max-width: 640px) { .ml-public-logo img { width: 84px; height: 84px; } .ml-public-logo { margin: -6px 0; } }
.ms-public-legal-links { margin-left: 8px; }
.ms-public-legal-links a { color: inherit; text-decoration: underline; opacity: .85; }
.ms-public-section h1 { margin-bottom: 24px; }
.ms-public-section p { line-height: 1.75; }
/* Bundled background presets */
.ms-bg-preset-preview { margin-top:12px; min-height:8px; }
.ms-bg-preset-preview img { display:block; width:100%; max-width:180px; aspect-ratio:9/16; object-fit:cover; border:2px solid var(--accent); border-radius:12px; background:var(--panel-2); box-shadow:0 0 0 3px rgba(47,178,255,.14); }
/* License administration */
.ms-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.ms-definition-list { margin:0; display:grid; gap:.75rem; }
.ms-definition-list > div { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--ms-border, rgba(255,255,255,.08)); }
.ms-definition-list dt { color:var(--ms-muted, #9aa4c7); }
.ms-definition-list dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.badge-success { background:rgba(34,197,94,.16); color:#86efac; }
.badge-warning { background:rgba(245,158,11,.16); color:#fcd34d; }
.badge-muted { background:rgba(148,163,184,.16); color:#cbd5e1; }
@media (max-width: 900px) { .ms-grid-2 { grid-template-columns:1fr; } .ms-definition-list > div { flex-direction:column; gap:.2rem; } .ms-definition-list dd { text-align:left; } }
/* ---------- Admin user action alignment ---------- */
.ms-user-actions-cell { text-align: right; white-space: nowrap; }
.ms-user-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; vertical-align: middle; }
.ms-user-actions form { display: flex; align-items: center; margin: 0; padding: 0; }
.ms-user-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; line-height: 1.2; margin: 0; }
.ms-user-actions .ms-icon-action { width: 34px; min-width: 34px; padding: 7px; }
@media (max-width: 900px) {
.ms-user-actions-cell { min-width: 280px; }
.ms-user-actions { justify-content: flex-start; }
}
.ms-link-schedule{margin-top:.5rem;flex-basis:100%;}.ms-inline-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end;margin-top:.5rem}.ms-inline-form label{display:flex;flex-direction:column;gap:.25rem}.ms-inline-form input{max-width:190px}
.ms-bio-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ms-bio-filter input, .ms-bio-filter select { min-width: 0; flex: 1 1 170px; }
.ms-bio-filter select { flex: 0 1 170px; }
.ms-bio-filter [hidden] { display: none !important; }
@media (max-width: 620px) {
.ms-bio-filter input, .ms-bio-filter select { flex-basis: 100%; }
}
.ms-inline-form{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin-top:.25rem}.ms-inline-form label{display:flex;flex-direction:column;gap:.3rem;flex:1 1 180px}.ms-inline-form input{width:100%;max-width:220px;min-width:0}.ms-schedule-trigger{position:relative}.ms-schedule-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(3,7,20,.72);backdrop-filter:blur(4px)}.ms-schedule-modal[hidden]{display:none!important}.ms-schedule-modal-panel{width:min(100%,430px);background:var(--panel, #111936);border:1px solid var(--border, rgba(255,255,255,.12));border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.45);padding:1rem}.ms-schedule-modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.ms-schedule-modal-header h4{margin:0;font-size:1rem}.ms-schedule-modal .ms-inline-form{margin-top:0}.ms-schedule-help{margin-top:.75rem;line-height:1.5}@media (max-width:640px){.ms-schedule-modal{padding:.75rem}.ms-schedule-modal-panel{border-radius:14px;padding:.9rem}.ms-schedule-modal .ms-inline-form{display:grid;grid-template-columns:1fr}.ms-schedule-modal .ms-inline-form input{max-width:none}.ms-schedule-modal .ms-inline-form button{width:100%}}
.ms-image-picker{cursor:pointer;align-items:center;justify-content:center}.ms-image-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center}
/* Branded delete confirmation modal */
.ms-delete-modal{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(3,7,20,.76);backdrop-filter:blur(5px)}
.ms-delete-modal[hidden]{display:none!important}
.ms-delete-modal-panel{width:min(100%,420px);padding:1.35rem;background:linear-gradient(180deg,var(--panel,#111936),var(--card-grad-2,#0d1330));border:1px solid var(--border,rgba(255,255,255,.14));border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.5);text-align:center}
.ms-delete-modal-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin:0 auto .85rem;border-radius:14px;background:rgba(248,113,113,.12);color:#fb7185;border:1px solid rgba(248,113,113,.28)}
.ms-delete-modal-panel h3{margin:0 0 .55rem;font-size:1.12rem}
.ms-delete-modal-panel p{margin:0 auto;max-width:34rem;line-height:1.55}
.ms-delete-modal-actions{display:flex;justify-content:center;gap:.65rem;margin-top:1.15rem;flex-wrap:wrap}
.ms-delete-modal-actions .btn-danger{background:linear-gradient(135deg,#ef4444,#be123c);color:#fff;border:0}
@media (max-width:640px){.ms-delete-modal{padding:.75rem}.ms-delete-modal-panel{padding:1.1rem;border-radius:15px}.ms-delete-modal-actions{display:grid;grid-template-columns:1fr 1fr}.ms-delete-modal-actions .btn{width:100%}}