:root,
html[data-theme="dark"] {
color-scheme: dark;
--bg: #0e1116;
--bg-soft: #161a21;
--panel: #1c2129;
--panel-2: #262c36;
--line: rgba(255,255,255,.09);
--text: #f3f6f8;
--muted: #95a0ab;
--gold: #ffd000;
--gold-2: #ffe14a;
--cyan: #2ec4f3;
--ink: #111318;
--ok: #3dce8a;
--danger: #ff6b7a;
--info: #2ec4f3;
--shadow: 0 18px 48px rgba(0,0,0,.32);
--header: #12161c;
--header-text: #f3f6f8;
--hero: #10141a;
--input: #12161c;
--focus: rgba(46,196,243,.35);
--footer-h: 56px;
}
html[data-theme="light"] {
color-scheme: light;
--bg: #eef2f6;
--bg-soft: #e4eaf0;
--panel: #ffffff;
--panel-2: #f6f8fb;
--line: rgba(20,23,28,.1);
--text: #15181d;
--muted: #5e6872;
--gold: #efc000;
--gold-2: #ffd84a;
--cyan: #1298c4;
--ink: #15181d;
--ok: #178a56;
--danger: #c83a4a;
--info: #1298c4;
--shadow: 0 14px 36px rgba(20,23,28,.08);
--header: #ffffff;
--header-text: #15181d;
--hero: #eef3f7;
--input: #fff;
--focus: rgba(18,152,196,.22);
--footer-h: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-bottom: calc(var(--footer-h) + 24px); }
body {
font-family: Inter, system-ui, sans-serif;
background:
radial-gradient(1200px 500px at 0% 0%, rgba(46,196,243,.06), transparent 50%),
radial-gradient(900px 400px at 100% 10%, rgba(255,208,0,.05), transparent 46%),
var(--bg);
color: var(--text);
min-height: 100vh;
line-height: 1.55;
padding-bottom: var(--footer-h);
}
body.is-busy { cursor: progress; }
body.menu-open { overflow: hidden; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #7ad8f6; }
img { max-width: 100%; }
.shell, .container {
width: min(1680px, calc(100% - 48px));
margin: 0 auto;
}
.topbar {
display: flex; justify-content: space-between; gap: 12px; align-items: center;
padding: 0; font-size: 13px; color: var(--muted); background: var(--bg-soft);
}
.topbar-inner {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 9px 0;
}
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.tag-imp {
display: inline-flex; align-items: center; background: var(--cyan); color: #083140;
font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 6px; margin-right: 8px;
}
.m-wrap { position: sticky; top: 0; z-index: 30; background: var(--header); box-shadow: 0 8px 24px rgba(0,0,0,.18); border-bottom: 1px solid var(--line); }
.m-nav {
display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0;
}
.nav-burger, .nav-layer, .nav-close { display: none; }
.nav-layer[hidden] { display: none !important; }
@media (min-width: 961px) {
.nav-layer, .nav-burger, .nav-close { display: none !important; }
}
body.menu-open .m-wrap { z-index: 100; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--header-text); font-weight: 800; letter-spacing: .04em; font-size: 15px; }
.brand-word { font-family: Orbitron, Inter, sans-serif; font-weight: 700; letter-spacing: .12em; color: inherit; }
.logo-mark {
width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: #0a0a0a; display: grid; place-items: center; flex: 0 0 36px;
}
.logo-mark img { width: 36px; height: 36px; display: block; }
.nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--muted); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.nav a.active, .nav a:hover { color: var(--header-text); }
.nav .chip, .chip {
display: inline-flex; align-items: center;
background: rgba(46,196,243,.16); color: var(--cyan);
font-size: 10px; padding: 2px 6px; border-radius: 999px; margin-left: 4px; font-weight: 800; letter-spacing: .06em;
}
.btn-primary .chip {
background: #111318; color: #e8b800; -webkit-text-fill-color: #e8b800; margin-left: 6px;
}
.btn, button.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 800; cursor: pointer;
font-family: inherit; font-size: 13px; letter-spacing: .03em; text-transform: none;
color: inherit;
}
.btn .bi, button.btn .bi { font-size: 1.05em; line-height: 1; }
.btn-primary,
a.btn-primary,
button.btn-primary,
.nav a.btn-primary,
.nav a.btn-account {
background: #e8b800;
color: #111318 !important;
-webkit-text-fill-color: #111318;
box-shadow: 0 8px 18px rgba(232,184,0,.28);
font-weight: 800;
}
.btn-primary:hover,
a.btn-primary:hover,
.nav a.btn-primary:hover,
.nav a.btn-account:hover {
filter: brightness(1.04);
color: #111318 !important;
-webkit-text-fill-color: #111318;
}
.btn-account { padding: 10px 16px; letter-spacing: 0; }
.m-nav-account { display: none; }
.nav a.btn-primary .bi, a.btn-primary .bi, button.btn-primary .bi { color: #111318 !important; }
.btn-dark { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-weight: 600; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-weight: 600; }
.btn-danger { background: #8b2430; color: #fff; text-transform: none; }
.btn-ok { background: #1f6b45; color: #fff; text-transform: none; }
.hero-ssd {
position: relative; overflow: hidden; color: #fff;
display: flex; align-items: center;
min-height: min(92vh, 980px);
padding: 96px clamp(36px, 5.4vw, 88px) 92px;
background:
radial-gradient(980px 460px at 84% 16%, #1d2a38 0%, transparent 52%),
linear-gradient(180deg, #10151b, var(--hero));
}
.hero-ssd .shell.hero-grid { width: min(1480px, 100%); }
.hero-ssd::before {
content: ""; position: absolute; width: 560px; height: 560px; right: 6%; top: -140px; z-index: 0;
background: radial-gradient(circle, rgba(46,196,243,.18), transparent 68%);
animation: heroOrb 9s ease-in-out infinite; pointer-events: none;
}
.hero-speed {
position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.hero-speed-wash {
position: absolute; inset: 0;
background:
radial-gradient(58% 48% at 64% 40%, rgba(46,196,243,.1), transparent 58%),
radial-gradient(42% 36% at 22% 58%, rgba(255,208,0,.04), transparent 62%);
}
.hero-speed-grid {
position: absolute; left: -18%; right: -18%; bottom: -42%; height: 78%;
background-image:
linear-gradient(to right, rgba(46,196,243,.13) 1px, transparent 1px),
linear-gradient(to bottom, rgba(46,196,243,.1) 1px, transparent 1px);
background-size: 54px 54px;
transform: perspective(520px) rotateX(64deg);
transform-origin: 50% 100%;
animation: heroGridRush 16s linear infinite;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 76%);
mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 76%);
}
.hero-speed-canvas {
position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.hero-speed::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(16,21,27,.42), transparent 14%, transparent 86%, rgba(16,21,27,.42)),
linear-gradient(180deg, rgba(16,21,27,.18), transparent 22%, transparent 78%, rgba(16,21,27,.28));
pointer-events: none;
}
.hero-grid {
display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 4.4vw, 72px);
align-items: center; width: 100%; position: relative; z-index: 1;
}
.hero-copy {
display: flex; flex-direction: column; justify-content: center;
min-height: 0; padding: 4px 0;
}
.hero-ssd h1 {
font-size: clamp(52px, 7.4vw, 96px); line-height: .92; margin: 0 0 16px; letter-spacing: -.04em; min-height: .92em;
color: #7ad8f6;
}
.hero-ssd .lead { color: #d5dbe3; font-size: 20px; margin: 0; max-width: 46ch; min-height: 0; line-height: 1.5; font-weight: 500; }
.hero-ssd h1.is-typing::after,
.hero-ssd .lead.is-typing::after,
.preview-name.is-typing::after {
content: ""; display: inline-block; width: 2px; height: .82em; margin-left: 4px;
background: var(--cyan); vertical-align: text-bottom; animation: promoCaret .7s step-end infinite;
}
.hero-opts { margin-top: 22px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: 12px; align-items: center; color: #eef3f7; font-weight: 600; font-size: 15px; }
.hero-ssd .checks li {
font-size: clamp(17px, 1.28vw, 20px);
letter-spacing: .01em; line-height: 1.3; font-weight: 600;
}
.hero-ssd .checks .bi { font-size: 1.05em; color: #2ec4f3; filter: drop-shadow(0 0 6px rgba(46,196,243,.35)); }
.checks .bi { color: #2ec4f3; font-size: 18px; flex: 0 0 18px; }
.hero-ssd.is-playing .checks li {
opacity: 0; transform: translateY(10px);
}
.hero-ssd.is-playing .checks li.is-in {
opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease;
}
.hero-search { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 560px; }
.hero-search .form-alert, .domain-search .form-alert { flex: 1 1 100%; margin: 6px 0 0; }
.hero-search input {
flex: 1; background: #0e1116; border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: 13px 18px;
}
.hero-note { color: #9aa6b2; font-size: 14px; margin: 20px 0 0; max-width: 42ch; }
.hero-ssd .hero-note {
font-size: clamp(16px, 1.15vw, 18px);
color: #7ad8f6; font-weight: 500; letter-spacing: .01em; line-height: 1.45;
margin-top: 18px; max-width: 36ch;
}
.hero-note-flash {
position: relative; display: inline-block;
color: #7ad8f6;
overflow: hidden;
text-shadow: 0 0 16px rgba(46,196,243,.35);
animation: heroNoteGlow 3.2s ease-in-out infinite;
}
.hero-note-flash::after {
content: "";
position: absolute; top: -40%; bottom: -40%; width: 38%;
left: -45%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), rgba(255,255,255,.85), rgba(255,225,74,.45), transparent);
transform: skewX(-18deg);
pointer-events: none;
animation: heroNoteSweep 3.2s ease-in-out infinite;
}
@keyframes heroNoteGlow {
0%, 100% { text-shadow: 0 0 10px rgba(46,196,243,.22); }
50% { text-shadow: 0 0 22px rgba(122,216,246,.7), 0 0 36px rgba(46,196,243,.35); }
}
@keyframes heroNoteSweep {
0%, 28% { left: -48%; opacity: 0; }
38% { opacity: 1; }
62% { left: 108%; opacity: 0; }
100% { left: 108%; opacity: 0; }
}
.cpanel-art, .preview-board {
background: linear-gradient(180deg, #1b212b, #12161c);
border: 1px solid rgba(46,196,243,.25); border-radius: 20px; padding: 22px; box-shadow: 0 28px 60px rgba(0,0,0,.38);
}
.preview-board { display: flex; flex-direction: column; gap: 16px; min-height: 420px; height: 100%; position: relative; overflow: hidden; }
.preview-board::after {
content: ""; position: absolute; left: -20%; right: -20%; height: 42%; top: -40%;
background: linear-gradient(180deg, transparent, rgba(46,196,243,.08), transparent);
pointer-events: none;
}
.hero-ssd.is-playing .preview-board { opacity: 0; transform: translateY(18px) scale(.985); }
.hero-ssd.is-playing .preview-board.is-in {
opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease;
}
.hero-ssd.is-playing .preview-board.is-in::after { animation: previewScan 4.8s ease-in-out infinite; }
.preview-top {
display: flex; align-items: center; gap: 10px; background: #171c24; border-radius: 10px; padding: 10px 12px;
}
.preview-dots { display: flex; gap: 6px; }
.preview-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.preview-dots i:nth-child(1) { background: #ff5f57; }
.preview-dots i:nth-child(2) { background: #ffbd2e; }
.preview-dots i:nth-child(3) { background: #28c840; }
.preview-board.is-in .preview-dots i { animation: previewDot 1.8s ease-in-out infinite; }
.preview-board.is-in .preview-dots i:nth-child(2) { animation-delay: .15s; }
.preview-board.is-in .preview-dots i:nth-child(3) { animation-delay: .3s; }
.preview-name { color: #8aa0b5; font-size: 12px; font-weight: 700; letter-spacing: .04em; min-height: 1em; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.preview-cell {
background: #151a22; border: 1px solid rgba(46,196,243,.18); border-radius: 12px;
padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; color: #d5dbe3;
transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.hero-ssd.is-playing .preview-cell { opacity: 0; transform: translateY(12px); }
.hero-ssd.is-playing .preview-cell.is-in {
opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease, border-color .35s ease, box-shadow .35s ease;
}
.preview-cell.is-live {
border-color: rgba(46,196,243,.55);
box-shadow: 0 0 0 1px rgba(46,196,243,.18), 0 12px 28px rgba(46,196,243,.12);
}
.preview-cell .bi { color: var(--cyan); font-size: 22px; }
.preview-cell b { color: #fff; font-size: 14px; }
.preview-cell span { color: #8aa0b5; font-size: 12px; }
@keyframes heroOrb {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
50% { transform: translate3d(-24px, 18px, 0) scale(1.08); opacity: 1; }
}
@keyframes heroGridRush {
to { background-position: 0 54px; }
}
@keyframes previewScan {
0% { top: -45%; }
100% { top: 110%; }
}
@keyframes previewDot {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
.eyebrow { color: var(--cyan); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; font-weight: 800; margin: 0 0 10px; }
.card {
background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.card-pad { padding: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.price { font-size: 36px; font-weight: 800; margin: 8px 0; }
.price span { font-size: 14px; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.section { padding: 64px 0; }
.section h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
.section-head { text-align: center; margin: 0 auto 40px; }
.section-head .eyebrow { margin: 0 0 10px; }
.section-head h2 { margin: 0 auto; max-width: 18ch; line-height: 1.2; }
.badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-ok { background: rgba(61,206,138,.15); color: var(--ok); }
.badge-warn { background: rgba(255,208,0,.16); color: var(--gold); }
.badge-off { background: rgba(255,107,122,.15); color: var(--danger); }
.badge-info { background: rgba(46,196,243,.16); color: var(--cyan); }
form .row { margin-bottom: 14px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
input:not([type]),
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search], input[type=url],
input[type=date], input[type=datetime-local], input[type=month], input[type=time],
select, textarea, .pass-field input {
width: 100%; background: var(--input); border: 1px solid var(--line); color: var(--text);
border-radius: 12px; padding: 12px 14px; font: inherit;
box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
transition: border-color .15s, box-shadow .15s;
min-width: 0;
box-sizing: border-box;
accent-color: var(--cyan);
color-scheme: inherit;
}
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time] {
min-height: 46px;
display: block;
line-height: 1.25;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: .78;
}
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=datetime-local]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=month]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator {
filter: invert(.88);
}
html[data-theme="dark"] input[type=date]::-webkit-datetime-edit,
html[data-theme="dark"] input[type=datetime-local]::-webkit-datetime-edit,
html[data-theme="dark"] input[type=month]::-webkit-datetime-edit,
html[data-theme="dark"] input[type=time]::-webkit-datetime-edit {
color: var(--text);
}
html[data-theme="light"] input[type=date]::-webkit-datetime-edit,
html[data-theme="light"] input[type=datetime-local]::-webkit-datetime-edit {
color: var(--text);
}
input:focus, select:focus, textarea:focus, .pass-field input:focus {
outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--focus);
}
textarea { min-height: 120px; }
.checkline {
display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; color: var(--text);
font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 14px;
}
.checkline input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; align-items: end; }
.form-grid .checkline, .form-grid > div:last-child { grid-column: 1 / -1; }
.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; }
.alert-error { background: rgba(255,107,122,.12); color: var(--danger); }
.alert-success { background: rgba(61,206,138,.12); color: var(--ok); }
.alert-info { background: rgba(46,196,243,.12); color: var(--info); }
.alert-2 {
display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
border-radius: 14px; margin: 16px 0; border: 1px solid var(--line);
background: var(--panel); box-shadow: var(--shadow);
}
.alert-2 strong { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.alert-2 span { color: var(--text); }
.alert-2-error { border-color: rgba(255,107,122,.35); background: linear-gradient(90deg, rgba(255,107,122,.14), var(--panel)); }
.alert-2-error strong { color: var(--danger); }
.alert-2-ok { border-color: rgba(61,206,138,.35); background: linear-gradient(90deg, rgba(61,206,138,.12), var(--panel)); }
.alert-2-ok strong { color: var(--ok); }
.alert-2-info { border-color: rgba(46,196,243,.3); background: linear-gradient(90deg, rgba(46,196,243,.12), var(--panel)); }
.alert-2-info strong { color: var(--cyan); }
.app { display: grid; grid-template-columns: 272px 1fr; min-height: calc(100vh - var(--footer-h)); }
.sidebar {
background: var(--bg-soft); border-right: 1px solid var(--line); padding: 22px 16px;
position: sticky; top: 0; height: calc(100vh - var(--footer-h));
display: flex; flex-direction: column;
overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.sidebar nav { flex: 1 0 auto; }
.sidebar .logo { color: var(--text); margin-bottom: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-burger { display: none; }
.sidebar nav a {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--muted); margin-bottom: 3px; font-weight: 600;
}
.sidebar nav a .bi { font-size: 16px; color: var(--cyan); }
.sidebar nav a.active, .sidebar nav a:hover { background: var(--panel); color: var(--text); }
.sidebar nav a.active { box-shadow: inset 2px 0 0 var(--cyan); }
.nav-label { flex: 1; min-width: 0; }
.nav-group {
margin: 16px 0 6px; padding: 0 12px; font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); opacity: .7;
}
.nav-group:first-child { margin-top: 0; }
.nav-count {
min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
text-align: center; background: var(--cyan); color: #06121a;
}
.sidebar-foot { margin-top: 18px; display: grid; gap: 10px; flex: 0 0 auto; }
.sidebar-user { flex: 0 0 auto; margin-top: 18px; font-size: 13px; line-height: 1.5; }
.btn-block { width: 100%; justify-content: center; }
.app-body { display: flex; flex-direction: column; min-width: 0; }
.admin-top {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding: 14px 32px; border-bottom: 1px solid var(--line); background: var(--bg-soft);
position: sticky; top: 0; z-index: 20;
}
.admin-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-burger { display: none; }
.admin-crumb { margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.admin-current { font-size: 17px; }
.admin-top-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-user { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.admin-user .bi { font-size: 18px; color: var(--cyan); }
.main { padding: 28px 32px 40px; min-width: 0; }
body.marketing [data-app-stage] { padding: 0; min-width: 0; }
.table-wrap { overflow: auto; }
table, .data-table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; background: var(--panel-2); }
.data-table tbody tr:hover { background: rgba(46,196,243,.04); }
.admin-block-title { margin: 28px 0 6px; font-size: 20px; }
.setup-grid { margin-top: 14px; }
.setup-card { color: var(--text); display: block; transition: border-color .15s, transform .15s; }
.setup-card:hover { color: var(--text); border-color: var(--cyan); transform: translateY(-2px); }
.setup-card .bi { font-size: 22px; color: var(--cyan); }
.setup-card h3 { margin: 10px 0 6px; font-size: 16px; }
.setup-card p { margin: 0; color: var(--muted); font-size: 13px; }
.kpi { padding: 18px; }
.kpi b { display: block; font-size: 28px; margin-top: 6px; }
.kpi-grid { gap: 14px; }
.kpi-card {
position: relative; color: var(--text); display: block;
transition: border-color .15s, transform .15s;
}
.kpi-card:hover { color: var(--text); border-color: var(--cyan); transform: translateY(-2px); }
.kpi-icon { position: absolute; top: 16px; right: 16px; color: var(--cyan); opacity: .55; }
.kpi-icon .bi { font-size: 20px; }
.card-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.card-head h3 { margin: 0; font-size: 15px; }
.data-table thead th { position: sticky; top: 0; z-index: 1; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar h1 { margin: 0; }
.toolbar form { min-width: min(320px, 100%); }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar-actions form { min-width: 0; margin: 0; }
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; margin: 0 0 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.filter-bar {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.filter-bar form { margin: 0; min-width: 0; }
.filter-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filter-form .row { margin: 0; min-width: 180px; }
.filter-actions { display: flex; gap: 8px; }
.filter-bulk { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
.filter-bar, .filter-form, .filter-bulk { width: 100%; }
.filter-form .row { flex: 1 1 100%; }
.filter-actions, .filter-bulk { width: 100%; }
.filter-actions .btn, .filter-bulk .btn { flex: 1; justify-content: center; }
}
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.table-actions form { margin: 0; display: inline; }
.table-actions .btn { padding: 7px 10px; font-size: 12px; }
.form-alert {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); margin: 10px 0;
}
.form-alert[hidden] { display: none !important; }
.form-alert .bi { font-size: 18px; margin-top: 2px; }
.form-alert strong { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; display: block; }
.form-alert-error { border-color: rgba(255,107,122,.4); background: rgba(255,107,122,.1); }
.form-alert-error strong { color: var(--danger); }
.form-alert-ok { border-color: rgba(61,206,138,.4); background: rgba(61,206,138,.1); }
.form-alert-ok strong { color: var(--ok); }
.promo-layer {
position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
padding: 28px 16px; background: rgba(8,10,14,.72); backdrop-filter: blur(10px);
transition: opacity .22s ease;
}
.promo-layer[hidden] { display: none !important; }
.promo-layer.is-out { opacity: 0; pointer-events: none; }
.promo-card {
width: min(920px, 100%);
min-height: 300px;
display: grid;
grid-template-columns: 268px minmax(0, 1fr);
background: var(--panel); color: var(--text);
border: 1px solid var(--line); border-radius: 18px;
box-shadow: 0 28px 80px rgba(0,0,0,.45);
overflow: hidden; position: relative;
animation: promoIn .45s ease;
}
.promo-layer.is-out .promo-card { transform: translateY(10px) scale(.985); transition: transform .22s ease; }
@keyframes promoIn {
from { opacity: 0; transform: translateY(16px) scale(.98); }
to { opacity: 1; transform: none; }
}
.promo-visual {
display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
padding: 18px 18px 22px; position: relative; overflow: hidden; color: #f3f8fb;
background:
radial-gradient(120% 70% at 50% 18%, rgba(46,196,243,.28), transparent 52%),
linear-gradient(165deg, #0b1c28 0%, #123445 55%, #0e2430 100%);
}
.promo-scene {
position: relative; flex: 1; min-height: 188px; height: 188px; margin: 0 -6px 4px;
}
.promo-glow {
position: absolute; left: 50%; top: 46%; width: 140px; height: 140px;
transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(circle, rgba(46,196,243,.45), rgba(46,196,243,.08) 46%, transparent 70%);
}
.promo-scene.is-on .promo-glow { animation: promoGlow 3.6s ease-in-out infinite; }
.promo-grid {
position: absolute; inset: 8px 12px 18px; opacity: .22;
background-image:
linear-gradient(rgba(243,248,251,.14) 1px, transparent 1px),
linear-gradient(90deg, rgba(243,248,251,.14) 1px, transparent 1px);
background-size: 18px 18px;
mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
}
.promo-orbit {
position: absolute; left: 50%; top: 46%; width: 210px; height: 210px;
transform: translate(-50%, -50%); overflow: visible;
}
.promo-spin {
stroke: rgba(46,196,243,.42); stroke-width: 1.2; fill: none;
transform-box: view-box; transform-origin: 120px 120px;
}
.promo-spin.b { stroke: rgba(255,208,0,.28); }
.promo-scene.is-on .promo-spin.a { animation: promoSpin 18s linear infinite; }
.promo-scene.is-on .promo-spin.b { animation: promoSpinRev 26s linear infinite; }
.promo-scene.is-on .promo-spin.c { animation: promoSpin 12s linear infinite; }
.promo-path {
stroke: rgba(243,248,251,.28); stroke-width: 1.1; stroke-dasharray: 6 10; fill: none;
}
.promo-scene.is-on .promo-path { animation: promoDash 2.4s linear infinite; }
.promo-node { fill: #7ee3ff; filter: drop-shadow(0 0 4px rgba(46,196,243,.9)); }
.promo-node.n2 { fill: #ffd000; filter: drop-shadow(0 0 4px rgba(255,208,0,.7)); }
.promo-scene.is-on .promo-node.n3 { animation: promoBlink 2.2s ease-in-out infinite; }
.promo-pulse {
stroke: rgba(46,196,243,.35); stroke-width: 1.4; fill: none;
transform-box: view-box; transform-origin: 120px 120px;
}
.promo-scene.is-on .promo-pulse { animation: promoPulse 2.8s ease-out infinite; }
.promo-sat {
position: absolute; width: 8px; height: 8px; border-radius: 50%;
left: 50%; top: 46%; margin: -4px 0 0 -4px;
background: #7ee3ff; box-shadow: 0 0 10px rgba(46,196,243,.9);
}
.promo-sat.s1 { transform: rotate(18deg) translate(78px) rotate(-18deg); }
.promo-sat.s2 { background: #ffd000; box-shadow: 0 0 10px rgba(255,208,0,.8); transform: rotate(140deg) translate(58px) rotate(-140deg); }
.promo-sat.s3 { transform: rotate(250deg) translate(92px) rotate(-250deg); }
.promo-scene.is-on .promo-sat.s1 { animation: promoOrbitA 9s linear infinite; }
.promo-scene.is-on .promo-sat.s2 { animation: promoOrbitB 13s linear infinite; }
.promo-scene.is-on .promo-sat.s3 { animation: promoOrbitC 7.5s linear infinite; }
.promo-core {
position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
width: 58px; height: 58px; border-radius: 16px;
display: grid; place-items: center;
background: linear-gradient(180deg, rgba(18,40,52,.95), rgba(8,18,24,.95));
border: 1px solid rgba(46,196,243,.45);
box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 8px rgba(46,196,243,.08);
}
.promo-rack {
display: flex; flex-direction: column; gap: 5px; width: 28px;
}
.promo-rack i {
display: block; height: 6px; border-radius: 3px;
background: linear-gradient(90deg, #2ec4f3, #7ee3ff 55%, rgba(46,196,243,.25));
}
.promo-scene.is-on .promo-rack i { animation: promoLed 1.6s ease-in-out infinite; }
.promo-rack i:nth-child(2) { animation-delay: .25s; width: 86%; }
.promo-rack i:nth-child(3) { animation-delay: .5s; width: 72%; background: linear-gradient(90deg, #ffd000, #ffe14a 60%, rgba(255,208,0,.2)); }
.promo-visual-foot { position: relative; z-index: 2; display: grid; gap: 8px; }
.promo-mark {
font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800;
color: var(--cyan);
}
.promo-visual-copy { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
@keyframes promoGlow {
0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes promoSpin { to { transform: rotate(360deg); } }
@keyframes promoSpinRev { to { transform: rotate(-360deg); } }
@keyframes promoDash { to { stroke-dashoffset: -64; } }
@keyframes promoBlink { 50% { opacity: .25; } }
@keyframes promoPulse {
0% { transform: scale(.72); opacity: .7; }
100% { transform: scale(1.55); opacity: 0; }
}
@keyframes promoOrbitA {
from { transform: rotate(0deg) translate(78px) rotate(0deg); }
to { transform: rotate(360deg) translate(78px) rotate(-360deg); }
}
@keyframes promoOrbitB {
from { transform: rotate(120deg) translate(58px) rotate(-120deg); }
to { transform: rotate(480deg) translate(58px) rotate(-480deg); }
}
@keyframes promoOrbitC {
from { transform: rotate(220deg) translate(92px) rotate(-220deg); }
to { transform: rotate(580deg) translate(92px) rotate(-580deg); }
}
@keyframes promoLed {
0%, 100% { opacity: .45; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.promo-scene *, .promo-scene, .hero-ssd::before, .preview-board::after, .preview-dots i,
.hero-speed-grid, .hero-note-flash, .hero-note-flash::after { animation: none !important; }
.hero-speed-canvas { display: none; }
}
.promo-main { padding: 32px 36px 28px; position: relative; min-width: 0; }
.promo-x {
position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); cursor: pointer; font-size: 16px;
display: grid; place-items: center;
}
.promo-kicker { margin: 0 0 8px; color: var(--cyan); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 800; }
.promo-card h2 {
margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.15;
min-height: 1.2em;
}
.promo-body { margin: 0 0 18px; color: var(--muted); line-height: 1.6; font-size: 16px; min-height: 1.6em; }
.promo-count { margin: 0 0 22px; }
.promo-count[hidden] { display: none !important; }
.promo-count-label {
margin: 0 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); font-weight: 700;
}
.promo-count-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 380px;
}
.promo-count-grid div {
background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
padding: 10px 4px 8px; text-align: center;
}
.promo-count-grid strong {
display: block; font-size: 22px; font-variant-numeric: tabular-nums;
letter-spacing: .04em; line-height: 1.1; font-weight: 800;
}
.promo-count-grid span {
display: block; margin-top: 4px; font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.promo-card h2.is-typing::after,
.promo-body.is-typing::after {
content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 3px;
background: var(--cyan); vertical-align: text-bottom; animation: promoCaret .7s step-end infinite;
}
@keyframes promoCaret { 50% { opacity: 0; } }
.promo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.promo-card .btn { width: auto; min-width: 160px; justify-content: center; }
@media (max-width: 760px) {
.promo-card { grid-template-columns: 1fr; min-height: 0; }
.promo-visual { padding: 14px 18px 16px; }
.promo-scene { min-height: 148px; height: 148px; }
.promo-orbit { width: 176px; height: 176px; }
.promo-main { padding: 24px 20px 20px; }
.promo-card .btn { width: 100%; }
.promo-count-grid { max-width: none; }
}
.topbar-copy { flex: 1; min-width: 0; display: grid; }
.topbar-slide {
grid-area: 1 / 1; display: flex; align-items: center; gap: 0; min-width: 0;
color: inherit; opacity: 0; pointer-events: none; transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
}
.topbar-slide.is-on { opacity: 1; pointer-events: auto; transform: none; }
.topbar-slide span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.secret { font-family: ui-monospace, Menlo, monospace; background: var(--bg-soft); padding: 8px 10px; border-radius: 8px; }
.list { margin: 0 0 16px; padding-left: 18px; color: var(--muted); }
.product { min-height: 280px; display: flex; flex-direction: column; }
.product h3 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dc { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.support-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 38px 0; }
.site-footer {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
height: var(--footer-h); display: flex; align-items: center; justify-content: center;
border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 500;
background: var(--panel); letter-spacing: .01em; text-align: center;
pointer-events: none; font-family: Inter, system-ui, sans-serif;
}
<.site-footer, .site-footer * { font-family: Inter, system-ui, sans-serif !important; font-weight: 500; letter-spacing: .01em; }
body.promo-open { overflow: hidden; }
.page-banner {
position: fixed; top: 16px; right: 16px; left: auto; z-index: 120;
width: min(420px, calc(100vw - 24px)); display: flex; align-items: stretch;
border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
.page-banner[hidden] { display: none !important; }
.page-banner-inner {
width: 100%; display: grid; grid-template-columns: auto 1fr auto;
align-items: start; gap: 10px; padding: 14px 14px 14px 16px; text-align: left;
}
.page-banner .bi { font-size: 20px; margin-top: 2px; }
.page-banner strong { letter-spacing: .08em; text-transform: uppercase; font-size: 11px; display: block; }
.page-banner span { font-size: 14px; font-weight: 600; display: block; margin-top: 2px; line-height: 1.4; }
.page-banner-x {
width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
color: inherit; cursor: pointer; display: grid; place-items: center; position: static; transform: none;
}
.page-banner-error { background: #3a141b; color: #ffe8eb; border-left: 4px solid #ff6b7a; }
.page-banner-error strong, .page-banner-error .bi { color: #ff8a96; }
.page-banner-ok { background: #123028; color: #e8fff3; border-left: 4px solid #3dce8a; }
.page-banner-ok strong, .page-banner-ok .bi { color: #6ee0a8; }
.page-banner-info { background: #102832; color: #e7f8ff; border-left: 4px solid #2ec4f3; }
.page-banner-info strong, .page-banner-info .bi { color: #7ad8f6; }
.wa-float {
position: fixed; right: 20px; left: auto; bottom: calc(var(--footer-h) + 18px); z-index: 40;
width: 58px; height: 58px; border-radius: 50%;
background: #25d366; display: grid; place-items: center;
box-shadow: 0 12px 28px rgba(37,211,102,.42);
color: #fff !important; font-size: 30px;
transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { color: #fff !important; transform: scale(1.06); box-shadow: 0 16px 32px rgba(37,211,102,.5); }
.wa-pulse {
position: absolute; inset: -5px; border-radius: 50%;
border: 2px solid rgba(37,211,102,.55); pointer-events: none;
animation: waPulse 2.2s ease-out infinite;
}
@keyframes waPulse {
0% { transform: scale(.92); opacity: .8; }
100% { transform: scale(1.28); opacity: 0; }
}
.stats-band {
background: var(--bg-soft);
border-top: 1px solid var(--line);
padding: 72px 0 96px;
}
.stats-lead {
max-width: 46ch; margin: 10px auto 0; color: var(--muted); font-size: 16px; font-weight: 500;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 40px;
margin-top: 44px;
text-align: center;
}
.stats-item h3 {
margin: 16px 0 10px; color: var(--cyan); font-size: 18px; letter-spacing: .01em;
}
.stats-item > p { margin: 0 auto; max-width: 36ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.stat-dial {
width: 210px; height: 210px; margin: 0 auto; position: relative;
}
.stat-dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.stat-hair {
fill: none; stroke: var(--line); stroke-width: .85;
}
.stat-wire {
fill: none; stroke: var(--cyan); stroke-width: .55; opacity: .28;
}
.stat-arc {
fill: none; stroke: var(--text); stroke-width: 1.05; stroke-linecap: round; opacity: .72;
}
.stat-bolt {
fill: none; stroke-width: 1.35; stroke-linecap: round;
filter: drop-shadow(0 0 3px rgba(255,255,255,.85));
}
.stat-globe {
transform-origin: 50% 50%;
transform-box: view-box;
animation: statSpin 28s linear infinite;
}
.stat-orbit {
transform-origin: 50% 50%;
transform-box: view-box;
animation: statSpin 9s linear infinite;
}
.stat-sheen {
position: absolute; inset: 8px; border-radius: 50%; pointer-events: none;
background: conic-gradient(from 200deg, transparent 0 78%, rgba(46,196,243,.0) 82%, rgba(255,255,255,.7) 86%, rgba(255,208,0,.55) 87.5%, rgba(46,196,243,.25) 90%, transparent 94%);
-webkit-mask: radial-gradient(closest-side, transparent 78.6%, #000 79.4%, #000 80.8%, transparent 81.6%);
mask: radial-gradient(closest-side, transparent 78.6%, #000 79.4%, #000 80.8%, transparent 81.6%);
animation: statSpin 9s linear infinite;
mix-blend-mode: screen;
}
html[data-theme="light"] .stat-sheen { mix-blend-mode: normal; opacity: .7; }
html[data-theme="light"] .stat-wire { stroke: #1298c4; opacity: .22; }
.stat-num {
position: absolute; inset: 0; margin: 0; z-index: 2;
display: grid; place-items: center;
font-size: clamp(30px, 2.8vw, 38px); font-weight: 800; letter-spacing: -.04em;
font-variant-numeric: tabular-nums; color: var(--text); line-height: 1;
}
@keyframes statSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.stat-orbit, .stat-sheen, .stat-globe,
.perk-orbit, .perk-sheen, .perk-globe { animation: none; }
}
@media (max-width: 860px) {
.stats-grid { grid-template-columns: 1fr; gap: 36px; }
.stats-item > p { max-width: 46ch; }
}
.band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-perks {
position: relative;
overflow: hidden;
background:
radial-gradient(720px 220px at 8% 0%, rgba(46,196,243,.08), transparent 58%),
radial-gradient(640px 200px at 96% 110%, rgba(255,208,0,.07), transparent 52%),
var(--panel);
}
.band-perks::before {
content: "";
position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(46,196,243,.45), rgba(255,208,0,.55), rgba(46,196,243,.35), transparent);
pointer-events: none;
}
.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.live-grid span { display: block; color: var(--muted); font-size: 12px; }
.result-card { padding: 8px 0 18px; }
.auth-card { max-width: 460px; margin: 56px auto 80px; }
.theme-toggle {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
background: var(--panel); color: var(--text); display: grid; place-items: center;
cursor: pointer; padding: 0; box-shadow: var(--shadow);
}
.theme-toggle:hover { border-color: var(--cyan); }
.theme-toggle .bi { font-size: 18px; line-height: 1; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
.topbar .theme-toggle, .auth-panel .theme-toggle, .m-wrap .theme-toggle {
background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: none;
}
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; align-items: center; }
.pager-btn {
min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 700;
text-decoration: none;
}
.pager-btn.is-on { background: var(--gold); color: #111; border-color: transparent; }
.pager-btn.is-off {
opacity: .38;
pointer-events: none;
}
.pager-btn:hover:not(.is-on):not(.is-off) { border-color: rgba(46,196,243,.45); }
.pager-gap { color: var(--muted); padding: 0 2px; font-weight: 700; letter-spacing: .08em; }
.pager-bar {
padding: 12px 16px 14px;
border-top: 1px solid var(--line);
margin-top: 0;
}
.pager-bar .pager { margin: 0 0 0 auto; }
.pager-meta { margin: 0; color: var(--muted); font-size: 13px; }
.table-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
padding: 16px 16px 12px; border-bottom: 1px solid var(--line);
}
.table-head h2 { margin: 4px 0 0; font-size: 18px; }
.table-head-note { max-width: 460px; margin: 0; font-size: 13px; }
.admin-list-filter { margin: 0 0 16px; }
.table-wrap > .table-head,
.table-wrap > .pager-bar {
position: sticky;
left: 0;
background: var(--panel);
z-index: 2;
}
.empty { padding: 28px; text-align: center; color: var(--muted); }
[data-domain-result] { margin-top: 16px; }
.stat {
position: relative;
isolation: isolate;
padding: 26px 16px 22px;
text-align: center;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
color: inherit;
background:
radial-gradient(120% 90% at 50% -10%, rgba(46,196,243,.12), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
var(--panel);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 14px 32px rgba(0,0,0,.14);
opacity: 0;
transform: translateY(18px);
transition:
opacity .75s cubic-bezier(.22,1,.36,1),
transform .75s cubic-bezier(.22,1,.36,1),
border-color .25s ease,
box-shadow .25s ease;
}
a.stat:hover { color: inherit; }
.stat:nth-child(2) { transition-delay: .07s, .07s, 0s, 0s; }
.stat:nth-child(3) { transition-delay: .14s, .14s, 0s, 0s; }
.stat:nth-child(4) { transition-delay: .21s, .21s, 0s, 0s; }
.stat.is-in { opacity: 1; transform: none; }
.stat.is-in:nth-child(n) { transition-delay: 0s; }
.stat.is-in:hover {
border-color: rgba(46,196,243,.42);
transform: translateY(-5px);
box-shadow: 0 22px 44px rgba(46,196,243,.12);
}
.stat b {
display: block; font-size: 18px; line-height: 1.25; letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.stat .muted { font-size: 13px; line-height: 1.45; }
.perk-dial {
width: 108px; height: 108px; margin: 0 auto 8px; position: relative;
transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.stat.is-in:hover .perk-dial { transform: scale(1.045); }
.perk-dial-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.perk-hair {
fill: none; stroke: var(--line); stroke-width: 1.55;
}
.perk-wire {
fill: none; stroke: var(--cyan); stroke-width: 1.05; opacity: .32;
}
.perk-arc {
fill: none; stroke: var(--text); stroke-width: 1.85; stroke-linecap: round; opacity: .7;
}
.perk-bolt {
fill: none; stroke-width: 2.2; stroke-linecap: round;
filter: drop-shadow(0 0 3px rgba(255,255,255,.85));
}
.perk-globe {
transform-origin: 50% 50%;
transform-box: view-box;
animation: statSpin 32s linear infinite;
}
.perk-orbit {
transform-origin: 50% 50%;
transform-box: view-box;
animation: statSpin 8.5s linear infinite;
}
.perk-sheen {
position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
background: conic-gradient(from 210deg, transparent 0 76%, rgba(46,196,243,0) 81%, rgba(255,255,255,.72) 86%, rgba(255,208,0,.58) 87.6%, rgba(46,196,243,.28) 91%, transparent 95%);
-webkit-mask: radial-gradient(closest-side, transparent 76.8%, #000 77.8%, #000 80.4%, transparent 81.4%);
mask: radial-gradient(closest-side, transparent 76.8%, #000 77.8%, #000 80.4%, transparent 81.4%);
animation: statSpin 8.5s linear infinite;
mix-blend-mode: screen;
}
.perk-glyph {
position: absolute; inset: 0; z-index: 2;
display: grid; place-items: center;
}
.perk-glyph .bi {
font-size: 26px; color: var(--cyan);
filter: drop-shadow(0 0 10px rgba(46,196,243,.42));
}
html[data-theme="light"] .perk-sheen { mix-blend-mode: normal; opacity: .68; }
html[data-theme="light"] .perk-wire { stroke: #1298c4; opacity: .24; }
html[data-theme="light"] .stat {
background:
radial-gradient(120% 90% at 50% -10%, rgba(18,152,196,.1), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,.9), transparent 46%),
var(--panel);
}
@media (prefers-reduced-motion: reduce) {
.perk-orbit, .perk-sheen, .perk-globe { animation: none; }
.stat, .stat:nth-child(n) {
opacity: 1; transform: none; transition: border-color .2s, box-shadow .2s;
}
}
@media (max-width: 1100px) {
.grid-4, .support-strip { grid-template-columns: 1fr 1fr; }
.form-grid { grid-template-columns: 1fr 1fr; }
}
.alert-2-warn { border-color: rgba(255,208,0,.4); background: linear-gradient(90deg, rgba(255,208,0,.14), var(--panel)); }
.alert-2-warn strong { color: var(--gold); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; }
.plan-card {
position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
padding: 28px 24px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column;
text-align: center; align-items: center;
}
.plan-card .muted, .plan-card .eyebrow, .plan-card h3, .plan-card .price { text-align: center; }
.plan-card form { width: 100%; margin-top: auto; }
.plan-card .btn { width: 100%; }
.plan-card.is-featured { border-color: rgba(255,208,0,.45); transform: translateY(-6px); }
.plan-ribbon {
position: absolute; top: 14px; right: 14px; background: var(--gold); color: #111;
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
padding: 4px 8px; border-radius: 999px;
}
.plan-list { margin: 0 0 18px; padding: 0; list-style: none; color: var(--muted); width: 100%; }
.plan-list li {
padding: 8px 0; border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.plan-list .bi { color: var(--cyan); font-size: 14px; }
html[data-theme="light"] .hero-ssd {
background: radial-gradient(980px 460px at 84% 16%, #dceef5 0%, transparent 52%), linear-gradient(180deg, #f7fafc, var(--hero));
color: var(--text);
}
html[data-theme="light"] .hero-ssd h1 { color: #1298c4; }
html[data-theme="light"] .hero-ssd .lead,
html[data-theme="light"] .checks li { color: var(--muted); }
html[data-theme="light"] .hero-ssd .checks li { color: var(--text); }
html[data-theme="light"] .hero-ssd .hero-note,
html[data-theme="light"] .hero-note-flash { color: #1298c4; }
html[data-theme="light"] .hero-search input {
background: #fff; color: var(--text); border-color: var(--line);
}
html[data-theme="light"] .hero-speed::after {
background:
linear-gradient(90deg, rgba(247,250,252,.62), transparent 16%, transparent 84%, rgba(247,250,252,.62)),
linear-gradient(180deg, rgba(247,250,252,.22), transparent 24%, transparent 76%, rgba(247,250,252,.32));
}
html[data-theme="light"] .hero-speed-grid {
background-image:
linear-gradient(to right, rgba(18,152,196,.16) 1px, transparent 1px),
linear-gradient(to bottom, rgba(18,152,196,.12) 1px, transparent 1px);
}
html[data-theme="light"] .hero-speed-canvas { opacity: .55; }
.auth-body {
height: 100dvh; max-height: 100dvh; overflow: hidden; padding-bottom: 0;
display: flex; flex-direction: column; background: var(--bg); color: var(--text);
}
.auth-body .site-footer { position: relative; height: 40px; flex-shrink: 0; z-index: 5; }
.auth-body .page-banner { z-index: 200; }
.auth-form .form-alert { margin-top: 14px; }
.auth-split {
display: grid; grid-template-columns: minmax(360px, 40vw) 1fr;
flex: 1; min-height: 0; overflow: hidden;
}
.auth-split:has(.auth-panel-wide) { grid-template-columns: minmax(520px, 52vw) 1fr; }
.auth-panel {
padding: 16px 28px 12px; background: var(--panel); color: var(--text);
overflow: hidden; border-right: 1px solid var(--line);
display: flex; flex-direction: column; justify-content: center; min-height: 0;
}
.auth-panel-wide { justify-content: flex-start; padding: 10px 22px 8px; overflow-y: auto; }
.auth-panel .logo { color: var(--text); }
.auth-panel .muted { color: var(--muted); }
.auth-form, .auth-panel h1, .auth-hello, .auth-panel .alert-2, .auth-panel > p, .auth-form .form-alert { max-width: 360px; }
.auth-form-wide, .auth-panel-wide h1, .auth-panel-wide .auth-hello, .auth-panel-wide > p, .auth-form-wide .form-alert { max-width: none; }
.auth-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; max-width: none; }
.back-circle {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--line); color: var(--text); background: var(--bg-soft); font-weight: 700;
}
.auth-hello { color: var(--cyan); letter-spacing: .18em; text-transform: uppercase; font-weight: 800; font-size: 12px; margin: 0 0 4px; }
.auth-panel h1 { margin: 0 0 12px; font-size: 26px; color: var(--text); font-weight: 800; }
.auth-panel-wide h1 { font-size: 22px; margin: 0 0 8px; }
.auth-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; font-size: 13px; }
.auth-row a { color: var(--cyan); }
.auth-btn { width: 100%; margin: 8px 0 0; border-radius: 8px; padding: 10px 16px; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--line); text-transform: uppercase; }
.auth-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 14px; align-items: stretch;
}
.auth-span-2 { grid-column: span 2; }
.auth-span-3 { grid-column: 1 / -1; }
.auth-grid .row {
display: flex; flex-direction: column; justify-content: flex-end; gap: 5px;
margin: 0; min-width: 0;
}
.auth-grid .row > label {
display: block; min-height: 14px; line-height: 1.2; margin: 0; white-space: nowrap;
}
.auth-grid .row > input,
.auth-grid .row > select,
.auth-grid .row > .btn,
.auth-gen {
width: 100%; height: 38px; margin: 0;
}
.auth-gen { padding: 0 10px; font-size: 12px; border-radius: 10px; }
.auth-panel label { color: var(--cyan); font-size: 10px; }
.auth-panel input:not([type=checkbox]):not([type=radio]),
.auth-panel select {
width: 100%; background: #12161c !important; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
padding: 8px 12px; color: #f3f6f8 !important; box-shadow: none; caret-color: var(--cyan);
color-scheme: dark;
}
.auth-panel input:-webkit-autofill,
.auth-panel input:-webkit-autofill:hover,
.auth-panel input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #12161c inset !important;
-webkit-text-fill-color: #f3f6f8 !important;
caret-color: var(--cyan);
}
.auth-panel input:focus, .auth-panel select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--focus); }
.auth-panel .checkline { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; margin: 8px 0; }
.auth-demo { margin: 14px 0 0; font-size: 12px; color: var(--muted); max-width: 360px; line-height: 1.6; }
.auth-admin-link { margin: 16px 0 0; max-width: 360px; text-align: center; font-size: 13px; font-weight: 600; }
.auth-admin-link a { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.auth-admin-link a:hover { color: var(--cyan); }
.auth-demo code {
color: #f3f6f8; background: #12161c; border: 1px solid rgba(255,255,255,.12);
padding: 2px 6px; border-radius: 6px; font-size: 12px;
}
.auth-aside {
background:
radial-gradient(700px 320px at 80% 10%, rgba(46,196,243,.18), transparent 50%),
var(--bg);
color: var(--text); display: flex; align-items: stretch; padding: 20px 28px 16px; min-height: 0; overflow: hidden;
}
.auth-aside-inner { width: 100%; max-width: none; display: flex; flex-direction: column; min-height: 0; }
.auth-aside h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: .95; margin: 0 0 8px; color: var(--text); font-family: Inter, system-ui, sans-serif; }
.auth-aside p { color: var(--muted); font-size: 15px; max-width: 46ch; margin: 0 0 12px; }
.auth-fill { flex: 1; min-height: 0; width: 100%; }
.auth-aside .preview-board { min-height: 0; }
.domain-page { padding: 72px 0 96px; text-align: center; }
.domain-page h1 { font-size: clamp(36px, 5vw, 56px); margin: 0 0 10px; letter-spacing: -.03em; }
.domain-page .lead { max-width: 42ch; margin: 0 auto 28px; color: var(--muted); }
.domain-search {
display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; margin: 0 auto 28px;
background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 20px;
box-shadow: var(--shadow);
}
.domain-search input {
flex: 1; border: 0; background: transparent; box-shadow: none; padding: 10px 0; border-radius: 0;
}
.domain-search input:focus { box-shadow: none; }
.domain-live { padding: 8px 0 28px; }
.domain-hits {
width: min(1120px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
text-align: left;
align-items: stretch;
justify-content: center;
}
.domain-board { margin: 8px auto 0; width: min(1120px, 100%); }
.domain-board-head {
display: flex; justify-content: space-between; gap: 12px; align-items: flex-end;
margin: 0 auto 16px; flex-wrap: wrap; width: min(1120px, 100%);
text-align: left;
}
.domain-board-head h3 { margin: 0; font-size: 18px; }
.domain-hit {
display: flex; flex-direction: column; gap: 12px;
background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px;
min-height: 100%;
}
.domain-hit header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.domain-hit.is-free { border-color: rgba(61,206,138,.28); }
.domain-hit strong { font-size: 16px; word-break: break-word; }
.domain-prices {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0;
}
.domain-prices div {
background: rgba(255,255,255,.03); border-radius: 10px; padding: 10px 6px; text-align: center;
}
.domain-prices dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.domain-prices dd { margin: 6px 0 0; font-weight: 800; color: var(--gold-2); }
.domain-hit-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.domain-hit-meta form, .domain-hit-meta .btn { width: 100%; margin: 0; }
@media (max-width: 1100px) {
.domain-hits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.domain-hits { grid-template-columns: 1fr; }
}
.domain-choice { padding: 48px 0 72px; }
.domain-choice h1 { margin: 0 0 8px; }
.domain-choice .lead { max-width: 62ch; }
.choice-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 24px;
}
.choice-card h3 { margin: 8px 0 10px; }
.choice-card .ns-box {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
background: rgba(255,255,255,.04);
border-radius: 10px;
padding: 10px 12px;
margin: 10px 0;
}
@media (max-width: 960px) {
.choice-grid { grid-template-columns: 1fr; }
}
.order-chip {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
background: rgba(46,196,243,.08); border: 1px solid rgba(46,196,243,.22);
border-radius: 14px; padding: 12px 14px; margin: 0 0 18px; max-width: 100%;
}
.order-chip b { color: var(--gold-2); }
.paypal-box { margin: 0; max-width: none; }
.pay-checkout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .9fr);
gap: 22px;
align-items: start;
margin-top: 6px;
}
.pay-summary { padding: 0; overflow: hidden; }
.pay-summary .data-table { margin: 0; }
.pay-summary-head {
display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
padding: 20px 22px 8px; flex-wrap: wrap;
}
.pay-summary-head h2 { margin: 4px 0 0; font-size: 22px; }
.pay-summary .inv-meta, .invoice-admin .inv-meta {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
padding: 16px 22px 20px; margin: 0;
}
.inv-meta dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.inv-meta dd { margin: 4px 0 0; font-weight: 650; }
.pay-total-row td { border-top: 1px solid var(--line); font-size: 15px; }
.pay-note { margin: 0 22px 20px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.pay-note.ok { background: rgba(61,206,138,.12); color: var(--ok); }
.pay-note.warn { background: rgba(255,208,0,.1); color: var(--text); }
.pay-panel {
width: 100%;
background: linear-gradient(180deg, #1c222b, #15191f);
border: 1px solid rgba(250, 204, 21, .42);
border-radius: 14px;
padding: 22px 22px 20px;
box-shadow: 0 16px 40px rgba(0,0,0,.28);
color: #f3f6f8;
}
html[data-theme="light"] .pay-panel {
background: linear-gradient(180deg, #1c2430, #141920);
border-color: rgba(250, 204, 21, .5);
}
.pay-panel-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pay-panel-brand h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pay-panel .eyebrow {
color: #60a5fa;
font-size: 11px;
letter-spacing: .14em;
margin: 0 0 4px;
}
.pay-mark {
width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: #facc15; color: #111318; font-size: 22px;
}
.pay-panel-lead { color: #9ca3af; font-size: 13px; line-height: 1.45; margin: 0 0 16px; }
.pay-amount {
display: flex; justify-content: space-between; align-items: baseline;
background: #12161c; border: 0;
border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
}
.pay-amount span { color: #6b7280; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.pay-amount strong { font-size: 26px; color: #facc15; font-weight: 800; letter-spacing: -.02em; }
.pay-buttons { min-height: 0; width: 100%; }
.pay-paypal-surface {
background: #ffffff;
color: #111318;
color-scheme: light;
border-radius: 16px;
padding: 22px 22px 18px;
box-shadow: inset 0 0 0 1px rgba(17, 19, 24, .06);
overflow: visible;
width: 100%;
position: relative;
z-index: 2;
}
.pay-choice {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 18px;
width: 100%;
}
.pay-choice-paypal,
.pay-choice-card {
width: 100%;
max-width: none;
margin: 0;
min-width: 0;
}
.pay-choice-card.is-expanded,
.pay-choice.is-card-open .pay-choice-card {
width: 100%;
max-width: none;
}
.pay-method-label {
margin: 0 0 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #5b6570;
text-align: center;
width: 100%;
min-height: 0;
display: block;
line-height: 1.25;
}
.pay-choice-card iframe,
.pay-choice-card > div,
.pay-choice-paypal iframe,
.pay-choice-paypal > div,
#paypal-btn-card,
#paypal-btn-wallet {
width: 100% !important;
max-width: 100%;
}
.pay-method-stack { width: 100%; margin: 0; }
.pay-paypal-surface iframe { width: 100% !important; max-width: 100%; }
@media (max-width: 640px) {
.pay-panel { padding: 18px 14px 16px; }
.pay-paypal-surface { padding: 14px 12px 12px; }
.plan-grid { grid-template-columns: 1fr; }
}
.pay-secure {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 18px 0 0; color: #9ca3af; font-size: 13px; text-align: center; width: 100%;
}
.pay-panel .btn-block { width: 100%; }
.invoice-admin {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
margin-top: 8px;
}
.invoice-admin > form.card,
.invoice-admin .inv-tile,
.invoice-admin .inv-pay {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100%;
}
.invoice-admin h3 { margin: 4px 0 8px; font-size: 17px; line-height: 1.3; }
.invoice-admin .muted { flex: 0 0 auto; }
.invoice-admin > form.card > .btn,
.inv-pay .btn { width: 100%; margin-top: auto; }
.inv-pair {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
width: 100%;
}
.inv-tile { min-height: 280px; }
.inv-tile h3 { min-height: 2.6em; }
.inv-tile > .muted { min-height: 3.2em; margin: 0; }
.inv-tile-extra {
display: flex; align-items: center; min-height: 42px; margin: auto 0 14px;
}
.inv-tile .checkline { margin: auto 0 14px; }
.inv-tile .btn { width: 100%; margin-top: 0; }
.inv-pay { grid-column: 1 / -1; }
@media (max-width: 960px) {
.pay-checkout, .invoice-admin { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.inv-pair { grid-template-columns: 1fr; }
.inv-tile { min-height: 0; }
.inv-tile h3, .inv-tile > .muted { min-height: 0; }
}
.auth-aside .eyebrow .brand-word { font-size: 12px; color: var(--cyan); }
@media (max-width: 1240px) {
.auth-grid { grid-template-columns: 1fr 1fr; }
.auth-span-2 { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
.auth-split, .auth-grid { grid-template-columns: 1fr; }
.auth-aside { display: none; }
.auth-form, .auth-panel h1, .auth-hello { max-width: 100%; }
.auth-split:has(.auth-panel-wide) { grid-template-columns: 1fr; }
.auth-panel-wide .auth-grid { grid-template-columns: 1fr 1fr; }
.auth-span-2 { grid-column: 1 / -1; }
.check-grid { grid-template-columns: 1fr 1fr; }
.domain-search { flex-direction: column; border-radius: 18px; padding: 14px; }
.plan-card.is-featured { transform: none; }
.product, .product h3, .product .muted, .product .price, .product .list { text-align: center; }
.product .list { padding-left: 0; list-style-position: inside; }
.hero-grid, .hero-pro, .grid-3, .grid-2, .app, .why, .dc, .quotes, .live-grid, .checks, .grid-4, .form-grid { grid-template-columns: 1fr; }
.hero-ssd {
min-height: 0;
padding: 52px clamp(24px, 6vw, 40px) 56px;
display: block;
}
.hero-copy {
min-height: 0;
padding: 0;
}
.hero-opts { margin-top: 18px; }
.hero-ssd .checks { grid-template-columns: 1fr 1fr; }
.hero-ssd h1 { font-size: clamp(40px, 12vw, 64px); }
.preview-board { min-height: 280px; }
.support-strip { grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px 0; }
.stat { padding: 18px 10px 16px; }
.stat b { font-size: 16px; }
.perk-dial { width: 88px; height: 88px; }
.perk-glyph .bi { font-size: 22px; }
.sidebar { position: relative; height: auto; padding: 14px 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sidebar .logo { margin-bottom: 0; }
.panel-burger { display: inline-flex; }
.sidebar nav, .sidebar .muted, .sidebar-foot { display: none; }
body.sidebar-open .sidebar nav { display: block; margin-top: 14px; }
body.sidebar-open .sidebar .muted { display: block; }
body.sidebar-open .sidebar-foot { display: grid; }
.admin-top { padding: 12px 16px; }
.admin-burger { display: inline-flex; }
.admin-user span { display: none; }
.main { padding: 20px 16px 34px; }
.hero-search { flex-direction: column; }
.hero-search input, .hero-search .btn, .domain-search input, .domain-search .btn {
width: 100%; min-height: 48px; touch-action: manipulation;
}
.nav-desktop { display: none !important; }
.nav-burger {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
width: 44px; height: 44px; gap: 5px; padding: 0; cursor: pointer;
border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
}
.nav-burger span {
display: block; width: 16px; height: 1.7px; border-radius: 99px; background: var(--header-text);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.7px) rotate(-45deg); }
.nav-layer {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: center; justify-content: center;
padding: 24px 16px; background: rgba(8,10,14,.58);
}
.nav-layer[hidden] { display: none !important; }
.nav-sheet {
width: min(400px, 100%);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 24px 70px rgba(8,10,14,.4);
padding: 16px 16px 18px;
text-align: center;
}
.nav-sheet-top {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 10px;
}
.site-menu-kicker {
margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
color: var(--muted); font-weight: 800;
}
.nav-close {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--line); background: var(--panel-2, transparent);
color: var(--text); border-radius: 999px; padding: 8px 12px;
font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}
.nav-mobile { display: grid; gap: 6px; }
.nav-mobile a, .site-menu-parent {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 13px 14px; border: 0; border-radius: 14px;
background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.nav-mobile a:hover, .site-menu-parent:hover,
.site-menu-group.is-open .site-menu-parent { background: rgba(46,196,243,.1); }
.nav-mobile a.btn-account,
.nav-mobile a.btn-primary {
background: #e8b800 !important;
color: #111318 !important;
-webkit-text-fill-color: #111318;
box-shadow: 0 8px 18px rgba(232,184,0,.28);
border-radius: 999px;
margin-top: 8px;
font-weight: 800;
}
.nav-mobile a.btn-account:hover,
.nav-mobile a.btn-primary:hover {
background: #f0c420 !important;
color: #111318 !important;
filter: brightness(1.04);
}
.nav-mobile a.btn-account .bi,
.nav-mobile a.btn-primary .bi { color: #111318 !important; }
.m-nav { gap: 10px; }
.m-nav-account {
display: inline-flex !important;
background: #e8b800 !important;
color: #111318 !important;
-webkit-text-fill-color: #111318;
box-shadow: 0 8px 18px rgba(232,184,0,.28);
padding: 9px 14px;
margin-left: auto;
white-space: nowrap;
}
.m-nav-account .bi { color: #111318 !important; }
.site-submenu { display: none; gap: 4px; padding: 0 8px 8px; }
.site-menu-group.is-open .site-submenu { display: grid; }
.site-submenu a { color: var(--muted); font-weight: 550; font-size: 14px; }
.shell, .container { width: min(1680px, calc(100% - 28px)); }
}
.cart-link {
display: inline-flex; align-items: center; gap: 6px;
color: var(--header-text); font-weight: 700;
}
.cart-link [data-cart-count] {
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
background: var(--gold); color: #111; font-size: 12px;
display: inline-flex; align-items: center; justify-content: center;
}
.cart-layer {
position: fixed; inset: 0; background: rgba(8,10,14,.45);
z-index: 80; display: flex; justify-content: flex-end;
}
.cart-layer[hidden] { display: none !important; }
.cart-drawer {
width: min(420px, 100%); height: 100%; background: var(--panel);
border-left: 1px solid var(--line); box-shadow: var(--shadow);
display: flex; flex-direction: column; padding: 18px;
}
.cart-drawer header, .cart-drawer footer {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.cart-drawer [data-cart-body] { flex: 1; overflow: auto; padding: 16px 0; }
.cart-line {
display: flex; justify-content: space-between; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.cart-page { padding: 36px 0 64px; }
.cart-layout { align-items: start; }
.cart-empty { text-align: center; padding: 36px 24px; }
.cart-summary h3 { margin: 0 0 14px; }
.summary-table td { padding: 11px 0; }
.summary-table tr:last-child td { border-bottom: 0; }
.summary-total td { font-size: 16px; }
.cart-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.cart-cta .muted { margin: 0 0 12px; }
.cart-cta .btn-block + .muted { margin: 12px 0 0; }
.btn-lg { padding: 14px 20px; font-size: 15px; }
.cart-trust {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center;
}
.cart-trust .bi { color: var(--ok); font-size: 15px; }
.checkout-side h3 { margin: 0 0 16px; }
.checkout-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.checkout-steps li { display: flex; gap: 12px; align-items: flex-start; }
.checkout-steps strong { display: block; font-size: 14px; margin-bottom: 3px; }
.checkout-steps span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.step-icon {
flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
display: grid; place-items: center;
background: rgba(46,196,243,.12); border: 1px solid rgba(46,196,243,.28);
}
.step-icon .bi { color: var(--cyan); font-size: 17px; }
.checkout-ns {
margin: 0 0 20px; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--line); background: var(--panel-2);
}
.checkout-ns p { margin: 0; }
.checkout-ns .eyebrow { margin-bottom: 6px; }
.checkout-ns code { margin-right: 6px; }
.cc-modal {
position: fixed; inset: 0; z-index: 90;
background: rgba(8,10,14,.55);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.cc-modal[hidden] { display: none !important; }
.cc-modal-card {
width: min(440px, 100%);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow);
padding: 22px 22px 18px;
text-align: center;
}
.cc-modal-card h3 { margin: 6px 0 8px; }
.cc-modal-actions {
display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap;
}
.panel-hero {
display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
margin-bottom: 20px; flex-wrap: wrap;
}
.panel-hero h1 { margin: 0 0 6px; }
.page-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 22px;
align-items: start;
width: 100%;
}
.page-primary { min-width: 0; }
.page-rail {
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
position: sticky;
top: 22px;
}
body:not(.is-client) .page-rail { top: 86px; }
.page-rail .rail-card { text-align: left; }
.page-rail .rail-card h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; word-break: break-word; }
.page-rail .rail-card .muted { margin: 0; }
.rail-badge { margin: 10px 0; }
.rail-dl { display: grid; gap: 8px; margin: 12px 0 0; }
.rail-dl div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
font-size: 13px;
}
.rail-dl dt { color: var(--muted); font-weight: 600; }
.rail-dl dd { margin: 0; font-weight: 700; text-align: right; max-width: 170px; word-break: break-word; }
.rail-tickets { list-style: none; margin: 0 0 12px; padding: 0; }
.rail-tickets li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px 10px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.rail-tickets li:last-child { border-bottom: 0; }
.rail-tickets a { color: var(--text); min-width: 0; }
.rail-tickets a:hover { color: var(--cyan); }
.rail-tickets strong { display: block; font-size: 13px; }
.rail-tickets span {
display: block; color: var(--muted); font-weight: 500; font-size: 12px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-tickets em { font-style: normal; font-size: 11px; white-space: nowrap; }
.rail-actions { display: grid; gap: 8px; margin-top: 12px; }
.page-rail .btn-block { margin-top: 12px; }
.page-primary .ticket-desk,
.page-primary .ticket-form,
.page-primary .ticket-created,
.page-primary .ticket-thread,
.page-primary .ticket-reply,
.page-primary .ticket-reopen,
.page-primary .mail-view { max-width: none; width: 100%; }
.page-primary .ticket-created-copy { max-width: none; }
.page-primary .profile-grid { grid-template-columns: 1fr; }
.ticket-thread { display: grid; gap: 12px; }
.ticket-msg {
background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
}
.ticket-msg header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ticket-msg time { color: var(--muted); font-size: 12px; }
.ticket-msg.is-staff { border-left: 3px solid var(--cyan); }
.ticket-msg.is-you { border-left: 3px solid var(--gold); }
.ticket-created { width: 100%; }
.ticket-created-banner {
background: #d8edd4;
color: #245c28;
text-align: center;
font-weight: 700;
padding: 14px 18px;
border-radius: 6px;
margin: 18px 0 16px;
}
.ticket-created-copy { color: var(--muted); max-width: 640px; line-height: 1.55; }
.btn-continue { gap: 10px; background: var(--panel); }
.btn-continue .bi { font-size: 18px; color: var(--text); }
.btn-sm { padding: 7px 12px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.email-history-head { align-items: flex-end; }
.email-search { display: flex; gap: 8px; align-items: center; }
.email-search input { min-width: 220px; }
.email-subject { display: inline-flex; align-items: center; gap: 6px; }
.email-subject .bi-paperclip { color: var(--muted); }
.col-action { text-align: right; white-space: nowrap; }
.table-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.per-page { color: var(--muted); font-size: 13px; }
.per-page select { margin: 0 6px; }
.mail-view { width: 100%; }
.mail-view-subject { display: flex; align-items: flex-start; gap: 10px; font-size: 22px; line-height: 1.3; }
.mail-view-subject .bi { margin-top: 4px; color: var(--cyan); }
.mail-frame {
margin: 16px 0 18px; background: #fff; border: 1px solid #d4d9e0;
border-radius: 6px; overflow: hidden;
}
.mail-iframe { width: 100%; min-height: 520px; border: 0; background: #eef1f5; }
.mail-fallback { padding: 24px; color: #222; background: #fff; }
.mail-fallback pre { white-space: pre-wrap; font-family: inherit; }
.side-card {
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
padding: 12px; margin: 0 0 14px;
}
.side-ticket {
display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
padding: 8px 4px; margin: 0; border-radius: 8px; border-bottom: 1px solid var(--line);
color: var(--text); font-size: 12px; font-weight: 600;
}
.side-ticket:last-child { border-bottom: 0; }
.sidebar nav a.side-ticket { display: grid; box-shadow: none; }
.sidebar nav a.side-ticket:hover { background: var(--panel-2, var(--bg-soft)); }
.side-ticket-id { grid-column: 1; font-family: ui-monospace, Menlo, monospace; }
.side-ticket-sub { grid-column: 1; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-open { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #3dce8a; font-weight: 800; font-size: 11px; }
.st-closed { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-weight: 700; font-size: 11px; }
.ticket-public { padding: 28px 0 48px; }
.ticket-form { width: 100%; }
.ticket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.ticket-grid .ticket-span { grid-column: 1 / -1; }
.ticket-grid .ticket-span input,
.ticket-grid .ticket-span textarea { width: 100%; max-width: none; }
.meter { margin: 12px 0; }
.meter span { color: var(--muted); font-size: 12px; }
.meter b { display: block; font-size: 14px; margin: 4px 0 6px; }
.meter i {
display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden;
}
.meter em { display: block; height: 100%; background: linear-gradient(90deg, #2ec4f3, #e8b800); border-radius: 99px; }
.live-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.email-mini { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.email-mini li { font-size: 13px; color: var(--text); }
.ref-code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 15px; word-break: break-all;
background: var(--panel-2); border: 1px dashed var(--line);
border-radius: 12px; padding: 12px 14px; margin: 10px 0;
}
.referral-card .ref-code { font-size: 22px; letter-spacing: .12em; text-align: center; }
.alert-2-warn { border-color: rgba(232,184,0,.35); background: linear-gradient(90deg, rgba(232,184,0,.12), var(--panel)); }
.alert-2-warn strong { color: var(--gold-2, #e8b800); }
.alert-2 .bi { font-size: 20px; color: inherit; margin-top: 2px; }
body.mail-open { overflow: hidden; }
.mail-layer {
position: fixed; inset: 0; z-index: 120;
background: rgba(12, 16, 22, .55);
display: flex; align-items: center; justify-content: center;
padding: 24px 16px;
}
.mail-layer[hidden] { display: none !important; }
.mail-modal {
width: min(760px, 100%);
max-height: min(88vh, 860px);
display: flex; flex-direction: column;
background: #fff; color: #1b1f24;
border: 1px solid #d8dee6;
border-radius: 12px;
box-shadow: 0 24px 64px rgba(0,0,0,.28);
overflow: hidden;
}
.mail-modal-head {
display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
padding: 18px 20px 12px; border-bottom: 1px solid #e6ebf0;
background: #f7f9fb;
}
.mail-modal-head h2 {
margin: 0; font-size: 17px; line-height: 1.35; color: #111; font-weight: 700;
}
.mail-modal-head .eyebrow { color: #1298c4; margin-bottom: 4px; }
.mail-modal-head .muted { margin: 4px 0 0; font-size: 12px; }
.mail-modal-body { background: #eef1f5; min-height: 280px; flex: 1; overflow: auto; }
.mail-modal .mail-iframe { width: 100%; min-height: 480px; border: 0; background: #eef1f5; display: block; }
.mail-modal .mail-fallback { padding: 24px; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif; color: #222; text-align: center; }
.mail-modal [data-mail-loading] { padding: 28px 24px; text-align: center; }
@media (max-width: 720px) {
.mail-layer { padding: 0; align-items: stretch; }
.mail-modal {
width: 100%;
max-height: 100%;
height: 100%;
border-radius: 0;
border: 0;
}
.mail-modal-head {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 14px 10px;
text-align: center;
}
.mail-modal-head h2 { font-size: 16px; }
.mail-modal-body { min-height: 0; }
.mail-modal .mail-iframe { min-height: calc(100dvh - 140px); }
.mail-view-subject { justify-content: center; text-align: center; font-size: 18px; }
.email-search { width: 100%; }
.email-search input { min-width: 0; width: 100%; }
.email-history-head { flex-direction: column; align-items: stretch; gap: 10px; }
.col-action { text-align: center; }
}
.ticket-desk { width: 100%; }
.ticket-hero {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
margin-bottom: 16px;
}
.ticket-hero h1 { margin: 0 0 10px; font-size: 26px; line-height: 1.25; }
.ticket-meta {
display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.ticket-meta li {
font-size: 12px; color: var(--muted); background: var(--panel-2);
border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
.ticket-meta li.is-high { color: var(--danger); }
.ticket-feed { padding: 8px 8px 4px; }
.ticket-post {
display: grid; grid-template-columns: 44px 1fr; gap: 12px;
padding: 16px 14px; border-bottom: 1px solid var(--line);
}
.ticket-post:last-child { border-bottom: 0; }
.ticket-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
font-size: 12px; font-weight: 800; letter-spacing: .04em;
background: #e8eef3; color: #3a4652;
}
.ticket-post.is-staff .ticket-avatar { background: #d9f3fb; color: #0b6f8a; }
.ticket-post.is-you .ticket-avatar { background: #e7f6ec; color: #1c6b43; }
.ticket-post-main header {
display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 8px;
}
.ticket-post-main time { color: var(--muted); font-size: 12px; }
.ticket-bubble {
background: #f4f6f8; color: #1b1f24;
border: 1px solid #e4e8ee; border-radius: 12px;
padding: 12px 14px; line-height: 1.55;
}
.ticket-bubble p { margin: 0; }
.ticket-reply, .ticket-reopen { margin-top: 16px; width: 100%; }
.ticket-actions { margin-top: 12px; }
.ticket-close-row { margin-top: 10px; }
.ticket-reopen p { margin: 0 0 12px; color: var(--muted); }
.crumbs {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
font-size: 12px; color: var(--muted); margin: 0 0 14px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs strong { color: var(--text); font-weight: 650; }
.svc-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px; align-items: start;
}
.svc-layout.is-embed { grid-template-columns: 1fr; }
.svc-side-actions { display: grid; gap: 8px; margin-top: 10px; }
.svc-list-layout {
display: grid;
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
gap: 16px; align-items: start;
}
.svc-filter .checkline { justify-content: space-between; }
.svc-filter .checkline b { color: var(--muted); font-weight: 650; }
.svc-product { display: grid; gap: 2px; color: inherit; }
.svc-product strong { color: var(--text); }
.svc-product span { color: var(--cyan); font-weight: 650; }
.secret-mask { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; }
.secret-toggle {
border: 0; background: transparent; color: var(--muted); cursor: pointer;
padding: 0 4px; display: inline-grid; place-items: center;
}
.secret-toggle:hover { color: var(--text); }
.whm-actions { margin-top: 18px; }
.whm-row {
display: flex; flex-wrap: nowrap; gap: 8px; align-items: stretch;
}
.whm-row .btn { flex: 1 1 0; white-space: nowrap; font-size: 13px; padding: 10px 12px; }
.whm-mail { margin-top: 12px; }
.svc-console { display: grid; gap: 16px; }
@media (max-width: 1100px) {
.whm-row { flex-wrap: wrap; }
.whm-row .btn { flex: 1 1 calc(50% - 8px); }
}
@media (max-width: 900px) {
.svc-layout, .svc-list-layout { grid-template-columns: 1fr; }
}
.svc-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
}
.svc-top.has-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.svc-top > .card {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
height: 100%;
}
.svc-actions-nav {
display: grid;
gap: 8px;
margin-top: 10px;
flex: 1;
align-content: start;
}
.svc-actions-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel-2);
color: var(--text);
font-size: 13px;
font-weight: 650;
}
.svc-actions-nav a:hover { border-color: var(--cyan); color: var(--text); }
.svc-kind { margin: 0; color: var(--muted); font-size: 13px; }
.svc-pack h2 { margin: 4px 0 6px; }
.svc-domain { font-weight: 700; margin: 0 0 14px; word-break: break-all; }
.svc-pack .btn { margin-top: auto; }
.svc-stats-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0;
margin-top: 6px;
}
.svc-creds { display: grid; gap: 8px; margin: 16px 0 0; }
.svc-creds div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.svc-creds dt { color: var(--muted); }
.svc-creds dd { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.gauge-row { display: flex; gap: 8px 12px; justify-content: center; align-items: flex-end; flex-wrap: nowrap; padding: 2px 0 0; width: 100%; }
.gauge { width: auto; text-align: center; flex: 1 1 0; min-width: 0; max-width: 148px; }
.gauge-ring {
width: 104px; height: 104px; margin: 0 auto 10px; border-radius: 50%;
background: conic-gradient(#1d9ec4 calc(var(--p) * 1%), #d8dee6 0);
display: grid; place-items: center;
position: relative;
}
.gauge-ring::before {
content: ""; position: absolute; inset: 14px; border-radius: 50%;
background: var(--panel);
}
.gauge.is-hot .gauge-ring { background: conic-gradient(#d44848 calc(var(--p) * 1%), #d8dee6 0); }
.gauge-ring strong {
position: relative; z-index: 1; font-size: 22px; color: var(--text);
}
.gauge span { display: block; font-size: 13px; font-weight: 700; }
.gauge small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.svc-tools {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px;
}
.svc-shortcuts .svc-tools { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc-tool {
display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center;
padding: 14px 8px; border: 1px solid var(--line); border-radius: 14px;
background: var(--panel-2); color: var(--text); font-size: 12px; font-weight: 700;
min-height: 100px; min-width: 0;
}
.svc-tool span { overflow-wrap: anywhere; }
.svc-tool:hover { border-color: var(--cyan); color: var(--text); transform: translateY(-1px); }
.svc-tool .bi { font-size: 22px; color: var(--cyan); }
.mail-create-row {
display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.mail-create-row .row { flex: 1 1 160px; margin: 0; }
.mail-at {
padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
background: var(--panel-2); font-weight: 700; margin-bottom: 2px;
}
.svc-bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 12px 0 0; }
.svc-bill-grid dt { color: var(--muted); font-size: 12px; }
.svc-bill-grid dd { margin: 4px 0 0; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-kpis a.kpi { color: var(--text); text-decoration: none; }
.dash-kpis a.kpi:hover { border-color: var(--cyan); }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.profile-card { min-width: 0; }
.profile-card-head { margin-bottom: 18px; }
.profile-card-head h2 { margin: 0; font-size: 18px; }
.profile-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 16px;
}
.profile-fields .row { margin-bottom: 12px; min-width: 0; }
.profile-span-2 { grid-column: 1 / -1; }
.profile-fields input,
.profile-fields select { min-height: 46px; }
.profile-fields input[readonly] {
opacity: .85;
cursor: default;
background: var(--panel-2);
}
.profile-save { margin-top: 8px; }
.profile-pass-copy { margin: 0 0 16px; }
.profile-pass-fields .row { margin-bottom: 14px; }
.profile-pass-fields input { min-height: 46px; }
.profile-pass-actions { margin-top: 4px; }
.pass-field {
position: relative;
display: block;
width: 100%;
min-width: 0;
}
.pass-field input {
width: 100%;
padding-right: 48px;
}
.pass-toggle {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: var(--muted);
display: grid;
place-items: center;
cursor: pointer;
border-radius: 10px;
padding: 0;
}
.pass-toggle .bi { font-size: 16px; line-height: 1; }
.pass-toggle:hover,
.pass-toggle[aria-pressed="true"] {
color: var(--cyan);
background: rgba(46, 196, 243, .1);
}
.auth-grid .row > .pass-field {
width: 100%; height: 38px; margin: 0;
}
.auth-grid .pass-field input { height: 38px; padding-top: 0; padding-bottom: 0; }
.auth-panel .pass-toggle { color: rgba(243, 246, 248, .7); }
.auth-panel .pass-toggle:hover,
.auth-panel .pass-toggle[aria-pressed="true"] { color: var(--cyan); }
@media (max-width: 1180px) {
.page-split { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
}
@media (max-width: 1080px) {
.page-split { grid-template-columns: 1fr; }
.page-rail {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.page-rail .rail-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
.profile-grid, .svc-bill-grid, .profile-fields, .ticket-grid { grid-template-columns: 1fr; }
.ticket-hero { flex-direction: column; }
}
@media (max-width: 720px) {
.svc-top, .svc-top.has-actions { grid-template-columns: 1fr; }
.svc-tools, .svc-shortcuts .svc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.page-rail { grid-template-columns: 1fr; }
.page-rail .rail-card:last-child { grid-column: auto; }
}
@media (max-width: 420px) {
.m-nav-account { padding: 8px 10px; font-size: 12px; }
.hero-ssd .checks { grid-template-columns: 1fr; }
}
.mnt-dash {
margin: 22px 0 8px; display: flex; gap: 18px; align-items: center; justify-content: space-between;
border-color: rgba(46,196,243,.28);
background:
radial-gradient(420px 120px at 100% 0%, rgba(46,196,243,.12), transparent 55%),
var(--panel);
}
.mnt-dash-copy h2 { margin: 0 0 6px; font-size: 22px; }
.mnt-dash-copy p { margin: 0; }
.mnt-dash-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mnt-phase-live { border-color: rgba(255,208,0,.45) !important; }
.mnt-phase-scheduled { border-color: rgba(46,196,243,.5) !important; }
.mnt-admin-status {
display: flex; justify-content: space-between; gap: 16px; align-items: center;
padding: 18px 20px; border-radius: 16px; margin-bottom: 20px;
border: 1px solid var(--line); background: var(--panel);
}
.mnt-admin-status p { margin: 6px 0 8px; color: var(--muted); }
.mnt-admin-status span { display: inline-block; margin-right: 14px; font-size: 13px; color: var(--cyan); }
.mnt-admin-status-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mnt-admin-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 18px; align-items: start; }
.mnt-uploads { display: grid; gap: 14px; }
.mnt-thumb { display: block; width: 100%; max-height: 120px; object-fit: cover; border-radius: 10px; margin: 8px 0; border: 1px solid var(--line); }
.mnt-preview-frame {
margin-top: 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
max-height: 640px; overflow-y: auto; transform-origin: top center;
}
.mnt-preview-frame .mnt-stage { min-height: 420px; padding: 28px 22px; }
.mnt-preview-frame .mnt-copy h1 { font-size: 28px; }
.mnt-body { margin: 0; min-height: 100vh; background: #10151b; color: #f3f6f8; }
.mnt-stage {
position: relative; min-height: 100vh; display: flex; align-items: center;
padding: 48px 28px 40px; overflow: hidden;
background:
radial-gradient(900px 420px at 80% 10%, rgba(46,196,243,.16), transparent 50%),
linear-gradient(180deg, #121820, #0e1116);
}
.mnt-stage[style*="--mnt-cover"] {
background-image:
linear-gradient(180deg, rgba(14,17,22,.72), rgba(14,17,22,.88)),
var(--mnt-cover);
background-size: cover; background-position: center;
}
.mnt-wash {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(50% 40% at 20% 80%, rgba(255,208,0,.05), transparent 60%),
linear-gradient(90deg, rgba(16,21,27,.2), transparent 30%, transparent 70%, rgba(16,21,27,.25));
}
.mnt-shell { position: relative; z-index: 1; width: min(1120px, 100%); margin: 0 auto; }
.mnt-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.mnt-brand img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.mnt-layout { display: grid; gap: 36px; align-items: center; }
.mnt-img-right .mnt-layout, .mnt-img-left .mnt-layout { grid-template-columns: 1.1fr .9fr; }
.mnt-img-left .mnt-layout { grid-template-columns: .9fr 1.1fr; }
.mnt-img-top .mnt-layout { grid-template-columns: 1fr; }
.mnt-align-center .mnt-copy { text-align: center; margin: 0 auto; }
.mnt-align-center .mnt-actions { justify-content: center; }
.mnt-align-right .mnt-copy { text-align: right; margin-left: auto; }
.mnt-align-right .mnt-actions { justify-content: flex-end; }
.mnt-copy { max-width: 36rem; }
.mnt-copy h1 {
margin: 0 0 14px; font-size: clamp(36px, 6vw, 64px); line-height: .95; letter-spacing: -.03em;
color: #7ad8f6;
}
.mnt-lead { font-size: 18px; line-height: 1.55; color: #d5dbe3; margin: 0 0 12px; }
.mnt-detail { color: #9aa6b2; margin: 0 0 22px; font-size: 15px; }
.mnt-clock {
display: inline-flex; flex-direction: column; gap: 4px;
padding: 14px 18px; border-radius: 14px; margin-bottom: 22px;
border: 1px solid rgba(46,196,243,.28); background: rgba(16,21,27,.45);
}
.mnt-clock span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.mnt-clock b { font-size: 22px; font-variant-numeric: tabular-nums; }
.mnt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mnt-figure { margin: 0; }
.mnt-figure img {
width: 100%; max-height: 420px; object-fit: cover; border-radius: 20px;
border: 1px solid rgba(46,196,243,.22); box-shadow: 0 24px 50px rgba(0,0,0,.35);
}
.mnt-foot { margin: 36px 0 0; color: #7d8792; font-size: 13px; }
@media (max-width: 900px) {
.mnt-admin-grid, .mnt-dash, .mnt-admin-status { grid-template-columns: 1fr; display: grid; }
.mnt-img-right .mnt-layout, .mnt-img-left .mnt-layout { grid-template-columns: 1fr; }
.mnt-dash-actions { justify-content: flex-start; }
}
.portal-layout {
display: grid;
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.email-portal { align-items: stretch; }
.email-portal-main { min-width: 0; display: grid; align-content: start; gap: 0; }
.email-table-card { height: 100%; display: flex; flex-direction: column; }
.email-table-card .data-table { flex: 1; }
.email-table-card .table-foot {
margin: 0;
padding: 12px 16px 14px;
border-top: 1px solid var(--line);
}
.email-portal .portal-side,
.email-portal .portal-side-card {
height: 100%;
}
.email-portal .portal-side-card {
display: flex;
flex-direction: column;
}
.email-portal .portal-side-nav { flex: 1; }
.portal-side { display: grid; gap: 14px; }
.portal-side-card h3 { margin: 0 0 8px; }
.portal-kpi-label {
display: flex; align-items: center; gap: 8px;
margin: 0 0 8px; font-weight: 800; font-size: 15px;
}
.portal-side-nav { display: grid; gap: 4px; margin-top: 8px; }
.portal-side-nav a {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 650;
}
.portal-side-nav a:hover { background: var(--panel-2); color: var(--text); }
.portal-side-nav a.is-on {
background: #3a414c; color: #fff;
}
html[data-theme="light"] .portal-side-nav a.is-on {
background: #3a414c; color: #fff;
}
.portal-side-nav a b { color: var(--muted); font-weight: 700; }
.portal-side-nav a.is-on b { color: #fff; }
.inv-pill {
display: inline-flex; align-items: center; justify-content: center;
min-width: 92px; padding: 4px 12px; border-radius: 999px;
font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff;
}
.inv-pill-paid { background: #2ea44f; }
.inv-pill-unpaid { background: #d4a017; color: #1a1404; }
.inv-pill-cancelled { background: #6b7280; }
.inv-pill-refunded { background: #2563eb; }
.inv-pill-rejected { background: #c0392b; }
.btn-teal {
background: #2a8f96; color: #fff; border: 0;
}
.btn-teal:hover { background: #237980; color: #fff; }
.factura-wrap {
display: flex; flex-direction: column; align-items: center;
width: min(860px, 100%); margin: 0 auto; padding: 8px 0 28px;
}
.factura {
width: 100%;
background: #fff; color: #16181d;
padding: 36px 42px 28px;
border: 1px solid #e4e7ec;
box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.factura h1 {
margin: 8px 0 0; font-size: 22px; letter-spacing: -.03em; color: #111;
}
.factura-ident { min-width: 0; }
.factura-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.factura-brand { display: flex; align-items: center; gap: 12px; }
.factura-brand img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.factura-brand strong { font-size: 18px; color: #111; }
.factura-stamp {
margin: 0; font-size: 28px; font-weight: 800; letter-spacing: .04em;
}
.factura-stamp-paid { color: #2ea44f; }
.factura-stamp-unpaid { color: #c0392b; }
.factura-stamp-cancelled, .factura-stamp-rejected { color: #6b7280; }
.factura-stamp-refunded { color: #2563eb; }
.factura-cols {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px;
}
.factura-k {
margin: 12px 0 4px; color: #6b7280; font-size: 12px; font-weight: 800;
text-transform: none;
}
.factura-v { margin: 0; font-size: 14px; line-height: 1.5; color: #1b1f24; }
.factura-items, .factura-ledger {
width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px;
}
.factura-items thead tr:first-child th,
.factura-ledger thead tr:first-child th {
background: #f3f4f6; color: #111; font-weight: 800; text-align: left; padding: 10px 12px;
border: 1px solid #d9dee6;
}
.factura-ledger thead tr:first-child th {
background: #2a8f96; color: #fff; border-color: #2a8f96;
}
.factura-items th, .factura-items td,
.factura-ledger th, .factura-ledger td {
padding: 9px 12px; border: 1px solid #d9dee6; text-align: left;
}
.factura-items td:last-child, .factura-ledger td:last-child,
.factura-items th:last-child, .factura-ledger th:last-child { text-align: right; }
.factura-sub td { font-weight: 700; }
.factura-total td {
background: #00344f; color: #fff; border-color: #00344f;
font-weight: 800; font-size: 15px;
}
.factura-ref { word-break: break-all; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.factura-balance td { font-weight: 800; }
.factura-actions { display: flex; justify-content: flex-end; gap: 10px; }
.factura-actions .btn { color: #333; border-color: #cfd5dd; background: #fff; }
.factura-wrap.is-pay-desk {
width: min(860px, 100%);
padding-top: 6px;
padding-bottom: calc(var(--footer-h) + 24px);
}
.main:has(.is-pay-desk) { padding-top: 20px; }
.main:has(.is-pay-desk) .crumbs { margin-bottom: 38px; }
.factura-toolbar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: min(520px, 100%);
margin: 0 auto 20px;
padding: 0;
border-bottom: 0;
}
.factura-wrap.is-pay-desk .factura-toolbar {
width: 100%;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 16px;
}
.factura-toolbar .btn,
.factura-toolbar a.btn {
width: 100%;
min-height: 48px;
padding: 12px 16px;
justify-content: center;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
font-weight: 800;
letter-spacing: .04em;
box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.factura-toolbar .btn:hover,
.factura-toolbar a.btn:hover {
transform: translateY(-1px);
border-color: rgba(46,196,243,.45) !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
box-shadow: 0 14px 28px rgba(0,0,0,.28) !important;
}
html[data-theme="light"] .factura-toolbar .btn,
html[data-theme="light"] .factura-toolbar a.btn {
background: #fff !important;
border-color: #d8dee6 !important;
color: #1b1f24 !important;
-webkit-text-fill-color: #1b1f24 !important;
box-shadow: 0 8px 18px rgba(16, 22, 30, .08) !important;
}
.factura.is-print-only { display: none !important; }
@media (max-width: 560px) {
.factura-toolbar,
.factura-toolbar.is-readonly,
.factura-wrap.is-pay-desk .factura-toolbar { grid-template-columns: 1fr; gap: 10px; }
}
.factura-note { width: min(860px, 100%); margin: 0 auto 28px; }
.pm-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-form { margin-bottom: 16px; }
.pm-form h2 { margin: 0 0 8px; font-size: 18px; }
.pm-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.pm-name { display: inline-flex; align-items: center; gap: 10px; }
.pm-name .bi { font-size: 20px; color: #1a66c8; }
.pm-name em { display: block; font-style: normal; color: var(--muted); font-size: 13px; }
.pm-inline { display: inline; }
.pm-edit { display: flex; gap: 8px; align-items: center; }
.pm-edit input { min-height: 36px; }
.gauge { --p: 0; --g: #22c55e; --gauge-track: #d5dbe3; text-align: center; }
.gauge.is-ok { --g: #22c55e; }
.gauge.is-warn { --g: #eab308; }
.gauge.is-hot { --g: #ef4444; }
.gauge.is-wait { --g: var(--muted); }
html[data-theme="dark"] .gauge { --gauge-track: #3a4450; }
.gauge-arc {
width: 100%;
max-width: 148px;
margin: 0 auto 4px;
position: relative;
overflow: visible;
}
.gauge-arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-track {
stroke: var(--gauge-track);
stroke-width: 12;
stroke-linecap: round;
}
.gauge-fill {
stroke-width: 12;
stroke-linecap: round;
stroke-dasharray: 0 100;
stroke-dashoffset: 0;
transition: stroke-dasharray .85s cubic-bezier(.22, 1, .36, 1);
}
.gauge-fill-glow {
stroke-width: 16;
opacity: .9;
}
.gauge-value {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: baseline;
justify-content: center;
gap: 1px;
z-index: 1;
color: var(--g);
font-variant-numeric: tabular-nums;
line-height: 1;
transition: color .45s ease;
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--g) 35%, transparent));
}
.gauge-value strong {
position: static;
font-size: 28px;
font-weight: 800;
letter-spacing: -.04em;
color: inherit;
}
.gauge-value em {
font-style: normal;
font-size: 12px;
font-weight: 800;
opacity: .88;
}
.svc-stats .gauge span { font-size: 12px; font-weight: 700; margin-top: 2px; }
.svc-stats .gauge small {
display: block;
color: var(--muted);
font-size: 11px;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gauge-updated {
margin: 10px 0 0;
text-align: center;
color: #1a66c8;
font-size: 12px;
font-weight: 650;
width: 100%;
}
.reset-ok { max-width: 360px; }
.reset-ok .muted { margin: 0 0 4px; }
.reset-ok .auth-btn { margin-top: 16px; }
.reset-ok-mark {
width: 78px;
height: 78px;
margin: 4px 0 18px;
animation: reset-ok-pop .55s cubic-bezier(.22, 1, .36, 1);
}
.reset-ok-mark svg { display: block; width: 78px; height: 78px; }
.reset-ok-ring {
fill: rgba(34, 197, 94, .12);
stroke: #22c55e;
stroke-width: 2.4;
}
.reset-ok-check {
fill: none;
stroke: #22c55e;
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 36;
stroke-dashoffset: 36;
animation: reset-ok-draw .5s .18s ease forwards;
}
@keyframes reset-ok-pop {
from { transform: scale(.72); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes reset-ok-draw {
to { stroke-dashoffset: 0; }
}
.svc-domain a { color: #1a66c8; font-weight: 700; }
.svc-actions-nav a { justify-content: flex-start; }
@media (max-width: 900px) {
.portal-layout { grid-template-columns: 1fr; }
.factura-cols { grid-template-columns: 1fr; }
.factura { padding: 24px 18px; }
}
.svc-console .svc-top.has-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.svc-console .svc-shortcuts .svc-tools {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 720px) {
.svc-console .svc-top.has-actions { grid-template-columns: 1fr; }
.svc-console .svc-shortcuts .svc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.invoice-admin .order-alert {
grid-column: 1 / -1;
min-height: 0;
}
.order-alert textarea { min-height: 140px; }
.order-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.order-filter {
display: inline-flex; align-items: center; gap: 8px;
height: 38px; padding: 0 14px; border-radius: 999px;
background: var(--panel); border: 1px solid var(--line); color: var(--text);
font-weight: 700; text-decoration: none; font-size: 13px;
}
.order-filter span {
display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px;
align-items: center; justify-content: center; border-radius: 999px;
background: var(--bg-soft); font-size: 12px; font-variant-numeric: tabular-nums;
}
.order-filter.is-on { background: var(--gold); color: #111; border-color: transparent; }
.order-filter.is-on span { background: rgba(0,0,0,.12); color: #111; }
.order-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.order-preset {
border: 1px solid var(--line); background: var(--bg-soft); color: var(--text);
border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.order-preset:hover { border-color: rgba(46,196,243,.45); }
.order-preset.is-on { background: var(--gold); color: #111; border-color: transparent; }
.order-notes {
margin: 0; padding: 12px 16px; border-top: 1px solid var(--line);
white-space: pre-wrap; font: 13px/1.55 inherit; color: var(--muted);
}
.svc-admin label { display: grid; gap: 6px; margin: 10px 0; font-size: 12px; color: var(--muted); }
.svc-admin .checkline { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 13px; }
.svc-admin input[type=text],
.svc-admin input[type=email],
.svc-admin input[type=date],
.svc-admin select,
.svc-admin textarea {
min-height: 46px;
background: var(--input);
color: var(--text);
}
.whm-import-form .grid-2 { margin: 4px 0 8px; }
.whm-import-note {
margin: 12px 0 16px; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--line); background: var(--panel-2); font-size: 13px; color: var(--muted);
}
.mail-compose h2 { margin: 4px 0 8px; font-size: 20px; }
.mail-compose-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: end;
margin: 14px 0;
}
.mail-kind, .mail-audience {
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px 14px;
margin: 0 0 14px;
}
.mail-kind legend, .mail-audience legend {
padding: 0 6px;
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--muted);
}
.mail-kind { display: grid; gap: 8px; min-width: 220px; }
.mail-compose textarea { min-height: 220px; resize: vertical; }
.mail-clients {
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px 14px;
margin: 8px 0 16px;
background: var(--panel-2);
max-height: 280px;
overflow: auto;
}
.mail-clients-bar {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin-bottom: 8px;
}
.mail-client-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mail-client-list li { margin: 0; }
.mail-compose-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mail-due { margin: 16px 0; display: grid; gap: 8px; }
.mail-due .btn { width: max-content; }
.whm-import-table { min-width: 1100px; }
.whm-import-table [data-domain-expiry].is-overdue { color: var(--danger); font-weight: 700; }
@media (max-width: 900px) {
.mail-compose-grid { grid-template-columns: 1fr; }
}
@media print {
@page { size: A4 portrait; margin: 8mm; }
html, body {
background: #fff !important;
color: #111 !important;
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
height: auto !important;
}
.sidebar, .page-banner, .site-footer, .crumbs, .factura-actions, .factura-toolbar, .pay-panel, .pay-secure, .theme-toggle, .nav-burger { display: none !important; }
.app, .main, .factura-wrap {
display: block !important;
background: #fff !important;
min-height: 0 !important;
height: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.factura, .factura.is-print-only {
display: block !important;
box-shadow: none !important;
border: 1px solid #d9dee6 !important;
width: 100% !important;
max-width: none !important;
padding: 18px 20px 14px !important;
page-break-inside: avoid;
break-inside: avoid;
page-break-after: avoid;
}
.factura-brand img { display: none !important; }
.factura-ident strong { display: block; font-size: 18px !important; color: #111 !important; }
.factura h1 { font-size: 16px !important; margin: 6px 0 0 !important; color: #111 !important; font-weight: 800; }
.factura-stamp { font-size: 18px !important; }
.factura-stamp-unpaid { color: #c0392b !important; }
.factura-cols { gap: 16px !important; margin-bottom: 14px !important; }
.factura-k { margin: 8px 0 2px !important; font-size: 11px !important; color: #6b7280 !important; }
.factura-v { font-size: 12px !important; line-height: 1.4 !important; color: #1b1f24 !important; }
.factura-items thead tr:first-child { display: none !important; }
.factura-items, .factura-ledger { margin: 0 0 12px !important; font-size: 11px !important; }
.factura-items th, .factura-items td,
.factura-ledger th, .factura-ledger td { padding: 6px 8px !important; }
.factura-items thead tr:last-child th {
background: #f3f4f6 !important; color: #111 !important; border-color: #d9dee6 !important;
}
.factura-total td {
background: #00344f !important; color: #fff !important; border-color: #00344f !important;
}
.factura-ledger thead tr:first-child th {
background: #2a8f96 !important; color: #fff !important; border-color: #2a8f96 !important;
}
}